/*
 * rifa.css
 * ------------------------------------------------------------
 * Capa de diseño de la rifa. Todo el look sale de los tokens de
 * este bloque: si hay que cambiar el color de marca o el radio de
 * las tarjetas, se cambia acá y no en los componentes.
 *
 * Tono buscado: campaña. El sitio vende una idea —con un número
 * puedes ganar la parcela— y la dice con letra de afiche, el rojo
 * de los carros y el amarillo reflectante de la acción. Lo que lo
 * mantiene institucional es que todo lo que afirma es un dato.
 *
 * Mobile-first: todo está escrito para 390 px y crece con min-width.
 * ------------------------------------------------------------
 */

:root {
    /* --- Marca ---
       Bermellón saturado. El rojo anterior estaba desaturado hacia el pardo y
       sobre la foto del hero se leía apagado; este mantiene la identidad de
       bomberos y sí resiste tanto el fondo claro como el modal oscuro. */
    --r-rojo:          #d92d20;
    --r-rojo-hover:    #b42318;
    --r-rojo-claro:    #f0563f;   /* para fondos oscuros */
    --r-rojo-suave:    #fef3f2;
    --r-rojo-borde:    #fee4e2;
    --r-rojo-glow:     rgba(217, 45, 32, .45);

    /* --- Superficies oscuras (modal) --- */
    --r-noche:         #0f1115;
    --r-noche-2:       #171a20;
    --r-noche-borde:   rgba(255, 255, 255, .09);
    --r-noche-borde-2: rgba(255, 255, 255, .18);
    --r-noche-txt:     #f4f4f5;
    --r-noche-txt-2:   rgba(244, 244, 245, .58);

    /* --- Grafito (la base sobria) --- */
    --r-tinta:         #14161a;
    --r-tinta-2:       #23262d;
    --r-tinta-3:       #3a3f49;
    --r-gris:          #6b7280;
    --r-gris-claro:    #9aa1ac;

    /* --- Superficies --- */
    --r-lienzo:        #f7f6f4;   /* off-white cálido, no blanco puro */
    --r-superficie:    #ffffff;
    --r-superficie-2:  #f2f1ee;
    --r-borde:         #e6e4e0;
    --r-borde-fuerte:  #d5d2cc;

    /* --- Paleta de acento ---
       El rojo manda en la acción, pero una página entera en gris y rojo se lee
       fría para algo que celebra. Cada bloque toma un color del propio premio
       —el bosque, el lago, la luz de la tarde— y así la portada tiene ritmo sin
       convertirse en un carnaval: los tintes viven en los fondos, nunca en los
       botones. La acción es siempre amarilla (ver "Piel de la portada", al final). */
    --r-verde:        #0e7a5a;   /* bosque */
    --r-verde-suave:  #e8f6f0;
    --r-verde-borde:  #c6e7da;
    --r-lago:         #0a6ba8;   /* agua */
    --r-lago-suave:   #e9f3fb;
    --r-lago-borde:   #c5e0f2;
    --r-ambar:        #b45309;   /* luz de la tarde, urgencia amable */
    --r-ambar-suave:  #fff6e9;
    --r-ambar-borde:  #f7dfbb;

    /* --- Semánticos (desaturados: son datos, no alarmas) --- */
    --r-ok:            #2f7d5d;
    --r-ok-suave:      #eff7f2;
    --r-espera:        #9a6b1f;
    --r-espera-suave:  #fdf7ea;

    /* --- Tipografía ---
       Barlow nació de las patentes y la señalética de carretera: la letra de
       los carros. La condensada, pesada y en mayúsculas, hace de afiche en los
       titulares, las cifras y los botones; la normal lleva el texto. */
    --r-sans:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --r-display: "Barlow Condensed", "Arial Narrow", var(--r-sans);
    --r-track-display: 0em;       /* titulares */
    --r-track-cifra:   -.02em;    /* números grandes */

    /* --- Radios: generosos --- */
    --r-radio-sm:  10px;
    --r-radio:     16px;
    --r-radio-lg:  24px;
    --r-radio-xl:  32px;
    --r-pill:      999px;

    /* --- Elevación: una sola dirección, suave --- */
    --r-sombra-sm: 0 2px 8px -4px rgba(20, 22, 26, .12);
    --r-sombra:    0 6px 20px -8px rgba(20, 22, 26, .16);
    --r-sombra-lg: 0 18px 44px -20px rgba(20, 22, 26, .28);

    /* --- Ritmo (escala de 4) --- */
    --r-1: .25rem;  --r-2: .5rem;   --r-3: .75rem;  --r-4: 1rem;
    --r-5: 1.5rem;  --r-6: 2rem;    --r-7: 3rem;    --r-8: 4.5rem;

    --r-marco:     8px;        /* margen del hero = borde de la página */
    --r-ancho:     1120px;
    --r-hero-img:  url("/assets/img/parcela-hero.jpg");
    --r-ancho-txt: 680px;
    --r-transicion: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================
   Base
   ========================================================== */
.rifa {
    margin: 0;
    font-family: var(--r-sans);
    color: var(--r-tinta);
    background: var(--r-lienzo);
    -webkit-font-smoothing: antialiased;
}
.rifa * { box-sizing: border-box; }

.r-wrap {
    width: 100%;
    max-width: calc(var(--r-ancho) + var(--r-marco) * 2);
    margin: 0 auto;
    padding: 0 calc(var(--r-marco) + var(--r-4));
}

/* Hero y cierre ya están metidos hacia adentro por su propio margen: si además
   les sumáramos el marco, su contenido quedaría corrido respecto del resto. */
.r-hero > .r-wrap,
.r-cierre .r-wrap { padding: 0 var(--r-4); }

.r-seccion { padding: var(--r-7) 0; }
.r-seccion--ajustada { padding: var(--r-6) 0; }

/* Etiqueta de sección: minúscula alta, como manda el sistema */
.r-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r-gris);
    margin: 0 0 var(--r-2);
}
.r-eyebrow--rojo { color: var(--r-rojo); }

.r-titulo {
    font-weight: 600;
    letter-spacing: var(--r-track-display);
    line-height: 1.06;
    margin: 0 0 var(--r-3);
    font-size: clamp(1.9rem, 7vw, 3rem);
    text-wrap: balance;
}
.r-titulo--sm { font-size: clamp(1.5rem, 5.5vw, 2.1rem); }

.r-bajada {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--r-tinta-3);
    max-width: var(--r-ancho-txt);
    margin: 0 0 var(--r-5);
}

.r-num { font-variant-numeric: tabular-nums; letter-spacing: var(--r-track-cifra); }

/* ==========================================================
   Botones — 44 px de alto mínimo, siempre
   ========================================================== */
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-2);
    min-height: 48px;
    padding: 0 var(--r-5);
    border: 0;
    border-radius: var(--r-pill);
    font-family: var(--r-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--r-transicion), transform var(--r-transicion), box-shadow var(--r-transicion);
}
.r-btn:active { transform: translateY(1px); }
/* Los rótulos de dos palabras no se parten: un botón en dos líneas se lee
   como un error, no como diseño. */
.r-btn { white-space: nowrap; }

.r-btn--primario {
    background: var(--r-rojo);
    color: #fff;
    box-shadow: var(--r-sombra);
}
.r-btn--primario:hover { background: var(--r-rojo-hover); color: #fff; }

.r-btn--tinta { background: var(--r-tinta); color: #fff; }
.r-btn--tinta:hover { background: var(--r-tinta-2); color: #fff; }

.r-btn--fantasma {
    background: transparent;
    color: var(--r-tinta);
    box-shadow: inset 0 0 0 1px var(--r-borde-fuerte);
}
.r-btn--fantasma:hover { background: var(--r-superficie); }

.r-btn--bloque { width: 100%; }
.r-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================
   Tarjetas
   ========================================================== */
.r-card {
    background: var(--r-superficie);
    border-radius: var(--r-radio-lg);
    padding: var(--r-5);
    box-shadow: var(--r-sombra-sm);
}
.r-card--plana { box-shadow: none; background: var(--r-superficie-2); }

/* ==========================================================
   Hero — foto de la parcela a sangre
   ==========================================================
   La foto es el argumento de venta, así que ocupa la pantalla.
   Encima van dos capas: un degradado vertical que garantiza el
   contraste del texto y un velo de tinta que baja la saturación
   para que el rojo de marca siga siendo el único acento.
   ========================================================== */
.r-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88svh, 800px);
    /* La cabecera es sticky, así que ocupa lugar en el flujo. Con este margen
       negativo el hero sube por detrás y la barra queda ENCIMA de la foto, en
       vez de flotar sobre una franja clara. El padding de arriba devuelve el
       aire que el margen se comió. */
    margin: -68px var(--r-marco) var(--r-marco);
    border-radius: 0 0 var(--r-radio-lg) var(--r-radio-lg);
    /* Arriba: alto de la cabecera + aire. Abajo: aire + lo que sube la tira. */
    padding: calc(68px + var(--r-7)) 0 var(--r-8);
    /* Capas, de arriba hacia abajo:
       1-2. Dos manchas de color de la paleta —brasa abajo a la izquierda,
            bosque arriba a la derecha— que tiñen la foto sin taparla.
       3.   Velo vertical que garantiza el contraste del texto centrado.
       4-5. La foto y el color de respaldo. */
    background:
        radial-gradient(90% 70% at 12% 100%, rgba(217, 45, 32, .38), transparent 62%),
        radial-gradient(80% 65% at 92% 4%, rgba(14, 122, 90, .32), transparent 60%),
        linear-gradient(180deg, rgba(20, 22, 26, .72) 0%, rgba(20, 22, 26, .42) 42%, rgba(20, 22, 26, .88) 100%),
        var(--r-hero-img) center 42% / cover no-repeat,
        var(--r-tinta);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Video de fondo de la portada. Va sobre la foto y bajo el texto; aparece
   recién cuando está corriendo, así nunca se ve el reproductor cargando.
   El iframe se agranda hasta cubrir la caja, como un background-size: cover,
   y un poco más para dejar fuera de cuadro los rótulos de YouTube. */
.r-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.r-hero__video--listo { opacity: 1; }
.r-hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%) scale(1.18);
    border: 0;
}
/* El mismo velo que lleva la foto, para que el texto se lea igual. */
.r-hero__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 80% at 0% 100%, rgba(217,45,32,.32), transparent 70%),
        linear-gradient(90deg, rgba(12,25,29,.92), rgba(12,25,29,.52) 65%, rgba(12,25,29,.22));
}
@media (max-width: 700px) {
    .r-hero__video::after {
        background:
            radial-gradient(100% 70% at 0% 65%, rgba(217,45,32,.26), transparent 70%),
            linear-gradient(180deg, rgba(12,25,29,.75), rgba(12,25,29,.48) 35%, rgba(12,25,29,.92) 75%);
    }
}
/* Con el video a la vista, el crédito de la foto ya no corresponde. */
.r-hero__video--listo ~ .r-hero__credito { display: none; }

/* Todo el bloque del hero vive en una sola columna centrada. */
.r-hero .r-wrap > * { margin-inline: auto; }
.r-hero .r-bajada { margin-inline: auto; max-width: 54ch; }
.r-hero__acciones { justify-content: center; }

/* Móvil: se sirve la versión chica, no 260 KB para 390 px de ancho. */
@media (min-width: 860px) {
    :root { --r-marco: 12px; }
    .r-hero { border-radius: 0 0 var(--r-radio-xl) var(--r-radio-xl); }
    .r-hero--compacto { border-radius: var(--r-radio-xl); }
}

@media (max-width: 700px) {
    .r-hero {
        background-image:
            linear-gradient(180deg, rgba(20, 22, 26, .7) 0%, rgba(20, 22, 26, .45) 30%, rgba(20, 22, 26, .94) 100%),
            url("/assets/img/parcela-hero-sm.jpg");
    }
}

/* Cabecera interna: la misma identidad, sin la foto ni la altura del hero.
   A diferencia del hero grande, esta NO se mete debajo de la cabecera sticky:
   sin foto que la barra pueda pisar, meterla dejaba las esquinas de arriba
   cortadas contra el blanco y el bloque se veía partido. */
.r-hero--compacto {
    min-height: 0;
    margin: var(--r-3) var(--r-marco) var(--r-marco);
    padding: var(--r-6) 0;
    border-radius: var(--r-radio-lg);
    background: linear-gradient(160deg, var(--r-tinta) 0%, #0e1013 100%);
}

/* Los pasos van centrados con el título: alineados a la izquierda quedaban
   colgando de una esquina, sin relación con lo que titulan. */
.r-hero .r-pasos-nav {
    justify-content: center;
    margin-bottom: var(--r-4);
}

.r-hero > .r-wrap { position: relative; z-index: 1; width: 100%; }
.r-hero .r-titulo  { color: #fff; }
.r-hero .r-bajada  { color: rgba(255, 255, 255, .8); }
.r-hero .r-eyebrow { color: rgba(255, 255, 255, .62); }

.r-hero__insignia {
    display: inline-flex;
    align-items: center;
    gap: var(--r-2);
    padding: var(--r-2) var(--r-4);
    margin-bottom: var(--r-5);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    font-size: .82rem;
    font-weight: 500;
    color: #fff;
}
.r-hero__punto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 0 3px rgba(110, 231, 168, .25);
}

.r-hero__premio {
    max-width: 16ch;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 600;
    line-height: .97;
    letter-spacing: var(--r-track-display);
    margin: 0 0 var(--r-4);
    max-width: 14ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.r-hero__acciones { display: flex; flex-direction: column; align-items: center; gap: var(--r-3); }

/* Crédito de la foto: discreto, pero la autoría se declara. */
.r-hero__credito {
    position: absolute;
    right: var(--r-4);
    bottom: var(--r-2);
    z-index: 2;
    margin: 0;
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .42);
}
.r-hero__credito a { color: inherit; text-decoration: none; }
.r-hero__credito a:hover { color: rgba(255, 255, 255, .8); }

/* ==========================================================
   Datos de la rifa — las fichas de la portada
   ========================================================== */
/* Vivían dentro del panel de lanzamiento, que se fue con la grilla. Son su
   propia sección: las usa la portada y no dependen de nada de aquello. */
.r-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.r-kpi { padding: 22px; border: 1px solid #e5e5df; border-radius: 20px; background: #fff; min-width: 0; }
.r-kpi--rojo { background: #fff1ee; border-color: #f6d8d2; }
.r-kpi__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #62696b; margin-bottom: 24px; }
.r-kpi__label svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--r-rojo); }
.r-kpi__valor { font-size: clamp(28px,3vw,42px); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; color: #222c2e; font-variant-numeric: tabular-nums; }
.r-kpi--rojo .r-kpi__valor { color: var(--r-rojo); }
.r-kpi__valor--fecha { font-size: 21px; letter-spacing: -.035em; line-height: 1.25; max-width: 15ch; }
.r-kpi__pie { margin-top: 8px; color: #727878; font-size: 12px; line-height: 1.5; }
@media (max-width: 480px) {
    .r-kpis { gap: 10px; }
    .r-kpi { padding: 18px 14px; border-radius: 16px; }
    .r-kpi__label { gap: 6px; font-size: 11px; margin-bottom: 20px; }
    .r-kpi__label svg { width: 17px; height: 17px; }
    .r-kpi__valor--fecha { font-size: 17px; }
    .r-kpi__pie { font-size: 11px; }
}

/* ==========================================================
   Formulario
   ========================================================== */
.r-campo { margin-bottom: var(--r-4); }
.r-campo label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--r-tinta-2);
    margin-bottom: var(--r-2);
}
.r-campo input[type="text"],
.r-campo input[type="email"],
.r-campo input[type="tel"],
.r-campo select,
.r-campo textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--r-3) var(--r-4);
    border: 0;
    border-radius: var(--r-radio-sm);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde-fuerte);
    font-family: var(--r-sans);
    font-size: 16px; /* menos hace que iOS haga zoom solo */
    color: var(--r-tinta);
    transition: box-shadow var(--r-transicion);
}
.r-campo input:focus, .r-campo select:focus, .r-campo textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--r-tinta);
}
.r-campo__ayuda { font-size: .78rem; color: var(--r-gris); margin-top: var(--r-2); }

.r-check {
    display: flex; gap: var(--r-3);
    align-items: flex-start;
    padding: var(--r-3) 0;
    font-size: .88rem; line-height: 1.5;
    color: var(--r-tinta-3);
    cursor: pointer;
}
.r-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--r-rojo); }

/* Medio de pago */
.r-pagos { display: grid; gap: var(--r-3); margin-bottom: var(--r-4); }
.r-pago {
    display: flex; align-items: center; gap: var(--r-3);
    padding: var(--r-4);
    border-radius: var(--r-radio);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde);
    cursor: pointer;
    transition: box-shadow var(--r-transicion);
}
.r-pago:has(input:checked) { box-shadow: inset 0 0 0 2px var(--r-tinta); }
.r-pago input { width: 22px; height: 22px; accent-color: var(--r-tinta); flex: 0 0 auto; }
.r-pago__t { font-weight: 600; font-size: .95rem; }
.r-pago__d { font-size: .8rem; color: var(--r-gris); }

/* ==========================================================
   Avisos
   ========================================================== */
.r-aviso {
    padding: var(--r-4);
    border-radius: var(--r-radio);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: var(--r-4);
}
.r-aviso--error  { background: var(--r-rojo-suave);   color: #8a2a20; box-shadow: inset 0 0 0 1px var(--r-rojo-borde); }
.r-aviso--ok     { background: var(--r-ok-suave);     color: #1f5f45; box-shadow: inset 0 0 0 1px #cfe7dc; }
.r-aviso--espera { background: var(--r-espera-suave); color: #7d5716; box-shadow: inset 0 0 0 1px #f0e2c4; }

/* ==========================================================
   Confianza
   ========================================================== */

/* ==========================================================
   Comprobante
   ========================================================== */
.r-comprobante {
    background: var(--r-superficie);
    border-radius: var(--r-radio-lg);
    box-shadow: var(--r-sombra);
    overflow: hidden;
}
.r-comprobante__cabeza {
    padding: var(--r-6) var(--r-5);
    text-align: center;
    background: var(--r-tinta);
    color: #fff;
}
.r-comprobante__folio {
    font-family: var(--r-display);
    font-size: 2rem; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.r-comprobante__cuerpo { padding: var(--r-5); }

.r-misnumeros {
    display: flex; flex-wrap: wrap; gap: var(--r-2);
    margin: var(--r-4) 0;
}
.r-misnumeros span {
    padding: var(--r-2) var(--r-3);
    border-radius: var(--r-radio-sm);
    background: var(--r-tinta);
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
}

.r-datos { display: grid; gap: var(--r-3); }
.r-datos__fila {
    display: flex; justify-content: space-between; gap: var(--r-4);
    padding-bottom: var(--r-3);
    border-bottom: 1px solid var(--r-borde);
    font-size: .92rem;
}
.r-datos__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.r-datos__k { color: var(--r-gris); }
.r-datos__v {
    font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;   /* un correo largo no puede romper la tarjeta */
    min-width: 0;
}

.r-cuenta {
    font-family: var(--font-family-mono, monospace);
    font-size: .9rem;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--r-4);
    border-radius: var(--r-radio-sm);
    background: var(--r-superficie-2);
}

.r-reloj {
    display: inline-flex; align-items: center; gap: var(--r-2);
    padding: var(--r-2) var(--r-4);
    border-radius: var(--r-pill);
    background: var(--r-espera-suave);
    color: var(--r-espera);
    font-weight: 600; font-size: .88rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Páginas del CMS — bases, privacidad, términos
   ==========================================================
   El cuerpo lo escribe el admin en HTML suelto, así que los
   estilos van por etiqueta y no por clase.
   ========================================================== */
.r-pagina {
    max-width: var(--r-ancho-txt);
    color: var(--r-tinta-2);
    line-height: 1.75;
}
.r-pagina > h1 { margin-bottom: var(--r-6); }
.r-pagina h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--r-tinta);
    margin: var(--r-7) 0 var(--r-3);
    padding-top: var(--r-5);
    box-shadow: inset 0 1px 0 var(--r-borde);
}
.r-pagina h2:first-of-type { padding-top: 0; box-shadow: none; margin-top: 0; }
.r-pagina h3 {
    font-size: 1.05rem; font-weight: 600; color: var(--r-tinta);
    margin: var(--r-5) 0 var(--r-2);
}
.r-pagina p { margin: 0 0 var(--r-4); }
.r-pagina ul, .r-pagina ol { margin: 0 0 var(--r-4); padding-left: var(--r-5); }
.r-pagina li { margin-bottom: var(--r-2); }
.r-pagina strong { color: var(--r-tinta); font-weight: 600; }
.r-pagina a {
    color: var(--r-rojo);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--r-rojo-borde);
}
.r-pagina a:hover { color: var(--r-rojo-hover); text-decoration-color: currentColor; }
.r-pagina em { color: var(--r-gris); }
/* Los campos entre corchetes de las plantillas legales, a la vista: son deuda. */
.r-pagina table { width: 100%; border-collapse: collapse; margin: 0 0 var(--r-4); }
.r-pagina th, .r-pagina td {
    text-align: left; padding: var(--r-3) 0;
    box-shadow: inset 0 -1px 0 var(--r-borde);
}

/* ==========================================================
   Estado vacío
   ========================================================== */
.r-vacio {
    padding: var(--r-7) var(--r-5);
    text-align: center;
    color: var(--r-gris);
}
.r-vacio__t { font-family: var(--r-display); font-size: 1.4rem; color: var(--r-tinta); margin-bottom: var(--r-2); }

/* ==========================================================
   Pie
   ========================================================== */
.r-pie {
    background: var(--r-tinta);
    color: rgba(255, 255, 255, .62);
    padding: var(--r-7) 0 var(--r-6);
    font-size: .88rem;
}
.r-pie a { color: rgba(255, 255, 255, .82); text-decoration-color: rgba(255, 255, 255, .3); }
.r-pie__legal { margin-top: var(--r-5); font-size: .78rem; color: rgba(255, 255, 255, .58); line-height: 1.7; }
.r-pie__links { display: flex; flex-wrap: wrap; gap: var(--r-4); margin-top: var(--r-3); }

/* ==========================================================
   Escritorio
   ========================================================== */
@media (min-width: 640px) {
    .r-wrap { padding: 0 calc(var(--r-marco) + var(--r-6)); }
    .r-hero > .r-wrap,
    .r-cierre .r-wrap { padding: 0 var(--r-6); }
    .r-hero__acciones { flex-direction: row; }
    .r-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* Pantallas grandes: quedarse en 1.120 px con 400 px de margen a cada lado
   desperdicia la pantalla y encoge el hero. El ancho crece por tramos y no
   con un porcentaje, para que las líneas de texto sigan siendo legibles: los
   párrafos tienen su propio tope en --r-ancho-txt. */
@media (min-width: 1440px) { :root { --r-ancho: 1280px; } }
@media (min-width: 1700px) { :root { --r-ancho: 1400px; } }
@media (min-width: 1920px) { :root { --r-ancho: 1520px; } }

@media (min-width: 960px) {
    .r-seccion { padding: var(--r-8) 0; }
    /* Va después de .r-seccion a propósito: misma especificidad, gana el orden */
    .r-seccion--ajustada { padding: var(--r-6) 0; }
    .r-hero { padding: var(--r-8) 0; }
    .r-hero__grid { display: block; }
}

/* ==========================================================
   Cinta de compra — aparece al dejar atrás el hero
   ==========================================================
   El hero ya tiene su llamada a la acción; esta la reemplaza
   cuando sale de pantalla, para no perder el botón de compra
   en una página larga.
   ========================================================== */
.r-cinta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: var(--r-3) var(--r-4) calc(var(--r-3) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 var(--r-borde), 0 -12px 28px -22px rgba(20, 22, 26, .6);
    transform: translateY(120%);
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.r-cinta--visible { transform: translateY(0); }
/* Mientras el banner está abajo, el pie necesita ese alto de más para que el
   banner no le tape la última línea. Va sobre el pie y no sobre el body: el
   padding del body no siempre entra en el alto de scroll. */
body:has(.r-cinta--visible) .r-pie { padding-bottom: calc(var(--r-7) + 76px); }

.r-cinta__fila {
    display: flex;
    align-items: center;
    gap: var(--r-4);
    width: 100%;
    max-width: var(--r-ancho);
    margin: 0 auto;
}
.r-cinta__texto { flex: 1; min-width: 0; }
.r-cinta__t {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-cinta__d { font-size: .8rem; color: var(--r-gris); }
.r-cinta .r-btn { flex: 0 0 auto; }
/* En pantallas angostas el precio del texto importa más que el rótulo largo. */
@media (max-width: 419px) { .r-cinta__mas { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .r-cinta { transition: none; }
}

/* ==========================================================
   Mapa — dónde queda el premio
   ==========================================================
   Las teselas de OpenStreetMap vienen saturadas para un mapa de
   navegación. Acá el mapa es contexto, no la protagonista: se le
   baja el color con un filtro para que el pin rojo y la foto del
   hero sigan siendo lo que manda.
   ========================================================== */
.r-mapa { display: grid; gap: var(--r-5); }

.r-mapa__lienzo {
    position: relative;
    height: 340px;
    border-radius: var(--r-radio-lg);
    overflow: hidden;
    background: var(--r-superficie-2);
    box-shadow: inset 0 0 0 1px var(--r-borde);
    z-index: 0;                       /* contiene los z-index de Leaflet */
}

.r-mapa__lienzo .leaflet-tile-pane {
    filter: saturate(.62) contrast(1.04) brightness(1.03);
}

.r-mapa__lienzo .leaflet-container {
    height: 100%;
    background: var(--r-superficie-2);
    font-family: var(--r-sans);
    outline: none;
}

/* Controles: los de fábrica son de 2010 */
.r-mapa__lienzo .leaflet-control-zoom {
    border: 0;
    box-shadow: var(--r-sombra);
    border-radius: 12px;
    overflow: hidden;
}
.r-mapa__lienzo .leaflet-control-zoom a {
    width: 34px; height: 34px; line-height: 34px;
    border: 0;
    background: var(--r-superficie);
    color: var(--r-tinta);
    font-size: 17px; font-weight: 500;
}
.r-mapa__lienzo .leaflet-control-zoom a:hover { background: var(--r-superficie-2); }
.r-mapa__lienzo .leaflet-control-attribution {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    font-size: 10px;
    color: var(--r-gris);
    padding: 2px 8px;
    border-radius: 8px 0 0 0;
}
.r-mapa__lienzo .leaflet-control-attribution a { color: var(--r-gris); }

/* Pin del premio: punto rojo con halo que late */
.r-pin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 18px;
    height: 18px;
}
.r-pin__punto {
    position: absolute;
    inset: 0 auto 0 0;
    width: 18px;
    border-radius: 50%;
    background: var(--r-rojo);
    box-shadow: 0 0 0 3px #fff, 0 4px 12px -2px rgba(20, 22, 26, .45);
}
.r-pin__halo {
    position: absolute;
    inset: 0 auto 0 0;
    width: 18px;
    border-radius: 50%;
    background: var(--r-rojo);
    opacity: .35;
    animation: r-halo 2.4s ease-out infinite;
}
/* Se llamaba r-latir, igual que el latido del botón de compra: dos
   @keyframes con el mismo nombre no conviven, gana el último, y el halo del
   mapa terminaba latiendo como botón. */
@keyframes r-halo {
    0%   { transform: scale(1);   opacity: .35; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .r-pin__halo { animation: none; opacity: .2; }
}

/* Color por tipo de hito. El par (trazo, tinte) se comparte entre el marcador
   del mapa y la lista del costado, así el ojo hace la conexión sin esfuerzo. */
.r-tipo--lago   { --r-tipo: var(--r-lago);    --r-tipo-suave: var(--r-lago-suave); }
.r-tipo--salto  { --r-tipo: var(--r-lago);    --r-tipo-suave: var(--r-lago-suave); }
.r-tipo--volcan { --r-tipo: var(--r-rojo);    --r-tipo-suave: var(--r-rojo-suave); }
.r-tipo--termas { --r-tipo: var(--r-ambar);   --r-tipo-suave: var(--r-ambar-suave); }
.r-tipo--pueblo { --r-tipo: var(--r-verde);   --r-tipo-suave: var(--r-verde-suave); }
.r-tipo--lugar  { --r-tipo: var(--r-tinta-3); --r-tipo-suave: var(--r-superficie-2); }
.r-tipo--rojo   { --r-tipo: var(--r-rojo);    --r-tipo-suave: var(--r-rojo-suave); }
.r-tipo--azul   { --r-tipo: var(--r-lago);    --r-tipo-suave: var(--r-lago-suave); }
.r-tipo--verde  { --r-tipo: var(--r-verde);   --r-tipo-suave: var(--r-verde-suave); }
.r-tipo--ambar  { --r-tipo: var(--r-ambar);   --r-tipo-suave: var(--r-ambar-suave); }

/* Marcador: chip blanco con el icono en color y la etiqueta al lado. Un punto
   negro repetido obliga a leer todas las etiquetas; el icono se reconoce solo. */
.r-hito {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.r-hito__ico {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: #fff;
    color: var(--r-tipo, var(--r-tinta));
    box-shadow: 0 2px 8px -2px rgba(20, 22, 26, .45), inset 0 0 0 1px rgba(20, 22, 26, .08);
    transition: transform var(--r-transicion);
}
.r-hito__ico svg { width: 15px; height: 15px; }
.r-hito:hover .r-hito__ico { transform: scale(1.14); }
/* Etiqueta del pin: como la de los hitos pero con el peso de la marca. */
.r-pin__nombre {
    position: absolute;
    left: 26px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    background: var(--r-rojo);
    padding: 2px 8px;
    border-radius: 7px;
    box-shadow: 0 2px 8px -2px rgba(20, 22, 26, .45);
}

.r-hito__nombre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--r-tinta);
    background: rgba(255, 255, 255, .9);
    padding: 2px 7px;
    border-radius: 7px;
    box-shadow: 0 1px 4px -1px rgba(20, 22, 26, .25);
}

/* Listado de hitos, al costado del mapa */
.r-hitos { margin: 0; }
.r-hitos__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--r-4);
    padding: var(--r-3) 0;
    box-shadow: inset 0 -1px 0 var(--r-borde);
}
.r-hitos__fila:last-child { box-shadow: none; }
.r-hitos__n {
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: var(--r-3);
}
.r-hitos__ico {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px;
    color: var(--r-tipo, var(--r-tinta));
    background: var(--r-tipo-suave, var(--r-superficie-2));
}
.r-hitos__ico svg { width: 17px; height: 17px; }
.r-hitos__d { font-size: .82rem; color: var(--r-gris); display: block; font-weight: 400; }
.r-hitos__km {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--r-gris);
    font-variant-numeric: tabular-nums;
}

.r-mapa__nota {
    font-size: .82rem;
    color: var(--r-gris);
    line-height: 1.6;
    margin: var(--r-4) 0 0;
}

@media (min-width: 860px) {
    .r-mapa { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--r-6); align-items: start; }
    .r-mapa__lienzo { height: 460px; }
}

/* ==========================================================
   Color por bloque
   ==========================================================
   Los tintes van en el fondo de la sección, nunca en los
   botones: la acción sigue siendo roja en toda la página para
   que nadie tenga que aprender qué color se toca.
   ========================================================== */
.r-seccion--verde { background: var(--r-verde-suave); }
.r-seccion--lago  { background: var(--r-lago-suave); }
.r-seccion--ambar { background: var(--r-ambar-suave); }

.r-eyebrow--verde { color: var(--r-verde); }
.r-eyebrow--lago  { color: var(--r-lago); }
.r-eyebrow--ambar { color: var(--r-ambar); }

/* ==========================================================
   Cierre — la última llamada antes del pie
   ========================================================== */
.r-cierre {
    position: relative;
    overflow: hidden;
    margin: var(--r-marco);
    border-radius: var(--r-radio-lg);
    padding: var(--r-8) var(--r-5);
    text-align: center;
    color: #fff;
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(240, 86, 63, .55), transparent 55%),
        radial-gradient(120% 140% at 90% 100%, rgba(14, 122, 90, .5), transparent 55%),
        linear-gradient(150deg, #1a1d24, #0d0f13);
}
.r-cierre__titulo {
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: var(--r-track-display);
    color: #fff;
    margin: 0 auto var(--r-3);
    max-width: 18ch;
    text-wrap: balance;
}
.r-cierre__bajada {
    margin: 0 auto var(--r-5);
    max-width: 46ch;
    color: rgba(255, 255, 255, .74);
}
.r-cierre__nota {
    margin: var(--r-4) 0 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}

@media (min-width: 860px) {
    .r-cierre { border-radius: var(--r-radio-xl); }
}


/* Enlaces de texto dentro del contenido. Se marcan con clase en vez de un
   selector amplio: el mapa mete sus propios <a> sin clase (la atribución de
   Leaflet) y no deben teñirse de rojo. */
.r-enlace {
    color: var(--r-rojo);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--r-rojo-borde);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: text-decoration-color var(--r-transicion);
}
.r-enlace:hover { color: var(--r-rojo-hover); text-decoration-color: currentColor; }

/* La mecánica del sorteo: el dato que sostiene la credibilidad. */
.r-mecanica {
    display: flex;
    gap: var(--r-4);
    align-items: flex-start;
    margin-top: var(--r-5);
    padding: var(--r-5);
    border-radius: var(--r-radio-lg);
    background: var(--r-ambar-suave);
    box-shadow: inset 0 0 0 1px var(--r-ambar-borde);
}
.r-mecanica__ico {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--r-superficie);
    color: var(--r-ambar);
    box-shadow: inset 0 0 0 1px var(--r-ambar-borde);
}
.r-mecanica__ico svg { width: 20px; height: 20px; }
.r-mecanica__d {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--r-tinta-2);
}

.r-legal {
    margin: var(--r-5) 0 0;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--r-gris-claro);
}

/* Cabecera institucional: contraste estable y una sola acción principal. */
.r-cab {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    color: #20262b;
    border-bottom: 1px solid #dededb;
}
.r-cab__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1440px;
    min-height: 68px;
    margin: 0 auto;
    padding: 10px 24px;
    background: #fff;
}
.r-cab__marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.r-cab__escudo { display: grid; place-items: center; flex-shrink: 0; color: #a92722; }
.r-cab__escudo svg { width: 32px; height: 36px; }
/* El logo del panel puede ser un escudo redondo o un logotipo ancho: se fija
   el alto y el ancho se acomoda, con tope para que no empuje el menú. */
.r-cab__logo { flex-shrink: 0; width: auto; height: 42px; max-width: 140px; object-fit: contain; }
.r-cab__identidad { display: grid; gap: 4px; min-width: 0; }
.r-cab__nombre { font-size: 15px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.r-cab__institucion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; font-size: 11px; font-weight: 500; color: #656b70; line-height: 1.25; }
.r-cab__menu { display: none; align-items: center; gap: 22px; margin-left: auto; }
.r-cab__menu a, .r-cab__consulta { color: #454b50; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.r-cab__menu a:hover, .r-cab__consulta:hover { color: #a92722; text-decoration: underline; text-underline-offset: 5px; }
.r-cab__menu [aria-current="page"] { color: #a92722; }
.r-cab__compania-ico { display: none; }
.r-cab__acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.r-cab__consulta { display: none; }
.r-cab .r-btn--primario { border-radius: var(--r-pill); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); transform: none; }
.r-cab .r-btn--primario:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); transform: none; }
.r-cab__cta { min-height: 44px; padding: 0 18px; font-size: 13px; font-weight: 600; }
.r-cab__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 1px solid #dededb; border-radius: 5px; background: #fff; cursor: pointer; }
.r-cab__burger:hover { background: #f3f3f0; }
.r-cab__burger span { display: block; width: 18px; height: 2px; background: #30383e; transition: transform 160ms, opacity 160ms; }
.r-cab--abierta .r-cab__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.r-cab--abierta .r-cab__burger span:nth-child(2) { opacity: 0; }
.r-cab--abierta .r-cab__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.r-cab a:focus-visible, .r-cab button:focus-visible { outline: 3px solid #a92722; outline-offset: 4px; }
.r-sin-scroll { overflow: hidden; }
.r-cab__panel { position: fixed; inset: 68px 0 0; background: #fff; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #dededb; }
.r-cab__panel-inner { display: flex; flex-direction: column; gap: 24px; max-width: 640px; margin: 0 auto; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); }
.r-cab__lista { display: grid; order: 0; }
.r-cab__lista a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid #e8e8e4; color: #242b30; text-decoration: none; }
.r-cab__lista a:hover { color: #a92722; }
.r-cab__lista-texto { flex: 1; display: grid; gap: 4px; }
.r-cab__lista-t { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.r-cab__lista-d { font-size: 12px; color: #686e72; }
.r-cab__lista-flecha { color: #71777b; }
.r-cab__lista-flecha svg { width: 18px; height: 18px; }
.r-cab__tarjeta { order: 1; display: grid; gap: 6px; padding: 18px 20px; border-left: 3px solid #a92722; background: #f5f5f2; color: #242b30; text-decoration: none; }
.r-cab__tarjeta-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #a92722; }
.r-cab__tarjeta-t { font-size: 18px; font-weight: 600; }
.r-cab__tarjeta-d { font-size: 13px; color: #686e72; }
.r-cab__tarjeta-link { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-top: 6px; }
.r-cab__tarjeta-link svg { width: 16px; height: 16px; }
.r-cab__panel-pie { order: 2; display: grid; gap: 16px; }
.r-cab__panel-canales { display: flex; justify-content: space-between; gap: 12px; }
.r-cab__canal { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12px; color: #525a60; text-decoration: none; }
.r-cab__canal svg { width: 18px; height: 18px; }
.r-cab__canal--sos .r-num { font-weight: 700; color: #a92722; }
@media (max-width: 639px) {
    .r-cab__inner { padding: 10px 16px; gap: 10px; }
    .r-cab__marca { gap: 7px; }
    .r-cab__escudo svg { width: 25px; height: 30px; }
    .r-cab__logo { height: 34px; max-width: 96px; }
    .r-cab__nombre { font-size: 11px; }
    .r-cab__institucion { font-size: 10px; max-width: 180px; }
    .r-cab__acciones { gap: 8px; }
    .r-cab__cta { padding: 0 12px; font-size: 12px; }
    .r-cab__panel-inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 359px) {
    .r-cab__inner { padding-left: 10px; padding-right: 10px; gap: 6px; }
    .r-cab__escudo { display: none; }
    .r-cab__nombre { font-size: 10px; }
}
@media (min-width: 1200px) {
    .r-cab__menu { display: flex; }
    .r-cab__consulta { display: inline-block; }
    .r-cab__burger { display: none; }
    .r-cab__panel { display: none !important; }
    .r-cab__acciones { margin-left: 8px; padding-left: 20px; border-left: 1px solid #dededb; }
}
@media (prefers-reduced-motion: reduce) { .r-cab__burger span { transition: none; } }

/* La cabecera pegajosa tapa el destino de cualquier ancla si no se le deja aire. */
.r-seccion[id],
[id="donde"], [id="premio"], [id="comprar"], [id="como-funciona"] { scroll-margin-top: 76px; }

/* ==========================================================
   Checkout — "Confirma tu compra"
   ==========================================================
   Antes era una columna angosta con una tarjeta de totales
   arriba y el formulario debajo: al llenar los campos, el
   resumen quedaba fuera de pantalla justo cuando más sostiene
   la decisión. Ahora va en dos columnas con el resumen pegado
   al scroll, y el premio aparece arriba de todo para recordar
   qué se está comprando.
   ========================================================== */

/* Progreso del flujo, en la cabecera compacta */
.r-pasos-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-4);
    margin: 0 0 var(--r-3);
    padding: 0;
    list-style: none;
}
.r-pasos-nav__i {
    display: inline-flex;
    align-items: center;
    gap: var(--r-2);
    font-size: .8rem;
    color: rgba(255, 255, 255, .45);
}
.r-pasos-nav__i span {
    display: grid;
    place-items: center;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: .72rem;
    font-weight: 600;
}
.r-pasos-nav__i--hecho  { color: rgba(255, 255, 255, .7); }
.r-pasos-nav__i--hecho span  { background: rgba(255, 255, 255, .2); color: #fff; }
.r-pasos-nav__i--actual { color: #fff; font-weight: 600; }
.r-pasos-nav__i--actual span { background: var(--r-rojo); color: #fff; }

/* Entrada suave de cada bloque */
@keyframes r-entrar {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.r-entra {
    animation: r-entrar 480ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: var(--r-demora, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .r-entra { animation: none; }
}

.r-compra { display: grid; gap: var(--r-5); align-items: start; }
/* El checkout no aprovecha el ancho extra: un campo de nombre de 1.000 px se
   lee peor que uno de 600. Se queda en su tamaño y se centra bajo el título,
   que también va centrado. */
@media (min-width: 1440px) {
    .r-compra { max-width: 1180px; margin-inline: auto; }
}
.r-compra__form { display: grid; gap: var(--r-4); }

.r-bloque-form {
    padding: var(--r-5);
    border-radius: var(--r-radio-lg);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde), var(--r-sombra-sm);
}
.r-bloque-form__t {
    display: flex;
    align-items: center;
    gap: var(--r-3);
    margin: 0 0 var(--r-5);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.r-bloque-form__n {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--r-rojo-suave);
    color: var(--r-rojo);
    font-size: .82rem;
    font-weight: 700;
}

/* --- Medios de pago --- */
.r-pagos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-3); }
.r-pago { display: block; cursor: pointer; }
.r-pago input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.r-pago__cara {
    display: flex;
    align-items: center;
    gap: var(--r-4);
    padding: var(--r-4);
    border-radius: var(--r-radio);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde);
    transition: box-shadow var(--r-transicion), background var(--r-transicion);
}
.r-pago:hover .r-pago__cara { box-shadow: inset 0 0 0 1px var(--r-borde-fuerte); }
.r-pago input:focus-visible + .r-pago__cara { outline: 2px solid var(--r-rojo); outline-offset: 2px; }
.r-pago input:checked + .r-pago__cara {
    background: var(--r-rojo-suave);
    box-shadow: inset 0 0 0 2px var(--r-rojo);
}

.r-pago__ico {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--r-superficie-2);
    color: var(--r-tinta-3);
    transition: background var(--r-transicion), color var(--r-transicion);
}
.r-pago input:checked + .r-pago__cara .r-pago__ico { background: #fff; color: var(--r-rojo); }

.r-pago__txt { flex: 1; min-width: 0; }
.r-pago__t { display: block; font-weight: 600; }
.r-pago__d { display: block; font-size: .85rem; color: var(--r-gris); }

.r-pago__check {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--r-rojo);
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--r-transicion), transform var(--r-transicion);
}
.r-pago input:checked + .r-pago__cara .r-pago__check { opacity: 1; transform: scale(1); }

/* --- Resumen --- */
.r-resumen {
    border-radius: var(--r-radio-lg);
    overflow: hidden;
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde), var(--r-sombra);
}

.r-resumen__premio {
    display: flex;
    align-items: center;
    gap: var(--r-4);
    padding: var(--r-5);
    color: #fff;
    background:
        radial-gradient(120% 160% at 0% 100%, rgba(217, 45, 32, .55), transparent 60%),
        linear-gradient(140deg, var(--r-tinta), #0d0f13);
}
.r-resumen__regalo {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    animation: r-regalo 4.5s ease-in-out infinite;
}
@keyframes r-regalo {
    0%, 82%, 100% { transform: none; }
    86% { transform: rotate(-7deg) scale(1.05); }
    92% { transform: rotate(7deg) scale(1.05); }
}
.r-resumen__label {
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.r-resumen__t {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.r-resumen__cuerpo { padding: var(--r-5); }
.r-resumen__cuerpo .r-resumen__label { color: var(--r-gris); margin-bottom: var(--r-3); }

.r-resumen__nums {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--r-4);
}
.r-resumen__nums span {
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--r-tinta);
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
}

.r-resumen__azar {
    display: flex;
    gap: var(--r-2);
    align-items: flex-start;
    margin: 0 0 var(--r-4);
    padding: var(--r-3);
    border-radius: var(--r-radio-sm);
    background: var(--r-ambar-suave);
    box-shadow: inset 0 0 0 1px var(--r-ambar-borde);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--r-tinta-2);
}
.r-resumen__azar svg { flex: 0 0 auto; margin-top: 2px; color: var(--r-ambar); }

.r-resumen__fila,
.r-resumen__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--r-4);
    padding: var(--r-2) 0;
    font-size: .9rem;
}
.r-resumen__fila span:first-child { color: var(--r-gris); }
.r-resumen__total {
    margin-top: var(--r-2);
    padding-top: var(--r-3);
    border-top: 1px solid var(--r-borde);
    font-size: 1rem;
}
.r-resumen__total strong { font-size: 1.5rem; letter-spacing: -.03em; }

.r-resumen__cta { margin-top: var(--r-4); }

.r-resumen__nota {
    display: flex;
    gap: var(--r-2);
    align-items: flex-start;
    margin: var(--r-4) 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--r-gris);
}
.r-resumen__nota svg { flex: 0 0 auto; margin-top: 1px; }

.r-resumen__cambiar { margin: var(--r-3) 0 0; font-size: .85rem; text-align: center; }

.r-resumen__causa {
    display: flex;
    gap: var(--r-2);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--r-3) var(--r-4);
    background: var(--r-verde-suave);
    box-shadow: inset 0 1px 0 var(--r-verde-borde);
    font-size: .82rem;
    color: var(--r-verde);
    text-align: center;
}
.r-resumen__causa svg { flex: 0 0 auto; }

@media (min-width: 900px) {
    .r-compra {
        grid-template-columns: minmax(0, 1fr) 370px;
        gap: var(--r-6);
    }
    .r-compra__resumen { position: sticky; top: 88px; }
}

/* ==========================================================
   Movimiento del hero
   ==========================================================
   Pedido de la compañía: "que al abrir la página tenga un poco
   de movimiento". La primera impresión se juega en dos segundos.

   Tres piezas, todas con transform y opacidad —lo único que el
   navegador anima sin repintar—: la entrada escalonada del
   contenido, un resplandor que se desplaza muy lento sobre la
   foto sobre la que entra el contenido. Ninguna esconde información: si
   las animaciones no corren, el hero se ve completo.
   ========================================================== */
@keyframes r-subir {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
.r-sube {
    animation: r-subir 720ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: var(--r-demora, 0ms);
}

/* Resplandor cálido que cruza la foto en cámara lenta. Va en un
   pseudo-elemento propio para no tocar las capas de fondo del hero,
   que son las que garantizan el contraste del texto. */
.p-hero--vivo::before {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: radial-gradient(38% 42% at 30% 62%, rgba(248, 198, 168, .30), transparent 68%);
    animation: r-derivar 22s ease-in-out infinite alternate;
}
@keyframes r-derivar {
    from { transform: translate3d(-6%, 4%, 0) scale(1); }
    to   { transform: translate3d(8%, -5%, 0) scale(1.14); }
}

/* El boleto ya no flota: desde que lleva el formulario de compra, un movimiento
   perpetuo mueve los botones bajo el cursor. Entra con el resto y se queda
   quieto. El movimiento del hero lo cargan la foto y el texto. */

/* El botón principal del hero late una sola vez cada tanto: llama sin gritar. */
.r-btn--late { animation: r-latir 4.5s ease-in-out 1.6s infinite; }
@keyframes r-latir {
    0%, 88%, 100% { transform: none; }
    92%           { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .r-sube, .r-btn--late { animation: none; }
    .p-hero--vivo::before { animation: none; }
}
   Llamado a comprar
   ==========================================================
   La portada tiene que decir "compra tu número" antes que
   cualquier otra cosa, también en el teléfono, donde el boleto
   queda bajo el pliegue. Todo el movimiento es transform y
   opacidad, y se apaga con prefers-reduced-motion. Nada de lo
   que se mueve esconde información.
   ========================================================== */

/* "Venta abierta" con un punto que late: dice que se puede comprar ahora. */
.r-vivo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
    padding: 5px 11px 5px 9px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    color: #fff;
}
.r-vivo__punto {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}
.r-vivo__punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
    animation: r-halo 2s ease-out infinite;
}

/* El botón del hero: la acción principal, con una flecha que empuja hacia
   el boleto —al lado en escritorio, abajo en el teléfono—. */
.p-hero__cta { gap: 12px; font-size: 1.02rem; }
.r-hero__flecha {
    display: inline-block;
    font-size: 1.15em;
    line-height: 1;
    animation: r-empuje-x 1.6s ease-in-out infinite;
}
@keyframes r-empuje-x {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
@keyframes r-empuje-y {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50%      { transform: rotate(90deg) translateX(5px); }
}
@media (max-width: 859px) {
    .r-hero__flecha { animation-name: r-empuje-y; transform: rotate(90deg); }
    /* En el teléfono el botón va a todo el ancho: es lo primero que se toca. */
    .p-hero__cta { flex: 1 1 100%; max-width: 480px; }
}

/* Un brillo cruza el botón de compra cada tanto. Va en un pseudo-elemento
   para no tocar el rótulo, que cambia con la cantidad. */
.r-btn--brilla { position: relative; overflow: hidden; isolation: isolate; }
.r-btn--brilla::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: r-brillo 4.5s ease-in-out 1.2s infinite;
    pointer-events: none;
}
@keyframes r-brillo {
    0%, 62% { transform: translateX(-160%) skewX(-18deg); }
    86%, 100% { transform: translateX(320%) skewX(-18deg); }
}

/* El total del botón salta cuando cambia la cantidad. */
.r-cta--salta { display: inline-block; animation: r-salta 360ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes r-salta {
    0%   { transform: scale(.92); opacity: .6; }
    100% { transform: none; opacity: 1; }
}

/* La cantidad elegida se asienta con un pequeño rebote. */
.r-express__op input:checked + span { animation: r-asienta 280ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes r-asienta {
    0%   { transform: scale(.9); }
    100% { transform: none; }
}

/* Los pasos: qué se decide aquí y qué pasa después de pagar. */
.r-paso {
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--r-rojo);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: 1px;
}
.r-express__t { font-size: 13px; color: #202c2d; }
.r-express__pasos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #202c2d;
}
.r-express__pasos .r-paso { background: #202c2d; }

/* El boleto late cuando lo llaman: al cargar la página, una vez, y cada vez
   que se aprieta "Comprar mi número". */
#boleto { scroll-margin-top: 88px; }
.p-hero--vivo .r-boleto.r-sube {
    animation: r-subir 720ms cubic-bezier(.16, 1, .3, 1) var(--r-demora, 0ms) both,
               r-llamado 1.5s ease-out 1.4s 1;
}
.p-hero--vivo .r-boleto.r-boleto--llamado { animation: r-llamado 1.5s ease-out 1; }
@keyframes r-llamado {
    0%   { box-shadow: 0 24px 64px #0004, 0 0 0 0 rgba(255, 210, 31, .85); transform: none; }
    18%  { transform: translateY(-4px); }
    40%  { transform: none; }
    100% { box-shadow: 0 24px 64px #0004, 0 0 0 22px rgba(255, 210, 31, 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .r-vivo__punto::after, .r-hero__flecha, .r-btn--brilla::after,
    .r-cta--salta, .r-express__op input:checked + span { animation: none; }
    .p-hero--vivo .r-boleto.r-sube, .p-hero--vivo .r-boleto.r-boleto--llamado { animation: none; }
}

/* ==========================================================
   Piel de la portada: lúdica, pero de bomberos
   ==========================================================
   Pedido de la compañía: un sitio más lúdico, que llame a comprar.
   La primera versión se fue al afiche de kermés —letra de
   caricatura, bordes negros gruesos, bloque rojo a rayas— y pesaba
   más que la institución. Esta es el punto medio: la estructura
   sobria de antes, con tres piezas que cargan el juego y la venta:

     · el amarillo reflectante de los uniformes, solo para la acción;
     · los packs con boletos en abanico;
     · la cinta que corre arriba.

   Va al final y en bloque para que se lea como una capa.
   ========================================================== */
:root {
    --r-sol:        #ffd21f;   /* amarillo reflectante: la acción */
    --r-sol-hover:  #ffc400;
    --r-papel:      #fff8e1;   /* papel de boleto */
    --r-papel-borde:#efe3bd;
    --r-juego:      var(--r-display);
}

/* --- La acción es amarilla, en todo el sitio --- */
.r-btn--primario {
    background: var(--r-sol);
    color: var(--r-tinta);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 22px -10px rgba(214, 150, 0, .85);
    font-weight: 700;
}
.r-btn--primario:hover { background: var(--r-sol-hover); color: var(--r-tinta); }
.r-btn--primario:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14); }
.r-btn--primario:focus-visible { outline: 2px solid var(--r-tinta); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .9); }

/* --- Cinta reflectante: la marquesina de arriba --- */
.r-tira {
    overflow: hidden;
    background: var(--r-sol);
    color: var(--r-tinta);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.r-tira__pista {
    display: flex;
    width: max-content;
    animation: r-correr 44s linear infinite;
}
.r-tira:hover .r-tira__pista { animation-play-state: paused; }
.r-tira__grupo {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 100vw;
    margin: 0;
    padding: 9px 0;
    list-style: none;
}
.r-tira__grupo li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 20px;
    white-space: nowrap;
}
.r-tira__grupo li::after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--r-rojo);
    transform: rotate(45deg);
}
@keyframes r-correr { to { transform: translateX(-50%); } }
/* --- Packs: la compra, por cantidad de oportunidades --- */
.r-packs { background: var(--r-papel); }
.r-packs__titulo {
    margin: 0;
    font-family: var(--r-juego);
    font-weight: 800;
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.05;
    letter-spacing: -.02em;
    word-spacing: .12em;
    text-align: center;
    color: var(--r-tinta);
}
.r-packs__titulo em { font-style: normal; color: var(--r-rojo); }
.r-packs__bajada {
    max-width: 58ch;
    margin: 14px auto 0;
    color: var(--r-tinta-3);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}
.r-packs__bajada strong { color: var(--r-tinta); }

/* Flex y no grid: con cinco packs la última fila queda centrada en vez de
   dejar un hueco a la derecha. */
.r-packs__grilla {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 14px;
    margin-top: 36px;
}
.r-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 calc(50% - 7px);
    max-width: calc(50% - 7px);
    padding: 22px 14px 16px;
    border-radius: 22px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--r-papel-borde), 0 14px 30px -22px rgba(60, 45, 0, .55);
    color: var(--r-tinta);
    text-align: center;
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms ease;
}
@media (min-width: 700px) {
    .r-packs__grilla { gap: 26px 18px; }
    .r-pack { flex: 1 1 190px; max-width: 250px; }
}
.r-pack:hover, .r-pack:focus-within {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--r-papel-borde), 0 26px 40px -24px rgba(60, 45, 0, .6);
}
/* El más llevado se distingue por el marco, no por gritar. */
.r-pack--top { box-shadow: inset 0 0 0 2px var(--r-sol), 0 14px 30px -22px rgba(60, 45, 0, .55); }
.r-pack--top:hover, .r-pack--top:focus-within { box-shadow: inset 0 0 0 2px var(--r-sol), 0 26px 40px -24px rgba(60, 45, 0, .6); }
.r-pack__sello {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--r-tinta);
    color: var(--r-sol);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}
.r-pack__eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--r-gris-claro);
}
/* El nombre es lo que se recuerda del pack: va grande y subrayado con el
   amarillo de la acción, como pasado con destacador. */
.r-pack__nombre {
    display: grid;
    place-items: center;
    min-height: 2.5em;
    margin: 6px 0 0;
    font-family: var(--r-juego);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
    word-spacing: .1em;
}
.r-pack__nombre mark {
    padding: 0 .14em;
    background: linear-gradient(transparent 56%, var(--r-sol) 56% 94%, transparent 94%);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Los boletos en abanico. Cada uno gira según su lugar en la mano. */
.r-pack__abanico { position: relative; width: 130px; height: 88px; margin: 14px 0 10px; }
.r-pack__boleto {
    --giro: calc((var(--i) - (var(--n) - 1) / 2) * 13deg);
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px;
    height: 72px;
    margin-left: -25px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--r-papel);
    box-shadow: inset 0 0 0 1.5px var(--r-tinta-2), 0 2px 5px -2px rgba(0, 0, 0, .4);
    transform-origin: 50% 135%;
    transform: rotate(var(--giro));
    transition: transform 240ms cubic-bezier(.34, 1.4, .64, 1);
}
.r-pack__boleto::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 17px;
    background: var(--r-rojo);
    box-shadow: inset 0 0 0 1.5px var(--r-tinta-2);
}
.r-pack__boleto::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 27px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--r-sol);
    box-shadow: inset 0 0 0 1.5px var(--r-tinta-2);
}
.r-pack__boleto i {
    position: absolute;
    inset: auto 7px 13px;
    border-top: 1.5px dashed #cfc7ae;
}
.r-pack:hover .r-pack__boleto,
.r-pack:focus-within .r-pack__boleto { transform: rotate(calc(var(--giro) * 1.4)); }

.r-pack__x {
    margin: 8px 0 0;
    font-family: var(--r-juego);
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--r-rojo);
}
.r-pack__precio { margin: 4px 0 0; font-family: var(--r-juego); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.r-pack__detalle { min-height: 2.7em; margin: 6px 0 14px; color: var(--r-gris); font-size: 12px; line-height: 1.35; }
.r-pack__btn { width: 100%; min-height: 46px; margin-top: auto; padding: 0 8px; font-size: 14px; }

.r-otra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    max-width: 660px;
    margin: 32px auto 0;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(20, 22, 26, .05);
    font-weight: 600;
}
.r-otra input {
    width: 130px;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--r-borde-fuerte);
    color: var(--r-tinta);
    font: inherit;
}
.r-otra input:focus-visible { outline: 2px solid var(--r-tinta); outline-offset: 1px; }
.r-otra__total { min-width: 6.5em; font-family: var(--r-juego); font-weight: 800; color: var(--r-rojo); }
.r-otra__total:empty { display: none; }
.r-packs__nota {
    margin: 18px auto 0;
    max-width: 62ch;
    color: var(--r-gris);
    font-size: .85rem;
    line-height: 1.6;
    text-align: center;
}
.r-packs__nota a { color: var(--r-tinta); }

@media (max-width: 419px) {
    .r-pack { padding: 20px 10px 14px; border-radius: 18px; }
    .r-pack__nombre { font-size: 19px; }
    .r-pack__abanico { transform: scale(.9); margin-top: 8px; }
    .r-pack__x { font-size: 38px; }
    .r-pack__precio { font-size: 19px; }
    .r-pack__btn { font-size: 13px; padding: 0 4px; }
    .r-pack__sello { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .r-tira__pista { animation: none; width: auto; }
    .r-tira__grupo { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; }
    .r-tira__grupo[aria-hidden="true"] { display: none; }
    .r-calco { animation: none; }
    .r-pack, .r-pack__boleto { transition: none; }
    .r-pack:hover, .r-pack:focus-within { transform: none; }
}

/* ==========================================================
   Campaña "Gana la parcela"
   ==========================================================
   Pedido de la compañía: un sitio más promocional, que venda la
   idea de ganar. La portada dice una sola cosa —con un número
   de $5.000 puedes quedarte con la parcela— y la repite en cada
   bloque con un dato distinto: el valor del premio, el número
   que sigue en la fila, las medidas del terreno.

   La pieza que carga el juego es el boleto del hero, con sus
   muescas de talón. Lo demás se queda quieto: letra de afiche,
   rojo de carro, amarillo reflectante para la acción.

   Va al final y en bloque para que se lea como una capa.
   ========================================================== */

/* --- Letra de afiche, en todo el sitio --- */
.r-titulo,
.r-cierre__titulo,
.r-packs__titulo,
.r-vacio__t,
.r-comprobante__folio {
    font-family: var(--r-display);
    font-weight: 800;
    letter-spacing: 0;
    word-spacing: 0;
    text-transform: uppercase;
    line-height: .94;
}
.r-titulo     { font-size: clamp(2.5rem, 8.6vw, 4rem); }
.r-titulo--sm { font-size: clamp(2.2rem, 7.2vw, 3.3rem); }
.r-hero--compacto .r-titulo { font-size: clamp(2.2rem, 7.5vw, 3.2rem); margin-bottom: 0; }
.r-eyebrow {
    font-family: var(--r-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
}
.r-bajada { font-size: 1.08rem; }

.r-btn { font-size: 1.02rem; }
.r-btn--primario {
    min-height: 54px;
    padding-inline: var(--r-5);
    font-family: var(--r-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Sobre fondos oscuros: el segundo botón, en blanco. */
.r-btn--claro { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.r-btn--claro:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* --- Cabecera --- */
.r-cab__nombre { max-width: 440px; font-family: var(--r-display); font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; text-wrap: balance; }
.r-cab__institucion { font-size: 12px; }
.r-cab__menu a, .r-cab__consulta { font-size: 15px; font-weight: 600; }
.r-cab__cta { min-height: 44px; padding: 0 18px; font-size: 1.12rem; }
.r-cab__lista-t { font-family: var(--r-display); font-size: 24px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.r-cab__lista-d { font-size: 13.5px; }
@media (max-width: 639px) {
    .r-cab__nombre { font-size: 13px; }
    .r-cab__institucion { font-size: 10.5px; }
    .r-cab__cta { padding: 0 14px; font-size: 1rem; }
}

/* --- Marquesina --- */
.r-tira { font-family: var(--r-display); font-size: 15px; letter-spacing: .12em; }
@media (max-width: 859px) { .r-tira { font-size: 13.5px; } }

/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */
.p-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 68px) 0 clamp(34px, 4vw, 52px);
    color: #fff;
    background:
        radial-gradient(70% 90% at 0% 100%, rgba(217, 45, 32, .42), transparent 65%),
        linear-gradient(100deg, rgba(9, 13, 17, .95) 0%, rgba(9, 13, 17, .8) 42%, rgba(9, 13, 17, .3) 100%),
        var(--r-hero-img) center 40% / cover no-repeat,
        var(--r-tinta);
}
.p-hero > .r-wrap { position: relative; z-index: 1; }
.p-hero__grid { display: grid; gap: 28px; align-items: center; }
.p-hero__mensaje { min-width: 0; }

.p-hero__estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    margin: 0 0 18px;
    font-family: var(--r-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .84);
}

/* El titular: tres renglones de afiche. El premio manda; "gana" lo anuncia en
   amarillo y la superficie va pegada como etiqueta. */
.p-hero__titular {
    margin: 0 0 24px;
    font-family: var(--r-display);
    font-size: clamp(64px, 23vw, 132px);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.005em;
    text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .4);
}
.p-hero__gana { display: block; margin-bottom: .1em; font-size: .42em; line-height: 1; color: var(--r-sol); }
.p-hero__premio { display: block; }
.p-hero__superficie {
    /* Bloque y no inline-block: en línea heredaría la caja de renglón del
       titular entero y quedaría colgando lejos del premio. */
    display: block;
    width: fit-content;
    margin-top: .42em;
    padding: .16em .42em .1em;
    border-radius: 8px;
    background: var(--r-sol);
    color: var(--r-tinta);
    font-size: .3em;
    line-height: 1;
    text-shadow: none;
    transform: rotate(-2deg);
}
.p-hero__otro { display: block; font-size: .5em; line-height: .94; overflow-wrap: anywhere; }

/* La cuenta: lo que pones contra lo que puedes ganar. */
.p-cuenta {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    margin: 0 0 22px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
}
.p-cuenta__lado { display: grid; align-content: center; gap: 3px; padding: 11px 13px 9px; background: #fff; color: var(--r-tinta); }
.p-cuenta__lado span { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--r-gris); white-space: nowrap; }
.p-cuenta__lado strong { font-family: var(--r-display); font-size: clamp(22px, 7vw, 46px); font-weight: 800; line-height: 1; letter-spacing: 0; }
.p-cuenta__lado--premio { background: var(--r-rojo); color: #fff; }
.p-cuenta__lado--premio span { color: rgba(255, 255, 255, .86); }
.p-cuenta__flecha {
    display: grid;
    place-items: center;
    padding: 0 9px;
    background: var(--r-tinta);
    color: var(--r-sol);
    font-family: var(--r-display);
    font-size: 22px;
    font-weight: 800;
}

.p-hero .r-bajada { max-width: 44ch; margin: 0 0 24px; font-size: 1.06rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.p-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.p-hero__cta { min-height: 62px; padding-inline: 30px; gap: 12px; font-size: 1.5rem; }
.p-hero__link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, .5); }
.p-hero__link:hover { text-decoration-color: var(--r-sol); }
.p-hero__cerrada {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    font-family: var(--r-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.p-hero__organiza { margin: 18px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .66); }

/* Las tres dudas de antes de comprar. */
.p-hero__tira {
    display: grid;
    gap: 14px 32px;
    margin: clamp(26px, 4vw, 48px) 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .24);
}
.p-hero__tira li { position: relative; padding-left: 30px; }
.p-hero__tira li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 3px;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--r-sol);
    border-bottom: 3px solid var(--r-sol);
    transform: rotate(-45deg);
}
.p-hero__tira strong { display: block; font-family: var(--r-display); font-size: 20px; font-weight: 700; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; }
.p-hero__tira span { display: block; margin-top: 3px; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .76); }

@media (max-width: 899px) {
    .p-hero {
        background:
            radial-gradient(100% 60% at 0% 55%, rgba(217, 45, 32, .3), transparent 70%),
            linear-gradient(180deg, rgba(9, 13, 17, .78) 0%, rgba(9, 13, 17, .6) 30%, rgba(9, 13, 17, .95) 70%),
            url("/assets/img/parcela-hero-sm.jpg") center top / cover no-repeat,
            var(--r-tinta);
    }
    /* En el teléfono el botón va a todo el ancho: es lo primero que se toca. */
    .p-hero__cta { flex: 1 1 100%; max-width: 480px; }
    .p-boleto-marco { width: 100%; max-width: 480px; margin-inline: auto; }
}
@media (min-width: 900px) {
    .p-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(360px, 31vw, 460px); gap: clamp(28px, 4vw, 72px); }
    .p-hero__titular { font-size: clamp(110px, 11.5vw, 190px); }
    .p-cuenta__lado { padding: 13px 20px 11px; }
    .p-cuenta__lado strong { font-size: clamp(34px, 3.6vw, 48px); }
    .p-cuenta__flecha { padding: 0 12px; font-size: 26px; }
    .p-hero__tira { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   El boleto: talón con el número de la fila + la compra
   ---------------------------------------------------------- */
/* La sombra va en el marco: el boleto lleva máscara y la máscara se la come. */
.p-boleto-marco { filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .5)); }
.r-boleto {
    --muesca: 152px;   /* cabecera (46) + talón (106): ahí va la línea de corte */
    overflow: hidden;
    border-radius: 22px;
    background: var(--r-papel);
    color: var(--r-tinta);
    text-align: center;
    -webkit-mask:
        radial-gradient(circle 11px at 0 var(--muesca), transparent 96%, #000) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle 11px at 100% var(--muesca), transparent 96%, #000) 0 0 / 100% 100% no-repeat;
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 11px at 0 var(--muesca), transparent 96%, #000) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle 11px at 100% var(--muesca), transparent 96%, #000) 0 0 / 100% 100% no-repeat;
    mask-composite: intersect;
}
#boleto { scroll-margin-top: 88px; }
.r-boleto__cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 22px;
    background: var(--r-rojo);
    color: #fff;
    font-family: var(--r-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.r-boleto__cab span:first-child { overflow: hidden; text-overflow: ellipsis; }

.r-boleto__cuerpo { padding: 22px 24px; }
.r-express__campo { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.r-express__t {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    font-family: var(--r-display);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--r-tinta);
}
.r-express__sub { margin: 0 0 14px; font-size: 13.5px; line-height: 1.4; color: var(--r-tinta-3); }
.r-express__ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.r-express__op { position: relative; display: block; cursor: pointer; }
.r-express__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.r-express__op span {
    display: grid;
    place-content: center;
    min-height: 58px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--r-papel-borde);
    font-family: var(--r-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    transition: box-shadow var(--r-transicion), background var(--r-transicion);
}
.r-express__op:hover span { box-shadow: inset 0 0 0 1.5px var(--r-tinta-3); }
.r-express__op input:checked + span { background: var(--r-sol); box-shadow: inset 0 0 0 2.5px var(--r-tinta); }
.r-express__op input:focus-visible + span { outline: 2px solid var(--r-tinta); outline-offset: 3px; }
.r-express__cta { min-height: 62px; padding-inline: 12px; font-size: 1.35rem; }
.r-express__pasos { font-size: 13.5px; }
.r-express__nota { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--r-gris); }
.r-express__nota a { color: var(--r-tinta); }

.r-boleto__pie { padding: 16px 24px 20px; background: #f7edc8; border-top: 1px solid var(--r-papel-borde); }
.r-boleto__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--r-tinta-3); }
.r-boleto__venta { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.r-boleto__venta strong { font-family: var(--r-display); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.r-boleto__venta span { font-size: 13.5px; font-weight: 600; color: var(--r-tinta-3); }
.r-boleto__pista { height: 8px; margin-top: 10px; border-radius: var(--r-pill); background: #e3d8ad; overflow: hidden; }
.r-boleto__pista > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--r-rojo); }
.r-boleto__disponibles { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--r-tinta-3); }
.r-boleto__cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.r-cuenta__u { display: grid; gap: 4px; justify-items: center; padding: 10px 4px 8px; border-radius: 12px; background: #fffdf3; border: 1px solid var(--r-papel-borde); box-shadow: 0 2px 0 rgba(0, 0, 0, .06); }
.r-cuenta__u strong { font-family: var(--r-display); font-size: clamp(26px, 8vw, 40px); font-weight: 800; line-height: 1; color: var(--r-tinta); }
.r-cuenta__u span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-tinta-3); }
.r-cuenta__u--seg { background: var(--r-rojo); border-color: var(--r-rojo); }
.r-cuenta__u--seg strong, .r-cuenta__u--seg span { color: #fff; }
.r-boleto__cuando { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--r-tinta-3); }

@media (max-width: 380px) {
    .r-boleto__cab { padding: 0 16px; font-size: 13px; letter-spacing: .08em; }
    .r-boleto__cuerpo { padding: 20px 16px; }
    .r-express__t { font-size: 24px; }
    .r-express__cta { font-size: 1.15rem; }
}

/* El boleto se sacude cuando lo llaman. Solo transform: con la máscara puesta,
   un anillo de sombra quedaría recortado. */
@keyframes r-llamado {
    0%   { transform: none; }
    18%  { transform: translateY(-9px) rotate(-.7deg); }
    42%  { transform: translateY(0) rotate(.5deg); }
    64%  { transform: translateY(-3px); }
    100% { transform: none; }
}
.r-boleto.r-boleto--llamado { animation: r-llamado 900ms ease-out 1; }
@media (prefers-reduced-motion: reduce) {
    .r-boleto.r-boleto--llamado { animation: none; }
}

/* ----------------------------------------------------------
   Siempre gana alguien
   ---------------------------------------------------------- */
.p-doble { padding: clamp(46px, 7vw, 88px) 0; background: var(--r-rojo); color: #fff; }
.p-doble__titulo {
    max-width: 13ch;
    margin: 0 0 clamp(22px, 3vw, 38px);
    font-family: var(--r-display);
    font-size: clamp(2.8rem, 10.5vw, 5.6rem);
    font-weight: 800;
    line-height: .88;
    text-transform: uppercase;
}
.p-doble__titulo em { font-style: normal; color: var(--r-sol); }
.p-doble__grid { display: grid; gap: 14px; }
.p-doble__caso { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-radio-lg); background: rgba(0, 0, 0, .22); }
.p-doble__caso--tu { background: var(--r-sol); color: var(--r-tinta); }
.p-doble__si { margin: 0 0 8px; font-family: var(--r-display); font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.p-doble__caso h3 { margin: 0 0 12px; font-family: var(--r-display); font-size: clamp(2.2rem, 4.6vw, 3.3rem); font-weight: 800; line-height: .94; text-transform: uppercase; }
.p-doble__caso p:last-child { margin: 0; font-size: 1.04rem; line-height: 1.55; }
.p-doble__caso a { display: inline-block; margin-top: 6px; color: inherit; font-weight: 700; text-underline-offset: 4px; }
.p-doble__caso a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
@media (min-width: 760px) {
    .p-doble__grid { grid-template-columns: 1.2fr 1fr; }
}
@media (min-width: 1100px) {
    .p-doble > .r-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 48px; align-items: center; }
    .p-doble__titulo { margin-bottom: 0; }
}

/* ----------------------------------------------------------
   Packs
   ---------------------------------------------------------- */
.r-packs__titulo { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: .9; }
.r-packs__bajada { font-size: 1.06rem; }
.r-pack__eyebrow { font-family: var(--r-display); font-size: 13px; }
.r-pack__nombre { font-size: 29px; line-height: 1.02; letter-spacing: 0; word-spacing: 0; text-transform: uppercase; }
.r-pack__x { font-size: 58px; letter-spacing: 0; }
.r-pack__precio { font-size: 28px; letter-spacing: 0; }
.r-pack__detalle { min-height: 0; font-size: 13.5px; }
.r-pack__btn { min-height: 48px; font-size: 1.15rem; }
.r-pack__sello { font-family: var(--r-display); font-size: 13px; letter-spacing: .1em; }
.r-otra { font-size: 1.02rem; }
.r-otra__total { font-size: 1.5rem; line-height: 1; }
@media (max-width: 419px) {
    .r-pack__nombre { font-size: 24px; }
    .r-pack__x { font-size: 48px; }
    .r-pack__precio { font-size: 24px; }
    .r-pack__btn { font-size: 1.05rem; }
    .r-pack__sello { font-size: 12px; }
}

/* ----------------------------------------------------------
   El premio
   ---------------------------------------------------------- */
.r-premio-panel { display: grid; border-radius: var(--r-radio-lg); overflow: hidden; background: #123b2f; color: #fff; }
.r-premio-visual { position: relative; min-height: 360px; margin: 0; }
.r-premio-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.r-premio-visual::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8, 24, 18, .7)); pointer-events: none; }
.r-premio-visual__sello {
    position: absolute;
    z-index: 1;
    left: 18px;
    top: 18px;
    padding: 8px 14px 5px;
    border-radius: 10px;
    background: var(--r-sol);
    color: var(--r-tinta);
    font-family: var(--r-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}
.r-premio-visual figcaption { position: absolute; z-index: 1; right: 14px; bottom: 10px; font-size: 11.5px; color: rgba(255, 255, 255, .86); }
.r-premio-tasacion { position: absolute; z-index: 1; left: 18px; bottom: 18px; padding: 13px 20px 10px; border-radius: 16px; background: #fff; color: var(--r-tinta); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .7); }
.r-premio-tasacion span { display: block; font-size: 12.5px; font-weight: 600; color: var(--r-gris); }
.r-premio-tasacion strong { display: block; font-family: var(--r-display); font-size: clamp(38px, 4.6vw, 58px); font-weight: 800; line-height: 1; letter-spacing: 0; color: var(--r-rojo); }
.r-premio-editorial { align-self: center; padding: clamp(26px, 4vw, 52px); }
.r-premio-editorial__intro { margin: 0 0 10px; font-family: var(--r-display); font-size: 17px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--r-sol); }
.r-premio-editorial h2 { margin: 0 0 20px; font-family: var(--r-display); font-size: clamp(2.7rem, 5.6vw, 4.6rem); font-weight: 800; line-height: .9; text-transform: uppercase; color: #fff; }
.p-medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.p-medidas li { min-width: 0; padding: 14px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .09); }
.p-medidas strong { display: block; font-family: var(--r-display); font-size: clamp(23px, 3vw, 36px); font-weight: 800; line-height: 1; letter-spacing: 0; color: var(--r-sol); white-space: nowrap; }
.p-medidas span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: #cfe1d8; }
.r-premio-editorial__descripcion { font-size: 1rem; line-height: 1.65; color: #dbe8e0; }
.r-premio-datos { display: grid; gap: 12px; margin: 22px 0; }
.r-premio-datos > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.r-premio-datos dt { font-size: 13.5px; color: #a9c4b7; }
.r-premio-datos dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }
.r-premio-invitacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.r-premio-invitacion > span { font-size: 13.5px; color: #dbe8e0; }
@media (min-width: 900px) {
    .r-premio-panel { grid-template-columns: 1.1fr 1fr; border-radius: var(--r-radio-xl); }
    .r-premio-visual { min-height: 660px; }
}

/* ----------------------------------------------------------
   Cómo funciona
   ---------------------------------------------------------- */
.r-como-campana { background: var(--r-papel); }
.r-recorrido { display: grid; gap: 14px; margin: 32px 0; padding: 0; list-style: none; }
.r-recorrido li { padding: 22px 20px 24px; border-radius: var(--r-radio-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--r-papel-borde); }
.r-recorrido__numero { display: block; margin-bottom: 14px; font-family: var(--r-display); font-size: 68px; font-weight: 800; line-height: .8; color: var(--r-rojo); }
.r-recorrido h3 { margin: 0 0 8px; font-family: var(--r-display); font-size: 27px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.r-recorrido p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--r-tinta-3); }
.r-como-campana .r-mecanica { background: #fff; box-shadow: inset 0 0 0 1px var(--r-papel-borde); }
@media (max-width: 699px) {
    .r-recorrido li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; }
    .r-recorrido__numero { margin: 4px 0 0; font-size: 56px; }
}
@media (min-width: 700px)  { .r-recorrido { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .r-recorrido { grid-template-columns: repeat(4, 1fr); } }

/* ----------------------------------------------------------
   Garantías
   ---------------------------------------------------------- */
.p-garantias__grid { display: grid; gap: 14px; margin-top: 28px; }
.p-garantia { padding: 22px 20px 24px; border-radius: var(--r-radio-lg); background: var(--r-superficie); box-shadow: var(--r-sombra-sm); }
.p-garantia__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--r-sol); color: var(--r-tinta); }
.p-garantia h3 { margin: 0 0 8px; font-family: var(--r-display); font-size: 26px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.p-garantia p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--r-tinta-3); }
.p-garantias .r-legal { color: var(--r-gris); }
@media (min-width: 700px)  { .p-garantias__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .p-garantias__grid { grid-template-columns: repeat(4, 1fr); } }

/* ----------------------------------------------------------
   Cierre y cinta de compra
   ---------------------------------------------------------- */
.r-cierre {
    padding: clamp(48px, 8vw, 96px) var(--r-5);
    background:
        radial-gradient(110% 130% at 10% 0%, rgba(217, 45, 32, .7), transparent 58%),
        linear-gradient(150deg, #1a1d24, #0d0f13);
}
.r-cierre__titulo { max-width: 15ch; margin-bottom: var(--r-4); font-size: clamp(2.8rem, 10vw, 5.4rem); line-height: .88; }
.r-cierre__titulo em { font-style: normal; color: var(--r-sol); }
.r-cierre__bajada { font-size: 1.08rem; color: rgba(255, 255, 255, .82); }
.r-cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.r-cierre__nota { font-size: .88rem; color: rgba(255, 255, 255, .62); }

.r-cinta { background: rgba(16, 18, 22, .95); color: #fff; box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, .9); }
.r-cinta__t { font-family: var(--r-display); font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; }
.r-cinta__d { font-size: .84rem; color: rgba(255, 255, 255, .68); }
.r-cinta .r-btn--primario { min-height: 50px; }

/* ----------------------------------------------------------
   Checkout, comprobante y consulta
   ---------------------------------------------------------- */
.r-bloque-form__t { font-family: var(--r-display); font-size: 1.7rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.r-bloque-form__n { width: 30px; height: 30px; background: var(--r-rojo); color: #fff; font-size: 1.05rem; }
.r-resumen__premio { background: var(--r-rojo); }
.r-resumen__label { font-family: var(--r-display); font-size: 14px; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.r-resumen__t { font-family: var(--r-display); font-size: 1.7rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.r-resumen__valor { margin: 6px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .88); }
.r-resumen__total strong { font-family: var(--r-display); font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: 0; }
.r-resumen__cta { min-height: 60px; font-size: 1.4rem; }

.r-comprobante__folio { font-size: clamp(3rem, 14vw, 4.6rem); letter-spacing: .02em; }
/* Compra confirmada: la cabeza del comprobante festeja. */
.r-comprobante__cabeza--ok { background: var(--r-sol); color: var(--r-tinta); }
.r-comprobante__cabeza--ok .r-eyebrow,
.r-comprobante__cabeza--ok .r-comprobante__pie { color: var(--r-tinta-2); }
.r-comprobante__pie { margin: var(--r-2) 0 0; font-size: .9rem; color: rgba(255, 255, 255, .66); }
.r-misnumeros span {
    padding: 8px 14px 5px;
    background: var(--r-papel);
    box-shadow: inset 0 0 0 1.5px var(--r-tinta-2), inset 0 6px 0 var(--r-rojo);
    color: var(--r-tinta);
    font-family: var(--r-display);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .03em;
}
/* Después de comprar: sumar otra oportunidad o pasar la rifa. */
.p-despues { display: grid; gap: 10px; margin-top: var(--r-5); padding: var(--r-5); border-radius: var(--r-radio-lg); background: var(--r-tinta); color: #fff; text-align: center; }
.p-despues__t { margin: 0; font-family: var(--r-display); font-size: 2rem; font-weight: 800; line-height: .95; text-transform: uppercase; }
.p-despues__d { margin: 0 0 6px; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }

/* --- Pie --- */
.r-pie__nombre { margin: 0 0 var(--r-3); font-family: var(--r-display); font-size: 2rem; font-weight: 800; line-height: 1; text-transform: uppercase; color: #fff; }
.r-pie { font-size: .95rem; }
@media (max-width: 479px) { .r-cab__cta-mas { display: none; } }
.r-resumen__azar span { min-width: 0; }

/* --- Video de la portada --- */
/* El fondo es .r-hero__video (más arriba). Acá solo se le pone el velo del hero
   nuevo, para que el texto se lea igual que sobre la foto, y el botón que lo
   abre con sonido. */
.p-hero .r-hero__video::after {
    background:
        radial-gradient(70% 90% at 0% 100%, rgba(217, 45, 32, .38), transparent 65%),
        linear-gradient(100deg, rgba(9, 13, 17, .93) 0%, rgba(9, 13, 17, .74) 42%, rgba(9, 13, 17, .3) 100%);
}
@media (max-width: 899px) {
    .p-hero .r-hero__video::after { background: linear-gradient(180deg, rgba(9, 13, 17, .78) 0%, rgba(9, 13, 17, .62) 30%, rgba(9, 13, 17, .95) 70%); }
}
.p-hero__play { gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.p-hero__play:focus-visible, .p-hero__link:focus-visible { outline: 2px solid var(--r-sol); outline-offset: 4px; border-radius: 4px; }

.p-video { width: min(960px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: var(--r-radio); background: #000; overflow: visible; }
.p-video::backdrop { background: rgba(9, 13, 17, .86); }
.p-video__marco { aspect-ratio: 16 / 9; border-radius: var(--r-radio); overflow: hidden; }
.p-video__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.p-video__cerrar {
    position: absolute;
    right: 0;
    top: -52px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--r-sol);
    color: var(--r-tinta);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* Descarga del PDF de las bases, en la portada. */
.r-bases-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: #fffdf3; border: 1px solid var(--r-papel-borde); }
.r-bases-pdf > svg { flex: none; color: var(--r-rojo); }
.r-bases-pdf > div { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.r-bases-pdf strong { font-size: 1.02rem; line-height: 1.3; }
.r-bases-pdf span { font-size: .88rem; color: var(--r-tinta-3); }
.r-bases-pdf .r-btn { flex: none; }
@media (max-width: 520px) { .r-bases-pdf .r-btn { width: 100%; justify-content: center; } }