/* ═══════════════════════════════════════════════════════════════
   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;
  --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. */
  --radio-control: .625rem;
  --radio-tarjeta: 1rem;
  --alto-control: 3rem;
  --ancho-max: 75rem;

  --sombra-baja: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.13);

  --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; }

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);
  -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;
  }
  .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); }

.tarjeta {
  min-width: 0; display: flex; flex-direction: column;
  border: 1px solid rgba(0,0,0,.05); border-radius: var(--radio-tarjeta);
  background: var(--blanco); overflow: hidden;
  box-shadow: var(--sombra-baja);
  transition: transform var(--panel), box-shadow var(--panel);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta { transition: box-shadow var(--panel); }
  .tarjeta:hover { transform: none; }
}
.tarjeta__foto {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; background: var(--superficie);
}
.tarjeta__cuerpo { padding: var(--e4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta__etiqueta {
  align-self: flex-start;
  font: 700 .75rem/1 var(--tipo-texto); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo-hondo); background: var(--rojo-tenue);
  padding: .3rem .5rem; border-radius: var(--radio-control);
}
.tarjeta__titulo { margin: 0; font-size: 1.375rem; }
.tarjeta__titulo a { color: var(--negro); text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--rojo-hondo); text-decoration: underline; }
.tarjeta__resumen { margin: 0; font-size: .9375rem; color: var(--tinta-clara); }
.tarjeta__precio { margin: .25rem 0 0; display: grid; gap: .1rem; }
.precio__cifra-chica {
  font-family: var(--tipo-display); font-weight: 700; font-size: 1.625rem;
  color: var(--negro); line-height: 1.1;
}
.precio__cifra-chica small {
  font-size: .875rem; font-weight: 400; color: var(--tinta-clara);
  letter-spacing: .04em;
}
.precio__apoyo { font-size: .8125rem; color: var(--tinta-clara); }

.tarjeta__pie { margin-top: auto; padding-top: var(--e2); }

/* ── 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; }
.galeria__principal {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; background: var(--superficie);
  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: 1px solid var(--borde-suave); border-radius: var(--radio-control);
  background: var(--superficie); overflow: hidden;
}
.galeria__miniaturas button[aria-current="true"] { border-color: var(--rojo); border-width: 2px; }
.galeria__miniaturas img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }

.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; }

/* ── 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; }
}