/* ==========================================================================
   Nubecita Viajera — Centro de Educación Inicial
   Paleta y formas derivadas del logo: nube blanca, contorno azul #296BA6,
   cachetes rosa #F39AB4, nariz frambuesa #E72766.
   Tipografía: Montserrat + Grandstander (misma pareja que la referencia).
   ========================================================================== */

:root{
  /* marca */
  --azul:        #296ba6;
  --azul-hondo:  #16456d;
  --azul-tinta:  #103a5c;
  --cielo-1:     #eaf6fd;
  --cielo-2:     #dceefa;
  --blush:       #fbedf3;
  --rosa:        #f39ab4;
  --frambuesa:   #e72766;
  --frambuesa-2: #c41a53;
  --sol:         #ffc24b;
  --pasto:       #6fbe7e;

  /* texto */
  --texto:   #1d3b52;
  --suave:   #5b7386;

  /* materia: un solo sistema de radios — píldora en lo interactivo, 28/16 en cajas */
  --radio:      28px;
  --radio-sm:   16px;
  --linea:      #cfe4f3;
  --flota:      0 18px 44px -22px rgba(16,58,92,.42);
  --flota-alta: 0 30px 70px -28px rgba(16,58,92,.48);

  /* motion — mismo vocabulario que la referencia: slide-up + fade, .65s */
  --rev-dur:  .65s;
  --rev-ease: cubic-bezier(.23,1,.32,1);
  --ui-ease:  cubic-bezier(.23,1,.32,1);

  --nav-h: 68px;
}

/* ── reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0 }
ul,ol{ padding:0; list-style:none }
img,svg,video,iframe{ display:block; max-width:100% }
img,video{ height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
a{ color:inherit }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 34px) }

body{
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.75;
  color:var(--texto);
  background:var(--cielo-2);
  overflow-x:hidden;
}

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  padding:10px 18px; border-radius:999px;
  background:var(--azul); color:#fff; font-weight:700; text-decoration:none;
  transform:translateY(-160%);
  transition:transform .18s var(--ui-ease);
}
.skip:focus-visible{ transform:translateY(0) }

:focus-visible{ outline:3px solid var(--frambuesa); outline-offset:3px; border-radius:6px }

/* ══ BORDE DE NUBE ═══════════════════════════════════════════════════════
   Las bombas del logo, con máscara CSS: círculos que se repiten en `round`
   (nunca queda una bomba cortada) unidos al rectángulo interior. Se usa en
   la barra (los cuatro lados) y en el corte del hero (solo arriba).        */
:root{
  --bomba: radial-gradient(circle closest-side, #000 98%, transparent 100%);
  --plano: linear-gradient(#000, #000);
  /* la misma nube, como icono de viñeta */
  --nube-icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 604'><path d='M956 297c-5 16-6 31-4 47 2 17 14 34 17 50 3 17 4 35 1 51-3 16-10 31-19 45-9 13-21 26-35 36-14 10-30 19-46 25-17 6-36 10-55 11-19 1-39-1-59-4-19-4-41-13-58-17-16-4-30-8-42-6-11 1-18 8-26 14-8 7-13 18-21 26-8 7-18 13-27 18-10 5-20 8-30 10-10 2-21 3-32 3-10 0-21-2-31-5-10-3-20-8-29-14-9-6-16-17-25-22-10-4-19-6-32-5-12 1-27 9-42 13-16 4-33 10-49 11-16 1-32 0-46-3-15-3-29-9-42-15-13-7-26-15-37-25-11-9-21-20-30-32-8-12-12-26-21-38-9-13-21-25-36-37-14-12-34-24-49-37C20 382 4 367-3 351c-8-17-9-36-6-53 4-17 15-34 27-49 13-16 34-28 47-42s25-27 32-41c7-14 5-30 11-44 6-14 14-27 24-38 11-10 24-20 40-26 16-5 37-6 55-6 19-1 40 3 55 2 15-2 27-5 37-11 10-6 15-19 23-25 9-7 20-11 30-14 11-3 23-3 34-4 12-1 23 0 34 0 11 0 22 0 32 0 11 0 21 0 32 0 10 0 21 0 31 0 11 0 22-1 32 1 10 1 20 6 30 9 10 3 19 9 30 11 12 2 25 0 39-1 14-2 32-8 46-7 13 1 25 7 36 13 11 6 17 18 29 25 12 7 26 13 43 18 17 6 41 7 60 13 19 6 39 14 53 25 15 11 26 25 34 40 8 14 12 32 12 49 0 16-6 34-13 51-6 17-21 33-26 49z'/></svg>") center/contain no-repeat;
}

/* bombas arriba y abajo, puntas redondeadas a los costados.
   Dos tamaños de bomba desfasados para que el contorno no quede de puntilla;
   el border-radius de la propia caja cierra los extremos en curva limpia. */
.bar__nube,
.drawer::before{
  --r:22px; --t:44px; --t2:26px;
  -webkit-mask-image:
    var(--bomba),var(--bomba),
    var(--bomba),var(--bomba),
    var(--plano);
          mask-image:
    var(--bomba),var(--bomba),
    var(--bomba),var(--bomba),
    var(--plano);
  -webkit-mask-position:
    top left,bottom left,
    left 22px top,left 14px bottom,
    center;
          mask-position:
    top left,bottom left,
    left 22px top,left 14px bottom,
    center;
  -webkit-mask-size:
    var(--t) var(--t),var(--t) var(--t),
    var(--t2) var(--t2),var(--t2) var(--t2),
    100% calc(100% - var(--t));
          mask-size:
    var(--t) var(--t),var(--t) var(--t),
    var(--t2) var(--t2),var(--t2) var(--t2),
    100% calc(100% - var(--t));
  -webkit-mask-repeat:
    round no-repeat,round no-repeat,
    round no-repeat,round no-repeat,
    no-repeat;
          mask-repeat:
    round no-repeat,round no-repeat,
    round no-repeat,round no-repeat,
    no-repeat;
}
.bar__nube{ border-radius:999px }
.drawer::before{ border-radius:var(--radio) }

/* bombas solo arriba: el corte entre secciones.
   Dos rondas de distinto tamaño se desfasan y dan un borde de nube, no de festón. */
.sec--somos,
.sec--contacto{
  --r:34px; --t:68px; --t2:44px;
  -webkit-mask-image:var(--bomba),var(--bomba),var(--plano);
          mask-image:var(--bomba),var(--bomba),var(--plano);
  -webkit-mask-position:top left,left 26px top 6px,bottom center;
          mask-position:top left,left 26px top 6px,bottom center;
  -webkit-mask-size:var(--t) var(--t),var(--t2) var(--t2),100% calc(100% - var(--r));
          mask-size:var(--t) var(--t),var(--t2) var(--t2),100% calc(100% - var(--r));
  -webkit-mask-repeat:round no-repeat,round no-repeat,no-repeat;
          mask-repeat:round no-repeat,round no-repeat,no-repeat;
}

/* ── tipografía ───────────────────────────────────────────────────────── */
h1,h2,h3{
  font-weight:800; line-height:1.14; letter-spacing:-.015em;
  color:var(--azul-tinta);
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem,1.25rem + 4.2vw,4.4rem) }
h2{ font-size:clamp(1.9rem,1.3rem + 2.5vw,3rem); max-width:22ch }
h3{ font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem); line-height:1.25 }
p{ text-wrap:pretty }

/* la palabra acentuada, igual que en la referencia: display redondeada */
.gs{
  font-family:'Grandstander','Montserrat',cursive;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--azul);
}

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--azul); margin-bottom:14px;
}
.eyebrow--light{ color:#c4e2f8 }

.lead{ font-size:clamp(1.06rem,1rem + .4vw,1.28rem); font-weight:400; line-height:1.65; color:var(--azul-hondo) }

p + p{ margin-top:1em }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap{ width:min(1180px,100% - 2.5rem); margin-inline:auto }

.sec{ padding-block:clamp(3.25rem,6vw,5.25rem); position:relative }
.sec__head{ max-width:60ch; margin-bottom:clamp(2rem,3.5vw,2.75rem) }
.sec__head .lead{ margin-top:1.1rem; max-width:56ch }

.grid-2{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (min-width:900px){
  .grid-2{ grid-template-columns:1fr 1fr }
  .grid-2--form{ grid-template-columns:1fr 1.05fr }
}
.grid-2--tight{ margin-top:clamp(2.25rem,4.5vw,3.5rem); gap:clamp(2rem,4vw,3.5rem) }
.grid-2--tight h2,.grid-2--tight h3{ max-width:none }

.h3-alt{ font-size:1.14rem; margin-bottom:.9rem; color:var(--azul); max-width:none }

/* ══ CIELO ═══════════════════════════════════════════════════════════════
   El fondo es un cielo que se recorre: el degradé se desplaza con el scroll
   y cinco nubes (la silueta real del logo) van a distinta velocidad.       */
.sky{ position:fixed; inset:0; z-index:-2; pointer-events:none }

.sky__wash{
  position:absolute; inset:0;
  background-image:linear-gradient(180deg,
    var(--cielo-1)  0%,
    var(--cielo-2) 26%,
    var(--blush)   52%,
    #e6f2fb        74%,
    var(--cielo-2) 100%);
  background-size:100% 460%;
  background-position:0 calc(var(--p,0) * 100%);
}

.sky__clouds{ position:absolute; inset:0; overflow:hidden }
.drift{ position:absolute; width:auto; fill:#fff; will-change:transform }
.drift--a{ top:6vh;  height:26vh; left:-30vw; opacity:.72; animation:cruza 96s linear infinite }
.drift--b{ top:34vh; height:15vh; left:-30vw; opacity:.5;  animation:cruza 66s linear infinite -22s }
.drift--c{ top:58vh; height:34vh; left:-40vw; opacity:.42; animation:cruza 132s linear infinite -60s }
.drift--d{ top:78vh; height:12vh; left:-25vw; opacity:.55; animation:cruza 78s linear infinite -40s }
.drift--e{ top:18vh; height:9vh;  left:-20vw; opacity:.4;  animation:cruza 54s linear infinite -12s }

@keyframes cruza{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(190vw,0,0) }
}

/* ══ AVISO ═══════════════════════════════════════════════════════════════ */
.aviso{ background:var(--azul-tinta); color:#dcecf8; font-size:.82rem }
.aviso__inner{
  width:min(1180px,100% - 2.5rem); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:.3rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-block:9px; line-height:1.5;
}
.aviso strong{ color:#fff; font-weight:700 }
.aviso__tel{ display:flex; gap:1.1rem; align-items:center }
.aviso__tel a{ text-decoration:none; font-variant-numeric:tabular-nums; padding:11px 2px; margin:-11px -2px }
@media (hover:hover) and (pointer:fine){ .aviso__tel a:hover{ color:#fff } }

/* ══ BARRA / NAV ═════════════════════════════════════════════════════════ */
.bar{ position:sticky; top:0; z-index:90; padding:14px 0 }

.bar__inner{
  position:relative;
  width:min(1180px,100% - 2.5rem); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(.6rem,2vw,1.4rem);
  min-height:var(--nav-h);
  padding:6px 34px 6px 38px;
}

/* la nube que hace de fondo de la barra */
.bar__nube{
  --r:14px; --t:28px;
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  filter:
    drop-shadow(0 0 1px rgba(41,107,166,.9))
    drop-shadow(0 0 1px rgba(41,107,166,.55))
    drop-shadow(0 10px 22px rgba(16,58,92,.26));
  transition:background-color .3s ease, filter .3s ease;
}
.bar[data-stuck] .bar__nube{
  background:rgba(255,255,255,.97);
  filter:
    drop-shadow(0 0 1px rgba(41,107,166,.8))
    drop-shadow(0 14px 30px rgba(16,58,92,.34));
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto }
.brand img{ width:42px; height:42px; object-fit:contain }
.brand__name{
  font-family:'Grandstander','Montserrat',cursive; font-weight:900;
  font-size:1rem; line-height:1; color:var(--azul); letter-spacing:-.01em;
}
.brand__name em{ display:block; font-style:normal; font-size:.78em; color:var(--frambuesa) }
@media (max-width:1120px){ .brand__name{ display:none } }

.menu{ display:flex; align-items:center; gap:2px; margin-inline:auto }
.menu a{
  position:relative; display:block;
  padding:9px 13px; border-radius:999px;
  font-size:.83rem; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--azul-hondo);
  transition:color .2s ease, background-color .2s ease;
}
.menu a::after{
  content:''; position:absolute; left:50%; bottom:3px;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--frambuesa);
  opacity:0; transform:scale(.4);
  transition:opacity .2s var(--ui-ease), transform .2s var(--ui-ease);
}
.menu a[aria-current]{ color:var(--azul) }
.menu a[aria-current]::after{ opacity:1; transform:scale(1) }
@media (hover:hover) and (pointer:fine){
  .menu a:hover{ color:var(--azul); background:rgba(41,107,166,.08) }
}
@media (max-width:1000px){ .menu{ display:none } }

.bar__cta{ flex:0 0 auto }
@media (max-width:1000px){
  .bar .bar__cta{ margin-left:auto; min-height:44px }
}
@media (max-width:420px){
  .bar .bar__cta{ padding:10px 16px; font-size:.8rem }
  .bar__inner{ padding:6px 22px 6px 24px; gap:.5rem }
}

.burger{ display:none; width:44px; height:44px; border-radius:50%; position:relative; flex:0 0 auto }
.burger span{
  position:absolute; left:12px; width:20px; height:2px; border-radius:2px;
  background:var(--azul-hondo);
  transition:transform .28s var(--ui-ease), opacity .18s ease;
}
.burger span:nth-child(1){ top:16px }
.burger span:nth-child(2){ top:21px }
.burger span:nth-child(3){ top:26px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }
@media (max-width:1000px){ .burger{ display:block } }

.drawer{
  position:relative;
  width:min(1180px,100% - 2.5rem); margin:14px auto 0;
  display:grid; gap:2px; padding:18px;
}
.drawer[hidden]{ display:none }
.drawer::before{
  --r:14px; --t:28px;
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.97);
  filter:drop-shadow(0 0 1px rgba(41,107,166,.7)) drop-shadow(0 14px 30px rgba(16,58,92,.3));
}
.drawer a{
  padding:12px 16px; border-radius:var(--radio-sm);
  font-weight:600; text-decoration:none; color:var(--azul-hondo);
}
.drawer a:active{ background:rgba(41,107,166,.09) }

/* ══ BOTONES ═════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:15px 30px; border-radius:999px;
  font-family:'Grandstander','Montserrat',cursive; font-weight:800;
  font-size:1rem; line-height:1; text-decoration:none; text-align:center;
  white-space:nowrap;
  border:2.5px solid transparent;
  transition:transform .16s var(--ui-ease), background-color .2s ease,
             border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:scale(.97) }

.btn--rasp{ background:var(--frambuesa); color:#fff; border-color:var(--frambuesa); box-shadow:0 12px 26px -14px rgba(231,39,102,.85) }
.btn--ghost{ background:rgba(16,58,92,.28); color:#fff; border-color:rgba(255,255,255,.72); backdrop-filter:blur(6px) }
.btn--sm{ padding:11px 22px; font-size:.86rem; background:var(--azul); color:#fff; border-color:var(--azul) }
.btn--full{ width:100%; margin-top:.4rem }

@media (hover:hover) and (pointer:fine){
  .btn--rasp:hover{ background:var(--frambuesa-2); border-color:var(--frambuesa-2) }
  .btn--ghost:hover{ background:rgba(16,58,92,.44); border-color:#fff }
  .btn--sm:hover{ background:var(--azul-hondo); border-color:var(--azul-hondo) }
}

/* ══ HERO ════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(540px,84svh,860px);
  margin-top:-96px; padding-top:calc(96px + clamp(3rem,8vh,6rem));
  padding-bottom:clamp(5rem,10vh,7rem);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; background:var(--azul-tinta) }
.hero__video{
  width:100%; height:100%; object-fit:cover;
  animation:respira 30s ease-in-out infinite alternate;
}
@keyframes respira{ from{ transform:scale(1.02) } to{ transform:scale(1.07) } }
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(16,58,92,.74) 0%,rgba(16,58,92,.34) 42%,rgba(16,58,92,.7) 100%),
    radial-gradient(120% 80% at 20% 30%,rgba(41,107,166,.38),transparent 70%);
}

.hero__body{ position:relative; max-width:min(760px,100%) }
.hero__title{ color:#fff; max-width:none; text-shadow:0 2px 30px rgba(16,58,92,.45) }
.hero__title .gs{ color:var(--sol) }
.hero__lead{
  margin-top:1.3rem; max-width:44ch;
  font-size:clamp(1.05rem,.98rem + .5vw,1.32rem); font-weight:400; line-height:1.6;
  color:#e8f4fc;
}
.hero__acts{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.85rem }

/* ══ QUIÉNES SOMOS ═══════════════════════════════════════════════════════ */
.sec--somos{
  --r:32px; --t:64px;
  background:var(--cielo-1);
  margin-top:calc(var(--r) * -1);
  padding-top:calc(clamp(3.25rem,6vw,5.25rem) + var(--r));
}

/* franja de datos: cifras sueltas, sin cajas */
.franja{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--linea);
  border-block:1px solid var(--linea);
  margin-bottom:clamp(2.75rem,6vw,4.5rem);
}
.franja > div{ padding:22px 4px 22px 0; background:var(--cielo-1) }
.franja > div + div{ padding-left:24px }
.franja dt{
  font-family:'Grandstander','Montserrat',cursive; font-weight:900;
  font-size:clamp(1.65rem,1.25rem + 1.3vw,2.35rem); line-height:1.05;
  color:var(--frambuesa);
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
.franja dd{ margin:.55rem 0 0; font-size:.79rem; font-weight:600; line-height:1.4; color:var(--suave); max-width:18ch }

.somos{ align-items:center }
.somos__foto{ position:relative }
.somos__foto > img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 28%;
  border-radius:var(--radio);
  border:4px solid #fff;
  box-shadow:var(--flota-alta);
}
.somos__foto figcaption{
  position:absolute; right:-8px; bottom:-24px;
  width:min(180px,42%); padding:12px 14px;
  background:#fff; border-radius:var(--radio-sm);
  box-shadow:var(--flota);
  transform:rotate(-3deg);
}
.somos__foto figcaption img{ width:100% }

/* ══ PROPUESTA ═══════════════════════════════════════════════════════════ */
/* los ocho puntos: lista tipográfica a dos columnas, sin cajas */
.puntos{
  display:grid; gap:1.4rem clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.puntos li{
  position:relative; padding-left:44px;
  font-size:.97rem; line-height:1.62;
}
.puntos li::before{
  content:''; position:absolute; left:0; top:9px;
  width:26px; height:16px;
  background:var(--rosa);
  -webkit-mask:var(--nube-icono); mask:var(--nube-icono);
}

/* Brindamos / Facilitamos / Posibilitamos: filas, no tarjetas */
.filas{ margin-top:clamp(2.75rem,6vw,4.5rem); display:grid }
.filas > div{
  display:grid; gap:.4rem 2.5rem; align-items:baseline;
  padding:1.5rem 0;
}
.filas > div + div{ border-top:1px solid var(--linea) }
@media (min-width:760px){
  .filas > div{ grid-template-columns:minmax(180px,240px) 1fr }
}
.filas dt{
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); line-height:1.2;
  color:var(--azul);
}
.filas dd{ margin:0; font-size:.98rem; line-height:1.65; max-width:62ch }

/* V.I.A.S.: el único objeto con sombra dura, como el logo */
.vias{
  margin-top:clamp(2.75rem,6vw,4.5rem);
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding:clamp(1.9rem,4vw,3rem);
  background:#fff;
  border:3px solid var(--azul);
  border-radius:var(--radio);
  box-shadow:10px 10px 0 -1px rgba(41,107,166,.22);
}
@media (min-width:820px){ .vias{ grid-template-columns:minmax(200px,260px) 1fr } }

.vias__marca{ position:relative; display:grid; place-items:center; padding:.5rem 0 }
.vias__marca svg{ width:100%; max-width:260px; fill:var(--cielo-2) }
.vias__marca span{
  position:absolute;
  font-size:clamp(1.6rem,1.2rem + 1.7vw,2.3rem);
  color:var(--azul);
}
.vias__text h3{
  font-family:'Grandstander','Montserrat',cursive; font-weight:800;
  color:var(--azul-tinta); margin-bottom:.8rem; max-width:none;
}

.cita{ margin-top:1.4rem; padding-left:20px; border-left:3px solid var(--rosa) }
.cita p{ font-size:1rem; font-style:italic; line-height:1.6; color:var(--azul-hondo) }
.cita p::before{ content:'«' }
.cita p::after{ content:'»' }
.cita cite{
  display:block; margin-top:.7rem;
  font-size:.72rem; font-style:normal; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--suave);
}
.cita--sm{ margin-top:1.3rem }
.cita--sm p{ font-size:.88rem }

/* ══ ESPACIOS ════════════════════════════════════════════════════════════ */
/* bento de cuatro celdas: dos con foto, dos solo tipografía */
.pilares{ display:grid; gap:16px }
@media (min-width:900px){
  .pilares{ grid-template-columns:repeat(12,1fr) }
  .pilar{ grid-column:span 5 }
  .pilar--ancho{ grid-column:span 7 }
}
.pilar{
  position:relative; display:flex; flex-direction:column; overflow:hidden; align-self:start;
  background:#fff; border-radius:var(--radio);
  border:2px solid var(--tono,var(--linea));
  box-shadow:var(--flota);
}
.pilar[data-tono="rosa"] { --tono:var(--rosa) }
.pilar[data-tono="azul"] { --tono:var(--azul) }
.pilar[data-tono="verde"]{ --tono:var(--pasto) }
.pilar[data-tono="sol"]  { --tono:var(--sol) }

.pilar__texto{ display:flex; flex-direction:column; flex:1; padding:30px 28px 26px }
.pilar--foto > img{ width:100%; height:clamp(160px,20vw,220px); object-fit:cover }
.pilar__nube{ width:48px; fill:var(--tono); margin-bottom:.9rem }
.pilar h3{ color:var(--azul-tinta); margin-bottom:.7rem; max-width:none }
.pilar__texto > p{ font-size:.94rem; line-height:1.65 }
.pilar .cita{ border-left-color:var(--tono) }

.salas{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:16px }
.sala{ position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--flota) }
.sala img{ width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .5s var(--ui-ease) }
.sala__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px;
  background:linear-gradient(180deg,transparent,rgba(16,58,92,.88));
  color:#fff;
}
.sala__cap h3{
  font-family:'Grandstander','Montserrat',cursive; font-weight:900;
  color:#fff; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); max-width:none;
}
.sala__cap p{ font-size:.85rem; font-weight:600; color:#cde6f8 }
@media (hover:hover) and (pointer:fine){ .sala:hover img{ transform:scale(1.04) } }

.equipo{
  margin-top:clamp(1.75rem,3.5vw,2.75rem); padding:clamp(1.8rem,3.5vw,2.6rem);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--linea); border-radius:var(--radio);
}
.equipo > p{ max-width:62ch; font-size:1.02rem }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:1.4rem }
.chips li{
  padding:8px 16px; border-radius:999px;
  background:var(--cielo-2); border:1px solid var(--linea);
  font-size:.78rem; font-weight:600; color:var(--azul-hondo);
}

/* ══ GALERÍA ═════════════════════════════════════════════════════════════
   Mosaico en columnas: cada foto conserva su proporción y no quedan huecos. */
.galeria{
  width:min(1400px,100% - 2.5rem); margin-inline:auto;
  columns:4 230px; column-gap:12px;
}
.foto{
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  margin:0 0 12px; break-inside:avoid;
  border-radius:var(--radio-sm);
  box-shadow:0 14px 30px -20px rgba(16,58,92,.6);
  transition:transform .16s var(--ui-ease);
}
.foto img{ width:100%; height:auto; transition:transform .5s var(--ui-ease) }
.foto__cap{
  position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(16,58,92,.88));
  color:#fff; font-size:.76rem; font-weight:600; text-align:left; line-height:1.3;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s var(--ui-ease);
}
.foto:focus-visible .foto__cap{ opacity:1; transform:translateY(0) }
@media (hover:hover) and (pointer:fine){
  .foto:hover img{ transform:scale(1.06) }
  .foto:hover .foto__cap{ opacity:1; transform:translateY(0) }
}
@media (hover:none){ .foto__cap{ opacity:1; transform:none } }
.foto:active{ transform:scale(.985) }

/* ── filtros de álbum ─────────────────────────────────────────────────── */
.filtros{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
.filtro{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:9px 16px; border-radius:999px;
  background:#fff; border:1.5px solid var(--linea);
  font-size:.82rem; font-weight:600; color:var(--azul-hondo);
  transition:background-color .2s ease, border-color .2s ease,
             color .2s ease, transform .16s var(--ui-ease);
}
.filtro em{
  font-style:normal; font-size:.72rem; font-weight:700;
  color:var(--suave); font-variant-numeric:tabular-nums;
}
.filtro[aria-pressed="true"]{
  background:var(--azul); border-color:var(--azul); color:#fff;
}
.filtro[aria-pressed="true"] em{ color:#bfe0f7 }
.filtro:active{ transform:scale(.96) }
@media (hover:hover) and (pointer:fine){
  .filtro:not([aria-pressed="true"]):hover{ border-color:var(--azul); color:var(--azul) }
}

/* ── álbumes ──────────────────────────────────────────────────────────── */
.album{ margin-top:clamp(2.5rem,5vw,3.6rem) }
.album[hidden]{ display:none }

.album__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  margin-bottom:1.1rem;
}
.album__titulo{
  font-family:'Grandstander','Montserrat',cursive; font-weight:800;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem); color:var(--azul);
}
.album__n{
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave);
}

.foto[data-oculta]{ display:none }

.album__mas{ margin-top:1.2rem; text-align:center }
.btn--linea{
  padding:12px 26px; font-size:.9rem;
  background:#fff; color:var(--azul); border-color:var(--azul);
}
@media (hover:hover) and (pointer:fine){
  .btn--linea:hover{ background:var(--azul); color:#fff }
}

/* ── home: tarjetas de álbum que llevan a la galería ──────────────────── */
.albumes{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .albumes{ grid-template-columns:repeat(3,1fr) } }
.tarjeta-album{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3;
  border-radius:var(--radio);
  text-decoration:none;
  box-shadow:var(--flota);
  transition:transform .22s var(--ui-ease), box-shadow .22s ease;
}
.tarjeta-album img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ui-ease);
}
.tarjeta-album__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(16,58,92,.9));
  color:#fff;
}
.tarjeta-album__cap h3{
  font-family:'Grandstander','Montserrat',cursive; font-weight:800;
  font-size:1.15rem; line-height:1.2; color:#fff;
}
.tarjeta-album__cap p{
  margin-top:2px; font-size:.76rem; font-weight:600; color:#c4e2f8;
}
.tarjeta-album:active{ transform:scale(.985) }
@media (hover:hover) and (pointer:fine){
  .tarjeta-album:hover{ transform:translateY(-4px); box-shadow:var(--flota-alta) }
  .tarjeta-album:hover img{ transform:scale(1.06) }
}

.galeria__cta{ margin-top:clamp(1.8rem,4vw,2.6rem); text-align:center }

/* pie de la página de galería */
.volver{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
}

/* la galería como página propia arranca debajo de la barra, sin hero */
.pag-galeria main{ padding-top:clamp(1rem,3vw,2rem) }

/* ── ítems de video en la galería ─────────────────────────────────────── */
.foto--video .foto__play{
  position:absolute; inset:0; margin:auto;
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(16,58,92,.55);
  border:2px solid rgba(255,255,255,.85);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:transform .2s var(--ui-ease), background-color .2s ease;
  pointer-events:none;
}
.foto--video .foto__play svg{ width:26px; height:26px; fill:#fff; margin-left:2px }
.foto--video .foto__dur{
  position:absolute; top:9px; right:9px;
  padding:2px 8px; border-radius:999px;
  background:rgba(16,58,92,.72);
  color:#fff; font-size:.68rem; font-weight:700;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .foto--video:hover .foto__play{ transform:scale(1.1); background:var(--frambuesa) }
}

/* el video dentro del lightbox usa el mismo encuadre que las fotos */
.lbox__fig video{
  max-width:100%; max-height:78svh; width:auto;
  border-radius:var(--radio-sm);
  background:#000;
}
.lbox__fig video[hidden],
.lbox__fig img[hidden]{ display:none }

/* ══ FAMILIAS ════════════════════════════════════════════════════════════ */
.testi{
  position:relative; padding:36px 30px 28px;
  background:#fff; border-radius:var(--radio);
  border:1px solid var(--linea);
  box-shadow:var(--flota);
}
.testi::before{
  content:'“'; position:absolute; top:4px; left:24px;
  font-family:'Grandstander','Montserrat',cursive; font-weight:900;
  font-size:3.6rem; line-height:1; color:var(--rosa);
}
.testi blockquote{ font-size:.96rem; line-height:1.68 }
.testi figcaption{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--linea);
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul);
}
.testi figcaption span{
  display:block; margin-top:.25rem;
  font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--suave);
}

.testi--grande{ padding:clamp(2.4rem,5vw,3.4rem) clamp(2rem,4.5vw,3.4rem) clamp(1.8rem,3vw,2.4rem) }
.testi--grande::before{ font-size:5rem; top:2px; left:clamp(1.4rem,3vw,2.4rem) }
.testi--grande blockquote{
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem); line-height:1.45; font-weight:500;
  color:var(--azul-tinta); max-width:34ch;
}
.testi--grande figcaption{ border-top:0; padding-top:0; margin-top:1.6rem }

.testis{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:16px }

/* ══ CONTACTO ════════════════════════════════════════════════════════════ */
.sec--contacto{
  --r:32px; --t:64px;
  background:#fff;
  margin-top:clamp(2rem,5vw,4rem);
  padding-top:calc(clamp(3.75rem,7.5vw,6.5rem) + var(--r));
  padding-bottom:0;
}
.sec--contacto .lead{ margin-top:1.2rem }

.datos{ display:grid; gap:1.4rem; margin-top:2.4rem }
.datos__k{
  display:block; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--suave); margin-bottom:.35rem;
}
.datos__v{ display:block; font-size:1.02rem; font-weight:500; line-height:1.55; color:var(--azul-tinta); text-decoration:none }
.datos__v a{ text-decoration:none; color:inherit }
@media (hover:hover) and (pointer:fine){
  .datos__v:hover, .datos__v a:hover{ color:var(--frambuesa) }
}

.form{
  padding:clamp(1.8rem,3.5vw,2.6rem);
  background:var(--cielo-1);
  border:1px solid var(--linea);
  border-radius:var(--radio);
}
.campo{ margin-bottom:1.1rem }
.campo--2{ display:grid; gap:1.1rem }
@media (min-width:560px){ .campo--2{ grid-template-columns:1fr 1fr } }
.form label{
  display:block; margin-bottom:.4rem;
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--azul-hondo);
}
.form input,.form select,.form textarea{
  width:100%; padding:13px 16px;
  background:#fff; border:1.5px solid #a9cee8; border-radius:14px;
  font-size:1rem;     /* 16 px: con menos, el iPhone hace zoom al tocar el campo */
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form ::placeholder{ color:#7c93a6; opacity:1 }
.form textarea{ resize:vertical; min-height:110px }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(41,107,166,.16);
}
.form__nota{ margin-top:1rem; font-size:.84rem; text-align:center; color:var(--suave) }
.form__nota a{ color:var(--azul); font-weight:600 }
.form__estado{ margin-top:.8rem; font-size:.88rem; font-weight:600; text-align:center; color:var(--azul-hondo) }
.form__estado[data-error]{ color:var(--frambuesa-2) }
.form__estado:empty{ margin:0 }
.hp{ position:absolute; left:-9999px }

.mapa{
  margin-top:clamp(2.75rem,5vw,4.5rem);
  height:clamp(280px,36vw,400px);
  filter:saturate(.9);
}
.mapa iframe{ width:100%; height:100%; border:0; display:block }

/* ══ PIE ═════════════════════════════════════════════════════════════════ */
.pie{ background:var(--azul-tinta); color:#c3dced; font-size:.9rem }
.pie a{ text-decoration:none }
@media (hover:hover) and (pointer:fine){ .pie a:hover{ color:#fff } }

.pie__top{ display:grid; gap:2.5rem; padding-block:clamp(3rem,6vw,4.5rem) }
@media (min-width:760px){ .pie__top{ grid-template-columns:1.1fr .8fr 1.1fr } }

.pie__marca{ display:flex; align-items:flex-start; gap:14px }
.pie__marca img{ width:58px; height:58px; object-fit:contain; flex:0 0 auto }
.pie__marca p{
  font-family:'Grandstander','Montserrat',cursive; font-weight:800;
  font-size:1rem; line-height:1.35; color:#fff;
}
.pie__k{
  font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#7aa8c9; margin-bottom:.7rem;
}
.pie__datos .pie__k + p + .pie__k{ margin-top:1.4rem }
.pie__nav{ display:grid; gap:.35rem; align-content:start }
.pie__nav a{ width:max-content }

.pie__base{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.76rem; color:#9bbfd8;
}
.kangaroo{ display:flex; align-items:center; gap:8px; padding-block:10px; margin-block:-10px; opacity:1; transition:opacity .2s ease }
.kangaroo span{ font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:#fff }
.kangaroo img{ height:20px; width:auto }
.kangaroo__letra{ height:14px }
@media (hover:hover) and (pointer:fine){ .kangaroo:hover{ opacity:.7 } }

/* ══ WHATSAPP FLOTANTE ═══════════════════════════════════════════════════ */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:54px; height:54px; display:grid; place-items:center;
  background:#1fa855; border-radius:50%;
  box-shadow:0 14px 30px -12px rgba(16,58,92,.7);
  transition:transform .18s var(--ui-ease);
}
.wa svg{ width:28px; height:28px; fill:#fff }
.wa:active{ transform:scale(.94) }
@media (hover:hover) and (pointer:fine){ .wa:hover{ transform:scale(1.06) } }

/* ══ LIGHTBOX ════════════════════════════════════════════════════════════ */
.lbox{
  position:fixed; inset:0; z-index:150;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(9,32,52,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .22s ease;
}
.lbox[hidden]{ display:none }
.lbox[data-open]{ opacity:1 }

.lbox__fig{ display:grid; place-items:center; gap:1rem; min-width:0; min-height:0 }
.lbox__fig img{
  max-width:100%; max-height:78svh; width:auto; object-fit:contain;
  border-radius:var(--radio-sm);
  transform:scale(.96);
  transition:transform .28s var(--ui-ease);
}
.lbox[data-open] .lbox__fig img{ transform:scale(1) }
.lbox__fig figcaption{ font-size:.85rem; font-weight:600; color:#cbe4f6; text-align:center }

.lbox__nav,.lbox__close{
  display:grid; place-items:center;
  color:#fff; border-radius:50%;
  background:rgba(255,255,255,.14);
  transition:background-color .2s ease, transform .16s var(--ui-ease);
}
.lbox__nav{ width:48px; height:48px; font-size:2rem; line-height:0 }
.lbox__close{ position:absolute; top:14px; right:14px; width:44px; height:44px; font-size:1.8rem; line-height:0 }
.lbox__nav:active,.lbox__close:active{ transform:scale(.92) }
@media (hover:hover) and (pointer:fine){
  .lbox__nav:hover,.lbox__close:hover{ background:rgba(255,255,255,.26) }
}
@media (max-width:600px){
  .lbox{ grid-template-columns:1fr }
  .lbox__nav{ position:absolute; bottom:20px }
  .lbox__nav--prev{ left:26% }
  .lbox__nav--next{ right:26% }
}

/* ══ REVEAL (mismo lenguaje que la referencia: slide-up + fade) ══════════ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--rev-dur) var(--rev-ease) var(--d,0ms),
             transform var(--rev-dur) var(--rev-ease) var(--d,0ms);
}
.reveal[data-in]{ opacity:1; transform:none }
.no-js .reveal{ opacity:1; transform:none }

/* ══ MÓVIL ═══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* el video vertical ya viene encuadrado: sin zoom encima, menos trabajo para el celular */
  .hero__video{ animation:none; transform:none }
}
@media (max-width:700px) and (orientation:portrait){
  /* el poster es horizontal: se corre a la izquierda para calzar con el encuadre
     de la primera toma del video vertical, así no salta cuando arranca */
  .hero__video{ object-position:42% 50% }
}
@media (max-width:640px){
  .franja > div + div{ padding-left:16px }
  .franja dt{ font-size:clamp(1.35rem,1.05rem + 1.6vw,1.65rem) }
  .somos__foto figcaption{ right:0; bottom:-18px; width:44% }
  .vias{ box-shadow:6px 6px 0 -1px rgba(41,107,166,.22) }
  .vias__marca svg{ max-width:190px }
  .galeria{ columns:2 150px; column-gap:8px }
  .foto{ margin-bottom:8px }
  /* en la grilla del celular el pie tapa las caras; se lee en el visor */
  .foto__cap{ display:none }
  .wa{ right:14px; bottom:14px }

  /* filtros de la galería: una sola fila que se desliza, no seis renglones */
  .filtros{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scroll-padding-inline:1.25rem; scrollbar-width:none;
    margin-inline:-1.25rem; padding:2px 1.25rem 8px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.25rem,#000 calc(100% - 2.5rem),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 1.25rem,#000 calc(100% - 2.5rem),transparent);
  }
  .filtros::-webkit-scrollbar{ display:none }
  .filtro{ flex:0 0 auto; min-height:42px; scroll-snap-align:start }

  /* contacto y pie: renglones más altos para que cada enlace se pueda tocar */
  .datos__v{ line-height:2.2 }
  .datos a{ display:inline-block }
  .pie__nav{ gap:0 }
  .pie__nav a{ padding-block:8px }
  .pie__datos p:last-child{ line-height:2.4 }
  .pie__datos a{ display:inline-block }
  /* que el botón de WhatsApp no tape la última línea del pie */
  .pie__base{ padding-bottom:88px }
}
@media (max-width:559px){
  /* tarjetas de álbum en celular: cuadradas, 2 por fila */
  .albumes{ gap:10px }
  .tarjeta-album{ aspect-ratio:1; border-radius:var(--radio-sm) }
  .tarjeta-album__cap{ padding:24px 12px 12px }
  .tarjeta-album__cap h3{ font-size:clamp(.88rem,3.6vw,1.05rem) }
  .tarjeta-album__cap p{ font-size:.7rem }
}
@media (max-width:600px){
  .lbox__fig img,.lbox__fig video{ max-height:68svh }
}

/* ══ MOVIMIENTO REDUCIDO ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .hero__video,.drift{ animation:none }
}