/* =========================================================
   Fuentes autohospedadas (Fase 4) — sin peticiones externas.
   WOFF2 subset latin, font-display: swap (cero FOIT).
   ========================================================= */

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin-400.b636a65da4f0.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin-700.b636a65da4f0.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400.da03732a27e1.woff2") format("woff2");
}

/* =========================================================
    CYBERPUNK PROFESSIONAL THEME — DGüiza.dev
    Capa ADITIVA sobre main.css (HTML5 UP "Solid State").

    Reconstruida desde cero (iteración reiniciada).
    FASE 1 — Tokens, HUD y estructura global.
    Todo el tema vive en esta capa; main.css NO se modifica
    para el diseño (salvo los fixes de Fase 0).

    Índice
    ├─ 0.  Fixes Fase 0
    ├─ 1.  Tokens :root
    ├─ 2.  Base global (fondo / scanlines / rejilla / neón top)
    ├─ 3.  Selección y scrollbar
    ├─ 4.  Header HUD
    ├─ 5.  Banner HUD
    ├─ 6.  Wrappers (paneles + triángulos SVG re-tokenizados)
    ├─ 7.  Spotlight / imágenes
    ├─ 8.  Tipografía y enlaces
    ├─ 9.  Botones
    ├─ 10. Formularios
    ├─ 11. Menú lateral
    ├─ 12. Footer HUD
    ├─ 13. Terminal (Zen de Python)
    ├─ 14. Feedback mínimo (mensajes)
    ├─ 15. Animaciones HUD
    └─ 16. prefers-reduced-motion
   ========================================================= */


/* =========================================================
    0. FIXES FASE 0
   ========================================================= */

/* B2: @keyframes fadeIn referenciado por main.css:183
   (#header.scrolled #breadcrumbs) pero nunca definido. */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* B3: .style1 se usa en las plantillas pero main.css solo define
   .style2..style6. Se re-tokeniza con la paleta cyberpunk. */
.wrapper.style1 {
    background-color: #0a0e15;
}
.wrapper.spotlight.style1 {
    background-color: #101a2e;
}


/* =========================================================
    1. TOKENS :root
   ========================================================= */
:root {
    /* Fondos (void → panel, progresión de profundidad) */
    --cp-void:        #05070b;
    --cp-bg:          #0a0e15;
    --cp-panel:       #0e1420;
    --cp-panel-2:     #121a29;
    --cp-panel-3:     #172133;
    --cp-panel-4:     #1c2840;
    --cp-panel-5:     #223050;
    --cp-panel-6:     #283860;

    /* Paneles de spotlight (secciones destacadas) */
    --cp-spot:        #101a2e;
    --cp-spot-2:      #0d1728;
    --cp-spot-3:      #0b1426;

    /* Texto */
    --cp-fg:          #e6ecf5;
    --cp-fg-soft:     rgba(230, 236, 245, 0.75);
    --cp-fg-dim:      rgba(230, 236, 245, 0.45);
    --cp-fg-faint:    rgba(230, 236, 245, 0.28);

    /* Neones (énfasis, no relleno) */
    --cp-cyan:        #00e5ff;
    --cp-cyan-soft:   rgba(0, 229, 255, 0.16);
    --cp-violet:      #8b5cf6;
    --cp-magenta:     #ff3d8a;
    --cp-acid:        #a3ff12;

    /* Tipografías (Fase 4: JetBrains Mono + Inter autohospedadas) */
    --cp-font-head:   "JetBrains Mono", "Fira Code", "IBM Plex Mono",
                      "Courier New", monospace;
    --cp-font-body:   "Inter", "Source Sans Pro", Helvetica, sans-serif;
    --cp-font-mono:   "JetBrains Mono", ui-monospace, "Cascadia Mono",
                    "Fira Code", Consolas, "Courier New", monospace;

    /* Bordes y brillos */
    --cp-border:      rgba(230, 236, 245, 0.14);
    --cp-border-soft: rgba(230, 236, 245, 0.08);
    --cp-glow-cyan:   0 0 14px rgba(0, 229, 255, 0.35);
}


/* =========================================================
    2. BASE GLOBAL
   ========================================================= */

body {
    background-color: var(--cp-void);
    background-image:
        radial-gradient(1100px 550px at 12% -8%, rgba(0, 229, 255, 0.08), transparent 60%),
        radial-gradient(900px 450px at 100% -5%, rgba(139, 92, 246, 0.07), transparent 60%),
        radial-gradient(1100px 650px at 50% 112%, rgba(255, 61, 138, 0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--cp-fg);
    font-family: var(--cp-font-body);
}

/* Rejilla HUD de fondo */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Scanlines CRT */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0 2px,
        rgba(0, 0, 0, 0.12) 2px 3px
    );
    opacity: 0.3;
}

/* Neón superior: barra fija de gradiente en el borde del viewport.
   Se aplica sobre #header (elemento fijo) para que siempre esté visible. */
#header {
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--cp-cyan), var(--cp-violet), var(--cp-magenta)) 1;
}


/* =========================================================
    3. SELECCIÓN Y SCROLLBAR
   ========================================================= */

::selection {
    background: var(--cp-cyan);
    color: var(--cp-void);
    text-shadow: none;
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--cp-bg);
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.35);
    border-radius: 6px;
    border: 3px solid var(--cp-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.6);
}


/* =========================================================
    4. HEADER HUD
   ========================================================= */

#header {
    background-color: rgba(5, 7, 11, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0, 229, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.35);
}

#header.alt {
    background-color: rgba(5, 7, 11, 0.32);
    box-shadow: none;
}

/* Logo */
#header h1 {
    font-family: var(--cp-font-head);
    font-weight: 700;
}

/* Enlace "Menu" */
#header nav {
    font-family: var(--cp-font-head);
    color: var(--cp-fg);
}
#header nav a {
    color: var(--cp-fg-soft);
}
#header nav a:hover {
    color: var(--cp-cyan);
}

#header nav a[href="#menu"] {
    box-shadow: none;
    border: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: 5px;
    color: var(--cp-cyan);
    -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
#header nav a[href="#menu"]:hover {
    background-color: rgba(0, 229, 255, 0.12);
    box-shadow: var(--cp-glow-cyan);
}
#header nav a[href="#menu"]:active {
    background-color: rgba(0, 229, 255, 0.22);
}

/* Migas de pan */
#header #breadcrumbs {
    font-family: var(--cp-font-mono);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--cp-fg-dim);
}
#header #breadcrumbs a {
    color: var(--cp-fg-soft);
}
#header #breadcrumbs a:hover {
    color: var(--cp-cyan);
}
#header #breadcrumbs .breadcrumb-item:not(:last-child)::after {
    content: ' / ';
    color: var(--cp-cyan);
}


/* =========================================================
    5. BANNER HUD
   ========================================================= */

#banner h2 {
    font-family: var(--cp-font-head);
    font-weight: 700;
    font-size: 2.25em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(0, 229, 255, 0.35);
    text-shadow: 0 0 24px rgba(0, 229, 255, 0.25);
}

#banner p {
    font-family: var(--cp-font-head);
    font-weight: 200;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-fg-soft);
}

#banner .logo .icon {
    border: 2px solid var(--cp-cyan);
    background: rgba(0, 229, 255, 0.08);
    color: var(--cp-cyan);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45), inset 0 0 12px rgba(0, 229, 255, 0.25);
    -webkit-transition: box-shadow 0.3s ease, background-color 0.3s ease;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
#banner .logo .icon:hover {
    background: rgba(0, 229, 255, 0.18);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.7), inset 0 0 16px rgba(0, 229, 255, 0.35);
}

/* Fondo del banner sin imagen (las vistas usan #banner>header) */
@media screen and (max-width: 1280px) {
    #banner {
        background-color: var(--cp-bg);
        background-image: radial-gradient(900px 450px at 20% 0%, rgba(0, 229, 255, 0.10), transparent 55%);
        background-size: auto, cover;
        background-position: center, center;
    }
}


/* =========================================================
    6. WRAPPERS (paneles + triángulos SVG)
   ========================================================= */

#wrapper > header {
    background-color: var(--cp-bg);
}
@media screen and (max-width: 1280px) {
    #wrapper > header {
        background-color: var(--cp-bg);
        background-image: radial-gradient(900px 450px at 20% 0%, rgba(0, 229, 255, 0.10), transparent 55%);
    }
}
#wrapper > header h2 {
    font-family: var(--cp-font-head);
    border-bottom: 2px solid rgba(0, 229, 255, 0.3);
}
#wrapper > header p {
    font-family: var(--cp-font-head);
    font-weight: 200;
    color: var(--cp-fg-soft);
}

.wrapper {
    background-color: var(--cp-panel);
}

/* Triángulo base (.wrapper) */
.wrapper:before, .wrapper:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230e1420%3B' /%3E%3C/svg%3E");
}
.wrapper:before {
    box-shadow: inset 0 -1px 0 0 #0e1420, 0 1px 0 0 #0e1420;
}
.wrapper:after {
    box-shadow: inset 0 -1px 0 0 #0e1420, 0 1px 0 0 #0e1420;
}

/* .wrapper.style1 */
.wrapper.style1:before, .wrapper.style1:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230a0e15%3B' /%3E%3C/svg%3E");
}
.wrapper.style1:before {
    box-shadow: inset 0 -1px 0 0 #0a0e15, 0 1px 0 0 #0a0e15;
}
.wrapper.style1:after {
    box-shadow: inset 0 -1px 0 0 #0a0e15, 0 1px 0 0 #0a0e15;
}

/* .wrapper.style2 */
.wrapper.style2 {
    background-color: var(--cp-panel-2);
}
.wrapper.style2:before, .wrapper.style2:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23121a29%3B' /%3E%3C/svg%3E");
}
.wrapper.style2:before {
    box-shadow: inset 0 -1px 0 0 #121a29, 0 1px 0 0 #121a29;
}
.wrapper.style2:after {
    box-shadow: inset 0 -1px 0 0 #121a29, 0 1px 0 0 #121a29;
}

/* .wrapper.style3 */
.wrapper.style3 {
    background-color: var(--cp-panel-3);
}
.wrapper.style3:before, .wrapper.style3:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23172133%3B' /%3E%3C/svg%3E");
}
.wrapper.style3:before {
    box-shadow: inset 0 -1px 0 0 #172133, 0 1px 0 0 #172133;
}
.wrapper.style3:after {
    box-shadow: inset 0 -1px 0 0 #172133, 0 1px 0 0 #172133;
}


/* =========================================================
    7. SPOTLIGHT / IMÁGENES
   ========================================================= */

.wrapper.spotlight {
    background-color: var(--cp-spot);
}
.wrapper.spotlight:before, .wrapper.spotlight:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23101a2e%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight:before {
    box-shadow: inset 0 -1px 0 0 #101a2e, 0 1px 0 0 #101a2e;
}
.wrapper.spotlight:after {
    box-shadow: inset 0 -1px 0 0 #101a2e, 0 1px 0 0 #101a2e;
}

.wrapper.spotlight.style2 {
    background-color: var(--cp-spot-2);
}
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230d1728%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style2:before {
    box-shadow: inset 0 -1px 0 0 #0d1728, 0 1px 0 0 #0d1728;
}
.wrapper.spotlight.style2:after {
    box-shadow: inset 0 -1px 0 0 #0d1728, 0 1px 0 0 #0d1728;
}

.wrapper.spotlight.style3 {
    background-color: var(--cp-spot-3);
}
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230b1426%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style3:before {
    box-shadow: inset 0 -1px 0 0 #0b1426, 0 1px 0 0 #0b1426;
}
.wrapper.spotlight.style3:after {
    box-shadow: inset 0 -1px 0 0 #0b1426, 0 1px 0 0 #0b1426;
}

/* Imagen circular de los spotlights: anillo neón */
.wrapper.spotlight .image {
    border: 3px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.08), 0 0 32px rgba(0, 229, 255, 0.28);
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wrapper.spotlight .image:hover {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.12), 0 0 44px rgba(0, 229, 255, 0.45);
}


/* =========================================================
    8. TIPOGRAFÍA Y ENLACES
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cp-font-head);
    color: var(--cp-fg);
}

.major {
    font-family: var(--cp-font-head);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-fg);
}

a {
    color: var(--cp-cyan);
    -webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
a:hover {
    color: #33ecff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

.special {
    color: var(--cp-cyan);
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);
}
.special:hover {
    color: #33ecff;
    border-bottom-color: #33ecff;
}

blockquote {
    border-left: 4px solid var(--cp-cyan);
    background: rgba(0, 229, 255, 0.05);
    color: var(--cp-fg-soft);
}
blockquote footer {
    font-family: var(--cp-font-mono);
    font-size: 0.85em;
    color: var(--cp-fg-dim);
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
}


/* =========================================================
    9. BOTONES
   ========================================================= */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    font-family: var(--cp-font-head);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: none;
    border: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: 5px;
    background-color: transparent;
    color: var(--cp-cyan) !important;
    -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
    background-color: rgba(0, 229, 255, 0.12);
    border-color: var(--cp-cyan);
    box-shadow: var(--cp-glow-cyan);
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
    background-color: rgba(0, 229, 255, 0.22);
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
    background: linear-gradient(135deg, var(--cp-cyan), #00a8cc);
    border-color: transparent;
    color: var(--cp-void) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
    background: linear-gradient(135deg, #33ecff, #00c9ea);
    border-color: transparent;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.6);
}
input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
    background: linear-gradient(135deg, #00c9ea, #0090b0);
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
    color: var(--cp-fg-dim);
}


/* =========================================================
    10. FORMULARIOS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    background: rgba(230, 236, 245, 0.04);
    border: 2px solid var(--cp-border);
    border-radius: 4px;
    color: var(--cp-fg);
    padding: 0.75em 1em;
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--cp-cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.14), 0 0 14px rgba(0, 229, 255, 0.2);
}

label {
    font-family: var(--cp-font-head);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-fg-soft);
}

::-webkit-input-placeholder {
    color: var(--cp-fg-dim) !important;
}
:-moz-placeholder {
    color: var(--cp-fg-dim) !important;
}
::-moz-placeholder {
    color: var(--cp-fg-dim) !important;
}
:-ms-input-placeholder {
    color: var(--cp-fg-dim) !important;
}

/* Checkbox / radio */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    border: 2px solid rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.06);
    box-shadow: none;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background: var(--cp-cyan);
    border-color: var(--cp-cyan);
    color: var(--cp-void);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border-color: var(--cp-cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}


/* =========================================================
    11. MENÚ LATERAL
   ========================================================= */

#menu {
    background: rgba(5, 7, 11, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 10001;
}

#menu .inner {
    background: var(--cp-panel);
    border: 2px solid rgba(0, 229, 255, 0.25);
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 255, 0.15);
}

#menu h2 {
    font-family: var(--cp-font-mono);
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cp-cyan);
    border-bottom: 2px solid rgba(0, 229, 255, 0.25);
}

#menu .links li a {
    font-family: var(--cp-font-head);
    font-weight: 200;
    color: var(--cp-fg);
}
#menu .links li a:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--cp-cyan);
}

#menu .close {
    background-image: none;
    text-indent: 0;
    overflow: visible;
    color: transparent;
    font-family: var(--cp-font-mono);
}
#menu .close::after {
    content: '\2715';
    color: var(--cp-fg-dim);
}


/* =========================================================
    12. FOOTER HUD
   ========================================================= */

#footer {
    background-color: var(--cp-void);
}
@media screen and (max-width: 1280px) {
    #footer {
        background-color: var(--cp-void);
        background-image: none;
    }
}

#footer .inner {
    border-top: 2px solid rgba(0, 229, 255, 0.18);
}

#footer .inner .copyright {
    border-top-color: var(--cp-border);
}
#footer .inner .copyright li {
    border-left-color: var(--cp-border);
    color: var(--cp-fg-dim);
}
#footer .inner .copyright li a {
    color: var(--cp-fg-soft);
}
#footer .inner .copyright li a:hover {
    color: var(--cp-cyan);
}

/* Iconos de contacto */
ul.contact li:before {
    border: 2px solid rgba(0, 229, 255, 0.4);
    background: rgba(0, 229, 255, 0.06);
    color: var(--cp-cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}
ul.contact li a {
    color: var(--cp-fg-soft);
}
ul.contact li a:hover {
    color: var(--cp-cyan);
}

/* Enlaces legales */
.inline-list a {
    color: var(--cp-fg-soft);
}
.inline-list a:hover {
    color: var(--cp-cyan);
}


/* =========================================================
    13. TERMINAL (ZEN DE PYTHON)
   ========================================================= */

#zen-text {
    font-family: var(--cp-font-mono);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-left: 4px solid var(--cp-cyan);
    border-radius: 5px;
    color: var(--cp-acid);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.08);
    padding: 1.1rem;
}

/* Cursor de terminal */
#zen-text::after {
    content: '▊';
    display: inline-block;
    margin-left: 0.3em;
    color: var(--cp-acid);
    animation: cp-blink 1s step-end infinite;
}

/* Botones de la terminal usan la clase .btn (main.css:140) */
.actions .btn {
    font-family: var(--cp-font-head);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: transparent;
    border: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: 5px;
    color: var(--cp-cyan);
    -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.actions .btn:hover {
    background-color: rgba(0, 229, 255, 0.12);
    box-shadow: var(--cp-glow-cyan);
}
.actions .btn.primary {
    background: linear-gradient(135deg, var(--cp-cyan), #00a8cc);
    border-color: transparent;
    color: var(--cp-void);
}
.actions .btn.primary:hover {
    background: linear-gradient(135deg, #33ecff, #00c9ea);
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.6);
}


/* =========================================================
    14. FEEDBACK MÍNIMO (mensajes Django)
   ========================================================= */

.messages {
    font-family: var(--cp-font-mono);
    font-size: 0.95em;
}
.messages .success,
.messages .error,
.messages li {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-cyan);
    color: var(--cp-fg);
}
.messages .success {
    border-left-color: var(--cp-acid);
    color: var(--cp-acid);
}
.messages .error {
    border-left-color: var(--cp-magenta);
    color: var(--cp-magenta);
}


/* =========================================================
    15. ANIMACIONES HUD
   ========================================================= */

@keyframes cp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes cp-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(0, 229, 255, 0.35); }
    50%      { box-shadow: 0 0 24px rgba(0, 229, 255, 0.65); }
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
    animation: cp-pulse 1.6s ease-in-out infinite;
}


/* =========================================================
    16. HEADER AL HACER SCROLL (centrado H+V garantizado)
   ========================================================= */

#header.scrolled {
    background-color: rgba(5, 7, 11, 0.9);
    box-shadow: 0 1px 0 rgba(0, 229, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Contenedor del header: alinea logo/nav verticalmente */
#header .header-content {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Migas de pan: el centrado (position/top/left/transform y la muestra al
   hacer scroll) ya está definido en main.css; se reutiliza tal cual. */


/* =========================================================
    17. TARJETAS (FEATURES)
   ========================================================= */

.features article {
    background-color: var(--cp-panel);
    border: 1px solid var(--cp-border-soft);
    border-top: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: 6px;
    -webkit-transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.features article:hover {
    transform: translateY(-4px);
    border-top-color: var(--cp-cyan);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 18px rgba(0, 229, 255, 0.12);
}

.features article .image {
    border-radius: 6px 6px 0 0;
}
.features article .image img {
    border-radius: 6px 6px 0 0;
}

.features article h3.major {
    font-size: 1em;
    color: var(--cp-fg);
}

.features article p {
    color: var(--cp-fg-soft);
}

/* Enlace "Leer más" dentro de las tarjetas */
.features article .read-more {
    margin: 1em 0 0 0;
}

/* Detalles técnicos bajo las tarjetas (blog/portfolio) */
.project-details.categories {
    margin-top: 1em;
    padding-top: 0.85em;
    border-top: 1px solid var(--cp-border-soft);
}
.project-details.categories h5 {
    font-family: var(--cp-font-mono);
    font-size: 0.78em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-fg-dim);
}


/* =========================================================
    18. CHIPS DE CATEGORÍA
   ========================================================= */

.category-links .button.primary,
.project-details .category-links a.button {
    height: auto;
    line-height: 1;
    padding: 0.4em 0.9em;
    font-size: 0.62em;
    letter-spacing: 0.08em;
    border-width: 1px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.06);
    border-color: rgba(0, 229, 255, 0.4);
    color: var(--cp-cyan) !important;
    box-shadow: none;
}
.category-links .button.primary:hover,
.project-details .category-links a.button:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: var(--cp-cyan);
    box-shadow: var(--cp-glow-cyan);
}


/* =========================================================
    19. PAGINACIÓN
   ========================================================= */

ul.pagination {
    justify-content: center;
    margin-top: 2.5em;
}

ul.pagination .button {
    margin: 0 0.2em;
}

ul.pagination li.active .button {
    background: linear-gradient(135deg, var(--cp-cyan), #00a8cc);
    border-color: transparent;
    color: var(--cp-void) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}


/* =========================================================
    20. IMÁGENES DESTACADAS
   ========================================================= */

.image.fit,
.image.main {
    border-radius: 6px;
    border: 1px solid var(--cp-border-soft);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.image.fit img,
.image.main img {
    border-radius: 6px;
}

.image.left,
.image.right {
    border-radius: 6px;
}

/* Imágenes circulares del perfil (about): sin marco ni sombra.
    El recuadro 1px de .image.fit rompe la fluidez de los avatares
    redondos; las destacadas de detalle conservan su marco. */
#profile .image.fit,
#stack .image.fit {
    border: 0;
    box-shadow: none;
}


/* =========================================================
    21. CÓDIGO / BLOCKQUOTE / HR
   ========================================================= */

code {
    font-family: var(--cp-font-mono);
    font-size: 0.9em;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 4px;
    padding: 0.2em 0.5em;
    color: var(--cp-acid);
}

pre {
    font-family: var(--cp-font-mono);
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-cyan);
    border-radius: 6px;
}
pre code {
    background: none;
    border: 0;
    padding: 1em 1.5em;
    color: var(--cp-fg-soft);
}

blockquote {
    border-left: 4px solid var(--cp-cyan);
    background: rgba(0, 229, 255, 0.05);
    color: var(--cp-fg-soft);
}
blockquote footer {
    font-family: var(--cp-font-mono);
    font-size: 0.85em;
    color: var(--cp-fg-dim);
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
}
hr.major {
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.7), transparent);
}


/* =========================================================
    22. LISTAS Y TABLAS
   ========================================================= */

ul.alt li {
    border-top-color: var(--cp-border-soft);
    color: var(--cp-fg-soft);
}
ul.alt li strong {
    color: var(--cp-fg);
}

dl dt {
    font-family: var(--cp-font-head);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-fg);
}
dl dd {
    color: var(--cp-fg-soft);
}

table tbody tr {
    border-color: var(--cp-border-soft);
}
table tbody tr:nth-child(2n + 1) {
    background: rgba(0, 229, 255, 0.03);
}
table thead {
    border-bottom-color: var(--cp-border);
}
table th {
    font-family: var(--cp-font-head);
    font-size: 0.85em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-fg);
}
table tfoot {
    border-top-color: var(--cp-border);
}
table.alt tbody tr td {
    border-color: var(--cp-border-soft);
}

.box {
    background: var(--cp-panel);
    border-color: var(--cp-border-soft);
}


/* =========================================================
    23. COMENTARIOS, ALERTAS Y MENSAJES
   ========================================================= */

#comments-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}
#comments-list li {
    background: var(--cp-panel);
    border: 1px solid var(--cp-border-soft);
    border-left: 3px solid rgba(0, 229, 255, 0.4);
    border-radius: 5px;
    padding: 1em 1.25em;
    margin-bottom: 0.75em;
    color: var(--cp-fg-soft);
}
#comments-list li strong {
    color: var(--cp-cyan);
}
#comments-list li p {
    margin: 0.5em 0 0 0;
    color: var(--cp-fg-soft);
}

.comment-textarea {
    background: rgba(230, 236, 245, 0.04) !important;
    border: 2px solid var(--cp-border) !important;
    color: var(--cp-fg) !important;
}
.comment-textarea:focus {
    border-color: var(--cp-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.14) !important;
}

/* Alertas (patrón Bootstrap utilizado por los templates) */
.alert {
    border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-cyan);
    background: rgba(0, 0, 0, 0.4);
    color: var(--cp-fg);
    border-radius: 4px;
    padding: 0.75em 1em;
    margin-bottom: 1em;
}
.alert-success {
    border-left-color: var(--cp-acid);
    color: var(--cp-acid);
}
.alert-danger {
    border-left-color: var(--cp-magenta);
    color: var(--cp-magenta);
}
.alert-info {
    border-left-color: var(--cp-cyan);
    color: var(--cp-cyan);
}
.alert-warning {
    border-left-color: #ffb703;
    color: #ffb703;
}

/* Mensajes Django por tag */
.messages li.success {
    border-left-color: var(--cp-acid);
    color: var(--cp-acid);
}
.messages li.error {
    border-left-color: var(--cp-magenta);
    color: var(--cp-magenta);
}
.messages li.info {
    border-left-color: var(--cp-cyan);
    color: var(--cp-cyan);
}
.messages li.warning {
    border-left-color: #ffb703;
    color: #ffb703;
}

/* Errores de formulario de Django */
.errorlist {
    list-style: none;
    padding: 0;
}
.errorlist li {
    color: var(--cp-magenta);
    font-size: 0.9em;
}
.text-danger {
    color: var(--cp-magenta);
}


/* =========================================================
    24. DETALLE DE PROYECTO / FORMACIÓN
   ========================================================= */

.project-detail .image.fit {
    margin: 1.5em 0 2em 0;
}

.project-detail .special {
    display: inline-block;
    margin-top: 1em;
    padding: 0.75em 1.5em;
    border: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: 5px;
    background: transparent;
    color: var(--cp-cyan);
}
.project-detail .special:hover {
    background: rgba(0, 229, 255, 0.12);
    box-shadow: var(--cp-glow-cyan);
}


/* =========================================================
    25. FORMULARIO DE CONTACTO (form + article)
   ========================================================= */

.form-and-article article {
    background: var(--cp-panel);
    border: 1px solid var(--cp-border-soft);
    border-top: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: 6px;
    padding: 1.75em;
}
.form-and-article article .image.fit {
    margin-bottom: 1.5em;
}


/* =========================================================
    26. PREFERS-REDUCED-MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
    27. CORRECCIÓN ZEN — estado de los botones
   ========================================================= */

.actions .btn:disabled {
    cursor: progress;
}

.actions .btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 1;
}
.actions .btn.primary.is-loading {
    background: linear-gradient(135deg, #00a8cc, #008fb0);
    box-shadow: none;
}
.actions .btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin-top: -0.55em;
    margin-left: -0.55em;
    border-radius: 50%;
    border: 2px solid rgba(5, 7, 11, 0.35);
    border-top-color: var(--cp-void);
    animation: cp-spin 0.7s linear infinite;
}

@keyframes cp-spin {
    to { transform: rotate(360deg); }
}