/* ============================================================
   INDEX3 PAGES — componentes de about3 / brands3 / creators3
   Se carga DESPUÉS de css/index3.css. Mismo aislamiento:
   todo bajo .index3-page, prefijo .i3- (excepto el netmap,
   portado tal cual del original con sus clases .netmap/.nm-*).
   ============================================================ */

/* ---------- Nav: página activa ---------- */
.index3-page .i3-nav__menu a.is-active{color:var(--i3-black);}
.index3-page .i3-nav__menu a.is-active .i3-nav__dot{transform:scale(1);margin-right:.5em;}

/* ---------- Subhero ---------- */
.index3-page .i3-subhero{
  padding:calc(var(--i3-nav-h) + clamp(3rem,7vw,6rem)) var(--i3-pad-x) clamp(3rem,6vw,5rem);
  max-width:var(--i3-max);
  margin-inline:auto;
}
.index3-page .i3-subhero__crumb{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;}
.index3-page .i3-subhero__title{
  font-family:var(--i3-font-display);
  font-size:clamp(2.4rem,6.5vw,6rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--i3-graphite);
  max-width:16ch;
}
.index3-page .i3-subhero__title .i3-lime{
  font-style:normal;
  background:var(--i3-lime);
  color:var(--i3-black);
  padding:0 .14em;
  border-radius:.14em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.index3-page .i3-subhero__grid{
  display:grid;
  grid-template-columns:1fr minmax(280px,380px);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
}
.index3-page .i3-subhero__side{display:flex;flex-direction:column;gap:1.5rem;}
.index3-page .i3-subhero__lead{
  font-size:var(--i3-fs-lead);
  line-height:1.65;
  color:var(--i3-graphite);
  border-left:2px solid var(--i3-lime);
  padding-left:1.1rem;
}
.index3-page .i3-subhero__ctas{display:flex;flex-wrap:wrap;gap:.7rem;}

/* Strip de datos bajo el subhero */
.index3-page .i3-strip{
  max-width:var(--i3-max);
  margin-inline:auto;
  padding:0 var(--i3-pad-x);
}
.index3-page .i3-strip__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-md);
  overflow:hidden;
  background:var(--i3-white);
}
.index3-page .i3-strip__cell{
  padding:1.3rem 1.4rem;
  border-right:1px solid var(--i3-border-soft);
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.index3-page .i3-strip__cell:last-child{border-right:0;}
.index3-page .i3-strip__val{
  font-family:var(--i3-font-display);
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--i3-graphite);
  line-height:1;
}

/* ---------- Origin (about) ---------- */
.index3-page .i3-origin{
  display:grid;
  grid-template-columns:minmax(260px,380px) 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.index3-page .i3-origin__year{
  font-family:var(--i3-font-display);
  font-size:clamp(4rem,9vw,8.5rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--i3-graphite);
}
.index3-page .i3-origin__year em{font-style:normal;color:var(--i3-lime);-webkit-text-stroke:1.5px var(--i3-graphite);}
.index3-page .i3-origin__where{margin-top:1rem;}
.index3-page .i3-origin__body{display:flex;flex-direction:column;gap:1.2rem;max-width:62ch;}
.index3-page .i3-origin__body p{font-size:.95rem;line-height:1.75;color:var(--i3-graphite);}
.index3-page .i3-origin__body p strong{font-weight:600;}

/* ---------- Events (about) ---------- */
.index3-page .i3-events{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
}
.index3-page .i3-event{
  position:relative;
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-md);
  overflow:hidden;
  background:var(--i3-white);
  display:flex;
  flex-direction:column;
}
.index3-page .i3-event__media{position:relative;aspect-ratio:4/4.6;overflow:hidden;}
.index3-page .i3-event__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .6s var(--i3-ease),transform .6s var(--i3-ease),opacity .6s var(--i3-ease);
}
.index3-page .i3-event:hover .i3-event__media img{filter:grayscale(.15);transform:scale(1.03);}
.index3-page .i3-event__media img + img{opacity:0;}
.index3-page .i3-event__media img.is-active{opacity:1;}
.index3-page .i3-event__media img.is-hidden{opacity:0;}
.index3-page .i3-event__body{
  padding:1rem 1.2rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.index3-page .i3-event__h{
  font-family:var(--i3-font-display);
  font-size:1.25rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.index3-page .i3-event__h em{font-style:normal;color:var(--i3-steel);}

/* ---------- Mission & Vision: filas editoriales (about) ---------- */
.index3-page .i3-mvrows{border-top:1px solid var(--i3-border);}
.index3-page .i3-mvrow{
  display:grid;
  grid-template-columns:170px 1fr minmax(220px,300px);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid var(--i3-border);
}
.index3-page .i3-mvrow__h{
  font-family:var(--i3-font-display);
  font-size:clamp(1.5rem,2.8vw,2.5rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  max-width:22ch;
}
.index3-page .i3-mvrow__h em{
  font-style:normal;
  background:var(--i3-lime);
  padding:0 .14em;
  border-radius:.14em;
}
.index3-page .i3-mvrow__p{
  font-size:.85rem;
  line-height:1.7;
  color:var(--i3-steel);
  padding-top:.4rem;
}

/* ---------- Manifesto: bloque negro partido en dos (about) ---------- */
.index3-page .i3-manifesto{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--i3-metal);
  color:var(--i3-black);
  border-radius:var(--i3-r-lg);
  overflow:hidden;
}
.index3-page .i3-manifesto__col{
  padding:clamp(1.8rem,3.4vw,3rem);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.index3-page .i3-manifesto__col + .i3-manifesto__col{border-left:1px solid rgba(11,11,11,.35);}
.index3-page .i3-manifesto__h{
  font-family:var(--i3-font-display);
  font-size:clamp(1.5rem,2.6vw,2.3rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.015em;
}
.index3-page .i3-manifesto__h em{font-style:normal;background:var(--i3-lime);padding:0 .14em;border-radius:.14em;}
.index3-page .i3-manifesto__p{
  font-size:.88rem;
  line-height:1.75;
  color:var(--i3-steel);
  max-width:46ch;
}

/* ---------- Laptop "Where we've been" (about) ----------
   Escena de estudio (ref: render): fondo gris suave, portátil
   flotando sobre pedestal negro facetado, sombra en el suelo */
.index3-page .i3-laptop-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  /* el 0 de abajo recortaba la base del portatil (el wrapper tiene
     overflow:hidden), asi que ahora reserva sitio para que se vea entero */
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,4vw,4rem) clamp(2rem,4vw,3.5rem);
  /* sin recuadro: el portatil va directo sobre el fondo de la pagina */
  background:none;
}

.index3-page .i3-laptop-info{
  flex:0 0 auto;
  max-width:0;
  opacity:0;
  overflow:hidden;
  transform:translateX(12px);
  transition:max-width .6s var(--i3-ease),opacity .5s var(--i3-ease),transform .6s var(--i3-ease),margin .6s var(--i3-ease);
  margin-right:0;
}
.index3-page .i3-laptop-wrap.is-open .i3-laptop-info{
  max-width:320px;
  opacity:1;
  transform:none;
  margin-right:clamp(1.5rem,3vw,3rem);
}
.index3-page .i3-laptop-info__card{
  width:min(320px,80vw);
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-md);
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.index3-page .i3-laptop-info__h{
  font-family:var(--i3-font-display);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.index3-page .i3-laptop-info__p{font-size:.85rem;line-height:1.7;color:var(--i3-steel);}
/* Escena limpia: fondo blanco de la página, sin recuadro */
.index3-page .i3-laptop-scene{
  flex:0 1 min(100%,980px);
  min-width:0;
  position:relative;
}
.index3-page .i3-laptop-scene__inner{
  padding:clamp(1rem,2vw,2rem) 0 clamp(1rem,2vw,1.6rem);
  transform-origin:center 78%;
  will-change:transform,filter;
}
/* Sombra en el suelo bajo la piedra */
.index3-page .i3-laptop-scene__inner::after{
  content:"";
  position:absolute;
  left:22%;right:22%;bottom:2%;
  height:22px;
  background:radial-gradient(ellipse at center,rgba(11,11,11,.3),transparent 70%);
  filter:blur(7px);
  z-index:-1;
}
.index3-page .i3-laptop{
  flex:0 1 min(100%,880px);
  min-width:0;
  position:relative;
  z-index:1;
  transform:perspective(1600px) rotateX(2.5deg);
}
/* Pin: la escena queda fija mientras el scroll conduce la roca */
.index3-page .i3-stone-pin{height:240vh;}
.index3-page .i3-stone-sticky{
  position:sticky;
  top:0;
  min-height:100vh;
  display:flex;
  align-items:center;
}
.index3-page .i3-stone-sticky .i3-laptop-wrap{width:100%;}
@media (max-width:900px){
  .index3-page .i3-stone-pin{height:auto;}
  .index3-page .i3-stone-sticky{position:static;min-height:0;display:block;}
}

/* Pedestal: gema negra 3D real (three.js pinta en este contenedor).
   z-index bajo: la punta queda DETRÁS de la base del portátil */
.index3-page .i3-laptop__stand{
  position:relative;
  z-index:0;
  width:320px;
  height:clamp(210px,26vw,310px);
  margin:-76px auto 0;
}
.index3-page .i3-laptop__stand canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
/* Sombra en el suelo bajo todo el conjunto */
.index3-page .i3-laptop__stand::after{
  content:"";
  position:absolute;
  left:50%;bottom:-14px;
  width:560px;height:34px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(11,11,11,.35),transparent 70%);
  filter:blur(8px);
}
/* Pin con scroll-lock: la sección se fija y el scroll conduce la cámara */
.index3-page .i3-laptop-pin{height:260vh;}
.index3-page .i3-laptop-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.index3-page .i3-laptop-sticky .i3-laptop-wrap{width:100%;}
@media (max-width:900px){
  .index3-page .i3-laptop-pin{height:auto;}
  .index3-page .i3-laptop-sticky{position:static;height:auto;overflow:visible;}
}

/* Gema negra 3D — OCULTA de momento: el octaedro CSS no da el nivel.
   Pendiente: sustituir por un render real (imagen/vídeo) o three.js. */
.index3-page .i3-gem{
  position:relative;
  width:150px;
  height:190px;
  margin:-10px auto 0;
  perspective:900px;
  will-change:transform;
}
.index3-page .i3-gem__core{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:i3-gem-spin 14s linear infinite;
}
@keyframes i3-gem-spin{
  from{transform:rotateY(0deg);}
  to{transform:rotateY(360deg);}
}
.index3-page .i3-gem__core i{
  position:absolute;
  left:50%;top:50%;
  width:50px;
  margin-left:-25px;
  backface-visibility:hidden;
}
/* 6 facetas superiores (corona) */
.index3-page .i3-gem__core i:nth-child(-n+6){
  height:78px;
  margin-top:-78px;
  transform-origin:50% 100%;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.index3-page .i3-gem__core i:nth-child(1){transform:rotateY(0deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#4a4a55,#101014);}
.index3-page .i3-gem__core i:nth-child(2){transform:rotateY(60deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#1b1b22,#050507);}
.index3-page .i3-gem__core i:nth-child(3){transform:rotateY(120deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#383842,#0a0a0e);}
.index3-page .i3-gem__core i:nth-child(4){transform:rotateY(180deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#22222a,#070709);}
.index3-page .i3-gem__core i:nth-child(5){transform:rotateY(240deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#2e2e37,#08080b);}
.index3-page .i3-gem__core i:nth-child(6){transform:rotateY(300deg) translateZ(41.6px) rotateX(-32deg);background:linear-gradient(180deg,#15151b,#040406);}
/* 6 facetas inferiores (pabellon, punta abajo) */
.index3-page .i3-gem__core i:nth-child(n+7){
  height:100px;
  margin-top:0;
  transform-origin:50% 0;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.index3-page .i3-gem__core i:nth-child(7){transform:rotateY(0deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#2d2d36,#000);}
.index3-page .i3-gem__core i:nth-child(8){transform:rotateY(60deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#14141a,#000);}
.index3-page .i3-gem__core i:nth-child(9){transform:rotateY(120deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#3c3c47,#020203);}
.index3-page .i3-gem__core i:nth-child(10){transform:rotateY(180deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#1e1e25,#000);}
.index3-page .i3-gem__core i:nth-child(11){transform:rotateY(240deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#31313b,#010102);}
.index3-page .i3-gem__core i:nth-child(12){transform:rotateY(300deg) translateZ(41.6px) rotateX(24.6deg);background:linear-gradient(180deg,#191920,#000);}
/* Brillo especular que recorre las facetas al girar */
.index3-page .i3-gem__core i::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.38) 44%,transparent 60%);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: reduce){
  .index3-page .i3-gem__core{animation:none;transform:rotateY(28deg);}
}
.index3-page .i3-laptop__screen{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(160deg,#3a3a3d,#0f0f11 40%,#1a1a1c);
  border-radius:22px 22px 6px 6px;
  padding:16px 16px 22px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.22),
    inset 0 0 0 4px rgba(0,0,0,.9),
    0 40px 90px rgba(11,11,11,.35);
}
/* Reflejo de cristal sobre la pantalla */
.index3-page .i3-laptop__screen::after{
  content:"";
  position:absolute;
  inset:16px 16px 22px;
  border-radius:8px;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 22%,transparent 40%);
  pointer-events:none;
  z-index:1;
}
/* Cámara */
.index3-page .i3-laptop__screen::before{
  content:"";
  position:absolute;
  top:5px;left:50%;
  transform:translateX(-50%);
  width:5px;height:5px;
  border-radius:50%;
  background:#000;
  box-shadow:inset 0 0 0 1.5px #2c2c2e;
  z-index:3;
}
.index3-page .i3-laptop__display{
  position:absolute;
  inset:16px 16px 22px;
  border-radius:8px;
  overflow:hidden;
  background:#0a0a0a;
}
.index3-page .i3-laptop__display img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1);
  opacity:0;
  transition:opacity .6s var(--i3-ease),filter .6s var(--i3-ease);
}
.index3-page .i3-laptop__display img.is-active{opacity:1;}
.index3-page .i3-laptop:hover .i3-laptop__display img.is-active{filter:grayscale(.2);}
/* Barra inferior dentro de la pantalla */
.index3-page .i3-laptop__bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.8rem 1.1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.index3-page .i3-laptop__bar .i3-label{color:rgba(255,255,255,.9);}
.index3-page .i3-laptop__bar .i3-laptop__count{color:rgba(255,255,255,.5);}
/* Flechas de navegación */
.index3-page .i3-laptop__arr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(11,11,11,.55);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-family:var(--i3-font-display);
  font-size:1rem;
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-laptop__arr:hover{background:var(--i3-lime);color:var(--i3-black);border-color:var(--i3-lime);}
.index3-page .i3-laptop__arr--l{left:1.6rem;}
.index3-page .i3-laptop__arr--r{right:1.6rem;}
/* Botón de info (arriba a la izquierda) */
.index3-page .i3-laptop__info-btn{
  position:absolute;
  top:1.6rem;left:1.6rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.45em .9em;
  border-radius:var(--i3-r-pill);
  background:rgba(11,11,11,.55);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-family:var(--i3-font-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease);
}
.index3-page .i3-laptop__info-btn:hover{background:var(--i3-lime);color:var(--i3-black);border-color:var(--i3-lime);}
.index3-page .i3-laptop__info-btn i{
  font-style:normal;
  transition:transform .4s var(--i3-ease);
}
.index3-page .i3-laptop-wrap.is-open .i3-laptop__info-btn i{transform:rotate(180deg);}
/* Base / cuerpo de aluminio limpio */
.index3-page .i3-laptop__base{
  position:relative;
  z-index:2;
  /* mas alta y mas oscura: en el escenario claro la peana se fundia con el
     fondo y el portatil parecia cortado por abajo */
  height:clamp(24px,2.8vw,36px);
  width:112%;
  margin-left:-6%;
  background:linear-gradient(180deg,#dcdcd9 0%,#b9b9b6 26%,#8d8d8a 64%,#5f5f5c 100%);
  border-radius:3px 3px 16px 16px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -4px 8px rgba(11,11,11,.35),
    0 26px 55px rgba(11,11,11,.34);
}
.index3-page .i3-laptop__base::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:13%;height:38%;
  background:linear-gradient(180deg,#8e8e8b,#c9c9c6);
  border-radius:0 0 12px 12px;
}
.index3-page .i3-laptop__base::after{
  content:"";
  position:absolute;
  top:0;left:5%;right:5%;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(11,11,11,.28) 12%,rgba(11,11,11,.28) 88%,transparent);
  border-radius:2px;
}
@media (max-width:900px){
  .index3-page .i3-laptop-wrap{flex-direction:column;gap:1.2rem;}
  .index3-page .i3-laptop-wrap.is-open .i3-laptop-info{max-width:100%;margin-right:0;}
  .index3-page .i3-laptop-info{order:2;transform:translateY(-8px);}
  .index3-page .i3-laptop{width:100%;}
  .index3-page .i3-laptop__arr--l{left:.7rem;}
  .index3-page .i3-laptop__arr--r{right:.7rem;}
}

/* ---------- Principles / Why us ---------- */
.index3-page .i3-principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
  align-items:stretch;
}
.index3-page .i3-principle{
  position:relative;
  overflow:hidden;
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-md);
  background:var(--i3-white);
  padding:clamp(1.4rem,2.4vw,2rem);
  min-height:280px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:transform .4s var(--i3-ease),box-shadow .4s var(--i3-ease),
             background .45s var(--i3-ease),border-color .45s var(--i3-ease),color .45s var(--i3-ease);
}
.index3-page .i3-principle:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(11,11,11,.14);}
/* Número fantasma gigante en la esquina */
.index3-page .i3-principle::after{
  content:"01";
  position:absolute;
  top:.4rem;right:.9rem;
  font-family:var(--i3-font-display);
  font-weight:700;
  font-size:clamp(4rem,7vw,6.5rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px currentColor;
  opacity:.12;
  pointer-events:none;
}
.index3-page .i3-principle:nth-child(2)::after{content:"02";}
.index3-page .i3-principle:nth-child(3)::after{content:"03";}
.index3-page .i3-principle__p,
.index3-page .i3-principle .i3-label{transition:color .45s var(--i3-ease);}
/* Hover: inversión de esquema */
/* Base: metalicas (salvo la lima); hover: todas a NEGRO */
.index3-page .i3-principle--light,
.index3-page .i3-principle--dark{background:var(--i3-metal);border-color:transparent;color:var(--i3-black);}
.index3-page .i3-principle--dark .i3-principle__p{color:var(--i3-steel);}
.index3-page .i3-principle--dark .i3-principle__h em{color:var(--i3-graphite);}
/* Hover: gris metalico oscuro que aparece en fundido (no de golpe) */
.index3-page .i3-principle::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--i3-metal-dark);
  opacity:0;
  transition:opacity .65s ease;
  pointer-events:none;
}
.index3-page .i3-principle > *{position:relative;z-index:1;}
.index3-page .i3-principle .i3-label,
.index3-page .i3-principle .i3-principle__p,
.index3-page .i3-principle .i3-principle__h,
.index3-page .i3-principle .i3-principle__h em{transition:color .65s ease;}
.index3-page .i3-principle:hover::before{opacity:1;}
.index3-page .i3-principle:hover{color:var(--i3-white);border-color:transparent;}
.index3-page .i3-principle:hover .i3-label{color:rgba(255,255,255,.55);}
.index3-page .i3-principle:hover .i3-principle__p{color:rgba(255,255,255,.65);}
.index3-page .i3-principle:hover .i3-principle__h{color:var(--i3-white);}
.index3-page .i3-principle:hover .i3-principle__h em{color:var(--i3-lime);}
.index3-page .i3-principle__p{font-size:.86rem;line-height:1.7;color:var(--i3-steel);max-width:38ch;}
.index3-page .i3-principle__h{
  margin-top:auto;
  font-family:var(--i3-font-display);
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
}
.index3-page .i3-principle--dark{background:var(--i3-metal);border-color:transparent;color:var(--i3-black);}
.index3-page .i3-principle--dark .i3-principle__p{color:var(--i3-steel);}
.index3-page .i3-principle--dark .i3-principle__h em{color:var(--i3-lime);font-style:normal;}
.index3-page .i3-principle--lime{background:var(--i3-lime);border-color:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-principle--lime .i3-label{color:rgba(11,11,11,.55);}
.index3-page .i3-principle--lime .i3-principle__p{color:rgba(11,11,11,.7);}
.index3-page .i3-principle__h em{font-style:normal;}
.index3-page .i3-principle--light .i3-principle__h em{color:var(--i3-steel);}

/* ---------- Services (brands/creators): slider con flechas ---------- */
.index3-page .i3-svcslider{position:relative;}
.index3-page .i3-svcslider__viewport{overflow:hidden;}
.index3-page .i3-svcslider__track{
  display:flex;
  align-items:stretch;
  transition:transform .65s cubic-bezier(.3,.1,.25,1);
}
.index3-page .i3-svcslider__track > .i3-service{
  flex:0 0 100%;
  min-width:100%;
}
.index3-page .i3-svcslider__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  margin-top:1.4rem;
}
.index3-page .i3-svcslider__btn{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--i3-border);
  border-radius:50%;
  background:var(--i3-white);
  color:var(--i3-graphite);
  font-family:var(--i3-font-display);
  font-size:1.05rem;
  transition:background .3s var(--i3-ease),color .3s var(--i3-ease),border-color .3s var(--i3-ease),transform .3s var(--i3-ease);
}
.index3-page .i3-svcslider__btn:hover{
  background:var(--i3-lime);
  border-color:var(--i3-black);
  color:var(--i3-black);
  transform:translateY(-2px);
}
.index3-page .i3-svcslider__count{
  font-family:var(--i3-font-mono);
  font-size:.72rem;
  letter-spacing:.15em;
  color:var(--i3-steel);
  min-width:5.5em;
  text-align:center;
}
.index3-page .i3-svcslider__count b{color:var(--i3-graphite);font-weight:500;}

.index3-page .i3-services{display:flex;flex-direction:column;gap:clamp(.9rem,1.6vw,1.4rem);}
/* Cerrado: contenido centrado en el cuadro. Abierto: el texto se va a la
   izquierda, el cuadro crece y las tarjetas ocupan el resto */
.index3-page .i3-service{
  display:grid;
  grid-template-columns:1fr 0fr;
  gap:0;
  border-radius:var(--i3-r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  min-height:360px;
  align-content:center;
  transition:grid-template-columns .7s var(--i3-ease),gap .7s var(--i3-ease);
}
.index3-page .i3-service.is-open{
  grid-template-columns:.52fr 1fr;
  gap:clamp(1.4rem,3vw,2.6rem);
  align-content:start;
}
.index3-page .i3-service--dark{background:var(--i3-metal);border-color:transparent;color:var(--i3-black);}
.index3-page .i3-service__head{
  display:flex;flex-direction:column;gap:.9rem;
  align-items:center;text-align:center;
  margin-inline:auto;max-width:560px;
  grid-column:1;grid-row:1;
  transition:max-width .5s var(--i3-ease);
}
.index3-page .i3-service.is-open .i3-service__head{
  align-items:flex-start;text-align:left;
  margin-inline:0;max-width:none;
}
.index3-page .i3-service__h{
  font-family:var(--i3-font-display);
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05;
}
.index3-page .i3-service__h em{font-style:normal;}
.index3-page .i3-service--dark .i3-service__h em{background:var(--i3-lime);color:var(--i3-black);padding:0 .14em;border-radius:.14em;}
.index3-page .i3-service:not(.i3-service--dark) .i3-service__h em{color:var(--i3-steel);}
.index3-page .i3-service__p{font-size:.88rem;line-height:1.7;color:var(--i3-steel);max-width:36ch;}
.index3-page .i3-service--dark .i3-service__p{color:rgba(11,11,11,.65);}
/* "See more": el cuadro crece y las casillas suben desde abajo del propio cuadro */
.index3-page .i3-service__more{
  max-height:0;
  opacity:0;
  min-width:0;
  overflow:hidden;
  transition:max-height .8s var(--i3-ease),opacity .5s var(--i3-ease);
  grid-column:2;
  grid-row:1;
}
.index3-page .i3-service.is-open .i3-service__more{max-height:1400px;opacity:1;}
.index3-page .i3-service__more .i3-svccard{opacity:0;transform:translateY(38px);transition:transform .6s var(--i3-ease),opacity .6s var(--i3-ease),border-color .3s var(--i3-ease);}
.index3-page .i3-service.is-open .i3-service__more .i3-svccard{transform:none;opacity:1;}
.index3-page .i3-service.is-open .i3-service__more .i3-svccard:nth-child(1){transition-delay:.25s;}
.index3-page .i3-service.is-open .i3-service__more .i3-svccard:nth-child(2){transition-delay:.33s;}
.index3-page .i3-service.is-open .i3-service__more .i3-svccard:nth-child(3){transition-delay:.41s;}
.index3-page .i3-service.is-open .i3-service__more .i3-svccard:nth-child(4){transition-delay:.49s;}
.index3-page .i3-service--dark .i3-service__toggle{color:var(--i3-black);}
.index3-page .i3-service--dark .i3-service__toggle-plus{border-color:rgba(11,11,11,.4);color:var(--i3-black);}
.index3-page .i3-service.is-open .i3-service__toggle{align-self:flex-start;}

/* Las tarjetas internas reutilizan .i3-svcgrid/.i3-svccard de index3.css:
   en service claro, forzar el esquema claro */
.index3-page .i3-service:not(.i3-service--dark) .i3-svccard{border-color:var(--i3-border);}
.index3-page .i3-service:not(.i3-service--dark) .i3-svccard:hover{border-color:var(--i3-black);}
.index3-page .i3-service:not(.i3-service--dark) .i3-svccard__plus{color:var(--i3-graphite);}
.index3-page .i3-service:not(.i3-service--dark) .i3-svccard__d{background:var(--i3-black);color:rgba(255,255,255,.85);}

/* ---------- Process (brands) ---------- */
.index3-page .i3-process{position:relative;}
.index3-page .i3-process__bar{
  position:relative;
  height:2px;
  background:var(--i3-border-soft);
  border-radius:2px;
  margin-bottom:2.2rem;
  overflow:visible;
}
.index3-page .i3-process__fill{
  position:absolute;inset:0;
  background:var(--i3-lime);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 2.8s cubic-bezier(.3,.1,.25,1);
}
.index3-page .i3-process.is-loaded .i3-process__fill{transform:scaleX(1);}
.index3-page .i3-process__node{
  position:absolute;
  top:50%;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--i3-ash);
  border:1.5px solid var(--i3-steel);
  transform:translate(-50%,-50%);
  transition:background .3s var(--i3-ease),border-color .3s var(--i3-ease);
}
.index3-page .i3-process.is-loaded .i3-process__node{background:var(--i3-lime);border-color:var(--i3-black);}
.index3-page .i3-process.is-loaded .i3-process__node:nth-child(2){transition-delay:.35s;}
.index3-page .i3-process.is-loaded .i3-process__node:nth-child(3){transition-delay:1.05s;}
.index3-page .i3-process.is-loaded .i3-process__node:nth-child(4){transition-delay:1.75s;}
.index3-page .i3-process.is-loaded .i3-process__node:nth-child(5){transition-delay:2.45s;}
.index3-page .i3-process__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.8rem);
}
.index3-page .i3-process__step{display:flex;flex-direction:column;gap:.5rem;}
.index3-page .i3-process__t{
  font-family:var(--i3-font-display);
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.index3-page .i3-process__step p{font-size:.82rem;line-height:1.65;color:var(--i3-steel);max-width:30ch;}

/* ---------- Cases (brands) ---------- */
.index3-page .i3-cases{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
}
/* Tarjetas flip: frente (marca) → dorso (stats) al hover, como el original */
.index3-page .i3-case{
  position:relative;
  display:block;
  min-height:clamp(240px,24vw,300px);
  perspective:1400px;
  color:inherit;
}
.index3-page .i3-case__inner{
  position:relative;
  width:100%;height:100%;
  min-height:inherit;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.35,.1,.2,1);
}
.index3-page .i3-case:hover .i3-case__inner,
.index3-page .i3-case:focus-visible .i3-case__inner{transform:rotateY(180deg);}
.index3-page .i3-case__face{
  position:absolute;
  inset:0;
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-md);
  padding:clamp(1.4rem,2.4vw,2rem);
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
}
.index3-page .i3-case__front{background:var(--i3-metal);}
.index3-page .i3-case__front .i3-case__flip-hint{margin-top:auto;color:var(--i3-steel);}
.index3-page .i3-case__back{
  background:var(--i3-lime);
  border-color:var(--i3-lime);
  color:var(--i3-black);
  transform:rotateY(180deg);
}
.index3-page .i3-case__back .i3-label{color:rgba(11,11,11,.55);}
.index3-page .i3-case__back .i3-case__stat b{color:var(--i3-black);}
.index3-page .i3-case__back .i3-case__stats{border-color:rgba(11,11,11,.3);}
.index3-page .i3-case__back .i3-case__stat{border-color:rgba(11,11,11,.3);}
.index3-page .i3-case__back .i3-case__link{color:var(--i3-black);border-bottom-color:var(--i3-black);}
.index3-page .i3-case__back .i3-case__live{background:var(--i3-black);color:var(--i3-lime);}
.index3-page .i3-case__back .i3-case__note{color:rgba(11,11,11,.65);}
.index3-page .i3-case__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.index3-page .i3-case__brand{
  font-family:var(--i3-font-display);
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
}
.index3-page .i3-case__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--i3-border-soft);
}
.index3-page .i3-case__stat{
  padding:.9rem .2rem 0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  border-right:1px solid var(--i3-border-soft);
}
.index3-page .i3-case__stat:last-child{border-right:0;}
.index3-page .i3-case__stat b{
  font-family:var(--i3-font-display);
  font-size:clamp(1.2rem,2vw,1.7rem);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1;
}
.index3-page .i3-case__link{
  margin-top:auto;
  align-self:flex-start;
  font-family:var(--i3-font-mono);
  font-size:.68rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--i3-graphite);
  border-bottom:1px solid var(--i3-lime);
  padding-bottom:.15em;
  transition:color .3s var(--i3-ease);
}
.index3-page .i3-case:hover .i3-case__link{color:var(--i3-black);}
.index3-page .i3-case__live{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:var(--i3-lime);
  color:var(--i3-black);
  border-radius:var(--i3-r-pill);
  padding:.3em .8em;
  font-family:var(--i3-font-mono);
  font-size:.62rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.index3-page .i3-case__note{font-size:.8rem;line-height:1.6;color:var(--i3-steel);}

/* ---------- Formulario (brands/creators) ---------- */
.index3-page .i3-formsec{
  display:grid;
  grid-template-columns:minmax(260px,380px) 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.index3-page .i3-formsec__side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(var(--i3-nav-h) + 2rem);}
.index3-page .i3-formsec__note{font-size:.85rem;line-height:1.7;color:var(--i3-steel);max-width:32ch;}
/* El dato (correo o telefono) siempre en su propia linea y sin partirse:
   el numero de WhatsApp se cortaba a mitad ("+1 787 / 462 0020"). */
.index3-page .i3-formsec__note a{
  color:var(--i3-graphite);
  border-bottom:1px solid var(--i3-lime);
  display:inline-block;
  white-space:nowrap;
  margin-top:.15em;
}
.index3-page .i3-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem 1.4rem;
  background:var(--i3-white);
  border:1px solid var(--i3-border);
  border-radius:var(--i3-r-lg);
  padding:clamp(1.6rem,3vw,2.6rem);
}
.index3-page .i3-form label{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.index3-page .i3-form label.i3-form--full{grid-column:1/-1;}
.index3-page .i3-form input,
.index3-page .i3-form select,
.index3-page .i3-form textarea{
  font-family:var(--i3-font-body);
  font-size:.92rem;
  color:var(--i3-graphite);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--i3-border);
  padding:.6em 0;
  border-radius:0;
  transition:border-color .3s var(--i3-ease);
}
.index3-page .i3-form textarea{min-height:110px;resize:vertical;}
.index3-page .i3-form input:focus,
.index3-page .i3-form select:focus,
.index3-page .i3-form textarea:focus{outline:none;border-color:var(--i3-black);box-shadow:0 1px 0 var(--i3-lime);}
.index3-page .i3-form ::placeholder{color:var(--i3-steel);opacity:.7;}
.index3-page .i3-form .i3-form__actions{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.index3-page .i3-sent{
  display:none;
  grid-column:1/-1;
  background:var(--i3-lime);
  color:var(--i3-black);
  border-radius:var(--i3-r-sm);
  padding:.9rem 1.2rem;
  font-size:.88rem;
  font-weight:500;
}
.index3-page .i3-sent.is-visible{display:block;}

/* ---------- Moments (creators) ---------- */
.index3-page .i3-moments{
  position:relative;
  background:radial-gradient(120% 95% at 50% 0%,#3b3b3f 0%,#232327 48%,#151518 100%);
  color:var(--i3-white);
  padding:clamp(4rem,8vw,7rem) var(--i3-pad-x);
  overflow:hidden;
}
.index3-page .i3-moments__head{
  position:relative;
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.index3-page .i3-moments__head .i3-sec-title{color:var(--i3-white);}
.index3-page .i3-moments__head .i3-sec-title .i3-lime{color:var(--i3-lime);font-style:normal;}
.index3-page .i3-moments__sub{font-size:.9rem;color:rgba(255,255,255,.55);max-width:48ch;}
.index3-page .i3-moments__stage{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(3rem,7.5vw,7rem);
}
/* iPhone Pro metálico: marco titanio, dynamic island, botones laterales */
.index3-page .i3-phone{
  position:relative;
  width:clamp(165px,17.5vw,225px);
  aspect-ratio:9/19;
  border-radius:42px;
  padding:10px;
  background:linear-gradient(145deg,#f2f2f0 0%,#9d9d9a 22%,#e6e6e3 45%,#757572 68%,#d2d2cf 88%,#8a8a87 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.65),
    inset 0 0 0 3.5px rgba(0,0,0,.9),
    0 34px 70px rgba(0,0,0,.55);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s var(--i3-ease),box-shadow .5s var(--i3-ease);
}
/* Grosor real del canto: placa trasera desplazada en Z — al girar se ve el borde */
.index3-page .i3-phone::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:42px;
  background:linear-gradient(145deg,#b9b9b6 0%,#6f6f6c 45%,#8f8f8c 100%);
  transform:translateZ(-16px);
}
/* Los laterales giran hacia ADENTRO — se ve el canto metálico del iPhone */
.index3-page .i3-phone:nth-child(1){transform:perspective(1200px) rotateY(30deg);}
.index3-page .i3-phone:nth-child(2){transform:scale(.97);}
.index3-page .i3-phone:nth-child(3){transform:perspective(1200px) rotateY(-30deg);}
.index3-page .i3-phone:nth-child(1):hover{transform:perspective(1200px) rotateY(18deg);}
.index3-page .i3-phone:nth-child(2):hover{transform:scale(1);}
.index3-page .i3-phone:nth-child(3):hover{transform:perspective(1200px) rotateY(-18deg);}
/* Botón lateral derecho (power) */
.index3-page .i3-phone::after{
  content:"";
  position:absolute;
  right:-4px;top:29%;
  width:4px;height:13%;
  background:linear-gradient(90deg,#7c7c79,#f0f0ee 45%,#9a9a97);
  border-radius:0 3px 3px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* Botones de volumen izquierda */
.index3-page .i3-phone__btns{
  position:absolute;
  left:-4px;top:22%;
  width:4px;height:8%;
  background:linear-gradient(90deg,#9a9a97,#f0f0ee 55%,#7c7c79);
  border-radius:3px 0 0 3px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.index3-page .i3-phone__btns::before{
  content:"";
  position:absolute;
  left:0;top:135%;
  width:2.5px;height:100%;
  background:inherit;
  border-radius:inherit;
}
/* Pantalla */
.index3-page .i3-phone__screen{
  position:absolute;
  inset:9px;
  border-radius:36px;
  overflow:hidden;
  background:#0d0d0d;
}
/* Dynamic island */
.index3-page .i3-phone__screen::after{
  content:"";
  position:absolute;
  top:12px;left:50%;
  transform:translateX(-50%);
  width:31%;height:17px;
  background:#000;
  border-radius:var(--i3-r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  z-index:3;
}
.index3-page .i3-phone__screen video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.index3-page .i3-phone__tag{
  position:absolute;
  top:3rem;left:1.1rem;
  z-index:4;
  background:var(--i3-lime);
  color:var(--i3-black);
  border-radius:var(--i3-r-pill);
  padding:.25em .7em;
  font-family:var(--i3-font-mono);
  font-size:.58rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.index3-page .i3-phone__name{
  position:absolute;
  left:1.1rem;right:1.1rem;bottom:1.1rem;
  z-index:4;
  font-family:var(--i3-font-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.index3-page .i3-moments__chip{
  position:absolute;
  z-index:1;
  font-family:var(--i3-font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  padding:.5em .9em;
  border-radius:var(--i3-r-pill);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
  white-space:nowrap;
  animation:i3-chip-float 6s ease-in-out infinite;
}
.index3-page .i3-moments__chip--lime{background:var(--i3-lime);color:var(--i3-black);border-color:var(--i3-lime);}
@keyframes i3-chip-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
.index3-page .i3-moments__foot{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem);
}

/* ============================================================
   NETMAP — portado tal cual de redesign.css
   Cambios: paper→blanco/ash, ink→negro i3, coral→LIMA,
   fuentes → tokens i3. Todo lo demás igual.
   ============================================================ */
.index3-page .netmap{
  position:relative;
  height:420vh;
  --nm-zoom-scale:1;
}
.index3-page .netmap__scroll{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
.index3-page .netmap__stage{
  position:relative;
  width:100%;height:100%;
  padding:2rem;
}
/* Lavado lima final: sube desde abajo cubriendo el stage */
.index3-page .netmap__wash{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(212,255,58,.34) 0%,
    rgba(212,255,58,.2) 45%,
    rgba(212,255,58,.08) 75%,
    transparent 100%);
  opacity:0;
  transform:scaleY(0);
  transform-origin:bottom center;
}
.index3-page .netmap__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,11,11,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,11,.05) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:var(--nm-progress,0);
  z-index:0;
  pointer-events:none;
}
.index3-page .netmap__svg{
  position:absolute;
  /* 58% en vez de 50%: el mapa baja para no quedar bajo el titular.
     Las capas de ciudades y puntos bajan lo mismo, y los destinos de las
     tarjetas en index3-netmap.js llevan sumado el mismo desplazamiento. */
  top:58%;left:50%;
  transform:translate(-50%,-50%);
  width:min(92%,1400px,160vh);
  height:auto;
  z-index:2;
  pointer-events:none;
  --nm-progress:0;
  transition:transform 900ms cubic-bezier(.55,.05,.25,1);
}
.index3-page .nm-others{
  fill:none;
  stroke:var(--i3-black);
  stroke-width:.7;
  stroke-linejoin:round;
  opacity:calc(min(1, var(--nm-progress, 0) * 5) * .55);
  vector-effect:non-scaling-stroke;
}
.index3-page .nm-region{opacity:1;}
.index3-page .nm-shape{
  fill:none;
  stroke:var(--i3-black);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round;
  transition:opacity .35s ease;
  vector-effect:non-scaling-stroke;
}
.index3-page .netmap .net-col{
  position:absolute;
  left:var(--nc-left, calc(10% + var(--nc-i, 0) * 20%));
  /* 41% = misma posicion de partida que usa index3-netmap.js (startYPct),
     para que antes del primer scroll no salten */
  top:var(--nc-top, 54%);
  transform:translate(-50%,-50%) scale(calc(1 - var(--nm-move,0) * 0.45));
  width:260px;
  min-height:340px;
  z-index:5;
  will-change:left,top,transform;
  pointer-events:auto;
  background:var(--i3-white);
  border:1.5px solid var(--i3-black);
  border-radius:14px;
  padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:1rem;
  transition:background .4s ease, border-color .4s ease;
}
.index3-page .netmap.is-final .net-col{
  border-color:transparent;
  background:transparent;
  padding:.5rem .8rem;
}
.index3-page .netmap.is-final .net-col ul{
  opacity:0;
  pointer-events:none;
}
.index3-page .net-col__num{
  font-family:var(--i3-font-mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--i3-steel);
}
.index3-page .net-col__name{
  font-family:var(--i3-font-display);
  font-weight:500;
  font-size:1.5rem;line-height:1;letter-spacing:-.01em;
}
.index3-page .net-col ul{
  list-style:none;margin-top:auto;
  display:flex;flex-direction:column;
  border-top:1px solid rgba(11,11,11,.5);
}
.index3-page .net-col li{
  padding:.55rem 0;
  border-bottom:1px dashed var(--i3-border-soft);
  font-family:var(--i3-font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
}
.index3-page .net-col li:last-child{border-bottom:none;}
.index3-page .nm-continent-layer,
.index3-page .nm-city-layer,
.index3-page .nm-dot-layer{
  position:absolute;
  top:58%;left:50%;
  transform:translate(-50%,-50%);
  width:min(92%,1400px,160vh);
  aspect-ratio:2 / 1;
  pointer-events:none;
  transition:transform 900ms cubic-bezier(.55,.05,.25,1);
  will-change:transform;
}
/* .nm-continent-label eliminado: los nombres gigantes de continente al fondo
   del mapa metian mucho ruido visual. La capa ya no se crea en el JS. */
.index3-page .nm-city-layer{z-index:15;}
.index3-page .nm-city{
  position:absolute;
  left:var(--city-x, 50%);
  top:var(--city-y, 50%);
  transform:translate(-50%,-50%) scale(0.55);
  opacity:0;
  font-family:var(--i3-font-mono);
  font-size:calc(11px / var(--nm-zoom-scale, 1));
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  color:var(--i3-black);
  background:var(--i3-white);
  padding:calc(.35rem / var(--nm-zoom-scale, 1)) calc(.7rem / var(--nm-zoom-scale, 1));
  border-radius:calc(4px / var(--nm-zoom-scale, 1));
  box-shadow:0 0 0 calc(1px / var(--nm-zoom-scale, 1)) var(--i3-black);
  white-space:nowrap;
  pointer-events:none;
  will-change:opacity,transform;
  transition:opacity .5s ease .3s, transform .5s ease .3s;
}
.index3-page .nm-city.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.index3-page .nm-city--flag{
  background-size:100% 100%;
  background-repeat:no-repeat;
  padding-top:calc(.5rem / var(--nm-zoom-scale, 1));
  padding-bottom:calc(.5rem / var(--nm-zoom-scale, 1));
  text-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 9px rgba(255,255,255,.85);
}
.index3-page .nm-dot-layer{z-index:20;}
.index3-page .nm-dot{
  position:absolute;
  left:var(--dot-x, 50%);
  top:var(--dot-y, 50%);
  transform:translate(-50%,-50%) scale(calc(1 / var(--nm-zoom-scale, 1)));
  width:32px;height:32px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  opacity:0;
  transition:opacity .5s ease, transform .3s ease;
  will-change:opacity,transform;
}
.index3-page .netmap.is-final .nm-dot{opacity:1;}
.index3-page .nm-dot__core{
  position:absolute;
  inset:11px;
  background:var(--i3-lime);
  border-radius:50%;
  box-shadow:0 0 0 3px var(--i3-white), 0 0 0 4px var(--i3-lime);
  transition:transform .3s ease, background .3s ease;
}
.index3-page .nm-dot__pulse{
  position:absolute;
  inset:0;
  background:var(--i3-lime);
  border-radius:50%;
  opacity:.35;
  animation:nmDotPulse 1.8s ease-out infinite;
}
@keyframes nmDotPulse{
  0%   {transform:scale(.5); opacity:.5}
  70%  {transform:scale(1.6); opacity:0}
  100% {transform:scale(1.6); opacity:0}
}
.index3-page .nm-dot:hover .nm-dot__core{transform:scale(1.2);}
.index3-page .nm-dot.is-active .nm-dot__core{
  background:var(--i3-black);
  box-shadow:0 0 0 3px var(--i3-white), 0 0 0 4px var(--i3-black);
  transform:scale(1.3);
}
.index3-page .nm-dot.is-active .nm-dot__pulse{animation:none;opacity:0;}
.index3-page .netmap.is-zoomed .nm-dot:not(.is-active){opacity:.35;}
.index3-page .netmap.is-final .net-col__num,
.index3-page .netmap.is-final .net-col__name{opacity:0;}
.index3-page .netmap .net-col:hover{z-index:20;}
.index3-page .netmap__hint{
  position:absolute;
  bottom:2rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-family:var(--i3-font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--i3-steel);
  z-index:20;
  transition:opacity .35s ease;
}
.index3-page .netmap__hint-line{
  width:1px;height:36px;
  background:linear-gradient(to bottom, var(--i3-lime), transparent);
  animation:hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{transform:scaleY(1);opacity:.7}
  50%{transform:scaleY(1.4);opacity:1}
}
.index3-page .netmap.is-mapping .netmap__hint{opacity:0;pointer-events:none;}

@media (max-width:900px){
  .index3-page .netmap{height:auto}
  .index3-page .netmap__scroll{position:static;height:auto}
  .index3-page .netmap__stage{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1rem}
  .index3-page .netmap .net-col{
    position:static;transform:none;width:100%;opacity:1;
  }
  .index3-page .netmap__svg,.index3-page .netmap__grid,.index3-page .netmap__hint,
  .index3-page .nm-city-layer,.index3-page .nm-continent-layer,.index3-page .nm-dot-layer{display:none}
}

/* ---------- Responsive páginas ---------- */
@media (max-width:1024px){
  .index3-page .i3-subhero__grid{grid-template-columns:1fr;align-items:start;}
  .index3-page .i3-mvrow{grid-template-columns:1fr;gap:.8rem;}
  .index3-page .i3-manifesto{grid-template-columns:1fr;}
  .index3-page .i3-manifesto__col + .i3-manifesto__col{border-left:0;border-top:1px solid rgba(212,255,58,.4);}
  .index3-page .i3-origin{grid-template-columns:1fr;}
  .index3-page .i3-events{grid-template-columns:1fr 1fr;}
  .index3-page .i3-principles{grid-template-columns:1fr;}
  .index3-page .i3-principle{min-height:0;}
  .index3-page .i3-service{grid-template-columns:1fr;min-height:0;}
  .index3-page .i3-service.is-open{grid-template-columns:1fr;}
  .index3-page .i3-service__more{grid-column:1;grid-row:auto;}
  .index3-page .i3-formsec{grid-template-columns:1fr;}
  .index3-page .i3-formsec__side{position:static;}
}
@media (max-width:768px){
  .index3-page .i3-strip__grid{grid-template-columns:1fr 1fr;}
  .index3-page .i3-strip__cell:nth-child(2){border-right:0;}
  .index3-page .i3-strip__cell:nth-child(1),
  .index3-page .i3-strip__cell:nth-child(2){border-bottom:1px solid var(--i3-border-soft);}
  .index3-page .i3-events{grid-template-columns:1fr;}
  .index3-page .i3-cases{grid-template-columns:1fr;}
  .index3-page .i3-process__steps{grid-template-columns:1fr 1fr;gap:1.4rem;}
  .index3-page .i3-form{grid-template-columns:1fr;}
  .index3-page .i3-moments__stage{flex-wrap:wrap;}
  .index3-page .i3-moments__chip{display:none;}
}
@media (max-width:520px){
  .index3-page .i3-process__steps{grid-template-columns:1fr;}
  .index3-page .i3-phone{width:min(64vw,240px);}
  .index3-page .i3-phone:nth-child(1),
  .index3-page .i3-phone:nth-child(3){transform:none;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .index3-page .i3-moments__chip{animation:none;}
  .index3-page .nm-dot__pulse,
  .index3-page .netmap__hint-line{animation:none;}
}

/* ============================================================
   LAPTOP 3D (three.js) — overrides del visor clásico:
   el portátil entero se pinta en canvas; el DOM queda como
   overlay de UI (flechas, Event info, barra) y estado de fotos.
   ============================================================ */
.index3-page .i3-laptop--3d{
  transform:none !important;
  aspect-ratio:16/13;
  max-height:80vh;
  width:min(100%,980px);
}
.index3-page .i3-laptop--3d .i3-laptop3d{
  position:absolute;
  inset:0;
}
.index3-page .i3-laptop--3d .i3-laptop3d canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
/* El "screen" DOM pasa a overlay transparente a pantalla completa */
.index3-page .i3-laptop--3d .i3-laptop__screen{
  position:absolute;
  inset:0;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0;
  padding:0;
  overflow:visible;
}
.index3-page .i3-laptop--3d .i3-laptop__screen::before,
.index3-page .i3-laptop--3d .i3-laptop__screen::after{display:none !important;}
/* Las fotos DOM se PROYECTAN sobre la pantalla 3D (homografia JS) */
.index3-page .i3-laptop--3d .i3-laptop__display{
  display:block;
  position:absolute;
  left:0;top:0;
  inset:auto;
  transform-origin:0 0;
  overflow:hidden;
  background:#0a0a0c;
  border-radius:0;
  pointer-events:none;
  will-change:transform;
}
.index3-page .i3-laptop--3d .i3-laptop__display{z-index:3;}
.index3-page .i3-laptop--3d .i3-laptop__display img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transform:scale(var(--i3-ds,1)) translateX(var(--i3-dx,0%));
  transform-origin:50% 50%;
}
/* La barra queda DEBAJO de la pantalla proyectada (acaba tapada);
   flechas y boton de info siempre encima */
.index3-page .i3-laptop--3d .i3-laptop__bar{z-index:1;}
.index3-page .i3-laptop--3d .i3-laptop__arr,
.index3-page .i3-laptop--3d .i3-laptop__info-btn{z-index:5;}
/* Barra inferior sin degradado (flota sobre la escena) */
.index3-page .i3-laptop--3d .i3-laptop__bar{
  background:none;
}
.index3-page .i3-laptop--3d .i3-laptop__bar .i3-label{color:var(--i3-graphite);text-shadow:none;}

/* ============================================================
   PASADA METÁLICA (páginas) — blancos planos → metal
   ============================================================ */
/* Tarjetas de servicio claras */
.index3-page .i3-service{background:var(--i3-metal-lg);border-color:transparent;}
/* Flechas del slider de servicios */
.index3-page .i3-svcslider__btn{background:var(--i3-metal);border-color:rgba(11,11,11,.25);color:var(--i3-black);}
.index3-page .i3-svcslider__btn:hover{background:var(--i3-lime);border-color:var(--i3-black);color:var(--i3-black);}
/* Strip de datos (150+ / 238M+ ...) */
.index3-page .i3-strip__grid{background:var(--i3-metal-lg);border-color:transparent;}
.index3-page .i3-strip__cell{border-right-color:rgba(11,11,11,.16);}
/* Tarjeta de info del visor y panel lateral */
.index3-page .i3-laptop-info__card{background:var(--i3-metal-lg);border-color:transparent;}
/* Formulario */
.index3-page .i3-form{background:var(--i3-metal-lg);border-color:transparent;}

/* ============================================================
   CORRECCIÓN — menos metal, variedad de color
   ============================================================ */
/* Flechas del slider: blancas simples, como antes */
.index3-page .i3-svcslider__btn{background:var(--i3-white);border-color:var(--i3-border);color:var(--i3-graphite);}
.index3-page .i3-svcslider__btn:hover{background:var(--i3-lime);border-color:var(--i3-black);color:var(--i3-black);}

/* Los 4 servicios: cada uno con su color (blanco / negro / lima / metal) */
.index3-page .i3-svcslider__track > .i3-service:nth-child(1){background:var(--i3-white);border:1px solid var(--i3-border);color:var(--i3-black);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2){background:var(--i3-metal-dark-lg);border-color:transparent;color:var(--i3-white);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(3){background:var(--i3-lime);border-color:transparent;color:var(--i3-black);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(4){background:var(--i3-metal-lg);border-color:transparent;color:var(--i3-black);}
/* Contraste dentro del slide oscuro */
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-service__p{color:rgba(255,255,255,.65);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-label{color:rgba(255,255,255,.55);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-service__h em{background:var(--i3-lime);color:var(--i3-black);padding:0 .14em;border-radius:.14em;}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-service__toggle{color:var(--i3-white);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-svccard{border-color:rgba(255,255,255,.25);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-svccard__t{color:var(--i3-white);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-svccard__num{color:rgba(255,255,255,.5);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(2) .i3-svccard__plus{color:var(--i3-lime);}
/* Contraste dentro del slide lima */
.index3-page .i3-svcslider__track > .i3-service:nth-child(3) .i3-service__p{color:rgba(11,11,11,.7);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(3) .i3-label{color:rgba(11,11,11,.6);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(3) .i3-service__h em{background:var(--i3-black);color:var(--i3-lime);padding:0 .14em;border-radius:.14em;}
.index3-page .i3-svcslider__track > .i3-service:nth-child(3) .i3-svccard{border-color:rgba(11,11,11,.35);}
.index3-page .i3-svcslider__track > .i3-service:nth-child(3) .i3-svccard__d{background:var(--i3-black);color:rgba(255,255,255,.85);}

/* Formulario: blanco puro */
.index3-page .i3-form{background:var(--i3-white);border:1px solid var(--i3-border);}
.index3-page .i3-laptop-info__card{background:var(--i3-white);border:1px solid var(--i3-border);}

/* Tarjetas de región del netmap.
   Fuera los degradados metalicos (uno se veia sucio y otro casi
   transparente). Sistema monocromo alterno blanco / negro, que es como
   funcionan las secciones de la web, y el verde SOLO como acento en la
   micro-etiqueta. */
.index3-page .netmap:not(.is-final) .net-col{
  transition:transform .4s var(--i3-ease),box-shadow .4s var(--i3-ease),background .4s var(--i3-ease);
  background:var(--i3-white);
  border-color:var(--i3-black);
}
/* pares en negro: dan ritmo a la fila */
.index3-page .netmap:not(.is-final) .net-col[data-region="latam"],
.index3-page .netmap:not(.is-final) .net-col[data-region="asia"]{
  background:var(--i3-black);
  border-color:var(--i3-black);
  color:var(--i3-white);
}
.index3-page .netmap:not(.is-final) .net-col[data-region="latam"] ul,
.index3-page .netmap:not(.is-final) .net-col[data-region="asia"] ul{ border-color:rgba(255,255,255,.45); }
.index3-page .netmap:not(.is-final) .net-col[data-region="latam"] li,
.index3-page .netmap:not(.is-final) .net-col[data-region="asia"] li{ border-color:rgba(255,255,255,.2); }

/* el acento: la micro-etiqueta en lima, nunca el fondo entero */
.index3-page .netmap:not(.is-final) .net-col .net-col__num{ color:var(--i3-steel); }
.index3-page .netmap:not(.is-final) .net-col[data-region="latam"] .net-col__num,
.index3-page .netmap:not(.is-final) .net-col[data-region="asia"] .net-col__num{ color:var(--i3-lime); }

/* al pasar el raton, la tarjeta se enciende */
.index3-page .netmap:not(.is-final) .net-col:hover{
  background:var(--i3-lime);
  border-color:var(--i3-black);
  color:var(--i3-black);
}
.index3-page .netmap:not(.is-final) .net-col:hover .net-col__num{ color:rgba(11,11,11,.55); }
.index3-page .netmap:not(.is-final) .net-col:hover ul{ border-color:rgba(11,11,11,.5); }
.index3-page .netmap:not(.is-final) .net-col:hover li{ border-color:rgba(11,11,11,.25); }

/* El proceso vuelve a ser HORIZONTAL: el bloque que lo pasaba a espina
   vertical con sangrias irregulares se ha eliminado. El marcado ya estaba
   pensado para horizontal (nodos con left:12.5/37.5/62.5/87.5% y
   .i3-process__steps en rejilla de 4 columnas). */

/* --- Case studies: cada tarjeta con su color (no las 4 iguales) --- */
.index3-page .i3-cases .i3-case:nth-child(1) .i3-case__front{background:var(--i3-white);border-color:var(--i3-border);}
.index3-page .i3-cases .i3-case:nth-child(2) .i3-case__front{
  background:var(--i3-metal-dark-lg);border-color:transparent;color:var(--i3-white);
}
.index3-page .i3-cases .i3-case:nth-child(2) .i3-case__front .i3-label{color:rgba(255,255,255,.55);}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__front{
  background:var(--i3-lime);border-color:transparent;color:var(--i3-black);
}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__front .i3-label{color:rgba(11,11,11,.6);}
.index3-page .i3-cases .i3-case:nth-child(4) .i3-case__front{background:var(--i3-metal-lg);border-color:transparent;}
/* Dorsos: alternan lima / negro para que el flip contraste siempre */
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back{
  background:var(--i3-metal-dark-lg);border-color:transparent;color:var(--i3-white);
}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back .i3-label{color:rgba(255,255,255,.55);}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back .i3-case__stat b{color:var(--i3-lime);}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back .i3-case__stats,
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back .i3-case__stat{border-color:rgba(255,255,255,.2);}
.index3-page .i3-cases .i3-case:nth-child(3) .i3-case__back .i3-case__link{color:var(--i3-white);border-bottom-color:var(--i3-lime);}

/* --- Principles / Advantages: los 3 con color propio --- */
.index3-page .i3-principles .i3-principle:nth-child(1){background:var(--i3-white);border:1px solid var(--i3-border);color:var(--i3-black);}
.index3-page .i3-principles .i3-principle:nth-child(1) .i3-principle__p{color:var(--i3-steel);}
.index3-page .i3-principles .i3-principle:nth-child(1) .i3-principle__h em{color:var(--i3-graphite);}
.index3-page .i3-principles .i3-principle:nth-child(2){background:var(--i3-lime);border-color:var(--i3-lime);color:var(--i3-black);}
.index3-page .i3-principles .i3-principle:nth-child(2) .i3-label{color:rgba(11,11,11,.55);}
.index3-page .i3-principles .i3-principle:nth-child(2) .i3-principle__p{color:rgba(11,11,11,.7);}
.index3-page .i3-principles .i3-principle:nth-child(3){background:var(--i3-metal-dark-lg);border-color:transparent;color:var(--i3-white);}
.index3-page .i3-principles .i3-principle:nth-child(3) .i3-label{color:rgba(255,255,255,.5);}
.index3-page .i3-principles .i3-principle:nth-child(3) .i3-principle__p{color:rgba(255,255,255,.62);}
.index3-page .i3-principles .i3-principle:nth-child(3) .i3-principle__h{color:var(--i3-white);}
.index3-page .i3-principles .i3-principle:nth-child(3) .i3-principle__h em{color:var(--i3-lime);}

/* --- Principle lima: hover en negro sólido (el metal quedaba sucio) --- */
.index3-page .i3-principles .i3-principle:nth-child(2)::before{background:var(--i3-black);}
.index3-page .i3-principles .i3-principle:nth-child(2):hover{color:var(--i3-white);}
.index3-page .i3-principles .i3-principle:nth-child(2):hover .i3-label{color:rgba(255,255,255,.5);}
.index3-page .i3-principles .i3-principle:nth-child(2):hover .i3-principle__p{color:rgba(255,255,255,.65);}
.index3-page .i3-principles .i3-principle:nth-child(2):hover .i3-principle__h{color:var(--i3-white);}
.index3-page .i3-principles .i3-principle:nth-child(2):hover .i3-principle__h em{color:var(--i3-lime);}

/* ============================================================
   HÉLICE DE EVENTOS ("Where we've been") — sustituye al portátil.
   Columna vertebral cromada + tarjetas orbitando con el scroll.
   ============================================================ */
.index3-page .i3-helix-pin{
  position:relative;
  height:360vh;
}
.index3-page .i3-helix-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.index3-page .i3-helix-stage{
  position:absolute;
  inset:0;
  perspective:2600px;
  perspective-origin:50% 50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* halo suave detrás de la escena */
.index3-page .i3-helix-sticky::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(1100px,90vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(133,133,129,.16) 0%,rgba(133,133,129,0) 68%);
  pointer-events:none;
}
.index3-page .i3-helix-ring{
  position:relative;
  width:0;
  height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.index3-page .i3-helix-spine{
  position:absolute;
  left:0;
  top:0;
  /* la columna entera tiene que caber en la ventana: si no, se ve cortada */
  height:min(1320px,95vh);
  width:calc(min(1320px,95vh) * 0.42);
  /* el origen en el centro del anillo: así el contra-giro (billboard)
     cancela exactamente el giro del anillo y la columna no se desplaza */
  transform-origin:0 0;
  transform:translate(-50%,-50%);
  pointer-events:none;
  perspective:1300px;                 /* profundidad para que el giro se vea 3D */
}
.index3-page .i3-helix-spine canvas,
.index3-page .i3-helix-spine img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain;                 /* la imagen de la columna nunca se deforma */
}
/* Sombra: UNA sola, estática y sin filtro. Seis drop-shadow recalculándose
   por fotograma serían caros (mismo motivo por el que se quitó del canvas). */
.index3-page .i3-helix-spine::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2%;
  width:62%;
  height:9%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(11,11,11,.24) 0%,rgba(11,11,11,0) 70%);
  pointer-events:none;
  z-index:-1;
}

/* La columna 3D la dibuja three.js en un <canvas> (models/hull3d.py genera la
   malla). Ya no hay sprites: el giro es rotacion real del modelo, la lleva
   index3-helix.js. */
@media (prefers-reduced-motion:reduce){
  .index3-page .i3-helix-spine canvas{ opacity:.9; }
}

.index3-page .i3-helix-card{
  position:absolute;
  left:0;
  top:0;
  --cw:clamp(215px,21vw,360px);
  width:var(--cw);
  height:calc(var(--cw) * 1.25);
  /* centrado por márgenes (no por translate): así el giro del anillo es
     puro y la tarjeta frontal cae exactamente sobre la columna */
  margin-left:calc(var(--cw) / -2);
  margin-top:calc(var(--cw) * -0.625);
  border-radius:var(--i3-r-md);
  overflow:hidden;
  background:var(--i3-black);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(11,11,11,.35);
  backface-visibility:hidden;
  transition:box-shadow .4s var(--i3-ease,ease);
}
.index3-page .i3-helix-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.index3-page .i3-helix-card__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  color:#fff;
  background:linear-gradient(to top,rgba(11,11,11,.88) 0%,rgba(11,11,11,.45) 55%,rgba(11,11,11,0) 100%);
}
.index3-page .i3-helix-card__cap .i3-label{color:rgba(255,255,255,.72);}
.index3-page .i3-helix-card__cap h3{
  font-family:var(--i3-font-display);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
}
.index3-page .i3-helix-card__veil{
  position:absolute;
  inset:0;
  background:var(--i3-ash);
  opacity:0;
  pointer-events:none;
}
.index3-page .i3-helix-card.is-front{
  box-shadow:0 40px 90px rgba(11,11,11,.45);
  border-color:rgba(212,255,58,.55);
}

/* HUD: datos del evento que está al frente */
.index3-page .i3-helix-hud{
  position:absolute;
  left:clamp(1rem,4vw,3.5rem);
  bottom:clamp(1.5rem,5vw,3.5rem);
  display:flex;
  flex-direction:column;
  gap:.45rem;
  max-width:24ch;
  pointer-events:none;
  z-index:5;
}
.index3-page .i3-helix-hud__name{
  font-family:var(--i3-font-display);
  font-size:clamp(1.4rem,2.6vw,2.3rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--i3-graphite);
}
.index3-page .i3-helix-hud__count{
  margin-top:.6rem;
  color:var(--i3-steel);
}

/* Móvil / sin movimiento: rejilla plana, sin pin ni 3D */
@media (max-width:900px){
  .index3-page .i3-helix-pin{height:auto;}
  .index3-page .i3-helix-sticky{position:static;height:auto;display:block;padding:0 var(--i3-pad-x);}
  .index3-page .i3-helix-sticky::before{display:none;}
  .index3-page .i3-helix-stage{position:static;perspective:none;display:block;}
  .index3-page .i3-helix-ring{
    width:auto;height:auto;transform:none !important;
    display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
  }
  .index3-page .i3-helix-spine{display:none;}
  .index3-page .i3-helix-card{
    position:relative;left:auto;top:auto;width:auto;
    transform:none !important;opacity:1 !important;filter:none !important;
  }
  .index3-page .i3-helix-hud{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .index3-page .i3-helix-pin{height:auto;}
  .index3-page .i3-helix-sticky{position:static;height:auto;display:block;padding:0 var(--i3-pad-x);}
  .index3-page .i3-helix-stage{position:static;perspective:none;display:block;}
  .index3-page .i3-helix-ring{
    width:auto;height:auto;transform:none !important;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;
  }
  .index3-page .i3-helix-spine{display:none;}
  .index3-page .i3-helix-card{
    position:relative;left:auto;top:auto;width:auto;
    transform:none !important;opacity:1 !important;filter:none !important;
  }
  .index3-page .i3-helix-hud{position:static;margin-top:1.2rem;}
}

/* ============================================================
   SUBHERO CENTRADO — igual que el hero de la home.
   Antes era una retícula asimétrica (titular a la izquierda, lead y
   botones en una columna estrecha a la derecha).
   ============================================================ */
.index3-page .i3-subhero{ text-align:center; }
.index3-page .i3-subhero__crumb{
  justify-content:center;
  flex-wrap:wrap;
  row-gap:.4rem;
}
.index3-page .i3-subhero__grid{
  grid-template-columns:1fr;      /* una sola columna: todo apilado y centrado */
  justify-items:center;
  align-items:start;
  gap:clamp(1.3rem,3vw,2.1rem);
}
.index3-page .i3-subhero__title{
  max-width:19ch;
  margin-inline:auto;
}
.index3-page .i3-subhero__side{
  align-items:center;
  max-width:62ch;
}
.index3-page .i3-subhero__lead{
  /* sin la barra lima de la izquierda: centrado no tiene sentido, y el
     hero de la home tampoco la lleva */
  border-left:0;
  padding-left:0;
  max-width:56ch;
}
.index3-page .i3-subhero__ctas{ justify-content:center; }

/* ============================================================
   FIGURA CENTRAL DE LA HÉLICE (about3) — gráfico flotante que gira.
   Sustituye a la columna 3D de three.js. Dos capas que no se pisan:
   el span flota (CSS) y la imagen gira (la conduce el scroll desde
   index3-helix.js). El holder sigue haciendo su billboard.
   ============================================================ */
.index3-page .i3-helix-spine--blob{
  /* proporción de la figura (762x1300), para que llene sin recortar */
  height:min(1040px,80vh);
  width:calc(min(1040px,80vh) * 0.60);
}
.index3-page .i3-spine-blob{
  display:block;
  width:100%;
  height:100%;
  animation:i3-spine-float 7.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes i3-spine-float{
  0%,100%{ transform:translateY(-16px); }
  50%    { transform:translateY(16px); }
}
.index3-page .i3-helix-spine--blob img{
  transform-origin:center center;
  filter:drop-shadow(0 38px 55px rgba(11,11,11,.32));
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .index3-page .i3-spine-blob{ animation:none; }
  .index3-page .i3-helix-spine--blob img{ transform:none !important; }
}

/* Nombres de region en mayuscula (Europe y Asia incluidos) */
.index3-page .net-col__name{
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* Cabecera de Global Network pegada a las cartas: es el ultimo elemento de su
   seccion, asi que el margin-bottom de .i3-sec-head (hasta 72px) y el padding
   de .i3-sec solo generaban hueco muerto. */

/* ============================================================
   NETMAP — cabecera dentro del area fija.
   Antes vivia en una seccion propia ANTES del mapa, asi que al pegarse
   el sticky el titulo se iba de pantalla. Ahora va superpuesta dentro
   del sticky: "Where we operate." se ve durante toda la animacion y
   ademas libera el espacio que ocupaba, con lo que las tarjetas suben.
   Va en absolute para no alterar el stage (el SVG se centra sobre el).
   ============================================================ */
.index3-page .netmap__head{
  position:absolute;
  top:clamp(4.5rem,9vh,7rem);
  /* mismo contenedor que .i3-sec (max-width + margin auto + padding lateral):
     pegado a left/right quedaba mas a la izquierda que los demas titulares */
  left:0;
  right:0;
  max-width:var(--i3-max);
  margin-inline:auto;
  padding-inline:var(--i3-pad-x);
  z-index:20;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  /* Cede el sitio al mapa: se ve mientras estan las tarjetas y se desvanece
     conforme el mapa se dibuja, para no quedar encima de los continentes. */
  opacity:calc(1 - var(--nm-progress,0) * 2.6);
  transition:opacity .35s linear;
}
.index3-page .netmap__head .i3-sec-title{ margin:0; }

@media (max-width:900px){
  .index3-page .netmap__head{ position:static; padding:0 var(--i3-pad-x) 1.5rem; }
}

/* La figura del centro va SIEMPRE por detras de las tarjetas */
.index3-page .i3-helix-spine--blob{ z-index:0; }

/* La franja de datos necesita el mismo aire que en brands3: alli la seccion
   siguiente (.i3-logos) trae margin-top y .i3-moments no, asi que en creators3
   los numeros quedaban pegados al bloque oscuro. Mismo valor que el override
   de .i3-logos (index3.css), no el de su regla base. */
.index3-page .i3-strip + .i3-moments{
  margin-top:clamp(1rem,2vw,1.8rem);
}