/* Digitae — recargas multiregión. HTML + CSS sin frameworks.
   Paleta del logo: amarillo de la flecha, rojo de la cinta y blanco sobre casi negro. */

:root {
  --tinta: #0B0C10;
  --tinta-2: #111319;
  --tinta-3: #171A22;
  --borde: rgba(255, 255, 255, .09);
  --borde-2: rgba(255, 255, 255, .16);
  --texto: #F3F1EA;
  --texto-2: #B6B8C1;
  --texto-3: #8E919C;
  --sol: #F9E531;
  --sol-2: #E3CC14;
  --rojo: #EE1D16;
  --rojo-osc: #B3150F;
  --papel: #F4F2EB;
  --papel-borde: #E3DFD2;
  --tinta-txt: #14151A;
  --tinta-txt-2: #4B4E58;
  --ok: #8CF0BD;
  --gut: clamp(16px, 4vw, 40px);
  --curva: clamp(24px, 3.4vw, 44px);
  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sale: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 6px; }
.seccion--clara :focus-visible, .ganancia :focus-visible { outline-color: var(--tinta-txt); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.envoltura { width: min(1240px, 100% - 2 * var(--gut)); margin-inline: auto; }

.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--sol); color: var(--tinta-txt); font-weight: 700;
  transition: top .2s;
}
.saltar:focus { top: 12px; }

.progreso {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; pointer-events: none;
  background: linear-gradient(90deg, var(--sol), var(--rojo));
  clip-path: inset(0 100% 0 0);
}

/* ---------- botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-stretch: 105%; font-size: 1rem; line-height: 1.1; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--sol { background: var(--sol); color: #16150A; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.btn--sol:hover { background: #FFF06B; }
.btn--fantasma { border: 1.5px solid var(--borde-2); background: rgba(255, 255, 255, .03); color: var(--texto); }
.btn--fantasma:hover { border-color: var(--sol); color: var(--sol); }
.btn--tinta { background: var(--tinta-txt); color: #fff; }
.btn--tinta:hover { background: #000; }
.btn--chico { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn--chico svg { width: 18px; height: 18px; }
.btn--ancho { width: 100%; }

.enlace {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.enlace svg { width: 18px; height: 18px; transition: translate .25s var(--sale); }
.enlace:hover svg { translate: 4px 0; }
.enlace--grande { font-size: 1.15rem; }
.enlace--chico { font-size: .92rem; text-decoration-thickness: 2px; white-space: nowrap; }
.forma__nota a, .footer__base p a { text-decoration: underline; text-underline-offset: 3px; }
.footer__base p a:hover { color: var(--sol); }

/* ---------- menú ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px;
  background: rgba(11, 12, 16, .66);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s;
}
.nav.solida { border-bottom-color: var(--borde); background: rgba(11, 12, 16, .84); }
.nav__in { width: min(1240px, 100% - 2 * var(--gut)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.nav__logo img { width: auto; height: 48px; }
.nav__menu { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav__menu ul { display: flex; gap: 26px; }
.nav__menu ul a { position: relative; font-size: .95rem; font-weight: 500; color: var(--texto-2); padding: 6px 0; transition: color .2s; }
.nav__menu ul a:hover { color: var(--texto); }
.nav__menu ul a.activo { color: var(--texto); }
.nav__menu ul a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--sol); scale: 0 1; transition: scale .3s var(--sale);
}
.nav__menu ul a.activo::after { scale: 1 1; }
.nav__acciones { display: flex; gap: 10px; }
.nav__ingresar, .nav__hamb { display: none; }

@media (max-width: 1079px) {
  .nav__ingresar {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--borde-2);
    font-size: .88rem; font-weight: 700;
  }
  .nav__ingresar svg { width: 17px; height: 17px; }
  .nav__hamb {
    display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; border-radius: 12px;
    border: 1.5px solid var(--borde-2);
  }
  .nav__hamb span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--texto); transition: translate .3s, rotate .3s; }
  .nav[data-abierto] .nav__hamb span:first-child { translate: 0 4px; rotate: 45deg; }
  .nav[data-abierto] .nav__hamb span:last-child { translate: 0 -4px; rotate: -45deg; }
  .nav__menu {
    position: fixed; inset: 76px 0 0; margin: 0; padding: 28px var(--gut) 40px;
    flex-direction: column; align-items: stretch; gap: 28px;
    background: var(--tinta); border-top: 1px solid var(--borde);
    opacity: 0; visibility: hidden; translate: 0 -12px; transition: opacity .3s, translate .3s, visibility 0s .3s;
    overflow-y: auto;
  }
  .nav[data-abierto] .nav__menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .nav__menu ul { flex-direction: column; gap: 0; }
  .nav__menu ul a { display: block; padding: 16px 0; font-size: 1.35rem; font-weight: 700; font-stretch: 106%; color: var(--texto); border-bottom: 1px solid var(--borde); }
  .nav__menu ul a::after { display: none; }
  .nav__acciones { flex-direction: column; }
  .nav__acciones .btn { min-height: 52px; font-size: 1rem; }
}
@media (max-width: 420px) {
  .nav__logo img { height: 42px; }
  .nav__in { gap: 10px; }
}

/* ---------- títulos y bloques comunes ---------- */
.seccion { position: relative; padding: clamp(80px, 10vw, 136px) 0 calc(clamp(80px, 10vw, 136px) + var(--curva)); overflow-x: clip; }
.seccion + .seccion, .cias + .seccion { margin-top: calc(-1 * var(--curva)); border-radius: var(--curva) var(--curva) 0 0; }
.seccion--clara { background: var(--papel); color: var(--tinta-txt); }
.pasos, .alta { background: var(--tinta); }

.cabeza { max-width: 780px; margin-bottom: clamp(40px, 6vw, 64px); }
.cabeza--centro { margin-inline: auto; text-align: center; }
.cabeza--centro .lead { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .8rem; font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .16em; color: var(--sol);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.seccion--clara .eyebrow { color: var(--rojo-osc); }
.titulo {
  margin: 16px 0 18px; font-size: clamp(2.15rem, 4.6vw, 3.9rem); line-height: 1.03;
  font-weight: 800; font-stretch: 106%; letter-spacing: -.025em; text-wrap: balance;
}
.titulo em, .titulo .acento > span { font-style: italic; color: var(--sol); }
.seccion--clara .titulo em, .seccion--clara .titulo .acento > span {
  color: var(--tinta-txt);
  background: linear-gradient(transparent 60%, var(--sol) 60%, var(--sol) 90%, transparent 90%);
}
.titulo.dividido .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.titulo.dividido .palabra > span { display: inline-block; }
.lead { max-width: 40em; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--texto-2); }
.seccion--clara .lead { color: var(--tinta-txt-2); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  min-height: max(640px, 100svh);
  padding: calc(76px + clamp(28px, 6vh, 72px)) 0 clamp(96px, 13vh, 128px);
  display: flex; align-items: center;
}
.hero__fondo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 58% at 74% 46%, rgba(249, 229, 49, .11), transparent 70%),
    radial-gradient(30% 34% at 90% 88%, rgba(238, 29, 22, .10), transparent 70%),
    linear-gradient(180deg, #0D0E13, var(--tinta) 70%);
}
.hero__fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(34% 46% at 76% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(34% 46% at 76% 50%, #000 10%, transparent 75%);
}
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 72px); }
.hero__rotulo {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .03);
  font-size: .78rem; font-weight: 600; font-stretch: 110%; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2);
}
.vivo { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: none; }
.vivo::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rojo); opacity: 0; animation: latido 2.2s ease-out infinite; }
@keyframes latido { 0% { opacity: .8; scale: .5; } 100% { opacity: 0; scale: 1.6; } }
.hero__titulo {
  margin: clamp(16px, 3vh, 24px) 0 clamp(14px, 2.4vh, 22px);
  font-size: clamp(2.35rem, min(4.6vw, 8.8vh), 4.15rem); line-height: 1; font-weight: 800; font-stretch: 108%; letter-spacing: -.03em;
}
.hero__titulo .linea { display: block; overflow: hidden; padding: 0 .05em .08em; margin: 0 -.05em -.08em; }
.hero__titulo .linea > span { display: inline-block; }
.hero__titulo em { font-style: italic; color: var(--sol); }
.hero__lead { max-width: 33em; font-size: clamp(1.05rem, min(1.35vw, 2.4vh), 1.25rem); color: var(--texto-2); }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.6vh, 32px); }
.hero__datos { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: clamp(22px, 4vh, 40px); padding-top: clamp(16px, 2.6vh, 22px); border-top: 1px solid var(--borde); }
.hero__datos li { display: grid; }
.hero__datos strong { font-size: clamp(1.4rem, min(2vw, 3.6vh), 1.75rem); font-weight: 800; font-stretch: 112%; line-height: 1.15; letter-spacing: -.02em; }
.hero__datos li:last-child strong { color: var(--sol); }
.hero__datos span { font-size: .86rem; color: var(--texto-3); }

.hero__escena { position: relative; }
.mapa { position: relative; width: 100%; aspect-ratio: 80 / 53; }
.mapa__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(17, 19, 25, .9); border: 1px solid var(--borde-2);
  font: 500 .74rem/1 var(--mono); color: var(--texto);
  translate: -50% -150%; animation: chip 2.6s var(--sale) both;
}
.chip svg { width: 14px; height: 14px; color: var(--ok); }
.mapa__nodo {
  position: absolute; left: 86%; top: 19%; translate: -50% 26px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(17, 19, 25, .92); border: 1px solid rgba(249, 229, 49, .4);
  font-size: .72rem; font-weight: 700; font-stretch: 106%; color: var(--texto);
}
.mapa__nodo svg { width: 14px; height: 14px; color: var(--sol); }
.m .hero .mapa__nodo { opacity: 0; }
.m .hero.listo .mapa__nodo { animation: aparece .7s .9s var(--sale) both; }
@keyframes aparece { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@media (max-width: 560px) { .mapa__nodo { left: 80%; font-size: .66rem; translate: -50% 18px; } }
.chip b { color: var(--sol); font-weight: 500; }
@keyframes chip {
  0% { opacity: 0; scale: .6; }
  12% { opacity: 1; scale: 1; }
  78% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .9; }
}

.ticket {
  position: absolute; left: -7%; bottom: -12%; width: min(286px, 56%);
  padding: 16px 16px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #1B1E28, #12141B);
  border: 1px solid var(--borde-2);
  box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .85);
  font-size: .86rem;
}
.ticket__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--texto-2); font-weight: 600; }
.ticket__marca { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(249, 229, 49, .12); color: var(--sol); }
.ticket__marca svg { width: 18px; height: 18px; }
.ticket__hora { margin-left: auto; font: 500 .78rem var(--mono); color: var(--texto-3); }
.ticket__datos { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed var(--borde-2); }
.ticket__datos div { display: flex; justify-content: space-between; gap: 12px; }
.ticket__datos dt { color: var(--texto-3); }
.ticket__datos dd { font-weight: 600; }
.ticket__estado { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--ok); font-weight: 600; }
.ticket__estado svg { width: 18px; height: 18px; }
.ticket__ganancia {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 12px; background: rgba(249, 229, 49, .09); border: 1px solid rgba(249, 229, 49, .28);
  color: var(--texto-2);
}
.ticket__ganancia strong { color: var(--sol); font-size: 1.15rem; }
.ticket.cambia .ticket__datos dd, .ticket.cambia .ticket__ganancia strong { animation: cambia .55s var(--sale); }
.ticket.cambia .ticket__estado { animation: cambia .55s .18s var(--sale) both; }
@keyframes cambia { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

.hero__bajar {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 3.4vh, 30px); margin-inline: auto; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--texto-3);
}
.hero__bajar svg { width: 18px; height: 18px; animation: baja 1.8s ease-in-out infinite; }
@keyframes baja { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }

@media (max-width: 959px) {
  .hero { min-height: 0; display: block; padding-bottom: 52px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__escena { width: min(100%, 600px); margin-inline: auto; }
  .ticket { position: relative; left: auto; bottom: auto; width: min(300px, 84%); margin: -18px auto 0 0; }
}
@media (max-width: 560px) {
  .hero__botones .btn { flex: 1 1 100%; }
  .hero__datos { gap: 10px 24px; }
}

/* ---------- compañías ---------- */
.cias { position: relative; padding: clamp(52px, 7vw, 76px) 0 calc(clamp(52px, 7vw, 76px) + var(--curva)); background: linear-gradient(180deg, var(--tinta), #0E1016); border-top: 1px solid var(--borde); }
.cias__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 20px clamp(24px, 4vw, 56px); }
.cias__t { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; font-weight: 700; font-stretch: 106%; letter-spacing: -.015em; color: var(--texto); text-wrap: balance; }
.cias__t strong { color: var(--sol); font-weight: 800; }
.cias__sub { margin-top: 8px; font-size: .98rem; color: var(--texto-2); }
.cias__mas { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -10px; }
.cias__mas li {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(255, 255, 255, .025);
  font-size: .88rem; font-weight: 600; font-stretch: 104%; color: var(--texto-2); white-space: nowrap;
}
.cias__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cias__logos li {
  display: grid; place-items: center; height: 92px; padding: 0 18px; border-radius: 18px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .025);
}
.cias__logos img { width: auto; height: 28px; max-width: 100%; object-fit: contain; }
.cias__logos .cia-att { height: 40px; }
@media (max-width: 899px) {
  .cias__in { grid-template-columns: minmax(0, 1fr); }
  .cias__cab { text-align: center; }
  .cias__mas { grid-column: 1; justify-content: center; margin-top: 0; }
  .cias__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cias__logos li { height: 80px; }
  .cias__logos img { height: 24px; }
  .cias__logos .cia-att { height: 34px; }
}

/* ---------- conoce ---------- */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
.cifra { position: relative; overflow: hidden; padding: clamp(24px, 2.6vw, 34px); border-radius: 26px; background: var(--tinta-2); color: var(--texto); }
.cifra::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249, 229, 49, .16), transparent); pointer-events: none;
}
.cifra__n {
  display: block; margin-bottom: clamp(18px, 2.6vw, 30px);
  font-size: clamp(2.9rem, 5.2vw, 4.5rem); line-height: 1; font-weight: 800; font-stretch: 112%; letter-spacing: -.035em;
  color: var(--sol); font-variant-numeric: tabular-nums;
}
.cifra h3 { font-size: 1.2rem; font-weight: 800; font-stretch: 104%; margin-bottom: 6px; }
.cifra p { font-size: .98rem; color: var(--texto-2); }
.cifra--sol { background: var(--sol); color: var(--tinta-txt); }
.cifra--sol::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent); }
.cifra--sol .cifra__n { color: var(--tinta-txt); }
.cifra--sol p { color: #3F3B12; }

.cargo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px;
  margin-top: 18px; padding: 18px 24px; border-radius: 22px; border: 1.5px dashed #CFC9B8; background: rgba(255, 255, 255, .55);
}
.cargo__n { font-size: 1.6rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; color: var(--rojo-osc); font-variant-numeric: tabular-nums; }
.cargo p { color: var(--tinta-txt-2); font-size: .98rem; }
.cargo strong { color: var(--tinta-txt); }
@media (max-width: 560px) { .cargo { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 20px; } }
.conoce__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.caja { padding: clamp(24px, 3vw, 38px); border-radius: 26px; background: #fff; border: 1px solid var(--papel-borde); }
.caja__t { margin-bottom: 14px; font-size: 1.4rem; line-height: 1.2; font-weight: 800; font-stretch: 106%; }
.checks { margin-bottom: 22px; }
.checks li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--papel-borde); font-weight: 600; }
.checks svg { width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 50%; background: var(--sol); color: var(--tinta-txt); }
.pagos { margin-bottom: 24px; }
.pagos li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--papel-borde); }
.pagos__n { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--tinta-txt); color: var(--sol); font-weight: 800; font-stretch: 112%; }
.pagos strong { display: block; font-size: 1.08rem; font-weight: 800; }
.pagos p { color: var(--tinta-txt-2); font-size: .98rem; }
@media (max-width: 899px) {
  .cifras, .conoce__dos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cómo funciona ---------- */
.pasos__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pasos__lista { position: relative; padding-left: 70px; }
.pasos__lista::before, .pasos__lista::after {
  content: ''; position: absolute; left: 22px; top: 12vh; bottom: 12vh; width: 2px; border-radius: 2px;
}
.pasos__lista::before { background: var(--borde-2); }
.pasos__lista::after {
  background: linear-gradient(180deg, var(--sol), var(--rojo));
  transform-origin: top; scale: 1 var(--p, 1);
}
.paso { position: relative; min-height: 50vh; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.paso__n {
  position: absolute; left: -70px; top: 50%; translate: 0 -50%;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--borde-2); background: var(--tinta); color: var(--texto-3);
  font: 500 .86rem var(--mono); transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s;
}
.paso h3 { margin-bottom: 8px; font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.15; font-weight: 800; font-stretch: 106%; letter-spacing: -.015em; }
.paso p { max-width: 30em; color: var(--texto-2); }
.paso p strong { color: var(--texto); font-weight: 700; }
.paso .enlace { margin-top: 14px; }
.paso__txt { display: flex; flex-direction: column; align-items: flex-start; }
.ancla-vieja { position: absolute; top: 0; }
.paso.hecho .paso__n, .paso.activo .paso__n { background: var(--sol); border-color: var(--sol); color: var(--tinta-txt); }
.paso.activo .paso__n { outline: 2px solid rgba(249, 229, 49, .32); outline-offset: 5px; }
.m .paso__txt { transition: opacity .5s; }
.m .paso:not(.activo) .paso__txt { opacity: .34; }

.pasos__escena { position: sticky; top: max(96px, calc(50vh - 230px)); }
.portal {
  height: 460px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, #161922, #101218);
  border: 1px solid var(--borde-2);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .9);
  font-size: .86rem;
}
.portal__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.portal__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texto); }
.portal__logo svg { width: 20px; height: 20px; color: var(--sol); }
.portal__usuario { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--borde); font: 500 .76rem var(--mono); }
.portal__usuario svg { width: 15px; height: 15px; }
.portal__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.portal__menu { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--borde); }
.portal__menu li {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
  color: var(--texto-3); font-size: .82rem; line-height: 1.25; transition: background-color .35s, color .35s;
}
.portal__menu svg { width: 18px; height: 18px; flex: none; }
.portal[data-pantalla="1"] [data-de="1"], .portal[data-pantalla="2"] [data-de="2"],
.portal[data-pantalla="3"] [data-de="3"], .portal[data-pantalla="4"] [data-de="4"] { background: rgba(249, 229, 49, .1); color: var(--sol); }
.portal__pantallas { position: relative; min-height: 0; }
.pnt {
  position: absolute; inset: 0; padding: 22px 24px; overflow: hidden;
  opacity: 0; visibility: hidden; translate: 0 14px;
  transition: opacity .4s, translate .5s var(--sale), visibility 0s .5s;
}
.portal[data-pantalla="0"] .pnt--ingreso, .portal[data-pantalla="1"] .pnt--recargas, .portal[data-pantalla="2"] .pnt--clientes,
.portal[data-pantalla="3"] .pnt--reportes, .portal[data-pantalla="4"] .pnt--operaciones {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: .12s, .12s, 0s;
}
.pnt__t { margin-bottom: 14px; font-size: 1.05rem; font-weight: 800; font-stretch: 104%; color: var(--texto); }
.pnt__l { margin: 12px 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); }
.campo {
  display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--borde-2); background: rgba(255, 255, 255, .03); color: var(--texto); font-size: .84rem;
}
.mini-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--sol); color: var(--tinta-txt); font-weight: 700; font-size: .78rem; white-space: nowrap;
}
.mini-btn--linea { background: transparent; border: 1px solid var(--borde-2); color: var(--texto-2); }
.mini-btn--ancho { width: 100%; height: 42px; font-size: .86rem; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.pildoras span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde-2); color: var(--texto-2); font-size: .78rem; transition: background-color .35s, color .35s, border-color .35s; }
.pildoras span.on { background: var(--sol); border-color: var(--sol); color: var(--tinta-txt); font-weight: 700; }
.pildoras--sm span { padding: 4px 10px; font-size: .74rem; }
.pildoras span.mas { border-style: dashed; color: var(--texto-3); }
.aviso {
  display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 12px;
  background: rgba(140, 240, 189, .08); border: 1px solid rgba(140, 240, 189, .3); color: var(--ok); font-weight: 600;
  opacity: 0; translate: 0 8px; transition: opacity .45s, translate .45s var(--sale);
}
.aviso svg { width: 18px; height: 18px; flex: none; }
.aviso b { margin-left: auto; color: var(--sol); font-weight: 500; }

/* 0: ingreso */
.acceso { display: grid; gap: 12px; max-width: 300px; margin: 6px auto 0; padding: 20px; border-radius: 16px; background: #0D0F14; border: 1px solid var(--borde); }
.acceso__marca { width: 40px; height: 40px; margin: 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(249, 229, 49, .12); color: var(--sol); }
.acceso__marca svg { width: 26px; height: 26px; }
.acceso__t { text-align: center; font-weight: 700; color: var(--texto); }
.acceso label { display: grid; gap: 6px; font-size: .72rem; color: var(--texto-3); }
.acceso .mini-btn { height: 40px; }
.tecleo::after { content: '|'; margin-left: 1px; color: var(--sol); animation: cursor 1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.puntos { display: inline-flex; gap: 5px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto); }

/* 1: recargas */
.pnt--recargas .campo { max-width: 220px; }

/* 2: clientes */
.tabla__f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--borde); border-radius: 8px; transition: background-color .4s; }
.tabla__f--cab { padding-top: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); border-radius: 0; }
.barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.barra i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--sol-2), var(--sol)); transition: width 1s var(--sale); }

/* 3: reportes */
.grafica { display: flex; align-items: flex-end; gap: 10px; height: 168px; margin-top: 16px; padding: 0 4px; border-bottom: 1px solid var(--borde-2); }
.grafica i { flex: 1; height: calc(var(--v) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--sol), rgba(249, 229, 49, .22)); transform-origin: bottom; transition: scale .7s var(--sale); }
.reporte__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.excel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(140, 240, 189, .1); color: var(--ok); font-weight: 600; font-size: .78rem; }
.excel svg { width: 16px; height: 16px; }

/* 4: operaciones */
.bloqueo { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; padding: 16px; border-radius: 14px; border: 1px solid var(--borde-2); background: rgba(255, 255, 255, .02); }
.bloqueo__i { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(226, 68, 31, .15); color: #FF8F70; transition: background-color .5s, color .5s; }
.bloqueo__i svg { width: 22px; height: 22px; overflow: visible; }
.bloqueo b { display: block; color: var(--texto); }
.bloqueo__est { display: grid; font-size: .8rem; }
.bloqueo__est > span { grid-area: 1 / 1; transition: opacity .4s; }
.bloqueo__est .a { color: #FF8F70; }
.bloqueo__est .b { color: var(--ok); opacity: 0; }

/* lo que pasa dentro de cada pantalla (solo con coreografía) */
.m .pnt--recargas .pildoras span.on { background: transparent; border-color: var(--borde-2); color: var(--texto-2); font-weight: 400; }
.m .portal[data-pantalla="1"] .pnt--recargas .pildoras span.on { background: var(--sol); border-color: var(--sol); color: var(--tinta-txt); font-weight: 700; transition-delay: .5s; }
.m .portal[data-pantalla="1"] .pnt--recargas .pildoras--monto span.on { transition-delay: .9s; }
.portal[data-pantalla="1"] .pnt--recargas .aviso, .portal[data-pantalla="2"] .pnt--clientes .aviso { opacity: 1; translate: 0 0; transition-delay: 1.35s; }
.m .tabla__f--elegida .mini-btn { animation: none; }
.portal[data-pantalla="2"] .tabla__f--elegida { background: rgba(249, 229, 49, .06); transition-delay: .5s; }
.portal[data-pantalla="2"] .tabla__f--elegida .barra i { width: 62%; transition-delay: 1.2s; }
.m .grafica i { scale: 1 0; }
.m .portal[data-pantalla="3"] .grafica i { scale: 1 1; }
.portal[data-pantalla="3"] .grafica i:nth-child(2) { transition-delay: .08s; }
.portal[data-pantalla="3"] .grafica i:nth-child(3) { transition-delay: .16s; }
.portal[data-pantalla="3"] .grafica i:nth-child(4) { transition-delay: .24s; }
.portal[data-pantalla="3"] .grafica i:nth-child(5) { transition-delay: .32s; }
.portal[data-pantalla="3"] .grafica i:nth-child(6) { transition-delay: .4s; }
.portal[data-pantalla="3"] .grafica i:nth-child(7) { transition-delay: .48s; }
.portal[data-pantalla="4"] .bloqueo__i { background: rgba(140, 240, 189, .12); color: var(--ok); transition-delay: 1.1s; }
.portal[data-pantalla="4"] .bloqueo__i .arco { translate: 0 -3px; }
.portal[data-pantalla="4"] .bloqueo__est .a { opacity: 0; transition-delay: 1.1s; }
.portal[data-pantalla="4"] .bloqueo__est .b { opacity: 1; transition-delay: 1.1s; }
.portal[data-pantalla="4"] .pnt--operaciones .mini-btn { animation: presiona .5s .7s both; }
@keyframes presiona { 50% { scale: .95; filter: brightness(.9); } }
.m .puntos i { opacity: 0; transition: opacity .1s; }
.m .portal[data-pantalla="0"] .puntos i { opacity: 1; }
.portal[data-pantalla="0"] .puntos i:nth-child(1) { transition-delay: 1.1s; }
.portal[data-pantalla="0"] .puntos i:nth-child(2) { transition-delay: 1.18s; }
.portal[data-pantalla="0"] .puntos i:nth-child(3) { transition-delay: 1.26s; }
.portal[data-pantalla="0"] .puntos i:nth-child(4) { transition-delay: 1.34s; }
.portal[data-pantalla="0"] .puntos i:nth-child(5) { transition-delay: 1.42s; }
.portal[data-pantalla="0"] .puntos i:nth-child(6) { transition-delay: 1.5s; }
.portal[data-pantalla="0"] .puntos i:nth-child(7) { transition-delay: 1.58s; }
.portal[data-pantalla="0"] .puntos i:nth-child(8) { transition-delay: 1.66s; }

.pasos__puntos { display: none; }

@media (max-width: 959px) {
  .pasos__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pasos__escena { order: -1; top: 84px; z-index: 2; padding-bottom: 12px; background: linear-gradient(var(--tinta) 86%, transparent); }
  .portal { height: 300px; font-size: .8rem; }
  .portal__barra { padding: 10px 14px; }
  .portal__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .portal__menu { flex-direction: row; justify-content: space-between; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--borde); }
  .portal__menu li { flex: 1; justify-content: center; padding: 8px 4px; }
  .portal__menu li span { display: none; }
  .pnt { padding: 14px 16px; }
  .pnt__t { margin-bottom: 8px; font-size: .95rem; }
  .pnt__l { margin: 8px 0 5px; }
  .acceso { gap: 8px; padding: 12px 14px; margin-top: 0; }
  .acceso__marca, .acceso__t { display: none; }
  .campo { height: 34px; }
  .acceso .mini-btn { height: 34px; }
  .grafica { height: 92px; margin-top: 10px; }
  .aviso { margin-top: 10px; padding: 8px 12px; }
  .pasos__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
  .pasos__puntos li { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-2); transition: background-color .3s, width .3s; }
  .pasos__puntos li.on { width: 22px; border-radius: 99px; background: var(--sol); }
  .pasos__lista { padding-left: 58px; }
  .pasos__lista::before, .pasos__lista::after { left: 18px; top: 8vh; bottom: 8vh; }
  .paso { min-height: 30vh; }
  .paso__n { left: -58px; width: 38px; height: 38px; font-size: .78rem; }
}
@media (max-width: 400px) {
  .portal__usuario { display: none; }
}
@media (max-width: 959px) {
  .portal { height: 316px; }
  .portal .solo-ancho, .tabla__f--cab, .tabla__f:nth-child(4) { display: none; }
  .tabla__f { padding: 7px 6px; }
  .grafica { height: 76px; }
  .reporte__pie { margin-top: 10px; }
  .hero__bajar { display: none; }
}
@media (max-width: 599px) {
  .hero__rotulo .solo-ancho, .eyebrow .solo-ancho { display: none; }
}
/* celulares bajos: el portal no se queda fijo; pasa sus pantallas solo y los pasos se leen completos */
@media (max-width: 959px) and (max-height: 719px) {
  .pasos__escena { position: relative; top: auto; background: none; }
  .paso { min-height: 0; padding: 22px 0; }
  .m .paso:not(.activo) .paso__txt { opacity: 1; }
}

/* ---------- ganancia ---------- */
.ganancia { background: var(--sol); color: var(--tinta-txt); }
.ganancia__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.ganancia .cabeza { margin-bottom: 0; }
.ganancia .eyebrow { color: #4A4300; }
.ganancia .lead { color: #3D3913; margin-bottom: 28px; }
.calc { padding: clamp(24px, 3.2vw, 44px); border-radius: 30px; background: var(--tinta-2); color: var(--texto); box-shadow: 0 50px 90px -46px rgba(70, 60, 0, .75); }
.calc__l { display: block; font-weight: 600; color: var(--texto-2); }
.calc__ventas { display: block; margin: 4px 0 18px; font-family: var(--f); font-size: clamp(2.1rem, 3.8vw, 3.1rem); font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc__rango {
  --p: 9%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--sol) 0 var(--p), rgba(255, 255, 255, .12) var(--p) 100%);
}
.calc__rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sol); border: 5px solid var(--tinta-2); outline: 2px solid var(--sol); box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.calc__rango::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--sol); border: 5px solid var(--tinta-2); outline: 2px solid var(--sol); }
.calc__rango:focus-visible { outline: 3px solid var(--sol); outline-offset: 6px; }
.calc__escala { display: flex; justify-content: space-between; margin-top: 10px; font-size: .78rem; color: var(--texto-3); }
.calc__res { display: grid; gap: 2px; margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--borde-2); }
.calc__res span { color: var(--texto-2); }
.calc__gan { font-size: clamp(3rem, 6vw, 4.8rem); line-height: 1; font-weight: 800; font-stretch: 112%; letter-spacing: -.035em; color: var(--sol); font-variant-numeric: tabular-nums; }
.calc__nota { margin-top: 18px; font-size: .84rem; color: var(--texto-3); }
@media (max-width: 899px) { .ganancia__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- alta ---------- */
.alta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(32px, 5vw, 80px); }
.alta .cabeza { margin-bottom: 0; }
.directo { display: grid; gap: 12px; max-width: 420px; margin-top: 32px; }
.directo a {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .025); font-size: 1.1rem; font-weight: 700;
  transition: border-color .25s, background-color .25s;
}
.directo a:hover { border-color: var(--sol); background: rgba(249, 229, 49, .05); }
.directo small { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.directo__i { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--sol); color: var(--tinta-txt); }
.directo__i svg { width: 22px; height: 22px; }
.forma { padding: clamp(22px, 3vw, 42px); border-radius: 30px; background: linear-gradient(180deg, #161922, var(--tinta-2)); border: 1px solid var(--borde-2); }
.forma__t { margin-bottom: 20px; font-size: 1.35rem; font-weight: 800; font-stretch: 106%; }
.forma__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fc { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 5px; row-gap: 8px; font-size: .9rem; font-weight: 600; color: var(--texto-2); }
.fc > span { color: var(--sol); }
.fc--ancho { grid-column: 1 / -1; }
.fc input, .fc textarea {
  flex: 1 1 100%; width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 13px;
  background: var(--tinta); border: 1.5px solid var(--borde-2); color: var(--texto);
  font-size: 1rem; font-weight: 400; transition: border-color .2s, box-shadow .2s;
}
.fc textarea { min-height: 100px; resize: vertical; }
.fc input::placeholder, .fc textarea::placeholder { color: #80838E; }
.fc input:focus, .fc textarea:focus { outline: none; border-color: var(--sol); box-shadow: 0 0 0 4px rgba(249, 229, 49, .16); }
.fc [aria-invalid="true"] { border-color: #FF8466; }
.forma__error { margin-top: 16px; color: #FF9F85; font-size: .92rem; font-weight: 600; }
.forma .btn { margin-top: 22px; }
.forma__nota { margin-top: 12px; text-align: center; font-size: .84rem; color: var(--texto-3); }
@media (max-width: 959px) { .alta__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .forma__campos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- contacto ---------- */
.contacto__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.dato {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: center; gap: 12px 12px;
  padding: 24px 24px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--papel-borde);
}
.dato > :not(.dato__i):not(h3) { grid-column: 1 / -1; }
.dato > :last-child { align-self: end; }
.dato__i { display: block; color: var(--rojo-osc); }
.dato__i svg { width: 24px; height: 24px; }
.dato__i--wa { color: #128C4B; }
.dato h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 800; font-stretch: 104%; }
.dato p { color: var(--tinta-txt-2); font-size: .98rem; }
.dato .enlace { justify-self: start; padding-top: 6px; overflow-wrap: anywhere; }
.horario { width: 100%; }
.horario div { display: grid; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--papel-borde); }
.horario dt { font-size: .86rem; color: var(--tinta-txt-2); }
.horario dd { font-weight: 700; }
.abierto { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding-top: 6px; font-size: .92rem; font-weight: 700; }
.abierto::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dato .abierto--si { color: #137A49; }
.dato .abierto--no { color: var(--rojo-osc); }
@media (max-width: 1099px) { .contacto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .contacto__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.footer {
  position: relative; overflow: hidden; margin-top: calc(-1 * var(--curva)); border-radius: var(--curva) var(--curva) 0 0;
  padding: 76px 0 28px; background: #07080B; color: var(--texto-2);
}
.footer__linea {
  position: absolute; top: 0; left: 6%; right: 6%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sol) 28%, var(--rojo) 72%, transparent);
  box-shadow: 0 0 20px rgba(249, 229, 49, .6);
}
.footer__halo {
  position: absolute; top: -140px; left: 15%; right: 15%; height: 260px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(249, 229, 49, .13), transparent);
}
.footer__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); }
.footer__logo { width: 156px; height: auto; margin-bottom: 18px; }
.footer__marca p { max-width: 30em; margin-bottom: 22px; font-size: .96rem; }
.footer__col h3 { margin-bottom: 16px; font-size: .78rem; font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .16em; color: var(--texto); }
.footer__col ul { display: grid; gap: 12px; }
.footer__col a, .footer__col span { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; transition: color .2s; }
.footer__col a:hover { color: var(--sol); }
.footer__col svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.footer__horario li { display: grid; font-size: .96rem; }
.footer__horario span { font-size: .8rem; color: var(--texto-3); }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: .86rem; color: var(--texto-3); }
.footer__base a { display: inline-flex; align-items: center; gap: 6px; }
.footer__base a:hover { color: var(--sol); }
.footer__base svg { width: 16px; height: 16px; rotate: 180deg; }
@media (max-width: 959px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } .footer { padding-bottom: 96px; } }

/* ---------- botón flotante ---------- */
.flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px;
  display: grid; place-items: center; border-radius: 50%; background: #25D366; color: #fff;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; translate: 0 16px; transition: opacity .35s, translate .35s var(--sale), visibility 0s .35s;
}
.flotante svg { width: 30px; height: 30px; }
.flotante.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }

/* ================= coreografía (.m la pone el <head>) ================= */
/* hero: entra al cargar, línea por línea */
.m .hero [data-h] { opacity: 0; }
.m .hero .linea > [data-h] { opacity: 1; translate: 0 108%; }
.m .hero.listo [data-h] { animation: entra .95s var(--sale) both; }
.m .hero.listo .linea > [data-h] { animation-name: mascara; animation-duration: 1.05s; }
.m .hero.listo .ticket { animation-name: flota; animation-duration: 1.1s; }
.m .hero.listo [data-h="1"] { animation-delay: .22s; }
.m .hero.listo [data-h="2"] { animation-delay: .32s; }
.m .hero.listo [data-h="3"] { animation-delay: .42s; }
.m .hero.listo [data-h="4"] { animation-delay: .6s; }
.m .hero.listo [data-h="5"] { animation-delay: .72s; }
.m .hero.listo [data-h="6"] { animation-delay: .86s; }
.m .hero.listo [data-h="7"] { animation-delay: .96s; }
.m .hero.listo [data-h="8"] { animation-delay: 1.06s; }
.m .hero.listo [data-h="9"] { animation-delay: 1.5s; }
.m .hero.listo [data-h="10"] { animation-delay: 1.8s; }
@keyframes entra { from { opacity: 0; translate: 0 18px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes mascara { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes flota { from { opacity: 0; translate: 0 34px; scale: .94; filter: blur(8px); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }

/* footer: línea con brillo, halo y bloques uno por uno */
.m .footer__linea { scale: 0 1; transition: scale 1.1s var(--sale); }
.m .footer__halo { opacity: 0; transition: opacity 1.4s .35s; }
.m .footer [data-f] { opacity: 0; translate: 0 14px; filter: blur(8px); transition: opacity .7s, translate .8s var(--sale), filter .8s; transition-delay: calc(250ms + var(--i, 0) * 110ms); }
.m .footer.on .footer__linea { scale: 1 1; }
.m .footer.on .footer__halo { opacity: 1; }
.m .footer.on [data-f] { opacity: 1; translate: 0 0; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================= términos y condiciones ================= */
.legal-cab { position: relative; padding: calc(76px + clamp(48px, 9vh, 96px)) 0 calc(clamp(48px, 7vw, 80px) + var(--curva)); background: radial-gradient(40% 80% at 85% 20%, rgba(249, 229, 49, .09), transparent 70%), var(--tinta); }
.legal-cab__t { margin: 14px 0 12px; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1; font-weight: 800; font-stretch: 108%; letter-spacing: -.03em; }
.legal-cab__t .linea { display: block; overflow: hidden; padding: 0 .05em .08em; margin: 0 -.05em -.08em; }
.legal-cab__t .linea > span { display: inline-block; }
.legal-cab__meta { color: var(--texto-2); }
.legal__sello { display: inline-flex; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--sol); color: var(--tinta-txt); font-size: .86rem; font-weight: 700; }
.m .legal-cab [data-h] { opacity: 0; }
.m .legal-cab .linea > [data-h] { opacity: 1; translate: 0 108%; }
.m .legal-cab.listo [data-h] { animation: entra .95s var(--sale) both; }
.m .legal-cab.listo .linea > [data-h] { animation-name: mascara; animation-duration: 1.05s; }
.m .legal-cab.listo [data-h="1"] { animation-delay: .18s; }
.m .legal-cab.listo [data-h="2"] { animation-delay: .4s; }
.m .legal-cab.listo [data-h="3"] { animation-delay: .55s; }

.legal { margin-top: calc(-1 * var(--curva)); border-radius: var(--curva) var(--curva) 0 0; padding-top: clamp(56px, 7vw, 96px); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.legal__indice { position: sticky; top: 100px; }
.legal__indice > p { margin-bottom: 12px; font-size: .78rem; font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .16em; color: var(--rojo-osc); }
.legal__indice ol { display: grid; gap: 2px; border-left: 2px solid var(--papel-borde); }
.legal__indice a { display: flex; gap: 10px; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.35; color: var(--tinta-txt-2); transition: color .2s, border-color .2s; }
.legal__indice a span { font: 500 .78rem/1.7 var(--mono); color: #8B8678; }
.legal__indice a:hover, .legal__indice a.activo { color: var(--tinta-txt); }
.legal__indice a.activo { border-left-color: var(--rojo-osc); font-weight: 700; }
.legal__cuerpo { max-width: 74ch; }
.legal__intro { margin-bottom: 40px; padding: 20px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--papel-borde); font-size: 1.08rem; font-weight: 500; }
.legal__sec { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--papel-borde); scroll-margin-top: 100px; }
.legal__sec:last-child { border-bottom: 0; }
.legal__sec h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; font-weight: 800; font-stretch: 105%; letter-spacing: -.015em; }
.legal__n { font: 500 .9rem var(--mono); color: var(--rojo-osc); }
.legal__txt { color: var(--tinta-txt-2); }
.legal__txt > * + * { margin-top: 12px; }
.legal__txt strong { color: var(--tinta-txt); }
.legal__lista { display: grid; gap: 8px; padding-left: 0; }
.legal__lista li { position: relative; padding-left: 22px; }
.legal__lista li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--sol); outline: 1px solid #C9B400; }
.legal__lista--contacto a { font-weight: 700; color: var(--tinta-txt); text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.cargo--legal { margin-top: 0; }
mark.pend { padding: 1px 6px; border-radius: 5px; background: #FFE96A; color: var(--tinta-txt); font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; outline: 1.5px dashed var(--rojo-osc); outline-offset: 1px; }
@media (max-width: 899px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__indice { position: static; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--papel-borde); }
  .legal__indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: 0 16px; }
  .legal__indice a { padding-left: 0; border-left: 0; margin-left: 0; }
}
@media (max-width: 560px) { .legal__indice ol { grid-template-columns: minmax(0, 1fr); } }