/* ============================================================
   paginas.css — bloques de las páginas interiores
   Nosotros · Solicitudes en línea · Donaciones ·
   Lista y uniforme · Calendario académico · Noticias y eventos.
   Solo lo que no existe ya en base.css / layout.css.
   No la carga la portada.
   ============================================================ */

/* ============================================================
   AJUSTES DE ESPACIADO
   ============================================================ */

/* Cuando una onda decorativa separa dos secciones ya deja unos 84 px de
   aire, con lo que el relleno superior completo sobra: se recorta a la
   mitad en la sección que va debajo de la onda. */
.section--tight-top { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* ============================================================
   CABECERA DE PÁGINA
   Mismo lavado de tintes y manchas de color que .hero__slide--intro
   del index, para que las dos páginas abran igual.
   ============================================================ */

.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(3rem, 6vw, 5rem);
  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);
}

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

.pagehead__body { max-width: 40rem; }

/* Manchas difusas detrás de la foto, como en el hero. */
.pagehead__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.pagehead__blob--1 {
  width: 34vw; height: 34vw;
  max-width: 440px; max-height: 440px;
  top: -8%; right: 4%;
  background: var(--mostaza);
  opacity: 0.34;
}

.pagehead__blob--2 {
  width: 26vw; height: 26vw;
  max-width: 340px; max-height: 340px;
  bottom: -12%; right: -6%;
  background: var(--rojo);
  opacity: 0.22;
}

.pagehead__blob--3 {
  width: 22vw; height: 22vw;
  max-width: 300px; max-height: 300px;
  top: 10%; left: -10%;
  background: var(--rojo);
  opacity: 0.16;
}

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

.pagehead .lede { margin-top: 1.25rem; max-width: 40rem; }

/* El PNG trae fondo transparente: se difumina solo el borde inferior,
   igual que .hero__media img. */
.pagehead__media { position: relative; justify-self: center; }

.pagehead__media img {
  width: 100%;
  max-width: 560px;
  /* El tamaño y el repeat van explícitos: sin ellos, algunos motores
     dimensionan mal el degradado y recortan la imagen entera. */
  -webkit-mask: linear-gradient(to bottom, #000 90%, transparent 100%) no-repeat 0 0 / 100% 100%;
  mask: linear-gradient(to bottom, #000 90%, transparent 100%) no-repeat 0 0 / 100% 100%;
}

/* Migas: el camino de vuelta a la portada. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--rojo-ink); text-decoration: underline; }
.crumbs svg { width: 1em; height: 1em; flex: none; }

/* Fila de anclas a las secciones de esta misma página. */
.pagehead .chips { margin-top: 2rem; }

/* ============================================================
   MISIÓN, VISIÓN Y EQUIPO
   Mosaico: las dos declaraciones apiladas y, al lado, la tarjeta
   del equipo que las sostiene.
   ============================================================ */

.purpose {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Las dos tarjetas se estiran hasta igualar la columna del equipo, que
   con la foto cuadrada es más alta. Con `align-content: start` se
   quedaban arriba y dejaban un hueco vacío debajo de «Visión». */
.purpose__cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  /* Contenedor de consulta: las tarjetas deciden si la foto va al lado
     o debajo según el ancho de esta columna, no el de la pantalla. */
  container-type: inline-size;
}

.mv__card {
  position: relative;
  overflow: hidden;
  /* Texto a la izquierda y foto a la derecha. La foto llena el alto que
     marque el texto, así que nunca agranda la tarjeta. */
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-back),
    box-shadow 0.3s var(--ease);
}

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

.mv__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.mv__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
  flex: none;
}

.mv__icon svg { width: 1.6rem; height: 1.6rem; }

.mv__card h3 { font-size: var(--step-2); }

/* Marco de la foto, a la derecha del texto. La imagen va en absoluto
   dentro de él: así su tamaño propio no cuenta para el alto de la
   tarjeta y se limita a llenar el que ya tiene. */
.mv__media {
  position: relative;
  min-height: 11rem;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

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

/* Cuando la columna es estrecha no caben texto y foto lado a lado: la
   foto baja y vuelve a ser una franja apaisada. */
@container (max-width: 34rem) {
  .mv__card { grid-template-columns: 1fr; }
  .mv__media { min-height: 0; aspect-ratio: 16 / 9; }
}

.mv__card--mision:hover { border-color: var(--rojo); }
.mv__card--mision .mv__icon { background: var(--rojo-tint); color: var(--rojo-ink); }

.mv__card--vision:hover { border-color: var(--turquesa); }
.mv__card--vision .mv__icon { background: var(--turquesa-tint); color: var(--turquesa-ink); }

/* --- Tarjeta del equipo ------------------------------------ */

.team {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(75% 55% at 100% 0%, var(--mostaza-tint), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, var(--rojo-tint), transparent 72%),
    var(--surface);
}

.team__eyebrow { margin-bottom: 0.75rem; }
.team__title { font-size: var(--step-2); }
/* El margen inferior es lo que separa el texto de la foto. */
.team__intro { margin-top: 0.85rem; margin-bottom: 1.75rem; }

/* Foto de grupo del cuerpo docente. Parte de un cuadrado y crece con
   `flex: 1` si la tarjeta se estira hasta la altura de la columna de al
   lado: el alto sobrante se lo queda la foto y no queda hueco vacío. El
   recorte lo hace `object-fit`, así que sirve cualquier foto sin
   reencuadrarla. */
.team__foto {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.team__names {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.team__names li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--step--1);
}

.team__names strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.team__names span { color: var(--muted); }

/* ============================================================
   VALORES
   Rejilla bento: los diez valores en tarjetas de color y dos
   piezas fotográficas que rompen el ritmo —una alta y una ancha—.
   El orden del HTML basta: la colocación automática rellena los
   huecos que dejan los dos tramos con span.
   ============================================================ */

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

.value {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.15rem, 2vw, 1.65rem);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-back),
    box-shadow 0.3s var(--ease);
}

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

/* El disco va en blanco sobre el fondo teñido: así el icono resalta
   en vez de fundirse con la tarjeta. */
.value__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  background: var(--surface);
  border-radius: var(--r-full);
  transition: transform 0.3s var(--ease-back);
}

.value__icon svg { width: 2rem; height: 2rem; }
.value:hover .value__icon { transform: rotate(-6deg) scale(1.08); }

.value__num {
  position: absolute;
  top: clamp(1rem, 1.8vw, 1.5rem);
  right: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  opacity: 0.5;
}

.value__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 0.35rem;
}

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

/* Los cuatro colores de marca rotan por la rejilla. */
.value--rojo     { background: var(--rojo-tint); }
.value--turquesa { background: var(--turquesa-tint); }
.value--mostaza  { background: var(--mostaza-tint); }
.value--verde    { background: var(--verde-tint); }

/* Algunas tarjetas van en color pleno en vez de en tinte, para que la
   rejilla no se vea toda pálida. Sobre los dos rojos el texto va en
   blanco; sobre los dos amarillos, oscuro. El disco del icono sigue
   blanco, así que el icono conserva su color. */
.value--vivo.value--rojo     { background: var(--rojo); }
.value--vivo.value--turquesa { background: var(--turquesa); }
.value--vivo.value--mostaza  { background: var(--mostaza); }
.value--vivo.value--verde    { background: var(--verde); }

.value--vivo.value--rojo,
.value--vivo.value--turquesa,
.value--vivo.value--rojo     .value__name,
.value--vivo.value--turquesa .value__name,
.value--vivo.value--rojo     .value__num,
.value--vivo.value--turquesa .value__num { color: var(--surface); }

.value--vivo.value--mostaza,
.value--vivo.value--verde,
.value--vivo.value--mostaza .value__num,
.value--vivo.value--verde   .value__num { color: var(--ink); }

.value--vivo .value__num { opacity: 0.8; }
.value--vivo:hover { border-color: var(--ink); }

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

.value--rojo     .value__icon,
.value--rojo     .value__num { color: var(--rojo-ink); }
.value--turquesa .value__icon,
.value--turquesa .value__num { color: var(--turquesa-ink); }
.value--mostaza  .value__icon,
.value--mostaza  .value__num { color: var(--mostaza-ink); }
.value--verde    .value__icon,
.value--verde    .value__num { color: var(--verde-ink); }

/* --- Piezas fotográficas ----------------------------------- */

.value-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  overflow: hidden;
  border-radius: var(--r-md);
}

.value-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotografías del colegio vienen apagadas; un punto de luz y
     saturación las pone a la altura del resto de la página. */
  filter: brightness(1.08) saturate(1.12);
}

/* Velo oscuro solo en la mitad baja: la foto se sigue viendo y el
   texto mantiene contraste. */
.value-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(35 34 31 / 0.88) 0%,
    rgb(35 34 31 / 0.62) 28%,
    rgb(35 34 31 / 0.12) 62%,
    transparent 100%
  );
}

.value-photo__body { position: relative; z-index: 1; color: var(--surface); }

.value-photo__quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.value-photo__quote .hand { font-weight: 400; }

.value-photo__source {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.75);
}

.value-photo--tall { grid-column: span 2; grid-row: span 2; }
.value-photo--wide { grid-column: span 2; }

/* ============================================================
   HIMNO
   ============================================================ */

.hymn {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hymn__aside { position: sticky; top: 8rem; }
/* El selector va por clase y no por `.hymn__aside img`: la columna
   lleva ahora dos imágenes —el escudo y la foto— y la regla del escudo
   encogía también la foto a 7rem. */
.hymn__logo { width: clamp(5rem, 9vw, 7rem); height: auto; margin-bottom: 1.5rem; }
.hymn__aside .lede { margin-top: 1.25rem; }

/* Foto al pie de la columna: llena el hueco que dejaba el texto frente
   a la pila de estrofas, que es mucho más alta. */
.hymn__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-top: 1.75rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.hymn__verses {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
}

.hymn__verse {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-left: 6px solid var(--turquesa);
  border-radius: var(--r-md);
}

.hymn__verse p {
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.75;
  color: var(--body);
}

.hymn__label {
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Fotografía dentro del marco decorativo .player-frame, que se define en
   layout.css. Es el único sitio que lo usa: el reproductor de la portada
   lo llevaba y se le quitó. */
.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   RECONOCIMIENTOS (cuadro de honor y de promoción)
   ============================================================ */

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

/* El cuadro de promoción son dos piezas: van del mismo ancho que las
   tres del cuadro de honor —una columna de esa misma rejilla— y
   centradas, para que las dos quepan en una sola línea. */
.boards--wide {
  grid-template-columns: repeat(2, calc((100% - 2 * var(--boards-gap)) / 3));
  justify-content: center;
}

.board {
  margin: 0;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}

.board:hover { border-color: var(--mostaza); box-shadow: var(--shadow-md); }

.board__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--surface-2);
  cursor: zoom-in;
}

.board__media img { width: 100%; height: auto; }

/* La lupa aparece al pasar el cursor; en táctil se queda visible. */
.board__zoom {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.board__zoom svg { width: 1.05em; height: 1.05em; }

.board__media:hover .board__zoom,
.board__media:focus-visible .board__zoom { opacity: 1; transform: translateY(0); }

@media (hover: none) {
  .board__zoom { opacity: 1; transform: none; }
}

.board figcaption {
  padding: 1.1rem clamp(1.1rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  border-top: 2px solid var(--line-soft);
}

.board figcaption span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
}

.boards + .section__head { margin-top: clamp(3rem, 6vw, 5rem); }

/* ============================================================
   MANUAL DE CONVIVENCIA
   ============================================================ */

.docbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
}

.docbar__cover {
  width: clamp(7rem, 12vw, 10rem);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.docbar h2 { font-size: var(--step-2); }
.docbar p { margin-top: 0.75rem; max-width: 40rem; }

.docbar .chips { margin-top: 1.25rem; }

/* ============================================================
   TRÁMITES  (solicitudes.html)
   ============================================================ */

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

.tramite {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-back),
    box-shadow 0.3s var(--ease);
}

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

.tramite__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
}

.tramite__icon svg { width: 1.6rem; height: 1.6rem; }
.tramite h3 { font-size: var(--step-1); }
.tramite p { font-size: var(--step--1); }

/* El pie queda abajo aunque las tarjetas tengan textos de distinto
   largo, para que todos los botones se alineen. */
.tramite__foot { margin-top: auto; padding-top: 1.1rem; }

/* Etiqueta del canal por el que se tramita. */
.tramite__via {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.tramite__via svg { width: 1.05em; height: 1.05em; }

/* El borde de color va puesto siempre, no solo al pasar el ratón. */
.tramite--rojo     { border-color: var(--rojo); }
.tramite--turquesa { border-color: var(--turquesa); }
.tramite--mostaza  { border-color: var(--mostaza); }
.tramite--verde    { border-color: var(--verde); }
.tramite--morado   { border-color: var(--morado); }

.tramite--rojo     .tramite__icon { background: var(--rojo-tint);     color: var(--rojo-ink); }
.tramite--turquesa .tramite__icon { background: var(--turquesa-tint); color: var(--turquesa-ink); }
.tramite--mostaza  .tramite__icon { background: var(--mostaza-tint);  color: var(--mostaza-ink); }
.tramite--verde    .tramite__icon { background: var(--verde-tint);    color: var(--verde-ink); }
.tramite--morado   .tramite__icon { background: var(--morado-tint);   color: var(--morado-ink); }

/* Trámite cuyo formulario todavía no tiene URL publicada. */
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   PASOS  (solicitudes.html)
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  counter-reset: paso;
}

.step { position: relative; padding-top: 3.5rem; }

/* Línea que hilvana los pasos; se corta en el último. */
.step::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 3.4rem;
  right: calc(-1 * clamp(1.25rem, 2.5vw, 2rem));
  height: 2px;
  background: var(--line);
}

.step:last-child::before { display: none; }

.step__num {
  counter-increment: paso;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--surface);
  background: var(--rojo);
  border-radius: var(--r-full);
}

.step__num::after { content: counter(paso); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { font-size: var(--step--1); }

/* ============================================================
   CIFRAS  (donaciones.html)
   ============================================================ */

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

.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
}

.stat__figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat__label {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}

.stat__note { display: block; margin-top: 0.4rem; font-size: var(--step--1); }

/* El borde de color sostiene la tarjeta cuando el fondo de la sección
   es claro: sin él, la de mostaza se pierde sobre el amarillo suave. */
.stat--rojo     { background: var(--rojo-tint);     border-color: var(--rojo); }
.stat--mostaza  { background: var(--mostaza-tint);  border-color: var(--mostaza); }
.stat--turquesa { background: var(--turquesa-tint); border-color: var(--turquesa); }

.stat--rojo     .stat__figure { color: var(--rojo-ink); }
.stat--mostaza  .stat__figure { color: var(--mostaza-ink); }
.stat--turquesa .stat__figure { color: var(--turquesa-ink); }

/* ============================================================
   CARTA  (donaciones.html)
   ============================================================ */

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

.letter__aside { position: sticky; top: 8rem; }

/* La cita se saca del cuerpo del texto y se convierte en la pieza
   visual de la columna izquierda. */
.letter__quote {
  margin: 1.75rem 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  border-left: 6px solid var(--rojo);
  background: var(--rojo-tint);
}

.letter__quote p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.letter__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--step--1);
  font-style: normal;
  color: var(--rojo-ink);
}

.letter__body > p + p { margin-top: 1.1rem; }
.letter__body strong { color: var(--ink); font-weight: 600; }

.letter__sign {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line-soft);
  font-size: var(--step--1);
}

.letter__sign strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--ink);
}

/* ============================================================
   FORMAS DE AYUDAR Y CONTACTO
   ============================================================ */

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

.way {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-back),
    box-shadow 0.3s var(--ease);
}

.way:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.way--rojo:hover     { border-color: var(--rojo); }
.way--turquesa:hover { border-color: var(--turquesa); }
.way--verde:hover    { border-color: var(--verde); }

.way__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
}

.way__icon svg { width: 1.6rem; height: 1.6rem; }
.way--rojo     .way__icon { background: var(--rojo-tint);     color: var(--rojo-ink); }
.way--turquesa .way__icon { background: var(--turquesa-tint); color: var(--turquesa-ink); }
.way--verde    .way__icon { background: var(--verde-tint);    color: var(--verde-ink); }

.way h3 { font-size: var(--step-1); }

.way .way__amount {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.way .way__amount span { font-size: var(--step--1); font-weight: 400; color: var(--muted); }
.way p { font-size: var(--step--1); }
.way .link { margin-top: auto; padding-top: 1rem; }

/* Aviso destacado: el certificado de la DIAN y avisos equivalentes. */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  /* Blanco con filete, no un tinte: este bloque cae sobre secciones ya
     tintadas —el amarillo de solicitudes, el turquesa de donaciones— y
     un tinte sobre otro tinte no se distingue del fondo. */
  background: var(--surface);
  /* Verde oscuro, no el puro: sobre estos tintes el filete claro da 2:1
     contra el fondo y el borde se pierde; el oscuro pasa de 4:1. */
  border: 2px solid var(--verde-ink);
  border-radius: var(--r-lg);
}

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

/* Variante con el filete en mostaza, para el aviso de atención
   presencial: va sobre sección blanca, donde el amarillo sí se ve. */
.callout--amarillo { border-color: var(--mostaza); }
.callout--amarillo .callout__icon { color: var(--mostaza-ink); background: var(--mostaza-tint); }

.callout__icon svg { width: 1.4rem; height: 1.4rem; }
.callout h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.callout p { font-size: var(--step--1); }

/* --- Tarjetas de contacto ---------------------------------- */

/* Banda de foto sobre las tres tarjetas de canal. Los tres canales son
   iconos y texto, sin nada que mirar; la foto le da cara al bloque y
   ata la sección de contacto al resto de la página. Va apaisada y
   recortada con object-fit, así que sirve cualquier foto sin
   reencuadrarla. */
.contacto__foto {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
  aspect-ratio: 21 / 6;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
}

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

/* Apaisada de 21:6 la foto se vuelve una rendija en el móvil. */
@media (max-width: 700px) {
  .contacto__foto { aspect-ratio: 16 / 9; }
}

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

.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-back),
    box-shadow 0.3s var(--ease);
}

.channel:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Cada tarjeta lleva su color rebajado de fondo, y ese mismo color a
   plena intensidad en el borde, el disco del icono y el botón. --tono
   es el color y --sobre el del texto que va encima de él: blanco sobre
   el rojo, oscuro sobre el verde y el amarillo.

   Los nombres de las clases vienen de la paleta antigua y ya no dicen
   el color: --verde es la tarjeta de WhatsApp (verde de la aplicación),
   --rojo la del teléfono (mostaza) y --turquesa la del correo (rojo). */
.channel--verde    { --tono: var(--whatsapp); --sobre: var(--ink);     --mezcla: 20%; }
.channel--rojo     { --tono: var(--mostaza);  --sobre: var(--ink);     --mezcla: 30%; }
.channel--turquesa { --tono: var(--rojo);     --sobre: var(--surface); --mezcla: 16%; }

.channel--rojo,
.channel--verde,
.channel--turquesa {
  background: color-mix(in srgb, var(--tono) var(--mezcla), var(--surface));
  border-color: color-mix(in srgb, var(--tono) 55%, var(--surface));
}

.channel--rojo:hover,
.channel--verde:hover,
.channel--turquesa:hover { border-color: var(--tono); }

.channel__icon {
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  margin-bottom: 0.4rem;
  color: var(--sobre);
  background: var(--tono);
  border-radius: var(--r-full);
}

.channel__icon svg { width: 2.5rem; height: 2.5rem; }

.channel__label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.channel__value {
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  /* Los correos largos no deben desbordar la tarjeta. */
  overflow-wrap: anywhere;
}

/* El botón se pega abajo: con textos de distinto largo, los tres
   quedan alineados. */
.channel .btn { margin-top: auto; }

/* El botón toma el color pleno de su tarjeta. Los selectores llevan la
   clase del canal para ganarle a .btn--claro, que es la que trae el
   HTML. */
.channel--rojo .btn,
.channel--verde .btn,
.channel--turquesa .btn {
  color: var(--sobre);
  background: var(--tono);
  border-color: var(--tono);
  box-shadow: var(--shadow-btn);
}
.channel--rojo .btn:hover,
.channel--verde .btn:hover,
.channel--turquesa .btn:hover {
  color: var(--sobre);
  background: color-mix(in srgb, var(--tono) 85%, var(--ink));
  border-color: color-mix(in srgb, var(--tono) 85%, var(--ink));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .tramites { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* A dos columnas la línea que une los pasos ya no hilvana nada. */
  .step::before { display: none; }
  /* A dos columnas las piezas de foto pasan a banda: ocupan la fila
     entera y una sola altura. */
  .values { grid-template-columns: repeat(2, 1fr); }
  .value-photo--tall { grid-row: span 1; min-height: 13rem; }
}

@media (max-width: 900px) {
  .pagehead__inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .letter { grid-template-columns: 1fr; }
  .letter__aside { position: static; }
  .pagehead__media { order: -1; max-width: 26rem; }
  .purpose { grid-template-columns: 1fr; }
  .boards--wide { grid-template-columns: 1fr; }
  .hymn { grid-template-columns: 1fr; }
  .hymn__aside { position: static; }
  .boards { grid-template-columns: 1fr; }
  .docbar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .docbar p { margin-inline: auto; }
  .docbar .chips { justify-content: center; }
}

@media (max-width: 560px) {
  .values { grid-template-columns: 1fr; }
  .tramites { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .value-photo--tall,
  .value-photo--wide { grid-column: span 1; }
}

/* Sin movimiento: se quedan los estados, se van las transiciones. */
@media (prefers-reduced-motion: reduce) {
  .mv__card,
  .value,
  .value__icon,
  .tramite,
  .way,
  .channel,
  .board,
  .board__zoom {
    transition: none;
  }
  .mv__card:hover,
  .value:hover,
  .value:hover .value__icon,
  .tramite:hover,
  .way:hover,
  .channel:hover { transform: none; }
  .board__zoom { opacity: 1; transform: none; }
}

/* ============================================================
   UNIFORMES
   ============================================================ */

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

.uniforme {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.uniforme--rojo:hover     { border-color: var(--rojo); }
.uniforme--turquesa:hover { border-color: var(--turquesa); }
.uniforme--mostaza:hover  { border-color: var(--mostaza); }
.uniforme--verde:hover    { border-color: var(--verde); }
.uniforme:hover { box-shadow: var(--shadow-md); }

/* Las láminas son apaisadas (16:9) y llevan el fondo claro incorporado. */
.uniforme__figure {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  border: 0;
  cursor: zoom-in;
}

.uniforme__figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--ease);
}

.uniforme__figure:hover img { transform: scale(1.03); }

/* Ampliada en el visor: el cursor indica que se puede abrir. */

.uniforme__body { padding: clamp(1.1rem, 2vw, 1.5rem); }

.uniforme__body h3 {
  font-size: var(--step-1);
  margin-bottom: 0.85rem;
}

.uniforme__list {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--body);
}

/* La viñeta es un punto de color en vez del disco por defecto. */
.uniforme__list li {
  position: relative;
  padding-left: 1.4rem;
}

.uniforme__list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--line);
}

.uniforme--rojo     .uniforme__list li::before { background: var(--rojo); }
.uniforme--turquesa .uniforme__list li::before { background: var(--turquesa); }
.uniforme--mostaza  .uniforme__list li::before { background: var(--mostaza); }
.uniforme--verde    .uniforme__list li::before { background: var(--verde); }

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

/* ============================================================
   LISTAS ESCOLARES
   ============================================================ */

.listas__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.listas__tab {
  min-height: var(--tap);
  padding: 0.7rem 1.6rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.listas__tab:hover { border-color: var(--turquesa); color: var(--turquesa-ink); }

/* El nivel elegido va en el azul oscuro del pie de página: es el color
   más contrastado de la paleta y aquí lo que importa es que se vea de un
   vistazo cuál de los tres está activo. */
.listas__tab.is-active {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

/* El mínimo de columna lo manda el rótulo «Toca para ver la lista»: va en
   una sola línea (.grado__cta) y la tarjeta tiene que caberlo entero con
   su relleno. Con 15rem se salía por la derecha. */
.listas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* [hidden] necesita el display:none explícito porque la regla de rejilla
   de arriba lo pisaría. */
.listas__grid[hidden] { display: none; }

/* --- Tarjeta de grado --------------------------------------- */

.grado {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  /* Franja de color arriba, como una pestaña de archivador. */
  border-top-width: 6px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

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

.grado--rojo     { border-top-color: var(--rojo); }
.grado--turquesa { border-top-color: var(--turquesa); }
.grado--mostaza  { border-top-color: var(--mostaza); }
.grado--verde    { border-top-color: var(--verde); }

.grado__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  min-height: var(--tap);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* La tarjeta ya se levanta al pasar por encima (.grado:hover): no hace
   falta además rellenar el botón de fondo. */

.grado__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.grado__meta { font-size: var(--step--1); color: var(--muted); }

/* El pie de cada grado es el botón secundario del sitio: subrayado y
   flecha, sin fondo ni recuadro. Con catorce tarjetas juntas, catorce
   pastillas rojas saturaban la sección. */
.grado__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--rojo-ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.grado:hover .grado__cta { color: var(--rojo); }

/* El rótulo no se parte en dos líneas: la tarjeta crece si hace falta.
   Por eso el mínimo de la rejilla (.listas__grid) tiene que dar de sí lo
   que mida este pill; si se cambia el texto, hay que revisarlo. */
.grado__cta { white-space: nowrap; }

.grado__cta svg { width: 1em; height: 1em; transition: transform 0.25s var(--ease-back); }
.grado:hover .grado__cta svg { transform: translateX(4px); }

/* ============================================================
   HORARIOS
   ============================================================ */

/* Una fila por nivel: a la izquierda quién, a la derecha cuándo. En el
   móvil la fila se parte y la hora cae debajo del nivel. */
.horarios {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

.horario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  border: 2px solid;
  border-radius: var(--r-md);
}

/* Un color por nivel, en el mismo orden que las tarjetas de grado de más
   abajo. El rótulo de la hora usa la variante oscura del color: sobre el
   tono puro el texto blanco no llegaría al contraste mínimo. */
.horario--rojo     { background: var(--rojo-tint);     border-color: var(--rojo); }
.horario--turquesa { background: var(--turquesa-tint); border-color: var(--turquesa); }
.horario--mostaza  { background: var(--mostaza-tint);  border-color: var(--mostaza); }
.horario--verde    { background: var(--verde-tint);    border-color: var(--verde); }

.horario--rojo     .horario__hora { background: var(--rojo-ink); }
.horario--turquesa .horario__hora { background: var(--turquesa-ink); }
.horario--mostaza  .horario__hora { background: var(--mostaza-ink); }
.horario--verde    .horario__hora { background: var(--verde-ink); }

.horario__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.horario__grados { font-size: var(--step--1); color: var(--body); }

/* La hora va en su propio rótulo rojo, como en la lámina del colegio, y
   nunca se parte: es el dato que se viene a buscar. */
.horario__hora {
  flex: none;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  white-space: nowrap;
  color: var(--surface);
  border-radius: var(--r-full);
}

/* ============================================================
   LIENZO DE GENERACIÓN DE PDF

   Solo lo usa el PDF de las láminas del calendario. Las listas
   escolares ya no pasan por aquí: son una lámina que se abre en el
   visor y se descarga como imagen.
   ============================================================ */

/* Lienzo donde se clona el documento para generar el PDF: ancho fijo de
   A4 a 96 ppp, así el resultado no depende del tamaño del visor.

   Se esconde sacándolo del viewport, sin recortarlo. Nada de alto cero
   con overflow: html2canvas respeta el recorte de los contenedores y el
   PDF salía en blanco. Y nada de tocar scrollX/scrollY en sus opciones,
   que es lo que antes descuadraba el encuadre hacia la izquierda: por
   defecto la librería ya parte del rectángulo real del elemento. */
.pdf-stage {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 794px;
}

/* Cada lámina ocupa una hoja completa del PDF. El generador corta el lienzo
   por altura de página, así que dando a todas las cajas el mismo alto salen
   encuadradas sin declarar saltos de página, que con imágenes fallan. */
.pdf-hoja {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.pdf-hoja img { max-width: 100%; max-height: 100%; }

/* ============================================================
   VISOR (modal)
   ============================================================ */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 2rem);
}

.viewer[hidden] { display: none; }

.viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(35 34 31 / 0.72);
}

.viewer__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 62rem);
  max-height: 100%;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.viewer__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  padding: 0.85rem clamp(0.85rem, 2vw, 1.25rem);
  border-bottom: 2px solid var(--line);
}

.viewer__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.viewer__tools { display: flex; align-items: center; gap: 0.5rem; }

.viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.65rem 1.2rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.viewer__btn:hover { border-color: var(--rojo); color: var(--rojo-ink); }
.viewer__btn svg { width: 1.05em; height: 1.05em; }
.viewer__btn[hidden] { display: none; }

/* Los dos botones de descarga —el PDF y el archivo original— comparten
   estilo: son la misma acción sobre el mismo documento y destacar uno
   hacía pensar que el otro daba algo distinto. Por eso ya no hay
   modificador `--main`.

   El de cerrar sí se distingue, con el azul oscuro del pie: es la única
   acción que no descarga nada. Lleva la palabra escrita, no solo la X. */
.viewer__btn--icon {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}
.viewer__btn--icon:hover {
  color: var(--surface);
  background: #3a3f47;
  border-color: #3a3f47;
}

.viewer__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.85rem, 2vw, 1.5rem);
  background: var(--surface-2);
}

/* Solo la lámina que cuelga directamente del visor llena el ancho. Con
   el selector descendiente esta regla también alcanzaba al escudo de la
   lista, que es un img anidado, y lo estiraba a pantalla completa. */
.viewer__body > img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }

@media (max-width: 640px) {
  .viewer__bar { flex-wrap: wrap; }
  .viewer__title { flex: 1 0 100%; }
  .viewer__tools { flex: 1; }
  .viewer__btn { flex: 1; justify-content: center; }
}

/* ============================================================
   IMPRESIÓN

   Al imprimir solo sale la lámina abierta en el visor, sin cabecera,
   menú, pie ni marco del modal.
   ============================================================ */

@media print {
  /* Con visibility los elementos ocultos siguen ocupando su espacio, y el
     documento salía desplazado en la hoja. Con display:none desaparecen
     del flujo. Funciona porque el visor es hijo directo de <body>: por eso
     está fuera de <main> en el HTML. */
  body > *:not(.viewer) { display: none !important; }

  .viewer {
    position: static;
    display: block;
    width: auto;
    padding: 0;
  }

  .viewer__box,
  .viewer__body {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .viewer__backdrop,
  .viewer__bar {
    display: none !important;
    visibility: hidden !important;
  }

  @page { margin: 12mm; }
}

/* ============================================================
   PERÍODOS DEL CALENDARIO
   ============================================================ */

.periodos { display: grid; gap: 0.75rem; }

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

.periodo h3 { margin: 0; font-size: inherit; }

.periodo__head {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  width: 100%;
  min-height: var(--tap);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 1.75rem);
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.periodo__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--surface);
  background: var(--grey);
  border-radius: var(--r-full);
  transition: background 0.3s var(--ease);
}

.periodo__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.periodo__dates {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
}

.periodo__caret {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  transition: transform 0.3s var(--ease);
}

.periodo.is-open .periodo__caret { transform: rotate(180deg); }

/* Mismo plegado que los acordeones del sitio: 0fr → 1fr anima la altura
   sin tener que fijarla a mano. */
.periodo__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.periodo.is-open .periodo__panel { grid-template-rows: 1fr; }
.periodo__panel > div { overflow: hidden; }

.periodo__list {
  display: grid;
  gap: 0.6rem;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem) clamp(1.1rem, 2vw, 1.5rem);
  margin: 0;
  list-style: none;
  color: var(--body);
}

.periodo__list li { position: relative; padding-left: 1.4rem; }

.periodo__list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--line);
}

/* El borde de color se enciende al pasar por encima; el relleno queda
   para la fila abierta. */
.periodo--rojo:hover     { border-color: var(--rojo); }
.periodo--turquesa:hover { border-color: var(--turquesa); }
.periodo--mostaza:hover  { border-color: var(--mostaza); }
.periodo--verde:hover    { border-color: var(--verde); }

.periodo--rojo.is-open     { border-color: var(--rojo);     background: var(--rojo-tint); }
.periodo--turquesa.is-open { border-color: var(--turquesa); background: var(--turquesa-tint); }
.periodo--mostaza.is-open  { border-color: var(--mostaza);  background: var(--mostaza-tint); }
.periodo--verde.is-open    { border-color: var(--verde);    background: var(--verde-tint); }

.periodo--rojo     .periodo__num { background: var(--rojo); }
.periodo--turquesa .periodo__num { background: var(--turquesa-ink); }
.periodo--mostaza  .periodo__num { background: var(--mostaza-ink); }
.periodo--verde    .periodo__num { background: var(--verde-ink); }

.periodo--rojo     .periodo__list li::before { background: var(--rojo); }
.periodo--turquesa .periodo__list li::before { background: var(--turquesa); }
.periodo--mostaza  .periodo__list li::before { background: var(--mostaza); }
.periodo--verde    .periodo__list li::before { background: var(--verde); }

/* ============================================================
   CONVOCATORIAS
   ============================================================ */

.convos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.convo {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  /* La franja de color va arriba, como una pestaña de archivador. */
  border-top-width: 6px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

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

.convo--rojo     { border-top-color: var(--rojo); }
.convo--turquesa { border-top-color: var(--turquesa); }
.convo--mostaza  { border-top-color: var(--mostaza); }
.convo--verde    { border-top-color: var(--verde); }

.convo__mes {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.convo h3 { font-size: var(--step-1); margin: 0.35rem 0 0.75rem; }

.convo__fecha { font-weight: 600; color: var(--ink); }
.convo__grados { margin-top: 0.35rem; font-size: var(--step--1); color: var(--muted); }

/* ============================================================
   LÁMINAS DESCARGABLES
   ============================================================ */

.laminas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.lamina {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

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

.lamina img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--surface-2);
}

.lamina__name {
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.laminas__pie {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ============================================================
   AVISOS
   ============================================================ */

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

.aviso {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.aviso:hover { border-color: var(--rojo); box-shadow: var(--shadow-md); }

.aviso__media { display: block; overflow: hidden; background: var(--surface-2); }

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

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

.aviso__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.aviso__tag {
  align-self: flex-start;
  padding: 0.25rem 0.8rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  border-radius: var(--r-full);
}

.aviso__tag--rojo     { background: var(--rojo-tint);     color: var(--rojo-ink); }
.aviso__tag--turquesa { background: var(--turquesa-tint); color: var(--turquesa-ink); }

.aviso h3 { font-size: var(--step-1); }
.aviso__lema { font-weight: 600; color: var(--ink); }
.aviso__body p:last-child { color: var(--muted); }

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

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

/* ============================================================
   AGENDA DEL AÑO
   ============================================================ */

/* Línea de tiempo: el hilo vertical es un borde en el propio elemento,
   así crece con el contenido sin alturas fijas. */
.agenda {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.agenda__item {
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.25rem, 2.5vw, 1.75rem) 1.75rem;
  border-left: 3px solid var(--line-soft);
}

.agenda__item::before {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 2.8vw, 2rem);
  left: -0.6rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--surface);
  border-radius: var(--r-full);
  background: var(--grey);
}

.agenda__item--rojo::before     { background: var(--rojo); }
.agenda__item--turquesa::before { background: var(--turquesa); }
.agenda__item--mostaza::before  { background: var(--mostaza); }
.agenda__item--verde::before    { background: var(--verde); }

.agenda__when {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--muted);
}

.agenda__body h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.agenda__body p { color: var(--muted); }

@media (max-width: 700px) {
  .agenda__item { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ============================================================
   ADMISIONES  (admisiones.html)
   ============================================================ */

/* --- Los dos caminos --------------------------------------- */

/* Estudiante nuevo o antiguo: el proceso no se parece en nada de un
   caso al otro, así que la página se bifurca aquí en vez de mezclarlo
   todo en una sola lista. */
.eleccion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.eleccion__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
}

.eleccion__card h3 { font-size: var(--step-1); }
.eleccion__card p { font-size: var(--step--1); }

/* El botón queda abajo aunque un texto sea más largo que el otro. */
.eleccion__pie { margin-top: auto; padding-top: 0.9rem; }

.eleccion__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
}

.eleccion__icon svg { width: 1.6rem; height: 1.6rem; }

.eleccion__card--nuevo   { border-color: var(--turquesa); }
.eleccion__card--antiguo { border-color: var(--mostaza); }
.eleccion__card--nuevo   .eleccion__icon { background: var(--turquesa-tint); color: var(--turquesa-ink); }
.eleccion__card--antiguo .eleccion__icon { background: var(--mostaza-tint);  color: var(--mostaza-ink); }

/* --- La ruta de pasos --------------------------------------- */

/* Los pasos van en vertical, no en fila como los de solicitudes.html:
   aquí son siete y cada uno lleva su botón o sus datos bancarios, y en
   cuatro columnas no cabrían ni se leerían en el móvil. */
.ruta {
  counter-reset: paso;
  display: grid;
  gap: clamp(0.85rem, 1.8vw, 1.15rem);
  max-width: 58rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ruta__paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
}

.ruta__num {
  counter-increment: paso;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--surface);
  background: var(--rojo);
  border-radius: var(--r-full);
}

.ruta__num::after { content: counter(paso); }

.ruta--mostaza .ruta__num { background: var(--mostaza-ink); }

.ruta__cuerpo h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.ruta__cuerpo p { font-size: var(--step--1); }

.ruta__acciones { margin-top: 1rem; }

/* Advertencia dentro de un paso: lo que la gente da por hecho y no es
   así («inscribirse no garantiza el cupo»). */
/* Plazo de la preinscripción: es lo primero que necesita saber una
   familia que ya tiene cupo, así que va encima de los pasos y no
   dentro de uno. Blanco con filete oscuro porque cae sobre el amarillo
   de la sección y un tinte sobre otro tinte no se ve. */
.plazo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 58rem;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  padding: 0.9rem 1.15rem;
  font-size: var(--step--1);
  background: var(--surface);
  border: 2px solid var(--mostaza-ink);
  border-radius: var(--r-md);
}

.plazo svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--mostaza-ink);
}

.ruta__aviso {
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--mostaza);
  color: var(--muted);
}

/* En el móvil el número se va encima del texto: reservarle una columna
   deja el renglón corriendo por bastante menos del ancho de la tarjeta,
   y con siete pasos eso es mucho alto desaprovechado. */
@media (max-width: 560px) {
  .ruta__paso { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* --- Datos que hay que copiar ------------------------------- */

/* Cuenta bancaria, NIT, dirección: van en su propia caja porque son
   datos que la gente copia a mano y no deben perderse en el párrafo. */
.dato {
  display: grid;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

/* En fila cuando son datos cortos y van sueltos, no dentro de un paso. */
.dato--fila {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.dato div { display: grid; gap: 0.1rem; }
.dato dt { color: var(--muted); }
.dato dd { margin: 0; font-weight: 600; color: var(--ink); }

/* Cada dato con su propio botón: en la app del banco se pega primero la
   cuenta y después el NIT, así que copiarlos juntos no sirve. */
.dato__valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.8rem;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.copiar svg { width: 1.05rem; height: 1.05rem; }

.copiar:hover { color: var(--rojo-ink); border-color: var(--rojo); }

/* Copiado: verde un par de segundos, para que se note que algo pasó. */
.copiar.is-hecho,
.copiar.is-hecho:hover { color: var(--verde-ink); border-color: var(--verde-ink); }

/* --- Documentos --------------------------------------------- */

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.docs-grid__titulo {
  font-size: var(--step-1);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--line);
}

/* La lista de la portada, apretada: aquí son catorce documentos y con
   el espaciado original la sección se hacía interminable. */
.features--compacta { margin-top: 1.1rem; gap: 0.8rem; }
.features--compacta li { font-size: var(--step--1); }

/* --- Tablas -------------------------------------------------- */

/* Una tabla no se puede encoger más allá de su contenido, así que se
   desliza dentro de su caja en vez de empujar la página entera. */
.tabla-scroll {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--surface);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.tabla th,
.tabla td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.tabla thead th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--surface);
  background: var(--ink);
  border-bottom: 0;
  white-space: nowrap;
}

.tabla tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla tbody tr:nth-child(even) th,
.tabla tbody tr:nth-child(even) td { background: var(--surface-2); }

/* Las cifras no se parten: un valor cortado en dos líneas se lee mal. */
.tabla__num { white-space: nowrap; font-weight: 600; color: var(--ink); }

.tabla__titulo {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.85rem;
  font-size: var(--step-1);
}

/* En el móvil la tabla deja de ser tabla: cada fila se vuelve una
   tarjeta con el dato debajo de su etiqueta. Deslizar una tabla de lado
   con el dedo se siente como si se moviera la página entera, y con dos
   o tres columnas de fechas largas no hay ancho que alcance. La etiqueta
   viaja en el data-col de cada celda, porque el encabezado se esconde. */
@media (max-width: 560px) {
  .tabla-scroll {
    overflow-x: visible;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .tabla,
  .tabla tbody,
  .tabla tbody tr,
  .tabla tbody th,
  .tabla tbody td { display: block; }

  .tabla thead { display: none; }

  .tabla tbody tr {
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
  }

  .tabla tbody tr + tr { margin-top: 0.7rem; }

  /* El rayado de filas alternas no tiene sentido cuando cada fila es
     una tarjeta suelta. */
  .tabla tbody tr:nth-child(even) th,
  .tabla tbody tr:nth-child(even) td { background: none; }

  .tabla tbody th,
  .tabla tbody td {
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }

  /* La primera celda titula la tarjeta. */
  .tabla tbody tr > :first-child {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
  }

  .tabla tbody [data-col] { margin-top: 0.45rem; }

  .tabla tbody [data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
  }
}

/* Primera tabla de una sección: no necesita el margen de arriba. */
.section__head + .tabla__titulo { margin-top: 0; }

.notas {
  display: grid;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ============================================================
   PÁGINA EN CONSTRUCCIÓN
   Aviso de las páginas que la versión provisional aún no publica.
   ============================================================ */

.obra {
  background:
    radial-gradient(60% 50% at 0% 0%, var(--mostaza-tint), transparent 68%),
    radial-gradient(55% 45% at 100% 100%, var(--rojo-tint), transparent 70%),
    var(--surface);
}

/* Alto mínimo para que el pie no suba hasta media pantalla: el aviso
   es corto y sin él la página quedaría casi vacía. */
.obra__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.25rem;
  min-height: 52vh;
  text-align: center;
}

.obra__title { font-size: var(--step-4); }
.obra__inner .lede { max-width: 42rem; }
.obra__actions { justify-content: center; margin-top: 0.75rem; }
/* El acceso a la página del sitio anterior va pegado a los botones
   principales: es parte del mismo grupo, no un bloque aparte. */
.obra__anterior { margin-top: 0; }
.obra__volver { margin-top: 0.5rem; }