/*
 * Piel visual aprobada · APPROVED_SKIN_ON_FROZEN_STRUCTURE.
 *
 * Fuente: los cuatro mockups cerrados documentados en
 * docs/auditoria/APPROVED-MOCKUPS.md. Esta hoja solo viste el marcado PHP
 * congelado: no crea headings, copy, enlaces, destinos ni datos estructurados.
 */

/*
 * Fuentes variables self-hosted. Son los subsets Latin oficiales de Google Fonts;
 * las licencias OFL y la procedencia verificable viven en assets/fonts/README.md.
 * No hay requests a terceros durante el render.
 */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Constantes de marca. */
    --accent: #E8547E;
    /* Alias legacy: --pink sobrevive apuntando al acento nuevo para no convertir
       la piel en un refactor transversal. Su retirada se decide aparte. */
    --pink: var(--accent);
    /* --teal y --purple se retiraron al pasar los estados a --state-ok/--state-error:
       cero usos, verificado por grep sobre yv-theme y yv-core con D1 ya integrado. */
    --amber: #F0A51E;
    --grad-brand: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%);
    --radius: 2px;
    --radius-sm: 2px;
    --pill: 3px;
    --font-display: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --wrap: 1140px;

    /* Tema único oscuro, compartido por las cuatro familias. */
    --bg: #110E11;
    --bg-band: #161216;
    --surface: #1A161A;
    --surface-2: #201B20;
    --line: rgba(237, 231, 225, .07);
    --line-strong: rgba(237, 231, 225, .13);
    /* Filete de CONTROL. --line y --line-strong dibujan separaciones decorativas y se
       quedan como están; un campo de texto es otra cosa: su contorno es lo único que lo
       distingue de la superficie que tiene detrás, así que necesita los 3:1 de WCAG
       1.4.11. Solo lo usan los controles cuya frontera los identifica. */
    --line-control: rgba(237, 231, 225, .38);
    --text-1: #EDE7E1;
    --text-2: #CFC7C9;
    --text-3: #9C9298;
    --on-accent: #110E11;
    --ink: var(--accent);
    --ink-soft: rgba(232, 84, 126, .55);
    --focus: var(--accent);
    /* Semántica de estado. NO son acentos de marca y no siguen a la paleta:
       el ámbar queda reservado al acto de comprar y el acento a la marca. */
    --state-ok: #35C2B9;
    --state-error: #E8615C;
    --shadow-card: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

.yv-body {
    min-width: 20rem;
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Grano de película tenue, presente en las cuatro plantillas aprobadas.
   La costura de marca de borde a borde que vivía en `.yv-body::before` se retira
   (D2 · F2): era una barra fija de 3px con el degradado de marca. No se sustituye
   por otro degradado.
   El grano va en z-index 1 y `.yv-cabecera/.yv-main/.yv-pie` en z-index 2, así que
   queda DETRÁS del contenido legible y no puede degradar el contraste del texto. */
.yv-body::after {
    content: "";
    position: fixed;
    z-index: 1;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.55"/></svg>');
    opacity: .05;
    pointer-events: none;
}

.yv-cabecera,
.yv-main,
.yv-pie {
    position: relative;
    z-index: 2;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    /* D2 · F3B: sale el magenta viejo #FF2D87 y entra el acento nuevo #E8547E. Va
       como literal y no como var(--accent) a propósito: la selección es un velo al
       35%, y el token la volvería opaca sobre el texto que debe seguir leyéndose. */
    background: rgba(232, 84, 126, .35);
    color: var(--text-1);
}

.yv-saltar {
    position: fixed;
    z-index: 100;
    top: 8px;
    left: 8px;
    padding: .65rem .9rem;
    transform: translateY(calc(-100% - 16px));
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-1);
}

.yv-saltar:focus-visible {
    transform: translateY(0);
}

/* Cabecera oscura única. El padding fluido hace de .wrap sin añadir otro nodo. */
.yv-cabecera {
    position: sticky;
    z-index: 50;
    top: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: none;
    min-height: 68px;
    margin: 0;
    padding: 10px max(24px, calc((100vw - var(--wrap)) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(12, 12, 17, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.custom-logo-link {
    flex: none;
}

/* Regla del logo tal cual la usa el PIE, que en esta entrega no se toca. */
.custom-logo {
    width: auto;
    max-width: min(200px, 32vw);
    height: 34px;
    object-fit: contain;
}

/* Marca de la cabecera: glifo y nombre dentro del MISMO enlace a la home.
   El raster mide 392x146 y el triángulo ocupa x 159..236, y 4..72, separado del
   wordmark por 31 px sin un solo píxel. Eso permite recortarlo con un marco de
   overflow y la imagen desplazada, sin editar el PNG ni escribir en la base de datos.
   Todo se deriva de --glifo-alto, que es el alto del TRIÁNGULO ya en pantalla: los
   factores son las coordenadas del raster divididas entre los 69 px que mide de alto. */
.yv-marca {
    --glifo-alto: 28px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.yv-marca__glifo {
    display: block;
    flex: none;
    width: calc(78 * var(--glifo-alto) / 69);
    height: var(--glifo-alto);
    overflow: hidden;
}

.yv-marca__glifo .custom-logo {
    width: calc(392 * var(--glifo-alto) / 69);
    max-width: none;
    height: auto;
    margin: calc(-4 * var(--glifo-alto) / 69) 0 0 calc(-159 * var(--glifo-alto) / 69);
}

.yv-marca__nombre {
    color: var(--text-1);
    font-family: var(--font-display);
    /* F1 aplicaba la tipografía D2 al viejo .yv-logo, que era el nombre del sitio en
       VERSALITAS: de ahí su 1.15rem y su tracking de .14em. Su sucesor es este, y ya no
       va en mayúsculas, así que entra el font-stretch de display —que es la regla de
       piel D2— y se conservan el cuerpo y el tracking calibrados en D1: son los que
       fijan el ancho de la marca, y con él la frontera de 600px. Se remide después. */
    font-stretch: 122%;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
}

.yv-nav {
    margin-left: auto;
}

.yv-nav ul,
.yv-nav-pie ul {
    display: flex;
    align-items: center;
    gap: 1.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yv-nav a {
    display: block;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
    transition: color .2s ease, border-color .2s ease;
}

.yv-nav a:hover,
.yv-nav .current-menu-item > a,
.yv-nav .current_page_item > a {
    border-bottom-color: var(--ink);
    color: var(--text-1);
}

/* Buscador: <details> nativo. Cerrado se ve solo la lupa; abierto despliega el panel
   con el formulario de siempre (GET a la home, name="s"). El primitivo da el estado
   cerrado, la apertura por ratón y por teclado y el estado expuesto a los lectores de
   pantalla SIN JavaScript: con JS desactivado la búsqueda se abre y funciona igual.
   El JS opcional solo añade Escape, el foco al abrir y su devolución al cerrar. */
.yv-buscador {
    position: relative;
    flex: none;
}

.yv-buscador__disparador {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    background: transparent;
    cursor: pointer;
    list-style: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

/* El marcador por defecto del summary, en sus dos formas. */
.yv-buscador__disparador::-webkit-details-marker {
    display: none;
}

.yv-buscador__disparador::marker {
    content: "";
}

.yv-buscador__disparador:hover {
    border-color: var(--ink);
    background: var(--surface);
    transform: translateY(-1px);
}

.yv-buscador__icono {
    width: 13px;
    height: 13px;
    border: 2px solid var(--text-2);
    border-radius: 50%;
    box-shadow: 7px 7px 0 -5px var(--text-2);
    transform: translate(-1px, -1px);
}

.yv-buscador__panel {
    position: absolute;
    z-index: 1;
    top: calc(100% + .55rem);
    right: 0;
    padding: .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.yv-buscador__form {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.yv-buscador__label,
.yv-form-pie__label,
.yv-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.yv-buscador__input {
    width: min(16rem, 58vw);
    min-height: 42px;
    padding: .55rem 1rem;
    border: 1px solid var(--line-control);
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--text-1);
}

.yv-buscador__input::placeholder,
.yv-form-pie__input::placeholder {
    color: var(--text-3);
}

.yv-buscador__enviar {
    flex: none;
    min-height: 42px;
    padding: .55rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--surface-2);
    color: var(--text-1);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.yv-buscador__enviar:hover {
    border-color: var(--ink);
    background: var(--surface);
}

/* Puerta a la cuenta. Vive aquí y no en cuenta.css porque va en todas las páginas: encolar
   los 5 KB de cuenta.css sitewide añadiría un cuarto <link> al <head> por una sola regla. */
.yv-acceso-cuenta {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    font-size: .82rem;
}

/* Contenedor común y ritmo editorial. */
.yv-main {
    width: 100%;
    max-width: var(--wrap);
    min-height: 36vh;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) 24px clamp(4.5rem, 9vw, 7rem);
}

.yv-contenido {
    color: var(--text-2);
}

.yv-contenido h1,
.yv-articulo h1,
/* El H1 reubicado dentro del hero. Sin esta línea se queda con el estilo por
   defecto del navegador —medido: 51 px de caja en vez de 75— porque todos los
   selectores de H1 cuelgan de .yv-contenido, y ahí ya no está. */
.yv-hero__encima h1,
.yv-h1,
.yv-404__titulo,
.yv-busqueda__titulo {
    max-width: 24ch;
    margin: 0 0 1.25rem;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-stretch: 122%;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.02;
    text-wrap: balance;
}

.yv-contenido h2,
.yv-articulo h2,
.yv-h2 {
    margin: clamp(3.25rem, 7vw, 5.5rem) 0 1.125rem;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    font-stretch: 122%;
    font-weight: 600;
    letter-spacing: -.009em;
    line-height: 1.12;
    text-wrap: balance;
}

.yv-contenido h3,
.yv-articulo h3,
.yv-h1-secundario {
    color: var(--text-1);
    font-family: var(--font-display);
    font-stretch: 122%;
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}

.yv-contenido p,
.yv-articulo p,
.yv-404__texto {
    max-width: 65ch;
    margin: 0 0 1rem;
    color: var(--text-2);
    text-wrap: pretty;
}

.yv-contenido strong,
.yv-articulo strong {
    color: var(--text-1);
    font-weight: 650;
}

.yv-contenido a:not(:has(> h2)),
.yv-articulo a,
.yv-404 a,
.yv-busqueda a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--ink-soft);
    text-underline-offset: .2em;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.yv-contenido a:not(:has(> h2)):hover,
.yv-articulo a:hover,
.yv-404 a:hover,
.yv-busqueda a:hover {
    color: var(--text-1);
    text-decoration-color: var(--ink);
}

.yv-contenido > img,
.yv-articulo img {
    border-radius: var(--radius);
}

.yv-articulo ul,
.yv-articulo ol {
    max-width: 65ch;
    margin: 1rem 0 1.5rem;
    padding-left: 1.35rem;
    color: var(--text-2);
}

.yv-articulo li + li {
    margin-top: .45rem;
}

.yv-articulo blockquote {
    max-width: 65ch;
    margin: 1.5rem 0;
    padding: .75rem 1.25rem;
    border-left: 3px solid var(--pink);
    background: var(--surface);
    color: var(--text-2);
}

.yv-articulo hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.yv-articulo table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    color: var(--text-2);
}

.yv-articulo th,
.yv-articulo td {
    padding: .75rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.yv-articulo th {
    background: var(--surface);
    color: var(--text-1);
    font-family: var(--font-display);
    font-stretch: 122%;
}

/* Home: hero ambiental y rejilla sobre el contenido plano, sin mover su semántica. */
.yv-home {
    position: relative;
    padding-top: 0;
}

.yv-home::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: 100vw;
    height: clamp(30rem, 66vh, 39rem);
    /* D2 · F3: el velo pasa a neutro. Los dos radiales de marca —violeta #B44CE0 y
       teal #35C2B9— eran rgba literales, así que sobrevivieron a la migración de
       tokens de F1. Salen, y no se sustituyen por otro degradado de marca: lo que
       queda es un degradado de LUMINOSIDAD, cuya función es legibilidad, no
       decoración. El scrim también llevaba el fondo viejo rgba(12,12,17) = #0C0C11;
       ahora usa el nuevo #110E11. */
    background:
        linear-gradient(180deg, rgba(17, 14, 17, .08) 0%, rgba(17, 14, 17, .55) 62%, var(--bg) 100%),
        radial-gradient(circle at 25% 14%, rgba(237, 231, 225, .05), transparent 48%),
        var(--surface-2);
    transform: translateX(-50%);
}

.yv-home .yv-contenido {
    position: relative;
    padding-top: clamp(7rem, 15vh, 10rem);
}

/* Logo de la home. Vive en el post_content, dentro del primer <p>, así que el selector
   tiene que bajar hasta él: la regla anterior pedía un hijo DIRECTO de .yv-contenido y
   por eso nunca llegó a aplicarse —queda retirada—. Sin ninguna regla, la imagen se
   estiraba hasta el ancho disponible: 364 px en un móvil de 412, que se comía el primer
   viewport y empujaba el H1 hasta los 575 px. */
.yv-home .yv-contenido > p:first-child > img {
    width: 160px;
    height: auto;
    margin-inline: auto;
}

@media (min-width: 601px) {
    .yv-home .yv-contenido > p:first-child > img {
        width: 300px;
    }
}

.yv-home .yv-contenido > h1 {
    max-width: 16ch;
    font-size: clamp(3rem, 7vw, 5.25rem);
}

.yv-home .yv-contenido > h1 + p {
    max-width: 61ch;
    font-size: clamp(1rem, 1.7vw, 1.1rem);
}

.yv-home .yv-contenido > h2:first-of-type {
    margin-top: clamp(8rem, 18vw, 13rem);
}

/*
 * Cards de vídeo de Home y perfil. yv-core agrupa únicamente las 418 CTA CURRENT
 * cuyo attachment está en el registro auditado; no se infieren hijos ni thumbnails.
 */
.yv-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 22px;
    width: 100%;
    margin: 1.5rem 0 0;
}

.yv-video-card {
    min-width: 0;
    margin: 0;
}

.yv-video-card > a {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.yv-video-card > a::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 35% 0 0;
    background: linear-gradient(180deg, transparent, rgba(12, 12, 17, .88));
    pointer-events: none;
}

.yv-card-media {
    position: absolute;
    inset: 0;
}

.yv-card-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.yv-video-card--missing-media > a::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    aspect-ratio: 1;
    background: var(--grad-brand);
    clip-path: polygon(50% 5%, 92% 88%, 8% 88%);
    opacity: .35;
    transform: translate(-50%, -50%);
}

.yv-video-card > a:hover,
.yv-video-card > a:focus-visible {
    border-color: var(--ink-soft);
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

.yv-video-card > a:hover .yv-card-media__image,
.yv-video-card > a:focus-visible .yv-card-media__image {
    filter: saturate(1.06) contrast(1.03);
    transform: scale(1.025);
}

.yv-video-card h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--text-1);
    font-size: 1.025rem;
    letter-spacing: -.003em;
    line-height: 1.25;
}

.yv-home .yv-contenido > a:not(:has(> h2)) {
    justify-self: start;
    margin-top: .5rem;
    padding: .75rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--text-1);
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.yv-home .yv-contenido > a:not(:has(> h2)):hover {
    border-color: var(--ink);
    background: var(--surface);
    transform: translateY(-2px);
}

/* Acordeones editoriales ya presentes en el HTML nativo. */
.yv-contenido details {
    max-width: 48rem;
    margin: .625rem 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .2s ease, background .2s ease;
}

.yv-contenido details:hover,
.yv-contenido details[open] {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.yv-contenido summary {
    position: relative;
    padding: 1rem 1.25rem 1rem 2.1rem;
    color: var(--text-1);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.yv-contenido summary::-webkit-details-marker {
    display: none;
}

.yv-contenido summary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.05rem;
    width: .5rem;
    height: .6rem;
    background: var(--pink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateY(-50%);
    transition: transform .2s ease;
}

.yv-contenido details[open] summary::before {
    transform: translateY(-50%) rotate(90deg);
}

.yv-contenido details p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--text-2) !important;
    font-size: .9375rem !important;
}

.yv-faq-group {
    margin-top: clamp(3rem, 7vw, 5rem);
}

.yv-faq-group > :first-child {
    margin-top: 0;
}

/* Perfil: misma gramática de cards, con columna de lectura contenida. */
.yv-modelo .yv-contenido {
    display: block;
}

.yv-modelo .yv-contenido > h1,
.yv-directorio .yv-contenido > h1 {
    position: relative;
    padding-top: clamp(3rem, 8vw, 6rem);
}

.yv-modelo .yv-contenido > h1::before,
.yv-directorio .yv-contenido > h1::before,
.yv-video > .yv-h1::before,
.yv-busqueda__titulo::before,
.yv-404__titulo::before {
    content: "";
    display: block;
    width: 2.375rem;
    height: 1px;
    margin-bottom: .9rem;
    border-radius: 0;
    background: var(--accent);
}

.yv-modelo .yv-contenido > p {
    max-width: 62ch;
}

/* Directorio: cabecera sobria y muro de cards sobre una sola banda. */
.yv-directorio {
    width: 100%;
}

.yv-directorio__art > .yv-contenido {
    max-width: 68rem;
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--text-2);
    font-size: 1rem;
}

.yv-directorio__art > .yv-contenido > h1 {
    margin-bottom: 1.5rem;
}

.yv-directorio__art > .yv-contenido > h2 {
    margin-top: 3rem;
}

/* Listado curado: card de modelo definitiva, sin envolver el H3 en el enlace. */
.yv-listado {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 20px;
    margin: clamp(3rem, 7vw, 5rem) 0 0;
    padding: 0;
    list-style: none;
}

.yv-directorio .yv-listado {
    position: relative;
    margin-top: 0;
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.yv-directorio .yv-listado::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: -4rem;
    left: 50%;
    width: 100vw;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-band);
    transform: translateX(-50%);
}

.yv-listado__item {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.yv-listado__item:hover,
.yv-listado__item:has(.yv-listado__enlace:focus-visible) {
    border-color: var(--ink-soft);
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

.yv-listado__enlace {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    /* D2 · F3B: mismo cambio de color con el alfa intacto. El .18 es lo que hace de
       esto un tinte bajo la miniatura y no un bloque de acento. */
    background:
        linear-gradient(145deg, rgba(232, 84, 126, .18), transparent 58%),
        linear-gradient(35deg, var(--surface), var(--surface-2));
}

.yv-listado__enlace::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 32%;
    background: linear-gradient(180deg, transparent, rgba(12, 12, 17, .55));
    pointer-events: none;
}

.yv-listado__enlace img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.yv-listado__item:hover .yv-listado__enlace img {
    filter: saturate(1.06) contrast(1.03);
    transform: scale(1.025);
}

.yv-listado__titulo {
    margin: 0;
    padding: .8rem 1rem .95rem;
    color: var(--text-1);
    font-family: var(--font-display);
    font-stretch: 122%;
    font-size: 1.025rem;
    font-weight: 600;
    letter-spacing: -.003em;
    line-height: 1.25;
    text-wrap: balance;
}

/* Producto/vídeo: trailer ancho, lectura + buy box ámbar en dos columnas. */
.yv-video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 0 56px;
    align-items: start;
}

.yv-video > .yv-h1,
.yv-video > .yv-trailer,
.yv-video > .yv-h1-secundario-seccion {
    grid-column: 1 / -1;
}

.yv-video > .yv-h1 {
    grid-row: 1;
    margin-top: clamp(2rem, 6vw, 4.5rem);
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.yv-trailer {
    grid-row: 2;
    margin: .75rem 0 clamp(2.75rem, 6vw, 4.5rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* D2 · F3B: segunda banda ambiental del lenguaje viejo, hermana de la de la home
       —violeta #B44CE0 y teal #35C2B9 como rgba literales, supervivientes de F1—. Se
       le da el mismo tratamiento que a .yv-home::before y no otro: los radiales de
       marca salen y queda un solo radial de LUMINOSIDAD, en la posición del
       dominante, sobre --surface-2. Sin el scrim vertical, que allí sostiene la
       legibilidad del texto encima y aquí no hace falta: sobre esta caja no hay
       texto, solo las bandas del player en contain. Geometría, borde, radio, sombra,
       proporción y <video> sin tocar. */
    background:
        radial-gradient(circle at 28% 18%, rgba(237, 231, 225, .05), transparent 48%),
        var(--surface-2);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}

.yv-trailer__video {
    width: 100%;
    max-height: 72vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: transparent;
}

.yv-video > .yv-contenido {
    grid-column: 1;
    grid-row: 3;
    max-width: 62ch;
    font-size: 1rem;
}

.yv-video > .yv-contenido p:first-child {
    color: var(--text-1);
    font-family: var(--font-display);
    font-stretch: 122%;
    font-size: clamp(1.125rem, 2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.45;
}

.yv-video > .yv-h2 {
    grid-column: 1;
    margin: 2.5rem 0 1rem;
}

/* Las fichas congeladas sin H1 conservan su H2, presentado como título principal. */
.yv-video:not(:has(> .yv-h1)) > .yv-h2:first-of-type {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 24ch;
    margin: clamp(2rem, 6vw, 4.5rem) 0 1.25rem;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 1.02;
}

.yv-video:not(:has(> .yv-h1)) > .yv-h2:first-of-type::before {
    content: "";
    display: block;
    width: 2.375rem;
    height: 1px;
    margin-bottom: .9rem;
    border-radius: 0;
    background: var(--accent);
}

.yv-compra {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 92px;
    margin: 0;
    padding: 26px 24px 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .28);
}

.yv-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem .75rem;
    margin: 0 0 1.25rem;
    font-variant-numeric: tabular-nums;
}

.yv-precio__actual {
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 2.65rem);
    font-stretch: 122%;
    font-weight: 700;
    letter-spacing: -.009em;
    line-height: 1;
}

.yv-precio__anterior {
    color: var(--text-3);
    font-size: .875rem;
    text-decoration: line-through;
}

.yv-precio__ahorro {
    padding: .25rem .5rem;
    /* D2 · F2: tratamiento neutro. El ámbar queda reservado al acto de comprar, y
       repartirlo entre botón y chip lo diluía justo cuando pasa a ser el único
       color cálido de la página. Contenido, porcentaje y posición sin tocar. */
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.yv-compra__boton,
.yv-form-pie__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--pill);
    cursor: pointer;
    font-weight: 750;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.yv-compra__boton {
    width: 100%;
    min-height: 52px;
    padding: .9rem 1.5rem;
    background: var(--amber);
    color: var(--on-accent);
    font-size: 1rem;
}

.yv-compra__boton:not(:disabled):hover,
.yv-form-pie__boton:hover {
    /* D2 · F2: retirado el resplandor ámbar bajo el botón. Llevaba además el valor
       viejo rgba(255,176,32). El hover se resuelve con brillo y desplazamiento, sin
       introducir ningún color nuevo. */
    filter: brightness(1.06);
    transform: translateY(-2px);
}

.yv-compra__boton:not(:disabled):active,
.yv-form-pie__boton:active,
.yv-nav-boton:active {
    transform: translateY(1px) scale(.99);
}

.yv-compra__boton--desactivado,
.yv-compra__boton--desactivado:hover,
.yv-compra__boton--desactivado:active {
    cursor: not-allowed;
    opacity: .72;
    box-shadow: none;
    filter: saturate(.45);
    transform: none;
}

.yv-referencia {
    margin: 1rem 0 .5rem;
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: .08em;
}

.yv-referencia small {
    font-size: inherit;
}

.yv-nav-boton {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: .65rem .45rem 0 0;
    padding: .55rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--text-2);
    font-size: .875rem;
    font-weight: 650;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.yv-nav-boton:hover {
    border-color: var(--ink);
    background: var(--surface-2);
    color: var(--text-1);
}

.yv-nav-boton--desactivado,
.yv-nav-boton--desactivado:hover,
.yv-nav-boton--desactivado:active {
    cursor: not-allowed;
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text-3);
    opacity: .72;
    transform: none;
}

.yv-h1-secundario-seccion {
    margin-top: clamp(3rem, 7vw, 5rem);
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-band);
}

.yv-h1-secundario {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Pie: newsletter elevada seguida del cromado oscuro común. */
.yv-pie {
    display: grid;
    grid-template-columns: minmax(15rem, 1.1fr) minmax(14rem, 1fr);
    gap: 1rem 4rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 max(24px, calc((100vw - var(--wrap)) / 2)) 3.5rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.yv-pie__suscripcion {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(16rem, .9fr) minmax(22rem, 1.1fr);
    gap: 2rem 4rem;
    align-items: center;
    margin: 0 calc(-1 * max(24px, calc((100vw - var(--wrap)) / 2))) 2.5rem;
    padding: 2.75rem max(24px, calc((100vw - var(--wrap)) / 2));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.yv-pie__suscripcion > p {
    margin: 0;
    color: var(--text-2);
    font-size: .9rem;
}

.yv-pie__suscripcion strong {
    color: var(--text-1);
    font-family: var(--font-display);
    font-stretch: 122%;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.25;
}

.yv-form-pie__form {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.yv-form-pie__input {
    width: 100%;
    min-height: 46px;
    padding: .75rem 1rem;
    border: 1px solid var(--line-control);
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--text-1);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.yv-form-pie__input:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(232, 84, 126, .12);
}

.yv-form-pie__boton {
    flex: none;
    min-height: 46px;
    padding: .75rem 1.4rem;
    /* Secundario: deja de competir con la única superficie que cobra. Mismo texto,
       mismo destino, mismo ancho y misma posición; solo cambia el tratamiento. */
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-1);
}

.yv-form-pie__ok,
.yv-form-pie__error {
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: .9rem;
}

.yv-form-pie__ok {
    border-color: rgba(53, 194, 185, .42);
    color: var(--state-ok);
}

.yv-form-pie__error {
    border-color: rgba(232, 97, 92, .45);
    color: var(--state-error);
}

.yv-pie__dmca,
.yv-pie__legal {
    grid-column: 1;
    margin: 0;
}

.yv-pie__marca {
    grid-column: 1;
}

.yv-pie__dmca img {
    opacity: .78;
    transition: opacity .2s ease;
}

.yv-pie__dmca a:hover img {
    opacity: 1;
}

.yv-pie__legal p {
    max-width: 34ch;
    margin: 0;
    color: var(--text-3);
    font-size: .8125rem;
}

.yv-nav-pie {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
}

.yv-nav-pie ul {
    align-items: flex-start;
    flex-direction: column;
    gap: .65rem;
}

.yv-nav-pie a {
    color: var(--text-2);
    font-size: .875rem;
    transition: color .2s ease;
}

.yv-nav-pie a:hover {
    color: var(--ink);
}

/* Estados utilitarios del tema, dentro del mismo sistema visual. */
.yv-404,
.yv-busqueda,
.yv-articulo {
    max-width: 56rem;
}

.yv-404__texto,
.yv-busqueda__vacio {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.yv-busqueda__lista {
    display: grid;
    gap: .75rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.yv-busqueda__item a {
    display: block;
    padding: 1rem 1.125rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-1);
    font-weight: 650;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.yv-busqueda__item a:hover {
    border-color: var(--ink-soft);
    background: var(--surface-2);
    transform: translateX(3px);
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.navigation.pagination .page-numbers {
    display: grid;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: .4rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-2);
}

.navigation.pagination .current,
.navigation.pagination a:hover {
    border-color: var(--ink);
    color: var(--text-1);
}

@media (max-width: 960px) {
    .yv-video {
        grid-template-columns: minmax(0, 1fr) 20rem;
        column-gap: 2rem;
    }
}

@media (max-width: 800px) {
    .yv-video {
        display: block;
    }

    .yv-video:not(:has(> .yv-h1)) {
        display: flex;
        flex-direction: column;
    }

    .yv-video:not(:has(> .yv-h1)) > .yv-h2:first-of-type {
        order: -1;
    }

    .yv-video > .yv-contenido {
        max-width: 65ch;
    }

    .yv-compra {
        position: static;
        margin: 2.5rem 0 0;
    }

    .yv-pie__suscripcion {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .yv-main {
        padding-inline: 24px;
    }

    .yv-home .yv-contenido > h1 {
        font-size: clamp(2.75rem, 14vw, 4rem);
    }

    .yv-listado {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .yv-listado__titulo {
        padding: .7rem .75rem .8rem;
        font-size: .9rem;
    }

    .yv-pie {
        grid-template-columns: 1fr;
        padding-inline: 18px;
    }

    .yv-pie__suscripcion {
        grid-column: 1;
        margin-inline: -18px;
        padding-inline: 18px;
    }

    .yv-pie__dmca,
    .yv-pie__legal,
    .yv-nav-pie {
        grid-column: 1;
        grid-row: auto;
    }

    .yv-form-pie__form {
        align-items: stretch;
        flex-direction: column;
    }

    .yv-form-pie__boton {
        width: 100%;
    }
}

/* Frontera de la cabecera. Era 800px y sobraba sitio: con el buscador recogido en la
   lupa, los cuatro elementos piden 534px en el peor estado —el de sesión iniciada, que
   escribe «Mi cuenta» en vez de «Entrar»—, así que por encima de 600px caben en una fila
   con 67px de margen. Va en su propio bloque y no en el de 800px, que gobierna .yv-video
   y otras piezas ajenas a esta entrega. */
@media (max-width: 600px) {
    .yv-cabecera {
        flex-wrap: wrap;
        gap: .5rem 1.25rem;
        padding-block: .75rem;
    }

    .yv-marca {
        --glifo-alto: 24px;
    }

    .yv-marca__nombre {
        font-size: .95rem;
    }

    .yv-acceso-cuenta {
        order: 2;
    }

    .yv-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .yv-nav ul {
        width: max-content;
        min-width: 100%;
    }

    /* El buscador ya no reclama una fila entera: cerrado es solo la lupa, y el panel
       se despliega por encima del contenido en vez de empujar la cabecera. */
    .yv-buscador {
        /* Mismo orden que en escritorio —marca, buscador, cuenta—, con el menú debajo.
           Sin esto la lupa saltaba detrás del botón de la cuenta. */
        order: 1;
        margin-left: auto;
        /* Sin contenedor propio, el panel se posiciona respecto a la cabecera —que es
           sticky, y por tanto ya es contenedor de bloque—. Anclado a la lupa se salía
           por la izquierda: a 320px pedía 298px empezando a 209px del borde. */
        position: static;
    }

    .yv-buscador__panel {
        top: calc(100% + .35rem);
        right: max(24px, calc((100vw - var(--wrap)) / 2));
        left: max(24px, calc((100vw - var(--wrap)) / 2));
    }

    .yv-buscador__input {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 440px) {
    .yv-listado__titulo {
        font-size: .825rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   PROTOTIPO — cabecera de vídeo (yv-hero). Medido, no desplegado.

   Reconstruido contra las capturas del original, que invalidaron la geometría
   anterior (caja centrada de 300 px dentro del wrap, con radio). Lo que las
   capturas acreditan: banda a ancho completo, de borde a borde, sin caja ni
   radio, y ~470 px de alto en escritorio — que es padding + contenido, no una
   altura fija: 200+200 con el H1 en PERFIL, 160+160 con el logo en HOME.

   El H1 que va encima NO lo crea este componente. Sale del post_content, como
   siempre, y la plantilla solo lo reubica: mismo nodo, mismo texto, mismo
   marcado. Un H1 propio serían 160 H1 nuevos y duplicados.

   Velo sólido negro al 50 % (decisión de Francisco). Verificado: sobre blanco
   puro —el peor fondo concebible, no el peor de la muestra— da 3,24:1 contra
   --text-1, así que el H1 cumple los 3:1 de texto grande sobre CUALQUIER
   imagen. El mínimo absoluto para 3:1 es alfa 0,478; el margen es de 0,022.
   Para 4,5:1 haría falta 0,59, y por eso encima del velo solo va el H1.
   ========================================================================== */
.yv-hero {
    position: relative;
    /* A sangre desde dentro del wrap. .yv-body ya lleva overflow-x: hidden,
       que es lo que hace segura la barra de scroll en 100vw. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: grid;
    place-items: center;
    padding: var(--hero-aire) 24px;
    overflow: hidden;
    background: var(--surface);
}

/* PERFIL: 200+200 en escritorio alrededor del H1. */
.yv-hero { --hero-aire: clamp(96px, 15.63vw, 200px); }
/* HOME. El aire de escritorio baja de 160 a 85 porque el logo es cuadrado: con
   300 px de logo, 160+300+160 mandaba la banda a 620 px. 85+300+85 la devuelve a
   ~470, que es el rango compacto del prototipo. En móvil no cambia nada: el clamp
   sigue tocando su mínimo de 76 y la banda se queda en 312. */
.yv-home .yv-hero { --hero-aire: clamp(76px, 12.5vw, 85px); }

.yv-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yv-hero__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 0,65 por decisión de Francisco. Contra blanco puro —el peor fondo posible—
       --text-1 pasa de 3,24:1 a 5,69:1, y con eso cumple también los 4,5:1 de
       texto normal, no solo los 3:1 del H1. Deja pasar el 35 % de cada canal: un
       tono medio del vídeo se ve a 45 sobre 255, así que el fondo se sigue
       leyendo como imagen en movimiento. */
    background: rgba(0, 0, 0, .65);
    pointer-events: none;
}

.yv-hero__encima {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap);
    text-align: center;
}

/* El H1 reubicado. Dentro del hero se centra y se le da algo más de caja que
   los 24ch del cuerpo: centrado y con menos ancho se partía en más líneas de
   las que el original mostraba. */
.yv-hero__encima h1 {
    max-width: 20ch;
    margin: 0 auto;
}

/* El logo de la home, reubicado desde el post_content. Las medidas son las que fija
   Francisco y las mismas de 0.3.8: 160 px en móvil, 300 px en escritorio. El fichero
   es CUADRADO (500x500), así que 300 px de ancho son 300 px de alto y la banda sube
   a 620 px en escritorio en vez de los ~470 de la ficha. Es consecuencia de la medida
   del logo, no de la geometría del hero: con el mismo logo, dejar la banda en 470
   pediría bajar el aire de 160 a 85. Queda dicho, no decidido. */
.yv-hero__encima p { margin: 0; }

.yv-hero__encima img {
    display: block;
    width: 160px;
    height: auto;
    margin-inline: auto;
}

@media (min-width: 601px) {
    .yv-hero__encima img { width: 300px; }
}

/* El hero arranca pegado a la cabecera: «sin márgenes» incluye el de arriba.
   El padding-top de .yv-main es la separación para cuando NO hay hero. */
.yv-main--hero { padding-top: 0; }

/* Y en la home, el padding-top de .yv-contenido era la separación respecto a
   la cabecera. Con el hero delante deja de separar y pasa a ser hueco: medido,
   154 px de aire muerto entre el vídeo y lo que sigue. */
.yv-home .yv-hero + .yv-contenido { padding-top: 0; }

/* CUESTIÓN ABIERTA — prefers-reduced-motion. Aquí NO hay regla porque CSS no
   puede retirar `autoplay`: cualquier cosa escrita en este bloque daría la
   impresión de resolverlo sin resolverlo. Respetarla exige JS o no emitir el
   atributo desde PHP. Sigue siendo decisión de Francisco. */