/* site.css — Punto WiFi · landing pública (https://www.puntowifi.com.ar)
 *
 * DNA
 *   Metáfora      Un punto de luz en la oscuridad: de un solo punto nace toda la señal.
 *   Tensión       Potencia (1 GIGA) / cercanía ("te conecta").
 *   Lo memorable  El punto cian: emite los arcos de señal en el hero y cierra el titular.
 *   Anti-patrón   Cian fuera de botones, LEDs, señal y datos · radios de más de 8 px (salvo píldoras) ·
 *                 degradés violetas · resplandor neón sobre el texto.
 *
 * Paleta 60/30/10 derivada del logo:
 *   60 %  negro azulado del fondo (base + superficies)
 *   30 %  azul eléctrico del aro + acero/cromo de la palabra "Punto"
 *   10 %  cian de los arcos y de "WiFi": solo botones, LEDs, señal y datos
 *
 * Movimiento: el estado en reposo de cada pieza es su estado final. Sin JS, con
 * prefers-reduced-motion o con la pausa global, la página se ve completa.
 */

/* ============ Fuentes autoalojadas (WOFF2, subconjunto latin) ============ */
@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/hubot-sans-latin-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Dos archivos, 116 KB en total (presupuesto: 120 KB). Todo lo que va en negrita (botones, píldoras,
   títulos) usa Hubot Sans; los rótulos de datos usan su ancho condensado en vez de una tercera familia. */
/* Respaldos con métrica ajustada (aproximada): el texto casi no se mueve cuando llega la fuente */
@font-face { font-family: "Hubot Fallback"; src: local("Arial"); size-adjust: 108%; ascent-override: 92%; }
@font-face { font-family: "Plex Fallback"; src: local("Arial"); size-adjust: 104%; }

/* ============ Tokens ============ */
:root {
  color-scheme: dark;

  /* color */
  --c-base: #05080F;        /* fondo: negro azulado del logo */
  --c-base-veil: #05080FE6; /* barra superior sobre el contenido */
  --c-surface: #0B1220;
  --c-surface-2: #131D31;
  --c-line: #22304A;        /* divisores decorativos */
  --c-edge: #566D96;        /* borde de controles (3:1 o más sobre base y superficie) */
  --c-ink: #EDF3FC;         /* cromo de "Punto" */
  --c-muted: #A3B4CF;       /* acero */
  --c-blue: #1E6BFF;        /* aro del isotipo: solo gráficos */
  --c-accent: #3CC6FF;      /* cian de los arcos y de "WiFi" */
  --c-accent-hi: #8ADCFF;
  --c-on-accent: #04121F;
  --c-led-off: #3A4A66;
  --c-alert: #FF6B6B;       /* luz LOS */

  /* tipografía */
  --f-display: "Hubot Sans", "Hubot Fallback", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-0: .8125rem;
  --t-1: .9375rem;
  --t-2: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-3: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --t-4: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);

  /* espacio */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(4rem, 10vh, 7rem);

  /* forma */
  --r-1: 4px;
  --r-2: 8px;
  --r-pill: 999px;
  --bar-h: 3.75rem;         /* alto de la barra superior */

  /* movimiento (motion-web) */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --dur-4: 560ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-base);
  color: var(--c-ink);
  font: 400 var(--t-2)/1.6 var(--f-body);
}
img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; }
b, strong { font-family: var(--f-display); font-weight: 700; }
p { margin: 0 0 var(--s-4); }
h1, h2, h3 { margin: 0 0 var(--s-4); font-family: var(--f-display); text-wrap: balance; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }
[hidden] { display: none !important; }

.sr {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -5rem; z-index: 30;
  padding: .7rem 1rem; border-radius: var(--r-2);
  background: var(--c-accent); color: var(--c-on-accent); font: 600 var(--t-1)/1.2 var(--f-display); text-decoration: none;
}
.skip:focus { inset-block-start: 1rem; }
.wrap { inline-size: min(75rem, 100% - 2rem); margin-inline: auto; }

h1 {
  font-weight: 800;
  font-size: clamp(2.125rem, 9.2vw, 4.5rem);
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -0.02em;
}
h2 {
  font-weight: 800;
  font-size: var(--t-4);
  font-stretch: 105%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-inline-size: 22ch;
}
h3 { font-weight: 700; font-size: var(--t-3); line-height: 1.2; }
.lead { color: var(--c-muted); font-size: var(--t-3); max-inline-size: 38rem; text-wrap: pretty; }
.dot { color: var(--c-accent); }   /* el punto */
.data { font: 600 var(--t-0)/1.2 var(--f-display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.ico { flex: none; }

.link { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-edge); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.link--strong { font-family: var(--f-display); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--c-accent-hi); text-decoration-color: var(--c-accent); }
}

/* ============ Botones ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-block-size: 3rem; padding: .8rem 1.4rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 var(--t-1)/1.1 var(--f-display); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease,
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--c-accent); color: var(--c-on-accent); }
.btn--line { border-color: var(--c-edge); background: transparent; color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--c-accent-hi); }
  .btn--line:hover { border-color: var(--c-accent); color: var(--c-accent-hi); }
}

/* CTA de contacto: la luz recorre el borde solo con hover o foco (no es un loop permanente) */
.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem;
  min-block-size: 3.25rem; padding: 1rem 1.6rem; border: 0; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink);
  font: 600 var(--t-2)/1.1 var(--f-display); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}
.cta::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--a, 0deg), var(--c-edge) 0 70%, var(--c-accent) 85%, var(--c-edge) 100%);
}
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c-surface); }
.cta:active { transform: scale(.97); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ============ Barra superior ============ */
.top {
  position: sticky; inset-block-start: 0; z-index: 20;
  background: var(--c-base-veil); border-block-end: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-block-size: var(--bar-h); }
.brand { display: inline-flex; flex: none; align-items: center; gap: .55rem; min-block-size: 2.75rem; text-decoration: none; white-space: nowrap; }
.brand__name { font: 800 1.0625rem/1 var(--f-display); font-stretch: 122%; letter-spacing: -0.01em; }
.brand__name b { font-weight: inherit; color: var(--c-accent); }
.nav { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: .7rem;
  color: var(--c-muted); font-size: var(--t-1); text-decoration: none;
  transition: color var(--dur-2) ease;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--c-ink); } }
@media (min-width: 56rem) { .nav { display: flex; gap: .25rem; margin-inline: auto var(--s-3); } }
.top__actions { display: flex; align-items: center; gap: var(--s-2); }
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  min-block-size: 2.75rem; padding: .5rem .85rem;
  border: 1px solid var(--c-edge); border-radius: var(--r-pill);
  background: transparent; color: var(--c-ink);
  font: 600 var(--t-0)/1 var(--f-display); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.pill:active { transform: scale(.97); }
.pill--account { border-color: var(--c-accent); }
.pill[aria-pressed="true"] { background: var(--c-surface-2); border-color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--c-surface-2); } }
/* En pantallas angostas la etiqueta se acorta a la vista; el nombre accesible sigue completo */
/* En pantallas angostas la etiqueta se acorta a la vista; el nombre accesible sigue completo.
   Hasta 30rem la pausa es solo su icono (botón cuadrado de 44 px): así marca + pausa + «Mi cuenta»
   entran sin desborde desde 320 px. */
.pill .long, .pill .mid { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pill--pause { justify-content: center; min-inline-size: 2.75rem; padding-inline: .7rem; }
@media (max-width: 23.99rem) {
  .brand { gap: .45rem; }
  .brand__name { font-size: 1rem; font-stretch: 112%; }
  .pill--account { padding-inline: .75rem; }
}
@media (max-width: 21.49rem) { .pill--account .ico { display: none; } }
@media (min-width: 30rem) {
  .pill--pause { padding-inline: .85rem; }
  .pill .mid { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 40rem) { .pill--pause .long { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } }
@media (min-width: 68rem) { .pill--account .long { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } }

/* Isotipo en línea: las ondas y el punto heredan currentColor; aro, malla y nodos salen de los tokens. */
.iso { color: var(--c-accent); }
.iso__ring { stroke: var(--c-blue); stroke-width: 1.5; }
.iso__mesh { stroke: var(--c-edge); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.iso__node { fill: var(--c-accent-hi); }
.iso__wave { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.iso__dot { fill: currentColor; }

/* ============ Figuras (SVG en línea: 0 solicitudes, 0 CLS) ============ */
.fig { position: relative; margin: 0; aspect-ratio: var(--ratio, 560 / 440); }
.fig > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.fig--way { --ratio: 480 / 300; }
.fig--phone { --ratio: 240 / 300; }
.fig--leds { --ratio: 320 / 96; }

.equip { fill: none; stroke: var(--c-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.equip--fill { fill: var(--c-surface); }
.ground { fill: none; stroke: var(--c-line); stroke-width: 1.5; stroke-linecap: round; }
.ring { fill: none; stroke: var(--c-blue); stroke-width: 2; }
.mesh { fill: none; stroke: var(--c-line); stroke-width: 1; }
.shadow { fill: #000; opacity: .45; }
.fiber-ghost { fill: none; stroke: var(--c-line); stroke-width: 2.5; stroke-linecap: round; }
.fiber-path { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; }
.data-link { fill: none; stroke: var(--c-blue); stroke-width: 1.5; stroke-linecap: round; }
.pulse { fill: none; stroke: var(--c-ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .03 .97; stroke-dashoffset: 1; opacity: 0; }
.wave { fill: none; stroke: var(--c-accent); stroke-width: 2; opacity: 0; transform-origin: 280px 236px; }
.led { fill: var(--c-accent); }
.led--off { fill: var(--c-led-off); }
.led--alert { fill: var(--c-alert); }
.halo { fill: var(--c-accent); opacity: .16; }
.punto { fill: var(--c-accent); }
.check { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rule { fill: none; stroke: var(--c-edge); stroke-width: 2; stroke-linecap: round; }
.led-label { fill: var(--c-muted); font: 600 12px var(--f-display); font-stretch: 75%; letter-spacing: .1em; }

/* piezas que "aparecen" al entrar la escena */
.m-pop { transform-box: fill-box; transform-origin: center; }
.node-on { fill: var(--c-accent); }
.arc { fill: none; stroke: var(--c-accent); stroke-width: 9; stroke-linecap: round; transform-box: view-box; transform-origin: 280px 236px; }
.arc--s { stroke-width: 2.5; transform-box: fill-box; transform-origin: 50% 100%; }
.sig { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; transform-origin: 104px 80px; }
/* trazo que se dibuja: <path pathLength="1" class="m-draw">. Reposo = dibujado. */
.m-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* escalonado sin estilos en línea (la CSP no admite style="") */
.s1 { --i: 1; } .s2 { --i: 2; } .s3 { --i: 3; } .s4 { --i: 4; }
.s5 { --i: 5; } .s6 { --i: 6; } .s7 { --i: 7; } .s8 { --i: 8; }

/* ============ Hero ============ */
.hero { position: relative; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; padding-block: var(--s-5) var(--s-7); }
.hero__fig { order: -1; inline-size: min(100%, 20rem); margin-inline: auto; }
@supports (inline-size: 1svh) {
  .hero__fig { inline-size: min(100%, calc(32svh * 560 / 440)); }   /* en el celular la figura no se come el pliegue */
}
.hero .lead { margin-block-end: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-5); }
.cta-row .link { display: inline-flex; align-items: center; min-block-size: 3rem; }
@media (min-width: 56.25rem) {
  h1 { font-size: clamp(2.75rem, 4.6vw, 4.25rem); }   /* el titular entra en dos líneas en la columna de texto */
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); min-block-size: calc(100dvh - var(--bar-h)); padding-block: var(--s-6); }
  .hero__fig { order: 0; inline-size: 100%; }
}

/* ============ Secciones ============ */
.block { padding-block: var(--s-8); border-block-start: 1px solid var(--c-line); }

/* ---- Planes: filas, no cards. El ancho de la cifra representa la velocidad. ---- */
.planes { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-block-end: 1px solid var(--c-line); }
.plan {
  display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: 1fr;
  grid-template-areas: "speed" "body" "cta";
  padding-block: var(--s-5); border-block-start: 1px solid var(--c-line);
}
.plan__speed { grid-area: speed; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.plan__num { font: 800 clamp(2.75rem, 1.9rem + 3.4vw, 4rem)/.95 var(--f-display); letter-spacing: -0.02em; white-space: nowrap; }
.plan__unit { font-size: .4em; font-weight: 700; letter-spacing: 0; color: var(--c-muted); }
.plan__for { grid-area: body; margin: 0; color: var(--c-muted); max-inline-size: 34rem; }
.plan__cta { grid-area: cta; justify-self: start; }
.plan__bar { display: block; block-size: 4px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.plan__bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
/* ancho de la cifra (eje wdth de Hubot Sans) y largo de la barra, por plan */
.w1 { font-stretch: 75%; }  .v1 { --v: .3; }
.w2 { font-stretch: 87%; }  .v2 { --v: .4; }
.w3 { font-stretch: 100%; } .v3 { --v: .62; }
.w4 { font-stretch: 112%; } .v4 { --v: .82; }
.w5 { font-stretch: 125%; } .v5 { --v: 1; }
.note { margin: var(--s-5) 0 0; color: var(--c-muted); font-size: var(--t-1); max-inline-size: 44rem; }
@media (min-width: 48rem) {
  .plan { grid-template-columns: minmax(15rem, 20rem) 1fr auto; grid-template-areas: "speed body cta"; gap: var(--s-6); }
  .plan__cta { justify-self: end; }
}

/* ---- Cómo llega: dos caminos ---- */
.ways { display: grid; gap: var(--s-7); margin-block-start: var(--s-7); }
.way .fig { margin-block-end: var(--s-5); }
.way p { color: var(--c-muted); max-inline-size: 30rem; margin: 0; }
@media (min-width: 56rem) {
  .ways { grid-template-columns: 1fr 1fr; gap: 0; }
  .way { padding-inline-end: var(--s-7); }
  .way + .way { padding-inline: var(--s-7) 0; border-inline-start: 1px solid var(--c-line); }
}

/* ---- Mi cuenta ---- */
.account { background: var(--c-surface); }
.account__in { display: grid; gap: var(--s-6); align-items: center; }
.account .fig { inline-size: min(100%, 11rem); }
.account .equip--fill { fill: var(--c-base); }
@media (min-width: 48rem) {
  .account__in { grid-template-columns: 1fr auto; }
  .account .fig { inline-size: 13rem; }
}

/* ---- Preguntas ---- */
.faq { display: grid; gap: var(--s-6) var(--s-7); margin: var(--s-7) 0 0; }
.faq h3 { margin-block-end: var(--s-2); }
.faq p { margin: 0; color: var(--c-muted); max-inline-size: 34rem; }
.faq p + p { margin-block-start: var(--s-3); }
.faq__item { padding-block-start: var(--s-5); border-block-start: 1px solid var(--c-line); }
.faq__item--wide { display: grid; gap: var(--s-5); align-items: center; }
.faq__item--wide .fig { inline-size: min(100%, 20rem); }
@media (min-width: 56rem) {
  .faq { grid-template-columns: 1fr 1fr; }
  .faq__item--wide { grid-column: 1 / -1; grid-template-columns: 1fr auto; gap: var(--s-7); }
  .faq__item--wide .fig { inline-size: 20rem; }   /* ancho fijo: en una columna auto, un porcentaje daría 0 */
}

/* ---- Contacto ---- */
.contact__mail {
  display: inline-block; margin-block: var(--s-5) var(--s-6);
  font: 800 clamp(1.375rem, 5.6vw, 4rem)/1.1 var(--f-display); letter-spacing: -0.02em;
  color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: .06em; text-underline-offset: .18em; overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) { .contact__mail:hover { color: var(--c-accent-hi); } }

/* ---- Pie ---- */
.foot { border-block-start: 1px solid var(--c-line); padding-block: var(--s-7) 0; overflow: clip; color: var(--c-muted); font-size: var(--t-1); }
.foot__in { display: grid; gap: var(--s-6); align-items: start; }
.foot__logo { inline-size: 9rem; mix-blend-mode: screen; }   /* el negro del JPEG se funde con el fondo */
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.foot__list a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.foot__title { margin: 0 0 var(--s-2); }
.foot__legal {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5);
  margin: var(--s-6) 0 0; padding-block: var(--s-5); border-block-start: 1px solid var(--c-line); font-size: var(--t-0);
}
/* Lema de la marca, tal cual el logo (mayúsculas, espaciado ancho, con su tilde). No es texto corrido. */
.lema { font: 600 var(--t-0)/1.2 var(--f-display); font-stretch: 100%; letter-spacing: .22em; color: var(--c-accent); white-space: nowrap; }
.foot__mark {
  margin: 0; font: 900 clamp(2.5rem, 11.6vw, 11rem)/.8 var(--f-display); font-stretch: 125%;
  letter-spacing: -0.02em; white-space: nowrap; color: var(--c-surface-2); user-select: none;
}
@media (min-width: 48rem) {
  .foot__in { grid-template-columns: auto 1fr 1fr; gap: var(--s-7); }
  .foot__logo { inline-size: 11rem; }
}

/* ============ Movimiento ============ */
/* Las escenas se animan al ENTRAR en pantalla (.in-view lo pone un IntersectionObserver), no al cargar.
   html.motion-ok lo pone motion-boot.js solo si hay movimiento: sin JS, con reduce o en pausa nada queda a medio dibujar.
   .done: la entrada ya terminó (o se pausó a mitad): queda en reposo y no se repite al reanudar. */
.scene .m-draw { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  html.motion-ok:not([data-motion="paused"]) .scene:not(.in-view) .m-draw { stroke-dashoffset: 1; }
  html.motion-ok:not([data-motion="paused"]) .scene:not(.in-view) .m-pop { opacity: 0; }
  html.motion-ok:not([data-motion="paused"]) .scene:not(.in-view) .plan__bar i { transform: scaleX(0); }

  .scene.in-view:not(.done) .m-draw { animation: m-draw var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms); }
  .scene.in-view:not(.done) .m-pop { animation: m-pop var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
  .scene.in-view:not(.done) .plan__bar i { animation: m-bar var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }

  /* Único loop de la página: la luz que entra por la fibra y la señal que sale del punto (hero).
     Se frena fuera de pantalla (.is-offscreen). Sin JS no hay botón de pausa (WCAG 2.2.2): el loop exige
     html.motion-live, que pone site.js recién después de mostrar el botón. */
  html.motion-live .hero .pulse { animation: pulse 2.4s linear infinite; }
  html.motion-live .hero .pulse + .pulse { animation-delay: 1.2s; }
  html.motion-live .hero .wave { animation: wave 3.6s var(--ease-out) infinite; }
  html.motion-live .hero.is-offscreen .pulse,
  html.motion-live .hero.is-offscreen .wave { animation-play-state: paused; }

  @keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes m-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
  @keyframes m-bar { from { transform: scaleX(0); } to { transform: scaleX(var(--v, 1)); } }
  @keyframes pulse { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes wave { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: .5; } 100% { opacity: 0; transform: scale(1); } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cta:hover::before, .cta:focus-visible::before { animation: spin 2.4s linear infinite; }
  @keyframes spin { to { --a: 360deg; } }
}

/* Reduced-motion (WCAG 2.3.3): sin keyframes ni desplazamientos; los cambios de color quedan instantáneos. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 120ms; --dur-4: 160ms; }
  *, *::before, *::after {
    animation: none !important;
    animation-timeline: auto !important;
    scroll-behavior: auto !important;
  }
}

/* Pausa global (WCAG 2.2.2): el botón «Pausar animaciones» pone html[data-motion="paused"].
   Se apagan las animaciones CSS y cada pieza queda en su estado final. */
html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after { animation: none !important; }
html[data-motion="paused"] { scroll-behavior: auto; }

/* Precio del plan: sale de la tabla de planes del panel (no se inventa). */
.plan__price { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.plan__cur { font-size: .6em; margin-right: .1em; vertical-align: .35em; color: var(--c-muted); }
.plan__per { font-size: .5em; font-weight: 400; color: var(--c-muted); }