/* ——— Super Prepa Arcade · landing ———
   La paleta y la tipografía son las MISMAS del juego (app/src/styles.css):
   la página debe sentirse como asomarse a la maquinita, no como un folleto. */
:root {
  --ink: #241b26;
  --bg: #201329;
  --deep: #171021;
  --deeper: #12091a;
  --card: #31203f;
  --vino: #7c2d4a;
  --terracota: #d95f33;
  --crema: #f7ead3;
  --crema2: #fdf6e9;
  --moneda: #f6b73c;
  --vidas: #ef4d57;
  --xp: #35d07f;
  --jade: #43c993;
  --fuego: #ff8a3d;
  --premium: #9257d8;
  --agua: #45c0dd;
  --magenta: #e86fa8;
  --sub: #b9a8c9;
  --sub2: #8a7799;
  --shadow: #0d0813;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--crema);
  font-family: Nunito, sans-serif;
  font-weight: 700;
  line-height: 1.6;
  overflow-x: hidden;
}
.pix { font-family: 'Pixelify Sans', monospace; font-weight: 600; }
a { color: var(--moneda); }

/* ——— ambiente: scanlines + estrellas ——— */
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
}
#estrellas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.estrella {
  position: absolute; width: 3px; height: 3px; background: var(--crema2);
  opacity: .35; animation: parpadeo 3s ease-in-out infinite;
}
@keyframes parpadeo { 0%,100% { opacity: .12 } 50% { opacity: .5 } }

/* ——— sprites (canvas pixel-art) ——— */
.sprite, .flota { display: inline-block; line-height: 0; }
.sprite canvas, .flota canvas { image-rendering: pixelated; display: block; }
.flotante { animation: floaty 2.6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* ——— barra de navegación ——— */
.barra {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; background: rgba(18, 9, 26, .92); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--ink);
}
.barra-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--crema2); }
.barra-marca .pix { font-size: 13px; letter-spacing: 1px; }
.barra-links { display: flex; align-items: center; gap: 16px; }
.barra-links a { text-decoration: none; font-size: 12px; letter-spacing: 1px; color: var(--sub); }
.barra-links a:hover { color: var(--crema2); }
.barra-entrar {
  color: var(--ink) !important; background: var(--jade); border: 2px solid var(--ink);
  border-radius: 8px; padding: 8px 14px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s;
}
.barra-entrar:hover { transform: translateY(-2px); color: var(--ink) !important; }
@media (max-width: 640px) {
  .barra-marca .pix { display: none; }
  .barra-links a:not(.barra-entrar) { display: none; }
}

/* ——— hero ——— */
.hero {
  position: relative; min-height: 92vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 70px 20px 50px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 25%, #3a1c42 0%, var(--deep) 58%, var(--deeper) 100%);
}
.hero-flotantes { position: absolute; inset: 0; pointer-events: none; }
.flota {
  position: absolute; left: var(--x); top: var(--y); opacity: .8;
  animation: floaty 3.2s ease-in-out infinite; animation-delay: var(--d);
}
.hero-logo { margin-bottom: 12px; animation: floaty 3s ease-in-out infinite; }
.hero-logo-img {
  width: clamp(120px, 16vw, 190px); height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 10px 0 rgba(13,8,19,.8)) drop-shadow(0 0 34px rgba(255,138,61,.35));
  animation: floaty 3s ease-in-out infinite;
}

/* El Xolo anfitrión: se presenta en el hero y comenta cada sección. */
.xolo-presenta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; animation: entra .6s both; }
.xolo-burbuja {
  position: relative; margin: 0; text-align: left; font-size: 14.5px; line-height: 1.5;
  color: var(--crema); background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow); padding: 12px 16px;
}
.xolo-burbuja::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%) rotate(45deg); background: var(--card);
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.xolo-burbuja strong { color: var(--jade); }
.xolo-dice {
  display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 0 auto 26px;
}
.xolo-dice p {
  position: relative; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--crema);
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow); padding: 11px 15px;
}
.xolo-dice p::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%) rotate(45deg); background: var(--card);
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.titulo-hero {
  font-size: clamp(34px, 7vw, 76px); margin: 0; letter-spacing: 2px; color: var(--crema2);
  text-shadow: 0 6px 0 var(--ink), 0 0 40px rgba(246,183,60,.25);
  animation: entra .6s cubic-bezier(.2,1.4,.4,1) both;
}
.acento { color: var(--moneda); }
.tagline {
  font-size: clamp(19px, 3vw, 28px); margin: 14px 0 4px; color: var(--crema2); font-weight: 900;
  animation: entra .6s .15s cubic-bezier(.2,1.4,.4,1) both;
}
.tagline em { color: var(--fuego); font-style: normal; }
.subtagline { color: var(--sub); font-size: clamp(15px, 2vw, 18px); margin: 0 0 30px; animation: entra .6s .3s both; }
.subtagline strong { color: var(--magenta); }
@keyframes entra { 0% { transform: translateY(24px) scale(.96); opacity: 0 } 100% { transform: none; opacity: 1 } }

.cta-fila { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: entra .6s .45s both; }
.boton-cta {
  display: inline-block; text-decoration: none; color: var(--crema2);
  background: var(--terracota); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 6px 0 var(--ink); padding: 16px 30px; font-size: 19px; letter-spacing: 1px;
  transition: transform .12s, box-shadow .12s;
}
.boton-cta:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink), 0 0 30px rgba(217,95,51,.4); }
.boton-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.boton-cta.secundario { background: var(--card); color: var(--moneda); }
.boton-cta.grande { font-size: 24px; padding: 20px 44px; }

.stats-strip {
  display: flex; gap: clamp(14px, 4vw, 44px); flex-wrap: wrap; justify-content: center;
  margin-top: 54px; padding: 18px 26px; background: rgba(20,12,28,.6);
  border: 3px solid var(--ink); border-radius: 12px;
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 86px; }
.stat .num { font-size: 34px; color: var(--moneda); text-shadow: 0 3px 0 var(--ink); }
.stat .etq { font-size: 12px; color: var(--sub); }

/* ——— secciones ——— */
.seccion { position: relative; z-index: 1; padding: 90px 22px; max-width: 1100px; margin: 0 auto; }
.seccion.alterna { max-width: none; background: var(--bg); }
.seccion.alterna > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.titulo-seccion {
  font-size: clamp(26px, 4.4vw, 44px); text-align: center; letter-spacing: 1px;
  color: var(--crema2); text-shadow: 0 4px 0 var(--ink); margin: 0 0 18px; line-height: 1.25;
}
.intro { max-width: 760px; margin: 0 auto 46px; text-align: center; font-size: 17px; color: var(--sub); }
.intro strong { color: var(--crema2); }
.intro-chica { max-width: 640px; margin: 0 auto 26px; text-align: center; color: var(--sub); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 26px; }

.carta {
  background: var(--card); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 6px 0 var(--shadow); padding: 26px 24px;
  transition: transform .18s, box-shadow .18s;
}
.carta:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow); }
.carta h3 { font-size: 17px; letter-spacing: 1px; color: var(--moneda); margin: 14px 0 10px; line-height: 1.4; }
.carta h4 { font-size: 15px; letter-spacing: 1px; color: var(--moneda); margin: 12px 0 4px; }
.carta p { margin: 8px 0; color: var(--sub); font-size: 15px; }
.carta p strong { color: var(--crema2); }

/* aparecer al hacer scroll */
.revela { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,1.2,.4,1); }
.revela.visto { opacity: 1; transform: none; }

/* ——— banda del registro ——— */
.banda-registro {
  margin-top: 40px; background: linear-gradient(135deg, #2c1a3e, #23142f);
  border: 3px solid var(--ink); border-left: 6px solid var(--magenta); border-radius: 12px;
  box-shadow: 0 6px 0 var(--shadow); padding: 26px 30px;
}
/* El chip va SIEMPRE en tinta oscura: antes heredaba el lila del cuerpo y
   sobre el rosa/jade del fondo quedaba ilegible (contraste ~1.5:1). */
.chip-banda { display: inline-block; font-size: 11px; letter-spacing: 2px;
  color: #241b26 !important; font-weight: 700; text-shadow: none;
  background: var(--magenta); border: 2px solid var(--ink); border-radius: 5px;
  padding: 6px 11px; margin: 0 0 12px; }
.banda-registro p { margin: 0; color: var(--sub); }
.banda-registro p strong { color: var(--crema2); }

/* ——— anatomía: teléfonos de mentira ——— */
.chip-fase { display: inline-block; font-size: 13px; letter-spacing: 1px; color: var(--ink);
  background: var(--c); border: 2px solid var(--ink); border-radius: 6px; padding: 6px 12px; margin-bottom: 14px; }
.mock-telefono {
  background: var(--deep); border: 3px solid var(--ink); border-radius: 14px;
  padding: 16px 14px; margin-bottom: 16px; min-height: 240px;
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.mock-burbuja {
  background: var(--card); border: 2px solid var(--ink); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; color: var(--crema);
}
.mock-mascota { text-align: center; animation: floaty 2.4s ease-in-out infinite; }
.mock-tarjeta {
  background: var(--card); border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 0 4px 0 var(--shadow); padding: 12px 14px; font-size: 14px; color: var(--crema2);
}
.mock-tarjeta.centro { text-align: center; }
.mock-tarjeta .grande { font-size: 22px; margin: 4px 0 8px; color: var(--crema2); }
.mock-tarjeta p { margin: 4px 0; }
.mock-titulo { display: inline-block; font-size: 10px; letter-spacing: 1px; color: var(--ink);
  background: var(--agua); border-radius: 4px; padding: 3px 7px; margin-bottom: 6px; }
.mock-chip-info { font-size: 10.5px; letter-spacing: 1px; color: var(--ink); background: var(--moneda);
  border: 2px solid var(--ink); border-radius: 5px; padding: 5px 8px; align-self: flex-start; }
.mock-pista { font-size: 11px; color: #fff; background: var(--premium); border: 2px solid var(--ink);
  border-radius: 5px; padding: 5px 9px; align-self: flex-end; }
.mock-opcion {
  background: var(--deep); border: 2px solid var(--ink); border-radius: 7px;
  padding: 8px 10px; margin-top: 8px; font-size: 13px; color: var(--sub);
}
.mock-opcion.correcta { border-color: var(--xp); color: var(--crema2); background: #1e4433; }
.mock-combo { position: absolute; top: 10px; right: 12px; color: var(--fuego); font-size: 18px;
  text-shadow: 0 3px 0 var(--ink); animation: latidoCombo 1.2s ease-in-out infinite; }
@keyframes latidoCombo { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) rotate(-3deg) } }
.mock-xp { color: var(--xp); font-size: 15px; text-align: right; animation: floaty 2s ease-in-out infinite; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.1;
  font-size: .7em; margin: 0 4px; }
.frac span:first-child { border-bottom: 2px solid var(--crema2); padding: 0 6px; }

/* ——— mundos ——— */
.mundos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 44px; }
.mundo {
  border: 3px solid var(--ink); border-radius: 10px; padding: 14px 16px;
  background: var(--card); box-shadow: 0 4px 0 var(--shadow);
  transition: transform .15s; cursor: pointer; text-align: left;
  font-family: inherit; display: block; width: 100%;
}
.mundo:hover { transform: translateY(-3px) scale(1.02); }
.mundo .pix.nombre { font-size: 14px; letter-spacing: 1px; display: block; }
.mundo .lema { font-size: 12px; color: var(--sub); display: block; margin: 3px 0 8px; }
.mundo .foco { font-size: 12px; color: var(--crema); display: block; background: rgba(13,8,19,.5);
  border-radius: 6px; padding: 7px 9px; }
.mundo .foco b { color: var(--moneda); font-size: 9px; letter-spacing: 1px; display: block; font-family: 'Pixelify Sans', monospace; }
/* La tira de terreno: el bioma del mundo pintado con SU paleta real. */
/* El asomo del mapa dentro de la tarjeta, con su invitación a dar click. */
.mapa-asomo { position: relative; display: block; margin-bottom: 12px; border-radius: 8px; overflow: hidden; border: 3px solid var(--ink); }
.mapa-mini { display: block; width: 100%; height: 132px; object-fit: cover; image-rendering: pixelated; }
.lupa {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 1px; color: #241b26; background: var(--moneda);
  border: 2px solid var(--ink); border-radius: 6px; padding: 4px 9px;
  box-shadow: 0 3px 0 var(--ink); transition: transform .15s;
}
.mundo:hover .lupa { transform: translateX(-50%) translateY(-3px); }

/* ——— el visor del mapa en grande ——— */
.visor {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 6, 16, .86); backdrop-filter: blur(4px);
}
.visor.abierto { display: flex; animation: aparece .2s ease-out both; }
@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
.visor-caja {
  position: relative; max-width: 420px; width: 100%; max-height: 92vh; overflow-y: auto;
  background: var(--card); border: 4px solid var(--ink); border-radius: 16px;
  box-shadow: 0 12px 0 var(--ink), 0 26px 60px rgba(0,0,0,.6); padding: 22px 24px 24px;
  text-align: center; animation: popVisor .25s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes popVisor { from { transform: scale(.92) translateY(14px) } to { transform: none } }
.visor-cerrar {
  position: absolute; right: 14px; top: 14px; width: 34px; height: 34px;
  background: var(--deep); color: var(--crema); border: 3px solid var(--ink);
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
.visor-caja h3 { font-size: 17px; letter-spacing: 1px; margin: 4px 0 2px; }
.visor-lema { font-size: 13px; color: var(--sub); margin: 0 0 14px; }
.visor-lienzo {
  display: block; width: auto; max-width: 100%; height: min(46vh, 340px); margin: 0 auto;
  image-rendering: pixelated; border: 3px solid var(--ink); border-radius: 10px;
}
.visor-foco {
  margin: 16px 0 8px; padding: 12px 14px; text-align: left; font-size: 14px; color: var(--crema);
  background: var(--deep); border: 2px solid var(--ink); border-radius: 8px; line-height: 1.5;
}
.visor-foco b { display: block; font-size: 9px; letter-spacing: 2px; color: var(--moneda); margin-bottom: 4px; }
.visor-pie { font-size: 12px; color: var(--sub2); margin: 0; }

/* ——— jefes y amuletos ——— */
.banda-jefes { text-align: center; margin: 40px 0 60px; }
.banda-jefes h3 { font-size: 22px; color: var(--vidas); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); }
.banda-jefes > p { max-width: 720px; margin: 0 auto 26px; color: var(--sub); }
.banda-jefes > p strong { color: var(--crema2); }
.jefe-escena { display: flex; gap: 40px; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  padding: 26px; background: radial-gradient(ellipse at 50% 100%, #2c1a2e 0%, transparent 70%); }
.pie-escena { font-size: 13px; color: var(--sub2); text-align: center; }
.amuletos h3 { font-size: 20px; text-align: center; color: var(--jade); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); }
.amuleto { text-align: center; }
.amuleto .poder { font-size: 12px; color: var(--jade); margin: 0 0 8px; }
.amuleto p { font-size: 14px; }

/* ——— gamificación ——— */
.fila-sprites { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; }
.fila-sprites .sprite { transition: transform .15s; cursor: default; }
.fila-sprites .sprite:hover { transform: scale(1.18) translateY(-4px); }
.citas { margin-top: 34px; }
.centrado { text-align: center; }
.citas h3 { font-size: 18px; letter-spacing: 1px; color: var(--crema2); }
.cita { font-size: 15.5px; color: var(--crema); margin: 0; font-style: italic; }
.cita footer { font-size: 12.5px; color: var(--sub2); margin-top: 10px; font-style: normal; }

/* ——— música ——— */
.reproductor { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.pista {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--crema); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 5px 0 var(--shadow); padding: 18px 20px; font-family: inherit; font-weight: 700;
  transition: transform .15s;
}
.pista:hover { transform: translateY(-3px); }
.pista .nombre { font-size: 15px; letter-spacing: 1px; color: var(--moneda); }
.pista .desc { font-size: 13px; color: var(--sub); }
.pista .play { font-size: 22px; color: var(--jade); margin-top: 8px; }
.pista.sonando { border-color: var(--jade); box-shadow: 0 5px 0 var(--shadow), 0 0 24px rgba(67,201,147,.35); }
.pista.sonando .play { animation: latidoCombo 1s ease-in-out infinite; }
.nota-musica { text-align: center; color: var(--sub2); font-size: 13.5px; margin-top: 18px; }

/* ——— demo viva ——— */
.demo-viva { margin-top: 50px; text-align: center; }
.demo-viva h3 { font-size: 19px; letter-spacing: 1px; color: var(--crema2); }
.marco-demo {
  width: min(420px, 92vw); height: 740px; max-height: 78vh; margin: 20px auto 10px;
  border: 4px solid var(--ink); border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #31203f, #241b26); padding: 12px;
  box-shadow: 0 14px 0 var(--ink), 0 24px 60px rgba(0,0,0,.6);
}
.marco-demo iframe { width: 100%; height: 100%; border: 3px solid var(--ink); border-radius: 14px; background: var(--deep); }

/* ——— prepas ——— */
.lista-prepas { list-style: none; padding: 0; margin: 12px 0; }
.lista-prepas li { padding: 8px 12px; margin-bottom: 8px; background: var(--deep);
  border: 2px solid var(--ink); border-radius: 8px; font-size: 14.5px; color: var(--sub); }
.lista-prepas li strong { color: var(--moneda); }

/* ——— descargas ——— */
.descarga { text-align: center; display: flex; flex-direction: column; }
.descarga p { flex: 0; }
.boton-descarga {
  display: inline-block; margin-top: auto; align-self: center; text-decoration: none;
  cursor: pointer; font-family: 'Pixelify Sans', monospace;
  color: var(--crema2); background: var(--terracota); border: 3px solid var(--ink);
  border-radius: 9px; box-shadow: 0 5px 0 var(--ink); padding: 12px 20px;
  font-size: 14px; letter-spacing: 1px; transition: transform .12s;
}
.boton-descarga:hover { transform: translateY(-2px); color: var(--crema2); }
.boton-descarga:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.letra-chica { font-size: 12px !important; color: var(--sub2) !important; margin-top: 10px !important; }
.badges-tiendas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 30px 0 10px; }
.badge-tienda {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 14px; letter-spacing: 1px; color: var(--sub2);
  background: var(--deep); border: 3px dashed #3a2a48; border-radius: 10px; padding: 14px 26px;
  opacity: .75;
}
.badge-tienda em { font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--moneda); }

/* ——— lo que cuesta prepararse: barras ——— */
.costos { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.costo {
  background: var(--card); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 5px 0 var(--shadow); padding: 18px 20px;
}
.costo.destacado { border-color: var(--jade); box-shadow: 0 5px 0 var(--shadow), 0 0 26px rgba(67,201,147,.25); }
.costo-nombre { display: block; font-size: 14px; letter-spacing: 1px; color: var(--moneda); }
.costo.destacado .costo-nombre { color: var(--jade); }
.costo-detalle { display: block; font-size: 14px; color: var(--sub); margin: 6px 0 12px; }
.costo-barra { display: flex; align-items: center; gap: 12px; }
.costo-barra span {
  display: block; height: 18px; width: var(--w); min-width: 26px;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  border: 2px solid var(--ink); border-radius: 5px;
  transition: width 1s cubic-bezier(.2,1,.4,1);
}
.costo-barra b { font-size: 14px; color: var(--crema2); white-space: nowrap; }

/* ——— precio ——— */
.boton-cta.compra { background: var(--vino); color: var(--crema2); }
.boton-cta.compra:hover { box-shadow: 0 9px 0 var(--ink), 0 0 30px rgba(124,45,74,.55); }
.badge-viva { background: var(--card); color: var(--moneda); }
.tabla-precio { max-width: 860px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 0 var(--shadow); }
.fila-precio {
  display: grid; grid-template-columns: 1.2fr .8fr 1.6fr; gap: 10px; align-items: center;
  padding: 13px 18px; background: var(--card); border-top: 2px solid var(--ink);
  font-size: 14px; color: var(--sub);
}
.fila-precio strong { color: var(--crema2); }
.fila-precio em { font-style: normal; color: var(--vidas); }
.fila-precio.encabezado { background: var(--deep); font-size: 10px; letter-spacing: 2px; color: var(--sub2); border-top: none; }
.fila-precio.destacada { background: #1e4433; }
.fila-precio.destacada strong { color: var(--jade); }
.fila-precio.destacada span:last-child { color: var(--crema); }
@media (max-width: 640px) {
  .fila-precio { grid-template-columns: 1fr; gap: 2px; }
  .fila-precio.encabezado { display: none; }
}

/* ——— mockups con dibujo ——— */
.mock-grafica { width: 100%; height: auto; background: var(--deep); border: 2px solid var(--ink); border-radius: 6px; }
.mira { animation: pulseMira 1.6s ease-in-out infinite; transform-origin: 88px 52px; }
@keyframes pulseMira { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }

/* ——— kit papás ——— */
.mensaje-papas {
  margin: 12px 0 16px; padding: 14px 16px; font-size: 14px; line-height: 1.55;
  color: var(--crema); background: var(--deep); border: 2px solid var(--ink);
  border-left: 5px solid var(--jade); border-radius: 8px; font-style: italic;
}

/* ——— FAQ ——— */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 18px; font-size: 14px; letter-spacing: 1px;
  color: var(--moneda); display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '▼'; font-size: 10px; color: var(--sub2); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--sub); font-size: 15px; }
.faq details p strong { color: var(--crema2); }

/* ——— compartir ——— */
.fila-compartir { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ——— cierre ——— */
.final { text-align: center; padding-bottom: 110px; }
.final .intro { margin-bottom: 30px; }
.insert-coin { margin-top: 34px; font-size: 13px; letter-spacing: 3px; color: var(--moneda);
  animation: parpadeo 1.6s ease-in-out infinite; }

.pie { text-align: center; padding: 40px 20px 60px; background: var(--deeper); border-top: 3px solid var(--ink); }
.pie .pix { letter-spacing: 2px; color: var(--sub); margin: 10px 0 4px; }
.pie p { color: var(--sub2); font-size: 13.5px; margin: 4px 0; }

@media (max-width: 640px) {
  .seccion { padding: 60px 18px; }
  .jefe-escena { gap: 22px; }
  .stats-strip { gap: 10px; padding: 14px; }
  .stat { min-width: 70px; }
  .stat .num { font-size: 26px; }
}

/* ═══════════ v4: nombres, badges oficiales, reto y contacto ═══════════ */

/* ——— el logo nuevo en sus tres tamaños ——— */
.logo-mini { display: block; border-radius: 7px; }
.logo-pie { display: block; margin: 0 auto 6px; border-radius: 12px; }
.logo-demo {
  display: block; margin: 0 auto 12px; border-radius: 16px;
  filter: drop-shadow(0 6px 0 rgba(13,8,19,.7)) drop-shadow(0 0 24px rgba(255,138,61,.3));
}

/* ——— fichas: cada mascota y cada avatar CON SU NOMBRE ———
   Antes el nombre solo vivía en el `title` (se ve al pasar el mouse y jamás en
   celular): quien entraba veía bichos sin identidad. */
.ficha { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 96px; }
.ficha.chica { width: 74px; }
.ficha .sprite { transition: transform .15s; }
.ficha:hover .sprite { transform: scale(1.14) translateY(-4px); }
.ficha figcaption { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.ficha figcaption b { font-size: 10px; letter-spacing: .5px; color: var(--moneda); font-weight: 600; }
.ficha.chica figcaption b { font-size: 9.5px; color: var(--agua); }
.ficha figcaption span { font-size: 10px; color: var(--sub2); line-height: 1.3; }
.fila-sprites { gap: 12px 10px; align-items: flex-start; }

/* ——— badges oficiales de las tiendas ——— */
.badge-oficial {
  display: inline-flex; align-items: center; gap: 11px; margin-top: auto; align-self: center;
  text-decoration: none; color: var(--crema2); background: #000;
  border: 2px solid #4a4550; border-radius: 9px; padding: 9px 16px;
  transition: transform .12s, border-color .12s;
}
.badge-oficial:hover { transform: translateY(-2px); border-color: var(--crema2); color: var(--crema2); }
.badge-oficial span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.badge-oficial em { font-style: normal; font-size: 8.5px; letter-spacing: .5px; color: #cfc9d6; font-weight: 700; }
.badge-oficial b { font-size: 17px; font-weight: 700; letter-spacing: .2px; }

/* ——— el reto del jefe: rellena el hueco de la cuarta tarjeta ——— */
.reto-jefe {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 22px 20px; border: 3px dashed #4a3a58; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%, rgba(124,45,74,.22), transparent 72%);
}
.reto-globo {
  position: relative; background: var(--card); border: 3px solid var(--ink);
  border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 0 var(--shadow);
}
.reto-globo p { margin: 0; font-size: 14px; color: var(--crema); line-height: 1.45; }
.reto-quien { font-size: 9.5px !important; letter-spacing: 1.5px; color: var(--vidas) !important; margin-bottom: 4px !important; }
.reto-globo.respuesta { margin-left: 26px; }
.reto-duelo { display: flex; align-items: center; justify-content: center; gap: 16px; }
.reto-boss { animation: retaBoss 2.2s ease-in-out infinite; }
@keyframes retaBoss { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-6px) rotate(-3deg) } }
.reto-tu { animation: floaty 2.4s ease-in-out infinite; }
.reto-vs { font-size: 20px; color: var(--moneda); text-shadow: 0 3px 0 var(--ink); animation: pulseVs 1.4s ease-in-out infinite; }
@keyframes pulseVs { 0%,100% { transform: scale(1) } 50% { transform: scale(1.18) } }

/* ——— formulario de contacto ——— */
.formulario {
  max-width: 640px; margin: 0 auto; display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow); padding: 26px 24px;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 10px; letter-spacing: 1.5px; color: var(--moneda); }
.campo input, .campo select, .campo textarea {
  font-family: Nunito, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--crema2); background: var(--deep);
  border: 3px solid var(--ink); border-radius: 8px; padding: 11px 13px;
  outline: none; resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--sub2); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--jade); }
.formulario button { grid-column: 1 / -1; cursor: pointer; font-family: 'Pixelify Sans', monospace; border: 3px solid var(--ink); }
.formulario .letra-chica { grid-column: 1 / -1; text-align: center; margin: 0 !important; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   LO QUE ENTRÓ EL 22-AGO-2026
   El sitio se había quedado congelado desde el 3 de agosto y la app
   le sacó 481 commits de ventaja. Esto es lo que hizo falta para
   contar lo nuevo. Todo se apoya en las mismas variables de :root
   y en las clases que ya existían (.carta, .grid-2, .revela…).
   ═══════════════════════════════════════════════════════════════ */

/* ——— el reloj del examen ———
   Va en el hero, arriba de los botones. Es el dato más duro de toda la
   página: la fecha no la negocia nadie y se acerca sola. */
.reloj-examen {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 26px auto 6px; padding: 12px 22px;
  background: rgba(239, 77, 87, .14); border: 3px solid var(--vidas);
  border-radius: 12px; box-shadow: 0 4px 0 var(--shadow);
}
.reloj-examen .reloj-num {
  font-size: clamp(34px, 6vw, 46px); line-height: 1; color: var(--vidas);
  text-shadow: 0 3px 0 var(--ink);
}
.reloj-examen .reloj-txt {
  text-align: left; font-size: 13px; color: var(--sub); line-height: 1.45;
}
.reloj-examen .reloj-txt b { color: var(--crema2); font-size: 13.5px; }
.reloj-examen.pasado { border-color: var(--jade); background: rgba(67, 201, 147, .12); }
.reloj-examen.pasado .reloj-num { color: var(--jade); }
.reloj-ritmo {
  margin: 0 0 22px; font-size: 14px; color: var(--moneda); font-weight: 800;
}

/* ——— la banda del número gordo (los 5,994 reactivos) ——— */
.banda-numeros {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  margin-top: 34px; padding: 26px 30px;
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
}
.banda-numeros .num-grande { text-align: center; flex: 0 0 auto; min-width: 190px; }
.banda-numeros .num-grande .num {
  display: block; font-size: clamp(40px, 7vw, 58px); line-height: 1;
  color: var(--moneda); text-shadow: 0 4px 0 var(--ink);
}
.banda-numeros .num-grande .etq {
  display: block; margin-top: 8px; font-size: 12.5px; color: var(--sub); max-width: 190px;
}
.banda-numeros p { flex: 1 1 340px; margin: 0; color: var(--sub); font-size: 15.5px; }
.banda-numeros p strong { color: var(--crema2); }

/* ——— los catorce formatos de enseñanza ——— */
.formatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.formato {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px 10px; text-align: center;
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow);
}
.formato b { font-size: 26px; color: var(--crema2); text-shadow: 0 2px 0 var(--ink); }
.formato span { font-size: 12px; color: var(--sub); line-height: 1.35; }
.formato.destacado { border-color: var(--jade); background: rgba(67, 201, 147, .12); }
.formato.destacado b { color: var(--jade); }

/* ——— EL SINODAL ———
   La hoja del trato se pinta como PAPEL: es la única cosa clara de todo el
   sitio, igual que adentro del juego, donde la pantalla del simulacro se
   siente de otro material que el resto. Ese contraste es el argumento. */
.hoja-sinodal {
  max-width: 720px; margin: 0 auto; padding: 30px clamp(20px, 4vw, 42px);
  background: #f3ead6; color: #2b2119;
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 0 8px 0 var(--shadow);
  font-size: 15.5px; line-height: 1.6;
}
.hoja-sinodal .hoja-quien {
  margin: 0 0 14px; font-size: 15px; letter-spacing: 2px; color: #7a6a55;
  border-bottom: 2px solid #cbbfa6; padding-bottom: 10px;
}
.hoja-sinodal .hoja-discurso { margin: 0 0 24px; padding: 0; border: 0; }
.hoja-sinodal .hoja-discurso p { margin: 0 0 10px; }
.hoja-sinodal .hoja-discurso b { color: #2b2119; }
.hoja-sinodal .hoja-titulo {
  margin: 0 0 10px; font-size: 14px; letter-spacing: 2px; color: #7a6a55;
}
.hoja-sinodal .hoja-condiciones { margin: 0 0 22px; padding-left: 22px; }
.hoja-sinodal .hoja-condiciones li { margin-bottom: 7px; }
.hoja-sinodal .hoja-pie {
  margin: 0; padding-top: 16px; border-top: 2px solid #cbbfa6;
  font-size: 14.5px; font-style: italic; color: #5a4c3c;
}

/* la máscara que se cae, en tira horizontal */
.mascara { margin-top: 44px; }
.mascara-tira {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.mascara-tira .cita { font-size: 14.5px; }
.mascara-tira .cuando {
  display: block; margin-bottom: 8px; font-size: 11.5px; letter-spacing: 2px;
  color: var(--moneda);
}

/* ——— el cupo diario: las dos cuentas ——— */
.ritmo {
  margin-top: 40px; padding: 30px clamp(20px, 4vw, 36px);
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
}
.ritmo h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.3; color: var(--crema2); }
.ritmo p { color: var(--sub); margin: 0 0 12px; }
.ritmo p strong { color: var(--crema2); }
.ritmo-cuentas {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin: 26px 0 18px;
}
.ritmo-caso {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 1 250px; padding: 20px 18px; text-align: center;
  background: rgba(67, 201, 147, .12); border: 3px solid var(--jade); border-radius: 12px;
}
.ritmo-caso.apretado { background: rgba(239, 77, 87, .12); border-color: var(--vidas); }
.ritmo-caso b { font-size: 12px; letter-spacing: 1.5px; color: var(--sub); }
.ritmo-caso .ritmo-num {
  font-size: 46px; line-height: 1; color: var(--jade); text-shadow: 0 3px 0 var(--ink);
}
.ritmo-caso.apretado .ritmo-num { color: var(--vidas); }
.ritmo-caso span:last-child { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.ritmo-flecha { font-size: 26px; color: var(--sub2); }

/* ——— las dos máquinas del gimnasio ——— */
.maquina .hueco {
  display: inline-block; min-width: 34px; padding: 0 6px;
  color: var(--moneda); border-bottom: 3px dashed var(--moneda);
}
.maquina .anio { letter-spacing: 8px; color: var(--fuego); }

/* ——— el buscador de prepas ——— */
.buscador {
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  margin-bottom: 18px; padding: 22px; text-align: center;
  background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
}
.buscador-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.buscador-fila label { font-size: 13px; letter-spacing: 1.5px; color: var(--sub); }
.buscador select {
  padding: 10px 14px; font: inherit; font-size: 15px;
  color: var(--crema2); background: var(--deep);
  border: 3px solid var(--ink); border-radius: 8px; cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  padding: 7px 13px; font-size: 12px; letter-spacing: 1px; cursor: pointer;
  color: var(--sub); background: var(--deep);
  border: 3px solid var(--ink); border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { color: var(--crema2); }
.chip.activo { color: var(--ink); background: var(--moneda); border-color: var(--moneda); }
.buscador-cuenta { text-align: center; font-size: 12.5px; color: var(--sub2); margin: 0 0 18px; letter-spacing: 1px; }

.prepas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.prepa { font-size: 14.5px; }
.prepa-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.prepa-cabeza h3 { margin: 0; font-size: 19px; color: var(--crema2); }
.prepa-grupo, .prepa-examen, .prepa-directo, .prepa-cerca {
  padding: 3px 8px; font-size: 10px; letter-spacing: 1px; border-radius: 6px;
}
.prepa-grupo { color: var(--ink); background: var(--sub); }
.prepa-examen { color: var(--ink); background: var(--fuego); }
.prepa-directo { color: var(--ink); background: var(--agua); }
.prepa-cerca { color: var(--ink); background: var(--jade); }
.prepa-oficial { margin: 0 0 8px; font-size: 12.5px; color: var(--sub2); font-style: italic; }
.prepa-donde { margin: 0 0 6px; color: var(--sub); font-size: 13.5px; }
.prepa-donde b { color: var(--moneda); font-size: 12px; letter-spacing: 1px; }
.prepa-como { margin: 0 0 8px; font-size: 13px; color: var(--sub); }
.prepa-estudias { margin: 0 0 8px; font-size: 13px; color: var(--sub); }
.prepa-estudias b { display: block; margin-bottom: 2px; font-size: 10.5px; letter-spacing: 1.5px; color: var(--agua); }
.prepa p { margin: 0 0 8px; color: var(--sub); }
.prepa-ambiente {
  margin: 10px 0 0 !important; padding-top: 10px; font-size: 13.5px; font-style: italic;
  border-top: 2px solid rgba(255, 255, 255, .08); color: var(--sub2) !important;
}
.centrado { text-align: center; }

/* ——— la lista de espera ——— */
.apuntarse {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: 560px; margin: 0 auto 14px;
}
.apuntarse input {
  flex: 1 1 260px; padding: 14px 16px; font: inherit; font-size: 16px;
  color: var(--crema2); background: var(--deep);
  border: 3px solid var(--ink); border-radius: 10px;
}
.apuntarse input::placeholder { color: var(--sub2); }
.apuntarse input:focus { outline: none; border-color: var(--moneda); }
.apuntarse button { flex: 0 0 auto; }
#aviso-apuntado code {
  padding: 1px 5px; font-size: .92em; background: var(--deeper); border-radius: 4px;
}

/* ——— la página de papás ———
   Mismo esqueleto, otro registro. Los cambios son de TONO visual: sin monitos
   flotando, sin scanline encima del texto y con el hero mucho más corto —
   quien lee esto vino por información, no por la aventura. */
.pagina-papas .hero { min-height: auto; padding: 130px 22px 54px; }
.pagina-papas .papas-titulo { font-size: clamp(30px, 5.5vw, 52px); margin-bottom: 14px; }
.pagina-papas .tagline { font-size: clamp(17px, 2.4vw, 21px); }
.pagina-papas .seccion { padding: 62px 22px; }
.pagina-papas .faq details[open] summary { color: var(--moneda); }
.pagina-papas .lista-prepas li { margin-bottom: 12px; }

/* ——— el arrastre de lado en el celular ———
   Los monitos del hero se posicionan con `left: 88%` y su ancho se sale de la
   pantalla: en un teléfono eso deja la página arrastrable 30 px hacia la
   derecha, con una franja negra del otro lado. En este sitio importa más que
   en otros, porque casi todo el que lo abra lo va a abrir desde el cel.

   Se contiene en su propia capa en vez de esconder el overflow del <body>: ahí
   arriba vive la barra `position: sticky`, y un overflow escondido en un
   ancestro la deja de despegar. */
.hero-flotantes { overflow: hidden; }
/* Lo mismo con el cielo: las estrellas se riegan con `left: X%` y las de la
   orilla derecha se salen igual que los monitos. */
#estrellas { overflow: hidden; }
/* La capa fija de scanlines heredaba el ancho del documento (que ya venía
   estirado) en vez del de la ventana. */
.scanlines { width: 100vw; max-width: 100%; }

/* La capa del cielo llevaba `inset: 0` sobre un documento que ya venía
   estirado, así que ella misma medía más que la ventana y realimentaba el
   arrastre. Igual que .scanlines: se amarra a la VENTANA. */
#estrellas { width: 100vw; max-width: 100%; }

/* El formulario de contacto, en el celular.
   Los campos son celdas de una rejilla, y una celda de rejilla trae
   `min-width: auto`: el <textarea> tiene ancho intrínseco propio (sus `cols`
   de fábrica) y con eso se negaba a encoger por debajo de ~405 px. Eso es lo
   que dejaba la página arrastrable de lado en el cel. */
.campo { min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; box-sizing: border-box; }

/* La rola bajando: los MP3 pesan y tardan un par de segundos en arrancar. */
.pista.cargando { opacity: .72; }
.pista.cargando .play { animation: parpadeo 1s ease-in-out infinite; }

/* ——— la trampa de robots ———
   Un campo que ninguna persona ve ni llena; los que rellenan formularios a lo
   bruto lo llenan siempre, y ahí se acaba su viaje. Se esconde SACÁNDOLO de la
   pantalla y no con `display: none`: los robots que valen la pena ya saben
   ignorar lo que está en display none, pero un campo que sigue en el flujo del
   documento se lo tragan. Y `aria-hidden` más `tabindex="-1"` lo dejan fuera
   del lector de pantalla y del tabulador, para que tampoco estorbe a quien
   navega sin ratón. */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ——— la página del proceso ———
   Es la que va a recibir a quien llegue de Google buscando fechas, así que
   manda la legibilidad: menos adorno, más jerarquía. */
.ojo-grande {
  margin-bottom: 44px; padding: 22px 26px;
  background: rgba(239, 77, 87, .14); border: 3px solid var(--vidas); border-radius: 12px;
  box-shadow: 0 5px 0 var(--shadow);
}
.ojo-grande .pix { margin: 0 0 8px; font-size: 13px; letter-spacing: 2px; color: var(--vidas); }
.ojo-grande p:last-child { margin: 0; font-size: 16px; color: var(--crema2); }

.modalidad-cuantas { margin: 0 0 10px !important; font-size: 13px; color: var(--moneda); font-weight: 800; }
.modalidad-riesgo {
  margin: 12px 0 0 !important; padding-top: 10px; font-size: 14px;
  border-top: 2px solid rgba(255, 255, 255, .08);
}
.modalidad-riesgo b { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: 1.5px; color: var(--vidas); }
.modalidad-buena { border-color: var(--jade); }
.modalidad-buena .modalidad-riesgo b { color: var(--jade); }

/* el calendario: una línea de tiempo, no una lista de viñetas */
.calendario { list-style: none; margin: 0; padding: 0; }
.hito {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 0; border-bottom: 2px solid rgba(255, 255, 255, .07);
}
.hito:last-child { border-bottom: 0; }
.hito-cuando {
  flex: 0 0 152px; padding-top: 3px;
  font-size: 12.5px; letter-spacing: .5px; color: var(--moneda);
}
.hito-cuerpo { flex: 1 1 auto; }
.hito-cuerpo h3 { margin: 0 0 6px; font-size: 16px; color: var(--crema2); }
.hito-cuerpo p { margin: 0; color: var(--sub); font-size: 15px; }
.hito-estimada {
  display: inline-block; margin-left: 6px; padding: 2px 7px; vertical-align: 2px;
  font-size: 9.5px; letter-spacing: 1px; color: var(--ink); background: var(--sub2);
  border-radius: 5px;
}
.hito-ojo { margin-top: 8px !important; font-size: 14px !important; }
.hito-ojo b { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: 1.5px; color: var(--fuego); }

@media (max-width: 640px) {
  .hito { flex-direction: column; gap: 6px; }
  .hito-cuando { flex: none; }
}

/* ——— las páginas de plantel ——— */
.miga { margin: 0 0 18px; font-size: 12.5px; color: var(--sub2); }
.miga a { color: var(--sub); }
.indice-prepas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.indice-prepas a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-decoration: none;
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow); transition: transform .12s, border-color .12s;
}
.indice-prepas a:hover { transform: translateY(-2px); border-color: var(--moneda); }
.indice-prepas b { font-size: 15px; color: var(--crema2); letter-spacing: .5px; }
.indice-prepas span { font-size: 12px; color: var(--sub2); }
/* En las páginas de plantel las tarjetas de «otras por tu rumbo» son enlaces. */
a.prepa { display: block; text-decoration: none; transition: transform .12s, border-color .12s; }
a.prepa:hover { transform: translateY(-3px); border-color: var(--moneda); }
.prepa-mas { margin: 12px 0 0 !important; font-size: 11.5px; letter-spacing: 1px; color: var(--moneda) !important; }