/* ============================================================================
 * EBC Frenos — Páginas legales (traducción de Legal.jsx del Design System).
 * Cabecera negra + índice lateral fijo + columna de lectura. Carga la última.
 * ========================================================================== */
.ebc-legal { background: var(--surface-page); }
.ebc-legal *, .ebc-legal *::before, .ebc-legal *::after { box-sizing: border-box; }
.ebc-legal__wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

/* ---- masthead negro ---- */
.ebc-legal__masthead { background: var(--black); color: #fff; padding: clamp(28px,3.6vw,46px) 0; }
.ebc-legal__crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-on-impact-faint); margin-bottom: 14px; }
.ebc-legal__crumbs a { color: var(--text-on-impact-faint); text-decoration: none; }
.ebc-legal__crumbs a:hover { color: #fff; }
.ebc-legal__crumbs .is-current { color: var(--text-on-impact-soft); }
.ebc-legal__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4.2vw,52px); text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; color: #fff; margin: 12px 0 0; }
.ebc-legal__note { font-family: var(--font-body); font-size: 14px; color: var(--text-on-impact-soft); margin: 12px 0 0; max-width: 640px; line-height: 1.55; }

/* ---- cuerpo: índice + artículo ---- */
.ebc-legal__grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px,3vw,52px); align-items: start; padding-top: clamp(26px,3vw,42px); padding-bottom: clamp(40px,6vw,72px); }

/* índice lateral */
.ebc-legal-nav { align-self: start; position: sticky; top: 96px; }
.ebc-legal-nav__label { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 12px; }
.ebc-legal-list { display: flex; flex-direction: column; gap: 4px; }
.ebc-legal-link { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--radius-md); text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; color: var(--text-body); transition: background 150ms, color 150ms; }
.ebc-legal-link .ebc-ico { flex: none; color: var(--text-faint); }
.ebc-legal-link:hover { background: var(--surface-sunken); color: var(--text-strong); }
.ebc-legal-link.is-on { color: var(--blue-700); background: var(--blue-50); box-shadow: inset 2px 0 0 var(--blue-700); }
.ebc-legal-link.is-on .ebc-ico { color: var(--blue-700); }

.ebc-legal-help { margin-top: 18px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.ebc-legal-help__t { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-strong); margin-bottom: 8px; }
.ebc-legal-help__s { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* artículo */
.ebc-legal__article { min-width: 0; max-width: 760px; }

/* prosa (contenido $cms.content desde el BO) */
.ebc-legal__prose { font-family: var(--font-body); font-size: 15px; line-height: 1.72; color: var(--text-body); }
.ebc-legal__prose > :first-child { margin-top: 0; }
.ebc-legal__prose h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(17px,1.7vw,21px); text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-strong); line-height: 1.2; margin: 34px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.ebc-legal__prose h3 { font-family: var(--font-heading); font-weight: 600; font-size: 16px; text-transform: uppercase; color: var(--text-strong); margin: 24px 0 0; }
.ebc-legal__prose p { margin: 13px 0 0; }
.ebc-legal__prose ul, .ebc-legal__prose ol { margin: 14px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ebc-legal__prose ol { counter-reset: ebc-li; }
.ebc-legal__prose li { display: flex; gap: 11px; line-height: 1.65; }
.ebc-legal__prose ul li::before { content: ""; flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-700); }
.ebc-legal__prose ol li::before { counter-increment: ebc-li; content: counter(ebc-li); flex: none; font-family: var(--font-data, var(--font-heading)); font-weight: 700; font-size: 12px; color: var(--blue-700); min-width: 18px; }
.ebc-legal__prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.ebc-legal__prose strong { color: var(--text-strong); font-weight: 600; }
.ebc-legal__prose h2 + p, .ebc-legal__prose h3 + p { margin-top: 12px; }

.ebc-legal__foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ebc-legal__foot > span { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.ebc-legal__back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-link); text-decoration: none; }
.ebc-legal__back:hover { color: var(--text-link-hover); }

/* placeholder "contenido en preparación" */
.ebc-legal__placeholder { border: 1px dashed var(--border); border-radius: var(--radius-xl); background: var(--surface-card); padding: clamp(32px,5vw,56px) 28px; text-align: center; }
.ebc-legal__ph-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); align-items: center; justify-content: center; }
.ebc-legal__ph-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px,2.4vw,30px); text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-strong); margin: 18px 0 0; }
.ebc-legal__ph-text { font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--text-muted); margin: 12px auto 0; max-width: 460px; }
.ebc-legal__ph-cta { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ebc-legal__btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: var(--radius); font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; transition: background 150ms, color 150ms, border-color 150ms; }
.ebc-legal__btn--secondary { background: var(--blue-700); color: #fff; }
.ebc-legal__btn--secondary:hover { background: var(--blue-800); }
.ebc-legal__btn--ghost { background: transparent; color: var(--text-body); border: 1px solid var(--border); }
.ebc-legal__btn--ghost:hover { background: var(--surface-sunken); color: var(--text-strong); }

/* responsive */
@media (max-width: 860px) {
  .ebc-legal__grid { grid-template-columns: 1fr; }
  .ebc-legal-nav { position: static; }
  .ebc-legal-list { flex-direction: row; flex-wrap: wrap; }
  .ebc-legal-link { background: var(--surface-card); border: 1px solid var(--border-soft); }
  .ebc-legal-help { display: none; }
}

/* ============================================================================
 * Descargas profesionales (CMS «descargas»). Reutiliza el masthead legal.
 * El cuerpo es $cms.content: .dl-intro + .dl-contacto + .dl-grupos > section.
 * ========================================================================== */
.ebc-dl__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: clamp(20px,2.4vw,32px); align-items: start; padding-top: clamp(26px,3vw,42px); padding-bottom: clamp(40px,6vw,72px); font-family: var(--font-body); color: var(--text-body); }
.ebc-dl__body h2 { margin: 0; }
.ebc-dl__body ul { margin: 0; padding: 0; list-style: none; }

.dl-intro { grid-column: 1; grid-row: 1; }
.dl-intro p { margin: 0; font-size: 16px; line-height: 1.7; max-width: 680px; }

/* contacto */
.dl-contacto { grid-column: 2; grid-row: 1; padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.dl-contacto h2 { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-strong); margin-bottom: 12px; }
.dl-contacto ul { display: flex; flex-direction: column; gap: 10px; }
.dl-contacto li { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.dl-contacto strong { display: block; font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.dl-contacto a { color: var(--text-link); text-decoration: none; }
.dl-contacto a:hover { color: var(--text-link-hover); text-decoration: underline; }

/* grupos por marca: columnas tipo masonry */
.dl-grupos { grid-column: 1 / -1; grid-row: 2; columns: 3 300px; column-gap: clamp(16px,2vw,24px); }
.dl-grupos section { break-inside: avoid; margin-bottom: clamp(16px,2vw,24px); padding: 18px 16px 12px; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.dl-grupos h2 { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-heading); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-strong); line-height: 1.2; }
.dl-grupos h2::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--blue-700); }
.dl-grupos ul { display: flex; flex-direction: column; gap: 2px; }

/* fila de descarga: icono + nombre + tipo de fichero */
.dl-grupos a { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.35; color: var(--text-body); text-decoration: none; transition: background 150ms, color 150ms; }
.dl-grupos a::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--text-faint); transition: background 150ms;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.dl-grupos a:hover { background: var(--blue-50); color: var(--blue-700); }
.dl-grupos a:hover::before { background: var(--blue-700); }
.dl-grupos a::after { flex: none; margin-left: auto; padding: 2px 6px; border-radius: var(--radius-xs); font-family: var(--font-data, var(--font-heading)); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; color: var(--text-muted); background: var(--surface-sunken-2); }
.dl-grupos a[href$=".xlsx" i]::after, .dl-grupos a[href$=".xls" i]::after { content: "XLS"; color: var(--ok-700); background: var(--ok-50); }
.dl-grupos a[href$=".pdf" i]::after { content: "PDF"; color: var(--blue-700); background: var(--blue-50); }
.dl-grupos a[href$=".jpeg" i]::after, .dl-grupos a[href$=".jpg" i]::after { content: "JPG"; }
.dl-grupos a[href$=".txt" i]::after { content: "TXT"; }
.dl-grupos a[href$="/"]::after { content: "Carpeta"; }
.dl-grupos a[href^="https://www.bihr.eu"]::after { content: "Web"; }

@media (max-width: 860px) {
  .ebc-dl__body { grid-template-columns: 1fr; }
  .dl-intro, .dl-contacto, .dl-grupos { grid-column: 1; grid-row: auto; }
}