@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   ENERGY MASTER · hoja de estilos compartida
   ══════════════════════════════════════════════════════════════════════════

   Antes este CSS iba embebido en cada página: ~73 KB duplicados por archivo.
   Con las versiones de idioma (es, es-MX, en, pt) serían 16 copias del mismo
   CSS y 16 sitios donde aplicar cada cambio de estilo. Aquí va una vez, se
   cachea una vez, y se edita en un solo lugar.

   ORDEN: los bloques van en el mismo orden en que estaban embebidos. La
   cascada de CSS depende del orden, así que no los reordenes.

   El bloque de PÁGINAS INTERNAS (.page-hero / .page-top) solo aplica a
   soluciones, recursos y contacto. En la portada queda inerte: no hay ningún
   elemento con esas clases. Se incluye igual para tener un solo archivo.

   CACHÉ: las páginas lo piden como /estilos.css?v=N. Al cambiar este archivo,
   sube el número de versión en las 4 páginas o el navegador servirá el viejo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ENERGY MASTER — Design tokens · Manual de marca v1.0
   Gradiente maestro: Electric Blue → Violet Purple → Teal, 135°
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Acción — idénticos en ambos modos */
  --royal:#1A40C8; --electric:#2B5FE8; --indigo:#4B72F5;
  --violet:#7B5CF0; --soft-purple:#9B7BFF;
  --teal:#00D9C4; --cyan:#22E5F0;
  --lime:#6FCF22;           /* SOLO sostenibilidad / CO₂ — nunca CTA */
  --amber:#FFB020; --red:#FF5670;
  --grad:linear-gradient(135deg,var(--electric) 0%,var(--violet) 52%,var(--teal) 100%);
  --grad-soft:linear-gradient(135deg,rgba(43,95,232,.16) 0%,rgba(123,92,240,.14) 52%,rgba(0,217,196,.12) 100%);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:32px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:'Poppins',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --bg:#060915; --bg-alt:#090D1E; --card:#0D1230; --elev:#111638;
  --txt:#EEF2FF; --txt-2:#A9B4DC; --txt-3:#7985B0;
  --line:rgba(75,114,245,.16); --line-2:rgba(75,114,245,.30);
  --glass:rgba(13,18,48,.72);
  --teal-txt:var(--teal);          /* sobre fondo oscuro el cian de marca va bien */
  --shadow:0 24px 70px -24px rgba(0,0,0,.85);
}
[data-theme="light"]{
  --bg:#F0F4FF; --bg-alt:#FFFFFF; --card:#F8FAFF; --elev:#EEF2FF;
  --txt:#0D1230; --txt-2:#3B4570; --txt-3:#6B76A0;
  --line:rgba(43,95,232,.16); --line-2:rgba(43,95,232,.30);
  --glass:rgba(255,255,255,.82);
  --teal-txt:#00776B;              /* cian oscurecido: 4,8:1 sobre el fondo claro, pasa AA */
  --shadow:0 20px 50px -22px rgba(13,18,48,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;
  overflow-x:hidden;overflow-x:clip}   /* clip contiene sin crear scroller; hidden es el fallback */
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--f-display);font-weight:400;line-height:1.62;
  font-size:16.5px;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}
::selection{background:var(--violet);color:#fff}

h1,h2,h3,h4{font-weight:700;line-height:1.1;letter-spacing:-.035em;margin:0}
h1{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800;letter-spacing:-.042em}
h2{font-size:clamp(1.6rem,2.9vw,2.2rem);font-weight:750}
h3{font-size:clamp(1.08rem,1.8vw,1.38rem)}
p{margin:0 0 1.05em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
section{padding:clamp(38px,4vw,54px) 0;position:relative}
.bg-alt{background:var(--bg-alt)}
/* Corte fino entre secciones que comparten fondo: evita el vacio plano */
.sep{border-top:1px solid var(--line)}

.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:11px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px;flex:none}
.lede{font-size:clamp(.97rem,1.35vw,1.1rem);color:var(--txt-2);max-width:60ch;line-height:1.72}
.grad-rule{height:3px;background:var(--grad);border-radius:3px;border:0;margin:0}

/* ── Encabezado de sección, centrado ──────────────────────────────────────
   Añadido el 26 de agosto de 2026. Antes cada sección llevaba su propio
   `style="max-width:60..66ch"` en línea, alineado a la izquierda: diez
   valores distintos para lo mismo.

   Dos efectos, y conviene no confundirlos: centrar es estético y no ahorra
   ni un píxel; lo que acorta la página es soltar la bajada del tope de 60ch,
   porque con más ancho ocupa menos renglones. De ahí el `max-width:none`
   sobre `.lede` — sin él el bloque se ensancha pero el párrafo sigue partido
   igual y no se gana nada.

   74ch es el techo: por encima, un texto centrado obliga al ojo a buscar el
   inicio de cada renglón y se lee peor de lo que se compacta. */
.sec-head{max-width:74ch;margin-inline:auto;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head .lede{max-width:none;margin-inline:auto}

/* ── Botones ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 27px;border-radius:100px;border:1px solid transparent;
  font-weight:600;font-size:.93rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;
  text-align:center;line-height:1.25;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px -10px rgba(43,95,232,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(123,92,240,.8)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn-solid{background:var(--elev);border-color:var(--line);color:var(--txt)}
.btn-solid:hover{border-color:var(--indigo);transform:translateY(-2px)}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-sm{padding:10px 19px;font-size:.83rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:100px;
  background:var(--elev);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-2);font-weight:500;
}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ── Reveal ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ── Nav ─────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:900;
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s;
}
.nav.stuck{background:var(--glass);border-bottom-color:var(--line)}
.nav-in{max-width:1380px;margin-inline:auto;padding:13px clamp(18px,4vw,34px);
  display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .logo{height:42px;width:auto;object-fit:contain}
.brand .logo-dark{display:none}
[data-theme="dark"] .brand .logo-light{display:none}
[data-theme="dark"] .brand .logo-dark{display:block}
.nav-links{display:flex;gap:3px;margin-left:auto;align-items:center}
.nav-links > a,.nav-drop > button{
  padding:9px 14px;border-radius:100px;font-size:.87rem;font-weight:500;color:var(--txt-2);
  background:none;border:0;cursor:pointer;transition:color .25s,background .25s;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.nav-links > a:hover,.nav-drop > button:hover{color:var(--txt);background:var(--elev)}
.nav-drop{position:relative}
.nav-drop > button svg{transition:transform .3s var(--ease)}
.nav-drop[data-open="1"] > button svg{transform:rotate(180deg)}
.nav-drop[data-open="1"] > button{color:var(--txt);background:var(--elev)}
.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:330px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:10px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.3s var(--ease);
}
.nav-drop[data-open="1"] .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:flex;gap:13px;padding:12px 13px;border-radius:var(--r);transition:background .25s}
.drop a:hover{background:var(--elev)}
.drop .di{width:34px;height:34px;border-radius:9px;background:var(--grad-soft);border:1px solid var(--line);
  display:grid;place-items:center;flex:none;font-size:.95rem}
.drop strong{display:block;font-size:.9rem;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.drop span{display:block;font-size:.76rem;color:var(--txt-3);line-height:1.45;margin-top:2px}
.nav-tools{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--elev);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease);color:var(--txt-2);
}
.icon-btn:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.burger{display:none}

.mob{
  position:fixed;inset:0;z-index:899;background:var(--bg);padding:88px 26px 40px;
  overflow-y:auto;transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mob[data-open="1"]{transform:none}
.mob a{display:block;padding:15px 0;font-size:1.16rem;font-weight:600;border-bottom:1px solid var(--line)}
.mob .sub{font-size:.95rem;font-weight:400;color:var(--txt-2);padding-left:16px}

@media(max-width:1100px){
  .nav-links{display:none}
  .burger{display:grid}
}
@media(max-width:720px){
  .nav-tools .btn-primary{display:none}          /* el CTA vive en el menú y en el hero */
  .nav-tools .btn-solid{padding:10px 13px}
  .nav-tools .btn-solid span{display:none}
  .brand .logo{height:34px}
  .nav-in{gap:10px;padding-inline:16px}
}
@media(max-width:400px){
  .brand .logo{height:29px}
}

/* ══════ Añadidos v2 ══════ */
.drop-2col{min-width:600px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
em.new{font-style:normal;font-family:var(--f-mono);font-size:.55rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:2px 7px;border-radius:100px;background:var(--grad);color:#fff;margin-left:7px;vertical-align:middle}
.plat.plat-solo{grid-template-columns:1fr !important}
.card.pcard.nova-2col{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(22px,3vw,42px);align-items:center}
.nova-gif{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.nova-gif img{width:100%;height:auto;display:block}
/* La regla móvil DEBE igualar la especificidad de .card.pcard.nova-2col (0,3,0);
   con `.nova-2col` sola nunca ganaba y la imagen quedaba incrustada al lado del texto. */
@media(max-width:900px){
  .card.pcard.nova-2col{grid-template-columns:minmax(0,1fr);gap:28px}
  .card.pcard.nova-2col .nova-gif{width:100%}
}
.rq b{color:var(--txt)}
.ico{display:inline-grid !important;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--elev);border:1px solid var(--line);color:var(--electric);margin-bottom:14px}
[data-theme="dark"] .ico{color:var(--indigo)}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:22px}
.vid{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  background:var(--card);padding:0;aspect-ratio:16/10;transition:transform .35s var(--ease),border-color .35s}
.vid.hidden-vid{display:none}
.vids.show-all .vid.hidden-vid{display:block}
.vid:hover{transform:translateY(-4px);border-color:var(--teal)}
.vid img{width:100%;height:100%;object-fit:cover}
.vid .vp{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent 40%,rgba(6,9,21,.72))}
.vid .vp::before{content:"";width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231A40C8"%3E%3Cpath d="M8 5v14l11-7z"/%3E%3C/svg%3E');
  background-size:22px;background-position:56% center;background-repeat:no-repeat;
  box-shadow:0 8px 26px -6px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.vid:hover .vp::before{transform:scale(1.12)}
.vid .vmeta{position:absolute;left:13px;right:13px;bottom:11px;text-align:left;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.vid .vmeta b{display:block;color:#fff;font-weight:600;font-size:.86rem;letter-spacing:-.01em;line-height:1.25}
.vid .vmeta small{display:block;color:rgba(255,255,255,.85);font-size:.72rem;margin-top:2px}
.vmodal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px}
.vmodal[hidden]{display:none}
.vmodal-bg{position:absolute;inset:0;background:rgba(6,9,21,.82);backdrop-filter:blur(8px)}
.vmodal-box{position:relative;width:min(920px,94vw)}
.vmodal-frame{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.vmodal-frame iframe{width:100%;height:100%;border:0}
.vmodal-x{position:absolute;top:-42px;right:0;background:none;border:0;color:#fff;font-size:1.3rem;cursor:pointer}
.pym-route h3{font-size:clamp(1.25rem,2.2vw,1.7rem);margin-bottom:10px}
.bonus{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:20px;padding:26px clamp(22px,3vw,34px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line-2)}
.bonus-num{text-align:right;flex:none}
.bonus-num b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bonus-num span{display:block;font-size:.8rem;color:var(--txt-3);margin-top:7px}
.cta-micro{font-size:.8rem;color:var(--txt-3);margin:26px 0 0;line-height:1.7}
.cta-micro a{color:var(--teal);font-family:var(--f-mono)}
.awards{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.awards .chip{font-size:.58rem;padding:4px 9px;letter-spacing:.06em}
.foot .pact{margin-top:16px}
@media(max-width:640px){
  .bonus-num{text-align:left}
}
@media(max-width:1180px){.drop-2col{min-width:420px;grid-template-columns:1fr}}

/* ══════ EMA spotlight ══════ */
.ema-sec{position:relative;overflow:hidden;background:var(--bg-alt)}
.ema-glow{position:absolute;top:-18%;right:-8%;width:min(880px,110vw);height:760px;pointer-events:none;
  background:radial-gradient(ellipse at 60% 40%,rgba(0,217,196,.24),rgba(34,229,240,.10) 45%,transparent 72%);filter:blur(46px)}
[data-theme="light"] .ema-glow{opacity:.3}
.gt-ema{background:linear-gradient(135deg,var(--teal) 0%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.ema-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(28px,4vw,58px);
  align-items:center;margin-top:27px;position:relative}

.chat-switch{display:flex;gap:8px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.cs{padding:9px 17px;border-radius:100px;border:1px solid var(--line);background:var(--card);
  font-size:.83rem;font-weight:500;color:var(--txt-2);cursor:pointer;transition:.3s var(--ease)}
.cs:hover{border-color:var(--teal);color:var(--txt)}
.cs[aria-selected="true"]{background:linear-gradient(135deg,var(--teal),var(--cyan));border-color:transparent;color:#04140f;font-weight:600}

.phone-col{display:flex;flex-direction:column;align-items:center}
.phone{position:relative;width:min(330px,88vw)}
.phone-glow{position:absolute;inset:-14% -18%;border-radius:60px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,217,196,.28),transparent 68%);filter:blur(32px)}
.phone-frame{position:relative;border-radius:44px;padding:11px;background:linear-gradient(160deg,#2b3153,#0b0f22 42%,#1a1f3d);
  box-shadow:0 34px 80px -26px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07) inset}
.pv,.pp{position:absolute;width:3px;border-radius:3px;background:#2f3556}
.pv{left:-3px}.pv.up{top:118px;height:38px}.pv.dn{top:166px;height:38px}
.pp{right:-3px;top:140px;height:58px}
.phone-screen{position:relative;border-radius:34px;overflow:hidden;background:#0a1014;
  display:flex;flex-direction:column;height:472px}
.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:23px;border-radius:20px;background:#000;z-index:6}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:11px 20px 6px;color:#e8f5f0;font-size:.66rem;font-weight:600;font-family:var(--f-display);z-index:5}
.sb-ico{display:flex;gap:4px;align-items:center}
.wa-hdr{display:flex;align-items:center;gap:10px;padding:8px 13px;background:#1f2c33;border-bottom:1px solid rgba(255,255,255,.06)}
.wa-hdr .wa-av{width:33px;height:33px;border-radius:50%;overflow:hidden;background:#0d1230;flex:none;display:grid;place-items:center}
.wa-hdr .wa-av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wa-hdr .wa-meta{flex:1;min-width:0}
.wa-hdr b{display:block;font-size:.79rem;color:#e9edef;font-weight:600;letter-spacing:-.01em}
.wa-hdr small{display:flex;align-items:center;gap:5px;font-size:.62rem;color:#8fa3ad}
.wa-hdr small .on{width:5px;height:5px;border-radius:50%;background:#25d366;display:inline-block}
.wa-hdr .wa-ico{color:#8fa3ad;font-size:1rem}

.chat{display:none;flex:1;overflow-y:auto;padding:12px 11px 6px;gap:7px;flex-direction:column;
  background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-opacity='.014'/%3E%3C/svg%3E")}
.chat.on{display:flex;animation:fade .5s var(--ease)}
.chat::-webkit-scrollbar{width:3px}
.chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:3px}
.wa-date{align-self:center;font-size:.58rem;color:#8fa3ad;background:rgba(31,44,51,.85);padding:3px 11px;border-radius:8px;margin-bottom:5px}
.bub{max-width:88%;padding:8px 11px 16px;border-radius:9px;font-size:.735rem;line-height:1.52;position:relative;color:#e9edef}
.bub.ema{background:#1f2c33;align-self:flex-start;border-top-left-radius:3px}
.bub.me{background:#005c4b;align-self:flex-end;border-top-right-radius:3px}
.bub b{font-weight:700;color:#fff}
.bub .ts{position:absolute;right:9px;bottom:4px;font-size:.55rem;color:rgba(233,237,239,.5)}
/* Adjunto y nota de voz. Van DENTRO de la burbuja y encima del texto, igual
   que en WhatsApp: el chip dice por qué llegó el mensaje y el texto de abajo
   es su contenido — la transcripción, en el caso del audio.

   Se demuestran así, y no con una frase que lo afirme, porque las dos son
   capacidades que ya están activas y el visitante nunca las había visto. */
.bub .doc,.bub .voz{display:flex;align-items:center;gap:6px;margin:0 0 7px;
  padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.09);
  font-size:.6rem;line-height:1.35;color:rgba(233,237,239,.82)}
.bub .voz{background:rgba(0,217,196,.14);color:#5eead4}
.bub .doc svg,.bub .voz svg{flex:none;opacity:.85}
.bub .acts{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.bub .acts span{font-size:.6rem;padding:4px 9px;border-radius:100px;background:rgba(0,217,196,.16);color:#5eead4;border:1px solid rgba(0,217,196,.25)}
.typing{display:flex;align-items:center;gap:7px;padding:7px 14px;background:#0b141a;border-top:1px solid rgba(255,255,255,.05)}
.typing .tav{width:19px;height:19px;border-radius:50%;overflow:hidden;background:#0d1230;flex:none}
.typing .tav img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tdots{display:flex;gap:3px}
.tdots i{width:4px;height:4px;border-radius:50%;background:#00D9C4;animation:td 1.3s infinite}
.tdots i:nth-child(2){animation-delay:.18s}.tdots i:nth-child(3){animation-delay:.36s}
@keyframes td{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tlbl{font-size:.6rem;color:#8fa3ad}
.wa-input{display:flex;align-items:center;gap:7px;padding:8px 11px 16px;background:#1f2c33}
.wa-pill{flex:1;padding:8px 13px;border-radius:100px;background:#2a3942;color:#8696a0;font-size:.7rem}
.wa-send{width:31px;height:31px;border-radius:50%;background:#00a884;display:grid;place-items:center;flex:none}

.ema-side{text-align:center;display:flex;flex-direction:column;align-items:center}
.ema-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;
  background:rgba(0,217,196,.1);border:1px solid rgba(0,217,196,.3);font-size:.79rem;color:var(--txt-2)}
.ema-pill b{color:var(--teal)}
.ema-pill i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blip 1.7s infinite}
.portrait{position:relative;width:min(224px,60vw);aspect-ratio:1;margin:20px 0 6px;display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 18px 40px rgba(0,217,196,.3))}
.portrait .ring{position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(0,217,196,.28);animation:pulse 3.6s ease-out infinite}
.portrait .ring:nth-child(2){animation-delay:1.8s}
@keyframes pulse{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.2);opacity:0}}
.langs{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;color:var(--txt-3);margin:0 0 12px}
.wavef{display:flex;gap:3px;align-items:center;height:22px;margin-bottom:18px}
.wavef i{width:3px;border-radius:3px;background:linear-gradient(180deg,var(--teal),var(--cyan));animation:wv 1.25s ease-in-out infinite}
.wavef i:nth-child(1){height:7px;animation-delay:0s}.wavef i:nth-child(2){height:14px;animation-delay:.08s}
.wavef i:nth-child(3){height:20px;animation-delay:.16s}.wavef i:nth-child(4){height:11px;animation-delay:.24s}
.wavef i:nth-child(5){height:17px;animation-delay:.32s}.wavef i:nth-child(6){height:8px;animation-delay:.4s}
.wavef i:nth-child(7){height:15px;animation-delay:.48s}.wavef i:nth-child(8){height:21px;animation-delay:.56s}
.wavef i:nth-child(9){height:9px;animation-delay:.64s}.wavef i:nth-child(10){height:16px;animation-delay:.72s}
.wavef i:nth-child(11){height:12px;animation-delay:.8s}.wavef i:nth-child(12){height:7px;animation-delay:.88s}
@keyframes wv{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.ema-stats{display:flex;gap:22px;margin-bottom:22px}
.ema-stats b{display:block;font-family:var(--f-mono);font-size:1.15rem;font-weight:700;color:var(--teal)}
.ema-stats small{display:block;font-size:.68rem;color:var(--txt-3);margin-top:3px}
.btn-ema{background:linear-gradient(135deg,var(--teal),var(--cyan));color:#04140f;font-weight:700;
  box-shadow:0 10px 30px -10px rgba(0,217,196,.65)}
.btn-ema:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(0,217,196,.75)}
.ema-num{font-family:var(--f-mono);font-size:.82rem;color:var(--txt-3);margin:11px 0 0;letter-spacing:.04em}
.ema-alt{font-size:.78rem;color:var(--txt-3);margin:10px 0 0}
.ema-alt a{color:var(--teal);border-bottom:1px solid rgba(0,217,196,.35)}

/* ══ EMA a pantalla completa ══
   El widget de Vyrkon no expone API ni escucha postMessage, pero su propia
   página acepta ?fullpage=1 y entonces arranca con el chat ABIERTO y sin
   burbuja. Eso permite abrirlo de un solo toque desde nuestros botones.
   La cabecera y el cierre son nuestros porque fullpage oculta los suyos. */
.ema-ov{position:fixed;inset:0;z-index:960;display:grid;place-items:center}
.ema-ov[hidden]{display:none}
.ema-ov-bg{position:absolute;inset:0;background:rgba(6,9,21,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ema-ov-box{position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:100%;height:100dvh;background:var(--card)}
.ema-ov-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 11px) 15px 11px;
  border-bottom:1px solid var(--line);background:var(--elev)}
.ema-ov-t{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;letter-spacing:-.01em}
.ema-ov-t i{width:8px;height:8px;border-radius:50%;background:#25d366;flex:none;animation:blip 2s infinite}
.ema-ov-x{background:none;border:0;color:var(--txt-2);font-size:1.2rem;line-height:1;
  cursor:pointer;padding:6px 9px;border-radius:8px;transition:color .25s,background .25s}
.ema-ov-x:hover{color:var(--txt);background:var(--card)}
.ema-ov-frame{flex:1;min-height:0;background:var(--card)}
.ema-ov-frame iframe{width:100%;height:100%;border:0;display:block}
@media(min-width:768px){
  .ema-ov-box{width:min(430px,94vw);height:min(680px,86vh);
    border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:var(--shadow)}
}



/* ── Selector de idioma · desplegable ─────────────────────────────────────
   Sustituyó a las cuatro píldoras el 28 de agosto de 2026. Las píldoras
   ocupaban 126 px del nav y empujaban «Diagnóstico gratis» fuera de la
   pantalla: a 1280 px CSS su borde caía en 1288 y, como el documento no
   desborda en horizontal, el botón se recortaba sin barra que permitiera
   verlo. El desplegable ocupa ~54 px.

   Reutiliza .nav-drop y su JS. Lo único que hay que anular es el
   min-width:330px de .drop, pensado para el menú de Soluciones. */
.langdrop > button{
  display:flex;align-items:center;gap:6px;
  padding:7px 9px;border-radius:100px;
  border:1px solid var(--line);background:var(--card);color:var(--txt-3);
  cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.langdrop > button:hover{color:var(--txt);border-color:var(--line-2)}
.langdrop .lc{font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em}

/* La bandera: 18×12 con esquinas suavizadas y un borde tenue, porque el
   blanco de México y de EE. UU. se pierde contra la tarjeta en modo claro. */
.lf{display:block;width:18px;height:12px;flex:none;border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.13)}
.lf svg{display:block;width:100%;height:100%}
[data-theme="dark"] .lf{box-shadow:0 0 0 1px rgba(255,255,255,.16)}

.drop-lang{min-width:0;width:max-content;padding:8px}
.drop-lang a{
  display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;
  font-size:.88rem;white-space:nowrap;border-radius:var(--r);
}
.drop-lang a[aria-current="true"]{background:var(--elev);color:var(--txt);font-weight:600}


/* ── Modal de bienvenida ──────────────────────────────────────────────────
   Anuncio del sitio nuevo. Lo crea bienvenida.js DESPUÉS de que el visitante
   decida las cookies, solo en la portada y una vez en la vida.

   z-index 950: por encima del nav (900) y de la barra de idioma (870), por
   debajo de la superposición de EMA (960) — si alguien abre el chat desde el
   modal, el chat tiene que quedar delante. */
.bv-ov{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px}
.bv-ov .bv-bg{
  position:absolute;inset:0;background:rgba(6,9,21,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .38s var(--ease);
}
.bv-ov[data-on="1"] .bv-bg{opacity:1}
.bv-box{
  position:relative;width:min(640px,100%);max-height:calc(100dvh - 40px);overflow:hidden auto;
  border-radius:var(--r-xl);
  background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.bv-ov[data-on="1"] .bv-box{opacity:1;transform:none}
/* Filo encendido arriba y halo detrás del titular: el degradado de marca hace
   de fuente de luz, el mismo recurso que el hero. */
.bv-box::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.bv-in{position:relative;padding:clamp(25px,3.4vw,38px)}
.bv-in::before{
  content:"";position:absolute;top:-150px;left:50%;translate:-50% 0;
  width:460px;height:270px;border-radius:50%;
  background:var(--grad);filter:blur(92px);opacity:.30;pointer-events:none;
}
.bv-in > *{position:relative}

.bv-x{
  position:absolute;top:14px;right:14px;z-index:3;
  background:none;border:0;color:var(--txt-3);cursor:pointer;
  font-size:1rem;line-height:1;padding:7px 9px;border-radius:9px;
  transition:color .25s,background .25s;
}
.bv-x:hover{color:var(--txt);background:var(--elev)}

.bv-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.63rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-txt);margin:0 0 16px;
  padding:5px 11px 5px 9px;border-radius:100px;
  background:rgba(0,217,196,.10);border:1px solid rgba(0,217,196,.28);
}
.bv-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}

.bv-box h2{
  font-size:clamp(1.6rem,3.5vw,2.25rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.1;margin:0 0 11px;text-wrap:balance;
}
.bv-box h2 .gt{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bv-sub{font-size:.98rem;color:var(--txt-2);margin:0 0 24px;line-height:1.62;max-width:54ch}
.bv-sub b{color:var(--txt);font-weight:600}

/* Las cuatro capacidades. Cada una es algo que el visitante puede hacer hoy,
   no un logro nuestro. Rejilla de hairlines: el fondo del contenedor asoma
   por el gap de 1px y hace de línea divisoria, sin bordes por celda. */
.bv-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 20px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.bv-f{
  background:var(--card);padding:15px 15px 16px;
  display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;
}
.bv-ic{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--elev);border:1px solid var(--line-2);color:var(--teal-txt);
}
.bv-ic svg{display:block}
.bv-f b{
  display:block;font-size:.885rem;font-weight:650;letter-spacing:-.018em;
  line-height:1.3;margin-bottom:4px;color:var(--txt);
}
.bv-f b em{
  font-style:normal;font-family:var(--f-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.12em;color:var(--teal-txt);vertical-align:2px;margin-left:6px;
}
.bv-f span{display:block;font-size:.795rem;color:var(--txt-3);line-height:1.48}

.bv-proof{
  font-family:var(--f-mono);font-size:.685rem;letter-spacing:.03em;
  color:var(--txt-3);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px 10px;
}
.bv-proof b{color:var(--txt-2);font-weight:700}
.bv-proof i{font-style:normal;opacity:.45}

.bv-cta{display:flex;gap:10px;flex-wrap:wrap}
.bv-btn2{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 21px;border-radius:100px;cursor:pointer;
  background:none;border:1px solid var(--line-2);color:var(--txt);
  font-family:inherit;font-size:.94rem;font-weight:600;letter-spacing:-.012em;
  text-decoration:none;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.bv-btn2:hover{background:var(--elev);border-color:var(--teal)}
.bv-foot{margin:15px 0 0;font-size:.77rem;color:var(--txt-3)}
.bv-ghost{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:inherit;font-size:inherit;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:3px;
  transition:color .25s;
}
.bv-ghost:hover{color:var(--txt-2)}

@media(max-width:620px){
  .bv-grid{grid-template-columns:1fr}
  .bv-cta{flex-direction:column;gap:8px}
  .bv-cta .btn,.bv-btn2{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bv-ov .bv-bg,.bv-box{transition:none}
}
/* ── Barra de sugerencia de idioma ────────────────────────────────────────
   La pone el script aviso-idioma.js cuando el navegador del visitante pide
   un idioma distinto al de la página. OFRECE, no redirige: redirigir haría
   que Googlebot —que rastrea desde EE. UU.— dejara de ver el español.

   Abajo y no arriba: arriba taparía el nav y competiría con el aviso de
   cookies, que ya ocupa esa zona en la primera visita. */
.langbar{
  position:fixed;left:50%;bottom:18px;z-index:870;
  transform:translateX(-50%) translateY(14px);
  display:flex;align-items:center;gap:14px;
  padding:11px 12px 11px 18px;border-radius:100px;
  background:var(--elev);border:1px solid var(--line-2);box-shadow:var(--shadow);
  font-size:.86rem;color:var(--txt-2);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  max-width:calc(100vw - 32px);
}
.langbar[data-on="1"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.langbar-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langbar-go{
  flex:none;font-weight:600;color:var(--txt);
  border-bottom:1px solid var(--teal);padding-bottom:1px;
}
.langbar-go:hover{color:var(--teal-txt)}
.langbar-x{
  flex:none;background:none;border:0;color:var(--txt-3);cursor:pointer;
  font-size:.9rem;line-height:1;padding:5px 7px;border-radius:8px;
  transition:color .25s,background .25s;
}
.langbar-x:hover{color:var(--txt);background:var(--card)}

/* En móvil el botón flotante de EMA ya ocupa la esquina: la barra sube. */
@media(max-width:767px){
  .langbar{bottom:14px;font-size:.8rem;gap:10px;padding:9px 10px 9px 14px}
}
@media (prefers-reduced-motion:reduce){
  .langbar{transition:none}
}
/* ── Botón flotante de EMA ────────────────────────────────────────────────
   Sustituyó a la burbuja de Vyrkon el 26 de agosto de 2026: esa estaba
   siempre visible y, al vivir en un iframe de terceros, no había forma
   estable de moderarla.

   En reposo es un círculo apagado que solo insinúa que hay algo. Al pasar el
   puntero o al recibir el foco recupera opacidad, se colorea y se despliega
   con la etiqueta. La anchura se anima con un valor fijo y no con `auto`,
   porque `auto` no es interpolable.

   z-index 880: por debajo del nav (900) y de la superposición (960). */
.ema-fab{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:880;
  display:flex;align-items:center;
  height:46px;width:46px;padding:0;border-radius:100px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--card);color:var(--txt-3);
  opacity:.6;cursor:pointer;
  transition:opacity .28s var(--ease),width .34s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease);
}
.ema-fab .ema-fab-i{flex:none;display:grid;place-items:center;width:44px;height:44px}
.ema-fab .ema-fab-t{
  font-size:.83rem;font-weight:600;white-space:nowrap;letter-spacing:-.01em;
  opacity:0;padding-right:0;transition:opacity .22s var(--ease),padding-right .34s var(--ease);
}
.ema-fab:hover,
.ema-fab:focus-visible{
  opacity:1;width:184px;color:var(--txt);
  border-color:var(--teal);background:var(--elev);box-shadow:var(--shadow);
}
.ema-fab:hover .ema-fab-t,
.ema-fab:focus-visible .ema-fab-t{opacity:1;padding-right:18px}

/* Sin ratón no hay hover, así que en pantallas táctiles se queda desplegado
   y legible en vez de ser un círculo mudo que nadie sabe que se abre. */
@media (hover:none){
  .ema-fab{opacity:1;width:184px;color:var(--txt)}
  .ema-fab .ema-fab-t{opacity:1;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  .ema-fab,.ema-fab .ema-fab-t{transition:none}
}

.ema-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(46px,5vw,66px)}
.ema-feats .fi{font-size:1.4rem;display:block;margin-bottom:12px}
.ema-feats h3{font-size:1.03rem;margin-bottom:8px}
.ema-feats p{font-size:.86rem;color:var(--txt-3);margin:0;line-height:1.6}

/* Cuatro tarjetas caben en una fila hasta 1080. Debajo van de dos en dos, y
   solo en móvil se apilan: tres filas de una tarjeta sería una columna
   interminable. */
@media(max-width:1080px){
  .ema-feats{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:980px){
  .ema-hero{grid-template-columns:1fr;gap:46px}
}
@media(max-width:620px){
  .ema-feats{grid-template-columns:1fr}
}
/* Los resplandores decorativos sobresalían del viewport. Aunque .ema-sec los
   recorta en Chrome, en iOS Safari `overflow-x:hidden` no siempre lo impide y
   la página se desplazaba hacia la derecha. Se acotan en pantallas pequeñas. */
@media(max-width:900px){
  .ema-glow{top:-6%;right:0;width:min(100%,560px);height:460px}
  .phone-glow{inset:-8% -2%}
  .ema-stats{gap:16px;flex-wrap:wrap;justify-content:center}
}

/* ══════ HERO ══════ */
/* ── EL HERO OCUPA EXACTAMENTE UNA PANTALLA ───────────────────────────────
   Cambiado el 28 de agosto de 2026. Antes se recortó su contenido hasta que
   cupiera, y quedó al revés: en pantallas altas sobraba espacio y la factura
   se veía apretada.

   Ahora el hero RESERVA la altura de la ventana menos el nav fijo (69 px) y
   centra su contenido. Así ocupa exactamente el primer pantallazo, ni más ni
   menos, y en pantallas altas ese espacio de más se reparte como aire en vez
   de quedar vacío debajo.

   dvh y no vh: en móvil, vh incluye la barra de direcciones que se oculta al
   desplazar, así que con 100vh el hero queda más alto que la ventana real y
   siempre se corta algo. dvh mide el viewport dinámico. Se deja vh como
   respaldo para navegadores que no conocen dvh — la línea de vh va primero y
   la de dvh la sobrescribe donde exista.

   min-height y no height: si el contenido crece más que la ventana —móvil,
   traducciones largas— tiene que poder desbordar hacia abajo con normalidad
   en vez de solaparse. */
.hero{
  padding:clamp(74px,9vh,96px) 0 clamp(26px,3.2vw,40px);
  position:relative;overflow:hidden;
  min-height:calc(100vh - 69px);
  min-height:calc(100dvh - 69px);
  display:flex;align-items:center;
}
.hero > .wrap{width:100%}

/* Por debajo de 980 px el hero pasa a una columna y el contenido crece
   bastante: forzar la altura de la ventana solo añadiría hueco. */
@media(max-width:980px){
  .hero{min-height:0;display:block}
}
.hero::before{
  content:"";position:absolute;top:-32%;left:50%;transform:translateX(-50%);
  width:min(1200px,140vw);height:820px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(43,95,232,.30),rgba(123,92,240,.15) 44%,transparent 70%);
  filter:blur(38px);
}
[data-theme="light"] .hero::before{opacity:.26}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,4.5vw,64px);align-items:center;position:relative}
.hero h1{margin-bottom:22px}
.hero h1 .line2{display:block;color:var(--txt-2);font-weight:400;font-size:.48em;letter-spacing:-.015em;margin-top:13px;line-height:1.45;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 20px}
.hero-note{font-size:.83rem;color:var(--txt-3);display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.hero-note svg{margin-top:3px;flex:none}
.hero-note b{color:var(--teal);font-weight:600}

/* ── Signature: la factura que se audita sola ── */
.bill{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.bill-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--line);background:var(--elev);
}
.bill-top .t{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.bill-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 18px;text-transform:uppercase}
.bill-sec .lbl-big{font-family:var(--f-display);font-size:.86rem;font-weight:800;letter-spacing:.04em}
.bill-sec.you{background:var(--elev);border-bottom:1px solid var(--line)}
.bill-sec.you .lbl-big{color:var(--txt-2)}
.bill-sec.you .tot{font-family:var(--f-mono);font-size:.85rem;color:var(--txt);font-weight:700;white-space:nowrap}
.bill-sec.you .okpay{display:flex;align-items:center;gap:5px;color:var(--teal-txt);font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em}
.bill-sec.ema-lbl{border-bottom:1px solid var(--line);background:rgba(0,217,196,.07)}
.bill-sec.ema-lbl .lbl-big{background:linear-gradient(135deg,var(--teal),var(--electric));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bill-sec.ema-lbl i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blip 1.3s infinite}
@media(max-width:560px){
  .bill-sec .lbl-big{font-size:.74rem}
  /* En vez de esconder «se aprueba y se paga sin revisión», que es el punto
     del contraste, la fila envuelve y esa frase baja a su propio renglón. */
  .bill-sec.you{flex-wrap:wrap}
  .bill-sec.you .tot{margin-left:auto}
  .bill-sec.you .okpay{flex-basis:100%;margin-top:6px;font-size:.56rem}
}
.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.scanning{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.66rem;color:var(--teal-txt);letter-spacing:.09em}
.scanning i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blip 1.3s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
.scanline{
  position:absolute;left:0;right:0;height:78px;pointer-events:none;z-index:2;top:0;
  background:linear-gradient(180deg,transparent,rgba(0,217,196,.13) 55%,rgba(0,217,196,.42));
  border-bottom:1.5px solid var(--teal);
  animation:scan 5.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{0%{top:-78px}55%{top:100%}100%{top:100%}}
.bill-foot{
  padding:14px 20px;border-top:1px solid var(--line);background:var(--elev);
  display:grid;grid-template-columns:1.25fr .95fr;gap:12px;align-items:center;
}
.bill-foot .cell + .cell{padding-left:14px;border-left:1px solid var(--line)}
.bill-foot .lbl{display:block;font-size:.62rem;color:var(--txt-3);font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.bill-foot .amt{display:block;font-family:var(--f-mono);font-size:1.42rem;font-weight:700;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bill-foot .amt.pend{background:none;-webkit-text-fill-color:var(--amber);color:var(--amber);font-size:1.16rem}

/* ══════ Autoridad ══════ */
.auth{padding:clamp(44px,5.2vw,68px) 0 clamp(34px,3.8vw,48px);border-block:1px solid var(--line);background:var(--bg-alt)}
.auth-lbl{text-align:center;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:26px}
.auth-head{text-align:center;max-width:64ch;margin:0 auto clamp(34px,4vw,48px)}
.auth-head .eyebrow{justify-content:center}
.auth-head h2{margin-bottom:18px}
.auth-head .lede{margin-inline:auto}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.track{display:flex;gap:clamp(44px,5.6vw,80px);width:max-content;animation:slide 52s linear infinite;align-items:center}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* Los PNG llevan el fondo blanco recortado a alfa: van a color en ambos modos.
   En oscuro, un filo blanquecino levanta los logotipos de tinta negra. */
.track img{height:46px;width:auto;max-width:158px;object-fit:contain;opacity:.94;
  transition:opacity .3s,transform .3s var(--ease)}
.track img:hover{opacity:1;transform:scale(1.06)}
[data-theme="dark"] .track img{filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}
/* .mark-mono = wordmark 100% neutro (negro sobre transparente). En oscuro se invierte
   a blanco limpio; no hay color que estropear. Único caso hoy: Leonisa. */
[data-theme="dark"] .track img.mark-mono{filter:invert(1)}
@media(max-width:640px){.track img{height:38px;max-width:128px}}
.creds{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}

/* ══ Sellos de reconocimiento (respaldo del carrusel) ══ */
.seals{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;align-items:stretch;margin-top:30px}
.seal{display:grid;place-items:center;align-content:center;gap:7px;padding:14px 20px;min-height:98px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.seal:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.seal img{height:62px;width:auto;object-fit:contain}
.seal-scaleup img,.seal-un img{height:68px}
.seal-cosell img{height:52px}
.seal-forbes img{height:60px;border-radius:6px}
.seal-andi img{height:46px}
/* Número de certificado, antes incrustado ilegible en el PNG de Icontec. */
.seal small{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.11em;
  color:var(--txt-3);line-height:1;white-space:nowrap}
/* El sello de UN Global Compact es arte blanco: en modo claro se invierte a negro. */
[data-theme="light"] .seal-un img{filter:invert(1)}
/* En oscuro, el aro de IQNet y el azul marino de ANDI pierden contraste. */
[data-theme="dark"] .seal-iso img,[data-theme="dark"] .seal-andi img{filter:brightness(1.45)}
/* Co-Sell Ready: la tinta neutra del lockup viene invertida en el archivo -dark
   (los cuatro cuadros de Microsoft conservan su color en ambas versiones). */
.seal-cosell img{height:46px}
.seal-cosell .seal-d{display:none}
[data-theme="dark"] .seal-cosell .seal-l{display:none}
[data-theme="dark"] .seal-cosell .seal-d{display:block}
@media(max-width:560px){
  .seals{gap:9px;margin-top:24px}
  .seal{padding:11px 13px;min-height:78px;gap:5px}
  .seal img{height:46px}
  .seal-scaleup img,.seal-un img{height:50px}
  .seal-cosell img{height:38px}
  .seal-forbes img{height:44px}
  .seal-andi img{height:34px}
  .seal small{font-size:.5rem;letter-spacing:.08em}
}

/* ══════ Problema ══════ */
.prob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:23px}
.prob{position:relative;padding-top:34px}
.prob .n{
  position:absolute;top:24px;right:26px;font-family:var(--f-mono);font-size:.72rem;
  color:var(--txt-3);letter-spacing:.1em;
}
.prob .ic{font-size:1.5rem;margin-bottom:14px;display:block}
.prob h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.02em}
.prob p{font-size:.9rem;color:var(--txt-3);margin:0;line-height:1.65}
/* ── «No es tu empresa. Es el patrón.» ────────────────────────────────────
   Era una etiqueta monoespaciada de .7rem en gris apagado, encima de la
   banda de cifras: se leía como el pie de una tabla y nadie la veía. Es la
   frase que le quita al visitante la sensación de que su caso es especial
   —justo la objeción que impide pedir el diagnóstico— así que va con el
   peso de un titular pequeño. */
.patron{
  margin:52px 0 -6px;font-size:clamp(1.15rem,2.3vw,1.55rem);font-weight:650;
  letter-spacing:-.032em;line-height:1.2;text-wrap:balance;
}
.stat-strip{
  margin-top:28px;padding:30px clamp(24px,4vw,44px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
}
.stat-strip .s b{display:block;font-family:var(--f-mono);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-strip .s span{display:block;font-size:.82rem;color:var(--txt-2);margin-top:9px;line-height:1.5}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero{padding-top:110px}
}
@media(max-width:560px){
  .bl{padding:10px 15px;gap:8px}
  .bl .k,.bl .v{font-size:.79rem}
  .bl .tag{font-size:.55rem;padding:2px 6px;margin-left:6px}
  .bill-top .t{font-size:.6rem}
  .bill-foot .amt{font-size:1.32rem}
  .prob .n{top:20px;right:20px}
}

/* ══ Pared de logos de clientes ══ */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px;margin-top:31px}
.logo-wall .lw{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  aspect-ratio:11/6;display:grid;place-items:center;padding:14px;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.logo-wall .lw:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
/* min-width/min-height 0: si no, el ancho natural del PNG entra en el cálculo
   de min-content de la celda y desborda la parrilla en pantallas estrechas. */
/* width/height:auto ANULA los atributos width= y height= del HTML, que se
   mapean a CSS con especificidad baja. Sin esto el atributo fija la altura
   del elemento y la placa CRECE para acomodarlo: tiendas-d1 estiraba su
   placa de 83 a 114 px, y un logo de 641 px de alto la llevaba a 671,
   rompiendo la alineación de la parrilla. Con auto + max-*:100% la imagen
   se reduce proporcionalmente y la placa mantiene su aspect-ratio 11/6. */
.logo-wall .lw img{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;
  opacity:.9;transition:opacity .35s}
.logo-wall .lw:hover img{opacity:1}
[data-theme="dark"] .logo-wall .lw img{filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}
[data-theme="dark"] .logo-wall .lw img.mark-mono{filter:invert(1)}
/* ══ Banda CTA · piloto ══ */
.cta-band{padding:clamp(30px,3.4vw,46px) 0}
.cta-band-in{display:grid;grid-template-columns:1.38fr .62fr;gap:clamp(24px,4vw,50px);align-items:center;
  padding:clamp(28px,3.6vw,48px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line-2)}
.cta-band-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cta-band-act{display:grid;gap:12px}
.cta-band-act .btn{width:100%}
@media(max-width:820px){.cta-band-in{grid-template-columns:1fr}}

.wall-more{text-align:center;margin-top:26px;font-family:var(--f-mono);font-size:.82rem;
  letter-spacing:.04em;color:var(--txt-3)}
/* minmax(0,1fr) y NO repeat(2,1fr): `1fr` equivale a minmax(auto,1fr), y ese
   `auto` no deja que la pista baje del min-content del logo (188px + 28 de
   padding = 216px). Con 2 pistas de 216 la parrilla medía 446px dentro de un
   contenedor de 350 y las últimas filas se dibujaban sobre la sección siguiente. */
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ══════ Calificador ══════ */
.qual{
  border-radius:var(--r-xl);border:1px solid var(--line-2);background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;margin-top:31px;
}
.qual-head{padding:22px clamp(20px,3vw,34px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--elev)}
.steps{display:flex;gap:6px;align-items:center}
.steps i{width:30px;height:4px;border-radius:4px;background:var(--line-2);transition:background .5s var(--ease)}
.steps i.on{background:var(--grad)}
.qual-body{padding:clamp(24px,3.4vw,42px)}
.q-step{display:none;animation:fade .55s var(--ease)}
.q-step.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q-step h3{margin-bottom:8px;font-size:clamp(1.25rem,2.2vw,1.72rem)}
.q-step .hint{font-size:.87rem;color:var(--txt-3);margin-bottom:24px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px}
.opt{
  padding:18px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-alt);
  cursor:pointer;text-align:left;transition:.3s var(--ease);position:relative;
}
.opt:hover{border-color:var(--indigo);transform:translateY(-3px)}
.opt[aria-pressed="true"]{border-color:var(--teal);background:var(--grad-soft);box-shadow:0 0 0 1px var(--teal) inset}
.opt strong{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em}
.opt span{display:block;font-size:.78rem;color:var(--txt-3);margin-top:4px;line-height:1.45}
.q-nav{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;align-items:center}
.q-back{background:none;border:0;color:var(--txt-3);font-size:.86rem;cursor:pointer;padding:8px 4px}
.q-back:hover{color:var(--txt)}

.result{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(22px,3vw,40px);align-items:start}
.result-num{padding:26px;border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--line-2)}
.result-num .lbl{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-3)}
.result-num .big{font-family:var(--f-mono);font-size:clamp(1.35rem,2.5vw,1.95rem);font-weight:700;line-height:1.25;margin:10px 0 8px;display:block;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;word-break:break-word}
.result-num .sub{font-size:.83rem;color:var(--txt-2)}
.route{margin-top:16px;padding:15px 17px;border-radius:var(--r);background:var(--bg-alt);border:1px solid var(--line);
  font-size:.86rem;color:var(--txt-2);line-height:1.6}
.route b{color:var(--txt);font-weight:600}

.field{margin-bottom:13px}
.field label{display:block;font-size:.78rem;font-weight:500;color:var(--txt-2);margin-bottom:6px;letter-spacing:-.005em}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border-radius:var(--r-sm);background:var(--bg-alt);
  border:1px solid var(--line);transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;background:var(--elev)}
.field textarea{resize:vertical;min-height:98px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;color:var(--txt-3);line-height:1.55;margin:14px 0 16px}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--electric)}
.consent a{color:var(--teal);text-decoration:underline}
.form-msg{font-size:.85rem;margin-top:12px;display:none;padding:12px 15px;border-radius:var(--r-sm)}
.form-msg.ok{display:block;background:rgba(0,217,196,.1);border:1px solid rgba(0,217,196,.32);color:var(--teal)}
.form-msg.err{display:block;background:rgba(255,86,112,.1);border:1px solid rgba(255,86,112,.32);color:var(--red)}

/* ══════ Plataforma ══════ */
.plat{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.pcard{padding:clamp(26px,3vw,38px);position:relative;overflow:hidden}
.pcard::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.pcard .tagline{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:10px}
.pcard h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:12px;letter-spacing:-.04em}
.pcard p{font-size:.94rem;color:var(--txt-2)}
.plist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
/* La viñeta va posicionada, NO con flex.
   Antes esto era `display:flex;gap:11px`, y el flex convertía cada elemento en
   línea en su propio elemento flex: el <b> quedaba en una columna y el texto
   que le seguía en otra, con 11 px de separación. Con una sola negrita corta
   parecía intencional; al poner negrita en las seis viñetas, las largas
   envolvían dentro de su columna estrecha y la lista se leía escalonada.
   Con la viñeta absoluta el contenido vuelve a ser flujo en línea normal y la
   negrita se comporta como negrita. */
.plist li{position:relative;padding-left:16px;font-size:.84rem;color:var(--txt-2);line-height:1.6}
.plist li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--teal)}
.plist li b{color:var(--txt)}

/* Chat EMA mock */
.wa{margin-top:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-alt);overflow:hidden}
.wa-top{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--elev)}
.wa-av{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#fff}
.wa-top strong{font-size:.86rem;display:block;letter-spacing:-.01em}
.wa-top span{font-size:.68rem;color:var(--teal);font-family:var(--f-mono)}
.wa-msgs{padding:16px;display:grid;gap:10px}
.msg{max-width:84%;padding:11px 14px;border-radius:15px;font-size:.83rem;line-height:1.55}
.msg.them{background:var(--elev);border:1px solid var(--line);border-bottom-left-radius:5px;justify-self:start;color:var(--txt-2)}
.msg.us{background:var(--grad);color:#fff;border-bottom-right-radius:5px;justify-self:end}
.msg .mono{font-size:.8rem}

.omni{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.omni .card h3{font-size:1.05rem;margin-bottom:8px}
.omni .card p{font-size:.86rem;color:var(--txt-3);margin:0}

@media(max-width:900px){
  .plat,.result,.two{grid-template-columns:1fr}
}

/* ══════ Frentes ══════ */
.frentes{margin-top:31px;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--card)}
.fr{border-bottom:1px solid var(--line)}
.fr:last-child{border-bottom:0}
.fr-btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,26px);align-items:center;
  padding:clamp(19px,2.4vw,26px) clamp(20px,3vw,34px);background:none;border:0;cursor:pointer;text-align:left;
  transition:background .3s;
}
.fr-btn:hover{background:var(--elev)}
.fr-btn .num{font-family:var(--f-mono);font-size:.78rem;color:var(--txt-3);letter-spacing:.08em}
.fr-btn .ttl{font-size:clamp(1.02rem,1.9vw,1.34rem);font-weight:600;letter-spacing:-.028em}
.fr-btn .plus{width:29px;height:29px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--txt-2);transition:.35s var(--ease);flex:none}
.fr[data-open="1"] .plus{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(45deg)}
.fr[data-open="1"] .ttl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fr-panel{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.fr-in{padding:0 clamp(20px,3vw,34px) clamp(24px,3vw,32px) clamp(56px,7vw,90px)}
.fr-in p{font-size:.94rem;color:var(--txt-2);max-width:74ch}
.fr-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ══════ Ciclo ══════ */
.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:23px;position:relative}
.cycle::before{content:"";position:absolute;top:19px;left:10%;right:10%;height:2px;background:var(--grad);opacity:.35}
.cy{text-align:center;padding:0 10px;position:relative}
.cy .dot{width:40px;height:40px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);
  display:grid;place-items:center;margin:0 auto 16px;font-family:var(--f-mono);font-size:.8rem;font-weight:700;
  position:relative;z-index:2;transition:.4s var(--ease)}
.cy:hover .dot{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.12)}
.cy h4{font-size:.98rem;margin-bottom:7px;letter-spacing:-.02em}
.cy p{font-size:.81rem;color:var(--txt-3);margin:0;line-height:1.55}


@media(max-width:800px){
  .cycle{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  .cycle::before{display:none}
}
/* 5 pasos en 2 columnas dejan un huérfano y 168px por celda es muy estrecho. */
@media(max-width:560px){
  .cycle{grid-template-columns:1fr;gap:22px}
}

/* ══════ Fuentes de datos ══════ */
/* .sources quedó sin uso al pasar a la rejilla radial del hub: la clase
   contenedora ya no existe en el marcado. .src sí sigue viva. */
.src{padding:22px 20px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s}
.src:hover{transform:translateY(-4px);border-color:var(--line-2)}
.src .si{font-size:1.35rem;display:block;margin-bottom:11px}
.src h3{font-size:.95rem;margin-bottom:7px;letter-spacing:-.02em}
.src p{font-size:.8rem;color:var(--txt-3);margin:0;line-height:1.55}

/* ══════ Catálogo de soluciones ══════ */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:31px}
.sol{display:flex;flex-direction:column;padding:28px;position:relative;overflow:visible}
.sol .sticker{
  position:absolute;top:-13px;right:16px;z-index:3;
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;color:#fff;background:var(--grad);
  box-shadow:0 8px 22px -6px rgba(123,92,240,.7);
  
}

.sol .si{font-size:1.5rem;display:block;margin-bottom:13px}
.sol h3{font-size:1.14rem;margin-bottom:6px;letter-spacing:-.03em}
.sol .sub{font-size:.79rem;color:var(--teal);font-weight:500;margin-bottom:13px;display:block}
.sol p{font-size:.86rem;color:var(--txt-2);margin:0 0 14px;line-height:1.62}
.sol ol{margin:0 0 16px;padding-left:17px;display:grid;gap:6px}
.sol ol li{font-size:.8rem;color:var(--txt-3);line-height:1.5}
.sol .go{margin-top:auto;font-size:.83rem;font-weight:600;color:var(--txt-2);
  display:inline-flex;align-items:center;gap:7px;transition:gap .3s var(--ease),color .3s}
.sol:hover .go{gap:12px;color:var(--teal)}

/* ══════ PoC ══════ */
.poc{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,56px);align-items:center;
  padding:clamp(28px,3.8vw,50px);border-radius:var(--r-xl);background:var(--grad-soft);
  border:1px solid var(--line-2);margin-top:31px}
.poc-steps{display:grid;gap:12px}
.ps{display:flex;gap:15px;align-items:flex-start;padding:15px 18px;border-radius:var(--r);
  background:var(--bg-alt);border:1px solid var(--line)}
.ps .d{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.09em;color:var(--teal);
  padding:5px 10px;border-radius:100px;background:rgba(0,217,196,.11);border:1px solid rgba(0,217,196,.26);flex:none;white-space:nowrap}
.ps strong{display:block;font-size:.9rem;font-weight:600;margin-bottom:3px}
.ps span{display:block;font-size:.79rem;color:var(--txt-3);line-height:1.5}
.poc-terms{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px}

/* ══════ Comparador ══════ */
.cmp-wrap{margin-top:31px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--card)}
table.cmp{width:100%;border-collapse:collapse;min-width:660px}
/* La tabla no cabe en móvil: se desplaza, pero hacía falta decirlo. */
.cmp-hint{display:none;margin:12px 0 0;text-align:center;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
@media(max-width:760px){
  .cmp-hint{display:block}
  table.cmp{min-width:600px}
  table.cmp th,table.cmp td{padding:12px 13px;font-size:.81rem}
}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.86rem}
table.cmp thead th{background:var(--elev);font-size:.72rem;font-family:var(--f-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--txt-3);font-weight:500;position:sticky;top:0}
table.cmp thead th.us{color:var(--teal)}
/* La tabla pasó de 15 filas de funcionalidades a 7 ejes, el 31 de agosto de
   2026. Una lista de funcionalidades le enseña a la competencia qué copiar y
   diluye lo único que no pueden replicar. Cada fila lleva ahora una línea de
   por qué decide la compra: sin ella, «35.000» es un número; con ella, es un
   argumento. */
.cmp-why{display:block;margin-top:5px;font-size:.75rem;line-height:1.45;
  color:var(--txt-3);font-weight:400}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:var(--elev)}
table.cmp td.c{text-align:center;width:15%;font-family:var(--f-mono);font-size:.9rem}
table.cmp td.us{background:var(--grad-soft);color:var(--teal);font-weight:600}
table.cmp td.no{color:var(--txt-3)}
table.cmp td.mid{color:var(--amber)}

/* ══════ FAQ ══════ */
.faq{margin-top:31px;display:grid;gap:11px}
.fq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.fq-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:19px 24px;background:none;border:0;cursor:pointer;text-align:left;transition:background .3s}
.fq-btn:hover{background:var(--elev)}
.fq-btn span{font-size:.97rem;font-weight:600;letter-spacing:-.02em}
.fq-btn i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  flex:none;font-style:normal;font-size:.9rem;color:var(--txt-2);transition:.35s var(--ease)}
.fq[data-open="1"] i{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(45deg)}
.fq[data-open="1"] .fq-btn span{color:var(--teal)}
.fq-p{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
/* Sin medida de lectura, a propósito. Llevaba max-width:82ch, y `ch` a .88rem
   da ~7,3 px: 82ch resolvían a 725 px dentro de una caja de 1.152. El texto
   ocupaba el 63% del ancho y dejaba 427 px vacíos a la derecha, mientras la
   pregunta de arriba sí llegaba al borde — se leía como un fallo de maquetado.

   Una respuesta de FAQ son tres o cuatro líneas que se escanean, no un artículo
   que se lee de corrido, así que la medida larga no molesta aquí. Lo que sí
   hace falta con líneas largas es más interlínea, para no perder el renglón al
   volver: 1,68 → 1,72. Y el cuerpo sube a .92rem porque a ese ancho .88 se veía
   pequeño. El tope real lo pone .wrap con sus 1.240 px. */
.fq-p-in{padding:0 24px 22px;font-size:.92rem;color:var(--txt-2);line-height:1.72}
.fq-p-in a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

@media(max-width:980px){.sources{grid-template-columns:repeat(2,1fr)}.sol-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.poc{grid-template-columns:1fr}}
@media(max-width:640px){.sources,.sol-grid{grid-template-columns:1fr}}

/* ══════ Resultados ══════ */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:23px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.kpi{background:var(--card);padding:21px 18px;transition:background .4s}
.kpi:hover{background:var(--elev)}
.kpi b{display:block;font-family:var(--f-mono);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;line-height:1.1;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi span{display:block;font-size:.81rem;color:var(--txt-2);margin-top:10px;line-height:1.5}
.kpi.eco b{background:none;-webkit-text-fill-color:var(--lime);color:var(--lime)}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.kpis{grid-template-columns:1fr}}


/* Banda del piloto 6,8×. Sustituye a .quotes/.quote, que quedaron sin uso al
   retirar los cuatro testimonios escritos el 25 de agosto de 2026 (los seis
   vídeos de abajo ya cubren la voz del cliente). Es horizontal a propósito:
   como tarjeta vertical ocupaba 250 px para una sola cifra. */
.piloto{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);margin-top:26px;
  padding:22px clamp(22px,2.8vw,32px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line-2)}
.piloto-n{font-family:var(--f-mono);font-size:clamp(2rem,3.4vw,2.6rem);font-weight:700;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:none}
.piloto p{margin:0;font-size:.95rem;line-height:1.55;color:var(--txt-2)}
.piloto p b{color:var(--txt)}
@media(max-width:560px){.piloto{flex-direction:column;align-items:flex-start;gap:12px}}

/* ══════ Recursos ══════ */
.magnet{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.5vw,48px);align-items:center;
  padding:clamp(28px,3.6vw,48px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line-2);margin-top:31px;
}
.magnet h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:12px;letter-spacing:-.035em}
.magnet p{font-size:.94rem;color:var(--txt-2);margin-bottom:0}
.magnet ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.magnet ul li{font-size:.86rem;color:var(--txt-2);display:flex;gap:10px}
.magnet ul li::before{content:"→";color:var(--teal);flex:none}

.res-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:44px 0 24px}
.res-tab{padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:var(--card);
  font-size:.85rem;font-weight:500;color:var(--txt-2);cursor:pointer;transition:.3s var(--ease)}
.res-tab:hover{border-color:var(--indigo);color:var(--txt)}
.res-tab[aria-selected="true"]{background:var(--grad);border-color:transparent;color:#fff}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:18px}
.res{display:flex;flex-direction:column;padding:26px}
.res .kind{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:13px}
.res h3{font-size:1.03rem;margin-bottom:9px;line-height:1.35}
.res p{font-size:.85rem;color:var(--txt-3);margin:0 0 18px;line-height:1.6}
.res .go{margin-top:auto;font-size:.83rem;font-weight:600;color:var(--txt-2);display:flex;align-items:center;gap:7px;transition:gap .3s var(--ease),color .3s}
.res:hover .go{gap:12px;color:var(--teal)}

/* ══════ PQRF ══════ */
.pqrf-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,54px);margin-top:28px;align-items:start}
.pqrf-types{display:grid;gap:11px}
.pt{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.pt .l{width:30px;height:30px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.85rem;color:var(--teal);flex:none}
.pt strong{display:block;font-size:.9rem;font-weight:600}
.pt span{display:block;font-size:.79rem;color:var(--txt-3);line-height:1.5;margin-top:2px}
.sla{margin-top:16px;padding:15px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--grad-soft);
  font-size:.84rem;color:var(--txt-2);line-height:1.6}

@media(max-width:900px){.magnet,.pqrf-grid{grid-template-columns:1fr}}

/* ══════ CTA final ══════ */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:min(1000px,130vw);height:700px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(123,92,240,.28),rgba(0,217,196,.10) 48%,transparent 70%);
  filter:blur(40px);
}
[data-theme="light"] .final::before{opacity:.28}
.final .inner{position:relative;max-width:800px;margin-inline:auto}
.final h2{margin-bottom:20px}
.final .lede{margin-inline:auto;text-align:center}
.final-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:23px}
.guarantee{
  margin-top:24px;display:inline-flex;align-items:center;gap:13px;padding:15px 24px;border-radius:100px;
  background:var(--card);border:1px solid var(--line-2);font-size:.87rem;color:var(--txt-2);text-align:left;
}
.guarantee b{color:var(--txt);font-weight:600}

/* ══════ Footer ══════ */
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:clamp(42px,4.6vw,60px) 0 28px}
.foot-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:clamp(26px,4vw,50px)}
/* Version con slogan (1010x244). Sin atributos width/height en el <img> y con
   width:auto + object-fit:contain: asi nada puede imponerle un ancho y
   deformarlo, que era lo que pasaba antes. */
.foot-brand .logo{height:56px;width:auto;object-fit:contain;margin-bottom:18px}
.foot-brand .logo-dark{display:none}
[data-theme="dark"] .foot-brand .logo-light{display:none}
[data-theme="dark"] .foot-brand .logo-dark{display:block}
.foot-brand p{font-size:.87rem;color:var(--txt-3);max-width:34ch;line-height:1.65}
.foot h4{font-size:.72rem;font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:16px;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot ul a{font-size:.87rem;color:var(--txt-2);transition:color .25s}
.foot ul a:hover{color:var(--teal)}
.foot address{font-style:normal;font-size:.85rem;color:var(--txt-2);line-height:1.7}
.socials{display:flex;gap:9px;margin-top:20px}
.socials a{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--txt-2);transition:.3s var(--ease)}
.socials a:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.foot-bot{margin-top:31px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.79rem;color:var(--txt-3)}
.foot-bot a{color:var(--txt-3);text-decoration:underline;text-underline-offset:3px}
.foot-bot a:hover{color:var(--teal)}
.pact{margin-top:24px;padding:14px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  font-size:.78rem;color:var(--txt-3);line-height:1.6;max-width:44ch}

/* WhatsApp flotante */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:880;display:flex;align-items:center;gap:10px;
  padding:13px 20px 13px 15px;border-radius:100px;background:var(--grad);color:#fff;font-weight:600;font-size:.87rem;
  box-shadow:0 14px 40px -12px rgba(43,95,232,.75);transition:transform .3s var(--ease);
}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float span{display:none}
@media(min-width:700px){.wa-float span{display:inline}}

@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE CON TEXTURAS · capa añadida sobre el CSS base
   Criterio: la textura va SOLO en 4 secciones de acento y siempre por
   debajo del contenido. Nunca detrás de texto corrido — el texto se
   apoya en tarjeta o en zona plana. Con 14 secciones, texturizarlas
   todas convierte el diseño en ruido.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --tx-hero:url('texturas/fondo-claro.jpg');
  --tx-ema:url('texturas/fondo-claro.jpg');
  --tx-cta:url('texturas/fondo-claro.jpg');
  --tx-final:url('texturas/fondo-claro.jpg');
  --tx-datos:url('texturas/fondo-claro.jpg');
  --tx-menu:url('texturas/menu-claro.png');
  --tx-o:.95; --tx-o-ema:.8; --tx-o-cta:.6; --tx-o-final:1; --tx-o-datos:.6;
  --tx-scrim:linear-gradient(180deg,rgba(240,244,255,0) 0%,rgba(240,244,255,.5) 58%,var(--bg) 100%);
}
[data-theme="dark"]{
  --tx-hero:url('texturas/fondo-oscuro-azul.jpg');
  --tx-ema:url('texturas/fondo-oscuro-morado.jpg');
  --tx-cta:url('texturas/fondo-oscuro-azul.jpg');
  --tx-final:url('texturas/fondo-oscuro-azul.jpg');
  --tx-datos:url('texturas/fondo-oscuro-azul.jpg');
  --tx-menu:url('texturas/menu-oscuro.png');
  --tx-o:.66; --tx-o-ema:.55; --tx-o-cta:.42; --tx-o-final:.75; --tx-o-datos:.42;
  --tx-scrim:linear-gradient(180deg,rgba(6,9,21,0) 0%,rgba(6,9,21,.5) 58%,var(--bg) 100%);
}

/* isolation: mantiene el z-index:-1 dentro de la sección, por encima de su
   propio fondo y por debajo del contenido y de los resplandores existentes */
.hero,.ema-sec,.cta-band,.final,.mob,#datos{isolation:isolate}
.hero::after,.ema-sec::before,.cta-band::before,.final::after,#datos::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
/* el scrim va PRIMERO en la lista: se pinta encima de la textura y la funde
   con el fondo justo donde empieza el texto */
.hero::after     {background-image:var(--tx-scrim),var(--tx-hero); opacity:var(--tx-o)}
.ema-sec::before {background-image:var(--tx-scrim),var(--tx-ema);  opacity:var(--tx-o-ema);
                  background-position:right center,right center}
.cta-band::before{background-image:var(--tx-cta);                  opacity:var(--tx-o-cta);
                  background-position:left center}
.final::after    {background-image:var(--tx-scrim),var(--tx-final);opacity:var(--tx-o-final);
                  background-position:center bottom}

/* HUB · textura a todo el bloque, sin velo.
   PRIMER INTENTO FALLIDO, anotado para no repetirlo: puse un degradado
   radial transparente en el centro y del color de la sección hacia los
   bordes, pensando que concentraría la textura donde converge el
   diagrama. Pero el centro es exactamente donde se apoya .hub-core, que
   es opaca: la única zona con textura quedaba tapada por el propio hub.
   Ahora va como .cta-band, que es el precedente de sección sin velo:
   textura completa a opacidad moderada. El texto no sufre porque cada
   tarjeta tiene su propio fondo opaco; la textura se ve en los huecos. */
#datos::after    {background-image:var(--tx-datos); opacity:var(--tx-o-datos)}

/* Menú móvil: la tira vertical de 140px encaja como acento del borde. */
.mob::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:min(140px,34vw);z-index:-1;
  pointer-events:none;opacity:.55;
  background:var(--tx-menu) left top/100% 100% no-repeat;
}


/* Las tarjetas necesitan un pelo más de cuerpo para no perderse sobre textura */
.hero .bill,.final .guarantee{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ══════════════════════════════════════════════════════════════════════
   LOGOS DE CLIENTE EN MODO OSCURO
   ──────────────────────────────────────────────────────────────────────
   Medido sobre los 53 archivos: 20 son un campo de color con detalle
   interior del mismo tono (TCC, Olímpica, Burger King, Colanta, Vips,
   Dollarcity, WOM…). Convertirlos a silueta monocroma los deja
   ilegibles — TCC queda literalmente en una elipse vacía.
   La única solución que respeta las 53 marcas es devolverles el fondo
   claro para el que fueron diseñadas, pero en una placa uniforme,
   suave y con el mismo radio en todas: así se lee como decisión de
   diseño y no como un recuadro accidental.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .logo-wall .lw{
  background:#EDF1FB;
  border-color:rgba(148,170,235,.20);
}
[data-theme="dark"] .logo-wall .lw:hover{
  border-color:rgba(148,170,235,.48);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.7);
}
/* sin halo ni inversión: sobre placa clara los logos van tal cual */
[data-theme="dark"] .logo-wall .lw img,
[data-theme="dark"] .logo-wall .lw img.mark-mono{filter:none}

/* En el reel no hay tarjeta contenedora, así que la placa se aplica al
   propio <img>: su fondo se ve a través de las zonas transparentes. */
[data-theme="dark"] .track img,
[data-theme="dark"] .track img.mark-mono{
  filter:none;
  background:#EDF1FB;
  padding:9px 14px;
  border-radius:11px;
  box-sizing:content-box;
}
@media(max-width:640px){
  [data-theme="dark"] .track img{padding:7px 11px;border-radius:9px}
}

/* ══════════════════════════════════════════════════════════════════════
   FACTURA AUDITADA POR LOS 5 FRENTES
   Cifras: total 25.575.900 · identificado 7.161.100 = 28,0%
   Reparto: consumos 2.312.400 · reactiva 598.600 · tarifas 1.904.700
            reclamaciones 1.061.500 · impuestos 1.283.900
   Los contadores NO usan [data-count]: ese atributo lo dispara el
   observador global y rompería la secuencia. Usan data-monto y su
   propia animación encadenada.
   ══════════════════════════════════════════════════════════════════════ */
.ema-sub{
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.07em;
  color:var(--teal-txt);text-transform:uppercase;margin-left:auto;margin-right:10px;
  padding:2px 9px;border-radius:100px;
  background:rgba(0,217,196,.11);border:1px solid rgba(0,217,196,.28);
}
@media(max-width:560px){
  .bill-sec.ema-lbl{flex-wrap:wrap}
  .ema-sub{flex-basis:100%;margin:6px 0 0;order:3}
}

.au-body{position:relative;padding:5px 0}

/* ── una fila por frente ── */
.au-fr{
  display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:start;
  padding:9px 20px;border-left:2.5px solid transparent;
  opacity:.34;filter:saturate(.4);
  transition:opacity .45s var(--ease),background .45s,border-color .45s,filter .45s;
}
.au-n{
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.04em;
  color:var(--txt-3);padding-top:3px;transition:color .45s;
}
.au-t{font-size:.85rem;font-weight:600;color:var(--txt);letter-spacing:-.02em;line-height:1.28}
.au-t small{
  display:block;font-size:.72rem;font-weight:400;color:var(--txt-3);line-height:1.42;
  margin-top:2px;max-width:46ch;
  opacity:0;transform:translateY(-3px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s;
}
/* Dinero y porcentaje en la misma linea. El ancho va reservado: sin esto la
   columna arranca en 22px con "$ 0" y el grid salta cada vez que una cifra
   termina de contar. */
.au-v{
  display:flex;align-items:baseline;justify-content:flex-end;gap:7px;
  white-space:nowrap;padding-top:1px;min-width:150px;
}
.au-m{font-family:var(--f-mono);font-size:.88rem;font-weight:700;font-style:normal;
  color:var(--txt-3);transition:color .45s}
.au-p{
  font-family:var(--f-mono);font-size:.63rem;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:100px;color:var(--txt-3);
  background:var(--elev);border:1px solid var(--line-2);
  transition:color .45s,background .45s,border-color .45s;
}

/* mientras EMA revisa ese frente */
.au-fr.scan{opacity:1;filter:none;background:rgba(0,217,196,.08);border-left-color:var(--teal)}
.au-fr.scan .au-n{color:var(--teal)}
/* frente ya auditado, con hallazgo */
.au-fr.done{opacity:1;filter:none;background:rgba(255,86,112,.06);border-left-color:var(--red)}
.au-fr.done .au-n{color:var(--red)}
.au-fr.done .au-m{color:var(--red)}
.au-fr.done .au-p{color:var(--red);background:rgba(255,86,112,.13);border-color:rgba(255,86,112,.32)}
.au-fr.done .au-t small{opacity:1;transform:none}
/* El bonus no usa revelado propio: la fila completa ya hace el fundido con
   .au-bonus {opacity:.3} -> .on {opacity:1}. Anidar un segundo fundido aqui
   dejaba el texto invisible. */
.au-bonus .au-t small{opacity:1;transform:none;transition:none}

/* ── bonus ── */
.au-bonus{
  display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:start;
  padding:12px 20px;border-top:1px dashed var(--line-2);
  background:linear-gradient(90deg,rgba(0,217,196,.09),transparent 70%);
  opacity:.3;transform:translateY(4px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.au-bonus.on{opacity:1;transform:none}
.au-plus{
  font-family:var(--f-mono);font-size:1.05rem;font-weight:700;color:var(--teal-txt);
  line-height:1;padding-top:1px;text-align:center;
}
.au-hh{
  font-family:var(--f-mono);font-size:.9rem;font-weight:700;white-space:nowrap;
  color:var(--teal);padding-top:2px;min-width:98px;text-align:right;
}

/* ── pie ── */
.bill-foot .amt.hh{
  background:none;-webkit-text-fill-color:var(--teal-txt);color:var(--teal-txt);font-size:1.16rem;
}
.bill-foot .nota{
  display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;
  color:var(--txt-3);margin-top:3px;text-transform:uppercase;
}
#au-pct{color:var(--teal-txt);font-weight:700}

/* ── repetir: vive en la barra de arriba, junto al estado, para no tapar el pie ── */
.au-again{
  display:inline-grid;place-items:center;cursor:pointer;flex:none;
  width:22px;height:22px;margin-left:2px;padding:0;border-radius:50%;
  background:transparent;border:1px solid var(--line-2);color:var(--txt-3);
  transition:color .3s,border-color .3s,transform .3s var(--ease);
}
.au-again:hover{color:var(--teal-txt);border-color:var(--teal-txt);transform:rotate(-45deg)}
.au-again[hidden]{display:none}

/* la línea de escaneo solo se mueve mientras hay auditoría en curso */
.bill:not(.auditando) .scanline{display:none}

@media(max-width:560px){
  /* La cifra se queda en su columna: bajarla a una fila propia sumaba
     125px de alto al widget, más de una pantalla en total. */
  /* A 350px, tres columnas dejaban el titulo en 141px. El dinero baja a su
     propio renglon para que el titulo use el ancho completo. */
  .au-fr,.au-bonus{grid-template-columns:20px 1fr;gap:8px;padding-inline:16px}
  .au-t{font-size:.82rem}
  .au-t small{font-size:.68rem;line-height:1.45;margin-top:3px}
  .au-v,.au-hh{grid-column:2;justify-content:flex-start;min-width:0;padding-top:5px}
  .au-m{font-size:.92rem}
}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS · hero corto
   Usa la misma textura y el mismo velo que el hero del index, para que
   soluciones, recursos y PQRF no se sientan de otro sitio.
   ══════════════════════════════════════════════════════════════════════ */
.page-hero{
  padding:clamp(122px,14vh,158px) 0 clamp(28px,3.6vw,48px);
  position:relative;overflow:hidden;isolation:isolate;
}
.page-hero .lede{margin-top:16px}
.page-hero::after,
.page-top::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center;
  background-image:var(--tx-scrim),var(--tx-hero);opacity:var(--tx-o);
}
/* Cuando la primera seccion NO es un .page-hero (caso PQRF), necesita el
   mismo despeje: con el padding normal quedaba a 6px del nav fijo en movil. */
.page-top{
  padding-top:clamp(122px,14vh,158px);
  position:relative;overflow:hidden;isolation:isolate;
}

/* ══════════════════════════════════════════════════════════════════════
   CONSENTIMIENTO DE COOKIES · opt-in para todos los mercados
   Nada de seguimiento hasta que el visitante acepte. Los FORMULARIOS
   siguen funcionando en todos los casos: capturar un lead tiene base
   legal propia (la casilla de autorización del propio formulario), así
   que bloquear el envío sería un error, no una precaución.
   ══════════════════════════════════════════════════════════════════════ */
.ck{
  position:fixed;z-index:970;left:16px;right:16px;bottom:16px;
  max-width:560px;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--line-2);box-shadow:0 26px 60px -20px rgba(0,0,0,.55);
  transform:translateY(16px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.ck.on{transform:none;opacity:1}
.ck[hidden]{display:none}
@media(min-width:760px){.ck{left:24px;right:auto;bottom:24px}}

.ck h2{font-size:1rem;margin:0 0 8px;letter-spacing:-.02em}
.ck p{font-size:.83rem;color:var(--txt-2);line-height:1.6;margin:0 0 14px}
.ck a{color:var(--teal-txt);border-bottom:1px solid rgba(0,217,196,.35)}
.ck-acc{display:flex;flex-wrap:wrap;gap:9px}
.ck-acc .btn{padding:11px 20px;font-size:.85rem}
.ck-link{
  background:none;border:0;cursor:pointer;padding:11px 4px;
  font-family:inherit;font-size:.8rem;color:var(--txt-3);text-decoration:underline;
  text-underline-offset:3px;transition:color .25s;
}
.ck-link:hover{color:var(--txt)}

/* Objetivo tactil: en movil los botones se quedaban en 40-41px y el minimo
   recomendado son 44. Tambien ocupan el ancho completo, que en una decision
   legal conviene que no haya ambiguedad sobre donde se pulsa. */
@media(max-width:560px){
  .ck{padding:18px 18px 16px}
  .ck-acc{gap:8px}
  .ck-acc .btn{padding:13px 20px;width:100%}
  .ck-link{padding:13px 4px;width:100%}
}

/* detalle por categorías */
.ck-det{margin:0 0 14px;border-top:1px solid var(--line);padding-top:13px}
.ck-det[hidden]{display:none}
.ck-cat{display:flex;align-items:flex-start;gap:11px;padding:9px 0}
.ck-cat + .ck-cat{border-top:1px solid var(--line)}
.ck-cat input{margin-top:3px;width:15px;height:15px;flex:none;accent-color:var(--teal)}
.ck-cat input:disabled{opacity:.55}
.ck-cat b{display:block;font-size:.8rem;font-weight:600;margin-bottom:2px}
.ck-cat span{display:block;font-size:.74rem;color:var(--txt-3);line-height:1.5}

/* reabrir desde el footer */
.ck-reopen{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--txt-3);text-decoration:underline;text-underline-offset:3px}
.ck-reopen:hover{color:var(--teal-txt)}


/* ══════════════════════════════════════════════════════════════════════════
   HUB ENERGÉTICO · las ocho fuentes convergiendo
   ══════════════════════════════════════════════════════════════════════════

   Antes era una parrilla plana de 4×2. La disposición radial no es adorno:
   es el argumento. Ocho fuentes entrando a un mismo modelo es lo que
   justifica llamarlo inteligencia energética y no un reporte de facturas.

   POR QUÉ REJILLA 3×3 Y NO POSICIONES ABSOLUTAS: sin valores mágicos en
   píxeles, y en móvil se reordena solo cambiando las columnas. El hub va en
   la celda central.

   LAS LÍNEAS son un SVG con preserveAspectRatio="none", así sus coordenadas
   0–100 se leen como porcentajes de la caja. No hace falta JS ni escuchar
   resize. Con las tres filas en 1fr, los centros de celda caen en
   x≈15,2 / 50 / 84,8 y en y≈15,8 / 50 / 84,2 — de ahí salen los extremos.

   Las tarjetas siguen siendo texto real, no una imagen: se leen igual con
   lector de pantalla, las indexa Google y las ven los rastreadores de IA.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Hub radial ═══════════════════════════════════════════════════════════
   Reemplazó a la rejilla 3×3 el 25 de agosto de 2026. El núcleo va en el
   centro absoluto y las ocho fuentes sobre una elipse a su alrededor.

   Cada nodo trae su posición en --x/--y y su retardo de entrada en --d,
   escritos en el marcado. Ocho pares de valores fijos: se leen de un vistazo
   y no hay trigonometría en CSS ni JS que los calcule.

   ⚠ Los nodos y el núcleo NO pueden llevar la clase .rv: esa clase anima
   `transform`, que aquí es lo que los coloca, y los mandaría al origen. Por
   eso .rv vive solo en .hub-stage, el contenedor, que no se posiciona.

   Por lo mismo la entrada anima `opacity` y `scale` —propiedades
   independientes, ya usadas en hubPulse— y nunca `transform`.
   ═══════════════════════════════════════════════════════════════════════ */
.hub-stage{
  position:relative;margin-top:30px;isolation:isolate;min-height:460px;
}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hub-lines line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 7;
  animation:hubFlow 2.6s linear infinite}

/* CORREGIDO el 26 de agosto de 2026: iba al revés. El trazo arranca en el
   centro (x1,y1 = 50,50), y un stroke-dashoffset que va a NEGATIVO empuja los
   guiones hacia el final del trazo — o sea hacia los nodos, hacia afuera. En
   positivo viajan hacia el inicio, que es el centro. El hub concentra: entran. */
@keyframes hubFlow{ to{ stroke-dashoffset:10 } }

/* ── Los ocho nodos ── */
.node{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  z-index:1;width:min(196px,17vw);
  padding:14px 16px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
  animation:nodeIn .68s var(--ease) var(--d,0ms) both;
}
.node .ico{
  display:grid;place-items:center;width:32px;height:32px;margin-bottom:9px;
  border-radius:9px;background:var(--grad-soft);border:1px solid var(--line-2);color:var(--teal-txt);
}
.node h3{font-size:.87rem;font-weight:650;letter-spacing:-.02em;margin:0 0 3px;line-height:1.25}
.node p{font-size:.75rem;color:var(--txt-3);margin:0;line-height:1.4}

@keyframes nodeIn{
  from{opacity:0;scale:.9}
  to{opacity:1;scale:1}
}

/* ── Centro ── */
.hub-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 20px;width:min(288px,26vw);
  border-radius:var(--r-xl);background:var(--elev);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.hub-core .logo{width:min(172px,72%);height:auto;display:block;margin:0 auto 13px}
.hub-core .logo-dark{display:none}
[data-theme="dark"] .hub-core .logo-light{display:none}
[data-theme="dark"] .hub-core .logo-dark{display:block}
.hub-core .hub-label{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-txt);margin:0 0 10px;
}
.hub-core .hub-sep{height:1px;width:44px;background:var(--line-2);margin:11px auto}
.hub-core .hub-note{font-size:.76rem;color:var(--txt-3);margin:0;line-height:1.5}
.hub-core .hub-note b{color:var(--txt-2)}

/* Los dos anillos que laten alrededor del núcleo. */
.hub-core::before,
.hub-core::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  border-radius:50%;border:1px solid var(--line-2);pointer-events:none;z-index:-1;
}
.hub-core::before{width:126%;aspect-ratio:1;animation:hubPulse 6s var(--ease) infinite}
.hub-core::after{width:158%;aspect-ratio:1;opacity:.5;animation:hubPulse 6s var(--ease) 1.6s infinite}
@keyframes hubPulse{
  0%,100%{opacity:.55;scale:1}
  50%{opacity:.14;scale:1.055}
}

/* El cierre, ahora un párrafo y no una lista de tres viñetas: las viñetas
   repetían lo que ya dicen los nodos y añadían 160 px a la sección. */
.hub-claim{
  margin-top:26px;padding:20px 26px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
  font-size:.95rem;color:var(--txt-2);line-height:1.62;max-width:none;
}
.hub-claim b{color:var(--txt)}

/* ── Por debajo de 1000px la elipse no cabe: vuelve a lista ──
   El hub deja de ser centro y pasa a encabezarla, que es como se entiende
   la idea cuando no hay espacio para dibujarla. */
@media (max-width:1000px){
  .hub-stage{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;min-height:0}
  .hub-lines{display:none}
  .node{position:static;left:auto;top:auto;transform:none;width:auto;animation:none}
  .hub-core{position:static;left:auto;top:auto;transform:none;width:auto;
    grid-column:1/-1;order:-1;max-width:none}
  .hub-core::before,.hub-core::after{display:none}
}
@media (max-width:560px){
  .hub-stage{grid-template-columns:1fr}
}

/* Sin animación para quien la pidió apagada. El retardo también se anula:
   la regla global solo pone la duración en .001ms, así que sin esto un nodo
   se quedaría medio segundo invisible antes de aparecer de golpe. */
@media (prefers-reduced-motion:reduce){
  .hub-core::before,.hub-core::after{animation:none}
  .hub-lines line{animation:none}
  .node{animation-delay:0ms!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGOS QUE LLEGARON CON FONDO BLANCO OPACO
   ══════════════════════════════════════════════════════════════════════════
   Los 53 originales llevan el blanco recortado a alfa, así que flotan sobre la
   placa. Algunos logos nuevos llegaron con fondo blanco sólido y se ven como
   un recuadro con borde duro al lado de los demás.

   multiply funde el blanco con la placa hasta hacerlo desaparecer, y deja
   intactos los tonos oscuros y saturados del logo. Funciona en LOS DOS TEMAS
   porque la placa es clara en ambos: #F8FAFF en claro y #EDF1FB en oscuro.

   ES UN PARCHE, no la solución. Lo correcto es recortar el blanco a alfa en el
   archivo. Dos límites conocidos:
   · el antialias del borde queda como un halo muy tenue en vez de desaparecer
   · si un logo usara blanco como parte del diseño, ese blanco también se iría
   Antes de poner esta clase hay que comprobar que el blanco sea solo fondo.
   ══════════════════════════════════════════════════════════════════════════ */
.logo-wall .lw img.sobre-blanco{mix-blend-mode:multiply}

/* ══════════════════════════════════════════════════════════════════════════
   PERSONALIZADOR · tira de sector
   ══════════════════════════════════════════════════════════════════════════
   Dos estados en el mismo componente: la pregunta con los chips, y el aviso
   de «viendo para X» con opción de cambiar. Así no hace falta una barra fija
   extra compitiendo con el nav.

   No lleva textura ni fondo de acento a propósito: va pegada al hero, que sí
   la tiene, y dos superficies texturizadas seguidas se pelean.
   ══════════════════════════════════════════════════════════════════════════ */
.pers{background:var(--bg-alt);border-block:1px solid var(--line)}
.pers .wrap{padding-block:20px}

.pers-ask{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pers-copy{flex:0 0 auto}
.pers-q{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.015em;color:var(--txt)}
.pers-hint{margin:3px 0 0;font-size:.82rem;color:var(--txt-3)}

.pers-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 420px}
.pers-chip{
  font:inherit;font-size:.82rem;font-weight:500;line-height:1;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  color:var(--txt-2);background:var(--card);
  border:1px solid var(--line);
  transition:border-color .25s,color .25s,background .25s,transform .25s var(--ease);
}
.pers-chip:hover{border-color:var(--line-2);color:var(--txt);transform:translateY(-2px)}
.pers-chip:focus-visible{outline:2px solid var(--teal-txt);outline-offset:2px}

/* Estado elegido */
.pers-on{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pers-on-txt{margin:0;font-size:.92rem;color:var(--txt-2);display:flex;align-items:center;gap:9px}
.pers-on-txt b{color:var(--txt)}
.pers-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-txt);flex:0 0 auto}
.pers-change{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  padding:7px 13px;border-radius:999px;
  color:var(--teal-txt);background:transparent;border:1px solid var(--line-2);
  transition:background .25s,color .25s;
}
.pers-change:hover{background:var(--elev);color:var(--txt)}

@media (max-width:700px){
  .pers-copy{flex:1 1 100%}
  .pers-chips{flex:1 1 100%}
  .pers-chip{font-size:.78rem;padding:8px 12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE CONTACTO
   ══════════════════════════════════════════════════════════════════════════
   Misma rejilla que .pqrf-grid pero invertida: aquí la columna ancha es el
   formulario, porque es la acción principal de la página. En PQRF la ancha era
   la explicación de los cuatro tipos.

   Reutiliza .pqrf-types y .pt para el bloque de derivación al PQRF: son las
   mismas cuatro tarjetas y no tiene sentido duplicar estilos.
   ══════════════════════════════════════════════════════════════════════════ */
.ct-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,54px);margin-top:28px;align-items:start}
.ct-facts{display:grid;gap:12px}
.cf{padding:16px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.cf strong{display:block;font-size:.9rem;letter-spacing:-.015em;margin-bottom:5px}
.cf span{display:block;font-size:.83rem;color:var(--txt-3);line-height:1.55}
.cf a{color:var(--teal-txt);font-weight:600}

/* Derivación al PQRF: la explicación a la izquierda y las cuatro letras a la
   derecha, al revés que el formulario de arriba, para que las dos secciones no
   se lean como la misma cosa repetida. */
.pqrf-call{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:center}

@media(max-width:900px){
  .ct-grid,.pqrf-call{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   MULTIPAÍS
   ══════════════════════════════════════════════════════════════════════════
   Cuatro tarjetas en dos filas de dos, no cuatro en línea: cada una tiene
   título y párrafo, y a cuatro columnas el texto queda en columnas de 250 px
   que se leen mal. Con dos, cada tarjeta respira.
   ══════════════════════════════════════════════════════════════════════════ */
.mp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.mp{
  position:relative;padding:26px 24px 24px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s;
}
.mp:hover{transform:translateY(-4px);border-color:var(--line-2)}
.mp-n{
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--teal-txt);display:block;margin-bottom:12px;
}
.mp h3{font-size:1.02rem;letter-spacing:-.02em;margin:0 0 9px}
.mp p{font-size:.88rem;color:var(--txt-3);margin:0;line-height:1.6}

/* El cierre: es el argumento de diferenciación, así que va con más peso
   tipográfico que una tarjeta y sobre fondo elevado. */
.mp-close{
  margin-top:22px;padding:24px 28px;border-radius:var(--r-lg);
  background:var(--elev);border:1px solid var(--line-2);
  font-size:.98rem;color:var(--txt-2);line-height:1.65;
}
.mp-close b{color:var(--txt)}

@media(max-width:820px){
  .mp-grid{grid-template-columns:1fr}
}

/* ══════ HUB DEL BLOG · recursos ══════════════════════════════════════════
   La rejilla .res ya existía con 6 tarjetas escritas a mano. Estas reglas son
   lo único que hizo falta añadir para que la llene el hub dinámico.

   La imagen sangra fuera del padding de 26 px de .res con márgenes negativos,
   en vez de reestructurar la tarjeta: así las tarjetas de respaldo —las que se
   ven si la API de WordPress no responde— siguen funcionando sin imagen.      */
.res-img{
  display:block; width:calc(100% + 52px); margin:-26px -26px 16px;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--elev);
}
.res-nota{font-size:.82rem;color:var(--txt-3);margin:0 0 20px;line-height:1.6}
.res-mas{display:flex;justify-content:center;margin-top:28px}
.res-vacio{color:var(--txt-3);font-size:.9rem;padding:26px 0;grid-column:1/-1}

/* ── Hub del blog · buscador, contador y paginación ─────────────────────────
   El buscador va ENCIMA de las pestañas porque filtra dentro de la categoría
   activa: primero se acota, luego se busca. Al revés se leería como si la
   búsqueda ignorara el filtro. */
.res-barra{margin:44px 0 14px}
.res-buscar{position:relative;display:flex;align-items:center;max-width:460px}
.res-buscar-i{width:100%;padding:12px 16px 12px 42px;border-radius:100px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  font-family:inherit;font-size:.9rem;transition:border-color .25s var(--ease)}
/* La lupa va como fondo y no como icono aparte: un <svg> más sería un nodo
   más que traducir y alinear, y aquí no aporta nada. */
.res-buscar::before{content:"";position:absolute;left:16px;width:15px;height:15px;
  pointer-events:none;opacity:.5;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat}
.res-buscar-i:focus{outline:none;border-color:var(--indigo)}
.res-buscar-i::-webkit-search-cancel-button{display:none}
.res-buscar-x{position:absolute;right:8px;padding:6px 12px;border:0;border-radius:100px;
  background:transparent;color:var(--txt-3);font-family:inherit;font-size:.8rem;
  font-weight:500;cursor:pointer}
.res-buscar-x:hover{color:var(--txt)}

/* Mientras cargan los 125, las pestañas se atenúan. Antes el clic se
   descartaba en silencio y el hub parecía roto durante dos segundos. */
.res-tabs.res-cargando{opacity:.55}

.res-pie{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px}
.res-cuenta{margin:0;font-size:.84rem;color:var(--txt-3)}
.res-pag{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.res-pag-b{min-width:38px;padding:8px 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--card);color:var(--txt-2);
  font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s}
.res-pag-b:hover:not(:disabled){border-color:var(--indigo);color:var(--txt)}
.res-pag-b:disabled{opacity:.4;cursor:default}
.res-pag-b.es-actual{background:var(--grad);border-color:transparent;color:#fff}
@media(max-width:560px){
  /* En móvil los números se comen la fila: se dejan solo Anterior y Siguiente
     y el contador, que ya dice en qué punto del archivo estás. */
  .res-pag-b:not(:first-child):not(:last-child):not(.es-actual){display:none}
}