/* =========================================================
   BANNER DE LA NEWSLETTER v2 (27-09-2026) · común a toda la web
   ---------------------------------------------------------
   Marcado en templates/partials/footer.php (.vv-news). Lo enlaza header.php
   SIN bloquear (media="print" + onload): el banner está siempre por debajo de
   la primera pantalla. Sustituye a .newsletter-section de core.css, que se
   queda allí sin uso.

   Es una «isla oscura» en los dos temas, como la cabecera de las guías: el
   atardecer animado de la v1 se conserva como aura detrás del cristal.
   Piezas: cinta de precaución cruzada con un carrusel de texto, aura de
   atardecer, titular en Luckiest Guy con la segunda mitad en degradado,
   formulario en cápsula y un expediente «ALTO SECRETO» decorativo.
   ========================================================= */

.vv-news {
    --vn-bg: #0B0D10;
    --vn-ink: #F0F2F5;
    --vn-mute: #B7C0C8;            /* 9,9:1 sobre el fondo */
    --vn-orange: var(--color-primary, #FF5E14);
    position: relative; isolation: isolate; overflow: hidden;
    padding: 0 0 96px;
    background: var(--vn-bg);
    color: var(--vn-ink);
}

/* ---------- Cinta de precaución cruzada ---------- */
.vv-news__tape {
    position: relative; z-index: 2;
    width: 110%; margin: 34px 0 0 -5%;
    transform: rotate(-2deg);
    background: var(--vn-orange);
    box-shadow: 0 10px 30px rgba(255, 94, 20, 0.25);
    overflow: hidden;
}
/* Rayas de cinta arriba y abajo */
.vv-news__tape::before,
.vv-news__tape::after {
    content: ""; position: absolute; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(-45deg, var(--vn-bg) 0 10px, transparent 10px 20px);
}
.vv-news__tape::before { top: 0; }
.vv-news__tape::after { bottom: 0; }
.vv-news__track {
    display: flex; width: max-content; align-items: center;
    padding: 17px 0;
    animation: vn-marquee 38s linear infinite;
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.86rem;
    letter-spacing: 3px; text-transform: uppercase; white-space: nowrap;
    color: var(--color-text-inverted, #0B0D10);
}
.vv-news__track span { padding: 0 22px; }
.vv-news__track b { font-weight: 400; font-size: 0.9rem; }
@keyframes vn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Aura de atardecer (la herencia de la v1) ---------- */
.vv-news__aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.vv-news__aura::after {
    /* Retícula de puntos, como un plano táctico */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
/* Manchas de luz con degradado radial, SIN filter: blur (desenfocar 500 px por
   fotograma era lo más caro de pintar del banner). Mismo aspecto, una fracción del coste. */
.vv-news__aura i { position: absolute; border-radius: 50%; opacity: 0.6; will-change: transform; }
.vv-news__aura i:nth-child(1) { width: 720px; height: 720px; left: -260px; top: -60px; background: radial-gradient(closest-side, rgba(76, 29, 149, 0.95), rgba(76, 29, 149, 0) 100%); animation: vn-drift-a 18s ease-in-out infinite alternate; }
.vv-news__aura i:nth-child(2) { width: 660px; height: 660px; right: -200px; top: 40px; background: radial-gradient(closest-side, rgba(246, 107, 78, 0.8), rgba(246, 107, 78, 0) 100%); opacity: 0.5; animation: vn-drift-b 22s ease-in-out infinite alternate; }
.vv-news__aura i:nth-child(3) { width: 560px; height: 560px; left: 34%; bottom: -320px; background: radial-gradient(closest-side, rgba(255, 94, 20, 0.8), rgba(255, 94, 20, 0) 100%); opacity: 0.45; animation: vn-drift-a 26s ease-in-out infinite alternate-reverse; }
@keyframes vn-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, -40px) scale(1.15); } }
@keyframes vn-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-110px, 50px) scale(0.95); } }

/* ---------- Composición ---------- */
.vv-news__inner {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 64px;
    width: 100%; max-width: 1180px; margin: 0 auto; padding: 84px 32px 0;
}
.vv-news__kicker {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
    padding: 7px 14px 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--vn-ink);
}
.vv-news__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
/* Onda con transform + opacity: composición en la GPU, sin recalcular estilo por fotograma */
.vv-news__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ADE80; opacity: 0.55;
    animation: vn-ping 1.8s ease-out infinite;
}
@keyframes vn-ping { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.vv-news__title {
    margin: 0 0 18px;
    font-family: var(--font-heading); font-weight: 400; text-transform: uppercase;
    font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: 0.5px;
    color: #FFFFFF;
}
/* Degradado de texto: sin text-shadow (se ve a través de las letras); la sombra, con filter */
.vv-news__title span {
    display: block;
    background: linear-gradient(92deg, #FF5E14 0%, #FF8A4C 45%, #FFC29A 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 22px rgba(255, 94, 20, 0.35));
}
.vv-news__sub { max-width: 560px; margin: 0 0 30px; font-size: 1.08rem; line-height: 1.6; color: var(--vn-mute); }

/* Formulario en cápsula */
.vv-news__form {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    max-width: 580px; height: 66px; padding: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vv-news__form:focus-within { border-color: var(--vn-orange); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 94, 20, 0.25); }
.vv-news__field { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 100%; padding-left: 16px; color: var(--vn-mute); }
.vv-news__input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent; border-radius: 0;
    font-family: var(--font-body); font-size: 1rem; color: #FFFFFF;
    -webkit-appearance: none; appearance: none;
}
.vv-news__input::placeholder { color: rgba(240, 242, 245, 0.72); }
.vv-news__btn,
.vv-news__btn:hover,
.vv-news__btn:focus-visible {
    position: relative; overflow: hidden;
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 100%; padding: 0 26px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--vn-orange); color: var(--color-text-inverted, #0B0D10);
    font-family: var(--font-subheading); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.5px; white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vv-news__btn:hover { box-shadow: 0 10px 26px rgba(255, 94, 20, 0.45); }
.vv-news__btn:active { transform: scale(0.97); }
.vv-news__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.vv-news__btn:disabled { cursor: progress; opacity: 0.85; }
.vv-news__btn i { transition: transform 0.2s ease; }
.vv-news__btn:hover i { transform: translateX(3px); }
/* Destello que cruza el botón cada pocos segundos */
.vv-news__btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-150%) skewX(-20deg);
    animation: vn-shine 4.5s ease-in-out infinite;
}
/* translateX y no `left`: animar `left` obligaba a maquetar en cada fotograma */
@keyframes vn-shine { 0%, 70% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }

.vv-news__msg { min-height: 22px; margin-top: 14px; font-weight: 700; font-size: 0.92rem; }
.vv-news__legal { margin: 6px 0 0; font-size: 0.78rem; color: var(--vn-mute); }
.vv-news__legal a,
.vv-news__legal a:hover { color: var(--vn-ink); text-decoration: underline; text-underline-offset: 2px; }
.vv-news__legal a:focus-visible { outline: 2px solid var(--vn-orange); outline-offset: 2px; }

/* ---------- Expediente «ALTO SECRETO» (decorativo) ---------- */
.vv-news__dossier { position: relative; height: 380px; perspective: 1200px; }
.vv-news__sheet {
    position: absolute; left: 50%; top: 50%;
    width: 300px; height: 360px; margin: -180px 0 0 -150px;
    padding: 34px 28px 26px;
    border-radius: 6px;
    background: #F3EBDD
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(11, 13, 16, 0.06) 27px 28px);
    color: #1C1F24;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: rotate(5deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vv-news__sheet--back {
    background: #D9CCB4; transform: rotate(-7deg) translate(-26px, 10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.vv-news:hover .vv-news__sheet:not(.vv-news__sheet--back) { transform: rotate(1deg) translateY(-8px); }
.vv-news:hover .vv-news__sheet--back { transform: rotate(-10deg) translate(-40px, 14px); }
.vv-news__clip {
    position: absolute; top: -14px; left: 34px; width: 22px; height: 58px;
    border: 3px solid #8A939C; border-radius: 12px; border-bottom-color: transparent;
}
.vv-news__file {
    margin: 0 0 18px;
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.64rem; letter-spacing: 2px; text-transform: uppercase;
    color: #4A525A;
}
.vv-news__stamp {
    /* En el hueco de abajo, entre las líneas tachadas y la firma: si no, las barras lo pisan */
    position: absolute; left: 30px; bottom: 58px; z-index: 1; margin: 0;
    padding: 6px 12px; border: 3px solid #B3261E; border-radius: 6px;
    font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: 1px; text-transform: uppercase;
    color: #B3261E; transform: rotate(-14deg);
    mix-blend-mode: multiply; opacity: 0.9;
}
.vv-news__bar {
    display: block; width: var(--w, 80%); height: 12px; margin: 0 0 16px;
    border-radius: 2px; background: #1C1F24;
    position: relative; overflow: hidden;
}
.vv-news__bar--gap { margin-top: 30px; }
/* Barrido de «desclasificación» sobre las líneas tachadas */
.vv-news__bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 94, 20, 0.55), transparent);
    transform: translateX(-100%);
    animation: vn-scan 3.6s ease-in-out infinite;
}
.vv-news__bar:nth-of-type(2)::after { animation-delay: 0.3s; }
.vv-news__bar:nth-of-type(3)::after { animation-delay: 0.6s; }
.vv-news__bar:nth-of-type(4)::after { animation-delay: 0.9s; }
@keyframes vn-scan { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.vv-news__sign {
    position: absolute; left: 28px; bottom: 24px; margin: 0;
    font-family: var(--font-tactical); font-weight: 700; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #4A525A;
}
/* Sello «A» de la marca */
.vv-news__seal {
    position: absolute; right: 22px; bottom: 16px; width: 58px; height: 58px; border-radius: 50%;
    background: var(--vn-orange) url('/assets/img/marca-a.webp') center / 30px auto no-repeat;
    box-shadow: 0 0 0 4px #F3EBDD, 0 0 0 6px rgba(255, 94, 20, 0.5);
    transform: rotate(-8deg);
}

/* ---------- Móvil y tableta ---------- */
@media (max-width: 1023px) {
    .vv-news { padding-bottom: 56px; }
    .vv-news__tape { margin-top: 26px; }
    .vv-news__track { padding: 14px 0; font-size: 0.72rem; letter-spacing: 2px; animation-duration: 30s; }
    .vv-news__track span { padding: 0 16px; }
    .vv-news__inner { grid-template-columns: 1fr; gap: 0; padding: 52px 16px 0; }
    .vv-news__kicker { font-size: 0.6rem; letter-spacing: 2px; }
    .vv-news__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
    .vv-news__sub { font-size: 1rem; margin-bottom: 24px; }
    /* En el móvil el formulario se apila: campo y botón a lo ancho, 56 px, al pulgar */
    .vv-news__form {
        flex-direction: column; align-items: stretch; gap: 10px;
        height: auto; padding: 0; border: 0; border-radius: 0;
        background: transparent; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .vv-news__form:focus-within { box-shadow: none; }
    .vv-news__field {
        flex: none;   /* con flex: 1 en columna, la base 0 se comía los 56 px */
        height: 56px; padding: 0 16px; border-radius: 16px;
        background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .vv-news__field:focus-within { border-color: var(--vn-orange); box-shadow: 0 0 0 3px rgba(255, 94, 20, 0.25); }
    .vv-news__input { font-size: 1rem; }   /* 16 px: iOS no hace zoom al enfocar */
    .vv-news__btn, .vv-news__btn:hover, .vv-news__btn:focus-visible { height: 56px; border-radius: 16px; font-size: 0.95rem; }
    /* El expediente no cabe sin tapar el texto: fuera en el móvil y la tableta */
    .vv-news__dossier { display: none; }
    .vv-news__aura i:nth-child(1) { width: 460px; height: 460px; }
    .vv-news__aura i:nth-child(2) { width: 420px; height: 420px; }
    .vv-news__aura i:nth-child(3) { width: 380px; height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
    .vv-news__track, .vv-news__aura i, .vv-news__dot::after, .vv-news__btn::after, .vv-news__bar::after { animation: none; }
    .vv-news__sheet { transition: none; }
}