/*
Theme Name:   Importados OE
Theme URI:    https://importados-oe.mexcoparts.com
Description:  Tema hijo de Storefront para la línea de importación OE/OEN de MexcoParts.
Author:       InDi
Template:     storefront
Version:      1.0.0
Text Domain:  importados-oe
*/

/* ---------------------------------------------------------------
   Base
---------------------------------------------------------------- */
:root{
  --oe-navy:#17324f;
  --oe-navy-2:#1f4468;
  --oe-blue:#2c5f9e;
  --oe-green:#1e7a3c;
  --oe-amber:#b36b00;
  --oe-ink:#33415c;
  --oe-muted:#5b6b85;
  --oe-line:#dfe6ef;
  --oe-bg:#f4f7fb;
  --oe-white:#fff;
  --oe-radius:14px;
}
body.oe-site{ background:var(--oe-bg); color:var(--oe-ink); }
.oe-wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }

/* ---------------------------------------------------------------
   Header / nav (Storefront overrides)
---------------------------------------------------------------- */
.site-header{ background:#fff; border-bottom:1px solid var(--oe-line); }
.site-branding .site-title a{ color:var(--oe-navy); letter-spacing:-.02em; }
.site-branding .site-description{ color:var(--oe-muted); }
.main-navigation ul li a{ color:var(--oe-navy); font-weight:600; }
.main-navigation ul li a:hover{ color:var(--oe-blue); }
.storefront-breadcrumb{ display:none; }

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.oe-hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(44,95,158,.35), transparent 60%),
    linear-gradient(135deg, var(--oe-navy) 0%, #0f2438 100%);
  color:#fff; padding:64px 0 56px;
}
.oe-hero h1{ color:#fff; font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 14px; letter-spacing:-.02em; }
.oe-hero p.lead{ color:#d7e3f2; font-size:clamp(17px,2vw,20px); max-width:720px; margin:0 0 26px; }
.oe-tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:14px; font-weight:600;
  padding:7px 14px; border-radius:999px; margin-bottom:18px; letter-spacing:.02em; }
.oe-search{ display:flex; gap:10px; max-width:640px; background:#fff; padding:8px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.oe-search input{ flex:1; border:0; padding:14px 16px; font-size:18px; border-radius:10px; color:var(--oe-ink); }
.oe-search input:focus{ outline:3px solid rgba(44,95,158,.35); }
.oe-search button{ border:0; background:var(--oe-blue); color:#fff; font-size:17px; font-weight:700;
  padding:0 24px; border-radius:10px; cursor:pointer; }
.oe-search button:hover{ background:#24548c; }
.oe-hero .oe-note{ color:#9fb4cc; font-size:14px; margin-top:14px; }

/* ---------------------------------------------------------------
   Secciones
---------------------------------------------------------------- */
.oe-section{ padding:56px 0; }
.oe-section.alt{ background:#fff; border-top:1px solid var(--oe-line); border-bottom:1px solid var(--oe-line); }
.oe-section h2{ color:var(--oe-navy); font-size:clamp(24px,3vw,32px); margin:0 0 8px; letter-spacing:-.01em; }
.oe-section .oe-sub{ color:var(--oe-muted); font-size:17px; margin:0 0 28px; max-width:760px; }

.oe-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.oe-card{ background:#fff; border:1px solid var(--oe-line); border-radius:var(--oe-radius); padding:24px; }
.oe-section.alt .oe-card{ background:var(--oe-bg); }
.oe-card .num{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:var(--oe-navy); color:#fff; font-weight:800; margin-bottom:14px; }
.oe-card h3{ margin:0 0 8px; font-size:19px; color:var(--oe-navy); }
.oe-card p{ margin:0; color:var(--oe-muted); font-size:15.5px; line-height:1.55; }

.oe-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.oe-badge{ background:#fff; border:1px solid var(--oe-line); border-radius:var(--oe-radius); padding:22px; }
.oe-badge strong{ display:block; color:var(--oe-navy); font-size:17px; margin-bottom:6px; }
.oe-badge span{ color:var(--oe-muted); font-size:15px; }

.oe-cta{ background:linear-gradient(135deg, var(--oe-navy), #0f2438); color:#fff; border-radius:18px;
  padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.oe-cta h2{ color:#fff; margin:0 0 6px; }
.oe-cta p{ color:#c9d8ea; margin:0; }
.oe-btn{ display:inline-block; background:var(--oe-green); color:#fff; font-weight:700; font-size:17px;
  padding:14px 26px; border-radius:12px; text-decoration:none; border:0; cursor:pointer; }
.oe-btn:hover{ background:#176430; color:#fff; }

/* ---------------------------------------------------------------
   Formulario
---------------------------------------------------------------- */
.oe-form-wrap{ max-width:820px; margin:0 auto; }
.oe-form{ background:#fff; border:1px solid var(--oe-line); border-radius:16px; padding:28px; }
.oe-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.oe-field{ margin-bottom:18px; }
.oe-field-wide{ grid-column:1 / -1; }
.oe-field label{ display:block; font-weight:700; color:var(--oe-navy); margin-bottom:7px; font-size:15.5px; }
.oe-req{ color:#b3261e; }
.oe-field input, .oe-field select, .oe-field textarea{
  width:100%; padding:13px 14px; font-size:16.5px; border:1.5px solid var(--oe-line);
  border-radius:10px; color:var(--oe-ink); background:#fff; }
.oe-field input:focus, .oe-field select:focus, .oe-field textarea:focus{
  outline:3px solid rgba(44,95,158,.25); border-color:var(--oe-blue); }
.oe-hint{ margin:6px 0 0; font-size:14px; color:var(--oe-muted); }
.oe-form .oe-btn{ width:100%; font-size:18px; padding:16px; margin-top:6px; }
.oe-legal{ font-size:14px; color:var(--oe-muted); margin:14px 0 0; }
.oe-hp{ position:absolute; left:-9999px; }
.oe-alert{ border-radius:12px; padding:18px 20px; margin-bottom:20px; font-size:16px; line-height:1.5; }
.oe-alert-ok{ background:#e8f5ec; border:1px solid #b7dfc4; color:#14532d; }
.oe-alert-err{ background:#fdecea; border:1px solid #f5c2bd; color:#7f1d1d; }

/* ---------------------------------------------------------------
   FAQ
---------------------------------------------------------------- */
.oe-faq details{ background:#fff; border:1px solid var(--oe-line); border-radius:12px; padding:18px 20px; margin-bottom:12px; }
.oe-faq summary{ cursor:pointer; font-weight:700; color:var(--oe-navy); font-size:17px; }
.oe-faq p{ margin:12px 0 0; color:var(--oe-muted); font-size:16px; line-height:1.6; }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.site-footer{ background:var(--oe-navy); color:#c9d8ea; }
.site-footer a{ color:#dce8f5; }
.site-footer .site-info{ border:0; }

/* ---------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */
@media screen and (max-width:900px){
  .oe-steps{ grid-template-columns:1fr 1fr; }
  .oe-badges{ grid-template-columns:1fr; }
}
@media screen and (max-width:640px){
  .oe-hero{ padding:44px 0 40px; }
  .oe-search{ flex-direction:column; padding:10px; }
  .oe-search button{ padding:15px 20px; }
  .oe-steps{ grid-template-columns:1fr; }
  .oe-grid{ grid-template-columns:1fr; }
  .oe-form{ padding:20px; }
  .oe-cta{ padding:26px; }
}

/* ---------------------------------------------------------------
   Impresión
---------------------------------------------------------------- */
@media print{
  .site-header, .site-footer, .oe-cta, .oe-form .oe-btn{ display:none !important; }
  body.oe-site{ background:#fff; }
}

/* ---------------------------------------------------------------
   Layout a todo lo ancho y header B2B (sin buscador ni carrito)
---------------------------------------------------------------- */
#main, main#main{ max-width:none; width:100%; margin:0; }
.site-search, .site-header-cart, .storefront-handheld-footer-bar{ display:none !important; }
.site-header .col-full{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* Portada a todo lo ancho; páginas internas centradas */
body.home #content{ padding-top:0; }
body.home #content > .col-full{ max-width:none; padding:0; margin:0; }
body.home .site-content{ padding-top:0; }

/* Header en una línea: logo a la izquierda, menú a la derecha */
body.home .site-header{ margin-bottom:0; }
.site-header{ padding:14px 0; }
.site-header .col-full{ display:flex !important; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:28px; }
.site-header .site-branding{ width:auto !important; margin:0 !important; float:none !important; text-align:left; flex:0 0 auto; }
.site-header .site-branding .site-title{ font-size:26px; margin:0; }
.site-header .site-branding .site-description{ margin:2px 0 0; font-size:14px; }
#site-navigation.main-navigation{ width:auto !important; float:none !important; flex:1 1 auto; text-align:right; }
#site-navigation.main-navigation ul.menu, #site-navigation.main-navigation ul.nav-menu{ display:flex; justify-content:flex-end; gap:8px; margin:0; }
#site-navigation.main-navigation ul li a{ padding:10px 12px; font-size:16px; }
@media screen and (max-width:780px){
  .site-header .col-full{ flex-wrap:wrap; justify-content:center; }
  #site-navigation.main-navigation{ flex:1 1 100%; text-align:center; }
  #site-navigation.main-navigation ul.menu{ justify-content:center; flex-wrap:wrap; }
}