/* ============================================================
   COLEGIO CALASANZ — HOJA DE ESTILO BASE
   Versión 0.1 — 07/09/2026 — Estudio Ovalle

   Fuente de verdad del lenguaje visual de todo el sitio.
   Tomada 1:1 del prototipo /_calasanz_turqueza (home) más los
   ajustes de las maquetas de páginas internas (home v4 + jardín).

   Reglas:
   - Esta hoja se comparte en TODAS las páginas. No se copia ni se
     versiona por página: si algo cambia, cambia acá.
   - Los estilos propios de una página (ej. home.css) van en un
     archivo aparte y sólo agregan lo que esa página necesita.
   - Nunca valores sueltos de color/tipografía: siempre variables.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  /* Marca */
  --bordo:#6f1d1d;            /* institucional: títulos destacados, top bar, bottom bar, botón primario */
  --bordo-oscuro:#581313;
  --bordo-hover:#872828;
  --bordo-etiqueta:#662020;   /* pastillas "NIVEL INICIAL" */
  --turquesa:#228d99;         /* acento UI: nav activo, botones secundarios, links, subtítulos */
  --turquesa-hover:#177f8a;
  --turquesa-oscuro:#0f7986;  /* fondos grandes: bandas, CTA admisiones, cajas de título */
  --azul:#0e2349;             /* uso puntual: título "Novedades" */
  --azul-oscuro:#071d46;

  /* Neutros */
  --tinta:#242837;            /* títulos generales */
  --texto:#565656;            /* cuerpo de texto */
  --texto-suave:#6f6f6f;      /* bajadas, textos secundarios */
  --texto-mudo:#a8a8a8;       /* pestañas inactivas, placeholders */
  --gris-claro:#ecf0f1;       /* fondos de sección alternos, hero, footer */
  --gris-form:#ececec;        /* tarjeta de formulario */
  --linea:#d8d8d8;            /* bordes y separadores */
  --linea-suave:#e6e6e6;
  --blanco:#ffffff;

  /* Tipografía */
  --fuente:"Archivo",Arial,sans-serif;

  /* Layout */
  --ancho:1320px;
  --gutter:24px;
  --alto-topbar:30px;
  --alto-header:122px;

  /* Radios */
  --radio-boton:8px;
  --radio-boton-lg:11px;
  --radio-pastilla:11px;
  --radio-imagen:15px;
  --radio-tarjeta:20px;
  --radio-panel:16px;
  --radio-input:6px;

  /* Sombras y movimiento */
  --sombra-flotante:0 10px 28px rgba(0,0,0,.12);
  --sombra-hover:0 8px 18px rgba(0,0,0,.10);
  --sombra-tarjeta:0 14px 30px rgba(28,36,53,.07);
  --transicion:.22s ease;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.55;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px}

/* ------------------------------------------------------------
   3. TIPOGRAFÍA
   Pesos: 400 para títulos, 500 para subtítulos/nav, 600–700 sólo
   en botones, etiquetas y encabezados de footer.
   ------------------------------------------------------------ */
h1,h2,h3,h4{margin:0;color:var(--tinta);font-weight:400}
h1{font-size:58px;line-height:64px;letter-spacing:-.58px}
h2{font-size:42px;line-height:49px;letter-spacing:-.4px}
h3{font-size:28px;line-height:37px}
h4{font-size:20px;line-height:25px;font-weight:500}
p{margin:0}
p + p{margin-top:1em}

.texto-destacado{color:var(--bordo)}          /* <span> dentro de títulos */
.bajada{font-size:20px;line-height:28px;color:var(--texto-suave)}
.texto-grande{font-size:24px;line-height:34px;color:var(--texto-suave)}
.texto-chico{font-size:14px;line-height:20px}
.texto-centrado{text-align:center}
.etiqueta{                                    /* eyebrow / pastilla */
  display:inline-flex;align-items:center;height:35px;padding:0 29px;
  border-radius:var(--radio-pastilla);background:var(--bordo-etiqueta);color:var(--blanco);
  font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
}
.mayusculas{text-transform:uppercase;letter-spacing:.03em}

/* Encabezado de sección centrado (patrón repetido en toda la home) */
.encabezado-seccion{text-align:center;max-width:820px;margin:0 auto}
.encabezado-seccion .bajada{margin-top:17px}
.encabezado-seccion--izquierda{text-align:left;margin:0}

/* ------------------------------------------------------------
   4. CONTENEDOR Y SECCIONES
   ------------------------------------------------------------ */
.contenedor{width:min(100% - var(--gutter) * 2, var(--ancho));margin-inline:auto}
.contenedor--angosto{width:min(100% - var(--gutter) * 2, 980px);margin-inline:auto}

.seccion{padding:100px 0}
.seccion--chica{padding:70px 0}
.seccion--grande{padding:140px 0}
.seccion--gris{background:var(--gris-claro)}
.seccion--blanca{background:var(--blanco)}
.seccion--turquesa{background:var(--turquesa-oscuro);color:var(--blanco)}
.seccion--bordo{background:var(--bordo);color:var(--blanco)}
.seccion--turquesa h1,.seccion--turquesa h2,.seccion--turquesa h3,
.seccion--bordo h1,.seccion--bordo h2,.seccion--bordo h3{color:var(--blanco)}

/* Grillas genéricas */
.grilla{display:grid;gap:30px}
.grilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grilla--60{gap:60px}

/* ------------------------------------------------------------
   5. BOTONES Y LINKS
   Mayúsculas sólo acá, en nav, etiquetas y footer.
   ------------------------------------------------------------ */
.boton{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:237px;height:49px;padding:0 28px;border:0;
  border-radius:var(--radio-boton);
  font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1;
  transition:transform var(--transicion),background var(--transicion),color var(--transicion),
             border-color var(--transicion),box-shadow var(--transicion);
}
.boton:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.boton:active{transform:translateY(0) scale(.985);box-shadow:none}

.boton--primario{background:var(--bordo);color:var(--blanco)}
.boton--primario:hover{background:var(--turquesa)}

.boton--secundario{background:var(--turquesa);color:var(--blanco)}
.boton--secundario:hover{background:var(--bordo)}

.boton--contorno{background:transparent;border:1px solid var(--bordo);color:var(--bordo);border-radius:12px}
.boton--contorno:hover{background:var(--turquesa);border-color:var(--turquesa);color:var(--blanco)}

.boton--blanco{background:var(--blanco);color:var(--turquesa-hover)}   /* sobre fondos turquesa/bordó */
.boton--blanco:hover{background:var(--bordo);color:var(--blanco)}

.boton--grande{min-width:280px;height:56px;font-size:14px;border-radius:var(--radio-boton-lg)}
.boton--ancho{width:100%}

.link{
  font-size:14px;font-weight:600;color:var(--turquesa);text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--transicion),text-underline-offset var(--transicion);
}
.link:hover{color:var(--bordo);text-underline-offset:6px}
.link--flecha{text-decoration:none;font-size:12px;font-weight:700;color:var(--bordo)}
.link--flecha::after{content:" >";}
.link--flecha:hover{color:var(--turquesa)}

/* ------------------------------------------------------------
   6. HEADER: barra superior + cabecera + navegación
   ------------------------------------------------------------ */
.barra-superior{background:var(--bordo);color:var(--blanco);height:var(--alto-topbar);font-size:12px;font-weight:500}
.barra-superior .contenedor{display:flex;justify-content:flex-end;align-items:center;gap:18px;height:100%}
.barra-superior a{display:inline-flex;align-items:center;gap:6px;transition:opacity var(--transicion)}
.barra-superior a:hover{opacity:.75}
.barra-superior svg{width:16px;height:16px;fill:currentColor}

.cabecera{position:relative;z-index:20;background:var(--blanco);border-bottom:1px solid #f3f3f3}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;height:var(--alto-header)}
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca img{width:297px;height:auto}
.marca__mobile{display:none}

.nav{display:flex;align-items:center;gap:29px;white-space:nowrap}
.nav > a,.nav__item > a{
  display:flex;align-items:center;height:44px;
  font-size:13.3px;line-height:1;font-weight:500;text-transform:uppercase;color:var(--texto);
  transition:color var(--transicion);
}
.nav > a:hover,.nav__item:hover > a,.nav__item:focus-within > a{color:var(--bordo)}
.nav > a.activo,.nav__item.activo > a{color:var(--turquesa)}
.nav .boton--contorno{min-width:161px;height:44px;margin-left:6px;font-size:13.3px;font-weight:600}

.nav__item{position:relative;display:flex;align-items:center;height:44px}
.submenu{
  position:absolute;left:0;top:39px;min-width:238px;padding:12px;
  background:var(--blanco);border-radius:10px;box-shadow:var(--sombra-flotante);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:80;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.submenu--ancho{min-width:285px}
.submenu a{
  display:block;padding:11px 14px;border-radius:7px;
  font-size:12.5px;line-height:17px;font-weight:400;color:#555;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.submenu a:hover,.submenu a:focus{background:var(--turquesa);color:var(--blanco)}
.nav__item:hover > .submenu,.nav__item:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}

/* Hamburguesa y menú mobile (ocultos en desktop) */
.menu-toggle{display:none}
.menu-mobile{display:none}

/* ------------------------------------------------------------
   7. HERO INTERNO (páginas internas)
   Panel de color con texto + foto, y a la derecha formulario u otra foto.
   Se superpone a la banda turquesa que le sigue.
   ------------------------------------------------------------ */
.hero-interno{position:relative;z-index:2;padding-top:26px;margin-bottom:-70px}
.hero-interno .contenedor{display:grid;grid-template-columns:1fr 460px;gap:30px;align-items:stretch}
.hero-interno__panel{
  --hero-color:var(--bordo);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 46%;
  min-height:630px;border-radius:var(--radio-imagen);overflow:hidden;
  background:var(--hero-color);color:var(--blanco);
}
.hero-interno__copy{padding:96px 40px 60px 48px;align-self:center}
.hero-interno__copy .etiqueta{margin-bottom:26px}
.hero-interno__copy h1{color:var(--blanco);font-size:46px;line-height:52px;letter-spacing:-.4px}
.hero-interno__copy p{margin-top:18px;font-size:20px;line-height:28px}
.hero-interno__copy .boton{margin-top:36px}
.hero-interno__foto{position:relative}
.hero-interno__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-interno__lateral{border-radius:var(--radio-imagen);overflow:hidden;min-height:630px}
.hero-interno__lateral > img{width:100%;height:100%;object-fit:cover}

/* Banda turquesa de datos destacados (va justo después del hero interno) */
.banda{background:var(--turquesa-oscuro);color:var(--blanco);padding:130px 0 60px}
.banda__items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.banda__item{padding:6px 0 6px 18px;border-left:1px solid rgba(255,255,255,.45);font-size:16px;line-height:22px}

/* ------------------------------------------------------------
   8. TARJETAS
   ------------------------------------------------------------ */
.tarjeta{
  background:var(--blanco);border:1px solid #d4d4d4;border-radius:var(--radio-tarjeta);overflow:hidden;
  transition:box-shadow .28s ease,border-color .28s ease,transform .28s var(--motion-ease);
}
@media (hover:hover) and (pointer:fine){
  .tarjeta:hover{transform:translateY(-4px);border-color:#c9c9c9;box-shadow:var(--sombra-tarjeta)}
}

/* Tarjeta de nivel (home + niveles) */
.tarjeta-nivel__foto{position:relative;height:270px;overflow:hidden}
.tarjeta-nivel__foto img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--motion-ease)}
.tarjeta:hover .tarjeta-nivel__foto img{transform:scale(1.032)}
.tarjeta-nivel__foto .etiqueta{position:absolute;left:18px;top:15px}
.tarjeta-nivel__cuerpo{padding:32px 44px 36px;text-align:center}
.tarjeta-nivel__cuerpo h3{text-align:left}
.tarjeta-nivel__cuerpo p{margin:15px 0 0;text-align:left;font-size:16px;line-height:24px;color:#555;min-height:98px}
.tarjeta-nivel__cuerpo .boton{margin-top:26px}
.tarjeta-nivel__cuerpo .link{display:inline-block;margin-top:15px}

/* Tarjeta chica con foto cuadrada (salas, áreas, actividades) */
.tarjeta-item{padding:38px 36px 34px;border-radius:16px}
.tarjeta-item__foto{width:108px;height:108px;border-radius:8px;object-fit:cover;margin-bottom:26px}
.tarjeta-item h3{font-size:26px;line-height:32px;color:var(--bordo)}
.tarjeta-item__sub{margin-top:4px;font-size:15px;line-height:21px;font-weight:500;color:var(--turquesa)}
.tarjeta-item p{margin-top:14px;font-size:15px;line-height:23px;color:var(--texto-suave)}

/* Tarjeta con ícono (carisma, valores) */
.tarjeta-icono{padding:34px 40px 36px;border-radius:16px}
.tarjeta-icono__icono{width:52px;height:52px;color:var(--bordo);margin-bottom:22px}
.tarjeta-icono__icono svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
.tarjeta-icono h3{font-size:24px;line-height:30px;color:var(--bordo)}
.tarjeta-icono p{margin-top:10px;font-size:15px;line-height:23px;color:var(--texto-suave)}

/* Tarjeta de novedad (sin borde, separadas por línea) */
.tarjeta-novedad{padding:0 24px}
.tarjeta-novedad + .tarjeta-novedad{border-left:1px solid var(--linea)}
.tarjeta-novedad img{width:100%;height:194px;object-fit:cover;border-radius:14px;transition:transform .7s var(--motion-ease)}
.tarjeta-novedad:hover img{transform:scale(1.018)}
.tarjeta-novedad h3{margin-top:20px;font-size:16px;line-height:21px;color:#0d1b38}
.tarjeta-novedad .link--flecha{display:inline-block;margin-top:16px}

/* ------------------------------------------------------------
   9. BLOQUES DE CONTENIDO
   ------------------------------------------------------------ */
/* Cita en caja de color + título + foto (patrón "Un comienzo con raíces...") */
.bloque-intro{display:grid;grid-template-columns:320px minmax(0,1fr) 250px;gap:48px;align-items:stretch}
.bloque-intro > div{align-self:center}
.bloque-intro > .caja-cita{align-self:stretch;display:flex;align-items:center}
.caja-cita{
  padding:52px 30px;border-radius:var(--radio-imagen);background:var(--bordo);color:var(--blanco);
  font-size:22px;line-height:32px;
}
.caja-cita--turquesa{background:var(--turquesa-oscuro)}
.bloque-intro__foto{width:100%;height:100%;min-height:380px;object-fit:cover;border-radius:var(--radio-imagen)}

/* Lista de ítems con título bordó y línea (patrón "Lo que hace diferente") */
.lista-items{margin-top:34px}
.lista-items > li{padding:20px 0 22px;border-bottom:1px solid var(--linea-suave);position:relative}
.lista-items > li:last-child{border-bottom:0}
.lista-items h3{font-size:22px;line-height:28px;color:var(--bordo)}
.lista-items p{margin-top:6px;font-size:15px;line-height:23px;color:var(--texto-suave)}
.lista-items > li::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--turquesa);
  transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--motion-ease);
}
.lista-items > li:hover::after{transform:scaleX(1)}

/* Panel blanco sobre foto a sangre */
.sobre-foto{position:relative;min-height:760px;padding:90px 0;display:flex;align-items:center;overflow:hidden}
.sobre-foto__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sobre-foto .contenedor{position:relative;display:flex;justify-content:flex-end;padding-right:clamp(40px,7vw,110px)}
.panel{width:min(100%,560px);padding:48px 52px 40px;background:var(--blanco);border-radius:var(--radio-panel);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.panel h2{font-size:38px;line-height:46px}
.panel .lista-items{margin-top:28px}
.panel .lista-items > li{padding:14px 0 16px}

/* Preguntas frecuentes (acordeón) */
.faq{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:30px;align-items:start}
.faq__lista{display:grid;gap:14px}
.faq__item{border:1px solid var(--linea-suave);border-radius:8px;background:var(--blanco);overflow:hidden}
.faq__pregunta{
  display:flex;align-items:center;gap:8px;width:100%;padding:18px 24px;border:0;background:transparent;text-align:left;
  font-size:18px;line-height:24px;color:#555;
}
.faq__pregunta::before{content:counter(faq) ".";counter-increment:faq;font-weight:700;color:var(--turquesa)}
.faq__pregunta::after{content:"+";margin-left:auto;font-size:22px;font-weight:300;color:var(--texto-mudo);transition:transform var(--transicion)}
.faq__item.abierto .faq__pregunta::after{transform:rotate(45deg)}
.faq__lista{counter-reset:faq}
.faq__respuesta{max-height:0;overflow:hidden;transition:max-height .32s var(--motion-ease)}
.faq__respuesta > div{padding:0 24px 22px 50px;font-size:15px;line-height:23px;color:var(--texto-suave)}
.faq__foto{position:relative;border-radius:var(--radio-imagen);overflow:hidden;aspect-ratio:1/1.15}
.faq__foto img{width:100%;height:100%;object-fit:cover}
.caja-titulo{
  position:absolute;left:0;bottom:0;width:200px;padding:32px 24px;
  background:var(--turquesa-oscuro);color:var(--blanco);border-radius:0 8px 0 var(--radio-imagen);
  font-size:26px;line-height:30px;
}

/* CTA de admisiones (cierre de todas las páginas) */
.cta-admisiones{position:relative;overflow:hidden;background:var(--turquesa-oscuro);color:var(--blanco);padding:110px 0 100px;text-align:center}
.cta-admisiones::before{
  content:"";position:absolute;left:50%;bottom:-560px;width:1850px;height:780px;transform:translateX(-50%);
  border-radius:50%;background:rgba(255,255,255,.085);animation:ctaRespira 14s ease-in-out infinite alternate;
}
@keyframes ctaRespira{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.025)}}
.cta-admisiones .contenedor{position:relative;z-index:1}
.cta-admisiones h2{color:var(--blanco);font-weight:500;letter-spacing:-.45px}
.cta-admisiones p{margin:21px auto 0;max-width:640px;font-size:18px;line-height:26px}
.cta-admisiones .boton{margin-top:36px}

/* ------------------------------------------------------------
   10. FORMULARIOS
   ------------------------------------------------------------ */
.formulario{background:var(--gris-form);border-radius:var(--radio-panel);padding:40px 40px 44px}
.formulario h2{font-size:32px;line-height:38px}
.formulario__sub{margin-top:4px;font-size:15px;color:var(--texto-suave)}
.formulario form{margin-top:26px;display:grid;gap:18px}
.campo{display:grid;gap:8px}
.campo--doble{grid-template-columns:1fr 1fr;gap:12px}
.campo label{font-size:13px;line-height:16px;font-weight:600;color:#333}
.campo input,.campo select,.campo textarea{
  width:100%;height:42px;padding:0 14px;border:1px solid transparent;border-radius:var(--radio-input);
  background:var(--blanco);font:inherit;font-size:15px;color:var(--tinta);
  transition:border-color var(--transicion),box-shadow var(--transicion);
}
.campo textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(34,141,153,.15)}
.campo input::placeholder{color:var(--texto-mudo)}
.formulario .boton{justify-self:center;margin-top:10px;min-width:250px}

/* ------------------------------------------------------------
   11. FOOTER (versión clara de las maquetas internas)
   ------------------------------------------------------------ */
.pie{background:var(--gris-claro);color:var(--texto-suave)}
.pie .contenedor{display:grid;grid-template-columns:330px 1fr 1fr;gap:80px;padding:80px 0 72px;align-items:start}
.pie__marca img{width:239px;height:auto}
.pie__marca p{margin-top:28px;font-size:14px;line-height:22px}
.pie h3{
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #d0d0d0;
  font-size:13px;line-height:17px;font-weight:700;text-transform:uppercase;color:var(--bordo);
}
.pie__menu{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.pie__menu a{font-size:13px;line-height:16px;font-weight:500;text-transform:uppercase;color:var(--bordo);transition:color var(--transicion)}
.pie__menu a:hover{color:var(--turquesa)}
.pie__contacto{display:flex;justify-content:space-between;gap:24px}
.pie__contacto p{font-size:14px;line-height:20px;color:var(--bordo)}
.pie__contacto p + p{margin-top:16px}
.redes{display:flex;gap:10px}
.redes a{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:#c9cbcd;color:var(--blanco);transition:background var(--transicion),transform var(--transicion);
}
.redes a:hover{background:var(--turquesa);transform:translateY(-2px)}
.redes svg{width:18px;height:18px;fill:currentColor}
.pie__legal{background:var(--bordo);color:var(--blanco)}
.pie__legal .contenedor{display:flex;align-items:center;height:53px;font-size:9px;line-height:1;letter-spacing:.04em;text-transform:uppercase}

/* Botón flotante de WhatsApp */
.whatsapp-flotante{
  position:fixed;right:22px;bottom:22px;z-index:900;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:var(--blanco);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform var(--transicion);
}
.whatsapp-flotante:hover{transform:translateY(-3px)}
.whatsapp-flotante svg{width:30px;height:30px;fill:currentColor}

/* ------------------------------------------------------------
   12. MOVIMIENTO (entradas al hacer scroll)
   ------------------------------------------------------------ */
.reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .72s var(--motion-ease),transform .72s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------------
   13. RESPONSIVE
   Breakpoints: mobile ≤700 (igual que la home), tablet 701–1100.
   ------------------------------------------------------------ */
@media (max-width:1100px){
  h1{font-size:46px;line-height:52px}
  h2{font-size:36px;line-height:42px}
  .seccion{padding:80px 0}
  .grilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grilla--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{gap:18px}
  .nav > a,.nav__item > a{font-size:12px}
  .marca img{width:230px}
  .hero-interno .contenedor{grid-template-columns:1fr}
  .hero-interno__panel,.hero-interno__lateral{min-height:520px}
  .banda__items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bloque-intro{grid-template-columns:1fr 1fr}
  .bloque-intro__foto{display:none}
  .sobre-foto .contenedor{padding-right:40px}
  .faq{grid-template-columns:1fr}
  .faq__foto{aspect-ratio:16/9}
  .pie .contenedor{grid-template-columns:1fr 1fr;gap:40px}
  .tarjeta-novedad + .tarjeta-novedad{border-left:0}
}

/* Header: de 1000px para abajo pasa a hamburguesa (el menú no entra en una línea). */
@media (max-width:1000px){
  .barra-superior{display:none}
  .marca img{width:245px}
  .marca__desktop{display:none}
  .marca__mobile{display:block}
  .nav{display:none}
  .menu-toggle{display:block;width:28px;height:35px;padding:0;border:0;background:transparent}
  .menu-toggle span{display:block;width:27px;height:1px;background:#7d838c;margin:0 0 7px}
  .menu-mobile{
    position:fixed;left:0;right:0;top:var(--alto-header);z-index:1001;max-height:calc(100dvh - 100px);overflow-y:auto;
    padding:18px 28px 28px;background:var(--blanco);box-shadow:0 14px 30px rgba(0,0,0,.12);
  }
  .menu-mobile.abierto{display:block}
  .menu-mobile > a{display:block;padding:8px 0;font-size:13px;font-weight:500;text-transform:uppercase;color:#555}
  .menu-mobile > a.activo{color:var(--turquesa)}
  .menu-mobile__grupo{border-bottom:1px solid #efefef}
  .menu-mobile__toggle{
    display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;position:relative;
    font-size:13px;font-weight:500;line-height:32px;text-transform:uppercase;color:#555;
  }
  .menu-mobile__toggle::after{content:"+";position:absolute;right:2px;top:0;font-size:17px;font-weight:400;color:#888}
  .menu-mobile__toggle[aria-expanded="true"]::after{content:"−"}
  .menu-mobile__sub{max-height:0;overflow:hidden;transition:max-height .28s ease;padding-left:12px}
  .menu-mobile__grupo.abierto .menu-mobile__sub{max-height:320px;padding-bottom:8px}
  .menu-mobile__sub a{display:block;padding:6px 0;font-size:12px;color:#777}
  .menu-mobile .boton--contorno{margin:16px 0 0;width:100%}

}

@media (max-width:700px){
  :root{--gutter:20px}
  .cabecera .contenedor{height:100px}
  .menu-mobile{top:100px}
  body{font-size:15px}
  h1{font-size:35px;line-height:41.5px;letter-spacing:-.45px}
  h2{font-size:29px;line-height:36px;letter-spacing:-.35px}
  h3{font-size:25px;line-height:31px}
  .bajada{font-size:16.7px;line-height:21px}
  .texto-grande{font-size:18px;line-height:24px}
  .seccion{padding:70px 0}
  .seccion--chica{padding:50px 0}
  .seccion--grande{padding:85px 0}
  .grilla{gap:20px}
  .grilla--2,.grilla--3,.grilla--4{grid-template-columns:1fr}
  .boton{min-width:0;width:100%;max-width:370px;height:54px;border-radius:10px;font-size:13.2px}
  .boton--grande{height:54px}

  /* Hero interno */
  .hero-interno{padding-top:16px;margin-bottom:-40px}
  .hero-interno__panel{grid-template-columns:1fr;min-height:0;border-radius:12px}
  .hero-interno__copy{padding:40px 26px 36px}
  .hero-interno__copy h1{font-size:32px;line-height:38px}
  .hero-interno__copy p{font-size:17px;line-height:24px}
  .hero-interno__foto{height:230px;order:-1}
  .hero-interno__lateral{min-height:0}
  .banda{padding:90px 0 44px}
  .banda__items{grid-template-columns:1fr;gap:16px}

  /* Tarjetas y bloques */
  .tarjeta-nivel__foto{height:252px}
  .tarjeta-nivel__cuerpo{padding:33px 30px 34px}
  .tarjeta-item,.tarjeta-icono{padding:28px 24px}
  .tarjeta-novedad{padding:0 0 28px;border-bottom:1px solid var(--linea)}
  .tarjeta-novedad:last-child{border-bottom:0}
  .tarjeta-novedad img{height:auto;aspect-ratio:1.52/1}
  .bloque-intro{grid-template-columns:1fr;gap:24px}
  .caja-cita{padding:34px 26px;font-size:18px;line-height:27px}
  .sobre-foto{min-height:0;padding:60px 0}
  .sobre-foto .contenedor{padding-right:0}
  .panel{padding:32px 26px}
  .panel h2{font-size:28px;line-height:34px}
  .faq__pregunta{font-size:16px;line-height:22px;padding:16px 18px}
  .faq__respuesta > div{padding:0 18px 18px 40px}
  .caja-titulo{width:160px;padding:22px 18px;font-size:20px;line-height:24px}
  .cta-admisiones{padding:72px 0 68px}
  .cta-admisiones::before{width:960px;height:410px;bottom:-290px;background:rgba(255,255,255,.1)}
  .cta-admisiones p{font-size:16px;line-height:23px}
  .formulario{padding:28px 22px 32px}
  .campo--doble{grid-template-columns:1fr}

  /* Footer */
  .pie .contenedor{grid-template-columns:1fr;gap:40px;padding:64px 0 52px}
  .pie__contacto{flex-direction:column}
  .pie__legal .contenedor{height:48px;font-size:8px}
  .whatsapp-flotante{right:16px;bottom:16px;width:52px;height:52px}
}

/* ============================================================
   14. PANTALLA ANCHA, GALERÍAS Y VENTANAS — agregado 07/09/2026
   Criterio "Apple": el texto se queda en el contenedor de 1320;
   lo visual (fotos, galerías, hero) se sale y llena la pantalla.
   ============================================================ */

/* Contenedor amplio para bloques visuales (hero, galerías, ventanas) */
:root{--ancho-amplio:1520px}
.contenedor--amplio{width:min(100% - var(--gutter) * 2, var(--ancho-amplio));margin-inline:auto}

/* A sangre: ocupa todo el ancho de pantalla aunque esté dentro de un contenedor */
.sangre{width:100vw;margin-left:calc(50% - 50vw)}
.sangre-derecha{margin-right:calc(50% - 50vw + var(--gutter) * -1)}

/* Hero interno amplio: usa el contenedor de 1520 y crece en altura */
.hero-interno--amplio .contenedor{width:min(100% - var(--gutter) * 2, var(--ancho-amplio))}
.hero-interno--amplio .hero-interno__panel{min-height:680px}
.hero-interno--amplio .hero-interno__copy h1{font-size:clamp(40px,3.4vw,54px);line-height:1.12}

/* Pantallas anchas: más aire y títulos que escalan */
@media (min-width:1441px){
  h1{font-size:clamp(58px,4.2vw,76px);line-height:1.08}
  h2{font-size:clamp(42px,3vw,54px);line-height:1.15}
  .bajada{font-size:22px;line-height:32px}
  .seccion{padding:140px 0}
  .seccion--chica{padding:90px 0}
  .seccion--grande{padding:180px 0}
  .cta-admisiones{padding:140px 0 130px}
  .banda{padding:150px 0 76px}
}

/* --- Galería 1: mosaico (patrón "Así se vive", 8 fotos) --- */
.galeria-mosaico{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,1fr);gap:18px;
  aspect-ratio:1320/548;
}
.galeria-mosaico > *{position:relative;overflow:hidden;border-radius:var(--radio-imagen);background:#ddd}
.galeria-mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--motion-ease)}
.galeria-mosaico > *:hover img{transform:scale(1.045)}
.galeria-mosaico > :nth-child(1){grid-column:1/5;grid-row:1/3}
.galeria-mosaico > :nth-child(2){grid-column:5/10;grid-row:1/2}
.galeria-mosaico > :nth-child(3){grid-column:10/13;grid-row:1/2}
.galeria-mosaico > :nth-child(4){grid-column:5/11;grid-row:2/3}
.galeria-mosaico > :nth-child(5){grid-column:11/13;grid-row:2/3}
.galeria-mosaico > :nth-child(6){grid-column:1/7;grid-row:3/4}
.galeria-mosaico > :nth-child(7){grid-column:7/9;grid-row:3/4}
.galeria-mosaico > :nth-child(8){grid-column:9/13;grid-row:3/4}

/* --- Galería 2: carrusel horizontal con deslizamiento ---
   Por defecto ocupa el mismo ancho que su contenedor.
   Con --sangre va de borde a borde de la pantalla; la primera foto
   queda alineada con el contenedor amplio (1520). */
.galeria-carrusel{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:6px;
}
.galeria-carrusel::-webkit-scrollbar{display:none}
.galeria-carrusel > *{flex:0 0 clamp(280px,32vw,460px);aspect-ratio:4/3;scroll-snap-align:start;overflow:hidden;border-radius:var(--radio-imagen);background:#ddd;position:relative}
.galeria-carrusel img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--motion-ease)}
.galeria-carrusel > *:hover img{transform:scale(1.045)}
.galeria-carrusel figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;color:var(--blanco);font-size:15px;line-height:20px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.galeria-carrusel--vertical > *{aspect-ratio:3/4;flex-basis:clamp(240px,24vw,360px)}
.galeria-carrusel--sangre{
  --borde:max(var(--gutter), calc(50vw - var(--ancho-amplio) / 2));
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:var(--borde);padding-right:var(--borde);
  scroll-padding-left:var(--borde);
}
.galeria-carrusel--sangre > :last-child{margin-right:0}

/* --- Ventana: video o foto especial con marca y rectángulo de dato ---
   REGLAS (Lalo, 07/09/2026):
   1. Nunca dos ventanas una al lado de la otra (ni dos fotos ni dos videos).
   2. Siempre con margen alrededor: va dentro de un contenedor, nunca a sangre.
   3. Si ocupa la mitad del ancho, lleva texto al lado (.ventana-con-texto). */
.ventana{position:relative;border-radius:var(--radio-panel);aspect-ratio:1320/539}
.ventana--alta{aspect-ratio:16/9}
.ventana--cuadrada{aspect-ratio:1/1}
.ventana__media{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.ventana__media img,.ventana__media video,.ventana__media iframe{width:100%;height:100%;object-fit:cover;display:block;border:0;transition:transform 1.05s var(--motion-ease)}
@media (hover:hover) and (pointer:fine){.ventana:hover .ventana__media img{transform:scale(1.015)}}
.ventana__play{
  position:absolute;left:50%;top:50%;width:79px;height:79px;margin:-39.5px 0 0 -39.5px;border-radius:50%;
  background:var(--blanco);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:transform .22s var(--motion-ease),box-shadow .22s ease;
}
.ventana__play::before{content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:22px solid var(--bordo);margin-left:6px}
.ventana__play:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 7px 19px rgba(0,0,0,.15)}
.ventana__marca{
  position:absolute;right:25px;top:25px;width:60px;height:60px;border-radius:9px;
  background:var(--turquesa);color:var(--blanco);display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;font-family:Arial,sans-serif;transition:transform .22s ease,background .22s ease;
}
.ventana__marca svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8}
.ventana__marca:hover{transform:translateY(-2px);background:var(--bordo)}
.ventana__marca--bordo{background:var(--bordo)}.ventana__marca--bordo:hover{background:var(--turquesa)}
.ventana__dato{
  position:absolute;left:44px;bottom:-39px;width:305px;min-height:86px;padding:18px 28px 14px;
  background:var(--blanco);border:1px solid var(--turquesa);border-radius:9px;color:var(--turquesa);
  font-size:15.5px;line-height:20px;
}
.ventana__dato em{display:block;font-style:italic}
.ventana__dato small{display:block;margin-top:4px;font-size:12px;line-height:16px;color:#777;font-style:normal}
.ventana__dato--lleno{background:var(--turquesa);color:var(--blanco);border-color:var(--turquesa)}
.ventana__dato--lleno small{color:rgba(255,255,255,.75)}
.ventana__dato--bordo{background:var(--bordo);color:var(--blanco);border-color:var(--bordo)}
.ventana__dato--bordo small{color:rgba(255,255,255,.75)}
.ventana__dato--derecha{left:auto;right:44px}
.ventana + :not(.ventana){margin-top:60px}   /* deja lugar al rectángulo que cuelga */

/* Ventana a media página + texto al lado */
.ventana-con-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.ventana-con-texto .ventana{aspect-ratio:4/3}
.ventana-con-texto--invertida .ventana{order:2}
.ventana-con-texto__texto h2{margin-bottom:18px}
.ventana-con-texto__texto .boton{margin-top:30px}
.ventana-con-texto__texto .lista-items{margin-top:24px}

@media (max-width:1100px){
  .galeria-mosaico{aspect-ratio:auto;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px}
  .galeria-mosaico > :nth-child(1){grid-column:1/4;grid-row:1/3}
  .galeria-mosaico > :nth-child(2){grid-column:4/7;grid-row:1/2}
  .galeria-mosaico > :nth-child(3){grid-column:4/7;grid-row:2/3}
  .galeria-mosaico > :nth-child(4){grid-column:1/5;grid-row:3/4}
  .galeria-mosaico > :nth-child(5){grid-column:5/7;grid-row:3/4}
  .galeria-mosaico > :nth-child(6){grid-column:1/3;grid-row:4/5}
  .galeria-mosaico > :nth-child(7){grid-column:3/5;grid-row:4/5}
  .galeria-mosaico > :nth-child(8){grid-column:5/7;grid-row:4/5}
  .hero-interno--amplio .hero-interno__panel{min-height:520px}
}
@media (max-width:700px){
  .galeria-mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px}
  .galeria-mosaico > *{border-radius:12px;aspect-ratio:1.18/1}
  .galeria-mosaico > :nth-child(n){grid-column:auto;grid-row:auto}
  .galeria-mosaico > :nth-child(1),.galeria-mosaico > :nth-child(4),.galeria-mosaico > :nth-child(8){grid-column:1/3;aspect-ratio:1.7/1}
  .galeria-mosaico > :nth-child(7){display:none}
  .galeria-carrusel{gap:10px}
  .galeria-carrusel--sangre{--borde:var(--gutter)}
  .galeria-carrusel > *{flex-basis:78vw}
  .ventana{aspect-ratio:16/10;border-radius:12px}
  .ventana__play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .ventana__play::before{border-top-width:11px;border-bottom-width:11px;border-left-width:17px}
  .ventana__marca{right:14px;top:14px;width:40px;height:40px;border-radius:7px;font-size:23px}
  .ventana__marca svg{width:20px;height:20px}
  .ventana__dato{left:18px;bottom:-56px;width:230px;min-height:76px;padding:14px 18px;font-size:13.5px;line-height:18px}
  .ventana__dato small{margin-top:3px;font-size:10.5px;line-height:14px}
  .ventana + :not(.ventana){margin-top:76px}
  .ventana-con-texto{grid-template-columns:1fr;gap:20px}
  .ventana-con-texto--invertida .ventana{order:0}
  .ventana-con-texto .ventana{margin-bottom:56px}
}

/* ============================================================
   15. COMPONENTES DE PÁGINAS INTERNAS — agregado 11/09/2026
   ============================================================ */

/* Migas de pan */
.migas{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--texto-suave)}
.migas a{color:var(--turquesa);font-weight:500}
.migas a:hover{color:var(--bordo)}
.migas li+li::before{content:"›";margin-right:6px;color:var(--texto-mudo)}

/* Hero de página institucional: título a la izquierda, foto a la derecha */
.hero-pagina{background:var(--gris-claro);padding:40px 0 0}
.hero-pagina .contenedor--amplio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;align-items:center}
.hero-pagina__copy{padding:40px 0 70px}
.hero-pagina__copy .etiqueta{margin-bottom:22px}
.hero-pagina__copy h1{font-size:52px;line-height:58px}
.hero-pagina__copy .bajada{margin-top:20px;max-width:560px}
.hero-pagina__copy .fila-botones{margin-top:34px}
.hero-pagina__foto{border-radius:var(--radio-imagen) var(--radio-imagen) 0 0;overflow:hidden;aspect-ratio:4/3;align-self:end}
.hero-pagina__foto img{width:100%;height:100%;object-fit:cover}
.hero-pagina--blanco{background:var(--blanco)}
.fila-botones{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}

/* Lista con tilde */
.lista-check{display:grid;gap:12px}
.lista-check li{position:relative;padding-left:32px;font-size:16px;line-height:24px}
.lista-check li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--turquesa);}
.lista-check li::after{content:"";position:absolute;left:7px;top:8px;width:6px;height:10px;border:solid var(--blanco);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lista-check--bordo li::before{background:var(--bordo)}
.lista-check--2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}

/* Pasos numerados */
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:paso}
.paso{position:relative;padding:34px 28px 30px;background:var(--blanco);border:1px solid #d4d4d4;border-radius:16px}
.paso::before{counter-increment:paso;content:counter(paso);display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:18px;border-radius:50%;background:var(--bordo);color:var(--blanco);font-size:18px;font-weight:600}
.paso h3{font-size:22px;line-height:28px;color:var(--bordo)}
.paso p{margin-top:8px;font-size:15px;line-height:23px;color:var(--texto-suave)}

/* Línea de tiempo */
.linea-tiempo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.linea-tiempo::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--linea)}
.hito{position:relative;padding-top:34px}
.hito::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--turquesa);border:3px solid var(--blanco);box-shadow:0 0 0 2px var(--turquesa)}
.hito strong{display:block;font-size:30px;line-height:34px;font-weight:400;color:var(--bordo)}
.hito p{margin-top:8px;font-size:15px;line-height:22px;color:var(--texto-suave)}

/* Datos en cifras */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cifra{padding:28px 26px;border-radius:16px;background:var(--gris-claro)}
.cifra strong{display:block;font-size:40px;line-height:44px;font-weight:400;color:var(--bordo)}
.cifra span{display:block;margin-top:6px;font-size:15px;line-height:21px;color:var(--texto-suave)}
.seccion--gris .cifra{background:var(--blanco)}

/* Equipo */
.equipo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.persona{text-align:center}
.persona__foto{width:150px;height:150px;margin:0 auto 16px;border-radius:50%;object-fit:cover;background:var(--gris-claro)}
.persona h3{font-size:19px;line-height:24px}
.persona p{margin-top:4px;font-size:14px;line-height:20px;color:var(--turquesa);font-weight:500}

/* Tarjeta de proyecto o actividad con foto ancha */
.tarjeta-proyecto{border-radius:16px}
.tarjeta-proyecto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tarjeta-proyecto__cuerpo{padding:24px 26px 28px}
.tarjeta-proyecto h3{font-size:22px;line-height:28px;color:var(--bordo)}
.tarjeta-proyecto p{margin-top:8px;font-size:15px;line-height:23px;color:var(--texto-suave)}
.tarjeta-proyecto .link{display:inline-block;margin-top:14px}

/* Aviso destacado temporal (módulo que entra y sale) */
.aviso-destacado{display:flex;align-items:center;gap:28px;padding:26px 34px;border-radius:16px;background:var(--bordo);color:var(--blanco)}
.aviso-destacado__texto{flex:1}
.aviso-destacado h3{color:var(--blanco);font-size:22px;line-height:28px}
.aviso-destacado p{margin-top:4px;font-size:15px;line-height:22px;opacity:.9}
.aviso-destacado .boton{min-width:200px}
.aviso-destacado--turquesa{background:var(--turquesa-oscuro)}

/* Mapa */
.mapa{border-radius:var(--radio-imagen);overflow:hidden;aspect-ratio:16/9;background:var(--gris-claro)}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.datos-contacto{display:grid;gap:22px}
.datos-contacto h3{font-size:20px;line-height:26px;color:var(--bordo)}
.datos-contacto p{margin-top:4px;font-size:16px;line-height:24px}
.datos-contacto a{color:var(--turquesa);font-weight:500}

/* Novedades: listado y nota */
.novedades-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px}
.novedad-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;transition:transform .7s var(--motion-ease)}
.novedad-card:hover img{transform:scale(1.02)}
.novedad-card__meta{display:flex;gap:10px;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--turquesa)}
.novedad-card__meta span+span::before{content:"·";margin-right:10px;color:var(--texto-mudo)}
.novedad-card h3{margin-top:8px;font-size:20px;line-height:26px}
.novedad-card p{margin-top:8px;font-size:15px;line-height:22px;color:var(--texto-suave)}
.filtros{display:flex;flex-wrap:wrap;gap:10px}
.filtros a{padding:8px 16px;border-radius:99px;border:1px solid var(--linea);font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--texto)}
.filtros a.activo,.filtros a:hover{background:var(--turquesa);border-color:var(--turquesa);color:var(--blanco)}
.articulo{width:min(100% - var(--gutter) * 2, 820px);margin-inline:auto}
.articulo h1{font-size:44px;line-height:50px}
.articulo__meta{margin-top:16px;font-size:14px;color:var(--texto-suave)}
.articulo__portada{margin:36px 0;border-radius:var(--radio-imagen);overflow:hidden;aspect-ratio:16/9}
.articulo__portada img{width:100%;height:100%;object-fit:cover}
.articulo__cuerpo{font-size:18px;line-height:30px}
.articulo__cuerpo p+p{margin-top:20px}
.articulo__cuerpo h2{font-size:28px;line-height:34px;margin:40px 0 12px}
.articulo__cuerpo blockquote{margin:28px 0;padding:22px 28px;border-left:3px solid var(--turquesa);background:var(--gris-claro);font-size:20px;line-height:30px;color:var(--bordo)}
.agenda{display:grid;gap:14px}
.agenda__item{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:20px 24px;border:1px solid var(--linea-suave);border-radius:12px;background:var(--blanco)}
.agenda__fecha{text-align:center;color:var(--bordo)}
.agenda__fecha strong{display:block;font-size:34px;line-height:36px;font-weight:400}
.agenda__fecha span{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.agenda__item h3{font-size:19px;line-height:24px}
.agenda__item p{margin-top:4px;font-size:15px;line-height:22px;color:var(--texto-suave)}

/* Bloque de texto institucional (páginas largas) */
.prosa{max-width:760px;font-size:17px;line-height:28px}
.prosa p+p{margin-top:18px}
.prosa h2{margin-bottom:14px}
.prosa h3{font-size:24px;line-height:30px;margin:32px 0 8px;color:var(--bordo)}
.dos-columnas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start}
.cita-rector{display:grid;grid-template-columns:320px minmax(0,1fr);gap:60px;align-items:center}
.cita-rector__foto{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio-imagen)}
.cita-rector blockquote{font-size:26px;line-height:38px;color:var(--tinta)}
.cita-rector blockquote p+p{margin-top:16px}
.cita-rector cite{display:block;margin-top:24px;font-style:normal;font-size:15px;color:var(--texto-suave)}
.cita-rector cite strong{display:block;color:var(--bordo);font-weight:600;font-size:17px}

/* Landing de campaña: cabecera mínima */
.cabecera--landing .contenedor{justify-content:space-between}
.cabecera--landing .nav{display:flex}
.cabecera--landing .menu-toggle{display:none!important}

/* Formulario: mensaje de estado */
.formulario__estado{display:none;padding:16px 18px;border-radius:8px;font-size:15px;line-height:22px}
.formulario__estado.ok{display:block;background:#d8f1e6;color:#136b47}
.formulario__estado.error{display:block;background:#fde0e0;color:#8a1f1f}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23565656' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.campo--check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:18px;color:var(--texto-suave)}
.campo--check input{width:16px;height:16px;margin-top:1px}
.campo--oculto{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.formulario--blanco{background:var(--blanco);border:1px solid #d4d4d4}

/* Ancla con desplazamiento bajo el header */
[id]{scroll-margin-top:40px}

@media (max-width:1100px){
  .hero-pagina .contenedor--amplio{grid-template-columns:1fr;gap:30px}
  .hero-pagina__copy{padding:20px 0 30px}
  .hero-pagina__copy h1{font-size:40px;line-height:46px}
  .hero-pagina__foto{border-radius:var(--radio-imagen);aspect-ratio:16/9;margin-bottom:0}
  .hero-pagina{padding-bottom:40px}
  .pasos,.cifras,.equipo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .linea-tiempo{grid-template-columns:repeat(3,minmax(0,1fr))}
  .novedades-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dos-columnas{grid-template-columns:1fr;gap:36px}
  .cita-rector{grid-template-columns:1fr;gap:28px}
  .cita-rector__foto{max-width:320px}
  .lista-check--2col{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hero-pagina__copy h1{font-size:32px;line-height:38px}
  .pasos,.cifras,.equipo,.linea-tiempo,.novedades-lista{grid-template-columns:1fr}
  .linea-tiempo::before{display:none}
  .aviso-destacado{flex-direction:column;align-items:flex-start;padding:24px}
  .aviso-destacado .boton{width:100%}
  .cita-rector blockquote{font-size:20px;line-height:30px}
  .articulo h1{font-size:32px;line-height:38px}
  .articulo__cuerpo{font-size:16px;line-height:26px}
  .agenda__item{grid-template-columns:70px 1fr;gap:14px;padding:16px}
  .cabecera--landing .nav{gap:12px}
  .cabecera--landing .nav .boton{min-width:0;padding:0 16px;height:40px;font-size:12px}
}
.barra-superior__cta{font-weight:700;text-transform:uppercase;letter-spacing:.04em}

.campo--check a{color:var(--turquesa);font-weight:600}
.nav .boton--secundario{color:var(--blanco)}
.nav .boton--secundario:hover{color:var(--blanco)}
@media (max-width:1000px){
  .menu-mobile > a.boton--contorno{display:flex;align-items:center;justify-content:center;height:48px;padding:0;margin-top:18px;color:var(--bordo)}
}