/* ============================================================
   layout.css — cabecera, hero, cada sección y el pie
   ============================================================ */

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */

.topbar {
  background: var(--ink);
  color: #c8cad0;
  font-size: var(--step--1);
}

/* A todo el ancho, igual que la cabecera: así el horario y el teléfono
   quedan alineados con el logo y los botones de abajo. */
.topbar__inner {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 2.75rem;
  padding-block: 0.4rem;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

a.topbar__item:hover { color: var(--surface); }

.topbar__item svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  opacity: 0.75;
}

.topbar__phone { margin-left: auto; font-weight: 600; color: var(--surface); }

@media (max-width: 860px) {
  .topbar__item--hide { display: none; }
  .topbar__inner { justify-content: space-between; gap: 1rem; }
}

/* En pantallas estrechas el horario completo empuja al teléfono fuera
   de la barra: se abrevia y deja el número siempre visible. */
@media (max-width: 620px) {
  .topbar { font-size: 1rem; }
  .topbar__inner { gap: 0.75rem; }
  .topbar__item svg { display: none; }
  .topbar__hours-long { display: none; }
}

/* Más abajo de 430 px ni el horario abreviado y el teléfono caben en un
   renglón, y los dos van con white-space: nowrap, así que lo que sobra
   empuja la página entera de lado. Se cae el rango de días, que además
   está repetido en el pie. */
@media (max-width: 430px) {
  .topbar__dias { display: none; }
  .topbar__inner { gap: 0.6rem; }
}

@media (min-width: 621px) {
  .topbar__hours-short { display: none; }
}

/* ============================================================
   CABECERA
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  /* El fondo lo pintan las dos franjas internas: así las esquinas
     inferiores curvadas de la barra de menú dejan ver la página. */
  background: transparent;
}

/* La cabecera ocupa todo el ancho: sus franjas no se limitan al shell. */
.masthead__inner,
.masthead .navbar {
  max-width: none;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: clamp(44px, 5vw, 56px);
  height: auto;
  flex: none;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--rojo-ink);
}

.brand__tag {
  display: block;
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.3;
  color: var(--muted);
}

.masthead__actions { display: flex; align-items: center; gap: 0.7rem; }

@media (max-width: 1080px) {
  .masthead__actions .btn--plataforma { display: none; }
}

@media (max-width: 720px) {
  .masthead__actions .btn { display: none; }
}

/* --- Barra de menú a todo el ancho -------------------------- */

/* Va pegada al borde inferior de la cabecera: sin margen ni
   padding lateral propios, la curva solo aparece abajo. */
.navbar { padding-bottom: 0; padding-inline: 0; }

.navwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: 0.55rem var(--gutter);
  background: var(--surface);
  /* Una línea gris fina cierra la cabecera; antes era una sombra al
     hacer scroll, que competía con la curva de las esquinas. El borde
     superior hace de divisoria con la franja del logo y los botones. */
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-nav) var(--r-nav);
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.6vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item { position: relative; }

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

/* Todo el menú se enciende con el mismo rojo suave: el escritorio, el
   desplegable y la versión móvil. */
.menu__link:hover,
.menu__item.is-open > .menu__link { background: var(--rojo-tint-suave); color: var(--rojo-ink); }

.menu__link[aria-current="page"] { color: var(--rojo-ink); font-weight: 600; }

.caret {
  width: 1em;
  height: 1em;
  transition: transform 0.25s var(--ease);
}
.menu__item.is-open .caret { transform: rotate(180deg); }

/* Icono que acompaña a un enlace del menú, a la derecha del texto. */
.menu__icono { width: 1.15em; height: 1.15em; flex: none; }

.dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  min-width: 16rem;
  padding: 0.6rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s;
}

.menu__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: var(--step--1);
  color: var(--body);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.dropdown a:hover { background: var(--rojo-tint-suave); color: var(--rojo-ink); }

.dropdown hr { margin: 0.5rem 0.85rem; border: 0; border-top: 1px solid var(--line-soft); }

.dropdown__head {
  padding: 0.35rem 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Hamburguesa ------------------------------------------- */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 2px solid var(--line);
  border-radius: var(--r-full);
}

.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Con siete enlaces el menú necesita unos 1250 px: por debajo de eso se
   sale por la derecha, así que la hamburguesa entra antes. */
@media (max-width: 1280px) {
  .burger { display: flex; }
  .navbar { display: none; }
  /* Sin barra de menú, la línea de cierre la lleva la franja superior. */
  .masthead__inner { border-bottom: 1px solid var(--line); }
}

/* --- Menú móvil -------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  padding: 7rem var(--gutter) 2.5rem;
  overflow-y: auto;
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }

/* El relleno lateral y el margen negativo se compensan: el texto sigue
   alineado con el resto de la página, pero el fondo del hover tiene
   dónde respirar en vez de quedar pegado a las letras. */
.mobile-menu a:not(.btn),
.mobile-menu summary {
  display: block;
  padding: 0.9rem 0.75rem;
  margin-inline: -0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.mobile-menu a:not(.btn):hover,
.mobile-menu summary:hover {
  background: var(--rojo-tint-suave);
  color: var(--rojo-ink);
}

.mobile-menu summary { cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }

.mobile-menu summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--rojo);
}
.mobile-menu details[open] summary::after { content: "–"; }

/* 1,75rem menos los 0,75rem de margen negativo del enlace: la sangría
   efectiva sigue siendo 1rem, como antes de dar sitio al hover. */
.mobile-menu__sub { padding-left: 1.75rem; }
/* El :not(.btn) iguala la especificidad de la regla de arriba; sin él,
   los enlaces del submenú heredarían el tamaño y el negro de los
   principales. */
.mobile-menu__sub a:not(.btn) { font-size: var(--step-0); font-weight: 400; color: var(--muted); }

.mobile-menu__foot { display: grid; gap: 0.75rem; margin-top: 2rem; }

/* ============================================================
   HERO
   ============================================================ */

/* El hero es un carrusel de dos diapositivas. El fondo y las manchas de
   color pasaron a la primera, para que la segunda pueda tener el suyo. */
.hero {
  position: relative;
  overflow: hidden;
}

/* Carril horizontal: las diapositivas van una al lado de otra y el JS
   desplaza el carril. Al ir en el flujo, la altura la marca la más alta
   y no hay que medirla desde JS —importante de cara a WordPress—. */
.hero__track {
  display: flex;
  transition: transform 0.6s var(--ease);
}

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  /* El borde inferior no va a cero: los botones quedaban pegados al final. */
  padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(4.5rem, 7vw, 6.5rem);
}

/* Lavado de los tintes de marca en lugar de blanco liso. Los degradados
   van anclados a las esquinas, no sueltos en mitad del lienzo, y se
   apagan antes del borde inferior para que no quede un corte contra la
   sección blanca que sigue. */
.hero__slide--intro {
  background:
    radial-gradient(60% 50% at 0% 0%,    var(--mostaza-tint), transparent 68%),
    radial-gradient(55% 45% at 100% 0%,  var(--rojo-tint),    transparent 68%),
    radial-gradient(80% 32% at 50% 100%, var(--gris-suave),   transparent 76%),
    var(--surface);
}

/* Manchas de color detrás de la foto: sustituyen al recorte del boceto. */
.hero__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

/* Izquierda: el par principal, centrado en la foto. */
.hero__blob--1 {
  width: 42vw; height: 42vw;
  max-width: 520px; max-height: 520px;
  top: 4%; left: -6%;
  background: var(--mostaza);
}

.hero__blob--2 {
  width: 30vw; height: 30vw;
  max-width: 380px; max-height: 380px;
  bottom: 6%; left: 16%;
  background: var(--rojo);
  opacity: 0.28;
}

/* Derecha: las dos completan la paleta, pero van pegadas al borde y
   en su mayor parte fuera del lienzo. Así aportan un resplandor de
   color sin ensuciar el fondo del titular y el texto. */
.hero__blob--3 {
  width: 34vw; height: 34vw;
  max-width: 440px; max-height: 440px;
  top: -14%; right: -14%;
  background: var(--rojo);
  opacity: 0.3;
}

.hero__blob--4 {
  width: 24vw; height: 24vw;
  max-width: 320px; max-height: 320px;
  bottom: -6%; right: -8%;
  background: var(--morado);
  opacity: 0.32;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero__media { position: relative; justify-self: center; }

/* El PNG ya trae su propio halo claro sobre fondo transparente. Un
   drop-shadow seguiría el alfa de ese halo y dibujaría un rectángulo
   gris alrededor de la foto, así que no se usa: solo se difumina el
   borde inferior, donde el recorte del original queda a la vista. */
.hero__media img {
  width: 100%;
  max-width: 740px;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}

/* Sellos flotantes sobre la foto */
.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border: 2px solid transparent;
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Cada sello toma un color de la paleta en vez del blanco liso; el
   texto usa el derivado -ink para mantener el contraste sobre el tinte. */
.hero__badge--1 {
  top: 16%; right: -2%;
  background: var(--turquesa-tint);
  border-color: var(--turquesa);
  color: var(--turquesa-ink);
  animation: float 6s ease-in-out infinite;
}

.hero__badge--2 {
  bottom: 16%; left: -2%;
  background: var(--mostaza-tint);
  border-color: var(--mostaza);
  color: var(--mostaza-ink);
  animation: float 6s ease-in-out 1.5s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.hero__title { font-size: var(--step-5); }
.hero__title .mark { margin-top: 0.12em; }

.hero__lede { margin-top: 1.5rem; max-width: 34rem; }
.hero__chips { margin-top: 2rem; }

/* En el hero los chips van rellenos de su color desde el principio,
   no solo al pasar el cursor: son el primer golpe de paleta bajo el
   titular. Se limita a .hero__chips para no tocar los de otras zonas. */
.hero__chips .chip--rojo     { background: var(--rojo-tint);     border-color: var(--rojo);     color: var(--rojo-ink); }
.hero__chips .chip--turquesa { background: var(--turquesa-tint); border-color: var(--turquesa); color: var(--turquesa-ink); }
.hero__chips .chip--mostaza  { background: var(--mostaza-tint);  border-color: var(--mostaza);  color: var(--mostaza-ink); }

/* El relleno no cambia al pasar el cursor: solo se oscurece el borde,
   como en los chips del resto del sitio. */
.hero__chips .chip--rojo:hover     { border-color: var(--rojo-ink); }
.hero__chips .chip--turquesa:hover { border-color: var(--turquesa-ink); }
.hero__chips .chip--mostaza:hover  { border-color: var(--mostaza-ink); }

.hero__actions { margin-top: 2rem; }

/* --- Diapositiva 2: video de fondo -------------------------- */

/* El video cubre la diapositiva entera; el velo blanco tapa la mitad
   izquierda y se desvanece hacia el centro, así que a la derecha el
   video queda a todo color y a la izquierda el texto se lee sobre
   blanco limpio. Sin recortes ni máscaras: es un solo degradado. */
.hero__slide--film { background: var(--surface); }

.hero__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo solo cubre la columna del texto y se corta antes de llegar al
   video: a partir del 56% la imagen va a todo color, sin lavar.

   Los dos tintes radiales que llevaba encima se quitaron: se extendían
   por todo el lienzo y dejaban el video con una neblina rosada. El
   blanco sólido de la izquierda es lo único que necesita el titular
   para leerse. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--surface) 0%,
    var(--surface) 34%,
    rgb(255 255 255 / 0.55) 45%,
    transparent 56%
  );
}

/* Una sola columna: el texto ocupa la mitad blanca y deja ver el video. */
.hero__inner--film {
  /* Por encima del velo, que va en z-index 1. */
  z-index: 2;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(24rem, 42vw, 34rem);
  align-content: center;
}

.hero__inner--film .hero__body { max-width: 34rem; }
.hero__inner--film .hero__title { font-size: var(--step-4); }

/* La palabra rotulada va en rojo, y una regla de color abre el bloque:
   son los dos golpes de color que sostienen el texto sobre el blanco. */
.hero__inner--film .hand { color: var(--rojo-ink); }

.hero__inner--film .hero__title::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 5px;
  margin-bottom: 1.25rem;
  border-radius: var(--r-full);
  background: var(--rojo);
}

/* --- Controles del carrusel --------------------------------- */

.hero__controls {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateX(-50%);
}

.hero__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  background: rgb(255 255 255 / 0.85);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.25s var(--ease-back);
}

.hero__arrow:hover {
  background: var(--surface);
  border-color: var(--rojo);
  color: var(--rojo-ink);
  transform: scale(1.08);
}

.hero__arrow svg { width: 1.1rem; height: 1.1rem; }

.hero__dots { display: flex; align-items: center; gap: 0.45rem; }

.hero__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  background: rgb(255 255 255 / 0.85);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: width 0.3s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

/* La diapositiva activa se marca alargando el punto, no solo con color:
   así se distingue sin depender de percibir el matiz. */
.hero__dot[aria-current="true"] {
  width: 1.9rem;
  background: var(--rojo);
  border-color: var(--rojo);
}

@media (max-width: 940px) {
  .hero__veil {
    /* En vertical el velo se apoya arriba: blanco sólido tras el texto y
       transparente en la mitad de abajo, que es donde queda el video a
       todo color. */
    background: linear-gradient(
      to bottom,
      var(--surface) 0%,
      var(--surface) 40%,
      rgb(255 255 255 / 0.6) 52%,
      transparent 66%
    );
  }

  .hero__inner--film {
    min-height: clamp(28rem, 78vw, 34rem);
    align-content: start;
    text-align: center;
  }

  .hero__inner--film .hero__body { max-width: none; }
  .hero__inner--film .hero__actions { justify-content: center; }
  /* La regla de color es un bloque de ancho fijo: sin esto el text-align
     no la centra y queda descolgada a la izquierda. */
  .hero__inner--film .hero__title::before { margin-inline: auto; }
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__body { order: -1; }
  .hero__lede { margin-inline: auto; }
  .hero__chips, .hero__actions { justify-content: center; }
  .hero__media img { max-width: 440px; }
  .hero__badge--1 { right: 0; }
  .hero__badge--2 { left: 0; }
}

/* En móvil la foto se estrecha y los sellos caerían sobre las caras:
   ambos bajan a la zona de los uniformes, que sí admite taparse. */
@media (max-width: 560px) {
  .hero__badge { font-size: 1rem; padding: 0.5rem 0.85rem; }
  .hero__badge--1 { top: auto; bottom: 26%; right: 0; }
  .hero__badge--2 { bottom: 4%; left: 0; }
}

/* ============================================================
   ONDAS DIVISORIAS
   ============================================================ */

.wave { display: block; width: 100%; height: auto; }
.wave svg { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.wave path { fill: var(--surface-2); }
.wave--flip svg { transform: rotate(180deg); }
.wave--white path { fill: var(--surface); }

/* Cada onda toma el color de la sección hacia la que cae. */
.wave--turquesa path { fill: var(--turquesa-tint); }
.wave--amarillo path { fill: var(--amarillo-suave); }
.wave--azul path     { fill: var(--azul-tint); }
.wave--verde path    { fill: var(--verde-tint); }
.wave--mostaza path  { fill: var(--mostaza-tint); }
.wave--rojo path     { fill: var(--rojo-tint); }
.wave--amarillo-vivo path { fill: color-mix(in srgb, var(--mostaza) 30%, var(--surface)); }

/* Onda de salida: la curva blanca solo se ve si detrás queda el color de
   la sección que termina, y el div de la onda es transparente. Este
   modificador se lo pinta. */
.wave--desde-tint     { background: var(--surface-2); }
.wave--desde-turquesa { background: var(--turquesa-tint); }
.wave--desde-amarillo { background: var(--amarillo-suave); }
.wave--desde-azul     { background: var(--azul-tint); }
.wave--desde-amarillo-vivo { background: color-mix(in srgb, var(--mostaza) 30%, var(--surface)); }

/* ============================================================
   SOBRE EL COLEGIO
   ============================================================ */

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.about__title { font-size: var(--step-4); }

.features {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
}

.features li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.9rem;
}

.features .dot {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  flex: none;
}

.features .dot svg { width: 0.95rem; height: 0.95rem; stroke-width: 3; }
/* Los puntos van en color pleno, no en tinte: así se ve la alternancia
   rojo · mostaza · vino · amarillo claro. Sobre los dos amarillos el
   visto va oscuro; sobre los dos rojos, blanco. */
.features .dot--rojo     { background: var(--rojo);     color: var(--surface); }
.features .dot--turquesa { background: var(--turquesa); color: var(--surface); }
.features .dot--mostaza  { background: var(--mostaza);  color: var(--ink); }
.features .dot--verde    { background: var(--verde);    color: var(--ink); }

.features strong { color: var(--ink); font-weight: 600; }

/* --- Reproductor de video ---------------------------------- */

.player {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Fondo claro, no oscuro: si el video tarda en cargar o no llena la
     caja, lo que asoma es crema y no una franja negra. */
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}

/* En absoluto y a caja completa: el video es más apaisado que el marco
   y, dejado en flujo, podía quedarse corto y enseñar el fondo por
   debajo. Así siempre lo cubre entero y `object-fit` hace el recorte. */
.player video,
.player img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin velo: el video y su póster se ven a todo color. El botón blanco
   del centro es lo que se toca, y ya destaca por sí solo; oscurecer la
   imagen entera solo la apagaba. */
.player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
  transition: opacity 0.25s var(--ease);
}
.player.is-playing .player__play { opacity: 0; visibility: hidden; }

.player__play span {
  display: grid;
  place-items: center;
  width: clamp(4rem, 7vw, 5.5rem);
  height: clamp(4rem, 7vw, 5.5rem);
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-back);
}

.player__play:hover span { transform: scale(1.08); }
/* El triángulo ya va centrado en su viewBox (antes empezaba en x=8 y
   se salía 1,5 unidades a la derecha). Este empujón es solo la
   corrección óptica: un triángulo que apunta a la derecha tiene la masa
   a la izquierda y sin él se ve retrasado dentro del círculo. Va en
   transform y no en margin porque el margen de un elemento centrado con
   place-items lo desplaza a medias y el ajuste se vuelve imposible de
   razonar. */
.player__play svg {
  width: 40%;
  height: 40%;
  fill: var(--rojo);
  transform: translateX(4%);
}

/* Marco decorativo suelto detrás de una imagen, como el trazo del boceto.
   Lo usa la foto de nosotros.html; el video de la portada lo llevaba y se
   le quitó a propósito, así que ese envoltorio ya no tiene la clase. */
.player-frame { position: relative; }
.player-frame::before {
  content: "";
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%;
  height: 62%;
  border: 3px solid var(--mostaza);
  border-radius: var(--r-lg);
  z-index: -1;
}

@media (max-width: 940px) {
  .about__inner { grid-template-columns: 1fr; }
  .player-frame::before { display: none; }
}

/* ============================================================
   PROGRAMAS
   ============================================================ */

.section__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .eyebrow { justify-content: center; }
.section__head .lede { max-width: 46rem; margin-inline: auto; margin-top: 1rem; }
/* Cabecera pegada a lo que viene debajo, para bloques que ya empiezan
   con su propio aire (una tarjeta con relleno, un texto pequeño). */
.section__head--tight { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  /* Hueco para la parte del círculo que sobresale por encima de las
     tarjetas. Va aquí y no en el margen del encabezado porque ese margen
     lo comparten todas las secciones. */
  padding-top: clamp(6rem, 11.5vw, 10rem);
}

.program {
  /* El padding y el saliente van en variables porque la figura los
     necesita para calcular su margen negativo.

     --lift en porcentaje es deliberado: los porcentajes de margen se
     resuelven contra el ancho del bloque contenedor, que es el ancho de
     contenido de la tarjeta, y la figura mide el 88% de ese ancho y es
     cuadrada. El 45% deja el borde de la tarjeta casi en el centro del
     círculo, que está al 57% de la altura de la figura. */
  --pad: clamp(1.5rem, 2.5vw, 2rem);
  --lift: 45%;

  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  /* overflow visible: el conjunto de disco y retrato asoma por encima
     del borde superior de la tarjeta. */
  overflow: visible;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.program:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.program--rojo:hover     { border-color: var(--rojo); }
.program--turquesa:hover { border-color: var(--turquesa); }
.program--mostaza:hover  { border-color: var(--mostaza); }

/* Círculo de color tras el retrato del estudiante.

   El disco no llena la caja: ocupa el 86% de abajo, y ese 14% libre de
   arriba es por donde se desborda el retrato. */
.program__figure {
  position: relative;
  align-self: center;
  /* flex: none para que la columna flex de la tarjeta no pueda
     comprimir la figura en vertical y volver óvalo el círculo. */
  flex: none;
  /* La figura es cuadrada, así que su ancho manda sobre su alto: al 88%
     la tarjeta se acorta sin recortar más la foto, porque la proporción
     de la caja no cambia y el círculo solo escala. */
  width: 88%;
  /* Sube la figura por encima del borde: anula el padding superior y
     saca --lift fuera de la tarjeta. De paso la acorta en esa misma
     medida, porque el margen negativo descuenta altura. */
  margin-top: calc(-1 * (var(--pad) + var(--lift)));
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  aspect-ratio: 1 / 1;
}

.program__disc {
  position: absolute;
  inset: auto 0 0;
  width: 86%;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-full);
  transition: background 0.3s var(--ease);
}

/* En reposo el disco ya lleva color, a media intensidad: con el tinte
   claro las tarjetas se veían pálidas. */
.program--rojo     .program__disc { background: color-mix(in srgb, var(--rojo) 50%, var(--surface)); }
.program--turquesa .program__disc { background: color-mix(in srgb, var(--turquesa) 50%, var(--surface)); }
.program--mostaza  .program__disc { background: color-mix(in srgb, var(--mostaza) 65%, var(--surface)); }

/* Al pasar el cursor el disco sube al color pleno. */
.program--rojo:hover     .program__disc { background: var(--rojo); }
.program--turquesa:hover .program__disc { background: var(--turquesa); }
.program--mostaza:hover  .program__disc { background: var(--mostaza); }

/* La foto se enmascara con la unión de dos capas: por debajo, el propio
   disco, que corta la curva y esconde el corte plano que traen los PNG
   en su borde inferior; por encima, la imagen sale libre.

   La capa de arriba se apaga del 52% al 57% en vez de cortar en seco: la
   zona libre es tan ancha como la caja y el disco no llega a tanto, así
   que un corte duro dejaría un escalón vertical a media altura. El
   desvanecido arranca muy cerca del 57%, donde el círculo alcanza su
   máxima anchura, a propósito: más arriba el círculo se estrecha y el
   degradado se comía los brazos abiertos del niño de preescolar.

   Sobre una figura cuadrada un radio del 43% es un círculo exacto y
   coincide con el disco del 86%, que va pegado abajo: 100 − 86/2 = 57%
   para el centro. Si se cambia el tamaño del disco hay que rehacer los
   tres números (43%, 57% y el arranque del degradado). */
.program__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  /* Sin mix-blend-mode: mezclaba la foto con el disco y partía en dos al
     estudiante, teñido abajo y con su color propio arriba. */
  -webkit-mask-image:
    linear-gradient(#000 0 52%, transparent 57%),
    radial-gradient(ellipse 43% 43% at 50% 57%, #000 99.5%, transparent 100%);
  mask-image:
    linear-gradient(#000 0 52%, transparent 57%),
    radial-gradient(ellipse 43% 43% at 50% 57%, #000 99.5%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  transition: transform 0.4s var(--ease);
}

.program:hover .program__figure img { transform: scale(1.04); }

.program h3 { margin-bottom: 0.75rem; }

.program__grades {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--r-full);
}

.program--rojo     .program__grades { background: var(--rojo-tint);     color: var(--rojo-ink); }
.program--turquesa .program__grades { background: var(--turquesa-tint); color: var(--turquesa-ink); }
.program--mostaza  .program__grades { background: var(--mostaza-tint);  color: var(--mostaza-ink); }

.program p { font-size: var(--step--1); color: var(--muted); }
.program .link { margin-top: auto; padding-top: 1.25rem; }

.program--turquesa .link { color: var(--turquesa-ink); }
.program--mostaza  .link { color: var(--mostaza-ink); }

@media (max-width: 900px) {
  .programs {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
    padding-top: 7rem;
    /* En una sola columna las tarjetas se apilan, y el círculo de cada
       una asoma 6.75rem por encima de su borde: sin este hueco se monta
       sobre el pie de la tarjeta anterior. Debe superar a --lift. */
    row-gap: 8.75rem;
  }

  /* Aquí la figura la topa su max-width, no el ancho de la tarjeta, así
     que el saliente deja de poder ir en porcentaje: 45% de 15rem = 6.75rem. */
  .program { --lift: 6.75rem; }
  .program__figure { max-width: 15rem; align-self: center; }
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease);
}

/* Al pasar el cursor se amplía la tarjeta entera, no la foto de dentro. */
.testimonial:hover { transform: scale(1.025); }

.testimonial__media { position: relative; aspect-ratio: 3 / 4; background: var(--ink); }

.testimonial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón de reproducción sin velo: antes llevaba un degradado oscuro
   encima de toda la foto. */
.testimonial__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
}

.testimonial__play span {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--surface);
  border-radius: var(--r-full);
  transition: transform 0.3s var(--ease-back);
}

.testimonial__play:hover span { transform: scale(1.12); }
.testimonial__play svg {
  width: 40%;
  height: 40%;
  fill: var(--rojo);
  transform: translateX(4%);
}

/* El video sustituye a la foto dentro de la propia tarjeta: ocupa el
   mismo hueco y el botón desaparece al arrancar. */
.testimonial__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

.testimonial__media.is-playing .testimonial__play { display: none; }

.testimonial__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
}

.testimonial__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.testimonial__grade { display: block; font-size: var(--step--1); color: var(--muted); }

.testimonial__seal {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: var(--r-full);
  background: var(--verde-tint);
  color: var(--verde-ink);
}

.testimonial__seal svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 900px) {
  .testimonials { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */

.faq {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.faq__title { font-size: var(--step-3); }
.faq__aside .lede { margin-top: 1.25rem; }
.faq__aside .actions { margin-top: 1.75rem; }

.faq__list { display: grid; gap: 0.85rem; }

/* La pista es una fila más de la lista: el hueco lo pone el gap. */
.faq__list > .pista { justify-self: start; margin-block: 0; }

.faq__item {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}

/* Igual que las dimensiones: al pasar por encima se enciende el borde,
   sin rellenar la tarjeta. */
.faq__item:hover { border-color: var(--turquesa); }
.faq__item.is-open { border-color: var(--turquesa); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  min-height: var(--tap);
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

.faq__q svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--turquesa-ink);
  transition: transform 0.3s var(--ease);
}

.faq__item.is-open .faq__q svg { transform: rotate(180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.4rem 1.3rem; color: var(--muted); }
/* Las respuestas con varias fechas o valores van en lista. */
.faq__a ul { margin: 0; padding: 0 1.4rem 1.3rem 2.6rem; color: var(--muted); }
.faq__a li + li { margin-top: 0.35rem; }

/* Enlace a la página con todas las preguntas, bajo la lista del inicio. */
.faq__mas { margin: 0.4rem 0 0; }
.faq__a a { color: var(--turquesa-ink); }

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}

/* ============================================================
   RAZONES POR LAS CUALES NOS ESCOGEN
   ============================================================ */

/* Tarjeta apaisada: el disco de la foto sobresale por el borde
   izquierdo y el texto ocupa el resto.

   `min(100%, 30rem)` en el minmax es lo que evita los puntos de ruptura:
   en pantalla ancha caben dos columnas, y en el móvil el mínimo se
   convierte en el 100% disponible, así que la tarjeta nunca fuerza un
   scroll horizontal. */
.razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  /* El hueco entre columnas tiene que ser mayor que lo que sobresale el
     disco; si no, el de una tarjeta se monta sobre la anterior. */
  column-gap: clamp(2.75rem, 4vw, 4rem);
  row-gap: clamp(1.5rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.razon {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.3s var(--ease-back), border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}

.razon:hover {
  transform: translateY(-4px);
  border-color: var(--turquesa);
  box-shadow: var(--shadow-md);
}

/* Redonda y recortada por el CSS: así una foto rectangular puesta más
   adelante encaja sin reencuadrarla a mano. El margen negativo la saca
   de la tarjeta; lo que sobresale es esa medida menos el relleno, y cabe
   dentro del margen lateral de la página. */
.razon__img {
  flex: none;
  width: clamp(5.5rem, 11vw, 8rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-full);
  margin-left: calc(-1 * clamp(2rem, 5.5vw, 4rem));
  box-shadow: var(--shadow-md);
}

.razon__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.razon__titulo {
  font-size: var(--step-1);
  line-height: 1.2;
  text-wrap: balance;
}

.razon__texto {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .razon:hover { transform: none; }
}

/* ============================================================
   VIDA BELENISTA — collage
   ============================================================ */

/* Mosaico de 4 columnas con filas de altura fija: cada pieza ocupa un
   número distinto de celdas, que es lo que rompe la retícula y le da el
   aire de collage en vez de galería. */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(7rem, 13vw, 11rem);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}

.collage__item {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  /* La inclinación de origen la lleva cada pieza; aquí solo se anima. */
  transition: transform 0.35s var(--ease-back), box-shadow 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

/* Reparto de celdas y ligera inclinación alterna. */
.collage__item--1 { grid-column: span 2; grid-row: span 2; transform: rotate(-1.2deg); }
.collage__item--2 { grid-column: span 2; grid-row: span 1; transform: rotate(0.9deg); }
.collage__item--3 { grid-column: span 1; grid-row: span 1; transform: rotate(-0.8deg); }
.collage__item--4 { grid-column: span 1; grid-row: span 1; transform: rotate(1.4deg); }
.collage__item--5 { grid-column: span 2; grid-row: span 2; transform: rotate(1deg); }
.collage__item--6 { grid-column: span 2; grid-row: span 2; transform: rotate(-1deg); }

/* Al pasar el cursor la pieza se endereza y se levanta: el contraste con
   la inclinación de reposo es lo que da la sensación de collage vivo. */
.collage__item:hover,
.collage__item:focus-visible {
  transform: rotate(0deg) scale(1.03);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.collage__item:hover img,
.collage__item:focus-visible img { transform: scale(1.06); }

/* Rótulo velado: en reposo solo se insinúa desde abajo. */
.collage__label {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 2.5rem 1rem 1rem;
  text-align: left;
  background: linear-gradient(to top, rgb(35 34 31 / 0.85), transparent);
  transform: translateY(38%);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.collage__item:hover .collage__label,
.collage__item:focus-visible .collage__label {
  transform: none;
  opacity: 1;
}

.collage__tag {
  display: inline-flex;
  padding: 0.2rem 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--r-full);
}

/* El rojo y el vino son oscuros: sobre ellos la etiqueta va en blanco.
   El mostaza y el amarillo claro se quedan con el texto oscuro. */
.collage__tag--rojo     { background: var(--rojo); color: var(--surface); }
.collage__tag--turquesa { background: var(--turquesa); color: var(--surface); }
.collage__tag--mostaza  { background: var(--mostaza); }
.collage__tag--verde    { background: var(--verde); }

.collage__text {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--surface);
}

@media (max-width: 900px) {
  .collage { grid-template-columns: repeat(2, 1fr); }
  .collage__item--1,
  .collage__item--2,
  .collage__item--5,
  .collage__item--6 { grid-column: span 2; grid-row: span 2; }
  .collage__item--3,
  .collage__item--4 { grid-column: span 1; grid-row: span 1; }
}

/* Sin inclinaciones ni crecimiento para quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .collage__item { transform: none; }
  .collage__item:hover,
  .collage__item:focus-visible { transform: none; }
}

/* ============================================================
   COBERTURAS Y CONVENIOS
   ============================================================ */

/* Fila centrada, no rejilla: son once, así que la última línea siempre
   queda incompleta y con `auto-fit` se pegaría a la izquierda dejando un
   hueco. En flex, lo que sobra se centra. Las tarjetas no son enlaces
   —no hay páginas a donde llevar—, así que no llevan hover: nada debe
   insinuar que se pueden tocar. */
.convenios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.4vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sin tarjeta alrededor: la única caja es el marco del logo. El
   elemento de la lista solo apila marco y nombre y los alinea arriba,
   para que todos los marcos queden a la misma altura aunque un nombre
   ocupe dos líneas y el de al lado una. */
.convenio {
  flex: 0 1 11.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

/* Los logos vienen de todo: escudos cuadrados, marcas apaisadas de 5:1,
   unos con fondo blanco y otros transparente. El marco es la caja fija
   que los iguala; dentro, cada uno entra entero y centrado. */
.convenio__marco {
  /* Flex y no grid: contra una fila de rejilla de alto automático el
     `max-height: 100%` del logo no resuelve —la fila crece con la imagen
     y el tope no llega a aplicarse—, y los escudos cuadrados se salían
     del marco. En flex el porcentaje sí cuenta contra el alto fijo. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(5rem, 8.5vw, 6rem);
  padding: 0.6rem;
  /* Blanco, no tintado: la mitad de los logos llega en JPG con su propio
     fondo blanco, y sobre un marco de color se verían como recortes
     pegados. */
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
}

/* El convenio con enlace repite la pila de marco y nombre, y avisa de
   que se puede tocar: marco en rojo y nombre subrayado. */
.convenio__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
  width: 100%;
  text-decoration: none;
}
.convenio__enlace .convenio__marco {
  border-color: var(--rojo);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.convenio__enlace .convenio__nombre {
  color: var(--rojo-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.convenio__enlace:hover .convenio__marco {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Sustituto del logo mientras no llega el archivo: las siglas en la
   tipografía de los titulares. */
.convenio__provisional {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.convenio__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Única excepción al piso de 17px del sitio: el nombre no aporta nada que
   el logo no diga ya, y a tamaño de cuerpo competía con él. */
.convenio__nombre {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--body);
  text-wrap: balance;
}

/* En el móvil se fijan dos columnas: 11.5rem no caben dos veces y la
   lista se estiraría a once tarjetas en vertical. */
@media (max-width: 620px) {
  .convenios { gap: 0.65rem; }
  .convenio {
    flex: 0 1 calc(50% - 0.65rem);
    gap: 0.5rem;
  }
  .convenio__nombre { font-size: 0.95rem; }
}

/* ============================================================
   LLAMADO FINAL
   ============================================================ */

.cta { position: relative; overflow: hidden; text-align: center; }

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.cta__title { font-size: var(--step-4); max-width: 18ch; }

/* Confeti geométrico: los mismos cuatro colores de la paleta.
   Van completos dentro de la sección — recortados a media luna
   contra el borde superior parecerían un error de maquetación. */
.cta__dot {
  position: absolute;
  border-radius: var(--r-full);
  opacity: 0.45;
}

.cta__dot--1 { width: 7rem;   height: 7rem;   top: 12%;    left: 5%;   background: var(--mostaza); }
.cta__dot--2 { width: 4rem;   height: 4rem;   bottom: 14%; left: 15%;  background: var(--mostaza); }
.cta__dot--3 { width: 9.5rem; height: 9.5rem; top: 8%;     right: 6%;  background: var(--verde); }
.cta__dot--4 { width: 3.5rem; height: 3.5rem; bottom: 12%; right: 17%; background: var(--rojo); opacity: 0.3; }

@media (max-width: 900px) {
  .cta__dot { opacity: 0.3; }
  .cta__dot--2, .cta__dot--4 { display: none; }
}

/* ============================================================
   PIE
   ============================================================ */

.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--ink);
  color: #b5b8bf;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer .brand__name { color: var(--surface); }
.footer .brand__tag { color: var(--surface); }

.footer__about { margin-top: 1.25rem; font-size: var(--step--1); max-width: 26rem; }

.footer h4 {
  margin-bottom: 1.1rem;
  font-size: var(--step-0);
  color: var(--surface);
}

/* Cuando el título de la columna lleva a su propia página, hereda el
   color del titular y solo se subraya al pasar por encima. */
.footer h4 a {
  color: inherit;
  text-decoration: none;
}

.footer h4 a:hover { text-decoration: underline; }

.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }

.footer__links a {
  font-size: var(--step--1);
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

/* Sobre el gris oscuro del pie el acento tiene que ser claro: el
   mostaza es el único color de la paleta que se lee bien ahí. */
.footer__links a:hover { color: var(--mostaza); }

.footer__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--surface);
  text-decoration: none;
  border: 2px solid rgb(255 255 255 / 0.22);
  border-radius: var(--r-full);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.footer__pill:hover { border-color: var(--mostaza); color: var(--mostaza); }
.footer__pill svg { width: 1em; height: 1em; }

.socials { display: flex; gap: 0.6rem; margin-top: 1.75rem; }

.socials a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--surface);
  border: 2px solid rgb(255 255 255 / 0.22);
  border-radius: var(--r-full);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.socials a:hover { background: var(--mostaza); border-color: var(--mostaza); color: var(--ink); }
.socials svg { width: 1.15rem; height: 1.15rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--step--1);
}

.footer__bottom .heart { color: var(--rojo); }

/* La dirección de la sede, media tinta bajo el copyright. */
.footer__sede { color: rgb(255 255 255 / 0.55); }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__top > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */

/* El botón lleva rótulo, no solo el icono: mucha gente no reconoce el
   símbolo de WhatsApp fuera de la propia aplicación, y este es el
   camino más corto que tiene para pedir ayuda. */
.wa-fab {
  position: fixed;
  right: clamp(0.75rem, 3vw, 2rem);
  bottom: clamp(0.75rem, 3vw, 2rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--tap);
  padding: 0.75rem 1.35rem 0.75rem 1rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  background: var(--whatsapp);
  border: 3px solid var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md), 0 4px 0 rgb(30 32 36 / 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-back), visibility 0.3s;
}

.wa-fab.is-in { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover { transform: scale(1.05); background: var(--whatsapp-hover); }
.wa-fab svg { width: 1.6rem; height: 1.6rem; flex: none; }
/* El rótulo es una sola palabra, así que no necesita recorte: el icono
   y el verde del botón ya dicen por dónde se escribe. */
.wa-fab__texto { display: block; white-space: nowrap; }

@media (max-width: 400px) {
  .wa-fab { padding: 0.7rem 1.1rem 0.7rem 0.9rem; }
}