/* /assets/css/index.css */
:root {
    --violeta: #6329dc;
    --violeta-oscuro: #4815b4;
    --amarillo: #ffba16;
    --texto: #17151a;
    --gris: #716d77;
    --borde: #ebe8ef;
    --fondo-suave: #f8f6fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #fff;
    color: var(--texto);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.pagina { min-height: 100vh; padding-bottom: 80px; }

.encabezado {
    align-items: center;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #f3f1f5;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    height: 64px;
    padding: max(6px, env(safe-area-inset-top)) 16px 0;
    position: relative;
    z-index: 5;
}
.menu-escritorio, .acceso-escritorio, .franja-confianza { display: none; }
.volver-movil svg { fill: none; }
.logo {
    display: flex;
    font-size: 24px;
    font-weight: 850;
    justify-self: center;
    letter-spacing: -1.4px;
    line-height: 1;
    position: relative;
}
.logo strong { color: var(--amarillo); }
.logo i, .logo i::before, .logo i::after {
    background: var(--amarillo);
    border-radius: 3px;
    content: "";
    height: 2px;
    position: absolute;
    width: 7px;
}
.logo i { right: -11px; top: -2px; transform: rotate(-65deg); }
.logo i::before { left: 5px; top: 6px; transform: rotate(60deg); }
.logo i::after { left: -6px; top: -2px; transform: rotate(120deg); }
.boton-icono {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    height: 38px;
    justify-content: center;
    padding: 8px;
    width: 38px;
}
.boton-icono svg {
    fill: none;
    height: 23px;
    stroke: #17151a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 23px;
}

.hero {
    background: linear-gradient(130deg, #faf8ff 0%, #fff 58%, #fff9eb 100%);
    border-radius: 0 0 22px 22px;
    display: grid;
    grid-template-columns: 52% 48%;
    height: 224px;
    overflow: hidden;
    padding: 22px 0 18px 18px;
    position: relative;
}
.hero-texto { min-width: 0; position: relative; z-index: 2; }
.hero h1 {
    font-size: clamp(25px, 7.2vw, 32px);
    font-weight: 850;
    letter-spacing: -1.25px;
    line-height: 1.02;
    margin: 0;
}
.hero h1 em { color: var(--amarillo); font-style: normal; }
.hero-texto > p {
    color: #514d57;
    font-size: 12px;
    line-height: 1.35;
    margin: 10px 0 11px;
    max-width: 195px;
}
.boton-principal {
    align-items: center;
    background: linear-gradient(135deg, var(--violeta), #7134e8);
    border-radius: 9px;
    box-shadow: 0 7px 16px rgba(91,43,211,.16);
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 760;
    gap: 16px;
    height: 38px;
    padding: 0 14px;
}
.boton-principal span { font-size: 19px; font-weight: 350; }
.aviso-numero {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-top: 9px;
    max-width: 205px;
}
.aviso-numero svg {
    fill: none;
    flex: 0 0 auto;
    height: 17px;
    stroke: var(--violeta);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 17px;
}
.aviso-numero strong { color: #5c5762; font-size: 9px; line-height: 1.25; }
.hero-imagen { min-width: 0; position: relative; }
.hero-imagen > img {
    height: 190px;
    left: 50%;
    object-fit: contain;
    position: absolute;
    top: 5px;
    transform: translateX(-46%);
    width: 225px;
}
.burbuja-regalo, .puntos { display: none; }

.aviso-instalacion {
    background: #fff4cf;
    color: #6f5200;
    font-size: 12px;
    margin: 14px 16px 0;
    padding: 10px 12px;
}
.bloque { padding: 22px 16px 4px; }
.titulo-seccion {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.titulo-seccion h2 { font-size: 18px; letter-spacing: -.55px; margin: 0; }
.titulo-seccion a { color: var(--violeta); font-size: 11px; font-weight: 760; }

.sorteos-lista {
    display: grid;
    gap: 10px;
    grid-auto-columns: calc(50% - 5px);
    grid-auto-flow: column;
    overflow-x: auto;
    padding: 0 1px 7px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.sorteos-lista::-webkit-scrollbar { display: none; }
.sorteo-tarjeta {
    border: 1px solid var(--borde);
    border-radius: 12px;
    min-width: 0;
    padding: 9px;
    scroll-snap-align: start;
}
.etiqueta {
    background: color-mix(in srgb, var(--etiqueta) 14%, white);
    border-radius: 5px;
    color: var(--etiqueta);
    display: table;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .15px;
    padding: 4px 5px;
}
.sorteo-tarjeta > img {
    display: block;
    height: 92px;
    margin: 4px 0;
    object-fit: contain;
    width: 100%;
}
.sorteo-tarjeta h3 {
    font-size: 12px;
    line-height: 1.2;
    margin: 4px 0;
    min-height: 29px;
}
.fecha-sorteo { min-height: 25px; }
.fecha-normal {
    align-items: center;
    color: #635d68;
    display: flex;
    font-size: 8px;
    font-weight: 720;
    gap: 4px;
    line-height: 1.25;
}
.fecha-normal svg { fill: none; height: 12px; stroke: var(--violeta); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 12px; }
.contador-urgente { color: #e62222; display: block; font-size: 10px; line-height: 1.25; }
.contador-urgente[hidden], .fecha-normal[hidden] { display: none; }
.precio-sorteo { border-top: 1px solid var(--borde); display: flex; flex-direction: column; margin-top: 7px; padding-top: 7px; }
.precio-sorteo small { color: #817b85; display: block; font-size: 7px; }
.precio-sorteo strong { font-size: 15px; letter-spacing: -.4px; margin-top: 1px; }
.sorteo-tarjeta small, .curso-fila small {
    align-items: center;
    color: #716d77;
    display: flex;
    font-size: 8px;
    gap: 4px;
}
.sorteo-tarjeta small svg, .curso-fila small svg {
    fill: none;
    height: 12px;
    stroke: var(--violeta);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 12px;
}

.cursos { padding-top: 20px; }
.cursos-lista { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.curso-fila {
    align-items: center;
    display: grid;
    gap: 9px;
    grid-template-columns: 46px minmax(0, 1fr) auto 32px;
    min-height: 68px;
    padding: 9px 10px;
}
.curso-fila + .curso-fila { border-top: 1px solid var(--borde); }
.curso-fila > img { border-radius: 8px; height: 46px; object-fit: cover; width: 46px; }
.curso-texto { min-width: 0; }
.curso-texto h3 { font-size: 13px; line-height: 1.2; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curso-texto p { color: #625e67; font-size: 10px; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curso-fila small svg { height: 11px; stroke: #716d77; width: 11px; }
.precio { font-size: 12px; }
.flecha { align-items: center; background: var(--violeta); border-radius: 50%; color: #fff; display: flex; font-size: 18px; height: 30px; justify-content: center; width: 30px; }
.llamada-premios {
    align-items: center;
    background: #fff6dc;
    border-radius: 12px;
    display: grid;
    gap: 9px;
    grid-template-columns: 38px 1fr auto;
    margin: 14px 16px 6px;
    padding: 10px 12px;
}
.llamada-premios > span { align-items: center; background: var(--amarillo); border-radius: 50%; display: flex; font-size: 18px; height: 36px; justify-content: center; width: 36px; }
.llamada-premios p { font-size: 10px; line-height: 1.3; margin: 0; }
.llamada-premios a { color: var(--violeta); font-size: 9px; font-weight: 760; white-space: nowrap; }

.navegacion-inferior {
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--borde);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    left: 0;
    padding: 8px 8px max(9px, env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 20;
}
.navegacion-inferior a { align-items: center; display: flex; flex-direction: column; gap: 3px; }
.navegacion-inferior svg { fill: none; height: 21px; stroke: #171319; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 21px; }
.navegacion-inferior small { font-size: 9px; }
.navegacion-inferior a.activo { color: var(--violeta); }
.navegacion-inferior a.activo svg { fill: var(--violeta); stroke: var(--violeta); }

@media (min-width: 760px) {
    .pagina { margin: 0 auto; max-width: 1340px; padding: 0 28px 28px; }
    .encabezado {
        grid-template-columns: auto minmax(0,1fr) auto;
        height: 72px;
        padding: 0 4px;
    }
    .encabezado > .boton-icono:first-child, .volver-movil, .encabezado > .boton-icono:last-child { display: none; }
    .logo { font-size: 25px; }
    .menu-escritorio {
        align-items: center;
        display: flex;
        gap: clamp(22px, 3vw, 46px);
        justify-self: center;
    }
    .menu-escritorio a { color: #5f5a65; font-size: 13px; font-weight: 650; position: relative; }
    .menu-escritorio a:hover, .menu-escritorio a.activo { color: var(--violeta); }
    .menu-escritorio a.activo::after { background: var(--violeta); border-radius: 4px; bottom: -12px; content: ""; height: 3px; left: 50%; position: absolute; transform: translateX(-50%); width: 20px; }
    .acceso-escritorio { background: #f0eaff; border-radius: 9px; color: var(--violeta); display: block; font-size: 12px; font-weight: 780; padding: 10px 17px; }
    .franja-confianza {
        background: #241b39;
        border-radius: 0 0 15px 15px;
        color: #fff;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        min-height: 54px;
        padding: 8px 30px;
    }
    .franja-confianza div { display: flex; flex-direction: column; justify-content: center; padding: 0 26px; position: relative; }
    .franja-confianza div + div::before { background: rgba(255,255,255,.16); content: ""; height: 26px; left: 0; position: absolute; top: 6px; width: 1px; }
    .franja-confianza strong { color: #ffd066; font-size: 11px; letter-spacing: .15px; }
    .franja-confianza span { color: #d8d3e1; font-size: 10px; margin-top: 2px; }
    .hero {
        border-radius: 18px;
        grid-template-columns: 43% 57%;
        height: 310px;
        margin-top: 18px;
        padding: 42px 48px;
    }
    .hero h1 { font-size: 43px; letter-spacing: -2px; line-height: 1.01; }
    .hero-texto > p { font-size: 14px; margin: 13px 0; max-width: 320px; }
    .boton-principal { font-size: 13px; height: 42px; }
    .aviso-numero { margin-top: 11px; max-width: 265px; }
    .aviso-numero strong { font-size: 10px; }
    .hero-imagen > img { height: 300px; left: 50%; top: -35px; transform: translateX(-48%); width: min(540px, 46vw); }
    .bloque { padding: 24px 0 4px; }
    .titulo-seccion h2 { font-size: 19px; }
    .sorteos-lista {
        grid-auto-flow: unset;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }
    .sorteo-tarjeta { padding: 10px; }
    .sorteo-tarjeta > img { height: 112px; }
    .sorteo-tarjeta h3 { font-size: 13px; min-height: 31px; }
    .sorteo-tarjeta p { font-size: 10px; }
    .sorteo-tarjeta small { font-size: 9px; }
    .cursos-lista { display: grid; grid-template-columns: repeat(2, 1fr); }
    .curso-fila:nth-child(even) { border-left: 1px solid var(--borde); }
    .curso-fila:nth-child(2) { border-top: 0; }
    .llamada-premios { margin-inline: 0; }
    .navegacion-inferior { display: none; }
}

@media (min-width: 1180px) {
    .hero { height: 292px; }
    .hero-imagen > img { height: 300px; left: 50%; top: -42px; transform: translateX(-45%); }
    .sorteos-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 370px) {
    .hero { grid-template-columns: 55% 45%; padding-left: 15px; }
    .hero h1 { font-size: 24px; }
    .hero-imagen > img { left: 50%; transform: translateX(-47%); width: 210px; }
    .curso-fila { grid-template-columns: 42px minmax(0,1fr) 30px; }
    .curso-fila > img { height: 42px; width: 42px; }
    .precio { display: none; }
}

/* Páginas internas */
.contenido-interno { padding-bottom: 18px; }
.cabecera-interna {
    background: linear-gradient(130deg, #f7f2ff, #fff8e8);
    display: grid;
    grid-template-columns: minmax(0,1fr) 70px;
    min-height: 160px;
    overflow: hidden;
    padding: 25px 18px;
    position: relative;
}
.cabecera-interna h1 { font-size: 27px; letter-spacing: -1.1px; line-height: 1.04; margin: 5px 0 8px; max-width: 310px; }
.cabecera-interna p { color: #5f5966; font-size: 11px; line-height: 1.45; margin: 0; max-width: 300px; }
.sobrelinea { color: var(--violeta); font-size: 8px; font-weight: 850; letter-spacing: .7px; }
.icono-cabecera { align-items: center; background: var(--amarillo); border-radius: 24px; box-shadow: 0 12px 28px rgba(73,35,126,.16); display: flex; font-size: 31px; height: 70px; justify-content: center; transform: rotate(7deg); width: 70px; }
.cabecera-cursos .icono-cabecera { background: var(--violeta); color: #fff; font-size: 25px; }
.catalogo-seccion { padding: 22px 16px; }
.titulo-seccion > span { color: #77717c; font-size: 10px; }
.catalogo-cursos, .catalogo-premios { display: grid; gap: 12px; }
.curso-card { border: 1px solid var(--borde); border-radius: 15px; display: grid; grid-template-columns: 92px minmax(0,1fr); overflow: hidden; }
.curso-card > img { align-self: center; border-radius: 14px; height: 72px; margin-left: 10px; object-fit: cover; width: 72px; }
.curso-card-cuerpo { min-width: 0; padding: 12px 12px 12px 0; }
.curso-card-cuerpo h3 { font-size: 15px; margin: 3px 0 1px; }
.curso-card-cuerpo > p { color: #67616c; font-size: 10px; margin: 0 0 5px; }
.curso-card-cuerpo small { color: #87818a; font-size: 8px; }
.curso-card-cuerpo > div { align-items: center; display: flex; justify-content: space-between; margin-top: 8px; }
.curso-card-cuerpo strong { font-size: 14px; }
.curso-card-cuerpo a { color: var(--violeta); font-size: 10px; font-weight: 800; }
.curso-nivel { color: var(--violeta); font-size: 7px; font-weight: 850; letter-spacing: .35px; }
.premio-card { border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.premio-card-imagen { background: #faf8fc; height: 165px; padding: 12px; position: relative; }
.premio-card-imagen .etiqueta { left: 12px; position: absolute; top: 12px; z-index: 2; }
.premio-card-imagen img { height: 100%; object-fit: contain; width: 100%; }
.premio-card-cuerpo { padding: 13px; }
.premio-card-cuerpo h3 { font-size: 15px; margin: 0 0 5px; }
.premio-card-cuerpo > p { color: #77717b; font-size: 9px; line-height: 1.4; margin: 0 0 11px; }
.premio-card-cuerpo > a { align-items: center; background: var(--violeta); border-radius: 9px; color: #fff; display: flex; font-size: 10px; font-weight: 780; justify-content: space-between; margin-top: 12px; padding: 10px 12px; }
.premio-card-cuerpo .fecha-sorteo { min-height: 24px; }
.premio-card-cuerpo .precio-sorteo { align-items: flex-end; flex-direction: row; justify-content: space-between; }
.premio-card-cuerpo .precio-sorteo strong { font-size: 18px; }

/* Detalle del premio */
.espacio-movil { display: block; height: 38px; width: 38px; }
.detalle-premio { padding: 14px 16px 30px; }
.miga { color: var(--violeta); display: inline-block; font-size: 10px; font-weight: 760; margin: 2px 0 13px; }
.detalle-premio-grid { display: grid; gap: 20px; }
.imagen-principal-premio { background: linear-gradient(145deg, #f6f2fc, #fff); border: 1px solid var(--borde); border-radius: 20px; height: 295px; padding: 28px; position: relative; }
.imagen-principal-premio .etiqueta { left: 14px; position: absolute; top: 14px; z-index: 2; }
.imagen-principal-premio > img { height: 100%; object-fit: contain; width: 100%; }
.miniaturas-premio { display: flex; gap: 8px; margin-top: 9px; overflow-x: auto; }
.miniaturas-premio button { background: #fff; border: 1px solid var(--borde); border-radius: 10px; height: 58px; padding: 5px; width: 58px; }
.miniaturas-premio button.activa { border: 2px solid var(--violeta); }
.miniaturas-premio img { height: 100%; object-fit: contain; width: 100%; }
.informacion-premio h1 { font-size: 28px; letter-spacing: -1px; line-height: 1.05; margin: 5px 0 12px; }
.fecha-sorteo-detalle { background: #f7f3ff; border-radius: 10px; min-height: 40px; padding: 11px 12px; }
.fecha-sorteo-detalle .fecha-normal { color: var(--violeta-oscuro); font-size: 11px; }
.fecha-sorteo-detalle .contador-urgente { font-size: 15px; }
.descripcion-premio { border-bottom: 1px solid var(--borde); border-top: 1px solid var(--borde); margin: 16px 0; padding: 15px 0; }
.descripcion-premio h2 { font-size: 14px; margin: 0 0 7px; }
.descripcion-premio p { color: #66606b; font-size: 11px; line-height: 1.55; margin: 0; }
.compra-premio { background: #241b39; border-radius: 16px; color: #fff; padding: 16px; }
.compra-premio > small { color: #d8d1e3; display: block; font-size: 9px; }
.compra-premio > strong { color: #ffd05c; display: block; font-size: 28px; letter-spacing: -1px; margin: 2px 0 5px; }
.compra-premio p { color: #d8d1e3; font-size: 9px; line-height: 1.4; margin: 0 0 12px; }
.compra-premio a { align-items: center; background: var(--amarillo); border-radius: 9px; color: #211b2a; display: flex; font-size: 11px; font-weight: 820; justify-content: space-between; padding: 11px 12px; }
.dato-sorteo { align-items: center; display: flex; gap: 9px; margin-top: 13px; }
.dato-sorteo > span { align-items: center; background: #eaf8ef; border-radius: 50%; color: #198847; display: flex; flex: 0 0 auto; height: 28px; justify-content: center; width: 28px; }
.dato-sorteo p { color: #6b6570; font-size: 9px; line-height: 1.35; margin: 0; }
.dato-sorteo strong { color: #29242d; }
.premio-no-encontrado { margin: 60px auto; max-width: 430px; text-align: center; }
.premio-no-encontrado > span { font-size: 48px; }
.premio-no-encontrado h1 { font-size: 24px; }
.premio-no-encontrado p { color: var(--gris); font-size: 12px; }
.premio-no-encontrado a { background: var(--violeta); border-radius: 9px; color: #fff; display: inline-block; font-size: 11px; font-weight: 780; margin-top: 8px; padding: 11px 16px; }

@media (min-width: 760px) {
    .pagina-interna .encabezado { border-bottom: 0; }
    .contenido-interno { padding-top: 18px; }
    .cabecera-interna { border-radius: 18px; grid-template-columns: 1fr 140px; min-height: 230px; padding: 48px 56px; }
    .cabecera-interna h1 { font-size: 42px; max-width: 620px; }
    .cabecera-interna p { font-size: 14px; max-width: 570px; }
    .sobrelinea { font-size: 10px; }
    .icono-cabecera { border-radius: 38px; font-size: 54px; height: 130px; width: 130px; }
    .cabecera-cursos .icono-cabecera { font-size: 42px; }
    .catalogo-seccion { padding: 28px 0; }
    .catalogo-cursos { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .curso-card { grid-template-columns: 135px minmax(0,1fr); }
    .curso-card > img { height: 105px; margin-left: 15px; width: 105px; }
    .curso-card-cuerpo { padding: 18px 16px 18px 0; }
    .curso-card-cuerpo h3 { font-size: 18px; }
    .curso-card-cuerpo > p { font-size: 12px; }
    .catalogo-premios { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .premio-card-imagen { height: 210px; }
    .premio-card-cuerpo h3 { font-size: 17px; }
    .espacio-movil { display: none; }
    .detalle-premio { padding: 28px 0 50px; }
    .miga { font-size: 12px; margin-bottom: 18px; }
    .detalle-premio-grid { align-items: start; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr); gap: clamp(34px, 5vw, 72px); }
    .imagen-principal-premio { height: 500px; padding: 48px; }
    .informacion-premio { padding-top: 10px; }
    .informacion-premio h1 { font-size: 43px; margin-bottom: 18px; }
    .fecha-sorteo-detalle .fecha-normal { font-size: 13px; }
    .descripcion-premio h2 { font-size: 16px; }
    .descripcion-premio p { font-size: 13px; }
    .compra-premio { padding: 21px; }
    .compra-premio > strong { font-size: 34px; }
    .compra-premio p, .dato-sorteo p { font-size: 11px; }
    .compra-premio a { font-size: 12px; }
}