/* Escuadra · ruta D «La planilla» (puerta 4). La portada es una hoja de cálculo: barra de fórmulas, letras de
   columna, números de fila y pestañas. El logo ocupa un bloque de celdas; su escuadra ámbar recorre la conciliación y
   vuelve a cerrar el cuadrado. Cada sección siguiente es otra hoja del mismo libro. */

.num{font-variant-numeric:tabular-nums}
.cifra-marca{font-family:var(--marca);font-variant-numeric:tabular-nums}
.critica .rotulo{display:none}
.rotulo{font-size:14px;font-weight:400;color:var(--grafito);border:1px solid var(--linea);padding:1px 7px;border-radius:2px;background:var(--papel);white-space:nowrap}

/* ---------- Barra ---------- */
.cabeza{display:flex;align-items:center;gap:40px;height:64px;padding:0 var(--pad);position:relative;z-index:5}
.logo img{display:block;height:28px;width:auto}
.cabeza nav{display:flex;gap:28px;margin-left:8px}
.cabeza nav a{text-decoration:none;font-size:15px;color:var(--grafito)}
.cabeza nav a:hover,.cabeza nav a[aria-current]{color:var(--carbon);text-decoration:underline;text-underline-offset:4px}
.boton,.llamada{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--carbon);color:var(--papel);text-decoration:none;font-weight:600;font-size:15px;border-radius:var(--radio);transition:background .2s var(--ease);white-space:nowrap}
.boton:hover,.llamada:hover{background:#000}
.llamada.grande{min-height:52px;padding:0 26px;font-size:16px}
.cabeza .boton{margin-left:auto}
.corto{display:none}
.menu{display:none;margin-left:8px;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--radio);cursor:pointer;font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--hoja)}
.menu ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px 0;list-style:none;min-width:240px;background:var(--hoja);border:1px solid var(--carbon);box-shadow:0 18px 40px -20px rgba(29,28,26,.4)}
.menu li a{display:block;padding:12px 16px;text-decoration:none;font-size:16px}
.menu li a:hover{background:var(--papel)}

/* ---------- Barra de fórmulas y letras de columna ---------- */
.formula{display:grid;grid-template-columns:96px 44px minmax(0,1fr);height:40px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--hoja);font-size:15px}
.formula>*{display:flex;align-items:center;min-width:0;padding:0 12px}
.formula .nombre{border-right:1px solid var(--linea);font-variant-numeric:tabular-nums;color:var(--grafito)}
.formula .signo{justify-content:center;border-right:1px solid var(--linea);color:var(--tenue);font-style:italic}
.formula .fx{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:38px}
.fx b{font-weight:600}
.fx .nuevo{color:var(--timbre)}

/* ---------- La hoja del hero: 16 filas de --f; el logo en 6 columnas × 13 filas ---------- */
.hero-hoja{
  --f:clamp(32px,calc((100svh - 128px) / 16),54px);
  --lado:calc(var(--f) * 13);
  --cols:36px repeat(6,calc(var(--lado) / 6)) 28px 64px minmax(0,1fr) minmax(124px,.44fr) minmax(90px,.5fr) minmax(124px,.44fr) 112px 12px;
}
.letras,.hoja{display:grid;grid-template-columns:var(--cols)}
.letras{height:24px;background:var(--banda);border-bottom:1px solid var(--linea);font-size:14px;color:var(--tenue)}
.letras span{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--linea)}
.letras span.activa,.n.activa,.gn.activa{background:var(--banda-activa);color:var(--carbon);font-weight:600}
.hoja{position:relative;grid-template-rows:repeat(16,var(--f));background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--f) - 1px),var(--rejilla) calc(var(--f) - 1px) var(--f))}
.v{grid-row:1/-1;border-right:1px solid var(--rejilla);pointer-events:none}
.gn{grid-column:1;display:flex;align-items:center;justify-content:center;background:var(--banda);border-bottom:1px solid var(--linea);font-size:14px;color:var(--tenue);font-variant-numeric:tabular-nums}

.cuadro{grid-column:2/span 6;grid-row:2/span 13;align-self:start;aspect-ratio:1;position:relative;container-type:inline-size;z-index:2}
.pieza{position:absolute;inset:0}
.pieza svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.lema{position:absolute;inset:0;margin:0;padding:4.4cqw 4.2cqw 0 0;text-align:right;color:var(--papel);font:600 9.6cqw/.93 var(--marca);letter-spacing:-.035em;text-wrap:balance}
.lema span{display:inline-block}
.lema::before{content:"";float:left;width:100%;height:100%;shape-outside:polygon(0 0,9.6% 0,100% 90.4%,100% 100%,0 100%);shape-margin:2.2cqw}
.fantasma{opacity:0;transition:opacity .3s}
/* D35-A: el giro. Con movimiento, el logo parte dado vuelta (carbón abajo, ámbar arriba) con «Todo cuadra.»; la
   escuadra vuelve girando a su lugar, el cuadrado se cierra y da media vuelta: sigue cuadrado. Después aparece
   «Todo cuadra con Escuadra.» palabra por palabra. Sin JavaScript o con «reducir movimiento», el logo ya está derecho. */
.giro{position:absolute;inset:0}
/* Al girar, el cuadrado se achica lo justo para que sus esquinas no salgan de su lugar (a 45°, 1/√2). */
.cuadro.gira .giro{animation:giro .95s linear both}
@keyframes giro{0%{transform:rotate(0) scale(1);animation-timing-function:ease-in}12%{transform:rotate(14deg) scale(.82)}25%{transform:rotate(40deg) scale(.71)}75%{transform:rotate(140deg) scale(.71)}88%{transform:rotate(166deg) scale(.82);animation-timing-function:ease-out}100%{transform:rotate(180deg) scale(1)}}
.anima .cuadro:not(.girado) .carbon svg,.anima .cuadro:not(.girado) .fantasma svg{transform:rotate(180deg)}
.lema-antes{display:none}
.anima .cuadro:not(.girado) .lema-antes{display:block;position:absolute;left:5.4cqw;bottom:5cqw;margin:0;color:var(--papel);font:600 9.6cqw/.93 var(--marca);letter-spacing:-.035em;white-space:nowrap;transition:opacity .25s}
.anima .cuadro.cerrado .lema-antes{opacity:0}
.anima .cuadro:not(.girado) .lema span{opacity:0}
.anima .cuadro.girado .lema span{animation:palabra .5s var(--ease) both;animation-delay:calc(var(--i) * 80ms)}
@keyframes palabra{from{opacity:0;transform:translateY(.22em)}to{opacity:1;transform:none}}

.fantasma path{fill:var(--ambar);fill-opacity:.22}
.anima .cuadro:not(.cerrado) .fantasma{opacity:1}
.escuadra-viaja{transform-origin:0 0;z-index:3;will-change:transform}

.titulo-hoja{grid-column:9/span 6;grid-row:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0 10px;font-weight:600;font-size:16px}
.titulo-hoja .meta{font-weight:400;color:var(--tenue)}
.titulo-hoja .meta::before{content:"· "}

.tabla{grid-column:9/span 6;grid-row:3/span 8;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.fila{grid-column:1/-1;display:grid;grid-template-columns:subgrid;position:relative}
.fila>*{grid-row:1;display:flex;align-items:center;min-width:0;padding:0 10px;border-right:1px solid var(--rejilla);border-bottom:1px solid var(--rejilla);white-space:nowrap}
.fila .n{grid-column:1;display:none}
.fila .fecha{grid-column:1;color:var(--tenue);font-size:15px;font-variant-numeric:tabular-nums}
.fila .mov{grid-column:2;font-size:16px;overflow:hidden;text-overflow:ellipsis;display:block;line-height:calc(var(--f) - 1px)}
.fila .cartola{grid-column:3;justify-content:flex-end;padding-right:10px;font:400 17px/1 var(--marca);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fila .union{grid-column:4;position:relative;padding:0}
.fila .libro{grid-column:5;padding-left:10px;font:400 17px/1 var(--marca);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fila .estado{grid-column:6;font-size:15px;font-weight:600}
.fila.encabezado .mov{display:flex;line-height:1.4}
.fila.encabezado>span{font:400 14px/1.4 var(--fuente);color:var(--tenue);border-bottom:1px solid var(--carbon);align-items:flex-end;padding-bottom:8px}
.union i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--carbon);transform-origin:0 50%}
.anima .fila:not(.calza) .union i{transform:scaleX(0)}
.anima .fila:not(.calza):not(.encabezado) .estado{color:var(--tenue);font-weight:400}
.anima .fila:not(.calza):not(.encabezado) .estado::before{content:"Pendiente"}
.anima .fila:not(.calza) .estado span{display:none}
.fila .nuevo{color:var(--timbre)}
.anima .fila.falta .libro span{opacity:0}
.fila.activa::after{content:"";grid-column:3/span 3;grid-row:1;border:2px solid var(--carbon);margin:-1px 0 0 -1px;pointer-events:none}

.total{grid-column:9/span 6;grid-row:11/span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:100%;align-items:center;position:relative}
.total .etq{grid-row:1;grid-column:1/span 2;padding:0 10px;display:grid;gap:2px}
.total .etq small{font-size:14px;color:var(--tenue)}
.total .etq span{font-size:16px;font-weight:600}
.total .cifra{grid-row:1;grid-column:3/span 4;justify-self:end;padding:0 12px 6px;font:600 clamp(40px,calc(var(--f) * 1.2),64px)/1 var(--marca);letter-spacing:-.03em;font-variant-numeric:tabular-nums;border-bottom:6px double transparent;transition:border-color .3s}
.total.listo .cifra{border-bottom-color:var(--carbon)}
.total.activa::after{content:"";grid-column:3/span 4;grid-row:1;align-self:stretch;border:2px solid var(--carbon);margin:0 0 0 -1px;pointer-events:none}

.hero-hoja .bajada{grid-column:9/span 6;grid-row:13/span 2;align-self:center;margin:0;padding:0 10px;font-size:18px;line-height:1.45;color:var(--grafito);max-width:36em;text-wrap:pretty}
.hero-hoja .bajada span{background:var(--papel);box-shadow:0 0 0 6px var(--papel);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.acciones{grid-column:9/span 6;grid-row:15;display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0 10px}
.entradas a{font-size:15px;color:var(--grafito);text-underline-offset:4px;background:var(--papel)}

.pestanas{grid-column:2/-1;grid-row:16;display:flex;align-items:stretch;margin:0;padding:0;list-style:none;border-top:1px solid var(--linea);background:var(--banda);z-index:1}
.pestanas a{display:flex;align-items:center;height:100%;padding:0 20px;text-decoration:none;font-size:14px;color:var(--grafito);border-right:1px solid var(--linea)}
.pestanas a[aria-current]{background:var(--hoja);color:var(--carbon);font-weight:600;box-shadow:inset 0 -3px 0 var(--carbon)}
.pestanas a:hover{color:var(--carbon)}

/* ---------- Las hojas siguientes ---------- */
.seccion{padding:var(--seccion) var(--pad);border-top:1px solid var(--linea);scroll-margin-top:12px}
.pestana{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;height:34px;padding:0 16px 0 0;background:var(--hoja);border:1px solid var(--linea);box-shadow:inset 0 -3px 0 var(--carbon);font-weight:600;font-size:14px}
.pestana .n{display:flex;align-items:center;justify-content:center;align-self:stretch;width:34px;background:var(--banda);border-right:1px solid var(--linea);font-weight:400;font-size:14px;color:var(--tenue)}
.seccion-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.seccion-grid.invertida{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.seccion-grid.invertida>.seccion-texto{order:2}
.seccion h2{margin:0 0 22px;font:600 var(--t-h2)/1.02 var(--marca);letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.seccion-texto p{margin:0 0 16px;font-size:18px;line-height:1.55;color:var(--grafito);max-width:32em;text-wrap:pretty}
.seccion-texto p.aparte{margin-top:24px;padding-top:16px;border-top:1px solid var(--linea);font-size:16px;color:var(--tenue)}
.seccion-texto a.mas{display:inline-block;margin-top:8px;font-weight:600;text-underline-offset:4px}

/* La hoja chica: una pantalla real de la app recompuesta en celdas */
.mini{margin:0;background:var(--hoja);border:1px solid var(--linea);box-shadow:0 30px 60px -40px rgba(29,28,26,.35);min-width:0}
.mini-formula{display:grid;grid-template-columns:72px 36px minmax(0,1fr);height:38px;border-bottom:1px solid var(--linea);font-size:14px}
.mini-formula>*{display:flex;align-items:center;min-width:0;padding:0 10px}
.mini-formula .nombre{border-right:1px solid var(--linea);color:var(--grafito);font-variant-numeric:tabular-nums}
.mini-formula .signo{justify-content:center;border-right:1px solid var(--linea);color:var(--tenue);font-style:italic}
.mini-formula .fx{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:36px}
.mini-tabla{min-width:0}
.mini-fila{display:grid;grid-template-columns:var(--cols);min-height:48px;position:relative}
.mini-fila>*{display:flex;align-items:center;min-width:0;padding:6px 12px;border-right:1px solid var(--rejilla);border-bottom:1px solid var(--rejilla)}
.mini-fila>.n{justify-content:center;padding:0;background:var(--banda);border-color:var(--linea);font-size:14px;color:var(--tenue);font-variant-numeric:tabular-nums}
.mini-letras{min-height:24px}
.mini-letras>*{justify-content:center;padding:0;background:var(--banda);border-color:var(--linea);font-size:14px;color:var(--tenue)}
.mini-cab>*{font-size:14px;color:var(--tenue);align-items:flex-end;padding-bottom:8px;border-bottom-color:var(--carbon)}
.mini .der{justify-content:flex-end;text-align:right}
.mini .cifra{font:400 16px/1.1 var(--marca);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mini .fuerte{font-weight:600}
.mini .tenue{color:var(--tenue)}
.mini .falla{color:var(--falla)}
.mini .adv{color:var(--adv)}
.mini .ok{color:var(--ok)}
.mini .timbre{color:var(--timbre)}
.mini-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;font-size:14px;color:var(--grafito);border-top:1px solid var(--linea);background:var(--papel)}
.mini-pie b{color:var(--carbon)}
.sel::after{content:"";position:absolute;inset:-1px;border:2px solid var(--carbon);pointer-events:none;z-index:2}
.mini-fila>.sel,.mini-fila>.marcada{position:relative}
.marcada::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent var(--falla) transparent transparent}

/* Comentario de celda: la explicación de una diferencia */
.nota{position:relative;margin:14px 12px 4px auto;max-width:400px;padding:14px 16px;background:var(--hoja);border:1px solid var(--carbon);font-size:15px;line-height:1.45;box-shadow:0 18px 40px -26px rgba(29,28,26,.5);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nota::before{content:"";position:absolute;right:56px;top:-8px;width:14px;height:14px;background:var(--hoja);border-left:1px solid var(--carbon);border-top:1px solid var(--carbon);transform:rotate(45deg)}
.nota b{display:block;margin-bottom:4px}
.anima .mini:not(.visto) .nota{opacity:0;transform:translateY(-8px)}

/* Símbolo chico: el estado de una conciliación o de un cierre (abierto o cerrado) */
.simbolo{width:24px;height:24px;flex:none;overflow:visible}
.simbolo .c,.simbolo .a{transition:transform .45s var(--ease)}
.simbolo.abierto .c{transform:translate(9px,-9px)}
.simbolo.abierto .a{transform:translate(-9px,9px)}
.estado-c{display:inline-flex;align-items:center;gap:10px}

/* Calces y homologación: la línea que une dos celdas */
.une{position:relative;padding:0!important}
.une i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--carbon);transform-origin:0 50%;transition:transform .5s var(--ease-traza)}
.anima .mini:not(.visto) .une.espera i{transform:scaleX(0)}
.une i{transition-delay:var(--retraso,0s)}
.cambia-antes{display:none}
.anima .mini:not(.visto) .cambia-antes{display:inline}
.anima .mini:not(.visto) .cambia-despues{display:none}
.anima .mini.visto .cambia-despues{animation:aparece .35s var(--ease) both;animation-delay:calc(var(--retraso,0s) + .2s)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.mini-tabla>.mini-fila:nth-child(4){--retraso:.15s}.mini-tabla>.mini-fila:nth-child(5){--retraso:.3s}.mini-tabla>.mini-fila:nth-child(6){--retraso:.45s}
.mini-tabla>.mini-fila:nth-child(7){--retraso:.6s}.mini-tabla>.mini-fila:nth-child(8){--retraso:.75s}
.revision .cerrado-sello .simbolo .c,.revision .cerrado-sello .simbolo .a{transition-delay:1.25s}

/* El cierre con dos firmas */
.firmas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--rejilla)}
.firma{padding:18px 16px;border-right:1px solid var(--rejilla);display:grid;gap:4px}
.firma small{font-size:14px;color:var(--tenue)}
.firma b{font:600 20px/1.2 var(--marca)}
.firma span{font-size:14px;color:var(--grafito)}
.cerrado-sello{display:flex;align-items:center;gap:14px;padding:18px 16px;font:600 22px/1.2 var(--marca)}
.cerrado-sello .simbolo{width:34px;height:34px}
.anima .mini:not(.visto) .cerrado-sello .simbolo .c{transform:translate(12px,-12px)}
.anima .mini:not(.visto) .cerrado-sello .simbolo .a{transform:translate(-12px,12px)}
.cerrado-sello .simbolo .c,.cerrado-sello .simbolo .a{transition-delay:.9s}
.datos{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--carbon)}
.datos li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--linea);font-size:16px;line-height:1.45}
.datos li>span:first-child{font-size:14px;color:var(--tenue);font-variant-numeric:tabular-nums;padding-top:3px}

/* El cierre de la portada */
.final{padding:var(--seccion) var(--pad);border-top:1px solid var(--linea);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.final .sello{width:clamp(120px,16vw,220px);height:auto}
.final h2{margin:0 0 18px;font:600 clamp(56px,8vw,128px)/.95 var(--marca);letter-spacing:-.04em}
.final p{margin:0 0 26px;font-size:18px;color:var(--grafito);max-width:34em}
.final .acciones-final{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.final .acciones-final a.sec{font-size:16px;color:var(--grafito);text-underline-offset:4px}

/* Pie */
.pie{padding:24px var(--pad) 32px;font-size:14px;color:var(--tenue);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--linea)}
.pie p{margin:0}

/* ---------- Página de detalle ---------- */
.detalle-cab{padding:clamp(28px,6vh,80px) var(--pad) clamp(40px,6vh,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:start;border-bottom:1px solid var(--linea)}
.detalle-cab h1{margin:0 0 20px;font:600 clamp(40px,min(5vw,10vh),84px)/.98 var(--marca);letter-spacing:-.035em;text-wrap:balance}
.detalle-cab .bajada{margin:0 0 26px;font-size:19px;line-height:1.5;color:var(--grafito);max-width:32em}
.migas{margin:0 0 18px;font-size:14px;color:var(--tenue)}
.migas a{color:inherit;text-underline-offset:3px}
.pasos{counter-reset:paso}
.paso .pestana .n{font-variant-numeric:tabular-nums}
.limite{margin:0;padding:18px 20px;border-left:4px solid var(--carbon);background:var(--hoja);font-size:16px;line-height:1.5;color:var(--grafito);max-width:40em}
.limite b{color:var(--carbon)}

/* ---------- Anchos ---------- */
@media (max-width:1180px){.cabeza nav a:nth-child(n+3){display:none}}
@media (min-width:861px) and (max-width:1180px){
  .hero-hoja{--lado:min(calc(var(--f) * 13),38vw);--cols:36px repeat(6,calc(var(--lado) / 6)) 20px 52px minmax(0,1fr) minmax(96px,.4fr) minmax(48px,.4fr) minmax(96px,.4fr) 92px 8px}
  .fila .estado{font-size:14px;padding:0 8px}
}
@media (max-width:1100px){
  .seccion-grid,.seccion-grid.invertida,.detalle-cab{grid-template-columns:minmax(0,1fr)}
  .seccion-grid.invertida>.seccion-texto{order:0}
  .seccion h2{max-width:16ch}
}
@media (max-width:860px){
  .hero-hoja{--f:50px;--cols:24px minmax(0,1fr) 94px 34px 94px 6px}
  .cabeza{gap:12px;height:60px}
  .cabeza nav{display:none}
  .cabeza .boton{min-height:40px;padding:0 14px;font-size:14px}
  .menu{display:block}
  .corto{display:inline}.largo{display:none}
  .formula{grid-template-columns:74px 34px minmax(0,1fr);height:36px;font-size:14px}
  .formula>*{padding:0 8px}.formula .fx{line-height:34px}
  .letras span:nth-child(n+6){display:none}
  .hoja{grid-template-rows:none;grid-auto-rows:auto;background:none}
  .v,.gn{display:none}
  .cuadro{grid-column:2/6;grid-row:auto;margin:14px 0 6px;aspect-ratio:1}
  .total{grid-column:2/6;grid-row:auto;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:8px 0 14px}
  .total .etq{padding:0}
  .total .cifra{padding:0 0 4px;font-size:40px;border-bottom-width:5px}
  .total.activa::after{display:none}
  .hero-hoja .acciones{grid-column:2/6;grid-row:auto;padding:0 0 12px}
  .hero-hoja .acciones .llamada{width:100%;min-height:52px;font-size:16px}
  .hero-hoja .bajada{grid-column:2/6;grid-row:auto;padding:4px 0 18px;font-size:17px}
  .titulo-hoja{grid-column:1/-1;grid-row:auto;padding:12px 0 8px 24px;font-size:15px;border-top:1px solid var(--linea)}
  .titulo-hoja .meta{flex-basis:100%}.titulo-hoja .meta::before{content:none}
  .tabla{grid-column:1/-1;grid-row:auto;grid-template-rows:none;grid-auto-rows:minmax(var(--f),auto)}
  .fila .n{display:flex;justify-content:center;padding:0;background:var(--banda);color:var(--tenue);font-size:14px;border-right-color:var(--linea)}
  .fila .fecha,.fila .estado{display:none}
  .fila .mov{white-space:normal;line-height:1.25;display:flex;font-size:15px;padding:6px 8px}
  .fila .cartola,.fila .libro{font-size:14px;padding:0 5px}
  .pestanas{grid-column:1/-1;grid-row:auto;height:44px}
  .pestanas li:nth-child(n+4){display:none}
  .pestanas a{padding:0 14px}
  .cuadro{order:1}.total{order:2}.hero-hoja .acciones{order:3}.hero-hoja .bajada{order:4}.titulo-hoja{order:5}.tabla{order:6}.pestanas{order:7}
  .oc-cel{display:none!important}
  .mini-fila>*{padding:6px 8px;font-size:15px}
  .mini .cifra{font-size:14px}
  .mini-formula{grid-template-columns:56px 30px minmax(0,1fr);font-size:14px}
  .final{grid-template-columns:minmax(0,1fr)}
  .final .sello{width:120px}
  .firmas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.cabeza{gap:8px}.logo img{height:22px}}

/* Columnas de cada hoja chica (en el celular, sin las columnas .oc-cel) */
.t-f29{--cols:36px 64px minmax(0,1fr) 112px 124px 104px}
.t-cartera{--cols:36px minmax(0,1.5fr) 76px minmax(140px,1fr) minmax(0,1fr) 100px}
.t-calces{--cols:36px minmax(0,1fr) minmax(56px,.4fr) minmax(0,1fr) 76px 88px}
.t-homologa{--cols:36px minmax(0,1fr) minmax(64px,.45fr) minmax(0,1fr) 150px}
.mini-fila small{font-size:14px}
.t-revision{--cols:36px minmax(0,.9fr) minmax(0,1.6fr) 124px}
.t-empresas{--cols:36px 120px minmax(0,1.4fr) minmax(0,1fr) 130px}
.t-balance{--cols:36px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.t-pendientes{--cols:36px 124px minmax(0,1fr) 120px 110px}
.t-historial{--cols:36px 130px minmax(0,1fr) 80px}
.detalle-cab .acciones-final{margin:0}
.t-cf29{--cols:36px minmax(0,1.3fr) 150px minmax(0,1fr)}
.t-puntaje{--cols:36px minmax(0,1.4fr) minmax(0,1fr) 80px}
.t-reglas{--cols:36px 130px minmax(0,1fr) 150px}
.t-central{--cols:36px minmax(0,1fr) 110px 150px}
.t-clasificar{--cols:36px minmax(0,1fr) minmax(0,1fr) 110px}
.t-balance8{--cols:36px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.seccion-texto .limite{margin-top:24px}
.t-mes{--cols:36px minmax(0,.9fr) minmax(0,1.5fr) 110px}
.t-fuentes{--cols:36px minmax(0,1fr) minmax(0,1.2fr) 120px}
.t-cadena{--cols:36px 60px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.pasos-lista{margin-top:0}
.pasos-lista li a{font-weight:600;text-underline-offset:3px;white-space:nowrap}
@media (max-width:860px){
  .t-f29{--cols:24px 52px minmax(0,1fr) minmax(0,1fr)}
  .t-cartera{--cols:24px minmax(0,1.3fr) 48px minmax(0,1fr)}
  .t-calces{--cols:24px minmax(0,1fr) 24px minmax(0,1fr) 64px}
  .t-homologa{--cols:24px minmax(0,1fr) 24px minmax(0,1fr)}
  .mini-fila>.n{font-size:14px}
  .t-revision{--cols:24px minmax(0,1fr) 96px}
  .t-empresas{--cols:24px minmax(0,1fr) 112px}
  .t-balance{--cols:24px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
  .t-pendientes{--cols:24px minmax(0,1fr) 96px 80px}
  .t-historial{--cols:24px 104px minmax(0,1fr)}
  .t-cf29{--cols:24px minmax(0,1fr) 120px}
  .t-puntaje{--cols:24px minmax(0,1fr) 64px}
  .t-reglas{--cols:24px minmax(0,1fr) 112px}
  .t-central{--cols:24px minmax(0,1fr) 130px}
  .t-clasificar{--cols:24px minmax(0,1fr) minmax(0,1fr)}
  .t-balance8{--cols:24px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .t-mes{--cols:24px minmax(0,1fr) 96px}
  .t-fuentes{--cols:24px minmax(0,1fr) 100px}
  .t-cadena{--cols:24px 48px minmax(0,1fr)}
}

/* Segundo momento (hoja del F29): la diferencia se acepta con una nota, firman los dos y el símbolo se cierra.
   Sin JavaScript o con movimiento reducido se ve el estado final. */
.paso-antes{display:none}
.anima .mini[data-pasos]:not(.paso2) .paso-antes{display:inline}
.anima .mini[data-pasos]:not(.paso2) .paso-despues{display:none}
.anima .mini.paso2 .paso-despues{animation:aparece .4s var(--ease) both}
.dif-aceptada{color:var(--carbon)}
.anima .mini[data-pasos]:not(.paso2) .dif-aceptada{color:var(--falla)}
.dif-aceptada small{font:600 14px/1 var(--fuente);color:var(--grafito)}
.anima .mini.paso2 .simbolo.cierra .c{animation:cierra-c .5s var(--ease) .35s both}
.anima .mini.paso2 .simbolo.cierra .a{animation:cierra-a .5s var(--ease) .35s both}
@keyframes cierra-c{from{transform:translate(9px,-9px)}to{transform:none}}
@keyframes cierra-a{from{transform:translate(-9px,9px)}to{transform:none}}

/* Formulario como hoja: cada campo es una fila; la etiqueta en la columna A y la celda en la B */
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tenue-texto{margin:18px 0 0;font-size:15px;color:var(--tenue);max-width:30em}
.hoja-form{--cols:36px minmax(120px,.8fr) minmax(0,1.6fr)}
.hoja-form .campo>label{font-size:15px;color:var(--grafito);align-items:center}
.hoja-form .campo>label small{font-size:14px;color:var(--tenue);margin-left:4px}
.hoja-form .campo>span:not(.n){padding:0}
.hoja-form input,.hoja-form select,.hoja-form textarea{width:100%;height:100%;min-height:47px;border:0;background:transparent;padding:10px 12px;font:400 16px/1.4 var(--fuente);color:var(--carbon);border-radius:0}
.hoja-form textarea{resize:vertical;min-height:96px}
.hoja-form input:focus-visible,.hoja-form select:focus-visible,.hoja-form textarea:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px;background:var(--hoja)}
.hoja-form .acepto label{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--grafito)}
.hoja-form .acepto input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none;accent-color:var(--carbon)}
.hoja-form .enviar{border-top:0;justify-content:flex-end}
.hoja-form button.llamada{border:0;cursor:pointer;font-family:var(--fuente)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hoja-form{position:relative}
.titulo-final{margin:0 0 18px;font:600 clamp(44px,6vw,92px)/.98 var(--marca);letter-spacing:-.035em}

/* Página legal: una columna de lectura */
.legal{max-width:760px;padding:clamp(28px,6vh,72px) var(--pad) var(--seccion)}
.legal h1{margin:0 0 18px;font:600 clamp(40px,5vw,72px)/1 var(--marca);letter-spacing:-.03em}
.legal .bajada{margin:0 0 22px;font-size:19px;line-height:1.5;color:var(--grafito)}
.legal h2{margin:44px 0 12px;font:600 26px/1.15 var(--marca);letter-spacing:-.02em;scroll-margin-top:12px}
.legal p{font-size:17px;line-height:1.6;color:var(--grafito);margin:0 0 14px}
.legal .limite{margin:22px 0 8px}
.pie a{color:inherit;text-underline-offset:3px}
@media (max-width:860px){.hoja-form{--cols:24px minmax(0,1fr)}.hoja-form .campo{grid-template-columns:24px minmax(0,1fr)}.hoja-form .campo>label{grid-column:2;padding:10px 8px 0;border-bottom:0}.hoja-form .campo>span:not(.n){grid-column:2;grid-row:2}.hoja-form .campo>.n{grid-column:1;grid-row:1/span 2}.hoja-form .mini-letras>span:nth-child(3){display:none}}

/* Planos distintos (D32-A): no más de dos secciones seguidas con titular a un lado y planilla al otro */
.a-sangre>h2,.declaracion>h2{max-width:none}
.a-sangre>h2{font-size:clamp(40px,5.4vw,88px);max-width:18ch}
.a-sangre .dos-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 56px;margin:0 0 36px;max-width:1100px}
.a-sangre .dos-columnas p{max-width:none}
.a-sangre>.mini .mini-fila{min-height:60px}
.a-sangre>.mini .mini-fila>*:not(.n){font-size:17px}
.a-sangre>.mini .cifra{font-size:18px}
.a-sangre>.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--carbon)}
.a-sangre>.datos li{border-bottom:1px solid var(--linea)}
.declaracion>h2{font-size:clamp(52px,8.4vw,136px);line-height:.94;letter-spacing:-.04em;max-width:13ch;margin-bottom:44px}
.declaracion-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:start}
.declaracion-grid>.datos{margin-top:0}
@media (max-width:1100px){.a-sangre .dos-columnas,.declaracion-grid{grid-template-columns:minmax(0,1fr)}.a-sangre>.datos{grid-template-columns:minmax(0,1fr)}}

/* La cita del piloto (D32-A): una sola, real y con permiso */
.cita{padding:var(--seccion) var(--pad);border-top:1px solid var(--linea);display:grid;gap:22px;max-width:1240px}
.cita blockquote{margin:0}
.cita blockquote p{margin:0;font:600 clamp(32px,4.2vw,64px)/1.08 var(--marca);letter-spacing:-.03em;text-wrap:balance}
.cita blockquote p::before{content:"«"}.cita blockquote p::after{content:"»"}
.cita-quien{margin:0;font-size:17px;color:var(--grafito)}
.cita-quien b{color:var(--carbon)}

/* Fotos (D34-A): la escuadra del logo hecha objeto real. Cada una lleva «Imagen ilustrativa». */
.foto{position:relative;margin:0;overflow:hidden;background:var(--banda)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto .rotulo{position:absolute;right:12px;bottom:12px}
/* El cierre de cada página: el cuadrado de verdad, a sangre, con el titular sobre la hoja libre del libro. */
.final.con-foto{position:relative;display:flex;align-items:center;padding:0;min-height:clamp(480px,46vw,760px)}
.final.con-foto>.foto{position:absolute;inset:0}
.final.con-foto>.foto img{object-position:62% 50%}
.final.con-foto>div{position:relative;width:min(48%,680px);padding:var(--seccion) 0 var(--seccion) max(var(--pad),6vw)}
/* «Cierre de mes» de la portada: el escritorio al terminar el día, con el titular sobre la pared. */
.con-banda{padding-top:0}
.banda{position:relative;display:flex;align-items:center;margin:0 calc(-1 * var(--pad)) clamp(36px,5vw,72px);min-height:clamp(440px,44vw,700px)}
.banda>.foto{position:absolute;inset:0}
.banda>.foto img{object-position:60% 50%}
.banda-texto{position:relative;width:min(50%,720px);padding:var(--seccion) 0 var(--seccion) var(--pad)}
.banda-texto .pestana{margin-bottom:24px}
.con-banda .banda-texto h2{margin:0;font-size:clamp(44px,5.8vw,96px);line-height:.96;letter-spacing:-.04em;max-width:11ch}
/* «Trae tu contabilidad como está»: los libros de antes, con la escuadra encima. */
.foto-libros{margin-top:32px;aspect-ratio:4/3;max-width:560px}
.foto-libros img{object-position:50% 74%}
@media (max-width:860px){
  .final.con-foto{display:block;min-height:0}
  .final.con-foto>.foto{position:relative;aspect-ratio:16/11}
  .final.con-foto>.foto img{object-position:80% 50%}
  .final.con-foto>div{width:auto;padding:32px var(--pad) var(--seccion)}
  .banda{display:block;min-height:0}
  .banda>.foto{position:relative;aspect-ratio:4/3}
  .banda>.foto img{object-position:72% 50%}
  .banda-texto{width:auto;padding:28px var(--pad) 0}
}

/* D37 · La planilla viva (js/vivo.js). Solo con movimiento: html.vivo lo pone el script, así que sin JavaScript o
   con «reducir movimiento» todo está a la vista desde el principio. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.w>span{display:inline-block}
.vivo :is(h1,h2):not(.entra) .w>span{transform:translateY(112%)}
.vivo :is(h1,h2) .w>span{transition:transform .85s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 60ms)}
/* Cada hoja entra con un poco de profundidad y sus filas caen en cascada. */
.vivo .mini{transition:opacity .6s var(--ease),transform 1s cubic-bezier(.2,.75,.15,1)}
.vivo .mini:not(.entra){opacity:0;transform:perspective(1400px) rotateX(10deg) translateY(36px) scale(.97)}
.vivo .mini .mini-fila:not(.mini-letras){transition:opacity .45s var(--ease),transform .6s cubic-bezier(.2,.75,.15,1);transition-delay:calc(.15s + var(--k,0) * 70ms)}
.vivo .mini:not(.entra) .mini-fila:not(.mini-letras){opacity:0;transform:translateY(14px)}
.vivo .mini .mini-formula .fx{transition:clip-path .9s steps(28) .1s}
.vivo .mini:not(.entra) .mini-formula .fx{clip-path:inset(0 100% 0 0)}
/* Textos, pestañas y listas: suben y aparecen. */
.vivo :is(.pestana,.seccion-texto,.dos-columnas,.datos,.final .acciones-final){transition:opacity .7s var(--ease) .1s,transform .8s cubic-bezier(.2,.75,.15,1) .1s}
.vivo :is(.pestana,.seccion-texto,.dos-columnas,.datos,.final .acciones-final):not(.entra){opacity:0;transform:translateY(22px)}
/* Las fotos se abren en diagonal, como la línea entre las dos piezas del logo, y derivan un poco al bajar. */
.vivo .foto img{transition:clip-path 1.25s cubic-bezier(.65,0,.35,1),transform 1.8s cubic-bezier(.2,.75,.15,1)}
.vivo .foto:not(.entra) img{clip-path:polygon(0 0,0 0,0 0);transform:scale(1.16)}
.vivo .foto.entra img{clip-path:polygon(0 0,200% 0,0 200%);transform:scale(1.06)}
.vivo .foto .rotulo{transition:opacity .4s 1s}
.vivo .foto:not(.entra) .rotulo{opacity:0}
@supports (animation-timeline:view()){
  .vivo :is(.banda,.final) .foto.entra img{animation:deriva linear both;animation-timeline:view()}
  @keyframes deriva{from{translate:0 -3.5%}to{translate:0 3.5%}}
}
/* Las filas responden al puntero, como en una planilla. */
.mini .mini-fila:not(.mini-letras):not(.mini-cab)>*:not(.n){transition:background-color .2s}
.mini .mini-fila:not(.mini-letras):not(.mini-cab):hover>*:not(.n){background:var(--banda)}
/* El hero se dibuja al cargar: las columnas bajan, los números de fila y las filas aparecen. */
.anima .hoja>.v{animation:traza .8s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--c,0) * 35ms);transform-origin:top}
.anima .hoja>.gn{animation:asoma .4s var(--ease) both;animation-delay:calc(var(--c,0) * 30ms)}
.anima #tabla .fila{animation:asoma .45s var(--ease) both;animation-delay:calc(.15s + var(--c,0) * 45ms)}
@keyframes traza{from{transform:scaleY(0)}to{transform:none}}
@keyframes asoma{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Mejoras (14-10-2026, el dueño: «más uso de color, animaciones, transiciones»). El ámbar sale del logo y marca lo que
   la escuadra toca: la celda activa, el calce trazado, la pestaña. Las secciones a sangre pasan a carbón. */
.fila.activa::after,.total.activa::after,.sel::after{border-color:var(--ambar);border-width:3px}
.letras span.activa,.n.activa,.gn.activa{background:#f8dc9f;color:var(--carbon)}
.union i,.une i{background:var(--ambar);height:3px;margin-top:-1.5px}
.pestana{box-shadow:inset 0 -3px 0 var(--ambar)}
.seccion-texto a.mas,.pasos-lista li a{text-decoration-color:var(--ambar);text-decoration-thickness:2px}
.celda-viva{outline:3px solid var(--ambar);outline-offset:-2px}
/* A sangre = carbón: la hoja clara queda como bajo un foco. */
.a-sangre{background:var(--carbon);color:var(--papel);border-top-color:var(--carbon)}
.a-sangre>h2{color:var(--papel)}
.a-sangre .seccion-texto p,.a-sangre .dos-columnas p{color:#d9d1c2}
.a-sangre .pestana{background:#2b2a27;border-color:#3d3b37;color:var(--papel)}
.a-sangre .pestana .n{background:#34322e;border-color:#3d3b37;color:#c9c1b2}
.a-sangre .limite{background:#2b2a27;border-left-color:var(--ambar);color:#d9d1c2}
.a-sangre .limite b{color:var(--papel)}
.a-sangre>.datos{border-top-color:var(--ambar)}
.a-sangre>.datos li{border-bottom-color:#3d3b37;color:#e6dfd2}
.a-sangre>.datos li>span:first-child{color:#bdb5a6}
.a-sangre>.datos li b{color:var(--papel)}
.a-sangre a{color:var(--papel)}
.a-sangre .mini{box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.a-sangre .rotulo{background:#2b2a27;border-color:#3d3b37;color:#d9d1c2}

/* Transición entre páginas: la página nueva entra en diagonal, por la línea del logo; la barra y la fórmula quedan. */
@view-transition{navigation:auto}
.cabeza{view-transition-name:cabeza}
::view-transition-old(root){animation:.5s cubic-bezier(.65,0,.35,1) both vt-sale}
::view-transition-new(root){animation:.62s cubic-bezier(.65,0,.35,1) both vt-entra}
@keyframes vt-entra{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,200% 0,0 200%)}}
@keyframes vt-sale{to{opacity:.55;transform:scale(.985)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* La hoja clara dentro de la sección oscura vuelve a la tinta de siempre. */
.a-sangre .mini{color:var(--texto)}
.a-sangre .mini a{color:inherit}
.a-sangre .mini .rotulo{background:var(--papel);border-color:var(--linea);color:var(--grafito)}