/* ===========================================================================
   TABOAS SOLUTIONS — hoja de estilos v3 · DARK-LUXURY EDITORIAL (27/08/2026)

   Corriente elegida por Kevin entre cuatro propuestas (direccion-arte-web).
   Brief de arte, las tres decisiones y ninguna mas:
     1. Corriente: dark-luxury editorial.
     2. Tokens: Instrument Serif (redonda + italica) + Schibsted Grotesk ·
        negro #08080a dominante, marfil de texto, UN acento: dorado #c8a96a.
     3. EL GESTO: la palabra "digital" en italica dorada dentro del titular, y
        la cara de Kevin como unico elemento grafico, sol de la galaxia (que ahora
        va en duotono negro/oro). Nada mas compite: el lujo es el silencio.

   Lo que se conserva de la v2 tal cual (es mecanica medida, no estilo):
     - la galaxia de tres capas girando con transform (insets recortados, +4% de
       recentrado del ojo de la espiral), la corona atada a --sol, el cielo del
       worker, la barra de progreso con scaleX, el sistema reveal, la pausa fuera
       del hero. Toda la fisica de rendimiento sigue: solo se animan transform y
       opacity; ni backdrop-filter, ni blur en vivo, ni mezcla de capas.
   Copia de la v2 (HUD): ../_backup_hud_2026-08-27_styles.css
   =========================================================================== */

:root{
  --bg:            #08080a;
  --bg-2:          #0c0c10;
  --surface:       #101014;
  --line:          rgba(236,233,228,.10);
  --line-strong:   rgba(200,169,106,.55);

  --gold:          #c8a96a;
  --gold-soft:     #e2cc9c;
  --gold-dim:      rgba(200,169,106,.55);

  --fg:            #ece9e4;
  --fg-soft:       #8d8a85;
  --fg-dim:        #5e5b57;

  --font-display:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-ui:       'Schibsted Grotesk', system-ui, -apple-system, sans-serif;

  --wrap:          1180px;
  /* Subido el 03/09 al pasar a cinco secciones: con seis bloques seguidos, 6rem
     de suelo apretaba y la pagina se leia como una lista. El aire ES el lujo. */
  --space-section: clamp(7rem, 16vh, 13rem);
  --ease:          cubic-bezier(.22,.68,.36,1);
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem,  .96rem + .2vw,  1.1rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; color-scheme:dark; }
a, button{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-.012em; margin:0; text-wrap:balance; }
h2{ font-size:var(--step-3); margin:0 0 .6rem; }
h2 em, h1 em{ font-style:italic; color:var(--gold); }
h3{ font-size:1.35rem; margin:0 0 .5rem; }
p{ margin:0 0 1rem; }
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
/* Con left:-9999px el enlace ensancha el documento casi 10.000 px (lo tapaba el
   overflow-x:hidden del body, pero el desborde estaba ahi). Con clip-path ocupa cero. */
.skip-link{ position:absolute; left:1rem; top:1rem; z-index:999; background:var(--gold); color:#08080a; padding:.7rem 1.2rem; font-weight:600; clip-path:inset(50%); }
.skip-link:focus{ clip-path:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* --- Micro-etiquetas: la unica tipografia pequena de la web ---------------- */
.mission, .card__id, .about__tag, .cta__note, .core__label, .scroll-cue__texto,
.ruta a span, .telemetry, .nav__cta, .footer-bottom p{
  font-family:var(--font-ui); font-size:.64rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fg-soft);
}
.mission{ display:flex; align-items:center; gap:.8rem; margin:0 0 1.1rem; color:var(--gold); }
.mission span{ font-family:var(--font-display); font-style:italic; font-size:1rem; letter-spacing:.04em; text-transform:none; color:var(--gold); }
.mission i{ width:28px; height:1px; background:var(--gold-dim); }
.mission--center{ justify-content:center; }
.telemetry{ display:flex; align-items:center; gap:.6rem; color:var(--gold); }
.blip{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* --- Cielo, atmosfera, grano ------------------------------------------------ */
#starfield{ position:fixed; inset:0; z-index:-3; display:block; width:100%; height:100%; opacity:.75; }
.cosmos{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.cosmos::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(70% 50% at 72% 0%, rgba(200,169,106,.07) 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(200,169,106,.045) 0%, transparent 60%);
}
.nebula{ display:none; }
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.comet-cursor{ display:none; }

/* --- Barra de progreso: 1 px de oro, escala con transform (nunca width) ---- */
.progress-track{ position:fixed; top:0; left:0; right:0; height:1px; z-index:200; background:rgba(236,233,228,.06); }
.progress-ship{ height:100%; width:100%; transform:scaleX(var(--p, 0)); transform-origin:left center; background:var(--gold); will-change:transform; }

/* --- Ruta lateral --------------------------------------------------------- */
.ruta{ position:fixed; right:1.4rem; top:50%; z-index:40; transform:translateY(-50%); display:flex; flex-direction:column; gap:1.1rem; }
.ruta a{ position:relative; display:grid; place-items:center; width:26px; height:26px; text-decoration:none; }
/* Herencia del HUD de la v2. Se queda porque es navegacion util, pero baja de
   volumen: en dark-luxury no puede competir con el contenido. */
.ruta a i{ width:4px; height:4px; border-radius:50%; background:var(--fg-dim); opacity:.5; transition:background .3s, opacity .3s, transform .3s var(--ease); }
.ruta:hover a i, .ruta a:focus-visible i{ opacity:1; }
.ruta a span{ position:absolute; right:calc(100% + .6rem); top:50%; translate:0 -50%; white-space:nowrap; opacity:0; transition:opacity .25s; font-size:.6rem; }
.ruta a:hover span, .ruta a:focus-visible span{ opacity:1; }
.ruta a.activo i, .ruta a.is-current i{ background:var(--gold); opacity:1; transform:scale(1.5); }
@media (max-width:900px){ .ruta{ display:none; } }

/* --- Cabecera ------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.2rem 0; transition:padding .35s var(--ease), background .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
/* Estaba a .92 y el contenido que pasaba por debajo se translucia: la franja de
   cifras se veia fantasmal detras del menu. Opaca del todo (sin backdrop-filter,
   que es uno de los asesinos del scroll). */
.site-header.is-stuck{ padding:.7rem 0; background:var(--bg); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
/* Medido en movil: 111x40, cuatro pixeles por debajo del minimo de 44. */
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--fg); flex-shrink:0; min-height:44px; }
.brand__orbit{ position:relative; width:40px; height:40px; }
.brand__mark{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-dim); }
.brand__satellite{ display:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; font-family:var(--font-display); }
.brand__text strong{ font-weight:400; font-size:1.05rem; letter-spacing:.02em; }
.brand__text em{ font-style:italic; font-size:.78rem; color:var(--gold); letter-spacing:.06em; }
.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav a{
  text-decoration:none; color:var(--fg-soft); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.4rem 0; border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.nav__num{ display:none; }
.nav a:hover{ color:var(--fg); }
.nav a.is-current{ color:var(--fg); border-bottom-color:var(--gold); }
.nav a.nav__cta{ color:var(--fg); border:1px solid var(--gold-dim); padding:.7rem 1.3rem; }
.nav a.nav__cta:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }
.burger{ display:none; background:none; border:1px solid var(--line); width:44px; height:44px; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0; }
.burger span{ display:block; width:19px; height:1px; background:var(--fg); transition:transform .3s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* --- Botones -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; cursor:pointer;
  font-family:var(--font-ui); font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.6rem; border:1px solid var(--gold-dim); color:var(--fg); background:transparent;
  transition:background .3s, color .3s, border-color .3s, transform .2s var(--ease);
}
.btn svg{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; width:16px; height:16px; }
.btn--lg{ padding:1.15rem 2rem; }
.btn--primary{ background:var(--gold); color:var(--bg); border-color:var(--gold); }
.btn--primary:hover{ background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-1px); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }

/* --- HERO ----------------------------------------------------------------- */
.galaxy{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); grid-template-rows:auto;
  align-items:center; column-gap:clamp(1.5rem,4vw,4rem);
  padding:7.5rem clamp(1.2rem,5vw,4.5rem) 4rem;
  --par-x:0; --par-y:0;
}
.qa .galaxy{ min-height:auto; padding-top:8rem; }
.galaxy__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(8,8,10,.35) 60%, rgba(8,8,10,.85) 100%),
    linear-gradient(180deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,0) 30%, rgba(8,8,10,.72) 88%, rgba(8,8,10,1) 100%);
}
.galaxy__foot{ grid-column:1; grid-row:1; align-self:center; position:relative; z-index:6; }
.galaxy__h1{
  font-size:clamp(2.7rem, 6.3vw, 5.6rem); line-height:1.02; max-width:14ch;
  animation:sube-suave .8s var(--ease) .15s backwards;
}
.h1__oro{ font-style:italic; color:var(--gold); }
.galaxy__sub{ color:var(--fg-soft); font-size:var(--step-0); max-width:44ch; margin:1.6rem 0 0; animation:sube-suave .8s var(--ease) .35s backwards; }
.hero__actions{ display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; margin-top:2.2rem; animation:sube-suave .8s var(--ease) .5s backwards; }
@keyframes sube-suave{ from{ opacity:0; transform:translateY(14px); } }
.scroll-cue{
  display:inline-flex; align-items:center; gap:.9rem; margin-top:3.4rem; text-decoration:none;
  animation:aparece .6s ease 1.5s backwards;
}
.scroll-cue__linea{ position:relative; width:1px; height:44px; overflow:hidden; background:var(--line); }
.scroll-cue__linea i{ position:absolute; left:0; top:0; width:1px; height:12px; background:var(--gold); animation:cue-baja 2.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes cue-baja{ from{ transform:translateY(-14px); opacity:0; } 30%{ opacity:1; } to{ transform:translateY(46px); opacity:0; } }
@keyframes aparece{ from{ opacity:0; } }

/* Escena: la galaxia y el sol */
.galaxy__scene{
  grid-column:2; grid-row:1; position:relative; z-index:2;
  width:100%; aspect-ratio:1.23; max-height:78svh;
  display:grid; place-items:center; container-type:inline-size;
  animation:galaxyOpen 1.4s var(--ease) .2s backwards;
}
@keyframes galaxyOpen{ from{ transform:scale(.55); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* La galaxia de tres capas (mecanica de la v2, con archivos en duotono oro) */
.gx{
  position:absolute; z-index:0; left:50%; top:50%;
  width:355%; aspect-ratio:1;
  /* El ojo de la espiral SI cae en el centro de la caja: comprobado por dos vias
     (nucleo del archivo desenfocado y simetria rotacional de 180 grados sobre las
     tres capas compuestas, ambas dan 0.0%). El +4% que habia aqui venia de medir el
     centro de masa en una captura, y esa medida esta sesgada porque la galaxia mide
     el doble que la ventana y el recorte tira del centro. Ver pruebas/. */
  translate:-50% -50%;
  /* SIN perspective (02/09). Con perspective:1500px el disco inclinado se proyecta
     como un trapecio: la mitad cercana se agranda y la lejana se encoge, asi que el
     centro de la proyeccion se separa del centro de la caja. Medido: el bulbo caia
     +134 px a 1440 de ancho y -124 px a 1093, cambiando de signo segun la pantalla,
     y por eso ningun offset fijo lo arreglaba. Sin perspective, rotateX es una
     proyeccion plana: aplasta el disco y deja el centro clavado. De paso Andromeda
     se ve simetrica arriba y abajo, que es como esta en la foto. */
  pointer-events:none; opacity:.9;
  transform:translate(calc(var(--par-x) * 9px), calc(var(--par-y) * 7px));
  transition:transform .7s cubic-bezier(.22,.68,.36,1);
  animation:aparece 1.6s ease .25s backwards;
}
.gx picture{ position:absolute; inset:0; display:block; pointer-events:none; }
/* width/height al 100% NO son decorativos: sin ellos el inset no estira la imagen.
   Un <img> es un elemento reemplazado, asi que con left/right/top/bottom definidos
   y width:auto el navegador se queda con su tamano intrinseco y ANCLA la imagen
   arriba a la izquierda, ignorando right y bottom. Medido: la capa interior salia
   de 1778 px (su tamano natural) en vez de los 1510 que pedia el inset, y su centro
   quedaba +134 px en diagonal respecto al centro de la caja; en movil, con el
   archivo -m de 900 px, el desvio era otro y de signo contrario. Eso es lo que
   descolocaba la cara de Kevin respecto al ojo de la espiral, y lo que el +4% de la
   v2 tapaba a ojo sin arreglarlo. Con object-fit:contain la imagen no se deforma. */
/* Centrado explicito y NO `inset`. Un <img> es un elemento reemplazado: con
   left/right/top/bottom definidos y width:auto el navegador se queda con su tamano
   intrinseco y ancla la imagen arriba a la izquierda, ignorando right y bottom.
   Medido el 02/09: la capa interior salia a su tamano natural (1778 px en vez de
   los 1510 del inset) y su centro quedaba +134 px en diagonal; en movil, con el
   archivo -m de 900 px, el desvio era distinto y de signo contrario. Eso era lo que
   descolocaba la cara de Kevin respecto al ojo de la espiral, y lo que el +4% de la
   v2 tapaba a ojo. Poner width:100% tampoco vale: vuelve a sobre-restringir y
   ancla el elemento desplazado justo el inset. Con left/top al 50%, ancho explicito
   y translate, el centro es el centro pase lo que pase con el archivo. */
.gx__capa{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  object-fit:contain; transform-origin:50% 50%;
  backface-visibility:hidden; will-change:transform;
}
.gx__capa--gas{ width:72.3%; height:72.3%; animation:gx-giro 340s linear infinite reverse; opacity:.8; }
.gx__capa--ext{ width:81.0%; height:81.0%;  animation:gx-giro 210s linear infinite; opacity:.9; }
.gx__capa--int{ width:63.5%; height:63.5%; animation:gx-giro 120s linear infinite; }
/* 72 grados y no 54: Andromeda se ve casi de canto (elipse de 3.4:1). Con 54
   el disco salia 1.7:1, que es una espiral vista de frente, no M31. */
@keyframes gx-giro{ from{ transform:rotateX(72deg) rotate(0deg); } to{ transform:rotateX(72deg) rotate(-360deg); } }
html.hero-fuera .gx__capa, html.hero-fuera .core__corona, html.hero-fuera .core__art, html.hero-fuera .core__sheen{ animation-play-state:paused; }

/* El sol: la cara de Kevin */
.galaxy__core{ --sol:clamp(80px, 15.4cqw, 138px); position:absolute; display:grid; place-items:center; text-decoration:none; }
.core__img{
  width:var(--sol); height:var(--sol); border-radius:50%; overflow:hidden; position:relative; z-index:2;
  border:1px solid rgba(200,169,106,.7);
  box-shadow:0 0 0 10px rgba(200,169,106,.06), 0 0 60px rgba(200,169,106,.22), inset 0 0 40px rgba(0,0,0,.45);
  display:block;
}
.core__art{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:52% 44%; animation:nebula-deriva 40s ease-in-out infinite alternate; }
@keyframes nebula-deriva{ from{ transform:scale(1.07) translate3d(-1.6%,1.2%,0); } to{ transform:scale(1.17) translate3d(2%,-1.8%,0); } }
.core__sheen{
  position:absolute; inset:-40%; pointer-events:none; z-index:3;
  background:linear-gradient(112deg, transparent 40%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.08) 54%, transparent 60%);
  transform:translateX(-115%); animation:destello-cristal 13s ease-in-out infinite;
}
@keyframes destello-cristal{ 0%,62%{ transform:translateX(-115%); opacity:0; } 66%{ opacity:.9; } 84%{ transform:translateX(115%); opacity:.9; } 88%,100%{ transform:translateX(115%); opacity:0; } }
.core__corona{
  position:absolute; z-index:1; left:50%; top:50%;
  width:calc(var(--sol) * 3.5); height:calc(var(--sol) * 3.5); translate:-50% -50%; border-radius:50%;
  background:radial-gradient(circle,
    rgba(226,204,156,.50) 0%, rgba(200,169,106,.36) 12%, rgba(200,169,106,.20) 24%,
    rgba(200,169,106,.10) 36%, rgba(200,169,106,.04) 50%, transparent 66%);
  animation:corona 5s ease-in-out infinite; will-change:transform, opacity;
}
.core__corona::after{ content:''; position:absolute; inset:38%; border-radius:50%; background:radial-gradient(circle, rgba(236,233,228,.35) 0%, rgba(226,204,156,.22) 40%, transparent 78%); }
@keyframes corona{ 50%{ transform:scale(1.04); opacity:.88; } }
.core__label{
  position:absolute; top:-2.6rem; z-index:10; color:var(--gold-soft); white-space:nowrap;
  /* Cae justo encima del brazo mas claro de la galaxia y ahi el dorado desaparecia.
     Sombra negra estatica: no cuesta nada al scroll y no cambia el color de marca. */
  text-shadow:0 1px 2px rgba(8,8,10,.95), 0 0 12px rgba(8,8,10,.9), 0 0 26px rgba(8,8,10,.75);
  transition:letter-spacing .4s var(--ease), color .3s;
}
.core__label::after{ content:''; position:absolute; left:50%; top:1.2rem; width:1px; height:.7rem; background:var(--gold-dim); }
.galaxy__core:hover .core__label{ letter-spacing:.28em; color:var(--gold-soft); }
.galaxy__core:hover .core__corona{ opacity:1; }

/* --- Secciones ------------------------------------------------------------ */
.section{ position:relative; padding:var(--space-section) 0; }
.section + .section::before, .site-footer::before{
  content:''; position:absolute; top:0; left:50%; translate:-50% 0; width:min(100% - 2.5rem, var(--wrap)); height:1px; background:var(--line);
}
.section--deep{ background:var(--bg-2); }
.section--deep::before{ width:100% !important; }
.section__head{ max-width:640px; margin-bottom:4.2rem; }
.section__lead{ color:var(--fg-soft); font-size:var(--step-0); margin:0; max-width:52ch; }

/* Servicios: sin tarjetas. Una rejilla de lineas finas, como una carta. */
.grid{ display:grid; gap:0; }
.grid--3{ grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.card{
  position:relative; padding:2rem 1.6rem 2.2rem 0; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:background .3s;
}
.grid--3 .card:nth-child(3n+2){ padding-left:1.6rem; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.grid--3 .card:nth-child(3n){ padding-left:1.6rem; }
.card:hover{ background:rgba(200,169,106,.035); }
.card__id{ color:var(--fg-dim); margin-bottom:1.4rem; font-family:var(--font-display); font-style:italic; font-size:1rem; letter-spacing:.06em; text-transform:none; }
.card--highlight .card__id{ color:var(--gold); }
.card__icon{ display:none; }
.card h3{ font-size:1.45rem; }
.card p{ color:var(--fg-soft); font-size:.93rem; margin-bottom:1.2rem; max-width:36ch; }
.card__list{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:.35rem; }
.card__list li{ font-size:.86rem; color:var(--fg-soft); padding-left:1.1rem; position:relative; }
.card__list li::before{ content:''; position:absolute; left:0; top:.72em; width:6px; height:1px; background:var(--gold-dim); }
.card--highlight{ background:rgba(200,169,106,.04); }
/* Los dos servicios nuevos llevaban "Nuevo" dentro del numero romano ("VII · Nuevo"),
   que rompia la serie y se leia como parte del numero. Ahora es una marca aparte. */
.card__nuevo{
  display:inline-block; margin-left:.6rem; padding:.15rem .5rem;
  font-family:var(--font-ui); font-size:.56rem; font-weight:500; font-style:normal;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-dim); vertical-align:.18em;
}

/* Rejilla de cuatro: ocho servicios en dos filas parejas. Las lineas verticales
   se pintan con border-left y se quitan en la primera de cada fila, para que la
   reja quede cerrada sin dobles lineas. */
.grid--4{ grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.grid--4 .card{ padding-left:1.4rem; padding-right:1.4rem; border-left:1px solid var(--line); }
.grid--4 .card:nth-child(4n+1){ padding-left:0; border-left:0; }
.grid--4 .card:nth-child(4n){ padding-right:0; }
.grid--4 .card h3{ font-size:1.28rem; }
.grid--4 .card p{ font-size:.89rem; max-width:34ch; }
@media (max-width:1100px){
  .grid--4{ grid-template-columns:1fr 1fr; }
  .grid--4 .card:nth-child(n){ padding-left:1.4rem; padding-right:0; border-left:1px solid var(--line); }
  .grid--4 .card:nth-child(2n+1){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
  .grid--4{ grid-template-columns:1fr; }
  .grid--4 .card:nth-child(n){ padding-left:0; border-left:0; }
}

/* Ocho servicios seguidos y ninguna salida: quien no sepa cual necesita se queda
   parado justo donde tendria que preguntar. */
.grid__salida{
  margin:2.2rem 0 0; color:var(--fg-soft); font-size:var(--step-0);
  font-family:var(--font-display); font-size:1.25rem;
}
.grid__salida a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-dim); transition:border-color .3s, color .3s; }
.grid__salida a:hover, .grid__salida a:focus-visible{ color:var(--gold-soft); border-bottom-color:var(--gold-soft); }

/* --- El sistema: lista editorial, no tarjetas -------------------------------
   Cinco piezas en una columna ancha, separadas por una linea de un pixel. Sin caja,
   sin fondo, sin icono: la unica jerarquia es el tamano de la letra y el aire. Es lo
   que separa una pagina de estudio de una plantilla con celditas. */
.sistema{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:70ch; }
.sistema__item{
  display:grid; grid-template-columns:3.4rem 1fr; gap:0 1.6rem;
  padding:2.4rem 0; border-bottom:1px solid var(--line);
}
.sistema__num{
  font-family:var(--font-display); font-style:italic; font-size:1.6rem; line-height:1;
  color:var(--gold-dim); padding-top:.15rem;
  font-variant-numeric:tabular-nums;
}
.sistema__item h3{ font-size:1.5rem; margin:0 0 .55rem; }
.sistema__item p{ color:var(--fg-soft); margin:0; max-width:58ch; font-size:var(--step-0); }
/* El realce al pasar por encima es apenas perceptible a proposito: marca la fila sin
   convertirla en un boton. */
.sistema__item{ transition:border-color .4s var(--ease); }
.sistema__item:hover{ border-bottom-color:var(--line-strong); }
.sistema__item:hover .sistema__num{ color:var(--gold); }
@media (max-width:640px){
  .sistema__item{ grid-template-columns:2.2rem 1fr; gap:0 1rem; padding:1.9rem 0; }
  .sistema__item h3{ font-size:1.28rem; }
}

/* Proceso */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem 2rem; border-top:1px solid var(--line); padding-top:2.2rem; counter-reset:paso; }
.step{ position:relative; }
.step__node{ display:block; margin-bottom:1rem; }
.step__node b{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:2.4rem; line-height:1; color:var(--gold); }
.step h3{ font-family:var(--font-ui); font-size:1rem; font-weight:500; letter-spacing:0; margin-bottom:.35rem; }
.step p{ color:var(--fg-soft); font-size:.9rem; margin:0; }

/* Sobre mi */
.about{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.about__frame{
  position:relative; width:min(100%, 380px); margin-inline:auto; aspect-ratio:1;
  border:1px solid var(--gold-dim); padding:10px;
}
/* Aqui habia un -webkit-box-reflect. Se retiro (02/09): reflejaba tambien la
   etiqueta FUNDADOR y se leia del reves, el reflejo se salia de la seccion, y como
   la propiedad solo existe en WebKit, en Firefox la pieza se veia distinta. */
.about__frame img{ width:100%; aspect-ratio:1; object-fit:cover; }
.about__frame::after{ content:''; position:absolute; inset:-14px; border:1px solid var(--line); pointer-events:none; }
.about__scan{ display:none; }
.about__tag{ position:absolute; left:50%; bottom:-.55rem; translate:-50% 0; background:var(--bg-2); padding:.3rem .9rem; color:var(--gold); white-space:nowrap; }
.about__lead{ font-family:var(--font-display); font-size:1.5rem; line-height:1.3; color:var(--fg); max-width:30ch; }
.about__copy p{ color:var(--fg-soft); max-width:56ch; }
.about__copy h2{ margin-top:0; }
.pills{ list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.pills li{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); padding:.5rem .9rem; border:1px solid var(--line); }

/* Contacto */
.cta{ position:relative; text-align:center; padding:clamp(2rem,6vh,4rem) 0; display:grid; justify-items:center; gap:.4rem; }
.cta h2{ font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:16ch; }
.cta__lead{ color:var(--fg-soft); max-width:46ch; margin:.6rem 0 1.8rem; }
.cta__actions{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.cta__note{ margin:2rem 0 0; color:var(--fg-dim); }

/* Pie */
.site-footer{ position:relative; padding:3.2rem 0 2.2rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.footer__brand{ display:flex; gap:1rem; align-items:center; max-width:34ch; }
.footer__brand img{ width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-dim); }
.footer__brand strong{ font-family:var(--font-display); font-weight:400; font-size:1.05rem; letter-spacing:.02em; display:block; }
.footer__brand p{ color:var(--fg-soft); font-size:.88rem; margin:.2rem 0 0; }
.footer__nav{ display:flex; gap:1.8rem .6rem; flex-wrap:wrap; margin:-.75rem 0; }
/* Median 77x18: por debajo del minimo de golpeo (24 px, 44 en movil). Se agranda el
   area con padding, no la letra, para no tocar el diseno. El margen negativo de
   arriba devuelve el hueco que ese padding anadiria al pie. */
.footer__nav a{
  text-decoration:none; color:var(--fg-soft); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; min-height:44px; padding:0 .1rem;
}
.footer__nav a:hover{ color:var(--fg); }
.footer-bottom{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.footer-bottom p{ margin:0; color:var(--fg-dim); }

/* WhatsApp flotante */
/* Es lo que mas grita de la pagina. No se quita (convierte), se baja de volumen:
   apenas un circulo dibujado, que se enciende al acercar el raton. */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:rgba(12,12,16,.72); color:var(--gold-dim); border:1px solid var(--line);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s, transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.wa-float.is-visible{ opacity:.72; visibility:visible; }
.wa-float.is-visible:hover, .wa-float:focus-visible{ opacity:1; }
.wa-float:hover{ background:var(--gold); color:var(--bg); transform:translateY(-2px); }
@media (max-width:900px){ .wa-float{ right:1rem; bottom:1rem; } }

/* --- Revelado (IntersectionObserver de main.js, con red de seguridad) ------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }
@supports (animation-timeline: view()){
  html.sda .reveal{ transition:none; opacity:1; transform:none; animation:reveal-sda .8s var(--ease) both; animation-timeline:view(); animation-range:entry 0% entry 32%; }
}
@keyframes reveal-sda{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* --- Cifras bajo el hero: tres numeros en italica dorada, entre dos lineas --- */
.stats-strip{ position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.6rem 0; }
.stats{ display:flex; flex-wrap:wrap; gap:2rem 4rem; justify-content:center; margin:0; }
.stat{ display:flex; align-items:center; gap:1rem; }
.stat dt, .stat dd{ margin:0; }
.stat__num{ font-family:var(--font-display); font-style:italic; font-size:2.4rem; line-height:1; color:var(--gold); min-width:2.2ch; text-align:right; font-variant-numeric:tabular-nums; }
.stat dd{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-soft); line-height:1.5; }
.about__visual{ max-width:380px; margin-inline:auto; width:100%; }

/* --- Pagina 404 ------------------------------------------------------------ */
.perdido{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:2rem; position:relative; z-index:1; }
.perdido__num{ font-family:var(--font-display); font-style:italic; font-size:clamp(5rem,18vw,12rem); line-height:.9; color:var(--gold); margin:0 0 .5rem; }
.perdido h1{ font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 1rem; }
.perdido p{ color:var(--fg-soft); max-width:44ch; margin:0 auto 2.2rem; }
.perdido__salidas{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width:1100px){
  .grid--3{ grid-template-columns:1fr 1fr; }
  .grid--3 .card:nth-child(n){ padding-left:0; border-left:0; border-right:0; }
  .grid--3 .card:nth-child(2n){ padding-left:1.6rem; border-left:1px solid var(--line); }
  .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  html{ scroll-padding-top:80px; }
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 auto 0; top:0; padding:5.6rem 1.5rem 2rem; flex-direction:column; align-items:flex-start; gap:1.4rem;
    background:rgba(8,8,10,.97); border-bottom:1px solid var(--line);
    transform:translateY(-110%); visibility:hidden; transition:transform .4s var(--ease), visibility .4s;
  }
  .nav.is-open{ transform:translateY(0); visibility:visible; }
  .nav a{ font-size:.9rem; }
  .galaxy{ grid-template-columns:1fr; padding-top:6.5rem; row-gap:1rem; }
  .galaxy__scene{ grid-column:1; grid-row:1; max-height:52svh; aspect-ratio:1.1; }
  .galaxy__foot{ grid-column:1; grid-row:2; text-align:center; }
  .galaxy__h1{ margin-inline:auto; }
  .galaxy__sub{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .scroll-cue{ display:none; }
  /* Mismo caso que en escritorio: el -15%/-18% salia de una medida sesgada por el
     recorte de pantalla. El ojo esta en el centro de la caja, aqui tambien. */
  .gx{ width:min(200vw, 700px); opacity:.9; top:50%; translate:-50% -50%; }
  .about{ grid-template-columns:1fr; }
  .about__frame{ width:min(100%, 280px); }
  .about__lead{ font-size:1.3rem; }
}
@media (max-width:640px){
  .grid--3{ grid-template-columns:1fr; }
  .grid--3 .card:nth-child(n){ padding-left:0; border-left:0; }
  .steps{ grid-template-columns:1fr; }
  .galaxy__h1{ font-size:clamp(2.4rem, 11vw, 3.4rem); }
  .cta__actions .btn{ width:100%; justify-content:center; }
}

/* --- Menos movimiento: quien lo pida, lo tiene ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .gx__capa, .core__corona, .core__art, .core__sheen, .scroll-cue__linea i{ animation:none !important; }
  .gx__capa{ transform:rotateX(72deg); }
  .galaxy__scene, .gx, .galaxy__h1, .galaxy__sub, .hero__actions, .scroll-cue{ animation:none !important; }
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}