/* ========================================================= 
   QUE PIQUE CHE - SORTEOS 
   DISEÑO APP / MOBILE FIRST 
========================================================= */ 
 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
 
html { 
    width: 100%; 
    min-height: 100%; 
    background: #070b14; 
} 
 
body { 
    width: 100%; 
    min-height: 100vh; 
    margin: 0; 
    padding: 0; 
 
    font-family: 
        Inter, 
        system-ui, 
        -apple-system, 
        BlinkMacSystemFont, 
        "Segoe UI", 
        sans-serif; 
 
    background: 
        radial-gradient( 
            circle at top, 
            #111827 0%, 
            #070b14 45%, 
            #03050a 100% 
        ); 
 
    color: #fff; 
 
    overflow-x: hidden; 
} 
 
 
/* ========================================================= 
   HEADER 
========================================================= */ 
 
header { 
    width: 100%; 
    padding: 18px 16px 16px; 
 
    text-align: center; 
 
    background: 
        linear-gradient( 
            180deg, 
            #0d1424 0%, 
            #080d18 100% 
        ); 
 
    border-bottom: 
        1px solid 
        rgba(255,255,255,.07); 
 
    position: relative; 
    z-index: 5; 
} 
 
.logo { 
    font-size: 26px; 
    font-weight: 1000; 
    letter-spacing: -.7px; 
 
    color: #fff; 
 
    line-height: 1.1; 
} 
 
.sub { 
    margin-top: 7px; 
 
    font-size: 12px; 
    line-height: 1.5; 
 
    color: #94a3b8; 
} 
 
.sub a { 
    display: inline-block; 
 
    margin-top: 5px; 
 
    font-size: 12px; 
} 
 
 
/* ========================================================= 
   CONTENEDOR PRINCIPAL 
========================================================= */ 
 
main { 
    width: 100%; 
    max-width: 1180px; 
 
    margin: 0 auto; 
 
    padding: 
        14px 
        12px 
        100px; 
} 
 
 
/* ========================================================= 
   AVISO 
========================================================= */ 
 
.aviso { 
    width: 100%; 
 
    margin-bottom: 16px; 
    padding: 13px 14px; 
 
    border-radius: 14px; 
 
    background: 
        rgba(15,23,42,.9); 
 
    border: 
        1px solid 
        rgba(255,255,255,.07); 
 
    color: #cbd5e1; 
 
    font-size: 12px; 
    line-height: 1.55; 
 
    text-align: center; 
 
    box-shadow: 
        0 10px 30px 
        rgba(0,0,0,.18); 
} 
 
.aviso b { 
    color: #fff; 
} 
 
 
/* ========================================================= 
   LISTA 
========================================================= */ 
 
.lista { 
    width: 100%; 
 
    display: grid; 
 
    grid-template-columns: 
        1fr; 
 
    gap: 18px; 
} 
 
 
/* ========================================================= 
   TARJETA DEL SORTEO 
========================================================= */ 
 
.card { 
    width: 100%; 
 
    margin: 0; 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 20px; 
 
    background: 
        linear-gradient( 
            180deg, 
            #111827, 
            #0b1220 
        ); 
 
    border: 
        1px solid 
        rgba(255,255,255,.08); 
 
    box-shadow: 
        0 18px 45px 
        rgba(0,0,0,.30); 
 
    position: relative; 
} 
 
 
/* ========================================================= 
   IMAGEN 
   1200 x 900 = 4:3 
========================================================= */ 
 
.card .imagen { 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    aspect-ratio: 4 / 3; 
 
    object-fit: cover; 
 
    object-position: center; 
 
    margin: 0; 
    padding: 0; 
 
    border: 0; 
 
    background: #05070b; 
} 
 
.card > img { 
    display: block; 
 
    width: 100%; 
 
    margin: 0; 
    padding: 0; 
} 
 
 
/* ========================================================= 
   INFORMACIÓN 
========================================================= */ 
 
.info { 
    width: 100%; 
 
    padding: 17px 16px 18px; 
} 
 
.info h2 { 
    margin: 0 0 8px; 
 
    font-size: 21px; 
    line-height: 1.15; 
 
    font-weight: 950; 
 
    color: #fff; 
} 
 
.desc { 
    margin: 0 0 14px; 
 
    color: #94a3b8; 
 
    font-size: 13px; 
    line-height: 1.55; 
} 
 
 
/* ========================================================= 
   PRECIO 
========================================================= */ 
 
.precio { 
    display: flex; 
    align-items: baseline; 
    gap: 7px; 
 
    margin-bottom: 16px; 
 
    font-size: 27px; 
    font-weight: 1000; 
 
    color: #facc15; 
} 
 
.precio small { 
    font-size: 11px; 
 
    font-weight: 700; 
 
    color: #94a3b8; 
} 
 
 
/* ========================================================= 
   PROGRESO 
========================================================= */ 
 
.progreso { 
    width: 100%; 
 
    margin-bottom: 16px; 
} 
 
.progreso-top { 
    display: flex; 
 
    justify-content: space-between; 
    align-items: center; 
 
    gap: 10px; 
 
    margin-bottom: 7px; 
 
    font-size: 11px; 
 
    color: #94a3b8; 
} 
 
.progreso-top strong { 
    color: #cbd5e1; 
 
    font-size: 11px; 
 
    text-align: right; 
} 
 
.barra { 
    width: 100%; 
    height: 8px; 
 
    overflow: hidden; 
 
    border-radius: 999px; 
 
    background: 
        rgba(255,255,255,.08); 
} 
 
.barra i { 
    display: block; 
 
    height: 100%; 
 
    min-width: 0; 
 
    border-radius: inherit; 
 
    background: 
        linear-gradient( 
            90deg, 
            #2563eb, 
            #38bdf8 
        ); 
 
    transition: 
        width .4s ease; 
} 
 
 
/* ========================================================= 
   BOTÓN 
========================================================= */ 
 
.btn { 
    width: 100%; 
 
    min-height: 50px; 
 
    border: 0; 
    border-radius: 14px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #2563eb, 
            #1d4ed8 
        ); 
 
    color: #fff; 
 
    font-size: 13px; 
    font-weight: 950; 
 
    cursor: pointer; 
 
    box-shadow: 
        0 8px 22px 
        rgba(37,99,235,.22); 
 
    transition: 
        transform .15s ease, 
        filter .15s ease; 
} 
 
.btn:active { 
    transform: scale(.98); 
} 
 
.btn:hover { 
    filter: brightness(1.08); 
} 
 
.btn:disabled { 
    cursor: not-allowed; 
} 
 
 
/* ========================================================= 
   CARGANDO / VACÍO 
========================================================= */ 
 
.cargando, 
.vacio { 
    width: 100%; 
 
    padding: 45px 20px; 
 
    border-radius: 18px; 
 
    background: 
        rgba(15,23,42,.8); 
 
    border: 
        1px solid 
        rgba(255,255,255,.07); 
 
    text-align: center; 
 
    color: #94a3b8; 
 
    font-size: 14px; 
} 
 
 
/* ========================================================= 
   FOOTER 
========================================================= */ 
 
.footer { 
    position: fixed; 
 
    left: 0; 
    right: 0; 
    bottom: 0; 
 
    z-index: 50; 
 
    width: 100%; 
 
    padding: 
        10px 
        12px 
        calc(10px + env(safe-area-inset-bottom)); 
 
    background: 
        rgba(5,9,17,.94); 
 
    backdrop-filter: 
        blur(18px); 
 
    -webkit-backdrop-filter: 
        blur(18px); 
 
    border-top: 
        1px solid 
        rgba(255,255,255,.08); 
 
    text-align: center; 
} 
 
.btn-footer { 
    width: 100%; 
    max-width: 500px; 
 
    min-height: 44px; 
 
    border: 0; 
    border-radius: 13px; 
 
    background: 
        #172235; 
 
    color: #fff; 
 
    font-size: 12px; 
    font-weight: 900; 
 
    cursor: pointer; 
} 
 
.footer-text { 
    margin-top: 5px; 
 
    color: #64748b; 
 
    font-size: 9px; 
} 
 
 
/* ========================================================= 
   MODALES 
========================================================= */ 
 
.modal { 
    display: none; 
 
    position: fixed; 
 
    inset: 0; 
 
    z-index: 1000; 
 
    padding: 0; 
 
    background: 
        rgba(0,0,0,.82); 
 
    backdrop-filter: 
        blur(10px); 
 
    -webkit-backdrop-filter: 
        blur(10px); 
 
    align-items: flex-end; 
 
    justify-content: center; 
} 
 
 
/* ========================================================= 
   MODAL PRINCIPAL - MEJORADO 
   ESPECIALMENTE PARA CELULAR 
========================================================= */ 
 
.modal-box { 
    width: 100%; 
    max-width: 720px; 
 
    height: auto; 
 
    max-height: 96vh; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    -webkit-overflow-scrolling: touch; 
 
    border-radius: 
        24px 24px 0 0; 
 
    background: 
        linear-gradient( 
            180deg, 
            #111827 0%, 
            #080d16 100% 
        ); 
 
    border: 
        1px solid 
        rgba(255,255,255,.10); 
 
    box-shadow: 
        0 -15px 60px 
        rgba(0,0,0,.55); 
 
    padding: 18px 15px 24px; 
 
    animation: 
        subirModal .22s ease; 
 
    scrollbar-width: thin; 
} 
 
.modal-box::-webkit-scrollbar { 
    width: 5px; 
} 
 
.modal-box::-webkit-scrollbar-track { 
    background: transparent; 
} 
 
.modal-box::-webkit-scrollbar-thumb { 
    background: #334155; 
    border-radius: 999px; 
} 
 
 
@keyframes subirModal { 
 
    from { 
        transform: 
            translateY(35px); 
 
        opacity: 0; 
    } 
 
    to { 
        transform: 
            translateY(0); 
 
        opacity: 1; 
    } 
} 
 
 
/* ========================================================= 
   CABECERA MODAL 
========================================================= */ 
 
.modal-head { 
    display: flex; 
 
    align-items: center; 
    justify-content: space-between; 
 
    gap: 12px; 
 
    margin-bottom: 14px; 
 
    position: sticky; 
    top: -18px; 
    z-index: 5; 
 
    padding: 4px 0 10px; 
 
    background: 
        linear-gradient( 
            180deg, 
            #111827 75%, 
            rgba(17,24,39,0) 
        ); 
} 
 
.modal-head h2 { 
    font-size: 21px; 
    font-weight: 950; 
    line-height: 1.2; 
 
    color: #fff; 
} 
 
.cerrar { 
    width: 44px; 
    height: 44px; 
 
    flex-shrink: 0; 
 
    border: 0; 
 
    border-radius: 13px; 
 
    background: 
        #1e293b; 
 
    color: #fff; 
 
    font-size: 27px; 
 
    line-height: 1; 
 
    cursor: pointer; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
.cerrar:active { 
    transform: scale(.94); 
} 
 
 
/* ========================================================= 
   INSTRUCCIÓN 
========================================================= */ 
 
.instruccion { 
    margin-bottom: 16px; 
 
    padding: 13px 14px; 
 
    border-radius: 14px; 
 
    background: 
        rgba(37,99,235,.09); 
 
    border: 
        1px solid 
        rgba(37,99,235,.20); 
 
    color: #93c5fd; 
 
    font-size: 13px; 
    line-height: 1.55; 
 
    text-align: left; 
} 
 
 
/* ========================================================= 
   GRILLA DE CUPOS 
   MEJORADA PARA MÓVIL 
========================================================= */ 
 
.grilla { 
    display: grid; 
 
    grid-template-columns: 
        repeat(2, minmax(0, 1fr)); 
 
    gap: 10px; 
 
    width: 100%; 
 
    margin: 0; 
} 
 
 
/* ========================================================= 
   CUPOS - MÁS GRANDES 
========================================================= */ 
 
.bloque { 
    width: 100%; 
 
    min-width: 0; 
 
    min-height: 112px; 
 
    padding: 12px 8px; 
 
    border-radius: 15px; 
 
    border: 
        1px solid 
        rgba(255,255,255,.09); 
 
    background: 
        linear-gradient( 
            180deg, 
            #172235, 
            #111a2a 
        ); 
 
    color: #fff; 
 
    cursor: pointer; 
 
    transition: 
        transform .12s ease, 
        border-color .12s ease, 
        background .12s ease, 
        box-shadow .12s ease; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
} 
 
.bloque:active { 
    transform: scale(.97); 
} 
 
.bloque:hover { 
    border-color: 
        rgba(59,130,246,.55); 
 
    box-shadow: 
        0 5px 18px 
        rgba(0,0,0,.18); 
} 
 
.bloque.seleccionado { 
    background: 
        linear-gradient( 
            135deg, 
            #2563eb, 
            #1d4ed8 
        ); 
 
    border-color: 
        #60a5fa; 
 
    box-shadow: 
        0 7px 22px 
        rgba(37,99,235,.30); 
} 
 
.bloque.vendido { 
    opacity: .38; 
 
    background: 
        #111827; 
 
    cursor: 
        not-allowed; 
 
    box-shadow: none; 
} 
 
 
/* ========================================================= 
   NÚMEROS DENTRO DEL CUPO 
========================================================= */ 
 
.numeros { 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
    align-items: center; 
 
    gap: 4px; 
 
    width: 100%; 
} 
 
.numeros span { 
    display: inline-flex; 
 
    align-items: center; 
    justify-content: center; 
 
    min-width: 30px; 
    min-height: 30px; 
 
    padding: 4px 5px; 
 
    border-radius: 7px; 
 
    background: 
        rgba(255,255,255,.09); 
 
    color: #fff; 
 
    font-size: 12px; 
    font-weight: 900; 
} 
 
.bloque small { 
    display: block; 
 
    margin-top: 9px; 
 
    color: #94a3b8; 
 
    font-size: 10px; 
    font-weight: 800; 
} 
 
.bloque.seleccionado small { 
    color: #dbeafe; 
} 
 
 
/* ========================================================= 
   RESUMEN 
========================================================= */ 
 
.resumen { 
    display: none; 
 
    margin-top: 16px; 
 
    padding: 16px; 
 
    border-radius: 17px; 
 
    background: 
        #0f172a; 
 
    border: 
        1px solid 
        rgba(255,255,255,.09); 
} 
 
.resumen.visible { 
    display: block; 
} 
 
.fila { 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
    gap: 12px; 
 
    margin-bottom: 11px; 
 
    color: #94a3b8; 
 
    font-size: 13px; 
 
    line-height: 1.4; 
} 
 
.fila strong { 
    color: #fff; 
 
    text-align: right; 
} 
 
 
/* ========================================================= 
   NÚMEROS DEL RESUMEN 
========================================================= */ 
 
#numerosSeleccionados { 
    max-width: 65%; 
 
    line-height: 1.8; 
} 
 
 
/* ========================================================= 
   TOTAL 
========================================================= */ 
 
.total { 
    display: flex; 
 
    justify-content: space-between; 
    align-items: center; 
 
    gap: 10px; 
 
    margin-top: 14px; 
    padding-top: 14px; 
 
    border-top: 
        1px solid 
        rgba(255,255,255,.08); 
} 
 
.total span { 
    color: #cbd5e1; 
 
    font-size: 14px; 
} 
 
.total strong { 
    color: #facc15; 
 
    font-size: 26px; 
    font-weight: 1000; 
} 
 
 
/* ========================================================= 
   FORMULARIOS 
========================================================= */ 
 
.form { 
    display: grid; 
 
    gap: 10px; 
 
    margin-top: 16px; 
} 
 
.form input { 
    width: 100%; 
 
    height: 52px; 
 
    padding: 
        0 14px; 
 
    border: 
        1px solid 
        rgba(255,255,255,.09); 
 
    border-radius: 13px; 
 
    outline: none; 
 
    background: 
        #111827; 
 
    color: #fff; 
 
    font-size: 14px; 
} 
 
.form input::placeholder { 
    color: #64748b; 
} 
 
.form input:focus { 
    border-color: 
        #3b82f6; 
 
    box-shadow: 
        0 0 0 3px 
        rgba(59,130,246,.10); 
} 
 
 
/* ========================================================= 
   PAGAR 
========================================================= */ 
 
.pagar { 
    width: 100%; 
 
    min-height: 53px; 
 
    margin-top: 2px; 
 
    border: 0; 
 
    border-radius: 14px; 
 
    background: 
        linear-gradient( 
            135deg, 
            #2563eb, 
            #1d4ed8 
        ); 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: 950; 
 
    cursor: pointer; 
} 
 
.pagar:disabled { 
    opacity: .45; 
 
    cursor: 
        not-allowed; 
} 
 
 
/* ========================================================= 
   NOTA 
========================================================= */ 
 
.nota { 
    margin-top: 11px; 
 
    color: #64748b; 
 
    font-size: 11px; 
 
    line-height: 1.5; 
 
    text-align: center; 
} 
 
 
/* ========================================================= 
   DESKTOP 
========================================================= */ 
 
@media (min-width: 700px) { 
 
    header { 
        padding: 
            24px 
            20px; 
    } 
 
    .logo { 
        font-size: 32px; 
    } 
 
    main { 
        padding: 
            22px 
            20px 
            100px; 
    } 
 
    .lista { 
        grid-template-columns: 
            repeat(2, minmax(0, 1fr)); 
 
        gap: 22px; 
    } 
 
    .card .imagen { 
        aspect-ratio: 
            4 / 3; 
    } 
 
    .info { 
        padding: 19px; 
    } 
 
    /* MODAL EN PC */ 
 
    .modal { 
        align-items: center; 
 
        padding: 20px; 
    } 
 
    .modal-box { 
        width: 100%; 
 
        max-width: 760px; 
 
        max-height: 
            calc(100vh - 40px); 
 
        border-radius: 24px; 
 
        padding: 20px; 
    } 
 
    .modal-head h2 { 
        font-size: 23px; 
    } 
 
    .instruccion { 
        font-size: 13px; 
    } 
 
    .grilla { 
        grid-template-columns: 
            repeat(4, minmax(0, 1fr)); 
 
        gap: 10px; 
    } 
 
    .bloque { 
        min-height: 115px; 
        padding: 13px 8px; 
    } 
 
    .numeros span { 
        min-width: 31px; 
        min-height: 31px; 
        font-size: 12px; 
    } 
 
} 
 
 
/* ========================================================= 
   PANTALLAS GRANDES 
========================================================= */ 
 
@media (min-width: 1100px) { 
 
    .lista { 
        grid-template-columns: 
            repeat(3, minmax(0, 1fr)); 
    } 
 
} 
 
 
/* ========================================================= 
   MÓVILES MEDIANOS 
========================================================= */ 
 
@media (min-width: 480px) and (max-width: 699px) { 
 
    .modal-box { 
        padding-left: 18px; 
        padding-right: 18px; 
    } 
 
    .grilla { 
        grid-template-columns: 
            repeat(3, minmax(0, 1fr)); 
 
        gap: 10px; 
    } 
 
    .bloque { 
        min-height: 108px; 
    } 
 
} 
 
 
/* ========================================================= 
   MÓVILES MUY PEQUEÑOS 
========================================================= */ 
 
@media (max-width: 360px) { 
 
    .logo { 
        font-size: 23px; 
    } 
 
    main { 
        padding-left: 9px; 
        padding-right: 9px; 
    } 
 
    .card { 
        border-radius: 16px; 
    } 
 
    .info { 
        padding: 14px; 
    } 
 
    .info h2 { 
        font-size: 19px; 
    } 
 
    .precio { 
        font-size: 24px; 
    } 
 
    /* MODAL MUY CHICO */ 
 
    .modal-box { 
        max-height: 98vh; 
 
        padding: 
            15px 
            10px 
            20px; 
 
        border-radius: 
            20px 20px 0 0; 
    } 
 
    .modal-head { 
        margin-bottom: 11px; 
    } 
 
    .modal-head h2 { 
        font-size: 19px; 
    } 
 
    .cerrar { 
        width: 42px; 
        height: 42px; 
    } 
 
    .instruccion { 
        padding: 11px; 
        font-size: 12px; 
    } 
 
    .grilla { 
        gap: 7px; 
    } 
 
    .bloque { 
        min-height: 102px; 
 
        padding: 
            9px 4px; 
 
        border-radius: 13px; 
    } 
 
    .numeros { 
        gap: 3px; 
    } 
 
    .numeros span { 
        min-width: 27px; 
        min-height: 27px; 
 
        padding: 3px; 
 
        font-size: 11px; 
    } 
 
    .bloque small { 
        margin-top: 7px; 
        font-size: 9px; 
    } 
 
    .resumen { 
        padding: 13px; 
    } 
 
    .fila { 
        font-size: 12px; 
    } 
 
    .total strong { 
        font-size: 24px; 
    } 
 
} 
 
 
/* ========================================================= 
   MÓVILES ALTOS / PANTALLA TÁCTIL 
========================================================= */ 
 
@media (max-width: 699px) and (min-height: 700px) { 
 
    .modal-box { 
        max-height: 94vh; 
    } 
 
    .bloque { 
        min-height: 116px; 
    } 
 
} 
 
 
/* ========================================================= 
   PANTALLAS MUY ALTAS 
========================================================= */ 
 
@media (max-width: 699px) and (min-height: 800px) { 
 
    .modal-box { 
        max-height: 92vh; 
    } 
 
    .bloque { 
        min-height: 122px; 
    } 
 
} 


/* =========================================================
   NOTIFICACIÓN CUPOS
========================================================= */

.notificacion-cupos {
    width: calc(100% - 24px) !important;
    max-width: 430px !important;

    border-radius: 15px !important;

    padding: 14px 16px !important;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.35) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}