/* =========================================================================
   EBC Frenos — Página de gama (CMS) + CMS estándar.
   Traducción de GamaPage.jsx: data-driven por color de gama (--gp-color).
   La identidad estructurada (hero, specs, ladder, temperatura, relacionadas)
   la pinta el tema desde un mapa de datos; el cuerpo editable = $cms.content.
   Override de cms/page.tpl (full-bleed). Scopeado bajo .ebc-gama / .ebc-cms.
   ========================================================================= */

#cms #wrapper.wrapper { padding: 0; max-width: none; overflow-x: clip; }

.ebc-gama { background: var(--surface-page); }
.ebc-gama *, .ebc-gama *::before, .ebc-gama *::after { box-sizing: border-box; }
.ebc-gp-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.ebc-gama .ebc-ico { display: block; flex: none; }

/* Eyebrow reutilizado */
.ebc-gp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-600);
}
.ebc-gp-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; flex: none; }

/* ============================ HERO ============================ */
.ebc-gp-hero {
  position: relative;
  background: var(--black);
  color: #fff;
  overflow: hidden;
}
.ebc-gp-hero__deco {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(440px, 40%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gp-color) 55%, transparent), transparent 62%);
  opacity: .85;
  pointer-events: none;
}
.ebc-gp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.86) 42%, rgba(10,10,12,.5) 70%, rgba(10,10,12,.2) 100%);
  pointer-events: none;
}
.ebc-gp-hero__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gp-color); }
.ebc-gp-hero__inner { position: relative; padding: clamp(22px,3.5vw,40px) 0 clamp(28px,4vw,46px); }

.ebc-gp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-family: var(--font-body); font-size: 13px; color: var(--text-on-impact-soft); }
.ebc-gp-crumbs a { color: var(--text-on-impact-soft); text-decoration: none; }
.ebc-gp-crumbs a:hover { color: #fff; text-decoration: underline; }
.ebc-gp-crumbs span[aria-hidden] { opacity: .45; }
.ebc-gp-crumbs .is-current { color: #fff; opacity: .85; }

.ebc-gp-hero__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ebc-gp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gp-color);
  color: var(--gp-ink);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ebc-gp-tag--official {
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: var(--ring-onblack);
}
.ebc-gp-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px,5.5vw,76px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 14px 0 0;
  line-height: 0.9;
}
.ebc-gp-hero__tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(16px,1.6vw,20px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gp-color);
  margin: 8px 0 0;
}
.ebc-gp-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 24px 0 0;
  max-width: 560px;
}
.ebc-gp-chip {
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--border-onblack);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 0;
}
.ebc-gp-chip__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-on-impact-faint);
  margin-bottom: 6px;
}
.ebc-gp-chip__val { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: #fff; }
.ebc-gp-chip__val--num { font-family: var(--font-body); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.ebc-gp-hero__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* Botones del hero */
.ebc-gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.ebc-gp-btn--primary { background: var(--action); color: var(--action-on); border-color: var(--action); }
.ebc-gp-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.ebc-gp-btn--dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.ebc-gp-btn--dark:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Ladder (posición en la gama) */
.ebc-gp-ladder__track { display: flex; gap: 4px; }
.ebc-gp-ladder__seg { flex: 1; height: 8px; border-radius: 2px; background: var(--gray-200); }
.ebc-gp-ladder__seg.is-on { background: var(--gp-color); }
.ebc-gp-hero .ebc-gp-ladder__seg { background: rgba(255,255,255,.16); }
.ebc-gp-hero .ebc-gp-ladder__seg.is-on { background: var(--gp-color); }
.ebc-gp-ladder__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ebc-gp-hero .ebc-gp-ladder__scale { color: var(--text-on-impact-faint); }

/* Barra de temperatura */
.ebc-gp-temp__bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e9b3e, #ffcf2e 45%, #f26a1b 72%, #e00209);
}
.ebc-gp-temp__dot {
  position: absolute;
  top: -4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 0 0 3px var(--graphite-800);
  transform: translateX(-10px);
}
.ebc-gp-temp__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ebc-gp-temp__scale strong { font-weight: 700; color: var(--text-strong); }

/* ============================ INTRO ============================ */
.ebc-gp-sec { padding-block: var(--section-y); }
.ebc-gp-sec--card { background: var(--surface-card); border-block: 1px solid var(--border-soft); }
.ebc-gp-sec--card-top { background: var(--surface-card); border-top: 1px solid var(--border-soft); }
.ebc-gp-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px,4vw,56px);
  align-items: center;
}
.ebc-gp-intro__text {
  font-family: var(--font-body);
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.6;
  color: var(--text-strong);
  margin: 12px 0 0;
}
.ebc-gp-intro__text p { margin: 0 0 12px; }
.ebc-gp-aside {
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ebc-gp-aside__label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.ebc-gp-aside__label + .ebc-gp-temp { margin-top: 0; }
.ebc-gp-aside__sep { margin-top: 20px; }

/* ============================ FEATURES ============================ */
.ebc-gp-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px,3vw,36px);
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 10px 0 24px;
}
.ebc-gp-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ebc-gp-feat {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.ebc-gp-feat__icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gp-color) 14%, #fff);
  color: var(--text-strong);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ebc-gp-feat__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.ebc-gp-feat__text { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0; }

/* ============================ SPECS ============================ */
.ebc-gp-specs {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px,4vw,56px);
  align-items: start;
}
.ebc-gp-table { border-collapse: collapse; width: 100%; }
.ebc-gp-table tr { border-bottom: 1px solid var(--border-soft); }
.ebc-gp-table td { padding: 12px 0; font-family: var(--font-body); font-size: 14px; }
.ebc-gp-table td:first-child { padding-right: 18px; color: var(--text-muted); width: 42%; }
.ebc-gp-table td:last-child { font-weight: 600; color: var(--text-strong); }
.ebc-gp-aside-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.ebc-gp-avail { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.ebc-gp-avail__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ebc-gp-dl { display: flex; flex-direction: column; gap: 10px; }
.ebc-gp-dl__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--surface-page);
  transition: border-color 150ms, background 150ms;
}
.ebc-gp-dl__item:hover { border-color: var(--blue-300); background: var(--blue-50); }
.ebc-gp-dl__item .ebc-ico { color: var(--blue-700); }
.ebc-gp-dl__t { flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.ebc-gp-dl__s { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }

/* ============================ RELACIONADAS ============================ */
.ebc-gp-rel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; }
.ebc-gp-relcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  text-decoration: none;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-soft);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms, transform 160ms;
}
.ebc-gp-relcard:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ebc-gp-relcard__bar { width: 12px; height: 34px; border-radius: 3px; flex: none; }
.ebc-gp-relcard__body { flex: 1; min-width: 0; }
.ebc-gp-relcard__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15.5px;
  text-transform: uppercase;
  color: var(--text-strong);
  line-height: 1.1;
}
.ebc-gp-relcard__meta { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); }
.ebc-gp-relcard__chev { color: var(--text-faint); }
.ebc-gp-relcard:hover .ebc-gp-relcard__chev { color: var(--blue-700); }

/* ============================ CTA BAND ============================ */
.ebc-gp-ctaband { position: relative; overflow: hidden; background: var(--black); color: #fff; }
.ebc-gp-ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 16% 30%, color-mix(in srgb, var(--gp-color) 30%, transparent), transparent 45%);
  pointer-events: none;
}
.ebc-gp-ctaband__inner { position: relative; padding: clamp(36px,5vw,64px) 0; text-align: center; }
.ebc-gp-ctaband__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px,3.4vw,44px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
  /* El contenedor es oscuro (color:#fff), pero al ser un <h2> el tema padre
     define `h2{color:oscuro}` (0,0,1) que gana al blanco HEREDADO. Lo fijamos
     explícito para que se lea sobre el fondo negro. */
  color: #fff;
}
.ebc-gp-ctaband__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-on-impact-soft);
  margin: 12px auto 0;
  max-width: 560px;
  line-height: 1.5;
}
.ebc-gp-ctaband__cta { margin-top: 22px; display: flex; justify-content: center; }

/* ============================ CMS ESTÁNDAR (legales) ============================ */
.ebc-cms { padding-block: clamp(28px, 4vw, 48px); max-width: 880px; }
.ebc-cms__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px,3vw,40px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 20px;
}
.ebc-cms__body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--text-body); }
.ebc-cms__body h2, .ebc-cms__body h3 { font-family: var(--font-heading); color: var(--text-strong); margin: 28px 0 10px; }
.ebc-cms__body a { color: var(--text-link); }
.ebc-cms__body ul { padding-left: 20px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 860px) {
  .ebc-gp-intro, .ebc-gp-specs { grid-template-columns: 1fr; }
  .ebc-gp-feats { grid-template-columns: 1fr; }
  .ebc-gp-rel { grid-template-columns: 1fr; }
  .ebc-gp-hero__deco { display: none; }
}
@media (max-width: 520px) {
  .ebc-gp-chips { grid-template-columns: 1fr; }
  .ebc-gp-hero__cta .ebc-gp-btn { width: 100%; justify-content: center; }
}

/* ===================== ÍNDICE DE GAMAS POR VEHÍCULO (GamaIndex) ===================== */
.ebc-gx { background: var(--surface-page); }
.ebc-gx *, .ebc-gx *::before, .ebc-gx *::after { box-sizing: border-box; }

/* --- hero negro --- */
.ebc-gx__hero { position: relative; background: var(--black); color: #fff; overflow: hidden; padding: clamp(22px,3.5vw,40px) 0 clamp(24px,3.5vw,34px); }
.ebc-gx__hero-glow { position: absolute; inset: 0; background: radial-gradient(circle at 88% 14%, rgba(224,2,9,.18), transparent 48%); pointer-events: none; }
.ebc-gx__hero-in { position: relative; }
.ebc-gx__crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: var(--text-on-impact-soft); margin-bottom: 14px; }
.ebc-gx__crumbs a { color: var(--text-on-impact-soft); text-decoration: none; }
.ebc-gx__crumbs a:hover { color: #fff; }
.ebc-gx__crumbs span { opacity: .5; }

/* --- selector de familia (pills, enlaces) --- */
.ebc-gx__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ebc-gx__pill {
  padding: 9px 16px; border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none;
  background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px var(--border-onblack);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.ebc-gx__pill:hover { background: rgba(255,255,255,.16); }
.ebc-gx__pill.is-on { background: #fff; color: var(--black); box-shadow: none; }

.ebc-gx__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4.2vw,52px); text-transform: uppercase; letter-spacing: -0.015em; color: #fff; margin: 12px 0 0; line-height: .96; }
.ebc-gx__intro { font-family: var(--font-body); font-size: clamp(14px,1.3vw,17px); color: var(--text-on-impact-soft); margin: 14px 0 0; max-width: 660px; line-height: 1.55; }

/* --- pestañas de subcategoría (filtro cliente) --- */
.ebc-gx__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 22px; }
.ebc-gx__tab {
  border: none; cursor: pointer; padding: 8px 15px; border-radius: var(--radius); white-space: nowrap;
  background: transparent; color: var(--text-on-impact-soft); box-shadow: inset 0 0 0 1px var(--border-onblack);
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.ebc-gx__tab:hover { color: #fff; }
.ebc-gx__tab.is-on { background: var(--action); color: #fff; box-shadow: none; }

/* --- rejilla de tarjetas --- */
.ebc-gx__body { padding: clamp(28px,4vw,48px) 0 clamp(40px,6vw,72px); }
.ebc-gx__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ebc-gx__card {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm); transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ebc-gx__card:hover { border-color: var(--border); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* foto de producto: contain sobre panel neutro (máster cuadrado transparente del cliente) */
.ebc-gx__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px 16px; background: radial-gradient(circle at 50% 40%, #fff, var(--surface-sunken) 135%); border-bottom: 1px solid var(--border-soft); }
.ebc-gx__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 7px 15px rgba(10,10,10,.16)); transition: transform 320ms var(--ease-out); }
.ebc-gx__card:hover .ebc-gx__media img { transform: scale(1.045); }
.ebc-gx__chead { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 92px; padding: 15px 18px; overflow: hidden; }
.ebc-gx__cglow { position: absolute; inset: 0; background: radial-gradient(circle at 84% 16%, rgba(255,255,255,.16), transparent 55%); }
.ebc-gx__ccat { position: relative; font-family: var(--font-heading); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; opacity: .9; margin-bottom: 5px; }
.ebc-gx__cname { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: .95; text-transform: uppercase; letter-spacing: -0.01em; }
.ebc-gx__cbody { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 18px 16px; }
.ebc-gx__ctag { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.ebc-gx__cmore { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-link); }
.ebc-gx__card:hover .ebc-gx__cmore { color: var(--text-link-hover); }
.ebc-gx__card:hover .ebc-gx__cmore .ebc-ico { transform: translateX(3px); }
.ebc-gx__cmore .ebc-ico { transition: transform 180ms; }

/* --- banda recomendador --- */
.ebc-gx__reco { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px 24px; }
.ebc-gx__reco-l { display: flex; align-items: center; gap: 14px; }
.ebc-gx__reco-ic { flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--blue-50); color: var(--blue-700); display: inline-flex; align-items: center; justify-content: center; }
.ebc-gx__reco-t { font-family: var(--font-heading); font-weight: 700; font-size: 17px; text-transform: uppercase; color: var(--text-strong); }
.ebc-gx__reco-s { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); }
.ebc-gx__reco-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius); text-decoration: none;
  background: var(--blue-700); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em;
  transition: background 150ms;
}
.ebc-gx__reco-cta:hover { background: var(--blue-800, #00275f); }

@media (max-width: 1000px) { .ebc-gx__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ebc-gx__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ebc-gx__grid { grid-template-columns: 1fr; } .ebc-gx__reco { flex-direction: column; align-items: flex-start; } }