/* HOJA COMPARTIDA DE LAS PÁGINAS DE COMPARACIÓN Y MIGRACIÓN (2026-09-03)
   ─────────────────────────────────────────────────────────────────────
   La usan `/vs/ticofactura` y `/migrar-de-ticofactura`.

   🔴 DE DÓNDE SALE: NO se inventó una estética nueva. Todo lo de acá está
   TRANSCRITO del `<style>` de `facturacion.html` (la landing aprobada), que a
   su vez transcribe los colores de `estilo.css:44-70`. Mismos tokens, mismas
   pilas tipográficas, mismos botones, mismo encabezado pegajoso, mismo
   colofón. Si un día cambia el diseño de la landing, esta hoja se actualiza
   contra ella, no contra el gusto de quien la toque.

   POR QUÉ ES UN ARCHIVO Y NO UN `<style>` EN CADA PÁGINA: son DOS páginas
   hermanas y el mismo bloque copiado dos veces se desincroniza solo. Además
   es el camino que ya tomó esta casa el 2026-08-31 cuando sacó las 12 caras
   de adentro de `fuentes.css`: hoja aparte, cacheable, una sola copia.

   ⚠️ LAS TIPOGRAFÍAS NO VAN ACÁ. Vienen de `/fuentes.css`, que ya sirve las
   12 caras como `.woff2` desde `/assets/fuentes/`. La landing todavía las
   lleva embebidas en base64 (260 KB); estas páginas NO repiten eso a
   propósito. Es el mismo diseño con un tercio del peso.

   LO ÚNICO QUE NO ESTABA EN LA LANDING es la tabla comparativa (`.comp`) y
   el bloque de fuentes citadas (`.fuentes`). Están construidas con los mismos
   tokens y el mismo vocabulario visual —filete, línea punteada, rótulo mono,
   sin esquinas redondeadas— para que no se noten de otra casa.           */

:root{
  /* ── papel y tinta — transcritos de front-nuevo/estilo.css:44-70 ── */
  --paper:#F4F0E6; --paper-2:#EBE5D7; --paper-3:#E4DCC8;
  --ink:#182233; --ink-2:#414A5C; --graphite:#6B6453;
  --rule:#C6BCA2; --rule-2:#D6CDB6;
  --stamp:#9C2A21; --seal:#27436E; --gold:#7F611B; --green:#3E6349;
  /* riel oscuro (índice de la app) */
  --rail:#141C2A; --rail-2:#1B2536; --rail-txt:#D2D8E3; --rail-on:#F6F3EA;
  --rail-dim:#838C9E; --rail-line:#2A3446; --rail-borde:#39445A;
  /* pilas — las mismas del facturero */
  --serif:'ColonCR','Spectral',Georgia,'Times New Roman',serif;
  --sc:'ColonCR','Spectral SC','Spectral',serif;
  --mono:'ColonCR','Anonymous Pro',ui-monospace,Menlo,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
/* `overflow-x:clip` y NO `hidden`: `hidden` convierte a <html> en contenedor
   de scroll y mata el `position:sticky` del encabezado. Es la lección del
   2026-08-13 en la landing; se repite acá por el mismo motivo. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  overflow-x:hidden;overflow-x:clip;
  scroll-padding-top:82px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.55;
  overflow-x:hidden;overflow-x:clip;max-width:100%;
  background-image:linear-gradient(var(--paper-2) .5px,transparent .5px);
  background-size:100% 34px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;overflow-wrap:break-word}

/* rótulos y filetes que definen la casa */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin:0}
.kicker{font-family:var(--sc);font-size:15px;letter-spacing:.18em;color:var(--graphite)}
.regla{height:3px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:0}
.filete{height:1px;background:var(--ink);opacity:.85}

/* marca */
.marca{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1;white-space:nowrap}
.giro{display:inline-block;transform-origin:50% 50%;font-weight:inherit}
@keyframes giro-logo{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
a.marca:active .giro{animation:giro-logo .7s cubic-bezier(.45,0,.35,1)}
@media (prefers-reduced-motion:reduce){
  a.marca:active .giro{animation:none;opacity:.45;transition:opacity .18s}
}
.marca .p{color:var(--stamp)}

/* botones — Spectral SC, esquinas de documento (sin redondear) */
.btn{display:inline-block;font-family:var(--sc);letter-spacing:.08em;font-size:16px;
  padding:12px 22px;border:1px solid transparent;cursor:pointer;text-align:center;line-height:1.1}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:#0B1220;border-color:#0B1220}
.btn-red{background:var(--stamp);color:#FBF1EA;border-color:var(--stamp);font-size:17px;padding:13px 26px}
.btn-red:hover{background:#821F17;border-color:#821F17}
.btn-lin{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn-lin:hover{border-color:var(--ink);background:var(--paper-2)}

/* ── encabezado del sitio ── */
header.site{position:sticky;top:0;z-index:40;background:rgba(244,240,230,.96);
  backdrop-filter:saturate(150%) blur(7px);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(1px)){header.site{background:rgba(244,240,230,.86)}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.nav-links{display:flex;gap:28px;align-items:center;min-width:0}
.nav-links a.lk{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);border-bottom:1px solid transparent;padding-bottom:2px}
.nav-links a.lk:hover{color:var(--ink);border-bottom-color:var(--rule)}
.lk-entrar{display:inline-flex;align-items:center;min-height:40px;padding:6px 2px;
  font-family:var(--sc);font-size:16px;letter-spacing:.04em;color:var(--seal);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
  white-space:nowrap;flex:0 0 auto}
.lk-entrar:hover{color:var(--stamp);text-decoration-thickness:2.5px}

header.site a:focus-visible,.marca:focus-visible,.enl:focus-visible,
.faq a:focus-visible,footer a:focus-visible,.menu-mov summary:focus-visible{
  outline:2px solid var(--stamp);outline-offset:3px;border-radius:2px}
a.marca{cursor:pointer}

/* ── MENÚ DE CELULAR — <details>/<summary> nativo, sin JavaScript ── */
.menu-mov{display:none;position:relative}
.menu-mov>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--rule);padding:9px 12px;line-height:1;user-select:none}
.menu-mov>summary::-webkit-details-marker{display:none}
.menu-mov>summary .bars{font-size:15px;line-height:1}
.menu-mov[open]>summary{border-color:var(--ink);background:var(--paper-2)}
.menu-mov .panel{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 20px 40px -22px rgba(24,34,51,.55);padding:6px 0;z-index:1}
.menu-mov .panel a{display:block;padding:12px 18px;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.menu-mov .panel a:hover,.menu-mov .panel a:focus-visible{background:var(--paper-2);color:var(--ink)}
.menu-mov .panel .sep{height:1px;background:var(--rule);margin:6px 0}

/* enlaces dentro del texto */
.enl{color:var(--stamp);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;font-weight:inherit}
.enl:hover{text-decoration-thickness:2px}

/* ── encabezado de la página ── */
.hero{padding:58px 0 34px}
.hero h1{font-size:clamp(30px,4.6vw,52px);margin:16px 0 0;max-width:22ch}
/* LA RESPUESTA DIRECTA, ARRIBA DE TODO. Es el bloque que un asistente cita:
   va primero, en letra grande, y no depende de leer nada más. */
.respuesta{margin:26px 0 0;padding:26px 0 4px;border-top:3px double var(--ink);max-width:66ch}
.respuesta p{margin:0 0 14px;font-size:clamp(17px,2vw,20px);color:var(--ink-2);line-height:1.5}
.respuesta p:last-child{margin-bottom:0}
.respuesta b{color:var(--ink);font-weight:600}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.trial-note{margin:15px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.trial-note b{color:var(--stamp);font-weight:600}

/* ── secciones ── */
section{padding:52px 0}
.cl-head{display:flex;align-items:baseline;gap:18px;margin-bottom:8px}
.cl-head h2{font-size:clamp(24px,3.4vw,38px);flex:1;min-width:0}
.cl-sub{margin:12px 0 0;color:var(--ink-2);font-size:17px;max-width:66ch}
.cuerpo{max-width:66ch}
.cuerpo p{color:var(--ink-2);font-size:17px;margin:16px 0 0}
.cuerpo p b{color:var(--ink);font-weight:600}

/* cita textual de una norma o de un sitio ajeno */
.cita{margin:24px 0 0;padding:2px 0 4px 22px;border-left:2px solid var(--seal);max-width:64ch}
.cita p{margin:0;font-style:italic;color:var(--ink-2);font-size:16.5px;line-height:1.5}
.cita cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}

/* listas de la casa — el guion de oro que ya usa `.f-col li` en la landing */
.lista{list-style:none;margin:26px 0 0;padding:0;max-width:66ch}
.lista li{position:relative;padding:11px 0 11px 24px;font-size:16.5px;color:var(--ink-2);
  border-bottom:1px dashed var(--rule);line-height:1.45}
.lista li:last-child{border-bottom:0}
.lista li b{color:var(--ink);font-weight:600}
.lista li::before{content:"—";position:absolute;left:0;top:11px;color:var(--gold);font-family:var(--mono)}
.lista.no li::before{content:"×";color:var(--stamp)}
.lista.si li::before{content:"✓";color:var(--green)}

/* pasos numerados — el mismo gesto del riel de la landing */
.rail{background:var(--rail);color:var(--rail-txt);background-image:none}
.rail .kicker{color:var(--rail-dim)}
.rail h2{color:var(--rail-on)}
.rail .cl-sub{color:#B7C0D0}
.s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px;margin-top:40px}
.step{border-top:2px solid var(--rail-borde);padding-top:18px;min-width:0}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--rail-dim)}
.step h3{color:var(--rail-on);font-size:22px;margin:9px 0 10px}
.step p{margin:0;color:#B7C0D0;font-size:16px}
.step p b{color:var(--rail-on);font-weight:600}

/* ── TABLA COMPARATIVA ──
   Lo único que la landing no tenía. Se construye con el vocabulario de la
   casa: sin esquinas redondeadas, filete de tinta arriba, línea punteada
   entre renglones, rótulos en mono. Desborda con scroll PROPIO: el sitio
   entero lleva `overflow-x:clip`, así que una tabla ancha sin este envoltorio
   quedaría cortada y sin forma de alcanzarla. */
.comp-caja{margin-top:34px;overflow-x:auto;border-top:1px solid var(--ink);
  -webkit-overflow-scrolling:touch}
table.comp{width:100%;min-width:660px;border-collapse:collapse;background:#FBF9F3}
table.comp th,table.comp td{text-align:left;vertical-align:top;padding:14px 16px;
  border-bottom:1px dashed var(--rule);font-size:15.5px;line-height:1.45}
table.comp thead th{font-family:var(--sc);font-size:15px;letter-spacing:.05em;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--ink);background:var(--paper-2)}
table.comp thead th.nos{color:var(--stamp)}
table.comp tbody th{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--graphite);font-weight:400;width:26%}
table.comp td{color:var(--ink-2)}
table.comp td.nos{color:var(--ink);background:#FFFDF7}
table.comp td b{color:var(--ink);font-weight:600}
/* «sin dato público» NO es un reproche: es que no lo encontramos publicado.
   Se pinta apagado a propósito, para que no se lea como una acusación. */
table.comp .nd{color:var(--graphite);font-style:italic}
.comp-pie{margin:18px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  color:var(--graphite);line-height:1.7;max-width:74ch}
.comp-pie b{color:var(--stamp);font-weight:600}
.comp-aviso{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite)}

/* aviso honesto — cuándo esto NO es para vos */
.franco{margin-top:34px;border:1px solid var(--ink);background:#FBF9F3;padding:26px;max-width:74ch}
.franco h3{font-family:var(--sc);font-size:21px;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.franco p{margin:12px 0 0;color:var(--ink-2);font-size:16.5px}
.franco .lista{margin-top:14px}

/* preguntas — calcado de `.faq` de la landing */
.faq{max-width:820px;border-top:1px solid var(--ink);margin-top:36px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--serif);
  font-weight:600;font-size:20px;position:relative;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;color:var(--stamp);
  font-family:var(--mono);font-size:22px;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px;color:var(--ink-2);font-size:16.5px;max-width:70ch;line-height:1.55}

/* ── DE DÓNDE SALEN LOS DATOS ──
   Bloque propio de estas dos páginas. Va porque acá se afirman cosas sobre
   una norma y sobre sitios de terceros: quien lea tiene que poder ir a
   comprobarlo sin pedirnos permiso. */
.fuentes{border-top:1px solid var(--rule);padding:34px 0 0;margin-top:10px}
.fuentes ol{margin:20px 0 0;padding-left:22px;max-width:74ch}
.fuentes li{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--graphite);
  line-height:1.75;margin-bottom:10px;overflow-wrap:anywhere}
.fuentes li b{color:var(--ink-2);font-weight:600}
.fuentes a{color:var(--seal);text-decoration:underline;text-underline-offset:2px}
.fuentes a:hover{color:var(--stamp)}

/* cierre */
.final{border-top:1px solid var(--rule)}
.final .box{border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:48px 0;text-align:left}
.final h2{font-size:clamp(26px,3.6vw,42px);max-width:22ch}
.final p{color:var(--ink-2);max-width:56ch;margin:16px 0 28px;font-size:18px}
.final .cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* colofón */
footer{border-top:1px solid var(--ink);padding:40px 0 48px;font-family:var(--mono);font-size:13px;color:var(--graphite);background-image:none}
.f-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start}
.f-top .marca{font-family:var(--serif)}
.f-links{display:flex;flex-wrap:wrap;gap:22px}
.f-links a{letter-spacing:.1em;text-transform:uppercase}
.f-links a:hover{color:var(--ink)}
.folio{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);letter-spacing:.06em;line-height:1.7;overflow-wrap:anywhere}

/* botón flotante de WhatsApp — el MISMO de la landing */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;background:#25D366;border-radius:50%;
  box-shadow:0 10px 24px -8px rgba(24,34,51,.55);transition:transform .18s,background-color .18s}
.wa-float:hover{transform:translateY(-2px);background:#20BD5A}
.wa-float:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.wa-float svg{width:29px;height:29px;display:block}

/* ── responsive — mismos cortes que la landing ── */
@media(max-width:880px){
  .nav-links a.lk{display:none}
  .menu-mov{display:block}
  .menu-mov .panel{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
    overflow-y:auto;overscroll-behavior:contain}
  header.site:has(.menu-mov[open]){z-index:70}
  header .btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px}
  .menu-mov>summary{min-height:40px;box-sizing:border-box;position:relative}
  .menu-mov>summary::after{content:'';position:absolute;top:-8px;bottom:-8px;
    left:-4px;right:-14px}
  .nav{height:56px}
  html{scroll-padding-top:70px}
  .hero{padding:40px 0 24px}
  section{padding:42px 0}
}
@media(max-width:520px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .nav{gap:10px}
  /* En 390 px entran los CUATRO, pero justo: se achica el AIRE y el relleno,
     nunca los textos. `white-space:nowrap` es obligatorio — sin él «Crear
     cuenta» se parte en dos renglones y el botón crece a 48 px dentro de una
     barra de 56. Medido con el navegador, no a ojo. */
  header .btn{padding:8px 10px;font-size:13px;letter-spacing:.02em;white-space:nowrap}
  .nav-links{gap:8px}
  .lk-entrar{font-size:14.5px;padding:6px 0}
  /* 🔴 2026-09-03 — ESTAS DOS LÍNEAS FALTABAN Y LA BARRA SE SALÍA.
     Se había copiado el bloque de 520 de la landing a medias: sin achicar el
     ☰, la fila medía 290 px dentro de un carril de 263 y el botón del menú
     terminaba 9 px FUERA de la pantalla. Con `overflow-x:clip` en <html> y
     <body> (que va a propósito, si no se muere la barra pegajosa) no había ni
     scroll para alcanzarlo: quedaba INTOCABLE, igual que el defecto que la
     landing arregló el 2026-09-02. Medido en un carril de 375 px. */
  .menu-mov>summary{padding:8px 9px;gap:5px;font-size:11px;letter-spacing:.06em}
  .menu-mov>summary .bars{font-size:13px}
  .marca{font-size:22px}
  .hero .cta-row .btn,.final .cta-row .btn{flex:1 1 100%}
  section{padding:44px 0}
  .cl-head{gap:12px}
  .franco{padding:20px}
  .wa-float{right:14px;bottom:14px;width:46px;height:46px}
  .wa-float svg{width:24px;height:24px}
}
/* PANTALLAS MUY ANGOSTAS (≤372 px: iPhone SE/mini, Galaxy viejos). Acá ya no
   caben las cuatro cosas con la palabra «Menú» al lado del ☰. Lo que se cae es
   esa palabra —el ☰ solo se entiende y el `aria-label` sigue diciéndolo para
   quien usa lector de pantalla—, NUNCA el logo, ni «Ingresar», ni el botón.
   Copiado tal cual de la landing: mismo gesto en todo el sitio. */
@media(max-width:372px){
  .menu-mov>summary .rotulo{display:none}
  .menu-mov>summary{gap:0;padding:8px 11px}
  .menu-mov>summary .bars{font-size:16px}
}
/* LO MÁS ANGOSTO QUE HAY (≤348 px). Se cierra el AIRE y el relleno del botón,
   nunca se saca nada ni se achica un texto por debajo de lo legible. */
@media(max-width:348px){
  .nav{gap:6px}
  .nav-links{gap:6px}
  .marca{font-size:20px}
  header .btn{padding:8px 7px;letter-spacing:0}
  .lk-entrar{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wa-float{transition:none}
}