/* ============================================================
   DevYHB v2 · Cinematic Elite Portfolio
   Aesthetic: Deep editorial × Modern terminal × Elite craft
   ============================================================ */

:root {
  --bg: #f3f0ea;
  --bg2: #e9e5dd;
  --surface: #fdfcf9;
  --ink: #0c0d0e;
  --ink2: #282b29;
  --muted: #80857e;
  --accent: #005c38;
  --accent2: #003f27;
  --line: #d3cec5;
  --nav-bg: rgba(243,240,234,.92);
  --shadow: 0 20px 60px rgba(12,13,14,.08);
  --glow: 0 0 30px rgba(0,92,56,.08);
  --hero-dot: rgba(12,13,14,.05);
  --grain-opacity: .032;
  --fh: 'Bricolage Grotesque', sans-serif;
  --fm: 'DM Mono', monospace;
  --ease: cubic-bezier(0.23,1,0.32,1);
  --ease-in: cubic-bezier(0.65,0,0.35,1);
  --glass: blur(20px) saturate(160%);
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
}

[data-theme="dark"] {
  --bg: #060808;
  --bg2: #0a0d0d;
  --surface: #0f1313;
  --ink: #eae7e0;
  --ink2: #828780;
  --muted: #3e4441;
  --accent: #00e87a;
  --accent2: #00c466;
  --line: #171b1b;
  --nav-bg: rgba(6,8,8,.94);
  --shadow: 0 24px 72px rgba(0,0,0,.85);
  --glow: 0 0 50px rgba(0,232,122,.08);
  --hero-dot: rgba(0,232,122,.04);
  --grain-opacity: .06;
}

/* === RESET & BASE === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--fh);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } }
body.is-loading, body.menu-open { overflow: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: none; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); }

/* === GRAIN OVERLAY === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  animation: grain-shift .4s steps(1) infinite;
}

@keyframes grain-shift {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-2px,-3px); }
  20% { transform: translate(3px,1px); }
  30% { transform: translate(-1px,3px); }
  40% { transform: translate(2px,-2px); }
  50% { transform: translate(-3px,2px); }
  60% { transform: translate(1px,-3px); }
  70% { transform: translate(3px,3px); }
  80% { transform: translate(-2px,1px); }
  90% { transform: translate(2px,-1px); }
}

/* === CUSTOM CURSOR === */
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  transform: translate(-50%,-50%);
  transition: transform .12s var(--ease), opacity .3s, width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s;
  opacity: 0;
}
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  transform: translate(-50%,-50%);
  transition: opacity .3s, transform .06s var(--ease);
  opacity: 0;
}
body.cursor-ready #cursor-ring,
body.cursor-ready #cursor-dot { opacity: 1; }
body.cursor-hover #cursor-ring { width: 54px; height: 54px; background: rgba(0,232,122,.06); }
body.cursor-click #cursor-ring { width: 26px; height: 26px; }

/* === SCROLL PROGRESS === */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  box-shadow: 0 0 8px var(--accent);
  transition: width .1s linear;
}

/* === LOADER === */
.loader {
  position: fixed; inset: 0; z-index: 9995;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-box { display: grid; justify-items: center; gap: 1.5rem; }
.loader-logo { font-size: clamp(3rem,10vw,6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.loader-logo em { font-style: normal; color: var(--accent); }
.loader-bar { width: min(240px,60vw); height: 2px; background: var(--line); overflow: hidden; position: relative; }
.loader-bar::after {
  content: ''; display: block; width: 50%; height: 100%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: loader-run 1.2s var(--ease) infinite;
}
@keyframes loader-run { from { transform: translateX(-110%); } to { transform: translateX(220%); } }
.loader-copy { font-family: var(--fm); font-size: .7rem; color: var(--muted); letter-spacing: .25em; text-transform: uppercase; }

/* === NAVIGATION === */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 5vw;
  background: transparent;
  transition: all .4s var(--ease);
  /* Capa compuesta independiente: el scramble no puede "ensuciar" sus píxeles */
  will-change: transform;
  transform: translateZ(0);
}
nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--line);
  padding: .9rem 5vw;
}
.nlogo { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.nlogo em { font-style: normal; color: var(--accent); }
.nlinks { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nlinks a {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; position: relative; padding-bottom: 2px;
}
.nlinks a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width .3s var(--ease);
}
.nlinks a:hover, .nlinks a.active { color: var(--ink); }
.nlinks a:hover::after, .nlinks a.active::after { width: 100%; }
.nav-controls { display: flex; align-items: center; gap: .8rem; }
.theme-toggle, .lang-toggle, .hamburger {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); font-family: var(--fm); font-size: .72rem; font-weight: 700;
  transition: all .3s var(--ease);
}
.theme-toggle:hover, .lang-toggle:hover, .hamburger:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 12px rgba(0,232,122,.12);
}
.ncta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.4rem; background: var(--ink); color: var(--bg);
  font-size: .78rem; font-weight: 700; border-radius: 50px;
  letter-spacing: .02em; transition: all .3s var(--ease);
}
.ncta:hover {
  background: var(--accent); color: #000;
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,232,122,.2);
}
.hamburger { display: none; }

/* Mobile Menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 290;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  background: var(--bg); transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  font-size: clamp(1.8rem,7vw,2.8rem); font-weight: 800; color: var(--muted);
  transition: color .3s, transform .3s var(--ease);
}
.mobile-menu a:hover { color: var(--accent); transform: translateX(12px); }
.mobile-menu-close {
  position: absolute; top: 1.5rem; right: 5vw;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 1rem; transition: .3s;
}
.mobile-menu-close:hover { border-color: var(--accent); color: var(--accent); }

/* === HERO === */
#hero {
  position: relative; min-height: 100vh;
  max-width: 1400px; margin: 0 auto;
  padding: 12rem 7vw 6rem;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
}
#hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--hero-dot) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0; animation: grid-drift 20s linear infinite;
}
@keyframes grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}
#hero > * { position: relative; z-index: 1; }

.hero-tag {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .45rem 1.1rem; border: 1px solid var(--line);
  border-radius: 100px; font-family: var(--fm); font-size: .72rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  width: fit-content; margin-bottom: 2rem; color: var(--muted); background: var(--surface);
}
.hero-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; box-shadow: 0 0 6px var(--accent); }
  50% { opacity: .6; box-shadow: 0 0 14px var(--accent); }
}

#hero .reveal {
  display: block;
}

h1.hname {
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  line-height: 0.95; 
  font-weight: 800; 
  letter-spacing: -.05em;
  margin-bottom: 2.5rem;
  display: block;
  text-align: left;
  max-width: 100%;
}

.scramble-wrapper {
  display: inline-block;
  vertical-align: top;
  position: relative;
  text-align: left;
  /* Aísla el reflow/repaint: los cambios internos no propagan al DOM padre */
  contain: layout style;
  will-change: contents;
}

.scramble-ghost {
  display: block;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--fh);
}

.scramble-target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--ink); /* Regresa a blanco/negro base */
  white-space: nowrap;
  font-family: var(--fh);
  display: block;
  text-align: left;
}

h1.hname em { 
  font-style: normal; 
  color: var(--accent); 
  display: block;
  margin-top: 0.15em;
}

.hero-copy {
  font-size: clamp(1rem,1.4vw,1.18rem); 
  color: var(--ink2);
  max-width: 680px; 
  margin-bottom: 3rem; 
  line-height: 1.85;
  display: block;
}
.hero-copy strong { color: var(--ink); }

.hbtns { display: flex; flex-wrap: wrap; gap: 1rem; }

.btn-solid, .btn-line {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .9rem 2rem; font-size: .82rem; font-weight: 700;
  border-radius: 50px; letter-spacing: .03em;
  transition: all .3s var(--ease);
}
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover {
  background: var(--accent); color: #000;
  transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,232,122,.2);
}
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

.hstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 2rem; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--line);
}
.hstat-n { font-size: 2.8rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.hstat-l { font-family: var(--fm); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: .6rem; }

/* === GENERIC SECTION === */
.section { max-width: 1200px; margin: 0 auto; padding: 9rem 5vw; }
.sdivider { height: 1px; margin: 0 5vw; background: var(--line); }

.sec-label { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 4rem; }
.sec-label-tag { font-family: var(--fm); font-size: .7rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .15em; white-space: nowrap; }
.sec-label-line { flex: 1; height: 1px; background: var(--line); }

h2.stit { font-size: clamp(2.8rem,5.5vw,4.5rem); font-weight: 800; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -.04em; }
h2.stit em { font-style: normal; color: var(--accent); }
.stit-sub { max-width: 560px; color: var(--muted); font-size: 1.05rem; margin-bottom: 4.5rem; line-height: 1.8; }

/* === ABOUT === */
.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 6rem; align-items: start; }
.about-img { position: sticky; top: 7rem; border-radius: var(--r-lg); overflow: visible; }

.card {
  width: 100%; 
  aspect-ratio: 3/4; 
  position: relative;
  display: flex; 
  justify-content: center; 
  align-items: flex-end;
  perspective: 2500px;
  overflow: visible;
}
.cover-image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.wrapper {
  transition: all .5s var(--ease);
  position: absolute; 
  width: 100%; 
  height: 100%;
  inset: 0;
  z-index: -1; 
  border-radius: var(--r-lg); 
  overflow: hidden;
  border: 1px solid var(--line);
}
.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0,0,0,.3), 0 0 0 1px var(--accent);
}
.wrapper::after {
  content: ''; 
  opacity: 0; 
  width: 100%; 
  height: 120px;
  transition: all .5s; 
  position: absolute; 
  left: 0; 
  bottom: 0;
  /* Cambio: Desvanecimiento a negro suave para crear profundidad real, no bloque de color */
  background-image: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%);
}
.card:hover .wrapper::after { 
  opacity: 1; 
}
.character {
  width: 100%; 
  opacity: 0; 
  transition: all .5s var(--ease);
  position: absolute; 
  z-index: 1; 
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.card:hover .character { 
  opacity: 1; 
  transform: translate3d(0%, -15%, 100px); 
}

.about-photo-wrap { 
  position: relative; 
  border-radius: var(--r-lg); 
  overflow: visible; 
  box-shadow: var(--shadow); 
  border: 1px solid var(--line); 
  background: var(--bg2); 
}
.about-photo-wrap .cover-image { border-radius: var(--r-lg); }

.about-text p { font-size: 1.08rem; color: var(--ink2); margin-bottom: 2rem; line-height: 1.85; }
.about-meta { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.am { padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.am:hover { background: var(--bg2); }
.am:nth-child(even) { border-right: none; }
.am:nth-last-child(-n+2) { border-bottom: none; }
.am-k { font-family: var(--fm); font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem; }
.am-v { font-size: .95rem; font-weight: 700; }
.am-v.av { color: var(--accent); display: flex; align-items: center; gap: .5rem; }

/* === SKILLS === */
.ski-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.ski-left { position: sticky; top: 7rem; }
.skigroups { display: grid; gap: 2.5rem; }
.skig-title { font-family: var(--fm); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.skitags { display: flex; flex-wrap: wrap; gap: .6rem; }
.skitag {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .55rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: .83rem; font-weight: 600; transition: all .3s var(--ease);
}
.skitag i { font-size: 1.1rem; transition: transform .3s var(--ease); }
.skitag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08), var(--glow); }
.skitag:hover i { transform: scale(1.2) rotate(-5deg); }

/* Brand colors */
.devicon-python-plain { color: #3776AB; }
.devicon-django-plain { color: #092E20; }
.devicon-javascript-plain { color: #F0C000; }
.devicon-vuejs-plain { color: #42B883; }
.devicon-flutter-plain { color: #02569B; }
.devicon-html5-plain { color: #E34F26; }
.devicon-css3-plain { color: #1572B6; }
.devicon-bootstrap-plain { color: #7952B3; }
.devicon-git-plain { color: #F05032; }
.devicon-salesforce-plain { color: #00A1E0; }
[data-theme="dark"] .devicon-javascript-plain { color: #F7DF1E; }
[data-theme="dark"] .devicon-django-plain { color: #44B78B; }

/* === RESUME === */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.res-col-title { display: flex; align-items: center; gap: 1rem; font-family: var(--fm); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3rem; }
.res-col-title i { color: var(--accent); font-size: 1.1rem; }
.res-col-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tl { display: grid; gap: 0; }
.tli { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.tli:first-child { padding-top: .5rem; }
.tli:last-child { border-bottom: none; }
.tly { font-family: var(--fm); font-size: .72rem; color: var(--muted); font-weight: 700; line-height: 1.3; padding-top: .15rem; }
.tldo { position: absolute; left: 100px; top: 0; bottom: 0; width: 1px; background: var(--line); transform: translateX(-50%); }
.tldo::before {
  content: ''; position: absolute; top: 3.1rem; left: 50%;
  transform: translate(-50%,-50%); width: 9px; height: 9px;
  background: var(--accent); border-radius: 50%; border: 2px solid var(--bg);
  z-index: 2; box-shadow: 0 0 8px var(--accent);
}
.tli:first-child .tldo::before { top: 1.1rem; }
.tltit { font-size: 1.05rem; font-weight: 500; margin-bottom: .3rem; color: var(--ink2); }
.tltit strong { font-weight: 800; color: var(--ink); }
.text-bold { font-weight: 900; }
.tlorg { font-family: var(--fm); font-size: .72rem; color: var(--accent); font-weight: 700; margin-bottom: .8rem; letter-spacing: .04em; }
.tldesc { font-size: .88rem; color: var(--muted); line-height: 1.7; }

/* === PORTFOLIO === */
.pfilt { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.pfbtn { padding: .55rem 1.6rem; border: 1px solid var(--line); border-radius: 50px; font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; transition: all .3s var(--ease); }
.pfbtn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pfbtn.active { background: var(--accent); color: #000; border-color: var(--accent); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 1.2rem; }
.pitem { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; background: var(--bg2); border: 1px solid var(--line); }
.pitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pitem:hover img { transform: scale(1.08); }
.pov {
  position: absolute; inset: 0; background: rgba(0,0,0,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem; text-align: center; color: #fff; opacity: 0; transition: opacity .4s var(--ease);
}
.pitem:hover .pov { opacity: 1; }
.pov-tag { font-family: var(--fm); font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: .5rem; color: var(--accent); }
.pov-tit { font-size: 1.2rem; font-weight: 800; }
.tgrid { display: none; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 1.2rem; }
.tgrid.vis { display: grid; }
.tcell { padding: 1.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-align: center; transition: all .3s var(--ease); }
.tcell:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: var(--glow); }
.tcell i { font-size: 2.2rem; display: block; margin-bottom: 1rem; }
.tcell span { font-family: var(--fm); font-size: .68rem; color: var(--muted); font-weight: 600; }

/* Proof blocks */
.proof-block { margin-bottom: 4rem; }
.proof-title { font-family: var(--fm); font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .8rem; }
.proof-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow); transition: all .4s var(--ease); }
.proof-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow), var(--glow); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; }
.proof-top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; }
.proof-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--line); }
.proof-kicker { font-family: var(--fm); font-size: .62rem; color: var(--accent); text-transform: uppercase; font-weight: 700; letter-spacing: .1em; }
.proof-name { font-size: 1.25rem; font-weight: 800; margin: .1rem 0; }
.proof-handle { font-family: var(--fm); font-size: .72rem; color: var(--muted); }
.proof-copy { font-size: 1rem; color: var(--ink2); margin-bottom: 1.5rem; line-height: 1.75; }
.proof-stats { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.5rem; }
.proof-stat { padding: 1rem; border-right: 1px solid var(--line); text-align: center; }
.proof-stat:last-child { border-right: none; }
.proof-stat strong { font-size: 1.2rem; display: block; }
.proof-stat span { font-family: var(--fm); font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.proof-pill-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.proof-pill { padding: .38rem .85rem; background: var(--bg2); border-radius: 8px; font-family: var(--fm); font-size: .62rem; font-weight: 700; letter-spacing: .06em; transition: all .3s var(--ease); }
.proof-pill:hover { background: var(--accent); color: #000; transform: translateY(-2px); }
.proof-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--accent); font-weight: 700; font-size: .9rem; transition: gap .3s; }
.proof-link:hover { gap: .8rem; }

[data-theme="dark"] .github-chart-img { filter: invert(.85) hue-rotate(180deg) brightness(1.2) contrast(1.1); }

/* Interactive Elements & Accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Flutter */
.flutter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1rem; margin-top: 2rem; }

.flutter-item { 
  position: relative; 
  border-radius: var(--r-sm); 
  overflow: hidden; 
  aspect-ratio: 9/19; 
  border: 1px solid var(--line); 
  cursor: pointer; 
  transition: transform .3s var(--ease), box-shadow .3s;
  background: none;
  padding: 0;
  display: block;
  width: 100%;
}

.flutter-item:hover, .flutter-item:focus-visible { 
  transform: scale(1.03) translateY(-4px); 
  box-shadow: var(--shadow), var(--glow); 
}

.flutter-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.flutter-item img { width: 100%; height: 100%; object-fit: cover; }

.flutter-overlay { 
  position: absolute; 
  inset: 0; 
  background: rgba(0,0,0,.7); 
  display: grid; 
  place-items: center; 
  color: var(--accent); 
  font-size: 1.5rem; 
  opacity: 0; 
  transition: opacity .3s; 
}

.flutter-item:hover .flutter-overlay, .flutter-item:focus .flutter-overlay { opacity: 1; }

.flutter-logo-brand { height: 16px; vertical-align: middle; margin-left: 8px; transition: filter .4s var(--ease); }
[data-theme="light"] .flutter-logo-brand { filter: brightness(0); }
[data-theme="dark"] .flutter-logo-brand { filter: brightness(0) invert(1); }

/* === AI MEGA CARD === */
.ai-mega-card { padding: 0 !important; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.ai-command-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "head head head head head head" "vis vis vis vis side side" "vis vis vis vis side side" "foot foot foot foot foot foot";
  background: var(--surface); gap: 0;
}
.ai-header, .ai-visual, .ai-sidebar, .ai-footer { border: none !important; }
.ai-header, .ai-sidebar, .ai-footer {
  background-color: var(--surface);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px; position: relative;
}
.ai-header { grid-area: head; padding: 2.5rem 2.5rem 1.5rem; }
.ai-kicker { font-family: var(--fm); font-size: .68rem; color: var(--accent); text-transform: uppercase; font-weight: 800; letter-spacing: .15em; margin-bottom: .8rem; display: flex; align-items: center; gap: .6rem; }
.ai-kicker::before { content: "CMD >"; opacity: .4; }
.ai-header .proof-name { font-size: 1.7rem; letter-spacing: -.02em; }
.ai-visual { grid-area: vis; background: #000; position: relative; display: flex; align-items: center; overflow: hidden; min-height: 280px; }
.ai-visual video { width: 100%; height: 100%; object-fit: cover; }
.ai-sidebar { grid-area: side; padding: 2.5rem; display: flex; flex-direction: column; gap: 2.5rem; justify-content: center; }
.ai-feature-mini { display: flex; flex-direction: column; gap: .4rem; }
.ai-feature-mini i { color: var(--accent); font-size: 1.3rem; }
.ai-feature-mini strong { font-size: .88rem; font-weight: 800; }
.ai-feature-mini span { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.ai-footer { grid-area: foot; padding: 2.5rem; }
.ai-footer .proof-copy { font-size: 1.05rem; color: var(--ink2); max-width: 80%; }
.ai-footer .proof-copy strong { color: var(--accent); }
.ai-mega-card .proof-pill { background: var(--surface); border: 1px solid var(--accent); color: var(--accent); transition: all .3s var(--ease); }
.ai-mega-card .proof-pill:hover { background: var(--accent); color: #000; box-shadow: 0 0 12px var(--accent); }
.ai-badge-live {
  position: absolute; bottom: 1rem; left: 1rem;
  padding: .35rem .8rem; background: rgba(0,0,0,.7); border: 1px solid var(--accent);
  border-radius: 50px; color: var(--accent); font-family: var(--fm); font-size: .65rem;
  font-weight: 700; display: flex; align-items: center; gap: .5rem;
  letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px);
}
.status-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; box-shadow: 0 0 6px var(--accent); animation: pulse-dot 2s infinite; }
.ai-footer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 900px) {
  .ai-command-grid { grid-template-areas: "head head head head head head" "vis vis vis vis vis vis" "side side side side side side" "foot foot foot foot foot foot"; }
  .ai-visual { height: 220px; }
}

/* === SERVICES === */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.svc-card {
  padding: 3.5rem 2.2rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: all .4s var(--ease); position: relative; overflow: hidden;
}
.svc-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover { background: var(--ink); color: var(--bg); transform: translateY(-12px); box-shadow: var(--shadow); }
[data-theme="dark"] .svc-card:hover { background: var(--bg2); color: var(--ink); }
.svc-n { font-family: var(--fm); font-size: .65rem; color: var(--muted); margin-bottom: 1.5rem; letter-spacing: .1em; }
.svc-ico { font-size: 2.5rem; color: var(--accent); margin-bottom: 1.5rem; display: block; transition: transform .4s var(--ease); }
.svc-card:hover .svc-ico { transform: scale(1.15) rotate(-8deg); }
.svc-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
.svc-desc { font-size: .92rem; color: var(--muted); line-height: 1.65; max-width: 260px; }
.svc-card:hover .svc-desc { color: rgba(255,255,255,.6); }
.svc-card:hover .svc-n { color: var(--accent); }
[data-theme="dark"] .svc-card:hover .svc-desc { color: var(--muted); }

/* === CONTACT === */
.con-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.con-cta { font-size: clamp(2.6rem,5vw,4.2rem); font-weight: 800; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -.04em; }
.con-cta em { font-style: normal; color: var(--accent); }
.con-body { font-size: 1.05rem; color: var(--muted); margin-bottom: 2.5rem; line-height: 1.85; }
.conlinks { display: grid; gap: .8rem; }
.clink { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-weight: 700; font-size: .95rem; transition: all .3s var(--ease); }
.clink:hover { border-color: var(--accent); color: var(--accent); transform: translateX(10px); box-shadow: var(--glow); }
.cico { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0,232,122,.07); color: var(--accent); border-radius: 12px; font-size: 1.2rem; flex-shrink: 0; }
.contact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 3rem; box-shadow: var(--shadow); }
.panel-tag { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem; background: rgba(0,232,122,.07); color: var(--accent); border-radius: 50px; font-family: var(--fm); font-size: .68rem; margin-bottom: 1.5rem; letter-spacing: .08em; text-transform: uppercase; }
.panel-title { font-size: 1.7rem; font-weight: 800; margin-bottom: 1rem; }
.panel-copy { color: var(--muted); margin-bottom: 2rem; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 2rem; }
.panel-item { padding: 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.panel-item:hover { background: var(--bg2); }
.panel-k { font-family: var(--fm); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
.panel-v { font-size: .9rem; font-weight: 700; }
.panel-signal { 
  display: flex; 
  gap: 1rem; 
  padding: 1.2rem; 
  background: var(--bg2); 
  border-radius: 12px; 
  color: var(--ink2); 
  font-weight: 600; 
  font-size: .88rem; 
  align-items: center; 
}
.panel-signal i { 
  color: var(--accent); 
  font-size: 1.1rem; 
  /* Quitamos el box-shadow que se veía disparejo y usamos solo opacidad */
  animation: pulse-opacity 2.5s infinite; 
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === FOOTER === */
footer { display: flex; align-items: center; justify-content: space-between; padding: 4rem 5vw; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; max-width: 1200px; margin: 0 auto; }
.fsoc { display: flex; gap: 2rem; }
.fsoc a:hover { color: var(--accent); }

/* === FLOATING ACTIONS === */
.waf, .scroll-top {
  position: fixed; right: 28px; z-index: 200;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow); transition: all .3s var(--ease);
  /* Capa compuesta propia: aislada de repaints del hero */
  will-change: transform;
  transform: translateZ(0);
}
.waf { bottom: 28px; font-size: 1.4rem; color: #25D366; }
.scroll-top { bottom: 96px; opacity: 0; visibility: hidden; }
.scroll-top.vis { opacity: 1; visibility: visible; }
.waf:hover, .scroll-top:hover { border-color: var(--accent); transform: scale(1.1); box-shadow: var(--shadow), var(--glow); }

/* === FLUTTER MODAL === */
.fmodal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; backdrop-filter: blur(12px); }
.fmodal.active { display: flex; }
.fmodal-content { position: relative; width: min(420px,88vw); max-height: 80vh; display: flex; justify-content: center; }
.fmodal-content img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.fmodal-close { position: fixed; top: 24px; right: 24px; width: 44px; height: 44px; background: var(--accent); color: #000; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; cursor: pointer; z-index: 10002; transition: all .3s var(--ease); box-shadow: 0 8px 24px rgba(0,232,122,.3); }
.fmodal-close:hover { transform: scale(1.1) rotate(90deg); background: #fff; }
.fmodal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem; border: 1px solid rgba(255,255,255,.15); transition: all .3s var(--ease); display: grid; place-items: center; }
.fmodal-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.fmodal-prev { left: -68px; }
.fmodal-next { right: -68px; }

/* === AUDIT STREAM & TERMINAL POPUP === */
.audit-stream { margin-top: 1rem; font-family: var(--fm); font-size: 0.65rem; color: var(--accent); height: 80px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0.6; pointer-events: none; }
.audit-line { animation: audit-fade-in 0.3s ease both; white-space: nowrap; line-height: 1.4; }
@keyframes audit-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.terminal-popup { 
  position: fixed; 
  inset: 0; 
  z-index: 20000; 
  background: var(--nav-bg); 
  backdrop-filter: blur(0px); 
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: center; 
  justify-content: center; 
  padding: 2rem; 
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.2s var(--ease), backdrop-filter 1.2s var(--ease), visibility 1.2s;
}
.terminal-popup.active { 
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(25px); 
  -webkit-backdrop-filter: blur(25px);
}
.terminal-popup-content { 
  position: relative; 
  width: 100%; 
  max-width: 500px; 
  aspect-ratio: 1/1; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  transform: scale(0.9) translateY(20px);
  transition: transform 1.2s var(--ease);
}
.terminal-popup.active .terminal-popup-content {
  transform: scale(1) translateY(0);
}
.terminal-popup-close { position: absolute; top: -2rem; right: -1rem; background: none; border: none; color: var(--ink); font-size: 2.5rem; cursor: pointer; z-index: 10; transition: transform .3s; }
.terminal-popup-close:hover { transform: scale(1.2); color: var(--accent); }
.command-circle-container { position: absolute; inset: 0; z-index: 1; }
.terminal-wa-link { position: relative; z-index: 2; width: 80px; height: 80px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; text-decoration: none; box-shadow: 0 0 30px rgba(37,211,102,0.4); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.terminal-wa-link:hover { transform: scale(1.1); box-shadow: 0 0 50px rgba(37,211,102,0.6); }
.wa-tooltip { position: absolute; bottom: -40px; background: var(--accent); color: #000; padding: 0.4rem 0.8rem; border-radius: 4px; font-family: var(--fm); font-size: 0.7rem; font-weight: 800; white-space: nowrap; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: all 0.3s var(--ease); pointer-events: none; }
.terminal-wa-link:hover .wa-tooltip { opacity: 1; transform: translateY(0); }
.terminal-popup-footer { position: absolute; bottom: -4rem; text-align: center; font-family: var(--fm); color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }
.tp-line { margin-bottom: 0.3rem; }
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* === CYBERSECURITY SECTION IMPROVEMENTS === */
.cyber-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Forzar 2 columnas para simetría */
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 0; /* Esquinas cuadradas tácticas */
  font-family: var(--fm);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Indicador de estado neón */
.cyber-badge::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 2s infinite;
}

.cyber-badge i {
  display: none; /* Quitamos los iconos de Bootstrap para un look más limpio */
}

.cyber-badge:hover {
  border-color: var(--accent);
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 232, 122, 0.15);
}

/* Estilo corchete en hover */
.cyber-badge:hover::after {
  content: ' >';
  color: var(--accent);
  margin-left: 4px;
}

.terminal-log {
  font-family: var(--fm);
  font-size: 11px;
  line-height: 1.4;
  padding: 12px;
  background: rgba(0, 255, 65, 0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-left: 2px solid #00ff41;
  border-radius: 0 4px 4px 0;
  max-height: 100px; /* Limitar altura a ~4 líneas */
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.02);
  margin-top: 1rem;
}

@media (max-width: 480px) {
  .cyber-section {
    grid-template-columns: 1fr; /* 1 columna en móviles muy pequeños */
  }
}

/* === ANIMATIONS === */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .12s; }
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }

/* Hero reveal anim */
.hero-line {
  display: block; overflow: hidden;
}
.hero-line span {
  display: block;
  animation: hero-rise .9s var(--ease) both;
}
.hero-line:nth-child(2) span { animation-delay: .1s; }

@keyframes hero-rise {
  from { transform: translateY(110%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Glitch pulse on accent elements */
@keyframes glow-pulse {
  0%,100% { text-shadow: 0 0 10px var(--accent); }
  50% { text-shadow: 0 0 30px var(--accent), 0 0 60px var(--accent); }
}
/* Removed dark mode override to keep animation active */

/* === RESPONSIVE === */
@media (max-width: 1080px) {
  .about-grid, .ski-grid, .res-grid, .con-grid { grid-template-columns: 1fr; gap: 4rem; }
  .about-img, .ski-left { position: relative; top: 0; }
}
@media (max-width: 900px) {
  .nlinks, .ncta { display: none; }
  .hamburger { display: grid; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .fmodal-prev { left: 8px; }
  .fmodal-next { right: 8px; }
  .fmodal-close { top: 12px; right: 16px; }
}
@media (max-width: 600px) {
  .section { padding: 5rem 6vw; }
  .pgrid, .svc-grid, .panel-grid, .about-meta { grid-template-columns: 1fr; }
  .tli { grid-template-columns: 76px 1fr; gap: 1.5rem; }
  .tldo { left: 76px; }
  footer { flex-direction: column; gap: 2rem; text-align: center; }
  h1.hname { 
    font-size: clamp(2.2rem, 10vw, 2.8rem); 
    line-height: 1.1;
  }
  .scramble-wrapper {
    display: block;   /* Ocupa el ancho completo del h1 para que ghost y target rompan igual */
    width: 100%;
  }
  .scramble-ghost, .scramble-target {
    white-space: normal; /* Permitir saltos de línea en móviles muy pequeños */
  }
  .contact-panel { padding: 2rem; }
  .con-cta { font-size: 2.4rem; }
  #cursor-ring, #cursor-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  body::after { display: none; }
}