/* landing.css */

      :root{
        --bg-dark: #053143;
        --bg-light: #ffffff;
        --accent: #f58634;
        --text-dark: #052433;
        --border-input: rgba(255,255,255,.35);
        --radius-big: 28px;
      }
      *{box-sizing:border-box;}
      body{
        margin:0;
        font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        background:var(--bg-light);
        color:var(--text-dark);
      }
      /* ====== LAYOUT GENERAL ====== */
      .page-contact{
        min-height:100vh;
        display:grid;
        grid-template-columns: 1.05fr 0.95fr;
      }

      /* ====== COLUMNA IZQ (contenidos) ====== */
      .left-pane{
        background:var(--bg-light);
        display:flex;
        flex-direction:column;
        gap:40px;
        margin: auto;
      }
      .logo-blanco{
        display:flex;
        justify-content: center;
        padding: 40px;
        background-color: var(--bg-dark);

      }

      .logo-blanco img{
        margin: 20px;
      }

      .logo{
        max-width:261px;
      }
      .hero{
        max-width:520px;
      }
      .hero-title{
        font-size:clamp(1rem,3vw,2rem);
        line-height:1.08;
      }
      .hero-text{
        margin:0;
        line-height:1.55;
        font-size:1rem;
      }

      .hidden-fields-container{
            visibility: hidden !important;
      }

      .screen-reader-response, .wpcf7-response-output{
    color: #f58634;
    }


      /* ====== SERVICIOS ====== */
      .services-block{
        max-width:650px;
      }
      .services-title{
        font-size:1.4rem;
        margin:0;
      }
      .services-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(220px,1fr));
        gap:18px 20px;
      }
      .service-card{
        border-radius:20px;
        box-shadow:0 8px 20px rgba(0,0,0,.02);
        font-weight:400;
      }
      .service-pill{
        display:inline-block;
        background:var(--accent);
        color:#fff;
        padding:4px 14px 5px;
        border-radius:999px;
        font-size:1.2rem;
        margin-bottom:10px;
        padding-right: 30px;
        padding-top: 8px
      }
      .service-text{
        margin:0;
        font-size: 1rem;
        line-height:1.45;
        font-weight:200 !important;
      }

      .icon-social{
          width: 50px;
          height: 50px;
          display: inline-block;
          fill: #f58634;          /* color del ícono */
          cursor: pointer;
          }

          .icon-social:hover{
          opacity: .8;
          }



      /* ====== FRASE FINAL ====== */
      .quote-block{
        max-width:600px;
      }
      .quote-text{
        font-weight:700;
        font-size:1.2rem;
        margin:0 0 10px;
      }
      .quote-sub{
        margin:0;
        line-height:1.4;
        font-size:1.2rem;
        max-width: 500px;
      }
      .footer-left, .footer-right{
        margin-top:auto;
        font-size:.7rem;
        opacity:.6;
      }

      /* ====== COLUMNA DERECHA (form) ====== */
      .right-pane{
        background:var(--bg-dark);
        padding:54px clamp(30px,3.4vw,60px) 48px;
        display:flex;
        flex-direction:column;
        gap:0px;
      }
      .form-title{
        color:#fff;
        font-size:1.9rem;
        margin:0 0 26px;
        line-height:1.05;
        max-width:360px;
      }
      form.contact-form{
        display:flex;
        flex-direction:column;
        gap:14px;
        padding-top:0 !important;
        
      }
      .form-row-2{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
      }
      .field{
        display:flex;
        flex-direction:column;
        gap:6px;
        color:#fff;
        font-size:.82rem;
      }
      .field label{
        font-weight:500;
      }
      .input-shell{
        background:transparent;
        border:1px solid var(--border-input);
        border-radius:999px;
        display:flex;
        align-items:center;
        padding:0 16px;
        height:48px;
      }
      .input-shell input,
      .input-shell select{
        background:transparent;
        border:none;
        outline:none;
        color:#fff;
        width:100%;
        height:100%;
        font-family:inherit;
      }
      .input-shell option{ color:#000; }
      .field-textarea .input-shell{
        border-radius:26px;
        height:auto;
        padding:12px 16px 12px;
      }
      .field-textarea textarea{
        background:transparent;
        border:none;
        outline:none;
        width:100%;
        min-height:110px;
        resize:vertical;
        color:#fff;
        font-family:inherit;
      }
      .submit-btn{
        border:none;
        background:#fff;
        color:var(--bg-dark);
        border-radius:999px;
        padding:11px 30px;
        font-weight:600;
        font-size:.9rem;
        cursor:pointer;
        transition:transform .1s ease-out;
      }
      .submit-btn:hover{
        transform:translateY(-1px);
      }

      .form-submit-wrap{
          align-items: right !important;
          display: flex;
          text-align: right !important;
          margin-left: 65% !important;    
      }

      .iconsContacto{
          color: var(--accent) !important;
      }

      /* ====== BLOQUE “CONVERSEMOS” (abajo derecha) ====== */
      .contact-info{
        margin-top:auto;
        color:#fff;
      }
      .contact-title{
        font-size:1.8rem;
        margin:0 0 8px;
      }
      .contact-text{
        margin:0 0 10px;
        font-size:.9rem;
        line-height:1.45;
        max-width: 400px;
        padding-top: 20px;
      }
      .contact-small{
        font-size:.75rem;
        opacity:.7;
        margin-bottom:18px;
      }
      .social-row{
        display:flex;
        gap:16px;
      }
      .social{
        width:34px; height:34px;
        border:1px solid rgba(255,255,255,.4);
        border-radius:999px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-weight:700;
        text-decoration:none;
      }

      /* quitar espacio entre título y formulario */
      .form-title {
        margin-bottom: 0 !important;
      }

      .form-shell .wpcf7,
      .form-shell .wpcf7-form {
        margin-top: 0 !important;
      }

      .wpcf7-form-control-wrap{
        background-color: transparent !important;
      }

        .input-shell input,
    .input-shell select {
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        font-family: inherit;
    }

        /* Solución para autocompletado Chrome, Edge, Safari */
    .input-shell input:-webkit-autofill,
    .input-shell textarea:-webkit-autofill,
    .input-shell select:-webkit-autofill {
        background: transparent !important;
        -webkit-box-shadow: 0 0 0 1000px #053143 inset !important; /* tu color de fondo oscuro */
        -webkit-text-fill-color: #fff !important; /* texto blanco */
        color: #fff !important;
        border-radius: 999px;
    }

    /* Firefox */
    .input-shell input:autofill,
    .input-shell textarea:autofill,
    .input-shell select:autofill {
        background: #053143 !important;
        color: #fff !important;
    }

      /* CF7 a veces mete un <p> vacío arriba */
      .form-shell .wpcf7-form > p:first-child {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }

      .footer-right {
          display: block;
          margin-top: 20px;
          }

      /* ====== RESPONSIVE ====== */
      @media (max-width: 992px){
        .page-contact{
          display:flex;
          flex-direction:column;
        }
        .right-pane{
          order:2;             /* pero luego lo cambiamos según lo que pediste */
        }
        /* Tu requisito: móvil = A+B (left top) → form → servicios → frase → contacto */
        .left-pane{ order:1; }
        .right-pane{ order:2; }
        .services-block{ order:3; }
        .quote-block{ order:4; }
        .contact-info{ order:5; }

        .services-grid{ grid-template-columns:1fr; }
        .form-row-2{ grid-template-columns:1fr; }
        .form-title{ max-width:none; }

        .right-pane h2{
          padding-top:20px;
        }

        form.contact-form{
          padding-right: 0 !important;
        }

          .footer-left{
            display: none;
          }

          .logo-negro{
              Display: none;
          }

          .header-logo{
              background: var(--bg-dark) !important;
              width: 100%;
          }

      /*. .service-text-block{
          max-width: 50% !important;
        }

        left-pane{
          padding-left: 50px !important;
          padding-right: 0 !important;       
          }  */
      }

      /* Un poco más apretado en móviles chicos */
      @media (max-width: 600px){
        .left-pane{
          padding:28px 20px 14px;
        }
        .right-pane{
          padding:28px 20px 42px;
        }
        .hero-title{ font-size:1.95rem; }
        .services-title{ font-size:1.2rem; }
        .form-title{ font-size:1.5rem; }
        .submit-btn{ align-self:stretch; text-align:center; justify-content:center; }
      }


      @media (min-width: 992px){
          .right-pane{
              margin: auto;
          }

          form.contact-form{
            margin-top: 0 !important;
            padding-top: 0 !important;
          }

          .form-title{
            margin-bottom: 0 !important;
            margin-top: 60px !important;
            padding-bottom: 0 !important;
          }

          .footer-right{
            display: none;
          }
          
          .contact-text{
          max-width: 320px;
          }
          .logo-blanco, .header-logo{
              Display: none;
          }


      }