:root{
  --primario:#0096D1;
  --primario-alto:#007EB3;
  --carbon:#1A2B38;
  --marino:#0D0D0D;
  --marino-alto:#000000;
  --cielo:var(--primario);
  --cielo-suave:#7FCBEA;
  --nube:#F4F7F9;
  --blanco:#FFFFFF;
  --tinta:#3A5163;
  --tinta-suave:#6E8698;
  --linea:#E3EAEF;
  --radio:10px;
  --titulo:'Jost',Futura,'Century Gothic',sans-serif;
  --texto:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ancho:1180px;
  --gutter:clamp(20px,4.5vw,48px);
  --ritmo:clamp(72px,8vw,112px);
  --curva:cubic-bezier(.4,.06,.2,1);
  --sombra:0 16px 40px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{
  font-family:var(--texto);color:var(--tinta);background:var(--blanco);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
a{color:inherit;text-decoration:none}
::selection{background:#D9EEF9;color:var(--primario)}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.seccion{padding-block:var(--ritmo);position:relative}
.seccion--marino{background:var(--marino);color:#AFC6D6}
.seccion--nube{background:var(--nube)}

h1,h2,h3{font-family:var(--titulo);color:var(--carbon);font-weight:500;letter-spacing:-.02em;line-height:1.18}
.seccion--marino h2,.cta h2{color:#fff}
h2{font-size:clamp(1.7rem,3vw,2.35rem)}
h2 em{font-style:normal;color:var(--primario)}
h3{font-size:1.05rem;font-weight:500}

.etiqueta{
  display:inline-block;margin-bottom:12px;
  font-family:var(--titulo);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--primario);
}
.entrada{font-size:1.02rem;color:var(--tinta-suave);max-width:52ch;line-height:1.74;margin-top:14px}

.titulo-centro{text-align:center;max-width:38em;margin:0 auto 48px}
.titulo-centro h2{max-width:24ch;margin:0 auto}
.titulo-centro .entrada{margin-inline:auto}
.titulo-centro--claro .etiqueta{color:var(--cielo-suave)}
.titulo-centro--claro h2{color:#fff}

/* ═══ botones ═══ */
.boton{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--titulo);font-size:.94rem;font-weight:500;
  padding:12px 14px 12px 22px;border:1px solid var(--primario);border-radius:8px;
  background:var(--primario);color:#fff;cursor:pointer;
  transition:background .24s var(--curva),border-color .24s var(--curva),color .24s var(--curva),transform .24s var(--curva),box-shadow .24s var(--curva);
}
.boton:hover{background:var(--primario-alto);border-color:var(--primario-alto);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,150,209,.28)}
.boton:active{transform:none;box-shadow:none}
.boton__flecha{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:rgba(255,255,255,.2);
}
.boton__flecha svg{width:14px;height:14px}
.boton__flecha path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.boton--ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.45);
}
.boton--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff;box-shadow:none}
.boton--ghost .boton__flecha{background:rgba(255,255,255,.12)}
.boton--claro{background:#fff;color:var(--primario);border-color:#fff}
.boton--claro:hover{background:var(--cielo-suave);border-color:var(--cielo-suave);color:var(--marino)}
.boton--claro .boton__flecha{background:rgba(0,150,209,.14)}
.boton--claro .boton__flecha path{stroke:var(--primario)}

/* ═══ checks ═══ */
.checks{list-style:none;margin-top:22px;display:grid;gap:10px}
.checks li{
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--titulo);font-size:.98rem;font-weight:400;color:#fff;line-height:1.45;
}
.checks li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--primario) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2 6.4 11l6.1-6.4'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checks--grid{grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:20px}
.checks--grid li{color:var(--carbon);font-size:.92rem}
.checks--grid li::before{background-color:var(--primario)}

/* ═══ iconos ═══ */
.icono-circulo{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1.5px solid #C7E6F4;background:#F3FAFD;
}
.icono-circulo svg{width:26px;height:26px}
.icono-circulo path,.icono-circulo circle,.icono-circulo rect{
  fill:none;stroke:var(--primario);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* ═══ encabezado ═══ */
.encabezado{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:#fff;border-bottom:1px solid #EEF3F6;
}
.encabezado.compacto{box-shadow:0 8px 28px rgba(0,0,0,.06)}
.encabezado .envoltura{
  max-width:1320px;height:88px;display:flex;align-items:center;
  justify-content:space-between;position:relative;gap:16px;
  transition:height .35s var(--curva);
}
.encabezado.compacto .envoltura{height:76px}
.marca-logo{display:flex;align-items:center;position:relative;z-index:2;flex:none}
.marca-logo img{height:40px;width:auto;object-fit:contain;transition:height .35s var(--curva)}
.encabezado.compacto .marca-logo img{height:34px}
.menu{
  display:flex;align-items:center;gap:28px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.menu a{
  font-family:var(--titulo);font-size:.9375rem;font-weight:400;color:#243746;
  padding:8px 0 10px;position:relative;white-space:nowrap;transition:color .22s ease;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;
  background:var(--primario);transform:scaleX(0);transform-origin:center;
  transition:transform .25s var(--curva);
}
.menu a:hover{color:var(--primario)}
.menu a:hover::after,.menu a.activo::after{transform:scaleX(1)}
.menu a.activo{color:var(--primario)}
.menu__cta{display:none}
.menu__cta::after{display:none}
.encabezado__cta{
  position:relative;z-index:2;flex:none;
  padding:9px 11px 9px 20px;font-size:.9rem;border-radius:8px;
}
.encabezado__cta .boton__flecha,.menu__cta .boton__flecha{
  width:26px;height:26px;background:#fff;
}
.encabezado__cta .boton__flecha path,.menu__cta .boton__flecha path{stroke:var(--primario)}
.hamburguesa{display:none;background:none;border:0;padding:8px;cursor:pointer;z-index:2;flex:none}
.hamburguesa i{display:block;width:22px;height:1.5px;background:var(--marino);margin:5px 0;transition:transform .3s,opacity .3s}
.hamburguesa.abierta i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa.abierta i:nth-child(2){opacity:0}
.hamburguesa.abierta i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══ hero ═══ */
.hero{
  position:relative;min-height:min(100svh,860px);
  display:flex;align-items:center;padding:148px 0 88px;color:#fff;overflow:hidden;
  background:var(--marino);
}
.hero__media,.hero__velo{position:absolute;inset:0}
.hero__media{background:#0D0D0D url("../img/hero.jpg") center/cover no-repeat}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__velo{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.55) 100%);
}
.hero .envoltura{position:relative;z-index:2;width:100%}
.hero__cuerpo{max-width:680px}
.slider{overflow:hidden}
.slider__pista{display:flex;transition:transform .7s var(--curva);align-items:flex-start}
.slider__slide{flex:0 0 100%;min-width:100%}
.hero h1:not(.sr-only),.slider__frase{
  font-family:var(--titulo);
  font-size:clamp(2.05rem,4.6vw,3.55rem);font-weight:500;letter-spacing:-.03em;
  line-height:1.14;color:#fff;max-width:18ch;
}
.slider__frase span{display:block;color:var(--primario)}
.hero__sub{
  margin-top:22px;padding-bottom:14px;max-width:38ch;
  color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.22);
  font-size:1.02rem;line-height:1.55;
}
.hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.slider__controles{display:flex;align-items:center;gap:8px;margin-top:28px}
.slider__flecha{
  width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;transition:background .22s,border-color .22s;
}
.slider__flecha:hover{background:var(--primario);border-color:var(--primario)}
.slider__flecha svg{width:16px;height:16px}
.slider__flecha path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.giro__nav{display:flex;align-items:center;gap:2px}
.giro__punto{
  width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;position:relative;
}
.giro__punto::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.32);transform:translate(-50%,-50%);
  transition:background .3s,width .3s,border-radius .3s;
}
.giro__punto:hover::after{background:rgba(255,255,255,.78)}
.giro__punto.activo::after{width:22px;border-radius:99px;background:var(--primario)}

/* ═══ nosotros ═══ */
.nosotros{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.nosotros__foto{border-radius:var(--radio);overflow:hidden;min-height:340px;height:100%;box-shadow:var(--sombra)}
.nosotros__foto img{width:100%;height:100%;object-fit:cover}
.nosotros p{margin-top:14px;color:var(--tinta-suave)}

.valores{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.valores article{display:flex;flex-direction:column;gap:12px}
.valores h3{margin-top:2px}
.valores p{font-size:.9rem;color:var(--tinta-suave);line-height:1.55}

.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pilar{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:28px 26px 32px;box-shadow:var(--sombra);
}
.pilar .icono-circulo{margin-bottom:16px}
.pilar h3{margin-bottom:10px}
.pilar p{font-size:.9rem;color:var(--tinta-suave);line-height:1.65}

/* ═══ áreas ═══ */
.rejilla-areas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tarjeta-area{
  background:#fff;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);
  display:flex;flex-direction:column;min-height:100%;
  transition:transform .3s var(--curva),box-shadow .3s var(--curva);
}
.tarjeta-area:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta-area__cuerpo{padding:22px 20px 16px;flex:1}
.tarjeta-area .icono{width:34px;height:34px;margin-bottom:14px}
.tarjeta-area .icono *{fill:none;stroke:var(--primario);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.tarjeta-area h3{margin-bottom:8px}
.tarjeta-area p{font-size:.86rem;color:var(--tinta-suave);line-height:1.55}
.tarjeta-area img{height:118px;flex:none;width:100%;object-fit:cover}
.rejilla-areas--3{grid-template-columns:repeat(3,1fr)}

/* ═══ servicios ═══ */
.servicios{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.servicio{
  background:#fff;color:var(--tinta);border-radius:var(--radio);
  padding:32px 30px;box-shadow:0 18px 48px rgba(0,0,0,.18);
}
.servicio .icono-circulo{margin-bottom:16px}
.servicio h3{margin-bottom:8px;font-size:1.2rem}
.servicio > p{color:var(--tinta-suave);font-size:.95rem}
.lista-no{list-style:none;margin-top:18px;display:grid;gap:8px}
.lista-no li{
  font-family:var(--titulo);font-size:.95rem;color:var(--carbon);line-height:1.45;
  padding-left:18px;position:relative;
}
.lista-no li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:1.5px;background:var(--primario);
}
.cierre-marino{
  margin-top:36px;text-align:center;max-width:42ch;margin-inline:auto;
  color:#fff;font-family:var(--titulo);font-size:1.15rem;line-height:1.5;
}

/* ═══ proceso ═══ */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.paso{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 24px 28px;box-shadow:var(--sombra);
}
.paso__num{
  font-family:var(--titulo);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primario);margin-bottom:10px;
}
.paso h3{margin-bottom:8px}
.paso p{font-size:.9rem;color:var(--tinta-suave);line-height:1.6}

/* ═══ por qué ═══ */
.elegirnos{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center}
.elegirnos__foto{border-radius:var(--radio);overflow:hidden;min-height:460px;height:100%;box-shadow:var(--sombra)}
.elegirnos__foto img{width:100%;height:100%;object-fit:cover}
.elegirnos > div > p{margin-top:12px;color:var(--tinta-suave)}
.elegirnos__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:28px}
.elegirnos__grid article{display:flex;gap:14px;align-items:flex-start}
.elegirnos__grid h3{margin-bottom:4px}
.elegirnos__grid p{font-size:.86rem;color:var(--tinta-suave);line-height:1.5;margin:0}

/* ═══ cta ═══ */
.cta{position:relative;padding-block:clamp(72px,8vw,110px);overflow:hidden;background:var(--marino)}
.cta__media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.78) 55%,rgba(0,0,0,.62))}
.cta__caja{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px}
.cta h2{max-width:22ch;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:500}
.cta .etiqueta{color:var(--cielo-suave)}
.cta__texto{margin-top:14px;max-width:52ch;color:rgba(255,255,255,.78);line-height:1.65}

/* ═══ contacto ═══ */
.contacto{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.datos{list-style:none;margin-top:28px;border-top:1px solid var(--linea)}
.datos li{padding:14px 0;border-bottom:1px solid var(--linea)}
.datos b{
  display:block;font-family:var(--titulo);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--primario);margin-bottom:4px;
}
.datos a,.datos span{font-family:var(--titulo);font-size:1.05rem;color:var(--carbon)}
.datos a:hover{color:var(--primario)}
.forma{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(24px,3vw,38px);box-shadow:var(--sombra);
}
.forma__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.campo{margin-bottom:18px}
.campo--ancho{grid-column:1/-1}
.campo label{
  display:block;font-family:var(--titulo);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primario);margin-bottom:8px;
}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--nube);border:1px solid transparent;border-radius:6px;
  padding:12px 14px;color:var(--carbon);font-family:var(--texto);font-size:.95rem;
  transition:border-color .24s ease,background .24s ease;
}
.campo textarea{resize:vertical;min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--primario);background:#fff}
.consentimiento{display:flex;gap:11px;align-items:flex-start;margin:4px 0 22px;font-size:.82rem;color:var(--tinta-suave);line-height:1.55}
.consentimiento input{width:15px;height:15px;flex:none;margin-top:3px;accent-color:var(--primario)}
.aviso{font-size:.75rem;color:var(--tinta-suave);margin-top:16px;line-height:1.6}

/* ═══ faq ═══ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linea);padding:18px 0}
.faq summary{
  cursor:pointer;font-family:var(--titulo);font-weight:500;color:var(--carbon);
  font-size:1.05rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;color:var(--primario);font-size:1.35rem;line-height:1;font-weight:400;
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--tinta-suave);max-width:62ch;padding-right:36px}

/* ═══ pie ═══ */
.pie{background:var(--marino-alto);color:#8AA3B6;font-size:.84rem}
.pie__alto{
  display:grid;grid-template-columns:1.15fr .8fr 1fr .95fr;
  gap:32px;padding:56px 0 42px;
}
.pie__alto img{height:28px;width:auto;margin-bottom:18px;object-fit:contain}
.pie__lema{color:#fff;font-family:var(--titulo);font-weight:400;max-width:32ch;line-height:1.55;margin-bottom:10px}
.pie__lema--suave{color:#8AA3B6;margin-bottom:18px}
.pie h4{
  font-family:var(--titulo);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cielo-suave);margin-bottom:14px;
}
.pie__alto a,.pie__alto span{display:block;padding:4px 0;line-height:1.5}
.pie__alto a:hover{color:#fff}
.redes{display:flex;gap:10px}
.redes a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(159,190,212,.28);
  display:grid;place-items:center;padding:0;
}
.redes svg{width:16px;height:16px}
.redes path,.redes rect,.redes circle{fill:none;stroke:#fff;stroke-width:1.4}
.redes a:hover{border-color:var(--primario);background:rgba(0,150,209,.15)}
.pie__bajo{background:var(--primario);color:#fff;font-size:.75rem}
.pie__bajo .envoltura{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:14px}
.pie__bajo a:hover{opacity:.85}

/* ═══ reveal ═══ */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.rev.on{opacity:1;transform:none}

/* ═══ responsive ═══ */
@media (max-width:1280px){
  .menu{gap:20px}
  .menu a{font-size:.875rem}
}
@media (max-width:1100px){
  .encabezado .envoltura{height:76px}
  .encabezado.compacto .envoltura{height:68px}
  .encabezado__cta{display:none}
  .menu__cta{display:inline-flex;margin-top:16px;align-self:flex-start;color:#fff}
  .menu__cta:hover,.menu__cta.activo{color:#fff}
  .menu{
    position:fixed;left:0;right:0;top:76px;bottom:auto;width:100%;
    background:#fff;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding:8px var(--gutter) 28px;border-bottom:1px solid var(--linea);
    transform:translateY(-140%);transition:transform .4s var(--curva);
    max-height:calc(100vh - 76px);overflow:auto;
  }
  .encabezado.compacto .menu{top:68px;max-height:calc(100vh - 68px)}
  .menu.abierto{transform:translateY(0)}
  .menu a{padding:15px 0;border-bottom:1px solid var(--nube);font-size:1.05rem}
  .menu a::after{display:none}
  .hamburguesa{display:block}
  body.menu-abierto{overflow:hidden}
  .nosotros,.elegirnos,.contacto,.servicios,.pilares{grid-template-columns:1fr}
  .cta__caja{flex-direction:column;align-items:flex-start}
  .valores{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:1fr 1fr}
  .rejilla-areas,.rejilla-areas--3{grid-template-columns:repeat(2,1fr)}
  .nosotros__foto,.elegirnos__foto{min-height:280px}
  .pie__alto{grid-template-columns:1fr 1fr}
  .checks--grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero{min-height:auto;padding:120px 0 64px}
  .slider__frase{max-width:none}
  .valores,.elegirnos__grid,.forma__rejilla,.pie__alto{grid-template-columns:1fr}
  .rejilla-areas,.rejilla-areas--3,.pasos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
  .boton:hover,.tarjeta-area:hover{transform:none}
  .hero__media{display:none}
  .slider__pista{transition:none}
}
:focus-visible{outline:2px solid var(--cielo);outline-offset:3px}