/* ============================================================
   ATLA — consultorias.css
   Universo propio de Consultoría: vino sobre negro atintado.

   El color no es libre: el vino #7A2E33 ya es el de Consultoría en todo
   el sitio (su píldora, su fila en el Home, la tarjeta de Alejandro).
   Esta página lo lleva al extremo en vez de inventar otro.

   Cambiar TODA la paleta de la página son las cuatro variables de abajo.
   ============================================================ */

.pag-consultoria {
  /* Tipografía propia (24/08/2026). Newsreader es un serif de texto, no de
     display: contraste bajo, ojo grande y una itálica de verdad. Es lo que
     le da el aire de informe firmado que pide una consultoría, y separa esta
     página de Contabilidad, cuyo serif es lo contrario (didone, contraste
     altísimo, frío). El cuerpo va en IBM Plex Sans, que además es la familia
     de la monoespaciada que el sitio ya usa para las cifras. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-display:  400;    /* es serif: no necesita peso para sostenerse */
  --track-display: -0.015em;
  --font-cifras:  var(--font-display);   /* las cifras 01–05 siguen al titular */

  --vino-luz:  #A8434B;   /* vino aclarado, para los rayos y los graficos */
  /* Vino MAS aclarado, solo para texto chico. Lo encontro `audit-ui`:
     #A8434B sobre el fondo #140A0C da 3,31:1 y reprueba a 12 y 14px —
     afectaba la etiqueta, el nombre del servicio y el CTA "Consultar".
     Es el mismo caso que el dorado del Home (§7octies) y se resuelve
     igual: un valor aparte para texto, porque el problema es
     justamente que el acento no sirve ahí. Este da 5,00:1.
     Los usos GRAFICOS (barra del isotipo, eco, filete del caso) siguen
     con el vino original: ahí no hay piso de contraste que cumplir. */
  --vino-texto: #D15B64;
  --vino:      #7A2E33;
  --tinta-fondo: #140A0C;  /* negro con una gota de vino */
  --tinta-fondo-2: #1C0E11;

  background: var(--tinta-fondo);
  color: var(--ink-on-dark);

  /* Se dan vuelta los roles: esta página es oscura de punta a punta */
  --ink: var(--ink-on-dark);
  --ink-muted: rgba(244, 242, 238, 0.70);
  --line: rgba(244, 242, 238, 0.16);
  --line-soft: rgba(244, 242, 238, 0.08);
  --accent: var(--vino-luz);
  --accent-texto: var(--vino-texto);

  /* El isotipo también se adapta: la barra marino se perdería en el negro */
  --logo-4: var(--ink-on-dark);
  --logo-1: rgba(244, 242, 238, 0.45);
  --logo-2: var(--vino-luz);
  --logo-rule: rgba(244, 242, 238, 0.7);
}

/* La cabecera vive sobre este fondo todo el tiempo.
   SIN `backdrop-filter`: en un elemento fijo, el navegador tiene que volver
   a desenfocar la franja de atrás en CADA cuadro de scroll, y acá lo de
   atrás es un canvas WebGL. Sobre un fondo casi negro el desenfoque no se
   percibe, así que se usa un fondo sólido y se ahorra todo ese trabajo. */
.pag-consultoria .topbar.is-scrolled {
  background: #17090C;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Hero ---------- */
.hero-cons {
  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);
  text-align: center;
}

/* ============================================================
   La foto del hero (24/08/2026)

   La trajo el cliente: un escritorio con notebook, planillas, calculadora y
   lapicera, ya virado al vino de la pagina. **El centro esta casi negro y
   vacio** (brillo medio 14 de 255, medido) y los objetos viven en las cuatro
   esquinas: la composicion deja el hueco justo donde va el titular, asi que no
   hubo que apagar la foto para que el texto se lea.

   1,59 MB de PNG -> 64 KB en WebP calidad 88, con el mismo criterio que las
   demas fotos del sitio (§7).

   ORDEN DE CAPAS, que es la regla que costo encontrar en Contabilidad
   (§7quater): la foto abajo de todo, y el velo ENTRE la foto y lo que brilla.

     -3  la foto
     -2  la aurora        <- se suma encima de la foto
     -1  la viñeta        <- protege el texto y dithera

   La aurora se queda: sin ella la foto sola se lee como una foto de stock
   oscura; con ella, la luz se mueve por encima y la seccion sigue viva.
   ============================================================ */
.hero-cons__foto {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--tinta-fondo);
  background-image: url("../../consultoria-fondo.webp");
  background-size: cover;
  background-position: center;
  /* Se apaga contra el final del hero, para que no corte en seco contra la
     seccion siguiente. Rampa suave de varias paradas y muriendo ANTES del
     borde (93%), que es lo que de verdad resuelve la linea (§7quater). */
  --difumina-foto: linear-gradient(180deg,
      #000 66%,
      rgba(0, 0, 0, 0.972) 69%,
      rgba(0, 0, 0, 0.896) 72%,
      rgba(0, 0, 0, 0.784) 75%,
      rgba(0, 0, 0, 0.648) 78%,
      rgba(0, 0, 0, 0.500) 81%,
      rgba(0, 0, 0, 0.352) 84%,
      rgba(0, 0, 0, 0.216) 87%,
      rgba(0, 0, 0, 0.104) 90%,
      transparent 93%);
  -webkit-mask-image: var(--difumina-foto);
  mask-image: var(--difumina-foto);
}

/* En pantalla angosta la foto se recorta al centro, que es justamente la parte
   vacia: quedaria un rectangulo negro y 64 KB tirados. Se saca, igual que la
   calculadora de Contabilidad (§7quater), y queda el fondo de la pagina con la
   aurora, que no depende del ancho. */
@media (max-width: 700px) {
  .hero-cons__foto { background-image: none; }
}

/* Viñeta: hunde los bordes para que el titular no compita con la luz */
/* ============================================================
   La aurora — el fondo del hero

   Reemplaza al plasma, que era un raymarcher en WebGL. **El costo del plasma
   era estructural**: recorria un volumen 26 veces por pixel y por cuadro, asi
   que bajarle la calidad lo aliviaba pero nunca lo resolvia.

   Esto son tres degradados radiales que **solo se mueven con `transform`**.
   Una animacion de `transform` corre en el hilo del compositor: no toca el
   CPU principal, no hay shader por pixel, no hay canvas y no hay JavaScript.
   Y con la pestana de fondo el navegador la pausa solo.

   Los degradados ya son suaves por definicion, asi que **no hace falta
   `filter: blur()`** — que si habria sido caro.

   Los tres ciclos duran distinto y no son multiplos (37s, 47s, 29s): asi no
   vuelven a coincidir y el movimiento nunca se lee como un bucle.
   ============================================================ */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.aurora__luz {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* `will-change` aca SI corresponde: estas capas animan siempre. La leccion
     del eco (§7ter) era no dejarlo puesto en algo que esta quieto casi todo
     el tiempo, que no es el caso. */
  will-change: transform;
}

/* Vino aclarado, arriba a la izquierda: es de donde viene la luz en el hero. */
.aurora__luz--1 {
  width: 82vw; height: 82vw;
  top: -34vw; left: -22vw;
  background: radial-gradient(circle at 50% 50%,
    rgba(168, 67, 75, 0.42) 0%, rgba(168, 67, 75, 0.16) 38%, transparent 68%);
  animation: aurora-1 37s ease-in-out infinite alternate;
}

/* El coral del plasma original, para no perder su temperatura. */
.aurora__luz--2 {
  width: 68vw; height: 68vw;
  top: -6vw; right: -20vw;
  background: radial-gradient(circle at 50% 50%,
    rgba(232, 106, 120, 0.24) 0%, rgba(232, 106, 120, 0.09) 40%, transparent 70%);
  animation: aurora-2 47s ease-in-out infinite alternate;
}

/* Vino profundo abajo: cierra el hero contra la seccion siguiente. */
.aurora__luz--3 {
  width: 96vw; height: 70vw;
  bottom: -34vw; left: 8vw;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(122, 46, 51, 0.44) 0%, rgba(122, 46, 51, 0.16) 44%, transparent 72%);
  animation: aurora-3 29s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 6vw, 0) scale(1.18); }
}
@keyframes aurora-2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-11vw, 8vw, 0) scale(0.92); }
}
@keyframes aurora-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7vw, -5vw, 0) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__luz { animation: none; will-change: auto; }
}

/* Fuera de pantalla la aurora se duerme, y suelta la memoria de GPU que
   `will-change` le reserva. Lo pone `main.js` con un IntersectionObserver
   (`data-pausar-fuera`): son tres capas de casi 1000px de lado, y el hero
   está fuera de la vista la mayor parte del recorrido. */
.aurora[data-quieta="true"] .aurora__luz {
  animation-play-state: paused;
  will-change: auto;
}

.hero-cons__vineta {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* El ruido primero, para ditherar la viñeta: es un radial tenue sobre
     fondo casi negro, o sea el caso exacto que produce un aro visible. */
  /* Velo de arriba: protege la franja de la etiqueta.
     La aurora sube el fondo de #140A0C a #3B181E justo a esa altura, y ahi el
     vino de 12px caia a 4,04:1. Bajar la aurora al 48% recien llegaba a 4,58 y
     la dejaba casi invisible, asi que en vez de apagar el efecto se protege el
     texto — que es la regla del hero de Contabilidad (§7quater). Rampa suave de
     18 paradas, no tres, para no dejar una banda de Mach. */
  background-image:
    var(--ruido),
    linear-gradient(180deg,
      rgba(20, 10, 12, 0.8600) 0%,
      rgba(20, 10, 12, 0.8568) 3.444%,
      rgba(20, 10, 12, 0.8481) 6.889%,
      rgba(20, 10, 12, 0.8355) 10.33%,
      rgba(20, 10, 12, 0.8203) 13.78%,
      rgba(20, 10, 12, 0.8043) 17.22%,
      rgba(20, 10, 12, 0.7887) 20.67%,
      rgba(20, 10, 12, 0.7752) 24.11%,
      rgba(20, 10, 12, 0.7653) 27.56%,
      rgba(20, 10, 12, 0.7603) 31%,
      rgba(20, 10, 12, 0.7338) 34.44%,
      rgba(20, 10, 12, 0.6294) 37.89%,
      rgba(20, 10, 12, 0.4856) 41.33%,
      rgba(20, 10, 12, 0.3459) 44.78%,
      rgba(20, 10, 12, 0.2542) 48.22%,
      rgba(20, 10, 12, 0.2274) 51.67%,
      rgba(20, 10, 12, 0.1465) 55.11%,
      rgba(20, 10, 12, 0.0480) 58.56%,
      transparent 62%),
    radial-gradient(86% 66% at 50% 46%, transparent 0%, rgba(12, 5, 7, 0.55) 100%);
  background-size: var(--ruido-tam) var(--ruido-tam), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.hero-cons__inner { display: grid; justify-items: center; gap: var(--sp-3); }

.hero-cons .label { color: var(--vino-texto); }

.hero-cons__lead { max-width: 54ch; color: var(--ink-muted); }

/* ---------- Titular con estela ---------- */
/* El texto real va al frente; las copias, detrás. Sin `nowrap`: un titular
   en castellano a este cuerpo tiene que poder cortar en dos líneas. */
/* ============================================================
   Servicios — planteados como situaciones, no como productos

   Se descartó la versión anterior (01/02/03 + viñetas + precio a la derecha):
   es la tabla de precios más repetida de internet, las rayitas no
   significaban nada, y los tres bloques idénticos no ayudaban a que nadie
   se reconociera. Acá cada caso abre con el problema en primera persona
   —las palabras del cliente— y recién después aparece cómo se llama.
   ============================================================ */
.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); }

/* Filete vertical de cita. Crece caso a caso: es un guiño a las barras
   ascendentes del isotipo, sin volverse una infografía. */
.caso__marca {
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    var(--vino-luz) 0%,
    var(--vino-luz) var(--marca, 55%),
    transparent 100%
  );
}

/* La voz del cliente: lo primero que se lee */
.caso__voz {
  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__voz em { font-style: normal; color: var(--vino-luz); }

/* El nombre del servicio pasa a segundo plano: es la respuesta, no el gancho */
.caso__nombre {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vino-texto);
}

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

/* Lo que incluye va en una línea corrida y tenue: es respaldo, no argumento.
   Antes era una lista con viñetas y competía con el mensaje. */
.caso__incluye {
  margin-top: var(--sp-2);
  max-width: 58ch;
  font-size: var(--fs-small);
  color: rgba(244, 242, 238, 0.52);
}

/* Precio y acción en un solo renglón, pegados al contenido.
   Antes el precio vivía en una columna aparte y leía como carta de menú. */
.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(--vino-texto);
  border-bottom: 1px solid color-mix(in srgb, var(--vino-texto) 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); }

/* ---------- Cierre ---------- */
.cierre-cons {
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 110%, rgba(168, 67, 75, 0.26) 0%, transparent 64%),
    var(--tinta-fondo);
}
.cierre-cons__title { font-size: var(--fs-h2); margin: var(--sp-2) auto var(--sp-3); max-width: 20ch; }

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

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* La sangría del filete de cita tiene que ser PROPORCIONAL, no fija.
     Con el gap de escritorio, en 390px el texto quedaba a 46px del borde
     izquierdo y a 20px del derecho: un 7% de descuadre, bien visible.
     Con este valor la asimetría queda en el mismo ~4% que en escritorio. */
  .caso { grid-template-columns: 2px 1fr; gap: 0.85rem; }
}
  /* 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-consultoria .pill:not(:hover):not(:focus-visible):not([aria-current="page"])::after,
.pag-consultoria .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-consultoria .topbar { --bar-fondo: #17090C; }

/* ============================================================
   El titular

   Sin animacion: el cliente saco el eco (24/08) y despues el texto
   deformado. Queda el titular limpio hasta que se decida que va.
   ============================================================ */
.tit-cons {
  position: relative;
  display: block;
  /* El minimo era 2.6rem y en 390px el titular medía 332px dentro de 335px
     de ancho util: 3px de aire. Se conserva el 2.25rem que lo corrigio. */
  font-size: clamp(2.25rem, 7.5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .tit-cons { max-width: 100%; }
}