/* =========================================================================
   EBC Frenos — Chrome (header + footer). Traducción del Design System
   (SiteHeader / SiteFooter) a CSS con tokens. Sin tocar el SCSS padre.
   ========================================================================= */

/* ---- Range badges (pastillas de color de gama) ---- */
.ebc-badge{display:inline-flex;align-items:center;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:var(--radius-pill);line-height:1.5;white-space:nowrap}
.ebc-badge--ultimax{background:var(--range-ultimax);color:var(--range-ultimax-ink)}
.ebc-badge--greenstuff{background:var(--range-greenstuff);color:var(--range-greenstuff-ink)}
.ebc-badge--redstuff{background:var(--range-redstuff);color:var(--range-redstuff-ink)}
.ebc-badge--yellowstuff{background:var(--range-yellowstuff);color:var(--range-yellowstuff-ink)}
.ebc-badge--bluestuff{background:var(--range-bluestuff);color:var(--range-bluestuff-ink)}
.ebc-badge--orangestuff{background:var(--range-orangestuff);color:var(--range-orangestuff-ink)}
.ebc-badge--rp1{background:var(--range-rp1);color:var(--range-rp1-ink)}
.ebc-badge--rpx{background:var(--range-rpx);color:var(--range-rpx-ink)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ebc-ftr{container-type:inline-size;background:var(--black);color:var(--text-on-impact-soft);font-family:var(--font-body)}
.ebc-ftr a{color:var(--text-on-impact-soft);text-decoration:none;transition:color var(--dur) var(--ease-out)}
.ebc-ftr a:hover{color:#fff}
.ebc-ftr__eyebrow,.ebc-ftr__title,.ebc-ftr__social-t{font-family:var(--font-heading);text-transform:uppercase;font-weight:var(--fw-semibold)}

/* Tira de gamas */
.ebc-ftr__ranges{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px var(--page-pad-x);border-bottom:1px solid var(--border-onblack)}
.ebc-ftr__eyebrow{font-size:11px;letter-spacing:.08em;color:var(--text-on-impact-faint)}
.ebc-ftr__badges{display:flex;gap:8px;flex-wrap:wrap}

/* Columnas */
.ebc-ftr__cols-wrap{padding:40px var(--page-pad-x) 32px}
.ebc-ftr__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:36px}
.ebc-ftr__title{font-size:12px;letter-spacing:.06em;color:#fff;margin-bottom:15px}
.ebc-ftr__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ebc-ftr__col a{font-size:13.5px}

/* Newsletter + distribuidor + social */
.ebc-ftr__col--news p{font-size:13px;line-height:1.5;margin:0 0 12px}
.ebc-ftr__newsform{display:flex;gap:8px;margin-bottom:18px}
.ebc-ftr__newsform input{flex:1;min-width:0;height:42px;border:1px solid var(--border-onblack);background:rgba(255,255,255,.06);border-radius:var(--radius);padding:0 12px;color:#fff;outline:none;font-family:var(--font-body);font-size:13.5px}
.ebc-ftr__newsform input::placeholder{color:var(--text-on-impact-faint)}
.ebc-ftr__newsform button{flex:none;border:none;background:var(--action);color:#fff;border-radius:var(--radius);padding:0 16px;cursor:pointer;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.ebc-ftr__newsform button:hover{background:var(--action-hover)}
.ebc-ftr__distributor{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;background:var(--graphite-900);border-radius:var(--radius-md);box-shadow:var(--ring-onblack)}
.ebc-ftr__distributor .material-icons{color:var(--red-500);font-size:22px}
.ebc-ftr__distributor span{font-family:var(--font-heading);font-size:12px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.03em;color:#fff;line-height:1.25}
.ebc-ftr__distributor small{color:var(--text-on-impact-soft);font-weight:var(--fw-semibold)}
.ebc-ftr__social{margin-top:18px}
.ebc-ftr__social-t{font-size:11px;letter-spacing:.07em;color:var(--text-on-impact-faint);margin-bottom:10px}
.ebc-ftr__social-icons{display:flex;gap:10px}
.ebc-ftr__social-icons a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--border-onblack);color:#fff}
.ebc-ftr__social-icons a:hover{background:rgba(255,255,255,.14);color:#fff}
.ebc-ftr__social-icons svg{width:17px;height:17px;fill:currentColor}

/* Barra legal */
.ebc-ftr__legal-wrap{border-top:1px solid var(--border-onblack);padding:18px var(--page-pad-x)}
.ebc-ftr__legal{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ebc-ftr__legal-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ebc-ftr__legal-left img{height:22px;width:auto;opacity:.9}
.ebc-ftr__brand{display:inline-flex;align-items:center;background:#fff;padding:4px 8px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.06)}
.ebc-ftr__brand img{opacity:1}
.ebc-ftr__legal-left span{font-size:12px;color:var(--text-on-impact-faint)}
.ebc-ftr__legal-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ebc-ftr__pay{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ebc-ftr__pay span{background:#fff;border-radius:var(--radius-sm);height:28px;padding:0 9px;display:inline-flex;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.ebc-ftr__pay img{height:15px;width:auto;display:block}
.ebc-ftr__legal-links{display:flex;gap:14px;flex-wrap:wrap}
.ebc-ftr__legal-links a{font-size:12px}

@container (max-width:820px){.ebc-ftr__cols{grid-template-columns:1fr 1fr;gap:28px}}
@container (max-width:520px){.ebc-ftr__cols{grid-template-columns:1fr}.ebc-ftr__legal{flex-direction:column;align-items:flex-start}}

/* =========================================================================
   HEADER
   ========================================================================= */
#header.header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--black);padding:0;margin:0;border:0;box-shadow:none}
.ebc-hdr{container-type:inline-size;position:relative;background:var(--black);color:#fff;font-family:var(--font-body)}
.ebc-hdr a{color:inherit;text-decoration:none}
.ebc-hdr .material-icons{font-size:20px;line-height:1;vertical-align:middle}
.ebc-hdr__menu-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.ebc-hdr__util{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px;padding:0 var(--page-pad-x);border-bottom:1px solid var(--border-onblack);font-size:12px;color:var(--text-on-impact-soft)}
.ebc-hdr__util-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:var(--fw-semibold)}
.ebc-hdr__util-badge .material-icons{color:var(--red-500);font-size:15px}
.ebc-hdr__util-links{display:inline-flex;align-items:center;gap:18px}
.ebc-hdr__util-links a{display:inline-flex;align-items:center;gap:6px}
.ebc-hdr__util-links a:hover{color:#fff}
.ebc-hdr__util-links .material-icons{font-size:15px}
.ebc-hdr__util-links svg{width:14px;height:14px;fill:currentColor}
.ebc-hdr__bar{display:flex;align-items:center;gap:20px;height:72px;padding:0 var(--page-pad-x)}
.ebc-hdr__logo-h1{margin:0;line-height:0}
.ebc-hdr__logo{flex:none;display:inline-flex;align-items:center;background:#fff;padding:5px 9px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.06)}
.ebc-hdr__logo img{height:28px;width:auto;display:block}
.ebc-hdr__kw{flex:1;max-width:440px;display:flex;align-items:center;gap:8px;height:44px;background:rgba(255,255,255,.08);border:1px solid var(--border-onblack);border-radius:var(--radius);padding:0 14px}
.ebc-hdr__kw .material-icons{color:var(--text-on-impact-soft);font-size:18px}
.ebc-hdr__kw input{flex:1;min-width:0;border:none;background:transparent;color:#fff;outline:none;font-family:var(--font-body);font-size:14px}
.ebc-hdr__kw input::placeholder{color:var(--text-on-impact-soft)}
.ebc-hdr__spacer{flex:1}
.ebc-hdr__cta{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--action);color:#fff;height:44px;padding:0 18px;border-radius:var(--radius);font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.ebc-hdr__cta:hover{background:var(--action-hover);color:#fff}
.ebc-hdr__actions{display:flex;align-items:center;gap:2px}
.ebc-hdr__iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);color:#fff}
.ebc-hdr__iconbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.ebc-hdr__badge{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--action);color:#fff;font-family:var(--font-body);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ebc-hdr__nav{display:flex;align-items:stretch;height:46px;padding:0 var(--page-pad-x);border-top:1px solid var(--border-onblack)}
.ebc-hdr__navlink{display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 18px;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-on-impact-soft);box-shadow:inset 0 0 0 0 var(--red-600);transition:color 140ms,box-shadow 140ms}
.ebc-hdr__navlink:hover{color:#fff;box-shadow:inset 0 -3px 0 var(--red-600)}
.ebc-hdr__nav-offers{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--red-500)}
.ebc-hdr__nav-offers:hover{color:var(--red-400)}
.ebc-hdr__nav-offers .material-icons{font-size:16px}
/* Mundo con desplegable de tipos de pieza (Coche) */
.ebc-hdr__navitem{position:relative;display:inline-flex;align-items:stretch}
.ebc-hdr__navitem>.ebc-hdr__navlink .material-icons{font-size:16px;opacity:.7}
.ebc-hdr__submenu{position:absolute;top:100%;left:0;min-width:220px;background:var(--black,#14161a);border:1px solid var(--border-onblack);border-top:2px solid var(--red-600);box-shadow:var(--shadow-xl,0 14px 36px rgba(0,0,0,.45));padding:8px;display:none;flex-direction:column;z-index:120}
.ebc-hdr__navitem:hover>.ebc-hdr__submenu,.ebc-hdr__navitem:focus-within>.ebc-hdr__submenu{display:flex}
.ebc-hdr__submenu a{display:block;padding:10px 12px;font-family:var(--font-body);font-size:14px;color:var(--text-on-impact-soft);border-radius:8px;transition:background 120ms,color 120ms}
.ebc-hdr__submenu a:hover{background:rgba(255,255,255,.06);color:#fff}
.ebc-hdr__submenu-all{margin-top:4px;border-top:1px solid var(--border-onblack);font-family:var(--font-heading)!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.03em;color:var(--red-500)!important}
.ebc-hdr__drawer-sub{padding-left:32px!important;font-size:14px!important;opacity:.85}
.ebc-hdr__hamburger,.ebc-hdr__actions-mobile,.ebc-hdr__drawer{display:none}
@container (max-width:900px){
  .ebc-hdr__util{display:none}
  .ebc-hdr__kw{display:none}
  .ebc-hdr__cta{display:none}
  .ebc-hdr__actions{display:none}
  .ebc-hdr__nav{display:none}
  .ebc-hdr__hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-6px;color:#fff;cursor:pointer}
  .ebc-hdr__actions-mobile{display:flex;align-items:center;gap:2px;margin-left:auto}
  .ebc-hdr__actions-mobile a{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff}
  .ebc-hdr__menu-toggle:checked ~ .ebc-hdr__drawer{display:block}
}
.ebc-hdr__drawer{border-top:1px solid var(--border-onblack);background:var(--graphite-900);padding:6px 0 12px}
.ebc-hdr__drawer a{display:block;padding:12px 24px;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.ebc-hdr__drawer a:hover{background:rgba(255,255,255,.04);color:#fff}
.ebc-hdr__drawer-offers{color:var(--red-500)}
.ebc-hdr__drawer-cta{margin:8px 24px 0;justify-content:center;gap:9px;background:var(--action);height:46px;border-radius:var(--radius)}
.ebc-hdr__drawer-cta:hover{background:var(--action-hover)}

/* Mundos (find4ufilter): punto verde = vehículo activo en ese mundo */
.ebc-hdr__navdot{width:7px;height:7px;border-radius:50%;background:var(--fit-yes-fg,#1f8a4c);box-shadow:0 0 0 2px rgba(31,138,76,.3);margin-left:2px}
.ebc-hdr__drawer-veh{font-family:var(--font-body);font-weight:400;font-size:13px;text-transform:none;letter-spacing:0;opacity:.7}

/* =========================================================================
   MÓVIL — barra de navegación inferior (Inicio · Buscar · Garage · Cuenta · Carrito)
   No sale en ficha, carrito ni pago (ver header.tpl); donde sale, la cabecera
   móvil deja de repetir sus iconos.
   ========================================================================= */
.ebc-tabbar,.ebc-hdr__msearch{display:none}
@container (max-width:900px){
  .ebc-hdr--tab .ebc-hdr__actions-mobile{display:none}
}
@media (max-width:900px){
  .ebc-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--black,#14161a);border-top:1px solid var(--border-onblack);box-shadow:0 -6px 20px rgba(0,0,0,.35)}
  body:has(.ebc-tabbar){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .ebc-tabbar a.ebc-tabbar__item,.ebc-tabbar a.ebc-tabbar__item:visited{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-on-impact-soft,#b9bcc4);text-decoration:none;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:11px;text-transform:uppercase;letter-spacing:.03em;-webkit-tap-highlight-color:transparent}
  .ebc-tabbar__item .material-icons{font-size:24px;line-height:1}
  .ebc-tabbar a.ebc-tabbar__item:hover,.ebc-tabbar a.ebc-tabbar__item:active{color:#fff}
  .ebc-tabbar a.ebc-tabbar__item[aria-current="page"]{color:#fff}
  .ebc-tabbar__item[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--red-600)}
  .ebc-tabbar__ico{position:relative;display:flex}
  .ebc-tabbar__ico .ebc-hdr__badge{top:-5px;right:-10px}
}

/* =========================================================================
   MÓVIL — logo centrado y más grande; se encoge al bajar (clase is-scrolled
   en <html>, la pone header.tpl).
   ========================================================================= */
@container (max-width:900px){
  .ebc-hdr__bar{position:relative;height:84px;transition:height 220ms ease}
  .ebc-hdr__msearch{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:-8px;color:#fff}
  .ebc-hdr__bar>.ebc-hdr__logo-h1,.ebc-hdr__bar>.ebc-hdr__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .ebc-hdr__logo{padding:6px 11px;transition:padding 220ms ease}
  .ebc-hdr__logo img{height:40px;transition:height 220ms ease}
  .is-scrolled .ebc-hdr__bar{height:60px}
  .is-scrolled .ebc-hdr__logo{padding:4px 8px}
  .is-scrolled .ebc-hdr__logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .ebc-hdr__bar,.ebc-hdr__logo,.ebc-hdr__logo img{transition:none!important}
}