/* Solo PROPUESTA-VISTA-9x16.html. El artículo original no carga esto. */

.aviso-propuesta{
  position:absolute; top:max(8px, env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); z-index:8; pointer-events:none;
  padding:5px 10px; border-radius:999px;
  background:rgb(8 10 16 / .78); border:1px solid rgb(255 179 76 / .45);
  color:#ffd08b; font:700 9px/1 var(--lmt-sans, sans-serif);
  letter-spacing:.14em; text-transform:uppercase;
}

/* Pegadas a la barra: 4 px de aire, no 16. El techo lo publica el motor. */
html[data-propuesta="true"][data-extended="true"] .story-unit{
  --unit-y: 10px;
  bottom: calc(max(4px, env(safe-area-inset-bottom)) + var(--banda-controles));
}
html[data-propuesta="true"][data-extended="true"] .story-card,
html[data-propuesta="true"][data-extended="true"] .story-card--dense{
  max-height: var(--hueco-lectura, 68svh);
}
html[data-propuesta="true"][data-extended="true"] .story-prose{
  max-height: var(--hueco-lectura, 64svh);
}

/* Si aún no cabe: primero las cifras, luego la fuente. El cuerpo no se corta. */
html[data-propuesta="true"] .story-unit.sin-metrics .story-metrics,
html[data-propuesta="true"] .story-unit.sin-metrics .story-equation{ display:none; }
html[data-propuesta="true"] .story-unit.sin-fuente .story-source,
html[data-propuesta="true"] .story-unit.sin-fuente .story-note{ display:none; }

/* Esencial: letra grande. --tipo-escala baja en pantallas cortas. */
html[data-propuesta="true"][data-nivel="sencillo"] .story-card,
html[data-propuesta="true"][data-nivel="sencillo"] .story-card--dense{
  padding: 16px 16px 14px;
}
html[data-propuesta="true"][data-nivel="sencillo"] .story-unit h2,
html[data-propuesta="true"][data-nivel="sencillo"] .story-card--dense h2,
html[data-propuesta="true"][data-nivel="sencillo"] .story-prose h2{
  font-family: var(--lmt-sans);
  font-weight: 750;
  font-size: calc(clamp(24px, 6.8vw, 31px) * var(--tipo-escala, 1));
  line-height: 1.05;
  max-width: 18ch;
}
html[data-propuesta="true"][data-nivel="sencillo"] .story-card--dense .story-body,
html[data-propuesta="true"][data-nivel="sencillo"] .story-body,
html[data-propuesta="true"][data-nivel="sencillo"] .story-prose > p:not(.story-kicker){
  font-size: calc(clamp(16px, 4.3vw, 18px) * var(--tipo-escala, 1));
  line-height: 1.32;
  font-weight: 460;
}
html[data-propuesta="true"][data-nivel="sencillo"] .relato__flujo h2{
  font-family: var(--lmt-sans);
  font-size: calc(clamp(24px, 6.6vw, 30px) * var(--tipo-escala, 1));
}
html[data-propuesta="true"][data-nivel="sencillo"] .relato__flujo p{
  font-size: calc(clamp(16px, 4.4vw, 18.5px) * var(--tipo-escala, 1));
  line-height: 1.36;
}
html[data-propuesta="true"][data-nivel="sencillo"] .relato__cifra > b:first-child{
  font-size: calc(clamp(30px, 8.4vw, 38px) * var(--tipo-escala, 1));
}

/* Profundizar: más denso. */
html[data-propuesta="true"][data-nivel="completo"] .story-card--dense h2{
  font-size: calc(clamp(20px, 5.6vw, 25px) * var(--tipo-escala, 1));
}
html[data-propuesta="true"][data-nivel="completo"] .story-card--dense .story-body,
html[data-propuesta="true"][data-nivel="completo"] .story-prose > p:not(.story-kicker){
  font-size: calc(clamp(13px, 3.45vw, 14.5px) * var(--tipo-escala, 1));
  line-height: 1.32;
}
html[data-propuesta="true"][data-nivel="completo"] .relato__flujo p{
  font-size: calc(clamp(13.5px, 3.8vw, 15.5px) * var(--tipo-escala, 1));
}

/* Marcas de medida sobre el metraje. Viven en la caja del vídeo. */
html[data-propuesta="true"] .marcas{
  position:absolute; left:0; right:0; top:0; z-index:3;
  height:var(--borde-fin, 60%); pointer-events:none;
}
html[data-propuesta="true"] .marca{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
html[data-propuesta="true"] .marca.is-visible{ opacity:1; visibility:visible; }
html[data-propuesta="true"] .marca__caja{
  position:absolute; box-sizing:border-box;
  border:1px solid #ffb34c;
  box-shadow:0 0 0 1px rgb(0 0 0 / .45);
}
html[data-propuesta="true"] .marca__dato{
  position:absolute; margin:0;
  font-family:var(--lmt-sans, sans-serif);
  color:#f6f3ed; text-shadow:0 1px 3px rgb(0 0 0 / .7);
}
html[data-propuesta="true"] .marca__dato b{
  display:block; font:800 22px/1 var(--lmt-sans, sans-serif);
  letter-spacing:-.04em; color:#ffb13f;
  font-variant-numeric:tabular-nums;
}
html[data-propuesta="true"] .marca__dato span{
  display:block; margin-top:3px;
  font:620 10px/1.2 var(--lmt-sans, sans-serif);
  letter-spacing:.04em; color:rgb(230 236 244 / .82);
}
html[data-propuesta="true"] .marca--paneles .marca__caja{
  left:7%; width:86%; top:17%; height:13%;
}
html[data-propuesta="true"] .marca--paneles .marca__dato{
  left:8%; top:32%;
}
html[data-propuesta="true"] .marca--radiadores .marca__caja{
  left:18%; width:64%; top:48%; height:28%;
}
html[data-propuesta="true"] .marca--radiadores .marca__dato{
  left:20%; top:78%;
}
html[data-propuesta="true"] .marca--escala .marca__dato--avion{
  left:8%; top:6%;
}
html[data-propuesta="true"] .marca--escala .marca__dato--sat{
  left:8%; top:52%;
}

/* Relatos: anclados ABAJO, junto a la barra. Una sola altura tope.
   Antes partían de una fracción del vídeo: en unos planos la cortinilla
   arrancaba a media imagen y dejaba un negro entre el sujeto y el texto. */
html[data-propuesta="true"] .relato{
  top: auto;
  bottom: 0;
  height: var(--relato-alto, 52svh);
  max-height: 58svh;
}

/* La tabla de motores vivía bajo la barra. Sube a la franja de lectura. */
html[data-propuesta="true"] .motores__tabla{
  bottom: calc(var(--banda-controles) + 8px);
}

/* Pantalla corta: menos caja, menos aparato. */
html[data-propuesta="true"][data-pantalla="corta"] .story-card,
html[data-propuesta="true"][data-pantalla="corta"] .story-card--dense{
  padding: 12px 13px 11px;
  border-radius: 16px;
}
html[data-propuesta="true"][data-pantalla="corta"] .story-source{ display:none; }