/* ============================================================
   CONSULTORA CATARATAS — HOJA DE ESTILO DEL SITIO
   Depende de tokens.css. Ningún valor crudo vive acá: todo
   color, medida, curva y tiempo sale de una variable.

   Idea rectora del movimiento: EL DESCENSO.
   Todo entra desde arriba con un barrido de clip-path y se
   asienta. Nada sube. Es la mecánica del isotipo aplicada a
   la interfaz.
   ============================================================ */

/* ---------- 0 · BASE ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* El fondo va en html, no en body — regla de stacking del proyecto */
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--interlinea-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--azul); color: var(--blanco); }

:focus-visible {
  outline: 2px solid var(--azul-profundo);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.salta-al-contenido {
  position: absolute;
  left: var(--canal);
  top: var(--e-4);
  z-index: var(--z-modal);
  padding: var(--e-3) var(--e-5);
  background: var(--tinta);
  color: var(--texto-inverso);
  font-size: var(--t-chico);
  text-decoration: none;
  /* Se esconde con transform y no con `top`: animar una propiedad de
     layout obliga a recalcular la página entera en cada frame.     */
  transform: translateY(calc(-100% - var(--e-5)));
  transition: transform var(--t-estado) var(--curva-descenso);
}
.salta-al-contenido:focus { transform: translateY(0); }

/* La barra es fija: sin este margen, todo salto por ancla deja la
   primera línea del destino escondida detrás de la navegación.   */
:target,
section[id],
article[id] { scroll-margin-top: calc(72px + var(--e-5)); }


/* ---------- 1 · GRILLA -------------------------------------- */

.limite {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.seccion { padding-block: var(--aire-seccion); position: relative; }

/* Los ítems de grilla nacen con min-width:auto, o sea min-content.
   Basta un descendiente ancho para que una pista 1fr se infle y
   arrastre toda la página a un ancho mínimo mayor que el viewport.
   En mobile Chrome lo disimula haciendo zoom out, así que el bug se
   ve como "el sitio arranca alejado" y no como scroll horizontal.
   min-width: 0 devuelve a las pistas su derecho a encogerse.      */
.hero__grilla > *,
.dupla > *,
.areas__grilla > *,
.metodo__grilla > * { min-width: 0; }

/* Actos oscuros — rompen el ritmo del papel a mitad de página */
.acto-oscuro {
  background: var(--fondo-inverso);
  color: var(--texto-inverso);
}
.acto-oscuro .eyebrow { color: var(--azul-claro); }
.acto-oscuro .regla { background: var(--linea-inversa); }
/* 0.85 y no menos: la regla de legibilidad del proyecto fija ese
   piso para cuerpo de texto sobre fondo oscuro. Da 12.7:1.      */
.acto-oscuro .apagado { color: rgba(255, 255, 255, 0.85); }

.acto-alterno { background: var(--fondo-alt); }


/* ---------- 2 · TIPOGRAFÍA ---------------------------------- */

.display {
  font-family: var(--fuente-display);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: var(--interlinea-display);
  letter-spacing: var(--tracking-display);
  font-optical-sizing: auto;
}

/* `font-optical-sizing: auto` en todas las serif, no solo en el hero.
   Newsreader tiene eje óptico: a tamaño grande adelgaza los remates y
   sube el contraste, a tamaño chico los engorda para que aguanten.
   Sin esto el navegador usa un solo dibujo para todos los cuerpos y
   los títulos medianos se ven blandos.                              */
.titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-titulo);
  font-weight: 300;
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
  font-optical-sizing: auto;
}

.seccion-titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-seccion);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: var(--tracking-titulo);
  font-optical-sizing: auto;
}

.cursiva { font-style: italic; }

.sub {
  font-size: var(--t-sub);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: var(--medida);
}

.parrafo { max-width: var(--medida); }
.parrafo + .parrafo { margin-top: var(--e-5); }

.apagado { color: var(--texto-suave); }

/* Eyebrow — hereda el tracking abierto del wordmark original */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--acento-texto);
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}

.regla {
  height: 1px;
  background: var(--linea);
  border: 0;
  width: 100%;
}


/* ---------- 3 · ACCIONES ------------------------------------
   Ni píldoras con gradiente ni botones con ícono adentro de un
   círculo. Un rectángulo tipográfico que invierte al tocarlo. */

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5);
}

.accion {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-6);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--texto);
  font-size: var(--t-chico);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-presion) var(--curva-descenso);
}
.accion .tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.accion--fuerte {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--texto-inverso);
}

@media (hover: hover) and (pointer: fine) {
  .accion:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--texto-inverso);
  }
  .accion--fuerte:hover {
    background: var(--azul-profundo);
    border-color: var(--azul-profundo);
  }
}
.accion:active { transform: scale(0.978); }

/* Área táctil ampliada sin tocar el layout.
   Los enlaces tipográficos miden ~24px de alto: correcto para el
   ojo, insuficiente para el dedo. Este pseudo-elemento lleva la
   zona sensible a 44px sin mover un solo píxel de la maqueta.   */
.enlace { position: relative; }

.enlace::before {
  content: "";
  position: absolute;
  inset: -11px -6px;
}

/* Enlace editorial — la regla se dibuja de izquierda a derecha */
.enlace {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--t-chico);
  padding-bottom: 3px;
  color: var(--acento-texto);
}
.enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  /* Curva de entrada, no de traslado: el subrayado aparece, y una
     ease-in-out arranca lento justo cuando el ojo está mirando.   */
  transition: clip-path var(--t-hover) var(--curva-descenso);
  clip-path: inset(0 55% 0 0);
}
@media (hover: hover) and (pointer: fine) {
  .enlace:hover::after { clip-path: inset(0 0 0 0); }
}
.acto-oscuro .enlace { color: var(--azul-claro); }


/* ---------- 4 · NAVEGACIÓN ----------------------------------
   Una barra editorial que se apoya sobre una hairline al
   scrollear. Nada de píldora flotante de vidrio.              */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  /* backdrop-filter queda deliberadamente fuera de la transición:
     interpolar un filtro sobre un elemento fijo repinta en cada
     frame del scroll. Entra de golpe y el fondo, que sí se funde,
     tapa el corte.                                                */
  transition:
    background-color var(--t-estado) ease,
    border-color var(--t-estado) ease;
}
.nav[data-anclada="si"] {
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}

.nav__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  height: 72px;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;      /* el logo es un enlace: le corresponde área táctil */
  text-decoration: none;
  color: var(--texto);
  flex: none;
  transition: opacity var(--t-presion) var(--curva-descenso);
}
.marca:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .marca:hover { opacity: 0.82; }
}
.marca__iso { display: block; height: 30px; color: var(--azul); flex: none; }
.marca__iso svg { height: 100%; width: auto; }
.marca__nombre { display: block; height: 10px; color: var(--azul); flex: none; }
.marca__nombre svg { height: 100%; width: auto; max-width: none; }

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: var(--e-7);
}
.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* mínimo táctil, también con mouse y trackpad */
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__enlace:hover { color: var(--texto); }
}
.nav__enlace[aria-current="true"] { color: var(--acento-texto); }

/* El único dato de contacto vive al final de la página. En la barra
   solo queda el camino hasta ahí. En pantallas angostas sobrevive
   ese enlace y desaparecen los demás: una pantalla, un destino.  */
@media (max-width: 900px) {
  .nav__enlace { display: none; }
  .nav__enlace--clave {
    display: inline-flex;
    color: var(--acento-texto);
  }
}

/* El nombre de la firma se sostiene en el teléfono.
   Cuando la barra todavía llevaba el número, no entraba y había que
   esconderlo. Al mudarse el contacto al final de la página quedó
   lugar, así que se achica en vez de desaparecer: una consultora que
   en el celular solo muestra un símbolo pierde reconocimiento justo
   donde la mayoría la va a ver por primera vez.                    */
@media (max-width: 560px) {
  .marca { gap: var(--e-2); }
  .marca__iso { height: 26px; }
  .marca__nombre { height: 9px; }
}

/* Por debajo de 360px ya no entra junto al enlace de Contacto, y
   entre el nombre y el camino al contacto gana el contacto. */
@media (max-width: 359px) {
  .marca__nombre { display: none; }
}


/* ---------- 5 · HERO ----------------------------------------
   División editorial asimétrica. Nunca 50/50.                 */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(72px + var(--e-7));
  padding-bottom: var(--e-8);
  overflow: hidden;
}

.hero__grilla {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  align-items: center;
  gap: var(--e-9);
  width: 100%;
}

.hero__titulo { margin-block: var(--e-6) var(--e-6); }
.hero__titulo .linea { display: block; }
.hero__titulo .cursiva { color: var(--azul-profundo); }

.hero__sub { margin-bottom: var(--e-8); }
.hero__sub strong { font-weight: 500; color: var(--texto); }

/* Lluvia de fondo: hairlines verticales que descienden muy
   despacio. 4% de opacidad — se percibe, no se mira.          */
.hero__lluvia {
  position: absolute;
  inset: -20% 0 -20% 0;
  z-index: var(--z-fondo);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--azul) 0 1px,
    transparent 1px 74px
  );
  opacity: 0.055;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  animation: caer 26s linear infinite;
  will-change: transform;
}
@keyframes caer {
  from { transform: translateY(-160px); }
  to   { transform: translateY(0); }
}

/* Isotipo protagonista.
   El tercer término del min() lo ata a la altura disponible: en una
   notebook de 700px el isotipo cede tamaño antes que el CTA salga
   del pliegue. Sin eso, la llamada a la acción queda cortada.     */
.hero__marca {
  justify-self: center;
  width: min(100%, 25rem, 46dvh);
  color: var(--azul);
}
.hero__marca svg { width: 100%; height: auto; overflow: visible; }

/* El agua del pie del isotipo respira */
.marca-agua-viva {
  transform-origin: center;
  animation: respirar var(--t-ambiente) ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 1; }
  50%      { transform: translateY(2px) scaleX(1.012); opacity: 0.78; }
}

/* Indicador de scroll: una línea que cae, no una flecha rebotando */
.hero__bajar {
  position: absolute;
  left: var(--canal);
  bottom: var(--e-7);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: opacity var(--t-estado) ease;
}
/* Cumplida su función, se va. Un indicador de scroll que sigue
   latiendo cuando ya scrolleaste es decoración, no información. */
[data-scrolleado="si"] .hero__bajar { opacity: 0; }
.hero__bajar i {
  display: block;
  width: 1px; height: 48px;
  background: var(--linea-fuerte);
  overflow: hidden;
  position: relative;
}
.hero__bajar i::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 18px;
  background: var(--azul);
  animation: gota 2.4s var(--curva-agua) infinite;
}
@keyframes gota {
  0%       { transform: translateY(-20px); opacity: 0; }
  22%      { opacity: 1; }
  78%      { opacity: 1; }
  100%     { transform: translateY(48px); opacity: 0; }
}

/* Notebooks de pantalla baja: el titular cede antes que el pliegue */
@media (min-width: 901px) and (max-height: 780px) {
  .hero { --t-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }
  .hero__titulo { margin-block: var(--e-5); }
  .hero__sub { margin-bottom: var(--e-6); }
}

@media (max-width: 900px) {
  .hero__grilla {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }
  .hero__marca {
    order: -1;
    justify-self: start;
    width: min(38%, 8.5rem);
  }
  .hero__titulo { margin-block: var(--e-5); }
  .hero__sub { margin-bottom: var(--e-6); }
  .hero__bajar { display: none; }
  .hero { min-height: auto; padding-block: calc(72px + var(--e-6)) var(--e-8); }
}


/* ---------- 6 · BLOQUE CON COLUMNA DE ETIQUETA -------------- */

.dupla {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: var(--e-9);
  align-items: start;
}
.dupla__etiqueta { position: sticky; top: calc(72px + var(--e-6)); }
.dupla__etiqueta .regla { margin-top: var(--e-5); }

@media (max-width: 860px) {
  .dupla { grid-template-columns: 1fr; gap: var(--e-6); }
  .dupla__etiqueta { position: static; }
}

.primer-parrafo {
  font-family: var(--fuente-display);
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.5;
  font-optical-sizing: auto;
  color: var(--texto);
  max-width: var(--medida);
}


/* ---------- 7 · ÁREAS — LA CASCADA --------------------------
   Cinco brazos que caen sobre el mismo cauce. La barra vertical
   de la izquierda se llena a medida que se recorre la sección:
   es literalmente el caudal.                                   */

.areas { position: relative; }

.areas__grilla {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: var(--e-9);
  align-items: start;
}

.areas__indice { position: sticky; top: calc(72px + var(--e-6)); }
.areas__indice ul { margin-top: var(--e-6); display: grid; }

/* Sin numeración. El indicador de posición es el mismo punto que
   abre cada eyebrow del sistema: se enciende cuando el caudal llega
   a esa área. Numerar 01-05 sería decorar con información que el
   orden de lectura ya da.                                          */
.areas__indice a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  font-size: var(--t-chico);
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--t-estado) ease;
}
.areas__indice a::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--linea-fuerte);
  transition:
    background-color var(--t-estado) ease,
    transform var(--t-estado) var(--curva-descenso);
}
.areas__indice a[data-activo="si"] {
  color: var(--acento-texto);
  font-weight: 500;
}
.areas__indice a[data-activo="si"]::before {
  background: var(--azul);
  transform: scale(1.5);
}
@media (hover: hover) and (pointer: fine) {
  .areas__indice a:hover { color: var(--texto); }
}

/* El cauce: la hairline de la izquierda se llena con el scroll.
   Se anima con scaleY (GPU) y nunca con height (layout).      */
.areas__lista {
  position: relative;
  padding-left: var(--e-7);
  border-left: 1px solid var(--linea);
}
.areas__lista::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px;
  height: 100%;
  background: var(--azul);
  transform: scaleY(var(--caudal, 0));
  transform-origin: top;
  will-change: transform;
}

.area { padding-block: var(--e-9); position: relative; }
.area:first-child { padding-top: 0; }
.area + .area { border-top: 1px solid var(--linea); }

/* Nodo de confluencia: donde cada brazo se suma al cauce.
   Reemplaza a la numeración 01-05. El anillo del color del papel
   abre un hueco en la hairline para que el punto se lea encima. */
.area__nodo {
  position: absolute;
  left: calc(var(--e-7) * -1 - 1px);
  top: calc(var(--e-9) + var(--e-4));   /* a la altura de la primera línea del título */
  width: 7px; height: 7px;
  margin-left: -3px;
  border-radius: var(--r-pill);
  background: var(--linea-fuerte);
  box-shadow: 0 0 0 5px var(--fondo);
  transition:
    background-color var(--t-estado) ease,
    transform var(--t-estado) var(--curva-descenso);
}
.area:first-child .area__nodo { top: var(--e-4); }
.area[data-visto="si"] .area__nodo {
  background: var(--azul);
  transform: scale(1.3);
}

.area__titulo { margin-bottom: var(--e-4); }
.area__texto { margin-bottom: var(--e-6); }

.area__servicios {
  display: grid;
  /* El min() interno es obligatorio: sin él, minmax(13rem, 1fr) fija
     un piso de 208px por pista que ninguna columna puede bajar, y en
     pantallas angostas la grilla desborda en vez de colapsar a una. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--e-4) var(--e-6);
  max-width: 46rem;
}
.area__servicios li {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: var(--e-3);
  font-size: var(--t-chico);
  color: var(--texto-suave);
}
.area__servicios li::before {
  content: "";
  height: 1px;
  background: var(--linea-azul);
  transform: translateY(-4px);
}

@media (max-width: 860px) {
  .areas__grilla { grid-template-columns: 1fr; gap: var(--e-6); }
  .areas__indice { display: none; }
  .areas__lista { padding-left: var(--e-5); }
  .area { padding-block: var(--e-8); }
  .area__nodo {
    left: calc(var(--e-5) * -1 - 1px);
    top: calc(var(--e-8) + var(--e-3));
  }
  .area:first-child .area__nodo { top: var(--e-3); }
}


/* ---------- 8 · MÉTODO — TRES TIEMPOS ----------------------- */

.metodo__grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-8);
  margin-top: var(--e-9);
}
/* Sin numeración. Cada tiempo se abre con una regla de dos tramos:
   un tramo corto en azul y el resto en hairline. Es el mismo recurso
   que separa los servicios de cada área, así que la página entera
   marca jerarquía con líneas y no con números decorativos.        */
.tiempo {
  padding-top: var(--e-5);
  background-image:
    linear-gradient(to right, var(--azul-claro) 0 var(--e-6), transparent var(--e-6)),
    linear-gradient(to right, var(--linea-inversa) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px;
  background-position: top left, top left;
}
.tiempo h3 {
  font-family: var(--fuente-display);
  font-weight: 300;
  font-size: var(--t-seccion);
  line-height: 1.15;
  letter-spacing: var(--tracking-titulo);
  margin-bottom: var(--e-4);
}

@media (max-width: 860px) {
  .metodo__grilla { grid-template-columns: 1fr; gap: var(--e-6); margin-top: var(--e-7); }
}


/* ---------- 9 · CONTACTO ------------------------------------
   Único punto de conversión del sitio. Los datos de contacto no
   aparecen en ningún otro lado: ni en la barra ni en el hero. Un
   solo destino, sin competencia interna.                        */

.contacto__grilla {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--e-9);
  align-items: start;
  margin-top: var(--e-8);
}
.contacto__grilla > * { min-width: 0; }

.contacto__canales { display: grid; gap: var(--e-4); justify-items: start; }
.contacto__canales .accion {
  width: 100%;
  max-width: 24rem;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-5) var(--e-6);
}
.accion__canal { letter-spacing: 0.02em; }

.contacto__sede { font-style: normal; }
.sede__rol {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--acento-texto);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea-fuerte);
  margin-bottom: var(--e-4);
}
.sede__ciudad { margin-bottom: var(--e-5); }
.contacto__sede .dir { font-size: var(--t-chico); color: var(--texto-suave); }

@media (max-width: 860px) {
  .contacto__grilla { grid-template-columns: 1fr; gap: var(--e-7); }
  .contacto__canales .accion { max-width: none; }
}


/* ---------- 10 · PIE ----------------------------------------
   La versión anterior cerraba con el wordmark a ancho completo al
   10% de blanco. Se quitó: a esa opacidad no se lee como palabra ni
   funciona como textura, queda en el peor punto medio. Además
   repetía el titular del hero palabra por palabra y nombraba a la
   marca tres veces en la misma pantalla.

   El cierre ahora es un colofón: la marca como firma, tres columnas
   de datos reales, y la dirección web como último gesto grande —que
   además es algo en lo que se puede hacer clic, no un adorno.     */

.pie {
  padding-top: var(--aire-seccion);
  padding-bottom: var(--e-7);
  overflow: hidden;
}

/* Se probó repetir acá la trama de líneas del hero, en reposo. Sobre
   papel funciona; sobre casi negro y a esa opacidad lee como bandeo
   de compresión, no como textura. Se quitó: en el hero se queda.  */

/* Colofón anclado a la izquierda.
   El contenido del pie es corto y el contenedor mide 1140px: el
   sobrante tiene que caer en algún lado. Con tres pistas `fr`
   quedaba un hueco de 154px adentro de la primera columna, y con
   `space-between` el hueco crecía al medio. Anclando todo a la
   izquierda con separaciones fijas, el aire sobrante se va al
   margen derecho, que es donde un bloque editorial lo pone: deja
   de ser un agujero y pasa a ser campo abierto. La regla del pie
   cruza a lo ancho por debajo y sostiene el conjunto.            */
.pie__cuerpo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--e-8) var(--e-10);
}
.pie__firma { max-width: 32ch; }
.pie__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8) var(--e-10);
}

/* Firma: el isotipo como sello, no como marca de agua */
.pie__iso { display: block; height: 52px; color: var(--azul-claro); }
.pie__iso svg { height: 100%; width: auto; }
.pie__nombre { display: block; height: 13px; margin-top: var(--e-5); color: var(--texto-inverso); }
.pie__nombre svg { height: 100%; width: auto; max-width: none; }
.pie__lema { margin-top: var(--e-5); font-size: var(--t-chico); max-width: 36ch; }

.pie__rotulo {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--azul-claro);
  margin-bottom: var(--e-4);
}
.pie__columna { font-style: normal; font-size: var(--t-chico); }
.pie__sede p:not(.pie__rotulo) { color: rgba(255, 255, 255, 0.85); line-height: 1.75; }

.pie__columna ul { display: grid; }
.pie__columna a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* el pie también se toca con el pulgar */
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition:
    color var(--t-hover) ease,
    opacity var(--t-presion) var(--curva-descenso);
}
.pie__columna a:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .pie__columna a:hover { color: var(--texto-inverso); }
}

/* El dominio estaba acá abajo a 56px, o sea al mismo rango
   tipográfico que los H2 de sección. Era el segundo elemento más
   grande de la página siendo el menos importante: quien lo lee ya
   está en esa dirección. Bajó a la barra, en micro mayúscula, que
   es donde vive un dominio. El pie ya no tiene gesto grande: el
   sitio tiene el suyo en el hero y con uno alcanza.               */

.pie__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
  justify-content: space-between;
  margin-top: var(--e-9);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea-inversa);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Dos polos también acá: lo legal junto, y volver arriba enfrente.
   Tres ítems sueltos con space-between dejan el del medio flotando
   sin motivo.                                                      */
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
}
.pie__dominio {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--azul-claro);
  transition: color var(--t-hover) ease, opacity var(--t-presion) var(--curva-descenso);
}
.pie__dominio:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .pie__dominio:hover { color: var(--texto-inverso); }
}

/* Único movimiento ascendente de todo el sitio, y es deliberado:
   es el único elemento cuya función es, literalmente, subir. El
   segmento recorre la línea hacia arriba al pasar el cursor.     */
.pie__arriba {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  transition: color var(--t-hover) ease, opacity var(--t-presion) var(--curva-descenso);
}
.pie__arriba i {
  display: block;
  position: relative;
  width: 1px;
  height: 22px;
  overflow: hidden;
  background: var(--linea-inversa);
}
.pie__arriba i::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 9px;
  background: var(--azul-claro);
  transition: transform var(--t-estado) var(--curva-descenso);
}
.pie__arriba:active { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .pie__arriba:hover { color: var(--texto-inverso); }
  .pie__arriba:hover i::after { transform: translateY(-22px); }
}

@media (max-width: 860px) {
  .pie__cuerpo { gap: var(--e-7); }
  .pie__firma { max-width: none; flex: 1 1 100%; }
  .pie__datos { flex: 1 1 100%; gap: var(--e-7) var(--e-9); }
}
@media (max-width: 520px) {
  .pie__datos { flex-direction: column; gap: var(--e-6); }
  .pie__barra { margin-top: var(--e-8); }
}


/* ---------- 10b · PÁGINA 404 --------------------------------
   Reusa el sistema entero: mismo papel, misma lluvia del hero,
   mismo isotipo. Un 404 que parece de otro sitio es una grieta
   en la coherencia justo cuando el visitante ya está perdido. */

.error {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--e-9);
  overflow: hidden;
}
.error__lluvia {
  position: absolute;
  inset: -20% 0;
  z-index: var(--z-fondo);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--azul) 0 1px,
    transparent 1px 74px
  );
  opacity: 0.055;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
}
.error__caja { max-width: 46rem; }
.error__marca { width: 6.5rem; color: var(--azul); margin-bottom: var(--e-8); }
.error__marca svg { width: 100%; height: auto; }
.error__titulo { margin-block: var(--e-5) var(--e-5); max-width: 16ch; }
.error__titulo .cursiva { color: var(--azul-profundo); }
.error__sub { margin-bottom: var(--e-8); }


/* ---------- 11 · GRANO --------------------------------------
   Textura de papel. Fijo y pointer-events:none para no obligar
   al GPU a repintar en scroll.                                 */

.grano {
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: 0.030;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ---------- 12 · EL DESCENSO --------------------------------
   El revelado del sistema. El contenido CAE y se asienta:
   barrido de clip-path de arriba hacia abajo + un desplazamiento
   negativo mínimo. Es la inversión deliberada del fade-up que
   usa el 100% de los sitios generados por IA.                  */

/* Los insets laterales y el superior son NEGATIVOS a propósito, o sea
   que ensanchan la región de recorte más allá de la caja.

   Motivo: `inset(0)` recorta exactamente en el borde de la caja, y
   varias mayúsculas de Newsreader —la C es el caso peor— tienen ink
   que sobresale a la izquierda de su origen de avance. El layout no
   lo contempla, así que la caja mide bien y la letra igual aparece
   guillotinada. Le pasaba a "Cinco disciplinas.", a "Contable" y a
   "Comercio exterior". Medio em de aire lo resuelve para cualquier
   glifo y para cualquier tamaño, porque la unidad acompaña a la
   tipografía. El inset de abajo sigue en 100% / 0: ahí está el
   barrido, y ese es el único borde que tiene que recortar.        */

.desciende {
  clip-path: inset(-0.35em -0.5em 100% -0.5em);
  transform: translateY(-14px);
  opacity: 0;
  transition:
    clip-path var(--t-revelado) var(--curva-descenso),
    transform var(--t-revelado) var(--curva-descenso),
    opacity calc(var(--t-revelado) * 0.6) ease;
  transition-delay: calc(var(--i, 0) * var(--escalon));
}
.desciende[data-visible="si"] {
  clip-path: inset(-0.35em -0.5em -0.35em -0.5em);
  transform: translateY(0);
  opacity: 1;
}

/* Sin JS, nada se esconde */
.sin-js .desciende {
  clip-path: none;
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .desciende { transform: none; clip-path: none; }
  .hero__lluvia, .marca-agua-viva, .hero__bajar i::after { animation: none; }
  .hero__bajar i::after { opacity: 0.5; transform: translateY(0); }
}


/* ---------- 13 · IMPRESIÓN ---------------------------------- */

@media print {
  .nav, .grano, .hero__lluvia, .hero__bajar, .areas__indice { display: none; }
  .desciende { clip-path: none; transform: none; opacity: 1; }
  .acto-oscuro { background: #fff; color: #000; }
  html { background: #fff; }
}