/* ==========================================================================
   CrediCarros — Sistema de diseño
   Rojo corporativo #E10A17 · Raleway (títulos) / Montserrat (texto)
   ========================================================================== */

:root {
  /* El logo manda sobre el alto del encabezado; el menú móvil se coloca
     debajo usando la misma medida, para que no queden huecos al cambiarlo. */
  --logo-alto: clamp(44px, 4.4vw, 60px);
  --alto-header: calc(var(--logo-alto) + 24px);
  --rojo: #E10A17;
  --rojo-oscuro: #B30812;
  --rojo-suave: #FDE8E9;
  --negro: #14171C;
  --slate: #1E293B;
  --gris-800: #334155;
  --gris-600: #64748B;
  --gris-400: #94A3B8;
  --gris-200: #E2E8F0;
  --gris-100: #F1F5F9;
  --fondo: #F8FAFC;
  --blanco: #FFFFFF;
  --verde: #16A34A;
  --wa: #25D366;
  --sombra-sm: 0 1px 3px rgba(20, 23, 28, .08);
  --sombra: 0 4px 16px rgba(20, 23, 28, .09);
  --sombra-lg: 0 12px 32px rgba(20, 23, 28, .14);
  --radio: 14px;
  --radio-sm: 9px;
  --fuente-titulo: 'Raleway', system-ui, sans-serif;
  --fuente-texto: 'Montserrat', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fuente-texto);
  color: var(--negro);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.2; font-weight: 800; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Utilidades ---------- */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.texto-rojo { color: var(--rojo); }
.centro { text-align: center; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo); margin-bottom: 10px;
}
.titulo-seccion { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 12px; }
.subtitulo-seccion { color: var(--gris-600); max-width: 640px; margin: 0 auto 40px; }
section { padding: 72px 0; }

/* ---------- Animaciones discretas ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radio-sm); font-weight: 700; font-size: .95rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid rgba(225, 10, 23, .4); outline-offset: 2px; }
.btn svg { flex-shrink: 0; }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 4px 14px rgba(225, 10, 23, .35); }
.btn-rojo:hover { background: var(--rojo-oscuro); box-shadow: 0 6px 20px rgba(225, 10, 23, .45); }
.btn-oscuro { background: var(--slate); color: #fff; }
.btn-oscuro:hover { background: var(--negro); }
.btn-borde { border: 2px solid var(--gris-200); color: var(--negro); background: #fff; }
.btn-borde:hover { border-color: var(--rojo); color: var(--rojo); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 4px 14px rgba(37, 211, 102, .35); }
.btn-wa:hover { background: #1EB855; }
.btn-bloque { width: 100%; }
.btn-grande { padding: 16px 34px; font-size: 1.05rem; }
.btn-mini { padding: 8px 14px; font-size: .82rem; border-radius: 8px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px); box-shadow: var(--sombra-sm);
}
.header-barra-top {
  background: var(--negro); color: #fff; font-size: .78rem; padding: 6px 0;
}
.header-barra-top .contenedor { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.header-barra-top a { display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.header-barra-top a:hover { opacity: 1; color: #fff; }
/* min-height en vez de relleno vertical: así el alto del encabezado es
   exactamente --alto-header y el menú desplegable encaja justo debajo.
   Antes lo marcaba .nav-cta (52px), que no entraba en el cálculo. */
.header-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; min-height: var(--alto-header);
  max-width: 1200px; margin: 0 auto;
}
/* flex-shrink: 0 — sin esto la barra comprimía el logo y lo dejaba
   deformado (3.5:1 en vez de 4.4:1) entre 960 y 1100px. */
/* display:flex además de no encogerse: el enlace es en línea y su caja de
   texto añadía 8px bajo el logo, que descuadraban el alto del encabezado
   respecto a donde arranca el menú desplegable. */
.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo img { height: var(--logo-alto); width: auto; }
.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; }
.nav-links a { font-weight: 600; font-size: .92rem; position: relative; padding: 6px 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--rojo); transition: width .22s ease;
}
.nav-links a:hover::after, .nav-links a.activo::after { width: 100%; }
.nav-links a.activo { color: var(--rojo); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-fav { position: relative; display: inline-flex; padding: 8px; border-radius: 8px; color: var(--gris-800); }
.nav-fav:hover { color: var(--rojo); background: var(--rojo-suave); }
.nav-fav .contador {
  position: absolute; top: 0; right: 0; background: var(--rojo); color: #fff;
  font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.hamburguesa { display: none; padding: 8px; color: var(--negro); }
@media (max-width: 1100px) {
  /* Con el menú plegado solo quedan el corazón y la hamburguesa junto al
     logo, así que aquí cabe bastante más que en la barra de escritorio. */
  /* El corazón, la hamburguesa y los márgenes ocupan unos 154px fijos; el
     resto es para el logo, que crece 1px de alto por cada 4,4 de ancho.
     De ahí la fórmula, en vez de un porcentaje que dejaría hueco de sobra
     en unas pantallas y desbordaría en otras. */
  :root { --logo-alto: clamp(36px, calc(22.7vw - 35px), 56px); }
  .hamburguesa { display: block; }
  /* Cerrado usa display:none: un elemento fijo trasladado fuera de pantalla
     sigue sumando ancho al documento (scroll horizontal fantasma en móvil).
     La animación se conserva con allow-discrete + @starting-style; en
     navegadores antiguos el menú simplemente aparece sin deslizamiento. */
  .nav-links {
    display: none;
    /* El header tiene backdrop-filter, así que es el bloque contenedor de este
       elemento fijo: inset:0 lo dejaba de 30px de alto (sin fondo blanco).
       Con alto en unidades de viewport cubre la pantalla como se pretendía. */
    position: fixed; top: var(--alto-header); left: 0; right: 0;
    height: calc(100vh - var(--alto-header)); height: calc(100dvh - var(--alto-header));
    background: #fff; flex-direction: column;
    justify-content: flex-start; padding-top: 30px; gap: 20px; transform: translateX(100%);
    transition: transform .28s ease, display .28s ease;
    transition-behavior: allow-discrete; z-index: 899;
  }
  .nav-links.abierto { display: flex; transform: none; }
  @starting-style {
    .nav-links.abierto { transform: translateX(100%); }
  }
  .nav-links a { font-size: 1.1rem; }
  .nav-cta .btn { display: none; }
  .header-barra-top { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(120deg, var(--negro) 0%, #2A1215 55%, var(--rojo-oscuro) 130%);
  color: #fff; padding: 0; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 64px 20px 0;
}
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin-bottom: 18px; }
.hero h1 .resaltado { color: var(--rojo); background: #fff; padding: 0 10px; border-radius: 8px; display: inline-block; }
.hero p.intro { font-size: 1.1rem; color: rgba(255, 255, 255, .85); margin-bottom: 28px; max-width: 520px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-foto { position: relative; align-self: end; }
.hero-foto img { max-height: 480px; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); }
.hero-badge {
  position: absolute; background: #fff; color: var(--negro); border-radius: var(--radio);
  padding: 10px 16px; font-size: .82rem; font-weight: 700; box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: 8px;
}
.hero-badge svg { color: var(--verde); }
.hero-badge.b1 { top: 18%; left: -12px; }
.hero-badge.b2 { bottom: 22%; right: -6px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 44px; }
  .hero-foto img { max-height: 340px; }
  .hero-badge.b1 { left: 0; } .hero-badge.b2 { right: 0; }
}

/* ---------- Hero v2: showcase 3D ---------- */
.hero-v2 { position: relative; isolation: isolate; overflow: hidden; }
.hero-luces { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.luz { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.luz-1 { width: 420px; height: 420px; background: var(--rojo); top: -160px; right: -80px; animation: flotar-luz 9s ease-in-out infinite; }
.luz-2 { width: 320px; height: 320px; background: #7A1016; bottom: -140px; left: -100px; animation: flotar-luz 11s ease-in-out infinite reverse; }
.luz-3 { width: 200px; height: 200px; background: rgba(255, 255, 255, .18); top: 38%; left: 44%; animation: flotar-luz 13s ease-in-out infinite; }
/* Pausa de animaciones cuando el hero sale de pantalla (rendimiento) */
.hero-v2.fuera-de-vista .luz,
.hero-v2.fuera-de-vista .show-brillo,
.hero-v2.fuera-de-vista .show-chip,
.hero-v2.fuera-de-vista .marquee-pista { animation-play-state: paused; }
@keyframes flotar-luz { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-36px, 28px) scale(1.12); } }
.linea-luz {
  position: absolute; left: -10%; right: -10%; top: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
  transform: rotate(-7deg);
}
/* La galería de destacados manda: se lleva la columna ancha y el texto se
   comprime, para que showcase y cinta de inventario quepan juntos en pantalla. */
.hero-grid-v2 {
  grid-template-columns: 0.85fr 1.15fr; gap: 34px;
  padding-top: 20px; padding-bottom: 12px; align-items: center;
}
/* Los iconos flotantes de redes ocupan de forma fija los primeros 70px de la
   ventana. En escritorios estrechos el contenedor no los libera y tapaban los
   minidatos del hero, así que se reserva el carril justo lo necesario: en
   ventanas anchas el margen del contenedor ya basta y esto vale 0. */
@media (min-width: 861px) {
  .hero-v2 .hero-copy { padding-left: max(0px, calc(62px - max(0px, (100vw - 1200px) / 2))); }
}
.hero-v2 h1 { font-size: clamp(1.8rem, 3.6vw, 2.65rem); margin-bottom: 14px; }
.hero-v2 p.intro { font-size: 1rem; margin-bottom: 20px; max-width: 420px; }
.hero-v2 .hero-ctas { margin-bottom: 22px; }

/* Entrada escalonada */
.anim-hero { opacity: 0; transform: translateY(26px); animation: entrada-hero .7s cubic-bezier(.22, .8, .3, 1) forwards; animation-delay: calc(var(--d, 0) * .12s); }
h1 .anim-hero { display: inline-block; }
@keyframes entrada-hero { to { opacity: 1; transform: none; } }

.hero-eyebrow { color: #fff; background: var(--rojo); padding: 5px 14px; border-radius: 20px; }
.hero-mini-stats { display: flex; gap: 26px; margin-top: 20px; }
.hero-mini-stats span { font-size: .76rem; color: var(--gris-400); display: flex; flex-direction: column; line-height: 1.3; }
.hero-mini-stats strong { font-family: var(--fuente-titulo); font-size: 1.25rem; color: #fff; }

/* Escena 3D */
.hero-show { perspective: 1100px; padding: 10px 6px 0; }
.show-escena { position: relative; transform-style: preserve-3d; }
.show-card {
  display: block; position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22, .8, .3, 1);
  will-change: transform; cursor: pointer; background: var(--negro);
}
/* 16/10 en vez de 4/3: la tarjeta es más ancha y baja bastante de alto,
   que es lo que deja entrar la cinta de inventario en pantalla. */
.show-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: opacity .32s ease, transform .32s ease; }
.show-brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 48%, transparent 58%);
  background-size: 240% 100%; animation: brillo-barrido 5.2s ease-in-out infinite;
}
@keyframes brillo-barrido { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -60% 0; } }
.show-info {
  position: absolute; inset-inline: 0; bottom: 0; padding: 44px 20px 16px;
  background: linear-gradient(transparent, rgba(10, 10, 14, .88) 60%);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; color: #fff;
}
.show-info h2 { font-size: 1.32rem; line-height: 1.25; }
.show-etiqueta { font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: var(--gris-400); }
.show-precio-caja { text-align: right; flex-shrink: 0; }
.show-precio { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.5rem; color: #fff; }
.show-cuota { font-size: .7rem; color: #7DE8A5; font-weight: 600; white-space: nowrap; }

.show-escena.cambiando .show-card img { opacity: 0; transform: scale(1.05); }
.show-escena.cambiando .show-info { opacity: 0; }
.show-info { transition: opacity .3s ease; }

.show-chip {
  position: absolute; background: rgba(255, 255, 255, .96); color: var(--negro);
  font-size: .76rem; font-weight: 700; padding: 9px 15px; border-radius: 30px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4); pointer-events: none; white-space: nowrap;
  transition: transform .35s cubic-bezier(.22, .8, .3, 1); will-change: transform;
}
.chip-a { top: 6%; left: -14px; transform: translateZ(55px); animation: flotar-chip 4.5s ease-in-out infinite; }
.chip-b { bottom: 26%; right: 8px; transform: translateZ(80px); color: var(--verde); animation: flotar-chip 5.5s ease-in-out infinite reverse; }
@keyframes flotar-chip { 0%, 100% { margin-top: 0; } 50% { margin-top: -9px; } }
/* Sello de vehículos certificados sobre el showcase.
   La imagen viene con fondo blanco: el recorte circular lo elimina. */
.sello-certificado {
  position: absolute; top: -20px; width: 104px; height: 104px;
  /* Sobresale de la tarjeta solo mientras el contenedor tenga margen libre a
     los lados. Por debajo de ~1240px queda a ras de la ventana y el recorte
     del hero lo cortaba; el translateZ de la escena lo empuja además un 10%
     hacia afuera. La fórmula lo mete hacia adentro de forma continua, sin el
     salto que dejaba un breakpoint. */
  right: calc(14px - min(34px, max(0px, (100vw - 1240px) / 2)));
  border-radius: 50%; transform: translateZ(95px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .9);
  transition: transform .35s cubic-bezier(.22, .8, .3, 1);
  will-change: transform; pointer-events: none; z-index: 3;
  animation: flotar-sello 6s ease-in-out infinite;
}
@keyframes flotar-sello {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
.show-reflejo {
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(225, 10, 23, .45), transparent 70%);
  filter: blur(10px); transform: translateZ(-40px);
}

.show-controles { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.show-flecha {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .28);
  color: #fff; display: flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.show-flecha:hover { background: var(--rojo); border-color: var(--rojo); transform: scale(1.08); }
.show-dots { display: flex; gap: 8px; }
.show-dot { width: 9px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .28); transition: all .25s ease; cursor: pointer; }
.show-dot.activo { width: 26px; background: var(--rojo); }

/* Cinta marquee */
.hero-marquee {
  position: relative; margin-top: 0; padding: 6px 0 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-pista { display: flex; gap: 14px; width: max-content; animation: marquee-scroll 45s linear infinite; }
.hero-marquee:hover .marquee-pista { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.marquee-item {
  position: relative; flex-shrink: 0; width: 168px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); transition: transform .25s ease, border-color .25s ease;
}
.marquee-item:hover { transform: translateY(-5px) scale(1.03); border-color: var(--rojo); }
.marquee-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.marquee-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px 12px; background: linear-gradient(transparent 35%, rgba(10, 10, 14, .92));
  color: #fff; opacity: 0; transition: opacity .25s ease;
}
.marquee-item:hover .marquee-overlay { opacity: 1; }
.marquee-overlay strong { font-size: .72rem; font-family: var(--fuente-titulo); line-height: 1.25; }
.marquee-overlay span { font-size: .7rem; color: #FF8A91; font-weight: 700; }

@media (max-width: 860px) {
  /* Va después de la regla de escritorio, que si no la pisaría por orden */
  .hero-grid-v2 { grid-template-columns: 1fr; padding-top: 36px; }
  .hero-v2 p.intro { max-width: none; }
  .hero-show { margin-top: 8px; padding-inline: 14px; }
  .hero-mini-stats { gap: 18px; }
  .show-controles { margin-top: 24px; }
  .show-info { flex-direction: column; align-items: flex-start; gap: 6px; padding: 54px 16px 14px; }
  .show-info h2 { font-size: .98rem; }
  .show-precio-caja { text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .show-precio { font-size: 1.1rem; }
  /* En pantallas pequeñas los chips tapaban la foto y el nombre del vehículo:
     esa información ya aparece en la ficha, así que se ocultan. */
  .show-chip { display: none; }
  /* Aquí el contenedor siempre va a ras de la ventana: el sello no puede
     sobresalir o el recorte del hero se lo come. */
  .sello-certificado { width: 72px; height: 72px; top: -12px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-hero { opacity: 1; transform: none; animation: none; }
  .luz, .show-brillo, .show-chip, .marquee-pista { animation: none !important; }
}

/* ---------- Barra de propuesta de valor ---------- */
.valor-barra { background: #fff; border-top: 4px solid var(--rojo); box-shadow: var(--sombra); position: relative; z-index: 5; }
.valor-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.valor-item { padding: 22px 14px; text-align: center; border-right: 1px solid var(--gris-100); }
.valor-item:last-child { border-right: 0; }
.valor-item svg { color: var(--rojo); margin: 0 auto 8px; }
.valor-item strong { display: block; font-size: .88rem; font-family: var(--fuente-titulo); }
.valor-item span { font-size: .74rem; color: var(--gris-600); }
@media (max-width: 960px) { .valor-grid { grid-template-columns: repeat(3, 1fr); } .valor-item:nth-child(3) { border-right: 0; } }
@media (max-width: 560px) { .valor-grid { grid-template-columns: repeat(2, 1fr); } .valor-item { border-right: 0; } }

/* ---------- Stats de confianza ---------- */
.stats-banda { background: var(--negro); color: #fff; padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-num { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; font-family: var(--fuente-titulo); color: var(--rojo); }
.stat-label { font-size: .85rem; color: var(--gris-400); }
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards de vehículos ---------- */
.grid-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.card-auto {
  background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm);
  transition: transform .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; position: relative;
}
.card-auto:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.card-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-100); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-auto:hover .card-foto img { transform: scale(1.05); }
/* right: 56px deja libre la columna de botones flotantes; con tres etiquetas
   (categoría + oferta + financiación) la fila envuelve en vez de cortarse. */
.card-etiquetas {
  position: absolute; top: 12px; left: 12px; right: 56px; z-index: 2;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.etiqueta {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 20px; background: rgba(20, 23, 28, .82); color: #fff;
  white-space: nowrap;
}
.etiqueta.roja { background: var(--rojo); }
.etiqueta.verde { background: var(--verde); }
/* Rebaja: ámbar sobre negro, para que no compita con el rojo corporativo */
.etiqueta.oferta { background: #FFB300; color: #3A2600; }
.card-acciones-flotantes { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.boton-icono {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center; color: var(--gris-800);
  box-shadow: var(--sombra-sm); transition: all .18s ease; cursor: pointer;
}
.boton-icono:hover { color: var(--rojo); transform: scale(1.1); }
.boton-icono.activo { background: var(--rojo); color: #fff; }
.card-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.card-titulo { font-size: 1.05rem; font-weight: 700; font-family: var(--fuente-titulo); margin-bottom: 4px; }
.card-titulo a:hover { color: var(--rojo); }
.card-precio-fila { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 2px; flex-wrap: wrap; gap: 4px; }
.card-precio { font-size: 1.35rem; font-weight: 800; font-family: var(--fuente-titulo); color: var(--rojo); }
.card-precio-antes {
  font-size: .92rem; font-weight: 600; color: var(--gris-400);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}

/* ---------- Precio de oferta en la ficha del vehículo ---------- */
.precio-antes-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 10px;
}
.precio-antes-fila .tachado {
  color: var(--gris-400); font-weight: 600; text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.precio-antes-fila .etiqueta-ahorro {
  background: #FFF4D6; color: #7A4E00; border-radius: 20px;
  padding: 3px 11px; font-size: .78rem; font-weight: 700;
}
.card-cuota { font-size: .8rem; color: var(--gris-600); }
.card-cuota strong { color: var(--verde); font-size: .92rem; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600;
  background: var(--gris-100); color: var(--gris-800); padding: 5px 10px; border-radius: 20px;
}
.chip svg { color: var(--gris-600); }
.card-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }

/* ---------- Filtros catálogo ---------- */
.filtros {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-sm);
  padding: 20px; margin-bottom: 30px; display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; align-items: end;
}
.filtro-campo label { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-600); margin-bottom: 5px; }
.filtro-campo input, .filtro-campo select, .campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--gris-200); border-radius: var(--radio-sm);
  font-family: inherit; font-size: .92rem; background: #fff; color: var(--negro); transition: border-color .18s ease;
}
.filtro-campo input:focus, .filtro-campo select:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(225, 10, 23, .12);
}
.filtros-pildoras { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pildora {
  padding: 8px 18px; border-radius: 24px; border: 1.5px solid var(--gris-200); background: #fff;
  font-weight: 600; font-size: .86rem; cursor: pointer; transition: all .18s ease;
}
.pildora:hover { border-color: var(--rojo); color: var(--rojo); }
.pildora.activa { background: var(--rojo); border-color: var(--rojo); color: #fff; }
@media (max-width: 940px) { .filtros { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .filtros { grid-template-columns: 1fr; } }

/* ---------- Detalle vehículo ---------- */
.detalle-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
/* min-width: 0 evita que un hijo ancho (miniaturas, tablas) estire la columna
   y desborde la pantalla. El !important es necesario porque contacto.html,
   financiamiento.html, nosotros.html y vende-tu-carro.html fijan
   grid-template-columns con estilo inline, que gana sobre la media query. */
.detalle-grid > * { min-width: 0; }
@media (max-width: 940px) { .detalle-grid { grid-template-columns: 1fr !important; } }
.galeria-principal {
  position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--gris-100); cursor: grab; user-select: none;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center;
  justify-content: center; box-shadow: var(--sombra); color: var(--negro); transition: all .18s;
}
.galeria-flecha:hover { background: var(--rojo); color: #fff; }
.galeria-flecha.izq { left: 14px; } .galeria-flecha.der { right: 14px; }
.galeria-contador {
  position: absolute; bottom: 12px; right: 12px; background: rgba(20, 23, 28, .78); color: #fff;
  font-size: .76rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
}
.galeria-360 {
  position: absolute; bottom: 12px; left: 12px; background: rgba(20, 23, 28, .78); color: #fff;
  font-size: .76rem; font-weight: 600; padding: 6px 12px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 6px;
}
/* minmax(0, 1fr): con 1fr a secas el ancho intrínseco de las fotos impide
   que las columnas se encojan y la fila se sale de la pantalla. */
.galeria-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.galeria-thumbs img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2.5px solid transparent; transition: border-color .18s ease; width: 100%;
}
.galeria-thumbs img.activa { border-color: var(--rojo); }
@media (max-width: 560px) { .galeria-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .galeria-thumbs img:nth-child(n+9) { display: none; } }

.caja-compra { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 26px; position: sticky; top: 90px; }
.caja-compra .precio-grande { font-size: 2rem; font-weight: 800; font-family: var(--fuente-titulo); color: var(--rojo); }
.linea-fina { border: none; border-top: 1px solid var(--gris-100); margin: 16px 0; }
.fila-dato { display: flex; justify-content: space-between; font-size: .9rem; padding: 5px 0; }
.fila-dato span:first-child { color: var(--gris-600); }
.fila-dato strong { font-weight: 700; }
/* Los rótulos no parten palabras: sin wrap, los tres botones se salían de la
   pantalla en móviles de 360px. Ahora el que no cabe baja de línea. */
.acciones-secundarias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acciones-secundarias .btn { flex: 1 1 96px; font-size: .8rem; padding: 10px 8px; }

.specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.spec-item { background: #fff; border-radius: var(--radio-sm); padding: 14px; box-shadow: var(--sombra-sm); }
.spec-item svg { color: var(--rojo); margin-bottom: 6px; }
.spec-item .spec-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-600); font-weight: 700; }
.spec-item .spec-valor { font-weight: 700; font-size: .92rem; }

.lista-equipamiento { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; list-style: none; }
.lista-equipamiento li { display: flex; align-items: center; gap: 8px; font-size: .9rem; background: #fff; border-radius: var(--radio-sm); padding: 10px 14px; box-shadow: var(--sombra-sm); }
.lista-equipamiento svg { color: var(--verde); flex-shrink: 0; }

/* ---------- Simulador ---------- */
.simulador { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; }
.simulador-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 760px) { .simulador-grid { grid-template-columns: 1fr; } }
.control-rango { margin-bottom: 20px; }
.control-rango .fila-etiqueta { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.control-rango .valor-actual { color: var(--rojo); font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--rojo); height: 6px; cursor: pointer; }
.resultado-cuota {
  background: linear-gradient(135deg, var(--negro), #3A1114); color: #fff; border-radius: var(--radio);
  padding: 28px; text-align: center;
}
.resultado-cuota .cuota-valor { font-size: 2.4rem; font-weight: 800; font-family: var(--fuente-titulo); color: #fff; }
.resultado-cuota .cuota-valor small { font-size: 1rem; font-weight: 600; color: var(--gris-400); }
.resultado-cuota .detalle-fila { display: flex; justify-content: space-between; font-size: .84rem; padding: 4px 0; color: var(--gris-400); }
.resultado-cuota .detalle-fila strong { color: #fff; }
.nota-legal { font-size: .72rem; color: var(--gris-600); margin-top: 12px; }

/* ---------- Confianza / testimonios ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.card-blanca { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-sm); padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.card-blanca:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card-blanca .icono-circulo {
  width: 52px; height: 52px; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.testimonio { position: relative; }
.testimonio .estrellas { color: #F59E0B; letter-spacing: 2px; margin-bottom: 10px; font-size: .95rem; }
.testimonio p { font-size: .92rem; color: var(--gris-800); font-style: italic; margin-bottom: 14px; }
.testimonio .autor { display: flex; align-items: center; gap: 10px; }
.testimonio .avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--rojo); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--fuente-titulo);
}
.testimonio .autor strong { display: block; font-size: .88rem; }
.testimonio .autor span { font-size: .76rem; color: var(--gris-600); }
.badge-google {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 40px;
  box-shadow: var(--sombra); padding: 10px 22px; font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge-google:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.badge-google .estrellas { color: #F59E0B; letter-spacing: 1px; }
.badge-google .logo-g {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1rem;
  color: #fff; background: conic-gradient(from -45deg, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335);
}

/* Avatar y sello de una reseña traída de Google */
.testimonio .avatar-foto { object-fit: cover; }
.testimonio .autor { position: relative; }
.testimonio .sello-google {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: .74rem; color: #fff;
  background: conic-gradient(from -45deg, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335);
}

/* ---------- Bancos aliados ---------- */
.bancos-aliados {
  margin: 48px auto 0; max-width: 980px; background: #fff; border-radius: 20px;
  box-shadow: var(--sombra); padding: 40px 34px 34px; position: relative; overflow: hidden;
  border-bottom: 5px solid var(--rojo);
}
/* Formas decorativas de fondo */
.bancos-aliados::before, .bancos-aliados::after {
  content: ''; position: absolute; border-radius: 50%; background: var(--rojo-suave);
  opacity: .5; pointer-events: none;
}
.bancos-aliados::before { width: 260px; height: 260px; top: -120px; left: -90px; }
.bancos-aliados::after { width: 200px; height: 200px; bottom: -90px; right: -70px; }

.bancos-cabecera { text-align: center; position: relative; z-index: 1; }
.bancos-escudo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; color: var(--rojo); margin-bottom: 10px;
}
.bancos-escudo svg { width: 100%; height: 100%; }
.bancos-titulo {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 600; color: var(--gris-800); line-height: 1.15;
}
.bancos-titulo strong { display: block; font-weight: 800; color: var(--rojo); }
.bancos-subrayado {
  display: block; width: 62px; height: 4px; border-radius: 3px;
  background: #F5B301; margin: 12px auto 16px;
}
.bancos-intro { color: var(--gris-600); font-size: .95rem; line-height: 1.6; }

/* Fila de logos con separadores */
/* Fondo blanco puro: los logos vienen con fondo blanco y así no se les nota
   el recuadro. El borde marca la caja sin necesidad de rellenarla. */
/* Flex con envoltura y centrado: con siete aliados la rejilla fija de cuatro
   columnas dejaba una fila suelta a la izquierda, y los separadores verticales
   quedaban colgando al final de cada fila. */
.bancos-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 0; background: #fff; border: 1px solid var(--gris-200); border-radius: 16px;
  padding: 18px 12px; margin: 28px 0 26px; position: relative; z-index: 1;
}
/* Cuatro por fila reparte los siete aliados en 4 + 3, con la fila corta
   centrada. Dejándolo automático quedaban 6 y uno suelto debajo. */
.banco-logo {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 25%; padding: 10px 18px; min-height: 58px;
}
@media (max-width: 900px) { .banco-logo { flex-basis: 33.333%; } }
@media (max-width: 620px) { .banco-logo { flex-basis: 50%; } }
.banco-logo img {
  max-width: 100%; max-height: 46px; width: auto; object-fit: contain;
  mix-blend-mode: multiply;   /* funde el fondo blanco del logo con la tarjeta */
  transition: transform .2s ease;
}
.banco-logo:hover img { transform: scale(1.06); }
/* Los logotipos apilados en varias líneas necesitan más alto para pesar
   visualmente lo mismo que los de una sola línea. */
.banco-logo.alto img { max-height: 60px; }
@media (max-width: 700px) { .banco-logo.alto img { max-height: 46px; } }

/* Beneficios */
.bancos-beneficios {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative; z-index: 1;
}
.banco-beneficio {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 6px 12px; border-right: 1px solid var(--gris-200); text-align: left;
}
.banco-beneficio:last-child { border-right: none; }
.banco-beneficio .ico {
  width: 42px; height: 42px; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.banco-beneficio .txt { font-size: .84rem; font-weight: 600; color: var(--gris-800); line-height: 1.35; }

@media (max-width: 860px) {
  .bancos-aliados { padding: 32px 18px 26px; border-radius: 16px; }
  .bancos-logos { padding: 14px 6px; gap: 2px 0; }
  .banco-logo { padding: 10px 12px; min-height: 52px; }
  .banco-logo img { max-height: 34px; }
  .bancos-beneficios { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .banco-beneficio:nth-child(2) { border-right: none; }
  .banco-beneficio { justify-content: flex-start; }
  .banco-beneficio .txt { font-size: .78rem; }
  .bancos-intro br { display: none; }
}
@media (max-width: 420px) {
  .bancos-beneficios { grid-template-columns: 1fr; }
  .banco-beneficio { border-right: none; }
}

.logos-aliados { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.logo-aliado {
  background: #fff; border: 1.5px solid var(--gris-200); border-radius: var(--radio-sm);
  padding: 12px 24px; font-weight: 700; font-family: var(--fuente-titulo); color: var(--gris-800); font-size: .92rem;
}

/* ---------- Categorías ---------- */
.grid-categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 700px) { .grid-categorias { grid-template-columns: 1fr; } }
.card-categoria {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-sm); padding: 30px;
  text-align: center; transition: all .22s ease; border: 2px solid transparent;
}
.card-categoria:hover { border-color: var(--rojo); transform: translateY(-4px); box-shadow: var(--sombra); }
.card-categoria img { height: 64px; width: auto; margin: 0 auto 14px; object-fit: contain; }
.card-categoria h3 { margin-bottom: 4px; }
.card-categoria span { font-size: .82rem; color: var(--gris-600); }

/* ---------- Pasos ---------- */
.grid-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: paso; }
@media (max-width: 860px) { .grid-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-pasos { grid-template-columns: 1fr; } }
.paso { background: #fff; border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra-sm); position: relative; }
.paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: -14px; left: 22px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rojo); color: #fff; font-weight: 800; font-family: var(--fuente-titulo);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(225, 10, 23, .4);
}
.paso h3 { font-size: 1.02rem; margin: 10px 0 8px; }
.paso p { font-size: .86rem; color: var(--gris-600); }

/* ---------- Blog ---------- */
.card-blog { background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); transition: all .22s ease; display: flex; flex-direction: column; }
.card-blog:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card-blog .blog-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gris-100); }
.card-blog .blog-foto img { width: 100%; height: 100%; object-fit: cover; }
.card-blog .blog-cuerpo { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.card-blog .blog-meta { font-size: .74rem; color: var(--gris-600); margin-bottom: 8px; }
.card-blog h3 { font-size: 1.05rem; margin-bottom: 8px; }
.card-blog h3 a:hover { color: var(--rojo); }
.card-blog p { font-size: .88rem; color: var(--gris-600); flex: 1; }
.enlace-flecha { color: var(--rojo); font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }
.enlace-flecha:hover { gap: 10px; }
.enlace-flecha { transition: gap .18s ease; }

.articulo { max-width: 760px; margin: 0 auto; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-sm); padding: clamp(24px, 5vw, 56px); }
.articulo h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 10px; }
.articulo .articulo-meta { color: var(--gris-600); font-size: .85rem; margin-bottom: 26px; }
.articulo h2 { font-size: 1.35rem; margin: 30px 0 12px; }
.articulo p, .articulo li { color: var(--gris-800); margin-bottom: 14px; font-size: .97rem; }
.articulo ul, .articulo ol { padding-left: 22px; margin-bottom: 14px; }
.articulo .destacado-caja { background: var(--rojo-suave); border-left: 4px solid var(--rojo); border-radius: 0 var(--radio-sm) var(--radio-sm) 0; padding: 16px 20px; margin: 20px 0; }

/* ---------- CTA banda ---------- */
.cta-banda {
  background: linear-gradient(120deg, var(--rojo) 0%, var(--rojo-oscuro) 100%); color: #fff;
  border-radius: var(--radio); padding: clamp(30px, 5vw, 56px); text-align: center;
}
.cta-banda h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: 10px; }
.cta-banda p { opacity: .92; margin-bottom: 24px; max-width: 560px; margin-inline: auto; }
.cta-banda .btn-rojo { background: #fff; color: var(--rojo); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.cta-banda .btn-rojo:hover { background: var(--gris-100); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.form-caja { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 30px; }

/* ---------- Comparador ---------- */
.tabla-comparar { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); }
.tabla-comparar th, .tabla-comparar td { padding: 13px 16px; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--gris-100); }
.tabla-comparar th { background: var(--gris-100); font-family: var(--fuente-titulo); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-600); width: 180px; }
.tabla-comparar td { font-weight: 600; }
.tabla-comparar tr.mejor td.destacar { color: var(--verde); }
.tabla-envoltura { overflow-x: auto; }

/* ---------- Botones flotantes ----------
   La esquina de cada grupo y el tamaño de las redes se administran desde el
   panel (Ajustes → Botones flotantes) mediante atributos en <body>. */
:root { --flot-x: 24px; --flot-y: 24px; --flot-red: var(--flot-red-base, 38px); }
@media (max-width: 640px) {
  :root { --flot-x: 14px; --flot-y: 18px; --flot-red: calc(var(--flot-red-base, 38px) - 2px); }
}

/* Grupo de WhatsApp + burbuja de preguntas */
.flotantes-der {
  position: fixed; bottom: var(--flot-y); right: var(--flot-x); left: auto; z-index: 950;
  display: flex; align-items: center; gap: 12px;
}
body[data-wa="izquierda"] .flotantes-der { left: var(--flot-x); right: auto; }

.wa-flotante {
  display: flex; align-items: center; gap: 10px; background: var(--wa); color: #fff;
  padding: 14px 22px; border-radius: 40px; font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .5); transition: transform .2s ease;
  animation: pulso-wa 2.4s infinite;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { flex-shrink: 0; }
@keyframes pulso-wa {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, .5); }
  50% { box-shadow: 0 8px 24px rgba(37, 211, 102, .5), 0 0 0 12px rgba(37, 211, 102, .15); }
}

.chat-burbuja {
  flex-shrink: 0; width: 45px; height: 45px; border-radius: 50%;
  background: var(--rojo); color: #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 8px 22px rgba(225, 10, 23, .45);
  transition: transform .2s ease, background .2s ease;
}
.chat-burbuja svg { width: 19px; height: 19px; }
.chat-burbuja:hover { background: var(--rojo-oscuro); transform: scale(1.08); }
.chat-burbuja:focus-visible { outline: 3px solid rgba(225, 10, 23, .5); outline-offset: 3px; }
body[data-chat="oculto"] .chat-burbuja,
body[data-chat="oculto"] .chat-panel { display: none !important; }

@media (max-width: 640px) {
  .wa-flotante span { display: none; }
  .wa-flotante { padding: 16px; }
}

/* Redes sociales: color de marca fijo y tamaño configurable */
.redes-flotantes {
  position: fixed; bottom: var(--flot-y); left: var(--flot-x); right: auto; z-index: 949;
  display: flex; flex-direction: column; gap: 9px;
}
body[data-redes="derecha"] .redes-flotantes { right: var(--flot-x); left: auto; }
/* Si comparten esquina con el grupo de WhatsApp, se apilan encima */
body[data-redes="izquierda"][data-wa="izquierda"] .redes-flotantes,
body[data-redes="derecha"][data-wa="derecha"] .redes-flotantes {
  bottom: calc(var(--flot-y) + 66px);
}

.red-flotante {
  display: flex; align-items: center; gap: 0; white-space: nowrap; overflow: hidden;
  width: var(--flot-red); height: var(--flot-red);
  border-radius: calc(var(--flot-red) / 2);
  padding-left: calc((var(--flot-red) - 18px) / 2);
  color: #fff; box-shadow: var(--sombra-lg);
  transition: width .28s cubic-bezier(.22, .8, .3, 1), transform .2s ease, filter .2s ease;
}
.red-flotante svg { flex-shrink: 0; }
.red-flotante span {
  font-size: .78rem; font-weight: 700; opacity: 0; margin-left: 10px;
  transition: opacity .2s ease;
}
.red-flotante:hover { width: 142px; transform: translateX(2px); filter: brightness(1.1); }
body[data-redes="derecha"] .red-flotante:hover { transform: translateX(-2px); }
.red-flotante:hover span { opacity: 1; }
.red-flotante:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 2px; }

.red-flotante.ig { background: linear-gradient(45deg, #F09433, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888); }
/* TikTok es negro de marca: el filo cian es lo que lo identifica */
.red-flotante.tk { background: #010101; box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 2px #25F4EE inset; }
.red-flotante.fb { background: #1877F2; }

@media (max-width: 640px) {
  .redes-flotantes { gap: 8px; }
  .red-flotante:hover { width: var(--flot-red); }
  .red-flotante span { display: none; }
}

/* ---------- Chatbot ---------- */
/* Se abre del lado de su burbuja, que ahora vive a la derecha */
/* Se abre del lado de su burbuja, que viaja con el grupo de WhatsApp */
.chat-panel {
  position: fixed; bottom: calc(var(--flot-y) + 62px); right: var(--flot-x); left: auto;
  z-index: 951; width: 340px; max-width: calc(100vw - 28px);
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-lg); overflow: hidden;
  display: none; flex-direction: column; max-height: 480px;
}
body[data-wa="izquierda"] .chat-panel { left: var(--flot-x); right: auto; }
.chat-panel.abierto { display: flex; }
.chat-cabecera { background: var(--negro); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }
.chat-cabecera strong { font-family: var(--fuente-titulo); }
.chat-cabecera span { display: block; font-size: .72rem; color: var(--verde); }
.chat-mensajes { padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45; }
.chat-msg.bot { background: var(--gris-100); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.usuario { background: var(--rojo); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-opciones { padding: 0 16px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-opcion {
  font-size: .76rem; font-weight: 600; padding: 7px 12px; border-radius: 20px;
  border: 1.5px solid var(--rojo); color: var(--rojo); background: #fff; cursor: pointer; transition: all .15s;
}
.chat-opcion:hover { background: var(--rojo); color: #fff; }

/* ---------- Popup ---------- */
.popup-fondo {
  position: fixed; inset: 0; background: rgba(20, 23, 28, .6); z-index: 990;
  display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px);
}
.popup-fondo.abierto { display: flex; }
.popup {
  background: #fff; border-radius: var(--radio); max-width: 440px; width: 100%;
  box-shadow: var(--sombra-lg); overflow: hidden; position: relative; animation: entrada-popup .3s ease;
}
@keyframes entrada-popup { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.popup-cerrar { position: absolute; top: 12px; right: 12px; color: #fff; z-index: 2; background: rgba(0,0,0,.3); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.popup-cabecera { background: linear-gradient(120deg, var(--rojo), var(--rojo-oscuro)); color: #fff; padding: 28px 28px 22px; }
.popup-cabecera h3 { font-size: 1.4rem; margin-bottom: 4px; }
.popup-cabecera p { font-size: .88rem; opacity: .92; }
.popup-cuerpo { padding: 24px 28px 28px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--negro); color: #fff; padding: 12px 24px; border-radius: 40px;
  font-size: .88rem; font-weight: 600; box-shadow: var(--sombra-lg); z-index: 995;
  opacity: 0; pointer-events: none; transition: all .3s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%); }

/* ---------- Barra comparación ---------- */
.barra-comparar {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--negro); color: #fff;
  padding: 12px 20px; z-index: 940; display: none; align-items: center; justify-content: center; gap: 16px;
  font-size: .9rem; font-weight: 600;
}
.barra-comparar.visible { display: flex; }

/* ---------- Footer ---------- */
.footer { background: var(--negro); color: var(--gris-400); padding: 60px 0 0; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; font-size: .88rem; }
.footer a:hover { color: #fff; }
.footer .logo-footer { background: #fff; border-radius: var(--radio-sm); padding: 10px 14px; display: inline-block; margin-bottom: 16px; }
.footer .logo-footer img { height: 36px; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: background .18s;
}
.footer-social a:hover { background: var(--rojo); }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; font-size: .78rem; text-align: center; }

/* ---------- Página cabecera interna ---------- */
.pagina-cabecera { background: linear-gradient(120deg, var(--negro), #2A1215); color: #fff; padding: 54px 0; }
.pagina-cabecera h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pagina-cabecera p { color: rgba(255, 255, 255, .75); max-width: 640px; margin-top: 8px; }
.migas { font-size: .78rem; color: var(--gris-400); margin-bottom: 12px; }
.migas a:hover { color: #fff; }

/* ---------- Mapa con cambio de vista ---------- */
.mapa-caja {
  margin-top: 34px; border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); background: #fff;
}
.mapa-controles {
  display: flex; gap: 8px; padding: 12px 14px; align-items: center;
  border-bottom: 1px solid var(--gris-100); flex-wrap: wrap;
}
.mapa-boton {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 24px; border: 1.5px solid var(--gris-200); background: #fff;
  font-weight: 700; font-size: .85rem; color: var(--gris-800); cursor: pointer;
  transition: all .18s ease; font-family: inherit;
  /* line-height fijo: si no, el <a> queda más alto que los <button> */
  line-height: 1;
}
.mapa-boton:hover { border-color: var(--rojo); color: var(--rojo); }
.mapa-boton.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.mapa-boton:focus-visible { outline: 3px solid rgba(225, 10, 23, .35); outline-offset: 2px; }
.mapa-boton .ico { display: inline-flex; }
.mapa-abrir { margin-left: auto; border-style: dashed; }
.mapa-abrir:hover { border-style: solid; }
#mapa-frame { background: var(--gris-100); }

@media (max-width: 560px) {
  .mapa-controles { padding: 10px; }
  .mapa-boton { padding: 8px 13px; font-size: .8rem; }
  .mapa-abrir { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- Aviso de borrador del panel ---------- */
.aviso-borrador {
  background: #92400E; color: #FEF3C7; font-size: .82rem; font-weight: 600;
  padding: 8px 20px; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; text-align: center;
}
.aviso-borrador a { text-decoration: underline; color: #fff; }
.con-aviso-borrador .header { top: 0; }

/* ---------- Impresión (guía descargable) ---------- */
@media print {
  .header, .footer, .flotantes-der, .wa-flotante, .chat-burbuja, .chat-panel, .no-imprimir, .barra-comparar { display: none !important; }
  body { background: #fff; }
  .articulo { box-shadow: none; }
}

/* ==========================================================================
   Clientes felices — carrusel 3D de entregas
   Fondo claro como el resto del sitio. El dorado se conserva como acento,
   en dos tonos: uno oscuro con contraste suficiente para texto sobre blanco
   y otro vivo para los rellenos decorativos.
   ========================================================================== */
.felices {
  --dorado: #8A6D14;
  --dorado-vivo: #C9A227;
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff; color: var(--negro); padding: 96px 0 88px;
}
.felices-brillo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 46% at 50% 0%, rgba(201, 162, 39, .09), transparent 72%),
    radial-gradient(46% 42% at 10% 100%, rgba(20, 23, 28, .05), transparent 72%);
}

/* ---------- Encabezado ---------- */
.felices-encabezado { text-align: center; max-width: 660px; margin: 0 auto 54px; }
.felices-eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--dorado); margin-bottom: 18px;
}
.felices-eyebrow::after {
  content: ''; display: block; width: 46px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--dorado-vivo), transparent);
}
.felices-encabezado h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.14;
  letter-spacing: -.015em; margin-bottom: 16px;
}
.felices-encabezado p { color: var(--gris-600); font-size: 1.02rem; line-height: 1.6; }

/* Entrada escalonada al llegar la sección a pantalla */
.felices-encabezado > * { opacity: 0; transform: translateY(24px); }
.felices.en-vista .felices-encabezado > * {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22, .8, .3, 1), transform .8s cubic-bezier(.22, .8, .3, 1);
}
.felices.en-vista .felices-eyebrow { transition-delay: .05s; }
.felices.en-vista .felices-encabezado h2 { transition-delay: .18s; }
.felices.en-vista .felices-encabezado p { transition-delay: .3s; }

/* ---------- Escenario del carrusel ---------- */
.felices-carrusel {
  position: relative; height: clamp(250px, 30vw, 400px);
  perspective: 1900px; perspective-origin: 50% 45%;
  cursor: grab; touch-action: pan-y;   /* el gesto vertical sigue siendo de la página */
  -webkit-tap-highlight-color: transparent;
}
.felices-carrusel.arrastrando { cursor: grabbing; }
.felices-carrusel:focus-visible { outline: 2px solid var(--dorado); outline-offset: 10px; border-radius: 20px; }
.felices-escena {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}

/* Tarjeta apaisada y grande: es la protagonista de la sección */
.felices-card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(300px, 54vw, 660px);
  border-radius: 16px; overflow: hidden;
  transform-style: preserve-3d; backface-visibility: hidden;
  background: #fff; border: 1px solid var(--gris-200);
  box-shadow: 0 22px 50px rgba(20, 23, 28, .16);
  will-change: transform, opacity;
  transition: box-shadow .45s ease, border-color .45s ease;
}
.felices-card:not(.activa) { cursor: pointer; }
.felices-card.activa {
  border-color: rgba(201, 162, 39, .55);
  box-shadow: 0 34px 74px rgba(20, 23, 28, .26), 0 0 0 1px rgba(201, 162, 39, .3);
}

.felices-foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.felices-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22, .8, .3, 1);
  user-select: none; -webkit-user-drag: none;
}
.felices-card.activa:hover .felices-foto img { transform: scale(1.06); }
.felices-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 44%, rgba(8, 8, 8, .74));
}
.felices-sello {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 30px; font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #1B1403; background: linear-gradient(135deg, #E8D08B, var(--dorado-vivo));
  box-shadow: 0 6px 18px rgba(201, 162, 39, .35);
}

/* El panel de datos va sobre la foto: sigue siendo oscuro para leerse
   encima de cualquier imagen, sin depender del fondo de la sección. */
.felices-datos {
  position: absolute; inset-inline: 14px; bottom: 14px; z-index: 2;
  padding: 16px 19px; border-radius: 12px;
  background: rgba(18, 18, 18, .5);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
}
.felices-datos h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: 3px; }
.felices-vehiculo { color: #E8D08B; font-size: .9rem; font-weight: 600; margin-bottom: 7px; }
.felices-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: rgba(255, 255, 255, .68); font-size: .78rem;
}
.felices-meta .punto { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---------- Flechas ---------- */
.felices-flecha {
  position: absolute; top: 50%; z-index: 200; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--negro); background: rgba(255, 255, 255, .9);
  border: 1px solid var(--gris-200); box-shadow: var(--sombra);
  transition: background .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease;
}
.felices-flecha.izq { left: 4px; }
.felices-flecha.der { right: 4px; }
.felices-flecha:hover:not(:disabled) {
  background: var(--dorado-vivo); border-color: var(--dorado-vivo); color: #14100A;
}
.felices-flecha:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }
.felices-flecha:disabled { opacity: .35; cursor: default; }

/* ---------- Contador e indicadores ---------- */
.felices-nav {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: 34px; flex-wrap: wrap;
}
.felices-contador {
  font-family: var(--fuente-titulo); font-size: .92rem; font-weight: 700;
  letter-spacing: .16em; color: var(--gris-400);
  display: flex; align-items: baseline; gap: 7px;
}
.felices-contador .actual { color: var(--dorado); font-size: 1.5rem; }
.felices-contador .sep { opacity: .6; }
.felices-puntos { display: flex; align-items: center; gap: 7px; }
.felices-punto {
  width: 22px; height: 3px; border-radius: 3px; padding: 0;
  background: var(--gris-200);
  transition: background .4s ease, width .4s cubic-bezier(.22, .8, .3, 1);
}
.felices-punto:hover { background: var(--gris-400); }
/* min-width además de width: como elemento flex, el ancho solo se respeta
   si no puede encogerse. Sin esto la barra activa se quedaba del tamaño de
   las inactivas y solo se distinguía por el color. */
.felices-punto.activo {
  width: 40px; min-width: 40px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--dorado), var(--dorado-vivo));
}
.felices-punto:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; }

.felices-nav, .felices-valores { opacity: 0; transform: translateY(20px); }
.felices.en-vista .felices-nav,
.felices.en-vista .felices-valores {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22, .8, .3, 1) .55s, transform .8s cubic-bezier(.22, .8, .3, 1) .55s;
}
.felices.en-vista .felices-valores { transition-delay: .7s; }

/* ---------- Bloque inferior de valores ---------- */
.felices-valores {
  list-style: none; display: grid; gap: 26px 30px; margin-top: 76px;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gris-200); padding-top: 50px;
}
@media (max-width: 960px) { .felices-valores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .felices-valores { grid-template-columns: 1fr; } }
.felices-valor h3 {
  font-size: .96rem; font-weight: 700; margin: 16px 0 7px; letter-spacing: -.01em;
}
.felices-valor p { color: var(--gris-600); font-size: .85rem; line-height: 1.6; }
.felices-ico { display: inline-flex; color: var(--dorado); }
.felices-ico svg { width: 30px; height: 30px; display: block; }

@media (max-width: 700px) {
  .felices { padding: 68px 0 62px; }
  .felices-carrusel { perspective: 1100px; height: clamp(200px, 52vw, 300px); }
  /* 78vw deja libre el carril de las flechas a cada lado */
  .felices-card { width: min(78vw, 420px); }
  /* En pantallas estrechas la tarjeta ocupa casi todo el ancho, así que las
     flechas quedan por fuerza sobre ella: se suben al tercio superior para
     que caigan sobre la foto y no sobre el panel con los datos. */
  .felices-flecha { width: 44px; height: 44px; top: 32%; }
  .felices-flecha.izq { left: -8px; }
  .felices-flecha.der { right: -8px; }
  .felices-datos { padding: 11px 13px; inset-inline: 10px; bottom: 10px; }
  .felices-datos h3 { font-size: .92rem; }
  .felices-vehiculo { font-size: .78rem; margin-bottom: 4px; }
  .felices-meta { font-size: .7rem; }
  .felices-sello { top: 10px; left: 10px; padding: 6px 12px; font-size: .68rem; }
  .felices-valores { margin-top: 54px; padding-top: 38px; gap: 30px; }
  .felices-eyebrow { font-size: .78rem; }
  .felices-nav { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .felices-encabezado > *, .felices-nav, .felices-valores { opacity: 1; transform: none; }
  .felices-escena, .felices-foto img, .felices-punto { transition: none; }
}

/* ==========================================================================
   Optimización táctil y de lectura en móvil
   ==========================================================================
   El sitio se diseñó con estados :hover, que en una pantalla táctil no
   existen: al tocar no pasaba nada hasta que la acción terminaba, y el
   efecto de hover se quedaba pegado después del toque. Este bloque da
   respuesta inmediata al dedo, agranda los objetivos pequeños y ajusta la
   tipografía a cada tamaño.
   ========================================================================== */

/* ---------- 1. Respuesta inmediata al toque ----------
   El recuadro azul del navegador se sustituye por una respuesta propia. */
a, button, input, select, textarea, summary, [role="tab"], .card-auto {
  -webkit-tap-highlight-color: transparent;
}

/* La reacción va en el pointer-down, no al soltar: 90 ms para que se sienta
   instantánea sin llegar a parpadear. */
.btn:active,
.pildora:active,
.mapa-boton:active,
.boton-icono:active,
.nav-fav:active,
.show-flecha:active,
.felices-flecha:active,
.red-flotante:active,
.wa-flotante:active,
.chat-burbuja:active,
.hamburguesa:active {
  transform: scale(.95);
  transition: transform 90ms ease-out;
}

/* Las superficies grandes se hunden menos: a igual escala, una tarjeta
   aparenta moverse mucho más que un botón. */
.card-auto:active,
.card-categoria:active,
.card-blanca:active,
.card-blog:active,
.marquee-item:active,
.entrega:active,
.felices-card:not(.activa):active {
  transform: scale(.985);
  transition: transform 90ms ease-out;
}

.nav-links a:active,
.footer a:active,
.header-barra-top a:active { opacity: .55; transition: opacity 90ms ease-out; }

/* En pantallas sin puntero el :hover se queda pegado tras el toque: se anula
   para que el elemento vuelva a su sitio al levantar el dedo. */
@media (hover: none) {
  .btn:hover,
  .show-flecha:hover,
  .marquee-item:hover,
  .card-auto:hover,
  .card-auto:hover .card-foto img,
  .boton-icono:hover,
  .card-blanca:hover,
  .badge-google:hover,
  .banco-logo:hover img,
  .card-categoria:hover,
  .card-blog:hover,
  .wa-flotante:hover,
  .chat-burbuja:hover,
  .red-flotante:hover,
  .felices-card.activa:hover .felices-foto img,
  .entrega:hover img { transform: none; }
  .red-flotante:hover { width: var(--flot-red); filter: none; }
  .chat-burbuja:hover { background: var(--rojo); }
}

/* ---------- 2. Objetivos táctiles ----------
   Apple pide 44px. Donde agrandar rompería la composición se amplía solo el
   área sensible con relleno y margen negativo: el punto sigue viéndose
   pequeño, pero se puede tocar. */
/* El área tocable se amplía con un pseudo-elemento superpuesto, no tocando
   la caja del punto: cambiar box-sizing interfería con el ancho del
   indicador activo, que dejaba de alargarse. Así el punto conserva su
   tamaño y sus reglas, y el dedo dispone de 44px. */
.show-dot, .felices-punto { position: relative; }
.show-dot::before, .felices-punto::before {
  content: ''; position: absolute; inset: -18px -9px;
}

.show-flecha { width: 44px; height: 44px; }
.nav-fav { padding: 13px; }
.hamburguesa { padding: 11px; }

/* El control deslizante tenía 6px de alto: imposible de agarrar con el dedo */
input[type="range"] { height: 44px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--gris-200);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--rojo); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(20, 23, 28, .3); cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--gris-200); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff;
  background: var(--rojo); box-shadow: 0 2px 8px rgba(20, 23, 28, .3);
}
/* Dentro del simulador oscuro la pista necesita más contraste */
.resultado-cuota input[type="range"]::-webkit-slider-runnable-track,
.simulador input[type="range"]::-webkit-slider-runnable-track { background: var(--gris-200); }

/* ---------- 3. Tipografía: el tracking depende del tamaño ----------
   Un mismo letter-spacing no sirve para todos los tamaños: al crecer, las
   letras se ven demasiado separadas; al encoger, demasiado juntas. */
.hero h1,
.pagina-cabecera h1 { letter-spacing: -.022em; line-height: 1.08; }
.titulo-seccion,
.cuota-valor,
.precio-grande { letter-spacing: -.018em; }
.card-titulo,
.show-info h2,
.felices-datos h3 { letter-spacing: -.012em; }
/* El texto pequeño gana legibilidad separando un pelo las letras */
.nota-legal, .card-cuota, .spec-label, .chip { letter-spacing: .005em; }

/* Nada de texto por debajo de 12px en móvil: en pantalla pequeña y a pulso
   deja de leerse cómodamente. */
@media (max-width: 640px) {
  .chip { font-size: .78rem; }
  .nota-legal { font-size: .76rem; line-height: 1.55; }
  .spec-label { font-size: .76rem; }
  .etiqueta { font-size: .75rem; }
  .blog-meta { font-size: .78rem; }
  .marquee-overlay strong, .marquee-overlay span { font-size: .76rem; }
  .show-etiqueta { font-size: .76rem; }
  .show-cuota { font-size: .78rem; }
  .nav-fav .contador { font-size: .72rem; }
  /* Los títulos largos respiran mejor con el interlineado algo más suelto */
  .hero h1 { line-height: 1.12; }
  .titulo-seccion { line-height: 1.16; }
  body { font-size: 16px; }          /* evita el zoom automático de iOS en los campos */
}

/* Los campos con menos de 16px hacen que iOS acerque la página al enfocarlos */
input, select, textarea { font-size: max(16px, 1rem); }

/* ---------- 4. Preferencias del sistema ---------- */

/* Transparencia reducida: el desenfoque se sustituye por superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  .header { background: #fff; backdrop-filter: none; }
  .felices-datos {
    background: rgba(12, 12, 12, .92); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .felices-flecha { background: #fff; backdrop-filter: none; }
  .show-chip { background: #fff; }
}

/* Contraste alto: bordes definidos y fondos casi sólidos */
@media (prefers-contrast: more) {
  .header { background: #fff; border-bottom: 2px solid var(--negro); }
  .btn-borde { border-color: var(--negro); }
  .card-auto, .card-blanca, .card-blog, .card-categoria { border: 1px solid var(--gris-800); }
  .chip { border: 1px solid var(--gris-600); }
  .felices-datos { background: rgba(0, 0, 0, .96); border-color: #fff; }
  .subtitulo-seccion, .felices-valor p, .card-cuota { color: var(--gris-800); }
}

/* Movimiento reducido: la respuesta al toque se conserva porque informa,
   pero sin desplazamientos ni rebotes. */
@media (prefers-reduced-motion: reduce) {
  .marquee-pista { animation: none !important; }
  .felices-card { transition: none !important; }
  .btn:active, .card-auto:active, .card-categoria:active,
  .card-blanca:active, .card-blog:active, .marquee-item:active {
    transform: none; opacity: .7;
  }
}

/* ---------- 5. Controles del catálogo al tamaño mínimo ---------- */
.pildora { padding: 12px 18px; min-height: 44px; }
/* Los botones de acción de cada tarjeta eran los más difíciles de acertar */
.btn-mini { min-height: 44px; }
.boton-icono { width: 44px; height: 44px; }      /* favorito y comparar */
.filtros input, .filtros select,
.herramientas input, .herramientas select { min-height: 44px; }
/* Las migas de pan son texto en línea: se les da alto tocable sin moverlas */
.migas a { display: inline-block; padding: 6px 0; }

@media (max-width: 640px) {
  /* En una fila que se envuelve, botones de ancho completo se tocan mejor
     que varios estrechos pegados. */
  .acciones-secundarias { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acciones-secundarias .btn { min-height: 46px; }
}

/* ---------- 6. Una sola banda flotante en móvil ----------
   En vertical, una columna fija pegada al borde izquierdo se cruza con el
   contenido a cualquier altura: en el catálogo tapaba las etiquetas del
   formulario. Se tumba en horizontal para que todo lo flotante viva en una
   única franja inferior, y el pie reserva ese alto. */
@media (max-width: 640px) {
  .redes-flotantes { flex-direction: row; align-items: center; }
  .footer { padding-bottom: calc(var(--flot-y) + 62px); }
  .barra-comparar { bottom: calc(var(--flot-y) + 62px); }
}

/* ---------- 7. Simulador en pantallas estrechas ----------
   La fila «etiqueta / valor» iba en flex sin permiso para envolver, y como
   las columnas de la rejilla se dimensionan por su contenido mínimo, esa
   fila empujaba toda la tarjeta fuera de la pantalla. Se ve como un corte
   por la derecha, no como una barra de desplazamiento. */
.simulador-grid > * { min-width: 0; }
.control-rango .fila-etiqueta { flex-wrap: wrap; gap: 2px 12px; }
.control-rango .valor-actual { white-space: nowrap; }
.resultado-cuota .detalle-fila { flex-wrap: wrap; gap: 0 12px; }
.resultado-cuota .cuota-valor { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  /* 28px de relleno a cada lado se comen 56 de 320 */
  .simulador { padding: 18px 14px; }
  .resultado-cuota { padding: 20px 16px; }
  .simulador-grid { gap: 22px; }
  .resultado-cuota .cuota-valor { font-size: 2rem; }
}

/* ---------- 8. Textos sin espacios en pantallas estrechas ----------
   Un correo o una URL larga no tienen dónde partirse: fuerzan el ancho
   mínimo de su columna y empujan la página. */
.detalle-grid > *, .grid-3 > *, .form-caja { min-width: 0; }
#datos-contacto a, #datos-contacto span,
a[href^="mailto:"], a[href^="tel:"],
.card-blanca p, .footer a { overflow-wrap: anywhere; }

/* ==========================================================================
   Descripción del vehículo
   El anuncio se pega tal cual desde WhatsApp, con sus saltos de línea y sus
   líneas en blanco entre bloques. Sin `pre-line` el navegador los colapsa
   todos y queda un solo párrafo corrido, imposible de leer.
   ========================================================================== */
.descripcion-vehiculo {
  white-space: pre-line;      /* respeta los saltos, colapsa espacios sobrantes */
  overflow-wrap: anywhere;    /* una URL larga no debe desbordar la tarjeta */
  color: var(--gris-800);
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  padding: 22px;
  line-height: 1.75;          /* el texto viene en listas: necesita aire */
}

@media (max-width: 480px) {
  .descripcion-vehiculo { padding: 16px; line-height: 1.7; }
}