/* =========================================================
   RR Audiocar — Home modernization 2026
   Estilo limpio, generoso en whitespace, branding rojo unificado.
   Pisa colores rosa/azul anteriores con el rojo RR (#d00000).
   ========================================================= */

:root{
  --rrh-red:#d00000;
  --rrh-red-dark:#8f0000;
  --rrh-red-soft:#fff5f5;
  --rrh-ink:#0f172a;
  --rrh-text:#1f2937;
  --rrh-muted:#6b7280;
  --rrh-line:#eaedf2;
  --rrh-bg:#f7f8fa;
  --rrh-surface:#ffffff;
  --rrh-radius:16px;
  --rrh-radius-lg:24px;
  --rrh-shadow-sm:0 4px 12px rgba(15,23,42,.04);
  --rrh-shadow:0 10px 28px rgba(15,23,42,.06);
  --rrh-shadow-hover:0 16px 36px rgba(15,23,42,.10);
  --rrh-ease:cubic-bezier(.22,.61,.36,1);
}

/* ===================
   GRID DE SECCIONES
   =================== */
body.home main,
body.home #page-content,
body.home .site-content{
  background:var(--rrh-bg);
}
body.home .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:1280px !important;
}

body.home section.elementor-section,
body.home .elementor-widget-wrap{
  position:relative;
}

/* Más respiración entre bloques principales */
body.home .ml-bubbles,
body.home .ml-carousel,
body.home .ml-offers-block,
body.home .ml-cats-block,
body.home .ml-cat-carousel,
body.home .rr-ofertas-tabs,
body.home .rr-ml-cards-wrap,
body.home .rr-home-mobile-snap,
body.home .rr-mobile-home-categories{
  margin-bottom:44px;
}

/* ===================
   TIPOGRAFÍA UNIFICADA
   =================== */
body.home .ml-h3,
body.home .ml-title,
body.home h2.section-title,
body.home .elementor-heading-title{
  color:var(--rrh-ink) !important;
  font-weight:800 !important;
  letter-spacing:-.022em !important;
  line-height:1.12 !important;
}
body.home .ml-h3{ font-size:30px !important; }
body.home .ml-title{ font-size:26px !important; margin-bottom:18px !important; }
@media (max-width: 720px){
  body.home .ml-h3{ font-size:22px !important; }
  body.home .ml-title{ font-size:20px !important; margin-bottom:14px !important; }
}

/* Links "Ver todo" / "Ver más" — pasan a rojo branding */
body.home .ml-block-link,
body.home .ml-cats-link,
body.home .ml-offers-link,
body.home a.ver-todo,
body.home a.ver-mas{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-left:auto !important;
  color:var(--rrh-red) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
  padding:8px 14px !important;
  border:1px solid var(--rrh-red) !important;
  border-radius:9999px !important;
  background:#fff !important;
  transition:background .15s, color .15s !important;
}
body.home .ml-block-link:hover,
body.home .ml-cats-link:hover,
body.home .ml-offers-link:hover{
  background:var(--rrh-red) !important;
  color:#fff !important;
}

/* ===================
   PRODUCT CARDS (rr-ra-card) — refinado
   =================== */
body.home .rr-ra-card,
.rr-ra-card{
  background:#fff;
  border:1px solid var(--rrh-line);
  border-radius:var(--rrh-radius);
  box-shadow:var(--rrh-shadow-sm);
  transition:transform .22s var(--rrh-ease), box-shadow .22s var(--rrh-ease), border-color .22s var(--rrh-ease);
  overflow:hidden;
}
body.home .rr-ra-card:hover,
.rr-ra-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--rrh-shadow-hover);
  border-color:transparent;
}
.rr-ra-card__media img{
  border-radius:0;
  transition:transform .35s var(--rrh-ease);
}
.rr-ra-card:hover .rr-ra-card__media img{
  transform:scale(1.04);
}
.rr-ra-card__badge{
  background:var(--rrh-red);
  color:#fff;
  font-weight:800;
  font-size:11px;
  padding:5px 9px;
  border-radius:9999px;
  letter-spacing:.02em;
  box-shadow:0 4px 10px rgba(208,0,0,.25);
}
.rr-ra-card__title{
  font-size:14px;
  font-weight:600;
  color:var(--rrh-text);
  line-height:1.32;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:36px;
}
.rr-ra-card__price{
  font-size:20px;
  font-weight:800;
  color:var(--rrh-ink);
  letter-spacing:-.01em;
}
.rr-ra-card__old{
  font-size:12.5px;
  color:var(--rrh-muted);
  text-decoration:line-through;
}
.rr-ra-card__ship{
  font-size:12px;
  color:#10b981;
  font-weight:600;
}
.rr-ra-card__btn{
  background:var(--rrh-red) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:10px !important;
  font-weight:800 !important;
  font-size:13px !important;
  letter-spacing:.01em !important;
  box-shadow:0 6px 14px rgba(208,0,0,.22) !important;
  height:38px !important;
  transition:background .15s !important;
}
.rr-ra-card__btn:hover{
  background:var(--rrh-red-dark) !important;
}

/* ===================
   BUBBLE CATEGORIES (categorías redondas)
   =================== */
body.home .ml-bubble,
body.home .ml-cat-bubble,
body.home .ml-bubbles__item{
  text-decoration:none !important;
}
body.home .ml-bubble__circle,
body.home .ml-cat-bubble__circle{
  width:88px !important;
  height:88px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid var(--rrh-line) !important;
  box-shadow:var(--rrh-shadow-sm) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  transition:transform .25s var(--rrh-ease), box-shadow .25s var(--rrh-ease), border-color .25s var(--rrh-ease) !important;
  margin:0 auto 8px !important;
}
body.home .ml-bubble:hover .ml-bubble__circle,
body.home .ml-cat-bubble:hover .ml-cat-bubble__circle{
  transform:translateY(-3px);
  border-color:var(--rrh-red);
  box-shadow:0 14px 28px rgba(208,0,0,.12);
}
body.home .ml-bubble__circle img,
body.home .ml-cat-bubble__circle img{
  width:64% !important;
  height:64% !important;
  object-fit:contain;
}
body.home .ml-bubble__label,
body.home .ml-cat-bubble__label{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--rrh-text) !important;
  text-align:center !important;
}

/* ===================
   GRID DE CATEGORÍAS — desktop
   =================== */
.rr-cats-grid,
body.home .ml-cats-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:14px;
}
@media (max-width: 1100px){
  .rr-cats-grid,
  body.home .ml-cats-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px){
  .rr-cats-grid,
  body.home .ml-cats-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; }
}

/* ===================
   BRANDS GRID (marcas)
   =================== */
.rrac-brands-grid,
.rr-marcas-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:14px;
}
@media (max-width: 1100px){
  .rrac-brands-grid,
  .rr-marcas-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px){
  .rrac-brands-grid,
  .rr-marcas-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; }
}
.rrac-brand-card,
.rr-marca-card{
  background:#fff;
  border:1px solid var(--rrh-line);
  border-radius:var(--rrh-radius);
  padding:18px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1;
  text-decoration:none !important;
  transition:transform .2s var(--rrh-ease), box-shadow .2s var(--rrh-ease), border-color .2s var(--rrh-ease);
  filter:saturate(.92);
}
.rrac-brand-card:hover,
.rr-marca-card:hover{
  transform:translateY(-3px);
  border-color:var(--rrh-red);
  box-shadow:var(--rrh-shadow);
  filter:saturate(1);
}
.rrac-brand-card img,
.rr-marca-card img{
  max-width:100%;
  max-height:80%;
  object-fit:contain;
}

/* ===================
   HERO / BANNER PROMOS — modernización
   =================== */
body.home .elementor-section.has-banner,
body.home .ml-hero{
  border-radius:var(--rrh-radius-lg);
  overflow:hidden;
  box-shadow:var(--rrh-shadow);
}
body.home .elementor-widget-image > .elementor-widget-container{
  border-radius:var(--rrh-radius-lg);
  overflow:hidden;
}

/* ===================
   MOBILE SNAP — categorías scroll horizontal
   =================== */
.rr-home-mobile-snap,
.rr-mobile-home-categories{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:10px;
  padding:6px 12px 14px;
  margin:0 -12px 28px;
}
.rr-home-mobile-snap::-webkit-scrollbar,
.rr-mobile-home-categories::-webkit-scrollbar{ display:none; }
.rr-home-mobile-snap > *,
.rr-mobile-home-categories > *{
  scroll-snap-align:start;
  flex:0 0 auto;
}

/* ===================
   TRUST BADGES (también para home)
   =================== */
.rr-trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 22px;
  padding:18px;
  margin:32px auto;
  background:#fff;
  border:1px solid var(--rrh-line);
  border-radius:var(--rrh-radius);
  box-shadow:var(--rrh-shadow-sm);
  max-width:1280px;
}
.rr-trust-row__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--rrh-text);
}
.rr-trust-row__item svg{
  width:22px; height:22px;
  color:var(--rrh-red);
  flex-shrink:0;
}
@media (max-width: 640px){
  .rr-trust-row{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 16px;
    padding:14px;
  }
  .rr-trust-row__item{
    flex:0 0 calc(50% - 8px);
    font-size:12.5px;
  }
}

/* ===================
   SECTION DIVIDER / SEPARADORES
   =================== */
.rr-section-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:24px auto;
  max-width:1280px;
  padding:0 12px;
}
.rr-section-divider::before,
.rr-section-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--rrh-line), transparent);
}

/* ===================
   ELEMENTOR — ajustes generales en home
   =================== */
body.home .elementor-widget-heading h2,
body.home .elementor-widget-heading h3{
  font-weight:800 !important;
  letter-spacing:-.02em;
}
body.home .elementor-button{
  border-radius:10px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  transition:transform .1s, box-shadow .2s !important;
}
body.home .elementor-button:active{ transform:translateY(1px); }
body.home .elementor-button-primary,
body.home .elementor-button.elementor-button-link{
  background:var(--rrh-red) !important;
  color:#fff !important;
}
body.home .elementor-button-primary:hover{
  background:var(--rrh-red-dark) !important;
}

/* ===================
   MOBILE — refinamientos
   =================== */
@media (max-width: 768px){
  body.home .ml-bubbles,
  body.home .ml-carousel,
  body.home .ml-offers-block,
  body.home .ml-cats-block,
  body.home .ml-cat-carousel,
  body.home .rr-ofertas-tabs,
  body.home .rr-ml-cards-wrap{
    margin-bottom:28px;
  }
  body.home .ml-bubble__circle,
  body.home .ml-cat-bubble__circle{
    width:68px !important;
    height:68px !important;
  }
  .rrac-brand-card,
  .rr-marca-card{
    padding:12px 8px;
  }
  .rr-ra-card__price{ font-size:17px; }
  .rr-ra-card__title{ font-size:13px; min-height:32px; }
}

/* Reducir tamaño extra-mobile */
@media (max-width: 420px){
  body.home .ml-bubble__circle,
  body.home .ml-cat-bubble__circle{
    width:60px !important;
    height:60px !important;
  }
  body.home .ml-bubble__label,
  body.home .ml-cat-bubble__label{
    font-size:11.5px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.home *,
  .rr-ra-card,
  .rrac-brand-card,
  .ml-bubble__circle{
    transition:none !important;
  }
}