/*
 * 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: institucional y confiable, no casino. El rojo de
 * bomberos aparece como acento —nunca como fondo de pantalla— y
 * el peso visual lo cargan el grafito, el aire y la tipografía.
 *
 * 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, que siguen siendo rojos para que la acción sea inconfundible. */
    --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 ---
       Una sola familia. Lo que separa el display del texto no es otra fuente:
       es el tamaño, el peso y el tracking negativo, que es de donde sale la
       elegancia de Inter en titulares grandes. */
    --r-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --r-display: var(--r-sans);
    --r-track-display: -.035em;   /* 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;
}

/* 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; }

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

/* ==========================================================
   Premio — la ficha con foto
   ========================================================== */
.r-premio { display: grid; gap: var(--r-5); }

.r-premio__foto {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-radio-lg);
    overflow: hidden;
    background: var(--r-superficie-2);
}
.r-premio__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.r-ficha { margin: var(--r-5) 0 0; }
.r-ficha__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--r-4);
    padding: var(--r-3) 0;
    box-shadow: inset 0 -1px 0 var(--r-borde);
}
.r-ficha__fila:last-child { box-shadow: none; }
.r-ficha__fila dt { font-size: .88rem; color: var(--r-gris); margin: 0; }
.r-ficha__fila dd { margin: 0; font-weight: 600; text-align: right; }

@media (min-width: 860px) {
    .r-premio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* ==========================================================
   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-latir 2.4s ease-out infinite;
}
@keyframes r-latir {
    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); }

/* Causa y respaldo: lectura editorial y detalles desplegables. */
.r-confianza { padding: 12px 0 48px; scroll-margin-top: 88px; }
.r-confianza__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px,7vw,100px); padding-top: 32px; border-top: 1px solid #dddfd9; }
.r-confianza__etiqueta { margin: 0 0 20px; color: #737976; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.r-confianza__causa h2 { font-size: clamp(28px,3vw,38px); line-height: 1.12; letter-spacing: -.045em; font-weight: 600; margin: 0 0 16px; color: #253d36; }
.r-confianza__causa > p:not(.r-confianza__etiqueta) { font-size: 14px; line-height: 1.65; color: #686f6c; max-width: 38ch; margin: 0 0 20px; }
.r-confianza a { display: inline-flex; align-items: center; gap: 14px; color: var(--r-rojo); font-size: 12px; font-weight: 600; text-decoration: none; min-height: 44px; }
.r-confianza a:hover { text-decoration: underline; text-underline-offset: 5px; }
.r-confianza__detalle { border-bottom: 1px solid #dddfd9; }
.r-confianza__detalle summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; color: #29322f; font-size: 14px; font-weight: 500; }
.r-confianza__detalle summary::-webkit-details-marker { display: none; }
.r-confianza__detalle summary > span { position: relative; width: 14px; height: 14px; flex-shrink: 0; color: #737976; }
.r-confianza__detalle summary > span::before, .r-confianza__detalle summary > span::after { content: ''; position: absolute; background: currentColor; width: 12px; height: 1px; left: 1px; top: 6px; }
.r-confianza__detalle summary > span::after { transform: rotate(90deg); }
.r-confianza__detalle[open] summary > span::after { transform: none; }
.r-confianza__detalle p { margin: -4px 32px 18px 0; color: #686f6c; font-size: 13px; line-height: 1.65; }
.r-confianza__bases { margin-top: 14px; }
.r-confianza summary:focus-visible, .r-confianza a:focus-visible { outline: 2px solid var(--r-rojo); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 719px) {
    .r-confianza { padding-bottom: 32px; }
    .r-confianza__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
    .r-confianza__causa > p:not(.r-confianza__etiqueta) { margin-bottom: 8px; }
    .r-confianza__etiqueta { margin-bottom: 14px; }
    .r-confianza__detalle summary { font-size: 13px; min-height: 56px; }
}

/* ==========================================================
   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; }

/* ==========================================================
   Cómo funciona — el flujo de compra
   ==========================================================
   Antes eran cuatro tarjetas con un número pálido y textos de
   largo desparejo: la de arriba quedaba medio vacía y la última
   desbordada. Ahora cada paso lleva icono, número de orden y una
   franja de color arriba, y las tarjetas se conectan con una
   línea para que se lea como una secuencia y no como una lista.
   El texto largo de la mecánica salió a su propio bloque.
   ========================================================== */
.r-flujo {
    position: relative;
    display: grid;
    gap: var(--r-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.r-flujo__paso {
    position: relative;
    z-index: 1;
    padding: var(--r-5) var(--r-4) var(--r-4);
    border-radius: var(--r-radio);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde), var(--r-sombra-sm);
    border-top: 3px solid var(--r-tipo, var(--r-borde-fuerte));
    transition: transform var(--r-transicion), box-shadow var(--r-transicion);
}
.r-flujo__paso:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--r-borde), var(--r-sombra);
}

.r-flujo__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--r-4);
}

.r-flujo__ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--r-tipo-suave, var(--r-superficie-2));
    color: var(--r-tipo, var(--r-tinta));
}
.r-flujo__ico svg { width: 21px; height: 21px; }

.r-flujo__n {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--r-tipo, var(--r-tinta));
    opacity: .28;
}

.r-flujo__t {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 var(--r-2);
}
.r-flujo__d {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--r-gris);
}

/* 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);
}

@media (min-width: 640px) {
    .r-flujo { grid-template-columns: repeat(2, 1fr); gap: var(--r-4); }
}

@media (min-width: 900px) {
    .r-flujo { grid-template-columns: repeat(4, 1fr); }

    /* Línea que une los pasos: pasa por detrás, a la altura de los iconos, y
       queda tapada por las tarjetas salvo en los huecos. */
    .r-flujo::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 10%; right: 10%;
        top: calc(var(--r-5) + 3px + 22px);
        border-top: 2px dashed var(--r-borde-fuerte);
    }
}

@media (prefers-reduced-motion: reduce) {
    .r-flujo__paso:hover { transform: none; }
}

/* 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; }
.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 { background: var(--r-rojo); border-radius: var(--r-pill); box-shadow: none; transform: none; }
.r-cab .r-btn--primario:hover { background: var(--r-rojo-hover); box-shadow: none; 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__nombre { font-size: 13px; }
    .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: 12px; }
}
@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; }
}

/* Portada de campaña: premio protagonista y ficha inspirada en un boleto. */
.r-hero--campana {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 12px var(--r-marco) var(--r-marco);
    border-radius: var(--r-radio-xl);
    min-height: 700px;
    padding: 64px 0 72px;
    text-align: left;
    background-image: 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)), var(--r-hero-img);
}
.r-hero--campana .r-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) clamp(360px,30vw,470px); align-items: center; gap: clamp(28px,4vw,64px); }
.r-hero--campana .r-hero__insignia { padding: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; font-size: 12px; line-height: 1.5; max-width: 340px; margin-bottom: 32px; color: #dbe4e2; }
.r-hero--campana .r-campana__intro { color: #f8c6a8; font-size: 11px; letter-spacing: .16em; margin-bottom: 18px; }
.r-hero--campana .r-hero__premio { font-size: clamp(48px,6.1vw,86px); font-weight: 700; line-height: .99; letter-spacing: -.055em; max-width: 12ch; margin: 0 0 24px; }
.r-campana__ganar { display: block; font-size: .36em; font-weight: 500; letter-spacing: -.03em; margin-bottom: 14px; color: #f8c6a8; }
.r-hero--campana .r-bajada { margin: 0 0 30px; max-width: 44ch; font-size: 17px; line-height: 1.65; color: #e0e6e4; }
.r-hero--campana .r-hero__acciones { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 14px; }
.r-hero--campana .r-btn--primario { min-height: 56px; padding-inline: 28px; gap: 22px; font-weight: 600; }
.r-hero--campana .r-btn--fantasma { box-shadow: none !important; padding-inline: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 6px; }
/* Sin rotación: inclinada se leía como un error de maquetación, no como un
   guiño de diseño, y además desalineaba la tarjeta con el titular. */
.r-boleto { align-self: center; border-radius: 22px; background: #faf7ef; color: #202c2d; box-shadow: 0 24px 64px #0004; overflow: hidden; text-align: center; }
.r-boleto__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; color: white; background: var(--r-rojo); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.r-boleto__cuerpo { padding: 34px 28px 28px; }
.r-boleto__label { margin: 0; font-size: 12px; color: #59635f; }
.r-boleto__precio { margin: 6px 0 0; font-size: clamp(58px,4.6vw,72px); letter-spacing: -.06em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.r-boleto__unidad { margin: 4px 0 24px; font-size: 13px; color: #59635f; }
.r-boleto__fecha { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid #deded4; }
.r-boleto__fecha span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #68706b; }
.r-boleto__fecha strong { font-size: 16px; }
.r-boleto__fecha small { font-size: 12px; color: #59635f; }
.r-boleto__pie { position: relative; border-top: 2px dashed #d0d2c7; padding: 24px 28px; background: #f0f0e7; }
.r-boleto__cuenta { display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.r-boleto__cuenta div { display: grid; gap: 5px; }
.r-boleto__cuenta strong { font-size: 28px; font-weight: 600; line-height: 1; }
.r-boleto__cuenta span { font-size: 11px; color: #68706b; }
.r-boleto__disponibles { margin: 18px 0 0; color: #59635f; font-size: 11px; }
@media (max-width: 859px) {
    .r-hero--campana { min-height: 0; padding: 36px 0 42px; background-image: 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%), url('/assets/img/parcela-hero-sm.jpg'); }
    .r-hero--campana .r-hero__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
    .r-hero--campana .r-hero__insignia { margin-bottom: 24px; font-size: 11px; }
    .r-hero--campana .r-hero__premio { font-size: clamp(44px,10vw,68px); max-width: 13ch; }
    .r-hero--campana .r-bajada { font-size: 15px; margin-bottom: 22px; }
    .r-hero--campana .r-campana__intro { font-size: 9px; letter-spacing: .12em; }
    .r-hero--campana .r-hero__acciones { gap: 10px; }
    .r-hero--campana .r-btn--primario { min-height: 52px; padding-inline: 24px; font-size: 14px; }
    .r-hero--campana .r-btn--fantasma { font-size: 12px; }
    .r-boleto { width: 100%; max-width: 480px; margin-inline: auto; transform: none; text-align: left; border-radius: 18px; }
    .r-boleto__cab { padding: 10px 20px; }
    .r-boleto__cuerpo { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 20px; column-gap: 20px; }
    .r-boleto__precio { font-size: 40px; grid-column: 1; }
    .r-boleto__unidad { margin: 2px 0 0; grid-column: 1; font-size: 11px; }
    .r-boleto__fecha { grid-column: 2; grid-row: 1 / 4; border-top: 0; border-left: 1px solid #deded4; padding: 0 0 0 16px; align-content: center; }
    .r-boleto__fecha strong { font-size: 13px; line-height: 1.45; }
    .r-boleto__pie { padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
    .r-boleto__pie > .r-boleto__label { max-width: 100px; font-size: 11px; }
    .r-boleto__cuenta { margin: 0; gap: 10px; }
    .r-boleto__cuenta strong { font-size: 23px; }
    .r-boleto__disponibles { margin: 0; width: 100%; font-size: 10px; }
}

/* Fichas promocionales con acciones reales y los datos de la rifa. */
.r-kpis--promo { scroll-margin-top: 88px; gap: 14px; }
.r-kpis--promo .r-kpi { display: flex; flex-direction: column; padding: 26px 22px 12px; border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px #e2e4df; }
.r-kpis--promo .r-kpi__label { min-height: 28px; margin-bottom: 18px; font-size: 9px; line-height: 1.5; font-weight: 700; letter-spacing: .1em; color: #52645c; }
.r-kpis--promo .r-kpi__valor { font-size: clamp(36px,4vw,54px); font-weight: 700; letter-spacing: -.055em; }
.r-kpis--promo .r-kpi__valor small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; margin-bottom: 3px; }
.r-kpis--promo .r-kpi__pie { color: #59645f; font-size: 12px; line-height: 1.65; margin: 14px 0 24px; }
.r-kpis--promo .r-kpi__pie strong { font-weight: 600; }
.r-kpi__accion { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; padding-top: 4px; border-top: 1px solid #dce0d7; color: #263e35; font-size: 11px; font-weight: 600; text-decoration: none; }
.r-kpi__accion span { font-size: 18px; }
.r-kpi__accion:hover { text-decoration: underline; text-underline-offset: 4px; }
.r-kpi__accion:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }
.r-kpis--promo .r-kpi--rojo { background: var(--r-rojo); box-shadow: none; }
.r-kpis--promo .r-kpi--rojo .r-kpi__label, .r-kpis--promo .r-kpi--rojo .r-kpi__valor, .r-kpis--promo .r-kpi--rojo .r-kpi__pie, .r-kpis--promo .r-kpi--rojo .r-kpi__accion { color: #fff; }
.r-kpis--promo .r-kpi--rojo .r-kpi__accion { border-color: #ffffff50; }
.r-kpis--promo .r-kpi--ambar { background: #f3ead7; box-shadow: none; }
.r-kpis--promo .r-kpi--lago { background: #223e35; box-shadow: none; }
.r-kpis--promo .r-kpi--lago .r-kpi__label, .r-kpis--promo .r-kpi--lago .r-kpi__pie { color: #dae5de; }
.r-kpis--promo .r-kpi--lago .r-kpi__valor, .r-kpis--promo .r-kpi--lago .r-kpi__accion { color: #fff; }
.r-kpis--promo .r-kpi--lago .r-kpi__accion { border-color: #ffffff30; }
@media (max-width: 480px) {
    .r-kpis--promo { gap: 10px; }
    .r-kpis--promo .r-kpi { padding: 20px 14px 8px; border-radius: 18px; }
    .r-kpis--promo .r-kpi__label { font-size: 8px; letter-spacing: .07em; margin-bottom: 12px; }
    .r-kpis--promo .r-kpi__valor { font-size: 34px; }
    .r-kpis--promo .r-kpi__pie { font-size: 11px; margin: 10px 0 18px; }
    .r-kpi__accion { font-size: 10px; gap: 5px; line-height: 1.4; }
}

/* Jerarquía del premio: nombre dominante, superficie y causa a continuación. */
.r-hero--campana { padding: 44px 0 52px; }
.r-hero--campana .r-campana__intro { margin: 0 0 18px; font-size: 10px; letter-spacing: .14em; color: #e2e8e5; }
.r-hero--campana .r-hero__premio { max-width: none; margin: 0 0 22px; font-size: clamp(72px,8vw,112px); line-height: .88; letter-spacing: -.06em; }
.r-campana__ganar { margin: 0 0 12px; font-size: 21px; line-height: 1.2; color: #f8c6a8; letter-spacing: -.02em; }
.r-campana__parcela { display: block; }
.r-campana__parcela > span { display: block; }
.r-campana__superficie { display: block; margin-top: 18px; font-size: .43em; line-height: 1.1; letter-spacing: -.035em; color: #f8c6a8; }
.r-campana__otro-premio { display: block; font-size: .75em; line-height: 1; overflow-wrap: anywhere; }
.r-hero--campana .r-bajada { max-width: 42ch; font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
.r-campana__organiza { max-width: 45ch; color: #c6cfcb; font-size: 10px; line-height: 1.5; margin: 18px 0 0; }
@media (max-width: 859px) {
    .r-hero--campana { padding: 26px 0 36px; }
    .r-hero--campana .r-hero__grid { gap: 24px; }
    .r-hero--campana .r-campana__intro { margin-bottom: 16px; font-size: 9px; }
    .r-hero--campana .r-hero__premio { font-size: clamp(64px,20vw,110px); margin-bottom: 20px; line-height: .88; }
    .r-campana__ganar { font-size: 17px; margin-bottom: 12px; }
    .r-campana__superficie { font-size: .42em; margin-top: 14px; }
    .r-hero--campana .r-bajada { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
    .r-campana__organiza { font-size: 9px; margin-top: 14px; }
}

/* Premio: foto de gran formato y panel de campaña. */
.r-premio-campana { background: #edece3; }
.r-premio-panel { display: grid; grid-template-columns: 1fr 1fr; border-radius: 30px; overflow: hidden; background: #203c33; color: #fff; }
.r-premio-visual { position: relative; margin: 0; min-height: 620px; }
.r-premio-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-premio-visual::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,#0c201a90); pointer-events: none; }
.r-premio-visual__sello { position: absolute; z-index: 1; left: 24px; top: 24px; padding: 11px 16px; background: #f6e9c9; color: #203c33; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.r-premio-visual figcaption { position: absolute; z-index: 1; bottom: 12px; left: 24px; right: 16px; color: #fff; font-size: 9px; }
.r-premio-tasacion { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 44px; border-radius: 18px; padding: 22px 24px; background: var(--r-rojo); color: #fff; }
.r-premio-tasacion span { display: block; font-size: 11px; margin-bottom: 6px; }
.r-premio-tasacion strong { display: block; font-size: clamp(30px,3.5vw,46px); font-weight: 600; letter-spacing: -.05em; }
.r-premio-editorial { padding: 40px; align-self: center; }
.r-premio-editorial__intro { margin: 0 0 16px; color: #f1cd8a; font-size: 12px; font-weight: 600; }
.r-premio-editorial h2 { margin: 0 0 24px; color: #fff; font-size: clamp(36px,3.8vw,54px); line-height: 1.03; letter-spacing: -.05em; font-weight: 600; }
.r-premio-editorial__descripcion { color: #d6e2da; font-size: 14px; line-height: 1.65; }
.r-premio-datos { margin: 24px 0; display: grid; gap: 16px; }
.r-premio-datos > div { padding-top: 14px; border-top: 1px solid #ffffff25; }
.r-premio-datos dt { color: #afc4b9; font-size: 11px; margin-bottom: 5px; }
.r-premio-datos dd { margin: 0; color: #fff; font-size: 13px; font-weight: 500; }
.r-premio-invitacion { display: grid; gap: 12px; justify-items: start; }
.r-premio-invitacion .r-btn { gap: 20px; font-size: 14px; }
.r-premio-invitacion > span { font-size: 11px; color: #d6e2da; }
/* Cuatro pasos conectados, sin tarjetas ni iconos repetidos. */
.r-como-campana { background: #fcf5e7; }
.r-como-campana > .r-wrap > .r-bajada { font-size: 16px; max-width: 48ch; }
.r-recorrido { list-style: none; padding: 0; margin: 36px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.r-recorrido li { position: relative; min-width: 0; }
.r-recorrido li:not(:last-child)::after { content: ''; position: absolute; height: 1px; top: 25px; left: 64px; right: -8px; background: #d7cebb; }
.r-recorrido__numero { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #203c33; color: #fff; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 24px; }
.r-recorrido li:first-child .r-recorrido__numero, .r-recorrido li:last-child .r-recorrido__numero { background: var(--r-rojo); }
.r-recorrido h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 12px; font-weight: 600; }
.r-recorrido p { color: #676d67; font-size: 13px; line-height: 1.65; margin: 0; }
.r-como-campana .r-mecanica { background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid #d7cebb; padding: 24px 0 0; }
.r-como-campana .r-mecanica__ico { display: none; }
@media (max-width: 859px) {
    .r-premio-panel { grid-template-columns: 1fr; border-radius: 24px; }
    .r-premio-visual { min-height: 350px; }
    .r-premio-editorial { padding: 28px 24px 32px; }
    .r-premio-editorial h2 { font-size: clamp(34px,8vw,48px); }
    .r-premio-tasacion { left: 20px; right: 20px; padding: 18px 20px; }
    .r-premio-editorial__descripcion { font-size: 13px; }
    .r-recorrido { grid-template-columns: 1fr; gap: 0; margin: 28px 0; }
    .r-recorrido li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 20px; padding-bottom: 28px; }
    .r-recorrido li:last-child { padding-bottom: 0; }
    .r-recorrido__numero { width: 40px; height: 40px; font-size: 13px; margin: 0; }
    .r-recorrido li:not(:last-child)::after { width: 1px; height: auto; top: 48px; bottom: 8px; left: 20px; right: auto; }
    .r-recorrido h3 { font-size: 18px; margin: 8px 0; }
    .r-recorrido p { font-size: 13px; }
}
@media (max-width: 380px) {
    .r-premio-editorial { padding: 24px 18px; }
    .r-premio-invitacion .r-btn { font-size: 12px; padding-inline: 18px; gap: 12px; }
}

/* ==========================================================
   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. */
.r-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; box-shadow: var(--r-sombra); }
    92%           { transform: scale(1.035); box-shadow: 0 0 0 6px var(--r-rojo-glow); }
}

@media (prefers-reduced-motion: reduce) {
    .r-sube, .r-btn--late { animation: none; }
    .r-hero--vivo::before { animation: none; }
}

/* ==========================================================
   Boleto: el avance de venta reemplaza a la cuenta regresiva
   ==========================================================
   La fecha exacta depende del flujo de venta y la compañía no la
   quiere comprometer. Un contador a una fecha que puede moverse
   miente; el avance de venta empuja igual y sale de la base.
   ========================================================== */
.r-boleto__venta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.r-boleto__venta strong {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.r-boleto__venta span { font-size: 12px; color: #59635f; }
.r-boleto__pista {
    height: 6px;
    margin-top: 12px;
    border-radius: var(--r-pill);
    background: #ddded2;
    overflow: hidden;
}
.r-boleto__pista > span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--r-rojo), var(--r-rojo-claro));
}

@media (max-width: 859px) {
    .r-boleto__venta   { justify-content: flex-start; }
    .r-boleto__venta strong { font-size: 24px; }
    .r-boleto__pista   { width: 100%; }
}

/* ==========================================================
   Selector de cantidad — la única decisión de la compra
   ==========================================================
   Reemplaza a la grilla de números. Son radios de verdad, así que
   el bloque funciona sin JavaScript: sin él se pierde el total en
   vivo, no la compra. Cada tarjeta pasa los 44 px de área táctil.
   ========================================================== */
.r-ancla { display: block; position: relative; top: -80px; height: 0; }

.r-cantidad {
    max-width: 760px;
    margin: var(--r-6) auto 0;
}
.r-cantidad__opciones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--r-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.r-cantidad__legend {
    /* Existe para el lector de pantalla; el título de la sección ya lo dice. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}
.r-cant { position: relative; display: block; cursor: pointer; }
.r-cant input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.r-cant__cara {
    display: grid;
    gap: 2px;
    min-height: 108px;
    align-content: center;
    padding: var(--r-5) var(--r-4);
    border-radius: var(--r-radio-lg);
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 1px var(--r-borde);
    text-align: center;
    transition: transform var(--r-transicion), box-shadow var(--r-transicion);
}
.r-cant:hover .r-cant__cara { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--r-borde-fuerte), var(--r-sombra); }
.r-cant input:checked + .r-cant__cara {
    background: var(--r-rojo-suave);
    box-shadow: inset 0 0 0 2px var(--r-rojo), var(--r-sombra);
}
.r-cant input:checked + .r-cant__cara .r-cant__precio { color: var(--r-rojo); }
.r-cant input:focus-visible + .r-cant__cara { outline: 2px solid var(--r-tinta); outline-offset: 3px; }
.r-cant__n {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--r-track-cifra);
}
.r-cant__u { font-size: .82rem; color: var(--r-gris); }
.r-cant__precio { margin-top: var(--r-2); font-weight: 600; }
.r-cant__cinta {
    position: absolute;
    top: calc(var(--r-3) * -1);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--r-ambar);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.r-cant--otra .r-cant__cara { gap: var(--r-2); }
.r-cant--otra input[type="number"] {
    width: 100%;
    min-height: 44px;
    padding: var(--r-2) var(--r-3);
    border: 0;
    border-radius: var(--r-radio-sm);
    background: var(--r-superficie-2);
    box-shadow: inset 0 0 0 1px var(--r-borde-fuerte);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    opacity: 1;
    position: static;
    height: auto;
}

.r-cantidad__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--r-4);
    margin-top: var(--r-5);
    padding: var(--r-4) var(--r-4) var(--r-4) var(--r-6);
    border-radius: var(--r-pill);
    background: var(--r-tinta);
    color: #fff;
}
.r-cantidad__resumen { display: grid; gap: 2px; }
.r-cantidad__n { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.r-cantidad__total { font-size: 1.35rem; font-weight: 700; letter-spacing: var(--r-track-cifra); }
.r-cantidad__pie .r-btn { flex: 0 0 auto; }
.r-cantidad__nota {
    margin: var(--r-4) 0 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--r-gris);
    text-align: center;
}

@media (min-width: 640px) {
    .r-cantidad__opciones { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
    .r-cantidad__opciones { grid-template-columns: repeat(6, 1fr); }
    .r-cant--otra { grid-column: span 1; }
    /* Desde que caben las seis tarjetas, el bloque ocupa el ancho de la
       sección: capado quedaba corrido a la izquierda, con un hueco a la
       derecha que lo hacía ver desprendido del resto de la página. */
    .r-cantidad { margin-inline: 0; max-width: none; }
    .r-cantidad__nota { text-align: left; }
}
@media (min-width: 1440px) {
    .r-cant__cara { min-height: 124px; }
}
@media (max-width: 419px) {
    .r-cantidad__pie { border-radius: var(--r-radio-lg); padding: var(--r-4); }
    .r-cantidad__pie .r-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .r-cant:hover .r-cant__cara { transform: none; }
}

/* El mes, cuando la fecha exacta todavía no está: la palabra ocupa el lugar
   que tenía el día, así que necesita su propio tamaño. */
.r-kpi__valor--mes {
    font-size: clamp(1.6rem, 4.2vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: var(--r-track-display);
    text-transform: capitalize;
}

/* ==========================================================
   Compra en el hero — el boleto pasa a ser el formulario
   ==========================================================
   Antes el boleto solo informaba y comprar exigía bajar a otra
   sección: la acción quedaba a un scroll del argumento. Ahora
   la primera pantalla trae precio, cantidad y botón.

   Son radios de verdad y el rótulo del botón viene escrito por
   el servidor: sin JavaScript se pierde el total en vivo, no la
   compra.
   ========================================================== */
/* Gana en especificidad a `.r-boleto__cab > span:last-child`, que estaba
   pensada para la flecha y ponía la fecha en 22 px. */
.r-boleto__cab > .r-boleto__sorteo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}

.r-express { text-align: center; }
.r-express .r-boleto__unidad { margin-bottom: 22px; }

.r-express__campo { margin: 0 0 16px; padding: 0; border: 0; }
.r-express__t {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #59635f;
}
.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: 52px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #ddded2;
    font-size: 1.15rem;
    font-weight: 700;
    color: #202c2d;
    transition: box-shadow var(--r-transicion), background var(--r-transicion);
}
.r-express__op:hover span { box-shadow: inset 0 0 0 1px var(--r-borde-fuerte); }
.r-express__op input:checked + span {
    background: var(--r-rojo);
    box-shadow: inset 0 0 0 1px var(--r-rojo);
    color: #fff;
}
.r-express__op input:focus-visible + span { outline: 2px solid var(--r-tinta); outline-offset: 3px; }

.r-express__cta { margin-top: 4px; font-size: .98rem; }
.r-express__nota {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #68706b;
}
.r-express__nota a { color: #202c2d; }

/* ==========================================================
   Franja del hero — las tres dudas de antes de comprar
   ==========================================================
   Ocupa el aire que sobraba abajo de la foto. Vidrio esmerilado
   para que se lea sobre cualquier parte de la imagen.
   ========================================================== */
.r-hero__tira {
    display: grid;
    gap: 2px;
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding: 0;
    list-style: none;
    border-radius: var(--r-radio-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    text-align: left;
}
.r-hero__tira li {
    padding: 18px 22px;
    background: rgba(16, 20, 24, .34);
}
.r-hero__tira strong {
    display: block;
    margin-bottom: 4px;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
}
.r-hero__tira span {
    font-size: .82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .74);
}

@media (min-width: 860px) {
    .r-hero__tira { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 859px) {
    .r-hero__tira { margin-top: 24px; }
    .r-hero__tira li { padding: 14px 18px; }
    .r-express__ops { gap: 6px; }
    .r-express__op span { min-height: 48px; font-size: 1.05rem; }
}

/* El valor del premio, arriba: $5.000 contra 45 millones es el argumento. */
.r-campana__tasacion {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 26px;
    padding: 8px 16px;
    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);
}
.r-campana__tasacion span { font-size: .78rem; color: rgba(255, 255, 255, .72); }
.r-campana__tasacion strong { font-size: 1.05rem; font-weight: 700; color: #f8c6a8; letter-spacing: -.02em; }

/* En móvil el cuerpo del boleto se partía en dos columnas —precio a la
   izquierda, fecha a la derecha— porque antes era una ficha informativa. El
   formulario no cabe en esa grilla: vuelve a una sola columna. */
@media (max-width: 859px) {
    .r-boleto__cuerpo.r-express {
        display: block;
        padding: 22px 20px 24px;
        text-align: center;
    }
    .r-express .r-boleto__precio { font-size: 46px; }
    .r-express .r-boleto__unidad { margin: 4px 0 20px; font-size: 12px; }
    .r-express__nota { font-size: 11px; }
    /* El pie del boleto también venía de aquel diseño: en fila dejaba la barra
       de avance colgando al lado de la cifra. */
    .r-boleto .r-boleto__pie { display: block; text-align: center; }
    .r-boleto__venta { justify-content: center; }
    .r-boleto__disponibles { margin-top: 10px; }
}