/* =====================================================================
   Reifer Arquitectos — sitio institucional
   Paleta de mood propia de este proyecto (blanco/negro + azul de marca).
   La paleta oficial vive aparte en machote/marca-reifer.css.
   ===================================================================== */

@import url('../machote/marca-reifer.css');

/* Transición animada nativa entre la tarjeta de un proyecto y su página de
   detalle (Chrome/Edge recientes). En navegadores sin soporte, este bloque
   se ignora y la navegación es instantánea como siempre — no rompe nada. */
@view-transition {
  navigation: auto;
}

:root {
  --fondo: var(--reifer-negro);
  --texto: var(--reifer-blanco);
  --texto-tenue: var(--reifer-gris);
  --acento: var(--reifer-azul);
  --morado: #D9C0CF; /* lila muy tenue, tomado de los paneles morados claros de la acuarela de quienes-somos.jpg */
  --borde: rgba(255, 255, 255, 0.14);
  --superficie: #141415;
  --superficie-hover: #1f1f21;

  --fuente: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --espaciado-seccion: clamp(5rem, 10vw, 9rem);
  --margen: clamp(1.5rem, 5vw, 4rem);
  /* Lado del cuadro abierto en "Nuestro equipo": lo comparten la foto del
     director y el panel abierto de las cintas, para que midan lo mismo. */
  --equipo-panel: clamp(360px, 38vw, 480px);

  --alto-header: 90px;

  --vidrio-fondo: rgba(10, 10, 10, 0.88);
  --linea-vidrio: rgba(255, 255, 255, 0.12);
  --ease-warm: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-deliberate: cubic-bezier(0.33, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

p { text-align: justify; }

/* ===== Preloader — pantalla de entrada inspirada en big.dk: el logo blanco
   entra grande y centrado sobre una cortina negra, y "cae" hasta calzar
   exactamente en la posición del logo real del header mientras la cortina
   principal sube libremente (puede abrir rápido y temprano, sin restricción,
   porque solo descubre zonas donde no hay nada que "adelantar"). La franja
   angosta que cubre justo la altura del header (.preloader__mascara) es
   independiente: se queda opaca hasta que el logo realmente termina de
   aterrizar (evento real, no un cálculo de tiempo), y ahí se desvanece
   rápido. Así el logo real nunca se asoma antes de tiempo, sin importar qué
   tan temprano o rápido abra la cortina principal. Todo el movimiento lo
   calcula js/main.js (técnica FLIP) para que calce pixel-perfecto sin
   importar el tamaño de pantalla. ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
}

.preloader__cortina {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--reifer-negro);
}

.preloader__mascara {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background: var(--reifer-negro);
}

.preloader__logo {
  position: fixed;
  z-index: 1;
  display: block;
  opacity: 0;
}

/* Grosor del trazo mientras se "dibuja" (ver dibujarLogoPreloader en
   main.js): relativo al viewBox 1920x1080 del logo. El bloque "ARQUITECTOS"
   (.st2) es mucho más chico que "REIFER", así que usa un trazo más fino
   para verse proporcional en vez de grueso. */
.preloader__logo path,
.preloader__logo rect,
.preloader__logo polygon {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preloader__logo .st0 { stroke-width: 3.5; }
.preloader__logo .st1 { stroke-width: 2; }
.preloader__logo .st2 { stroke-width: 1; }

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

/* La clase la pone el script inline del <head> de index.html cuando se vuelve
   a la home desde otra sección (no es entrada al sitio ni recarga). */
.sin-preloader .preloader { display: none; }

/* ===== Enlace con línea (mismo lenguaje que la etiqueta de categoría del
   hero): el texto arriba, la línea que "respira" abajo avisando que se
   puede hacer clic. Es el mismo componente para el botón de "Ver nuestro
   equipo" y para todos los "← Volver a..." del sitio — así el link siempre
   se ve y se anima igual, sin importar dónde aparezca. Cada lugar donde se
   usa le agrega su propio margen (ver .enlace-lineado--cta y las clases
   .categoria-hero__volver / .proyecto-detalle__volver). ===== */
.enlace-lineado {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  text-decoration: none;
}

.enlace-lineado--cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* .proyecto-detalle__ver-lamina es un <button>, no un <a> — sin este reset
   hereda el fondo/borde/padding por defecto del navegador y rompe el look
   de "enlace de línea" que comparte con "Volver a [categoría]". */
.proyecto-detalle__ver-lamina {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.enlace-lineado__texto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  transition: color 0.25s ease, gap 0.25s ease;
}

.enlace-lineado__linea {
  width: 1rem;
  height: 1px;
  background: var(--texto-tenue);
  transform-origin: left center;
  animation: hero-linea-respirar 3.2s ease-in-out infinite;
  transition: background 0.25s ease;
}

.enlace-lineado:hover .enlace-lineado__texto { color: var(--reifer-blanco); gap: 0.8rem; }
.enlace-lineado:hover .enlace-lineado__linea { background: var(--acento); }

.placeholder {
  outline: 1px dashed var(--acento);
  outline-offset: 4px;
  position: relative;
}
.placeholder::after {
  content: attr(data-placeholder);
  position: absolute;
  top: -1.6em;
  left: 0;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento);
  white-space: nowrap;
}

/* ===== Placeholder de imagen — reemplaza toda foto real pendiente por subir,
   para no confundir "referencia" con contenido definitivo. ===== */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    #e4e4e6,
    #e4e4e6 14px,
    #d3d3d6 14px,
    #d3d3d6 28px
  );
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.img-placeholder--chico { font-size: 0.6rem; padding: 0.4rem; }

/* ===== Header =====
   Vidrio translúcido y sutil por defecto (deja ver el fondo, como zha.com),
   y al pasar el cursor por encima se invierte a blanco sólido con el logo y
   el botón en negro. ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem var(--margen);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background 0.4s ease;
}
.header:hover {
  background: var(--reifer-blanco);
}

.header__logo {
  position: relative;
  display: block;
}
.header__logo img {
  height: 74px;
  width: auto;
  max-width: none;
}
.header__logo-negro {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.header:hover .header__logo-negro { opacity: 1; }

/* ===== Menú: botón hamburguesa circular + panel deslizante + velo.
   Mismo concepto/diagramación que villa-vento-2-presentacion (fase-menu-widget). ===== */
.menu-widget {
  position: relative;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Acceso directo, discreto, a la sección de Proyectos — la parte más
   importante del sitio — sin competir visualmente con el logo ni el menú. */
.header__proyectos-link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.header__proyectos-link:hover { color: var(--reifer-blanco); }
.header:hover .header__proyectos-link { color: rgba(0, 0, 0, 0.55); }
.header:hover .header__proyectos-link:hover { color: var(--reifer-negro); }

@media (max-width: 700px) {
  .header__proyectos-link { display: none; }
}

/* Selector de idioma (ES | EN), junto al botón del menú. js/i18n.js lo crea. */
.idioma {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.idioma__op {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.3s ease;
}
.idioma__op:hover,
.idioma__op--activo { color: var(--reifer-blanco); }
.idioma__sep {
  width: 1px;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.4s ease;
}
.header:hover .idioma__op { color: rgba(0, 0, 0, 0.4); }
.header:hover .idioma__op:hover,
.header:hover .idioma__op--activo { color: var(--reifer-negro); }
.header:hover .idioma__sep { background: rgba(0, 0, 0, 0.3); }

.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-warm);
}
.btn-menu:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.08);
}
.header:hover .btn-menu {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.05);
}
.header:hover .btn-menu:hover {
  background: rgba(0, 0, 0, 0.1);
}

.btn-menu-icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.btn-menu-icono span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--reifer-blanco);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s var(--ease-warm), opacity 0.3s ease, background 0.4s ease, filter 0.4s ease;
}

.btn-menu[aria-expanded="true"] .btn-menu-icono span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.btn-menu[aria-expanded="true"] .btn-menu-icono span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] .btn-menu-icono span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header:hover .btn-menu-icono span {
  background: var(--reifer-negro);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 102;
  width: min(80vw, 420px);
  padding: 8rem 3rem 2rem;
  background: var(--vidrio-fondo);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-left: 1px solid var(--linea-vidrio);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-deliberate);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.menu-abierto .menu-panel { transform: translateX(0); }

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.menu-item:not(.menu-item--submenu) { padding: 14px 0; }

.menu-item--submenu {
  flex-direction: column;
  align-items: stretch;
}

.menu-item__enlace {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
}

.menu-item--submenu .menu-item__enlace::after {
  content: '+';
  margin-left: auto;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease, color 0.3s ease;
}
.menu-item--submenu:hover .menu-item__enlace::after,
.menu-item--submenu:focus-within .menu-item__enlace::after {
  transform: rotate(45deg);
  color: var(--reifer-azul);
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-deliberate);
}
.menu-item--submenu:hover .submenu,
.menu-item--submenu:focus-within .submenu {
  /* Con margen de sobra sobre las 8 categorías actuales (~22rem), para que
     agregar una categoría más no vuelva a cortar el submenú. */
  max-height: 30rem;
}

.submenu__item {
  display: block;
  padding: 10px 0 10px 38px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.submenu__item:hover {
  color: var(--reifer-blanco);
  padding-left: 44px;
}

.menu-item-numero {
  min-width: 22px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}

.menu-item-nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--reifer-blanco);
  transition: color 0.3s ease;
}

.menu-item:hover .menu-item-numero,
.menu-item:hover .menu-item-nombre {
  color: var(--reifer-azul);
}

.menu-velo {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.menu-abierto .menu-velo {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--espaciado-seccion) var(--margen) 4rem;
  background: var(--reifer-negro);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__fondo .img-placeholder {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* Carrusel de fondo del hero: fotos principales de los proyectos publicados,
   una detrás de otra, con crossfade lento y automático — es la primera
   imagen que ve alguien al entrar al sitio, así que rota sola. Las flechas
   (.hero__flechas) son solo para quien quiera volver a una foto que ya
   pasó; están apagadas a propósito para no competir con el título. */
.hero__fondo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__fondo-img--activa { opacity: 1; }

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.3));
}

.hero__contenido {
  position: relative;
  z-index: 2;
}

/* Fila del título + flechas: van juntas en flexbox (no una encima de la
   otra con position:absolute) para que nunca puedan superponerse con el
   texto — si no entran en la misma línea, las flechas simplemente bajan
   a su propia línea, en cualquier ancho de pantalla. */
.hero__titulo-fila {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.hero__flechas {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.3em;
}

.hero__flecha {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease;
}
.hero__flecha:hover,
.hero__flecha:focus-visible { color: var(--reifer-blanco); }

/* Etiqueta de categoría sobre el título: una por foto, apiladas y con el
   mismo crossfade que las fotos del fondo (misma duración/curva), para que
   cambien exactamente en sincro y no se sienta como dos animaciones sueltas.
   Es un link a la categoría — la línea que "respira" debajo del texto (igual
   idea que .seccion__linea en los encabezados de sección) avisa que se puede
   hacer clic, pero más chica y apagada para no competir con la foto.
   Los ítems inactivos quedan con pointer-events:none: al estar todos
   apilados unos sobre otros (position:absolute) para el crossfade, sin esto
   el que "atrapa" el hover es el que quede arriba en el DOM, no el que se
   ve — por eso antes el hover solo funcionaba bien en uno en particular. */
.hero__etiqueta {
  position: relative;
  height: 3.9rem;
  margin-bottom: 0.6rem;
}

.hero__etiqueta-item {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
.hero__etiqueta-item--activa { opacity: 1; pointer-events: auto; }

/* Categoría de la foto (chica y apagada) y, debajo, el nombre del proyecto
   en sí (más presente) — pensado para que alguien a quien le guste una foto
   del carrusel sepa exactamente qué proyecto buscar. */
.hero__etiqueta-categoria {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}

.hero__etiqueta-texto {
  margin-top: 0.2rem;
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.25s ease;
}

.hero__etiqueta-linea {
  margin-top: 0.55rem;
  width: 1rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: left center;
  animation: hero-linea-respirar 3.2s ease-in-out infinite;
  transition: background 0.25s ease;
}

@keyframes hero-linea-respirar {
  0%, 100% { width: 1rem; opacity: 0.4; }
  50% { width: 3rem; opacity: 0.8; }
}

.hero__etiqueta-item:hover .hero__etiqueta-categoria { color: rgba(255, 255, 255, 0.75); }
.hero__etiqueta-item:hover .hero__etiqueta-texto { color: var(--reifer-blanco); }
.hero__etiqueta-item:hover .hero__etiqueta-linea { background: var(--acento); }

.hero__titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.6vw, 4.25rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  color: var(--reifer-blanco);
}

/* ===== Secciones ===== */
.seccion {
  /* Tamaño y posición del número grande de fondo ("03"): se comparten con el
     enlace "Ver todos nuestros proyectos" para que quede centrado debajo. */
  --tam-numero-fondo: clamp(7rem, 18vw, 16rem);
  --pos-numero-fondo: clamp(1rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  padding: var(--espaciado-seccion) var(--margen);
  border-top: 1px solid var(--borde);
  scroll-margin-top: var(--alto-header);
}

.seccion__numero-fondo {
  position: absolute;
  top: 0.5rem;
  right: var(--pos-numero-fondo);
  z-index: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: var(--tam-numero-fondo);
  line-height: 1;
  color: var(--borde);
  pointer-events: none;
  user-select: none;
}

.seccion > *:not(.seccion__numero-fondo) {
  position: relative;
  z-index: 1;
}

.seccion__encabezado {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  gap: 1.5rem;
}

.seccion__linea {
  width: 2.5rem;
  height: 2px;
  background: var(--acento);
  transform-origin: left center;
  animation: linea-respirar 3.2s ease-in-out infinite;
}

@keyframes linea-respirar {
  0%, 100% { width: 1.75rem; opacity: 0.65; }
  50% { width: 6.5rem; opacity: 1; }
}

.seccion__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: 0.6rem;
  font-variant-numeric: lining-nums;
}

/* Encabezado de "Proyectos": título arriba a la izquierda, y debajo, en la
   misma fila, la intro a la izquierda y el enlace "Ver todos nuestros
   proyectos" a la derecha, centrado justo debajo del "03" de fondo (mismo
   ancho y misma posición que ese número). En pantallas angostas todo se
   apila (título, intro, enlace). */
.seccion__encabezado--proyectos .proyectos__ver-todos {
  align-self: flex-start;
}
@media (min-width: 900px) {
  .seccion__encabezado--proyectos {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 1.5rem;
  }
  .seccion__encabezado--proyectos .seccion__titulo-bloque { grid-column: 1; grid-row: 1; }
  .seccion__encabezado--proyectos .seccion__intro { grid-column: 1; grid-row: 2; align-self: start; }
  .seccion__encabezado--proyectos .proyectos__ver-todos {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    /* Arranca en el mismo borde superior que la intro, así la línea de texto
       del enlace queda a la misma altura que el texto de la izquierda (la
       línea animada de abajo sobresale, sin empujar nada). */
    align-self: start;
    margin-top: 1px;
    align-items: center;
    text-align: center;
    /* "03" mide ~1.11 veces su tamaño de fuente de ancho; el margen negativo
       lo alinea con el borde derecho del número (que está pegado más cerca
       del borde de la página que el contenido). */
    width: calc(var(--tam-numero-fondo) * 1.11);
    margin-right: calc(var(--pos-numero-fondo) - var(--margen));
  }
}

.seccion__intro { grid-column: 1; grid-row: 2; }
}

.seccion__intro {
  max-width: 60ch;
  margin-top: 0.5rem;
  color: var(--texto-tenue);
  font-size: 1.05rem;
  text-align: justify;
}

/* ===== Quiénes somos =====
   Primero texto + cifras, luego una sola imagen ancha debajo (altura
   moderada para que quepa completa al entrar directo a la sección). ===== */
.quienes__banner {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.quienes__banner .img-placeholder,
.quienes__banner .quienes__imagen {
  aspect-ratio: 3.43 / 1;
  font-size: 0.85rem;
}
.quienes__banner .quienes__imagen {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--ease-warm);
}
.quienes__banner:hover .quienes__imagen {
  transform: scale(1.04);
}

.quienes__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: stretch;
}

.quienes__columna {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quienes__columna .boton {
  align-self: flex-start;
}

.quienes__texto {
  color: var(--texto-tenue);
  font-size: 1.05rem;
  line-height: 1.55;
}
.quienes__texto p + p { margin-top: 1.25rem; }

.quienes__cifras {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quienes__cifras > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--borde);
}
.quienes__cifras > div:last-child { border-bottom: 1px solid var(--borde); }

.cifra__valor {
  font-family: var(--fuente-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--morado);
  line-height: 1;
  white-space: nowrap;
}

.cifra__etiqueta {
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: right;
}

/* ===== Equipo (página dedicada) — mismo acordeón horizontal que Servicios y
   Proyectos, en grupos de 6 personas (una cinta full-bleed por grupo, apiladas
   una debajo de la otra) en vez de una sola grilla de recuadros parejos. ===== */
/* Foto del socio director, destacada aparte de las cintas — mismo tamaño
   cuadrado que un panel ya abierto de las cintas de abajo (siempre "abierta",
   nunca colapsada). Foto a la izquierda, texto a la derecha, ALINEADOS
   ARRIBA (no centrados) — el nombre arranca como título justo al nivel de
   la foto, en vez de flotar centrado en medio de espacio vacío. Deja lugar
   para una bio más adelante sin que el criterio de alineación cambie. */
/* Las fotos del director son siempre cuadradas (--equipo-panel x --equipo-panel),
   igual que el panel abierto de las cintas, y quedan alineadas arriba: si la
   bio es más alta, el texto sigue hacia abajo sin estirar las fotos. */
.equipo__director {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* min-width evita que la bio quede en una columna tan angosta que se vuelva
   una tira larguísima. Cuando no queda lugar para la acuarela a la derecha,
   la acuarela se achica y, por debajo de 1350px, se oculta (ver más abajo)
   — nunca baja a una línea propia. */
.equipo__director-texto {
  flex: 1 1 22rem;
  min-width: 22rem;
}
/* Con la acuarela visible (1350px o más) la columna necesita lugar para el
   nombre completo del director en una sola línea; la que cede es la acuarela. */
@media (min-width: 1350px) {
  .equipo__director-texto { min-width: 28rem; }
}

.equipo__director-cargo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.equipo__director-cargo::before { content: ""; width: 1.4rem; height: 1px; background: var(--acento); }

.equipo__director-nombre {
  margin-top: 0.7rem;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 2.1rem);
  line-height: 1.05;
  color: var(--reifer-blanco);
  white-space: nowrap;
}

.equipo__director-bio {
  margin-top: 1.25rem;
  color: var(--texto-tenue);
  font-size: 0.95rem;
  line-height: 1.65;
}
.equipo__director-bio p + p { margin-top: 1rem; }

/* Mismo tamaño que el panel abierto de las cintas (--equipo-panel): la foto
   del director no debe verse más chica que la del resto del equipo. */
.equipo__director-foto {
  flex: none;
  width: var(--equipo-panel);
  height: var(--equipo-panel);
  overflow: hidden;
  cursor: pointer;
}
/* La acuarela (después del texto) es decorativa: arranca con el mismo ancho
   que la foto del director, pero es la que cede espacio si no alcanza —
   se angosta hasta 280px antes que achicar la bio. Va pegada al borde
   derecho. */
.equipo__director-foto:last-child {
  flex: 0 1 var(--equipo-panel);
  min-width: 280px;
  height: auto;
  aspect-ratio: 1;
  margin-left: auto;
}
@media (max-width: 1349px) {
  .equipo__director-foto:last-child { display: none; }
}
/* Las dos fotos del director van siempre a color (a diferencia de las cintas,
   que reposan en blanco y negro): solo el acercamiento del hover se mantiene. */
.equipo__director-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-warm);
}
/* La foto del director es vertical (3:4), así que va en un cuadro 4:5: mismo
   alto que los demás paneles (--equipo-panel) pero más angosto. Así llena el
   cuadro sin franjas y solo se recorta ~6% del alto en total (aire sobre el
   pelo y bajo las manos), nunca la cabeza ni las manos. El encuadre al 80% deja
   margen de sobra aun con el acercamiento del hover. */
.equipo__director-foto:first-child { width: calc(var(--equipo-panel) * 0.8); }
.equipo__director-foto:first-child img { object-position: 50% 80%; }
.equipo__director-foto:hover img,
.equipo__director-foto:focus-visible img {
  transform: scale(1.04);
}

/* Mismo punto de quiebre que .equipo__cinta (900px) — antes este era 700px,
   así que en anchos de tablet/iPad (700-900px) el director todavía
   intentaba el layout de escritorio (foto + texto + segunda foto en fila)
   mientras la grilla de abajo ya estaba en su versión apilada, y quedaban
   visualmente desincronizados dentro de la misma página. */
/* En pantallas angostas/verticales la acuarela (segunda foto) se oculta:
   apilada a todo el ancho quedaba enorme y separaba al director del resto
   del equipo sin aportar nada. */
@media (max-width: 900px) {
  .equipo__director { flex-direction: column; }
  .equipo__director-foto { width: 100%; height: auto; aspect-ratio: 1; }
  .equipo__director-foto:first-child { width: 100%; aspect-ratio: 4 / 5; }
  .equipo__director-foto:last-child { display: none; }
}

.equipo__grid { display: flex; flex-direction: column; }

/* Título de cada sección del equipo (Arquitectura, Administración...): misma
   etiqueta con rayita que "Director y Fundador". */
.equipo__grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.6rem 0 1.1rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.equipo__grupo-titulo:first-child { margin-top: 0; }
.equipo__grupo-titulo::before { content: ""; width: 1.4rem; height: 1px; background: var(--acento); }

/* A diferencia de Servicios/Proyectos, las cintas de Equipo NO rompen el
   margen del sitio — quedan alineadas con el resto del texto de la página,
   con su propio respiro a los lados. */
.equipo__cinta {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: var(--equipo-panel);
}
.equipo__cinta + .equipo__cinta { margin-top: 2px; }

.equipo__persona {
  container-type: inline-size;
  position: relative;
  /* Todas las tarjetas miden lo mismo (1/--por-fila del ancho de la cinta): las
     filas con menos personas quedan alineadas a la izquierda, no estiradas (ver js/equipo.js). */
  flex: 0 1 calc(100% / var(--por-fila, 8));
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: flex 0.6s var(--ease-warm), filter 0.5s ease;
}
.equipo__persona:last-child { border-right: none; }

/* El panel abierto queda cuadrado: su ancho iguala la altura de la cinta
   (mismo valor exacto, vía el mismo clamp), en vez de crecer con flex-grow
   libre — que da paneles muy anchos y horizontales para un retrato. */
.equipo__persona:hover,
.equipo__persona:focus-visible,
.equipo__persona--activa {
  flex: 0 0 var(--equipo-panel);
}

.equipo__cinta:has(.equipo__persona--activa) .equipo__persona:not(.equipo__persona--activa),
.equipo__cinta:hover .equipo__persona:not(:hover):not(.equipo__persona--activa) {
  filter: brightness(0.6);
}

.equipo__persona-foto {
  position: absolute;
  inset: 0;
}

/* Alineación de las cabezas: cada foto trae la altura de los ojos distinta
   (según cómo se paró la persona), y como la tarjeta cerrada muestra la foto
   a toda su altura, las caras quedaban a alturas distintas. La imagen se
   dibuja un 20% más alta que la tarjeta, y ese margen se usa para correrla
   hacia arriba hasta dejar los ojos siempre al 36% de la altura de la
   tarjeta. --ojos es la altura de los ojos en la foto original (0 = arriba,
   1 = abajo), sale del campo "ojos" de cada miembro en content.json (0.33
   por defecto). El clamp evita dejar un hueco arriba o abajo. */
.equipo__persona-foto img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 120%;
  top: clamp(-20%, calc((0.36 - 1.2 * var(--ojos, 0.33)) * 100%), 0%);
  object-fit: cover;
  object-position: var(--foto-x, 50%) 50%;
  filter: grayscale(1) brightness(1.2) contrast(0.95);
  transition: transform 0.8s var(--ease-warm), filter 0.8s var(--ease-warm);
}
.equipo__persona:hover .equipo__persona-foto img,
.equipo__persona:focus-visible .equipo__persona-foto img,
.equipo__persona--activa .equipo__persona-foto img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(1) contrast(1);
}

.equipo__persona-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1));
  transition: background 0.4s ease;
}
.equipo__persona:hover .equipo__persona-velo,
.equipo__persona:focus-visible .equipo__persona-velo,
.equipo__persona--activa .equipo__persona-velo {
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1) 60%, transparent);
}

.equipo__persona-ficha {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
}

/* Solo se ve con la tarjeta abierta: en reposo la franja es muy angosta. */
.equipo__persona-desde {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: max-height 0.4s var(--ease-warm), opacity 0.4s var(--ease-warm);
}
.equipo__persona:hover .equipo__persona-desde,
.equipo__persona:focus-visible .equipo__persona-desde,
.equipo__persona--activa .equipo__persona-desde {
  max-height: 2rem;
  opacity: 1;
}

/* En reposo el nombre va chico; al pasar el cursor / abrir crece a su
   tamaño normal — mismo criterio que las categorías de Proyectos.
   El nombre va SIEMPRE en una sola línea: si no entra en el ancho de la
   franja (p. ej. en iPad, o en las franjas que se angostan cuando otra se
   abre), la letra se achica lo justo. --ancho-nombre es el ancho del nombre
   medido en "em" (lo calcula js/equipo.js), y 100cqw es el ancho de la
   franja (.equipo__persona es contenedor), menos los 2rem de márgenes de
   .equipo__persona-ficha. Como depende del ancho en vivo, acompaña la
   animación de apertura sin recalcular nada en JS. */
.equipo__persona-nombre {
  --nombre-cabe: calc((100cqw - 2rem) / var(--ancho-nombre, 8));
  margin-top: 0.3rem;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: min(clamp(0.68rem, 1.1vw, 0.85rem), var(--nombre-cabe));
  color: var(--reifer-blanco);
  white-space: nowrap;
  transition: font-size 0.4s var(--ease-warm);
}
.equipo__persona:hover .equipo__persona-nombre,
.equipo__persona:focus-visible .equipo__persona-nombre,
.equipo__persona--activa .equipo__persona-nombre {
  font-size: min(clamp(1.05rem, 1.8vw, 1.3rem), var(--nombre-cabe));
}

/* Nombre en dos líneas: arriba solo el nombre, abajo los dos apellidos
   más chicos y livianos. Va en "em" del nombre, así crece y se achica
   junto con él (y js/equipo.js lo toma en cuenta al medir, para que nunca
   se corte). */
.equipo__persona-nombre-linea,
.equipo__persona-apellidos { display: block; line-height: 1.2; }
.equipo__persona-apellidos {
  margin-top: 0.05em;
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}

/* Cuando otra persona se abre, las franjas de al lado se angostan tanto
   (en iPad, menos de 100px) que el nombre quedaría ilegible de chico: ahí
   el texto se desvanece, y vuelve al cerrarse. */
.equipo__persona-ficha { transition: opacity 0.3s ease; }
@container (max-width: 100px) {
  .equipo__persona-ficha { opacity: 0; }
}

.equipo__persona-linea {
  margin-top: 0.6rem;
  width: 0;
  height: 2px;
  background: var(--acento);
  transition: width 0.45s var(--ease-warm);
}
.equipo__persona:hover .equipo__persona-linea,
.equipo__persona:focus-visible .equipo__persona-linea,
.equipo__persona--activa .equipo__persona-linea {
  width: 1.6rem;
}

@media (max-width: 900px) {
  /* En vertical cada persona es una franja cerrada que, al tocarla, se
     despliega hacia abajo hasta quedar cuadrada (100cqw = el ancho de la
     cinta) — mismo gesto que el acordeón de escritorio, pero en la otra
     dirección. Solo abre con el tap (--activa), no con :hover: en touch el
     :hover queda pegado y no dejaría volver a cerrarla. */
  .equipo__cinta {
    flex-direction: column;
    height: auto;
    container-type: inline-size;
  }
  .equipo__persona,
  .equipo__persona:hover,
  .equipo__persona:focus-visible {
    flex: none;
    height: 180px;
    transition: height 0.6s var(--ease-warm), filter 0.5s ease;
  }
  .equipo__persona.equipo__persona--activa {
    flex: none;
    height: 100cqw;
  }
  .equipo__cinta:hover .equipo__persona:not(:hover):not(.equipo__persona--activa) {
    filter: none;
  }
  /* En celular la tarjeta es una franja horizontal (220px de alto): la foto
     llena la tarjeta sin el margen extra de arriba, y se encuadra con --ojos
     para que no se corte la cabeza (con el recorte centrado se cortaba el pelo). */
  .equipo__persona-foto img {
    top: 0;
    height: 100%;
    object-position: 50% var(--foto-y, calc(var(--ojos, 0.33) * 100% - 10%));
  }
  .equipo__persona {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .equipo__persona:last-child { border-bottom: none; }
  .equipo__persona-nombre,
  .equipo__persona:hover .equipo__persona-nombre,
  .equipo__persona:focus-visible .equipo__persona-nombre,
  .equipo__persona--activa .equipo__persona-nombre {
    font-size: min(clamp(1.05rem, 4vw, 1.3rem), var(--nombre-cabe));
  }
}

/* ===== Servicios — acordeón horizontal de 6 paneles con foto de fondo.
   Rompe el margen de la sección para verse a todo el ancho de la pantalla
   (la propia .seccion tiene overflow:hidden, así que el "breakout" no
   genera scroll horizontal). Cada panel se expande al pasar el cursor (o
   con foco de teclado / tap en touch, vía .servicio--activa en JS) y ahí
   recién se revela la descripción — mientras no hay foto definitiva de un
   servicio, se usa el mismo placeholder a rayas que el resto del sitio. */
.servicios__lista {
  display: flex;
  align-items: stretch;
  height: clamp(360px, 38vw, 480px);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.servicio {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: flex-grow 0.6s var(--ease-warm), filter 0.5s ease;
}
.servicio:last-child { border-right: none; }

.servicio:hover,
.servicio:focus-visible,
.servicio--activa {
  flex-grow: 3.2;
}

.servicios__lista:has(.servicio--activa) .servicio:not(.servicio--activa),
.servicios__lista:hover .servicio:not(:hover):not(.servicio--activa) {
  filter: brightness(0.6);
}

.servicio__fondo {
  position: absolute;
  inset: 0;
}

.servicio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-warm);
}
.servicio:hover .servicio__img,
.servicio:focus-visible .servicio__img,
.servicio--activa .servicio__img {
  transform: scale(1.06);
}

.servicio__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.25));
  transition: background 0.4s ease;
}
.servicio:hover .servicio__velo,
.servicio:focus-visible .servicio__velo,
.servicio--activa .servicio__velo {
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1) 60%, transparent);
}

.servicio__num {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.servicio__linea {
  width: 0;
  height: 2px;
  background: var(--acento);
  transition: width 0.45s var(--ease-warm);
}
.servicio:hover .servicio__linea,
.servicio:focus-visible .servicio__linea,
.servicio--activa .servicio__linea {
  width: 1.6rem;
}

.servicio__contenido {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1;
}

.servicio__icono {
  width: 2rem;
  height: 2rem;
  color: var(--acento);
  margin-bottom: 0.75rem;
}
.servicio__icono svg { width: 100%; height: 100%; }

/* En reposo el nombre va chico para que siempre entre entero en el panel
   angosto (6 en la cinta) — p. ej. "Administración de Proyectos" o "Diseño
   Interno Corporativo" se cortaban contra el borde. Crece a su tamaño
   normal al pasar el cursor / abrir, mismo criterio que Proyectos y Equipo. */
.servicio__nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  color: var(--reifer-blanco);
  overflow-wrap: break-word;
  transition: font-size 0.4s var(--ease-warm);
}
.servicio:hover .servicio__nombre,
.servicio:focus-visible .servicio__nombre,
.servicio--activa .servicio__nombre {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.servicio__desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  text-align: justify;
  margin-top: 0.5rem;
  max-width: 32ch;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s var(--ease-warm), opacity 0.35s ease;
}
.servicio:hover .servicio__desc,
.servicio:focus-visible .servicio__desc,
.servicio--activa .servicio__desc {
  max-height: 6rem;
  opacity: 1;
}

@media (max-width: 900px) {
  .servicios__lista {
    flex-direction: column;
    height: auto;
  }
  .servicio {
    flex: none;
    height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .servicio:last-child { border-bottom: none; }
  .servicio__nombre,
  .servicio:hover .servicio__nombre,
  .servicio:focus-visible .servicio__nombre,
  .servicio--activa .servicio__nombre {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
  .servicio__desc,
  .servicio:hover .servicio__desc,
  .servicio:focus-visible .servicio__desc,
  .servicio--activa .servicio__desc {
    max-height: 6rem;
    opacity: 1;
  }
}

/* ===== Proyectos — acordeón horizontal de 8 paneles con foto de fondo.
   Mismo mecanismo que .servicios__lista: rompe el margen de la sección para
   verse a todo el ancho, y cada panel se expande al pasar el cursor (o con
   foco de teclado / tap en touch, vía .categoria--activa en JS). ===== */
.categorias__grid {
  display: flex;
  align-items: stretch;
  height: clamp(360px, 38vw, 480px);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.categoria {
  display: block;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: flex-grow 0.6s var(--ease-warm), filter 0.5s ease;
}
.categoria:last-child { border-right: none; }

.categoria:hover,
.categoria:focus-visible,
.categoria--activa {
  flex-grow: 3.6;
}

.categorias__grid:has(.categoria--activa) .categoria:not(.categoria--activa),
.categorias__grid:hover .categoria:not(:hover):not(.categoria--activa) {
  filter: brightness(0.6);
}

.categoria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(1.2) contrast(0.95);
  transition: transform 0.8s var(--ease-warm), filter 0.8s var(--ease-warm);
}
.categoria:hover .categoria__img,
.categoria:focus-visible .categoria__img,
.categoria--activa .categoria__img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(1) contrast(1);
}

.categoria__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1));
  transition: background 0.4s ease;
}
.categoria:hover .categoria__overlay,
.categoria:focus-visible .categoria__overlay,
.categoria--activa .categoria__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1) 60%, transparent);
}

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

/* En reposo el nombre va chico (siempre cabe entero, incluso en los nombres
   largos como "Institucionales" con 8 paneles angostos); al pasar el cursor
   (o foco / tap) crece a su tamaño normal — mismo lenguaje que el resto del
   sitio, pero evita que se corte por el ancho fijo del panel colapsado. */
.categoria__nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  color: var(--reifer-blanco);
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  font-variant-numeric: lining-nums;
  transition: transform 0.4s var(--ease-warm), font-size 0.4s var(--ease-warm);
}
.categoria:hover .categoria__nombre,
.categoria:focus-visible .categoria__nombre,
.categoria--activa .categoria__nombre {
  transform: translateY(-0.4rem);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.categoria__linea {
  width: 0;
  height: 2px;
  margin-bottom: 0.6rem;
  background: var(--acento);
  transition: width 0.45s var(--ease-warm);
}
.categoria:hover .categoria__linea,
.categoria:focus-visible .categoria__linea,
.categoria--activa .categoria__linea { width: 1.6rem; }

@media (max-width: 900px) {
  .categorias__grid {
    flex-direction: column;
    height: auto;
  }
  .categoria {
    flex: none;
    height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .categoria:last-child { border-bottom: none; }
  .categoria__nombre,
  .categoria:hover .categoria__nombre,
  .categoria:focus-visible .categoria__nombre,
  .categoria--activa .categoria__nombre {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
}

/* ===== Proyecto individual (páginas de categoría) =====
   Tarjetas con borde propio (en vez del truco de fondo-detrás-del-gap) para
   que una fila incompleta (p. ej. un solo proyecto en la categoría) no deje
   ver una celda vacía del color de fondo del grid. ===== */
.proyecto {
  display: block;
  background: var(--fondo);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--borde);
}

.proyecto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.proyecto:hover .proyecto__img { transform: scale(1.04); }

.proyecto__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 55%);
  color: var(--reifer-blanco);
}

.proyecto__nombre { font-family: var(--fuente-display); font-weight: 600; font-size: 1.05rem; font-variant-numeric: lining-nums; }
.proyecto__tipo {
  font-size: 0.65rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.2rem;
}

.proyectos-lista__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .proyectos-lista__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .proyectos-lista__grid { grid-template-columns: 1fr; }
}

.proximamente {
  padding: 3rem 0 1rem;
  color: var(--texto-tenue);
  font-size: 1.1rem;
  max-width: 50ch;
}

/* ===== Hero de categoría (páginas de proyectos) ===== */
.categoria-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem var(--margen) 3rem;
  background: repeating-linear-gradient(
    45deg,
    #3a3a3d,
    #3a3a3d 14px,
    #2c2c2f 14px,
    #2c2c2f 28px
  );
}
.categoria-hero--con-imagen {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Estilo sketch: mitad de camino entre a color y el blanco y negro del
   acordeón de Proyectos en el home — un ::before repite el mismo fondo
   (vía background-image:inherit) con el filtro encima, sin tocar el texto
   que va sobre el banner. */
.categoria-hero--con-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: grayscale(0.75);
}
/* Para una foto clara (p. ej. la acuarela de "Quiénes somos" en "Todos los
   proyectos"): los banners de las categorías son oscuros de origen (brillo
   medio ~60-80 de 255; ésta queda en ~60), así que esta variante la oscurece
   hasta ese mismo nivel para que el título blanco se lea igual y todos los banners se sientan
   parte de la misma familia. */
.categoria-hero--tenue::before {
  filter: grayscale(0.75) brightness(0.36);
}
/* Banner con la imagen alineada arriba, cortando solo por abajo. El header
   fijo tapa los primeros píxeles del banner y con un "cover" normal cortaba
   lo de arriba del dibujo (y a veces los lados). Acá la imagen (que llega por
   la variable --banner) se pinta en una capa (::before) con un relleno arriba
   igual a la altura del header, y "background-origin: content-box" hace que se
   escale y alinee DESDE ESE BORDE: el dibujo arranca justo debajo del header,
   se ve de lado a lado y lo único que se recorta es lo de más abajo. */
.categoria-hero--alineado-arriba {
  overflow: hidden;
  background: var(--reifer-negro);
}
.categoria-hero--alineado-arriba::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding-top: var(--alto-header);
  background-image: var(--banner);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-origin: content-box;
  filter: grayscale(0.75) brightness(0.36);
}
.categoria-hero__etiqueta {
  position: absolute;
  top: 1.5rem;
  right: var(--margen);
  z-index: 1;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.categoria-hero__volver {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}

.categoria-hero__titulo {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-variant-numeric: lining-nums;
  color: var(--reifer-blanco);
}

/* ===== Proyecto individual — ficha completa (estilo BIG: volver + título +
   datos a la izquierda, imagen protagonista al centro, texto a la derecha).
   El volver/título viven DENTRO de la columna de la izquierda (no en una
   fila aparte arriba) para que la imagen pueda arrancar desde el mismo
   nivel, justo debajo del header, en vez de quedar empujada hacia abajo. */
.proyecto-detalle-seccion {
  padding: calc(var(--alto-header) + 1.5rem) var(--margen) 1.5rem;
}

.proyecto-detalle {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.proyecto-detalle--sin-texto { grid-template-columns: 220px 1fr; }

.proyecto-detalle__meta {
  position: sticky;
  top: calc(var(--alto-header) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Los dos enlaces de arriba ("Volver a proyectos" y "Visita la categoría de
   X") van juntos, más pegados entre sí que al resto de la columna. */
.proyecto-detalle__navegacion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.proyecto-detalle__titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  font-variant-numeric: lining-nums;
  /* Nunca se parte una palabra en dos renglones. Si la palabra más larga
     (ej. "LEGISLATIVA", "METROPOLITANO") no cabe en la columna de 220px,
     js/proyecto-detalle.js (ajustarTitulo) achica la letra lo justo para
     que entre. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.proyecto-detalle__dato {
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}
.proyecto-detalle__etiqueta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  margin-bottom: 0.3rem;
}
.proyecto-detalle__valor { font-size: 0.95rem; }

.proyecto-detalle__texto {
  color: var(--texto-tenue);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
}
.proyecto-detalle__texto p + p { margin-top: 1rem; }

/* ===== Carrusel =====
   Arranca al mismo nivel que "Volver" y el título (misma fila del grid) y
   ocupa casi toda la altura disponible, para verse protagonista y no
   alargada. Alto acotado al viewport (no a aspect-ratio) para que la ficha
   quepa en pantalla sin scroll en la mayoría de monitores. */
.carrusel {
  position: relative;
  height: min(71vh, 680px);
  overflow: hidden;
  background: var(--superficie);
}

@media (max-width: 900px) {
  .carrusel { height: min(45vh, 420px); }
}

.carrusel__pista {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-deliberate);
}

.carrusel__img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(10, 10, 10, 0.4);
  color: var(--reifer-blanco);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.carrusel__flecha[hidden] { display: none; }
.carrusel__flecha:hover { background: var(--acento); border-color: var(--acento); }
.carrusel__flecha--prev { left: 1rem; }
.carrusel__flecha--next { right: 1rem; }

.carrusel__contador {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  color: var(--reifer-blanco);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.carrusel__img { cursor: zoom-in; }

/* ===== Lightbox (visor de pantalla completa) =====
   Overlay fijo sobre todo el sitio, con la foto grande centrada, flechas
   iguales a las del carrusel, y una fila de miniaturas abajo para saltar
   directo a cualquier foto sin tener que recorrerlas una por una. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 7, 0.96);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.5rem 0;
}
/* El [hidden] del atributo HTML no basta para tapar el "display: flex" de
   arriba (misma especificidad, y el nuestro es autor vs. el del navegador),
   así que el mostrar/ocultar real lo hace el JS con "display" inline. */
.lightbox:not([hidden]) { display: flex; }

body.lightbox-abierto { overflow: hidden; }

.lightbox__figura {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__cerrar {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--reifer-blanco);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.lightbox__cerrar:hover { background: var(--acento); border-color: var(--acento); }

.lightbox__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--reifer-blanco);
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.lightbox__flecha:hover { background: var(--acento); border-color: var(--acento); }
.lightbox__flecha--prev { left: 1rem; }
.lightbox__flecha--next { right: 1rem; }

.lightbox__contador {
  margin-top: 1rem;
  color: var(--texto-tenue);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.lightbox__miniaturas {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 0;
  margin-top: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.lightbox__miniatura {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 3.4rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lightbox__miniatura:hover { opacity: 0.85; }
.lightbox__miniatura--activa { opacity: 1; border-color: var(--acento); }

.lightbox__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .lightbox { padding: 1rem 1rem 0; }
  .lightbox__flecha, .lightbox__cerrar { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }
  .lightbox__miniatura { width: 3.6rem; height: 2.7rem; }
}

@media (max-width: 900px) {
  .proyecto-detalle,
  .proyecto-detalle--sin-texto { grid-template-columns: 1fr; }
  .proyecto-detalle__meta {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
  }
  .proyecto-detalle__navegacion,
  .proyecto-detalle__titulo { flex: 1 1 100%; }
  .proyecto-detalle__dato { flex: 1 1 auto; }
}

/* ===== Contacto =====
   Mismo lenguaje visual que .categorias__grid: una sola caja rectangular,
   dividida en dos mitades iguales por una línea delgada (gap de 2px del
   color del borde). Así ambas mitades quedan perfectamente simétricas en
   ancho y alto (grid + stretch), sin huecos sueltos ni columnas flotando
   a media altura, y el mapa domina la mitad derecha por completo. */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--borde);
  border: 1px solid var(--borde);
  min-height: clamp(360px, 40vw, 520px);
}

#contacto-datos {
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.contacto__dato { margin-bottom: 0; }

.contacto__etiqueta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-tenue);
  margin-bottom: 0.35rem;
}

.contacto__valor { font-size: 1.15rem; }
.contacto__valor a:hover { color: var(--acento); }

.contacto__mapa {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 40vw, 520px);
  background: var(--borde);
  border: none;
  display: block;
}

/* ===== Footer ===== */
.footer {
  padding: 2rem var(--margen);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .menu-panel { width: min(85vw, 360px); padding: 7rem 2rem 2rem; }

  /* En pantallas angostas no forzamos una sola línea — mejor que se
     acomode en 2-3 líneas a que se salga de la pantalla. Pulido fino de
     mobile queda para la pasada de responsive dedicada. */
  .hero__titulo { white-space: normal; font-size: clamp(2rem, 8vw, 3rem); }

  .quienes__grid,
  .contacto__grid { grid-template-columns: 1fr; }
  .contacto__grid { min-height: 0; }
  .contacto__mapa { min-height: 0; aspect-ratio: 4 / 3; }

  .quienes__banner .img-placeholder { aspect-ratio: 16 / 9; }

  .equipo__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
  .equipo__grid { grid-template-columns: repeat(2, 1fr); }
}