/* ============================================================
   INDEX3 — Cornier Agency · Concept 03 "Monochrome Editorial"
   Hoja completamente aislada: todo vive bajo .index3-page
   y todas las clases usan el prefijo .i3-
   ============================================================ */

/* ---------- Tokens ---------- */
.index3-page{
  --i3-graphite:#2C2C2C;
  --i3-steel:#858581;
  --i3-ash:#E8E8E5;
  --i3-white:#FFFFFF;
  --i3-black:#0B0B0B;
  --i3-lime:#D4FF3A;
  --i3-border:rgba(133,133,129,.35);
  --i3-border-soft:rgba(133,133,129,.2);
  --i3-metal:linear-gradient(135deg,#d8d8d5 0%,#f5f5f3 18%,#b5b5b2 38%,#e9e9e6 58%,#a8a8a5 78%,#dcdcd9 100%);
  --i3-metal-dark:linear-gradient(135deg,#46464b 0%,#2a2a2e 24%,#3e3e43 46%,#232327 68%,#38383d 88%,#2c2c30 100%);

  --i3-font-display:'Space Grotesk',ui-sans-serif,sans-serif;
  --i3-font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --i3-font-mono:'JetBrains Mono',ui-monospace,monospace;

  --i3-fs-display:clamp(2.6rem,8vw,7.5rem);
  --i3-fs-h2:clamp(2rem,5vw,4.6rem);
  --i3-fs-h3:clamp(1.3rem,2.3vw,1.9rem);
  --i3-fs-stat:clamp(2.9rem,5.5vw,5.6rem);
  --i3-fs-lead:clamp(.98rem,1.3vw,1.15rem);
  --i3-fs-body:.95rem;
  --i3-fs-micro:.6875rem;

  --i3-pad-x:clamp(1.1rem,4vw,3.5rem);
  --i3-sec-pad:clamp(4.5rem,9vw,8.5rem);
  --i3-max:1520px;
  --i3-nav-h:72px;
  --i3-frame-gap:clamp(8px,1.2vw,20px);

  --i3-r-sm:12px;
  --i3-r-md:20px;
  --i3-r-lg:28px;
  --i3-r-pill:999px;

  --i3-ease:cubic-bezier(.22,.9,.28,1);
  --i3-dur:.6s;
}

/* ---------- Reset scoped ---------- */
.index3-page{
  margin:0;
  background:var(--i3-ash);
  color:var(--i3-graphite);
  font-family:var(--i3-font-body);
  font-size:var(--i3-fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.index3-page *,
.index3-page *::before,
.index3-page *::after{box-sizing:border-box;}
.index3-page h1,.index3-page h2,.index3-page h3,.index3-page h4,
.index3-page p,.index3-page ul,.index3-page figure{margin:0;padding:0;}
.index3-page ul{list-style:none;}
.index3-page a{color:inherit;text-decoration:none;}
.index3-page img{max-width:100%;display:block;}
.index3-page button{font:inherit;background:none;border:0;cursor:pointer;color:inherit;padding:0;}
.index3-page :focus-visible{outline:2px solid var(--i3-lime);outline-offset:3px;border-radius:4px;}

/* ---------- Utilidades ---------- */
.index3-page .i3-label{
  font-family:var(--i3-font-mono);
  font-size:var(--i3-fs-micro);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--i3-steel);
}
.index3-page .i3-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--i3-lime);
  margin-right:.55em;
  vertical-align:middle;
  flex:none;
}
/* Segunda palabra de los titulares: cromado metálico */
.index3-page .i3-outline{
  color:transparent;
  background:linear-gradient(108deg,#26262c 0%,#b0b0ad 24%,#3c3c38 44%,#e2e2df 62%,#2e2e2a 80%,#77777c 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* Botones pill */
.index3-page .i3-btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--i3-font-display);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:.78em 1.5em;
  border-radius:var(--i3-r-pill);
  border:1px solid transparent;
  transition:background var(--i3-dur) var(--i3-ease),color var(--i3-dur) var(--i3-ease),
             border-color var(--i3-dur) var(--i3-ease),transform var(--i3-dur) var(--i3-ease);
  white-space:nowrap;
}
.index3-page .i3-btn:hover{transform:translateY(-2px);}
.index3-page .i3-btn--fill{background:var(--i3-graphite);color:var(--i3-white);}
.index3-page .i3-btn--fill:hover{background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-btn--fill:hover .i3-dot{background:var(--i3-black);}
.index3-page .i3-btn--lime{background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-btn--lime .i3-dot{background:var(--i3-black);}
.index3-page .i3-btn--lime:hover{background:var(--i3-graphite);color:var(--i3-white);}
.index3-page .i3-btn--lime:hover .i3-dot{background:var(--i3-lime);}
.index3-page .i3-btn--ghost{border-color:var(--i3-graphite);color:var(--i3-graphite);}
.index3-page .i3-btn--ghost:hover{background:var(--i3-graphite);color:var(--i3-white);}
.index3-page .i3-btn--ghost-light{border-color:rgba(255,255,255,.45);color:var(--i3-white);}
.index3-page .i3-btn--ghost-light:hover{border-color:var(--i3-lime);color:var(--i3-lime);}

/* Cabecera de sección */
.index3-page .i3-sec{
  padding:var(--i3-sec-pad) var(--i3-pad-x);
  max-width:var(--i3-max);
  margin-inline:auto;
}
.index3-page .i3-sec-head{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.index3-page .i3-sec-title{
  font-family:var(--i3-font-display);
  font-size:var(--i3-fs-h2);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--i3-graphite);
}

/* Reveal (progressive enhancement: solo se oculta con JS + motion ok) */
@media (prefers-reduced-motion: no-preference){
  .index3-page.i3-js .i3-reveal{
    opacity:0;
    transform:translateY(24px) rotate(var(--i3-rot,0deg));
    transition:opacity .8s var(--i3-ease),transform .8s var(--i3-ease);
  }
  .index3-page.i3-js .i3-reveal[data-d="1"]{transition-delay:.1s;}
  .index3-page.i3-js .i3-reveal[data-d="2"]{transition-delay:.2s;}
  .index3-page.i3-js .i3-reveal[data-d="3"]{transition-delay:.3s;}
  .index3-page.i3-js .i3-reveal[data-d="4"]{transition-delay:.4s;}
  .index3-page.i3-js .i3-reveal.is-in{opacity:1;transform:translateY(0) rotate(var(--i3-rot,0deg));}
}

/* ============================================================
   INTRO — portada tal cual de la original.
   Cambios de color: letras plateadas, punto y anillo en LIMA,
   fade final al ash del concepto.
   ============================================================ */
html[data-i3-intro] .intro{display:flex}
html[data-i3-intro] .index3-page{overflow:hidden}
.index3-page .intro{
  position:fixed;inset:0;z-index:10001;
  background:#000;
  color:var(--i3-ash);
  display:none;
  align-items:center;justify-content:center;
  overflow:hidden;pointer-events:auto;
  perspective:1200px;
}
.index3-page .intro.is-showing{will-change:clip-path}
.index3-page .intro.is-showing{display:flex}
.index3-page .intro__stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;align-items:center;justify-content:center;
  transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);
}
.index3-page .intro.is-showing .intro__stage{will-change:transform,opacity}
.index3-page .intro__word-outline{
  position:relative;
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(6rem,22vw,20rem);
  line-height:.85;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(230,230,227,.6);
  text-transform:uppercase;
  opacity:1;
  white-space:nowrap;
  user-select:none;
  display:inline-flex;
  align-items:baseline;
  overflow:visible;
  transition:-webkit-text-stroke-color .6s ease, filter .6s ease;
}
.index3-page .intro__wC{
  display:inline-block;
  opacity:0;
}
.index3-page .intro.is-showing .intro__wC{will-change:transform,opacity}
.index3-page .intro__wRest{
  display:inline-block;
  opacity:0;
  overflow:visible;
}
.index3-page .intro__ltr{display:inline-block}
.index3-page .intro.is-showing .intro__ltr{will-change:transform,opacity}
.index3-page .intro.is-showing .intro__wRest{will-change:transform,opacity}
.index3-page .intro__word-outline.is-shining{
  -webkit-text-stroke-color:rgba(255,255,255,.95);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 0 14px rgba(212,255,58,.3));
}
.index3-page .intro__dot{
  display:inline-block;
  width:.18em;height:.18em;
  border-radius:50%;
  border:2px solid var(--i3-lime);
  margin-left:.05em;
  vertical-align:.05em;
  opacity:0;
  box-shadow:0 0 0 rgba(212,255,58,0);
  transition:box-shadow .3s ease;
  backface-visibility:hidden;
}
.index3-page .intro.is-showing .intro__dot{will-change:transform,opacity}
.index3-page .intro__zoomdot{
  position:absolute;
  border-radius:50%;
  background:transparent;
  border:3px solid var(--i3-lime);
  box-shadow:
    0 0 20px rgba(212,255,58,.55),
    0 0 46px rgba(212,255,58,.3),
    inset 0 0 14px rgba(212,255,58,.4);
  display:none;
  z-index:4;
  pointer-events:none;
  will-change:transform;
}/* Tierra en dos capas con parallax (curvatura) dentro de un wrapper
   enmascarado hacia el limbo — la ilusion de esfera *//* (segunda capa eliminada: se mezclaba y ensuciaba la esfera) *//* Sombreado esferico encima de todo */@keyframes i3-globe-spin{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.index3-page .intro__ev{
  position:absolute;
  z-index:1;
  font-family:var(--i3-font-display);
  font-weight:700;
  font-size:clamp(4rem,16vw,14.5rem);
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(105deg,#9d9d9a 0%,#fbfbf9 22%,#c2c2bf 42%,#ffffff 62%,#a3a3a0 82%,#e8e8e5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:0;
  transform:scale(.94);
  transition:opacity .6s ease .35s,transform .7s ease .35s;
}.index3-page .intro__fade{
  position:absolute;inset:0;
  background:var(--i3-ash);
  opacity:0;pointer-events:none;
  z-index:3;
}
.index3-page .intro.is-done{pointer-events:none}
.index3-page.intro-lock{overflow:hidden;height:100vh}
@media (prefers-reduced-motion:reduce){
  .index3-page .intro{display:none}
}


/* ============================================================
   TICKER — franja superior fija (como el original)
   ============================================================ */
.index3-page .i3-ticker{
  position:fixed;
  inset:0 0 auto 0;
  z-index:110;
  height:34px;
  background:var(--i3-black);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.index3-page .i3-ticker__track{
  display:flex;
  align-items:center;
  gap:2.2rem;
  width:max-content;
  height:100%;
  animation:i3-marquee 30s linear infinite;
}
.index3-page .i3-ticker__track span{
  font-family:var(--i3-font-mono);
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
}
.index3-page .i3-ticker__track span em{
  font-style:normal;
  color:var(--i3-lime);
}
.index3-page .i3-ticker__track i{
  font-style:normal;
  font-size:.55rem;
  color:var(--i3-lime);
}
/* Con ticker presente, la nav baja y el hero deja hueco */
.index3-page:has(.i3-ticker) .i3-nav{top:34px;}
.index3-page:has(.i3-ticker) .i3-hero{
  padding-top:calc(var(--i3-nav-h) + 34px + var(--i3-frame-gap));
}
.index3-page:has(.i3-ticker) .i3-menu{
  padding-top:calc(var(--i3-nav-h) + 34px + 2rem);
}
@media (prefers-reduced-motion: reduce){
  .index3-page .i3-ticker__track{animation:none;}
}

/* ============================================================
   NAV — píldora flotante centrada (estilo del original)
   ============================================================ */
.index3-page .i3-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding:1rem var(--i3-pad-x);
  pointer-events:none;
  background:none;
  border:0;
  transition:none;
}
.index3-page .i3-nav__inner{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:1.6rem;
  height:auto;
  max-width:none;
  padding:.55rem .55rem .55rem 1.4rem;
  background:rgba(232,232,229,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--i3-border);
  border-radius:999px;
  transition:box-shadow .4s var(--i3-ease),background .4s var(--i3-ease);
}
.index3-page .i3-nav.is-scrolled .i3-nav__inner{
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 34px rgba(11,11,11,.1);
}
.index3-page .i3-nav__brand{
  font-family:var(--i3-font-display);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--i3-black);
  display:inline-flex;
  align-items:center;
  gap:0;
  padding-right:1rem;
  border-right:1px solid var(--i3-border);
}
.index3-page .i3-nav__brand::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--i3-lime);
  box-shadow:0 0 8px var(--i3-lime);
  margin-right:.55rem;
  display:inline-block;
}
.index3-page .i3-nav__brand-tag{display:none;}
.index3-page .i3-nav__menu{
  display:flex;
  gap:1.4rem;
}
.index3-page .i3-nav__menu a{
  position:relative;
  padding:.3rem 0;
  font-family:var(--i3-font-mono);
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--i3-graphite);
  display:inline-flex;
  align-items:center;
}
.index3-page .i3-nav__menu a::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:1px;
  background:var(--i3-black);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.index3-page .i3-nav__menu a:hover::after,
.index3-page .i3-nav__menu a.is-active::after{transform:scaleX(1);transform-origin:left;}
.index3-page .i3-nav__menu .i3-nav__dot{display:none;}
.index3-page .i3-nav__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
}
.index3-page .i3-nav__soc{display:flex;gap:.35rem;}
.index3-page .i3-nav__soc a{
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--i3-border);
  border-radius:50%;
  color:var(--i3-graphite);
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-nav__soc a:hover{
  background:var(--i3-black);
  border-color:var(--i3-black);
  color:var(--i3-lime);
}
.index3-page .i3-nav__cta{
  padding:.65em 1.1em;
  font-family:var(--i3-font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.index3-page .i3-nav__burger{
  display:none;
  width:40px;height:40px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.index3-page .i3-nav__burger span{
  display:block;
  width:22px;height:1.5px;
  background:var(--i3-black);
  transition:transform .35s var(--i3-ease),background .35s var(--i3-ease);
}
.index3-page .i3-nav.is-open .i3-nav__inner{background:var(--i3-black);border-color:rgba(255,255,255,.15);}
.index3-page .i3-nav.is-open .i3-nav__brand{color:var(--i3-white);border-color:rgba(255,255,255,.2);}
.index3-page .i3-nav.is-open .i3-nav__burger span{background:var(--i3-white);}
.index3-page .i3-nav.is-open .i3-nav__burger span:first-child{transform:translateY(3.75px) rotate(45deg);}
.index3-page .i3-nav.is-open .i3-nav__burger span:last-child{transform:translateY(-3.75px) rotate(-45deg);}

/* Menú móvil */
.index3-page .i3-menu{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--i3-black);
  color:var(--i3-white);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:calc(var(--i3-nav-h) + 2rem) var(--i3-pad-x) 2.5rem;
  transform:translateY(-102%);
  visibility:hidden;
  transition:transform .55s var(--i3-ease),visibility 0s .55s;
}
.index3-page .i3-menu.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .55s var(--i3-ease),visibility 0s;
}
.index3-page .i3-menu__links{display:flex;flex-direction:column;}
.index3-page .i3-menu__links a{
  font-family:var(--i3-font-display);
  font-size:clamp(2.2rem,9vw,3.4rem);
  font-weight:500;
  letter-spacing:-.02em;
  padding:.35em 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:baseline;
  gap:.6em;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--i3-ease),transform .5s var(--i3-ease);
}
.index3-page .i3-menu.is-open .i3-menu__links a{opacity:1;transform:none;}
.index3-page .i3-menu.is-open .i3-menu__links a:nth-child(1){transition-delay:.15s;}
.index3-page .i3-menu.is-open .i3-menu__links a:nth-child(2){transition-delay:.24s;}
.index3-page .i3-menu.is-open .i3-menu__links a:nth-child(3){transition-delay:.33s;}
.index3-page .i3-menu__num{
  font-family:var(--i3-font-mono);
  font-size:.7rem;
  color:var(--i3-lime);
}
.index3-page .i3-menu__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
}
.index3-page .i3-menu__soc{display:flex;gap:1.2rem;}
.index3-page .i3-menu__soc a{
  font-family:var(--i3-font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--i3-steel);
}
.index3-page .i3-menu__soc a:hover{color:var(--i3-lime);}
.index3-page.i3-lock{overflow:hidden;}

/* ============================================================
   HERO
   ============================================================ */
.index3-page .i3-hero{
  padding:calc(var(--i3-nav-h) + var(--i3-frame-gap)) var(--i3-frame-gap) 0;
}
.index3-page .i3-hero__frame{
  position:relative;
  min-height:calc(100svh - var(--i3-nav-h) - var(--i3-frame-gap)*2);
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-lg);
  display:flex;
  flex-direction:column;
  padding:clamp(1.2rem,2.5vw,2.2rem) clamp(1.2rem,3vw,3rem) 0;
}
.index3-page .i3-hero__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--i3-border-soft);
}
.index3-page .i3-hero__body{
  flex:1;
  display:grid;
  grid-template-columns:1fr minmax(250px,320px);
  align-items:center;
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2rem,4vw,3.5rem) 0 clamp(4rem,7vw,6rem);
}
.index3-page .i3-hero__title{
  font-family:var(--i3-font-display);
  font-size:var(--i3-fs-display);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--i3-graphite);
}
.index3-page .i3-hero__row{display:block;}
.index3-page .i3-hero__row--indent{margin-left:clamp(1rem,6vw,5.5rem);}
.index3-page .i3-hero__row--end{margin-left:clamp(2rem,10vw,9rem);}
.index3-page .i3-hero__amp{
  color:transparent;
  -webkit-text-stroke:2px var(--i3-graphite);
  font-weight:400;
}
/* "culture.": pill lima con el texto en cromado claro */
.index3-page .i3-hero__title .i3-lime{
  font-style:normal;
  background:var(--i3-lime);
  padding:0 .14em;
  border-radius:.14em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.index3-page .i3-chrome-light{
  background:linear-gradient(105deg,#5c5c58 0%,#f2f2f0 22%,#8a8a86 42%,#ffffff 62%,#6b6b67 82%,#d5d5d2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.index3-page .i3-hero__side{
  align-self:end;
  padding-bottom:clamp(.5rem,1.5vw,1.5rem);
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  /* Acercado al centro del hero (shift por márgenes: el reveal
     anima transform y lo pisaría) */
  margin-left:calc(-1 * clamp(3.5rem,12vw,12.5rem));
  margin-right:clamp(3.5rem,12vw,12.5rem);
}
@media (max-width:1024px){
  .index3-page .i3-hero__side{margin-left:0;margin-right:0;}
}
.index3-page .i3-hero__lead{
  font-size:var(--i3-fs-lead);
  line-height:1.65;
  color:var(--i3-graphite);
  text-align:left;
}
.index3-page .i3-hero__ctas{display:flex;flex-wrap:wrap;gap:.7rem;}

/* Tarjetas flotantes */
.index3-page .i3-card{position:absolute;z-index:3;}
.index3-page .i3-card--photo{
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-sm);
  padding:.55rem .55rem .7rem;
  box-shadow:0 24px 60px rgba(11,11,11,.14);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.index3-page .i3-card--photo img{
  border-radius:calc(var(--i3-r-sm) - 5px);
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .6s var(--i3-ease);
}
.index3-page .i3-card--photo:hover img{filter:grayscale(.25);}
.index3-page .i3-card--a{
  width:clamp(160px,16vw,220px);
  left:clamp(1rem,3vw,3rem);
  bottom:-70px;
  --i3-rot:-3.5deg;
  transform:rotate(var(--i3-rot));
}
.index3-page .i3-card--b{
  width:clamp(120px,10.5vw,155px);
  right:clamp(.8rem,3vw,3rem);
  top:clamp(3.5rem,6vw,4.5rem);
  --i3-rot:2.5deg;
  transform:rotate(var(--i3-rot));
}
.index3-page .i3-card--stat{
  left:clamp(1rem,45%,48%);
  bottom:clamp(7.5rem,15vh,10rem);
  background:var(--i3-black);
  color:var(--i3-white);
  border-radius:var(--i3-r-md);
  padding:1rem 1.3rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  box-shadow:0 24px 60px rgba(11,11,11,.22);
  --i3-rot:-1.5deg;
  transform:rotate(var(--i3-rot));
}
.index3-page .i3-card--stat strong{
  font-family:var(--i3-font-display);
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--i3-lime);
  line-height:1;
}
.index3-page .i3-card--stat .i3-label{color:rgba(255,255,255,.55);font-size:.55rem;}
.index3-page .i3-card__pulse{
  position:absolute;
  top:.9rem;right:.9rem;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--i3-lime);
  animation:i3-pulse 2.2s ease-out infinite;
}
@keyframes i3-pulse{
  0%{box-shadow:0 0 0 0 rgba(212,255,58,.6);}
  70%{box-shadow:0 0 0 9px rgba(212,255,58,0);}
  100%{box-shadow:0 0 0 0 rgba(212,255,58,0);}
}

/* Marquesina del hero */
.index3-page .i3-hero__strip{
  margin-inline:calc(clamp(1.2rem,3vw,3rem) * -1);
  border-top:1px solid var(--i3-border-soft);
  overflow:hidden;
  border-radius:0 0 var(--i3-r-lg) var(--i3-r-lg);
}
.index3-page .i3-hero__strip-track{
  display:flex;
  align-items:center;
  gap:2.2rem;
  width:max-content;
  padding:.85rem 0;
  animation:i3-marquee 28s linear infinite;
}
.index3-page .i3-hero__strip-track span{
  font-family:var(--i3-font-mono);
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--i3-steel);
  white-space:nowrap;
}
.index3-page .i3-hero__strip-track i{
  font-style:normal;
  font-size:.55rem;
  color:var(--i3-lime);
  -webkit-text-stroke:.5px var(--i3-graphite);
}
@keyframes i3-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================================================
   LOGOS — banda verde estilo original
   ============================================================ */
.index3-page .i3-logos{
  margin-top:clamp(4rem,8vw,7rem);
  padding:3rem 0;
  background:var(--i3-lime);
  overflow:hidden;
}
.index3-page .i3-logos__track{
  display:flex;
  align-items:center;
  gap:5rem;
  width:max-content;
  animation:i3-marquee 45s linear infinite;
  will-change:transform;
}
.index3-page .i3-logos__track img{
  height:clamp(44px,5vw,70px);
  width:auto;
  max-width:200px;
  object-fit:contain;
  filter:brightness(0);
  opacity:.85;
  transition:opacity .3s ease,transform .35s cubic-bezier(.7,0,.2,1),filter .3s ease;
}
/* El resaltado lo gestiona JS con elementFromPoint (.is-hot) porque los
   logos se mueven bajo un cursor quieto y :hover no se recalcula */
.index3-page .i3-logos__track img.is-hot{
  opacity:1;
  filter:none;
  transform:scale(1.08);
}

/* ============================================================
   NUMBERS — mosaico plano con líneas finas y cifras cromadas
   ============================================================ */
.index3-page .i3-numbers__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:rgba(11,11,11,.5);
  border:1px solid rgba(11,11,11,.5);
  align-items:stretch;
}
.index3-page .i3-num{
  background:var(--i3-ash);
  border:0;
  border-radius:0;
  padding:clamp(1.4rem,2.6vw,2.4rem);
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  min-height:clamp(240px,23vw,320px);
  transition:background .4s var(--i3-ease);
}
.index3-page .i3-num:hover{background:var(--i3-white);}
.index3-page .i3-num--a{grid-column:1/8;grid-row:1;background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-num--b{grid-column:8/13;grid-row:1;}
.index3-page .i3-num--c{grid-column:1/5;grid-row:2;}
.index3-page .i3-num--d{grid-column:5/9;grid-row:2;background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-num--e{grid-column:9/13;grid-row:2;}
.index3-page .i3-num__label{
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.index3-page .i3-num--a .i3-num__label{color:rgba(11,11,11,.55);}
.index3-page .i3-num--d .i3-num__label{color:rgba(11,11,11,.55);}
/* Cifras: cromado metálico */
.index3-page .i3-num__val{
  font-family:var(--i3-font-display);
  font-size:clamp(4rem,7.5vw,7.5rem);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.04em;
  background:linear-gradient(108deg,#26262c 0%,#b0b0ad 24%,#3c3c38 44%,#e2e2df 62%,#2e2e2a 80%,#77777c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.index3-page .i3-num--a .i3-num__val{
  font-size:clamp(5rem,9.5vw,9.5rem);
  background:none;
  -webkit-text-fill-color:var(--i3-black);
  color:var(--i3-black);
}
.index3-page .i3-num--a .i3-num__val em{
  background:linear-gradient(108deg,#26262c 0%,#b0b0ad 24%,#3c3c38 44%,#e2e2df 62%,#2e2e2a 80%,#77777c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  -webkit-text-stroke:0;
}
.index3-page .i3-num--d .i3-num__val{
  background:none;
  -webkit-text-fill-color:var(--i3-black);
  color:var(--i3-black);
}
/* El sufijo (+ / M+) en lima, como acento */
.index3-page .i3-num__val em{
  font-style:normal;
  font-size:.5em;
  font-weight:400;
  vertical-align:.42em;
  letter-spacing:0;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:var(--i3-lime);
  color:var(--i3-lime);
  -webkit-text-stroke:1px rgba(11,11,11,.55);
}
.index3-page .i3-num--d .i3-num__val em{
  -webkit-text-fill-color:var(--i3-black);
  color:var(--i3-black);
  -webkit-text-stroke:0;
}
.index3-page .i3-num__desc{
  margin-top:auto;
  font-size:.82rem;
  line-height:1.6;
  color:var(--i3-steel);
  max-width:38ch;
}
.index3-page .i3-num--a .i3-num__desc{color:rgba(11,11,11,.65);}
.index3-page .i3-num--d .i3-num__desc{color:rgba(11,11,11,.65);}
/* Hover: la celda se vuelve METALICA (overlay con fade = fluido) */
.index3-page .i3-num{position:relative;}
.index3-page .i3-num::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--i3-metal);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.index3-page .i3-num > *{position:relative;z-index:1;}
.index3-page .i3-num:hover::after{opacity:1;}
.index3-page .i3-num__label,
.index3-page .i3-num__desc{transition:color .35s ease;}
.index3-page .i3-num__val,
.index3-page .i3-num__val em{transition:-webkit-text-fill-color .35s ease,color .35s ease;}
.index3-page .i3-num:hover .i3-num__val{background:none;-webkit-text-fill-color:var(--i3-black);color:var(--i3-black);}
.index3-page .i3-num:hover .i3-num__val em{background:none;-webkit-text-fill-color:var(--i3-black);color:var(--i3-black);-webkit-text-stroke:0;}
.index3-page .i3-num:hover .i3-num__label{color:rgba(11,11,11,.55);}
.index3-page .i3-num:hover .i3-num__desc{color:rgba(11,11,11,.65);}

/* ============================================================
   TWO SIDES
   ============================================================ */
.index3-page .i3-split__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,1.6vw,1.4rem);
  align-items:start;
}
.index3-page .i3-panel{
  border-radius:var(--i3-r-lg);
  padding:clamp(1.6rem,3vw,2.6rem);
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.index3-page .i3-panel--dark{
  background:var(--i3-metal);
  color:var(--i3-black);
}
.index3-page .i3-panel--light{
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  margin-top:clamp(1.5rem,4vw,3.5rem);
}
.index3-page .i3-panel__tag{display:flex;align-items:center;}
.index3-page .i3-panel--dark .i3-panel__tag{color:rgba(11,11,11,.6);}
.index3-page .i3-panel__h{
  font-family:var(--i3-font-display);
  font-size:var(--i3-fs-h3);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  max-width:18ch;
}
.index3-page .i3-panel__h em{font-style:normal;}
.index3-page .i3-panel__h .i3-lime{background:var(--i3-lime);color:var(--i3-black);padding:0 .14em;border-radius:.14em;}
.index3-page .i3-panel__h .i3-lime-dark{
  background:var(--i3-lime);
  color:var(--i3-black);
  padding:0 .14em;
  border-radius:.14em;
}
.index3-page .i3-panel__p{
  font-size:.9rem;
  line-height:1.7;
  color:var(--i3-steel);
  max-width:46ch;
}
.index3-page .i3-panel--dark .i3-panel__p{color:rgba(11,11,11,.65);}

/* Tarjetas de servicio — visuales, descripción como overlay al hover/tap */
.index3-page .i3-svcgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.index3-page .i3-svccard{
  position:relative;
  min-height:clamp(140px,11vw,175px);
  border:1px solid rgba(11,11,11,.3);
  border-radius:var(--i3-r-sm);
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-svccard:hover{transform:translateY(-3px);border-color:var(--i3-black);}
.index3-page .i3-panel--light .i3-svccard{border-color:var(--i3-border);}
.index3-page .i3-panel--light .i3-svccard:hover{border-color:var(--i3-black);}
.index3-page .i3-svccard__num{
  position:absolute;
  top:.85rem;left:1.1rem;
  font-family:var(--i3-font-mono);
  font-size:.6rem;
  color:var(--i3-steel);
}
.index3-page .i3-svccard__plus{
  position:absolute;
  top:.7rem;right:1rem;
  font-family:var(--i3-font-display);
  font-size:1.05rem;
  font-weight:500;
  color:var(--i3-black);
  transition:transform .35s var(--i3-ease);
}
.index3-page .i3-panel--light .i3-svccard__plus{color:var(--i3-graphite);}
.index3-page .i3-svccard:hover .i3-svccard__plus{transform:rotate(45deg);}
.index3-page .i3-svccard__t{
  font-family:var(--i3-font-display);
  font-size:clamp(.95rem,1.2vw,1.08rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
}
.index3-page .i3-svccard__d{
  position:absolute;
  inset:0;
  padding:1rem 1.1rem;
  font-family:var(--i3-font-body);
  font-size:.72rem;
  font-weight:400;
  line-height:1.55;
  text-align:left;
  overflow:auto;
  background:var(--i3-lime);
  color:var(--i3-black);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s var(--i3-ease),transform .35s var(--i3-ease);
}
.index3-page .i3-panel--light .i3-svccard__d{
  background:var(--i3-black);
  color:rgba(255,255,255,.85);
}
.index3-page .i3-svccard:hover .i3-svccard__d,
.index3-page .i3-svccard:focus-visible .i3-svccard__d,
.index3-page .i3-svccard.is-open .i3-svccard__d{opacity:1;transform:none;}
.index3-page .i3-panel__cta{align-self:flex-start;margin-top:.4rem;}

/* "See more": el panel crece y las tarjetas entran desde los lados */
.index3-page .i3-panel__more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .8s var(--i3-ease),opacity .5s var(--i3-ease);
}
.index3-page .i3-panel.is-open .i3-panel__more{max-height:1400px;opacity:1;}
.index3-page .i3-panel__more .i3-svccard{opacity:0;transition:transform .6s var(--i3-ease),opacity .6s var(--i3-ease),border-color .3s var(--i3-ease);}
.index3-page .i3-panel__more .i3-svccard:nth-child(odd){transform:translateX(-46px);}
.index3-page .i3-panel__more .i3-svccard:nth-child(even){transform:translateX(46px);}
.index3-page .i3-panel.is-open .i3-panel__more .i3-svccard{transform:none;opacity:1;}
.index3-page .i3-panel.is-open .i3-panel__more .i3-svccard:nth-child(1){transition-delay:.25s;}
.index3-page .i3-panel.is-open .i3-panel__more .i3-svccard:nth-child(2){transition-delay:.35s;}
.index3-page .i3-panel.is-open .i3-panel__more .i3-svccard:nth-child(3){transition-delay:.45s;}
.index3-page .i3-panel.is-open .i3-panel__more .i3-svccard:nth-child(4){transition-delay:.55s;}
.index3-page .i3-panel__more .i3-svcgrid{padding-top:1.2rem;}
.index3-page .i3-panel .i3-service__toggle{align-self:flex-start;}

/* Botón "See more" propio: etiqueta mono + círculo con "+" que rota a × */
.index3-page .i3-service__toggle{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  background:none;
  border:0;
  padding:.4em 0;
  font-family:var(--i3-font-mono);
  font-size:.68rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--i3-graphite);
  cursor:pointer;
  transition:color .3s var(--i3-ease);
}
.index3-page .i3-service__toggle-plus{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--i3-border);
  border-radius:50%;
  font-family:var(--i3-font-display);
  font-size:1rem;
  line-height:1;
  transition:transform .45s var(--i3-ease),background .3s var(--i3-ease),border-color .3s var(--i3-ease),color .3s var(--i3-ease);
}
.index3-page .i3-service__toggle:hover .i3-service__toggle-plus{
  background:var(--i3-lime);
  border-color:var(--i3-black);
  color:var(--i3-black);
}
.index3-page .is-open .i3-service__toggle .i3-service__toggle-plus,
.index3-page .i3-service.is-open .i3-service__toggle-plus,
.index3-page .i3-panel.is-open .i3-service__toggle-plus{transform:rotate(45deg);}
.index3-page .i3-panel--dark .i3-service__toggle{color:var(--i3-black);}
.index3-page .i3-panel--dark .i3-service__toggle-plus{border-color:rgba(11,11,11,.4);color:var(--i3-black);}

/* ============================================================
   GLOBAL NETWORK — constellation oscura (portada del original,
   colores adaptados a la paleta monocroma + lima)
   ============================================================ */
.index3-page .i3-network{
  background:var(--i3-black);
  color:var(--i3-white);
  padding:clamp(4rem,8vw,7rem) 0;
}
.index3-page .i3-network__inner{
  width:100%;
  padding-inline:var(--i3-pad-x);
}
.index3-page .i3-network .i3-sec-head{
  align-items:center;
  text-align:center;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.2);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.index3-page .i3-network .i3-sec-title{color:var(--i3-white);}
.index3-page .i3-network__accent{color:var(--i3-lime);}
.index3-page .i3-network__grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:stretch;
}
.index3-page .i3-regions{
  border-top:1px solid rgba(255,255,255,.2);
  display:flex;
  flex-direction:column;
}
.index3-page .i3-regions__item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  width:100%;
  text-align:left;
  padding:1.5rem 0;
  color:var(--i3-white);
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:padding .4s var(--i3-ease),color .3s var(--i3-ease);
}
.index3-page .i3-regions__item:hover,
.index3-page .i3-regions__item.is-active{
  padding-left:1.2rem;
  color:var(--i3-lime);
}
.index3-page .i3-regions__arrow{
  font-family:var(--i3-font-mono);
  font-size:.9rem;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .3s var(--i3-ease),transform .3s var(--i3-ease);
}
.index3-page .i3-regions__item:hover .i3-regions__arrow,
.index3-page .i3-regions__item.is-active .i3-regions__arrow{opacity:1;transform:translateX(4px);}
.index3-page .i3-regions__num{
  font-family:var(--i3-font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  opacity:.5;
}
.index3-page .i3-regions__name{
  font-family:var(--i3-font-display);
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.01em;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.index3-page .i3-regions__name small{
  font-family:var(--i3-font-mono);
  font-size:.6rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
}
.index3-page .i3-map{
  position:relative;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 40%,rgba(212,255,58,.06),transparent 40%),
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.04),transparent 45%),
    linear-gradient(180deg,#161616,#0a0a0a);
}
.index3-page .i3-map__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
}
.index3-page .i3-map__world{
  position:absolute;
  /* igual que la web original (.constellation__map): 8% de margen y contain.
     Con inset:0 + object-fit:fill llenaba el recuadro a sangre y se veia
     ampliado y estirado. */
  inset:8%;
  width:84%;height:84%;
  object-fit:contain;
  opacity:.14;
  filter:brightness(0) invert(1) contrast(1.4);
  mix-blend-mode:screen;
}
.index3-page .i3-node{
  position:absolute;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--i3-white);
  transform:translate(-50%,-50%);
  z-index:2;
  transition:transform .4s cubic-bezier(.5,1.8,.5,1),background .3s;
  box-shadow:0 0 0 4px rgba(11,11,11,.5),0 4px 12px rgba(0,0,0,.5);
}
.index3-page .i3-node::before,
.index3-page .i3-node::after{
  content:"";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1.5px solid var(--i3-white);
  opacity:.55;
  transition:.5s;
}
.index3-page .i3-node::before{width:34px;height:34px;}
.index3-page .i3-node::after{width:52px;height:52px;opacity:.3;}
.index3-page .i3-node:hover,
.index3-page .i3-node.is-active{
  background:var(--i3-lime);
  transform:translate(-50%,-50%) scale(1.3);
  box-shadow:0 0 30px var(--i3-lime),0 0 0 4px rgba(11,11,11,.4);
}
.index3-page .i3-node:hover::before,
.index3-page .i3-node.is-active::before{border-color:var(--i3-lime);animation:i3-node-pulse 1.6s ease-out infinite;}
.index3-page .i3-node:hover::after,
.index3-page .i3-node.is-active::after{border-color:var(--i3-lime);animation:i3-node-pulse 1.6s .3s ease-out infinite;}
@keyframes i3-node-pulse{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.6;}
  100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}
}
.index3-page .i3-node__label{
  position:absolute;
  top:26px;left:50%;
  transform:translateX(-50%);
  font-family:var(--i3-font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--i3-white);
  white-space:nowrap;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  background:rgba(11,11,11,.92);
  padding:4px 10px;
  border-radius:var(--i3-r-pill);
}
.index3-page .i3-node:hover .i3-node__label,
.index3-page .i3-node.is-active .i3-node__label{opacity:1;}
.index3-page .i3-map__caption{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  justify-content:space-between;
  padding:.8rem 1.1rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.index3-page .i3-map__caption .i3-label{color:rgba(255,255,255,.45);}
.index3-page .i3-map__caption em{
  font-style:normal;
  color:var(--i3-black);
  background:var(--i3-lime);
  padding:.05em .4em;
  border-radius:var(--i3-r-pill);
}

/* ============================================================
   REGION MODAL — nombres de marcas cromados
   ============================================================ */
.index3-page .i3-rmodal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,3vw,2.5rem);
  /* Fondo sólido: backdrop-filter re-difuminaba los pulsos del mapa
     en cada frame y causaba lag (mismo fix que el original) */
  background:rgba(11,11,11,.86);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--i3-ease),visibility 0s .4s;
}
.index3-page .i3-rmodal.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .4s var(--i3-ease),visibility 0s;
}
.index3-page .i3-rmodal__card{
  width:min(760px,100%);
  max-height:min(84vh,760px);
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(24px) scale(.98);
  transition:transform .45s var(--i3-ease);
}
.index3-page .i3-rmodal.is-open .i3-rmodal__card{transform:none;}
.index3-page .i3-rmodal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.6rem clamp(1.4rem,3vw,2.2rem) 1rem;
}
.index3-page .i3-rmodal__title{
  font-family:var(--i3-font-display);
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  font-weight:500;
  letter-spacing:-.02em;
  margin-top:.4rem;
  color:var(--i3-graphite);
}
.index3-page .i3-rmodal__close{
  flex:none;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--i3-border);
  border-radius:50%;
  color:var(--i3-graphite);
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-rmodal__close:hover{
  background:var(--i3-black);
  border-color:var(--i3-black);
  color:var(--i3-lime);
}
.index3-page .i3-rmodal__sub{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem clamp(1.4rem,3vw,2.2rem);
  border-block:1px solid var(--i3-border-soft);
}
.index3-page .i3-rmodal__sub b{color:var(--i3-graphite);font-weight:500;}
.index3-page .i3-rmodal__body{
  padding:1.2rem clamp(1.4rem,3vw,2.2rem) 2rem;
  overflow-y:auto;
}
.index3-page .i3-rm-group{
  margin:1.2rem 0 .6rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.index3-page .i3-rm-group:first-child{margin-top:.2rem;}
.index3-page .i3-rm-group span{color:var(--i3-steel);}
.index3-page .i3-rm-brands{
  display:flex;
  flex-direction:column;
}
.index3-page .i3-rm-brand{
  font-family:var(--i3-font-display);
  /* mas pequeno y en negro plano: el cromado se leia mal y ocupaba demasiado */
  font-size:clamp(.95rem,1.5vw,1.15rem);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
  padding:.62em 0;
  border-bottom:1px solid var(--i3-border-soft);
  user-select:none;
  color:var(--i3-black);
  display:flex;
  align-items:baseline;
  gap:.9rem;
}
/* numerador */
.index3-page .i3-rm-brand i{
  font-family:var(--i3-font-mono);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--i3-steel);
  min-width:1.9em;
  flex:none;
}
.index3-page .i3-rm-brands .i3-rm-brand:last-child{border-bottom:0;}

/* ============================================================
   CURSOR — punto negro custom
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .index3-page.i3-js,
  .index3-page.i3-js a,
  .index3-page.i3-js button,
  .index3-page.i3-js summary{cursor:none;}
  /* Dentro del modal también: sin cursor nativo duplicado */
  .index3-page.i3-js .i3-rmodal,
  .index3-page.i3-js .i3-rmodal *{cursor:none !important;}
  /* Con el modal abierto, pausar los anillos pulsantes del mapa de debajo */
  .index3-page.i3-modal-open .i3-node::before,
  .index3-page.i3-modal-open .i3-node::after{animation-play-state:paused;}
  .index3-page .i3-cursor{
    display:none;
    position:fixed;
    top:0;left:0;
    width:12px;height:12px;
    background:var(--i3-black);
    border-radius:50%;
    pointer-events:none;
    z-index:100000;
    transform:translate3d(0,0,0) translate(-50%,-50%);
    transition:width .25s cubic-bezier(.2,.9,.3,1),height .25s cubic-bezier(.2,.9,.3,1),background .25s,opacity .2s;
    will-change:transform;
  }
  .index3-page.i3-js .i3-cursor{display:block;}
  .index3-page .i3-cursor.is-hover{
    width:40px;height:40px;
    background:var(--i3-lime);
    opacity:.6 !important;
  }
}

/* ============================================================
   CTA BAND
   ============================================================ */
/* Banda verde a sangre completa ("enganchada", sin flotar) */
.index3-page .i3-cta{padding:0;}
.index3-page .i3-cta__card{
  position:relative;
  background:var(--i3-lime);
  color:var(--i3-black);
  /* Sin bordes: la franja verde va a hueso contra lo de arriba y lo de abajo. */
  /* Franja compacta: antes 5-9.5rem de padding y ocupaba media pantalla. */
  padding:clamp(2.6rem,5vw,4.2rem) var(--i3-pad-x);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  overflow:hidden;
}
.index3-page .i3-cta__eyebrow{color:rgba(11,11,11,.55);}
.index3-page .i3-cta__h{
  font-family:var(--i3-font-display);
  font-size:clamp(2.4rem,6.5vw,5.2rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--i3-black);
}
/* "create" en negro plano: sin cromado */
.index3-page .i3-cta__h .i3-lime{
  font-style:normal;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--i3-black);
}
.index3-page .i3-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;}
/* Botones sobre fondo lima */
.index3-page .i3-cta .i3-btn--lime{background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-cta .i3-btn--lime .i3-dot{background:var(--i3-lime);}
.index3-page .i3-cta .i3-btn--lime:hover{background:var(--i3-white);color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--lime:hover .i3-dot{background:var(--i3-black);}
.index3-page .i3-cta .i3-btn--ghost-light{border-color:rgba(11,11,11,.6);color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--ghost-light:hover{background:var(--i3-black);color:var(--i3-white);border-color:var(--i3-black);}

/* ============================================================
   FOOTER
   ============================================================ */
.index3-page .i3-foot{
  background:var(--i3-white);
  /* sin border-top: dejaba una linea pegada al borde de la franja verde */
  padding:clamp(3.5rem,7vw,5.5rem) var(--i3-pad-x) 0;
  overflow:hidden;
}
/* Pie reducido (home): solo el copyright y la marca gigante */
.index3-page .i3-foot--min{
  padding-top:clamp(1.6rem,3vw,2.4rem);
}
.index3-page .i3-foot--min .i3-foot__bottom{
  border-top:0;
  margin-top:0;
  padding:.4rem 0 .8rem;
}
.index3-page .i3-foot__grid{
  max-width:var(--i3-max);
  margin-inline:auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:clamp(1.5rem,4vw,3rem);
}
.index3-page .i3-foot__brand{
  font-family:var(--i3-font-display);
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--i3-black);
  margin-bottom:.9rem;
}
.index3-page .i3-foot__desc{
  font-size:.85rem;
  line-height:1.7;
  color:var(--i3-steel);
  max-width:36ch;
}
.index3-page .i3-foot__col{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;}
.index3-page .i3-foot__col h4{margin-bottom:.5rem;font-weight:500;}
.index3-page .i3-foot__col a{
  font-size:.88rem;
  color:var(--i3-graphite);
  transition:color .3s var(--i3-ease);
}
.index3-page .i3-foot__col a:hover{color:var(--i3-steel);}
.index3-page .i3-foot__col p{font-size:.88rem;color:var(--i3-steel);}
.index3-page .i3-foot__bottom{
  max-width:var(--i3-max);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:2.2rem 0 1.2rem;
  border-top:1px solid var(--i3-border-soft);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.index3-page .i3-foot__mark{
  max-width:var(--i3-max);
  margin-inline:auto;
  font-family:var(--i3-font-display);
  font-size:clamp(4.5rem,17vw,16rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.04em;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(133,133,129,.45);
  transform:translateY(.12em);
  user-select:none;
}
.index3-page .i3-foot__mark em{
  font-style:normal;
  color:var(--i3-lime);
  -webkit-text-stroke:1.5px var(--i3-graphite);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Viewports de escritorio poco altos: las flotantes invadirían el lead */
@media (min-width:1025px) and (max-height:760px){
  .index3-page .i3-card--b{display:none;}
  .index3-page .i3-card--a{bottom:-40px;width:clamp(140px,13vw,180px);}
}

@media (max-width:1200px){
  .index3-page .i3-hero__row--end{margin-left:clamp(1rem,6vw,4rem);}
  .index3-page .i3-card--stat{left:auto;right:clamp(1rem,8vw,7rem);bottom:6rem;}
}

@media (max-width:1024px){
  .index3-page .i3-nav__menu{display:none;}
  .index3-page .i3-nav__burger{display:flex;}
  .index3-page .i3-nav__inner{grid-template-columns:1fr auto;}
  .index3-page .i3-hero__frame{min-height:auto;}
  .index3-page .i3-hero__body{
    grid-template-columns:1fr;
    align-items:start;
    padding-bottom:1.8rem;
  }
  .index3-page .i3-hero__side{align-self:start;max-width:440px;}
  .index3-page .i3-card--b{display:none;}
  .index3-page .i3-card--stat{display:none;}
  .index3-page .i3-card--a{
    position:static;
    width:min(60%,300px);
    margin:.6rem auto 1.6rem;
    --i3-rot:-2deg;
    transform:rotate(var(--i3-rot));
  }
  .index3-page .i3-numbers__grid{grid-template-columns:repeat(2,1fr);}
  .index3-page .i3-num--a,.index3-page .i3-num--b,.index3-page .i3-num--c,
  .index3-page .i3-num--d,.index3-page .i3-num--e{grid-column:auto;grid-row:auto;margin:0;}
  .index3-page .i3-num--a{grid-column:1/-1;}
  .index3-page .i3-network__grid{grid-template-columns:1fr;}
  .index3-page .i3-map{order:-1;height:auto;min-height:440px;}
}

@media (max-width:768px){
  .index3-page .i3-nav__soc,.index3-page .i3-nav__cta{display:none;}
  .index3-page .i3-hero__meta{flex-wrap:wrap;gap:.4rem .9rem;}
  .index3-page .i3-hero__meta-mid{display:none;}
  .index3-page .i3-card--a{width:min(78%,300px);}
  .index3-page .i3-split__grid{grid-template-columns:1fr;}

  .index3-page .i3-panel--light{margin-top:0;}
  .index3-page .i3-foot__grid{grid-template-columns:1fr 1fr;}
  .index3-page .i3-foot__intro{grid-column:1/-1;}
}

@media (max-width:520px){
  .index3-page .i3-numbers__grid{grid-template-columns:1fr;}
  .index3-page .i3-svcgrid{grid-template-columns:1fr;}
  .index3-page .i3-svccard{min-height:110px;}
  .index3-page .i3-foot__grid{grid-template-columns:1fr;}
  .index3-page .i3-foot__bottom{flex-direction:column;gap:.4rem;}
  .index3-page .i3-hero__ctas .i3-btn{width:100%;justify-content:center;}
  .index3-page .i3-cta__actions{width:100%;flex-direction:column;}
  .index3-page .i3-cta__actions .i3-btn{width:100%;justify-content:center;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .index3-page *,
  .index3-page *::before,
  .index3-page *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .index3-page .i3-hero__strip-track,
  .index3-page .i3-logos__track{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  .index3-page .i3-card__pulse{animation:none;box-shadow:none;}
  .index3-page .i3-node::before,
  .index3-page .i3-node::after{animation:none;}
}

/* ============================================================
   PASADA METÁLICA — blancos y negros planos → metal
   (se carga al final: gana a las definiciones previas)
   ============================================================ */
.index3-page{
  --i3-metal-lg:linear-gradient(150deg,#f4f4f2 0%,#e0e0dd 22%,#f7f7f5 38%,#d2d2cf 58%,#ececea 76%,#dcdcd9 100%);
  --i3-metal-dark-lg:linear-gradient(150deg,#2e2e33 0%,#161619 24%,#3a3a41 42%,#101013 62%,#26262b 80%,#17171a 100%);
}

/* --- Botones --- */
.index3-page .i3-btn--fill{
  background:var(--i3-metal-dark);
  color:var(--i3-white);
}
.index3-page .i3-btn--fill:hover{background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-btn--ghost{
  background:var(--i3-metal);
  border-color:rgba(11,11,11,.35);
  color:var(--i3-black);
}
.index3-page .i3-btn--ghost:hover{background:var(--i3-metal-dark);color:var(--i3-white);border-color:transparent;}
.index3-page .i3-cta .i3-btn--lime{background:var(--i3-metal-dark);color:var(--i3-white);}
.index3-page .i3-cta .i3-btn--lime:hover{background:var(--i3-white);color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--ghost-light{
  background:var(--i3-metal);
  border-color:rgba(11,11,11,.35);
  color:var(--i3-black);
}
.index3-page .i3-cta .i3-btn--ghost-light:hover{background:var(--i3-metal-dark);color:var(--i3-white);}
/* Círculo del "+" de See more */
.index3-page .i3-service__toggle-plus{background:var(--i3-metal);border-color:rgba(11,11,11,.3);color:var(--i3-black);}
.index3-page .i3-panel--dark .i3-service__toggle-plus{background:var(--i3-metal);border-color:rgba(11,11,11,.3);color:var(--i3-black);}
/* Iconos sociales de la nav */
.index3-page .i3-nav__soc a{background:var(--i3-metal);border-color:rgba(11,11,11,.25);}
.index3-page .i3-nav__soc a:hover{background:var(--i3-metal-dark);border-color:transparent;color:var(--i3-lime);}

/* --- Paneles claros (Two sides) --- */
.index3-page .i3-panel--light{background:var(--i3-metal-lg);border-color:transparent;}

/* --- Global network: negro plano → negro metálico --- */
.index3-page .i3-network{background:var(--i3-metal-dark-lg);}

/* --- Iconos sociales: transparentes como antes + color de marca al hover --- */
.index3-page .i3-nav__soc a{
  background:none;
  border-color:var(--i3-border);
  color:var(--i3-graphite);
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-nav__soc a:hover{background:none;color:var(--i3-graphite);border-color:var(--i3-border);}
/* Instagram */
.index3-page .i3-nav__soc a[aria-label="Instagram"]:hover{
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  border-color:transparent;
  color:#fff;
}
/* LinkedIn */
.index3-page .i3-nav__soc a[aria-label="LinkedIn"]:hover{
  background:#0A66C2;
  border-color:transparent;
  color:#fff;
}
/* WhatsApp */
.index3-page .i3-nav__soc a[aria-label="WhatsApp"]:hover{
  background:#25D366;
  border-color:transparent;
  color:#fff;
}

/* ============================================================
   CORRECCIÓN — menos metal, más blanco puro + variedad
   ============================================================ */
/* Botones claros: blanco puro (no metal) */
.index3-page .i3-btn--ghost{background:var(--i3-white);border-color:rgba(11,11,11,.3);color:var(--i3-black);}
.index3-page .i3-btn--ghost:hover{background:var(--i3-black);color:var(--i3-white);border-color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--ghost-light{background:var(--i3-white);border-color:rgba(11,11,11,.3);color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--ghost-light:hover{background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-cta .i3-btn--lime{background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-cta .i3-btn--lime:hover{background:var(--i3-white);color:var(--i3-black);}
/* "See more": círculo blanco simple, como antes */
.index3-page .i3-service__toggle-plus,
.index3-page .i3-panel--dark .i3-service__toggle-plus{
  background:var(--i3-white);
  border-color:var(--i3-border);
  color:var(--i3-black);
}
.index3-page .i3-service__toggle:hover .i3-service__toggle-plus{background:var(--i3-lime);border-color:var(--i3-black);}

/* Paneles Two sides: blanco puro y metal suave (no espejo) */
.index3-page .i3-panel--light{background:var(--i3-white);border:1px solid var(--i3-border);}
.index3-page .i3-panel--dark{
  background:linear-gradient(155deg,#efefec 0%,#e4e4e1 46%,#f4f4f2 72%,#e0e0dd 100%);
  color:var(--i3-black);
}

/* --- Hover metálico en botones sólidos --- */
.index3-page .i3-btn--fill:hover{background:var(--i3-metal);color:var(--i3-black);}
.index3-page .i3-btn--fill:hover .i3-dot{background:var(--i3-black);}
.index3-page .i3-cta .i3-btn--lime:hover{background:var(--i3-metal);color:var(--i3-black);}
.index3-page .i3-cta .i3-btn--lime:hover .i3-dot{background:var(--i3-black);}
.index3-page .i3-btn--ghost:hover,
.index3-page .i3-cta .i3-btn--ghost-light:hover{
  background:var(--i3-metal-dark);
  color:var(--i3-white);
  border-color:transparent;
}
.index3-page .i3-btn--ghost:hover .i3-dot,
.index3-page .i3-cta .i3-btn--ghost-light:hover .i3-dot{background:var(--i3-lime);}

/* --- Two sides: pareja alineada, contraste claro/oscuro --- */
.index3-page .i3-split__grid{align-items:stretch;}
.index3-page .i3-panel--light{margin-top:0;}
.index3-page .i3-panel--dark{
  background:var(--i3-metal-dark-lg);
  color:var(--i3-white);
  border:0;
}
.index3-page .i3-panel--dark .i3-panel__tag{color:rgba(255,255,255,.55);}
.index3-page .i3-panel--dark .i3-panel__p{color:rgba(255,255,255,.62);}
.index3-page .i3-panel--dark .i3-service__toggle{color:var(--i3-white);}
.index3-page .i3-panel--dark .i3-svccard{border-color:rgba(255,255,255,.22);}
.index3-page .i3-panel--dark .i3-svccard__t{color:var(--i3-white);}
.index3-page .i3-panel--dark .i3-svccard__num{color:rgba(255,255,255,.5);}
.index3-page .i3-panel--dark .i3-svccard__plus{color:var(--i3-lime);}

/* --- Botones claros (los que acompañan a uno oscuro): hover LIMA --- */
.index3-page .i3-btn--ghost:hover,
.index3-page .i3-cta .i3-btn--ghost-light:hover{
  background:var(--i3-lime);
  color:var(--i3-black);
  border-color:var(--i3-black);
}
.index3-page .i3-btn--ghost:hover .i3-dot,
.index3-page .i3-cta .i3-btn--ghost-light:hover .i3-dot{background:var(--i3-black);}

/* --- Metal más suave (cargaba mucho la vista) --- */
.index3-page{
  --i3-metal-lg:linear-gradient(155deg,#f6f6f4 0%,#eeeeec 30%,#f8f8f6 52%,#e9e9e6 74%,#f2f2f0 100%);
  --i3-metal:linear-gradient(140deg,#f4f4f2 0%,#fbfbf9 26%,#eaeae7 52%,#f7f7f5 76%,#eeeeeb 100%);
}

/* --- Numbers: hover metálico fuerte (como estaba) --- */
.index3-page{
  --i3-metal-strong:linear-gradient(135deg,#d8d8d5 0%,#f5f5f3 18%,#b5b5b2 38%,#e9e9e6 58%,#a8a8a5 78%,#dcdcd9 100%);
}
.index3-page .i3-num::after{background:var(--i3-metal-strong);}

/* Mapa: encaja en su columna (aspect-ratio no debe desbordar) */
.index3-page .i3-network__grid{align-items:start;}
/* Copiado de .constellation__viz de la web original: alto por min-height,
   NO por aspect-ratio. Con la proporcion exacta de la imagen el mapa llenaba
   el marco y se veia ampliado. */
.index3-page .i3-map{width:100%;max-width:100%;align-self:start;min-height:500px;}
.index3-page .i3-regions{align-self:stretch;}

/* ============================================================
   BOTONES DE CRISTAL — glass metálico tipo iPhone
   ============================================================ */
.index3-page .i3-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
}
/* Reflejo especular que cruza el botón */
.index3-page .i3-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 26%,transparent 46%,rgba(255,255,255,.1) 72%,rgba(255,255,255,.32) 100%);
  opacity:.9;
  pointer-events:none;
  transition:opacity .4s var(--i3-ease);
}
.index3-page .i3-btn:hover::before{opacity:1;}

/* Cristal oscuro */
.index3-page .i3-btn--fill,
.index3-page .i3-nav__cta{
  background:linear-gradient(160deg,rgba(58,58,64,.9) 0%,rgba(22,22,26,.92) 55%,rgba(40,40,46,.9) 100%);
  color:var(--i3-white);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 8px 22px rgba(11,11,11,.28);
}
.index3-page .i3-btn--fill:hover{
  background:linear-gradient(160deg,rgba(240,240,238,.92),rgba(205,205,202,.9));
  color:var(--i3-black);
  border-color:rgba(255,255,255,.8);
}
/* Cristal claro */
.index3-page .i3-btn--ghost,
.index3-page .i3-cta .i3-btn--ghost-light{
  background:linear-gradient(160deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.66) 100%);
  color:var(--i3-black);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,11,11,.08),
    0 6px 18px rgba(11,11,11,.12);
}
.index3-page .i3-btn--ghost:hover,
.index3-page .i3-cta .i3-btn--ghost-light:hover{
  background:linear-gradient(160deg,rgba(212,255,58,.95),rgba(190,235,40,.85));
  border-color:rgba(11,11,11,.35);
  color:var(--i3-black);
}
/* Cristal lima */
.index3-page .i3-btn--lime{
  background:linear-gradient(160deg,rgba(224,255,110,.95) 0%,rgba(212,255,58,.9) 50%,rgba(196,240,44,.95) 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(11,11,11,.18),
    0 8px 20px rgba(150,190,20,.25);
}
.index3-page .i3-btn--lime:hover{
  background:linear-gradient(160deg,rgba(58,58,64,.92),rgba(20,20,24,.94));
  color:var(--i3-white);
  border-color:rgba(255,255,255,.25);
}
.index3-page .i3-cta .i3-btn--lime{
  background:linear-gradient(160deg,rgba(58,58,64,.92),rgba(18,18,22,.94));
  color:var(--i3-white);
  border:1px solid rgba(255,255,255,.22);
}
.index3-page .i3-cta .i3-btn--lime:hover{
  background:linear-gradient(160deg,rgba(245,245,243,.95),rgba(210,210,207,.9));
  color:var(--i3-black);
}

/* Círculos de cristal: See more, sociales, flechas */
.index3-page .i3-service__toggle-plus,
.index3-page .i3-nav__soc a,
.index3-page .i3-svcslider__btn{
  background:linear-gradient(160deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 55%,rgba(255,255,255,.7) 100%);
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(11,11,11,.08),
    0 4px 12px rgba(11,11,11,.12);
}
.index3-page .i3-panel--dark .i3-service__toggle-plus{
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.4);
  color:var(--i3-white);
}

/* Wordmark gigante del footer: misma tipografía y caja alta que el logo de la nav */
.index3-page .i3-foot__mark{
  font-family:var(--i3-font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}/* El globo lima se retira al aparecer el cromado *//* Continentes cromados en relieve (sombra + luz desplazadas) *//* Capa de sombra desplazada = relieve *//* Reflejo especular + terminador del cromo *//* ============================================================
   INTRO — GLOBO CROMADO (imagen de referencia)
   ============================================================ */@keyframes i3-globe-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  50%{transform:translate(-50%,-50%) scale(1.045) rotate(2.5deg);}
}


/* Intro: CORNIER con la misma tipografía y caja alta que el logo de la nav */
.index3-page .intro__word-outline{
  font-family:var(--i3-font-display);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* EVERYWHERE: pastilla de cristal esmerilado abajo de la intro */
.index3-page .intro__ev--glass{
  position:absolute;
  left:50%;
  bottom:9vh;
  font-size:1rem;   /* la base hereda 15rem: reventaba el padding */
  /* la base recorta el fondo al texto: aquí queremos la pastilla */
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#fff;
  transform:translateX(-50%) translateY(14px);
  z-index:4;
  padding:.7em 1.5em;
  border-radius:var(--i3-r-pill);
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.12) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 18px 50px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .7s ease .5s,transform .8s var(--i3-ease) .5s;
  pointer-events:none;
  white-space:nowrap;
}.index3-page .intro__ev--glass span{
  display:block;
  font-family:var(--i3-font-display);
  font-weight:700;
  font-size:clamp(1.4rem,4.4vw,3.2rem);
  letter-spacing:.16em;
  line-height:1;
  background:linear-gradient(160deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.85) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Ticker: bucle infinito sin costura (2 mitades idénticas, -50%) */
.index3-page .i3-ticker__track{
  padding-right:2.2rem;      /* el hueco del final = gap interno */
  animation-duration:34s;
  will-change:transform;
}

/* Marquesina de logos: mismo truco de costura (gap final = gap interno) */
.index3-page .i3-logos__track{padding-right:5rem;}

/* ---- "culture.": verde plano, sin fondo ni cromado ---- */
.index3-page .i3-hero__title .i3-lime{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
  padding:0;
  border-radius:0;
  display:inline;
  transform:none !important;
}

/* ---- Polaroids del hero: más abajo (sin pisar "build") ---- */
.index3-page .i3-card--b{top:auto;bottom:16%;}
.index3-page .i3-card--a{bottom:-120px;}
@media (max-width:1024px){
  .index3-page .i3-card--a{bottom:auto;}
}

/* ============================================================
   HERO CENTRADO — titular, párrafo y botones en una columna
   ============================================================ */
.index3-page .i3-hero__body{
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
  gap:clamp(1.6rem,3vw,2.6rem);
  text-align:center;
}
.index3-page .i3-hero__title{
  text-align:center;
  max-width:none;
}
.index3-page .i3-hero__row,
.index3-page .i3-hero__row--indent,
.index3-page .i3-hero__row--end{margin-left:0;}
.index3-page .i3-hero__side{
  align-self:center;
  justify-self:center;
  margin:0;
  padding-bottom:0;
  max-width:640px;
  align-items:center;
  text-align:center;
  gap:1.4rem;
}
.index3-page .i3-hero__lead{
  text-align:center;
  max-width:52ch;
}
.index3-page .i3-hero__ctas{justify-content:center;}
/* Las polaroids se apartan a los márgenes para no pisar el texto */
.index3-page .i3-card--a{left:clamp(.5rem,2vw,2.5rem);bottom:-90px;}
.index3-page .i3-card--b{right:clamp(.5rem,2vw,2.5rem);top:clamp(3.5rem,7vw,5.5rem);bottom:auto;}
@media (max-width:1024px){
  .index3-page .i3-hero__side{max-width:100%;}
}

/* Polaroids del hero: F1 más grande y cerca del titular; Shakira más
   arriba, junto al párrafo */
.index3-page .i3-card--b{
  width:clamp(150px,14vw,215px);
  right:clamp(1rem,6vw,7rem);
  top:clamp(5rem,12vw,10rem);
}
.index3-page .i3-card--a{
  left:clamp(1rem,6vw,7rem);
  bottom:5%;
}
@media (max-width:1024px){
  .index3-page .i3-card--a{bottom:auto;left:auto;}
}

/* Tercera polaroid del hero: Bad Bunny, abajo a la derecha */
.index3-page .i3-card--c{
  width:clamp(130px,12vw,180px);
  right:clamp(2rem,9vw,11rem);
  bottom:6%;
  --i3-rot:3.5deg;
  transform:rotate(var(--i3-rot));
}
@media (max-width:1024px){
  .index3-page .i3-card--c{display:none;}
}

/* Menos aire entre el hero y la franja de logos */
.index3-page .i3-logos{margin-top:clamp(1rem,2vw,1.8rem);}
.index3-page .i3-hero__body{padding-bottom:clamp(2rem,4vw,3.2rem);}

/* ============================================================
   NUMBERS v2 — retícula ABIERTA, colores planos, sin cromado
   ============================================================ */
/* Titular completamente negro */
.index3-page .i3-numbers .i3-sec-title,
.index3-page .i3-numbers .i3-sec-title .i3-outline{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--i3-black) !important;
  color:var(--i3-black) !important;
}
/* Sección un poco más arriba */
.index3-page .i3-numbers{padding-top:clamp(2rem,4vw,3.5rem);}

/* Retícula abierta: sin líneas, celdas de anchos distintos y desfases */
.index3-page .i3-numbers__grid{
  gap:clamp(.8rem,1.4vw,1.3rem);
  background:none;
  border:0;
  align-items:start;
}
.index3-page .i3-num{
  border:0;
  border-radius:0;
  min-height:clamp(230px,22vw,300px);
  transition:transform .45s var(--i3-ease);
}
.index3-page .i3-num::after{display:none;}   /* fuera el barrido metálico */
.index3-page .i3-num:hover{transform:translateY(-6px);background:inherit;}
.index3-page .i3-num--a{grid-column:1/8;grid-row:1;background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-num--b{grid-column:9/13;grid-row:1;background:var(--i3-white);color:var(--i3-black);}
.index3-page .i3-num--c{grid-column:1/5;grid-row:2;background:var(--i3-white);color:var(--i3-black);}
.index3-page .i3-num--d{grid-column:5/9;grid-row:2;background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-num--e{grid-column:10/13;grid-row:2;background:var(--i3-lime);color:var(--i3-black);}

/* Cifras: color plano (nada de gradiente) y sufijo con la MISMA tipografía */
.index3-page .i3-num__val{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:currentColor !important;
  letter-spacing:-.045em;
}
.index3-page .i3-num__val em{
  font-style:normal;
  font-size:1em;
  font-weight:inherit;
  vertical-align:baseline;
  letter-spacing:inherit;
  -webkit-text-stroke:0 !important;
  background:none !important;
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
}
/* En las celdas lima el sufijo va en negro */
.index3-page .i3-num--e .i3-num__val em{
  -webkit-text-fill-color:var(--i3-black) !important;
  color:var(--i3-black) !important;
}
.index3-page .i3-num--a .i3-num__desc,
.index3-page .i3-num--d .i3-num__desc{color:rgba(255,255,255,.6);}
.index3-page .i3-num--b .i3-num__desc,
.index3-page .i3-num--c .i3-num__desc{color:var(--i3-steel);}
.index3-page .i3-num--e .i3-num__desc{color:rgba(11,11,11,.65);}
@media (max-width:1024px){
  .index3-page .i3-num--a,.index3-page .i3-num--b,.index3-page .i3-num--c,
  .index3-page .i3-num--d,.index3-page .i3-num--e{grid-column:auto;grid-row:auto;}
  .index3-page .i3-num--a{grid-column:1/-1;}
}

/* Numbers: rotación de color negro / blanco / gris / lima */
.index3-page .i3-num--c{background:#33333a;color:var(--i3-white);}
.index3-page .i3-num--c .i3-num__desc{color:rgba(255,255,255,.6);}
.index3-page .i3-num--d{background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-num--d .i3-num__desc{color:rgba(11,11,11,.65);}
.index3-page .i3-num--d .i3-num__val em{
  -webkit-text-fill-color:var(--i3-black) !important;
  color:var(--i3-black) !important;
}
.index3-page .i3-num--e{background:var(--i3-white);color:var(--i3-black);}
.index3-page .i3-num--e .i3-num__desc{color:var(--i3-steel);}


/* ============================================================
   NUMBERS v3 — retícula del sitio original (7/5 arriba, 4/4/4
   abajo, unidas por líneas finas). Gris = solo el fondo ash.
   ============================================================ */
.index3-page .i3-numbers__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--i3-black);
  border-top:1px solid var(--i3-black);
  border-bottom:1px solid var(--i3-black);
  align-items:stretch;
}
.index3-page .i3-num{
  grid-column:auto;
  grid-row:auto;
  background:var(--i3-ash);
  color:var(--i3-black);
  min-height:320px;
  padding:clamp(1.5rem,3vw,2.5rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:background .5s var(--i3-ease),color .5s var(--i3-ease);
  transform:none;
}
.index3-page .i3-num:hover{transform:none;}
.index3-page .i3-num--a{grid-column:span 7;background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-num--b{grid-column:span 5;}
.index3-page .i3-num--c{grid-column:span 4;background:var(--i3-ash);color:var(--i3-black);}
.index3-page .i3-num--d{grid-column:span 4;background:var(--i3-black);color:var(--i3-white);}
.index3-page .i3-num--e{grid-column:span 4;background:var(--i3-ash);color:var(--i3-black);}
/* Hover como el original: la celda se invierte a lima */
.index3-page .i3-num:hover{background:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-num:hover .i3-num__desc{color:rgba(11,11,11,.7);}
.index3-page .i3-num:hover .i3-num__val em{
  -webkit-text-fill-color:var(--i3-black) !important;
  color:var(--i3-black) !important;
}
/* Cifras: sufijo lima sobre oscuro, negro sobre claro */
.index3-page .i3-num--a .i3-num__val em,
.index3-page .i3-num--d .i3-num__val em{
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
}
.index3-page .i3-num--b .i3-num__val em,
.index3-page .i3-num--c .i3-num__val em,
.index3-page .i3-num--e .i3-num__val em{
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
}
.index3-page .i3-num--a .i3-num__desc,
.index3-page .i3-num--d .i3-num__desc{color:rgba(255,255,255,.6);}
.index3-page .i3-num--b .i3-num__desc,
.index3-page .i3-num--c .i3-num__desc,
.index3-page .i3-num--e .i3-num__desc{color:var(--i3-steel);}
.index3-page .i3-num__desc{margin-top:1rem;max-width:34ch;}
@media (max-width:1024px){
  .index3-page .i3-num--a,.index3-page .i3-num--b{grid-column:span 6;}
  .index3-page .i3-num--c,.index3-page .i3-num--d{grid-column:span 6;}
  .index3-page .i3-num--e{grid-column:span 12;}
}

/* Retícula abierta: sin reglas de cierre arriba/abajo (el 50 y el 17
   no quedan encajonados; solo hay líneas entre celdas) */
.index3-page .i3-numbers__grid{
  border-top:0;
  border-bottom:0;
}

/* Retícula: reglas superior e inferior SÍ; laterales abiertos */
.index3-page .i3-numbers__grid{
  border-top:1px solid var(--i3-black);
  border-bottom:1px solid var(--i3-black);
  border-left:0;
  border-right:0;
}

/* Las líneas internas se dibujan en las CELDAS (no con el fondo del
   contenedor): así los lados exteriores quedan realmente abiertos */
.index3-page .i3-numbers__grid{
  gap:0;
  background:none;
}
.index3-page .i3-num{border:0;}
.index3-page .i3-num--a{border-right:1px solid var(--i3-black);}
.index3-page .i3-num--c{border-right:1px solid var(--i3-black);border-top:1px solid var(--i3-black);}
.index3-page .i3-num--d{border-right:1px solid var(--i3-black);border-top:1px solid var(--i3-black);}
.index3-page .i3-num--e{border-top:1px solid var(--i3-black);}
.index3-page .i3-num--b{border-bottom:1px solid var(--i3-black);}

/* Todas las líneas al mismo grosor: la separación entre filas la dibuja
   solo la fila de abajo (si no, se sumaban 2px bajo el 50) */
.index3-page .i3-num--b{border-bottom:0;}

/* "Who we work with": menos aire arriba (venía del padding de sección) */
.index3-page .i3-split{padding-top:clamp(2rem,4vw,3.5rem);}
.index3-page .i3-numbers{padding-bottom:clamp(2.5rem,5vw,4rem);}

/* Titulares de sección sin cromado: negros como "Culture, measured." */
.index3-page .i3-sec-title,
.index3-page .i3-sec-title .i3-outline{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--i3-black) !important;
  color:var(--i3-black) !important;
}
/* En secciones oscuras, blanco */
.index3-page .i3-network .i3-sec-title,
.index3-page .i3-network .i3-sec-title .i3-outline,
.index3-page .i3-moments .i3-sec-title,
.index3-page .i3-moments .i3-sec-title .i3-outline{
  -webkit-text-fill-color:var(--i3-white) !important;
  color:var(--i3-white) !important;
}
.index3-page .i3-network .i3-sec-title .i3-network__accent{
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
}
.index3-page .i3-moments .i3-sec-title .i3-lime{
  -webkit-text-fill-color:var(--i3-lime) !important;
  color:var(--i3-lime) !important;
}

/* ============================================================
   FIGURAS DE METAL LÍQUIDO (decoración de sección)
   ============================================================ */
.index3-page .i3-sec{position:relative;}/* Junto al titular de "Culture, measured." *//* Acompañando a "Two sides. One playbook." *//* Figuras: tamaños y posiciones definitivas *//* La figura de "Two sides" no debe tapar el botón See more:
   se va al lado derecho, entre las dos tarjetas y por debajo *//* Tercera figura: junto al titular "Two sides. One playbook.", a su
   derecha (el titular ocupa ~60% del ancho, así que no lo tapa) */
/* ============================================================
   NODOS DEL MAPA — capa que replica EXACTAMENTE el area util
   de la imagen. Antes los nodos iban en % del recuadro, pero la
   imagen va con object-fit:contain y no lo llena: al cambiar el
   ancho de ventana el contain la recentra y los puntos se salian
   de sus paises. Con esta capa, las coordenadas son % DE LA
   IMAGEN y cuadran siempre.
   ============================================================ */
.index3-page .i3-map__pins{
  position:absolute;
  inset:8%;                      /* el mismo inset que .i3-map__world */
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4;
}
.index3-page .i3-map__pinbox{
  position:relative;
  width:100%;
  aspect-ratio:1451/645;         /* proporcion natural del mapa */
  max-width:100%;
  max-height:100%;               /* con el flex centrado = mismo encaje que contain */
  pointer-events:none;
}
.index3-page .i3-map__pinbox .i3-node{ pointer-events:auto; }

/* ============================================================
   BARRA DE DESPLAZAMIENTO — la nativa salia en oscuro (Chrome
   la pinta segun el tema del sistema). Se viste con la paleta:
   sin fondo y con el pulgar en grafito, no en gris claro.
   Este fichero solo lo cargan las paginas index3, asi que
   tocar html/:root aqui no afecta a la web original.
   ============================================================ */
:root{
  color-scheme:light;            /* corta el modo oscuro heredado del sistema */
}
/* OJO: si se declara scrollbar-width aqui, Chrome pasa a su barra nativa
   "fina" e IGNORA todas las reglas ::-webkit-scrollbar de abajo, con lo que
   vuelven las flechas de los extremos. Por eso lo estandar se reserva a
   Firefox, que no entiende los pseudoelementos webkit. */
@supports (-moz-appearance:none){
  html{
    scrollbar-width:thin;
    scrollbar-color:var(--i3-graphite,#2C2C2C) transparent;
  }
}
.index3-page::-webkit-scrollbar,
html::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.index3-page::-webkit-scrollbar-track,
html::-webkit-scrollbar-track{
  background:transparent;        /* fuera el fondo oscuro */
}
.index3-page::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb{
  background:var(--i3-graphite,#2C2C2C);
  border-radius:99px;
  border:3px solid transparent;  /* aire alrededor: queda una barra fina */
  background-clip:content-box;
}
.index3-page::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover{
  background:var(--i3-black,#0B0B0B);
  background-clip:content-box;
}
/* las flechas de los extremos, fuera. Con display:none Chrome deja
   igualmente un pico de unos pixeles: hay que anular tambien el tamaño. */
.index3-page::-webkit-scrollbar-button,
html::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:vertical:start,
html::-webkit-scrollbar-button:vertical:end,
html::-webkit-scrollbar-button:horizontal:start,
html::-webkit-scrollbar-button:horizontal:end{
  display:none;
  width:0;
  height:0;
  background:transparent;
}
html::-webkit-scrollbar-corner{ background:transparent; }