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

:root {
  color-scheme: light;
  --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);
  --nav-border: rgba(12,13,14,.08);
  --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"] {
  color-scheme: 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);
  --nav-border: rgba(255,255,255,.08);
  --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;
}

/* Crossfade a single page snapshot instead of animating every element. */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: none !important;
}
::view-transition { pointer-events: none; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-fade-in .24s ease-in-out both; mix-blend-mode: normal; }
@keyframes theme-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* === RESET & BASE === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; scroll-padding-top: 6rem; }
body {
  font-family: var(--fh);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}
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: pointer; }

/* Selección de texto con color de marca */
::selection { background: var(--accent); color: var(--bg); }

/* Foco visible accesible (solo navegación por teclado) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Respeto por usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  body::after { animation: 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;
}


/* === 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 .5s var(--ease), visibility .5s var(--ease);
}
.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;
  text-shadow: 0 0 35px rgba(0,232,122,.15);
}
.loader-logo em { font-style: normal; color: var(--accent); }
.loader-bar { 
  width: min(240px,60vw); 
  height: 3px; 
  background: var(--line); 
  overflow: hidden; 
  position: relative; 
  border-radius: 4px; 
}
.loader-bar::after {
  content: ''; display: block; width: 55%; height: 100%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  border-radius: 4px;
  animation: loader-run 1s var(--ease) infinite;
}
@keyframes loader-run { from { transform: translateX(-110%); } to { transform: translateX(220%); } }
.loader-copy { 
  font-family: var(--fm); 
  font-size: .72rem; 
  color: var(--muted); 
  letter-spacing: .25em; 
  text-transform: uppercase;
  min-height: 1.2em;
}

/* === NAVIGATION === */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 5vw;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, padding .25s ease;
  isolation: isolate;
}
nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-bottom-color: var(--nav-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  padding: .85rem 5vw;
}
.nlogo { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.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 .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: 6rem 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; 
}
.cyber-hover-card {
  position: absolute;
  z-index: 2;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: 1rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: max-content;
  max-width: 88%;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  pointer-events: none;
}
.card:hover .cyber-hover-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.chc-tag {
  font-family: var(--fm);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.chc-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
}
.chc-arrow {
  font-family: var(--fm);
  font-size: .62rem;
  color: var(--muted);
  margin-top: .1rem;
}

.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; }
.am-solo { grid-column: 1 / -1; text-align: left; border-right: none; border-bottom: none; }

/* === SKILLS === */
.ski-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 3.5rem; align-items: start; }
.ski-left { position: relative; }
.ski-left .stit {
  font-size: clamp(1.9rem, 2.4vw, 2.55rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 1.2rem;
  letter-spacing: -.035em;
  max-width: 100%;
}
.skigroups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.8rem; }
.skig-title { font-family: var(--fm); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.skitags { display: flex; flex-wrap: wrap; gap: .4rem; }
.skitag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .7rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: .75rem; font-weight: 600; transition: all .25s var(--ease);
  white-space: nowrap;
}
.skitag i { font-size: .92rem; transition: transform .3s var(--ease); }
.skitag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06), var(--glow); }
.skitag:hover i { transform: scale(1.15) rotate(-5deg); }
@media (max-width: 900px) {
  .ski-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ski-left { position: static; }
  .skigroups { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* 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 === */
.resume-tab-nav { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.rtab-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.6rem; border: 1px solid var(--line); border-radius: 50px; background: var(--surface); font-family: var(--fm); font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .3s var(--ease); }
.rtab-btn:hover { border-color: var(--accent); color: var(--ink); }
.rtab-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.rtab-pane { display: none; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.rtab-pane.active { display: block; opacity: 1; transform: translateY(0); }
.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: 2rem; }
.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: 110px 1fr; gap: 1.8rem; padding: 1.6rem 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: .75rem; color: var(--muted); font-weight: 700; line-height: 1.3; padding-top: .15rem; }
.tldo { position: absolute; left: 110px; top: 0; bottom: 0; width: 1px; background: var(--line); transform: translateX(-50%); }
.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: .6rem; letter-spacing: .04em; }
.tldesc { font-size: .88rem; color: var(--muted); line-height: 1.65; }

/* === 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; }
.pov-sub { font-size: .78rem; color: #e0e0e0; margin-top: .35rem; font-family: var(--fm); letter-spacing: .02em; }
.pov-cred { font-size: .7rem; color: var(--accent); margin-top: .45rem; font-family: var(--fm); letter-spacing: .05em; background: rgba(0,255,136,.12); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(0,255,136,.3); display: inline-flex; align-items: center; gap: .35rem; }
.cert-mini-block { margin-top: 2.5rem; }
.cert-mini-title { font-family: var(--fm); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cgrid-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .8rem; }
.pitem-mini { aspect-ratio: 3/2; cursor: pointer; }
.pitem-mini .pov { padding: .8rem; background: rgba(0,0,0,.82); }
.pitem-mini .pov-tit { font-size: .82rem; }
.pitem-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-zoom { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: .8rem; z-index: 2; opacity: .9; backdrop-filter: blur(4px); pointer-events: none; }
@media (max-width: 600px) { .cgrid-mini { grid-template-columns: repeat(2,1fr); } }
.cmodal-content { flex-direction: column; align-items: center; gap: 1rem; width: min(900px,92vw); }
.cmodal-content img { width: 100%; max-height: 74vh; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(0,0,0,.6); transition: opacity .3s var(--ease); }
.cmodal-caption { font-family: var(--fm); font-size: .82rem; color: #fff; text-align: center; letter-spacing: .04em; }
.cmodal-top-row { margin-bottom: .4rem; }
.cmodal-title { font-size: .95rem; color: #fff; font-weight: 700; }
.cmodal-meta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: .45rem; font-size: .78rem; font-family: var(--fm); }
.cmodal-recipient { color: var(--accent); display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.cmodal-cred-id { background: rgba(255,255,255,.08); padding: .2rem .6rem; border-radius: 4px; border: 1px solid rgba(255,255,255,.18); color: #d0d0d0; display: inline-flex; align-items: center; gap: .35rem; }
.cmodal-cred-id strong { color: #fff; letter-spacing: .04em; }
.cmodal-pdf-link { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent); color: #000 !important; font-weight: 700; padding: .25rem .75rem; border-radius: var(--r-sm); text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.cmodal-pdf-link:hover { filter: brightness(1.15); transform: translateY(-1px); }
.cmodal-htb-link { display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,255,136,.12); color: var(--accent) !important; font-weight: 600; padding: .25rem .7rem; border-radius: var(--r-sm); border: 1px solid rgba(0,255,136,.3); text-decoration: none; transition: transform .2s ease, background .2s ease; }
.cmodal-htb-link:hover { background: rgba(0,255,136,.25); transform: translateY(-1px); }
@media (max-width: 600px) { .cmodal-content { width: 94vw; } .cmodal-content img { max-height: 68vh; } }

/* Certificate Carousel */
.cert-carousel-container { display: block; }
.cert-carousel-container.hidden { display: none; }
.cert-carousel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.cert-carousel-title { font-family: var(--fm); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.carousel-nav-btns { display: flex; gap: .5rem; }
.carousel-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: all .3s var(--ease); }
.carousel-btn:hover { border-color: var(--accent); background: var(--accent); color: #000; transform: translateY(-2px); }
.cert-carousel-track { display: flex; gap: 1.2rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cert-carousel-track::-webkit-scrollbar { display: none; }
.cert-carousel-track .pitem { flex: 0 0 calc(25% - 0.9rem); min-width: 220px; scroll-snap-align: start; cursor: pointer; position: relative; transition: transform .3s var(--ease); }
.cert-carousel-track .pitem:hover { transform: translateY(-4px); }
@media (max-width: 900px) { .cert-carousel-track .pitem { flex: 0 0 calc(33.33% - 0.8rem); min-width: 200px; } }
@media (max-width: 600px) { .cert-carousel-track .pitem { flex: 0 0 calc(50% - 0.6rem); min-width: 160px; } }
.carousel-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all .3s var(--ease); }
.carousel-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* Presentation Deck for Projects (PowerPoint Style) */
.projects-deck-container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow), 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; margin-top: 2rem; position: relative; }
.deck-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--bg2); border-bottom: 1px solid var(--line); padding: .8rem 1.2rem; gap: 1rem; }
.deck-title-badge { font-family: var(--fm); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); display: flex; align-items: center; gap: .5rem; }
.deck-nav-tabs { display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; max-width: 100%; }
.deck-nav-tabs::-webkit-scrollbar { display: none; }
.deck-tab { flex: 0 0 auto; scroll-snap-align: start; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-family: var(--fm); font-size: .68rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); white-space: nowrap; }
.deck-tab:hover { color: var(--ink); border-color: var(--accent); }
.deck-tab.active { background: var(--accent); color: #000; border-color: var(--accent); }
.deck-viewport { position: relative; min-height: 440px; padding: 2rem; overflow: hidden; }
.deck-slide { display: none; opacity: 0; transform: scale(0.97) translateY(10px); transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.deck-slide.active { display: block; opacity: 1; transform: scale(1) translateY(0); }
.deck-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--bg2); border-top: 1px solid var(--line); }
.deck-nav-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.2rem; border: 1px solid var(--line); border-radius: 50px; background: var(--surface); font-family: var(--fm); font-size: .75rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .3s var(--ease); }
.deck-nav-btn:hover { border-color: var(--accent); background: var(--accent); color: #000; transform: translateY(-2px); }
.deck-nav-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; border-color: var(--line); background: var(--surface); color: var(--muted); }
.deck-counter { font-family: var(--fm); font-size: .8rem; font-weight: 800; color: var(--muted); letter-spacing: .05em; }
.deck-counter span#deckCurrentIndex { color: var(--accent); font-size: 1rem; }
.deck-dots-container { display: flex; gap: .4rem; }
.deck-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all .3s var(--ease); }
.deck-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
@media (max-width: 640px) {
  .nlogo { font-size: 1.2rem; }
  .deck-header { flex-direction: column; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; }
  .deck-nav-tabs { width: 100%; justify-content: flex-start; }
  .deck-viewport { padding: 1.2rem; min-height: 400px; }
  .deck-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.5rem;
    padding: 1rem;
  }
  .deck-counter {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }
  .deck-dots-container {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
  #deckPrevBtn {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
    width: 100%;
  }
  #deckNextBtn {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
    width: 100%;
  }
  .panorama-image-wrap { flex-direction: column !important; gap: 1.2rem !important; padding: 1.2rem 1rem !important; min-height: auto !important; }
  .panorama-image-wrap img { max-height: 110px !important; max-width: 90% !important; }
}
.tgrid { display: none; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.tgrid.vis { display: flex; }
.tcell { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 50px; text-align: center; transition: all .25s var(--ease); }
.tcell:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--glow); }
.tcell i { font-size: 1.2rem; display: inline-block; margin-bottom: 0; }
.tcell span { font-family: var(--fm); font-size: .78rem; color: var(--ink); font-weight: 700; }

/* 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-card:hover .project-image-wrap img { transform: scale(1.04); }
.flagship-card { position: relative; overflow: hidden; border-color: var(--accent); box-shadow: var(--shadow), var(--glow); }
.flagship-card .proof-top { align-items: flex-start; }
.flagship-glow { position: absolute; top: -40%; right: -20%; width: 320px; height: 320px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); opacity: .1; pointer-events: none; filter: blur(10px); }
.flagship-stars { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 50px; background: var(--surface); font-family: var(--fm); font-weight: 700; font-size: .85rem; color: var(--ink); text-decoration: none; transition: all .3s var(--ease); }
.flagship-stars i { color: #f5a623; font-size: .95rem; }
.flagship-stars .fs-count { font-weight: 800; }
.flagship-stars .fs-label { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.flagship-stars:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--glow); }
@media (max-width: 640px) { .flagship-card .proof-top { flex-wrap: wrap; } .flagship-stars { margin-left: 0; } }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 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; }
.proof-actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.5rem; }
.proof-actions .proof-link { margin-top: 0; }
.github-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .8rem; margin: 1.5rem 0 .8rem; }
.github-metrics > div { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); }
.github-metrics strong { color: var(--accent); font-family: var(--fm); font-size: 1.6rem; overflow-wrap: anywhere; }
.github-metrics span { font-size: .75rem; line-height: 1.5; }
.proof-note { margin-bottom: 1rem; color: var(--ink2); font-size: .75rem; line-height: 1.6; }
.project-highlights { margin-top: 2rem; }
.project-highlights .proof-card { display: flex; flex-direction: column; min-width: 0; }
.project-highlights .proof-top > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.project-highlights .proof-handle { color: var(--ink2); }
.project-highlights .proof-actions { margin-top: auto; padding-top: 1.5rem; }

/* Responsive Project Banners */
.card-banner-wrap {
  margin: 1.2rem 0 1.5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  position: relative;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.proof-card:hover .card-banner-wrap {
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.card-banner-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
  display: block;
}
.proof-card:hover .card-banner-wrap img {
  transform: scale(1.03);
}

/* Recons transparent banner special treatment with deep cyber weight */
.card-banner-wrap.recons-banner {
  background: 
    radial-gradient(ellipse at center, rgba(255, 45, 45, 0.22) 0%, rgba(8, 10, 15, 0.98) 75%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    #07090e;
  background-size: 100% 100%, 24px 24px, 24px 24px, 100% 100%;
  padding: 1.8rem 1.4rem;
  border-color: rgba(255, 60, 60, 0.25);
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85);
}
.card-banner-wrap.recons-banner img {
  width: 90%;
  height: auto;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255, 60, 60, 0.55));
  image-rendering: pixelated;
}
.proof-card:hover .card-banner-wrap.recons-banner {
  border-color: #ff4d4d;
  box-shadow: 0 10px 30px rgba(255, 45, 45, 0.25), inset 0 0 20px rgba(255, 45, 45, 0.12);
}
.portfolio-learning-title { margin: 4rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--line); font-size: 1.5rem; }

/* Calendario de contribuciones (render propio, sin dependencias externas) */
.gh-chart { min-width: 720px; display: grid; gap: 6px; }
.gh-chart-months,
.gh-chart-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 10px; gap: 3px; }
.gh-chart-grid { grid-template-rows: repeat(7, 10px); }
.gh-chart-months span { font-family: var(--fm); font-size: .55rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: visible; }
.gh-day { border-radius: 2px; background: var(--line); }
.gh-day[data-level="1"] { background: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.gh-day[data-level="2"] { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.gh-day[data-level="3"] { background: color-mix(in srgb, var(--accent) 78%, var(--line)); }
.gh-day[data-level="4"] { background: var(--accent); }
.gh-day.gh-pad { background: transparent; }
.gh-chart-error { min-width: 0; font-family: var(--fm); font-size: .65rem; color: var(--muted); }

/* 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 { font-size: 1.15rem; line-height: 1; color: var(--ink); transition: color .4s var(--ease); }

/* === 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: 1200px) {
  .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: 260px; }
  .ai-sidebar { padding: 2rem; flex-direction: row; flex-wrap: wrap; gap: 2rem; }
  .ai-feature-mini { flex: 1 1 200px; }
}

@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; }
}

.theme-logo { transition: filter .3s var(--ease); }
[data-theme="light"] .theme-logo { filter: invert(1) brightness(0); }

/* === 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-grid > * { min-width: 0; }
.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; overflow-wrap: anywhere; 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-signal {
  --signal-muted: color-mix(in srgb, var(--ink) 65%, var(--surface));
  position: relative; min-width: 0; overflow: hidden;
  padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.signal-title { margin: 0 0 .7rem; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.045em; }
.signal-title em { font-style: normal; color: var(--accent); }
.signal-copy { max-width: 340px; color: var(--signal-muted); font-size: .88rem; line-height: 1.6; }
.contact-scene {
  position: relative; height: 270px; margin: 0 -1.75rem; display: grid; place-items: center;
  perspective: 750px; isolation: isolate;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
}
.contact-scene::before {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: 0; height: 150px;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px);
  background-size: 30px 30px; transform: rotateX(65deg); transform-origin: center bottom;
  mask-image: radial-gradient(ellipse, #000, transparent 65%); pointer-events: none;
}
.contact-scene::after { content: ''; position: absolute; bottom: 30px; width: 150px; height: 22px; border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 3%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 5%, transparent); pointer-events: none; }
.signal-assembly {
  position: relative; width: 186px; height: 186px; transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .18s ease-out;
}
.signal-sphere { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-18deg) rotateZ(-18deg) rotateY(25deg); animation: signal-turn 18s linear infinite; }
.signal-sphere > span { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 50%; transform: rotateY(var(--angle)); }
.signal-sphere > .signal-equator { transform: rotateX(90deg); border-color: color-mix(in srgb, var(--accent) 48%, transparent); }
.signal-orbit { position: absolute; inset: -27px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; transform-style: preserve-3d; transform: rotateX(64deg) rotateY(-20deg); animation: signal-orbit 9s linear infinite; }
.signal-orbit > span { position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.signal-core {
  position: absolute; inset: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--surface));
  border-radius: 23px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), color-mix(in srgb, var(--accent) 28%, var(--surface)) 70%); color: var(--accent);
  font-size: 2.6rem; box-shadow: -7px 8px 0 color-mix(in srgb, var(--accent) 40%, var(--surface)), -8px 9px 0 color-mix(in srgb, var(--accent) 65%, var(--surface)), 0 0 42px color-mix(in srgb, var(--accent) 17%, transparent);
  transform: translateZ(42px) rotateX(8deg) rotateY(-16deg) rotateZ(-8deg);
  animation: signal-float 4s ease-in-out infinite;
}
.signal-node { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--accent); font-family: var(--fm); font-size: .8rem; box-shadow: 0 8px 18px #0001; }
.signal-node span { color: var(--signal-muted); font-size: .6rem; letter-spacing: .08em; }
.signal-node-api { left: 9%; top: 27%; transform: rotate(-8deg); }
.signal-node-ai { right: 10%; bottom: 23%; transform: rotate(8deg); }
.signal-coordinate, .signal-caption { position: absolute; bottom: 5px; font-family: var(--fm); font-size: .48rem; letter-spacing: .04em; color: var(--signal-muted); }
.signal-coordinate { left: 1.75rem; }
.signal-caption { right: 1.75rem; }
.signal-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: .75rem; width: fit-content; max-width: 100%; min-height: 54px; margin: .8rem auto 0; padding: .85rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: var(--bg); font-size: .9rem; font-weight: 800; transition: background .18s, transform .18s; }
.signal-cta > i:first-child { font-size: 1.25rem; }
.signal-cta > i:last-child { margin-left: auto; }
.signal-cta:hover { background: var(--accent2); transform: translateY(-2px); }
.signal-cta:focus-visible { outline-color: var(--accent); outline-offset: 4px; }
.signal-note { margin-top: .65rem; text-align: center; color: var(--signal-muted); font-size: .72rem; }
.signal-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; font-family: var(--fm); font-size: .58rem; color: var(--signal-muted); }
/* Keep the scene static until visible, including when JavaScript is unavailable. */
.signal-sphere, .signal-orbit, .signal-core { animation-play-state: paused; }
.contact-signal.is-animating :is(.signal-sphere, .signal-orbit, .signal-core) { animation-play-state: running; }
@keyframes signal-turn { from { transform: rotateX(-18deg) rotateZ(-18deg) rotateY(25deg); } to { transform: rotateX(-18deg) rotateZ(-18deg) rotateY(385deg); } }
@keyframes signal-orbit { from { transform: rotateX(64deg) rotateY(-20deg) rotateZ(0); } to { transform: rotateX(64deg) rotateY(-20deg) rotateZ(360deg); } }
@keyframes signal-float { 0%, 100% { transform: translateZ(42px) translateY(0) rotateX(8deg) rotateY(-16deg) rotateZ(-8deg); } 50% { transform: translateZ(42px) translateY(-8px) rotateX(8deg) rotateY(-8deg) rotateZ(-4deg); } }

/* === 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 === */
.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; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
@keyframes audit-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@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 === */
/* Entrance motion must never gate access to the content. */
.reveal { opacity: 1; transform: translateY(8px); transition: transform .22s var(--ease); }
.reveal.in { transform: none; }

/* 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: 3.5rem 6vw; }
  .pgrid, .svc-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-signal { padding: 1.25rem; }
  .contact-scene { height: 250px; margin-inline: -1.25rem; }
  .signal-node-api { left: 6%; }
  .signal-node-ai { right: 6%; }
  .signal-coordinate { left: 1.25rem; }
  .signal-caption { right: 1.25rem; }
  .signal-cta { gap: .5rem; font-size: .82rem; }
  .con-cta { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .loader { transition: none !important; }
  .reveal { transform: none; }
  body::after { display: none; }
}