/* ==========================================================================
   lucianochanorossi.com — sistema visual
   Paleta y tipografías vienen del sitio original. Ver README para el criterio.
   ========================================================================== */

/* Sólo hay un archivo real de Plex (el regular). El semibold se sintetiza:
   declarar un @font-face 600 apuntando al regular haría que el navegador
   deje de sintetizar y todo el "semibold" saldría en peso normal. */
@font-face{
  font-family:'Archivo Black';
  src:url(fonts/ArchivoBlack-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap
}
@font-face{
  font-family:'Plex';
  src:url(fonts/IBMPlexSans-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap
}

/* ---------- tokens ---------- */
:root{
  --ground:#000000; --surface:#1A1A1A; --ink:#FFFFFF; --accent:#EE2B7C;
  --accent-ink:#FFFFFF;
  --muted:#999999; --paper:#EDE7DE; --paper-ink:#17120F; --paper-muted:#6B5E64;
  --line:rgba(255,255,255,.15); --line-strong:rgba(255,255,255,.30);
  --field:#0D0D0D; --shadow:rgba(0,0,0,.75);
  --display:'Archivo Black',Impact,'Haettenschweiler',sans-serif;
  --body:'Plex',ui-sans-serif,system-ui,sans-serif;
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --maxw:78rem;
  --radius:2px;
  color-scheme:dark;
}
/* El modo claro está deshabilitado. El sitio es siempre negro y blanco. */
:root[data-theme="dark"]{
  --ground:#000000; --surface:#1A1A1A; --ink:#FFFFFF; --accent:#EE2B7C;
  --muted:#999999; --paper:#EDE7DE;
  --line:rgba(255,255,255,.15); --line-strong:rgba(255,255,255,.30);
  --field:#0D0D0D; --shadow:rgba(0,0,0,.75);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* grano ambiente: le saca el plano digital al negro */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.label{font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.accent{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;z-index:100;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

h1,h2,h3{text-wrap:balance}
h1{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(2.5rem,7vw,5.4rem);line-height:.95;letter-spacing:-.022em;
  text-transform:uppercase}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:.9rem 0 0;
  font-size:clamp(1.75rem,4vw,2.9rem);line-height:1;letter-spacing:-.015em}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem 1.25rem;flex-wrap:wrap;
  padding-block:.85rem;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.mark{font-family:var(--display);font-size:.9rem;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.head-right{display:flex;align-items:center;gap:.4rem 1.25rem;flex-wrap:wrap}
.nav{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-block:.2rem;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.theme-btn{background:none;border:1px solid var(--line-strong);color:var(--muted);
  border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.theme-btn:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.6rem;
  border-radius:var(--radius);font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--body);
  transition:transform .18s,background .18s,color .18s,border-color .18s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:none}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.32fr .88fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.eyebrow::before{content:'';width:2.2rem;height:1px;background:var(--accent)}
.deck{margin:1.7rem 0 0;max-width:48ch;color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.13rem)}

/* Sin marco, sin fondo y sin pie: el retrato está compuesto sobre el negro de
   la página y se disuelve solo en los bordes. Cualquier borde o superficie acá
   volvería a encerrarlo en una caja. */
.portrait{position:relative;aspect-ratio:620/794;margin:0}
.portrait canvas,.portrait img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.sec-rule{border-top:1px solid var(--line)}
.sec-head{max-width:54ch;margin-bottom:2.6rem}
.sec-head p{color:var(--muted);margin:.9rem 0 0}

/* tres columnas separadas por filete, no cajas */
.cols{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0}
.cols li{padding:0 1.6rem;border-left:1px solid var(--line)}
.cols li:first-child{padding-left:0;border-left:0}
.cols b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.01em;margin-bottom:.4rem}
.cols span{color:var(--muted);font-size:.92rem}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2.2rem,5vw,3.4rem)}

/* ---------- fichas de herramienta ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:clamp(1rem,2vw,1.6rem)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);
  padding:clamp(1.4rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.85rem;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card--quiet{background:none;border-style:dashed}
.card--quiet:hover{transform:none}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.15rem;line-height:1.1;letter-spacing:-.005em;margin:0}
.card h3 a{text-decoration:none}
/* el enlace cubre la ficha entera, así todo el bloque es clickeable */
.card h3 a::after{content:'';position:absolute;inset:0}
.card p{margin:0;color:var(--muted);font-size:.93rem}
.card-foot{margin-top:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-top:.4rem}
.tag{display:inline-block;font-size:.63rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--line-strong);
  border-radius:999px;color:var(--muted)}
.tag--live{border-color:var(--accent);color:var(--accent)}
.card-go{font-size:.8rem;font-weight:600;color:var(--accent)}

/* ---------- listado de notas ---------- */
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.notes li{border-bottom:1px solid var(--line)}
.notes a{display:grid;grid-template-columns:8rem 1fr auto;gap:1.4rem;align-items:baseline;
  padding-block:1.4rem;text-decoration:none}
.notes a:hover .note-t{color:var(--accent)}
.note-d{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.note-t{font-size:1.1rem;font-weight:600;transition:color .18s}
.note-x{font-size:.9rem;color:var(--muted)}
/* ---------- prensa ----------
   Filas separadas por filete, sin cajas: es un archivo, tiene que poder crecer
   a treinta entradas sin volverse una pared de tarjetas. */
.prensa{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prensa li{border-bottom:1px solid var(--line)}
.prensa a{display:grid;gap:.55rem;padding-block:1.7rem;text-decoration:none}
.prensa-meta{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.prensa-medio{color:var(--accent)}
.prensa-fecha{color:var(--muted)}
.prensa-tipo{color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;
  padding:.16rem .55rem;letter-spacing:.1em}
.prensa-titulo{font-size:clamp(1.05rem,1.9vw,1.22rem);font-weight:600;line-height:1.3;
  max-width:52ch;transition:color .18s}
.prensa a:hover .prensa-titulo{color:var(--accent)}
.prensa-bajada{color:var(--muted);font-size:.93rem;line-height:1.65;max-width:68ch}
.prensa-ir{font-size:.82rem;font-weight:600;color:var(--accent)}

.empty{border:1px dashed var(--line-strong);padding:clamp(1.6rem,3vw,2.4rem);
  max-width:60ch}
.empty b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.05rem;margin-bottom:.6rem}
.empty p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- formularios ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);
  padding:clamp(1.3rem,2.4vw,1.9rem)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.05rem}
.field label{font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--field);
  border:1px solid var(--line-strong);color:var(--ink);padding:.72rem .8rem;
  font:inherit;font-size:.95rem;border-radius:var(--radius);width:100%}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hint{font-size:.78rem;color:var(--muted);margin:.2rem 0 1.2rem;line-height:1.45}
.form-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}

/* ---------- generador: formulario + documento ---------- */
.gen-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:start}

/* ---------- las tres acciones de la nota ----------
   Iconos de trazo, del mismo grosor que el resto de la interfaz, y jerarquía
   clara: compartir primero, que es lo que la mayoría va a querer hacer. */
.acciones-tres{display:grid;gap:.7rem;margin-top:1.2rem}
.accion{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:.1rem .9rem;align-items:center;text-align:left;
  background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);font:inherit;cursor:pointer;padding:.95rem 1.1rem;
  transition:border-color .18s,background .18s,transform .18s}
.accion:hover{border-color:var(--ink);transform:translateY(-1px)}
.accion:disabled{opacity:.4;cursor:not-allowed;transform:none}
.accion svg{grid-row:1 / span 2;width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.accion b{font-size:.98rem;font-weight:600}
.accion span{font-size:.8rem;color:var(--muted)}
.accion--principal{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.accion--principal span{color:rgba(255,255,255,.82)}
.accion--principal:hover{border-color:var(--accent-ink)}

@media (min-width:560px){
  .acciones-tres{grid-template-columns:repeat(3,1fr)}
  .accion{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    justify-items:center;text-align:center;gap:.35rem;padding:1.15rem .8rem}
  .accion svg{grid-row:auto;width:1.6rem;height:1.6rem}
}

/* ---------- documento en papel ---------- */
.doc-shell{position:sticky;top:5.5rem}
.doc-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;flex-wrap:wrap}
.doc-frame{position:relative}
.doc{background:var(--paper);color:var(--paper-ink);padding:clamp(1.6rem,3vw,2.9rem);
  box-shadow:0 22px 60px -18px var(--shadow);font-size:.9rem;line-height:1.72;
  max-height:74vh;overflow-y:auto;border:1px solid var(--line-strong);
  transition:filter .3s}
.doc h3{font-family:var(--body);font-weight:600;font-size:.95rem;text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 1.5rem;text-align:center}
.doc p{margin:0 0 1rem}
.doc .meta{text-align:right;color:var(--paper-muted);font-size:.82rem}
.doc .sign{margin-top:2.6rem;text-align:center}
.doc .sign i{display:block;width:14rem;border-top:1px solid #B9AFA4;margin:0 auto .45rem}
.doc mark{background:color-mix(in srgb,var(--accent) 17%,transparent);color:inherit;
  padding:0 .15em;border-radius:var(--radius);font-style:normal}

/* candado del generador */
[data-locked="true"] .doc{filter:blur(6px);pointer-events:none;user-select:none}
.lock{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;z-index:3}
[data-locked="false"] .lock{display:none}
.lock-card{background:var(--ground);border:1px solid var(--line-strong);
  padding:clamp(1.3rem,2.5vw,1.8rem);max-width:24rem;width:100%;
  box-shadow:0 30px 70px -20px var(--shadow)}
.lock-card b{display:block;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:1.05rem;line-height:1.15;margin-bottom:.7rem}
.lock-card p{margin:0 0 1.1rem;font-size:.88rem;color:var(--muted)}
.lock-card .btn{width:100%;justify-content:center}
.lock-err{color:var(--accent);font-size:.8rem;font-weight:600;margin:.6rem 0 0;min-height:1.2em}

/* ---------- pasos ---------- */
.steps{list-style:none;counter-reset:s;margin:2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
.steps li{counter-increment:s;position:relative;padding-top:2.6rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--display);font-size:1.5rem;color:var(--accent);letter-spacing:-.02em}
.steps b{display:block;margin-bottom:.35rem;font-weight:600}
.steps span{color:var(--muted);font-size:.93rem}

/* ---------- biografía: lectura larga ----------
   Medida corta y renglón alto. Es el único lugar del sitio pensado para leer
   diez minutos seguidos, así que manda la legibilidad y no la grilla. */
.bio-grid{display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.bio-portrait{position:relative;margin:0}
.bio-portrait img{display:block;width:100%;height:auto}

/* Apunta a unos 65 caracteres por renglón, el ancho cómodo de lectura. Ojo:
   el ch se resuelve contra el font-size de este contenedor (17px heredados),
   no contra el de los párrafos, que son más grandes. */
.prose{max-width:60ch}
.prose p{margin:0 0 1.35rem;font-size:clamp(1.05rem,1rem + .35vw,1.19rem);line-height:1.75}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:italic}
.prose strong{font-weight:600}
/* capitular sólo en el arranque del relato */
.prose--open>p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:3.5em;line-height:.76;
  padding:.04em .1em 0 0;color:var(--accent)}

.bio-sec{padding-top:clamp(2.4rem,5vw,3.6rem);margin-top:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid var(--line)}
.bio-sec>.label{display:block;margin-bottom:1.4rem}

/* citas destacadas: la larga se lee, la corta golpea */
.pull{margin:2.4rem 0;padding-left:1.4rem;border-left:2px solid var(--accent);max-width:56ch}
.pull p{margin:0;font-size:clamp(1.12rem,1.9vw,1.35rem);line-height:1.45;color:var(--ink)}
.pull--loud p{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.08;letter-spacing:-.015em}
.pull cite{display:block;margin-top:.8rem;font-style:normal;font-size:.72rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* bloque de la home que lleva a la biografía */
.bio-teaser{display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.6rem,4vw,3.5rem);align-items:center}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.5rem);
  align-items:start}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-list li{border-bottom:1px solid var(--line);padding-block:1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.contact-list a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent)}

/* ---------- seguime en redes ----------
   Los íconos son las marcas oficiales, en monocromo para no romper la paleta
   del sitio. Cada red toma su color propio al pasar por encima, que alcanza
   para reconocerla sin llenar la página de logos de colores. */
.redes-bloque{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--line)}
.redes{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem}
.red{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;
  min-height:3.5rem;transition:border-color .18s,transform .18s,background .18s}
.red:hover{border-color:var(--marca);transform:translateY(-2px);background:var(--surface)}
.red:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.red-icono{width:1.4rem;height:1.4rem;flex:none;fill:currentColor;
  color:var(--muted);transition:color .18s}
.red:hover .red-icono{color:var(--marca)}
.red-texto{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.red-texto b{font-size:.9rem;font-weight:600;line-height:1.2}
.red-texto span{font-size:.82rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   Revisá tu Factura
   Pensado para el celular: objetivos táctiles grandes, un paso por pantalla y
   nada que dependa de precisión con el dedo.
   ========================================================================== */

.rf-app{margin-top:1rem}

/* volver atrás: siempre en el mismo lugar, arriba a la izquierda. El hueco se
   reserva también en el primer paso para que el contenido no salte. */
.rf-atras-barra{min-height:2.75rem;display:flex;align-items:center;margin-bottom:.35rem}
/* 44 px de alto es el minimo para tocarlo con el dedo sin errarle */
.rf-atras{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;
  color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;min-height:2.75rem;
  padding:.5rem 1rem .5rem 0;margin-left:-.1rem;border-radius:var(--radius)}
.rf-atras svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rf-atras:hover{color:var(--ink)}
.rf-atras-destino{color:var(--muted);opacity:.72}
.rf-atras-destino::before{content:'· '}
@media (max-width:420px){ .rf-atras-destino{display:none} }

/* pasos */
.rf-pasos{list-style:none;display:flex;gap:.5rem;margin:0 0 2rem;padding:0;flex-wrap:wrap}
.rf-pasos li{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:1 1 8rem}
.rf-pasos span{display:grid;place-items:center;width:1.75rem;height:1.75rem;flex:none;
  border-radius:999px;border:1px solid var(--line-strong);font-size:.78rem}
.rf-pasos .actual{color:var(--ink)}
.rf-pasos .actual span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rf-pasos .hecho span{border-color:var(--accent);color:var(--accent)}
/* los pasos ya recorridos son botones y se ven igual que los demás */
.rf-paso-ir{display:flex;align-items:center;gap:.5rem;background:none;border:0;padding:.4rem 0;
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;text-align:left;width:100%}
.rf-paso-ir:hover{color:var(--ink)}
.rf-paso-ir:hover span{border-color:var(--ink)}

.rf-paso h2{margin-top:0}
.rf-bajada{color:var(--muted);max-width:60ch;margin:1rem 0 2rem}

/* opciones de carga */
.rf-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.9rem;margin-bottom:1.5rem}
.rf-opcion{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.2rem;cursor:pointer;font:inherit;color:var(--ink);text-align:left;
  min-height:7.5rem;transition:border-color .18s,transform .18s}
.rf-opcion:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.rf-opcion--principal{border-color:var(--accent)}
.rf-opcion-icono{font-size:1.5rem;line-height:1;margin-bottom:.35rem}
.rf-opcion b{font-size:1rem}
.rf-opcion span:not(.rf-opcion-icono){color:var(--muted);font-size:.85rem}

.rf-secundarias{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}
.rf-enlace{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;
  border-bottom:1px solid var(--accent)}
.rf-enlace:hover{color:var(--accent)}

/* progreso */
.rf-progreso{margin:1.5rem 0}
.rf-aviso-motor{border:1px solid var(--accent);border-left-width:3px;padding:1rem 1.1rem;
  margin-bottom:1rem;background:var(--surface)}
.rf-aviso-motor b{display:block;margin-bottom:.4rem;font-size:.98rem}
.rf-aviso-motor p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:56ch}
.rf-progreso-texto{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;
  color:var(--muted);margin-bottom:.5rem}
.rf-barra{height:.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;overflow:hidden}
.rf-barra-relleno{height:100%;width:0;background:var(--accent);transition:width .25s}

/* pegar texto */
.rf-pegar{background:var(--surface);border:1px solid var(--line);padding:1.2rem;margin:1.2rem 0}
.rf-pegar label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.rf-pegar textarea{width:100%;background:var(--field);border:1px solid var(--line-strong);
  color:var(--ink);padding:.8rem;font:inherit;font-size:.9rem;border-radius:var(--radius)}
.rf-pegar-acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.8rem}

/* listado cargado */
.rf-cargadas{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.5rem}
.rf-lista{list-style:none;margin:1rem 0;padding:0}
.rf-item{display:grid;grid-template-columns:1fr auto auto 2rem;gap:.8rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.rf-item--falta{color:var(--muted)}
.rf-item-per{font-weight:600}
.rf-item-dato{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted)}
.rf-item-x{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
  width:2rem;height:2rem;border-radius:999px;line-height:1}
.rf-item-x:hover{color:var(--accent);background:var(--surface)}

/* tarjetas de revisión */
.rf-facturas{display:grid;gap:1rem;margin-bottom:2rem}
.rf-factura{background:var(--surface);border:1px solid var(--line);padding:1.2rem}
.rf-factura-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  margin-bottom:1rem}
.rf-mini{display:block;width:100%;max-height:11rem;object-fit:cover;object-position:top;
  border:1px solid var(--line);margin-bottom:1rem}
.rf-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}
.rf-campos--clave{margin-bottom:1rem}
.rf-campo{display:flex;flex-direction:column;gap:.35rem}
.rf-campo>span{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
.rf-campo>span i{font-style:normal;font-size:.62rem;letter-spacing:.06em;color:var(--accent);
  text-transform:none}
.rf-campo input{background:var(--field);border:1px solid var(--line-strong);color:var(--ink);
  padding:.8rem;font:inherit;font-size:1rem;border-radius:var(--radius);width:100%}
.rf-campo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.rf-campo--falta input{border-color:var(--accent)}
.rf-campo--periodo{flex:1}
.rf-detalle{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem}
.rf-detalle summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--ink)}
.rf-detalle summary span{color:var(--muted);font-weight:400}
.rf-detalle .rf-campos{margin-top:1rem}

.rf-acciones{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:2.5rem 0 1rem}
.rf-acciones-arriba{margin-bottom:1.5rem}
.btn-grande{justify-content:center;padding:1.15rem 1.5rem;font-size:1rem;text-align:center}

/* ---------- informe ---------- */
.informe{margin-top:1rem}
.inf-cabecera{border-bottom:1px solid var(--line);padding-bottom:1.5rem;margin-bottom:2rem}
.inf-cabecera h2{margin:.6rem 0 0}
.inf-meta{color:var(--muted);font-size:.9rem;margin:.6rem 0 0}
.inf-sec{padding-block:2rem;border-top:1px solid var(--line)}
.inf-sec:first-of-type{border-top:0;padding-top:0}
.inf-sec h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.25rem;letter-spacing:-.005em;margin:0 0 1.2rem}
.inf-sub{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:2rem 0 .8rem}
.inf-titular{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.45;margin:0 0 1.5rem;max-width:50ch}
.inf-titular .acento{color:var(--accent)}

.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ficha{background:var(--ground);padding:1rem}
.ficha-rotulo{display:block;font-size:.63rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.ficha-valor{font-size:1.15rem;font-variant-numeric:tabular-nums}
.ficha-extra{display:block;font-size:.75rem;color:var(--muted);margin-top:.2rem}

.comparacion{display:grid;grid-template-columns:1fr auto 1fr auto;gap:1rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);padding:1.3rem;margin-bottom:1.5rem}
.comparacion b{display:block;font-size:1.3rem;font-variant-numeric:tabular-nums;margin:.25rem 0}
.comp-rot{font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.comp-per{font-size:.75rem;color:var(--muted)}
.comp-flecha{font-size:1.3rem;color:var(--accent)}
.comp-res{border-left:1px solid var(--line);padding-left:1rem}

.var{font-weight:600;font-variant-numeric:tabular-nums}
.var--sube{color:var(--accent)}
.var--baja{color:#7DD3A0}
.var--igual,.var--nd{color:var(--muted)}

.grafico{width:100%;height:auto;display:block;margin:.5rem 0 1rem;overflow:visible}
.grafico--rosca{max-width:15rem;margin-inline:auto}
.g-guia{stroke:var(--line);stroke-width:1}
.g-eje{fill:var(--muted);font-size:11px;font-family:var(--body)}
.g-rosca-n{fill:var(--ink);font-size:26px;font-family:var(--display)}
.g-rosca-t{fill:var(--muted);font-size:10px;font-family:var(--body);letter-spacing:.08em;
  text-transform:uppercase}
.grafico-vacio{color:var(--muted);font-size:.88rem;border:1px dashed var(--line-strong);
  padding:1.2rem;margin:.5rem 0}

.explica{color:var(--muted);font-size:.95rem;line-height:1.65;max-width:60ch;margin:.5rem 0 0}
.aviso-suave{border-left:2px solid var(--line-strong);padding-left:1rem;color:var(--muted);
  font-size:.88rem;max-width:60ch;margin:1rem 0}

.tarjeton{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:1.5rem}
.tarjeton-mitad{background:var(--ground);padding:1.5rem 1.2rem;text-align:center}
.tarjeton-mitad>span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.tarjeton-n{font-family:var(--display);font-size:clamp(2rem,6vw,3rem);line-height:1}
.tarjeton-mitad--cargos .tarjeton-n{color:var(--accent)}

.rosca-fila{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;
  margin-bottom:1rem}
.leyenda{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.88rem}
.leyenda li{display:flex;align-items:center;gap:.55rem}
.leyenda b{margin-left:auto;font-variant-numeric:tabular-nums}
.leyenda-punto,.barras-punto{width:.7rem;height:.7rem;border-radius:2px;flex:none}

.barras{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.barras-fila{display:flex;align-items:baseline;gap:.55rem;font-size:.88rem;margin-bottom:.35rem;
  flex-wrap:wrap}
.barras-nombre{flex:1;min-width:8rem}
.barras-pesos,.barras-pct{font-variant-numeric:tabular-nums;color:var(--muted)}
.barras-pct{min-width:4rem;text-align:right;color:var(--ink);font-weight:600}
.barras-pista{height:.4rem;background:var(--surface);border-radius:999px;overflow:hidden}
.barras-relleno{height:100%;border-radius:999px}

.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ind{background:var(--ground);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.ind>span{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ind>b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.ind>i{font-style:normal;font-size:.75rem;color:var(--muted)}

.alerta{border:1px solid var(--accent);border-left-width:3px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.alerta b{display:block;margin-bottom:.5rem}
.alerta p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}

.inf-parrafo{max-width:64ch;line-height:1.7;margin:0 0 1rem;font-size:.97rem}

/* hallazgos: numerados, y los de mayor peso con el filete del acento */
.hallazgos{list-style:none;counter-reset:h;margin:0;padding:0;display:grid;gap:1rem}
.hallazgos li{counter-increment:h;position:relative;padding-left:2.6rem;
  border-left:2px solid var(--line-strong);padding-block:.15rem .3rem}
.hallazgos li::before{content:counter(h,decimal-leading-zero);position:absolute;
  left:.9rem;top:.1rem;font-family:var(--display);font-size:.9rem;color:var(--muted)}
.hallazgos .hallazgo--clave{border-left-color:var(--accent)}
.hallazgos .hallazgo--clave::before{color:var(--accent)}
.hallazgos b{display:block;margin-bottom:.35rem;font-size:1rem}
.hallazgos p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.65;max-width:64ch}

/* puntos de control: el estado se lee de un vistazo por el color del filete */
.controles{display:grid;gap:1rem;margin-top:1.4rem}
.control{border:1px solid var(--line);border-left-width:3px;padding:1.1rem 1.2rem}
.control header{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  flex-wrap:wrap;margin-bottom:.6rem}
.control header b{font-size:1rem}
.control-estado{font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:.2rem .55rem;
  white-space:nowrap}
.control p{margin:0 0 .6rem;font-size:.92rem;line-height:1.6;max-width:66ch}
.control p:last-child{margin-bottom:0}
.control-fundamento{color:var(--muted)}
.control-pedido{font-size:.88rem;padding-top:.5rem;border-top:1px solid var(--line)}
.control-pedido span{display:inline-block;font-size:.63rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-right:.4rem}
.control--atencion{border-left-color:var(--accent)}
.control--atencion .control-estado{border-color:var(--accent);color:var(--accent)}
.control--observado{border-left-color:var(--line-strong)}
.control--verificado{border-left-color:#7DD3A0}
.control--verificado .control-estado{border-color:#7DD3A0;color:#7DD3A0}
.control--sinDatos{border-left-color:var(--line)}
.control--sinDatos .control-hallazgo{color:var(--muted)}

.inf-sec--recomendacion{border-left:2px solid var(--accent);padding-left:1.2rem}
.inf-sec--conclusion p{max-width:64ch;line-height:1.7;margin:0 0 1rem}
.inf-pie{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:1rem;
  color:var(--muted);font-size:.8rem}
.inf-pie p{margin:0 0 .5rem;max-width:70ch}
.inf-pie code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
  letter-spacing:.05em}

@media (max-width:760px){
  .rf-acciones{grid-template-columns:1fr}
  .comparacion{grid-template-columns:1fr;gap:.9rem;text-align:left}
  .comp-flecha{transform:rotate(90deg);width:1.5rem}
  .comp-res{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:.9rem}
  .rosca-fila{grid-template-columns:1fr}
  .tarjeton{grid-template-columns:1fr}
  /* El período arriba ocupando el ancho, los dos datos abajo y la cruz al
     costado abarcando ambas filas: con tres columnas en línea no entra. */
  .rf-item{grid-template-columns:1fr auto 2rem;row-gap:.3rem;column-gap:.6rem}
  .rf-item>*{min-width:0}
  .rf-item-per{grid-column:1 / span 2}
  .rf-item-x{grid-column:3;grid-row:1 / span 2;align-self:center}
  .rf-item-dato{grid-row:2}
}

/* Al imprimir sólo sale el informe.
   Y se da vuelta a documento claro: las impresoras no imprimen fondos, así que
   dejarlo en blanco sobre negro daría un PDF en blanco. Como todo el informe
   usa variables, alcanza con redefinirlas acá. */
@media print{
  @page{margin:14mm}
  .rf-pasos,.rf-acciones,.rf-acciones-arriba,.rf-opciones,.rf-progreso,.rf-pegar,
  .rf-cargadas,.rf-facturas,.hint{display:none!important}
  .informe,.informe *{visibility:visible}
  .informe{position:absolute;left:0;top:0;width:100%;
    --ground:#FFFFFF; --surface:#FFFFFF; --ink:#111111; --muted:#4A4A4A;
    --line:rgba(0,0,0,.18); --line-strong:rgba(0,0,0,.38);
    background:#fff;color:#111}
  .inf-sec,.grafico,.comparacion,.tarjeton,.alerta{break-inside:avoid;page-break-inside:avoid}
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:2.4rem 3.2rem;
  color:var(--muted);font-size:.85rem}
.foot-in{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  align-items:baseline}
.foot-nav{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.disclaimer{border-left:2px solid var(--accent);padding-left:1rem;max-width:62ch;
  margin:0 0 1.8rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .portrait{max-width:26rem;order:-1}
  .cols,.steps{grid-template-columns:1fr}
  .cols li{padding:1rem 0;border-left:0;border-top:1px solid var(--line)}
  .cols li:first-child{padding-top:0;border-top:0}
  .gen-grid{grid-template-columns:1fr}
  .doc-shell{position:static}
  .contact,.bio-grid,.bio-teaser{grid-template-columns:1fr}
  .bio-portrait{max-width:22rem;order:-1}
  .notes a{grid-template-columns:1fr;gap:.35rem}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .nav{gap:.9rem}
  /* Con cuatro ítems el nav no entra al lado del botón y la barra se iba a tres
     filas. display:contents saca el envoltorio de la ecuación y deja marca y
     botón arriba, nav abajo: dos filas y la mitad de alto. */
  .head-right{display:contents}
  .head-in{gap:.55rem}
  .site-head nav{order:3;flex-basis:100%}
}

/* ---------- movimiento ----------
   La aparición por scroll se engancha sólo si hay JS (la clase .js la pone el
   bootstrap del <head>). Sin JS el contenido se ve igual: la animación es un
   agregado, no un requisito para leer la página. */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- impresión ----------
   Se oculta todo por visibility y se reexpone la rama del documento:
   display:none sobre los ancestros se llevaría puesta la nota. */
@media print{
  body{background:#fff}
  body::after{display:none}
  body *{visibility:hidden}
  .print-root,.print-root *{visibility:visible}
  .print-root{position:absolute;left:0;top:0;width:100%}
  .doc{max-height:none;overflow:visible;box-shadow:none;border:0;background:#fff;
    color:#000;padding:0;font-size:12pt;line-height:1.6;filter:none}
  .doc mark{background:none}
  /* con el candado puesto no se imprime nada */
  [data-locked="true"] .print-root{display:none}
  .lock{display:none}
}
Actualizado: 2026-07-26 13:46:49