/* ============================================================
   FLOATING TOP BAR — three separate capsules, as in the reference
   ============================================================ */
.topbar{
  position:sticky;top:14px;z-index:500;pointer-events:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding-top:14px;margin-bottom:-82px;
}
.topbar>*{pointer-events:auto}
.navcap{
  justify-self:center;display:flex;align-items:center;gap:3px;padding:6px;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke);border-radius:var(--r-pill);position:relative;
}
.navcap a{
  position:relative;z-index:2;padding:11px 19px;border-radius:var(--r-pill);
  font-size:.855rem;font-weight:600;color:var(--muted);text-decoration:none;
  transition:color .3s var(--ease);white-space:nowrap;
}
.navcap a:hover{color:var(--text)}
.navcap a[aria-current="page"]{color:var(--on-ember)}
/* Sliding indicator — one element that travels between items */
.navpip{
  position:absolute;z-index:1;top:6px;height:calc(100% - 12px);border-radius:var(--r-pill);
  background:var(--ember-fill);transition:left .45s var(--ease),width .45s var(--ease);
  left:6px;width:0;
}
/* Client logo. Two artworks — one for dark grounds, one for light — declared
   once as custom properties and swapped by theme, plus forced to the dark
   artwork while the header floats over the photographic band. */
/* --logo-dark / --logo-light -> 05-media.css */
.wordmark{
  justify-self:start;display:block;width:148px;height:34px;flex:none;
  background-image:var(--logo-dark);background-size:contain;
  background-repeat:no-repeat;background-position:left center;
  text-decoration:none;transition:opacity .25s var(--ease);
}
.wordmark:hover{opacity:.78}
:root[data-im-theme="light"] .wordmark{background-image:var(--logo-light)}
.topbar.over-dark .wordmark{background-image:var(--logo-dark)}
.ftr .wordmark{width:174px;height:40px}
.topacts{justify-self:end;display:flex;align-items:center;gap:10px}
.topacts .pill{min-height:48px;padding:7px 7px 7px 20px;font-size:.855rem}
.topacts .pill-ico{width:32px;height:32px}
.burger{
  display:none;width:52px;height:52px;border-radius:50%;flex:none;place-items:center;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke);color:var(--text);
}
/* Theme switch — same shape as the burger so they read as a pair on mobile */
.themetoggle{
  display:grid;width:52px;height:52px;border-radius:50%;flex:none;place-items:center;
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--stroke);color:var(--text);padding:0;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.themetoggle:hover{background:var(--tint-2);border-color:var(--stroke-2)}
.themetoggle svg{width:20px;height:20px;grid-area:1/1;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.t-moon{opacity:0;transform:rotate(-90deg) scale(.6)}
:root[data-im-theme="light"] .t-sun{opacity:0;transform:rotate(90deg) scale(.6)}
:root[data-im-theme="light"] .t-moon{opacity:1;transform:none}
.burger svg{width:20px;height:20px}

/* Full-screen mobile sheet */
.sheet{
  position:fixed;inset:0;z-index:800;background:var(--void-2);
  display:flex;flex-direction:column;padding:22px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.sheet nav{display:flex;flex-direction:column;flex:1}
.sheet nav a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 4px;font-size:1.7rem;font-weight:700;letter-spacing:-.04em;
  text-decoration:none;border-bottom:1px solid var(--stroke);
  opacity:0;transform:translateY(16px);
}
.sheet.open nav a{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sheet.open nav a:nth-child(1){transition-delay:.06s}
.sheet.open nav a:nth-child(2){transition-delay:.11s}
.sheet.open nav a:nth-child(3){transition-delay:.16s}
.sheet.open nav a:nth-child(4){transition-delay:.21s}
.sheet.open nav a:nth-child(5){transition-delay:.26s}
.sheet-foot{display:flex;flex-direction:column;gap:11px;padding-top:24px}
.sheet-foot .pill{justify-content:space-between;width:100%}

/* ============================================================
   HERO — a rounded cinematic frame inset from the page edges
   ============================================================ */
/* Hero sits in the same container as every other section */
.chero{padding:0}
/* Backdrop bleeds edge to edge; the copy inside is constrained to the same
   container as the nav and every section, so all left edges line up. */
.frame{
  position:relative;border-radius:0;overflow:hidden;background:#08080A;
  min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}
.frame-media{position:absolute;inset:0;z-index:0}
/* .frame-media -> 05-media.css */
.frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 30%, rgba(8,8,10,.42) 56%, rgba(8,8,10,.20) 78%, rgba(8,8,10,.55) 100%),
    linear-gradient(to bottom, rgba(8,8,10,.78) 0%, rgba(8,8,10,0) 30%, rgba(8,8,10,.12) 58%, rgba(8,8,10,.42) 82%, rgba(8,8,10,.55) 100%);
}
.frame-in{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:38px;
  width:min(1340px,100% - 2*var(--gut));margin-inline:auto;padding:150px 0 46px;
}
.hero-copy{max-width:min(660px,54%);display:flex;flex-direction:column;gap:22px}
.hero-copy h1{font-size:clamp(2.2rem,4.05cqi,3.5rem)}
.hero-copy h1 em{font-style:normal;color:var(--ember)}
.hero-copy p{font-size:clamp(.98rem,1.15cqi,1.1rem);line-height:1.6;color:#C6C6CB;max-width:46ch}
.hero-short{display:none}
.hero-dots{display:none;gap:7px;align-items:center}
.hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--stroke-2);
  transition:width .35s var(--ease),background .35s var(--ease);cursor:pointer}
.hero-dots button.on{width:26px;background:var(--ember)}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;align-items:stretch}
.hstat{padding-right:34px;margin-right:34px;border-right:1px solid var(--stroke);display:flex;flex-direction:column;gap:5px}
.hstat:last-child{border-right:0;padding-right:0;margin-right:0}
.hstat b{font-size:clamp(1.7rem,3cqi,2.5rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.hstat span{font-size:.79rem;line-height:1.4;color:var(--muted);max-width:15ch}
.hero-ctrl{
  display:flex;align-items:center;gap:16px;padding:9px 9px 9px 18px;border-radius:var(--r-pill);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--stroke);flex:none;
}
.hero-ctrl button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--stroke-2);background:transparent;
  color:var(--text);display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s;
}
.hero-ctrl button:hover{background:var(--ember-fill);border-color:var(--ember-fill);color:var(--on-ember)}
.hero-ctrl svg{width:15px;height:15px}
.ctrl-bar{width:74px;height:2px;background:var(--stroke-2);border-radius:2px;overflow:hidden}
.ctrl-bar i{display:block;height:100%;width:0;background:var(--ember)}
.ctrl-n{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ctrl-n small{color:var(--muted-2);font-weight:600}

/* Staggered entrance, replayed on every slide change */
@keyframes slIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-copy.anim .eyebrow{animation:slIn .50s var(--ease) .04s backwards}
.hero-copy.anim h1{animation:slIn .62s var(--ease) .12s backwards}
.hero-copy.anim .hero-long,.hero-copy.anim .hero-short{animation:slIn .62s var(--ease) .24s backwards}
.hero-copy.anim .pills{animation:slIn .62s var(--ease) .36s backwards}
/* El botón de pausa lleva los dos iconos superpuestos y alterna la opacidad.
   `grid-area:1/1` los mete en la misma celda: sin él el grid crea dos filas y
   el icono visible queda pegado al borde de arriba del círculo.
   Va por [data-sl], no por id — en el tema puede haber más de un hero. */
[data-sl="play"]{display:grid;place-items:center}
[data-sl="play"] svg{grid-area:1/1;transition:opacity .2s var(--ease)}
.pi-play{opacity:0}
[data-sl="play"][aria-pressed="true"] .pi-pause{opacity:0}
[data-sl="play"][aria-pressed="true"] .pi-play{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero-copy.anim .eyebrow,.hero-copy.anim h1,
  .hero-copy.anim .hero-long,.hero-copy.anim .hero-short,
  .hero-copy.anim .pills{animation:none}
}