/* Cabecera clara y centrada para páginas editoriales · Terroir Radical · 13-oct-2026
   Papel claro y título en Playfair (tu serif de marca). El color solo señala: pastilla de sección + marcador en la palabra en cursiva.
   data-camp elige la pareja pastilla/marcador: teula (territorios) · groc (guías) · bordeus (marca y packs) · rosa (productores y personas) · neutre (legales). */
.page-hero.page-hero--clara {
  --p-bg: #B8451E; --p-ink: #FFF8EC; --marker: #F7DE86;
  position: relative; background: #FFF8EC; color: #1A3318; border-bottom: 1px solid rgba(26, 51, 24, .18); text-align: center;
  padding: clamp(96px, 12svh, 140px) 0 clamp(48px, 7svh, 88px);
}
.page-hero.page-hero--clara[data-camp="groc"]    { --p-bg: #F2C012; --p-ink: #1A3318; --marker: #F0C5AE; }
.page-hero.page-hero--clara[data-camp="bordeus"] { --p-bg: #7B2D2D; --p-ink: #FFF3E3; --marker: #F2BFCB; }
.page-hero.page-hero--clara[data-camp="rosa"]    { --p-bg: #D4607A; --p-ink: #2A0F18; --marker: #F7DE86; }
.page-hero.page-hero--clara[data-camp="neutre"]  { --p-bg: #E6DECB; --p-ink: #1A3318; --marker: #E6DECB; }
.page-hero.page-hero--clara .eyebrow {            /* pastilla de sección */
  display: inline-block; margin: 0 0 clamp(18px, 2.4vw, 26px); padding: 7px 17px 6px; border-radius: 999px;
  background: var(--p-bg); color: var(--p-ink); text-transform: none; letter-spacing: .02em;
  font: 700 clamp(.95rem, 1.4vw, 1.1rem)/1.15 var(--ff-body);
}
.page-hero.page-hero--clara .eyebrow::before { display: none; }
.page-hero.page-hero--clara h1 {
  max-width: 20ch; margin: 0 auto clamp(16px, 2.2vw, 26px); color: #1A3318; text-transform: none; text-wrap: balance;
  font: 700 clamp(2.5rem, min(6.4vw, 11svh), 5.6rem)/1.04 var(--ff-display); letter-spacing: -.015em;
}
.page-hero.page-hero--clara h1 em {              /* cursiva con marcador */
  font-style: italic; font-weight: 600; font-size: 1em; color: #1A3318; letter-spacing: -.01em;
  background: linear-gradient(transparent 56%, var(--marker) 56% 90%, transparent 90%);
  padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.page-hero.page-hero--clara p { max-width: 58ch; margin-left: auto; margin-right: auto; color: #3A372E; opacity: 1; font-size: clamp(1.06rem, 1.5vw, 1.26rem); line-height: 1.65; }
@media (max-width: 760px) { .page-hero.page-hero--clara { padding-top: 96px; } }

/* ───────── Páginas legales: contenido legible (legal-wrap / legal-seccio no tenían estilo) ───────── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px clamp(64px, 8vw, 110px); color: #1A1710; font-size: 1.05rem; line-height: 1.75; }
.legal-update { display: block; margin: 0 0 clamp(26px, 4vw, 40px); color: #5b574a; font-size: .95rem; font-style: italic; }
.legal-seccio { margin: 0 0 clamp(30px, 4vw, 46px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid rgba(26, 51, 24, .2); }
.legal-seccio .eyebrow { display: block; margin: 0 0 6px; padding: 0; background: none; color: #B8451E; text-transform: none; letter-spacing: .04em; font: 800 .95rem/1 var(--ff-cond); }
.legal-seccio .eyebrow::before { display: none; }
.legal-seccio h2 { margin: 0 0 14px; color: #1A3318; font: 700 clamp(1.5rem, 2.4vw, 1.95rem)/1.2 var(--ff-display); }
.legal-seccio h3 { margin: 22px 0 8px; color: #1A3318; font: 700 1.2rem/1.3 var(--ff-display); }
.legal-seccio p { margin: 0 0 14px; }
.legal-seccio ul, .legal-seccio ol { margin: 0 0 14px; padding-left: 1.3em; }
.legal-seccio li { margin-bottom: 6px; }
.legal-seccio a { color: #2B5425; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-seccio table { width: 100%; margin: 6px 0 18px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.legal-seccio th, .legal-seccio td { padding: 10px 12px; border-bottom: 1px solid rgba(26, 51, 24, .18); text-align: left; vertical-align: top; }
.legal-seccio th { background: #F4EDDD; color: #1A3318; font: 800 .95rem/1.2 var(--ff-cond); letter-spacing: .03em; }
.legal-seccio code { padding: 1px 5px; border-radius: 4px; background: #F4EDDD; font-size: .88em; }
@media (max-width: 640px) { .legal-seccio table { display: block; overflow-x: auto; } }