/* =====================================================================
   Portafolio Guillermo D — capa de rediseño (2026-08)
   ---------------------------------------------------------------------
   Se carga DESPUES de guillermod99_home.css y solo sobrescribe lo
   necesario. Para revertir todo el rediseño basta con quitar su <link>.

   Objetivos:
     1. Reforzar el CRT / Pip-Boy: scanlines, viñeta, bloom de fósforo
     2. Responsive real (hoy el nav simplemente desaparecía en móvil)
     3. Agrupar el software por categoría (25 elementos en lista plana)
     4. Nueva sección de trayectoria profesional
     5. Accesibilidad: foco visible, respeto a prefers-reduced-motion,
        áreas táctiles de 44px
   ===================================================================== */

:root {
    --glow-soft: 0 0 6px rgba(0, 255, 0, .35);
    --glow-mid: 0 0 12px rgba(0, 255, 0, .45);
    --line: rgba(0, 255, 0, .22);
    --line-strong: rgba(0, 255, 0, .45);
    --header-h: 76px;
}

/* =====================================================================
   1. CAPA CRT
   ===================================================================== */

/* Scanlines finas sobre todo el documento. pointer-events:none para que
   nunca interfieran con clics. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, .22) 0px,
            rgba(0, 0, 0, .22) 1px,
            transparent 1px,
            transparent 3px);
    mix-blend-mode: multiply;
    opacity: .55;
}

/* Viñeta + barrido lento, como el brillo de un tubo curvo. */
.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, .35) 88%,
            rgba(0, 0, 0, .7) 100%);
}

.crt-overlay::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 32vh;
    background: linear-gradient(to bottom,
            transparent,
            rgba(0, 255, 0, .045),
            transparent);
    animation: crt-sweep 7s linear infinite;
}

@keyframes crt-sweep {
    0% { transform: translateY(-40vh); }
    100% { transform: translateY(140vh); }
}

/* Bloom de fósforo en títulos */
.section-title,
.logo,
.hero h1 {
    text-shadow: var(--glow-mid);
}

.hero h2 {
    color: var(--secondary);
    text-shadow: var(--glow-soft);
}

/* =====================================================================
   2. CABECERA Y NAVEGACION MOVIL
   ===================================================================== */

/* Barra de estado tipo terminal: tres zonas fijas (identidad, pestañas,
   acciones) que nunca compiten por el espacio. */
header {
    position: sticky;
    top: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    background: rgba(0, 10, 0, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* Filo de fósforo bajo la barra */
header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent, rgba(0, 255, 0, .55), transparent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

/* Se saca del posicionamiento absoluto: chocaba con el nav al encoger. */
.language-switcher {
    position: static;
    top: auto;
    right: auto;
}

.lang-btn {
    min-width: 44px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botón hamburguesa: existía en el CSS pero nunca en el HTML, así que en
   móvil el nav se ocultaba y no quedaba forma de navegar. */
.mobile-menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary);
    font-size: 1.25rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, box-shadow .2s ease;
}

.mobile-menu-btn:hover,
.mobile-menu-btn[aria-expanded="true"] {
    background: rgba(0, 255, 0, .12);
    box-shadow: var(--glow-soft);
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 190;
}

.nav-backdrop.is-open { display: block; }

/* Anclas: sin esto el header pegajoso tapa el título de cada sección. */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
html { scroll-behavior: smooth; }

/* El logo se partía en dos líneas y descuadraba toda la cabecera: es
   Orbitron 2.2rem con letter-spacing, y al añadir los botones dejó de caber. */
.logo {
    white-space: nowrap;
    font-size: clamp(1.15rem, 3.4vw, 1.6rem);
    letter-spacing: 1px;
    line-height: 1;
}

/* Prompt delante del nombre: refuerza la lectura de "consola" y de paso
   ancla visualmente la zona izquierda. */
.logo::before {
    content: "> ";
    color: var(--secondary);
    opacity: .8;
}

/* Cero flex-wrap: con 7 entradas la barra se partía en DOS FILAS entre
   980px y ~1080px. Ahora nunca envuelve; por debajo del umbral se pasa
   directamente al panel lateral. */
nav {
    min-width: 0;
    justify-self: end;
}

nav ul {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
}

/* Pestañas de terminal */
nav a {
    padding: 7px 10px;
    font-size: .78rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 3px;
    opacity: .78;
}

nav a:hover {
    opacity: 1;
    color: var(--primary);
    border-color: var(--line);
    background: rgba(0, 255, 0, .06);
}

/* El subrayado animado original compite con el nuevo estado activo */
nav a::after,
nav a.active::after { display: none; }

nav a.active {
    opacity: 1;
    color: var(--darker);
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
    box-shadow: var(--glow-soft);
}

/* Tramo intermedio: se aprieta antes de rendirse al panel lateral */
@media (max-width: 1180px) {
    nav a { padding: 6px 7px; font-size: .72rem; letter-spacing: .5px; }
    nav ul { gap: 1px; }
    header { gap: 12px; }
}

/* =====================================================================
   2b. HERO
   ===================================================================== */

/* .hero era flex sin gap: el texto y el terminal quedaban pegados. */
.hero {
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
    padding: 48px 0 72px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    flex: 1 1 46%;
    min-width: 0;
}

/* Cabecera de "archivo abierto" sobre el titular */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--secondary);
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(0, 255, 200, .05);
}

.hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: pulse-node 2s ease-in-out infinite;
}

.hero-content h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.14;
    margin: 0;
}

.hero-content h2 {
    font-size: clamp(.92rem, 1.7vw, 1.15rem);
    font-weight: 500;
    letter-spacing: .5px;
    margin: 0;
    padding-left: 13px;
    border-left: 2px solid var(--secondary);
}

.hero-content p {
    max-width: 52ch;
    margin: 0;
    opacity: .86;
    font-size: .95rem;
}

/* Cifras de un vistazo, leidas de la base */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    list-style: none;
    padding: 0;
}

.hero-stats li {
    flex: 1 1 96px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(0, 255, 0, .04);
}

.hero-stats b {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--primary);
    text-shadow: var(--glow-soft);
}

.hero-stats span {
    display: block;
    margin-top: 4px;
    font-size: .68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .7;
}

.hero-btns { margin-top: 6px; }

.hero-terminal {
    flex: 1 1 54%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* El contenido crecía sin límite y estiraba el hero */
    max-height: 460px;
    padding: 0;
}

.terminal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 255, 0, .04);
    flex: 0 0 auto;
}

.terminal-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.terminal-content::-webkit-scrollbar { width: 8px; }
.terminal-content::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 4px;
}

/* Cursor parpadeante al final del volcado: el terminal era estático */
.terminal-content::after {
    content: "_";
    color: var(--primary);
    animation: caret 1.1s step-end infinite;
}

@keyframes caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* =====================================================================
   2bb. ASCII PLAYGROUND (easter egg)
   Modal con aspecto de terminal antiguo: chasis, bisel y pantalla.
   Motor de render: play.core, de Andreas Gysin (ertdfgcvb).
   ===================================================================== */

/* El punto verde deja de ser decorativo y pasa a ser un disparador real */
.terminal-dot.dot-green {
    cursor: pointer;
    transition: box-shadow .25s ease, transform .2s ease;
}

.terminal-dot.dot-green:hover,
.terminal-dot.dot-green:focus-visible {
    transform: scale(1.3);
    box-shadow: 0 0 12px 3px rgba(0, 255, 0, .85);
}

.pg-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: clamp(10px, 3vw, 34px);
}

.pg-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------- la maquina */

.pg-machine {
    position: relative;
    width: min(1080px, 100%);
    height: min(760px, 100%);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: 12px;
    /* Plastico beige-verdoso envejecido, con luz cayendo desde arriba */
    background:
        linear-gradient(180deg, #2b3126 0%, #1c211a 55%, #141811 100%);
    border: 1px solid #3d4636;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -2px 6px rgba(0, 0, 0, .6),
        0 26px 70px rgba(0, 0, 0, .8),
        0 0 90px rgba(0, 255, 0, .1);
    animation: pg-encender .45s ease-out both;
}

@keyframes pg-encender {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

.pg-machine-top,
.pg-machine-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 4px 8px 10px;
}

.pg-machine-foot { padding: 10px 8px 2px; }

.pg-machine-title {
    flex: 1 1 auto;
    font-family: 'Orbitron', sans-serif;
    font-size: .74rem;
    letter-spacing: 3px;
    color: #8fa383;
    text-transform: uppercase;
}

.pg-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: pg-latido 2.4s ease-in-out infinite;
}

@keyframes pg-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.pg-power {
    width: 36px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #4a5442;
    background: linear-gradient(180deg, #39412f, #232a1d);
    color: #b6c9a8;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .5);
}

.pg-power:hover {
    color: var(--primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 12px rgba(0, 255, 0, .45);
}

/* Rejilla de ventilacion: detalle de carcasa */
.pg-vents {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,
            rgba(0, 0, 0, .45) 0 3px,
            transparent 3px 7px);
    opacity: .5;
}

.pg-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: .62rem;
    letter-spacing: 2px;
    padding: 3px 8px;
    border: 1px solid #4a5442;
    border-radius: 3px;
    color: #8fa383;
}

.pg-rotulo {
    font-size: .64rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8fa383;
    white-space: nowrap;
}

.pg-rotulo.is-propio {
    color: var(--primary);
    text-shadow: var(--glow-soft);
}

/* ------------------------------------------------------ bisel y pantalla */

.pg-bezel {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(180deg, #0f1310, #080b07);
    box-shadow:
        inset 0 0 0 1px #39412f,
        inset 0 6px 16px rgba(0, 0, 0, .9);
}

.pg-screen {
    position: relative;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #04160a 0%, #010702 78%, #000 100%);
    box-shadow: inset 0 0 60px rgba(0, 255, 0, .09);
}

.pg-screen-inner {
    position: absolute;
    inset: 0;
    padding: 10px;
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
    /* El renderizador escribe un <span> por fila: sin interlineado ajustado
       la trama del dibujo se rompe. */
    line-height: 1.0;
    letter-spacing: 0;
    font-size: clamp(.44rem, 1.15vw, .72rem);
    overflow: hidden;
    text-shadow: 0 0 6px rgba(0, 255, 0, .5);

    /* IMPRESCINDIBLE: el renderizador concatena los caracteres tal cual
       (`html += currCell.char`) y las celdas vacias son un espacio normal.
       Sin esto el navegador colapsa los espacios consecutivos y cada fila
       se desmorona hacia la izquierda: el dibujo se ve como basura. */
    white-space: pre;
    tab-size: 1;
}

/* Modo texto: la secuencia de arranque y las respuestas del shell */
.pg-screen-inner.is-log {
    font-size: clamp(.66rem, 1.5vw, .86rem);
    line-height: 1.7;
    white-space: pre-wrap;
    padding: clamp(14px, 3vw, 30px);
}

.pg-screen-inner.is-log div:empty::after { content: "\00a0"; }

/* Cristal: curvatura, scanlines propias y reflejo */
.pg-screen-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, .3) 0 1px,
            transparent 1px 3px),
        radial-gradient(ellipse at center,
            transparent 52%,
            rgba(0, 0, 0, .5) 88%,
            rgba(0, 0, 0, .85) 100%),
        linear-gradient(115deg,
            rgba(255, 255, 255, .05) 0 18%,
            transparent 42%);
    animation: pg-parpadeo 5.5s steps(2, end) infinite;
}

@keyframes pg-parpadeo {
    0%, 96%, 100% { opacity: 1; }
    97%           { opacity: .92; }
}

/* ------------------------------------------------------------- consola */

.pg-console {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 7px;
    border: 1px solid #3d4636;
    background: #0b0f09;
    cursor: text;
}

.pg-prompt {
    color: var(--primary);
    font-size: .74rem;
    white-space: nowrap;
    text-shadow: var(--glow-soft);
}

.pg-console input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font-family: 'Roboto Mono', monospace;
    font-size: .8rem;
    caret-color: var(--primary);
}

.pg-console input::placeholder { color: rgba(224, 224, 224, .3); }

@media (max-width: 640px) {
    .pg-machine { padding: 8px; border-radius: 11px; }
    .pg-bezel { padding: 8px; }
    .pg-machine-title { font-size: .6rem; letter-spacing: 1.5px; }
    .pg-prompt { display: none; }
    .pg-badge, .pg-rotulo { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-machine { animation: none; }
    .pg-screen-glass { animation: none; }
    .pg-led { animation: none; }
}

/* =====================================================================
   2c. BARRA DE DESPLAZAMIENTO
   Venia la del sistema, que rompia la ilusion de consola en cuanto la
   pagina pasaba de una pantalla.
   ===================================================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 0, .55) rgba(0, 12, 0, .9);
}

/* WebKit / Blink */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 12, 0, .9);
    /* Muescas de riel, como una guia de cinta */
    background-image: repeating-linear-gradient(to bottom,
            rgba(0, 255, 0, .13) 0 1px,
            transparent 1px 7px);
    border-left: 1px solid var(--line);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(0, 255, 0, .75),
            rgba(0, 200, 120, .6));
    border: 1px solid rgba(0, 255, 0, .85);
    border-radius: 2px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 255, 0, .35);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    box-shadow: 0 0 12px rgba(0, 255, 0, .65);
}

::-webkit-scrollbar-thumb:active { background: var(--secondary); }

/* La esquina entre las dos barras quedaba de color sistema */
::-webkit-scrollbar-corner { background: rgba(0, 12, 0, .9); }

/* =====================================================================
   3. TARJETA DE SOFTWARE AGRUPADA
   ===================================================================== */

.skill-group + .skill-group { margin-top: 18px; }

.skill-group-title {
    font-family: 'Orbitron', sans-serif;
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--line);
}

.skill-group-title::before {
    content: "> ";
    color: var(--primary);
}

/* Dentro de un grupo las herramientas van como chips: 25 elementos en
   lista vertical hacían la tarjeta desproporcionada frente a sus vecinas. */
.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.skill-chips li {
    font-size: .78rem;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(0, 255, 0, .05);
    white-space: nowrap;
}

.skill-chips li .yrs {
    color: var(--primary);
    opacity: .75;
    margin-left: 4px;
}

/* Las tarjetas de la rejilla de habilidades se alinean arriba: con
   contenidos de altura muy distinta, estirarlas deja huecos enormes. */
.skills-container { align-items: start; }

/* ---------------------------------------------------------------------
   Barras de nivel (Pip-Boy)
   language_skill existia en la base desde siempre y no se mostraba en
   ningun sitio: la tarjeta de Lenguajes era una lista de nombres.
   --------------------------------------------------------------------- */

.lang-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.lang-stat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.lang-stat-name {
    font-size: .86rem;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.lang-stat-meta {
    font-size: .74rem;
    color: var(--primary);
    opacity: .8;
    white-space: nowrap;
}

.lang-bar {
    position: relative;
    height: 11px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: rgba(0, 0, 0, .45);
    overflow: hidden;
}

/* Segmentado, como un medidor de consola en vez de una barra lisa */
.lang-bar > span {
    display: block;
    height: 100%;
    background:
        repeating-linear-gradient(90deg,
            var(--primary) 0 6px,
            transparent 6px 9px);
    box-shadow: 0 0 8px rgba(0, 255, 0, .5);
    animation: bar-fill 1s ease-out both;
    transform-origin: left center;
}

@keyframes bar-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* =====================================================================
   4. TRAYECTORIA PROFESIONAL
   ===================================================================== */

.timeline {
    position: relative;
    margin-top: 50px;
    padding-left: 34px;
}

/* Riel vertical */
.timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent,
            var(--line-strong) 8%,
            var(--line-strong) 92%,
            transparent);
}

.timeline-item {
    position: relative;
    padding: 18px 20px;
    margin-bottom: 26px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-left: 2px solid var(--line-strong);
    border-radius: 6px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.timeline-item:hover {
    transform: translateX(4px);
    border-color: var(--primary);
    box-shadow: var(--glow-soft);
}

/* Nodo sobre el riel */
.timeline-item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--darker);
    border: 2px solid var(--primary);
    box-shadow: var(--glow-soft);
}

.timeline-item.is-current::before {
    background: var(--primary);
    animation: pulse-node 2s ease-in-out infinite;
}

@keyframes pulse-node {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 255, 0, 0); }
}

.timeline-period {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: .82rem;
    color: var(--secondary);
    letter-spacing: .5px;
}

.timeline-duration { color: var(--text); opacity: .6; }

.timeline-badge {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.timeline-role {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.08rem;
    color: var(--primary);
    margin: 8px 0 4px;
    line-height: 1.35;
}

.timeline-modality {
    font-size: .78rem;
    opacity: .65;
    text-transform: capitalize;
}

.timeline-desc {
    margin-top: 10px;
    font-size: .92rem;
    line-height: 1.65;
}

.timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.timeline-tags span {
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(0, 255, 200, .08);
    border: 1px solid rgba(0, 255, 200, .25);
    color: var(--secondary);
}

/* =====================================================================
   5. ACCESIBILIDAD Y DETALLES DE USO
   ===================================================================== */

/* Antes no había ningún indicador de foco: navegar con teclado era ir
   a ciegas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    padding: 10px 16px;
    background: var(--darker);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

/* Áreas táctiles: los enlaces del nav y las redes quedaban por debajo del
   mínimo recomendado de 44px en pantallas táctiles. */
@media (pointer: coarse) {
    nav a,
    .social-link,
    .project-link,
    .certification-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
    .crt-overlay::before { display: none; }
}

/* =====================================================================
   6. RESPONSIVE
   Antes: 45 líneas en 3 breakpoints. Las rejillas, el terminal, el footer
   y el formulario no tenían tratamiento alguno.
   ===================================================================== */

@media (max-width: 1024px) {
    section { padding: 72px 0; }
    .hero { min-height: auto; padding: 40px 0 60px; }
    .services-grid,
    .projects-grid,
    .certifications-preview,
    .certifications-more-container {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 22px;
    }
}

@media (max-width: 980px) {
    /* Con 7 entradas, el logo y el selector de idioma, el nav horizontal
       deja de caber bastante antes de la tableta. */
    .mobile-menu-btn { display: inline-flex; }

    nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(82vw, 320px);
        height: 100dvh;
        padding: 84px 22px 30px;
        background: rgba(0, 12, 0, .97);
        border-left: 1px solid var(--line-strong);
        transform: translateX(100%);
        transition: transform .28s ease;
        z-index: 200;
        overflow-y: auto;
        display: block;
    }

    nav.is-open { transform: translateX(0); }

    nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    nav a {
        display: block;
        padding: 14px 12px;
        font-size: 1rem;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    nav a:hover,
    nav a.active {
        border-color: var(--line);
        background: rgba(0, 255, 0, .07);
    }

    /* El subrayado animado del nav de escritorio estorba en el panel */
    nav a::after,
    nav a.active::after { display: none; }

    .hero { flex-direction: column; gap: 40px; }
    .contact-container { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px; }
}

@media (max-width: 640px) {
    .container { padding: 16px; }
    section { padding: 56px 0; }

    .logo { font-size: 1.6rem; }
    .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .hero h2 { font-size: 1rem; }
    .section-title { font-size: 1.6rem; }

    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns .btn { width: 100%; text-align: center; }

    /* Único punto que provocaba desplazamiento horizontal real: el mínimo
       de 350px no cabe en un viewport de 375px con padding. */
    .projects-grid,
    .services-grid,
    .certifications-preview,
    .certifications-more-container,
    .skills-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .terminal-content { font-size: .74rem; }
    .terminal-content div { white-space: pre-wrap; word-break: break-word; }

    .timeline { padding-left: 26px; }
    .timeline-item { padding: 15px 15px; }
    .timeline-item::before { left: -24px; top: 20px; }
    .timeline-role { font-size: 1rem; }

    .contact-form,
    .form-control { width: 100%; }
}

@media (max-width: 380px) {
    .logo { font-size: 1.35rem; }
    .skill-chips li { font-size: .72rem; }
    .timeline-period { font-size: .76rem; }
}

/* Salvaguarda global: ninguna imagen o bloque ancho debe empujar el layout */
img,
video,
canvas,
svg { max-width: 100%; height: auto; }

body { overflow-x: hidden; }