:root{
   --navy:#0b2735;
   --navy-dark:#071c27;
   --blue:#2994b2;
   --blue-light:#91d9e8;
   --blue-pale:#eaf7fa;
   --green:#20a86b;
   --text:#28495a;
   --text-light:#67808e;
   --border:#dce6ea;
   --background:#fff;
   --background-soft:#f7f9fa;
   --shadow:0 15px 45px rgba(10,38,52,.08);
   --radius:18px;
 }
 
 
 *{
   box-sizing:border-box;
   margin:0;
   padding:0;
 }
 
 
 html{
   scroll-behavior:smooth;
 }
 
 
 body{
   font-family:"Manrope",Arial,sans-serif;
   color:var(--text);
   background:#fff;
   line-height:1.6;
   -webkit-font-smoothing:antialiased;
 }
 
 
 img{
   max-width:100%;
   display:block;
 }
 
 
 a{
   color:inherit;
   text-decoration:none;
 }
 
 
 button,
 input,
 textarea{
   font:inherit;
 }
 
 
 button{
   cursor:pointer;
 }
 
 
 .container{
   width:min(1180px,calc(100% - 48px));
   margin:0 auto;
 }
 
 
 .section{
   padding:110px 0;
 }
 
 
 .eyebrow{
   display:inline-block;
   color:var(--blue);
   font-size:10px;
   font-weight:800;
   letter-spacing:3px;
 }
 
 
 .eyebrow-light{
   color:#8ddaea;
 }
 
 
 h1,
 h2,
 h3{
   color:var(--navy);
   line-height:1.08;
   letter-spacing:-1.5px;
 }
 
 
 p{
   color:var(--text-light);
 }
 
 
 .button{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-height:50px;
   padding:0 25px;
   border-radius:999px;
   font-size:13px;
   font-weight:800;
   transition:
     transform .2s ease,
     background .2s ease,
     color .2s ease,
     border-color .2s ease,
     box-shadow .2s ease;
 }
 
 
 .button:hover{
   transform:translateY(-2px);
 }
 
 
 .button-primary{
   color:#fff;
   background:var(--blue);
   box-shadow:0 10px 25px rgba(41,148,178,.16);
 }
 
 
 .button-primary:hover{
   background:#2286a3;
 }
 
 
 .button-light{
   color:var(--navy);
   background:#fff;
 }
 
 
 .button-whatsapp{
   color:#fff;
   background:rgba(255,255,255,.08);
   border:1px solid rgba(255,255,255,.5);
 }
 
 
 .button-whatsapp:hover{
   background:var(--green);
   border-color:var(--green);
   box-shadow:0 8px 25px rgba(32,168,107,.25);
 }
 
 
 .button-full{
   width:100%;
 }
 
 
 .section-heading{
   max-width:760px;
   margin-bottom:55px;
 }
 
 
 .section-heading h2{
   margin:15px 0 18px;
   font-size:clamp(38px,4.5vw,58px);
 }
 
 
 .section-heading p{
   max-width:720px;
   font-size:16px;
   line-height:1.8;
 }
 
 
 /* =========================================================
    HEADER
 ========================================================= */
 
 .site-header{
   position:sticky;
   top:0;
   z-index:1000;
   height:70px;
   background:rgba(255,255,255,.96);
   border-bottom:1px solid rgba(220,230,234,.8);
   backdrop-filter:blur(12px);
 }
 
 
 .header-inner{
   height:70px;
   display:flex;
   align-items:center;
   justify-content:space-between;
 }
 
 
 .brand{
   display:flex;
   align-items:center;
   gap:10px;
   flex-shrink:0;
 }
 
 
 .brand-logo{
   width:42px;
   height:42px;
   object-fit:contain;
 }
 
 
 .brand span{
   color:var(--navy);
   font-size:12px;
   font-weight:800;
   letter-spacing:2px;
 }
 
 
 .main-nav{
   display:flex;
   align-items:center;
   gap:27px;
 }
 
 
 .main-nav a{
   color:#405662;
   font-size:12px;
   font-weight:700;
   transition:color .2s ease;
 }
 
 
 .main-nav a:hover{
   color:var(--blue);
 }
 
 
 .main-nav .nav-cta{
   color:#fff;
   background:var(--blue);
   padding:13px 22px;
   border-radius:999px;
   box-shadow:0 8px 20px rgba(41,148,178,.15);
 }
 
 
 .main-nav .nav-cta:hover{
   color:#fff;
   background:#2187a4;
 }
 
 
 .mobile-menu-button{
   display:none;
   width:42px;
   height:42px;
   border:1px solid var(--border);
   background:#fff;
   border-radius:10px;
 }
 
 
 .mobile-menu-button span{
   display:block;
   width:18px;
   height:2px;
   margin:4px auto;
   background:var(--navy);
 }
 
 
 /* =========================================================
    HERO
 ========================================================= */
 
 .hero{
   position:relative;
   min-height:620px;
   display:flex;
   align-items:center;
   overflow:hidden;
   isolation:isolate;
 }
 
 
 .hero-background{
   position:absolute;
   inset:0;
   z-index:-3;
   overflow:hidden;
 }
 
 
 .hero-background-slide{
   position:absolute;
   inset:0;
   background-size:cover;
   background-position:center;
   background-repeat:no-repeat;
   opacity:0;
   transform:scale(1.02);
   transition:
     opacity 1.2s ease-in-out,
     transform 6s ease;
   will-change:opacity,transform;
 }
 
 
 .hero-background-slide.active{
   opacity:1;
   transform:scale(1);
 }
 
 
 .hero-overlay{
   position:absolute;
   inset:0;
   z-index:-2;
   background:
     linear-gradient(
       90deg,
       rgba(6,31,43,.94) 0%,
       rgba(6,31,43,.78) 48%,
       rgba(6,31,43,.45) 100%
     );
   pointer-events:none;
 }
 
 
 .hero-inner{
   position:relative;
   z-index:2;
   display:grid;
   grid-template-columns:minmax(0,1fr) 440px;
   gap:80px;
   align-items:center;
   padding-top:45px;
   padding-bottom:45px;
 }
 
 
 .hero-content{
   max-width:650px;
 }
 
 
 .hero h1{
   margin:0 0 20px;
   color:#fff;
   font-size:clamp(48px,6vw,78px);
   line-height:1.02;
   letter-spacing:-3.5px;
 }
 
 
 .hero h1 span{
   display:block;
   color:var(--blue-light);
 }
 
 
 .hero-description{
   max-width:560px;
   margin-bottom:28px;
   color:rgba(255,255,255,.9);
   font-size:17px;
   line-height:1.7;
 }
 
 
 .hero-actions{
   display:flex;
   flex-wrap:wrap;
   gap:12px;
 }
 
 
 .hero-benefits{
   display:flex;
   flex-wrap:wrap;
   gap:16px;
   margin-top:22px;
 }
 
 
 .hero-benefits span{
   color:rgba(255,255,255,.78);
   font-size:11px;
   font-weight:700;
 }
 
 
 .hero-benefits span::first-letter{
   color:var(--blue-light);
 }
 
 
 /* =========================================================
    FORMULARIO
 ========================================================= */
 
 .quote-card{
   position:relative;
   padding:40px 38px;
   background:linear-gradient(180deg,#fff 0%,#fbfeff 100%);
   border:1px solid rgba(145,217,232,.55);
   border-radius:22px;
   box-shadow:
     0 30px 80px rgba(0,0,0,.22),
     0 0 0 1px rgba(255,255,255,.18);
   overflow:hidden;
 }
 
 
 .quote-card::before{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   height:5px;
   background:linear-gradient(
     90deg,
     var(--blue),
     var(--blue-light)
   );
 }
 
 
 .quote-card h2{
   margin:14px 0 10px;
   font-size:30px;
   letter-spacing:-1px;
 }
 
 
 .quote-card>p{
   margin-bottom:24px;
   font-size:13px;
   line-height:1.7;
 }
 
 
 .form-group{
   margin-bottom:18px;
 }
 
 
 .form-group label{
   display:block;
   margin-bottom:7px;
   color:var(--navy);
   font-size:11px;
   font-weight:800;
 }
 
 
 .form-group input,
 .form-group textarea{
   width:100%;
   padding:0 14px;
   border:1px solid #cfdee4;
   border-radius:10px;
   outline:none;
   color:var(--navy);
   background:#fff;
   font-size:13px;
   transition:
     border-color .2s ease,
     box-shadow .2s ease;
 }
 
 
 .form-group input{
   height:54px;
 }
 
 
 .form-group textarea{
   min-height:95px;
   padding-top:13px;
   padding-bottom:13px;
   resize:vertical;
 }
 
 
 .form-group input:focus,
 .form-group textarea:focus{
   border-color:var(--blue);
   box-shadow:0 0 0 3px rgba(41,148,178,.1);
 }
 
 
 .form-group input::placeholder,
 .form-group textarea::placeholder{
   color:#9bb0ba;
 }
 
 
 .form-error{
   display:block;
   min-height:0;
   margin-top:4px;
   color:#c94343;
   font-size:10px;
 }
 
 
 .form-submit{
   width:100%;
   height:56px;
   margin-top:3px;
   border:0;
   border-radius:999px;
   color:#fff;
   background:var(--blue);
   font-size:13px;
   font-weight:800;
   box-shadow:0 14px 30px rgba(41,148,178,.24);
   transition:
     transform .2s ease,
     background .2s ease;
 }
 
 
 .form-submit:hover{
   transform:translateY(-2px);
   background:#2387a5;
 }
 
 
 .form-note{
   margin-top:12px;
   text-align:center;
   font-size:9px!important;
   color:#9aaeb7!important;
 }
 
 
 .form-success{
   margin-top:15px;
   padding:13px;
   border-radius:10px;
   color:#176d49;
   background:#eaf8f1;
   font-size:12px;
   text-align:center;
 }
 
 
 /* =========================================================
    FORMULARIO MULTIPASO
 ========================================================= */
 
 .form-step-intro{
   margin-bottom:24px;
 }
 
 
 .form-progress{
   display:flex;
   align-items:center;
   gap:7px;
   margin-bottom:25px;
 }
 
 
 .progress-dot{
   width:8px;
   height:8px;
   border-radius:50%;
   background:#d9e5e9;
   transition:all .25s ease;
 }
 
 
 .progress-dot.active{
   width:24px;
   border-radius:20px;
   background:var(--blue);
 }
 
 
 .form-step[hidden]{
   display:none!important;
 }
 
 
 .form-step:not([hidden]){
   display:block;
   animation:formStepIn .3s ease;
 }
 
 
 @keyframes formStepIn{
   from{
     opacity:0;
     transform:translateX(8px);
   }
 
   to{
     opacity:1;
     transform:translateX(0);
   }
 }
 
 
 .form-step .form-group{
   margin-bottom:16px;
 }
 
 
 /* CORREGIDO: coincide con el HTML */
 
 .form-navigation{
   display:flex;
   align-items:center;
   gap:10px;
   margin-top:8px;
 }
 
 
 .form-next,
 .form-back{
   height:52px;
   border-radius:999px;
   font-size:12px;
   font-weight:800;
   transition:all .2s ease;
 }
 
 
 .form-next{
   flex:1;
   min-width:155px;
   border:0;
   color:#fff;
   background:var(--blue);
   box-shadow:0 10px 22px rgba(41,148,178,.18);
 }
 
 
 .form-next:hover{
   background:#2387a5;
   transform:translateY(-2px);
 }
 
 
 .form-step>.form-next{
   width:155px;
   flex:none;
 }
 
 
 .form-back{
   padding:0 20px;
   border:1px solid var(--border);
   color:var(--text);
   background:#fff;
 }
 
 
 .form-back:hover{
   border-color:var(--blue);
   color:var(--blue);
 }
 
 
 .form-step .form-submit{
   margin-top:0;
 }
 
 
 .form-step .form-note{
   margin-top:12px;
 }
 
 
 /* =========================================================
    INTRO
 ========================================================= */
 
 .intro-grid{
   display:grid;
   grid-template-columns:1.05fr .95fr;
   gap:80px;
   align-items:center;
 }
 
 
 .intro-image-wrapper{
   position:relative;
 }
 
 
 .intro-image{
   width:100%;
   height:520px;
   object-fit:cover;
   border-radius:20px;
 }
 
 
 .image-caption{
   display:none;
 }
 
 
 .intro-content h2{
   max-width:620px;
   margin:15px 0 22px;
   font-size:clamp(38px,4.5vw,58px);
 }
 
 
 .intro-content p{
   margin-bottom:18px;
   max-width:570px;
   font-size:14px;
   line-height:1.85;
 }
 
 
 .intro-content .button{
   margin-top:12px;
 }
 
 
 /* =========================================================
    TIPOS
 ========================================================= */
 
 .types-section{
   background:var(--background-soft);
 }
 
 
 .types-grid{
   display:grid;
   grid-template-columns:repeat(2,1fr);
   gap:25px;
 }
 
 
 .type-card{
   overflow:hidden;
   background:#fff;
   border:1px solid var(--border);
   border-radius:20px;
   transition:
     transform .25s ease,
     box-shadow .25s ease;
 }
 
 
 .type-card:hover{
   transform:translateY(-5px);
   box-shadow:var(--shadow);
 }
 
 
 .type-image-wrapper{
   height:330px;
   overflow:hidden;
 }
 
 
 .type-image{
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform .5s ease;
 }
 
 
 .type-card:hover .type-image{
   transform:scale(1.03);
 }
 
 
 .type-content{
   padding:30px;
 }
 
 
 .type-number{
   display:none;
 }
 
 
 .type-content h3{
   margin-bottom:12px;
   font-size:25px;
 }
 
 
 .type-content p{
   margin-bottom:22px;
   font-size:14px;
   line-height:1.75;
 }
 
 
 .type-content a{
   color:var(--blue);
   font-size:12px;
   font-weight:800;
 }
 
 
 /* =========================================================
    SOBRE NOSOTROS
 ========================================================= */
 
 .about-section{
   position:relative;
   overflow:hidden;
   padding-top:90px;
   padding-bottom:90px;
   background:
     linear-gradient(
       180deg,
       #f8fbfc 0%,
       #fff 100%
     );
 }
 
 
 .about-section::before{
   content:"";
   position:absolute;
   width:430px;
   height:430px;
   left:-240px;
   top:80px;
   border-radius:50%;
   background:
     radial-gradient(
       circle,
       rgba(145,217,232,.18) 0%,
       rgba(145,217,232,0) 70%
     );
   pointer-events:none;
 }
 
 
 .about-section::after{
   content:"";
   position:absolute;
   width:360px;
   height:360px;
   right:-220px;
   bottom:-190px;
   border-radius:50%;
   border:1px solid rgba(41,148,178,.08);
   pointer-events:none;
 }
 
 
 .about-section>.container{
   position:relative;
   z-index:2;
 }
 
 
 /* ---------------------------------------------------------
    CABECERA
 --------------------------------------------------------- */
 
 .about-heading{
   display:grid;
   grid-template-columns:minmax(0,1.15fr) minmax(300px,.75fr);
   column-gap:80px;
   align-items:end;
   max-width:1120px;
   margin:0 auto 48px;
 }
 
 
 .about-heading-main{
   min-width:0;
 }
 
 
 .about-heading-text{
   min-width:0;
   padding-bottom:7px;
 }
 
 
 .about-heading .eyebrow{
   margin:0 0 13px;
 }
 
 
 .about-heading h2{
   max-width:780px;
   margin:0;
   color:var(--navy);
   font-size:clamp(44px,5.2vw,70px);
   line-height:1.01;
   letter-spacing:-3px;
 }
 
 
 .about-heading .about-intro{
   max-width:520px;
   margin:0;
   font-size:15px;
   line-height:1.8;
 }
 
 
 /* ---------------------------------------------------------
    BLOQUES DE EXPERIENCIA
 --------------------------------------------------------- */
 
 .about-story{
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:22px;
   max-width:1120px;
   margin:0 auto 28px;
   align-items:stretch;
 }
 
 
 .story-block{
   position:relative;
   min-height:220px;
 
   /*
    * IMPORTANTE:
    * No usamos grid aquí porque el HTML solo tiene
    * un hijo: .story-content.
    * El grid anterior comprimía el texto en una columna
    * de 50px y provocaba que cada palabra apareciera
    * en una línea.
    */
   display:block;
 
   padding:32px 34px 36px;
 
   border-radius:22px;
   overflow:hidden;
 
   transition:
     transform .25s ease,
     box-shadow .25s ease,
     border-color .25s ease;
 }
 
 
 .story-block:hover{
   transform:translateY(-5px);
 }
 
 
 .story-card-light{
   color:var(--navy);
   background:
     linear-gradient(
       145deg,
       #fff 0%,
       #edf7fa 100%
     );
   border:1px solid rgba(41,148,178,.14);
   box-shadow:0 20px 48px rgba(10,38,52,.08);
 }
 
 
 .story-card-dark{
   color:#fff;
   background:
     linear-gradient(
       145deg,
       #071c27 0%,
       #0d5268 100%
     );
   border:1px solid rgba(145,217,232,.18);
   box-shadow:0 26px 58px rgba(7,28,39,.20);
 }
 
 
 .story-card-light::after,
 .story-card-dark::after{
   content:"";
   position:absolute;
   width:190px;
   height:190px;
   right:-90px;
   bottom:-105px;
   border:1px solid rgba(41,148,178,.12);
   border-radius:50%;
   pointer-events:none;
 }
 
 
 .story-card-dark::after{
   border-color:rgba(145,217,232,.14);
 }
 
 
 .story-content{
   position:relative;
   z-index:2;
   width:100%;
 }
 
 
 .story-kicker{
   display:block;
   margin-bottom:7px;
   color:var(--blue);
   font-size:10px;
   font-weight:800;
   letter-spacing:1.5px;
 }
 
 
 .story-card-dark .story-kicker{
   color:var(--blue-light);
 }
 
 
 .story-block h3{
   margin-bottom:11px;
   color:var(--navy);
   font-size:25px;
   line-height:1.12;
   letter-spacing:-1px;
 }
 
 
 .story-card-dark h3{
   color:#fff;
 }
 
 
 .story-block p{
   max-width:640px;
   margin:0;
   font-size:13px;
   line-height:1.8;
 }
 
 
 .story-card-dark p{
   color:rgba(255,255,255,.72);
 }
 
 
 .story-highlight{
   display:none!important;
 }
 
 
 /* ---------------------------------------------------------
    ESTADÍSTICAS
 --------------------------------------------------------- */
 
 .about-stats{
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:18px;
   max-width:1120px;
   margin:0 auto;
 }
 
 
 .about-stat{
   position:relative;
   min-height:155px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   padding:28px 30px;
   overflow:hidden;
   background:
     linear-gradient(
       145deg,
       #fff 0%,
       #edf7fa 100%
     );
   border:1px solid rgba(41,148,178,.14);
   border-radius:22px;
   box-shadow:0 18px 45px rgba(10,38,52,.08);
   transition:
     transform .25s ease,
     box-shadow .25s ease,
     border-color .25s ease;
 }
 
 
 .about-stat::after{
   content:"";
   position:absolute;
   width:170px;
   height:170px;
   right:-90px;
   bottom:-105px;
   border:1px solid rgba(41,148,178,.13);
   border-radius:50%;
   pointer-events:none;
 }
 
 
 .about-stat:hover{
   transform:translateY(-5px);
   border-color:rgba(41,148,178,.28);
   box-shadow:0 26px 58px rgba(10,38,52,.12);
 }
 
 
 .about-stat-number,
 .about-stat>strong{
   position:relative;
   z-index:1;
   color:var(--navy);
   font-size:clamp(38px,4vw,54px);
   line-height:1;
   letter-spacing:-2px;
   font-variant-numeric:tabular-nums;
 }
 
 
 .about-stat>span{
   position:relative;
   z-index:1;
   margin-top:10px;
   color:var(--text-light);
   font-size:12px;
   font-weight:700;
 }
 
 
 .about-stat-feature{
   background:
     linear-gradient(
       145deg,
       #071c27 0%,
       #0d5268 100%
     );
   border-color:rgba(145,217,232,.16);
   box-shadow:0 24px 58px rgba(7,28,39,.20);
 }
 
 
 .about-stat-feature>strong{
   color:#fff;
 }
 
 
 .about-stat-feature>span{
   color:rgba(255,255,255,.72);
 }
 
 
 .experience-counter{
   min-width:90px;
   font-variant-numeric:tabular-nums;
 }
 
 
 /* ---------------------------------------------------------
    SOBRE NOSOTROS · RESPONSIVE
 --------------------------------------------------------- */
 
 @media(max-width:900px){
 
   .about-heading{
     grid-template-columns:1fr;
     gap:18px;
     margin-bottom:34px;
   }
 
 
   .about-heading .eyebrow{
     margin-top:0;
   }
 
 
   .about-heading-text{
     padding-bottom:0;
   }
 
 
   .about-heading .about-intro{
     max-width:700px;
   }
 
 
   .about-story{
     grid-template-columns:1fr;
   }
 
 }
 
 
 @media(max-width:600px){
 
   .about-heading{
     margin-bottom:28px;
   }
 
 
   .about-heading h2{
     font-size:38px;
     letter-spacing:-2px;
   }
 
 
   .about-story{
     gap:16px;
     margin-bottom:20px;
   }
 
 
   .story-block{
     min-height:0;
     padding:25px 22px 28px;
   }
 
 
   .story-block h3{
     font-size:23px;
   }
 
 
   .about-stats{
     grid-template-columns:1fr;
   }
 
 
   .about-stat{
     min-height:135px;
   }
 
 }
 
 
 /* =========================================================
    ZONAS
 ========================================================= */
 
 .zones-section{
   position:relative;
   overflow:hidden;
   color:#fff;
   background:
     radial-gradient(
       circle at 15% 20%,
       rgba(41,148,178,.32),
       transparent 30%
     ),
     radial-gradient(
       circle at 90% 85%,
       rgba(145,217,232,.16),
       transparent 32%
     ),
     linear-gradient(
       135deg,
       #071c27 0%,
       #0b3446 50%,
       #0d5268 100%
     );
 }
 
 
 .zones-section h2{
   color:#fff;
 }
 
 
 .zones-section p{
   color:rgba(255,255,255,.72);
 }
 
 
 .zones-decoration{
   position:absolute;
   border:1px solid rgba(145,217,232,.14);
   border-radius:50%;
   pointer-events:none;
 }
 
 
 .zones-decoration-one{
   width:550px;
   height:550px;
   right:-260px;
   top:-300px;
 }
 
 
 .zones-decoration-two{
   width:340px;
   height:340px;
   left:-180px;
   bottom:-210px;
 }
 
 
 .zones-layout{
   position:relative;
   z-index:2;
   display:grid;
   grid-template-columns:.8fr 1.2fr;
   gap:80px;
   align-items:center;
 }
 
 
 .zones-content{
   max-width:560px;
 }
 
 
 .zones-content .eyebrow{
   color:var(--blue-light);
 }
 
 
 .zones-content h2{
   margin:15px 0 23px;
   font-size:clamp(38px,4.5vw,58px);
 }
 
 
 .zones-content p{
   margin-bottom:17px;
   font-size:14px;
   line-height:1.8;
 }
 
 
 .zones-content .button{
   margin-top:12px;
 }
 
 
 .zones-list{
   display:grid;
   grid-template-columns:repeat(2,1fr);
   gap:15px;
 }
 
 
 .zone-item{
   position:relative;
   min-height:145px;
   display:flex;
   align-items:center;
   justify-content:center;
   padding:25px;
   text-align:center;
   background:rgba(255,255,255,.08);
   border:1px solid rgba(255,255,255,.14);
   border-radius:18px;
   backdrop-filter:blur(8px);
   overflow:hidden;
   transition:
     transform .25s ease,
     background .25s ease,
     border-color .25s ease,
     box-shadow .25s ease;
 }
 
 
 .zone-item::after{
   content:"";
   position:absolute;
   width:100px;
   height:100px;
   right:-35px;
   bottom:-55px;
   border:1px solid rgba(145,217,232,.16);
   border-radius:50%;
 }
 
 
 .zone-item:hover{
   transform:translateY(-5px);
   background:rgba(145,217,232,.18);
   border-color:rgba(145,217,232,.45);
   box-shadow:0 18px 35px rgba(0,0,0,.15);
 }
 
 
 .zone-item.zone-main{
   background:
     linear-gradient(
       135deg,
       rgba(41,148,178,.42),
       rgba(255,255,255,.09)
     );
   border-color:rgba(145,217,232,.32);
 }
 
 
 .zone-number,
 .zone-item>span:last-child{
   display:none;
 }
 
 
 .zone-item strong{
   position:relative;
   z-index:1;
   color:#fff;
   font-size:18px;
   line-height:1.2;
   text-align:center;
 }
 
 
 /* =========================================================
    RESEÑAS
 ========================================================= */
 
 .reviews-section{
   background:#fff;
 }
 
 
 .reviews-heading{
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   gap:60px;
   margin-bottom:45px;
 }
 
 
 .reviews-heading h2{
   margin-top:15px;
   font-size:clamp(38px,4.5vw,58px);
 }
 
 
 .reviews-rating{
   display:flex;
   flex-direction:column;
   align-items:flex-end;
   gap:5px;
   padding-bottom:5px;
 }
 
 
 .rating-stars{
   color:#e4a62c;
   font-size:18px;
   letter-spacing:2px;
 }
 
 
 .reviews-rating>span:last-child{
   max-width:280px;
   color:var(--text-light);
   font-size:11px;
   text-align:right;
 }
 
 
 .reviews-carousel{
   display:grid;
   grid-template-columns:48px minmax(0,1fr) 48px;
   align-items:center;
   gap:16px;
 }
 
 
 .reviews-viewport{
   width:100%;
   overflow:hidden;
 }
 
 
 .reviews-track{
   display:flex;
   gap:18px;
   transition:
     transform .45s cubic-bezier(.22,.61,.36,1);
 }
 
 
 .review-card{
   flex:0 0 calc((100% - 36px)/3);
   padding:28px;
   background:var(--background-soft);
   border:1px solid var(--border);
   border-radius:18px;
 }
 
 
 .review-top{
   display:flex;
   align-items:flex-start;
   justify-content:space-between;
   gap:15px;
   margin-bottom:17px;
 }
 
 
 .review-top strong{
   color:var(--navy);
   font-size:12px;
   line-height:1.4;
 }
 
 
 .stars{
   flex-shrink:0;
   color:#e4a62c;
   font-size:12px;
   letter-spacing:1px;
 }
 
 
 .review-card p{
   font-size:12px;
   line-height:1.8;
 }
 
 
 .review-arrow{
   width:46px;
   height:46px;
   display:flex;
   align-items:center;
   justify-content:center;
   color:var(--navy);
   background:#fff;
   border:1px solid var(--border);
   border-radius:50%;
   font-size:17px;
   transition:
     color .2s ease,
     background .2s ease,
     transform .2s ease,
     border-color .2s ease;
 }
 
 
 .review-arrow:hover{
   color:#fff;
   background:var(--blue);
   border-color:var(--blue);
   transform:translateY(-2px);
 }
 
 
 .review-arrow:disabled{
   opacity:.35;
   cursor:default;
 }
 
 
 .review-arrow:disabled:hover{
   color:var(--navy);
   background:#fff;
   border-color:var(--border);
   transform:none;
 }
 
 
 .review-dots{
   display:flex;
   justify-content:center;
   align-items:center;
   gap:7px;
   margin-top:27px;
 }
 
 
 .review-dot{
   width:7px;
   height:7px;
   padding:0;
   border:0;
   border-radius:50%;
   background:#d4e0e5;
   transition:
     width .25s ease,
     background .25s ease;
 }
 
 
 .review-dot.active{
   width:24px;
   border-radius:20px;
   background:var(--blue);
 }
 
 
 /* =========================================================
    FAQ
 ========================================================= */
 
 .faq-section{
   background:var(--background-soft);
 }
 
 
 .faq-container{
   display:grid;
   grid-template-columns:.7fr 1fr;
   gap:90px;
   align-items:start;
 }
 
 
 .faq-container>.section-heading{
   position:sticky;
   top:105px;
   margin-bottom:0;
 }
 
 
 .faq-list{
   border-top:1px solid var(--border);
 }
 
 
 .faq-item{
   border-bottom:1px solid var(--border);
 }
 
 
 .faq-item summary{
   position:relative;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:30px;
   padding:25px 5px;
   color:var(--navy);
   font-size:14px;
   font-weight:800;
   cursor:pointer;
   list-style:none;
 }
 
 
 .faq-item summary::-webkit-details-marker{
   display:none;
 }
 
 
 .faq-item summary::after{
   content:"+";
   flex-shrink:0;
   width:28px;
   height:28px;
   display:flex;
   align-items:center;
   justify-content:center;
   color:var(--blue);
   border:1px solid #cfe0e6;
   border-radius:50%;
   font-size:18px;
   font-weight:400;
   transition:
     transform .25s ease,
     color .25s ease,
     background .25s ease;
 }
 
 
 .faq-item[open] summary::after{
   content:"×";
   color:#fff;
   background:var(--blue);
   border-color:var(--blue);
 }
 
 
 .faq-answer{
   padding:0 50px 25px 5px;
 }
 
 
 .faq-answer p{
   font-size:12px;
   line-height:1.8;
 }
 
 
 .faq-answer strong{
   color:var(--navy);
 }
 
 
 /* =========================================================
    FINAL CTA
 ========================================================= */
 
 .final-cta{
   position:relative;
   overflow:hidden;
   padding:90px 0;
   color:#fff;
   background:
     linear-gradient(
       135deg,
       var(--navy-dark),
       #0b4057
     );
 }
 
 
 .final-cta::after{
   content:"";
   position:absolute;
   width:420px;
   height:420px;
   right:-180px;
   top:-220px;
   border:1px solid rgba(145,217,232,.14);
   border-radius:50%;
 }
 
 
 .final-cta .container{
   position:relative;
   z-index:2;
 }
 
 
 .final-cta-inner{
   max-width:900px;
 }
 
 
 .final-cta h2{
   margin:15px 0 18px;
   color:#fff;
   font-size:clamp(38px,4.5vw,58px);
 }
 
 
 .final-cta p{
   max-width:650px;
   margin-bottom:27px;
   color:rgba(255,255,255,.72);
   font-size:14px;
   line-height:1.8;
 }
 
 
 .final-actions{
   display:flex;
   flex-wrap:wrap;
   gap:12px;
 }
 
 
 /* =========================================================
    FOOTER
 ========================================================= */
 
 .site-footer{
   color:rgba(255,255,255,.7);
   background:#041b28;
 }
 
 
 .footer-grid{
   display:grid;
   grid-template-columns:1.4fr .7fr .9fr;
   gap:80px;
   padding-top:65px;
   padding-bottom:55px;
 }
 
 
 .footer-brand{
   max-width:400px;
 }
 
 
 .footer-logo{
   width:105px;
   height:75px;
   object-fit:contain;
   object-position:left center;
   margin-bottom:16px;
   filter:brightness(0) invert(1);
 }
 
 
 .footer-brand p{
   color:rgba(255,255,255,.6);
   font-size:11px;
   line-height:1.8;
 }
 
 
 .footer-column{
   display:flex;
   flex-direction:column;
   gap:10px;
 }
 
 
 .footer-column h3{
   margin-bottom:7px;
   color:#fff;
   font-size:12px;
   letter-spacing:0;
 }
 
 
 .footer-column a{
   color:rgba(255,255,255,.6);
   font-size:10px;
   transition:color .2s ease;
 }
 
 
 .footer-column a:hover{
   color:var(--blue-light);
 }
 
 
 .footer-bottom{
   border-top:1px solid rgba(255,255,255,.08);
 }
 
 
 .footer-bottom .container{
   min-height:58px;
   display:flex;
   align-items:center;
   color:rgba(255,255,255,.38);
   font-size:9px;
 }
 
 
 /* =========================================================
    WHATSAPP
 ========================================================= */
 
 .floating-whatsapp{
   position:fixed;
   right:24px;
   bottom:22px;
   z-index:1100;
   display:flex;
   align-items:center;
   gap:10px;
   padding:16px 27px;
   color:#fff;
   background:var(--green);
   border-radius:999px;
   font-size:13px;
   font-weight:800;
   box-shadow:0 12px 32px rgba(32,168,107,.3);
   transition:
     transform .2s ease,
     background .2s ease;
 }
 
 
 .floating-whatsapp:hover{
   transform:translateY(-3px);
   background:#198c59;
 }
 
 
 .floating-whatsapp span{
   font-size:10px;
 }
 
 
 /* =========================================================
    RESPONSIVE · TABLET
 ========================================================= */
 
 @media(max-width:1050px){
 
   .container{
     width:min(100% - 36px,1100px);
   }
 
 
   .main-nav{
     gap:18px;
   }
 
 
   .main-nav a{
     font-size:11px;
   }
 
 
   .hero-inner{
     grid-template-columns:minmax(0,1fr) 390px;
     gap:45px;
   }
 
 
   .intro-grid{
     gap:50px;
   }
 
 
   .zones-layout{
     gap:45px;
   }
 
 
   .faq-container{
     gap:55px;
   }
 
 }
 
 
 /* =========================================================
    RESPONSIVE · TABLET PEQUEÑO
 ========================================================= */
 
 @media(max-width:900px){
 
   .section{
     padding:90px 0;
   }
 
 
   .main-nav{
     position:fixed;
     top:70px;
     left:0;
     right:0;
     display:flex;
     flex-direction:column;
     align-items:stretch;
     gap:0;
     padding:15px;
     background:#fff;
     border-bottom:1px solid var(--border);
     box-shadow:0 20px 35px rgba(10,38,52,.08);
     transform:translateY(-120%);
     opacity:0;
     visibility:hidden;
     transition:
       transform .3s ease,
       opacity .3s ease,
       visibility .3s ease;
   }
 
 
   .main-nav.active{
     transform:translateY(0);
     opacity:1;
     visibility:visible;
   }
 
 
   .main-nav a{
     padding:14px 15px;
     font-size:13px;
     border-radius:10px;
   }
 
 
   .main-nav a:hover{
     background:var(--blue-pale);
   }
 
 
   .main-nav .nav-cta{
     margin-top:8px;
     text-align:center;
   }
 
 
   .mobile-menu-button{
     display:block;
   }
 
 
   .hero-inner{
     grid-template-columns:1fr;
     gap:40px;
   }
 
 
   .hero-content{
     max-width:750px;
   }
 
 
   .quote-card{
     width:min(100%,520px);
   }
 
 
   .intro-grid{
     grid-template-columns:1fr;
     gap:45px;
   }
 
 
   .intro-image{
     height:450px;
   }
 
 
   .types-grid{
     grid-template-columns:1fr;
   }
 
 
   .about-heading{
     grid-template-columns:1fr;
     gap:18px;
     margin-bottom:34px;
   }
 
 
   .about-heading .eyebrow{
     margin-top:0;
   }
 
 
   .about-heading-text{
     padding-bottom:0;
   }
 
 
   .about-heading .about-intro{
     max-width:700px;
   }
 
 
   .about-story{
     grid-template-columns:1fr;
   }
 
 
   .zones-layout{
     grid-template-columns:1fr;
     gap:45px;
   }
 
 
   .zones-content{
     max-width:700px;
   }
 
 
   .reviews-heading{
     align-items:flex-start;
     flex-direction:column;
     gap:20px;
   }
 
 
   .reviews-rating{
     align-items:flex-start;
   }
 
 
   .reviews-rating>span:last-child{
     text-align:left;
   }
 
 
   .review-card{
     flex-basis:calc((100% - 18px)/2);
   }
 
 
   .faq-container{
     grid-template-columns:1fr;
     gap:45px;
   }
 
 
   .faq-container>.section-heading{
     position:static;
   }
 
 
   .footer-grid{
     grid-template-columns:1fr 1fr;
     gap:40px;
   }
 
 
   .footer-brand{
     grid-column:1/-1;
   }
 
 }
 
 
 /* =========================================================
    RESPONSIVE · MOBILE
 ========================================================= */
 
 @media(max-width:600px){
 
   .container{
     width:calc(100% - 30px);
   }
 
 
   .section{
     padding:75px 0;
   }
 
 
   .brand span{
     display:none;
   }
 
 
   .hero{
     min-height:auto;
   }
 
 
   .hero-inner{
     padding-top:55px;
     padding-bottom:55px;
   }
 
 
   .hero h1{
     font-size:48px;
     letter-spacing:-2.5px;
   }
 
 
   .hero-description{
     font-size:14px;
   }
 
 
   .hero-benefits{
     flex-direction:column;
     gap:7px;
     margin-top:18px;
   }
 
 
   .hero-actions{
     flex-direction:column;
     align-items:stretch;
   }
 
 
   .hero-actions .button{
     width:100%;
   }
 
 
   .quote-card{
     padding:30px 22px;
     transform:none;
   }
 
 
   .intro-image{
     height:330px;
   }
 
 
   .intro-content h2,
   .section-heading h2,
   .about-heading h2,
   .zones-content h2,
   .reviews-heading h2,
   .final-cta h2{
     font-size:38px;
   }
 
 
   .type-image-wrapper{
     height:270px;
   }
 
 
   .about-heading{
     margin-bottom:28px;
   }
 
 
   .about-heading h2{
     font-size:38px;
     letter-spacing:-2px;
   }
 
 
   .about-story{
     gap:16px;
     margin-bottom:20px;
   }
 
 
   .story-block{
     min-height:0;
     grid-template-columns:42px 1fr;
     gap:15px;
     padding:25px 22px 28px;
   }
 
 
   .story-block h3{
     font-size:23px;
   }
 
 
   .about-stats{
     grid-template-columns:1fr;
   }
 
 
   .about-stat{
     min-height:135px;
   }
 
 
   .zones-list{
     grid-template-columns:1fr;
   }
 
 
   .zone-item{
     min-height:120px;
   }
 
 
   .reviews-carousel{
     grid-template-columns:38px minmax(0,1fr) 38px;
     gap:8px;
   }
 
 
   .review-card{
     flex-basis:100%;
     padding:22px;
   }
 
 
   .review-top{
     flex-direction:column;
     gap:7px;
   }
 
 
   .review-arrow{
     width:38px;
     height:38px;
   }
 
 
   .faq-item summary{
     padding:22px 3px;
     font-size:12px;
   }
 
 
   .faq-answer{
     padding:0 35px 22px 3px;
   }
 
 
   .faq-answer p{
     font-size:11px;
   }
 
 
   .final-actions{
     flex-direction:column;
     align-items:stretch;
   }
 
 
   .final-actions .button{
     width:100%;
   }
 
 
   .footer-grid{
     grid-template-columns:1fr;
     gap:35px;
     padding-top:50px;
     padding-bottom:40px;
   }
 
 
   .footer-brand{
     grid-column:auto;
   }
 
 
   .footer-bottom .container{
     min-height:65px;
     justify-content:center;
     text-align:center;
   }
 
 
   .floating-whatsapp{
     right:15px;
     bottom:15px;
     padding:14px 23px;
     font-size:12px;
   }
 
 
   .form-navigation{
     gap:8px;
   }
 
 
   .form-back{
     padding:0 17px;
   }
 
 
   .form-step>.form-next{
     width:100%;
   }
 
 }
 
 
 /* =========================================================
    REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE
 ========================================================= */
 
 @media(prefers-reduced-motion:reduce){
 
   html{
     scroll-behavior:auto;
   }
 
 
   *,
   *::before,
   *::after{
     animation-duration:.01ms!important;
     animation-iteration-count:1!important;
     transition-duration:.01ms!important;
   }
 
 }