/* Fuentes LOCALES (SIL Open Font License): /recursos/fuentes/. Si un archivo falta, el navegador usa la siguiente de la lista. */
@font-face { font-family: "Baloo 2"; src: url("fuentes/baloo2-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fuentes/bricolage-grotesque.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

/* Layout: contenedor de 1120px; portada del evento en dos columnas en escritorio (texto | boleta del premio) y una sola en celular.
   Capa 1 = MARCA Paraíso Hogar (fija). Capa 2 = TEMA DEL EVENTO (--ev-*, textos y escena): en producción sale del JSON de cada sorteo.
   Un solo look a propósito (noche de evento), con texto claro de alto contraste para leer afuera. */
:root {
  color-scheme: light;
  /* MARCA = colores del logo de Paraíso Hogar (archivo original de Diego, 27/10): azul cielo «Paraíso», azul marino del techo,
     verde lima «Hogar» y los rombos verde / amarillo / rojo. (La paleta morada de PROMPT_CLAUDE_DESIGN_ERA.md es la de la app ERA, no la de la marca.)
     Los nombres --ph-noche/--ph-morado se conservan como roles: fondo de página y superficie. */
  --ph-azul: #009fe3;
  --ph-azul-texto: #0071a8;
  --ph-azul-claro: #e3f4fd;
  --ph-marino: #23448f;
  --ph-marino-osc: #13285c;
  --ph-verde: #8dbf1a;
  --ph-verde-osc: #0e7a2e;
  --ph-amarillo: #ffe100;
  --ph-rojo: #e30613;
  --ph-noche: #f3f9fe;
  --ph-morado: #ffffff;
  --ph-morado-2: #e3f4fd;
  --ph-violeta: #009fe3;
  --ph-lima: #8dbf1a;
  --ph-lima-tinta: #12330a;
  --ph-texto: #13285c;
  --ph-texto-suave: #34507f;
  --ph-texto-tenue: #5a6f96;
  --ph-linea: rgba(19, 40, 92, .13);
  --ph-papel: #ffffff;
  --ph-papel-2: #eef7fd;
  --ph-tinta: #13285c;
  --ph-tinta-suave: #4a6088;
  --ph-error: #c0182b;
  --ph-error-fondo: #fdecee;

  --ev-acento: #ff7a1a;
  --ev-acento-osc: #c2500a;
  --ev-acento-tinta: #ffffff;
  /* relleno de lo que lleva texto encima: blanco sobre #c9460c = 4,8 a 1 */
  --ev-relleno: #c9460c;
  --ev-relleno-osc: #7f2a05;
  --ev-cielo-1: #0e1d4a;
  --ev-cielo-2: #2b2c6c;
  --ev-cielo-3: #86385a;
  --ev-horizonte: #ff9b45;
  --ev-silueta: #0c0520;
  --ev-silueta-2: #1d0b2c;
  --ev-luna: #ffeec4;
  --ev-campo: #6f8f2a;
  --ev-display: "Baloo 2", "Bricolage Grotesque", "Arial Black", sans-serif;
  --ev-display-peso: 800;
  --ev-display-espacio: -.01em;

  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-titulos: "Baloo 2", "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 20px;
  --sombra: 0 22px 50px -26px rgba(19, 40, 92, .45);
}
/* el encabezado del evento es de noche: dentro de él el texto vuelve a ser claro (también la cabeza de la boleta) */
.hero, .resumen, .aliados, .boleta .cabeza {
  --ph-texto: #ffffff;
  --ph-texto-suave: #e8eefb;
  --ph-texto-tenue: #c9d4ee;
  --ph-linea: rgba(255, 255, 255, .16);
  color: var(--ph-texto);
}
.hero .premio-boleta, .aliados figure .tarjeta-logo { --ph-texto: #13285c; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ph-noche); color: var(--ph-texto); font: 500 17px/1.55 var(--f-texto); }
img { max-width: 100%; }
a { color: var(--ph-azul-texto); text-underline-offset: 3px; font-weight: 700; }
.hero a, .aliados a { color: #ffffff; }
:focus-visible { outline: 3px solid var(--ph-azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
.contenedor {
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.vista { display: block; }


/* ---------- encabezado de marcas ---------- */
.cabecera { position: relative; z-index: 2; background: #ffffff; border-bottom: 1px solid var(--ph-linea); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.marcas { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marcas img { display: block; height: 62px; width: auto; }
.marcas .herradura { height: 42px; }
.marcas .x { width: 1px; height: 34px; background: var(--ph-linea); }
.marcas .aliado { font: 800 11px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-marino); }
.estado {
  flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--f-texto);
  padding: 7px 12px; border-radius: 999px; background: #eaf6d8; color: var(--ph-verde-osc); border: 1px solid #c4e39a;
}
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(14, 122, 46, .15); }
.estado.cerrado { background: var(--ph-error-fondo); color: var(--ph-error); border-color: #f4b9c1; }
.estado.cerrado::before { box-shadow: none; }
@media (min-width: 720px) { .marcas img { height: 58px; } }

/* ---------- héroe del evento ---------- */
.hero { position: relative; background: linear-gradient(180deg, var(--ev-cielo-1) 0%, var(--ev-cielo-2) 45%, var(--ev-cielo-3) 82%, var(--ev-horizonte) 100%); overflow: hidden; }
.hero .estrellas { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 23% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 57% 26%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 6%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 31% 44%, #fff 50%, transparent 51%); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; padding-block: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.chips li { font: 700 13px var(--f-texto); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--ph-linea); color: var(--ph-texto); }
.chips li.fuerte { background: var(--ev-relleno); color: var(--ev-acento-tinta); border-color: transparent; }
.hero .presenta { font: 700 13px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-luna); margin: 0 0 6px; }
.hero h1 {
  font-family: var(--ev-display); font-weight: var(--ev-display-peso); margin: 0; letter-spacing: var(--ev-display-espacio);
  font-size: clamp(40px, 11vw, 80px); line-height: .95; color: var(--ph-texto);
  text-shadow: 0 3px 0 var(--ev-acento-osc), 0 14px 40px rgba(0, 0, 0, .45);
}
.hero h1 .linea2 { display: block; color: var(--ev-acento); text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .45); }
.hero .bajada { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.45; color: var(--ph-texto-suave); margin: 18px 0 0; max-width: 34ch; }
.hero .bajada strong { color: var(--ph-texto); }

.cuenta { display: flex; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.cuenta li { min-width: 66px; padding: 10px 6px 8px; border-radius: 14px; background: rgba(10, 4, 24, .45); border: 1px solid var(--ph-linea); text-align: center; backdrop-filter: blur(6px); }
.cuenta b { display: block; font: 800 28px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cuenta span { font: 700 10.5px var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--ph-texto-tenue); }
.cuenta-lbl { margin: 18px 0 0; font: 700 12px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-texto-tenue); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 28px;
  border: 0; border-radius: 16px; cursor: pointer; text-decoration: none;
  font: 800 20px/1.1 var(--f-titulos); letter-spacing: 0; text-align: center; /* la de los titulos (Baloo 2). Diego, 30/10/2026: la de antes (Bricolage) no se veia bien en los botones. Interlineado 1.1: Baloo es alta y en 320 px «Inscribirme y recibir ofertas» parte en dos lineas */
  background: var(--ev-relleno); color: var(--ev-acento-tinta);
  box-shadow: 0 6px 0 var(--ev-relleno-osc), 0 18px 30px -12px rgba(0, 0, 0, .6);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ev-relleno-osc); }
.cta svg { width: 22px; height: 22px; }
.cta.ancho { width: 100%; }
.cta-2 {
  display: inline-flex; align-items: center; min-height: 60px; padding: 0 22px; border-radius: 16px; text-decoration: none;
  font: 800 18px var(--f-titulos); color: var(--ph-texto); border: 2px solid rgba(255, 255, 255, .28); background: rgba(10, 4, 24, .25); /* tambien Baloo 2 (Diego, 30/10/2026) */
}
@media (max-width: 519px) { .acciones .cta, .acciones .cta-2 { width: 100%; } }

/* Latido (Diego, 28/10/2026): los botones de inscribirse laten sin parar, como un corazon (dos golpes y una pausa). Solo transform: no mueve nada alrededor.
   Quien pidio a su celular «reducir movimiento» no lo ve: lo apaga la regla de prefers-reduced-motion de mas abajo (accesibilidad). */
@keyframes latido {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.06); }
  20% { transform: scale(1); }
  30% { transform: scale(1.04); }
}
a.cta[href$="/inscribirme"], a.cta[href*="/inscribirme?o="] { animation: latido 1.4s ease-in-out infinite; } /* los 3 enlaces al formulario, el flotante incluido */
.cta.flotante:active { animation: none; }

/* Boton flotante: abajo, a la vista en cuanto el boton de arriba sale de la pantalla (ver .escondido). En el celular, de lado a lado (con el margen de 16px y el borde seguro del iPhone); en pantalla grande, a la derecha. */
.cta.flotante {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  justify-content: center; min-height: 56px;
  transition: opacity .2s ease, visibility .2s ease, box-shadow .12s ease;
}
/* Mientras se ve el boton de arriba, el flotante se esconde (lo decide sitio.js; sin JavaScript nunca se esconde). Diego, 29/10/2026: se veia doble al inicio. */
.cta.flotante.escondido { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 720px) { .cta.flotante { left: auto; right: 24px; bottom: 24px; padding: 0 28px; } }
body:has(.cta.flotante) .pie { padding-bottom: 96px; } /* que el boton no tape el final del pie de pagina */

/* boleta del premio en el héroe */
.premio-boleta { position: relative; align-self: center; }
.premio-boleta .ticket {
  position: relative; background: var(--ph-papel); color: var(--ph-tinta); border-radius: 22px; box-shadow: var(--sombra);
  display: grid; grid-template-columns: 1fr 74px; overflow: hidden;
}
.premio-boleta .ticket .principal { padding: 22px 20px 20px; min-width: 0; }
.premio-boleta .tag { display: inline-block; font: 800 11px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-acento-tinta); background: var(--ev-relleno); padding: 5px 10px; border-radius: 6px; }
.premio-boleta h2 { font: 800 clamp(24px, 6.4vw, 30px)/1.05 var(--f-titulos); letter-spacing: -.01em; margin: 12px 0 6px; }
.premio-boleta p { margin: 0; color: var(--ph-tinta-suave); font-size: 15.5px; line-height: 1.45; }
.premio-boleta .ilus { position: relative; margin: 14px 0 0; background: #ffffff; border: 1px solid var(--ph-linea); border-radius: 16px; overflow: hidden; }
.premio-boleta .ilus img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 72%; }
.mas-kit { position: absolute; left: 10px; bottom: 10px; font: 800 12.5px var(--f-texto); padding: 6px 10px; border-radius: 999px; background: var(--ph-marino); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(19, 40, 92, .6); }
.premio-boleta .talon {
  position: relative; background: var(--ph-papel-2); border-left: 3px dashed #bfe3f6; display: grid; place-items: center;
}
.premio-boleta .talon span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 13px var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--ph-tinta-suave); white-space: nowrap; }
.premio-boleta .talon::before, .premio-boleta .talon::after { content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--ev-cielo-2); }
.premio-boleta .talon::before { top: -14px; } .premio-boleta .talon::after { bottom: -14px; background: var(--ev-cielo-3); }
.premio-boleta .sello {
  position: absolute; top: -16px; right: 54px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--ph-lima); color: var(--ph-lima-tinta); font: 800 12px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
  transform: rotate(10deg); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
}
.premio-boleta .sello b { display: block; font-size: 21px; letter-spacing: -.02em; }

.escena { position: relative; display: block; width: 100%; height: 210px; margin-top: -10px; }
.escena svg { display: block; width: 100%; height: 100%; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; padding-block: 40px 0; align-items: center; }
  .escena { height: 300px; margin-top: -60px; }
}
/* Celular (Diego, 28/10/2026): el premio se ve en la primera pantalla, y con el la cuenta regresiva y el boton. El bloque de texto se «abre»
   (display: contents) y el orden queda: chips, titulo, premio, botones, cuenta y al final la bajada. Medido a 390x844: con la cuenta antes de los botones,
   el boton empezaba en 797 px y en un celular real (con la barra del navegador) quedaba fuera de la primera pantalla. En el premio va solo la foto con su etiqueta: el nombre
   ya lo dice el titulo y la descripcion la cuenta la bajada. El sello «Gratis» no cabe sin tapar el titulo (ya lo dice el primer chip). */
@media (max-width: 899px) {
  .hero-grid { gap: 0; }
  .hero-texto { display: contents; }
  .hero-texto > .chips { order: 1; margin-bottom: 12px; }
  .hero-texto > .presenta { order: 2; }
  .hero-texto > h1 { order: 3; }
  .premio-boleta { order: 4; margin: 18px 0 0; }
  .hero-texto > .acciones { order: 5; }
  .hero-texto > .acciones .cta-2 { display: none; } /* «Cómo funciona» no va en el celular (Diego, 28/10/2026): le quita espacio al premio; la seccion sigue abajo */
  .hero-texto > .cuenta-js { order: 6; }
  .hero-texto > .bajada { order: 7; margin-top: 22px; }
  .premio-boleta .sello { display: none; }
  .premio-boleta .ticket .principal { display: flex; flex-direction: column; padding: 14px 14px 14px; }
  .premio-boleta .ilus { order: -1; margin: 0 0 10px; }
  .premio-boleta h2, .premio-boleta p { display: none; }
  .premio-boleta .tag { align-self: flex-start; }
  .premio-boleta .talon span { font-size: 11px; letter-spacing: .18em; } /* el texto vertical no estira la boleta mas alla de la foto */
  /* Los chips iban en UNA linea con la letra ajustada al ancho (commit 62956cfe); despues Diego quito el segundo chip del evento (chip2 del JSON), y uno solo cabe
     con la letra de siempre. Se deja el no-partir por si un evento trae los dos. */
  .chips { flex-wrap: nowrap; gap: 5px; }
  .chips li { font-size: 12px; padding: 5px 10px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- barra de datos ---------- */
.datos-evento { position: relative; z-index: 2; margin-top: -46px; }
.datos-evento ul {
  margin: 0; padding: 8px; list-style: none; background: var(--ph-papel); color: var(--ph-tinta); border-radius: var(--radio); box-shadow: var(--sombra);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.datos-evento li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px; min-width: 0; }
.datos-evento li svg { width: 40px; height: 40px; }
.datos-evento small { display: block; font: 800 10.5px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-tinta-suave); }
.datos-evento strong { display: block; font: 800 16px/1.2 var(--f-display); }
@media (min-width: 900px) { .datos-evento ul { grid-template-columns: repeat(4, 1fr); padding: 12px; } .datos-evento li { padding: 12px 14px; } }

/* ---------- secciones ---------- */
.seccion { padding-block: 64px 0; }
.seccion > .contenedor > header { max-width: 640px; margin-bottom: 26px; }
.sobre { font: 800 12px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ph-azul-texto); margin: 0 0 8px; }
/* ilustraciones dibujadas con la paleta vieja: se recolorean con la de la marca */
svg [fill="#2f1d6e"] { fill: var(--ph-marino); }
svg [fill="#7b5cf0"] { fill: var(--ph-azul); }
svg [fill="#6a49e6"] { fill: #0087c4; }
svg [fill="#5b3fc4"] { fill: var(--ph-azul); }
svg [fill="#b4f03c"] { fill: var(--ph-verde); }
.pasos .icono svg [stroke="#b4f03c"] { stroke: var(--ph-azul); }
.pasos .icono svg [stroke="#fdfbff"] { stroke: var(--ph-marino); }
.pasos .icono svg [fill="#fdfbff"] { fill: var(--ph-marino); }
.seccion h2 { font: 800 clamp(30px, 7.6vw, 44px)/1.04 var(--f-titulos); letter-spacing: -.01em; margin: 0; }
.seccion header p { color: var(--ph-texto-suave); margin: 12px 0 0; font-size: 18px; }

.porque-sec { padding-block: 36px 0; }
.porque { background: #ffffff; border: 1px solid var(--ph-linea); border-radius: 24px; padding: 24px 22px; display: grid; gap: 18px; box-shadow: var(--sombra); }
.porque img { width: 170px; height: auto; }
.porque h2 { font-size: clamp(26px, 6.4vw, 36px); }
.porque p:not(.sobre) { margin: 10px 0 0; color: var(--ph-texto-suave); font-size: 17.5px; max-width: 60ch; }
.quienes { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.quienes li { font-size: 14.5px; padding: 7px 12px; border-radius: 999px; background: var(--ph-azul-claro); color: var(--ph-marino); }
.quienes b { font-weight: 800; margin-right: 4px; }
@media (min-width: 900px) { .porque { grid-template-columns: 220px 1fr; align-items: center; padding: 32px 36px; gap: 36px; } .porque img { width: 100%; } }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: paso; }
.pasos li { position: relative; counter-increment: paso; background: var(--ph-morado); border: 1px solid var(--ph-linea); border-radius: var(--radio); padding: 22px 20px 22px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.pasos .icono { width: 64px; height: 64px; border-radius: 18px; background: var(--ph-morado-2); display: grid; place-items: center; position: relative; }
.pasos .icono svg { width: 38px; height: 38px; }
.pasos .icono::after { content: counter(paso); position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ev-relleno); color: var(--ev-acento-tinta); font: 800 14px/26px var(--f-display); text-align: center; }
.pasos h3 { font: 800 21px/1.15 var(--f-titulos); margin: 2px 0 6px; letter-spacing: -.01em; }
.pasos p { margin: 0; color: var(--ph-texto-suave); font-size: 16px; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 18px; } .pasos li { grid-template-columns: 1fr; padding: 26px; } }
.clave {
  margin-top: 16px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  background: var(--ev-relleno); color: var(--ev-acento-tinta); border-radius: var(--radio); padding: 16px 18px;
}
.clave svg { width: 44px; height: 44px; }
.clave strong { display: block; font: 800 18px/1.2 var(--f-display); }
.clave span { font-weight: 600; font-size: 15.5px; }

.premios { display: grid; gap: 14px; }
.premio-grande { background: var(--ph-papel); color: var(--ph-tinta); border-radius: 24px; overflow: hidden; display: grid; box-shadow: var(--sombra); }
.premio-grande { border: 1px solid var(--ph-linea); }
.premio-grande .foto { background: #ffffff; position: relative; border-bottom: 1px solid var(--ph-linea); }
.premio-grande .foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 68%; }
.premio-grande .foto .mas-kit { left: 14px; bottom: 14px; font-size: 14px; padding: 8px 14px; }
.premio-grande .foto .marca-agua { position: absolute; left: 16px; top: 14px; font: 800 11px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-marino); background: rgba(255, 255, 255, .8); padding: 4px 8px; border-radius: 6px; }
.premio-grande .texto { padding: 22px 22px 24px; }
.premio-grande .tag { font: 800 11px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-acento-osc); }
.premio-grande h3 { font: 800 28px/1.08 var(--f-titulos); letter-spacing: -.01em; margin: 6px 0 10px; }
.premio-grande ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ph-tinta-suave); }
.premio-grande ul li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.premio-grande ul li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--ph-lima) url("check.svg") center/16px no-repeat; }
.premio-todos { background: linear-gradient(150deg, #009fe3, #23448f); color: #ffffff; border-radius: 24px; padding: 24px 22px; display: grid; gap: 10px; align-content: start; }
.premio-todos .tag { font: 800 11px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.premio-todos h3 { font: 800 26px/1.08 var(--f-titulos); letter-spacing: -.01em; margin: 0; }
.premio-todos p { margin: 0; font-weight: 600; }
.premio-todos svg { width: 84px; height: 84px; }
@media (min-width: 900px) {
  .premios { grid-template-columns: 1.6fr 1fr; gap: 18px; }
  .premio-grande { grid-template-columns: 1.1fr 1fr; }
  .premio-grande .foto { border-bottom: 0; border-right: 1px solid var(--ph-linea); }
  .premio-grande .foto img { height: 100%; aspect-ratio: auto; }
  .premio-grande .texto { padding: 30px 28px; align-self: center; }
}

.hechos { margin: 0 0 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hechos li { border: 1px solid var(--ph-linea); border-radius: 16px; padding: 14px; min-width: 0; background: #ffffff; }
.hechos b { display: block; font: 800 clamp(26px, 7vw, 38px)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hechos span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--ph-texto-suave); }
.lineas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lineas li { border: 1px solid var(--ph-linea); background: var(--ph-papel); color: var(--ph-tinta); border-radius: 20px; padding: 18px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.lineas svg { width: 52px; height: 52px; border-radius: 14px; padding: 4px; }
.lineas .fam { justify-self: start; font: 800 10.5px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.lineas b { font: 800 18px/1.2 var(--f-display); letter-spacing: -.01em; }
.lineas li > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--ph-tinta-suave); }
.l-galon svg, .l-galon .fam { background: #e0f2fe; color: #0369a1; }
.l-litro svg, .l-litro .fam { background: #f0fdf4; color: #15803d; }
.l-jabon svg, .l-jabon .fam { background: #f3e8ff; color: #7c3aed; }
.l-hogar svg, .l-hogar .fam { background: #fef3c7; color: #92400e; }
.acompana { margin-top: 16px; border-radius: 24px; padding: 24px 22px; display: grid; gap: 18px; align-items: center; background: linear-gradient(135deg, #009fe3 0%, #23448f 100%); }
.acompana h3 { font: 800 clamp(24px, 6vw, 30px)/1.1 var(--f-titulos); letter-spacing: -.01em; margin: 0 0 8px; color: #ffffff; }
.acompana p { margin: 0; color: #ffffff; }
@media (min-width: 900px) {
  .lineas { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .lineas li { padding: 22px 20px; }
  .acompana { grid-template-columns: 1fr auto; padding: 30px 32px; gap: 32px; }
  .hechos { gap: 16px; }
}
@media (max-width: 380px) { .lineas { grid-template-columns: 1fr; } }
.agenda { margin: 0; padding: 0; list-style: none; position: relative; display: grid; gap: 0; }
.agenda li { display: grid; grid-template-columns: 92px 22px 1fr; gap: 14px; align-items: start; padding-bottom: 22px; position: relative; }
.agenda li:last-child { padding-bottom: 0; }
.agenda time { font: 800 17px/1.3 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; color: var(--ph-texto); }
.agenda .punto { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ev-acento); background: var(--ph-noche); margin-top: 1px; }
.agenda li:not(:last-child) .punto::after { content: ""; position: absolute; left: 50%; top: 22px; width: 2px; height: calc(100% + 2px); transform: translateX(-50%); }
.agenda li:not(:last-child)::after { content: ""; position: absolute; left: calc(92px + 14px + 10px); top: 24px; bottom: 0; width: 2px; background: var(--ph-linea); }
.agenda li.destacado .punto { background: var(--ev-acento); box-shadow: 0 0 0 6px rgba(255, 122, 26, .2); }
.agenda b { display: block; font: 800 18px/1.25 var(--f-display); }
.agenda span { color: var(--ph-texto-suave); font-size: 15.5px; }
.columnas { display: grid; gap: 40px; }
@media (min-width: 900px) { .columnas { grid-template-columns: 1fr 1fr; gap: 56px; } }

.confianza { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.confianza li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 18px; border: 1px solid var(--ph-linea); background: #ffffff; }
.confianza svg { width: 48px; height: 48px; }
.confianza b { display: block; font: 800 17.5px/1.25 var(--f-display); }
.confianza span { color: var(--ph-texto-suave); font-size: 15.5px; }
.huella { font: 600 12.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ph-azul-texto); word-break: break-all; display: block; margin-top: 6px; }

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--ph-morado); border: 1px solid var(--ph-linea); border-radius: 16px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; font: 700 17.5px/1.35 var(--f-display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; border: solid var(--ev-acento); border-width: 0 3px 3px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--ph-texto-suave); font-size: 16px; }

.aliados { margin-top: 64px; background: linear-gradient(160deg, #23448f 0%, #13285c 100%); }
.aliados .contenedor { padding-block: 40px; display: grid; gap: 26px; justify-items: center; text-align: center; }
.aliados .titulo { font: 800 12px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ph-texto-tenue); margin: 0; }
.aliados .logos { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: center; }
.aliados figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.aliados figure img { height: 92px; width: auto; }
.aliados figcaption { font: 700 12px var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--ph-texto-tenue); }

footer.pie { border-top: 1px solid var(--ph-linea); }
footer.pie .contenedor { padding-block: 28px 40px; display: grid; gap: 16px; color: var(--ph-texto-tenue); font-size: 14px; }
footer.pie .fila { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
footer.pie img { height: 40px; width: auto; }
footer.pie a { color: var(--ph-texto); }
footer.pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ---------- formulario ---------- */
.paso-wrap { padding-block: 10px 56px; }
.progreso { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.progreso .barra { flex: 1; height: 8px; border-radius: 99px; background: var(--ph-linea); overflow: hidden; }
.progreso .barra i { display: block; height: 100%; width: 50%; background: var(--ev-acento); border-radius: 99px; }
.progreso span { font: 700 13px var(--f-texto); color: var(--ph-texto-tenue); white-space: nowrap; }
.volver { background: none; border: 0; color: var(--ph-texto-suave); font: 700 15px var(--f-texto); padding: 8px 0; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.paso-grid { display: grid; gap: 22px; }
.resumen { background: linear-gradient(150deg, var(--ev-cielo-2), var(--ev-cielo-3)); border: 1px solid var(--ph-linea); border-radius: var(--radio); padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.resumen small { display: block; font: 800 11px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-luna); }
.resumen strong { display: block; font: 800 19px/1.2 var(--f-display); }
.resumen span { font-size: 14.5px; color: var(--ph-texto-suave); }
.resumen svg { width: 64px; height: 64px; }
.form-card { background: var(--ph-morado); border: 1px solid var(--ph-linea); border-radius: 24px; padding: 22px 18px; }
.form-card h1 { font: 800 clamp(28px, 7vw, 36px)/1.06 var(--f-titulos); letter-spacing: -.01em; margin: 0 0 6px; }
.form-card > p { margin: 0 0 4px; color: var(--ph-texto-suave); }
@media (min-width: 900px) {
  .paso-grid { grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
  .paso-grid .lado { position: sticky; top: 120px; display: grid; gap: 14px; }
  .form-card { padding: 34px 34px 30px; }
}
form { display: grid; gap: 20px; padding-top: 18px; }
.campo { display: grid; gap: 7px; }
.campo label { font: 700 16.5px var(--f-texto); }
.campo .ayuda { font-size: 14.5px; color: var(--ph-texto-tenue); }
.campo input {
  width: 100%; min-height: 60px; padding: 0 18px; border-radius: 14px; border: 2px solid #c7dcef;
  background: var(--ph-papel); color: var(--ph-tinta); font: 600 19px var(--f-texto);
}
.campo input::placeholder { color: #9a92b8; font-weight: 500; }
.campo input:focus { outline: none; border-color: var(--ph-azul); box-shadow: 0 0 0 4px rgba(0, 159, 227, .25); }
.campo.mal input { border-color: var(--ph-error); }
.err { display: none; gap: 8px; align-items: start; font-size: 15px; color: var(--ph-error); font-weight: 600; }
.campo.mal .err, .casilla.mal .err { display: flex; }
.err::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ph-error); color: var(--ph-error-fondo); font: 800 13px var(--f-texto); margin-top: 1px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.casillas { display: grid; gap: 12px; margin-top: 4px; }
.casilla { display: grid; gap: 6px; }
.casilla label { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; cursor: pointer; background: #f7fbfe; border: 2px solid var(--ph-linea); border-radius: 16px; padding: 16px; font-size: 15.5px; line-height: 1.5; }
.casilla.mal label { border-color: var(--ph-error); }
.casilla.ofertas label { background: #e6f5fd; border-color: #8fd0f1; }
.casilla.ofertas b { color: var(--ph-marino); }
.casilla input { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin: 0; border-radius: 8px; border: 2px solid var(--ph-texto-suave); background: transparent; display: grid; place-items: center; cursor: pointer; }
.casilla input:checked { background: var(--ph-lima); border-color: var(--ph-lima); }
.casilla input:checked::after { content: ""; width: 9px; height: 16px; border: solid var(--ph-lima-tinta); border-width: 0 3.5px 3.5px 0; transform: translate(0, -2px) rotate(45deg); }
.casilla input:focus-visible { outline: 3px solid var(--ph-lima); outline-offset: 3px; }
.casilla .tipo { display: inline-block; font: 800 10.5px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; background: var(--ph-azul-claro); color: var(--ph-marino); }
.casilla .tipo.obl { background: var(--ev-relleno); color: var(--ev-acento-tinta); }
.aviso-form { display: none; background: var(--ph-error-fondo); border: 1px solid rgba(255, 176, 163, .4); color: var(--ph-texto); border-radius: 16px; padding: 16px 18px; font-size: 15.5px; }
.aviso-form.ver { display: block; }
.aviso-form b { display: block; font: 800 17px var(--f-display); margin-bottom: 4px; }
.seguro { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--ph-texto-tenue); font-size: 14px; margin: 2px 0 0; text-align: center; }
.seguro svg { width: 18px; height: 18px; flex: none; }
.lado .mini { background: #ffffff; border: 1px solid var(--ph-linea); border-radius: 18px; padding: 16px 18px; color: var(--ph-texto-suave); font-size: 15px; }
.lado .mini b { display: block; color: var(--ph-texto); font: 800 16px var(--f-display); margin-bottom: 4px; }

/* ---------- boleta ---------- */
.boleta-grid { display: grid; gap: 22px; justify-items: center; }
.listo { display: flex; gap: 10px; align-items: center; font: 800 16px var(--f-texto); color: var(--ph-verde-osc); margin: 10px 0 0; justify-self: center; }
.listo svg { width: 24px; height: 24px; }
.boleta-titulo { font: 800 clamp(30px, 7.6vw, 40px)/1.04 var(--f-titulos); letter-spacing: -.01em; margin: 0; text-align: center; }
.boleta { width: 100%; max-width: 420px; background: var(--ph-papel); color: var(--ph-tinta); border-radius: 26px; position: relative; overflow: hidden; box-shadow: var(--sombra); }
.boleta .cabeza { position: relative; background: linear-gradient(140deg, var(--ev-cielo-2), var(--ev-cielo-3) 70%, var(--ev-horizonte)); color: var(--ph-texto); padding: 16px 20px 18px; overflow: hidden; }
.boleta .cabeza .logos { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.boleta .cabeza img { height: 54px; width: auto; display: block; background: #ffffff; padding: 5px 10px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.boleta .cabeza .sorteo-de { font: 800 10.5px/1.25 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; text-align: right; color: #ffffff; }
.boleta .cabeza .evento { margin-top: 12px; font-family: var(--ev-display); font-weight: var(--ev-display-peso); font-size: 26px; line-height: 1; letter-spacing: var(--ev-display-espacio); }
.boleta .cabeza .lugar { font-size: 13.5px; font-weight: 600; color: var(--ph-texto-suave); margin-top: 4px; }
.boleta .cuerpo { padding: 18px 22px 8px; text-align: center; }
.boleta .hola { font: 600 16px var(--f-texto); margin: 0; color: var(--ph-tinta-suave); }
.boleta .hola b { color: var(--ph-tinta); }
.numero-lbl { font: 800 11.5px var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ph-tinta-suave); margin: 10px 0 0; }
.numero { font: 800 68px/1 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.numero small { font-size: .38em; letter-spacing: .02em; color: var(--ev-acento-osc); vertical-align: .7em; margin-right: 6px; }
.qr { width: min(236px, 74%); margin: 14px auto 8px; padding: 12px; border-radius: 18px; border: 2px solid #dcebf7; background: #fff; }
.qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.boleta .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; text-align: left; }
.boleta .meta div { background: var(--ph-papel-2); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.boleta .meta small { display: block; font: 800 10px var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-tinta-suave); }
.boleta .meta strong { font: 800 15px/1.25 var(--f-display); }
.boleta .perfo { position: relative; height: 28px; margin-top: 10px; }
.boleta .perfo::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 3px dashed #c7e4f5; }
.boleta .perfo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 50%, var(--ph-noche) 14px, transparent 15px), radial-gradient(circle at 100% 50%, var(--ph-noche) 14px, transparent 15px); }
.boleta .instrucciones { padding: 6px 22px 22px; display: grid; gap: 12px; margin: 0; list-style: none; counter-reset: i; }
.boleta .instrucciones li { counter-increment: i; display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 15px; line-height: 1.45; text-align: left; }
.boleta .instrucciones li::before { content: counter(i); width: 28px; height: 28px; border-radius: 50%; background: var(--ph-papel-2); color: var(--ph-marino); display: grid; place-items: center; font: 800 14px var(--f-display); }
.boleta .instrucciones li.alerta::before { background: var(--ev-relleno); color: var(--ev-acento-tinta); }
.boleta .instrucciones strong { color: var(--ph-tinta); }
.captura { width: 100%; max-width: 420px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; background: #f0f8e4; border: 2px dashed var(--ph-verde); border-radius: 18px; padding: 16px 18px; }
.captura svg { width: 40px; height: 40px; }
.captura b { display: block; font: 800 18px var(--f-display); color: var(--ph-verde-osc); }
.captura span { color: var(--ph-texto-suave); font-size: 15px; }

/* ---------- cerrado ---------- */
.cerrado-card { max-width: 640px; margin: 24px auto 0; background: var(--ph-morado); border: 1px solid var(--ph-linea); border-radius: 24px; padding: 28px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.cerrado-card svg { width: 72px; height: 72px; }
.cerrado-card h1 { font: 800 clamp(28px, 7vw, 38px)/1.06 var(--f-titulos); letter-spacing: -.01em; margin: 0; }
.cerrado-card p { margin: 0; color: var(--ph-texto-suave); max-width: 44ch; }
.cerrado-card .cta-2 { color: var(--ph-marino); border-color: var(--ph-linea); background: #ffffff; }

/* ---------- inicio de la plataforma ---------- */
.inicio-hero { position: relative; overflow: hidden; background:
  radial-gradient(60% 80% at 85% 10%, rgba(0, 159, 227, .22), transparent 60%),
  radial-gradient(50% 60% at 0% 100%, rgba(141, 191, 26, .18), transparent 60%), linear-gradient(180deg, #ffffff, var(--ph-noche)); }
.inicio-hero .contenedor { padding-block: 34px 56px; display: grid; gap: 22px; }
.inicio-hero .logo-grande { height: 92px; width: auto; }
.inicio-hero h1 { font: 800 clamp(40px, 11vw, 76px)/.98 var(--f-titulos); letter-spacing: -.01em; margin: 0; max-width: 14ch; }
.inicio-hero h1 em { font-style: normal; color: var(--ph-azul); }
.inicio-hero p { margin: 0; font-size: 19px; color: var(--ph-texto-suave); max-width: 46ch; }
.confeti { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.tarjeta-evento { display: grid; border-radius: 26px; overflow: hidden; background: var(--ph-papel); color: var(--ph-tinta); box-shadow: var(--sombra); text-decoration: none; }
.tarjeta-evento .portada { position: relative; height: 190px; background: linear-gradient(180deg, #140a2e 0%, #3b1650 50%, #8a3352 85%, #ff9b45 100%); overflow: hidden; }
.tarjeta-evento .portada svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 150px; }
.tarjeta-evento .portada .titulo-ev { position: absolute; left: 20px; top: 18px; right: 20px; font-family: var(--ev-display); font-weight: var(--ev-display-peso); letter-spacing: var(--ev-display-espacio); font-size: 34px; line-height: .95; color: #fff; text-shadow: 0 3px 0 #c2500a; }
.tarjeta-evento .portada .titulo-ev span { display: block; color: #ff7a1a; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.tarjeta-evento .portada .vivo { position: absolute; right: 16px; top: 16px; }
.tarjeta-evento .info { padding: 18px 20px 20px; display: grid; gap: 12px; }
.tarjeta-evento .info .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ph-tinta-suave); font-size: 15px; font-weight: 600; }
.tarjeta-evento .info strong { font: 800 21px/1.15 var(--f-display); letter-spacing: -.01em; }
.tarjeta-evento .ir { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--f-display); color: var(--ph-tinta); }
.tarjeta-evento .ir i { width: 34px; height: 34px; border-radius: 50%; background: #ff7a1a; display: grid; place-items: center; }
.vacio { border: 2px dashed var(--ph-linea); border-radius: 22px; padding: 26px 22px; display: grid; gap: 8px; text-align: center; justify-items: center; color: var(--ph-texto-suave); }
.vacio svg { width: 56px; height: 56px; }
.vacio b { font: 800 19px var(--f-display); color: var(--ph-texto); }
.inicio-grid { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .inicio-hero .contenedor { grid-template-columns: 1.1fr .9fr; align-items: center; padding-block: 56px 72px; gap: 40px; }
  .inicio-grid { grid-template-columns: 1fr 1fr; }
}
.promesas { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.promesas li { background: var(--ph-morado); border: 1px solid var(--ph-linea); border-radius: 20px; padding: 22px; display: grid; gap: 8px; }
.promesas svg { width: 44px; height: 44px; }
.promesas b { font: 800 20px/1.2 var(--f-display); }
.promesas span { color: var(--ph-texto-suave); font-size: 16px; }
@media (min-width: 900px) { .promesas { grid-template-columns: repeat(3, 1fr); } }
.sedes { display: flex; flex-wrap: wrap; gap: 10px; }
.sedes span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ph-linea); font: 700 15px var(--f-texto); }

/* ---------- movimiento ---------- */
.vista.activa { animation: entra .4s ease both; }
.boleta { animation: imprime .7s cubic-bezier(.2, .8, .2, 1) both; }
.murcielago { animation: vuela 7s ease-in-out infinite alternate; }
.brillo { animation: titila 2.8s ease-in-out infinite alternate; }
@keyframes entra { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes imprime { from { transform: translateY(24px) rotate(-1.5deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes vuela { from { transform: translate(0, 0); } to { transform: translate(-14px, 8px); } }
@keyframes titila { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- sitio publicado: clases que reemplazan los style="" del prototipo, y piezas nuevas ---------- */
.inicio-texto { display: grid; gap: 20px; position: relative; }
.sobre.en-claro { color: #ffffff; opacity: .85; }
.encabezado-col { margin-bottom: 26px; }
.progreso.centrado { max-width: 420px; margin-inline: auto; }
.progreso .barra i.lleno { width: 100%; }
.pronto { margin: 22px 0 0; font: 700 17px var(--f-texto); color: var(--ph-texto); background: rgba(255, 255, 255, .14); border: 1px solid var(--ph-linea); border-radius: 16px; padding: 14px 16px; max-width: 34ch; }
.sin-js { margin: 0; font-size: 15px; color: var(--ph-tinta-suave); text-align: center; }
.aliado-nombre { font: 800 18px/1.2 var(--f-display); color: #ffffff; }
.legal { max-width: 760px; }
.legal h1 { font: 800 clamp(30px, 7.6vw, 40px)/1.04 var(--f-titulos); letter-spacing: -.01em; margin: 0 0 12px; }
.legal h2 { font: 800 22px/1.2 var(--f-titulos); margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ph-texto-suave); }
.legal .pendiente { background: var(--ph-error-fondo); color: var(--ph-error); border-radius: 8px; padding: 2px 6px; font-weight: 700; }
/* La etiqueta de estado de la tarjeta (arriba a la derecha) tapaba el titulo a 375 px en el prototipo: el titulo baja debajo de la etiqueta. */
.tarjeta-evento .portada .titulo-ev { top: 58px; }