/* ==========================================================================
   IA LATAM - CINEMATIC EDITION STYLES (CONTRAST & QA OPTIMIZED)
   ========================================================================== */

:root {
    --bg-deep: #030408;
    --bg-primary: #05070e;
    --neon-cyan: #00f2fe;
    --neon-cyan-rgb: 0, 242, 254;
    --neon-purple: #7f00ff;
    --neon-purple-rgb: 127, 0, 255;
    --neon-green: #00ff87;
    --neon-green-rgb: 0, 255, 135;
    --neon-red: #ff4d6d;
    --neon-purple-text: #b585ff; /* Lighter purple for text: meets contrast on dark bg */
    --neon-magenta: #ff2d95;
    --neon-magenta-rgb: 255, 45, 149;
    --grad-primary: linear-gradient(135deg, var(--neon-cyan) 0%, #4facfe 100%);
    --grad-accent: linear-gradient(135deg, #00f2fe 0%, #bd66ff 50%, #ff3399 100%); /* Brighter gradient for better contrast */
    
    --font-title: 'Space Grotesk', sans-serif;
    --font-body: 'Onest', sans-serif;
    --font-syne: 'Unbounded', sans-serif;
    --font-retro: 'VT323', 'Space Grotesk', monospace;
    
    --glow-cyan: 0 0 4px rgba(var(--neon-cyan-rgb), 0.25);
    --glow-purple: 0 0 4px rgba(var(--neon-purple-rgb), 0.25);
    --glow-green: 0 0 4px rgba(var(--neon-green-rgb), 0.25);
    
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
img, svg, video { max-width: 100%; }

html { scroll-behavior: auto; scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* overflow-x: clip (no hidden): recorta el desborde horizontal de los orbes decorativos
   SIN convertir a body en contenedor de scroll — hidden rompía todo position:sticky. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: #ffffff; /* Pure white for max contrast */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

/* VIGNETTE OVERLAY PARA GARANTIZAR CONTRASTE SOBRE EL CANVAS 3D */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 15%, rgba(3,4,8, 0.95) 100%); /* Darker vignette for text contrast */
    z-index: -1; pointer-events: none;
}

h1, h2, h3, h4 { font-family: var(--font-title); color: #ffffff; font-weight: 700; }
p { font-size: 1.05rem; color: #ffffff; line-height: 1.6; } /* Ensure text inside tilt cards is pure white for contrast */

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-padding { padding: 8rem 0; }
.relative { position: relative; }
.text-cyan { color: var(--neon-cyan); }
.text-purple { color: var(--neon-purple-text); }
.text-green { color: var(--neon-green); }

/* UTILIDADES DE LAYOUT (usadas en el HTML) */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* CINEMATIC GRAIN */
.grain-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 9999;
    opacity: 0.05;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
}

/* ==========================================================================
   ESTÉTICA 90s / RETROWAVE (sobre los efectos modernos)
   ========================================================================== */
/* Rejilla synthwave en perspectiva (horizonte ochentero/noventero) */
.retro-grid {
    position: fixed; left: 0; bottom: 0; width: 100%; height: 42vh;
    z-index: -1; pointer-events: none; overflow: hidden; perspective: 280px; opacity: 0.5;
    -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 92%);
    mask-image: linear-gradient(to top, #000 8%, transparent 92%);
    /* contain:paint acota el repintado del keyframe de background-position (no compositable)
       a los limites de este elemento, sin tocar su animacion ni su apariencia */
    contain: paint;
}
.retro-grid::before {
    content: ''; position: absolute; left: -50%; right: -50%; top: 0; bottom: -2px;
    background-image:
        linear-gradient(rgba(var(--neon-cyan-rgb), 0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--neon-magenta-rgb), 0.40) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: rotateX(74deg); transform-origin: center top;
    animation: grid-scroll 5s linear infinite;
}
@keyframes grid-scroll { from { background-position: 0 0; } to { background-position: 0 44px; } }

/* Scanlines CRT + barrido suave de tubo */
.crt-overlay {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.45;
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0) 4px);
}
.crt-overlay::after {
    content: ''; position: absolute; left: 0; right: 0; height: 26vh; top: 0;
    background: linear-gradient(to bottom, transparent, rgba(var(--neon-cyan-rgb), 0.06), transparent);
    /* transform en vez de animar "top": misma trayectoria (-26% a 100% de un contenedor
       fixed inset:0, o sea 100vh) pero solo-compositor, sin forzar layout en cada frame */
    transform: translateY(-26vh);
    animation: crt-sweep 8s linear infinite;
}
@keyframes crt-sweep { to { transform: translateY(100vh); } }

/* 3D WEBGL CANVAS */
#webgl-canvas {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; pointer-events: none;
}

/* Fondo: WebGL en desktop, aurora CSS en móvil / reduced-motion */
.home-aurora { display: none; }
@media (max-width: 767px) {
    #webgl-canvas { display: none !important; }
    .home-aurora { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    #webgl-canvas { display: none !important; }
    .home-aurora { display: block; }
}

/* CUSTOM NEON CURSOR */
.custom-cursor {
    width: 6px; height: 6px; background-color: var(--neon-cyan);
    border-radius: 50%; position: fixed; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 10000; transition: width 0.2s, height 0.2s;
    box-shadow: 0 0 4px var(--neon-cyan), 0 0 8px var(--neon-cyan);
}
.custom-cursor-glow {
    width: 30px; height: 30px; border: 1px solid rgba(var(--neon-cyan-rgb), 0.5);
    border-radius: 50%; position: fixed; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 9998; transition: width 0.3s, height 0.3s;
}
@media (pointer: coarse) { .custom-cursor, .custom-cursor-glow { display: none; } }

/* 3D TILT CARDS (GLASSMORPHISM X100) */
.tilt-card {
    background: rgba(3, 5, 10, 0.98); /* Darker glass for maximum contrast */
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.1s linear, box-shadow 0.3s ease, border-color 0.3s;
    will-change: transform;
}

.tilt-card:hover {
    box-shadow: 0 30px 60px rgba(0, 242, 254, 0.15), inset 0 0 0 1px rgba(0, 242, 254, 0.4);
    border-color: rgba(var(--neon-cyan-rgb), 0.9); /* Stronger border on hover for clearer delineation */
    z-index: 10;
}

.card-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,0.15) 0%, transparent 60%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease; z-index: 5;
    mix-blend-mode: color-dodge;
}
.tilt-card:hover .card-glare { opacity: 1; }

/* BUTTONS & MAGNETIC ELEMS */
.btn {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1.8rem; border-radius: 30px; font-family: var(--font-title);
    font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer;
    position: relative; overflow: hidden; z-index: 1;
}
.magnetic-btn, .magnetic-elem {
    display: inline-flex;
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.btn-primary { background: var(--grad-primary); color: var(--bg-deep); border: none; }
.btn-glow:hover { box-shadow: 0 0 30px rgba(0, 242, 254, 0.7); }

.btn-secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(5px); }
.btn-secondary:hover { background: rgba(255,255,255,0.15); border-color: rgba(var(--neon-cyan-rgb), 0.7); box-shadow: 0 0 20px rgba(var(--neon-cyan-rgb), 0.5); }

.btn-neon { background: transparent; color: var(--neon-cyan); border: 1px solid rgba(var(--neon-cyan-rgb), 0.4); }
.btn-neon:hover { background: rgba(var(--neon-cyan-rgb), 0.1); box-shadow: 0 0 20px rgba(var(--neon-cyan-rgb), 0.6); }

.btn-text { color: var(--neon-cyan); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition-smooth); }
.btn-text:hover { color: var(--neon-green); filter: drop-shadow(0 0 8px rgba(0,255,135,0.4)); }
.btn-text:hover i { transform: translateX(6px); }

/* HEADER */
/* padding-top: env(safe-area-inset-top) reserva el notch/isla dinamica en dispositivos
   con viewport-fit=cover; 0px de fallback y valor real 0 en dispositivos sin recorte,
   por lo que no afecta a equipos sin safe-area. */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: var(--transition-smooth); border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); }
.header-scrolled { background: rgba(3, 5, 10, 0.9); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0.5rem 0; }
.header-container { max-width: 1280px; margin: 0 auto; padding: 0.7rem 2rem 0; display: flex; flex-direction: column; }
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.65rem; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-bottom { display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255,255,255,0.06); padding: 0.3rem 0 0.4rem; }
.logo { font-family: var(--font-syne); font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.2rem; }
.logo-accent { background: var(--grad-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(var(--neon-purple-rgb), 0.5)); }

.nav-list { display: flex; align-items: center; list-style: none; gap: 1.75rem; flex-wrap: wrap; justify-content: center; }
/* Todos los li como flex: unifica la caja de links (inline) y del botón Políticas (inline-flex), que desalineaba 8px */
.nav-list > li { display: flex; align-items: center; }
.nav-link { color: #ffffff; text-decoration: none; font-family: var(--font-title); font-weight: 500; position: relative; padding: 0.5rem 0; transition: color 0.3s ease; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--grad-primary); transition: width 0.3s ease; box-shadow: var(--glow-cyan); }
.nav-link:hover, .nav-link.active { color: #ffffff; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

/* Mega-menú "Políticas" — command deck: riel editorial + fichas-documento con stagger */
.nav-item-dropdown { position: relative; display: flex; align-items: center; }
/* Puente invisible: cubre el hueco entre el botón y el panel para que el hover no se corte al cruzarlo */
.nav-item-dropdown:hover::after, .nav-item-dropdown.is-open::after { content: ""; position: absolute; left: -30px; right: -30px; top: 100%; height: 22px; }
/* font-family/size explícitos (no `font: inherit`): el shorthand pisaba la tipografía de .nav-link en la cascada */
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font-title); font-weight: 500; font-size: 1rem; line-height: inherit; }
.nav-dropdown-caret { font-size: 0.62em; transition: transform 0.25s ease; }
.nav-item-dropdown:hover .nav-dropdown-caret, .nav-item-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(14px) scale(0.985);
  width: min(880px, calc(100vw - 24px)); margin-top: 14px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.09); overflow: hidden;
  background: linear-gradient(180deg, #0b1020 0%, #070b15 100%);
  box-shadow: 0 40px 90px -24px rgba(0,0,0,0.8), 0 0 60px -18px rgba(var(--neon-cyan-rgb), 0.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1), transform 0.28s cubic-bezier(0.22,1,0.36,1), visibility 0.28s;
  z-index: 80;
}
.nav-dropdown-menu::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--neon-cyan) 22%, #5b7cff 55%, #a07bff 82%, transparent);
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}
.mm-panel { position: relative; display: grid; grid-template-columns: 262px 1fr; }
.mm-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(440px 240px at 10% -5%, rgba(var(--neon-cyan-rgb), 0.10), transparent 62%),
    radial-gradient(460px 280px at 98% 112%, rgba(160,123,255,0.13), transparent 62%);
}
.mm-rail { position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: 1.8rem 1.55rem 1.5rem; }
.mm-rail::after { content: ""; position: absolute; top: 8%; bottom: 8%; right: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--neon-cyan-rgb), 0.35) 30%, rgba(160,123,255,0.3) 70%, transparent); }
.mm-eyebrow { font-family: var(--font-title); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--neon-cyan); }
.mm-title { margin: 0; font-family: var(--font-syne); font-size: 1.5rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: #fff; }
.mm-sub { margin: 0; font-size: 0.78rem; line-height: 1.6; color: #94a3b8; }
.mm-rail-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-family: var(--font-title); font-size: 0.8rem; font-weight: 700; color: var(--neon-cyan); text-decoration: none; transition: gap 0.2s ease; }
.mm-rail-link:hover { gap: 11px; }
.mm-rail-mail { font-family: var(--font-title); font-size: 0.62rem; letter-spacing: 0.08em; color: #6c7a95; text-decoration: none; padding: 4px 0; transition: color 0.18s ease; }
.mm-rail-mail:hover { color: var(--neon-cyan); }
.mm-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0.95rem; align-content: start; }
.mm-doc {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.9rem 2.1rem 0.9rem 1rem; border-radius: 15px; text-decoration: none;
  opacity: 0; transform: translateY(9px);
  transition: opacity 0.32s ease, transform 0.32s ease, background-color 0.16s ease;
}
.nav-item-dropdown:hover .mm-doc, .nav-item-dropdown.is-open .mm-doc { opacity: 1; transform: translateY(0); }
.nav-item-dropdown:hover .mm-doc:nth-child(2), .nav-item-dropdown.is-open .mm-doc:nth-child(2) { transition-delay: 0.03s; }
.nav-item-dropdown:hover .mm-doc:nth-child(3), .nav-item-dropdown.is-open .mm-doc:nth-child(3) { transition-delay: 0.06s; }
.nav-item-dropdown:hover .mm-doc:nth-child(4), .nav-item-dropdown.is-open .mm-doc:nth-child(4) { transition-delay: 0.09s; }
.nav-item-dropdown:hover .mm-doc:nth-child(5), .nav-item-dropdown.is-open .mm-doc:nth-child(5) { transition-delay: 0.12s; }
.nav-item-dropdown:hover .mm-doc:nth-child(6), .nav-item-dropdown.is-open .mm-doc:nth-child(6) { transition-delay: 0.15s; }
.nav-item-dropdown:hover .mm-doc:nth-child(7), .nav-item-dropdown.is-open .mm-doc:nth-child(7) { transition-delay: 0.18s; }
.nav-item-dropdown:hover .mm-doc:nth-child(8), .nav-item-dropdown.is-open .mm-doc:nth-child(8) { transition-delay: 0.21s; }
.mm-doc:hover, .mm-doc:focus-visible { background: rgba(255,255,255,0.045); box-shadow: inset 0 0 0 1px rgba(var(--neon-cyan-rgb), 0.25); }
.mm-doc:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: -2px; }
.mm-doc-index { border: 1.5px dashed rgba(255,255,255,0.14); }
.mm-doc-index:hover, .mm-doc-index:focus-visible { border-color: rgba(var(--neon-cyan-rgb), 0.5); background: rgba(var(--neon-cyan-rgb), 0.05); box-shadow: none; }
.mm-doc::after {
  content: "→"; position: absolute; top: 0.9rem; right: 0.95rem;
  font-size: 0.82rem; color: var(--neon-cyan); opacity: 0; transform: translateX(-7px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mm-doc:hover::after, .mm-doc:focus-visible::after { opacity: 1; transform: translateX(0); }
.mm-code { font-family: var(--font-title); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--neon-cyan-rgb), 0.8); }
.mm-doc b { font-family: var(--font-title); font-size: 0.9rem; font-weight: 600; color: #fff; line-height: 1.25; }
.mm-doc small { font-size: 0.72rem; line-height: 1.45; color: #8b98ad; }
@media (max-width: 900px) {
  .nav-dropdown-menu { width: min(440px, calc(100vw - 24px)); }
  .mm-panel { grid-template-columns: 1fr; }
  .mm-rail { border-bottom: 1px solid rgba(255,255,255,0.07); padding: 1.25rem 1.35rem 1.05rem; }
  .mm-rail::after { display: none; }
  .mm-title br { display: none; }
  .mm-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .nav-dropdown-menu, .nav-dropdown-caret, .mm-doc, .mm-doc::after, .mm-rail-link { transition: none; } .mm-doc { opacity: 1; transform: none; } }

.mobile-nav-toggle { display: none !important; background: transparent; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mobile-nav-toggle .bar { width: 100%; height: 2px; background-color: #fff; transition: var(--transition-smooth); }

/* HERO */
.hero-section { min-height: 100vh; display: flex; align-items: center; position: relative; padding-top: 150px; }
.hero-container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3rem; }

/* Canal IRC subido al hero (columna derecha) */
.hero-feed { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.hero-feed .feed-terminal { width: 100%; max-width: 460px; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15); border-radius: 30px; margin-bottom: 2rem; }
.badge-dot { width: 6px; height: 6px; background-color: var(--neon-cyan); border-radius: 50%; box-shadow: var(--glow-cyan); animation: pulse 2s infinite; }
.badge-text { font-family: var(--font-title); font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; color: #fff; }

.hero-title {
    font-family: var(--font-syne);
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 1.5rem;
    letter-spacing: -1.5px;
    overflow-wrap: normal; /* no partir 'Desarrollando' a la mitad */
    word-break: keep-all;
    max-width: 100%;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7)); /* Stronger shadow for contrast */
}
.hero-title .gradient-text { font-size: 0.86em; display: inline-block; }
.gradient-text { 
    background: var(--grad-accent); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.hero-description { 
    font-size: 1.2rem; 
    color: #e5f0ff; /* Brighter text for readability */
    max-width: 600px; 
    margin-bottom: 2.5rem; 
    font-weight: 400; 
    text-shadow: 0 2px 6px rgba(0,0,0,0.9); /* Stronger contrast */
}
.hero-actions-container { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.scroll-down { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.6; transition: opacity 0.3s; }
.scroll-down:hover { opacity: 1; }
.scroll-text { font-family: var(--font-title); font-size: 0.75rem; letter-spacing: 1px; color: #cbd5e1; text-transform: uppercase; }
.scroll-mouse { width: 20px; height: 32px; border: 2px solid #cbd5e1; border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-wheel { width: 4px; height: 8px; background-color: var(--neon-cyan); border-radius: 2px; animation: scroll-wheel-anim 1.6s infinite; box-shadow: var(--glow-cyan); }

/* PILARES */
.section-header { text-align: center; margin-bottom: 5rem; }
.section-title { font-family: var(--font-syne); font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; letter-spacing: -1px; text-shadow: 0 4px 10px rgba(0,0,0,0.8); }
.step-icon { color: var(--neon-cyan); font-size: 0.8em; margin-right: 0.4rem; text-shadow: var(--glow-cyan); }
.section-subtitle { font-size: 1.15rem; max-width: 600px; margin: 0 auto; font-weight: 400; color: #e2e8f0; }
.pilares-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

.pilar-card h3 { font-size: 1.4rem; margin-bottom: 1rem; transform: translateZ(30px); }
.pilar-card p { font-size: 1rem; margin-bottom: 1.5rem; transform: translateZ(20px); color: #cbd5e1; }
.pilar-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; transform: translateZ(25px); }
.pilar-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; font-weight: 500; color: #fff; }

.pilar-icon-wrapper { position: relative; width: 64px; height: 64px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 2rem; transform: translateZ(40px); transition: var(--transition-smooth); }
.pilar-card:hover .pilar-icon-wrapper { border-color: rgba(var(--neon-cyan-rgb), 0.6); box-shadow: inset 0 0 20px rgba(var(--neon-cyan-rgb), 0.3); }
.icon-glow { position: absolute; width: 100%; height: 100%; border-radius: 16px; filter: blur(15px); opacity: 0; transition: opacity 0.4s; }
.pilar-card:hover .icon-glow { opacity: 0.4; }
.icon-glow.cyan { background-color: var(--neon-cyan); }
.icon-glow.purple { background-color: var(--neon-purple); }
.icon-glow.green { background-color: var(--neon-green); }

/* ECOSISTEMA Y COUNTER */
.ecosistema-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ecosistema-title { font-family: var(--font-syne); font-size: clamp(2rem, 3vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -1px; text-shadow: 0 4px 10px rgba(0,0,0,0.8); }
.ecosistema-desc { font-size: 1.15rem; margin: 1.5rem 0 2.5rem 0; font-weight: 400; color: #e2e8f0; }

.counter-widget { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 2.25rem; background: rgba(5, 8, 15, 0.85); }
.counter-display { display: flex; align-items: baseline; font-family: var(--font-title); font-weight: 800; color: #fff; white-space: nowrap; transform: translateZ(30px); }
.counter-prefix { font-size: 2.5rem; color: var(--neon-cyan); margin-right: 0.2rem; text-shadow: var(--glow-cyan); }
.counter-number { font-size: 4.2rem; line-height: 1; white-space: nowrap; background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.counter-label { font-size: 1rem; font-weight: 500; transform: translateZ(20px); color: #e2e8f0; }
.counter-join { margin-top: 1.25rem; transform: translateZ(20px); }

/* TERMINAL FEED */
.feed-terminal { font-family: var(--font-retro); padding: 0; overflow: hidden; background: rgba(3, 5, 10, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.1); }
.terminal-header { background: rgba(8, 12, 20, 0.95); padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); transform: translateZ(10px); }
.terminal-dots { display: flex; gap: 8px; }
.terminal-dots .dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dots .dot.red { background-color: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); }
.terminal-dots .dot.yellow { background-color: #fefe00; }
.terminal-dots .dot.green { background-color: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.terminal-title { font-family: var(--font-retro); font-size: 1.15rem; letter-spacing: 1px; font-weight: 400; color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.terminal-status { font-family: var(--font-retro); font-size: 1.05rem; letter-spacing: 1px; font-weight: 400; color: var(--neon-green); animation: blink 1.5s infinite; text-shadow: var(--glow-green); }
.terminal-body { padding: 1.5rem; height: 340px; overflow-y: hidden; display: flex; flex-direction: column; gap: 0.6rem; transform: translateZ(20px); }
.terminal-line { font-size: 1.08rem; line-height: 1.35; letter-spacing: 0.3px; color: #cbd5e1; animation: console-write 0.3s ease-out forwards; }
.terminal-time { color: #94a3b8; margin-right: 0.5rem; }

/* Canal IRC #ia-latam */
.irc-time { color: #5b6b85; margin-right: 0.45rem; }
.irc-nick { color: var(--neon-cyan); font-weight: 600; }
.irc-join { color: var(--neon-green); font-weight: 700; }
.irc-part { color: #f5a623; font-weight: 700; }
.irc-sys { color: var(--neon-purple-text); font-style: italic; }

/* TIMELINE EVENTOS */
.timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 2rem 0; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 40px; width: 2px; background: linear-gradient(180deg, var(--neon-cyan) 0%, var(--neon-purple) 50%, transparent 100%); box-shadow: var(--glow-cyan); }
.timeline-item { position: relative; padding-left: 80px; margin-bottom: 3.5rem; }
.timeline-marker { position: absolute; left: 31px; top: 30px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-deep); border: 3px solid var(--neon-cyan); box-shadow: var(--glow-cyan); z-index: 2; transition: transform 0.3s; }
.timeline-marker.purple-glow { border-color: var(--neon-purple); box-shadow: var(--glow-purple); }
.timeline-item:hover .timeline-marker { transform: scale(1.4); background-color: #fff; }

.event-meta { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; font-family: var(--font-title); font-size: 0.9rem; transform: translateZ(20px); color: #cbd5e1; }
.timeline-content h3 { font-size: 1.35rem; margin-bottom: 0.85rem; transform: translateZ(30px); }
.timeline-content p { font-size: 1rem; margin-bottom: 1.25rem; transform: translateZ(20px); }
.event-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; transform: translateZ(25px); }
.badge-tag { font-family: var(--font-title); font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: #fff; }
.badge-tag.cyan { border-color: rgba(var(--neon-cyan-rgb), 0.5); color: var(--neon-cyan); }
.badge-tag.purple { border-color: rgba(var(--neon-purple-rgb), 0.5); color: var(--neon-purple-text); }
.badge-tag.green { border-color: rgba(var(--neon-green-rgb), 0.5); color: var(--neon-green); }

/* CTA FINAL */
.cta-box { padding: 5rem 3rem; border: 1px solid rgba(var(--neon-cyan-rgb), 0.4); box-shadow: 0 30px 80px rgba(0, 242, 254, 0.15); background: rgba(5, 8, 15, 0.85); }
.cta-box h2 { font-family: var(--font-syne); font-size: clamp(2rem, 3.5vw, 3.5rem); margin-bottom: 1rem; transform: translateZ(40px); }
.cta-box p { transform: translateZ(30px); color: #e2e8f0; }
.cta-glow { position: absolute; width: 300px; height: 300px; background-color: var(--neon-purple); border-radius: 50%; filter: blur(120px); opacity: 0.25; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.cta-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; transform: translateZ(50px); }

/* FOOTER */
.footer { background-color: #010207; border-top: 1px solid rgba(255,255,255,0.12); padding: 5rem 0 2rem 0; position: relative; z-index: 2; }
.footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4rem; margin-bottom: 4rem; }
.footer-tagline { font-size: 1rem; max-width: 350px; margin-top: 1rem; color: #cbd5e1; }
.footer-newsletter-col { max-width: 450px; width: 100%; }
.footer-newsletter-col h4 { font-size: 1.15rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; }
.newsletter-form .input-group { display: flex; padding: 0.4rem; border-radius: 30px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.newsletter-form input { flex: 1; background: transparent; border: none; outline: none; padding: 0.75rem 1.25rem; color: #fff; font-family: var(--font-body); font-size: 1rem; }
.newsletter-form input::placeholder { color: #64748b; }
.btn-submit { width: 44px; height: 44px; background: var(--grad-primary); border: none; border-radius: 50%; color: var(--bg-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.3s, box-shadow 0.3s; }
.btn-submit:hover { box-shadow: var(--glow-cyan); transform: scale(1.1); }
.footer-grid { max-width: 1280px; margin: 0 auto 3rem; padding: 0 2rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand .logo-line { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-syne); font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; margin-bottom: 1rem; }
.footer-brand .logo-line img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.35)) drop-shadow(0 0 12px rgba(var(--neon-cyan-rgb), 0.3)); }
.footer-brand p { color: #94a3b8; max-width: 46ch; font-size: 0.93rem; line-height: 1.65; }
.footer-soc { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-soc a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; color: #94a3b8; font-size: 1.05rem; transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.footer-soc a:hover { color: var(--neon-cyan); border-color: rgba(var(--neon-cyan-rgb), 0.5); transform: translateY(-2px); }
.footer-col h4 { font-family: var(--font-title); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: #6c7a95; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; }
.footer-col a { color: #a9b6cc; font-size: 0.93rem; text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--neon-cyan); }
.footer-col .soon { color: #6c7a95; font-size: 0.93rem; cursor: default; }
.footer-col .soon i { font-style: normal; font-family: var(--font-title); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px dashed rgba(255,255,255,0.22); border-radius: 999px; padding: 0.12rem 0.45rem; margin-left: 0.4rem; vertical-align: middle; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2rem; text-align: center; font-size: 0.9rem; color: #94a3b8; }
.copyleft-line { max-width: 620px; margin: 0 auto; line-height: 1.6; }
.copyleft-mark { display: inline-block; transform: scaleX(-1); color: var(--neon-green); font-weight: 700; }
.copyleft-line strong { color: #cbd5e1; }
.copyleft-line a { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px solid rgba(var(--neon-cyan-rgb), 0.4); transition: color 0.3s, border-color 0.3s; }
.copyleft-line a:hover { color: var(--neon-green); border-color: var(--neon-green); }

/* ANIMACIONES */
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes scroll-wheel-anim { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes console-write { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* MOBILE OVERLAY */
/* visibility:hidden (con delay igual a la duracion de la transicion de opacity) saca los
   enlaces del menu cerrado del orden de tabulacion, igual que el patron ya usado en index.html */
body.menu-open { overflow: hidden; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 4, 8, 0.98); backdrop-filter: blur(20px); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6rem 0; }
.mobile-overlay.active { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.4s; }
.mobile-nav-list { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.mobile-nav-link { font-family: var(--font-syne); font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
.mobile-nav-link:hover { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.mobile-nav-group-label { font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.4); margin-top: 0.5rem; }
.mobile-nav-sublink { font-family: var(--font-title) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #cfe0f5 !important; min-height: 44px; display: flex; align-items: center; }
.mobile-nav-sublink:hover { color: var(--neon-cyan) !important; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    .hero-content { align-items: center; }
    .hero-actions-container { justify-content: center; }
    .hero-feed { margin-top: 2.5rem; }
    .hero-feed .feed-terminal { max-width: 520px; }
    .pilares-grid { grid-template-columns: 1fr 1fr; }
    .ecosistema-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .ecosistema-feed-wrapper { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
    .section-padding { padding: 5rem 0; }
    .nav { display: none; }
    .header-bottom { display: none; }
    .header-top { padding-bottom: 0.15rem; }
    .header-container { padding-bottom: 0.5rem; }
    .nav-list { gap: 0.5rem 1.1rem; font-size: 0.88rem; }
    .btn-nav { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
    .mobile-nav-toggle { display: flex !important; flex-direction: column; justify-content: space-between; padding: 10px; }
    .mobile-nav-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-nav-toggle.active .bar:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .pilares-grid { grid-template-columns: 1fr; }
    .timeline::before { left: 20px; }
    .timeline-item { padding-left: 50px; }
    .timeline-marker { left: 11px; }
    .tilt-card { transform: none !important; }
}
/* ==========================================================================
   PÁGINA MANIFIESTO
   ========================================================================== */
.manifiesto-page { background-color: var(--bg-deep); }
.manifiesto-main { position: relative; z-index: 1; padding-bottom: 4rem; }

/* Aurora background CSS (reemplaza al WebGL en esta página) */
.aurora-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora-bg .orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.30; }
.orb-cyan { width: 45vw; height: 45vw; background: var(--neon-cyan); top: -10vw; left: -8vw; animation: orb-float-a 22s ease-in-out infinite; }
.orb-purple { width: 50vw; height: 50vw; background: var(--neon-purple); bottom: -15vw; right: -10vw; animation: orb-float-b 26s ease-in-out infinite; }
.orb-green { width: 32vw; height: 32vw; background: var(--neon-green); top: 40%; left: 50%; opacity: 0.16; animation: orb-float-c 30s ease-in-out infinite; }
@keyframes orb-float-a { 50% { transform: translate(8vw, 10vh) scale(1.1); } }
@keyframes orb-float-b { 50% { transform: translate(-10vw, -8vh) scale(1.15); } }
@keyframes orb-float-c { 50% { transform: translate(-12vw, 6vh) scale(0.9); } }
/* Viñeta para garantizar contraste del texto sobre la aurora */
.manifiesto-page::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(3,4,8,0.55) 0%, rgba(3,4,8,0.92) 100%);
}

/* Cursor estado activo (esta página usa transform inline, no GSAP) */
.custom-cursor.cursor-active { width: 12px; height: 12px; background-color: var(--neon-green); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Hero del manifiesto */
.man-hero { padding: 11rem 0 4rem; text-align: center; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #94a3b8; text-decoration: none; font-family: var(--font-title); font-size: 0.9rem; margin-bottom: 2.5rem; transition: color 0.3s, gap 0.3s; }
.back-link:hover { color: var(--neon-cyan); gap: 0.8rem; }
.man-hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15); border-radius: 30px; margin-bottom: 2rem; }
.man-hero-badge .badge-text { font-family: var(--font-title); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; color: #fff; }
.man-emoji-line { font-size: 2rem; letter-spacing: 0.8rem; margin-bottom: 1.5rem; filter: drop-shadow(0 0 20px rgba(var(--neon-cyan-rgb), 0.4)); }
.man-title { font-family: var(--font-syne); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -2px; margin-bottom: 2rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7)); }
.man-subtitle { max-width: 760px; margin: 0 auto; font-size: 1.2rem; line-height: 1.7; color: #e5f0ff; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.man-subtitle strong { color: #fff; }

.man-section { margin-top: 6rem; }

/* Principios del manifiesto */
.principles { list-style: none; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.principle { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: start; padding: 1.85rem 2.1rem; border-radius: 16px; background: rgba(5,8,15,0.6); border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--neon-cyan); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.principle:hover { transform: translateX(8px); border-left-color: var(--neon-green); background: rgba(5,8,15,0.9); box-shadow: -6px 0 30px rgba(var(--neon-cyan-rgb), 0.12); }
.principle-num { font-family: var(--font-syne); font-size: 2.7rem; font-weight: 800; line-height: 1; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.95; min-width: 2.4ch; }
.principle-body h3 { font-family: var(--font-syne); font-size: 1.4rem; margin-bottom: 0.5rem; color: #fff; }
.principle-body p { font-size: 1.06rem; line-height: 1.65; color: #cbd5e1; }

/* Preámbulo de las reglas */
.preamble-card { max-width: 800px; margin: 0 auto; text-align: center; padding: 2.1rem 2.5rem; border-color: rgba(var(--neon-cyan-rgb), 0.25); }
.preamble-card p { font-size: 1.18rem; line-height: 1.6; color: #e5f0ff; }
.preamble-card strong { color: #fff; }

/* Paneles esperamos / no se acepta */
.man-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.man-panel { padding: 2.5rem; }
.panel-positive { border-top: 3px solid var(--neon-green); }
.panel-negative { border-top: 3px solid var(--neon-red); }
.panel-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; transform: translateZ(30px); }
.panel-head h2 { font-family: var(--font-syne); font-size: 1.55rem; }
.panel-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.panel-icon.green { color: var(--neon-green); background: rgba(var(--neon-green-rgb), 0.1); border: 1px solid rgba(var(--neon-green-rgb), 0.35); }
.panel-icon.red { color: var(--neon-red); background: rgba(255, 77, 109, 0.1); border: 1px solid rgba(255, 77, 109, 0.35); }
.man-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; transform: translateZ(20px); }
.man-list li { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 1.02rem; line-height: 1.5; color: #e2e8f0; }
.man-list li strong { color: #fff; }
.man-list li em { color: #cbd5e1; font-style: italic; }
.man-list i { margin-top: 0.25rem; flex-shrink: 0; font-size: 0.9rem; }
.man-list.good i { color: var(--neon-green); }
.man-list.bad i { color: var(--neon-red); }

/* Escalera de sanciones */
.escalation { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: esc; }
.esc-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.esc-node { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-syne); font-size: 1.6rem; font-weight: 800; color: var(--accent); background: rgba(3,5,10,0.9); border: 2px solid var(--accent); box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.5), inset 0 0 14px rgba(var(--accent-rgb), 0.25); margin-bottom: -30px; z-index: 2; position: relative; }
.esc-card { padding: 3rem 1.5rem 1.75rem; width: 100%; height: 100%; border-color: rgba(var(--accent-rgb), 0.3) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.esc-step:hover .esc-card { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.6) !important; }
.esc-card h3 { font-family: var(--font-title); font-size: 1.1rem; margin-bottom: 0.6rem; color: #fff; }
.esc-card p { font-size: 0.92rem; color: #cbd5e1; line-height: 1.5; }

/* Tolerancia cero */
.zero-tolerance { display: flex; align-items: center; gap: 1.5rem; margin-top: 3.5rem; padding: 2rem 2.5rem; border-radius: 16px; background: linear-gradient(120deg, rgba(255,77,109,0.14), rgba(255,77,109,0.04)); border: 1px solid rgba(255,77,109,0.4); box-shadow: 0 0 40px rgba(255,77,109,0.12); }
.zt-icon { font-size: 2rem; color: var(--neon-red); flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(255,77,109,0.6)); }
.zt-text { font-size: 1.08rem; line-height: 1.6; color: #ffe4e9; }
.zt-text strong { color: #fff; font-family: var(--font-title); display: block; margin-bottom: 0.2rem; font-size: 1.15rem; }

/* Caja de reporte */
.report-box { text-align: center; padding: 3.5rem 2.5rem; max-width: 720px; margin: 0 auto; border-color: rgba(var(--neon-cyan-rgb), 0.3); }
.report-shield { width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.08); border: 1px solid rgba(var(--neon-cyan-rgb), 0.35); box-shadow: inset 0 0 25px rgba(var(--neon-cyan-rgb), 0.2); transform: translateZ(40px); }
.report-box h2 { font-family: var(--font-syne); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; transform: translateZ(30px); }
.report-box p { font-size: 1.1rem; line-height: 1.6; color: #e2e8f0; max-width: 520px; margin: 0 auto 2rem; transform: translateZ(20px); }
.report-box .btn { transform: translateZ(50px); }

/* Cierre */
.man-closing { text-align: center; max-width: 700px; }
.closing-line { font-family: var(--font-syne); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; font-style: italic; line-height: 1.4; color: #f1f5f9; }
.closing-line + .closing-line { margin-top: 1rem; }
.closing-line.accent { background: var(--grad-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Footer links (compartido) */
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.footer-links a { color: #cbd5e1; text-decoration: none; font-size: 0.98rem; transition: color 0.3s, padding-left 0.3s; }
.footer-links a:hover { color: var(--neon-cyan); padding-left: 4px; }
.footer-column h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 2px; }

/* Responsive manifiesto */
@media (max-width: 900px) {
    .man-panels { grid-template-columns: 1fr; }
    .escalation { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
}
@media (max-width: 768px) {
    .man-hero { padding: 9rem 0 3rem; }
    .zero-tolerance { flex-direction: column; text-align: center; align-items: center; gap: 1rem; }
}
@media (max-width: 520px) {
    .escalation { grid-template-columns: 1fr; }
    .man-emoji-line { letter-spacing: 0.4rem; }
}

/* ==========================================================================
   LOGO MARK CIRCULAR
   ========================================================================== */
.logo { gap: 0.65rem; align-items: center; }
.logo-word { display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1; }
.logo-mark {
    width: 48px; height: 48px; flex-shrink: 0; display: block; object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)) drop-shadow(0 0 14px rgba(var(--neon-cyan-rgb), 0.35));
    transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1), filter 0.4s ease;
}
.logo:hover .logo-mark { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(255,255,255,0.55)) drop-shadow(0 0 20px rgba(var(--neon-cyan-rgb), 0.55)); }
.logo-mark-lg { width: 64px; height: 64px; border-radius: 16px; }
.footer-logo { gap: 0.8rem; }

/* ==========================================================================
   BADGE "PRONTO" (evento próximo)
   ========================================================================== */
.event-soon {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--font-title); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon-green);
    background: rgba(var(--neon-green-rgb), 0.12); border: 1px solid rgba(var(--neon-green-rgb), 0.45);
    padding: 0.28rem 0.75rem; border-radius: 20px; box-shadow: 0 0 14px rgba(var(--neon-green-rgb), 0.25);
}
.event-soon::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); animation: pulse 2s infinite;
}

/* ==========================================================================
   PRELOADER CINEMATOGRÁFICO
   ========================================================================== */
.preloader { position: fixed; inset: 0; z-index: 10001; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; transition: opacity 0.7s ease, visibility 0.7s ease; }
.preloader.loaded { opacity: 0; visibility: hidden; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; width: min(320px, 78vw); }
.preloader-logo { width: 118px; height: 118px; object-fit: cover; border-radius: 26px; background: #fff; animation: pre-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 45px rgba(var(--neon-cyan-rgb), 0.4); }
.preloader-wordmark { font-family: var(--font-syne); font-size: 1.5rem; font-weight: 800; letter-spacing: 1px; color: #fff; }
.preloader-track { width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.preloader-fill { display: block; height: 100%; width: 0%; background: var(--grad-accent); box-shadow: 0 0 12px rgba(var(--neon-cyan-rgb), 0.6); transition: width 0.45s cubic-bezier(0.4,0,0.2,1); }
.preloader-status { font-family: var(--font-retro); font-size: 1.05rem; letter-spacing: 0.8px; color: #8ea3c0; min-height: 1.2em; text-align: center; }
@keyframes pre-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ==========================================================================
   BARRA DE PROGRESO DE SCROLL
   ========================================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 10000; background: var(--grad-accent); box-shadow: 0 0 10px rgba(var(--neon-cyan-rgb), 0.6); transition: width 0.1s linear; pointer-events: none; }

/* ==========================================================================
   BANDA DE MÉTRICAS
   ========================================================================== */
.stats-band { padding: 2.75rem 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(5,8,15,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { text-align: center; position: relative; padding: 0.5rem 1rem; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,0.1); }
.stat-num { display: block; font-family: var(--font-syne); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { display: block; margin-top: 0.55rem; font-size: 0.9rem; color: #94a3b8; font-family: var(--font-title); letter-spacing: 0.3px; }
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   BANDERAS DE LATINOAMÉRICA (marquee)
   ========================================================================== */
.flags-band { padding: 3.5rem 0; position: relative; z-index: 2; }
.flags-kicker { text-align: center; font-family: var(--font-title); font-size: 0.95rem; font-weight: 500; color: #cbd5e1; margin-bottom: 1.5rem; }
.flags-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.flags-track { display: flex; gap: 2.2rem; width: max-content; will-change: transform; }
.flag { width: 48px; height: 32px; flex-shrink: 0; border-radius: 5px; object-fit: cover; opacity: 0.82; box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; }
.flag:hover { transform: translateY(-4px) scale(1.14); opacity: 1; box-shadow: 0 8px 22px rgba(var(--neon-cyan-rgb), 0.35); }
@keyframes flags-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   ÚNETE EN 3 PASOS
   ========================================================================== */
.join-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.join-step { text-align: left; padding: 2.5rem 2rem; position: relative; }
.join-num { position: absolute; top: 1.4rem; right: 1.75rem; font-family: var(--font-syne); font-size: 3.5rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.06); transform: translateZ(10px); }
.join-icon { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.08); border: 1px solid rgba(var(--neon-cyan-rgb), 0.3); margin-bottom: 1.5rem; transform: translateZ(40px); transition: var(--transition-smooth); }
.join-step:nth-child(2) .join-icon { color: var(--neon-green); background: rgba(var(--neon-green-rgb), 0.08); border-color: rgba(var(--neon-green-rgb), 0.3); }
.join-step:nth-child(3) .join-icon { color: var(--neon-purple-text); background: rgba(var(--neon-purple-rgb), 0.1); border-color: rgba(var(--neon-purple-rgb), 0.35); }
.join-step:hover .join-icon { transform: translateZ(40px) scale(1.08); }
.join-step h3 { font-size: 1.3rem; margin-bottom: 0.75rem; transform: translateZ(30px); }
.join-step p { font-size: 1rem; color: #cbd5e1; line-height: 1.6; transform: translateZ(20px); }
.join-cta { text-align: center; margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   BANNER: PROYECTO OPEN SOURCE (RoadmapIA)
   ========================================================================== */
.project-banner { display: flex; align-items: center; gap: 2.5rem; padding: 3rem; border: 1px solid rgba(var(--neon-cyan-rgb), 0.35); background: linear-gradient(120deg, rgba(10,22,46,0.92), rgba(5,8,15,0.92)); }
.project-glow { position: absolute; right: -10%; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--neon-cyan-rgb),0.3), transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; }
.project-content { position: relative; z-index: 1; flex: 1; }
.project-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon-green); background: rgba(var(--neon-green-rgb), 0.1); border: 1px solid rgba(var(--neon-green-rgb), 0.4); padding: 0.4rem 0.9rem; border-radius: 30px; }
.project-title { font-family: var(--font-syne); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -1px; margin: 1.1rem 0 1rem; transform: translateZ(30px); }
.project-tld { color: #64748b; font-weight: 700; }
.project-desc { font-size: 1.08rem; line-height: 1.65; color: #d4e2f5; max-width: 640px; margin-bottom: 1.75rem; transform: translateZ(20px); }
.project-cta { display: flex; gap: 1rem; flex-wrap: wrap; transform: translateZ(40px); }
.project-visual { position: relative; z-index: 1; flex-shrink: 0; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; color: var(--neon-cyan); border-radius: 28px; background: rgba(var(--neon-cyan-rgb), 0.06); border: 1px solid rgba(var(--neon-cyan-rgb), 0.3); box-shadow: inset 0 0 30px rgba(var(--neon-cyan-rgb), 0.18); }
@media (max-width: 768px) {
    .project-banner { flex-direction: column-reverse; text-align: center; padding: 2.25rem 1.5rem; gap: 1.75rem; }
    .project-cta { justify-content: center; }
    .project-cta .btn { width: 100%; justify-content: center; }
    .project-visual { width: 110px; height: 110px; font-size: 3rem; }
    .project-desc { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   CANALES / GRUPOS DE LA MEGA-COMUNIDAD
   ========================================================================== */
.channels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.channel-card { display: block; text-decoration: none; color: inherit; padding: 1.75rem; }
.channel-card:hover { border-color: rgba(var(--neon-cyan-rgb), 0.6); }
.channel-icon { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.08); border: 1px solid rgba(var(--neon-cyan-rgb), 0.3); margin-bottom: 1.1rem; transform: translateZ(40px); transition: var(--transition-smooth); }
.channel-card:hover .channel-icon { background: rgba(var(--neon-cyan-rgb), 0.18); transform: translateZ(40px) scale(1.08); }
.channel-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; transform: translateZ(30px); }
.channel-card p { font-size: 0.9rem; color: #cbd5e1; line-height: 1.5; transform: translateZ(20px); }
/* Iconos alternados por color para dar vida */
.channel-card:nth-child(3n+2) .channel-icon { color: var(--neon-green); background: rgba(var(--neon-green-rgb), 0.08); border-color: rgba(var(--neon-green-rgb), 0.3); }
.channel-card:nth-child(3n+2):hover .channel-icon { background: rgba(var(--neon-green-rgb), 0.18); }
.channel-card:nth-child(3n) .channel-icon { color: var(--neon-purple-text); background: rgba(var(--neon-purple-rgb), 0.1); border-color: rgba(var(--neon-purple-rgb), 0.35); }
.channel-card:nth-child(3n):hover .channel-icon { background: rgba(var(--neon-purple-rgb), 0.2); }

/* Paso 2: tarjeta-enlace a LinkedIn */
.join-step-link { text-decoration: none; color: inherit; cursor: pointer; display: block; }
.join-icon-li { color: #4aa3ff !important; background: rgba(74,163,255,0.1) !important; border-color: rgba(74,163,255,0.35) !important; }
.join-link-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; font-family: var(--font-title); font-size: 0.9rem; font-weight: 600; color: #4aa3ff; transition: gap 0.3s ease; transform: translateZ(20px); }
.join-step-link:hover .join-link-cta { gap: 0.85rem; }
.join-step-link:hover { border-color: rgba(74,163,255,0.45); }

/* ==========================================================================
   RESPONSIVE MÓVIL — MODO ÉPICO
   ========================================================================== */
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .header-container { padding: 1rem 1.25rem; }
    .logo { font-size: 1.35rem; gap: 0.55rem; }
    .logo-mark { width: 38px; height: 38px; }

    /* Botones: targets táctiles cómodos */
    .btn { min-height: 50px; padding: 0.9rem 1.6rem; }
    .mobile-nav-toggle { width: 44px; height: 44px; justify-content: space-between; }

    /* HERO más impactante y centrado en celular */
    .hero-section { min-height: 100svh; padding-top: 160px; text-align: center; }
    .hero-badge { margin-bottom: 1.5rem; }
    .hero-title { font-size: clamp(1.9rem, 8.8vw, 2.6rem); letter-spacing: -0.5px; line-height: 1.08; }
    .hero-description { font-size: 1.08rem; margin-left: auto; margin-right: auto; }
    .hero-actions-container { flex-direction: column; width: 100%; gap: 1rem; }
    .hero-actions-container .btn { width: 100%; justify-content: center; }
    .scroll-down { display: none; }

    /* PILARES: respiración */
    .section-header { margin-bottom: 3rem; }
    .pilar-card { padding: 2rem; }
    .tilt-card { padding: 2rem; }

    /* ECOSISTEMA: contador apilado y centrado */
    .ecosistema-layout { gap: 2.5rem; }
    .counter-widget { flex-direction: column; text-align: center; gap: 1rem; padding: 2rem 1.5rem; }
    .counter-number { font-size: 3.6rem; }
    .counter-prefix { font-size: 2rem; }
    .feed-terminal .terminal-body { height: 260px; padding: 1.25rem; gap: 0.7rem; }
    .terminal-line { font-size: 0.82rem; }

    /* MÉTRICAS: 3 en una fila en celular (son 3, así quedan centradas) */
    .stats-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .stat { padding: 0.4rem 0.3rem; }
    .stats-band .stat-num { font-size: 1.8rem; }
    .stats-band .stat-label { font-size: 0.66rem; letter-spacing: 0; line-height: 1.25; }
    .stat + .stat::before { display: none; }

    /* PASOS apilados */
    .join-steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .join-step { padding: 2rem 1.75rem; }

    /* EVENTOS */
    .event-meta { flex-wrap: wrap; gap: 0.6rem 1rem; }
    .timeline-content h3 { font-size: 1.2rem; }

    /* CTA FINAL */
    .cta-box { padding: 3rem 1.5rem; }
    .cta-buttons { flex-direction: column; width: 100%; }
    .cta-buttons .btn { width: 100%; justify-content: center; }

    /* FOOTER apilado y centrado */
    .footer { padding: 3.5rem 0 2rem; text-align: center; }
    .footer-container { flex-direction: column; gap: 2.5rem; margin-bottom: 2.5rem; align-items: center; }
    .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .footer-tagline { margin-left: auto; margin-right: auto; }
    .footer-links { align-items: center; }
    .footer-newsletter-col { margin: 0 auto; }

    /* MANIFIESTO en celular */
    .man-hero { padding-top: 120px; }
    .man-title { font-size: clamp(2.6rem, 13vw, 3.4rem); letter-spacing: -1px; }
    .man-subtitle { font-size: 1.05rem; }
    .man-section { margin-top: 4rem; }
    .man-panel { padding: 1.75rem; }
    .report-box { padding: 2.5rem 1.5rem; }
    .report-box .btn { width: 100%; }
    .zero-tolerance { padding: 1.75rem 1.5rem; }
    .principle { padding: 1.4rem 1.5rem; gap: 1rem; }
    .principle-num { font-size: 2.1rem; min-width: 2ch; }
    .principle-body h3 { font-size: 1.2rem; }
    .principle-body p { font-size: 1rem; }
    .preamble-card { padding: 1.75rem 1.5rem; }
    .preamble-card p { font-size: 1.05rem; }
}

@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .hero-title { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
    .badge-text { font-size: 0.68rem; letter-spacing: 1px; }
    .section-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .counter-number { font-size: 3rem; }
    .pilar-card, .tilt-card { padding: 1.65rem; }
    .man-emoji-line { font-size: 1.6rem; }
    .esc-node { width: 52px; height: 52px; font-size: 1.35rem; }
}

/* Pantallas muy bajas: que el hero no recorte el CTA */
@media (max-height: 680px) and (max-width: 768px) {
    .hero-section { min-height: auto; padding-top: 140px; padding-bottom: 4rem; }
}

/* ==========================================================================
   PERFECCIÓN MÓVIL — pase final (mayor prioridad, consolida el responsive)
   ========================================================================== */
@media (max-width: 767px) {
    /* Ritmo y aire */
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .section-padding { padding: 4.5rem 0; }
    .section-header { margin-bottom: 2.5rem; }
    .section-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
    .section-subtitle { font-size: 1rem; line-height: 1.55; }

    /* Header compacto */
    .header-container { padding: 0.85rem 1.25rem; }
    .logo { font-size: 1.3rem; }

    /* HERO con jerarquía y respiración */
    .hero-section { min-height: 100svh; padding-top: 6.5rem; padding-bottom: 3rem; }
    .hero-badge { margin-bottom: 1.25rem; padding: 0.45rem 0.9rem; }
    .hero-title { font-size: clamp(1.9rem, 8.8vw, 2.6rem); margin-bottom: 1.25rem; line-height: 1.08; }
    .hero-description { font-size: 1.05rem; line-height: 1.65; margin-bottom: 2rem; }

    /* PILARES centrados y legibles en una columna */
    .pilar-card { text-align: center; }
    .pilar-icon-wrapper { margin-left: auto; margin-right: auto; }
    .pilar-list { align-items: center; }
    .pilar-list li { justify-content: flex-start; max-width: 280px; margin: 0 auto; width: 100%; }

    /* ECOSISTEMA */
    .ecosistema-title { font-size: clamp(1.8rem, 7vw, 2.3rem); }
    .counter-number { font-size: 3.4rem; }
    .feed-terminal .terminal-body { height: 230px; }

    /* MÉTRICAS */
    .stats-band { padding: 2.25rem 0; }
    .stat-num { font-size: 2.4rem; }
    .stat-label { font-size: 0.82rem; }

    /* ÚNETE */
    .join-num { font-size: 3rem; top: 1.2rem; right: 1.4rem; }

    /* CTA + FOOTER ya apilados arriba; reforzar tipografía */
    .cta-box h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

/* Teléfonos angostos (≤380px): que nada se apriete ni desborde */
@media (max-width: 380px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    .hero-title { font-size: clamp(1.7rem, 8vw, 2.2rem); letter-spacing: -0.3px; }
    .logo { font-size: 0.9rem; gap: 0.35rem; }
    .logo-word { letter-spacing: -0.2px; }
    .logo-mark { width: 30px; height: 30px; }
    .logo-mark { width: 34px; height: 34px; }
    .hero-description { font-size: 1rem; }
    .stat-num { font-size: 2.1rem; }
    .counter-number { font-size: 2.9rem; }
    .man-emoji-line { font-size: 1.5rem; letter-spacing: 0.3rem; }
    .esc-node { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
/* Índice */
.blog-post-tag { display: inline-block; font-family: var(--font-title); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.1); border: 1px solid rgba(var(--neon-cyan-rgb), 0.3); padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 1.1rem; }

/* Blog slider (home) */
.blog-slider { position: relative; }
.blog-slider-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0.25rem 1.25rem; -ms-overflow-style: none; scrollbar-width: none; }
.blog-slider-track::-webkit-scrollbar { display: none; }
.blog-slide { flex: 0 0 340px; max-width: 86vw; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.8rem; }
.blog-slide:hover { border-color: rgba(var(--neon-cyan-rgb), 0.5); }
.blog-slide h3 { font-family: var(--font-syne); font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.7rem; }
.blog-slide p { font-size: 0.95rem; color: #cbd5e1; line-height: 1.55; flex: 1 1 auto; }
.blog-slider-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(5,8,15,0.85); border: 1px solid rgba(var(--neon-cyan-rgb),0.4); color: var(--neon-cyan); cursor: pointer; transition: var(--transition-smooth); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.blog-slider-arrow:hover { background: rgba(var(--neon-cyan-rgb),0.15); box-shadow: 0 0 20px rgba(var(--neon-cyan-rgb),0.5); }
.blog-slider-arrow.prev { left: -10px; }
.blog-slider-arrow.next { right: -10px; }
.blog-slider-foot { text-align: center; margin-top: 1.5rem; }
@media (max-width: 768px) { .blog-slider-arrow { display: none; } .blog-slide { flex-basis: 80vw; } }

/* Barra de registro del evento (fija arriba del todo) */
.event-banner { position: fixed; top: 0; left: 0; width: 100%; height: 40px; z-index: 1100; display: flex; align-items: center; justify-content: center; gap: 0.65rem; text-decoration: none; color: #04070f; font-family: var(--font-title); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(90deg, #00f2fe, #4facfe, #8b5cf6, #00f2fe); background-size: 300% auto; animation: eventBannerShimmer 8s linear infinite; box-shadow: 0 2px 22px rgba(0, 242, 254, 0.3); transition: filter 0.3s; }
.event-banner:hover { filter: brightness(1.08); }
.event-banner i { transition: transform 0.3s; }
.event-banner:hover i { transform: translateX(4px); }
.event-banner-sub { font-weight: 600; opacity: 0.85; }
@keyframes eventBannerShimmer { to { background-position: 300% center; } }
.event-banner-pulse { width: 8px; height: 8px; border-radius: 50%; background: #04070f; animation: eventBannerPulse 1.7s infinite; }
@keyframes eventBannerPulse { 0% { box-shadow: 0 0 0 0 rgba(4,7,15,0.45); } 70% { box-shadow: 0 0 0 7px rgba(4,7,15,0); } 100% { box-shadow: 0 0 0 0 rgba(4,7,15,0); } }
/* Bajar header y barra de progreso para dejar espacio a la barra de registro.
   Scopeado con :has(.event-banner): antes se aplicaba siempre, incluso en paginas
   que no incluyen el banner en su HTML, dejando un hueco vacio sobre el header. */
body:has(.event-banner) .header { top: 40px; }
body:has(.event-banner) .scroll-progress { top: 40px; }
@media (max-width: 540px) { .event-banner { height: 38px; font-size: 0.66rem; gap: 0.45rem; } .event-banner-sub { display: none; } body:has(.event-banner) .header { top: 38px; } body:has(.event-banner) .scroll-progress { top: 38px; } }

/* Artículo */
.article { max-width: 820px; margin: 0 auto; padding: 9rem 1.5rem 4rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.5rem 0 1.25rem; font-family: var(--font-title); font-size: 0.85rem; color: #94a3b8; }
.article-tag { color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.1); border: 1px solid rgba(var(--neon-cyan-rgb), 0.3); padding: 0.3rem 0.85rem; border-radius: 20px; font-weight: 700; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; }
.article-title { font-family: var(--font-syne); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 1.25rem; }
.article-lead { font-size: 1.2rem; line-height: 1.65; color: #d4e2f5; margin-bottom: 2.5rem; }
.article-body { font-size: 1.05rem; }
.article-body h2 { font-family: var(--font-syne); font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.75rem 0 1rem; padding-top: 0.5rem; }
.article-body h3 { font-family: var(--font-title); font-size: 1.2rem; color: var(--neon-cyan); margin: 1.75rem 0 0.75rem; }
.article-body p { color: #c5d6ef; line-height: 1.75; margin-bottom: 1rem; }
.article-body strong { color: #fff; }
.link-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin: 0 0 1.5rem; }
.link-list li { position: relative; padding-left: 1.4rem; color: #b9cae4; line-height: 1.55; }
.link-list li::before { content: '▸'; position: absolute; left: 0; color: var(--neon-cyan); }
.link-list a { color: var(--neon-cyan); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(var(--neon-cyan-rgb), 0.3); transition: color 0.25s, border-color 0.25s; }
.link-list a:hover { color: var(--neon-green); border-color: var(--neon-green); }
/* Enlaces inline dentro de artículos y callouts (evita el azul por defecto, bajo contraste) */
.article-body a:not(.btn):not(.back-link), .callout a { color: var(--neon-cyan); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(var(--neon-cyan-rgb), 0.35); transition: color 0.25s, border-color 0.25s; }
.article-body a:not(.btn):not(.back-link):hover, .callout a:hover { color: var(--neon-green); border-color: var(--neon-green); }
.callout { border-left: 3px solid var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), 0.06); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.callout p { margin: 0; color: #dbe7fa; }
.callout-warn { border-left-color: var(--neon-red); background: rgba(255, 77, 109, 0.08); }
.article-cta { text-align: center; margin-top: 3rem; padding: 2.5rem 1.5rem; border-radius: 18px; border: 1px solid rgba(var(--neon-cyan-rgb), 0.25); background: rgba(5, 8, 15, 0.6); }
.article-cta p { margin-bottom: 1.25rem; font-size: 1.1rem; color: #eaf2ff; }
@media (max-width: 768px) {
    .article { padding: 7.5rem 1.25rem 3rem; }
    .article-cta .btn { width: 100%; justify-content: center; }
}

/* ACCESSIBILITY ENHANCEMENTS */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

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

/* ============================================
   ROADMAP DEL ECOSISTEMA (mapa interactivo)
   ============================================ */
.roadmap-map { position: relative; display: flex; justify-content: space-between; gap: 0.75rem; max-width: 980px; margin: 0 auto; padding: 1rem 0 0.5rem; }
.roadmap-line { position: absolute; left: 6%; right: 6%; top: 46px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan) 35%, #ffb020 70%, var(--neon-purple)); opacity: 0.55; box-shadow: 0 0 18px rgba(var(--neon-cyan-rgb), 0.5); }
.roadmap-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; flex: 1; background: none; border: none; cursor: pointer; padding: 0.5rem 0.25rem; font-family: inherit; transition: transform 0.25s ease; }
.roadmap-node:hover { transform: translateY(-4px); }
.node-icon { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #9db4d4; border-radius: 50%; background: rgba(8, 14, 26, 0.95); border: 2px solid rgba(255, 255, 255, 0.15); transition: all 0.25s ease; }
.roadmap-node:hover .node-icon { border-color: rgba(var(--neon-cyan-rgb), 0.6); color: var(--neon-cyan); }
.roadmap-node.is-active .node-icon { color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 26px rgba(var(--neon-cyan-rgb), 0.55), inset 0 0 14px rgba(var(--neon-cyan-rgb), 0.2); }
.node-name { font-family: var(--font-title); font-weight: 700; font-size: 0.95rem; color: #eaf2ff; letter-spacing: 0.3px; }
.node-status { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 30px; border: 1px solid; white-space: nowrap; }
.st-live  { color: var(--neon-green); border-color: rgba(var(--neon-green-rgb), 0.5); background: rgba(var(--neon-green-rgb), 0.1); }
.st-soon  { color: #ffcf70; border-color: rgba(255, 176, 32, 0.5); background: rgba(255, 176, 32, 0.1); }
.st-build { color: #ffb020; border-color: rgba(255, 176, 32, 0.65); background: rgba(255, 176, 32, 0.14); }
.st-open  { color: var(--neon-cyan); border-color: rgba(var(--neon-cyan-rgb), 0.5); background: rgba(var(--neon-cyan-rgb), 0.1); }
.roadmap-detail { position: relative; max-width: 760px; margin: 2rem auto 0; padding: 2rem 2.25rem; text-align: center; }
.roadmap-detail-status { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 0.3rem 0.85rem; border-radius: 30px; border: 1px solid; margin-bottom: 0.9rem; }
.roadmap-detail-title { font-family: var(--font-syne); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; margin-bottom: 0.75rem; color: #fff; }
.roadmap-detail-desc { color: #c9d8ee; line-height: 1.65; max-width: 620px; margin: 0 auto 1.5rem; }
@media (max-width: 768px) {
    .roadmap-map { flex-wrap: wrap; gap: 1rem 0; }
    .roadmap-node { flex: 1 1 33%; }
    .roadmap-line { display: none; }
    .roadmap-detail { padding: 1.6rem 1.25rem; }
}

/* ============================================
   BANNER OPENACADEMY (en construcción Q4 2026)
   ============================================ */
.oa-banner { border-color: rgba(255, 176, 32, 0.45); background: linear-gradient(120deg, rgba(38, 26, 8, 0.92), rgba(5, 8, 15, 0.94)); }
.oa-glow { background: radial-gradient(circle, rgba(255, 176, 32, 0.3), transparent 70%); }
.oa-visual { color: #ffb020; background: rgba(255, 176, 32, 0.07); border-color: rgba(255, 176, 32, 0.35); box-shadow: inset 0 0 30px rgba(255, 176, 32, 0.18); }
.oa-construction-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-title); font-size: 0.82rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #051018; background: repeating-linear-gradient(45deg, #ffb020 0 14px, #ffd35c 14px 28px); border: none; padding: 0.65rem 1.3rem; border-radius: 30px; cursor: default; box-shadow: 0 0 30px rgba(255, 176, 32, 0.45); animation: oaPulse 2.4s ease-in-out infinite; }
.oa-construction-btn i { font-size: 1rem; }
@keyframes oaPulse { 0%, 100% { box-shadow: 0 0 22px rgba(255, 176, 32, 0.35); } 50% { box-shadow: 0 0 44px rgba(255, 176, 32, 0.7); } }
@media (prefers-reduced-motion: reduce) { .oa-construction-btn { animation: none; } }

/* Badge de curso EN VIVO (reemplaza las rayas de "construcción" por un pill sólido) */
.oa-live-badge { background: linear-gradient(90deg, #ffb020, #ffd35c); }

/* Metadatos del curso (fechas, duración, docentes) */
.oa-course-meta { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.oa-course-meta li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; font-weight: 600; color: rgba(255, 245, 225, 0.82); }
.oa-course-meta i { color: #ffb020; font-size: 0.9rem; }

/* ============================================
   BANNER DESTACADO — Curso Vibe Coding Seguro
   (primera sección; despeja el header fijo)
   ============================================ */
.course-launch { padding: 150px 0 0.5rem; position: relative; z-index: 2; }
.course-launch + .hero-section { padding-top: 2.5rem; }
.course-launch-card { position: relative; display: flex; align-items: center; gap: 2.4rem; padding: 2.3rem 2.7rem; border-radius: 26px; overflow: hidden; border: 1px solid rgba(37, 217, 248, 0.4); background: linear-gradient(120deg, rgba(8, 20, 38, 0.95), rgba(20, 10, 40, 0.9)); }
.cl-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 130% at 10% 15%, rgba(37, 217, 248, 0.22), transparent 60%), radial-gradient(55% 130% at 92% 85%, rgba(139, 92, 255, 0.22), transparent 60%); }
.cl-content { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.cl-badge { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-title); font-size: 0.8rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #7fe9ff; background: rgba(37, 217, 248, 0.1); border: 1px solid rgba(37, 217, 248, 0.3); padding: 0.5rem 1rem; border-radius: 30px; }
.cl-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d9f8; box-shadow: 0 0 10px #25d9f8; animation: clPulse 2s ease-in-out infinite; }
@keyframes clPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .cl-dot { animation: none; } }
.cl-title { font-family: var(--font-title); font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.5px; margin: 1rem 0 0.7rem; }
.cl-sub { font-size: 1.06rem; line-height: 1.5; color: rgba(234, 242, 255, 0.82); max-width: 62ch; margin: 0 0 1.6rem; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cl-actions .cl-yt:hover { border-color: rgba(255, 61, 61, 0.6); color: #ff6b6b; }
.cl-actions .cl-li:hover { border-color: rgba(37, 120, 235, 0.75); color: #4d9bff; }
.cl-visual { position: relative; z-index: 1; flex: 0 0 auto; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 24px; font-size: 4rem; color: #25d9f8; background: rgba(37, 217, 248, 0.06); border: 1px solid rgba(37, 217, 248, 0.25); box-shadow: inset 0 0 40px rgba(37, 217, 248, 0.14); }

@media (max-width: 768px) {
    .course-launch { padding-top: 160px; }
    .course-launch + .hero-section { padding-top: 2rem; }
    .course-launch-card { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.8rem 1.4rem; }
    .cl-sub { margin-left: auto; margin-right: auto; }
    .cl-actions { justify-content: center; }
    .cl-visual { order: -1; width: 92px; height: 92px; font-size: 2.5rem; }
}
@media (max-height: 680px) and (max-width: 768px) {
    .course-launch { padding-top: 140px; }
    .course-launch + .hero-section { padding-top: 1.5rem; }
}

/* ==========================================================================
   PÁGINA DE TRANSPARENCIA ("Quiénes somos"): documento, organigrama, tabla
   ========================================================================== */

.doc-meta-row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); max-width: 720px; }
.doc-meta-row > div { flex: 1 1 150px; padding: 0.9rem 1.1rem 0.9rem 0; border-right: 1px solid rgba(255,255,255,0.08); }
.doc-meta-row > div:last-child { border-right: 0; }
.doc-meta-row dt { font-family: var(--font-title); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.3rem; }
.doc-meta-row dd { margin: 0; font-family: var(--font-title); font-size: 0.9rem; font-weight: 600; color: #fff; }

.stamp-badge { font-family: var(--font-title); color: var(--neon-red); border: 2px solid var(--neon-red); border-radius: 8px; padding: 0.9rem 1.1rem; transform: rotate(-4deg); text-align: center; max-width: 230px; box-shadow: 0 0 24px rgba(255,77,109,0.18); }
.stamp-badge b { display: block; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; line-height: 1.25; }
.stamp-badge small { display: block; margin-top: 0.4rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; border-top: 1px solid rgba(255,77,109,0.4); padding-top: 0.4rem; }

.doc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3.5rem; align-items: start; }
.doc-index { position: sticky; top: 100px; align-self: start; }
.doc-index p { font-family: var(--font-title); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.doc-index ol { list-style: none; margin: 0; padding: 0; }
.doc-index li { margin-bottom: 0.55rem; }
.doc-index a { font-family: var(--font-title); font-size: 0.82rem; color: #94a3b8; display: flex; gap: 0.55rem; line-height: 1.4; text-decoration: none; transition: color 0.2s; }
.doc-index a:hover { color: #fff; }
.doc-index a.on { color: #fff; font-weight: 600; }
.doc-index a.on b { color: var(--neon-cyan); }
.doc-index b { color: rgba(255,255,255,0.3); font-weight: 500; }

.clause-head { display: flex; align-items: baseline; gap: 0.9rem; border-bottom: 2px solid rgba(255,255,255,0.14); padding-bottom: 0.6rem; margin-bottom: 1.6rem; }
.clause-head span { font-family: var(--font-title); font-size: 0.85rem; color: var(--neon-cyan); font-weight: 700; }
.clause-head h2 { margin: 0; }

.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin: 1.4rem 0; }
.fact { border: 1px solid rgba(255,255,255,0.1); background: rgba(5,8,15,0.6); border-radius: 12px; padding: 1.1rem 1.2rem; }
.fact dt { font-family: var(--font-title); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.5rem; }
.fact dd { margin: 0; font-family: var(--font-syne); font-weight: 700; font-size: 1.4rem; color: #fff; }
.fact dd.pending { font-family: var(--font-title); font-size: 0.78rem; font-weight: 600; color: var(--neon-red); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; }

.org-layer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.1rem; margin-top: 1.75rem; }
.org-layer-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.org-layer-head h3 { margin: 0; font-family: var(--font-title); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.org-count { font-family: var(--font-title); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 0.15rem 0.6rem; }
.org-layer > p { font-size: 0.92rem; color: #94a3b8; margin-bottom: 1.25rem; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 0.9rem; }
.role-card { background: rgba(5,8,15,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; min-height: 150px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.role-card .role-tag { font-family: var(--font-title); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
.role-card .role-name { font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; line-height: 1.2; margin-top: auto; }
.role-card .role-field { margin-top: auto; border-bottom: 1.5px solid rgba(255,255,255,0.18); height: 30px; }
.role-card .role-foot { font-family: var(--font-title); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.55rem; }
.role-card.filled { border-color: rgba(0,255,135,0.3); border-left: 3px solid var(--neon-green); }
.role-card.filled .role-foot { color: var(--neon-green); }
.role-card.vacant {
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255,77,109,0.08) 9px 10px), rgba(5,8,15,0.6);
  border-style: dashed; text-decoration: none; color: inherit; cursor: pointer;
}
.role-card.vacant:hover, .role-card.vacant:focus-visible { border-color: var(--neon-red); border-style: solid; transform: translateY(-2px); box-shadow: 0 0 24px rgba(255,77,109,0.2); }
.role-card.vacant .role-foot { color: var(--neon-red); display: flex; justify-content: space-between; gap: 0.5rem; }
.role-card.vacant:hover .role-foot .role-action { opacity: 1; }
.role-card.vacant .role-foot .role-action { opacity: 0.5; transition: opacity 0.2s ease; }
.role-card.vacant .role-topic { font-family: var(--font-title); font-weight: 600; font-size: 0.9rem; line-height: 1.25; letter-spacing: -0.01em; color: #e2e8f0; }

.role-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5rem; }
.role-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: rgba(5,8,15,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
.role-table th { font-family: var(--font-title); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; padding: 0.85rem 1rem; border-bottom: 2px solid rgba(255,255,255,0.16); color: #94a3b8; vertical-align: bottom; }
.role-table td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; line-height: 1.5; color: #cbd5e1; }
.role-table tr:last-child td { border-bottom: 0; }
.role-table td:first-child { font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; width: 22%; }
.role-table .nulo { font-family: var(--font-title); font-size: 0.78rem; color: var(--neon-red); }

.changelog { font-family: var(--font-title); font-size: 0.85rem; border-top: 1px solid rgba(255,255,255,0.1); }
.changelog > div { display: grid; grid-template-columns: 100px 1fr; gap: 1.1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.changelog time { color: #94a3b8; }
.changelog span { color: #cbd5e1; }

@media (max-width: 980px) {
    .doc-layout { grid-template-columns: 1fr; gap: 0; }
    .doc-index { position: static; margin-bottom: 2.5rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(5,8,15,0.6); border-radius: 12px; padding: 1.1rem; }
    .doc-index ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 700px) {
    .doc-meta-row { max-width: 100%; }
    .doc-index ol { columns: 1; }
    .stamp-badge { transform: rotate(-2deg); margin-top: 0.5rem; }
}

@media(max-width:680px){.nav-form-btn{display:none}}

/* ============ BLOG · índice épico ============ */
.blog-toolbar { max-width: 1180px; margin: 0 auto 2.5rem; padding: 0 1.5rem; }
.blog-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; margin-bottom: 2rem; }
.blog-stat { text-align: center; }
.blog-stat b { display: block; font-family: var(--font-syne); font-size: 1.9rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--neon-cyan), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blog-stat span { display: block; margin-top: .35rem; font-family: var(--font-title); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #7b8ba3; }
.blog-feeds { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem; }
.blog-feed-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #b9c6d8; font-family: var(--font-title); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: var(--transition-smooth); }
.blog-feed-btn:hover { border-color: rgba(var(--neon-cyan-rgb), .55); color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), .08); transform: translateY(-2px); }
.blog-feed-btn.rss:hover { border-color: rgba(255,150,60,.6); color: #ff9a3c; background: rgba(255,150,60,.08); }

.blog-search-wrap { position: relative; max-width: 560px; margin: 0 auto 1.4rem; }
.blog-search { width: 100%; padding: .95rem 3rem .95rem 3rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: #eaf2ff; font-family: var(--font-body); font-size: .98rem; transition: var(--transition-smooth); }
.blog-search::placeholder { color: #64748b; }
.blog-search:focus { outline: none; border-color: rgba(var(--neon-cyan-rgb), .6); background: rgba(var(--neon-cyan-rgb), .05); box-shadow: 0 0 0 4px rgba(var(--neon-cyan-rgb), .09); }
.blog-search-ico { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.blog-search-kbd { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-title); font-size: .68rem; color: #64748b; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: .12rem .42rem; pointer-events: none; }
.blog-search:focus ~ .blog-search-kbd { opacity: 0; }

.blog-chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.blog-chip { cursor: pointer; padding: .48rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #94a3b8; font-family: var(--font-title); font-size: .76rem; font-weight: 600; transition: var(--transition-smooth); }
.blog-chip:hover { color: #eaf2ff; border-color: rgba(255,255,255,.28); }
.blog-chip.is-active { background: rgba(var(--neon-cyan-rgb), .13); border-color: rgba(var(--neon-cyan-rgb), .55); color: var(--neon-cyan); }
.blog-chip i { font-size: .68rem; opacity: .7; margin-left: .3rem; }
.blog-count { text-align: center; margin: 1.6rem 0 .4rem; font-family: var(--font-title); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }

/* Destacado */
.blog-hero-flag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-title); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-green); margin-bottom: 1rem; }
.blog-hero-flag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Tarjetas */
@media (min-width: 760px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-post-tag { display: inline-block; align-self: flex-start; font-family: var(--font-title); font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-c, var(--neon-cyan)); background: color-mix(in srgb, var(--accent-c, var(--neon-cyan)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-c, var(--neon-cyan)) 32%, transparent); padding: .28rem .7rem; border-radius: 20px; margin-bottom: 1rem; }
.blog-post-byline { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: .82rem; color: #8ea1b8; }
.blog-post-byline .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-size: .6rem; font-weight: 800; color: #05121a; background: linear-gradient(135deg, var(--accent-c, var(--neon-cyan)), var(--neon-purple)); flex-shrink: 0; }
.blog-post-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.07); font-family: var(--font-title); font-size: .74rem; color: #7b8ba3; }
.blog-post-more { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-c, var(--neon-cyan)); font-weight: 600; transition: gap .2s ease; }
.blog-post-card:hover .blog-post-more { gap: .75rem; }
.blog-vid { display: inline-flex; align-items: center; gap: .3rem; color: #ff5d7a; }
.blog-empty { display: none; text-align: center; padding: 4rem 1.5rem; color: #7b8ba3; }
.blog-empty.is-on { display: block; }
.blog-empty i { font-size: 2.2rem; color: #334155; margin-bottom: 1rem; display: block; }

/* ============ POST · compartir, progreso ============ */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); box-shadow: 0 0 12px rgba(var(--neon-cyan-rgb), .7); transition: width .1s linear; }
.share-bar { margin: 3rem 0 1rem; padding: 1.5rem; border-radius: 18px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); }
.share-bar h3 { font-family: var(--font-title); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7b8ba3; margin-bottom: 1rem; text-align: center; }
.share-btns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.share-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: #c3d0e2; font-family: var(--font-title); font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition-smooth); }
.share-btn:hover { transform: translateY(-2px); color: #fff; border-color: var(--sc, rgba(255,255,255,.35)); background: color-mix(in srgb, var(--sc, #fff) 14%, transparent); box-shadow: 0 8px 22px -12px var(--sc, rgba(255,255,255,.4)); }
.share-btn i { font-size: .95rem; }
.share-btn.li { --sc: #0a66c2 } .share-btn.x { --sc: #e7e9ea } .share-btn.wa { --sc: #25d366 }
.share-btn.fb { --sc: #1877f2 } .share-btn.tg { --sc: #2aabee } .share-btn.rd { --sc: #ff4500 }
.share-btn.em { --sc: #a07bff } .share-btn.cp { --sc: var(--neon-cyan) }
.share-btn.is-ok { color: var(--neon-green); border-color: var(--neon-green); }
#nativeShare { display: none; }
.related { margin: 2.5rem 0 1rem; }
.related h3 { font-family: var(--font-title); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7b8ba3; margin-bottom: 1.1rem; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card { display: block; text-decoration: none; color: inherit; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); transition: var(--transition-smooth); }
.related-card:hover { border-color: rgba(var(--neon-cyan-rgb), .45); transform: translateY(-2px); background: rgba(255,255,255,.045); }
.related-card span { display: block; font-family: var(--font-title); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: .45rem; }
.related-card b { display: block; font-family: var(--font-syne); font-size: .95rem; font-weight: 600; line-height: 1.3; }
.to-top { position: fixed; right: 1.4rem; bottom: 1.4rem; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(10,14,28,.82); backdrop-filter: blur(10px); color: #c3d0e2; cursor: pointer; opacity: 0; pointer-events: none; transition: var(--transition-smooth); z-index: 90; }
.to-top.is-on { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--neon-cyan); border-color: rgba(var(--neon-cyan-rgb), .5); }

/* ============ HUB DE FEEDS ============ */
.feeds-hub { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 880px; margin: 0 auto 2rem; }
@media (min-width: 720px) { .feeds-hub { grid-template-columns: 1fr 1fr; } }
.feed-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.028); transition: var(--transition-smooth); }
.feed-card:hover { border-color: color-mix(in srgb, var(--fc, #25d9f8) 40%, transparent); background: rgba(255,255,255,.045); }
.feed-ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--fc, #25d9f8) 55%, transparent)); }
.feed-card b { display: block; font-family: var(--font-syne); font-size: 1rem; margin-bottom: .3rem; }
.feed-card p { font-size: .84rem; color: #93a4bb; line-height: 1.5; margin-bottom: .8rem; }
.feed-links { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============ CHARLAS ============ */
.ch-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 760px) { .ch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .ch-grid { grid-template-columns: repeat(3, 1fr); } }
.ch-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 18px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.028); transition: var(--transition-smooth); }
.ch-card:hover { border-color: rgba(255,93,122,.4); transform: translateY(-3px); background: rgba(255,255,255,.045); box-shadow: 0 18px 40px -26px rgba(0,0,0,.9); }
.ch-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.ch-day { font-family: var(--font-title); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .26rem .66rem; border-radius: 20px; }
.ch-day.d1 { color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), .12); border: 1px solid rgba(var(--neon-cyan-rgb), .32); }
.ch-day.d2 { color: #a07bff; background: rgba(160,123,255,.12); border: 1px solid rgba(160,123,255,.32); }
.ch-time { font-family: var(--font-title); font-size: .72rem; color: #6b7f9c; }
.ch-card h2 { font-family: var(--font-syne); font-size: 1.12rem; line-height: 1.25; margin-bottom: .9rem; flex: 1; }
.ch-by { display: flex; align-items: center; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 1rem; }
.ch-by .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-size: .64rem; font-weight: 800; color: #05121a; background: linear-gradient(135deg, #ff5d7a, #a07bff); flex-shrink: 0; }
.ch-by b { display: block; font-size: .86rem; font-weight: 600; color: #dbe6f5; }
.ch-by small { display: block; font-size: .74rem; color: #7b8ba3; margin-top: .1rem; }
.ch-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.ch-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: #c3d0e2; font-family: var(--font-title); font-size: .76rem; font-weight: 600; text-decoration: none; transition: var(--transition-smooth); }
.ch-btn:hover { transform: translateY(-2px); color: #fff; }
.ch-btn.yt:hover { border-color: #ff0033; background: rgba(255,0,51,.14); }
.ch-btn.pdf:hover { border-color: var(--neon-cyan); background: rgba(var(--neon-cyan-rgb), .12); }
.ch-btn.art:hover { border-color: var(--neon-green); background: rgba(var(--neon-green-rgb), .12); }
.ch-btn.li:hover { border-color: #0a66c2; background: rgba(10,102,194,.16); }
.ch-stamp { display: block; margin-top: .8rem; font-family: var(--font-title); font-size: .68rem; color: #6b7f9c; font-style: italic; }

/* botones de feed: destacados y con color de marca RSS */
.feed-links .blog-feed-btn { padding: .62rem 1.15rem; font-size: .82rem; border-width: 1.5px; }
.feed-links .blog-feed-btn.rss { color: #ff9a3c; border-color: rgba(255,154,60,.45); background: rgba(255,154,60,.09); }
.feed-links .blog-feed-btn.rss:hover { background: rgba(255,154,60,.18); border-color: #ff9a3c; box-shadow: 0 8px 22px -12px rgba(255,154,60,.9); }
.feed-links .blog-feed-btn:not(.rss) { color: var(--neon-cyan); border-color: rgba(var(--neon-cyan-rgb),.4); background: rgba(var(--neon-cyan-rgb),.07); }
.feed-card { border-width: 1.5px; }
/* enlaces de feed en el pie */
.footer-feeds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.footer-feeds a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); color: #93a4bb; font-size: .74rem; text-decoration: none; transition: var(--transition-smooth); }
.footer-feeds a:hover { color: #ff9a3c; border-color: rgba(255,154,60,.5); }

/* fachada de video: miniatura ligera; el reproductor real carga al pulsar */
.yt-facade{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0a0e1a center/cover no-repeat;cursor:pointer;display:block;width:100%;padding:0}
.yt-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,4,8,.15),rgba(3,4,8,.55));transition:background .3s ease}
.yt-facade:hover::after{background:linear-gradient(180deg,rgba(3,4,8,.05),rgba(3,4,8,.4))}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:74px;height:52px;border-radius:14px;background:rgba(255,0,51,.92);display:grid;place-items:center;box-shadow:0 10px 34px -10px rgba(255,0,51,.9);transition:transform .28s cubic-bezier(.16,1,.3,1),background .2s}
.yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.12);background:#ff0033}
.yt-play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.yt-label{position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .8rem;border-radius:999px;background:rgba(3,4,8,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:#cbd5e1}
.yt-skel{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.05) 40%,transparent 60%);background-size:220% 100%;animation:skel 1.5s linear infinite}

/* ══════════ BLOG v2 · índice ══════════ */
.blog-toolbar{max-width:1240px;margin:0 auto 2rem;padding:0 1.5rem}
/* barra pegajosa de control */
.blog-bar{position:sticky;top:72px;z-index:40;margin:0 auto 1.6rem;padding:.85rem;max-width:1240px;
 border-radius:18px;border:1px solid rgba(255,255,255,.09);background:rgba(6,9,18,.82);backdrop-filter:blur(16px) saturate(1.3);
 display:grid;grid-template-columns:1fr;gap:.75rem;transition:box-shadow .3s ease,border-color .3s ease}
.blog-bar.is-stuck{box-shadow:0 18px 44px -26px rgba(0,0,0,.95);border-color:rgba(var(--neon-cyan-rgb),.28)}
@media(min-width:860px){.blog-bar{grid-template-columns:minmax(240px,1fr) auto auto;align-items:center}}
.blog-search-wrap{position:relative;margin:0}
.blog-search{width:100%;padding:.8rem 5.2rem .8rem 2.9rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.04);color:#eaf2ff;font-family:var(--font-body);font-size:.94rem;transition:var(--transition-smooth)}
.blog-search::placeholder{color:#64748b}
.blog-search:focus{outline:none;border-color:rgba(var(--neon-cyan-rgb),.65);background:rgba(var(--neon-cyan-rgb),.06);box-shadow:0 0 0 3px rgba(var(--neon-cyan-rgb),.1)}
.blog-search-ico{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#64748b;pointer-events:none;font-size:.9rem}
.blog-search-kbd{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);font-family:var(--font-title);font-size:.66rem;color:#64748b;border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:.1rem .38rem;pointer-events:none}
.blog-clear{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:none;width:24px;height:24px;border-radius:50%;
 border:0;background:rgba(255,255,255,.1);color:#cbd5e1;cursor:pointer;font-size:.7rem;line-height:1}
.blog-clear:hover{background:rgba(255,93,122,.25);color:#fff}
.blog-search.has-val~.blog-search-kbd{display:none}
.blog-search.has-val~.blog-clear{display:grid;place-items:center}
.bar-group{display:flex;gap:.4rem;align-items:center}
.bar-sel{appearance:none;padding:.62rem 2rem .62rem .85rem;border-radius:11px;border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right .4rem center/18px no-repeat;
 color:#c3d0e2;font-family:var(--font-title);font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}
.bar-sel:hover{border-color:rgba(var(--neon-cyan-rgb),.4);color:#eaf2ff}
.bar-sel:focus{outline:none;border-color:var(--neon-cyan)}
.view-tog{display:flex;border-radius:11px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.view-tog button{border:0;background:transparent;color:#7b8ba3;padding:.62rem .8rem;cursor:pointer;font-size:.85rem;transition:var(--transition-smooth)}
.view-tog button:hover{color:#eaf2ff;background:rgba(255,255,255,.05)}
.view-tog button.on{background:rgba(var(--neon-cyan-rgb),.14);color:var(--neon-cyan)}
/* chips */
.blog-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:.4rem}
.blog-chip{cursor:pointer;padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
 color:#94a3b8;font-family:var(--font-title);font-size:.75rem;font-weight:600;transition:var(--transition-smooth);display:inline-flex;align-items:center;gap:.4rem}
.blog-chip:hover{color:#eaf2ff;border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.blog-chip.is-active{background:color-mix(in srgb,var(--cc,#34d8f1) 15%,transparent);border-color:color-mix(in srgb,var(--cc,#34d8f1) 55%,transparent);color:var(--cc,#34d8f1)}
.blog-chip i{font-style:normal;font-size:.64rem;opacity:.65;background:rgba(255,255,255,.08);border-radius:20px;padding:.05rem .38rem}
.blog-chip.is-active i{background:color-mix(in srgb,var(--cc,#34d8f1) 22%,transparent)}
.blog-count{text-align:center;margin:1rem 0 1.4rem;font-family:var(--font-title);font-size:.76rem;letter-spacing:.08em;color:#64748b}
.blog-count b{color:var(--neon-cyan);font-weight:700}
/* ── tarjetas con portada ── */
.blog-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;max-width:1240px;margin:0 auto;padding:0 1.5rem}
@media(min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-post-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:18px;
 border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.026);overflow:hidden;transition:transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1)),border-color .3s,box-shadow .32s}
.blog-post-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent-c,#34d8f1) 13%,transparent),transparent 60%)}
.blog-post-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent-c,#34d8f1) 48%,transparent);
 box-shadow:0 26px 54px -30px rgba(0,0,0,.95),0 0 34px -22px var(--accent-c,#34d8f1)}
.blog-post-card:hover::after{opacity:1}
.blog-post-card:focus-visible{outline:2px solid var(--accent-c,#34d8f1);outline-offset:3px}
.pc-cover{position:relative;aspect-ratio:16/7;overflow:hidden;background:#080c17;border-bottom:1px solid rgba(255,255,255,.06)}
.pc-cover img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;transition:transform .55s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.blog-post-card:hover .pc-cover img{transform:scale(1.045)}
.pc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,9,18,.75));pointer-events:none}
.pc-badges{position:absolute;left:.75rem;top:.75rem;z-index:2;display:flex;gap:.35rem;flex-wrap:wrap}
.pc-cat{font-family:var(--font-title);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 padding:.26rem .6rem;border-radius:20px;color:#04121a;background:var(--accent-c,#34d8f1)}
.pc-vid{font-family:var(--font-title);font-size:.6rem;font-weight:700;letter-spacing:.06em;padding:.26rem .55rem;border-radius:20px;
 background:rgba(6,9,18,.8);border:1px solid rgba(255,0,51,.5);color:#ff8ba1;backdrop-filter:blur(6px)}
.pc-body{padding:1.15rem 1.25rem 1.25rem;display:flex;flex-direction:column;flex:1}
.pc-tag{font-family:var(--font-title);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:#6b7f9c;margin-bottom:.55rem}
.blog-post-card h2{font-family:var(--font-syne);font-size:1.14rem;line-height:1.26;margin-bottom:.6rem;letter-spacing:-.01em}
.blog-post-card p{font-size:.875rem;color:#9fb0c6;line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;align-items:center;gap:.55rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.06);font-size:.78rem;color:#7b8ba3}
.pc-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-title);font-size:.58rem;font-weight:800;
 color:#04121a;background:linear-gradient(135deg,var(--accent-c,#34d8f1),#a07bff);flex-shrink:0}
.pc-name{font-weight:600;color:#b8c7dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-dot{color:#3d4a5f}
.pc-time{margin-left:auto;white-space:nowrap;font-family:var(--font-title);font-size:.72rem}
mark{background:rgba(255,190,77,.28);color:#ffd98a;border-radius:3px;padding:0 .12em}
/* vista lista */
.blog-grid.is-list{grid-template-columns:1fr;max-width:900px;gap:.8rem}
.is-list .blog-post-card{flex-direction:row;align-items:stretch}
.is-list .pc-cover{aspect-ratio:auto;width:190px;flex-shrink:0;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)}
.is-list .pc-cover::after{background:linear-gradient(90deg,transparent 40%,rgba(6,9,18,.6))}
.is-list .blog-post-card h2{font-size:1.05rem}
.is-list .blog-post-card p{-webkit-line-clamp:2}
@media(max-width:640px){.is-list .pc-cover{width:112px}.is-list .blog-post-card p{display:none}}
/* destacado */
.blog-featured{max-width:1240px;margin:0 auto 2.2rem;padding:0 1.5rem}
.blog-hero-card{position:relative;display:grid;grid-template-columns:1fr;text-decoration:none;color:inherit;border-radius:22px;overflow:hidden;
 border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);transition:transform .35s var(--ease-out,cubic-bezier(.16,1,.3,1)),border-color .3s,box-shadow .35s}
@media(min-width:820px){.blog-hero-card{grid-template-columns:1.15fr 1fr}}
.blog-hero-card:hover{transform:translateY(-4px);border-color:rgba(var(--neon-cyan-rgb),.5);box-shadow:0 30px 70px -34px rgba(37,217,248,.55)}
.bh-cover{position:relative;min-height:220px;overflow:hidden;background:#080c17}
.bh-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.blog-hero-card:hover .bh-cover img{transform:scale(1.04)}
.bh-body{padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center}
.bh-flag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-title);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--neon-green);margin-bottom:.9rem}
.bh-flag .dot{width:7px;height:7px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 10px var(--neon-green);animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
.blog-hero-card h2{font-family:var(--font-syne);font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.16;margin-bottom:.8rem}
.blog-hero-card p{font-size:.96rem;color:#b3c2d6;line-height:1.65;margin-bottom:1.1rem}
/* cargar más + vacío */
.blog-more{text-align:center;margin:2.4rem 0 1rem}
.btn-more{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.7rem;border-radius:14px;border:1.5px solid rgba(var(--neon-cyan-rgb),.4);
 background:rgba(var(--neon-cyan-rgb),.07);color:var(--neon-cyan);font-family:var(--font-title);font-size:.86rem;font-weight:700;cursor:pointer;transition:var(--transition-smooth)}
.btn-more:hover{background:rgba(var(--neon-cyan-rgb),.16);transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(37,217,248,.8)}
.blog-empty{display:none;text-align:center;padding:3.5rem 1.5rem;color:#7b8ba3}
.blog-empty.is-on{display:block}
.blog-empty i{font-size:2.4rem;color:#334155;margin-bottom:1rem;display:block}
.blog-empty b{display:block;font-family:var(--font-syne);font-size:1.1rem;color:#cbd5e1;margin-bottom:.5rem}
/* brillo de carga bajo la portada (el SVG lo tapa al pintar) */
.pc-cover,.bh-cover{background:linear-gradient(100deg,#0a1020 20%,rgba(255,255,255,.045) 40%,#0a1020 60%);background-size:220% 100%;animation:skel 1.6s linear infinite}
.pc-cover img,.bh-cover img{background:#080c17}
@media(prefers-reduced-motion:reduce){.pc-cover,.bh-cover{animation:none}.blog-post-card,.blog-hero-card{transition:none}}
/* barra compacta en pantallas angostas: orden y vista comparten fila */
@media(max-width:859px){
  .blog-bar{grid-template-columns:1fr auto;grid-template-areas:"s s" "o v";padding:.7rem}
  .blog-search-wrap{grid-area:s}.bar-group{grid-area:o}.view-tog{grid-area:v;justify-self:end}
  .bar-sel{width:100%}
}
@media(max-width:640px){
  .is-list .pc-body{padding:.8rem .9rem}
  .is-list .blog-post-card h2{font-size:.98rem;margin-bottom:.35rem}
  .is-list .pc-tag{margin-bottom:.35rem}
  .is-list .pc-foot{margin-top:.55rem;padding-top:.55rem;font-size:.72rem}
}

/* ── correcciones v2.1 ── */
/* el header fijo mide 136px: la barra pegajosa debe quedar bajo él, no detrás */
.blog-bar{top:150px;z-index:900}
@media(max-width:900px){.blog-bar{top:88px}}
/* portada del destacado: mantener el gráfico completo, sin recortes */
.bh-cover{min-height:0;aspect-ratio:960/420}
@media(min-width:820px){.blog-hero-card{grid-template-columns:1fr 1.05fr;align-items:stretch}.bh-cover{aspect-ratio:auto;height:100%}}
/* el gráfico del destacado se funde con el fondo en vez de cortarse en seco */
.bh-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(6,9,18,.92),transparent 22%,transparent 62%,rgba(6,9,18,.9)),
            linear-gradient(180deg,rgba(6,9,18,.55),transparent 26%,transparent 74%,rgba(6,9,18,.55))}
@media(max-width:819px){.bh-cover::after{background:linear-gradient(180deg,transparent 45%,rgba(6,9,18,.85))}}

/* ── header en móvil: los dos accesos caben como botones de icono ── */
@media(max-width:600px){
  .header-actions{gap:.45rem;flex-wrap:nowrap}
  .header-actions .btn-nav{padding:0;width:42px;height:42px;min-width:42px;min-height:0;line-height:1;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap}
  .header-actions .btn-nav span{display:none}
  .header-actions .btn-nav i{font-size:1rem;margin:0}
  .logo-word{font-size:.88rem;line-height:1.1;gap:.2rem}
  .logo .logo-mark{width:34px;height:34px}
  .logo{gap:.5rem;min-width:0;margin-right:.6rem}
}
@media(max-width:400px){.logo-word{font-size:.8rem}}
@media(max-width:340px){.logo-word{font-size:.72rem}}
/* la barra del blog se ancla a la altura real del header */
.blog-bar{top:calc(var(--hdr-h,136px) + 12px)}
@media(max-width:900px){.blog-bar{top:calc(var(--hdr-h,80px) + 10px)}}
/* el "IA" de la marca no debe encogerse dentro del logo */
.logo-accent{flex:0 0 auto;white-space:nowrap}
/* las 4 cifras en 2×2 en móvil, no 3+1 */
@media(max-width:560px){.blog-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem 0}}