@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
    --vino:#9C2333;
    --rojo:#B12539;
    --rojo2:#D90F0F;
    --morado:#6D368C;
    --azul:#253587;
    --azul2:#205AA1;
    --azul3:#2979B3;
    --cyan:#00A5D4;
    --verde:#0F9D61;
    --verde2:#86BA6F;
    --amarillo:#D98E00;

    --bg:#edf4fb;
    --card:#edf4fb;
    --texto:#2a3345;
    --texto-muted:#66758c;
    --texto-label:#4f5b70;

    --sh-out: 10px 10px 22px rgba(0,0,0,.10), -8px -8px 18px rgba(255,255,255,.9);
    --sh-out-sm: 6px 6px 12px rgba(0,0,0,.08), -5px -5px 10px rgba(255,255,255,.9);
    --sh-in: inset 6px 6px 10px rgba(0,0,0,.08), inset -6px -6px 10px rgba(255,255,255,.9);
    --sh-in-focus: inset 5px 5px 10px rgba(0,165,212,.20), inset -5px -5px 8px #fff, 0 0 0 3px rgba(0,165,212,.18);

    --radius: 22px;
    --radius-sm: 14px;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    background:linear-gradient(135deg,#edf4fb,#dbeaf8,#eef5fb);
    color:var(--texto);
    font-family:'Inter',sans-serif;
    line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ max-width:1140px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-header{
    background:rgba(237,244,251,0.9);
    backdrop-filter:blur(6px);
    position:sticky;
    top:0;
    z-index:30;
    box-shadow:0 2px 14px rgba(37,53,135,.08);
}
.site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
    gap:20px;
    position:relative;
    max-width:1300px;
}
.brand{
    font-weight:800;
    font-size:22px;
    letter-spacing:.2px;
    color:var(--azul);
    white-space:nowrap;
}
.brand span{
    background:linear-gradient(135deg,var(--azul2),var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.nav-principal{
    display:flex;
    align-items:center;
    gap:2px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.nav-principal a{
    font-size:13.5px;
    font-weight:500;
    color:var(--texto-label);
    padding:8px 11px;
    border-radius:12px;
    white-space:nowrap;
    transition:box-shadow .2s, color .2s;
}
.nav-principal a:hover{ color:var(--azul2); box-shadow:var(--sh-out-sm); }
.nav-principal a.activo{ color:var(--azul2); box-shadow:var(--sh-in); font-weight:600; }

/* Botón hamburguesa (oculto en escritorio) */
.btn-hamburguesa{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:var(--bg);
    box-shadow:var(--sh-out-sm);
    cursor:pointer;
    flex-shrink:0;
}
.btn-hamburguesa span{
    display:block;
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--azul2);
    transition:transform .25s, opacity .25s;
}
.btn-hamburguesa.abierto span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.btn-hamburguesa.abierto span:nth-child(2){ opacity:0; }
.btn-hamburguesa.abierto span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 1240px){
    .btn-hamburguesa{ display:flex; }
    .nav-principal{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:var(--bg);
        border-radius:0 0 var(--radius) var(--radius);
        box-shadow:0 16px 30px rgba(37,53,135,.15);
        padding:10px;
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
    }
    .nav-principal.abierto{ max-height:400px; opacity:1; padding:10px; }
    .nav-principal a{ text-align:center; padding:13px 14px; }
}

/* ---------- Hero ---------- */
.hero{ padding:56px 0 36px; }
.hero-eyebrow{
    color:var(--cyan);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:10px;
}
.hero h1{
    font-weight:800;
    font-size:clamp(30px,4.5vw,46px);
    margin:0 0 12px;
    color:var(--azul);
    letter-spacing:.2px;
}
.hero p{ color:var(--texto-muted); max-width:60ch; font-size:15.5px; }

/* ---------- Raffle cards ---------- */
.grid-rifas{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
    gap:28px;
    padding:36px 0 60px;
}
.card-rifa{
    background:var(--card);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--sh-out);
    display:flex;
    flex-direction:column;
    transition:transform .2s ease;
}
.card-rifa:hover{ transform:translateY(-4px); }
.card-rifa .imagen{ aspect-ratio:16/10; background:#dfe9f5 center/cover no-repeat; }
.card-rifa .cuerpo{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-rifa h3{ font-size:21px; margin:0; color:var(--azul); font-weight:700; }
.card-rifa .precio{ color:var(--azul2); font-weight:700; font-size:17px; }
.card-rifa .meta{ color:var(--texto-muted); font-size:13px; }

.barra-progreso{ height:8px; border-radius:6px; background:var(--bg); box-shadow:var(--sh-in); overflow:hidden; }
.barra-progreso > span{ display:block; height:100%; background:linear-gradient(90deg,var(--azul2),var(--cyan)); border-radius:6px; }

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    padding:13px 22px;
    border-radius:16px;
    border:none;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s, opacity .2s;
}
.btn-primary{
    background:linear-gradient(135deg,var(--azul2),var(--cyan));
    color:#fff;
    box-shadow:0 10px 18px rgba(32,90,161,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 24px rgba(0,165,212,.32); }
.btn-outline{ background:var(--bg); color:var(--texto-label); box-shadow:var(--sh-out-sm); }
.btn-outline:hover{ color:var(--azul2); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- Detalle de rifa ---------- */
.detalle-rifa{ padding:36px 0 20px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; }
@media (max-width: 860px){ .detalle-rifa{ grid-template-columns:1fr; } }

/* ---------- Galería de la rifa ---------- */
.galeria-principal{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--sh-out);
    aspect-ratio:4/3;
    background:#dfe9f5;
}
.galeria-principal.galeria-vacia{ }
.media-principal{
    display:none;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#dfe9f5;
}
.media-principal.activo{ display:block; }
img.media-principal{ cursor:zoom-in; }
.galeria-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%; border:none;
    background:rgba(255,255,255,.85); color:var(--azul2); font-size:16px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.galeria-nav.prev{ left:12px; }
.galeria-nav.next{ right:12px; }

.galeria-miniaturas{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.miniatura{
    flex:0 0 auto;
    width:72px; height:56px;
    border-radius:10px;
    object-fit:cover;
    cursor:pointer;
    opacity:.6;
    border:2px solid transparent;
    transition:opacity .15s, border-color .15s;
    position:relative;
    overflow:hidden;
    background:#dfe9f5;
}
.miniatura.activa{ opacity:1; border-color:var(--azul2); }
.miniatura video{ width:100%; height:100%; object-fit:cover; }
.miniatura.video span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); color:#fff; font-size:14px; }

/* ---------- Lightbox (zoom) ---------- */
.lightbox{
    position:fixed; inset:0; background:rgba(15,20,35,.92);
    display:none; align-items:center; justify-content:center;
    z-index:80; padding:30px; overflow:hidden;
}
.lightbox.abierto{ display:flex; }
.lightbox img{
    max-width:100%; max-height:90vh; border-radius:10px;
    cursor:zoom-in; user-select:none; -webkit-user-drag:none;
    transition:transform .15s ease-out;
    touch-action:none;
}
.lightbox img.zoom-activo{ cursor:grab; }
.lightbox img.arrastrando{ cursor:grabbing; transition:none; }
.lightbox-ayuda{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.65); font-size:12px; text-align:center;
}
.lightbox-cerrar{
    position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.15); color:#fff; border:none; font-size:22px; cursor:pointer;
}
.lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%; border:none;
    background:rgba(255,255,255,.15); color:#fff; font-size:20px; cursor:pointer;
}
.lightbox-nav.prev{ left:20px; }
.lightbox-nav.next{ right:20px; }
@media (max-width:600px){ .lightbox-nav{ display:none; } }
.titulo-y-compartir{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.detalle-info h1{ font-size:30px; margin:0 0 8px; color:var(--azul); font-weight:800; }
.btn-compartir{
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
    padding:9px 16px;
    border-radius:12px;
    border:1px solid #d7e2f0;
    background:#fff;
    color:var(--azul2);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s, border-color .15s;
}
.btn-compartir:hover{ border-color:var(--azul2); background:var(--bg); }
@media (max-width:480px){ .btn-compartir span, .btn-compartir{ font-size:12.5px; padding:8px 12px; } }
.detalle-info .precio-grande{ font-size:24px; color:var(--azul2); font-weight:800; }
.datos-rifa{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0; }
.datos-rifa .dato{ background:var(--bg); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--sh-out-sm); }
.datos-rifa .dato .label{ color:var(--texto-muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.datos-rifa .dato .valor{ font-size:16px; margin-top:4px; color:var(--texto); font-weight:600; }

/* ---------- Ticket grid ---------- */
.leyenda{ display:flex; gap:18px; flex-wrap:wrap; margin:24px 0 14px; font-size:13px; color:var(--texto-muted); }
.leyenda .punto{ display:inline-block; width:11px; height:11px; border-radius:4px; margin-right:6px; vertical-align:middle; }
.punto.disponible{ background:#fff; border:1.5px solid #d7e2f0; }
.punto.apartado{ background:var(--amarillo); }
.punto.pagado{ background:var(--verde); }
.punto.seleccionado{ background:var(--azul2); }

/* ---------- Zona de selección de boletos ---------- */
.zona-boletos{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:36px;
    align-items:start;
    padding-bottom:20px;
}
.col-grid-boletos{ min-width:0; }

@media (max-width: 860px){
    .zona-boletos{ grid-template-columns:1fr; gap:28px; }
    .panel-seleccion{ position:static; }
}

.grid-boletos{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(64px,1fr));
    gap:12px;
    padding:16px 0 30px;
}
@media (max-width: 600px){
    .grid-boletos{ grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:10px; padding:14px 0 24px; }
}

.boleto{
    font-weight:700;
    font-size:14px;
    text-align:center;
    padding:14px 4px;
    border-radius:10px;
    background:#fff;
    border:1.5px solid #d7e2f0;
    color:var(--texto);
    cursor:pointer;
    user-select:none;
    transition:border-color .15s, background .15s, color .15s;
}
.boleto:hover{ border-color:var(--cyan); }
.boleto[data-estado="apartado"]{ background:#fdf6e8; border-color:#f0d28f; color:var(--amarillo); cursor:not-allowed; }
.boleto[data-estado="pagado"]{ background:#e9f7ef; border-color:#a9dcbe; color:var(--verde); cursor:not-allowed; }
.boleto.seleccionado{ background:var(--azul2); border-color:var(--azul2); color:#fff; }

/* ---------- Panel de selección ---------- */
.panel-seleccion{
    position:sticky;
    top:96px;
    background:var(--card);
    border-radius:var(--radius);
    padding:26px;
    height:fit-content;
    box-shadow:var(--sh-out);
}
.panel-seleccion h3{ margin:0 0 14px; color:var(--azul); font-weight:700; font-size:19px; }
.lista-seleccionados{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; min-height:28px; }
.lista-seleccionados span{
    background:var(--bg);
    box-shadow:var(--sh-out-sm);
    color:var(--azul2);
    padding:6px 12px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
}
.total-linea{ display:flex; justify-content:space-between; align-items:center; margin:18px 0; padding-top:16px; border-top:1px dashed #c7d5e8; }

/* ---------- Promociones ---------- */
.promos-caja{ background:var(--card); box-shadow:var(--sh-out); border-radius:var(--radius-sm); padding:18px 20px; margin:18px 0; }
.promos-titulo{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--azul); font-size:14px; margin-bottom:12px; }
.promos-lista{ display:flex; flex-direction:column; gap:8px; }
.promo-chip{ background:var(--bg); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--texto); box-shadow:var(--sh-in); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.promo-ahorro{ display:inline-block; color:var(--verde); font-weight:700; font-size:12px; background:#e9f7ef; padding:2px 9px; border-radius:20px; margin-left:auto; }
.promo-ahorro-total{ display:flex; align-items:center; gap:8px; background:#e9f7ef; color:var(--verde); font-weight:600; font-size:12.5px; padding:10px 14px; border-radius:10px; margin:-10px 0 16px; }
.total-linea .monto{ font-size:22px; color:var(--azul2); font-weight:800; }

/* ---------- Formularios ---------- */
.form-field{ margin-bottom:16px; }
.form-field label{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--texto-label); margin-bottom:8px; font-weight:500; }
.form-field input, .form-field textarea, .form-field select{
    width:100%;
    background:var(--bg);
    border:none;
    border-radius:16px;
    padding:14px 15px;
    color:var(--texto);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    box-shadow:var(--sh-in);
    outline:none;
    transition:box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ box-shadow:var(--sh-in-focus); }
.form-field input::placeholder{ color:#9aa8bd; }

.alerta{ display:flex; gap:10px; padding:14px 16px; border-radius:16px; font-size:14px; margin-bottom:18px; line-height:1.4; }
.alerta-error{ background:rgba(217,15,15,.08); color:var(--rojo2); box-shadow:0 0 0 1px rgba(217,15,15,.18) inset; }
.alerta-ok{ background:rgba(15,157,97,.08); color:var(--verde); box-shadow:0 0 0 1px rgba(15,157,97,.2) inset; }
.alerta-info{ background:rgba(0,165,212,.08); color:var(--azul2); box-shadow:0 0 0 1px rgba(0,165,212,.2) inset; }

/* ---------- Página de pago ---------- */
.caja-pago{ background:var(--card); border-radius:var(--radius); padding:26px; margin:24px 0; box-shadow:var(--sh-out); }
.caja-pago .fila{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed #c7d5e8; }
.caja-pago .fila:last-child{ border-bottom:none; }
.caja-pago .fila .l{ color:var(--texto-muted); }

/* ---------- Páginas de contenido (FAQ, contacto, métodos) ---------- */
.pagina-contenido{ padding:44px 0 60px; max-width:760px; margin:0 auto; }
.pagina-contenido h1{ color:var(--azul); font-weight:800; font-size:32px; margin-bottom:6px; }
.pagina-contenido > p.intro{ color:var(--texto-muted); margin-bottom:30px; }

.faq-item{ background:var(--card); border-radius:var(--radius-sm); box-shadow:var(--sh-out-sm); margin-bottom:14px; overflow:hidden; }
.faq-item summary{ padding:18px 20px; cursor:pointer; font-weight:600; color:var(--azul); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--cyan); font-weight:400; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item .respuesta{ padding:0 20px 18px; color:var(--texto-muted); font-size:14.5px; }

.metodo-pago-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--sh-out); padding:24px; margin-bottom:20px; }
.metodo-pago-card h3{ color:var(--azul); margin:0 0 14px; }

.contacto-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--sh-out); padding:26px; display:flex; flex-direction:column; gap:16px; }
.contacto-fila{ display:flex; align-items:center; gap:14px; }
.contacto-fila .icono{ width:44px; height:44px; border-radius:14px; background:var(--bg); box-shadow:var(--sh-out-sm); display:flex; align-items:center; justify-content:center; color:var(--azul2); flex-shrink:0; }
.contacto-fila .txt .titulo{ font-weight:600; color:var(--texto); font-size:14px; }
.contacto-fila .txt .valor{ color:var(--texto-muted); font-size:14px; }

/* ---------- Verificador de boletos ---------- */
.verificador-caja{ background:var(--card); border-radius:var(--radius); box-shadow:var(--sh-out); padding:28px; }
.verificador-caja .form-buscar{ display:flex; gap:12px; }
@media (max-width:560px){ .verificador-caja .form-buscar{ flex-direction:column; } }
.resultado-boleto{
    background:var(--bg);
    border-radius:var(--radius-sm);
    box-shadow:var(--sh-out-sm);
    padding:18px 20px;
    margin-top:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.resultado-boleto .info-rifa{ font-weight:700; color:var(--azul); }
.resultado-boleto .info-num{ color:var(--texto-muted); font-size:13px; margin-top:2px; }
.estado-pill{ padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:700; }
.estado-pill.disponible{ background:#e3e9f2; color:#5c6b85; }
.estado-pill.apartado{ background:#fbeed2; color:var(--amarillo); }
.estado-pill.pagado{ background:#dcf1e6; color:var(--verde); }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
    position:fixed;
    bottom:22px;
    right:22px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#25D366,#128C7E);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 26px rgba(18,140,126,.4);
    z-index:40;
    animation:wa-pulse 2.4s ease-in-out infinite;
}
.wa-flotante svg{ width:30px; height:30px; }
.wa-flotante:hover{ transform:scale(1.06); }
@keyframes wa-pulse{
    0%,100%{ box-shadow:0 12px 26px rgba(18,140,126,.4); }
    50%{ box-shadow:0 12px 30px rgba(18,140,126,.65), 0 0 0 8px rgba(37,211,102,.12); }
}
@media (prefers-reduced-motion: reduce){ .wa-flotante{ animation:none; } }

.footer-site{ padding:34px 0 90px; color:var(--texto-muted); font-size:13px; text-align:center; }

/* ---------- Secciones institucionales del inicio ---------- */
.seccion{ padding:50px 0; }
.seccion-header{ max-width:640px; margin-bottom:30px; }
.seccion-header h2{ font-size:28px; color:var(--azul); font-weight:800; margin:6px 0 10px; }
.seccion-header p{ color:var(--texto-muted); font-size:15px; margin:0; }

.info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px; }
.info-card{ background:var(--card); border-radius:var(--radius); padding:26px; box-shadow:var(--sh-out); }
.info-card .icono{ width:52px; height:52px; border-radius:16px; background:var(--bg); box-shadow:var(--sh-out-sm); display:flex; align-items:center; justify-content:center; color:var(--azul2); margin-bottom:16px; }
.info-card h3{ color:var(--azul); font-size:17px; margin:0 0 8px; }
.info-card p{ color:var(--texto-muted); font-size:14px; margin:0; }

.pasos-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px; }
.paso-card{ background:var(--card); border-radius:var(--radius-sm); padding:20px; box-shadow:var(--sh-out-sm); }
.paso-card .num{ font-size:13px; font-weight:800; color:var(--cyan); margin-bottom:8px; }
.paso-card h4{ margin:0 0 6px; color:var(--azul); font-size:15px; }
.paso-card p{ margin:0; color:var(--texto-muted); font-size:13.5px; }

.transparencia{
    background:linear-gradient(135deg,var(--azul),var(--azul2));
    border-radius:var(--radius);
    padding:40px;
    color:#fff;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:36px;
    align-items:center;
}
.transparencia h2{ margin:0 0 12px; font-size:26px; font-weight:800; }
.transparencia p{ color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.75; margin:0; }
.badge-loteria{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); padding:9px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-top:16px; }
@media (max-width: 820px){ .transparencia{ grid-template-columns:1fr; padding:28px; } }

/* ---------- Botón y modal: Máquina de la suerte ---------- */
.btn-suerte{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin:16px 0 4px;
    padding:13px 20px;
    border:2px solid var(--azul2);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--sh-out-sm);
    color:var(--azul2);
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    transition:background .2s, color .2s;
}
.btn-suerte:hover{ background:var(--azul2); color:#fff; }
.btn-suerte-emoji{ display:inline-block; font-size:18px; animation:suerte-balanceo 2.2s ease-in-out infinite; }
@keyframes suerte-balanceo{
    0%, 100% { transform:rotate(0deg); }
    25% { transform:rotate(-12deg); }
    75% { transform:rotate(12deg); }
}
@media (prefers-reduced-motion: reduce){ .btn-suerte-emoji{ animation:none; } }

.modal-overlay{
    position:fixed; inset:0; background:rgba(15,20,35,.55);
    display:none; align-items:center; justify-content:center; z-index:90; padding:20px;
}
.modal-overlay.abierto{ display:flex; }
.modal-suerte{
    position:relative;
    background:var(--card);
    border-radius:var(--radius);
    padding:30px;
    width:420px;
    max-width:100%;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:var(--sh-out);
}
.modal-suerte h3{ margin:0 0 6px; color:var(--azul); font-size:21px; }
.text-muted-modal{ color:var(--texto-muted); font-size:13.5px; margin:0 0 18px; }

.slots{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:10px 0; min-height:60px; }
.slot-numero{
    background:var(--bg);
    box-shadow:var(--sh-in);
    border-radius:12px;
    padding:14px 12px;
    min-width:64px;
    text-align:center;
    font-weight:800;
    font-size:18px;
    color:var(--azul2);
}
.slot-numero.girando{ color:var(--texto-muted); }
.slot-numero.revelado{ animation:slot-revelar .35s ease both; color:var(--azul2); background:#e8f3fb; }
@keyframes slot-revelar{
    0%{ transform:scale(.7) rotateX(90deg); opacity:0; }
    100%{ transform:scale(1) rotateX(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .slot-numero.revelado{ animation:none; } }

/* ---------- Boleto digital ---------- */
.boleto-digital{ max-width:420px; margin:30px auto 0; background:#fff; border-radius:22px; box-shadow:var(--sh-out); overflow:hidden; }
.bd-encabezado{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; background:linear-gradient(135deg,var(--azul),var(--azul2)); color:#fff; }
.bd-marca{ font-weight:800; font-size:16px; }
.bd-marca span{ color:#bfe6f5; }
.bd-estado{ font-size:11px; font-weight:700; padding:5px 11px; border-radius:14px; background:rgba(255,255,255,.2); white-space:nowrap; }
.bd-estado-pagado{ background:rgba(46,204,113,.35); }
.bd-estado-apartado{ background:rgba(217,142,0,.35); }
.bd-imagen{ height:170px; background-size:cover; background-position:center; }
.bd-cuerpo{ padding:24px 26px 28px; text-align:center; }
.bd-rifa{ color:var(--texto-muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; font-weight:600; }
.bd-numero-principal{ font-size:42px; font-weight:800; color:var(--azul2); letter-spacing:2px; }
.bd-numeros-extra{ color:var(--texto-muted); font-size:13px; margin-top:4px; }
.bd-datos{ text-align:left; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px dashed #d7e2f0; padding-top:18px; }
.bd-label{ display:block; color:var(--texto-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.bd-valor{ display:block; color:var(--texto); font-weight:600; font-size:13.5px; margin-top:3px; }
.bd-qr{ margin:22px auto 6px; display:block; border-radius:8px; }
.bd-footer{ color:var(--texto-muted); font-size:11.5px; margin-top:8px; }