/*
 * Inicio de la landing v3 (tanda 10.4a, docs/specs/10.4-landing-v3.md).
 *
 * La cargan las ocho páginas: los inicios, «Cómo funciona» (detrás va
 * funciones.css) y las legales (detrás va landing.css, el cuerpo legal).
 * Figma «Landing v3»: escritorio 511:2 desde 1100 px, teléfono 512:2 hasta
 * 600 px, una columna entre medias. Tokens de docs/MARCA.md §3.
 *
 * El estado por defecto de cada escena es el final (D-LND-15): con
 * movimiento reducido se ve quieta; sin JS, cada escena corre al cargar. El movimiento
 * vive solo al final, dentro de `prefers-reduced-motion: no-preference`;
 * lo que solo existe en movimiento (el destello, los toques, las bombillas
 * que salen, las monedas) va con `display: none` fuera de ese bloque.
 * Sin estilos en línea en el HTML ni desde el JS (CSP `default-src 'self'`).
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/landing/fuentes/inter-latin-wght-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fuentes/barlow-semi-condensed-latin-700-italic-5.3.0.woff2')
    format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reserva con la métrica de Barlow (D-LND-18): al llegar la fuente, el texto
   no se mueve. Medido con fontTools contra Liberation Sans Bold Italic. */
@font-face {
  font-family: 'Barlow reserva';
  font-style: italic;
  font-weight: 700;
  src:
    local('Arial Bold Italic'), local('Arial-BoldItalicMT'),
    local('Liberation Sans Bold Italic'), local('Arial');
  size-adjust: 81.82%;
  ascent-override: 122.22%;
  descent-override: 24.44%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --lima: #d7ff00;
  --lima-pulsado: #c4eb00;
  --carbon: #111111;
  --grafito: #3a3a3a;
  --acero: #8c8c8c;
  --niebla: #e8e8e8;
  --hueso: #f7f7f5;
  --blanco: #ffffff;
  --ok: #2fbf71;
  --aviso: #ffb020;
  --peligro: #e5484d;
  --texto-suave: #62645e;
  --aviso-claro: #8a5a00;
  --ok-claro: #1a7a3c;
  --texto-inverso-suave: #b4b6af;
  --superficie: #1a1a1a;
  --borde: #2a2a2a;
  --error: #b4232c;
  --verso-apagado: #d3d3cd;

  --fuente: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-marca: 'Barlow Semi Condensed', 'Barlow reserva', var(--fuente);
  --salida: cubic-bezier(0.215, 0.61, 0.355, 1);
  --entrada-salida: cubic-bezier(0.645, 0.045, 0.355, 1);
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cabecera: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--carbon);
  scroll-padding-top: var(--cabecera);
}

body {
  background: var(--carbon);
  color: var(--hueso);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Foco, salto y solo lector (como en la 10.1, §8.2) ---------------------- */

:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

.cla :focus-visible,
.demo__hoja :focus-visible {
  outline-color: var(--carbon);
}

main:focus {
  outline: none;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--lima);
  color: var(--carbon);
  font-weight: 600;
  transform: translateY(-200%);
}

.salto:focus {
  transform: none;
}

.salto:focus-visible {
  outline-color: var(--carbon);
  box-shadow: 0 0 0 4px var(--lima);
}

/* --- Estructura y tipografía ------------------------------------------------ */

.cont {
  position: relative;
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

.osc {
  background: var(--carbon);
  color: var(--hueso);
}

.cla {
  background: var(--hueso);
  color: var(--carbon);
}

.bar {
  font-family: var(--fuente-marca);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.ante {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--texto-inverso-suave);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ante__t {
  font: inherit;
  letter-spacing: inherit;
}

.ante__n {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 7px;
  border-radius: 2px;
  background: var(--lima);
  color: var(--carbon);
  font-family: var(--fuente-marca);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.cla .ante {
  color: var(--texto-suave);
}

.lead {
  color: var(--texto-inverso-suave);
  font-size: 17px;
  line-height: 1.5;
}

.cla .lead {
  color: var(--texto-suave);
}

.ln {
  display: block;
}

/* El bloque lima detrás de una palabra. */
.lim {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.1em 0 0.06em;
  color: var(--carbon);
}

.lim::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.1em -0.02em 0.02em -0.04em;
  border-radius: 0.03em;
  background: var(--lima);
  transform: skewX(-12deg);
}

/* --- Botones y enlaces -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.btn--pri {
  background: var(--lima);
  color: var(--carbon);
}

.btn--pri:hover {
  background: var(--lima-pulsado);
}

.enl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 2px solid var(--lima);
  color: var(--hueso);
  font-size: 16px;
  font-weight: 600;
}

.cla .enl {
  color: var(--carbon);
}

/* --- Cabecera ---------------------------------------------------------------- */

.cab {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid #222222;
  background: rgb(17 17 17 / 92%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.cab__in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--cabecera);
}

.cab__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.cab__logo img,
.pie__logo img {
  width: 112px;
  height: auto;
}

.cab__nav {
  display: none;
}

.cab__entrar {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
}

.cab__demo {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
}

.cab__una {
  display: none;
}

/* --- 01 Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 32px;
}

.hero__k {
  --k-asta: #1c1c1c;
  --k-brazo: var(--lima);
  position: absolute;
  bottom: 60px;
  left: -300px;
  width: 620px;
  height: 452px;
  pointer-events: none;
}

.k-asta {
  fill: var(--k-asta, #1c1c1c);
}

.k-brazo {
  fill: var(--k-brazo, var(--lima));
}

.hero__txt {
  position: relative;
  z-index: 2;
}

.hero__h1 {
  margin: 20px 0;
  font-size: 66px;
  line-height: 0.87;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
}

/* La oferta del piloto y el enlace a /hoteles/ (10.5b, D-LND-60). */
.hero__oferta {
  width: fit-content;
  margin-top: 14px;
  color: var(--texto-inverso-suave);
  font-size: 15px;
  line-height: 1.3;
}

.hero__hotel {
  display: inline-block;
  padding: 13px 0;
  color: var(--hueso);
  font-weight: 600;
  text-decoration: underline 2px var(--lima);
  text-underline-offset: 5px;
}

.hero__esc {
  position: relative;
  z-index: 1;
  width: 390px;
  height: 540px;
  margin: 30px 0 0 calc(50% - 195px);
}

.hero__esc .tel {
  position: absolute;
  top: 10px;
  left: 148px;
  transform: scale(0.8);
  transform-origin: 0 0;
}

.hero__pie {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  color: var(--acero);
  font-size: 12px;
}

/* --- 00 Portada de marca (10.5c, docs/specs/10.5c-hero-de-marca.md) ---------
   A pantalla completa: el último min-height que entienda el navegador gana;
   100svh es el alto con las barras de Safari a la vista (D-LND-66). */

.portada {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  padding: 48px 0 calc(48px + env(safe-area-inset-bottom));
  overflow-x: clip;
  text-align: center;
}

/* El brazo lima de la K (el símbolo #k, asta transparente): un solo trazo que nace 24 px
   debajo del último texto de la portada, cruza al hero y acaba detrás del teléfono
   (D-LND-72, D-LND-73). Se ancla al grupo centrado, así que nunca pisa el lema; el
   `right` se mide desde el borde de la pantalla. Detrás del texto y del teléfono del hero:
   la portada va en z-index 1 y ellos en 1 (después) y 2. */
.portada__k {
  --k-asta: transparent;
  position: absolute;
  z-index: -1;
  top: calc(100% + 24px);
  right: calc((100% - 100vw) / 2 - 200px);
  width: 760px;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* Hasta 1099 px el texto del hero ocupa todo el ancho: va sobre carbón opaco y el lima
   pasa por detrás (D-LND-73). */
.portada + .hero .hero__txt {
  background: var(--carbon);
}

@media (max-width: 1099.98px) {
  .portada + .hero .hero__txt {
    margin: -16px -8px;
    padding: 16px 8px;
  }
}

.portada__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--hueso);
}

.portada__logo {
  width: min(100%, 300px);
  height: auto;
}

.portada__h1 {
  margin-top: 36px;
  font-size: 50px;
  line-height: 0.92;
}

.portada__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 40px;
}

.portada__cta .btn {
  min-height: 52px;
  padding-block: 12px;
  text-align: center;
  white-space: normal;
}

.portada__oferta {
  margin-top: 18px;
  color: var(--texto-inverso-suave);
  font-size: 15px;
  line-height: 1.3;
}

/* Sin JavaScript la cabecera sigue en el flujo: la portada no pasa del alto. */
@media (scripting: none) {
  .portada {
    min-height: calc(100vh - var(--cabecera));
    min-height: calc(100svh - var(--cabecera));
  }
}

/* La cabecera aparece al pasar la portada; la pone y la quita movimiento.js. */
@media (scripting: enabled) {
  .cab--al-bajar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    visibility: hidden;
    transform: translateY(-100%);
  }

  .cab--al-bajar.ve,
  .cab--al-bajar:focus-within {
    visibility: visible;
    transform: none;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .cab--al-bajar {
    transition:
      transform 0.3s var(--salida),
      visibility 0s linear 0.3s;
  }

  .cab--al-bajar.ve,
  .cab--al-bajar:focus-within {
    transition:
      transform 0.3s var(--salida),
      visibility 0s;
  }
}

@media (min-width: 601px) {
  .portada__k {
    right: calc((100% - 100vw) / 2 - 260px);
    width: 1040px;
  }

  .portada__logo {
    width: 420px;
  }

  .portada__h1 {
    margin-top: 44px;
    font-size: 76px;
  }
}

@media (min-width: 1100px) {
  /* En escritorio el lado derecho queda libre: la K, más grande (D-LND-72). */
  /* Donde estaba la K del hero, detrás del teléfono. */
  .portada__k {
    right: calc((100% - 100vw) / 2 - 150px);
    width: 640px;
  }

  .portada + .hero .hero__txt {
    background: none;
  }

  .portada__logo {
    width: 560px;
  }

  .portada__h1 {
    margin-top: 52px;
    font-size: 104px;
    line-height: 0.88;
  }

  .portada__cta {
    gap: 32px;
    margin-top: 48px;
  }

  .portada__cta .btn {
    min-height: 56px;
    padding-inline: 28px;
  }
}

.dato {
  position: absolute;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: var(--superficie);
  box-shadow: 0 30px 60px rgb(0 0 0 / 45%);
  color: var(--hueso);
}

.dato__rot {
  color: var(--texto-inverso-suave);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dato--stock {
  top: 54px;
  left: 16px;
  width: 156px;
  padding: 14px;
}

.odo {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.odo__num {
  --fila: 72px;
  display: flex;
  height: var(--fila);
  overflow: hidden;
  font-family: var(--fuente-marca);
  font-size: 80px;
  font-style: italic;
  font-weight: 700;
  line-height: var(--fila);
}

.odo__col {
  display: flex;
  flex-direction: column;
}

.odo__col span {
  display: block;
  height: var(--fila);
}

/* Estado final: la columna de las unidades enseña el 0 de «10». */
.odo__u {
  transform: translateY(calc(-2 * var(--fila)));
}

.odo__ud {
  margin-bottom: 8px;
  color: var(--texto-inverso-suave);
  font-size: 16px;
  font-weight: 600;
}

.delta {
  position: absolute;
  top: 40px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgb(229 72 77 / 16%);
  color: #ff8a8d;
  font-size: 13px;
  font-weight: 700;
}

.dato--gasto {
  top: 330px;
  left: 16px;
  width: 232px;
  padding: 14px 16px;
}

.dato__cif {
  margin: 8px 0 12px;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dato__pie {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sello,
.mas {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.sello--ok {
  background: rgb(47 191 113 / 14%);
  color: var(--ok);
}

.mas {
  background: var(--lima);
  color: var(--carbon);
  font-weight: 700;
}

.vuela {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;
}

/* Dos textos superpuestos que se cruzan (D-LND-16): el inicial solo existe
   con movimiento. */
.cambia {
  display: inline-grid;
}

.cambia > * {
  grid-area: 1 / 1;
}

.ini {
  display: none;
}

/* --- El teléfono de las escenas (la app, en claro) --------------------------- */

.tel {
  position: relative;
  width: 288px;
  height: 600px;
  padding: 9px;
  border-radius: 46px;
  background: #0b0b0b;
  box-shadow:
    0 0 0 1.5px #2e2e2e,
    0 40px 80px rgb(0 0 0 / 50%);
}

.tel__pant {
  position: absolute;
  inset: 9px;
  overflow: hidden;
  border-radius: 38px;
  background: var(--hueso);
  color: var(--carbon);
  font-size: 13px;
  line-height: 1.35;
}

.tel__sb {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 6px 26px 0;
  color: var(--hueso);
  font-size: 12px;
  font-weight: 600;
}

.tel__isla {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 5;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 14px;
  background: #000000;
}

.scr {
  position: absolute;
  inset: 0;
  background: var(--hueso);
}

.scr__top {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 92px;
  padding: 0 18px 14px;
  background: var(--carbon);
  color: var(--hueso);
  font-size: 16px;
  font-weight: 600;
}

.scr__top img {
  width: auto;
  height: 22px;
}

.scr__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.tcard {
  padding: 14px;
  border-radius: 14px;
  background: var(--blanco);
}

.fila {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.fila b {
  color: var(--carbon);
  font-weight: 700;
}

.tbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  height: 44px;
  border-radius: 11px;
  background: var(--lima);
  color: var(--carbon);
  font-size: 13.5px;
  font-weight: 600;
}

.tbtn--sec {
  background: var(--niebla);
}

.scr--scan {
  background: #1d1d1d;
}

.cam {
  position: absolute;
  top: 92px;
  right: 0;
  left: 0;
  height: 330px;
  overflow: hidden;
  background: #262624;
}

.cam__balda {
  position: absolute;
  top: 214px;
  right: -10px;
  left: -10px;
  height: 18px;
  background: #3b3b38;
}

.cam__balda2 {
  position: absolute;
  top: 232px;
  right: -10px;
  left: -10px;
  height: 120px;
  background: #1f1f1d;
}

.etq {
  position: absolute;
  top: 104px;
  left: 50%;
  display: flex;
  gap: 9px;
  width: 172px;
  height: 92px;
  margin-left: -86px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--blanco);
  box-shadow: 0 4px 12px rgb(0 0 0 / 35%);
  color: var(--carbon);
}

.etq__izq {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

/* El lockup de siempre, pintado en carbón para la etiqueta impresa. */
.etq__izq img {
  width: 62px;
  height: auto;
  filter: brightness(0);
}

.etq__nom {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}

.etq__ref {
  color: #555555;
  font-size: 8.5px;
}

.etq svg {
  flex: none;
  width: 72px;
  height: 72px;
}

.mira {
  position: absolute;
  top: 78px;
  left: 50%;
  width: 214px;
  height: 144px;
  margin-left: -107px;
}

.mira i {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 0 solid var(--lima);
}

.mira i:nth-child(1) {
  top: 0;
  left: 0;
  border-width: 4px 0 0 4px;
  border-top-left-radius: 10px;
}

.mira i:nth-child(2) {
  top: 0;
  right: 0;
  border-width: 4px 4px 0 0;
  border-top-right-radius: 10px;
}

.mira i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-width: 0 0 4px 4px;
  border-bottom-left-radius: 10px;
}

.mira i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-width: 0 4px 4px 0;
  border-bottom-right-radius: 10px;
}

.linea {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  display: none;
  height: 3px;
  border-radius: 2px;
  background: var(--lima);
  box-shadow: 0 0 16px 3px rgb(215 255 0 / 55%);
}

.flash {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--lima);
  mix-blend-mode: soft-light;
}

.leida {
  position: absolute;
  top: 240px;
  left: 50%;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--carbon);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.scan__hoja {
  position: absolute;
  top: 410px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 18px;
  border-radius: 22px 22px 0 0;
  background: var(--hueso);
}

.scan__t {
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
}

.scan__hoja p + p {
  margin-bottom: 14px;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.prod {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 16px;
  text-align: center;
}

.prod svg {
  width: 40px;
  height: 48px;
  margin-bottom: 8px;
}

.prod b {
  font-size: 17px;
}

.prod small {
  margin-top: 3px;
  color: var(--texto-suave);
  font-size: 12px;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stepper .lbl,
.quedan {
  color: var(--texto-suave);
  font-size: 12.5px;
}

.stepper .ctl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper .bt {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #ededea;
  font-size: 18px;
  font-weight: 600;
}

.stepper .n {
  width: 22px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  justify-items: center;
}

.quedan {
  margin-top: 6px;
  text-align: right;
}

.toque {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 2px solid rgb(17 17 17 / 35%);
  border-radius: 50%;
  background: rgb(17 17 17 / 18%);
  pointer-events: none;
}

.okc {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 22px auto 12px;
  border-radius: 50%;
  background: #e3f6ea;
}

.okc svg {
  width: 30px;
  height: 30px;
}

.ok__t {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}

.centro {
  display: flex;
  justify-content: center;
}

.ok__s {
  margin: 8px 0 4px;
  color: var(--texto-suave);
  font-size: 12.5px;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--ok {
  background: #e3f6ea;
  color: var(--ok-claro);
}

.badge--warn {
  background: #fff3db;
  color: var(--aviso-claro);
}

.badge--err {
  background: #fde8e8;
  color: #b4232a;
}

/* --- 02 El problema ---------------------------------------------------------- */

.prob__stage {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
}

.prob__in {
  display: flex;
  flex-direction: column;
}

.prob__izq {
  display: contents;
}

.prob__izq .ante {
  order: 1;
  margin-bottom: 24px;
}

/* En una columna, las frases antes que el dibujo, como en el DOM (D-LND-84). */
.versos {
  order: 2;
}

.esc2__marco {
  order: 3;
  margin-top: 24px;
}

.versos {
  position: relative;
  padding-left: 18px;
}

.versos::before,
.versos::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: #deded8;
}

.versos::after {
  background: var(--carbon);
  transform-origin: 50% 0;
}

.verso {
  padding: 2px 0;
  color: var(--carbon);
  font-family: var(--fuente-marca);
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.04;
}

.verso .lim {
  color: inherit;
}

.prob__pie {
  order: 4;
  margin-top: 28px;
  color: var(--texto-suave);
  font-size: 15px;
}

.prob__pie span {
  display: block;
  color: var(--acero);
  font-size: 12px;
}

.esc2__marco {
  position: relative;
  width: 336px;
  height: 384px;
  margin-inline: auto;
}

.esc2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 640px;
  transform: scale(0.6);
  transform-origin: 0 0;
}

.esc2__fondo {
  position: absolute;
  inset: 0;
}

.e2-poste {
  position: absolute;
  top: 120px;
  width: 10px;
  height: 520px;
  border-radius: 3px;
  background: var(--carbon);
}

.e2-poste--1 {
  left: 20px;
}

.e2-poste--2 {
  left: 440px;
}

.e2-tabla {
  position: absolute;
  left: 20px;
  width: 440px;
  height: 14px;
  border-radius: 3px;
  background: var(--carbon);
}

.e2-tabla--1 {
  top: 410px;
}

.e2-tabla--2 {
  top: 620px;
}

.e2-caja {
  position: absolute;
  top: 290px;
  left: 70px;
  z-index: 2;
  width: 330px;
  height: 120px;
  border: 3px solid var(--carbon);
  border-radius: 10px;
  background: var(--blanco);
}

.e2-caja .etq {
  top: 22px;
  width: 160px;
  height: 70px;
  margin-left: -80px;
  padding: 7px 8px;
  border: 1.5px solid var(--carbon);
  box-shadow: none;
}

.e2-caja .etq svg {
  width: 54px;
  height: 54px;
}

.e2-caja .etq__izq img {
  width: 54px;
}

.e2-cero {
  position: absolute;
  top: -150px;
  right: 0;
  left: 0;
  z-index: 3;
  color: var(--peligro);
  font-family: var(--fuente-marca);
  font-size: 190px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.e2-bom {
  position: absolute;
  z-index: 1;
  display: none;
  width: 44px;
  height: 62px;
}

.e2-fant {
  position: absolute;
  top: 190px;
  z-index: 4;
  display: none;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1.5px dashed var(--texto-suave);
  border-radius: 6px;
  background: var(--hueso);
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hoja {
  position: absolute;
  top: 0;
  left: 250px;
  z-index: 3;
  width: 310px;
  border: 1px solid #e2e2dc;
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: 0 18px 40px rgb(17 17 17 / 10%);
}

.hoja__cab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 14px 14px 0 0;
  background: #f0f0ec;
  color: var(--grafito);
  font-size: 12.5px;
  font-weight: 600;
}

.hoja__cab i {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #1f7a45;
}

.hoja__t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hoja__t td {
  padding: 8px 14px;
  border-top: 1px solid #ecece7;
  color: var(--texto-suave);
}

.hoja__t td:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hoja__t tr.es td {
  color: var(--carbon);
  font-weight: 700;
}

.hoja__celda {
  display: inline-block;
  padding: 1px 6px;
  border: 2px solid var(--peligro);
  border-radius: 4px;
  color: #b4232a;
}

.hoja__pie {
  padding: 8px 14px 10px;
  border-top: 1px solid #ecece7;
  color: var(--texto-suave);
  font-size: 11.5px;
}

.nocuadra {
  position: absolute;
  right: 10px;
  bottom: -36px;
}

.orden {
  position: absolute;
  top: 470px;
  left: 0;
  z-index: 4;
  width: 300px;
  padding: 14px 16px;
  border: 1px solid #e2e2dc;
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: 0 18px 40px rgb(17 17 17 / 10%);
}

.orden__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.orden b {
  display: block;
  margin: 8px 0 4px;
  font-size: 17px;
}

.orden p:last-child {
  color: var(--texto-suave);
  font-size: 13px;
}

.ticket {
  position: absolute;
  top: 360px;
  left: 330px;
  z-index: 5;
  width: 230px;
  height: 250px;
  filter: drop-shadow(0 18px 30px rgb(17 17 17 / 16%));
}

.ticket__in {
  height: 100%;
  padding: 16px;
  background: var(--blanco);
  color: var(--grafito);
  font-size: 12.5px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    92% 97%,
    84% 100%,
    76% 97%,
    68% 100%,
    60% 97%,
    52% 100%,
    44% 97%,
    36% 100%,
    28% 97%,
    20% 100%,
    12% 97%,
    4% 100%,
    0 97%
  );
}

.ticket__t {
  margin-bottom: 10px;
  color: var(--carbon);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket .fila {
  padding: 6px 0;
  border-bottom: 1px dashed #dddddd;
}

.ticket__tot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--carbon);
  font-size: 15px;
  font-weight: 800;
}

.sello-urg {
  position: absolute;
  top: 524px;
  left: 392px;
  z-index: 6;
  padding: 0 12px;
  border: 3px solid var(--aviso-claro);
  border-radius: 8px;
  background: rgb(255 243 219 / 85%);
  color: var(--aviso-claro);
  font-family: var(--fuente-marca);
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  transform: rotate(-9deg);
}

.fuga {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.moneda {
  position: absolute;
  top: 300px;
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--carbon);
  color: var(--hueso);
  font-size: 15px;
  font-weight: 800;
}

.cifra {
  position: absolute;
  top: 170px;
  right: 0;
  left: 0;
  z-index: 8;
  display: none;
  text-align: center;
}

.cifra small {
  display: block;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cifra b {
  display: block;
  color: var(--carbon);
  font-family: var(--fuente-marca);
  font-size: 220px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  white-space: nowrap;
}

.cifra span {
  display: inline-block;
  margin-top: 22px;
  color: var(--texto-suave);
  font-size: 15px;
}

.e2-bom:nth-child(1) {
  top: 226px;
  left: 96px;
}

.e2-bom:nth-child(2) {
  top: 246px;
  left: 121px;
}

.e2-bom:nth-child(3) {
  top: 226px;
  left: 146px;
}

.e2-bom:nth-child(4) {
  top: 246px;
  left: 171px;
}

.e2-bom:nth-child(5) {
  top: 226px;
  left: 196px;
}

.e2-bom:nth-child(6) {
  top: 246px;
  left: 221px;
}

.e2-bom:nth-child(7) {
  top: 226px;
  left: 246px;
}

.e2-bom:nth-child(8) {
  top: 246px;
  left: 271px;
}

.e2-bom:nth-child(9) {
  top: 226px;
  left: 296px;
}

.e2-bom:nth-child(10) {
  top: 246px;
  left: 321px;
}

.e2-bom:nth-child(11) {
  top: 226px;
  left: 346px;
}

.e2-bom:nth-child(12) {
  top: 246px;
  left: 371px;
}

.e2-fant:nth-child(1) {
  left: 296px;
}

.e2-fant:nth-child(2) {
  left: 146px;
}

.e2-fant:nth-child(3) {
  left: 321px;
}

.e2-fant:nth-child(4) {
  left: 171px;
}

.e2-fant:nth-child(5) {
  left: 246px;
}

.e2-fant:nth-child(6) {
  left: 96px;
}

.moneda:nth-child(1) {
  left: 110px;
}

.moneda:nth-child(2) {
  left: 163px;
}

.moneda:nth-child(3) {
  left: 216px;
}

.moneda:nth-child(4) {
  left: 269px;
}

.moneda:nth-child(5) {
  left: 322px;
}

.moneda:nth-child(6) {
  left: 375px;
}

.moneda:nth-child(7) {
  left: 158px;
}

/* --- 03 Tres cosas ----------------------------------------------------------- */

.tres {
  padding: 96px 0 80px;
}

.tres__h {
  margin: 26px 0 22px;
  font-size: 72px;
  line-height: 0.88;
}

.tres__grid {
  display: grid;
  gap: 56px;
  margin-top: 40px;
}

.cosa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cosa__esc {
  position: relative;
  align-self: stretch;
  height: 330px;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 24px;
  background: var(--superficie);
}

.cosa__n {
  margin: 28px 0 10px;
}

.cosa h3 {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 0.95;
}

.cosa > p:last-of-type {
  max-width: 360px;
  margin-bottom: 22px;
  color: var(--texto-inverso-suave);
  font-size: 16px;
  line-height: 1.55;
}

/* «Ver cómo funciona →» de cada tarjeta, al pie y alineado entre las tres (10.4b). */
.cosa__enl {
  margin-top: auto;
  font-size: 15px;
}

.tres__pie {
  margin-top: 40px;
  color: var(--acero);
  font-size: 12px;
}

.c1 .tel {
  position: absolute;
  top: 34px;
  left: 50%;
  margin-left: -144px;
  transform: scale(0.82);
  transform-origin: 50% 0;
}

.c1__toques {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 66px;
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

.c1__toques span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--lima);
  border-radius: 999px;
  background: var(--lima);
  color: var(--carbon);
  font-size: 12.5px;
  font-weight: 600;
}

.c1__toques b {
  font-family: var(--fuente-marca);
  font-size: 15px;
  font-style: italic;
}

.c2__card {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 24px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--hueso);
  color: var(--carbon);
}

.c2__rot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.c2__cif {
  margin: 6px 0 2px;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.c2__det {
  color: var(--ok-claro);
  font-size: 12px;
  font-weight: 600;
}

.c2__barras {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 74px;
  margin-top: 14px;
}

.c2__barras i {
  flex: 1;
  border-radius: 5px;
  background: var(--carbon);
  transform-origin: 50% 100%;
}

.c2__barras i:nth-child(1) {
  height: 50%;
}

.c2__barras i:nth-child(2) {
  height: 38%;
}

.c2__barras i:nth-child(3) {
  height: 100%;
  background: var(--lima);
  box-shadow: inset 0 0 0 1.5px var(--carbon);
}

.c2__barras i:nth-child(4) {
  height: 44%;
}

.c2__barras i:nth-child(5) {
  height: 30%;
}

.c2__ejes {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.c2__ejes span {
  flex: 1;
  color: var(--texto-suave);
  font-size: 10.5px;
  text-align: center;
}

.c2__mini {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  gap: 10px;
}

.c2__mini div {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: #222222;
}

.c2__mini small {
  display: block;
  color: var(--texto-inverso-suave);
  font-size: 11px;
}

.c2__mini b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c3__av {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--hueso);
  box-shadow: 0 20px 40px rgb(0 0 0 / 45%);
  color: var(--carbon);
}

.c3__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--lima);
  color: var(--carbon);
}

.c3__av b,
.c3__av small {
  display: block;
  font-size: 14px;
}

.c3__av small {
  margin-top: 2px;
  color: var(--texto-suave);
  font-size: 12px;
}

.c3__av .badge {
  flex: none;
  margin-left: auto;
}

.c3__graf {
  position: absolute;
  top: 104px;
  right: 24px;
  left: 24px;
  height: 200px;
}

.c3__graf svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.c3__lin {
  fill: none;
  stroke: var(--hueso);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.c3__min {
  stroke: var(--aviso);
  stroke-dasharray: 6 6;
  stroke-width: 2;
}

.c3__minl {
  fill: var(--aviso);
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600;
}

.c3__pt {
  fill: var(--aviso);
}

.c3__onda {
  display: none;
  fill: none;
  stroke: var(--aviso);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.c3__canales {
  position: absolute;
  bottom: 18px;
  left: 24px;
  display: flex;
  gap: 8px;
}

.c3__canales span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid #333333;
  border-radius: 999px;
  color: var(--texto-inverso-suave);
  font-size: 12px;
}

.c3__canales svg {
  width: 14px;
  height: 14px;
}

/* --- Confianza --------------------------------------------------------------- */

.conf__in {
  display: grid;
}

.conf__it {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 0;
}

.conf__it + .conf__it {
  border-top: 1px solid #dcdcd6;
}

.conf__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--carbon);
  color: var(--lima);
}

.conf__ic svg {
  width: 26px;
  height: 26px;
}

.conf__it h3 {
  font-size: 30px;
  line-height: 0.98;
}

.conf__it p {
  margin-top: 8px;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.45;
}

/* --- 04 Demo y formulario ---------------------------------------------------- */

.demo {
  position: relative;
  overflow: hidden;
  padding: 96px 0 120px;
}

.demo__k {
  --k-asta: #1a1a1a;
  --k-brazo: #1f1f1f;
  position: absolute;
  top: 20px;
  right: -260px;
  width: 560px;
  height: 408px;
}

.demo__in {
  display: grid;
  gap: 32px;
}

.demo__h {
  margin: 26px 0 28px;
  font-size: 84px;
  line-height: 0.86;
  scroll-margin-top: calc(var(--cabecera) + 16px);
}

.demo__txt .lead {
  max-width: 480px;
}

.aviso-idioma {
  margin-top: 16px;
  color: var(--texto-inverso-suave);
  font-size: 15px;
}

.demo__hoja {
  padding: 22px 18px;
  border-radius: 24px;
  background: var(--hueso);
  color: var(--carbon);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario__instruccion,
.formulario__privacidad,
.campo__ayuda {
  color: var(--texto-suave);
  font-size: 13px;
  line-height: 1.5;
}

.formulario__privacidad {
  font-size: 12px;
}

.enlace-texto {
  display: inline-block;
  margin-block: -13px;
  padding-block: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font-size: 14px;
  font-weight: 600;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #8c8c86;
  border-radius: 10px;
  background: var(--blanco);
  color: var(--carbon);
  font-size: 15px;
}

.campo textarea {
  min-height: 84px;
  resize: vertical;
}

.campo [aria-invalid='true'] {
  padding: 11px 13px;
  border: 2px solid var(--error);
}

.campo__error,
.formulario__alerta {
  color: var(--error);
  font-size: 14px;
  font-weight: 600;
}

.campo__error:empty,
.formulario__alerta:empty {
  display: none;
}

.trampa {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.boton--principal {
  background: var(--lima);
  color: var(--carbon);
}

.boton--principal:hover {
  background: var(--lima-pulsado);
}

.boton[disabled],
.boton[aria-disabled='true'] {
  cursor: not-allowed;
}

.boton[disabled] {
  background: var(--niebla);
  color: var(--texto-suave);
}

.exito {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exito h3 {
  font-size: 20px;
  font-weight: 600;
}

.demo__hoja noscript p {
  margin-top: 16px;
  font-size: 14px;
}

/* --- Pie y barra fija -------------------------------------------------------- */

.pie {
  padding: 32px 0 110px;
  border-top: 1px solid #222222;
}

.pie__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px 24px;
  color: var(--texto-inverso-suave);
  font-size: 14px;
}

.pie__marca {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie__nav,
.idioma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}

.pie__nav a,
.idioma a,
.idioma span {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.idioma {
  gap: 0 6px;
}

.idioma li + li::before {
  content: '·';
  margin-right: 6px;
}

.idioma li {
  display: inline-flex;
  align-items: center;
}

.idioma .idioma__actual span {
  min-width: 0;
}

.idioma__actual span {
  color: var(--hueso);
  font-weight: 600;
}

/* El idioma en la cabecera, el mismo «ES · EN» del pie (chore/landing-idioma, D-LND-78). */
.cab__idioma {
  flex-wrap: nowrap;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
}

.cab__idioma + .cab__entrar {
  margin-left: 0;
}

/* En el teléfono solo se ve el otro idioma; el actual sigue para el lector. Bajo 375 px
   no cabe un objetivo más de 44 px y queda el del pie (D-LND-78). */
@media (max-width: 600px) {
  .cab__in {
    gap: 8px;
  }

  .cab__demo {
    padding: 0 10px;
  }

  .cab__idioma .idioma__actual {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cab__idioma li + li::before {
    content: none;
  }

  .cab__idioma a {
    justify-content: center;
  }
}

@media (max-width: 374.98px) {
  .cab__idioma {
    display: none;
  }

  .cab__idioma + .cab__entrar {
    margin-left: auto;
  }
}

.barra {
  display: none;
}

/* --- Por debajo de 360 px: la cabecera cabe (10.4c, D-LND-40) ----------------- */

@media (max-width: 359.98px) {
  .cab__in {
    gap: 8px;
  }

  .cab__demo {
    padding: 0 10px;
  }
}

/* --- Entre 601 y 1099 px: una columna, a más escala ------------------------- */

@media (min-width: 601px) {
  :root {
    --cabecera: 80px;
  }

  .cont {
    width: min(1200px, 100% - 48px);
  }

  .cab__in {
    gap: 24px;
  }

  .cab__logo img {
    width: 150px;
  }

  .cab__nav {
    display: block;
    margin: 0 auto;
  }

  .cab__nav ul {
    display: flex;
    gap: 12px 36px;
  }

  .cab__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #cfd0ca;
    font-size: 15px;
    font-weight: 500;
  }

  .cab__entrar,
  .cab__idioma {
    margin-left: 0;
  }

  .cab__una {
    display: inline;
  }

  .cab__demo {
    padding: 0 20px;
    font-size: 15px;
  }

  .lead {
    font-size: 20px;
  }

  .hero__h1 {
    font-size: 96px;
  }

  .esc2__marco {
    width: 448px;
    height: 512px;
  }

  .esc2 {
    transform: scale(0.8);
  }

  .verso {
    font-size: 48px;
  }

  .tres__h {
    font-size: 96px;
  }

  .tres__grid {
    max-width: 560px;
  }

  .demo__h {
    font-size: 120px;
  }

  .demo__hoja {
    max-width: 560px;
    padding: 32px;
  }

  .pie {
    padding-bottom: 44px;
  }
}

/* --- Desde 1100 px: el escritorio (511:2) ----------------------------------- */

@media (min-width: 1100px) {
  .hero {
    padding: 0;
  }

  .hero__in {
    min-height: 820px;
  }

  .hero__k {
    top: -10px;
    right: -150px;
    bottom: auto;
    left: auto;
    width: 940px;
    height: 685px;
  }

  /* Hasta donde empieza la escena: el texto nunca la pisa (V3-20). */
  .hero__txt {
    width: min(720px, 100% - 520px);
    padding-top: 88px;
  }

  .hero__h1 {
    margin: 30px 0 34px;
    font-size: 112px;
    line-height: 0.86;
  }

  .hero__lead {
    max-width: 480px;
  }

  .hero__cta {
    gap: 32px;
    margin-top: 40px;
  }

  .hero__cta .btn {
    min-height: 56px;
    padding: 0 28px;
  }

  .hero__esc {
    position: absolute;
    top: 50px;
    left: calc(100% - 490px);
    width: 520px;
    height: 700px;
    margin: 0;
    transform: scale(0.85);
    transform-origin: 100% 0;
  }

  .hero__esc .tel {
    top: 40px;
    left: 96px;
    transform: none;
  }

  .hero__pie {
    position: absolute;
    bottom: 34px;
    left: 0;
  }

  .dato {
    padding: 18px 20px;
  }

  .dato__rot {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .dato--stock {
    top: 0;
    left: 340px;
    width: 214px;
    padding: 18px 20px;
  }

  .odo__num {
    --fila: 97px;
    font-size: 108px;
  }

  .odo__ud {
    margin-bottom: 10px;
  }

  .delta {
    top: auto;
    right: 16px;
    bottom: 26px;
  }

  .dato--gasto {
    top: 500px;
    left: -130px;
    width: 330px;
    padding: 18px 20px;
  }

  .dato__cif {
    font-size: 40px;
  }

  .prob__stage {
    display: flex;
    align-items: center;
    min-height: 820px;
    padding: 80px 0;
  }

  .prob__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: start;
    column-gap: 40px;
  }

  .prob__izq {
    display: block;
  }

  .versos {
    margin-top: 0;
  }

  .prob__izq .ante {
    margin-bottom: 36px;
  }

  .versos {
    padding-left: 30px;
  }

  .versos::before,
  .versos::after {
    width: 4px;
  }

  .verso {
    font-size: 62px;
    line-height: 1.02;
  }

  .esc2__marco {
    width: 560px;
    height: 640px;
  }

  .esc2 {
    transform: none;
  }

  .esc2__marco {
    order: 0;
    margin-top: 0;
  }

  .prob__pie {
    grid-column: 1 / -1;
    order: 1;
  }

  .prob__pie span {
    display: inline;
    margin-left: 12px;
  }

  .tres {
    padding: 150px 0 140px;
  }

  .tres__h {
    font-size: 120px;
  }

  .tres__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: none;
    margin-top: 64px;
  }

  .cosa__esc {
    height: 360px;
  }

  .cosa h3 {
    font-size: 46px;
  }

  .conf__in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .conf__it {
    position: relative;
    padding: 56px 40px 56px 0;
  }

  .conf__it + .conf__it {
    padding-left: 40px;
    border-top: 0;
  }

  .conf__it + .conf__it::before {
    content: '';
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    width: 4px;
    background: var(--carbon);
    transform: skewX(-12deg);
  }

  .conf__it h3 {
    font-size: 34px;
  }

  .demo {
    padding: 150px 0;
  }

  .demo__k {
    top: auto;
    right: auto;
    bottom: -120px;
    left: -230px;
    width: 760px;
    height: 554px;
  }

  .demo__in {
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: start;
    gap: 80px;
  }

  .demo__h {
    font-size: 150px;
  }

  .pie {
    padding: 40px 0 44px;
  }

  .pie__in {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }

  .pie__marca {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .pie__logo img {
    width: 124px;
  }
}

/* Entre 1100 y 1279 la escena del hero se escala al 85 % y se aparta del
   borde para no pisar el texto ni salirse (spec §4). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero__esc {
    left: calc(100% - 560px);
  }

  .hero__lead {
    max-width: 440px;
  }
}

@media (min-width: 1280px) {
  .hero__h1 {
    font-size: 132px;
  }

  .hero__esc {
    transform: none;
  }
}

/* =============================================================================
   Movimiento (docs/specs/10.4-landing-v3.md §3). Nada de lo de arriba depende
   de esto: sin ello, cada escena está en su estado final.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .enl span {
    display: inline-block;
    transition: transform 0.3s var(--salida);
  }

  .enl:hover span {
    transform: translateX(4px);
  }
}

/* La barra fija del teléfono (K6): la pone y la quita movimiento.js. */
@media (scripting: enabled) and (max-width: 600px) {
  .barra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #262626;
    background: rgb(17 17 17 / 92%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    visibility: hidden;
    transform: translateY(110%);
  }

  .barra.ve {
    visibility: visible;
    transform: none;
  }

  .barra .btn {
    flex: 1;
  }
}

@media (scripting: enabled) and (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .barra {
    transition:
      transform 0.45s var(--salida),
      visibility 0s linear 0.45s;
  }

  .barra.ve {
    transition:
      transform 0.45s var(--salida),
      visibility 0s;
  }
}

/* --- Escenas por tiempo: arrancan en pausa y movimiento.js pone «va» -------- */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-escena='hero']:not(.va) *,
  [data-escena='retirar']:not(.va) *,
  [data-escena='valor']:not(.va) *,
  [data-escena='avisos']:not(.va) *,
  .prob:not(.va) .prob__stage *,
  .prob:not(.va) .versos::after,
  .prob:not(.va) .lim::before,
  .hero:not(:has(.va)) .hero__k {
    animation-play-state: paused !important;
  }

  .ini,
  .vuela,
  .linea,
  .flash,
  .toque,
  .c3__onda {
    display: block;
  }

  .cambia > .ini {
    display: inline;
  }

  .vuela {
    display: inline-flex;
  }

  /* El teléfono: tiempos en ms en variables, compartidos por K1 y K3. */
  [data-escena='hero'] {
    --t-lock: 1650;
    --t-id: 2050;
    --t-mas: 2650;
    --t-ret: 3150;
    --t-ok: 3350;
  }

  [data-escena='retirar'] {
    --t-lock: 800;
    --t-id: 1050;
    --t-mas: 1550;
    --t-ret: 2000;
    --t-ok: 2150;
  }

  .tel .mira {
    animation: mira 600ms var(--salida) calc((var(--t-lock) - 600) * 1ms) both;
  }

  .tel .mira i {
    animation: mira-fija 1ms linear calc(var(--t-lock) * 1ms) both;
  }

  .tel .linea {
    animation: linea 820ms linear calc((var(--t-lock) - 700) * 1ms) both;
  }

  .tel .flash {
    animation: destello 260ms linear calc(var(--t-lock) * 1ms) both;
  }

  .tel .leida {
    animation: leida 260ms var(--salida) calc((var(--t-lock) + 40) * 1ms) both;
  }

  .tel .scr--id {
    animation: sube 320ms var(--entrada-salida) calc(var(--t-id) * 1ms) both;
  }

  .tel .cambia > .ini {
    animation: sale 1ms linear calc((var(--t-mas) + 90) * 1ms) both;
  }

  .tel .cambia > .fin {
    animation: entra 1ms linear calc((var(--t-mas) + 90) * 1ms) both;
  }

  .tel .bt--mas .toque {
    animation: toque 380ms var(--salida) calc(var(--t-mas) * 1ms) both;
  }

  .tel .tbtn--ret .toque {
    animation: toque 380ms var(--salida) calc(var(--t-ret) * 1ms) both;
  }

  .tel .tbtn--ret {
    animation: pulsa 160ms linear calc(var(--t-ret) * 1ms) both;
  }

  .tel .scr--ok {
    animation: aparece-ok 300ms var(--salida) calc(var(--t-ok) * 1ms) both;
  }

  .tel .okc {
    animation: crece 400ms var(--rebote) calc((var(--t-ok) + 120) * 1ms) both;
  }

  /* K1 · Hero (5,3 s). */
  .hero__k {
    animation: descubre-k 1100ms var(--salida) 100ms both;
  }

  [data-escena='hero'] .tel {
    animation: entra-tel 950ms var(--salida) both;
  }

  [data-escena='hero'] .dato {
    animation: entra-dato 650ms var(--salida) 450ms both;
  }

  [data-escena='hero'] .odo__u {
    animation: odometro 650ms var(--entrada-salida) 3500ms both;
  }

  [data-escena='hero'] .delta {
    animation: crece 300ms var(--rebote) 3650ms both;
  }

  [data-escena='hero'] .vuela {
    --x0: 223px;
    --y0: 356px;
    --x1: 122px;
    --y1: 415px;
    animation: vuela 700ms var(--entrada-salida) 3750ms both;
  }

  [data-escena='hero'] .mas--fija {
    animation: crece 300ms var(--rebote) 4450ms both;
  }

  [data-escena='hero'] .dato__cif .ini {
    animation: rueda-sale 600ms var(--salida) 4400ms both;
  }

  [data-escena='hero'] .dato__cif .fin {
    animation: rueda-entra 600ms var(--salida) 4400ms both;
  }

  /* K3 · A, retiras en segundos (3 s). */
  [data-escena='retirar'] .c1__toques span:nth-child(1) {
    animation: pildora 1ms linear 850ms both;
  }

  [data-escena='retirar'] .c1__toques span:nth-child(2) {
    animation: pildora 1ms linear 1650ms both;
  }

  [data-escena='retirar'] .c1__toques span:nth-child(3) {
    animation: pildora 1ms linear 2300ms both;
  }

  /* K4 · B, sabes cuánto vale (2,4 s). */
  [data-escena='valor'] .c2__barras i {
    animation: barra 700ms var(--salida) both;
  }

  [data-escena='valor'] .c2__barras i:nth-child(1) {
    animation-delay: 100ms;
  }

  [data-escena='valor'] .c2__barras i:nth-child(2) {
    animation-delay: 220ms;
  }

  [data-escena='valor'] .c2__barras i:nth-child(3) {
    animation-delay: 340ms;
  }

  [data-escena='valor'] .c2__barras i:nth-child(4) {
    animation-delay: 460ms;
  }

  [data-escena='valor'] .c2__barras i:nth-child(5) {
    animation-delay: 580ms;
  }

  [data-escena='valor'] .c2__cif {
    animation: entra-dato 900ms var(--salida) 200ms both;
  }

  [data-escena='valor'] .c2__mini {
    animation: entra-dato 500ms var(--salida) 700ms both;
  }

  /* K5 · C, te avisa antes de que falte (2,8 s). */
  [data-escena='avisos'] .c3__lin {
    stroke-dasharray: 1;
    animation: traza 1400ms var(--entrada-salida) both;
  }

  [data-escena='avisos'] .c3__pt {
    animation: entra 1ms linear 1380ms both;
  }

  [data-escena='avisos'] .c3__onda {
    animation: onda 820ms var(--salida) 1180ms both;
  }

  [data-escena='avisos'] .c3__av {
    animation: cae-aviso 550ms var(--rebote) 1500ms both;
  }

  [data-escena='avisos'] .c3__canales {
    animation: entra-suave 500ms var(--salida) 2000ms both;
  }

  @media (min-width: 1100px) {
    [data-escena='hero'] .vuela {
      --x0: 200px;
      --y0: 472px;
      --x1: -12px;
      --y1: 603px;
    }
  }

  /* Revelado de la franja de confianza (K6). */
  [data-rev] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s var(--salida),
      transform 0.7s var(--salida);
  }

  [data-rev].ve {
    opacity: 1;
    transform: none;
  }

  .conf__it:nth-child(2) {
    transition-delay: 120ms;
  }

  .conf__it:nth-child(3) {
    transition-delay: 240ms;
  }
}

/* --- K2 · El problema: por tiempo, una vez, al verse sus frases -------------- */

/* movimiento.js pone «va» en .prob (D-LND-80). Cada pieza tiene su tramo
   [--a, --b] de --t: las frases, 1/5 cada una; la estantería y la hoja, el
   suyo (D-LND-81). La sección mide lo natural, sin fijarse (D-LND-82). */
@media (prefers-reduced-motion: no-preference) {
  .prob {
    --t: 8s;
  }

  .prob__stage *,
  .versos::after,
  .verso .lim::before {
    --a: 0;
    --b: 1;

    animation-delay: calc(var(--t) * var(--a));
    animation-duration: calc(var(--t) * (var(--b) - var(--a)));
    animation-fill-mode: both;
    animation-timing-function: linear;
  }

  .e2-bom {
    display: block;
  }

  .e2-fant {
    display: flex;
  }

  .moneda {
    display: grid;
  }

  .cifra {
    display: block;
  }

  .versos::after {
    animation-name: progreso;
  }

  .verso:nth-child(1) {
    animation-name: verso-1;
  }

  .verso:nth-child(2) {
    animation-name: verso-2;
  }

  .verso:nth-child(3) {
    animation-name: verso-3;
  }

  .verso:nth-child(4) {
    animation-name: verso-4;
  }

  .verso:nth-child(5) {
    animation-name: verso-5;
  }

  .verso .lim::before {
    animation-name: lima-5;
  }

  .hoja__celda {
    animation-name: celda;
  }

  .nocuadra {
    --a: 0.44;
    --b: 0.5;

    animation-name: crece;
  }

  .e2-cero {
    --a: 0.41;
    --b: 0.47;

    animation-name: cae-cero;
  }

  .orden {
    --a: 0.47;
    --b: 0.56;

    animation-name: entra-orden;
  }

  .ticket {
    --a: 0.61;
    --b: 0.73;

    animation-name: imprime;
  }

  .sello-urg {
    --a: 0.73;
    --b: 0.78;

    animation-name: sella;
  }

  .esc2__fondo {
    --a: 0.8;
    --b: 0.87;

    animation-name: apaga;
  }

  .cifra {
    --a: 0.85;
    --b: 0.92;

    animation-name: entra-dato;
  }

  .moneda {
    animation-name: cae-moneda;
  }

  .e2-bom {
    --giro: 10deg;

    animation-name: sale-bombilla;
  }

  .e2-bom:nth-child(odd) {
    --giro: -10deg;
  }

  .e2-bom:nth-child(1) {
    --a: 0.355;
    --b: 0.385;
  }

  .e2-bom:nth-child(2) {
    --a: 0.109;
    --b: 0.139;
  }

  .e2-bom:nth-child(3) {
    --a: 0.243;
    --b: 0.273;
  }

  .e2-bom:nth-child(4) {
    --a: 0.299;
    --b: 0.329;
  }

  .e2-bom:nth-child(5) {
    --a: 0.053;
    --b: 0.083;
  }

  .e2-bom:nth-child(6) {
    --a: 0.165;
    --b: 0.195;
  }

  .e2-bom:nth-child(7) {
    --a: 0.327;
    --b: 0.357;
  }

  .e2-bom:nth-child(8) {
    --a: 0.081;
    --b: 0.111;
  }

  .e2-bom:nth-child(9) {
    --a: 0.215;
    --b: 0.245;
  }

  .e2-bom:nth-child(10) {
    --a: 0.271;
    --b: 0.301;
  }

  .e2-bom:nth-child(11) {
    --a: 0.025;
    --b: 0.055;
  }

  .e2-bom:nth-child(12) {
    --a: 0.137;
    --b: 0.167;
  }

  .e2-fant {
    animation-name: fantasma;
  }

  .e2-fant:nth-child(1) {
    --a: 0.22;
    --b: 0.305;
  }

  .e2-fant:nth-child(2) {
    --a: 0.248;
    --b: 0.333;
  }

  .e2-fant:nth-child(3) {
    --a: 0.276;
    --b: 0.361;
  }

  .e2-fant:nth-child(4) {
    --a: 0.304;
    --b: 0.389;
  }

  .e2-fant:nth-child(5) {
    --a: 0.332;
    --b: 0.417;
  }

  .e2-fant:nth-child(6) {
    --a: 0.36;
    --b: 0.445;
  }

  .moneda:nth-child(1) {
    --a: 0.79;
    --b: 0.87;
  }

  .moneda:nth-child(2) {
    --a: 0.808;
    --b: 0.888;
  }

  .moneda:nth-child(3) {
    --a: 0.826;
    --b: 0.906;
  }

  .moneda:nth-child(4) {
    --a: 0.844;
    --b: 0.924;
  }

  .moneda:nth-child(5) {
    --a: 0.862;
    --b: 0.942;
  }

  .moneda:nth-child(6) {
    --a: 0.88;
    --b: 0.96;
  }

  .moneda:nth-child(7) {
    --a: 0.898;
    --b: 0.978;
  }
}

@keyframes mira {
  from {
    opacity: 0.4;
    transform: scale(1.2);
  }
}

@keyframes mira-fija {
  from {
    border-color: var(--blanco);
  }
}

@keyframes linea {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  1% {
    opacity: 1;
  }

  51% {
    transform: translateY(128px);
  }

  85% {
    opacity: 1;
    transform: translateY(70px);
  }

  86%,
  100% {
    opacity: 0;
    transform: translateY(70px);
  }
}

@keyframes destello {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

@keyframes leida {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
}

@keyframes sube {
  from {
    transform: translateY(100%);
  }
}

@keyframes sale {
  to {
    opacity: 0;
  }
}

@keyframes entra {
  from {
    opacity: 0;
  }
}

@keyframes toque {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  1% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

@keyframes pulsa {
  0%,
  100% {
    transform: none;
  }

  1%,
  99% {
    transform: scale(0.96);
  }
}

@keyframes aparece-ok {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes crece {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes descubre-k {
  from {
    clip-path: inset(0 0 0 100%);
    transform: translateX(60px);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes entra-tel {
  from {
    opacity: 0;
    translate: 0 48px;
  }
}

@keyframes entra-dato {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes entra-suave {
  from {
    opacity: 0;
  }
}

@keyframes odometro {
  from {
    transform: none;
  }
}

@keyframes vuela {
  0% {
    opacity: 0;
    transform: translate(var(--x0), var(--y0));
  }

  1% {
    opacity: 1;
  }

  50% {
    transform: translate(
        calc((var(--x0) + var(--x1)) / 2),
        calc((var(--y0) + var(--y1)) / 2 - 70px)
      )
      scale(1.25);
  }

  99% {
    opacity: 1;
    transform: translate(var(--x1), var(--y1));
  }

  100% {
    opacity: 0;
    transform: translate(var(--x1), var(--y1));
  }
}

@keyframes rueda-sale {
  to {
    opacity: 0;
    transform: translateY(-60%);
  }
}

@keyframes rueda-entra {
  from {
    opacity: 0;
    transform: translateY(60%);
  }
}

@keyframes pildora {
  from {
    border-color: #333333;
    background: #0e0e0e;
    color: #8e8f8a;
  }
}

@keyframes barra {
  from {
    transform: scaleY(0);
  }
}

@keyframes traza {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes onda {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  1% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(3.75);
  }
}

@keyframes cae-aviso {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }

  36% {
    opacity: 1;
  }
}

@keyframes progreso {
  from {
    transform: scaleY(0);
  }
}

@keyframes verso-1 {
  0%,
  19.9% {
    color: var(--carbon);
  }

  20%,
  100% {
    color: var(--verso-apagado);
  }
}

@keyframes verso-2 {
  0%,
  19.9%,
  40%,
  100% {
    color: var(--verso-apagado);
  }

  20%,
  39.9% {
    color: var(--carbon);
  }
}

@keyframes verso-3 {
  0%,
  39.9%,
  60%,
  100% {
    color: var(--verso-apagado);
  }

  40%,
  59.9% {
    color: var(--carbon);
  }
}

@keyframes verso-4 {
  0%,
  59.9%,
  80%,
  100% {
    color: var(--verso-apagado);
  }

  60%,
  79.9% {
    color: var(--carbon);
  }
}

@keyframes verso-5 {
  0%,
  79.9% {
    color: var(--verso-apagado);
  }

  80%,
  100% {
    color: var(--carbon);
  }
}

@keyframes lima-5 {
  0%,
  79.9% {
    opacity: 0;
  }

  80%,
  100% {
    opacity: 1;
  }
}

@keyframes celda {
  0%,
  35.9% {
    border-color: transparent;
    color: var(--carbon);
  }

  36%,
  42.9% {
    border-color: var(--aviso);
    color: var(--carbon);
  }

  43%,
  100% {
    border-color: var(--peligro);
    color: #b4232a;
  }
}

@keyframes cae-cero {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes entra-orden {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
}

@keyframes imprime {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0 0 -40px 0);
  }
}

@keyframes sella {
  0% {
    opacity: 0;
    transform: rotate(-9deg) scale(1.6);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotate(-9deg);
  }
}

@keyframes apaga {
  to {
    opacity: 0.1;
  }
}

@keyframes sale-bombilla {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-46px) rotate(var(--giro, 10deg));
  }
}

@keyframes fantasma {
  0% {
    opacity: 0;
    transform: translate(-20px, 0);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-20px, -60px);
  }
}

@keyframes cae-moneda {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  1% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  99% {
    opacity: 0.5;
    transform: translateY(360px);
  }

  100% {
    opacity: 0;
    transform: translateY(360px);
  }
}