@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   BIKEAR — Sistema visual
   ───────────────────────────────────────────────────────────────────────────
   Concepto: «papel e instrumento». La página es clara y legible como una
   ficha impresa; los datos duros viven en paneles navy que imitan el display
   del manubrio de una e-bike. El elemento firma es el MEDIDOR de autonomía:
   una barra segmentada con el número en cifras tabulares, presente en cada
   tarjeta, en la ficha y en el comparador — porque la autonomía es la primera
   pregunta de todo comprador.

   Decisiones heredadas del sitio anterior y por qué cambian:
   · Azul de marca real #3581B8 (no #2D75B5). Se conserva para tipografía
     grande, ilustración y fondos; para links y botones se usa #2D75B5, que
     sobre blanco da 4,9:1 y cumple WCAG AA.
   · Los títulos ya NO son verdes: #65B457 sobre blanco da 2,55:1 y no cumple
     ningún umbral. El verde pasa a ser color de SEÑAL (carga, disponible) y
     vive sobre navy, donde da 5,04:1.
   · Cuerpo de texto en Inter 17px, no Fredoka 14px: el sitio tiene mucho
     contenido largo y Fredoka no tiene itálica.
   · Se conserva la cápsula 250px/50px del footer original: era propia de
     Bikear, no del template. Se usa una sola vez.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías ───────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Color */
  --tinta: #232e5b;          /* navy: texto y material de panel */
  --tinta-80: #3b456e;
  --tinta-60: #6a7191;
  --tinta-40: #9aa0b6;
  --azul: #3581b8;           /* azul de marca: display, ilustración, fondos */
  --azul-int: #2d75b5;       /* azul interactivo: links y botones (4,9:1) */
  --azul-oscuro: #245e93;
  --carga: #65b457;          /* verde señal: sobre navy o como relleno */
  --carga-clara: #82c876;
  --verde-texto: #3e7a32;    /* verde cuando debe ser texto sobre blanco */
  --papel: #ffffff;
  --niebla: #f3f6f9;
  --bruma: #ecf2f7;          /* tinte heredado del kit original */
  --linea: #dde4ec;
  --linea-fuerte: #c3cddb;
  --alerta: #b4453a;
  --alerta-fondo: #fdf1f0;
  --aviso: #8a6318;
  --aviso-fondo: #fdf6e7;

  /* Tipografía */
  --display: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-xs: 0.75rem;    /* 12px  etiquetas */
  --t-sm: 0.875rem;   /* 14px  metadatos */
  --t-base: 1.0625rem;/* 17px  cuerpo */
  --t-md: 1.1875rem;  /* 19px  destacado */
  --t-lg: 1.375rem;   /* 22px  h4 */
  --t-xl: 1.75rem;    /* 28px  h3 */
  --t-2xl: 2.25rem;   /* 36px  h2 */
  --t-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);   /* h1 */
  --t-4xl: clamp(2.75rem, 1.7rem + 4.2vw, 4.5rem);   /* hero */

  /* Espaciado (escala de 4) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* Forma */
  --r-sm: 6px;
  --r: 10px;            /* radio canónico heredado */
  --r-lg: 18px;
  --r-pill: 999px;
  --r-capsula: 250px 50px 50px 250px;  /* forma propia del sitio anterior */

  /* Elevación */
  --sombra-sutil: 0 1px 2px rgba(35, 46, 91, 0.06), 0 2px 8px rgba(35, 46, 91, 0.04);
  --sombra: 0 4px 24px rgba(35, 46, 91, 0.09);
  --sombra-alta: 0 18px 48px rgba(35, 46, 91, 0.16);

  /* Estructura */
  --ancho: 1200px;
  --ancho-texto: 68ch;
  --borde-foco: 3px;

  --transicion: 180ms cubic-bezier(0.2, 0, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* `clip` en lugar de `hidden`: recorta el menú móvil cerrado (que está fuera
     de pantalla con translateX) sin convertir el elemento en un contenedor de
     scroll, que es lo que rompería `position: sticky` en la cabecera. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

/* Red de contención: un icono en línea nunca debe crecer más que su texto,
   ni siquiera si el contexto se olvidó de acotarlo. */
:where(p, span, a, li, button, summary, h1, h2, h3, h4, h5, h6, label) > svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--e-4); text-wrap: balance; }
p, ul, ol, dl, figure, table, pre { margin: 0 0 var(--e-4); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: var(--e-1); }

hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: var(--e-6) 0;
}

/* ── Tipografía ────────────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1.2;
}

h4, .h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.25;
}

h5, h6 {
  font-family: var(--texto);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.35;
}

a {
  color: var(--azul-int);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transicion);
}
a:hover { color: var(--tinta); }

strong, b { font-weight: 600; }

small, .chico { font-size: var(--t-sm); }

/* Etiqueta: rol de utilidad del sistema. Encabeza secciones y campos. */
.etiqueta {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 var(--e-2);
  display: block;
}
.etiqueta--verde { color: var(--verde-texto); }
.etiqueta--sobre-navy { color: var(--carga-clara); }

/* Cifras: todo dato numérico usa figuras tabulares para que las columnas
   de especificaciones queden alineadas verticalmente. */
.cifra,
td.cifra,
.medidor__km,
.precio__valor,
.riel__valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-5);
}
.contenedor--angosto { max-width: 820px; }
.contenedor--ancho { max-width: 1420px; }

.seccion { padding-block: var(--e-8); }
.seccion--compacta { padding-block: var(--e-6); }
.seccion--amplia { padding-block: var(--e-9); }
.seccion--niebla { background: var(--niebla); }
.seccion--bruma { background: var(--bruma); }
.seccion--navy { background: var(--tinta); color: var(--bruma); }

.seccion--navy h2,
.seccion--navy h3,
.seccion--navy h4 { color: var(--papel); }
.seccion--navy a { color: var(--carga-clara); }
.seccion--navy a:hover { color: var(--papel); }

.grilla { display: grid; gap: var(--e-5); }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: center;
}
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.fila--arriba { align-items: flex-start; }
.fila--apretada { gap: var(--e-2); }

/* Encabezado de sección: etiqueta, título y enlace de escape a la derecha. */
.encabezado-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}
.encabezado-seccion h2 { margin: 0; }
.encabezado-seccion p {
  margin: var(--e-2) 0 0;
  color: var(--tinta-60);
  max-width: 52ch;
}
.seccion--navy .encabezado-seccion p { color: var(--tinta-40); }

/* ── Foco visible (obligatorio, no negociable) ─────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--borde-foco) solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r) 0;
}
.salto-contenido:focus { left: 0; }

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

/* ═══ BOTONES ═══════════════════════════════════════════════════════════ */
.btn {
  --btn-fondo: var(--azul-int);
  --btn-texto: var(--papel);
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--r-pill);
  background: var(--btn-fondo);
  color: var(--btn-texto);
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.btn:hover {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--verde {
  --btn-fondo: var(--carga);
  /* Texto navy sobre verde: 5,04:1. Blanco sobre verde daría 2,58:1. */
  --btn-texto: var(--tinta);
}
.btn--verde:hover { background: var(--carga-clara); color: var(--tinta); border-color: var(--carga-clara); }

.btn--linea {
  --btn-fondo: transparent;
  --btn-texto: var(--tinta);
  --btn-borde: var(--linea-fuerte);
}
.btn--linea:hover { background: var(--tinta); color: var(--papel); }

.btn--sobre-navy {
  --btn-fondo: transparent;
  --btn-texto: var(--papel);
  --btn-borde: rgba(255, 255, 255, 0.35);
}
.btn--sobre-navy:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.btn--grande { padding: 1rem 2rem; font-size: var(--t-base); }
.btn--chico { padding: 0.5rem 1rem; font-size: var(--t-xs); }
.btn--bloque { width: 100%; }
.btn[aria-disabled='true'],
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* WhatsApp: es el canal de conversión principal, así que tiene identidad
   propia y no compite con el botón primario. */
.btn--wa {
  --btn-fondo: #1faa53;
  --btn-texto: #ffffff;
}
.btn--wa:hover { background: #17803e; border-color: #17803e; color: #fff; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
}
.enlace-flecha::after {
  content: '→';
  transition: transform var(--transicion);
}
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ═══ FIRMA DEL SISTEMA: MEDIDOR DE AUTONOMÍA ═══════════════════════════
   Reproduce la barra de batería del display del manubrio. Aparece en cada
   tarjeta, en la ficha de producto y en el comparador. Los segmentos llenos
   son proporcionales a la autonomía declarada sobre el máximo del catálogo,
   así que comparar dos modelos es mirar dos barras.
   ═══════════════════════════════════════════════════════════════════════ */
.medidor {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}

.medidor__barra {
  display: flex;
  gap: 2px;
  align-items: stretch;
  height: 0.9rem;
  flex: 1;
  min-width: 3.5rem;
}

.medidor__seg {
  flex: 1;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.medidor__seg--lleno { background: var(--carga); }

.medidor__km {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--papel);
  white-space: nowrap;
}
.medidor__km span {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carga-clara);
  margin-left: 0.15em;
}

/* Variante sobre fondo claro (comparador, tablas) */
.medidor--claro .medidor__seg { background: var(--linea); }
.medidor--claro .medidor__seg--lleno { background: var(--verde-texto); }
.medidor--claro .medidor__km { color: var(--tinta); }
.medidor--claro .medidor__km span { color: var(--verde-texto); }

/* ═══ RIEL DE DATOS ═════════════════════════════════════════════════════
   La segunda mitad del lenguaje: W · Wh · km · kg separados por filetes.
   Es el mismo orden en toda la web, así el ojo aprende dónde mirar.
   ═══════════════════════════════════════════════════════════════════════ */
.riel-datos {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.riel-datos li {
  margin: 0;
  padding: 0 var(--e-4);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1.25;
}
.riel-datos li:first-child { padding-left: 0; border-left: 0; }

.riel__valor {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  color: var(--papel);
  display: block;
}
.riel__clave {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-40);
  display: block;
}

.riel-datos--claro li { border-left-color: var(--linea); }
.riel-datos--claro .riel__valor { color: var(--tinta); }
.riel-datos--claro .riel__clave { color: var(--tinta-60); }

/* ═══ TARJETA DE PRODUCTO ═══════════════════════════════════════════════
   Estructura: imagen sobre papel + «pie de instrumento» navy con el riel de
   datos y el medidor. El pie es el elemento que se repite y hace reconocible
   al sitio.
   ═══════════════════════════════════════════════════════════════════════ */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.tarjeta:hover {
  border-color: var(--linea-fuerte);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.tarjeta:focus-within {
  border-color: var(--azul);
  box-shadow: var(--sombra);
}

.tarjeta__figura {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--niebla);
  overflow: hidden;
}
.tarjeta__figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--e-4);
  transition: transform 400ms cubic-bezier(0.2, 0, 0.3, 1);
}
.tarjeta:hover .tarjeta__figura img { transform: scale(1.035); }

.tarjeta__cuerpo {
  padding: var(--e-4) var(--e-5) var(--e-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.tarjeta__marca {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-60);
}

.tarjeta__nombre {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.2;
  margin: 0;
}
.tarjeta__nombre a {
  color: var(--tinta);
  text-decoration: none;
}
.tarjeta__nombre a:hover { color: var(--azul-int); }
/* El enlace del título cubre toda la tarjeta: un solo destino, un solo tab. */
.tarjeta__nombre a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tarjeta__resumen {
  font-size: var(--t-sm);
  color: var(--tinta-60);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta__precio {
  margin-top: auto;
  padding-top: var(--e-2);
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  flex-wrap: wrap;
}
.tarjeta__precio .precio__valor {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--tinta);
}
.tarjeta__precio .precio__tachado {
  font-size: var(--t-sm);
  color: var(--tinta-40);
  text-decoration: line-through;
}
.tarjeta__precio .precio__consultar {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  color: var(--azul-int);
}

/* Pie de instrumento */
.tarjeta__pie {
  background: var(--tinta);
  padding: var(--e-3) var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.tarjeta__pie .riel-datos li { padding-inline: var(--e-3); }
.tarjeta__pie .riel-datos li:first-child { padding-left: 0; }
.tarjeta__pie .riel__valor { font-size: var(--t-base); }

/* Cintas de estado */
.cinta {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--tinta);
  color: var(--papel);
}
.cinta--oferta { background: var(--alerta); }
.cinta--nuevo { background: var(--carga); color: var(--tinta); }
.cinta--usado { background: var(--azul); }
.cinta--agotado { background: var(--tinta-60); }
.cinta--derecha { left: auto; right: var(--e-3); }

/* Estado de stock */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta-60);
}
.estado::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.estado--disponible { color: var(--verde-texto); }
.estado--pedido { color: var(--aviso); }
.estado--agotado { color: var(--alerta); }

/* ═══ HERO ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--tinta);
  color: var(--bruma);
  overflow: hidden;
  isolation: isolate;
}

/* El patrón de marca original, en muy baja opacidad, como textura de fondo. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/brand/patron-bikear.svg') center / 900px repeat;
  opacity: 0.05;
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 30%, rgba(53, 129, 184, 0.42), transparent 62%);
  z-index: -1;
}

.hero__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: center;
  padding-block: var(--e-8);
}
@media (min-width: 900px) {
  .hero__grilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--e-7);
    padding-block: var(--e-9);
  }
}

.hero__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-4xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0 0 var(--e-4);
}
.hero__titulo em {
  font-style: normal;
  color: var(--carga);
}

.hero__bajada {
  font-size: var(--t-md);
  color: rgba(236, 242, 247, 0.86);
  max-width: 46ch;
  margin: 0 0 var(--e-6);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.hero__figura {
  position: relative;
  margin: 0;
}
.hero__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* Panel de lectura sobre el hero: los datos del modelo destacado. */
.hero__panel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: var(--e-4) var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  backdrop-filter: blur(6px);
}

.hero__sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(101, 180, 87, 0.16);
  border: 1px solid rgba(101, 180, 87, 0.4);
  color: var(--carga-clara);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--e-4);
}
.hero__sello svg { width: 1rem; height: 1rem; }

/* ═══ ENCABEZADO DEL SITIO ══════════════════════════════════════════════ */
.barra-superior {
  background: var(--tinta);
  color: var(--bruma);
  font-size: var(--t-sm);
}
.barra-superior .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 2.5rem;
  padding-block: var(--e-1);
}
.barra-superior a { color: var(--bruma); text-decoration: none; }
.barra-superior a:hover { color: var(--carga-clara); }
.barra-superior__aviso {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.barra-superior svg { width: 1.05em; height: 1.05em; flex: none; }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 4.5rem;
}

.logo { display: flex; align-items: center; flex: none; }
/* El logo es un bloque vertical (símbolo arriba, palabra abajo), casi cuadrado:
   a la altura de un logotipo horizontal quedaría diminuto, así que ocupa más
   alto dentro de los 4,5rem de la fila. */
.logo img { height: 3.4rem; width: auto; }

.nav { margin-left: auto; }
.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lista > li { margin: 0; position: relative; }

.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__enlace:hover { background: var(--niebla); color: var(--azul-int); }
.nav__enlace.is-active {
  color: var(--azul-int);
  box-shadow: inset 0 -2px 0 var(--carga);
}

.nav__badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--carga);
  color: var(--tinta);
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-sm);
}

/* Submenú */
.nav__sub {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 14rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
  padding: var(--e-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.nav__lista > li:hover > .nav__sub,
.nav__lista > li:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--tinta);
  text-decoration: none;
}
.nav__sub a:hover { background: var(--niebla); color: var(--azul-int); }
.nav__sub .conteo { color: var(--tinta-40); font-variant-numeric: tabular-nums; }

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: none;
}

.boton-menu {
  display: none;
  align-items: center;
  gap: var(--e-2);
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Buscador de la cabecera */
/* `flex: 1` con base 0 dejaba que el buscador se achicara hasta mostrar tres
   letras cuando el menú crece. Con base propia y un mínimo, lo que cede es el
   espacio sobrante y no el campo. */
.buscador { position: relative; flex: 1 1 14rem; min-width: 11rem; max-width: 22rem; }

/* Entre el menú hamburguesa y el escritorio holgado hay una franja donde
   entran las siete secciones pero justas: ahí se aprieta el aire, no el
   buscador. */
/* Franja donde la fila entra justa: se aprieta antes de mandar el menú al
   cajón. Las siete secciones son de una sola palabra, así que alcanza con
   recortar el buscador y el espaciado. */
@media (min-width: 1024px) and (max-width: 1219px) {
  .cabecera__fila { gap: var(--e-4); }
  .buscador { max-width: 13rem; }
  .nav__enlace { padding-left: var(--e-2); padding-right: var(--e-2); }
  /* El botón de WhatsApp de la cabecera se va antes que nada: el botón
     flotante «Escribinos» está siempre en pantalla y hace lo mismo. */
  .cabecera__acciones { display: none; }
}
.buscador input {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 0.9rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--niebla);
  font-size: var(--t-sm);
}
.buscador input:focus { background: var(--papel); border-color: var(--azul); outline: none; }
.buscador button {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0.4rem;
  color: var(--tinta-60);
  border-radius: 50%;
}
.buscador button:hover { color: var(--azul-int); }
.buscador svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 1023px) {
  .boton-menu { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    background: var(--papel);
    border-left: 1px solid var(--linea);
    padding: var(--e-6) var(--e-5);
    overflow-y: auto;
    transform: translateX(100%);
    /* Cerrado, el menú no debe ser navegable con el tabulador ni anunciado por
       un lector de pantalla: si sólo se moviera con translate, seguiría estando
       en el orden de foco y quien navega con teclado caería en un panel que no
       ve. `visibility` lo saca de los dos. */
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.2, 0, 0.3, 1), visibility 240ms;
    z-index: 80;
    box-shadow: var(--sombra-alta);
  }
  .nav[data-abierto='true'] { transform: translateX(0); visibility: visible; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace { padding: 0.85rem 0.5rem; font-size: var(--t-md); border-radius: 0; }
  .nav__lista > li + li { border-top: 1px solid var(--linea); }
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 var(--e-3) var(--e-4);
    min-width: 0;
  }
  .buscador { order: 3; max-width: none; flex-basis: 100%; }
  .cabecera__fila { flex-wrap: wrap; padding-block: var(--e-3); }
}

/* ═══ MIGAS ═════════════════════════════════════════════════════════════ */
.migas {
  font-size: var(--t-sm);
  color: var(--tinta-60);
  padding-block: var(--e-4);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.migas li { margin: 0; display: flex; align-items: center; gap: var(--e-2); }
.migas li + li::before { content: '/'; color: var(--linea-fuerte); }
.migas a { color: var(--tinta-60); text-decoration: none; }
.migas a:hover { color: var(--azul-int); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); font-weight: 500; }

/* ═══ FILTROS DEL CATÁLOGO ══════════════════════════════════════════════ */
.catalogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 960px) {
  .catalogo { grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--e-7); }
}

.filtros {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-5);
  position: sticky;
  top: 6rem;
}
.filtros__grupo + .filtros__grupo {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
}
.filtros__titulo {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 var(--e-3);
}
.filtros ul { list-style: none; margin: 0; padding: 0; }
.filtros li { margin: 0; }
.filtros li + li { margin-top: 0.15rem; }

.filtro-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 0.4rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--tinta);
  text-decoration: none;
}
.filtro-opcion:hover { background: var(--niebla); }
.filtro-opcion.is-active {
  background: var(--bruma);
  color: var(--azul-int);
  font-weight: 600;
}
.filtro-opcion .conteo {
  font-size: var(--t-xs);
  color: var(--tinta-40);
  font-variant-numeric: tabular-nums;
}

.campo-rango { display: flex; gap: var(--e-2); align-items: center; }
.campo-rango input { min-width: 0; }

.barra-orden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
.barra-orden__conteo { font-size: var(--t-sm); color: var(--tinta-60); }
.barra-orden__conteo strong { color: var(--tinta); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--bruma);
  border: 1px solid var(--linea);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.chip:hover { border-color: var(--linea-fuerte); }
.chip__quitar { color: var(--tinta-60); font-weight: 700; }

/* ═══ FICHA DE PRODUCTO ═════════════════════════════════════════════════ */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 960px) {
  .ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-7); }
}

.galeria { position: sticky; top: 6rem; }
.galeria__principal {
  position: relative;
  background: var(--niebla);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 0 var(--e-3);
}
.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--e-5);
}
.galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.galeria__miniaturas li { margin: 0; }
.galeria__miniaturas button {
  width: 100%;
  aspect-ratio: 1;
  padding: 0.3rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--papel);
  overflow: hidden;
}
.galeria__miniaturas button[aria-current='true'] { border-color: var(--azul); }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.ficha__titulo { margin: 0 0 var(--e-3); }

.ficha__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-60);
  text-decoration: none;
  margin-bottom: var(--e-3);
}
.ficha__marca:hover { color: var(--azul-int); }

/* Bloque de precio: el momento de decisión, así que es un panel propio. */
.bloque-precio {
  background: var(--tinta);
  color: var(--bruma);
  border-radius: var(--r);
  padding: var(--e-5);
  margin-block: var(--e-5);
}
.bloque-precio__valor {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
.bloque-precio__tachado {
  font-size: var(--t-md);
  color: var(--tinta-40);
  text-decoration: line-through;
  margin-left: var(--e-2);
}
.bloque-precio__nota { font-size: var(--t-sm); color: var(--tinta-40); margin: var(--e-2) 0 0; }
.bloque-precio__cuotas {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--t-sm);
  color: rgba(236, 242, 247, 0.9);
}
.bloque-precio__cuotas strong { color: var(--carga-clara); }
.bloque-precio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.descuento {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--carga);
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 700;
  margin-left: var(--e-2);
}

/* Viñetas de venta */
.destacados { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.destacados li {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linea);
  margin: 0;
}
.destacados li::before {
  content: '';
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  border-radius: 50%;
  background: var(--carga) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23232e5b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Selector de color */
.colores { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.colores li { margin: 0; }
.colores button,
.colores span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.35rem 0.8rem 0.35rem 0.4rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--papel);
  font-size: var(--t-sm);
}
.colores .muestra {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(35, 46, 91, 0.2);
  flex: none;
}

/* Tabla de especificaciones */
.specs { margin-block: var(--e-6); }
.specs__grupo + .specs__grupo { margin-top: var(--e-5); }
.specs__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  margin: 0 0 var(--e-3);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tabla caption {
  caption-side: top;
  text-align: left;
  font-size: var(--t-xs);
  color: var(--tinta-60);
  padding-bottom: var(--e-2);
}
.tabla th,
.tabla td {
  padding: 0.7rem var(--e-3);
  text-align: left;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla th {
  font-weight: 500;
  color: var(--tinta-60);
  width: 42%;
}
.tabla td { font-weight: 500; font-variant-numeric: tabular-nums; }
.tabla tbody tr:nth-child(odd) { background: var(--niebla); }
.tabla thead th {
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
  border-bottom: 0;
}
.tabla--comparar { font-size: var(--t-sm); }
.tabla--comparar td { text-align: center; }
.tabla--comparar th { width: auto; }

/* Dato sin confirmar por el fabricante: se marca, no se oculta. */
.dato-provisorio { border-bottom: 1px dotted var(--tinta-40); cursor: help; }
.dato-provisorio::after { content: '*'; color: var(--aviso); font-weight: 700; }

.tabla-scroll { overflow-x: auto; margin-bottom: var(--e-4); }
.tabla-scroll table { min-width: 40rem; }

/* ═══ USADOS ════════════════════════════════════════════════════════════ */
.panel-usado {
  border: 1.5px solid var(--carga);
  border-radius: var(--r);
  padding: var(--e-5);
  background: linear-gradient(180deg, rgba(101, 180, 87, 0.08), transparent 70%);
  margin-block: var(--e-5);
}
.panel-usado__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  margin: 0 0 var(--e-3);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.estrellas { display: inline-flex; gap: 2px; color: var(--carga); }
.estrellas svg { width: 1.05rem; height: 1.05rem; }
.estrellas .vacia { color: var(--linea-fuerte); }

/* ═══ FORMULARIOS ═══════════════════════════════════════════════════════ */
.campo { margin-bottom: var(--e-4); }
.campo > label,
.campo__label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--e-2);
}
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-60); margin: var(--e-1) 0 0; }
.campo__error {
  font-size: var(--t-sm);
  color: var(--alerta);
  margin: var(--e-1) 0 0;
  font-weight: 500;
}
.requerido { color: var(--alerta); }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='date'],
input[type='datetime-local'],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--papel);
  font-size: var(--t-base);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(53, 129, 184, 0.18);
}
input[aria-invalid='true'],
textarea[aria-invalid='true'],
select[aria-invalid='true'] { border-color: var(--alerta); }
textarea { min-height: 8rem; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236a7191' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85rem;
  padding-right: 2.2rem;
}

.opcion {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.opcion:hover { border-color: var(--linea-fuerte); background: var(--niebla); }
.opcion input { width: auto; margin-top: 0.2rem; accent-color: var(--azul-int); }
.opcion:has(input:checked) { border-color: var(--azul); background: var(--bruma); }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.formulario-panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-6);
}

/* ═══ AVISOS ════════════════════════════════════════════════════════════ */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r);
  border-left: 4px solid var(--azul);
  background: var(--bruma);
  margin-bottom: var(--e-4);
  font-size: var(--t-sm);
}
.aviso p:last-child { margin-bottom: 0; }
/* El icono es decorativo y no debe estirarse al alto del texto. */
.aviso > svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.1em; }
.aviso--exito { border-left-color: var(--carga); background: rgba(101, 180, 87, 0.1); }
.aviso--error { border-left-color: var(--alerta); background: var(--alerta-fondo); }
.aviso--atencion { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.aviso--atencion > svg { color: var(--aviso); }

/* ═══ ACORDEÓN (FAQ) ════════════════════════════════════════════════════ */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: '+';
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bruma);
  color: var(--azul-int);
  font-size: var(--t-md);
  font-weight: 400;
  transition: transform var(--transicion), background var(--transicion);
}
.acordeon details[open] summary::after {
  content: '−';
  background: var(--tinta);
  color: var(--papel);
}
.acordeon__cuerpo { padding: 0 0 var(--e-5); max-width: var(--ancho-texto); }
.acordeon__cuerpo > :last-child { margin-bottom: 0; }

/* ═══ CONTENIDO EDITORIAL ═══════════════════════════════════════════════ */
.prosa { max-width: var(--ancho-texto); }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2 {
  font-size: var(--t-2xl);
  margin-top: var(--e-7);
  scroll-margin-top: 6rem;
}
.prosa h3 {
  font-size: var(--t-xl);
  margin-top: var(--e-6);
  scroll-margin-top: 6rem;
}
.prosa h4 { font-size: var(--t-lg); margin-top: var(--e-5); }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: var(--e-2); }
.prosa img { border-radius: var(--r); margin-block: var(--e-5); }
.prosa figcaption { font-size: var(--t-sm); color: var(--tinta-60); margin-top: var(--e-2); }
.prosa blockquote {
  margin: var(--e-5) 0;
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--carga);
  background: var(--niebla);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-md);
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prosa th, .prosa td { padding: 0.65rem var(--e-3); border-bottom: 1px solid var(--linea); text-align: left; }
.prosa thead th { background: var(--tinta); color: var(--papel); }
.prosa code {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 0.9em;
  background: var(--bruma);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

/* Párrafo de respuesta directa: primero el dato, después la explicación.
   Es lo que se cita en un resultado de búsqueda o en una respuesta de IA. */
.respuesta-directa {
  font-size: var(--t-md);
  font-weight: 500;
  padding: var(--e-4) var(--e-5);
  background: var(--bruma);
  border-radius: var(--r);
  border-left: 4px solid var(--azul);
}

/* Índice de contenidos */
.indice {
  background: var(--niebla);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-6);
}
.indice ol { margin: 0; padding-left: 1.3em; font-size: var(--t-sm); }
.indice a { color: var(--tinta); text-decoration: none; }
.indice a:hover { color: var(--azul-int); text-decoration: underline; }

.meta-nota {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  font-size: var(--t-sm);
  color: var(--tinta-60);
  padding-block: var(--e-3);
  border-block: 1px solid var(--linea);
  margin-bottom: var(--e-6);
}

/* ═══ TARJETA DE NOTA ═══════════════════════════════════════════════════ */
.nota {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.nota:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--linea-fuerte); }
.nota__figura { margin: 0; aspect-ratio: 16 / 9; background: var(--niebla); overflow: hidden; }
.nota__figura img { width: 100%; height: 100%; object-fit: cover; }
.nota__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.nota__titulo { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; margin: 0; }
.nota__titulo a { color: var(--tinta); text-decoration: none; }
.nota__titulo a::after { content: ''; position: absolute; inset: 0; }
.nota__titulo a:hover { color: var(--azul-int); }
.nota__meta { font-size: var(--t-xs); color: var(--tinta-60); display: flex; gap: var(--e-3); flex-wrap: wrap; }
.nota__resumen { font-size: var(--t-sm); color: var(--tinta-60); margin: 0; }

/* ═══ TESTIMONIOS ═══════════════════════════════════════════════════════ */
.testimonio {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.testimonio blockquote { margin: 0; font-size: var(--t-base); }
.testimonio footer { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; }
.testimonio__autor { font-weight: 600; font-size: var(--t-sm); }
.testimonio__lugar { font-size: var(--t-xs); color: var(--tinta-60); }

/* ═══ LOGOS DE MARCA ════════════════════════════════════════════════════ */
.marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.marcas li { margin: 0; }
.marcas img {
  height: 2.4rem;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--transicion), filter var(--transicion);
}
.marcas a:hover img { opacity: 1; filter: none; }

/* ═══ CATEGORÍAS EN MOSAICO ═════════════════════════════════════════════ */
.mosaico { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.mosaico__celda {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 13rem;
  padding: var(--e-5);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
  isolation: isolate;
}
.mosaico__celda img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 500ms cubic-bezier(0.2, 0, 0.3, 1);
}
.mosaico__celda::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 46, 91, 0.15) 30%, rgba(35, 46, 91, 0.88));
  z-index: -1;
}
.mosaico__celda:hover img { transform: scale(1.05); }
.mosaico__celda h3 { color: var(--papel); margin: 0 0 var(--e-1); font-size: var(--t-lg); }
.mosaico__celda span { font-size: var(--t-sm); color: rgba(236, 242, 247, 0.85); }

/* ═══ BANDA DE CONFIANZA ════════════════════════════════════════════════ */
.confianza {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.confianza li { margin: 0; display: flex; gap: var(--e-3); }
.confianza svg { width: 1.75rem; height: 1.75rem; flex: none; color: var(--carga); }
.confianza h3 { font-size: var(--t-base); font-family: var(--texto); font-weight: 600; margin: 0 0 var(--e-1); }
.confianza p { font-size: var(--t-sm); color: var(--tinta-60); margin: 0; }
.seccion--navy .confianza p { color: var(--tinta-40); }

/* ═══ PAGINACIÓN ════════════════════════════════════════════════════════ */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-7);
  list-style: none;
  padding: 0;
}
.paginacion li { margin: 0; }
.paginacion a,
.paginacion span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.6rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.paginacion a:hover { border-color: var(--azul); color: var(--azul-int); }
.paginacion [aria-current='page'] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.paginacion .puntos { border: 0; color: var(--tinta-40); }

/* ═══ VACÍO ═════════════════════════════════════════════════════════════ */
.vacio {
  text-align: center;
  padding: var(--e-8) var(--e-5);
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: var(--r);
  background: var(--niebla);
}
.vacio h2 { font-size: var(--t-xl); }
.vacio p { color: var(--tinta-60); max-width: 46ch; margin-inline: auto; }

/* ═══ CTA DE CIERRE ════════════════════════════════════════════════════
   Única aparición de la cápsula 250px/50px heredada del sitio anterior.
   ═══════════════════════════════════════════════════════════════════════ */
.cta-cierre {
  background: var(--tinta);
  color: var(--bruma);
  border-radius: var(--r-capsula);
  padding: var(--e-7) var(--e-8);
  display: grid;
  gap: var(--e-5);
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 820px) {
  .cta-cierre { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.cta-cierre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/brand/patron-bikear.svg') right -120px bottom -80px / 520px no-repeat;
  opacity: 0.08;
}
.cta-cierre h2 { color: var(--papel); margin: 0 0 var(--e-2); position: relative; }
.cta-cierre p { color: rgba(236, 242, 247, 0.85); margin: 0; position: relative; }
.cta-cierre form { position: relative; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cta-cierre input { flex: 1; min-width: 12rem; border-color: transparent; }
@media (max-width: 640px) {
  .cta-cierre { border-radius: var(--r-lg); padding: var(--e-6) var(--e-5); }
}

/* ═══ PIE DE PÁGINA ═════════════════════════════════════════════════════ */
.pie {
  background: var(--tinta);
  color: rgba(236, 242, 247, 0.8);
  padding-block: var(--e-8) var(--e-5);
  margin-top: var(--e-9);
  font-size: var(--t-sm);
}
.pie__grilla {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--e-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pie h3 {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-40);
  margin: 0 0 var(--e-3);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 0 0 var(--e-2); }
.pie a { color: rgba(236, 242, 247, 0.8); text-decoration: none; }
.pie a:hover { color: var(--carga-clara); text-decoration: underline; }
.pie__logo img { height: 4.5rem; width: auto; margin-bottom: var(--e-4); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  color: var(--tinta-40);
}
.redes { display: flex; gap: var(--e-2); }
.redes a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.redes a:hover { background: var(--carga); border-color: var(--carga); color: var(--tinta); }
.redes svg { width: 1.1rem; height: 1.1rem; }

/* ═══ WHATSAPP FLOTANTE ═════════════════════════════════════════════════ */
.wa-flotante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-pill);
  background: #1faa53;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: transform var(--transicion), background var(--transicion);
}
.wa-flotante:hover { background: #17803e; color: #fff; transform: translateY(-2px); }
.wa-flotante svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 520px) {
  .wa-flotante__texto { display: none; }
  .wa-flotante { padding: 0.9rem; }
}

/* ═══ UTILIDADES ════════════════════════════════════════════════════════ */
.centrado { text-align: center; }
.sin-margen { margin: 0 !important; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }
.mb-6 { margin-bottom: var(--e-6); }
.tenue { color: var(--tinta-60); }
.no-envuelve { white-space: nowrap; }
.oculto { display: none !important; }
@media (max-width: 720px) { .oculto-movil { display: none !important; } }
@media (min-width: 721px) { .solo-movil { display: none !important; } }

/* ═══ PREFERENCIAS DEL SISTEMA ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tarjeta:hover,
  .nota:hover,
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AÑADIDOS DE LAS VISTAS PÚBLICAS (portada, catálogo, ficha)
   ───────────────────────────────────────────────────────────────────────────
   Todo lo de acá abajo cubre huecos concretos de home.php, catalog.php y
   product.php. Sin sistema paralelo: mismos tokens, mismos nombres en español.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El hero es navy pero no lleva .seccion--navy, así que hereda el azul
   interactivo de los links: sobre navy no llega a 4,5:1. */
.hero a:not(.btn) { color: var(--carga-clara); }
.hero a:not(.btn):hover { color: var(--papel); }

/* Bajada de la ficha de producto: la frase del fabricante bajo el h1. */
.ficha__bajada {
  font-size: var(--t-md);
  color: var(--tinta-60);
  margin: 0 0 var(--e-4);
  max-width: 46ch;
}

/* La barra de orden mezcla texto y un select; sin esto el select toma el
   width:100% de los formularios y desarma la fila. */
.barra-orden form { flex: none; }
.barra-orden select { width: auto; min-width: 11rem; }
.barra-orden label { color: var(--tinta-60); white-space: nowrap; }

/* Estado vacío del catálogo: los CTA van centrados como el resto del bloque. */
.vacio .fila { justify-content: center; }

/* Nota al pie de un grupo de especificaciones: acompaña a .dato-provisorio. */
.specs__nota {
  font-size: var(--t-xs);
  color: var(--aviso);
  margin: var(--e-2) 0 0;
}

/* Video de la ficha: proporción 16/9 sin depender del iframe. */
.video-embebido {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tinta);
  max-width: 56rem;
}
.video-embebido iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══ BARRA FLOTANTE DEL COMPARADOR ═════════════════════════════════════
   Aparece sólo cuando hay modelos elegidos (el JS le quita el atributo
   hidden). Al ser display:flex hay que anular hidden a mano.
   ═══════════════════════════════════════════════════════════════════════ */
.barra-comparar {
  position: fixed;
  left: 50%;
  bottom: var(--e-4);
  transform: translateX(-50%);
  z-index: 65;
  width: min(36rem, calc(100vw - 2 * var(--e-4)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-pill);
  background: var(--tinta);
  color: var(--bruma);
  box-shadow: var(--sombra-alta);
  font-size: var(--t-sm);
}
.barra-comparar[hidden] { display: none; }
.barra-comparar p { margin: 0; }
.barra-comparar strong {
  color: var(--carga-clara);
  font-variant-numeric: tabular-nums;
}
.barra-comparar__aviso {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--carga-clara);
}
.barra-comparar__aviso[hidden] { display: none; }

@media (max-width: 560px) {
  /* Deja libre la esquina del botón flotante de WhatsApp. */
  .barra-comparar {
    border-radius: var(--r-lg);
    bottom: 5rem;
    justify-content: center;
    text-align: center;
  }
}

@media print {
  .cabecera, .barra-superior, .pie, .wa-flotante, .filtros, .cta-cierre { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .bloque-precio, .tarjeta__pie, .seccion--navy { background: #fff !important; color: #000 !important; }
  .medidor__km, .riel__valor, .bloque-precio__valor { color: #000 !important; }
  a { text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AÑADIDOS — blog, nota, preguntas, contacto, comparador, búsqueda y error
   ───────────────────────────────────────────────────────────────────────────
   Todo lo de abajo reutiliza los tokens y el lenguaje de arriba: no hay un
   segundo sistema. Sólo aparece lo que las plantillas nuevas necesitaban y no
   podía resolverse con una clase existente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta mini: versión horizontal para barras laterales ─────────────
   En un aside no hay lugar para el medidor ni el riel; lo que decide ahí es
   la imagen chica, el nombre y el precio. */
.tarjeta-mini {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta-mini + .tarjeta-mini { margin-top: var(--e-2); }
.tarjeta-mini:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-sutil); }

.tarjeta-mini__figura {
  flex: none;
  width: 88px;
  height: 88px;
  margin: 0;
  border-radius: var(--r-sm);
  background: var(--niebla);
  overflow: hidden;
}
.tarjeta-mini__figura img { width: 100%; height: 100%; object-fit: contain; padding: var(--e-1); }

.tarjeta-mini__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tarjeta-mini__nombre {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-base);
  line-height: 1.2;
}
.tarjeta-mini:hover .tarjeta-mini__nombre { color: var(--azul-int); }
.tarjeta-mini__precio { font-size: var(--t-sm); font-weight: 600; color: var(--verde-texto); }
.tarjeta-mini__dato { font-size: var(--t-xs); color: var(--tinta-60); }

/* ── Chip activo (filtro de categorías del blog) ────────────────────── */
.chip.is-active {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.chip .conteo { color: inherit; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ── Nota destacada del blog ────────────────────────────────────────── */
.nota-destacada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel);
  overflow: hidden;
  margin-bottom: var(--e-7);
}
@media (min-width: 820px) {
  .nota-destacada { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
}
.nota-destacada__figura { margin: 0; aspect-ratio: 16 / 9; background: var(--niebla); }
.nota-destacada__figura img { width: 100%; height: 100%; object-fit: cover; }
.nota-destacada__cuerpo { padding: var(--e-5) var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); justify-content: center; }
.nota-destacada__titulo { font-size: var(--t-xl); margin: 0; }
.nota-destacada__titulo a { color: var(--tinta); text-decoration: none; }
.nota-destacada__titulo a::after { content: ''; position: absolute; inset: 0; }
.nota-destacada__titulo a:hover { color: var(--azul-int); }

/* ── Nota: artículo + barra lateral ─────────────────────────────────── */
.articulo-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 1000px) {
  .articulo-grilla { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--e-7); }
  .articulo__aside { position: sticky; top: 6rem; }
}
.articulo { max-width: var(--ancho-texto); }
.articulo__portada { margin: 0 0 var(--e-6); }
.articulo__portada img { width: 100%; border-radius: var(--r); }
.articulo__aside { display: flex; flex-direction: column; gap: var(--e-6); }
.articulo__aside h2 {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin: 0 0 var(--e-3);
}
.articulo__aside ul { list-style: none; margin: 0; padding: 0; }
.articulo__aside ul li { margin: 0 0 var(--e-1); }

/* ── CTA dentro del contenido ───────────────────────────────────────── */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  background: var(--tinta);
  color: var(--bruma);
  border-radius: var(--r);
  padding: var(--e-5);
  margin-block: var(--e-6);
}
.cta-inline h2 { color: var(--papel); font-size: var(--t-lg); margin: 0 0 var(--e-1); }
.cta-inline p { color: rgba(236, 242, 247, 0.85); font-size: var(--t-sm); max-width: 46ch; margin: 0; }

/* Contenido a todo el ancho: sólo para la plantilla «ancho-completo», donde el
   editor arma tablas anchas que no entran en la medida de lectura. */
.prosa--ancha { max-width: none; }

/* ── Grupo de preguntas frecuentes ──────────────────────────────────── */
.grupo-faq { margin-bottom: var(--e-7); }
.grupo-faq > h2 { font-size: var(--t-xl); scroll-margin-top: 6rem; }

/* ── Contacto ───────────────────────────────────────────────────────── */
.contacto-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 900px) {
  .contacto-grilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-7); }
}

.panel-datos {
  background: var(--niebla);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-5);
}
.panel-datos h2 { font-size: var(--t-lg); margin-top: 0; }

.datos-lista { list-style: none; margin: 0; padding: 0; }
.datos-lista li {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin: 0;
  padding-block: var(--e-3);
  border-top: 1px solid var(--linea);
}
.datos-lista li:first-child { border-top: 0; padding-top: 0; }
.datos-lista svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.2rem; color: var(--azul-int); }
.datos-lista .clave {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-60);
}
.datos-lista .valor { display: block; font-weight: 500; }

.mapa {
  margin-top: var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.mapa iframe { display: block; width: 100%; height: 280px; border: 0; }

/* ── Buscador grande de la página de búsqueda ───────────────────────── */
.buscador-grande { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.buscador-grande input { flex: 1; min-width: 14rem; padding: 0.9rem 1.1rem; font-size: var(--t-md); }

/* ── Comparador ─────────────────────────────────────────────────────── */
.tabla--comparar thead th { vertical-align: top; }
.comparar-col { min-width: 12rem; }
.comparar-col img {
  width: 100%;
  height: 8rem;
  object-fit: contain;
  background: var(--papel);
  border-radius: var(--r-sm);
  padding: var(--e-2);
  margin-bottom: var(--e-2);
}
.comparar-col__nombre { display: block; font-family: var(--display); font-size: var(--t-base); font-weight: 500; }
.comparar-col__nombre a { color: var(--papel); text-decoration: none; }
.comparar-col__nombre a:hover { color: var(--carga-clara); text-decoration: underline; }
.comparar-col__precio { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--carga-clara); }

.tabla--comparar .medidor { justify-content: center; }

/* Miniatura del selector de modelos a comparar. */
.opcion__miniatura { width: 56px; height: 56px; object-fit: contain; flex: none; }

/* Mejor valor de la fila (autonomía, potencia, peso). Se marca el dato y no
   la columna entera: el «mejor» depende de la fila, no del modelo. */
td.destacado-comparar {
  background: rgba(101, 180, 87, 0.16);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--verde-texto);
}

/* ── Calculadora de cuotas (aritmética simple, sin tasas) ───────────── */
.calculadora {
  background: var(--niebla);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e-5);
  margin-block: var(--e-6);
}
.calculadora__campos { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.calculadora__campos .campo { margin-bottom: 0; flex: 1; min-width: 10rem; }
.calculadora__resultado {
  margin: var(--e-4) 0 0;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}
.calculadora__resultado strong { color: var(--verde-texto); }

/* ── Confirmación (gracias) ─────────────────────────────────────────── */
.confirmacion { max-width: 44rem; margin-inline: auto; text-align: center; }
.confirmacion__marca {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--e-4);
  border-radius: 50%;
  background: var(--carga);
  color: var(--tinta);
  display: grid;
  place-items: center;
}
.confirmacion__marca svg { width: 2.1rem; height: 2.1rem; }
.confirmacion__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-5); }

/* ── Página de error ────────────────────────────────────────────────── */
.pagina-error { text-align: center; padding-block: var(--e-7); }
.pagina-error__codigo {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(4rem, 2.5rem + 9vw, 7.5rem);
  line-height: 0.9;
  color: var(--linea-fuerte);
  margin: 0 0 var(--e-3);
  font-variant-numeric: tabular-nums;
}
.pagina-error .buscador-grande { max-width: 32rem; margin-inline: auto; }
.pagina-error__enlaces { justify-content: center; }

/* ═══ INTRO SEO PLEGABLE ════════════════════════════════════════════════
   El texto de categoría es valioso para el buscador y para quien investiga,
   pero en un teléfono empuja los productos fuera de la pantalla. Se recorta a
   cinco líneas con un control real (checkbox + label, enfocable y anunciado)
   y se muestra completo desde tablet en adelante. El contenido SIEMPRE está en
   el HTML: nada se oculta a los rastreadores.
   ═══════════════════════════════════════════════════════════════════════ */
.intro-seo { position: relative; }
.intro-seo__control { display: none; }

@media (max-width: 720px) {
  .intro-seo__cuerpo {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
  }
  .intro-seo__interruptor:checked ~ .intro-seo__cuerpo {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .intro-seo__control {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-2);
    padding: 0.4rem 0.9rem;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r-pill);
    background: var(--papel);
    color: var(--azul-int);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .intro-seo__control::after { content: '↓'; }
  .intro-seo__interruptor:checked ~ .intro-seo__control::after { content: '↑'; }
  .intro-seo__menos { display: none; }
  .intro-seo__interruptor:checked ~ .intro-seo__control .intro-seo__mas { display: none; }
  .intro-seo__interruptor:checked ~ .intro-seo__control .intro-seo__menos { display: inline; }
  /* El foco del checkbox oculto tiene que verse en su etiqueta. */
  .intro-seo__interruptor:focus-visible ~ .intro-seo__control {
    outline: var(--borde-foco) solid var(--azul);
    outline-offset: 2px;
  }
}

/* ═══ FILTROS PLEGABLES EN MÓVIL ════════════════════════════════════════
   En escritorio los filtros son la columna lateral de la grilla del catálogo.
   En el teléfono se apilarían arriba y los productos arrancarían recién a la
   tercera pantalla, así que se plieguen con una casilla oculta y su etiqueta.

   Se usa casilla + etiqueta en lugar de <details> porque el CSS puede forzar el
   estado abierto en escritorio: el plegado nativo sólo se controla desde el
   atributo `open`, que una media query no puede tocar.
   ═══════════════════════════════════════════════════════════════════════ */
.filtros-plegable__resumen { display: none; }

@media (max-width: 959px) {
  .filtros-plegable {
    border: 1px solid var(--linea);
    border-radius: var(--r);
    background: var(--papel);
    margin-bottom: var(--e-5);
    overflow: hidden;
  }
  .filtros-plegable__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    cursor: pointer;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--t-md);
  }
  .filtros-plegable__resumen::after {
    content: '↓';
    color: var(--azul-int);
    font-weight: 700;
  }
  .filtros-plegable__interruptor:checked ~ .filtros-plegable__resumen::after { content: '↑'; }
  .filtros-plegable__interruptor:checked ~ .filtros-plegable__resumen {
    border-bottom: 1px solid var(--linea);
  }
  .filtros-plegable__cuenta {
    margin-left: auto;
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.35rem;
    border-radius: var(--r-pill);
    background: var(--carga);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: var(--t-xs);
    font-weight: 700;
  }
  /* El foco de la casilla oculta tiene que verse en su etiqueta. */
  .filtros-plegable__interruptor:focus-visible ~ .filtros-plegable__resumen {
    outline: var(--borde-foco) solid var(--azul);
    outline-offset: -3px;
  }
  /* Cerrado: el panel no ocupa lugar ni queda navegable con el tabulador. */
  .filtros-plegable .filtros { display: none; }
  .filtros-plegable__interruptor:checked ~ .filtros {
    display: block;
    border: 0;
    border-radius: 0;
    position: static;
    padding-top: var(--e-4);
  }
}

/* En pantallas angostas la barra de orden se apila: si se mantiene en una fila,
   el botón de aplicar queda cortado contra el borde. */
@media (max-width: 560px) {
  .barra-orden { flex-direction: column; align-items: stretch; }
  .barra-orden form { width: 100%; }
  .barra-orden form select { flex: 1; min-width: 0; }
}

/* Los precios argentinos tienen siete dígitos: en la columna de filtros los dos
   campos del rango no llegan a mostrarlos con el cuerpo de texto normal. */
.campo-rango input {
  font-size: var(--t-sm);
  padding-inline: 0.55rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}