/* ============================================================
   Decisiona · Termómetro económico
   Sistema visual: editorial-técnico. Papel hueso, tinta navy,
   bordes rectos (0 radios), semáforo desaturado solo para señal.
   ============================================================ */

:root{
  /* Papel y tinta */
  --paper:#F3F0E7;
  --paper-2:#ECE8DC;
  --ink:#191C24;
  --ink-soft:#3B414F;
  --ink-mute:#6E7280;
  --line:#191C2422;        /* hairline tinta 13% */
  --line-strong:#191C2455;
  --card:#FBFAF5;

  /* Acento */
  --accent:#1F3A5F;        /* navy tinta */
  --accent-soft:#3B5B86;

  /* Semáforo (desaturado, editorial) */
  --go:#2E7D5B;            /* verde bosque  -> favorable */
  --warn:#B8862B;          /* ámbar ocre    -> prudencia */
  --stop:#B23A2B;          /* rojo teja     -> adverso  */
  --go-bg:#2E7D5B1A;
  --warn-bg:#B8862B1A;
  --stop-bg:#B23A2B1A;

  --maxw:1240px;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Textura de papel sutil (sin slop) */
.paper{
  min-height:100vh;
  background-image:repeating-linear-gradient(0deg,#19191905 0 1px,transparent 1px 4px);
  background-blend-mode:multiply;
}

a{color:inherit;text-decoration:none}
strong{font-weight:600}

/* ---------- Números monoespaciados ---------- */
.num,.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em}

/* ============================================================
   Masthead
   ============================================================ */
.masthead{
  max-width:var(--maxw);
  margin:0 auto;
  padding:26px 28px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  border-bottom:2px solid var(--ink);
  flex-wrap:wrap;
}
.wordmark{
  font-family:var(--serif);
  font-weight:900;
  font-size:30px;
  letter-spacing:.02em;
  line-height:1;
  display:block;
}
.mh-tag{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--ink-mute);
  font-style:italic;
  font-family:var(--serif);
}
.mh-meta{
  text-align:right;
  font-size:12px;
  color:var(--ink-mute);
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.mh-live{
  display:inline-flex;align-items:center;gap:7px;
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:10.5px;
  color:var(--ink-soft);
}
.mh-dot{width:7px;height:7px;background:var(--go);display:inline-block;border-radius:50%;
  box-shadow:0 0 0 0 var(--go);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #2E7D5B66}70%{box-shadow:0 0 0 6px #2E7D5B00}100%{box-shadow:0 0 0 0 #2E7D5B00}}
.mh-update strong{font-family:var(--mono);color:var(--ink)}

/* ============================================================
   Navegación de secciones (cintillo tipo periódico)
   ============================================================ */
.sections{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
  display:flex;
  gap:0;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.sections::-webkit-scrollbar{display:none}
.sec{
  flex:0 0 auto;
  padding:13px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-mute);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  transition:color .15s;
  cursor:pointer;
}
.sec:first-child{padding-left:0}
.sec__n{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);opacity:.6}
.sec:hover{color:var(--ink)}
.sec.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.sec.is-active .sec__n{opacity:1;color:var(--accent)}

/* ============================================================
   Contenido
   ============================================================ */
.content{
  max-width:var(--maxw);
  margin:0 auto;
  padding:30px 28px 40px;
  animation:rise .5s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Encabezado de página */
.phead{margin-bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.phead h1{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.01em}
.phead p{color:var(--ink-mute);font-size:13.5px;margin-top:5px;max-width:60ch}
.phead .kbadge{font-size:11px;color:var(--ink-mute);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}

/* Rejillas */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cellgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.stack{display:flex;flex-direction:column;gap:22px}
.row{display:grid;gap:22px}
.row--2{grid-template-columns:1fr 1fr}
.row--32{grid-template-columns:2fr 1fr}
.row--23{grid-template-columns:1fr 2fr}
.mt{margin-top:22px}

/* Tarjeta / celda con borde recto */
.card{background:var(--card);border:1px solid var(--line);padding:20px 22px}
.card--flush{padding:0}
.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.card__head h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
.card__head .sub{font-size:11.5px;color:var(--ink-mute);font-family:var(--mono)}
.card__src{font-size:10.5px;color:var(--ink-mute);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   KPI / celda de dato
   ============================================================ */
.cell{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:128px}
.cell__label{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:600;display:flex;align-items:center;gap:8px}
.cell__value{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;letter-spacing:-.02em}
.cell__value .u{font-size:13px;color:var(--ink-mute);font-weight:500;margin-left:3px}
.cell__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cell__meta{font-size:10.5px;color:var(--ink-mute);font-family:var(--mono)}

/* Delta / tendencia */
.delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;font-weight:600}
.delta svg{width:13px;height:13px;stroke-width:2.5}
.delta.up{color:var(--go)}
.delta.down{color:var(--stop)}
.delta.flat{color:var(--ink-mute)}
.delta .ctx{color:var(--ink-mute);font-weight:500;font-family:var(--sans);font-size:11px}
/* Cuando "subir" es malo (paro, costes) se invierte con .inv */
.delta.up.inv{color:var(--stop)}
.delta.down.inv{color:var(--go)}

/* Punto de semáforo */
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot--go{background:var(--go)}
.dot--warn{background:var(--warn)}
.dot--stop{background:var(--stop)}
.dot--mute{background:var(--ink-mute)}

/* Etiqueta de señal en texto */
.sig{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px}
.sig--go{color:var(--go)}.sig--warn{color:var(--warn)}.sig--stop{color:var(--stop)}.sig--mute{color:var(--ink-mute)}

/* Traducción a negocio */
.implica{font-size:12.5px;color:var(--ink-soft);line-height:1.45;border-left:2px solid var(--line-strong);padding-left:11px;margin-top:2px}
.implica b{color:var(--ink)}

/* Badge de cadencia */
.cad{font-size:9.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);border:1px solid var(--line);padding:2px 6px}
.cad--day{color:var(--go);border-color:var(--go-bg)}

/* ============================================================
   Termómetro (hero)
   ============================================================ */
.thermo{
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
  padding:30px 32px 26px;
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:38px;
  align-items:center;
}
.thermo__num{display:flex;flex-direction:column;gap:6px}
.thermo__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);font-weight:600}
.thermo__score{font-family:var(--serif);font-weight:900;font-size:104px;line-height:.86;letter-spacing:-.03em}
.thermo__score .of{font-size:26px;color:var(--ink-mute);font-weight:500;letter-spacing:0}
.thermo__cycle{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.thermo__right{display:flex;flex-direction:column;gap:18px}
.thermo__verdict{font-family:var(--serif);font-size:21px;line-height:1.32;font-weight:400;color:var(--ink)}
.thermo__verdict b{font-weight:600}

/* Escala 0-100 tipo regla */
.scale{position:relative;height:46px;margin-top:4px}
.scale__track{position:absolute;top:16px;left:0;right:0;height:10px;display:flex;border:1px solid var(--line-strong)}
.scale__band{height:100%}
.scale__band.s{background:var(--stop-bg)}
.scale__band.w{background:var(--warn-bg)}
.scale__band.g{background:var(--go-bg)}
.scale__marker{position:absolute;top:8px;width:2px;height:26px;background:var(--ink);transition:left 1s cubic-bezier(.2,.8,.2,1)}
.scale__marker::after{content:'';position:absolute;top:-5px;left:-4px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.scale__ticks{position:absolute;top:30px;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-mute)}

/* Componentes del índice (mini barras) */
.drivers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2px}
.driver{background:var(--card);padding:13px 15px}
.driver__lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.driver__bar{height:5px;background:var(--paper-2);margin-top:9px;position:relative;overflow:hidden}
.driver__fill{height:100%;background:var(--accent);width:0;transition:width .9s ease}
.driver__val{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}

/* Índices de negocio (Demanda / Costes / Riesgo) */
.idx{background:var(--card);border:1px solid var(--line);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.idx__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.idx__name{font-family:var(--serif);font-size:18px;font-weight:600}
.idx__tag{font-size:11px;color:var(--ink-mute);margin-top:2px}
.idx__score{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1}
.idx__phrase{font-size:13px;color:var(--ink-soft);line-height:1.45}
.idx__phrase b{color:var(--ink)}

/* ============================================================
   Sectores
   ============================================================ */
.sector{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:11px;min-height:158px}
.sector__top{display:flex;align-items:center;gap:11px}
.sector__ic{width:30px;height:30px;flex:0 0 auto;color:var(--accent)}
.sector__ic svg{width:30px;height:30px;stroke-width:1.6}
.sector__name{font-weight:600;font-size:15px;font-family:var(--serif)}
.sector__sig{margin-left:auto}
.sector__implica{font-size:12px;color:var(--ink-soft);line-height:1.42;margin-top:auto}

/* ============================================================
   Tablas
   ============================================================ */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line-strong)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:none}
.table td.num,.table th.num{text-align:right}
.table tbody tr:hover{background:var(--paper-2)}
.t-name{font-weight:600}

/* Spark contenedor */
.spark{height:38px;margin:2px -4px 0}
.spark--lg{height:70px}

/* Fuentes / colophon */
.colophon{max-width:var(--maxw);margin:0 auto;padding:22px 28px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.col-sources{font-size:11px;color:var(--ink-mute);font-family:var(--mono);line-height:1.7;max-width:70ch}
.col-sources b{color:var(--ink-soft)}
.col-note{font-size:11px;color:var(--ink-mute);max-width:34ch;text-align:right;line-height:1.5}

/* Página de fuentes */
.srclist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.srcrow{background:var(--card);padding:16px 20px;display:grid;grid-template-columns:170px 1fr auto;gap:18px;align-items:center}
.srcrow__name{font-weight:600;font-family:var(--serif);font-size:16px}
.srcrow__data{font-size:12.5px;color:var(--ink-soft)}
.srcrow__lic{font-size:10.5px;font-family:var(--mono);color:var(--ink-mute);text-align:right}
.method{background:var(--card);border:1px solid var(--line);padding:24px 26px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.method h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin:18px 0 8px}
.method h3:first-child{margin-top:0}
.method code{font-family:var(--mono);font-size:12.5px;background:var(--paper-2);padding:1px 5px}
.method ul{margin:8px 0 8px 20px}
.method li{margin:4px 0}

/* Aviso de dato faltante */
.gap{font-size:11.5px;color:var(--ink-mute);font-style:italic}
.empty{padding:40px;text-align:center;color:var(--ink-mute);font-size:13px}

/* Carga escalonada */
.stagger>*{opacity:0;animation:rise .5s ease forwards}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.10s}
.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}
.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(7){animation-delay:.26s}
.stagger>*:nth-child(8){animation-delay:.30s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:920px){
  .thermo{grid-template-columns:1fr;gap:24px}
  .thermo__score{font-size:84px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .row--2,.row--32,.row--23{grid-template-columns:1fr}
}
@media(max-width:560px){
  .masthead{padding:20px 16px 14px}
  .sections{padding:0 16px}
  .content{padding:22px 16px 30px}
  .colophon{padding:20px 16px 30px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .wordmark{font-size:24px}
  .thermo{padding:24px 18px}
  .thermo__score{font-size:72px}
  .srcrow{grid-template-columns:1fr;gap:6px}
  .srcrow__lic{text-align:left}
  .col-note{text-align:left}
}