/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.4
	Stable tag: 3.4.4
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
/* =========================================================
   EL MÓVIL STORE — ESTILOS GLOBALES (PALETA FIJA)
   Pegar completo en style.css del tema padre
   ========================================================= */

/* ---- Paleta canónica (exacta a tus Colores globales) ---- */
:root{
  /* Tus Globales */
  --e-global-color-primary:    #28B04B;   /* Primario */
  --e-global-color-secondary:  #1A1A1A;   /* Títulos fuertes */
  --e-global-color-text:       #333333;   /* Párrafos */
  --e-global-color-background: #F9F7F1;   /* Fondo beige */
  --e-header-black:            #0E0E0E;   /* Encabezado/Negro */

  /* Alias de trabajo (para todo el CSS) */
  --brand:   var(--e-global-color-primary);
  --ink-strong: var(--e-global-color-secondary);
  --ink:     var(--e-global-color-text);
  --bg:      var(--e-global-color-background);
  --card:    #ffffff;
  --header:  var(--e-header-black);
  --muted:   #666666;
  --radius:  18px;
  --shadow:  0 8px 24px rgba(0,0,0,.08);
}

/* ---- Base ---- */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink-strong);margin:0 0 .4em}
h1{font-size:clamp(32px,4vw,52px);letter-spacing:-.5px;font-weight:800}
h2{font-size:clamp(22px,2.2vw,30px);font-weight:800}
p{color:var(--ink);opacity:.95}

/* ---- Botones globales (Elementor + WooCommerce) ---- */
.button,.button.alt,.wp-element-button,
.elementor-button,.woocommerce a.button,.woocommerce button.button,
input[type=submit],.added_to_cart{
  background:var(--brand)!important;color:#fff!important;border:none;border-radius:14px!important;
  padding:12px 20px!important;font-weight:700;box-shadow:none;transition:transform .05s ease, filter .2s ease;
}
.button:hover,.wp-element-button:hover,.elementor-button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
input[type=submit]:hover,.added_to_cart:hover{filter:brightness(.95);transform:translateY(-1px)}
/* Pill para "Oferta" */
.onsale,.badge-sale,.product .onsale{background:#FDE68A!important;color:#1f2937!important;border-radius:999px;padding:6px 10px;font-weight:800;box-shadow:var(--shadow)}

/* =========================================================
   HEADER (negro, compacto, sticky)
   ========================================================= */
.site-header,header,.elementor-location-header{
  background:var(--header);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.06)
}
.site-header .container,.elementor-location-header .elementor-container,header .container{
  max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px;justify-content:space-between
}
.main-navigation,.elementor-nav-menu,nav ul{display:flex;gap:28px;align-items:center}
.main-navigation a,.elementor-nav-menu a,nav a{color:#e5e7eb;font-weight:700;letter-spacing:.2px}
.main-navigation a:hover,.elementor-nav-menu a:hover{color:#fff}

/* =========================================================
   HERO (izquierda texto + derecha imagen)
   ========================================================= */
.home .hero, .home .entry-content > .wp-block-cover:first-child,
.home .elementor-section.hero, .home-hero{
  background:linear-gradient(0deg,#fcfcfb,#fbfaf7);
  border-bottom:1px solid #eee;padding:56px 0
}
.home .hero .container, .home-hero .container,
.home .wp-block-cover__inner-container, .home .elementor-section.hero .elementor-container{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center
}
.hero .kicker{color:var(--muted);font-weight:600;margin-bottom:10px}
.hero .lead{font-size:clamp(16px,1.6vw,18px);color:#333;opacity:.9;margin:.6rem 0 1.2rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* =========================================================
   MOSAICO DE CATEGORÍAS (4 tarjetas)
   ========================================================= */
.home .category-grid,.cat-tiles{
  max-width:1200px;margin:26px auto 6px;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.cat-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;display:flex;flex-direction:column;gap:10px;min-height:120px;justify-content:center
}
.cat-card .icon{
  width:44px;height:44px;border-radius:12px;background:rgba(40,176,75,.08);
  display:grid;place-items:center;margin-bottom:6px;color:var(--brand);font-size:22px
}
.cat-card h3{font-size:18px;font-weight:800;margin:0}
.cat-card p{color:var(--muted);margin:0}

/* =========================================================
   PRODUCTOS DESTACADOS (3 tarjetas)
   ========================================================= */
.home .featured-products,.featured-products{
  max-width:1200px;margin:22px auto 30px;padding:0 20px
}
.featured-products h2{margin:22px 0 16px}
.products-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.product-card,.products .product, .woocommerce ul.products li.product{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;overflow:hidden;position:relative;list-style:none
}
.product-card .thumb, .woocommerce ul.products li.product a img{
  width:100%;border-radius:14px;margin-bottom:12px;background:#f3f3f3
}
.product-card h3, .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:18px;font-weight:800;margin:6px 0 6px;color:var(--ink-strong)
}
.price, .woocommerce ul.products li.product .price{
  font-weight:800;color:#1f2937;font-size:16px;margin:4px 0 10px;display:block
}
.product-card .sku{color:var(--muted);font-size:13px}
.product-card .actions{margin-top:12px}
.woocommerce ul.products li.product .button{width:100%;text-align:center}

/* Card resaltada (columna 1 del mockup) */
.products-grid .product-card--featured{background:linear-gradient(0deg,#fff,#fff);outline:2px solid rgba(40,176,75,.08)}

/* =========================================================
   TIRA DE MARCAS (logos grises con resalte al hover)
   ========================================================= */
.brand-strip{
  max-width:1200px;margin:8px auto 40px;padding:10px 20px 26px;border-top:1px solid #eee
}
.brand-strip .logos{
  display:grid;grid-template-columns:repeat(6,minmax(80px,1fr));gap:28px;align-items:center;justify-items:center
}
.brand-strip img{filter:grayscale(100%);opacity:.6;height:28px;transition:filter .2s ease,opacity .2s ease}
.brand-strip img:hover{filter:none;opacity:1}

/* =========================================================
   FOOTER (oscuro, tres columnas)
   ========================================================= */
.site-footer, footer, .elementor-location-footer{
  background:var(--header);color:#e5e7eb;margin-top:30px
}
.site-footer .container, footer .container, .elementor-location-footer .elementor-container{
  max-width:1200px;margin:0 auto;padding:26px 20px 34px
}
.site-footer a, footer a{color:#f5f5f5}
.site-footer h4{color:#fff;margin-bottom:10px}

/* =========================================================
   UTILIDADES Y CONTENEDORES
   ========================================================= */
.container, .wrap, .site-content .container{max-width:1200px;margin:0 auto;padding:0 20px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

/* =========================================================
   AJUSTES ESPECÍFICOS WOOCOMMERCE (home y listados)
   ========================================================= */
.woocommerce ul.products{margin:0;padding:0}
.woocommerce ul.products li.product .star-rating{display:none}
.woocommerce span.onsale{position:absolute;top:14px;left:14px}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link{display:block}
.woocommerce .products .product .button.loading::after{display:none} /* quitar spinner */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .home .hero .container{grid-template-columns:1fr;gap:12px}
  .home .category-grid,.cat-tiles{grid-template-columns:repeat(2,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  h1{font-size:32px}
  .home .category-grid,.cat-tiles{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}
  .brand-strip .logos{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   CLASES DE APOYO (por si las usas en Elementor)
   ========================================================= */
.btn-primary{background:var(--brand);color:#fff;border-radius:14px;padding:12px 18px;font-weight:800;display:inline-block}
.text-muted{color:var(--muted)}
.bg-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
/* Fin */