/* =====================================================================
   sitio.css — reset, tipografía base y los componentes compartidos por
   todas las páginas: botón, tarjeta, franja de sección y encabezado de
   sección (eyebrow + título), y también la composición de las páginas:
   cabecera, hero, grilla de servicios, pilares, filas numeradas, pie y
   migas.

   Un comentario anterior decía que esos componentes vivían en
   "layout.css" y "componentes.css". Esos dos archivos nunca existieron,
   y el comentario alcanzó para que el candado de clases huérfanas los
   diera por definidos: la portada salió con las ocho tarjetas apiladas
   en una columna mientras todo estaba en verde. Lo único que vive fuera
   es lo que usa una sola página (inicio.css, institucional.css).

   Consume exclusivamente tokens de tokens.css. --fuente-titulos y
   --fuente-texto las define tipografia.css; acá solo se referencian.

   Selectores de un solo nivel de clase (o clase + pseudo-estado), sin
   anidamiento, salvo ".prosa" para el texto editorial sin clase por
   párrafo y ".tarjeta > :last-child" para empujar el último hijo al pie
   de una tarjeta más corta que su vecina de fila.
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

/* Tipografía base de elementos sin clase. La jerarquía se construye con
   peso y tracking, no con una segunda familia. */
body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-texto);
  color: var(--color-texto);
  background-color: var(--color-superficie);
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-titulo);
  line-height: var(--interlinea-titulo);
  color: inherit;
  /* Evita huérfanas de una palabra en los títulos largos (la franja CTA, sobre
     todo). Degrada a nada en motores que no lo conocen, así que no hay red de
     seguridad que armar. */
  text-wrap: balance;
}

/* El h3 y el h2 de /servicios (.fila-servicio__titulo) son chicos a pesar del
   tag: el tracking negativo pensado para el titular de 56px les cierra las
   contraformas a 17-19px, donde no hace falta. */
h3,
.fila-servicio__titulo {
  letter-spacing: normal;
}

h1 {
  font-size: var(--titulo-lg);
}

h2 {
  font-size: var(--titulo-md);
}

h3 {
  font-size: var(--titulo-sm);
}

p {
  max-width: var(--ancho-texto);
  text-wrap: pretty;
}

/* --color-enlace-local con fallback, igual mecanismo que --enfoque-color más
   abajo: cada superficie oscura (franja--inversa, franja--acento, hero, pie,
   tarjeta--acceso) redefine esta variable una sola vez y ningún enlace suelto
   dentro de esa superficie puede volver a caer en el azul de --color-enlace. */
a {
  color: var(--color-enlace-local, var(--color-enlace));
}

a:visited {
  color: var(--color-enlace-visitado);
}

address {
  font-style: normal;
}

small {
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

/* Única excepción a "sin anidamiento": prosa editorial sin clase por
   párrafo (Quiénes Somos y similares). */
.prosa > p,
.prosa > ul {
  max-width: var(--ancho-texto);
  color: var(--color-texto-suave);
  text-wrap: pretty;
}

.prosa > p:not(:last-child) {
  margin-block-end: var(--espacio-4);
}

/* Enlace de salto y texto solo para lectores de pantalla: el layout y
   las vistas dan estas dos clases por existentes. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  top: var(--espacio-2);
  left: var(--espacio-2);
  z-index: 100;
  padding: var(--espacio-3) var(--espacio-5);
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  font-weight: var(--peso-medio);
  border-radius: var(--radio-sutil);
  transform: translateY(-150%);
  transition: transform var(--duracion-normal) var(--curva-salida);
}

.salto:focus-visible {
  transform: translateY(0);
}

/* Anillo de foco propio, nunca el outline por defecto. Las franjas
   oscuras redefinen --enfoque-color: un anillo azul de --color-foco
   casi no se ve sobre --color-superficie-inversa. */
:focus-visible {
  outline: 2px solid var(--enfoque-color, var(--color-foco));
  outline-offset: 2px;
  border-radius: var(--radio-sutil);
}

/* Ícono del sprite: un solo tamaño, sin color propio. El color sale por
   herencia de currentColor — así el mismo <svg><use> se lee correcto
   tanto en tarjeta clara (celda-servicio, datos) como en franja oscura
   (pilares, pie, tarjeta--acceso) sin una regla por contexto. */
.icono {
  width: var(--espacio-6);
  height: var(--espacio-6);
  flex-shrink: 0;
  fill: currentColor;
}

/* Único punto que fija el ancho máximo de contenido. La canaleta es
   fluida: respira igual en 320px y en 1920px sin breakpoint propio. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--canaleta);
}

.contenedor--estrecho {
  max-width: var(--ancho-estrecho);
}

/* Encabezado de sección: eyebrow + h2. El contraste de tracking entre
   el eyebrow (abierto, mayúsculas) y el título (apretado, 800) produce
   la lectura editorial sin una segunda familia tipográfica. */
.eyebrow {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin-block-end: var(--espacio-3);
}

/* Botón: un bloque, cuatro modificadores. El borde de 2px está siempre
   presente (transparente cuando no hace falta) para que el cambio de
   color en :hover no mueva el layout. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding-block: var(--espacio-3);
  padding-inline: var(--espacio-6);
  border: 2px solid transparent;
  border-radius: var(--radio-boton);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Blindaje: un <a class="boton"> sin modificador es un <a> antes que nada, y
     sin este color hereda el azul de enlace de la regla global. Cualquier
     modificador (primario, secundario, inverso, claro) declara el suyo y gana
     por orden de aparición; esto es solo la red debajo. */
  color: inherit;
  transition:
    background-color var(--duracion-normal) var(--curva-salida),
    border-color var(--duracion-normal) var(--curva-salida),
    color var(--duracion-normal) var(--curva-salida),
    box-shadow var(--duracion-normal) var(--curva-salida),
    transform var(--duracion-rapida) var(--curva-salida);
}

.boton:active {
  transform: scale(0.98);
}

.boton--primario {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-texto-inverso);
}

.boton--primario:hover {
  background-color: var(--color-acento-fuerte);
  border-color: var(--color-acento-fuerte);
  box-shadow: var(--sombra-hover);
}

.boton--primario:active {
  background-color: var(--color-acento-fuerte);
  box-shadow: none;
}

.boton--secundario {
  background-color: transparent;
  border-color: var(--color-borde-fuerte);
  color: var(--color-acento);
}

.boton--secundario:hover {
  background-color: var(--color-acento-tenue);
  border-color: var(--color-acento);
  color: var(--color-acento-fuerte);
}

.boton--secundario:active {
  background-color: var(--color-acento-tenue);
}

/* Sobre franja oscura: el borde tenue de --color-borde-fuerte
   desaparece sobre navy y necesita su propia paleta de contraste. El borde
   sale del texto de la propia franja (mezcla) en vez de un token de
   borde inverso fijo: así funciona igual de bien sobre cualquier navy del
   sitio, sin depender de que ese tono en particular tenga contraste.

   Es "Acceso Propietarios" en el hero y en la franja CTA final de
   01-inicio-1440.png: la acción más importante del sitio público (entrar
   al panel privado), al lado del primario sólido blanco. El cliente lo
   reportó como "fantasma" mirando un Chrome real -relleno 100%
   transparente + borde al 35% desaparece contra el degradado navy del
   hero, aunque el TEXTO mida ~10:1 de contraste-. El checker mide el
   texto, no la FORMA del botón: sin relleno propio ni borde firme, el
   contorno se disuelve contra el fondo antes de que el ojo llegue a leer
   el texto de adentro. Se le suma un relleno tenue en reposo (mismo
   color-mix que ya usaba el hover, corrido acá) y se sube el borde de
   35% a 55%: más margen del que pide el mínimo de contraste, para
   sobrevivir a un monitor con gestión de color agresiva sin competir con
   el primario blanco de al lado -sólido > tenue > texto de navegación
   sigue siendo la jerarquía-. */
.boton--inverso {
  background-color: color-mix(in srgb, var(--color-texto-inverso) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-texto-inverso) 55%, transparent);
  color: var(--color-texto-inverso);
}

.boton--inverso:hover {
  background-color: color-mix(in srgb, var(--color-texto-inverso) 20%, transparent);
  border-color: var(--color-texto-inverso);
  color: var(--color-texto-inverso);
}

/* Sin esto, :active heredaba el mismo 12% del reposo -sin cambio de
   feedback- porque .boton--inverso, al declarar su propio background,
   ya no cae en el --color-acento-tenue de .boton--secundario:active
   (pensado para fondo blanco, no serviría igual sobre navy). */
.boton--inverso:active {
  background-color: color-mix(in srgb, var(--color-texto-inverso) 26%, transparent);
}

/* Inversión del primario, blanco sobre acento. Solo en la franja CTA
   final, para leerse como cierre del recorrido. */
.boton--claro {
  background-color: var(--color-superficie);
  border-color: var(--color-superficie);
  color: var(--color-acento);
}

.boton--claro:hover {
  background-color: var(--color-superficie-alterna);
  box-shadow: var(--sombra-hover);
}

/* Reservado al botón de Acceso Propietarios: un radio que aparece una
   sola vez en el sitio sigue significando algo. Pero el marcado real es
   `class="boton boton--pill"`, SIN un segundo modificador de color —no
   ".boton--primario", no ".boton--secundario"—, así que un modificador que
   solo cambia el border-radius deja al botón sin fondo ni borde propios:
   la acción más importante de la cabecera se pintaba como texto pelado,
   heredando apenas el color de .boton (currentColor). Al ser un
   modificador reservado a un único botón en todo el sitio, puede
   permitirse traer su propia apariencia COMPLETA en vez de depender de
   que el marcado le sume una variante. Reusa la paleta de --primario
   (acento sobre acento-fuerte en :hover) porque es la acción destacada de
   la cabecera, no una acción secundaria. */
.boton--pill {
  border-radius: var(--radio-pill);
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-texto-inverso);
}

.boton--pill:hover {
  background-color: var(--color-acento-fuerte);
  border-color: var(--color-acento-fuerte);
  box-shadow: var(--sombra-hover);
}

.boton--pill:active {
  background-color: var(--color-acento-fuerte);
  box-shadow: none;
}

/* Contextual: bajo una superficie oscura (hero, franjas inversa/acento) el
   primario navy-sobre-navy no contrasta —dos azules pegados—. Ahí el
   primario tiene que ser el claro: mismas declaraciones que .boton--claro,
   pero atadas al contexto en vez de pedirle al marcado que cambie de
   modificador según la franja en la que caiga. */
.hero .boton--primario,
.franja--inversa .boton--primario,
.franja--acento .boton--primario {
  background-color: var(--color-superficie);
  border-color: var(--color-superficie);
  color: var(--color-acento);
}

.hero .boton--primario:hover,
.franja--inversa .boton--primario:hover,
.franja--acento .boton--primario:hover {
  background-color: var(--color-superficie-alterna);
  box-shadow: var(--sombra-hover);
}

/* Tarjeta sin sombra en reposo: la estructura se lee por el filete de
   1px, la sombra es señal de foco o puntero, no adorno permanente.
   display:flex column para que, cuando dos tarjetas comparten fila en una
   grilla (Visión/Misión, Consorcios en el panel) y una tiene más texto, el
   último hijo de la más corta se empuje al pie en vez de dejar un colchón de
   fondo muerto colgando del borde inferior. */
.tarjeta {
  display: flex;
  flex-direction: column;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sutil);
  padding: var(--espacio-6);
  transition:
    box-shadow var(--duracion-normal) var(--curva-salida),
    border-color var(--duracion-normal) var(--curva-salida),
    transform var(--duracion-rapida) var(--curva-salida);
}

.tarjeta > :last-child {
  margin-block-start: auto;
}

.tarjeta:hover,
.tarjeta:focus-within {
  border-color: var(--color-borde-fuerte);
  box-shadow: var(--sombra-flotante);
}

/* Franja: banda de ancho completo, la unidad que arma el ritmo
   oscuro/blanco/gris/acento. Los modificadores de superficie redefinen
   --enfoque-color para que el foco siga visible dentro de la franja. */
.franja {
  padding-block: var(--espacio-seccion);
  background-color: var(--color-superficie);
  color: var(--color-texto);
}

.franja--inversa {
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  --enfoque-color: var(--color-foco-inverso);
  --color-enlace-local: var(--color-texto-inverso-suave);
}

.franja--alterna {
  background-color: var(--color-superficie-alterna);
}

.franja--acento {
  background-color: var(--color-acento);
  color: var(--color-texto-inverso);
  --enfoque-color: var(--color-foco-inverso);
  --color-enlace-local: var(--color-texto-inverso-suave);
}

/* Franja CTA: apilada en mobile, en fila desde 768px — el mismo
   quiebre que ya usa el resto del sitio para pasar a contenido en fila. */
.franja--cta .contenedor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-5);
}

@media (min-width: 768px) {
  .franja--cta .contenedor {
    flex-direction: row;
    /* flex-start y no center: con center, los dos botones se centraban contra
       la ALTURA TOTAL del bloque de texto (título de tres líneas + bajada), así
       que quedaban flotando a la altura de la segunda línea del título, sin
       relación con ninguna de las dos piezas. Con flex-start el bloque de texto
       y las acciones arrancan en la misma línea de base: se componen como una
       sola unidad en vez de un texto y, aparte, dos botones centrados contra él. */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-6);
    /* Envuelve, y no es cosmético: a 768 justos el texto y los dos botones suman
       789px, y sin envolver ese faltante se lo lleva el documento entero, que
       desbordaba 21px en las tres páginas que usan esta franja. Un contenedor
       flex en fila sin `wrap` no se achica: empuja. Medido por el arnés visual. */
    flex-wrap: wrap;
  }
}

/* Única excepción admitida a "cero !important": tiene que ganarle a
   cualquier duración que un componente futuro declare, no solo a las
   que ya conocemos hoy. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Composición de página: cabecera, interior del hero, la grilla reglada
   de servicios, el relato institucional, la lista numerada de
   /servicios, los datos de contacto y el pie. Ninguna de estas clases
   fija ancho de sección ni color de fondo de franja completa (eso es
   .hero, .celda-servicio, .pilares, .grilla-servicios y .grilla-vm,
   fuera de esta hoja): acá va solo lo que arma el INTERIOR de cada
   bloque con las mismas herramientas que el resto del archivo —flex,
   gap y los tokens de siempre—, sin anidar más de una clase.

   Los enlaces sueltos dentro de una franja oscura ya NO se resuelven acá con
   un selector anidado: cada superficie oscura redefine --color-enlace-local
   en su propia regla (.franja--inversa, .franja--acento, .hero, .pie,
   .tarjeta--acceso), y la regla global "a" del principio del archivo la
   consume con fallback a --color-enlace. Un enlace sin superficie propia no
   puede volver a heredar el azul claro por accidente.
   ===================================================================== */

/* --- Cabecera: una sola fila desde 900px (marca, navegación y CTA en
   línea), dos filas por debajo (marca + CTA arriba, navegación en su
   propio carril horizontal debajo). ".cabecera__fila" es esa fila única:
   el marcado mete ahí adentro a .marca, .nav, .cabecera__nav-hueco (el
   espacio flexible que separa la navegación del CTA) y el .boton, en ese
   orden. Por debajo de 900px ".nav" se rompe a su propia línea completa
   -"order" lo empuja al final y flex-basis:100% lo obliga a envolver-,
   así que .marca y el .boton quedan arriba y .cabecera__nav-hueco hace el
   mismo trabajo de siempre: empujar el CTA al extremo derecho de esa
   primera línea. */
.cabecera {
  background-color: var(--color-superficie);
  border-block-end: 1px solid var(--color-borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-block: var(--espacio-4);
}

/* Espaciador vacío entre la navegación y el CTA: crece para absorber todo
   el espacio libre de la fila, así el CTA queda pegado al extremo derecho
   sin usar justify-content:space-between en .cabecera__fila -eso separaría
   TAMBIÉN la marca de la navegación, el vacío grande que había que
   cerrar-. Sin contenido propio: no necesita tamaño mínimo. */
.cabecera__nav-hueco {
  flex: 1 1 auto;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-texto);
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-md);
  transition: color var(--duracion-normal) var(--curva-salida);
}

.marca:hover {
  color: var(--color-acento);
}

.marca:active {
  color: var(--color-acento-fuerte);
}

/* Por debajo de 900px, .nav vive dentro de .cabecera__fila pero se
   comporta como si fuera la segunda fila: "order" lo manda al final -así
   .marca y el .boton, que no tienen order propio, quedan juntos arriba- y
   flex-basis:100% lo obliga a ocupar todo el ancho de la fila, lo que
   fuerza el salto de línea sin depender de que el contenido no entre.
   flex-shrink sigue en 1 para que, si hiciera falta, pueda encogerse antes
   que desbordar a 320px. */
.nav {
  order: 1;
  flex: 0 1 100%;
  min-width: 0;
}

.nav ul {
  display: flex;
  gap: var(--espacio-6);
  padding-inline: var(--canaleta);
  padding-block: var(--espacio-3);
  border-block-start: 1px solid var(--color-borde);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--canaleta);
  /* Corte a la derecha en el carril angosto (320-375): avisa que "Contacto"
     sigue ahí sin agregar una flecha o un script. currentColor y no un color
     literal: la máscara solo necesita su canal alfa, el matiz no importa. */
  mask-image: linear-gradient(to right, currentColor calc(100% - var(--espacio-6)), transparent);
}

.nav li {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nav a {
  display: inline-block;
  padding-block: var(--espacio-1);
  color: var(--color-texto-suave);
  text-decoration: none;
  font-weight: var(--peso-medio);
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  transition:
    color var(--duracion-normal) var(--curva-salida),
    border-color var(--duracion-normal) var(--curva-salida);
}

.nav a:hover {
  color: var(--color-acento);
}

.nav a:active {
  color: var(--color-acento-fuerte);
}

.nav a[aria-current="page"] {
  color: var(--color-acento-fuerte);
  font-weight: var(--peso-fuerte);
  border-block-end-color: var(--color-acento);
}

/* A partir de acá el carril deja de tener sentido: entra todo, en línea
   junto a la marca y al CTA dentro de .cabecera__fila -ya no es una fila
   propia, así que pierde el border y el padding que la separaban de la
   fila de arriba-. */
@media (min-width: 900px) {
  .cabecera__fila {
    flex-wrap: nowrap;
    gap: var(--espacio-8);
  }

  .nav {
    order: 0;
    flex: 0 0 auto;
    min-width: 0;
  }

  .nav ul {
    overflow-x: visible;
    /* El corte a la derecha era para avisar que el carril sigue: con todo
       visible ya no hay nada que recortar. */
    mask-image: none;
    /* Sin el filete ni el padding-block de la fila propia que era en
       mobile: el ritmo vertical de la fila única ya lo pone
       .cabecera__fila, y duplicarlo acá desalinearía el centrado con
       .marca y el CTA. */
    padding-block: 0;
    padding-inline: 0;
    border-block-start: 0;
  }

  .nav li {
    scroll-snap-align: none;
  }
}

/* --- Celda de servicio: numeral e título. El numeral va al tamaño de un
   texto de UI (--texto-md), no de un titular: es una referencia de lectura
   ("primero", "segundo"...) para quien navega con lector de pantalla salteado
   -por eso aria-hidden en el marcado-, no la pieza tipográfica más grande de
   la tarjeta.

   El numeral y el ícono se ubican con grid-column/grid-row (ver .celda-servicio
   más abajo) para leerse como UN PAR en la misma fila -antes eran dos
   elementos sueltos apilados uno arriba del otro, en el mismo orden que el
   marcado los declara (numeral primero, ícono después) sin ninguna relación
   visual entre sí-, independiente del orden en el que el marcado los declare. --- */
.celda-servicio__numero {
  display: block;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: var(--peso-titular);
  line-height: 1;
  color: var(--color-texto-tenue);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0;
}

.celda-servicio__titulo {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-block: 0;
}

/* --- Pilares (franja "¿Por qué elegirnos?" / "Nuestros Valores"): cada
   item apila filete, ícono, h3 y párrafo. El color ya lo hereda todo de
   .franja--inversa, que además define --enfoque-color; acá no hace
   falta repetirlo. La regla completa (con el filete y el tamaño del
   ícono) vive más abajo, junto a la composición de la portada, porque
   ahí es donde ya se resuelve el resto del bloque "¿Por qué elegirnos?";
   duplicarla acá con un gap distinto solo dejaba una versión muerta que
   la de abajo pisaba siempre por orden de aparición. --- */

/* --- Relato institucional (Quiénes Somos): apila el h2 y el bloque de
   prosa dentro de la mitad de texto del grid 7/12 + 5/12. --- */
.relato__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

/* --- /servicios: filas de ancho completo con badge numérico circular.
   El contador vive acá, no en el marcado, para que el lector de
   pantalla no anuncie el número dos veces (una por el <ol>, otra por el
   badge). --- */
.lista-servicios {
  counter-reset: fila-servicio;
}

.fila-servicio {
  counter-increment: fila-servicio;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espacio-5);
  padding-block: var(--espacio-6);
  border-block-end: 1px solid var(--color-borde);
}

.fila-servicio__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--espacio-8);
  height: var(--espacio-8);
  border-radius: var(--radio-pill);
  background-color: var(--color-acento-tenue);
  color: var(--color-acento-fuerte);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titular);
  font-size: var(--texto-md);
  font-variant-numeric: tabular-nums;
}

.fila-servicio__numero::before {
  content: counter(fila-servicio);
}

.fila-servicio__texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.fila-servicio__titulo {
  margin-block-end: var(--espacio-2);
  font-size: var(--titulo-sm);
}

/* Tareas: por ahora siempre vacía (hueco de copy declarado en la vista),
   pero el marcado la condiciona a que existan datos, así que la regla
   tiene que estar lista para cuando ese texto llegue. */
.fila-servicio__tareas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-block-start: var(--espacio-3);
  padding-inline-start: var(--espacio-5);
  list-style: disc;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* --- /contacto: los datos de contacto (dirección, teléfono, correo,
   horarios). Apilado vertical en vez de ícono-a-la-izquierda: el mismo
   bloque se reutiliza suelto (horarios, fuera de <address class="datos">)
   y adentro de .datos, con 3 o 4 hijos según el caso, sin que la
   cantidad de hijos rompa el layout. --- */
.datos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}

.datos__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
}

.datos__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-tenue);
}

.datos__valor {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: var(--color-texto);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--duracion-normal) var(--curva-salida);
  /* Un dirección de correo no tiene dónde cortar, y un elemento de grilla no se
     achica por debajo del ancho de su contenido: a 320px el mail medía tres
     píxeles más que la columna y se los pasaba al documento entero. `anywhere`
     y no `break-word` porque solo `anywhere` cuenta para el ancho mínimo del
     elemento, que es justo lo que la grilla mira. */
  overflow-wrap: anywhere;
}

.datos__valor:hover {
  color: var(--color-acento);
}

.contacto-grid__principal {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}

/* Tarjeta de Acceso a Propietarios: la única .tarjeta que se invierte a
   navy — es la acción destacada de la columna lateral, no una tarjeta
   informativa más. Redeclara --enfoque-color y repite border-color +
   box-shadow en :hover/:focus-within con la misma especificidad que
   .tarjeta (clase + pseudo-estado) para ganarle por orden de aparición,
   sin necesitar !important. */
.tarjeta--acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-3);
  background-color: var(--color-superficie-inversa);
  border-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  --enfoque-color: var(--color-foco-inverso);
  --color-enlace-local: var(--color-texto-inverso-suave);
}

.tarjeta--acceso:hover,
.tarjeta--acceso:focus-within {
  border-color: var(--color-borde-inverso);
  box-shadow: var(--sombra-hover);
}

/* --- Pie: sobre navy, con los filetes inversos. Se comprime con
   --espacio-seccion-densa como el resto de las franjas oscuras del
   sitio: el pie es cesura, no otro bloque de respiro. --- */
.pie {
  padding-block-start: var(--espacio-seccion-densa);
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  --enfoque-color: var(--color-foco-inverso);
  --color-enlace-local: var(--color-texto-inverso-suave);
}

.pie__grilla {
  display: grid;
  align-items: start;
  gap: var(--espacio-8);
  padding-block: var(--espacio-8) var(--espacio-6);
}

@media (min-width: 1024px) {
  .pie__grilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--canaleta);
  }
}

.pie__marca {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.pie__contacto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  font-variant-numeric: tabular-nums;
}

.pie__contacto a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
  transition: color var(--duracion-normal) var(--curva-salida);
}

.pie__contacto a:hover {
  color: var(--color-texto-inverso);
}

.pie__nav {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}

.pie__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.pie__nav a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
  transition: color var(--duracion-normal) var(--curva-salida);
}

.pie__nav a:hover {
  color: var(--color-texto-inverso);
}

.pie__horarios {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  font-variant-numeric: tabular-nums;
}

.pie__titulo-columna {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-inverso);
}

.pie__barra {
  border-block-start: 1px solid var(--color-borde-inverso);
  padding-block: var(--espacio-5);
}

.pie__barra p {
  font-size: var(--texto-sm);
  color: var(--color-texto-inverso-suave);
}

/* ==========================================================================
   Los parciales compartidos: la marca, la franja de título de las páginas
   internas y la franja de cierre.

   Van al final y no repartidas por sección porque las tres las usa más de una
   página: la marca aparece en la cabecera y en el pie con colores opuestos, y
   las dos franjas se repiten en las cuatro páginas.
   ========================================================================== */

/* --- La marca -----------------------------------------------------------
   Sin color propio en ningún lado: hereda de su contenedor con currentColor.
   Es lo que permite que la misma marca se lea negra sobre la cabecera blanca
   y blanca sobre el navy del pie, sin duplicarla por tema. */
.marca__grafico {
  inline-size: 2rem;
  block-size: 2rem;
  flex-shrink: 0;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  /* Interlínea apretada: las dos líneas son una sola unidad tipográfica, no un
     párrafo de dos renglones. */
  line-height: 1.1;
}

/* En mayúscula, como el logotipo aprobado: el tracking negativo de titular
   queda para los titulares grandes, no para un nombre de marca corto en caja
   alta -ahí lee apretado, no elegante-. */
.marca__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-md);
  font-weight: var(--peso-titular);
  letter-spacing: normal;
  text-transform: uppercase;
}

/* El contraste entre las dos líneas es de peso y de tracking, no de color: sobre
   navy, bajar la opacidad de la bajada la volvería ilegible. Peso medio y no
   normal: a --texto-xs con 0.14em de tracking, el 400 se leía casi tan tenue
   como el gris de --color-texto-tenue, cuando la bajada del logotipo tiene que
   sostenerse por sí sola sin depender de un color aparte. */
.marca__linea {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* --- La franja de título de las páginas internas ------------------------
   Densa a propósito: es una cesura entre la cabecera y el contenido, no una
   sección de respiro. Usa --espacio-seccion-densa por eso. */
.franja-titulo {
  padding-block: var(--espacio-seccion-densa);
}

.franja-titulo__interior {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-sm);
  color: var(--color-texto-inverso-suave);
}

/* El separador se dibuja en CSS y no se escribe en el marcado: un «/» en el HTML
   se lo lee el lector de pantalla como parte del nombre de la página. */
.migas li + li::before {
  content: "/";
  margin-inline-end: var(--espacio-2);
  color: var(--color-borde-inverso);
}

.migas a {
  color: var(--color-texto-inverso-suave);
  text-decoration-color: var(--color-borde-inverso);
}

.migas a:hover {
  color: var(--color-texto-inverso);
}

/* --- La franja de cierre ------------------------------------------------ */
.franja-cta__texto {
  display: flex;
  flex-direction: column;
  /* espacio-3 y no espacio-2: con 8px la bajada quedaba pegada al último
     renglón del título, como si fuera su cuarta línea en vez de un párrafo
     aparte. 12px alcanzan para separarlos sin abrir tanto que el bloque dual
     título+bajada deje de leerse como una sola unidad. */
  gap: var(--espacio-3);
  /* Medida corta: el texto de una llamada a la acción que cruza toda la pantalla
     deja de leerse como una invitación y pasa a leerse como un párrafo más. Esta
     sí vale en los dos layouts -es una restricción del eje inline, que no cambia
     de eje con el flex-direction- así que queda en la regla base. */
  max-inline-size: 46ch;
}

/* La base de arranque va acá adentro y no en la regla de arriba: `flex-basis`
   mide sobre el EJE PRINCIPAL, y ".franja--cta .contenedor" es `column` por
   debajo de 768px. Suelta, esas 26rem no eran un ancho de arranque sino un ALTO
   fijo: el bloque de texto se dibujaba de 416px con 150px de contenido real
   -título de dos líneas + bajada-, y los 266px de diferencia quedaban como un
   hueco vacío entre la bajada y los dos botones, en las tres páginas que usan
   _FranjaCta.cshtml. Medido con el CSS real a 375px.

   Adentro del quiebre no hay tal cosa: el eje principal es el horizontal y las
   26rem vuelven a ser lo que querían ser. Sin ellas, en la fila el texto se
   reduce al mínimo de contenido y los dos botones se quedan solos a la izquierda
   con toda la mitad derecha de la franja vacía. min-inline-size:0 es lo que le
   permite igual encogerse por debajo de esa base cuando hace falta -el mínimo por
   defecto de un hijo flex es el ancho de su contenido, y a 320px eso desborda-. */
@media (min-width: 768px) {
  .franja-cta__texto {
    flex: 1 1 26rem;
    min-inline-size: 0;
  }
}

.franja-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  flex-shrink: 0;
}

/* ==========================================================================
   La composición de la portada.

   Estas cinco clases quedaron sin escribir cuando la fase se repartió entre
   varios autores: un comentario decía que vivían en "layout.css" y
   "componentes.css", dos archivos que nunca existieron. El sitio respondía
   200, el CSS no tenía un error y las ocho tarjetas salían apiladas en una
   columna a 1440px. Lo custodia MarcadoTests.
   ========================================================================== */

/* --- El hero -------------------------------------------------------------
   Franja oscura de ancho completo. No es una sección más con fondo: es la
   primera impresión del sitio, y la única que ocupa el alto de la pantalla. */
.hero {
  background-color: var(--color-superficie-inversa);
  background-image:
    linear-gradient(135deg, var(--color-superficie-inversa) 0%, var(--color-superficie-inversa-suave) 100%);
  color: var(--color-texto-inverso);
  padding-block: var(--espacio-seccion);
  /* Mismo mecanismo que el resto de las superficies oscuras: el anillo de foco
     y cualquier enlace suelto dentro del hero tienen que leerse sobre navy. */
  --enfoque-color: var(--color-foco-inverso);
  --color-enlace-local: var(--color-texto-inverso-suave);
}

.hero h1 {
  font-size: var(--titulo-hero);
  color: var(--color-texto-inverso);
  /* Medida corta en el titular: un título de ancho completo a 1920 se lee como
     un renglón de diario, no como el encabezado de una portada. */
  max-inline-size: 20ch;
}

.hero__interior {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

.hero__bajada {
  font-size: var(--texto-lg);
  /* Inverso-suave y no el blanco pleno: dos blancos idénticos a distinto tamaño
     compiten; con un paso de menos, la bajada acompaña al titular. */
  color: var(--color-texto-inverso-suave);
  max-inline-size: var(--ancho-texto);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-block-start: var(--espacio-2);
}

/* --- La grilla reglada de servicios --------------------------------------
   Ocho tarjetas propias, no una tabla de datos: cada celda tiene su propio
   filete completo y separación real (--espacio-5) en vez de compartir bordes
   con la vecina. Así se leen como ocho unidades, no como una grilla de
   celdas contiguas. */
/* `minmax(0, 1fr)` y no `1fr` a secas en todas las grillas de abajo: una pista `1fr` tiene
   `min-width: auto`, así que NO baja del ancho mínimo de su contenido y la celda más larga
   empuja la grilla entera fuera del contenedor. Medido: la portada desbordaba 64px a 1024 por el
   título "Contratación y Control de Proveedores". Con minmax(0, ...) la celda puede achicarse y
   el texto envuelve, que es lo que corresponde. */
.grilla-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-block-start: var(--espacio-6);
}

@media (min-width: 768px) {
  .grilla-servicios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* Tres columnas, sin un cuarto escalón a 1280: a 1024 las cuatro dejan cada tarjeta en 216px y
     el texto se parte en tiras -"Contratación / y Control / de Proveedores", tres líneas-. Como
     .contenedor tope en --ancho-contenido (1200px), tres columnas de acá para arriba dan ~370px de
     celda incluso en un monitor ancho: entra sobrado en dos líneas ("Contratación y Control / de
     Proveedores"). Ocho tarjetas en tres columnas dan 3+3+2, con la última fila incompleta, y aun
     así se lee mejor que cuatro columnas angostas. */
  .grilla-servicios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Grid en vez de flex column: el numeral (.celda-servicio__numero) y el ícono
   (.icono) se ubican los dos en la fila 1 -columnas 1 y 2- para leerse como un
   par, y el título y el párrafo pasan a ocupar las DOS columnas como filas 2
   y 3. auto + minmax(0, 1fr) y no "1fr" a secas en la segunda columna: el
   numeral son dos cifras, nunca va a forzar un ancho mínimo grande, pero
   minmax(0, ...) es el mismo blindaje que ya usa .grilla-servicios más
   arriba y cuesta cero mantenerlo consistente. */
.celda-servicio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--espacio-3) var(--espacio-2);
  /* espacio-5 y no espacio-6: con 32px de aire por lado, la celda de 280px dejaba 216px de
     texto y el párrafo envolvía cada veinte caracteres — siete renglones cortitos que se leen
     peor que cuatro largos. El aire de una tarjeta no puede pagarse con la medida de lectura. */
  padding: var(--espacio-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sutil);
  transition:
    background-color var(--duracion-normal) var(--curva-salida),
    border-color var(--duracion-normal) var(--curva-salida),
    box-shadow var(--duracion-normal) var(--curva-salida);
}

/* Antes esta celda alternaba de fondo por :nth-child(even). En una grilla de
   TRES columnas esa alternancia no arma un damero prolijo: como 3 es impar,
   la posición "par" se corre una celda por fila (col. 2 en la fila 1, col. 1
   y 3 en la fila 2, col. 2 en la fila 3...), así que el ojo lee una diagonal
   quebrada en vez de un patrón, y encima la octava tarjeta deja la última
   fila a medio llenar. Se elige la salida (a) del comentario que dejó el
   defecto: las ocho celdas comparten la misma superficie -blanco, igual que
   el fondo de la sección- y la jerarquía pasa a apoyarse en el ícono (el
   chip de abajo) y en :hover/:focus-within, que ya eran parte del diseño. */
.celda-servicio .icono {
  grid-column: 1;
  grid-row: 1;
  /* Chip circular en vez del ícono suelto: al no haber más alternancia de
     fondo, el ícono pasa a ser la pieza que le da entidad propia a cada
     celda. background-color/color repiten la pareja de --color-acento-tenue
     + --color-acento-fuerte que ya usa .fila-servicio__numero en /servicios,
     así el mismo par de tokens marca "esto es un rótulo de servicio" en las
     dos páginas. El ancho/alto explícitos pisan el --espacio-6 de .icono: con
     box-sizing:border-box el padding restaría del glifo si no se agranda la
     caja entera a --espacio-8. */
  width: var(--espacio-8);
  height: var(--espacio-8);
  padding: var(--espacio-2);
  background-color: var(--color-acento-tenue);
  color: var(--color-acento-fuerte);
  border-radius: var(--radio-sutil);
}

/* .celda-servicio__titulo hereda de "h3, .fila-servicio__titulo" el
   letter-spacing normal más arriba; acá el color de cuerpo del párrafo -sin
   esto quedaba en el negro pleno de --color-texto mientras el resto de los
   párrafos secundarios del sitio (.prosa > p) va en --color-texto-suave- y su
   ubicación en la grilla, fila 3 a lo ancho de las dos columnas.
   font-size explícito en --texto-base y no heredado en silencio de <body>:
   así el tamaño del cuerpo de tarjeta es una decisión leída acá, no un
   efecto colateral de que nadie lo haya tocado -era el mismo problema que el
   color: se leía liviano por venir a --texto-sm en el mockup original,
   aunque en esta hoja ya heredaba --texto-base sin declararlo. */
.celda-servicio p {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: var(--texto-base);
  color: var(--color-texto-suave);
}

/* El estado se despierta también con :focus-within, no solo con el mouse: quien
   navega con Tab tiene que ver la misma celda destacada que quien apunta. */
.celda-servicio:hover,
.celda-servicio:focus-within {
  background-color: var(--color-acento-tenue);
  border-color: var(--color-borde-fuerte);
  box-shadow: var(--sombra-hover);
}

/* --- Los cuatro motivos, sobre la franja oscura -------------------------- */
.pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-block-start: var(--espacio-6);
}

@media (min-width: 768px) {
  .pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pilares {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espacio-7);
  }
}

/* Filete de arriba en vez de tarjeta: sobre la franja oscura, cuatro cajas
   con fondo propio picarían el bloque en cuatro rectángulos y romperían la
   continuidad de la banda. Pero antes el filete corría el ANCHO COMPLETO de
   la columna con --border-block-start en el propio .pilares__item: al ser
   la primera pieza gráfica que se lee de la franja oscura, esa línea larga
   competía con el ícono en vez de acompañarlo. Ahora es un ::before angosto
   -del mismo ancho que el ícono, no de la columna- y, al ser un hijo
   generado dentro de un flex column, entra en el gap general en vez de
   necesitar su propio padding-block-start para separarse del ícono. */
.pilares__item {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.pilares__item::before {
  content: "";
  display: block;
  inline-size: var(--espacio-8);
  block-size: 2px;
  background-color: var(--color-borde-inverso);
}

/* Ícono a tamaño legible: el --espacio-6 (32px) de .icono se leía diminuto
   como primer elemento de una franja oscura de ancho completo. --espacio-8
   iguala el ancho del filete de arriba, así los dos leen como un mismo
   bloque de encabezado en vez de un ícono perdido sobre una línea larga. */
.pilares__item .icono {
  width: var(--espacio-8);
  height: var(--espacio-8);
}

/* --- Visión y Misión ----------------------------------------------------- */
.grilla-vm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-5);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-block-start: var(--espacio-6);
}

@media (min-width: 768px) {
  .grilla-vm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- La figura de Quiénes Somos ------------------------------------------
   .nosotros__figura vive en inicio.css (no es mío): esa hoja ya le pone
   aspect-ratio 4/5, radio y el fondo --imagen-hero -el degradado navy que
   ocupa el hueco hasta que haya foto del cliente-. Esas tres declaraciones
   NO se tocan acá. Lo que faltaba es que ese degradado, solo, se lee como
   una imagen que no cargó: es demasiado parecido en los dos extremos como
   para leerse como una decisión.

   Position/overflow no los pisa inicio.css, así que agregarlos acá no
   pelea con esa hoja por especificidad ni por orden de carga -sitio.css se
   carga antes, así que cualquier propiedad que las dos hojas declararan
   para el mismo selector la ganaría inicio.css igual-. Se suman por
   pseudo-elemento (::before) en vez de sobrescribir el background-image de
   la clase, por la misma razón: así el día que inicio.css cambie ese fondo
   por una foto real, esta regla no tiene ninguna propiedad en común que
   pueda pisarle el valor nuevo por accidente.

   PENDIENTE para quien edite inicio.css el día que llegue la foto real: la
   grilla de abajo se va a seguir dibujando ENCIMA de la foto, porque no hay
   forma de que un ::before puro sepa si el fondo de su dueño es un
   degradado o una imagen real. Cuando eso pase, hay que borrar este bloque
   completo (".nosotros__figura, .nosotros__figura::before" de acá abajo)
   de sitio.css. */
.nosotros__figura {
  position: relative;
  overflow: hidden;
  /* Marco de 1px hacia adentro: además del patrón, delimita el rectángulo
     como una pieza compuesta -un plano con su borde-, no como un color que
     se corta de golpe contra el gris de la franja. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-texto-inverso) 18%, transparent);
}

/* Grilla fina, tipo plano de arquitecto: encaja con "administración de
   edificios" mejor que una textura decorativa genérica, y con líneas rectas
   en vez de un patrón orgánico se lee inequívocamente como algo dibujado a
   propósito. color-mix con --color-texto-inverso al 10% en vez de un gris
   nuevo: el patrón tiene que funcionar sobre CUALQUIER tono que traiga
   --imagen-hero sin agregar un tercer color al sistema. */
.nosotros__figura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-texto-inverso) 10%, transparent) 0,
      color-mix(in srgb, var(--color-texto-inverso) 10%, transparent) 1px,
      transparent 1px,
      transparent var(--espacio-6)
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-texto-inverso) 10%, transparent) 0,
      color-mix(in srgb, var(--color-texto-inverso) 10%, transparent) 1px,
      transparent 1px,
      transparent var(--espacio-6)
    );
}