/* estilo.css — estilos de la web. Las variables de :root son la fuente de
   verdad del sistema visual; debajo, el primer diseño aplicado.
   Dirección: oscura y cinematográfica, noble y clásica sin perder lo moderno.
   El negro cálido es el marco; imágenes y vídeos son los protagonistas.
   Mobile-first: el diseño base es para móvil; las mejoras van en @media. */

:root {
    /* --- Paleta: negro cálido + blanco roto + grises cálidos + dorado viejo --- */
    --color-fondo:            #0d0c0a; /* fondo general */
    --color-superficie:       #1a1816; /* superficie elevada: cajas, thumbnails */
    --color-texto:            #efe9dd; /* texto principal / énfasis (blanco roto) */
    --color-texto-secundario: #b0aaa0; /* texto secundario (gris claro) */
    --color-texto-terciario:  #837e74; /* texto terciario (gris medio) */
    --color-linea:            #57534b; /* detalles y líneas finas (gris tenue) */
    --color-acento:           #c2a14a; /* dorado viejo: SOLO acento, nunca superficie */

    /* --- Tipografía ---
       Dirección editorial noble y decimonónica: un serif de alto contraste para
       nombre, monograma y títulos; un serif de texto, cálido y literario, para
       interfaz y cuerpo. Renunciamos al sans para ganar carácter.
       Cormorant Garamond y Spectral se cargan desde Google Fonts en la cabecera. */
    --fuente-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --fuente-texto:   "Spectral", Georgia, "Times New Roman", serif;

    /* --- Escala de espaciado (base 8px, fluida sobre rem) --- */
    --espacio-xs:  0.25rem; /*  4px */
    --espacio-sm:  0.5rem;  /*  8px */
    --espacio-md:  1rem;    /* 16px */
    --espacio-lg:  1.5rem;  /* 24px */
    --espacio-xl:  2.5rem;  /* 40px */
    --espacio-xxl: 4rem;    /* 64px */

    /* --- Radio de esquinas --- */
    --radio-sm: 2px;  /* líneas y detalles */
    --radio-md: 6px;  /* cajas y thumbnails */
}

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

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto-secundario);
    font-family: var(--fuente-texto);
    font-weight: 400;
    font-size: 1.125rem; /* 18px: el serif de texto pide algo más de cuerpo */
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

p { margin: 0 0 var(--espacio-md); }

h1 {
    font-family: var(--fuente-titulos);
    font-weight: 500;
    color: var(--color-texto);
    font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: 0.005em;
    margin: 0 0 var(--espacio-lg);
}

/* Contenedor central, compartido por cabecera, contenido y pie. */
.contenedor {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--espacio-lg);
}

/* Variante más ancha solo para la portada: deja sitio a dos miniaturas de 800px
   (su tamaño real) por fila. El resto del sitio sigue a 1100px por legibilidad. */
.contenedor-ancho {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: var(--espacio-lg);
}

/* === Cabecera y navegación === */
.cabecera .contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-md);
    padding-block: var(--espacio-md);
    /* La cabecera usa todo el ancho (a diferencia del contenido, limitado a
       1100px por legibilidad): así el nombre se va al extremo izquierdo y los
       enlaces al derecho, en vez de quedar encajonados y juntos en el centro. */
    max-width: none;
    /* Separador moderno: hairline contenida al ancho del texto que se desvanece
       en los extremos, en vez de una barra de borde a borde. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--color-linea), transparent) 1;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-sm);
    text-decoration: none;
}

.marca .nombre {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-texto);
    /* Versalitas: aire de cartela decimonónica para el nombre como firma. */
    font-variant: small-caps;
    letter-spacing: 0.12em;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

/* Cada sección en versalitas serif, con un filete dorado que se dibuja desde la
   izquierda al pasar el ratón. La sección activa lo lleva fijo. */
.menu a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    padding-bottom: 5px;
    transition: color 0.2s ease;
}
.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.menu a:hover,
.menu a:focus {
    color: var(--color-texto);
}
.menu a:hover::after,
.menu a:focus::after,
.menu a.activo::after {
    transform: scaleX(1);
}
.menu a.activo {
    color: var(--color-texto);
}

@media (min-width: 720px) {
    .cabecera .contenedor {
        flex-direction: row;
        justify-content: space-between;
        /* Algo más de aire respecto al borde de la pantalla en escritorio. */
        padding-inline: var(--espacio-xl);
    }
}

/* === Contenido === */
.contenido {
    padding-block: var(--espacio-xl);
    min-height: 60vh;
}

/* === Pie === */
.pie {
    color: var(--color-texto-terciario);
}

.pie .contenedor {
    padding-block: var(--espacio-xl);
    text-align: center;
    /* Misma hairline desvanecida que la cabecera, ahora arriba del pie. */
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--color-linea), transparent) 1;
}

/* Firma del pie en tres líneas: cruz (dorada) · nombre · año en romano. */
.pie-firma { margin: 0; line-height: 1.3; }
.pie-cruz {
    display: block;
    color: var(--color-acento);
    font-size: 1.35rem;
    line-height: 1;
    margin-bottom: var(--espacio-sm);
}
.pie-nombre {
    display: block;
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.18em;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    text-decoration: none; /* es un enlace mailto */
    transition: color 0.15s ease;
}
/* Al pasar el ratón, se enciende en dorado y subraya (delata que es el contacto). */
.pie-nombre:hover,
.pie-nombre:focus {
    color: var(--color-acento);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.pie-anyo {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--color-texto-terciario);
}

/* === Parrilla de cortos === */
.parrilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Móvil: una miniatura por fila. En escritorio pasan a dos (ver @media).
       Columnas explícitas en vez de auto-fit: así siempre son 2 y no dependen
       de un umbral de ancho (con auto-fit, según la ventana, caía a 1). */
    grid-template-columns: 1fr;
    /* Más aire vertical (entre el título de una fila y la miniatura de la
       siguiente) que horizontal. */
    column-gap: var(--espacio-lg);
    row-gap: var(--espacio-xl);
}

/* Escritorio: dos miniaturas por fila, topadas a su tamaño real (800px) para no
   estirarlas; en ventanas estrechas se reducen para caber. El grid se centra. */
@media (min-width: 720px) {
    .parrilla {
        grid-template-columns: repeat(2, minmax(0, 800px));
        justify-content: center;
    }
}

.corto-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Marco de la miniatura: recorta el zoom y aloja el aro dorado del hover. */
.corto-marco {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow 0.3s ease;
}

.corto-miniatura {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* la imagen 800×450 llena el hueco sin deformarse */
    /* En reposo, la imagen va algo apagada y a tamaño natural; al pasar el ratón
       se enciende y hace un ligero zoom dentro del marco. */
    filter: brightness(0.92) saturate(0.95);
    transition: filter 0.3s ease, transform 0.8s ease;
}

/* Hover: zoom suave de la imagen y un aro dorado tenue alrededor del marco. */
.corto-enlace:hover .corto-marco,
.corto-enlace:focus .corto-marco {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-acento) 55%, transparent);
}

.corto-enlace:hover .corto-miniatura,
.corto-enlace:focus .corto-miniatura {
    filter: brightness(1) saturate(1);
    transform: scale(1.025);
}

/* Título como cartela: filete dorado corto sobre versalitas serif centradas. */
.corto-titulo {
    display: block;
    position: relative;
    text-align: center;
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.18em;
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    margin-top: var(--espacio-md); /* separación filete ↔ miniatura */
    padding-top: var(--espacio-xs); /* filete ↔ texto: bien pegado */
    transition: color 0.15s ease;
}
.corto-titulo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 1px;
    background: var(--color-acento);
}

/* Al pasar el ratón por la miniatura, el título se enciende en blanco roto. */
.corto-enlace:hover .corto-titulo,
.corto-enlace:focus .corto-titulo {
    color: var(--color-texto);
}

/* === Página propia del corto ===
   El vídeo grande arriba, protagonista; debajo, una columna estrecha y editorial
   con la sinopsis justificada y, tras un ornamento dorado, la ficha de créditos. */

/* Vídeo: grande y centrado, más ancho que la columna de texto. */
.corto-reproductor {
    max-width: 900px;
    margin: 0 auto var(--espacio-xxl);
}
.corto-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radio-md);
}

/* Reproductor Plyr retematizado a la paleta: dorado viejo de acento sobre negro.
   Plyr lee estas variables del contenedor .plyr que envuelve al <video>. */
.plyr {
    --plyr-color-main: var(--color-acento);
    --plyr-font-family: var(--fuente-texto);
    --plyr-video-background: #000;
    --plyr-video-control-color: var(--color-texto-secundario);
    --plyr-video-control-color-hover: var(--color-fondo);
    --plyr-menu-background: var(--color-superficie);
    --plyr-menu-color: var(--color-texto-secundario);
    --plyr-control-radius: var(--radio-sm);
    --plyr-range-thumb-background: var(--color-acento);
    --plyr-range-fill-background: var(--color-acento);
}
.plyr--video { border-radius: var(--radio-md); }
/* Sin botón central de play: respeta el póster (es una foto). Se reproduce con
   la barra inferior o clic en el vídeo. !important porque Plyr lo fuerza con un
   selector más específico (.plyr--full-ui.plyr--video …) y carga después. */
.plyr__control--overlaid { display: none !important; }

/* Título del corto: pequeño y fino, entre el vídeo y el texto. Versalitas serif
   con tracking, flanqueadas por dos filetes dorados; tradicional, como una
   cartela. Es el <h1> de la página. (Clase propia: .corto-titulo es el de las
   miniaturas de la portada y lleva otro filete.) */
.corto-titular {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-md);
    margin: 0 0 var(--espacio-lg);
}
.corto-titular::before,
.corto-titular::after {
    content: "";
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1px;
    background: var(--color-acento);
    opacity: 0.6;
}
.corto-titular span {
    font-family: var(--fuente-titulos);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-texto);
    padding-left: 0.25em; /* compensa el tracking final, para centrar */
}

/* Texto: columna estrecha y centrada (editorial). Un respiro al final del todo. */
.corto-texto {
    max-width: 640px;
    margin: 0 auto var(--espacio-xl);
    text-align: center;
}

/* Sinopsis: prosa justificada, secundaria. Sin partir palabras (hyphens: manual):
   la columna es ancha (~70 caracteres) y el justificado queda parejo sin guiones. */
.corto-sinopsis {
    text-align: justify;
    hyphens: manual;
    -webkit-hyphens: manual;
    line-height: 1.75;
    color: var(--color-texto-secundario);
}
.corto-sinopsis p { margin: 0 0 1.1em; }
.corto-sinopsis p:last-child { margin-bottom: 0; }
/* La negrita se enciende al blanco roto de énfasis; cursiva y subrayado, sobrios. */
.corto-sinopsis strong { color: var(--color-texto); font-weight: 600; }
.corto-sinopsis em { font-style: italic; }
.corto-sinopsis u {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-linea);
    text-underline-offset: 0.15em;
}

/* Ornamento dorado que separa la sinopsis de los créditos. */
.corto-ornamento {
    display: block;
    color: var(--color-acento);
    letter-spacing: 0.1em;
    margin: var(--espacio-xl) 0 var(--espacio-lg);
    opacity: 0.85;
}

/* Créditos: versalitas, más pequeños y tenues, centrados como una cartela. */
.corto-creditos {
    font-variant: small-caps;
    letter-spacing: 0.04em;
    line-height: 1.95;
    font-size: 0.95rem;
    color: var(--color-texto-terciario);
}
.corto-creditos strong { color: var(--color-texto-secundario); font-weight: 600; }
.corto-creditos em { font-style: italic; }

/* === Biografía — "filete de galería" ===
   Retrato vertical sin marco (se funde con el fondo) a un lado y, separándolo del
   texto, un fino filete dorado vertical a toda altura. El texto abre con una
   inicial capitular alta (sobresale hacia arriba) y la primera línea en
   versalitas. Sin cortar palabras. */
.bio { max-width: 920px; margin-inline: auto; }

/* Retrato: dos fotos superpuestas. Al pasar el ratón, la vintage aparece con un
   fundido degradado rápido; al salir, vuelve de golpe a la original (la transición
   solo está definida en :hover, así la salida es instantánea). */
/* Acceso oculto a Apuntes: sin pista visual, tampoco la manita del ratón. */
.bio-foto-enlace {
    cursor: default;
}
.bio-foto {
    position: relative;
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
}
.bio-foto img {
    display: block;
    width: 100%;
    height: auto;
}
.bio-foto-vintage {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: none; /* salida del hover: vuelve de golpe */
}
.bio-foto:hover .bio-foto-vintage {
    opacity: 1;
    transition: opacity 0.25s ease; /* entrada al hover: fundido rápido */
}

/* Contacto, bajo el retrato: el email y, más pequeño, el enlace a la clave PGP. */
.bio-contacto {
    margin: var(--espacio-xl) 0 var(--espacio-lg);
    text-align: center;
}
.bio-email {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.bio-email a {
    color: var(--color-texto-terciario);
    text-decoration: none;
    border-bottom: 1px solid var(--color-linea);
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.bio-email a:hover,
.bio-email a:focus {
    color: var(--color-acento);
    border-bottom-color: var(--color-acento);
}
/* Clave PGP: iconito de llave, discreto; gris tenue que se enciende en dorado al
   pasar el ratón (la llave usa currentColor). */
.bio-pgp {
    margin: 0.6rem 0 0;
    line-height: 0;
}
.bio-pgp a {
    display: inline-flex;
    padding: 0.2rem;
    color: var(--color-texto-terciario);
    transition: color 0.15s ease;
}
.bio-pgp a:hover,
.bio-pgp a:focus { color: var(--color-acento); }
.bio-pgp svg { display: block; }

.bio-texto {
    text-align: justify;
    hyphens: manual; /* no partir palabras */
}
.bio-texto p:first-child { margin-top: 0; }

/* Capitular alta (raised cap): grande, en oro y serif; sin flotar, así sobresale
   hacia arriba en vez de hundirse y partir líneas hacia abajo. */
.bio-texto > p:first-child::first-letter {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 2.4em;
    line-height: 0.9;
    vertical-align: 0.12em; /* la sube un poco: su cola no roza la 2ª línea */
    color: var(--color-acento);
}
/* Texto destacado de apertura (nombre y año): versalitas, en blanco de énfasis. */
.bio-destacado {
    font-variant: small-caps;
    letter-spacing: 0.03em;
    color: var(--color-texto);
}

@media (min-width: 760px) {
    .bio {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--espacio-xl);
        align-items: stretch;
    }
    .bio-aside { align-self: start; }
    .bio-contacto { margin: var(--espacio-xl) 0 0; }
    /* El filete dorado: línea fina vertical entre la foto y el texto, a toda altura. */
    .bio-cuerpo {
        padding-left: var(--espacio-xl);
        border-left: 1px solid rgba(194, 161, 74, 0.5);
    }
}

/* Enlaces del texto: mismo color que el cuerpo, subrayado tenue; el dorado
   viejo aparece solo al pasar el ratón o con el foco. */
.bio-texto a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--color-linea);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.bio-texto a:hover,
.bio-texto a:focus {
    color: var(--color-acento);
    text-decoration-color: var(--color-acento);
}

/* Enlace especial: aparece una sola vez. Como los demás, pero con subrayado
   de línea continua en dorado viejo, ya en reposo. */
.bio-texto a.bio-enlace-especial {
    text-decoration-style: solid;
    text-decoration-color: var(--color-acento);
}


/* === Apuntes === */

/* Submenú: horizontal y centrado, justo bajo el filete de la cabecera. Se lee
   como un menú, pero de menor jerarquía que el principal: más pequeño y tenue,
   sin el filete dorado animado; el activo, en dorado. */
.apuntes-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    margin: calc(-1 * var(--espacio-md)) 0 var(--espacio-xl);
}
.apuntes-nav a {
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 1.02rem;
    color: var(--color-texto-terciario);
    text-decoration: none;
    transition: color 0.15s ease;
}
.apuntes-nav a:hover,
.apuntes-nav a:focus { color: var(--color-texto-secundario); }
.apuntes-nav a.activo { color: var(--color-acento); }

/* Lista de posts (Recientes y post suelto): columna medida y centrada. */
.apuntes-lista { max-width: 760px; margin-inline: auto; }
/* Posts seguidos (Recientes): un ornamento dorado los separa —el mismo de los
   cortos entre sinopsis y créditos— centrado y con el mismo aire arriba y abajo. */
.apunte + .apunte { margin-top: var(--espacio-xxl); }
.apunte + .apunte::before {
    content: "\B7\A0\B7\A0\2736\A0\B7\A0\B7"; /* · · ✶ · · */
    display: block;
    text-align: center;
    color: var(--color-acento);
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-bottom: var(--espacio-xxl);
}

/* Primera línea: título, fecha y categoría. Mismo tamaño que el cuerpo, pero
   diferenciados por tono y separados con aire para una lectura rápida. */
.apunte-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between; /* fecha+título a la izquierda, categoría a la derecha */
    gap: 0.35em 1.4em;
    margin-bottom: var(--espacio-md);
}
/* Título // fecha juntos, a la izquierda. */
.apunte-encabezado {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.9em;
}
/* Separador "//" entre el título y la fecha, discreto. */
.apunte-sep { color: var(--color-texto-terciario); }
/* El título: en Recientes es un enlace al post (permalink), pero luce idéntico
   al texto (sin subrayado ni cambio de color). */
.apunte-titulo {
    color: var(--color-texto);
    font-weight: 600;
    text-decoration: none;
}
.apunte-fecha {
    color: var(--color-texto-terciario);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
/* La categoría enlaza a su página; al pasar el ratón el dorado brilla un poco más. */
.apunte-categoria {
    color: var(--color-acento);
    font-variant: small-caps;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.apunte-categoria:hover,
.apunte-categoria:focus { filter: brightness(1.25); }

/* Cuerpo del apunte: secundario, justificado y sin partir palabras. */
.apunte-cuerpo {
    color: var(--color-texto-secundario);
    line-height: 1.75;
    text-align: justify;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.apunte-cuerpo a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-linea);
    text-underline-offset: 0.15em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.apunte-cuerpo a:hover,
.apunte-cuerpo a:focus { color: var(--color-acento); text-decoration-color: var(--color-acento); }
/* Cita: sin cursiva (costaba leerla). Se distingue por un filete dorado tenue
   (2px) a la izquierda y la sangría; discreto y legible. */
.apunte-cuerpo blockquote {
    margin: 0 0 1em;
    padding-left: var(--espacio-md);
    border-left: 2px solid rgba(194, 161, 74, 0.5);
}
.apunte-cuerpo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--espacio-md) 0;
    border-radius: var(--radio-md);
}

/* "Continuar lectura": discreto, dorado al pasar el ratón. */
.apuntes-mas { text-align: center; margin-top: var(--espacio-xl); }
.apuntes-mas-enlace {
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 1rem;
    color: var(--color-texto-terciario);
    text-decoration: none;
    border-bottom: 1px solid var(--color-linea);
    padding-bottom: 3px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.apuntes-mas-enlace:hover,
.apuntes-mas-enlace:focus { color: var(--color-acento); border-bottom-color: var(--color-acento); }

/* Índices (Entradas / Categorías): columna medida. */
.apuntes-indice { max-width: 760px; margin-inline: auto; }

/* Entradas: una fila por entrada; fecha + título a la izquierda, categoría a la
   derecha. */
.apuntes-entradas { list-style: none; margin: 0; padding: 0; }
.apuntes-entradas .entrada {
    display: flex;
    align-items: baseline;
    gap: 0.9em;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(87, 83, 75, 0.35);
    color: var(--color-texto-secundario);
    text-decoration: none;
    transition: color 0.15s ease;
}
.apuntes-entradas .entrada:hover,
.apuntes-entradas .entrada:focus { color: var(--color-texto); }
.entrada-fecha {
    flex: 0 0 auto;
    color: var(--color-texto-terciario);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.entrada-titulo { flex: 1 1 auto; min-width: 0; }
.entrada-categoria {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-acento);
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

/* Categorías: cada grupo con su título y la lista AAAA-MM-DD » Título. */
.cat-grupo { margin-bottom: var(--espacio-xl); }
/* Nombre de la categoría. En "Categorías" es un enlace a su página; subraya al
   pasar el ratón. En la página de la categoría es un <h2> sin enlace. */
.cat-titulo {
    display: inline-block;
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-size: 1.25rem;
    color: var(--color-acento);
    margin: 0 0 var(--espacio-xs);
    text-decoration: none;
    transition: filter 0.15s ease;
}
/* Al pasar el ratón, el dorado brilla un poco más (sin subrayado). */
a.cat-titulo:hover,
a.cat-titulo:focus { filter: brightness(1.25); }
.cat-posts { list-style: none; margin: 0; padding: 0; }
.cat-posts li { padding: 0.05rem 0; }
.cat-posts a {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    line-height: 1.45;
    color: var(--color-texto-secundario);
    text-decoration: none;
    transition: color 0.15s ease;
}
.cat-posts a:hover,
.cat-posts a:focus { color: var(--color-texto); }
.cat-fecha {
    flex: 0 0 auto;
    color: var(--color-texto-terciario);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.cat-sep { color: var(--color-linea); }

.apuntes-vacio { text-align: center; color: var(--color-texto-secundario); }
.apuntes-vacio a { color: var(--color-acento); }

/* === Premios — "tabla de honores" ===
   Opción sobria, solo texto. Un sello (cruz de Jerusalén dorada) abre la página.
   Los premios se agrupan por año: el año es una cifra-epígrafe en serif dorado a
   la izquierda y, a su lado, los galardones de ese año. La columna de años marca
   el ritmo vertical, como los honores grabados en una placa. */
.premios {
    max-width: 48rem;
    margin: 0 auto;
    padding-block: var(--espacio-md) var(--espacio-xxl);
}
.premios-sello {
    text-align: center;
    color: var(--color-acento);
    font-size: 1.5rem;
    line-height: 1;
    margin: 0 0 var(--espacio-xl);
}
/* Cada año: cifra-epígrafe (columna fija, alineada arriba y a la derecha) · lista
   de galardones. Un filete tenue separa un año del siguiente. */
.premios-grupo {
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: var(--espacio-xl);
    align-items: start;
    padding-block: var(--espacio-lg);
}
.premios-grupo + .premios-grupo {
    border-top: 1px solid var(--color-linea);
}
.premios-anio {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    line-height: 1;
    text-align: right;
    color: var(--color-acento);
    margin: 0;
    font-variant-numeric: lining-nums tabular-nums;
}
.premios-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Cada galardón en dos líneas: el premio (destacado) y, debajo, el certamen en
   versalitas tenues, como la cartela de créditos de los cortos. */
.premio {
    padding-block: var(--espacio-sm);
}
.premio-galardon {
    display: block;
    color: var(--color-texto-secundario);
    line-height: 1.4;
}
.premio-certamen {
    display: block;
    margin-top: 0.15rem;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    color: var(--color-texto-terciario);
}
/* Móvil: el año pasa encima de su bloque, alineado a la izquierda. */
@media (max-width: 34rem) {
    .premios-grupo {
        grid-template-columns: 1fr;
        row-gap: var(--espacio-sm);
    }
    .premios-anio { text-align: left; }
}

/* === Largometraje — anuncio "Próximamente" ===
   Pantalla de cine: un resplandor dorado muy tenue respira tras el título (la luz
   de un proyector calentando), el título de la obra entra grande y los datos
   abajo. Todo aparece escalonado al cargar. Sobrio, pero con tensión. */
.largo {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-block: var(--espacio-xxl);
}
/* Resplandor central que respira. Plano, dorado muy diluido: nunca una superficie,
   solo una insinuación de luz. */
.largo-glow {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(90vw, 720px);
    height: min(90vw, 720px);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(194, 161, 74, 0.12) 0%,
        rgba(194, 161, 74, 0.05) 35%,
        transparent 70%);
    pointer-events: none;
    animation: largo-respira 6s ease-in-out infinite;
}
.largo-interior {
    position: relative;
    z-index: 1;
}
/* "PRÓXIMAMENTE": mayúsculas muy espaciadas en dorado, con dos filetes que se
   abren desde el texto al cargar. */
.largo-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-md);
    margin: 0 0 var(--espacio-lg);
    color: var(--color-acento);
    font-size: 0.85rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em; /* compensa el tracking del último carácter */
    text-transform: uppercase;
    opacity: 0;
    animation: largo-aparece 1s ease 0.1s forwards;
}
.largo-filete {
    display: inline-block;
    height: 1px;
    width: 0;
    background: var(--color-acento);
    opacity: 0.7;
    animation: largo-filete 1.1s ease 0.5s forwards;
}
.largo-titulo {
    font-family: var(--fuente-titulos);
    font-weight: 500;
    color: var(--color-texto);
    font-size: clamp(2.6rem, 9vw, 6rem);
    line-height: 1.04;
    margin: 0;
    opacity: 0;
    animation: largo-aparece 1.2s ease 0.45s forwards;
}
.largo-linea {
    margin: var(--espacio-lg) 0 0;
    color: var(--color-texto-secundario);
    font-size: 1.05rem;
    opacity: 0;
    animation: largo-aparece 1.2s ease 0.85s forwards;
}
.largo-meta {
    margin: var(--espacio-sm) 0 0;
    color: var(--color-texto-terciario);
    font-variant: small-caps;
    letter-spacing: 0.12em;
    font-size: 0.9rem;
    opacity: 0;
    animation: largo-aparece 1.2s ease 1.1s forwards;
}
@keyframes largo-aparece {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes largo-filete {
    from { width: 0; }
    to   { width: 3rem; }
}
@keyframes largo-respira {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}
/* Accesibilidad: sin movimiento si el usuario lo pide. Todo queda visible y quieto. */
@media (prefers-reduced-motion: reduce) {
    .largo-glow,
    .largo-kicker,
    .largo-titulo,
    .largo-linea,
    .largo-meta { animation: none; opacity: 1; }
    .largo-filete { width: 3rem; }
}

/* === Marcas (trabajos comerciales) ===
   Página sencilla: intro breve, vídeos a toda anchura (uno por fila SIEMPRE, sea
   cual sea la pantalla) con su pie "Cliente: …", y un cierre con los clientes. */
.marcas-intro {
    max-width: 42rem;
    margin: 0 auto var(--espacio-xxl);
    text-align: center;
    color: var(--color-texto-secundario);
    font-size: 1.2rem;
    line-height: 1.6;
}
/* Vídeos en una sola columna: nunca dos por fila, da igual el ancho. */
.marcas-videos {
    max-width: 900px;
    margin: 0 auto;
}
.marca {
    margin: 0 0 var(--espacio-xxl);
}
.marca-reproductor {
    margin: 0;
}
.marca-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radio-md);
}
/* Pie de cada vídeo: "Cliente:" en versalitas tenues, el nombre en blanco roto. */
.marca-pie {
    margin: var(--espacio-md) 0 0;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    color: var(--color-texto-terciario);
}
.marca-pie span {
    color: var(--color-texto-secundario);
}
/* Cierre: epígrafe y banda de logos de clientes. Un filete dorado tenue abre el
   bloque, como en otras secciones. */
.marcas-clientes {
    max-width: 900px;
    margin: var(--espacio-xxl) auto 0;
    padding-top: var(--espacio-xl);
    border-top: 1px solid var(--color-linea);
    text-align: center;
}
.marcas-clientes-titulo {
    margin: 0 0 var(--espacio-xl);
    font-family: var(--fuente-titulos);
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 1.4rem;
    color: var(--color-acento);
}
.marcas-clientes-img {
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    height: auto;
}