/* ==========================================================================
   WEBS INTELIGENTES \2014  sistema visual
   Editorial t\00E9 cnico \00B7  tinta azul casi negra \00B7  acento cian
   ========================================================================== */

/* ------------------------------------------------------------ Tipograf\00ED a */
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/inter-tight-normal-400.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/inter-tight-normal-500.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:600;
  src:url('/assets/fonts/inter-tight-normal-600.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:700;
  src:url('/assets/fonts/inter-tight-normal-700.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:800;
  src:url('/assets/fonts/inter-tight-normal-800.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/instrument-serif-normal-400.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400;
  src:url('/assets/fonts/instrument-serif-italic-400.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400;
  src:url('/assets/fonts/jetbrains-mono-normal-400.woff2') format('woff2'); font-display:optional; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500;
  src:url('/assets/fonts/jetbrains-mono-normal-500.woff2') format('woff2'); font-display:optional; }

:root{
  --ink:    #05080F;
  --ink-2:  #080D19;
  --ink-3:  #0B1222;
  --ink-4:  #0E1628;

  --fg:     #F2F5FA;
  --fg-2:   #94A2B8;
  --fg-3:   #5B6A80;

  --line:   rgba(255,255,255,.085);
  --line-2: rgba(255,255,255,.17);

  --cy:     #25E3EC;
  --cy-dim: #0B7C93;
  --in:     #1B7FE8;
  --in-dim: #1256B0;
  --grad:   linear-gradient(90deg, #1B7FE8 0%, #25E3EC 100%);

  /* colores del globo (tripletas RGB: el lienzo compone el alfa) */
  --g-line: 148,162,184;
  --g-eq:   37,227,236;
  --g-arc:  27,127,232;
  --g-head: 37,227,236;
  --g-node: 165,180,205;
  --g-grid: 255,255,255;
  --g-boost: 1;

  --sans:   'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad:    clamp(20px, 4vw, 56px);
  --maxw:   1320px;
  --e:      cubic-bezier(.16,1,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--cy); color:#04121a; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#03060C; }
::-webkit-scrollbar-thumb{ background:#1c2a42; }
::-webkit-scrollbar-thumb:hover{ background:#2b405f; }

/* ---------------------------------------------------------- Texturas ---- */
.grain{
  position:fixed; inset:-120%; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%  { transform:translate(0,0); }
  20% { transform:translate(-6%,4%); }
  40% { transform:translate(4%,-5%); }
  60% { transform:translate(-3%,-3%); }
  80% { transform:translate(5%,3%); }
  100%{ transform:translate(0,0); }
}

.rules{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.rules span{ border-left:1px solid rgba(255,255,255,.032); }
.rules span:last-child{ border-right:1px solid rgba(255,255,255,.032); }
@media (max-width:760px){ .rules{ grid-template-columns:repeat(2,1fr); } }

/* --------------------------------------------------- Barra de progreso -- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  transform-origin:0 50%;
  transform:scaleX(var(--sp, 0));
  background:var(--grad);
}

/* ------------------------------------------------------------ Layout ---- */
[id]{ scroll-margin-top:96px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1; }

.sec{ padding:clamp(84px,10vw,150px) 0; position:relative; }
.sec--line{ border-top:1px solid var(--line); }
.sec--2{ background:var(--ink-2); }
.sec--3{ background:var(--ink-3); }

/* cabecera de secci\00F3 n: numeraci\00F3 n + t\00ED tulo desplazado */
.shead{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px,5vw,70px); margin-bottom:clamp(48px,6vw,84px); }
.shead--tight{ margin-bottom:clamp(34px,4vw,54px); }
@media (max-width:860px){ .shead{ grid-template-columns:1fr; gap:18px; } }

.snum{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.16em;
  color:var(--cy); text-transform:uppercase; display:flex; align-items:baseline; gap:12px;
  padding-top:14px;
}
.snum::before{ content:''; width:34px; height:1px; background:var(--cy); opacity:.5; display:block; }

.shead h2{ margin:0 0 20px; }
.shead p{ margin:0; color:var(--fg-2); max-width:54ch; font-size:1.06rem; }

/* ------------------------------------------------------- Tipograf\00ED a ---- */
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.045em; line-height:1.02; }
h1{ font-size:clamp(2.5rem, 5.6vw, 4.7rem); font-weight:800; }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h3{ font-size:clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing:-.035em; }
h4{ font-size:1.08rem; letter-spacing:-.03em; }
p{ margin:0 0 1.05rem; }

.ser{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.015em; }
.ser-up{ font-family:var(--serif); font-weight:400; font-style:normal; letter-spacing:-.01em; }
.cy{ color:var(--cy); }
.gr{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.dim{ color:var(--fg-2); }
.small{ color:var(--fg-3); font-size:.83rem; }

.mono{
  font-family:var(--mono); font-size:.71rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
}

/* ------------------------------------------------------------ Botones -- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; border:1px solid var(--line-2); border-radius:2px;
  font-size:.94rem; font-weight:600; letter-spacing:-.015em; cursor:pointer;
  background:transparent; color:var(--fg); overflow:hidden;
  transition:color .4s var(--e), border-color .4s var(--e);
  will-change:transform;
}
.btn span.t{ position:relative; z-index:2; }
.btn .ar{ position:relative; z-index:2; transition:transform .45s var(--e); }
.btn:hover .ar{ transform:translateX(6px); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--grad); transform:translateY(101%);
  transition:transform .5s var(--e);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#03121a; border-color:transparent; }

.btn--fill{ border-color:transparent; color:#03121a; }
.btn--fill::before{ transform:translateY(0); }
.btn--fill:hover::before{ transform:translateY(0); filter:brightness(1.12); }
.btn--sm{ padding:11px 18px; font-size:.85rem; }

/* enlace con subrayado que se dibuja */
.ul{ position:relative; display:inline-block; }
.ul::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e);
}
.ul:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* ------------------------------------------------------------ Navbar ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  border-bottom:1px solid transparent;
  transition:background .45s var(--e), border-color .45s var(--e), backdrop-filter .45s;
}
.nav.stuck{
  background:rgba(5,8,15,.72);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:78px; }

.logo{ display:flex; align-items:center; gap:12px; }
.logo img{ height:26px; width:auto; }
.logo b{ font-weight:700; font-size:1.01rem; letter-spacing:-.035em; white-space:nowrap; }
.logo i{
  font-family:var(--mono); font-style:normal; font-size:.55rem; letter-spacing:.2em;
  color:var(--fg-3); display:block; margin-top:-3px;
}

.nav-links{ display:flex; gap:36px; }
.nav-links a{ font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-2); transition:color .3s; }
.nav-links a:hover{ color:var(--fg); }

.nav-right{ display:flex; align-items:center; gap:16px; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:2px; background:none; cursor:pointer; padding:0; position:relative; }
.burger i{ position:absolute; left:12px; width:18px; height:1px; background:var(--fg); transition:transform .4s var(--e), opacity .3s; }
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ top:21px; }
.burger i:nth-child(3){ top:26px; }
.burger.on i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.on i:nth-child(2){ opacity:0; }
.burger.on i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:900px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0; height:calc(100svh - 78px);
    flex-direction:column; gap:0; padding:30px var(--pad); overflow-y:auto;
    background:var(--ink); border-top:1px solid var(--line);
    transform:translateY(-105%); visibility:hidden;
    transition:transform .6s var(--e), visibility 0s .6s;
  }
  .nav-links.on{ transform:translateY(0); visibility:visible; transition:transform .6s var(--e), visibility 0s 0s; }
  .nav-links a{ font-family:var(--sans); font-size:1.9rem; letter-spacing:-.04em; text-transform:none; color:var(--fg); padding:16px 0; border-bottom:1px solid var(--line); font-weight:600; }
  .burger{ display:block; }
  .nav-right .btn{ display:none; }
}

/* ==========================================================================
   Utilidades ligadas al scroll (progreso --p, lo calcula el JS)
   ========================================================================== */
html.sd .rv{
  opacity:var(--p, 0);
  transform:translate3d(0, calc((1 - var(--p, 0)) * 30px), 0);
}
html.sd .rv-l{
  opacity:var(--p, 0);
  transform:translate3d(calc((1 - var(--p, 0)) * -28px), 0, 0);
}
html.sd .rule-draw{ transform:scaleX(var(--p, 0)); transform-origin:0 50%; }
html.sd .clip-up{ clip-path:inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
html.sd .zoom-out img{ transform:scale(calc(1.16 - var(--p, 0) * .16)); }

/* entrada de la portada (sin scroll) */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; transform:translateY(105%); animation:maskUp 1.15s var(--e) forwards; }
@keyframes maskUp{ to{ transform:translateY(0); } }
.d1 > span{ animation-delay:.05s; } .d2 > span{ animation-delay:.16s; }
.d3 > span{ animation-delay:.27s; } .d4 > span{ animation-delay:.38s; }

.fade-in{ opacity:0; animation:fadeIn .9s var(--e) forwards; }
.f1{ animation-delay:.5s; } .f2{ animation-delay:.66s; } .f3{ animation-delay:.82s; }
@keyframes fadeIn{ to{ opacity:1; } }

/* ==========================================================================
   Portada
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 60px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(30px,5vw,70px); align-items:center; width:100%; }
@media (max-width:1000px){ .hero-grid{ grid-template-columns:1fr; } }

.kicker{
  display:inline-flex; align-items:center; gap:11px; margin-bottom:clamp(26px,4vw,42px);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
}
.kicker .led{ width:6px; height:6px; background:var(--cy); border-radius:50%; box-shadow:0 0 0 0 rgba(37,227,236,.6); animation:led 2.4s infinite; }
@keyframes led{ 70%{ box-shadow:0 0 0 9px rgba(37,227,236,0); } 100%{ box-shadow:0 0 0 0 rgba(37,227,236,0); } }

.hero h1{ margin-bottom:clamp(26px,3.5vw,40px); }
.hero h1 .ser{ font-size:1.06em; }

.claim{
  font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:500; color:var(--fg);
  margin-bottom:clamp(26px,3.4vw,36px); letter-spacing:-.025em;
}
.claim em{ font-size:1.12em; }

.pledge{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding:24px 26px; margin-bottom:clamp(28px,4vw,40px);
  border:1px solid var(--line-2); border-left:2px solid var(--cy);
  background:linear-gradient(100deg, rgba(37,227,236,.055), transparent 70%);
  max-width:600px;
}
.pledge .mono{ color:var(--cy); }
.pledge strong{ display:block; font-size:1.12rem; letter-spacing:-.03em; margin:8px 0 6px; font-weight:700; }
.pledge p{ margin:0; color:var(--fg-2); font-size:.94rem; }

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }

.hero-stats{ display:flex; gap:0; margin-top:clamp(44px,6vw,72px); border-top:1px solid var(--line); }
.hero-stats div{ flex:1; padding:26px 22px 0 0; }
.hero-stats div + div{ padding-left:26px; border-left:1px solid var(--line); }
.stat-n{ font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.055em; line-height:1; }
.stat-l{ font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3); margin-top:10px; }
@media (max-width:620px){
  .hero-stats{ flex-direction:column; }
  .hero-stats div + div{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
}

/* lienzo de la portada */
.hero-art{
  position:relative; aspect-ratio:1/1;
  width:min(100%, 58svh);            /* el planeta nunca sobrepasa la pantalla */
  margin-inline:auto;
}
.hero-art canvas{
  width:100%; height:100%; display:block; opacity:.88;
  -webkit-mask-image:radial-gradient(circle at 50% 47%, #000 34%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.22) 84%, transparent 97%);
  mask-image:radial-gradient(circle at 50% 47%, #000 34%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.22) 84%, transparent 97%);
}
.hero-art .tag{
  position:absolute; left:0; right:0; bottom:-6px; text-align:center;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); opacity:.7; pointer-events:none;
}
@media (max-width:1000px){
  .hero-art{ position:absolute; inset:auto -18% -8% auto; width:min(72vw,520px); margin:0; opacity:.3; z-index:0; pointer-events:none; }
  .hero-art .tag{ display:none; }
  .hero-grid > div:first-child{ position:relative; z-index:1; }
}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-3); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .bar{ width:1px; height:44px; background:linear-gradient(var(--cy), transparent); animation:cue 2.2s var(--e) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:0 0; } 45%{ transform:scaleY(1); transform-origin:0 0; } 55%{ transform:scaleY(1); transform-origin:0 100%; } 100%{ transform:scaleY(0); transform-origin:0 100%; } }
@media (max-width:1000px){ .scroll-cue{ display:none; } }

/* pantallas bajas: la portada se compacta para que el planeta entre entero */
@media (min-width:1001px) and (max-height:900px){
  .hero{ padding:104px 0 44px; }
  .hero h1{ font-size:clamp(2.3rem, 4.1vw, 3.5rem); margin-bottom:22px; }
  .kicker{ margin-bottom:22px; }
  .claim{ margin-bottom:22px; }
  .pledge{ padding:18px 22px; margin-bottom:24px; }
  .hero-cta{ margin-bottom:12px; }
  .hero-stats{ margin-top:30px; }
  .hero-stats div{ padding-top:18px; }
  .stat-n{ font-size:clamp(1.5rem,2.6vw,2rem); }
  .hero-art{ width:min(100%, 52svh); }
}
@media (min-width:1001px) and (max-height:780px){
  .hero{ padding:96px 0 34px; }
  .hero h1{ font-size:clamp(2.1rem, 3.6vw, 3rem); }
  .pledge{ padding:15px 18px; margin-bottom:20px; }
  .hero-stats{ margin-top:24px; }
  .hero-art{ width:min(100%, 48svh); }
}

/* ==========================================================================
   Cinta
   ========================================================================== */
.ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--ink-2); position:relative; z-index:1; }
.ticker-t{ display:flex; width:max-content; will-change:transform; }
.tk{
  display:flex; align-items:center; gap:26px; padding:0 26px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--fg-2);
  white-space:nowrap;
}
.tk::after{ content:''; width:4px; height:4px; background:var(--cy); transform:rotate(45deg); opacity:.85; }

/* ==========================================================================
   Servicios \2014  \00ED ndice editorial
   ========================================================================== */
.svc{ border-top:1px solid var(--line); }
.svc-row{
  position:relative; display:grid; align-items:start;
  grid-template-columns:76px minmax(0,1.05fr) minmax(0,1.15fr) 40px;
  gap:clamp(16px,3vw,44px); padding:clamp(26px,3.2vw,40px) 0;
  border-bottom:1px solid var(--line);
}
.svc-row::before{
  content:''; position:absolute; top:0; bottom:0; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  background:linear-gradient(95deg, rgba(27,127,232,.12), rgba(37,227,236,.05) 45%, transparent 78%);
  opacity:0; transition:opacity .55s var(--e); pointer-events:none;
}
.svc-row:hover::before{ opacity:1; }
.svc-i{ font-family:var(--mono); font-size:.72rem; color:var(--fg-3); padding-top:8px; letter-spacing:.1em; }
.svc-row:hover .svc-i{ color:var(--cy); }
.svc-t{ position:relative; }
.svc-t h3{ transition:transform .55s var(--e); }
.svc-row:hover .svc-t h3{ transform:translateX(10px); }
.svc-note{
  display:block; margin-top:12px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cy);
  transition:transform .55s var(--e);
}
.svc-row:hover .svc-note{ transform:translateX(10px); }
.svc-d{ color:var(--fg-2); font-size:.97rem; padding-top:5px; }
.svc-d p{ margin:0; }
.svc-ar{ display:flex; justify-content:flex-end; padding-top:6px; color:var(--fg-3); transition:transform .55s var(--e), color .4s; }
.svc-row:hover .svc-ar{ transform:translate(6px,-6px); color:var(--cy); }
.svc-tag{
  display:inline-block; margin-left:12px; padding:4px 9px; vertical-align:middle;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:#03121a; background:var(--cy);
}
@media (max-width:860px){
  .svc-row{ grid-template-columns:52px 1fr; }
  .svc-d{ grid-column:2; padding-top:14px; }
  .svc-ar{ display:none; }
}

/* ==========================================================================
   Manifiesto \2014  el texto se enciende con el scroll
   ========================================================================== */
.mani{
  font-size:clamp(1.55rem,3.5vw,3.05rem); font-weight:600; line-height:1.22;
  letter-spacing:-.045em; max-width:20ch; margin:0;
}
.mani-wide{ max-width:26ch; }
.mani .w{ color:rgba(242,245,250,.15); transition:color .5s var(--e); }
.mani .w.on{ color:var(--fg); }
.mani .ser{ font-family:var(--serif); font-style:italic; font-size:1.06em; letter-spacing:-.02em; }
.mani .ser .w.on{ color:var(--cy); }

.mani-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(30px,6vw,90px); align-items:end; }
@media (max-width:900px){ .mani-grid{ grid-template-columns:1fr; gap:34px; } }
.mani-side p{ color:var(--fg-2); font-size:.97rem; }

/* ==========================================================================
   Por qu\00E9  \2014  tres columnas con filete
   ========================================================================== */
.why{ display:grid; grid-template-columns:repeat(3,1fr); }
.why > article{
  padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,38px);
  border-left:1px solid var(--line); position:relative; overflow:hidden;
}
.why > article:last-child{ border-right:1px solid var(--line); }
.why > article::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(27,127,232,.13), rgba(37,227,236,.05) 48%, transparent 80%);
  opacity:0; transition:opacity .55s var(--e);
}
.why > article:hover::before{ opacity:1; }
.why > article > *{ position:relative; z-index:1; }
.why-n{ font-family:var(--mono); font-size:.72rem; color:var(--cy); letter-spacing:.14em; transition:letter-spacing .55s var(--e); }
.why > article:hover .why-n{ letter-spacing:.24em; }
.why h3{ margin:22px 0 14px; transition:transform .55s var(--e); }
.why > article:hover h3{ transform:translateX(9px); }
.why p{ color:var(--fg-2); font-size:.95rem; margin:0; }
.why-line{ position:absolute; top:-1px; left:-1px; right:0; height:1px; background:var(--grad); z-index:2; }
@media (max-width:860px){
  .why{ grid-template-columns:1fr; }
  .why > article{ border-left:0; border-top:1px solid var(--line); }
  .why > article:last-child{ border-right:0; border-bottom:1px solid var(--line); }
}

.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin-top:clamp(40px,5vw,66px); padding:clamp(28px,3.4vw,42px);
  border:1px solid var(--line); background:var(--ink-3);
}
.cta-band h3{ margin-bottom:8px; }
.cta-band p{ margin:0; color:var(--fg-2); font-size:.95rem; }

/* ==========================================================================
   C\00F3 mo trabajamos \2014  columna fija + pasos con l\00ED nea que se dibuja
   ========================================================================== */
.proc{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(30px,6vw,80px); align-items:start; }
@media (max-width:960px){ .proc{ grid-template-columns:1fr; gap:36px; } }
.proc-fix{ position:sticky; top:118px; }
@media (max-width:960px){ .proc-fix{ position:static; } }

.steps{ position:relative; padding-left:50px; }
.spine{ position:absolute; left:14px; top:8px; bottom:60px; width:1px; background:var(--line); }
.spine i{ display:block; position:absolute; inset:0; background:var(--grad); transform:scaleY(var(--p,0)); transform-origin:50% 0; }
.step{ position:relative; padding-bottom:clamp(34px,4vw,52px); }
.step::before{
  content:''; position:absolute; left:-41px; top:7px; width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line-2); transition:all .45s var(--e);
}
.step.on::before{ background:var(--cy); border-color:var(--cy); box-shadow:0 0 0 5px rgba(37,227,236,.15); }
.step .mono{ color:var(--fg-3); transition:color .45s; }
.step.on .mono{ color:var(--cy); }
.step h4{ margin:10px 0 8px; }
.step p{ margin:0; color:var(--fg-2); font-size:.95rem; }

/* consola de m\00E9 tricas */
.console{ border:1px solid var(--line); background:var(--ink-3); margin-top:clamp(34px,4vw,52px); }
.console-bar{
  display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3);
}
.console-bar b{ display:flex; gap:6px; }
.console-bar b i{ width:7px; height:7px; border-radius:50%; background:#243149; }
.console-bar b i:first-child{ background:var(--cy); }
.console-bar span{ margin-left:auto; }
.kpis{ display:grid; grid-template-columns:1fr 1fr; }
.kpi{ padding:20px; border-bottom:1px solid var(--line); }
.kpi:nth-child(odd){ border-right:1px solid var(--line); }
.kpi-l{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.kpi-v{ font-size:1.55rem; font-weight:800; letter-spacing:-.05em; margin-top:6px; line-height:1; }
.kpi-d{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; margin-top:8px; color:var(--cy); }
.plot{ padding:22px 20px 18px; }
.plot-h{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:92px; }
.bars i{ flex:1; display:block; background:linear-gradient(to top, var(--in), var(--cy)); height:calc(var(--h) * var(--p, 1) * 1%); min-height:2px; }
.bars-x{ display:flex; gap:8px; margin-top:9px; }
.bars-x span{ flex:1; text-align:center; font-family:var(--mono); font-size:.55rem; color:var(--fg-3); }
@media (max-width:520px){ .kpis{ grid-template-columns:1fr; } .kpi:nth-child(odd){ border-right:0; } }

/* ==========================================================================
   Opiniones \2014  secci\00F3 n anclada con recorrido horizontal
   ========================================================================== */
.pin{ position:relative; }
.pin-stage{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.pin-head{ padding:0 var(--pad); margin-bottom:clamp(26px,4vw,46px); max-width:var(--maxw); margin-left:auto; margin-right:auto; width:100%; }
.pin-track{ display:flex; gap:clamp(16px,2vw,26px); padding:0 var(--pad); will-change:transform; }
.q{
  flex:0 0 min(540px, 82vw); padding:clamp(26px,3vw,40px);
  border:1px solid var(--line); background:var(--ink-3); position:relative;
}
.q .qi{ font-family:var(--serif); font-size:3.6rem; line-height:.6; color:var(--in); opacity:.55; display:block; margin-bottom:22px; }
.q blockquote{ margin:0 0 26px; font-size:clamp(1rem,1.55vw,1.14rem); line-height:1.62; color:#DDE4EF; letter-spacing:-.02em; }
.q figcaption{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:18px; }
.q .av{
  width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center;
  border:1px solid var(--line-2); font-family:var(--mono); font-size:.7rem; color:var(--cy);
}
.q .who{ display:block; font-weight:600; font-size:.95rem; letter-spacing:-.02em; }
.q .role{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-top:4px; }
.q .stars{ display:block; color:var(--cy); font-size:.78rem; letter-spacing:.34em; margin-bottom:20px; }
.pin-foot{ padding:0 var(--pad); margin-top:clamp(24px,3vw,40px); max-width:var(--maxw); margin-left:auto; margin-right:auto; width:100%; }
.pin-prog{ height:1px; background:var(--line); position:relative; }
.pin-prog i{ position:absolute; left:0; top:0; height:100%; background:var(--grad); width:calc(var(--p, 0) * 100%); }
.pin-count{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--fg-3); margin-top:12px; display:flex; justify-content:space-between; }

@media (max-width:900px){
  .pin{ height:auto !important; }
  .pin-stage{ position:static; height:auto; padding:0 0 10px; }
  .pin-track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; transform:none !important; -webkit-overflow-scrolling:touch; }
  .q{ scroll-snap-align:start; }
  .pin-prog{ display:none; }
  .pin-count{ justify-content:flex-start; }
  .pin-count span:first-child{ display:none; }
  .pin-count span:last-child::before{ content:'\2190  '; }
}

/* ==========================================================================
   Propuesta
   ========================================================================== */
.perks{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.perks div{ padding:26px 22px; border-left:1px solid var(--line); }
.perks div:last-child{ border-right:1px solid var(--line); }
.perks .mono{ color:var(--cy); display:block; margin-bottom:14px; }
.perks p{ margin:0; font-size:.97rem; font-weight:500; letter-spacing:-.02em; }
@media (max-width:860px){ .perks{ grid-template-columns:1fr 1fr; } .perks div:nth-child(2n){ border-right:1px solid var(--line); } }
@media (max-width:520px){ .perks{ grid-template-columns:1fr; } .perks div{ border-right:1px solid var(--line); } }

.offer{ position:relative; margin-top:clamp(44px,5vw,70px); overflow:hidden; }
.offer::before{
  content:''; position:absolute; inset:-160%; z-index:0;
  background:conic-gradient(from 0deg,
    transparent 0 40%,
    rgba(27,127,232,.30) 52%,
    rgba(27,127,232,.85) 64%,
    rgba(37,227,236,1) 76%,
    rgba(37,227,236,.75) 85%,
    rgba(27,127,232,.28) 92%,
    transparent 99%);
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(1turn); } }
.offer-in{ position:relative; z-index:1; margin:1px; background:var(--ink-2); padding:clamp(34px,5vw,64px); text-align:center; }
.offer .mono{ color:var(--cy); }
.offer h3{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin:20px 0 16px; }
.offer p{ color:var(--fg-2); max-width:54ch; margin:0 auto 30px; }

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(34px,6vw,90px); align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }

.cline{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.cline:last-of-type{ border-bottom:1px solid var(--line); }
.cline .mono{ color:var(--fg-3); }
.cline .v{ font-size:1.05rem; font-weight:500; letter-spacing:-.025em; }
.cline a.v:hover{ color:var(--cy); }

.fld{ position:relative; margin-bottom:30px; }
.fld input, .fld textarea{
  width:100%; padding:14px 2px 12px; border:0; border-bottom:1px solid var(--line-2);
  background:transparent; color:var(--fg); font:inherit; font-size:1rem; letter-spacing:-.02em;
  transition:border-color .4s var(--e);
}
.fld textarea{ min-height:120px; resize:vertical; }
.fld label{
  position:absolute; left:2px; top:14px; pointer-events:none; color:var(--fg-3);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  transition:all .4s var(--e);
}
.fld input:focus, .fld textarea:focus{ outline:none; border-bottom-color:var(--cy); }
.fld input:focus + label, .fld textarea:focus + label,
.fld input:not(:placeholder-shown) + label, .fld textarea:not(:placeholder-shown) + label{
  top:-12px; font-size:.6rem; color:var(--cy);
}
.fld input::placeholder, .fld textarea::placeholder{ color:transparent; }
.fld textarea + label{ top:16px; }

.gdpr{ display:flex; gap:12px; align-items:flex-start; margin:8px 0 28px; }
.gdpr input{ margin-top:4px; width:15px; height:15px; accent-color:var(--cy); flex:0 0 15px; }
.gdpr label{ font-size:.79rem; color:var(--fg-3); line-height:1.6; }
.gdpr a{ color:var(--cy); text-decoration:underline; text-underline-offset:2px; }

.sent{
  display:none; margin-top:20px; padding:15px 18px;
  border:1px solid var(--cy); color:var(--cy);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.sent.on{ display:block; }

/* ==========================================================================
   Pie
   ========================================================================== */
.foot{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(50px,6vw,80px); overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,4fr) repeat(2, minmax(0,2fr)); gap:clamp(26px,4vw,50px); padding-bottom:clamp(40px,5vw,70px); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid > div:first-child{ grid-column:1/-1; } }
.foot p{ color:var(--fg-2); font-size:.93rem; max-width:34ch; margin:18px 0 0; }
.foot h5{ margin:0 0 18px; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:11px; }
.foot li a{ color:var(--fg-2); font-size:.93rem; }
.foot li a:hover{ color:var(--cy); }

.wordmark{
  display:inline-block;
  font-size:clamp(2rem, 9.4vw, 9rem); font-weight:800; letter-spacing:-.06em; line-height:.78;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12);
  white-space:nowrap; padding-bottom:.06em; user-select:none;
}
.foot-bot{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding:24px 0 30px; margin-top:clamp(20px,3vw,40px);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--fg-3); text-transform:uppercase;
}
.foot-bot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.foot-bot a:hover{ color:var(--cy); }

/* ==========================================================================
   Chat + cookies
   ========================================================================== */
.chat-btn{
  position:fixed; right:24px; bottom:24px; z-index:100;
  width:54px; height:54px; border:1px solid var(--line-2); background:var(--ink-3);
  display:grid; place-items:center; cursor:pointer; border-radius:50%;
  transition:transform .45s var(--e), border-color .4s, background .4s;
}
.chat-btn:hover{ transform:scale(1.07); border-color:var(--cy); background:var(--ink-4); }
.chat-btn .x{ display:none; }
.chat-btn.on .c{ display:none; }
.chat-btn.on .x{ display:block; }

.chat{
  position:fixed; right:24px; bottom:90px; z-index:100; width:340px; max-width:calc(100vw - 36px);
  background:var(--ink-3); border:1px solid var(--line-2);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:all .45s var(--e);
}
.chat.on{ opacity:1; transform:none; pointer-events:auto; }
.chat-h{ padding:16px 18px; border-bottom:1px solid var(--line); }
.chat-h b{ font-size:.95rem; letter-spacing:-.025em; }
.chat-h span{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cy); margin-top:4px; }
.chat-b{ padding:18px; max-height:290px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; }
.m{ padding:11px 14px; font-size:.87rem; line-height:1.55; max-width:88%; }
.m-b{ background:var(--ink-4); border:1px solid var(--line); }
.m-u{ background:var(--grad); color:#03121a; align-self:flex-end; font-weight:500; }
.chat-q{ display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 14px; }
.chat-q button{
  padding:7px 12px; background:transparent; border:1px solid var(--line-2); cursor:pointer;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2);
  transition:all .3s;
}
.chat-q button:hover{ border-color:var(--cy); color:var(--cy); }
.chat-f{ padding:14px 18px 18px; border-top:1px solid var(--line); }
.chat-f .btn{ width:100%; justify-content:center; }

.cookies{
  position:fixed; left:24px; bottom:24px; z-index:105; width:min(430px, calc(100vw - 48px));
  background:var(--ink-3); border:1px solid var(--line-2); padding:22px 24px;
  display:none;
}
.cookies.on{ display:block; animation:fadeIn .6s var(--e) both; }
.cookies p{ font-size:.83rem; color:var(--fg-2); margin:0 0 18px; }
.cookies a{ color:var(--cy); text-decoration:underline; text-underline-offset:2px; }
.cookies .row{ display:flex; gap:10px; }
@media (max-width:640px){
  .cookies{ left:12px; right:12px; bottom:12px; width:auto; }
  .chat-btn{ right:14px; bottom:14px; }
  .chat{ right:12px; bottom:78px; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.phead{ padding:clamp(140px,16vw,200px) 0 clamp(40px,5vw,70px); }
.phead h1{ max-width:14ch; }
.phead p{ color:var(--fg-2); max-width:52ch; margin-top:24px; font-size:1.06rem; }

.filters{ display:flex; flex-wrap:wrap; gap:8px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:clamp(40px,5vw,64px); }
.filters button{
  padding:9px 16px; background:transparent; border:1px solid var(--line); cursor:pointer;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-2);
  transition:all .35s var(--e);
}
.filters button:hover{ border-color:var(--line-2); color:var(--fg); }
.filters button.on{ background:var(--fg); border-color:var(--fg); color:var(--ink); }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
@media (max-width:980px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .posts{ grid-template-columns:1fr; } }

.post{ display:flex; flex-direction:column; border-top:1px solid var(--line-2); padding-top:20px; }
.post-img{ display:block; overflow:hidden; aspect-ratio:16/10; background:var(--ink-3); margin-bottom:22px; }
.post-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e); }
.post:hover .post-img img{ transform:scale(1.05); }
.post-meta{ display:flex; gap:14px; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-bottom:14px; }
.post-meta b{ color:var(--cy); font-weight:500; }
.post h3{ font-size:1.22rem; line-height:1.22; margin-bottom:12px; }
.post h3 a{ background-image:linear-gradient(var(--cy),var(--cy)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .5s var(--e); padding-bottom:2px; }
.post:hover h3 a{ background-size:100% 1px; }
.post p{ color:var(--fg-2); font-size:.93rem; flex:1; }
.post .more{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cy); display:inline-flex; gap:8px; margin-top:8px; }
.post .more .ar{ transition:transform .45s var(--e); }
.post:hover .more .ar{ transform:translateX(5px); }

/* art\00ED culo */
.art-head{ padding:clamp(130px,15vw,190px) 0 0; }
.art-wrap{ max-width:750px; margin:0 auto; }
.art-head h1{ font-size:clamp(2.2rem,4.6vw,3.5rem); margin:26px 0 22px; }
.art-meta{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); }
.art-meta b{ color:var(--cy); font-weight:500; }
.art-cover{ margin:clamp(34px,4vw,54px) auto 0; max-width:1000px; overflow:hidden; }
.art-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.prose{ padding:clamp(44px,5vw,72px) 0 clamp(60px,7vw,100px); font-size:1.075rem; line-height:1.78; color:#C4CDDC; }
.prose h2{ font-size:clamp(1.5rem,2.4vw,1.95rem); margin:52px 0 18px; color:var(--fg); letter-spacing:-.04em; }
.prose h3{ font-size:1.2rem; margin:36px 0 12px; color:var(--fg); }
.prose p{ margin:0 0 22px; }
.prose ul, .prose ol{ margin:0 0 24px; padding-left:20px; }
.prose li{ margin-bottom:10px; }
.prose li::marker{ color:var(--cy); }
.prose strong{ color:var(--fg); font-weight:600; }
.prose em{ color:var(--fg-2); }
.prose a{ color:var(--cy); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{
  margin:34px 0; padding:0 0 0 26px; border-left:1px solid var(--cy);
  font-family:var(--serif); font-style:italic; font-size:1.4rem; line-height:1.45; color:var(--fg); letter-spacing:-.02em;
}
.prose blockquote p{ margin:0; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:44px 0; }

.art-cta{ border:1px solid var(--line); background:var(--ink-3); padding:clamp(28px,3.4vw,42px); text-align:center; margin-top:20px; }
.art-cta h3{ margin-bottom:12px; }
.art-cta p{ color:var(--fg-2); margin-bottom:26px; }

.back{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); display:inline-flex; gap:9px; transition:color .3s; }
.back:hover{ color:var(--cy); }

/* legal */
.legal{ padding:clamp(130px,15vw,180px) 0 clamp(60px,7vw,100px); }
.legal h1{ font-size:clamp(2rem,4vw,3rem); margin:26px 0 12px; }
.legal .upd{ font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); }
.legal .prose{ padding-top:36px; padding-bottom:0; }
.legal .prose ul{ list-style:none; padding-left:0; }
.legal .prose ul li{ padding-left:20px; position:relative; }
.legal .prose ul li::before{ content:''; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--cy); }

/* ==========================================================================
   Accesibilidad / movimiento reducido
   ========================================================================== */
:focus-visible{ outline:2px solid var(--cy); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  html.sd .rv, html.sd .rv-l{ opacity:1 !important; transform:none !important; }
  html.sd .rule-draw{ transform:scaleX(1) !important; }
  html.sd .clip-up{ clip-path:none !important; }
  .mask > span{ transform:none; }
  .fade-in{ opacity:1; }
  .mani .w{ color:var(--fg); }
  .grain{ display:none; }
  .pin{ height:auto !important; }
  .pin-stage{ position:static; height:auto; }
  .pin-track{ overflow-x:auto; transform:none !important; }
}

/* ==========================================================================
   TEMA CLARO
   Se activa con  <html lang="es" data-theme="claro">
   Mismo sistema, misma marca; cambia el suelo y con \00E9 l las jerarqu\00ED as.
   ========================================================================== */
html[data-theme="claro"]{
  color-scheme:light;

  --ink:    #F6F9FC;   /* suelo de la p\00E1 gina, blanco con sesgo azul */
  --ink-2:  #EDF3FA;   /* secciones alternas */
  --ink-3:  #FFFFFF;   /* superficies elevadas */
  --ink-4:  #F2F7FC;

  --fg:     #0B1424;
  --fg-2:   #4C5D75;
  --fg-3:   #7C8CA3;

  --line:   rgba(11,20,36,.11);
  --line-2: rgba(11,20,36,.20);

  --cy:     #067A92;   /* cian oscurecido: legible sobre blanco */
  --cy-dim: #BCE6EF;
  --in:     #1257C7;
  --in-dim: #0C3E92;
  --grad:   linear-gradient(90deg, #1257C7 0%, #0A8FB0 100%);

  --g-line: 62,84,116;
  --g-eq:   8,140,168;
  --g-arc:  18,87,199;
  --g-head: 8,140,168;
  --g-node: 46,70,104;
  --g-grid: 11,20,36;
  --g-boost: 1.6;
}

html[data-theme="claro"] ::selection{ background:#1257C7; color:#fff; }
html[data-theme="claro"] ::-webkit-scrollbar-track{ background:#E7EEF6; }
html[data-theme="claro"] ::-webkit-scrollbar-thumb{ background:#C3D3E5; }
html[data-theme="claro"] ::-webkit-scrollbar-thumb:hover{ background:#A6BBD3; }

/* el grano resta luz en vez de sumarla */
html[data-theme="claro"] .grain{ opacity:.02; mix-blend-mode:multiply; }
html[data-theme="claro"] .rules span{ border-color:rgba(11,20,36,.05); }
html[data-theme="claro"] .bg-grid{ display:none; }

html[data-theme="claro"] .nav.stuck{ background:rgba(246,249,252,.78); }

/* bot\00F3 n s\00F3 lido: texto blanco sobre el degradado oscurecido */
html[data-theme="claro"] .btn--fill,
html[data-theme="claro"] .btn:hover{ color:#fff; }
html[data-theme="claro"] .btn-primary{ color:#fff; }
html[data-theme="claro"] .m-u{ color:#fff; }
html[data-theme="claro"] .svc-tag{ background:var(--cy); color:#fff; }

/* sobre blanco la profundidad la da la sombra, no el relleno */
html[data-theme="claro"] .console,
html[data-theme="claro"] .q,
html[data-theme="claro"] .chat,
html[data-theme="claro"] .cookies,
html[data-theme="claro"] .offer-in,
html[data-theme="claro"] .cta-band{
  box-shadow:0 1px 2px rgba(11,20,36,.05), 0 20px 44px -26px rgba(11,20,36,.28);
}
html[data-theme="claro"] .post-img{ background:#E9F0F8; }
html[data-theme="claro"] .post:hover{ }

html[data-theme="claro"] .pledge{
  background:linear-gradient(100deg, rgba(6,122,146,.09), transparent 72%);
  border-color:var(--line-2); border-left-color:var(--cy);
}
html[data-theme="claro"] .svc-row::before{
  background:linear-gradient(95deg, rgba(18,87,199,.08), rgba(6,122,146,.05) 45%, transparent 78%);
}
html[data-theme="claro"] .why > article::before{
  background:linear-gradient(155deg, rgba(18,87,199,.09), rgba(6,122,146,.05) 48%, transparent 80%);
}
html[data-theme="claro"] .mani .w{ color:rgba(11,20,36,.17); }
html[data-theme="claro"] .console-bar b i{ background:#D3DEEC; }
html[data-theme="claro"] .console-bar b i:first-child{ background:var(--cy); }
html[data-theme="claro"] .wordmark{ -webkit-text-stroke-color:rgba(11,20,36,.14); }
html[data-theme="claro"] .kicker .led{ box-shadow:0 0 0 0 rgba(6,122,146,.5); }
html[data-theme="claro"] .offer::before{
  background:conic-gradient(from 0deg,
    transparent 0 40%,
    rgba(18,87,199,.28) 52%,
    rgba(18,87,199,.8) 64%,
    rgba(10,143,176,1) 76%,
    rgba(10,143,176,.7) 85%,
    rgba(18,87,199,.26) 92%,
    transparent 99%);
}
html[data-theme="claro"] .q .qi{ color:var(--in); opacity:.35; }
html[data-theme="claro"] .filters button.on{ background:var(--fg); border-color:var(--fg); color:#fff; }
html[data-theme="claro"] .fld input, html[data-theme="claro"] .fld textarea{ color:var(--fg); }

/* el globo necesita m\00E1 s cuerpo sobre blanco */
html[data-theme="claro"] .hero-art canvas{
  opacity:1;
  -webkit-mask-image:radial-gradient(circle at 50% 47%, #000 48%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.34) 90%, transparent 99%);
  mask-image:radial-gradient(circle at 50% 47%, #000 48%, rgba(0,0,0,.82) 72%, rgba(0,0,0,.34) 90%, transparent 99%);
}
/* la marca est\00E1  pensada sobre oscuro: se asienta un punto sobre blanco */
html[data-theme="claro"] .logo img{ filter:saturate(1.12) brightness(.88); }

.route-note{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:130;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);background:var(--ink-2);border:1px solid var(--line);border-bottom:0;padding:6px 14px}
.route-note button{font:inherit;min-height:34px;color:var(--cy);background:none;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.14em;padding:0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.route-note{display:none}}
/* Legibilidad y distribución de la portada — septiembre de 2026. */
.nav-in { gap:24px; }
.nav-links { align-items:center; gap:clamp(20px, 2.3vw, 36px); }
.nav-links a {
  font-family:var(--sans); font-size:1rem; font-weight:500;
  letter-spacing:.015em; line-height:1.5; text-transform:none;
  white-space:nowrap; color:var(--fg);
}
.nav-links a:hover, .nav-links a:focus-visible { color:var(--cy); }
.logo b { letter-spacing:0; }
.hero-grid {
  grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);
  column-gap:clamp(28px, 4vw, 56px); row-gap:0;
}
.hero h1 { letter-spacing:-.025em; line-height:1.08; }
.hero h1 .ser { font-size:1em; }
#servicios h2 .ln { display:block; }
.hero-stats {
  grid-column:1 / -1; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  width:100%; margin-top:clamp(32px, 4vw, 56px);
}
.hero-stats > div { padding:26px 24px 0; text-align:center; }
.hero-stats > div + div { padding-left:24px; border-left:1px solid var(--line); }
.hero-stats .stat-n, .hero-stats .stat-l { padding:0; border:0; }
.hero-stats .stat-l { margin-top:12px; line-height:1.5; color:var(--fg-2); letter-spacing:.07em; }
.wordmark {
  font-weight:700; letter-spacing:.015em; word-spacing:.08em;
  font-kerning:none; line-height:1.15; padding:.08em .02em;
  vertical-align:top;
}
@media (max-width:1000px) {
  .hero-grid { grid-template-columns:minmax(0, 1fr); }
  .hero-art {
    position:relative; inset:auto; width:min(72vw, 380px);
    margin:20px auto 0; opacity:1; z-index:0; pointer-events:auto;
  }
  .hero-stats { margin-top:24px; }
}
@media (max-width:900px) {
  .nav-links { align-items:stretch; gap:0; }
  .nav-links a { font-size:1.75rem; letter-spacing:.015em; line-height:1.45; }
}
@media (max-width:620px) {
  .hero-stats > div { padding:20px 10px 0; }
  .hero-stats > div + div { padding-left:10px; border-top:0; }
  .hero-stats .stat-n { font-size:clamp(1.35rem, 6vw, 2rem); letter-spacing:-.015em; }
  .hero-stats .stat-l { font-family:var(--sans); font-size:.74rem; letter-spacing:0; text-transform:none; }
  .pledge { grid-template-columns:1fr; gap:8px; padding:20px; }
}



/* Limitar el área de composición del grano al viewport (antes, 3.4 × 3.4
   pantallas), conservando su textura sin mover una enorme capa de mezcla. */
.grain { inset:0; animation:none; }
.hero-art canvas { contain:paint; }


/* Misma identidad visual; lectura rápida y dos productos al mismo nivel. */
.scan-home .hero h1 { font-size:clamp(2.5rem,4.8vw,4.5rem); line-height:1.09; }
.scan-home .hero .claim { font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.65; max-width:42ch; margin:22px 0 26px; }
.scan-home .hero-cta { gap:12px; margin-bottom:26px; }
.scan-home .hero-cta .btn { padding:14px 18px; font-size:.87rem; }
.hero-promise { border-left:2px solid var(--cy); padding-left:16px; max-width:40ch; }
.hero-promise .mono { font-size:.65rem; color:var(--fg-3); }
.hero-promise p { color:var(--fg-2); font-size:.92rem; line-height:1.6; margin:5px 0 0; }
.hero-promise strong { color:var(--fg); font-weight:600; }
.scan-home .hero-stats { margin-top:34px; }
.scan-home .hero-stats .stat-l { letter-spacing:.025em; font-family:var(--sans); font-size:.78rem; text-transform:none; }
.scan-home .sec { padding-top:clamp(58px,6vw,94px); padding-bottom:clamp(58px,6vw,94px); }
.scan-heading { display:grid; grid-template-columns:1fr 2fr; gap:32px; align-items:start; margin-bottom:42px; }
.scan-heading .snum { margin-top:14px; }
.scan-home h2 { font-size:clamp(2rem,3.4vw,3rem); line-height:1.15; letter-spacing:-.035em; margin:0; }
.scan-home h2 .ser { display:block; color:var(--fg-2); }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-card { min-width:0; padding:clamp(24px,3vw,40px); border:1px solid var(--line-2); background:linear-gradient(145deg,rgba(27,127,232,.055),transparent 62%); display:flex; flex-direction:column; scroll-margin-top:110px; }
.product-voice { background:linear-gradient(145deg,rgba(37,227,236,.055),transparent 62%); border-top-color:var(--cy); }
.product-web { border-top-color:var(--in); }
.product-top { display:flex; justify-content:space-between; align-items:center; gap:18px; color:var(--cy); margin-bottom:26px; }
.product-top .mono { font-size:.65rem; line-height:1.5; letter-spacing:.08em; color:var(--fg-3); }
.product-top svg { flex:none; }
.product-card h3 { font-size:clamp(1.85rem,2.7vw,2.5rem); letter-spacing:-.035em; line-height:1.15; margin:0 0 14px; }
.product-intro { font-size:1rem; line-height:1.65; color:var(--fg-2); max-width:38ch; min-height:3.3em; margin:0; }
.product-visual { height:220px; margin:28px 0; position:relative; overflow:hidden; background:var(--ink-2); border:1px solid var(--line); }
.mini-browser { position:absolute; inset:20px 20px -15px; overflow:hidden; border:1px solid var(--line-2); border-radius:8px 8px 0 0; background:var(--ink); }
.mini-browser-bar { height:30px; display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); padding:0 12px; }
.mini-browser-bar i { width:4px; height:4px; background:var(--fg-3); border-radius:50%; }
.mini-browser-bar span { margin-left:auto; font-size:.55rem; color:var(--fg-3); letter-spacing:.06em; }
.mini-browser-body { padding:20px; position:relative; z-index:1; }
.mini-kicker { display:block; text-transform:uppercase; letter-spacing:.16em; font-size:.5rem; color:var(--cy); }
.mini-browser-body b { display:block; margin:8px 0 14px; font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.1; letter-spacing:-.03em; }
.mini-button { display:inline-flex; gap:36px; padding:7px 12px; background:var(--grad); color:#04121a; font-size:.65rem; font-weight:600; }
.mini-orbit { position:absolute; right:-30px; bottom:-50px; width:180px; height:180px; border-radius:50%; border:1px solid rgba(37,227,236,.24); box-shadow:0 0 0 22px rgba(27,127,232,.05),0 0 0 44px rgba(27,127,232,.025); }
.voice-visual { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; background:radial-gradient(ellipse at center,rgba(37,227,236,.055),transparent 70%),var(--ink-2); }
.voice-orbit { width:64px; height:64px; border:1px solid rgba(37,227,236,.38); display:grid; place-items:center; border-radius:50%; color:var(--cy); box-shadow:0 0 0 11px rgba(37,227,236,.025),0 0 0 22px rgba(37,227,236,.015); }
.voice-wave { display:flex; align-items:center; justify-content:center; gap:5px; height:38px; width:100%; }
.voice-wave i { width:3px; height:var(--h); border-radius:3px; background:var(--cy); opacity:.7; }
.voice-caption { font-size:.65rem; color:var(--fg-3); letter-spacing:.045em; }
.message-channel { color:var(--cy); font-size:.85rem; font-weight:600; letter-spacing:.02em; }
.message-preview { display:flex; flex-direction:column; gap:10px; width:62%; max-width:240px; }
.message-preview > span { width:78%; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px 10px 10px 2px; }
.message-preview .message-out { align-self:flex-end; background:rgba(37,227,236,.075); border-color:rgba(37,227,236,.23); border-radius:10px 10px 2px 10px; }
.message-preview i { display:block; height:3px; background:var(--fg-3); opacity:.55; border-radius:2px; }
.message-preview i + i { width:65%; margin-top:6px; }
.message-out i { background:var(--cy); }
.product-points { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:13px; }
.product-points li { position:relative; padding-left:20px; font-size:.92rem; line-height:1.55; color:var(--fg-2); }
.product-points li::before { content:'↗'; position:absolute; left:0; color:var(--cy); }
.product-points strong { color:var(--fg); font-weight:600; }
.product-card > .btn { margin-top:auto; align-self:flex-start; font-size:.9rem; padding:15px 20px; }
.quick-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.quick-steps article { border-top:1px solid var(--line-2); padding-top:22px; }
.step-number { font-family:var(--mono); color:var(--cy); font-size:.7rem; }
.quick-steps h3 { font-size:1.2rem; line-height:1.3; letter-spacing:-.025em; margin:20px 0 10px; }
.quick-steps p { color:var(--fg-2); margin:0; font-size:.97rem; line-height:1.65; max-width:31ch; }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.review-card { margin:0; border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; min-width:0; }
.review-card .stars { color:var(--cy); letter-spacing:.15em; font-size:.8rem; }
.review-card blockquote { margin:22px 0 28px; font-family:var(--serif); font-size:1.15rem; font-style:italic; line-height:1.6; color:var(--fg); }
.review-card figcaption { display:flex; gap:12px; align-items:center; margin-top:auto; }
.review-card .av { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%; font-family:var(--mono); font-size:.65rem; color:var(--cy); flex:none; }
.review-card .who,.review-card .role { display:block; }
.review-card .who { font-size:.82rem; color:var(--fg-2); }
.review-card .role { font-size:.7rem; color:var(--fg-3); margin-top:2px; }
.review-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:24px; }
.more-reviews { margin-top:26px; }
.more-reviews summary { list-style:none; cursor:pointer; padding:14px 0; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--fg-2); display:flex; justify-content:space-between; }
.more-reviews summary::-webkit-details-marker { display:none; }
.more-reviews summary span { color:var(--cy); }
.more-reviews[open] summary span { transform:rotate(45deg); }
.review-note { font-size:.72rem; color:var(--fg-3); margin:18px 0 0; }
.scan-home .contact h2 { margin:22px 0; }
.contact-intro { color:var(--fg-2); max-width:34ch; line-height:1.65; }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin:28px 0 22px; }
.contact-email { color:var(--fg); text-decoration:underline; text-underline-offset:5px; overflow-wrap:anywhere; }
.scan-home .contact .gdpr { font-size:.75rem; line-height:1.6; }
.scan-home .contact a { overflow-wrap:anywhere; }
.rail,.route-note { display:none; }
.nav-links { gap:clamp(16px,1.8vw,28px); }
@media (max-width:1100px) and (min-width:901px) { .nav-right > .btn { display:none; } }
@media (max-width:1000px) {
  .scan-home .hero-grid { grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px; }
  .scan-home .hero-art { width:100%; max-width:380px; margin:0; align-self:center; }
  .scan-home .hero h1 { font-size:clamp(2.2rem,4.7vw,3rem); }
  .scan-home .hero-cta { flex-direction:column; align-items:flex-start; }
  .scan-home .hero-stats { margin-top:10px; }
  .scan-heading { grid-template-columns:1fr; gap:16px; }
  .scan-heading .snum { margin-top:0; }
  .review-grid { grid-template-columns:1fr; gap:14px; }
  .review-card blockquote { margin:15px 0 20px; }
  .quick-steps { gap:22px; }
}
@media (max-width:700px) {
  .scan-home .hero-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .scan-home .hero h1 { font-size:clamp(2.05rem,8vw,3rem); }
  .scan-home .hero .claim { margin:18px 0 22px; }
  .scan-home .hero-cta { flex-direction:row; align-items:stretch; }
  .scan-home .hero-cta .btn { flex:1 1 100%; justify-content:space-between; }
  .scan-home .hero-art { width:min(62vw,280px); margin:10px auto 0; }
  .scan-home .hero-stats { margin-top:16px; }
  .scan-home .hero-stats .stat-l { font-size:.7rem; line-height:1.45; }
  .scan-heading { margin-bottom:28px; }
  .product-grid,.quick-steps { grid-template-columns:1fr; }
  .product-card { padding:24px; }
  .product-card h3 { font-size:2rem; }
  .product-visual { height:190px; margin:22px 0; }
  .product-top { margin-bottom:22px; }
  .product-card > .btn { width:100%; justify-content:space-between; padding:14px; font-size:.84rem; }
  .product-intro { min-height:0; }
  .quick-steps { gap:26px; }
  .quick-steps h3 { margin-top:12px; }
  .quick-steps p { max-width:40ch; }
  .contact-actions > .btn { padding:14px 18px; font-size:.9rem; }
}

/* Ajustes Lighthouse: contraste legible y dimensiones estables. */
:root{--fg-3:#8390a3}
.logo img{width:44px;height:26px;object-fit:contain}
.foot h2{font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin:0 0 20px}
.scan-home .hero .mask>span{transform:none;animation:none}.scan-home .hero .fade-in{opacity:1;animation:none}
@media(max-width:700px){:root{--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}}