/* ═══════════════════════════════════════════════════════════════
   POWER MOTORCYCLE · hoja de estilos del sitio
   Base: POWER_web_base.css del Manual de Identidad Web v1.0.
   Los tokens de marca no se tocan; acá se extienden.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Marca (manual v1.0) */
  --rojo: #E31F1A;
  --rojo-hondo: #9A0009;
  --tinta: #353535;
  --negro: #000;
  --blanco: #fff;
  --superficie: #F3F3F0;
  /* Fondo de página: blanco mate, no blanco puro. En pantalla grande
     el #fff cansa y deja el recorte de la moto flotando sin apoyo. */
  --blanco-mate: #FAFAF9;
  --borde: #767676;
  --error: #B42318;
  --exito: #17623A;

  /* Verde para todo lo que abre WhatsApp.
     No es el #25D366 de la marca: con letra blanca ese da 2:1 de contraste y
     el objetivo es AA. Este es de la misma familia y llega a 5:1. El
     reconocimiento lo aporta el ícono, no el tono exacto. */
  --wa: #0D8047;
  --wa-hondo: #0A6438;

  /* Derivados, para no repetir rgba() por todos lados */
  --borde-suave: #DDD;
  --tinta-clara: #5E5E5E;
  --rojo-tenue: rgba(227, 31, 26, .10);

  /* El manual cae en Arial porque el kit no distribuye fuentes, y lo declara
     como valor de partida a comprobar en la implementación. Arial es lo que
     hacía ver el sitio viejo. Saira Condensed mantiene la proporción
     condensada que pedía Arial Narrow —y es la misma de la landing de
     Impulso—; Inter es una gruesa neutra de lectura. Las dos caen de vuelta a
     Arial si no cargan. */
  --tipo-texto: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tipo-display: "Saira Condensed", "Arial Narrow", Arial, sans-serif;

  --e1: .25rem;  --e2: .5rem;   --e4: 1rem;
  --e6: 1.5rem;  --e8: 2rem;    --e12: 3rem;  --e16: 4rem;

  /* Radios más generosos y sombras en vez de bordes de 1 px: eso es lo que
     separa una tarjeta de 2012 de una de ahora. */
  /* Bajan de .625/1rem: el encargo editorial pide evitar cajas
     redondeadas innecesarias. Lo que antes resolvía un radio grande,
     acá lo resuelve una diagonal o un filete de 1 px. */
  --radio-control: .25rem;
  --radio-tarjeta: 2px;
  --alto-control: 3rem;
  --ancho-max: 75rem;

  /* Sin sombras fuertes. La jerarquía la dan el filete, la diagonal
     y el espacio, no una nube gris debajo de cada caja. */
  --sombra-baja: 0 1px 2px rgba(0,0,0,.05);
  --sombra-alta: 0 1px 3px rgba(0,0,0,.08);

  --rapido: 150ms;
  --panel: 220ms;
  --curva: cubic-bezier(.22, .61, .36, 1);

  /* Más aire entre secciones: la densidad pareja de arriba abajo también
     envejece una página. */
  --sec-y: clamp(3.5rem, 8vw, 6.5rem);
}

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

/* Le dice al navegador en qué esquema está pintado el sitio. Sin esto los
   controles nativos —los select y los campos numéricos de la calculadora, y
   la barra de scroll— los pinta el sistema operativo con su criterio, y en un
   teléfono en modo oscuro pueden quedar texto oscuro sobre fondo oscuro. */
:root { color-scheme: light; }

/* Sin esto, cada toque en un celular espera ~300 ms por si viene un segundo
   toque para hacer zoom. Se siente como que el sitio va lento aunque cargue
   rápido, y el 75 % de la gente entra desde el teléfono. */
a, button, label, summary, input, select, textarea, .tarjeta, .punto {
  touch-action: manipulation;
}

/* El destello por defecto es un celeste de sistema que no tiene nada que ver
   con la marca. Este es el rojo a muy baja opacidad. */
html { -webkit-tap-highlight-color: rgba(227, 31, 26, .15); }

/* La cabecera es fija, así que un salto a #calculadora dejaba el título
   tapado debajo de ella. Afecta también al enlace de «saltar al contenido». */
:target, [id] { scroll-margin-top: 6rem; }

/* El navegador oculta los elementos con [hidden] poniéndoles display:none,
   pero cualquier regla propia que declare display le gana por prioridad.
   Sin esto, .tarjeta { display: flex } dejaba las motos filtradas a la
   vista: el filtro las marcaba como ocultas y se seguían viendo igual. */
[hidden] { display: none !important; }

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

/* Los 16px del manual son la base de teléfono. En escritorio el texto se
   queda chico, así que se escala desde la raíz: como todo el sistema está en
   rem, suben juntos tipografía, espaciado y controles, y las proporciones no
   se rompen. Los puntos de cambio no se mueven: un rem dentro de una media
   query siempre vale 16px, sin importar lo que diga html.
   (El manual declara sus valores como punto de partida a comprobar en la
   implementación; esto es esa comprobación.) */
@media (min-width: 62rem)  { html { font-size: 106.25%; } }  /* 17px */
@media (min-width: 75rem)  { html { font-size: 112.5%; } }   /* 18px */
@media (min-width: 100rem) { html { font-size: 118.75%; } }  /* 19px */

body {
  margin: 0;
  font: 1rem/1.5 var(--tipo-texto);
  color: var(--tinta);
  background: var(--blanco-mate);
  -webkit-text-size-adjust: 100%;
}

.contenedor {
  width: calc(100% - 2rem);
  max-width: var(--ancho-max);
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: var(--tipo-display);
  font-weight: 700;
  color: var(--negro);
  overflow-wrap: break-word;
  margin: 0 0 var(--e4);
  /* Condensada y apretada: es lo que le da carácter deportivo, y lo que
     Arial Narrow no podía dar sola. */
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: 2.75rem; line-height: 1.04; }
h2 { font-size: 2.125rem; line-height: 1.12; }
h3 { font-size: 1.625rem; line-height: 1.18; }
p  { max-width: 68ch; }

a { color: var(--rojo-hondo); text-underline-offset: .2em; }
a:hover { color: var(--negro); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--blanco);
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--e4); top: -4rem; z-index: 100;
  background: var(--blanco); color: var(--negro);
  padding: var(--e2) var(--e4); border-radius: var(--radio-control);
  transition: top var(--rapido);
}
.saltar:focus { top: var(--e2); }

/* ── BOTONES ─────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--alto-control);
  padding: .8rem 1.65rem;
  border: 1px solid transparent; border-radius: var(--radio-control);
  font: 600 1rem/1.35 var(--tipo-texto);
  letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  color: var(--blanco); background: var(--rojo);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: background-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.boton:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .boton:active { transform: none; } }
.boton:hover, .boton:active { background: var(--rojo-hondo); color: var(--blanco); }
.boton--secundario {
  background: var(--blanco); color: var(--tinta); border-color: var(--borde);
}
.boton--secundario:hover { background: var(--superficie); color: var(--tinta); }
.boton--fantasma {
  background: transparent; color: var(--blanco); border-color: var(--blanco);
}
.boton--fantasma:hover { background: rgba(255,255,255,.14); color: var(--blanco); }

.boton--wa { background: var(--wa); color: var(--blanco); }
.boton--wa:hover, .boton--wa:active { background: var(--wa-hondo); color: var(--blanco); }
.boton--wa svg { width: 1.25em; height: 1.25em; flex: none; }
.boton:disabled { background: var(--superficie); color: #686868; cursor: not-allowed; }

/* ── BARRA DE PROMO ──────────────────────────────────────────── */
/* Rojo hondo y no el rojo vivo: blanco sobre #E31F1A no llega a 4.5:1
   y esta barra lleva texto chico en las 17 páginas. */
.promo {
  background: var(--rojo-hondo);
  color: var(--blanco);
  font-size: .9375rem;
}
.promo__in {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .4rem 1rem;
  min-height: 2.875rem; padding-block: .5rem;
  text-align: center;
}
.promo__dato { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.promo__punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blanco); flex: none;
  animation: latido 2.8s ease-in-out infinite;
}

/* En un teléfono los tres mensajes se apilan en tres renglones y la barra se
   come media pantalla, en las 17 páginas. Ahí queda solo la cuota y el
   enlace; la reserva vuelve cuando hay ancho para ponerla en la misma línea. */
.promo__sep,
.promo__extra { display: none; }

@media (min-width: 48rem) {
  .promo__sep { display: inline; opacity: .5; }
  .promo__extra { display: inline; }
}
.promo a { color: var(--blanco); font-weight: 700; }
.promo a:hover { color: var(--blanco); }

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
  55%      { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) { .promo__punto { animation: none; } }

/* ── CABECERA ────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde-suave);
}
.cabecera__in {
  min-height: 4.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
/* ── LOGO ────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.logo__iso { display: block; width: 2.15rem; flex: none; }
.logo__iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo__rayo { fill: var(--rojo); }
.logo__texto { display: block; width: 8.6rem; height: auto; }

/* El aro no viene en el isotipo original: se agrega para barrer alrededor,
   el mismo gesto que el arco de la landing de Impulso. 2πr con r=30. */
.logo__aro {
  fill: none; stroke: var(--rojo); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  opacity: .5;
}

/* Entrada, una sola vez. Nada late en bucle: esto se ve en las 17 páginas y
   un logo moviéndose todo el tiempo cansa, igual que el punto de la promo. */
.logo__iso svg { animation: isoEntra .5s var(--curva) both, isoDestella 1.1s ease-out .3s both; }
.logo__aro     { animation: aroBarre 1.1s var(--curva) .1s forwards; }
.logo__texto   { animation: firmaEntra .65s var(--curva) .22s both; }

@keyframes isoEntra   { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes aroBarre   { to { stroke-dashoffset: 0; } }
@keyframes isoDestella {
  0%, 100% { filter: none; }
  40%      { filter: drop-shadow(0 0 6px rgba(227, 31, 26, .85)); }
}
@keyframes firmaEntra {
  from { opacity: 0; clip-path: inset(0 100% 0 0); translate: -5px 0; }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   translate: 0 0; }
}

/* Al pasar el mouse responde, sin moverse de lugar. */
.logo__iso svg { transition: filter var(--panel); }
.logo:hover .logo__iso svg { filter: drop-shadow(0 0 5px rgba(227, 31, 26, .7)); }

@media (prefers-reduced-motion: reduce) {
  .logo__iso svg, .logo__aro, .logo__texto { animation: none; }
  .logo__aro { stroke-dashoffset: 0; }
  .logo:hover .logo__iso svg { filter: none; }
}

/* ── CORTINA DE ENTRADA ──────────────────────────────────────── */
/* La crea el JavaScript, nunca está en el HTML: si el script no corre, no hay
   cortina y el sitio se ve igual. Y se va con una animación de CSS, no con un
   temporizador: aunque el JS muera a la mitad, no puede quedarse tapando. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--negro);
  animation: introSeVa .55s var(--curva) .95s forwards;
}
.intro__iso { display: block; width: clamp(5rem, 17vw, 8rem); }
.intro__iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro .logo__rayo { fill: var(--rojo); animation: introRayo 1s var(--curva) both; }
.intro .logo__aro {
  opacity: .9; stroke-width: 2;
  animation: aroBarre .95s var(--curva) .05s forwards;
}
@keyframes introRayo {
  0%   { opacity: 0; scale: .7; filter: none; }
  55%  { opacity: 1; scale: 1.04; filter: drop-shadow(0 0 22px rgba(227, 31, 26, .95)); }
  100% { opacity: 1; scale: 1; filter: drop-shadow(0 0 10px rgba(227, 31, 26, .55)); }
}
@keyframes introSeVa {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.nav__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--e6); align-items: center;
}
.nav__lista a {
  color: var(--tinta); text-decoration: none; font-weight: 700;
  font-family: var(--tipo-display); font-size: 1.0625rem;
  letter-spacing: .02em; text-transform: uppercase;
  padding-block: .5rem; border-bottom: 2px solid transparent;
}
.nav__lista a:hover { color: var(--rojo-hondo); border-bottom-color: var(--rojo); }
.nav__lista a[aria-current="page"] { color: var(--negro); border-bottom-color: var(--rojo); }

.menu-boton {
  display: none;
  min-height: 2.75rem; min-width: 2.75rem;
  align-items: center; justify-content: center; gap: .5rem;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  font: 700 .9375rem var(--tipo-texto); cursor: pointer;
}
.menu-boton__barras { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-boton__barras::before,
.menu-boton__barras::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after  { top: 6px; }

@media (max-width: 61.99rem) {
  .menu-boton { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanco); border-bottom: 1px solid var(--borde-suave);
    display: none;
    /* Con el menú abierto, seguir deslizando al llegar al final arrastraba
       la página de atrás. Esto corta esa cadena. */
    overscroll-behavior: contain;
  }
  .nav[data-abierto="true"] { display: block; }
  .nav__lista {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--e2) var(--e4) var(--e4);
  }
  .nav__lista a {
    display: block; padding: .875rem 0;
    border-bottom: 1px solid var(--borde-suave);
  }
  .nav__lista a[aria-current="page"] { border-bottom-color: var(--rojo); }
}

/* ── SECCIONES ───────────────────────────────────────────────── */
.sec { padding-block: var(--sec-y); }
.sec--gris { background: var(--superficie); }
.sec--negra { background: var(--negro); color: var(--blanco); }
.sec--negra h2, .sec--negra h3 { color: var(--blanco); }

.sec__titulo { margin-bottom: var(--e2); }
.sec__bajada { color: var(--tinta-clara); margin-top: 0; margin-bottom: var(--e8); }
.sec--negra .sec__bajada { color: #C9C9C9; }

/* ── PORTADA ─────────────────────────────────────────────────── */
.portada {
  background: var(--negro); color: var(--blanco);
  position: relative; overflow: hidden;
}
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 82% 8%, rgba(227,31,26,.30), transparent 62%);
  pointer-events: none;
}
.portada__in {
  position: relative; z-index: 1;
  display: grid; gap: var(--e6); align-items: center;
  padding-block: var(--e12);
}
.portada h1 { color: var(--blanco); }
.portada__bajada { color: #D6D6D6; font-size: 1.125rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e4); margin-top: var(--e6); }

/* Qué incluye la campaña, al lado del precio. Van con una marca roja en vez
   de viñeta: son beneficios, no una enumeración cualquiera. */
.portada__beneficios {
  list-style: none; margin: var(--e6) 0 0; padding: 0;
  display: grid; gap: var(--e4);
}
.portada__beneficios li {
  display: grid; gap: .1rem;
  padding-left: 1.5rem; position: relative;
}
.portada__beneficios li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 9px; height: 9px; background: var(--rojo);
  transform: rotate(45deg);
}
.portada__beneficios strong {
  font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.125rem; color: var(--blanco); letter-spacing: .01em;
}
.portada__beneficios span { font-size: .9375rem; color: #C0C0C0; }

@media (min-width: 48rem) {
  .portada__beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e6); }
}
.portada__arte { justify-self: center; max-width: 34rem; }
.portada__arte img { display: block; filter: drop-shadow(0 26px 34px rgba(0,0,0,.6)); }

/* ── PORTADA CON BANNER ──────────────────────────────────────── */
.portada--banner { padding-top: 0; }
.portada--banner::after { content: none; }   /* el arte ya trae su fondo */

.banner { display: block; position: relative; z-index: 1; }
/* Sin aspect-ratio fijo a propósito: cada pieza declara su alto y ancho reales
   en el HTML, así el navegador reserva el espacio exacto y la página no salta
   mientras carga. Fijarlo acá deformaría el arte si algún mes cambia de
   proporción. */
.banner img { display: block; width: 100%; height: auto; }

/* El titular existe como texto real siempre. En escritorio el arte ya lo dice
   con todas las letras, así que se oculta a la vista pero no a Google ni a un
   lector de pantalla. En celular la pieza vertical es solo la foto del stand,
   sin texto, así que el titular se ve. */
.portada--banner .portada__titular {
  color: var(--blanco);
  margin: 0;
  padding: var(--e6) 1rem 0;
  max-width: var(--ancho-max);
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .portada--banner .portada__titular {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ── BLOQUE DE CUOTA ─────────────────────────────────────────── */
/* El número no es solo grande: la escala es la parte que argumenta
   que la cuota es baja. Un número grande y rojo, solo, podría leerse
   como "caro". */
.cuota {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-tarjeta);
  padding: var(--e8) var(--e6) var(--e6);
  text-align: center;
  max-width: 26rem; margin-inline: auto;
}
.cuota__halo {
  position: absolute; left: 50%; top: 4.5rem; translate: -50% -50%;
  width: 16rem; height: 16rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,31,26,.22), transparent 66%);
  pointer-events: none; z-index: 0;
  animation: halo 3.6s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.cuota__prefijo {
  position: relative; z-index: 1;
  display: block; margin: 0 0 -.25rem;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-clara);
}
.cuota__cifra {
  position: relative; z-index: 1;
  margin: 0; max-width: none;
  display: flex; align-items: baseline; justify-content: center; gap: .35rem;
  font-family: var(--tipo-display); font-weight: 700; line-height: 1;
  color: var(--negro);
}
.cuota__moneda { font-size: clamp(1.5rem, 5vw, 2.25rem); }
.cuota__num {
  font-size: clamp(4.5rem, 16vw, 7rem);
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}
.cuota__unidad {
  font-size: clamp(1rem, 3.2vw, 1.375rem);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-clara);
}

/* Destello que barre el número. Va dentro de @supports porque la técnica
   deja el texto transparente: sin background-clip el 22 desaparece. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cuota__num {
    background-image: linear-gradient(100deg,
      var(--rojo) 0%, var(--rojo) 38%, #FF8A86 48%, var(--rojo) 58%, var(--rojo) 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: destello 5.5s ease-in-out infinite;
  }
}
@keyframes destello {
  0%, 62%, 100% { background-position: 100% 0; }
  82%           { background-position: 0 0; }
}

/* Escala: el marcador viaja de "más caro" a "más barato" y se clava. */
.escala { position: relative; z-index: 1; margin-top: var(--e6); }
.escala__riel {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rojo), #E6E6E6);
}
.escala__marca {
  position: absolute; top: 50%; translate: -50% -50%;
  left: 4%;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blanco); border: 4px solid var(--rojo);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.cuota.esta-visible .escala__marca {
  animation: caeAlPiso 1.5s var(--curva) .15s both;
}
@keyframes caeAlPiso {
  from { left: 96%; }
  to   { left: 4%; }
}
.escala__pies {
  display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-clara);
}

.cuota__sello {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--e6);
  padding: .5rem .875rem;
  background: var(--rojo-hondo); color: var(--blanco);
  border-radius: var(--radio-control);
  font: 700 .875rem/1.3 var(--tipo-texto);
  rotate: -2.5deg;
}
.cuota.esta-visible .cuota__sello {
  animation: selloEntra .5s cubic-bezier(.2, 1.5, .4, 1) .75s both;
}
@keyframes selloEntra {
  from { opacity: 0; scale: 1.5; rotate: -2.5deg; }
  to   { opacity: 1; scale: 1;   rotate: -2.5deg; }
}
.cuota__sello::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blanco); flex: none;
  animation: latido 2.8s ease-in-out infinite;
}

.cuota__letra {
  position: relative; z-index: 1;
  margin: var(--e4) auto 0; max-width: 34ch;
  font-size: .8125rem; color: var(--tinta-clara);
}

@media (prefers-reduced-motion: reduce) {
  .cuota__halo,
  .cuota__num,
  .cuota__sello::before { animation: none; }
  .cuota.esta-visible .escala__marca,
  .cuota.esta-visible .cuota__sello { animation: none; }
  .escala__marca { left: 4%; }
}

/* ── BENEFICIOS ──────────────────────────────────────────────── */
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.beneficio {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e4);
  background: var(--blanco); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-tarjeta);
}
.beneficio__marca {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--rojo-tenue); color: var(--rojo-hondo);
  display: grid; place-items: center; font-weight: 700;
}
.beneficio__titulo { margin: 0 0 .25rem; font-family: var(--tipo-display); font-size: 1.125rem; color: var(--negro); }
.beneficio__detalle { margin: 0; font-size: .9375rem; color: var(--tinta-clara); }

/* ── REJILLA Y TARJETAS ──────────────────────────────────────── */
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }

/* La campaña vende un pago diario, no un catálogo de fichas. Entonces la
   cuota es el objeto principal de la tarjeta y la moto la acompaña.

   Fondo oscuro porque las fotos son recortes sin fondo: sobre blanco se
   disuelven y el rojo de la moto pelea con el rojo de marca. Sobre negro
   las diez motos se leen como una familia.

   Radio casi recto y una sola regla roja: el redondeo parejo con sombra
   suave en cada bloque es lo que aplana la jerarquía de una página. La
   regla marca dónde termina el producto y empieza la plata; es
   estructura, no adorno. */
.tarjeta {
  position: relative; min-width: 0;
  display: block; color: var(--tinta); text-decoration: none;
  background: var(--blanco);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

/* El recorte va sobre la diagonal roja, con `contain` para no
   deformar la moto ni comerle una rueda. El fondo es CSS: la foto
   llega con transparencia y sin fondo propio. */
.tarjeta__arte {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--blanco); overflow: hidden;
}
.tarjeta__foto {
  display: block; width: 100%; height: 100%;
  object-fit: contain; padding: .75rem;
}

.tarjeta__cuerpo { display: block; padding: var(--e4) 1.15rem 1.25rem; }

.tarjeta__titulo {
  margin: 0;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; color: var(--negro);
}
.tarjeta__titulo a { color: inherit; text-decoration: none; }
.tarjeta__resumen { margin: .25rem 0 0; font-size: .8125rem; color: var(--tinta-clara); }

/* Rótulo sobre un título, en la ficha y en postventa. Texto de apoyo,
   no una píldora en mayúsculas: la píldora es de los gestos que hacen
   que cualquier página se parezca a cualquier otra. */
.etiqueta {
  margin: 0 0 var(--e1);
  font-size: .9375rem; color: var(--tinta-clara);
}

/* En la tarjeta la cuota no lleva el guion rojo de arriba: ahí el
   gesto ya lo pone la diagonal de la foto. El guion queda para el
   hero, donde la cuota es el único acento. */
.cuota-dia--chica { margin: var(--e4) 0 0; }
.cuota-dia.cuota-dia--chica::before { content: none; }
.cuota-dia--chica .cuota-dia__num { font-size: 2.75rem; }
.cuota-dia--chica .cuota-dia__pie { font-size: .875rem; color: var(--tinta-clara); }

.tarjeta .enlace-flecha { margin-top: var(--e4); }

/* Un enlace cubre la tarjeta entera: más superficie de toque en un
   celular, que es desde donde entra el 75 % de la gente. El «Ver
   modelo» visible es decorativo —va aria-hidden— para no duplicar
   el mismo destino en el árbol de accesibilidad. */
.tarjeta__enlace { position: absolute; inset: 0; z-index: 2; }
.tarjeta:hover { border-color: var(--rojo); }
.tarjeta:hover .tarjeta__titulo,
.tarjeta:focus-within .tarjeta__titulo { color: var(--rojo); }
.tarjeta__enlace:focus-visible { outline: 3px solid var(--rojo); outline-offset: -3px; }

/* ── PRECIO EN LA FICHA ──────────────────────────────────────── */
.precio {
  margin-top: var(--e8);
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-tarjeta);
}
.precio__rotulo {
  margin: 0; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-clara);
}
/* Recuadro rojo con la cuota diaria.
   Adentro va solo texto grande: blanco sobre el rojo vivo no llega a 4.5:1,
   que es lo que pide el texto chico. El rótulo y el plazo quedan afuera.
   Lleva más radio y más peso que el botón de consultar, que es rojo también:
   tienen que distinguirse, porque este recuadro no es clickeable. */
.precio__destaque {
  margin: .25rem 0 .5rem; max-width: none;
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .7rem 1.1rem;
  background: var(--rojo);
  border-radius: .75rem;
  color: var(--blanco);
  font-family: var(--tipo-display); font-weight: 700; line-height: 1;
  box-shadow: 0 3px 10px rgba(227, 31, 26, .3);
}
.precio__moneda { font-size: 1.25rem; }
.precio__num {
  font-size: clamp(2.25rem, 7vw, 3rem);
  font-variant-numeric: tabular-nums;
  /* Reserva el ancho del número final para que el recuadro no se agrande
     mientras el contador sube de 0. */
  min-width: 2ch; text-align: center;
}
.precio__unidad { font-size: 1.25rem; letter-spacing: .02em; }
.precio__plazo {
  margin: 0 0 var(--e4); font-size: .8125rem; color: var(--tinta-clara);
}
.precio__detalle {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .8125rem; color: var(--tinta-clara);
  letter-spacing: .04em; text-transform: uppercase;
}
.precio__detalle li { display: grid; gap: .1rem; }
/* El rótulo va en mayúsculas, la cifra no: "Bs" es el símbolo del boliviano
   y en versalitas se lee "BS". */
.precio__detalle strong { text-transform: none; letter-spacing: normal; }
.precio__detalle strong { font-family: var(--tipo-display); font-size: 1.0625rem; color: var(--negro); }

.tabla-precio { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-precio th, .tabla-precio td {
  text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}
.tabla-precio thead th {
  font-family: var(--tipo-display); color: var(--negro);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.tabla-precio tbody th { font-weight: 700; white-space: normal; }
.tabla-precio tr:last-child th, .tabla-precio tr:last-child td { border-bottom: 0; }

.precio__letra {
  margin: var(--e4) 0 0; max-width: 56ch;
  font-size: .8125rem; color: var(--tinta-clara);
}

/* ── FILTROS ─────────────────────────────────────────────────── */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-bottom: var(--e8);
}
.filtro {
  min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--blanco); color: var(--tinta);
  font: 700 .9375rem var(--tipo-texto); cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
}
.filtro:hover { background: var(--superficie); }
.filtro[aria-pressed="true"] {
  background: var(--rojo-hondo); color: var(--blanco); border-color: var(--rojo-hondo);
}
.sin-resultados { color: var(--tinta-clara); }

/* ── FICHA DE MODELO ─────────────────────────────────────────── */
.ficha { display: grid; gap: var(--e8); align-items: start; }
/* La moto vive en territorio oscuro, igual que en las tarjetas del catálogo:
   se toca una tarjeta negra y se cae en una página donde la moto sigue sobre
   negro. El resto de la ficha —ficha técnica, precio, calculadora— queda en
   claro. La oscuridad marca el producto, no la página.

   De las 57 fotos del catálogo, 35 son recortes sin fondo y 14 son
   ambientales con su propia escena: las dos cosas se ven bien acá. Las 8 que
   traían fondo blanco quedaban como un rectángulo blanco en medio del negro,
   y Diego pidió sacarlas el 23-09-2026: están listadas en FOTOS_FUERA, en
   build.mjs. Los archivos siguen en disco; si alguna vez se recortan, se
   sacan de esa lista y vuelven solas. */
.galeria__principal {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; padding: var(--e4);
  /* Antes era un degradado casi negro, del sistema anterior. El
     editorial va en blanco mate con filete: la foto principal es el
     mismo recorte con transparencia que la tarjeta, y sobre negro
     perdia el contorno blanco de la moto. */
  background: var(--blanco);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-tarjeta);
}
.galeria__miniaturas {
  list-style: none; margin: var(--e2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--e2);
}
.galeria__miniaturas button {
  display: block; width: 100%; padding: 0; cursor: pointer;
  border: 0; border-radius: 2px; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde-suave);
  /* La miniatura activa se marca con una barra roja abajo y no con un borde
     de 2 px: un borde corre la imagen un pixel y la fila entera baila al
     cambiar de foto. */
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow var(--rapido) var(--curva);
}
.galeria__miniaturas button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--rojo); }
.galeria__miniaturas button:hover { box-shadow: inset 0 -3px 0 var(--borde); }
.galeria__miniaturas button:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .galeria__miniaturas button { transition: none; } }
.galeria__miniaturas img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: .35rem; }

.atributos { list-style: none; margin: 0 0 var(--e6); padding: 0; display: grid; gap: .5rem; }
.atributos li { display: flex; gap: .5rem; align-items: baseline; font-size: .9375rem; }
.atributos strong { font-family: var(--tipo-display); letter-spacing: .02em; }

.tabla-tecnica { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-tecnica caption {
  text-align: left; font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.25rem; color: var(--negro); padding-bottom: var(--e2);
}
.tabla-tecnica th, .tabla-tecnica td {
  text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--borde-suave);
  vertical-align: top;
}
.tabla-tecnica th { width: 42%; font-family: var(--tipo-display); color: var(--negro); }
.tabla-envoltorio { overflow-x: auto; }

.colores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.colores li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border: 1px solid var(--borde-suave);
  border-radius: 999px; font-size: .875rem;
}
.colores i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25); flex: none;
}

/* ── SUCURSALES ──────────────────────────────────────────────── */
.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.punto {
  padding: var(--e4);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}
.punto--propio { border-left: 4px solid var(--rojo); }
.punto__nombre { margin: 0 0 .25rem; font-family: var(--tipo-display); font-size: 1.1875rem; color: var(--negro); }
.punto__ciudad {
  display: inline-block; margin-bottom: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-clara);
}
.punto__dir { margin: 0 0 .5rem; font-size: .9375rem; }
.punto__tel { font-weight: 700; margin: 0; }

/* «Cómo llegar» abre el mapa. Va con flecha para que se lea como enlace
   aun sin subrayado, y con área de toque cómoda: se usa desde el celular,
   muchas veces con una mano y en la calle. */
.punto__mapa { margin: .625rem 0 0; }
.punto__mapa a {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; padding-right: .25rem;
  font-size: .9375rem; font-weight: 600; color: var(--rojo-hondo);
}
.punto__mapa a::after { content: "→"; transition: transform var(--rapido) var(--curva); }
.punto__mapa a:hover::after { transform: translateX(.1875rem); }
@media (prefers-reduced-motion: reduce) {
  .punto__mapa a::after { transition: none; }
  .punto__mapa a:hover::after { transform: none; }
}

/* ── PERFILES DE REQUISITOS ──────────────────────────────────── */
.perfiles { display: grid; gap: var(--e2); max-width: 48rem; }
.perfil {
  border: 1px solid var(--borde-suave); border-radius: var(--radio-tarjeta);
  background: var(--blanco); overflow: hidden;
}
.perfil[open] { border-color: var(--rojo); }

.perfil__titulo {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--alto-control); padding: var(--e4);
  font-family: var(--tipo-display); font-size: 1.125rem; font-weight: 700;
  color: var(--negro); cursor: pointer; list-style: none;
}
.perfil__titulo::-webkit-details-marker { display: none; }
/* Triángulo propio: el nativo no se puede recolorear ni alinear. */
.perfil__titulo::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: .4375rem solid var(--rojo);
  border-top: .3125rem solid transparent;
  border-bottom: .3125rem solid transparent;
  transition: transform var(--rapido) var(--curva);
}
.perfil[open] .perfil__titulo::before { transform: rotate(90deg); }
.perfil__titulo:hover { background: var(--superficie); }
.perfil__titulo:focus-visible { outline: 3px solid var(--rojo-hondo); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .perfil__titulo::before { transition: none; }
}

.perfil__cuerpo { padding: 0 var(--e4) var(--e4); }
.perfil__nota {
  margin: 0 0 var(--e4); padding: var(--e2) var(--e4);
  background: var(--superficie); border-left: 3px solid var(--borde);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  font-size: .9375rem; color: var(--tinta-clara);
}

.perfil__variante {
  margin-top: var(--e6); padding-top: var(--e4);
  border-top: 1px dashed var(--borde-suave);
}
.perfil__variante-titulo {
  margin: 0; font-family: var(--tipo-display); font-size: 1rem;
  color: var(--rojo-hondo);
}
.perfil__variante-intro { margin: var(--e1) 0 var(--e2); font-size: .9375rem; color: var(--tinta-clara); }

/* Las salidas son lo que evita que alguien se descarte solo: van destacadas,
   no como letra chica. */
.salidas { margin: var(--e6) 0 0; }
.salidas dt {
  font-weight: 700; color: var(--rojo-hondo);
  padding-left: 1.5rem; position: relative;
}
.salidas dt::before {
  content: "?"; position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--rojo); color: var(--blanco);
  font-size: .75rem; font-weight: 700; line-height: 1;
}
.salidas dd { margin: var(--e1) 0 var(--e4) 1.5rem; font-size: .9375rem; }
.salidas dd:last-child { margin-bottom: 0; }

/* Los horarios valen para todos los puntos, así que van una vez debajo de la
   lista y no repetidos en cada tarjeta. */
.horarios {
  margin: var(--e6) 0 0; padding: var(--e4);
  background: var(--superficie); border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  font-size: .9375rem;
}
.horarios__titulo {
  margin: 0 0 var(--e1); font-weight: 700; color: var(--negro);
}
.horarios__lista {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .15rem;
  font-variant-numeric: tabular-nums;
}

/* ── CALCULADORA DE CRÉDITO ──────────────────────────────────── */
.calc {
  display: grid; gap: var(--e6);
  max-width: 58rem; margin-inline: auto;
}
@media (min-width: 48rem) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.calc__form { display: grid; gap: var(--e4); align-content: start; }

.calc__salida {
  padding: var(--e6);
  background: var(--blanco);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-baja);
}
.calc__rotulo {
  margin: 0; font-size: .875rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-clara);
}
.calc__cifra {
  margin: 0; font-family: var(--tipo-display); font-weight: 700;
  font-size: clamp(2.75rem, 10vw, 3.75rem); line-height: 1;
  color: var(--rojo-hondo); font-variant-numeric: tabular-nums;
}
.calc__diaria { margin: var(--e1) 0 0; font-size: .9375rem; color: var(--tinta-clara); }

.calc__detalle { margin: var(--e6) 0 0; font-size: .9375rem; }
.calc__detalle > div {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: .45rem 0; border-bottom: 1px solid var(--borde-suave);
}
.calc__detalle dt { color: var(--tinta-clara); }
.calc__detalle dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__detalle-total { border-bottom: 0 !important; border-top: 2px solid var(--negro) !important; }
.calc__detalle-total dt, .calc__detalle-total dd { font-weight: 700; color: var(--negro); }

/* La orientación por ingresos nunca es un rechazo: cuando la cuota se pasa,
   este bloque lista salidas, no un «no». Por eso el tono de aviso y no el
   de error. */
.calc__nota {
  margin-top: var(--e6); padding: var(--e4);
  border-radius: var(--radio-control); font-size: .9375rem;
}
.calc__nota p { margin: 0; max-width: none; }
.calc__nota ul { margin: var(--e2) 0 0; padding-left: 1.1rem; display: grid; gap: var(--e1); }
.calc__nota--bien { background: rgba(23, 98, 58, .08); border-left: 4px solid var(--exito); }
.calc__nota--ojo  { background: var(--rojo-tenue);      border-left: 4px solid var(--rojo); }

.calc__pie { margin: var(--e6) 0 0; }
.calc__pie .boton { width: 100%; }

/* Atajos de inicial: tres toques en lugar de abrir el teclado numérico.
   Los crea el JavaScript porque los montos dependen del modelo elegido, y
   el campo libre sigue debajo: esto lo adelanta, no lo reemplaza. */
.atajos { display: flex; flex-wrap: wrap; gap: .5rem; }
.atajos__boton {
  flex: 1 1 5rem; min-height: 2.75rem; padding: .4rem .75rem;
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--blanco); color: var(--tinta);
  font: inherit; font-size: .9375rem; font-weight: 600;
  cursor: pointer;
}
.atajos__boton:hover { border-color: var(--tinta-clara); }
.atajos__boton[aria-pressed="true"] {
  background: var(--rojo-tenue); border-color: var(--rojo); color: var(--rojo-hondo);
}

/* Una sola línea, y solo mientras la inicial sigue en el mínimo: en cuanto
   la persona la sube, desaparece. Así el bloque de resultado nunca junta
   más de un consejo a la vez. */
.calc__sugerencia {
  margin: var(--e4) 0 0; padding-top: var(--e4);
  border-top: 1px solid var(--borde-suave);
  font-size: .9375rem; color: var(--tinta-clara);
}
.calc__sugerencia strong { color: var(--negro); }

/* ── CUOTA SIEMPRE A LA VISTA (celular) ──────────────────────
   En pantallas angostas el formulario y el resultado se apilan, así que
   la cifra queda debajo del pliegue y se pierde al seguir bajando. Esta
   barra la sostiene. No existe hasta que la persona toca la calculadora
   y se esconde cuando el resultado vuelve a estar en pantalla; en
   escritorio no se publica nunca porque ahí la cifra va al lado. */
.cuota-viva {
  position: fixed; z-index: 30;
  left: var(--e4); right: var(--e4); bottom: var(--e4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: .7rem .9rem;
  border: 0; border-radius: var(--radio-control);
  background: var(--negro); color: var(--blanco);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
  transform: translateY(150%); transition: transform .28s var(--curva);
}
.cuota-viva[data-visible="true"] { transform: translateY(0); }
.cuota-viva__rotulo {
  display: block; font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75;
}
.cuota-viva__cifra {
  display: block;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.375rem; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.cuota-viva__ir { flex: none; font-size: .8125rem; font-weight: 700; text-decoration: underline; }
@media (min-width: 48rem) { .cuota-viva { display: none; } }
@media (prefers-reduced-motion: reduce) { .cuota-viva { transition: none; } }

/* ── PÁGINA DE TEXTO LARGO ──────────────────────────────────── */
/* La política de privacidad es la única página del sitio que se lee de
   corrido. Una columna angosta: a sesenta caracteres por línea el ojo
   encuentra el renglón siguiente sin releer el anterior. */
.contenedor--texto { max-width: 46rem; }
.contenedor--texto p { max-width: none; }
.contenedor--texto h2 { margin-top: var(--e12); font-size: 1.375rem; }
.contenedor--texto h2:first-of-type { margin-top: var(--e8); }
.contenedor--texto ul { display: grid; gap: var(--e2); margin: var(--e4) 0; padding-left: 1.2rem; }

/* Índice de la página. Una política sin índice se lee de arriba abajo o no
   se lee: casi nadie busca «cómo doy de baja» leyendo once secciones. */
.indice {
  margin: var(--e8) 0 0; padding: var(--e4) var(--e6);
  background: var(--gris-suave, #F5F4F3);
  border-left: 3px solid var(--rojo); border-radius: var(--radio-control);
}
.indice__titulo {
  margin: 0 0 var(--e2); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-clara);
}
.indice ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: .9375rem; }


/* ═══════════════════════════════════════════════════════════════
   CAPA EDITORIAL · rediseño aprobado (mockup del 20-10-2026)

   Blanco mate de fondo, negro para titulares, gris para lo
   secundario y rojo sólo para marca, diagonal, cuota y llamadas a
   la acción. La fotografía hace el deseo; el número hace la cuenta.

   Lo que esta capa NO trae, a propósito: brillos, fondos rojos
   recargados, amarillo, sellos circulares de precio, sombras
   fuertes y radios grandes. Donde el diseño anterior resolvía con
   una caja redondeada y sombra, acá resuelve una diagonal y un
   borde de 1 px.
   ═══════════════════════════════════════════════════════════════ */

/* ── DIAGONAL ────────────────────────────────────────────────────
   El acento reconocible de la marca. Se construye en CSS, nunca en
   la imagen: así escala, cambia de color y no pesa. Va SIEMPRE
   detrás del producto —z-index 0 contra 1— porque su trabajo es
   acompañar a la moto, no taparla. */
.diagonal { position: relative; isolation: isolate; }
.diagonal::before {
  content: ""; position: absolute; z-index: 0;
  inset: 0;
  background: var(--rojo);
  /* Paralelogramo de abajo-izquierda a arriba-derecha, ~62°. Los
     porcentajes son del alto, así que la inclinación se mantiene
     cuando la tarjeta cambia de proporción. */
  clip-path: polygon(14% 100%, 58% 0, 100% 0, 56% 100%);
}
.diagonal > * { position: relative; z-index: 1; }

/* ── HERO ────────────────────────────────────────────────────────
   Dos colocaciones del mismo bloque de texto, sin duplicarlo en el
   HTML:

   · En celular la pieza es vertical y la persona ocupa dos tercios.
     El texto va DEBAJO, en flujo. No se superpone nada: la zona
     blanca de arriba da para un título corto y nada más, y un
     bloque con cuota, condiciones y dos botones encima de una cara
     es exactamente lo que el mapa de assets prohíbe.

   · En escritorio la pieza reserva un 35-38 % blanco a la
     izquierda. Ahí entra todo el bloque, centrado en vertical. */
.hero { background: var(--blanco); }
.hero__arte { display: block; }
.hero__arte img {
  display: block; width: 100%; height: auto;
  /* La moto y la persona nunca se recortan: el banner ya viene
     compuesto y `cover` le comería una rueda o media cabeza. */
  object-fit: contain;
}

.hero__texto {
  padding: var(--e8) var(--e4) var(--e12);
  max-width: var(--ancho-max); margin-inline: auto;
}

.hero__modelo {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-display); font-weight: 600;
  font-size: .9375rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-clara);
}

.hero__titular {
  margin: 0;
  font-family: var(--tipo-display); font-weight: 700;
  /* Contundente pero nunca desproporcionado: el techo de 4.5rem
     evita que en un monitor ancho el titular le gane a la moto. */
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: .92; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--negro);
  text-wrap: balance;
}

.hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin: var(--e6) 0 0;
}

.hero__letra {
  margin: var(--e6) 0 0;
  font-size: .75rem; line-height: 1.5; color: var(--tinta-clara);
  max-width: 34rem;
}

/* La firma editorial: isotipo y firma completa, sólo en SVG oficial.
   Abajo a la derecha del arte, donde el mockup la pone. */
.hero__firma {
  display: none;
  position: absolute; right: var(--e8); bottom: var(--e6);
  z-index: 2; width: 8.75rem; height: auto;
}

@media (min-width: 48rem) {
  .hero { position: relative; }
  .hero__texto {
    position: absolute; inset: 0 auto 0 0;
    width: min(40%, 30rem);
    display: grid; align-content: center;
    padding: var(--e8) var(--e6) var(--e8)
             max(var(--e8), calc((100vw - var(--ancho-max)) / 2 + var(--e4)));
    margin: 0;
  }
  .hero__firma { display: block; }
}

/* ── CUOTA DIARIA ────────────────────────────────────────────────
   Bloque blanco propio, como pide el encargo. Debajo del titular en
   el hero y debajo de cada moto en el catálogo. El guion rojo de
   arriba es el mismo gesto de la diagonal, reducido a una línea. */
.cuota-dia { margin: var(--e6) 0 0; }
.cuota-dia::before {
  content: ""; display: block;
  width: 2.75rem; height: 4px; margin-bottom: var(--e4);
  background: var(--rojo);
}
/* El tamaño base del párrafo ES el del número grande: así el em de
   la moneda y el de la unidad se calculan contra él y no contra el
   1rem heredado, que es lo que dejaba «Bs» y «por día» como dos
   migas sueltas al lado de la cifra. Alineadas por línea base, no
   por caja, para que las tres piezas apoyen en el mismo renglón. */
.cuota-dia__cifra {
  margin: 0;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 .28em;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1; color: var(--rojo);
  font-variant-numeric: tabular-nums;
}
.cuota-dia__desde {
  font-size: .3em; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-clara);
  flex-basis: 100%;
}
.cuota-dia__moneda { font-size: .42em; }
.cuota-dia__num { font-size: 1em; letter-spacing: -.02em; }
.cuota-dia__unidad {
  font-size: .3em; font-weight: 600;
  color: var(--negro); letter-spacing: .02em;
}
.cuota-dia__unidad sup { font-size: .7em; vertical-align: super; line-height: 0; }
.cuota-dia__pie {
  margin: var(--e2) 0 0;
  font-size: 1rem; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ── BOTONES DE LÍNEA ────────────────────────────────────────────
   El secundario del mockup: borde negro, fondo blanco. El primario
   rojo ya existe en `.boton`. El verde sigue reservado para lo que
   abre WhatsApp y no se toca. */
.boton--linea {
  background: var(--blanco); color: var(--negro);
  border: 2px solid var(--negro);
}
.boton--linea:hover { background: var(--negro); color: var(--blanco); }

/* ── VENTAJAS ────────────────────────────────────────────────────
   Franja de tres, separadas por filetes verticales. Sin tarjetas,
   sin sombras: es una línea de confianza, no un bloque de venta. */
.ventajas {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--e6);
  border-block: 1px solid var(--borde-suave);
  padding-block: var(--e6);
}
.ventajas li {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e4); text-align: left;
}
.ventajas svg { flex: none; width: 1.75rem; height: 1.75rem; color: var(--negro); }
.ventajas strong {
  font-family: var(--tipo-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--negro);
}
.ventajas span { display: block; font-size: .875rem; color: var(--tinta-clara); }
@media (min-width: 48rem) {
  .ventajas { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ventajas li + li { border-left: 1px solid var(--borde-suave); }
}

/* ── BLOQUE EDITORIAL ────────────────────────────────────────────
   Escena de contexto a un lado, texto al otro. Una sola escena por
   bloque: dos fotos compitiendo es lo que convierte una portada en
   un collage. */
.editorial { background: var(--blanco); }
.editorial__in { display: grid; align-items: center; }
.editorial__arte { display: block; }
.editorial__arte img { display: block; width: 100%; height: auto; }
.editorial__texto { padding: var(--e8) var(--e4); }
.editorial__titular {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: .95;
  text-transform: uppercase; color: var(--negro);
  text-wrap: balance;
}
.editorial__modelo {
  margin: 0 0 var(--e6);
  font-family: var(--tipo-display); font-weight: 600;
  font-size: .875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-clara);
}
@media (min-width: 48rem) {
  .editorial__in { grid-template-columns: 1.15fr .85fr; }
  .editorial__texto { padding: var(--e12) var(--e8); }
}

/* ── FRANJA DE SERVICIO ──────────────────────────────────────────
   Una línea, un ícono y un enlace. Nada más. */
.servicio {
  border-block: 1px solid var(--borde-suave);
  padding-block: var(--e6);
}
.servicio__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--e4) var(--e8);
}
.servicio svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--negro); }
.servicio__lema {
  margin: 0;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  letter-spacing: .03em; text-transform: uppercase; color: var(--negro);
}

/* ── ENLACE CON FLECHA ───────────────────────────────────────────
   El «VER TODO EL CATÁLOGO ›» del mockup. La flecha es un
   pseudo-elemento y no un carácter del texto: un lector de pantalla
   no tiene por qué leer «mayor que». */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--tipo-display); font-weight: 700;
  font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rojo-hondo); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.enlace-flecha::after { content: "›"; font-size: 1.2em; line-height: 1; }

/* El enlace mide 26 px de alto y con el pulgar eso se falla. El área
   de toque crece a 44 px con un pseudo-elemento invisible, en vez de
   con padding: el padding empujaría el subrayado lejos del texto y el
   gesto del mockup es justamente un subrayado pegado.

   Sólo en los que son enlaces de verdad. El «Ver modelo» de la
   tarjeta es un <span> decorativo —la tarjeta entera ya es el
   enlace— y no necesita área propia. */
a.enlace-flecha { position: relative; }
a.enlace-flecha::before {
  content: ; position: absolute; left: 0; right: 0; top: 50%;
  height: 2.75rem; transform: translateY(-50%);
}
.enlace-flecha:hover { color: var(--negro); }

/* ── ENCABEZADO DE SECCIÓN EDITORIAL ─────────────────────────── */
.sec__cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e4);
  margin-bottom: var(--e8);
}
.sec__cabeza .sec__titulo, .sec__cabeza .sec__bajada { margin: 0; }

/* ── PREGUNTAS FRECUENTES ───────────────────────────────────── */
/* Cerradas por defecto. El texto está completo en el HTML y en el JSON-LD,
   que es lo que leen los buscadores; el <details> solo decide si se ve. Así
   la página gana seis respuestas de contenido sin estirarse seis pantallas. */
.faq {
  display: grid; gap: .5rem;
  max-width: 50rem; margin-inline: auto;
}
.faq__item {
  border: 1px solid var(--borde-suave); border-radius: var(--radio-control);
  background: var(--blanco);
}
.faq__item[open] { border-color: var(--rojo); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: .85rem var(--e4);
  font-weight: 700; color: var(--negro);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
/* Signo propio: el triángulo nativo no se puede recolorear ni alinear. */
.faq__q::before {
  content: "+"; flex: none;
  width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--rojo-tenue); color: var(--rojo-hondo);
  font-size: .9375rem; line-height: 1;
}
.faq__item[open] .faq__q::before { content: "−"; background: var(--rojo); color: var(--blanco); }
.faq__r { padding: 0 var(--e4) var(--e4) calc(var(--e4) + 1.75rem); }
.faq__r p { margin: 0; max-width: 46rem; }
.faq__r p + p { margin-top: var(--e2); }

/* ── APERTURAS ──────────────────────────────────────────────── */
/* El primer párrafo de la página es el que un buscador extrae como
   respuesta. Va un punto más grande que el cuerpo para que también sea lo
   primero que lee una persona, no solo una máquina. */
.portada__resumen {
  margin: var(--e4) 0 0; font-size: 1.0625rem; line-height: 1.55;
  color: rgba(255, 255, 255, .88); max-width: 42rem;
}
.ficha__apertura {
  font-size: 1.0625rem; line-height: 1.55; font-weight: 500;
  color: var(--negro);
}

/* ── CHECKLIST DE SERVICIO ───────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.checklist li { display: flex; gap: .625rem; align-items: flex-start; }
.checklist li::before {
  content: "✓"; flex: none;
  width: 1.375rem; height: 1.375rem; border-radius: var(--radio-control);
  background: var(--rojo-tenue); color: var(--rojo-hondo);
  display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
}

/* ── FORMULARIO ──────────────────────────────────────────────── */
.form { display: grid; gap: var(--e4); max-width: 34rem; }
.campo { display: grid; gap: .5rem; }
label { font-weight: 700; }
input, select, textarea {
  width: 100%; min-height: var(--alto-control); padding: .75rem;
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  font: inherit; color: var(--tinta); background: var(--blanco);
}
textarea { min-height: 7rem; resize: vertical; }
[aria-invalid="true"] { border-color: var(--error); }
.campo__error { color: var(--error); font-size: .875rem; min-height: 1.25rem; }
.campo__ayuda { color: var(--tinta-clara); font-size: .875rem; }
.form__aviso {
  padding: var(--e4); border-radius: var(--radio-control);
  border: 1px solid var(--borde-suave); background: var(--superficie);
  font-size: .9375rem;
}
.form__aviso--error { border-color: var(--error); color: var(--error); background: #FEF3F2; }

/* ── PIE ─────────────────────────────────────────────────────── */
.pie { background: var(--negro); color: #C9C9C9; padding-block: var(--e12) var(--e8); }
.pie__in { display: grid; gap: var(--e8); }
.pie h2, .pie h3 { color: var(--blanco); font-size: 1.125rem; }
.pie a { color: var(--blanco); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.pie__logo { width: 12.5rem; }
.pie__legal {
  margin-top: var(--e8); padding-top: var(--e4);
  border-top: 1px solid #333; font-size: .8125rem; color: #9A9A9A;
}
.pie__legal p { max-width: none; }

/* ── APARICIÓN AL HACER SCROLL ───────────────────────────────── */
/* El contenido es visible por defecto. El JavaScript agrega .por-revelar
   solo a lo que arranca debajo del pliegue, y lo saca al entrar en pantalla.
   Así, si el observador no entrega, si el JS no carga o si el navegador tiene
   el pintado pausado, lo único que se pierde es el fundido: nunca el texto. */
.revelar { transition: opacity .6s var(--curva), transform .6s var(--curva); }
.revelar.por-revelar { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .revelar { transition: none; }
  .revelar.por-revelar { opacity: 1; transform: none; }
}

/* ── PUNTOS DE CAMBIO ────────────────────────────────────────── */
@media (min-width: 48rem) {
  .contenedor { width: calc(100% - 3rem); }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada__in { padding-block: var(--e16); }
}

@media (min-width: 62rem) {
  .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--e12); }
  .portada__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pie__in { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 75rem) {
  .contenedor { width: calc(100% - 4rem); }
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .puntos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecera__in { min-height: 5.5rem; }
  .logo { width: 12.5rem; }
  /* El manual pide 56 px de h1 y 36 px de h2 acá. Como la raíz ya subió a
     18 px, el valor en rem baja para dar el mismo tamaño final: lo que tenía
     que crecer era el texto de lectura, no los títulos. */
  h1 { font-size: 4rem; line-height: 1.02; }
  h2 { font-size: 2.75rem; line-height: 1.1; }
}

@media print {
  .promo, .nav, .menu-boton, .portada__acciones { display: none; }
  body { color: #000; }
}