/* ==========================================================================
   Speed Shop Chicureo — prototipo de home
   Vanilla CSS. Sin framework. Se porta a las plantillas PHP existentes.
   Sistema definido en el manual de identidad v1.0 (agosto 2026).
   ========================================================================== */

/* --- Tipografía ---------------------------------------------------------
   Satoshi (Fontshare, uso comercial libre) es la voz del sitio: textos,
   titulares e interfaz.
   Archivo Variable queda SOLO para el wordmark: es la única con eje wdth
   real, y el eje de aceleración de la marca depende de él. Satoshi no
   tiene eje de ancho — simularlo con scaleX deforma los trazos.
   ------------------------------------------------------------------------ */
/* Satoshi variable: un archivo para todo el rango 300–900.
   Reemplaza tres estáticos (74 KB) por uno solo de 41 KB, y habilita los
   pesos intermedios (600) que antes no existían. Mismo criterio que
   vinacentroarriendo.cl, para unificar entre proyectos. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fuentes/satoshi-var.woff2') format('woff2-variations'),
       url('../fuentes/satoshi-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-weight: 400 600;
  font-display: swap;
  src: url('../fuentes/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'ArchivoEje';
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fuentes/archivo-var.woff2') format('woff2');
}

:root {
  /* Color — manual §11 rev.2: naranja como color de marca.
     Tostado, no naranja puro: el vibrante no alcanza contraste sobre blanco.
     Nunca pasa del 8% de superficie. */
  --tinta:    #101012;
  --grafito:  #3a3b3f;
  --gris:     #85868c;
  --linea:    #e2e0dc;
  --hueso:    #ffffff;   /* fondo principal */
  --papel:    #f5f4f2;   /* banda alterna */
  --blanco:   #ffffff;
  --blanco-calido: #faf9f7;
  --naranja:     #c44100;   /* base: 5.12:1 sobre blanco, AA para texto */
  --naranja-viv: #e85d04;   /* solo titulares grandes: 3.6:1, AA large */
  --naranja-cl:  #ff7a2e;   /* sobre fondos oscuros: 7.31:1 */
  --calipso:     #0e6b72;   /* estado y novedad: 6.24:1 con texto blanco */
  --calipso-cl:  #5fb3ba;   /* sobre fondos oscuros: 7.6:1, igual que --naranja-cl */

  /* Tipografía */
  --sans:  'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marca: 'ArchivoEje', 'Satoshi', system-ui, sans-serif;
  --rotulo: 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

  /* Escala — manual §09 */
  --t-display: clamp(2.75rem, 7.5vw, 6rem);
  --t-titulo:  clamp(1.75rem, 4vw, 3rem);
  --t-sub:     1.0625rem;
  --t-cuerpo:  1rem;
  --t-nota:    0.875rem;
  --t-micro:   0.6875rem;

  /* Ritmo */
  --borde: clamp(1.25rem, 3vw, 3rem);
  /* Mismo criterio que vinacentroarriendo.cl: caja de 1400 con el padding
     por dentro. En 1512 de ventana da 1309 de ancho útil. */
  --ancho: 87.5rem;   /* 1400px */
  --banda: clamp(3rem, 6.6vw, 6rem);

  /* Escala de z-index — ui-ux-pro-max */
  --z-nav: 50;
  --z-menu: 40;
  --z-sobre: 20;

  /* Alto del header. El nav es sticky y ocupa flujo: el hero debe descontarlo
     o 100svh + nav desborda la pantalla. */
  --nav: 4.75rem;

  /* Alto real del header completo (barra superior + barra principal). Lo usan
     las páginas sin hero, que si no se meten por debajo del nav fijo. */
  --alto-nav: 6.75rem;
}

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

/* El atributo hidden tiene que ganar siempre. Cualquier clase con display
   propio lo anula en silencio y el elemento aparece sin que nada lo pida:
   así se coló la etiqueta "Precio normal" en productos sin descuento. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* Foco visible — regla crítica de ui-ux-pro-max */
:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--hueso);
  padding: .75rem 1.25rem; z-index: 100; font-size: var(--t-nota);
}
.salta-al-contenido:focus { left: 0; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--borde); }

/* ==========================================================================
   El eje de aceleración — manual §04
   ========================================================================== */

.eje {
  font-family: var(--marca);
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.055em;
  white-space: nowrap;
  line-height: 0.92;
}
.eje i { font-style: normal; display: inline-block; }
.eje i:nth-child(1) { font-stretch: 88%; }
.eje i:nth-child(2) { font-stretch: 91%; }
.eje i:nth-child(3) { font-stretch: 94%; }
.eje i:nth-child(4) { font-stretch: 97%; }
.eje i:nth-child(5) { font-stretch: 100%; }
.eje i:nth-child(6) { font-stretch: 103%; }
.eje i:nth-child(7) { font-stretch: 106%; }
.eje i:nth-child(8) { font-stretch: 109%; }
.eje i:nth-child(9) { font-stretch: 112%; }

/* Los titulares también aceleran: el eje es el sistema, no un truco del logo */
.acelera {
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.localizador {
  display: block;
  font-size: max(10px, 0.2em);
  letter-spacing: 0.42em;
  font-weight: 600;
  color: var(--gris);
  margin-top: 0.55em;
  padding-left: 0.15em;
}

/* ==========================================================================
   Navegación — degradado negro que se disuelve sobre el hero claro
   ========================================================================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  background: #000000;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--hueso);
  transition: background .35s ease, backdrop-filter .35s ease;
}
/* Al bajar, se vuelve sólido y compacto */
.nav.es-solida {
  background: #000000;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}

/* ---- Barra superior: un peldaño por encima de la principal ----
   #111 contra el #000 de la barra principal: la diferencia es mínima a
   propósito, se lee como un matiz y no como dos bloques distintos. */
.nav__top { background: #111111; }
.nav__top-fila {
  max-width: calc(var(--ancho) + 100px); margin: 0 auto;
  padding: .45rem var(--borde);
  /* Una sola línea centrada: no hay nada más que alinear en esta barra. */
  display: flex; align-items: center; justify-content: center;
}
.nav__top-dato { text-align: center; }
.nav__top-dato {
  margin: 0; font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.62);
}
.nav__top-corto { display: none; }
/* El mismo mensaje que en escritorio. Para que quepa en una línea a 360px se
   baja el cuerpo a 10px y se cierra el tracking; por debajo de 22rem (móviles
   muy angostos) entra la versión abreviada, que ahí ya no hay ancho. */
@media (max-width: 52rem) {
  .nav__top-fila { padding: .4rem var(--borde); }
  /* 12px: dos más que antes. El texto completo pasa a ~295px de los 320
     disponibles, así que sigue entrando en una línea. */
  .nav__top-dato { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
}
@media (max-width: 22rem) {
  .nav__top-largo { display: none; }
  .nav__top-corto { display: inline; }
}

.nav__fila {
  /* 100px más ancho que el contenido: el header vuela sobre la grilla */
  max-width: calc(var(--ancho) + 100px); margin: 0 auto;
  padding: clamp(.9rem, 1.6vh, 1.2rem) var(--borde);
  /* Tres columnas con las laterales iguales (1fr): así el menú del centro
     queda centrado respecto a la barra, y no respecto al hueco que dejan
     logo e iconos, que tienen anchos distintos. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
}
.nav__fila .nav__marca { justify-self: start; }
.nav__fila .nav__derecha { justify-self: end; }

.nav__marca {
  font-size: 1.15rem; text-decoration: none; color: var(--hueso);
  display: flex; align-items: center; gap: .6rem; flex: none;
}
/* Punto naranja de cierre: el remate de la marca */
.nav__marca .eje::after {
  content: "";
  display: inline-block;
  width: .2em; height: .2em;
  border-radius: 999px;
  background: var(--naranja-cl);
  margin-left: .1em;
  vertical-align: baseline;
}
.nav__pleca { width: 1px; height: 1.15em; background: rgba(255,255,255,.28); flex: none; }
.nav__loc {
  font-size: max(9px, .5em); letter-spacing: .3em; font-weight: 500;
  color: rgba(255,255,255,.62); white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.boton) {
  text-decoration: none; font-size: var(--t-nota); font-weight: 500;
  color: rgba(255,255,255,.78); padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__links a:not(.boton):hover { color: #fff; border-bottom-color: var(--naranja-cl); }

.nav__derecha { display: flex; align-items: center; gap: 1.25rem; }
/* ---- Logo de marca en header y pie ----
   Reemplaza al logotipo tipografico (.eje + .nav__loc). Va deliberadamente
   pequeno. El wordmark grande del cierre del pie no se toca: ese sigue
   siendo tipografico. */
.nav__logo { display: block; height: 41px; width: auto; }
.pie__logo { display: block; height: 63px; width: auto; }
@media (max-width: 47.99rem) {
  .nav__logo { height: 34px; }
  .pie__logo { height: 54px; }
}
.nav__iconos { display: flex; align-items: center; gap: .25rem; }

/* Cotizar: unica accion con forma de boton en la barra. Va despues de los
   iconos y con su propia separacion, no la de .25rem que se dan ellos. */
.nav__cotizar { flex: none; white-space: nowrap; }
@media (max-width: 56rem) {
  /* En movil manda la hamburguesa: el boton no cabe sin apretar el logo, y
     la accion sigue disponible dentro del menu.
     Va con .nav delante porque .boton se declara mas abajo y, a igual
     especificidad, ganaba por orden. */
  .nav .nav__cotizar { display: none; }
}
.nav__icono {
  position: relative; border-radius: 5px;
  width: 32px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  /* La lupa es un <button>: sin esto traería el fondo y la tipografía del
     control nativo y rompería la fila de iconos. */
  background: none; padding: 0; font: inherit;
  color: rgba(255,255,255,.85); text-decoration: none; cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
/* Sin caja, el carrito ya no necesita ancho ni margen propios: los tres
   iconos comparten medida y el gap de .nav__iconos los separa por igual. */
.nav__icono svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.nav__icono:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav__contador {
  /* Montado en la esquina, no encima del dibujo: al quitarle la caja al
     carrito el icono se estrechó y el número le caía sobre el asa. */
  position: absolute; top: 0; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--naranja-cl); color: #101012; border-radius: 999px;
  font-size: 9px; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.solo-movil { display: none; }
.nav__toggle { display: none; }

/* ---- Botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: 44px;
  /* 2px menos arriba: Satoshi apoya la base más abajo en su caja de línea,
     así que con padding simétrico el texto queda ópticamente caído */
  padding: calc(.72rem - 1px) 1.5rem .72rem;
  font: inherit; font-size: var(--t-nota); font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* Flecha de trazo fino: el detalle va en el grosor, 1.1px a cualquier tamaño */
.boton svg {
  width: 17px; height: 17px; flex: none;
  stroke: currentColor; stroke-width: 1.1; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.boton:hover svg { transform: translateX(4px); }
/* Degradado de #333 a negro: le da volumen sin que se lea como efecto */
.boton--solido {
  background: linear-gradient(180deg, #333333 0%, #000000 100%);
  color: var(--hueso);
}
/* Hover del sólido: el degradado se aclara y la flecha avanza.
   Nada de virar a naranja — el color de marca se reserva para el acento. */
.boton--solido:hover { background: linear-gradient(180deg, #4a4b52 0%, #1a1a1d 100%); }
.boton--linea { background: transparent; color: var(--tinta); border-color: rgba(16,16,18,.22); }
.boton--linea:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.boton--claro { background: var(--hueso); color: var(--tinta); }
.boton--claro:hover { background: #ffffff; color: #000000; }
.boton--fantasma { background: transparent; color: var(--hueso); border-color: rgba(255,255,255,.45); }
.boton--fantasma:hover { background: var(--hueso); color: var(--tinta); }

/* El CTA del header no lleva flecha en escritorio; sí en el desplegable
   móvil, donde acompaña como el resto de botones del sitio. */
.nav__cta svg { display: none; }

/* Botón del header sobre el degradado.
   Más bajo que el botón general: la barra es compacta y 44px la engordaban.
   Se queda en 36px, que sigue siendo un objetivo táctil cómodo, y vuelve a
   44px en móvil, donde el dedo es el que apunta. */
.nav .boton { min-height: 36px; padding: calc(.45rem - 1px) 1.15rem .45rem; }
@media (max-width: 56rem) {
  .nav .boton { min-height: 44px; padding: calc(.72rem - 1px) 1.5rem .72rem; }
}
.nav .boton--solido { background: var(--hueso); color: var(--tinta); }
.nav .boton--solido:hover { background: #e6e4df; color: var(--tinta); }

/* ==========================================================================
   1 · Hero — foto de ambiente a sangre, 75vh
   La foto es el fondo completo. Un velo claro degradado desde la izquierda
   sostiene la lectura del texto sin lavar la imagen del lado derecho.
   ========================================================================== */

.hero {
  position: relative;
  height: 80svh;
  min-height: 32rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* El contenido va centrado, así que un padding abajo lo sube la mitad:
     60px aquí = 30px de aire ganado sobre el selector de destacadas. */
  padding: var(--nav) 0 60px;
  background: #16171a;
}

/* ---- Capas del carrusel: una por foto, en cruce de opacidad ---- */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .9s ease;
  /* La franja de arriba nunca se ve: la tapa el header opaco. Así que la foto
     se pinta solo por debajo de él, y el recorte de `cover` se calcula contra
     la zona visible de verdad. Sin esto, el piloto de la V-Strom —que está a
     un 2,5% del borde superior del archivo— caía siempre detrás del header.
     Los 8px de menos son solape: evitan una línea del fondo del hero. */
  padding-top: calc(var(--alto-nav) - 8px);
  background-origin: content-box;
  background-clip: content-box;
}
/* Las fotos se declaran acá y no en un style inline: una url() dentro de una
   custom property se resuelve contra la hoja que la consume, no contra el HTML. */
/* El encuadre se sube: con el anterior, en ventanas bajas el casco del piloto
   quedaba fuera del recorte. El valor es el porcentaje del sobrante vertical
   que se descarta por arriba, así que menos = se ve más cielo y más piloto. */
.hero__slide--himalayan { background-image: url('../img/ambiente-himalayan.webp?v=2'); background-position: center 31%; }
.hero__slide--vstrom    { background-image: url('../img/ambiente-vstrom.webp');      background-position: 62% 0; }
/* La YZ va con el piloto centrado en el archivo; se desplaza a la derecha
   para que no quede debajo del titular. */
.hero__slide--yz        { background-image: url('../img/motos/yz-450fx/accion.webp'); background-position: 62% 30%; }
.hero__slide[data-activo="true"] { opacity: 1; }

/* Velo oscuro: la foto queda íntegra, solo baja de luminosidad lo justo
   para que el texto blanco alcance contraste. Más denso a la izquierda,
   donde vive el texto; casi limpio a la derecha, donde está el piloto. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(10,10,12,.78) 0%,
      rgba(10,10,12,.62) 30%,
      rgba(10,10,12,.34) 55%,
      rgba(10,10,12,.18) 78%,
      rgba(10,10,12,.12) 100%),
    linear-gradient(to top, rgba(10,10,12,.35), transparent 45%);
}

.hero__envoltura {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--borde);
}

.hero__texto {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(.9rem, 2.2vh, 1.6rem);
  max-width: min(46rem, 62%);
}

/* Los bloques de texto se apilan en la misma celda del grid: así el alto
   lo fija el más largo y no hay saltos al cambiar de slide. */
.hero__contenidos { display: grid; width: 100%; }
.hero__contenidos > * {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(.7rem, 1.8vh, 1.2rem);
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.hero__contenidos > [data-activo="true"] { opacity: 1; visibility: visible; }

/* El cruce simultáneo de 0,55s dejaba los dos bloques superpuestos a media
   opacidad. Con el titular solo se leía como un fantasma; ahora que cada slide
   tiene sus propios botones, se ven dos pares de botones encimados y parece
   roto. Se ordena en todos los tamaños: el saliente se va en .28s y el
   entrante arranca cuando el anterior ya casi no está. */
.hero__contenidos > * { transition: opacity .28s ease, visibility .28s; }
.hero__contenidos > [data-activo="true"] {
  transition: opacity .4s ease .26s, visibility 0s .26s;
}


.hero__rotulo {
  font-family: var(--rotulo); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.82); font-weight: 500;
  display: flex; align-items: center; gap: .7rem; margin: 0;
}
.hero__rotulo::before { content: ""; width: 1.6rem; height: 2px; background: var(--naranja-cl); flex: none; }

.hero__titular {
  margin: 0;
  font-size: clamp(2rem, min(4.6vw, 7vh), 4.1rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* Una sola escala: las dos líneas pesan igual */
.hero__titular em {
  display: block; font-style: normal;
  color: #ffffff;
}

/* Línea de apoyo: lo concreto que el titular no dice — cuotas, estado,
   entrega. Va bajo el titular y sobre los botones. */
.hero__apoyo {
  margin: 0; max-width: 42ch;
  color: rgba(255,255,255,.86); font-size: clamp(.9375rem, 1.4vw, 1.0625rem); line-height: 1.5;
}
.hero__apoyo b { font-weight: 700; color: #fff; }
/* En móvil el titular ya ocupa cuatro líneas: la entrega se cae,
   está igualmente en el bloque del mapa. */
@media (max-width: 47.99rem) { .hero__apoyo-extra { display: none; } }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }

/* ---- Selector de destacadas ----
   Cambia lo que estás mirando; no lleva a ninguna parte. Por eso no tiene
   forma de botón: sin caja, sin borde, sin fondo. La activa se marca con un
   punto naranja a la izquierda. Con forma de píldora competía con el CTA. */
.hero__destacadas { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(1rem, 3vh, 2rem); }
/* Mismo contenedor que .hero__envoltura, no el del header: con el de 1500 el
   selector arrancaba 12px a la izquierda del titular. */
.hero__destacadas-fila {
  width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--borde);
}
.hero__destacadas-rotulo {
  margin: 0 0 .6rem;
  font-family: var(--rotulo); font-size: .5625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.hero__destacadas-lista { display: flex; gap: 1.6rem; flex-wrap: wrap; }

.destacada {
  display: flex; align-items: center; gap: .6rem;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.58); font: inherit; text-align: left;
  transition: color .2s ease;
}
.destacada:hover { color: rgba(255,255,255,.88); }
.destacada[aria-pressed="true"] { color: #fff; }

/* El punto ocupa su sitio siempre, aunque esté apagado: si apareciera solo
   al activarse, la fila entera se movería en cada cambio. */
.destacada__punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: transparent; transition: background-color .2s ease;
}
.destacada[aria-pressed="true"] .destacada__punto { background: var(--naranja-cl); }

.destacada img {
  width: 62px; height: 47px; flex: none;
  object-fit: contain; border-radius: 6px;
  background: #fff; padding: 3px;
  /* El blanco va puro. Antes iba al 92% y con la foto oscura detrás se veía
     gris. Y la inactiva se apaga desaturando la moto, no bajando la opacidad
     de la caja: eso volvía a ensuciar el blanco. */
  filter: grayscale(.4); transition: filter .2s ease;
}
.destacada:hover img { filter: grayscale(.15); }
.destacada[aria-pressed="true"] img { filter: none; }
.destacada__texto { display: flex; flex-direction: column; line-height: 1.2; }
.destacada__texto b { font-size: .875rem; font-weight: 700; letter-spacing: -.01em; }
.destacada__texto small {
  font-family: var(--rotulo); font-size: .5625rem;
  letter-spacing: .06em; text-transform: uppercase; opacity: .72;
}

/* Con el selector a la vista, flechas y puntos sobran: los tres hacían lo
   mismo y solo el selector dice qué moto es cada una. */
.hero__flecha, .hero__puntos { display: none !important; }

@media (max-width: 47.99rem) {
  .hero__destacadas-lista { gap: 1rem; }
  .destacada img { width: 50px; height: 38px; }
  .destacada__texto b { font-size: .8125rem; }

  /* El titular se partía en cinco líneas, y no por el cuerpo de la letra: la
     caja estaba limitada al 62% del ancho —198px de 375— porque en escritorio
     hay que dejarle sitio al piloto de la foto. En móvil el piloto está detrás
     del texto igual, así que la caja se suelta y el titular baja a tres. */
  .hero__texto { max-width: 100%; }

  /* Un solo destino en el hero: la tienda está en el menú, y justo debajo
     están las destacadas. El enlace secundario aquí solo sumaba ruido. */
  .hero__acciones .boton--fantasma { display: none; }

  /* El contenido va centrado, así que el padding de abajo lo sube la mitad:
     130px = 65 de subida, 35 más que el desktop. Sobraba aire entre el header
     y el rótulo (123px) y faltaba sobre las destacadas. */
  .hero { padding-bottom: 130px; }

  /* En móvil el recorte deja de ser vertical y pasa a ser horizontal: la foto
     se escala por alto y sobra ancho. Con el 62% pensado para escritorio se
     veía el follaje de la derecha y la moto quedaba fuera de cuadro. */
  .hero__slide--vstrom { background-position: 44% 0; }
  .hero__slide--yz { background-position: 46% 30%; }
}

/* En móvil los dos botones se apilaban a ancho completo y competían: mismo
   tamaño, misma forma, uno encima del otro. El primario se queda como botón
   y el secundario baja a enlace con flecha — una sola acción evidente y la
   otra a mano. De paso recorta el alto que sobraba bajo el titular. */
@media (max-width: 47.99rem) {
  /* Sin el margen negativo: se puso para pegar los botones al titular cuando
     no había línea de cuotas en medio. Con ella, el botón se montaba encima
     del texto — 5px de solape medidos. */
  .hero__acciones { gap: .9rem; margin-top: .2rem; align-items: center; }
  .hero__acciones .boton--claro { flex: 0 0 auto; }
  .hero__acciones .boton--fantasma {
    background: none; border: 0; padding: 0; min-height: 0;
    color: #fff; font-size: .9375rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: rgba(255,255,255,.35);
  }
  .hero__acciones .boton--fantasma:hover { background: none; color: #fff; }
}

/* ---- Flechas del carrusel: pegadas al borde, centradas en altura ---- */
.hero__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hero__flecha svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero__flecha:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.hero__flecha--izq { left: clamp(.6rem, 1.6vw, 1.5rem); }
.hero__flecha--der { right: clamp(.6rem, 1.6vw, 1.5rem); }

@media (max-width: 48rem) {
  .hero__flecha { width: 38px; height: 38px; }
  .hero__flecha svg { width: 14px; height: 14px; }
}

/* ---- Puntos del carrusel ----
   Solo en móvil: ahí las flechas quedan en los bordes, donde el pulgar no
   llega cómodo, y encima tapan la foto. Los puntos van centrados abajo y de
   paso informan cuántas imágenes hay, que la flecha no dice. */
.hero__puntos { display: none; }
@media (max-width: 47.99rem) {
  .hero__flecha { display: none; }
  .hero__puntos {
    position: absolute; left: 0; right: 0; bottom: 1.15rem;
    display: flex; justify-content: center; gap: .5rem; z-index: 3;
  }
  .hero__punto {
    width: 7px; height: 7px; padding: 0; border-radius: 999px;
    background: rgba(255,255,255,.4); border: 0; cursor: pointer;
    transition: background-color .25s ease, width .25s ease;
  }
  .hero__punto[aria-current="true"] { background: #fff; width: 20px; }
}


.hero__cifras {
  position: relative; z-index: 2;
  background: var(--tinta); color: var(--hueso);
  margin: 0;
}
.hero__cifras-fila {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(1.15rem, 2.6vh, 1.7rem) var(--borde);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 0;
}

.hero__cifra {
  display: flex; align-items: baseline; gap: .55rem;
  padding: 0 clamp(1.2rem, 2.8vw, 2.5rem);
  border-left: 1px solid rgba(255,255,255,.13);
}
.hero__cifra:first-child { border-left: none; }

.hero__cifra dd {
  margin: 0; order: 1;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.hero__cifra dt {
  order: 2;
  font-family: var(--rotulo); font-size: .625rem;
  letter-spacing: .16em; color: #8a8a90; text-transform: uppercase;
}

/* En móvil las cuatro cifras se apilaban en una columna con filetes sueltos
   y el número pegado a su etiqueta. Pasan a rejilla de dos, cada dato con el
   número encima y la etiqueta debajo: se lee de un vistazo. */
@media (max-width: 47.99rem) {
  .hero__cifras-fila {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1rem; justify-content: stretch;
  }
  .hero__cifra {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: 0; border-left: 0;
  }
  .hero__cifra dd { font-size: 1.35rem; line-height: 1.1; }
  .hero__cifra dt { font-size: .5625rem; letter-spacing: .14em; line-height: 1.35; }
}

.nav { transition: background-color .3s ease, border-color .3s ease; }

/* ==========================================================================
   Bandas y cabeceras de sección
   ========================================================================== */

.banda { padding: var(--banda) 0; }
.banda--papel { background: var(--papel); }
/* Variante pegada: continúa el bloque anterior sin corte de color */
.banda--pegada { padding-top: 0; }
.banda--tinta { background: var(--tinta); color: var(--hueso); }

.banda--linea { border-top: 1px solid rgba(255,255,255,.13); }
/* El marquee y servicio técnico forman una sola secuencia oscura, sin corte. */
.banda--marquee { padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 0; }

.banda__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.rotulo {
  font-family: var(--rotulo); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--grafito);
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-weight: 500;
}


.banda--tinta .rotulo { color: #a8a7a3; }


/* Punto de cierre: el mismo remate del logo. La firma de la marca al
   final de cada titular, no abriendo el rótulo. */
.banda__titulo::after {
  content: "";
  display: inline-block;
  width: .16em; height: .16em;
  border-radius: 999px;
  background: var(--naranja);
  margin-left: .12em;
  vertical-align: baseline;
}
.banda--tinta .banda__titulo::after { background: var(--naranja-cl); }

.banda__titulo {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.02;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
/* Variante compacta en mayúsculas para cabeceras de carril */
.banda__titulo--chico {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  max-width: none;
}

.banda__bajada { color: var(--grafito); max-width: 46ch; margin: .8rem 0 0; font-size: 1.0625rem; }
.banda--tinta .banda__bajada { color: #b9b7b2; }

/* ==========================================================================
   Carril horizontal de motos — sirve para ofertas y para marcas
   ========================================================================== */

.carril-caja { position: relative; }

/* Carril a sangre por la derecha: arranca alineado a la grilla y se estira
   hasta el borde de la ventana. La tarjeta cortada avisa que hay más.
   El desborde lo contiene la banda, no el viewport: usar 50vw generaba
   scroll horizontal porque vw incluye el ancho de la barra de scroll. */
.banda { overflow-x: clip; }

.carril-caja--sangra .carril {
  /* con overflow-x:clip en la banda, el 50vw ya no produce scroll */
  margin-right: calc(50% - 50vw);
  padding-right: var(--borde);
  /* el carril arrastra -.25rem de margen propio: se anula a la izquierda
     para que la primera tarjeta quede a plomo con el título */
  margin-left: 0;
  padding-left: .25rem;
}

.carril {
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1.25rem;
  margin: -.25rem -.25rem 0;
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carril { scroll-behavior: auto; } }

/* En táctil el snap obligatorio hace que el carril "tire" del dedo: cada
   arrastre pelea por encajar en la tarjeta siguiente y cuesta recorrerlo.
   Con proximity el desplazamiento es libre y solo ayuda a encajar si sueltas
   cerca de una posición. Se aplica a todos los carriles y al mosaico. */
@media (max-width: 62rem) {
  .carril, .mosaico {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

.moto {
  flex: 0 0 clamp(13.5rem, 19vw, 17.0625rem);
  scroll-snap-align: start;
  position: relative;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 6px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; cursor: pointer;
  overflow: hidden;
  transition: border-color .25s ease;
}

.moto:hover { border-color: var(--naranja); }

/* ---- Foto ---- */
.moto__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  /* Blanco puro: las fotos del catálogo vienen recortadas sobre blanco y
     cualquier tinte deja ver el borde del recorte. */
  background: #ffffff;
}
.moto__foto img {
  width: 100%; height: 100%; object-fit: contain; padding: .7rem;
  mix-blend-mode: multiply;
  transition: transform .45s cubic-bezier(.2,.8,.3,1);
}
.moto:hover .moto__foto img { transform: scale(1.05); }

.moto__sello {
  position: absolute; top: .65rem; left: .65rem; z-index: 2;
  /* Descuento: la caja no grita, el número sí. */
  background: #ffffff; color: var(--naranja);
  border: 1px solid rgba(196,65,0,.32);
  font-family: var(--rotulo); font-size: .6875rem; font-weight: 700;
  letter-spacing: .01em; padding: .3rem .5rem; border-radius: 3px;
}
/* Estado (nueva, recién llegada): calipso, para que no se confunda con precio */
.moto__sello--nuevo {
  background: var(--calipso); color: #ffffff; border-color: var(--calipso);
  text-transform: uppercase; letter-spacing: .08em; font-size: .625rem;
}

.moto__guardar {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--linea); border-radius: 999px;
  cursor: pointer; color: var(--grafito);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.moto:hover .moto__guardar, .moto__guardar:focus-visible { opacity: 1; transform: none; }
.moto__guardar svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.2; fill: none; }
.moto__guardar:hover { color: var(--naranja); border-color: var(--naranja); }
.moto__guardar[aria-pressed="true"] { color: var(--naranja); }
.moto__guardar[aria-pressed="true"] svg { fill: var(--naranja); }

/* ---- Datos ---- */
.moto__datos {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem; flex: 1;
  /* Sin filete: el cambio de blanco puro (zona de foto) a #f7f7f6 ya marca
     la separación por sí solo. */
  background: #f7f7f6;
}
.moto__marca {
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .16em;
  color: var(--gris); text-transform: uppercase; font-weight: 500;
}
.moto__nombre {
  font-weight: 700; letter-spacing: -.03em; font-size: 1.125rem; line-height: 1.15;
  /* ⚠️ Dos líneas SIEMPRE, aunque el nombre ocupe una.
     La altura de la tarjeta la fija el nombre más largo de su carril, y la
     del panel de marca la fija el carril: bastaba UN modelo de nombre largo
     —la Ninja 500 SE KRT ABS 2025— para que las pestañas de Kawasaki, Royal
     Enfield, Suzuki y Zontes midieran 430 px y las de Vespa y Benelli 409,
     de modo que la portada saltaba de tamaño al cambiar de pestaña.
     Medidos los 73 del catálogo: 72 caben en una línea y uno usa dos;
     ninguno llega a tres. Reservando dos, todas las tarjetas del sitio
     miden lo mismo y ningún modelo futuro con nombre largo vuelve a
     descuadrar la rejilla. */
  min-height: 2.3em;
}

/* Las fichas viven sobre la foto, esquina inferior izquierda: el sello de
   oferta ocupa la superior izquierda y el corazón la superior derecha, así
   que abajo queda libre. Sobre el blanco puro del recorte se leen igual. */
.moto__fichas {
  position: absolute; left: .65rem; bottom: .65rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.moto__ficha {
  display: inline-block;
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .02em;
  background: rgba(16,16,18,.06); color: var(--grafito);
  padding: .25rem .6rem; border-radius: 999px;
}
/* Color por tipo de dato: cilindrada en calipso, kilometraje en naranja */
.moto__ficha--cc { background: rgba(14,107,114,.1); color: var(--calipso); }
.moto__ficha--km { background: rgba(196,65,0,.09); color: var(--naranja); }
.moto__ficha svg { display: none; }

.moto__precios {
  margin-top: auto; padding-top: 1.15rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.moto__antes {
  font-family: var(--rotulo); font-size: .75rem; color: var(--gris);
  text-decoration: line-through; text-decoration-color: var(--gris);
  /* Reserva su línea aunque no haya oferta: ver el comentario de
     template-parts/moto-card.php. Un span vacío no ocupa alto por sí solo. */
  min-height: 1.6em;
}
.moto__precio {
  font-family: var(--rotulo);
  font-weight: 700; letter-spacing: -.03em; font-size: 1.2rem; line-height: 1.2;
}
.moto__cuota { font-family: var(--rotulo); font-size: .75rem; color: var(--grafito); }
.moto__cuota b { font-weight: 700; }

.moto__accion {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linea);
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinta);
}
.moto__accion svg {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.moto:hover .moto__accion { color: var(--naranja); }
.moto:hover .moto__accion svg { transform: translateX(4px); }

/* Flechas del carril */
.carril-flecha {
  position: absolute; top: 38%; transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hueso); border: 1px solid var(--linea);
  /* Como en vinacentroarriendo.cl: caja de esquina suave, no círculo, y el
     signo dibujado con el carácter tipográfico ‹ › en vez de un SVG. El
     trazo de la fuente tiene cuerpo; el SVG iba a stroke-width 1 y a 40px
     de caja se veía deslavado. */
  border-radius: 6px; cursor: pointer; color: var(--tinta);
  font-family: var(--sans); font-size: 17px; line-height: 1; padding: 0 0 2px;
  box-shadow: 0 8px 22px -12px rgba(16,16,18,.45);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.carril-flecha:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.carril-flecha[disabled] { opacity: 0; pointer-events: none; }
/* En los carriles de marca la flecha derecha va por dentro; en ofertas,
   las dos van a los costados como antes. */
.carril-flecha--der { right: clamp(.5rem, 1.5vw, 1.25rem); }
.carril-caja--sangra .carril-flecha--izq { left: -18px; }
.carril-caja--sangra .carril-flecha--der { right: 2.5rem; }

/* Relacionados de la ficha: el carril no va a sangre, así que las dos flechas
   pueden desbordar por fuera de la tarjeta y quedar centradas en altura, el
   mismo criterio que en las reseñas. */
.carril-caja--relacionados .carril-flecha { top: 50%; }
.carril-caja--relacionados .carril-flecha--izq { left: -20px; }
.carril-caja--relacionados .carril-flecha--der { right: -20px; }
@media (max-width: 62rem) { .carril-flecha { display: none; } }

/* ---- Panel de marca: pieza editorial + carril de producto ---- */
.marca-panel__grid { display: grid; gap: 1.25rem; align-items: stretch; }
/* Sin columnas declaradas, la única columna es `auto` y se estira al ancho
   del contenido del carril (2000px y pico), arrastrando con ella la portada.
   minmax(0,1fr) la obliga a ceñirse al ancho disponible y deja que el carril
   haga su propio scroll dentro. */
@media (max-width: 61.99rem) {
  .marca-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .marca-panel__grid > * { min-width: 0; }
  .marca-portada { min-height: 13rem; }
}
@media (min-width: 62rem) {
  .marca-panel__grid { grid-template-columns: 20rem minmax(0, 1fr); }
  /* El carril reserva 1.25rem abajo para el hueco de la barra de scroll, así
     que las tarjetas terminan antes que la fila. La portada copia ese margen
     para cerrar a la misma altura que ellas. (Arriba no hace falta: el carril
     anula su propio padding con un margen negativo.) */
  .marca-panel__grid .marca-portada { margin-bottom: 1.25rem; }
}
/* El carril de la marca también llega al borde derecho.
   Dentro de un grid, 50% se mide sobre la columna: hay que calcular la
   distancia real desde el borde del contenedor hasta el de la ventana. */
.marca-panel__grid .carril {
  margin-right: calc(-1 * (max(0px, (100vw - var(--ancho))) / 2 + var(--borde)));
  padding-right: var(--borde);
}

.marca-portada {
  position: relative; overflow: hidden; border-radius: 6px;
  background: #16171a; color: #fff; isolation: isolate;
  display: flex; align-items: flex-end;
  text-decoration: none; min-height: 16rem;
}
.marca-portada img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.3,1);
}
.marca-portada:hover img { transform: scale(1.06); }
.marca-portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,8,10,.92), rgba(8,8,10,.25) 55%, rgba(8,8,10,.1));
}
.marca-portada__texto { padding: 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.marca-portada__marca {
  font-family: var(--rotulo); font-size: .625rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--naranja-cl); margin-bottom: .35rem;
}
.marca-portada__n {
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
}
.marca-portada__t { font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.marca-portada__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  font-family: var(--rotulo); font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.85);
}
.marca-portada__cta svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.marca-portada:hover .marca-portada__cta { color: #fff; }
.marca-portada:hover .marca-portada__cta svg { transform: translateX(4px); }

/* Pestañas y conteo comparten fila y línea base */
.marcas-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}

/* Conteo de la marca activa */
.marca-conteo {
  margin: 0; font-family: var(--rotulo); font-size: .8125rem;
  color: var(--gris); white-space: nowrap;
}
.marca-conteo b {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--tinta); margin-right: .25rem;
}

/* ==========================================================================
   Pestañas de marca
   ========================================================================== */

.marcas-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.marca-tab {
  font: inherit; font-size: .875rem; font-weight: 500;
  padding: calc(.55rem - 1px) 1.1rem .55rem;
  background: transparent; color: var(--grafito);
  border: 1px solid var(--linea); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.marca-tab:hover { border-color: var(--grafito); color: var(--tinta); }
.marca-tab[aria-selected="true"] {
  background: var(--tinta); color: var(--hueso); border-color: var(--tinta); font-weight: 700;
}


/* ==========================================================================
   Tipos de uso — índice tipográfico, sin iconos
   ========================================================================== */

.usos { border-top: 1px solid rgba(255,255,255,.12); }

.uso {
  display: grid;
  grid-template-columns: 3.5rem minmax(0,1fr) auto;
  align-items: center; gap: 1.25rem;
  padding: clamp(.9rem, 2.4vw, 1.5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  text-decoration: none; color: inherit; cursor: pointer;
  position: relative; overflow: hidden;
  transition: padding-left .3s cubic-bezier(.2,.8,.3,1);
}
.uso:hover { padding-left: 1.25rem; }

.uso__n {
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .16em;
  color: #6f6f74; font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.uso:hover .uso__n { color: var(--naranja-cl); }

.uso__nombre {
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  text-transform: uppercase;
  transition: color .3s ease, opacity .3s ease;
}
.uso:hover .uso__nombre { color: var(--naranja-cl); }

.uso__meta {
  display: flex; align-items: center; gap: 1.25rem;
  font-family: var(--rotulo); font-size: .75rem; color: #8a8a90;
  white-space: nowrap;
}
.uso__meta svg {
  width: 20px; height: 20px; stroke: currentColor; stroke-width: 1; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateX(-6px); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.uso:hover .uso__meta { color: var(--hueso); }
.uso:hover .uso__meta svg { transform: translateX(0); opacity: 1; }

@media (max-width: 40rem) {
  .uso { grid-template-columns: 2.5rem minmax(0,1fr); gap: .85rem; }
  .uso__meta { grid-column: 2; margin-top: .2rem; }
  .uso__meta svg { display: none; }
}

/* ==========================================================================
   Marquee de marcas
   ========================================================================== */

.marquee { overflow: hidden; position: relative; padding: 1.5rem 0 1.1rem; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--tinta), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--tinta), transparent); }

/* El desplazamiento lo mueve el JS, no una animación CSS: el keyframe iba a
   translateX(-50%), y ese 50% solo coincide con el punto de repetición si las
   dos mitades miden exactamente lo mismo. Con imágenes lazy que entran en
   distinto momento el ancho cambia bajo los pies de la animación y el bucle
   pega un salto — se veía sobre todo en móvil. El JS mide el ancho real de
   una mitad y reinicia justo ahí. */
.marquee__pista { display: flex; width: max-content; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
}

.marquee__pista img {
  height: 2rem; width: auto; margin: 0 clamp(1rem, 2.5vw, 2.25rem);
  filter: brightness(0) invert(1) opacity(.5);
  transition: filter .25s ease;
}
.marquee__pista img:hover { filter: brightness(0) invert(1) opacity(1); }


/* ==========================================================================
   Mosaico de categorías — una grande a la izquierda + cuatro
   ========================================================================== */

.mosaico {
  display: grid; gap: 14px;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(26rem, 38vw, 33rem);
}
.mosaico > :first-child { grid-row: span 2; }

@media (max-width: 62rem) {
  .mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 12rem); height: auto; }
  .mosaico > :first-child { grid-column: span 2; grid-row: span 1; height: 15rem; }
}
/* En móvil el mosaico deja de ser rejilla y pasa a carril: cinco banners
   apilados obligaban a un scroll largo para pasar de largo la sección. Con
   tres cuartos de ancho, la siguiente tarjeta asoma e invita a deslizar. */
@media (max-width: 62rem) {
  .mosaico {
    display: flex; gap: 1rem; height: auto;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 1.25rem;
    scrollbar-width: none;
    /* llega al borde de la ventana: el corte de la última avisa que hay más */
    margin-right: calc(-1 * var(--borde)); padding-right: var(--borde);
  }
  .mosaico::-webkit-scrollbar { display: none; }
  .mosaico > * {
    flex: 0 0 76%; height: 15rem; scroll-snap-align: start;
    grid-column: auto; grid-row: auto;
  }
  .mosaico > :first-child { flex-basis: 76%; height: 15rem; grid-column: auto; grid-row: auto; }
}
@media (max-width: 34rem) {
  .mosaico > *, .mosaico > :first-child { flex-basis: 78%; height: 13.5rem; }
}

/* Tarjeta de moto a tres cuartos del carril en móvil: antes ocupaba 62% y
   la segunda entraba casi entera, sin dejar claro cuál era la principal. */
@media (max-width: 47.99rem) {
  .carril .moto { flex: 0 0 76%; }
  .carril--resenas .resena { flex-basis: 76%; }
}

.categoria {
  position: relative; overflow: hidden; border-radius: 6px;
  background: #16171a; color: #fff;
  display: flex; align-items: flex-end;
  text-decoration: none; cursor: pointer; isolation: isolate; min-height: 0;
}
.categoria img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.3,1);
}
/* La foto se acerca y sube apenas: el movimiento es la respuesta al hover,
   no la aparición del CTA (que ahora está siempre visible). */
.categoria:hover img { transform: scale(1.07) translateY(-1.5%); }
.categoria::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,8,10,.9), rgba(8,8,10,.2) 55%, transparent);
}

.categoria__texto { padding: 1.1rem 1.25rem; width: 100%; display: flex; flex-direction: column; gap: .15rem; }
.categoria__n {
  font-family: var(--rotulo); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
.categoria__nombre {
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.035em; text-transform: uppercase; line-height: 1.05;
}
.categoria--grande .categoria__nombre { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.05em; }
.categoria--grande .categoria__n { font-size: .6875rem; }

.categoria__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem;
  font-family: var(--rotulo); font-size: .75rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: color .25s ease;
}
.categoria:hover .categoria__cta { color: #fff; }
.categoria__cta svg { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.categoria:hover .categoria__cta svg { transform: translateX(4px); }
.categoria__cta svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .categoria img { transition: none; }
  .categoria:hover img { transform: none; }
}

/* ==========================================================================
   Servicio técnico · financiamiento · ubicación
   ========================================================================== */

/* Dos paneles a sangre: foto y mensaje a la izquierda; agenda sobre un negro
   con profundidad a la derecha. Los rellenos exteriores respetan la misma
   grilla de 1400 px que el resto del sitio. */
.servicio-dividido {
  display: grid;
  grid-template-columns: 1fr;
  background: #070708;
  color: var(--hueso);
}
.servicio-dividido__foto,
.servicio-dividido__formulario {
  min-width: 0;
  padding: clamp(3.5rem, 6.6vw, 6rem) var(--borde);
}
.servicio-dividido__foto {
  position: relative;
  min-height: 31rem;
  display: flex;
  align-items: center;
  background: #111214 url('../img/servicio-taller-2.webp') center / cover no-repeat;
  isolation: isolate;
}
.servicio-dividido__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,7,9,.88) 0%, rgba(7,7,9,.64) 65%, rgba(7,7,9,.42) 100%),
    linear-gradient(0deg, rgba(7,7,9,.42), transparent 55%);
}
.servicio-dividido__texto { max-width: 37rem; color: #fff; }
.servicio-dividido__texto .rotulo,
.servicio-dividido__texto .banda__titulo,
.servicio-dividido__texto .banda__bajada { color: #fff; }
.servicio-dividido__formulario {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #050506;
  color: var(--blanco-calido);
}
.servicio-dividido__formulario::before {
  content: none;
}
.servicio-dividido__formulario .agenda {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 39rem;
}

@media (min-width: 56rem) {
  .servicio-dividido { grid-template-columns: 1fr 1fr; }
  .servicio-dividido__foto {
    padding-left: max(var(--borde), calc((100vw - var(--ancho)) / 2 + var(--borde)));
    padding-right: clamp(2rem, 4.5vw, 4.5rem);
  }
  .servicio-dividido__formulario {
    padding-left: clamp(2rem, 4.5vw, 4.5rem);
    padding-right: max(var(--borde), calc((100vw - var(--ancho)) / 2 + var(--borde)));
  }
}

/* En móvil el formulario dejaba de ser una pieza y pasaba a ser un bloque
   negro a sangre pegado bajo la foto. Aquí se le da cuerpo propio: sube unos
   centímetros para montarse sobre la imagen, deja aire a los lados y lleva
   esquina redondeada. Se lee como una tarjeta apoyada, no como otra franja. */
@media (max-width: 55.99rem) {
  /* La zona del formulario pasa a blanco: antes la sección era #070708 y la
     tarjeta #050506, negro sobre negro, y la tarjeta no se percibía apoyada.
     Sobre claro se lee la composición. */
  .servicio-dividido { background: var(--hueso); }
  .servicio-dividido__foto { min-height: 25rem; background-position: 58% center; }
  .servicio-dividido__formulario {
    background: transparent;
    padding: 0 var(--borde) 3rem;
    /* Se monta sobre la foto lo justo para leerse encima, dejando ~35px
       de aire respecto al botón de la foto. */
    margin-top: -3.25rem;
    position: relative; z-index: 2;
  }
  /* Espacio bajo el botón de la foto, que es contra lo que chocaba. */
  .servicio-dividido__texto { padding-bottom: 1.25rem; }
  .servicio-dividido__formulario .agenda {
    background: #050506;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 1.6rem 1.25rem 1.75rem;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
    max-width: none;
  }
}

.dos-columnas { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) { .dos-columnas { grid-template-columns: 1fr 1fr; } }

.pasos { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); }
.paso {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: baseline;
}
.paso__n { font-family: var(--rotulo); font-size: .625rem; color: var(--naranja-cl); letter-spacing: .14em; }
.paso__t { font-weight: 700; letter-spacing: -.02em; display: block; margin-bottom: .15rem; }
.paso__d { font-size: .9375rem; color: #b9b7b2; }

.sellos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sello {
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.22); padding: .45rem .8rem; border-radius: 3px; color: #d4d3d0;
}

/* ==========================================================================
   Agenda del taller — calendario y horas sobre la banda oscura.
   Reemplaza a los cuatro pasos en la columna derecha de servicio técnico.
   Sin backend: el día y la hora elegidos viajan escritos en el WhatsApp.
   ========================================================================== */

.agenda {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(.5rem, 1.4vw, 1rem) 0;
  box-shadow: none;
}
.agenda__cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}
.agenda__identidad { min-width: 0; }
.agenda__rotulo {
  font-family: var(--rotulo); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.58); margin: 0 0 .35rem;
}
.agenda__titulo {
  margin: 0;
  color: var(--blanco-calido);
}
/* El punto de cierre del titular va sobre el negro del formulario: le toca la
   versión clara del naranja, igual que en las bandas .banda--tinta. */
.agenda__titulo::after { background: var(--naranja-cl); }
.agenda__mes { display: flex; align-items: center; gap: .35rem; }
.agenda__mes-nombre {
  font-family: var(--rotulo); font-weight: 600; letter-spacing: .06em;
  font-size: .75rem; text-transform: uppercase;
  min-width: 11ch; text-align: center; color: var(--blanco-calido);
}
.agenda__nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.2); border-radius: 2px;
  color: var(--blanco-calido); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.agenda__nav svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agenda__nav:hover:not([disabled]) { background: var(--hueso); color: var(--tinta); border-color: var(--hueso); }
.agenda__nav[disabled] { opacity: .25; cursor: default; }

.agenda__progreso {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
/* Cada paso es una columna: el círculo arriba y la etiqueta debajo. Con el
   texto al lado, la línea salía del final de la etiqueta y los círculos
   quedaban sueltos; así la línea va siempre de círculo a círculo. */
.agenda__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--rotulo);
  font-size: .575rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.agenda__paso span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.agenda__paso i {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .6875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* La línea va del borde de un círculo al borde del siguiente. Como todos los
   pasos miden lo mismo, el centro del próximo está a un ancho de distancia:
   de 50%+radio hasta 150%-radio, o sea 100% menos dos radios. */
.agenda__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(50% + 15px);
  width: calc(100% - 30px);
  height: 1px;
  background: rgba(255,255,255,.14);
}

.agenda__paso--activo { color: var(--blanco-calido); }
.agenda__paso--activo i { background: #fff; border-color: #fff; color: var(--tinta); }

/* Completado: el número se apaga y en su lugar aparece el visto. */
.agenda__paso--completo { color: rgba(255,255,255,.62); }
.agenda__paso--completo i {
  background: rgba(255,255,255,.16);
  border-color: transparent;
  color: transparent;
}
.agenda__paso--completo i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 11px no-repeat;
}
.agenda__paso--completo::after { background: rgba(255,255,255,.28); }
.agenda__paso--completo b { color: rgba(255,255,255,.72); }
.agenda__paso--activo::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -1px;
  height: 2px;
  background: #fff;
}

.agenda__panel { min-height: 11.75rem; }
.agenda__panel[hidden] { display: none; }
.agenda__instruccion {
  margin: 0 0 .75rem;
  font-family: var(--rotulo);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.agenda__semana, .agenda__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.agenda__semana { margin-bottom: .45rem; }
.agenda__semana span {
  font-family: var(--rotulo); font-size: .55rem; letter-spacing: .14em;
  color: rgba(255,255,255,.38); text-align: center; text-transform: uppercase;
}

.agenda__dia {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--rotulo); font-size: .78rem; font-weight: 500; color: var(--blanco-calido);
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); border-radius: 2px;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.agenda__dia:hover:not([disabled]) { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.58); color: var(--blanco-calido); }
.agenda__dia[disabled] { color: rgba(255,255,255,.14); background: transparent; border-color: transparent; cursor: default; }
/* Hoy se marca con un punto blanco; el relleno completo queda reservado para
   el día elegido y así ambos estados siguen siendo fáciles de distinguir. */
.agenda__dia--hoy { position: relative; }
.agenda__dia--hoy::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
}
.agenda__dia[aria-pressed="true"] {
  background: #fff; color: #09090a;
  border-color: #fff; font-weight: 700;
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
}
.agenda__dia[aria-pressed="true"]::after { background: var(--tinta); }
.agenda__dia--vacio { pointer-events: none; }

.agenda__horas { margin: 0; padding: 0; }
.agenda__panel-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.agenda__volver {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,.58);
  font-family: var(--rotulo);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.agenda__volver:hover { color: var(--blanco-calido); }
.agenda__subrotulo {
  font-family: var(--rotulo); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blanco-calido); margin: 0;
}
.agenda__horas-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.agenda__hora {
  font-family: var(--rotulo); font-size: .7rem; font-weight: 500; color: var(--blanco-calido);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.15); border-radius: 2px;
  padding: .55rem .4rem; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.agenda__hora:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.agenda__hora[aria-pressed="true"] { background: #fff; color: var(--tinta); border-color: #fff; font-weight: 700; }

.agenda__nota { font-size: .75rem; color: rgba(255,255,255,.5); margin: 0 0 1rem; }
.agenda__confirmacion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.agenda__confirmacion[hidden] { display: none; }
.agenda__confirmacion-rotulo {
  margin: 1.2rem 0 .3rem;
  color: rgba(255,255,255,.58);
  font-family: var(--rotulo);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.agenda__resumen {
  margin: 0;
  color: var(--blanco-calido);
  /* Medido: a 23px el resumen ocupaba 691px en una caja de 584 y se partía
     en dos líneas, estirando el panel. A 16px cabe con holgura incluso
     con el modelo y el mes más largos del catálogo. */
  font-size: clamp(.875rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  /* Sin capitalize: servía cuando el resumen empezaba por el nombre de la
     persona, pero con la moto delante producía "15 De Agosto" y "10:30 Hrs". */
}
.agenda__cta {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
  background: #fff;
  color: #09090a;
  border-color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.agenda__cta:hover { background: #fff; color: #09090a; border-color: #fff; }
.agenda__cta[aria-disabled="true"] { opacity: .35; pointer-events: none; }

@media (max-width: 29rem) {
  .agenda__cabeza { align-items: flex-start; }
  .agenda__mes { width: 100%; justify-content: space-between; }
  .agenda__horas-lista { grid-template-columns: repeat(3, 1fr); }
  .agenda__paso b { display: block; margin: 0 0 .15rem; }
}

/* Versión esencial: el formulario se apoya en jerarquía y espacio, no en
   cajas ni adornos. Cada paso sustituye por completo al anterior. */
.agenda__cabeza {
  align-items: flex-end;
  flex-wrap: nowrap;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.agenda__titulo {
  max-width: none;
}
.agenda__titulo::after { display: none; }
.agenda__encabezado-titulo { min-width: 0; }
.agenda__pildora {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .9rem;
  padding: .25rem .6rem;
  border: 0;
  border-radius: 999px;
  /* Misma familia que la ficha de cilindrada (.moto__ficha--cc), traducida a
     fondo oscuro: allá es calipso al 10% sobre blanco con letra --calipso;
     aquí el calipso tiñe el negro y la letra usa --calipso-cl. Mismo criterio
     que --naranja / --naranja-cl. Un relleno claro sobre este casi-negro se
     leería como un parche pegado. */
  background: rgba(14,107,114,.18);
  color: var(--calipso-cl);
  font-family: var(--rotulo);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  text-transform: uppercase;
}
.agenda__pildora svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* En el formulario dividido los cuatro pasos siguen visibles: es el mapa de
   dónde está el usuario. La etiqueta se esconde solo donde los cuatro textos
   no caben; los círculos con el visto bastan para ubicarse. */
.agenda__progreso { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (max-width: 30rem) {
  .agenda__paso span { display: none; }
}
.agenda__panel { min-height: 9.5rem; }
.agenda__datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.agenda__campo { display: block; min-width: 0; }
.agenda__campo span {
  display: block;
  margin-bottom: .35rem;
  color: rgba(255,255,255,.5);
  font-family: var(--rotulo);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.agenda__campo input {
  width: 100%;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--blanco-calido);
  font: inherit;
  transition: border-color .2s ease;
}
/* Los select del paso 1 llevan el mismo tratamiento de línea que los input:
   sin caja, solo el subrayado, con la flecha dibujada aparte. */
.agenda__campo select {
  width: 100%; height: 2.5rem; padding: 0 1.3rem 0 0;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-radius: 0;
  outline: 0; color: var(--blanco-calido); font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right 0 center / 13px;
  transition: border-color .2s ease;
}
/* El desplegable lo pinta el sistema: sobre fondo claro, con texto oscuro. */
.agenda__campo select option { color: var(--tinta); background: #fff; }

/* Un select sin elegir es un placeholder y debe leerse como tal. Con
   `required` y la primera opción vacía, el propio navegador lo marca
   :invalid, así que no hace falta JS. El mismo gris que los placeholder de
   los input, que antes venía del navegador y no coincidía. */
.agenda__campo input::placeholder { color: rgba(255,255,255,.46); opacity: 1; }
.agenda__campo select:invalid { color: rgba(255,255,255,.46); }
.agenda__campo span i {
  font-style: normal; opacity: .6;
}
.agenda__campo input:hover, .agenda__campo select:hover { border-color: rgba(255,255,255,.42); }
.agenda__campo input:focus, .agenda__campo select:focus { border-color: #fff; }

/* Paso 4: los tres datos, con el correo a lo ancho porque va solo. */
.agenda__datos-campos {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem;
  margin: 1.4rem 0 .3rem;
}
.agenda__campo--ancho { grid-column: 1 / -1; }
@media (max-width: 34rem) { .agenda__datos-campos { grid-template-columns: 1fr; } }
.agenda :focus-visible { outline-color: #fff; }
.agenda__continuar {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
  margin-top: .35rem;
}
.agenda__calendario-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agenda__instruccion { margin: 0; color: rgba(255,255,255,.62); }
.agenda__mes { width: auto; gap: .2rem; }
.agenda__mes-nombre { font-size: .68rem; color: rgba(255,255,255,.7); }
.agenda__nav {
  width: 25px;
  height: 25px;
  background: transparent;
  border: 0;
}
.agenda__nav:hover:not([disabled]) { background: rgba(255,255,255,.08); color: #fff; }
.agenda__semana { margin-bottom: .25rem; }
.agenda__semana span { color: rgba(255,255,255,.32); }
.agenda__semana,
.agenda__dias { gap: .2rem; }
.agenda__dia {
  aspect-ratio: auto;
  height: 2.4rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
}
.agenda__dia:hover:not([disabled]) {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.35);
}
.agenda__dia[disabled] { background: transparent; border-color: rgba(255,255,255,.035); }
.agenda__dia[aria-pressed="true"] {
  background: #fff;
  color: #09090a;
  border-color: #fff;
  box-shadow: none;
}
.agenda__dia--hoy::after { bottom: 3px; width: 2px; height: 2px; }
.agenda__panel-cabeza { margin-bottom: 1.25rem; }
.agenda__subrotulo { color: rgba(255,255,255,.62); }
.agenda__nota { margin-bottom: 1rem; }
.agenda__horas-lista { gap: .35rem; }
.agenda__hora {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
}
.agenda__hora:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.5); }
.agenda__confirmacion-rotulo { margin-top: 1.5rem; }
.agenda__cta { box-shadow: none; }

@media (max-width: 29rem) {
  .agenda__cabeza { align-items: flex-end; }
  .agenda__mes { width: auto; }
  .agenda__paso b { display: inline; margin: 0 .35rem 0 0; }
  .agenda__datos { grid-template-columns: 1fr; }
  .agenda__continuar { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda__dia, .agenda__hora, .agenda__nav { transition: none; }
}

/* ==========================================================================
   Reseñas de Google — prueba social bajo la ubicación
   El logo de Google va con sus colores oficiales y las estrellas en su
   dorado: es el código visual que hace que el bloque se lea como reseñas
   verificadas y no como testimonios escritos por la casa.
   ========================================================================== */

.resenas__cabeza { align-items: end; }
.resenas__nota { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.resenas__google svg { width: 18px; height: 18px; display: block; }
.resenas__estrellas { display: inline-flex; gap: 1px; }
.resenas__estrellas svg { width: 15px; height: 15px; fill: #fbbc05; }
.resenas__score { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.resenas__conteo { font-size: var(--t-nota); color: var(--gris); }

/* Carril de cuatro visibles. El ancho se calcula sobre el contenedor menos
   los tres huecos, así entran exactamente cuatro y la quinta asoma al
   desplazar. Alto fijo para que la fila no baile según lo que escribió cada
   cliente: lo que no cabe sigue en el diálogo. */
.carril--resenas { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
/* El carril general lleva .25rem de padding lateral (para que no se corte la
   sombra de las tarjetas de moto). Aquí no hay sombra y ese padding dejaba la
   primera reseña 4px adentro respecto al resto del sitio: se quita y la
   tarjeta cae justo en el borde del contenido. */
.carril--resenas { padding-left: 0; margin-left: 0; }
.carril--resenas .resena {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
  scroll-snap-align: start;
  height: 15.5rem;
}
@media (max-width: 62rem) {
  .carril--resenas .resena { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 40rem) {
  .carril--resenas .resena { flex-basis: 76%; }
}

/* Las flechas montan el borde: media caja fuera y media dentro. Así no se
   apoyan sobre el texto de la reseña y siguen leyéndose como parte del
   carril. Con 40px de caja, -20px las parte por la mitad exacta. */
.carril-caja--resenas { overflow: visible; }
.carril-caja--resenas .carril-flecha--izq { left: -20px; }
.carril-caja--resenas .carril-flecha--der { right: -20px; }
/* El 38% general está calculado para las tarjetas de moto, donde alinea con
   la foto. Aquí las tarjetas son un bloque parejo: centro real. */
.carril-caja--resenas .carril-flecha { top: 50%; }

/* Tres líneas exactas con elipsis. Antes iba a cuatro, pero en la tarjeta
   solo caben tres y media: el overflow cortaba la última por la mitad en
   vez de rematarla con puntos suspensivos. */
.resena__texto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.resena__mas {
  align-self: flex-start; margin-top: auto;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .8125rem; font-weight: 700; color: var(--naranja);
  cursor: pointer;
  transition: color .2s ease;
}
.resena__mas:hover { color: var(--tinta); }

/* ---- Diálogo de reseña completa ---- */
.resena-modal {
  width: min(34rem, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: 8px;
  background: var(--hueso); color: var(--tinta);
  box-shadow: 0 30px 80px -30px rgba(16,16,18,.55);
}
.resena-modal::backdrop { background: rgba(10,10,12,.55); backdrop-filter: blur(2px); }
.resena-modal__caja { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; }
.resena-modal__cerrar {
  position: absolute; top: .75rem; right: .75rem;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linea); border-radius: 6px;
  font: inherit; font-size: 20px; line-height: 1; color: var(--gris); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.resena-modal__cerrar:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.resena-modal__texto { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--grafito); }
@media (prefers-reduced-motion: no-preference) {
  .resena-modal[open] { animation: resenaEntra .22s cubic-bezier(.2,.8,.3,1); }
}
@keyframes resenaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Al revés que el resto del sitio: la banda queda blanca y son las tarjetas
   las que llevan el gris. Sin borde — con fondo propio, la caja ya se define
   sola y el filete solo ensuciaría el contorno. */
.resena {
  display: flex; flex-direction: column; gap: .8rem;
  background: #f7f7f6; border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.35rem 1.85rem;
}
.resena__top { display: flex; align-items: center; gap: .7rem; }
.resena__avatar {
  width: 36px; height: 36px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinta); color: var(--hueso);
  font-family: var(--rotulo); font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
}
/* Una línea: un nombre largo ocupando dos dejaba menos texto visible en
   esa tarjeta que en las demás, con el alto fijo del carril. */
.resena__nombre {
  display: block; font-weight: 700; letter-spacing: -.02em; font-size: .9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resena__fecha { display: block; font-size: .8125rem; color: var(--gris); }
.resena__estrellas { display: inline-flex; gap: 1px; }
.resena__estrellas svg { width: 14px; height: 14px; fill: #fbbc05; }
.resena__texto { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--grafito); }

.resenas__pie { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; display: flex; justify-content: center; }

@media (max-width: 46rem) {
  .resenas__cabeza { align-items: start; }
}

.cuota-caja {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.cuota-caja__valor {
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1;
}
.cuota-caja__valor span { color: var(--naranja); }
.cuota-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.cuota-fila:last-of-type { border-bottom: none; }
/* Acá sí: las filas del simulador forman columna y deben alinearse */
.cuota-fila b { font-variant-numeric: tabular-nums; }
.cuota-nota { font-size: .75rem; color: var(--gris); }

/* ========================================================================== 
   Visítanos — mapa protagonista y ficha oscura continua
   ========================================================================== */
.visita {
  padding: var(--banda) 0;
  background: var(--papel);
}
.visita__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 31rem);
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.visita__cabeza .banda__titulo {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.visita__bajada {
  margin: .7rem 0 0;
  max-width: 46ch;
  color: var(--grafito);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Las rutas viven ahora en la cabecera, sobre fondo claro: se deshace el
   tratamiento blanco-sobre-negro y se compactan. Sin "abrir ubicación" ni
   "navegar ahora": el logo y el nombre ya dicen lo que hace cada uno, y la
   etiqueta de delante da el contexto una sola vez. */
.visita__cabeza .visita__rutas {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .55rem; flex-wrap: wrap; align-self: end;
}
.visita__rutas-titulo {
  margin: 0 .15rem 0 0;
  font-family: var(--rotulo); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.visita__cabeza .ruta {
  flex: 0 0 auto; padding: 7px 10px; gap: .45rem;
  background: var(--hueso); border-color: var(--linea); color: var(--tinta);
}
.visita__cabeza .ruta b { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.visita__cabeza .ruta__icono { width: 18px; height: 18px; }
.visita__cabeza .ruta:hover { background: var(--papel); border-color: var(--gris); }

@media (max-width: 47.99rem) {
  .visita__cabeza .visita__rutas { justify-content: flex-start; }
}
.visita__composicion {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, .85fr);
  min-height: 34rem;
  background: var(--tinta);
  border-radius: 6px;
  overflow: hidden;
}
.visita__mapa { min-width: 0; min-height: 28rem; overflow: hidden; background: #f7f7f6; }
.visita__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 34rem;
  border: 0;
  /* Mapa a color: el gris total lo apagaba y el bloque de datos, que ya es
     oscuro y sobrio, aporta suficiente calma al conjunto. */
  filter: saturate(.92);
}
.visita__datos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  color: var(--blanco-calido);
  background: #0a0a0c;
}
.visita__datos::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* La huella de barro es textura, no objeto: cubre la caja entera en vez de
     posarse en una esquina como hacía la rueda. La máscara diagonal deja
     limpia la zona superior izquierda, que es donde va el texto. */
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background: url('../img/barro-fondo.webp') center / cover no-repeat;
  filter: brightness(.7) contrast(1.08);
  -webkit-mask-image: linear-gradient(135deg, transparent 4%, rgba(0,0,0,.42) 38%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 4%, rgba(0,0,0,.42) 38%, #000 100%);
}
.visita__datos > * { position: relative; z-index: 1; }
.visita__etiqueta {
  margin: 0 0 .65rem;
  color: var(--blanco-calido);
  font-family: var(--rotulo);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.visita__direccion {
  color: var(--blanco-calido);
  font-family: var(--sans);
  font-variant-numeric: proportional-nums;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.visita__contactos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.visita__contactos a {
  min-width: 0;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}
.visita__contactos a + a { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.13); }
.visita__contactos span,
.visita__contactos strong { display: block; }
.visita__contactos span {
  margin-bottom: .25rem;
  color: rgba(255,255,255,.4);
  font-family: var(--rotulo);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.visita__contactos strong {
  overflow: hidden;
  color: var(--blanco-calido);
  font-family: var(--sans);
  font-variant-numeric: proportional-nums;
  font-size: .78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visita__contactos a:hover strong { color: var(--blanco-calido); }
.visita__horario table { width: 100%; border-collapse: collapse; }
.visita__horario th,
.visita__horario td {
  padding: .48rem 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: var(--sans);
  font-size: .75rem;
}
.visita__horario th { color: var(--blanco-calido); font-weight: 400; text-align: left; }
.visita__horario td { color: var(--blanco-calido); font-variant-numeric: proportional-nums; text-align: right; }
/* ---- Rutas: Google Maps y Waze en vez de un único "Cómo llegar" ----
   Los iconos son los logotipos oficiales que dejó el cliente, reducidos a
   64px (se muestran a 26). Traen su propio color, así que aquí no se les
   toca el relleno. */
.visita__rutas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ruta {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  color: var(--blanco-calido); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.ruta:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.32); }
.ruta__icono { flex: none; width: 26px; height: 26px; display: inline-flex; }
.ruta__icono img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ruta__texto { display: flex; flex-direction: column; min-width: 0; }
.ruta__texto b { font-size: .82rem; font-weight: 700; letter-spacing: -.01em; }
.ruta__texto small {
  font-family: var(--rotulo); font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
@media (max-width: 34rem) { .visita__rutas { grid-template-columns: 1fr; } }

.visita__cta { width: 100%; justify-content: center; }

@media (max-width: 62rem) {
  .visita__cabeza { grid-template-columns: 1fr; }
  .visita__bajada { max-width: 42rem; }
  .visita__composicion { grid-template-columns: 1fr; }
  .visita__mapa iframe { min-height: 26rem; }
}

@media (max-width: 34rem) {
  .visita__datos { padding: 1.5rem var(--borde) 2rem; }
  .visita__contactos { grid-template-columns: 1fr; }
  .visita__contactos a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .visita__horario th, .visita__horario td { font-size: .68rem; }
}

/* ==========================================================================
   WhatsApp flotante
   ========================================================================== */

.wa-flota {
  position: fixed; right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 60;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(16,16,18,.45), 0 3px 10px -4px rgba(16,16,18,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-flota svg { width: 28px; height: 28px; fill: currentColor; }
.wa-flota:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(16,16,18,.5), 0 4px 12px -4px rgba(16,16,18,.35);
}
.wa-flota:active { transform: translateY(0); }

@media (max-width: 48rem) {
  .wa-flota { width: 50px; height: 50px; }
  .wa-flota svg { width: 25px; height: 25px; }
}

/* ==========================================================================
   Pie
   ========================================================================== */

.pie { background: var(--tinta); color: var(--blanco-calido); padding: clamp(3rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.pie__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pie__marca { font-size: 1.5rem; color: var(--blanco-calido); }
/* El mismo remate naranja que cierra la marca en la cabecera. */
.pie__marca .eje::after {
  content: "";
  display: inline-block;
  width: .2em; height: .2em;
  border-radius: 999px;
  background: var(--naranja-cl);
  margin-left: .1em;
  vertical-align: baseline;
}
/* CHICUREO va más pegado al wordmark que en el uso general de .localizador. */
.pie__marca .localizador { margin-top: .28em; }
.pie h3 { font-size: var(--t-micro); font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blanco-calido); margin: 0 0 .9rem; font-weight: 500; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: var(--t-nota); }
/* Mini mapa del pie, con las medidas de vinacentroarriendo.cl: 240×150 y
   radio 6px. No lleva el desaturado del mapa grande — a este tamaño el color
   es lo único que lo hace legible de un vistazo. */
.pie__mapa {
  display: block; width: 100%; max-width: 240px; height: 150px;
  border: 0; border-radius: 6px;
}
.pie a { text-decoration: none; }
.pie a:hover { color: var(--naranja-cl); }
.pie__pagos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2c2d31;
}
.pie__pagos > p {
  margin: 0;
  color: var(--blanco-calido);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pie__pagos-logos { display: flex; align-items: center; gap: 1.5rem; }
.pie__pagos-logos span {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
}
/* Mismo criterio que vinacentro.cl: alto fijo para los dos y ancho libre, así
   quedan ópticamente parejos sin depender de la proporción de cada archivo. */
.pie__pagos-logos img { display: block; width: auto; height: 40px; object-fit: contain; }
.pie__legal {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #2c2d31;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  font-size: var(--t-micro); font-family: var(--sans); color: var(--blanco-calido);
}
.pie__cierre {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.5rem, 3.1vw, 2.75rem);
  min-height: clamp(6rem, 12.5vw, 11.5rem);
  /* El wordmark usa line-height .72: los glifos son más altos que su caja de
     línea y sobresalen por abajo. Con overflow:hidden en .pie, ese sobrante
     se recortaba. Medido: el glifo desborda 22px y faltaban 34px de colchón;
     estos 40px lo cubren y dejan aire. Va en el shorthand a propósito: una
     declaración suelta de padding-bottom la pisaría esta misma línea. */
  /* Los 4px de arriba: este bloque recorta con overflow:hidden y el glifo
     sobresale 1px de su caja de línea (ascenso real 111px contra 114,2 de
     line-height), así que se cortaba la cima de las letras. */
  padding: 4px var(--borde) 40px;
  color: var(--blanco-calido);
  line-height: .72;
  overflow: hidden;
}
.pie__cierre .eje {
  display: block;
  margin-bottom: clamp(.85rem, 1.8vw, 1.5rem);
  font-size: clamp(4.5rem, 15.2vw, 14.5rem);
  line-height: .72;
  white-space: nowrap;
  will-change: transform, opacity;
}

.sin-motion .pie__cierre .eje { transform: none !important; }

@media (max-width: 38rem) {
  .pie__pagos { align-items: flex-start; flex-direction: column; }
  .pie__pagos-logos { width: 100%; gap: 1.25rem; }
  .pie__pagos-logos span { width: auto; }
  .pie__pagos-logos img { height: 32px; }
  .pie__cierre { min-height: 7.25rem; padding: 0 .5rem 20px; }
  .pie__cierre .eje { font-size: 15.5vw; }
}

/* ---- Cortina del pie: el contenido se desliza encima y lo va descubriendo --
   El pie queda fijo al fondo de la ventana y detrás del contenido; el margen
   inferior de #contenido reserva exactamente el scroll que lo destapa. El
   fondo opaco de #contenido es lo que mantiene el pie oculto hasta el final.
   La clase la pone el JS, y solo si el pie cabe entero en la ventana: en
   móvil el wordmark gigante lo hace más alto que la pantalla y el efecto
   dejaría el cierre a medio ver.

   DESACTIVADA: el JS ya no pone la clase (CORTINA_ACTIVA = false en
   animacion.js). Para reactivarla, poner esa constante en true y descomentar
   las dos reglas de aquí abajo.

.pie-cortina #contenido {
  position: relative;
  z-index: 1;
  background: var(--hueso);
  margin-bottom: var(--alto-pie, 0px);
}
.pie-cortina .pie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
}
*/

/* ==========================================================================
   Estados de animación — se neutralizan sin JS y con reduced-motion
   ========================================================================== */

/* Reveals: el estado oculto solo existe si hay JS (la clase .js la pone el
   propio documento al cargar). Sin JS, todo se ve. */
.js .revelar, .js .carril > *, .js .uso {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1);
}
.js .revelar.visible, .js .carril > *.visible, .js .uso.visible {
  opacity: 1; transform: none;
}
.sin-motion .revelar, .sin-motion .carril > *, .sin-motion .uso {
  opacity: 1 !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js .revelar, .js .carril > *, .js .uso { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   Tienda — estructura de vinacentroarriendo.cl adaptada a la paleta propia
   Encabezado con migas y conteo, fila de filtros con selects (categoría,
   marca, orden) y rejilla de tarjetas con botón Agregar incorporado.
   ========================================================================== */

/* El .nav es fixed y no ocupa flujo: en la home lo descuenta el hero, pero
   una página sin hero se metería debajo. Aquí se descuenta a mano. */
.page-head { padding: calc(var(--alto-nav) + var(--banda) * .5) 0 0; }
.breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none;
  margin: 0 0 1.1rem; padding: 0;
  font-size: 13px; color: var(--grafito);
}
.breadcrumb a { color: var(--grafito); text-decoration: none; transition: color .15s ease; }
.breadcrumb a:hover { color: var(--tinta); }
.breadcrumb .bc-sep { opacity: .45; }
.breadcrumb .bc-current { color: var(--tinta); font-weight: 500; }

/* Los tres valores salen del prototipo de Vinacentro tal cual: título en
   mayúscula, 600 (no 700) y letra ligeramente abierta, no condensada. */
.page-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.page-title {
  margin: 0; font-family: var(--sans);
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);   /* 30px arriba */
  font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
}
.page-title-count { font-size: 14px; font-weight: 500; color: var(--grafito); }

.catalogo { padding: 0 0 var(--banda); }

.filters-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.filters-group { display: flex; gap: 16px; flex-wrap: wrap; }
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
/* La etiqueta va en la tipografía de texto (Satoshi), no en la de rótulo:
   Inter se veía más pesada de lo que pide el prototipo. */
.filter-field label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grafito);
}
.filter-field select {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--tinta);
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--linea); border-radius: 6px;
  background-color: var(--papel);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color .15s ease;
}
.filter-field select:hover { border-color: var(--gris); }
/* Sin anillo naranja: Chrome trata el clic en un select como foco de teclado,
   así que el outline saltaba con el ratón. El foco se marca oscureciendo el
   borde y con un halo tenue — se ve, pero no grita. */
.filter-field select:focus { outline: none; border-color: var(--tinta); }
.filter-field select:focus-visible {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(16, 16, 18, .09);
}

/* La tarjeta es la .moto de la home, sin cambios. Aquí solo se neutraliza lo
   que traía del carrusel (ancho fijo y snap) para que la rejilla mande. */
.catalog-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.catalog-grid .moto { flex: initial; scroll-snap-align: none; }
.catalog-grid .moto[hidden] { display: none; }

.catalog-vacio { text-align: center; color: var(--gris); padding: 3rem 0; }

@media (max-width: 75rem) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 62rem) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 47.99rem) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  /* La tarjeta se angosta y la moto crece hasta chocar con las píldoras de
     cilindrada y kilometraje. Se les reserva el espacio de abajo. */
  .moto__foto img { padding: .6rem .6rem 2.9rem; }
  .filters-row { flex-direction: column; align-items: stretch; }
  .filters-group { flex-direction: column; }
  .filter-field { min-width: 0; }
}

/* ==========================================================================
   Ficha de producto (PDP) — estructura pdp3- de Vinacentro con nuestra paleta
   Tres columnas: galería · identidad · caja de compra pegada.
   Todo lo de la "ficha pro" (miniaturas, banda ancha, pestañas) llega oculto
   y solo lo enciende el JS cuando el producto tiene contenido ampliado.
   ========================================================================== */

/* 40px bajo el header y 8px hasta la foto: los dos valores del prototipo. */
.pdp { padding: calc(var(--alto-nav) + 40px) 0 0; }
.pdp .breadcrumb { margin-bottom: 8px; }

.pdp3-grid {
  display: grid; grid-template-columns: 1fr 1fr 22.5rem;
  gap: 40px; align-items: start; padding: 24px 0 clamp(2.5rem, 5vw, 4.5rem);
}

/* ---- Columna 1: galería ---- */
.pdp3-gallery { display: flex; flex-direction: column; gap: 10px; }
.pdp3-img-main {
  position: relative; background: #fff;
  border: 1px solid var(--linea); border-radius: 10px;
  aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pdp3-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
/* Las fotos de estudio vienen recortadas sobre blanco: llenarlas a cuadro les
   come la rueda. Esas van contenidas; las de campaña llenan el marco. */
.pdp3-img-main img[data-encaje="contain"] { object-fit: contain; padding: 1.5rem; mix-blend-mode: multiply; }
.pdp3-img-main:hover img { transform: scale(1.05); }

.pdp3-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp3-thumb {
  width: 80px; height: 80px; flex: none; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--linea); border-radius: 6px;
  overflow: hidden; transition: border-color .15s ease;
}
.pdp3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp3-thumb img[data-encaje="contain"] { object-fit: contain; padding: .35rem; mix-blend-mode: multiply; }
.pdp3-thumb.es-activa, .pdp3-thumb:hover { border-color: var(--naranja); }

/* Métricas del prototipo (13px/800/5-11/radio 6). El color es el nuestro:
   naranja con texto blanco donde ellos usan su mostaza con tinta. */
.tag-discount {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--naranja); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 6px;
}

/* ---- Columna 2: identidad ---- */
.pdp3-info { padding-top: 4px; }
.pdp3-brand-label {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--naranja);
}
.pdp3-name {
  margin: 0 0 6px; font-size: clamp(18px, 2vw, 26px);
  font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
}
.pdp3-sku { margin: 0 0 20px; font-size: 12px; color: var(--grafito); font-variant-numeric: tabular-nums; }
.pdp3-divider { height: 1px; background: var(--linea); margin-bottom: 20px; }
.pdp3-specs-label {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grafito);
}
.pdp3-specs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pdp3-specs-table tr { border-bottom: 1px solid var(--linea); }
.pdp3-specs-table tr:last-child { border-bottom: none; }
.pdp3-specs-table td { padding: 10px 12px; vertical-align: top; }
.pdp3-specs-table td:first-child { width: 44%; font-weight: 600; background: var(--papel); }
.pdp3-specs-table td:last-child { color: var(--grafito); }
.pdp3-specs-table tr:first-child td:first-child { border-top-left-radius: 6px; }
.pdp3-specs-table tr:last-child  td:first-child { border-bottom-left-radius: 6px; }
.pdp3-nota { margin: 12px 0 0; font-size: 12px; color: var(--gris); }

/* ---- Columna 3: compra ---- */
.pdp3-commerce-outer { min-width: 0; }
.pdp3-commerce {
  position: sticky; top: calc(var(--alto-nav) + 1rem);
  background: var(--papel); border-radius: 10px; padding: 28px 24px;
}
.pdp3-price-normal-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.pdp3-price-label { font-size: 12px; font-weight: 600; color: var(--grafito); }
.pdp3-price-old { font-size: 14px; color: var(--grafito); text-decoration: line-through; }
.pdp3-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.pdp3-price-main { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; }
.pdp3-price-row .tag-discount { position: static; }
.pdp3-price-iva { margin: 0 0 16px; font-size: 12px; color: var(--grafito); }
.pdp3-stock-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 20px;
  font-size: 12.5px; font-weight: 600; color: #2a7038;
}
.pdp3-stock-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2a7038; flex: none; }

.pdp3-qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pdp3-qty-label { font-size: 13px; font-weight: 600; flex: none; }
.pdp3-qty {
  display: flex; align-items: center; height: 40px; background: var(--hueso);
  border: 1px solid var(--linea); border-radius: 6px; overflow: hidden;
}
.pdp3-qty-btn {
  width: 36px; height: 40px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 17px; color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.pdp3-qty-btn:hover { background: var(--linea); }
.pdp3-qty-val { width: 32px; text-align: center; font-size: 14px; font-weight: 600; user-select: none; font-variant-numeric: tabular-nums; }

.pdp3-buy, .pdp3-add {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  border-radius: 6px; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pdp3-buy { background: var(--tinta); color: var(--hueso); border: 1px solid var(--tinta); margin-bottom: 10px; }
.pdp3-buy:hover { background: var(--naranja); border-color: var(--naranja); }
.pdp3-buy.agregado { background: var(--naranja); border-color: var(--naranja); }
.pdp3-add { background: transparent; color: var(--tinta); border: 1px solid var(--linea); margin-bottom: 24px; }
.pdp3-add:hover { border-color: var(--tinta); }

/* Los dos verdes oficiales de WhatsApp: #128C7E (el oscuro) a #25D366 (el
   claro). El texto va en tinta y no en blanco porque el blanco sobre el verde
   claro da 1,98:1 y desaparece; en tinta da 4,6:1 en el extremo oscuro y
   9,6:1 en el claro, así que se lee en todo el recorrido del degradado. */
.pdp3-add--wa {
  gap: 9px; color: #fff; border-color: transparent;
  background: #1cba57;
}
.pdp3-add--wa:hover { border-color: transparent; background: #17a24b; }
.pdp3-add--wa svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

.pdp3-trust {
  list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12.5px; color: var(--grafito);
}
.pdp3-trust li { display: flex; align-items: center; gap: 9px; }
/* Iconos en vez de viñetas: el prototipo usa trazo de 2.2 a 14px. */
.pdp3-trust svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--tinta); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Cabecera de móvil: oculta por defecto, la enciende la consulta de abajo.
   Tiene que declararse ANTES, o la regla suelta pisa a la del media query. */
.pdp3-mobile-header { display: none; }
.pdp3-mobile-header .pdp3-sku { margin-bottom: 0; }

@media (max-width: 68.75rem) {
  .pdp3-grid { grid-template-columns: 1fr 1fr; }
  .pdp3-commerce-outer { grid-column: 1 / -1; }
  .pdp3-commerce { position: static; }
}
@media (max-width: 42.5rem) {
  .pdp3-grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp3-gallery { order: 1; }
  .pdp3-mobile-header { display: block; order: 2; }
  .pdp3-commerce-outer { order: 3; grid-column: auto; }
  .pdp3-info { order: 4; }
  /* En móvil el título ya salió arriba de la caja de compra: aquí sobra. */
  .pdp3-info .pdp3-brand-label,
  .pdp3-info .pdp3-name,
  .pdp3-info .pdp3-sku,
  .pdp3-info .pdp3-divider { display: none; }
  .pdp3-commerce { padding: 22px 18px; }
  .pdp3-thumb { width: 64px; height: 64px; }
}

/* ---- Banda a ancho completo (solo ficha ampliada) ---- */
.pdp-pano { position: relative; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); background: var(--tinta); }
.pdp-pano img { display: block; width: 100%; height: clamp(16rem, 42vw, 32rem); object-fit: cover; }
.pdp-pano__texto {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.5rem, 4vw, 3rem) 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color: var(--hueso);
}
.pdp-pano__titulo {
  margin: 0 0 .4rem; font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
.pdp-pano__bajada {
  margin: 0; max-width: 46ch; font-size: clamp(.875rem, 1.4vw, 1rem);
  line-height: 1.6; color: rgba(255,255,255,.82);
}

/* ---- Descripción y especificaciones ---- */
/* Este bloque y la banda de relacionados traían cada uno su var(--banda):
   sumados dejaban casi 190px de aire. Aquí queda un solo respiro, y la banda
   de abajo anula el suyo con banda--pegada. El valor se conserva por si el
   producto no tiene relacionados y la caja queda pegada al pie. */
.pdp-detalle { padding: 0 0 calc(clamp(2rem, 4vw, 3.5rem) + 10px); }
/* La misma .module-box del prototipo: descripción y especificaciones dentro
   de un contenedor gris, no sueltas sobre el fondo de la página. */
.pdp-detalle__caja {
  border-radius: 10px; background: var(--papel);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
/* La regla gris va como fondo y no como borde: el borde queda fuera de la
   caja de contenido, así que el subrayado de la pestaña activa —que se pinta
   por dentro— nunca podía alcanzarlo y quedaban dos líneas desalineadas.
   Como fondo, ambas ocupan la misma franja de 2px y el negro tapa al gris. */
.pdp-tab-nav {
  display: flex; margin-bottom: 28px;
  background: linear-gradient(to top, var(--linea) 2px, transparent 2px);
}
/* Sin pestañas, el título ocupa su lugar con la misma métrica: las dos
   fichas tienen que leerse como la misma página, no como dos plantillas. */
.pdp-detalle__titulo {
  position: relative; margin: 0 0 28px; padding: 0 18px 12px;
  font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--tinta); border-bottom: 2px solid var(--linea);
}
/* El mismo subrayado oscuro de la pestaña activa, del ancho del texto. */
.pdp-detalle__titulo::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: calc(100% - 18px); max-width: 8.5rem; height: 2.5px; background: var(--tinta);
}
.pdp-tab-btn {
  background: none; border: 0;
  padding: 12px 18px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--grafito);
  transition: color .15s ease;
}
/* El subrayado va como sombra interior y no como borde con margen negativo:
   en móvil la barra es un contenedor con overflow-x y recortaba los 2px que
   el borde sacaba fuera, así que la pestaña activa se quedaba sin línea. */
.pdp-tab-btn.es-activa { color: var(--tinta); box-shadow: inset 0 -2.5px 0 var(--tinta); }
.pdp-tab-btn:hover:not(.es-activa) { color: var(--tinta); }
@media (max-width: 42.5rem) {
  .pdp-tab-nav { overflow-x: auto; scrollbar-width: none; }
  .pdp-tab-nav::-webkit-scrollbar { display: none; }
  .pdp-tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 12px 14px; }
}
.pdp-tab-panel[hidden] { display: none; }
.pdp-desc-body p { margin: 0 0 16px; max-width: 72ch; font-size: 15px; line-height: 1.75; color: var(--grafito); }
.pdp-desc-body p:last-child { margin-bottom: 0; }

.pdp-specs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pdp-specs-table tr { border-bottom: 1px solid var(--linea); }
.pdp-specs-table tr:last-child { border-bottom: none; }
.pdp-specs-table td { padding: 10px 12px; vertical-align: top; }
.pdp-specs-table td:first-child { width: 44%; font-weight: 600; background: var(--papel); }
.pdp-specs-table td:last-child { color: var(--grafito); }

/* ==========================================================================
   Cotizador — dialogo del boton "Cotizar" del header
   Misma base que .resena-modal: <dialog> nativo, con ::backdrop propio.
   Los campos se pintan claros porque el dialogo va sobre fondo blanco, al
   reves que el formulario de agenda, que vive sobre negro.
   ========================================================================== */

.cotizador {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: 10px;
  background: var(--hueso); color: var(--tinta);
  box-shadow: 0 30px 80px -30px rgba(16,16,18,.55);
}
.cotizador::backdrop { background: rgba(10,10,12,.55); backdrop-filter: blur(2px); }
.cotizador__caja {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2rem);
}
.cotizador__cerrar {
  position: absolute; top: .9rem; right: .9rem;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linea); border-radius: 50%;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--grafito); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cotizador__cerrar:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.cotizador__rotulo {
  margin: 0; font-family: var(--rotulo); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--naranja);
}
.cotizador__titulo {
  margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700; letter-spacing: -.02em;
}
.cotizador__campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.cotizador__campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cotizador__campo--ancho, .cotizador__campos > .cotizador__precio { grid-column: 1 / -1; }
.cotizador__campo span {
  font-family: var(--rotulo); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grafito);
}
.cotizador__campo span i { font-style: normal; opacity: .6; }
.cotizador__campo input,
.cotizador__campo select {
  width: 100%; height: 2.6rem; padding: 0 .8rem;
  font: inherit; font-size: .875rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 6px;
}
.cotizador__campo select {
  padding-right: 2rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4640' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
.cotizador__campo select:disabled { color: var(--gris); cursor: not-allowed; }
.cotizador__campo input:focus, .cotizador__campo select:focus {
  outline: none; border-color: var(--tinta);
}
/* Precio del modelo elegido: dato real del catalogo, no un adorno. */
.cotizador__precio {
  margin: 0; padding: .6rem .8rem; border-radius: 6px;
  background: rgba(14,107,114,.09); color: var(--calipso);
  font-size: .8125rem;
}
.cotizador__precio b { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.cotizador__enviar { width: 100%; }

/* Apagado mientras el catálogo va en camino. El diálogo se abre antes que
   los datos —para no dejar la pulsación sin respuesta— y hasta que llegan
   no hay ninguna moto que cotizar. Mismo tratamiento que el botón del
   panel lateral cuando no se puede seguir. */
.cotizador__enviar[disabled] { opacity: .45; pointer-events: none; }
.cotizador__nota { margin: 0; font-size: .75rem; color: var(--gris); text-align: center; }

@media (max-width: 30rem) {
  .cotizador__campos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Panel lateral del carrito
   ========================================================================== */

.sidecart { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.sidecart.abierto { visibility: visible; }
.sidecart__velo {
  position: absolute; inset: 0; background: rgba(10,10,12,.5);
  opacity: 0; transition: opacity .3s ease;
}
.sidecart.abierto .sidecart__velo { opacity: 1; }
.sidecart__caja {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(24rem, 100%); background: var(--hueso);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
.sidecart.abierto .sidecart__caja { transform: none; }
.sidecart__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--borde); border-bottom: 1px solid var(--linea);
}
.sidecart__titulo { margin: 0; font-weight: 700; letter-spacing: -.02em; }
.sidecart__cerrar {
  width: 34px; height: 34px; background: none; border: 1px solid var(--linea);
  border-radius: 6px; font-size: 20px; line-height: 1; color: var(--gris); cursor: pointer;
}
.sidecart__cerrar:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.sidecart__lineas { flex: 1; overflow-y: auto; padding: 1rem var(--borde); }
.sidecart__vacio { color: var(--gris); font-size: .875rem; text-align: center; padding: 2.5rem 0; }
.sidecart__linea {
  display: grid; grid-template-columns: 80px 1fr auto; gap: .8rem; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--linea);
}
.sidecart__linea img { width: 80px; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.sidecart__datos { display: flex; flex-direction: column; min-width: 0; }
.sidecart__marca { font-family: var(--rotulo); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.sidecart__modelo { font-weight: 700; font-size: .875rem; letter-spacing: -.02em; }
.sidecart__precio { font-size: .8125rem; color: var(--grafito); }
.sidecart__quitar { background: none; border: 0; font-size: 18px; color: var(--gris); cursor: pointer; padding: .2rem; }
.sidecart__quitar:hover { color: var(--naranja); }
.sidecart__pie { padding: 1.25rem var(--borde); border-top: 1px solid var(--linea); }
.sidecart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1rem; }
.sidecart__total b { font-size: 1.25rem; letter-spacing: -.02em; }
.sidecart__ir { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .sidecart__caja, .sidecart__velo { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1fr 1.15fr; }
}

@media (max-width: 52rem) {
  /* Negro, como la barra: antes era blanco y los enlaces heredaban el
     color claro del header, así que el menú quedaba blanco sobre blanco. */
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #0d0d0f; border-bottom: 1px solid rgba(255,255,255,.12);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--borde) 1.25rem;
    z-index: var(--z-menu);
  }
  .nav__links.abierto { display: flex; }
  .nav__links li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav__links a:not(.boton) { color: rgba(255,255,255,.85); }
  .nav__links a:not(.boton):hover { color: #fff; border-bottom-color: transparent; }
  /* El CTA cerraba el menú a 12px del último enlace y a todo el ancho:
     se leía como un bloque pegado. Con aire propio y un filete arriba queda
     claro que es la acción, no un ítem más de la lista. */
  /* El CTA ya no ocupa todo el ancho: a tamaño de botón se lee como una
     acción y no como otra franja del menú. */
  /* Sin filete propio: el último enlace ya cierra con el suyo y se veían
     dos líneas seguidas. Basta el aire para separar la acción de la lista. */
  .nav__links li.nav__cta-li {
    border-bottom: none; border-top: 0;
    margin-top: 1.15rem; padding-top: 0;
  }
  /* En escritorio "Ver tienda" es un enlace mas del menu; aqui recupera
     forma de pastilla, que es como se aprobo el menu movil. Los estilos van
     explicitos porque el enlace ya no lleva la clase .boton. */
  .nav__links li.nav__cta-li .nav__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    width: auto; align-self: flex-start;
    min-height: 40px; padding: .55rem 1.25rem; font-size: .875rem;
    font-weight: 700; letter-spacing: -.01em;
    background: var(--hueso); color: var(--tinta);
    border-radius: 999px; border: 0;
  }
  .nav__links li.nav__cta-li .nav__cta:hover { background: #fff; color: #000; }
  /* Sin la clase .boton, la flecha perdia su tamaño y se iba a 25px,
     inflando la pastilla a 62px de alto. */
  .nav__links li.nav__cta-li .nav__cta svg {
    width: 17px; height: 17px; flex: 0 0 auto;
    stroke: currentColor; stroke-width: 1.1; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* En el desplegable sí la lleva. */
  .nav__cta svg { display: inline-block; }

  /* ---- Pie del menú: cómo llegar y con quién hablar ---- */
  .nav__pie {
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-direction: column; gap: .9rem;
  }
  .nav__pie-dato {
    margin: 0; font-size: .8125rem; line-height: 1.5; color: rgba(255,255,255,.6);
  }
  .nav__links .nav__pie-dato a { display: inline; color: rgba(255,255,255,.9); text-decoration: none; padding: 0; font-size: .9375rem; }
  .nav__pie-dato strong { display: block; color: #fff; font-weight: 700; font-size: .9375rem; }
  /* Aire propio: pegado al teléfono se leían como parte del mismo dato. */
  .nav__pie-rutas { display: flex; gap: .5rem; margin-top: .95rem; }
  /* Altura contenida y el contenido centrado de verdad: antes la caja crecía
     con el padding heredado y el logo quedaba contra el borde. */
  .nav__links .nav__pie-rutas a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 40px; height: 40px; padding: 0 .75rem;
    border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
    font-size: .8125rem; font-weight: 600; line-height: 1;
    color: #fff; text-decoration: none;
  }
  .nav__pie-rutas img { width: 17px; height: 17px; flex: none; display: block; }
  /* Solo los ítems de navegación llevan este alto; los del pie (teléfono y
     rutas) tienen el suyo, si no heredan el padding y crecen de más. */
  /* El CTA queda fuera: es pastilla, no fila de menu, y esta regla le
     borraba el padding lateral dejandolo de 62px de alto. */
  .nav__links > li > a:not(.boton):not(.nav__cta) { display: block; padding: .95rem 0; font-size: 1rem; }
  /* Sin borde: la caja la pegaba ópticamente al icono vecino. El margen
     la separa del grupo de tres, que son atajos, no navegación. */
  /* La caja mide 42px con un trazo de 20 centrado: 11px de aire interno que
     el logo (texto) no tiene, así que ópticamente parecía metida hacia
     adentro aunque la caja esté al mismo margen. El margen negativo saca ese
     aire y deja el trazo a plomo con el logo; el área táctil no se reduce. */
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; background: none; border: 0;
    margin-left: .45rem; margin-right: -10px;
    border-radius: 5px; cursor: pointer; color: #fff;
  }
  .solo-movil { display: block; }
  .nav__derecha { gap: .25rem; }
  .nav__loc { display: none; }
  .nav__pleca { display: none; }
  .nav__toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
  /* El menú sale del flujo al volverse desplegable: sin él, el grid de tres
     columnas dejaría el bloque derecho en la columna del centro. */
  .nav__fila { display: flex; justify-content: space-between; }
}

/* ==========================================================================
   AÑADIDO EN LA VERSIÓN WORDPRESS
   Lo único que no venía del prototipo. Va al FINAL del archivo a propósito:
   el orden en la cascada decide en caso de empate de especificidad, así que
   un override colocado más arriba lo pisaría la regla base de abajo.
   ========================================================================== */

/* El panel lateral ahora pide nombre y teléfono: el prototipo solo abría
   WhatsApp, pero aquí el lead se guarda, y un lead sin forma de responder no
   sirve de nada. Los campos reutilizan .cotizador__campo, que no está
   anidado bajo .cotizador y por tanto se hereda entero. */
.sidecart__campos { margin-bottom: 1rem; }

.sidecart__aviso {
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: #b3261e;
}

/* A3: el campo inválido se marca, y el JS le mueve el foco. */
.cotizador__campo input.is-invalid,
.cotizador__campo select.is-invalid {
  border-color: #b3261e;
  background: #fdf3f2;
}

/* El botón de enviar se apaga con la lista vacía. */
.sidecart__ir[disabled] { opacity: .45; pointer-events: none; }

/* Solo para lectores de pantalla.
   Lo usa el <h1> de la ficha de producto, que va fuera de las dos columnas
   que el diseño alterna por ancho: dentro de cualquiera de ellas habría un
   viewport entero sin encabezado. */
.ss-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- La barra de administración de WordPress ----
   El .nav es `fixed; top:0`, así que sin esto queda DEBAJO de la barra de
   admin (que también es fixed en top:0) y encima se descuadra el hero: el
   contenido baja 32px por el `margin-top` que mete WordPress, pero el header
   no, y entre el final del header y donde empieza a pintarse la foto asoman
   27px del fondo oscuro del hero — la «línea negra».
   Solo lo ve quien tiene sesión iniciada, que es justo quien revisa el sitio. */
body.admin-bar .nav { top: 32px; }

@media screen and (max-width: 782px) {
  /* En móvil la barra de admin mide 46px y NO es fija: se va con el scroll.
     Por eso aquí el header arranca debajo de ella pero vuelve a top:0 en
     cuanto la barra sale de pantalla — que es como se comporta WordPress. */
  body.admin-bar .nav { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .nav { top: 0; }
}

/* El icono del corazón necesita ser el ancla de su contador, igual que el
   del carrito. Sin esto la píldora se posiciona contra el header entero. */
.nav__guardadas { position: relative; }

/* Las motos guardadas son enlaces a su ficha: heredan el color del panel y
   solo se subrayan al pasar por encima. */
.sidecart__linea a { color: inherit; text-decoration: none; }
.sidecart__linea a.sidecart__modelo:hover { text-decoration: underline; }

/* ---- Paginación del catálogo ----
   El prototipo cabía en una página, así que no había paginador y el CSS no
   lo contemplaba: salía como una lista con viñetas. Las medidas y los
   colores son los de los filtros de la tienda, que es lo que tiene al lado.
   Woo imprime <nav.woocommerce-pagination> con un <ul.page-numbers>. */
.woocommerce-pagination {
  margin: 3rem 0 1rem;
  display: flex;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;   /* sin esto salen las viñetas del navegador */
}

.woocommerce-pagination ul.page-numbers li { margin: 0; }

/* ⚠️ `li >`, no `.woocommerce-pagination .page-numbers` a secas: Woo pone la
   clase `page-numbers` TAMBIÉN en el <ul> que los contiene, así que el
   selector amplio le pintaba al contenedor su propio borde y su fondo — un
   recuadro alrededor de todos los botones. */
.woocommerce-pagination li > .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .7rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--hueso);
  color: var(--grafito);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.woocommerce-pagination li > a.page-numbers:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}

/* La página actual, en tinta: es la única marca de dónde estás. */
.woocommerce-pagination li > .page-numbers.current {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--hueso);
}

/* Las flechas de anterior/siguiente, sin el ancho mínimo de un número. */
.woocommerce-pagination li > .page-numbers.prev,
.woocommerce-pagination li > .page-numbers.next {
  min-width: 0;
  padding: 0 1rem;
  font-size: 1.05rem;
  line-height: 1;
}

/* Los puntos suspensivos no son un botón: ni borde ni fondo. */
.woocommerce-pagination li > .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--gris);
  min-width: 1.5rem;
  padding: 0;
}

@media (max-width: 47.99rem) {
  .woocommerce-pagination { margin: 2rem 0 .5rem; }
  .woocommerce-pagination li > .page-numbers {
    min-width: 2.75rem;   /* objetivo táctil */
    height: 2.75rem;
  }
}

/* ==========================================================================
   BUSCADOR
   No venía del prototipo: la lupa estaba pero no abría nada.
   ========================================================================== */

.buscador {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--tinta);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  z-index: 60;
  padding: 1.25rem 0 1.5rem;
}

/* ⚠️ Explícito: el panel es flex/grid y sin esto `[hidden]` pierde contra
   `display`, el panel sigue ocupando su sitio y captura los clics de lo que
   hay debajo. Es el mismo fallo del sidecart. */
.buscador[hidden] { display: none; }

.buscador__form {
  display: flex;
  align-items: center;
  gap: .6rem;
  position: relative;
}

/* La caja del campo: es el contenedor posicionado que permite meter la lupa
   a la izquierda y el botón «Buscar» a la derecha, ambos DENTRO del campo. */
.buscador__caja { position: relative; flex: 1; min-width: 0; }

.buscador__lupa {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: var(--gris);
  stroke-width: 1.6;
  fill: none;
  pointer-events: none;
}

.buscador__campo {
  width: 100%;
  height: 3.25rem;
  /* El hueco de la derecha lo ocupa el botón, que va superpuesto: sin este
     padding el texto se metería por debajo de él. */
  padding: 0 7.5rem 0 2.9rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--sans);
  /* 16px: por debajo de eso, iOS hace zoom al enfocar el campo. */
  font-size: 1rem;
}

.buscador__campo::placeholder { color: var(--gris); }

/* El aro mientras llega la respuesta: la lupa se convierte en aro.
   Va DENTRO del campo a proposito. Se probo en la esquina del panel y
   quedaba a mas de mil pixeles del cursor —nadie lo miraba—; y en flujo,
   sobre la lista, empujaba los resultados hacia abajo en cada tecla.
   Aqui no mueve nada y esta donde ya estan los ojos. */
.buscador__caja--cargando .buscador__lupa { opacity: 0; }

.buscador__caja--cargando::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: var(--naranja-cl);
  border-radius: 50%;
  animation: ss-girar .7s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Sin animacion el aro se queda quieto: sigue diciendo «espera». */
@media (prefers-reduced-motion: reduce) {
  .buscador__caja--cargando::before { animation: none; }
}

.buscador__campo:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .1);
}

/* ⚠️ La × que Chrome y Safari añaden por su cuenta a `type="search"`.
   Se veían DOS cruces seguidas —la del navegador y la de cerrar el
   buscador— y no había forma de saber cuál hacía qué. Se quita la del
   navegador: la nuestra cierra el panel, y para vaciar el campo está el
   teclado. */
.buscador__campo::-webkit-search-cancel-button,
.buscador__campo::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.buscador__campo::-ms-clear { display: none; }

/* «Buscar» va dentro del campo, no al lado: más bajo que el input para que
   se lea como un botón apoyado dentro y no como otro campo. */
.buscador__enviar {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(3.25rem - 12px);
  padding: 0 1.25rem;
  border: 0;
  border-radius: 7px;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}
.buscador__enviar:hover { background: #e8e6e2; }

.buscador__cerrar {
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--gris);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.buscador__cerrar:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.buscador__panel { margin-top: .9rem; }
.buscador__panel[hidden] { display: none; }

.buscador__estado {
  margin: 0 0 .6rem;
  color: var(--gris);
  font-family: var(--rotulo);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.buscador__estado[hidden] { display: none; }

.buscador__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  /* Mientras llega una respuesta nueva, los resultados viejos se ATENÚAN en
     vez de borrarse: cambiar la lista entera en cada tecla molesta más que
     esperar medio segundo. */
  transition: opacity .15s ease;
}
.buscador__lista.esta-cargando { opacity: .45; }

.buscador__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* `aria-selected` es lo que mueven las flechas: el resaltado sigue al
   atributo, no a una clase aparte que habría que mantener sincronizada. */
.buscador__item:hover,
.buscador__item[aria-selected="true"] {
  background: rgba(255, 255, 255, .1);
}

.buscador__item img {
  width: 56px;
  height: 42px;
  object-fit: contain;
  background: var(--hueso);
  border-radius: 6px;
  flex: none;
}

.buscador__item-datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.buscador__item-marca {
  font-family: var(--rotulo);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.buscador__item-nombre {
  font-weight: 600;
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buscador__item-precio { margin-left: auto; font-weight: 600; font-size: .9375rem; flex: none; }

.buscador__todos {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .75rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: none;
  color: #fff;
  font-family: var(--sans);
  font-size: .875rem;
  cursor: pointer;
}
.buscador__todos:hover { background: rgba(255, 255, 255, .1); }
.buscador__todos[hidden] { display: none; }

@media (max-width: 47.99rem) {
  .buscador { padding: 1rem 0 1.25rem; }
  /* El teclado del móvil ya trae su propio «buscar»; sin el botón, el campo
     recupera su padding derecho normal. */
  .buscador__enviar { display: none; }
  .buscador__campo { padding-right: 1rem; }
  .buscador__item img { width: 46px; height: 34px; }
  .buscador__item-precio { font-size: .875rem; }
}

/* ==========================================================================
   ESTADO DE CARGA
   Un patrón para todo el sitio: nada debe quedarse quieto sin decir que
   está trabajando.
   ========================================================================== */

@keyframes ss-girar { to { transform: rotate(360deg); } }

/* El indicador se dibuja con ::after sobre el contenedor, así no hay que
   inyectar ni quitar nodos —y por tanto no puede quedarse uno olvidado. */
.ss-cargando { position: relative; pointer-events: none; }

.ss-cargando::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid var(--linea);
  border-top-color: var(--naranja);
  border-radius: 50%;
  animation: ss-girar .7s linear infinite;
  z-index: 5;
}

/* Sobre fondo oscuro el aro gris no se ve: se aclara. */
.buscador .ss-cargando::after,
.sidecart .ss-cargando::after {
  border-color: rgba(255, 255, 255, .25);
  border-top-color: var(--naranja-cl);
}

/* El contenido se atenúa mientras carga, no se borra: quien ya estaba
   leyendo no pierde de vista dónde estaba. */
.ss-cargando > * { opacity: .35; transition: opacity .15s ease; }

/* Con reduced-motion el aro no gira: se queda como marca estática, que
   sigue diciendo «espera» sin mover nada. */
@media (prefers-reduced-motion: reduce) {
  .ss-cargando::after { animation: none; border-top-color: var(--naranja); }
}

/* La rejilla del catálogo al aplicar un filtro. */
.catalog-grid[aria-busy="true"] { position: relative; }

/* El botón de enviar la cotización, mientras se abre WhatsApp y se guarda
   el lead. No usa .ss-cargando porque el aro taparía el texto del botón. */
.sidecart__ir.ss-enviando {
  opacity: .6;
  pointer-events: none;
}
.sidecart__ir.ss-enviando svg { animation: ss-girar .7s linear infinite; }

/* La rejilla del catálogo necesita alto propio para que el aro quede
   centrado en algo, no pegado al borde de arriba. */
.catalog-grid.ss-cargando { min-height: 40vh; }

/* Página de resultados sin coincidencias. */
.busqueda-vacia { padding: 2rem 0 4rem; text-align: center; }
.busqueda-vacia .catalog-vacio { font-size: 1.125rem; margin-bottom: .5rem; }
.busqueda-vacia__ayuda { color: var(--gris); margin-bottom: 1.5rem; }
.busqueda-vacia__marcas {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin-bottom: 2rem;
}

/* ---- Anillo de foco: solo con teclado ----
   A5: `:focus-visible` a secas también se dibuja cuando el foco vuelve POR
   CÓDIGO —al cerrar un drawer y devolverlo al botón que lo abrió—, y en
   móvil aparece un marco tras un toque, en «ciertos elementos» y de forma
   intermitente. El JS marca <html class="kbd"> al tabular y la quita al
   tocar; el anillo genérico cuelga de esa clase. */
:focus-visible { outline: none; }

.kbd :focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Los campos conservan su foco propio: un cambio sutil al tocar, sin marco. */
.buscador__campo:focus,
.cotizador__campo input:focus,
.cotizador__campo select:focus,
.agenda__campo input:focus,
.agenda__campo select:focus { outline: none; }

/* iOS pinta un recuadro gris al tocar cualquier cosa pulsable. */
* { -webkit-tap-highlight-color: transparent; }

/* ---- Teléfono chileno ----
   El «+56» va anclado al INPUT, no a la fila: si se anclara a la fila, un
   mensaje de validación la haría crecer y el prefijo se descolgaría encima
   del error. Y se pinta como el dato, no como una etiqueta: misma familia,
   mismo tamaño, mismo peso y mismo color que el número que va al lado. */
.campo-tel { position: relative; display: block; }

/* Va en <b> y no en <i> ni <span>: dentro de .agenda__campo, un <span>
   heredaría los estilos de la etiqueta y un <i> los de su cursiva. El peso
   se iguala al del número justo debajo. */
.campo-tel__prefijo {
  position: absolute;
  left: 0;
  top: 0;
  height: 3rem;
  display: flex;
  align-items: center;
  padding-left: .9rem;
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  pointer-events: none;
}

.campo-tel input { padding-left: 3.1rem !important; }

/* El campo inválido se marca; el JS le mueve el foco. */
input.is-invalid, select.is-invalid { border-color: #b3261e !important; }

/* ---- El buscador sin JavaScript ----
   El panel sale con [hidden] para que no aparezca desplegado al cargar, y lo
   abre el botón de la lupa. Pero sin JS ese botón no hace nada, así que el
   <form> quedaba en el HTML y era INALCANZABLE: se decía «el form GET es el
   buscador» y no lo era.

   La clase `no-js` del <html> la sustituye por `js` un script inline del
   <head>, ANTES de pintar. Así que con JS esta regla nunca llega a aplicarse
   —sin parpadeo— y sin JS el buscador queda visible y usable. */
.no-js .buscador[hidden] { display: block !important; }

/* Y sin JS sobran los controles que solo el JS sabe manejar. */
.no-js .buscador__cerrar,
.no-js .nav__buscar { display: none; }