/* ============================================================
   ATLA — contabilidad.css
   Universo propio de Contabilidad: negro, acero y nada más.

   Es la página más austera del sitio, a propósito. Consultoría es cálida
   (vino); acá el pedido fue que "grite seriedad", así que **no hay ningún
   tono cálido**: ni dorado, ni vino. Solo negro y un acero frío.
   El acero `#5A6272` ya era el color de Contabilidad en el resto del sitio.

   Cambiar toda la paleta son las tres variables de abajo.
   ============================================================ */

.pag-contabilidad {
  /* Tipografía propia (24/08/2026). El cliente pidió "algo que se acerque a
     la Didot". Didot no se puede servir —no existe en Windows ni en Android—
     así que va una didona de la misma escuela: mismo contraste extremo entre
     el grueso y el fino, mismos remates de hilo. El cuerpo sigue en Inter:
     la didona es para titulares, en un párrafo de 17px cansa.

     ⚠️ Es Libre Bodoni y NO Bodoni Moda, que fue la primera opción y el
     cliente descartó ("no se adapta bien"). Las dos son didonas, pero Bodoni
     Moda es un corte de revista: sus trazos finos son casi hilos, y sobre este
     negro un hilo blanco de 1px se afina hasta parpadear. Libre Bodoni está
     dibujada con más carne en los finos —se hizo para aguantar en pantalla—
     así que conserva el contraste de la Didot sin desaparecer. */
  --font-display: "Libre Bodoni", Didot, "Bodoni MT", Georgia, serif;
  --peso-display:  500;    /* 400 se afina demasiado sobre fondo negro */
  --track-display: -0.005em;
  --font-cifras:  var(--font-display);   /* las cifras 01–05 siguen al titular */
  /* Más aire que el 1.08 del sistema: las didonas traen ascendentes y
     descendentes largas —es parte de su elegancia— y con menos que esto la
     cola de la "g" toca la mayúscula del renglón de abajo. Medido. */
  --lh-display:    1.16;

  --negro:      #08090B;   /* negro con una gota de azul, no negro puro */
  --negro-2:    #0E1013;
  --acero-luz:  #B9C2D0;   /* acero aclarado: acentos y rayos */

  background: var(--negro);
  color: var(--ink-on-dark);

  /* ------------------------------------------------------------
     RUIDO DE DITHERING

     Sobre negro los degradados de esta pagina viven entre los niveles
     6 y 26 de 255: el color de 8 bits solo tiene ~17 escalones ahi, y
     aparecen MESETAS de hasta 240 px del mismo valor exacto con saltos
     de 1 nivel entre ellas. El borde entre dos mesetas es lo que se ve
     — y en un radial esas mesetas siguen circunferencias, asi que se
     lee como un aro. Fue justo lo que reporto el cliente.

     No se arregla agregando paradas al degradado: el degradado YA es
     continuo, lo que no alcanza es la profundidad de color. Se arregla
     con un ruido de amplitud ~1-2 niveles, que desordena de que lado
     del redondeo cae cada pixel y deshace el borde.
     ------------------------------------------------------------ */
  /* `--ruido` vive en base.css: lo comparten todas las páginas oscuras. */

  --ink: var(--ink-on-dark);
  --ink-muted: rgba(244, 242, 238, 0.62);
  --line: rgba(185, 194, 208, 0.16);
  --line-soft: rgba(185, 194, 208, 0.08);
  --accent: var(--acero-luz);

  /* El isotipo se vuelve monocromo: en esta página el color sería ruido. */
  --logo-1: rgba(244, 242, 238, 0.38);
  --logo-2: rgba(244, 242, 238, 0.55);
  --logo-3: rgba(244, 242, 238, 0.78);
  --logo-4: var(--ink-on-dark);
  --logo-diamond: var(--acero-luz);
  --logo-rule: rgba(244, 242, 238, 0.7);
}

/* Barra sólida, sin `backdrop-filter`: en un elemento fijo obliga a
   redesenfocar la franja de atrás en cada cuadro de scroll, y sobre negro
   no se percibe. (Lección de Consultoría.) */
.pag-contabilidad .topbar.is-scrolled {
  background: #0B0D10;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Hero ---------- */
/* Alineado a la izquierda, no centrado: distingue esta página de
   Consultoría y aprovecha el hueco oscuro de la foto. */
.hero-cont {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  /* Alto = pantalla, sin topes en px. Los topes de antes
     (clamp(620px, 100svh, 900px)) rompían el zoom: al alejar, el viewport
     crece en px CSS pero el techo de 900px lo cortaba, así que el hero
     dejaba de llenar la pantalla y la foto —al ser `cover`— se achicaba
     con él. Con 100svh a secas el bloque siempre mide exactamente la
     pantalla física, a cualquier zoom, y `cover` reencuadra igual porque
     la proporción del viewport no cambia. `min-` y no `height` para que
     pueda crecer si el contenido no entra en pantallas bajas. */
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: var(--sp-7);
}

/* Capa 1 — la foto */
.hero-cont__foto {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--negro);
  background-image: url("../../contabilidad-fondo.webp");
  background-size: cover;
  background-position: center;

  /* La foto se apaga sola contra el final del hero.
     Antes esto lo intentaba el velo, que abajo llegaba a `0.85`: quedaba un
     **15% de foto visible justo en el corte** con la seccion siguiente, y se
     veia el borde. Y no alcanzaba con cerrarlo del todo, porque el velo va
     DEBAJO de los rayos (§7quater): cerrarlo habria apagado la foto pero no
     la luz. La mascara actua sobre la capa que corta, y solo sobre ella. */
  /* Rampa SUAVE, no tres paradas. Con `#000 62%, 0.55 84%, transparent 100%`
     el gradiente cambia de pendiente en el 84% y el ojo lee ese quiebre
     como una línea horizontal — una banda de Mach. Lo reportó el cliente
     y medido caia exactamente ahí. Smoothstep tiene derivada cero en los
     dos extremos, así que no hay quiebre en ninguna parte. */
  --difumina-abajo: linear-gradient(180deg,
      #000 72%,
      rgba(0, 0, 0, 0.972) 74.2%,
      rgba(0, 0, 0, 0.896) 76.4%,
      rgba(0, 0, 0, 0.784) 78.6%,
      rgba(0, 0, 0, 0.648) 80.8%,
      rgba(0, 0, 0, 0.500) 83%,
      rgba(0, 0, 0, 0.352) 85.2%,
      rgba(0, 0, 0, 0.216) 87.4%,
      rgba(0, 0, 0, 0.104) 89.6%,
      rgba(0, 0, 0, 0.028) 91.8%,
      transparent 94%);
  -webkit-mask-image: var(--difumina-abajo);
  mask-image: var(--difumina-abajo);
}

/* Capa 2 — velo. Va DEBAJO de los rayos, no encima: su trabajo es apagar la
   foto detrás del titular, no apagar la luz. Puesto arriba se comía los rayos
   enteros, porque justo donde nace la luz (izquierda) es donde el velo es más
   opaco. Más oscuro a la izquierda, que es donde va el texto. */
.hero-cont__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* El ruido primero: tiene que quedar arriba de lo que dithera. */
  background-image:
    var(--ruido),
    linear-gradient(100deg, rgba(8, 9, 11, 0.94) 0%, rgba(8, 9, 11, 0.72) 42%, rgba(8, 9, 11, 0.30) 72%, rgba(8, 9, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.55) 0%, transparent 26%, transparent 68%, rgba(8, 9, 11, 0.85) 100%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* Capa 3 — los rayos, arriba de todo lo demás menos el contenido. Nacen
   arriba a la izquierda para continuar la luz que ya trae la foto.
   Si no hay WebGL, queda solo la foto velada. */
/* Los rayos también se apagan contra el final del hero. Van en `z-index: -1`,
   o sea ENCIMA del velo (§7quater), así que son la única capa que el velo no
   puede cerrar: sin esto su canvas corta en seco en el borde. Se desvanece
   solo el último tramo, para no comerse el efecto. */
.rayos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --difumina-rayos: linear-gradient(180deg,
      #000 68%,
      rgba(0, 0, 0, 0.972) 70.5%,
      rgba(0, 0, 0, 0.896) 73%,
      rgba(0, 0, 0, 0.784) 75.5%,
      rgba(0, 0, 0, 0.648) 78%,
      rgba(0, 0, 0, 0.500) 80.5%,
      rgba(0, 0, 0, 0.352) 83%,
      rgba(0, 0, 0, 0.216) 85.5%,
      rgba(0, 0, 0, 0.104) 88%,
      rgba(0, 0, 0, 0.028) 90.5%,
      transparent 93%);
  -webkit-mask-image: var(--difumina-rayos);
  mask-image: var(--difumina-rayos);
}
.rayos canvas { display: block; width: 100%; height: 100%; }

.hero-cont__inner { max-width: 40rem; }

.hero-cont .label { color: var(--acero-luz); }

.hero-cont__title {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  /* El interlineado lo pone la familia, no la maqueta: con el 1.02 que tenía
     —pensado para Instrument Serif— la cola de la "g" de "negocio" tocaba la
     "s" de "siempre" del renglón de abajo. Ver `--lh-display`. */
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  margin-top: var(--sp-3);
  color: var(--ink-on-dark);
}

.hero-cont__lead {
  max-width: 46ch;
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

.hero-cont__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ============================================================
   Servicios — sin fondo

   La seccion va sobre el negro liso de la pagina, a proposito y por decision
   del cliente (27/08/2026). Antes llevaba una foto de una calculadora anclada
   a la derecha, con velo direccional y una luz radial que prolongaba la de la
   foto. Se saco entera: no convencia y el recurso no se sostenia al cambiar
   el zoom — la caja de la foto se media por el ANCHO del viewport mientras
   el alto de la seccion lo fija el texto, asi que las dos medidas se separaban
   y aparecian franjas, o la foto se despegaba del texto, o habia que
   recortarla. Tres intentos, ninguno bueno.

   > `contabilidad-calculadora.webp` sigue en la carpeta pero YA NO SE USA en
   > ninguna hoja. Si nadie la reclama, se puede borrar.

   Lo que queda sostiene la seccion sin fondo: los dos casos abren con una
   cita en primera persona, cada uno con su barra de acento (`.caso__marca`)
   y separados por las lineas de `--line`. La jerarquia es tipografica y de
   espacio, que es como deberia haber sido desde el principio.

   ⚠️ Y no se le pone un degradado "para que no quede tan plano": sobre negro
   los degradados de esta pagina viven entre los niveles 6 y 26 de 255 y
   aparecen mesetas visibles — es el bug de bandeado que documenta el bloque
   del ruido, alla arriba. Negro liso no tiene ese problema.
   ============================================================ */

/* ---------- Servicios ---------- */
/* Mismo planteo que Consultoría: abre el problema en primera persona y
   recién después aparece el nombre del servicio. Ver §7ter del CLAUDE.md. */
.casos { display: grid; }

.caso {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.caso:first-child { border-top: 1px solid var(--line); }

.caso__marca {
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    var(--acero-luz) 0%,
    var(--acero-luz) var(--marca, 55%),
    transparent 100%
  );
}

/* EL NOMBRE DEL SERVICIO ES EL TITULO (31/08/2026).

   Antes esta pagina seguia la gramatica de Consultoria (§7ter): el problema
   en primera persona como titular —"Nunca se que me toca presentar este
   mes"— y el nombre del producto en segundo plano, chico y en mono. El
   cliente saco las dos citas: aca el nombre del servicio ES el titulo.

   Se queda con la escala que tenia la cita —display, mismo clamp, mismo
   interlineado— para que la jerarquia de la seccion no se mueva; lo unico
   que cambia es que ahora dice el nombre. */
.caso__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 22ch;
  color: var(--ink-on-dark);
}

.caso__desc { margin-top: var(--sp-2); max-width: 58ch; color: var(--ink-muted); }

.caso__incluye {
  margin-top: var(--sp-2);
  max-width: 58ch;
  font-size: var(--fs-small);
  /* 0.52 y no menos: a 0.45 este gris cae a 4,09:1 contra el negro. Mismo
     valor que Consultoría, que ya estaba verificado. */
  color: rgba(244, 242, 238, 0.52);
}

.caso__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.caso__precio {
  /* El precio también es una cifra: sigue a la familia de la página
     (§12.1). En esta página son los únicos números que se ven. */
  font-family: var(--font-cifras, var(--font-mono));
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.caso__precio b { font-weight: 500; color: var(--ink-on-dark); }

.caso__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acero-luz);
  border-bottom: 1px solid color-mix(in srgb, var(--acero-luz) 40%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.caso__cta:hover { color: var(--ink-on-dark); border-bottom-color: var(--ink-on-dark); }
.caso__cta span { transition: transform var(--dur) var(--ease); }
.caso__cta:hover span { transform: translateX(4px); }


/* ---------- El detalle de las presentaciones ----------
   Diecisiete items agrupados por tipo de contribuyente. Va DEBAJO de los
   dos casos, no adentro del segundo: en la linea de "incluye" habria
   aplastado el equilibrio entre los dos frentes, que es lo que sostiene
   la seccion.

   Sin recuadros ni tarjetas (§5.1): un filete arriba separa el bloque de
   los casos, y cada grupo se apoya en su propio filete superior. Es la
   misma gramatica que el resto del sitio, y en esta pagina —la mas
   austera— una grilla de cajas habria sido justo lo contrario de su
   argumento. */
.presenta {
  /* Sin filete propio: el ultimo `.caso` ya cierra con el suyo, y dos
     filetes separados por aire se leen como un error de maqueta. */
  margin-top: clamp(3rem, 6vw, 5rem);
}

.presenta__cab { margin-bottom: clamp(2rem, 4vw, 3rem); }

.presenta__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-top: var(--sp-2);
  color: var(--ink-on-dark);
}

/* MULTICOLUMNA y no grilla, y el motivo es que son CINCO grupos de altura
   distinta. Con `grid` de cuatro columnas, el quinto caia solo en una fila
   nueva dejando tres cuartos de fila vacios, y ademas cada fila se estiraba
   al grupo mas alto. `columns` reparte los bloques equilibrando la altura
   total: no quedan huecos y el orden de lectura sigue siendo el correcto,
   columna por columna.

   `break-inside: avoid` es obligatorio: sin el, un grupo se parte al medio
   y su titulo queda en una columna y la mitad de su lista en la otra. */
.presenta__grid {
  columns: 15rem;
  column-gap: clamp(1.75rem, 3vw, 2.5rem);
}

.grupo {
  break-inside: avoid;
  border-top: 1px solid var(--line-soft, var(--line));
  padding-top: var(--sp-3);
  /* En multicolumna el espacio vertical lo da el margen, no un `gap`. */
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
/* `break-inside` no alcanza en Firefox si el bloque arranca justo en el
   borde: el margen de arriba lo empuja entero a la columna siguiente. */
.grupo:first-child { margin-top: 0; }

/* Mono y versalitas: es la etiqueta de un grupo, no un titulo de lectura.
   Es lo unico que el PDF de marca reserva a la monoespaciada (§12.1). */
.grupo__nombre {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acero-luz);
  line-height: 1.5;
}

.grupo__lista {
  list-style: none;
  /* `list-style: none` NO quita el `padding-inline-start: 40px` que el
     navegador le pone a toda lista: sin esto los items quedaban 40px a la
     derecha de su titulo, y esa sangria no la habia decidido nadie. */
  padding-left: 0;
  margin-top: var(--sp-2);
  display: grid;
  gap: 0.55rem;
}

/* El guion va en un `::before` y no como vineta del navegador: asi se
   controla su color —mas tenue que el texto— y su distancia. */
.grupo__lista li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-muted);
}
.grupo__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--acero-luz);
  opacity: 0.75;
}

/* Une el grupo con el otro servicio de la pagina. Lo senalo el cliente al
   pasar el material: el F. 931 sale de la liquidacion de sueldos. */
.grupo__nota {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  font-style: italic;
  color: rgba(244, 242, 238, 0.52);
}

/* ---------- Cierre ---------- */
.cierre-cont {
  text-align: center;
  /* El color va aparte: `background-image` no acepta colores, y meterlo ahi
     invalida la declaracion entera. */
  background-color: var(--negro);
  background-image:
    var(--ruido),
    radial-gradient(85% 120% at 50% 108%, rgba(185, 194, 208, 0.12) 0%, transparent 62%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto;
  background-repeat: repeat, no-repeat;
}
.cierre-cont__title { font-size: var(--fs-h2); margin: var(--sp-2) auto var(--sp-3); max-width: 22ch; }

/* ---------- Pie ---------- */
.pag-contabilidad .footer { border-top-color: var(--line); }
.pag-contabilidad .footer__tagline { color: var(--ink-on-dark); }
.pag-contabilidad .footer__links a:hover { color: var(--ink-on-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* Sangría proporcional: con el gap de escritorio, en 390px el bloque
     quedaba visiblemente descuadrado. (Lección de Consultoría.) */
  .caso { grid-template-columns: 2px 1fr; gap: 0.85rem; }
  .hero-cont__inner { max-width: 100%; }
  /* En pantalla angosta el texto tapa toda la foto: se oscurece parejo. */
  .hero-cont__velo {
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.86) 0%, rgba(8, 9, 11, 0.72) 45%, rgba(8, 9, 11, 0.92) 100%);
  }
}

/* El punto de servicio, aclarado sobre fondo oscuro. El marino `#16233D`
   sobre un hero casi negro es invisible, y un punto que no se ve no
   identifica nada. Se excluyen los estados con relleno porque ahí el punto
   ya pasó a la tinta de encima y aclararlo lo rompería. */
.pag-contabilidad .pill:not(:hover):not(:focus-visible):not([aria-current="page"])::after,
.pag-contabilidad .desplegable__link:not(:hover):not(:focus-visible):not([aria-current="page"])::before {
  background: color-mix(in srgb, var(--svc) 62%, #FFFFFF);
}

/* Fondo sólido del panel del desplegable móvil: el mismo que usa la
   barra compacta de esta página. */
.pag-contabilidad .topbar { --bar-fondo: #0B0D10; }