/* ==========================================================================
   Unidad Educativa Particular Gran Bretaña
   Hoja de estilos del sitio

   Sistema de diseño
   - Color: azul, rojo y dorado tomados del escudo del colegio.
   - Tipografía: Libre Caslon Text (titulares) y Hanken Grotesk (texto).
     Ambas alojadas en el propio sitio (assets/fonts).
   - Forma: las fotos llevan las esquinas cortadas en diagonal, como el escudo.
     La franja blanca, roja y blanca del encabezado cita la cruz de la bandera.
   ========================================================================== */

@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-latin-400-normal.woff2?v=6564df5c) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/libre-caslon-text-latin-700-normal.woff2?v=882609d7) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-text-latin-400-italic.woff2?v=dab39c7e) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2?v=72993ddd) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-latin-700-normal.woff2?v=25b0e113) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2?v=78c2be80) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2?v=8d6eb9d4) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2?v=0c156079) format("woff2")}

:root{
  --azul:#2B2E83;
  --azul-profundo:#181A52;
  --azul-noche:#0F1038;
  --azul-claro:#E3E4F3;
  --rojo:#D31622;
  --rojo-oscuro:#B3121D;
  --dorado:#C78B26;
  --dorado-claro:#F6EBD6;
  --papel:#F5F6FB;
  --blanco:#FFFFFF;
  --tinta:#15090C;
  --tinta-suave:#4A4753;
  --linea:rgba(21,9,12,.12);

  --serif:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  --titulos:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter:clamp(20px, 5vw, 72px);
  --max:1180px;
  --corte:28px;
  --header:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{
  margin:0;
  font:400 1.0625rem/1.65 var(--sans);
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titulos);font-weight:600;letter-spacing:-.015em;margin:0;color:inherit;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}

.container{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:var(--tinta);padding:10px 16px;border-radius:4px}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Botones y enlaces ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.75rem 1.5rem;
  font:600 1rem/1.2 var(--sans);text-decoration:none;
  border:1.5px solid transparent;border-radius:4px;
  transition:background-color .2s, color .2s, border-color .2s;
  cursor:pointer;
}
.btn svg{width:20px;height:20px;flex:none}
.btn--rojo{background:var(--rojo);color:#fff}
.btn--rojo:hover{background:var(--rojo-oscuro)}
.btn--borde{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.btn--borde:hover{background:#fff;color:var(--azul-profundo)}
.btn--oscuro{background:var(--azul-profundo);color:#fff}
.btn--oscuro:hover{background:var(--azul)}
.btn--linea{border-color:var(--azul);color:var(--azul);background:transparent}
.btn--linea:hover{background:var(--azul);color:#fff}
.enlace{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;color:var(--azul);text-decoration:none;
  border-bottom:2px solid var(--dorado);padding-bottom:2px;
}
.enlace:hover{color:var(--rojo)}
.sobre-oscuro .enlace,.banda .enlace,.seccion--oscura .enlace{color:#fff}
.banda .enlace:hover,.seccion--oscura .enlace:hover{color:var(--dorado)}

/* ---------- Encabezado ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  color:#fff;
  transition:background-color .25s, box-shadow .25s, color .25s;
}
.site-header::before{
  content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(24,26,82,.96) 0%, rgba(24,26,82,.82) 62%, rgba(24,26,82,0) 100%);
  transition:opacity .25s;
}
.site-header.is-solid::before{opacity:0}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header)}
.logo{display:block;line-height:0;flex:none}
.logo img{height:58px;width:auto}
.logo__color{display:none}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav a:not(.btn){
  text-decoration:none;font-weight:500;font-size:.98rem;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .2s;
}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{border-bottom-color:var(--dorado)}
.nav .btn{min-height:44px;padding:.55rem 1.15rem;white-space:nowrap}
.nav-toggle{
  display:none;width:46px;height:46px;border:0;background:transparent;color:inherit;
  cursor:pointer;border-radius:4px;
}
.nav-toggle svg{width:28px;height:28px}
.site-header.is-solid{background:#fff;color:var(--tinta);box-shadow:0 1px 0 var(--linea)}
.site-header.is-solid .logo__blanco{display:none}
.site-header.is-solid .logo__color{display:block}

/* ---------- Héroe (inicio e interiores) ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:max(640px, min(100svh, 880px));
  padding:110px 0 72px;
  background:var(--azul-profundo);color:#fff;
}
.hero--interior{min-height:clamp(480px, 62svh, 600px);padding:120px 0 64px}
.hero__photo{position:absolute;inset:0 0 0 34%;z-index:-4}
.hero__photo .slot{height:100%;clip-path:none;aspect-ratio:auto}
.hero__capa{
  position:absolute;inset:0;z-index:-3;
  --arriba:62%;--abajo:42%;--grosor:0px;
  clip-path:polygon(0 0, calc(var(--arriba) + var(--grosor)) 0, calc(var(--abajo) + var(--grosor)) 100%, 0 100%);
}
.hero--interior .hero__capa{--arriba:60%;--abajo:46%}
.hero__capa--blanca-ext{--grosor:40px;background:#fff}
.hero__capa--roja{--grosor:28px;background:var(--rojo);z-index:-2}
.hero__capa--blanca-int{--grosor:16px;background:#fff;z-index:-1}
.hero__capa--azul{--grosor:0px;background:var(--azul-profundo);z-index:0}
.hero__contenido{position:relative;z-index:1;width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}
.hero__texto{max-width:min(34rem, 42vw)}
.hero h1{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:clamp(2rem, 3.6vw, 3.5rem);line-height:1.12;letter-spacing:-.02em}
.hero--interior h1{font-size:clamp(1.8rem, 2.9vw, 2.8rem);line-height:1.14}
.hero__bajada{margin-top:22px;font-size:1.125rem;line-height:1.6;color:rgba(255,255,255,.88);max-width:31rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__nota{margin-top:30px;font-size:.95rem;color:rgba(255,255,255,.75)}
.migas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:.92rem;color:rgba(255,255,255,.75)}
.migas a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.migas a:hover{color:#fff;border-bottom-color:var(--dorado)}
.migas li + li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}

/* Entrada de la portada: la foto se acerca, las franjas se dibujan de arriba abajo y el texto sube.
   El texto y el fondo azul nunca dependen de la animación: siempre son visibles. */
@keyframes foto-entra{from{transform:scale(1.14)}to{transform:none}}
@keyframes capa-entra{from{clip-path:polygon(0 0, calc(var(--arriba) + var(--grosor)) 0, calc(var(--arriba) + var(--grosor)) 0, 0 0)}}
@keyframes texto-entra{from{transform:translateY(30px)}to{transform:none}}
.hero__photo img{animation:foto-entra 2.8s cubic-bezier(.2,.7,.2,1) backwards}
.hero__capa{animation:capa-entra 1.3s cubic-bezier(.65,0,.25,1) backwards}
.hero__capa--blanca-ext{animation-delay:.15s}
.hero__capa--roja{animation-delay:.35s}
.hero__capa--blanca-int{animation-delay:.55s}
.hero__capa--azul{animation:none}
.hero__texto > *{animation:texto-entra .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero__texto > :nth-child(1){animation-delay:.3s}
.hero__texto > :nth-child(2){animation-delay:.45s}
.hero__texto > :nth-child(3){animation-delay:.6s}
.hero__texto > :nth-child(4){animation-delay:.75s}
.hero__texto > :nth-child(5){animation-delay:.9s}

/* Portadas en PC: la foto empieza junto a la diagonal, que es casi vertical,
   para que las personas de la foto no queden tapadas */
@media (min-width: 1101px){
  .hero__photo{inset:0 0 0 38%}
  .hero__capa{--arriba:47%;--abajo:41%}
  .hero--interior .hero__capa{--arriba:47%;--abajo:41%}
  .hero--interior{min-height:clamp(500px, 38vw, 680px)}
  .hero__texto{max-width:min(27rem, 30vw)}
  .hero:not(.hero--interior){min-height:clamp(600px, 50vw, 800px)}
  .hero:not(.hero--interior) h1{font-size:clamp(2.1rem, 3.3vw, 3.3rem)}
}
/* En PC la foto empieza debajo del menú, así las cabezas nunca quedan tapadas */
@media (min-width: 861px){
  .hero__photo{top:var(--alto-menu, 76px)}
}
/* Pantallas grandes: el texto se mantiene a la izquierda de la diagonal */
@media (min-width: 1600px){
  .hero__texto{max-width:min(27rem, 22vw)}
}
/* Pantallas medianas (tablet horizontal, ventana reducida): foto a todo el ancho,
   oscurecida solo detrás del texto */
@media (min-width: 861px) and (max-width: 1100px){
  .hero__photo{inset:0 0 0 40%}
  .hero__capa--blanca-ext,.hero__capa--roja,.hero__capa--blanca-int{display:none}
  .hero__capa--azul{
    clip-path:none;
    background:linear-gradient(90deg, rgba(24,26,82,1) 0%, rgba(24,26,82,1) 40%, rgba(24,26,82,.45) 43%, rgba(24,26,82,0) 48%);
  }
  .hero__texto{max-width:35%}
}

/* ---------- Admisiones: etapas ---------- */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:44px;align-items:stretch}
.etapa{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--linea);padding:clamp(24px,2.6vw,34px);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.etapa__edad{font-size:.9rem;font-weight:600;color:var(--rojo);letter-spacing:.02em}
.etapa h3{font-size:1.3rem}
.etapa .lista-check{flex:1}
.etapa .btn{align-self:flex-start;margin-top:8px}
.etapa--destacada{background:var(--azul-profundo);color:#fff;border-color:var(--azul-profundo)}
.etapa--destacada .etapa__edad{color:var(--dorado)}
.etapa--destacada .lista-check li{color:rgba(255,255,255,.88)}
@media (max-width: 960px){.etapas{grid-template-columns:1fr}}

/* Foto horizontal a todo el ancho del contenedor, bajo el texto */
.foto-ancha{margin-top:clamp(28px,4vw,48px)}
.banda .prosa,.seccion .container > .prosa{max-width:46rem}

/* Vida escolar: arte y escenario */
.fila-fotos.arte-fotos{grid-template-columns:3fr 2fr;align-items:start}
.arte-fotos .slot{--ar:3/2}
.arte-lista{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.arte-lista li{border-top:3px solid var(--rojo);padding-top:14px}
.arte-lista strong{display:block;font:600 1.1rem/1.3 var(--titulos);margin-bottom:6px}
.arte-lista span{color:var(--tinta-suave);font-size:.98rem}
@media (max-width: 860px){.fila-fotos.arte-fotos{grid-template-columns:1fr}.arte-lista{grid-template-columns:repeat(2,1fr)}}

/* ---------- Espacios de imagen ---------- */
.slot{
  position:relative;margin:0;overflow:hidden;aspect-ratio:var(--ar, 4/3);max-width:100%;
  background-color:var(--azul);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(255,255,255,.14) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255,255,255,.14) 50%, transparent calc(50% + 1px)),
    linear-gradient(160deg, #3A3E9C 0%, var(--azul-profundo) 100%);
  clip-path:polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}
.slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--foco, 50% 40%)}
.slot picture{display:block;width:100%;height:100%}
.slot__pie{
  position:absolute;left:0;right:0;bottom:0;padding:22px 24px 18px;
  font-size:.95rem;line-height:1.45;color:#fff;
  background:linear-gradient(0deg, rgba(24,26,82,.9), rgba(24,26,82,0));
}
.slot--recto{clip-path:none}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(64px, 9vw, 120px)}
.seccion--blanca{background:#fff}
.seccion--oscura{background:var(--azul-profundo);color:#fff}
.seccion--dorada{background:var(--dorado-claro)}
.seccion h2,.titulo-seccion{font-size:clamp(1.65rem, 2.8vw, 2.45rem);line-height:1.18;letter-spacing:-.02em;max-width:24ch}
.seccion__intro{margin-top:18px;max-width:40rem;color:var(--tinta-suave)}
.seccion--oscura .seccion__intro{color:rgba(255,255,255,.84)}
.seccion__cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.prosa p + p{margin-top:16px}
.prosa p{max-width:38rem}
.prosa h3{font-size:1.3rem;line-height:1.3;margin:32px 0 10px}
.seccion--oscura .prosa p{color:rgba(255,255,255,.86)}

/* Bloque dividido: texto + imagen */
.dividido{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px, 6vw, 96px);align-items:center}
.dividido--imagen-izq{grid-template-columns:5fr 6fr}
.dividido > *{min-width:0}
.dividido h2{margin-bottom:22px}
.dividido .slot{--ar:4/3}
.dividido--alto .slot{--ar:4/5}

/* ---------- Diferenciales ---------- */
.pruebas{padding-block:48px 8px}
.pruebas__lista{display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(24px,3vw,44px)}
.prueba{display:grid;grid-template-columns:30px 1fr;gap:4px 14px;align-items:start}
.prueba svg{width:30px;height:30px;color:var(--azul);grid-row:1 / 3}
.prueba h3{font:600 1.02rem/1.35 var(--titulos)}
.prueba p{font-size:.95rem;line-height:1.55;color:var(--tinta-suave)}

/* ---------- Lista de rasgos con icono ---------- */
.rasgos{display:grid;grid-template-columns:repeat(var(--cols, 3), 1fr);gap:clamp(28px,3.4vw,52px);margin-top:48px}
.rasgo > svg{width:34px;height:34px;color:var(--azul);margin-bottom:14px;display:block}
.seccion--oscura .rasgo > svg{color:var(--dorado)}
.rasgo h3{font-size:1.15rem;line-height:1.3;margin-bottom:8px}
.rasgo p{color:var(--tinta-suave)}
.seccion--oscura .rasgo p{color:rgba(255,255,255,.82)}
.rasgo p + p{margin-top:10px}
.rasgo .etiqueta{display:inline-block;margin-top:12px;font-size:.88rem;font-weight:600;color:var(--azul)}

/* ---------- Tarjetas de página (enlaces a secciones del sitio) ---------- */
.puertas{display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(20px,2.6vw,36px);margin-top:48px}
.puerta{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.puerta .slot{--ar:4/3;--corte:22px}
.puerta h3{font-size:1.25rem;line-height:1.3;margin-top:20px}
.puerta p{margin-top:8px;color:var(--tinta-suave)}
.puerta .enlace{margin-top:14px;align-self:flex-start}
.puerta:hover h3{color:var(--azul)}

/* ---------- Ruta de Inicial a Décimo ---------- */
.ruta__escalera{display:grid;grid-template-columns:repeat(5, 1fr);align-items:end;margin-top:56px}
.paso{
  padding:24px 22px 26px;
  min-height:calc(150px + var(--n) * 56px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  text-decoration:none;color:inherit;
}
.paso h3{font:600 1.1rem/1.3 var(--titulos)}
.paso p{font-size:.95rem;line-height:1.5}
.paso--1{--n:0;background:var(--azul-claro);color:var(--tinta)}
.paso--2{--n:1;background:#B7B9DD;color:var(--tinta)}
.paso--3{--n:2;background:#6F72B3;color:#fff}
.paso--4{--n:3;background:var(--azul);color:#fff}
.paso--final{--n:4;background:#fff;color:var(--tinta);border:3px solid var(--dorado)}
.paso--final h3{font-family:var(--titulos);font-weight:700;font-size:1.15rem}
a.paso:hover h3{text-decoration:underline;text-decoration-color:var(--dorado);text-underline-offset:4px}

/* ---------- Banda diagonal (egresados, citas) ---------- */
.banda{
  background:var(--azul-profundo);color:#fff;
  padding-block:clamp(110px, 13vw, 190px);
  clip-path:polygon(0 clamp(28px,4vw,64px), 100% 0, 100% calc(100% - clamp(28px,4vw,64px)), 0 100%);
  margin-block:calc(-1 * clamp(28px,4vw,64px));
  position:relative;z-index:1;
}
.banda h2{font-size:clamp(1.65rem, 2.8vw, 2.45rem);line-height:1.18;max-width:20ch;margin-bottom:22px}
.banda p{color:rgba(255,255,255,.86);max-width:36rem}
.banda p + p{margin-top:16px}
.banda .slot{--ar:3/2}

/* ---------- Pasos numerados (procesos reales) ---------- */
.pasos{display:grid;grid-template-columns:repeat(var(--cols, 4), 1fr);gap:0;margin-top:48px;counter-reset:paso}
.pasos li{position:relative;padding:28px 26px 30px 0;border-top:3px solid var(--azul);counter-increment:paso}
.pasos li + li{padding-left:26px;border-left:1px solid var(--linea)}
.pasos li::before{
  content:counter(paso);display:block;margin-bottom:14px;
  font:700 2.2rem/1 var(--titulos);color:var(--dorado);
}
.pasos h3{font:600 1.08rem/1.35 var(--titulos);margin-bottom:8px}
.pasos p{color:var(--tinta-suave);font-size:.98rem}
.seccion--oscura .pasos li{border-top-color:var(--dorado)}
.seccion--oscura .pasos li + li{border-left-color:rgba(255,255,255,.18)}
.seccion--oscura .pasos p{color:rgba(255,255,255,.82)}

/* ---------- Niveles: subnavegación y detalle ---------- */
.subnav{position:sticky;top:var(--header);z-index:20;background:#fff;border-bottom:1px solid var(--linea)}
.subnav ul{display:flex;gap:6px 28px;overflow-x:auto;padding-block:14px;scrollbar-width:thin}
.subnav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--tinta-suave);padding-bottom:4px;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--azul);border-bottom-color:var(--dorado)}
.nivel{padding-block:clamp(56px, 8vw, 104px);border-bottom:1px solid var(--linea)}
.nivel:nth-of-type(even){background:#fff}
.nivel__cursos{display:inline-block;margin-bottom:14px;font-weight:600;color:var(--azul)}
.nivel__cols{display:grid;grid-template-columns:repeat(2, 1fr);gap:28px 48px;margin-top:32px}
.nivel__cols h3{font:600 1.05rem/1.35 var(--titulos);margin-bottom:10px}
.lista-check li{position:relative;padding-left:28px;margin-top:8px;color:var(--tinta-suave)}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;
  border-left:2px solid var(--dorado);border-bottom:2px solid var(--dorado);transform:rotate(-45deg);
}
.seccion--oscura .lista-check li,.banda .lista-check li{color:rgba(255,255,255,.86)}
.nota{
  margin-top:32px;padding:20px 24px;border-left:4px solid var(--dorado);background:var(--dorado-claro);
  max-width:46rem;
}
.nota h3{font:600 1.02rem/1.35 var(--titulos);margin-bottom:6px}

/* ---------- Videos ---------- */
.video{position:relative;margin:0;max-width:100%}
.video__marco{position:relative;display:block;width:100%;aspect-ratio:var(--ar,16/9);overflow:hidden;background:var(--azul-profundo);
  clip-path:polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)))}
.video__marco img,.video__marco video,.video__marco iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.video--vertical{--ar:9/16;max-width:360px}
.video__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;padding:0;cursor:pointer;color:#fff;text-decoration:none;
  background:linear-gradient(0deg, rgba(24,26,82,.55), rgba(24,26,82,.05) 60%);
}
.video__boton{
  display:flex;align-items:center;justify-content:center;width:86px;height:86px;border-radius:50%;
  background:var(--rojo);box-shadow:0 10px 30px rgba(15,16,56,.35);transition:transform .2s, background-color .2s;
}
.video__boton svg{width:34px;height:34px;margin-left:5px}
.video__play:hover .video__boton,.video__play:focus-visible .video__boton{transform:scale(1.07);background:var(--rojo-oscuro)}
.video__duracion{position:absolute;left:20px;bottom:18px;font-weight:600;font-size:.95rem}
.video figcaption{margin-top:12px;font-size:.95rem;color:var(--tinta-suave)}
.seccion--oscura .video figcaption,.banda .video figcaption{color:rgba(255,255,255,.8)}
.testimonio-video{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:44px}
.testimonio-video > *{min-width:0}
.testimonio-video .cita + .cita{margin-top:36px;padding-top:30px;border-top:1px solid var(--linea)}

/* ---------- Mosaico de actividades ---------- */
.mosaico{display:grid;grid-template-columns:repeat(8, 1fr);grid-auto-flow:dense;grid-template-rows:repeat(2, clamp(180px, 20vw, 260px));gap:clamp(10px,1.4vw,16px);margin-top:44px}
.mosaico__item{position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff;grid-column:span 2}
.mosaico__item--alto{grid-row:span 2}
.mosaico__item--ancho{grid-column:span 4}
.mosaico__item img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 40%);transition:transform .5s ease}
.mosaico__item:hover img{transform:scale(1.04)}
.mosaico__item span{
  position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;font-weight:600;font-size:1rem;line-height:1.3;
  background:linear-gradient(0deg, rgba(24,26,82,.92), rgba(24,26,82,0));
}
.fila-fotos{display:grid;grid-template-columns:repeat(var(--cols,3), 1fr);gap:clamp(14px,2vw,28px);margin-top:44px}
.fila-fotos > figure{margin:0;min-width:0}
.fila-fotos .slot{display:block;--ar:4/3;--corte:20px}
.fila-fotos figcaption{margin-top:10px;font-size:.95rem;color:var(--tinta-suave)}

/* ---------- Galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(12, 1fr);grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px);margin-top:44px}
.galeria__item{grid-column:span 4;margin:0}
.galeria__item--ancho{grid-column:span 8}
.galeria__item .slot{display:block;--ar:4/3;--corte:18px}
.galeria__item--ancho .slot{--ar:16/9}
.galeria__item button{all:unset;display:block;width:100%;cursor:zoom-in}
.galeria__item button:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}
.galeria__item figcaption{margin-top:8px;font-size:.92rem;color:var(--tinta-suave)}
.visor{border:0;padding:0;background:transparent;max-width:min(1100px, 94vw);max-height:92vh}
.visor::backdrop{background:rgba(15,16,56,.9)}
.visor img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:auto}
.visor p{color:#fff;text-align:center;margin-top:12px}
.visor__cerrar{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--azul-profundo);font-size:1.6rem;line-height:1;cursor:pointer}

/* ---------- Testimonios ---------- */
.testimonios__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,88px);margin-top:44px;align-items:start}
.cita{margin:0}
.cita blockquote{margin:0;font:italic 400 clamp(1.25rem, 2vw, 1.6rem)/1.5 var(--serif)}
.cita figcaption{margin-top:18px;font-weight:600;font-size:.98rem}
.cita figcaption span{display:block;font-weight:400;color:var(--tinta-suave)}
.cita--menor blockquote{font-size:clamp(1.1rem, 1.5vw, 1.3rem)}
.cita--grande blockquote{font-size:clamp(1.5rem, 2.6vw, 2.1rem);line-height:1.4;max-width:30ch}
.seccion--oscura .cita figcaption span{color:rgba(255,255,255,.7)}

/* ---------- Línea de tiempo (historia) ---------- */
.historia{display:grid;grid-template-columns:repeat(4, 1fr);gap:0;margin-top:48px}
.historia li{padding:0 24px 0 0;border-top:3px solid var(--dorado);padding-top:22px}
.historia li + li{padding-left:24px}
.historia strong{display:block;font:700 1.45rem/1.1 var(--titulos);color:var(--azul);margin-bottom:10px}
.historia p{color:var(--tinta-suave);font-size:.98rem}

/* ---------- Preguntas frecuentes ---------- */
.faq{margin-top:40px;max-width:52rem;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font:600 1.08rem/1.4 var(--sans);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);
  transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details > div{padding:0 0 24px;color:var(--tinta-suave);max-width:44rem}
.faq details > div p + p{margin-top:10px}

/* ---------- Formulario ---------- */
.formulario{display:grid;gap:18px;background:#fff;color:var(--tinta);padding:clamp(24px,3vw,40px);border-top:4px solid var(--rojo)}
.formulario h3{font-size:1.3rem;line-height:1.3}
.formulario p.ayuda{color:var(--tinta-suave);font-size:.95rem}
.campo{display:grid;gap:6px}
.campo label{font-weight:600;font-size:.95rem}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:1rem;color:var(--tinta);background:#fff;
  border:1.5px solid #C9C8D3;border-radius:4px;padding:12px 14px;min-height:48px;width:100%;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(43,46,131,.18)}
.campo__error{color:var(--rojo-oscuro);font-size:.9rem;font-weight:500}
.formulario .btn{justify-self:start}
.formulario__estado{font-size:.95rem;color:var(--azul);font-weight:500}

/* ---------- Bloque estratégico reemplazable ---------- */
.ciclo{background:var(--dorado);color:var(--tinta);padding-block:34px}
.ciclo[data-activo="false"]{display:none}
.ciclo__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px}
.ciclo h2{font-size:clamp(1.3rem, 2vw, 1.7rem);line-height:1.3}
.ciclo p{margin-top:4px;max-width:36rem}

/* ---------- Cierre y contacto ---------- */
.visita{background:var(--azul-profundo);color:#fff}
.visita__grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,96px);align-items:start}
.visita__grid > *{min-width:0}
.visita h2{max-width:18ch}
.visita__intro{margin-top:18px;color:rgba(255,255,255,.86);max-width:32rem}
.visita__acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.contacto{display:grid;gap:22px;margin:0}
.contacto dt{font-weight:600;font-size:.95rem;color:var(--dorado)}
.contacto dd{margin:2px 0 0;font-size:1.05rem}
.contacto a{text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Pie de página ---------- */
.pie{background:var(--azul-noche);color:rgba(255,255,255,.78);padding-block:56px 28px;font-size:.95rem}
.pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px 40px}
.pie__grid > *{min-width:0}
.pie img{height:56px;width:auto;display:block}
.pie h2{font:600 .95rem/1.3 var(--titulos);color:#fff;margin-bottom:12px}
.pie li + li{margin-top:8px}
.pie a{text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--dorado)}
.pie__marca p{margin-top:16px;max-width:22rem}
.pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed;z-index:40;
  right:max(18px, env(safe-area-inset-right, 0px));bottom:max(18px, env(safe-area-inset-bottom, 0px));
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1F9D55;color:#fff;box-shadow:0 8px 22px rgba(15,16,56,.28);
  transition:transform .2s;
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:30px;height:30px}

/* ---------- Aviso de cookies ---------- */
.aviso-cookies{
  position:fixed;z-index:60;left:max(16px, env(safe-area-inset-left, 0px));bottom:max(16px, env(safe-area-inset-bottom, 0px));
  width:min(440px, calc(100% - 32px));padding:20px 22px;
  background:#fff;color:var(--tinta);border-top:4px solid var(--azul);box-shadow:0 12px 30px rgba(15,16,56,.25);
  font-size:.95rem;line-height:1.5;
}
.aviso-cookies__botones{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.aviso-cookies .btn{min-height:42px;padding:.5rem 1.1rem}
.pie__cookies{all:unset;cursor:pointer;margin-left:16px;text-decoration:underline;text-underline-offset:3px}
.pie__cookies:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}

/* ---------- Páginas de texto (privacidad) ---------- */
.legal{max-width:46rem}
.legal h2{font-size:1.4rem;margin:40px 0 12px}
.legal p,.legal li{color:var(--tinta-suave)}
.legal p + p{margin-top:12px}
.legal ul{list-style:disc;padding-left:22px;margin-top:10px}
.legal li + li{margin-top:6px}

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1100px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{
    display:none;position:absolute;left:0;right:0;top:var(--header);
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;color:var(--tinta);padding:10px var(--gutter) 22px;
    box-shadow:0 14px 24px rgba(21,9,12,.12);
    max-height:calc(100svh - var(--header));overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--linea)}
  .nav a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--linea)}
  .nav .btn{margin-top:16px}
  .pie__grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 960px){
  .pruebas__lista{grid-template-columns:repeat(2, 1fr)}
  .dividido,.dividido--imagen-izq,.visita__grid,.testimonios__grid{grid-template-columns:1fr}
  .dividido--imagen-izq > .slot,.dividido--imagen-izq > figure{order:-1}
  .dividido--alto .slot{--ar:4/3}
  .rasgos{grid-template-columns:repeat(2, 1fr)}
  .puertas{grid-template-columns:repeat(2, 1fr)}
  .ruta__escalera{grid-template-columns:1fr;border-left:4px solid var(--azul)}
  .paso{min-height:0;justify-content:flex-start;padding:20px 22px}
  .pasos{grid-template-columns:repeat(2, 1fr)}
  .pasos li:nth-child(odd){padding-left:0;border-left:0}
  .pasos li:nth-child(even){padding-left:26px}
  .historia{grid-template-columns:repeat(2, 1fr);row-gap:32px}
  .historia li:nth-child(odd){padding-left:0}
  .galeria__item{grid-column:span 6}
  .galeria__item--ancho{grid-column:span 12}
  .nivel__cols{grid-template-columns:1fr}
}

@media (max-width: 860px){
  /* Portada en celular: la foto completa arriba, debajo del menú, y el texto sobre azul.
     Así la imagen se aprecia entera, centrada y sin velo encima. */
  .hero,.hero--interior{display:block;min-height:0;padding:var(--alto-menu, 76px) 0 48px}
  .hero__photo{position:relative;inset:auto;z-index:0}
  .hero__photo .slot{height:auto;aspect-ratio:var(--ar-movil, 4/3);max-height:66svh;width:100%}
  .hero__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:56px;pointer-events:none;
    background:linear-gradient(0deg, var(--azul-profundo), rgba(24,26,82,0))}
  .hero__capa{display:none}
  .hero__contenido{margin-top:22px}
  .hero__texto{max-width:34rem}
}

@media (max-width: 860px){
  .mosaico{grid-template-columns:repeat(2, 1fr);grid-template-rows:none;grid-auto-rows:200px}
  .mosaico__item,.mosaico__item--ancho{grid-column:span 1}
  .mosaico__item--alto{grid-row:span 2}
  .mosaico__item:last-child{grid-column:span 2}
  .testimonio-video{grid-template-columns:1fr}
  .video--vertical{margin-inline:auto}
  .fila-fotos{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 600px){
  :root{--corte:20px}
  .pruebas__lista,.rasgos,.puertas,.pasos,.historia,.fila-fotos{grid-template-columns:1fr}
  .pasos li,.pasos li + li,.pasos li:nth-child(even){padding-left:0;border-left:0}
  .historia li + li{padding-left:0}
  .galeria__item,.galeria__item--ancho{grid-column:span 12}
  .hero__acciones .btn{flex:1 1 100%}
  .ciclo__fila .btn{width:100%}
  .pie__grid{grid-template-columns:1fr}
  .logo img{height:50px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero__capa,.hero__texto > *,.hero__photo img{animation:none}
  *{transition-duration:.01ms !important}
}