/* ===========================================================
   polish.css — capa de pulido de interacción y mobile (R&CIA)
   Se carga AL FINAL del <head>: refina lo existente, no rediseña.
   Principios: respuesta al presionar, targets >= 44px, sin hover
   pegado en táctiles, movimiento solo si el usuario lo acepta.
   =========================================================== */

:root {
  --tap-min: 44px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. Respuesta táctil ---------- */
a, button, [role="button"], summary, label, select, input, textarea {
  touch-action: manipulation;              /* sin retraso de 300ms ni zoom por doble toque */
  -webkit-tap-highlight-color: transparent;
}

html { scroll-padding-top: 96px; }          /* los anclajes (#form) no quedan bajo el header */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- 2. Feedback instantáneo al presionar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .hs-submit, .brands-all-btn, .ig-promo__btn, .card-nav-social-btn,
  .cardnav-iconbtn, .card-nav-cta-button, .back-to-top-btn {
    transition: transform 0.12s var(--ease-out), box-shadow 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease;
  }
  .btn:active, .brands-all-btn:active, .ig-promo__btn:active,
  .card-nav-cta-button:active, .cardnav-iconbtn:active {
    transform: scale(0.97);
  }
  .vcard, .body-style-link, .brand-link {
    transition: transform 0.16s var(--ease-out);
  }
  .vcard:active, .body-style-link:active, .brand-link:active {
    transform: scale(0.985);
  }
}

/* ---------- 3. Foco visible coherente (teclado / accesibilidad) ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary, #0d77be);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .vcard:focus-visible { outline-offset: 4px; }

/* ---------- 4. Tipografía: mejores cortes de línea ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- 5. Targets táctiles >= 44px (sin mover el layout) ---------- */
/* Zona de toque de 44px sin mover el logo: en escritorio va centrado (position:absolute), en celular alineado a la derecha */
.logo-container { padding: 8px 6px; margin-block: -8px; }
@media (max-width: 768px) { .logo-container { margin-inline: -6px; } }
.hamburger-menu { min-width: var(--tap-min); margin-left: -7px; } /* 44px de toque, rayas en el mismo lugar */

/* Áreas de toque invisibles: extienden el hit-box sin cambiar el diseño.
   (El logo NO lleva ::after: en celular no es position:absolute y el área se expandía a todo el encabezado,
   tragándose los toques del menú. Su zona de toque se agranda con padding + margen negativo, abajo.) */
.wa-strip__link,
.footer-dev__link,
.swiper-pagination-bullet { position: relative; }
.vehicle-breadcrumb a { position: relative; }
.vehicle-breadcrumb a::after { content: ""; position: absolute; inset: -12px -6px; }
.wa-strip__link::after { content: ""; position: absolute; inset: -5px 0; }
.footer-dev__link::after { content: ""; position: absolute; inset: -14px -8px; }
.swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

@media (max-width: 900px) {
  .footer-column a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
  }
}

/* Campos de formulario: 44px+ y 16px (iOS no hace zoom al enfocar) */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    min-height: var(--tap-min);
    font-size: max(16px, 1em);
  }
}

/* ---------- 6. Sin hover pegado en pantallas táctiles ---------- */
@media (hover: none) {
  .btn-primary:hover { background: var(--color-primary); transform: none; }
  .btn-outline:hover { background: transparent; }
  .vehicle-card:hover img,
  .hs-submit:hover, .brands-all-btn:hover, .ig-promo__btn:hover,
  .brand-link:hover .brand-logo,
  .card-nav-social-btn:hover, .card-nav-icon:hover, .cardnav-iconbtn:hover,
  .header-icon-btn:hover {
    transform: none;
  }
}

/* ---------- 7. Reduced motion: sin desplazamientos, solo cambios de estado ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .vcard, .body-style-link, .brand-link { transition: none; }
}

/* ---------- 8. Botón flotante de WhatsApp (.wa-float, definido en footer.php) ---------- */
.wa-float {
  transition: transform 0.32s var(--ease-out), opacity 0.24s ease;
}
@media (max-width: 640px) {
  .wa-float {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}
/* Se aparta al bajar y en el footer; vuelve al subir (wa-float.js). No tapa lo que se está leyendo. */
.wa-float.is-away {
  transform: translate3d(0, calc(100% + 32px), 0);
  opacity: 0;
  pointer-events: none;
}
.wa-float:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity 0.2s ease; }
  .wa-float.is-away { transform: none; }
  .wa-float:active { transform: none; }
}

/* ---------- 9. Footer: en mobile los separadores "|" quedan huérfanos en su propia línea ---------- */
@media (max-width: 640px) {
  .footer-sep { display: none; }
  .footer-bottom { row-gap: 8px; }
}

/* ---------- 10. Carruseles de tarjetas: scroll nativo con scroll-snap (ver ry-carousel.js) ----------
   En mobile/táctil no hay Swiper: el navegador hace el scroll y el momentum (fluido, sin JS por frame). */
.swiper.is-native {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;          /* el gesto no dispara "atrás" del navegador */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 28px !important;          /* antes 60px abajo: dejaba un hueco enorme */
}
.swiper.is-native::-webkit-scrollbar { display: none; }
.swiper.is-native > .swiper-wrapper {
  display: flex;
  width: max-content;
  box-sizing: content-box;
  gap: 16px;
  padding-inline: 16px;
  transform: none !important;
  transition: none !important;
}
.swiper.is-native .swiper-slide {
  flex: 0 0 auto;
  margin: 0 !important;
  scroll-snap-align: start;
  /* sin scroll-snap-stop: un flick puede pasar varias tarjetas, como el scroll nativo */
}
.swiper.is-native .vcard { transition: none; transform: none; }
.swiper.is-native .vcard:active { transform: scale(0.985); }

/* ---------- 11. Mobile: escala tipográfica única y ritmo vertical parejo ----------
   Antes: h2 de 24, 27, 27, 29 y 32px con interlineado 1.5 (demasiado suelto en títulos grandes);
   separaciones entre secciones de ~50 a ~97px. */
@media (max-width: 640px) {
  :root { --title-h2: clamp(1.6rem, 7.2vw, 1.8rem); }   /* 28px en un teléfono de 390px */

  h1 { line-height: 1.1;  letter-spacing: -0.025em; }
  h2 { line-height: 1.15; }

  .home-body-styles h2,
  .home-cta-final h2,
  .brands-title,
  .home-brands .brands-title,
  .brands-header .brands-title,
  .related-header h2,
  .home-latest-shell .related-header h2,
  .ig-promo__title { font-size: var(--title-h2); line-height: 1.15; }

  /* "Ver todo" a una línea, alineado con la base del título */
  .related-header,
  .home-latest-shell .related-header { align-items: baseline; }
  .related-all { font-size: 1rem; white-space: nowrap; flex: none; }

  /* Separación vertical entre secciones más pareja */
  .home-brands    { padding-bottom: 40px; }
  .home-cta-final { padding-bottom: 24px; }
  .ig-promo       { padding-top: 32px; }
}

/* ---------- 12. Puntos del carrusel de la ficha: separación de 24px entre centros (WCAG 2.5.8) ---------- */
.vehicle-swiper-pagination .swiper-pagination-bullet,
.promo-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 8px; }
.vehicle-swiper-pagination .swiper-pagination-bullet-active,
.promo-pagination .swiper-pagination-bullet-active { width: 24px; }