/*
Theme Name: Fundática
Theme URI: https://fundatica.com
Template: generatepress
Description: Child theme de GeneratePress para Fundática — estudio digital que combina IA, desarrollo full stack, ciencia de datos y marketing. Incluye landing completa con soporte bilingüe (ES/EN) y animaciones SVG custom.
Author: Fundática
Author URI: https://fundatica.com
Version: 1.2.5
Text Domain: fundatica
*/

/* ============================================================
 * Fundática — Design tokens
 * ============================================================ */
:root{
  --bg-dark:  #0e0f13;
  --bg-white: #f7f7f7;
  --ink:      #292929;
  --ink-soft: #555;
  --ink-mute: #8a8a92;
  --white:    #ffffff;
  --line:     #e4e4e4;
  --line-dark:rgba(255,255,255,.08);

  --purple:   #7a6cff;
  --pink:     #e2386e;
  --orange:   #fea945;
  --green:    #64d3a6;
  --blue:     #25aec7;
  --gold:     #d4a64c;

  --bezier:   cubic-bezier(.7,0,.3,1);
  --bez-out:  cubic-bezier(.14,0,.19,.99);
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', Helvetica, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', Helvetica, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Menlo', 'Monaco', 'Courier New', monospace;
}

/* Reset GeneratePress wrappers on the landing so the full-bleed hero etc. works */
body.page-template-landing #page,
body.home #page{max-width:none;margin:0;padding:0}
body.page-template-landing .site-content,
body.home .site-content{padding:0;margin:0}
body.page-template-landing .entry-content,
body.home .entry-content{max-width:none;margin:0;padding:0}

/* ============================================================
 * Base
 * ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;outline:0}
/* IMPORTANTE: NO poner height:100% en html ni body.
   La combinación height:100% + cualquier overflow distinto de visible
   convierte el body en un scroll-container interno (un overflow-y:auto
   implícito aparece cuando overflow-x deja de ser visible). En mobile
   eso genera un scrollbar vertical INTERNO que se ve como una "barra
   blanca" al costado. min-height:100vh cumple lo mismo (cubrir el
   viewport vacío) sin clavar la altura. */
html,body{min-height:100vh;background:var(--bg-white);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
/* overflow-x:clip evita el desbordamiento horizontal SIN romper position:sticky.
   CRITICAL: NO usar overflow-x:hidden en html/body en desktop — rompe el
   scroll-jacking de .pin-services (position:sticky deja de stickear porque
   overflow-x:hidden crea un scroll-container). El clip sí clipa pero NO
   crea scroll-container, así que sticky sigue vivo.
   Soporte: Chrome 90+, Firefox 81+, Safari 16+. Para browsers más viejos,
   .site-main también tiene overflow-x:clip y los hijos absolutos del hero
   están además contenidos por max-width:100vw, así que no hay leak. */
html{overflow-x:clip;width:100%;max-width:100vw}
body{max-width:100vw}

/* Display font: all large headlines, hero, and big numbers */
h1, h2, h3,
.hero h1, .opener-h2, .pin-slide h3, .section-head h2, .testi-head h2,
.stat .num, .marquee, .work-card h3, .cta-final h2, .brand-mark,
.quote .mark, .quote blockquote, .foot-brand h3, .viz-num{
  font-family: var(--font-display);
  font-feature-settings: 'ss01' on, 'ss02' on;
}
/* overflow-x:clip en lugar de :hidden para no romper position:sticky en desktop */
body.fundatica{overflow-x:clip}
body.fundatica a{color:inherit;text-decoration:none}
body.fundatica ul{list-style:none}
body.fundatica img,
body.fundatica svg,
body.fundatica video{display:block;max-width:100%}
body.fundatica button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
body.fundatica ::selection{background:var(--purple);color:#fff}

/* ============================================================
 * Nav
 * ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:14px 40px;display:flex;align-items:center;justify-content:space-between;
  color:#fff;
  background:rgba(11,12,16,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:background .4s var(--bezier), border-color .4s var(--bezier);
}
.nav.scrolled{background:rgba(11,12,16,.85);border-bottom-color:rgba(255,255,255,.09)}
.nav .logo{font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;color:#fff}
.nav .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 14px var(--purple);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.nav .center{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.72)}
.nav .right{display:flex;align-items:center;gap:24px;font-size:14px}
.nav .right .lang{display:inline-flex;align-items:center;gap:4px;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.35)}
.nav .right .lang a{opacity:.5;padding:0 4px;color:#fff;transition:opacity .3s var(--bezier),color .3s var(--bezier)}
.nav .right .lang a:hover{opacity:.85}
.nav .right .lang a.on{opacity:1}
.nav .right .cta{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:#0b0c10;padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  transition:transform .35s var(--bezier),background .35s var(--bezier),color .35s var(--bezier);
}
.nav .right .cta .cta-dot{
  width:7px;height:7px;border-radius:50%;background:#64d3a6;flex-shrink:0;position:relative;
}
.nav .right .cta .cta-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:#64d3a6;
  opacity:.45;animation:pulseOut 1.8s ease-out infinite;
}
.nav .right .cta:hover{background:var(--purple);color:#fff;transform:translateY(-1px)}
.nav .right .cta:hover .cta-dot{background:#fff}
.nav .right .cta:hover .cta-dot::after{background:#fff}

/* Burger (opens WP menu drawer) */
.nav .burger{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);cursor:pointer;
  transition:background .3s var(--bezier),border-color .3s var(--bezier);
  position:relative;
}
.nav .burger:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
.nav .burger .bars{position:relative;width:18px;height:10px}
.nav .burger .bars span{
  position:absolute;left:0;right:0;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .4s var(--bezier),top .3s var(--bezier),opacity .2s var(--bezier);
}
.nav .burger .bars span:first-child{top:1px}
.nav .burger .bars span:last-child{bottom:1px}
.nav .burger[aria-expanded="true"] .bars span:first-child{top:4px;transform:rotate(45deg)}
.nav .burger[aria-expanded="true"] .bars span:last-child{bottom:3.5px;transform:rotate(-45deg)}

/* If no WP menu is assigned, hide the burger (theme still works as a pure landing) */
.nav .burger.is-empty{display:none}

/* ============================================================
 * Menu drawer (fullscreen overlay with WP menu)
 * ============================================================ */
.drawer{
  position:fixed;inset:0;z-index:1100;
  background:rgba(10,11,15,.92);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  color:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--bezier);
  display:flex;flex-direction:column;
}
.drawer[aria-hidden="false"]{opacity:1;pointer-events:auto}
.drawer .drawer-top{
  padding:14px 40px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer .drawer-top .logo{font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;color:#fff}
.drawer .drawer-top .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 14px var(--purple)}
.drawer .drawer-close{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--bezier),border-color .3s var(--bezier);
}
.drawer .drawer-close:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.drawer .drawer-close svg{width:14px;height:14px;stroke:#fff;stroke-width:1.8;fill:none}
.drawer .drawer-body{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px;overflow-y:auto;
}
.drawer-menu{
  display:flex;flex-direction:column;gap:22px;text-align:center;
  max-width:900px;width:100%;
}
.drawer-menu li{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--bezier),transform .6s var(--bezier);
}
.drawer[aria-hidden="false"] .drawer-menu li{opacity:1;transform:translateY(0)}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(1){transition-delay:.08s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(2){transition-delay:.14s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(3){transition-delay:.2s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(4){transition-delay:.26s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(5){transition-delay:.32s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(6){transition-delay:.38s}
.drawer[aria-hidden="false"] .drawer-menu li:nth-child(n+7){transition-delay:.42s}
.drawer-menu a{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(38px,6vw,76px);line-height:1.05;letter-spacing:-.03em;
  color:rgba(255,255,255,.88);display:inline-block;
  background:linear-gradient(90deg,var(--purple),var(--purple));
  background-size:0 1px;background-position:0 95%;background-repeat:no-repeat;
  transition:color .4s var(--bezier),background-size .5s var(--bezier);
}
.drawer-menu a:hover,
.drawer-menu .current-menu-item > a,
.drawer-menu .current_page_item > a{color:#fff;background-size:100% 1px}
.drawer-menu .sub-menu{
  margin-top:10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  padding:0;
}
.drawer-menu .sub-menu a{
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.55);
}
.drawer-menu .sub-menu a:hover{color:#fff}
body.fundatica.drawer-open{overflow:hidden}

/* Extra top-padding on sections so content isn't hidden behind fixed nav */
.hero{padding-top:140px}

@media (max-width:780px){
  .nav{padding:16px 20px}
  .nav .center{display:none}
  .nav .right{gap:14px}
  .nav .right .lang{display:none}
  .drawer .drawer-top{padding:16px 20px}
  .drawer-menu{gap:16px}
  .drawer-menu a{font-size:clamp(30px,8vw,52px)}
}

/* ============================================================
 * HERO (dark) with constellation
 * ============================================================ */
.hero{
  position:relative;min-height:100vh;background:var(--bg-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:120px 40px 80px;
}
.hero .constellation{position:absolute;inset:0;z-index:1}
.hero .ball{
  position:absolute;left:50%;bottom:-60%;transform:translateX(-50%);
  width:110vw;height:110vw;max-width:1600px;max-height:1600px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(122,108,255,.7),rgba(37,174,199,.2) 45%,rgba(0,0,0,0) 65%);
  filter:blur(10px);
  opacity:.6;
  z-index:1;
  animation:orbRise 22s ease-in-out infinite alternate;
}
@keyframes orbRise{from{transform:translate(-50%,0)}to{transform:translate(-50%,-10%)}}
.hero .dots{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero .dots span{
  position:absolute;border-radius:50%;
  box-shadow:0 0 14px currentColor;
  will-change:transform,opacity;
  transition:box-shadow .3s ease;
}
.hero .dots span.burst{box-shadow:0 0 26px currentColor, 0 0 60px currentColor}
.hero-inner{position:relative;z-index:3;max-width:1400px;width:100%;text-align:center}
.hero .hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:40px;
  padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(10px);
}
.hero .hero-badge .pulse-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;
}
.hero .hero-badge .pulse-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:var(--green);opacity:.4;animation:pulseOut 1.8s ease-out infinite;
}
@keyframes pulseOut{
  0%{transform:scale(1);opacity:.4}
  100%{transform:scale(2.2);opacity:0}
}
.hero .hero-badge .sep{opacity:.35}
.hero .hero-badge .mono,.mono,.mono-small{
  font-family:var(--font-mono);
  letter-spacing:.08em;
}

.hero .stack-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:38px;
}
.hero .stack-chip{
  padding:8px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
  transition:background .35s var(--bezier),border-color .35s var(--bezier),color .35s var(--bezier),transform .35s var(--bezier);
  cursor:default;
}
.hero .stack-chip:hover{
  color:#fff;border-color:var(--purple);
  background:rgba(122,108,255,.14);
  transform:translateY(-2px);
}

.mono-small{
  font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.55);
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.mono-small .sep{opacity:.35}
.mono-small .mono-label{
  color:var(--purple);padding:3px 8px;border:1px solid rgba(122,108,255,.4);
  border-radius:4px;letter-spacing:.2em;font-size:10px;
}

/* grid overlay to boost tech feel */
.hero .tech-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 72%);
}

/* network connection lines canvas sits above dots */
.hero .network-canvas{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.hero h1{
  font-weight:500;
  font-size:clamp(48px,9.2vw,160px);
  line-height:.95;letter-spacing:-.03em;
}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--purple),#a997ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:500;
}
.hero .sub{
  margin:44px auto 0;max-width:720px;font-size:clamp(15px,1.2vw,18px);
  color:rgba(255,255,255,.75);line-height:1.6;
}
.hero-footer{
  position:absolute;left:40px;right:40px;bottom:28px;z-index:3;
  display:flex;justify-content:space-between;align-items:end;
  color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.scroll-hint{display:inline-flex;align-items:center;gap:14px}
.scroll-hint .line{width:44px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.scroll-hint .line::after{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollLine 2.2s var(--bezier) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ============================================================
 * Big opener headline (white)
 * ============================================================ */
.opener{
  background:var(--bg-white);color:var(--ink);
  padding:180px 40px 160px;position:relative;overflow:hidden;
}
.opener-decor{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  font-family:var(--font-mono);
  color:rgba(14,15,19,.05);font-weight:500;user-select:none;
}
.opener-decor span{
  position:absolute;line-height:1;
  animation:floatGlyph 16s ease-in-out infinite;
  will-change:transform,opacity;
}
.opener-decor span:nth-child(1){top:12%;left:5%;font-size:78px;animation-delay:0s}
.opener-decor span:nth-child(2){top:18%;right:9%;font-size:56px;animation-delay:2.2s}
.opener-decor span:nth-child(3){top:64%;left:9%;font-size:92px;animation-delay:4.4s}
.opener-decor span:nth-child(4){bottom:14%;right:12%;font-size:64px;animation-delay:6.6s}
.opener-decor span:nth-child(5){top:45%;left:62%;font-size:42px;animation-delay:1.2s}
.opener-decor span:nth-child(6){top:80%;right:42%;font-size:52px;animation-delay:3.2s}
.opener-decor span:nth-child(7){top:8%;right:28%;font-size:48px;animation-delay:5.2s}
.opener-decor span:nth-child(8){bottom:8%;left:42%;font-size:56px;animation-delay:7.8s}
@keyframes floatGlyph{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:.6}
  50%{transform:translate(14px,-12px) rotate(3deg);opacity:1}
}

.opener .container{position:relative;z-index:1}
.opener .tag{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:60px;
}
.opener h2{
  font-weight:500;font-size:clamp(40px,5.6vw,88px);
  line-height:1.12;letter-spacing:-.03em;
  max-width:1200px;
}

.opener-h2 .line{display:block}
.opener-h2 .line:first-child{margin-bottom:0.45em}

.opener-h2 .hi{
  display:inline-block;
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmerWord 5.5s ease-in-out infinite;
}
.opener-h2 .hi.orange{
  background-image:linear-gradient(
    100deg,
    #fea945 0%,#fea945 40%,#ffd99a 48%,#ffffff 50%,#ffd99a 52%,#fea945 60%,#fea945 100%
  );
}
.opener-h2 .hi.cyan{
  background-image:linear-gradient(
    100deg,
    #25aec7 0%,#25aec7 40%,#a7deea 48%,#ffffff 50%,#a7deea 52%,#25aec7 60%,#25aec7 100%
  );
  animation-delay:-2.4s;
}
@keyframes shimmerWord{
  0%,100%{background-position:100% 0}
  50%{background-position:-40% 0}
}

.opener-h2 .cursor{
  /* El cursor debe ocupar la altura de la caja de mayúsculas (cap-height)
     del cuerpo del texto — no la altura total de línea. Antes tenía 0.88em
     y se veía claramente más alto que la línea "negocio."; ahora 0.72em
     coincide con las mayúsculas de Space Grotesk. */
  display:inline-block;
  width:0.07em;height:0.72em;
  background:var(--ink);
  margin-left:0.08em;
  vertical-align:baseline;
  animation:cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Line reveals */
.lines .line-wrap{
  display:block;overflow:hidden;
  padding:0.08em 0 0.22em;margin-bottom:-0.16em;
}
.lines .line-wrap:last-child{margin-bottom:0}
.lines .line-wrap span{display:inline-block;transform:translateY(120%);transition:transform 1.2s var(--bezier);line-height:1.02}
.lines.in .line-wrap span{transform:translateY(0)}
.lines.in .line-wrap:nth-child(2) span{transition-delay:.12s}
.lines.in .line-wrap:nth-child(3) span{transition-delay:.24s}
.lines.in .line-wrap:nth-child(4) span{transition-delay:.36s}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--bezier),transform 1s var(--bezier)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============================================================
 * PIN SERVICES (2-column horizontal track)
 * ============================================================ */
.pin-services{
  position:relative;
  /* 720vh = 600vh de animación horizontal + ~120vh de "dwell" al final
     para dar tiempo a leer la última tarjeta (Apps) antes de que la
     sección se deje de pin-ear y la página siga bajando. El JS mapea
     el progress real a uno clamped en 1 durante ese tramo final. */
  height:720vh;
  background:linear-gradient(180deg,var(--bg-white) 0%,#ece8ff 50%,#dfd4ff 100%);
}
.pin-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:stretch;
}
.pin-stage::before{
  content:'';position:absolute;inset:-20% -30% auto auto;width:90vw;height:90vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,108,255,.35),rgba(37,174,199,.15) 50%,transparent 70%);
  filter:blur(40px);opacity:0;transition:opacity 1s var(--bezier);z-index:0;pointer-events:none;
}
.pin-stage.aura::before{opacity:1}

.pin-track{
  display:flex;height:100%;will-change:transform;position:relative;z-index:2;
}
.pin-card{
  flex:0 0 50vw;height:100%;
  padding:120px 56px 60px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  position:relative;
  border-right:1px solid rgba(14,15,19,.06);
}
.pin-card:last-child{border-right:0}
.pin-card-copy{
  text-align:center;max-width:520px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  position:relative;z-index:2;
}
.pin-card .kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:10px;
}
.pin-card .kicker .d{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.pin-card h3{
  font-weight:400;font-size:clamp(32px,4.2vw,64px);line-height:1;letter-spacing:-.035em;
  color:#2c2340;white-space:nowrap;margin:0;
}
.pin-card h3 .dot-sep{color:var(--c,var(--purple));font-weight:500;margin:0 2px}
.pin-card h3 .accent{color:var(--c,var(--purple));font-weight:500}
.pin-card p{color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:420px}
.pin-card .more{
  margin-top:10px;display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid #0003;padding-bottom:6px;color:var(--ink);
  transition:color .3s var(--bezier),border-color .3s var(--bezier);
}
.pin-card .more:hover{color:var(--c,var(--purple));border-color:var(--c,var(--purple))}
.pin-card .more .o{width:6px;height:6px;border-radius:50%;border:1px solid currentColor}

.pin-card-viz{
  flex:1;width:100%;min-height:0;max-width:520px;margin-top:24px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.pin-card-viz svg{width:100%;height:100%;max-height:340px;overflow:visible}

.pin-card{transition:opacity .6s var(--bezier),filter .6s var(--bezier)}
.pin-card.dim{opacity:.45;filter:saturate(.5)}

/* Nota: el breakpoint mobile unificado es 820px (coincide con JS y con
   el bloque de carrusel de abajo). Antes este bloque estaba en 900px,
   lo que creaba un limbo 821-900 donde las cards ya eran 100vw pero el
   track seguía en scroll-jacking desktop — efecto visible: cards 3-5
   nunca alcanzables. Ahora el cambio a 100vw ocurre junto con el
   carrusel. */
@media (max-width:820px){
  .pin-card{flex:0 0 100vw;padding:100px 24px 40px}
  .pin-services{height:500vh}
}

.pin-nav{
  position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:6px;
}
.pin-nav-item{
  display:flex;align-items:center;gap:14px;
  padding:9px 14px 9px 10px;border-radius:999px;
  font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;border:1px solid transparent;cursor:pointer;color:currentColor;
  transition:background .4s var(--bezier),border-color .4s var(--bezier),padding .3s var(--bezier);
}
.pin-nav-item .dot{
  width:10px;height:10px;border-radius:50%;background:currentColor;
  opacity:.45;transform:scale(.75);
  transition:opacity .4s var(--bezier),transform .4s var(--bezier),box-shadow .4s var(--bezier);
  flex-shrink:0;
}
.pin-nav-item .label{
  opacity:0;max-width:0;overflow:hidden;color:var(--ink);
  transition:opacity .4s var(--bezier),max-width .45s var(--bezier);
  white-space:nowrap;
}
.pin-nav-item:hover{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06)}
.pin-nav-item:hover .dot{opacity:.8;transform:scale(1)}
.pin-nav-item:hover .label{opacity:.65;max-width:140px}
.pin-nav-item.active{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.pin-nav-item.active .dot{opacity:1;transform:scale(1.15);box-shadow:0 0 14px currentColor}
.pin-nav-item.active .label{opacity:1;max-width:140px;color:currentColor;font-weight:600}
.pin-nav-item:nth-child(1){color:var(--pink)}
.pin-nav-item:nth-child(2){color:var(--purple)}
.pin-nav-item:nth-child(3){color:var(--orange)}
.pin-nav-item:nth-child(4){color:var(--green)}
.pin-nav-item:nth-child(5){color:var(--blue)}
.pin-nav-item:nth-child(6){color:var(--gold)}
@media (max-width:900px){
  .pin-nav{left:12px;gap:4px}
  .pin-nav-item{padding:8px}
  .pin-nav-item .label{display:none}
}

.pin-viz-inner{width:100%;height:100%;display:block}

/* viz styles */
.viz-shape{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 8px 20px rgba(226,56,110,.25))}

.viz-window{fill:#fff;stroke:#7a6cff33;stroke-width:1.5;filter:drop-shadow(0 18px 40px rgba(122,108,255,.18))}
.viz-window-bar{fill:#f3f1ff}
.viz-dot-r{fill:#e2386e}.viz-dot-y{fill:#fea945}.viz-dot-g{fill:#64d3a6}
.viz-card{fill:#f7f6ff;stroke:#7a6cff22;stroke-width:1.5;transition:fill .3s var(--bezier),stroke .3s var(--bezier)}
.viz-card.on{fill:#ece8ff;stroke:#7a6cff}
.viz-card .bar1{fill:#7a6cff88}
.viz-card .bar2{fill:#7a6cff33}
.viz-cursor{fill:#0f0f1a;stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 4px 8px #0003);transition:transform .6s var(--bez-out)}

.viz-bar{fill:var(--orange);transition:fill .4s var(--bezier)}
.viz-baseline{stroke:#0f0f1a1a;stroke-width:1}
.viz-num{font-family:var(--font);font-weight:500;font-size:36px;fill:#0f0f1a}
.viz-sub{font-family:var(--font);font-size:11px;fill:#8a8a92;letter-spacing:.15em}
.viz-trend{fill:none;stroke:#fea945;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #fea94555)}
.viz-trend-dot{fill:#fff;stroke:#fea945;stroke-width:2;filter:drop-shadow(0 0 6px #fea945)}

.viz-ai-line{stroke:#64d3a6;stroke-width:1}
.viz-ai-pulse{stroke:#64d3a6;stroke-width:2;filter:drop-shadow(0 0 6px #64d3a6)}
.viz-ai-node{fill:#0e0f13;stroke:#64d3a6;stroke-width:2;transition:fill .2s linear}
.viz-ai-node.hot{fill:#64d3a6;filter:drop-shadow(0 0 10px #64d3a6)}

.viz-wave{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 8px #25aec755)}
.viz-wave.w2{opacity:.55;stroke-width:2}
.viz-wave.w3{opacity:.3;stroke-width:1.5}
.viz-wave-dot{fill:var(--blue);filter:drop-shadow(0 0 8px #25aec7)}

.viz-ide-bg{fill:#0f1520;stroke:rgba(255,255,255,.06);stroke-width:1}
.viz-ide-bar{fill:#1a2232}
.viz-ide-tab{fill:#252d3e}
.viz-ide-txt{font-family:var(--font-mono);font-size:10px;fill:#6b7689}
.viz-ide-dot-r{fill:#e2386e}.viz-ide-dot-y{fill:#fea945}.viz-ide-dot-g{fill:#64d3a6}
.viz-ide-cursor{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold))}
.viz-ide-tok-kw{fill:#c678dd}
.viz-ide-tok-fn{fill:#61afef}
.viz-ide-tok-var{fill:#e6c07b}
.viz-ide-tok-str{fill:#98c379}
.viz-ide-tok-num{fill:#d19a66}
.viz-ide-tok-p{fill:#5a6378}

@media (max-width:900px){
  .pin-slide{padding:120px 24px 60px}
  .pin-nav{left:14px;gap:14px}
  .pin-arc{top:calc(50% + 140px)}
}

/* ============================================================
 * Marquee
 * ============================================================ */
.marquee-section{
  position:relative;padding:50px 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#0e0f13;color:#fff;
}
.marquee{display:flex;gap:50px;white-space:nowrap;animation:marquee 42s linear infinite;
  font-size:clamp(40px,6vw,100px);font-weight:500;letter-spacing:-.03em;line-height:1;
}
.marquee .item{display:inline-flex;align-items:center;gap:50px}
.marquee .item::after{content:'';display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--purple)}
.marquee .outline{-webkit-text-stroke:1px rgba(255,255,255,.8);color:transparent}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
 * Work grid
 * ============================================================ */
.work-section{padding:160px 40px;background:var(--bg-white)}
.container{max-width:1400px;margin:0 auto}
.section-head{
  display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:end;margin-bottom:90px;
}
.section-head .tagnum{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;gap:12px;align-items:center}
.section-head .tagnum .n{color:var(--purple);font-weight:500}
.section-head h2{font-weight:500;font-size:clamp(36px,5vw,76px);line-height:1;letter-spacing:-.03em;margin-top:18px}
.section-head h2 .purple{color:var(--purple)}
.section-head p{color:var(--ink-soft);max-width:520px;font-size:17px;line-height:1.6}
@media(max-width:900px){.section-head{grid-template-columns:1fr;gap:24px;margin-bottom:50px}}

/* ============================================================
 * Work grid — estilo Editorial (A)
 * - Cards crema/papel, sin gradients
 * - Variante .feature (span 6): layout horizontal con thumb a la izquierda
 * - Variante .span-4 (span 4): layout vertical con thumb arriba
 * - Color del proyecto vive en el thumb (sólido) + dot del kicker
 * ============================================================ */
.work-section{padding:160px 40px;background:var(--bg-white)}
.container{max-width:1400px;margin:0 auto}
.section-head{
  display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:end;margin-bottom:90px;
}
.section-head .tagnum{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;gap:12px;align-items:center}
.section-head .tagnum .n{color:var(--purple);font-weight:500}
.section-head h2{font-weight:500;font-size:clamp(36px,5vw,76px);line-height:1;letter-spacing:-.03em;margin-top:18px}
.section-head h2 .purple{color:var(--purple)}
.section-head p{color:var(--ink-soft);max-width:520px;font-size:17px;line-height:1.6}
@media(max-width:900px){.section-head{grid-template-columns:1fr;gap:24px;margin-bottom:50px}}

.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}

.work-card{
  grid-column:span 6;
  position:relative;
  background:#faf8f3;
  border:1px solid #ece7da;
  border-radius:16px;
  overflow:hidden;
  color:#1a1626;
  display:flex;
  isolation:isolate;
  transition:transform .6s var(--bezier), box-shadow .6s var(--bezier), border-color .6s var(--bezier);
}
.work-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(14,15,19,.18);
  border-color:#dcd6c4;
}

/* ---- Thumb (panel cromático) ---- */
.work-card .thumb{
  position:relative;
  background:var(--c1, #2c2340);
  flex-shrink:0;
  overflow:hidden;
}
.work-card .thumb::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0);
  background-size:14px 14px;
  opacity:.55;
  pointer-events:none;
}
.work-card .thumb-num{
  position:absolute;left:18px;bottom:10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:120px;
  line-height:.85;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.92);
  user-select:none;
}
.work-card .thumb-mark{
  position:absolute;right:18px;top:18px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .8s var(--bezier), background .6s var(--bezier);
}
.work-card .thumb-mark::after{
  content:'';position:absolute;inset:14px;border-radius:50%;
  background:rgba(255,255,255,.85);
  transition:transform .8s var(--bezier);
}
.work-card:hover .thumb-mark{transform:rotate(45deg) scale(1.05);background:rgba(255,255,255,.06)}
.work-card:hover .thumb-mark::after{transform:scale(.6)}

/* ---- Content ---- */
.work-card .content{
  flex:1;min-width:0;
  padding:32px 32px 26px;
  display:flex;flex-direction:column;gap:14px;
}
.work-card .meta-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);
}
.work-card .kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:#1a1626;font-weight:500;
}
.work-card .kicker .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c1, var(--purple));flex-shrink:0;
}
.work-card .year{color:#999;font-weight:400}

.work-card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.08;letter-spacing:-.02em;
  color:#1a1626;
  margin:2px 0 0;
}
.work-card .desc{
  font-size:14.5px;line-height:1.6;color:#5a5666;
  max-width:46ch;
  margin:0;
}

.work-card .card-foot{
  margin-top:auto;padding-top:18px;
  border-top:1px solid #ece7da;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;
}
.work-card .stack-list{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#5a5666;
}
.work-card .stack-list .sep{color:#cdc6b8;font-weight:400}
.work-card .go{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#1a1626;font-weight:500;
  transition:gap .35s var(--bezier), color .35s var(--bezier);
}
.work-card:hover .go{gap:12px;color:var(--c1, var(--purple))}
.work-card .go svg{transition:transform .4s var(--bezier)}
.work-card:hover .go svg{transform:translateX(2px)}

/* ---- Variante FEATURE (span 6, layout horizontal) ---- */
.work-card.feature{
  flex-direction:row;
  min-height:280px;
}
.work-card.feature .thumb{
  width:38%;min-width:220px;
}
.work-card.feature .thumb-num{font-size:140px}

/* ---- Variante SPAN-4 (3 cards inferiores, layout vertical) ---- */
.work-card.span-4{
  grid-column:span 4;
  flex-direction:column;
}
.work-card.span-4 .thumb{
  width:100%;height:170px;
}
.work-card.span-4 .thumb-num{font-size:96px;left:16px;bottom:6px}
.work-card.span-4 .thumb-mark{width:38px;height:38px;right:16px;top:16px}
.work-card.span-4 .thumb-mark::after{inset:11px}
.work-card.span-4 .content{padding:24px 26px 22px;gap:12px}
.work-card.span-4 h3{font-size:clamp(20px,1.8vw,24px)}
.work-card.span-4 .desc{font-size:13.5px}

@media(max-width:900px){
  .work-card,
  .work-card.feature,
  .work-card.span-4{
    grid-column:span 12;
    flex-direction:column;
    min-height:0;
  }
  .work-card .thumb,
  .work-card.feature .thumb,
  .work-card.span-4 .thumb{
    width:100%;min-width:0;height:160px;
  }
  .work-card .thumb-num,
  .work-card.feature .thumb-num,
  .work-card.span-4 .thumb-num{font-size:90px;left:16px;bottom:6px}
  .work-card .thumb-mark,
  .work-card.feature .thumb-mark,
  .work-card.span-4 .thumb-mark{width:36px;height:36px;right:16px;top:16px}
  .work-card .thumb-mark::after,
  .work-card.feature .thumb-mark::after,
  .work-card.span-4 .thumb-mark::after{inset:10px}
  .work-card .content,
  .work-card.feature .content,
  .work-card.span-4 .content{padding:22px 22px 20px;gap:10px}
  .work-card h3,
  .work-card.feature h3,
  .work-card.span-4 h3{font-size:21px}
  .work-card .desc,
  .work-card.feature .desc,
  .work-card.span-4 .desc{font-size:13.5px}
  .work-card .card-foot{padding-top:14px;gap:12px}
}

/* ============================================================
 * Stats
 * ============================================================ */
.stats{
  padding:160px 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#f0ecff;position:relative;overflow:hidden;
}
.stats::before{content:'';position:absolute;inset:-10%;background:radial-gradient(600px 400px at 80% 20%,rgba(122,108,255,.35),transparent 60%),radial-gradient(500px 350px at 15% 80%,rgba(37,174,199,.28),transparent 60%);filter:blur(40px)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:60px 40px;position:relative}
.stat{border-top:1px solid #d8d2ff;padding-top:28px;position:relative}
.stat[data-row-label]::before{
  content: attr(data-row-label);
  position:absolute;top:-28px;left:0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--purple);
}
.stat .stat-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#0f1020;color:var(--purple);margin-bottom:22px;
}
.stat .stat-icon svg{width:18px;height:18px}
.stat .num{font-weight:500;font-size:clamp(44px,5.4vw,82px);letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:baseline}
.stat .num .plus{color:var(--purple);font-weight:500}
.stat .num .counter{font-variant-numeric:tabular-nums}
.stat .label{margin-top:18px;color:var(--ink-soft);font-size:14px;line-height:1.45;max-width:220px}
.stat .sublabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px;font-weight:500}
/* Una oración corta de contexto bajo cada número — explica qué significa
   sin agregar peso visual. Color un poco más bajo que .label para que
   visualmente quede en segundo plano. */
.stat .desc{
  margin:14px 0 0;padding-top:14px;
  border-top:1px dashed #d8d2ff;
  color:var(--ink-mute);font-size:12.5px;line-height:1.55;
  max-width:240px;
}
@media(max-width:900px){.stats .grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
 * Testimonials
 * ============================================================ */
.testi{padding:160px 40px;background:#0e0f13;color:#fff;position:relative;overflow:hidden}
.testi::before{content:'';position:absolute;inset:-20%;background:radial-gradient(500px 500px at 50% 50%,rgba(122,108,255,.18),transparent 60%);filter:blur(40px)}

.testi-head{text-align:center;margin-bottom:80px;position:relative;z-index:2}
.testi-head .tag{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:10px;
}
.testi-head .tag .n{color:var(--purple);font-weight:500}
.testi-head h2{
  font-weight:500;font-size:clamp(34px,4.5vw,64px);line-height:1.05;letter-spacing:-.03em;
  margin-top:16px;
}
.testi-head h2 .purple{color:var(--purple)}

.testi-grid{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  position:relative;z-index:2;
}
.testi-card{
  background:#17191f;
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  padding:36px 30px;
  display:flex;flex-direction:column;gap:24px;
  transition:transform .6s var(--bezier),border-color .6s var(--bezier),background .6s var(--bezier);
  position:relative;overflow:hidden;
}
.testi-card::before{
  content:'';position:absolute;inset:auto auto 0 0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,var(--purple)) 50%,transparent);
  opacity:.6;
}
.testi-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.15);background:#1b1d25}
.testi-card .quote-mark{
  font-family:'Space Grotesk',var(--font);
  font-weight:500;font-size:70px;line-height:.6;
  color:var(--accent,var(--purple));opacity:.85;margin-top:-4px;
}
.testi-card blockquote{font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);flex:1}
.testi-card .by{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.testi-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-family:var(--font);font-weight:600;font-size:16px;letter-spacing:-.01em;
  color:#fff;position:relative;
  background:linear-gradient(135deg,var(--c1,#7a6cff),var(--c2,#25aec7));
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 24px color-mix(in oklab, var(--accent, #7a6cff) 30%, transparent);
}
.testi-avatar::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 50%);
  pointer-events:none;
}
.testi-card .who{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.testi-card .who .name{font-size:14px;font-weight:600;color:#fff}
.testi-card .who .role{font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;gap:16px}.testi{padding:100px 20px}}

/* ============================================================
 * CTA final
 * ============================================================ */
.cta-final{position:relative;padding:200px 40px;text-align:center;background:var(--bg-white);overflow:hidden}
.cta-final .aura{position:absolute;left:0;right:0;bottom:-50%;height:90%;background:radial-gradient(closest-side,rgba(122,108,255,.5),transparent 70%);filter:blur(40px);z-index:0}
.cta-final .inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}

.cta-badge{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 22px;border-radius:999px;
  background:linear-gradient(90deg, rgba(100,211,166,.14), rgba(122,108,255,.1));
  border:1px solid rgba(100,211,166,.35);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#1d7f6a;margin-bottom:36px;
  box-shadow:0 2px 20px rgba(100,211,166,.18);
}
.cta-badge strong{color:#0e4d36;font-weight:700;letter-spacing:.04em}
.cta-badge .gift{font-size:15px;line-height:0}
.cta-badge .sep{opacity:.4}
.cta-badge .dot{width:9px;height:9px;border-radius:50%;background:#64d3a6;position:relative}
.cta-badge .dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:#64d3a6;
  opacity:.4;animation:pulseOut 1.8s ease-out infinite;
}

.cta-final h2{font-weight:500;font-size:clamp(48px,7.6vw,130px);line-height:.98;letter-spacing:-.035em;color:var(--ink)}
.cta-final h2 .out{-webkit-text-stroke:1px var(--ink);-webkit-text-fill-color:transparent;color:transparent;font-weight:400}
.cta-final p{color:var(--ink-soft);margin:28px auto 28px;max-width:580px;font-size:17px;line-height:1.55}

.cta-includes{
  margin:0 auto 40px;max-width:800px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  font-size:13px;color:var(--ink-soft);
}
.cta-includes li{display:inline-flex;align-items:center;gap:8px;list-style:none}
.cta-includes li::before{
  content:'';width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/9px 9px no-repeat,
    linear-gradient(135deg,#64d3a6,#1d7f6a);
}

.cta-row{display:flex;flex-direction:column;align-items:center;gap:12px}
.cta-row .cta-note{font-size:12px;color:var(--ink-mute);letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px}
.cta-row .cta-note .sep{opacity:.35}
.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 28px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.04em;transition:transform .35s var(--bezier),background .35s var(--bezier),color .35s var(--bezier)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--purple);transform:translateY(-3px)}
.btn .arrow{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;transition:transform .35s var(--bezier)}
.btn.primary:hover .arrow{transform:translateX(4px) rotate(-45deg)}

.brand-mark{
  font-weight:500;font-size:clamp(80px,20vw,340px);line-height:.85;letter-spacing:-.05em;text-align:center;
  color:transparent;-webkit-text-stroke:1px var(--ink);margin:80px 0 30px;user-select:none;
  transition:color .6s var(--bezier),-webkit-text-stroke-color .6s var(--bezier);
}
.brand-mark:hover{color:var(--purple);-webkit-text-stroke-color:var(--purple)}

/* ============================================================
 * Footer
 * ============================================================ */
body.fundatica footer.site-footer,
body.fundatica .fundatica-footer{background:#0a0b0f;color:#fff;padding:70px 40px 30px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line-dark)}
.foot-top h6{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px}
.foot-top a,.foot-top li{color:rgba(255,255,255,.75);font-size:15px}
.foot-top ul li{padding:6px 0}
.foot-top ul li a{transition:color .3s var(--bezier)}
.foot-top ul li a:hover{color:#fff}
.foot-top ul.foot-menu{margin:0;padding:0;list-style:none}
.foot-top ul.foot-menu li{padding:6px 0}
.foot-brand h3{font-weight:500;font-size:clamp(30px,3vw,44px);letter-spacing:-.02em;margin-bottom:16px}
.foot-brand p{color:rgba(255,255,255,.7);max-width:380px;font-size:15px;line-height:1.55}
.foot-bottom{padding-top:30px;display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.08em}
.foot-bottom .socials{display:flex;gap:20px}
.foot-bottom .socials ul{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.foot-bottom .socials a:hover{color:#fff}
@media(max-width:800px){.foot-top{grid-template-columns:1fr 1fr}.foot-bottom{flex-direction:column;gap:16px}}

/* ============================================================
 * Utilities
 * ============================================================ */
.reveal-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .9s var(--bezier),transform .9s var(--bezier)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.14s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.23s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.41s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.5s}

/* Screen-reader only */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}

/* ============================================================
 * ============  MOBILE LAYER (≤ 820px)  ======================
 * Desktop queda idéntico al original; esto construye una
 * experiencia nativa para mobile:
 *   • Hero: tipografías y paddings cómodos; canvas lines off
 *   • Pin-services: carrusel swipeable con scroll-snap + dots
 *   • Stats, work, footer: layouts verticales / 2col
 *   • Hover states desactivados en touch
 * ============================================================ */
@media (max-width:820px){

  /* ---------- OVERFLOW SAFETY (mobile) ----------
     Tiene que clipar horizontalmente SIN generar scroll-container (si no,
     aparece un scrollbar VERTICAL interno que se ve como una barra blanca
     al costado en teléfonos). `overflow-x:clip` no promueve overflow-y a
     auto, así que es el único que sirve acá. height NO se fija para que
     el body crezca con el contenido y el scroll sea del documento. */
  html, body.fundatica{
    overflow-x:clip;
    overflow-y:visible;
    max-width:100vw;
    width:100%;
    height:auto;
  }
  body.fundatica main#primary,
  body.fundatica #primary,
  body.fundatica .site-main{overflow-x:clip;max-width:100vw}

  /* ---------- NAV ---------- */
  body.fundatica .nav{padding:14px 18px}
  body.fundatica .nav .logo{font-size:18px}
  body.fundatica .nav .logo .dot{width:8px;height:8px}
  body.fundatica .nav .cta{padding:10px 14px;font-size:11px;letter-spacing:.08em}
  body.fundatica .nav .cta-dot{width:6px;height:6px}
  body.fundatica .nav .right{gap:10px}

  /* ---------- HERO ---------- */
  body.fundatica .hero{padding:100px 20px 60px;min-height:92vh}
  body.fundatica .hero .ball{width:74vw;height:74vw;filter:blur(46px)}
  body.fundatica .hero .tech-grid{opacity:.28}
  body.fundatica .hero .network-canvas{display:none}
  body.fundatica .hero-inner{padding:0}
  body.fundatica .hero .hero-badge{
    font-size:10px;padding:8px 14px;gap:8px;
    flex-wrap:wrap;justify-content:center;
  }
  body.fundatica .hero .hero-badge .mono,
  body.fundatica .hero .hero-badge .sep{display:none}
  body.fundatica .hero h1{
    font-size:clamp(42px,12vw,76px);
    line-height:1.02;letter-spacing:-.035em;
  }
  body.fundatica .hero .sub{
    font-size:15px;line-height:1.55;margin-top:22px;padding:0 6px;max-width:560px;
  }
  body.fundatica .hero .stack-row{gap:8px;margin-top:26px;flex-wrap:wrap;justify-content:center}
  body.fundatica .hero .stack-chip{font-size:10px;padding:7px 12px;letter-spacing:.1em}
  body.fundatica .hero-footer{display:none}

  /* ---------- OPENER ---------- */
  body.fundatica .opener{padding:100px 20px}
  body.fundatica .opener h2,
  body.fundatica #opener-h2{
    font-size:clamp(32px,8.6vw,58px);line-height:1.08;letter-spacing:-.02em;
  }

  /* ---------- MARQUEE ---------- */
  body.fundatica .marquee{padding:40px 0}
  body.fundatica .marquee .track{font-size:clamp(32px,10vw,64px)}

  /* ---------- SECTION HEADS ---------- */
  body.fundatica .section-head{padding:0;margin-bottom:40px}
  body.fundatica .section-head h2{font-size:clamp(28px,8vw,46px);line-height:1.08}

  /* ---------- PIN SERVICES → CARRUSEL ---------- */
  body.fundatica .pin-services{
    height:auto;padding:80px 0 40px;
  }
  body.fundatica .pin-stage{
    position:relative;top:auto;height:auto;overflow:visible;display:block;
  }
  body.fundatica .pin-stage::before{
    opacity:.45;inset:-10% -20% auto auto;width:120vw;height:120vw;
  }
  body.fundatica .pin-track{
    display:flex;height:auto;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    touch-action:pan-x pan-y;
    padding:0 7.5vw 10px;
    gap:14px;
    scrollbar-width:none;
  }
  body.fundatica .pin-track::-webkit-scrollbar{display:none}
  body.fundatica .pin-card{
    flex:0 0 85vw;height:auto;min-height:auto;
    scroll-snap-align:center;
    padding:38px 26px 30px;
    border-right:0;
    background:rgba(255,255,255,.6);
    border-radius:22px;
    box-shadow:0 10px 30px rgba(14,15,19,.06);
  }
  body.fundatica .pin-card.dim{opacity:1;filter:none}
  body.fundatica .pin-card-copy{gap:12px;max-width:none}
  body.fundatica .pin-card h3{
    font-size:clamp(28px,7.5vw,40px);white-space:normal;line-height:1.05;
  }
  body.fundatica .pin-card p{font-size:14px}
  body.fundatica .pin-card-viz{margin-top:16px;max-width:none;max-height:220px}
  body.fundatica .pin-card-viz svg{max-height:220px}

  body.fundatica .pin-nav{
    position:relative;left:auto;top:auto;transform:none;
    flex-direction:row;justify-content:center;align-items:center;
    gap:6px;margin:18px auto 0;padding:0 20px;
  }
  body.fundatica .pin-nav-item{padding:8px 6px;background:transparent;border-color:transparent}
  body.fundatica .pin-nav-item .label{display:none}
  body.fundatica .pin-nav-item .dot{width:9px;height:9px;opacity:.35;transform:scale(1)}
  body.fundatica .pin-nav-item.active .dot{transform:scale(1.3);opacity:1}

  /* ---------- WORK ---------- */
  body.fundatica .work-section{padding:80px 20px}
  body.fundatica .work-grid{gap:14px}
  /* (Los detalles del card viven en el bloque .work-card del archivo, que ya tiene su media query mobile.) */

  /* ---------- STATS ---------- */
  body.fundatica .stats{padding:80px 20px}
  body.fundatica .stats .grid{grid-template-columns:repeat(2,1fr);gap:44px 20px}
  body.fundatica .stat{padding-top:24px}
  body.fundatica .stat[data-row-label]::before{top:-22px}
  body.fundatica .stat .num{font-size:clamp(34px,10vw,52px)}
  body.fundatica .stat .label{font-size:12.5px;line-height:1.4;max-width:none;margin-top:12px}
  body.fundatica .stat .stat-icon{width:28px;height:28px;margin-bottom:14px}
  body.fundatica .stat .stat-icon svg{width:14px;height:14px}
  body.fundatica .stat .desc{font-size:12px;line-height:1.5;max-width:none;margin-top:12px;padding-top:12px}

  /* ---------- TESTIMONIOS ---------- */
  body.fundatica .testi{padding:80px 20px}
  body.fundatica .testi-head{margin-bottom:40px}
  body.fundatica .testi-head h2{font-size:clamp(28px,8vw,44px)}
  body.fundatica .testi-card{padding:26px 22px;gap:18px;border-radius:18px}
  body.fundatica .testi-card blockquote{font-size:15px}
  body.fundatica .testi-card .quote-mark{font-size:56px}
  body.fundatica .testi-avatar{width:44px;height:44px;font-size:14px}

  /* ---------- CTA FINAL ---------- */
  body.fundatica .cta-final{padding:90px 20px 70px}
  body.fundatica .cta-final h2{font-size:clamp(38px,12vw,72px);line-height:1.0}
  body.fundatica .cta-final p{font-size:15px;margin:22px auto 22px}
  body.fundatica .cta-badge{
    font-size:10px;padding:9px 16px;gap:10px;margin-bottom:24px;
    flex-wrap:wrap;justify-content:center;text-align:center;
  }
  body.fundatica .cta-badge strong{flex-basis:100%}
  body.fundatica .cta-badge .sep{display:none}
  body.fundatica .cta-includes{gap:8px 14px;font-size:12px}
  body.fundatica .brand-mark{margin:50px 0 20px;font-size:clamp(72px,26vw,160px)}
  body.fundatica .btn{padding:14px 22px;font-size:13px}
  body.fundatica .cta-row .cta-note{font-size:11px;flex-wrap:wrap;justify-content:center;text-align:center}

  /* ---------- FOOTER ---------- */
  body.fundatica footer.site-footer,
  body.fundatica .fundatica-footer{padding:50px 24px 26px}
  body.fundatica .foot-top{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
  body.fundatica .foot-brand h3{font-size:26px;line-height:1.1;margin-bottom:14px}
  body.fundatica .foot-brand p{font-size:14px}
  body.fundatica .foot-top h6{margin-bottom:14px;font-size:11px}
  body.fundatica .foot-top a,
  body.fundatica .foot-top li{font-size:14px}
  body.fundatica .foot-bottom{flex-direction:column;gap:14px;align-items:flex-start;padding-top:22px}
  body.fundatica .foot-bottom .socials,
  body.fundatica .foot-bottom .socials ul{gap:16px;flex-wrap:wrap}

  /* ---------- DRAWER (menu) ---------- */
  body.fundatica .drawer .drawer-top{padding:14px 20px}
  body.fundatica .drawer .drawer-body{padding:40px 24px}
}

/* Desactivar estados :hover en touch (no rompe el desktop) */
@media (hover:none){
  body.fundatica .pin-nav-item:hover{background:transparent;border-color:transparent}
  body.fundatica .pin-nav-item:hover .label{max-width:0;opacity:0}
  body.fundatica .pin-nav-item:hover .dot{opacity:.45;transform:scale(.75)}
  body.fundatica .testi-card:hover{transform:none;border-color:rgba(255,255,255,.07);background:#17191f}
  body.fundatica .work-card:hover{transform:none}
  body.fundatica .btn.primary:hover{transform:none}
  body.fundatica .btn.primary:hover .arrow{transform:none}
}