/* ============================================================
   RR AudioCar — Capa de microinteracciones 2026
   ------------------------------------------------------------
   Enfoque CONSERVADOR: solo agrega comportamiento nuevo
   (hover, focus visible, transiciones, accesibilidad).
   NO pisa colores ni tamaños del theme existente.
   ============================================================ */

/* === DESIGN TOKENS (sin afectar nada visible solo) ============= */
:root {
  --rr-ease:        cubic-bezier(.4, 0, .2, 1);
  --rr-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --rr-brand:       #E63946;
}

/* Smooth scroll global salvo prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Selección de texto con tono de marca */
::selection {
  background: rgba(230, 57, 70, .18);
}

/* Tipografía global más prolija */
body, p, h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Precios y números: tabular-nums para alineación visual */
.woocommerce-Price-amount,
.rr-ra-card__price,
.rr-ra-card__old,
.rr-cart-footer__amount {
  font-variant-numeric: tabular-nums;
}

/* === MICROINTERACCIONES SUTILES =============================== */

/* Hover lift en cards de producto (solo transform + sombra) */
.rr-ra-card {
  transition: transform .25s var(--rr-ease), box-shadow .25s var(--rr-ease);
  will-change: transform;
}
.rr-ra-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .15);
}

/* Imagen del producto se agranda muy sutil al hover */
.rr-ra-card__media img {
  transition: transform .35s var(--rr-ease);
}
.rr-ra-card:hover .rr-ra-card__media img {
  transform: scale(1.04);
}

/* Botón add-to-cart de la card: aparece más rápido en hover */
.rr-ra-card__actions {
  transition: opacity .18s var(--rr-ease), transform .18s var(--rr-ease);
}

/* Burbujas de categorías home: lift suave */
.ml-bubble {
  transition: transform .22s var(--rr-ease);
}
.ml-bubble:hover {
  transform: translateY(-2px);
}
.ml-bubble__circle {
  transition: box-shadow .2s var(--rr-ease);
}
.ml-bubble:hover .ml-bubble__circle {
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .2);
}

/* ML cards (home tarjetitas) */
.rr-ml-card,
.ml-cat-card {
  transition: transform .22s var(--rr-ease), box-shadow .22s var(--rr-ease);
}
.rr-ml-card:hover,
.ml-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .15);
}

/* === FOCUS VISIBLE (a11y, sin tocar el look normal) =========== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible,
[role='tab']:focus-visible {
  outline: 2px solid var(--rr-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === SKIP LINK ================================================ */
.rr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 700;
}
.rr-skip-link:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* === SCREEN-READER-TEXT (compat WP) =========================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* === REDUCED MOTION =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === HEADER: sombra suave al hacer scroll ===================== */
.ml-header {
  transition: box-shadow .2s var(--rr-ease);
}
.ml-header.is-scrolled {
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

/* === BACK-TO-TOP =============================================== */
.rr-back-to-top {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .25);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 99;
  transition: transform .2s var(--rr-ease), opacity .2s var(--rr-ease);
}
.rr-back-to-top.is-visible {
  display: inline-flex;
}
.rr-back-to-top:hover {
  transform: translateY(-2px);
}

/* === TRUST BADGES en checkout (componente NUEVO, no pisa nada) === */
.rr-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
}
.rr-trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}
.rr-trust-row__item svg {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
}

/* === ALERTAS WC: solo border-left + radio (no toca colores) ==== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 8px;
}

/* === TOAST add-to-cart (refinado SUTIL) ======================== */
.rr-atc-toast {
  border-radius: 8px;
  font-weight: 600;
}

/* === FORM CONTACTO: solo agregamos focus halo, sin cambiar tamaños */
.rr-contact__form-group input:focus,
.rr-contact__form-group textarea:focus {
  outline: none;
  border-color: var(--rr-brand);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .12);
}

/* === Galería single product: hover sutil en thumbs ============ */
.rr-thumb {
  transition: transform .15s var(--rr-ease), border-color .15s var(--rr-ease);
}
.rr-thumb:hover {
  transform: scale(1.04);
}

/* === SAFE AREA INSET para iPhone =============================== */
@supports (padding: max(0px)) {
  .rr-cart-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* === Imagen del producto en mini-cart: prolijidad mínima ======= */
.rr-cart-body .woocommerce-mini-cart-item img {
  background: #f7f8fa;
  border-radius: 8px;
}

/* === Header mobile más limpio (fondo claro + search pill) ====== */
@media (max-width: 768px) {
  .ml-mobile-bar {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .06) !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-bottom: 1px solid #eef0f3 !important;
  }
  .ml-mobile-search-input {
    background: #f3f4f6 !important;
    border: 0 !important;
    border-radius: 999px !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
  }
  .ml-mobile-search-input::placeholder {
    color: #9ca3af !important;
  }
  .ml-mobile-search-input:focus {
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, .15) !important;
    outline: none !important;
  }
  .ml-mob-cart-count {
    background: var(--rr-brand) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
  }
}

/* === Overrides puntuales pedidos =============================== */

/* 1) Quitar el degradado rojo (::before) del hero en home y resto.
   Estaba en style.css aplicado a .rr-hero y al primer top-section de Elementor. */
.rr-hero::before,
body .elementor-location-single .elementor-top-section:first-child::before,
body .elementor-location-page .elementor-top-section:first-child::before,
body .elementor .elementor-top-section:first-child::before,
body .elementor-section-wrap > .elementor-top-section:first-child::before {
  content: none !important;
  background: none !important;
  display: none !important;
  height: 0 !important;
}

/* 2) Sacar el filter (brightness/invert) a los SVG del menú hamburguesa
   y del carrito mobile, para que se vean en su color original. */
.ml-mobile-ico--burger,
.ml-mobile-ico--cart,
.ml-cart-ico {
  filter: none !important;
  -webkit-filter: none !important;
}

/* 3) Ocultar el botón flotante "back to top" */
.rr-back-to-top,
.rr-back-to-top.is-visible {
  display: none !important;
}

/* === FIN ====================================================== */