/* public/newsletter/marca.css
 *
 * Las ediciones del Pulso en la marca (ADR-0236). Mayo, junio, julio y agosto
 * de 2026 son artículos editoriales escritos a mano antes del rebranding
 * (ADR-0208): Inter y Lexend —que no se cargan—, el teal viejo en degradé, una
 * "f" en un cuadrado blanco en lugar del logo y rótulos en mayúsculas
 * espaciadas. Sus textos y sus números no se tocan (son lo que se publicó);
 * esta hoja, que cada edición carga DESPUÉS de su propio <style>, les pone la
 * marca encima: Plus Jakarta Sans autoalojada, la paleta, sentence case, los
 * controles por elevación y la tapa en teal 600 con el isotipo de marca de agua.
 * El logo sale de /brand/ (los SVG que genera src/brand/logo.js).
 *
 * Cubre las dos plantillas: la de mayo (.hero, .brand, .seg, .insight…) y la de
 * junio a agosto (.utility, .ed-toggle, .kpi, .callout, .fl…). Medidas y
 * colores: skill fonditos-brand y .interface-design/system.md.
 */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2")}

:root{
  /* junio–agosto */
  --teal:#0F7A73; --teal-deep:#0C6660; --ink:#1F2937; --muted:#64748b; --sub:#475569;
  --line:rgba(226,232,240,.9); --bg:#F4F6F8; --up:#047857; --down:#be123c; --amber:#0C6660;
  /* mayo */
  --primary:#0F7A73; --primary-soft:#E6F4F2; --primary-deep:#0C6660;
  --secondary:#d97706; --secondary-soft:#F4F6F8; --card:#ffffff;
  --border:rgba(226,232,240,.9); --border-strong:#cbd5e1; --danger:#be123c; --positive:#047857;
  /* la marca */
  --menta:#E6F4F2;
}

body{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink)}
a{color:var(--teal)}

/* Títulos: 700 con tracking negativo; los de tarjeta, 600. Nada de Lexend. */
h1,.hero h1{font-family:inherit!important;font-weight:700!important;letter-spacing:-.035em!important}
h2{font-family:inherit;font-weight:700;letter-spacing:-.02em}
h3,h4,.cta h3,.scenario h4{font-family:inherit!important;font-weight:600}
.kpi .val,.out .val,.row-table .num,.slider-row .val,.quote{font-family:inherit;font-weight:700}
.quote{font-weight:600}
/* El punto delante de cada título no es de la marca: la jerarquía la dan el
   peso y el aire. */
h2 .dot,h2 .pin{display:none}

/* Sentence case: los rótulos se escriben como se leen, sin versalitas. */
th,.row-table th,.kpi .lbl,.out .lbl,.eyebrow,.chart-title,.ctl-group,.tag,.scenario h4,
.fl .nm small,.badge,.hero-tag{text-transform:none!important;letter-spacing:0!important}
th,.row-table th{font-size:12px;font-weight:600;color:var(--muted)}
.kpi .lbl,.out .lbl{font-size:12.5px;font-weight:600;color:var(--sub)}
.eyebrow{font-size:13px;font-weight:600;color:var(--sub)!important}
.chart-title{font-size:13px;font-weight:600;color:var(--sub)}
.ctl-group{font-size:12.5px;font-weight:600}
.tag{font-size:12px;font-weight:600}
.fl .nm small{font-size:11.5px;font-weight:500}

/* Superficies: tarjeta blanca, borde slate-200/80, sombra mínima. */
.card{background:#fff;border:1px solid rgba(226,232,240,.8);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kpi,.chart-card,.controls,.scenario{background:#F8FAFC;border-color:rgba(226,232,240,.9)}

/* La tapa: teal 600 liso y el isotipo de fondo al 12% (la tapa de cada edición
   en la portada de Newsletter es igual). */
.hero{position:relative;overflow:hidden;background:#0F7A73!important;background-image:none!important;color:#fff}
.hero::after{display:none!important}
.hero > *{position:relative}
.hero-mark{position:absolute!important;right:-36px;bottom:-56px;width:240px;height:auto;opacity:.12;pointer-events:none}
.hero .brand-logo{display:block;height:28px;width:auto}
.hero-tag,.badge{display:inline-flex;align-items:center;font-size:12.5px!important;font-weight:600!important;
  color:#fff!important;background:rgba(255,255,255,.15)!important;border:0!important;border-radius:999px;padding:4px 12px}
.hero p,.hero .sub{color:#E6F4F2!important}
.toc a{font-weight:600}
.hero .toc a{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.brand{font-family:inherit}

/* Selector de edición y de período: pista gris y la opción elegida como
   pastilla blanca (selección por elevación, no pintando de teal). */
.ed-toggle,.seg{background:#f1f5f9!important;border:0!important;padding:4px}
.ed-btn,.seg button{color:#64748b;font-weight:600;letter-spacing:0!important}
.ed-btn.on,.seg button.on{background:#fff!important;color:var(--ink)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.04)}
.ed-btn:not(.on):hover,.seg button:hover:not(.on){background:transparent;color:var(--ink)}

/* Lecturas y datos del mes: menta liso con el filete teal. La variante que era
   ámbar pasa a blanca con filete teal 700. */
.callout,.insight{background:var(--menta)!important;border-left:3px solid var(--teal)!important;border-radius:12px;color:var(--ink)}
.callout.amber,.insight.warn{background:#fff!important;border:1px solid rgba(226,232,240,.9)!important;border-left:3px solid #0C6660!important}
.tag{background:var(--menta);color:#0C6660}
.tag.warn{background:#F4F6F8;color:#475569}

/* Subas y bajas en texto: los tonos con contraste AA del brief (ADR-0225). */
.pos,.arrow-up{color:#047857}
.neg,.arrow-dn{color:#be123c}
.bar-cell{background:linear-gradient(90deg,rgba(13,148,136,.12),rgba(13,148,136,0))}
.neg-bar{background:linear-gradient(90deg,rgba(225,29,72,.10),rgba(225,29,72,0))}

/* Cierre con el gancho a Pro: teal 600 liso, isotipo de fondo y el botón de la
   marca (blanco, rounded-xl, texto teal 700). */
.cta,.cta-pro{position:relative;overflow:hidden;background:#0F7A73!important;background-image:none!important;color:#fff;border-radius:16px}
.cta > *,.cta-pro > *{position:relative}
.cta a,.cta-pro a{background:#fff!important;color:#0C6660!important;font-weight:600!important;border-radius:12px!important;box-shadow:none!important}
.cta p{color:#E6F4F2}

.top-btn{background:#0F7A73}
.top-btn:hover{background:#0C6660}
footer a{color:#0F7A73}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}