/* ============================================================
   ATLA — base.css
   Capa compartida por TODAS las páginas del sitio.
   Tokens, reset, tipografía, cabecera, pie, utilidades y motion.

   Cada página de servicio sobrescribe SOLO los tokens semánticos
   en su propio archivo (marketing.css, diseno-web.css, etc.)
   para tener su universo visual propio sin duplicar estructura.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta de marca — del isotipo (4 barras + rombo) y del PDF de marca */
  --navy:      #16233D;
  --navy-deep: #0D1526;   /* fondo del hero oscuro */
  --burgundy:  #7A2E33;
  --gold:      #C9971F;
  --slate:     #6E7787;   /* solo isotipo: muy claro para texto o relleno */
  --slate-deep:#5A6272;   /* misma familia, apta para rellenos con texto encima */
  --teal:      #17707A;   /* turquesa de Marketing, oscurecido para llegar a 4.5:1 */

  /* Roles semánticos — esto es lo que usan los componentes. */
  --paper:     #F6F4F0;
  --paper-alt: #E6E0D4;  /* piedra. Antes era #EFEBE4, demasiado cerca del marfil:
                            las secciones se fundían entre sí y no se leía el corte. */
  --ink:       var(--navy);
  /* Gris pizarra oscurecido: el --slate de marca no llega a 4.5:1 como texto. */
  --ink-muted: #5A6272;
  --accent:    var(--gold);
  --line:      rgba(22, 35, 61, 0.18);
  --line-soft: rgba(22, 35, 61, 0.08);

  /* Tinta sobre fondo oscuro */
  --ink-on-dark:       #F4F2EE;
  --ink-muted-on-dark: rgba(244, 242, 238, 0.72);
  --line-on-dark:      rgba(244, 242, 238, 0.26);

  /* Colores del isotipo — variables para recolorearlo por página/contexto */
  --logo-1: var(--slate);
  --logo-2: var(--burgundy);
  --logo-3: var(--gold);
  --logo-4: var(--navy);
  --logo-diamond: var(--gold);
  --logo-rule: var(--navy);

  /* Tipografía — UNA FAMILIA DE TITULARES POR PÁGINA (24/08/2026)
     Cada página de servicio redefine `--font-display` (y a veces el cuerpo)
     en su propio CSS, igual que hace con los colores: es el mismo mecanismo
     de "un universo por página" de §4, ahora también en tipografía.

     display : titulares de la página
     body    : cuerpo, etiquetas, navegación
     mono    : cifras (`.num`). En Diseño Web además es el display
     marca   : el wordmark ATLA y la firma del pie. NO SE REDEFINE NUNCA:
               es lo único tipográfico que se repite en las nueve páginas,
               así el logo se lee igual venga de donde venga el visitante. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-marca:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Las cifras siguen al titular. Cada `.pag-*` tiene que repetir esta línea:
     acá se resuelve contra el `--font-display` del Home y nada más (§6bis). */
  --font-cifras:  var(--font-display);

  /* Peso y tracking del titular. Van como token porque dependen de la
     familia, no de la página: un serif de display aguanta 400, pero una
     grotesca a 7rem en 400 se ve desmayada y necesita 600 con el tracking
     más cerrado. Cada página que cambia `--font-display` ajusta estos dos.
     El Home volvió a un serif de display el 25/08/2026, así que acá los
     valores son los de esa familia; las páginas de servicio traen los suyos. */
  --peso-display:  400;    /* Instrument Serif viene en un solo peso */
  /* -0.01em y no -0.03em: la grotesca anterior necesitaba cerrarse a 7rem
     porque venia dibujada ancha. Instrument Serif ya viene ajustada de
     display; cerrarla mas le pega los remates entre si. */
  --track-display: -0.01em;
  /* Interlineado del titular. Tambien depende de la familia: 1.04 servia con
     Instrument Serif, que tiene metricas compactas, pero una grotesca de
     display trae ascendentes y descendentes mas altas y con 1.04 la caja de
     linea queda MAS CHICA que el texto: los renglones se pisan y la cola de
     la "g" del renglon de arriba choca contra el de abajo. Lo reporto el
     cliente en Marketing, con Syne.

     Medido con `measureText` en las siete páginas: con 1.04 la tinta real de
     dos renglones seguidos se toca o queda a 0,3px en cinco de ellas. 1.08
     deja margen en todas sin mover la maqueta de forma perceptible. */
  --lh-display: 1.08;

  /* Escala tipográfica fluida */
  --fs-display: clamp(3.1rem, 8.4vw, 7rem);
  --fs-h2:      clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h3:      clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;

  /* Espaciado — sistema de 8px */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Medidas */
  --measure: 62ch;
  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* Dorado profundo, para texto chico sobre fondo claro. Ver `.label--accent`.
     Medido: 5,63:1 sobre el papel y 4,75:1 sobre la piedra. */
  --accent-texto: #7A5C10;

  --radius: 14px;
  --radius-lg: 22px;

  /* Alto de la cabecera DESPLEGADA. Reserva el espacio del <body> y no debe
     cambiar nunca con el scroll (ver §6). main.js lo ajusta al valor real. */
  --header-h: 226px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* ------------------------------------------------------------
     RUIDO DE DITHERING — para degradados tenues sobre fondo oscuro.

     Sobre negro un degradado vive entre los niveles 6 y 26 de 255: el color
     de 8 bits solo tiene ~17 escalones ahí 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 — como una línea si el degradado es lineal, y
     como un ARO si es radial.

     No se arregla agregando paradas: el degradado ya es continuo, lo que no
     alcanza es la profundidad de color. Este ruido, de amplitud ~1-2 niveles,
     desordena de qué lado del redondeo cae cada píxel.

     Se usa como PRIMERA capa del `background-image` del elemento que dithera,
     con `background-size: var(--ruido-tam)` y `background-repeat: repeat`.
     Medido: mesetas de 240 px → 8 px.

     ⚠️ **Es un PNG rasterizado, no un `feTurbulence` en SVG**, y eso importa.
     La primera version usaba el filtro SVG y funcionaba, pero `feTurbulence`
     es de los filtros mas caros que existe y la viñeta de Consultoría que lo
     lleva está **encima de un canvas WebGL que repinta todo el tiempo**. Un
     PNG se decodifica una sola vez y queda como bitmap: no hay filtro que se
     pueda volver a ejecutar nunca. Mismo resultado visual, 10,6 KB.
     ------------------------------------------------------------ */
  --ruido: url("../../ruido.png");
  --ruido-tam: 128px;

  --z-nav: 100;
}

/* El tamaño del ruido va en píxeles FÍSICOS, no CSS.
   `ruido.png` mide 128×128 nativos. Con `background-size: 128px` clavado, al
   alejar el zoom esos 128 px CSS caen a menos píxeles de pantalla (a 50 %, 80)
   y el navegador tiene que promediar texels para que entren. Promediar ruido le
   baja la amplitud, y este ruido tiene 1-2 niveles: en cuanto pierde un poco
   deja de cruzar el umbral de redondeo, deja de ditherar, y **reaparece la banda
   de Mach** que estaba tapando — la misma que marcó el cliente. El quiebre
   estaba medido en el 80 % de zoom, y ahí empezaba a verse.
   Estos escalones agrandan el tamaño CSS a medida que baja la resolución, de
   modo que el patrón nunca se reduzca: siempre cae en 128 píxeles físicos o más
   y el grano se ve igual de fino a cualquier zoom.
   `resolution` sí responde al zoom del navegador, que es lo que lo hace servir. */
@media (max-resolution: 1dppx)    { :root { --ruido-tam: 128px; } }
@media (max-resolution: 0.99dppx) { :root { --ruido-tam: 192px; } }
@media (max-resolution: 0.74dppx) { :root { --ruido-tam: 256px; } }
@media (max-resolution: 0.49dppx) { :root { --ruido-tam: 384px; } }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Se mide contra la barra COMPACTA, que es la que tapa contenido
     cuando se salta a un ancla estando ya scrolleado. */
  scroll-padding-top: clamp(104px, 14vh, 140px);
}

/* La cabecera es `fixed`, así que no ocupa lugar: el <body> se lo reserva.
   Un hero que quiera sangrar POR DEBAJO de la barra (los oscuros del Home y
   de Contacto) anula este hueco con `margin-top` negativo y lo devuelve como
   `padding-top` propio — así la imagen llega hasta arriba de todo pero el
   texto nunca se monta sobre el logo. Ver .hero y .hero-contacto. */
body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--peso-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Utilidades ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); margin-inline: auto; }
.center { text-align: center; }

.section { padding-block: clamp(4.5rem, 11vw, var(--sp-8)); }
.section--alt { background: var(--paper-alt); }

/* Sección en marino — el TERCER valor de la página.
   No suma una tinta nueva: repite el azul del hero para partir el recorrido
   en oscuro → claro → oscuro y que el marfil se lea como decisión.
   Da vuelta los tokens semánticos, así todo lo que caiga adentro se adapta
   solo. Usar con moderación: UNA sección por página, no más. */
/* Sobre oscuro el acento brillante vuelve a ser el correcto: el dorado
   profundo ahí no se vería. */
.section--dark { --accent-texto: var(--accent); }

.section--dark {
  background: var(--navy-deep);
  color: var(--ink-on-dark);
  --ink: var(--ink-on-dark);
  --ink-muted: var(--ink-muted-on-dark);
  --line: var(--line-on-dark);
  --line-soft: rgba(244, 242, 238, 0.12);
}

/* Los botones necesitan el mapeo explícito: adentro de .section--dark,
   --ink pasa a ser claro y un .btn--solid quedaría claro sobre claro. */
.section--dark .btn { color: var(--ink-on-dark); border-color: var(--line-on-dark); }
.section--dark .btn:hover {
  background: var(--ink-on-dark);
  color: var(--navy-deep);
  border-color: var(--ink-on-dark);
}
.section--dark .btn--solid {
  background: var(--ink-on-dark);
  color: var(--navy-deep);
  border-color: var(--ink-on-dark);
}
.section--dark .btn--solid:hover { background: transparent; color: var(--ink-on-dark); }

/* Etiqueta pequeña en versalitas — reemplaza a los "chips" genéricos */
.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
/* El dorado como TEXTO sobre fondo claro no pasa: #C9971F sobre el papel
   da 2,41:1 y sobre la piedra (--paper-alt) todavía menos. Es un color
   pensado para rellenos y filetes, no para 12px de tinta.

   Por eso hay un dorado aparte solo para texto sobre claro. No se define
   como `var(--accent)` porque tiene que ser un valor fijo: el problema es
   justamente que el acento no sirve acá.

   ⚠️ Una página que redefina `--accent` Y use `.label--accent` sobre fondo
   claro tiene que redefinir también `--accent-texto`. Hoy solo el Home y
   Contacto usan esta clase, y las dos van con el dorado del sistema. */
.label--accent { color: var(--accent-texto, var(--accent)); }

.rule { border: 0; height: 1px; background: var(--line); margin: 0; }

/* Marca dorada corta, respiro entre bloques */
.tick { width: 34px; height: 2px; background: var(--accent); margin: var(--sp-3) auto; }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-muted); }

/* Las cifras de sección (01–05) siguen a la familia de SU página (pedido del
   cliente, 24/08/2026): antes eran IBM Plex Mono en las nueve, y al darle una
   tipografía propia a cada página quedaban como el único elemento ajeno.

   ⚠️ El respaldo va acá, en el punto de uso, y NO como `--font-cifras:
   var(--font-mono)` en `:root`. Es la trampa del §6bis: una variable que se
   define en `:root` a partir de otra se resuelve AHÍ, con el valor por
   defecto del sitio, y no con el que cada página redefine. */
.num {
  font-family: var(--font-cifras, var(--font-mono));
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-1) var(--sp-2);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* ============================================================
   Brillo al pasar el mouse — utilidad reutilizable
   Adaptado de GlareHover (reactbits.dev). Del original solo servía el CSS:
   su JS era un adaptador de props, sin lógica de animación.

   Cambios respecto del código original, todos necesarios:
   · se le sacaron width/height/background/border/grid propios, que pisaban
     los estilos del elemento anfitrión;
   · `transition: all` → solo `background-position` (el resto era desperdicio);
   · se agregó `pointer-events: none`, si no el overlay se come los clics;
   · se sacó `cursor: pointer`: el anfitrión decide si es clickeable o no;
   · la transición va SOLO en :hover, así al salir el brillo no vuelve
     barriendo al revés (que era el defecto visible del original).

   El anfitrión tiene que tener `position: relative` y `overflow: hidden`.
   ============================================================ */
.brillo-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(
    var(--brillo-angulo, -30deg),
    transparent 56%,
    rgb(255 255 255 / var(--brillo-fuerza, 0.26)) 70%,
    transparent 84%
  );
  background-repeat: no-repeat;
  background-size: 260% 260%;
  background-position: -60% -60%;
}

.brillo-hover:hover::after,
.brillo-hover:focus-within::after {
  background-position: 160% 160%;
  transition: background-position 850ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .brillo-hover::after { display: none; }
}

/* Grano: le da cuerpo a las superficies grandes y evita el degradé plano.
   Va como pseudo-elemento sobre cualquier bloque con .grain */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 0.8rem 1.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }

/* Variantes sobre fondo oscuro */
.btn--on-dark { color: var(--ink-on-dark); border-color: var(--line-on-dark); }
.btn--on-dark:hover { background: var(--ink-on-dark); color: var(--navy-deep); border-color: var(--ink-on-dark); }

.btn--solid.btn--on-dark { background: var(--ink-on-dark); color: var(--navy-deep); border-color: var(--ink-on-dark); }
.btn--solid.btn--on-dark:hover { background: transparent; color: var(--ink-on-dark); border-color: var(--ink-on-dark); }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- 5. Isotipo ---------- */
.logo-icon .b1 { fill: var(--logo-1); }
.logo-icon .b2 { fill: var(--logo-2); }
.logo-icon .b3 { fill: var(--logo-3); }
.logo-icon .b4 { fill: var(--logo-4); }
.logo-icon .diamond { fill: var(--logo-diamond); }
.logo-icon .baseline { fill: var(--logo-rule); }
.logo-icon rect { transition: fill var(--dur) var(--ease); }

/* ============================================================
   6. Cabecera
   Logo centrado arriba, accesos por servicio abajo.
   Dos ejes independientes de estado:
     .on-dark     → mientras flota sobre el hero oscuro (tinta clara)
     .is-scrolled → una vez pasado el umbral (compacta y con fondo)

   IMPORTANTE — por qué va `fixed` y no `sticky`:
   la barra cambia de alto al compactarse (≈226px → ≈108px). En el flujo
   del documento, ese cambio acortaba la página y todo el contenido pegaba
   un salto de más de 100px con una sola vuelta de rueda. Fuera del flujo,
   con el hueco reservado por el padding-top del <body>, no reacomoda nada.
   ============================================================ */
.topbar {
  --bar-ink: var(--ink);
  --bar-muted: var(--ink-muted);
  --bar-line: var(--line);
  /* Fondo SÓLIDO, para el panel del desplegable. El de la barra
     compacta es translúcido y ahí no sirve: detrás del panel hay
     contenido de la página, no un desenfoque. */
  --bar-fondo: var(--paper);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-block: var(--sp-4) var(--sp-3);
  transition: padding-block var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Sobre el hero oscuro: se invierte la tinta y el isotipo se aclara para
   que la barra marino no se pierda contra el fondo. */
.topbar.on-dark {
  --bar-ink: var(--ink-on-dark);
  --bar-muted: var(--ink-muted-on-dark);
  --bar-line: var(--line-on-dark);
  --bar-fondo: var(--navy-deep);
  --logo-4: var(--ink-on-dark);
  --logo-1: rgba(244, 242, 238, 0.5);
  --logo-rule: rgba(244, 242, 238, 0.75);
}

.topbar__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  /* El `gap` se achica junto con la barra al compactarse: sin esta
     transición el espacio saltaba de golpe mientras el padding todavía
     estaba interpolando, y la barra se veía en dos tiempos. */
  transition: gap var(--dur) var(--ease);
}

/* main.js despliega la barra un instante para medirla; sin esto la medición
   dispararía las transiciones y se vería un parpadeo. */
.topbar.no-transition,
.topbar.no-transition * { transition: none !important; }

.topbar.is-scrolled {
  padding-block: 0.75rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.topbar.is-scrolled.on-dark {
  background: color-mix(in srgb, var(--navy-deep) 82%, transparent);
  box-shadow: 0 1px 0 var(--line-on-dark);
}

.topbar.is-scrolled .topbar__inner { gap: var(--sp-2); }

/* --- Marca --- */
.brand {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.brand__icon {
  width: 44px;
  height: 44px;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}

.brand__word {
  /* `--font-marca`, no `--font-display`: si el wordmark siguiera al titular,
     "ATLA" cambiaría de familia en cada página y el logo dejaría de ser la
     constante del sitio. Vale lo mismo para la firma del pie. */
  font-family: var(--font-marca);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em;      /* compensa el tracking del último caracter */
  color: var(--bar-ink);
  transition: font-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.brand__tagline {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bar-muted);
  overflow: hidden;
  max-height: 2rem;
  max-width: 22rem;
  opacity: 1;
  transition: max-height var(--dur) var(--ease),
              max-width var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Compacto: isotipo y nombre en línea, bajada colapsada */
.topbar.is-scrolled .brand {
  grid-auto-flow: column;
  align-items: center;
  gap: 0.65rem;
}
.topbar.is-scrolled .brand__icon { width: 28px; height: 28px; }
.topbar.is-scrolled .brand__word { font-size: 1.3rem; }
/* Colapsa alto Y ancho: ocultarla sola seguiría reservando espacio
   y correría el nombre fuera del centro. */
.topbar.is-scrolled .brand__tagline { max-height: 0; max-width: 0; opacity: 0; }

/* --- Accesos por servicio (píldoras) --- */
.pills { max-width: 100%; }

.pills__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Cada píldora lleva el color de SU página en --svc: al pasar el mouse
   se llena con ese color. Es el mismo lenguaje que las filas de Servicios,
   así "tocar un servicio" significa siempre lo mismo en todo el sitio. */
.pill {
  --svc: var(--ink);
  --svc-on: var(--paper);   /* texto sobre el relleno; el dorado lo pisa con tinta */

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
  color: var(--bar-muted);
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--svc);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Un punto del color del servicio, siempre visible. Es lo que hace que
   cada acceso se reconozca de un vistazo sin llenar la cabecera de color:
   rellenar las cinco píldoras funcionaría en Marketing y arruinaría la
   austeridad de Contabilidad, que es media página del argumento de esa
   página. El punto vale en los siete universos.

   Va en `::after` porque `::before` ya es el relleno del hover, y con
   `order: -1` se coloca ANTES del texto aunque el pseudo venga después.
   Funciona porque la píldora es `inline-flex` y el pseudo es un ítem más
   (el relleno no, que está fuera de flujo por ser absoluto). */
.pill::after {
  content: "";
  order: -1;
  width: 7px;
  height: 7px;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--svc);
  transition: background var(--dur) var(--ease);
}

.pill:hover,
.pill:focus-visible,
.pill[aria-current="page"] {
  color: var(--svc-on);
  border-color: var(--svc);
}

/* Cuando la píldora se llena con su color, el punto se daría vuelta contra
   sí mismo y desaparecería: pasa a la tinta de encima. */
.pill:hover::after,
.pill:focus-visible::after,
.pill[aria-current="page"]::after { background: var(--svc-on); }

.pill:hover::before,
.pill:focus-visible::before,
.pill[aria-current="page"]::before { opacity: 1; }

/* 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. */
.topbar.on-dark .pill:not(:hover):not(:focus-visible):not([aria-current="page"])::after,
.topbar.on-dark .desplegable__link:not(:hover):not(:focus-visible):not([aria-current="page"])::before {
  background: color-mix(in srgb, var(--svc) 62%, #FFFFFF);
}

/* ---------- 7. Pie ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5) var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.footer__brand { display: flex; align-items: center; gap: 0.7rem; }
.footer__brand .logo-icon { width: 30px; height: 30px; flex: none; }

.footer__tagline {
  font-family: var(--font-marca);   /* constante del sitio, ver .brand__word */
  font-size: 1.3rem;
  color: var(--ink);
}

.footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem var(--sp-3); }
/* Los links del pie median 23px de alto, 1px por debajo del minimo de 24
   que pide WCAG 2.2 AA para un objetivo de puntero. Lo encontro `audit-ui`
   midiendo, y pasaba en las 9 paginas. El padding vertical los lleva a 32
   sin mover nada de la maqueta: el `gap` del contenedor absorbe el resto. */
.footer__links a {
  display: inline-block;
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover { color: var(--ink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 8. Aparición al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 8ter. Desplegable de secciones (solo móvil) ---------- */
/* Reemplaza a la franja deslizable por debajo de 820px. La franja obligaba
   a arrastrar para descubrir que había más servicios: dos de los cinco
   quedaban fuera de pantalla y nada garantizaba que alguien los buscara.
   Un desplegable muestra los cinco de una y ocupa el lugar de uno.

   No tiene piel propia: usa los tokens `--bar-*` de la cabecera, así que
   se pinta solo con el universo de cada página. La lógica está en
   `assets/js/menu.js`, compartida con el menú de Marketing.

   El botón dice EN QUÉ SECCIÓN ESTÁS, no "Menú": así el mismo control
   responde "dónde estoy" y "a dónde puedo ir". */
.desplegable { display: none; }

@media (max-width: 820px) {
  /* Se va la franja: ya no hay carrusel. */
  .pills { display: none; }

  .desplegable {
    display: block;
    position: relative;
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
  }

  .desplegable__boton {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.5rem 1.2rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1;
    color: var(--bar-ink);
    background: transparent;
    border: 1px solid var(--bar-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .desplegable__boton:hover { border-color: var(--bar-ink); }

  /* El mismo punto de color que llevan las píldoras: acá dice de qué
     sección es la página en la que estás. */
  .desplegable__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--svc, var(--accent));
    flex: none;
  }

  .desplegable__flecha {
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur) var(--ease);
  }
  .desplegable__boton[aria-expanded="true"] .desplegable__flecha {
    transform: translateY(1px) rotate(-135deg);
  }

  /* ---------- El panel ---------- */
  /* Absoluto: se superpone al contenido en vez de empujarlo. Si empujara,
     cambiaría el alto de una barra fija y volvería el salto de scroll que
     costó arreglar en §6. */
  .desplegable__panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bar-fondo, var(--paper));
    border: 1px solid var(--bar-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    /* `visibility` y no solo opacidad: un panel invisible pero presente se
       sigue llevando el foco del teclado. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    /* Ver la nota del panel de Marketing: `visibility` tarda `--dur` en
       volver a `hidden` al cerrar, y en esa ventana el panel todavía se
       come los clics de lo que tiene debajo. `pointer-events` no espera. */
    pointer-events: none;
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility 0s linear var(--dur);
  }
  .desplegable__panel[data-abierto="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility 0s;
  }

  .desplegable__link {
    display: flex;
    align-items: center;
    gap: 0.7em;
    min-height: 52px;
    padding-inline: 1.1rem;
    font-size: var(--fs-small);
    color: var(--bar-ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .desplegable__link + .desplegable__link { border-top: 1px solid var(--bar-line); }

  .desplegable__link::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--svc, var(--bar-muted));
    flex: none;
    transition: background var(--dur) var(--ease);
  }

  /* Al tocarlo se llena con SU color: la misma señal que las píldoras y las
     filas de servicio del Home (§5.2). */
  .desplegable__link:hover,
  .desplegable__link:focus-visible,
  .desplegable__link[aria-current="page"] {
    background: var(--svc, var(--bar-line));
    color: var(--svc-on, var(--paper));
  }
  .desplegable__link:hover::before,
  .desplegable__link:focus-visible::before,
  .desplegable__link[aria-current="page"]::before {
    background: var(--svc-on, var(--paper));
  }

  /* Contacto no es un servicio: sin punto y separado por un filete más
     marcado, para que las cinco de arriba se lean como un grupo. */
  .desplegable__link--contacto { border-top-width: 2px; }
  .desplegable__link--contacto::before { display: none; }
  .desplegable__link--contacto:hover,
  .desplegable__link--contacto:focus-visible,
  .desplegable__link--contacto[aria-current="page"] {
    background: var(--bar-ink);
    color: var(--bar-fondo, var(--paper));
  }
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 820px) {
  /* Las píldoras no entran en una línea: se deslizan en su propia franja,
     con un degradado a la derecha que avisa que hay más.
     Se estira con márgenes negativos, NO con 100vw — eso sumaría el ancho
     de la barra de scroll y rompería la página a lo ancho. */
  .pills {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  }
  .pills::-webkit-scrollbar { display: none; }

  .pills__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding-block: 2px;   /* aire para que el foco no se recorte */
  }

  .footer__top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* Compacto en móvil: el isotipo se corre a la izquierda de la franja
     para que la barra fija no se coma media pantalla. */
  .topbar.is-scrolled .topbar__inner {
    grid-auto-flow: column;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: var(--sp-2);
  }
  .topbar.is-scrolled .brand__word { display: none; }
  /* Compacta ya no hay franja que estirar: el desplegable ocupa el ancho
     que sobra a la derecha del isotipo. */
  .topbar.is-scrolled .desplegable { max-width: none; }
}

/* ---------- 10. Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}