/* ============================================================
   Diginova · sistema visual
   Tipografía: Avenir (oficial de la marca)
   Paleta: la de diginova.mx — carbón #212121 · cyan #00CCFF ·
   teal #4BC6D2 · gris #777777 · blanco y #F1F1F1
   Estructura y animación: referencia Mivon
   ============================================================ */

@font-face{font-family:'Avenir';font-weight:300;font-style:normal;font-display:swap;
  src:local('Avenir Light'),local('Avenir-Light'),url('../fonts/avenir-light.woff2') format('woff2')}
@font-face{font-family:'Avenir';font-weight:400;font-style:normal;font-display:swap;
  src:local('Avenir Book'),local('Avenir-Book'),url('../fonts/avenir-book.woff2') format('woff2')}
@font-face{font-family:'Avenir';font-weight:400;font-style:italic;font-display:swap;
  src:local('Avenir Book Oblique'),local('Avenir-BookOblique'),url('../fonts/avenir-book-oblique.woff2') format('woff2')}
@font-face{font-family:'Avenir';font-weight:500;font-style:normal;font-display:swap;
  src:local('Avenir Medium'),local('Avenir-Medium'),url('../fonts/avenir-medium.woff2') format('woff2')}
@font-face{font-family:'Avenir';font-weight:600;font-style:normal;font-display:swap;
  src:local('Avenir Heavy'),local('Avenir-Heavy'),url('../fonts/avenir-heavy.woff2') format('woff2')}

:root{
  --paper:#FFFFFF;
  --gris-claro:#F1F1F1;
  --ink:#212121;
  --ink-2:#191919;
  --ink-soft:#555555;
  --ink-dim:#777777;
  --cyan:#00CCFF;
  --teal:#4BC6D2;
  --teal-ink:#1F757D;
  --cyan-ink:#00708C;
  --line:rgba(33,33,33,.13);
  --line-osc:rgba(255,255,255,.16);
  --sidebar-w:268px;
  --ease:cubic-bezier(.19,1,.22,1);
  --sans:'Avenir','Avenir Next',-apple-system,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sin scroll-behavior:smooth a propósito: peleaba con las animaciones
   atadas al scroll y hacía que el sitio se sintiera distinto en cada
   navegador. El desplazamiento suave lo hace home-g-2.js. */
img{max-width:100%;height:auto;display:block}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
b,strong{font-weight:600}
.display{font-weight:600;line-height:1;letter-spacing:-.028em}

/* ============ SIDEBAR ============ */
.sidebar{position:fixed;left:0;top:0;height:100vh;width:var(--sidebar-w);background:var(--ink);
  color:#fff;display:flex;flex-direction:column;padding:34px 30px 26px;z-index:60}
.sidebar::after{content:'';position:absolute;right:0;top:0;width:4px;height:100%;
  background:var(--accent,#00CCFF);transition:background .55s var(--ease)}
.sb-logo img{width:152px}
.sb-tag{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:13px;line-height:1.6}
.sb-nav{margin-top:46px;display:flex;flex-direction:column;gap:1px;flex:1}
.sb-nav a{color:rgba(255,255,255,.72);text-decoration:none;font-weight:500;font-size:15px;
  padding:9px 0;display:flex;align-items:center;gap:12px;position:relative;
  transition:color .25s var(--ease),padding .3s var(--ease)}
.sb-nav a .idx{font-size:10.5px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.35);transition:color .25s}
.sb-nav a:hover,.sb-nav a.active{color:#fff;padding-left:8px}
.sb-nav a.active .idx{color:var(--accent,#00CCFF)}
.sb-nav a.active::before{content:'';position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  width:16px;height:2px;background:var(--accent,#00CCFF);transition:background .55s var(--ease)}
.sb-cta{display:flex;justify-content:center;align-items:center;gap:8px;background:var(--cyan);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;padding:14px 16px;
  border-radius:100px;margin-bottom:16px;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sb-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,204,255,.35)}
.sb-foot{display:flex;flex-direction:column;gap:12px;font-size:11.5px;
  font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.sb-foot .desde{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;
  color:rgba(255,255,255,.38);padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.sb-foot .geo{display:flex;gap:14px}
.sb-foot .geo span{display:inline-flex;align-items:center;gap:5px;cursor:default;opacity:.55;transition:opacity .25s}
.sb-foot .geo span.on{color:#fff;opacity:1}
.sb-foot .geo span:hover{opacity:1}
.sb-foot .geo .bd{display:block;flex-shrink:0;border-radius:2.4px}

.burger{display:none;position:fixed;top:16px;right:16px;z-index:80;width:46px;height:46px;
  border-radius:50%;background:var(--ink);border:0;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1.5px;
  background:#fff;transition:transform .3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ BASE ============ */
main{margin-left:var(--sidebar-w);position:relative}
.section{padding:130px 7vw;position:relative}
.oscuro{background:var(--ink);color:#fff}
.oscuro .eyebrow{color:var(--cyan)}
.eyebrow{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-ink);display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;
  font-size:15px;padding:16px 28px;border-radius:100px;cursor:pointer;border:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(33,33,33,.28)}
.btn-cyan{background:var(--cyan);color:var(--ink)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,204,255,.38)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.oscuro .btn-ghost{border-color:var(--line-osc);color:#fff}
.oscuro .btn-ghost:hover{border-color:#fff}
/* Flatsome imprime en wp_footer su menú móvil y sus ventanas emergentes marcadas
   con .mfp-hide, y quien las esconde es flatsome-main.css, que aquí se desencola.
   Sin esta regla salían al pie de la página como texto suelto ("Login",
   "Newsletter" y un buscador) en todo el sitio. */
.mfp-hide{display:none !important}

/* .metodo tiene fondo oscuro pero no lleva la clase .oscuro, así que el botón
   fantasma salía con texto oscuro sobre oscuro, o sea invisible. */
.metodo .btn-ghost{border-color:var(--line-osc);color:#fff}
.metodo .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ============ 00 HERO ============ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:110px;overflow:hidden}
.hero h1{font-size:clamp(44px,6.6vw,104px);max-width:15ch}
.hero h1 .u{position:relative;display:inline-block;color:var(--cyan)}
.hero h1 .u svg{position:absolute;left:0;bottom:-.1em;width:100%;height:.18em;overflow:visible}
.hero h1 .u svg path{stroke-dasharray:1;stroke-dashoffset:1}
.hero-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:60px;align-items:end;margin-top:52px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{border:1px solid var(--line-osc);border-radius:100px;padding:10px 18px;font-size:14px;
  color:rgba(255,255,255,.8);transition:border-color .3s,color .3s,background .3s}
.chips span:hover{border-color:var(--cyan);color:var(--ink);background:var(--cyan)}
.hero-der{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hero-der p{color:rgba(255,255,255,.7);font-size:16px;max-width:38ch}
.sello{width:132px;height:132px;position:relative;flex-shrink:0}
.sello svg{width:100%;height:100%;animation:gira 22s linear infinite}
.sello .centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sello .centro img{width:52px;height:auto}
@keyframes gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sello svg{animation:none}}
.hero-stats{display:flex;gap:clamp(30px,5vw,70px);margin-top:74px;padding-top:34px;
  border-top:1px solid var(--line-osc);flex-wrap:wrap}
.hero-stats .n{font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1;letter-spacing:-.03em}
.hero-stats .n .suf{color:var(--cyan)}
.hero-stats .l{font-size:13px;color:rgba(255,255,255,.55);margin-top:7px;max-width:22ch}

/* ============ 01 PORTAFOLIO HORIZONTAL ============ */
.trabajos{background:var(--ink-2);color:#fff;padding:0;overflow:hidden}
.trabajos .cab{padding:110px 7vw 0}
.trabajos h2{font-size:clamp(34px,4.4vw,64px)}
.trabajos .cab p{color:rgba(255,255,255,.62);font-size:17px;max-width:44ch;margin-top:18px}
.pista-wrap{height:100vh;display:flex;align-items:center;overflow:hidden}
.pista{display:flex;gap:36px;padding:0 7vw;will-change:transform}
.tarjeta{flex:0 0 auto;width:min(660px,72vw);text-decoration:none;color:#fff;display:block}
.tarjeta .lienzo{background:#242424;border-radius:20px;padding:46px 40px 0;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;height:400px;
  transition:background .45s var(--ease)}
.tarjeta:hover .lienzo{background:#2C2C2C}
.tarjeta .lienzo img{max-height:100%;width:auto;object-fit:contain;object-position:bottom;
  transition:transform .6s var(--ease)}
.tarjeta:hover .lienzo img{transform:translateY(-10px) scale(1.02)}
.tarjeta .pie{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-top:22px;padding-bottom:4px}
.tarjeta .k{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.tarjeta .nm{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:7px;line-height:1.2}
.tarjeta .fl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-osc);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
  transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s}
.tarjeta:hover .fl{background:var(--cyan);color:var(--ink);border-color:var(--cyan);transform:rotate(-45deg)}
.tarjeta-fin{flex:0 0 auto;width:min(420px,64vw);background:var(--cyan);color:var(--ink);
  border-radius:20px;height:400px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-decoration:none;font-weight:600;font-size:24px;
  letter-spacing:-.02em;text-align:center;padding:36px;transition:transform .4s var(--ease)}
.tarjeta-fin:hover{transform:scale(.98)}
.tarjeta-fin small{font-weight:400;font-size:15px;opacity:.72}

/* ============ 02 MANIFIESTO ============ */
.manifiesto{background:var(--paper);text-align:center;padding:150px 8vw}
.manifiesto p{font-size:clamp(24px,3.1vw,46px);font-weight:500;line-height:1.32;
  letter-spacing:-.02em;max-width:20ch;margin:0 auto}
.manifiesto .pal{display:inline-block;opacity:.16;transition:opacity .35s ease}
.manifiesto .pal.on{opacity:1}
.manifiesto em{font-style:normal;color:var(--teal-ink)}

/* ============ 03 CAPACIDADES ============ */
.capacidades{background:var(--gris-claro)}
.cap-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.capacidades h2{font-size:clamp(34px,4.4vw,64px)}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.cap{background:var(--paper);border-radius:16px;padding:30px 26px;min-height:230px;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cap::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.cap:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(33,33,33,.1)}
.cap:hover::after{transform:scaleX(1)}
.cap .no{font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:auto}
.cap h3{font-size:21px;font-weight:600;letter-spacing:-.015em;margin:22px 0 10px;line-height:1.2}
.cap p{font-size:14.5px;color:var(--ink-soft)}
.niveles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.nivel{border-radius:16px;padding:30px 26px;border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.nivel::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.nivel.n1{--c:var(--teal)} .nivel.n2{--c:var(--cyan)} .nivel.n3{--c:var(--ink)}
.nivel .lv{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.nivel h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:14px 0 10px;line-height:1.15}
.nivel p{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px}
.nivel .precio{margin-top:auto;font-weight:600;font-size:15.5px}
.nivel .precio small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-dim);margin-top:5px;line-height:1.55}

/* ============ MARQUEE GIGANTE ============ */
.tira{background:var(--ink);color:#fff;padding:54px 0;overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line-osc);border-bottom:1px solid var(--line-osc)}
.tira .track{display:inline-flex;gap:56px;animation:corre 30s linear infinite;will-change:transform}
.tira b{font-size:clamp(34px,5.4vw,80px);font-weight:600;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42);white-space:nowrap}
.tira b.solido{color:#fff;-webkit-text-stroke:0}
.tira b.cyan{color:var(--cyan);-webkit-text-stroke:0}
@keyframes corre{to{transform:translateX(-50%)}}

/* ============ 04 MÉTODO (titular gigante + tarjetas encima) ============ */
.metodo{background:var(--ink);color:#fff;overflow:hidden;padding-bottom:150px}
.metodo .gigante{font-size:clamp(78px,17vw,270px);font-weight:600;letter-spacing:-.045em;
  line-height:.86;text-align:center;margin:26px 0 -20px;color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.34)}
.metodo .campo{position:relative;min-height:520px;margin-top:30px}
.paso{position:absolute;width:265px;background:#2A2A2A;border-radius:16px;padding:24px 22px;
  border:1px solid var(--line-osc)}
.paso.acento{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.paso .ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;margin-bottom:16px}
.paso.acento .ic{background:rgba(33,33,33,.13)}
.paso h4{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.paso p{font-size:14px;color:rgba(255,255,255,.68);margin-top:8px}
.paso.acento p{color:rgba(33,33,33,.75)}
.paso.p1{left:0;top:0}
.paso.p2{left:26%;top:200px}
.paso.p3{right:26%;top:34px}
.paso.p4{right:0;top:230px}
.metodo-pie{text-align:center;margin-top:20px;position:relative;z-index:3}
.metodo-pie .precio{font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.025em}
.metodo-pie .precio span{color:var(--cyan)}
.metodo-pie p{color:rgba(255,255,255,.66);font-size:16.5px;margin:22px auto 34px;max-width:56ch}
.metodo-pie .abono{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:20px;padding:16px 24px;border-radius:100px;border:1px solid var(--cyan);
  background:rgba(0,204,255,.09);color:#fff;font-size:15.5px;max-width:62ch;text-align:left;line-height:1.5}
.metodo-pie .sello-abono{background:var(--cyan);color:var(--ink);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:100px;white-space:nowrap}
.metodo-pie .incluye{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0 auto 38px;max-width:1000px;text-align:left}
.metodo-pie .incluye li{border-top:2px solid var(--line-osc);padding-top:16px}
.metodo-pie .incluye b{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.metodo-pie .incluye span{font-size:14px;color:rgba(255,255,255,.62);line-height:1.55}

/* ============ 05 RESULTADOS DE ADS ============ */
.ads{background:var(--paper)}
.ads-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.ads h2{font-size:clamp(34px,4.4vw,64px)}
.ads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.res{border:1px solid var(--line);border-radius:16px;padding:30px 26px;background:var(--gris-claro);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.res:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(33,33,33,.09)}
.res .giro{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.res .cifra{font-size:clamp(38px,4.6vw,60px);font-weight:600;letter-spacing:-.035em;
  line-height:1;margin:16px 0 6px;color:var(--teal-ink)}
.res .que{font-weight:600;font-size:16px}
.res .det{font-size:14px;color:var(--ink-soft);margin-top:10px}
.res .plazo{font-size:12.5px;color:var(--ink-dim);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* una sola cifra verificable: la tarjeta ocupa el ancho y se acomoda en horizontal,
   en vez de dejar dos huecos en la rejilla de tres */
.ads-grid-una{grid-template-columns:1fr}
.res-ancha{display:grid;grid-template-columns:minmax(240px,.42fr) 1fr;gap:44px;
  align-items:center;padding:44px 46px}
.res-ancha .cifra{margin:10px 0 0}
.res-ancha .res-texto{border-left:1px solid var(--line);padding-left:44px}
.res-ancha .que{font-size:19px}
.res-ancha .det{font-size:15.5px;max-width:52ch}
.ads-reporte{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;
  margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.ads-reporte h3{font-size:clamp(26px,2.9vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ads-reporte p{color:var(--ink-soft);font-size:16.5px;margin-top:16px}
.ads-reporte ul{list-style:none;margin-top:22px}
.ads-reporte li{font-size:15px;padding:9px 0 9px 20px;position:relative;color:var(--ink-soft)}
.ads-reporte li::before{content:'';position:absolute;left:0;top:18px;width:7px;height:7px;
  border-radius:50%;background:var(--cyan)}
.plataformas{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.plataformas .fila{display:flex;gap:34px;flex-wrap:wrap;align-items:center;margin-top:16px}
.plataformas .fila span{font-size:19px;font-weight:500;color:var(--ink-soft)}
.aviso{margin-top:34px;font-size:13.5px;color:var(--ink-dim);max-width:70ch;line-height:1.7}

/* ============ 06 TRAYECTORIA ============ */
.trayectoria{background:var(--gris-claro)}
.tray-head{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:end}
.trayectoria h2{font-size:clamp(34px,4.4vw,62px)}
.trayectoria h2 em{font-style:italic;font-weight:400;color:var(--teal-ink)}
.trayectoria p.big{font-size:17.5px;color:var(--ink-soft);max-width:520px}
.hitos{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:2px solid var(--line)}
.hito{position:relative;padding-top:30px}
.hito::before{content:'';position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;
  background:var(--cyan);border:3px solid var(--gris-claro)}
.hito .y{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--teal-ink)}
.hito h4{font-weight:600;font-size:19px;margin-top:6px;letter-spacing:-.01em}
.hito p{font-size:15px;color:var(--ink-soft);margin-top:6px}
.lbl{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:18px}
.tray-mapa{margin-top:74px;padding-top:44px;border-top:1px solid var(--line)}
.mapa-head{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.regiones{list-style:none;display:flex;gap:38px;flex-wrap:wrap}
.regiones li{font-weight:500;font-size:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.regiones small{display:block;width:100%;font-weight:400;font-size:13.5px;color:var(--ink-dim);
  padding-left:20px;margin-top:2px}
.pt{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.pt-mx{background:var(--cyan)} .pt-us{background:var(--teal)} .pt-ue{background:var(--teal-ink)}
.pt-ca{background:var(--cyan-ink)}
.mapa-mundo{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.mapa-mundo .m-base{fill:#E1E4E5;stroke:var(--gris-claro);stroke-width:.6}
.mapa-mundo .m-on{stroke:var(--gris-claro);stroke-width:.6}
.mapa-mundo .m-mx{fill:var(--cyan)} .mapa-mundo .m-us{fill:var(--teal)} .mapa-mundo .m-ue{fill:var(--teal-ink)}
.mapa-mundo .m-ca{fill:var(--cyan-ink)}
.mapa-mundo .m-dot{fill:var(--ink)}
.mapa-mundo .m-halo{fill:var(--cyan);opacity:.28;transform-origin:center;transform-box:fill-box;
  animation:latido 2.8s ease-out infinite}
.mapa-mundo .m-pin:nth-of-type(2) .m-halo{animation-delay:.7s}
.mapa-mundo .m-pin:nth-of-type(3) .m-halo{animation-delay:1.4s}
.mapa-mundo .m-pin:nth-of-type(4) .m-halo{animation-delay:2.1s}
.mapa-mundo .m-lbl{fill:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;
  text-anchor:middle;letter-spacing:-.01em;paint-order:stroke;stroke:var(--gris-claro);
  stroke-width:4px;stroke-linejoin:round}
@keyframes latido{0%{transform:scale(.45);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.mapa-mundo .m-halo{animation:none;opacity:.22}}
.tray-band{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.pertenece .orgs{display:flex;gap:26px;flex-wrap:wrap}
.pertenece .orgs span{font-weight:500;font-size:17px;color:var(--ink-soft)}

/* ============ BOLSA ============ */
.bolsa{background:var(--cyan);color:var(--ink);padding:64px 7vw;display:flex;align-items:center;
  justify-content:space-between;gap:32px;flex-wrap:wrap}
.bolsa h3{font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.15}
.bolsa p{color:rgba(33,33,33,.72);font-size:16px;margin-top:10px;max-width:470px}
.bolsa .btn{background:var(--ink);color:#fff}

/* ============ 07 CONTACTO ============ */
.contacto{background:var(--ink);color:#fff;padding-bottom:0}
.cta-wrap{text-align:center;max-width:820px;margin:0 auto}
.contacto h2{font-size:clamp(40px,6.4vw,104px);line-height:.98}
.contacto h2 em{font-style:normal;color:var(--cyan)}
.contacto .sub{color:rgba(255,255,255,.66);font-size:18px;margin:26px auto 36px;max-width:460px}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:96px;
  border-top:1px solid var(--line-osc);padding-top:44px;text-align:left}
.dato .lbl{color:rgba(255,255,255,.45)}
.dato a,.dato span{color:#fff;text-decoration:none;font-size:16.5px;font-weight:500;display:block;
  transition:color .25s}
.dato a:hover{color:var(--cyan)}
.dato small{color:rgba(255,255,255,.5);font-size:14px;font-weight:400;display:block;margin-top:5px}
footer{border-top:1px solid var(--line-osc);margin-top:56px;padding:26px 0 30px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;
  color:rgba(255,255,255,.45)}
footer a{color:rgba(255,255,255,.45);text-decoration:none}
footer a:hover{color:#fff}
footer .legal{display:flex;gap:18px;flex-wrap:wrap}

/* WhatsApp flotante */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.42);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:#fff}

/* reveal — solo se oculta si arrancó el JS de animación */
.has-anim [data-reveal]{opacity:0;transform:translateY(34px)}

@media(max-width:1180px){
  .hero-grid,.tray-head,.mapa-head,.ads-reporte{grid-template-columns:1fr;gap:34px}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .ads-grid,.niveles,.hitos{grid-template-columns:repeat(2,1fr);gap:24px}
  .metodo .campo{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
  .metodo-pie .incluye{grid-template-columns:1fr 1fr}
  .paso{position:static;width:auto}
  .tarjeta .lienzo{height:320px}
}
@media(max-width:820px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-102%);transition:transform .45s var(--ease);width:280px;padding-top:70px}
  body.nav-open .sidebar{transform:translateX(0)}
  .burger{display:flex}
  main{margin-left:0}
  .section{padding:88px 7vw}
  .hero{padding-top:100px}
  .trabajos .cab{padding:88px 7vw 0}
  .pista-wrap{height:auto;padding:44px 0 20px}
  .pista{flex-direction:column;transform:none !important;gap:26px}
  .tarjeta,.tarjeta-fin{width:100%}
  .tarjeta .lienzo{height:250px;padding:26px 22px 0}
  .tarjeta-fin{height:200px}
  .cap-grid,.ads-grid,.niveles,.hitos{grid-template-columns:1fr}
  .res-ancha{grid-template-columns:1fr;gap:0;padding:32px 26px}
  .res-ancha .res-texto{border-left:0;border-top:1px solid var(--line);padding-left:0;
    margin-top:26px;padding-top:26px}
  .metodo .campo{grid-template-columns:1fr}
  .metodo-pie .incluye{grid-template-columns:1fr}
  .metodo-pie .abono{border-radius:16px;flex-direction:column;align-items:flex-start;text-align:left}
  .hitos{border-top:0;border-left:2px solid var(--line);padding-left:24px;margin-top:44px}
  .hito{padding-top:0}
  .hito::before{left:-31px;top:6px;width:10px;height:10px}
  .datos{grid-template-columns:1fr;gap:26px}
  .manifiesto{padding:96px 7vw}
  .manifiesto p{max-width:none}
  .bolsa{padding:52px 7vw}
  .eyebrow{font-size:10px;letter-spacing:.16em}
  .sello{width:100px;height:100px}
}

/* dato pendiente de confirmar: se ve distinto para que no se publique por error */
.res .cifra.pendiente{color:var(--ink-dim);letter-spacing:.06em}
.res .plazo.pendiente{color:#C2410C;font-weight:500}


/* ══ Barra lateral de cristal ═══════════════════════════════════════════════
   El lienzo del efecto ahora cubre toda la ventana por detrás, así que la barra
   deja de ser un bloque sólido y se vuelve traslúcida: el color de abajo se ve
   a través sin que el texto pierda legibilidad. */
#dg-lienzo{position:fixed;inset:0;z-index:0;pointer-events:none;
  transition:opacity .5s ease}
.sidebar{
  /* Vidrio esmerilado de verdad: velo mucho más ligero y desenfoque fuerte,
     para que el color de atrás se vea difuminado a través del panel. */
  background:rgba(16,18,24,.26) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) brightness(.82);
  backdrop-filter:blur(34px) saturate(180%) brightness(.82);
  border-right:1px solid rgba(255,255,255,.10);
  z-index:3;
}
/* Un velo muy tenue detrás del texto para que se lea sobre cualquier color. */
.sidebar::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,10,14,.20),rgba(8,10,14,.04) 45%,rgba(8,10,14,.26));
  pointer-events:none}
/* El hero va oscuro SIEMPRE. Solo se abre cuando el efecto está montado,
   que es cuando hay color detrás que dejar ver. Sin esto, en celular (donde
   el efecto no corre) quedaba transparente sobre blanco y el titular blanco
   se volvía invisible. */
#dg-lienzo{background:var(--ink)}
.hero{position:relative;z-index:1;background:var(--ink)}
body.dg-efecto .hero{background:transparent}

/* ══ El menú y los botones responden al cursor ══════════════════════════════ */
.sidebar nav a{position:relative;transition:color .22s ease,transform .22s cubic-bezier(.16,1,.3,1);
  will-change:transform}
.sidebar nav a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:0;
  background:var(--cyan,#00CCFF);transition:width .3s cubic-bezier(.16,1,.3,1)}
.sidebar nav a:hover{color:#fff;transform:translateX(6px)}
.sidebar nav a:hover::after{width:100%}
.sidebar nav a:hover i,.sidebar nav a:hover .num{color:var(--cyan,#00CCFF)}

.btn,.sidebar .cta,a.btn{transition:transform .25s cubic-bezier(.16,1,.3,1),
  box-shadow .25s ease,filter .25s ease}
.btn:hover,.sidebar .cta:hover,a.btn:hover{transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,204,255,.34);filter:brightness(1.06)}
.btn:active,a.btn:active{transform:translateY(-1px)}

/* El logo y las banderas también reaccionan, para que nada quede muerto. */
.sidebar .marca img,.sidebar .logo img{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sidebar .marca:hover img,.sidebar .logo:hover img{transform:scale(1.04)}

/* ══ Proyectos: el fondo va cambiando de color con el scroll ════════════════
   El tono lo escribe el JavaScript en --tono-scroll; aquí solo se consume. */
.trabajos{background:var(--tono-scroll,var(--ink)) !important;
  transition:background-color .6s linear}

@media(prefers-reduced-motion:reduce){
  .sidebar nav a,.btn,a.btn{transition:none}
  .trabajos{transition:none}
}
@media(max-width:820px){
  /* En celular no se monta el efecto, así que la barra vuelve a ser sólida. */
  .sidebar{background:var(--ink) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sidebar::before{display:none}
}

/* ══ El pie de la barra se cortaba en tableta ═══════════════════════════════
   100vh no descuenta la barra del navegador ni el dock del sistema, así que el
   contenido de abajo (banderas y "Desde 2011") quedaba fuera de la pantalla y
   sin manera de alcanzarlo. */
.sidebar{
  height:100dvh;              /* se ajusta a lo que de verdad se ve */
  overflow-y:auto;            /* si aun así no cabe, se puede desplazar */
  overscroll-behavior:contain;/* el gesto no arrastra la página de atrás */
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{width:0;height:0}

/* En pantallas de poca altura se compacta, para que casi nunca haga falta scroll. */
@media (min-width:821px) and (max-height:900px){
  .sidebar{padding-top:26px;padding-bottom:22px}
  .sb-logo{margin-bottom:22px}
  .sb-nav{gap:2px}
  .sb-nav a{padding-top:9px;padding-bottom:9px}
  .sb-cta{margin-top:18px;padding-top:12px;padding-bottom:12px}
  .sb-foot{gap:9px;margin-top:16px}
}
@media (min-width:821px) and (max-height:760px){
  .sb-nav a{padding-top:7px;padding-bottom:7px;font-size:15px}
  .sb-logo img{max-width:132px}
  .sb-foot .desde{display:none}   /* lo primero que sobra si el espacio aprieta */
}

/* ══ Lente de vidrio que sigue al cursor ════════════════════════════════════
   Mismo material que la barra lateral. Se coloca entre el fluido y el
   contenido: donde pasa, el color se difumina y se oscurece, así que el texto
   de encima se lee sin perder el fondo. */
#dg-lente{
  position:fixed;top:0;left:0;width:260px;height:260px;border-radius:50%;
  z-index:1;pointer-events:none;
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(.62);
  backdrop-filter:blur(26px) saturate(150%) brightness(.62);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 0 60px rgba(0,0,0,.28) inset;
  opacity:0;transition:opacity .35s ease;
  will-change:transform;
}
#dg-lente.ver{opacity:1}
/* En pantallas táctiles no hay cursor al que seguir. */
@media(hover:none),(max-width:820px){ #dg-lente{display:none} }
@media(prefers-reduced-motion:reduce){ #dg-lente{display:none} }
/* Orden de capas: el fluido hasta atrás, el lente encima difuminándolo, y el
   hero con su texto por delante de los dos. El lente nunca toca el texto. */
#dg-lienzo{z-index:0}
#dg-lente{z-index:1}
.hero{z-index:2 !important}
.hero > *{position:relative;z-index:1}