/* ==========================================================================
   CÓNDOR SEGURIDAD PRIVADA — sitio institucional
   Paleta cerrada: amarillo mostaza (color principal y fondo del sitio),
   negro y blanco. Los grises son tintes neutros del negro.
   Tipografía: Baskerville (Libre Baskerville, servida desde el propio sitio).
   ========================================================================== */

:root {
  /* Mostaza — color principal; es el fondo del sitio */
  --mostaza: #d9a21b;
  --mostaza-viva: #f2b824;
  --mostaza-clara: #f7d372;
  --mostaza-palida: #f2e2b3;
  --mostaza-honda: #a87c14;
  --mostaza-tinta: #3d2b05;

  /* Negro y sus tintes neutros */
  --negro: #000000;
  --negro-900: #080808;
  --negro-800: #121212;
  --negro-700: #1c1c1c;
  --negro-600: #2b2b2b;
  --negro-500: #3d3d3d;

  /* Blanco y grises neutros */
  --blanco: #ffffff;
  --gris-100: #ededed;
  --gris-200: #d8d8d8;
  --gris-300: #b5b5b5;
  --gris-400: #8f8f8f;
  --gris-500: #6b6b6b;

  --fuente: "Libre Baskerville", Baskerville, "Baskerville Old Face",
            "Hoefler Text", "Times New Roman", Times, serif;

  --ancho: 1220px;
  --ancho-angosto: 740px;
  --transicion: .22s cubic-bezier(.4, 0, .2, 1);
  --curva: cubic-bezier(.16, .68, .28, 1);
  --sombra: 0 10px 26px rgba(0, 0, 0, .22);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--negro-800);
  background: var(--mostaza);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Los elementos con .revelar--izq/--der arrancan desplazados ±42px fuera
     de su lugar antes de aparecer (ver "REVELADO AL DESPLAZAR" más abajo);
     sin este límite, ese desplazamiento crea scroll horizontal real y deja
     ver el fondo mostaza del body por el borde — sobre todo en pantallas
     angostas. */
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--fuente);
  font-weight: 700;
  line-height: 1.16;
  margin: 0 0 .5em;
  letter-spacing: 0;
}

a { color: var(--negro); text-underline-offset: 3px; }
a:hover { color: var(--mostaza-tinta); }

:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
.seccion--negra :focus-visible, .seccion--gris :focus-visible, .seccion--palida :focus-visible,
.encabezado :focus-visible, .pie :focus-visible, .portada :focus-visible { outline-color: var(--mostaza); }

.salto-contenido {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--negro);
  color: var(--mostaza);
  padding: .85rem 1.3rem;
  font-weight: 700;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor--angosto { width: min(100% - 2.5rem, var(--ancho-angosto)); }

.icono { width: 26px; height: 26px; flex: none; }
.icono--mini { width: 16px; height: 16px; }

/* ==========================================================================
   REVELADO AL DESPLAZAR
   Solo se activa si hay JavaScript (la clase .js la pone inicial.js antes de
   pintar). Sin JS, todo se ve normalmente.
   ========================================================================== */

.js .revelar {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.js .revelar--izq { transform: translateX(-42px); }
.js .revelar--der { transform: translateX(42px); }
.js .revelar--zoom { transform: scale(.93); }
.js .revelar--subir { transform: translateY(56px); }
.js .revelar.visible { opacity: 1; transform: none; }

/* Grupos: los hijos entran escalonados */
.js .revelar-grupo > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.js .revelar-grupo.visible > * { opacity: 1; transform: none; }
.js .revelar-grupo.visible > *:nth-child(1) { transition-delay: .04s; }
.js .revelar-grupo.visible > *:nth-child(2) { transition-delay: .12s; }
.js .revelar-grupo.visible > *:nth-child(3) { transition-delay: .2s; }
.js .revelar-grupo.visible > *:nth-child(4) { transition-delay: .28s; }
.js .revelar-grupo.visible > *:nth-child(5) { transition-delay: .36s; }
.js .revelar-grupo.visible > *:nth-child(6) { transition-delay: .44s; }
.js .revelar-grupo.visible > *:nth-child(7) { transition-delay: .52s; }
.js .revelar-grupo.visible > *:nth-child(n+8) { transition-delay: .6s; }

/* El filete del antetítulo se dibuja al aparecer */
.js .revelar .antetitulo::before,
.js .revelar-grupo .antetitulo::before { transform: scaleX(0); transform-origin: left; }
.js .revelar.visible .antetitulo::before,
.js .revelar-grupo.visible .antetitulo::before {
  transform: scaleX(1);
  transition: transform .7s .2s var(--curva);
}

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */

.encabezado {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  /* Fijo y transparente desde el primer píxel: flota sobre la portada (o,
     en el resto de las páginas, sobre la cabecera oscura) en vez de
     aparecer como una franja propia contra el fondo mostaza del sitio.
     El velo es un oscurecido apenas perceptible (no un panel opaco), así
     el logo y los enlaces —claros— se leen igual sobre cualquier fondo. */
  background: rgba(8, 6, 2, .32);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.encabezado .marca__texto strong,
.encabezado .marca__texto em,
.encabezado .navegacion__lista a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 1px 10px rgba(0, 0, 0, .5);
}
.encabezado__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 84px;
}

.marca { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.marca__ave { width: 62px; height: auto; flex: none; }
.encabezado .marca__ave { width: 92px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__texto strong {
  font-family: 'Sancreek', var(--fuente); font-size: 1.7rem; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; color: var(--blanco);
}
.marca__texto em {
  font-family: 'Sancreek', var(--fuente); font-style: normal; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mostaza); margin-top: .4rem;
}

.navegacion { display: flex; align-items: center; gap: 1.1rem; }
.navegacion__lista { display: flex; align-items: center; gap: 1.1rem; }
.navegacion__lista a {
  position: relative; display: block; padding: .5rem 0; white-space: nowrap;
  color: var(--blanco); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: color var(--transicion);
}
.navegacion__lista a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--mostaza); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicion);
}
.navegacion__lista a:hover,
.navegacion__lista a[aria-current="page"] { color: var(--mostaza); }
.navegacion__lista a:hover::after,
.navegacion__lista a[aria-current="page"]::after { transform: scaleX(1); }

.navegacion__cta { white-space: nowrap; padding-inline: 1.1rem; }

.navegacion__idioma {
  display: flex; align-items: center; gap: .35rem; flex: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gris-400);
}
.navegacion__idioma a { color: inherit; text-decoration: none; transition: color var(--transicion); }
.navegacion__idioma a:hover { color: var(--mostaza-clara); }
.navegacion__idioma a[aria-current="true"] { color: var(--mostaza); }

.menu-boton {
  display: none; align-items: center; gap: .6rem;
  background: none; border: 1px solid var(--negro-600); padding: .55rem .85rem;
  font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blanco); cursor: pointer;
}
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block; width: 20px; height: 2px; background: var(--mostaza);
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before, .menu-boton__barras::after { content: ""; position: absolute; left: 0; }
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.5rem; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--fuente); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-1px); }
.boton--acento { background: var(--negro); color: var(--mostaza); border-color: var(--negro); }
.boton--acento:hover { background: var(--negro-700); border-color: var(--negro-700); color: var(--mostaza-viva); }
.boton--claro { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.boton--claro:hover { background: var(--blanco); color: var(--negro); }
.boton--linea { background: transparent; color: var(--negro); border-color: var(--negro); }
.boton--linea:hover { background: var(--negro); color: var(--mostaza); }
.boton--bloque { width: 100%; }

/* Sobre fondo negro, el botón principal se invierte: mostaza sólida */
.encabezado .boton--acento, .seccion--negra .boton--acento, .seccion--gris .boton--acento,
.seccion--palida .boton--acento, .portada .boton--acento,
.cabecera-pagina .boton--acento, .seccion-foto .boton--acento {
  background: var(--mostaza); color: var(--negro); border-color: var(--mostaza);
}
.encabezado .boton--acento:hover, .seccion--negra .boton--acento:hover, .seccion--gris .boton--acento:hover,
.seccion--palida .boton--acento:hover,
.portada .boton--acento:hover, .seccion-foto .boton--acento:hover {
  background: var(--mostaza-viva); border-color: var(--mostaza-viva); color: var(--negro);
}
.seccion--negra .boton--linea, .seccion--gris .boton--linea, .seccion--palida .boton--linea { color: var(--mostaza); border-color: var(--mostaza); }
.seccion--negra .boton--linea:hover, .seccion--gris .boton--linea:hover, .seccion--palida .boton--linea:hover { background: var(--mostaza); color: var(--negro); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--negro); text-decoration: none;
  transition: gap var(--transicion), color var(--transicion);
}
.enlace-flecha:hover { gap: .9rem; color: var(--mostaza-tinta); }
.enlace-flecha--claro, .seccion--negra .enlace-flecha, .seccion--gris .enlace-flecha, .seccion--palida .enlace-flecha, .tarjeta .enlace-flecha { color: var(--mostaza); }
.enlace-flecha--claro:hover, .seccion--negra .enlace-flecha:hover, .seccion--gris .enlace-flecha:hover, .seccion--palida .enlace-flecha:hover, .tarjeta .enlace-flecha:hover { color: var(--mostaza-clara); }

/* ==========================================================================
   AVISOS
   ========================================================================== */

.avisos { margin-top: 1.5rem; }
.aviso {
  margin: 0 0 .75rem; padding: .85rem 1.1rem;
  border-left: 2px solid var(--negro); background: var(--mostaza-palida);
  font-size: .95rem;
}
.aviso--ok { border-color: var(--negro); background: var(--mostaza-palida); color: var(--negro); }
.aviso--error { border-color: var(--mostaza); background: var(--negro); color: var(--blanco); }

/* ==========================================================================
   PORTADA — video del paisaje de la Puna
   ========================================================================== */

.portada {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(680px, 100vh, 1080px);
  background: var(--negro); color: var(--blanco);
}
.amanecer { position: absolute; inset: 0; z-index: 0; background: var(--negro); }

.amanecer__imagen {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}

.amanecer__velos {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 60% at 50% 52%, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .15) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .32) 84%, rgba(0, 0, 0, .8) 100%);
}

/* --- Contenido de la portada: centrado --- */
.portada__interior {
  position: relative; z-index: 1; width: 100%;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}
.portada__titulo { margin-inline: auto; }
.portada__acciones { justify-content: center; }
/* Trazo fino y oscuro en el texto de la portada: el fondo es un video con
   zonas claras (cielo, laderas al sol), y un borde de letra sostiene la
   legibilidad ahí donde el velo oscuro solo no alcanza. */
.portada__titulo,
.portada__bajada {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .85), 1px -1px 0 rgba(0, 0, 0, .85),
               -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85),
               0 2px 20px rgba(0, 0, 0, .55);
}

.portada__titulo {
  max-width: 16ch; margin-bottom: 1.4rem;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.1;
  letter-spacing: .005em; text-transform: uppercase; color: var(--blanco);
  animation: entrar-arriba 1s .1s both;
}
.portada__bajada {
  max-width: 54ch; margin: 0 auto 2.4rem; font-size: .98rem; color: var(--gris-100);
  animation: entrar-arriba 1s .26s both;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 1rem; animation: entrar-arriba 1s .4s both; }

@keyframes entrar-arriba {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */

.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.seccion--negra, .seccion--gris, .seccion--palida { background: var(--negro-900); color: var(--gris-200); }
.seccion--negra .titulo-seccion, .seccion--gris .titulo-seccion, .seccion--palida .titulo-seccion, .seccion--negra .titulo-bloque , .seccion--gris .titulo-bloque , .seccion--palida .titulo-bloque { color: var(--blanco); }
.seccion--negra .parrafo , .seccion--gris .parrafo , .seccion--palida .parrafo { color: var(--gris-300); }

.antetitulo {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--negro);
}
.antetitulo::before { content: ""; width: 30px; height: 1px; background: var(--negro); flex: none; }
.antetitulo--claro { color: var(--mostaza); }
.antetitulo--claro::before { background: var(--mostaza); }
.seccion--negra .antetitulo , .seccion--gris .antetitulo , .seccion--palida .antetitulo { color: var(--mostaza); }
.seccion--negra .antetitulo::before , .seccion--gris .antetitulo::before , .seccion--palida .antetitulo::before { background: var(--mostaza); }

.titulo-seccion {
  font-size: clamp(1.55rem, 3.2vw, 2.4rem); text-transform: uppercase;
  letter-spacing: .005em; color: var(--negro);
}
.titulo-bloque { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; color: var(--negro); margin-bottom: 1.2rem; }

.parrafo { margin: 0 0 1.15rem; color: var(--negro-700); max-width: 64ch; }
.parrafo--destacado {
  font-size: 1.02rem; font-style: italic; color: var(--negro);
  border-left: 2px solid var(--negro); padding-left: 1.2rem;
}
.seccion--negra .parrafo--destacado , .seccion--gris .parrafo--destacado , .seccion--palida .parrafo--destacado { color: var(--blanco); border-left-color: var(--mostaza); }

.encabezado-seccion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.6rem;
}
.bloque-centrado { text-align: center; display: grid; justify-items: center; }
.bloque-centrado .antetitulo { justify-content: center; }
.bloque-centrado .parrafo { margin-inline: auto; }

.grilla-dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.grilla-dos--ajustada { align-items: center; }

.franja {
  height: 10px;
  background: repeating-linear-gradient(-60deg, var(--negro) 0 22px, var(--mostaza) 22px 30px);
}

/* ==========================================================================
   SECCIÓN "QUIÉNES SOMOS" — la foto se ve entera, a su ancho completo y sin
   estirarse: es ella la que define el alto de la sección (a lo ancho de
   pantalla, esa altura ronda la de dos secciones normales juntas), en vez
   de recortarla o forzarla dentro de una caja de alto fijo.
   ========================================================================== */

.seccion-foto {
  display: grid;
  color: var(--gris-200);
  background: var(--negro-900);
}
/* Foto y texto comparten la misma celda de grilla: el alto de la sección
   pasa a ser el mayor de los dos (la foto a su ancho completo, o el texto
   cuando necesita más lugar en pantallas angostas). La foto nunca se
   recorta ni se estira: si la celda queda más alta que ella, se mantiene
   centrada a su tamaño natural y el fondo (negro) rellena el resto. */
.seccion-foto__fondo, .seccion-foto__contenido { grid-area: 1 / 1; }
.seccion-foto__fondo {
  width: 100%; height: auto; align-self: center; justify-self: center;
}
.seccion-foto__contenido {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  padding-inline: max(1.25rem, calc((100% - var(--ancho)) / 2 + 1.25rem));
}
.seccion-foto__texto {
  max-width: 62ch; padding: 1.6rem 1.9rem;
  background: rgba(8, 6, 2, .68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-left: 2px solid var(--mostaza);
}
.seccion-foto .titulo-seccion { color: var(--blanco); }
.seccion-foto .parrafo { color: var(--gris-300); }
.seccion-foto .parrafo--destacado { color: var(--blanco); border-left-color: var(--mostaza); }
.seccion-foto .antetitulo { color: var(--mostaza); }
.seccion-foto .antetitulo::before { background: var(--mostaza); }
.seccion-foto .enlace-flecha { color: var(--mostaza); }
.seccion-foto .enlace-flecha:hover { color: var(--mostaza-clara); }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */

.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.valor {
  padding: 1.8rem 1.4rem; background: var(--negro); color: var(--gris-200); border-top: 2px solid var(--mostaza);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.valor__icono { display: inline-flex; color: var(--mostaza); margin-bottom: 1rem; }
.valor__icono .icono { width: 22px; height: 22px; }
.valor__titulo { font-size: .96rem; text-transform: uppercase; letter-spacing: .06em; color: var(--blanco); margin-bottom: .5rem; }
.valor__texto { margin: 0; font-size: .88rem; }

.grilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.grilla-tarjetas--tres { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.8rem 1.6rem; background: var(--negro); color: var(--gris-200);
  border: 1px solid var(--negro);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta::after {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px;
  background: var(--mostaza); transition: width .35s var(--curva);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta:hover::after { width: 100%; }
.tarjeta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--mostaza); color: var(--negro); margin-bottom: .5rem;
}
.tarjeta__icono .icono { width: 20px; height: 20px; }
.tarjeta__titulo { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--blanco); }
.tarjeta__texto { margin: 0; font-size: .88rem; color: var(--gris-300); flex: 1; }
.tarjeta--simple { padding: 1.7rem 1.5rem; }

.proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.8rem; }
.proceso__paso { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--negro); }
.seccion--negra .proceso__paso , .seccion--gris .proceso__paso , .seccion--palida .proceso__paso { border-top-color: var(--negro-500); }
.seccion--negra .proceso__paso:first-child , .seccion--gris .proceso__paso:first-child , .seccion--palida .proceso__paso:first-child { border-top-color: var(--mostaza); }
.proceso__numero { display: block; font-size: 2.3rem; line-height: 1; color: var(--negro); margin-bottom: .5rem; }
.seccion--negra .proceso__numero , .seccion--gris .proceso__numero , .seccion--palida .proceso__numero { color: var(--mostaza); }
.proceso__titulo { font-size: .98rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.seccion--negra .proceso__titulo , .seccion--gris .proceso__titulo , .seccion--palida .proceso__titulo { color: var(--blanco); }
.proceso__texto { margin: 0; font-size: .88rem; color: var(--negro-700); }
.seccion--negra .proceso__texto , .seccion--gris .proceso__texto , .seccion--palida .proceso__texto { color: var(--gris-300); }

.sectores, .lista-check {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.6rem;
}
.sectores li, .lista-check li { display: flex; align-items: flex-start; gap: .7rem; font-size: .91rem; color: var(--negro-700); }
.sectores .icono, .lista-check .icono { color: var(--negro); margin-top: .34rem; }
.seccion--negra .sectores li , .seccion--gris .sectores li , .seccion--palida .sectores li { color: var(--gris-200); }
.seccion--negra .sectores .icono , .seccion--gris .sectores .icono , .seccion--palida .sectores .icono { color: var(--mostaza); }
.servicio .lista-check li { color: var(--gris-300); }
.servicio .lista-check .icono { color: var(--mostaza); }

.lista-columnas { columns: 2; column-gap: 2.5rem; }
.lista-columnas li {
  break-inside: avoid; position: relative; padding: .6rem 0 .6rem 1.7rem;
  font-size: .9rem; border-bottom: 1px solid rgba(0, 0, 0, .18); color: var(--negro-700);
}
.lista-columnas li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 9px; height: 9px; background: var(--negro); }
.seccion--negra .lista-columnas li , .seccion--gris .lista-columnas li , .seccion--palida .lista-columnas li { border-bottom-color: var(--negro-600); color: var(--gris-200); }
.seccion--negra .lista-columnas li::before , .seccion--gris .lista-columnas li::before , .seccion--palida .lista-columnas li::before { background: var(--mostaza); }

/* --- Servicios --- */
.servicios-detalle { display: grid; gap: 2rem; }
.servicio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  background: var(--negro); color: var(--gris-200); scroll-margin-top: 120px;
  border-left: 2px solid var(--mostaza);
}
.servicio--sin-foto { grid-template-columns: 1fr; }
.servicio__cuerpo { padding: clamp(1.7rem, 3vw, 2.8rem); }
.servicio__cabecera { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.servicio__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; background: var(--mostaza); color: var(--negro);
}
.servicio__icono .icono { width: 22px; height: 22px; }
.servicio__titulo { font-size: 1.24rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .4rem; color: var(--blanco); }
.servicio__resumen { margin: 0; color: var(--gris-300); }
.servicio .lista-check { margin-bottom: 1.6rem; }
.servicio__foto { position: relative; overflow: hidden; background: var(--negro); min-height: 260px; }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.servicio:hover .servicio__foto img { transform: scale(1.05); }

/* --- Equipamiento --- */
.equipamiento { display: grid; gap: clamp(2.6rem, 6vw, 4.5rem); }
.grupo-equipo { display: grid; gap: 1.8rem; }
.grupo-equipo__cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; scroll-margin-top: 120px;
}
.grupo-equipo__foto { overflow: hidden; background: var(--negro); border-bottom: 2px solid var(--negro); }
.grupo-equipo__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s var(--curva); }
.grupo-equipo__foto:hover img { transform: scale(1.05); }
.grupo-equipo__titulo { font-size: clamp(1.3rem, 3vw, 1.75rem); text-transform: uppercase; }
.grupo-equipo__resumen { margin: 0; color: var(--negro-700); }

/* --- Capacitaciones --- */
.capacitaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.capacitacion { position: relative; overflow: hidden; background: var(--negro); }
.capacitacion img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .6;
  transition: opacity var(--transicion), transform .7s var(--curva);
}
.capacitacion:hover img { opacity: .85; transform: scale(1.06); }
.capacitacion__texto {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .96), rgba(0, 0, 0, .05));
}
.capacitacion__titulo { font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mostaza); margin-bottom: .3rem; }
.capacitacion__detalle { margin: 0; font-size: .83rem; color: var(--gris-200); }

/* --- Trayectoria y clientes --- */
.trayectoria { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trayectoria__item { padding: 1.8rem 1.5rem 1.8rem 0; border-top: 1px solid var(--negro-500); }
.trayectoria__hito {
  display: inline-block; margin-bottom: .8rem; padding: .18rem .6rem;
  background: var(--mostaza); color: var(--negro);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.trayectoria__titulo { font-size: .98rem; color: var(--blanco); text-transform: uppercase; letter-spacing: .03em; }
.trayectoria__texto { margin: 0; font-size: .87rem; color: var(--gris-300); }

.clientes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.clientes li {
  display: flex; align-items: center; gap: .8rem; padding: 1.1rem .4rem;
  border-bottom: 1px solid var(--negro-600); font-size: .9rem; color: var(--gris-200);
}
.clientes li::before { content: ""; width: 10px; height: 10px; background: var(--mostaza); flex: none; }

/* --- Novedades --- */
.grilla-novedades { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.novedad {
  background: var(--negro); color: var(--gris-200);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.novedad:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.novedad__enlace { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.novedad__imagen { display: block; background: var(--negro-700); aspect-ratio: 16 / 10; overflow: hidden; }
.novedad__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.novedad:hover .novedad__imagen img { transform: scale(1.06); }
.novedad__cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.7rem; flex: 1; }
.novedad__fecha { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-400); }
.novedad__titulo { font-size: 1.02rem; font-weight: 700; line-height: 1.36; color: var(--blanco); }
.novedad__resumen { font-size: .86rem; color: var(--gris-300); }

.etiqueta {
  align-self: flex-start; padding: .2rem .6rem; background: var(--mostaza); color: var(--negro);
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.etiqueta--sola { display: inline-block; margin-bottom: 1rem; }

/* --- Galería --- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.filtro {
  padding: .42rem .95rem; border: 1px solid var(--negro); background: transparent;
  color: var(--negro); font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; transition: all var(--transicion);
}
.filtro:hover { background: var(--negro); color: var(--mostaza); }
.filtro--activo { background: var(--negro); color: var(--mostaza); }

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.mosaico__item { overflow: hidden; background: var(--negro); }
.mosaico__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaico__boton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mosaico__boton img { transition: transform .6s var(--curva), opacity var(--transicion); }
.mosaico__boton:hover img { transform: scale(1.07); opacity: .85; }
.mosaico__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.7rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .95), transparent);
  color: var(--blanco); font-size: .78rem; text-align: left;
}
.mosaico__boton::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--mostaza);
  opacity: 0; transition: opacity var(--transicion);
}
.mosaico__boton:hover::after, .mosaico__boton:focus-visible::after { opacity: 1; }

.vacio {
  display: flex; align-items: center; gap: .8rem; padding: 2.6rem;
  border: 2px dashed var(--negro); color: var(--negro-700);
}
.vacio .icono { color: var(--negro); }

/* --- Visor --- */
.visor { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.5rem; }
.visor[hidden] { display: none; }
.visor__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .95); }
.visor__figura {
  position: relative; margin: 0; max-width: min(1050px, 100%);
  background: var(--negro-900); border-top: 2px solid var(--mostaza);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  animation: entrar-visor .35s var(--curva);
}
@keyframes entrar-visor {
  from { opacity: 0; transform: scale(.95) translateY(14px); }
  to { opacity: 1; transform: none; }
}
.visor__imagen { display: block; max-height: 76vh; max-width: 100%; width: auto; margin-inline: auto; }
.visor__pie { padding: 1rem 1.3rem; color: var(--gris-300); font-size: .86rem; }
.visor__cerrar {
  position: absolute; top: .6rem; right: .7rem; width: 42px; height: 42px;
  border: 0; background: rgba(0, 0, 0, .7); color: var(--blanco);
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.visor__cerrar:hover { background: var(--mostaza); color: var(--negro); }

.visor__flecha {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: rgba(0, 0, 0, .6); color: var(--blanco); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.visor__flecha .icono { width: 22px; height: 22px; }
.visor__flecha:hover { background: var(--mostaza); color: var(--negro); }
.visor__flecha--prev { left: .6rem; }
.visor__flecha--prev .icono { transform: scaleX(-1); }
.visor__flecha--next { right: .6rem; }

/* ==========================================================================
   CABECERAS DE PÁGINA Y ARTÍCULOS
   ========================================================================== */

.cabecera-pagina {
  position: relative; overflow: hidden;
  /* El header ahora es fijo (fuera del flujo): se le suma su alto acá para
     que el título de la página no arranque tapado debajo. */
  padding: calc(clamp(2.8rem, 7vw, 4.5rem) + 84px) 0 clamp(2.2rem, 5vw, 3.4rem);
  background: var(--negro); color: var(--gris-200);
}
.cabecera-pagina::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 46%; height: 190%;
  background: repeating-linear-gradient(-60deg, rgba(217, 162, 27, .2) 0 18px, transparent 18px 46px);
  transform: skewX(-12deg); pointer-events: none;
}
.cabecera-pagina > .contenedor { position: relative; z-index: 1; }
.cabecera-pagina__titulo {
  font-size: clamp(1.75rem, 4.4vw, 2.8rem); text-transform: uppercase;
  color: var(--blanco); margin-bottom: .7rem;
  animation: entrar-arriba .8s .06s both;
}
.cabecera-pagina__bajada { max-width: 60ch; margin: 0; color: var(--gris-300); animation: entrar-arriba .8s .18s both; }

.miga { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-400); margin-bottom: 1.3rem; }
.miga a { color: var(--gris-300); text-decoration: none; }
.miga a:hover { color: var(--mostaza); }

.publicacion__fecha { margin: .8rem 0 0; color: var(--gris-400); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.publicacion__cuerpo { padding: clamp(2.4rem, 5vw, 3.8rem) 0; }
.publicacion__portada { margin: 0 0 2.2rem; overflow: hidden; background: var(--negro); }
.publicacion__portada img { width: 100%; display: block; object-fit: cover; }
.publicacion__resumen {
  font-size: 1.05rem; font-style: italic; color: var(--negro);
  border-left: 2px solid var(--negro); padding-left: 1.2rem; margin: 0 0 2rem;
}
.publicacion__volver { margin-top: 2.8rem; }
.texto-largo p { margin: 0 0 1.35rem; color: var(--negro-800); }
.texto-largo p:last-child { margin-bottom: 0; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */

.grilla-contacto {
  display: grid; grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.datos-contacto__lista { display: grid; gap: 1.5rem; }
.datos-contacto__lista li { display: flex; gap: 1rem; align-items: flex-start; }
.datos-contacto__lista strong {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--negro-700); margin-bottom: .25rem;
}
.datos-contacto__lista a { color: var(--negro); text-decoration: none; font-weight: 700; }
.datos-contacto__lista a:hover { text-decoration: underline; }
.datos-contacto__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; background: var(--negro); color: var(--mostaza);
}
.datos-contacto__icono .icono { width: 19px; height: 19px; }

.formulario-contacto { padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--negro); color: var(--gris-200); border-top: 2px solid var(--mostaza); }
.formulario-contacto .titulo-bloque { color: var(--blanco); }
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mostaza); margin-bottom: .45rem;
}
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .75rem .85rem; font: inherit; font-size: .93rem;
  color: var(--negro); background: var(--blanco);
  border: 1px solid var(--gris-200); border-radius: 0;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--mostaza); box-shadow: 0 0 0 3px rgba(217, 162, 27, .35); outline: none;
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo__error { display: block; margin-top: .4rem; font-size: .8rem; font-weight: 700; color: var(--mostaza-clara); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--mostaza); }
.campo-doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.formulario__nota { font-size: .78rem; color: var(--gris-400); margin: 0 0 1.3rem; }
.formulario-contacto .boton--acento { background: var(--mostaza); color: var(--negro); border-color: var(--mostaza); }
.formulario-contacto .boton--acento:hover { background: var(--mostaza-viva); border-color: var(--mostaza-viva); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mapa { border: 1px solid var(--negro); overflow: hidden; background: var(--negro); }
.mapa iframe { display: block; width: 100%; height: 430px; border: 0; }

/* ==========================================================================
   LLAMADO A LA ACCIÓN
   ========================================================================== */

.llamado { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--negro); color: var(--gris-200); }
.llamado::after {
  content: ""; position: absolute; right: -6%; top: -40%; width: 40%; height: 200%;
  background: repeating-linear-gradient(-60deg, rgba(217, 162, 27, .16) 0 16px, transparent 16px 42px);
  transform: skewX(-12deg);
}
.llamado__interior {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
}
.llamado__titulo { font-size: clamp(1.35rem, 3vw, 1.95rem); text-transform: uppercase; max-width: 22ch; color: var(--blanco); }
.llamado__texto { margin: 0; max-width: 54ch; color: var(--gris-300); }
.llamado__acciones { display: flex; gap: 1rem; flex-wrap: wrap; }
.llamado .boton--acento { background: var(--mostaza); color: var(--negro); border-color: var(--mostaza); }
.llamado .boton--acento:hover { background: var(--mostaza-viva); border-color: var(--mostaza-viva); }
.llamado .boton--claro { border-color: var(--mostaza); color: var(--mostaza); }
.llamado .boton--claro:hover { background: var(--mostaza); color: var(--negro); }

/* ==========================================================================
   PIE
   ========================================================================== */

.pie { background: var(--negro); color: var(--gris-300); font-size: .87rem; border-top: 2px solid var(--mostaza); }
.pie__grilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 2.5rem; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.marca--pie { margin-bottom: 1.2rem; }
.pie__texto { margin: 0 0 1rem; }
.pie__legal { margin: 0; font-size: .74rem; color: var(--gris-500); }
.pie__titulo { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mostaza); margin-bottom: 1.2rem; }
.pie__lista { display: grid; gap: .65rem; }
.pie__lista a { color: var(--gris-300); text-decoration: none; }
.pie__lista a:hover { color: var(--mostaza); }
.pie__lista--contacto li { display: flex; gap: .7rem; align-items: flex-start; }
.pie__lista--contacto .icono { color: var(--mostaza); margin-top: .3rem; }
.pie__redes { display: flex; gap: 1.2rem; margin-top: 1.3rem; }
.pie__redes a { color: var(--gris-300); text-decoration: none; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.pie__redes a:hover { color: var(--mostaza); }
.pie__barra { border-top: 1px solid var(--negro-600); }
.pie__barra-interior { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0; font-size: .74rem; color: var(--gris-500); }
.pie__barra-interior p { margin: 0; }
.pie__creditos {
  margin: 0; padding-top: .9rem; margin-top: .9rem;
  border-top: 1px solid var(--negro-700);
  font-size: .68rem; letter-spacing: .03em; color: var(--negro-500);
  text-align: center;
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP — presente en todo el sitio
   ========================================================================== */

.whatsapp-flotante {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 50;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 999px;
  background: var(--mostaza); color: var(--negro);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: background var(--transicion), transform var(--transicion);
}
.whatsapp-flotante .icono { width: 30px; height: 30px; }
.whatsapp-flotante:hover { background: var(--mostaza-viva); transform: translateY(-2px); color: var(--negro); }

@media (max-width: 620px) {
  .whatsapp-flotante { width: 50px; height: 50px; right: 1rem; bottom: 1rem; }
  .whatsapp-flotante .icono { width: 26px; height: 26px; }
}

/* ==========================================================================
   FIGURAS Y BLOQUES DE APOYO
   ========================================================================== */

/* ==========================================================================
   MARCO DE FOTOGRAFÍAS — visor de vigilancia
   Firma visual del sitio: esquina superior derecha cortada en diagonal (eco
   de la franja de peligro que ya recorre cabeceras y llamados a la acción) y
   dos escuadras mostaza en las esquinas opuestas, como las marcas de un
   visor de cámara. Se aplica como clase adicional sobre el contenedor que ya
   recorta la imagen (no reemplaza sus reglas de tamaño).
   ========================================================================== */

.marco-foto {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.marco-foto::before,
.marco-foto::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  pointer-events: none;
  border-color: var(--mostaza);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.marco-foto::before { top: 9px; left: 9px; border-top-width: 1.5px; border-left-width: 1.5px; }
.marco-foto::after { bottom: 9px; right: 9px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* En una franja angosta (mosaico, capacitaciones) las escuadras se achican */
.mosaico__item.marco-foto::before, .mosaico__item.marco-foto::after,
.capacitacion.marco-foto::before, .capacitacion.marco-foto::after {
  width: 12px; height: 12px;
}

.figura-lateral { margin: 0; }
.figura-lateral figcaption {
  margin-top: .9rem; padding-left: 1rem; border-left: 1px solid var(--negro);
  font-size: .8rem; font-style: italic; color: var(--negro-700);
}
.bloque-clientes, .bloque-formacion {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--negro-600);
}

/* ==========================================================================
   PÁGINAS DE ERROR
   ========================================================================== */

.error-pagina { padding-block: clamp(4rem, 10vw, 7rem); }
.error-pagina__codigo { font-size: clamp(4rem, 12vw, 7.5rem); line-height: 1; color: var(--negro); margin: 0 0 .4rem; }

/* ==========================================================================
   ADAPTACIÓN
   ========================================================================== */

@media (max-width: 1000px) {
  .pie__grilla { grid-template-columns: repeat(2, 1fr); }
  .grilla-contacto { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 1fr; }
  .servicio__foto { min-height: 220px; order: -1; }
  .grupo-equipo__cabecera { grid-template-columns: 1fr; }
  .lista-columnas { columns: 1; }
}

@media (max-width: 900px) {
  .menu-boton { display: inline-flex; }
  .navegacion {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 1.25rem 1.6rem; background: var(--negro-900);
    border-bottom: 1px solid var(--mostaza);
  }
  .navegacion.abierto { display: flex; animation: bajar-menu .3s var(--curva); }
  .encabezado__interior { position: relative; flex-wrap: wrap; }
  .navegacion__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacion__lista a { padding: 1rem .2rem; border-bottom: 1px solid var(--negro-600); }
  .navegacion__lista a::after { display: none; }
  .navegacion__cta { margin-top: 1.2rem; }

  /* "Quiénes somos": en pantallas angostas el texto necesita más alto del
     que la foto tiene a ese ancho, y la superposición en grilla los deja
     mal (la foto queda como una tira angosta perdida en medio de mucho
     negro). Se pasa a un apilado normal: foto como banner arriba, texto
     abajo — cada uno con su propio alto, sin pisarse. */
  .seccion-foto { display: block; }
  .seccion-foto__fondo {
    position: static; width: 100%; height: 56vw; max-height: 340px;
    min-height: 200px; object-fit: cover; object-position: center 35%;
  }
  .seccion-foto__contenido {
    display: block; padding: 2.2rem 1.25rem;
  }
  .seccion-foto__texto {
    max-width: none; padding: 0; background: none; border-left: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@keyframes bajar-menu { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .pie__grilla { grid-template-columns: 1fr; gap: 2.2rem; }
  .llamado__interior { flex-direction: column; align-items: flex-start; }
  .servicio__cabecera { flex-direction: column; gap: .9rem; }

  .encabezado__interior { gap: .7rem; min-height: 76px; }
  .marca { gap: .6rem; }
  .encabezado .marca__ave { width: 78px; }
  .marca__texto strong { font-size: 1.3rem; letter-spacing: .04em; }
  .marca__texto em { font-size: .58rem; letter-spacing: .1em; }
  .menu-boton { padding: .5rem .7rem; gap: .45rem; }
  .cabecera-pagina { padding-top: calc(clamp(2.8rem, 7vw, 4.5rem) + 76px); }

  .portada__acciones .boton { flex: 1 1 100%; }

  .boton { padding: .6rem 1.2rem; letter-spacing: .07em; }
  .filtros { gap: .4rem; }
  .filtro { font-size: .6rem; padding: .38rem .75rem; }
  .antetitulo { letter-spacing: .13em; }
  .seccion-foto { min-height: 520px; }
}

/* ==========================================================================
   PREFERENCIAS DEL USUARIO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Nada de revelados: todo visible desde el principio */
  .js .revelar, .js .revelar-grupo > * { opacity: 1 !important; transform: none !important; }
  .js .revelar .antetitulo::before, .js .revelar-grupo .antetitulo::before { transform: scaleX(1) !important; }
  .tarjeta:hover, .novedad:hover, .boton:hover { transform: none; }
}

@media print {
  .encabezado, .llamado, .pie, .menu-boton, .visor, .amanecer { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .portada, .cabecera-pagina, .seccion--negra, .seccion-foto, .tarjeta, .novedad,
  .servicio, .valor { background: #fff !important; color: #000 !important; }
  .portada__titulo, .cabecera-pagina__titulo, .titulo-seccion, .seccion-foto .titulo-seccion,
  .tarjeta__titulo, .novedad__titulo, .servicio__titulo { color: #000 !important; }
  .js .revelar, .js .revelar-grupo > * { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: #000; }
}