/*
Theme Name: Motorix
Theme URI: https://motorix.com.mx
Description: Tienda profesional de módulos ECU/PCM/BCM programados por VIN. Diseño moderno mixto (claro + acento oscuro).
Version: 2.0.0
Author: Motorix
Text Domain: motorix
*/

:root {
    --primary: #1b9a3a;
    --primary-dark: #158a31;
    --secondary: #0066cc;
    --secondary-dark: #003d7a;
    --dark: #14161a;
    --dark-2: #1f232b;
    --light: #f6f8f9;
    --white: #ffffff;
    --text: #1a1d21;
    --text-muted: #667085;
    --border: #e6e8eb;
    --shadow-sm: 0 2px 8px rgba(20,22,26,0.06);
    --shadow-md: 0 8px 24px rgba(20,22,26,0.10);
    --shadow-lg: 0 16px 40px rgba(20,22,26,0.16);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family:'Poppins',sans-serif; font-weight:600; line-height:1.25; }
a { text-decoration:none; color: var(--secondary); }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1320px; margin:0 auto; padding:0 24px; }

/* ============ HEADER ============ */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; top:0; z-index: 999;
}
.header-top {
    max-width:1320px; margin:0 auto; padding:16px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-logo a {
    font-family:'Poppins',sans-serif; font-weight:700; font-size:1.5rem;
    color: var(--text); letter-spacing: -0.5px;
}
.site-logo span { color: var(--primary); }
.nav-primary { display:flex; gap:32px; }
.nav-primary a {
    color: var(--text); font-weight:500; font-size:0.95rem; position:relative;
}
.nav-primary a::after {
    content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
    background: var(--primary); transition:width .25s ease;
}
.nav-primary a:hover::after { width:100%; }
.header-right { display:flex; align-items:center; gap:14px; }
.whatsapp-btn {
    display:flex; align-items:center; gap:8px;
    background: var(--primary); color:#fff; padding:10px 20px;
    border-radius: var(--radius-md); font-weight:600; font-size:0.9rem;
    transition: all .25s ease;
}
.whatsapp-btn:hover { background: var(--primary-dark); color:#fff; transform:translateY(-1px); box-shadow: var(--shadow-sm); }
.cart-link {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%; background: var(--light); color: var(--text);
}
.cart-link:hover { background: var(--border); color: var(--text); }
.cart-count {
    position:absolute; top:-4px; right:-4px; background: var(--secondary); color:#fff;
    font-size:0.7rem; font-weight:700; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.menu-toggle { display:none; background:none; border:none; cursor:pointer; }

/* ============ HERO ============ */
.hero {
    background: radial-gradient(1200px 600px at 80% -10%, #1e2530 0%, var(--dark) 55%, var(--dark) 100%);
    color:#fff; padding: 88px 0 96px; position:relative; overflow:hidden;
}
.hero-grid {
    max-width:1320px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(27,154,58,0.15); border:1px solid rgba(27,154,58,0.4);
    color:#8be79f; font-size:0.78rem; font-weight:700; letter-spacing:0.06em;
    padding:7px 14px; border-radius:999px; text-transform:uppercase; margin-bottom:22px;
}
.hero h1 { font-size:2.75rem; margin-bottom:20px; }
.hero h1 .accent { color: var(--primary); }
.hero p { color:#c3c8d1; font-size:1.08rem; max-width:520px; margin-bottom:28px; }
.hero-search {
    background:#fff; border-radius: var(--radius-md); padding:8px; display:flex; gap:8px;
    box-shadow: var(--shadow-lg); max-width:560px;
}
.hero-search input {
    flex:1; border:none; outline:none; padding:12px 14px; font-size:0.95rem; border-radius: var(--radius-sm);
    color: var(--text);
}
.hero-search button {
    background: var(--secondary); color:#fff; border:none; padding:0 26px; border-radius: var(--radius-sm);
    font-weight:600; cursor:pointer; transition:background .25s;
}
.hero-search button:hover { background: var(--secondary-dark); }
.hero-badges { display:flex; gap:24px; margin-top:28px; flex-wrap:wrap; }
.hero-badges .item { display:flex; align-items:center; gap:8px; color:#d7dae0; font-size:0.88rem; }
.hero-badges svg { width:18px; height:18px; color: var(--primary); flex-shrink:0; }

.hero-art { display:flex; align-items:center; justify-content:center; }
.hero-art svg { width:100%; max-width:420px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); }

/* ============ COMPATIBILITY RESULTS ============ */
#compatibility-results { max-width:560px; margin-top:16px; color:#fff; }
#compatibility-results .cr-item {
    background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm); padding:12px 14px; margin-bottom:8px;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
}
#compatibility-results .cr-item a { color: var(--primary); font-weight:600; font-size:0.85rem; }
#compatibility-results .cr-empty, #compatibility-results .cr-loading { color:#c3c8d1; font-size:0.9rem; }

/* ============ SECTIONS ============ */
.section { padding:88px 0; }
.section.alt { background: var(--light); }
.section-head { text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head .eyebrow {
    color: var(--primary); font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
    display:block; margin-bottom:10px;
}
.section-head h2 { font-size:2rem; margin-bottom:12px; color: var(--text); }
.section-head p { color: var(--text-muted); font-size:1.02rem; }

/* ============ CATEGORY CARDS ============ */
.cat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.cat-card {
    background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg);
    padding:32px 24px; transition: all .25s ease; text-align:left;
}
.cat-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-md); border-color:transparent; }
.cat-icon {
    width:56px; height:56px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(27,154,58,0.12), rgba(0,102,204,0.12)); margin-bottom:20px;
}
.cat-icon svg { width:28px; height:28px; color: var(--primary); }
.cat-card h3 { font-size:1.1rem; margin-bottom:8px; color: var(--text); }
.cat-card p { color: var(--text-muted); font-size:0.9rem; margin-bottom:18px; }
.cat-link { color: var(--secondary); font-weight:600; font-size:0.88rem; }
.cat-link:hover { color: var(--primary); }

/* ============ STEPS ============ */
.steps-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:20px; counter-reset: step; }
.step { text-align:center; position:relative; }
.step-num {
    width:44px; height:44px; border-radius:50%; background: var(--dark); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 16px;
    font-family:'Poppins',sans-serif;
}
.step h4 { font-size:0.98rem; margin-bottom:6px; }
.step p { color: var(--text-muted); font-size:0.85rem; }
.step-arrow { display:none; }

/* ============ FEATURES ============ */
.feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:32px; }
.feat-item { display:flex; gap:16px; }
.feat-icon {
    flex-shrink:0; width:44px; height:44px; border-radius: var(--radius-sm); background: var(--light);
    display:flex; align-items:center; justify-content:center;
}
.feat-icon svg { width:22px; height:22px; color: var(--primary); }
.feat-item h4 { font-size:1rem; margin-bottom:4px; }
.feat-item p { color: var(--text-muted); font-size:0.88rem; }

/* ============ CTA BANNER ============ */
.cta-banner {
    background: linear-gradient(120deg, var(--dark) 0%, var(--dark-2) 100%);
    border-radius: var(--radius-lg); padding:56px; text-align:center; color:#fff;
    max-width:1320px; margin:0 auto;
}
.cta-banner h2 { font-size:1.75rem; margin-bottom:12px; }
.cta-banner p { color:#c3c8d1; margin-bottom:28px; }
.cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius: var(--radius-md); font-weight:600; font-size:0.95rem; border:none; cursor:pointer; transition:all .25s ease; }
.btn-primary { background: var(--primary); color:#fff; }
.btn-primary:hover { background: var(--primary-dark); color:#fff; transform:translateY(-1px); }
.btn-outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.35); }
.btn-outline:hover { background:rgba(255,255,255,0.08); color:#fff; }

/* ============ FOOTER ============ */
.site-footer { background: var(--dark); color:#c3c8d1; padding:64px 0 24px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:40px; }
.footer-col h3 { color:#fff; font-size:1rem; margin-bottom:16px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col a { color:#c3c8d1; font-size:0.9rem; }
.footer-col a:hover { color: var(--primary); }
.footer-col p { color:#9aa0ab; font-size:0.88rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; text-align:center; color:#7d838e; font-size:0.85rem; }

/* ============ WOOCOMMERCE (shop loop, single product) ============ */
ul.products { display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; }
ul.products li.product {
    background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; padding:16px;
    transition: all .25s ease;
}
ul.products li.product:hover { box-shadow: var(--shadow-md); transform:translateY(-4px); }
ul.products li.product img { border-radius: var(--radius-sm); margin-bottom:14px; aspect-ratio:1/1; object-fit:cover; }
ul.products li.product .woocommerce-loop-product__title { font-size:0.98rem; margin-bottom:6px; }
ul.products li.product .price { color: var(--primary); font-weight:700; }
ul.products li.product .button {
    display:block; text-align:center; margin-top:12px; background: var(--dark); color:#fff;
    padding:10px; border-radius: var(--radius-sm); font-size:0.88rem;
}
.woocommerce div.product .product_title { font-size:1.9rem; }
.woocommerce div.product p.price { color: var(--primary); font-size:1.6rem; font-weight:700; }
.woocommerce div.product form.cart .button, .woocommerce a.button, .woocommerce button.button {
    background: var(--primary); color:#fff; border-radius: var(--radius-md); padding:13px 28px; font-weight:600; border:none;
}
.woocommerce div.product form.cart .button:hover, .woocommerce a.button:hover { background: var(--primary-dark); color:#fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(2,1fr); }
    .steps-grid { grid-template-columns: repeat(3,1fr); row-gap:32px; }
    .feat-grid { grid-template-columns: repeat(2,1fr); }
    .footer-grid { grid-template-columns: repeat(2,1fr); }
    ul.products { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
    .nav-primary { display:none; }
    .hero-grid { grid-template-columns:1fr; }
    .hero h1 { font-size:2rem; }
    .cat-grid, .feat-grid, .footer-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns: repeat(2,1fr); }
    .cta-banner { padding:40px 24px; }
    ul.products { grid-template-columns:1fr; }
}

/* ============ SELECTOR HERO (cascada Año/Marca/Modelo/Motor) ============ */
.selector-box {
    background:#fff; border-radius: var(--radius-lg); padding:24px;
    box-shadow: var(--shadow-lg); max-width:640px;
}
.selector-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:16px; }
.sel-field label { display:block; font-size:0.75rem; font-weight:700; color: var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em; }
.sel-field select {
    width:100%; padding:11px 10px; border:1px solid var(--border); border-radius: var(--radius-sm);
    font-size:0.88rem; color: var(--text); background:#fff;
}
.sel-field select:disabled { background: var(--light); color: var(--text-muted); }
.selector-box > button {
    width:100%; background: var(--secondary); color:#fff; border:none; padding:13px; border-radius: var(--radius-sm);
    font-weight:700; font-size:0.95rem; cursor:pointer; transition:background .25s;
}
.selector-box > button:hover { background: var(--secondary-dark); }

/* ============ TRUST STRIP ============ */
.trust-strip { background: var(--white); border-bottom:1px solid var(--border); padding:28px 0; }
.trust-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.trust-item { display:flex; align-items:center; gap:14px; }
.trust-item svg { width:32px; height:32px; color: var(--primary); flex-shrink:0; }
.trust-item strong { display:block; font-size:0.92rem; color: var(--text); }
.trust-item span { display:block; font-size:0.8rem; color: var(--text-muted); }

/* ============ ABOUT / QUIÉNES SOMOS ============ */
.about-section { background: var(--white); }
.about-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:56px; align-items:center; }
.about-text p { color: var(--text-muted); margin-bottom:16px; }
.about-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.stat-card {
    background: var(--light); border-radius: var(--radius-md); padding:24px; text-align:center;
}
.stat-card strong { display:block; font-family:'Poppins',sans-serif; font-size:1.7rem; color: var(--primary); margin-bottom:4px; }
.stat-card span { font-size:0.82rem; color: var(--text-muted); }

/* ============ BRAND GRID ============ */
.brand-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.brand-chip {
    display:flex; align-items:center; justify-content:center; height:74px;
    background:#fff; border:1px solid var(--border); border-radius: var(--radius-md);
    font-family:'Poppins',sans-serif; font-weight:600; color: var(--text); font-size:1rem;
    transition: all .2s ease;
}
.brand-chip:hover { border-color: var(--primary); color: var(--primary); transform:translateY(-2px); box-shadow: var(--shadow-sm); }

/* ============ WHATSAPP FLOTANTE ============ */
.wa-float {
    position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
    background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-lg); z-index:998; animation: wa-pulse 2.4s infinite;
}
.wa-float:hover { background: var(--primary-dark); color:#fff; }
@keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(27,154,58,0.5), var(--shadow-lg); }
    70% { box-shadow: 0 0 0 14px rgba(27,154,58,0), var(--shadow-lg); }
    100% { box-shadow: 0 0 0 0 rgba(27,154,58,0), var(--shadow-lg); }
}

/* ============ RESPONSIVE (adiciones) ============ */
@media (max-width: 1024px) {
    .trust-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
    .about-grid { grid-template-columns:1fr; gap:32px; }
    .brand-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
    .selector-grid { grid-template-columns: 1fr 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .brand-grid { grid-template-columns: repeat(2,1fr); }
    .wa-float { bottom:16px; right:16px; width:52px; height:52px; }
}
@media (max-width: 480px) {
    .selector-grid { grid-template-columns: 1fr; }
}