/* ════════════════════════════════════════════════════════════
   sitio.css · la hoja compartida de las páginas de contenido de www
   ════════════════════════════════════════════════════════════
   Desde el 2026-10-06 www.gastosobra.com es multipágina: guías, la planilla,
   la comparativa con Excel… Cada página se copia de _plantilla.html y usa ESTA
   hoja. La home (index.html) NO la usa a propósito: conserva su CSS inline
   porque su LCP es el texto del hero y una hoja externa más lo demora.

   QUÉ HAY ACÁ, en este orden:
     1 · tipografías autohospedadas (las MISMAS @font-face que la home)
     2 · tokens de diseño y base (los MISMOS valores que la home)
     3 · cabecera, botones y pie (calcados de la home)
     4 · contenido largo: cabeza del artículo, migas, índice, prosa, tablas,
         llamadas a la acción, recuadros, pasos
   Si cambia un token o una @font-face en la home, se cambia acá en el mismo
   commit: son dos copias del mismo diseño (la home no puede importar esta hoja
   sin perder el CSS inline que la hace rápida).

   Dos trampas medidas en la home que esta hoja NO repite:
     · la cabecera y el hero de la home pisan el padding lateral de .wrap (en
       un celular el texto toca el borde de la pantalla). Acá .wrap manda.
     · un .sr (position:absolute) dentro de una tabla con scroll horizontal se
       escapa del overflow si el contenedor no está posicionado, y estira la
       página entera (en la home la estiraba a 560 px en un celular de 390).
       Por eso .tabla-wrap lleva position:relative.
   ════════════════════════════════════════════════════════════ */

/* ── 1 · Tipografías ───────────────────────────────────────────────────────
   Archivo: un archivo variable, subset latin, ejes recortados a wdth 100..110
   y wght 400..900 (fontTools). IBM Plex Mono 400/500/600, subset latin.
   Licencia OFL: fuentes/OFL-*.txt. Los RESPALDO ajustan las métricas de Arial
   y Courier New para que el cambio de tipografía no mueva el layout (los
   números están medidos y explicados en el <style> de index.html).
   ⚠️ La url de Archivo tiene que ser IDÉNTICA al href del preload de cada
   página («/fuentes/archivo-var-latin.woff2»): check.mjs lo compara. */
@font-face{font-family:'Archivo';src:url(/fuentes/archivo-var-latin.woff2) format('woff2');font-weight:400 900;font-stretch:100% 110%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fuentes/ibm-plex-mono-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fuentes/ibm-plex-mono-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fuentes/ibm-plex-mono-600-latin.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Respaldo';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:98%;ascent-override:89.6%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:'Archivo Respaldo';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:95.2%;ascent-override:92.2%;descent-override:22.1%;line-gap-override:0%}
@font-face{font-family:'Archivo Respaldo';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:98.3%;ascent-override:89.3%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:'Archivo Respaldo';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:109.1%;ascent-override:80.5%;descent-override:19.2%;line-gap-override:0%}
@font-face{font-family:'Archivo Respaldo';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:900;size-adjust:116.5%;ascent-override:75.4%;descent-override:18%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Respaldo';src:local('Courier New'),local('CourierNewPSMT');font-weight:400;size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Respaldo';src:local('Courier New Bold'),local('CourierNewPS-BoldMT');font-weight:600;size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}

/* ── 2 · Tokens y base ─────────────────────────────────────────────────── */
:root{
  --hormigon:#E9E8E4;
  --hormigon-claro:#F4F3F0;
  --papel:#FBFAF6;
  --tinta:#1C1B18;
  --tinta-suave:#55534D;
  --linea:#CFCCC4;
  --naranja:#E8540C;
  --verde:#1F7A4D;
  --verde-claro:#E4F0E9;
  --whatsapp:#1FAF5E;
  --ambar:#7A5B00;
  --ambar-claro:#FFF3C4;
  --sans:'Archivo','Archivo Respaldo',sans-serif;
  --mono:'IBM Plex Mono','Plex Mono Respaldo',monospace;
  --prosa:70ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-variation-settings:'wdth' 100;
  background:var(--hormigon);
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--tinta)}
.mono{font-family:var(--mono)}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

/* ── 3 · Cabecera ──────────────────────────────────────────────────────── */
body > header{
  border-bottom:1px solid var(--linea);
  background:var(--hormigon);
  position:sticky;top:0;z-index:50;
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.wordmark{
  font-weight:900;font-size:1.25rem;letter-spacing:-0.02em;
  text-decoration:none;color:var(--tinta);
  font-variation-settings:'wdth' 110;
}
.wordmark span{color:var(--naranja)}
.header-actions{display:flex;align-items:center;gap:10px}
.header-link,.header-login{
  font-family:var(--mono);font-size:0.78rem;font-weight:600;
  text-decoration:none;color:var(--tinta-suave);padding:8px 4px;
}
.header-link:hover,.header-login:hover{color:var(--naranja)}
.header-cta{
  font-family:var(--mono);font-size:0.78rem;font-weight:600;
  text-decoration:none;color:var(--tinta);white-space:nowrap;
  border:1.5px solid var(--tinta);border-radius:4px;
  padding:8px 14px;transition:background .15s,color .15s;
}
.header-cta:hover{background:var(--tinta);color:var(--hormigon)}

/* Botones */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--naranja);color:#fff;font-weight:700;font-size:17px;
  padding:16px 28px;border-radius:10px;text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{
  font-family:var(--mono);font-size:0.85rem;font-weight:600;
  color:var(--tinta);text-decoration:none;
  border-bottom:2px solid var(--naranja);padding-bottom:2px;
}
.acciones{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Volanta (la línea naranja en mayúsculas sobre los títulos) */
.eyebrow,.sec-label{
  font-family:var(--mono);
  font-size:0.72rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--naranja);
}

/* ── 4 · Contenido largo ───────────────────────────────────────────────── */

/* Migas de pan visibles (el JSON-LD BreadcrumbList dice lo mismo) */
.migas{padding-top:18px;font-family:var(--mono);font-size:0.75rem;color:var(--tinta-suave)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0}
.migas li+li::before{content:'/';margin:0 8px;opacity:.5}
.migas a{color:var(--tinta-suave)}
.migas [aria-current]{color:var(--tinta)}

/* Cabeza del artículo: volanta + h1 + bajada */
.articulo-cabeza{padding:34px 0 8px}
.articulo-cabeza .eyebrow{margin-bottom:16px}
h1{
  font-weight:900;font-variation-settings:'wdth' 108;
  font-size:clamp(2rem,5.4vw,3rem);
  line-height:1.06;letter-spacing:-0.025em;
  max-width:22ch;
}
h1 em{font-style:normal;color:var(--naranja)}
.bajada{margin-top:18px;font-size:1.1rem;color:var(--tinta-suave);max-width:58ch}
.bajada strong{color:var(--tinta);font-weight:600}

/* Índice («En esta página») */
.indice{
  margin:30px 0 0;max-width:var(--prosa);
  background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:18px 22px;
}
.indice-titulo{font-family:var(--mono);font-size:0.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:8px}
.indice ol{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.indice a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea)}
.indice a:hover{border-bottom-color:var(--naranja)}

/* La respuesta corta, ARRIBA del índice (2026-10-12): es lo que un buscador o
   una IA toma como respuesta directa. Pasos numerados, como la pregunta pide. */
.respuesta-corta{
  margin:26px 0 0;max-width:var(--prosa);
  background:var(--papel);border-left:3px solid var(--naranja);border-radius:0 12px 12px 0;padding:16px 22px;
}
.respuesta-corta > * + *{margin-top:10px}
.respuesta-corta p,.respuesta-corta li{font-size:1.04rem}
.respuesta-corta strong{font-weight:700}
.respuesta-corta ol{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.respuesta-corta li::marker{color:var(--naranja);font-weight:700}

/* Prosa: el cuerpo del artículo, a ~70 caracteres por línea */
.prosa{max-width:var(--prosa);padding:10px 0 40px}
.prosa > * + *{margin-top:16px}
.prosa h2{
  margin-top:48px;scroll-margin-top:80px;
  font-weight:800;font-variation-settings:'wdth' 106;
  font-size:clamp(1.45rem,3.6vw,1.95rem);letter-spacing:-0.02em;line-height:1.18;
}
.prosa h3{margin-top:30px;scroll-margin-top:80px;font-size:1.15rem;font-weight:700;line-height:1.3}
.prosa h2 + *,.prosa h3 + *{margin-top:12px}
.prosa p,.prosa li{font-size:1.04rem}
.prosa ul,.prosa ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.prosa li::marker{color:var(--naranja);font-weight:700}
.prosa a{font-weight:600;text-decoration-color:var(--naranja);text-decoration-thickness:2px;text-underline-offset:3px}
.prosa strong{font-weight:700}
.prosa blockquote{padding-left:18px;border-left:3px solid var(--naranja);color:var(--tinta-suave)}
.prosa hr{border:0;border-top:1px dashed var(--linea);margin:36px 0}
.prosa figure figcaption{margin-top:8px;font-family:var(--mono);font-size:0.75rem;color:var(--tinta-suave)}
.prosa code{font-family:var(--mono);font-size:.9em;background:var(--hormigon-claro);border-radius:3px;padding:1px 5px}

/* Lista con tildes (como «El servicio» de la home) */
.lista-check{list-style:none;padding-left:0 !important}
.lista-check li{padding-left:30px;position:relative}
.lista-check li::before{content:'✓';position:absolute;left:0;top:0;font-family:var(--mono);font-weight:600;color:var(--verde)}
/* …y su contracara honesta: lo que NO hace */
.lista-no{list-style:none;padding-left:0 !important}
.lista-no li{padding-left:30px;position:relative}
.lista-no li::before{content:'✗';position:absolute;left:0;top:0;font-family:var(--mono);font-weight:600;color:var(--tinta-suave)}

/* Pasos numerados */
.pasos{list-style:none;padding-left:0 !important;counter-reset:paso;gap:0 !important}
.pasos > li{counter-increment:paso;display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 0;border-bottom:1px dashed var(--linea)}
.pasos > li:last-child{border-bottom:none}
.pasos > li::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--mono);font-weight:600;font-size:0.8rem;color:var(--naranja);
  border:1.5px solid var(--naranja);border-radius:4px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}

/* Tablas: SIEMPRE dentro de .tabla-wrap. En pantalla ancha, una tabla; en un
   celular (≤ 560 px) cada fila se apila como TARJETA, con el encabezado de
   fila como título y cada celda con su rótulo (data-label, el texto de su
   columna: check.mjs § 15 lo compara). Hasta el 2026-10-06 la tabla scrolleaba
   de costado y, a 390 px, la columna que llevaba el argumento («Con
   GastosObra», «Saldo») quedaba fuera de la vista sin ningún indicio.
   position:relative es obligatorio: ver la cabecera de esta hoja. */
.tabla-wrap{position:relative;overflow-x:auto;background:var(--papel);border:1px solid var(--linea);border-radius:12px}
.tabla-wrap table{width:100%;border-collapse:collapse;font-size:0.96rem;min-width:520px}
.tabla-wrap th{text-align:left;font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:bottom}
/* El encabezado de FILA va arriba, como las celdas: con el vertical-align:bottom
   del encabezado de columna, una fila con una celda en dos renglones dejaba el
   nombre del rubro corrido para abajo (medido en una captura a 390 px). */
.tabla-wrap th[scope="row"]{font-size:0.96rem;letter-spacing:0;text-transform:none;color:var(--tinta);font-weight:600;vertical-align:top}
.tabla-wrap td{padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-wrap tbody tr:last-child td,.tabla-wrap tbody tr:last-child th{border-bottom:none}
.tabla-wrap td.si{color:var(--verde);font-weight:700}
.tabla-wrap td.no{color:var(--tinta-suave)}
.tabla-wrap .destacada{background:var(--verde-claro)}
.tabla-nota,.prosa .tabla-nota{margin-top:8px;font-family:var(--mono);font-size:0.75rem;color:var(--tinta-suave)}
@media (max-width:560px){
  .tabla-wrap{overflow-x:visible;background:none;border:0;border-radius:0}
  .tabla-wrap table{min-width:0;display:block;font-size:0.98rem}
  .tabla-wrap thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tabla-wrap tbody{display:flex;flex-direction:column;gap:10px}
  .tabla-wrap tr{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:12px 16px}
  .tabla-wrap tr.destacada{background:var(--verde-claro)}
  /* El encabezado de fila es el título de la tarjeta, aunque en la tabla vaya
     en otra columna (en el extracto de la cuenta corriente va segundo). */
  .tabla-wrap th[scope="row"]{order:-1;padding:0 0 6px;border:0;font-size:1rem}
  .tabla-wrap td{padding:7px 0 0;border:0}
  .tabla-wrap td + td,.tabla-wrap th + td{border-top:1px dashed var(--linea);margin-top:7px}
  .tabla-wrap td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-family:var(--mono);font-size:0.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);
  }
  .tabla-wrap tbody tr:last-child td,.tabla-wrap tbody tr:last-child th{border-bottom:0}
}

/* Capturas de pantalla anchas (la planilla): scroll propio, como una tabla.
   En un celular se sirve un recorte angosto con lo que dice el pie de foto
   (<picture> con media=(max-width:560px)), así que no hace falta scrollear. */
.captura-wrap{position:relative;overflow-x:auto;background:var(--papel);border:1px solid var(--linea);border-radius:12px}
.captura-wrap img{min-width:560px}
@media (max-width:560px){
  .captura-wrap{overflow-x:visible}
  .captura-wrap img{min-width:0;width:100%}
}

/* Recuadros: advertencia (ámbar) y nota (neutro) */
.aviso,.nota{border-radius:12px;padding:16px 18px 16px 20px;font-size:0.98rem}
.aviso{background:var(--ambar-claro);border:1px solid #E2C766;border-left:4px solid #C9A227;color:#3D2E00}
.nota{background:var(--hormigon-claro);border:1px solid var(--linea);border-left:4px solid var(--tinta-suave)}
.aviso strong,.nota strong{font-weight:700}
.aviso-titulo{display:block;font-family:var(--mono);font-size:0.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}

/* Llamada a la acción: .cta (intermedia, dentro de la prosa) y .cta-final
   (al pie del artículo, oscura como el «Caso real» de la home). */
.cta{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:22px 24px}
.prosa .cta{margin-top:30px;margin-bottom:6px}
.cta p{margin-top:8px;color:var(--tinta-suave)}
/* Con la especificidad de «.cta p» y «.prosa p», o el título sale gris y la
   nota sale del tamaño del cuerpo (medido en las capturas de la plantilla). */
.cta .cta-titulo,.prosa .cta-titulo{margin-top:0;color:var(--tinta);font-weight:800;font-size:1.2rem;line-height:1.25;font-variation-settings:'wdth' 104}
.cta .acciones{margin-top:16px}
.cta-nota,.prosa .cta-nota,.cta .cta-nota{margin-top:12px;font-family:var(--mono);font-size:0.75rem;color:var(--tinta-suave)}
.cta-final{background:var(--tinta);color:var(--hormigon);padding:56px 0;margin-top:20px}
.cta-final .sec-label{margin-bottom:12px}
.cta-final h2{
  color:#fff;max-width:24ch;
  font-weight:800;font-variation-settings:'wdth' 106;
  font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:-0.02em;line-height:1.15;
}
.cta-final p{margin-top:14px;color:#B8B5AD;max-width:58ch}
.cta-final .acciones{margin-top:24px}
.cta-final .btn-ghost{color:#fff}
.cta-final .cta-nota{color:#B8B5AD}
.cta-final a:not(.btn-primary):not(.btn-ghost){color:#fff}

/* Archivo para bajar (la planilla): nombre, formato y peso a la vista */
.descarga{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.descarga-meta{font-family:var(--mono);font-size:0.75rem;color:var(--tinta-suave)}
/* …y, al lado, el puente a la prueba (fuera del bloque .descarga: check.mjs
   § 3c exige un solo link adentro, el del archivo). */
.descarga-puente{margin-top:16px;max-width:58ch;color:var(--tinta-suave)}
.descarga-puente a{font-weight:700;color:var(--tinta);text-decoration-color:var(--naranja);text-decoration-thickness:2px;text-underline-offset:3px}

/* Llamada corta de una línea, antes de una tabla larga (la llamada completa,
   .cta, va después). */
.prosa .cta-corto{padding:12px 16px;background:var(--papel);border-left:4px solid var(--naranja);border-radius:0 10px 10px 0;font-weight:600}

/* ── Pie ───────────────────────────────────────────────────────────────── */
body > footer{
  border-top:1px solid var(--linea);padding:26px 0 30px;
  font-family:var(--mono);font-size:0.72rem;color:var(--tinta-suave);
}
.footer-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}
.footer-in a{color:inherit}
.footer-in .sep{opacity:.45;margin:0 7px}
.footer-nota{opacity:.7}
.footer-recursos{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-bottom:14px;border-bottom:1px dashed var(--linea)}
.footer-titulo{flex-basis:100%;font-weight:600;color:var(--tinta)}

/* Botón flotante de WhatsApp (consultas ANTES de crear la cuenta) en celular */
.wa-float{
  display:none;position:fixed;right:16px;bottom:16px;z-index:60;
  width:56px;height:56px;border-radius:50%;background:var(--whatsapp);
  align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-primary,.header-cta{transition:none}
}
@media (max-width:720px){
  .articulo-cabeza{padding-top:24px}
  .wa-float{display:flex}
  .cta-final{padding:44px 0}
  /* El botón flotante (56 px a 16 del borde) tapaba el último link del pie
     («Ya tengo cuenta»), y al final de la página no hay scroll para destaparlo. */
  body > footer{padding-bottom:88px}
}
/* En 390 px no entran logo + Precios + Ingresar + el CTA: «Precios» se va
   (queda en el pie y en cada llamada a la acción). */
@media (max-width:460px){
  .header-link{display:none}
  .header-actions{gap:6px}
  .header-cta{padding:8px 10px}
}
/* Y debajo de ~385 px tampoco entra «Ingresar»: la cabecera medía 361 px y
   desbordaba la página a 360 y 320 (scroll de costado, y a 320 el CTA cortado
   en «Probar gr»). «Ya tengo cuenta» sigue en el pie. Lo mide render.mjs a
   320, 360, 375 y 390 px. */
@media (max-width:385px){
  .header-login{display:none}
}