:root{
  --green:#0d624b;
  --green-2:#16c98d;
  --gold:#d4a62a;
  --purple:#9f3df5;
  --cyan:#1ad8ff;
  --blue:#208cf3;
  --ink:#08111e;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Montserrat,Arial,sans-serif;color:#111;background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
button,a{font:inherit}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:88px; display:grid; grid-template-columns:260px 1fr 220px;
  align-items:center; gap:24px; padding:0 5vw;
  background:linear-gradient(to bottom,rgba(0,0,0,.48),rgba(0,0,0,.12),transparent);
  transition:.35s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.brand img{width:215px; height:auto}
.main-nav{display:flex;justify-content:center;gap:42px}
.main-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:16px;position:relative;padding:8px 0;transition:.25s}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;transform:scaleX(0);transition:.25s}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.site-header.scrolled .main-nav a{color:#123b30}
.site-header.scrolled .main-nav a::after{background:var(--green)}
.header-cta{justify-self:end;color:#fff;text-decoration:none;background:rgba(1,89,65,.92);border:1px solid rgba(255,255,255,.55);padding:14px 24px;border-radius:999px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.header-cta span{margin-left:10px}
.menu-toggle{display:none;background:none;border:0;padding:10px}
.menu-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px 0}
.site-header.scrolled .menu-toggle span{background:#173c31}

.hero{background:#0c1218}
.hero-scene{
  position:relative;
  width:min(100%,1920px);
  margin:0 auto;
  aspect-ratio:3/2;
  overflow:hidden;
  isolation:isolate;
}
.hero-master{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:1;
}
.hero-scene::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.22),transparent 20%),
    radial-gradient(circle at 75% 45%,transparent 0 42%,rgba(0,0,0,.06) 72%,rgba(0,0,0,.16) 100%);
}
.orbit-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;
}
.orbit-path{
  fill:none;stroke:rgba(255,255,255,.78);stroke-width:2.3;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.25));
  stroke-dasharray:4 5;
}
.orbit-path-b{opacity:.5}
.orbit-dot{fill:#16d79b;filter:drop-shadow(0 0 5px rgba(22,215,155,.9))}
.dot-a{offset-path:ellipse(405px 355px at 995px 500px);animation:moveDot 10s linear infinite}
.dot-b{offset-path:ellipse(405px 355px at 995px 500px);animation:moveDot 10s linear infinite -2.5s}
.dot-c{offset-path:ellipse(325px 285px at 995px 500px);animation:moveDot 8s linear infinite -1s}
.dot-d{offset-path:ellipse(325px 285px at 995px 500px);animation:moveDot 8s linear infinite -4s}
@keyframes moveDot{to{offset-distance:100%}}

.orbit-layer{position:absolute;inset:0;z-index:8;pointer-events:none}
.orbit-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:0;background:transparent;color:#fff;pointer-events:auto;cursor:pointer;
  min-width:128px;
  transition:transform .28s ease,opacity .28s ease,filter .28s ease;
}
.orbit-node:hover{transform:translate(-50%,-50%) scale(1.06)}
.orbit-node.dim{opacity:.27;filter:saturate(.5)}
.orbit-node.active{transform:translate(-50%,-50%) scale(1.08)}
.orbit-node .icon{
  width:86px;height:86px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#16253a,#07111e 68%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 10px 25px rgba(0,0,0,.32),0 0 18px rgba(255,255,255,.12);
}
.orbit-node .icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.orbit-node .label{font-size:17px;font-weight:800;line-height:1.02;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.icon-doc{color:#16e09a}
.icon-shield{color:#1f91ff}
.icon-chart{color:#ca4cff}
.icon-cap{color:#f4c448}
.icon-people{color:#22d9ff}
.icon-coins{color:#ffc62c}

.node-diario{left:47%;top:20%}
.node-prev{left:39%;top:43%}
.node-rec{left:34.5%;top:66%}
.node-edu{left:73%;top:20.5%}
.node-com{left:79%;top:43.5%}
.node-coins{left:74.5%;top:66%}

.feature-panel{
  position:absolute;z-index:11;right:4.5%;top:50%;transform:translateY(-50%) translateX(18px);
  width:min(360px,28vw);
  padding:28px 28px 26px;
  border-radius:26px;
  background:rgba(6,14,25,.76);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px);
  color:#fff;
  opacity:0;pointer-events:none;
  transition:.35s ease;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.hero-scene.focused .feature-panel{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.hero-scene.focused::before{
  content:"";position:absolute;inset:0;z-index:6;
  background:rgba(0,0,0,.38);backdrop-filter:blur(1.5px);pointer-events:none;
}
.hero-scene.focused .orbit-svg{z-index:7}
.hero-scene.focused .orbit-layer{z-index:9}
.feature-kicker{margin:0 0 6px;color:#7df0c2;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800}
.feature-panel h2{font-size:32px;margin:0 0 10px}
.feature-panel p{font-size:16px;line-height:1.55;margin:0}
.feature-close{position:absolute;right:14px;top:10px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}

.content-section{padding:92px 7vw}
.content-section.muted{background:#f6f8f7}
.content-wrap{max-width:1180px;margin:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:var(--green)}
.content-section h2{font-size:46px;margin:8px 0 26px}
.flow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.flow span{padding:12px 18px;border-radius:999px;background:#f1f5f3;border:1px solid #dde7e2;font-weight:700}
.flow b{color:var(--green)}
.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.progress-grid span{padding:18px;border-radius:16px;background:#fff;border:1px solid #e6ece8;font-weight:700}
.site-footer{padding:40px 7vw;background:#07130f;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}
.site-footer img{width:220px}

@media (max-width: 900px){
  .site-header{height:74px;grid-template-columns:1fr auto;padding:0 18px}
  .brand img{width:175px}
  .main-nav,.header-cta{display:none}
  .menu-toggle{display:block}
  .main-nav.open{
    display:flex;position:absolute;top:74px;left:14px;right:14px;
    flex-direction:column;gap:4px;padding:14px;border-radius:16px;
    background:rgba(7,19,15,.94);backdrop-filter:blur(18px)
  }
  .main-nav.open a{color:#fff;padding:13px 10px}
  .hero-scene{aspect-ratio:9/14;min-height:760px}
  .hero-master{object-fit:cover;object-position:48% center}
  .orbit-svg{transform:scale(.83) translateY(7%);transform-origin:center}
  .orbit-node .icon{width:64px;height:64px}
  .orbit-node .icon svg{width:36px;height:36px}
  .orbit-node .label{font-size:13px}
  .orbit-node{min-width:90px}
  .node-diario{left:50%;top:15%}
  .node-prev{left:20%;top:31%}
  .node-rec{left:20%;top:60%}
  .node-edu{left:80%;top:31%}
  .node-com{left:80%;top:60%}
  .node-coins{left:50%;top:78%}
  .feature-panel{
    width:calc(100% - 32px);right:16px;left:16px;top:auto;bottom:18px;
    transform:translateY(18px)
  }
  .hero-scene.focused .feature-panel{transform:none}
  .progress-grid{grid-template-columns:1fr 1fr}
  .content-section h2{font-size:36px}
  .site-footer{flex-direction:column;align-items:flex-start}
}


/* ==========================================================
   v0.7 REFINAMIENTO HERO / HEADER / ORBITAS
========================================================== */

/* Tipografía menos pesada y más editorial */
body{
  font-family:"Segoe UI Variable","Inter","Aptos","Montserrat","Segoe UI",Arial,sans-serif;
  font-weight:400;
}

/* Header más ligero */
.site-header{
  height:82px;
  grid-template-columns:250px 1fr 210px;
  padding:0 4.2vw;
}

/* Cambio de logo según contraste del fondo */
.brand{
  position:relative;
  display:block;
  width:226px;
  height:58px;
}
.brand-logo{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:220px;
  height:auto;
  transition:opacity .28s ease, transform .28s ease;
}
.brand-logo-white{opacity:1}
.brand-logo-color{opacity:0}
.site-header.scrolled .brand-logo-white{opacity:0}
.site-header.scrolled .brand-logo-color{opacity:1}

/* Menú más fino y elegante */
.main-nav{
  gap:38px;
}
.main-nav a{
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
}
.header-cta{
  padding:12px 21px;
  font-size:14px;
  font-weight:700;
}

/* Hero dentro de la primera vista */
.hero-scene{
  width:100%;
  max-width:1920px;
  height:100svh;
  min-height:700px;
  max-height:1000px;
  aspect-ratio:auto;
}
.hero-master{
  object-fit:cover;
  object-position:center center;
}

/* Órbitas compactadas para entrar completas en la primera pantalla */
.orbit-svg{
  inset:4% 5% 2% 5%;
  width:90%;
  height:94%;
}

/* líneas más finas */
.orbit-path{
  stroke-width:1.6;
  stroke-dasharray:3 6;
  opacity:.82;
}
.orbit-path-b{
  opacity:.36;
}

/* nodos más pequeños, menos pesados */
.orbit-node{
  min-width:104px;
  gap:6px;
}
.orbit-node .icon{
  width:68px;
  height:68px;
  border-width:1px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.26),
    0 0 12px rgba(255,255,255,.08);
}
.orbit-node .icon svg{
  width:37px;
  height:37px;
  stroke-width:2.1;
}
.orbit-node .label{
  font-size:14px;
  font-weight:600;
  line-height:1.08;
  letter-spacing:.005em;
  text-shadow:0 1px 8px rgba(0,0,0,.66);
}

/* Posiciones más cerradas alrededor del teléfono */
.node-diario{left:46.5%;top:20.5%}
.node-prev{left:39.5%;top:42.5%}
.node-rec{left:36.2%;top:64%}
.node-edu{left:72%;top:21%}
.node-com{left:78%;top:43%}
.node-coins{left:74%;top:64.5%}

/* Estados más sobrios */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.045);
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.06);
}
.orbit-node.dim{
  opacity:.20;
}

/* El panel no aparece inicialmente; mantiene foco en producto */
.feature-panel{
  width:min(330px,25vw);
  padding:24px 24px 22px;
}
.feature-panel h2{
  font-size:28px;
  font-weight:650;
}
.feature-panel p{
  font-size:15px;
  font-weight:400;
}

/* Responsive */
@media (max-width: 1100px){
  .site-header{
    grid-template-columns:220px 1fr 185px;
  }
  .brand{width:205px}
  .brand-logo{width:200px}
  .main-nav{gap:26px}
  .main-nav a{font-size:14px}
  .header-cta{padding:11px 17px}

  .orbit-node .icon{width:60px;height:60px}
  .orbit-node .icon svg{width:32px;height:32px}
  .orbit-node .label{font-size:12.5px}
}

@media (max-width: 900px){
  .site-header{
    height:72px;
    grid-template-columns:1fr auto;
  }
  .brand{
    width:185px;
    height:50px;
  }
  .brand-logo{
    width:180px;
  }

  .hero-scene{
    height:100svh;
    min-height:720px;
    max-height:none;
  }
  .hero-master{
    object-position:47% center;
  }

  .orbit-svg{
    inset:6% 1% 2% 1%;
    width:98%;
    height:92%;
  }

  .orbit-node .icon{
    width:56px;
    height:56px;
  }
  .orbit-node .icon svg{
    width:29px;
    height:29px;
  }
  .orbit-node .label{
    font-size:11.5px;
    font-weight:600;
  }

  .node-diario{left:50%;top:16%}
  .node-prev{left:20%;top:33%}
  .node-rec{left:20%;top:59%}
  .node-edu{left:80%;top:33%}
  .node-com{left:80%;top:59%}
  .node-coins{left:50%;top:79%}
}

@media (max-width: 430px){
  .brand{
    width:160px;
  }
  .brand-logo{
    width:156px;
  }
  .orbit-node{
    min-width:76px;
  }
  .orbit-node .icon{
    width:50px;
    height:50px;
  }
  .orbit-node .label{
    font-size:10.5px;
  }
}


/* ==========================================================
   v0.8 CIERRE VISUAL DEL HERO
   Objetivo: menos infografía, más producto
========================================================== */

/* Header más discreto */
.site-header{
  height:76px;
  grid-template-columns:230px 1fr 200px;
  padding:0 4vw;
}
.brand{
  width:210px;
  height:52px;
}
.brand-logo{
  width:205px;
}
.main-nav{
  gap:34px;
}
.main-nav a{
  font-size:14px;
  font-weight:600;
}
.header-cta{
  padding:11px 19px;
  font-size:13.5px;
}

/* Las órbitas se perciben, pero no compiten con el teléfono */
.orbit-svg{
  opacity:.68;
  filter:none;

  /* abre un hueco visual alrededor del teléfono */
  -webkit-mask-image:
    radial-gradient(
      ellipse 20% 39% at 57% 48%,
      transparent 0%,
      transparent 63%,
      rgba(0,0,0,.22) 70%,
      #000 82%
    );
  mask-image:
    radial-gradient(
      ellipse 20% 39% at 57% 48%,
      transparent 0%,
      transparent 63%,
      rgba(0,0,0,.22) 70%,
      #000 82%
    );
}

.orbit-path{
  stroke:rgba(255,255,255,.58);
  stroke-width:1.35;
  stroke-dasharray:2.6 7;
}
.orbit-path-b{
  opacity:.26;
}

/* Sólo tres puntos animados visibles */
.dot-a,.dot-b,.dot-c{
  opacity:.82;
}
.dot-d{
  display:none;
}

/* Acercamos las capacidades al producto */
.node-diario{left:47.1%;top:20.5%}
.node-prev{left:40.1%;top:42.5%}
.node-rec{left:37.2%;top:63.4%}
.node-edu{left:71.4%;top:20.8%}
.node-com{left:77.1%;top:43%}
.node-coins{left:73.2%;top:63.7%}

/* Iconos mantienen presencia, etiquetas más editoriales */
.orbit-node{
  min-width:96px;
  gap:5px;
}
.orbit-node .icon{
  width:64px;
  height:64px;
  box-shadow:
    0 7px 18px rgba(0,0,0,.24),
    0 0 10px rgba(255,255,255,.06);
}
.orbit-node .icon svg{
  width:34px;
  height:34px;
  stroke-width:2;
}
.orbit-node .label{
  font-size:13px;
  font-weight:550;
  line-height:1.06;
  letter-spacing:.004em;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}

/* Interacción más elegante */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.035);
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.055);
}
.orbit-node.dim{
  opacity:.17;
}

/* El panel contextual será secundario al mockup */
.feature-panel{
  width:min(315px,24vw);
  border-radius:22px;
  padding:22px 22px 20px;
  background:rgba(5,13,23,.72);
}
.feature-panel h2{
  font-size:26px;
  font-weight:620;
  letter-spacing:-.02em;
}
.feature-panel p{
  font-size:14.5px;
  line-height:1.5;
}

/* Desktop bajo: asegurar que todo entre sin perder composición */
@media (min-width:901px) and (max-height:820px){
  .hero-scene{
    min-height:640px;
    height:100vh;
  }
  .site-header{
    height:70px;
  }
  .brand-logo{
    width:190px;
  }
  .orbit-node .icon{
    width:58px;
    height:58px;
  }
  .orbit-node .icon svg{
    width:31px;
    height:31px;
  }
  .orbit-node .label{
    font-size:12px;
  }
}

/* Móvil: misma navegación, menos ruido */
@media (max-width:900px){
  .brand{
    width:175px;
  }
  .brand-logo{
    width:170px;
  }
  .orbit-svg{
    opacity:.58;
    -webkit-mask-image:
      radial-gradient(
        ellipse 31% 31% at 50% 47%,
        transparent 0%,
        transparent 58%,
        #000 76%
      );
    mask-image:
      radial-gradient(
        ellipse 31% 31% at 50% 47%,
        transparent 0%,
        transparent 58%,
        #000 76%
      );
  }
  .orbit-node .icon{
    width:52px;
    height:52px;
  }
  .orbit-node .icon svg{
    width:28px;
    height:28px;
  }
  .orbit-node .label{
    font-size:10.8px;
    font-weight:550;
    text-shadow:0 1px 4px rgba(0,0,0,.58);
  }
}


/* ==========================================================
   v0.9 — CONTRASTE DE ÓRBITAS
   Mayor lectura sobre madera, piel, teléfono y fondos claros.
========================================================== */

/* Las trayectorias dejan de ser blanco tenue.
   Usamos dos tonos ALMA complementarios. */
.orbit-svg{
  opacity:.92;
}

.orbit-path{
  fill:none;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-dasharray:3 7;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.32))
    drop-shadow(0 0 4px rgba(255,255,255,.22));
}

/* Órbita exterior: verde ALMA */
.orbit-path-a{
  stroke:rgba(18,150,105,.90);
}

/* Órbita interior: violeta ALMA */
.orbit-path-b{
  stroke:rgba(150,62,225,.74);
  opacity:.82;
}

/* Puntos con contraste sólido y halo controlado */
.orbit-dot{
  fill:#20e2a2;
  stroke:rgba(4,63,48,.9);
  stroke-width:2;
  filter:
    drop-shadow(0 0 4px rgba(32,226,162,.95))
    drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Los círculos funcionales se separan mejor del fondo */
.orbit-node .icon{
  background:
    radial-gradient(circle at 32% 26%,rgba(25,48,68,.98),rgba(3,15,27,.98) 68%);
  border:1.4px solid rgba(255,255,255,.38);
  box-shadow:
    0 8px 20px rgba(0,0,0,.32),
    0 0 0 1px rgba(4,17,29,.34),
    0 0 14px rgba(255,255,255,.10);
}

/* Halo cromático individual: identidad sin saturar */
.node-diario .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(22,224,154,.38);
}
.node-prev .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(31,145,255,.38);
}
.node-rec .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(202,76,255,.40);
}
.node-edu .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(244,196,72,.40);
}
.node-com .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(34,217,255,.40);
}
.node-coins .icon{
  box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(255,198,44,.42);
}

/* Etiquetas: mayor contraste sin volverlas pesadas */
.orbit-node .label{
  color:#fff;
  font-weight:600;
  text-shadow:
    0 1px 2px rgba(0,0,0,.92),
    0 2px 8px rgba(0,0,0,.62);
}

/* Hover: la órbita elegida comunica claramente que es accionable */
.orbit-node:hover .icon,
.orbit-node.active .icon{
  border-color:rgba(255,255,255,.70);
  filter:brightness(1.10);
}

/* En móvil aumentamos un poco más la lectura de la trayectoria */
@media (max-width:900px){
  .orbit-svg{opacity:.96}
  .orbit-path{stroke-width:2.35}
  .orbit-node .label{
    text-shadow:
      0 1px 2px rgba(0,0,0,.96),
      0 2px 7px rgba(0,0,0,.72);
  }
}


/* ==========================================================
   v1.0 — REFINAMIENTO DE ÓRBITAS / NODOS
   Objetivo: lectura clara, menos ruido, más apariencia de UI.
========================================================== */

/* 1) Órbitas sin sombras ni glow.
   Paleta nueva:
   - cian hielo: contraste sobre madera y teléfono
   - dorado cálido: identidad ALMA y contraste sobre fondo claro
*/
.orbit-svg{
  opacity:.90 !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

.orbit-path{
  fill:none !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-dasharray:4 7 !important;
  filter:none !important;
}

.orbit-path-a{
  stroke:rgba(55,210,225,.90) !important; /* cian hielo */
}

.orbit-path-b{
  stroke:rgba(224,177,74,.82) !important; /* dorado cálido */
  opacity:.95 !important;
}

/* Puntos sólidos, sin sombra */
.orbit-dot{
  fill:#ffffff !important;
  stroke:#0b6671 !important;
  stroke-width:2.2 !important;
  filter:none !important;
}

/* 2) Nodos más grandes y autosuficientes.
   El texto vive dentro del círculo: icono + nombre = un único control.
*/
.orbit-node{
  min-width:0 !important;
  width:102px !important;
  height:102px !important;
  gap:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  color:#fff !important;
}

.orbit-node .icon{
  width:102px !important;
  height:102px !important;
  border-radius:50% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  background:rgba(4,18,31,.94) !important;
  border:2px solid rgba(255,255,255,.82) !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:hidden !important;
}

/* Convertimos el span del label en contenido interno del control */
.orbit-node .label{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  transform:translateX(-50%) !important;
  width:88px !important;
  color:#fff !important;
  font-size:10.8px !important;
  font-weight:650 !important;
  line-height:1.05 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-shadow:none !important;
  pointer-events:none !important;
}

/* El icono sube ligeramente para dejar espacio al nombre */
.orbit-node .icon svg{
  width:34px !important;
  height:34px !important;
  transform:translateY(-10px) !important;
  stroke-width:2 !important;
}

/* Halo eliminado; cada nodo se identifica por borde de color */
.node-diario .icon{border-color:#22d8c1 !important}
.node-prev .icon{border-color:#36a3ff !important}
.node-rec .icon{border-color:#c45bff !important}
.node-edu .icon{border-color:#e6b54e !important}
.node-com .icon{border-color:#44d6e8 !important}
.node-coins .icon{border-color:#f2c94c !important}

/* Aumentamos un poco el radio visual, manteniendo el teléfono protagonista */
.node-diario{left:47%;top:20.2% !important}
.node-prev{left:39.7%;top:42.5% !important}
.node-rec{left:36.8%;top:64% !important}
.node-edu{left:71.8%;top:20.4% !important}
.node-com{left:77.4%;top:42.8% !important}
.node-coins{left:73.5%;top:64.3% !important}

/* Estados */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.04) !important;
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.06) !important;
}
.orbit-node.dim{
  opacity:.20 !important;
}

/* Refuerzo muy sutil de fondo sólo dentro del nodo, no debajo del texto */
.orbit-node .icon::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

/* Ajuste de colores de iconos */
.icon-doc{color:#28e2c6 !important}
.icon-shield{color:#4eb0ff !important}
.icon-chart{color:#cf67ff !important}
.icon-cap{color:#f0bd55 !important}
.icon-people{color:#55deee !important}
.icon-coins{color:#ffd65c !important}

/* Desktop bajo */
@media (min-width:901px) and (max-height:820px){
  .orbit-node,
  .orbit-node .icon{
    width:88px !important;
    height:88px !important;
  }
  .orbit-node .icon svg{
    width:30px !important;
    height:30px !important;
    transform:translateY(-9px) !important;
  }
  .orbit-node .label{
    width:76px !important;
    bottom:10px !important;
    font-size:9.8px !important;
  }
}

/* Móvil: círculo mayor que en v0.9, pero legible y táctil */
@media (max-width:900px){
  .orbit-node,
  .orbit-node .icon{
    width:76px !important;
    height:76px !important;
  }
  .orbit-node .icon svg{
    width:26px !important;
    height:26px !important;
    transform:translateY(-8px) !important;
  }
  .orbit-node .label{
    width:67px !important;
    bottom:8px !important;
    font-size:8.5px !important;
    font-weight:650 !important;
  }
  .orbit-path{
    stroke-width:2 !important;
  }
}

@media (max-width:430px){
  .orbit-node,
  .orbit-node .icon{
    width:70px !important;
    height:70px !important;
  }
  .orbit-node .label{
    width:62px !important;
    font-size:8px !important;
  }
}


/* ==========================================================
   v1.1 — ORBITAS PASTEL / UI PREMIUM
   Basado en la referencia visual aprobada.
========================================================== */

/* Tipografía más nítida en navegador, sin depender de fuente externa */
html, body, button, a {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Menú ligeramente más fino */
.main-nav a,
.header-cta{
  font-weight:600 !important;
  letter-spacing:.005em;
}

/* Órbitas: pastel modernas, limpias, sin sombras */
.orbit-svg{
  opacity:.98 !important;
  filter:none !important;
}

.orbit-path{
  fill:none !important;
  stroke-width:2.6 !important;
  stroke-linecap:round !important;
  stroke-dasharray:none !important;
  filter:none !important;
}

/* Exterior menta, interior lavanda suave */
.orbit-path-a{
  stroke:rgba(118, 225, 208, .86) !important;
}
.orbit-path-b{
  stroke:rgba(203, 174, 255, .78) !important;
  opacity:1 !important;
}

/* Puntos de recorrido pastel, sin borde oscuro ni glow */
.orbit-dot{
  fill:#91eadc !important;
  stroke:none !important;
  filter:none !important;
  opacity:.95 !important;
}
.dot-c{
  fill:#e4c7ff !important;
}

/* Nodos más grandes, tipo botón premium */
.orbit-node{
  width:118px !important;
  height:118px !important;
  min-width:118px !important;
  border-radius:50% !important;
}

.orbit-node .icon{
  width:118px !important;
  height:118px !important;
  border:none !important;
  box-shadow:
    0 10px 24px rgba(22, 34, 44, .14) !important;
  filter:none !important;
  overflow:hidden !important;
  position:relative !important;
}

/* Fondos pastel modernos por función */
.node-diario .icon{
  background:linear-gradient(145deg,#bdf4dc 0%,#4fc69b 100%) !important;
}
.node-prev .icon{
  background:linear-gradient(145deg,#c5e9ff 0%,#66b8ef 100%) !important;
}
.node-rec .icon{
  background:linear-gradient(145deg,#ead1ff 0%,#a564dc 100%) !important;
}
.node-edu .icon{
  background:linear-gradient(145deg,#ffe9ad 0%,#deb45d 100%) !important;
}
.node-com .icon{
  background:linear-gradient(145deg,#c8f3f7 0%,#58b9c7 100%) !important;
}
.node-coins .icon{
  background:linear-gradient(145deg,#d6f1cd 0%,#68bb73 100%) !important;
}

/* Iconos en blanco limpio para máxima legibilidad */
.orbit-node .icon svg{
  width:38px !important;
  height:38px !important;
  transform:translateY(-12px) !important;
  color:#fff !important;
  stroke:#fff !important;
  stroke-width:2.1 !important;
}

/* Texto integrado dentro del círculo */
.orbit-node .label{
  position:absolute !important;
  left:50% !important;
  bottom:16px !important;
  transform:translateX(-50%) !important;
  width:98px !important;
  padding:0 4px !important;
  font-size:11.3px !important;
  font-weight:650 !important;
  line-height:1.08 !important;
  color:#fff !important;
  text-shadow:none !important;
  letter-spacing:0 !important;
}

/* Reubicación: más aire entre nodos y mejor lectura del teléfono */
.node-diario{left:46.6% !important;top:20.5% !important}
.node-prev{left:37.8% !important;top:43.5% !important}
.node-rec{left:34.6% !important;top:67% !important}
.node-edu{left:73.3% !important;top:20.5% !important}
.node-com{left:80.1% !important;top:43.5% !important}
.node-coins{left:76.8% !important;top:67% !important}

/* Estados */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.035) !important;
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.055) !important;
}
.orbit-node.dim{
  opacity:.18 !important;
}

/* Un aro interno extremadamente sutil, sin contorno visible */
.orbit-node .icon::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}

/* En pantallas con poca altura, reducimos sólo un poco */
@media (min-width:901px) and (max-height:820px){
  .orbit-node,
  .orbit-node .icon{
    width:104px !important;
    height:104px !important;
    min-width:104px !important;
  }
  .orbit-node .icon svg{
    width:34px !important;
    height:34px !important;
    transform:translateY(-10px) !important;
  }
  .orbit-node .label{
    width:88px !important;
    bottom:13px !important;
    font-size:10.4px !important;
  }
}

/* Responsive móvil: conserva las seis capacidades */
@media (max-width:900px){
  .orbit-path{
    stroke-width:2.2 !important;
  }

  .orbit-node,
  .orbit-node .icon{
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
  }

  .orbit-node .icon svg{
    width:27px !important;
    height:27px !important;
    transform:translateY(-9px) !important;
  }

  .orbit-node .label{
    width:72px !important;
    bottom:9px !important;
    font-size:8.9px !important;
  }

  .node-diario{left:50% !important;top:15.5% !important}
  .node-prev{left:18% !important;top:33% !important}
  .node-rec{left:18% !important;top:60% !important}
  .node-edu{left:82% !important;top:33% !important}
  .node-com{left:82% !important;top:60% !important}
  .node-coins{left:50% !important;top:80% !important}
}


/* ==========================================================
   v1.2 — CONTRASTE Y POSICIÓN FINAL DE NODOS
   Mejor lectura sobre fondo claro y mejor balance alrededor del teléfono.
========================================================== */

:root{
  --node-ink:#0b2233;
  --orbit-mint:#6fd3c1;
  --orbit-lilac:#b8a0e8;
}

/* Órbitas más discretas pero legibles */
.orbit-path{
  stroke-width:2.25 !important;
  opacity:.86 !important;
}
.orbit-path-a{
  stroke:rgba(111,211,193,.92) !important;
}
.orbit-path-b{
  stroke:rgba(184,160,232,.82) !important;
}
.orbit-dot{
  fill:#f7f9fb !important;
  stroke:rgba(28,84,92,.55) !important;
  stroke-width:1.4 !important;
  opacity:.95 !important;
}

/* Nodos: pastel con más cuerpo y texto oscuro para contraste real */
.node-diario .icon{
  background:linear-gradient(145deg,#a8ead7 0%,#63c5a7 100%) !important;
}
.node-prev .icon{
  background:linear-gradient(145deg,#b9dcf7 0%,#6caedc 100%) !important;
}
.node-rec .icon{
  background:linear-gradient(145deg,#dec2f2 0%,#a36fd0 100%) !important;
}
.node-edu .icon{
  background:linear-gradient(145deg,#f2ddb0 0%,#d4ad5e 100%) !important;
}
.node-com .icon{
  background:linear-gradient(145deg,#bfe9ec 0%,#68b8c3 100%) !important;
}
.node-coins .icon{
  background:linear-gradient(145deg,#cce6c5 0%,#79b77c 100%) !important;
}

/* Iconos y etiquetas oscuros: mucha más nitidez que blanco sobre pastel */
.orbit-node .icon svg{
  color:var(--node-ink) !important;
  stroke:var(--node-ink) !important;
  opacity:.96 !important;
}
.orbit-node .label{
  color:var(--node-ink) !important;
  font-weight:700 !important;
  text-shadow:none !important;
  font-size:11.6px !important;
  line-height:1.06 !important;
}

/* Eliminar sensación lechosa */
.orbit-node .icon{
  opacity:.98 !important;
  box-shadow:0 8px 18px rgba(25,46,62,.13) !important;
}

/* Posición más equilibrada, dejando respirar al teléfono */
.node-diario{left:45.5% !important;top:21.3% !important}
.node-prev{left:36.9% !important;top:43.8% !important}
.node-rec{left:33.7% !important;top:66.8% !important}

.node-edu{left:73.8% !important;top:21.5% !important}
.node-com{left:81.0% !important;top:43.8% !important}
.node-coins{left:77.4% !important;top:66.5% !important}

/* Tamaño ligeramente menor que v1.1 para dejar aire, pero mayor que v1.0 */
.orbit-node,
.orbit-node .icon{
  width:110px !important;
  height:110px !important;
  min-width:110px !important;
}

.orbit-node .icon svg{
  width:36px !important;
  height:36px !important;
  transform:translateY(-11px) !important;
}
.orbit-node .label{
  width:92px !important;
  bottom:14px !important;
}

/* Hover más sobrio */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.025) !important;
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.045) !important;
}

/* Pantallas bajas */
@media (min-width:901px) and (max-height:820px){
  .orbit-node,
  .orbit-node .icon{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
  }
  .orbit-node .icon svg{
    width:31px !important;
    height:31px !important;
    transform:translateY(-9px) !important;
  }
  .orbit-node .label{
    width:80px !important;
    bottom:11px !important;
    font-size:10.2px !important;
  }
}

/* Móvil */
@media (max-width:900px){
  .orbit-node,
  .orbit-node .icon{
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
  }
  .orbit-node .icon svg{
    width:26px !important;
    height:26px !important;
    transform:translateY(-8px) !important;
  }
  .orbit-node .label{
    width:68px !important;
    bottom:8px !important;
    font-size:8.7px !important;
  }

  .node-diario{left:50% !important;top:15.8% !important}
  .node-prev{left:17.5% !important;top:34% !important}
  .node-rec{left:17.5% !important;top:60% !important}
  .node-edu{left:82.5% !important;top:34% !important}
  .node-com{left:82.5% !important;top:60% !important}
  .node-coins{left:50% !important;top:80% !important}
}


/* ==========================================================
   v1.3 — ETIQUETAS EN CÁPSULA NEGRA
   Se conserva exactamente la posición actual de los nodos.
========================================================== */

/* El icono vuelve a ser el protagonista dentro del círculo */
.orbit-node .icon svg{
  transform:translateY(-5px) !important;
}

/* Etiqueta superpuesta en la zona inferior del mismo nodo.
   No modifica la posición del botón ni de las órbitas. */
.orbit-node .label{
  position:absolute !important;
  left:50% !important;
  bottom:8px !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  min-width:72px !important;
  max-width:102px !important;
  padding:4px 8px 4.5px !important;

  background:rgba(5,13,22,.86) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:999px !important;
  box-shadow:none !important;

  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif !important;
  font-size:10.5px !important;
  font-weight:650 !important;
  line-height:1.05 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  white-space:normal !important;
  text-shadow:none !important;

  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  z-index:4;
}

/* Diario necesita dos líneas pero conserva la misma cápsula */
.node-diario .label{
  min-width:78px !important;
}

/* Círculos mantienen el pastel aprobado */
.orbit-node .icon{
  border:none !important;
}

/* Móvil: cápsula compacta y legible */
@media (max-width:900px){
  .orbit-node .icon svg{
    transform:translateY(-4px) !important;
  }
  .orbit-node .label{
    bottom:5px !important;
    min-width:57px !important;
    max-width:70px !important;
    padding:3px 5px !important;
    font-size:7.8px !important;
    line-height:1.02 !important;
  }
}

/* Pantallas de poca altura */
@media (min-width:901px) and (max-height:820px){
  .orbit-node .icon svg{
    transform:translateY(-5px) !important;
  }
  .orbit-node .label{
    bottom:6px !important;
    min-width:65px !important;
    max-width:86px !important;
    padding:3.5px 6px !important;
    font-size:9px !important;
  }
}


/* ==========================================================
   v1.4 — SIMETRÍA DE NODOS + ICONOS MÁS GRANDES
   Los 6 controles siguen la geometría de la órbita exterior.
========================================================== */

/* Iconos más grandes y con mejor presencia */
.orbit-node .icon svg{
  width:44px !important;
  height:44px !important;
  transform:translateY(-6px) !important;
  stroke-width:2.15 !important;
}

/* Texto permanece dentro de la cápsula negra */
.orbit-node .label{
  bottom:7px !important;
  min-width:74px !important;
  padding:4px 8px 4.5px !important;
  font-size:10.5px !important;
  font-weight:650 !important;
}

/* ----------------------------------------------------------
   Distribución proporcional sobre una elipse común.
   3 nodos a la izquierda y 3 a la derecha, con ángulos
   equivalentes para dar simetría y continuidad visual.
---------------------------------------------------------- */

/* centro visual aproximado de las órbitas */
:root{
  --orbit-cx: 59%;
  --orbit-cy: 49.5%;
  --orbit-rx: 22.5%;
  --orbit-ry: 29.2%;
}

/* Posiciones simétricas:
   izquierda superior / media / inferior
   derecha superior / media / inferior
*/
.node-diario{
  left:43.1% !important;
  top:28.9% !important;
}
.node-prev{
  left:36.5% !important;
  top:49.5% !important;
}
.node-rec{
  left:43.1% !important;
  top:70.1% !important;
}

.node-edu{
  left:74.9% !important;
  top:28.9% !important;
}
.node-com{
  left:81.5% !important;
  top:49.5% !important;
}
.node-coins{
  left:74.9% !important;
  top:70.1% !important;
}

/* Mantener todos los nodos exactamente centrados en su punto orbital */
.orbit-node{
  transform:translate(-50%,-50%) !important;
}

/* Hover/active sin romper la alineación orbital */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.025) !important;
}
.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.045) !important;
}

/* Pantallas bajas: conservar proporción, sólo reducir tamaño */
@media (min-width:901px) and (max-height:820px){
  .orbit-node .icon svg{
    width:38px !important;
    height:38px !important;
    transform:translateY(-5px) !important;
  }
}

/* Móvil: misma lógica geométrica, adaptada a vertical */
@media (max-width:900px){
  .node-diario{left:34% !important;top:26% !important}
  .node-prev{left:18% !important;top:49% !important}
  .node-rec{left:34% !important;top:72% !important}

  .node-edu{left:66% !important;top:26% !important}
  .node-com{left:82% !important;top:49% !important}
  .node-coins{left:66% !important;top:72% !important}

  .orbit-node .icon svg{
    width:31px !important;
    height:31px !important;
    transform:translateY(-4px) !important;
  }
  .orbit-node .label{
    font-size:8px !important;
    min-width:58px !important;
    padding:3px 5px !important;
  }
}


/* ==========================================================
   v1.5 — MICROAJUSTES FINALES DEL HERO
   Mejoras sugeridas: órbitas más sutiles, simetría refinada
   y mayor presencia de iconos sin agrandar los círculos.
========================================================== */

/* 1) Órbitas: guían la mirada sin competir con el teléfono */
.orbit-svg{
  opacity:.74 !important;
}

.orbit-path{
  opacity:.72 !important;
  stroke-width:2.05 !important;
}

.orbit-path-a{
  stroke:rgba(111,211,193,.82) !important;
}

.orbit-path-b{
  stroke:rgba(184,160,232,.72) !important;
}

.orbit-dot{
  opacity:.78 !important;
}

/* 2) Ajuste fino de simetría:
   Prevención y Comunidad se acercan ligeramente al arco común */
.node-prev{
  left:37.8% !important;
  top:49.2% !important;
}

.node-com{
  left:80.6% !important;
  top:49.2% !important;
}

/* 3) Iconos: +9% aprox. de presencia visual, mismo círculo */
.orbit-node .icon svg{
  width:48px !important;
  height:48px !important;
  stroke-width:2.25 !important;
  transform:translateY(-6px) !important;
}

/* Ajuste específico para iconos visualmente más pequeños */
.node-com .icon svg{
  width:50px !important;
  height:50px !important;
}

.node-coins .icon svg{
  width:50px !important;
  height:50px !important;
}

/* Se mantienen cápsulas negras y textos actuales */
.orbit-node .label{
  font-weight:650 !important;
}

/* Hover sutil */
.orbit-node:hover{
  transform:translate(-50%,-50%) scale(1.022) !important;
}

.orbit-node.active{
  transform:translate(-50%,-50%) scale(1.04) !important;
}

/* Pantallas bajas */
@media (min-width:901px) and (max-height:820px){
  .orbit-node .icon svg{
    width:41px !important;
    height:41px !important;
    stroke-width:2.15 !important;
  }

  .node-com .icon svg,
  .node-coins .icon svg{
    width:43px !important;
    height:43px !important;
  }
}

/* Móvil: mismas mejoras proporcionales */
@media (max-width:900px){
  .orbit-svg{
    opacity:.70 !important;
  }

  .orbit-node .icon svg{
    width:34px !important;
    height:34px !important;
    stroke-width:2.1 !important;
  }

  .node-com .icon svg,
  .node-coins .icon svg{
    width:36px !important;
    height:36px !important;
  }

  .node-prev{
    left:18.5% !important;
    top:49% !important;
  }

  .node-com{
    left:81.5% !important;
    top:49% !important;
  }
}


/* ==========================================================
   v1.6 — CIERRE DEL HERO
   Microajustes: simetría, opacidad lavanda y fondos semitransparentes.
========================================================== */

/* 1) Ajuste fino de simetría */
.node-prev{
  left:38.8% !important; /* aprox. 15-20 px hacia la derecha */
}

.node-edu{
  top:21.2% !important; /* ligera bajada visual */
}

/* 2) Órbita interior lavanda aún más discreta */
.orbit-path-b{
  opacity:.58 !important;
}

/* 3) Fondo de círculos con semitransparencia
   El texto e iconos permanecen al 100% */
.node-diario .icon{
  background:linear-gradient(
    145deg,
    rgba(168,234,215,.82) 0%,
    rgba(99,197,167,.82) 100%
  ) !important;
}
.node-prev .icon{
  background:linear-gradient(
    145deg,
    rgba(185,220,247,.82) 0%,
    rgba(108,174,220,.82) 100%
  ) !important;
}
.node-rec .icon{
  background:linear-gradient(
    145deg,
    rgba(222,194,242,.82) 0%,
    rgba(163,111,208,.82) 100%
  ) !important;
}
.node-edu .icon{
  background:linear-gradient(
    145deg,
    rgba(242,221,176,.82) 0%,
    rgba(212,173,94,.82) 100%
  ) !important;
}
.node-com .icon{
  background:linear-gradient(
    145deg,
    rgba(191,233,236,.82) 0%,
    rgba(104,184,195,.82) 100%
  ) !important;
}
.node-coins .icon{
  background:linear-gradient(
    145deg,
    rgba(204,230,197,.82) 0%,
    rgba(121,183,124,.82) 100%
  ) !important;
}

/* Mantener contenido del nodo completamente nítido */
.orbit-node .icon svg,
.orbit-node .label{
  opacity:1 !important;
}

/* Quitar cualquier borde interior residual para una lectura más limpia */
.orbit-node .icon::after{
  display:none !important;
}

/* Sombra muy ligera para separar el fondo semitransparente de la foto */
.orbit-node .icon{
  box-shadow:0 7px 16px rgba(15,30,42,.10) !important;
}

/* Responsive mantiene la misma lógica */
@media (max-width:900px){
  .node-prev{
    left:19.2% !important;
  }
  .node-edu{
    top:34.6% !important;
  }
}


/* ==========================================================
   v1.7 — CUENTA ALMA IA / MOCKUP INTERACTIVO
========================================================== */

/* Séptimo nodo: integrado en la misma lógica orbital */
.node-cuenta{
  left:59.2% !important;
  top:16.6% !important;
}

.icon-account{
  color:#0b2233 !important;
}

/* Conserva el lenguaje pastel */
.node-cuenta .icon{
  background:linear-gradient(
    145deg,
    rgba(224,216,255,.82) 0%,
    rgba(167,142,225,.82) 100%
  ) !important;
}

/* Capa de presentación del mockup */
.mockup-showcase{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(260px, 430px) minmax(260px, 410px);
  justify-content:center;
  align-items:center;
  gap:clamp(36px,5vw,86px);
  padding:100px 7vw 54px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .55s cubic-bezier(.22,.61,.36,1),
    visibility .55s ease;
}

/* Oscurecimiento suave, no negro total */
.mockup-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(5,10,18,.56);
  backdrop-filter:blur(3px) saturate(.86);
}

/* Cuando está activo */
.hero-scene.show-mockup .mockup-showcase{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Atenuar el resto sin desaparecerlo */
.hero-scene.show-mockup .orbit-svg{
  opacity:.18 !important;
  transition:opacity .45s ease;
}

.hero-scene.show-mockup .orbit-node{
  opacity:.16 !important;
  transition:opacity .45s ease, transform .45s ease;
}

.hero-scene.show-mockup .node-cuenta{
  opacity:1 !important;
}

.hero-scene.show-mockup .hero-master{
  transform:scale(1.015);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}

/* Mockup */
.mockup-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:72vh;
}

.mockup-stage img{
  width:min(100%,390px);
  max-height:76vh;
  object-fit:contain;

  transform:translateY(14px) scale(.985);
  opacity:0;

  filter:drop-shadow(0 24px 34px rgba(0,0,0,.26));

  transition:
    transform .9s cubic-bezier(.22,.61,.36,1),
    opacity .7s ease;
}

.hero-scene.show-mockup .mockup-stage img{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Movimiento casi imperceptible estilo producto premium */
.hero-scene.show-mockup .mockup-stage img{
  animation:almaFloat 7s ease-in-out infinite;
}

@keyframes almaFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-5px) scale(1.003); }
}

/* Texto breve */
.mockup-copy{
  color:#fff;
  max-width:390px;
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .7s ease .12s,
    transform .8s cubic-bezier(.22,.61,.36,1) .12s;
}

.hero-scene.show-mockup .mockup-copy{
  opacity:1;
  transform:translateY(0);
}

.mockup-eyebrow{
  display:inline-block;
  margin-bottom:10px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#aeeedb;
}

.mockup-copy h2{
  margin:0 0 14px;
  font-size:clamp(28px,3vw,46px);
  line-height:1.04;
  font-weight:650;
  letter-spacing:-.025em;
}

.mockup-copy p{
  margin:0;
  max-width:36ch;
  font-size:15.5px;
  line-height:1.62;
  color:rgba(255,255,255,.84);
}

/* Mobile */
@media (max-width:900px){
  .node-cuenta{
    left:50% !important;
    top:13.5% !important;
  }

  .mockup-showcase{
    grid-template-columns:1fr;
    gap:12px;
    padding:86px 22px 22px;
    align-content:start;
    overflow:auto;
  }

  .mockup-stage{
    min-height:auto;
  }

  .mockup-stage img{
    width:min(74vw,320px);
    max-height:60vh;
  }

  .mockup-copy{
    text-align:center;
    margin:0 auto;
  }

  .mockup-copy p{
    margin:0 auto;
  }

  .mockup-copy h2{
    font-size:28px;
  }
}


/* ==========================================================
   v1.8 — EXPERIENCIA PREMIUM DE MOCKUP
   Mejor jerarquía, seguridad y transición de producto.
========================================================== */

.mockup-showcase{
  grid-template-columns:minmax(300px, 440px) minmax(320px, 460px) !important;
  gap:clamp(54px,6vw,100px) !important;
  padding:96px 8vw 56px !important;
}

/* Fondo menos pesado, más elegante */
.mockup-showcase::before{
  background:
    radial-gradient(circle at 38% 48%, rgba(32,26,58,.22), transparent 30%),
    linear-gradient(90deg, rgba(5,10,18,.62), rgba(5,10,18,.50)) !important;
  backdrop-filter:blur(4px) saturate(.82) !important;
}

/* Entrada más premium: escala + desplazamiento mínimo */
.mockup-stage{
  perspective:1200px;
}

.mockup-stage img{
  width:min(100%,410px) !important;
  max-height:78vh !important;
  opacity:0;
  transform:
    translateY(22px)
    translateX(-18px)
    scale(.955)
    rotateY(3deg) !important;

  transform-origin:center center;
  transition:
    opacity .8s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1) !important;

  filter:
    drop-shadow(0 28px 42px rgba(0,0,0,.28))
    drop-shadow(0 0 1px rgba(255,255,255,.25)) !important;
}

.hero-scene.show-mockup .mockup-stage img{
  opacity:1;
  transform:
    translateY(0)
    translateX(0)
    scale(1)
    rotateY(0deg) !important;

  animation:almaFloatPremium 8s ease-in-out infinite 1.1s !important;
}

@keyframes almaFloatPremium{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-4px) scale(1.002);
  }
}

/* Texto más editorial y refinado */
.mockup-copy{
  max-width:430px !important;
  opacity:0;
  transform:translateY(18px) !important;
  transition:
    opacity .75s ease .18s,
    transform .9s cubic-bezier(.16,1,.3,1) .18s !important;
}

.hero-scene.show-mockup .mockup-copy{
  opacity:1;
  transform:translateY(0) !important;
}

.mockup-eyebrow{
  font-size:11.5px !important;
  letter-spacing:.18em !important;
  color:#b8f3dd !important;
  margin-bottom:14px !important;
}

.mockup-copy h2{
  margin:0 0 18px !important;
  max-width:10ch;
  font-size:clamp(34px,3.3vw,52px) !important;
  line-height:.98 !important;
  font-weight:620 !important;
  letter-spacing:-.035em !important;
}

.mockup-lead{
  margin:0 0 26px !important;
  max-width:40ch !important;
  font-size:15.5px !important;
  line-height:1.62 !important;
  color:rgba(255,255,255,.82) !important;
}

/* Beneficios de seguridad */
.security-points{
  display:grid;
  gap:14px;
  margin-top:8px;
}

.security-point{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:start;
}

.security-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(174,238,219,.14);
  color:#baf1de;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(186,241,222,.28);
}

.security-point strong{
  display:block;
  margin-bottom:3px;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.security-point span:not(.security-icon){
  display:block;
  font-size:13.5px;
  line-height:1.45;
  color:rgba(255,255,255,.68);
}

/* El fondo original queda visible, pero con menos ruido */
.hero-scene.show-mockup .hero-master{
  transform:scale(1.025) !important;
  filter:saturate(.75) brightness(.72) !important;
  transition:
    transform 1.35s cubic-bezier(.16,1,.3,1),
    filter .8s ease !important;
}

/* La órbita seleccionada sigue siendo reconocible, pero no distrae */
.hero-scene.show-mockup .node-cuenta{
  opacity:.44 !important;
  transform:translate(-50%,-50%) scale(.94) !important;
}

/* Responsive */
@media (max-width:900px){
  .mockup-showcase{
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:82px 20px 30px !important;
  }

  .mockup-stage img{
    width:min(72vw,310px) !important;
    max-height:56vh !important;
  }

  .mockup-copy{
    max-width:360px !important;
    text-align:left !important;
  }

  .mockup-copy h2{
    max-width:12ch !important;
    font-size:30px !important;
  }

  .mockup-lead{
    font-size:14px !important;
  }

  .security-point strong{
    font-size:13px !important;
  }

  .security-point span:not(.security-icon){
    font-size:12.5px !important;
  }
}


/* ==========================================================
   v1.9 — REFINAMIENTO PREMIUM DE TIPOGRAFÍA Y MOVIMIENTO
========================================================== */

/* Título más contenido, elegante y fácil de leer */
.mockup-copy h2{
  max-width:13ch !important;
  font-size:clamp(30px,2.55vw,42px) !important;
  line-height:1.02 !important;
  font-weight:610 !important;
  letter-spacing:-.025em !important;
  margin-bottom:16px !important;
}

.mockup-lead{
  font-size:15px !important;
  line-height:1.58 !important;
  max-width:42ch !important;
  margin-bottom:24px !important;
}

/* El mockup entra con una transición más fina y controlada */
.mockup-stage{
  position:relative;
  perspective:1400px;
  transform-style:preserve-3d;
}

.mockup-stage::before{
  content:"";
  position:absolute;
  width:72%;
  height:74%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:42%;
  background:
    radial-gradient(circle,
      rgba(97,76,190,.18) 0%,
      rgba(54,42,112,.08) 38%,
      transparent 72%);
  filter:blur(24px);
  opacity:0;
  transition:opacity 1.2s ease .2s;
  pointer-events:none;
}

.hero-scene.show-mockup .mockup-stage::before{
  opacity:1;
}

/* Entrada inicial más premium */
.mockup-stage img{
  transform:
    translate3d(-20px,28px,0)
    scale(.948)
    rotateX(1.2deg)
    rotateY(4deg) !important;

  transform-origin:50% 54%;
  opacity:0;
  filter:
    drop-shadow(0 26px 34px rgba(0,0,0,.24))
    drop-shadow(0 0 1px rgba(255,255,255,.28)) !important;

  transition:
    opacity .78s ease,
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter 1s ease !important;
}

.hero-scene.show-mockup .mockup-stage img{
  opacity:1;
  transform:
    translate3d(0,0,0)
    scale(1)
    rotateX(0deg)
    rotateY(0deg) !important;

  animation:almaProductDrift 11s cubic-bezier(.45,.05,.55,.95) infinite 1.35s !important;
}

/* Movimiento casi imperceptible:
   ligera elevación + inclinación mínima + respiración de escala */
@keyframes almaProductDrift{
  0%,100%{
    transform:
      translate3d(0,0,0)
      scale(1)
      rotateX(0deg)
      rotateY(0deg);
  }

  25%{
    transform:
      translate3d(2px,-3px,0)
      scale(1.0015)
      rotateX(.15deg)
      rotateY(-.22deg);
  }

  50%{
    transform:
      translate3d(0,-5px,0)
      scale(1.0025)
      rotateX(.22deg)
      rotateY(.18deg);
  }

  75%{
    transform:
      translate3d(-2px,-2px,0)
      scale(1.001)
      rotateX(-.12deg)
      rotateY(.22deg);
  }
}

/* Sutil "shine" ambiental, lento y discreto */
.mockup-stage::after{
  content:"";
  position:absolute;
  inset:12% 18%;
  border-radius:28%;
  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.05) 42%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,.04) 58%,
      transparent 80%);
  transform:translateX(-140%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.hero-scene.show-mockup .mockup-stage::after{
  opacity:.7;
  animation:almaSoftShine 9s ease-in-out infinite 2.2s;
}

@keyframes almaSoftShine{
  0%,68%,100%{
    transform:translateX(-140%);
    opacity:0;
  }
  78%{
    opacity:.28;
  }
  86%{
    transform:translateX(140%);
    opacity:.10;
  }
}

/* Texto entra con secuencia más suave */
.mockup-copy{
  transform:translate3d(0,16px,0) !important;
  transition:
    opacity .72s ease .22s,
    transform .95s cubic-bezier(.16,1,.3,1) .22s !important;
}

.hero-scene.show-mockup .mockup-copy{
  transform:translate3d(0,0,0) !important;
}

/* Los puntos de seguridad aparecen con un stagger visual suave */
.security-point{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.16,1,.3,1);
}

.hero-scene.show-mockup .security-point:nth-child(1){
  opacity:1;
  transform:none;
  transition-delay:.42s;
}
.hero-scene.show-mockup .security-point:nth-child(2){
  opacity:1;
  transform:none;
  transition-delay:.54s;
}
.hero-scene.show-mockup .security-point:nth-child(3){
  opacity:1;
  transform:none;
  transition-delay:.66s;
}

/* Desktop amplio: mantener balance */
@media (min-width:1200px){
  .mockup-showcase{
    grid-template-columns:minmax(320px,420px) minmax(340px,430px) !important;
    gap:clamp(64px,6vw,96px) !important;
  }
}

/* Responsive móvil */
@media (max-width:900px){
  .mockup-copy h2{
    max-width:15ch !important;
    font-size:28px !important;
    line-height:1.04 !important;
  }

  .mockup-stage::after{
    display:none;
  }

  .hero-scene.show-mockup .mockup-stage img{
    animation:almaProductDriftMobile 10s ease-in-out infinite 1.2s !important;
  }

  @keyframes almaProductDriftMobile{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-3px) scale(1.0015); }
  }
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .mockup-stage img,
  .mockup-stage::after,
  .mockup-stage::before,
  .mockup-copy,
  .security-point{
    animation:none !important;
    transition-duration:.15s !important;
  }
}

/* v2.0 — headline definitivo */
.mockup-copy h2{
  max-width:none !important;
  font-size:clamp(30px,2.25vw,38px) !important;
  line-height:1.04 !important;
  font-weight:600 !important;
  letter-spacing:-.022em !important;
  margin:0 0 16px !important;
}
@media(max-width:900px){
  .mockup-copy h2{
    font-size:27px !important;
    max-width:none !important;
  }
}


/* v2.1 — Cuenta ALMA IA baja para liberar el encabezado del teléfono */
.node-cuenta{
  left:59.2% !important;
  top:22.8% !important;
}
@media (max-width:900px){
  .node-cuenta{
    left:50% !important;
    top:20.5% !important;
  }
}


/* ==========================================================
   v2.2 — REUBICACIÓN CUENTA ALMA IA
   Colocada entre Recuperación y ALMA Coins, en la zona baja.
========================================================== */

/* Desktop */
.node-cuenta{
  left:59.0% !important;
  top:72.0% !important;
}

/* Mantener el control por encima de las órbitas y sin invadir el teléfono */
.node-cuenta{
  z-index:12 !important;
}

/* Mobile: misma lógica, centrada abajo entre los nodos laterales */
@media (max-width:900px){
  .node-cuenta{
    left:50% !important;
    top:73.5% !important;
  }
}


/* ==========================================================
   v2.3 — MOVIMIENTO PREMIUM GARANTIZADO DEL MOCKUP
   El movimiento continuo se aplica al contenedor, no a la imagen,
   evitando conflictos con las transformaciones de entrada.
========================================================== */

.mockup-stage{
  will-change:transform;
  transform-origin:50% 52%;
}

/* La imagen conserva su animación de entrada, pero no la de flotación.
   El drift continuo lo controla JS sobre .mockup-stage. */
.hero-scene.show-mockup .mockup-stage img{
  animation:none !important;
}

/* Sombra que "respira" muy suavemente */
.hero-scene.show-mockup .mockup-stage{
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.10));
}

/* Un pequeño glow ambiental acompaña el movimiento */
.hero-scene.show-mockup .mockup-stage::before{
  animation:almaAmbientBreath 7.5s ease-in-out infinite !important;
}

@keyframes almaAmbientBreath{
  0%,100%{
    opacity:.45;
    transform:translate(-50%,-50%) scale(.98);
  }
  50%{
    opacity:.72;
    transform:translate(-50%,-50%) scale(1.035);
  }
}

/* No anulamos el movimiento del producto por prefers-reduced-motion.
   Si el usuario lo solicita explícitamente, mantenemos una versión mínima. */
@media (prefers-reduced-motion: reduce){
  .hero-scene.show-mockup .mockup-stage{
    animation:none !important;
  }
  .hero-scene.show-mockup .mockup-stage::before{
    animation:none !important;
  }
}


/* v2.4 — respiración ambiental más lenta y menos perceptible */
.hero-scene.show-mockup .mockup-stage::before{
  animation:almaAmbientBreathV24 12s cubic-bezier(.42,0,.58,1) infinite !important;
}
@keyframes almaAmbientBreathV24{
  0%,100%{
    opacity:.42;
    transform:translate(-50%,-50%) scale(.992);
  }
  50%{
    opacity:.58;
    transform:translate(-50%,-50%) scale(1.012);
  }
}


/* ==========================================================
   v2.5 — PRODUCT MOTION + CONTROLES PREMIUM
========================================================== */
.mockup-controls{
  position:absolute;
  top:clamp(92px, 10vh, 124px);
  right:clamp(28px, 4vw, 70px);
  display:flex;
  gap:10px;
  z-index:45;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.hero-scene.show-mockup .mockup-controls{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mockup-control{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(7,18,25,.50);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font:500 24px/1 system-ui,sans-serif;
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.mockup-control:hover{
  background:rgba(10,30,35,.72);
  border-color:rgba(255,255,255,.42);
  transform:scale(1.055);
}
.mockup-control:focus-visible{
  outline:2px solid rgba(132,238,210,.9);
  outline-offset:3px;
}
.audio-toggle{
  position:relative;
  font-size:20px;
}
.audio-toggle .audio-off{display:none}
.audio-toggle.muted .audio-on{display:none}
.audio-toggle.muted .audio-off{display:block}
.audio-toggle.muted{
  opacity:.68;
}

/* Zoom óptico lento: la escala es deliberadamente pequeña. */
.mockup-stage{
  transform-origin:50% 52%;
  will-change:transform;
}

@media (max-width:900px){
  .mockup-controls{
    top:78px;
    right:18px;
  }
  .mockup-control{
    width:40px;
    height:40px;
  }
}


/* ==========================================================
   v2.6 — AUDIO GLOBAL + MOVIMIENTO PREMIUM RESTAURADO
========================================================== */

.site-header{
  grid-template-columns:230px 1fr auto auto !important;
}

.global-audio-toggle{
  justify-self:end;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(5,18,25,.36);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font:600 18px/1 system-ui,sans-serif;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transition:background .25s ease, transform .25s ease, opacity .25s ease, border-color .25s ease;
}
.global-audio-toggle:hover{
  transform:scale(1.05);
  background:rgba(5,28,32,.56);
  border-color:rgba(255,255,255,.50);
}
.global-audio-toggle .ga-off{display:none}
.global-audio-toggle.muted .ga-on{display:none}
.global-audio-toggle.muted .ga-off{display:block}
.global-audio-toggle.muted{opacity:.62}

.site-header.scrolled .global-audio-toggle{
  color:#163c32;
  background:rgba(255,255,255,.72);
  border-color:rgba(13,98,75,.18);
}

@media(max-width:900px){
  .site-header{
    grid-template-columns:1fr auto auto !important;
  }
  .global-audio-toggle{
    width:38px;
    height:38px;
  }
}

/* Movimiento del mockup: visible, lento y suave.
   Lo aplica JS con Web Animations API al contenedor .mockup-stage. */
.mockup-stage{
  will-change:transform;
  transform-origin:50% 54%;
}


/* ==========================================================
   v2.7 — MOVIMIENTO DEL MOCKUP MÁS PERCEPTIBLE Y PREMIUM
   Se separa entrada y movimiento continuo para evitar conflictos.
========================================================== */

/* Estado base */
.mockup-stage{
  transform-origin:50% 55% !important;
  will-change:transform, filter;
}

/* El movimiento empieza sólo cuando JS agrega .motion-ready */
.hero-scene.show-mockup.motion-ready .mockup-stage{
  animation:almaPremiumCameraMove 12.5s cubic-bezier(.45,.05,.55,.95) infinite !important;
}

/* Movimiento tipo cámara/producto:
   - elevación visible pero suave
   - zoom respirado lento
   - deriva lateral mínima
*/
@keyframes almaPremiumCameraMove{
  0%{
    transform:translate3d(0, 5px, 0) scale(1.000);
    filter:drop-shadow(0 20px 28px rgba(0,0,0,.10));
  }
  18%{
    transform:translate3d(1px, 0, 0) scale(1.006);
    filter:drop-shadow(0 22px 30px rgba(0,0,0,.11));
  }
  38%{
    transform:translate3d(2px, -10px, 0) scale(1.014);
    filter:drop-shadow(0 26px 34px rgba(0,0,0,.12));
  }
  55%{
    transform:translate3d(0, -20px, 0) scale(1.024);
    filter:drop-shadow(0 30px 38px rgba(0,0,0,.13));
  }
  72%{
    transform:translate3d(-2px, -13px, 0) scale(1.018);
    filter:drop-shadow(0 27px 35px rgba(0,0,0,.12));
  }
  88%{
    transform:translate3d(-1px, -3px, 0) scale(1.008);
    filter:drop-shadow(0 23px 31px rgba(0,0,0,.11));
  }
  100%{
    transform:translate3d(0, 5px, 0) scale(1.000);
    filter:drop-shadow(0 20px 28px rgba(0,0,0,.10));
  }
}

/* El dispositivo también tiene una respiración óptica interna muy pequeña */
.hero-scene.show-mockup.motion-ready .mockup-stage img{
  animation:almaDeviceBreath 9.5s ease-in-out infinite !important;
}

@keyframes almaDeviceBreath{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.006);
  }
}

/* Halo que acompaña el movimiento sin llamar la atención */
.hero-scene.show-mockup.motion-ready .mockup-stage::before{
  animation:almaPremiumHalo 10.5s ease-in-out infinite !important;
}

@keyframes almaPremiumHalo{
  0%,100%{
    opacity:.34;
    transform:translate(-50%,-50%) scale(.985);
  }
  50%{
    opacity:.56;
    transform:translate(-50%,-50%) scale(1.035);
  }
}

/* En móvil reducimos amplitud, no eliminamos la sensación */
@media(max-width:900px){
  .hero-scene.show-mockup.motion-ready .mockup-stage{
    animation:almaPremiumCameraMoveMobile 11.5s ease-in-out infinite !important;
  }
  @keyframes almaPremiumCameraMoveMobile{
    0%,100%{ transform:translateY(3px) scale(1); }
    50%{ transform:translateY(-11px) scale(1.014); }
  }
  .hero-scene.show-mockup.motion-ready .mockup-stage img{
    animation:almaDeviceBreathMobile 9s ease-in-out infinite !important;
  }
  @keyframes almaDeviceBreathMobile{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.004); }
  }
}

/* Respeta reducción de movimiento */
@media(prefers-reduced-motion: reduce){
  .hero-scene.show-mockup.motion-ready .mockup-stage,
  .hero-scene.show-mockup.motion-ready .mockup-stage img,
  .hero-scene.show-mockup.motion-ready .mockup-stage::before{
    animation:none !important;
  }
}


/* ==========================================================
   v2.8 — Equipo + Diario Financiero
========================================================== */

.team-section{
  background:#ffffff;
}
.team-section h2{
  max-width:18ch;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.team-card{
  padding:24px;
  border:1px solid #e6ece9;
  border-radius:22px;
  background:#fbfcfb;
  min-height:160px;
}
.team-role{
  display:inline-block;
  margin-bottom:12px;
  color:var(--green);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.team-card h3{
  margin:0;
  font-size:19px;
  line-height:1.2;
}
.team-card p{
  margin:10px 0 0;
  color:#66716d;
  font-size:14px;
  line-height:1.45;
}

/* Ajustes para contenidos variables del showcase */
.mockup-copy h2{
  max-width:14ch !important;
}
.mockup-copy[data-feature="diario"] h2{
  max-width:12ch !important;
}

@media(max-width:1000px){
  .team-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .team-grid{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   v3.6 — PRUEBA DE LUPA
   Activa sólo para Cuenta ALMA IA.
========================================================== */

.mockup-stage{
  position:relative;
}

/* Sólo la imagen habilitada cambia el cursor */
.mockup-stage img.zoom-enabled{
  cursor:zoom-in;
}

/* Lente */
.mockup-magnifier{
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background-repeat:no-repeat;
  background-color:rgba(5,10,18,.92);
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.88);
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.22,1,.36,1),
    visibility .18s ease;

  z-index:30;
  will-change:left, top, background-position, transform;
}

.mockup-magnifier.visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

/* Halo fino interno tipo lente óptica */
.mockup-magnifier::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

/* No activar lupa en pantallas táctiles / pequeñas */
@media (hover:none), (max-width:900px){
  .mockup-magnifier{
    display:none !important;
  }
  .mockup-stage img.zoom-enabled{
    cursor:default;
  }
}


/* ==========================================================
   v3.7 — LUPA GLOBAL + BOTÓN CERRAR PREMIUM
========================================================== */

/* La lupa ya funciona sobre cualquier mockup activo */
.mockup-stage img.zoom-enabled{
  cursor:zoom-in;
}

/* Botón cerrar: geometría limpia, perfectamente centrado */
.mockup-close{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;

  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(6,16,24,.52) !important;
  color:#fff !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;

  backdrop-filter:blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(125%) !important;

  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

.mockup-close svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.mockup-close:hover{
  transform:scale(1.06) !important;
  background:rgba(8,28,34,.74) !important;
  border-color:rgba(255,255,255,.48) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    0 0 0 4px rgba(255,255,255,.04) !important;
}

.mockup-close:active{
  transform:scale(.97) !important;
}

.mockup-close:focus-visible{
  outline:2px solid rgba(132,238,210,.95) !important;
  outline-offset:3px !important;
}

/* Mejor alineación general de controles */
.mockup-controls{
  align-items:center !important;
}

/* Lente: pequeño refinamiento */
.mockup-magnifier{
  width:196px !important;
  height:196px !important;
  border:1px solid rgba(255,255,255,.48) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.07) !important;
}

@media (max-width:900px){
  .mockup-close{
    width:42px !important;
    height:42px !important;
  }
  .mockup-close svg{
    width:17px;
    height:17px;
  }
}


/* v3.8 — garantía global de lupa para todos los mockups */
.hero-scene.show-mockup .mockup-stage #mockupImage{
  cursor:zoom-in !important;
}

.hero-scene.show-mockup .mockup-stage{
  overflow:visible;
}

.mockup-magnifier{
  pointer-events:none !important;
  z-index:999 !important;
}


/* ==========================================================
   v3.9 — CÓMO FUNCIONA / PREMIUM EDITORIAL
========================================================== */

.how-section{
  position:relative;
  overflow:hidden;
  padding:118px 7vw 110px;
  background:
    radial-gradient(circle at 88% 18%, rgba(22,201,141,.055), transparent 27%),
    radial-gradient(circle at 9% 82%, rgba(159,61,245,.04), transparent 25%),
    #fff;
}

.how-section::before{
  content:"";
  position:absolute;
  left:7vw;
  right:7vw;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(13,98,75,.18), transparent);
}

.how-wrap{
  max-width:1280px;
}

.how-heading{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:76px;
  align-items:end;
  margin-bottom:62px;
}

.how-title h2{
  margin:8px 0 12px;
  font-size:clamp(46px,4.2vw,66px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:760;
  color:#0a1713;
}

.how-subtitle{
  margin:0;
  max-width:520px;
  font-size:20px;
  line-height:1.45;
  color:#51635d;
  letter-spacing:-.015em;
}

.how-intro{
  padding-bottom:4px;
}

.how-intro > p{
  margin:0;
  max-width:690px;
  font-size:17px;
  line-height:1.72;
  color:#40514b;
}

.how-principles{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}

.how-principles span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(13,98,75,.14);
  border-radius:999px;
  background:rgba(246,250,248,.82);
  color:#295447;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}

.how-flow-premium{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}

.how-flow-premium::before{
  content:"";
  position:absolute;
  top:49px;
  left:8.2%;
  right:8.2%;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(13,98,75,.10),
    rgba(13,98,75,.26) 17%,
    rgba(32,140,243,.22) 48%,
    rgba(159,61,245,.20) 75%,
    rgba(212,166,42,.18)
  );
  z-index:0;
}

.how-step{
  position:relative;
  z-index:1;
  min-height:258px;
  padding:20px 18px 22px;
  border:1px solid rgba(16,51,41,.085);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 50px rgba(9,45,34,.045);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.how-step:hover{
  transform:translateY(-5px);
  border-color:rgba(13,98,75,.16);
  box-shadow:0 24px 58px rgba(9,45,34,.085);
}

.how-step-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:19px;
  margin-bottom:20px;
  background:
    linear-gradient(145deg, rgba(235,249,244,.98), rgba(245,247,255,.94));
  border:1px solid rgba(13,98,75,.11);
  box-shadow:0 10px 24px rgba(13,98,75,.055);
}

.how-step:nth-child(2) .how-step-icon,
.how-step:nth-child(5) .how-step-icon{
  background:linear-gradient(145deg, rgba(241,247,255,.98), rgba(244,240,255,.96));
}

.how-step:nth-child(4) .how-step-icon,
.how-step:nth-child(6) .how-step-icon{
  background:linear-gradient(145deg, rgba(250,247,236,.98), rgba(239,249,245,.96));
}

.how-step-icon svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:#12664f;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.how-step:nth-child(2) .how-step-icon svg,
.how-step:nth-child(5) .how-step-icon svg{
  stroke:#315f9d;
}

.how-step:nth-child(4) .how-step-icon svg{
  stroke:#7860a7;
}

.how-step:nth-child(6) .how-step-icon svg{
  stroke:#9a7422;
}

.how-step-number{
  position:absolute;
  top:22px;
  right:18px;
  color:#a6b2ad;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.how-step h3{
  margin:0 0 10px;
  color:#10221c;
  font-size:17px;
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:760;
}

.how-step p{
  margin:0;
  color:#68766f;
  font-size:13.5px;
  line-height:1.55;
}

.how-closing{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(13,98,75,.09);
}

.how-closing-mark{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#16a879;
  box-shadow:0 0 0 6px rgba(22,168,121,.09);
}

.how-closing p{
  margin:0;
  color:#50615a;
  font-size:14px;
  line-height:1.55;
}

.how-closing strong{
  color:#183d31;
}

@media (max-width:1100px){
  .how-heading{
    grid-template-columns:1fr;
    gap:28px;
  }

  .how-flow-premium{
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }

  .how-flow-premium::before{
    display:none;
  }

  .how-step{
    min-height:230px;
  }
}

@media (max-width:720px){
  .how-section{
    padding:84px 20px 78px;
  }

  .how-title h2{
    font-size:42px;
  }

  .how-subtitle{
    font-size:18px;
  }

  .how-intro > p{
    font-size:15px;
  }

  .how-flow-premium{
    grid-template-columns:1fr;
  }

  .how-step{
    min-height:auto;
    padding:18px 18px 20px 88px;
  }

  .how-step-icon{
    position:absolute;
    left:18px;
    top:18px;
    width:52px;
    height:52px;
    margin:0;
    border-radius:17px;
  }

  .how-step-number{
    top:20px;
  }

  .how-closing{
    align-items:flex-start;
  }
}


/* ==========================================================
   v4.0 — CÓMO FUNCIONA / DARK PREMIUM
   Transición deliberada desde el hero cálido hacia una capa
   más tecnológica, sin modificar el resto del micrositio.
========================================================== */

#como-funciona.how-section{
  color:#f7fbfa;
  background:
    radial-gradient(circle at 86% 14%, rgba(0,220,180,.105), transparent 28%),
    radial-gradient(circle at 10% 88%, rgba(112,62,255,.095), transparent 27%),
    linear-gradient(180deg, #07100f 0%, #081513 50%, #050b0b 100%) !important;
}

#como-funciona.how-section::before{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(81,231,190,.30),
    rgba(126,92,255,.18),
    transparent
  ) !important;
}

#como-funciona .eyebrow{
  color:#68d8b7 !important;
}

#como-funciona .how-title h2{
  color:#f8fbfa !important;
  text-shadow:0 1px 20px rgba(255,255,255,.025);
}

#como-funciona .how-subtitle{
  color:#aebfba !important;
}

#como-funciona .how-intro > p{
  color:#c3cfcb !important;
}

#como-funciona .how-principles span{
  color:#d9f3eb !important;
  border-color:rgba(99,224,188,.20) !important;
  background:rgba(19,46,40,.62) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}

#como-funciona .how-flow-premium::before{
  background:linear-gradient(
    90deg,
    rgba(79,226,184,.10),
    rgba(79,226,184,.42) 18%,
    rgba(72,148,255,.35) 50%,
    rgba(150,91,255,.34) 76%,
    rgba(218,174,72,.28)
  ) !important;
}

#como-funciona .how-step{
  border-color:rgba(154,214,196,.115) !important;
  background:
    linear-gradient(180deg, rgba(16,30,28,.90), rgba(9,20,18,.94)) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#como-funciona .how-step:hover{
  border-color:rgba(100,225,188,.28) !important;
  box-shadow:
    0 28px 66px rgba(0,0,0,.34),
    0 0 0 1px rgba(82,219,180,.04),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#como-funciona .how-step-icon{
  background:linear-gradient(
    145deg,
    rgba(26,65,55,.96),
    rgba(18,37,42,.96)
  ) !important;
  border-color:rgba(105,226,190,.18) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#como-funciona .how-step:nth-child(2) .how-step-icon,
#como-funciona .how-step:nth-child(5) .how-step-icon{
  background:linear-gradient(
    145deg,
    rgba(22,45,63,.98),
    rgba(24,27,54,.96)
  ) !important;
}

#como-funciona .how-step:nth-child(4) .how-step-icon{
  background:linear-gradient(
    145deg,
    rgba(48,35,69,.98),
    rgba(24,28,49,.96)
  ) !important;
}

#como-funciona .how-step:nth-child(6) .how-step-icon{
  background:linear-gradient(
    145deg,
    rgba(64,52,27,.90),
    rgba(25,35,31,.96)
  ) !important;
}

#como-funciona .how-step-icon svg{
  stroke:#78e3c3 !important;
}

#como-funciona .how-step:nth-child(2) .how-step-icon svg,
#como-funciona .how-step:nth-child(5) .how-step-icon svg{
  stroke:#7fb5ff !important;
}

#como-funciona .how-step:nth-child(4) .how-step-icon svg{
  stroke:#b39cff !important;
}

#como-funciona .how-step:nth-child(6) .how-step-icon svg{
  stroke:#e1bd68 !important;
}

#como-funciona .how-step-number{
  color:#6f817b !important;
}

#como-funciona .how-step h3{
  color:#f3f8f6 !important;
}

#como-funciona .how-step p{
  color:#a8b8b3 !important;
}

#como-funciona .how-closing{
  border-top-color:rgba(112,217,186,.14) !important;
}

#como-funciona .how-closing-mark{
  background:#56dfb6 !important;
  box-shadow:0 0 0 6px rgba(86,223,182,.09) !important;
}

#como-funciona .how-closing p{
  color:#aebdb8 !important;
}

#como-funciona .how-closing strong{
  color:#e5f8f1 !important;
}

/* Suaviza la transición visual desde el hero */
#como-funciona.how-section{
  box-shadow:inset 0 28px 70px rgba(0,0,0,.10);
}


/* ==========================================================
   v4.1 — PROGRESSIVE REVEAL + CUSTOM SCROLLBAR
========================================================== */

/* Estado inicial elegante: sólo se activa si JS añade .reveal-ready */
.reveal-ready .how-heading,
.reveal-ready .how-step,
.reveal-ready .how-closing{
  opacity:0;
  transform:translateY(26px);
  filter:blur(4px);
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .78s cubic-bezier(.22,1,.36,1),
    filter .78s ease;
  will-change:opacity, transform, filter;
}

.reveal-ready .how-heading.is-visible,
.reveal-ready .how-step.is-visible,
.reveal-ready .how-closing.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Ritmo progresivo de las tarjetas */
.reveal-ready .how-step:nth-child(1){ transition-delay:.04s; }
.reveal-ready .how-step:nth-child(2){ transition-delay:.12s; }
.reveal-ready .how-step:nth-child(3){ transition-delay:.20s; }
.reveal-ready .how-step:nth-child(4){ transition-delay:.28s; }
.reveal-ready .how-step:nth-child(5){ transition-delay:.36s; }
.reveal-ready .how-step:nth-child(6){ transition-delay:.44s; }

.reveal-ready .how-closing{
  transition-delay:.18s;
}

/* La línea de proceso también aparece progresivamente */
.reveal-ready .how-flow-premium::before{
  transform:scaleX(0);
  transform-origin:left center;
  opacity:.15;
  transition:
    transform 1.25s cubic-bezier(.22,1,.36,1),
    opacity .65s ease;
}

.reveal-ready .how-flow-premium.flow-visible::before{
  transform:scaleX(1);
  opacity:1;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal-ready .how-heading,
  .reveal-ready .how-step,
  .reveal-ready .how-closing,
  .reveal-ready .how-flow-premium::before{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* Scrollbar premium — Chromium / Edge / Safari */
html{
  scrollbar-width:thin;
  scrollbar-color:#1d8d72 #07100f;
}

::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:#07100f;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    #1a6f5d 0%,
    #28b88f 52%,
    #8c6bd8 100%
  );
  border-radius:999px;
  border:3px solid #07100f;
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    #23967a 0%,
    #38cfa2 52%,
    #a084eb 100%
  );
}

/* Toque fino para no verse pesado */
::-webkit-scrollbar-corner{
  background:#07100f;
}


/* ==========================================================
   v4.2 — ALMA LAB / AVANCES PREMIUM
========================================================== */
.advances-section{
  position:relative;
  padding:110px 7vw 106px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(43,193,145,.055), transparent 24%),
    radial-gradient(circle at 94% 86%, rgba(111,79,221,.05), transparent 24%),
    #f6f8f7;
}

.advances-wrap{
  max-width:1280px;
}

.advances-heading{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(380px,1.05fr);
  gap:68px;
  align-items:end;
  margin-bottom:46px;
}

.advances-heading h2{
  margin:8px 0 0;
  max-width:730px;
  font-size:clamp(42px,4vw,64px);
  line-height:1;
  letter-spacing:-.045em;
  color:#0f1714;
}

.advances-intro{
  margin:0;
  max-width:650px;
  color:#53625d;
  font-size:16px;
  line-height:1.7;
}

.advances-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.advance-card{
  --card-accent:#1f8f72;
  --card-bg:#dff5ec;
  position:relative;
  min-height:338px;
  display:flex;
  flex-direction:column;
  padding:22px 22px 20px;
  border-radius:26px;
  border:1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--card-bg) 88%, white 12%),
      color-mix(in srgb, var(--card-bg) 62%, white 38%));
  box-shadow:0 18px 44px rgba(24,56,47,.055);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.advance-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-55px;
  top:-70px;
  border-radius:50%;
  background:color-mix(in srgb, var(--card-accent) 16%, transparent);
  filter:blur(2px);
  z-index:-1;
}

.advance-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--card-accent) 36%, transparent);
  box-shadow:0 26px 58px rgba(24,56,47,.10);
}

.tone-mint{ --card-accent:#168b69; --card-bg:#ccefe3; }
.tone-blue{ --card-accent:#356fab; --card-bg:#d8e9fb; }
.tone-lilac{ --card-accent:#7657b8; --card-bg:#e8dcfb; }
.tone-gold{ --card-accent:#9a7420; --card-bg:#f7e9b8; }
.tone-coral{ --card-accent:#b75b58; --card-bg:#f8d4cf; }
.tone-teal{ --card-accent:#23898a; --card-bg:#d5eeee; }

.advance-card.featured{
  box-shadow:
    0 22px 52px rgba(183,91,88,.11),
    inset 0 0 0 1px rgba(255,255,255,.28);
}

.advance-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}

.advance-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(36,61,53,.06);
}

.advance-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:var(--card-accent);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.advance-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
  color:var(--card-accent);
  background:rgba(255,255,255,.52);
}

.advance-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--card-accent);
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.advance-card h3{
  margin:0 0 10px;
  color:#15201c;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.advance-card p{
  margin:0;
  color:#52605b;
  font-size:13.5px;
  line-height:1.58;
}

.advance-progress{
  margin-top:auto;
  padding-top:22px;
}

.advance-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:#53615c;
  font-size:11px;
  font-weight:700;
}

.advance-progress-meta strong{
  color:#1a2722;
  font-size:12px;
}

.advance-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  box-shadow:inset 0 0 0 1px rgba(44,62,56,.055);
}

.advance-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--card-accent);
  box-shadow:0 0 20px color-mix(in srgb, var(--card-accent) 28%, transparent);
  transition:width 1.35s cubic-bezier(.22,1,.36,1);
}

.advance-card.is-visible .advance-fill{
  width:var(--progress);
}

.advance-card.pending .advance-track{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(35,137,138,.10) 0 8px,
      rgba(255,255,255,.60) 8px 14px
    );
}

.advances-foot{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(28,77,61,.10);
}

.advances-foot-dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  margin-top:6px;
  border-radius:50%;
  background:#198d6c;
  box-shadow:0 0 0 6px rgba(25,141,108,.09);
}

.advances-foot p{
  margin:0;
  max-width:900px;
  color:#59665f;
  font-size:13.5px;
  line-height:1.6;
}

.advances-foot strong{
  color:#173d31;
}

/* Entrada progresiva real */
.advances-section.reveal-ready .advances-heading,
.advances-section.reveal-ready .advance-card,
.advances-section.reveal-ready .advances-foot{
  opacity:0;
  transform:translateY(28px);
}

.advances-section.reveal-ready .advances-heading{
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

.advances-section.reveal-ready .advance-card{
  transition:
    opacity .62s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.advances-section.reveal-ready .advances-foot{
  transition:opacity .65s ease, transform .7s cubic-bezier(.22,1,.36,1);
}

.advances-section.reveal-ready .is-visible{
  opacity:1;
  transform:translateY(0);
}

.advances-section.reveal-ready .advance-card:nth-child(1){ transition-delay:.05s; }
.advances-section.reveal-ready .advance-card:nth-child(2){ transition-delay:.12s; }
.advances-section.reveal-ready .advance-card:nth-child(3){ transition-delay:.19s; }
.advances-section.reveal-ready .advance-card:nth-child(4){ transition-delay:.26s; }
.advances-section.reveal-ready .advance-card:nth-child(5){ transition-delay:.33s; }
.advances-section.reveal-ready .advance-card:nth-child(6){ transition-delay:.40s; }

@media (max-width:1050px){
  .advances-heading{
    grid-template-columns:1fr;
    gap:24px;
  }
  .advances-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:680px){
  .advances-section{
    padding:84px 20px 76px;
  }
  .advances-grid{
    grid-template-columns:1fr;
  }
  .advance-card{
    min-height:320px;
  }
}

@media (prefers-reduced-motion:reduce){
  .advances-section.reveal-ready .advances-heading,
  .advances-section.reveal-ready .advance-card,
  .advances-section.reveal-ready .advances-foot{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .advance-fill{
    transition:none !important;
    width:var(--progress) !important;
  }
}


/* ==========================================================
   v4.3 — ALMA LAB / ANIMACIÓN POR ENTRADA DE SECCIÓN
========================================================== */

/* La sección completa parte en estado preparado */
#avances.reveal-ready .advance-card{
  opacity:0;
  transform:translateY(34px) scale(.985);
}

#avances.reveal-ready .advance-icon{
  opacity:0;
  transform:scale(.78) rotate(-5deg);
}

#avances.reveal-ready .advance-kicker,
#avances.reveal-ready .advance-card h3,
#avances.reveal-ready .advance-card p,
#avances.reveal-ready .advance-progress{
  opacity:0;
  transform:translateY(12px);
}

/* La barra SIEMPRE inicia en cero hasta que la tarjeta se active */
#avances .advance-fill{
  width:0 !important;
  transition:
    width 1.8s cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease !important;
}

/* Tarjeta visible */
#avances .advance-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Micro-secuencia interna */
#avances .advance-card.is-visible .advance-icon{
  opacity:1;
  transform:scale(1) rotate(0);
  transition:
    opacity .46s ease .10s,
    transform .66s cubic-bezier(.16,1,.3,1) .10s;
}

#avances .advance-card.is-visible .advance-kicker{
  opacity:1;
  transform:translateY(0);
  transition:opacity .42s ease .18s, transform .58s cubic-bezier(.16,1,.3,1) .18s;
}

#avances .advance-card.is-visible h3{
  opacity:1;
  transform:translateY(0);
  transition:opacity .44s ease .24s, transform .62s cubic-bezier(.16,1,.3,1) .24s;
}

#avances .advance-card.is-visible p{
  opacity:1;
  transform:translateY(0);
  transition:opacity .44s ease .30s, transform .62s cubic-bezier(.16,1,.3,1) .30s;
}

#avances .advance-card.is-visible .advance-progress{
  opacity:1;
  transform:translateY(0);
  transition:opacity .44s ease .38s, transform .62s cubic-bezier(.16,1,.3,1) .38s;
}

/* La barra empieza DESPUÉS de que el contenido de la tarjeta apareció */
#avances .advance-card.bar-animate .advance-fill{
  width:var(--progress) !important;
}

/* Pequeño brillo de progreso mientras avanza */
#avances .advance-card.bar-animate .advance-fill{
  box-shadow:
    0 0 18px color-mix(in srgb, var(--card-accent) 35%, transparent),
    0 0 5px color-mix(in srgb, var(--card-accent) 52%, transparent);
}

/* Resalta discretamente el porcentaje al completar */
#avances .advance-card.progress-complete .advance-progress-meta strong{
  color:var(--card-accent);
  transform:scale(1.05);
  transition:color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}

/* Entrada del encabezado y pie cuando la sección entra */
#avances.reveal-ready .advances-heading,
#avances.reveal-ready .advances-foot{
  opacity:0;
  transform:translateY(24px);
}

#avances.reveal-ready.section-active .advances-heading{
  opacity:1;
  transform:translateY(0);
  transition:opacity .62s ease, transform .72s cubic-bezier(.16,1,.3,1);
}

#avances.reveal-ready .advances-foot.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Evita que reglas anteriores de nth-child disparen todo al mismo tiempo */
#avances.reveal-ready .advance-card:nth-child(1),
#avances.reveal-ready .advance-card:nth-child(2),
#avances.reveal-ready .advance-card:nth-child(3),
#avances.reveal-ready .advance-card:nth-child(4),
#avances.reveal-ready .advance-card:nth-child(5),
#avances.reveal-ready .advance-card:nth-child(6){
  transition-delay:0s !important;
}

@media (prefers-reduced-motion: reduce){
  #avances.reveal-ready .advance-card,
  #avances.reveal-ready .advance-icon,
  #avances.reveal-ready .advance-kicker,
  #avances.reveal-ready .advance-card h3,
  #avances.reveal-ready .advance-card p,
  #avances.reveal-ready .advance-progress,
  #avances.reveal-ready .advances-heading,
  #avances.reveal-ready .advances-foot{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  #avances .advance-fill{
    width:var(--progress) !important;
    transition:none !important;
  }
}


/* ==========================================================
   v4.4 — EQUIPO ALMA IA / DARK PREMIUM
========================================================== */
.premium-team{
  position:relative;
  overflow:hidden;
  padding:112px 7vw 110px;
  background:
    radial-gradient(circle at 8% 12%, rgba(92,58,220,.10), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(21,174,132,.09), transparent 28%),
    linear-gradient(180deg,#080a0d 0%,#0c0f13 52%,#080a0d 100%);
  color:#fff;
}

.premium-team::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}

.team-wrap{
  position:relative;
  z-index:1;
  max-width:1280px;
}

.team-heading{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
  gap:68px;
  align-items:end;
  margin-bottom:48px;
}

.premium-team .eyebrow{
  color:#6ce2bf;
}

.premium-team h2{
  margin:8px 0 0;
  max-width:720px;
  color:#f7f9f8;
  font-size:clamp(42px,4vw,62px);
  line-height:1;
  letter-spacing:-.045em;
}

.team-intro{
  margin:0;
  max-width:660px;
  color:#aeb9b6;
  font-size:16px;
  line-height:1.7;
}

.premium-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.premium-member{
  position:relative;
  overflow:hidden;
  min-height:500px;
  display:flex;
  flex-direction:column;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(22,25,30,.94),rgba(12,15,18,.98));
  box-shadow:
    0 22px 58px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    box-shadow .28s ease;
}

.premium-member:hover{
  transform:translateY(-6px);
  border-color:rgba(111,226,191,.22);
  box-shadow:
    0 30px 70px rgba(0,0,0,.36),
    0 0 0 1px rgba(108,226,191,.025);
}

.team-photo{
  height:292px;
  overflow:hidden;
  background:#101317;
}

.team-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 16%;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}

.premium-member:hover .team-photo img{
  transform:scale(1.035);
}

.team-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:20px 20px 18px;
}

.premium-team .team-role{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(99,222,187,.18);
  background:rgba(27,66,56,.36);
  color:#7de5c6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.premium-member h3{
  margin:0 0 9px;
  color:#f8faf9;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.02em;
}

.team-strength{
  margin:0;
  color:#aab5b1;
  font-size:13px;
  line-height:1.55;
}

.team-links{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding-top:18px;
}

.team-social{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#d7e3df;
  text-decoration:none;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.team-social svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.team-social:hover{
  transform:translateY(-2px);
  color:#ffffff;
  border-color:rgba(111,226,191,.35);
  background:rgba(37,104,84,.30);
}

.pending-link{
  opacity:.38;
  cursor:default;
}

.pending-link:hover{
  transform:none;
  color:#d7e3df;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.orcid-link{
  border-color:rgba(166,206,57,.26);
  color:#b7dc58;
  font-weight:850;
  font-size:12px;
}

.orcid-link:hover{
  border-color:rgba(166,206,57,.42);
  background:rgba(166,206,57,.10);
  color:#c8e77a;
}

.mentor-card{
  border-color:rgba(197,160,99,.18);
}

@media (max-width:1100px){
  .team-heading{
    grid-template-columns:1fr;
    gap:24px;
  }
  .premium-team-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:680px){
  .premium-team{
    padding:84px 20px 78px;
  }
  .premium-team-grid{
    grid-template-columns:1fr;
  }
  .team-photo{
    height:360px;
  }
}


/* ==========================================================
   v4.5 — EQUIPO: CARRERAS + FOOTER COMPLETO
========================================================== */

.premium-team .team-career{
  margin:0 0 8px;
  color:#dfe8e5;
  font-size:12.5px;
  line-height:1.45;
  font-weight:650;
}

.premium-team .team-strength{
  color:#9fada8;
}

/* Footer claro para cerrar el sitio y separar legal / contacto */
.premium-footer{
  background:#f6f8f7;
  border-top:1px solid rgba(20,67,53,.10);
  color:#20302a;
  padding:64px 7vw 28px;
}

.footer-wrap{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.7fr repeat(3,1fr);
  gap:42px;
  align-items:start;
}

.footer-brand img{
  width:168px;
  height:auto;
  display:block;
  margin-bottom:16px;
}

.footer-copy{
  margin:0 0 10px;
  color:#173d31;
  font-size:16px;
  font-weight:750;
}

.footer-note{
  margin:0;
  max-width:520px;
  color:#66736e;
  font-size:12.5px;
  line-height:1.65;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-col h4{
  margin:0 0 6px;
  color:#173d31;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer-col a,
.footer-col span{
  color:#5d6c66;
  font-size:12.5px;
  line-height:1.5;
  text-decoration:none;
}

.footer-col a:hover{
  color:#136a52;
}

.footer-legal{
  max-width:1280px;
  margin:34px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(20,67,53,.10);
}

.footer-legal p{
  margin:0 0 10px;
  color:#7a8581;
  font-size:11px;
  line-height:1.6;
}

.footer-legal strong{
  color:#42524c;
}

.footer-bottom{
  margin-top:16px !important;
  color:#596761 !important;
  font-weight:650;
}

@media (max-width:1000px){
  .footer-wrap{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  .premium-footer{
    padding:54px 20px 24px;
  }
  .footer-wrap{
    grid-template-columns:1fr;
    gap:28px;
  }
}


/* ==========================================================
   v4.6 — ACERCA DE ALMA / MODAL DESDE MENÚ
========================================================== */
.alma-about-modal{
  position:fixed;
  inset:0;
  z-index:1500;
  display:grid;
  place-items:center;
  padding:28px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .36s ease, visibility .36s ease;
}

.alma-about-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.alma-about-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,8,8,.76);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.alma-about-panel{
  position:relative;
  z-index:1;
  width:min(920px,94vw);
  max-height:90vh;
  overflow:auto;
  padding:44px 52px 42px;
  border:1px solid rgba(108,226,191,.16);
  border-radius:32px;
  background:
    radial-gradient(circle at 88% 10%,rgba(92,59,220,.13),transparent 28%),
    radial-gradient(circle at 8% 90%,rgba(21,174,132,.11),transparent 28%),
    linear-gradient(155deg,#101719,#080d0e);
  box-shadow:0 38px 100px rgba(0,0,0,.50);
  transform:translateY(18px) scale(.985);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.alma-about-modal.is-open .alma-about-panel{
  transform:translateY(0) scale(1);
}

.alma-about-close{
  position:absolute;
  top:20px;
  right:20px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(255,255,255,.055);
  color:#e8efed;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.alma-about-close:hover{
  transform:rotate(5deg) scale(1.05);
  background:rgba(92,226,187,.11);
  border-color:rgba(92,226,187,.30);
}

.alma-about-close svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.alma-about-brand{
  margin-bottom:28px;
}

.alma-about-brand img{
  display:block;
  width:174px;
  height:auto;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.12));
}

.alma-about-content{
  max-width:780px;
}

.alma-about-eyebrow{
  margin:0 0 10px;
  color:#6fe0bf;
  font-size:11px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.alma-about-content h2{
  margin:0 0 22px;
  max-width:720px;
  color:#f8faf9;
  font-size:clamp(36px,4.2vw,56px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.alma-about-copy{
  margin:0;
  color:#b7c4c0;
  font-size:15.5px;
  line-height:1.78;
}

.alma-about-copy strong{
  color:#edf5f2;
  font-weight:700;
}

.alma-about-concepts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:34px;
}

.alma-about-concept{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  color:#dce8e4;
  font-size:12px;
  font-weight:750;
}

.alma-about-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(80,213,174,.09);
  border:1px solid rgba(80,213,174,.13);
}

.alma-about-concept:nth-child(2) .alma-about-icon{
  background:rgba(79,141,236,.10);
  border-color:rgba(79,141,236,.15);
}

.alma-about-concept:nth-child(3) .alma-about-icon{
  background:rgba(144,94,231,.11);
  border-color:rgba(144,94,231,.15);
}

.alma-about-concept:nth-child(4) .alma-about-icon{
  background:rgba(205,165,76,.10);
  border-color:rgba(205,165,76,.15);
}

.alma-about-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:#72dfbf;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.alma-about-concept:nth-child(2) svg{stroke:#7bb4ff;}
.alma-about-concept:nth-child(3) svg{stroke:#b39cff;}
.alma-about-concept:nth-child(4) svg{stroke:#e0bd69;}

body.about-alma-open{
  overflow:hidden;
}

@media(max-width:760px){
  .alma-about-modal{padding:14px;}
  .alma-about-panel{padding:38px 24px 28px;border-radius:25px;}
  .alma-about-concepts{grid-template-columns:repeat(2,1fr);}
  .alma-about-brand img{width:145px;}
}

@media(max-width:460px){
  .alma-about-concepts{grid-template-columns:1fr 1fr;}
  .alma-about-copy{font-size:14px;}
}


/* ==========================================================
   v4.7 — INNOVACIÓN + COMPARATIVO HTML
========================================================== */
.innovation-section{
  position:relative;
  padding:112px 7vw 104px;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%,rgba(100,62,236,.06),transparent 25%),
    radial-gradient(circle at 7% 88%,rgba(26,173,132,.05),transparent 26%),
    #fff;
}

.innovation-wrap{max-width:1280px;}

.innovation-heading{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr);
  gap:70px;
  align-items:end;
  margin-bottom:40px;
}

.innovation-heading h2{
  margin:8px 0 0;
  max-width:720px;
  color:#0c1420;
  font-size:clamp(42px,4vw,62px);
  line-height:1;
  letter-spacing:-.045em;
}

.innovation-intro{
  margin:0;
  color:#596762;
  font-size:16px;
  line-height:1.72;
}

.innovation-pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:64px;
}

.innovation-pillar{
  display:flex;
  gap:14px;
  padding:18px;
  min-height:132px;
  border:1px solid rgba(30,71,59,.09);
  border-radius:22px;
  background:#f8faf9;
  box-shadow:0 14px 34px rgba(23,61,49,.04);
}

.innovation-pillar:nth-child(2){background:#f4f7ff;}
.innovation-pillar:nth-child(3){background:#faf6ff;}
.innovation-pillar:nth-child(4){background:#fff9ec;}

.innovation-pillar-icon{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:14px;
  background:#e3f5ee;
}

.innovation-pillar:nth-child(2) .innovation-pillar-icon{background:#e7efff;}
.innovation-pillar:nth-child(3) .innovation-pillar-icon{background:#eee5ff;}
.innovation-pillar:nth-child(4) .innovation-pillar-icon{background:#f8e9be;}

.innovation-pillar-icon svg{
  width:25px;height:25px;
  fill:none;stroke:#14745b;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.innovation-pillar:nth-child(2) svg{stroke:#3569a4;}
.innovation-pillar:nth-child(3) svg{stroke:#7953b6;}
.innovation-pillar:nth-child(4) svg{stroke:#9a7420;}

.innovation-pillar h3{
  margin:1px 0 7px;
  color:#142019;
  font-size:15px;
  line-height:1.2;
}

.innovation-pillar p{
  margin:0;
  color:#64716c;
  font-size:12.5px;
  line-height:1.5;
}

.competition-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:22px;
  padding-top:4px;
}

.competition-kicker{
  margin:0 0 5px;
  color:#166d55;
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.competition-head h3{
  margin:0;
  color:#071a2d;
  font-size:clamp(34px,3.4vw,52px);
  line-height:.98;
  letter-spacing:-.04em;
}

.competition-head h3 span{
  color:#5421e6;
}

.competition-head p:last-child{
  margin:8px 0 0;
  color:#5421e6;
  font-size:16px;
  font-weight:760;
}

.competition-table-shell{
  border:1px solid rgba(50,77,70,.10);
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(24,56,47,.07);
  overflow:hidden;
}

.competition-table-scroll{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:#6e4be5 #eef2f1;
}

.competition-table{
  width:100%;
  min-width:1060px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:12px;
  color:#24322d;
}

.competition-table th,
.competition-table td{
  padding:10px 12px;
  border-right:1px solid rgba(50,77,70,.08);
  border-bottom:1px solid rgba(50,77,70,.08);
  vertical-align:middle;
}

.competition-table th:first-child,
.competition-table td:first-child{
  width:30%;
  text-align:left;
}

.competition-table th:not(:first-child),
.competition-table td:not(:first-child){
  width:17.5%;
  text-align:center;
}

.competition-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f7f9f8;
  color:#13277a;
  font-weight:750;
}

.competition-table thead th:first-child{
  font-size:14px;
  color:#1630a3;
}

.competition-table thead strong{
  display:block;
  margin-bottom:4px;
  font-size:16px;
  line-height:1.1;
  color:#152680;
}

.competition-table thead small{
  display:block;
  color:#4e64c0;
  font-size:10px;
  line-height:1.25;
  font-weight:650;
}

.competition-table .alma-col{
  background:rgba(214,248,232,.52);
}

.competition-table thead .alma-col{
  background:linear-gradient(180deg,#e8fff3,#dff8eb);
}

.competition-table thead .alma-col strong{
  color:#111;
}

.competition-table thead .alma-col small{
  color:#17654f;
}

.competition-table tbody tr:last-child td{border-bottom:0;}
.competition-table th:last-child,
.competition-table td:last-child{border-right:0;}

.competition-table td:first-child{
  color:#213da8;
  font-weight:540;
}

.competition-table .yes{
  color:#157458;
  font-size:17px;
  font-weight:900;
}

.competition-table .alma-col.yes{
  color:#6425e8;
  font-size:19px;
}

.competition-table .highlight-row td{
  background:rgba(197,244,218,.32);
}

.competition-table .highlight-row .alma-col{
  background:rgba(197,244,218,.66);
}

.competition-closing{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:26px;
  padding:19px 20px;
  border-radius:18px;
  background:#f7faf8;
  border:1px solid rgba(28,87,68,.08);
}

.competition-closing > span{
  width:9px;height:9px;flex:0 0 auto;
  margin-top:6px;border-radius:50%;
  background:#176f56;
  box-shadow:0 0 0 6px rgba(23,111,86,.08);
}

.competition-closing p{
  margin:0;
  color:#55635e;
  font-size:13.5px;
  line-height:1.65;
}

.competition-closing strong{color:#173d31;}

.competition-note{
  margin:14px 0 0;
  color:#87918d;
  font-size:10.5px;
  line-height:1.5;
}

@media(max-width:1050px){
  .innovation-heading{grid-template-columns:1fr;gap:24px;}
  .innovation-pillars{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:680px){
  .innovation-section{padding:82px 20px 76px;}
  .innovation-pillars{grid-template-columns:1fr;}
  .competition-head h3{font-size:38px;}
}

/* Aparición progresiva ligera */
.innovation-section.reveal-ready .innovation-heading,
.innovation-section.reveal-ready .innovation-pillar,
.innovation-section.reveal-ready .competition-head,
.innovation-section.reveal-ready .competition-table-shell,
.innovation-section.reveal-ready .competition-closing{
  opacity:0;
  transform:translateY(24px);
}

.innovation-section.reveal-ready .is-visible{
  opacity:1;
  transform:translateY(0);
  transition:opacity .65s ease, transform .72s cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   v4.8 — GARANTÍA DE VISIBILIDAD / INNOVACIÓN
========================================================== */
#innovacion.innovation-section{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

#innovacion .innovation-heading,
#innovacion .innovation-pillar,
#innovacion .competition-head,
#innovacion .competition-table-shell,
#innovacion .competition-closing{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* Anula cualquier estado de reveal anterior para esta sección */
#innovacion.reveal-ready .innovation-heading,
#innovacion.reveal-ready .innovation-pillar,
#innovacion.reveal-ready .competition-head,
#innovacion.reveal-ready .competition-table-shell,
#innovacion.reveal-ready .competition-closing{
  opacity:1 !important;
  transform:none !important;
}


/* ==========================================================
   v4.9 — ACERCA DE ALMA / LOGO BLANCO + JERARQUÍA
========================================================== */
#almaAboutModal .alma-about-brand img{
  width:205px;
  max-width:42vw;
  filter:none;
}

#almaAboutModal .alma-about-eyebrow{
  margin-top:4px;
  margin-bottom:13px;
  font-size:12px;
  line-height:1.25;
  letter-spacing:.105em;
}

#almaAboutModal .alma-about-content h2{
  max-width:760px;
  margin-bottom:24px;
  font-size:clamp(44px,4.8vw,66px);
  line-height:.98;
  letter-spacing:-.052em;
  text-wrap:balance;
}

#almaAboutModal .alma-about-copy{
  max-width:790px;
  font-size:16px;
  line-height:1.78;
}

#almaAboutModal .alma-about-concept > span:last-child{
  font-size:13px;
  font-weight:800;
}

@media(max-width:760px){
  #almaAboutModal .alma-about-brand img{width:175px;}
  #almaAboutModal .alma-about-content h2{
    font-size:clamp(38px,10vw,52px);
    line-height:1;
  }
}


/* ==========================================================
   v5.0 — SOLO SECCIÓN INNOVACIÓN ALMA IA EN NEGRO
   El resto del micrositio permanece sin cambios.
========================================================== */
#innovacion.innovation-section{
  background:#080b0d !important;
  color:#ffffff;
}

#innovacion .eyebrow{
  color:#72e1c1;
}

#innovacion .innovation-heading h2{
  color:#ffffff;
}

#innovacion .innovation-intro{
  color:#b8c3bf;
}

/* Las tarjetas conservan sus colores claros/pastel para contraste */
#innovacion .innovation-pillar{
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}

/* Encabezado del comparativo legible sobre negro */
#innovacion .competition-kicker{
  color:#72e1c1;
}

#innovacion .competition-head h3{
  color:#ffffff;
}

#innovacion .competition-head h3 span,
#innovacion .competition-head p:last-child{
  color:#9a7cff;
}

/* Tabla permanece clara para máxima lectura */
#innovacion .competition-table-shell{
  box-shadow:0 24px 58px rgba(0,0,0,.34);
}

/* Cierre adaptado al fondo oscuro */
#innovacion .competition-closing{
  background:#101719;
  border-color:rgba(111,226,191,.14);
}

#innovacion .competition-closing p{
  color:#b5c1bd;
}

#innovacion .competition-closing strong{
  color:#f4f8f6;
}

#innovacion .competition-note{
  color:#899590;
}


/* ==========================================================
   v5.1 — DIVISOR ORO ENTRE INNOVACIÓN Y EQUIPO
   Único cambio solicitado.
========================================================== */
#innovacion.innovation-section{
  position:relative;
}

#innovacion.innovation-section::after{
  content:"";
  position:absolute;
  left:7vw;
  right:7vw;
  bottom:0;
  height:1px;
  background:#C5A063;
  opacity:.78;
  pointer-events:none;
}

@media(max-width:680px){
  #innovacion.innovation-section::after{
    left:20px;
    right:20px;
  }
}

/* v5.3 CTA VIDEO */
.video-alma-trigger{display:inline-flex!important;align-items:center;gap:9px;white-space:nowrap}
.video-cta-play{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2)}
.video-cta-play svg{width:13px;height:13px;fill:currentColor}
.alma-video-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;pointer-events:none;transition:.35s}
.alma-video-modal.is-open{visibility:visible;opacity:1;pointer-events:auto}
.alma-video-backdrop{position:absolute;inset:0;background:rgba(2,7,8,.84);backdrop-filter:blur(16px)}
.alma-video-panel{position:relative;z-index:1;width:min(1120px,95vw);max-height:94vh;overflow:auto;padding:38px;border-radius:30px;border:1px solid rgba(108,226,191,.15);background:radial-gradient(circle at 90% 5%,rgba(98,55,229,.13),transparent 28%),linear-gradient(150deg,#101719,#070b0d);box-shadow:0 40px 110px rgba(0,0,0,.58)}
.alma-video-close{position:absolute;top:18px;right:18px;z-index:4;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.alma-video-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.alma-video-copy{max-width:820px;margin:0 54px 24px 0}.alma-video-eyebrow{margin:0 0 8px;color:#6fe0bf;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.alma-video-copy h2{margin:0 0 12px;color:#fff;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.045em}
.alma-video-copy>p:last-child{margin:0;max-width:760px;color:#b7c4c0;font-size:14px;line-height:1.65}
.alma-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#000;border:1px solid rgba(255,255,255,.09)}
.alma-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.alma-video-footer{padding-top:15px;text-align:right;color:#7f8d88;font-size:11px;font-weight:650}
body.alma-video-open{overflow:hidden}@media(max-width:700px){.alma-video-modal{padding:10px}.alma-video-panel{padding:28px 16px 18px;border-radius:22px}.alma-video-copy{margin-right:44px}}


/* ==========================================================
   v5.5 — MICRO TUTORÍA “DESCUBRE”
   Señala Cuenta ALMA IA durante ~3 s y desaparece.
========================================================== */
.alma-discover-hint{
  position:fixed;
  z-index:1450;
  width:108px;
  height:74px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-100%,-55%) scale(.96);
  transition:opacity .32s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility .32s;
}

.alma-discover-hint.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-100%,-55%) scale(1);
}

.alma-discover-label{
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:6px 12px;
  border-radius:999px;
  background:#0b1715;
  border:1px solid rgba(111,224,191,.34);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.035em;
}

.alma-discover-label::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:#6fe0bf;
  box-shadow:0 0 0 5px rgba(111,224,191,.09);
  animation:almaHintPulse 1.25s ease-in-out infinite;
}

.alma-discover-arrow{
  position:absolute;
  right:-1px;
  bottom:0;
  width:70px;
  height:42px;
  overflow:visible;
  animation:almaHintArrow 1.05s ease-in-out infinite alternate;
}

.alma-discover-arrow path{
  fill:none;
  stroke:#C5A063;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@keyframes almaHintPulse{
  0%,100%{transform:scale(.9);opacity:.72}
  50%{transform:scale(1.18);opacity:1}
}

@keyframes almaHintArrow{
  from{transform:translate(0,0)}
  to{transform:translate(5px,4px)}
}

@media(max-width:700px){
  .alma-discover-hint{
    width:96px;
    transform:translate(-92%,-48%) scale(.96);
  }
  .alma-discover-hint.is-visible{
    transform:translate(-92%,-48%) scale(1);
  }
  .alma-discover-label{font-size:10px;padding:6px 10px;}
  .alma-discover-arrow{width:60px;}
}

@media(prefers-reduced-motion:reduce){
  .alma-discover-label::before,
  .alma-discover-arrow{animation:none;}
}


/* ==========================================================
   v5.6 — MICRO TUTORÍA EVIDENTE / CUENTA ALMA IA
========================================================== */
#almaDiscoverHint{
  position:fixed;
  z-index:5000;
  width:220px;
  height:150px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-92%,-36%) scale(.88);
  transition:
    opacity .28s ease,
    transform .42s cubic-bezier(.22,1,.36,1),
    visibility .28s ease;
}

#almaDiscoverHint.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-92%,-36%) scale(1);
}

#almaDiscoverHint .alma-discover-bubble{
  position:absolute;
  left:0;
  top:0;
  min-width:168px;
  padding:13px 16px 14px;
  border-radius:18px;
  background:#ffffff;
  border:2px solid #C5A063;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 0 0 7px rgba(197,160,99,.10);
  color:#0b1715;
}

#almaDiscoverHint .alma-discover-kicker{
  display:block;
  margin-bottom:5px;
  color:#7d5c19;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
}

#almaDiscoverHint .alma-discover-bubble strong{
  display:block;
  margin-bottom:2px;
  color:#0b1715;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.02em;
}

#almaDiscoverHint .alma-discover-bubble > span:last-child{
  display:block;
  color:#49605a;
  font-size:11px;
  font-weight:750;
}

#almaDiscoverHint .alma-discover-arrow{
  position:absolute;
  left:82px;
  top:56px;
  width:140px;
  height:88px;
  overflow:visible;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.16));
  animation:almaHintArrowStrong .8s ease-in-out infinite alternate;
}

#almaDiscoverHint .alma-discover-curve,
#almaDiscoverHint .alma-discover-head{
  fill:none;
  stroke:#C5A063;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#almaDiscoverHint .alma-discover-pulse{
  position:absolute;
  right:-9px;
  bottom:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid #ffffff;
  background:#19b488;
  box-shadow:
    0 0 0 7px rgba(25,180,136,.22),
    0 0 0 14px rgba(25,180,136,.09);
  animation:almaHintPulseStrong 1s ease-in-out infinite;
}

@keyframes almaHintArrowStrong{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(8px,7px) scale(1.03)}
}

@keyframes almaHintPulseStrong{
  0%,100%{transform:scale(.92);box-shadow:0 0 0 6px rgba(25,180,136,.20),0 0 0 12px rgba(25,180,136,.08)}
  50%{transform:scale(1.12);box-shadow:0 0 0 10px rgba(25,180,136,.26),0 0 0 20px rgba(25,180,136,.05)}
}

#cuentaAlmaNode.alma-hint-target,
[data-feature="cuenta"].alma-hint-target{
  position:relative;
  z-index:4999 !important;
  animation:almaTargetGlow 1s ease-in-out infinite alternate !important;
  outline:3px solid rgba(197,160,99,.92) !important;
  outline-offset:8px !important;
}

@keyframes almaTargetGlow{
  from{filter:drop-shadow(0 0 0 rgba(197,160,99,0))}
  to{filter:drop-shadow(0 0 18px rgba(197,160,99,.75))}
}

@media(max-width:700px){
  #almaDiscoverHint{
    width:190px;
    transform:translate(-84%,-30%) scale(.9);
  }
  #almaDiscoverHint.is-visible{
    transform:translate(-84%,-30%) scale(1);
  }
  #almaDiscoverHint .alma-discover-bubble{
    min-width:150px;
    padding:11px 13px 12px;
  }
  #almaDiscoverHint .alma-discover-bubble strong{font-size:16px;}
  #almaDiscoverHint .alma-discover-arrow{left:68px;top:52px;width:118px;}
}

@media(prefers-reduced-motion:reduce){
  #almaDiscoverHint .alma-discover-arrow,
  #almaDiscoverHint .alma-discover-pulse,
  #cuentaAlmaNode.alma-hint-target,
  [data-feature="cuenta"].alma-hint-target{
    animation:none !important;
  }
}


/* ==========================================================
   v5.7 — TUTORÍA GARANTIZADA EN CUENTA ALMA IA
   CSS-only: no depende de JS ni de IntersectionObserver.
========================================================== */

.node-cuenta{
  overflow:visible !important;
}

/* Globo visible directamente ligado al botón */
.node-cuenta .cuenta-tutorial{
  position:absolute;
  left:50%;
  bottom:calc(100% + 24px);
  width:150px;
  transform:translateX(-50%) translateY(10px) scale(.92);
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:11px 14px 10px;
  border-radius:16px;
  border:2px solid #C5A063;
  background:#ffffff;
  color:#0b1715;
  box-shadow:
    0 18px 38px rgba(0,0,0,.28),
    0 0 0 8px rgba(197,160,99,.11);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  /* aparece, permanece y desaparece */
  animation:cuentaTutorialShow 4.8s ease forwards;
  animation-delay:1.1s;
}

.node-cuenta .cuenta-tutorial-kicker{
  color:#8b671f;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
}

.node-cuenta .cuenta-tutorial strong{
  color:#0b1715;
  font-size:15px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.01em;
}

.node-cuenta .cuenta-tutorial-arrow{
  position:absolute;
  left:50%;
  top:calc(100% - 2px);
  transform:translateX(-50%);
  color:#C5A063;
  font-size:34px;
  line-height:.7;
  font-weight:900;
  text-shadow:0 3px 8px rgba(0,0,0,.12);
  animation:cuentaArrowBounce .55s ease-in-out infinite alternate;
}

/* El propio botón se ilumina mientras está activa la tutoría */
.node-cuenta{
  animation:cuentaTargetAttention 4.8s ease forwards;
  animation-delay:1.1s;
}

@keyframes cuentaTutorialShow{
  0%,5%{
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(12px) scale(.90);
  }
  14%,76%{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0) scale(1);
  }
  90%,100%{
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(-6px) scale(.96);
  }
}

@keyframes cuentaArrowBounce{
  from{ transform:translateX(-50%) translateY(0); }
  to{ transform:translateX(-50%) translateY(8px); }
}

@keyframes cuentaTargetAttention{
  0%,5%,90%,100%{
    box-shadow:inherit;
    outline:0 solid transparent;
    outline-offset:0;
  }
  14%,76%{
    outline:3px solid rgba(197,160,99,.95);
    outline-offset:8px;
    box-shadow:
      0 0 0 8px rgba(197,160,99,.10),
      0 0 28px rgba(197,160,99,.42) !important;
  }
}

/* En móvil mantiene visibilidad sin cubrir demasiado */
@media(max-width:700px){
  .node-cuenta .cuenta-tutorial{
    width:132px;
    bottom:calc(100% + 18px);
    padding:10px 12px 9px;
  }
  .node-cuenta .cuenta-tutorial strong{font-size:14px;}
}

@media(prefers-reduced-motion:reduce){
  .node-cuenta .cuenta-tutorial{
    animation:cuentaTutorialReduced 4.8s linear forwards;
    animation-delay:1.1s;
  }
  .node-cuenta .cuenta-tutorial-arrow,
  .node-cuenta{
    animation:none !important;
  }
}
@keyframes cuentaTutorialReduced{
  0%,10%,90%,100%{opacity:0;visibility:hidden}
  15%,80%{opacity:1;visibility:visible}
}


/* v5.8 — Ondas sutiles de atención en Cuenta ALMA IA */
.node-cuenta::before,
.node-cuenta::after{
  content:"";
  position:absolute;
  inset:-9px;
  z-index:-1;
  border-radius:50%;
  border:1.5px solid rgba(197,160,99,.55);
  opacity:0;
  pointer-events:none;
  animation:almaCuentaWave 2.15s ease-out 1.15s 2;
}

.node-cuenta::after{
  animation-delay:1.75s;
}

@keyframes almaCuentaWave{
  0%{
    opacity:0;
    transform:scale(.92);
  }
  18%{
    opacity:.48;
  }
  72%{
    opacity:.16;
  }
  100%{
    opacity:0;
    transform:scale(1.28);
  }
}

@media(prefers-reduced-motion:reduce){
  .node-cuenta::before,
  .node-cuenta::after{
    animation:none;
  }
}


/* ==========================================================
   v5.9 — Ondas visibles REALES en Cuenta ALMA IA
   Se usan elementos HTML, no ::before/::after, para evitar
   conflictos con estilos existentes del botón.
========================================================== */

.node-cuenta{
  position:absolute !important;
  overflow:visible !important;
  isolation:isolate;
}

.node-cuenta .cuenta-wave{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  border-radius:999px;
  transform:translate(-50%,-50%) scale(.82);
  border:2px solid rgba(197,160,99,.72);
  box-shadow:0 0 12px rgba(197,160,99,.16);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  animation:almaCuentaWaveVisible 2.25s cubic-bezier(.2,.65,.3,1) forwards;
}

/* Tres ondas escalonadas */
.node-cuenta .cuenta-wave-1{ animation-delay:1.15s; }
.node-cuenta .cuenta-wave-2{ animation-delay:1.55s; }
.node-cuenta .cuenta-wave-3{ animation-delay:1.95s; }

@keyframes almaCuentaWaveVisible{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.82);
  }
  12%{
    opacity:.72;
  }
  45%{
    opacity:.48;
  }
  78%{
    opacity:.18;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.62);
  }
}

/* Segundo pulso más tenue, sin quedar permanente */
.node-cuenta .cuenta-wave-1{
  animation-name:almaCuentaWaveVisible, almaCuentaWaveVisible2;
  animation-duration:2.25s,2.15s;
  animation-delay:1.15s,3.55s;
}
.node-cuenta .cuenta-wave-2{
  animation-name:almaCuentaWaveVisible, almaCuentaWaveVisible2;
  animation-duration:2.25s,2.15s;
  animation-delay:1.55s,3.95s;
}
.node-cuenta .cuenta-wave-3{
  animation-name:almaCuentaWaveVisible, almaCuentaWaveVisible2;
  animation-duration:2.25s,2.15s;
  animation-delay:1.95s,4.35s;
}

@keyframes almaCuentaWaveVisible2{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.88);
  }
  16%{
    opacity:.38;
  }
  60%{
    opacity:.15;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.46);
  }
}

/* Refuerzo visual del botón durante la tutoría */
.node-cuenta{
  animation:
    cuentaTargetAttention 4.8s ease forwards 1.1s,
    almaCuentaBreath 1.1s ease-in-out 1.2s 4 alternate;
}

@keyframes almaCuentaBreath{
  from{ transform:scale(1); }
  to{ transform:scale(1.055); }
}

@media(max-width:700px){
  .node-cuenta .cuenta-wave{
    border-width:1.6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .node-cuenta .cuenta-wave{
    animation:none !important;
  }
  .node-cuenta{
    animation:none !important;
  }
}


/* ==========================================================
   v6.1 — LAYOUT MÓVIL ESPECÍFICO PARA MOCKUPS
   Evita que las esferas se encimen en pantallas pequeñas.
   Escritorio permanece intacto.
========================================================== */

@media (max-width: 760px){

  /* El área visual gana altura para distribuir los 7 accesos */
  #explora-alma .hero-stage,
  #explora-alma .visual-stage,
  #explora-alma .phone-stage,
  #explora-alma .orbit-stage{
    min-height: 760px !important;
    height: 760px !important;
    overflow: visible !important;
  }

  /* Teléfono algo más compacto y centrado */
  #explora-alma .phone-wrap,
  #explora-alma .phone,
  #explora-alma .hero-phone{
    transform: scale(.84);
    transform-origin: 50% 50%;
  }

  /* Todas las esferas usan tamaño homogéneo en móvil */
  #explora-alma .orbit-node{
    width: 92px !important;
    min-width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 9px 7px !important;
    border-radius: 50% !important;
    z-index: 5 !important;
  }

  #explora-alma .orbit-node .icon{
    transform: scale(.84);
    margin-bottom: 4px !important;
  }

  #explora-alma .orbit-node .label{
    font-size: 10px !important;
    line-height: 1.08 !important;
    max-width: 78px;
  }

  /* Distribución móvil independiente: dos columnas laterales + uno inferior */
  #explora-alma .node-diario{
    left: 4% !important;
    top: 11% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-cuenta{
    right: 4% !important;
    top: 11% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-prev{
    left: 1% !important;
    top: 35% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-recuperacion,
  #explora-alma .node-recovery{
    right: 1% !important;
    top: 35% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-edu{
    left: 4% !important;
    top: 59% !important;
    right: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-comunidad,
  #explora-alma .node-community{
    right: 4% !important;
    top: 59% !important;
    left: auto !important;
    bottom: auto !important;
  }

  #explora-alma .node-coins{
    left: 50% !important;
    top: 78% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Tutoría Cuenta: que no empuje ni se encime con otras esferas */
  #explora-alma .node-cuenta .cuenta-tutorial{
    left: auto !important;
    right: -10px !important;
    bottom: calc(100% + 12px) !important;
    transform: none !important;
    width: 126px !important;
  }

  #explora-alma .node-cuenta .cuenta-tutorial-arrow{
    left: 68% !important;
  }

  /* Ondas contenidas para no invadir otros accesos */
  #explora-alma .node-cuenta .cuenta-wave{
    width: 96% !important;
    height: 96% !important;
  }
}

@media (max-width: 430px){

  #explora-alma .hero-stage,
  #explora-alma .visual-stage,
  #explora-alma .phone-stage,
  #explora-alma .orbit-stage{
    min-height: 800px !important;
    height: 800px !important;
  }

  #explora-alma .orbit-node{
    width: 84px !important;
    min-width: 84px !important;
    height: 84px !important;
    min-height: 84px !important;
  }

  #explora-alma .orbit-node .label{
    font-size: 9.4px !important;
    max-width: 70px;
  }

  #explora-alma .phone-wrap,
  #explora-alma .phone,
  #explora-alma .hero-phone{
    transform: scale(.76);
  }

  #explora-alma .node-diario{ left: 2% !important; top: 10% !important; }
  #explora-alma .node-cuenta{ right: 2% !important; top: 10% !important; }

  #explora-alma .node-prev{ left: 0 !important; top: 34% !important; }
  #explora-alma .node-recuperacion,
  #explora-alma .node-recovery{ right: 0 !important; top: 34% !important; }

  #explora-alma .node-edu{ left: 2% !important; top: 58% !important; }
  #explora-alma .node-comunidad,
  #explora-alma .node-community{ right: 2% !important; top: 58% !important; }

  #explora-alma .node-coins{
    top: 79% !important;
  }
}


/* ==========================================================
   v6.4 — EQUIPO: narrativa breve + capacidades
========================================================== */
.premium-team .team-card-body{
  display:flex;
  flex-direction:column;
}

.premium-team .team-narrative{
  margin:14px 0 16px;
  color:rgba(239,246,242,.72);
  font-size:13px;
  line-height:1.58;
}

.premium-team .team-narrative strong{
  color:#f3f7f5;
  font-weight:650;
}

.premium-team .team-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 18px;
}

.premium-team .team-keywords span{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid rgba(197,160,99,.30);
  border-radius:999px;
  background:rgba(197,160,99,.055);
  color:#d9c294;
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:.035em;
  white-space:nowrap;
}

.premium-team .team-links{
  margin-top:auto;
}

@media (max-width:760px){
  .premium-team .team-narrative{
    font-size:12.5px;
    line-height:1.55;
  }
  .premium-team .team-keywords{
    gap:6px;
  }
}


/* ==========================================================
   v6.5 — Equipo editorial: la imagen ya contiene nombre y rol
========================================================== */
.team-grid-editorial .compact-member{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.team-grid-editorial .editorial-photo{
  width:100%;
  overflow:visible !important;
  aspect-ratio:auto !important;
  background:transparent !important;
  border-radius:22px 22px 0 0;
}

.team-grid-editorial .editorial-photo img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center top !important;
  border-radius:18px;
}

.team-grid-editorial .team-card-body-compact{
  display:flex;
  flex:1;
  flex-direction:column;
  padding-top:18px;
}

.team-grid-editorial .team-narrative{
  margin:0 0 16px;
  color:rgba(239,246,242,.74);
  font-size:13px;
  line-height:1.6;
  min-height:126px;
}

.team-grid-editorial .team-narrative strong{
  color:#f5f8f6;
  font-weight:650;
}

.team-grid-editorial .team-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 16px;
}

.team-grid-editorial .team-keywords span{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border:1px solid rgba(197,160,99,.30);
  border-radius:999px;
  background:rgba(197,160,99,.055);
  color:#d9c294;
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.team-grid-editorial .team-links{
  margin-top:auto;
}

@media (max-width:980px){
  .team-grid-editorial .team-narrative{
    min-height:auto;
  }
}


/* ==========================================================
   v6.6 — Fix: evitar que la imagen invada el texto
   La regla histórica .team-photo { height:292px } seguía activa.
========================================================== */
.team-grid-editorial .editorial-photo{
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.team-grid-editorial .editorial-photo img{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
}

/* En estas tarjetas no aplicamos zoom hover porque la imagen contiene texto editorial */
.team-grid-editorial .compact-member:hover .editorial-photo img{
  transform:none !important;
}

.team-grid-editorial .team-card-body-compact{
  position:relative;
  z-index:2;
  padding:20px 18px 18px !important;
  background:transparent;
}

.team-grid-editorial .team-narrative{
  min-height:118px;
}

@media (max-width:980px){
  .team-grid-editorial .team-narrative{
    min-height:auto;
  }
}


/* ==========================================================
   v6.7 — Descubribilidad de lupa + mensajes contextuales
========================================================== */

.mockup-zoom-hint{
  position:absolute;
  left:22px;
  top:22px;
  z-index:42;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:220px;
  padding:11px 14px 11px 11px;
  border:1px solid rgba(197,160,99,.40);
  border-radius:16px;
  background:rgba(8,12,15,.88);
  box-shadow:0 14px 34px rgba(0,0,0,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  pointer-events:none;
}

.mockup-zoom-hint.is-visible{
  visibility:visible;
  animation:almaZoomHintIn 5.2s cubic-bezier(.22,1,.36,1) both;
}

.mockup-zoom-icon{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f2d08a;
  background:rgba(197,160,99,.10);
  border:1px solid rgba(197,160,99,.32);
  animation:almaLensPulse 1.65s ease-in-out infinite;
}

.mockup-zoom-icon::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(197,160,99,.30);
  animation:almaLensRing 1.65s ease-out infinite;
}

.mockup-zoom-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mockup-zoom-copy{
  display:grid;
  gap:3px;
  text-align:left;
}

.mockup-zoom-copy strong{
  color:#f6f8f7;
  font-size:12px;
  line-height:1.1;
}

.mockup-zoom-copy small{
  color:rgba(236,242,239,.63);
  font-size:10px;
  line-height:1.2;
}

.mockup-context-tip{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:41;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(78%,420px);
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(6,10,13,.80);
  color:rgba(244,248,246,.90);
  font-size:10.5px;
  line-height:1.2;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,8px);
  pointer-events:none;
  transition:
    opacity .20s ease,
    transform .24s cubic-bezier(.22,1,.36,1),
    visibility .20s ease;
}

.mockup-context-tip.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.mockup-context-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#d5b46d;
  box-shadow:0 0 0 4px rgba(213,180,109,.10);
}

@keyframes almaLensPulse{
  0%,100%{ transform:scale(1) translateX(0); }
  45%{ transform:scale(1.08) translateX(3px); }
  65%{ transform:scale(1.03) translateX(-2px); }
}

@keyframes almaLensRing{
  0%{ opacity:.55; transform:scale(.90); }
  75%,100%{ opacity:0; transform:scale(1.30); }
}

@keyframes almaZoomHintIn{
  0%{ opacity:0; transform:translateY(-8px) scale(.97); }
  8%,75%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-4px) scale(.985); }
}

@media (hover:none), (max-width:760px){
  .mockup-zoom-hint,
  .mockup-context-tip{
    display:none !important;
  }
}


/* ==========================================================
   v6.8 — Contraste y legibilidad de ayudas de lupa
   WCAG-oriented: fondo sólido, texto claro y acento ALMA.
========================================================== */

.mockup-zoom-hint{
  border:1px solid rgba(229,194,121,.78) !important;
  background:rgba(5,13,16,.97) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.045) inset !important;
}

.mockup-zoom-copy strong{
  color:#ffffff !important;
  font-size:12.5px !important;
  font-weight:750 !important;
  letter-spacing:.005em;
}

.mockup-zoom-copy small{
  color:#d6e0dc !important;
  font-size:10.5px !important;
  font-weight:500;
}

.mockup-zoom-icon{
  color:#f0cf86 !important;
  background:rgba(197,160,99,.16) !important;
  border-color:rgba(229,194,121,.66) !important;
}

/* Mensaje que acompaña el recorrido de la lupa */
.mockup-context-tip{
  bottom:20px !important;
  padding:10px 15px !important;
  border:1px solid rgba(229,194,121,.68) !important;
  background:rgba(4,12,15,.96) !important;
  color:#ffffff !important;
  font-size:11.5px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  letter-spacing:.004em;
  box-shadow:
    0 14px 34px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}

.mockup-context-dot{
  width:7px !important;
  height:7px !important;
  flex-basis:7px !important;
  background:#f0cf86 !important;
  box-shadow:
    0 0 0 4px rgba(240,207,134,.13),
    0 0 12px rgba(240,207,134,.28) !important;
}

/* La lente también gana definición contra mockups claros */
.mockup-magnifier{
  border:2px solid rgba(240,207,134,.88) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.46),
    0 0 0 4px rgba(4,12,15,.32),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;
}


/* ==========================================================
   v6.9 — Sistema premium unificado de ayudas / descubrimiento
   Mismo lenguaje visual dentro y fuera de los mockups.
========================================================== */

:root{
  --alma-guide-bg:rgba(5,13,16,.965);
  --alma-guide-border:rgba(229,194,121,.66);
  --alma-guide-gold:#f0cf86;
  --alma-guide-text:#fff;
  --alma-guide-muted:#cdd9d4;
}

/* ---------- Guía interna: "Explora con la lupa" ---------- */
.mockup-zoom-hint{
  min-width:236px !important;
  padding:12px 16px 12px 12px !important;
  gap:12px !important;
  border:1px solid var(--alma-guide-border) !important;
  border-radius:18px !important;
  background:
    linear-gradient(135deg,rgba(240,207,134,.055),transparent 38%),
    var(--alma-guide-bg) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 1px 0 rgba(255,255,255,.05) inset !important;
}

.mockup-zoom-hint::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,207,134,.78),transparent);
  opacity:.8;
}

.mockup-zoom-icon{
  width:40px !important;
  height:40px !important;
  flex-basis:40px !important;
  background:
    radial-gradient(circle at 35% 30%,rgba(240,207,134,.20),transparent 52%),
    rgba(197,160,99,.09) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.mockup-zoom-copy strong{
  font-size:12.5px !important;
  letter-spacing:.012em !important;
}

.mockup-zoom-copy small{
  color:var(--alma-guide-muted) !important;
}

/* ---------- Mensaje contextual durante la lupa ---------- */
.mockup-context-tip{
  min-height:38px;
  padding:10px 16px !important;
  border-radius:14px !important;
  background:
    linear-gradient(90deg,rgba(240,207,134,.045),transparent 45%),
    var(--alma-guide-bg) !important;
  border-color:rgba(229,194,121,.58) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.48),
    0 1px 0 rgba(255,255,255,.04) inset !important;
}

.mockup-context-tip::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,207,134,.62),transparent);
}

.mockup-context-tip.is-visible{
  animation:almaContextPremium .34s cubic-bezier(.22,1,.36,1) both;
}

@keyframes almaContextPremium{
  from{opacity:0; transform:translate(-50%,10px) scale(.975); filter:blur(2px);}
  to{opacity:1; transform:translate(-50%,0) scale(1); filter:blur(0);}
}

/* ---------- Guía exterior de Cuenta: mismo sistema visual ---------- */
#explora-alma .node-cuenta .cuenta-tutorial{
  box-sizing:border-box !important;
  width:154px !important;
  padding:11px 13px 12px !important;
  border:1px solid var(--alma-guide-border) !important;
  border-radius:16px !important;
  background:
    linear-gradient(135deg,rgba(240,207,134,.06),transparent 45%),
    var(--alma-guide-bg) !important;
  color:var(--alma-guide-text) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#explora-alma .node-cuenta .cuenta-tutorial::before{
  content:"" !important;
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(240,207,134,.76),transparent) !important;
  opacity:.85;
}

#explora-alma .node-cuenta .cuenta-tutorial-kicker{
  display:block !important;
  margin-bottom:4px !important;
  color:var(--alma-guide-gold) !important;
  font-size:8px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
}

#explora-alma .node-cuenta .cuenta-tutorial strong{
  display:block !important;
  color:#fff !important;
  font-size:11.5px !important;
  font-weight:720 !important;
  line-height:1.18 !important;
  letter-spacing:.005em !important;
}

/* Flecha exterior: sustituye sensación de flecha tipográfica por control premium */
#explora-alma .node-cuenta .cuenta-tutorial-arrow{
  position:absolute !important;
  left:50% !important;
  bottom:-34px !important;
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border:1px solid rgba(229,194,121,.66) !important;
  border-radius:50% !important;
  background:rgba(5,13,16,.96) !important;
  color:transparent !important;
  font-size:0 !important;
  transform:translateX(-50%) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.38),
    0 0 0 4px rgba(240,207,134,.055) !important;
  animation:almaPremiumArrowFloat 1.75s ease-in-out infinite !important;
}

/* Dibujamos la flecha con CSS para que sea consistente y nítida */
#explora-alma .node-cuenta .cuenta-tutorial-arrow::before{
  content:"" !important;
  width:7px !important;
  height:7px !important;
  border-right:1.8px solid var(--alma-guide-gold) !important;
  border-bottom:1.8px solid var(--alma-guide-gold) !important;
  transform:translateY(-2px) rotate(45deg) !important;
}

#explora-alma .node-cuenta .cuenta-tutorial-arrow::after{
  content:"" !important;
  position:absolute !important;
  width:1.5px !important;
  height:9px !important;
  top:7px !important;
  left:50% !important;
  border-radius:2px !important;
  background:var(--alma-guide-gold) !important;
  transform:translateX(-50%) !important;
}

@keyframes almaPremiumArrowFloat{
  0%,100%{
    transform:translateX(-50%) translateY(0);
    box-shadow:0 8px 20px rgba(0,0,0,.38),0 0 0 4px rgba(240,207,134,.055);
  }
  50%{
    transform:translateX(-50%) translateY(5px);
    box-shadow:0 10px 22px rgba(0,0,0,.42),0 0 0 8px rgba(240,207,134,.025);
  }
}

/* Halo de Cuenta más fino y coordinado con la guía */
#explora-alma .node-cuenta .cuenta-wave{
  border-color:rgba(240,207,134,.34) !important;
}

@media (max-width:760px){
  #explora-alma .node-cuenta .cuenta-tutorial{
    width:142px !important;
  }
  #explora-alma .node-cuenta .cuenta-tutorial-arrow{
    bottom:-31px !important;
    width:26px !important;
    height:26px !important;
  }
}


/* ==========================================================
   v7.0 — CTA “Conoce ALMA en 1 minuto”
   Verde profundo + dorado + blanco, alineado al sistema premium.
========================================================== */
.alma-minute-cta{
  position:relative !important;
  overflow:hidden !important;
  background:#0B2B23 !important;
  border:1px solid rgba(197,160,99,.68) !important;
  color:#fff !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease !important;
}

.alma-minute-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(105deg,transparent 18%,rgba(240,207,134,.09) 48%,transparent 76%) !important;
  transform:translateX(-115%) !important;
  transition:transform .65s cubic-bezier(.22,1,.36,1) !important;
}

.alma-minute-cta:hover{
  background:#123B30 !important;
  border-color:rgba(229,194,121,.90) !important;
  transform:translateY(-1px) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 0 3px rgba(197,160,99,.07),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.alma-minute-cta:hover::before{
  transform:translateX(115%) !important;
}

.alma-minute-cta svg,
.alma-minute-cta .play-icon,
.alma-minute-cta [class*="play"]{
  color:#E5C279 !important;
  stroke:#E5C279 !important;
}

.alma-minute-cta:focus-visible{
  outline:2px solid #E5C279 !important;
  outline-offset:3px !important;
}


/* ==========================================================
   v7.1 — Tipografía UX de mensajes interactivos
   Prioridad: nitidez, lectura inmediata y respiración visual.
========================================================== */

/* Base tipográfica común */
.mockup-zoom-hint,
.mockup-context-tip,
#explora-alma .node-cuenta .cuenta-tutorial{
  font-family:"Montserrat","Inter",Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Aviso: Explora con la lupa */
.mockup-zoom-hint{
  min-width:270px !important;
  padding:14px 18px 14px 13px !important;
  gap:13px !important;
}

.mockup-zoom-copy{
  gap:5px !important;
}

.mockup-zoom-copy strong{
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.38 !important;
  letter-spacing:.01em !important;
}

.mockup-zoom-copy small{
  color:#dce5e1 !important;
  font-size:11.5px !important;
  font-weight:450 !important;
  line-height:1.48 !important;
  letter-spacing:.012em !important;
}

/* Mensajes que cambian mientras se recorre el mockup */
.mockup-context-tip{
  max-width:min(84%,480px) !important;
  min-height:42px !important;
  padding:11px 17px !important;
  gap:10px !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  letter-spacing:.012em !important;
  text-shadow:none !important;
}

#mockupContextText{
  display:block;
  white-space:normal;
}

/* Tutorial exterior */
#explora-alma .node-cuenta .cuenta-tutorial{
  width:174px !important;
  padding:13px 15px 14px !important;
}

#explora-alma .node-cuenta .cuenta-tutorial-kicker{
  margin-bottom:6px !important;
  font-size:8.5px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:.18em !important;
}

#explora-alma .node-cuenta .cuenta-tutorial strong{
  color:#fff !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.42 !important;
  letter-spacing:.012em !important;
}

/* El texto manda; iconografía ligeramente contenida */
.mockup-zoom-icon{
  width:42px !important;
  height:42px !important;
  flex-basis:42px !important;
}

/* Ajuste para pantallas intermedias sin volver a comprimir el texto */
@media (min-width:761px) and (max-width:1100px){
  .mockup-zoom-hint{
    min-width:250px !important;
  }
  .mockup-context-tip{
    font-size:12.5px !important;
  }
}