/* ── TOKENS ────────────────────────────────────────────── */
:root{
  --p100:#f3e8ff;--p200:#e9d5ff;--p300:#d8b4fe;--p400:#c084fc;
  --p500:#a855f7;--p600:#9333ea;--p700:#7c3aed;--p800:#6d28d9;--p900:#4c1d95;
  --d950:#030308;--d900:#08080f;--d800:#0f0f1a;--d700:#17172a;--d600:#22223a;
  --l50:#ffffff;--l100:#fafafa;--l200:#f5f3ff;--l300:#ede9fe;
  --t-dark:#0f0f1a;--t-med:#4a4a72;--t-muted:#6b6b9a;
  --pink:#e879f9;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--l50);color:var(--t-dark);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* ── GRAIN ──────────────────────────────────────────────── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px}

/* ── SCROLL BAR ─────────────────────────────────────────── */
#sp{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--p700),var(--pink));z-index:9998;transition:width .1s linear}

/* ── TYPE ───────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,6vw,5.5rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.1rem,2.2vw,1.45rem)}
p{font-size:clamp(.9rem,1.4vw,1rem);line-height:1.75;color:var(--t-med)}

/* ── LAYOUT ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,60px)}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;border-radius:100px;padding:14px 28px;transition:all .3s ease;border:none;white-space:nowrap}
.bp{background:var(--p700);color:#fff}
.bp:hover{background:var(--p600);transform:translateY(-2px);box-shadow:0 12px 32px rgba(124,58,237,.4)}
.bg{color:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.14);background:transparent}
.bg:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.bw{background:#fff;color:var(--p800);font-weight:700}
.bw:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.bow{color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.24);background:transparent}
.bow:hover{color:#fff;border-color:rgba(255,255,255,.46);background:rgba(255,255,255,.05)}

/* ── REVEAL ─────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── SECTION TAG ────────────────────────────────────────── */
.stag{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;display:inline-block}
.sh{margin-bottom:clamp(40px,6vw,72px)}
.shc{text-align:center}
.shc p{max-width:520px;margin:12px auto 0}

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:20px 0;transition:all .4s ease;border-bottom:1px solid transparent}
#nav.s{padding:12px 0;background:rgba(3,3,8,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:rgba(168,85,247,.1)}
.ni{display:flex;align-items:center;justify-content:space-between;position:relative}

/* Logo in nav */
.nav-logo{display:flex;align-items:center;color:#fff}
.nav-logo-img{height:44px;width:auto;display:block}

.nl{display:flex;align-items:center;gap:30px;list-style:none}
.nl a{color:rgba(255,255,255,.58);font-size:.86rem;font-weight:500;transition:color .2s}
.nl a:hover,.nl a.active{color:#fff}
.nc{background:var(--p700)!important;color:#fff!important;padding:9px 20px;border-radius:100px;font-weight:600!important;transition:all .3s!important}
.nc:hover{background:var(--p600)!important;box-shadow:0 8px 24px rgba(124,58,237,.4)}

/* Megamenú de Servicios */
.nl-drop{position:static}
.nl-dt{display:inline-flex;align-items:center;gap:6px}
.nl-dt svg{opacity:.6;transition:transform .25s ease}
.nl-drop:hover .nl-dt{color:#fff}
.nl-drop:hover .nl-dt svg{transform:rotate(180deg)}
.mega{
  position:absolute;top:100%;right:0;padding-top:18px;width:min(880px,calc(100vw - 48px));
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.nl-drop:hover .mega,.mega:hover{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:14px;
  background:rgba(8,8,15,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(168,85,247,.16);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.mega-i{display:flex;gap:11px;padding:12px 13px;border-radius:12px;transition:background .2s ease}
.mega-i:hover{background:rgba(168,85,247,.1)}
.mega-ic{width:32px;height:32px;min-width:32px;border-radius:9px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.18);display:flex;align-items:center;justify-content:center}
.mega-ic svg{width:15px;height:15px;color:var(--p400)}
.mega-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-tx b{font-family:'Montserrat',sans-serif;font-size:.79rem;font-weight:700;color:#fff;line-height:1.25}
.mega-tx em{font-style:normal;font-size:.71rem;color:rgba(255,255,255,.4);line-height:1.35}

.nb{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.nb span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.mn{display:none;flex-direction:column;gap:14px;padding:20px;background:rgba(3,3,8,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);max-height:80vh;overflow-y:auto}
.mn a{color:rgba(255,255,255,.7);font-size:.98rem;font-weight:500;transition:color .2s}
.mn a:hover{color:#fff}
.mn.o{display:flex}
.mn-label{color:var(--p400);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mn a.mn-sub{font-size:.87rem;color:rgba(255,255,255,.55);padding-left:12px;border-left:1px solid rgba(168,85,247,.25)}
.mn a.mn-sub:hover{color:#fff}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero{
  min-height:100vh;background:var(--d950);display:flex;align-items:center;position:relative;overflow:hidden;padding:140px 0 100px;
  background-image:linear-gradient(180deg,rgba(3,3,8,.55),rgba(3,3,8,.88) 70%,var(--d950)),url('/hero-bg.jpg');
  background-size:cover;background-position:center;
}

/* Grid bg */
.hgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.04) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}

/* Bg orbs */
.horb1{position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 68%);top:-200px;right:-100px;pointer-events:none;animation:hob1 16s ease-in-out infinite}
.horb2{position:absolute;width:450px;height:450px;background:radial-gradient(circle,rgba(232,121,249,.1) 0%,transparent 70%);bottom:-60px;left:60px;pointer-events:none;animation:hob2 20s ease-in-out infinite}
@keyframes hob1{0%,100%{transform:translate(0,0)}40%{transform:translate(-20px,18px)}75%{transform:translate(14px,-14px)}}
@keyframes hob2{0%,100%{transform:translate(0,0)}45%{transform:translate(16px,-18px)}}

.hcontent{position:relative;z-index:2;display:flex;justify-content:center}
.hleft{max-width:640px;text-align:center}

/* Eyebrow */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:26px}
.eyl{width:28px;height:1px;background:var(--p400)}
.eyt{color:var(--p400);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

.hero h1{color:#fff;margin-bottom:22px}
.hgrad{background:linear-gradient(120deg,var(--p300),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hsub{color:rgba(255,255,255,.6);font-size:clamp(.95rem,1.7vw,1.1rem);line-height:1.8;max-width:460px;margin:0 auto 40px}
.hacts{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER (used on inner pages like /nosotros)
══════════════════════════════════════════════════════════ */
.phd{background:var(--d950);padding:170px 0 90px;position:relative;overflow:hidden}
.phd .hgrid{position:absolute;inset:0}
.phd .horb1{position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 68%);top:-220px;right:-120px;pointer-events:none}
.phd-in{position:relative;z-index:1;text-align:center}
.phd h1{color:#fff}
.phd p{color:rgba(255,255,255,.46);max-width:560px;margin:16px auto 0}

/* ══════════════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════════════ */
.mqs{background:linear-gradient(90deg,var(--p900),var(--p700));padding:15px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.mqt{display:flex;white-space:nowrap;animation:mq 24s linear infinite}
.mqt:hover{animation-play-state:paused}
.mi{display:inline-flex;align-items:center;gap:22px;padding:0 22px;color:rgba(255,255,255,.75);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-family:'Montserrat',sans-serif}
.md{width:3px;height:3px;background:rgba(255,255,255,.35);border-radius:50%;display:inline-block}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════
   ABOUT / MANIFESTO
══════════════════════════════════════════════════════════ */
.mf{padding:clamp(80px,10vw,140px) 0;background:var(--l50)}
.mfg{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.mfl .stag{color:var(--p700)}
.mfl h2{margin-bottom:18px;color:var(--t-dark)}
.mfl p{margin-bottom:16px}
.mfr{display:flex;flex-direction:column;gap:13px}
.mpt{display:flex;gap:15px;padding:18px 20px;border-radius:14px;background:var(--l200);transition:all .3s ease}
.mpt:hover{box-shadow:0 5px 24px rgba(168,85,247,.07);transform:translateX(4px)}
.mic{width:40px;height:40px;min-width:40px;border-radius:11px;background:linear-gradient(135deg,var(--p700),var(--p500));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mic svg{width:19px;height:19px;color:#fff}
.mpb h4{font-family:'Montserrat',sans-serif;font-size:.9rem;font-weight:700;color:var(--t-dark);margin-bottom:4px}
.mpb p{font-size:.83rem;color:var(--t-muted);line-height:1.6;margin:0}

/* ══════════════════════════════════════════════════════════
   EQUIPO — "El equipo detrás de VERAL" (página /nosotros)
══════════════════════════════════════════════════════════ */
.team{padding:clamp(80px,10vw,140px) 0;background:var(--l50)}
.team .stag{color:var(--p700)}
.team h2{color:var(--t-dark)}
.team .shc p{color:var(--t-muted);max-width:660px}

.teamg{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;position:relative;z-index:1}
.tmcard{flex:0 0 calc(25% - 15px);max-width:calc(25% - 15px);text-align:left;transition:transform .3s ease}
.tmcard:hover{transform:translateY(-4px)}
.tmphoto{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--l200);margin-bottom:16px;position:relative}
.tmphoto img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tmcard:hover .tmphoto img{transform:scale(1.045)}
.tmphoto::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(168,85,247,.12);transition:box-shadow .3s ease;pointer-events:none}
.tmcard:hover .tmphoto::after{box-shadow:inset 0 0 0 1.5px rgba(168,85,247,.4)}
.tmname{font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:700;color:var(--t-dark);margin-bottom:2px}
.tmrole{font-size:.74rem;font-weight:600;color:var(--p700);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.tmbio{font-size:.83rem;color:var(--t-muted);line-height:1.62;margin:0}

/* ══════════════════════════════════════════════════════════
   TRUSTED BRANDS
══════════════════════════════════════════════════════════ */
.trust{padding:clamp(70px,9vw,110px) 0;background:var(--d950);position:relative;overflow:hidden}
.trust .stag{color:var(--p400)}
.trust h2{color:#fff}
.trust .shc p{color:rgba(255,255,255,.4)}
.trustg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;position:relative;z-index:1}
.trustc{
  background:linear-gradient(160deg,var(--p900) 0%,var(--d800) 60%);
  border-radius:20px;padding:30px;position:relative;overflow:hidden;
}
.trustc::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.trustlogo{position:relative;z-index:1;background:#fff;border-radius:14px;padding:26px 28px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.trustlogo span{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2.3rem;color:var(--t-dark);letter-spacing:-.02em}
.trustc h4{position:relative;z-index:1;font-family:'Montserrat',sans-serif;color:#fff;font-size:1.1rem;font-weight:700;margin-bottom:9px}
.trustc p{position:relative;z-index:1;color:rgba(255,255,255,.5);font-size:.85rem;line-height:1.65;margin-bottom:20px}
.trusttags{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.trusttag{color:var(--p300);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.trusttags .td{width:3px;height:3px;background:rgba(216,180,254,.4);border-radius:50%;display:inline-block}

/* ══════════════════════════════════════════════════════════
   SERVICES  — 5 actual services, light bg
══════════════════════════════════════════════════════════ */
.svs{padding:clamp(80px,10vw,140px) 0;background:var(--l200);position:relative;overflow:hidden}
.svs::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(168,85,247,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.svs .stag{color:var(--p700)}
.svs h2{color:var(--t-dark)}
.svs .shc p{color:var(--t-muted)}
.sg5{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}

.svgrp-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p700);opacity:.55;margin:0 0 16px;position:relative;z-index:1}

/* Grid 3×3 de especialidades (Home) */
.sg9{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1}
.sg9 .svc{display:flex;flex-direction:column;padding:32px 26px;min-height:210px}
.sg9 .si{width:56px;height:56px}
.sg9 .si svg{width:23px;height:23px}
.sg9 .svc h3{font-size:1.02rem}
.svc-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--p700);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.svc:hover .svc-go{opacity:1;transform:translateY(0)}
@media(hover:none){.svc-go{opacity:.75;transform:none}}

.svc{
  padding:28px 22px;border-radius:18px;
  border:1px solid transparent;color:inherit;
  background:
    linear-gradient(var(--l50),var(--l50)) padding-box,
    linear-gradient(135deg,rgba(168,85,247,.4),rgba(232,121,249,.12) 45%,rgba(168,85,247,.05) 80%) border-box;
  transition:all .35s ease;text-align:center;position:relative;overflow:hidden;
}
.svc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p700),var(--pink));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.svc:hover::after{transform:scaleX(1)}
.svc:hover{
  background:
    linear-gradient(var(--l50),var(--l50)) padding-box,
    linear-gradient(135deg,var(--p700),var(--pink) 55%,var(--p700)) border-box;
  transform:translateY(-5px);box-shadow:0 16px 48px rgba(168,85,247,.14);
}
.si{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(232,121,249,.08));border:1px solid rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.si svg{width:22px;height:22px;color:var(--p700)}
.svc h3{font-size:1rem;font-weight:700;color:var(--t-dark);margin-bottom:10px;line-height:1.25}
.svc p{font-size:.82rem;color:var(--t-muted);line-height:1.62;margin:0}

/* ══════════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════════ */
.sts{padding:64px 0;background:var(--p800);position:relative;overflow:hidden}
.sts::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:42px 42px}
.sgd{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.sti{text-align:center;padding:20px;position:relative}
.sti:not(:last-child)::after{content:'';position:absolute;right:0;top:25%;height:50%;width:1px;background:rgba(255,255,255,.14)}
.stv{font-family:'Montserrat',sans-serif;font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1;margin-bottom:7px}
.stv em{color:var(--pink);font-style:normal}
.stl{color:rgba(255,255,255,.52);font-size:.84rem;font-weight:500}

/* ══════════════════════════════════════════════════════════
   METHODOLOGY — Nuestro Método (5 steps)
══════════════════════════════════════════════════════════ */
.met{padding:clamp(80px,10vw,140px) 0;background:var(--l50)}
.met .stag{color:var(--p700)}
.met h2{color:var(--t-dark)}
.met .shc p{color:var(--t-muted)}

.msteps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.mline{position:absolute;top:35px;left:calc(10% + 35px);right:calc(10% + 35px);height:1px;background:rgba(168,85,247,.18);z-index:0}
.mline-fill{position:absolute;top:35px;left:calc(10% + 35px);right:calc(10% + 35px);height:1.5px;background:linear-gradient(90deg,var(--p700),var(--pink));z-index:0;transform-origin:left}
.mline-fill.rv{opacity:1;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .15s}
.mline-fill.rv.in{transform:scaleX(1)}

.mst{text-align:center;position:relative;z-index:1}
.msn{
  width:70px;height:70px;border-radius:50%;
  border:2px solid var(--p400);background:var(--l50);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:800;color:var(--p700);
  box-shadow:0 0 0 8px var(--l50);transition:all .3s ease;
}
.mst:hover .msn{background:var(--p700);color:#fff;border-color:var(--p700);box-shadow:0 0 0 8px var(--l50),0 8px 24px rgba(124,58,237,.3)}
.mst h4{font-family:'Montserrat',sans-serif;font-size:.96rem;font-weight:700;color:var(--t-dark);margin-bottom:9px}
.mst p{font-size:.82rem;color:var(--t-muted);line-height:1.65;margin:0}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════ */
.tst{padding:clamp(80px,10vw,140px) 0;background:var(--d950);position:relative;overflow:hidden}
.torb{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(232,121,249,.07) 0%,transparent 70%);bottom:-100px;right:-80px;pointer-events:none}
.tst .stag{color:var(--p400)}
.tst h2{color:#fff}
.tst .shc p{color:rgba(255,255,255,.38)}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1}
.tc{padding:28px;border-radius:18px;background:var(--d800);border:1px solid rgba(255,255,255,.06);transition:all .3s ease;display:flex;flex-direction:column}
.tc:hover{border-color:rgba(168,85,247,.2);transform:translateY(-4px);box-shadow:0 18px 48px rgba(0,0,0,.4)}
.tcs{color:var(--pink);font-size:.9rem;margin-bottom:14px;letter-spacing:2px}
.tcq{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.78;font-style:italic;margin-bottom:20px;flex:1}
.ta{display:flex;align-items:center;gap:11px}
.tav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0}
.tan{display:block;color:#fff;font-size:.84rem;font-weight:600}
.tar{color:rgba(255,255,255,.35);font-size:.74rem}

/* ══════════════════════════════════════════════════════════
   CREADORES — "Voces con las que hemos creado"
══════════════════════════════════════════════════════════ */
.creators{padding:clamp(80px,10vw,140px) 0;background:var(--d950);position:relative;overflow:hidden}
.creators .stag{color:var(--p400)}
.creators h2{color:#fff}
.creators .shc p{color:rgba(255,255,255,.4)}

.creatorsg{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;z-index:1}
.ccard{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--d800);cursor:default}
.ccard[href]{cursor:pointer}
.ccard::before{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .35s ease;z-index:2;pointer-events:none}
.ccard:hover::before{box-shadow:inset 0 0 0 1.5px rgba(168,85,247,.55)}
.ccov-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ccard:hover .ccov-img{transform:scale(1.06)}
.ccov{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 15px 15px;display:flex;flex-direction:column;gap:3px;background:linear-gradient(180deg,transparent 0%,rgba(3,3,8,.5) 45%,rgba(3,3,8,.95) 100%)}
.ccov-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.94rem;color:#fff;letter-spacing:-.01em}
.ccov-handle{font-size:.76rem;font-weight:600;color:var(--p400);opacity:.6;transition:opacity .3s ease}
@media(hover:hover){.ccard:hover .ccov-handle{opacity:1}}
@media(hover:none){.ccov-handle{opacity:1}}
.ccov-cat{font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px}

.ccl{text-align:center;margin-top:clamp(48px,7vw,72px);position:relative;z-index:1}
.ccl-eyebrow{color:rgba(255,255,255,.32);font-size:.8rem;margin-bottom:6px}
.ccl-sub{color:rgba(255,255,255,.56);font-size:1rem;margin-bottom:28px}

/* ══════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════ */
.cta{padding:clamp(80px,10vw,140px) 0;background:linear-gradient(140deg,var(--p900) 0%,var(--p700) 55%,#1a0a3e 100%);text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px}
.ctai{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:16px}
.ctad{color:rgba(255,255,255,.7);max-width:440px;margin:0 auto 36px;font-size:1.04rem}
.ctabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ctan{margin-top:16px;color:rgba(255,255,255,.24);font-size:.75rem}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer{background:var(--d950);border-top:1px solid rgba(255,255,255,.06);padding:58px 0 32px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.fb .nav-logo{display:block;margin-bottom:14px}
.fb>p{color:rgba(255,255,255,.28);font-size:.84rem;line-height:1.72;max-width:245px}
.fso{display:flex;gap:9px;margin-top:20px}
.fsb{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:.8rem;font-weight:700;font-family:'Montserrat',sans-serif;transition:all .2s}
.fsb:hover{background:var(--p700);color:#fff}
.fc h5{font-family:'Montserrat',sans-serif;color:#fff;font-size:.84rem;font-weight:700;margin-bottom:16px;letter-spacing:.02em}
.fl{list-style:none;display:flex;flex-direction:column;gap:10px}
.fl a{color:rgba(255,255,255,.33);font-size:.82rem;transition:color .2s}
.fl a:hover{color:rgba(255,255,255,.74)}
.fbot{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.fbot p{color:rgba(255,255,255,.18);font-size:.76rem}
.fleg{display:flex;gap:18px}
.fleg a{color:rgba(255,255,255,.28);font-size:.76rem;transition:color .2s}
.fleg a:hover{color:rgba(255,255,255,.6)}

/* ══════════════════════════════════════════════════════════
   LEGAL PAGES (Términos / Privacidad)
══════════════════════════════════════════════════════════ */
.legal{padding:clamp(50px,7vw,90px) 0 clamp(80px,10vw,120px)}
.legalw{max-width:760px;margin:0 auto}
.legalw>p.upd{color:var(--t-muted);font-size:.82rem;margin-bottom:48px}
.legalw h2{font-size:1.4rem;color:var(--t-dark);margin:44px 0 14px}
.legalw h2:first-of-type{margin-top:0}
.legalw p{margin-bottom:14px}
.legalw ul{margin:0 0 14px 20px}
.legalw li{font-size:clamp(.9rem,1.4vw,1rem);line-height:1.75;color:var(--t-med);margin-bottom:8px}
.legalw strong{color:var(--t-dark)}
.legalw a{color:var(--p700);text-decoration:underline;text-underline-offset:2px}

/* ══════════════════════════════════════════════════════════
   PÁGINAS DE SERVICIO (/servicios/*)
══════════════════════════════════════════════════════════ */
.sp-hero{padding:150px 0 80px}
.sp-hero .phd-in{text-align:left}
.sp-hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1}
.sp-hero .phd-in>p{margin:18px 0 0;max-width:620px}
.sp-crumb{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:18px}
.sp-crumb a{color:rgba(255,255,255,.55);transition:color .2s}
.sp-crumb a:hover{color:#fff}
.sp-crumb span{color:rgba(255,255,255,.2)}
.sp-hnote{font-size:.78rem!important;color:var(--p400)!important;margin-top:12px!important}
.sp-hacts{margin-top:32px;justify-content:flex-start}

.sp-banner{background:linear-gradient(90deg,var(--p900),var(--p700));padding:clamp(28px,4vw,44px) 0;text-align:center}
.sp-banner p{font-family:'Montserrat',sans-serif;font-size:clamp(1.05rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.25}

.sp-quote{background:var(--d950);padding:clamp(50px,7vw,88px) 0;text-align:center}
.sp-quote p{font-family:'Montserrat',sans-serif;font-size:clamp(1.15rem,2.6vw,2rem);font-weight:800;color:#fff;line-height:1.3;letter-spacing:-.02em;max-width:900px;margin:0 auto}

.sp-light{padding:clamp(64px,8vw,110px) 0;background:var(--l50)}
.sp-light .stag{color:var(--p700)}
.sp-light h2{color:var(--t-dark)}
.sp-caps{padding:clamp(64px,8vw,110px) 0;background:var(--l200);position:relative;overflow:hidden}
.sp-caps::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(168,85,247,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.sp-caps .stag{color:var(--p700)}
.sp-caps h2{color:var(--t-dark)}
.sp-caps .wrap{position:relative;z-index:1}
.sp-dark{padding:clamp(64px,8vw,110px) 0;background:var(--d950);position:relative;overflow:hidden}
.sp-dark .stag{color:var(--p400)}
.sp-dark h2{color:#fff}
.sp-dark .sp-intro,.sp-dark .sp-note{color:rgba(255,255,255,.45)}

.sp-w{max-width:780px}
.sp-block{margin-bottom:44px}
.sp-block:last-child{margin-bottom:0}
.sp-block h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.sp-block p{margin-bottom:14px}
.sp-block p:last-child{margin-bottom:0}
.sp-lead{font-family:'Montserrat',sans-serif;font-size:clamp(1.05rem,2vw,1.35rem)!important;font-weight:700;color:var(--p700)!important;line-height:1.4;margin-bottom:20px!important}
.sp-intro{color:var(--t-muted);max-width:640px;margin-top:10px}
.sp-note{font-size:.85rem;color:var(--t-muted);margin-top:22px;max-width:640px}

/* Tarjetas de capacidad / glosario */
.capg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:1}
.capc{
  display:block;padding:22px 20px;border-radius:16px;background:var(--l50);
  border:1px solid rgba(168,85,247,.14);transition:all .3s ease;color:inherit;
}
.capc:hover{border-color:rgba(168,85,247,.4);transform:translateY(-3px);box-shadow:0 12px 34px rgba(168,85,247,.1)}
.cap-en{display:block;font-family:'Montserrat',sans-serif;font-size:.92rem;font-weight:800;color:var(--t-dark);letter-spacing:-.01em}
.cap-es{display:block;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--p700);margin:3px 0 10px}
.capc p{font-size:.83rem;color:var(--t-muted);line-height:1.62;margin:0}
.cap-link{display:inline-block;margin-top:12px;font-size:.74rem;font-weight:700;color:var(--p700)}
.sp-dark .capc{background:var(--d800);border-color:rgba(255,255,255,.07)}
.sp-dark .capc:hover{border-color:rgba(168,85,247,.35)}
.sp-dark .cap-en{color:#fff}
.sp-dark .cap-es{color:var(--p400)}
.sp-dark .capc p{color:rgba(255,255,255,.45)}
.sp-dark .cap-link{color:var(--p400)}

/* Monitoreo en vivo */
.monitor{margin-top:8px;padding:24px 26px;border-radius:16px;background:var(--l200);border:1px solid rgba(168,85,247,.14)}
.monitor h4{font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p700);margin-bottom:14px}
.monitor-l{display:flex;flex-wrap:wrap;gap:8px}
.monitor-l span{font-size:.78rem;font-weight:600;color:var(--t-med);background:var(--l50);border:1px solid rgba(168,85,247,.16);padding:7px 14px;border-radius:100px}

/* Checklist */
.checkl{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;margin:0}
.checkl li{position:relative;padding-left:26px;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.6)}
.checkl li::before{content:'';position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--p500),var(--pink))}

/* Fases (antes / durante / después) */
.fasesg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fase{padding:28px 24px;border-radius:18px;background:var(--l200);border:1px solid rgba(168,85,247,.12)}
.fase-n{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--p700);margin-bottom:12px}
.fase h4{font-family:'Montserrat',sans-serif;font-size:1.02rem;font-weight:700;color:var(--t-dark);margin-bottom:8px}
.fase p{font-size:.85rem;color:var(--t-muted);line-height:1.65;margin:0}

.sts-foot{position:relative;z-index:1;text-align:center;margin-top:32px;color:rgba(255,255,255,.55);font-size:.88rem}

/* Servicios relacionados */
.relg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:1}
.relc{display:flex;gap:13px;padding:20px;border-radius:16px;background:var(--d800);border:1px solid rgba(255,255,255,.07);transition:all .3s ease}
.relc:hover{border-color:rgba(168,85,247,.4);transform:translateY(-3px)}
.relc-ic{width:38px;height:38px;min-width:38px;border-radius:11px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.2);display:flex;align-items:center;justify-content:center}
.relc-ic svg{width:17px;height:17px;color:var(--p400)}
.relc-tx{display:flex;flex-direction:column;gap:3px}
.relc-tx b{font-family:'Montserrat',sans-serif;font-size:.87rem;font-weight:700;color:#fff;line-height:1.3}
.relc-tx em{font-style:normal;font-size:.76rem;color:rgba(255,255,255,.4);line-height:1.4}

/* ══════════════════════════════════════════════════════════
   INSIGHTS
══════════════════════════════════════════════════════════ */
.insg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1}
.insg-3{margin-top:8px}
.insc{
  display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:var(--l50);
  border:1px solid rgba(168,85,247,.14);transition:all .35s ease;min-height:190px;
}
.insc:hover{border-color:rgba(168,85,247,.42);transform:translateY(-4px);box-shadow:0 16px 44px rgba(168,85,247,.1)}
.insc-cat{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p700);margin-bottom:12px}
.insc h4{font-family:'Montserrat',sans-serif;font-size:1.02rem;font-weight:700;color:var(--t-dark);line-height:1.3;margin-bottom:9px}
.insc p{font-size:.83rem;color:var(--t-muted);line-height:1.6;margin:0}
.insc-go{margin-top:auto;padding-top:16px;font-size:.76rem;font-weight:700;color:var(--p700)}
.insc-d{background:var(--d800);border-color:rgba(255,255,255,.07)}
.insc-d h4{color:#fff}
.insc-d p{color:rgba(255,255,255,.45)}
.insc-d .insc-cat,.insc-d .insc-go{color:var(--p400)}
.ins-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.ins-cats span{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--p700);background:var(--l200);border:1px solid rgba(168,85,247,.16);padding:7px 15px;border-radius:100px}

.art-hero .phd-in{text-align:left;max-width:800px}
.art-hero .phd-in>p{margin:16px 0 0;max-width:640px}
.art h2{font-family:'Montserrat',sans-serif;font-size:1.25rem;color:var(--t-dark);margin:38px 0 12px}
.art h2:first-of-type{margin-top:0}
.art p{margin-bottom:16px;font-size:1rem;line-height:1.8}
.art-svc{max-width:760px;margin:56px auto 0;padding-top:32px;border-top:1px solid rgba(168,85,247,.14)}
.art-svc-l{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p700);margin-bottom:14px}
.art-svc .relc{background:var(--l200);border-color:rgba(168,85,247,.16)}
.art-svc .relc-tx b{color:var(--t-dark)}
.art-svc .relc-tx em{color:var(--t-muted)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .sg5{grid-template-columns:repeat(3,1fr)}
  .msteps{grid-template-columns:repeat(3,1fr)}
  .mline,.mline-fill{display:none}
  .creatorsg{grid-template-columns:repeat(3,1fr)}
  .tmcard{flex:0 0 calc(33.333% - 14px);max-width:calc(33.333% - 14px)}
  .mega-in{grid-template-columns:repeat(2,1fr)}
  .capg,.relg,.insg{grid-template-columns:repeat(2,1fr)}
  .nl{gap:22px}
}
@media(max-width:860px){
  .nl{display:none!important}
  .nb{display:flex}
  .mfg{grid-template-columns:1fr;gap:40px}
  .tg{grid-template-columns:1fr}
  .trustg{grid-template-columns:1fr}
  .sgd{grid-template-columns:repeat(2,1fr)}
  .sgd .sti:nth-child(2)::after{display:none}
  .ft{grid-template-columns:1fr 1fr;gap:32px}
  .creatorsg{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:0 18px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .creatorsg::-webkit-scrollbar{display:none}
  .ccard{flex:0 0 62%;scroll-snap-align:start}
  .tmcard{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}
  .sg9{grid-template-columns:repeat(2,1fr)}
  .fasesg{grid-template-columns:1fr}
  .checkl{grid-template-columns:1fr}
  .sp-hero{padding:130px 0 66px}
}
@media(max-width:600px){
  .sg5{grid-template-columns:repeat(2,1fr)}
  .msteps{grid-template-columns:repeat(2,1fr)}
  .sgd{grid-template-columns:repeat(2,1fr)}
  .hacts{flex-direction:column;align-items:flex-start}
  .ft{grid-template-columns:1fr;gap:28px}
  .fbot{flex-direction:column;text-align:center}
  .ccard{flex:0 0 74%}
  .tmcard{flex:0 0 100%;max-width:100%}
  .capg,.relg,.insg{grid-template-columns:1fr}
  .sp-hacts{width:100%}
  .sp-hacts .btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  .sg5{grid-template-columns:1fr}
  .sg9{grid-template-columns:1fr}
  .msteps{grid-template-columns:1fr}
  .sgd{grid-template-columns:1fr}
  .sgd .sti::after{display:none!important}
  .ccard{flex:0 0 82%}
}