* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: #172033;
    background: #ffffff;
}

body.modal-abierto {
    overflow: hidden;
}

img {
    max-width: 100%;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

a {
    color: inherit;
}

.contenedor {
    width: min(1160px, calc(100% - 36px));
    margin: 0 auto;
}

/* BOTONES */

.btn-principal,
.btn-secundario,
.btn-comprar,
.btn-ver-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 18px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
}

.btn-principal,
.btn-comprar {
    border: 0;
    background: #17233f;
    color: #ffffff;
}

.btn-secundario {
    border: 1px solid #cad0da;
    background: #ffffff;
    color: #172033;
}

/* HEADER - SOLO LOGO CENTRADO */

.header-publico {
    background: #ffffff;
    border-bottom: 1px solid #e7e9ed;
}

.header-interior {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-header img {
    display: block;
    width: 190px;
    height: auto;
}

/* HERO */

.hero-publico {
    padding: 50px 0 62px;
    text-align: center;
}

.hero-centro {
    max-width: 930px;
}

.hero-publico h1 {
    width: min(900px, 100%);
    margin: 0 auto 22px;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.08;
}

.premio-titulo {
    margin: 30px auto 20px;
    font-size: clamp(24px, 3vw, 36px);
}

/* PROGRESO */

.progreso-publico {
    width: min(720px, 100%);
    margin: 0 auto 30px;
}

.progreso-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 800;
}

.barra-publica {
    width: 100%;
    height: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #e1e5eb;
}

.barra-publica-valor {
    height: 100%;
    border-radius: inherit;
    background: #17233f;
}

/* IMAGEN PRINCIPAL */

.premio-visor {
    width: min(820px, 100%);
    margin: 28px auto;
}

.premio-imagen-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #e4e8ee;
    border-radius: 26px;
    background: #f7f8fa;
    box-shadow:
        0 16px 38px rgba(23, 35, 63, 0.10);
}

.premio-imagen-principal img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 18px;
    filter:
        drop-shadow(
            0 10px 22px
            rgba(0, 0, 0, 0.10)
        );
}

.premio-imagen-principal img.cambiando {
    animation: cambiarImagen 0.35s ease;
}

@keyframes cambiarImagen {

    from {
        opacity: 0.45;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.premio-miniaturas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 16px;
}

.premio-miniatura {
    width: 86px;
    height: 86px;
    padding: 6px;
    border: 1px solid #d9dee6;
    border-radius: 14px;
    background: #ffffff;
}

.premio-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.premio-miniatura.activa {
    border: 2px solid #17233f;
}

/* DESCRIPCIÓN */

.descripcion-sorteo {
    width: min(760px, 100%);
    margin: 24px auto;
    color: #626b7b;
    font-size: 16px;
    line-height: 1.7;
}

.fecha-publica {
    display: grid;
    gap: 5px;
    justify-items: center;
    margin-top: 24px;
}

.fecha-publica span {
    color: #6c7585;
    font-size: 13px;
}

/* SECCIONES */

.seccion-general {
    padding: 65px 0;
}

.seccion-suave {
    background: #f7f8fa;
}

.titulo-seccion {
    width: min(720px, 100%);
    margin: 0 auto 36px;
    text-align: center;
}

.titulo-seccion h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 42px);
}

.titulo-seccion p {
    margin: 0;
    color: #687183;
    line-height: 1.6;
}

/* GALERÍA */

.galeria-horizontal {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 5px 3px 18px;
    scroll-snap-type: x mandatory;
}

.galeria-item {
    flex: 0 0 min(620px, 86%);
    margin: 0;
    scroll-snap-align: center;
}

.galeria-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 14px;
    object-fit: contain;
    border-radius: 22px;
    border: 1px solid #e0e4e9;
    background: #f7f8fa;
    box-shadow:
        0 12px 30px
        rgba(23, 35, 63, 0.08);
}

.galeria-item figcaption {
    margin-top: 9px;
    text-align: center;
    color: #687183;
}

/* PASOS */

.pasos-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    text-align: center;
}

.pasos-grid article {
    padding: 25px 18px;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 16px;
}

.pasos-grid article > span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #17233f;
    color: #ffffff;
    font-weight: 800;
}

.pasos-grid p {
    color: #687183;
    line-height: 1.55;
}

/* COMBOS */

.combos-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 270px)
        );
    justify-content: center;
    gap: 20px;
}

.combo-card {
    position: relative;
    width: 100%;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e0e4e9;
    border-radius: 17px;
    background: #ffffff;
}

.combo-destacado {
    border: 2px solid #17233f;
}

.combo-etiqueta {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #17233f;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.combo-cantidad strong {
    display: block;
    font-size: 40px;
}

.combo-cantidad span {
    color: #687183;
}

.combo-precio {
    margin: 19px 0;
    font-size: 30px;
    font-weight: 800;
}

.combo-card p {
    color: #687183;
}

.btn-comprar {
    width: 100%;
}

/* CANTIDAD PERSONALIZADA */

.cantidad-personalizada {
    width: min(650px, 100%);
    margin: 36px auto 0;
    padding: 29px;
    text-align: center;
    background: #f7f8fa;
    border: 1px solid #e0e4e9;
    border-radius: 17px;
}

.selector-cantidad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.selector-cantidad button {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 9px;
    background: #17233f;
    color: #ffffff;
    font-size: 24px;
}

.selector-cantidad input {
    width: 110px;
    height: 48px;
    border: 1px solid #cad0da;
    border-radius: 9px;
    text-align: center;
    font-weight: 800;
}

.precio-personalizado {
    margin: 20px 0;
}

.precio-personalizado span,
.precio-personalizado strong {
    display: block;
}

.precio-personalizado strong {
    font-size: 29px;
}

/* GANADORES */

.carrusel-ganadores {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 5px 2px 20px;
}

.ganador-card {
    flex: 0 0 285px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 17px;
}

.ganador-card > img,
.ganador-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ganador-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
}

.ganador-placeholder img {
    width: 95px;
}

.ganador-info {
    padding: 18px;
    text-align: center;
}

/* CONSULTA */

.consulta-contenedor {
    max-width: 870px;
}

.form-consulta {
    width: min(600px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.form-consulta label {
    text-align: left;
    font-weight: 800;
}

.form-consulta input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cad0da;
    border-radius: 9px;
}

.mensaje-consulta,
.mensaje-vacio {
    width: min(650px, 100%);
    margin: 24px auto 0;
    padding: 16px;
    text-align: center;
    background: #f6f7f9;
    border-radius: 10px;
}

.mensaje-consulta.error {
    color: #991b1b;
    background: #fee2e2;
}

.resultado-consulta {
    margin-top: 38px;
    text-align: center;
}

.datos-cliente-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.datos-cliente-grid > div {
    padding: 15px;
    text-align: left;
    background: #f7f8fa;
    border-radius: 10px;
}

.datos-cliente-grid span {
    display: block;
    font-size: 12px;
    color: #687183;
}

.numeros-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(90px, 1fr)
        );
    gap: 10px;
}

.numeros-grid span {
    padding: 12px 7px;
    border: 1px solid #d9dee6;
    border-radius: 9px;
    font-weight: 800;
}

.correo-numeros {
    margin-top: 30px;
}

/* PREGUNTAS */

.preguntas {
    max-width: 850px;
}

.preguntas details {
    margin-bottom: 12px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 11px;
}

.preguntas summary {
    cursor: pointer;
    font-weight: 800;
}

/* CONTACTO */

.contacto-centro {
    text-align: center;
}

.contacto-acciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* FOOTER */

.footer-publico {
    padding: 48px 0 20px;
    background: #10182d;
    color: #ffffff;
}

.footer-marca {
    text-align: center;
    margin-bottom: 38px;
}

.footer-marca img {
    width: 190px;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 28px;
    text-align: center;
}

.footer-grid a {
    display: block;
    margin: 9px 0;
    text-decoration: none;
}

.footer-copy {
    margin-top: 36px;
    padding-top: 19px;
    text-align: center;
    border-top: 1px solid #2a344a;
}

/* WHATSAPP */



/* WHATSAPP FLOTANTE - GRUPO FASA */
.whatsapp-flotante {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    top: auto !important;
    left: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 18px;
    background: #25D366;
    color: #ffffff;
    border-radius: 50px;

    text-decoration: none;
    font-weight: 600;
    font-size: 15px;

    z-index: 99999 !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.whatsapp-flotante:hover {
    background: #1ebe5d;
    color: #ffffff;
}

.whatsapp-flotante .wa-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.whatsapp-flotante .wa-logo-imagen {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.whatsapp-flotante .wa-texto {
    display: inline-block;
}

/* Mensaje temporal */
.whatsapp-flotante .wa-mensaje-temporal {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);

    width: 250px;
    max-width: calc(100vw - 120px);
    padding: 12px 15px;

    background: #ffffff;
    color: #172033;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);

    font-size: 13px;
    line-height: 1.5;
    font-weight: normal;

    z-index: 100000;
    pointer-events: none;
    animation: wa-mensaje-desaparece 7s ease forwards;
}

.whatsapp-flotante .wa-mensaje-temporal strong {
    display: block;
    color: #168447;
    margin-top: 3px;
}

@keyframes wa-mensaje-desaparece {
    0%, 70% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 480px) {
    .whatsapp-flotante {
        right: 14px !important;
        bottom: 14px !important;
        padding: 11px 14px;
    }

    .whatsapp-flotante .wa-mensaje-temporal {
        width: 210px;
        right: calc(100% + 8px);
    }
}


.whatsapp-flotante .wa-mensaje-temporal strong {
    display: block;
    color: #168447;
    margin-top: 3px;
}

@keyframes wa-mensaje-desaparece {
    0%, 70% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 480px) {
    .whatsapp-flotante .wa-mensaje-temporal {
        max-width: 210px;
        font-size: 12px;
        right: calc(100% + 8px);
    }
}


/* MODALES */

.modal-fasa {
    display: none !important;
}

.modal-fasa.activo {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 17, 32, 0.72);
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: min(590px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 28px;
    background: #ffffff;
    border-radius: 18px;
}

.modal-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #edf0f4;
    font-size: 27px;
}

.modal-encabezado {
    text-align: center;
}

.modal-encabezado img {
    width: 48px;
}

.resumen-compra {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.resumen-compra > div {
    padding: 14px;
    text-align: center;
    background: #f5f7f9;
    border-radius: 10px;
}

/* FORMULARIO */

.campo-formulario {
    margin-bottom: 15px;
}

.campo-formulario label,
.metodos-fieldset legend {
    display: block;
    margin-bottom: 7px;
    font-weight: 800;
}

.campo-formulario input {
    width: 100%;
    min-height: 47px;
    padding: 10px 12px;
    border: 1px solid #cad0da;
    border-radius: 9px;
}

.metodos-fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.opcion-pago {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #d8dde5;
    border-radius: 10px;
}

.opcion-pago input {
    width: 18px;
    height: 18px;
}

.opcion-pago strong,
.opcion-pago small {
    display: block;
}

.opcion-pago small {
    margin-top: 3px;
    color: #687183;
}

/* CUENTAS TRANSFERENCIA */

.bloque-transferencia {
    display: none;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #e0e4e9;
    border-radius: 14px;
    background: #f7f8fa;
}

.bloque-transferencia.activo {
    display: block;
}

.bloque-transferencia h3 {
    margin-top: 0;
    text-align: center;
}

.bloque-transferencia > p {
    text-align: center;
    color: #687183;
}

.cuentas-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 12px;
}

.cuenta-card {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #dce1e8;
    border-radius: 12px;
}

.cuenta-card h4 {
    margin: 0 0 12px;
    text-align: center;
}

.cuenta-card p {
    margin: 7px 0;
    line-height: 1.45;
}

.aviso-comprobante {
    margin-top: 15px;
    padding: 14px;
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
}

/* AVISO DATOS */

.aviso-datos {
    margin: 19px 0;
    padding: 15px;
    background: #f5f7f9;
    border-radius: 10px;
}

.check-compra {
    display: flex;
    gap: 9px;
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.5;
}

.check-compra input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* AVISO PERSONALIZADO */

.modal-aviso-panel {
    width: min(500px, 100%);
    text-align: center;
}

.aviso-icono {
    display: flex;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8ebf0;
    font-size: 26px;
    font-weight: 900;
}

.aviso-icono.exito {
    background: #dcfce7;
    color: #166534;
}

.aviso-icono.error {
    background: #fee2e2;
    color: #991b1b;
}

.aviso-icono.advertencia {
    background: #fef3c7;
    color: #92400e;
}

.aviso-acciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

/* PUBLICIDAD */

.publicidad-panel {
    width: min(500px, 100%);
    padding: 0;
    overflow: hidden;
}

.publicidad-imagen {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

.publicidad-contenido {
    padding: 24px;
    text-align: center;
}

.publicidad-combo {
    margin: 18px 0;
    padding: 14px;
    background: #f5f7f9;
    border-radius: 10px;
}

/* RESPONSIVE */

@media (max-width: 900px) {

    .pasos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .contenedor {
        width: calc(100% - 22px);
    }

    .header-interior {
        min-height: 72px;
    }

    .logo-header img {
        width: 160px;
    }

    .hero-publico {
        padding: 34px 0 45px;
    }

    .seccion-general {
        padding: 48px 0;
    }

    .premio-imagen-principal {
        min-height: 280px;
        padding: 12px;
        border-radius: 20px;
    }

    .premio-miniatura {
        width: 72px;
        height: 72px;
    }

    .pasos-grid,
    .combos-grid,
    .datos-cliente-grid {
        grid-template-columns: 1fr;
    }

    .ganador-card {
        flex-basis: 82%;
    }

    .modal-fasa.activo {
        padding: 10px;
        align-items: flex-start;
    }

    .modal-panel {
        width: 100%;
        max-height: calc(100vh - 20px);
        margin: auto 0;
        padding: 22px 15px;
    }

    .publicidad-panel {
        padding: 0;
    }

    .wa-texto {
        display: none;
    }

    .whatsapp-flotante {
        right: 12px;
        bottom: 12px;
    }
}

@media (max-width: 380px) {

    .resumen-compra {
        grid-template-columns: 1fr;
    }

    .aviso-acciones {
        flex-direction: column;
    }

    .aviso-acciones > * {
        width: 100%;
    }
}


/* Enlace a la publicación original del ganador */
.ganador-imagen-enlace {
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.ganador-imagen-enlace img {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ganador-imagen-enlace:hover img {
    transform: scale(1.02);
}