/* ═══════════════════════════════════════════════════════════════════════════
   VIVENTA · POPUP CAMPAÑA "LOS 15 DEL OUTLET"  (sólo en el home)
   El marcado vive en Themes/Default.razor (bloque @if (EsHome)) y se pinta
   visible en cada visita; theme.js sólo lo cierra (X, clic en el fondo o
   Escape). Misma tarjeta vertical en mobile y desktop (decisión de diseño).

   Tokens --vv-* de chrome.css. Bootstrap carga antes y sus selectores de
   elemento (h2, p) ganan al reset genérico, así que cada regla usa clase
   propia y fija su propio margin.

   Al terminar la campaña: quitar el bloque de Default.razor, el manejador
   en theme.js y este archivo de ThemeInfo.cs.

   Al modificar este archivo, sube el ?v= en ThemeInfo.cs (cache-busting).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bloquea el scroll del sitio mientras el popup existe en el DOM. Con :has()
   no queda estado colgado: al quitar el nodo (theme.js) o navegar, se libera
   solo — importante con la navegación enhanced de Blazor. */
html:has(.vv-outlet15) {
    overflow: hidden;
}

/* — Fondo oscuro — */

.vv-outlet15 {
    position: fixed;
    inset: 0;
    z-index: 900; /* por encima de todo el chrome (máximo actual: 500) */
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(22, 26, 51, 0.62);
    animation: vv-outlet15-fondo 240ms ease-out both;
}

/* — Tarjeta con marco rosa degradado — */

.vv-outlet15__tarjeta {
    position: relative;
    /* margin:auto y no align-items:center en el padre: si la tarjeta es más
       alta que el viewport, con align-items se recorta la parte superior. */
    margin: auto;
    width: min(420px, 100%);
    border-radius: 28px;
    background: linear-gradient(160deg, #FF5C93 0%, var(--vv-rosa) 45%, #9F0A50 100%);
    box-shadow: 0 30px 80px rgba(22, 26, 51, 0.45);
    padding: 14px;
    display: grid;
    gap: 14px;
    /* El popup no cuelga de .vv-landing: fija la fuente en vez de heredar
       lo que el body tenga puesto (Bootstrap/Theme.css). */
    font-family: var(--vv-texto);
    animation: vv-outlet15-entrada 320ms var(--vv-ease-back) both;
}

.vv-outlet15__cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--vv-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vv-outlet15__cerrar:hover {
    background: rgba(255, 255, 255, 0.32);
}

.vv-outlet15__panel {
    border-radius: 20px;
}

/* — Panel navy: título + imagen — */

.vv-outlet15__panel--navy {
    background: var(--vv-navy);
    padding: 26px 24px 20px;
    overflow: hidden;
}

.vv-outlet15__titulo {
    margin: 0;
    padding-right: 34px; /* aire para la X */
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: clamp(26px, 6.5vw, 32px);
    line-height: 1.18;
    color: var(--vv-blanco);
}

.vv-outlet15__titulo-resalte {
    color: var(--vv-rosa-pastel);
}

.vv-outlet15__imagen {
    display: block;
    width: 84%;
    margin: 12px auto 0;
}

/* — Panel blanco: oferta + CTA — */

.vv-outlet15__panel--blanco {
    background: var(--vv-blanco);
    padding: 24px 22px 26px;
    text-align: center;
}

.vv-outlet15__kicker {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--vv-gris-900);
}

.vv-outlet15__monto {
    margin: 0 0 12px;
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.05;
    color: var(--vv-rosa);
}

.vv-outlet15__frase {
    margin: 0 auto 12px;
    max-width: 24ch;
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
    color: var(--vv-navy);
}

.vv-outlet15__resaltado {
    background: var(--vv-amarillo);
    color: inherit;
    padding: 1px 6px;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.vv-outlet15__texto {
    margin: 0 auto 20px;
    max-width: 36ch;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--vv-gris-900);
}

.vv-outlet15__cta {
    display: block;
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 24px;
    border-radius: 16px;
    background: var(--vv-menta);
    color: var(--vv-navy);
    font-family: var(--vv-display);
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
}

.vv-outlet15__cta:hover {
    background: var(--vv-menta-activa);
    color: var(--vv-navy);
}

/* — Animaciones — */

@keyframes vv-outlet15-fondo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes vv-outlet15-entrada {
    from { transform: translateY(24px) scale(0.94); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vv-outlet15,
    .vv-outlet15__tarjeta {
        animation: none;
    }
}