/* =========================================================
   kordev — Marco Cordero
   Portal en órbita: nebulosa animada en canvas, cursor con
   estela, contador de carga, titulares monumentales en
   mayúsculas sobre índigo casi negro.
   ========================================================= */

:root{
  --bg:            #05050d;
  --bg-alt:        #090a16;
  --surface:       #10101f;
  --surface-2:     #161829;
  --border:        #262a42;
  --border-soft:   #1a1c2f;

  --text:          #f1eff7;
  --text-dim:      #a6a5bf;
  --text-faint:    #6f6e8c;

  --accent:        #2ef58f;
  --accent-2:      #6ea8ff;
  --accent-3:      #b98bff;
  --accent-glow:   rgba(46, 245, 143, .3);

  --radius:        3px;
  --radius-lg:     4px;
  --maxw:          1180px;

  --display:       'Unbounded', 'Hanken Grotesk', sans-serif;
  --font:          'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --shadow:        0 24px 60px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; line-height:1.16; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

::selection{ background:var(--accent); color:#04140a; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#242642; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* =========================================================
   NEBULOSA (fondo canvas, tipo shader)
   ========================================================= */
.nebula{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}

/* =========================================================
   CURSOR PERSONALIZADO
   ========================================================= */
.cursor{
  position:fixed;
  top:0; left:0;
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  border:1px solid rgba(241,239,247,.55);
  background:radial-gradient(circle at 35% 30%, rgba(46,245,143,.35), transparent 70%);
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .3s ease, width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background .25s ease;
}
.cursor.is-active{ opacity:1; }
.cursor.is-hover{
  width:52px; height:52px;
  margin:-26px 0 0 -26px;
  border-color:rgba(46,245,143,.7);
  background:radial-gradient(circle at 35% 30%, rgba(46,245,143,.5), transparent 72%);
}

/* =========================================================
   LOADER (contador de 0 a 100)
   ========================================================= */
.loader{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--bg);
  transition:opacity .6s ease, visibility .6s ease;
}
.loader__mark{
  width:62px;
  height:55px;
  display:block;
  color:var(--accent);
  filter:drop-shadow(0 0 26px var(--accent-glow));
}
.loader__count{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(3rem, 10vw, 6rem);
  letter-spacing:-.02em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.loader__label{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
body.is-loading{ overflow:hidden; }

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn svg{ flex:none; }

.btn--primary{
  background:var(--accent);
  color:var(--bg);
  box-shadow:0 0 0 1px rgba(46,245,143,.3), 0 10px 26px -8px var(--accent-glow);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(46,245,143,.5), 0 16px 34px -8px rgba(46,245,143,.5);
}

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn--ghost:hover{
  border-color:var(--accent-2);
  color:var(--accent-2);
  transform:translateY(-2px);
}

.btn--lg{ padding:16px 30px; font-size:.96rem; }
.btn--sm{ padding:9px 16px; font-size:.78rem; }
.btn--block{ width:100%; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(5,5,13,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--border-soft);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--accent);
}
.logo__mark{
  width:30px;
  height:27px;
  flex:none;
  display:block;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.logo:hover .logo__mark{ transform:translateY(-3px); }
.logo__word{
  font-family:var(--display);
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text);
}

.nav__links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav__links > a{
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  transition:color .25s ease, letter-spacing .25s ease, opacity .25s ease;
  position:relative;
}
.nav__links > a:not(.btn):hover{ color:var(--text); letter-spacing:.2em; }
.nav__cta{ color:var(--bg) !important; }

.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:42px; height:42px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  width:18px; height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — nebulosa en órbita
   ========================================================= */
.hero{
  position:relative;
  padding:154px 0 110px;
  overflow:hidden;
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 16px 7px 8px;
  margin-bottom:28px;
  border:1px solid var(--border);
  border-radius:100px;
  background:var(--surface);
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.badge__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(46,245,143,.55); }
  70%  { box-shadow:0 0 0 9px rgba(46,245,143,0); }
  100% { box-shadow:0 0 0 0 rgba(46,245,143,0); }
}

.hero__title{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  line-height:1.05;
  margin-bottom:26px;
}
.grad{ color:var(--accent); }

.hero__text{
  font-size:1.06rem;
  color:var(--text-dim);
  max-width:520px;
  margin-bottom:34px;
}
.hero__text strong{ color:var(--text); font-weight:600; }

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:46px;
}

.hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:38px;
  padding-top:28px;
  border-top:1px solid var(--border-soft);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{
  font-family:var(--display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--accent-2);
  line-height:1.2;
}
.hero__stats span{
  font-size:.76rem;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ---------- Monitor de sala de control ---------- */
.window{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow), 0 0 0 1px rgba(110,168,255,.08);
  overflow:hidden;
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1), box-shadow 1.15s cubic-bezier(.16,1,.3,1);
  animation:ventanaFlota 4.6s infinite, ventanaVaiven 7.9s ease-in-out infinite;
  will-change:transform, translate, rotate;
}
/* La ventana no se para nunca: sube flotando y cae dando dos botes pequeños.
   El vaivén va en otro ciclo (7,9s frente a 4,6s) para que la combinación
   no se repita a ojo y no se lea como un bucle mecánico. */
@keyframes ventanaFlota{
  0%  { translate:0 6px;   animation-timing-function:cubic-bezier(.34,0,.24,1); }
  42% { translate:0 -18px; animation-timing-function:cubic-bezier(.6,0,.42,1); }
  66% { translate:0 -1px;  animation-timing-function:cubic-bezier(.22,0,.32,1); }
  80% { translate:0 -8px;  animation-timing-function:cubic-bezier(.42,0,.3,1); }
  92% { translate:0 3px;   animation-timing-function:cubic-bezier(.3,0,.4,1); }
  100%{ translate:0 6px; }
}
@keyframes ventanaVaiven{
  0%,100%{ rotate:-1.1deg; }
  50%    { rotate:1.1deg; }
}
.window:hover{
  transform:perspective(1200px) rotateY(0) rotateX(0) translateZ(26px);
  box-shadow:0 42px 96px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(110,168,255,.18);
}
@media (prefers-reduced-motion: reduce){
  .window{ animation:none; }
}

.window__bar,.browser__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.dot--red{ background:var(--accent-3); }
.dot--yellow{ background:var(--accent-2); }
.dot--green{ background:var(--accent); }

.window__title{
  margin-left:12px;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text-faint);
}

.window__code{
  margin:0;
  padding:22px;
  font-family:var(--mono);
  font-size:.85rem;
  line-height:1.85;
  color:var(--text-dim);
  overflow-x:auto;
}
.c-com{ color:#5c6478; font-style:italic; }
.c-key{ color:var(--accent-3); }
.c-var{ color:var(--accent-2); }
.c-str{ color:var(--accent); }
.c-num{ color:#fbbf24; }
.c-fn { color:var(--accent-2); }
.c-out{ color:var(--accent); }
.caret{
  display:inline-block;
  width:8px; height:15px;
  margin-left:3px;
  background:var(--accent);
  vertical-align:-2px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* Pausa de "ejecución" justo antes de imprimir la salida */
.window.is-running .caret{
  animation:blink .35s steps(1) infinite;
  background:var(--accent-2);
}

/* Pulso único al terminar de teclear: el proyecto "arranca".
   Va por transición de box-shadow y NO por @keyframes: la propiedad
   animation de .window lleva el flotado, y declararla aquí la pisaba
   entera, dejando la ventana quieta para siempre. */
.window.is-done{
  box-shadow:var(--shadow), 0 0 0 1px rgba(46,245,143,.55), 0 0 52px -6px rgba(46,245,143,.5);
}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{ padding:104px 0; position:relative; }
.section--alt{
  background:var(--bg-alt);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.section__head{
  max-width:660px;
  margin:0 auto 60px;
  text-align:center;
}
.eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--accent-2);
  margin-bottom:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:100px;
}
.section__title{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.8rem, 4vw, 2.9rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:16px;
}
.section__sub{ color:var(--text-dim); font-size:1.03rem; }

/* =========================================================
   SERVICIOS — programa de sesiones
   ========================================================= */
.ledger{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.ledger__row{
  display:grid;
  grid-template-columns:68px 1fr;
  gap:22px 28px;
  align-items:start;
  padding:30px 26px;
  border-radius:20px;
  position:relative;
  background:rgba(22,24,41,.46);
  border:1px solid var(--border);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.7);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation:tarjetaFlota 6.4s ease-in-out infinite;
  animation-delay:calc(var(--flota-retraso, 0) * 1s);
  will-change:translate;
  transition:border-color .3s ease, box-shadow .3s ease, animation-play-state .2s ease;
}
.ledger__row:nth-child(1){ --flota-retraso:0; }
.ledger__row:nth-child(2){ --flota-retraso:.9; }
.ledger__row:nth-child(3){ --flota-retraso:1.8; }
.ledger__row:nth-child(4){ --flota-retraso:2.7; }
@keyframes tarjetaFlota{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -7px; }
}
.ledger__row::before{
  content:'';
  position:absolute;
  left:0; top:0;
  width:0; height:100%;
  border-left:2px solid var(--accent);
  border-radius:20px 0 0 20px;
  opacity:0;
  transition:opacity .25s ease;
}
.ledger__row:hover,
.ledger__row:focus-within{
  border-color:var(--border-soft);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(110,168,255,.1);
  animation-play-state:paused;
}
.ledger__row:hover::before{ opacity:1; }
.ledger__tags{ grid-column:1 / -1; }
@media (prefers-reduced-motion: reduce){
  .ledger__row{ animation:none; }
}

.ledger__num{
  font-family:var(--mono);
  font-size:2rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
  letter-spacing:.01em;
}
.ledger__num::before{ content:'SES.'; display:block; font-size:.62rem; font-weight:400; color:var(--text-faint); margin-bottom:6px; letter-spacing:.1em; }

.ledger__body h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.1rem;
  letter-spacing:.005em;
  margin-bottom:10px;
}
.ledger__body p{ color:var(--text-dim); font-size:.94rem; max-width:46ch; }

.ledger__tags{ display:flex; flex-direction:column; gap:9px; padding-top:6px; }
.ledger__tags li{
  position:relative;
  padding-left:20px;
  font-size:.86rem;
  font-weight:500;
  color:var(--text-dim);
  font-family:var(--mono);
}
.ledger__tags li::before{
  content:'>';
  position:absolute;
  left:0;
  font-weight:400;
  color:var(--text-faint);
}

/* =========================================================
   PROYECTOS — demo en directo
   ========================================================= */
.project{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
  padding:56px 0;
}
.project + .project{ border-top:1px solid var(--border-soft); }
.project--reverse .project__media{ order:2; }

.project__media{ position:relative; padding-bottom:36px; }

.browser{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.browser:hover{ transform:translateY(-5px); box-shadow:0 28px 60px -22px rgba(0,0,0,.9); }

.browser__url{
  flex:1;
  margin-left:12px;
  padding:4px 12px;
  background:var(--bg);
  border-radius:3px;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--text-faint);
  text-align:center;
}

.browser__shot{
  position:relative;
  display:block;
  aspect-ratio:1440/1000;
  overflow:hidden;
  background:var(--bg);
}
.browser__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .5s ease;
}
.browser__shot:hover img{ transform:scale(1.03); }

.browser__hover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(5,5,13,.6);
  backdrop-filter:blur(2px);
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  opacity:0;
  transition:opacity .3s ease;
}
.browser__shot:hover .browser__hover{ opacity:1; }

.phone{
  position:absolute;
  right:-6px;
  bottom:0;
  width:130px;
  border-radius:18px;
  border:5px solid #1b1e28;
  background:#1b1e28;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(110,168,255,.12);
  overflow:hidden;
  transition:transform .35s ease;
}
.phone img{
  border-radius:12px;
  aspect-ratio:480/1040;
  object-fit:cover;
  object-position:top center;
}
.project:hover .phone{ transform:translateY(-8px); }

.project__title{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.4rem, 2.8vw, 1.9rem);
  margin-bottom:16px;
}
.project__desc{ color:var(--text-dim); margin-bottom:22px; }

.project__points{ margin-bottom:24px; }
.project__points li{
  position:relative;
  padding-left:26px;
  margin-bottom:9px;
  font-size:.93rem;
  color:var(--text-dim);
}
.project__points li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.tags li{
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:100px;
  background:var(--surface);
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--text-dim);
}

/* =========================================================
   PROCESO — protocolo de lanzamiento
   ========================================================= */
.timeline{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding-left:56px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:19px; top:6px; bottom:6px;
  width:1px;
  background:linear-gradient(to bottom, var(--accent), var(--accent-2), var(--accent-3));
  opacity:.4;
}
.timeline__item{
  position:relative;
  padding-bottom:44px;
}
.timeline__item:last-child{ padding-bottom:0; }

.timeline__seal{
  position:absolute;
  left:-56px; top:0;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--accent-2);
  box-shadow:0 0 0 4px var(--bg), 0 0 14px -4px rgba(110,168,255,.6);
  color:var(--accent-2);
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:700;
}
.timeline__body h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.02rem;
  margin-bottom:8px;
}
.timeline__body p{ color:var(--text-dim); font-size:.93rem; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:28px;
  align-items:start;
}

.form{
  padding:34px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{ margin-bottom:18px; }
.field label{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.field label span{ color:var(--accent); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 15px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:#4d5468; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(110,168,255,.14);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1b4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
}
.field select option{ background:var(--surface); }
.field.has-error input,
.field.has-error textarea{ border-color:var(--accent-3); }

.form__note{
  margin-top:14px;
  font-size:.86rem;
  text-align:center;
  color:var(--text-faint);
  min-height:20px;
}
.form__note.is-ok{ color:var(--accent); }
.form__note.is-err{ color:var(--accent-3); }

.contact__side{ display:grid; gap:18px; }
.contact__card{
  padding:28px 26px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.contact__card h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1rem;
  margin-bottom:10px;
}
.contact__card > p{ color:var(--text-dim); font-size:.92rem; margin-bottom:20px; }

.contact__card--accent{
  background:linear-gradient(150deg, rgba(46,245,143,.1), rgba(110,168,255,.05));
  border-color:rgba(46,245,143,.28);
}
.contact__card--accent > p{ margin-bottom:0; }

.contact__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px;
  margin-bottom:10px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg);
  transition:border-color .2s ease, transform .2s ease;
}
.contact__link:last-child{ margin-bottom:0; }
.contact__link:hover{ border-color:var(--accent-2); transform:translateX(4px); }
.contact__link svg{ width:22px; height:22px; flex:none; color:var(--accent-2); }
.contact__link span{ display:flex; flex-direction:column; min-width:0; }
.contact__link strong{ font-size:.86rem; text-transform:uppercase; letter-spacing:.02em; }
.contact__link em{
  font-style:normal;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text-faint);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   FOOTER + FAB
   ========================================================= */
.footer{
  padding:46px 0;
  border-top:1px solid var(--border-soft);
  text-align:center;
}
.footer__inner{ display:grid; gap:8px; justify-items:center; }
.footer__text{ color:var(--text-dim); font-size:.9rem; }
.footer__copy{ color:var(--text-faint); font-size:.8rem; font-family:var(--mono); }

.fab{
  position:fixed;
  right:22px; bottom:22px;
  z-index:90;
  width:54px; height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.fab.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:29px; height:29px; }

/* =========================================================
   ANIMACIONES DE SCROLL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero{ padding:130px 0 80px; }
  .hero__inner{ grid-template-columns:1fr; gap:48px; }
  .hero__window{ max-width:560px; }
  .window{ transform:none; }
  .project,
  .project--reverse{ grid-template-columns:1fr; gap:36px; }
  .project--reverse .project__media{ order:0; }
  .contact{ grid-template-columns:1fr; }
  .ledger{ grid-template-columns:1fr; }
  .ledger__tags{ padding-top:14px; }
}

@media (max-width:760px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed;
    inset:72px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px 24px 24px;
    background:rgba(5,5,13,.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    transform:translateY(-140%);
    transition:transform .35s ease;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links > a{ padding:14px 0; border-bottom:1px solid var(--border-soft); }
  .nav__links > a:not(.btn)::after{ display:none; }
  .nav__cta{ margin-top:14px; border-bottom:none !important; justify-content:center; }

  .section{ padding:76px 0; }
  .section__head{ margin-bottom:44px; }
  .hero__stats{ gap:24px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .form{ padding:24px 20px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .phone{ width:96px; right:0; }
  .project__media{ padding-bottom:26px; }
  .browser__hover{ display:none; }
  .fab{ width:50px; height:50px; right:16px; bottom:16px; }
  .timeline{ padding-left:48px; }
  .timeline__seal{ left:-48px; width:34px; height:34px; font-size:.68rem; }
}

@media (max-width:420px){
  .container{ padding:0 18px; }
  .window__code{ font-size:.74rem; padding:16px; }
  .ledger__row{ padding:24px 20px; }
}