@charset "utf-8";

/*!
 * ============================================================
 *  C-KODE LAB — ckodelab.com
 *  Copyright (c) 2026 C-KODE LAB. Todos los derechos reservados.
 *
 *  Hoja de estilos original de C-KODE LAB (Valparaiso, Chile).
 *  Prohibida su reproduccion, redistribucion o reventa sin
 *  autorizacion escrita. Licencias: contacto@ckodelab.com
 *
 *  Huella de autoria: CKL-SIG::a7d31c9f4e::ckodelab.com
 * ============================================================
 */

/* --- RESET Y VARIABLES --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* Huella de autoria: sobrevive a minificadores. No borrar. */
	--ckl-sig: "CKL-SIG::a7d31c9f4e::ckodelab.com";
	--ckl-owner: "C-KODE LAB";

	--primary-black: #0a0a0a;
	--carbon-dark: #121212;
	--carbon-medium: #1a1a1a;
	--carbon-light: #2a2a2a;
	--metal-dark: #3a3a3a;
	--metal-light: #4a4a4a;
	--accent-red: #ff3333;
	--accent-blue: #00a8ff;
	--accent-green: #00ff88;
	--accent-purple: #9945ff;
	--accent-cyan: #00ffff;
	--text-primary: #ffffff;
	--text-secondary: #b0b0b0;
	--text-dim: #808080;
}

html {
	scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden; /* Vital para evitar scroll horizontal */
}

body {
	/* Inter para texto corrido (legibilidad); Orbitron queda como
	   fuente display en títulos, logo y botones (ver parche B2B al final) */
	font-family: 'Inter', 'Rajdhani', sans-serif;
	background: var(--primary-black);
	color: var(--text-primary);
	overflow-x: hidden; /* Refuerzo de seguridad */
    width: 100%;
	position: relative;
}

/* Fondo animado */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
		repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
		linear-gradient(135deg, var(--primary-black) 0%, var(--carbon-dark) 25%, var(--carbon-medium) 50%, var(--carbon-dark) 75%, var(--primary-black) 100%);
	z-index: -2;
}

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(255, 51, 51, 0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 51, 51, 0.05) 2px, transparent 2px);
	background-size: 150px 150px;
	animation: gridMove 20s linear infinite;
	z-index: -1;
	opacity: 0.5;
}

@keyframes gridMove {
	0% { transform: translate(0, 0); }
	100% { transform: translate(150px, 150px); }
}

/* --- HEADER --- */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.98) 0%, rgba(18, 18, 18, 0.9) 50%, rgba(18, 18, 18, 0) 100%);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	z-index: 1000;
	transition: all 0.3s ease;
}

.header.scrolled {
	background: rgba(18, 18, 18, 0.98);
	backdrop-filter: blur(30px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.nav-container {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
}

.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	position: relative;
}

.logo-icon {
	width: 45px;
	height: 45px;
	margin-right: 15px;
	position: relative;
}

.logo-prism {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prism-shape {
	width: 30px;
	height: 30px;
	position: relative;
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-blue) 33%, var(--accent-green) 66%, var(--accent-purple) 100%);
	animation: prismShine 3s ease-in-out infinite;
}

@keyframes prismShine {
	0%, 100% { filter: brightness(1) hue-rotate(0deg); transform: rotate(45deg) scale(1); }
	50% { filter: brightness(1.5) hue-rotate(10deg); transform: rotate(45deg) scale(1.1); }
}

.prism-shape::before, .prism-shape::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: inherit;
	opacity: 0.5;
}

.prism-shape::before { transform: rotate(60deg); }
.prism-shape::after { transform: rotate(-60deg); }

.logo-text {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.logo-text .prism {
	background: linear-gradient(135deg, var(--text-primary), var(--accent-cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.logo-text .flux {
	color: var(--text-secondary);
	font-weight: 300;
	margin-left: 5px;
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 10px;
	align-items: center;
}

.nav-menu a {
	color: var(--text-secondary);
	text-decoration: none;
	padding: 12px 25px;
	transition: all 0.3s ease;
	position: relative;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 14px;
}

.nav-menu a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
	transition: width 0.3s ease;
}

.nav-menu a:hover { color: var(--text-primary); }
.nav-menu a:hover::before, .nav-menu a.active::before { width: 80%; }
.nav-menu a.active { color: var(--accent-cyan); }

.menu-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
	padding: 5px;
}

.menu-toggle span {
	width: 30px;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
	margin: 3px 0;
	transition: 0.3s;
	border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

/* --- HERO & CAROUSEL --- */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 120px 20px 120px; /* 👈 Aumentamos el último valor (80px a 120px) */
	background: radial-gradient(ellipse at center, rgba(153, 69, 255, 0.1) 0%, transparent 50%);
    overflow: hidden; 
}
/* --- SECCIONES COMUNES --- */
.philosophy-section, .stats-section, .contact-section {
	padding: 120px 30px;
	position: relative;
    overflow: hidden;
}

.philosophy-section {
	background: linear-gradient(180deg, var(--primary-black) 0%, rgba(153, 69, 255, 0.02) 50%, var(--primary-black) 100%);
}

.philosophy-container, .stats-grid, .skills-container, .contact-container, .footer-content {
	max-width: 1200px;
	margin: 0 auto;
}

/* Prism Line */
.prism-line {
	width: 100%;
	height: 2px;
	margin: 0 auto 60px;
	position: relative;
	overflow: hidden;
	background: var(--carbon-medium);
}

.prism-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--accent-red) 20%, var(--accent-blue) 40%, var(--accent-green) 60%, var(--accent-purple) 80%, transparent);
	animation: prismSweep 4s ease-in-out infinite;
}

@keyframes prismSweep {
	0% { left: -100%; }
	100% { left: 100%; }
}

.philosophy-headline {
	font-size: 56px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 30px;
	line-height: 1.2;
	background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 25%, var(--accent-blue) 50%, var(--accent-green) 75%, var(--accent-cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% 200%;
	animation: gradientFlow 5s ease infinite;
    text-align: center;
}

@keyframes gradientFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.philosophy-subheading {
	font-size: 20px;
	color: var(--text-secondary);
	max-width: 700px;
	margin: 0 auto 80px;
	line-height: 1.6;
	font-weight: 300;
    text-align: center;
}

.philosophy-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 50px;
	margin-bottom: 60px;
}

.pillar {
	position: relative;
	padding: 40px 30px;
	background: linear-gradient(135deg, rgba(42, 42, 42, 0.2), rgba(26, 26, 26, 0.3));
	border: 1px solid var(--metal-dark);
	border-radius: 20px;
	transition: all 0.4s ease;
	overflow: hidden;
}

.pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-green));
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.pillar:hover::before { transform: scaleX(1); }

.pillar:hover {
	transform: translateY(-10px);
	border-color: var(--accent-purple);
	box-shadow: 0 20px 40px rgba(153, 69, 255, 0.2);
	background: linear-gradient(135deg, rgba(153, 69, 255, 0.05), rgba(26, 26, 26, 0.3));
}

.pillar-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	position: relative;
}

.pillar-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	opacity: 0.2;
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 0.2; }
	50% { transform: scale(1.2); opacity: 0.1; }
}

.pillar-title {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	color: var(--text-primary);
    text-align: center;
}

.pillar-description {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.6;
    text-align: center;
}

.philosophy-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
	border-radius: 50%;
	opacity: 0;
	animation: float-particle 20s infinite linear;
}

@keyframes float-particle {
	0% { transform: translateY(0) rotate(0deg); opacity: 0; }
	5% { opacity: 1; }
	95% { opacity: 1; }
	100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* --- STATS --- */
.stats-section {
	background: linear-gradient(180deg, var(--primary-black) 0%, var(--carbon-dark) 50%, var(--primary-black) 100%);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
}

.stat-number {
	font-size: 48px;
	font-weight: 900;
	color: var(--text-primary);
	margin-bottom: 10px;
	font-family: 'Orbitron', monospace;
}

/* --- SKILLS --- */
.skills-section {
	padding: 120px 30px;
	background: var(--carbon-dark);
	position: relative;
	overflow: hidden;
}

.section-header { text-align: center; margin-bottom: 80px; }
.section-title {
	font-size: 48px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, var(--text-primary), var(--accent-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.section-subtitle {
	color: var(--text-secondary);
	font-size: 18px;
	max-width: 600px;
	margin: 0 auto;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* --- CONTACT --- */
.contact-section {
	background: linear-gradient(180deg, var(--carbon-dark) 0%, var(--primary-black) 100%);
}

.contact-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.contact-info, .contact-form {
	padding: 40px;
	background: linear-gradient(135deg, rgba(42, 42, 42, 0.3), rgba(26, 26, 26, 0.5));
	border: 1px solid var(--metal-dark);
	border-radius: 20px;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	padding: 20px;
	background: var(--carbon-dark);
	border-radius: 10px;
	transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.info-item:hover {
	transform: translateX(10px);
	background: rgba(153, 69, 255, 0.1);
	box-shadow: 0 5px 20px rgba(153, 69, 255, 0.2);
}

.info-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	color: var(--text-primary);
	font-size: 20px;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.info-text h4 {
	color: var(--text-primary);
	margin-bottom: 5px;
	font-size: 16px;
	text-transform: uppercase;
}

.info-text p {
	color: var(--text-secondary);
	font-size: 14px;
}

.form-group { margin-bottom: 25px; }

.form-group label {
	display: block;
	color: var(--text-secondary);
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

.form-group input, .form-group textarea {
	width: 100%;
	padding: 15px;
	background: var(--carbon-dark);
	border: 1px solid var(--metal-dark);
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 14px;
	transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
	outline: none;
	border-color: var(--accent-purple);
	box-shadow: 0 0 10px rgba(153, 69, 255, 0.2);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.submit-btn {
	width: 100%;
	padding: 15px;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
	border: none;
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3);
}

.submit-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(153, 69, 255, 0.5);
}

/* --- FOOTER --- */
.footer {
	padding: 60px 30px 30px;
	background: var(--primary-black);
	border-top: 1px solid var(--metal-dark);
	position: relative;
}

.footer-content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}

.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-logo { display: flex; align-items: center; margin-bottom: 15px; }
.footer-description { color: var(--text-secondary); line-height: 1.6; font-size: 14px; }
.footer-section h4 {
	color: var(--text-primary);
	margin-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; transition: all 0.3s ease; font-size: 14px; }
.footer-links a:hover { color: var(--accent-purple); padding-left: 10px; }

.footer-bottom {
	padding-top: 30px;
	border-top: 1px solid var(--metal-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.copyright, .footer-credits { color: var(--text-dim); font-size: 14px; }

/* =========================================================
   RESPONSIVE DEFINITIVO
   ========================================================= */

/* ---------- Desktop / Laptop ---------- */
@media (max-width: 1200px) {
    .philosophy-headline {
        font-size: 48px;
    }
}

/* ---------- Tablet horizontal ---------- */
@media (max-width: 1024px) {
    .section-title {
        font-size: 40px;
    }

    /* Layouts tablet */
    .philosophy-pillars,
    .stats-grid,
    .contact-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 768px) {

    /* ===== Espaciado general ===== */
    .hero,
    .philosophy-section,
    .stats-section,
    .skills-section,
    .contact-section {
        padding: 60px 20px;
    }

    .hero {
        padding-top: 100px;
        min-height: auto;
    }

    /* ===== Navegación móvil ===== */
    .menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(20px);
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        padding: 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu a {
        font-size: 22px;
        padding: 10px;
    }

    /* ===== Tipografía general ===== */
    .philosophy-headline {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .philosophy-subheading {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 32px;
    }

    /* ===== Layouts 1 columna ===== */
    .philosophy-pillars,
    .stats-grid,
    .contact-container,
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* ===== Stats ===== */
    .stat-card {
        padding: 30px 20px;
    }

    /* ===== Footer ===== */
    .footer-content {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding-bottom: 30px;
    }
}

/* ---------- Mobile pequeño ---------- */
@media (max-width: 480px) {

    .contact-info,
    .contact-form {
        padding: 25px 15px;
    }
}
@keyframes scrollAnim {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 0.8; transform: translateY(0); }
}

/* Efecto de ruido digital de fondo para el toque "Pro" */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('noise.svg');
    opacity: 0.03;
    z-index: 2;
    pointer-events: none;
}
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Se mantiene detrás de todo */
    opacity: 0.05; /* APENAS perceptible, ese es el truco Pro */
    pointer-events: none; /* No interfiere con los clics */
}

/* Opcional: Hacer que el contenido tenga un fondo ligeramente vidrioso */
section {
    backdrop-filter: blur(2px); /* El contenido se ve nítido sobre el código */
}
/* --- TELEMETRY DASHBOARD --- */
.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.telemetry-card {
    background: var(--carbon-medium);
    border: 1px solid var(--metal-dark);
    border-radius: 4px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.telemetry-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 10px 30px rgba(153, 69, 255, 0.1);
    transform: translateY(-5px);
}

.telemetry-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(255, 255, 255, 0.02) 4px
    );
    z-index: 1;
    pointer-events: none;
}

.telemetry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.t-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}
.t-dot.t-purple { color: var(--accent-purple); background: var(--accent-purple); }
.t-dot.t-cyan { color: var(--accent-cyan); background: var(--accent-cyan); }
.t-dot.t-green { color: var(--accent-green); background: var(--accent-green); animation: blinker 2s infinite; }

.t-label {
    font-family: 'DM Mono', monospace; /* Si no tienes DM Mono, usará monospace */
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.telemetry-data {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.t-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.t-unit {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: var(--accent-purple);
    font-weight: 700;
}

.telemetry-bar {
    width: 100%;
    height: 4px;
    background: var(--carbon-dark);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.t-progress {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 10px currentColor;
}

/* Animación para la latencia */
.telemetry-waveform {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    position: relative;
    z-index: 2;
}

.telemetry-waveform span {
    display: block;
    width: 4px;
    height: 100%;
    background: var(--accent-green);
    border-radius: 2px;
    animation: waveform 1.2s ease-in-out infinite;
}

.telemetry-waveform span:nth-child(2) { animation-delay: 0.1s; }
.telemetry-waveform span:nth-child(3) { animation-delay: 0.2s; }
.telemetry-waveform span:nth-child(4) { animation-delay: 0.3s; }
.telemetry-waveform span:nth-child(5) { animation-delay: 0.4s; }

@keyframes waveform {
    0%, 100% { height: 20%; }
    50% { height: 100%; box-shadow: 0 0 10px var(--accent-green); }
}
/* --- TERMINAL REQUEST SYSTEM --- */
.terminal-wrapper {
    background: #050505;
    border: 1px solid var(--metal-dark);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.terminal-header {
    background: #1a1a1a;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--metal-dark);
}

.terminal-dots { display: flex; gap: 8px; }
.terminal-dots .t-dot { width: 12px; height: 12px; border-radius: 50%; }
.t-red { background: #ff5f56; }
.t-yellow { background: #ffbd2e; }
.t-green { background: #27c93f; }

.terminal-title {
    margin-left: 20px;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 2px;
    font-family: monospace;
}

.terminal-body {
    padding: 40px !important;
    background: transparent !important;
    border: none !important;
}

.terminal-prompt { margin-bottom: 25px; font-family: monospace; }
.prompt-user { color: var(--accent-green); }
.prompt-cmd { color: var(--text-primary); margin-left: 8px; }

.code-label { color: var(--accent-purple); margin-right: 5px; font-weight: bold; }

.terminal-body input, 
.terminal-body textarea, 
.terminal-body select {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--metal-dark) !important;
    border-radius: 2px !important;
    color: var(--accent-cyan) !important;
    font-family: 'Courier New', Courier, monospace;
}

.terminal-body input:focus, 
.terminal-body textarea:focus, 
.terminal-body select:focus {
    border-color: var(--accent-purple) !important;
    background: rgba(153, 69, 255, 0.05) !important;
}

.submit-btn.loading {
    background: var(--metal-dark);
    cursor: wait;
    opacity: 0.7;
}
/* =========================================================
   FIX: TERMINAL RESPONSIVE (MÓVILES)
   ========================================================= */
@media (max-width: 768px) {
    .terminal-wrapper {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .terminal-header {
        padding: 10px 15px;
    }

    .terminal-title {
        font-size: 9px;
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Corta el nombre con "..." si no cabe */
    }

    .terminal-body {
        padding: 20px 15px !important; /* Reducimos el margen interno drásticamente */
    }

    .terminal-prompt {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 20px;
    }

    .prompt-user {
        word-break: break-all; /* Evita que la ruta de la consola rompa la caja */
    }

    .prompt-cmd {
        margin-left: 0;
    }

    .form-group label {
        font-size: 11px;
    }

    .terminal-body input, 
    .terminal-body textarea, 
    .terminal-body select {
        padding: 12px !important;
        font-size: 13px !important;
    }
}

/* ================================================================
   C-KODE Lab — PARCHE v2 (2026-07)
   ⚠ Si ya pegaste el parche v1, BÓRRALO y pega este en su lugar
   (v2 contiene todo lo del v1 más loader nuevo y capa mobile).
   Pegar este bloque COMPLETO al final de ckodelab-prism.css
   ================================================================ */

/* ---------- 1. Logo animado (antes inline en el <head>) ---------- */
.logo-animado {
    width: 45px;
    height: 45px;
    object-fit: contain;
    animation: rotacion-holografica 10s linear infinite;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
}

/* Solo se anima transform: el filter animado forzaba repaint continuo */
@keyframes rotacion-holografica {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- 1b. Tarjetas de prototipos (antes <style> en el body) ---------- */
.proto-card {
    position: relative;
    background: var(--carbon-medium);
    border: 1px solid var(--carbon-light);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.proto-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: xray-scan 4s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes xray-scan {
    0%   { top: -100%; }
    100% { top: 100%; }
}

.proto-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-purple);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.btn-proto {
    display: block;
    width: 100%;
    padding: 18px;
    text-align: center;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.btn-proto::before {
    content: "EJECUTAR_PROTOTIPO.EXE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    transition: transform 0.3s ease;
}

.btn-proto:hover::before,
.btn-proto:focus-visible::before {
    transform: translateY(-100%);
}

.btn-proto::after {
    content: "INGRESAR AL SISTEMA →";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background: #fff;
    color: #000;
}

.btn-proto:hover::after,
.btn-proto:focus-visible::after {
    transform: translateY(0);
}

/* ---------- 1c. Parpadeo del footer (antes <style> en el body) ---------- */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* ---------- 2. Sección de contacto y hero ---------- */
/* #contact ahora es una <section>; margen para que el ancla no
   quede tapada por el header fijo */
.contact-section {
    scroll-margin-top: 90px;
}

/* Hero: 100dvh evita los saltos con la barra dinámica del navegador
   móvil. El !important es necesario para superar el min-height inline. */
@supports (min-height: 100dvh) {
    #home.hero { min-height: 100dvh !important; }
}

/* ---------- 3. Modal de agendamiento propio ---------- */
.scheduler-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.scheduler-overlay[hidden] { display: none; }

.scheduler-modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    animation: schedulerIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes schedulerIn {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.scheduler-modal .terminal-header {
    position: relative;
}

.scheduler-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid var(--metal-dark);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scheduler-close:hover,
.scheduler-close:focus-visible {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.scheduler-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 480px) {
    .scheduler-row { grid-template-columns: 1fr; }
}

.scheduler-form input[type="date"],
.scheduler-form select {
    width: 100%;
    padding: 15px;
    background: var(--carbon-dark);
    border: 1px solid var(--metal-dark);
    color: var(--accent-cyan);
    font-family: 'DM Mono', monospace;
    color-scheme: dark; /* calendario nativo en modo oscuro */
}

.scheduler-note {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    margin: 10px 0 15px;
}

/* Bloquea el scroll del fondo mientras el modal está abierto */
body.scheduler-open { overflow: hidden; }

/* ---------- 4. Honeypot antispam (invisible para humanos) ---------- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---------- 5. Resets: menu-toggle ahora es <button> ---------- */
button.menu-toggle {
    background: none;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

button.menu-toggle { border: none; }

button.menu-toggle:focus-visible,
.btn-proto:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* ---------- 6. Rendimiento y accesibilidad ---------- */
/* El blur global sobre <section> forzaba composición GPU en toda la
   página; con el canvas Matrix a opacity 0.05 es imperceptible */
section { backdrop-filter: none !important; }

/* ================================================================
   BOOT LOADER v2 — autocontenido (no usa las clases .loader viejas;
   esas reglas del template quedan sin efecto y se pueden borrar después)
   ================================================================ */
.boot-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    /* Fail-safe: si el JS no carga, se desvanece solo a los 5s */
    animation: bootFailSafe 0.5s ease 5s forwards;
}
.boot-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}
@keyframes bootFailSafe {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.boot-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: min(320px, 80vw);
}

.boot-logo-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boot-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    animation: bootPulse 1.6s ease-in-out infinite;
}

@keyframes bootPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.06); }
}

/* Anillo giratorio con gradiente cyan→púrpura (solo transform: barato en GPU) */
.boot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--accent-cyan) 90deg, var(--accent-purple) 180deg, transparent 270deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: bootSpin 1.2s linear infinite;
}

@keyframes bootSpin {
    to { transform: rotate(360deg); }
}

/* Log de arranque: las líneas aparecen en secuencia */
.boot-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    width: 100%;
}

.boot-line {
    opacity: 0;
    transform: translateX(-6px);
    animation: bootLineIn 0.3s ease forwards;
}
.boot-line.l1 { animation-delay: 0.15s; }
.boot-line.l2 { animation-delay: 0.55s; }
.boot-line.l3 { animation-delay: 0.95s; color: var(--accent-green); }

@keyframes bootLineIn {
    to { opacity: 1; transform: translateX(0); }
}

.boot-bar {
    width: 100%;
    height: 3px;
    background: var(--carbon-light);
    border-radius: 2px;
    overflow: hidden;
}

.boot-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    box-shadow: 0 0 12px rgba(153, 69, 255, 0.6);
    transition: width 0.15s linear;
}

.boot-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
}
#bootPct { color: var(--accent-cyan); }
.boot-brand { color: var(--text-dim); }

/* Con movimiento reducido: sin anillo ni pulso, solo logo estático */
@media (prefers-reduced-motion: reduce) {
    .boot-ring { display: none; }
    .boot-logo { animation: none; }
    .boot-line { animation-duration: 0.01ms; }
}

/* ================================================================
   CAPA MOBILE — correcciones y ahorro de batería en pantallas chicas
   ================================================================ */
@media (max-width: 768px) {
    /* El escáner x-ray en 5 tarjetas a la vez es puro costo de GPU en móvil */
    .proto-card::after { animation: none; display: none; }

    /* El hover no existe en touch: la tarjeta no debe "flotar" al tocar */
    .proto-card:hover { transform: none; }

    /* Los botones de prototipos muestran el estado final directamente */
    .btn-proto::before { content: "INGRESAR AL SISTEMA →"; }
    .btn-proto::after { display: none; }
    .nav-link {
        display: block;
        padding: 12px 0;
    }

    /* Modal agendador: ocupa mejor la pantalla y el teclado no lo tapa */
    .scheduler-overlay { align-items: flex-start; padding-top: 40px; }
    .scheduler-form input,
    .scheduler-form select,
    .scheduler-form textarea { font-size: 16px; } /* evita el auto-zoom de iOS */
}

@media (max-width: 480px) {
    /* Grid de prototipos y telemetría a una columna limpia */
    .prototypes-grid { gap: 25px !important; }

    /* Menos aire vertical en secciones para acortar el scroll */
    .prototypes-section { padding: 60px 0 !important; }
}

/* ============================================================
   REDISEÑO 2026-07: estilos que antes vivían inline en el HTML
   + secciones nuevas (Servicios, Herramientas, FAQ) y form-status
   ============================================================ */

/* ---------- Hero (antes todo inline) ---------- */
#home.hero {
    background: #050505;
    min-height: 100vh;
    overflow: hidden;
}

/* --- FX 9: lienzo WebGL del hero ---
   Va por debajo de .hero-glow y .hero-grid-overlay (z-index 1) para que la
   retícula y el lavado púrpura sigan leyéndose encima: el shader aporta
   movimiento, el CSS mantiene el lenguaje de terminal. */
.hero-shader {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s var(--ease-out-quint);
}

/* La clase la pone el JS tras el primer frame: nunca hay un flash negro */
.hero-shader.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hero-shader { display: none; }
}

.hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(153, 69, 255, 0.05) 0%, transparent 70%);
    z-index: 1;
}

.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}

.hero-eyebrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: var(--accent-purple);
    letter-spacing: clamp(3px, 2vw, 8px);
    margin-bottom: 20px;
    opacity: 0.8;
    animation: fadeInUp 1s ease;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 7vw, 4rem);
    line-height: 1.05;
    margin-bottom: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

.hero-title-accent {
    background: linear-gradient(90deg, #fff 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-purple); /* fallback si background-clip no está soportado */
}

.hero-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-block;
    padding: 15px 35px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-primary {
    background: var(--accent-purple);
    color: #fff;
    border: 1px solid var(--accent-purple);
    box-shadow: 0 10px 20px rgba(153, 69, 255, 0.2);
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(153, 69, 255, 0.35);
}

.cta-ghost {
    background: rgba(255,255,255,0.02);
    color: #fff;
    border: 1px solid var(--glass-border, var(--metal-dark));
}

.cta-ghost:hover {
    border-color: var(--accent-purple);
    background: rgba(153, 69, 255, 0.08);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0.5;
}

.scroll-mouse {
    width: 20px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    animation: scrollAnim 2s infinite;
}

/* ---------- Sección Servicios ---------- */
.services-section {
    padding: 100px 20px;
    position: relative;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 60px;
}

.service-card {
    background: var(--carbon-dark);
    border: 1px solid var(--metal-dark);
    border-top: 2px solid var(--accent-purple);
    padding: 30px 25px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-purple);
    box-shadow: 0 16px 32px rgba(0,0,0,0.5);
}

.service-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.service-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 12px;
}

.service-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.process-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid var(--metal-dark);
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 200px;
    flex: 1;
    text-align: center;
    padding: 15px 10px;
}

.process-num {
    font-family: 'DM Mono', monospace;
    font-size: 22px;
    color: var(--accent-purple);
    opacity: 0.9;
}

.process-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #fff;
}

.process-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-dim);
}

/* ---------- Prototipos (antes inline) ---------- */
.prototypes-section {
    padding: 100px 0;
    background: #0c0c0c;
    position: relative;
    overflow: hidden;
}

.prototypes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.proto-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    padding: 2px 8px;
    font-weight: bold;
    z-index: 2;
}

.proto-img {
    height: 200px;
    background: #111;
    border-bottom: 2px solid var(--accent-purple);
    overflow: hidden;
}

.proto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.proto-card:hover .proto-img img {
    transform: scale(1.05);
    opacity: 1;
}

.proto-body { padding: 25px; }

.proto-title {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
}

.proto-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 42px;
}

/* ---------- Sección Herramientas Gratis ---------- */
.tools-section {
    padding: 100px 20px;
    background: #0c0c0c;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--carbon-dark);
    border: 1px solid var(--metal-dark);
    padding: 30px 25px;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-cyan);
    box-shadow: 0 16px 32px rgba(0,0,0,0.5);
}

.tool-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.tool-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    color: #fff;
}

.tool-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    flex: 1;
}

.tool-link {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    transition: padding-left 0.3s ease;
}

.tool-card:hover .tool-link { padding-left: 8px; }

/* ---------- Sección FAQ ---------- */
.faq-section {
    padding: 100px 20px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--carbon-dark);
    border: 1px solid var(--metal-dark);
    border-left: 3px solid var(--accent-purple);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 45px 18px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #fff;
    position: relative;
    transition: color 0.3s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 20px;
    color: var(--accent-purple);
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item summary:hover { color: var(--accent-purple); }

.faq-item summary:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: -2px;
}

.faq-item p {
    padding: 0 20px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------- Formularios: select, estado de envío y nota legal ---------- */
.form-group select {
    width: 100%;
    padding: 15px;
    background: var(--carbon-dark);
    border: 1px solid var(--metal-dark);
    color: var(--accent-cyan);
}

.form-status {
    display: none;
    margin-top: 15px;
    padding: 12px 15px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    border: 1px solid;
}

.form-status.ok {
    display: block;
    color: var(--accent-green);
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.06);
}

.form-status.err {
    display: block;
    color: var(--accent-red);
    border-color: rgba(255, 51, 51, 0.4);
    background: rgba(255, 51, 51, 0.06);
}

.form-legal {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-dim);
}

.form-legal a {
    color: var(--accent-purple);
    text-decoration: none;
}

.form-legal a:hover { text-decoration: underline; }

/* .info-item ahora también puede ser <button> (agendador) */
button.info-item {
    background: transparent;
    border: none;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    color: inherit;
}

/* ---------- Footer: copyright y monitor (antes inline) ---------- */
.copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.copyright-sub {
    font-size: 0.85em;
    opacity: 0.8;
}

.copyright-sub .heart { color: #ff4d4d; }

.copyright-sub a {
    color: var(--accent-purple);
    text-decoration: none;
    font-weight: 700;
}

.system-monitor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    margin-top: 40px;
    border-top: 1px solid var(--metal-dark);
    padding-top: 20px;
}

.monitor-item {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
}

.monitor-item .m-dim { opacity: 0.5; }
.m-purple { color: var(--accent-purple); }
.m-cyan { color: var(--accent-cyan); }
.m-grey { color: var(--text-secondary); }

/* Respeto a la preferencia de movimiento reducido del sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   PARCHE B2B 2026-07-10 — pulido profesional UI/UX
   (el body ahora usa Inter; aquí se reasigna Orbitron como display)
   ================================================================ */

/* ---------- Jerarquía tipográfica ---------- */
.logo-text,
.section-title,
.philosophy-headline,
.pillar-title,
.info-text h4,
.footer-section h4,
.stat-number,
.submit-btn {
    font-family: 'Orbitron', sans-serif;
}

.nav-menu a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Los anclajes no deben quedar tapados por el header fijo */
section[id] { scroll-margin-top: 90px; }

/* ---------- Títulos sólidos (el degradado en texto restaba
   legibilidad y jerarquía; el color queda en acentos puntuales) ---------- */
.section-title {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.philosophy-headline {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    animation: none;
}

/* ---------- Chips de confianza bajo el CTA del hero ---------- */
.hero-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 35px 0 0;
    padding: 0;
}

.trust-chip {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border: 1px solid var(--metal-dark);
    background: rgba(255, 255, 255, 0.02);
    padding: 8px 14px;
    border-radius: 2px;
}

.trust-chip .tick { color: var(--accent-green); margin-right: 4px; }

/* ---------- Iconos SVG (reemplazan a los emojis) ---------- */
.pillar-icon svg { width: 36px; height: 36px; color: var(--accent-cyan); position: relative; z-index: 1; }
.service-icon { color: var(--accent-purple); margin-bottom: 18px; }
.service-icon svg { width: 30px; height: 30px; }
.info-icon svg { width: 22px; height: 22px; }

/* ---------- FAQ: borde completo en vez de franja lateral ---------- */
.faq-item {
    border: 1px solid var(--metal-dark);
    background: rgba(26, 26, 26, 0.6);
    transition: border-color 0.3s ease;
}

.faq-item[open] { border-color: var(--accent-purple); }

/* ---------- Badges de prototipos: tamaño legible ---------- */
.proto-badge {
    font-size: 11px;
    padding: 3px 10px;
    letter-spacing: 1px;
}

/* ---------- Hero: subtítulo con algo más de cuerpo ---------- */
.hero-sub { font-size: 17px; }

/* ---------- Estados de foco visibles en CTAs y formularios ---------- */
.cta-btn:focus-visible,
.submit-btn:focus-visible,
.info-item:focus-visible,
.tool-card:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .hero-trust { gap: 8px; margin-top: 28px; }
    .trust-chip { font-size: 11px; padding: 7px 10px; }
}

/* ================================================================
   CAPA FX 2026-07 — overdrive (pareja del bloque FX en el JS)
   Nada de aquí gatea contenido: sin JS o con reduced-motion la
   página se ve completa. Curvas de easing profesionales, sin rebote.
   ================================================================ */

:root {
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Detalles de sistema que delatan oficio ---------- */
::selection { background: rgba(153, 69, 255, 0.6); color: #fff; }

html { scrollbar-color: var(--metal-light) var(--primary-black); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--primary-black); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-purple), var(--accent-blue));
    border-radius: 5px;
    border: 2px solid var(--primary-black);
}

/* Cifras tabulares: los contadores no "bailan" mientras animan */
.t-value, .stat-number, #bootPct { font-variant-numeric: tabular-nums; }

/* Acceso rápido por teclado: primer Tab de la página */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 2000;
    background: var(--accent-purple);
    color: #fff;
    padding: 10px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    text-decoration: none;
    transition: top 0.2s var(--ease-out-quint);
}
.skip-link:focus { top: 16px; }

/* ---------- FX 2: spotlight del hero (variables --hx/--hy del JS) ---------- */
@media (hover: hover) and (pointer: fine) {
    .hero-grid-overlay::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(0, 255, 255, 0.10) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 255, 0.10) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0;
        transition: opacity 0.5s var(--ease-out-quint);
        -webkit-mask-image: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 40%), #000 0%, transparent 70%);
        mask-image: radial-gradient(240px circle at var(--hx, 50%) var(--hy, 40%), #000 0%, transparent 70%);
    }

    .hero.fx-spot .hero-grid-overlay::after { opacity: 1; }
}

/* ---------- FX 3: botones magnéticos (variables --tx/--ty del JS) ---------- */
.hero-cta .cta-btn { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.hero-cta .cta-primary:hover { transform: translate(var(--tx, 0px), var(--ty, 0px)); }

/* ---------- FX 4: glow de borde que sigue al puntero ---------- */
.fx-glow { position: relative; }

.service-card.fx-glow::before,
.tool-card.fx-glow::before,
.proto-card.fx-glow::before,
.telemetry-card.fx-glow::before,
.pillar.fx-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out-quint);
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(153, 69, 255, 0.13),
        transparent 65%
    );
}

.service-card.fx-glow:hover::before,
.tool-card.fx-glow:hover::before,
.proto-card.fx-glow:hover::before,
.telemetry-card.fx-glow:hover::before,
.pillar.fx-glow:hover::after { opacity: 1; }

/* ---------- FX 5: coreografía de entrada (clase fx-armed la pone el JS) ----------
   Truco: el estado final es el natural del elemento; la animación usa
   fill backwards para cubrir el delay del stagger y al terminar deja
   de aplicar, así los hovers de cada tarjeta quedan intactos. */
html.fx-armed .fx-reveal:not(.fx-in) {
    opacity: 0;
    transform: translateY(26px);
}

html.fx-armed .fx-reveal.fx-in {
    animation: fxRise 0.7s var(--ease-out-quint) backwards;
    animation-delay: calc(var(--ri, 0) * 80ms);
}

@keyframes fxRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- FX 6: header que cede espacio al leer ---------- */
.header.nav-hidden { transform: translateY(-100%); }

/* ---------- FX 7: caret del prompt mientras "tipea" ---------- */
.fx-typing::after {
    content: '▋';
    color: var(--accent-cyan);
    margin-left: 2px;
    animation: fxCaret 1s steps(1) infinite;
}

@keyframes fxCaret { 50% { opacity: 0; } }

/* ---------- Capa scroll-driven (solo navegadores con soporte,
   solo si el visitante acepta movimiento; el resto ve la página normal) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        /* Barra de progreso de lectura ligada al scroll, sin JS */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            z-index: 1200;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
            transform-origin: 0 50%;
            transform: scaleX(0);
            animation: fxProgress linear both;
            animation-timeline: scroll(root);
        }

        @keyframes fxProgress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }

        /* El hero se disuelve con deriva al abandonarlo (parallax de salida) */
        .hero-content {
            animation: fxHeroExit linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 90%;
        }

        @keyframes fxHeroExit {
            to { transform: translateY(-60px); opacity: 0.1; }
        }
    }
}

/* ============================================================
   CAPA FX 2026-09 — impacto visual
   Mismas reglas que la capa anterior: sin JS la página se ve
   completa, prefers-reduced-motion apaga cada efecto por separado
   y nada de esto depende de un framework.
   ============================================================ */

/* --- FX 10a: inclinación 3D de tarjetas ---
   El transform se COMPONE con el desplazamiento que cada tarjeta ya
   tenía en :hover. Si el JS no corre, --tilt-x/--tilt-y valen 0deg y
   el hover se comporta exactamente como antes. */
.fx-tilt { will-change: transform; }

.proto-card.fx-tilt:hover {
    transform: translateY(-10px) scale(1.02)
               perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg));
}

.tool-card.fx-tilt:hover {
    transform: translateY(-6px)
               perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg));
}

/* --- FX 10b: borde de gradiente que gira ---
   Truco de máscara: se pinta un gradiente cónico y se recorta todo
   menos el anillo de 1px del borde. Sin esto haría falta un segundo
   elemento con overflow, y .proto-card ya recorta su contenido. */
@property --ckl-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.fx-edge {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--ckl-angle),
        transparent 0deg,
        var(--accent-purple) 55deg,
        var(--accent-cyan) 105deg,
        transparent 165deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-quint);
}

.fx-tilt:hover .fx-edge,
.fx-tilt:focus-within .fx-edge {
    opacity: 1;
    animation: ckl-edge-spin 4s linear infinite;
}

/* Sin @property el ángulo no interpola: el borde queda fijo en su
   posición inicial, que sigue siendo un degradado válido. */
@keyframes ckl-edge-spin { to { --ckl-angle: 360deg; } }

/* --- FX 11: marquesina de capacidades --- */
.marquee-band {
    position: relative;
    overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid var(--carbon-light);
    border-bottom: 1px solid var(--carbon-light);
    background: linear-gradient(90deg,
        rgba(153, 69, 255, 0.05),
        rgba(0, 255, 255, 0.03) 50%,
        rgba(153, 69, 255, 0.05));
    /* Se desvanece contra los bordes en vez de cortarse en seco */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    will-change: transform;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding: 0 26px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(13px, 1.6vw, 17px);
    font-weight: 700;
    letter-spacing: 3px;
    white-space: nowrap;
    color: var(--text-secondary);
}

.marquee-item::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    transform: rotate(45deg);
    background: var(--accent-purple);
}

/* Un ítem de cada tres se enciende: da ritmo sin volverse un arcoíris */
.marquee-item:nth-child(3n) { color: var(--accent-cyan); }
.marquee-item:nth-child(3n)::after { background: var(--accent-cyan); }

/* Sin JS la cinta no se mueve pero sigue siendo una banda legible */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { transform: none !important; }
}

/* --- FX 12: titulares que resuelven palabra por palabra --- */
.fx-words .fx-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(6px);
}

.fx-words.is-in .fx-word {
    animation: ckl-word-in 0.62s var(--ease-out-expo) both;
    animation-delay: var(--wd, 0ms);
}

@keyframes ckl-word-in {
    from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); }
    to   { opacity: 1; transform: none;               filter: blur(0); }
}

/* --- FX 13: corriente eléctrica en el CTA principal ---
   Mismo anillo enmascarado que .fx-edge. Un ::before RELLENO con
   z-index:-1 no sirve acá: dentro de un contexto de apilamiento los
   hijos negativos se pintan ENCIMA del fondo del propio elemento, así
   que el degradado se veía por dentro del botón en vez de bordearlo.
   Recortando el centro solo queda el anillo y no hay nada que sangre. */
.cta-primary { position: relative; }

.cta-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--ckl-angle),
        var(--accent-purple),
        var(--accent-cyan) 25%,
        #fff 33%,
        var(--accent-purple) 55%,
        var(--accent-purple));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out-quint);
}

.cta-primary:hover::before,
.cta-primary:focus-visible::before {
    opacity: 1;
    animation: ckl-edge-spin 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fx-edge,
    .cta-primary::before { animation: none; }
    .fx-words .fx-word { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Telemetría — módulos de carga
   Las tres tarjetas comparten marco, cabecera y cifra grande.
   Lo que cambia es el módulo de abajo, para que dos valores
   iguales no se lean como la misma tarjeta repetida.
   ============================================================ */

/* Los dígitos ya usan tabular-nums más abajo, así que el ancho no
   salta mientras el número corre. */
.t-value.is-scrambling { color: var(--accent-green); }

.t-unit-cyan  { color: var(--accent-cyan); }
.t-unit-green { color: var(--accent-green); }

.t-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    position: relative;
    z-index: 2;
}

/* --- Módulo 1: marcas segmentadas, una por hora --- */
.t-segments {
    display: flex;
    gap: 3px;
    height: 18px;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.t-segments span {
    flex: 1;
    height: 60%;
    background: var(--carbon-light);
    border-radius: 1px;
    transition: height 0.25s var(--ease-out-quint),
                background-color 0.25s linear,
                box-shadow 0.25s linear;
}

.t-segments span.is-on {
    height: 100%;
    background: var(--accent-purple);
    box-shadow: 0 0 8px rgba(153, 69, 255, 0.65);
}

/* --- Módulo 2: barra continua + estado de terminal --- */
.t-progress-cyan {
    width: 0;
    background: var(--accent-cyan);
    color: var(--accent-cyan); /* el box-shadow de .t-progress usa currentColor */
}

.t-status { color: var(--accent-cyan); }
.is-done .t-status { color: var(--accent-green); }

.t-cursor {
    color: var(--accent-cyan);
    animation: blinker 1s step-end infinite;
}

.is-done .t-cursor { display: none; }

/* --- Módulo 3: anillo radial --- */
.t-module-ring {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.t-ring {
    width: 44px;
    height: 44px;
    flex: none;
    /* -90deg para que el trazo arranque arriba y no a las 3 en punto */
    transform: rotate(-90deg);
    overflow: visible;
}

.t-ring circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.t-ring-track { stroke: var(--carbon-light); }

.t-ring-fill {
    stroke: var(--accent-green);
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.55));
}

.t-module-ring .t-caption { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .t-segments span,
    .t-progress-cyan { transition: none; }
    .t-cursor { animation: none; }
}

/* ============================================================
   Arsenal técnico — carpetas por categoría
   Sustituye a la rejilla de hexágonos con pestañas. Los doce
   nombres quedan visibles siempre; el abanico al pasar el
   puntero es adorno, no un mecanismo para descubrir contenido.
   ============================================================ */

.arsenal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 28px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.folder {
    --folder-accent: var(--accent-purple);
    position: relative;
    padding-top: 26px; /* deja sitio a la pestaña, que sobresale */
    /* Columna con el cuerpo elástico: las cuatro carpetas terminan a la
       misma altura y los pies se alinean, aunque una tenga 4 hojas y
       otra 2. Sin esto la fila se lee desordenada. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.folder-purple { --folder-accent: var(--accent-purple); }
.folder-cyan   { --folder-accent: var(--accent-cyan); }
.folder-green  { --folder-accent: var(--accent-green); }
.folder-blue   { --folder-accent: var(--accent-blue); }

/* La pestaña de la carpeta: se apoya sobre el cuerpo y comparte su borde */
.folder-tab {
    position: absolute;
    top: 0;
    left: 14px;
    padding: 6px 18px 5px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-black);
    background: var(--folder-accent);
    border-radius: 3px 3px 0 0;
    /* Recorte en diagonal a la derecha: la silueta de una carpeta real */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.folder-body {
    position: relative;
    background: var(--carbon-medium);
    border: 1px solid var(--metal-dark);
    border-top: 2px solid var(--folder-accent);
    border-radius: 0 4px 4px 4px;
    padding: 16px 14px;
    flex: 1;
    transition: border-color 0.35s var(--ease-out-quint),
                box-shadow 0.35s var(--ease-out-quint),
                transform 0.35s var(--ease-out-quint);
}

.folder:hover .folder-body {
    border-color: var(--folder-accent);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
    transform: translateY(-4px);
}

.folder-papers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.paper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--carbon-dark);
    border: 1px solid var(--carbon-light);
    border-left: 2px solid var(--folder-accent);
    border-radius: 3px;
    transition: transform 0.45s var(--ease-out-quint),
                border-color 0.3s linear,
                background-color 0.3s linear;
}

/* El abanico se calcula desde --i, el índice que pone el JS: así una
   categoría con dos tecnologías y otra con cuatro usan la misma regla. */
.folder:hover .paper {
    transform: translateX(calc(var(--i) * 7px - 10px))
               rotate(calc(var(--i) * 1.7deg - 2.5deg));
    background: var(--carbon-medium);
}

.paper-icon {
    font-size: 15px;
    line-height: 1;
    flex: none;
}

.paper-name {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.folder-count {
    margin: 10px 0 0 2px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
}

/* Sin puntero real el abanico no aporta nada y el táctil no lo dispara */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .folder:hover .paper { transform: none; }
    .folder:hover .folder-body { transform: none; }
}