/* ==========================================================
   Páginas internas (identidad, plataformas, etapas, admisiones,
   actividades, calendario, contacto, privacidad).
   Usa las variables del inicio de styles.css y los componentes de styles.css.
   Estructura: utilidades · banner · secciones · identidad · plataformas ·
   etapas · admisiones · eventos · contacto · formulario ·
   privacidad · responsive
   ========================================================== */

/* ---------- Utilidades ---------- */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 56px;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
}

/* Marca de contenido pendiente: se ve a propósito para que no pase a producción */
.ph {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--red-tint);
  color: var(--red-ink);
  font-weight: 700;
  font-size: 0.92em;
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--navy-dark);
}

/* texto oscuro: el blanco sobre este verde no cumple contraste */
.btn-whatsapp .icon-fill {
  width: 20px;
  height: 20px;
}

.btn-light {
  background: var(--white);
  color: var(--navy-dark);
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

.icon-flip {
  transform: scaleX(-1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}

.link-arrow .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* ---------- Banner de encabezado ---------- */
.page-banner,
.stage-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-dark);
  color: var(--white);
}

/* Puntos de cuaderno sobre el azul (los mismos de la portada, en blanco): le dan textura al banner sin competir con el título */
.page-banner,
.stage-banner {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.11) 1.2px, transparent 1.6px);
  background-size: 26px 26px;
}

.page-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 56px 76px;
}

/* Decoración de los banners: estrella del logo (marca de agua), borde ondulado y subrayado rojo,
   los mismos motivos de la portada. Todo es CSS; no hay que tocar el HTML. */
.page-banner::before,
.stage-banner::before {
  content: "";
  position: absolute;
  right: max(16px, calc((100vw - 1100px) / 2 - 30px));
  bottom: -100px;
  width: 300px;
  height: 306px;
  opacity: 0.13;
  pointer-events: none;
  background: url("../img/estrella.png") center / contain no-repeat;
}

.page-banner::after,
.stage-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  z-index: 2;
  height: 33px;
  pointer-events: none;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 V20 C 200 0 420 0 720 20 S 1240 40 1440 18 V48 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 V20 C 200 0 420 0 720 20 S 1240 40 1440 18 V48 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--on-navy);
  margin-bottom: 14px;
}

.crumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs a:hover {
  color: var(--white);
}

.page-banner h1,
.stage-banner h1 {
  color: var(--white);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  max-width: 720px;
}

.page-banner h1::after,
.stage-banner h1::after {
  content: "";
  display: block;
  width: 150px;
  height: 14px;
  margin-top: 10px;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 16' fill='none'%3E%3Cpath d='M4 10 C 100 3, 230 3, 376 9' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 16' fill='none'%3E%3Cpath d='M4 10 C 100 3, 230 3, 376 9' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}

.page-banner .lead,
.stage-banner .lead {
  color: var(--on-navy-soft);
  max-width: 620px;
  margin-top: 14px;
}

/* Banner de etapa: texto a la izquierda, foto a la derecha */
.stage-banner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.stage-banner .page-banner-inner {
  max-width: none;
  margin: 0;
  align-self: center;
  padding-left: max(56px, calc((100vw - 1100px) / 2 + 56px));
  padding-right: 24px;
}

.stage-banner-photo {
  position: relative;
  z-index: 1;
  min-height: 340px;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.stage-banner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Secciones ---------- */
.page-banner+.section,
.stage-banner+.section {
  position: relative;
  margin-top: -1px;
}

/* tapa el píxel fraccionario del borde del banner */
.section {
  padding: 64px 0;
  background: var(--white);
}

.section-soft {
  background: var(--bg-soft);
}

.section h2 {
  font-size: 28px;
  line-height: 1.2;
}

/* Título a la izquierda, contenido a la derecha */
.split {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: start;
}

/* Costos (admisiones): tarjeta con la forma de las tarjetas del sitio */
.cost-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "icon title btn" "icon text btn" "icon meta btn";
  column-gap: 20px;
  align-items: center;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 5px solid var(--red);
  border-radius: 0 22px 0 22px;
}

.cost-icon {
  grid-area: icon;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
}

.cost-icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.cost-title {
  grid-area: title;
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: var(--navy-dark);
}

.cost-text {
  grid-area: text;
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.cost-text,
.cost-meta {
  text-wrap: wrap;
}

.cost-meta {
  grid-area: meta;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.cost-btn {
  grid-area: btn;
  margin-left: 24px;
}

.cost-help {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.cost-help a {
  display: inline-block;
  padding: 8px 2px;
  margin: -8px -2px;
  color: var(--navy-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.cost-help a:hover {
  color: var(--red-ink);
}

@media (max-width: 720px) {
  .cost-card {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "icon title" "text text" "meta meta" "btn btn";
    padding: 22px 20px;
    row-gap: 0;
  }

  .cost-icon {
    align-self: center;
  }

  .cost-text {
    margin-top: 16px;
  }

  .cost-btn {
    margin: 18px 0 0;
    width: 100%;
    min-height: 48px;
  }
}

.prose p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h3 {
  font-size: 18px;
  margin: 1.6em 0 0.5em;
}

.prose h3:first-child {
  margin-top: 0;
}

.prose ul.bullets {
  margin: 0 0 1em;
}

.bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* Foto junto al texto: marco blanco y bloque azul plano detrás, como las fotos de la portada */
.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: center;
}

.photo {
  position: relative;
  margin: 0 14px 14px 0;
}

.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue-tint);
  border-radius: 18px;
  transform: translate(14px, 14px);
}

.photo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--white);
  border-radius: 18px;
}

img.is-vertical {
  object-position: center 30%;
}

/* foto vertical recortada a horizontal: conserva la parte alta, donde suelen estar las caras */
.section-soft .photo::before {
  background: var(--blue-wash);
}

.contact-info .photo {
  margin-top: 36px;
}

.contact-info .photo img {
  aspect-ratio: auto;
  height: auto;
}

/* la foto de la fachada es casi cuadrada (1600×1520): se muestra completa, sin recortar a 3:2 */

/* ---------- Identidad ---------- */
.mv-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 6px solid var(--blue);
  border-radius: 16px;
  padding: 28px 28px 30px;
}

.panel-red {
  border-top-color: var(--red);
}

.panel>* {
  position: relative;
  z-index: 1;
}

/* la estrella de marca de agua queda solo en banners y franjas oscuras */
.panel h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.panel p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 0.8em;
}

.panel p:last-child {
  margin-bottom: 0;
}



/* Símbolos institucionales: ver el bloque "Identidad" más abajo */

/* Clase has-star del HTML: la estrella de fondo se quitó (se repetía en demasiadas secciones); queda solo el contenedor */
.has-star {
  position: relative;
  overflow: hidden;
}

.has-star>.wrap {
  position: relative;
}

/* ---------- Plataformas ---------- */
.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  counter-reset: plat;
}

/* Dirección: credenciales. Cada plataforma es un carné con ojal para el cordón, franja de color con su número y acceso al pie. */
.platform {
  --t: var(--navy);
  --t-tint: var(--navy-tint);
  counter-increment: plat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 0;
  border-radius: 6px 6px 16px 16px;
  padding: 56px 28px 28px;
  box-shadow: 6px 6px 0 var(--t-tint);
  overflow: hidden;
}

.platform::before {
  content: "N.º 0" counter(plat);
  content: "N.º 0" counter(plat) / "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24px;
  background: var(--t);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.platform::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 28px;
  width: 44px;
  height: 12px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.28);
}

.platform:nth-child(3) {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
}

.platform-main {
  --t: var(--red);
  --t-tint: var(--red-tint);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 40px;
  align-items: center;
}

.platform-main::before {
  height: 36px;
  padding-right: 28px;
}

.platform-main::after {
  top: 12px;
}

.platform-main {
  padding-top: 66px;
}

.platform-copy {
  flex: 1 1 auto;
}

.platform-who {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t);
  background: var(--t-tint);
  border-radius: 2px 8px 2px 8px;
  margin-bottom: 12px;
}

.platform-main .platform-who {
  color: var(--red-ink);
}

.platform:nth-child(3) .platform-who {
  color: var(--blue-ink);
}

.platform:nth-child(2) .platform-who {
  color: var(--navy-dark);
}

.platform h2,
.platform h3 {
  font-family: var(--font-title);
  font-size: 24px;
  margin-bottom: 8px;
}

/* las tres tarjetas con el mismo título (la principal es h2 y las otras h3) */
.platform p {
  font-size: 16px;
  line-height: 1.6;
}

.platform-go {
  margin-top: 22px;
}

.platform-main .platform-go {
  margin-top: 0;
}

/* botón + dirección impresa debajo, como el número de un carné: la familia ve a dónde va antes de tocar */
.platform-go {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: center;
}

.platform .platform-url {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Ayuda para ingresar (reusa .split y .contact-boxes) */
.tint-green {
  background: var(--green-tint);
  color: var(--green-ink);
}

/* ---------- Etapas (plantilla compartida) ---------- */
.grades-note {
  margin-bottom: 20px;
}

/* Dirección: libreta de grados. Los grados son una escalera que sube; la galería, fotos pegadas con cinta. */
.ladder-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px 48px;
}

.ladder-group {
  flex: 1 1 0;
}

.ladder-group-fit {
  flex: 0 1 auto;
}

/* Preescolar: el grupo mide lo que sus peldaños y deja sitio a la nota a mano */
.ladder-label {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink);
}

.ladder-group-media {
  flex-grow: 0.5;
  --t: var(--navy);
  --t-tint: var(--navy-tint);
  --t-ink: var(--navy-dark);
}

/* Media: el azul oscuro, para no repetir el color del nivel */
.ladder {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 3px solid var(--t);
}

/* el piso de la escalera */
.ladder li {
  flex: 1 1 150px;
  min-width: 116px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: calc(84px + var(--n, 0) * 22px);
  padding: 12px 14px 14px;
  background: var(--t-tint);
  border-top: 4px solid var(--t);
  border-radius: 4px 12px 0 0;
}

.ladder li:nth-child(1) {
  --n: 0;
}

.ladder li:nth-child(2) {
  --n: 1;
}

.ladder li:nth-child(3) {
  --n: 2;
}

.ladder li:nth-child(4) {
  --n: 3;
}

.ladder li:nth-child(5) {
  --n: 4;
}

.ladder-dot {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--t-ink);
}

.ladder-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-dark);
  overflow-wrap: break-word;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 170px;
  gap: 14px;
}

.gallery figure {
  position: relative;
  margin: 0;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 3px;
  box-shadow: 4px 4px 0 var(--blue-tint);
}

.gallery figure::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  width: 64px;
  height: 18px;
  margin-left: -32px;
  background: rgba(221, 13, 58, 0.55);
  transform: rotate(-3deg);
}

.gallery figure:nth-child(even)::before {
  background: rgba(16, 99, 158, 0.5);
  transform: rotate(2deg);
}

.gallery figure:nth-child(3n) {
  transform: rotate(0.8deg);
}

.gallery figure:nth-child(3n+1) {
  transform: rotate(-0.6deg);
}

.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-soft);
}

.gallery figure:first-child,
.gallery figure.g-wide {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery figure.g-tall {
  grid-row: span 2;
}

/* foto vertical: ocupa dos filas */
.gallery img {
  object-position: center 30%;
}

/* conserva la parte alta del encuadre */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  color: var(--white);
}

.cta-band::before {
  content: "";
  position: absolute;
  left: 52%;
  top: -70px;
  width: 260px;
  height: 265px;
  opacity: 0.12;
  pointer-events: none;
  background: url("../img/estrella.png") center / contain no-repeat;
}

.cta-band-inner {
  position: relative;
}

.cta-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.cta-band h2 {
  color: var(--white);
  font-size: 28px;
  line-height: 1.2;
  max-width: 520px;
}

.cta-band p {
  color: var(--on-navy-soft);
  margin-top: 8px;
  max-width: 520px;
}

/* ---------- Admisiones ---------- */
/* Dirección: itinerario de viaje. Los pasos son paradas en una ruta punteada; las fechas, boletos con talón. */
.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  border-left: 3px dotted var(--card-line);
}

.step {
  --t: var(--red);
  --t-tint: var(--red-tint);
  counter-increment: paso;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  padding: 4px 0 0;
}

.step:nth-child(2) {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
}

.step:nth-child(3) {
  --t: var(--navy-dark);
  --t-tint: var(--navy-tint);
}

.step:nth-child(4) {
  --t: var(--green);
  --t-tint: var(--green-tint);
}

.step::before {
  content: counter(paso);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--t);
  color: var(--white);
  border: 4px solid var(--white);
  border-radius: 50% 50% 50% 10px;
  box-shadow: 0 0 0 2px var(--t);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 22px;
}

.step>div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
  padding: 18px 24px 20px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--t);
  border-radius: 4px 12px 12px 12px;
  box-shadow: 5px 5px 0 var(--t-tint);
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--t-tint);
  color: var(--t);
  border-radius: 50%;
}

.step-icon svg {
  width: 26px;
  height: 26px;
}

.step h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.step p {
  font-size: 16px;
  line-height: 1.6;
}

/* nota a mano sobre el paso 1 */
.step-note {
  position: absolute;
  top: -50px;
  right: 32px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--red-ink);
  white-space: nowrap;
  transform: rotate(-3deg);
  pointer-events: none;
}

.step-note svg {
  width: 42px;
  height: 29px;
  margin-top: 14px;
}

.step-note path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

/* el hueco (2) es mayor que el trazo (1): al ocultarlo no queda un punto en la punta */

/* progreso de la línea punteada: la anima el script al hacer scroll (sin script queda completa) */
.steps::before {
  clip-path: inset(0 0 calc(100% * (1 - var(--linea, 1))) 0);
}

/* título + subrayado rojo + subtítulo, en la columna izquierda */
/* Marca corta en vez del garabato (el garabato queda para el h1 del banner): la misma raya roja del eyebrow, así no se repite 4 veces por página */
.split-head h2::after,
.page-identidad .section-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 14px;
  background-color: var(--red);
  border-radius: 4px 1px 4px 1px;
}

@media (min-width: 901px) {
  #proceso .split-head {
    position: sticky;
    top: 104px;
  }
}

/* el título acompaña a los pasos mientras se lee la lista */
.split-sub {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

#requisitos .text-link {
  color: var(--blue-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

#requisitos .split-head .btn {
  margin-top: 20px;
}

#requisitos .media-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px 40px;
}

#requisitos .bullets {
  margin-bottom: 0;
}

#requisitos .bullets li {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--card-line);
}

#requisitos .bullets li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#requisitos .bullets li::before {
  top: 0.2em;
}

#requisitos .bullets small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

#requisitos .photo img {
  height: auto;
}

/* el alto del atributo solo reserva espacio; la proporción 4:3 la fija .photo img */
#requisitos .text-link:hover {
  color: var(--navy-dark);
}

.dates {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dates div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-left: 5px solid var(--blue);
  border-radius: 4px 12px 12px 4px;
}

.dates div:nth-child(2) {
  border-left-color: var(--red);
}

.dates div:nth-child(3) {
  border-left-color: var(--navy);
}

.dates dt {
  padding: 16px 22px;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--navy-dark);
  border-right: 2px dashed var(--card-line);
}

.dates dd {
  margin: 0;
  padding: 16px 22px;
}

.dates div:nth-child(1) dt {
  background: var(--blue-tint);
}

.dates div:nth-child(2) dt {
  background: var(--red-tint);
}

/* muescas del boleto, en el corte del talón */
.dates div::before,
.dates div::after {
  content: "";
  position: absolute;
  left: 200px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 50%;
}

.dates div::before {
  top: -9px;
  border-color: transparent var(--card-line) var(--card-line) transparent;
  transform: rotate(45deg);
}

.dates div::after {
  bottom: -9px;
  border-color: var(--card-line) transparent transparent var(--card-line);
  transform: rotate(45deg);
}

#requisitos .bullets li,
#propuesta .bullets li {
  padding-left: 34px;
  margin-bottom: 12px;
}

#requisitos .bullets li::before,
#propuesta .bullets li::before {
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f5a94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 100% no-repeat;
  border: 1.5px solid var(--blue);
  border-radius: 4px 8px 4px 8px;
}

.info-strip {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.info-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
}

.info-list dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.info-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--navy-dark);
}

/* ---------- Actividades ---------- */
.activities {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.activity {
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 16px;
  overflow: hidden;
}

.activity img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-body {
  padding: 20px 22px 24px;
}

.activity h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.activity p {
  font-size: 15px;
  line-height: 1.6;
}

.activity:first-child {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

.activity:first-child img {
  aspect-ratio: 3 / 2;
  height: auto;
}

.activity:not(:first-child) {
  display: grid;
  grid-template-columns: 40% 1fr;
}

.activity:not(:first-child) .activity-body {
  align-self: center;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 28px;
}

/* ---------- Lista de eventos (actividades) ---------- */
.eventos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evento {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 20px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  scroll-margin-top: 108px;
}

.evento:target {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.evento-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 72px;
  padding: 10px 0;
  background: var(--blue-tint);
  color: var(--blue-ink);
  border-radius: 10px;
}

.evento-dia {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}

.evento-mes {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

.evento-titulo {
  font-size: 18px;
  margin-bottom: 4px;
}

.evento-datos {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-ink);
  margin-bottom: 6px;
}

.evento-desc {
  font-size: 15px;
  line-height: 1.55;
}

.evento-vacio {
  padding: 20px 22px;
  border: 1px dashed var(--card-line);
  border-radius: 12px;
  color: var(--muted);
}

/* Color por tipo de evento: los tonos están en styles.css (mismos tipos que el calendario) */
.evento[data-tipo] {
  border-left: 5px solid var(--t);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 4px 4px 0 var(--t-tint);
}

.evento[data-tipo] .evento-fecha {
  background: var(--t-tint);
  color: var(--t-ink);
  border-radius: 4px 14px 4px 14px;
}

.evento[data-tipo] .evento-datos {
  color: var(--t-ink);
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

/* Dirección: correspondencia. La columna de datos es una libreta de direcciones; el formulario, una carta de correo aéreo. */
.contact-boxes {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--navy-dark);
}

.contact-boxes>li {
  border-bottom: 1px dashed var(--card-line);
}

.contact-box {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0 18px;
  align-items: center;
  padding: 18px 4px;
  color: inherit;
}

/* el desplazamiento al pasar el cursor lo hace GSAP en contacto.html */
a.contact-box:hover .contact-box-value {
  color: var(--blue-ink);
}

a.contact-box:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.contact-box-icon {
  width: 44px;
  height: 44px;
  border-radius: 4px 14px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-box-icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.contact-box-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-box-value {
  display: block;
  font-weight: 600;
  color: var(--navy-dark);
  overflow-wrap: anywhere;
}

.contact-box-go {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  color: var(--blue-ink);
  opacity: 0.45;
}

/* Alternativa al formulario: nota a mano + botón de WhatsApp, sobre el tinte verde de la marca */
.wa-card {
  margin-top: 28px;
  padding: 22px 24px 24px;
  background: var(--green-tint);
  border: 1px solid #b9e2c9;
  border-top: 4px solid var(--green);
  border-radius: 4px 14px 14px 14px;
  box-shadow: 5px 5px 0 #cdeadb;
}

.wa-card-note {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--green-ink);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.contact-info .wa-card-title {
  font-size: 20px;
}

.wa-card p {
  margin: 6px 0 16px;
}

.map-section {
  margin-top: 64px;
}

.map-section h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.map-section h2::after {
  content: "";
  flex: 1;
  border-top: 2px dotted var(--card-line);
}

.map-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
}

.map-ref {
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
}

.map-box {
  position: relative;
  aspect-ratio: 16 / 6;
  min-height: 300px;
  background: #d9e0e8;
  border: 1px solid var(--card-line);
  border-top: 6px solid var(--red);
  border-radius: 6px 6px 14px 14px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--navy-tint);
}

.map-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-box .ph-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

/* Cubierta del mapa: el iframe de Google solo se crea al pulsar «Ver mapa» (js/mapa.js) */
.map-cubierta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--bg-soft);
  outline: 2px dotted var(--card-line);
  outline-offset: -12px;
}

.map-cubierta [hidden] {
  display: none !important;
}

.map-cubierta-nota {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--red-ink);
  transform: rotate(-2deg);
}

.map-cubierta-aviso {
  margin: 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.map-cubierta .btn {
  margin-top: 4px;
}

/* ---------- Formulario ---------- */
.form {
  position: relative;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-radius: 6px 6px 14px 14px;
  padding: 44px 32px 32px;
  box-shadow: 6px 6px 0 var(--navy-tint);
  overflow: hidden;
}

.form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--white) 14px 22px, var(--blue) 22px 36px, var(--white) 36px 44px);
}

.form h2 {
  font-size: 28px;
  margin-bottom: 4px;
}

.form-intro {
  color: var(--muted);
  margin-bottom: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-dark);
  margin-bottom: 6px;
}

.field .req,
.form-intro .req,
.field-check .req {
  color: var(--red-ink);
}

.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--white);
  color: var(--text);
  border: 1px solid #6b7f93;
  border-radius: 4px 10px 10px 10px;
  font: 16px var(--font-body);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  background-color: var(--bg-soft);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475a6e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}

.field select:invalid {
  color: var(--muted);
}

/* mientras no se elija nada, se lee como texto de ayuda */
.field select option {
  color: var(--text);
}

.field-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  margin-bottom: 22px;
}

.field-check input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

.field-check label {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.field-check a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* campo trampa anti-spam: las personas no lo ven */
.form-msg {
  display: none;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid;
  font-weight: 600;
}

.form-msg.is-visible {
  display: block;
}

/* Enviado: nota de papel pegada con cinta verde, con el título a mano. Error: la misma forma, en rosado, sin cinta. */
.form-msg {
  border-radius: 4px 14px 14px 14px;
}

.form-msg:focus,
.form-msg:focus-visible {
  outline: 0;
}

/* el script lo enfoca para que el lector de pantalla lo anuncie; no es un control, así que no lleva anillo */
.form-msg-ok {
  position: relative;
  margin-top: 16px;
  background: var(--paper);
  border-color: var(--paper-line);
  color: var(--navy-dark);
  box-shadow: 4px 4px 0 var(--green-tint);
  transform: rotate(-0.5deg);
}

.form-msg-ok::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 26px;
  width: 84px;
  height: 22px;
  background: rgba(31, 157, 85, 0.45);
  transform: rotate(-3deg);
  pointer-events: none;
}

.form-msg-nota {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--green-ink);
}

.form-msg-error {
  background: var(--red-tint);
  border-color: var(--red-ink);
  color: #8f0a27;
}

.form .btn {
  width: 100%;
}

.form .btn:disabled {
  opacity: 0.75;
  cursor: progress;
}

/* ---------- Política de privacidad ---------- */
.doc {
  max-width: 760px;
}

.doc h2 {
  font-size: 22px;
  margin: 2em 0 0.6em;
}

.doc h2:first-of-type {
  margin-top: 0;
}

.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.7;
}

.doc p {
  margin-bottom: 1em;
}

.doc ul {
  margin: 0 0 1em;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {

  .wrap,
  .page-banner-inner,
  .cta-band-inner,
  .info-strip-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-banner-inner {
    padding-top: 32px;
    padding-bottom: 52px;
  }

  .page-banner::before,
  .stage-banner::before {
    width: 190px;
    height: 194px;
    right: -40px;
    bottom: -60px;
  }

  .page-banner::after,
  .stage-banner::after {
    height: 23px;
  }

  .page-banner h1::after,
  .stage-banner h1::after {
    width: 110px;
    height: 10px;
    margin-top: 8px;
  }

  .cta-band::before {
    left: auto;
    right: -50px;
    top: -50px;
    width: 190px;
    height: 194px;
  }

  .has-star::before {
    right: -70px;
    top: -40px;
    width: 200px;
    height: 204px;
  }

  .panel::after {
    width: 120px;
    height: 122px;
  }

  .page-banner .lead {
    font-size: 16px;
  }

  .stage-banner {
    grid-template-columns: 1fr;
  }

  .stage-banner .page-banner-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .stage-banner::before {
    display: none;
  }

  .stage-banner-photo {
    min-height: 0;
    height: 190px;
    clip-path: none;
  }

  .section {
    padding: 44px 0;
  }

  .section h2 {
    font-size: 24px;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .media-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .photo {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .photo::before {
    transform: translate(10px, 10px);
  }

  .mv-grid,
  .platforms,
  .contact-grid,
  .activities {
    grid-template-columns: 1fr;
  }

  .platform-main {
    grid-template-columns: 1fr;
  }

  .platform-main .platform-go {
    margin-top: 20px;
  }

  .platform {
    padding: 54px 22px 24px;
  }

  .platform-main {
    padding-top: 60px;
  }

  .platform-go {
    width: 100%;
  }

  #ayuda .split-head {
    margin-bottom: 6px;
  }

  .ladder {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .ladder li {
    flex: 1 1 28%;
    min-width: 0;
    min-height: 84px;
    padding: 12px 10px 14px;
  }

  .ladder-name {
    font-size: 13px;
  }

  .ladder-group {
    flex: 1 1 100%;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 130px;
  }

  .gallery figure:first-child,
  .gallery figure.g-wide {
    grid-column: span 2;
    grid-row: span 2;
  }

  .cta-band-inner {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .cta-band h2 {
    font-size: 24px;
  }

  .cta-band .btn-row,
  .info-strip .btn {
    width: 100%;
  }

  .cta-band .btn {
    width: 100%;
  }

  .step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding: 20px;
  }

  .step::before {
    font-size: 34px;
  }

  .dates div {
    grid-template-columns: 1fr;
  }

  .dates div::before,
  .dates div::after {
    display: none;
  }

  .dates dt {
    padding: 12px 16px;
    border-right: 0;
    border-radius: 0 11px 0 0;
  }

  .dates dd {
    padding: 12px 16px 14px;
  }

  .steps::before {
    left: 21px;
  }

  .step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 14px;
  }

  .step::before {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .step>div {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px 16px 16px;
  }

  .step-icon {
    width: 40px;
    height: 40px;
  }

  .step-icon svg {
    width: 20px;
    height: 20px;
  }

  .step h3 {
    font-size: 18px;
  }

  .info-strip-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .activity:first-child {
    grid-row: auto;
  }

  .activity:not(:first-child) {
    grid-template-columns: 1fr;
  }

  .activity:not(:first-child) img {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .evento {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 0 14px;
    padding: 16px;
  }

  .evento-fecha {
    width: 60px;
  }

  .evento-dia {
    font-size: 24px;
  }


  .contact-grid {
    gap: 36px;
  }

  .contact-grid .form {
    order: -1;
  }

  /* en pantallas pequeñas el formulario va primero, antes de los datos */
  .map-section {
    margin-top: 44px;
  }

  .map-box {
    aspect-ratio: auto;
    min-height: 0;
    height: 300px;
  }

  .map-cubierta {
    gap: 8px;
    padding: 16px;
  }

  .map-cubierta-nota {
    font-size: 26px;
  }

  .map-cubierta-aviso {
    font-size: 14px;
    line-height: 1.5;
  }

  .map-bar {
    margin-top: 22px;
  }

  .map-bar .btn {
    width: 100%;
  }

  .form {
    padding: 22px 18px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #requisitos .media-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .steps {
    margin-top: 30px;
  }

  /* espacio para la nota a mano sobre el paso 1 */
  .step-note {
    right: 14px;
    font-size: 25px;
  }
}

@media (max-width: 560px) {
  #requisitos .split-head .btn {
    width: 100%;
  }

  .step>div {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {

  .wrap,
  .page-banner-inner,
  .cta-band-inner,
  .info-strip-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---------- Identidad, actividades y privacidad: mismo lenguaje de papelería ---------- */
.panel {
  border-top: 6px solid var(--blue);
  border-radius: 4px 18px 4px 18px;
  box-shadow: 6px 6px 0 var(--blue-tint);
}

.panel-red {
  box-shadow: 6px 6px 0 var(--red-tint);
}

.panel h3 {
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel h3::after {
  content: "";
  flex: 1;
  border-top: 2px dotted var(--card-line);
}



.activity {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
  border-top: 6px solid var(--t);
  border-radius: 4px 16px 4px 16px;
  box-shadow: 6px 6px 0 var(--t-tint);
}

.activity:nth-child(2) {
  --t: var(--red);
  --t-tint: var(--red-tint);
}

.activity:nth-child(3) {
  --t: var(--navy);
  --t-tint: var(--navy-tint);
}

.activity {
  --t-ink: var(--blue-ink);
}

.activity:nth-child(2) {
  --t-ink: var(--red-ink);
}

.activity:nth-child(3) {
  --t-ink: var(--navy-dark);
}

/* Próxima fecha de la actividad: una mini hoja de calendario (la del banner, en pequeño) con el color de su tarjeta.
   Es un enlace al evento en el calendario. js/actividades-prox.js la rellena; si ya pasó la fecha, queda en gris. */
.activity-prox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dotted var(--card-line);
  color: var(--navy-dark);
  text-decoration: none;
}

.activity-prox[hidden] {
  display: none;
}

.activity-prox:focus-visible {
  outline: 3px solid var(--t);
  outline-offset: 4px;
  border-radius: 4px;
}

.activity-prox-fecha {
  flex: 0 0 auto;
  width: 52px;
  overflow: hidden;
  text-align: center;
  background: var(--white);
  border: 2px solid var(--t);
  border-radius: 4px 12px 4px 12px;
  transform: rotate(-3deg);
}

.activity:nth-child(2) .activity-prox-fecha {
  transform: rotate(2deg);
}

.activity-prox-fecha>span {
  display: block;
  padding: 3px 0 2px;
  background: var(--t);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.activity-prox-fecha b {
  display: block;
  padding: 3px 0 4px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
}

.activity-prox-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-prox-nota {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  color: var(--t-ink);
}

.activity-prox-texto strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
}

.activity-prox-texto small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
}

.activity-prox-texto small:empty {
  display: none;
}

.activity-prox>.icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  color: var(--t-ink);
}

.activity-prox.es-pasada .activity-prox-fecha {
  border-color: var(--slate-edge);
}

.activity-prox.es-pasada .activity-prox-fecha>span {
  background: var(--slate-tint);
  color: var(--slate-deep);
}

.activity-prox.es-pasada .activity-prox-fecha b {
  color: var(--slate-deep);
}

.activity-prox.es-pasada .activity-prox-nota {
  color: var(--muted);
}

.activity-prox.es-pasada>.icon {
  color: var(--muted);
}

/* Privacidad: lectura cómoda y sobria */
.doc {
  counter-reset: none;
}

.doc h2 {
  padding-left: 14px;
  border-left: 4px solid var(--navy);
  font-size: 21px;
}

.doc p,
.doc li {
  max-width: 68ch;
}

@media (max-width: 380px) {
  .ladder li {
    padding: 12px 8px 14px;
  }

  .ladder-name {
    font-size: 12px;
  }
}

/* ---------- Etapas: cuaderno con separadores ---------- */
/* Dirección: cuaderno de etapa. Cada nivel es una pestaña de color (azul · azul oscuro · rojo, como en la portada)
   que asoma sobre la línea del cuaderno; su color y su número recorren toda la página. */
.lv-1 {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
  --t-ink: var(--blue-ink);
  --t-bright: #3d9be0;
}

.lv-2 {
  --t: var(--navy);
  --t-tint: var(--navy-tint);
  --t-ink: var(--navy-dark);
  --t-bright: #6f8fd0;
}

.lv-3 {
  --t: var(--red);
  --t-tint: var(--red-tint);
  --t-ink: var(--red-ink);
  --t-bright: var(--red);
}

/* --t-bright: el color de la etapa sobre el azul oscuro del banner */

.stage-count {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--on-navy);
}

.stage-count-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--t);
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 8px;
  font-family: var(--font-title);
  font-size: 18px;
  transform: rotate(-6deg);
}

/* recorrido: una marca por etapa, llenas hasta la actual */
.stage-ticks {
  display: flex;
  gap: 5px;
  margin-left: 2px;
}

.stage-ticks i {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

.stage-ticks i.on {
  background: var(--white);
}

/* Un filo del color de la etapa asoma junto a la diagonal de la foto */
.stage-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 45%;
  height: auto;
  opacity: 1;
  pointer-events: none;
  background: var(--t-bright);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  transform: translateX(-16px);
}

/* Pestañas entre etapas: son enlaces a las otras páginas, no hay script. No se fijan al bajar:
   el encabezado ya es fijo y una segunda barra le quitaría pantalla al contenido. */
.level-tabs {
  position: relative;
  margin-top: -1px;
  padding-top: 20px;
  background: var(--white);
}

/* Las tres etapas son botones de contorno oscuro con sombra dura, sin filos de color (eso ya lo usan otras tarjetas del sitio).
   Las tres comparten la misma caja, contorno y sombra. El color vive en el sello de cada etapa; las que llevan a otra
   página tienen flecha y, al pasar el mouse, se tiñen de su color claro; la actual se llena entera y no tiene flecha. */
.level-tabs ul {
  display: flex;
  gap: 18px;
  padding-bottom: 6px;
}

.level-tab {
  flex: 1 1 0;
  min-width: 0;
}

.level-tab a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px 14px 14px;
  background: var(--white);
  color: var(--navy-dark);
  border: 2px solid var(--navy-dark);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy-dark);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
}

.level-tab a:not([aria-current]):hover {
  background: var(--t-tint);
}

.level-tab a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.level-tab a .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  stroke-width: 2.4;
  color: var(--navy-dark);
}

.level-tab-n {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--t);
  color: var(--white);
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-6deg);
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
}

.level-tab a[aria-current] {
  background: var(--t);
  color: var(--white);
  font-weight: 700;
  cursor: default;
}

.level-tab a[aria-current] .level-tab-n {
  background: var(--white);
  color: var(--t-ink);
}

.t-short {
  display: none;
}

/* Ficha de la etapa (grados, edades, jornada): tarjetas bajo el título */
.stage-facts {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.stage-facts>div {
  padding: 12px 16px 14px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-left: 5px solid var(--t);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 4px 4px 0 var(--t-tint);
}

.stage-facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink);
}

.stage-facts dd {
  margin: 3px 0 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy-dark);
}

.stage-head {
  margin-bottom: 32px;
}

/* Propuesta formativa: tarjetas numeradas y planas (sin sombra desplazada); las de la derecha bajan un poco para romper la cuadrícula */
.enfoques {
  counter-reset: enfoque;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 8px;
  padding-bottom: 24px;
}

.enfoques li {
  counter-increment: enfoque;
  align-self: start;
  padding: 18px 22px 22px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--t);
  border-radius: 4px 14px 4px 14px;
}

.enfoques li:nth-child(even) {
  margin-top: 24px;
}

.enfoques li::before {
  content: counter(enfoque, decimal-leading-zero);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--red-ink);
}

.enfoques strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy-dark);
}

.enfoques p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Matrícula: mismas fechas-boleto de admisiones, con el enlace al proceso completo */
#matricula .link-arrow {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .stage-count {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .stage-count-num {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .stage-ticks i {
    width: 18px;
  }

  .level-tabs {
    padding-top: 14px;
  }

  .stage-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }

  .stage-facts>div:first-child {
    grid-column: 1 / -1;
  }

  .stage-head {
    margin-bottom: 24px;
  }

  .enfoques {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 0;
  }

  .enfoques li:nth-child(even) {
    margin-top: 0;
  }

  #matricula .link-arrow {
    margin-top: 10px;
  }

  .ladder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  /* peldaños del mismo ancho en todas las filas */
  .ladder li {
    max-width: none;
  }

  .ladder:has(li:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 4 peldaños en una fila, sin uno huérfano abajo */
  .ladder:has(li:nth-child(4):last-child) li {
    padding-left: 8px;
    padding-right: 8px;
  }

  .ladder-group {
    flex: 1 1 100%;
  }

  /* El botón flotante de WhatsApp, más pequeño para no tapar el texto */
  .page-nivel .whatsapp {
    height: 48px;
    right: 14px;
    bottom: 14px;
  }

  .page-nivel .whatsapp-icon {
    width: 48px;
    height: 48px;
    padding: 11px;
  }
}

@media (max-width: 760px) {

  /* Tarjetas en una sola fila: el sello arriba y el nombre corto debajo, centrados; la flecha sobra */
  .level-tabs ul {
    gap: 10px;
  }

  .level-tab a {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px 12px;
    text-align: center;
    font-size: 13.5px;
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--navy-dark);
  }

  .level-tab a .icon {
    display: none;
  }

  .level-tab-n {
    flex-basis: auto;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .t-long {
    display: none;
  }

  .t-short {
    display: inline;
  }
}

@media (max-width: 420px) {
  .level-tab a {
    font-size: 12.5px;
  }

  .level-tab-n {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

/* Nota a mano junto a la escalera (solo Preescolar, que tiene pocos peldaños): llena el hueco sin inventar datos */
/* Nota a mano de Preescolar: va sobre el primer peldaño (Infants) y la flecha baja hasta su borde superior */
.ladder li:has(> .ladder-note) {
  position: relative;
}

.ladder-note {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--red-ink);
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left bottom;
  pointer-events: none;
}

.ladder-note svg {
  width: 30px;
  height: 40px;
  margin: 2px 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ladder-groups:has(.ladder-note) {
  margin-top: 68px;
}

/* sitio para la nota sobre la escalera */
@media (max-width: 900px) {
  .ladder-note {
    display: none;
  }

  .ladder-groups:has(.ladder-note) {
    margin-top: 0;
  }
}

/* ---------- Identidad ---------- */
/* Índice de la página, como el de un cuaderno: una sola tinta, número a mano en rojo y separadores punteados.
   Un solo trazo rojo sobre la regla navy se desliza hasta la sección que se lee (lo mueve identidad.js; sin script no hay trazo).
   Queda fijo bajo el encabezado, en una sola línea delgada. En pantallas pequeñas la tira se desliza. */
.page-identidad {
  --idx-h: 55px;
}

.page-identidad main [id] {
  scroll-margin-top: calc(var(--header-h, 85px) + var(--idx-h) + 16px);
}

.id-index {
  position: sticky;
  top: var(--header-h, 85px);
  z-index: 40;
  background: var(--white);
}

.id-index-scroll {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -3px 0 var(--navy-dark);
}

.id-index-scroll::-webkit-scrollbar {
  display: none;
}

.id-index ul {
  display: flex;
  padding-bottom: 3px;
}

.id-index li {
  flex: 0 0 auto;
  margin: 8px 0;
}

.id-index li+li {
  border-left: 2px dotted var(--card-line);
}

.id-index a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 20px;
  white-space: nowrap;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--navy-dark);
}

.id-index li:first-child a {
  padding-left: 0;
}

.id-index a:hover {
  color: var(--blue);
}

.id-index a:focus-visible {
  outline-offset: -3px;
}

.id-index-n {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--red-ink);
}

.id-index-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  display: none;
}

.id-index.is-ready .id-index-mark {
  display: block;
}

.page-identidad .section-head h2::after {
  margin-top: 10px;
}

/* Misión y visión: la visión baja un poco y cada panel lleva una nota a mano */
/* Misión y visión: dos tarjetas claras iguales, cada una con un icono del color de su borde superior */
.panel-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--blue-tint);
  color: var(--blue-ink);
  border-radius: 4px 14px 4px 14px;
}

.panel-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mv-grid .panel-red {
  border-top-color: var(--red);
}

/* antes una regla posterior lo dejaba azul aunque su sombra es rosada */
.panel-red .panel-ico {
  background: var(--red-tint);
  color: var(--red-ink);
}

/* Letra capital: solo una en toda la página, en el texto de apertura de la filosofía. Con más se vuelve pesado de leer. */
.split-fil .prose p:first-child::first-letter {
  float: left;
  margin: 0.06em 0 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.3em;
  line-height: 0.8;
  color: var(--red);
}

.mv-grid {
  align-items: stretch;
}

/* los textos son largos: las dos tarjetas crecen y quedan del mismo alto */

/* Reseña histórica. Sin cajas ni barras de color: la jerarquía la da la tipografía (subtítulo grande en Fraunces, primer párrafo como apertura,
   títulos en Fraunces) y el espacio. El cierre es una hoja de cuaderno con renglones y margen rojo, como la de los banners.
   Móvil: una columna; un hilo fino con un punto rojo acompaña la historia y la foto interrumpe el texto después del primer párrafo. */
#resena .resena-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

#resena .resena-prose p,
#resena .resena-hoy p {
  font-size: 16px;
  line-height: 1.62;
  margin-bottom: 0.85em;
  text-wrap: pretty;
  hyphens: manual;
}

#resena .resena-prose p:last-child,
#resena .resena-hoy p:last-child {
  margin-bottom: 0;
}

#resena .resena-prose h3,
#resena .resena-hoy h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#resena .resena-hoy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

#resena .resena-bloque-1 {
  position: relative;
  padding-left: 20px;
}

#resena .resena-bloque-1::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--card-line);
  border-radius: 2px;
}

#resena .resena-bloque-1>h3 {
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red-ink);
}

#resena .resena-bloque-1>h3::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0.2em;
  width: 10px;
  height: 10px;
  background: var(--red);
  border: 2px solid var(--white);
  box-sizing: content-box;
  border-radius: 50%;
}

#resena .resena-prose .resena-sub {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy-dark);
  text-wrap: balance;
}

#resena .resena-prose .resena-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-dark);
}

#resena .resena-bloque-1 .photo {
  width: 100%;
  max-width: 440px;
  margin: 28px 14px 14px 0;
}

#resena .photo img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
}

/* foto panorámica 1330×757: se muestra completa, con su proporción, sin recortar */
#resena .resena-cols {
  margin-top: 28px;
}

#resena .resena-hoy {
  padding-top: 32px;
  border-top: 2px dotted var(--card-line);
}

#resena .resena-hoy .resena-bloque+.resena-lado {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 2px dotted var(--card-line);
}

#resena .resena-lado .resena-bloque+.resena-cierre {
  margin-top: 36px;
}

/* Hoja de cuaderno: renglones cada 38px (el texto en Caveat usa ese mismo interlineado), margen rojo y dos perforaciones */
#resena .resena-cierre {
  position: relative;
  padding: 14px 18px 8px 56px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(16, 99, 158, 0.22) 37px 38px);
  background-position: 0 14px;
  background-size: 100% calc(100% - 14px);
  background-repeat: no-repeat;
  border-radius: 2px;
  box-shadow: 0 16px 24px -16px rgba(21, 42, 69, 0.45);
}

#resena .resena-cierre::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(221, 13, 58, 0.5);
}

#resena .resena-cierre::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  bottom: 18px;
  width: 12px;
  background: radial-gradient(circle 5px at 6px 50%, var(--white) 68%, var(--paper-line) 72% 96%, transparent 98%) 0 0 / 12px 76px repeat-y;
}

#resena .resena-hoy .resena-cierre p {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  line-height: 38px;
}

#resena .resena-hoy .resena-cierre .resena-cierre-nombre {
  font-size: 29px;
  color: var(--red-ink);
}

#resena .resena-hoy .resena-cierre .resena-cierre-frase {
  font-size: 25px;
  color: var(--navy-dark);
}

@media (min-width: 1000px) {
  #resena .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  #resena .split-head {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 0 56px;
    align-items: center;
  }

  #resena .stage-facts {
    grid-template-columns: 0.8fr 1.25fr 1.45fr;
    margin-top: 0;
  }

  #resena .resena-row {
    gap: 48px;
  }

  #resena .resena-prose p,
  #resena .resena-hoy p {
    font-size: 16.5px;
  }

  #resena .resena-bloque-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 72px;
    align-items: start;
    padding-left: 0;
  }

  #resena .resena-bloque-1::before {
    display: none;
  }

  #resena .resena-bloque-1>h3 {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #resena .resena-bloque-1>h3::before {
    position: static;
    flex: none;
    width: 28px;
    height: 4px;
    border: 0;
    border-radius: 4px 1px 4px 1px;
  }

  /* la misma raya roja de los subrayados de los h2 */
  #resena .resena-bloque-1>h3,
  #resena .resena-bloque-1>.resena-sub,
  #resena .resena-bloque-1>.resena-lead {
    grid-column: 1;
  }

  #resena .resena-prose .resena-sub {
    margin-bottom: 22px;
    font-size: 36px;
    line-height: 1.2;
  }

  #resena .resena-prose .resena-lead {
    font-size: 19px;
    line-height: 1.65;
  }

  #resena .resena-bloque-1 .photo {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0 14px 14px 0;
    max-width: none;
  }

  #resena .resena-cols {
    grid-column: 1 / -1;
    margin-top: 40px;
    padding-top: 34px;
    border-top: 2px dotted var(--card-line);
    columns: 2;
    column-gap: 72px;
    column-rule: 2px dotted var(--card-line);
  }

  #resena .resena-cols p {
    break-inside: avoid;
  }

  #resena .resena-hoy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    padding-top: 44px;
  }

  #resena .resena-hoy h3 {
    margin-bottom: 16px;
    font-size: 28px;
  }

  #resena .resena-hoy>.resena-bloque {
    padding-right: 36px;
  }

  #resena .resena-hoy .resena-bloque+.resena-lado {
    margin-top: 0;
    padding: 0 0 0 36px;
    border-top: 0;
    border-left: 2px dotted var(--card-line);
  }

  #resena .resena-cierre {
    padding: 16px 24px 10px 66px;
    transform: rotate(-1.2deg);
    transform-origin: left center;
  }

  #resena .resena-cierre::before {
    left: 50px;
  }

  #resena .resena-cierre::after {
    left: 16px;
  }

  #resena .resena-hoy .resena-cierre .resena-cierre-nombre {
    font-size: 32px;
  }

  #resena .resena-hoy .resena-cierre .resena-cierre-frase {
    font-size: 27px;
  }
}

/* Filosofía y valores: título + texto a la izquierda, tarjetas a la derecha. Un color por tarjeta (--t). */
.t-red {
  --t: var(--red);
  --t-tint: var(--red-tint);
  --t-ink: var(--red-ink);
}

.t-blue {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
  --t-ink: var(--blue-ink);
}

.t-navy {
  --t: var(--navy-dark);
  --t-tint: var(--navy-tint);
  --t-ink: var(--navy-dark);
}

.split-fil {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px 48px;
}

.split-val {
  margin-top: 72px;
}

.split-fil .split-head h2 {
  font-weight: 700;
  color: var(--navy-dark);
}

.split-fil .prose {
  margin-top: 22px;
}

.fil-cards,
.val-cards {
  display: grid;
  align-items: stretch;
}

.fil-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.val-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}

/* cinco valores: 3 arriba y 2 más anchas abajo */
.val-card {
  grid-column: span 2;
}

.val-card:nth-child(n+4) {
  grid-column: span 3;
}

.fil-card {
  padding: 22px 20px 24px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-bottom: 5px solid var(--t);
  border-radius: 0 22px 0 22px;
  box-shadow: 4px 4px 0 var(--t-tint);
}

.fil-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  background: var(--t-tint);
  color: var(--t-ink);
  border-radius: 4px 14px 4px 14px;
}

.fil-ico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fil-card h3 {
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--navy-dark);
}

.fil-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* Escritorio: el texto de la izquierda es largo y las tres tarjetas en fila dejaban un hueco enorme debajo. Se apilan con el icono al lado y la segunda sangrada, como una escalera. */
@media (min-width: 901px) {
  .fil-cards {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 22px;
  }

  .fil-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
    padding: 22px 26px 24px 22px;
  }

  .fil-card .fil-ico {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .fil-card h3 {
    align-self: end;
    margin-bottom: 6px;
  }

  .fil-card:nth-child(2) {
    margin-left: 28px;
  }
}

.val-card {
  padding: 16px 18px 20px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 4px solid var(--t);
  border-radius: 4px 14px 4px 14px;
  box-shadow: 3px 3px 0 var(--t-tint);
}

.val-n {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--t-ink);
}

.val-card strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--navy-dark);
}

.val-card p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 900px) {
  .split-fil {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .split-val {
    margin-top: 48px;
  }
}

@media (max-width: 720px) {

  .fil-cards,
  .val-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .val-card,
  .val-card:nth-child(n+4) {
    grid-column: auto;
  }
}

#modelo .split-head h2 {
  font-size: 24px;
}

/* el título nuevo es largo */

/* Las ocho inteligencias */
.intel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.intel-grid li {
  --c: var(--blue);
  --c-tint: var(--blue-tint);
  --c-ink: var(--blue-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-bottom: 3px solid var(--c);
  border-radius: 4px 14px 4px 14px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: var(--navy-dark);
}

.intel-grid li:nth-child(3n+2) {
  --c: var(--red);
  --c-tint: var(--red-tint);
  --c-ink: var(--red-ink);
}

.intel-grid li:nth-child(3n) {
  --c: var(--navy);
  --c-tint: var(--navy-tint);
  --c-ink: var(--navy-dark);
}

.intel-grid li:nth-child(even) {
  margin-top: 10px;
}

.intel-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--c-tint);
  color: var(--c-ink);
  border-radius: 4px 14px 4px 14px;
}

.intel-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Símbolos institucionales: tres tarjetas del mismo alto (grid). Cada una: panel de imagen, fila icono + título, texto.
   El himno lleva un pentagrama dibujado donde las otras llevan imagen. Imágenes siempre con object-fit: contain (sin recortar ni estirar). */
.section-head-sym {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px 28px;
  margin-bottom: 36px;
}

.page-identidad .section-head-sym h2 {
  flex: none;
  font-weight: 700;
}

.section-sub {
  flex: 0 1 440px;
  min-width: 0;
  padding-left: 28px;
  border-left: 2px solid var(--red);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}

.symbols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.symbol {
  --t: var(--blue);
  --t-tint: var(--blue-tint);
  --t-ink: var(--blue-ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 16px 16px 24px;
  background: var(--white);
  border: 1px solid var(--card-line);
  border-top: 5px solid var(--t);
  border-radius: 0 22px 0 22px;
  box-shadow: 4px 4px 0 var(--t-tint);
}

.symbol:nth-child(2) {
  --t: var(--red);
  --t-tint: var(--red-tint);
  --t-ink: var(--red-ink);
}

.symbol:nth-child(3) {
  --t: var(--navy-dark);
  --t-tint: var(--navy-tint);
  --t-ink: var(--navy-dark);
}

.symbol-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: 16px;
}

.symbol-media>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.symbol-media-logo>img {
  position: absolute;
  inset: 10% 12% 24% 12%;
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 66%;
  margin: auto;
}

.symbol-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 22%;
}

.wave-red {
  fill: var(--red);
}

.wave-navy {
  fill: var(--navy-dark);
}

.symbol-media-bandera {
  background: var(--navy-dark);
}

.symbol-media-himno {
  background: var(--navy-dark);
  color: var(--blue-edge);
}

.symbol-media-himno svg {
  width: 78%;
  height: auto;
}

.symbol-media-himno .staff {
  stroke-width: 1.4;
  opacity: .4;
}

.symbol-media-himno .notes {
  color: var(--white);
  fill: var(--white);
}

.symbol-media-himno .notes path {
  stroke: var(--white);
  stroke-width: 2.4;
}

.symbol-media-himno .notes .beam {
  stroke-width: 4;
}

.symbol-media-himno .notes ellipse {
  stroke: none;
}

.symbol-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 0 4px;
}

.symbol-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.symbol-title svg {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--t-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.symbol-title h3 {
  padding-left: 12px;
  border-left: 2px solid var(--red);
  font-size: 18px;
  line-height: 1.2;
}

.symbol-body p {
  font-size: 16px;
  line-height: 1.6;
}

.symbol-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--blue-tint);
  border-radius: 14px;
}

.symbol-note p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-dark);
}

.symbol-note strong {
  font-weight: 700;
}

/* Escritorio: fila de título de 3 líneas común, para que los párrafos arranquen a la misma altura */
@media (min-width: 960px) {
  .symbol-title {
    min-height: calc(3 * 1.2 * 18px);
  }
}

@media (max-width: 959px) {
  .symbols {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 719px) {
  .section-head-sym {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 28px;
  }

  .section-sub {
    flex: none;
    max-width: none;
    padding-left: 0;
    border-left: 0;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .id-index-scroll {
    margin: 0 -20px;
    padding: 0 20px;
  }

  .id-index .wrap {
    position: relative;
  }

  .id-index .wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 3px;
    width: 36px;
    background: linear-gradient(to left, var(--white), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  /* pista de que la tira sigue a la derecha */
  .id-index.is-end .wrap::after {
    display: none;
  }

  .intel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intel-grid {
    gap: 10px;
  }

  .intel-grid li:nth-child(even) {
    margin-top: 0;
  }

  .intel-grid li {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
  }

  /* icono al lado del nombre: ocho tarjetas más bajas */
  .intel-ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }

  .intel-ico svg {
    width: 21px;
    height: 21px;
  }

  .page-identidad .whatsapp {
    height: 48px;
    right: 14px;
    bottom: 14px;
  }

  .page-identidad .whatsapp-icon {
    width: 48px;
    height: 48px;
    padding: 11px;
  }
}

@media (max-width: 760px) {
  .id-index a {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14px;
  }
}

/* ---------- Vida escolar: actividades y calendario ---------- */
/* Hoja de calendario pegada al banner: es el enlace al calendario escolar. Muescas de hoja arrancada arriba,
   banda roja con el mes, la fecha grande y la nota a mano. js/hoja-proxima.js la rellena con la próxima fecha. */
.hoja-prox {
  position: relative;
  display: block;
  width: 268px;
  margin-top: 28px;
  background: var(--white);
  color: var(--navy-dark);
  border-radius: 4px 16px 4px 16px;
  box-shadow: 6px 6px 0 var(--blue);
  transform: rotate(-2.5deg);
}

.hoja-prox::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 40px;
  width: 14px;
  height: 14px;
  background: var(--navy-dark);
  border-radius: 50%;
  box-shadow: 174px 0 0 var(--navy-dark);
}

.hoja-prox:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 6px;
}

.hoja-prox-banda {
  display: block;
  padding: 15px 18px 10px;
  background: var(--red);
  color: var(--white);
  border-radius: 4px 16px 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hoja-prox-cuerpo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 12px;
}

.hoja-prox-dia {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  color: var(--navy-dark);
}

.hoja-prox-dia svg {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  fill: none;
  stroke: var(--red-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hoja-prox-texto {
  min-width: 0;
}

.hoja-prox-nota {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  color: var(--red-ink);
}

.hoja-prox-texto strong {
  display: block;
  margin-top: 3px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.hoja-prox-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 18px;
  padding: 10px 0 14px;
  border-top: 2px dotted var(--card-line);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

.hoja-prox-pie .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

@media (min-width: 1100px) {
  .hoja-prox {
    position: absolute;
    top: 112px;
    right: 56px;
    margin-top: 0;
  }

  /* a la derecha del título, sobre la estrella del banner */
}

@media (max-width: 900px) {
  .hoja-prox {
    margin-top: 24px;
    margin-left: 4px;
  }
}

.evento-cuerpo .date-state {
  margin: 2px 0 8px;
}



/* ---------- Página no encontrada (404) ----------
   Una hoja de cuaderno: renglones suaves, margen rojo y perforaciones. El "0" del 404 es la estrella del logo. */
.lost {
  padding: 72px 0 96px;
  background: var(--bg-soft);
}

.lost-inner {
  width: min(1040px, 100% - 112px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 48px 64px;
  align-items: start;
}

.sheet {
  position: relative;
  padding: 44px 48px 52px 104px;
  background: var(--white) repeating-linear-gradient(to bottom, transparent 0 33px, #e3ecf4 33px 34px);
  border: 1px solid var(--card-line);
  border-radius: 6px 40px 6px 40px;
  box-shadow: 14px 14px 0 var(--blue-wash);
}

.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 76px;
  border-left: 2px solid rgba(221, 13, 58, 0.32);
}

.sheet::after {
  /* perforaciones del cuaderno */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20px 64px, var(--bg-soft) 8px, rgba(21, 42, 69, 0.12) 9px, transparent 10px),
    radial-gradient(circle at 20px 50%, var(--bg-soft) 8px, rgba(21, 42, 69, 0.12) 9px, transparent 10px),
    radial-gradient(circle at 20px calc(100% - 64px), var(--bg-soft) 8px, rgba(21, 42, 69, 0.12) 9px, transparent 10px);
}

.sheet-number {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(110px, 15vw, 164px);
  line-height: 0.9;
  color: var(--blue);
}

.sheet-zero {
  width: 0.72em;
  height: auto;
  flex: none;
  margin: 0 0 0 0.16em;
}

/* el trazo del primer 4 se pasa de su caja: el margen evita que toque la estrella */
.sheet-number span:last-child {
  margin-left: -0.1em;
}

.sheet h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  max-width: 460px;
}

.sheet h1::after {
  content: "";
  display: block;
  width: 130px;
  height: 12px;
  margin-top: 8px;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 16' fill='none'%3E%3Cpath d='M4 10 C 100 3, 230 3, 376 9' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 16' fill='none'%3E%3Cpath d='M4 10 C 100 3, 230 3, 376 9' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}

.sheet-text {
  max-width: 460px;
  margin: 18px 0 28px;
  font-size: 17px;
  line-height: 1.65;
}

.lost-links {
  padding-top: 10px;
}

.lost-links-title {
  margin-bottom: 8px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--navy-dark);
}

.lost-links ul {
  border-top: 1px dashed var(--card-line);
}

.lost-links li {
  border-bottom: 1px dashed var(--card-line);
}

.lost-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  font-weight: 700;
  color: var(--navy-dark);
}

.lost-links a:hover {
  color: var(--blue);
}

.lost-links .icon {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
  color: var(--red);
}

@media (max-width: 900px) {
  .lost {
    padding: 48px 0 64px;
  }

  .lost-inner {
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .sheet {
    margin-right: 10px;
    padding: 32px 22px 40px 64px;
    border-radius: 6px 28px 6px 28px;
    box-shadow: 10px 10px 0 var(--blue-wash);
  }

  .sheet::before {
    left: 44px;
  }

  .sheet::after {
    width: 28px;
    background:
      radial-gradient(circle at 14px 48px, var(--bg-soft) 6px, rgba(21, 42, 69, 0.12) 7px, transparent 8px),
      radial-gradient(circle at 14px 50%, var(--bg-soft) 6px, rgba(21, 42, 69, 0.12) 7px, transparent 8px),
      radial-gradient(circle at 14px calc(100% - 48px), var(--bg-soft) 6px, rgba(21, 42, 69, 0.12) 7px, transparent 8px);
  }

  .sheet .btn-row .btn {
    width: 100%;
  }
}

/* Notas a mano animadas (js/manuscrito.js): el texto pasa a SVG con la misma caja que tenía en HTML */
.ms-svg {
  display: block;
  flex: none;
  overflow: visible;
}

.ms-svg text {
  fill: currentColor;
}

.evento[data-tipo]:target {
  box-shadow: 4px 4px 0 var(--t-tint), 0 0 0 3px var(--blue-tint);
}

/* ==========================================================
   Menos adorno, más foto
   Estrella de fondo solo en el banner y en el cierre; offset plano y esquinas asimétricas solo en las tarjetas
   principales (pasos, plataformas, misión y visión, símbolos). Las tarjetas de apoyo quedan sencillas.
   ========================================================== */
.has-star::before,
.panel::after {
  display: none;
}

.page-banner.con-arte::before {
  display: none;
}

/* el banner con ilustración propia no lleva además la estrella de fondo */
.evento,
.evento[data-tipo],
.evento.evento-destacado,
.stage-facts>div,
.val-card,
.wa-card,
.map-box {
  box-shadow: none;
}

.evento,
.evento[data-tipo],
.stage-facts>div,
.val-card {
  border-radius: 8px;
}

.evento[data-tipo] {
  border-radius: 4px 8px 8px 4px;
}

.stage-facts>div {
  border-radius: 4px 8px 8px 4px;
}

/* Fotos de las etapas: la vertical se muestra vertical (antes se recortaba a horizontal) y lleva su nota a mano */
.photo img.is-vertical {
  aspect-ratio: 4 / 5;
  object-position: center 35%;
}

.media-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ==========================================================
   Ilustración propia de cada banner (solo escritorio)
   Identidad: hoja de cuaderno con los valores · Contacto: sobre de correo aéreo ·
   Plataformas: carné con cordón. Todo CSS/SVG, decorativo (aria-hidden); entran con js/respiro.js.
   ========================================================== */
.banner-art {
  position: absolute;
  z-index: 1;
  display: none;
  pointer-events: none;
}

@media (min-width: 901px) {
  .banner-art {
    display: block;
  }
}

/* Identidad: hoja de cuaderno con renglones, margen rojo y perforaciones */
.art-valores {
  right: 56px;
  bottom: 62px;
  width: 224px;
  padding: 12px 16px 14px 44px;
  background: var(--paper) repeating-linear-gradient(to bottom, transparent 0 24px, rgba(16, 99, 158, 0.2) 24px 25px) 0 44px / 100% 100% no-repeat;
  border-radius: 3px;
  box-shadow: 0 18px 28px -14px rgba(0, 0, 0, 0.6);
  color: var(--navy-dark);
  transform: rotate(2.5deg);
}

.art-valores::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(221, 13, 58, 0.5);
}

.art-valores::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 12px;
  background: radial-gradient(circle 5px at 6px 50%, var(--navy-dark) 96%, transparent) 0 0 / 12px 58px repeat-y;
  opacity: 0.85;
}

.art-valores b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  color: var(--red-ink);
}

.art-valores ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.art-valores li {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 19px;
  line-height: 25px;
  white-space: nowrap;
}

/* Contacto: sobre de correo aéreo con sello y matasellos */
.art-sobre {
  right: 56px;
  bottom: 70px;
  width: 320px;
  height: 180px;
  background: var(--paper);
  box-shadow: 0 18px 28px -14px rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
}

.art-sobre::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 9px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--red) 0 16px, var(--white) 16px 28px, var(--blue) 28px 44px, var(--white) 44px 56px) 9;
}

.art-sobre-dir {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 26px;
}

/* dirección en renglones, como escrita a mano en un sobre */
.art-sobre-dir p {
  padding: 0 2px;
  border-bottom: 1px solid rgba(16, 99, 158, 0.28);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 18px;
  line-height: 29px;
  white-space: nowrap;
  color: var(--blue-ink);
}

.art-sobre-dir p:first-child {
  color: var(--navy-dark);
}

.art-sobre-sello {
  position: absolute;
  top: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 50px;
  background: var(--red-tint);
  border: 2px dotted var(--red);
  color: var(--red-ink);
}

.art-sobre-sello svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-sobre-matasello {
  position: absolute;
  top: 18px;
  right: 80px;
  width: 78px;
  height: 56px;
  opacity: 0.55;
  transform: rotate(-12deg);
}

.art-sobre-matasello svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--navy-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Plataformas: carné colgado de un cordón (el mismo lenguaje de las tarjetas de acceso) */
.art-carne {
  right: 110px;
  top: -8px;
  width: 150px;
  transform-origin: 50% 0;
  transform: rotate(3deg);
}

.art-carne-cordon {
  display: block;
  width: 3px;
  height: 42px;
  margin: 0 auto;
  background: var(--red);
}

.art-carne-card {
  position: relative;
  padding: 34px 14px 14px;
  background: var(--white);
  border-radius: 6px 6px 16px 16px;
  box-shadow: 0 18px 28px -14px rgba(0, 0, 0, 0.6);
  text-align: center;
  overflow: hidden;
}

.art-carne-card::before {
  content: "ACCESO";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.art-carne-card::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 12px;
  width: 34px;
  height: 10px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

.art-carne-foto {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  background: var(--navy-tint);
  border-radius: 50%;
  color: var(--navy);
}

.art-carne-foto svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.art-carne-linea {
  display: block;
  height: 6px;
  margin: 6px auto 0;
  background: var(--navy-tint);
  border-radius: 3px;
}

.art-carne-linea.corta {
  width: 60%;
}

.art-carne-card em {
  display: block;
  margin-top: 10px;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  color: var(--red-ink);
}

/* Calendario: encabezado compacto de las demás páginas sobre el fondo de la agenda */
.page-banner.banner-agenda .page-banner-inner {
  padding-bottom: 60px;
}

.page-banner.banner-agenda::after {
  background-color: var(--bg-soft);
}

@media print {
  .page-banner.banner-agenda {
    display: none;
  }
}

/* Más aire entre secciones en pantallas anchas (en celular se mantiene el ritmo compacto) */
@media (min-width: 901px) {
  .section {
    padding: 84px 0;
  }
}

/* ---------- Zonas táctiles de 44px en móvil (sin cambiar el aspecto: el área extra es un pseudo-elemento invisible) ---------- */
@media (max-width: 900px) {
  .crumbs a {
    position: relative;
  }

  .crumbs a::after {
    content: "";
    position: absolute;
    inset: -12px -7px;
  }

  .id-index a {
    position: relative;
  }

  .id-index a::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }

  .field-check {
    position: relative;
  }

  .field-check label::before {
    content: "";
    position: absolute;
    left: -11px;
    top: -9px;
    width: 44px;
    height: 44px;
  }

  /* la casilla mide 22px: el área táctil llega a 44px y activa la casilla a través de la etiqueta */
  .cost-help a {
    padding: 12px 2px;
    margin: -12px -2px;
  }
}