/* ============================================================
   El Mundo del Embrague — tema (sobre Bootstrap 5.3)
   Paleta: gunmetal + naranja mecánico + papel cálido
   Tipografía: Barlow Condensed (títulos) · Inter (texto)
   ============================================================ */

:root{
  --ink:#15181b;        /* gunmetal, superficies oscuras y títulos */
  --ink-2:#262b31;
  --ink-3:#394149;
  --steel:#6b7680;      /* neutro frío secundario */
  --line:#dcdad3;
  --paper:#ffffff;
  --panel:#f4f2ec;      /* panel cálido claro */
  --panel-2:#eceae2;
  --orange:#e4531a;     /* acento primario (mecánico) */
  --orange-d:#c23f0c;
  --orange-soft:#fdeee5;
  --wa:#25d366;         /* verde WhatsApp */
  --wa-d:#1ebe5a;
  --ok:#2e7d32;
  --radius:4px;         /* esquinas sobrias, catálogo técnico */
  --radius-lg:8px;
  --shadow:0 1px 0 rgba(21,24,27,.04), 0 8px 24px -14px rgba(21,24,27,.28);
  --maxw:1180px;
  --font-head:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}

h1,h2,h3,h4,.h-disp{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.03;
  letter-spacing:.005em;
  color:var(--ink);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600}
p{margin:0 0 1rem}
a{color:var(--orange-d);text-decoration:none}
a:hover{color:var(--orange);text-decoration:underline}

.container-xl{max-width:var(--maxw)}
.lead-measure{max-width:62ch}
.muted{color:var(--steel)}
.text-ink{color:var(--ink)!important}
.bg-ink{background:var(--ink)!important;color:#eef0f2}
.bg-panel{background:var(--panel)!important}

section{padding:clamp(3rem,6vw,5.5rem) 0}
.section-tight{padding:clamp(2rem,4vw,3rem) 0}

/* eyebrow / kicker: no all-caps; small, orange, with a short rule */
.kicker{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--orange-d);
  display:inline-block;
  background:rgba(228,83,26,.1);
  padding:.32rem .72rem;
  border-radius:999px;
  margin:0 0 .9rem;
}
.kicker::before{content:none}

/* ---------- Buttons ---------- */
.btn{
  --bs-btn-border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.01em;
  padding:.72rem 1.35rem;
  border-radius:var(--radius);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--orange);border:1px solid var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-d);border-color:var(--orange-d);color:#fff}
.btn-outline-ink{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-outline-ink:hover{background:var(--ink);color:#fff}
.btn-ghost-light{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-wa{
  background:var(--wa);border:1px solid var(--wa);color:#073b1e;font-weight:700;
  display:inline-flex;align-items:center;gap:.55rem;
}
.btn-wa:hover{background:var(--wa-d);border-color:var(--wa-d);color:#063019}
.btn-wa svg{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}
.btn-lg{padding:.9rem 1.7rem;font-size:1.08rem}

/* ---------- Header ---------- */
.topbar{
  background:var(--ink);color:#c7cdd3;font-size:.86rem;
  border-bottom:1px solid #000;
}
.topbar a{color:#e7ebee}
.topbar .wrap{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;padding:.4rem 0;flex-wrap:wrap}
.topbar .pills{display:flex;gap:1.3rem;flex-wrap:wrap}
.topbar .pill{display:inline-flex;align-items:center;gap:.4rem}
.topbar svg{width:1em;height:1em;fill:var(--orange)}

.site-header{
  position:sticky;top:0;z-index:1030;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex;align-items:center;gap:1.5rem;padding:.7rem 0;min-height:66px}

/* Brand / logo (CSS, sin imagen) */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:38px;height:38px;flex:0 0 auto;color:var(--orange);background:transparent;padding:0}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:.01em}
.brand .wm span{font-size:.68rem;letter-spacing:.14em;color:var(--steel);font-weight:600;margin-top:2px}

.mainnav{display:flex;gap:1.4rem;align-items:center;margin-left:auto}
.mainnav a{
  color:var(--ink);font-weight:600;font-size:.98rem;padding:.3rem 0;position:relative;
}
.mainnav a:hover{color:var(--orange-d);text-decoration:none}
.mainnav a.active{color:var(--orange-d)}
.mainnav a.active::after,.mainnav a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);
}
.header-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:.45rem .6rem;display:none}
.nav-toggle svg{width:22px;height:22px;fill:var(--ink);display:block}

@media (max-width:991px){
  .mainnav{display:none}
  .nav-toggle{display:inline-flex}
  .header-cta .btn-outline-ink{display:none}
}

/* Offcanvas mobile nav */
.offcanvas .brand .wm b{font-size:1.2rem}
.m-nav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:1.1rem}
.m-nav a:hover{color:var(--orange-d);text-decoration:none}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(228,83,26,.16), transparent 60%),
    linear-gradient(180deg,#15181b 0%, #1b2026 100%);
  color:#eef1f4;
  position:relative;overflow:hidden;
  padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem);
}
.hero::after{ /* textura sutil tipo placa */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(#fff 1px, transparent 1.4px);
  background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.hero .container-xl{position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#c9d0d6;max-width:48ch}
.hero .orange{color:var(--orange)}
.hero-figure{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);background:#0e1114;
}
.hero-figure img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* Buscador por marca (chips de entrada) */
.finder{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem}
.finder .chip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#eef1f4;border-radius:999px;padding:.5rem .95rem;font-weight:600;font-size:.95rem;
}
.finder .chip:hover{background:rgba(228,83,26,.18);border-color:var(--orange);color:#fff;text-decoration:none}

/* ---------- Trust band ---------- */
.trust{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .row-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.trust .item{display:flex;gap:.8rem;align-items:flex-start}
.trust .item svg{width:30px;height:30px;flex:0 0 auto;stroke:var(--orange);fill:none;stroke-width:1.6}
.trust .item b{display:block;font-family:var(--font-head);font-weight:600;font-size:1.18rem;color:var(--ink);line-height:1.1}
.trust .item span{font-size:.92rem;color:var(--steel)}
@media (max-width:767px){.trust .row-items{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}}

/* ---------- Section head ---------- */
.sec-head{max-width:70ch}
.sec-head h2{margin-bottom:.4rem}
.sec-head p{color:var(--steel);font-size:1.05rem}

/* ---------- Brand cards (componente) ---------- */
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.brandgrid.feat{grid-template-columns:1.6fr 1fr 1fr}
@media (max-width:991px){.brandgrid{grid-template-columns:repeat(2,1fr)}.brandgrid.feat{grid-template-columns:1fr 1fr}}
@media (max-width:575px){.brandgrid,.brandgrid.feat{grid-template-columns:1fr}}

.bcard{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.3rem 1.3rem 1.15rem;transition:border-color .15s ease, box-shadow .15s ease;
  text-decoration:none;color:inherit;overflow:hidden;
}
.bcard:hover{border-color:var(--orange);box-shadow:var(--shadow);text-decoration:none;color:inherit}
.bcard .tag{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--orange-d);
}
.bcard h3{margin:.15rem 0 .35rem;font-size:1.5rem}
.bcard p{font-size:.95rem;color:var(--steel);margin:0}
.bcard .go{margin-top:1rem;font-weight:600;color:var(--orange-d);display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.bcard .go svg{width:1em;height:1em;fill:currentColor;transition:transform .15s ease}
.bcard:hover .go svg{transform:translateX(3px)}
.bcard.hero-brand{
  grid-row:span 1;background:linear-gradient(135deg,#1b2026,#262b31);color:#eef1f4;border-color:#2c333a;
}
.bcard.hero-brand h3,.bcard.hero-brand .tag{color:#fff}
.bcard.hero-brand .tag{color:var(--orange)}
.bcard.hero-brand p{color:#aeb6bd}
.bcard.hero-brand .go{color:#fff}
.bcard .thumb{height:92px;margin:-.2rem 0 .8rem;display:flex;align-items:center}
.bcard .thumb img{max-height:92px;width:auto;object-fit:contain}

/* chips grid marcas de vehículo */
.vehgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
@media (max-width:991px){.vehgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:575px){.vehgrid{grid-template-columns:repeat(2,1fr)}}
.vchip{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .5rem;font-weight:600;color:var(--ink);font-size:.98rem;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.vchip:hover{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}

/* ---------- Feature line cards (camiones/4x4/agrícola) ---------- */
.linecards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:767px){.linecards{grid-template-columns:1fr}}
.lcard{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
}
.lcard:hover{text-decoration:none;color:inherit;border-color:var(--orange)}
.lcard .ph{aspect-ratio:16/10;background:var(--panel-2);overflow:hidden}
.lcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.lcard:hover .ph img{transform:scale(1.04)}
.lcard .body{padding:1.1rem 1.2rem 1.3rem}
.lcard h3{font-size:1.4rem;margin-bottom:.3rem}
.lcard p{font-size:.95rem;color:var(--steel);margin:0}

/* ---------- Clutch kit diagram (bloque educativo distintivo) ---------- */
.kit{display:grid;grid-template-columns:1.1fr 1fr;gap:2.4rem;align-items:center}
@media (max-width:767px){.kit{grid-template-columns:1fr;gap:1.6rem}}
.kit-parts{list-style:none;margin:0;padding:0}
.kit-parts li{display:flex;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.kit-parts li:last-child{border-bottom:1px solid var(--line)}
.kit-parts .n{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--orange);flex:0 0 1.6rem;line-height:1}
.kit-parts b{font-size:1.08rem}
.kit-parts p{margin:.15rem 0 0;font-size:.95rem;color:var(--steel)}
.kit-figure{display:flex;align-items:center;justify-content:center}

/* ---------- WhatsApp CTA band ---------- */
.wa-band{
  background:linear-gradient(180deg,#1b2026,#15181b);color:#eef1f4;border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.8rem);display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.wa-band h2{color:#fff;margin:0 0 .25rem}
.wa-band p{color:#b9c0c7;margin:0;max-width:52ch}

/* ---------- FAQ ---------- */
.faq .acc{border-top:1px solid var(--line)}
.faq .q{
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:1.15rem 2.5rem 1.15rem 0;position:relative;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:1.3rem;color:var(--ink);
}
.faq .q::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:var(--orange);font-size:1.6rem;font-family:var(--font-body)}
.faq .q[aria-expanded="true"]::after{content:"–"}
.faq .a{padding:0 0 1.2rem;color:var(--ink-3);max-width:76ch}
.faq .a[hidden]{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#aab1b8;padding:3.2rem 0 1.6rem;font-size:.95rem}
.site-footer h4{color:#fff;font-size:1.25rem;margin-bottom:.9rem}
.site-footer a{color:#cfd5da}
.site-footer a:hover{color:#fff}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media (max-width:767px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.35rem 0}
.site-footer .contact b{color:#fff;display:block;font-family:var(--font-head);font-weight:600;font-size:1.05rem}
.site-footer .legal{border-top:1px solid #2a3037;margin-top:2.4rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#7f878e;font-size:.86rem}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:1040;
  width:58px;height:58px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);transition:transform .15s ease,background .15s ease;
}
.wa-float:hover{background:var(--wa-d);transform:scale(1.06)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.88rem;color:var(--steel);padding:1rem 0 0}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--orange-d)}

/* ---------- Article (brand pages) ---------- */
.article h2{margin-top:2.2rem}
.article h3{margin-top:1.6rem}
.article ul{padding-left:1.1rem}
.article li{margin:.35rem 0}
.article .note{background:var(--orange-soft);border-left:3px solid var(--orange);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-3)}
.applist{columns:2;column-gap:2rem;padding-left:1.1rem}
@media (max-width:575px){.applist{columns:1}}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.vchip:focus-visible,.bcard:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:var(--radius);
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   TEMA CLARO (Opción A) — aplicado a todo el sitio
   ============================================================ */
:root{--panel:#eef1f4;--panel-2:#e4e8ec;--line:#e1e5e9}
.topbar{background:#f1f4f7;color:#5b636b;border-bottom:1px solid var(--line)}
.topbar a{color:#2a2f36}
.topbar svg{fill:var(--orange)}
.site-header{border-bottom-color:var(--line)}

.hero{background:linear-gradient(180deg,#f8fafb 0%,#eef1f4 100%);color:var(--ink)}
.hero::after{display:none}
.hero h1{color:var(--ink)}
.hero .lead{color:var(--steel)}
.hero .orange{color:var(--orange-d)}
.hero .finder .chip{background:#fff;border-color:var(--line);color:var(--ink)}
.hero .finder .chip:hover{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-d)}
.hero-figure{border-color:var(--line);box-shadow:0 24px 50px -30px rgba(21,24,27,.35);background:#fff}
.btn-ghost-light{color:var(--ink);border-color:var(--ink)}
.btn-ghost-light:hover{background:var(--ink);color:#fff}

.bcard.hero-brand{background:linear-gradient(135deg,#ffffff,#eef1f4);color:var(--ink);border-color:var(--orange)}
.bcard.hero-brand .tag{color:var(--orange-d)}
.bcard.hero-brand h3{color:var(--ink)}
.bcard.hero-brand p{color:var(--steel)}
.bcard.hero-brand .go{color:var(--orange-d)}

.vchip:hover{background:var(--orange);border-color:var(--orange);color:#fff}

.wa-band{background:#fff;border:1px solid var(--line);color:var(--ink)}
.wa-band h2{color:var(--ink)}
.wa-band p{color:var(--steel)}

.site-footer{background:#eef1f4;color:#5b636b;border-top:3px solid var(--orange)}
.site-footer h4{color:var(--ink)}
.site-footer a{color:var(--ink-3)}
.site-footer a:hover{color:var(--orange-d)}
.site-footer .contact b{color:var(--ink)}
.site-footer .legal{border-top-color:#d6dbe0;color:#8a9199}