/* =========================================================================
   Tema visual Regioamerica  (Fase 5 - unificacion 2026-07)
   Capa aditiva: se carga despues del CSS existente y solo ajusta marca,
   tarjetas de producto, botones y accesibilidad tactil. No reemplaza nada.
   Este archivo es por pais: cada servidor puede ajustar su paleta aqui.
   ========================================================================= */
:root{
  --ra-primary:#E06E3F;
  --ra-primary-dark:#B6531F;
  --ra-primary-soft:#FDF1EB;
  --ra-ink:#3a362e;
  --ra-muted:#7d7768;
  --ra-border:#e2ddd3;
  --ra-radius:12px;
  --ra-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---- Tipografia estandarizada (web publica y cotizador) ---- */
body{ font-family:var(--ra-font); }

/* ---- Aire debajo del contenido antes del pie/cintillo ---- */
.main-container{ padding-bottom:40px; }

/* ---- Tarjetas de producto uniformes ---- */
/* El margen de las tarjetas del listado lo maneja el CSS original.
   En los carruseles (relacionados y nuestras marcas) quedaba 0 de aire
   arriba y espacio abajo; aqui lo equilibramos (mismo arriba y abajo). */
.products-slick .category-products ul.products-grid li.item{ margin-top:15px !important; margin-bottom:15px !important; }
.products-grid .item .item-inner{
  height:100%;
  background:#fff;
  border:0.5px solid var(--ra-border);
  border-radius:var(--ra-radius);
  overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.products-grid .item .item-inner:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.09);
  transform:translateY(-2px);
}
/* marco de imagen fijo: la foto se contiene, nunca se deforma ni desborda.
   Aplica al listado y a "Productos relacionados" (ambos usan .item-img-info). */
.products-grid .item .item-img-info{
  display:flex; align-items:center; justify-content:center;
  height:190px; padding:12px; background:#fff;
}
.products-grid .item .item-img-info .product-image{
  display:flex; align-items:center; justify-content:center;
  max-width:100%; max-height:100%;
}
.products-grid .item .item-img-info img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
}
.products-grid .item .item-info{ padding:10px 12px 14px; border-top:0.5px solid var(--ra-border); }
.products-grid .item .item-info h6{ line-height:1.35; }

/* ---- Consistencia de botones ---- */
.ra-btn,
.products-grid .item .button,
.buttons-set .button{
  display:inline-block;
  background:var(--ra-primary); color:#fff !important;
  border:1px solid var(--ra-primary);
  border-radius:8px; padding:9px 18px;
  font-size:14px; line-height:1.2; cursor:pointer;
  transition:background .15s ease;
}
.ra-btn:hover,
.buttons-set .button:hover{ background:var(--ra-primary-dark); border-color:var(--ra-primary-dark); }
.ra-btn-ghost{
  display:inline-block;
  background:#fff; color:var(--ra-primary) !important;
  border:1px solid var(--ra-primary);
  border-radius:8px; padding:9px 18px; font-size:14px; line-height:1.2;
}

/* ---- Boton de WhatsApp compacto junto a los telefonos del footer ---- */
.ra-whatsapp{
  display:inline-flex; align-items:center; gap:6px;
  background:#25D366; color:#fff !important;
  border-radius:6px; padding:5px 12px; font-size:13px; line-height:1.2;
  text-decoration:none; margin-top:6px;
}
.ra-whatsapp:hover{ background:#1EBE5A; color:#fff !important; }
.ra-whatsapp i{ font-size:15px; }

/* ---- Titulo de pagina (jerarquia: un h1 por pagina) ---- */
h1.ra-page-title{
  font-size:22px; font-weight:500; color:var(--ra-ink);
  margin:14px 0 4px;
}

/* ---- Menu movil: sin subrayado en los nombres de categoria ---- */
#accordion .card-header .btn-link,
#accordion .card-header .btn-link:hover,
#accordion .card-header .btn-link:focus{ text-decoration:none !important; }

/* ---- Accesibilidad tactil: menu movil y acordeon con area comoda ---- */
@media (max-width:768px){
  .list-group-item{ min-height:44px; display:flex; align-items:center; }
  .card-header .btn-link{ min-height:46px; }
  .mega-menu > a.level-top{ min-height:44px; }
}

/* ---- Grilla del catalogo de productos (productosgrid) ----
   Las tarjetas usan columnas de Bootstrap 5 (col-6 col-sm-4 col-md-4 col-lg-3),
   que solo definen anchos: el contenedor debe ser flex para que se acomoden
   en fila (2 en movil, 3 en tablet, 4 en desktop). Scoped a #store para no
   afectar los sliders (.products-slick) que tambien usan ul.products-grid. */
#store ul.products-grid{
  display:flex;
  flex-wrap:wrap;
}

/* ---- Sliders de productos (relacionados): tarjetas parejas ----
   slick deja cada slide con la altura de su contenido; con flex todas las
   tarjetas de la fila quedan de la misma altura aunque el texto ocupe 1 o 2
   lineas. */
.products-slick .slick-track{ display:flex; }
.products-slick .slick-slide{ height:auto; }
.products-slick .slick-slide article.col-main,
.products-slick .slick-slide .category-products,
.products-slick .slick-slide ul.products-grid{ height:100%; }
/* el li.item lleva margin 15px arriba/abajo (!important, regla de .products-slick
   de mas arriba); se descuentan para que la tarjeta no se salga del slide */
.products-slick .slick-slide li.item{ height:calc(100% - 30px); }