:root {
    --tinta: #0B0C10;
    --papel: #FFFFFF;
    --grafito: #7A889B;
    --borde: #222632;
    --neon: #39FF14;
    --display: 'Dela Gothic One', sans-serif;
    --texto: 'JetBrains Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
}

html {
    overflow-x: clip; /* la portada de Nosotros sale de la columna hasta los bordes de la ventana */
}

body {
    background: var(--tinta);
    color: var(--papel);
    font: 1rem/1.7 var(--texto);
    max-width: 42rem;
    margin: 0 auto;
    --aire: clamp(3rem, 10vw, 7rem);
    padding: var(--aire) 1.25rem 3rem;
}

a {
    color: var(--papel);
    text-underline-offset: 0.25em;
}

a:hover {
    color: var(--neon);
}

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

/* CRT */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(transparent 0 2px, rgba(255, 255, 255, 0.035) 2px 3px);
}

/* Navegación: arriba a la derecha de la ventana, encima de la portada en Nosotros */
nav {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1.25rem;
    font-size: 0.8125rem;
}

nav a {
    color: var(--grafito);
    text-decoration: none;
}

/* Ícono de Instagram (menú y footer): mismo color que los enlaces, neón al pasar el cursor */
.instagram {
    display: inline-flex;
    vertical-align: middle;
    color: var(--grafito);
}

.instagram:hover {
    color: var(--neon);
}

/* Página actual entre < >, como en el mapa del sitio */
nav a[aria-current], footer a[aria-current] {
    color: var(--papel);
}

nav a[aria-current]::before, footer a[aria-current]::before { content: "< "; color: var(--neon); }
nav a[aria-current]::after, footer a[aria-current]::after { content: " >"; color: var(--neon); }

/* Cabecera */
html { overflow-x: clip; } /* la portada de Nosotros usa 100vw, que cuenta la barra de scroll */

header {
    position: relative;
    margin-bottom: 5rem;
    overflow-x: clip; /* el sello rotado (.hanko) no debe abrir scroll horizontal */
}

/* El SVG es el mapache recortado sobre negro: se invierte la máscara para pintarlo en blanco.
   Va en dos capas para poder mover la oreja derecha: .cara (todo menos la oreja) y .oreja.
   Ambas comparten el mismo corte en la base de la oreja; la oreja se inclina (sesgo) sobre esa línea,
   así los puntos del corte nunca se mueven y no se abre ninguna rendija.
   Coordenadas sobre el SVG de 736×660; el 3/97% reemplaza al inset que quita el filo del SVG. */
.logo {
    position: relative;
    display: block;
    width: clamp(4rem, 14vw, 6rem);
    aspect-ratio: 736 / 660;
    margin-bottom: 1.5rem;
}

.logo > span {
    position: absolute;
    inset: 0;
    background: var(--papel);
    -webkit-mask: url(assets/Logo.svg) center / contain no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: url(assets/Logo.svg) center / contain no-repeat exclude, linear-gradient(#000 0 0);
}

.cara {
    clip-path: polygon(3% 3%, 66.03% 3%, 66.03% 17.27%, 89.67% 46.97%, 97% 46.97%, 97% 97%, 3% 97%);
}

.oreja {
    clip-path: polygon(66.03% 17.27%, 66.03% 3%, 97% 3%, 97% 46.97%, 89.67% 46.97%);
    transform-origin: 80% 35%;
    animation: rascar 7s 3s infinite;
}

/* Tres sacudidas rápidas de la oreja y luego quieta.
   rotate(48.4deg) … rotate(-48.4deg) alinea el sesgo con el corte de la base (48.4° de inclinación),
   así skewX mueve la punta de la oreja sin mover la línea donde se une a la cabeza. */
@keyframes rascar {
    0%, 85%, 97%, 100% { transform: rotate(48.4deg) skewX(0deg) rotate(-48.4deg); }
    87%, 91%, 95% { transform: rotate(48.4deg) skewX(-14deg) rotate(-48.4deg); }
    89%, 93% { transform: rotate(48.4deg) skewX(4deg) rotate(-48.4deg); }
}

/* Parpadeo: un párpado color fondo baja sobre cada ojo (< >). Como hereda la máscara
   de .cara, solo tapa el ojo y no el resto de la cara. */
.cara::before,
.cara::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 11%;
    height: 17%;
    background: var(--tinta);
    transform: scaleY(0);
    transform-origin: top;
    animation: parpadeo 3s 1.5s infinite;
}

.cara::before { left: 28.8%; }
.cara::after { left: 64.1%; }

/* El _ del título parpadea como cursor de terminal */
@keyframes cursor {
    50% { opacity: 0; }
}

@keyframes parpadeo {
    0%, 93%, 100% { transform: scaleY(0); }
    96.5% { transform: scaleY(1); }
}

h1 {
    font: clamp(2.5rem, 13vw, 6.5rem)/0.95 var(--display);
    letter-spacing: -0.02em;
}

h1 span {
    animation: cursor 2s steps(1) infinite;
    color: var(--neon);
    text-shadow: 0 0 8px var(--neon), 0 0 24px rgba(57, 255, 20, 0.5);
}

header p {
    color: var(--grafito);
    margin-top: 1.25rem;
    max-width: 40ch;
}

.hanko {
    position: absolute;
    top: 0;
    right: 0.5rem;
    width: 4rem;
    transform: rotate(-8deg);
    animation: estampar 0.5s 0.3s cubic-bezier(0.3, 1.6, 0.6, 1) backwards;
}

@keyframes estampar {
    from {
        transform: rotate(-20deg) scale(2.2);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hanko, .cara::before, .cara::after, .oreja, h1 span { animation: none; }
}

/* Bitácora */
h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 1rem var(--texto);
    font-weight: 700;
    color: var(--grafito);
    margin-bottom: 2.5rem;
}

h2::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--borde);
}

article {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    column-gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.num {
    font: 700 2.25rem/1 var(--texto);
    color: var(--grafito);
}

time, .fecha {
    white-space: nowrap;
    grid-column: 1;
    color: var(--grafito);
    font-size: 0.875rem;
}

article h3 {
    grid-column: 2;
    grid-row: 1;
    font: 700 1.25rem/1.3 var(--texto);
    margin-bottom: 0.5rem;
}

article p {
    grid-column: 2;
    grid-row: 2 / span 2;
    color: var(--papel);
    opacity: 0.85;
}

/* Todas las imágenes y videos del blog: misma franja panorámica, recortada al centro */
article video, article img {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    margin-top: 1rem;
    border: 1px solid var(--borde);
}

/* Entrada publicada: toda la entrada es clicable a través del enlace del título */
article {
    position: relative;
}

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

article h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Entrada anunciada, aún sin publicar */
.pronto {
    opacity: 0.55;
}

/* Hover en una entrada: el número se enciende en neón y el título avanza un paso */
@media (hover: hover) {
    article .num,
    article h3 {
        transition: color 0.2s, text-shadow 0.2s, transform 0.2s;
    }

    article:not(.pronto):hover .num {
        color: var(--neon);
        text-shadow: 0 0 12px rgba(57, 255, 20, 0.5);
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    article:not(.pronto):hover h3 {
        transform: translateX(0.375rem);
    }
}

/* Detalle propio de cada sección, sin salir de la paleta */

/* Devlogs: línea de tiempo tipo commits; punto lleno = publicado, hueco = en camino */
.devlogs article {
    position: relative;
    margin-bottom: 0;
    padding: 0 0 3.5rem 1.5rem;
    border-left: 1px solid var(--borde);
}

.devlogs article::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.75rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
}

.devlogs .pronto::before {
    background: var(--tinta);
    border: 1px solid var(--grafito);
    box-shadow: none;
}

/* Audio: forma de onda en lugar de la línea del título */
.audio h2::after {
    height: 1.25rem;
    border: 0;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20' fill='%2339FF14'><rect x='0' y='8.5' width='2' height='3'/><rect x='4' y='3.5' width='2' height='13'/><rect x='8' y='3.5' width='2' height='13'/><rect x='12' y='7.0' width='2' height='6'/><rect x='16' y='8.0' width='2' height='4'/><rect x='20' y='6.5' width='2' height='7'/><rect x='24' y='5.0' width='2' height='10'/><rect x='28' y='8.5' width='2' height='3'/><rect x='32' y='3.0' width='2' height='14'/><rect x='36' y='2.0' width='2' height='16'/><rect x='40' y='6.0' width='2' height='8'/><rect x='44' y='6.5' width='2' height='7'/><rect x='48' y='6.5' width='2' height='7'/><rect x='52' y='8.0' width='2' height='4'/><rect x='56' y='8.5' width='2' height='3'/><rect x='60' y='4.5' width='2' height='11'/><rect x='64' y='2.0' width='2' height='16'/><rect x='68' y='5.5' width='2' height='9'/><rect x='72' y='5.5' width='2' height='9'/><rect x='76' y='3.5' width='2' height='13'/><rect x='80' y='6.0' width='2' height='8'/><rect x='84' y='8.5' width='2' height='3'/><rect x='88' y='7.0' width='2' height='6'/><rect x='92' y='4.5' width='2' height='11'/><rect x='96' y='6.0' width='2' height='8'/><rect x='100' y='5.0' width='2' height='10'/><rect x='104' y='1.5' width='2' height='17'/><rect x='108' y='4.0' width='2' height='12'/><rect x='112' y='8.0' width='2' height='4'/><rect x='116' y='7.0' width='2' height='6'/></svg>") repeat-x left center / auto 100%;
    opacity: 0.7;
}

/* Reviews: calificación de 0 a 5 */
.nota {
    grid-column: 2;
    grid-row: 4;
    margin-top: 0.75rem;
    color: var(--neon);
    letter-spacing: 0.3em;
}

/* Lab: cada entrada es un experimento con su código (exp 03) */
.lab .num {
    position: relative;
}

.lab .num::before {
    content: "exp";
    position: absolute;
    bottom: 100%;
    left: 0;
    font-size: 0.75rem;
    color: var(--neon);
}

/* Noticias: número con una flecha hacia afuera, es contenido que apunta a otro lado */
.noticias .num::after {
    content: "↗";
    margin-left: 0.25rem;
    color: var(--neon);
}

/* Nosotros: imagen de borde a borde con el título encima */
.heroe {
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    min-height: clamp(26rem, 62vw, 46rem);
    margin: calc(-1 * var(--aire)) calc(50% - 50vw) 5rem;
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.heroe img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    z-index: -2;
}

/* Oscurece el lado del texto y funde la imagen con el fondo al final */
.heroe::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(transparent 40%, rgba(11, 12, 16, 0.85) 72%, var(--tinta)),
        linear-gradient(90deg, rgba(11, 12, 16, 0.6), transparent 60%);
}

/* Línea neón parcial al pie de la imagen */
.heroe::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45%;
    height: 3px;
    background: var(--neon);
    box-shadow: 0 0 12px var(--neon);
}

.heroe > div {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.heroe p {
    color: var(--papel);
    opacity: 0.85;
}

section + section {
    margin-top: 4rem;
}

.lineas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    padding: 0;
    list-style: none;
}

.lineas li {
    padding-left: 1rem;
    border-left: 3px solid var(--neon);
    color: var(--grafito);
    font-size: 0.875rem;
}

.lineas strong {
    display: block;
    margin-bottom: 0.5rem;
    font: 1.5rem/1 var(--display);
    color: var(--papel);
}

.lineas strong a {
    text-decoration: none;
}

/* Sección sin entradas */
.vacio {
    color: var(--grafito);
}

/* Página de una entrada */
.volver {
    color: var(--grafito);
    font-size: 0.875rem;
    text-decoration: none;
}

.entrada h1 {
    margin-top: 2rem;
    font: clamp(1.75rem, 6vw, 2.75rem)/1.15 var(--display);
    letter-spacing: 0;
}

.meta {
    margin-top: 1rem;
    color: var(--grafito);
    font-size: 0.875rem;
}

.entrada .nota {
    display: block;
}

.aviso {
    margin-top: 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--grafito);
    color: var(--grafito);
    font-size: 0.875rem;
}

.entradilla {
    margin-top: 2rem;
    font-size: 1.125rem;
}

.entrada video,
.contenido img {
    display: block;
    width: 100%;
    margin-top: 2rem;
    border: 1px solid var(--borde);
}

.contenido {
    margin-top: 2rem;
    color: var(--papel);
    opacity: 0.9;
}

.contenido > * + * {
    margin-top: 1.25rem;
}

.contenido h2 {
    display: block;
    margin-top: 3rem;
    font: 700 1.25rem/1.3 var(--texto);
    color: var(--papel);
}

.contenido h2::after {
    content: none;
}

.contenido pre {
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--borde);
    font-size: 0.875rem;
}

.contenido blockquote {
    padding-left: 1rem;
    border-left: 3px solid var(--neon);
    color: var(--grafito);
}

.vecinas {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    font-size: 0.875rem;
}

.vecinas a:only-child:last-child:not(:first-child) {
    margin-left: auto;
}

/* Pie */
footer {
    margin-top: 5rem;
    color: var(--grafito);
    font-size: 0.875rem;
}

footer p {
    margin-top: 0.5rem;
}

@media (max-width: 30rem) {
    nav { gap: 0.25rem 0.75rem; font-size: 0.75rem; }
    /* menú corto en una línea: Noticias, Nosotros e Instagram quedan solo en el footer */
    nav a[href*="noticias"]:not([hreflang]), nav a[href*="nosotros"]:not([hreflang]), nav .instagram { display: none; }
    /* zona táctil: enlaces más altos sin mover el texto */
    nav { top: 0.5rem; }
    nav a:not(.instagram) { padding: 0.5rem 0; }
    :root { --grafito: #8996A8; } /* un poco más claro: el texto pequeño se lee mejor en pantalla chica */
    .hanko { width: 3rem; }
    article, .lineas { grid-template-columns: 1fr; }
    .num, time, .fecha, article h3, article p, article video, article img, .nota { grid-column: 1; grid-row: auto; }
    .num { font-size: 1.75rem; }
    time, .fecha { margin-bottom: 0.5rem; }
}