/* =========================================================
   TOKENS — la marca Zgames es oscura en ambos modos
   ========================================================= */
:root{
  color-scheme: dark;
  --bg:#000000;
  --surface:#0a110c;
  --surface-2:#0f1912;
  --line:#1c2b20;
  --line-strong:#2b4232;
  --green:#42C148;
  --green-soft:rgba(66,193,72,.14);
  --green-ink:#041006;
  --text:#E5E5E5;
  --muted:#b3c0b5;      /* contraste ~9:1 sobre --bg */
  --faint:#7f8f83;
  --display:"Saira", "Arial Narrow", system-ui, sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1180px;
  --radius-lg:14px;
  --radius-sm:6px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }
:root[data-theme="dark"]{ color-scheme:dark; }

*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:rgba(3,5,4,.85); }
img{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

h1,h2,h3{ font-family:var(--display); margin:0; letter-spacing:-.01em; line-height:1.05; }
h2{ font-size:clamp(2rem, 4.2vw, 3.25rem); font-weight:700; max-width:18ch; }
h3{ font-size:1.25rem; font-weight:700; line-height:1.2; }
p{ margin:0; }
.lead{ color:var(--muted); font-size:1.125rem; max-width:60ch; }

section{ padding-block:clamp(72px, 10vw, 128px); }
.section-head{ display:grid; gap:20px; margin-bottom:clamp(40px,5vw,64px); }
.section-head.split{ grid-template-columns:1fr; }
@media (min-width:900px){ .section-head.split{ grid-template-columns:1.1fr .9fr; align-items:end; gap:48px; } }

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font:600 1rem/1 var(--body); text-decoration:none;
  padding:15px 22px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background:var(--green); color:var(--green-ink); }
.btn-primary:hover{ background:#52d158; }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--green); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:rgba(3,5,4,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; font:800 1.5rem/1 var(--display); letter-spacing:-.02em; }
.brand-mark{ width:30px; height:24px; }
.nav-links{ display:none; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem; }
.nav-links a:hover{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:12px; }
.lang{ font:600 .875rem/1 var(--body); color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; background:none; }
.nav .btn{ padding:12px 18px; font-size:.95rem; }
.menu-btn{ display:inline-flex; background:none; border:1px solid var(--line-strong); color:var(--text); border-radius:var(--radius-sm); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
.nav .btn-primary{ display:none; }
@media (min-width:1220px){
  .nav-links{ display:flex; } .menu-btn{ display:none; } .nav .btn-primary{ display:inline-flex; }
}
.mobile-menu{ display:none; border-top:1px solid var(--line); padding:12px 0 20px; }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:12px 0; text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:16px; width:100%; justify-content:center; }
@media (min-width:1220px){ .mobile-menu{ display:none !important; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding-block:clamp(56px,8vw,104px) clamp(64px,8vw,112px); }
.hero::before{ /* franjas diagonales de la marca */
  content:""; position:absolute; inset:-10% -20% auto auto; width:60%; height:80%;
  background:repeating-linear-gradient(115deg, transparent 0 46px, rgba(66,193,72,.07) 46px 92px);
  mask-image:radial-gradient(closest-side, #000 30%, transparent);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; gap:56px; align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } }
.hero h1{ font-size:clamp(2.75rem, 6.6vw, 5.25rem); font-weight:800; line-height:.98; }
.hero h1 .q{ display:block; color:var(--green); }
.hero .lead{ margin:28px 0 36px; font-size:clamp(1.0625rem,1.6vw,1.25rem); }
.origin{ display:inline-flex; align-items:center; gap:10px; margin-top:36px; color:var(--muted); font-size:.95rem; }
.origin .flag{ width:22px; height:14px; border-radius:2px; overflow:hidden; display:grid; grid-template-rows:2fr 1fr 1fr; }
.origin .flag i:nth-child(1){ background:#ffd100; } .origin .flag i:nth-child(2){ background:#034ea2; } .origin .flag i:nth-child(3){ background:#ed1c24; }

/* Hub: las seis soluciones conectadas al centro */
.hub{ position:relative; aspect-ratio:1/1; width:min(100%, 520px); margin-inline:auto; }
.hub svg.links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hub .ring{ fill:none; stroke:var(--line); stroke-width:1; }
.hub .link{ stroke:var(--line-strong); stroke-width:1.5; fill:none; stroke-dasharray:4 6; }
.hub .link.on{ stroke:var(--green); stroke-dasharray:none; }
.hub-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:31%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #15301a, var(--surface) 70%);
  border:1px solid var(--green); display:grid; place-items:center; text-align:center;
  box-shadow:0 0 0 10px rgba(66,193,72,.05), 0 0 60px rgba(66,193,72,.25);
}
.hub-core svg{ width:44%; }
.hub-core small{ display:block; margin-top:6px; font-size:.72rem; color:var(--muted); font-weight:600; }
.node{
  position:absolute; transform:translate(-50%,-50%);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  padding:10px 14px; min-width:118px; text-align:left;
  transition:border-color .4s, box-shadow .4s;
}
.node b{ display:block; font:700 1rem/1.1 var(--display); }
.node span{ display:block; font-size:.75rem; color:var(--muted); margin-top:3px; }
.node.on{ border-color:var(--green); box-shadow:0 0 24px rgba(66,193,72,.18); }
.node.on b{ color:var(--green); }
@media (max-width:520px){ .node{ min-width:0; padding:8px 10px; } .node span{ display:none; } .node b{ font-size:.9rem; } }

/* =========================================================
   BANDA DE MARCA
   ========================================================= */
.band{ background:var(--green); color:var(--green-ink); transform:skewY(-2deg); margin-block:-12px; position:relative; z-index:2; }
.band .wrap{ transform:skewY(2deg); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding-block:18px; font:800 clamp(1rem,2vw,1.35rem)/1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.band .wrap span{ display:inline-flex; align-items:center; gap:12px; }
.band .wrap span+span::before{ content:"+"; font-weight:800; }
@media (max-width:700px){ .band{ overflow:hidden; } .band .wrap{ flex-wrap:nowrap; justify-content:flex-start; white-space:nowrap; gap:20px; } }

/* =========================================================
   NECESIDAD
   ========================================================= */
.need-grid{ display:grid; gap:48px; }
@media (min-width:900px){ .need-grid{ grid-template-columns:1fr 1fr; gap:72px; align-items:start; } }
.pains{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.pains li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
  font:600 clamp(1.125rem,2vw,1.375rem)/1.3 var(--display);
}
.pains li svg{ width:22px; height:22px; color:#e8a83a; }
.need-close{ margin-top:32px; padding:24px; border-left:3px solid var(--green); background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.need-close p+p{ margin-top:10px; }
.need-close strong{ color:var(--text); }
.need-close p{ color:var(--muted); }

/* =========================================================
   ECOSISTEMA
   ========================================================= */
.eco{ background:linear-gradient(180deg, var(--bg), var(--surface) 30%, var(--surface) 70%, var(--bg)); }
.eco h2 .second{ display:block; color:var(--muted); }
.eco-groups{ display:grid; gap:40px; }
.eco-group > h3{ font:600 .95rem/1.2 var(--body); color:var(--faint); margin-bottom:16px; }
.cards{ display:grid; gap:16px; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; min-height:250px;
}
.card:hover{ border-color:var(--line-strong); }
.card .name{ display:flex; align-items:center; gap:10px; font:800 1.6rem/1 var(--display); }
.card .name svg{ width:26px; height:22px; flex:none; }
.card .title{ font:700 1.1rem/1.3 var(--display); color:var(--green); }
.card p{ color:var(--muted); font-size:1rem; }
.card .more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:600; text-decoration:none; font-size:.95rem; }
.card .more:hover{ color:var(--green); }
.card .more svg{ width:14px; height:14px; }
.tag-soon{ position:absolute; top:24px; right:24px; font-size:.75rem; font-weight:700; color:#e8a83a; border:1px solid rgba(232,168,58,.4); border-radius:999px; padding:4px 10px; }

/* =========================================================
   POR QUÉ ZGAMES
   ========================================================= */
.why-grid{ display:grid; gap:48px; }
@media (min-width:980px){ .why-grid{ grid-template-columns:.9fr 1.1fr; gap:80px; } }
.why-local{
  border:1px solid var(--green); border-radius:var(--radius-lg); padding:32px;
  background:radial-gradient(120% 90% at 0% 0%, rgba(66,193,72,.12), transparent 60%), var(--surface);
  align-self:start;
}
.why-local .big{ font:800 clamp(3rem,7vw,4.5rem)/.9 var(--display); color:var(--green); }
.why-local .big-sub{ font:700 1.35rem/1.2 var(--display); margin:10px 0 16px; }
.why-local p{ color:var(--muted); }
.reasons{ display:grid; gap:0; border-top:1px solid var(--line); }
.reason{ display:grid; grid-template-columns:48px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }
.reason .ico{ width:48px; height:48px; border-radius:12px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; }
.reason .ico svg{ width:24px; height:24px; }
.reason p{ color:var(--muted); margin-top:8px; }
.providers{ margin-top:56px; }
.providers p{ color:var(--faint); font-size:.95rem; margin-bottom:16px; }
.prov-list{ display:flex; flex-wrap:wrap; gap:10px; }
.prov-list span{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 18px; font:700 .95rem/1 var(--display); color:var(--muted); }

/* =========================================================
   CÓMO EMPEZAMOS (secuencia real → numeración)
   ========================================================= */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:s; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding:28px 24px 28px 0; border-top:2px solid var(--line); }
@media (max-width:899px){ .step{ padding-left:0; } }
.step::before{
  counter-increment:s; content:"0" counter(s);
  display:block; font:800 2.75rem/1 var(--display); color:var(--line-strong); margin-bottom:20px;
}
.step:first-child{ border-top-color:var(--green); }
.step:first-child::before{ color:var(--green); }
.step p{ color:var(--muted); margin-top:10px; }

/* =========================================================
   DEMO
   ========================================================= */
.demo-box{
  display:grid; gap:40px; padding:clamp(28px,5vw,56px);
  border-radius:20px; border:1px solid var(--line-strong);
  background:
    repeating-linear-gradient(115deg, transparent 0 40px, rgba(66,193,72,.05) 40px 80px),
    var(--surface);
}
@media (min-width:980px){ .demo-box{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; } }
.demo-box .lead{ margin-top:20px; }
.form{ display:grid; gap:14px; }
.form-row{ display:grid; gap:14px; }
@media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:.875rem; font-weight:600; margin-bottom:6px; }
.field input, .field select{
  width:100%; font:500 1rem/1.3 var(--body); color:var(--text);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 14px;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{ cursor:pointer; position:relative; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips span{ display:inline-block; padding:9px 14px; border:1px solid var(--line-strong); border-radius:999px; font-size:.9rem; font-weight:600; color:var(--muted); }
.chips input:checked + span{ background:var(--green-soft); border-color:var(--green); color:var(--text); }
.chips input:focus-visible + span{ outline:2px solid var(--green); outline-offset:2px; }
.form .btn{ justify-content:center; margin-top:6px; }
.form-note{ font-size:.85rem; color:var(--faint); }
.form-ok{ display:none; padding:16px; border:1px solid var(--green); border-radius:var(--radius-sm); background:var(--green-soft); }
.form-ok.show{ display:block; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid{ display:grid; gap:40px; }
@media (min-width:980px){ .faq-grid{ grid-template-columns:.8fr 1.2fr; gap:80px; } }
.faq-grid .lead{ margin-top:20px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0; font:600 1.15rem/1.35 var(--display);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:28px; height:28px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; transition:transform .2s; }
.faq summary .pm svg{ width:12px; height:12px; }
.faq details[open] summary{ color:var(--green); }
.faq details[open] summary .pm{ transform:rotate(45deg); border-color:var(--green); }
.faq .answer{ padding:0 48px 24px 0; color:var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ border-top:1px solid var(--line); padding:56px 0 40px; }
.foot{ display:grid; gap:40px; }
@media (min-width:800px){ .foot{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot p{ color:var(--muted); margin-top:14px; max-width:34ch; }
.foot h4{ margin:0 0 14px; font:600 .95rem/1 var(--body); color:var(--faint); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ text-decoration:none; color:var(--muted); }
.foot a:hover{ color:var(--text); }
.legal{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--faint); font-size:.875rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}


/* =========================================================
   BARRA PRINCIPAL (estructura original)
   ========================================================= */
.nav-links{ align-items:center; }
.nav-links > li{ position:relative; }
.nav-links a, .nav-links .dd-btn{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:8px 0; color:var(--text); font:600 .95rem/1 var(--body);
  background:none; border:0; cursor:pointer; text-decoration:none;
}
.nav-links a:hover, .nav-links .dd-btn:hover{ color:var(--green); }
.nav-links a.active{ color:var(--green); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--green); }
.dd-btn svg{ width:12px; height:12px; transition:transform .2s; }
.dd[aria-expanded="true"] svg, .has-dd:hover .dd-btn svg{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 14px); left:-12px; min-width:250px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s;
}
.dropdown::before{ content:""; position:absolute; inset:-16px 0 auto; height:16px; }
.has-dd:hover .dropdown, .has-dd:focus-within .dropdown, .has-dd.open .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ white-space:nowrap; gap:16px; display:flex !important; justify-content:space-between; width:100%; padding:12px 12px !important; border-radius:6px; }
.dropdown a:hover{ background:var(--green-soft); color:var(--text) !important; }
.dropdown a::after{ display:none; }
.dropdown a svg{ width:12px; height:12px; color:var(--muted); }
.lang{ display:inline-flex; align-items:center; gap:8px; color:var(--text); cursor:pointer; }
.lang svg{ width:14px; height:14px; }
.nav .btn-primary{ gap:28px; }
.mobile-menu .sub{ padding-left:16px; color:var(--muted); font-weight:500; }

/* =========================================================
   HERO con imagen original
   ========================================================= */
.hero::before{ display:none; }
.hero-grid{ gap:24px; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:.95fr 1.05fr; } }
.hero-art{ position:relative; isolation:isolate; }
.hero-art::before{ /* franjas en zigzag de la marca, detrás del jugador */
  content:""; position:absolute; z-index:-1; right:2%; top:-4%; width:88%; height:66%;
  background:repeating-linear-gradient(110deg, transparent 0 38px, var(--green) 38px 74px);
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
  mask-image:linear-gradient(180deg,#000 55%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.hero-art img{ display:block; width:100%; height:auto; }
.hero-art::after{ /* funde el borde del césped con el fondo */
  content:""; position:absolute; inset:auto 0 0; height:22%;
  background:linear-gradient(180deg,transparent,var(--bg));
}
.hero h1{ font-size:clamp(2.6rem, 5.6vw, 4.6rem); }

/* =========================================================
   NECESIDAD: pantallas separadas
   ========================================================= */
.screens{ position:relative; margin-top:56px; height:clamp(220px, 34vw, 420px); }
.screens img{
  position:absolute; width:min(56%, 520px); height:auto; border-radius:12px;
  border:1px solid var(--line-strong); box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.screens img:nth-child(1){ left:0; top:12%; transform:rotate(-4deg); }
.screens img:nth-child(2){ left:50%; top:0; transform:translateX(-50%); z-index:2; }
.screens img:nth-child(3){ right:0; top:16%; transform:rotate(4deg); }
.screens figcaption{ position:absolute; left:0; right:0; bottom:-8px; text-align:center; color:var(--faint); font-size:.9rem; z-index:3; }

/* =========================================================
   ECOSISTEMA: vitrina de producto
   ========================================================= */
.showcase{ display:grid; gap:20px; margin-bottom:48px; }
@media (min-width:900px){ .showcase{ grid-template-columns:1fr 1fr; align-items:center; } }
.showcase figure{ margin:0; }
.showcase .light{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-strong); }
.showcase img{ display:block; width:100%; height:auto; }
.showcase figcaption{ margin-top:12px; color:var(--faint); font-size:.9rem; }

.player-side{ margin-top:72px; }
.player-side > h3{ font:700 clamp(1.5rem,3vw,2rem)/1.15 var(--display); max-width:24ch; margin-bottom:12px; }
.player-side > p{ color:var(--muted); max-width:60ch; margin-bottom:28px; }
.player-cards{ display:grid; gap:16px; }
@media (min-width:800px){ .player-cards{ grid-template-columns:1fr 1fr; } }
.pcard{ background:#000 !important; display:grid; grid-template-columns:42% 1fr; align-items:center; gap:20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.pcard .art{ height:100%; min-height:220px; background:#000; display:grid; place-items:center; overflow:hidden; }
.pcard .art img{ width:100%; height:100%; object-fit:cover; }
.pcard .art.contain img{ object-fit:contain; padding:12px; }
.pcard .body{ padding:24px 24px 24px 0; }
.pcard .title{ font:700 1.2rem/1.2 var(--display); margin-bottom:8px; }
.pcard p{ color:var(--muted); font-size:.98rem; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pills span{ font-size:.78rem; font-weight:700; border:1px solid var(--line-strong); border-radius:4px; padding:5px 8px; color:var(--text); }
@media (max-width:520px){ .pcard{ grid-template-columns:1fr; } .pcard .body{ padding:0 22px 24px; } .pcard .art{ min-height:200px; } }

/* =========================================================
   POR QUÉ: 100% con el jugador
   ========================================================= */
.why-local{ position:relative; overflow:hidden; padding-bottom:0; display:flex; flex-direction:column; }
.why-local img{ display:block; width:86%; height:auto; margin:24px -6% 0 auto; filter:drop-shadow(0 0 30px rgba(66,193,72,.25)); }

/* =========================================================
   CÓMO EMPEZAMOS con imagen de cubos
   ========================================================= */
.steps-head{ display:grid; gap:32px; margin-bottom:56px; align-items:end; }
@media (min-width:900px){ .steps-head{ grid-template-columns:1fr 260px; } }
.steps-head img{ display:none; width:100%; height:200px; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--line-strong); }
@media (min-width:900px){ .steps-head img{ display:block; } }

/* =========================================================
   DEMO con jugador de baloncesto
   ========================================================= */
.demo-box{ position:relative; overflow:hidden; }
.demo-copy{ position:relative; }
.demo-copy img{ display:block; width:min(70%, 320px); height:auto; margin-top:24px; filter:drop-shadow(0 0 40px rgba(66,193,72,.25)); }
@media (min-width:980px){ .demo-copy img{ width:min(80%, 360px); } }

/* =========================================================
   CONTENIDO ORIGINAL — estilos de secciones
   ========================================================= */
.tint{ background:var(--surface); }
.tag{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font:600 .95rem/1 var(--body); color:var(--muted); }
.tag b{ display:inline-grid; place-items:center; min-width:30px; height:22px; padding:0 6px; border-radius:4px; background:var(--green); color:var(--green-ink); font:800 .8rem/1 var(--display); }
.h-wide{ max-width:26ch; margin-bottom:clamp(36px,5vw,56px); }

.hero-claim{ text-transform:uppercase; letter-spacing:.005em; }
.hero-claim .q{ display:inline-block; position:relative; padding:0 .12em; text-shadow:0 0 28px rgba(66,193,72,.45); }
.hero-claim .q::before, .hero-claim .q::after{ content:""; position:absolute; width:.32em; height:.32em; border:3px solid var(--green); }
.hero-claim .q::before{ left:-.08em; top:.02em; border-right:0; border-bottom:0; }
.hero-claim .q::after{ right:-.1em; bottom:.04em; border-left:0; border-top:0; }

/* 01 Nace una pasión */
.pasion{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .pasion{ grid-template-columns:1.25fr .75fr; } }
.manifesto{ font-size:clamp(1.9rem,4vw,3.25rem); font-weight:700; line-height:1.12; max-width:22ch; }
.manifesto em{ font-style:normal; color:var(--green); }
.wbtw{ display:flex; align-items:center; gap:22px; margin-top:40px; font:700 .95rem/1 var(--display); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.slashes{ width:150px; height:34px; background:repeating-linear-gradient(115deg, var(--green) 0 10px, transparent 10px 20px); clip-path:polygon(14% 0,100% 0,86% 100%,0 100%); }
.pasion-img{ width:100%; max-width:440px; height:auto; justify-self:center; filter:drop-shadow(0 0 30px rgba(66,193,72,.25)); }

/* 02 Soluciones */
.sol-grid{ display:grid; gap:20px; }
@media (min-width:860px){ .sol-grid{ grid-template-columns:1fr 1fr; } }
.sol{ position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); overflow:hidden; }
.sol::before, .sol::after{ content:""; position:absolute; width:18px; height:18px; border:2px solid var(--green); z-index:2; }
.sol::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.sol::after{ bottom:12px; right:12px; border-left:0; border-top:0; }
.sol-art{ height:260px; display:grid; place-items:center; overflow:hidden; }
.sol-art img{ height:250px; width:auto; max-width:100%; object-fit:contain; }
.sol-art.stripes{ background:repeating-linear-gradient(115deg, transparent 0 26px, rgba(66,193,72,.85) 26px 44px); }
.sol-art.grid-bg{ background:radial-gradient(circle at 50% 50%, rgba(66,193,72,.18), transparent 60%), linear-gradient(var(--line) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/28px 28px; }
.sol-art.grid-bg img{ height:220px; }
.sol-body{ padding:26px 28px 32px; }
.sol-n{ font:700 .85rem/1 var(--display); color:var(--green); letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.sol-body h3{ font-size:1.6rem; text-transform:uppercase; margin-bottom:10px; }
.sol-body > p:not(.sol-n){ color:var(--muted); }

/* 03 Ecosistema */
.eco-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:700px){ .eco-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .eco-list{ grid-template-columns:repeat(3,1fr); } }
.eco-list > li{ position:relative; background:var(--bg); padding:32px 28px; }
.eco-list .n{ position:absolute; top:22px; right:24px; font:700 .8rem/1 var(--display); color:var(--faint); }
.eco-list h3{ font-size:1.65rem; margin-bottom:8px; }
.eco-list p{ color:var(--muted); }
.eco-list ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.eco-list ul li{ display:flex; gap:10px; align-items:baseline; font-size:.95rem; }
.eco-list ul li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); transform:translateY(-2px); flex:none; }

/* 04 Tecnología conectada */
.promo{ display:grid; gap:32px; align-items:center; padding:clamp(28px,5vw,56px); border-radius:var(--radius-lg); background:#e6e9e7; color:#0b120d; overflow:hidden; }
@media (min-width:900px){ .promo{ grid-template-columns:.85fr 1.15fr; } }
.promo h2{ font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:800; margin-bottom:28px; color:#0b120d; }
.promo h2 .g{ display:block; color:#24a32d; }
.promo img{ width:100%; height:auto; }
.stats{ display:grid; gap:28px; margin-top:36px; align-items:center; }
@media (min-width:900px){ .stats{ grid-template-columns:.8fr 1.2fr; } }
.stats-title{ font:700 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--display); }
.stats-title mark{ background:var(--green); color:var(--green-ink); padding:0 .15em; }
.stats dl{ margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px 0; }
@media (min-width:640px){ .stats dl{ grid-template-columns:repeat(4,1fr); } }
.stats dl > div{ text-align:center; padding:0 12px; border-left:1px solid var(--line-strong); }
.stats dl > div:first-child{ border-left:0; }
@media (max-width:639px){ .stats dl > div:nth-child(3){ border-left:0; } }
.stats dt{ font:800 clamp(1.8rem,3vw,2.3rem)/1 var(--display); font-variant-numeric:tabular-nums; }
.stats dd{ margin:8px 0 0; color:var(--muted); font-size:.9rem; line-height:1.35; }

/* 05 Control */
.control{ display:grid; gap:40px; }
@media (min-width:980px){ .control{ grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; } }
.control-side img{ display:block; width:min(80%,380px); height:auto; margin-top:32px; filter:drop-shadow(0 0 40px rgba(66,193,72,.25)); }
.ctrl-grid{ display:grid; gap:14px; }
@media (min-width:620px){ .ctrl-grid{ grid-template-columns:1fr 1fr; } }
.ctrl{ padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:radial-gradient(120% 100% at 100% 100%, rgba(66,193,72,.12), transparent 55%), var(--bg); }
.ctrl .ci{ width:40px; height:40px; border:1px solid var(--line-strong); border-radius:8px; display:grid; place-items:center; color:var(--green); margin-bottom:16px; }
.ctrl .ci svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ctrl h3{ font-size:1.15rem; margin-bottom:6px; }
.ctrl p{ color:var(--muted); font-size:.98rem; }
.ctrl .links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ctrl .links a{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(66,193,72,.45); border-radius:5px; color:var(--green); font-weight:700; font-size:.88rem; text-decoration:none; }
.ctrl .links a:hover{ background:var(--green-soft); }
.ctrl .links svg{ width:12px; height:12px; }

/* 06 Preguntas (lista + panel) */
.qa{ display:grid; gap:32px; }
@media (min-width:900px){ .qa{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; } }
.qa-list{ border-top:1px solid var(--line); }
.qa-list button{ display:flex; gap:14px; width:100%; text-align:left; padding:18px 14px; background:none; border:1px solid transparent; border-bottom-color:var(--line); color:var(--muted); font:600 1.05rem/1.35 var(--body); cursor:pointer; }
.qa-list button:hover{ color:var(--text); }
.qa-list button .n{ font:700 .8rem/1.8 var(--display); color:var(--faint); flex:none; }
.qa-list button[aria-selected="true"]{ color:var(--text); border-color:var(--line-strong); background:var(--bg); border-radius:6px; }
.qa-list button[aria-selected="true"] .n{ color:var(--green); }
.qa-panel{ display:none; padding:36px 0 36px 40px; border-left:1px solid var(--line-strong); position:sticky; top:110px; }
.qa-n{ font:800 4rem/1 var(--display); color:var(--green); margin-bottom:14px; }
.qa-panel h3{ font-size:1.6rem; margin-bottom:14px; max-width:22ch; }
.qa-panel p{ color:var(--muted); max-width:46ch; }
.qa-inline{ display:none; margin:0; padding:4px 14px 18px 46px; color:var(--muted); border-bottom:1px solid var(--line); }
.qa-list button[aria-selected="true"] + .qa-inline{ display:block; }
@media (min-width:900px){ .qa-panel{ display:block; } .qa-list button[aria-selected="true"] + .qa-inline{ display:none; } }

/* 07 Para operadores */
.cta-final{ display:grid; gap:28px; }
@media (min-width:900px){ .cta-final{ grid-template-columns:1.1fr .9fr; align-items:end; } }
.cta-final h2{ font-size:clamp(2.2rem,4.6vw,3.6rem); }
.cta-final .lead{ margin-bottom:24px; }
.prov-band{ background:var(--green); color:var(--green-ink); overflow:hidden; padding:18px 0; }
.prov-track{ display:flex; gap:64px; width:max-content; animation:slide 30s linear infinite; font:800 1.25rem/1 var(--display); text-transform:uppercase; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.foot4{ grid-template-columns:1fr; }
@media (min-width:860px){ .foot4{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; } }
.foot-cta{ color:var(--green) !important; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.foot-cta svg{ width:12px; height:12px; }

/* =========================================================
   PÁGINAS DE PRODUCTO
   ========================================================= */
.view[hidden]{ display:none !important; }
.p-hero{ position:relative; overflow:hidden; padding-block:clamp(56px,7vw,96px); background:radial-gradient(60% 80% at 75% 40%, rgba(66,193,72,.14), transparent 70%); }
.p-hero-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width:980px){ .p-hero-grid{ grid-template-columns:.95fr 1.05fr; } }
.p-hero .lead{ margin:16px 0 32px; }
.p-sub{ font:600 1.25rem/1.3 var(--display); margin-top:20px; }
.wordmark{ display:flex; align-items:center; gap:.08em; font:800 clamp(3rem,7vw,5rem)/1 var(--display); letter-spacing:-.02em; }
.wordmark svg{ width:1.15em; height:.95em; }
.p-h1{ font-size:clamp(2.6rem,5.4vw,4.4rem); font-weight:800; line-height:1.02; }
.p-h1 mark, .h-xl mark{ background:var(--green); color:var(--green-ink); padding:0 .1em; }
.p-h1.caps{ text-transform:uppercase; }
.p-hero-img{ width:100%; height:auto; }
.h-green{ color:var(--green); }
.h-xl{ font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:22ch; margin-bottom:16px; }
.p-lead{ margin-bottom:40px; }
.mini{ font:700 .78rem/1.3 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.glow{ background:radial-gradient(70% 60% at 20% 0%, rgba(66,193,72,.1), transparent 70%), var(--surface); }

/* Ventanas apiladas (hero Backoffice) */
.stack{ position:relative; padding:24px 34px 0 0; max-width:100%; }
@media (max-width:600px){ .win.back1{ transform:translate(10px,-8px); } .win.back2{ transform:translate(20px,-16px); } }
.win{ border-radius:10px; border:1px solid var(--line-strong); background:#f3f6f4; }
.win.back1, .win.back2{ position:absolute; inset:0 0 auto auto; width:calc(100% - 34px); height:calc(100% - 24px); }
.win.back1{ transform:translate(16px,-12px); opacity:.6; }
.win.back2{ transform:translate(32px,-24px); opacity:.3; }
.win.front{ position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.win-bar{ display:flex; justify-content:space-between; padding:10px 14px; background:#0d1510; font:700 .72rem/1 var(--display); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.win-bar b{ color:var(--green); }
.win img{ display:block; width:100%; height:auto; }

/* Tarjetas con captura */
.shots{ display:grid; gap:18px; }
@media (min-width:860px){ .shots{ grid-template-columns:repeat(3,1fr); } }
.shot{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-2); display:flex; flex-direction:column; }
.shot > img{ display:block; width:100%; height:auto; border-bottom:1px solid var(--line); }
.shot-b{ padding:24px; }
.shot-b h3{ font-size:1.2rem; margin-bottom:8px; }
.shot-b .mini{ margin-bottom:10px; }
.shot-b p:not(.mini){ color:var(--muted); font-size:.98rem; }
.ui{ height:200px; display:grid; place-items:center; padding:20px; border-bottom:1px solid var(--line);
  background:radial-gradient(60% 60% at 50% 100%, rgba(66,193,72,.16), transparent 70%), linear-gradient(var(--line) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/26px 26px, var(--bg); }
.ui-win{ width:100%; max-width:280px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); padding:12px; }
.ui-t{ display:flex; justify-content:space-between; font:700 .66rem/1 var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--text); margin-bottom:12px; }
.ui-t span+span{ color:var(--faint); }
.ui-bars{ display:flex; align-items:flex-end; gap:8px; height:70px; border-bottom:1px solid var(--line); }
.ui-bars i{ flex:1; background:linear-gradient(var(--green), #1e6b22); border-radius:2px 2px 0 0; }
.ui-leg{ display:flex; gap:14px; margin-top:8px; font-size:.66rem; color:var(--muted); }
.ui-leg span::before{ content:"●"; color:var(--green); margin-right:4px; }
.ui-leg span+span::before{ color:var(--faint); }
.ui-rows p{ display:flex; justify-content:space-between; border:1px solid var(--line-strong); border-radius:3px; padding:7px 9px; margin-top:6px; font-size:.68rem; }
.ui-rows span{ color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.ui-rows b{ text-transform:uppercase; font-size:.66rem; }
.ui-f{ margin-top:10px; font:700 .62rem/1 var(--display); color:var(--green); text-transform:uppercase; letter-spacing:.06em; }
.ui-f.c{ text-align:center; }
.ui-chain{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; }
.ui-chain span{ border:1px solid var(--line-strong); background:var(--surface); padding:8px 8px; font:700 .62rem/1 var(--display); text-transform:uppercase; border-radius:3px; }
.ui-chain i{ width:10px; height:1px; background:var(--faint); }

/* Encabezado con imagen */
.tl-head{ display:grid; gap:24px; align-items:center; margin-bottom:56px; }
@media (min-width:800px){ .tl-head{ grid-template-columns:200px 1fr; gap:36px; } .tl-head.right{ grid-template-columns:1fr 320px; } }
.tl-head img{ width:100%; height:220px; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--line-strong); }
.tl-head img.banner{ height:90px; }
.tl-head h2{ max-width:20ch; }

.chips-s{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chips-s span{ font:700 .7rem/1 var(--display); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); }

/* Línea de tiempo horizontal (alterna arriba/abajo en escritorio) */
.htl{ list-style:none; margin:0; padding:0; counter-reset:h; display:grid; gap:0; position:relative; }
.htl > li{ position:relative; counter-increment:h; padding:0 0 32px 52px; }
.htl > li::before{ content:"0" counter(h); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:700 .8rem/1 var(--display); background:var(--green); color:var(--green-ink); box-shadow:0 0 18px rgba(66,193,72,.45); }
.htl > li::after{ content:""; position:absolute; left:17px; top:40px; bottom:4px; width:2px; background:rgba(66,193,72,.4); }
.htl > li:last-child::after{ display:none; }
.htl h3{ font-size:1.25rem; margin:8px 0 8px; }
.htl p:not(.mini){ color:var(--muted); }
@media (min-width:980px){
  .htl{ grid-template-columns:repeat(4,1fr); grid-template-rows:auto 60px auto; column-gap:28px; }
  .htl::before{ content:""; grid-row:2; grid-column:1/-1; align-self:center; height:2px; background:linear-gradient(90deg, var(--green), rgba(66,193,72,.25)); }
  .htl > li{ padding:0; grid-row:1; align-self:end; }
  .htl > li:nth-child(even){ grid-row:3; align-self:start; }
  .htl > li::after{ display:none; }
  .htl > li::before{ left:0; top:auto; bottom:-48px; }
  .htl > li:nth-child(even)::before{ top:-48px; bottom:auto; }
  .htl > li:nth-child(odd){ padding-bottom:0; }
  .htl > li:nth-child(1){ grid-column:1; } .htl > li:nth-child(2){ grid-column:2; } .htl > li:nth-child(3){ grid-column:3; } .htl > li:nth-child(4){ grid-column:4; }
}

/* Línea de tiempo vertical */
.vtl{ list-style:none; margin:0; padding:0; counter-reset:v; position:relative; }
.vtl::before{ content:""; position:absolute; left:17px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--green), rgba(66,193,72,.25)); }
.vtl > li{ position:relative; counter-increment:v; padding:0 0 40px 60px; }
.vtl > li::before{ content:"0" counter(v); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:700 .8rem/1 var(--display); background:var(--green); color:var(--green-ink); box-shadow:0 0 18px rgba(66,193,72,.45); }
.vtl h3{ font-size:1.3rem; margin:8px 0; max-width:30ch; }
.vtl p:not(.mini){ color:var(--muted); max-width:52ch; }
@media (min-width:900px){
  .vtl.alt::before{ left:50%; transform:translateX(-1px); }
  .vtl.alt > li{ width:50%; padding:0 0 48px 48px; margin-left:50%; }
  .vtl.alt > li::before{ left:-18px; }
  .vtl.alt > li:nth-child(odd){ margin-left:0; padding:0 48px 48px 0; text-align:right; }
  .vtl.alt > li:nth-child(odd)::before{ left:auto; right:-18px; }
  .vtl.alt > li:nth-child(odd) h3, .vtl.alt > li:nth-child(odd) p{ margin-left:auto; }
  .vtl.alt > li:nth-child(odd) .chips-s{ justify-content:flex-end; }
}
.split-tl{ display:grid; gap:40px; }
@media (min-width:900px){ .split-tl{ grid-template-columns:.8fr 1.2fr; align-items:center; } }

/* Paneles con tablas */
.duo{ display:grid; gap:18px; margin-top:40px; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; } }
.panel{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2); padding:28px; min-width:0; }
.panel > h3{ font-size:1.3rem; margin-bottom:8px; }
.panel > p{ color:var(--muted); font-size:.96rem; margin-bottom:20px; max-width:46ch; }
.tbl{ border:1px solid var(--line-strong); border-radius:6px; background:var(--bg); }
.tbl-h{ display:flex; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line-strong); font:700 .7rem/1 var(--display); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.tbl .row{ display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.tbl .row:last-child{ border-bottom:0; }
.tbl .row b{ font-size:.95rem; }
.tbl .row .box, .tbl td .box{ margin-left:auto; }
.tbl .row .box{ white-space:normal; text-align:right; }
.box{ font-style:normal; font-size:.85rem; border:1px solid var(--line-strong); border-radius:4px; padding:6px 10px; color:var(--muted); white-space:nowrap; }
.av{ flex:none; width:30px; height:30px; display:inline-grid; place-items:center; border:1px solid var(--line-strong); border-radius:4px; font:700 .68rem/1 var(--display); }
.av.g{ color:var(--green); }
.scroll-x{ overflow-x:auto; }
.tbl table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:440px; }
.tbl th{ text-align:left; padding:10px 14px; font:700 .66rem/1 var(--display); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); border-bottom:1px solid var(--line); }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-items:center; }
.tbl td:first-child .av{ grid-row:span 2; }
.tbl td small{ color:var(--muted); font-size:.78rem; }
.row.st{ justify-content:space-between; }
.row.st small{ display:block; color:var(--muted); font-size:.85rem; margin-top:2px; }
.status{ font:700 .85rem/1 var(--display); font-style:normal; color:var(--green); text-transform:uppercase; letter-spacing:.04em; }
.flow{ display:flex; align-items:flex-start; justify-content:space-around; gap:8px; padding:28px 14px 20px; }
.flow > span{ width:24px; height:1px; background:var(--green); margin-top:15px; }
.flow > div{ display:grid; justify-items:center; gap:8px; text-align:center; }
.flow i{ font:700 .72rem/1 var(--display); font-style:normal; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--green); border-radius:50%; color:var(--green); }
.flow i.on{ background:var(--green); color:var(--green-ink); }
.flow i.off{ border-color:var(--line-strong); color:var(--faint); }
.flow b{ font:700 .82rem/1 var(--display); text-transform:uppercase; letter-spacing:.06em; }
.flow small{ color:var(--muted); font-size:.8rem; }
.tbl-f{ margin:0 14px; padding:14px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }

/* Bento */
.bento{ display:grid; gap:14px; }
@media (min-width:700px){ .bento{ grid-template-columns:repeat(6,1fr); } .bento .b{ grid-column:span 2; } .bento .b.wide{ grid-column:span 3; } }
.b{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2); padding:28px 24px; text-align:center; }
.b h3{ font-size:1.2rem; margin:18px 0 8px; }
.b p{ color:var(--muted); font-size:.95rem; }
.b.wide{ display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; }
.b.wide h3{ margin-top:0; }
.viz{ min-height:130px; display:grid; place-items:center; }
.oval{ display:grid; place-items:center; width:150px; height:72px; border:3px solid var(--line-strong); border-radius:50%; transform:rotate(-6deg); font:800 1.9rem/1 var(--display); }
.finger{ position:relative; width:90px; height:90px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--muted); }
.finger svg{ width:56px; height:56px; }
.finger i{ position:absolute; right:4px; bottom:6px; width:20px; height:20px; border-radius:50%; background:var(--green); }
.finger i::after{ content:""; position:absolute; left:6px; top:4px; width:5px; height:9px; border:solid var(--green-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.hist{ width:100%; max-width:240px; text-align:left; }
.hist-t{ font:700 .66rem/1 var(--display); white-space:nowrap; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:center; margin-bottom:8px; }
.hist-t b{ color:var(--green); font-size:inherit; }
.hist div{ display:grid; grid-template-columns:1fr auto; padding:5px 0; border-top:1px solid var(--line); font-size:.78rem; }
.hist div b{ font-family:var(--display); }
.hist .up{ color:var(--green); }
.hist small{ grid-column:1/-1; font-size:.62rem; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.nodes{ width:120px; flex:none; color:var(--muted); }
.check{ position:relative; flex:none; width:84px; height:84px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--green); }
.check svg{ width:38px; height:38px; }
.check.pts sup{ position:absolute; right:-18px; top:-4px; font:700 .7rem/1 var(--display); color:var(--muted); }
.check.pts small{ position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); white-space:nowrap; font:700 .55rem/1 var(--display); text-transform:uppercase; color:var(--faint); }

/* CTA de cierre de producto */
.p-cta{ background:radial-gradient(50% 120% at 80% 100%, rgba(66,193,72,.12), transparent 70%), var(--bg); border-top:1px solid var(--line); }
.p-cta-in{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.p-cta h2{ max-width:24ch; font-size:clamp(1.9rem,3.8vw,3rem); }

/* Teléfono ZInsight */
.phone-scene{ position:relative; width:min(100%,460px); margin-inline:auto; padding:20px 0; }
.phone{ position:relative; z-index:2; width:250px; margin-inline:auto; border:6px solid #2a332d; border-radius:34px; background:#060a07; padding:14px 14px 18px; box-shadow:0 0 0 1px #4a554d, 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(66,193,72,.15); font-size:.62rem; }
.ph-top{ display:flex; justify-content:space-between; font-weight:700; color:var(--text); margin-bottom:10px; }
.ph-brand{ display:flex; align-items:center; gap:2px; font:800 1rem/1 var(--display); margin-bottom:10px; }
.ph-brand svg{ width:20px; height:16px; }
.ph-av{ margin-left:auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--green); display:grid; place-items:center; font-size:.6rem; color:var(--green); }
.ph-row{ display:flex; justify-content:space-between; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 6px; font-weight:700; font-size:.55rem; }
.ph-row .g{ color:var(--green); }
.ph-card{ border:1px solid var(--line-strong); border-radius:8px; padding:8px; background:var(--surface); display:grid; gap:2px; }
.ph-card span{ color:var(--muted); }
.ph-card b{ font:800 1rem/1.1 var(--display); }
.ph-card em{ font-style:normal; color:var(--green); font-size:.55rem; }
.ph-card.big{ grid-template-columns:1fr auto; margin-bottom:6px; } .ph-card.big b{ font-size:1.35rem; grid-column:1; } .ph-card.big em{ grid-row:1/3; grid-column:2; align-self:center; }
.ph-2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
.ph-card.chart svg{ width:100%; height:56px; display:block; margin-top:4px; }
.ph-card.chart small{ float:right; color:var(--faint); }
.ph-days{ display:flex; justify-content:space-between; color:var(--faint); font-size:.5rem; }
.ph-item{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-top:1px solid var(--line); }
.ph-item small{ display:block; color:var(--faint); font-size:.5rem; }
.ph-item b{ color:var(--green); }
.ring{ position:absolute; z-index:3; left:4%; top:10%; width:96px; height:96px; border-radius:50%; background:var(--surface); box-shadow:0 0 30px rgba(66,193,72,.3); display:grid; place-items:center; }
.ring svg{ position:absolute; inset:6px; }
.ring b{ font:800 1.2rem/1 var(--display); } .ring small{ font-size:.6rem; }
.float{ position:absolute; z-index:3; border:1px solid var(--line-strong); border-radius:10px; background:rgba(10,17,12,.92); padding:12px; }
.float.zc{ right:0; top:6%; width:130px; }
.float.zc p{ display:flex; align-items:center; gap:2px; font:800 .85rem/1 var(--display); } .float.zc p svg{ width:16px; height:13px; }
.float.zc b{ display:block; font:800 1.5rem/1.2 var(--display); }
.float.zc i{ display:block; height:4px; border-radius:2px; background:var(--line-strong); } .float.zc s{ display:block; width:68%; height:100%; background:var(--green); border-radius:2px; }
.float.bars{ left:0; bottom:22%; width:100px; height:56px; display:flex; align-items:flex-end; gap:5px; }
.float.bars i{ flex:1; background:linear-gradient(var(--green), #1e6b22); border-radius:2px; }
@media (max-width:480px){ .ring{ left:0; width:76px; height:76px; } .float.zc{ width:108px; } .float.bars{ display:none; } }

/* Enlace "Ver producto" en el ecosistema de la home */
.eco-list .go{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:.9rem; color:var(--green); text-decoration:none; }
.eco-list .go svg{ width:12px; height:12px; }
.eco-list .go:hover{ text-decoration:underline; }
.dropdown a.current{ color:var(--green) !important; background:var(--green-soft); }
.nav-links .dd-btn.active{ color:var(--green); }

/* Selector de idioma */
.lang-wrap{ position:relative; }
.lang-menu{ position:absolute; right:0; top:calc(100% + 10px); min-width:170px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:6px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; }
.lang-wrap.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:6px; background:none; color:var(--text); font:600 .95rem/1 var(--body); cursor:pointer; text-align:left; }
.lang-menu button b{ font:700 .75rem/1 var(--display); color:var(--muted); width:22px; }
.lang-menu button:hover{ background:var(--green-soft); }
.lang-menu button[aria-checked="true"]{ color:var(--green); }
.lang-menu button[aria-checked="true"] b{ color:var(--green); }
.lang-wrap.open .lang svg:last-child{ transform:rotate(180deg); }
.lang svg:last-child{ transition:transform .2s; }

.hero h1.hero-claim{ font-size:clamp(2rem, 4vw, 3.6rem); }
.hero h1.hero-claim .q{ display:inline-block; }

/* Soluciones: contenido + tecnología */
.plus-grid{ align-items:stretch; }
@media (min-width:860px){ .plus-grid{ grid-template-columns:1fr auto 1fr; gap:0; } }
.plus{ display:grid; place-items:center; margin:-10px auto; width:56px; height:56px; border-radius:50%; background:var(--green); color:var(--green-ink); font:800 2rem/1 var(--display); box-shadow:0 0 0 8px var(--surface), 0 0 30px rgba(66,193,72,.45); position:relative; z-index:3; }
@media (min-width:860px){ .plus{ margin:0 -18px; align-self:center; } }
.sol-art.two{ display:flex; align-items:center; justify-content:center; gap:4%; }
.sol-art.two img{ height:230px; }
.sol-art.two img + img{ height:190px; }
.sol-art.grid-bg img[alt*="Plataformas"]{ height:210px; }
.h-wide + .p-lead{ margin-top:-28px; }

/* Logotipo oficial (manual de identidad) */
.brand{ color:var(--text); line-height:0; }
.reference-site .brand-logo{ height:40px; width:auto; display:block; }
.foot-logo{ height:52px; }
.slogan{ display:block; margin-top:10px; font:600 .95rem/1 var(--display); color:var(--text); }
.wordmark svg{ width:1.05em; height:1.05em; }

/* Cifras bajo el hero */
.kpis{ padding-block:80px 8px; }
.kpi-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 0; }
@media (min-width:860px){ .kpi-row{ grid-template-columns:repeat(4,1fr); } }
.kpi-row > div{ padding:0 24px; border-left:1px solid var(--line-strong); }
.kpi-row > div:nth-child(odd){ border-left:0; }
@media (min-width:860px){ .kpi-row > div:nth-child(odd){ border-left:1px solid var(--line-strong); } .kpi-row > div:first-child{ border-left:0; padding-left:0; } }
.kpi-row b{ display:block; font:800 clamp(2.6rem,5vw,4rem)/1 var(--display); color:var(--green); }
.kpi-row span{ display:block; margin-top:10px; color:var(--muted); max-width:22ch; }
/* Servicios */
.svc-grid{ display:grid; gap:16px; }
@media (min-width:700px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{ padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }
.svc-i{ display:grid; place-items:center; width:52px; height:52px; border-radius:12px; background:var(--green); color:var(--green-ink); margin-bottom:20px; }
.svc-i svg, .ok svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc h3{ font-size:1.25rem; margin-bottom:8px; }
.svc p{ color:var(--muted); }
/* Por qué Zgames */
.why2{ display:grid; gap:40px; }
@media (min-width:980px){ .why2{ grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start; } .why2 > div:first-child{ position:sticky; top:120px; } }
.why2 h2{ margin-bottom:28px; }
.why-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:700px){ .why-list{ grid-template-columns:1fr 1fr; column-gap:32px; } }
.why-list li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:24px 0; border-top:1px solid var(--line); }
.ok{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--green); color:var(--green); }
.ok svg{ width:20px; height:20px; }
.why-list h3{ font-size:1.12rem; margin-bottom:6px; }
.why-list p{ color:var(--muted); font-size:.98rem; }
/* Enfoque regional */
.region{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .region{ grid-template-columns:1fr 1fr; gap:64px; } }
.region-art{ position:relative; aspect-ratio:1/1; max-width:460px; width:100%; margin-inline:auto; border-radius:var(--radius-lg); border:1px solid var(--line-strong); overflow:hidden;
  background:radial-gradient(circle at 50% 55%, rgba(66,193,72,.22), transparent 60%), radial-gradient(var(--line-strong) 1.2px, transparent 1.3px) 0 0/18px 18px, var(--bg); display:grid; place-items:center; }
.region-art span{ font:800 clamp(3.5rem,9vw,6rem)/1 var(--display); color:transparent; -webkit-text-stroke:1.5px var(--green); letter-spacing:.04em; }
.region-art i{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(66,193,72,.2), 0 0 24px rgba(66,193,72,.8); }
.region .lead{ margin:18px 0 28px; }
.region-pts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.region-pts li{ padding:18px 0; border-bottom:1px solid var(--line); display:grid; gap:4px; }
.region-pts b{ font:700 1.1rem/1.2 var(--display); }
.region-pts span{ color:var(--muted); }
/* Equipo */
.team-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; }
.team-head .lead{ margin-top:14px; }
.team{ display:grid; gap:16px; }
@media (min-width:700px){ .team{ grid-template-columns:repeat(3,1fr); } }
.member{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:16px 16px 24px; }
.photo{ aspect-ratio:4/3; border-radius:10px; display:grid; place-items:center; margin-bottom:18px; background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(66,193,72,.12) 22px 44px), var(--bg); border:1px dashed var(--line-strong); }
.photo span{ font:800 2.4rem/1 var(--display); color:var(--faint); }
.member h3{ font-size:1.2rem; }
.member p{ color:var(--green); font-weight:600; font-size:.95rem; margin-top:4px; }
/* Contacto */
.contact{ padding:28px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); }
.field textarea{ width:100%; font:500 1rem/1.4 var(--body); color:var(--text); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 14px; resize:vertical; }
.field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.cta-final{ align-items:start !important; }
.cta-final .lead{ margin-top:18px; }

/* Páginas Servicios / Sobre nosotros / Contacto */
.p-h1.narrow{ max-width:18ch; }
.about-img{ width:100%; max-width:440px; height:auto; justify-self:center; filter:drop-shadow(0 0 40px rgba(66,193,72,.25)); }
.slogan.big{ font-size:1.4rem; color:var(--green); margin-top:24px; }
.kpis.tint{ padding-block:clamp(56px,7vw,88px); }
.values{ display:grid; gap:16px; }
@media (min-width:800px){ .values{ grid-template-columns:repeat(3,1fr); } }
.values article{ padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.values .vn{ font:800 2.6rem/1 var(--display); color:var(--green); }
.values h3{ font-size:1.3rem; margin:18px 0 8px; }
.values p{ color:var(--muted); }
.nav-links a, .nav-links .dd-btn{ white-space:nowrap; }
.nav-inner{ gap:20px; }
@media (max-width:1320px){ .nav-links{ gap:18px; } }

/* Ecosistema: deslizar y descubrir */
.reveal{ --pos:22%; position:relative; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.reveal::before{ content:""; position:absolute; inset:0 auto 0 0; width:var(--pos); background:linear-gradient(90deg, rgba(66,193,72,.07), rgba(66,193,72,.02)); border-radius:var(--radius-lg) 0 0 var(--radius-lg); pointer-events:none; }
.rv-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.rv{ position:relative; min-height:200px; padding:28px 24px 24px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.rv:nth-child(4n){ border-right:0; }
.rv-k{ display:block; font:700 .7rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; transition:opacity .35s; }
.rv-soon{ position:absolute; top:24px; right:20px; font-style:normal; font-size:.7rem; font-weight:700; color:#e8a83a; border:1px solid rgba(232,168,58,.45); border-radius:999px; padding:3px 8px; transition:opacity .35s; }
.rv h3{ display:flex; align-items:center; gap:8px; font-size:1.45rem; line-height:1.15; transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.2,1), color .35s, opacity .35s; }
.rv-z{ width:24px; height:22px; flex:none; }
.rv-dot{ width:10px; height:10px; border-radius:50%; background:var(--green); flex:none; }
.rv p{ color:var(--muted); margin-top:10px; transition:opacity .4s, transform .45s cubic-bezier(.2,.7,.2,1); }
.rv .go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; font-size:.9rem; color:var(--green); text-decoration:none; transition:opacity .4s; }
.rv .go svg{ width:12px; height:12px; }
.rv .go:hover{ text-decoration:underline; }
/* estado oculto: solo el nombre, grande y tenue */
.rv:not(.on) h3{ transform:translateY(22px) scale(1.12); color:var(--text); opacity:.55; }
.rv:not(.on) p, .rv:not(.on) .go, .rv:not(.on) .rv-k, .rv:not(.on) .rv-soon{ opacity:0; pointer-events:none; }
.rv:not(.on) p{ transform:translateY(12px); }
.rv.on h3{ color:var(--text); }
.rv-handle{ position:absolute; top:-14px; bottom:-14px; left:var(--pos); width:44px; margin-left:-22px; cursor:ew-resize; z-index:5; outline:none; }
.rv-line{ position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:linear-gradient(transparent, var(--green) 10%, var(--green) 90%, transparent); box-shadow:0 0 14px rgba(66,193,72,.6); }
.rv-knob{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:#000; border:2px solid var(--green); display:grid; place-items:center; box-shadow:0 0 0 6px rgba(66,193,72,.15), 0 0 30px rgba(66,193,72,.5); transition:transform .2s; }
.rv-knob svg{ width:26px; height:24px; }
.rv-handle:hover .rv-knob, .rv-handle:focus-visible .rv-knob, .reveal.dragging .rv-knob{ transform:scale(1.1); }
.rv-handle:focus-visible .rv-knob{ outline:2px solid var(--green); outline-offset:4px; }
.rv-hint{ position:absolute; left:50%; top:calc(50% + 36px); transform:translateX(-50%); white-space:nowrap; font:700 .72rem/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:#000; padding:4px 8px; border-radius:4px; transition:opacity .3s; }
.reveal.used .rv-hint{ opacity:0; }
@media (max-width:999px){ .rv-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .rv:nth-child(4n){ border-right:1px solid var(--line); } .rv:nth-child(3n){ border-right:0; } }
@media (max-width:699px){
  .rv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rv{ min-height:0; padding:20px 14px; } .rv:nth-child(3n){ border-right:1px solid var(--line); } .rv:nth-child(2n){ border-right:0; }
  .rv h3{ font-size:1.15rem; } .rv p{ font-size:.9rem; } .rv-handle, .reveal::before{ display:none; }
  .rv:not(.on) h3{ transform:none; opacity:1; } .rv:not(.on) p, .rv:not(.on) .go, .rv:not(.on) .rv-k, .rv:not(.on) .rv-soon{ opacity:1; pointer-events:auto; } .rv:not(.on) p{ transform:none; }
}
@media (prefers-reduced-motion: reduce){ .rv h3, .rv p{ transition:none; } }
html, body{ overflow-x:clip; }

/* Menú Productos y servicios: acordeón */
.dropdown.mega{ width:min(560px, calc(100vw - 40px)); min-width:0; padding:0; overflow:hidden; max-height:calc(100vh - 100px); overflow-y:auto; }
.acc-g + .acc-g{ border-top:1px solid var(--line-strong); }
.acc-h{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:none; border:0; color:var(--text); font:700 1rem/1 var(--display); cursor:pointer; text-align:left; }
.acc-h span{ display:inline-flex; align-items:center; gap:10px; }
.acc-h .az{ width:20px; height:18px; }
.acc-h .ac{ width:12px; height:12px; transition:transform .25s; }
.acc-h:hover, .acc-h[aria-expanded="true"]{ color:var(--green); }
.acc-h[aria-expanded="true"] .ac{ transform:rotate(180deg); }
.acc-p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; background:var(--green); }
.acc-g.open .acc-p{ grid-template-rows:1fr; }
.acc-in{ overflow:hidden; display:grid; grid-template-columns:180px 1fr; gap:14px 20px; padding:0 18px; }
.acc-g.open .acc-in{ padding:20px 18px; }
.acc-d{ color:var(--green-ink); font-size:.88rem; line-height:1.45; font-weight:600; }
.acc-l{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.dropdown .acc-l a{ display:flex !important; justify-content:flex-start !important; align-items:center; gap:12px; padding:9px 10px !important; border-radius:6px; color:var(--green-ink) !important; font:700 .95rem/1.2 var(--display); text-decoration:none; white-space:nowrap; }
.acc-l a .mi, .acc-l a .mc{ color:inherit !important; }
.acc-l a .mi{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acc-l a .mc{ width:11px; height:11px; margin-left:2px; }
.dropdown .acc-l a:hover, .dropdown .acc-l a:focus-visible, .dropdown .acc-l a.current{ background:#000 !important; color:var(--green) !important; outline:none; }
.mobile-menu .acc{ margin:4px 0 8px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; }
.mobile-menu .acc-l a{ display:flex; align-items:center; gap:12px; padding:10px; border:0; color:var(--green-ink); font:700 .95rem/1.2 var(--display); text-decoration:none; }
.mobile-menu .acc-l a .mi{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.mobile-menu .acc-l a .mc{ display:none; }
@media (max-width:560px){ .acc-in{ grid-template-columns:1fr; } }

/* Páginas Zsports y Zcasino */
.partner-one{ display:grid; gap:32px; align-items:center; }
@media (min-width:900px){ .partner-one{ grid-template-columns:1fr 1fr; gap:64px; } }
.partners{ display:grid; gap:16px; }
@media (min-width:860px){ .partners{ grid-template-columns:repeat(3,1fr); } }
.partner{ position:relative; padding:28px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--bg); overflow:hidden; }
.partner::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--green); }
.partner.big{ padding:36px; }
.pt-name{ font:800 clamp(1.7rem,3vw,2.3rem)/1 var(--display); letter-spacing:-.01em; }
.pt-role{ margin:10px 0 16px; font:700 .78rem/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.partner p:last-child{ color:var(--muted); }
.studios{ margin-top:40px; }
.studios > p{ color:var(--faint); font-size:.95rem; margin-bottom:14px; }
.prov-list .more{ border-style:dashed; color:var(--faint); }
.casino-img{ max-width:480px; justify-self:center; filter:drop-shadow(0 0 40px rgba(66,193,72,.25)); }
[data-view="zsports"] .why-list{ margin-top:8px; }

/* Página de cada opción del menú */
.it-tag b{ min-width:auto; padding:0 8px; }
.it-art{ display:grid; place-items:center; }
.it-art img{ max-width:100%; height:auto; }
.it-art img.tall{ max-height:420px; width:auto; filter:drop-shadow(0 0 40px rgba(66,193,72,.25)); }
.it-art img.wide{ width:100%; border-radius:12px; }
.it-points{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:800px){ .it-points{ grid-template-columns:repeat(3,1fr); } }
.it-points li{ padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }
.it-n{ font:800 2.4rem/1 var(--display); color:var(--green); }
.it-points h3{ font-size:1.25rem; margin:16px 0 8px; }
.it-points p{ color:var(--muted); }
.it-sibs{ display:flex; flex-wrap:wrap; gap:10px; }
.tag:has(#it-more) > b{ width:30px; height:30px; min-width:30px; flex:0 0 30px; padding:0; }
.it-sibs span{ padding:12px 18px; border:1px solid var(--line-strong); border-radius:999px; font:700 .95rem/1 var(--display); color:var(--text); }
.it-sibs span.on{ background:var(--green); border-color:var(--green); color:var(--green-ink); }
.mobile-menu .acc-l a.current{ background:#000; color:var(--green); }
.btn[hidden]{ display:none !important; }

/* Ecosistema con los 5 grupos */
.rv-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.rv{ min-height:380px; border-right:1px solid var(--line) !important; }
.rv:last-child{ border-right:0 !important; }
.rv-subs{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:6px; transition:opacity .4s; }
.rv-subs a{ display:inline-block; font-size:.88rem; font-weight:600; color:var(--text); text-decoration:none; padding:5px 10px; border:1px solid var(--line-strong); border-radius:999px; }
.rv-subs a:hover{ border-color:var(--green); color:var(--green); }
.rv:not(.on) .rv-subs{ opacity:0; pointer-events:none; }
.rv h3{ font-size:1.35rem; }
@media (max-width:999px){ .rv-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .rv:nth-child(3n){ border-right:0 !important; } }
@media (max-width:699px){ .rv-grid{ grid-template-columns:1fr !important; } .rv{ min-height:0; border-right:0 !important; } .rv:not(.on) .rv-subs{ opacity:1; pointer-events:auto; } .rv-subs{ display:flex; flex-wrap:wrap; } }
.rv:not(.on) h3{ transform:translateY(22px) !important; }
.rv h3{ overflow-wrap:normal; font-size:clamp(1.05rem,1.35vw,1.3rem) !important; }
.rv{ padding:28px 18px 24px !important; }
.rv-subs a{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:.82rem !important; }
@media (max-width:699px){ .rv:not(.on) h3{ transform:none !important; } }

/* Ecosistema: tarjetas que giran + Z deslizable */
.eco2{ display:grid; gap:48px; align-items:center; }
@media (min-width:1000px){ .eco2{ grid-template-columns:1.05fr .95fr; gap:64px; } }
.reveal.zt{ --pos:8%; padding:8px 0; }
.reveal.zt::before{ display:none; }
.tg + .tg{ margin-top:22px; }
.tg-l{ font:700 .72rem/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:10px; }
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tl{ perspective:900px; height:190px; outline:none; cursor:default; }
.tl-in{ position:relative; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.tl.on .tl-in, .tl.tap .tl-in{ transform:rotateY(180deg); }
@media (hover:hover){ .tl:hover .tl-in, .tl:focus-within .tl-in{ transform:rotateY(180deg); } }
.tl-f, .tl-b{ position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.tl-f{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:var(--surface-2); border:1px solid var(--line-strong); }
.tl-i{ width:46px; height:46px; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 10px rgba(66,193,72,.4)); }
.tl-f b{ font:800 1.15rem/1 var(--display); }
.tl-f span{ font:700 .68rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.tl-b{ transform:rotateY(180deg); background:var(--green); color:var(--green-ink); padding:16px 14px; overflow:hidden; }
.tl-b b{ display:block; font:800 1.05rem/1 var(--display); margin-bottom:10px; padding-right:34px; }
.tl-b ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.tl-b li a{ color:var(--green-ink); font-size:.82rem; font-weight:700; text-decoration:none; line-height:1.25; }
.tl-b li a:hover{ text-decoration:underline; }
.tl-go{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:2px solid var(--green-ink); display:grid; place-items:center; color:var(--green-ink); }
.tl-go svg{ width:13px; height:13px; }
.tl-go:hover{ background:#000; color:var(--green); border-color:#000; }
.reveal.zt .rv-handle{ top:-6px; bottom:-6px; }
.reveal.zt .rv-hint{ top:calc(50% + 34px); }
.eco-copy h2{ margin-bottom:18px; }
.eco-bul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.eco-bul li{ position:relative; padding-left:22px; color:var(--muted); }
.eco-bul li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--green); transform:rotate(45deg); }
.eco-bul b{ color:var(--text); font-family:var(--display); }
.eco-end{ margin-top:22px; font:700 1.05rem/1.4 var(--display); color:var(--green); }
@media (max-width:699px){
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tl{ height:250px; }
  .reveal.zt .rv-handle{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .tl-in{ transition:none; } }
.reveal.zt{ padding-top:56px; }
.reveal.zt .rv-handle{ top:0; bottom:-6px; }
.reveal.zt .rv-knob{ top:0; margin-top:0; }
.reveal.zt .rv-hint{ top:16px; left:calc(50% + 34px); transform:none; }
.tl{ height:236px; }
.tl-b{ padding:14px 12px; }
.tl-b b{ font-size:.98rem; margin-bottom:8px; }
.tl-b ul{ gap:2px; }
.tl-b li a{ font-size:.78rem; }
.tl-b li{ line-height:1.2; }
.tl-b ul{ gap:7px !important; }

/* Ecosistema: diseño original con logotipos */
.reveal.lgx{ --pos:0%; padding:24px 0 24px 56px; user-select:none; touch-action:pan-y; }
.reveal.lgx::before{ display:none; }
.lg-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:28px; }
.lg{ grid-column:span 2; position:relative; min-height:210px; display:flex; flex-direction:column; align-items:center; padding:0 18px; }
.lg:nth-child(4){ grid-column:2 / span 2; }
.lg-logo{ display:inline-flex; align-items:center; gap:4px; text-decoration:none; color:var(--text); font:800 clamp(1.7rem,2.8vw,2.5rem)/1 var(--display); letter-spacing:-.02em;
  transform:translateY(64px); transition:transform .5s cubic-bezier(.2,.7,.2,1), font-size .4s; }
.lg-logo svg{ width:1.15em; height:.95em; filter:drop-shadow(0 0 12px rgba(66,193,72,.35)); }
.lg-info{ margin-top:18px; text-align:center; max-width:30ch; opacity:0; transform:translateY(16px); transition:opacity .45s, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.lg-info > p{ color:var(--muted); }
.lg-info ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }
.lg-info li{ font-size:.92rem; color:var(--text); }
.lg-info li::before{ content:"• "; color:var(--green); }
.lg-info .go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--green); font-weight:700; font-size:.9rem; text-decoration:none; }
.lg-info .go svg{ width:12px; height:12px; }
.lg.on .lg-logo{ transform:none; font-size:clamp(1.35rem,2vw,1.7rem); }
.lg.on .lg-info{ opacity:1; transform:none; pointer-events:auto; }
.reveal.lgx .rv-handle{ top:0; bottom:0; }
.reveal.lgx .rv-line{ background:linear-gradient(transparent, rgba(229,229,229,.5) 12%, rgba(229,229,229,.5) 88%, transparent); box-shadow:none; }
.reveal.lgx.used .rv-line, .reveal.lgx.dragging .rv-line{ background:linear-gradient(transparent, var(--green) 10%, var(--green) 90%, transparent); box-shadow:0 0 14px rgba(66,193,72,.6); }
.reveal.lgx .rv-handle{ margin-left:0; left:calc(var(--pos) * 1); }
.reveal.lgx .rv-hint{ left:calc(50% + 34px); top:50%; transform:translateY(-50%); }
@media (max-width:899px){ .lg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lg, .lg:nth-child(4){ grid-column:auto; } .lg:last-child{ grid-column:1 / -1; } }
@media (max-width:699px){
  .reveal.lgx{ padding-left:0; } .reveal.lgx .rv-handle{ display:none; }
  .lg-grid{ grid-template-columns:1fr; } .lg{ min-height:0; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .lg-logo{ transform:none !important; font-size:1.6rem !important; } .lg-info{ opacity:1; transform:none; pointer-events:auto; }
}

.promo-sub{ color:#3a463d; font-size:1.05rem; margin:-12px 0 26px; max-width:36ch; }
.promo-shot{ border-radius:12px; box-shadow:0 30px 60px rgba(0,0,0,.25); }
.ctrl-lead{ margin-top:16px; }

/* Sección 04: actividad en vivo */
.feed{ background:#000; border-radius:16px; padding:20px; box-shadow:0 30px 60px rgba(0,0,0,.3); color:var(--text); min-height:360px; }
.feed-h{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid var(--line-strong); font-size:.85rem; }
.live{ display:inline-flex; align-items:center; gap:8px; font:700 .78rem/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.live i{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(66,193,72,.7); animation:pulse 1.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(66,193,72,0); } 100%{ box-shadow:0 0 0 0 rgba(66,193,72,0); } }
.feed-c{ color:var(--muted); } .feed-c b{ color:var(--text); font-family:var(--display); font-variant-numeric:tabular-nums; }
.feed-l{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.feed-l li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.feed-l li.in{ transform:translateY(-14px); opacity:0; }
.feed-l li:first-child{ border-color:rgba(66,193,72,.6); box-shadow:0 0 20px rgba(66,193,72,.15); }
.fd{ width:10px; height:10px; border-radius:50%; background:var(--green); }
.feed-l b{ display:block; font-size:.95rem; }
.feed-l small{ display:block; margin-top:2px; font:700 .7rem/1 var(--display); letter-spacing:.08em; color:var(--green); }
.feed-l em{ font-style:normal; font-size:.75rem; color:var(--faint); }

/* ===== Sección 04 en fondo oscuro (coherente con el resto del sitio) ===== */
.promo{ background:
    radial-gradient(70% 90% at 0% 0%, rgba(66,193,72,.16), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(66,193,72,.05) 46px 92px),
    var(--surface-2) !important;
  color:var(--text) !important; border:1px solid var(--line-strong); }
.promo h2{ color:var(--text) !important; }
.promo h2 .g{ color:var(--green) !important; }
.promo-sub{ color:var(--muted) !important; }
.feed{ background:var(--bg); border:1px solid var(--line-strong); box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 60px rgba(66,193,72,.08); }

/* ===== Movimiento en las imágenes ===== */
@keyframes zfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes zfloat-r{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-12px) rotate(-1.5deg); } }
@keyframes zglow{ 0%,100%{ filter:drop-shadow(0 0 22px rgba(66,193,72,.18)); } 50%{ filter:drop-shadow(0 0 46px rgba(66,193,72,.5)); } }
@keyframes zstripes-hero{ to{ background-position:78.75px 0; } }
@keyframes zstripes-sol{ to{ background-position:48.55px 0; } }
@keyframes zshine{ 0%{ transform:translateX(-130%) skewX(-18deg); } 55%,100%{ transform:translateX(260%) skewX(-18deg); } }
@keyframes zspin-glow{ 0%,100%{ filter:drop-shadow(0 0 18px rgba(66,193,72,.25)) brightness(1); } 50%{ filter:drop-shadow(0 0 40px rgba(66,193,72,.55)) brightness(1.12); } }

@media (prefers-reduced-motion: no-preference){
  /* figuras deportivas: flotan y su brillo respira */
  .pasion-img, .control-side img, .about-img, .it-art img.tall{ animation:zfloat-r 6.5s ease-in-out infinite, zglow 4.5s ease-in-out infinite; }
  .casino-img{ animation:zfloat 6s ease-in-out infinite, zspin-glow 4s ease-in-out infinite; }
  .sol-art.two img{ animation:zfloat 5.5s ease-in-out infinite; }
  .sol-art.two img + img{ animation:zfloat 5.5s ease-in-out -2.7s infinite, zspin-glow 4s ease-in-out infinite; }
  /* hero: el jugador flota y las franjas avanzan */
  .hero-art img{ animation:zfloat 7s ease-in-out infinite; }
  .hero-art::before{ animation:zstripes-hero 2.4s linear infinite; }
  .sol-art.stripes{ animation:zstripes-sol 2s linear infinite; }
  /* pantallas y dispositivos: flotan despacio con un destello que las recorre */
  .p-hero-img:not(.casino-img), .sol-art.grid-bg img, .win.front, .shot > img{ animation:zfloat 8s ease-in-out infinite; }
  .shot:nth-child(2) > img{ animation-delay:-2.6s; } .shot:nth-child(3) > img{ animation-delay:-5.2s; }
  .win.back1{ animation:zfloat 8s ease-in-out -1.5s infinite; } .win.back2{ animation:zfloat 8s ease-in-out -3s infinite; }
  .win.front, .sol-art.grid-bg, .shot{ position:relative; overflow:hidden; }
  .win.front::after, .sol-art.grid-bg::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:35%; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation:zshine 6s ease-in-out infinite; }
  .phone{ animation:zfloat 7s ease-in-out infinite; }
  .ring{ animation:zfloat 6s ease-in-out -2s infinite; } .float.zc{ animation:zfloat 6.5s ease-in-out -4s infinite; } .float.bars{ animation:zfloat 7.5s ease-in-out -1s infinite; }
  .tl-b ~ *{ }
  /* aparición suave al hacer scroll */
  [data-scroll-reveals] .zin{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .zin.seen{ opacity:1; transform:none; }
}
/* Sección 05: antes y después */
.ba-switch{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; margin-top:26px; padding:5px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); }
.ba-switch button{ position:relative; z-index:2; padding:12px 22px; border:0; background:none; color:var(--muted); font:700 .95rem/1 var(--display); cursor:pointer; border-radius:999px; transition:color .3s; white-space:nowrap; }
.ba-switch button[aria-pressed="true"]{ color:var(--green-ink); }
.ba-switch .ba-knob{ position:absolute; z-index:1; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:#6b736d; transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s; display:flex; align-items:center; justify-content:flex-end; padding-right:10px; }
.ba-switch .ba-knob svg{ width:18px; height:16px; opacity:0; transition:opacity .3s; }
.ba-switch[data-state="before"] button[data-ba="before"]{ color:#fff; }
.ba-switch[data-state="after"] .ba-knob{ transform:translateX(100%); background:var(--green); }
.ba{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ba li{ display:grid; grid-template-columns:44px 1fr; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); transition:border-color .5s, background .5s, box-shadow .5s; }
.ba-i{ position:relative; width:44px; height:44px; }
.ba-i i{ position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.ba-i svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bx{ border:1px solid #5c3a3a; color:#d47a7a; }
.bv{ background:var(--green); color:var(--green-ink); opacity:0; transform:scale(.6) rotate(-45deg); }
.ba-t{ position:relative; display:grid; }
.ba-t > span{ grid-area:1/1; font:600 clamp(1.02rem,1.5vw,1.2rem)/1.35 var(--display); transition:opacity .45s, transform .5s cubic-bezier(.2,.7,.2,1); }
.bf{ color:var(--muted); }
.af{ color:var(--text); opacity:0; transform:translateY(10px); }
.ba[data-state="after"] li{ border-color:rgba(66,193,72,.45); background:linear-gradient(90deg, rgba(66,193,72,.1), var(--surface) 60%); box-shadow:0 0 24px rgba(66,193,72,.08); }
.ba[data-state="after"] .bx{ opacity:0; transform:scale(.6) rotate(45deg); }
.ba[data-state="after"] .bv{ opacity:1; transform:none; }
.ba[data-state="after"] .bf{ opacity:0; transform:translateY(-10px); }
.ba[data-state="after"] .af{ opacity:1; transform:none; }
.ba[data-state="after"] li:nth-child(2) *{ transition-delay:.06s; } .ba[data-state="after"] li:nth-child(3) *{ transition-delay:.12s; }
.ba[data-state="after"] li:nth-child(4) *{ transition-delay:.18s; } .ba[data-state="after"] li:nth-child(5) *{ transition-delay:.24s; } .ba[data-state="after"] li:nth-child(6) *{ transition-delay:.3s; }
@media (max-width:480px){ .ba-switch button{ padding:11px 14px; font-size:.88rem; } }

/* Franja: dos cintas cruzadas en movimiento continuo */
.ribbons{ position:relative; height:170px; overflow:hidden; margin-block:-24px; z-index:2; pointer-events:none; }
.rb{ position:absolute; left:-5%; width:110%; top:50%; overflow:hidden; }
.rb1{ background:var(--green); color:var(--green-ink); transform:translateY(-50%) rotate(-3.5deg); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.rb2{ background:#1d5a22; color:#000; transform:translateY(-50%) rotate(3deg); opacity:.95; }
.rb-track{ display:flex; align-items:center; gap:28px; width:max-content; padding:16px 0; animation:zmarq 38s linear infinite; }
.rb2 .rb-track{ animation-direction:reverse; animation-duration:46s; }
.rb-track span{ font:800 clamp(1.15rem,2vw,1.6rem)/1 var(--display); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.rb-track i{ font-style:normal; font:800 1.4rem/1 var(--display); }
@keyframes zmarq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rb-track{ animation:none; } }
@media (max-width:600px){ .ribbons{ height:130px; } }
/* Sección 04: cifras protagonistas */
.stats-sec{ position:relative; overflow:hidden; }
.stats-sec::before{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:160%; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg, transparent 0 60px, rgba(66,193,72,.06) 60px 120px); mask-image:radial-gradient(closest-side, #000, transparent); -webkit-mask-image:radial-gradient(closest-side, #000, transparent); }
.bigstats{ position:relative; display:grid; gap:16px; margin-top:8px; }
@media (min-width:700px){ .bigstats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .bigstats{ grid-template-columns:repeat(4,1fr); } }
.bs{ position:relative; padding:34px 28px 30px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--bg); overflow:hidden; }
.bs::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--green); transform-origin:left; transform:scaleX(.15); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bs.seen::before, .bs:hover::before{ transform:scaleX(1); }
.bs::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(66,193,72,.22), transparent 70%); }
.bs b{ display:block; font:800 clamp(2.6rem,4vw,3.9rem)/1 var(--display); white-space:nowrap; color:var(--green); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.bs p{ margin-top:14px; color:var(--muted); font-size:1.02rem; max-width:20ch; }
.stats-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.stats-cta p{ font:700 clamp(1.2rem,2vw,1.5rem)/1.3 var(--display); }
#control h2 .g{ color:var(--green); }

/* Sección 08: cierre */
.final .final-box{ position:relative; overflow:hidden; text-align:center; padding:clamp(48px,8vw,96px) clamp(24px,5vw,64px); border-radius:24px; border:1px solid rgba(66,193,72,.4);
  background:radial-gradient(60% 80% at 50% 0%, rgba(66,193,72,.22), transparent 70%), repeating-linear-gradient(115deg, transparent 0 56px, rgba(66,193,72,.06) 56px 112px), var(--surface); }
.final .tag{ justify-content:center; }
.final h2{ max-width:16ch; margin:0 auto; font-size:clamp(2.4rem,5.4vw,4.4rem); }
.final h2 .g{ color:var(--green); }
.final .lead{ margin:22px auto 32px; }
.final .btn-row{ justify-content:center; }
.final-z{ position:absolute; right:-40px; bottom:-60px; width:clamp(200px,30vw,380px); height:auto; opacity:.08; transform:rotate(-8deg); }
.final-slogan{ margin-top:34px; font:800 .9rem/1 var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--green); }
@media (prefers-reduced-motion: no-preference){
  .final .final-box{ animation:zstripes-final 3s linear infinite; }
  .final-z{ animation:zfloat-r 7s ease-in-out infinite; }
}
@keyframes zstripes-final{ to{ background-position:0 0, 61.8px 0, 0 0; } }
#preguntas .h-wide{ margin-bottom:40px; }

/* Sección 08: slogan en español */
.final2{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(100px,14vw,180px); border-top:1px solid var(--line); }
.final2 .wrap{ position:relative; z-index:1; }
.f-claim{ font-size:clamp(3rem,9vw,7.5rem) !important; font-weight:800; line-height:.95; margin:0 auto 44px; }
.f-claim .q{ display:inline-block !important; }
.f-bars{ position:absolute; top:-10%; bottom:-10%; width:34%; background:repeating-linear-gradient(110deg, transparent 0 34px, var(--green) 34px 62px); opacity:.85;
  mask-image:linear-gradient(90deg, #000, transparent); -webkit-mask-image:linear-gradient(90deg, #000, transparent); }
.f-l{ left:-6%; } .f-r{ right:-6%; transform:scaleX(-1); }
@media (prefers-reduced-motion: no-preference){ .f-bars{ animation:zstripes-f 2.6s linear infinite; } }
@keyframes zstripes-f{ to{ background-position:65.2px 0; } }
@media (max-width:700px){ .f-bars{ width:22%; opacity:.5; } }
/* Ventana flotante */
.lead-modal{ padding:0; border:0; background:transparent; color:var(--text); max-width:min(640px, calc(100vw - 32px)); width:100%; max-height:calc(100vh - 32px); overflow:visible; }
.lead-modal::backdrop{ background:rgba(0,0,0,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lead-modal[open]{ animation:lm-in .35s cubic-bezier(.2,.7,.2,1); }
.lead-modal.closing{ animation:lm-out .2s ease forwards; }
@keyframes lm-in{ from{ opacity:0; transform:translateY(24px) scale(.97); } }
@keyframes lm-out{ to{ opacity:0; transform:translateY(16px) scale(.98); } }
.lm-box{ position:relative; max-height:calc(100vh - 32px); overflow-y:auto; padding:clamp(24px,4vw,40px); border-radius:20px; border:1px solid rgba(66,193,72,.45);
  background:radial-gradient(70% 50% at 100% 0%, rgba(66,193,72,.16), transparent 70%), var(--surface); box-shadow:0 40px 100px rgba(0,0,0,.6); }
.lm-box h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin:4px 40px 10px 0; }
.lm-lead{ color:var(--muted); margin-bottom:22px; }
.lm-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); display:grid; place-items:center; cursor:pointer; }
.lm-close:hover{ border-color:var(--green); color:var(--green); }
.lm-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.lm-ok{ text-align:center; padding:30px 0 10px; }
.lm-ok .ok{ width:64px; height:64px; margin:0 auto 18px; background:var(--green); color:var(--green-ink); border:0; }
.lm-ok .ok svg{ width:32px; height:32px; }
.lm-ok h3{ font-size:1.5rem; margin-bottom:8px; } .lm-ok p{ color:var(--muted); margin-bottom:22px; }
html.lm-open{ overflow:hidden; }
button.btn{ font-family:var(--body); }
.f-claim .q{ color:var(--green); text-shadow:0 0 34px rgba(66,193,72,.45); }

/* Formulario estilo "Leave your contacts" */
.form.lead{ display:grid; gap:12px; }
.form.lead input:not([type=checkbox]), .form.lead select, .form.lead textarea{ width:100%; font:500 1rem/1.3 var(--body); color:var(--text); background:#141414; border:1px solid #232323; border-radius:8px; padding:15px 16px; appearance:none; -webkit-appearance:none; }
.form.lead ::placeholder{ color:#9a9a9a; }
.form.lead input:focus, .form.lead select:focus, .form.lead textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.form.lead textarea{ resize:vertical; min-height:130px; }
.form.lead .sel{ position:relative; }
.form.lead .sel svg{ position:absolute; right:16px; top:50%; width:12px; height:12px; transform:translateY(-50%); color:var(--text); pointer-events:none; }
.form.lead select:invalid{ color:#9a9a9a; } .form.lead option{ color:#000; }
.reach{ border:0; margin:10px 0 0; padding:0 0 18px; border-bottom:1px solid var(--line-strong); display:flex; flex-wrap:wrap; gap:10px 22px; }
.reach legend{ font:700 1.05rem/1.2 var(--display); margin-bottom:14px; padding:0; }
.reach label, .privacy{ display:inline-flex; align-items:center; gap:9px; font-size:.9rem; cursor:pointer; }
.reach input, .privacy input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid #bdbdbd; border-radius:3px; display:grid; place-items:center; flex:none; cursor:pointer; background:transparent; }
.reach input:checked, .privacy input:checked{ background:var(--green); border-color:var(--green); }
.reach input:checked::after, .privacy input:checked::after{ content:""; width:5px; height:9px; border:solid #000; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.privacy{ margin-top:4px; color:var(--muted); }
.privacy a{ color:var(--text); text-decoration:underline; }
.btn-send{ margin-top:8px; width:100%; padding:16px; border:0; border-radius:999px; background:#fff; color:#000; font:600 1rem/1 var(--body); cursor:pointer; transition:background .2s; }
.btn-send:hover{ background:var(--green); }
.form.lead .bad{ border-color:#e8a83a !important; }
.reach.bad legend, .privacy.bad{ color:#e8a83a; }
.form.lead .form-note:empty{ display:none; }
.lead-modal .lm-lead{ margin-bottom:18px; }
.contact.lead{ padding:24px; }
/* Sección 08 */
.home-cta h2 .g{ color:var(--green); }
.home-cta .lead{ margin-top:14px; }

.bo-head{ font-size:clamp(1.4rem,2.4vw,1.9rem) !important; line-height:1.2; margin-top:22px !important; max-width:22ch; }
.svc-cta{ background:radial-gradient(90% 90% at 100% 0%, rgba(66,193,72,.2), transparent 70%), var(--surface-2) !important; border-color:rgba(66,193,72,.45) !important; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.svc-cta .btn{ margin-top:auto; }
.svc-cta p{ margin-bottom:18px; }
.sol-go{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--green); font-weight:700; text-decoration:none; }
.sol-go svg{ width:14px; height:14px; } .sol-go:hover{ text-decoration:underline; }

.acc-d b{ display:block; margin-bottom:6px; font-family:var(--display); font-size:.95rem; }
@media (min-width:1040px){ .bo-feat{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .bo-feat .svc-cta{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; } .bo-feat .svc-cta .btn{ margin-top:0; } .bo-feat .svc-cta p{ margin-bottom:0; } }
.bo-feat .svc .go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--green); font-weight:700; font-size:.9rem; text-decoration:none; }
.bo-feat .svc .go svg{ width:12px; height:12px; }
@media (min-width:1040px){ .bo-feat .svc-cta{ display:grid !important; grid-template-columns:1fr auto; column-gap:24px; align-items:center; } .bo-feat .svc-cta h3{ grid-column:1; margin:0; } .bo-feat .svc-cta p{ grid-column:1; margin-top:6px; } .bo-feat .svc-cta .btn{ grid-column:2; grid-row:1 / span 2; } }

/* Sección 02: BackOffice + IA y franja de sportsbook/casino */
#soluciones h2 .g{ color:var(--green); }
.sol-ai{ border-color:rgba(66,193,72,.45) !important; box-shadow:0 0 40px rgba(66,193,72,.08); }
.ai-art{ position:relative; height:260px; display:grid; place-items:center; color:var(--line-strong);
  background:radial-gradient(circle at 70% 50%, rgba(66,193,72,.22), transparent 60%), radial-gradient(var(--line-strong) 1px, transparent 1.2px) 0 0/16px 16px, #000; }
.ai-net{ width:84%; height:auto; }
.ai-nodes circle{ fill:#000; stroke:var(--green); stroke-width:2; }
.ai-nodes .ai-out{ fill:var(--green); filter:drop-shadow(0 0 12px rgba(66,193,72,.8)); }
.ai-flow path{ stroke-dasharray:14 220; }
.ai-chip{ position:absolute; right:22px; top:20px; font:800 .85rem/1 var(--display); color:var(--green-ink); background:var(--green); padding:6px 10px; border-radius:6px; letter-spacing:.06em; }
@media (prefers-reduced-motion: no-preference){
  .ai-flow path{ animation:aiflow 2.6s linear infinite; } .ai-flow path:nth-child(2){ animation-delay:-.9s; } .ai-flow path:nth-child(3){ animation-delay:-1.7s; }
  .ai-nodes .ai-out{ animation:aipulse 2s ease-in-out infinite; transform-origin:280px 100px; }
}
@keyframes aiflow{ from{ stroke-dashoffset:234; } to{ stroke-dashoffset:0; } }
@keyframes aipulse{ 50%{ transform:scale(1.2); } }
.sol-strip{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; margin-top:20px; padding:16px 24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }
.sol-strip .strip-art{ height:90px !important; width:170px; background:repeating-linear-gradient(115deg, transparent 0 14px, rgba(66,193,72,.5) 14px 22px); border-radius:10px; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; }
.sol-strip .strip-art img{ height:84px !important; width:auto; }
.sol-strip .strip-art img + img{ height:64px !important; }
.sol-strip p{ color:var(--muted); } .sol-strip p b{ color:var(--text); font-family:var(--display); }
.strip-links{ display:flex; gap:10px; }
.strip-links a{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text); text-decoration:none; font:700 .9rem/1 var(--display); white-space:nowrap; }
.strip-links a:hover{ border-color:var(--green); color:var(--green); } .strip-links svg{ width:12px; height:12px; }
@media (max-width:860px){ .sol-strip{ grid-template-columns:1fr; text-align:left; } .sol-strip .strip-art{ width:100%; } }
#ecosistema h2 .g{ color:var(--green); }
.lg{ min-height:170px !important; }
.lg-info > p{ font-size:1.05rem; }

#tecnologia h2 .g{ color:var(--green); }
.ba li{ grid-template-columns:44px 1fr auto !important; }
.ba-p{ display:inline-flex; align-items:center; gap:2px; font:800 .95rem/1 var(--display); color:var(--faint); white-space:nowrap; transition:color .4s; }
.ba-p svg{ width:18px; height:15px; opacity:.5; transition:opacity .4s; }
.ba[data-state="after"] .ba-p{ color:var(--text); } .ba[data-state="after"] .ba-p svg{ opacity:1; }
@media (max-width:560px){ .ba li{ grid-template-columns:36px 1fr !important; } .ba-p{ grid-column:2; grid-row:1; margin-bottom:6px; } .ba-t{ grid-column:2; } .ba-i{ grid-row:1 / span 2; width:36px; height:36px; } }
/* Sección 05: menos espacio sobrante */
#control .control{ align-items:center !important; }
#control .control-side img{ width:min(62%, 270px) !important; margin-top:20px !important; }
#control .ba{ gap:14px; }
#control .ba li{ padding:24px 26px; }
#control{ padding-block:clamp(64px,8vw,104px); }
@media (max-width:979px){ #control .control-side img{ display:none; } }
#control{ padding-bottom:clamp(40px,5vw,64px) !important; }
#por-que{ padding-top:clamp(40px,5vw,64px) !important; }
.stats-cta p .g{ color:var(--green); }

/* Formulario: imagotipo de fondo y código de país */
.lm-box, .contact-wrap{ position:relative; isolation:isolate; overflow:hidden; }
.contact-wrap{ border-radius:var(--radius-lg); }
.form-wm{ position:absolute; z-index:-1; left:50%; top:50%; width:150%; height:auto; transform:translate(-50%,-50%) rotate(-14deg); color:#fff; opacity:.08; pointer-events:none; }
.lm-box{ overflow-y:auto; }
.lm-box .form-wm{ width:min(900px,170%); top:55%; }
@media (prefers-reduced-motion: no-preference){ .form-wm{ animation:wmfloat 14s ease-in-out infinite; } }
@keyframes wmfloat{ 0%,100%{ transform:translate(-50%,-50%) rotate(-14deg); } 50%{ transform:translate(-50%,-52%) rotate(-12deg); } }
.form.lead input:not([type=checkbox]), .form.lead select, .form.lead textarea{ background:rgba(20,20,20,.88) !important; backdrop-filter:blur(2px); }
.phone-row{ display:grid; grid-template-columns:132px 1fr; gap:8px; }
.sel.cc select{ padding:15px 28px 15px 14px !important; font-weight:600 !important; }
.sel.cc svg{ right:12px !important; }
/* Formulario: Z de fondo con movimiento */
.form-wm{ width:min(520px,95%) !important; left:auto !important; right:-14%; top:auto !important; bottom:-8%; transform:none; opacity:.11 !important;
  filter:drop-shadow(0 0 40px rgba(66,193,72,.6)); animation:wmz 9s ease-in-out infinite !important; }
@keyframes wmz{ 0%,100%{ transform:translate(0,0) rotate(-10deg) scale(1); } 33%{ transform:translate(-28px,-22px) rotate(-4deg) scale(1.05); } 66%{ transform:translate(14px,-36px) rotate(-14deg) scale(.97); } }
@media (prefers-reduced-motion: reduce){ .form-wm{ animation:none !important; transform:rotate(-10deg); } }
.form-wm{ width:min(380px,70%) !important; right:-70px !important; top:-30px !important; bottom:auto !important; opacity:.2 !important; }
.contact-wrap .form-wm{ top:auto !important; bottom:-40px !important; right:-60px !important; opacity:.14 !important; }
.form.lead input:not([type=checkbox]), .form.lead select, .form.lead textarea{ background:rgba(20,20,20,.8) !important; }
/* Sección 03: ZScience-Solutions y ZPAM destacados en la primera fila */
@media (min-width:900px){
  .lg:nth-child(1), .lg:nth-child(2){ grid-column:span 3 !important; }
  .lg:nth-child(4){ grid-column:span 2 !important; }
  .lg:nth-child(1) .lg-logo, .lg:nth-child(2) .lg-logo{ font-size:clamp(2.2rem,3.6vw,3.2rem); }
  .lg.on:nth-child(1) .lg-logo, .lg.on:nth-child(2) .lg-logo{ font-size:clamp(1.7rem,2.6vw,2.2rem); }
  .lg:nth-child(1) .lg-info > p, .lg:nth-child(2) .lg-info > p{ font-size:1.15rem; color:var(--text); }
}

/* Menú: enlace a la página de cada producto */
.acc-side{ display:flex; flex-direction:column; gap:12px; }
.dropdown .acc-all{ display:inline-flex !important; width:auto !important; align-items:center; gap:6px; padding:8px 12px !important; border-radius:999px !important; background:#000 !important; color:var(--green) !important; font:700 .82rem/1 var(--display); text-decoration:none; justify-content:flex-start !important; }
.dropdown .acc-all svg{ width:11px !important; height:11px !important; color:var(--green) !important; }
.dropdown .acc-all:hover{ background:#111 !important; }
.mobile-menu .acc-all{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:0; border-radius:999px; background:#000; color:var(--green); font:700 .82rem/1 var(--display); text-decoration:none; width:auto; }
.mobile-menu .acc-all svg{ width:11px; height:11px; }
/* Páginas de producto: opciones como tarjetas */
.items-grid .svc .go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--green); font-weight:700; font-size:.9rem; text-decoration:none; }
.items-grid .svc .go svg{ width:12px; height:12px; }
.ai-hero{ border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.45); height:340px !important; }
@media (min-width:1040px){ .items-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .items-grid:has(> .svc:nth-child(5)){ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (min-width:700px) and (max-width:1039px){ .items-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
.acc-side .acc-all{ align-self:flex-start; }
/* Titulares con palabra resaltada: sin superposición entre líneas */
.p-h1:has(mark){ line-height:1.16; }
.p-h1 mark{ display:inline; padding:0 .14em; margin:0 -.04em; border-radius:6px; line-height:1; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.p-h1 + .lead{ margin-top:22px; }
/* Palabra destacada sin franja: solo en verde */
.p-h1 mark, .h-xl mark{ background:none !important; color:var(--green) !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }
.p-h1:has(mark){ line-height:1.05; }

/* Preguntas frecuentes: la respuesta entra con movimiento al cambiar de pregunta */
.qa-panel.swap .qa-n{ animation:qaNum .6s cubic-bezier(.2,.7,.2,1); }
.qa-panel.swap h3{ animation:qaIn .55s cubic-bezier(.2,.7,.2,1) .05s both; }
.qa-panel.swap p{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .14s both; }
.qa-panel{ position:relative; }
.qa-panel::before{ content:""; position:absolute; left:-1px; top:0; width:3px; height:100%; background:var(--green); transform-origin:top; transform:scaleY(0); }
.qa-panel.swap::before{ animation:qaBar .7s cubic-bezier(.2,.7,.2,1) forwards; }
.qa-list [aria-selected="true"] + .qa-inline{ animation:qaIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(16px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes qaNum{ from{ opacity:0; transform:translateX(-24px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes qaBar{ to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .qa-panel.swap *, .qa-panel.swap::before{ animation:none !important; } }

/* Tipografía de marca: FX Ambasans para titulares, menú, botones y etiquetas.
   Toma la fuente instalada en el equipo o los archivos de /fonts (agregarlos al publicar). */
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:300; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-300.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:400; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-400.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:500; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-500.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:600; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-600.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:700; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-700.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:800; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-800.woff2) format("woff2"); }
@font-face{ font-family:"FX Ambasans"; font-style:normal; font-weight:900; font-display:swap; src:url(/reference-site/fonts/fx-ambasans-900.woff2) format("woff2"); }
:root{ --display:"FX Ambasans", "Saira", "Arial Narrow", system-ui, sans-serif !important; }

/* Preguntas: transición tipo "desvanecer y aparecer" del sitio original */
.qa-panel > *{ transition:opacity .17s ease, filter .17s ease, transform .17s ease; }
.qa-panel.out > *{ opacity:0; filter:blur(6px); transform:translateY(-6px); }
.qa-panel.swap .qa-n{ animation:qaNumGlow .9s cubic-bezier(.2,.7,.2,1) both !important; }
.qa-panel.swap h3{ animation:qaIn .55s cubic-bezier(.2,.7,.2,1) .18s both !important; }
.qa-panel.swap p{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .32s both !important; }
@keyframes qaNumGlow{ 0%{ opacity:0; transform:translateY(10px); filter:blur(6px); color:#1d5a22; } 45%{ opacity:.5; color:#1d5a22; filter:blur(2px); } 100%{ opacity:1; transform:none; filter:none; color:var(--green); } }
.qa-list button{ transition:color .25s, background .25s, border-color .25s; }
/* Franja principal: igual que el diseño original (dos cintas verdes cruzadas, en sentidos opuestos) */
.ribbons{ height:120px !important; margin-block:-10px !important; }
.rb{ background:var(--green) !important; color:#000 !important; opacity:1 !important; box-shadow:none !important; }
.rb::before, .rb::after{ content:""; position:absolute; left:0; right:0; height:1px; background:rgba(0,0,0,.55); }
.rb::before{ top:3px; } .rb::after{ bottom:3px; }
.rb1{ transform:translateY(-50%) rotate(-2.6deg) !important; z-index:2; }
.rb2{ transform:translateY(-50%) rotate(2.2deg) !important; z-index:1; }
.rb-track{ gap:16px !important; padding:9px 0 !important; animation:zmarqR 70s linear infinite !important; }
.rb2 .rb-track{ animation:zmarq 80s linear infinite !important; }
.rb-track span{ font:800 clamp(.95rem,1.35vw,1.25rem)/1 var(--display) !important; letter-spacing:.03em !important; }
.rb-track i{ font:400 1rem/1 system-ui, sans-serif !important; transform:translateY(-1px); }
@keyframes zmarqR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (max-width:600px){ .ribbons{ height:96px !important; } }

/* Franja inferior: logotipos de proveedores, como en el sitio original */
.prov-band.logos{ background:var(--green); padding:0; height:58px; display:flex; align-items:center; overflow:hidden; }
.prov-band.logos .prov-track{ display:flex; align-items:center; gap:0; width:max-content; animation:zmarq 35s linear infinite !important; }
.prov-band.logos .pl{ flex:none; width:205px; display:flex; justify-content:center; align-items:center; }
.prov-band.logos .pl img{ display:block; height:auto; max-height:36px; width:auto; filter:brightness(0); }
@media (prefers-reduced-motion: reduce){ .prov-band.logos .prov-track{ animation:none !important; } }

/* Chatbot */
.zbot{ position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.zb-btn{ position:relative; width:62px; height:62px; border-radius:50%; border:2px solid var(--green); background:#000; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 0 0 rgba(66,193,72,.55), 0 14px 30px rgba(0,0,0,.6); animation:zbPulse 2.4s infinite; transition:transform .2s; }
.zb-btn:hover{ transform:scale(1.06); }
.zb-btn svg{ position:absolute; transition:opacity .25s, transform .3s; }
.zb-z{ width:30px; height:26px; } .zb-close{ width:22px; height:22px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; opacity:0; transform:rotate(-90deg); }
.zbot.open .zb-z{ opacity:0; transform:rotate(90deg) scale(.6); } .zbot.open .zb-close{ opacity:1; transform:none; }
.zbot.open .zb-btn{ animation:none; }
@keyframes zbPulse{ 70%{ box-shadow:0 0 0 14px rgba(66,193,72,0), 0 14px 30px rgba(0,0,0,.6); } 100%{ box-shadow:0 0 0 0 rgba(66,193,72,0), 0 14px 30px rgba(0,0,0,.6); } }
.zb-tip{ position:relative; max-width:230px; padding:12px 30px 12px 14px; border-radius:12px; background:var(--surface); border:1px solid rgba(66,193,72,.5); box-shadow:0 14px 30px rgba(0,0,0,.5); cursor:pointer;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .35s, transform .35s; }
.zb-tip.show{ opacity:1; transform:none; pointer-events:auto; } .zb-tip.gone{ display:none; }
.zb-tip b{ display:block; font:700 .95rem/1.2 var(--display); } .zb-tip span{ display:block; margin-top:3px; font-size:.82rem; color:var(--muted); }
.zb-tip-x{ position:absolute; top:6px; right:8px; border:0; background:none; color:var(--muted); font-size:1.1rem; cursor:pointer; }
.zb-tip::after{ content:""; position:absolute; right:24px; bottom:-7px; width:12px; height:12px; background:var(--surface); border-right:1px solid rgba(66,193,72,.5); border-bottom:1px solid rgba(66,193,72,.5); transform:rotate(45deg); }
.zb-panel{ width:min(360px, calc(100vw - 40px)); height:min(520px, calc(100vh - 140px)); display:flex; flex-direction:column; border-radius:18px; overflow:hidden; border:1px solid rgba(66,193,72,.45);
  background:radial-gradient(80% 40% at 100% 0%, rgba(66,193,72,.14), transparent 70%), var(--surface); box-shadow:0 30px 70px rgba(0,0,0,.65);
  opacity:0; transform:translateY(16px) scale(.97); transform-origin:bottom right; transition:opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
.zbot.open .zb-panel{ opacity:1; transform:none; }
.zb-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-strong); background:#000; }
.zb-av{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--green); display:grid; place-items:center; flex:none; } .zb-av svg{ width:22px; height:19px; }
.zb-head b{ display:block; font:700 1rem/1.1 var(--display); } .zb-head small{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--green); }
.zb-head small i{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.zb-x{ margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:none; color:var(--text); display:grid; place-items:center; cursor:pointer; }
.zb-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.zb-msgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.zb-m{ max-width:86%; animation:zbIn .3s ease both; }
.zb-m p{ padding:10px 13px; border-radius:14px; font-size:.92rem; line-height:1.45; }
.zb-m.bot p{ background:var(--bg); border:1px solid var(--line-strong); border-bottom-left-radius:4px; }
.zb-m.user{ align-self:flex-end; } .zb-m.user p{ background:var(--green); color:#000; font-weight:600; border-bottom-right-radius:4px; }
.zb-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.zb-acts a, .zb-acts button{ display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--green); color:var(--green); background:none; font:700 .82rem/1 var(--display); text-decoration:none; cursor:pointer; }
.zb-acts a:hover, .zb-acts button:hover{ background:var(--green); color:#000; }
.zb-typing{ display:inline-flex; gap:4px; padding:12px 14px; background:var(--bg); border:1px solid var(--line-strong); border-radius:14px; border-bottom-left-radius:4px; width:max-content; }
.zb-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:zbDot 1s infinite; } .zb-typing span:nth-child(2){ animation-delay:.15s; } .zb-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes zbDot{ 50%{ transform:translateY(-4px); opacity:.4; } }
@keyframes zbIn{ from{ opacity:0; transform:translateY(8px); } }
.zb-quick{ display:flex; gap:6px; overflow-x:auto; padding:0 16px 10px; scrollbar-width:none; } .zb-quick::-webkit-scrollbar{ display:none; }
.zb-quick button{ flex:none; padding:8px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); font:600 .82rem/1 var(--body); cursor:pointer; white-space:nowrap; }
.zb-quick button:hover{ border-color:var(--green); color:var(--green); }
.zb-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line-strong); background:#000; }
.zb-form input{ flex:1; min-width:0; padding:12px 14px; border-radius:999px; border:1px solid var(--line-strong); background:#111; color:var(--text); font:500 .92rem/1 var(--body); }
.zb-form input:focus{ outline:none; border-color:var(--green); }
.zb-form button{ width:44px; height:44px; border-radius:50%; border:0; background:var(--green); display:grid; place-items:center; cursor:pointer; flex:none; }
.zb-form button svg{ width:20px; height:20px; fill:none; stroke:#000; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ .zb-btn{ animation:none; } }
html.lm-open .zbot{ display:none; }
.zb-panel{ padding:0 !important; }
.zb-panel[hidden]{ display:none !important; }
/* Equipo: fotos */
.photo{ aspect-ratio:4/5 !important; overflow:hidden; }
.photo.has-img{ border:1px solid var(--line-strong); border-style:solid; background:#000; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
/* Menú Productos y servicios: proporciones más armoniosas */
.dropdown.mega{ width:min(620px, calc(100vw - 40px)) !important; }
.acc-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important; gap:0 28px !important; }
.acc-g.open .acc-in{ padding:22px 24px !important; }
.acc-side{ gap:14px !important; justify-content:center; }
.acc-d{ font-size:.86rem !important; line-height:1.5 !important; }
.acc-d b{ font-size:.92rem !important; margin-bottom:4px !important; }
.dropdown .acc-all{ font-size:.74rem !important; padding:8px 12px !important; gap:5px !important; }
.acc-l{ align-content:center; gap:4px !important; }
.dropdown .acc-l a{ font-size:.92rem !important; padding:9px 12px !important; gap:12px !important; }
.acc-l a .mi{ width:20px !important; height:20px !important; }
.acc-h{ padding:15px 22px !important; }
@media (max-width:560px){ .acc-in{ grid-template-columns:1fr !important; gap:12px !important; } }
.items-grid:has(> .svc:nth-child(2)):not(:has(> .svc:nth-child(3))){ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

/* Equipo: carrusel */
.team-slider{ position:relative; }
.tn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s, opacity .2s; }
.tn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tn:hover:not(:disabled){ border-color:var(--green); color:var(--green); } .tn:disabled{ opacity:.35; cursor:default; }
.team.team-track{ display:flex !important; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:8px; scrollbar-width:none; }
.team-track::-webkit-scrollbar{ display:none; }
.team-track.grab{ scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.team-track .member{ flex:0 0 clamp(240px, 26vw, 300px); scroll-snap-align:start; }
.member .photo{ position:relative; width:100%; padding:0; color:inherit; font:inherit; }
.member .photo img{ -webkit-user-drag:none; pointer-events:none; }
.dept{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:7px 12px; border-radius:999px; border:1px solid var(--line-strong); background:none; color:var(--muted); font:600 .82rem/1 var(--display); cursor:pointer; transition:border-color .2s, color .2s; }
.dept svg{ width:11px; height:11px; } .dept:hover{ border-color:var(--green); color:var(--green); }
/* Ventana del equipo */
.tm-box{ max-width:560px; }
.tm-person{ display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:center; }
.tm-photo{ width:170px; aspect-ratio:4/5; object-fit:cover; border-radius:14px; border:1px solid var(--line-strong); }
.tm-photo.ini, .tm-av.ini{ display:grid; place-items:center; background:var(--bg); color:var(--faint); font:800 2rem/1 var(--display); }
.tm-info h2{ font-size:clamp(1.5rem,3vw,2rem); margin:2px 0 6px; } .tm-role{ color:var(--green); font-weight:600; }
.tm-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tm-link{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--green); color:var(--green); text-decoration:none; font:700 .86rem/1 var(--display); }
.tm-link svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tm-link:hover{ background:var(--green); color:#000; } .tm-link.off{ border-color:var(--line-strong); color:var(--faint); cursor:not-allowed; }
.tm-dtitle{ font-size:clamp(1.6rem,3.4vw,2.2rem); margin:4px 40px 6px 0; } .tm-dsub{ color:var(--muted); margin-bottom:18px; }
.tm-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tm-list > li > div:first-child{ display:flex; width:100%; align-items:center; gap:14px; padding:10px 14px 10px 10px; border-radius:12px; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); text-align:left; }
.tm-av{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; } .tm-av.ini{ font-size:1rem; }
.tm-list b{ display:block; font:700 1rem/1.2 var(--display); } .tm-list small{ display:block; color:var(--green); font-size:.85rem; margin-top:3px; }
.tm-list svg{ width:14px; height:14px; margin-left:auto; color:var(--muted); }
#tm-body.tm-in > *{ animation:qaIn .45s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width:520px){ .tm-person{ grid-template-columns:1fr; } .tm-photo{ width:140px; } }

/* Equipo: tarjeta con foto circular (combinación con el diseño de referencia) */
.team-track .member{ flex:0 0 clamp(230px, 22vw, 260px) !important; display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 20px 24px !important;
  background:radial-gradient(90% 60% at 50% 0%, rgba(66,193,72,.12), transparent 70%), var(--surface) !important; }
.member .photo{ width:168px !important; aspect-ratio:1/1 !important; border-radius:50% !important; margin:0 0 18px !important; border:0 !important; overflow:visible !important;
  background:var(--green) !important; display:grid; place-items:center; }
.team-track .photo{ cursor:default !important; pointer-events:none; }
.member .photo::before{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(66,193,72,.35); transform:translate(5px,4px); transition:transform .4s; pointer-events:none; }
.member .photo::after{ content:""; position:absolute; inset:-9px; border-radius:50%; background:rgba(66,193,72,.10); z-index:-1; }
.member .photo img{ border-radius:50%; width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:none; transition:transform .5s; }
.member .photo span{ color:#000 !important; font:800 2.2rem/1 var(--display); }
.member .photo:not(.has-img){ background:repeating-linear-gradient(115deg, rgba(0,0,0,.08) 0 12px, transparent 12px 24px), var(--green) !important; }
.m-bar{ width:28px; height:4px; border-radius:2px; background:var(--green); margin:6px 0 12px; }
.member .m-role{ color:var(--muted) !important; font-weight:500 !important; font-size:.92rem !important; line-height:1.3; margin:0 !important; min-height:2.4em; display:flex; align-items:center; }
.member h3{ font-size:1.35rem !important; margin:6px 0 16px; }
.m-social{ display:flex; gap:14px; justify-content:center; margin-bottom:14px; }
.ms{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted); transition:color .2s, background .2s; }
.ms svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
a.ms:hover{ color:#000; background:var(--green); } .ms.off{ opacity:.45; cursor:not-allowed; }
.member .dept{ margin-top:auto !important; }
.member .photo{ height:168px !important; min-height:0 !important; flex:none; }
.member .photo img{ position:absolute; inset:0; }
@media (min-width:1040px){ .it-points:has(> li:nth-child(4)){ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (min-width:800px) and (max-width:1039px){ .it-points:has(> li:nth-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
.dropdown .acc-l a{ white-space:normal !important; line-height:1.25 !important; }
.dropdown .acc-l a .mc{ flex:none; }

/* Menú Productos y servicios: versión compacta */
.dropdown.mega{ width:min(540px, calc(100vw - 40px)) !important; max-height:calc(100vh - 96px) !important; }
.acc-h{ padding:12px 18px !important; font-size:.95rem !important; }
.acc-h .az{ width:17px !important; height:15px !important; }
.acc-g.open .acc-in{ padding:16px 18px !important; }
.acc-in{ gap:0 20px !important; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) !important; }
.acc-d{ font-size:.8rem !important; line-height:1.45 !important; font-weight:600 !important; }
.acc-side{ gap:10px !important; }
.dropdown .acc-all{ font-size:.7rem !important; padding:7px 10px !important; }
.dropdown .acc-l a{ font-size:.84rem !important; padding:7px 9px !important; gap:10px !important; }
.acc-l a .mi{ width:17px !important; height:17px !important; }
.acc-l{ gap:2px !important; }
/* Chatbot: mensajes rápidos deslizables */
.zb-quick-wrap{ position:relative; }
.zb-quick{ scroll-behavior:smooth; cursor:grab; padding:2px 44px 10px !important; }
.zb-quick.grab{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.zb-qa{ position:absolute; top:0; bottom:10px; width:44px; display:grid; place-items:center; border:0; cursor:pointer; color:var(--text); z-index:2; transition:opacity .2s; }
.zb-qa svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.zb-qa.l{ left:0; background:linear-gradient(90deg, var(--surface) 55%, transparent); }
.zb-qa.r{ right:0; background:linear-gradient(270deg, var(--surface) 55%, transparent); }
.zb-qa:hover{ color:var(--green); } .zb-qa[disabled]{ opacity:0; pointer-events:none; }
.zb-qa{ top:50% !important; bottom:auto !important; width:30px !important; height:30px !important; margin-top:-20px; border-radius:50% !important; background:#000 !important; border:1px solid var(--line-strong) !important; box-shadow:0 0 0 8px var(--surface); }
.zb-qa.l{ left:8px !important; } .zb-qa.r{ right:8px !important; }
.zb-qa:hover{ border-color:var(--green) !important; }
.zb-qa svg{ width:14px !important; height:14px !important; }

/* Backoffice: pila de pantallas en movimiento */
.stack.cycle{ position:relative; height:clamp(260px, 30vw, 380px); padding:0 !important; perspective:1400px; }
.stack.cycle .win{ position:absolute !important; inset:auto !important; left:0; top:44px; width:calc(100% - 60px); height:auto; transform-origin:50% 100%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s, filter .9s; background:#f3f6f4; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.55); animation:none !important; }
.stack.cycle .win img{ display:block; width:100%; height:auto; }
.stack.cycle .win[data-pos="0"]{ transform:translate(0,0) rotateY(-8deg) rotateX(4deg); z-index:4; opacity:1; }
.stack.cycle .win[data-pos="1"]{ transform:translate(26px,-22px) rotateY(-8deg) rotateX(4deg) scale(.97); z-index:3; opacity:.85; filter:brightness(.8); }
.stack.cycle .win[data-pos="2"]{ transform:translate(52px,-44px) rotateY(-8deg) rotateX(4deg) scale(.94); z-index:2; opacity:.55; filter:brightness(.6); }
.stack.cycle .win[data-pos="3"]{ transform:translate(78px,-66px) rotateY(-8deg) rotateX(4deg) scale(.91); z-index:1; opacity:0; }
.stack.cycle .win.leaving{ transform:translate(-30px,120px) rotateY(-8deg) rotateX(18deg) scale(.96) !important; opacity:0 !important; transition:transform .65s cubic-bezier(.6,0,.8,.4), opacity .55s; z-index:5 !important; }
.stack.cycle .win::after{ display:none !important; }
@media (max-width:700px){ .stack.cycle{ height:240px; } .stack.cycle .win{ width:calc(100% - 40px); } }

/* Backoffice: secuencias animadas */
@media (prefers-reduced-motion: no-preference){
  [data-motion-sequences] .htl::before{ transform-origin:left; transform:scaleX(0); transition:transform 1.6s cubic-bezier(.2,.7,.2,1); }
  [data-motion-sequences] .htl.play::before{ transform:scaleX(1); }
  [data-motion-sequences] .htl > li{ opacity:0; transform:translateY(22px); transition:opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
  [data-motion-sequences] .htl.play > li{ opacity:1; transform:none; }
  [data-motion-sequences] .htl.play > li:nth-child(2){ transition-delay:.35s; } [data-motion-sequences] .htl.play > li:nth-child(3){ transition-delay:.7s; } [data-motion-sequences] .htl.play > li:nth-child(4){ transition-delay:1.05s; }
  [data-motion-sequences] .htl > li::before{ transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
  [data-motion-sequences] .htl.play > li::before{ transform:scale(1); }
  [data-motion-sequences] .htl.play > li:nth-child(2)::before{ transition-delay:.45s; } [data-motion-sequences] .htl.play > li:nth-child(3)::before{ transition-delay:.8s; } [data-motion-sequences] .htl.play > li:nth-child(4)::before{ transition-delay:1.15s; }
  [data-motion-sequences] .htl.play > li:first-child::before{ animation:boPulse 2.4s 1.6s infinite; }
  @keyframes boPulse{ 0%,100%{ box-shadow:0 0 18px rgba(66,193,72,.45); } 50%{ box-shadow:0 0 0 10px rgba(66,193,72,0), 0 0 30px rgba(66,193,72,.7); } }
  [data-motion-sequences] .tbl .row, [data-motion-sequences] .tbl tbody tr{ opacity:0; transform:translateX(-16px); transition:opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
  [data-motion-sequences] .duo.play .tbl .row, [data-motion-sequences] .duo.play .tbl tbody tr, [data-motion-sequences] .tbl.play .row, [data-motion-sequences] .tbl.play tbody tr{ opacity:1; transform:none; }
  [data-motion-sequences] .duo.play .tbl .row:nth-child(3), [data-motion-sequences] .duo.play tbody tr:nth-child(2){ transition-delay:.18s; }
  [data-motion-sequences] .duo.play .tbl .row:nth-child(4), [data-motion-sequences] .duo.play tbody tr:nth-child(3){ transition-delay:.36s; }
  [data-motion-sequences] .bento .b{ opacity:0; transform:translateY(20px) scale(.98); transition:opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1); }
  [data-motion-sequences] .bento.play .b{ opacity:1; transform:none; }
  [data-motion-sequences] .bento.play .b:nth-child(2){ transition-delay:.12s; } [data-motion-sequences] .bento.play .b:nth-child(3){ transition-delay:.24s; }
  [data-motion-sequences] .bento.play .b:nth-child(4){ transition-delay:.36s; } [data-motion-sequences] .bento.play .b:nth-child(5){ transition-delay:.48s; }
  [data-motion-sequences] .hist div{ opacity:0; transform:translateX(12px); transition:opacity .5s, transform .5s; }
  [data-motion-sequences] .bento.play .hist div{ opacity:1; transform:none; }
  [data-motion-sequences] .bento.play .hist div:nth-of-type(2){ transition-delay:.7s; } [data-motion-sequences] .bento.play .hist div:nth-of-type(3){ transition-delay:.9s; } [data-motion-sequences] .bento.play .hist div:nth-of-type(1){ transition-delay:.5s; }
  [data-motion-sequences] .nodes path{ stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset 1.6s .5s ease; }
  [data-motion-sequences] .bento.play .nodes path{ stroke-dashoffset:0; }
  [data-motion-sequences] .check svg path{ stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .8s 1s ease; }
  [data-motion-sequences] .bento.play .check svg path{ stroke-dashoffset:0; }
  [data-motion-sequences] .oval{ animation:boOval 5s ease-in-out infinite; }
  @keyframes boOval{ 50%{ transform:rotate(-2deg) scale(1.04); border-color:var(--green); } }
}

/* ===== Zcasino: escenario de aliados ===== */
.ally{ display:grid; gap:18px; }
@media (min-width:900px){ .ally{ grid-template-columns:.85fr 1.15fr; gap:24px; align-items:stretch; } }
.al-tabs{ display:grid; gap:10px; }
.al-tab{ position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--bg); color:var(--text); text-align:left; cursor:pointer; transition:border-color .3s, background .3s, transform .3s; }
.al-tab:hover{ border-color:rgba(66,193,72,.5); }
.al-tab[aria-selected="true"]{ border-color:var(--green); background:radial-gradient(90% 120% at 0% 50%, rgba(66,193,72,.16), transparent 70%), var(--bg); transform:translateX(6px); }
.al-n{ font:800 1.6rem/1 var(--display); color:var(--faint); transition:color .3s; } .al-tab[aria-selected="true"] .al-n{ color:var(--green); }
.al-t b{ display:block; font:800 1.25rem/1.1 var(--display); } .al-t small{ display:block; margin-top:4px; color:var(--muted); font-size:.85rem; }
.al-bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--green); transform-origin:left; transform:scaleX(0); }
.al-tab.run .al-bar{ animation:alBar 5s linear forwards; }
@keyframes alBar{ to{ transform:scaleX(1); } }
.al-stage{ position:relative; min-height:300px; border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.45); overflow:hidden;
  background:radial-gradient(70% 90% at 100% 0%, rgba(66,193,72,.2), transparent 60%), repeating-linear-gradient(115deg, transparent 0 46px, rgba(66,193,72,.05) 46px 92px), var(--bg); }
.al-p{ position:relative; padding:34px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.al-big{ position:absolute; left:20px; top:6px; font:900 clamp(3rem,7vw,5.6rem)/1 var(--display); color:transparent; -webkit-text-stroke:1.5px rgba(66,193,72,.35); white-space:nowrap; letter-spacing:-.02em; pointer-events:none; }
.al-p h3{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin:6px 0 10px; }
.al-d{ color:var(--muted); max-width:46ch; }
.al-h{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.al-h span{ padding:8px 12px; border-radius:999px; background:var(--green); color:var(--green-ink); font:700 .82rem/1 var(--display); }
.al-p.in .al-big{ animation:alBig .9s cubic-bezier(.2,.7,.2,1) both; }
.al-p.in .pt-role, .al-p.in h3, .al-p.in .al-d{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) both; }
.al-p.in h3{ animation-delay:.08s; } .al-p.in .al-d{ animation-delay:.16s; }
.al-p.in .al-h span{ animation:alChip .5s cubic-bezier(.3,1.4,.5,1) both; }
.al-p.in .al-h span:nth-child(2){ animation-delay:.1s; } .al-p.in .al-h span:nth-child(3){ animation-delay:.2s; }
@keyframes alBig{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:none; } }
@keyframes alChip{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }
.studio-mq{ margin-top:36px; } .studio-mq > p{ color:var(--faint); font-size:.95rem; margin-bottom:12px; }
.smq{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.smq-track{ display:flex; align-items:center; gap:22px; width:max-content; animation:zmarq 30s linear infinite; }
.smq-track span{ font:800 clamp(1.1rem,2vw,1.5rem)/1 var(--display); color:var(--text); white-space:nowrap; }
.smq-track i{ font-style:normal; color:var(--green); }
.studio-mq:hover .smq-track{ animation-play-state:paused; }
/* ===== Zsports: aliado único con movimiento ===== */
.solo{ position:relative; overflow:hidden; padding:34px 34px 0; border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.45);
  background:radial-gradient(70% 90% at 100% 0%, rgba(66,193,72,.2), transparent 60%), var(--bg); min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; }
.solo h3{ font-size:clamp(2rem,3.6vw,2.8rem); margin:4px 0 14px; }
.solo .al-big{ animation:alBig 1s cubic-bezier(.2,.7,.2,1) both; }
.solo-live{ position:absolute; top:20px; right:20px; display:inline-flex; min-height:28px; align-items:center; justify-content:center; gap:7px; padding:0 10px; border-radius:999px; background:#c62828; color:#fff; font:800 .72rem/1 var(--display); letter-spacing:.1em; }
.solo-live i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:liveBlink 1.2s infinite; }
@keyframes liveBlink{ 50%{ opacity:.2; } }
.solo-rot{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.solo-lbl{ font:700 .72rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.solo-words{ position:relative; height:2.2rem; flex:1; overflow:hidden; }
.solo-words b{ position:absolute; left:0; top:0; font:800 clamp(1.4rem,2.6vw,1.9rem)/2.2rem var(--display); color:var(--green); opacity:0; transform:translateY(100%); transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s; white-space:nowrap; }
.solo-words b.on{ opacity:1; transform:none; } .solo-words b.off{ opacity:0; transform:translateY(-100%); }
.solo-mq{ margin:0 -34px; padding:14px 0; border-top:1px solid var(--line-strong); background:var(--green); mask-image:none; -webkit-mask-image:none; }
.solo-mq .smq-track{ animation-duration:24s; } .solo-mq span{ color:#000; font-size:1rem; } .solo-mq i{ color:#000; }
@media (prefers-reduced-motion: reduce){ .smq-track, .al-tab.run .al-bar{ animation:none !important; } }

/* ===== Selector de tema ===== */
.theme-wrap{ position:relative; }
.theme-btn{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:none; color:var(--text); cursor:pointer; }
.theme-btn:hover{ border-color:var(--green); color:var(--green); }
.theme-btn svg, .theme-menu svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ti{ display:none; } html[data-mode="dark"] .ti-dark, html[data-mode="light"] .ti-light, html[data-mode="auto"] .ti-auto{ display:grid; }
.theme-wrap.open .theme-menu{ opacity:1; visibility:visible; transform:none; }
.theme-menu{ min-width:200px; } .theme-menu button{ gap:10px !important; }

/* ===== Tema claro ===== */
html[data-theme="light"]{ color-scheme:light;
  --bg:#F2F3F2; --surface:#FFFFFF; --surface-2:#F7F8F7; --line:#DCE1DC; --line-strong:#C3CBC4;
  --text:#0B0F0C; --muted:#465049; --faint:#6B766D; --green:#23872B; --green-soft:rgba(35,135,43,.12); --green-ink:#FFFFFF; }
html[data-theme="light"] body{ background:var(--bg); }
html[data-theme="light"] .nav, html[data-theme="light"] body::before{ background:rgba(242,243,242,.9) !important; }
html[data-theme="light"] .btn-primary{ color:#fff; } html[data-theme="light"] .btn-primary:hover{ background:#1c7323; }
html[data-theme="light"] .rb, html[data-theme="light"] .prov-band.logos, html[data-theme="light"] .solo-mq{ background:#42C148 !important; }
html[data-theme="light"] .ai-art{ background:radial-gradient(circle at 70% 50%, rgba(35,135,43,.18), transparent 60%), radial-gradient(var(--line-strong) 1px, transparent 1.2px) 0 0/16px 16px, var(--surface-2); }
html[data-theme="light"] .ai-nodes circle{ fill:var(--surface); }
html[data-theme="light"] .zb-head, html[data-theme="light"] .zb-form{ background:var(--surface-2); }
html[data-theme="light"] .zb-form input{ background:var(--surface); }
html[data-theme="light"] .zb-btn, html[data-theme="light"] .rv-knob, html[data-theme="light"] .rv-hint{ background:var(--surface); }
html[data-theme="light"] .zb-qa{ background:var(--surface) !important; }
html[data-theme="light"] .form.lead input:not([type=checkbox]), html[data-theme="light"] .form.lead select, html[data-theme="light"] .form.lead textarea{ background:rgba(255,255,255,.92) !important; border-color:var(--line-strong) !important; }
html[data-theme="light"] .form.lead ::placeholder{ color:#7a857c; }
html[data-theme="light"] .btn-send{ background:#0B0F0C; color:#fff; } html[data-theme="light"] .btn-send:hover{ background:var(--green); }
html[data-theme="light"] .reach input, html[data-theme="light"] .privacy input{ border-color:#7a857c; }
html[data-theme="light"] .form-wm{ opacity:.14 !important; filter:none !important; }
html[data-theme="light"] .dropdown, html[data-theme="light"] .lang-menu{ box-shadow:0 20px 40px rgba(0,0,0,.12); }
html[data-theme="light"] .acc-p{ background:#42C148 !important; }
html[data-theme="light"] .hero-art::after{ background:linear-gradient(180deg, transparent, var(--bg)); }
html[data-theme="light"] .lead-modal::backdrop{ background:rgba(11,15,12,.45); }
html[data-theme="light"] .lm-close, html[data-theme="light"] .tn{ background:var(--surface); }
html[data-theme="light"] .rb-track span, html[data-theme="light"] .rb-track i{ color:#000; }
html[data-theme="light"] .member .photo{ background:#42C148 !important; }
html[data-theme="light"] .al-h span, html[data-theme="light"] .svc-i, html[data-theme="light"] .m-bar{ color:#fff; }
html[data-theme="light"] .ba-switch button[aria-pressed="true"]{ color:#fff; }
html[data-theme="light"] .tag b{ color:#fff; }
html[data-theme="light"] .lg-logo svg, html[data-theme="light"] .pasion-img, html[data-theme="light"] .control-side img, html[data-theme="light"] .about-img{ filter:none; }
html[data-theme="light"] .win-bar{ background:#1a231c; }
@media (min-width:900px){ .ally{ align-items:start !important; } .al-stage{ min-height:100%; height:100%; } .al-tabs{ align-self:stretch; align-content:space-between; } }
.al-tab{ padding:22px 22px !important; }

/* Zcasino aliados: diseño compacto (pestañas arriba, escenario corto debajo) */
.ally{ grid-template-columns:1fr !important; gap:14px !important; align-items:stretch !important; }
.al-tabs{ grid-template-columns:repeat(3,minmax(0,1fr)); align-content:stretch !important; }
.al-tab{ padding:16px 18px !important; gap:12px !important; }
.al-tab[aria-selected="true"]{ transform:translateY(-3px) !important; }
.al-n{ font-size:1.3rem !important; } .al-t b{ font-size:1.05rem !important; } .al-t small{ font-size:.78rem !important; }
.al-stage{ min-height:0 !important; height:auto !important; }
.al-p{ display:grid !important; grid-template-columns:1fr 1.2fr; gap:10px 40px; align-items:end; padding:30px 32px !important; min-height:230px; }
.al-p .pt-role{ grid-column:1; margin:0; align-self:end; }
.al-p h3{ grid-column:1; margin:0 !important; }
.al-p .al-d{ grid-column:2; grid-row:1 / span 2; align-self:end; }
.al-p .al-h{ grid-column:1 / -1; margin-top:14px !important; }
.al-big{ top:auto !important; bottom:-10px; left:auto !important; right:20px; font-size:clamp(3rem,8vw,6rem) !important; }
@media (max-width:760px){ .al-tabs{ grid-template-columns:1fr; } .al-p{ grid-template-columns:1fr; } .al-p .al-d{ grid-column:1; grid-row:auto; } }
.al-p[hidden]{ display:none !important; }

.al-tabs{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
@media (max-width:1000px){ .al-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ .al-tabs{ grid-template-columns:1fr !important; } }
.al-stats{ grid-column:2; display:flex; gap:34px; margin-top:6px; }
.al-stats b{ display:block; font:800 clamp(2rem,3.6vw,2.8rem)/1 var(--display); color:var(--green); font-variant-numeric:tabular-nums; }
.al-stats span{ display:block; margin-top:6px; font:700 .74rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.al-p .al-d{ grid-row:1 / span 2 !important; }
.al-p .al-stats{ grid-row:3; align-self:end; }
.al-p .al-h{ grid-column:1 !important; grid-row:3; align-self:end; margin-top:0 !important; }
@media (max-width:760px){ .al-stats{ grid-column:1; grid-row:auto !important; } .al-p .al-h{ grid-row:auto; } }
.al-big{ top:4px !important; bottom:auto !important; right:20px !important; -webkit-text-stroke:1.2px rgba(66,193,72,.22) !important; font-size:clamp(2.6rem,6vw,4.6rem) !important; }
.al-p{ padding-top:40px !important; }

/* Página de cada opción: entrada animada */
@media (prefers-reduced-motion: no-preference){
  .it-anim .it-hero .tag{ animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; }
  .it-anim #it-title{ animation:itTitle .8s cubic-bezier(.2,.7,.2,1) .08s both; }
  .it-anim #it-lead{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .25s both; }
  .it-anim .it-hero .btn-row{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .38s both; }
  .it-anim .it-art img{ animation:itArt 1s cubic-bezier(.2,.7,.2,1) .15s both, zfloat 6.5s ease-in-out 1.2s infinite; }
  .it-anim #it-points li{ animation:itCard .7s cubic-bezier(.2,.7,.2,1) both; }
  .it-anim #it-points li:nth-child(1){ animation-delay:.45s; } .it-anim #it-points li:nth-child(2){ animation-delay:.57s; }
  .it-anim #it-points li:nth-child(3){ animation-delay:.69s; } .it-anim #it-points li:nth-child(4){ animation-delay:.81s; }
  .it-anim #it-points .it-n{ display:inline-block; animation:itNum .6s cubic-bezier(.3,1.5,.5,1) both; }
  .it-anim #it-points li:nth-child(1) .it-n{ animation-delay:.6s; } .it-anim #it-points li:nth-child(2) .it-n{ animation-delay:.72s; }
  .it-anim #it-points li:nth-child(3) .it-n{ animation-delay:.84s; } .it-anim #it-points li:nth-child(4) .it-n{ animation-delay:.96s; }
  #it-points li{ transition:border-color .3s, transform .3s; } #it-points li:hover{ border-color:var(--green); transform:translateY(-4px); }
}
@keyframes itTitle{ from{ opacity:0; transform:translateY(30px); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes itArt{ from{ opacity:0; transform:scale(.85) rotate(-6deg); } to{ opacity:1; transform:none; } }
@keyframes itCard{ from{ opacity:0; transform:translateY(30px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes itNum{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:none; } }
#it-points .cnt{ color:var(--green); font-family:var(--display); font-variant-numeric:tabular-nums; }

/* Página de cada opción: tarjeta destacada que va rotando */
#it-points li{ position:relative; overflow:hidden; }
#it-points li::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
#it-points li.hl{ border-color:rgba(66,193,72,.6); box-shadow:0 0 30px rgba(66,193,72,.12); }
#it-points li.hl::after{ transform:scaleX(1); }
#it-points li.hl .it-n{ text-shadow:0 0 20px rgba(66,193,72,.6); }

/* Zcasino aliados: presentación vertical */
@media (min-width:900px){
  .ally{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important; gap:20px !important; align-items:stretch !important; }
  .al-tabs{ grid-template-columns:1fr !important; align-content:stretch !important; gap:10px !important; }
  .al-tab[aria-selected="true"]{ transform:translateX(8px) !important; }
}
.al-stage{ display:flex; }
.al-p{ display:flex !important; flex-direction:column; justify-content:flex-end; gap:0 !important; width:100%; padding:34px !important; min-height:360px !important; }
.al-p .pt-role{ order:1; } .al-p h3{ order:2; margin:6px 0 10px !important; } .al-p .al-d{ order:3; }
.al-p .al-stats{ order:4; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-strong); }
.al-p .al-h{ order:5; margin-top:18px !important; }
.al-big{ top:14px !important; left:28px !important; right:auto !important; }
.al-p{ align-items:flex-start !important; text-align:left; }
.al-p .al-stats{ align-self:stretch; }
.al-p > .pt-role, .al-p > h3, .al-p > .al-d, .al-p > .al-h{ align-self:flex-start !important; margin-left:0 !important; }

/* Z animada en el fondo del escenario de aliados */
.al-stage, .solo{ position:relative; isolation:isolate; }
.stage-wm{ width:min(420px,60%) !important; right:-40px !important; bottom:-60px !important; top:auto !important; left:auto !important; opacity:.16 !important; z-index:-1 !important; }
html[data-theme="light"] .stage-wm{ opacity:.12 !important; }

/* Proveedores: línea de tiempo horizontal fijada mientras se hace scroll */
@media (min-width:900px){
  .tl-mode .it-psec{ height:260vh; padding:0 !important; }
  .view.stk.tl-mode > .it-psec{ position:relative !important; top:auto !important; z-index:4 !important; }
  .view.stk.tl-mode > .it-psec > .stk-shade{ display:none; }
  .tl-mode .it-pin{ position:sticky; top:72px; height:calc(100vh - 72px); overflow:hidden; display:flex; align-items:center; }
  .tl-mode #it-points{ --prog:0; position:relative; display:grid !important; grid-template-columns:repeat(var(--n,4), 380px) !important; grid-template-rows:auto 70px auto; column-gap:60px; width:max-content; padding:0 6vw; transition:transform .12s linear; animation:none !important; }
  .tl-mode #it-points::before{ content:""; position:absolute; left:0; right:6vw; top:50%; height:2px; margin-top:-1px; background:var(--line-strong); }
  .tl-mode #it-points::after{ content:""; position:absolute; left:0; top:50%; height:2px; margin-top:-1px; width:calc((100% - 6vw) * var(--prog)); background:var(--green); box-shadow:0 0 14px rgba(66,193,72,.7); }
  .tl-mode #it-points li{ grid-row:1; align-self:end; background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; overflow:visible !important; opacity:.35; transform:translateY(10px); transition:opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1) !important; animation:none !important; }
  .tl-mode #it-points li:nth-child(even){ grid-row:3; align-self:start; }
  .tl-mode #it-points li:nth-child(1){ grid-column:1; } .tl-mode #it-points li:nth-child(2){ grid-column:2; } .tl-mode #it-points li:nth-child(3){ grid-column:3; } .tl-mode #it-points li:nth-child(4){ grid-column:4; } .tl-mode #it-points li:nth-child(5){ grid-column:5; }
  .tl-mode #it-points li.on{ opacity:1; transform:none; }
  .tl-mode #it-points li::after{ display:none !important; }
  .tl-mode #it-points .it-n{ font-size:.8rem !important; letter-spacing:.12em; animation:none !important; }
  .tl-mode #it-points h3{ font-size:1.5rem; margin:8px 0 8px; }
  .tl-mode .tl-dot{ position:absolute; left:0; width:38px; height:38px; border-radius:50%; border:2px solid var(--line-strong); background:var(--bg); display:grid; place-items:center; transition:background .4s, border-color .4s, box-shadow .4s; }
  .tl-mode #it-points li:nth-child(odd) .tl-dot{ bottom:-54px; } .tl-mode #it-points li:nth-child(even) .tl-dot{ top:-54px; }
  .tl-mode #it-points li.on .tl-dot{ background:var(--green); border-color:var(--green); box-shadow:0 0 0 6px rgba(66,193,72,.15), 0 0 24px rgba(66,193,72,.7); }
  .tl-mode .tl-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--faint); }
  .tl-mode #it-points li.on .tl-dot::after{ background:#000; }
}
.tl-dot{ display:none; } .tl-mode .tl-dot{ display:grid; }
@media (max-width:899px){ .tl-mode .tl-dot{ display:none; } }
@media (min-width:900px){
  .tl-mode #it-points{ row-gap:0 !important; }
  .tl-mode #it-points::before{ position:static !important; grid-row:2; grid-column:1 / -1; align-self:center; margin:0 !important; }
  .tl-mode #it-points::after{ position:static !important; grid-row:2; grid-column:1 / -1; align-self:center; justify-self:start; margin:0 !important; width:calc(100% * var(--prog)) !important; }
  .tl-mode #it-points li{ transform:none !important; }
  .tl-mode #it-points li:not(.on){ opacity:.3; }
}
@media (min-width:900px){ .tl-mode .it-psec{ height:var(--h,260vh) !important; } }
/* Fondo con la Z animada (como en los formularios) detrás de la línea de tiempo */
.it-psec{ position:relative; }
.it-pin{ position:relative; isolation:isolate; }
.tl-wm{ width:min(520px,55%) !important; right:0 !important; left:auto !important; top:auto !important; bottom:6% !important; opacity:.12 !important; z-index:-1 !important; }
.it-psec{ background:radial-gradient(60% 50% at 85% 70%, rgba(66,193,72,.10), transparent 70%), var(--surface) !important; }
@media (max-width:899px){ .tl-wm{ width:70% !important; bottom:0 !important; } }
html[data-theme="light"] .tl-wm{ opacity:.1 !important; }

/* ZPAM: estado, roles y caso de auditoría */
.bo-status{ display:inline-flex; align-items:center; gap:8px; margin:-18px 0 26px; padding:7px 12px; border-radius:999px; border:1px solid rgba(66,193,72,.5); color:var(--green); font:700 .8rem/1 var(--display); letter-spacing:.06em; text-transform:uppercase; }
.bo-status i{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:liveBlink 1.4s infinite; }
.bo-roles{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important; }
.bo-roles article{ padding:26px !important; }
.bo-roles .svc-i{ margin-bottom:14px; }
.bo-roles h3{ margin:0 0 6px !important; }
.panel.case{ background:radial-gradient(90% 90% at 100% 0%, rgba(66,193,72,.16), transparent 70%), var(--surface-2); border-color:rgba(66,193,72,.4); display:flex; flex-direction:column; justify-content:center; }
.panel.case h3{ font-size:1.4rem; margin:6px 0 12px; } .panel.case p:not(.tag){ color:var(--muted); }

/* Página de opción: "Lo que ganas" y "En la práctica" */
.it-ben-sec{ padding-block:clamp(56px,7vw,96px); }
.it-benefits{ display:grid; gap:16px; }
@media (min-width:800px){ .it-benefits{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.it-benefits article{ position:relative; overflow:hidden; padding:30px 28px; border-radius:var(--radius-lg); border:1px solid var(--line-strong);
  background:radial-gradient(90% 80% at 100% 0%, rgba(66,193,72,.12), transparent 70%), var(--surface); }
.it-benefits article::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--green); transform:scaleX(.2); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.it-benefits article:hover::before{ transform:scaleX(1); }
.ib-n{ font:700 .75rem/1 var(--display); letter-spacing:.14em; color:var(--faint); }
.it-benefits b{ display:block; margin:14px 0 8px; font:800 clamp(1.9rem,3.4vw,2.7rem)/1.02 var(--display); color:var(--green); letter-spacing:-.01em; }
.it-benefits p{ color:var(--muted); font-size:1.02rem; }
.it-case{ position:relative; isolation:isolate; overflow:hidden; display:grid; gap:24px; align-items:center; padding:clamp(28px,4vw,48px); border-radius:20px; border:1px solid rgba(66,193,72,.4);
  background:repeating-linear-gradient(115deg, transparent 0 46px, rgba(66,193,72,.05) 46px 92px), var(--bg); }
@media (min-width:860px){ .it-case{ grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr); } .ic-col{ min-width:0; } }
.case-wm{ width:min(380px,50%) !important; right:-50px !important; left:auto !important; top:auto !important; bottom:-70px !important; opacity:.14 !important; z-index:-1 !important; }
.ic-col h3{ font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.25; margin-top:8px; }
.ic-s h3{ color:var(--muted); }
.ic-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #6b3b3b; color:#d47a7a; margin-bottom:16px; }
.ic-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-ico.ok2{ border:0; background:var(--green); color:var(--green-ink); }
.ic-s .mini{ color:#d47a7a; }
.ic-arrow{ position:relative; height:44px; display:grid; place-items:center; color:var(--green); }
.ic-arrow span{ position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg, transparent, var(--green)); }
.ic-arrow svg{ position:relative; width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; background:var(--bg); border-radius:50%; padding:2px; }
@media (max-width:859px){ .ic-arrow{ justify-self:center; transform:rotate(90deg); width:60px; } }
@media (prefers-reduced-motion: no-preference){
  .ic-arrow svg{ animation:icMove 1.8s ease-in-out infinite; }
  @keyframes icMove{ 50%{ transform:translateX(10px); } }
  .it-anim .it-benefits article{ animation:itCard .7s cubic-bezier(.2,.7,.2,1) both; }
  .it-anim .it-benefits article:nth-child(2){ animation-delay:.12s; } .it-anim .it-benefits article:nth-child(3){ animation-delay:.24s; } .it-anim .it-benefits article:nth-child(4){ animation-delay:.36s; } .it-anim .it-benefits article:nth-child(5){ animation-delay:.48s; } .it-anim .it-benefits article:nth-child(6){ animation-delay:.6s; }
}
html[data-theme="light"] .ic-arrow svg{ background:var(--bg); }
/* Nombres de personas en Manrope: en FX Ambasans la "K" se confunde con "H" */
.member h3, .tm-info h2, .tm-list b{ font-family:var(--body) !important; font-weight:800 !important; letter-spacing:-.01em; }

/* ZPAM: expediente, flujos y accesos */
.bo-head .g{ color:var(--green); }
.bo-player{ display:grid; gap:40px; align-items:center; }
@media (min-width:980px){ .bo-player{ grid-template-columns:1fr 1fr; gap:56px; } }
.bo-plist{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
@media (min-width:640px){ .bo-plist{ grid-template-columns:1fr 1fr; } }
.bo-plist li{ display:grid; grid-template-columns:44px 1fr; gap:12px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.bo-plist .svc-i{ width:44px; height:44px; margin:0; } .bo-plist h3{ font-size:1.05rem; margin-bottom:4px; } .bo-plist p{ color:var(--muted); font-size:.92rem; }
.bo-pimg img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--line-strong); box-shadow:0 30px 60px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: no-preference){ .bo-pimg img{ animation:zfloat 8s ease-in-out infinite; } }
.flow-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; position:relative; }
@media (min-width:860px){ .flow-steps{ grid-template-columns:repeat(3,1fr); gap:60px; } .flow-steps::before{ content:""; position:absolute; left:16%; right:16%; top:44px; height:2px; background:var(--line-strong); }
  .flow-steps::after{ content:""; position:absolute; left:16%; top:44px; height:2px; width:68%; background:linear-gradient(90deg, var(--green) 0 30%, transparent 30%); background-size:200% 100%; animation:flowRun 3s linear infinite; } }
@keyframes flowRun{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.flow-steps li{ position:relative; text-align:center; padding:0 10px; }
.fl-i{ position:relative; z-index:1; width:88px; height:88px; margin:0 auto 18px; border-radius:50%; border:2px solid var(--green); background:var(--bg); display:grid; place-items:center; color:var(--green); box-shadow:0 0 0 8px rgba(66,193,72,.08); }
.fl-i svg{ width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.flow-steps b{ display:block; font:800 1.3rem/1.2 var(--display); margin-bottom:6px; } .flow-steps p{ color:var(--muted); }
@media (prefers-reduced-motion: no-preference){ .flow-steps li .fl-i{ animation:flowPulse 3s ease-in-out infinite; } .flow-steps li:nth-child(2) .fl-i{ animation-delay:1s; } .flow-steps li:nth-child(3) .fl-i{ animation-delay:2s; } }
@keyframes flowPulse{ 0%,100%{ box-shadow:0 0 0 8px rgba(66,193,72,.08); } 15%{ box-shadow:0 0 0 14px rgba(66,193,72,.2), 0 0 30px rgba(66,193,72,.6); background:var(--green); color:var(--green-ink); } 35%{ background:var(--bg); color:var(--green); } }
.rep-note{ margin:22px 0 0; padding:16px 20px; border-left:3px solid var(--green); background:var(--bg); border-radius:0 10px 10px 0; color:var(--muted); }
.rep-note b{ color:var(--text); font-family:var(--display); }
.aud-grid{ margin:8px 0 18px; }
@media (min-width:1040px){ .aud-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
#bo-aud h2 .g{ color:var(--green); }

.nav .btn-primary{ padding:9px 14px !important; gap:8px !important; font-size:.88rem !important; }
.nav .btn-primary svg{ width:13px; height:13px; }

/* Carrusel de casos */
.ic-slider{ position:relative; overflow:hidden; border-radius:20px; touch-action:pan-y; }
.ic-track{ display:flex; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.ic-track > .it-case{ flex:0 0 100%; }
.ic-ctrl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.ic-slider.single .ic-ctrl{ display:none; }
.ic-dots{ display:flex; gap:8px; }
.ic-dots button{ width:10px; height:10px; border-radius:999px; border:0; background:var(--line-strong); cursor:pointer; transition:width .3s, background .3s; padding:0; }
.ic-dots button.on{ width:28px; background:var(--green); }
.ic-ctrl .tn{ width:40px; height:40px; }
@media (max-width:600px){
  .it-case{ gap:16px; padding:22px; border-radius:18px; }
  .ic-col{ min-width:0; }
  .ic-col h3{ overflow-wrap:anywhere; }
  .ic-ctrl .tn{ width:44px; height:44px; }
}
/* Beneficios: seis tarjetas, más descriptivas */
.it-benefits:has(> article:nth-child(4)) b{ font-size:clamp(1.5rem,2.4vw,2rem) !important; }
.it-benefits article p{ line-height:1.5; }
@media (prefers-reduced-motion: no-preference){
}

/* ZTools PAM: estado de cada herramienta */
.hs-grid{ display:grid; gap:16px; } @media (min-width:800px){ .hs-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.hs{ padding:26px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); }
.hs h3{ font-size:1.6rem; margin:14px 0 8px; } .hs p{ color:var(--muted); }
.hs-st{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; font:700 .74rem/1 var(--display); letter-spacing:.06em; text-transform:uppercase; }
.hs-st i{ width:7px; height:7px; border-radius:50%; }
.hs.on .hs-st{ color:var(--green); border:1px solid rgba(66,193,72,.5); } .hs.on .hs-st i{ background:var(--green); animation:liveBlink 1.4s infinite; }
.hs.soon .hs-st{ color:#e8a83a; border:1px solid rgba(232,168,58,.5); } .hs.soon .hs-st i{ background:#e8a83a; }
.hs.on{ border-color:rgba(66,193,72,.35); }
/* Zcasino: apartados de la vitrina */
.zc-show{ display:grid; gap:36px; align-items:center; } @media (min-width:980px){ .zc-show{ grid-template-columns:1fr 1fr; gap:56px; } }
.zc-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.zc-tiles li{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); transition:border-color .3s, transform .3s; }
.zc-tiles li:last-child{ grid-column:1 / -1; } .zc-tiles li:hover{ border-color:var(--green); transform:translateY(-3px); }
.zc-tiles .svc-i{ margin:0; flex:none; } .zc-tiles b{ font:800 1.1rem/1.2 var(--display); }
@media (prefers-reduced-motion: no-preference){ .zc-tiles li{ animation:zcPulse 6s ease-in-out infinite; } .zc-tiles li:nth-child(2){ animation-delay:1.2s; } .zc-tiles li:nth-child(3){ animation-delay:2.4s; } .zc-tiles li:nth-child(4){ animation-delay:3.6s; } .zc-tiles li:nth-child(5){ animation-delay:4.8s; } }
@keyframes zcPulse{ 0%,12%,100%{ border-color:var(--line-strong); } 6%{ border-color:var(--green); box-shadow:0 0 24px rgba(66,193,72,.25); } }

/* ===== ZTools PAM dinámico ===== */
.zh-rot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 6px; font:700 1.05rem/1 var(--display); color:var(--muted); }
.zh-words{ position:relative; display:inline-block; height:1.6em; min-width:9ch; overflow:hidden; }
.zh-words b{ position:absolute; left:0; top:0; line-height:1.6em; color:var(--green); font-size:1.25rem; opacity:0; transform:translateY(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s; white-space:nowrap; }
.zh-words b.on{ opacity:1; transform:none; } .zh-words b.off{ opacity:0; transform:translateY(-100%); }
@media (prefers-reduced-motion: no-preference){ .zh-float{ animation:zfloat 7s ease-in-out infinite; } }
.hubx{ display:grid; gap:24px; align-items:center; }
@media (min-width:980px){ .hubx{ grid-template-columns:1.1fr .9fr; gap:40px; } }
.hx-map{ position:relative; aspect-ratio:400/320; max-width:560px; width:100%; margin:0 auto; }
.hx-svg{ position:absolute; inset:0; width:100%; height:100%; }
.hx-l{ stroke:var(--line-strong); stroke-width:2; fill:none; stroke-dasharray:6 8; transition:stroke .4s; }
.hx-l.on{ stroke:var(--green); stroke-width:3; filter:drop-shadow(0 0 6px rgba(66,193,72,.7)); }
@media (prefers-reduced-motion: no-preference){ .hx-l{ animation:hxFlow 1.2s linear infinite; } .hx-l.on{ animation-duration:.6s; } }
@keyframes hxFlow{ to{ stroke-dashoffset:-28; } }
.hx-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:28%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; gap:6px;
  background:radial-gradient(circle, rgba(66,193,72,.25), var(--bg) 70%); border:2px solid var(--green); box-shadow:0 0 0 10px rgba(66,193,72,.08), 0 0 40px rgba(66,193,72,.35); }
.hx-core svg{ width:42%; height:auto; } .hx-core b{ font:800 .8rem/1 var(--display); }
@media (prefers-reduced-motion: no-preference){ .hx-core{ animation:hxCore 3s ease-in-out infinite; } }
@keyframes hxCore{ 50%{ box-shadow:0 0 0 18px rgba(66,193,72,0), 0 0 60px rgba(66,193,72,.5); } }
.hx-node{ position:absolute; width:24%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); cursor:pointer; transform:translate(-50%,-50%); transition:border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.hx-node.hx-tl{ left:20%; top:18.75%; } .hx-node.hx-tr{ left:80%; top:18.75%; } .hx-node.hx-bl{ left:20%; top:81.25%; } .hx-node.hx-br{ left:80%; top:81.25%; }
.hx-node b{ font:800 .95rem/1 var(--display); }
.hx-ic{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--bg); color:var(--green); border:1px solid var(--line-strong); }
.hx-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hx-node.on{ border-color:var(--green); transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 30px rgba(66,193,72,.3); }
.hx-node.on .hx-ic{ background:var(--green); color:var(--green-ink); border-color:var(--green); }
.hx-panel{ position:relative; overflow:hidden; min-height:260px; padding:30px; border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.4);
  background:radial-gradient(80% 80% at 100% 0%, rgba(66,193,72,.16), transparent 70%), var(--bg); }
.hx-p h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:14px 0 8px; } .hx-sub{ color:var(--muted); font-size:1.05rem; }
.hx-p .al-h{ margin:18px 0; } .hx-p .go{ display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:700; text-decoration:none; }
.hx-p .go svg{ width:12px; height:12px; }
.hx-p.in > *{ animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; } .hx-p.in > *:nth-child(2){ animation-delay:.06s; } .hx-p.in > *:nth-child(3){ animation-delay:.12s; } .hx-p.in > *:nth-child(4){ animation-delay:.18s; } .hx-p.in > *:nth-child(5){ animation-delay:.24s; }
.hx-p.in .al-h span{ animation:alChip .5s cubic-bezier(.3,1.4,.5,1) both; } .hx-p.in .al-h span:nth-child(2){ animation-delay:.1s; } .hx-p.in .al-h span:nth-child(3){ animation-delay:.2s; }
.hx-bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--green); transform-origin:left; transform:scaleX(0); }
.hx-bar.run{ animation:alBar 4.2s linear forwards; }
@media (max-width:560px){ .hx-node{ width:30%; padding:10px 4px; } .hx-node b{ font-size:.8rem; } .hx-ic{ width:32px; height:32px; } }
/* Estado: barra de avance animada */
.hs{ position:relative; overflow:hidden; }
.hs::after{ content:""; position:absolute; left:0; bottom:0; height:4px; width:100%; }
.hs.on::after{ background:var(--green); transform-origin:left; animation:hsFull 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hs.soon::after{ background:repeating-linear-gradient(115deg, #e8a83a 0 12px, rgba(232,168,58,.35) 12px 24px); background-size:200% 100%; animation:hsSoon 1.6s linear infinite; }
@keyframes hsFull{ from{ transform:scaleX(0); } } @keyframes hsSoon{ to{ background-position:-48px 0; } }
/* Capa que no se ve: íconos con vida */
@media (prefers-reduced-motion: no-preference){
  #zh-layer .svc:nth-child(1) .svc-i{ animation:hxPlug 2.4s ease-in-out infinite; }
  #zh-layer .svc:nth-child(2) .svc-i{ animation:hxBolt 1.8s steps(1) infinite; }
  #zh-layer .svc:nth-child(3) .svc-i{ animation:zfloat 4s ease-in-out infinite; }
}
@keyframes hxPlug{ 50%{ transform:translateY(-4px); box-shadow:0 0 18px rgba(66,193,72,.6); } }
@keyframes hxBolt{ 0%,100%{ opacity:1; } 8%{ opacity:.4; } 12%{ opacity:1; } 16%{ opacity:.5; } }
.hx-p .hs-st.on{ color:var(--green); border:1px solid rgba(66,193,72,.5); } .hx-p .hs-st.on i{ background:var(--green); animation:liveBlink 1.4s infinite; }
.hx-p .hs-st.soon{ color:#e8a83a; border:1px solid rgba(232,168,58,.5); } .hx-p .hs-st.soon i{ background:#e8a83a; }
.hx-node{ height:auto !important; }

/* ===== Sobre nosotros dinámico ===== */
.about-art{ position:relative; }
.about-badge{ position:absolute; z-index:2; right:2%; top:-4%; width:clamp(110px,14vw,170px); height:auto; }
.about-badge text{ font:800 15px var(--display); letter-spacing:3.2px; fill:var(--green); }
@media (prefers-reduced-motion: no-preference){
  .about-badge text{ animation:abSpin 16s linear infinite; transform-origin:100px 100px; }
  .about-img{ animation:zfloat 7s ease-in-out infinite; }
  [data-view=nosotros] .p-hero .slogan{ animation:abGlow 3s ease-in-out infinite; }
}
@keyframes abSpin{ to{ transform:rotate(360deg); } }
@keyframes abGlow{ 50%{ text-shadow:0 0 24px rgba(66,193,72,.7); } }
.kpi-row b.kc{ font-variant-numeric:tabular-nums; }
.kpi-row > div{ position:relative; overflow:hidden; padding-bottom:16px; transition:border-color .3s, transform .3s; }
.kpi-row > div::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kpi-row > div.seen::after, .kpi-row > div:hover::after{ transform:scaleX(1); }
.kpi-row > div:hover{ transform:translateY(-4px); }
.values article{ position:relative; overflow:hidden; transition:border-color .4s, transform .4s, box-shadow .4s; }
.values article .vn{ transition:color .4s, transform .4s; display:inline-block; }
.values article.hl, .values article:hover{ border-color:var(--green); transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 30px rgba(66,193,72,.15); }
.values article.hl .vn, .values article:hover .vn{ color:var(--green); transform:scale(1.15); }
.values article::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(66,193,72,.12) 50%, transparent 70%); transform:translateX(-100%); }
.values article.hl::before{ animation:abSweep 1.4s ease; }
@keyframes abSweep{ to{ transform:translateX(100%); } }
.about-band{ overflow:hidden; background:var(--green); padding:12px 0; transform:rotate(-1.5deg); margin:10px -2vw; }
.about-band .rb-track{ display:flex; gap:18px; width:max-content; align-items:center; animation:zmarq 40s linear infinite; }
.about-band span{ font:800 clamp(1rem,1.6vw,1.35rem)/1 var(--display); color:#000; text-transform:uppercase; white-space:nowrap; }
.about-band i{ font-style:normal; color:#000; }
.about-cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta-wm{ width:min(320px,40%) !important; right:4% !important; left:auto !important; top:auto !important; bottom:0 !important; opacity:.14 !important; z-index:-1 !important; }
@media (prefers-reduced-motion: reduce){ .about-band .rb-track{ animation:none; } }
.p-cta{ position:relative; overflow:hidden; isolation:isolate; }
/* Espaciado entre secciones más equilibrado */
section{ padding-block:clamp(56px, 7vw, 96px); }
.reference-site[data-reference-view]:not([data-reference-view='home']) > .view:not([data-view='home']){ padding-top:0 !important; }
.p-hero{ padding-block:clamp(64px, 8vw, 110px) !important; }
@media (max-width:700px){ section{ padding-block:48px; } }
/* Menú móvil: se puede desplazar con los productos abiertos */
.mobile-menu.open{ position:static; height:auto; max-height:none; overflow:visible; padding:12px 0 28px; background:var(--bg); }
.mobile-menu .acc-in{ grid-template-columns:1fr !important; gap:14px !important; }
.mobile-menu .acc-l a{ white-space:normal; line-height:1.25; }
/* "En la práctica": tarjetas sin franjas */
.it-case{ background:radial-gradient(70% 90% at 100% 0%, rgba(66,193,72,.12), transparent 70%), var(--bg) !important; }
/* Encabezados de página: proporciones más compactas */
.p-h1{ font-size:clamp(2.3rem,4.2vw,3.6rem) !important; line-height:1.04 !important; }
@media (min-width:980px){ .p-hero-grid{ grid-template-columns:1fr 1fr !important; gap:56px !important; } }
.p-hero-img{ width:110% !important; max-width:none; margin-right:-5%; }
@media (max-width:979px){ .p-hero-img{ width:100% !important; margin:0; } }
.p-hero .lead{ max-width:52ch; }
html.mm-open .zbot{ display:none; }
/* Menú móvil: forma parte de la página, así se desplaza con el scroll normal del navegador */
html.mm-open .nav{ position:relative !important; }
html.mm-open .nav, html.mm-open .nav *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html.mm-open body::before{ display:none; }
/* Encabezados de página: menos espacio bajo la barra */
.p-hero{ padding-top:clamp(16px,2vw,24px) !important; padding-bottom:clamp(40px,5vw,72px) !important; }
.reference-site[data-reference-view='item'] .it-hero,
.reference-site[data-reference-view='backoffice'] [data-view='backoffice'] > .p-hero,
.product-page .product-hero{ padding-top:clamp(16px,2vw,24px) !important; }
.reference-site[data-reference-view='item'] .it-hero{ padding-block:clamp(16px,2vw,24px) clamp(40px,5vw,72px) !important; }
.p-hero-img, .it-art img{ width:100% !important; max-width:100% !important; margin:0 auto !important; max-height:min(480px,58vh); object-fit:contain; display:block; }
.it-hero{ padding-top:clamp(28px,3.5vw,52px) !important; }
/* Botón cerrar siempre por encima del contenido de las ventanas */
.lm-close{ z-index:10 !important; }
.tm-box #tm-body{ position:relative; z-index:1; }
@media (max-width:520px){ .tm-box{ padding-top:64px !important; } }
/* ZTools PAM: palabra rotativa alineada con "Conectado a tu BackOffice:" */
.zh-rot{ align-items:center !important; line-height:1.3 !important; gap:8px !important; }
.zh-words{ height:1.3em !important; display:inline-flex !important; align-items:center; vertical-align:middle; }
.zh-words b{ font-size:1em !important; line-height:1.3em !important; top:0 !important; }
/* Zcasino: escenario de aliados sin franjas */
.al-stage{ background:radial-gradient(70% 90% at 100% 0%, rgba(66,193,72,.16), transparent 60%), var(--bg) !important; }

/* Menú Productos y servicios: versión más compacta */
.dropdown.mega{ width:min(470px, calc(100vw - 40px)) !important; }
.acc-h{ padding:9px 14px !important; font-size:.86rem !important; }
.acc-h .az{ width:15px !important; height:13px !important; }
.acc-g.open .acc-in{ padding:12px 14px !important; }
.acc-in{ gap:0 14px !important; grid-template-columns:minmax(0,.95fr) minmax(0,1fr) !important; }
.acc-d{ font-size:.74rem !important; line-height:1.4 !important; }
.acc-d b{ font-size:.8rem !important; }
.acc-side{ gap:8px !important; }
.dropdown .acc-all{ font-size:.66rem !important; padding:6px 9px !important; }
.dropdown .acc-l a{ font-size:.78rem !important; padding:6px 8px !important; gap:8px !important; }
.acc-l a .mi{ width:15px !important; height:15px !important; }
.acc-l a .mc{ width:10px !important; height:10px !important; }
/* Footer legal */
footer .legal{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.legal-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-left:auto; }
.legal-links a{ color:var(--muted); text-decoration:none; font-size:.86rem; }
.legal-links a:hover{ color:var(--green); }
.rg-badge{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--muted); color:var(--muted); font:800 .74rem/1 var(--display); }
@media (max-width:700px){ .legal-links{ margin-left:0; } }
/* Páginas legales */
.legal-hero .p-h1{ max-width:20ch; }
.lg-upd{ color:var(--faint); margin:8px 0 22px; }
.lg-nav{ display:flex; flex-wrap:wrap; gap:8px; }
.lg-nav a{ padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text); text-decoration:none; font:700 .86rem/1 var(--display); }
.lg-nav a.on, .lg-nav a:hover{ border-color:var(--green); color:var(--green); }
.legal-body{ position:relative; overflow:hidden; isolation:isolate; }
.lg-doc{ display:grid; gap:14px; max-width:860px; }
.lg-doc article{ display:grid; grid-template-columns:56px 1fr; gap:16px; padding:24px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; }
.lg-doc article:nth-child(2){ animation-delay:.06s; } .lg-doc article:nth-child(3){ animation-delay:.12s; } .lg-doc article:nth-child(4){ animation-delay:.18s; } .lg-doc article:nth-child(5){ animation-delay:.24s; }
.lg-n{ font:800 1.4rem/1 var(--display); color:var(--green); }
.lg-doc h2{ font-size:1.2rem; margin-bottom:6px; } .lg-doc p{ color:var(--muted); line-height:1.6; }
.lg-doc h2{ max-width:none !important; }

/* ===== Páginas legales con formato de documento ===== */
.legal-doc{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(40px,5vw,72px) !important;
  background:radial-gradient(60% 50% at 0% 0%, rgba(66,193,72,.18), transparent 70%), radial-gradient(60% 60% at 100% 30%, rgba(66,193,72,.10), transparent 70%), linear-gradient(180deg, #EEF3EE, #E5E5E5) !important; color:#0B0F0C; }
.lg-wm{ width:min(520px,45%) !important; right:-6% !important; left:auto !important; top:8% !important; bottom:auto !important; opacity:.08 !important; color:#0B0F0C !important; filter:none !important; z-index:-1 !important; }
.lg-paper{ max-width:820px; }
.lg-title{ font:900 clamp(2.6rem,7vw,5.4rem)/.95 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#0B0F0C; margin:0 0 14px; }
.lg-upd{ font-size:.86rem; color:#5B665D; margin-bottom:28px; }
.lg-intro{ font:800 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--display); text-transform:uppercase; color:#0B0F0C; margin-bottom:36px; max-width:60ch; }
.lg-doc h2{ font:800 clamp(1.05rem,1.5vw,1.25rem)/1.25 var(--display) !important; text-transform:uppercase; color:#0B0F0C; margin:30px 0 10px !important; max-width:none !important; }
.lg-doc p{ color:#2E3830 !important; line-height:1.7; font-size:1rem; max-width:72ch; }
.lg-doc{ display:block !important; max-width:none !important; }
.lg-other{ margin-top:48px; padding-top:22px; border-top:1px solid rgba(11,15,12,.15); }
.lg-other p{ font:700 .8rem/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:#5B665D; margin-bottom:12px; }
.lg-other div{ display:flex; flex-wrap:wrap; gap:8px; }
.lg-other a{ padding:9px 14px; border-radius:999px; border:1px solid rgba(11,15,12,.25); color:#0B0F0C; text-decoration:none; font:700 .86rem/1 var(--display); transition:background .2s, color .2s, border-color .2s; }
.lg-other a:hover{ background:#0B0F0C; color:#fff; border-color:#0B0F0C; }
@media (prefers-reduced-motion: no-preference){
  .lg-paper.in .lg-title{ animation:itTitle .8s cubic-bezier(.2,.7,.2,1) both; }
  .lg-paper.in .lg-upd, .lg-paper.in .lg-intro{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .15s both; }
  .lg-paper.in .lg-doc > *{ animation:qaIn .6s cubic-bezier(.2,.7,.2,1) .25s both; }
}

/* Aviso de cookies */
.ck{ position:fixed; left:calc(20px + env(safe-area-inset-left,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:85; width:min(430px, calc(100vw - 40px)); padding:22px; border-radius:16px;
  background:var(--surface); border:1px solid rgba(66,193,72,.4); box-shadow:0 24px 60px rgba(0,0,0,.55); opacity:0; transform:translateY(16px); transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.ck.in{ opacity:1; transform:none; } .ck.out{ opacity:0; transform:translateY(16px); }
.ck h3{ font:800 1.15rem/1.2 var(--display); margin-bottom:8px; }
.ck p{ color:var(--muted); font-size:.9rem; line-height:1.5; } .ck p a{ color:var(--green); }
.ck-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.ck-b{ padding:11px 8px; border-radius:8px; font:700 .84rem/1.1 var(--body); cursor:pointer; }
.ck-b.ghost{ background:none; border:1.5px solid var(--green); color:var(--green); } .ck-b.ghost:hover{ background:rgba(66,193,72,.1); }
.ck-b.solid{ background:var(--green); border:1.5px solid var(--green); color:var(--green-ink); }
.ck-pref{ display:grid; gap:8px; margin-top:14px; }
.ck-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong); cursor:pointer; }
.ck-row b{ display:block; font:700 .9rem/1.2 var(--display); } .ck-row small{ display:block; color:var(--muted); font-size:.78rem; margin-top:2px; }
.ck-row input{ position:absolute; opacity:0; pointer-events:none; }
.ck-row i{ flex:none; width:40px; height:22px; border-radius:999px; background:var(--line-strong); position:relative; transition:background .2s; }
.ck-row i::after{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.ck-row input:checked + i{ background:var(--green); } .ck-row input:checked + i::after{ transform:translateX(18px); }
.ck-row input:disabled + i{ opacity:.6; }
@media (max-width:520px){ .ck{ left:10px; right:10px; width:auto; bottom:10px; } .ck-btns{ grid-template-columns:1fr 1fr; } .ck-b.solid{ grid-column:1 / -1; } }
html.lm-open .ck{ display:none; }
.ck-pref[hidden], .ck[hidden]{ display:none !important; }

/* ===== ZScience-Solutions: instrucción, etapas, áreas, equipo y diferencial ===== */
.ai-prompt{ display:flex; align-items:center; gap:10px; max-width:480px; margin:20px 0 6px; padding:13px 18px; border-radius:999px; border:1.5px solid var(--green); background:rgba(66,193,72,.06); font:500 .98rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ai-prompt .pr{ color:var(--green); font-weight:700; } .ai-prompt .ty{ color:var(--text); white-space:nowrap; overflow:hidden; }
.ai-prompt .caret{ width:9px; height:1.1em; background:var(--green); animation:liveBlink 1s steps(1) infinite; }
.ai-prompt .go{ margin-left:auto; color:var(--green); }
.zs-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:z; }
@media (min-width:800px){ .zs-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.zs-steps li{ position:relative; padding:24px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; }
.zs-steps li::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; }
.zs-steps li.seen::before{ animation:alBar 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.zs-n{ font:900 2rem/1 var(--display); color:var(--green); } .zs-steps b{ display:block; font:800 1.15rem/1.2 var(--display); margin:10px 0 6px; } .zs-steps p{ color:var(--muted); }
@media (min-width:1040px){ .zs-areas{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
.zs-team{ display:grid; gap:32px; align-items:center; } @media (min-width:980px){ .zs-team{ grid-template-columns:.9fr 1.1fr; gap:56px; } }
.zs-tlist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.zs-tlist li{ display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); transition:border-color .3s, transform .3s; }
.zs-tlist li:hover{ border-color:var(--green); transform:translateX(6px); }
.zs-tlist b{ font:700 .95rem/1.3 var(--display); } .zs-tlist span{ color:var(--muted); font-size:.88rem; text-align:right; }
@media (max-width:600px){ .zs-tlist li{ flex-direction:column; gap:4px; } .zs-tlist span{ text-align:left; } }
.zs-diff{ display:grid; gap:16px; } @media (min-width:800px){ .zs-diff{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.zs-diff article{ padding:26px; border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.4); border-top:4px solid var(--green); background:radial-gradient(80% 80% at 100% 0%, rgba(66,193,72,.12), transparent 70%), var(--bg); }
.zs-diff h3{ font-size:1.3rem; margin-bottom:8px; } .zs-diff p{ color:var(--muted); }
[data-view=zscience] .p-cta h2 .g{ color:var(--green); }
@media (min-width:1040px){ .items-grid:has(> .svc:nth-child(7)){ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:899px){ .tl-mode #it-points li{ grid-column:auto !important; } }

/* Sobre nosotros: misión, visión, valores y productos */
.ab-mv{ display:grid; gap:16px; } @media (min-width:860px){ .ab-mv{ grid-template-columns:1fr 1fr; } }
.ab-mv article{ padding:30px; border-radius:var(--radius-lg); border:1px solid rgba(66,193,72,.4); background:radial-gradient(80% 90% at 100% 0%, rgba(66,193,72,.14), transparent 70%), var(--surface); }
.ab-mv h3{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; margin-top:12px; }
@media (min-width:1040px){ .ab-vals{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
.ab-prods{ display:grid; gap:12px; } @media (min-width:900px){ .ab-prods{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.ab-p{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--bg); color:var(--text); text-decoration:none; transition:border-color .3s, transform .3s; }
.ab-p:hover{ border-color:var(--green); transform:translateY(-4px); }
.ab-p .az{ width:34px; height:28px; } .ab-p .az svg{ width:100%; height:100%; }
.ab-p b{ font:800 1.3rem/1 var(--display); } .ab-p small{ color:var(--muted); font-size:.88rem; line-height:1.4; }
.ab-ar{ position:absolute; top:22px; right:20px; width:14px; height:14px; color:var(--green); transition:transform .3s; } .ab-p:hover .ab-ar{ transform:translate(3px,-3px); }
.ab-sv{ list-style:none; margin:6px 0 0; padding:10px 0 0; border-top:1px solid var(--line); display:grid; gap:6px; }
.ab-sv li{ position:relative; padding-left:14px; font-size:.8rem; line-height:1.3; color:var(--text); opacity:.85; }
.ab-sv li::before{ content:""; position:absolute; left:0; top:.45em; width:6px; height:6px; border-radius:2px; background:var(--green); }
.ab-how{ list-style:none; margin:clamp(20px,3vw,32px) 0 0; padding:0; display:grid; gap:14px; counter-reset:s; }
@media (min-width:700px){ .ab-how{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .ab-how{ grid-template-columns:repeat(4,1fr); } }
.ab-how li{ position:relative; padding:24px 22px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; }
.ab-how li span{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(66,193,72,.12); border:1px solid rgba(66,193,72,.4); color:var(--green); font:800 .9rem/1 var(--display); margin-bottom:14px; }
.ab-how li h3{ font-size:1.15rem; margin:0 0 6px; }
.ab-how li p{ margin:0; color:var(--muted); font-size:.95rem; }
@media (min-width:1080px){ .ab-how li:not(:last-child)::after{ content:""; position:absolute; top:44px; right:-1px; width:22px; height:2px; background:linear-gradient(90deg,var(--green),transparent); } }
/* Integrantes que solo se muestran dentro de su departamento */
.member.only-dept{ display:none !important; }

/* ===== ZScience-Solutions: diagrama Datos + IA ===== */
.zo{ position:relative; height:clamp(520px,46vw,600px); margin-top:20px; border-radius:24px; overflow:hidden;
  background:radial-gradient(45% 55% at 50% 50%, rgba(66,193,72,.16), transparent 70%), radial-gradient(var(--line) 1px, transparent 1.2px) 0 0/22px 22px, var(--bg); border:1px solid var(--line-strong); }
.zo-svg{ position:absolute; inset:0; width:100%; height:100%; }
.zo-stream path, .zo-out path{ fill:none; stroke:rgba(66,193,72,.35); stroke-width:1.2; stroke-dasharray:4 10; }
.zo-l{ fill:none; stroke:rgba(66,193,72,.35); stroke-width:2; stroke-dasharray:6 8; transition:stroke .4s; }
.zo-l.on{ stroke:var(--green); stroke-width:3; filter:drop-shadow(0 0 6px rgba(66,193,72,.8)); }
@media (prefers-reduced-motion: no-preference){
  .zo-stream path{ animation:hxFlow 1.4s linear infinite; } .zo-out path{ animation:hxFlow 1.8s linear infinite; }
  .zo-l{ animation:hxFlow 1.2s linear infinite; } .zo-l.on{ animation-duration:.6s; }
}
.zo-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; }
.zo-sph{ position:relative; width:clamp(150px,16vw,210px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; gap:8px; overflow:hidden;
  border:2px solid rgba(66,193,72,.7); box-shadow:0 0 50px rgba(66,193,72,.35), inset 0 0 40px rgba(66,193,72,.25); color:var(--text);
  background:radial-gradient(circle at 35% 30%, rgba(120,255,140,.35), rgba(10,40,14,.9) 60%, #031006); }
.zo-sph.ia{ margin-left:-28px; background:radial-gradient(circle at 60% 35%, rgba(120,255,140,.28), rgba(8,30,12,.92) 60%, #020a04); }
.zo-tex{ position:absolute; inset:0; border-radius:50%; opacity:.5; background:radial-gradient(rgba(140,255,150,.9) 1px, transparent 1.4px) 0 0/10px 10px; mask-image:radial-gradient(circle, #000 55%, transparent 72%); -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 72%); }
.zo-sph.ia .zo-tex{ background:radial-gradient(rgba(140,255,150,.9) 1.2px, transparent 1.6px) 0 0/16px 16px; }
@media (prefers-reduced-motion: no-preference){ .zo-tex{ animation:zoSpin 22s linear infinite; } .zo-sph.ia .zo-tex{ animation-direction:reverse; } .zo-sph{ animation:hxCore 3.4s ease-in-out infinite; } .zo-sph.ia{ animation-delay:1.7s; } }
@keyframes zoSpin{ to{ transform:rotate(360deg); } }
.zo-sph svg{ position:relative; width:36px; height:36px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.zo-sph b{ position:relative; font:900 clamp(1.3rem,2vw,1.8rem)/1 var(--display); letter-spacing:.02em; }
.zo-node{ position:absolute; width:min(250px,24%); padding:18px; border-radius:18px; border:1px solid var(--line-strong); background:rgba(6,12,8,.85); color:var(--text); text-decoration:none; backdrop-filter:blur(4px);
  transition:border-color .35s, box-shadow .35s, transform .35s; }
.zo-tl{ left:3%; top:6%; } .zo-tr{ right:3%; top:6%; } .zo-bl{ left:3%; bottom:6%; } .zo-br{ right:3%; bottom:6%; }
.zo-node.on, .zo-node:hover{ border-color:var(--green); box-shadow:0 0 34px rgba(66,193,72,.3); transform:translateY(-4px); }
.zo-ic{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--green); display:grid; place-items:center; color:var(--green); margin-bottom:10px; transition:background .35s, color .35s; }
.zo-node.on .zo-ic{ background:var(--green); color:var(--green-ink); }
.zo-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zo-node b{ display:block; font:800 1.25rem/1 var(--display); } .zo-node small{ display:block; color:var(--green); font:700 .8rem/1.3 var(--display); margin:4px 0 8px; }
.zo-node p{ color:var(--muted); font-size:.88rem; line-height:1.45; }
.zo-go{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font:700 .8rem/1 var(--display); font-style:normal; color:var(--green); } .zo-go svg{ width:11px; height:11px; }
@media (max-width:899px){
  .zo{ height:auto; display:grid; gap:12px; padding:24px 16px; }
  .zo-svg{ display:none; } .zo-core{ position:relative; left:auto; top:auto; transform:none; justify-content:center; margin:0 auto 10px; }
  .zo-sph{ width:130px; } .zo-node{ position:relative; inset:auto !important; width:auto; }
}
html[data-theme="light"] .zo-node{ background:rgba(255,255,255,.9); }

/* ===== Diagrama Datos + IA: versión armoniosa (nodos circulares en órbita) ===== */
.zo{ height:clamp(520px,44vw,580px) !important; border:0 !important; background:radial-gradient(42% 52% at 50% 50%, rgba(66,193,72,.18), transparent 72%), transparent !important; overflow:visible !important; }
.zo-ring{ fill:none; stroke:rgba(66,193,72,.22); stroke-width:1.2; }
.zo-ring.r2{ stroke-dasharray:3 9; stroke:rgba(66,193,72,.3); }
@media (prefers-reduced-motion: no-preference){ .zo-ring.r2{ animation:hxFlow 4s linear infinite; } }
.zo-l{ stroke-width:2.2 !important; marker-end:none; }
.zo-sph{ width:clamp(170px,17vw,220px) !important; }
.zo-sph.ia{ margin-left:-34px !important; }
.zo-node{ width:clamp(118px,11vw,140px) !important; aspect-ratio:1; padding:0 !important; border-radius:50% !important; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:1.5px solid rgba(66,193,72,.45) !important; background:radial-gradient(circle at 50% 30%, rgba(66,193,72,.14), rgba(4,10,6,.95) 70%) !important; box-shadow:0 0 0 6px rgba(66,193,72,.05); transform:translate(-50%,-50%) !important; }
html[data-theme="light"] .zo-node{ color:#0b0f0c !important; background:radial-gradient(circle at 50% 30%, #fff, #e5f4e6 76%) !important; }
html[data-theme="light"] .zo-node small{ color:#344b37 !important; }
.zo-tl{ left:27% !important; top:24% !important; right:auto !important; bottom:auto !important; } .zo-tr{ left:73% !important; top:24% !important; right:auto !important; bottom:auto !important; }
.zo-bl{ left:27% !important; top:76% !important; right:auto !important; bottom:auto !important; } .zo-br{ left:73% !important; top:76% !important; right:auto !important; bottom:auto !important; }
.zo-node.on, .zo-node:hover{ transform:translate(-50%,-50%) scale(1.08) !important; border-color:var(--green) !important; box-shadow:0 0 0 8px rgba(66,193,72,.12), 0 0 40px rgba(66,193,72,.45) !important; }
.zo-node .zo-ic{ width:auto; height:auto; border:0; margin:0 0 6px; background:none !important; color:var(--green) !important; }
.zo-node .zo-ic svg{ width:30px; height:30px; }
.zo-node b{ font-size:1rem !important; } .zo-node small{ font-size:.66rem !important; color:var(--muted) !important; margin:4px 8px 0 !important; line-height:1.25 !important; }
.zo-node p, .zo-node .zo-go{ display:none !important; }
.zo-info{ max-width:640px; margin:8px auto 0; text-align:center; }
.zo-info small{ display:block; font:800 .85rem/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.zo-info p{ font:700 clamp(1.15rem,1.8vw,1.45rem)/1.35 var(--display); margin:8px 0 10px; }
.zo-go2{ display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:700; text-decoration:none; } .zo-go2 svg{ width:12px; height:12px; }
.zo-info.in > *{ animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; } .zo-info.in p{ animation-delay:.06s; } .zo-info.in a{ animation-delay:.12s; }
@media (max-width:899px){
  .zo{ height:auto !important; grid-template-columns:1fr 1fr; justify-items:center; }
  .zo-core{ grid-column:1 / -1; } .zo-node{ position:relative !important; left:auto !important; top:auto !important; transform:none !important; width:136px !important; }
  .zo-node.on, .zo-node:hover{ transform:scale(1.05) !important; } .zo-ring{ display:none; }
}

/* ZScience-Solutions: palabras rotativas y Ciencia de datos + IA */
.zs-rot .zh-words{ min-width:10ch; }
.cd .cd-grid{ display:grid; gap:clamp(28px,4vw,56px); align-items:start; }
@media (min-width:980px){ .cd .cd-grid{ grid-template-columns:1.05fr .95fr; } }
.cd-intro h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.08; max-width:20ch; margin-bottom:22px; }
.cd-intro h2 .g{ color:var(--green); display:block; }
.cd-intro > p{ color:var(--muted); margin:0 0 14px; max-width:60ch; }
.cd-quote{ margin:26px 0 0; padding:18px 22px; border-left:3px solid var(--green); background:rgba(66,193,72,.07); border-radius:0 12px 12px 0; font:600 1.08rem/1.45 var(--display); }
.cd-quote span{ color:var(--muted); } .cd-quote b{ color:var(--text); }
.cd-lead{ color:var(--muted); margin:0 0 18px; }
.cd-steps{ display:grid; gap:12px; }
.cd-step{ position:relative; overflow:hidden; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:16px 18px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); cursor:default; transition:border-color .35s, transform .35s, box-shadow .35s; }
.cd-step h3{ font-size:1.02rem; margin:2px 0 4px; transition:color .35s; }
.cd-step p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
.cd-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(66,193,72,.1); color:var(--green); transition:background .35s, color .35s; }
.cd-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cd-bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green); }
.cd-step.on{ border-color:var(--green); transform:translateX(6px); box-shadow:0 10px 30px rgba(66,193,72,.12); }
.cd-step.on h3{ color:var(--green); }
.cd-step.on .cd-ic{ background:var(--green); color:#0b0f0c; }
.cd-step.on .cd-bar{ animation:cdBar 3.6s linear forwards; }
@keyframes cdBar{ from{ width:0; } to{ width:100%; } }
.cd-final{ margin-top:clamp(32px,4vw,48px); display:grid; gap:8px 28px; align-items:center; padding:clamp(20px,3vw,30px) clamp(20px,3vw,34px); border-radius:16px; background:linear-gradient(110deg, rgba(66,193,72,.16), rgba(66,193,72,.03) 70%); border:1px solid rgba(66,193,72,.35); }
@media (min-width:860px){ .cd-final{ grid-template-columns:auto 1fr; } }
.cd-final b{ font:800 clamp(1.2rem,2vw,1.5rem)/1.1 var(--display); color:var(--green); white-space:nowrap; }
.cd-final p{ margin:0; font-size:1.02rem; }
@media (max-width:520px){ .cd-step{ grid-template-columns:38px 1fr; padding:14px; } .cd-ic{ width:38px; height:38px; } .cd-step.on{ transform:none; } .cd-final b{ white-space:normal; } }
@media (prefers-reduced-motion: reduce){ .cd-step.on .cd-bar{ animation:none; width:100%; } }

/* Páginas de opciones: secciones que se apilan al deslizar (como tarjetas que suben una sobre otra) */
.view.stk > section{ position:sticky; }
.view.stk > section:not(.it-psec):not(.tint){ background-color:var(--bg); }
.view.stk > section + section{ margin-top:-32px; border-radius:32px 32px 0 0; }
.view.stk > section{ box-shadow:0 8px 12px -7px rgba(0,0,0,.28); }
.view.stk > section.stk-last{ position:relative; }
.view.stk > section{ will-change:transform; }
@media (max-width:640px){
  .view.stk > section,
  .view.stk > section + section,
  .view.stk > section.stk-last{ position:relative !important; inset:auto !important; z-index:auto !important; transform:none !important; transform-origin:auto !important; margin:0 !important; border-radius:0; box-shadow:none; will-change:auto; }
  .view.stk .it-sibs{ align-items:flex-start; min-width:0; }
  .view.stk .it-sibs span{ max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
}

/* ZDashboard · Lo que ganas: ilustraciones animadas en cada tarjeta */
.ib-vis{ position:relative; height:150px; margin:0 0 20px; border-radius:14px; border:1px solid var(--line); background:radial-gradient(80% 90% at 50% 100%, rgba(66,193,72,.10), transparent 70%), var(--bg); overflow:hidden; }
.ib-vis svg{ width:100%; height:100%; display:block; }
.ib-vis .ln{ fill:none; stroke:var(--line-strong); stroke-width:1.5; }
.ib-vis .gr{ fill:none; stroke:#42C148; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ib-vis .gf{ fill:#42C148; }
.ib-vis .bx{ fill:var(--surface); stroke:var(--line-strong); stroke-width:1.2; }
.ib-vis .bxg{ fill:rgba(66,193,72,.12); stroke:#42C148; stroke-width:1.4; }
.ib-vis text{ font:600 10px var(--body); fill:var(--muted); }
.ib-vis text.t{ fill:var(--text); font-weight:700; }
.ib-vis text.g{ fill:#42C148; font-weight:800; }
.ib-vis text.m{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; fill:var(--text); }
.ib-vis .flow{ stroke-dasharray:5 7; animation:ibFlow 1.4s linear infinite; }
@keyframes ibFlow{ to{ stroke-dashoffset:-24; } }
.ib-vis .pulse{ transform-box:fill-box; transform-origin:center; animation:ibPulse 1.8s ease-out infinite; }
@keyframes ibPulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
.ib-vis .bar{ transform-box:fill-box; transform-origin:bottom; animation:ibBar 4s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes ibBar{ 0%,22%{ transform:scaleY(0); } 45%,90%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
.ib-vis .typ{ animation:ibTyp 4s steps(30) infinite; }
@keyframes ibTyp{ 0%{ clip-path:inset(0 100% 0 0); } 25%,100%{ clip-path:inset(0 0 0 0); } }
.ib-vis .chk{ opacity:0; animation:ibChk 4.5s ease infinite; }
.ib-vis .chk.c2{ animation-delay:.5s; } .ib-vis .chk.c3{ animation-delay:1s; }
@keyframes ibChk{ 0%,10%{ opacity:0; transform:translateX(-4px); } 20%,85%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.ib-vis .draw{ stroke-dasharray:400; stroke-dashoffset:400; animation:ibDraw 4.5s ease infinite; }
@keyframes ibDraw{ 0%{ stroke-dashoffset:400; } 45%,90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:0; } }
.ib-vis .pop{ opacity:0; animation:ibPop 4.5s ease infinite; }
@keyframes ibPop{ 0%,40%{ opacity:0; transform:translateY(4px); } 50%,90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.ib-vis .spin{ transform-box:fill-box; transform-origin:center; animation:ibSpin 8s linear infinite; }
@keyframes ibSpin{ to{ transform:rotate(360deg); } }
.ib-vis .ring{ transform-box:fill-box; transform-origin:50% 0; animation:ibRing 2.4s ease-in-out infinite; }
@keyframes ibRing{ 0%,60%,100%{ transform:rotate(0); } 66%{ transform:rotate(14deg); } 74%{ transform:rotate(-12deg); } 82%{ transform:rotate(6deg); } }
@media (prefers-reduced-motion: reduce){ .ib-vis *{ animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; clip-path:none !important; transform:none !important; } }

.ib-vis .bw{ transform-box:fill-box; transform-origin:left; animation:ibBw 4.5s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes ibBw{ 0%{ transform:scaleX(0); } 35%,90%{ transform:scaleX(1); } 100%{ transform:scaleX(1); } }
.ib-vis .scan{ animation:ibScan 2.4s ease-in-out infinite alternate; }
@keyframes ibScan{ from{ transform:translateY(0); } to{ transform:translateY(58px); } }
.ib-vis .hand{ transform-box:view-box; animation:ibSpin 6s linear infinite; }
.ib-vis .msg{ opacity:0; animation:ibMsg 5s ease infinite; } .ib-vis .msg.m2{ animation-delay:1.2s; }
@keyframes ibMsg{ 0%,8%{ opacity:0; transform:translateY(6px); } 18%,80%{ opacity:1; transform:none; } 92%,100%{ opacity:0; } }
.ib-vis .risk{ transform-box:fill-box; transform-origin:left; animation:ibRisk 5s ease-in-out infinite; }
@keyframes ibRisk{ 0%,20%{ transform:scaleX(1); fill:#ff6b5a; } 55%,90%{ transform:scaleX(.16); fill:#42C148; } 100%{ transform:scaleX(1); fill:#ff6b5a; } }
.ib-vis .swap{ animation:ibSwap 5s ease infinite; } .ib-vis .swap.s2{ animation-delay:2.5s; opacity:0; }
@keyframes ibSwap{ 0%,40%{ opacity:1; } 50%,90%{ opacity:0; } 100%{ opacity:1; } }
.ib-vis .grow{ transform-box:fill-box; transform-origin:bottom; animation:ibGrow 5s ease infinite; }
@keyframes ibGrow{ 0%{ transform:scaleY(.5); } 60%,100%{ transform:scaleY(1); } }
.ib-vis .layer{ animation:ibLayer 4.5s ease infinite; } .ib-vis .layer.l2{ animation-delay:.4s; } .ib-vis .layer.l3{ animation-delay:.8s; }
@keyframes ibLayer{ 0%,10%{ opacity:.25; } 25%,85%{ opacity:1; } 100%{ opacity:.25; } }

/* Servicios: sección «Se conecta con» */
.it-conn-sec{ padding-block:clamp(56px,7vw,96px); }
.cn-title{ font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; max-width:24ch; margin:0 0 10px; }
.cn-title .g{ color:var(--green); }
.cn-sub{ color:var(--muted); margin:0 0 clamp(28px,4vw,44px); max-width:60ch; }
.cn{ position:relative; display:grid; justify-items:center; }
.cn-hub{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:14px 26px; border-radius:999px; background:var(--green); color:#04110a; font:800 1.15rem/1 var(--display); box-shadow:0 0 0 8px rgba(66,193,72,.12), 0 14px 40px rgba(66,193,72,.25); }
.cn-hub{ padding:8px 26px 8px 8px !important; } .cn-zi{ width:40px; height:40px; border-radius:50%; background:#04110a; display:grid; place-items:center; } .cn-zi svg{ width:22px; height:18px; }
.cn-cards{ position:relative; width:100%; display:grid; gap:18px; margin-top:56px; }
@media (min-width:900px){
  .cn-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .cn-cards::before{ content:""; position:absolute; top:-30px; left:16.66%; right:16.66%; height:2px; background:var(--line-strong); }
  .cn::before{ content:""; position:absolute; top:48px; left:50%; width:2px; height:36px; margin-left:-1px; background:var(--line-strong); }
  .cn-card::before{ content:""; position:absolute; top:-30px; left:50%; width:2px; height:30px; margin-left:-1px; background:var(--line-strong); }
  .cn-dot{ position:absolute; left:50%; top:-30px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
  .cn-card.out .cn-dot{ animation:cnDown 1.8s ease-in-out infinite; }
  .cn-card.in .cn-dot{ animation:cnUp 1.8s ease-in-out infinite; }
  .cn-card.both .cn-dot{ animation:cnBoth 2.4s ease-in-out infinite; }
}
@keyframes cnDown{ 0%{ transform:translateY(-6px); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(26px); opacity:0; } }
@keyframes cnUp{ 0%{ transform:translateY(26px); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(-6px); opacity:0; } }
@keyframes cnBoth{ 0%,100%{ transform:translateY(-6px); } 50%{ transform:translateY(26px); } }
@media (max-width:899px){
  .cn-cards{ margin-top:22px; padding-left:22px; }
  .cn-cards::before{ content:""; position:absolute; left:6px; top:-22px; bottom:28px; width:2px; background:var(--line-strong); }
  .cn-card::before{ content:""; position:absolute; left:-16px; top:30px; width:16px; height:2px; background:var(--line-strong); }
  .cn-dot{ position:absolute; left:-20px; top:26px; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
}
.cn-card{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:var(--radius-lg,18px); border:1px solid var(--line-strong); background:var(--surface); color:inherit; text-decoration:none; transition:border-color .3s, transform .3s, box-shadow .3s; }
.cn-card:hover{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 14px 34px rgba(66,193,72,.14); }
.cn-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font:700 .74rem/1 var(--body); letter-spacing:.02em; background:rgba(66,193,72,.12); color:var(--green); border:1px solid rgba(66,193,72,.35); }
.cn-badge svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cn-card .cn-p{ font:800 1.25rem/1.1 var(--display); color:var(--text); margin-top:4px; }
.cn-card h3{ margin:4px 0 0; font-size:1rem; color:var(--green); }
.cn-card p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.5; }
.cn-go{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font:700 .85rem/1 var(--body); color:var(--text); }
.cn-go svg{ width:14px; height:14px; }
@media (prefers-reduced-motion: reduce){ .cn-dot{ animation:none !important; } }

/* ZScience-Solutions: diagrama con servidores y pantalla a los lados */
@media (min-width:900px){ .zo{ height:clamp(560px,48vw,640px) !important; } }
.zo-stream path{ stroke:rgba(66,193,72,.55) !important; stroke-width:1.3 !important; }
.zo-beam path{ fill:none; stroke:#42C148; stroke-width:1.6; stroke-dasharray:6 8; filter:drop-shadow(0 0 4px rgba(66,193,72,.8)); }
.zo-beam path:first-child{ stroke-dasharray:none; stroke-width:2; }
.zo-arc{ fill:none; stroke:rgba(66,193,72,.75); stroke-width:1.6; }
@media (min-width:900px){ .zo-tl{ left:30% !important; top:30% !important; } .zo-tr{ left:70% !important; top:30% !important; }
.zo-bl{ left:30% !important; top:78% !important; } .zo-br{ left:70% !important; top:78% !important; } }
.zo-op{ position:absolute; left:50%; top:13%; transform:translate(-50%,-50%); width:clamp(108px,10vw,128px); aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid rgba(66,193,72,.45); background:radial-gradient(circle at 50% 30%, rgba(66,193,72,.14), rgba(4,10,6,.95) 70%); box-shadow:0 0 0 6px rgba(66,193,72,.06), 0 0 30px rgba(66,193,72,.2); color:#fff; }
.zo-op svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.zo-op b{ font:800 .95rem/1 var(--display); }
.zo-srv{ position:absolute; left:-1%; top:50%; width:17%; transform:translateY(-50%); pointer-events:none; }
.zo-srv svg{ width:100%; height:auto; display:block; }
.zs-top{ fill:#1b2a1e; stroke:rgba(66,193,72,.5); stroke-width:1; }
.zs-body{ fill:#0c140e; stroke:rgba(255,255,255,.08); stroke-width:1; }
.zs-rim{ fill:none; stroke:#42C148; stroke-width:2; filter:drop-shadow(0 0 4px rgba(66,193,72,.9)); }
.zs-px{ fill:#42C148; }
.zo-scr{ position:absolute; right:0; top:50%; width:18%; transform:translateY(-50%) perspective(700px) rotateY(-22deg); transform-origin:right center; pointer-events:none; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.zo-scr svg{ width:100%; height:auto; display:block; }
.sc-frame{ fill:rgba(14,22,16,.92); stroke:rgba(255,255,255,.14); }
.sc-card{ fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.1); }
.sc-ln{ fill:rgba(66,193,72,.5); } .sc-ax{ stroke:rgba(255,255,255,.25); }
.sc-br{ fill:none; stroke:#42C148; stroke-width:1.6; filter:drop-shadow(0 0 3px rgba(66,193,72,.9)); } .sc-pt{ fill:#fff; }
.sc-bar{ fill:#42C148; } .sc-line{ fill:none; stroke:#7dff86; stroke-width:1.4; }
@media (prefers-reduced-motion: no-preference){
  .zo-beam path{ animation:hxFlow 1.1s linear infinite; }
  .zs-rim{ animation:zsRim 2.4s ease-in-out infinite; }
  .zs-px{ animation:zsPx 1.8s steps(2) infinite; }
  .sc-br{ stroke-dasharray:4 5; animation:hxFlow 1.4s linear infinite; }
  .sc-pt{ animation:zsPx 4s ease infinite; }
  .sc-bar{ transform-box:fill-box; transform-origin:bottom; animation:ibBar 4s cubic-bezier(.2,.7,.2,1) infinite; }
  .sc-pulse{ transform-box:fill-box; transform-origin:center; animation:ibPulse 1.8s ease-out infinite; }
  .zo-arc{ stroke-dasharray:5 6; animation:hxFlow 1.6s linear infinite; }
}
@keyframes zsRim{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes zsPx{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
@keyframes scDraw{ 0%{ stroke-dashoffset:120; } 40%,100%{ stroke-dashoffset:0; } }
@media (max-width:1100px){ .zo-srv{ width:14%; } .zo-scr{ width:15%; } }
@media (max-width:899px){ .zo-srv, .zo-scr, .zo-op{ display:none; } }
/* Etiqueta del producto en las páginas de servicios: enlace a su página */
.it-glink{ text-decoration:none; display:inline-flex; border-radius:6px; transition:transform .25s, box-shadow .25s; }
.it-glink:hover{ transform:translateY(-1px); box-shadow:0 0 0 3px rgba(66,193,72,.25); }
.it-glink b{ cursor:pointer; }

/* ZScience-Solutions · Ciencia de datos + IA: versión compacta con pestañas */
.cd2{ padding-block:clamp(56px,7vw,96px); }
.cd2-h{ font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.08; max-width:22ch; margin:0 0 clamp(24px,3vw,36px); }
.cd2-h .g{ color:var(--green); }
.cd2-grid{ display:grid; gap:clamp(22px,3vw,40px); align-items:stretch; }
@media (min-width:900px){ .cd2-grid{ grid-template-columns:.9fr 1.1fr; } }
.cd2-lead{ color:var(--muted); margin:0 0 18px; max-width:46ch; }
.cd2-tabs{ display:grid; gap:6px; }
.cd2-tabs button{ position:relative; overflow:hidden; display:flex; align-items:baseline; gap:14px; width:100%; text-align:left; padding:12px 16px; border-radius:14px; border:1px solid transparent; background:none; color:var(--faint); cursor:pointer; font:800 clamp(1.6rem,3vw,2.3rem)/1.05 var(--display); transition:color .3s, background .3s, border-color .3s; }
.cd2-tabs button span{ font:700 .75rem/1 var(--display); letter-spacing:.12em; color:var(--faint); }
.cd2-tabs button:hover{ color:var(--text); }
.cd2-tabs button.on{ color:var(--green); background:var(--surface); border-color:var(--line-strong); }
.cd2-tabs button.on span{ color:var(--green); }
.cd2-tabs button i{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green); }
.cd2-tabs button.on i{ animation:cdBar 4.5s linear forwards; }
.cd2-panel{ display:flex; flex-direction:column; padding:clamp(18px,2.4vw,26px); border-radius:20px; border:1px solid var(--line-strong); background:radial-gradient(80% 70% at 100% 0%, rgba(66,193,72,.12), transparent 70%), var(--surface); }
.cd2-vis{ height:clamp(150px,16vw,190px) !important; margin-bottom:18px !important; }
.cd2-panel h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); margin:0 0 6px; }
.cd2-panel p{ margin:0; color:var(--muted); }
.cd2-panel.sw > *{ animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; } .cd2-panel.sw h3{ animation-delay:.05s; } .cd2-panel.sw p{ animation-delay:.1s; }
.cd2-foot{ margin:clamp(22px,3vw,32px) 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); }
.cd2-foot b{ color:var(--green); font-family:var(--display); }
@media (max-width:899px){ .cd2-tabs{ grid-template-columns:1fr 1fr; } .cd2-tabs button{ font-size:1.3rem; padding:10px 12px; gap:8px; } }

/* ZScience-Solutions · Aplicación por área: diagrama con la IA en el centro */
.zs-lead2{ margin-top:-6px !important; color:var(--muted); }
.za{ position:relative; height:clamp(520px,44vw,580px); margin-top:10px; background:radial-gradient(40% 50% at 50% 50%, rgba(66,193,72,.16), transparent 72%); }
.za-svg{ position:absolute; inset:0; width:100%; height:100%; }
.za-arc{ fill:none; stroke:rgba(66,193,72,.6); stroke-width:1.5; stroke-dasharray:5 7; }
.za-l{ fill:none; stroke:rgba(66,193,72,.35); stroke-width:2; stroke-dasharray:6 8; transition:stroke .4s; }
.za-l.on{ stroke:var(--green); stroke-width:3; filter:drop-shadow(0 0 6px rgba(66,193,72,.8)); }
.za-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(150px,15vw,190px); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; z-index:1;
  clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background:linear-gradient(160deg, rgba(66,193,72,.55), rgba(6,30,10,.95) 60%); }
.za-core::before{ content:""; position:absolute; inset:3px; clip-path:inherit; background:radial-gradient(circle at 50% 35%, rgba(66,193,72,.35), #041007 70%); z-index:-1; }
.za-orb{ position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(120,255,140,.12) 0 1px, transparent 1px 14px), repeating-linear-gradient(0deg, rgba(120,255,140,.12) 0 1px, transparent 1px 14px); opacity:.6; }
.za-core svg{ position:relative; width:38px; height:38px; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.za-core b{ position:relative; font:900 1.8rem/1 var(--display); }
.za-core small{ position:relative; font:700 .72rem/1 var(--display); color:var(--green); letter-spacing:.04em; }
.za-node{ position:absolute; transform:translate(-50%,-50%); width:clamp(120px,11.5vw,146px); aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; cursor:pointer; color:#fff; font:inherit; padding:0 10px; z-index:2;
  border:1.5px solid rgba(66,193,72,.45); background:radial-gradient(circle at 50% 30%, rgba(66,193,72,.14), rgba(4,10,6,.95) 70%); box-shadow:0 0 0 6px rgba(66,193,72,.06), 0 0 30px rgba(66,193,72,.15); transition:transform .35s, box-shadow .35s, border-color .35s; }
.za-node b{ font:800 .95rem/1.15 var(--display); }
.za-ic svg{ width:28px; height:28px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.za-node.on, .za-node:hover{ transform:translate(-50%,-50%) scale(1.08); border-color:var(--green); box-shadow:0 0 0 8px rgba(66,193,72,.12), 0 0 40px rgba(66,193,72,.45); }
.za-node.on .za-ic svg{ stroke:#fff; }
.za-tl{ left:24%; top:28%; } .za-tr{ left:76%; top:28%; } .za-bl{ left:24%; top:72%; } .za-br{ left:76%; top:72%; }
.za-side{ position:absolute; top:50%; transform:translateY(-50%); width:15%; display:grid; gap:8px; pointer-events:none; }
.za-chat{ left:0; } .za-kpi{ right:0; }
.za-msg{ display:block; padding:8px 11px; border-radius:12px; font-size:.74rem; line-height:1.35; border:1px solid var(--line-strong); background:rgba(14,22,16,.9); color:var(--text); }
.za-msg.q{ border-bottom-left-radius:3px; margin-right:14%; } .za-msg.a{ border-bottom-right-radius:3px; margin-left:14%; background:rgba(66,193,72,.14); border-color:rgba(66,193,72,.45); color:var(--green); font-weight:700; }
.za-k{ display:grid; gap:2px; padding:9px 11px; border-radius:12px; border:1px solid var(--line-strong); background:rgba(14,22,16,.9); }
.za-k small{ font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .za-k b{ font:800 1rem/1.1 var(--display); color:var(--green); }
.za-k i{ height:4px; border-radius:2px; background:linear-gradient(90deg,#42C148 var(--w), var(--line) var(--w)); }
.za-k.warn b{ color:#ff6b5a; } .za-k.warn i{ background:linear-gradient(90deg,#ff6b5a var(--w), var(--line) var(--w)); }
.za-info{ margin-top:4px !important; }
@media (prefers-reduced-motion: no-preference){
  .za-arc, .za-l{ animation:hxFlow 1.4s linear infinite; } .za-l.on{ animation-duration:.6s; }
  .za-orb{ animation:zaGrid 6s linear infinite; }
  .za-msg{ animation:zaMsg 6s ease-in-out infinite; } .za-msg:nth-child(2){ animation-delay:2s; } .za-msg:nth-child(3){ animation-delay:4s; }
  .za-k{ animation:zaK 3s ease-in-out infinite; } .za-k:nth-child(2){ animation-delay:.5s; } .za-k:nth-child(3){ animation-delay:1s; }
}
@keyframes zaMsg{ 0%,30%,100%{ transform:none; box-shadow:none; } 10%{ transform:translateY(-3px); box-shadow:0 0 18px rgba(66,193,72,.25); } }
@keyframes zaGrid{ to{ background-position:14px 14px, 14px 14px; } }
@keyframes zaK{ 0%,100%{ transform:none; } 50%{ transform:translateX(-4px); } }
@media (max-width:1100px){ .za-side{ display:none; } .za-tl,.za-bl{ left:18%; } .za-tr,.za-br{ left:82%; } }
@media (max-width:899px){
  .za{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; justify-items:center; padding:10px 0; }
  .za-svg{ display:none; }
  .za-core{ position:relative; left:auto; top:auto; transform:none; grid-column:1 / -1; width:140px; }
  .za-node{ position:relative; left:auto !important; top:auto !important; transform:none; width:136px; }
  .za-node.on, .za-node:hover{ transform:scale(1.05); }
}
html[data-theme="light"] .za-node, html[data-theme="light"] .za-msg, html[data-theme="light"] .za-k{ color:#fff; }
html[data-theme="light"] .za-info p{ color:#0b0f0c; }
html[data-theme="light"] .za-node{ color:#0b0f0c; border-color:rgba(35,135,43,.55); background:radial-gradient(circle at 50% 30%, #fff, #e5f4e6 76%); box-shadow:0 0 0 6px rgba(35,135,43,.08), 0 0 24px rgba(35,135,43,.12); }
html[data-theme="light"] .za-node.on .za-ic svg{ stroke:#176b21; }
html[data-theme="light"] .za-msg.a{ color:#165d1d; background:#e7f5e8; border-color:#86cf8b; }
html[data-theme="light"] .za-k{ color:#0b0f0c; background:rgba(255,255,255,.96); border-color:#c3cbc4; box-shadow:0 4px 14px rgba(11,15,12,.08); }
html[data-theme="light"] .za-k small{ color:#465049; }
html[data-theme="light"] .za-k b{ color:#176b21; }
html[data-theme="light"] .za-k.warn b{ color:#b42318; }
html[data-theme="light"] .za-k.warn i{ background:linear-gradient(90deg,#b42318 var(--w), var(--line) var(--w)); }
html[data-theme="light"] .za-core{ color:#fff; }
html[data-theme="light"] .za-core small{ color:#42c148; }

.bo-feat .svc-cta{ grid-column:auto !important; display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
.bo-feat .svc-cta .btn{ margin-top:10px !important; }
@media (min-width:1040px){ .bo-feat{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }

/* ZScience-Solutions · Nuestro diferencial: acordeón dinámico */
.zd-acc{ display:flex; gap:12px; min-height:340px; --zd-cycle-duration:6500ms; }
.zd-it{ position:relative; overflow:hidden; flex:1 1 0px; min-width:0; min-height:340px; padding:24px; border-radius:20px; border:1px solid var(--line-strong); cursor:pointer; outline:none; background:var(--surface);
  transition:flex-grow .95s cubic-bezier(.4,0,.2,1), border-color .75s ease, box-shadow .9s ease; }
.zd-it::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background:radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--green) 22%, transparent), transparent 70%); transition:opacity .9s ease; }
.zd-it.on{ flex-grow:2.6; border-color:var(--green); box-shadow:0 18px 50px color-mix(in srgb, var(--green) 14%, transparent); }
.zd-it.on::before{ opacity:1; }
.zd-it:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.zd-n{ position:absolute; top:18px; right:20px; font:900 clamp(2.4rem,4vw,3.6rem)/1 var(--display); color:transparent; -webkit-text-stroke:1px var(--line-strong); transition:-webkit-text-stroke-color .75s ease; }
.zd-it.on .zd-n{ -webkit-text-stroke-color:color-mix(in srgb, var(--green) 60%, transparent); }
.zd-ic{ position:absolute; top:118px; left:24px; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--green) 12%, transparent); color:var(--green); transition:background .75s ease, color .75s ease; }
.zd-it.on .zd-ic{ background:var(--green); color:var(--green-ink); }
.zd-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zd-it h3{ position:absolute; top:182px; left:24px; width:var(--zd-title-width,160px); margin:0; font-size:1.15rem; line-height:1.2; }
.zd-it p{ position:absolute; top:246px; left:24px; right:24px; margin:0; color:var(--muted); opacity:0; transform:translateY(5px); transition:opacity .16s ease, transform .16s ease; }
.zd-it.on p{ opacity:1; transform:none; transition:opacity .45s .85s ease, transform .45s .85s ease; }
.zd-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--green); transform:scaleX(0); transform-origin:left; }
.zd-it.on .zd-bar{ animation:zdProgress var(--zd-cycle-duration) linear forwards; }
.zd-acc.is-paused .zd-bar{ animation-play-state:paused; }
@keyframes zdProgress{ to{ transform:scaleX(1); } }
@media (max-width:899px){
  .zd-acc{ flex-direction:column; min-height:0; }
  .zd-it{ flex:none; min-height:200px; padding:18px 20px; transition:min-height .95s cubic-bezier(.4,0,.2,1), border-color .75s ease, box-shadow .9s ease; }
  .zd-it.on{ min-height:310px; }
  .zd-n{ font-size:2rem; }
  .zd-ic{ top:48px; left:20px; }
  .zd-it h3{ top:112px; left:20px; width:calc(100% - 40px); }
  .zd-it p{ top:182px; left:20px; right:20px; }
}
@media (prefers-reduced-motion:reduce){
  .zd-it, .zd-it::before, .zd-n, .zd-ic, .zd-it p, .zd-it.on p{ transition:none; }
  .zd-it.on .zd-bar{ animation:none; }
}


.xt{ display:grid; gap:18px; margin-top:clamp(20px,3vw,32px); }
@media (min-width:900px){ .xt{ grid-template-columns:minmax(220px,.75fr) 1.6fr; gap:28px; align-items:start; } }
.xt-tabs{ display:grid; gap:8px; }
@media (max-width:899px){ .xt-tabs{ display:flex; overflow-x:auto; scrollbar-width:none; gap:8px; padding-bottom:4px; } .xt-tabs::-webkit-scrollbar{ display:none; } .xt-tabs button{ flex:none; } }
.xt-tabs button{ position:relative; overflow:hidden; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); font:700 .95rem/1.25 var(--body); cursor:pointer; transition:color .3s, border-color .3s, background .3s; }
.xt-tabs button:hover{ color:var(--text); }
.xt-tabs button.on{ color:var(--text); border-color:var(--green); background:radial-gradient(90% 120% at 0% 50%, rgba(66,193,72,.16), transparent 70%), var(--surface); }
.xt-tabs button i{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green); }
.xt-tabs button.on i{ animation:cdBar 5s linear forwards; }
.xt-panel{ display:grid; gap:20px; align-items:center; padding:clamp(20px,2.6vw,30px); border-radius:20px; border:1px solid var(--line-strong); background:radial-gradient(80% 70% at 100% 0%, rgba(66,193,72,.12), transparent 70%), var(--surface); min-height:260px; }
@media (min-width:700px){ .xt-panel{ grid-template-columns:1.2fr .9fr; } }
.xt-panel.in > *{ animation:qaIn .5s cubic-bezier(.2,.7,.2,1) both; } .xt-panel.in > *:nth-child(2){ animation-delay:.1s; }
.xt-k{ display:block; font:800 .78rem/1 var(--display); letter-spacing:.1em; color:var(--green); margin-bottom:8px; }
.xt-txt h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.2; margin:0 0 12px; }
.xt-txt p{ color:var(--muted); margin:0; }
.xt-txt ul{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.xt-txt li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); }
.xt-txt li svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:rgba(66,193,72,.15); fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.xt-go{ display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:700; text-decoration:none; }
.xt-go svg{ width:12px; height:12px; }
.xt-badge{ justify-self:center; width:170px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; gap:8px; background:radial-gradient(circle at 50% 35%, rgba(66,193,72,.35), rgba(4,16,7,.95) 70%); border:1.5px solid rgba(66,193,72,.5); box-shadow:0 0 40px rgba(66,193,72,.25); color:#fff; }
.xt-badge svg{ width:52px; height:42px; fill:#42C148; }
.xt-badge b{ font:800 1.2rem/1 var(--display); }
@media (prefers-reduced-motion: no-preference){ .xt-badge{ animation:zfloat 6s ease-in-out infinite; } }

.slip{ justify-self:center; width:100%; max-width:300px; border-radius:16px; padding:14px; background:#0b120d; border:1px solid rgba(66,193,72,.35); box-shadow:0 18px 40px rgba(0,0,0,.4); color:#fff; display:grid; gap:10px; font-size:.86rem; }
.sl-h{ display:flex; justify-content:space-between; align-items:center; gap:8px; color:rgba(255,255,255,.6); font-size:.74rem; }
.sl-live{ font-style:normal; font-weight:800; color:#fff; background:#e5484d; padding:3px 7px; border-radius:6px; font-size:.68rem; animation:qaIn 1s ease infinite alternate; }
.sl-timer{ font-style:normal; color:#42C148; font-weight:700; }
.sl-m{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; text-align:center; padding:8px 0; border-block:1px solid rgba(255,255,255,.08); }
.sl-m b{ font:800 .95rem/1.2 var(--display); } .sl-m span{ color:#42C148; font-weight:800; }
.sl-row{ display:flex; justify-content:space-between; gap:8px; color:rgba(255,255,255,.75); }
.sl-row b{ color:#fff; } .sl-row.ck span{ color:#9be89f; }
.sl-odd{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; background:rgba(66,193,72,.14); border:1px solid rgba(66,193,72,.4); }
.sl-odd b{ font:800 1.3rem/1 var(--display); color:#42C148; }
.sl-odd.flick b{ animation:slFlick 1.6s ease infinite; }
@keyframes slFlick{ 0%,100%{ color:#42C148; } 50%{ color:#fff; } }
.sl-cash{ text-align:center; padding:11px; border-radius:10px; background:#42C148; color:#04110a; font-weight:800; animation:zbPulse 1.8s ease infinite; }
@keyframes zbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(66,193,72,.5); } 50%{ box-shadow:0 0 0 8px rgba(66,193,72,0); } }

.ls{ position:relative; list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; gap:14px; --p:0; }
@media (min-width:860px){ .ls{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ls-line{ position:absolute; left:0; right:0; top:0; height:3px; border-radius:2px; background:var(--line-strong); }
.ls-line i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(calc((var(--p) * 3 + 1) / 4)); background:var(--green); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width:859px){ .ls-line{ display:none; } }
.ls li{ position:relative; padding:22px 18px 18px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); margin-top:12px; transition:border-color .4s, transform .4s, box-shadow .4s; }
.ls li.on{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 14px 34px rgba(66,193,72,.14); }
.ls-n{ font:900 2rem/1 var(--display); color:transparent; -webkit-text-stroke:1px var(--line-strong); transition:-webkit-text-stroke-color .4s, color .4s; }
.ls li.on .ls-n, .ls li.done .ls-n{ color:var(--green); -webkit-text-stroke-color:var(--green); }
.ls li h3{ font-size:1.05rem; margin:10px 0 6px; } .ls li p{ margin:0; color:var(--muted); font-size:.9rem; }
.ls-stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.ls-stats div{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:999px; border:1px solid rgba(66,193,72,.4); background:rgba(66,193,72,.08); }
.ls-stats b{ font:900 1.4rem/1 var(--display); color:var(--green); } .ls-stats span{ color:var(--muted); font-size:.9rem; }

.cats{ display:grid; gap:14px; margin-top:clamp(20px,3vw,30px); }
@media (min-width:700px){ .cats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .cats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cat{ position:relative; overflow:hidden; display:grid; gap:8px; align-content:start; padding:22px; border-radius:18px; border:1px solid var(--line-strong); background:var(--surface); transition:border-color .4s, transform .4s, box-shadow .4s; }
.cat::after{ content:""; position:absolute; inset:auto -30% -60% auto; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(66,193,72,.25), transparent 65%); opacity:0; transition:opacity .5s; }
.cat.on{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 14px 34px rgba(66,193,72,.14); } .cat.on::after{ opacity:1; }
.cat-ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(66,193,72,.12); color:var(--green); transition:background .4s, color .4s; }
.cat.on .cat-ic{ background:var(--green); color:#04110a; }
.cat-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cat h3{ margin:6px 0 0; font-size:1.1rem; } .cat p{ margin:0; color:var(--muted); font-size:.92rem; }
.cat-st{ margin-top:6px; padding-top:10px; border-top:1px dashed var(--line-strong); color:var(--faint); font-size:.78rem; font-weight:700; letter-spacing:.02em; }

.cy{ display:grid; gap:24px; align-items:center; margin-top:clamp(20px,3vw,30px); --p:0; }
@media (min-width:900px){ .cy{ grid-template-columns:.8fr 1.2fr; gap:48px; } }
.cy-ring{ position:relative; width:min(300px,70vw); aspect-ratio:1; margin:0 auto; }
.cy-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cy-ring circle{ fill:none; stroke:var(--line-strong); stroke-width:6; }
.cy-ring .cy-prog{ stroke:var(--green); stroke-linecap:round; stroke-dasharray:502.65; stroke-dashoffset:calc(502.65 - 502.65 * (var(--p) * .8 + .2)); transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 0 6px rgba(66,193,72,.7)); }
.cy-core{ position:absolute; inset:28%; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, rgba(66,193,72,.35), rgba(4,16,7,.95) 70%); border:1.5px solid rgba(66,193,72,.5); }
.cy-core svg{ width:46%; height:auto; fill:#42C148; transform:none; }
@media (prefers-reduced-motion: no-preference){ .cy-core svg{ animation:zfloat 6s ease-in-out infinite; } }
.cy ol{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cy-s{ display:grid; grid-template-columns:44px 1fr; gap:2px 12px; align-items:center; padding:12px 14px; border-radius:14px; border:1px solid transparent; transition:all .4s; }
.cy-n{ grid-row:span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line-strong); font:800 .85rem/1 var(--display); color:var(--muted); transition:all .4s; }
.cy-s b{ font:800 1.05rem/1.1 var(--display); } .cy-s p{ margin:0; color:var(--muted); font-size:.9rem; }
.cy-s.on{ border-color:var(--green); background:var(--surface); } .cy-s.on .cy-n{ background:var(--green); border-color:var(--green); color:#04110a; }
.cy-s.done .cy-n{ border-color:var(--green); color:var(--green); }

.xt-pam .xt-panel{ grid-template-columns:1fr; }
@media (min-width:760px){ .xt-pam .xt-panel{ grid-template-columns:1.15fr .85fr; } }
.xt-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.xt-steps li{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
.xt-steps li > span{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(66,193,72,.14); border:1px solid rgba(66,193,72,.45); color:var(--green); font:800 .8rem/1 var(--display); }
.xt-steps b{ display:block; font:800 1.02rem/1.25 var(--display); margin-top:2px; } .xt-steps p{ margin:4px 0 0; color:var(--muted); font-size:.92rem; }
.pv{ border-radius:16px; padding:14px; background:#0b120d; border:1px solid rgba(66,193,72,.35); color:#fff; display:grid; gap:8px; min-width:0; }
.pv-t{ margin:0 0 2px; font:800 .72rem/1 var(--display); letter-spacing:.12em; color:#42C148; }
.pv-r{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); min-width:0; }
.pv-r span{ min-width:0; overflow-wrap:anywhere; font-size:.84rem; color:rgba(255,255,255,.85); }
.pv-r span small{ display:block; color:rgba(255,255,255,.5); font-size:.72rem; margin-top:2px; }
.pv-r b{ font:800 .9rem/1.2 var(--display); white-space:nowrap; } .pv-r b.g{ color:#42C148; } .pv-r b.r{ color:#ff6b5a; } .pv-r b.w{ color:#f2b33d; }
html[data-theme="light"] .slip, html[data-theme="light"] .pv{ color:#fff; }


.jr{ position:relative; list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; gap:14px; --p:0; }
@media (min-width:900px){ .jr{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.jr-line{ position:absolute; left:6%; right:6%; top:27px; height:2px; background:var(--line-strong); z-index:0; }
.jr-line i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p)); background:var(--green); box-shadow:0 0 10px rgba(66,193,72,.7); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width:899px){ .jr-line{ display:none; } }
.jr-s{ position:relative; z-index:1; padding:0 6px; text-align:center; transition:transform .4s; }
.jr-ic{ width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line-strong); background:var(--bg); color:var(--muted); transition:all .4s; }
.jr-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.jr-s small{ display:block; font:800 .74rem/1 var(--display); letter-spacing:.1em; color:var(--green); margin-bottom:6px; }
.jr-s h3{ font-size:1.02rem; margin:0 0 6px; }
.jr-s p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.45; }
.jr-s.done .jr-ic{ border-color:var(--green); color:var(--green); }
.jr-s.on .jr-ic{ background:var(--green); border-color:var(--green); color:#04110a; box-shadow:0 0 0 6px rgba(66,193,72,.15), 0 0 24px rgba(66,193,72,.6); transform:scale(1.08); }
.jr-s.on{ transform:translateY(-4px); }
@media (max-width:899px){ .jr-s{ display:grid; grid-template-columns:56px 1fr; gap:4px 14px; text-align:left; padding:12px; border:1px solid var(--line); border-radius:14px; } .jr-ic{ grid-row:span 3; margin:0; } .jr-s.on{ border-color:var(--green); transform:none; } }

.cs{ display:grid; gap:16px; margin-top:clamp(20px,3vw,30px); }
.cs-tabs{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
@media (max-width:900px){ .cs-tabs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){ .cs-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cs-t{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 8px 14px; border-radius:16px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); cursor:pointer; font:inherit; transition:all .35s; }
.cs-t b{ font:800 .92rem/1.15 var(--display); text-align:center; }
.cs-ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(66,193,72,.1); color:var(--green); transition:all .35s; }
.cs-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cs-t:hover{ color:var(--text); border-color:rgba(66,193,72,.5); }
.cs-t.on{ color:var(--text); border-color:var(--green); background:radial-gradient(90% 90% at 50% 0%, rgba(66,193,72,.22), transparent 70%), var(--surface); transform:translateY(-3px); box-shadow:0 12px 28px rgba(66,193,72,.15); }
.cs-t.on .cs-ic{ background:var(--green); color:#04110a; }
.cs-t i{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--green); }
.cs-t.on i{ animation:cdBar 4.5s linear forwards; }
.cs-stage{ display:grid; gap:20px; align-items:center; padding:clamp(18px,3vw,34px); border-radius:22px; border:1px solid var(--line-strong); overflow:hidden; background:radial-gradient(60% 90% at 15% 50%, rgba(66,193,72,.18), transparent 70%), var(--surface); }
@media (min-width:760px){ .cs-stage{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.cs-vis{ height:clamp(200px,22vw,250px); display:grid; place-items:center; }
.cs-vis svg{ width:100%; height:100%; }
.cs-txt .cs-n{ display:block; font:800 .78rem/1 var(--display); letter-spacing:.12em; color:var(--green); text-transform:uppercase; margin-bottom:10px; }
.cs-txt h3{ font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05; margin:0 0 12px; }
.cs-txt p{ color:var(--muted); font-size:1.05rem; margin:0 0 18px; max-width:44ch; }
.cs-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-chips span{ padding:7px 12px; border-radius:999px; border:1px solid rgba(66,193,72,.45); background:rgba(66,193,72,.08); font:700 .82rem/1 var(--body); color:var(--text); }
.cs-stage.in .cs-vis, .cs-stage.in .cs-txt > *{ animation:qaIn .55s cubic-bezier(.2,.7,.2,1) both; } .cs-stage.in .cs-txt > *:nth-child(2){ animation-delay:.06s; } .cs-stage.in .cs-txt > *:nth-child(3){ animation-delay:.12s; } .cs-stage.in .cs-txt > *:nth-child(4){ animation-delay:.18s; }

.cv-reel{ animation:cvReel 1.6s cubic-bezier(.4,.1,.3,1) infinite; } .cv-reel.r2{ animation-delay:.2s; } .cv-reel.r3{ animation-delay:.4s; }
@keyframes cvReel{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(-120px); } }
.cv-spin{ transform-box:fill-box; transform-origin:center; animation:ibSpin 5s linear infinite; } .cv-ball{ transform-box:view-box; transform-origin:110px 110px; animation:ibSpin 2.2s linear infinite reverse; }
.cv-curve{ stroke-dasharray:420; stroke-dashoffset:420; animation:cvDraw 3.4s ease-in infinite; }
@keyframes cvDraw{ 0%{ stroke-dashoffset:420; } 80%,100%{ stroke-dashoffset:0; } }
.cv-card{ transform-box:view-box; transform-origin:110px 190px; animation:cvFan 3.4s ease-in-out infinite; }
@keyframes cvFan{ 0%,100%{ transform:rotate(0); } 40%,70%{ transform:rotate(var(--r)); } }
.cv-bb{ animation:cvBounce 1.4s ease-in-out infinite; transform-box:fill-box; } .cv-bb:nth-of-type(2){ animation-delay:.2s; } .cv-bb:nth-of-type(3){ animation-delay:.4s; } .cv-bb:nth-of-type(4){ animation-delay:.6s; } .cv-bb:nth-of-type(5){ animation-delay:.8s; }
@keyframes cvBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
.cv-star{ transform-box:fill-box; transform-origin:center; animation:cvStar 3s ease-in-out infinite; }
@keyframes cvStar{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.08) rotate(8deg); } }
.cv-shine{ animation:cvShine 2.6s ease-in-out infinite; } @keyframes cvShine{ 0%{ transform:translateX(-160px); } 100%{ transform:translateX(220px); } }
@media (prefers-reduced-motion: reduce){ .cs-vis *{ animation:none !important; stroke-dashoffset:0 !important; } }
.tk-cash{ margin-left:4px; }
.tk-odd, .tk-cash{ display:inline-block; font-variant-numeric:tabular-nums; transition:color .3s; }
.tk-odd.tk-up{ animation:tkUp 1.2s ease; }
.tk-odd.tk-dn{ animation:tkDn 1.2s ease; }
.tk-cash.tk-up, .tk-cash.tk-dn{ animation:tkPop .6s ease; }
@keyframes tkPop{ 0%{ transform:scale(1.12); } 100%{ transform:none; } }
.tk-odd.tk-up::after{ content:" ▲"; font-size:.6em; color:var(--green); }
.tk-odd.tk-dn::after{ content:" ▼"; font-size:.6em; color:#ff6b5a; }
@keyframes tkUp{ 0%{ color:#7dff83; transform:translateY(-2px); } 100%{ transform:none; } }
@keyframes tkDn{ 0%{ color:#ff6b5a; transform:translateY(2px); } 100%{ transform:none; } }
.bs::after{ width:110px; height:110px; right:-36px; bottom:-36px; animation:bsGlow 10s ease-in-out infinite alternate; will-change:transform; }
.bs:nth-child(2)::after{ animation-delay:-1.8s; } .bs:nth-child(3)::after{ animation-delay:-3.6s; } .bs:nth-child(4)::after{ animation-delay:-5.4s; }
@keyframes bsGlow{ 0%{ transform:translate(0,0) scale(1); opacity:.45; } 100%{ transform:translate(-14px,-10px) scale(1.08); opacity:.7; } }
@media (prefers-reduced-motion: reduce){ .bs::after{ animation:none; } }

.xt-slip{ grid-template-columns:1fr !important; gap:18px; }
.xt-slip .xt-tabs{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:10px; overflow:visible; padding:0; }
@media (min-width:900px){ .xt-slip .xt-tabs{ grid-template-columns:repeat(6,1fr); } }
.xt-slip .xt-tabs button{ display:grid; justify-items:center; gap:10px; padding:16px 8px 14px; text-align:center; border-radius:16px; }
.xt-slip .xt-tabs button b{ font:700 .9rem/1.2 var(--body); }
.bx-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(66,193,72,.1); border:1px solid rgba(66,193,72,.3); transition:background .3s, transform .3s; }
.bx-ic svg{ width:22px; height:22px; fill:none; stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.xt-slip .xt-tabs button.on .bx-ic{ background:var(--green); transform:translateY(-2px); }
.xt-slip .xt-tabs button.on .bx-ic svg{ stroke:#04110a; }
.xt-slip .xt-tabs button i{ left:14px; right:14px; width:auto; transform-origin:left; transform:scaleX(0); }
.xt-slip .xt-tabs button.on i{ animation:bxBar 5s linear forwards; }
@keyframes bxBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.xt-slip .xt-tabs button.on i{ width:auto; }
.xt-slip .xt-panel{ gap:clamp(22px,3vw,40px); padding:clamp(22px,3.4vw,44px); min-height:400px; }
@media (min-width:760px){ .xt-slip .xt-panel{ grid-template-columns:1.1fr 1fr; } }
.bx-txt h3{ font-size:clamp(1.6rem,2.8vw,2.3rem) !important; margin-bottom:12px !important; }
.bx-txt > p{ font-size:1.05rem; margin-bottom:20px !important; max-width:44ch; }
.bx-txt ul{ margin:0 !important; }
.bx-txt li{ color:var(--text) !important; }
.bx-stage{ position:relative; display:grid; place-items:center; padding:18px 10px 28px; }
.bx-glow{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(66,193,72,.28), transparent 65%); animation:bsGlow 9s ease-in-out infinite alternate; pointer-events:none; }
.bx-phone{ position:relative; width:min(100%,300px); padding:12px 12px 16px; border-radius:30px; background:linear-gradient(160deg,#121c15,#060a07); border:1px solid rgba(66,193,72,.4); box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 5px rgba(255,255,255,.03); animation:zfloat 6s ease-in-out infinite; }
.bx-top{ display:flex; align-items:center; gap:8px; padding:6px 8px 12px; color:#fff; font:800 .82rem/1 var(--display); }
.bx-top svg{ width:20px; height:16px; fill:#42C148; }
.bx-top i{ margin-left:auto; width:34px; height:6px; border-radius:6px; background:rgba(255,255,255,.18); }
.bx-phone .slip{ max-width:none; box-shadow:none; }
.bx-chip{ position:absolute; right:0; bottom:6px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#0b120d; border:1px solid rgba(66,193,72,.5); color:#fff; font:700 .85rem/1 var(--body); box-shadow:0 12px 28px rgba(0,0,0,.45); animation:qaIn .6s .25s both, zfloat 5s 1s ease-in-out infinite; }
.bx-chip svg{ width:18px; height:18px; fill:none; stroke:#42C148; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:759px){ .bx-stage{ padding-bottom:10px; } .bx-chip{ position:relative; right:auto; bottom:auto; margin-top:16px; white-space:nowrap; animation:qaIn .6s .25s both; } .xt-slip .xt-tabs button{ padding:12px 6px; } .xt-slip .xt-tabs button b{ font-size:.82rem; } }
@media (prefers-reduced-motion: reduce){ .bx-phone, .bx-chip, .bx-glow{ animation:none; } }
html[data-theme="light"] .bx-phone, html[data-theme="light"] .bx-chip{ color:#fff; }

.ab-sv{ list-style:none; margin:6px 0 0; padding:10px 0 0; border-top:1px solid var(--line); display:grid; gap:6px; }
.ab-sv li{ position:relative; padding-left:14px; font-size:.8rem; line-height:1.3; color:var(--text); opacity:.85; }
.ab-sv li::before{ content:""; position:absolute; left:0; top:.45em; width:6px; height:6px; border-radius:2px; background:var(--green); }
.ab-how{ list-style:none; margin:clamp(20px,3vw,32px) 0 0; padding:0; display:grid; gap:14px; counter-reset:s; }
@media (min-width:700px){ .ab-how{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .ab-how{ grid-template-columns:repeat(4,1fr); } }
.ab-how li{ position:relative; padding:24px 22px; border-radius:var(--radius-lg); border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; }
.ab-how li span{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(66,193,72,.12); border:1px solid rgba(66,193,72,.4); color:var(--green); font:800 .9rem/1 var(--display); margin-bottom:14px; }
.ab-how li h3{ font-size:1.15rem; margin:0 0 6px; }
.ab-how li p{ margin:0; color:var(--muted); font-size:.95rem; }
@media (min-width:1080px){ .ab-how li:not(:last-child)::after{ content:""; position:absolute; top:44px; right:-1px; width:22px; height:2px; background:linear-gradient(90deg,var(--green),transparent); } }
@media (min-width:900px){ .qa-panel{ position:sticky !important; top:110px; } }

.lg-doc .lg-sec{ display:grid; gap:10px; padding-bottom:22px; border-bottom:1px solid rgba(11,15,12,.14); }
.lg-doc .lg-sec:last-child{ border-bottom:0; }
.lg-doc .lg-sec p{ margin:0; }
.lg-doc .lg-sec ul{ list-style:none; margin:2px 0; padding:0; display:grid; gap:8px; }
.lg-doc .lg-sec li{ position:relative; padding-left:20px; color:rgb(46,56,48); line-height:1.6; }
.lg-doc .lg-sec li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--green); }
.lg-intro{ font:600 clamp(1.05rem,1.4vw,1.2rem)/1.55 var(--body) !important; text-transform:none !important; max-width:64ch; padding-left:16px; border-left:3px solid var(--green); }
.prov-band.logos .pl-d img{ max-height:34px; max-width:190px; filter:none !important; }
.prov-band.logos .pl-sq img{ max-height:46px; }

.zs-art{ position:relative; min-height:440px; display:grid; place-items:center; isolation:isolate; }
.zsa-stripes{ position:absolute; inset:0 2% 8%; z-index:-1; background:repeating-linear-gradient(115deg, transparent 0 34px, rgba(66,193,72,.85) 34px 62px); -webkit-mask:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%); mask:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%); opacity:.9; border-radius:8px; }
.zs-art::after{ content:""; position:absolute; left:10%; right:10%; bottom:2%; height:60px; z-index:-1; background:radial-gradient(50% 100% at 50% 100%, rgba(66,193,72,.45), transparent 70%); filter:blur(6px); }
.zsa-phone{ width:min(300px,78%); padding:14px; border-radius:30px; background:linear-gradient(160deg,#111b14,#050806); border:1px solid rgba(66,193,72,.5); box-shadow:0 40px 80px rgba(0,0,0,.6), inset 0 0 0 5px rgba(255,255,255,.03); color:#fff; display:grid; gap:10px; }
@media (prefers-reduced-motion: no-preference){ .zsa-phone{ animation:zfloat 7s ease-in-out infinite; } }
.zsa-top{ display:flex; align-items:center; gap:8px; padding:4px 6px 2px; font:800 .9rem/1 var(--display); }
.zsa-top svg{ width:22px; height:18px; fill:#42C148; }
.zsa-live{ margin-left:auto; font:800 .62rem/1 var(--body); color:#fff; background:#e5484d; padding:4px 7px; border-radius:6px; }
@media (prefers-reduced-motion: no-preference){ .zsa-live{ animation:qaIn 1s ease infinite alternate; } }
.zsa-tabs{ display:flex; gap:6px; overflow:hidden; }
.zsa-tabs span{ flex:none; font:700 .68rem/1 var(--body); padding:6px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); }
.zsa-tabs span.on{ background:#42C148; border-color:#42C148; color:#04110a; }
.zsa-m{ padding:10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); display:grid; gap:7px; }
.zsa-mh{ display:flex; justify-content:space-between; font-size:.66rem; color:rgba(255,255,255,.55); }
.zsa-mh i{ font-style:normal; color:#42C148; font-weight:800; }
.zsa-teams{ display:flex; justify-content:space-between; font:800 .8rem/1.1 var(--display); }
.zsa-odds{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .zsa-odds.two{ grid-template-columns:repeat(2,1fr); }
.zsa-odds span{ display:flex; justify-content:space-between; align-items:center; padding:7px 8px; border-radius:8px; background:rgba(66,193,72,.12); border:1px solid rgba(66,193,72,.35); font-size:.66rem; color:rgba(255,255,255,.6); }
.zsa-odds b{ font:800 .82rem/1 var(--display); color:#42C148; transition:color .3s; }
.zsa-odds b.up{ color:#7dff83; } .zsa-odds b.dn{ color:#ff6b5a; }
.zsa-card{ position:absolute; display:grid; gap:3px; padding:12px 14px; border-radius:14px; background:#0b120d; border:1px solid rgba(66,193,72,.55); box-shadow:0 18px 36px rgba(0,0,0,.5); color:#fff; min-width:150px; }
.zsa-card small{ font:800 .62rem/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:#42C148; }
.zsa-card b{ font:800 1.05rem/1.1 var(--display); } .zsa-card span{ font-size:.72rem; color:rgba(255,255,255,.65); } .zsa-card span i{ font-style:normal; color:#42C148; font-weight:800; }
.zsa-c1{ left:2%; top:14%; } .zsa-c2{ right:2%; bottom:16%; }
.zsa-c2 b{ color:#42C148; }
@media (prefers-reduced-motion: no-preference){ .zsa-c1{ animation:zfloat 6s .8s ease-in-out infinite; } .zsa-c2{ animation:zfloat 6.5s 1.6s ease-in-out infinite; } }
.zsa-pill{ position:absolute; right:6%; top:8%; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:#42C148; color:#04110a; font:800 .78rem/1 var(--display); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.zsa-pill svg{ width:14px; height:14px; fill:#04110a; }
@media (max-width:899px){ .zs-art{ min-height:400px; margin-top:8px; } .zsa-card{ min-width:0; padding:10px 12px; } .zsa-c1{ left:0; top:6%; } .zsa-c2{ right:0; bottom:8%; } .zsa-pill{ right:0; top:auto; bottom:1%; } }
@media (max-width:420px){ .zsa-card b{ font-size:.9rem; } .zsa-pill{ display:none; } }

.sol-strip .strip-art img[hidden]{ display:none !important; }
.sol-strip .strip-svg{ width:150px; height:80px; overflow:visible; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion: no-preference){
  .ss-spin{ transform-origin:122px 45px; animation:ibSpin 6s linear infinite; }
  .ss-ball{ transform-origin:48px 45px; animation:ssBounce 2.4s ease-in-out infinite; }
}
@keyframes ssBounce{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-5px) rotate(-12deg); } }
@media (max-width:860px){ .sol-strip .strip-svg{ width:170px; height:90px; } }

.zsa-c1{ left:0 !important; top:40% !important; } .zsa-c2{ right:0 !important; bottom:6% !important; }
.zsa-card{ min-width:136px; }
@media (min-width:900px){ .zsa-phone{ width:min(290px,60%); } }
@media (max-width:899px){
  .zs-art{ grid-template-columns:1fr 1fr; gap:12px; min-height:0; padding-top:44px; }
  .zsa-phone{ grid-column:1 / -1; width:min(320px,100%); justify-self:center; }
  .zsa-card{ position:static !important; animation:none !important; min-width:0; }
  .zsa-pill{ display:inline-flex !important; top:0 !important; right:auto !important; left:50% !important; bottom:auto !important; transform:translateX(-50%); }
  .zsa-stripes{ inset:40px 0 30%; }
}
body[data-reference-site='true'] main:has(.reference-site[data-reference-view='item']) + .site-footer{ margin-top:calc(-1 * clamp(56px, 7vw, 96px)); }