/* PILAR · «Plano de obra» — piel de marca (spec pilar.md §1, portafolio §3.3).
   Territorio exclusivo de PILAR: única con retícula visible sobre blanco, radio 2 px,
   plinto/columna/viga/cajetín/cota, titular en grotesca ancha (Archivo 112,5) y pasos
   discretos fijados al scroll. No se usa ninguna forma, color, tipografía ni movimiento
   de otra marca: ni el cono de FARO, ni el anillo de EJE, ni el horizonte de ÍTACA,
   ni la columna sobre fila de la casa. */

/* ---------- Fuentes autoalojadas (subconjunto latin, U+0000-00FF) ---------- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 500 600;
  font-stretch: 112.5%; font-display: swap;
  src: url('fuentes/archivo-112-500-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap;
  src: url('fuentes/public-sans-400-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono'; font-style: normal; font-weight: 400;
  font-stretch: 87.5%; font-display: swap;
  src: url('fuentes/martian-mono-87-400.woff2') format('woff2');
}
/* Respaldos con métricas ajustadas: si la fuente tarda, el texto no salta (CLS ≤ 0,02) */
@font-face {
  font-family: 'Titular respaldo'; src: local('Arial'), local('Helvetica');
  size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Cuerpo respaldo'; src: local('Arial'), local('Helvetica');
  size-adjust: 97%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Datos respaldo'; src: local('Courier New'), local('monospace');
  size-adjust: 116%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- Contrato de tokens (portafolio §6.1, valores de pilar.md §1.1) ---------- */
:root {
  --fondo: #FFFFFF;
  --fondo-alt: #F4F4F3;             /* superficie de lámina */
  --tinta: #16233F;                 /* 15,60:1 sobre blanco · 14,17:1 sobre superficie */
  --apoyo: #6A7078;                 /*  5,00:1 sobre blanco ·  4,54:1 sobre superficie */
  --acento-texto: #24496C;          /*  9,36:1 sobre blanco ·  8,50:1 sobre superficie */
  --acento-grafico: #2C5C8A;        /* SOLO gráfico: barras, columnas, topes de cota */
  --acento-profundo: #1E4A73;       /*  9,20:1 sobre blanco */
  --claro: #7FA6CC;                 /*  6,11:1 sobre azul noche */
  --endoso: #8A8A8E;                /*  4,54:1 sobre azul noche */
  --sobre-tinta: #F4F4F3;           /* 14,17:1 sobre azul noche */
  --filete: rgba(22, 35, 63, .16);
  --filete-fuerte: rgba(22, 35, 63, .32);
  --reticula: rgba(22, 35, 63, .06);
  --borde-control: #6A7078;
  --foco: #24496C;

  --radio: 2px;
  --dur-corta: 350ms;
  --dur-media: 550ms;
  --curva: cubic-bezier(.65, 0, .35, 1);

  --fuente-titular: 'Archivo', 'Titular respaldo', Arial, sans-serif;
  --fuente-cuerpo: 'Public Sans', 'Cuerpo respaldo', Arial, sans-serif;
  --fuente-datos: 'Martian Mono', 'Datos respaldo', 'Courier New', monospace;

  /* módulo de 8 px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 28px; --e7: 32px; --e8: 32px; --e9: 72px; --e10: 96px;
  --lateral: 96px;
  --pliego: 1224px;                 /* 12 columnas de 80 + 11 medianiles de 24 */
  --medianil: 24px;
}
@media (max-width: 1100px) { :root { --lateral: 48px; } }
@media (max-width: 980px)  { :root { --e8: 36px; --e7: 32px; } }
@media (max-width: 720px)  { :root { --lateral: 20px; --e8: 32px; } }

/* ---------- Base de página ---------- */
body { background: var(--fondo); color: var(--tinta); }
::selection { background: var(--tinta); color: var(--fondo); }

.envoltura {
  max-width: calc(var(--pliego) + var(--lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--lateral);
}

/* ---------- Tipografía (§1.2) ---------- */
.t-portada {
  font-family: var(--fuente-titular); font-weight: 600; font-stretch: 112.5%;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem);
  line-height: 1.04; letter-spacing: -.005em;
}
.t-lamina {
  font-family: var(--fuente-titular); font-weight: 600; font-stretch: 112.5%;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.375rem);
  line-height: 1.08; letter-spacing: -.005em;
}
.t-sublamina {
  font-family: var(--fuente-titular); font-weight: 500; font-stretch: 112.5%;
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.4375rem); line-height: 1.2;
}
.t-portada strong, .t-lamina strong { font-weight: 600; }
.punto { color: var(--acento-grafico); }   /* punto final en azul columna */
.t-bajada { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.45; max-width: 52ch; }
.t-lectura { max-width: 62ch; }
.t-menor { font-size: .9375rem; line-height: 1.5; color: var(--apoyo); }
.rotulo, .t-margen, .dato {
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-weight: 400;
}
.rotulo { font-size: .75rem; line-height: 1.4; color: var(--apoyo); }
.t-margen { font-size: .8125rem; line-height: 1.6; color: var(--apoyo); }
.dato { font-size: .9375rem; }
.t-cifra {
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums;
  font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem); line-height: 1.05; color: var(--tinta);
}
.t-precio {
  font-family: var(--fuente-cuerpo); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem); line-height: 1;
}
strong, b { font-weight: 600; }

/* ---------- La lámina y la retícula del plano (§1.4) ---------- */
.lamina { padding-block: var(--e8); }
.lamina + .lamina { border-top: 1px solid var(--filete); }

/* Las 12 columnas se ven solo donde el plano manda: hero y escena */
.plano { position: relative; }
.plano::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--reticula) 0 1px, transparent 1px calc((100% + var(--medianil)) / 12)
  );
  background-size: calc(100% + var(--medianil)) 100%;
}
.plano > * { position: relative; z-index: 1; }

.reticula-12 {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil); row-gap: var(--e4); align-items: start;
}
.col-lectura { grid-column: 1 / span 6; display: grid; gap: var(--e3); align-content: start; }
.col-margen  { grid-column: 8 / span 5; display: grid; gap: var(--e4); align-content: start; }
.col-pliego  { grid-column: 1 / -1; }
.col-mitad-a { grid-column: 1 / span 6; }
.col-mitad-b { grid-column: 7 / span 6; }
@media (max-width: 980px) {
  .reticula-12 { grid-template-columns: 1fr; }
  .col-lectura, .col-margen, .col-pliego, .col-mitad-a, .col-mitad-b { grid-column: 1 / -1; }
}

/* ---------- Cajetín: el rótulo de sección de PILAR (§4.9 del portafolio) ---------- */
.cajetin {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto;
  border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
  font-family: var(--fuente-datos); font-size: .6875rem; line-height: 1.2;
  color: var(--apoyo); margin-bottom: var(--e4);
}
.cajetin > span {
  padding: var(--e2) var(--e3);
  border-left: 1px solid var(--filete);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cajetin > span:first-child { border-left: 0; color: var(--tinta); }
.cajetin__titulo { white-space: normal; }
@media (max-width: 980px) {
  .cajetin { grid-template-columns: 88px minmax(0, 1fr); font-size: .625rem; }
  .cajetin > span { padding: var(--e1) var(--e2); }
  .cajetin > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--filete); grid-column: 1 / -1; white-space: normal; }
  .cajetin > span:nth-child(4) { display: none; }
}

/* ---------- Cota: línea con topes sobre la cifra que importa ---------- */
.cota { display: grid; gap: var(--e2); }
.cota__linea {
  position: relative; height: 9px;
  border-bottom: 1px solid var(--acento-grafico);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.cota__linea::before, .cota__linea::after {
  content: ''; position: absolute; bottom: 0; width: 1px; height: 9px; background: var(--acento-grafico);
}
.cota__linea::before { left: 0; }
.cota__linea::after { right: 0; }
.cota.vista .cota__linea { transform: scaleX(1); }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: var(--e5); border-radius: var(--radio);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1rem;
  text-decoration: none;
  transition: background-color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva), color var(--dur-corta) var(--curva);
}
/* Blanco sobre azul noche: 15,60:1 */
.boton--primario { background: var(--tinta); color: #FFFFFF; border: 1px solid var(--tinta); }
.boton--primario:hover { background: var(--acento-profundo); border-color: var(--acento-profundo); }
.boton--secundario { background: transparent; color: var(--acento-texto); border: 1px solid var(--borde-control); }
.boton--secundario:hover { border-color: var(--tinta); color: var(--tinta); }
@media (max-width: 720px) {
  .boton { height: 48px; width: 100%; }
  .pliego .boton--secundario { width: auto; height: 44px; }
}

a.enlace { color: var(--acento-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.enlace:hover { text-decoration-thickness: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: var(--fondo); border-bottom: 1px solid var(--filete);
}
.barra[data-pegada="si"] { border-bottom-color: var(--filete-fuerte); }
.barra__fila { height: 64px; display: flex; align-items: center; gap: var(--e5); }
.barra__logo { display: flex; align-items: center; }
.barra__logo img { height: 36px; width: auto; }
.barra__menu { display: flex; align-items: center; gap: var(--e5); margin-left: auto; }
/* Ojo con la especificidad: en FARO una regla de menú apagó el botón primario */
.barra__menu a:not(.boton) { color: var(--tinta); text-decoration: none; font-size: .9375rem; }
.barra__menu a:not(.boton):hover { color: var(--acento-texto); }
.barra__menu a.boton--primario { color: #FFFFFF; height: 40px; width: auto; font-size: .9375rem; }
.barra__movil { display: none; margin-left: auto; }
.barra__movil button { color: var(--tinta); font-weight: 600; min-height: 44px; padding-inline: var(--e2); }
@media (max-width: 980px) {
  .barra__menu { display: none; }
  .barra__movil { display: flex; align-items: center; }
}
.menu-panel { position: absolute; left: 0; right: 0; top: 64px; background: var(--fondo); border-bottom: 1px solid var(--filete); }
.menu-panel a { display: block; padding: var(--e3) 0; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--filete); }
.menu-panel .envoltura { padding-block: var(--e3) var(--e5); }

/* ---------- Hoja (superficie de lámina) ---------- */
.hoja {
  background: var(--fondo-alt); border: 1px solid var(--filete);
  border-radius: var(--radio); padding: var(--e4);
}
@media (max-width: 720px) { .hoja { padding: var(--e3); } }
.hoja__filas > div {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--e3);
  padding-block: var(--e1); border-top: 1px solid var(--filete); font-size: .875rem;
}
.hoja__filas > div:first-child { border-top: 0; }
@media (max-width: 720px) { .hoja__filas > div { grid-template-columns: 1fr; gap: var(--e1); } }

/* ---------- Índice: filas con filete, nunca tarjetas iguales ---------- */
.indice { display: grid; }
.indice__fila {
  display: grid; grid-template-columns: 1fr 200px; gap: var(--e4);
  padding-block: var(--e2); border-top: 1px solid var(--filete);
  position: relative; text-decoration: none; color: inherit;
}
.indice__fila:first-child { border-top: 0; }
.indice__fila::before {
  content: ''; position: absolute; inset-inline: 0; top: -1px; height: 2px;
  background: var(--acento-grafico); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.indice__fila:hover::before, .indice__fila:focus-visible::before { transform: scaleX(1); }
.indice__fila p { color: var(--apoyo); font-size: .875rem; line-height: 1.45; }
.indice__fila .t-margen { text-align: right; }
.numeral { font-family: var(--fuente-datos); color: var(--acento-texto); margin-right: var(--e2); font-size: .8125rem; }
/* Título y frase en la misma línea: mismo contenido, un tercio del alto */
.indice--compacto .indice__fila > div {
  display: grid; grid-template-columns: minmax(150px, 250px) 1fr; gap: var(--e4); align-items: baseline;
}
.indice--compacto .indice__fila h3 { font-size: 1rem; }
.indice--tres .indice__fila { grid-template-columns: 1fr 172px; }
.indice--tres .t-margen { font-size: .75rem; }
@media (max-width: 980px) {
  .indice__fila, .indice--tres .indice__fila { grid-template-columns: 1fr; gap: var(--e1); }
  .indice--compacto .indice__fila > div { grid-template-columns: 1fr; gap: var(--e1); }
  .indice__fila .t-margen { text-align: left; }
}

/* ---------- Fila de cifras (quietas, con «¿Cómo se midió?») ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--medianil); }
.cifras > div { padding-left: var(--e4); border-left: 1px solid var(--filete); }
.cifras > div:first-child { border-left: 0; padding-left: 0; }
.cifras p { color: var(--apoyo); font-size: .8125rem; line-height: 1.4; margin-top: var(--e2); }
.cifras details { margin-top: var(--e2); }
.cifras summary { font-family: var(--fuente-datos); font-size: .6875rem; color: var(--apoyo); cursor: pointer; list-style: none; }
.cifras summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .cifras { grid-template-columns: 1fr 1fr; row-gap: var(--e5); }
  .cifras > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Pestañas (perfil y obra): filete inferior, nunca píldora ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--filete); }
.pestanas [role="tab"] {
  padding: var(--e3) var(--e4); min-height: 44px;
  font-family: var(--fuente-cuerpo); font-size: .9375rem; color: var(--apoyo);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.pestanas [role="tab"]:first-child { padding-left: 0; }
.pestanas [role="tab"]:hover { color: var(--tinta); }
.pestanas [role="tab"][aria-selected="true"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento-grafico); }

/* ---------- Firma «Plinto, columnas, viga» (§1.6) ---------- */
.pista { position: relative; }
.escena {
  position: sticky; top: 80px;
  border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
  background: var(--fondo); overflow: hidden;
}
.escena__cuerpo {
  display: grid; grid-template-columns: 320px 1fr; align-items: stretch;
}
.escena__operacion { padding: var(--e4); border-right: 1px solid var(--filete); background: var(--fondo-alt); }
.escena__consecuencias { padding: var(--e4); }
.escena__titulo { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .9375rem; margin-bottom: var(--e3); }
.escena__campos { display: grid; gap: var(--e1); }
.escena__campo {
  display: flex; justify-content: space-between; gap: var(--e3);
  border-top: 1px solid var(--filete); padding-top: var(--e2);
  font-size: .875rem;
}
.escena__campo span:last-child { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-size: .8125rem; white-space: nowrap; }
.escena__campo[data-oculto="si"] { visibility: hidden; }

/* El dibujo: plinto, tres columnas y viga. Forma madre de PILAR. */
.obra { display: grid; gap: var(--e2); }
.obra__svg { width: 100%; height: 104px; display: block; }
.obra__plinto { stroke: var(--acento-profundo); stroke-width: 4; fill: none; stroke-dasharray: 820; stroke-dashoffset: 820; }
.obra[data-plinto="si"] .obra__plinto { stroke-dashoffset: 0; }
.obra__plinto { transition: stroke-dashoffset var(--dur-media) var(--curva); }
.obra__columna { fill: var(--acento-grafico); transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0); transition: transform var(--dur-media) var(--curva); }
.obra__columna[data-arriba="si"] { transform: scaleY(1); }
.obra__viga { fill: var(--acento-profundo); transform-box: fill-box; transform-origin: 0% 50%;
  transform: scaleX(0); transition: transform 450ms var(--curva); }
.obra__viga[data-arriba="si"] { transform: scaleX(1); }
.obra__rotulo { font-family: var(--fuente-datos); font-size: 12px; fill: var(--apoyo); letter-spacing: .04em; }
.obra__cifra { font-family: var(--fuente-datos); font-size: 12px; fill: var(--tinta); }

.consecuencia {
  display: grid; grid-template-columns: 168px 1fr; gap: var(--e3);
  border-top: 1px solid var(--filete); padding-block: var(--e1);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-corta) var(--curva), transform var(--dur-corta) var(--curva);
}
.consecuencia[data-visible="si"] { opacity: 1; transform: none; }
.consecuencia h4 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .8125rem; }
.consecuencia p { font-size: .8125rem; color: var(--apoyo); line-height: 1.45; }
@media (max-width: 560px) { .consecuencia { grid-template-columns: 1fr; gap: 0; } }
.consecuencia .dato { color: var(--tinta); font-size: .8125rem; }

.escena__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-top: 1px solid var(--filete);
}
.escena__frase { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 1rem; flex: 1 1 240px; }
.controles { display: flex; align-items: center; gap: var(--e2); }
.controles button {
  min-height: 36px; min-width: 36px; padding-inline: var(--e3);
  border: 1px solid var(--borde-control); border-radius: var(--radio);
  font-size: .8125rem; color: var(--tinta); background: var(--fondo);
}
.controles button:hover { border-color: var(--tinta); }
.marcas { display: flex; gap: 3px; }
.marcas button {
  width: 26px; height: 26px; min-width: 26px; padding: 0;
  border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
  font-family: var(--fuente-datos); font-size: 10px; color: var(--apoyo); background: var(--fondo);
}
.marcas button[aria-current="true"] { background: var(--tinta); color: #FFFFFF; border-color: var(--tinta); }
@media (max-width: 980px) {
  .escena__cuerpo { grid-template-columns: 1fr; }
  .escena__operacion { border-right: 0; border-bottom: 1px solid var(--filete); }
  .escena { top: 72px; }
}

/* Guion estático: solo con movimiento reducido o sin JavaScript */
.guion { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.guion > div { border-top: 2px solid var(--filete-fuerte); padding-top: var(--e3); }
.guion h4 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .9375rem; }
.guion p { font-size: .875rem; color: var(--apoyo); margin-top: var(--e1); }
@media (max-width: 720px) { .guion { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra de presupuesto redibujada (arte, no captura) ---------- */
.barras { display: grid; gap: var(--e3); }
.barra-dato { display: grid; gap: var(--e2); }
.barra-dato__pista { display: flex; height: 18px; border: 1px solid var(--filete-fuerte); border-radius: var(--radio); overflow: hidden; }
.barra-dato__tramo { height: 100%; }
.barra-dato__tramo--ejecutado { background: var(--acento-profundo); }
.barra-dato__tramo--comprometido { background: var(--acento-grafico); }
.barra-dato__tramo--disponible { background: repeating-linear-gradient(45deg, var(--reticula) 0 4px, transparent 4px 8px); }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e4); font-family: var(--fuente-datos); font-size: .6875rem; color: var(--apoyo); }
.leyenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.leyenda i { width: 10px; height: 10px; display: inline-block; border: 1px solid var(--filete-fuerte); }

/* ---------- Regla de tesorería «si… entonces…» ---------- */
.regla-tesoreria { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--filete-fuerte); border-radius: var(--radio); }
.regla-tesoreria > div { padding: var(--e4); }
.regla-tesoreria > div + div { border-left: 1px solid var(--filete); }
@media (max-width: 720px) {
  .regla-tesoreria { grid-template-columns: 1fr; }
  .regla-tesoreria > div + div { border-left: 0; border-top: 1px solid var(--filete); }
}

/* ---------- Neutralidad contable: tres piezas en línea ---------- */
.cadena { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: stretch; gap: 0; }
.cadena__pieza { border: 1px solid var(--filete-fuerte); border-radius: var(--radio); padding: var(--e3); }
.cadena__pieza h4 { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .875rem; }
.cadena__pieza p { font-family: var(--fuente-datos); font-size: .6875rem; color: var(--apoyo); margin-top: var(--e2); line-height: 1.5; }
.cadena__union { align-self: center; height: 1px; background: var(--filete-fuerte); }
@media (max-width: 720px) {
  .cadena { grid-template-columns: 1fr; row-gap: var(--e2); }
  .cadena__union { width: 1px; height: 12px; justify-self: center; }
}

/* ---------- Visor de captura: lámina con cajetín ---------- */
.visor { display: grid; gap: 0; border: 1px solid var(--filete-fuerte); border-radius: var(--radio); overflow: hidden; }
.visor__marco { background: var(--fondo-alt); display: block; }
.visor__marco img { width: 100%; display: block; }
.visor--vacio .visor__marco {
  display: grid; place-items: center; min-height: 128px; padding: var(--e3);
  background: repeating-linear-gradient(45deg, var(--reticula) 0 6px, transparent 6px 12px);
  font-family: var(--fuente-datos); font-size: .75rem; color: var(--apoyo); text-align: center; line-height: 1.6;
}
.visor__cajetin {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  padding: var(--e2) var(--e3); border-top: 1px solid var(--filete);
  font-family: var(--fuente-datos); font-size: .6875rem; color: var(--apoyo);
}

/* ---------- Precio: pliegos separados por filetes verticales ---------- */
.pliegos { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--medianil); }
.pliego { padding: var(--e3) var(--e4); border-left: 1px solid var(--filete); position: relative; }
.pliego:first-child { border-left: 0; padding-left: 0; }
.pliego::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--acento-grafico); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.pliego[data-elegido="si"]::before { transform: scaleX(1); }
.pliego ul { display: grid; gap: var(--e1); margin-top: var(--e3); }
.pliego li { padding-left: var(--e4); position: relative; font-size: .875rem; line-height: 1.45; }
.pliego li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--acento-grafico); }
@media (max-width: 980px) {
  .pliegos { grid-template-columns: 1fr; }
  .pliego { border-left: 0; border-top: 1px solid var(--filete); padding-left: 0; padding-top: var(--e4); }
  .pliego:first-child { border-top: 0; }
}

.periodo { display: inline-flex; border: 1px solid var(--borde-control); border-radius: var(--radio); overflow: hidden; }
.periodo button { height: 40px; padding-inline: var(--e4); color: var(--tinta); font-size: .875rem; }
.periodo button + button { border-left: 1px solid var(--borde-control); }
.periodo button[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; font-weight: 600; }

/* ---------- Tablas: filetes de 1 px, importes a la derecha ---------- */
.tabla { width: 100%; font-size: .875rem; }
.tabla th, .tabla td { text-align: left; padding: var(--e2) var(--e3); border-top: 1px solid var(--filete); vertical-align: top; }
.tabla thead th { border-top: 0; font-family: var(--fuente-cuerpo); font-weight: 600; }
.tabla td.dato, .tabla td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabla-envoltura { overflow-x: auto; }

/* Bloque desplegable: la página arranca compacta y el dato sigue publicado */
.desplegable { border-top: 1px solid var(--filete); }
.desplegable > summary {
  cursor: pointer; list-style: none; padding-block: var(--e3);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .9375rem;
  display: flex; justify-content: space-between; gap: var(--e4);
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: 'Ver'; font-family: var(--fuente-datos); font-size: .75rem; color: var(--acento-texto); }
.desplegable[open] > summary::after { content: 'Cerrar'; }

/* ---------- Calculadora ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start; }
.calc__controles { display: grid; gap: var(--e3); }
.calc__controles label { display: grid; gap: var(--e2); }
.calc__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); font-size: .9375rem; }
.calc__num {
  width: 88px; height: 40px; background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--borde-control); border-radius: var(--radio); padding-inline: var(--e2);
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; font-size: .8125rem;
}
.calc__casillas { display: grid; gap: var(--e3); }
.calc__casillas label { grid-template-columns: 18px 1fr; align-items: center; font-size: .9375rem; }
.calc__casillas input[type="checkbox"] {
  appearance: none; width: 18px; height: 18px; border: 1px solid var(--borde-control); border-radius: var(--radio); background: var(--fondo);
}
.calc__casillas input[type="checkbox"]:checked { background: var(--tinta); box-shadow: inset 0 0 0 3px var(--fondo); }
.desglose { display: grid; gap: var(--e2); margin-top: var(--e3); }
.desglose li { display: flex; justify-content: space-between; gap: var(--e4); border-top: 1px solid var(--filete); padding-top: var(--e2); font-size: .875rem; }
.desglose li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 980px) { .calc { grid-template-columns: 1fr; gap: var(--e5); } }

/* Deslizador: pista de 1 px, pulgar cuadrado de 2 px de radio */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--borde-control); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--borde-control); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -8px;
  background: var(--acento-grafico); border: 1px solid var(--fondo); border-radius: var(--radio);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--acento-grafico);
  border: 1px solid var(--fondo); border-radius: var(--radio);
}

/* ---------- Preguntas ---------- */
.zt-faq summary { font-family: var(--fuente-titular); font-weight: 500; font-stretch: 112.5%; font-size: 1rem; display: flex; justify-content: space-between; gap: var(--e4); padding-block: var(--e2); }
.zt-faq summary::after { content: '+'; font-family: var(--fuente-datos); color: var(--acento-texto); }
.zt-faq details[open] summary::after { content: '\2212'; }
.zt-faq details > :not(summary) { padding-bottom: var(--e3); font-size: .9375rem; }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: var(--e2); }
.formulario .zt-campo label { font-weight: 600; font-size: .875rem; }
.formulario input, .formulario select, .formulario textarea {
  height: 42px; background: var(--fondo); color: var(--tinta);
  border: 1px solid var(--borde-control); border-radius: var(--radio); padding-inline: var(--e3);
  font-family: var(--fuente-cuerpo); width: 100%;
}
.formulario textarea { height: auto; padding: var(--e2) var(--e3); min-height: 60px; }
.formulario .dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 720px) { .formulario .dos { grid-template-columns: 1fr; } }

/* ---------- Dos columnas en el cierre (lo que bajó 1.500 px en FARO) ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: start; }
@media (max-width: 980px) { .dos-columnas { grid-template-columns: 1fr; gap: var(--e4); } }

/* ---------- Pie: el único bloque oscuro, 360 px o menos ---------- */
.pie { background: var(--tinta); color: var(--claro); padding-block: var(--e4) var(--e5); margin-top: 0; }
.pie__endoso { height: 32px; width: auto; }
.pie .rotulo { color: var(--endoso); letter-spacing: .18em; }
.pie a { color: var(--sobre-tinta); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .t-menor { color: var(--claro); }
.pie :focus-visible { outline-color: var(--claro); }

/* CTA fijo en móvil */
.cta-movil {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  padding: var(--e2) var(--lateral) calc(var(--e2) + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--filete-fuerte);
}
@media (max-width: 980px) { .cta-movil[data-visible="si"] { display: block; } }

/* ---------- Entrada de lámina: 350 ms, opacidad + 12 px ---------- */
[data-lamina] { opacity: 0; transform: translateY(12px); }
[data-lamina].vista { animation: pilar-lamina var(--dur-corta) var(--curva) forwards; }
@keyframes pilar-lamina { to { opacity: 1; transform: none; } }

/* ---------- Movimiento reducido: estado final, nada en curso (§1.6) ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-lamina] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cota__linea { transform: scaleX(1) !important; transition: none !important; }
  .obra__plinto { stroke-dashoffset: 0 !important; transition: none !important; }
  .obra__columna, .obra__viga { transform: none !important; transition: none !important; }
  .consecuencia { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Pista de la escena fijada (spec §3, lámina 02) ----------
   El alto de la pista es la distancia de scroll de los ocho cuadros: 880 px,
   unos 110 px por cuadro. El portafolio pedía 25 vh por cuadro (200 vh de
   fijado): eso se llevaba 1.800 px del tope de 6.900 y se declara la desviación. */
.pista__cola { height: 424px; }
@media (max-width: 980px) { .pista__cola { height: 320px; } }
@media (prefers-reduced-motion: reduce) {
  .pista__cola { height: 0 !important; }
  .escena { position: static !important; }
}

/* ---------- Última pasada de compactación (CONSTRUIR.md: perseguir el tope) ---------- */
@media (max-width: 980px) {
  .lamina { padding-block: var(--e8); }
  .pliego { padding-top: var(--e3); }
  .pliego .t-margen { font-size: .75rem; }
  .visor--vacio .visor__marco { min-height: 120px; font-size: .6875rem; }
  .escena__operacion, .escena__consecuencias { padding: var(--e3); }
  .cadena__pieza { padding: var(--e2) var(--e3); }
  .hoja__filas > div { font-size: .8125rem; }
  .zt-faq summary { font-size: .9375rem; }
  .t-bajada { font-size: 1.0625rem; }
}

/* A 720 px y menos, el cuerpo baja a 16/1,5: el mismo texto, un 7 % menos de alto.
   Es la palanca que baja el móvil sin quitar una sola frase. */
@media (max-width: 720px) {
  body { font-size: 1rem; line-height: 1.5; }
  .t-menor { font-size: .875rem; }
  .indice__fila p, .cifras p, .consecuencia p, .pliego li { font-size: .8125rem; }
  .lamina { padding-block: 28px; }
  .cajetin { margin-bottom: var(--e3); }
  .tabla { font-size: .8125rem; }
}

/* Última pasada para el móvil: el mismo contenido, sin pares de columnas que se
   vuelven pilas de una sola línea. El formulario conserva sus parejas hasta 380 px. */
@media (max-width: 720px) {
  .lamina { padding-block: 24px; }
  .formulario .dos { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .formulario .zt-campo label { font-size: .8125rem; }
  .escena__campo { font-size: .8125rem; }
  .escena__campo span:last-child { font-size: .75rem; }
  .pliego .t-menor { font-size: .8125rem; }
  .calc__fila, .calc__casillas label, .desglose li { font-size: .875rem; }
  .cifras > div { padding-left: var(--e3); }
  .cadena__pieza p { font-size: .625rem; }
}
@media (max-width: 560px) {
  /* Consecuencia de una sola pieza: el título y la frase corren seguidos */
  .consecuencia h4, .consecuencia p { display: inline; }
  .consecuencia h4::after { content: ' · '; color: var(--apoyo); }
}
@media (max-width: 380px) {
  .formulario .dos { grid-template-columns: 1fr; }
}

/* A 720 px, las filas de índice y de hoja corren en una sola línea */
@media (max-width: 720px) {
  /* Ojo: si el contenedor sigue siendo grid, sus hijos se vuelven bloque y el
     display:inline no hace nada. Hay que deshacer el grid primero. */
  .indice--compacto .indice__fila > div { display: block; }
  .indice--compacto .indice__fila > div h3,
  .indice--compacto .indice__fila > div p { display: inline; }
  .indice--compacto .indice__fila > div h3 { margin-right: .5em; }
  .hoja__filas > div { display: block; }
  .hoja__filas > div > p:first-child, .hoja__filas > div > p:last-child { display: inline; }
  .hoja__filas > div > p:first-child::after { content: '\00a0·\00a0'; color: var(--apoyo); }
  .cifras p { font-size: .75rem; }
}

/* Ajuste final del móvil (spec §6.6: 11.500 px a 390) */
@media (max-width: 720px) {
  .lamina { padding-block: 20px; }
  .acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .acciones .boton { width: auto; height: auto; min-height: 48px; padding: var(--e2) var(--e3);
    font-size: .875rem; text-align: center; line-height: 1.25; }
  .cta-movil .boton { min-height: 48px; }
  .pestanas [role="tab"] { padding: var(--e2) var(--e3); font-size: .8125rem; }
  .consecuencia { padding-block: 2px; }
  .consecuencia h4, .consecuencia p { font-size: .75rem; line-height: 1.4; }
  .escena__titulo { font-size: .875rem; margin-bottom: var(--e2); }
  .calc__controles { gap: var(--e2); }
  .calc__controles label { gap: var(--e1); }
  .zt-faq summary { padding-block: var(--e2); }
  .zt-faq details > :not(summary) { padding-bottom: var(--e2); font-size: .875rem; }
  .pie { padding-block: var(--e3) var(--e4); }
  .pliego { padding-block: var(--e2); }
  .pliego .t-precio { font-size: 1.75rem; }
}

/* Los últimos 250 px del móvil: menos aire, ni una frase menos */
@media (max-width: 720px) {
  .lamina { padding-block: 16px; }
  .hoja { padding: var(--e2); }
  .dos-columnas { gap: var(--e3); }
  .reticula-12 { row-gap: var(--e3); }
  .cifras { row-gap: var(--e4); }
  .t-portada { font-size: 1.875rem; }
  .visor--vacio .visor__marco { min-height: 100px; }
  .escena__campo { padding-top: 2px; }
  .desplegable > summary { padding-block: var(--e2); font-size: .875rem; }
  .pie__endoso { height: 26px; }
}

/* A 720 px el dibujo mide 350 x 46: los rótulos del SVG no se pueden leer y la
   lista de consecuencias ya los nombra, así que no se dibujan. */
@media (max-width: 720px) {
  .obra__rotulo, .obra__cifra { display: none; }
}