/*
Theme Name:   Safrenos Child
Theme URI:    https://safrenos.com
Description:  Tema hijo para Safrenos Rangel SAS — Hello Elementor + Pro-Elements + WooCommerce
Author:       Safrenos Web Team
Template:     hello-elementor
Version:      2.0.0
Text Domain:  safrenos-child
*/

/* ============================================================
   VARIABLES GLOBALES DE MARCA — SAFRENOS
   ============================================================ */
:root {
  --saf-blue:        #1a3a6b;
  --saf-blue-mid:    #1e4d9b;
  --saf-blue-light:  #2563c9;
  --saf-blue-glow:   rgba(37, 99, 201, 0.12);
  --saf-accent:      #f59e0b;
  --saf-accent-dark: #d97706;
  --saf-white:       #ffffff;
  --saf-off:         #f5f7fa;
  --saf-light:       #e8edf5;
  --saf-border:      #d0d9ec;
  --saf-gray:        #6b7a99;
  --saf-dark:        #1a2340;
  --saf-text:        #1e2a45;
  --font-display:    'Rajdhani', sans-serif;
  --font-body:       'Inter', sans-serif;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --shadow-card:     0 4px 20px rgba(26, 58, 107, 0.10);
  --shadow-hover:    0 12px 36px rgba(26, 58, 107, 0.16);
}

/* ============================================================
   BASE GLOBAL
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--saf-text);
  background-color: var(--saf-off);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--saf-blue);
  text-transform: uppercase;
}
a { color: var(--saf-blue-light); transition: color 0.2s; }
a:hover { color: var(--saf-blue); }

/* ============================================================
   ELEMENTOR — OVERRIDES GLOBALES
   ============================================================ */
.elementor-heading-title {
  font-family: var(--font-display) !important;
}
.elementor-button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s !important;
}

/* Clases reutilizables en el campo CSS de cualquier widget */
.e-btn-blue  { background: var(--saf-blue)   !important; color: white !important; }
.e-btn-blue:hover  { background: var(--saf-blue-light) !important; }
.e-btn-accent { background: var(--saf-accent) !important; color: white !important; }
.e-btn-accent:hover { background: var(--saf-accent-dark) !important; }

/* ============================================================
   HEADER (construido en Theme Builder de Pro-Elements)
   Estilos de apoyo para los widgets HTML del header
   ============================================================ */

/* Sticky del header — Pro-Elements lo maneja, esto es el fallback */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

/* Topbar */
.saf-topbar-el {
  background: var(--saf-blue) !important;
}
.saf-topbar-el a {
  color: var(--saf-accent) !important;
  text-decoration: none;
  font-weight: 600;
}

/* Barra de categorías — sección del Theme Builder */
.saf-catnav-el {
  background: var(--saf-blue) !important;
  border-bottom: 3px solid var(--saf-accent) !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.saf-catnav-el::-webkit-scrollbar { display: none; }

/* Nav-menu widget dentro de la barra de categorías */
.saf-catnav-el .elementor-nav-menu {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.saf-catnav-el .elementor-nav-menu .menu-item a {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 13px 17px !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all 0.2s;
  white-space: nowrap;
}
.saf-catnav-el .elementor-nav-menu .menu-item a:hover,
.saf-catnav-el .elementor-nav-menu .menu-item.current-menu-item a,
.saf-catnav-el .elementor-nav-menu .menu-item.current-cat a {
  color: var(--saf-accent) !important;
  background: rgba(255,255,255,0.07) !important;
  border-bottom-color: var(--saf-accent) !important;
}

/* Search bar del header */
.saf-header-search input[type="search"],
.saf-header-search input[type="text"] {
  border: 2px solid var(--saf-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 52px 12px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  background: var(--saf-off) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.saf-header-search input:focus {
  border-color: var(--saf-blue-light) !important;
  box-shadow: 0 0 0 3px var(--saf-blue-glow) !important;
  background: var(--saf-white) !important;
}

/* ============================================================
   FOOTER (construido en Theme Builder de Pro-Elements)
   ============================================================ */
.elementor-location-footer {
  background: var(--saf-dark) !important;
}
.elementor-location-footer,
.elementor-location-footer p,
.elementor-location-footer span {
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
}
.elementor-location-footer a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.elementor-location-footer a:hover {
  color: white !important;
}
.elementor-location-footer .elementor-heading-title {
  color: var(--saf-accent) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Footer nav links */
.saf-footer-nav .elementor-nav-menu .menu-item a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 4px 0 !important;
  display: block;
  transition: color 0.2s;
}
.saf-footer-nav .elementor-nav-menu .menu-item a:hover {
  color: white !important;
}
.saf-footer-nav .elementor-nav-menu {
  flex-direction: column !important;
  gap: 6px !important;
}

/* Footer bottom bar */
.saf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.saf-footer-bottom p,
.saf-footer-bottom span {
  font-size: 11px !important;
  color: rgba(255,255,255,0.28) !important;
}

/* WhatsApp link en footer */
.saf-wa-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #25d366 !important;
  color: white !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.saf-wa-link:hover { opacity: 0.85 !important; }




/* ============================================================
   WOOCOMMERCE — GRID DE PRODUCTOS (fix columnas)
   WC inyecta width:23% por clase .columns-X — anulamos todo
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product {
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--saf-white) !important;
  border: 1.5px solid var(--saf-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--saf-blue-light) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Imagen del producto */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block !important;
  width: 100% !important;
}
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: linear-gradient(135deg, var(--saf-off), var(--saf-light)) !important;
  padding: 16px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--saf-blue) !important;
  padding: 14px 14px 4px !important;
  line-height: 1.2 !important;
}

/* Precio */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--saf-blue) !important;
  padding: 4px 14px !important;
}
.woocommerce ul.products li.product .price del {
  font-size: 13px !important;
  color: var(--saf-gray) !important;
  font-family: var(--font-body) !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Botón agregar al carrito */
.woocommerce ul.products li.product .button {
  background: var(--saf-blue) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: auto 0 0 !important;
  transition: background 0.2s !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--saf-blue-light) !important;
}

/* Badge oferta */
.woocommerce span.onsale {
  background: #e53e3e !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 3px 8px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   WOOCOMMERCE — CATEGORÍAS (fix tarjetas altas y angostas)
   ============================================================ */
.woocommerce ul.products li.product-category {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product-category a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product-category a img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 0 !important;
  background: var(--saf-light) !important;
  box-sizing: border-box !important;
}
.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--saf-blue) !important;
  padding: 12px 14px 10px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
/* Badge cantidad — quitar amarillo neón */
.woocommerce ul.products li.product-category
.woocommerce-loop-category__title mark {
  background: var(--saf-blue-light) !important;
  color: white !important;
  border-radius: 100px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}

/* ============================================================
   WOOCOMMERCE — PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--saf-blue) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--saf-blue) !important;
}
.woocommerce div.product .single_add_to_cart_button {
  background: var(--saf-blue) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 16px 36px !important;
  transition: background 0.2s !important;
  border: none !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--saf-blue-light) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--saf-blue) !important;
}

/* ============================================================
   WOOCOMMERCE — CARRITO Y CHECKOUT
   ============================================================ */
.woocommerce .button.checkout,
.woocommerce #place_order {
  background: var(--saf-accent) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background 0.2s !important;
  border: none !important;
}
.woocommerce .button.checkout:hover,
.woocommerce #place_order:hover {
  background: var(--saf-accent-dark) !important;
}

/* ============================================================
   WOOCOMMERCE — BREADCRUMB
   ============================================================ */
.woocommerce .woocommerce-breadcrumb,
.saf-breadcrumb {
  font-size: 12px !important;
  color: var(--saf-gray) !important;
  padding: 10px 0 !important;
}
.woocommerce .woocommerce-breadcrumb a,
.saf-breadcrumb a {
  color: var(--saf-blue-light) !important;
}

/* ============================================================
   SHORTCODE — BUSCADOR DE VEHÍCULO
   ============================================================ */
.saf-finder {
  background: var(--saf-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(26, 58, 107, 0.13);
  border: 1px solid var(--saf-border);
  padding: 28px 32px;
}
.saf-finder-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--saf-light);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.saf-finder-head-icon {
  background: var(--saf-blue);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.saf-finder-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--saf-blue);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
}
.saf-finder-head p {
  font-size: 12px;
  color: var(--saf-gray);
  margin: 2px 0 0;
}
.saf-finder-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.saf-finder-field { flex: 1; min-width: 130px; }
.saf-finder-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--saf-gray);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 7px;
}
.saf-finder-field select,
.saf-finder-field input[type="text"] {
  width: 100%;
  border: 1.5px solid var(--saf-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--saf-text);
  background: var(--saf-off);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7a99' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.saf-finder-field select:focus,
.saf-finder-field input:focus {
  border-color: var(--saf-blue-light);
}
.saf-finder-submit button {
  background: var(--saf-blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  width: 100%;
}
.saf-finder-submit button:hover { background: var(--saf-blue-light); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
  }
  .saf-finder-fields { flex-direction: column; }
  .saf-finder-field  { min-width: 100%; }
}

@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Barra de categorías con scroll horizontal ── */
.saf-cat-bar {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  width: 100%;
}
.saf-cat-bar::-webkit-scrollbar { display: none; }

.saf-cat-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 17px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}
.saf-cat-bar__item:hover,
.saf-cat-bar__item--active {
  color: #f59e0b;
  background: rgba(255,255,255,0.07);
  border-bottom-color: #f59e0b;
}

/* Mobile */
@media (max-width: 768px) {
  .saf-cat-bar__item {
    font-size: 12px;
    padding: 11px 12px;
  }
}