/* ==========================================================================
   Anavi Finance — web de presentación
   --------------------------------------------------------------------------
   Los colores de marca y de estado son los mismos de la aplicación
   (`lib/theme/brand.dart`). No se inventan aquí: si cambian allí, cambian aquí.

   El corte ancho está en 840 px a propósito, igual que en la aplicación
   (`lib/widgets/disposicion.dart`): un teléfono girado y una ventana pequeña
   de portátil se parecen más entre sí que un teléfono de pie y ese mismo
   teléfono girado.
   ========================================================================== */

:root {
  /* Marca — no se derivan de nada, son constantes. */
  --oro:          #C4A882;
  --oro-hondo:    #A8895F;
  --tinta:        #2C1F14;
  --tinta-tenue:  #7A6656;
  --lienzo:       #FAF8F5;
  --arena:        #F5EEE6;
  --claro:        #F5EEE6;
  --noche:        #1A120B;
  --noche-alta:   #241810;

  /* Estado: verde, naranja y rojo significan siempre lo mismo. */
  --ok:        #16A34A;
  --aviso:     #F59E0B;
  --peligro:   #DC2626;
  --ok-fondo:      #DCFCE7;
  --peligro-fondo: #FEF2F2;
  --peligro-tinta: #B91C1C;

  --linea:       rgba(44, 31, 20, .13);
  --linea-firme: rgba(44, 31, 20, .28);
  --blanco:      #FFFFFF;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texto:   "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --ancho:   1180px;
  --canal:   clamp(20px, 5vw, 56px);

  --sombra-suave: 0 1px 2px rgba(44, 31, 20, .04),
                  0 12px 32px -18px rgba(44, 31, 20, .28);
  --sombra-alta:  0 2px 4px rgba(44, 31, 20, .05),
                  0 32px 64px -32px rgba(44, 31, 20, .40);

  --curva: cubic-bezier(.22, 1, .36, 1);
}

/* En pantallas anchas el contenido crece hasta 1360 px, pero dejando siempre
   240 px a cada lado: ahí viven el índice lateral, las órbitas de la portada y
   las orlas de las secciones. Con 1180 fijos, en un monitor de 1920 quedaban
   370 px vacíos a cada lado; ensanchar sin más los habría llenado de nada. */
@media (min-width: 1520px) {
  :root { --ancho: clamp(1180px, calc(100vw - 480px), 1360px); }
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  /* `clip` y no `hidden`: recorta los arcos que se salen por la derecha sin
     crear un contenedor de desplazamiento, que dejaría muerta la barra
     superior pegajosa. Puesto en `body` no llegaba a recortar nada. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--oro); color: var(--blanco); }

:focus-visible {
  outline: 2px solid var(--oro-hondo);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.saltar {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--tinta);
  color: var(--claro);
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-size: 14px;
  transition: top .2s var(--curva);
}
.saltar:focus { top: 0; }

/* El grano evita que los planos grandes de color se vean plásticos.
   Va fijo y sin puntero: es atmósfera, no interfaz. */
.grano {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)' opacity='.28'/%3E%3C/svg%3E");
}

/* ─── Tipografía compartida ─────────────────────────────────────────────── */

.sobretitulo {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 22px;
}
.sobretitulo--claro { color: var(--oro); }

.titular {
  font-size: clamp(2.15rem, 5.2vw, 3.7rem);
}
.titular--claro { color: var(--claro); }

.entradilla {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  line-height: 1.58;
  color: var(--tinta-tenue);
  max-width: 34em;
}
.entradilla strong { color: var(--tinta); font-weight: 600; }
.entradilla em { font-style: italic; }

.parrafo-guia {
  margin-top: 20px;
  max-width: 46em;
  color: var(--tinta-tenue);
  font-size: 1.04rem;
}
.parrafo-guia--claro { color: rgba(245, 238, 230, .68); }

.etiqueta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.etiqueta--tenue { opacity: .55; }

/* Las cifras son el producto: van en el display, con ancho fijo por dígito
   para que no bailen mientras cambian. */
.cifra {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1;
}
.cifra--grande { font-size: clamp(2.6rem, 6.2vw, 4rem); }

.cifra__unidad {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-left: 8px;
}

/* ─── Botones ───────────────────────────────────────────────────────────── */

.boton {
  --fondo: transparent;
  --borde: var(--linea-firme);
  --tinta-boton: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--tinta-boton);
  font: 500 14.5px/1 var(--texto);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--curva), background .25s var(--curva),
              border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.boton:hover { transform: translateY(-2px); }

.boton--solido {
  --fondo: var(--tinta);
  --borde: var(--tinta);
  --tinta-boton: var(--claro);
  box-shadow: 0 10px 24px -14px rgba(44, 31, 20, .7);
}
.boton--solido:hover { --fondo: #14100c; --borde: #14100c; }

.boton--fantasma:hover { --borde: var(--tinta); background: rgba(196, 168, 130, .12); }

.boton--oro {
  --fondo: var(--oro);
  --borde: var(--oro);
  --tinta-boton: #241810;
  font-weight: 600;
}
.boton--oro:hover { --fondo: #d3ba99; --borde: #d3ba99; }

.boton--grande { padding: 16px 30px; font-size: 15.5px; }
.boton--ancho { width: 100%; }

.enlace-menor {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--tinta-tenue);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.enlace-menor:hover { color: var(--tinta); }

/* ─── Barra superior ────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px var(--canal);
  background: rgba(250, 248, 245, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding .3s var(--curva), border-color .3s var(--curva),
              background .3s var(--curva);
}
.barra.es-pegada {
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom-color: var(--linea);
}

.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}
.orbita { width: 28px; height: 28px; color: var(--oro); flex: none; }
.barra__nombre {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.barra__nav { display: flex; gap: 30px; }
.barra__nav a {
  font-size: 14.5px;
  color: var(--tinta-tenue);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
/* El subrayado crece desde la izquierda: el mismo gesto de trazo que el logo. */
.barra__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--oro-hondo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--curva);
}
.barra__nav a:hover { color: var(--tinta); }
.barra__nav a:hover::after { transform: scaleX(1); }

.barra__menu {
  display: none;
  background: none;
  border: 1px solid var(--linea-firme);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
}
.barra__rayas { display: grid; gap: 5px; width: 18px; }
.barra__rayas i {
  height: 1.5px;
  background: var(--tinta);
  transition: transform .3s var(--curva);
}
.barra__menu[aria-expanded="true"] .barra__rayas i:first-child { transform: translateY(3.25px) rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__rayas i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* `display: grid` gana a `[hidden]`, que solo vale `display: none` de la hoja
   del navegador. Sin esta línea el menú plegable se queda abierto en pantalla
   grande, encima de la portada. */
.nav-movil[hidden] { display: none; }

.nav-movil {
  position: sticky;
  top: 69px;
  z-index: 39;
  display: grid;
  gap: 4px;
  padding: 14px var(--canal) 24px;
  background: var(--lienzo);
  border-bottom: 1px solid var(--linea);
}
.nav-movil a {
  padding: 12px 2px;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  font-size: 16px;
}
.nav-movil .boton { margin-top: 14px; border-bottom: none; }

/* ─── Secciones ─────────────────────────────────────────────────────────── */

.seccion {
  position: relative;
  z-index: 2;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 132px) var(--canal);
  border-top: 1px solid var(--linea);
}

/* ─── Portada ───────────────────────────────────────────────────────────── */

.portada {
  position: relative;
  z-index: 2;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--canal) clamp(72px, 10vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}

.portada__arcos {
  position: absolute;
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  width: min(940px, 88vw);
  height: min(940px, 88vw);
  color: var(--oro);
  opacity: .3;
  pointer-events: none;
  z-index: -1;
}
/* El satélite recorre la órbita exterior: el movimiento sale del propio logo. */
.portada__satelite {
  transform-origin: 400px 400px;
  animation: orbitar 34s linear infinite;
  color: var(--oro-hondo);
  opacity: .5;
}
@keyframes orbitar { to { transform: rotate(360deg); } }

.portada h1 {
  font-size: clamp(2.7rem, 7.2vw, 5.1rem);
  margin-bottom: 26px;
}
.portada h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--oro-hondo);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.portada__pie {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--tinta-tenue);
}

/* ─── El conversor ──────────────────────────────────────────────────────── */

.conversor {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--sombra-alta);
  display: grid;
  gap: 16px;
}

.conversor__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.conversor__campo input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--linea-firme);
  background: none;
  padding: 4px 0 10px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--tinta);
  transition: border-color .25s var(--curva);
}
.conversor__campo input:focus {
  outline: none;
  border-bottom-color: var(--oro-hondo);
}

.conversor__monedas { display: flex; gap: 8px; }

.ficha {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--lienzo);
  font: 500 14px/1 var(--texto);
  color: var(--tinta-tenue);
  cursor: pointer;
  transition: all .22s var(--curva);
}
.ficha:hover { border-color: var(--linea-firme); color: var(--tinta); }
.ficha.es-activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--claro);
}

.conversor__flecha {
  justify-self: center;
  width: 18px;
  color: var(--oro);
  opacity: .8;
}

.conversor__salida {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-height: 46px;
}
.conversor__salida .cifra { transition: color .3s var(--curva); }

/* Sin tasa el valor es null, jamás 1:1: la cifra se va y lo dice. */
.conversor.es-pendiente .conversor__salida .cifra { color: var(--tinta-tenue); }

.sello {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-tenue);
  line-height: 1.4;
}
.sello--quieto { display: inline-flex; }

.sello__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--ok);
}
.sello__punto[data-frescura="media"]  { background: var(--aviso); }
.sello__punto[data-frescura="vieja"]  { background: var(--peligro); }
.sello__punto[data-frescura="neutra"] { background: #9CA3AF; }

.interruptor {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding-top: 4px;
  border-top: 1px solid var(--linea);
  margin-top: 2px;
}
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor__pista {
  width: 34px; height: 19px;
  border-radius: 999px;
  background: rgba(44, 31, 20, .16);
  position: relative;
  flex: none;
  transition: background .25s var(--curva);
  margin-top: 10px;
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .25s var(--curva);
}
.interruptor input:checked + .interruptor__pista { background: var(--peligro); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(15px); }
.interruptor input:focus-visible + .interruptor__pista {
  outline: 2px solid var(--oro-hondo);
  outline-offset: 3px;
}
.interruptor__texto { font-size: 13px; color: var(--tinta-tenue); margin-top: 10px; }

.insignia {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.insignia--peligro { background: var(--peligro-fondo); color: var(--peligro-tinta); }

/* ─── El problema ───────────────────────────────────────────────────────── */

.convergencia {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, .9fr);
  gap: 0;
  align-items: center;
}

.convergencia__origen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.convergencia__origen li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "moneda monto" "moneda nota";
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
  column-gap: 4px;
}
.convergencia__moneda {
  grid-area: moneda;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-tenue);
  align-self: center;
}
.convergencia__origen b {
  grid-area: monto;
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
}
.convergencia__origen i {
  grid-area: nota;
  font-style: normal;
  font-size: 12.5px;
  color: var(--tinta-tenue);
}

.convergencia__trazo {
  height: 200px;
  color: var(--oro);
  opacity: .55;
}

.convergencia__total {
  padding-left: clamp(20px, 4vw, 40px);
  border-left: 1px solid var(--linea);
  display: grid;
  gap: 12px;
  justify-items: start;
}
.convergencia__total p { display: flex; align-items: baseline; }

/* ─── Pasos ─────────────────────────────────────────────────────────────── */

.pasos__lista {
  list-style: none;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.paso {
  padding: 32px clamp(18px, 2.4vw, 30px) 8px;
  border-left: 1px solid var(--linea);
  position: relative;
}
.paso:first-child { border-left: none; padding-left: 0; }
.paso:last-child { padding-right: 0; }

/* El hilo de los cuatro pasos: una línea que se traza de izquierda a derecha
   con un punto en la punta —el satélite del logo— y va rellenando cada número
   al pasar. Cuenta lo mismo que la lista: van en orden. Solo con las cuatro
   columnas en fila; en dos o en una, una línea horizontal no une nada. */
.pasos__lista { position: relative; }
.pasos__lista::before,
.pasos__lista::after {
  content: "";
  position: absolute;
  top: 0;
  pointer-events: none;
}
.pasos__lista::before {
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s var(--curva) .2s;
}
.pasos__lista::after {
  left: 0;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--oro-hondo);
  opacity: 0;
}
.pasos__lista.es-visible::before { transform: scaleX(1); }
.pasos__lista.es-visible::after { animation: hilo-punto 1.5s var(--curva) .2s both; }
@keyframes hilo-punto {
  0%   { left: 0; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 1; }
}
.pasos__lista.es-visible .paso__numero {
  animation: llenar-numero .8s var(--curva) both;
  animation-delay: calc(var(--retardo, 0ms) * 3.6 + 380ms);
}
@keyframes llenar-numero {
  0%   { color: transparent; transform: translateY(8px); }
  55%  { color: rgba(196, 168, 130, .45); }
  100% { color: rgba(196, 168, 130, .22); transform: none; }
}

.paso__numero {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px var(--oro-hondo);
  margin-bottom: 18px;
  transition: color .4s var(--curva);
}
.paso:hover .paso__numero { color: rgba(196, 168, 130, .22); }

.paso h3 { font-size: 1.42rem; margin-bottom: 12px; }
.paso p { font-size: .95rem; color: var(--tinta-tenue); }
.paso strong { color: var(--tinta); font-weight: 600; }

/* ─── Funciones ─────────────────────────────────────────────────────────── */

.rejilla {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--sombra-suave);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
/* En la rejilla, las tarjetas de una misma fila miden lo que la más alta. En
   columna, con el título empujado abajo, el aire que sobra queda entre el
   dibujo y el texto, y los títulos de la fila quedan a la misma altura: antes
   se iba entero al fondo de la tarjeta y parecía un hueco. */
/* `:where` deja la especificidad en dos clases, para que las reglas de cada
   tamaño (`.rejilla > .tarjeta--asistente`) puedan cambiar la disposición. */
.rejilla > .tarjeta:where(:not(.tarjeta--ancha, .tarjeta--paletas)) {
  display: flex;
  flex-direction: column;
}
.rejilla > .tarjeta:where(:not(.tarjeta--ancha, .tarjeta--paletas)) > h3 { margin-top: auto; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta h3 { font-size: 1.5rem; margin-bottom: 10px; }
.tarjeta p { font-size: .93rem; color: var(--tinta-tenue); }
.tarjeta strong { color: var(--tinta); font-weight: 600; }

.tarjeta--ancha {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  background: linear-gradient(160deg, var(--arena), var(--blanco) 62%);
}
.tarjeta__texto h3 { margin-bottom: 12px; }

/* El móvil de muestra: la pantalla de Inicio dibujada, no una captura.
   Se estira hasta la altura de la tarjeta y reparte los bloques por dentro:
   una pantalla de teléfono ocupa todo el alto, y si no lo hiciera quedaría un
   hueco muerto abajo del recuadro. */
.movil {
  border: 1px solid var(--linea-firme);
  border-radius: 26px;
  padding: 8px;
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  align-self: stretch;
  display: flex;
}
.movil__pantalla {
  flex: 1;
  background: var(--lienzo);
  border-radius: 19px;
  padding: 16px 14px;
  display: grid;
  align-content: space-between;
  gap: 13px;
  font-size: 12px;
}
.movil__barra { display: flex; justify-content: space-between; align-items: center; }
.movil__saludo { font-size: 12.5px; font-weight: 600; }
.orbita--mini { width: 17px; height: 17px; color: var(--oro); display: block; }

.movil__aviso {
  background: var(--peligro-fondo);
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 11px;
  padding: 9px 11px;
  display: grid;
  gap: 5px;
}
.movil__aviso p { font-size: 11.5px; line-height: 1.4; color: var(--peligro-tinta); }

.movil__saldo {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 13px;
  padding: 13px;
  display: grid;
  gap: 6px;
}
.movil__saldo .cifra { font-size: 1.85rem; }
.movil__saldo .cifra__unidad { font-size: 10px; margin-left: 5px; }
.movil__flujo {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--tinta-tenue);
  margin-top: 2px;
}
.movil__flujo span { display: inline-flex; align-items: center; gap: 5px; }
.movil__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.movil__accion {
  padding: 6px 4px;
  border: 1px solid var(--linea-firme);
  border-radius: 999px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
}
.movil__accion--llena { background: var(--oro); border-color: var(--oro); color: var(--noche); }
.punto { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.punto--ok { background: var(--ok); }
.punto--gasto { background: var(--oro-hondo); }

.movil__categorias { display: grid; gap: 9px; }
.linea__cabeza {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
  color: var(--tinta-tenue);
}
.linea__cabeza b { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; }

/* Barra de progreso. Se llama `progreso` y no `barra` para no chocar con la
   barra superior de navegación, que ya ocupa ese nombre. */
.progreso {
  height: 6px;
  border-radius: 999px;
  background: rgba(44, 31, 20, .09);
  overflow: hidden;
}
/* Las barras crecen cuando su tarjeta aparece, no al cargar la página: antes
   lo hacían con una animación de carga, y para cuando alguien bajaba hasta
   ellas ya llevaban un buen rato quietas. El escalonado sale de `--n`. */
.progreso i {
  display: block;
  height: 100%;
  width: var(--relleno);
  background: var(--color);
  border-radius: 999px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--curva), background-color .5s var(--curva);
  transition-delay: calc(var(--n, 0) * 110ms + 250ms), 0s;
}
.es-visible .progreso i { transform: scaleX(1); }

.movil__frase {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-tenue);
}
.movil__frase cite {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Anillo de estabilidad */
.anillo { position: relative; width: 132px; margin: 0 auto 22px; }
.anillo svg { display: block; }
.anillo__arco {
  stroke-dasharray: 301.6;
  stroke-dashoffset: 301.6;
  transition: stroke-dashoffset 1.4s var(--curva);
}
.revelar.es-visible .anillo__arco { stroke-dashoffset: 96.5; } /* 68 % */
.anillo__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.anillo__centro b {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.anillo__centro span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.lista-gastos {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 13px;
}
.lista-gastos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}
.lista-gastos b { font-variant-numeric: tabular-nums; font-weight: 600; }
.lista-gastos .es-pendiente { color: var(--tinta-tenue); }
.lista-gastos .es-pendiente b {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--aviso);
  align-self: center;
}

.rejilla-anual {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}
.rejilla-anual i {
  aspect-ratio: 1;
  border-radius: 6px;
  display: grid;
  place-content: center;
  font: 500 10px/1 var(--mono);
  font-style: normal;
  color: rgba(255, 255, 255, .88);
}
.rejilla-anual i[data-estado="neutro"] { color: var(--tinta-tenue); }
/* Blanco sobre naranja no se lee: la inicial va en tinta. */
.rejilla-anual i[data-estado="aviso"]  { color: rgba(44, 31, 20, .78); }

/* Las casillas se encienden una detrás de otra al aparecer la tarjeta, de
   enero a diciembre, como se recorre el año. */
.rejilla .revelar .rejilla-anual i {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s var(--curva), transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.rejilla .revelar.es-visible .rejilla-anual i { opacity: 1; transform: none; }
.rejilla-anual i:nth-child(1)  { transition-delay: .30s; }
.rejilla-anual i:nth-child(2)  { transition-delay: .36s; }
.rejilla-anual i:nth-child(3)  { transition-delay: .42s; }
.rejilla-anual i:nth-child(4)  { transition-delay: .48s; }
.rejilla-anual i:nth-child(5)  { transition-delay: .54s; }
.rejilla-anual i:nth-child(6)  { transition-delay: .60s; }
.rejilla-anual i:nth-child(7)  { transition-delay: .66s; }
.rejilla-anual i:nth-child(8)  { transition-delay: .72s; }
.rejilla-anual i:nth-child(9)  { transition-delay: .78s; }
.rejilla-anual i:nth-child(10) { transition-delay: .84s; }
.rejilla-anual i:nth-child(11) { transition-delay: .90s; }
.rejilla-anual i:nth-child(12) { transition-delay: .96s; }

.rejilla-anual__leyenda {
  list-style: none;
  margin: -10px 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--tinta-tenue);
}
.rejilla-anual__leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.rejilla-anual__leyenda li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(44, 31, 20, .1);
}
.rejilla-anual__leyenda li[data-estado="ok"]::before      { background: var(--ok); }
.rejilla-anual__leyenda li[data-estado="aviso"]::before   { background: var(--aviso); }
.rejilla-anual__leyenda li[data-estado="peligro"]::before { background: var(--peligro); }
.rejilla-anual i[data-estado="ok"]      { background: var(--ok); }
.rejilla-anual i[data-estado="aviso"]   { background: var(--aviso); }
.rejilla-anual i[data-estado="peligro"] { background: var(--peligro); }
.rejilla-anual i[data-estado="neutro"]  { background: rgba(44, 31, 20, .1); }

.progreso-meta { display: grid; gap: 8px; margin-bottom: 22px; }
.progreso-meta__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
}
.progreso-meta__fila b { font-variant-numeric: tabular-nums; font-weight: 600; }
.progreso-meta__fila--tenue { margin-top: 10px; color: var(--tinta-tenue); }

/* Las paletas van en una banda de ancho completo: el texto, las diez fichas y
   una pantalla de muestra que se repinta con la que se toque. */
.tarjeta--paletas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 236px);
  gap: 18px 40px;
  align-items: center;
  background: linear-gradient(100deg, var(--arena), var(--blanco) 55%);
}
.tarjeta--paletas h3 { margin-bottom: 10px; }
.tarjeta--paletas .paletas { margin: 0; }

.paletas {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.paleta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font: 500 12px/1.4 var(--texto);
  color: var(--tinta);
  background: var(--lienzo);
  cursor: pointer;
  transition: transform .2s var(--curva), border-color .2s var(--curva),
              background .2s var(--curva), color .2s var(--curva);
}
.paleta:hover { transform: translateY(-2px); border-color: var(--linea-firme); }
.paleta[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--claro);
}
.paleta::before {
  content: "";
  width: 15px; height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  border: 1px solid var(--linea);
  flex: none;
}

/* La pantalla de muestra. Sus colores son los de `lib/theme/palettes.dart`
   y los pone `principal.js`; los de estado salen de `StatusColors`, en su
   versión clara u oscura según la paleta, y ninguna paleta los elige: verde,
   naranja y rojo dicen lo mismo en las diez. */
.muestra {
  --m-fondo: #FAF8F5;
  --m-superficie: #FFFFFF;
  --m-acento: #C4A882;
  --m-tinta: #2C1F14;
  --m-tenue: #7B6858;
  --m-borde: rgba(196, 168, 130, .25);
  --m-ok: #16A34A;
  --m-aviso: #F59E0B;
  --m-peligro: #DC2626;
  border: 1px solid var(--linea-firme);
  border-radius: 22px;
  padding: 7px;
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
}
.muestra__pantalla {
  display: grid;
  gap: 10px;
  padding: 14px 13px;
  border-radius: 16px;
  background: var(--m-fondo);
  color: var(--m-tinta);
  font-size: 11px;
  transition: background-color .55s var(--curva), color .55s var(--curva);
}
.muestra__nombre {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-tenue);
  transition: color .55s var(--curva);
}
.muestra__saldo {
  padding: 11px;
  border-radius: 11px;
  background: var(--m-superficie);
  border: 1px solid var(--m-borde);
  transition: background-color .55s var(--curva), border-color .55s var(--curva);
}
.muestra__saldo b {
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.muestra__fila { display: grid; gap: 4px; color: var(--m-tenue); transition: color .55s var(--curva); }
.muestra .progreso { height: 5px; background: var(--m-borde); }
.muestra__boton {
  margin-top: 2px;
  padding: 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  background: var(--m-acento);
  color: var(--m-fondo);
  transition: background-color .55s var(--curva), color .55s var(--curva);
}

/* ─── Principios (el plano oscuro) ──────────────────────────────────────── */

.principios {
  position: relative;
  z-index: 2;
  background: var(--noche);
  color: var(--claro);
  overflow: hidden;
}
/* La sección de encima ya trae su relleno de abajo; con el margen que llevaba
   el plano oscuro, entre las paletas y él quedaban casi 200 px de nada. */
.funciones { padding-bottom: clamp(56px, 8vw, 96px); }
.principios::before {
  /* Un halo dorado muy tenue: el plano oscuro no es negro plano. */
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 120vw; height: 120vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(196, 168, 130, .12), transparent 55%);
  pointer-events: none;
}
.principios__interior {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--canal);
}

.principios__lista {
  margin-top: clamp(44px, 6vw, 70px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(245, 238, 230, .12);
  border: 1px solid rgba(245, 238, 230, .12);
}

.principio {
  background: var(--noche);
  padding: clamp(26px, 3vw, 38px);
  transition: background .35s var(--curva);
}
.principio:hover { background: var(--noche-alta); }
.principio h3 {
  font-size: 1.35rem;
  color: var(--oro);
  margin-bottom: 14px;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.principio p { font-size: .93rem; color: rgba(245, 238, 230, .66); }
.principio strong { color: var(--claro); font-weight: 600; }
.principio em { font-style: italic; color: var(--claro); }

/* ─── Tasas ─────────────────────────────────────────────────────────────── */

.tasas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.tasas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tasas__lista li {
  display: grid;
  grid-template-columns: 120px auto 1fr;
  grid-template-areas: "etiqueta cifra unidad" "etiqueta sello sello";
  align-items: baseline;
  gap: 4px 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linea);
}
.tasas__lista .etiqueta { grid-area: etiqueta; align-self: center; }
.tasas__lista .cifra { grid-area: cifra; font-size: clamp(1.5rem, 3vw, 2rem); }
.tasas__lista .cifra__unidad { grid-area: unidad; margin-left: 0; }
.tasas__lista .sello { grid-area: sello; margin-top: 4px; }

/* ─── Precios ───────────────────────────────────────────────────────────── */

.precios__rejilla {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.plan {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 32px 28px;
  display: grid;
  gap: 20px;
  align-content: start;
  box-shadow: var(--sombra-suave);
}
.plan h3 { font-size: 1.5rem; }
.plan__precio { display: flex; align-items: baseline; gap: 4px; }
.plan__divisa { font-family: var(--mono); font-size: 13px; color: var(--tinta-tenue); }
.plan__periodo { font-size: 13.5px; color: var(--tinta-tenue); margin-left: 4px; }

.plan__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.plan__lista li {
  display: flex;
  gap: 10px;
  color: var(--tinta-tenue);
}
.plan__lista li::before {
  content: "";
  width: 14px; height: 14px;
  flex: none;
  margin-top: 5px;
  border-radius: 50%;
  border: 1.5px solid var(--oro);
  background: radial-gradient(circle, var(--oro) 0 3px, transparent 3px);
}

.plan--destacado {
  background: linear-gradient(165deg, var(--arena), var(--blanco) 55%);
  border-color: var(--oro);
  box-shadow: var(--sombra-alta);
}
.plan__cinta {
  position: absolute;
  top: -11px; left: 28px;
  background: var(--tinta);
  color: var(--claro);
  padding: 4px 12px;
  border-radius: 999px;
  font: 500 10.5px/1.7 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plan--pago { background: var(--arena); box-shadow: none; }
.pago { margin: 0; display: grid; gap: 6px; }
.pago dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-top: 12px;
}
.pago dt:first-child { margin-top: 0; }
.pago dd { margin: 0; font-size: .93rem; }
.pago code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 6px;
}
.pago__nota {
  font-size: .85rem;
  color: var(--tinta-tenue);
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}

/* ─── Descarga ──────────────────────────────────────────────────────────── */

.descarga__rejilla {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* Columna flexible, no rejilla: así el botón se va al fondo con `margin-top:
   auto` y las tres tarjetas alinean su llamada aunque una lleve texto de más. */
.via {
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--blanco);
  transition: border-color .3s var(--curva), transform .3s var(--curva);
}
.via .boton { margin-top: auto; }
.via:hover { border-color: var(--oro); transform: translateY(-3px); }
.via__icono {
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  border-radius: 12px;
  background: var(--arena);
  color: var(--oro-hondo);
}
.via__icono svg { width: 22px; height: 22px; }
.via h3 { font-size: 1.35rem; }
.via p { font-size: .93rem; color: var(--tinta-tenue); }
.via .enlace-menor { margin-top: 0; text-align: center; }

/* ─── Preguntas ─────────────────────────────────────────────────────────── */

.preguntas__lista { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  font-size: clamp(1.12rem, 2.2vw, 1.4rem);
  letter-spacing: -0.015em;
  transition: color .2s var(--curva);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:hover { color: var(--oro-hondo); }
.preguntas summary::after,
.preguntas summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--oro-hondo);
  transition: transform .3s var(--curva);
}
.preguntas summary::before { width: 15px; height: 1.5px; transform: translateY(-50%); }
.preguntas summary::after  { width: 1.5px; height: 15px; right: 13px; transform: translateY(-50%); }
.preguntas details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.preguntas details p {
  padding: 0 clamp(0px, 6vw, 96px) 26px 0;
  color: var(--tinta-tenue);
  font-size: .98rem;
  max-width: 52em;
  animation: desplegar .4s var(--curva);
}
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Cierre ────────────────────────────────────────────────────────────── */

.cierre {
  position: relative;
  z-index: 2;
  background: var(--noche);
  color: var(--claro);
  text-align: center;
  padding: clamp(80px, 12vw, 150px) var(--canal);
  display: grid;
  justify-items: center;
  gap: 22px;
  overflow: hidden;
}
.cierre::before {
  content: "";
  position: absolute;
  bottom: -55%; left: 50%;
  width: 110vw; height: 110vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(196, 168, 130, .16), transparent 58%);
  pointer-events: none;
}
.cierre > * { position: relative; }
.cierre__orbita { width: 58px; height: 58px; color: var(--oro); }
.cierre .titular { font-size: clamp(2.2rem, 5.6vw, 3.9rem); }
.cierre .parrafo-guia { margin-top: 0; }
.cierre .boton { margin-top: 12px; }

/* ─── Pie ───────────────────────────────────────────────────────────────── */

.pie {
  position: relative;
  z-index: 2;
  background: var(--noche);
  color: rgba(245, 238, 230, .6);
  border-top: 1px solid rgba(245, 238, 230, .1);
  padding: 48px var(--canal) 40px;
  font-size: 13.5px;
}
.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.pie__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--claro);
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pie__marca .orbita { width: 24px; height: 24px; }
.pie__lema { margin-right: auto; max-width: 28em; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 20px; }
.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover { color: var(--oro); }
.pie__legal {
  max-width: var(--ancho);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 238, 230, .1);
  font-size: 12px;
  opacity: .7;
}

/* ─── La cinta ──────────────────────────────────────────────────────────── */

/* Teletipo entre la portada y «El problema»: las mismas tres conversiones de
   esa sección, pasando. Es lineal a propósito —un teletipo que acelera y frena
   marea— y se para al pasar el ratón. El contenido va dos veces para que el
   bucle no tenga costura: al llegar a -50 % se ve lo mismo que al empezar. */
.cinta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 15px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: rgba(245, 238, 230, .55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta__pista {
  display: flex;
  width: max-content;
  animation: cinta 75s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinta__grupo li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--tinta-tenue);
}
.cinta__grupo li::after {
  content: "";
  width: 5px; height: 5px;
  margin: 0 30px;
  border-radius: 50%;
  background: var(--oro);
}
.cinta__grupo b { color: var(--tinta); font-weight: 500; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* La cinta ya pone su raya: la de la sección de debajo sobraría. */
.cinta + .seccion { border-top: none; }

/* ─── La convergencia, en movimiento ────────────────────────────────────── */

/* Las tres vías se trazan al aparecer la sección y por ellas baja, en bucle,
   una gota de cada moneda hacia el total. Las gotas son SMIL (`animateMotion`)
   porque es lo único que sigue un trazado en todos los navegadores; el CSS de
   movimiento reducido no las alcanza, y por eso las esconde aquí abajo y
   `principal.js` pausa el SVG. */
.convergencia__via {
  stroke-dasharray: 1 1.01;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--curva);
}
.convergencia__via:nth-of-type(2) { transition-delay: .15s; }
.convergencia__via:nth-of-type(3) { transition-delay: .3s; }
.problema.es-visible .convergencia__via { stroke-dashoffset: 0; }
.convergencia__gota { fill: var(--oro-hondo); }

/* El desglose: la misma fórmula para las tres, a la vista. */
.convergencia__desglose {
  list-style: none;
  margin: 6px 0 0;
  padding: 14px 0 0;
  width: 100%;
  max-width: 320px;
  display: grid;
  gap: 7px;
  border-top: 1px dashed var(--linea-firme);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-tenue);
}
.convergencia__desglose li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.convergencia__desglose li:nth-child(2) { transition-delay: .12s; }
.convergencia__desglose li:nth-child(3) { transition-delay: .24s; }
.problema.es-visible .convergencia__desglose li { opacity: 1; transform: none; }
.problema.es-visible .convergencia__desglose li:nth-child(1) { transition-delay: 1s; }
.problema.es-visible .convergencia__desglose li:nth-child(2) { transition-delay: 1.12s; }
.problema.es-visible .convergencia__desglose li:nth-child(3) { transition-delay: 1.24s; }
.convergencia__desglose b { color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }
.convergencia__formula {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--oro-hondo);
}

/* ─── Inicio: la leyenda y el aviso ─────────────────────────────────────── */

.leyenda {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--linea);
  font-size: .9rem;
  color: var(--tinta-tenue);
}
.leyenda li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 12px; }
.leyenda .punto { width: 9px; height: 9px; margin-top: .52em; }
.leyenda b { color: var(--tinta); font-weight: 600; }
.punto--aviso { background: var(--aviso); }
.punto--peligro { background: var(--peligro); }

.tarjeta__nota {
  margin-top: 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: .98rem;
  color: var(--tinta-tenue);
}

/* El aviso cae cuando ya se ve el móvil, y la insignia late dos veces: es lo
   primero que la pantalla de verdad quiere que mires. */
.tarjeta--ancha.es-visible .movil__aviso { animation: aviso-cae .7s var(--curva) .9s both; }
.tarjeta--ancha.es-visible .insignia--peligro { animation: insignia-late 1.6s ease-in-out 1.7s 2; }
@keyframes aviso-cae { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
@keyframes insignia-late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  35%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, .18); }
}

/* ─── El asistente ──────────────────────────────────────────────────────── */

/* Una demostración que se escribe sola mientras se ve: la frase, el
   «Entendiendo…» y los campos rellenándose. La mueve `principal.js`; sin él se
   queda en el estado final, que es el que trae el HTML. */
.tarjeta--asistente { display: flex; flex-direction: column; }
.asistente { display: grid; gap: 10px; margin-bottom: 22px; }
.asistente__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--linea-firme);
  border-radius: 16px;
  background: var(--lienzo);
}
.rocco--asistente { width: 42px; height: 42px; }
/* Cada cara nueva es un SVG nuevo, así que el saltito sale solo con cada
   cambio, como el de `Rocco` en la aplicación al cambiar de expresión. */
.rocco--asistente svg { animation: rocco-salto .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rocco-salto { from { transform: translateY(3px) scale(.9); } }
.asistente__texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.asistente__frase { font-size: 13px; line-height: 1.4; min-height: 1.4em; }
.asistente__cursor {
  display: inline-block;
  width: 1.5px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--oro-hondo);
  animation: cursor 1.05s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }
.asistente__estado {
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-hondo);
}
.asistente__campos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.asistente__campos div {
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--blanco);
  transition: border-color .35s var(--curva), background-color .35s var(--curva);
}
.asistente__campos dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.asistente__campos dd {
  margin: 2px 0 0;
  min-height: 1.45em;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asistente__campos .es-vacio dd { color: var(--linea-firme); font-weight: 400; }
.asistente__campos .es-rellenado {
  border-color: var(--oro);
  background: #FFFCF7;
  animation: campo-llega .5s var(--curva);
}
@keyframes campo-llega {
  from { transform: scale(.95); }
  60%  { transform: scale(1.025); }
}

/* ─── Principios: órbitas de fondo ──────────────────────────────────────── */

.principios__orbitas {
  position: absolute;
  top: -140px;
  right: -160px;
  width: min(640px, 80vw);
  color: var(--oro);
  opacity: .17;
  pointer-events: none;
}
.principios__satelite { transform-origin: 200px 200px; animation: orbitar 48s linear infinite; }
.principios__satelite--b { animation-duration: 72s; animation-direction: reverse; }

/* ─── Tasas: el punto de una tasa fresca late ───────────────────────────── */

/* Solo la fresca: una tasa vieja que latiera parecería viva. */
.sello__punto { position: relative; }
.sello__punto[data-frescura="fresca"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: latido 2.6s ease-out infinite;
}
@keyframes latido {
  0%       { transform: scale(1);   opacity: .55; }
  70%,100% { transform: scale(2.8); opacity: 0; }
}

/* ─── Preguntas: Rocco pensando, apoyado en la raya ─────────────────────── */

.preguntas__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
/* El pecho de Rocco está cortado en recto: con el margen negativo apoya en la
   raya de arriba de la lista, como en la portada apoya en el conversor. */
.rocco--preguntas {
  width: clamp(86px, 9vw, 118px);
  margin-bottom: calc(-1 * clamp(36px, 5vw, 56px) - 1px);
}

/* ─── Cierre: la Órbita se traza sola ───────────────────────────────────── */

.cierre__orbita path {
  stroke-dasharray: 1 1.01;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--curva) .3s;
}
.cierre__orbita circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.5s;
}
.cierre.es-visible .cierre__orbita path { stroke-dashoffset: 0; }
.cierre.es-visible .cierre__orbita circle { transform: scale(1); }

/* La portada lleva un segundo satélite, en la órbita de dentro y al revés. */
.portada__satelite--b { animation-duration: 22s; animation-direction: reverse; opacity: .4; }

/* ─── Los márgenes de las pantallas anchas ──────────────────────────────── */

/* Todo lo de este bloque vive FUERA del ancho del contenido, en los márgenes
   que deja un monitor ancho. Por debajo de 1520 px esos márgenes no existen,
   y entonces nada de esto se enseña: encima del texto sería ruido. */

/* La órbita de las monedas, en el margen izquierdo de la portada. El centro
   del círculo queda 450 px a la izquierda del borde del CONTENIDO, no de la
   ventana: así las fichas (órbita de 420 y 70 de media ficha) acaban siempre
   antes de que empiece el texto, mida el margen 170 px o 280. Con el centro
   atado a la ventana, a 1520 px pisaban el titular. Solo se ve el tramo que
   cruza el margen: las monedas entran por arriba, lo cruzan y se van. */
.portada__monedas {
  display: none;
  position: absolute;
  top: 50%;
  left: -950px;
  width: 1000px;
  height: 1000px;
  transform: translateY(-50%);
  color: var(--oro);
  pointer-events: none;
  z-index: -1;
}
.portada__monedas > circle { opacity: .45; }
.portada__giro {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: orbitar 80s linear infinite;
  animation-delay: var(--retraso, 0s);
}
/* Contragira lo mismo que gira la órbita: el texto queda siempre derecho. */
.portada__ficha {
  transform-box: fill-box;
  transform-origin: center;
  animation: contraorbitar 80s linear infinite;
  animation-delay: var(--retraso, 0s);
}
@keyframes contraorbitar { to { transform: rotate(-360deg); } }
.portada__ficha rect {
  fill: var(--blanco);
  stroke: var(--linea-firme);
  stroke-width: 1;
  filter: drop-shadow(0 6px 10px rgba(44, 31, 20, .08));
}
.portada__divisa { fill: var(--oro-hondo); }
.portada__ficha--usdt .portada__divisa { fill: var(--oro); }
.portada__ficha text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  fill: var(--tinta);
  text-anchor: middle;
  dominant-baseline: central;
}
.portada__ficha--usdt rect { fill: var(--tinta); stroke: var(--tinta); }
.portada__ficha--usdt text { fill: var(--claro); }
.portada__satelite--c { transform-origin: 500px 500px; animation-duration: 46s; }

/* El índice lateral: fijo a la izquierda, aparece al dejar atrás la portada. */
.indice-lateral {
  display: none;
  position: fixed;
  top: 50%;
  left: 24px;
  z-index: 35;
  padding: 14px 18px 14px 12px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: rgba(250, 248, 245, .82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  box-shadow: var(--sombra-suave);
  opacity: 0;
  transform: translate(-14px, -50%);
  pointer-events: none;
  transition: opacity .5s var(--curva), transform .5s var(--curva);
}
.indice-lateral.es-visible {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.indice-lateral ol {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
}
/* El hilo vertical que une los puntos, y encima, su parte recorrida. */
.indice-lateral ol::before,
.indice-lateral ol::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--linea-firme);
}
.indice-lateral ol::after {
  background: var(--oro-hondo);
  transform-origin: top;
  transform: scaleY(var(--recorrido, 0));
  transition: transform .4s var(--curva);
}
.indice-lateral a {
  position: relative;
  z-index: 1;
  display: grid;
  /* `1fr` al final: con `auto auto`, el sobrante se repartía entre el número
     y la etiqueta, y las etiquetas salían centradas. */
  grid-template-columns: 11px auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s var(--curva);
}
.indice-lateral a::before {
  content: "";
  width: 7px; height: 7px;
  justify-self: center;
  border: 1px solid var(--linea-firme);
  border-radius: 50%;
  background: var(--lienzo);
  transition: transform .3s var(--curva), background .3s var(--curva),
              border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.indice-lateral__num { color: var(--oro-hondo); }
.indice-lateral a:hover { color: var(--tinta); }
.indice-lateral a[aria-current] { color: var(--tinta); font-weight: 500; }
.indice-lateral a[aria-current]::before {
  background: var(--oro-hondo);
  border-color: var(--oro-hondo);
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(196, 168, 130, .22);
}

/* Orlas: órbitas tenues en el margen derecho de algunas secciones. El centro
   queda 390 px a la derecha del borde del contenido, por lo mismo que las
   monedas: el anillo más cercano empieza 100 px después del contenido, mida
   lo que mida el margen. Cada una con su ritmo y su sentido. */
.orla {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(100% + 90px);
  width: 600px;
  height: 600px;
  transform: translateY(-50%);
  color: var(--oro);
  opacity: .45;
  pointer-events: none;
  z-index: -1;
}
.orla__satelite { transform-origin: 300px 300px; animation: orbitar 60s linear infinite; }
.orla--d { top: 60%; }
.orla--d .orla__satelite { animation-duration: 66s; animation-direction: reverse; }
.orla__satelite--dentro { animation-duration: 38s; animation-direction: reverse; opacity: .7; }
.orla--b .orla__satelite { animation-duration: 75s; animation-direction: reverse; }
.orla--b .orla__satelite--dentro { animation-direction: normal; }
.orla--c { top: 38%; }
.orla--c .orla__satelite { animation-duration: 52s; }

@media (min-width: 1520px) {
  .portada__monedas,
  .indice-lateral,
  .orla { display: block; }
}

/* ─── Rocco ─────────────────────────────────────────────────────────────── */

/* La mascota. La pinta js/rocco.js; aquí van su tamaño y cómo se mueve.
   Aquí sí respira y parpadea en bucle: la web no tiene pruebas que asentar.
   En la aplicación no, y el porqué está en lib/widgets/rocco.dart. La regla
   de movimiento reducido de más abajo apaga todo esto. */
.rocco { display: inline-block; flex: none; line-height: 0; }
.rocco svg { display: block; width: 100%; height: auto; }
.rocco--principios { width: 88px; height: 88px; margin-bottom: 22px; }

/* En la portada asoma por detrás del conversor: el pecho, cortado en recto,
   apoya en el borde de arriba de la tarjeta. */
.conversor { position: relative; }
.rocco--portada {
  position: absolute;
  right: 30px;
  bottom: calc(100% - 1px);
  width: clamp(104px, 11vw, 138px);
}

.rocco__ojos {
  transform-box: fill-box;
  transform-origin: center;
  animation: rocco-parpadea 5.2s var(--rocco-retraso, 0s) infinite;
}
.rocco__oreja { transform-box: view-box; }
.rocco__oreja--izq { transform-origin: 66px 56px; }
.rocco__oreja--der { transform-origin: 134px 56px; }
.rocco:hover .rocco__oreja--izq { animation: rocco-oreja-izq .7s ease-in-out; }
.rocco:hover .rocco__oreja--der { animation: rocco-oreja-der .7s ease-in-out; }

.rocco--vivo { animation: rocco-entra .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.rocco--vivo .rocco__cuerpo {
  transform-box: view-box;
  transform-origin: 100px 200px;
  animation: rocco-respira 3.8s ease-in-out infinite;
}

@keyframes rocco-parpadea {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}
@keyframes rocco-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012, 1.022); }
}
@keyframes rocco-oreja-izq {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(16deg); }
  70% { transform: rotate(-5deg); }
}
@keyframes rocco-oreja-der {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-16deg); }
  70% { transform: rotate(5deg); }
}
@keyframes rocco-entra {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
}

/* Los gestos de reposo: sacar la lengua, ladear la cabeza, mirar a los lados,
   mover las orejas y, contento, jadear. Cada uno con su ciclo y de largos
   distintos, para que no se repitan siempre en el mismo orden; todos salen de
   la cara de la expresión y vuelven a ella. Los mismos gestos, de uno en uno y
   sin bucle, están en lib/widgets/rocco.dart. */
.rocco__lengua {
  transform-box: view-box;
  transform-origin: 100px 125px;
  transform: scaleY(0);
}
.rocco__cabeza { transform-box: view-box; transform-origin: 100px 120px; }
.rocco__pupila { transform-box: view-box; }
.rocco__jadeo { transform-box: view-box; transform-origin: 100px 131px; }

.rocco--vivo .rocco__lengua { animation: rocco-lengua 9s 1.5s ease-in-out infinite; }
.rocco--vivo .rocco__cabeza { animation: rocco-ladeo 13s 4s ease-in-out infinite; }
.rocco--vivo .rocco__pupila { animation: rocco-mirada 15s 6s ease-in-out infinite; }
.rocco--vivo .rocco__oreja--izq { animation: rocco-oreja-izq-reposo 8s 3s infinite; }
.rocco--vivo .rocco__oreja--der { animation: rocco-oreja-der-reposo 11s 7s infinite; }
.rocco--vivo .rocco__jadeo { animation: rocco-jadeo 7s 1s ease-in-out infinite; }

@keyframes rocco-lengua {
  0%, 14%, 36%, 100% { transform: scaleY(0); }
  18%, 26%, 32% { transform: scaleY(1); }
  22% { transform: scaleY(.82); }
}
@keyframes rocco-ladeo {
  0%, 40%, 64%, 100% { transform: rotate(0); }
  46%, 58% { transform: rotate(-8deg); }
}
@keyframes rocco-mirada {
  0%, 30%, 58%, 100% { transform: translateX(0); }
  34%, 42% { transform: translateX(-2.6px); }
  46%, 54% { transform: translateX(2.6px); }
}
@keyframes rocco-oreja-izq-reposo {
  0%, 80%, 92%, 100% { transform: rotate(0); }
  83% { transform: rotate(16deg); }
  86% { transform: rotate(-6deg); }
  89% { transform: rotate(5deg); }
}
@keyframes rocco-oreja-der-reposo {
  0%, 50%, 62%, 100% { transform: rotate(0); }
  53% { transform: rotate(-16deg); }
  56% { transform: rotate(6deg); }
  59% { transform: rotate(-4deg); }
}
@keyframes rocco-jadeo {
  0%, 9%, 17%, 25%, 33%, 100% { transform: scaleY(1); }
  5%, 13%, 21%, 29% { transform: scaleY(1.16); }
}

/* Con la portada en una columna, el conversor va debajo del texto y Rocco
   necesita su hueco encima. */
@media (max-width: 840px) {
  .conversor { margin-top: 100px; }
}

/* ─── Movimiento ────────────────────────────────────────────────────────── */

/* Entrada de la portada: escalonada con `--paso`, una sola orquestación. */
.entra {
  opacity: 0;
  transform: translateY(18px);
  animation: entrar .9s var(--curva) forwards;
  animation-delay: calc(var(--paso) * 110ms + 120ms);
}
@keyframes entrar { to { opacity: 1; transform: none; } }

.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.revelar.es-visible { opacity: 1; transform: none; }

/* Dentro de una rejilla revelada, las piezas entran una detrás de otra. */
.pasos__lista .revelar.es-visible,
.rejilla .revelar.es-visible,
.principios__lista .revelar.es-visible,
.precios__rejilla .revelar.es-visible,
.descarga__rejilla .revelar.es-visible { transition-delay: var(--retardo, 0ms); }

/* ─── Adaptación ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta--ancha { grid-column: span 2; grid-row: auto; }
  .principios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso:nth-child(3) { border-left: none; padding-left: 0; }
  .paso:nth-child(2) { padding-right: 0; }
  .pasos__lista::before,
  .pasos__lista::after { display: none; }

  /* Con dos columnas hay cinco tarjetas sueltas: el asistente se estira a lo
     ancho para que no quede una sola con un hueco al lado. */
  .rejilla > .tarjeta--asistente {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 36px;
    align-items: center;
  }
  .tarjeta--asistente .asistente { grid-row: span 2; margin-bottom: 0; }
  .tarjeta--asistente h3 { align-self: end; }
  .tarjeta--asistente p { align-self: start; }

  .tarjeta--paletas { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
  .tarjeta--paletas .muestra { grid-column: 2; grid-row: 1 / span 2; }
}

/* El mismo corte que usa la aplicación. */
@media (max-width: 840px) {
  .barra__nav, .barra__cta { display: none; }
  .barra__menu { display: block; }

  .portada { grid-template-columns: minmax(0, 1fr); }
  .portada__arcos { right: -40%; opacity: .22; }

  .precios__rejilla,
  .descarga__rejilla { grid-template-columns: minmax(0, 1fr); }

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

  .convergencia { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .convergencia__trazo { display: none; }
  .convergencia__total {
    border-left: none;
    border-top: 1px solid var(--linea);
    padding-left: 0;
    padding-top: 26px;
  }

  .tarjeta--ancha { grid-template-columns: minmax(0, 1fr); }
  .tarjeta--ancha .movil { max-width: 280px; margin: 0 auto; align-self: center; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .rejilla,
  .principios__lista,
  .pasos__lista { grid-template-columns: minmax(0, 1fr); }
  .tarjeta--ancha { grid-column: auto; }
  .tarjeta--paletas { grid-template-columns: minmax(0, 1fr); }
  .tarjeta--paletas .muestra {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 260px;
    justify-self: center;
  }
  /* Vuelve a ser una columna, y hay que deshacer también las alineaciones de
     la disposición de dos columnas: en flex, `align-self: end` empuja el
     título a la derecha en vez de abajo. */
  .rejilla > .tarjeta--asistente { grid-column: auto; display: flex; flex-direction: column; }
  .tarjeta--asistente .asistente { margin-bottom: 22px; }
  .tarjeta--asistente h3,
  .tarjeta--asistente p { align-self: auto; }
  .preguntas__cabeza .rocco--preguntas { width: 78px; }
  .paso { border-left: none; padding: 26px 0 8px; border-top: 1px solid var(--linea); }
  .paso:first-child { border-top: none; padding-top: 0; }
  .tasas__lista li { grid-template-columns: 1fr; grid-template-areas: "etiqueta" "cifra" "unidad" "sello"; }
  .tasas__lista .cifra__unidad { margin-top: -4px; }
  .pie__interior { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .entra, .revelar { opacity: 1; transform: none; }
  .anillo__arco { stroke-dashoffset: 96.5; }
  /* Lo que sin movimiento tiene que quedarse en su estado final, no en el
     inicial: trazos dibujados, barras llenas, desglose a la vista. */
  .cinta__pista { animation: none; }
  .convergencia__gota,
  .asistente__cursor,
  .pasos__lista::after,
  .sello__punto::after { display: none; }
  .convergencia__via,
  .cierre__orbita path { stroke-dashoffset: 0; }
  .cierre__orbita circle { transform: none; }
  .convergencia__desglose li { opacity: 1; transform: none; }
  .progreso i { transform: none; }
  .pasos__lista::before { transform: none; }
  /* Las monedas quietas, repartidas por el tramo que se ve. Sin esto, la
     animación de una centésima acabaría en su vuelta completa: las cuatro
     arriba del todo, fuera de la pantalla. */
  .portada__giro { animation: none; transform: rotate(var(--quieta, 90deg)); }
  .portada__ficha { animation: none; transform: rotate(calc(-1 * var(--quieta, 90deg))); }
}

@media print {
  .barra, .nav-movil, .grano, .portada__arcos { display: none; }
  body { background: #fff; }
}

/* ─── Páginas legales ───────────────────────────────────────────────────── */

/* Privacidad y términos. Son las páginas que más se leen enteras y con más
   desconfianza, así que aquí manda la lectura: columna de 42em, texto en tinta
   y no en tinta tenue, e índice a la vista. Ninguna usa `revelar` — no cargan
   `principal.js`, y sin él esa clase deja la página en blanco. */

.barra__volver {
  font-size: 14.5px;
  color: var(--tinta-tenue);
  text-decoration: none;
}
.barra__volver:hover { color: var(--tinta); }

.legal {
  position: relative;
  z-index: 2;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--canal) clamp(72px, 10vw, 120px);
}

.legal__cabecera { max-width: 46em; }
.legal__cabecera .entradilla { margin-top: 24px; }
.legal__fecha {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
}

/* Las tres páginas que Play pide por separado, a un toque entre sí. La barra
   de arriba esconde su navegación por debajo de 840 px y estas páginas no
   cargan el menú plegable: sin esta fila, en un teléfono no habría forma de
   pasar de una a otra. */
.legal__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}
.legal__docs a {
  padding: 8px 16px;
  border: 1px solid var(--linea-firme);
  border-radius: 999px;
  font-size: 14px;
  color: var(--tinta-tenue);
  text-decoration: none;
  transition: color .2s var(--curva), border-color .2s var(--curva);
}
.legal__docs a:hover { color: var(--tinta); border-color: var(--tinta); }
.legal__docs a[aria-current="page"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--claro);
}

.legal__marco {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--linea);
}

/* El índice y los títulos se numeran con contadores, no a mano: así no hay
   forma de que el «04» del índice lleve a un apartado que dice «05». El precio
   es que el orden de los dos tiene que coincidir. */
.legal__indice {
  position: sticky;
  top: 96px;
  font-size: 14px;
}
.legal__indice ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: indice;
}
.legal__indice li { counter-increment: indice; }
.legal__indice a {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  line-height: 1.35;
  color: var(--tinta-tenue);
  text-decoration: none;
}
.legal__indice a::before {
  content: counter(indice, decimal-leading-zero);
  flex: none;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--oro-hondo);
}
.legal__indice a:hover { color: var(--tinta); }

.legal__cuerpo {
  max-width: 42em;
  counter-reset: apartado;
}
.legal__cuerpo > section + section { margin-top: 64px; }
.legal__cuerpo > section > h2 {
  counter-increment: apartado;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
}
.legal__cuerpo > section > h2::before {
  content: counter(apartado, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--oro-hondo);
}
.legal__cuerpo h3 {
  margin-top: 34px;
  font-size: 1.22rem;
}
.legal__cuerpo p,
.legal__cuerpo ul,
.legal__cuerpo dl { margin: 16px 0 0; }
.legal__cuerpo h2 + p { margin-top: 20px; }
.legal__cuerpo ul { padding-left: 1.2em; }
.legal__cuerpo li + li { margin-top: 10px; }
.legal__cuerpo li::marker { color: var(--oro-hondo); }
.legal__cuerpo strong { font-weight: 600; }
.legal__cuerpo a {
  text-decoration-color: var(--oro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal__cuerpo a:hover { text-decoration-color: var(--tinta); }

/* Lo esencial va en una tarjeta aparte y sin número: es un resumen, no un
   apartado más, y el documento entero sigue siendo lo que vale. */
.legal__resumen {
  margin-bottom: 64px;
  padding: clamp(24px, 4vw, 34px);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
}
.legal__resumen h2 { font-size: 1.45rem; }
.legal__resumen ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
}
.legal__resumen li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 14px;
}
.legal__resumen li + li { margin-top: 0; }
.legal__resumen li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--oro);
}

/* Quién más toca los datos: una fila por proveedor. Una tabla de verdad no
   cabe en un teléfono sin desplazamiento lateral; esto se apila. */
.legal__ficha {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  border-top: 1px solid var(--linea);
}
.legal__ficha dt,
.legal__ficha dd {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.legal__ficha dt { padding-right: 24px; font-weight: 600; }

@media (max-width: 1080px) {
  .legal__marco { grid-template-columns: minmax(0, 1fr); }
  .legal__indice {
    position: static;
    padding: 22px 24px;
    border: 1px solid var(--linea);
    border-radius: 16px;
  }
  .legal__indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

@media (max-width: 620px) {
  .legal__indice ol { grid-template-columns: minmax(0, 1fr); }
  .legal__ficha { grid-template-columns: minmax(0, 1fr); }
  .legal__ficha dt { padding-bottom: 2px; border-bottom: none; }
  .legal__ficha dd { padding-top: 0; }
}

.legal code,
.borrar code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--arena);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 6px;
}

/* La cabecera de las legales entra con `entra`, que es CSS puro: estas páginas
   no cargan JavaScript, así que `revelar` no puede usarse, pero esto sí. */
.legal__cabecera { animation: asomar .9s var(--curva) .1s both; }
.legal__marco    { animation: asomar .9s var(--curva) .25s both; }
/* `entrar` solo tiene `to` porque `.entra` pone el punto de partida; aquí el
   elemento parte visible, así que el `from` va en la propia animación. */
@keyframes asomar { from { opacity: 0; transform: translateY(18px); } }

/* La barra de lectura: una raya de oro bajo la barra de arriba que crece con
   el desplazamiento. Es CSS de línea de tiempo de desplazamiento; donde el
   navegador no lo sabe hacer, no aparece y no pasa nada más. */
@supports (animation-timeline: scroll()) {
  .barra--lectura::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--oro-hondo), var(--oro));
    transform-origin: left;
    transform: scaleX(0);
    animation: leer linear both;
    animation-timeline: scroll(root);
  }
  @keyframes leer { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .barra--lectura::after { display: none; }
}

/* La 404: centrada en el alto de la ventana, para que no quede un hueco. */
.perdida {
  min-height: calc(100vh - 80px);
  display: grid;
  align-content: center;
}
.perdida .entradilla { margin-top: 24px; }

/* ─── Borrar la cuenta ──────────────────────────────────────────────────── */

/* Antes era una columna de texto por sección con media pantalla vacía al
   lado. Ahora lo que Play coteja —aplicación, desarrollador, qué se borra y
   cuándo— está en una ficha arriba, y las dos vías van una junto a otra. */
.borrar h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.borrar h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }

.borrar__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.borrar__cabecera .entradilla { margin-top: 24px; }

.borrar__ficha {
  position: relative;
  overflow: hidden;
  padding: 26px 28px 18px;
  border-radius: 20px;
  background: var(--noche);
  color: var(--claro);
  box-shadow: var(--sombra-alta);
}
/* Un anillo de la Órbita asomando por la esquina: la ficha es de la marca. */
.borrar__ficha::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 170px; height: 170px;
  border-radius: 50%;
  border: 14px solid rgba(196, 168, 130, .14);
  pointer-events: none;
}
.borrar__ficha h2.etiqueta {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--oro);
}
.borrar__ficha dl {
  position: relative;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
}
.borrar__ficha dt,
.borrar__ficha dd {
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid rgba(245, 238, 230, .12);
}
.borrar__ficha dt {
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 238, 230, .55);
}
.borrar__ficha dd { font-size: 14px; line-height: 1.45; color: rgba(245, 238, 230, .85); }
.borrar__ficha strong { color: var(--claro); font-weight: 600; }

/* El aviso de la suscripción: de la marca, no de estado. Naranja significa
   «al límite» en un presupuesto, y aquí no hay ningún presupuesto. */
.borrar__aviso {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--oro-hondo);
  border-radius: 6px 18px 18px 6px;
  background: var(--arena);
}
.borrar__aviso-icono {
  width: 38px; height: 38px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--claro);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
}
.borrar__aviso h2 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.borrar__aviso p { margin-top: 8px; font-size: .97rem; color: var(--tinta-tenue); }
.borrar__aviso strong { color: var(--tinta); font-weight: 600; }

.borrar__bloque { margin-top: clamp(56px, 8vw, 96px); }

.borrar__vias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.borrar__via {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
}
.borrar__via .sobretitulo { margin-bottom: 0; }
.borrar__via h3 { margin-bottom: 6px; }
.borrar__via > p { font-size: .97rem; }
.borrar__via a:not(.boton) {
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}
.borrar__via--correo { background: linear-gradient(165deg, var(--arena), var(--blanco) 62%); }
.borrar__via--correo .boton { margin-top: 6px; }

.borrar__nota { font-size: .88rem; color: var(--tinta-tenue); }

/* Los tres pasos, numerados por contador y unidos por un hilo vertical. */
.borrar__pasos {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  counter-reset: paso;
}
.borrar__pasos li {
  position: relative;
  counter-increment: paso;
  padding: 0 0 24px 54px;
}
.borrar__pasos li:last-child { padding-bottom: 0; }
.borrar__pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid;
  place-content: center;
  border: 1px solid var(--oro-hondo);
  border-radius: 50%;
  background: var(--blanco);
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--oro-hondo);
}
.borrar__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px; top: 40px; bottom: 4px;
  width: 1px;
  background: var(--linea-firme);
}
.borrar__pasos h4 {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.16rem;
  letter-spacing: -0.015em;
}
.borrar__pasos p { font-size: .93rem; color: var(--tinta-tenue); }

.borrar__datos {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(48px, 7vw, 80px);
  border-top: 1px solid var(--linea);
}
.borrar__datos p,
.borrar__parcial p { margin-top: 16px; color: var(--tinta-tenue); max-width: 46em; }
.borrar__datos .sobretitulo,
.borrar__parcial .sobretitulo { margin-bottom: 16px; }

.borrar__lista {
  list-style: none;
  margin: 24px 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.borrar__lista li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  font-size: 13.5px;
}
/* Una cruz de dos trazos: «esto se va». */
.borrar__lista li::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  background:
    linear-gradient(45deg,  transparent 42%, var(--oro-hondo) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--oro-hondo) 42% 58%, transparent 58%);
}

.borrar__queda {
  padding: clamp(24px, 3vw, 32px);
  border-radius: 20px;
  background: var(--arena);
}
.borrar__queda h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }

.borrar__parcial {
  padding-top: clamp(48px, 7vw, 80px);
  border-top: 1px solid var(--linea);
}
.borrar__parcial a {
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}

/* NADA de lo que está por debajo del primer pantallazo se esconde para
   aparecer luego, ni siquiera con CSS de línea de tiempo `view()`. Se probó:
   en el navegador queda bien, pero una captura de página entera —la que puede
   sacar quien revisa la ficha en Play— la enseña con los bloques en blanco,
   porque para ella nunca llegan a «entrar». Es la trampa de `revelar` con
   otro nombre. Aquí solo se mueve lo que entra al cargar. */

@media (max-width: 840px) {
  .borrar__cabecera,
  .borrar__vias,
  .borrar__datos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .borrar__aviso { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .borrar__ficha dl { grid-template-columns: minmax(0, 1fr); }
  .borrar__ficha dd { padding-top: 0; border-top: none; }
}

@media print {
  .legal__docs, .legal__indice, .saltar { display: none; }
  .legal__marco { display: block; border-top: none; }
  .legal__resumen { box-shadow: none; }
  .borrar__ficha { background: none; color: var(--tinta); box-shadow: none; border: 1px solid var(--linea); }
}