/* ===========================================================
   FORWARD DEPLOYED STUDIO — sistema de diseño
   Tema oscuro. Un acento: azul señal. Tipografía de estudio.
   =========================================================== */

:root{
  /* superficies */
  --bg:      #08080B;
  --bg-2:    #0B0B0F;
  --surf:    #101015;
  --surf-2:  #16161D;
  --surf-3:  #1E1E26;

  /* texto */
  --fg:      #F5F4F0;
  --fg-2:    #B4B3AC;
  --fg-3:    #7E7E88;

  /* acento */
  --blue:    #3D8BFF;
  --blue-2:  #6FA8FF;
  --blue-d:  #1F6FEB;
  --blue-08: rgba(61,139,255,.08);
  --blue-14: rgba(61,139,255,.14);
  --blue-24: rgba(61,139,255,.24);

  /* líneas */
  --line:    rgba(245,244,240,.09);
  --line-2:  rgba(245,244,240,.17);
  --line-3:  rgba(245,244,240,.30);

  /* forma */
  --r-ctl:  12px;
  --r-card: 22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* medida */
  --wrap:   1280px;
  --wrap-n: 1080px;
  --pad: clamp(20px, 4.2vw, 48px);

  /* tipografía */
  --f-disp: 'Figtree', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* movimiento */
  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.16,.84,.44,1);
  --nav-h:  74px;

  /* --- lo que cambia entre temas (ver bloque claro más abajo) --- */
  --on-blue:   #03102A;                    /* texto sobre relleno azul */
  --tint:      rgba(245,244,240,.05);      /* hover suave */
  --tint-2:    rgba(245,244,240,.02);
  --err:       #FF8A80;
  --nav-bg:    rgba(8,8,11,.72);
  --mnav-bg:   rgba(8,8,11,.96);
  --panel-bg:  rgba(8,8,11,.5);            /* barra de la consola */
  --panel-bg-2:rgba(8,8,11,.4);            /* registro de la consola */
  --viz-bg:    linear-gradient(168deg,var(--surf-2),var(--surf) 55%);
  --shadow-lg: 0 40px 90px -50px rgba(0,0,0,.95);
  --shadow-md: 0 30px 80px -30px rgba(0,0,0,.9);
  --glow-a:    rgba(61,139,255,.30);
  --glow-b:    rgba(61,139,255,.14);
  --glow-op:   .5;
  --grain-op:  .05;
  --grain-blend: overlay;
  /* Los logos son siluetas BLANCAS. En oscuro se dejan tal cual; en claro se
     invierten a negro por filtro, sin duplicar un solo fichero. */
  --f-tools:   brightness(0) invert(1);
  --f-clients: none;
  --op-tools:  .42;
  --op-clients:.5;
}

/* ===========================================================
   TEMA CLARO
   Los papeles se invierten: el hueso, que en oscuro es el texto,
   pasa a ser el fondo; la tinta, que era el fondo, pasa a texto.
   Por eso sigue siendo la misma marca.

   El azul es EL MISMO TONO (216°) oscurecido: #3D8BFF sobre hueso
   da 2,96:1 y es ilegible. Todos los pares cumplen WCAG AA:
   texto 16,7:1 · secundario 7,8:1 · etiquetas 4,9:1 · azul 5,0:1

   El tema lo fija siempre un script en el <head>, así que basta
   con este selector y no hace falta duplicar el bloque en una
   media query. Sin JavaScript el sitio se queda en oscuro.
   =========================================================== */
:root[data-theme="light"]{
  --bg:      #F4F2ED;
  --bg-2:    #EDEAE3;
  --surf:    #FFFFFF;
  --surf-2:  #FAF9F6;
  --surf-3:  #E7E3DA;

  --fg:      #12121A;
  --fg-2:    #4A4A55;
  --fg-3:    #67677A;

  --blue:    #005EEA;
  --blue-2:  #1F6FEB;
  --blue-d:  #0047B3;
  --blue-08: rgba(0,94,234,.055);
  --blue-14: rgba(0,94,234,.10);
  --blue-24: rgba(0,94,234,.20);

  --line:    rgba(18,18,26,.13);
  --line-2:  rgba(18,18,26,.20);
  --line-3:  rgba(18,18,26,.34);

  --on-blue:   #FFFFFF;
  --tint:      rgba(18,18,26,.045);
  --tint-2:    rgba(18,18,26,.022);
  --err:       #C62828;
  --nav-bg:    rgba(244,242,237,.82);
  --mnav-bg:   rgba(244,242,237,.97);
  --panel-bg:  rgba(18,18,26,.028);
  --panel-bg-2:rgba(18,18,26,.018);
  --viz-bg:    linear-gradient(168deg,#fff,#FAF9F6 55%);
  --shadow-lg: 0 26px 56px -38px rgba(18,18,26,.34);
  --shadow-md: 0 26px 66px -30px rgba(18,18,26,.30);
  --glow-a:    rgba(0,94,234,.14);
  --glow-b:    rgba(0,94,234,.07);
  --glow-op:   .55;
  --grain-op:  .22;
  --grain-blend: multiply;
  --f-tools:   brightness(0);
  --f-clients: invert(1);
  --op-tools:  .5;
  --op-clients:.62;

  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
}
body.is-locked{ overflow:hidden; }

img,svg,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:var(--on-blue); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--blue); color:var(--on-blue); padding:12px 20px;
  border-radius:0 0 var(--r-ctl) 0; font-weight:700;
}
.skip:focus{ left:0; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------- textura: grano + progreso ---------------- */
.grain{
  position:fixed; inset:-50%; z-index:300; pointer-events:none; opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:var(--grain-blend);
}
.prog{
  position:fixed; top:0; left:0; height:2px; z-index:350; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue-d),var(--blue),var(--blue-2));
  pointer-events:none;
}

/* ---------------- cursor propio ---------------- */
.cur, .cur__r{ position:fixed; top:0; left:0; z-index:360; pointer-events:none; border-radius:50%; opacity:0; }
.cur{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--blue); transition:opacity .3s, transform .18s var(--ease); }
.cur__r{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid var(--line-3);
  transition:opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s, background .3s;
}
body.cur-on .cur, body.cur-on .cur__r{ opacity:1; }
body.cur-hot .cur{ transform:scale(0); }
body.cur-hot .cur__r{ width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--blue); background:var(--blue-14); }
@media (hover:none), (pointer:coarse){ .cur,.cur__r{ display:none !important; } }

/* ---------------- layout ---------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--n{ max-width:var(--wrap-n); }
.sec{ position:relative; padding:clamp(84px,10vw,168px) 0; }
.sec--tight{ padding:clamp(52px,5.5vw,84px) 0; }
.sec--tint{ background:var(--bg-2); }
.sec--surf{ background:var(--surf); }
.sec--line{ border-top:1px solid var(--line); }

/* resplandor ambiental */
.glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.glow::before, .glow::after{
  content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:var(--glow-op);
}
.glow::before{ width:52vw; height:52vw; top:-22vw; right:-12vw; background:radial-gradient(circle,var(--glow-a),transparent 66%); }
.glow::after{ width:40vw; height:40vw; bottom:-20vw; left:-10vw; background:radial-gradient(circle,var(--glow-b),transparent 68%); }
.sec > .wrap{ position:relative; z-index:1; }

/* ---------------- tipografía ---------------- */
.d0,.d1,.d2,.d3,.d4{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:0; }
.d0{ font-size:clamp(2.9rem, 7.1vw, 5.9rem); letter-spacing:-.045em; line-height:.98; }
.d1{ font-size:clamp(2.4rem, 5.4vw, 4.3rem); letter-spacing:-.042em; }
.d2{ font-size:clamp(1.95rem, 3.9vw, 3.15rem); line-height:1.06; }
.d3{ font-size:clamp(1.28rem, 1.9vw, 1.62rem); line-height:1.18; letter-spacing:-.025em; font-weight:700; }
.d4{ font-size:clamp(1.05rem, 1.4vw, 1.18rem); line-height:1.25; letter-spacing:-.02em; font-weight:700; }

.lead{ color:var(--fg-2); font-size:clamp(1.04rem,1.3vw,1.22rem); max-width:60ch; line-height:1.6; }
.lead--big{ font-size:clamp(1.12rem,1.55vw,1.42rem); }
.muted{ color:var(--fg-3); }
.small{ font-size:.86rem; }
.hl{ color:var(--blue); }
.mono{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3); }

.sechead{ margin-bottom:clamp(40px,4.6vw,68px); max-width:min(100%,780px); }
.sechead .lead{ margin-top:18px; }
.sechead--wide{ max-width:none; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,64px); align-items:end; }
.sechead--wide .lead{ margin-top:0; }

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); margin-bottom:18px;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--blue); opacity:.8; }

/* ---------------- botones ---------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:14px 26px; border-radius:var(--r-pill); overflow:hidden;
  font-weight:600; font-size:.95rem; letter-spacing:-.012em;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn i{ font-size:1.05em; transition:transform .3s var(--ease); }
.btn:hover i.ph-arrow-right{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px) scale(.99); }

.btn--pri{ background:var(--blue); color:var(--on-blue); box-shadow:0 0 0 0 var(--blue-24); }
.btn--pri:hover{ background:var(--blue-2); box-shadow:0 10px 34px -10px var(--blue-24); }

.btn--ghost{ border:1px solid var(--line-2); color:var(--fg); }
.btn--ghost:hover{ border-color:var(--line-3); background:var(--tint); }

.btn--sm{ padding:10px 19px; font-size:.87rem; }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.tlink{
  display:inline-flex; align-items:center; gap:8px; color:var(--blue);
  font-weight:600; font-size:.92rem; transition:gap .28s var(--ease);
}
.tlink i{ transition:transform .28s var(--ease); }
.tlink:hover{ gap:13px; }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease), backdrop-filter .35s;
}
.nav[data-stuck="true"]{ background:var(--nav-bg); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); }
.nav[data-hide="true"]{ transform:translateY(-102%); }
.nav__in{
  height:var(--nav-h); max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:30px;
}
/* Logotipo: lockup en dos líneas. Ojo, no usar el selector `.logo span`,
   porque el propio lockup es un <span> y se llevaría el color. */
.logo{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.042em;
  font-size:1.44rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:13px;
}
.logo__m{ width:41px; height:41px; flex-shrink:0; }
.logo__lk{ display:flex; flex-direction:column; line-height:1; gap:6px; }
.logo__lk b{ font-weight:800; }
.logo__lk i{
  font-style:normal; font-weight:500; font-family:var(--f-mono);
  font-size:.45em; letter-spacing:.4em; text-transform:uppercase;
  color:var(--blue); transition:color .3s;
  margin-right:-.4em; /* compensa el espaciado sobrante tras la última letra */
}
.logo:hover .logo__lk i{ color:var(--blue-2); }

.nav__links{ display:flex; gap:4px; margin-left:auto; }
.nav__links a{
  font-size:.91rem; font-weight:500; color:var(--fg-2); white-space:nowrap;
  position:relative; padding:8px 14px; border-radius:var(--r-pill); transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a:hover{ color:var(--fg); background:var(--tint); }
.nav__links a[aria-current="page"]{ color:var(--fg); }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1.5px; background:var(--blue); border-radius:2px;
}
.nav__cta{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:var(--r-ctl); font-size:1.2rem; }

.mnav{
  position:fixed; inset:var(--nav-h) 0 0; z-index:190; display:none;
  background:var(--mnav-bg); backdrop-filter:blur(20px); padding:14px var(--pad) 40px; overflow-y:auto;
}
.mnav[data-open="true"]{ display:block; }
.mnav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-disp); font-weight:700; font-size:1.5rem; letter-spacing:-.03em;
}
.mnav a i{ color:var(--blue); font-size:1.1rem; }

/* ---------------- hero ---------------- */
.hero{ padding-top:calc(var(--nav-h) + clamp(48px,7vw,104px)); padding-bottom:clamp(64px,7vw,112px); }
.hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,76px); align-items:center; }
.hero__wide{ max-width:min(100%,900px); }
.hero .lead{ margin:26px 0 34px; }
.hero__note{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.hero__note span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); display:inline-flex; align-items:center; gap:8px; }
.hero__note i{ color:var(--blue); font-size:1rem; }

.crumb{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--fg-3); margin-bottom:26px; text-transform:uppercase; }
.crumb a{ transition:color .25s; }
.crumb a:hover{ color:var(--blue); }

/* palabra a palabra — sin recorte, para no romper el interlineado cerrado */
.rw{ display:inline-block; }
.rw > i{ display:inline-block; font-style:inherit; }
@media (prefers-reduced-motion: no-preference){
  .rw > i{ opacity:0; transform:translateY(.42em); transition:opacity .7s var(--ease), transform .85s var(--ease); }
  .rw.is-in > i{ opacity:1; transform:none; }
}
.no-anim .rw > i{ opacity:1; transform:none; }

/* ---------------- reveal ---------------- */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(22px); transition:opacity .78s var(--ease), transform .78s var(--ease); }
  .rv.is-in{ opacity:1; transform:none; }
  .rv[data-d="1"]{ transition-delay:.08s; }
  .rv[data-d="2"]{ transition-delay:.16s; }
  .rv[data-d="3"]{ transition-delay:.24s; }
  .rv[data-d="4"]{ transition-delay:.32s; }
  .stag > *{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .stag.is-in > *{ opacity:1; transform:none; }
}

/* ---------------- marquee ---------------- */
.mq{
  overflow:hidden; padding:30px 0; position:relative;
  border-block:1px solid var(--line); background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq__lab{ text-align:center; margin-bottom:22px; }
.mq__track{ display:flex; gap:64px; width:max-content; animation:mqs 60s linear infinite; align-items:center; }
/* La duración va con el número de logos: la cinta recorre su propio ancho,
   así que al añadir herramientas hay que subirla o la marquesina acelera.
   60 s para 18 logos mantiene la velocidad que tenía con 14 a 46 s. */
.mq:hover .mq__track{ animation-play-state:paused; }
.mq__track img{ height:var(--h,23px); width:auto; opacity:var(--op-tools); filter:var(--f-tools); transition:opacity .3s var(--ease); }
.mq__track img:hover{ opacity:1; }
@keyframes mqs{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .mq__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; row-gap:26px; }
}

/* ---------------- cifras ---------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.stats__i{ background:var(--bg); padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px); position:relative; transition:background .35s var(--ease); }
.stats__i:hover{ background:var(--surf); }
.stats__n{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2.1rem,3.8vw,3.1rem); letter-spacing:-.045em; line-height:1; color:var(--blue); display:flex; align-items:baseline; gap:2px; }
.stats__l{ margin-top:14px; color:var(--fg); font-size:.94rem; font-weight:500; }
.stats__s{ margin-top:8px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--fg-3); text-transform:uppercase; line-height:1.5; }

/* ---------------- índice interactivo (líneas de negocio) ---------------- */
.idx{ border-top:1px solid var(--line-2); position:relative; }
.idx__i{ position:relative; border-bottom:1px solid var(--line); }
.idx__a{
  position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(30px,3.6vw,50px) 4px;
  transition:padding-left .45s var(--ease), color .35s var(--ease);
}
.idx__i:hover .idx__a{ padding-left:clamp(12px,1.6vw,26px); }
.idx__n{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--fg-3); transition:color .35s; }
.idx__i:hover .idx__n{ color:var(--blue); }
.idx__t{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.idx__t h3{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.04em; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1; margin:0; transition:color .35s var(--ease); }
.idx__i:hover .idx__t h3{ color:var(--blue); }
.idx__t p{ color:var(--fg-2); font-size:.98rem; max-width:min(100%,660px); }
.idx__go{ width:52px; height:52px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-size:1.1rem; color:var(--fg-2); flex-shrink:0; transition:all .4s var(--ease); }
.idx__i:hover .idx__go{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); transform:rotate(-45deg); }
.idx__i::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:linear-gradient(90deg,var(--blue-08),transparent 62%);
  transition:opacity .45s var(--ease);
}
.idx__i:hover::before{ opacity:1; }
.idx__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }

/* panel flotante que sigue al cursor */
.idx__peek{
  position:fixed; z-index:120; width:290px; aspect-ratio:4/3; border-radius:var(--r-card);
  overflow:hidden; border:1px solid var(--line-2); background:var(--surf);
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  box-shadow:var(--shadow-md);
}
.idx__peek[data-on="true"]{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.idx__peek > *{ position:absolute; inset:0; opacity:0; transition:opacity .3s; }
.idx__peek > [data-on="true"]{ opacity:1; }
@media (hover:none),(pointer:coarse),(max-width:900px){ .idx__peek{ display:none; } }

/* ---------------- tarjetas con foco de luz ---------------- */
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surf); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--blue-14), transparent 62%);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card__body{ position:relative; padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; gap:13px; flex:1; }
.card__body p{ color:var(--fg-2); font-size:.95rem; }
.card__body .tlink{ margin-top:auto; padding-top:6px; }
.card__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem;
  background:var(--blue-14); color:var(--blue); border:1px solid var(--blue-24); margin-bottom:4px;
}
.card--feat{ background:linear-gradient(158deg, var(--blue-14), var(--surf) 62%); border-color:var(--blue-24); }
.card__foot{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.card__rate{ font-family:var(--f-mono); font-size:.75rem; color:var(--fg); }
.card__dem{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-left:auto; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em;
  padding:6px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--fg-2);
  transition:border-color .3s, color .3s;
}
.chips li:hover{ border-color:var(--blue); color:var(--blue); }

/* rejillas */
.g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ---------------- pasos con línea de progreso ---------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; border-top:1px solid var(--line); }
.steps__bar{ position:absolute; top:-1px; left:0; height:2px; background:var(--blue); width:0; transition:width 1.4s var(--ease); }
.steps.is-in .steps__bar{ width:100%; }
.steps__i{ padding:34px clamp(18px,2vw,28px) 0; border-right:1px solid var(--line); position:relative; }
.steps__i:last-child{ border-right:0; }
.steps__k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--blue); margin-bottom:16px; display:block; }
.steps__i h3{ font-family:var(--f-disp); font-weight:700; font-size:1.14rem; letter-spacing:-.028em; margin:0 0 12px; }
.steps__i p{ color:var(--fg-2); font-size:.93rem; }
.steps__i .mono{ display:block; margin-top:16px; }

/* ---------------- acordeón ---------------- */
.acc{ border-top:1px solid var(--line-2); }
.acc__i{ border-bottom:1px solid var(--line); transition:background .35s var(--ease); }
.acc__i[data-open="true"]{ background:linear-gradient(90deg,var(--blue-08),transparent 55%); }
.acc__btn{ width:100%; display:flex; align-items:center; gap:20px; text-align:left; padding:26px 6px; transition:color .25s var(--ease); }
.acc__btn:hover{ color:var(--blue); }
.acc__t{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.08rem,1.7vw,1.42rem); letter-spacing:-.028em; flex:1; }
.acc__meta{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.07em; color:var(--fg-3); white-space:nowrap; }
.acc__ico{ width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-size:.95rem; color:var(--blue); transition:transform .4s var(--ease), background .3s, border-color .3s; flex-shrink:0; }
.acc__i[data-open="true"] .acc__ico{ transform:rotate(135deg); background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.acc__panel{ overflow:hidden; height:0; transition:height .5s var(--ease); }
.acc__in{ padding:4px 6px 34px; }
.acc__days{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.acc__day{ border-left:1px solid var(--line-2); padding-left:20px; }
.acc__day h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin:0 0 14px; font-weight:500; }
.acc__day p{ font-size:.9rem; color:var(--fg-2); margin-bottom:14px; }
.acc__day b{ color:var(--fg); font-weight:600; display:block; margin-bottom:2px; }

/* ---------------- tabla comparativa ---------------- */
.cmp{ width:100%; border-collapse:collapse; font-size:.93rem; }
.cmp th, .cmp td{ padding:18px 20px; text-align:left; vertical-align:top; }
.cmp thead th{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); font-weight:500; border-bottom:1px solid var(--line-2); }
.cmp thead th:last-child{ color:var(--blue); }
.cmp tbody tr{ border-bottom:1px solid var(--line); transition:background .3s; }
.cmp tbody tr:hover{ background:var(--tint-2); }
.cmp tbody td:first-child{ color:var(--fg-3); width:22%; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em; }
.cmp tbody td:nth-child(2){ color:var(--fg-2); }
.cmp tbody td:last-child{ color:var(--fg); font-weight:500; background:var(--blue-08); }
.cmp__wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); }

/* ---------------- precios ---------------- */
.price{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.price__c{
  position:relative; border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(28px,3vw,38px);
  background:var(--surf); display:flex; flex-direction:column; gap:18px; overflow:hidden;
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.price__c:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.price__c--feat{ border-color:var(--blue); background:linear-gradient(162deg, var(--blue-14), var(--surf) 60%); }
.price__tag{ position:absolute; top:20px; right:20px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-blue); background:var(--blue); padding:5px 11px; border-radius:var(--r-pill); }
.price__n{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.price__v{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2.1rem,3.2vw,2.8rem); letter-spacing:-.045em; line-height:1; }
.price__u{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; color:var(--fg-3); margin-top:-10px; }
.price__l{ display:flex; flex-direction:column; gap:12px; font-size:.91rem; color:var(--fg-2); }
.price__l li{ display:flex; gap:10px; align-items:flex-start; }
.price__l i{ color:var(--blue); font-size:1.05rem; margin-top:2px; flex-shrink:0; }
.price__c .btn{ margin-top:auto; justify-content:center; }

/* ---------------- cita ---------------- */
.quote{ position:relative; padding:clamp(84px,10vw,150px) 0; overflow:hidden; background:var(--bg-2); border-block:1px solid var(--line); }
.quote__in{ position:relative; max-width:min(100%,760px); }
.quote__mk{ font-family:var(--f-disp); font-size:5rem; line-height:.6; color:var(--blue); opacity:.5; display:block; margin-bottom:14px; }
.quote blockquote{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.7rem); letter-spacing:-.035em; line-height:1.16; margin:0; max-width:min(100%,660px); }
.quote figcaption{ margin-top:28px; color:var(--fg-2); font-size:.9rem; display:flex; align-items:center; gap:12px; }
.quote figcaption::before{ content:""; width:28px; height:1px; background:var(--line-3); }

/* ---------------- caja CTA ---------------- */
.ctabox{
  position:relative; overflow:hidden;
  border:1px solid var(--blue-24); border-radius:var(--r-xl);
  background:linear-gradient(148deg, var(--blue-24), var(--surf) 58%);
  padding:clamp(38px,5.6vw,74px);
  display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between;
}
.ctabox::after{
  content:""; position:absolute; width:40vw; height:40vw; right:-14vw; bottom:-24vw; border-radius:50%;
  background:radial-gradient(circle,var(--blue-24),transparent 68%); filter:blur(50px); pointer-events:none;
}
.ctabox__t{ flex:1 1 440px; max-width:min(100%,620px); position:relative; }
.ctabox .d2{ margin-bottom:14px; }
.ctabox .btnrow{ position:relative; flex-shrink:0; }

/* ---------------- visual: consola de despliegue ---------------- */
.viz{
  position:relative; border:1px solid var(--line-2); border-radius:var(--r-card); overflow:hidden;
  background:var(--viz-bg);
  box-shadow:var(--shadow-lg);
}
.viz::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 78% 0%, var(--blue-14), transparent 58%);
}
.viz__bar{ display:flex; align-items:center; gap:9px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel-bg); }
.viz__dot{ width:9px; height:9px; border-radius:50%; background:var(--surf-3); }
.viz__dot--on{ background:var(--blue); box-shadow:0 0 10px var(--blue-24); }
.viz__ttl{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em; color:var(--fg-3); margin-left:8px; text-transform:uppercase; }
.viz__live{ margin-left:auto; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:7px; }
.viz__live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
.viz__body{ position:relative; padding:clamp(18px,2.4vw,28px); }
.viz svg{ width:100%; height:auto; overflow:visible; }

.nd rect{ fill:var(--surf-2); stroke:var(--line-2); stroke-width:1; }
.nd.on rect{ fill:var(--blue-14); stroke:var(--blue); }
.nd text{ font-family:'JetBrains Mono',monospace; font-size:8.6px; fill:var(--fg-2); letter-spacing:.02em; }
.nd.on text{ fill:var(--fg); }
.nd circle{ fill:var(--blue); }
.wire{ fill:none; stroke:var(--line-2); stroke-width:1.2; }
.wire--live{ stroke:var(--blue); stroke-dasharray:5 7; animation:flow 1.1s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: reduce){ .wire--live{ animation:none; } .viz__live::before{ animation:none; } }

.viz__log{ border-top:1px solid var(--line); padding:14px 18px; display:grid; gap:7px; background:var(--panel-bg-2); }
.viz__log p{ font-family:var(--f-mono); font-size:.68rem; color:var(--fg-3); display:flex; gap:10px; align-items:center; }
.viz__log b{ color:var(--blue); font-weight:500; }
.viz__log span{ margin-left:auto; color:var(--fg-3); opacity:.7; }

/* ---------------- lista de proceso ---------------- */
.plist{ display:grid; border-top:1px solid var(--line-2); }
.plist__i{
  display:grid; grid-template-columns:minmax(0,26ch) 1fr auto; gap:clamp(16px,3vw,40px);
  padding:26px 4px; border-bottom:1px solid var(--line); align-items:baseline;
  transition:padding-left .4s var(--ease), background .35s var(--ease);
}
.plist__i:hover{ padding-left:16px; background:linear-gradient(90deg,var(--blue-08),transparent 50%); }
.plist__i h3{ font-family:var(--f-disp); font-weight:700; font-size:1.1rem; letter-spacing:-.028em; margin:0; transition:color .3s; }
.plist__i:hover h3{ color:var(--blue); }
.plist__i p{ color:var(--fg-2); font-size:.94rem; max-width:64ch; }
.plist__n{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; color:var(--fg-3); }

/* ---------------- bloque partido ---------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5.4vw,84px); align-items:center; }
.split--nar{ grid-template-columns:1.05fr .95fr; }
.check{ display:flex; flex-direction:column; gap:16px; }
.check li{ display:flex; gap:12px; align-items:flex-start; color:var(--fg-2); font-size:.96rem; }
.check i{ color:var(--blue); font-size:1.1rem; margin-top:3px; flex-shrink:0; }
.check b{ color:var(--fg); font-weight:600; }

.note{ font-size:.82rem; color:var(--fg-3); margin-top:26px; max-width:74ch; line-height:1.6; }
.note a{ color:var(--blue); }

/* ---------------- formulario ---------------- */
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:.82rem; font-weight:600; color:var(--fg-2); font-family:var(--f-mono); letter-spacing:.05em; text-transform:uppercase; }
.field input, .field select, .field textarea{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-ctl);
  padding:14px 16px; color:var(--fg); width:100%; transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px var(--blue-14); background:var(--surf); }
.field small{ color:var(--fg-3); font-size:.79rem; }
.field .err{ color:var(--err); font-size:.8rem; display:none; }
.field[data-invalid="true"] .err{ display:block; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea{ border-color:var(--err); }
.form__2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.formcard{ border:1px solid var(--line-2); border-radius:var(--r-xl); background:var(--surf); padding:clamp(28px,3.6vw,44px); position:relative; overflow:hidden; }
.formcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); }
.formcard h2{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.035em; font-size:1.6rem; margin:0 0 10px; }
.formcard > p{ color:var(--fg-2); margin-bottom:28px; font-size:.95rem; }
.okmsg{ display:none; align-items:center; gap:11px; color:var(--blue); font-weight:600; margin-top:20px; font-size:.94rem; }
.okmsg[data-on="true"]{ display:flex; }

.cinfo{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-top:34px; }
.cinfo__i{ background:var(--bg); padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
.cinfo__i i{ color:var(--blue); font-size:1.2rem; margin-top:2px; }
.cinfo__i h3{ font-family:var(--f-disp); font-weight:700; font-size:1rem; letter-spacing:-.02em; margin:0 0 5px; }
.cinfo__i p{ color:var(--fg-2); font-size:.9rem; }

/* ---------------- footer ---------------- */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(60px,6.5vw,96px) 0 36px; position:relative; overflow:hidden; }
.foot__mark{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(3rem,12.5vw,11rem); line-height:.82; color:transparent;
  -webkit-text-stroke:1px var(--line-2); margin:clamp(44px,5vw,72px) 0 0; user-select:none; white-space:nowrap;
}
.foot__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot__brand p{ color:var(--fg-2); font-size:.92rem; margin-top:16px; max-width:34ch; }
.foot__soc{ display:flex; gap:9px; margin-top:22px; }
.foot__soc a{ width:38px; height:38px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; color:var(--fg-2); transition:all .3s var(--ease); }
.foot__soc a:hover{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.foot h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); font-weight:500; margin:0 0 18px; }
.foot ul{ display:grid; gap:11px; }
.foot ul a{ color:var(--fg-2); font-size:.91rem; transition:color .25s, padding-left .25s var(--ease); }
.foot ul a:hover{ color:var(--blue); padding-left:5px; }
.foot__bot{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; color:var(--fg-3); font-size:.8rem; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px){
  .nav__links{ display:none; }
  .burger{ display:inline-flex; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps__i{ padding-bottom:30px; border-bottom:1px solid var(--line); }
  .steps__i:nth-child(2n){ border-right:0; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .sechead--wide{ grid-template-columns:1fr; align-items:start; gap:20px; }
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__wide{ max-width:none; }
  .g2,.g3{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--rev > *:first-child{ order:2; }
  .price{ grid-template-columns:1fr; }
  .acc__days{ grid-template-columns:1fr; gap:20px; }
  .form__2{ grid-template-columns:1fr; }
  .plist__i{ grid-template-columns:1fr; gap:8px; }
  .plist__n{ display:none; }
  .idx__a{ grid-template-columns:auto 1fr; gap:16px; padding:26px 4px; }
  .idx__go{ display:none; }
  .ctabox{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 600px){
  .logo{ font-size:1.2rem; gap:10px; }
  .logo__m{ width:35px; height:35px; }
  .logo__lk{ gap:5px; }
  .stats{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps__i{ border-right:0; }
  .g4{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; gap:30px; }
  .nav__cta .btn{ display:none; }
  .quote blockquote{ max-width:none; }
  .quote__in{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------- vista previa del índice ---------------- */
.peek{ display:grid; place-content:center; justify-items:center; gap:11px; text-align:center; padding:24px; }
.peek i{ font-size:2rem; color:var(--blue); }
.peek b{ font-family:var(--f-disp); font-size:1.16rem; letter-spacing:-.03em; font-weight:800; }
.peek span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); line-height:1.7; }
.peek--a{ background:linear-gradient(150deg,var(--blue-24),var(--surf) 62%); }
.peek--b{ background:linear-gradient(150deg,var(--blue-14),var(--surf-2) 62%); }
.peek--c{ background:linear-gradient(150deg,var(--blue-08),var(--surf-3) 62%); }

/* ---------------- documento legal ---------------- */
.legal{ max-width:78ch; }
.legal h2{ font-family:var(--f-disp); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.5rem,2.4vw,2rem); margin:clamp(48px,5vw,72px) 0 18px; padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line); }
.legal h3{ font-family:var(--f-disp); font-weight:700; font-size:1.1rem; letter-spacing:-.024em; margin:34px 0 12px; }
.legal p{ color:var(--fg-2); margin-bottom:16px; font-size:.97rem; }
.legal ul:not(.chips):not(.check){ display:grid; gap:12px; margin:18px 0 24px; }
.legal ul:not(.chips):not(.check) li{ color:var(--fg-2); font-size:.95rem; padding-left:20px; position:relative; }
.legal ul:not(.chips):not(.check) li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--blue); }
.legal dl{ display:grid; grid-template-columns:minmax(0,22ch) 1fr; gap:12px 26px; margin:20px 0 26px; }
.legal dt{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); padding-top:3px; }
.legal dd{ margin:0; color:var(--fg-2); font-size:.95rem; }
.legal a{ color:var(--blue); }
.warn{
  border:1px solid var(--blue-24); border-left-width:3px; border-radius:var(--r-ctl);
  background:var(--blue-08); padding:20px 24px; margin:26px 0; font-size:.92rem; color:var(--fg-2);
}
.warn b, .warn strong{ color:var(--fg); display:block; margin-bottom:6px; font-weight:600; }
@media (max-width:700px){ .legal dl{ grid-template-columns:1fr; gap:4px 0; } .legal dd{ margin-bottom:14px; } }

/* ---------------- 404 ---------------- */
.e404{ min-height:72vh; display:grid; place-content:center; text-align:center; }
.e404 .btnrow{ justify-content:center; }
.e404__n{ font-family:var(--f-disp); font-weight:800; font-size:clamp(6rem,20vw,15rem); line-height:.85; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px var(--line-2); margin-bottom:10px; }

/* ---------------- afinado de la consola en móvil ---------------- */
@media (max-width: 620px){
  .viz__live{ display:none; }
  .viz__ttl{ margin-left:6px; font-size:.6rem; }
  .viz__body{ padding:14px 12px; }
  .viz__log{ padding:13px 14px; }
  .viz__log p{ font-size:.64rem; gap:8px; align-items:flex-start; }
  .viz__log span{ display:none; }
}

/* ---------------- selector de idioma ---------------- */
.lang{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
}
.lang a{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; line-height:1;
  padding:7px 10px; border-radius:var(--r-pill); color:var(--fg-3);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.lang a:hover{ color:var(--fg); }
.lang a[aria-current="true"]{ background:var(--surf-3); color:var(--fg); }
.mnav__lang{ padding-top:30px; }
.lang--big a{ font-size:.82rem; padding:11px 20px; letter-spacing:.08em; }
@media (max-width: 400px){ .nav__cta .lang{ display:none; } }

/* signo +/% junto a una cifra: menor y menos pesado que el número */
.stats__sign{ font-size:.62em; opacity:.8; font-weight:800; }

/* ---------------- marquesina de clientes ---------------- */
/* Va justo debajo de la de herramientas y en sentido contrario, para que las
   dos bandas no se lean como una sola cinta. Logos más grandes que los de
   herramientas: son la prueba social, no una lista técnica. */
.cmq{
  overflow:hidden; padding:30px 0 34px; position:relative;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cmq__lab{ text-align:center; margin-bottom:28px; }
.cmq__track{ display:flex; gap:82px; width:max-content; align-items:center; animation:cmqs 62s linear infinite; }
.cmq:hover .cmq__track{ animation-play-state:paused; }
.cmq__track img{
  height:var(--h,32px); width:auto; opacity:var(--op-clients); filter:var(--f-clients);
  transition:opacity .3s var(--ease);
}
.cmq__track img:hover{ opacity:1; }
/* al revés que la de herramientas */
@keyframes cmqs{ from{ transform:translateX(-50%); } to{ transform:none; } }

@media (max-width: 900px){
  .cmq__track{ gap:60px; }
  .cmq__track img{ height:calc(var(--h,32px) * .82); }
}
@media (max-width: 560px){
  .cmq{ padding:26px 0 28px; }
  .cmq__lab{ margin-bottom:22px; }
  .cmq__track{ gap:46px; }
  .cmq__track img{ height:calc(var(--h,32px) * .68); }
}
@media (prefers-reduced-motion: reduce){
  .cmq__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; row-gap:30px; gap:48px; }
  .cmq__track img[aria-hidden="true"]{ display:none; }
}

/* ---------------- color de los SVG incrustados ----------------
   El CSS gana a los atributos de presentación del SVG, así que estas
   reglas retematizan los diagramas sin tocar el marcado. */
.logo__m path{ stroke:var(--blue); }
.dia__ring{ fill:var(--blue-14); stroke:var(--blue); stroke-opacity:.55; }
.dia__lab{ fill:var(--fg-2); font-family:var(--f-mono); }
.dia__dot{ fill:var(--blue); }
.dia__key{ fill:var(--fg); font-family:var(--f-mono); }

/* ---------------- interruptor de tema ---------------- */
.thm{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center; position:relative;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  color:var(--fg-2); font-size:1.02rem;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.thm:hover{ color:var(--fg); border-color:var(--line-3); background:var(--tint); }
/* se muestra el icono del tema al que se va a cambiar, no el actual */
.thm i{ grid-area:1/1; transition:opacity .25s var(--ease), transform .35s var(--ease); }
.thm .ph-moon-stars{ opacity:0; transform:rotate(-40deg) scale(.7); }
.thm .ph-sun{ opacity:1; transform:none; }
:root[data-theme="light"] .thm .ph-moon-stars{ opacity:1; transform:none; }
:root[data-theme="light"] .thm .ph-sun{ opacity:0; transform:rotate(40deg) scale(.7); }
.thm--big{ width:auto; height:auto; padding:11px 20px; gap:10px; border-radius:var(--r-pill); font-size:1.05rem; }
.mnav__lang{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 400px){ .nav__cta .thm{ display:none; } }

/* El cambio de tema no debe animar cada color del sitio: se anima solo lo
   grande y se deja el resto instantáneo, o el conmutador se siente pastoso. */
@media (prefers-reduced-motion: no-preference){
  body, .nav, .foot, .sec--tint, .card, .viz, .stats__i{
    transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }
}