/* FARO · «Folio nocturno» — piel de marca (spec faro.md §1, portafolio §3.2).
   Territorio exclusivo de FARO: única con titular serif, única con tinta como fondo dominante,
   radio 0 con reglas grises y regla dorada, cono de luz y nota al margen.
   No se usa ninguna forma, color, tipografía ni movimiento de otra marca. */

/* ---------- Fuentes autoalojadas (subconjunto propio latin + latin-ext) ---------- */
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fuentes/source-serif-4-600-opsz60.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fuentes/source-serif-4-italic-400-opsz60.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fuentes/source-sans-3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Code Pro'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('fuentes/source-code-pro-var.woff2') format('woff2');
}
/* Respaldos con métricas ajustadas: si la fuente tarda, el texto no salta (CLS ≤ 0,02) */
@font-face {
  font-family: 'Serif respaldo'; src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Sans respaldo'; src: local('Arial'), local('Helvetica');
  size-adjust: 101%; ascent-override: 95%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Mono respaldo'; src: local('Courier New'), local('monospace');
  size-adjust: 108%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- Contrato de tokens (§6.1 del portafolio, valores de FARO §1.1) ---------- */
:root {
  --fondo: #141414;
  --fondo-alt: #F4F4F3;          /* solo hojas: acta, recortes, condiciones, formulario */
  --tinta: #F4F4F3;              /* 16,74:1 sobre fondo */
  --tinta-hoja: #141414;
  --apoyo: #8A8A8E;              /* 5,36:1 */
  --apoyo-hoja: #6A7078;         /* 4,54:1 */
  --filete: rgba(138, 138, 142, .35);
  --borde-control: #8A8A8E;
  --acento-grafico: #F0A81E;     /* nunca lleva texto encima */
  --haz: rgba(240, 168, 30, .08);
  --acento-texto: #F5BC3E;       /* 10,65:1 */
  --acento-texto-hoja: #8A6420;  /* 4,86:1 */
  --foco: #F5BC3E;

  --radio: 0;
  --dur-corta: 320ms;
  --dur-media: 500ms;
  --curva: cubic-bezier(.16, 1, .3, 1);

  --fuente-titular: 'Source Serif 4', 'Serif respaldo', Georgia, serif;
  --fuente-cuerpo: 'Source Sans 3', 'Sans respaldo', Arial, sans-serif;
  --fuente-datos: 'Source Code Pro', 'Mono respaldo', 'Courier New', monospace;

  /* módulo de 8 px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 24px; --e7: 32px; --e8: 44px; --e9: 64px; --e10: 96px;
  --lateral: 96px;
}
@media (max-width: 1100px) { :root { --lateral: 48px; } }
@media (max-width: 720px)  { :root { --lateral: 20px; } }

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

.envoltura {
  max-width: calc(1248px + 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-size: clamp(2.5rem, 1.4rem + 3.1vw, 4rem);
  line-height: 1.05; letter-spacing: -.01em;
}
.t-folio {
  font-family: var(--fuente-titular); font-weight: 600;
  font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.01em;
}
.t-subfolio {
  font-family: var(--fuente-titular); font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + .45vw, 1.625rem); line-height: 1.2;
}
.t-portada em, .t-folio em, .lema { font-style: italic; font-weight: 400; }
.punto { color: var(--acento-grafico); }          /* punto final dorado del titular */
.t-bajada { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.45; max-width: 52ch; }
.t-lectura { max-width: 62ch; }
.t-menor { font-size: .9375rem; line-height: 1.5; color: var(--apoyo); }
.t-margen, .rotulo, .dato {
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums;
}
.t-margen { font-size: .875rem; line-height: 1.6; color: var(--apoyo); }
.rotulo { font-size: .8125rem; line-height: 1.4; color: var(--apoyo); }
.t-cifra {
  font-family: var(--fuente-datos); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.1; color: var(--tinta);
}
.t-precio {
  font-family: var(--fuente-datos); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.6rem + 1.1vw, 2.5rem); line-height: 1;
}
strong, b { font-weight: 600; }

/* ---------- Retícula del folio (§1.4) ---------- */
.folio { padding-block: var(--e6); border-top: 1px solid transparent; scroll-margin-top: 76px; }
.folio + .folio { border-top-color: var(--filete); }
.folio__reticula {
  display: grid;
  grid-template-columns: [lectura] minmax(0, 62ch) [aire] var(--e9) [margen] 280px [resto] 1fr;
  align-items: start;
}
.folio__lectura { grid-column: lectura; display: grid; gap: var(--e3); }
.folio__margen {
  grid-column: margen / -1; padding-left: var(--e6);
  border-left: 1px solid var(--filete); align-self: stretch;
  display: grid; gap: var(--e5); align-content: start;
}
.folio__pliego { grid-column: lectura / -1; margin-top: var(--e6); }
@media (max-width: 1100px) {
  .folio__reticula { grid-template-columns: [lectura] minmax(0, 62ch) [aire] var(--e7) [margen] 240px [resto] 1fr; }
}
@media (max-width: 900px) {
  .folio { padding-block: var(--e5); }
  .folio__reticula { display: block; }
  .folio__margen {
    margin-top: var(--e5); padding-left: var(--e3);
    border-left: 2px solid var(--acento-grafico); border-top: 0;
  }
  .folio__pliego { margin-top: var(--e6); }
}

/* Regla dorada de 96 × 2 px entre folios */
.regla {
  width: 96px; height: 2px; background: var(--acento-grafico);
  transform: scaleX(0); transform-origin: left center;
}
.regla.vista { animation: faro-regla var(--dur-media) var(--curva) forwards; }
@keyframes faro-regla { to { transform: scaleX(1); } }

/* ---------- Barra (§1.5) ---------- */
.barra {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: var(--fondo); border-bottom: 1px solid var(--filete);
  transition: border-color var(--dur-corta) var(--curva);
}
.barra[data-pegada="si"] { border-bottom-color: var(--apoyo); }
.barra__fila { height: 64px; display: flex; align-items: center; gap: var(--e5); }
.barra__logo { display: flex; align-items: center; gap: var(--e3); }
.barra__logo img { height: 28px; width: auto; }
.barra__menu { display: flex; align-items: center; gap: var(--e5); margin-left: auto; }
.barra__menu a { color: var(--tinta); text-decoration: none; }
.barra__menu a:hover { color: var(--acento-texto); }
.barra__menu a.boton--primario { color: var(--fondo); }
.barra__menu a.boton--primario:hover { color: var(--fondo); }
.barra__menu button { color: var(--tinta); }
.barra__menu button:hover, .barra__movil button:hover { color: var(--acento-texto); }
.barra__movil button { color: var(--tinta); }
.barra__movil { display: none; }
@media (max-width: 900px) {
  .barra__menu { display: none; }
  .barra__movil { display: flex; margin-left: auto; gap: var(--e3); align-items: center; }
}

/* Índice «Para quién» (panel en tinta, dos columnas con filetes) */
.indice-panel {
  position: absolute; left: 0; right: 0; top: 64px;
  background: var(--fondo); border-bottom: 1px solid var(--filete);
}
.indice-panel__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding-block: var(--e6);
}
.indice-panel__cols > div + div { border-left: 1px solid var(--filete); padding-left: var(--e6); }
@media (max-width: 900px) {
  .indice-panel { position: fixed; inset: 64px 0 0; overflow: auto; }
  .indice-panel__cols { grid-template-columns: 1fr; }
  .indice-panel__cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--filete); padding-top: var(--e5); margin-top: var(--e5); }
}

/* ---------- 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);
}
.boton--primario { background: var(--tinta); color: var(--fondo); border: 0; }
.boton--primario:hover { background: #FFFFFF; }
.boton--primario:active { box-shadow: inset 0 0 0 2px var(--fondo); }
.boton--secundario { background: transparent; color: var(--acento-texto); border: 1px solid var(--borde-control); }
.boton--secundario:hover { border-color: var(--tinta); }
@media (max-width: 720px) { .boton { height: 52px; width: 100%; } }

a.enlace, .prosa a { color: var(--acento-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.enlace:hover { text-decoration-thickness: 2px; }
.hoja a { color: var(--acento-texto-hoja); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- Hoja: papel sobre el escritorio ---------- */
.hoja {
  background: var(--fondo-alt); color: var(--tinta-hoja);
  border: 1px solid var(--apoyo); border-radius: var(--radio);
  padding: var(--e5);
}
.hoja .t-menor, .hoja .rotulo, .hoja .t-margen { color: var(--apoyo-hoja); }
@media (max-width: 720px) { .hoja { padding: var(--e4); } }

.hoja__filas > div {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--e5);
  padding-block: var(--e3); border-top: 1px solid rgba(20, 20, 20, .18);
}
.hoja__filas > div:first-child { border-top: 0; }
@media (max-width: 720px) { .hoja__filas > div { grid-template-columns: 1fr; gap: var(--e1); } }

/* ---------- Índice (reemplaza cualquier fila de tarjetas) ---------- */
.indice { display: grid; }
.indice__fila {
  display: grid; grid-template-columns: 1fr 260px; gap: var(--e5);
  padding-block: var(--e4); border-top: 1px solid var(--filete);
  position: relative; text-decoration: none; color: inherit;
}
.indice__fila:first-child { border-top: 0; }
.indice__fila::before {   /* pestaña de carpeta */
  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, .indice__fila[aria-current]::before { transform: scaleX(1); }
.indice__fila h3 { margin-bottom: var(--e1); }
.indice__fila p { color: var(--apoyo); }
.indice__fila .t-margen { text-align: right; }
@media (max-width: 900px) {
  .indice__fila { grid-template-columns: 1fr; gap: var(--e2); }
  .indice__fila .t-margen { text-align: left; }
}
.numeral { font-family: var(--fuente-datos); color: var(--acento-texto); margin-right: var(--e2); }

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

/* ---------- Firma «El haz» (§1.8) ---------- */
.haz-escena { position: relative; overflow: hidden; }
.reticula {
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px;
  position: relative; z-index: 1;
}
.reticula__celda {
  height: 17px; display: grid; place-items: center;
  font-family: var(--fuente-datos); font-size: 11px; line-height: 1;
  color: rgba(138, 138, 142, .55); background: transparent;
  border: 0; border-bottom: 2px solid transparent; padding: 0;
}
.reticula__celda[data-nueva="si"] {
  color: var(--acento-texto); border-bottom-color: var(--acento-grafico); cursor: pointer;
}
.reticula__celda[data-nueva="si"][data-encendida="no"] { color: rgba(138, 138, 142, .55); border-bottom-color: transparent; }
.reticula__celda[data-encendida="si"] { animation: faro-enciende var(--dur-corta) var(--curva) both; }
@keyframes faro-enciende {
  from { color: rgba(138, 138, 142, .55); }
  to   { color: var(--acento-texto); }
}
/* Cono plano de bordes duros: forma derivada, nunca el isotipo */
.haz {
  position: absolute; left: 0; top: 50%; width: 140%; height: 260%;
  transform-origin: 0 50%; transform: rotate(-28deg);
  background: var(--haz);
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 52%);
  pointer-events: none; z-index: 0;
}
.haz.barre { animation: faro-haz 2400ms linear forwards; }
@keyframes faro-haz { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.haz-controles { margin-top: var(--e5); display: grid; gap: var(--e2); }

/* Deslizador: pista de 1 px, pulgar cuadrado dorado */
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: 2px solid var(--fondo); border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--acento-grafico);
  border: 2px solid var(--fondo); border-radius: 0;
}

/* Notas al margen */
.nota { position: relative; padding-top: var(--e3); }
.nota::before { content: ''; display: block; width: 24px; height: 1px; background: var(--acento-grafico); margin-bottom: var(--e2); }
.nota.vista { animation: faro-margen 400ms var(--curva) both; }
@keyframes faro-margen { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ---------- Acta en dos columnas ---------- */
.acta { display: grid; grid-template-columns: 1fr 1fr; }
.acta__col { padding: var(--e4); }
.acta__col + .acta__col { border-left: 1px solid rgba(20, 20, 20, .18); }
.acta__col h3 { font-size: 1rem; font-family: var(--fuente-cuerpo); font-weight: 600; margin-bottom: var(--e3); }
.acta__linea {
  display: grid; gap: var(--e1); padding-block: var(--e3);
  border-top: 1px solid rgba(20, 20, 20, .12);
  clip-path: inset(0 0 0 0);
}
.acta__linea:first-of-type { border-top: 0; }
.acta__linea.escribiendo { animation: faro-acta 450ms var(--curva) both; }
@keyframes faro-acta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.acta label { display: grid; grid-template-columns: 18px 1fr; gap: var(--e3); align-items: start; cursor: pointer; }
.acta input[type="checkbox"] {
  appearance: none; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1px solid var(--apoyo-hoja); border-radius: 0; background: transparent;
}
.acta input[type="checkbox"]:checked { background: var(--tinta-hoja); box-shadow: inset 0 0 0 3px var(--fondo-alt); }
@media (max-width: 900px) {
  .acta { grid-template-columns: 1fr; }
  .acta__col + .acta__col { border-left: 0; border-top: 1px solid rgba(20, 20, 20, .18); }
}
.lema { font-family: var(--fuente-titular); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.3; }

/* ---------- Precio: pliegos separados por filetes ---------- */
.pliegos { display: grid; grid-template-columns: repeat(3, 1fr); }
.pliego { padding: var(--e5); 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__cupos { color: var(--apoyo); }
.pliego ul { display: grid; gap: var(--e2); margin-top: var(--e4); }
.pliego li { padding-left: var(--e4); position: relative; }
.pliego li::before { content: '—'; position: absolute; left: 0; color: var(--apoyo); }
@media (max-width: 900px) {
  .pliegos { grid-template-columns: 1fr; }
  .pliego { border-left: 0; border-top: 1px solid var(--filete); padding-left: 0; padding-top: var(--e5); }
  .pliego:first-child { border-top: 0; }
}

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

/* Tabla de comparación */
.tabla { width: 100%; }
.tabla th, .tabla td { text-align: left; padding: var(--e3) var(--e4); border-top: 1px solid rgba(20, 20, 20, .16); vertical-align: top; }
.tabla thead th { border-top: 0; font-family: var(--fuente-cuerpo); font-weight: 600; }
.tabla td.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-envoltura { overflow-x: auto; }

/* Calculadora */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: start; }
.calc__controles { display: grid; gap: var(--e5); }
.calc__controles label { display: grid; gap: var(--e2); }
.calc__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.calc__num {
  width: 92px; height: 40px; background: transparent; color: var(--tinta);
  border: 1px solid var(--borde-control); border-radius: 0; padding-inline: var(--e2);
  font-family: var(--fuente-datos); font-variant-numeric: tabular-nums;
}
.calc__casillas { display: grid; gap: var(--e3); }
.calc__casillas label { grid-template-columns: 18px 1fr; align-items: center; }
.calc__casillas input[type="checkbox"] {
  appearance: none; width: 18px; height: 18px; border: 1px solid var(--borde-control); border-radius: 0;
}
.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(--e4); }
.desglose li { display: flex; justify-content: space-between; gap: var(--e4); border-top: 1px solid rgba(20, 20, 20, .16); padding-top: var(--e2); }
.desglose li span:last-child { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: var(--e6); } }

/* ---------- Recorte de captura ---------- */
.recorte { display: grid; gap: var(--e2); }
.recorte__marco { overflow: hidden; border: 1px solid var(--apoyo); background: var(--fondo-alt); }
.recorte__marco img { width: 100%; display: block; transition: transform var(--dur-corta) var(--curva); }
.recorte:hover .recorte__marco img, .recorte:focus-within .recorte__marco img { transform: scale(1.6); }
.recorte__rotulo { font-family: var(--fuente-datos); font-size: 12px; color: var(--apoyo); }
.recorte--vacio .recorte__marco {
  display: grid; place-items: center; min-height: 180px;
  background: repeating-linear-gradient(45deg, rgba(138,138,142,.08) 0 8px, transparent 8px 16px);
  color: var(--apoyo); font-family: var(--fuente-datos); font-size: 13px; text-align: center; padding: var(--e5);
}

/* ---------- Preguntas ---------- */
.zt-faq summary { font-family: var(--fuente-titular); font-weight: 600; font-size: 1.25rem; display: flex; justify-content: space-between; gap: var(--e4); }
.zt-faq summary::after { content: '+'; font-family: var(--fuente-datos); color: var(--acento-texto); }
.zt-faq details[open] summary::after { content: '−'; }
.zt-faq details { position: relative; }
.zt-faq details::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);
}
.zt-faq details[open]::before { transform: scaleX(1); }

/* ---------- Formulario (hoja) ---------- */
.formulario { display: grid; gap: var(--e4); }
.formulario .zt-campo label { font-weight: 600; font-size: .9375rem; }
.formulario input, .formulario select, .formulario textarea {
  height: 48px; background: #FFFFFF; color: var(--tinta-hoja);
  border: 1px solid var(--apoyo-hoja); border-radius: 0; padding-inline: var(--e3);
  font-family: var(--fuente-cuerpo); width: 100%;
}
.formulario textarea { height: auto; padding: var(--e3); min-height: 96px; }
.formulario .dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
@media (max-width: 720px) { .formulario .dos { grid-template-columns: 1fr; } }
.formulario .boton--primario { background: var(--tinta-hoja); color: var(--fondo-alt); }
.formulario .boton--primario:hover { background: #000; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--filete); padding-block: var(--e7); }
.pie__endoso { height: 14px; width: auto; opacity: .85; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--acento-texto); }

/* CTA fijo en móvil (aparece tras el hero, se esconde sobre el formulario) */
.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);
}
@media (max-width: 900px) { .cta-movil[data-visible="si"] { display: block; } }

/* Movimiento reducido: estado final, nada en curso (§1.6) */
@media (prefers-reduced-motion: reduce) {
  .haz { transform: rotate(28deg) !important; animation: none !important; }
  .regla { transform: scaleX(1) !important; animation: none !important; }
  .nota, .acta__linea, .reticula__celda { animation: none !important; opacity: 1 !important; clip-path: none !important; }
  .recorte:hover .recorte__marco img, .recorte:focus-within .recorte__marco img { transform: none; }
}


/* ---------- Bloque desplegable (compactación §0.6: 6 a 7,5 pantallas) ---------- */
.desplegable { margin-top: var(--e4); border-top: 1px solid rgba(20, 20, 20, .18); }
.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); color: var(--acento-texto-hoja); }
.desplegable[open] > summary::after { content: 'Cerrar'; }
.desplegable > summary:focus-visible { outline: 2px solid var(--tinta-hoja); outline-offset: 2px; }

/* Hoja de condiciones en dos columnas: mismo contenido, la mitad de alto */
.hoja__filas--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e6); }
.hoja__filas--dos > div { grid-template-columns: 1fr; gap: var(--e1); }
.hoja__filas--dos > div:nth-child(2) { border-top: 0; }
@media (max-width: 900px) {
  .hoja__filas--dos { grid-template-columns: 1fr; }
  .hoja__filas--dos > div:nth-child(2) { border-top: 1px solid rgba(20, 20, 20, .18); }
}

/* Las notas del haz no empujan la portada: se apilan en su propio alto */
.folio__notas { display: grid; gap: var(--e4); max-height: 320px; overflow: hidden; }


/* ---------- Compactación: dos columnas y índices de una línea ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: var(--e5); } }

/* El índice compacto pone título y frase en la misma línea: mismo contenido, un tercio del alto */
.indice--compacto .indice__fila { padding-block: var(--e3); grid-template-columns: 1fr 200px; }
.indice--compacto .indice__fila > div {
  display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: var(--e4); align-items: baseline;
}
.indice--compacto .indice__fila h3 { font-size: 1.125rem; margin-bottom: 0; }
.indice--compacto .indice__fila p { font-size: .9375rem; }
@media (max-width: 900px) {
  .indice--compacto .indice__fila > div { grid-template-columns: 1fr; gap: var(--e1); }
}
/* En el bloque «UN SISTEMA ZIMPLE» la columna de margen es corta */
.indice--tres .indice__fila { grid-template-columns: 1fr 160px; }

/* La hoja de condiciones vive en media página: filas de dos líneas, sin columna ancha */
.dos-columnas .hoja__filas > div { grid-template-columns: 150px 1fr; gap: var(--e4); padding-block: var(--e2); }
@media (max-width: 900px) { .dos-columnas .hoja__filas > div { grid-template-columns: 1fr; } }


/* Tres controles en fila: mismo texto, un tercio del alto */
.indice--fila-triple { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--filete); }
.indice--fila-triple .indice__fila {
  grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--filete);
  padding: var(--e4) var(--e5); gap: var(--e2);
}
.indice--fila-triple .indice__fila:first-child { border-left: 0; padding-left: 0; }
.indice--fila-triple .indice__fila > div { grid-template-columns: 1fr; gap: var(--e1); }
.indice--fila-triple .indice__fila .t-margen { display: none; }
@media (max-width: 900px) {
  .indice--fila-triple { grid-template-columns: 1fr; }
  .indice--fila-triple .indice__fila { border-left: 0; border-top: 1px solid var(--filete); padding-inline: 0; }
}
/* Las notas del haz no estiran la portada */
.folio__notas { max-height: 132px; }
/* Tablas más apretadas: el dato manda, no el aire */
.tabla th, .tabla td { padding: var(--e2) var(--e3); }
.pliego { padding: var(--e4); }


/* A 390 y menos, la retícula se estrecha: 15 columnas y solo los radicados
   encendidos muestran sus dígitos (spec §3.1, folio 1). */
@media (max-width: 720px) {
  .reticula { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 1px; }
  .reticula__celda { height: 16px; font-size: 9px; }
  .reticula__celda[data-encendida="no"] { font-size: 0; }
}


/* En pantallas angostas ningún índice conserva su columna fija de margen */
@media (max-width: 900px) {
  .indice--compacto .indice__fila,
  .indice--tres .indice__fila,
  .indice--fila-triple .indice__fila { grid-template-columns: 1fr; }
  .indice--compacto .indice__fila .t-margen { text-align: left; }
}


/* Guarda de desborde: un hijo de retícula con contenido ancho (una tabla, una cifra larga)
   no estira su columna. Sin esto, la página se sale a la derecha en móvil. */
.rejilla > *, .folio__reticula > *, .dos-columnas > *, .it-planes > *, .zt-fichas > * { min-width: 0; }
.tabla-envoltura { min-width: 0; max-width: 100%; }
table { max-width: 100%; }


/* ---------- Compactación 13-sep: mismo folio, menos aire (tope 6.000 / 11.000) ---------- */
/* Dos pliegos comparten fila cuando ninguno necesita el ancho completo. */
.folio__par {
  grid-column: lectura / -1; margin-top: var(--e6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start;
}
.folio__par > * { min-width: 0; margin-top: 0; }
@media (max-width: 900px) { .folio__par { grid-template-columns: 1fr; gap: var(--e4); } }

/* Índices y filas: el dato manda, no el interlineado */
.indice__fila { padding-block: var(--e3); }
.hoja__filas > div { padding-block: var(--e2); }
.zt-faq summary { padding-block: var(--e3); }
.zt-faq details > :not(summary) { padding-bottom: var(--e3); }
.cifras details { margin-top: var(--e1); }
.formulario { gap: var(--e3); }
.formulario input, .formulario select { height: 44px; }
.formulario textarea { min-height: 72px; }
.calc__controles { gap: var(--e4); }
.calc__num { height: 36px; }
.pie { padding-block: var(--e6); }

/* A 900 px y menos la página se apila: aquí es donde se gana de verdad. */
@media (max-width: 900px) {
  .folio__margen { margin-top: var(--e4); }
  .folio__pliego { margin-top: var(--e5); }
  .folio__reticula > * + * { margin-top: 0; }
  .haz-controles { margin-top: var(--e3); }
  .hoja { padding: var(--e4); }
  .pliego { padding-block: var(--e4); }
  .pliego ul { margin-top: var(--e3); }
  .acta__col { padding: var(--e3); }
  .acta__linea { padding-block: var(--e2); }
  .indice__fila { padding-block: var(--e2); }
  .zt-faq summary { font-size: 1.125rem; padding-block: var(--e2); }
  .zt-faq details > :not(summary) { padding-bottom: var(--e2); }
  .t-bajada { line-height: 1.35; }
  .t-lectura, .folio__lectura p { line-height: 1.45; }
  .t-menor { line-height: 1.4; }
  .cifras { gap: var(--e4) 0; }
  .recorte--vacio .recorte__marco { min-height: 140px; }
  .desglose li { padding-top: var(--e1); }
  .boton { height: 48px; }
  .calc { gap: var(--e5); }
}
@media (max-width: 720px) {
  .folio { padding-block: var(--e5); }
  .pliego__cupos { line-height: 1.45; }
  .pliego li, .indice__fila p { font-size: .9375rem; line-height: 1.4; }
}

/* Un pliego que cabe en la columna de margen se pone al lado del titular, no debajo */
.folio__lado { grid-column: margen / -1; align-self: start; }
@media (max-width: 900px) { .folio__lado { margin-top: var(--e4); } }

/* Dentro de un pliego pareado el índice pierde su columna de margen: a media
   página, «minmax(140px,260px) 1fr» deja 150 px para la frase y la parte en cinco líneas. */
.folio__par .indice--compacto .indice__fila { grid-template-columns: 1fr; }
.folio__par .indice--compacto .indice__fila > div { grid-template-columns: 1fr; gap: var(--e1); }
.folio__par .indice--compacto .indice__fila .t-margen { display: none; }
.folio__par .hoja { padding: var(--e4); }

/* Índice del endoso y controles: dos líneas por fila, no cuatro */
.indice--tres .indice__fila { padding-block: var(--e2); }
.indice--fila-triple .indice__fila { padding-block: var(--e3) var(--e3); }

/* La comparación es un dato, no un cartel */
.tabla { font-size: .9375rem; }
.tabla th, .tabla td { padding: var(--e2) var(--e3); }

/* La calculadora se deja como estaba: poner el número al lado del deslizador dejaba
   las casillas vacías y desalineadas (revisado a ojo el 13-sep). */
.folio__notas { max-height: 88px; }
.pliego p.t-menor { min-height: 0 !important; }
.pliego ul { gap: var(--e1); }
.pliego li { font-size: .9375rem; line-height: 1.4; }

/* El cierre en tres columnas: lo que se firma · preguntas · agenda (mismo contenido, un tercio del alto) */
.folio__tres {
  display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: var(--e5) var(--e6); align-items: start;
}
.folio__tres > * { min-width: 0; }
@media (max-width: 1100px) { .folio__tres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .folio__tres { grid-template-columns: 1fr; gap: var(--e5); } }
.folio__tres .t-lectura, .folio__tres p { max-width: none; }
.folio__tres .formulario .dos { gap: var(--e3); }
.folio__tres .zt-faq summary { font-size: 1.0625rem; }


/* ---------- Compactación en móvil: donde todo se apila (tope 11.000 a 390) ---------- */
/* La tabla de comparación NO se encoge hasta caber: se lee desplazándola dentro de su
   caja. Encogida a 350 px, cada celda se parte en cinco líneas y estira la página. */
@media (max-width: 900px) {
  .tabla-envoltura { -webkit-overflow-scrolling: touch; }
  .tabla-envoltura > table { max-width: none; min-width: 640px; }
}
@media (max-width: 720px) {
  body { line-height: 1.45; }
  .folio { padding-block: var(--e5); }
  .t-bajada { line-height: 1.3; }
  .t-lectura, .t-menor, .indice__fila p, .pliego li { line-height: 1.4; }
  .t-margen, .rotulo { line-height: 1.45; }

  /* Los tres pliegos del precio: el dato manda */
  .pliego { padding: var(--e3) 0 var(--e4); }
  .pliego .t-menor { margin-bottom: var(--e1); }
  .pliego .t-precio { line-height: .95; }
  .pliego__cupos { font-size: .875rem; line-height: 1.4; }
  .pliego li { font-size: .9375rem; }
  .pliego .boton { height: 46px; }

  /* Calculadora y formulario: menos escalones */
  .calc__controles { gap: var(--e3); }
  .calc__casillas { gap: var(--e2); }
  .calc__salida .desglose li { padding-top: var(--e1); }
  .formulario { gap: var(--e2); }
  .formulario .zt-campo { gap: 2px; }
  .formulario input, .formulario select { height: 42px; }
  .formulario textarea { min-height: 64px; }

  /* Hojas, actas e índices */
  .hoja { padding: var(--e3); }
  .hoja__filas > div { padding-block: var(--e1); }
  .acta__col { padding: var(--e3) var(--e2); }
  .acta__linea { padding-block: var(--e2); }
  .indice__fila { padding-block: var(--e2); }
  .indice__fila h3 { font-size: 1.0625rem; }
  .cifras > div p { margin-top: var(--e1); }
  .cifras .t-cifra { line-height: 1; }
  .desplegable > summary { padding-block: var(--e2); }
  .lema { line-height: 1.25; }
  .haz-controles { margin-top: var(--e2); }
  .pie { padding-block: var(--e5); }
}
/* El par de campos cortos (nombre/teléfono, despacho/correo) aguanta dos columnas
   hasta 560 px: por debajo sí se apila. */
@media (min-width: 561px) and (max-width: 720px) { .formulario .dos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .formulario .dos { grid-template-columns: 1fr 1fr; gap: var(--e2); } }
@media (max-width: 400px) { .formulario .dos { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  /* Última vuelta de densidad: titulillos y hojas del precio y del cierre */
  .t-subfolio { font-size: 1.125rem; line-height: 1.15; }
  .t-folio { line-height: 1.05; }
  .t-portada { line-height: 1; }
  .hoja h3 + .desplegable { margin-top: var(--e2); }
  .hoja .desplegable > summary { font-size: .9375rem; }
  .pliego { padding-top: var(--e2); }
  .pliego ul { margin-top: var(--e2); }
  .calc__salida .t-precio { line-height: .95; }
  .calc { gap: var(--e4); }
  .dos-columnas { gap: var(--e4); }
  .zt-faq summary { font-size: 1.0625rem; }
  .acta { gap: 0; }
  .indice--fila-triple .indice__fila { padding-block: var(--e2); }
  .folio__pliego { margin-top: var(--e4); }
  .folio__margen { margin-top: var(--e3); }
  .recorte--vacio .recorte__marco { min-height: 120px; padding: var(--e3); }
  .nota { padding-top: var(--e2); }
}

/* Un botón con el fondo de la página encima de una hoja clara es un botón invisible.
   Dentro de .hoja el primario se pinta con la tinta de la hoja. (Revisión a ojo 13-sep:
   «Agendar recorrido con esta cuenta» salía sin fondo dentro de la calculadora.) */
.hoja .boton--primario { background: var(--tinta-hoja); color: var(--fondo-alt); border: 0; }
.hoja .boton--primario:hover { background: #000; color: var(--fondo-alt); }
.hoja .boton--secundario { color: var(--acento-texto-hoja); border-color: var(--apoyo-hoja); }
/* Los controles que viven dentro de una hoja clara también necesitan la tinta de la hoja:
   con la tinta de la página (clara) el número escrito y la casilla marcada no se ven. */
.hoja .calc__num { background: #FFFFFF; color: var(--tinta-hoja); border-color: var(--apoyo-hoja); }
.hoja .calc__casillas input[type="checkbox"] { border-color: var(--apoyo-hoja); }
.hoja .calc__casillas input[type="checkbox"]:checked { background: var(--tinta-hoja); box-shadow: inset 0 0 0 3px var(--fondo-alt); }
.hoja input[type="range"]::-webkit-slider-runnable-track { background: var(--apoyo-hoja); }
.hoja input[type="range"]::-moz-range-track { background: var(--apoyo-hoja); }
.hoja input[type="range"]::-webkit-slider-thumb { border-color: var(--fondo-alt); }
.hoja input[type="range"]::-moz-range-thumb { border-color: var(--fondo-alt); }

/* Fila con nota al margen: la columna corta va a la derecha, como en el folio */
.dos-columnas--margen { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) { .dos-columnas--margen { grid-template-columns: 1fr; } }
/* Precio: las hojas de adicionales y arranque, más apretadas */
.folio__pliego.dos-columnas .hoja .t-menor { line-height: 1.45; }
.folio__pliego.dos-columnas .hoja .desplegable { margin-top: var(--e2); }
.calc__salida .desglose { margin-top: var(--e3); }
/* Aviso de que la tabla se desliza: solo donde la tabla no cabe */
.solo-movil { display: none; }
@media (max-width: 900px) { .solo-movil { display: block; margin-bottom: var(--e2); } }