/*
Theme Name: Nada Nuevo
Description: Tema propio del estudio Nada Nuevo — independiente, sin tema padre.
Author: Nada Nuevo
Version: 1.0.0
Text Domain: nadanuevo
*/

/* ==========================================================================
   1. Variables de diseño (equivalentes a los valores que antes generaba
   Blocksy dinámicamente desde el Personalizador — capturados del sitio en
   vivo el 07/09/2026 y fijados aquí como CSS propio).
   ========================================================================== */
:root {
    /* Historial resumido de "oscuro": casi-negro #1a1919 → azul #0000FF →
       verde #3CB043 → verde algo más oscuro #359C3F (pedido explícito, "un
       poquitititito más oscuro"). Ese verde es ahora --nn-color-verde,
       fijo (ver más abajo): la identidad de la versión en español.
       13/09/2026: con el selector de idioma, --nn-color-oscuro deja de ser
       un valor fijo y pasa a ser "el color principal del sitio", que
       cambia según el idioma activo — ver la regla "html.nn-idioma-en" un
       poco más abajo, justo después de cerrarse este :root. Por defecto
       (español) vale lo mismo que --nn-color-verde; en inglés se
       sobreescribe a --nn-color-azul-electrico. Todo lo que ya usaba
       var(--nn-color-oscuro) — texto, enlaces, selección, cursor,
       categoría activa — cambia de color solo, sin tocar cada regla.
       Los rgba(...) sueltos que antes iban por libre con el verde exacto
       ahora usan var(--nn-color-oscuro-rgb) por el mismo motivo (bordes de
       header/footer/grid, texto vacío de la home flotante). */
    --nn-color-verde: #359C3F;
    --nn-color-verde-rgb: 53, 156, 63;
    --nn-color-oscuro: var(--nn-color-verde);
    --nn-color-oscuro-rgb: var(--nn-color-verde-rgb);
    /* El "contrario": el color de la identidad que NO está activa —
       pedido 13/09/2026 para el cursor en hover ("del color contrario al
       idioma en que está"). Mismo mecanismo que --nn-color-oscuro: por
       defecto (español) vale el azul eléctrico (lo contrario del verde
       activo); la regla "html.nn-idioma-en" lo invierte a verde. */
    --nn-color-oscuro-contrario: var(--nn-color-azul-electrico);
    /* Punto medio entre el verde común anterior (#B1DB30) y el lima de
       antes (#C5F533) — probado a petición de Marta el 08/09/2026.
       12/09/2026: ya no se usa en ningún sitio — todo lo que llevaba este
       lima (selección de texto, cursor por defecto, botón "Ver más" de la
       home, enlaces, la animación del logo...) pasó a --nn-color-oscuro
       (el verde de arriba), a petición explícita de Marta ("que no quede
       nada del verde lima en ninguna parte"). Se deja la variable
       definida, sin usar, solo como referencia histórica. */
    --nn-color-lima: #BBE832;
    /* Vuelto a su valor de antes (#F5F5F0): la prueba de "más blanco"
       (#FAFAF7) se descarta el mismo día — pedido de Marta ("el fondo
       puede volver a off white"). */
    --nn-color-crema: #F5F5F0;
    --nn-color-naranja: #FF5623;
    /* Rojo para el resaltado de "activo" en proyectos (ver button.is-active
       más abajo) — antes lima/verde. Reutiliza el mismo naranja-rojizo que
       ya existe en el sitio como color del cursor al hover
       (--nn-color-naranja), pedido explícito de Marta ("el rojo que ya
       aparece en otras partes de la web, como el cursor"), en vez de un
       rojo nuevo inventado. */
    --nn-color-rojo: var(--nn-color-naranja);
    /* Negro puro, para el texto del resaltado de "activo": ese texto se
       queda en negro a propósito aunque el resto del sitio pase de
       --nn-color-oscuro (casi-negro) a verde — pedido 12/09/2026. */
    --nn-color-negro: #000000;
    --nn-color-gris-1: #e1e8ed;
    --nn-color-gris-2: #f2f5f7;
    --nn-color-gris-3: #FAFBFC;
    --nn-color-blanco: #ffffff;
    /* Identidad de la versión en inglés — fija, igual que --nn-color-verde
       lo es de la española (ver nota junto a --nn-color-oscuro arriba).
       13/09/2026: probado primero en morado (#7B2CBF), corregido el mismo
       día a azul eléctrico a petición de Marta ("no morado, azul
       eléctrico"). */
    --nn-color-azul-electrico: #0066FF;
    --nn-color-azul-electrico-rgb: 0, 102, 255;

    --nn-color-texto: var(--nn-color-oscuro);
    --nn-color-fondo: var(--nn-color-crema);
    --nn-color-enlace: var(--nn-color-oscuro); /* antes lima, ver nota arriba */
    --nn-color-enlace-hover: var(--nn-color-naranja);

    /* PRUEBA 12/09/2026, v2: mezcla de las dos tipografías en vez de una
       sola en todo el sitio. --nn-fuente (Satoshi) es la de por defecto —
       texto general, menús, tags y categorías, heredada desde <body> — y
       --nn-fuente-titulos (Crimson Pro, la de siempre) se aplica aparte
       solo donde toca: títulos (la regla general h1–h6 y las clases
       ".. -titulo.."), el logo del header y el footer. Para revertir del
       todo a Crimson Pro en todas partes: cambia el valor de --nn-fuente
       de vuelta a 'Crimson Pro', serif — no hace falta tocar nada más, con
       eso las dos variables valen lo mismo. El enqueue de Crimson Pro en
       functions.php se deja intacto y cargado en todo momento, use lo que
       use esta variable. */
    --nn-fuente: 'Satoshi', sans-serif;
    /* Vuelto a Satoshi en todas partes (12/09/2026) — la mezcla títulos en
       Crimson / resto en Satoshi se probó y se descartó en el momento. Se
       deja esta variable apuntando también a Satoshi (en vez de deshacer
       una por una las once reglas que la usan) para que quede un único
       punto de cambio si algún día se quiere volver a separar: cambiar
       solo este valor. */
    --nn-fuente-titulos: 'Satoshi', sans-serif;
    --nn-tamano-base: 16px;
    --nn-interlineado-base: 1.65;

    --nn-ancho-contenido: 1200px;
    --nn-ancho-estrecho: 750px;
    --nn-espaciado-contenido: 1.5em;
    --nn-espaciado-vertical: 60px;

    --nn-header-alto: 51px;
    --nn-header-alto-movil: 39px;

    /* Mismo alto que el header a propósito (ver nota en .nn-footer,
       sección 4): así el padding del hero de portada puede calcularse
       a partir de estas dos variables sin depender de ninguna medida
       en pantalla. 09/09/2026. */
    --nn-footer-alto: var(--nn-header-alto);
    --nn-footer-alto-movil: var(--nn-header-alto-movil);
}

/* Con el idioma en inglés, "el color principal del sitio" pasa de verde a
   azul eléctrico — pedido 13/09/2026 ("todo el sitio", no solo el botón
   del selector). Como :root y <html> son el mismo elemento, esto
   sobreescribe --nn-color-oscuro/-rgb ahí mismo con más especificidad que
   ":root", y se propaga solo a todo lo que ya usaba var(--nn-color-oscuro)
   o var(--nn-color-oscuro-rgb) — no hace falta tocar cada regla suelta. */
html.nn-idioma-en {
    --nn-color-oscuro: var(--nn-color-azul-electrico);
    --nn-color-oscuro-rgb: var(--nn-color-azul-electrico-rgb);
    --nn-color-oscuro-contrario: var(--nn-color-verde);
}

/* ==========================================================================
   2. Reset ligero y base tipográfica
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Cursor personalizado en todo el sitio: circulito verde en reposo, naranja
   al pasar sobre cualquier enlace o botón — pedido 08/09/2026.
   09/09/2026: la propiedad CSS "cursor: url(...)" (probada primero con SVG,
   luego con PNG) seguía viéndose con la flechita del sistema en
   desplazamientos rápidos del ratón y en los márgenes fuera del área de
   contenido — es una limitación real de cómo repinta Chromium los cursores
   de imagen vía CSS, no un bug de este código. Sustituido por un cursor
   propio: un div (.nn-cursor) que sigue al ratón por JS en vez de depender
   de la propiedad "cursor" del navegador — ver assets/js/nn-cursor.js. Si
   JS no llega a cargar, se queda el cursor normal del sistema (mejor eso
   que uno roto): el propio JS añade la clase "nn-cursor-activo" a <html>
   antes de ocultar el cursor de sistema, así que sin JS no pasa nada. */
html {
    scroll-behavior: smooth;
    cursor: auto;
}

html.nn-cursor-activo,
html.nn-cursor-activo * {
    cursor: none;
}

.nn-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* Verde → azul, pedido 12/09/2026 (mismo día que el resto del sitio
       pasó de negro a azul #0000FF): reutiliza --nn-color-oscuro en vez de
       un azul suelto, así el cursor se mantiene en sintonía si ese valor
       cambia más adelante. */
    background-color: var(--nn-color-oscuro);
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.1s ease;
}

.nn-cursor--visible {
    opacity: 1;
}

.nn-cursor--hover {
    /* Naranja → color contrario al idioma activo (azul si estás en
       español, verde si estás en inglés) — pedido explícito de Marta
       13/09/2026. Ver --nn-color-oscuro-contrario en la sección 1. */
    background-color: var(--nn-color-oscuro-contrario);
}

body {
    margin: 0;
    /* Que body cubra siempre el viewport entero (no solo lo que ocupe el
       contenido real) — así no quedan huecos en páginas cortas. */
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--nn-color-fondo);
    color: var(--nn-color-texto);
    font-family: var(--nn-fuente);
    font-size: var(--nn-tamano-base);
    line-height: var(--nn-interlineado-base);
    -webkit-font-smoothing: antialiased;
    /* "a" alternativa de Satoshi (ss01) en vez de la "a" normal, pedido
       13/09/2026 — como --nn-fuente y --nn-fuente-titulos son la misma
       fuente (Satoshi), basta con ponerlo aquí una vez: se hereda a todo
       (títulos incluidos), no hace falta repetirlo en cada regla. */
    font-feature-settings: "ss01" on;
}

/* Color de selección de texto: verde al 100% (sin la transparencia que
   ponen los navegadores por defecto) — pedido 09/09/2026.
   12/09/2026: fondo lima → --nn-color-oscuro (mismo verde que el resto
   del sitio, para que no quede nada de lima). Como --nn-color-oscuro es
   ahora el propio verde, el texto ya no puede quedarse en ese mismo color
   (sería invisible: fondo y texto iguales) — pasa a blanco para que siga
   leyéndose. */
::selection {
    background-color: var(--nn-color-oscuro);
    color: var(--nn-color-blanco);
}

::-moz-selection {
    background-color: var(--nn-color-oscuro);
    color: var(--nn-color-blanco);
}

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

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

h1, h2, h3, h4, h5, h6 {
    color: var(--nn-color-texto);
    font-family: var(--nn-fuente-titulos); /* títulos en Crimson Pro, ver variables arriba */
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 var(--nn-espaciado-contenido);
}

h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

p {
    margin: 0 0 var(--nn-espaciado-contenido);
}

.nn-container {
    max-width: var(--nn-ancho-contenido);
    margin: 0 auto;
    padding: 0 20px;
}

.nn-container--estrecho {
    max-width: var(--nn-ancho-estrecho);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--nn-color-oscuro);
    color: var(--nn-color-blanco);
    padding: 10px 16px;
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   3. Header
   Navegación reducida a 2 enlaces fijos (remodelación 08/09/2026, según
   Figma). En móvil el logo va a la izquierda y los dos enlaces juntos a
   la derecha; en escritorio se reparten a ambos lados del logo, que queda
   centrado — ya no hace falta menú hamburguesa ni panel lateral.
   ========================================================================== */
.nn-header {
    background-color: var(--nn-color-fondo);
    position: relative;
    z-index: 500;
    /* 1px → 1.5px, un poco más gruesa para compensar el cambio de tono
       (ahora azul en vez de casi-negro) — pedido 12/09/2026. */
    border-bottom: 1.5px solid rgba(var(--nn-color-oscuro-rgb), 0.2);
}

/* 09/09/2026: el menú va con el mismo diseño en todos los tamaños —
   Proyectos / logo centrado / About, como en escritorio — así que el grid
   de 3 columnas se aplica siempre, no solo a partir de 1000px. Antes,
   por debajo de 1000px había un layout de flex distinto (logo a la
   izquierda, Proyectos+About agrupados a la derecha) pensado como una
   versión "reducida" para pantallas estrechas, pero eso no es lo que
   pediste: el menú se queda igual que en escritorio, solo cambia de
   tamaño (alto/padding) en los puntos de ruptura de siempre. Las dos
   columnas laterales (1fr) miden siempre lo mismo entre sí sea cual sea
   el ancho real de "Proyectos" y "About", así que el logo (columna
   central) queda centrado de verdad, no solo a medio camino entre los
   dos textos. */
.nn-header__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    height: var(--nn-header-alto-movil);
    width: 100%;
    padding: 0 20px;
}

.nn-header__link--izquierda {
    justify-self: start;
}

.nn-header__link--derecha {
    justify-self: end;
}

.nn-header__logo {
    justify-self: center;
}

@media (min-width: 690px) {
    .nn-header__barra {
        height: var(--nn-header-alto);
        /* El lateral al triple (pedido) solo tiene sentido en pantallas
           anchas — en móvil se queda como estaba, que es lo que marca el
           diseño de Figma para esa versión. */
        padding: 0 60px;
        gap: 20px;
    }
}

.nn-header__logo {
    font-family: var(--nn-fuente-titulos);
    font-weight: 700; /* logo en negrita, pedido 12/09/2026 */
    font-size: 18px;
    white-space: nowrap;
    /* Sin overflow:hidden aquí a propósito: las dos palabras del logo se
       posicionan ahora en absoluto desde un punto central de ancho 0 (ver
       .nn-logo-tragaperras más abajo) y quedan fuera del flujo — con
       overflow:hidden en este contenedor de ancho 0 se recortarían las dos
       enteras. El recorte vertical de cada rueda ya lo hace .nn-logo-palabra
       por su cuenta. */
    height: 1.3em;
}

@media (min-width: 690px) {
    .nn-header__logo {
        font-size: 28px;
    }
}

/* Logo "nada nuevo": efecto de rueda de tragaperras, palabra a palabra
   (ver assets/js/nn-logo-tragaperras.js). Cada palabra es su propia
   rueda independiente (.nn-logo-palabra contiene a .nn-logo-rueda, con
   sus 4 variantes de idioma apiladas + una copia de la primera al final
   para que la vuelta enlace sin salto). La segunda palabra lidera el
   cambio de idioma y la primera la sigue un paso por detrás, así que a
   veces se ven dos idiomas distintos a la vez ("nada new") de camino a
   que vuelvan a coincidir ("nothing new").
   09/09/2026: antes las dos palabras iban en una fila flex, y el "centro"
   dependía de que las dos cajas midieran lo mismo — pero cada palabra
   tiene su propia variante más larga ("nothing" para la primera, "nuevo/
   neues/nuovo" para la segunda) y esos anchos no coinciden, así que el
   espacio quedaba desplazado hacia el lado de la palabra más corta (se
   notaba comparándolo con la barra de navegación). Cambiado a un único
   punto central fijo: las dos palabras se posicionan de forma absoluta
   desde ese mismo punto, cada una hacia su lado, así el centro no depende
   en absoluto del ancho de ninguna de las dos. */
.nn-logo-tragaperras {
    position: relative;
    display: block;
    height: 1.3em;
}

.nn-logo-palabra {
    position: absolute;
    top: 0;
    overflow: hidden;
    height: 1.3em;
}

/* Ya no forma parte del layout visual (el hueco lo dan los paddings de
   abajo) — se queda solo por accesibilidad, para que un lector de
   pantalla siga oyendo "nada nuevo" con espacio de por medio. Reutiliza
   el mismo patrón que .screen-reader-text. */
.nn-logo-espacio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.nn-logo-rueda {
    display: flex;
    flex-direction: column;
}

.nn-logo-linea {
    display: block;
    height: 1.3em;
    line-height: 1.3em;
    white-space: nowrap;
}

/* El punto central es el borde derecho de la palabra 1 = el borde
   izquierdo de la palabra 2 = el mismo punto (right:0 / left:0 sobre el
   mismo contenedor de ancho 0). El padding de 3px a cada lado es el
   único hueco entre las dos palabras y el centro — simétrico siempre,
   sea cual sea la longitud de la variante que esté visible. */
.nn-logo-palabra--1 {
    right: 0;
    padding-right: 3px;
}

.nn-logo-palabra--1 .nn-logo-linea {
    text-align: right;
}

.nn-logo-palabra--2 {
    left: 0;
    padding-left: 3px;
}

.nn-logo-palabra--2 .nn-logo-linea {
    text-align: left;
}

.nn-header__link {
    font-weight: 500; /* medium, pedido 12/09/2026 */
    font-size: 13px; /* pedido 09/09/2026 (móvil) */
    text-transform: capitalize;
    white-space: nowrap;
    /* Sin cursor:pointer aquí a propósito: pisaría con más especificidad
       (selector de clase) el cursor personalizado que ya pone la regla
       general "a, button" más abajo — bug encontrado y corregido
       08/09/2026. */
}

@media (min-width: 690px) {
    .nn-header__link {
        font-size: 16px; /* mismo tamaño que el footer, pedido 12/09/2026 */
    }
}

/* ==========================================================================
   4. Footer
   ========================================================================== */
.nn-footer {
    background-color: var(--nn-color-fondo);
    font-family: var(--nn-fuente-titulos); /* footer en Crimson Pro, pedido 12/09/2026 */
    /* 09/09/2026: antes el alto salía de padding + interlineado del texto
       (9px/12px de padding, que por casualidad daban un alto muy parecido
       al del header) — funcionaba, pero si el texto o el padding cambiaban
       un poco el footer dejaba de medir lo mismo que el header sin que se
       notara hasta mirarlo, y el padding-bottom del hero de portada (más
       abajo) se quedaba desajustado sin avisar. Ahora el alto es explícito
       e igual al del header (--nn-footer-alto/-movil, definidas en la
       sección 1 como alias de --nn-header-alto/-movil), así que los dos
       miden lo mismo por construcción, siempre. */
    height: var(--nn-footer-alto-movil);
    display: flex;
    align-items: center;
    /* 1px → 1.5px, igual que .nn-header — pedido 12/09/2026. */
    border-top: 1.5px solid rgba(var(--nn-color-oscuro-rgb), 0.2);
}

@media (min-width: 690px) {
    .nn-footer {
        height: var(--nn-footer-alto);
    }
}

/* display:grid con 3 columnas (1fr / auto / 1fr) en vez de flex +
   space-between — pedido 13/09/2026 ("los botones centrados en el
   footer"). Con solo 2 elementos, space-between ya dejaba el selector de
   idioma más o menos hacia el centro, pero no centrado de verdad: su
   posición dependía del ancho de Contacto y Copyright a cada lado. Con
   una rejilla explícita, la columna central es SIEMPRE el centro exacto
   del footer, dé igual lo que midan los otros dos textos. */
.nn-footer__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    width: 100%;
    font-weight: 500; /* medium (Contacto + copyright), pedido 12/09/2026 */
    /* Mismo lateral que el header (.nn-header__barra) en cada punto de
       ruptura, para que Contacto/Copyright queden alineados en vertical
       con Proyectos/About — antes tenían valores de base distintos (20 y
       35px) y el triple de cada uno ya no coincidía. */
    padding: 0 20px;
    font-size: 13px;
}

@media (min-width: 690px) {
    .nn-footer__barra {
        font-size: 16px;
        padding: 0 60px;
    }
}

.nn-footer__copyright {
    margin: 0;
    justify-self: end;
}

.nn-footer__contacto {
    justify-self: start;
    /* Ídem .nn-header__link: sin cursor:pointer, para no pisar el
       cursor personalizado de la regla general "a, button". */
}

/* En pantallas muy estrechas (móviles pequeños), la columna central
   "auto" del grid de arriba puede llegar a apretar demasiado a Contacto/
   Copyright contra los bordes. 13/09/2026: se apilaban los 3 en columna,
   cada uno en su propia línea. 15/09/2026, pedido explícito: Contacto y
   el copyright (ahora más corto, sin la palabra "Copyright" — solo el
   símbolo "©") comparten línea; el selector de idioma pasa a su propia
   fila — primero se probó debajo, pero se pidió encima de esa línea, así
   que va arriba. Grid de 2 columnas x 2 filas con áreas con nombre — así
   no hace falta reordenar el HTML (Contacto / selector / copyright, en
   ese orden en el documento) para conseguir esta disposición visual.
   Con solo 2 filas en vez de 3, baja también --nn-footer-alto-movil. */
@media (max-width: 480px) {
    :root {
        --nn-footer-alto-movil: 64px;
    }

    .nn-footer__barra {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "selector selector"
            "contacto copyright";
        align-items: center;
        row-gap: 6px;
    }

    .nn-footer__contacto {
        grid-area: contacto;
        justify-self: start;
    }

    .nn-footer__copyright {
        grid-area: copyright;
        justify-self: end;
    }

    .nn-selector-idioma {
        grid-area: selector;
        justify-self: center;
    }
}

/* ==========================================================================
   4.1. Selector de idioma (ES / EN) — pedido 13/09/2026.
   Interruptor ligero hecho a medida (sin plugin de multi-idioma, sin URLs
   nuevas). Va dentro de .nn-footer__barra, como un elemento más junto a
   Contacto/Copyright (ver footer.php) — no flotante ni fijo, sigue el
   flujo normal del pie.
   13/09/2026, más tarde: rediseñado a petición de Marta — botones más
   pequeños, cada uno con una bolita de color a la izquierda y la sigla
   (ES/EN) en texto a la derecha, en vez de círculos grandes con la letra
   dentro. La bolita usa siempre el color de identidad de su idioma
   (--nn-color-verde / --nn-color-azul-electrico, fijos, ver sección 1) —
   no cambia aunque cambie el idioma activo, es lo que distingue un botón
   del otro. El que SÍ cambia con el idioma activo es el texto de todo el
   sitio (--nn-color-oscuro, dinámico — ver sección 1 y nn-idioma.js).
   13/09/2026, todavía más tarde: dos ajustes más, explícitos de Marta —
   (1) centrado de verdad en el footer, columna central del grid de
   ".nn-footer__barra" arriba, en vez de depender de space-between; (2) sin
   apagar el que no está activo — las dos siglas a la misma opacidad
   siempre (antes el inactivo bajaba a 0.5). De momento no hay ninguna
   marca visual de cuál es el idioma activo aparte del propio contenido de
   la página — si hiciera falta una, habría que pensar otra (p. ej.
   subrayado) que no sea "apagar" el otro. */
.nn-selector-idioma {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: center;
}

.nn-idioma-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--nn-fuente);
    font-size: 12px;
    font-weight: 700;
}

.nn-idioma-btn.is-active {
    /* Sin esto, el "button.is-active" genérico (pensado para las
       categorías del feed, ver sección de arriba) se cuela aquí también
       -- misma clase "is-active", más específico por tener 2 clases
       propias frente a "button" + 1 clase. Se anula explícitamente lo que
       no queremos (fondo/padding de la píldora de categorías) — ya no hay
       diferencia de opacidad que restaurar, las dos siglas pesan igual
       siempre, y el color lo pone ".nn-idioma-btn--es/--en" (ver abajo),
       no esta regla. */
    background-color: transparent;
    padding: 0;
}

.nn-idioma-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 14/09/2026: el texto (ES/EN) también fijo a su color de identidad, no
   solo la bolita — antes heredaba var(--nn-color-texto), el color
   dinámico que cambia con el idioma activo, así que las dos siglas
   acababan siempre del MISMO color (las dos verdes en español, las dos
   azules en inglés). Ahora "ES" es siempre verde y "EN" siempre azul
   eléctrico, texto y bolita a la vez, sea cual sea el idioma activo.
   14/09/2026, un rato después: arreglado un fallo del primer intento —
   ".nn-idioma-btn--es" sola cuenta como 1 sola clase para el navegador
   (aunque en el HTML el botón lleve más clases encima), así que el
   "button.is-active" genérico (1 tipo + 1 clase, más específico) seguía
   ganando y el botón activo del selector se veía SIEMPRE en negro, en los
   dos idiomas — justo lo que Marta reportó. Solución: encadenar las dos
   clases propias del botón (".nn-idioma-btn.nn-idioma-btn--es", sin
   espacio) para que cuenten como 2 clases y le ganen a "button.is-active"
   pase lo que pase. */
.nn-idioma-btn.nn-idioma-btn--es {
    color: var(--nn-color-verde);
}

.nn-idioma-btn.nn-idioma-btn--en {
    color: var(--nn-color-azul-electrico);
}

.nn-idioma-btn--es .nn-idioma-punto {
    background-color: var(--nn-color-verde);
}

.nn-idioma-btn--en .nn-idioma-punto {
    background-color: var(--nn-color-azul-electrico);
}

/* Textos bilingües: cada pieza de texto fija del tema (no el contenido de
   cada proyecto, que vive en WordPress y de momento no está traducido —
   ver nota en functions.php) va escrita dos veces en el HTML, envuelta en
   uno de estos dos spans; por defecto se ve el español y el inglés queda
   oculto, y "nn-idioma-en" en <html> los intercambia. display:inline por
   defecto porque casi todo son fragmentos de texto sueltos dentro de un
   enlace o párrafo — donde hace falta otro display (un botón entero, un
   bloque) se sobreescribe en el propio selector, más específico. */
.nn-i18n--en {
    display: none;
}

html.nn-idioma-en .nn-i18n--es {
    display: none;
}

html.nn-idioma-en .nn-i18n--en {
    display: inline;
}

/* ==========================================================================
   5. Contenido genérico (páginas / entradas estándar de WordPress)
   ========================================================================== */
.nn-contenido {
    max-width: var(--nn-ancho-estrecho);
    margin: 0 auto;
    padding: var(--nn-espaciado-vertical) 20px;
}

.nn-contenido .nn-titulo-entrada {
    font-family: var(--nn-fuente-titulos);
    font-size: 20px; /* alineado a la izquierda, bold, 20px — pedido 12/09/2026 */
    font-weight: 700;
    text-align: left;
    margin-bottom: 30px;
}

.nn-entrada-contenido {
    font-size: 14px; /* pedido 12/09/2026 */
}


/* ==========================================================================
   Galería editorial del cuerpo (página de proyecto individual)
   ========================================================================== */
.nn-galeria-proyecto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 20px 0;
}

.nn-imagen-proyecto {
    width: 100%;
    margin: 0;
}

.nn-imagen-proyecto img {
    /* Ancho y alto libres (no fijados en 100%), limitados por el ancho de
       la columna Y por el alto de pantalla — así una imagen vertical muy
       alargada nunca supera el 100vh. Pedido 08/09/2026. */
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.nn-pie-imagen {
    font-size: 0.85rem;
    color: #888;
    margin-top: 8px;
    line-height: 1.4;
    text-align: right;
}

.nn-texto-galeria {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    text-align: left;
    max-width: 600px;
    margin: 20px 0;
}

/* Chincheta: quitada del todo — pedido 14/09/2026 ("recuadros normales,
   sin la chincheta"). Ya no queda ninguna versión (la del hero/tarjetas de
   proyecto se había quitado antes, el 12/09/2026); la clase
   ".nn-chincheta-postit" ya no se usa en ningún template. */

/* La imagen "hero" del proyecto individual desapareció como sección propia
   — pasó a formar parte de la galería normal, pedido 12/09/2026. Se quitan
   sus reglas (.nn-proyecto-hero / .nn-hero-item / .nn-hero-imagen). */

/* ==========================================================================
   Página de proyecto individual
   ========================================================================== */
.nn-proyecto-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.nn-proyecto-cabecera h1 {
    font-size: 20px; /* alineado a la izquierda, bold, 20px — pedido 12/09/2026 */
    font-weight: 700;
    margin-bottom: 40px;
    text-align: left;
}

/* Título del proyecto individual: ya no va en .nn-proyecto-cabecera (esa
   solo la usa ahora el "Proyectos" del listado) — vive dentro de
   .nn-proyecto-columna-detalles, alineado a la izquierda y fijo junto al
   resto de la info, pedido 12/09/2026. Tamaño elegido a ojo (columna
   estrecha, ya no hero a ancho completo) — revisar con Marta si no
   convence. */
.nn-proyecto-titulo-fijo {
    font-size: 20px; /* pedido 12/09/2026 */
    font-weight: 700;
    text-align: left;
    margin: 0 0 8px; /* antes 24px, pegado más a la categoría — pedido 15/09/2026 */
}

.nn-proyecto-cuerpo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

.nn-proyecto-columna-detalles {
    grid-column: 1 / 2;
    position: sticky;
    /* Antes 100px: quedaba por debajo de la distancia real hasta esta
       columna (header + su borde + el padding-top de .nn-proyecto-single,
       ~112.5px), así que al empezar a hacer scroll recorría esos ~12px
       antes de "engancharse" — el pequeño salto que notaba Marta. Con el
       top igual (o algo mayor, de margen) a esa distancia real, queda fija
       desde el primer pixel de scroll, sin recorrido — pedido 15/09/2026:
       "que no haga el pequeñito scroll inicial, lo quiero fijo". */
    top: calc(var(--nn-header-alto) + 65px);
    min-width: 0;
    /* Texto descriptivo con scroll propio — pedido 16/09/2026: cuando
       "Descripción" es más largo que el hueco libre bajo los datos fijos,
       antes se salía por debajo de la pantalla sin forma de verlo entero.
       Acotando esta columna al alto visible (mismo cálculo que su "top"
       de arriba, menos 40px de respiro abajo) y poniéndola en columna
       flex, el título/categoría/datos/línea divisoria conservan su
       tamaño natural (ver "> *" debajo) y es solo .nn-descripcion quien
       se lleva el hueco que sobra y hace scroll si no cabe. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--nn-header-alto) - 65px - 40px);
}

.nn-proyecto-columna-detalles > * {
    /* Todo menos el texto descriptivo mantiene su alto natural — la única
       pieza que cede espacio y hace scroll es .nn-descripcion (más abajo,
       con flex-shrink:1 que pisa este flex-shrink:0 general). */
    flex-shrink: 0;
}

.nn-proyecto-columna-scroll {
    grid-column: 2 / 4;
    min-width: 0;
}

.nn-linea-meta {
    /* Mismo tamaño que los créditos de imagen (.nn-pie-imagen, 0.85rem) —
       funciona como "título" de categoría del proyecto. Sin interletrado
       forzado: el natural de la tipografía. Pedido 08/09/2026.
       Ya no lleva el año detrás (pedido 15/09/2026, quedaba repetido con el
       dato "Año" de abajo); margen inferior reducido de 30px a 16px el
       mismo día, para que los detalles (Cliente, Año...) empiecen más
       arriba. */
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 16px;
}

.nn-dato {
    /* Campos más juntos entre sí (antes 20px, luego 10px) — pedido
       08/09/2026 y 15/09/2026. Sigue siendo mayor que el hueco entre la
       etiqueta y su valor dentro de un mismo dato (.nn-dato-label,
       2px) — así cada pareja etiqueta+valor se lee junta, y el salto
       real ocurre entre un dato y el siguiente. */
    margin-bottom: 6px;
}

.nn-dato-label {
    display: block;
    font-size: 0.7rem;
    /* Sin interletrado forzado — el natural. */
    color: #888;
    /* Menor que el margen entre datos (.nn-dato, 6px) — pedido
       15/09/2026: la etiqueta ("Cliente") queda pegada a su valor. */
    margin-bottom: 2px;
}

.nn-dato-valor {
    display: block;
    /* Un par de px por debajo de .nn-descripcion (14px) — pedido
       15/09/2026, antes 1rem (16px, más grande que el texto descriptivo). */
    font-size: 12px;
}

.nn-entradilla {
    /* Antes escrito a mano ('Crimson Pro', serif) en vez de usar la
       variable — así no se actualizaba con la prueba de tipografía de
       Marta (12/09/2026). Pasado a var(--nn-fuente) para que todo el
       sitio cambie de un único sitio, y así también revierte de un único
       sitio. */
    font-family: var(--nn-fuente);
    font-size: 14px; /* pedido 12/09/2026 */
    line-height: 1.4;
    margin-bottom: 24px;
    text-align: left;
}

.nn-descripcion {
    font-size: 14px; /* pedido 12/09/2026 */
    line-height: 1.7;
    color: #444;
    text-align: left;
    max-width: 600px;
    /* Antes 80px de margen inferior: pensado para cuando esto vivía en la
       columna ancha de scroll. Ahora vive en la columna estrecha de datos
       (pedido 12/09/2026), con el mismo ritmo compacto que .nn-dato. */
    margin: 0 0 20px;
    /* Scroll propio cuando el texto no cabe en el hueco libre de la
       columna — pedido 16/09/2026. flex-shrink:1 pisa el flex-shrink:0
       general de .nn-proyecto-columna-detalles > * (arriba), así que esta
       es la única pieza que cede; min-height:0 es necesario para que un
       hijo flex pueda encogerse por debajo de su contenido y el
       overflow-y:auto entre en juego. Con el ratón encima, la rueda mueve
       solo este texto, no la página — comportamiento normal del
       navegador con un contenedor con su propio scroll, sin JS. */
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    /* Barra de scroll oculta pero funcional — pedido 16/09/2026: "que no
       tuviera barra de scroll, pero si funcionara". scrollbar-width para
       Firefox, -ms-overflow-style para Edge antiguo, ::-webkit-scrollbar
       (regla siguiente) para Chrome/Safari. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nn-descripcion::-webkit-scrollbar {
    display: none;
}

/* Línea divisoria entre los detalles (Cliente, Año...) y el texto
   descriptivo — pedido 15/09/2026. Mismo estilo que el resto de líneas
   divisorias del sitio (borde 1.5px al 20% de opacidad, en el color
   "oscuro" activo — verde o azul eléctrico según idioma). */
.nn-linea-divisoria-detalles {
    border: none;
    border-top: 1.5px solid rgba(var(--nn-color-oscuro-rgb), 0.2);
    margin: 20px 0;
}

/* Dos imágenes verticales seguidas en la galería, en la misma línea en vez
   de una debajo de otra — pedido 15/09/2026, solo en escritorio (ver la
   lógica de emparejado en nn_renderizar_galeria_editorial(), functions.php;
   en móvil vuelven a apilarse, ver media query más abajo). */
.nn-galeria-fila-vertical {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.nn-galeria-fila-vertical .nn-imagen-proyecto {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* Misma altura para las dos verticales de la pareja — pedido 15/09/2026:
   antes cada una conservaba su proporción original (width:auto/height:auto
   heredado de .nn-imagen-proyecto img), así que si no eran exactamente del
   mismo alto/ancho relativo, una quedaba más alta que la otra. Con
   aspect-ratio + object-fit:cover se recortan ambas al mismo recuadro
   (proporción 3:4), en vez de dejar que cada imagen imponga su propio
   alto. Solo en escritorio, que es donde van en pareja — en móvil (ver
   media query de abajo) vuelven a apilarse a su proporción original, sin
   recorte. */
.nn-galeria-fila-vertical .nn-imagen-proyecto img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    height: auto;
    max-height: none;
}

/* Vídeo dentro de la galería del proyecto individual — pedido 15/09/2026:
   "que se vea como si fuera una imagen normal". Se apoya en
   ".nn-imagen-proyecto" (mismo ancho/alto máximo que cualquier foto de la
   galería, ver más arriba) y añade solo lo que hace falta para que el
   <video> se vea como una miniatura fija en vez de con su reproductor
   nativo: sin "controls" hasta que se pulsa el botón de play superpuesto
   (ver nn-proyecto-video.js, que es quien se lo añade y lo pone en
   marcha). */
.nn-video-proyecto {
    position: relative;
}

.nn-video-proyecto-el {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    background-color: var(--nn-color-negro);
}

.nn-video-proyecto-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--nn-color-blanco);
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nn-video-proyecto-play:hover {
    background-color: rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Triángulo de "play" dibujado con el truco del borde (mismo principio que
   la esquinita doblada que se probó y se quitó en los post-its): un borde
   ancho a un solo lado, con los otros tres transparentes, dibuja un
   triángulo sin necesidad de una imagen o un icono aparte. Ligero
   desplazamiento a la derecha (2px) para compensar que un triángulo
   apuntando a la derecha se ve un poco descentrado si no. */
.nn-video-proyecto-play-icono {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid var(--nn-color-blanco);
    margin-left: 3px;
}

/* Vídeo pegado como enlace (YouTube/Vimeo/etc, bloque "Embed") — pedido
   15/09/2026, cuando resultó que el vídeo de Marta era justo este caso.
   La miniatura es una <img> normal (la del propio proveedor), así que
   lleva el mismo tratamiento que cualquier imagen de la galería. El
   reproductor real se revela al pulsar (ver nn-proyecto-video.js): un
   iframe de ancho/alto fijos que el proveedor devuelve tal cual, así que
   se fuerza a llenar su contenedor (que sí lleva la proporción real,
   calculada en PHP con el ancho/alto que da el propio oEmbed). */
.nn-video-proyecto-poster {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.nn-video-proyecto-embed-html {
    width: 100%;
    aspect-ratio: 16 / 9; /* respaldo si el proveedor no da ancho/alto — ver estilo inline en PHP */
}

.nn-video-proyecto-embed-html iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.nn-video-proyecto-fallback a {
    color: var(--nn-color-enlace);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .nn-proyecto-cuerpo {
        display: block;
    }

    .nn-proyecto-columna-detalles {
        position: static;
        grid-column: auto;
        margin-bottom: 30px;
        /* En móvil la columna ya no es "sticky" ni tiene un hueco fijo que
           recortar — fluye con el resto de la página, así que se anula el
           scroll propio de escritorio (arriba) y .nn-descripcion vuelve a
           su alto natural — pedido 16/09/2026. */
        display: block;
        max-height: none;
    }

    .nn-descripcion {
        max-height: none;
        overflow-y: visible;
    }

    .nn-proyecto-columna-scroll {
        grid-column: auto;
    }

    .nn-galeria-fila-vertical {
        flex-direction: column;
    }

    .nn-galeria-fila-vertical .nn-imagen-proyecto {
        width: 100%;
        flex: none;
    }

    .nn-galeria-fila-vertical .nn-imagen-proyecto img {
        aspect-ratio: auto;
        object-fit: initial;
        width: auto;
        height: auto;
        max-height: 100vh;
    }
}

/* ==========================================================================
   Listado de proyectos (archive-proyecto.php)
   ========================================================================== */
.nn-archivo-proyectos {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.nn-archivo-intro {
    text-align: left; /* pedido 12/09/2026 */
    max-width: 700px;
    margin: 0 0 50px;
    font-size: 14px;
    line-height: 1.5;
}

.nn-archivo-intro p {
    transition: opacity 0.2s ease;
}

.nn-archivo-filtros {
    display: flex;
    justify-content: center; /* ya es lo único que queda arriba del grid, centradas — pedido 12/09/2026 */
    gap: 6px; /* categorías más juntas, pedido 12/09/2026 (antes 12px) */
    flex-wrap: wrap;
    /* 60px → 30px: la otra mitad del espacio de antes la pone ahora
       ".nn-linea-filtros" (su propio margin-bottom, ver más abajo), igual
       que en las filas del grid (línea + 30px a cada lado). */
    margin-bottom: 30px;
}

.nn-filtro-btn {
    background: none;
    border: none;
    font: inherit;
    /* Sin cursor:pointer: la regla general "a, button" ya pone el
       cursor personalizado. */
    padding: 1px 6px;
    border-radius: 999px;
    color: #555;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Línea divisoria entre la barra de categorías y la primera fila del feed
   — pedido 13/09/2026, corregido el mismo día: el primer intento ponía
   una línea ENTRE cada botón de categoría (border-left en .nn-filtro-btn),
   que no era lo que Marta pedía — se quita del todo. Lo que sí quería era
   una única línea debajo de toda la ristra de filtros, a pantalla
   completa (mismo truco de ancho completo que ".nn-grid-divisor" más
   abajo: un elemento de verdad, no un border-bottom en .nn-archivo-filtros
   — así no interfiere con su propio "display:flex" ni su centrado). */
.nn-linea-filtros {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-top: 1.5px solid rgba(var(--nn-color-oscuro-rgb), 0.2);
    margin-bottom: 30px;
}

/* Resaltado, en un selector genérico "button.is-active" en vez de
   acoplado a .nn-filtro-btn, para que sea el aspecto por defecto de
   cualquier botón "activo/seleccionado" del sitio, no solo los filtros de
   categoría. Pedido 08/09/2026.
   12/09/2026: se probó un contorno "spiky" (dientes de sierra) con
   clip-path como punto divertido, en dos intentos (uno solo dentaba
   arriba/abajo, el otro recorría las 4 caras pero leía como un
   escudo/blasón — "el escudo de Kenia", según Marta). Descartado el mismo
   día: Marta pidió volver a un resaltado normal, de bordes rectos (ni
   dentado ni la píldora redondeada de antes) — border-radius a 0 en vez
   del 999px que hereda de .nn-filtro-btn, sin clip-path.
   Mismo día, más tarde: verde → rojo (--nn-color-rojo), y el texto pasa a
   negro puro (--nn-color-negro) en vez de --nn-color-oscuro — este texto
   se queda en negro a propósito.
   13/09/2026: rojo → "el color principal" (--nn-color-oscuro, el mismo
   verde del resto del sitio) — pedido explícito de Marta. El texto se
   queda en negro, tal y como estaba (no pidió cambiarlo). */
button.is-active {
    background-color: var(--nn-color-oscuro);
    color: var(--nn-color-negro);
    padding: 4px 14px;
    border-radius: 0;
}

.nn-archivo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio, pedido 12/09/2026 */
    /* Fila (vertical) a 0: el espacio entre filas ahora lo pone el propio
       "nn-grid-divisor" (margen arriba/abajo de su línea, ver más abajo),
       no el gap del grid — necesario para que la línea pueda ser un
       elemento de pleno ancho en vez de un border-top fragmentado por
       columna. La columna (horizontal, 40px) no cambia. */
    gap: 0 40px;
    /* Necesario para que los items que salen (position:absolute mientras
       se desvanecen, ver nn-archive.js) se coloquen respecto al grid y no
       respecto a un ancestro más arriba — parte de la animación de
       recolocación fluida al cambiar de categoría, 09/09/2026. */
    position: relative;
}

/* Líneas entre filas del feed — pedido 13/09/2026, ajustado el mismo día
   dos veces: primero se probó un border-top por elemento (fragmentado en
   3 trozos, uno por columna, con hueco en cada calle del grid); luego se
   hizo un elemento aparte de ancho completo del GRID (mejor, pero seguía
   parándose en el margen del contenido); Marta pidió explícitamente
   "pantalla completa" — ahora llega de borde a borde de la ventana, con
   el mismo truco de "width: 100vw" + "margin-left: calc(50% - 50vw)" que
   ".nn-linea-filtros" un poco más arriba (el 50% se calcula sobre el
   ancho del propio .nn-archivo-grid, que al estar centrado dentro de
   .nn-archivo-proyectos hace que la cuenta cuadre exactamente con el
   borde de la ventana).
   Se inserta un ".nn-grid-divisor" vacío en el PHP después de CADA
   proyecto/post-it (ver archive-proyecto.php), con grid-column: 1/-1 para
   que el propio grid lo coloque en su fila propia (el ancho real de la
   línea ya no depende de esto, solo la colocación).
   15/09/2026: quién se enseña ya NO lo decide un ":nth-of-type(3n)" fijo
   sobre el listado completo — con el filtro de categorías activo eso
   contaba divisores del listado ENTERO (proyecto visibles y ocultos por
   igual), así que la línea caía en sitios que ya no correspondían a un
   final de fila real, y encima esos huecos "grid-column:1/-1" fijos
   rompían el reflujo del grid: los proyectos que sí se veían se quedaban
   repartidos en filas sueltas, sin recolocarse. Ahora nn-archive.js
   recalcula, cada vez que cambia el filtro (y también al cambiar de
   escritorio a móvil o viceversa), qué divisor cae justo al final de cada
   fila contando SOLO los elementos que están visibles en ese momento, y
   le añade la clase ".nn-visible" — con eso basta en cualquier número de
   columnas (3 en escritorio, 1 en móvil, ver ".nn-visible" más abajo, sin
   necesidad de @media aparte). El resto de este comentario documenta el
   comportamiento que tenía el CSS antes de ese cambio, por si hace falta
   revisarlo: el último divisor (después del último elemento del listado)
   se ocultaba siempre, para no dejar una línea colgando sin nada debajo. */
.nn-grid-divisor {
    display: none;
    grid-column: 1 / -1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-top: 1.5px solid rgba(var(--nn-color-oscuro-rgb), 0.2);
    margin-top: 30px;
    margin-bottom: 30px;
}

.nn-grid-divisor.nn-visible {
    display: block;
}

.nn-grid-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    width: 100%;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Estado de transición: usado tanto al entrar (arranca aquí y se quita)
   como al salir (se añade antes de pasar a display:none). El desplazamiento
   vertical sutil + la curva de easing es lo que le da el aire "cuidado". */
.nn-grid-item.nn-saliendo {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
}

.nn-grid-item.nn-oculto {
    display: none;
}

/* Tarjeta de proyecto: ya sin tilt ni chincheta, recta — pedido 12/09/2026 */
/* Todas las tarjetas del feed con la misma proporción horizontal (antes
   cada una mantenía la proporción natural de su propia imagen) — recorta
   con object-fit:cover en vez de deformar. Proporción 4:3 elegida a ojo,
   dentro de lo "horizontal" pedido — revisar con Marta si prefiere otra
   (3:2, 16:9...). Pedido 12/09/2026. */
.nn-card-imagen {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.nn-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tarjeta con "dibujo" + foto real al hover — prueba pedida por Marta
   12/09/2026. Por defecto se ve el icono/ilustración del proyecto (la
   imagen destacada). Al hacer hover (o dar foco por teclado, para que no
   sea solo cosa de ratón) se funde con la foto real del proyecto, que ya
   estaba debajo a opacidad 0.
   15/09/2026: se quita el mix-blend-mode:multiply y la máscara circular
   que difuminaba el borde — eran un apaño temporal para cuando el dibujo
   era un PNG sin transparencia real. Al pasar a SVG (con su propio fondo
   transparente) ya no hace falta ninguno de los dos. */
.nn-card-imagen--con-dibujo {
    background-color: var(--nn-color-fondo);
}

.nn-card-imagen__dibujo,
.nn-card-imagen__foto {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
}

.nn-card-imagen__dibujo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nn-card-imagen__dibujo img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.nn-card-imagen__foto {
    opacity: 0;
}

.nn-grid-item:hover .nn-card-imagen__foto,
.nn-grid-item:focus-visible .nn-card-imagen__foto {
    opacity: 1;
}

.nn-grid-item:hover .nn-card-imagen__dibujo,
.nn-grid-item:focus-visible .nn-card-imagen__dibujo {
    opacity: 0;
}

.nn-grid-item-info {
    margin-top: 12px;
    text-align: center; /* pedido 12/09/2026 — antes a la izquierda; revertido a centrado a petición de Marta el mismo día */
}

.nn-grid-item-titulo {
    font-weight: 700; /* bold, pedido 12/09/2026 */
    font-family: var(--nn-fuente-titulos);
    font-size: 1rem;
    margin: 0;
}

.nn-grid-item-categoria {
    font-size: 0.75rem;
    color: #888;
    margin: 2px 0 0;
}

/* Post-it: ajustado al contenido, con un máximo en píxeles según la
   orientación de la imagen (vertical permite algo más de ancho porque,
   al ser estrecha por naturaleza, no se hace tan grande como una horizontal). */
.nn-postit-tilt {
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
}

.nn-postit-caja {
    transition: border-color 0.2s ease;
    /* Rediseño 14/09/2026, corregido el mismo día: fuera el lima (#C5F533,
       último resto de ese verde antiguo) Y fuera la inclinación aleatoria
       — pedido "recuadros normales". El post-it se funde con el fondo y
       lleva un contorno fino (0.5px, mismo grosor pedido para esta línea).
       Se probó una esquinita doblada en vez de la chincheta de antes, pero
       se quitó el mismo día: ahora es un recuadro liso, sin ningún adorno
       en la esquina.
       15/09/2026: el contorno pasa de --nn-color-oscuro-contrario (el
       color OPUESTO al idioma activo — igual que el cursor en hover) a
       --nn-color-oscuro (el color DEL idioma activo: verde en español,
       azul en inglés) — pedido "al final" así, junto con la tinta del
       dither de abajo (mismo cambio en nn-archive.js). */
    background-color: var(--nn-color-fondo);
    border: 0.5px solid var(--nn-color-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 66.6%; /* límite de seguridad en pantallas estrechas */
    gap: 8px;
    padding: 50px 40px 30px;
}

.nn-postit-titulo-integrado {
    /* Mismo color y peso que ".nn-grid-item-categoria" (categorías del
       feed), pedido 14/09/2026 — se deja la familia y el tamaño como
       estaban, que eso no se pidió cambiar. */
    font-family: var(--nn-fuente-titulos);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    color: #888;
    margin: 0;
}

.nn-postit-imagen-dither {
    /* mix-blend-mode:multiply ya no hace falta — pedido 14/09/2026: el
       dither ahora se recolorea en el propio JS (nn-archive.js) usando
       transparencia real por píxel (alpha), no blanco+multiply, así que
       el color de la tinta sale exacto sin depender de lo que haya debajo. */
    display: block;
    height: auto;
}

.nn-postit-imagen-dither.nn-postit-imagen-vertical {
    max-height: 200px;
    width: auto;
}

.nn-postit-imagen-dither.nn-postit-imagen-horizontal {
    max-width: 200px;
}

.nn-postit-texto-preview {
    font-family: var(--nn-fuente);
    font-size: 0.8rem;
    text-align: center;
    color: #1a1a1a;
    margin: 0;
    max-width: 200px;
}

@media (max-width: 768px) {
    .nn-archivo-grid {
        grid-template-columns: 1fr;
    }

    /* Ya no hace falta forzar aquí que se enseñen todos los divisores: en
       1 columna nn-archive.js ya calcula "fin de fila" cada 1 elemento
       (mismo mecanismo que en escritorio cada 3, ver el comentario junto a
       ".nn-grid-divisor" más arriba) y les añade la clase ".nn-visible"
       igual que en cualquier otro ancho — pedido 15/09/2026. */
}

/* ==========================================================================
   Popup del post-it
   ========================================================================== */
.nn-postit-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nn-postit-modal[hidden] {
    display: none;
}

.nn-postit-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.nn-postit-modal-contenido {
    position: relative;
    background: #fff;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.nn-postit-modal-imagen {
    width: auto;
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
}

.nn-postit-modal-titulo {
    font-family: var(--nn-fuente-titulos); /* título, Crimson Pro */
    margin: 0 0 12px;
}

.nn-postit-modal-texto {
    font-family: var(--nn-fuente);
    line-height: 1.6;
    color: #555;
}

.nn-postit-modal-cerrar {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #333;
}

/* ==========================================================================
   Secciones de la home (proyectos, estudio...)
   ========================================================================== */
.nn-home-seccion {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.nn-home-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 20px;
}

.nn-home-cabecera h2 {
    /* Título → Crimson Pro (var(--nn-fuente-titulos)), pedido 12/09/2026:
       ya lo cubriría la regla general "h1, h2, h3..." de más arriba, pero
       se deja explícito aquí igual que en el resto de títulos con clase
       propia, para que sea igual de fácil de encontrar y revertir. */
    font-family: var(--nn-fuente-titulos);
    font-size: 1.8rem;
    margin: 0 0 8px;
}

.nn-home-cabecera p {
    margin: 0;
    color: #555;
    max-width: 500px;
}

.nn-home-ver-todos {
    font-size: 0.85rem;
    white-space: nowrap;
    color: #1a1a1a;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .nn-home-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Retícula de proyectos: 12 columnas, colapsa a cascada en móvil */
.nn-home-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
}

.nn-home-proyecto img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.nn-home-proyecto-titulo {
    /* Título → Crimson Pro (var(--nn-fuente-titulos)), pedido 12/09/2026. */
    font-family: var(--nn-fuente-titulos);
    font-size: 1.1rem;
    margin: 0 0 4px;
}

.nn-home-proyecto-meta {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 8px;
}

.nn-home-ver-mas {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .nn-home-grid {
        display: block; /* cascada: se apilan, el grid-column: span de cada tarjeta deja de aplicar */
    }

    .nn-home-proyecto {
        margin-bottom: 40px;
    }
}

/* Sección "El Estudio": imagen + texto en dos columnas, apilado en móvil */
.nn-home-estudio-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.nn-home-estudio-imagen {
    width: 100%;
    height: auto;
    display: block;
}

.nn-home-estudio-texto {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

@media (max-width: 768px) {
    .nn-home-estudio-grid {
        grid-template-columns: 1fr;
    }
}

/* Header y footer fijos en TODO el sitio (remodelación 08/09/2026). Como
   quedan pegados arriba/abajo tapando el contenido, se compensa con
   padding en el body — excepto en la home, que ya gestiona su propio
   espacio en el CSS del bloque de portada (.nn-landing-hero tiene su
   propio padding-top/bottom, pensado para el alto real del header/footer
   fijos ahí). El id "header" y la clase "ct-header" se conservan por
   costumbre del proyecto aunque el tema ya no sea Blocksy; no tienen
   función especial aquí. */
#header.ct-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
}

.nn-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 500;
}

body:not(.home) {
    padding-top: var(--nn-header-alto-movil);
    padding-bottom: 44px;
}

@media (min-width: 690px) {
    body:not(.home) {
        padding-top: var(--nn-header-alto);
    }
}

/* Sección final "Trabaja con nosotros" */
.nn-home-trabaja {
    text-align: center;
}

.nn-home-trabaja h2 {
    /* Título → Crimson Pro (var(--nn-fuente-titulos)), pedido 12/09/2026. */
    font-family: var(--nn-fuente-titulos);
    font-size: 1.8rem;
    margin: 0 0 30px;
}

.nn-home-trabaja-texto {
    /* Antes escrito a mano ('Crimson Pro', serif) en vez de usar la
       variable — así no se actualizaba con la prueba de tipografía de
       Marta (12/09/2026). Pasado a var(--nn-fuente) para que todo el
       sitio cambie de un único sitio, y así también revierte de un único
       sitio. */
    font-family: var(--nn-fuente);
    font-size: 1.6rem;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto 40px;
    color: #1a1a1a;
}

.nn-home-trabaja-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nn-home-boton-secundario {
    font-size: 0.9rem;
    color: #555;
    text-decoration: underline;
}

.nn-home-boton-primario {
    font-size: 0.9rem;
    padding: 10px 24px;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    color: #1a1a1a;
    text-decoration: none;
    background-color: var(--nn-color-oscuro); /* antes lima */
    border-color: var(--nn-color-oscuro);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nn-home-boton-primario:hover {
    background-color: transparent;
    border-color: #1a1a1a;
}

/* ==========================================================================
   Portada (front-page.php)
   Trasladado aquí desde el <style> del bloque "HTML personalizado" el
   09/09/2026, al mover ese bloque al tema (ver front-page.php y
   nn_video_home() en functions.php). El bloque desktop se deja tal cual
   estaba; lo que cambia es el bloque móvil — ver el comentario en la media
   query de abajo.
   ========================================================================== */
.nn-landing-hero {
    width: 100vw;
    height: 100vh;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 40px;
    /* Espacio para que el texto no quede debajo del header/footer fijos.
       09/09/2026: antes eran números sueltos (82px / 71px) calculados a
       mano en algún momento anterior — el alto del header/footer ha
       cambiado varias veces desde entonces, así que ya no había garantía
       de que siguieran siendo correctos. Recalculado a partir de las
       variables reales de alto del header/footer (--nn-header-alto /
       --nn-footer-alto, iguales entre sí — ver sección 1 y .nn-footer)
       más el mismo margen de aire que había antes (31px / 20px), así que
       el resultado en pantalla no cambia hoy pero queda atado a esas
       variables: si el header o el footer vuelven a cambiar de alto, este
       padding se recalcula solo. */
    padding-top: calc(var(--nn-header-alto) + 31px);
    padding-bottom: calc(var(--nn-footer-alto) + 20px);
    overflow: hidden;
}

.nn-landing-frase {
    /* Tratada como "título" → Crimson Pro (var(--nn-fuente-titulos)),
       12/09/2026 — es la frase grande de portada, no un párrafo de texto
       normal; si Marta la quiere en Satoshi como el resto de los textos,
       basta con volver a poner var(--nn-fuente) aquí. */
    font-family: var(--nn-fuente-titulos);
    font-size: 3rem;
    line-height: 1.4;
    max-width: 900px;
    text-align: center;
    margin: 0;
    color: #1a1a1a;
}

.nn-landing-subtitulo {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 500px;
    text-align: center;
    color: #777;
    margin: 24px 0 0;
}

.nn-hover-video {
    /* 09/09/2026: era inline-block — eso convierte cada palabra/frase en
       un bloque atómico que el navegador no puede partir por dentro al
       ajustar el párrafo a una línea. "diseñamos e investigamos" son 3
       palabras dentro de un solo enlace, así que con inline-block todo el
       grupo tenía que caber entero en el hueco que quedara en esa línea o
       si no se salía por el borde — más visible en anchos "intermedios"
       (tablet) donde casi cabía pero no del todo, cortando parte del
       texto. inline deja que el párrafo parta la línea donde haga falta,
       letra a letra si toca, como el resto del texto normal. */
    display: inline;
    text-decoration: none;
    color: inherit;
}

.nn-letra {
    display: inline-block;
    white-space: pre;
    color: #1a1a1a;
    animation: nn-entrada-letra 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nn-entrada-letra {
    0%   { color: #1a1a1a; transform: translateY(0); }
    49%  { color: #1a1a1a; }
    50%  { color: var(--nn-color-oscuro); transform: translateY(-3px); } /* antes lima */
    100% { color: var(--nn-color-oscuro); transform: translateY(0); }
}

.nn-video-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50vh;
    aspect-ratio: 9 / 16;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.nn-video-overlay.is-active {
    opacity: 1;
}

/* 08/09/2026: cada carrusel tiene dos <video> apilados uno encima del
   otro (misma caja, position:absolute) en vez de uno solo — mientras se
   ve uno, el otro ya está cargando el siguiente clip por debajo, listo
   para aparecer. nn-home.js cruza su opacidad (is-visible) en vez de
   cortar en seco de un vídeo a otro, que era lo que daba el salto/
   pantalla negra al cambiar de clip. */
.nn-video-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.nn-video-capa.is-visible {
    opacity: 1;
}

/* Vídeo rotatorio: oculto en escritorio, visible solo en móvil/tablet */
.nn-video-movil {
    display: none;
}

@media (max-width: 999.98px) {
    .nn-landing-frase {
        font-size: 25px;
        line-height: 28px;
    }

    .nn-landing-subtitulo {
        font-size: 14px;
        line-height: 14px;
        /* 09/09/2026: .nn-landing-hero (más abajo) ya pone gap:25px entre
           TODOS sus hijos en columna — un margin-top normal se suma a eso
           en vez de sustituirlo, así que 18px de margin-top daban 25+18 =
           43px reales entre la frase y la nota al pie (el hueco de más
           que notaste). Con margin negativo se resta del gap en vez de
           sumarse: 25px (gap) - 7px = 18px exactos. */
        margin-top: -7px;
    }

    /* 09/09/2026 — rehecho de cero: antes el vídeo iba a pantalla completa
       en horizontal, fijo (position:fixed) pegado arriba y a sangre
       (ancho:100%, sin margen), y el texto se calculaba con un padding-top
       aparte para dejarle hueco debajo — de ahí venía el bug de que sobraba
       alto y obligaba a hacer scroll. Ahora todo va en flujo normal, en
       columna: vídeo vertical + texto, uno debajo del otro, con el mismo
       margen (25px) alrededor de todo el bloque, así que no hay dos sitios
       distintos calculando el mismo hueco. */
    .nn-landing-hero {
        width: 100%;
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        margin-right: 0;
        padding: 25px;
        padding-top: calc(var(--nn-header-alto-movil) + 25px);
        gap: 25px;
        overflow: visible;
    }

    /* En móvil el vídeo ya está siempre visible arriba — el hover-preview
       de escritorio no tiene sentido aquí (no hay ratón) */
    .nn-video-overlay {
        display: none;
    }

    /* 08/09/2026 — vuelto a plantear: las dos versiones anteriores hacían
       que .nn-video-movil ocupara "todo el hueco vertical que sobrara"
       (flex:1 tirando de TODO el espacio libre de .nn-landing-hero). Eso
       tenía dos problemas a la vez, los dos reportados: (1) la caja no
       tenía ninguna relación con 9:16 — su forma salía de lo que sobrara
       de ancho/alto en cada pantalla, así que en pantallas anchas y no
       muy altas quedaba ancha y corta en vez de vertical, justo lo
       contrario de "la misma proporción del área de visualización que en
       escritorio"; y (2) al no tener límite, en pantallas donde el vídeo
       "ganaba" mucho espacio no quedaba margen fiable para la frase y la
       nota al pie, que podían acabar recortadas o fuera de la vista.

       Ahora .nn-video-movil usa EXACTAMENTE el mismo criterio que la
       vista previa de escritorio (.nn-video-overlay, más arriba: height
       fijo + aspect-ratio:9/16, ancho derivado de ahí) en vez de flex
       para decidir su tamaño — así la "ventana" por la que se ve el
       vídeo tiene siempre la misma forma vertical se mire desde donde se
       mire, y su alto queda acotado (50vh) en vez de comerse todo el
       espacio libre, dejando sitio garantizado para el texto de debajo.
       Si el vídeo en sí no es 9:16 (como el flat-lay horizontal de una
       de las palabras), se recorta con object-fit:cover dentro de esa
       ventana — se pierde parte del encuadre del vídeo, no la forma de
       la ventana, que es lo que se pidió. */
    .nn-video-movil {
        display: block;
        position: relative;
        order: -1;
        flex: 0 0 auto;
        height: 50vh;
        aspect-ratio: 9 / 16;
        width: auto;
        max-width: 100%;
        overflow: hidden;
        background-color: var(--nn-color-fondo);
    }
}

/* 09/09/2026: en tablet (690–999.98px) el header/footer fijos ya pasan a
   su alto de escritorio (--nn-header-alto, 51px — ver @media 690px más
   arriba), pero el bloque de arriba seguía calculando el padding-top con
   --nn-header-alto-movil (39px) en todo el rango <1000px. Eran 12px de
   menos de aire de los que tocaban — no llegaba a tapar el texto del
   todo, pero sí lo dejaba pegado al header más de lo debido. */
@media (min-width: 690px) and (max-width: 999.98px) {
    .nn-landing-hero {
        padding-top: calc(var(--nn-header-alto) + 25px);
    }
}