/* =========================================================
   ARKESIZ — Sistema visual
   Estética: instrumento de precisión. Monocromo + 1 acento.
   Dos temas: oscuro (por defecto) y claro.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: dark;

  --bg:      #08090B;
  --bg-2:    #0B0D11;
  --surface: #101319;

  --line:        rgba(255,255,255,.075);
  --line-2:      rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.24);

  --text:  #EEF1F6;
  --text-2:#AAB2C0;
  --muted: #79818F;
  --dim:   #565D69;

  --accent:      #6C8CFF;
  --accent-2:    #B9C7FF;
  --accent-soft: rgba(108,140,255,.14);
  --accent-line: rgba(108,140,255,.42);
  --on-accent:   #06070A;

  /* Superficies compuestas */
  --panel-a:  rgba(255,255,255,.035);
  --panel-b:  rgba(255,255,255,.012);
  --pop-bg:   rgba(10,12,16,.93);
  --nav-bg:   rgba(8,9,11,.72);
  --panel-bg: rgba(8,9,11,.96);
  --grid-line:rgba(255,255,255,.028);
  --vignette: rgba(0,0,0,.42);
  --glow-a:   rgba(108,140,255,.30);
  --glow-b:   rgba(120,160,255,.16);
  --glow-op:  .5;
  --grain-op: .028;
  --shine:    rgba(255,255,255,.55);

  /* Canales RGB para los lienzos (leídos desde JS) */
  --ink-rgb:    255,255,255;
  --accent-rgb: 108,140,255;
  --sweep-rgb:  190,208,255;
  --core-rgb:   10,13,19;
  --ink-k:  1;    /* intensidad de las hairlines del lienzo */
  --glow-k: 1;    /* intensidad de los halos */

  /* Cristal. Un vidrio real no es un fondo translúcido y ya: tiene un canto
     iluminado arriba, otro en sombra abajo, un reflejo que entra en diagonal
     y una sombra que lo despega del fondo. Cada token es una de esas capas. */
  --glass-a:    rgba(255,255,255,.085);  /* cara superior */
  --glass-b:    rgba(255,255,255,.020);  /* cara inferior */
  --glass-brd:  rgba(255,255,255,.13);
  --glass-hi:   rgba(255,255,255,.26);   /* canto que recibe la luz */
  --glass-lo:   rgba(0,0,0,.30);         /* canto en sombra */
  --glass-spec: rgba(255,255,255,.15);   /* reflejo especular */
  --glass-sh:   rgba(0,0,0,.60);         /* sombra proyectada */
  --glass-blur: 20px;

  /* Velo de la portada: oscurece la animación justo donde vive el texto para
     que se siga leyendo, y la deja verse en el resto. */
  --veil-1: rgba(8,9,11,.94);
  --veil-2: rgba(8,9,11,.62);
  --veil-0: rgba(8,9,11,0);

  /* Cuánto pesa el vídeo de portada. Por debajo de 1 la figura se integra en
     el fondo en vez de competir con el texto que lleva encima. */
  --hero-video-op: .88;

  /* Corte de fondo de la sección Valores. Violeta muy apagado: contrasta con
     el resto de la página sin salirse de la familia del acento ni de la
     nebulosa. */
  --cut-a:      #0B0917;
  --cut-b:      #0E0B1D;
  --cut-line:   rgba(150,116,255,.32);
  --cut-grid:   rgba(150,116,255,.15);
  --cut-card:   #100D20;
  --cut-card-2: #16122C;

  /* Nebulosa del cursor: morado y azul, en la misma familia que el acento */
  --neb-1: rgba(116,58,214,.30);
  --neb-2: rgba(86,124,255,.24);
  --neb-3: rgba(150,86,240,.16);
}

:root{
  --sans: "Segoe UI Variable Display","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono","JetBrains Mono","Roboto Mono",monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --sec-y: clamp(84px, 11vw, 168px);
  --r: 4px;
  --r-lg: 10px;

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 1b. Tipografía del logotipo ---------- */
/* Space Grotesk Medium: la usa la bajada "ESTUDIO CREATIVO" de la portada.
   Autoalojada para no depender de Google Fonts (la CSP solo permite recursos
   propios) y para que se vea igual en cualquier equipo. */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

/* El atributo hidden siempre gana sobre cualquier display de este archivo */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}

img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; line-height:1.06; letter-spacing:-.028em; font-weight:600; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:2000;
  background:var(--text); color:var(--bg);
  padding:10px 16px; border-radius:var(--r);
  font:600 13px/1 var(--sans);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ---------- Logotipo ----------
   Los trazos viven una sola vez en un sprite al inicio del <body>; cada sitio
   donde aparece la marca lo referencia con <use>. Los colores no están fijados
   en el SVG: el blanco original es currentColor y el azul var(--accent), así el
   logotipo se adapta solo a los temas claro y oscuro. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ark-accent{ fill:var(--accent); }

/* ---------- 3. Capas de ambiente ---------- */
.fx-grid,.fx-glow,.fx-grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}

.fx-grid{
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}

.fx-glow i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(110px); opacity:var(--glow-op);
}
.fx-glow__a{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-16vw; right:-10vw;
  background:radial-gradient(circle, var(--glow-a), transparent 66%);
  animation:drift-a 26s var(--ease) infinite alternate;
}
.fx-glow__b{
  width:44vw; height:44vw; max-width:620px; max-height:620px;
  bottom:-14vw; left:-12vw;
  background:radial-gradient(circle, var(--glow-b), transparent 68%);
  animation:drift-b 32s var(--ease) infinite alternate;
}
/* Sin scale a propósito. Desplazar algo desenfocado es gratis: el navegador
   mueve la textura ya calculada. Escalarlo no, porque el radio del desenfoque
   vive en el espacio local del elemento y hay que rehacer los 110 px de blur en
   cada fotograma. Eran dos capas fijas y grandes haciéndolo sin parar. */
@keyframes drift-a{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-7%,8%,0);} }
@keyframes drift-b{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(9%,-7%,0);} }

/* Grano sin mix-blend-mode: mismo efecto, mucho más barato de componer */
.fx-grain{
  z-index:9;
  opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barra de progreso superior */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1200;
  background:var(--line);
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .12s linear;
}

/* ---------- 4. Boot ---------- */
.boot{
  position:fixed; inset:0; z-index:1800;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .55s var(--ease), visibility .55s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{ display:grid; justify-items:center; gap:16px; color:var(--text); }
.boot__logo{ width:200px; height:auto; color:var(--text); }
.boot__label{ font:500 10px/1 var(--mono); letter-spacing:.34em; color:var(--muted); }
.boot__bar{ width:180px; height:1px; background:var(--line-2); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0%; background:var(--accent); }

/* ---------- 5. Navegación ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck{
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:72px;
}

.brand{ display:inline-flex; align-items:center; }
.brand__logo{
  height:18px; width:auto; color:var(--text);
  transition:opacity .25s var(--ease);
}
.brand:hover .brand__logo{ opacity:.7; }

.nav__links{ display:flex; gap:4px; }
.nav__links a{
  position:relative; padding:8px 14px;
  font:500 13.5px/1 var(--sans); color:var(--text-2);
  border-radius:var(--r);
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--text); }

.nav__actions{ display:flex; align-items:center; gap:8px; }

/* Conmutador de tema */

.nav__toggle{
  display:none; width:38px; height:38px;
  border:1px solid var(--line-2); border-radius:var(--r);
  place-items:center; gap:5px;
}
.nav__toggle i{
  display:block; width:16px; height:1.5px; background:var(--text);
  transition:transform .3s var(--ease-out);
}
.nav__toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav__panel{
  display:grid; gap:2px;
  padding:12px var(--gut) 24px;
  background:var(--panel-bg);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav__panel a{ padding:14px 4px; font:500 17px/1 var(--sans); border-bottom:1px solid var(--line); }
.nav__panel a:last-child{ border-bottom:0; color:var(--accent); }

/* ---------- 6. Botones ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; border-radius:var(--r);
  font:600 14px/1 var(--sans); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden;
  transition:transform .25s var(--ease-out), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn--sm{ padding:9px 16px; font-size:13px; }

.btn--primary{ background:var(--text); color:var(--bg); }
.btn--primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, var(--shine) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn--primary:hover::before{ transform:translateX(120%); }
.btn--primary span,.btn--primary svg{ position:relative; z-index:1; }

.btn--ghost{ border:1px solid var(--line-2); color:var(--text-2); background:var(--panel-b); }
.btn--ghost:hover{ border-color:var(--line-strong); color:var(--text); background:var(--panel-a); }

/* ---------- 7. Tipografía de sección ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:500 10.5px/1 var(--mono);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:26px;
}
.eyebrow .idx{
  color:var(--accent);
  padding-right:10px; margin-right:2px;
  border-right:1px solid var(--line-2);
}
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.sec{ position:relative; z-index:1; padding-block:var(--sec-y); }
.sec--alt{ background:linear-gradient(180deg, transparent, var(--panel-b) 12%, var(--panel-b) 88%, transparent); }
.sec--alt::before,.sec--alt::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.sec--alt::before{ top:0; } .sec--alt::after{ bottom:0; }

.sec__head{ max-width:760px; margin-bottom:clamp(48px,6vw,84px); }

/* Cabecera centrada: el bloque de texto también se centra, no solo su contenido */
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .sec__lead{ margin-inline:auto; }
.sec__head--center .eyebrow{ justify-content:center; }

.sec__head--split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,72px);
  align-items:end; max-width:none;
}
.sec__head--split .sec__title{ margin-bottom:0; }

.sec__title{
  font-size:clamp(30px,4.4vw,54px);
  font-weight:600; letter-spacing:-.035em;
  margin-bottom:22px;
}
.sec__title--xl{ font-size:clamp(34px,6vw,72px); }
.hl{ color:var(--accent-2); }
.sec__lead{
  font-size:clamp(15.5px,1.3vw,17.5px);
  color:var(--text-2); line-height:1.72; max-width:62ch;
}

/* ---------- 8. Hero ---------- */
/* La portada se monta en tres capas: la animación al fondo (z 0), el velo de
   legibilidad encima (z 1) y todo el contenido por delante (z 2). El overflow
   recorta el vídeo cuando lo recorten los bordes. */
.hero{
  position:relative; z-index:1;
  padding-top:clamp(96px,11vh,134px);
  overflow:hidden;
  /* Imprescindible para la mezcla del vídeo: mix-blend-mode compone contra el
     fondo acumulado de su contexto de apilamiento, y .hero crea uno. Sin este
     color no tendría contra qué componer y el negro seguiría siendo negro. */
  background:var(--bg);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,  var(--veil-1) 0%, var(--veil-1) 26%, var(--veil-2) 52%, var(--veil-0) 86%),
    linear-gradient(180deg, var(--veil-2) 0%, var(--veil-0) 26%, var(--veil-0) 62%, var(--veil-1) 100%);
}
.hero__brand,.hero__grid,.marquee{ position:relative; z-index:2; }
/* Sin el instrumento la portada es más baja y la marquesina quedaba pegada a
   las cifras. */
.hero .marquee{ margin-top:clamp(44px,5.5vw,80px); }
.hero__brand{ padding-bottom:clamp(28px,2.8vw,40px); }

/* Logotipo de portada: ocupa todo el ancho del contenedor */
.brandline{
  line-height:0;
  opacity:0; transform:translateY(22px);
  animation:brand-in 1s var(--ease-out) .1s forwards;
}
/* El tope evita que el logotipo se coma la pantalla en escritorio.
   Por debajo de ese ancho manda el 100%, así en móvil sigue a sangre. */
.brandline__logo{
  display:block;
  width:100%; max-width:900px;
  height:auto; color:var(--text);
}

/* «ESTUDIO CREATIVO» bajo el logotipo. Antes vivía dentro del SVG como <text>
   con una posición absoluta por tspan; el logotipo nuevo es solo trazo, así que
   la bajada pasa a ser texto HTML: escala con la pantalla, se lee con lector de
   pantalla y desaparece el hueco que provocaba heredar el letter-spacing. */
.brandline__tag{
  display:block;
  max-width:900px;
  margin-top:clamp(12px,1.5vw,20px);
  font:500 clamp(10px,1.05vw,14px)/1 "Space Grotesk",var(--sans);
  text-align:center; text-transform:uppercase;
  color:var(--muted);
}
/* El tracking deja un hueco sobrante tras la última letra; el margen negativo
   lo descuenta para que quede centrado de verdad bajo el logotipo. */
.brandline__tag i{ font-style:normal; letter-spacing:.44em; margin-right:-.44em; }
@keyframes brand-in{ to{ opacity:1; transform:none; } }

.hero__claim{
  font-size:clamp(23px,2.6vw,34px);
  font-weight:600; letter-spacing:-.03em; line-height:1.16;
  margin-bottom:26px; max-width:24ch;
}
.hero__claim .hl{
  background:linear-gradient(180deg, var(--text), var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__lead{
  font-size:clamp(16px,1.35vw,18.5px);
  color:var(--text-2); line-height:1.72; max-width:56ch;
  margin-bottom:34px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:54px; }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,52px);
  padding-top:26px; border-top:1px solid var(--line);
}
.hero__stats dt{
  font:600 30px/1 var(--mono); letter-spacing:-.03em;
  color:var(--text); margin-bottom:7px;
}
.hero__stats dd{
  margin:0; font:400 12px/1.4 var(--mono);
  letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
}

/* ---------- 9. Instrumentos ---------- */
.instr{
  margin:0; position:relative;
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.instr::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 120% 90% at 50% 0%, transparent 55%, var(--vignette));
}

.instr__head,.instr__foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  padding:11px 14px;
  font:500 9.5px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  background:var(--panel-b);
}
.instr__head{ border-bottom:1px solid var(--line); }
.instr__foot{ border-top:1px solid var(--line); }
.instr__foot b{ color:var(--text); font-weight:600; letter-spacing:.08em; }
.instr__foot-r{ margin-left:auto; }

.instr__id{
  padding:4px 7px; border:1px solid var(--accent-line);
  border-radius:3px; color:var(--accent); letter-spacing:.1em;
}
.instr__name{ color:var(--text-2); letter-spacing:.1em; text-transform:none; font-size:10.5px; }
.instr__state{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
.instr__state i{
  width:5px; height:5px; border-radius:50%; background:#16A34A;
  animation:blip 2s var(--ease) infinite;
}

.instr__stage{ position:relative; aspect-ratio:1/1; }
.instr__stage--wave{ aspect-ratio:16/9; }
.instr__stage canvas{ width:100%; height:100%; }

/* HUD del osciloscopio */
.hudlabel{
  position:absolute; z-index:5; pointer-events:none;
  display:flex; gap:14px;
  padding:8px 11px;
  background:var(--pop-bg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:var(--r);
  transform:translate(-50%,-140%);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.55);
}
.hudlabel span{ display:grid; gap:2px; }
.hudlabel i{ font:400 8px/1 var(--mono); letter-spacing:.18em; color:var(--dim); font-style:normal; }
.hudlabel b{ font:600 12px/1 var(--mono); color:var(--text); }

/* ---------- 10. Marquesina ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee span{ font:500 12px/1 var(--mono); letter-spacing:.32em; color:var(--text-2); }
.marquee i{ color:var(--accent); font-size:7px; font-style:normal; }
@keyframes slide{ to{ transform:translateX(-33.333%); } }

/* ---------- 9b. Valores: el corte y el credo ----------
   La sección tiene tratamiento propio: una banda de fondo y siete tarjetas de
   cristal que voltean al pulsarlas.

   El componente se llama .creed y NO reutiliza .values a propósito. La otra
   lleva reglas para span, b y p que se colaban en la estructura del volteo
   —que por fuerza son <span>, porque dentro de un <button> solo caben
   elementos de texto— y obligaban a pelear por especificidad en cada regla. */

/* El corte: violeta muy apagado, con un filo de acento arriba y abajo.
   Contrasta con el resto de la página sin salirse de la familia de color de la
   marca ni pelearse con la nebulosa, que pasa justo por detrás. */
/* La banda lleva una textura de cristal detrás, solo en esta sección, para
   cortar el fondo plano del resto de la página. Va muy velada: lo que se ve es
   un reflejo, no una foto. Y le da algo que desenfocar al backdrop-filter de
   las tarjetas, que sobre un fondo liso no tenía nada que hacer. */
.sec--cut{
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(11,9,23,.92) 14%,
      rgba(14,11,29,.89) 50%,
      rgba(11,9,23,.92) 86%,
      var(--bg) 100%),
    url("../img/valores-fondo.webp") center / cover no-repeat;
}
.sec--cut::before,.sec--cut::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cut-line), transparent);
}
.sec--cut::before{ top:0; }
.sec--cut::after{ bottom:0; }

/* ---- La rejilla ---- */
.creed{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.3vw,18px);
}
/* La perspectiva vive en la celda, no en la tarjeta: si va en la tarjeta, el
   punto de fuga se mueve con ella y el giro se deforma. */
.creed > li{ perspective:1200px; }

/* ---- La tarjeta ---- */
.flip{
  position:relative; display:block;
  width:100%; height:100%; min-height:214px;
  padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
  transition:transform .45s var(--ease-out);
}
.flip:hover{ transform:translateY(-4px); }
.flip:active{ transform:translateY(-1px); }

.flip__in{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,.78,.24,1);
}
.flip[aria-expanded="true"] .flip__in{ transform:rotateY(180deg); }

/* ---- Las dos caras ---- */
.flip__face{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:26px 24px 22px;
  border-radius:var(--r-lg);
  overflow:hidden;
  /* Sin esto se vería la cara de atrás espejada a través de la de delante */
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  /* Mismo vidrio que el resto del sitio, montado por capas de fondo */
  /* La última capa es una base opaca, no decorativa: sobre el fondo con
     textura de Valores el cristal dejaba pasar demasiada luz y el número y el
     rótulo de la tarjeta se volvían ilegibles. */
  background:
    linear-gradient(135deg, var(--glass-spec) 0%, transparent 40%),
    linear-gradient(180deg, var(--glass-a), var(--glass-b)),
    rgba(10,8,20,.58);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
          backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    0 18px 34px -26px var(--glass-sh);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.flip__face--back{ transform:rotateY(180deg); }

/* Cada tarjeta tiene dos caras y solo se ve una, pero el desenfoque de fondo se
   calcula igual en las dos: en Valores eran dieciséis blurs para ocho tarjetas.
   Se enciende únicamente en la cara que está de frente. Sin cambio visual: la
   que se apaga está girada y tapada por backface-visibility. */
.flip__face--back,
.flip[aria-expanded="true"] .flip__face{
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}
.flip[aria-expanded="true"] .flip__face--back{
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
          backdrop-filter:blur(var(--glass-blur)) saturate(180%);
}
.flip:hover .flip__face{
  border-color:var(--accent-line);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    0 24px 44px -26px var(--glass-sh);
}

/* Filo de acento que crece al pasar por encima */
.flip__face::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.flip:hover .flip__face::after{ transform:scaleX(1); }

/* ---- El contenido ---- */
.flip__n{
  font:500 10px/1 var(--mono); letter-spacing:.24em;
  color:var(--muted); margin-bottom:22px;
}
.flip__t{
  display:block;
  font:600 clamp(16px,1.5vw,18px)/1.25 var(--sans); letter-spacing:-.022em;
  color:var(--text);
}
.flip__d{
  display:block;
  font:400 13.5px/1.62 var(--sans); color:var(--text-2);
}
.flip__cue{
  margin-top:auto; padding-top:18px;
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-2); opacity:.72;
  transition:opacity .3s var(--ease);
}
.flip:hover .flip__cue{ opacity:1; }

/* ---- La octava celda: cierra la rejilla ---- */
.creed__end{
  display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:26px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--accent-line);
  background:linear-gradient(160deg, var(--accent-soft), transparent 70%);
}
.creed__k{ width:44px; height:auto; color:var(--accent); fill:var(--accent); }
.creed__end p{
  font:400 14px/1.55 var(--sans); color:var(--muted);
}
.creed__end b{ display:block; color:var(--text); font-weight:600; letter-spacing:-.015em; }

/* ---------- 9c. Evolución: la cámara despiezada ----------
   La cabecera pasa a dos columnas: el texto a la izquierda y la cámara a la
   derecha, alineada con el borde de la columna de contenido como el resto de
   la página. La columna derecha se fija en 560 px para que la imagen no encoja
   con el titular. */
.evo__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:clamp(24px,4vw,60px);
  align-items:center;
  max-width:none;
}
.evo__fig{ margin:0; justify-self:end; }
.evo__img{
  display:block; width:100%; height:auto;
  opacity:.92;
}

/* ---------- 9d. Evolución: la retícula de crecimiento ----------
   Antes esta lista eran .chips, etiquetas de borde punteado y el componente más
   antiguo del sitio. Ahora usa la misma retícula de hairlines que el bloque de
   capacidades de Enfoque, que es el lenguaje del resto de la página. */

/* Hacia dónde puede crecer */
.grow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.grow li{
  display:flex; align-items:center; gap:13px;
  padding:22px 20px; min-height:82px;
  background:var(--bg);
  font:500 13.5px/1.35 var(--sans); color:var(--text-2);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.grow li:hover{ background:var(--surface); color:var(--text); }
/* El + dice que son cosas que se suman, no un catálogo cerrado */
.grow__mark{
  flex:none; width:21px; height:21px;
  display:grid; place-items:center;
  border:1px solid var(--accent-line); border-radius:50%;
  color:var(--accent); font:500 12px/1 var(--mono);
}

.evo__note b{ color:var(--text); font-weight:500; }

/* ---------- 10b. Nebulosa del cursor ----------
   Dos manchas de gradiente radial: una morada, grande y rezagada, y otra azul,
   más pequeña y rápida. La sensación de nebulosa sale de que las dos no llegan
   a la vez al cursor, no de dibujar humo.

   Solo se mueven con transform, que es lo único que el navegador puede componer
   sin repintar nada. Nada de filter:blur() aquí: el degradado ya viene suave y
   un desenfoque de esta superficie costaría carísimo en cada fotograma. */
.neb{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s var(--ease);
  contain:layout paint;
}
.neb.is-on{ opacity:1; }
.neb i{
  position:absolute; top:0; left:0;
  display:block; border-radius:50%;
  will-change:transform;
}
/* El margen negativo centra cada mancha en su punto, así el transform que pone
   el JS queda limpio: solo posición, sin correcciones. */
.neb__a{
  --d:min(58vw,760px);
  width:var(--d); height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background:
    radial-gradient(circle at 44% 40%, var(--neb-1) 0%, transparent 60%),
    radial-gradient(circle at 62% 62%, var(--neb-3) 0%, transparent 55%);
}
.neb__b{
  --d:min(34vw,440px);
  width:var(--d); height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background:radial-gradient(circle at 52% 48%, var(--neb-2) 0%, transparent 62%);
}

/* ---------- 10b2. Clientes: el orbe ----------
   El brazo llega al borde izquierdo del archivo. Puesto a la derecha del
   titular, ese canto caía en mitad de la página y había que taparlo con una
   máscara, comiéndose medio antebrazo. Colocado a la izquierda y sangrando
   hasta el borde de la pantalla, el brazo entra de fuera de cuadro: no hay
   nada que tapar y se ve entero.

   Es el espejo de la mano de Enfoque, que sangra por la derecha. */
.clients__head{ align-items:center; grid-template-columns:1.05fr .95fr; }
/* El texto va antes en el HTML por orden de lectura; aquí se recolocan para
   que la imagen quede a la izquierda. */
.clients__head > div{ order:2; }
.orb{
  order:1;
  /* Ojo: aquí NO sirve el calc(50% - 50vw) que usa la mano de Enfoque. Aquel
     es hijo directo del .wrap y su porcentaje se resuelve contra el ancho del
     contenedor; este es un elemento de rejilla y se resolvería contra su celda,
     que es mucho más estrecha: el sangrado se pasaba de largo.
     Se calcula explícito: el margen del .wrap más lo que sobra a los lados. */
  margin:0 0 0 calc(var(--gut) * -1 - max((100vw - var(--wrap)) / 2, 0px));
}
.orb__img{
  display:block; width:100%; height:auto;
  /* El encuadre corta el antebrazo por abajo y ese canto sí se veía (un salto
     de 23 niveles). Se desvanece solo el último tramo: empieza en el 88 %, por
     debajo del dedo más bajo, así que la mano no se toca. */
  -webkit-mask-image:linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 88%, transparent 100%);
}

/* ---------- 10c. Método: el robot ----------
   Va entre los cuatro pasos y el ciclo, con los brazos abiertos hacia él: se
   lee como si presentara lo que viene debajo. El recorte del original lo corta
   por la cintura, así que se desvanece por abajo para que no termine en un
   canto recto justo encima del ciclo. */
.bot{
  width:min(560px, 56%);
  margin:clamp(24px,3.4vw,48px) auto 0;
}
.bot__img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(180deg, #000 54%, transparent 97%);
          mask-image:linear-gradient(180deg, #000 54%, transparent 97%);
}

/* ---------- 11. Enfoque: la mano ----------
   La imagen va recortada con canal alfa: el original traía fondo negro y se le
   extrajo un matte a partir de la luminancia. Por eso no necesita el truco de
   mix-blend-mode del vídeo de portada y se apoya igual de bien sobre el tema
   claro y el oscuro.

   Los pines se colocan en porcentaje sobre la propia imagen, y sus coordenadas
   son las puntas de los dedos medidas sobre el archivo. */
.hand{
  position:relative;
  margin:0 0 clamp(42px,5vw,68px);
  /* Se escapa del contenedor por la derecha hasta el borde de la pantalla: el
     brazo se sale de cuadro en vez de cortarse dentro de la página dejando un
     hueco muerto al lado. El truco clásico: la mitad del contenedor menos la
     mitad de la ventana da justo esa distancia, en negativo.
     El recorte horizontal del body absorbe el ancho de la barra de scroll. */
  margin-right:calc(50% - 50vw);
}
.hand__img{ display:block; width:100%; height:auto; }
.hand__pins{ position:absolute; inset:0; }

.pin{
  position:absolute;
  left:var(--x); top:var(--y);
  /* translate en vez de transform: así el revelado al hacer scroll puede usar
     transform sin pelearse con la colocación del pin. */
  translate:-100% -50%;
  display:flex; align-items:center;
  /* El tope va aquí y no en el rótulo: dentro del rótulo el porcentaje se
     resolvería contra el propio pin, cuyo ancho depende del rótulo. Circular.
     En el pin, en cambio, se resuelve contra la figura, que es lo que importa:
     el pin acaba justo en el dedo, así que limitar su ancho a --x lo mantiene
     dentro del contenedor por muy a la izquierda que caiga la mano. */
  max-width:calc(var(--x) - 10px);
}
/* Las puntas de los dedos, medidas sobre la propia imagen. Van aquí y no en un
   style="" del HTML porque la CSP del sitio prohíbe los estilos en línea: en
   local se veía bien, pero servido con sus cabeceras reales los cuatro rótulos
   se iban fuera de la figura. Si se cambia la foto, hay que volver a medirlas. */
.pin:nth-child(1){ --x:28.6%; --y:24.6%; }   /* Tecnología */
.pin:nth-child(2){ --x:27.3%; --y:41.7%; }   /* Marketing */
.pin:nth-child(3){ --x:36.1%; --y:58.5%; }   /* Branding */
.pin:nth-child(4){ --x:39.6%; --y:69.1%; }   /* Producción */

.pin__box{
  text-align:right;
  /* min-width:0 es imprescindible: sin él un elemento flexible no baja de su
     ancho mínimo de contenido y el texto desborda en vez de repartirse. */
  min-width:0;
  max-width:34ch;
}
.pin__box b{
  display:block;
  font:600 clamp(14px,1.35vw,17px)/1.25 var(--sans);
  letter-spacing:-.02em; color:var(--text);
}
.pin__desc{
  display:block; margin-top:5px;
  font:400 clamp(11.5px,1vw,13px)/1.5 var(--sans);
  color:var(--muted);
}
.pin__line{
  flex:none;
  width:clamp(18px,3vw,46px); height:1px;
  margin-left:12px;
  background:linear-gradient(90deg, transparent, var(--accent-line));
}
.pin__dot{
  flex:none;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 12px 1px var(--accent);
}
/* Los cuatro no aparecen a la vez: se despliegan de arriba abajo, siguiendo
   la mano. Gana en especificidad al transition del revelado. */
.pin:nth-child(1){ transition-delay:.05s; }
.pin:nth-child(2){ transition-delay:.18s; }
.pin:nth-child(3){ transition-delay:.31s; }
.pin:nth-child(4){ transition-delay:.44s; }

.hand__cap{
  margin-top:clamp(12px,1.5vw,20px);
  /* Compensa la sangre de la figura para que el pie siga centrado respecto al
     texto de la página y no respecto a la imagen ensanchada. La sangre es la
     diferencia entre el ancho de la ventana y el de la figura: 100vw - 100%,
     no la mitad (el 100% aquí ya es la figura ensanchada, no el contenedor). */
  margin-right:calc(100vw - 100%);
  text-align:center;
  font:500 10px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
}

.caps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.caps li{
  display:grid; gap:6px; padding:24px 22px;
  background:var(--bg);
  transition:background-color .3s var(--ease);
}
.caps li:hover{ background:var(--surface); }
.caps b{ font:600 14px/1.3 var(--sans); }
.caps span{ font:400 12.5px/1.55 var(--sans); color:var(--muted); }

/* ---------- 12. Servicios ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.card{
  position:relative; isolation:isolate;
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .45s var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 62%);
  transition:opacity .4s var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card--wide{ grid-column:span 4; }

.card__num{
  display:block; font:500 10px/1 var(--mono); letter-spacing:.24em;
  color:var(--dim); margin-bottom:20px;
}
.card:hover .card__num{ color:var(--accent); }
.card__title{ font-size:19px; letter-spacing:-.022em; margin-bottom:12px; line-height:1.2; }
.card__desc{ font:400 13.5px/1.6 var(--sans); color:var(--muted); margin-bottom:20px; }
.card--wide .card__desc{ max-width:76ch; margin-bottom:0; font-size:14.5px; }
.card__list{ display:grid; border-top:1px solid var(--line); }
.card__list li{
  padding:9px 0 9px 16px; position:relative;
  border-bottom:1px solid var(--line);
  font:400 13px/1.35 var(--sans); color:var(--text-2);
}
.card__list li::before{
  content:""; position:absolute; left:0; top:15px;
  width:5px; height:1px; background:var(--dim);
  transition:width .25s var(--ease-out), background-color .25s var(--ease);
}
.card__list li:hover::before{ width:10px; background:var(--accent); }
.card__list li:last-child{ border-bottom:0; }

.card__brackets::before,.card__brackets::after{
  content:""; position:absolute; width:12px; height:12px;
  border:1px solid var(--accent); opacity:0;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.card__brackets::before{ top:10px; left:10px; border-right:0; border-bottom:0; transform:translate(-4px,-4px); }
.card__brackets::after{ bottom:10px; right:10px; border-left:0; border-top:0; transform:translate(4px,4px); }
.card:hover .card__brackets::before,
.card:hover .card__brackets::after{ opacity:.65; transform:translate(0,0); }

/* ---------- 13. Onda ---------- */
.sec--wave{ padding-block:clamp(72px,9vw,132px); }
.wave__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.wave__legend{ display:grid; gap:11px; margin-top:32px; }
.wave__legend li{ display:flex; align-items:center; gap:11px; font:400 13px/1 var(--sans); color:var(--text-2); }
.wave__legend b{ color:var(--muted); font-weight:400; font-size:12px; }
.wave__legend sup{ font-size:8px; }
.k{ width:22px; height:2px; border-radius:2px; flex:none; background:var(--text); }
.k--1{ opacity:.55; }
.k--2{ opacity:.35; }
.k--3{ opacity:.2; }
.k--0{ background:var(--accent); opacity:1; height:2.5px; }

/* ---------- 14. Método ---------- */
.steps-wrap{ position:relative; padding-top:34px; margin-bottom:clamp(40px,5vw,64px); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px); }
.steps__rail{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.steps__rail i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s var(--ease-out);
}
.step{ position:relative; padding-top:8px; }
.step::before{
  content:""; position:absolute; top:-38px; left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-strong);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.step.is-in::before{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.step__n{ display:block; font:500 10px/1 var(--mono); letter-spacing:.22em; color:var(--accent); margin-bottom:14px; }
.step h3{ font-size:17px; margin-bottom:10px; letter-spacing:-.022em; }
.step p{ font:400 13.5px/1.62 var(--sans); color:var(--muted); }

.chain{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:20px 24px; margin-bottom:clamp(40px,5vw,64px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel-b);
}
.chain span{
  font:500 11.5px/1 var(--mono); letter-spacing:.1em;
  color:var(--text-2); text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line); border-radius:var(--r);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.chain span:hover{ color:var(--text); border-color:var(--line-strong); }
.chain i{ color:var(--dim); font-style:normal; font-size:12px; }
.chain__last{ color:var(--accent) !important; border-color:var(--accent-line) !important; background:var(--accent-soft); }

.swap{
  padding:clamp(26px,3.4vw,40px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel-a), transparent);
}
.swap__head{
  font:600 clamp(17px,2vw,22px)/1.35 var(--sans);
  letter-spacing:-.024em; margin-bottom:24px; max-width:44ch;
}
.swap ul{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.swap li{
  display:grid; grid-template-columns:1fr 28px 1.3fr;
  align-items:center; gap:12px;
  padding:15px 2px; background:var(--bg-2);
  transition:background-color .3s var(--ease);
}
.swap li:hover{ background:var(--surface); }
.swap__a{
  font:400 14px/1.3 var(--sans); color:var(--muted);
  text-decoration:line-through; text-decoration-color:var(--line-strong);
}
.swap li i{ color:var(--dim); font-style:normal; text-align:center; font-size:13px; }
.swap__b{ font:600 15px/1.3 var(--sans); color:var(--text); letter-spacing:-.02em; }
.swap li:hover .swap__b{ color:var(--accent); }

/* ---------- 15. Valores ---------- */
.values{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.values li{
  position:relative; padding:30px 26px 34px;
  background:var(--bg); min-height:186px;
  transition:background-color .35s var(--ease);
}
.values li::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.values li:hover{ background:var(--surface); }
.values li:hover::after{ transform:scaleX(1); }
.values span{
  display:block; font:500 10px/1 var(--mono); letter-spacing:.24em;
  color:var(--dim); margin-bottom:20px;
}
.values b{ display:block; font:600 17px/1.25 var(--sans); letter-spacing:-.022em; margin-bottom:10px; }
.values p{ font:400 13px/1.6 var(--sans); color:var(--muted); }
.values li:nth-child(n+5){ background:var(--bg-2); }
.values li:nth-child(n+5):hover{ background:var(--surface); }

/* ---------- 16. Clientes ---------- */
.clients{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
  margin-bottom:clamp(48px,6vw,80px);
}
.minihead{
  font:500 10px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.ticks li{
  position:relative; padding:14px 0 14px 30px;
  border-bottom:1px solid var(--line);
  font:400 15px/1.45 var(--sans); color:var(--text-2);
  transition:color .25s var(--ease), padding-left .3s var(--ease-out);
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:20px;
  width:9px; height:5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks li:hover{ color:var(--text); padding-left:36px; }

.translator__box{
  padding:28px; border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--accent-soft), var(--panel-b));
}
.translator__said,.translator__real{ display:grid; gap:8px; }
.translator__said{ margin-bottom:26px; font:400 clamp(17px,2vw,21px)/1.4 var(--sans); color:var(--text-2); }
.translator__said i,.translator__real i{
  font:500 9.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-style:normal;
}
.translator__real b{
  font:600 clamp(20px,2.6vw,28px)/1.25 var(--sans);
  letter-spacing:-.03em; color:var(--accent);
  min-height:1.25em; display:block;
}
.translator__bar{ margin-top:22px; height:1px; background:var(--line-2); }
.translator__bar i{ display:block; height:100%; width:0%; background:var(--accent); }
.translator__note{ margin-top:20px; font:400 13px/1.6 var(--sans); color:var(--muted); }

.quote{
  margin:0; padding:clamp(30px,4vw,52px);
  border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--r-lg);
  background:var(--panel-b);
}
.quote p{
  font:500 clamp(19px,2.6vw,30px)/1.4 var(--sans);
  letter-spacing:-.028em; color:var(--text); max-width:40ch; margin-bottom:18px;
}
.quote cite{
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-style:normal;
}

/* ---------- 17. Contacto ---------- */
.sec--contact{ background:linear-gradient(180deg, transparent, var(--accent-soft)); }
.contact{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,18px);
  margin-bottom:44px;
}
.contact__card{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:24px 22px;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .4s var(--ease-out);
}
.contact__card::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.contact__card:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.contact__card:hover::after{ transform:scaleX(1); }
.contact__card--wa::after{ background:#25D366; }
.contact__card--ig::after{ background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF); }
.contact__card--mail::after{ background:var(--accent); }

.contact__icon{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:var(--r);
  border:1px solid var(--line-2); background:var(--panel-a);
  color:var(--text);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact__card--wa:hover .contact__icon{ color:#128C4B; border-color:rgba(37,211,102,.45); }
.contact__card--ig:hover .contact__icon{ color:#C21A63; border-color:rgba(221,42,123,.45); }
.contact__card--mail:hover .contact__icon{ color:var(--accent); border-color:var(--accent-line); }

.contact__body{ display:grid; gap:4px; }
.contact__body b{ font:600 16px/1.2 var(--sans); letter-spacing:-.02em; }
.contact__body span{ font:400 12.5px/1.45 var(--sans); color:var(--muted); }
.contact__go{ margin-left:auto; color:var(--dim); transition:color .3s var(--ease), transform .35s var(--ease-out); }
.contact__card:hover .contact__go{ color:var(--text); transform:translate(2px,-2px); }

.contact__foot{
  text-align:center;
  font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.contact__foot b{ color:var(--text); }

/* Bloque del QR de Instagram. El código va siempre sobre plancha blanca:
   invertirlo en el modo oscuro haría fallar a bastantes lectores de cámara. */
.qr{
  display:flex; align-items:center; gap:clamp(18px,2vw,28px);
  padding:clamp(18px,2vw,26px);
  margin-bottom:44px;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel-a), var(--panel-b));
}
.qr__code{
  flex:none; display:block; padding:10px;
  background:#fff; border-radius:var(--r-lg);
  transition:transform .4s var(--ease-out);
}
.qr__code img{ width:clamp(112px,13vw,150px); height:auto; }
.qr:hover .qr__code{ transform:translateY(-3px); }
.qr__body b{ display:block; font-size:clamp(17px,1.7vw,21px); font-weight:600; letter-spacing:-.02em; }
.qr__body p{ margin-top:6px; max-width:46ch; color:var(--muted); font-size:15px; }
.qr__user{ color:var(--text); font-weight:500; }

/* ---------- 18. Footer ---------- */
.foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  padding-top:clamp(48px,6vw,72px);
  background:var(--bg-2);
}
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px);
}
.foot__brand p{
  margin-top:16px; max-width:34ch;
  font:400 13.5px/1.6 var(--sans); color:var(--muted);
}
.foot__nav{ display:grid; gap:10px; align-content:start; }
.foot h4{
  font:500 9.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); margin-bottom:4px;
}
.foot__nav a{
  font:400 13.5px/1 var(--sans); color:var(--text-2); width:fit-content;
  transition:color .2s var(--ease), transform .25s var(--ease-out);
}
.foot__nav a:hover{ color:var(--text); transform:translateX(3px); }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-block:22px; border-top:1px solid var(--line);
  font:400 11px/1 var(--mono); letter-spacing:.1em; color:var(--dim);
}
.foot__sig{ color:var(--muted); letter-spacing:.18em; }

/* ---------- 19. HUD lateral ---------- */
.hud{
  position:fixed; right:18px; bottom:18px; z-index:1000;
  display:flex; align-items:center; gap:9px;
  padding:8px 12px;
  border:1px solid var(--line); border-radius:100px;
  background:var(--pop-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font:500 9.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
.hud.is-on{ opacity:1; transform:none; }
.hud__idx{ color:var(--accent); }
.hud__sep{ width:1px; height:9px; background:var(--line-2); }
.hud__name{ color:var(--text-2); }
.hud__pct{ color:var(--dim); }

/* ---------- 20. Reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 21. Páginas secundarias (legales / 404) ---------- */
.page{
  position:relative; z-index:1;
  padding-top:clamp(120px,16vh,180px);
  padding-bottom:var(--sec-y);
}
.page__title{ font-size:clamp(30px,4.6vw,52px); letter-spacing:-.035em; margin-bottom:14px; }
.page__meta{
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-bottom:44px;
}
.prose{ max-width:70ch; }
.prose h2{
  font-size:20px; letter-spacing:-.024em;
  margin:40px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
.prose h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.prose p{ font:400 15px/1.75 var(--sans); color:var(--text-2); margin-bottom:14px; }
.prose ul{ display:grid; gap:9px; margin:0 0 18px; }
.prose ul li{ position:relative; padding-left:18px; font:400 15px/1.65 var(--sans); color:var(--text-2); }
.prose ul li::before{ content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--accent); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.err{ display:grid; place-items:center; text-align:center; gap:20px; min-height:52vh; }
.err__code{ font:600 clamp(72px,16vw,180px)/1 var(--mono); letter-spacing:-.05em; color:var(--text); }
.err p{ color:var(--text-2); max-width:44ch; }

/* ---------- 21b. Cristal ----------
   Se monta por capas de fondo en lugar de con pseudoelementos, porque varias
   de las piezas a las que se aplica ya usan ::before y ::after para otra cosa
   (el filo del acento de las tarjetas, los corchetes, la viñeta). */
.glass,
.card,
.contact__card,
.qr,
.translator__box,
.quote{
  background:
    linear-gradient(135deg, var(--glass-spec) 0%, transparent 38%),
    linear-gradient(180deg, var(--glass-a), var(--glass-b));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
          backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--glass-brd);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),      /* canto superior iluminado */
    inset 0 -1px 0 var(--glass-lo),     /* canto inferior en sombra */
    0 20px 40px -30px var(--glass-sh),  /* sombra que lo despega del fondo */
    0 2px 10px -6px var(--glass-sh);
}
/* La cita conserva su filo de acento a la izquierda */
.quote{ border-left:2px solid var(--accent); }

/* Sin backdrop-filter (navegadores viejos) el panel quedaría transparente y
   el texto ilegible: se cae a una superficie sólida. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.card,.contact__card,.qr,.translator__box,.quote{
    background:linear-gradient(180deg, var(--surface), var(--bg-2));
  }
}

/* ---------- 21c. Portada: rejilla y hueco de la animación ----------
   Ojo: .hero__grid no tenía regla base, solo la del responsive, así que la
   portada no llegaba a ser rejilla en escritorio. Aquí queda definida. */
/* Ya no hay segunda columna: la rejilla se conserva para que el texto no se
   estire a todo lo ancho y deje ver la figura del vídeo a la derecha. */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
/* Con la portada ya en dos columnas, el separador original de 52 px partía
   las tres cifras en dos líneas. */
.hero__stats{ gap:clamp(18px,2.6vw,38px); }

/* El vídeo de portada: a sangre, de borde a borde y detrás de todo.

   El archivo viene con el androide flotando sobre fondo negro. En vez de
   recortarlo fotograma a fotograma, se compone con "screen": el negro se funde
   con el fondo de la página y desaparece, y queda solo la figura iluminada.
   Para que la mezcla funcione, .hero necesita un color de fondo propio.

   La opacidad sale de dos factores: --fade lo pone el JS para suavizar el corte
   del bucle, y --hero-video-op lo pone el tema. */
.reserva{
  position:absolute; z-index:0;
  right:0;
  /* Sin el instrumento, la portada quedó más baja que la caja del vídeo y le
     recortaba la cabeza. Ahora la caja la marca el alto de la portada: el
     cuadrado cabe entero y, de paso, se dibuja aún más pequeño (más nítido). */
  top:0;
  /* Altura explícita, no top+bottom: un <video> es elemento reemplazado y con
     width:auto usa su tamaño propio (1024) ignorando el bottom. Con height al
     100 % de la portada, el ancho sale del aspect-ratio. */
  height:100%;
  width:auto;
  /* El archivo es de 1024 px. Estirarlo al ancho de la pantalla lo dejaba
     borroso, así que la caja se limita: nunca se dibuja por encima de su
     tamaño real. De paso, mucha menos superficie que mezclar.

     La caja es cuadrada como el vídeo a propósito: así el dibujo la llena
     exacta, sin bandas, y los porcentajes del recorte de abajo caen justo
     donde deben. */
  aspect-ratio:1;
  display:block;
  object-fit:cover;
  border:0;
  /* Recorta la esquina donde va la marca de agua de PixVerse. Es un parche
     mientras no haya una exportación limpia: se come un 8 % por arriba, justo
     por encima de la cabeza. Con el archivo definitivo, se quita esta línea. */
  clip-path:inset(8% 0 0 0);
  /* La animación se generó con las manos tocando el borde del encuadre, así
     que vienen cortadas en el propio archivo. Como el vídeo ya no ocupa todo
     el ancho, ese corte caía en mitad de la página y se veía como una línea
     vertical. La máscara lo desvanece: la mano se difumina en vez de cortarse.
     Con una pieza que deje aire alrededor del sujeto, esto sobra. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 30%);
          mask-image:linear-gradient(90deg, transparent 0, #000 30%);
  mix-blend-mode:screen;
  opacity:calc(var(--fade, 1) * var(--hero-video-op, 1));
}

/* ---------- 21d. Personalidad ---------- */
.duo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(28px,3vw,42px);
}
.duo__col{ padding:clamp(20px,2.2vw,28px); border-radius:var(--r-lg); }
/* La lista de lo que no queremos ser va en negativo: sin cristal y punteada */
.duo__col--no{ border:1px dashed var(--line-2); background:none; }
.duo__note{ margin-top:18px; color:var(--muted); font-size:14px; }

.tone{ display:grid; gap:11px; }
.tone li{
  display:grid; grid-template-columns:auto auto 1fr; gap:9px;
  align-items:baseline; font-size:14.5px; line-height:1.5;
}
.tone b{ font-weight:600; color:var(--text); }
.tone i{ font-style:normal; color:var(--dim); }
.tone span{ color:var(--muted); }

.feel{ margin-top:clamp(14px,1.6vw,20px); padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg); }
.feel__list{ display:flex; flex-wrap:wrap; gap:10px; }
.feel__list li{
  padding:9px 16px; border-radius:100px;
  border:1px solid var(--line-2);
  color:var(--text-2); font-size:14px; line-height:1.4;
}
.feel__list li::before{ content:"«"; color:var(--accent); margin-right:4px; }
.feel__list li::after{ content:"»"; color:var(--accent); margin-left:4px; }
.feel__note{ margin-top:20px; color:var(--muted); font-size:14.5px; }

/* ---------- 21e. Método: cómo compran ---------- */
.buy{ margin-top:clamp(30px,3.4vw,46px); }
.buy__list{ counter-reset:buy; display:grid; gap:10px; }
.buy__list li{
  counter-increment:buy; position:relative;
  padding-left:34px; color:var(--text-2); font-size:15px;
}
.buy__list li::before{
  content:counter(buy,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font:600 11px/1.4 var(--mono); letter-spacing:.06em; color:var(--accent);
}
.buy__note{ margin-top:18px; color:var(--muted); font-size:14.5px; }

/* ---------- 21f. Clientes: qué valoran ---------- */
.clients__values{
  margin-top:clamp(26px,2.8vw,36px);
  padding:18px 22px;
  border-left:2px solid var(--accent-line);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--accent-soft);
  color:var(--text-2); font-size:15.5px; line-height:1.7;
}
.clients__values b{ color:var(--text); font-weight:600; }

/* ---------- 21g. Evolución ---------- */
.minihead--gap{ margin-top:clamp(34px,3.6vw,52px); }
/* Etiquetas sueltas. Las usa "Lo que no queremos ser" (Personalidad) y
   "Hacia dónde puede crecer" (Evolución). El borde punteado las distingue de
   las listas afirmativas, que van con palomita. */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  padding:8px 13px;
  border:1px dashed var(--line-2);
  border-radius:var(--r);
  font:400 12.5px/1 var(--sans); color:var(--text-2);
  background:var(--panel-b);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.chips li:hover{ border-color:var(--line-strong); color:var(--text); }
.evo__note{
  margin-top:clamp(28px,3vw,40px);
  color:var(--muted); font-size:clamp(15px,1.4vw,16.5px); line-height:1.72; max-width:58ch;
}

/* ---------- 21h. Marca: las seis preguntas ---------- */
.brandq{ display:grid; gap:clamp(10px,1.2vw,14px); }
.brandq__row{
  /* Ancho fijo para la pregunta: con fr se llevaba un tercio del ancho aunque
     el texto fuera corto, y quedaba un vacío enorme antes de la respuesta. */
  display:grid; grid-template-columns:clamp(150px,18vw,230px) 1fr;
  gap:clamp(12px,2vw,32px); align-items:baseline;
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px);
  border-radius:var(--r-lg);
}
.brandq dt{ font-weight:600; font-size:clamp(15px,1.4vw,17px); letter-spacing:-.02em; color:var(--text); }
.brandq dd{ margin:0; color:var(--text-2); font-size:clamp(14.5px,1.3vw,16px); line-height:1.7; }
.brandq__close{
  margin-top:clamp(26px,3vw,40px); text-align:center;
  font-size:clamp(16px,1.8vw,21px); line-height:1.6; color:var(--muted);
}
.brandq__close b{ display:block; margin-top:6px; color:var(--text); font-weight:600; letter-spacing:-.02em; }

/* ---------- 22. Responsive ---------- */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:48px; }
  .wave__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card--wide{ grid-column:span 2; }
  .caps,.grow{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:repeat(2,1fr); }
  .creed{ grid-template-columns:repeat(2,1fr); }
  .values li:nth-child(n+5){ background:var(--bg); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .contact{ grid-template-columns:repeat(2,1fr); }
  .duo{ grid-template-columns:1fr; }
  .sec__head--split{ grid-template-columns:1fr; align-items:start; }
  .sec__head--split .sec__title{ margin-bottom:22px; }
  /* En una columna manda el orden de lectura: primero el texto, luego la
     imagen. La sangre por la izquierda se conserva. */
  .clients__head > div{ order:0; }
  .orb{ order:0; }
}

@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__toggle{ display:grid; }
  .clients{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }

  /* En una columna la cámara va debajo del texto, con algo de aire */
  .evo__head{ grid-template-columns:1fr; }
  .evo__fig{ justify-self:stretch; margin-top:clamp(18px,3vw,32px); }

  /* En estrecho el 56% deja al robot demasiado pequeño para leerse */
  .bot{ width:min(360px, 78%); }

  /* La imagen es demasiado pequeña para sostener los pines encima: pasan a ser
     una lista debajo, con el punto de cada dedo como viñeta. */
  .hand__pins{
    position:static;
    display:grid; gap:16px;
    margin-top:clamp(20px,3vw,28px);
  }
  /* max-width:none es imprescindible aquí: el tope calculado desde --x solo
     tiene sentido cuando el pin cuelga de un dedo. En la lista estrangularía
     el texto a un par de palabras por línea. */
  .pin{ position:static; translate:none; max-width:none; align-items:flex-start; gap:12px; }
  .pin__box{ text-align:left; max-width:none; }
  .pin__line{ display:none; }
  .pin__dot{ order:-1; margin-top:7px; }

  /* En estrecho el texto ocupa todo el ancho, así que el velo lateral no sirve
     de nada: pasa a ser vertical. Deja ver la figura arriba, donde solo está el
     nombre, y la tapa a partir del titular. */
  :root{ --hero-video-op:.62; }
  /* Aquí manda el ancho: un cuadrado del alto de la portada se saldría de la
     pantalla. Se ancla arriba, detrás del nombre. */
  .reserva{
    top:26%; bottom:auto;
    width:100%; height:auto;
    /* Aquí el vídeo ocupa todo el ancho: sus cantos caen fuera de la pantalla,
       así que la máscara solo quitaría figura sin motivo. */
    -webkit-mask-image:none; mask-image:none;
  }
  .hero::after{
    background:linear-gradient(180deg,
      var(--veil-0) 0%, var(--veil-2) 15%, var(--veil-1) 34%, var(--veil-1) 100%);
  }
  .hud{ display:none; }
}

@media (max-width:560px){
  /* el CTA de la barra cede sitio: el menú ya incluye "Contacto" */
  .nav__actions .btn{ display:none; }
  .brand__logo{ height:16px; }
}

@media (max-width:640px){
  :root{ --sec-y:72px; }
  .cards,.caps,.values,.steps,.creed,.grow{ grid-template-columns:1fr; }
  .card--wide{ grid-column:span 1; }
  .values li{ min-height:0; }
  /* Las que voltean sí necesitan alto: sus dos caras son absolutas y no
     empujan la celda. */
  .flip{ min-height:200px; }
  .steps__rail,.step::before{ display:none; }
  .step{ padding-left:18px; border-left:1px solid var(--line); }
  .hero__stats{ gap:22px; }
  .hero__stats dt{ font-size:24px; }
  .swap li{ grid-template-columns:1fr; gap:4px; padding:14px 4px; }
  .swap li i{ text-align:left; }
  .foot__grid{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__card{ padding:20px 18px; }
  .qr{ flex-direction:column; align-items:flex-start; }
  .brandq__row{ grid-template-columns:1fr; gap:8px; }
  .feel__list{ gap:8px; }
  .instr__name,.instr__foot-r{ display:none; }
  .instr__stage--wave{ aspect-ratio:4/3; }
  .marquee span{ font-size:11px; letter-spacing:.24em; }
}

/* ---------- 23. Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .brandline{ opacity:1; transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .fx-glow{ display:none; }
  .neb{ display:none; }
}

/* ---------- 24. Impresión ---------- */
@media print{
  .nav,.hud,.progress,.fx-grid,.fx-glow,.fx-grain,.boot,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}