/* Colectate Rifas — flujo público de compra. Misma paleta que el panel admin
   (public_html/assets/css/admin.css); archivo separado a propósito para no
   acoplar el ciclo de vida de ambas superficies. Verde azulado + amarillo,
   según la marca real de colectate.com.uy (fondo con tinte menta claro). */

/* Raleway (logo) + Inter (menú del header): misma tipografía de marca que
   usa colectate-nuevo — se importa acá en vez de en cada <head> porque este
   proyecto no tiene un layout compartido, cada vista arma su propio <head>. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,700;0,800;1,700;1,800&family=Inter:wght@400;500;600&display=swap');

:root {
    --color-primary: #1b7a72;
    --color-primary-dark: #125650;
    --color-accent: #ffc93c;
    --color-accent-dark: #e8b32a;
    --color-secondary: #125650;
    --color-secondary-light: #1b7a72;
    --color-bg: #eaf6f4;
    --color-surface: #ffffff;
    --color-border: #e4e6eb;
    --color-text: #1f2430;
    --color-text-muted: #6b7280;
    --color-success-bg: #e6f7ee;
    --color-success-text: #0a7d3f;
    --color-error-bg: #fdecea;
    --color-error-text: #b3261e;
    --color-disponible: #e6f7ee;
    --color-disponible-text: #0a7d3f;
    --color-ocupado: #eef0f3;
    --color-ocupado-text: #9aa0ab;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 2px 10px rgba(20, 20, 30, 0.06);
    --shadow-lift: 0 8px 24px rgba(20, 20, 30, 0.1);
}

* {
    box-sizing: border-box;
}

/* El atributo `hidden` debe ganarle a cualquier `display` de una clase como
   .btn — si no, un botón con `hidden` queda visible igual (pasó con
   "Siguiente" en el paso 2 del wizard). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
}

a { color: var(--color-primary); }

.topbar {
    background: linear-gradient(120deg, var(--color-secondary), var(--color-secondary-light));
    color: #fff;
    padding: 1.1rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}

.topbar a { color: #fff; text-decoration: none; display: flex; align-items: center; }
.topbar span { color: var(--color-accent); }

.logo-marca { height: 40px; width: auto; vertical-align: middle; }
.marca-producto { font-weight: 800; font-size: 1.05rem; margin-left: 0.4rem; vertical-align: middle; }

/* ---------- Header simple + hero tipo "wave" (home) ---------- */

.site-header {
    background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
    position: sticky;
    top: 0;
    z-index: 40;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
/* .wrap.site-header-inner (dos clases) para ganarle en especificidad a la
   regla genérica .wrap (max-width: 720px y su padding de 1.75rem/3rem
   pensado para separar secciones de contenido, no para un header) — el
   header necesita ser más ancho y con menos padding vertical que el resto
   de las páginas, para alinearse igual que el .container de Bootstrap que
   usa colectate-nuevo. */
.wrap.site-header-inner {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-width: 1140px;
}
@media (min-width: 1400px) {
    .wrap.site-header-inner { max-width: 1320px; }
}
.site-header-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.site-header-logo .marca-producto {
    color: var(--color-accent);
    font-style: normal;
    font-size: 1.15rem;
    margin-left: 0;
}

.site-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-nav a {
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.site-nav a:hover { color: var(--color-accent); text-decoration: none; }

/* Botón de ingreso al panel: se destaca del resto de los links de texto —
   es una acción distinta ("entrar a administrar"), no una página más del sitio. */
.site-nav a.site-nav-login {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
}
.site-nav a.site-nav-login:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 720px) {
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        order: 3;
        margin-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 0.5rem;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a {
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}

/* ---------- Botón flotante de WhatsApp ---------- */

.whatsapp-flotante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 30;
    transition: transform 0.12s ease;
}
.whatsapp-flotante:hover { transform: scale(1.06); }

.hero-section {
    background: linear-gradient(180deg, #d7f0ec 0%, var(--color-bg) 100%);
    position: relative;
    padding: 3rem 1.25rem 4.5rem;
    text-align: center;
    overflow: hidden;
}
.hero-section::after {
    content: '';
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    height: 60px;
    background: var(--color-bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-section h1 {
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}
.hero-section p {
    color: #3a5654;
    font-size: 1.02rem;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.subrayado {
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 35%;
    padding: 0 0.1em;
}

.wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.volver:hover { color: var(--color-primary); text-decoration: none; }
.volver span { display: inline-block; transition: transform 0.15s ease; }
.volver:hover span { transform: translateX(-3px); }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.rifa-imagen {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    max-height: 320px;
    object-fit: cover;
}

h1 { font-size: 1.6rem; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 0 0 0.85rem; }

.descripcion { color: var(--color-text); font-size: 0.98rem; line-height: 1.7; }

/* Premios de la rifa (opcional — si la rifa no cargó ninguno, esta sección
   directamente no se renderiza, ver landing.php). Mismo mecanismo que el
   carrusel de medios de pago del footer: la vista duplica el array
   (array_merge($premios, $premios)) y acá se anima un translateX(-50%) en
   loop — con hover para pausar y poder leer, igual que el de medios. */
.premios-carrusel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.premios-carrusel-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: premios-scroll 35s linear infinite;
}

/* Pausa solo con mouse real — en touch, tocar el carrusel puede dejar el
   :hover "pegado" (sin mouseout que lo libere) y el carrusel no retoma
   nunca más. Con (hover: hover) la regla ni se evalúa en celulares/tablets. */
@media (hover: hover) and (pointer: fine) {
    .premios-carrusel:hover .premios-carrusel-track { animation-play-state: paused; }
}

.premio-card {
    flex: 0 0 220px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--color-surface);
}

.premio-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
}

.premio-orden {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.premio-card h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.premio-card p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; margin: 0; }

@keyframes premios-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.precio { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

.vendedor-tag {
    display: inline-block;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
    font-weight: 600;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 14px rgba(27, 122, 114, 0.28);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:hover { background: var(--color-primary-dark); text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
/* Formulario ya enviado (anti-doble-envio.js): se ve ocupado y no recibe más toques. */
.btn.enviando { opacity: 0.6; cursor: wait; pointer-events: none; box-shadow: none; transform: none; }
.btn-block { display: block; width: 100%; }

.btn-secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
.btn-secondary:hover { transform: none; background: #fafafa; }

.alert {
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }

label { display: block; font-size: 0.82rem; font-weight: 600; color: #444; margin: 1rem 0 0.35rem; }
label:first-child { margin-top: 0; }

input, select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 122, 114, 0.15);
}

.hint { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.3rem; }

/* ---------- Barra de progreso (vendidos / total) ---------- */

.progreso {
    background: var(--color-ocupado);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 0.6rem 0 0.35rem;
}
.progreso-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
}
.progreso-label { font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Home ---------- */

.rifas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

/* El link de términos va DENTRO de la tarjeta pero FUERA del área clickeable
   grande (que lleva a la landing) — un <a> no puede anidar otro <a> adentro.
   Por eso .rifa-card es el contenedor visual (el "cuadro" con sombra/borde)
   y .rifa-card-link es el link real, un nivel más adentro, con el resto del
   contenido de la tarjeta. */
.rifa-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rifa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.rifa-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.rifa-card-link:hover { text-decoration: none; }
.rifa-card img { width: 100%; height: 160px; object-fit: cover; }
.rifa-card .cuerpo { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.rifa-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--color-text); }
.rifa-card .resumen { color: var(--color-text-muted); font-size: 0.85rem; flex: 1; }
.rifa-card .precio { font-size: 1.05rem; margin-top: 0.6rem; }
.rifa-card .terminos-discreto { text-align: left; margin: 0; padding: 0 1.1rem 1rem; }

.vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

/* ---------- Indicador de pasos (wizard: Números / Datos / Pago) ---------- */

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.wizard-step .num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.wizard-step.actual .num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wizard-step.actual { color: var(--color-text); }
.wizard-step.hecho .num { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.wizard-step.hecho .num::after { content: '✓'; }
.wizard-step.hecho .num span { display: none; }
.wizard-line {
    width: 28px;
    height: 2px;
    background: var(--color-border);
}

.wizard-panel { display: none; }
.wizard-panel.actual { display: block; }

/* Tabs manual / azar */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.tab-btn {
    flex: 1;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.tab-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* Botones de cantidad rápida del modo "al azar" */
.cantidad-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.cantidad-opt {
    min-width: 3.25rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.cantidad-opt.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
#cantidad { max-width: 140px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.buscador-numero { display: flex; gap: 0.5rem; align-items: flex-start; }
.buscador-numero input { flex: 1; }
.buscador-numero .btn-secondary { white-space: nowrap; margin-top: 0; }

/* ---------- Chips de números elegidos (arriba, siempre visibles) ---------- */

.chips-box {
    margin: 1rem 0;
    padding: 0.85rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border);
}
.chips-box .titulo { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips-vacio { font-size: 0.85rem; color: var(--color-text-muted); }
.chip {
    background: var(--color-secondary);
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; opacity: 0.8; }
.chip button:hover { opacity: 1; }

/* Grilla de "vecinos" cuando el número buscado no está disponible (~7x7) */
.numeros-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.numero-cell {
    padding: 0.4rem 0;
    text-align: center;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--color-disponible);
    color: var(--color-disponible-text);
    border: 1px solid transparent;
    cursor: pointer;
}
.numero-cell.ocupado { background: var(--color-ocupado); color: var(--color-ocupado-text); cursor: not-allowed; }
.numero-cell.elegido { background: var(--color-primary); color: #fff; border-color: var(--color-primary-dark); }

.resumen-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
    margin-top: 0.75rem;
}

.numeros-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.numeros-lista span {
    background: var(--color-secondary);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

.countdown { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); text-align: center; }

/* ---------- Selección de medio de pago ---------- */

/* Lista de una sola columna con botones alargados (logo a la izquierda, radio
   a la derecha) — mismo diseño en mobile y en desktop, más fácil de tocar/leer
   que una grilla de tarjetas cuadradas y sin un layout distinto por breakpoint. */
.medios-pago-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}
.medio-pago-opcion {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.medio-pago-opcion:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* El input real queda invisible pero funcional (teclado/lectores de pantalla);
   el círculo de la derecha es puramente visual y refleja :checked. */
.medio-pago-opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Alto fijo para que todos los logos —vengan en el tamaño que vengan— queden
   centrados en la misma franja horizontal y las pastillas se vean parejas. */
.medio-logo-box {
    width: auto;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}
.medio-logo-box img { max-height: 34px; max-width: 110px; object-fit: contain; }
.medio-nombre-fallback { font-size: 0.85rem; font-weight: 700; color: var(--color-text); text-align: left; }

.medio-radio-visual {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    margin-left: auto;
}

.medio-pago-opcion:has(input:checked) {
    border-color: var(--color-primary);
}
.medio-pago-opcion:has(input:checked) .medio-radio-visual {
    border-color: var(--color-primary);
    border-width: 6px;
}

/* ---------- Barra de resumen/reservar (numeros.php) ----------
   Ya no va fija al viewport en ningún tamaño de pantalla (ni desktop ni
   mobile) — mismo criterio en los dos: fijarla al fondo de la ventana
   dejaba un hueco entre la tarjeta y el botón (grande en desktop cuando el
   form es corto, pero el mismo problema de fondo en mobile). Queda como un
   elemento propio, pegado justo debajo de la tarjeta del formulario, mismo
   ancho y mismo look de tarjeta, sin importar el tamaño de pantalla.
   El nombre de la clase quedó de cuando sí era "fija" — no se renombró para
   no tocar numeros.php de nuevo, pero ya no fija nada. */

.barra-fija {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}
.barra-fija .info { font-size: 0.85rem; color: var(--color-text-muted); }
.barra-fija .info strong { display: block; font-size: 1.05rem; color: var(--color-text); }
.barra-fija .btn { flex-shrink: 0; }
.barra-fija-botones { display: flex; gap: 0.5rem; }

@media (max-width: 480px) {
    /* Con los dos botones juntos ("← Atrás" + "Reservar (15 min)") no entran
       al lado del resumen en una pantalla angosta — sin este quiebre de línea
       explícito, el texto se corta contra el borde en vez de acomodarse. */
    .barra-fija-botones { flex: 1 1 100%; justify-content: space-between; }

    .numeros-grid { grid-template-columns: repeat(5, 1fr); }
    .buscador-numero { flex-direction: column; }
    .buscador-numero .btn-secondary { width: 100%; }
}

/* ---------- Footer de la home: medios de pago (carrusel) + copyright ---------- */

.medios-footer {
    background: #fff;
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-border);
}
.medios-footer h2 {
    font-size: 1.25rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}
.medios-footer h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    margin-top: 0.6rem;
    border-radius: 999px;
}

.medios-carrusel {
    overflow: hidden;
    margin-top: 1.75rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.medios-carrusel-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: medios-scroll 22s linear infinite;
}
/* Mismo motivo que el carrusel de premios: pausa solo con mouse real. */
@media (hover: hover) and (pointer: fine) {
    .medios-carrusel:hover .medios-carrusel-track { animation-play-state: paused; }
}
.medios-carrusel-track img {
    height: 34px;
    max-width: 110px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
}
.medios-carrusel-track .medio-nombre-fallback {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

@keyframes medios-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.site-footer {
    background: var(--color-secondary);
    color: #cfd6e0;
    text-align: center;
    padding: 1.25rem 1rem;
    font-size: 0.8rem;
}
.site-footer p { margin: 0; }
.site-footer-admin {
    display: inline-block;
    margin-top: 0.5rem;
    color: #7c8b95;
    font-size: 0.72rem;
    text-decoration: none;
}
.site-footer-admin:hover { color: #cfd6e0; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .medios-carrusel-track { animation: none; }
    .premios-carrusel-track { animation: none; }
}

/* ---------- Páginas institucionales (Nosotros / Cómo funciona / Contacto) ---------- */

.pagina-hero {
    background: linear-gradient(180deg, #d7f0ec 0%, var(--color-bg) 100%);
    text-align: center;
    padding: 2.5rem 1.25rem 4rem;
    position: relative;
    overflow: hidden;
}
.pagina-hero::after {
    content: '';
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    height: 50px;
    background: var(--color-bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.pagina-hero h1 { color: var(--color-secondary); font-size: 1.9rem; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.pagina-hero p { color: #3a5654; max-width: 560px; margin: 0 auto; position: relative; z-index: 1; }

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.pilar-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.pilar-card h3 { color: var(--color-secondary); margin: 0 0 0.5rem; font-size: 1.05rem; }
.pilar-card p { margin: 0; color: var(--color-text); font-size: 0.92rem; line-height: 1.6; }

.pasos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pasos-lista li {
    counter-increment: paso;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.25rem 3.75rem;
    position: relative;
}
.pasos-lista li::before {
    content: counter(paso);
    position: absolute;
    left: 1.1rem;
    top: 1.2rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pasos-lista h3 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--color-secondary); }
.pasos-lista p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }

.contacto-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    text-align: center;
    margin: 1.5rem 0 2rem;
}
.contacto-info-item .icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
}
.contacto-info-item h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.4rem;
}
.contacto-info-item p { margin: 0; font-size: 0.92rem; color: var(--color-text); }
.contacto-info-item a { color: var(--color-text); text-decoration: none; }
.contacto-info-item a:hover { text-decoration: underline; }

.mapa-embed {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: var(--radius);
    display: block;
}

/* ---------- Términos y condiciones ---------- */

.legal h2 { margin-top: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 1.25rem; }
.legal-texto { white-space: pre-line; line-height: 1.7; margin-top: 1rem; }

.terminos-aceptacion {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}
.terminos-aceptacion h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.check-terminos {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
    cursor: pointer;
}
.check-terminos input { margin-top: 0.25rem; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }

/* ---------- Cuenta regresiva al sorteo (etiqueta sobre la foto) ---------- */

.cuenta-regresiva {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}
.cr-titulo { font-weight: 600; opacity: 0.9; }
.cr-tiempo strong { font-variant-numeric: tabular-nums; font-size: 0.9rem; margin-left: 0.25rem; }
.cr-tiempo strong:first-child { margin-left: 0; }
.cr-sin-js { display: none; }
.cuenta-regresiva.cr-sin-conteo .cr-sin-js { display: inline; }

.cuenta-regresiva.cr-urgente { background: var(--color-accent); color: #3a2c00; }
.cuenta-regresiva.cr-terminada { background: #1f2430; }

/* Card de la home: precio a la izquierda, cuenta regresiva a la derecha, al pie. */
.card-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.card-pie .precio { margin: 0; }

/* Landing: en la misma línea que el título, alineada a la derecha. */
.titulo-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.titulo-fila h1 { margin: 0; }
.card-pie .cuenta-regresiva { margin-left: auto; }

/* ---------- Link discreto a términos (portada y pasos 1-2 del wizard) ---------- */

.terminos-discreto {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: 1rem 0 0;
}
.terminos-discreto a { color: var(--color-text-muted); text-decoration: underline; }
.terminos-discreto a:hover { color: var(--color-primary); }

/* Aviso de compras en pausa momentánea (landing) */
.aviso-pausa {
    margin-top: 1rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #fff8e1;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    text-align: center;
}
.aviso-pausa-icono { font-size: 2.25rem; line-height: 1; margin-bottom: 0.25rem; }
.aviso-pausa h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.aviso-pausa p { margin: 0 0 0.75rem; }
.aviso-pausa-ok { color: var(--color-success-text, #0a7d3f); font-weight: 600; }
.aviso-pausa-ok::before { content: "✓ "; }
.aviso-pausa-nota {
    margin: 0 0 0.9rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px dashed var(--color-accent-dark, #e8b32a);
    border-radius: var(--radius-sm, 10px);
    font-size: 0.95rem;
}
.aviso-pausa-gracias { font-weight: 700; margin-bottom: 0; }

/* Próximamente (home y página de la rifa) */
.seccion-titulo { margin: 2.5rem 0 1rem; font-size: 1.4rem; }
.tag-proximamente {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.rifa-card-proximamente img { filter: saturate(0.85); }
.inicio-ventas { font-size: 0.85rem; font-weight: 700; color: var(--color-secondary); }
.aviso-proximamente {
    margin-top: 1rem;
    padding: 1.25rem;
    background: #fff8e1;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    text-align: center;
}
.aviso-proximamente-icono { font-size: 2rem; line-height: 1; margin-bottom: 0.25rem; }
.aviso-proximamente h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.aviso-proximamente p { margin: 0 0 0.5rem; }

/* Etiquetas de estado en las tarjetas del inicio (comparten la base de .tag-proximamente) */
.tag-activa  { background: var(--color-success-bg, #e6f7ee); color: var(--color-success-text, #0a7d3f); border-color: #9fd9b8; }
.tag-pausada { background: #ffe0b2; color: #8a4b00; border-color: #f5b66b; }

/* Formulario "Avisame" de la página Próximamente */
.form-avisame { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.form-avisame h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.avisame-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; position: relative; }
.avisame-fila input[type="email"] { flex: 1 1 220px; min-width: 0; }
.avisame-fila .btn { flex: 0 0 auto; }

/* Acciones al pie de una tarjeta (pantalla de resultado del pago): con aire y a ancho completo en celular. */
.acciones-pago { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 480px) {
    .acciones-pago .btn { flex: 1 1 100%; }
}

/* Aviso del tiempo de reserva (paso de datos + resumen inferior) */
.aviso-reserva {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    background: #fff8e1;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}
.barra-fija .info .info-reserva {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-secondary);
}

/* ---------- Logo de ColectaTe en el encabezado de la plataforma ---------- */

/* Alto del relleno vertical del encabezado: el panel blanco lo usa para cubrir el alto completo. */
.site-header { --hdr-pad: 0.8rem; overflow-x: hidden; overflow-x: clip; }
.wrap.site-header-inner { padding-top: var(--hdr-pad); padding-bottom: var(--hdr-pad); }

.site-header-logo { align-items: center; gap: 1.9rem; }

/* Panel blanco a sangre desde el borde izquierdo de la pantalla. Su costado derecho es un arco
   suave (sobresale ~14px en el medio, como en la muestra), no una media elipse. El logo va tal cual
   (plano, en sus colores): el nombre es verde y sobre el verde del encabezado se perdería.
   Un filo en degradé con los colores del logo acompaña la curva, más grueso al centro. */
.site-header-logo-panel {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    padding-right: 2.2rem;
}
/* cuerpo rectangular del panel (sangra hacia la izquierda, fuera de la pantalla) */
.site-header-logo-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--hdr-pad));
    bottom: calc(-1 * var(--hdr-pad));
    left: -100vw;
    right: 0;
    background: #ffffff;
}
/* el arco de la derecha: una parábola suave (blanco) sobre una media luna en degradé (el filo) */
.site-header-logo-panel::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--hdr-pad));
    bottom: calc(-1 * var(--hdr-pad));
    left: calc(100% - 1px);
    width: 19px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 72' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239ccfcd'/%3E%3Cstop offset='.28' stop-color='%231b9aa8'/%3E%3Cstop offset='.52' stop-color='%232fa77a'/%3E%3Cstop offset='.78' stop-color='%23e3893a'/%3E%3Cstop offset='1' stop-color='%23f0c419'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0Q36 36 0 72Z' fill='url(%23g)'/%3E%3Cpath d='M0 0Q28 36 0 72Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.site-header-logo-img { position: relative; display: block; height: 46px; width: auto; }

/* "Rifas" un poco más grande que antes (1.15rem → 1.3rem). */
.site-header-logo .marca-producto { font-size: 1.3rem; }

/* QR de validación a la derecha de los datos de la rifa (2 x 2 cm) */
.datos-rifa.con-qr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.datos-rifa-texto { flex: 1 1 auto; min-width: 0; }
.datos-rifa .qr-rifa { flex: 0 0 2cm; width: 2cm; height: 2cm; display: block; object-fit: contain; background: #fff; }

/* QR de validación dentro de la tarjeta de la rifa del home (2 x 2 cm, a la derecha de la descripción) */
.rifa-card .resumen-fila { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.rifa-card .resumen-fila .resumen { margin: 0 0 0.6rem; }
.rifa-card .resumen-fila .qr-rifa { flex: 0 0 2cm; width: 2cm; height: 2cm; object-fit: contain; background: #fff; }

/* ---------- Confianza y claridad (landing, home, checkout, resultado) ---------- */

/* Mensajes: franja de color a la izquierda + ícono, se leen de un vistazo (sobre todo en celular). */
.alert { position: relative; padding-left: 2.6rem; border-left: 4px solid transparent; line-height: 1.45; }
.alert::before { position: absolute; left: 0.7rem; top: 0.65rem; font-weight: 800; }
.alert-error { border-left-color: var(--color-error-text); }
.alert-error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-error-text); color: #fff; font-size: 0.8rem; }
.alert-success { border-left-color: var(--color-success-text); }
.alert-success::before { content: '\2713'; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-success-text); color: #fff; font-size: 0.8rem; }

/* Garantías bajo el botón de compra de la landing */
.garantias { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 0.75rem; }
.garantias li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.85rem; line-height: 1.45; color: #3b4452; }
.garantias svg { flex: 0 0 22px; color: var(--color-primary); margin-top: 0.05rem; }
.garantias strong { color: var(--color-secondary); }

/* Tarjetas del home: precio y disponibilidad con más peso */
.rifa-card .precio { font-size: 1.25rem; font-weight: 800; color: var(--color-primary); }
.rifa-card .progreso-label { font-size: 0.85rem; font-weight: 700; color: var(--color-secondary); }
.tag-ultimos { background: #ffe9a8; color: #6b4a00; border-color: var(--color-accent-dark); }

/* Checkout: resumen del pedido y tiempo de reserva */
.resumen-pedido h2 { margin: 0 0 0.25rem; }
.resumen-pedido-rifa { margin: 0 0 0.9rem; color: var(--color-text-muted); font-size: 0.9rem; }
.resumen-pedido .resumen-total strong { font-size: 1.5rem; color: var(--color-primary); }
.reserva-tiempo { margin-top: 1rem; padding: 0.8rem 1rem; background: #fff8e1; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); text-align: center; font-size: 0.9rem; }
.reserva-tiempo .countdown { display: block; margin: 0.1rem 0; }
.reserva-tiempo-nota { display: block; font-size: 0.78rem; color: var(--color-text-muted); }

/* Pantalla de pago confirmado */
.resultado-resumen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 1.25rem 0 0; padding: 0.9rem 1rem; background: #f6faf9; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.resultado-resumen span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.resultado-resumen strong { display: block; margin-top: 0.1rem; }

/* ---------- Organizador, pago seguro y ayuda ---------- */

.organiza { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 0.75rem; font-size: 0.88rem; color: var(--color-text-muted); }
.organiza-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--color-border); flex: 0 0 28px; }
.organiza strong { color: var(--color-secondary); }

.pago-seguro { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); }
.pago-seguro svg { flex: 0 0 18px; color: var(--color-primary); margin-top: 0.05rem; }
.pago-seguro strong { color: var(--color-secondary); }

.ayuda-contacto { margin: 1rem 0 0; padding: 0.7rem 0.9rem; background: #f6faf9; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.82rem; line-height: 1.5; color: #3b4452; }

/* ---------- Validación de número, preguntas frecuentes y ajustes de celular ---------- */

.validacion-ok { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; background: var(--color-success-bg); border: 1px solid #9fd9b8; border-left: 5px solid var(--color-success-text); border-radius: var(--radius); }
.validacion-ok-icono { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-success-text); color: #fff; font-size: 1.4rem; font-weight: 800; }
.validacion-ok strong { display: block; font-size: 1.15rem; color: var(--color-success-text); }
.validacion-ok span { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: #1f3d2c; line-height: 1.45; }

.faq { display: grid; gap: 0.6rem; }
.faq details { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.faq details[open] { border-color: var(--color-primary); }
.faq summary { cursor: pointer; padding: 0.9rem 1rem; font-weight: 700; color: var(--color-secondary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: var(--color-primary); }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: 0; padding: 0 1rem 1rem; font-size: 0.9rem; line-height: 1.6; color: #3b4452; }

@media (max-width: 720px) {
    /* 16px evita que el celular haga zoom al tocar un campo; botones y casillas cómodos para el pulgar. */
    input, select, textarea { font-size: 16px; }
    .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-block { display: flex; }
    .check-terminos { padding: 0.35rem 0; }
    .check-terminos input[type="checkbox"] { width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; }
    .garantias li, .pago-seguro, .ayuda-contacto { font-size: 0.88rem; }
    .organiza { flex-wrap: wrap; }
}

/* ---------- Logos de medios de pago en el checkout: todos en la misma caja, más chicos ---------- */

.medio-pago-opcion { min-height: 46px; padding: 0.5rem 1.1rem; }
.medio-logo-box { flex: 0 0 auto; width: 50px; height: 17px; }
.medio-logo-box img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: left center; }
.medio-pago-opcion .medio-nombre-fallback { font-size: 0.82rem; }
.medio-logo-box:has(.medio-nombre-fallback) { width: auto; height: auto; }

/* ---------- Medios de pago en mosaicos, agrupados (paso 3 del checkout) ---------- */

.medios-grupo { margin-bottom: 1.1rem; }
.medios-grupo-titulo { margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.medios-mosaicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 480px) { .medios-mosaicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.medio-mosaico {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 52px;
    margin: 0;
    padding: 0.45rem 0.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.medio-mosaico:hover { box-shadow: var(--shadow); }
.medio-mosaico input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.medio-mosaico .medio-logo-box { width: 84px; height: 24px; flex: 0 0 auto; justify-content: center; }
.medio-mosaico .medio-logo-box img { object-position: center; }
.medio-mosaico-nombre { font-size: 0.72rem; line-height: 1.2; color: var(--color-text-muted); }
.medio-mosaico:has(input:checked) { border-color: var(--color-primary); background: #f1faf8; box-shadow: 0 0 0 1px var(--color-primary); }
.medio-mosaico:has(input:checked)::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.medio-mosaico:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Acceso directo al panel en el menú público (solo para admins logueados) */
.site-nav a.site-nav-panel { background: var(--color-accent); border-color: var(--color-accent); color: #3a2c00; font-weight: 700; }
.site-nav a.site-nav-panel:hover { background: var(--color-accent-dark); color: #3a2c00; }

/* Sugerencia al escribir el email en el formulario de compra (no bloquea nada) */
.email-sugerencia { margin: 0.4rem 0 0; padding: 0.5rem 0.75rem; background: #fff8e1; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); font-size: 0.84rem; line-height: 1.45; color: #5b4a00; }
.email-sugerencia[hidden] { display: none; }
.email-sugerencia-btn { margin-left: 0.25rem; padding: 0.2rem 0.65rem; border: 1px solid var(--color-primary); border-radius: 999px; background: #fff; color: var(--color-primary); font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.email-sugerencia-btn:hover { background: var(--color-primary); color: #fff; }