/* =========================================================================
   Arkitektura Studio
   Se conserva del sitio anterior: el ocre #d38400 como unico acento, el fondo
   #1b1b1b, la barra lateral de 80px y la tipografia fina muy espaciada.
   Se corrige: escala tipografica con clamp(), reticula de verdad, y Mulish
   cargada CON sus pesos (el sitio viejo pedia 600/700/800 sin importarlos,
   asi que el navegador fabricaba negritas falsas).
   ========================================================================= */

:root {
  /* color ------------------------------------------------------------- */
  --ocre: #d38400;
  --ocre-vivo: #f0960a;
  --tinta: #1b1b1b;
  --papel: #ffffff;

  --fondo: var(--tinta);
  --fondo-alt: #212121;
  --texto: rgba(255, 255, 255, 0.92);
  --texto-tenue: rgba(255, 255, 255, 0.66);
  --texto-debil: rgba(255, 255, 255, 0.54);
  --linea: rgba(255, 255, 255, 0.14);
  --acento: var(--ocre-vivo);

  /* medidas ----------------------------------------------------------- */
  --barra: 80px;
  --margen: clamp(1.5rem, 5vw, 6rem);
  --ancho-max: 78rem;

  /* escala tipografica ------------------------------------------------ */
  --t-portada: clamp(2.2rem, 7vw, 5.6rem);
  --t-seccion: clamp(1.9rem, 5vw, 3.6rem);
  --t-titulo: clamp(1.15rem, 2vw, 1.5rem);
  --t-cuerpo: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-guia: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
  --t-rotulo: 0.6875rem;

  --ritmo: clamp(4rem, 10vw, 9rem);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Devuelve el juego oscuro dentro de una seccion clara. Los mismos valores
   que :root; hasta ahora solo existian alli y no habia como recuperarlos. */
.tema-oscuro {
  --fondo: var(--tinta);
  --fondo-alt: #212121;
  --texto: rgba(255, 255, 255, 0.92);
  --texto-tenue: rgba(255, 255, 255, 0.66);
  --texto-debil: rgba(255, 255, 255, 0.54);
  --linea: rgba(255, 255, 255, 0.14);
  --acento: var(--ocre-vivo);

  background: var(--fondo);
  color: var(--texto);
}

/* El sitio alterna secciones oscuras y claras, como el anterior: portada
   oscura, el oficio en blanco, Jonathan oscuro, la obra en blanco, contacto y
   pie oscuros. No se sigue `prefers-color-scheme` a proposito: el contraste
   entre secciones ES el diseno, y dejarlo al ajuste del sistema lo deshace.
   Los tokens son los mismos; lo unico que cambia es quien los define. */
.tema-claro {
  --fondo: #ffffff;
  --fondo-alt: #f2efea;
  --texto: rgba(18, 18, 18, 0.92);
  --texto-tenue: rgba(18, 18, 18, 0.72);
  --texto-debil: rgba(18, 18, 18, 0.62);
  --linea: rgba(18, 18, 18, 0.13);
  /* El ocre de marca da 3,3:1 sobre blanco: no alcanza para texto pequeno.
     Sobre claro el acento se oscurece; el ocre de la barra lateral no cambia,
     porque ahi es superficie y no letra. */
  --acento: #9d6200;

  background: var(--fondo);
  color: var(--texto);
}

/* ---------------------------------------------------------------- base */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-left: var(--barra);
  position: relative;   /* referencia del ocre de la franja, ver body::before */
  background: var(--fondo);
  color: var(--texto);
  font-family: Mulish, "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

h1, h2, h3, h4 { font-weight: 200; line-height: 1.1; margin: 0; }

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

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--acento); color: #fff;
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.saltar:focus { left: var(--barra); }

/* ------------------------------------------------- la barra ocre (firma) */

/* El ocre de la franja lo pinta ESTE pseudoelemento, no `.firma`.

   `.firma` es `position: fixed` y el navegador la compone en su propia capa.
   En el equipo del estudio esa capa se rasterizaba a otra escala y se
   reutilizaba estirada: la banda se veia ~6 px mas ancha al recargar y se
   normalizaba sola al rato, mientras getBoundingClientRect seguia diciendo
   80 — o sea, el layout estaba bien y lo que fallaba era el pintado. Un
   absoluto sin transform ni filtro no pide capa propia: va en la misma que
   el resto de la pagina y no puede escalarse aparte.

   Tampoco sirve pintarlo como fondo del body: la banda de trayectoria sangra
   100vmax a los lados con un box-shadow y lo taparia. Por eso lleva z-index
   por encima de las secciones y por debajo de `.firma`, que conserva encima
   el indice, el rotulo y las redes. */
body::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; z-index: 5;
  width: var(--barra);
  background: var(--ocre);
  pointer-events: none;
}

.firma {
  position: fixed; inset: 0 auto 0 0; z-index: 6;
  width: var(--barra);
  /* sin background: lo pinta body::before */
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 2rem 0 1.25rem;
}

.firma__indice { display: grid; justify-items: center; }

.firma__seccion {
  margin: 0;
  /* Girado 180: la palabra corre de abajo hacia arriba y se lee inclinando
     la cabeza a la izquierda, como en el sitio anterior. Sin el giro corre de
     arriba abajo y hay que inclinarla a la derecha. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Al cambiar de seccion el bloque no salta: el nombre sale por arriba, el
   numero por abajo y la raya se cierra al centro; despues entran los nuevos.
   El JS solo pone y quita data-saliendo; el resto es transicion. */
.firma__seccion,
.firma__numero { transition: opacity 0.24s var(--curva), transform 0.24s var(--curva); }
.firma__numero::before { transition: width 0.24s var(--curva), margin-left 0.24s var(--curva); }

.firma__indice[data-saliendo] .firma__seccion { opacity: 0; transform: rotate(180deg) translateY(10px); }
.firma__indice[data-saliendo] .firma__numero { opacity: 0; transform: translateY(10px); }
.firma__indice[data-saliendo] .firma__numero::before { width: 0; margin-left: 0; }

/* El numero se lee derecho aunque la palabra vaya girada: en 80 px cabe de
   sobra y hace de contrapunto. Misma familia y peso que los numerotes de
   cada seccion, en un blanco discreto sobre el ocre. */
.firma__numero {
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  position: relative;
}
.firma__numero::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 26px; height: 1px; margin-left: -13px;
  background: rgba(255, 255, 255, 0.42);
}

.firma__redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.firma__redes::before {
  content: ""; display: block; width: 26px; height: 1px;
  margin: 0 auto 1.1rem; background: rgba(255, 255, 255, 0.42);
}

.firma__redes a {
  position: relative;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.25s var(--curva);
}
.firma__redes a:hover { color: #fff; }

/* Los iconos se dibujan con primitivas y currentColor, no con archivos de
   marca: asi toman el mismo blanco del texto de la franja, pesan cero y se
   ven nitidos en cualquier pantalla. Trazo fino, como el resto del sitio. */
.icono {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* La etiqueta sale hacia la derecha, fuera de la franja. Aparece con el raton
   encima y tambien al llegar con el teclado. El nombre completo va en el
   aria-label del enlace, asi que esto es adorno y lleva aria-hidden. */
.etiqueta {
  position: absolute; left: calc(100% + 0.55rem); top: 50%;
  z-index: 8;
  padding: 0.42rem 0.7rem;
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.92);
  border-left: 2px solid var(--ocre);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 0.22s var(--curva), transform 0.22s var(--curva);
}
.firma__redes a:hover .etiqueta,
.firma__redes a:focus-visible .etiqueta {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Mientras no se confirme la cuenta, el enlace no lleva a ninguna parte:
   se marca tenue para que se note que falta y no se suba asi por descuido. */
.firma__redes a[data-pendiente][href="#"] { opacity: 0.45; }

/* La linea de obra: grande, blanca, con los pies EN el filo de la franja.

   `right: -0.104em`. Los pies de las rectas y las redondas (m, o, n) mueren
   exactamente en la ultima columna de la franja, a 0 px del filo, y lo que
   cuelga —el palo de la p, de la q, de la j— lo pasa y se ve entero sobre el
   fondo. Es lo pedido con maqueta a mano, dos veces.

   LA FRANJA NO SE TOCA: 80 px fijos. Ni se ensancha para que quepa la cola,
   ni se mueve, ni se reduce. Lo unico que se ajusta es el texto.

   Las tres cifras del valor importan, y la tercera se descubrio la ultima:
   con -0.106em el borde del glifo cae una fraccion de pixel pasado el filo y
   pinta un gris claro —77,77,77 a 126,126,126— en la primera columna del
   fondo. Sobre las secciones oscuras ese fleco se lee como banda y la franja
   parece ensancharse: 488 filas en toda la pagina. Desde -0.105em son 0; se
   toma -0.104em por margen, porque el corte se mueve con el escalado de
   pantalla. La diferencia entre -0.106 y -0.104 es 0,1 px: no se ve moverse
   el texto, pero se ve el fleco.

   Al retocar, MEDIR EN TODA LA PAGINA y con el rotulo QUIETO — una ventana
   suelta dio 0 cuando habia 475, y midiendo durante el fundido salen filas
   fantasma. */
.firma__linea {
  position: absolute; right: -0.104em; top: 50%;
  margin: 0;
  max-height: 78vh;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
  font-size: var(--t-seccion);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: lowercase;   /* «obra institucional», no «Obra institucional» */
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;

  /* Se funde animando el COLOR, no la opacidad. Con opacity Chrome saca el
     rotulo a su propia capa mientras dura la transicion y lo rasteriza con
     otro desfase: durante esos 240 ms la tinta se derrama una fraccion de
     pixel pasado el filo y la franja aparenta ensancharse. Como el fundido
     ocurre justo al pasar de una seccion a otra, se ve al recorrer la pagina
     y no parado. Animando el color el texto nunca sale de su capa.
     Medido: con opacity, 72 filas con tinta fuera a 125 %; con color, 0. */
  color: rgba(255, 255, 255, 0);
  transition: color 0.24s var(--curva);   /* los 240 ms del indice */
}
.firma__linea[data-visible] { color: #fff; }
.firma__linea[data-saliendo] { color: rgba(255, 255, 255, 0); }

.firma__linea[data-saliendo] { opacity: 0; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
  position: fixed; top: 0; right: 0; left: var(--barra); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--margen);
  /* Solida y siempre oscura: translucida sobre la portada blanca daba un
     gris sucio, y el sitio anterior tambien tenia la barra superior maciza. */
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--curva);
}
.cabecera[data-desplazada] { border-bottom-color: var(--linea); }

.marca { text-decoration: none; display: flex; }
/* El logo se mide por ALTO, no por ancho: lo que manda aca es el alto de la
   barra, y el ancho sale de la proporcion del archivo. Son dos archivos de
   proporcion distinta —4,5:1 el corto, 14:1 el que trae la firma al lado—,
   asi que aca no se puede declarar aspect-ratio.

   A este tamano el asta del logo cae en 0,59 px: por debajo de un pixel el
   navegador la pinta como un gris a medias y las letras se ven blandas. Es
   sabido y es la decision del estudio, que prefiere la barra baja. Para que
   se resolvieran haria falta 60 px de logo y 96 de barra. JONATHAN HENNESSEY
   no sufre eso porque va a su propia escala (ESCALA_FIRMA en gen_logo.py) y
   su trazo si pasa de un pixel. */
.marca__logo { display: block; height: 2.25rem; width: auto; }

.menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1rem, 2.2vw, 2.4rem);
}
.menu a {
  position: relative;
  font-size: var(--t-rotulo); font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66); text-decoration: none;
  padding-bottom: 0.35rem;
  transition: color 0.25s var(--curva);
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ocre-vivo);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--curva);
}
.menu a:hover { color: #fff; }
.menu a[aria-current="true"] { color: #fff; }
.menu a[aria-current="true"]::after { transform: scaleX(1); }

.menu-boton {
  display: none;
  width: 42px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.menu-boton span:not(.visualmente-oculto) {
  display: block; height: 1px; margin: 7px 0;
  background: rgba(255, 255, 255, 0.92);
  transition: transform 0.3s var(--curva), opacity 0.3s var(--curva);
}
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------- portada */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 8rem var(--margen) 6rem;
  overflow: hidden;
}

/* El pase de fotos. Se cruzan por opacidad, todas apiladas en el mismo sitio.
   Van como <img> y no como fondo CSS para poder controlar cuando se pide cada
   una: seis a 1920x1080 pesan 1,2 MB y no pueden bajar todas al abrir. */
.portada__pase { position: absolute; inset: 0; z-index: 0; }
.portada__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--curva);
}
.portada__foto[data-activa] { opacity: 1; }

/* Vela sobre la foto para que el texto se lea. Es la que hace que la portada
   siga leyendose como seccion clara aunque debajo haya una foto oscura. */
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 55%, transparent),
    color-mix(in srgb, var(--fondo) 88%, transparent));
  z-index: 1;
}

.portada__texto {
  position: relative; z-index: 2; max-width: min(46ch, 100%);
  /* De aca cuelgan las dos piezas de marca: el logo lo llena y la firma va a
     una fraccion suya, para que no se despeguen al cambiar el ancho. */
  --logo-ancho: min(30rem, 100%);
}

/* El h1 se queda por el titulo de la pagina, pero lo que se ve es el logo.
   Aca manda el ANCHO —es la pieza mas grande del sitio y tiene que respirar
   dentro de .portada__texto—, y el alto sale de la proporcion. */
.portada__titulo { margin: 0 0 1.6rem; line-height: 0; }
.portada__logo { display: block; width: var(--logo-ancho); height: auto; }

/* JONATHAN HENNESSEY, en la letra del propio logo y no en Mulish. Va al mismo
   ancho que el logo, que es la proporcion del maestro: alli el nombre mide
   783 px y el conjunto 778, o sea lo mismo. */
.portada__firma { margin: 0 0 2.6rem; line-height: 0; width: var(--logo-ancho); }
.portada__firma img { display: block; width: 100%; height: auto; }

.portada__bajada {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-guia);
  font-weight: 200;
  color: var(--texto-tenue);
}

.portada__flecha {
  position: absolute; z-index: 2;
  left: var(--margen); bottom: 2.5rem;
  width: 30px; height: 46px;
  border: 1px solid var(--linea); border-radius: 999px;
}
.portada__flecha::after {
  content: ""; position: absolute; left: 50%; top: 9px;
  width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px;
  background: var(--acento);
  animation: gotear 1.9s var(--curva) infinite;
}
@keyframes gotear {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}

/* -------------------------------------------------------------- secciones */

.seccion {
  position: relative;
  /* El ancho maximo se hace con padding y no con max-width + margin auto:
     asi el fondo de una seccion clara llega hasta los bordes de la ventana
     mientras el texto sigue centrado y contenido. */
  padding-block: var(--ritmo);
  padding-inline: max(var(--margen), (100% - var(--ancho-max)) / 2);
}
.seccion + .seccion { border-top: 1px solid var(--linea); }

.seccion__numero {
  position: absolute; top: calc(var(--ritmo) - 0.4em);
  right: max(var(--margen), (100% - var(--ancho-max)) / 2);
  margin: 0;
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 700; line-height: 1;
  color: var(--texto-debil);
  opacity: 0.16;   /* el token subio por contraste; el numero es adorno */
  pointer-events: none;
}

.seccion__titulo {
  font-size: var(--t-seccion);
  letter-spacing: 0.02em;
  margin-bottom: 2.5rem;
}
.seccion__titulo--firma {
  /* Su nombre va como en la cabecera: en mayusculas y espaciado. El espaciado
     esta medido sobre la firma del logo, donde cada letra avanza 1,6 veces su
     altura de caja. Ese aire lo alarga, asi que va mas pequeno que los otros
     titulos para caber en un renglon. */
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.seccion__titulo::after {
  content: ""; display: block;
  width: 3rem; height: 2px; margin-top: 1.2rem;
  background: var(--acento);
}

.rotulo {
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texto-debil);
  margin: 0 0 1.1rem;
}

.parrafo-guia {
  max-width: 58ch;
  font-size: var(--t-guia);
  font-weight: 200;
  line-height: 1.55;
  color: var(--texto-tenue);
  margin: 0 0 3rem;
}

/* ---------------------------------------------------------------- oficio */

.oficio__cuerpo {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .oficio__cuerpo { grid-template-columns: 1.15fr 1fr; align-items: start; }
}

/* El parrafo solo no llenaba la columna y quedaba un hueco al lado de los
   servicios. Lo llena el metodo, que es lo que Jonathan contesto. */
.oficio__texto .parrafo-guia { margin-bottom: 1.6rem; }
.oficio__texto .parrafo-guia:last-child { margin-bottom: 0; }

.metodo { margin-top: 2.5rem; }
.metodo p {
  max-width: 58ch;
  font-weight: 200; line-height: 1.65;
  color: var(--texto-tenue);
  margin: 0 0 1rem;
}
.metodo p:last-child { margin-bottom: 0; }

.servicios__grupo + .servicios__grupo { margin-top: 2rem; }

.servicios__categoria {
  font-size: 1rem; font-weight: 400; letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  display: grid; gap: 0.15rem;
}
.servicios__categoria span {
  font-size: 0.8125rem; font-weight: 200; letter-spacing: 0.02em;
  color: var(--texto-tenue);
}

.servicios__lista { list-style: none; margin: 0; padding: 0; }
.servicios__lista li {
  padding: 0.8rem 0 0.8rem 2.2rem;
  border-bottom: 1px solid var(--linea);
  position: relative;
  font-weight: 200;
}
.servicios__lista li::before {
  content: ""; position: absolute; left: 0; top: 1.5em;
  width: 1.2rem; height: 1px; background: var(--acento);
}

/* --------------------------------------------------------------- proceso */

.proceso { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* auto-fit y no cuatro columnas fijas: en el movil los pasos se apilan y en
   la tableta caen de dos en dos, sin que haga falta un punto de corte. */
.proceso__pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.proceso__pasos li {
  display: grid; gap: 0.5rem;
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--acento);
  font-weight: 200;
}
.proceso__pasos span {
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em;
  color: var(--acento);
}

/* ---------------------------------------------------------------- retrato */

.retrato { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.retrato__foto { max-width: 26rem; }

/* LAS DOS COLUMNAS VAN FIJAS, y no en fracciones, porque si no la foto y el
   texto no acaban nunca a la misma altura: el alto de la foto crece con su
   ancho y el del texto DECRECE, asi que en cuanto la pantalla cambia se
   despegan. Con medidas fijas el texto mide siempre lo mismo —39rem dan seis
   renglones— y la foto se corta al alto que le corresponde: 26rem por 1,44
   del recorte son las mismas 37,4rem. Si se toca el texto, hay que volver a
   medir los dos y ajustar una de las dos cifras.

   Por eso tambien el corte es 76rem y no 48: por debajo no caben las dos
   columnas sin estrujar el texto a menos de 40 caracteres por linea. */
@media (min-width: 76rem) {
  .retrato {
    grid-template-columns: 26rem 39rem;
    justify-content: start;
    align-items: start;
  }
  .retrato__foto { max-width: none; }
}

.retrato__foto img { display: block; width: 100%; height: auto; }
.retrato__texto .parrafo-guia { margin-bottom: 1.4rem; }
.retrato__texto p:not(.parrafo-guia) {
  max-width: 62ch;
  font-weight: 200; line-height: 1.65;
  color: var(--texto-tenue);
  margin: 0 0 1.4rem;
}
.retrato__texto b { font-weight: 400; color: var(--texto); }
.retrato__texto p:last-child { margin-bottom: 0; }
.retrato + .cita { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 70ch; }

.cita {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--acento);
}
.cita p {
  margin: 0 0 0.8rem;
  font-size: var(--t-guia); font-weight: 200; font-style: italic;
  line-height: 1.5;
}
.cita footer {
  font-size: 0.8125rem; font-weight: 200; letter-spacing: 0.03em;
  color: var(--texto-tenue);
}
.cita cite { font-style: normal; }
.cita a { color: inherit; text-decoration-color: var(--acento); text-underline-offset: 0.25em; }
.cita a:hover, .cita a:focus-visible { color: var(--acento); }

/* La frase de cierre del oficio: la escogio el para eso, asi que va grande y
   sin la raya del lado, que aqui la achicaria. */
.cita--cierre {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-left: 0; border-left: 0;
  max-width: 62ch;
}
.cita--cierre p {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-style: normal; line-height: 1.35;
  margin-bottom: 1.2rem;
}
.cita--cierre p::before { content: "«"; color: var(--acento); }
.cita--cierre p::after { content: "»"; color: var(--acento); }

/* ------------------------------------------------------------ trayectoria */

.trayectoria {
  list-style: none;
  --aire: clamp(2.5rem, 5vw, 3.5rem);
  margin-block: clamp(2rem, 4vw, 3rem) var(--ritmo);
  padding-block: var(--aire);
  padding-inline: 0;
  position: relative;
  display: grid; gap: 2.5rem;
  --avance: 0;

  /* Banda a todo el ancho sin salirse de la seccion: la sombra pinta hacia
     los lados y el clip impide que eso genere barra horizontal. El contenido
     no lleva padding lateral, asi que sigue alineado con el resto. */
  box-shadow: 0 0 0 100vmax var(--fondo);
  clip-path: inset(0 -100vmax);
}
/* la linea que se dibuja con el scroll: GSAP anima --avance sobre el
   elemento y el pseudo lo hereda. Registrarla la vuelve interpolable. */
@property --avance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Cuanto le toca de encendido a cada punto: 0 apagado, 1 encendido. */
@property --encendido {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.trayectoria::before {
  content: ""; position: absolute; left: 0;
  top: var(--aire); bottom: var(--aire);
  width: 1px; background: var(--linea);
}
.trayectoria::after {
  content: ""; position: absolute; left: 0; top: 0.6rem;
  width: 1px; background: var(--acento);
  height: calc((100% - 1.2rem) * var(--avance));
}

.hito { padding-left: 2.5rem; position: relative; }
/* Cada punto se enciende cuando el trazo lo alcanza. El umbral es la
   fraccion de recorrido a la que esta: con tres hitos, 0, un tercio y dos
   tercios. El factor 25 hace que el encendido sea rapido en vez de un
   desvanecido largo. CSS no tiene condicionales, pero clamp hace de una. */
.hito:nth-child(2) { --umbral: 0; }
.hito:nth-child(3) { --umbral: 0.34; }
.hito:nth-child(4) { --umbral: 0.67; }

/* El punto esta SIEMPRE lleno; lo que cambia al llegar el trazo es el halo.
   El desplazamiento sale de una cuenta, no del ojo: el punto mide 11 px con
   border-box, asi que su centro esta a 5,5 px de su borde; la linea mide 1 px
   y su centro esta a 0,5 px del borde de .hito. Para que la linea pase por el
   centro del punto: 0,5 - 5,5 = -5 px. Con -6,5 —lo que habia— la linea
   pasaba 1,5 px por debajo. */
.hito::before {
  content: ""; position: absolute; left: -5px; top: 0.75rem;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--acento);
  background: var(--acento);

  --encendido: clamp(0, (var(--avance) - var(--umbral)) * 25, 1);
  box-shadow:
    0 0 calc(var(--encendido) * 14px) calc(var(--encendido) * 2px) var(--acento),
    0 0 calc(var(--encendido) * 4px) var(--acento);
}
.hito__fecha {
  margin: 0 0 0.3rem;
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; color: var(--acento);
  /* «Desde 2007» va junto a rangos de cifras: en versalitas todos pesan igual */
  text-transform: uppercase;
}
.hito__cargo { font-size: var(--t-titulo); font-weight: 200; margin-bottom: 0.2rem; }
.hito__detalle { margin: 0; color: var(--texto-tenue); font-weight: 200; }

@media (min-width: 48rem) {
  .trayectoria { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .trayectoria::before, .trayectoria::after {
    top: var(--aire); bottom: auto; height: 1px; width: 100%;
  }
  .trayectoria::after { width: calc(100% * var(--avance)); }
  .hito { padding: 2.5rem 1.5rem 0 0; }
  .hito::before { left: 0; top: -5px; }   /* la misma cuenta, ahora en vertical */
}

/* ---------------------------------------------------------------- equipo */

.equipo__bloque + .equipo__bloque { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* columns y no grid: cada bloque tiene los suyos (cuatro y cinco) y el reparto
   en dos lo hace el navegador. Con grid habria que contar a mano. */
@media (min-width: 48rem) {
  .equipo__lista { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
  .equipo__lista li { break-inside: avoid; }
}

.equipo__lista { list-style: none; margin: 0; padding: 0; }
.equipo__lista li {
  display: grid; gap: 0.1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
}
.equipo__lista b { font-weight: 400; letter-spacing: 0.02em; }
.equipo__lista span { font-size: 0.875rem; font-weight: 200; color: var(--texto-tenue); }

/* ------------------------------------------------------------------ obra */

.obra__linea {
  font-size: var(--t-titulo);
  letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 400;
  margin: var(--ritmo) 0 1.8rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linea);
}
.obra__linea:first-of-type { margin-top: 0; }

.rejilla {
  display: grid; gap: clamp(1.6rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}

.proyecto__foto {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--fondo-alt);
  margin-bottom: 1.2rem;
}
.proyecto__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--curva), filter 0.6s var(--curva);
  filter: saturate(0.82);
}
.proyecto:hover .proyecto__foto img { transform: scale(1.05); filter: saturate(1); }

.proyecto__nombre {
  font-size: var(--t-titulo);
  font-weight: 400;
  margin-bottom: 0.9rem;
}

.ficha { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
.ficha dt {
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-debil);
  padding-top: 0.15em;
}
.ficha dd { margin: 0; font-size: 0.9375rem; font-weight: 200; color: var(--texto-tenue); }

/* ------------------------------------------------------------- frentes */

/* El dibujo del cuadrado del logo vive una sola vez y lo usan los cuatro. */
.bloque-logo { position: absolute; width: 0; height: 0; overflow: hidden; }

/* `interpolate-size` deja animar hacia `auto`, que es el alto de un frente
   abierto. Donde el navegador no lo sabe hacer, abre y cierra de golpe: el
   desplegable funciona igual, solo que sin el gesto. */
.frentes { interpolate-size: allow-keywords; border-top: 1px solid var(--linea); }
.frente { border-bottom: 1px solid var(--linea); }

.frente__cabeza {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.35rem 0;
  list-style: none; cursor: pointer;
}
.frente__cabeza::-webkit-details-marker { display: none; }
.frente .obra__linea { flex: 1; margin: 0; padding: 0; border: 0; }

/* El cuadrado del logo da una vuelta entera al pasar el raton o al llegar
   con el teclado. Va con la curva del carrusel: arranca rapido y se posa. */
.frente__icono {
  width: 1.6rem; height: 1.6rem; flex: none;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.frente__cabeza:hover .frente__icono,
.frente__cabeza:focus-visible .frente__icono { transform: rotate(360deg); }

/* Mas y menos: la raya vertical se acuesta al abrir. */
.frente__signo { position: relative; width: 1rem; height: 1rem; flex: none; }
.frente__signo::before, .frente__signo::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 1.5px; margin-top: -0.75px;
  background: var(--acento);
  transition: transform 450ms var(--curva);
}
.frente__signo::after { transform: rotate(90deg); }
.frente[open] .frente__signo::after { transform: rotate(0deg); }

.frente::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size 700ms cubic-bezier(0.16, 1, 0.3, 1),
              content-visibility 700ms allow-discrete;
}
.frente[open]::details-content { block-size: auto; }

.frente__cuerpo { padding: 0.25rem 0 clamp(2rem, 4vw, 3rem); }
/* Con JS la rejilla no se ve: el carrusel lee de ella. Sin JS es lo que hay. */
.js .frente .rejilla { display: none; }

@media (prefers-reduced-motion: reduce) {
  .frente::details-content, .frente__icono, .frente__signo::after { transition: none; }
}

/* ------------------------------------------------------------- brochure */

.obra__brochure {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  display: grid; gap: 0.35rem; justify-items: start;
}
.obra__brochure a {
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acento); text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid currentColor;
}
.obra__brochure a:hover, .obra__brochure a:focus-visible { color: var(--texto); }
.obra__brochure span { font-size: 0.8125rem; font-weight: 200; color: var(--texto-tenue); }

/* -------------------------------------------------------------- clientes */

.clientes { margin-top: var(--ritmo); }
/* Nota: las mascaras CSS no admiten loading="lazy", asi que los 65 KB de los
   trece logos entran en la carga inicial aunque la barra este al final. Se
   probo content-visibility:auto y no difirio ni un byte, asi que se quito:
   no vale sus efectos sobre buscar-en-pagina por cero ganancia. */

/* La barra desfila de derecha a izquierda. La pista lleva la lista DOS veces
   y se desplaza justo un 50%: al terminar, la copia esta exactamente donde
   estaba el original y el salto no se ve. El hueco entre el final de un juego
   y el principio del otro lo pone el padding-right, que vale lo mismo que el
   gap interno; sin el, se notaria una junta cada vuelta. */
.marquesina {
  overflow: hidden;
  /* los bordes se difuminan para que los logos no aparezcan de golpe */
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquesina__pista {
  display: flex;
  width: max-content;
  animation: desfilar 55s linear infinite;
}

/* Se detiene con el raton encima y tambien al llegar con el teclado. */
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.clientes__lista {
  list-style: none; margin: 0;
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: 0 clamp(1.4rem, 3vw, 2.8rem) 0 0;
}
/* Banda de altura fija: cada silueta trae su propio alto (unas llevan texto
   debajo del simbolo, otras no), y centrarlas por su caja las dispersaba.
   Con una banda comun todas comparten linea de centro. */
.clientes__lista li {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.5rem;
  color: var(--texto-tenue);
  transition: color 0.35s var(--curva);
}
.clientes__lista li:hover { color: var(--texto); }

/* Los logos van como MASCARA, no como imagen: el archivo solo aporta la
   silueta y el color lo pone currentColor. Asi el mismo juego de archivos
   sirve en claro y en oscuro, y toda la barra queda del gris del texto en
   vez de ser trece logos de colores peleando entre si.

   --alto y --ancho vienen calculados en el HTML: a igual altura, un logo
   cuadrado se ve diminuto al lado de uno muy alargado. */
.cliente {
  display: block;
  height: var(--alto); width: var(--ancho); max-width: 100%;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}

/* Cada marca: su silueta y su tamano. Van en el CSS, no en el HTML: una
   url() dentro de una custom property se resuelve contra la hoja donde se
   USA, asi que declarada en un style= del documento el navegador la
   buscaba en css/img/clientes/ y no cargaba ninguna.

   El alto no es igual para todos: a igual altura, un logo cuadrado se ve
   diminuto al lado de uno muy alargado. Esta a medio camino entre "misma
   altura" y "misma area". */
[data-marca="gobernacion-del-atlantico"] { --logo: url(../img/clientes/gobernacion-del-atlantico.webp); --alto: 32px; --ancho: 95px; }
[data-marca="fundacion-mario-santo-domingo"] { --logo: url(../img/clientes/fundacion-mario-santo-domingo.webp); --alto: 28px; --ancho: 127px; }
[data-marca="invermas"] { --logo: url(../img/clientes/invermas.webp); --alto: 30px; --ancho: 106px; }
[data-marca="emtiria"] { --logo: url(../img/clientes/emtiria.webp); --alto: 31px; --ancho: 104px; }
[data-marca="mas-ingenieria"] { --logo: url(../img/clientes/mas-ingenieria.webp); --alto: 26px; --ancho: 148px; }
[data-marca="pmasp-arquitectos"] { --logo: url(../img/clientes/pmasp-arquitectos.webp); --alto: 27px; --ancho: 132px; }
[data-marca="codifa"] { --logo: url(../img/clientes/codifa.webp); --alto: 33px; --ancho: 92px; }
[data-marca="inkaferro"] { --logo: url(../img/clientes/inkaferro.webp); --alto: 33px; --ancho: 88px; }
[data-marca="oceana-projects"] { --logo: url(../img/clientes/oceana-projects.webp); --alto: 51px; --ancho: 40px; }
[data-marca="prodesa"] { --logo: url(../img/clientes/prodesa.webp); --alto: 46px; --ancho: 48px; }
[data-marca="winner-group-cirsa"] { --logo: url(../img/clientes/winner-group-cirsa.webp); --alto: 57px; --ancho: 33px; }
[data-marca="dulcerna"] { --logo: url(../img/clientes/dulcerna.webp); --alto: 41px; --ancho: 58px; }
[data-marca="union-temporal-plazas-y-parques"] { --logo: url(../img/clientes/union-temporal-plazas-y-parques.webp); --alto: 43px; --ancho: 56px; }

/* Sin soporte de mascaras el logo saldria como un bloque solido de color.
   En ese caso se esconde y se muestra el nombre, que ya esta en el HTML. */
@supports not ((-webkit-mask-image: url("a")) or (mask-image: url("a"))) {
  .cliente { display: none; }
  .clientes__lista .visualmente-oculto {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none;
    font-size: 0.8125rem; font-weight: 200;
  }
  .clientes__lista { gap: 0.6rem 1.4rem; }
}

/* --------------------------------------------------------- constelacion
   Se hereda del sitio anterior, que la tenia en el pie. Alla era un plugin
   de jQuery; aca es un lienzo propio. Va detras del contacto y del pie, las
   dos franjas oscuras del final, y solo se dibuja mientras se la ve. */

.constelacion {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--curva);
}
.constelacion[data-encendida] { opacity: 1; }

/* el contenido del pie va por encima del lienzo (que es su primer hijo) */
.pie__cuerpo, .pie__cierre { position: relative; z-index: 1; }

/* En la banda de trayectoria el fondo sangra a los lados con box-shadow, asi
   que el lienzo tiene que ser mas ancho que su caja para cubrirlo todo. El
   clip-path del padre impide que eso abra barra horizontal. */
.constelacion-caja {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  z-index: 0; pointer-events: none;
}
.constelacion-caja .constelacion { position: absolute; inset: 0; width: 100%; height: 100%; }

/* las lineas y los hitos, por encima del lienzo */
.trayectoria::before,
.trayectoria::after { z-index: 1; }
.hito { z-index: 1; }

/* ------------------------------------------------------------- contacto */

.contacto__cuerpo {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .contacto__cuerpo { grid-template-columns: 1fr 1.3fr; }
}

.contacto__datos .rotulo { margin-top: 2rem; }
.contacto__datos .rotulo:first-child { margin-top: 0; }
.dato { margin: 0 0 0.4rem; font-size: var(--t-guia); font-weight: 200; }
.dato a { text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color 0.25s; }
.dato a:hover { border-bottom-color: var(--acento); }
.dato__nota {
  display: block; margin-top: 0.2rem;
  font-size: 0.8125rem; color: var(--texto-tenue);
}

.campo { margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.campo label {
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-debil);
}
.opcional { font-weight: 400; letter-spacing: 0.06em; text-transform: none; }

.campo input, .campo textarea {
  width: 100%;
  padding: 0.85rem 0;
  background: none;
  border: 0; border-bottom: 1px solid var(--linea);
  color: var(--texto);
  font: inherit; font-weight: 200;
  transition: border-color 0.3s var(--curva);
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-bottom-color: var(--acento);
}
.campo textarea { resize: vertical; }
.campo [aria-invalid="true"] { border-bottom-color: #c4453b; }

.trampa { position: absolute; left: -9999px; }

.formulario button {
  margin-top: 0.5rem;
  padding: 1rem 2.6rem;
  background: none;
  border: 1px solid var(--acento);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--curva), color 0.35s var(--curva);
}
.formulario button:hover:not(:disabled) { background: var(--acento); color: #fff; }
.formulario button:disabled { opacity: 0.5; cursor: progress; }

.formulario__aviso { margin: 1.2rem 0 0; min-height: 1.6em; font-size: 0.9375rem; }
.formulario__aviso[data-estado="bien"] { color: var(--acento); }
.formulario__aviso[data-estado="mal"] { color: #e07168; }

/* ------------------------------------------------------------------- pie */

.pie {
  position: relative;
  /* Mismo negro que el pie del sitio anterior (#1B1B1B). Va explicito y no
     heredado: encima queda el contacto en blanco, y el corte es el remate
     de la pagina. */
  background: var(--tinta);
  color: var(--texto);
  padding-block: clamp(4rem, 9vw, 7.5rem) 2.5rem;
  padding-inline: max(var(--margen), (100% - var(--ancho-max)) / 2);
}
.pie p { margin: 0; }

.pie__cuerpo {
  display: grid; gap: clamp(3rem, 7vw, 5rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 56rem) {
  .pie__cuerpo { grid-template-columns: minmax(auto, 22rem) 1fr; }
}

.pie__marca { display: block; text-decoration: none; }
.pie__logo { display: block; width: min(20rem, 100%); height: auto; }

.pie__datos {
  display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-content: start;
}
.pie__rotulo {
  position: relative;
  margin-bottom: 0.9rem;
  padding-left: 2.6rem;
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texto);
}
/* la rayita delante del rotulo, como en el pie anterior */
.pie__rotulo::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 1.8rem; height: 1px; background: var(--acento);
}
.pie__dato { font-size: 0.875rem; font-weight: 200; color: var(--texto-tenue); }
.pie__dato a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.pie__dato a:hover { border-bottom-color: var(--acento); }

.pie__cierre {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
  font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.pie__arriba { text-decoration: none; display: inline-flex; align-items: center; gap: 0.7rem; }
.pie__arriba::before {
  content: ""; width: 2.4rem; height: 1px; background: var(--acento);
  transition: width 0.3s var(--curva);
}
.pie__arriba:hover::before { width: 3.4rem; }

/* =================================================== revelado con scroll
   Solo se oculta si el JS esta vivo (html.js). Si el JS falla, todo se ve.  */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(22px);
}

/* ==================================================== movimiento reducido
   Requisito, no extra: con el ajuste puesto todo aparece en su sitio final. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revelar] { opacity: 1 !important; transform: none !important; }
  .trayectoria { --avance: 1 !important; }   /* la linea sale ya dibujada */
  .portada__flecha::after { animation: none; opacity: 1; }
  .proyecto__foto img { transition: none; }

  /* La barra de clientes se queda quieta y vuelve a varias filas: sin
     movimiento, una sola linea dejaria la mitad de los logos fuera. */
  .marquesina { -webkit-mask: none; mask: none; }
  .marquesina__pista { animation: none; width: 100%; }
  .marquesina__pista > [aria-hidden="true"] { display: none; }
  .clientes__lista { flex-wrap: wrap; padding-right: 0; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================== pantallas */

@media (max-width: 60rem) {
  :root { --barra: 46px; }

  .firma__indice, .firma__linea { display: none; }
  .firma { justify-content: flex-end; }
  .firma__redes a { width: 2rem; height: 2rem; }
  .icono { width: 16px; height: 16px; }
  /* sin raton no hay hover, y la etiqueta no cabe en 46 px de franja */
  .etiqueta { display: none; }

  .menu-boton { display: block; flex: none; }
  .marca__logo { height: 1.75rem; }
  .menu {
    position: fixed; inset: 0 0 auto var(--barra); z-index: 4;
    background: var(--tinta);
    border-bottom: 1px solid var(--linea);
    padding: 5.5rem var(--margen) 2rem;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s var(--curva), visibility 0.45s;
  }
  .menu[data-abierto] { transform: translateY(0); visibility: visible; }
  .menu ul { flex-direction: column; gap: 1.2rem; }
  .menu a { font-size: 0.875rem; }

  .seccion__numero { display: none; }
}

/* =========================================================================
   EL VISOR DE OBRA Y SU CARRUSEL

   El carrusel es el "squeeze": una obra abierta y las demas estrujadas en
   listones a su derecha. La geometria viene del original en React y se
   conserva entera, porque es lo que le da el gesto.

   Cuatro columnas se reparten lo que sobra despues de pagar la tarjeta
   abierta, los listones y los huecos. La tarjeta abierta parte de un bloque
   16:9 y devuelve un poco — de ahi que la primera parte del reparto sea
   NEGATIVA. La columna -1 y todo lo que pase de la 3 es un liston, asi que
   una tarjeta que sale por delante se encoge a liston y sigue saliendo por la
   izquierda sin ningun caso especial.

   Las anchuras se calculan en CSS con calc() y cqi: nada se mide en JS, asi
   que al cambiar el tamano de la ventana se recoloca solo.
   ========================================================================= */

/* El aura de los iconos del visor. Tres capas, y se suman: cada drop-shadow
   trabaja sobre el resultado del anterior, asi que el nucleo sale encendido y
   el halo se abre desde ahi. Con dos capas apenas se notaba sobre el fondo del
   visor, que ya es casi negro. */
.visor, .sq { --aura: drop-shadow(0 0 2px rgb(255 255 255 / 1))
                 drop-shadow(0 0 5px rgb(250 250 250 / 0.95))
                 drop-shadow(0 0 13px rgb(244 244 244 / 0.7)); }

.visor {
  width: 100vw; max-width: none;
  height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--texto);
  overflow: hidden;
}
/* 0,86 no bastaba: por debajo quedan las fotos de obra, que son claras, y
   con un 14 % encima seguian leyendose y competian con el visor. */
.visor::backdrop {
  background: rgb(6 6 6 / 0.93);
  backdrop-filter: blur(10px);
}

/* La entrada la hace el navegador: @starting-style da el estado de partida y
   allow-discrete deja que display y overlay esperen a que acabe la salida. */
.visor, .visor::backdrop {
  opacity: 0;
  transition: opacity 420ms var(--curva), transform 420ms var(--curva),
              display 420ms allow-discrete, overlay 420ms allow-discrete;
}
.visor { transform: translateY(1.5rem) scale(0.985); }
.visor[open] { opacity: 1; transform: none; }
.visor[open]::backdrop { opacity: 1; }
@starting-style {
  .visor[open] { opacity: 0; transform: translateY(1.5rem) scale(0.985); }
  .visor[open]::backdrop { opacity: 0; }
}

.visor__caja {
  height: 100%;
  display: grid; align-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-left: max(var(--barra, 80px), clamp(1.5rem, 4vw, 3rem));
}

.visor__cerrar {
  position: absolute; top: clamp(1rem, 2.5vw, 1.75rem); right: clamp(1rem, 2.5vw, 1.75rem);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--acento);
  cursor: pointer;
  transition: background 0.25s var(--curva);
}
.visor__cerrar svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  transition: filter 0.25s var(--curva);
}
.visor__cerrar:hover svg, .visor__cerrar:focus-visible svg { filter: var(--aura); }

/* --------------------------------------------------------------- carrusel */

.sq {
  container-type: inline-size;
  /* El carrusel NO se estira sin fin, y no es estetica: la obra abierta tiene
     techo —su ancho sale de `--sq-h`, que lo tiene— mientras que lo que se
     reparten las otras tres crece con la ventana. Pasado un ancho, la primera
     columna ADELANTA a la abierta y la fila deja de tener una foto principal,
     que es justo lo que el estudio no quiere. Con este tope la abierta manda
     a cualquier ancho. */
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  /* El alto de la fila manda el ancho de la obra abierta, que es 16:9 sobre
     el. Subirlo la agranda y encoge a las otras tres, porque lo que sobra
     para ellas es justo lo que la abierta no se lleva. El estudio pidió la
     principal más grande y las vecinas un poco más pequeñas: sale de aquí. */
  --sq-h: clamp(180px, 34cqi, 400px);
  --sq-gap: 16px;
  --sq-slat-gap: 8px;
  --sq-slat: 8px;
  --sq-radio: 6px;
  --sq-ms: 1000ms;
  /* easeOutExpo: la curva sobre la que desliza el original */
  --sq-curva: cubic-bezier(0.16, 1, 0.3, 1);
  /* Un bloque 16:9 fija a la vez la tarjeta abierta y el tamano al que se
     dibuja CADA foto, para que una foto conserve su escala por estrecha que
     se ponga su tarjeta. */
  --sq-hero: calc(var(--sq-h) * 16 / 9);
  /* max(0px, ...) no es adorno: por debajo de unos 545 px de ventana la
     cuenta se va a NEGATIVO y las cuatro columnas saldrian con anchura
     negativa. Con el tope en cero, lo que pasa es que se cierran solas. */
  --sq-hueco: max(0px, calc(100cqi - var(--sq-hero) - 3 * var(--sq-slat-gap)
                   - 3 * var(--sq-gap) - 3 * var(--sq-slat)));
}

/* En el telefono no hay sitio para el estrujado: una obra ocupa el ancho y
   las demas se cierran del todo. Sigue siendo el mismo carrusel —se pasa con
   las flechas y con las teclas— solo que la que sale se encoge a nada en vez
   de quedarse como liston, y el desplazamiento de la cinta es cero porque no
   queda nada suyo a la vista. */
@media (max-width: 40rem) {
  .sq {
    --sq-gap: 0px;
    --sq-slat-gap: 0px;
    --sq-slat: 0px;
    --sq-h: calc(100cqi * 9 / 16);
    --sq-hero: 100cqi;
  }
}

.sq__mandos { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1rem; }
.sq__flecha {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--sq-radio);
  background: none; color: var(--acento);
  cursor: pointer;
  transition: background 0.25s var(--curva);
}
/* El chevron es TRAZO, no relleno: la caja de 2,25rem se queda —es el area
   que se pulsa— pero NO se ve nunca, ni en reposo ni bajo el raton. Lo que
   dice que se puede pulsar es un aura casi blanca PEGADA AL TRAZO, no un
   fondo de boton: dos `drop-shadow` sobre el svg, que siguen la forma del
   icono en vez de dibujar una figura detras. */
.sq__flecha svg {
  width: 1.35rem; height: 1.35rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: filter 0.25s var(--curva);
}
.sq__flecha:hover svg, .sq__flecha:focus-visible svg { filter: var(--aura); }

.sq__ventana { width: 100%; height: var(--sq-h); overflow: hidden; }

.sq__pista {
  display: flex; height: 100%; width: max-content;
  transition: transform var(--sq-ms) var(--sq-curva);
}
.sq__pista[data-quieta] { transition: none; }

.sq__tarjeta {
  position: relative; isolation: isolate;
  height: 100%; flex-shrink: 0;
  padding: 0; border: 0;
  overflow: hidden;
  background: var(--fondo-alt);
  cursor: pointer;
  transition: width var(--sq-ms) var(--sq-curva),
              margin-left var(--sq-ms) var(--sq-curva);
}
.sq__pista[data-quieta] .sq__tarjeta { transition: none; }

/* La foto se dibuja SIEMPRE al bloque de 16:9 y centrada, nunca al ancho de
   su tarjeta. Con object-fit: cover a secas manda el lado que apriete —el
   alto mientras es liston, el ancho al abrirse—, asi que la foto cambiaria de
   escala a mitad del deslizamiento y se reescalaria en cada fotograma. Un
   solo bloque es una sola escala: la tarjeta solo cambia cuanto deja ver. */
.sq__tarjeta img {
  position: absolute; inset-block: 0; left: 50%;
  transform: translateX(-50%);
  width: var(--sq-hero); min-width: 100%; max-width: none;
  height: 100%; object-fit: cover;
}

.sq__rotulo {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: flex-end;
  padding: 1rem; padding-top: 4rem;
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0.01em;
  color: #fff; text-align: left;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent);
  pointer-events: none;
  transition: opacity var(--sq-ms) var(--sq-curva);
}

/* El envoltorio recorta, asi que la ficha entra saliendo de detras de las
   fotos en vez de aparecer flotando debajo de ellas. */
.sq__bajada { overflow: hidden; }

.sq__ficha {
  margin-top: 1.75rem;
  display: grid; gap: 1rem;
  transition: opacity 240ms var(--curva);
}
.sq__ficha[data-bajando] {
  transform: translateY(-100%);
  opacity: 0;
  transition: none;
}
.sq__ficha[data-baja] {
  transform: none;
  opacity: 1;
  transition: transform 620ms var(--sq-curva), opacity 420ms var(--curva);
}

/* La apertura sale DE LA FOTO que se pulso: se coloca la tira encima de ella
   con un transform que la encoge a su tamano, y en el fotograma siguiente se
   la deja crecer hasta el suyo. Es la misma tecnica de siempre —medir el
   destino, invertir, soltar— y no hace falta duplicar ninguna imagen. */
.sq__ventana[data-brotando] { transition: none; }
.sq__ventana[data-brota] { transition: transform 560ms var(--sq-curva); transform: none; }
.sq__ficha[data-saliendo] { opacity: 0; }
.sq__titulo { margin: 0; font-size: var(--t-titulo); font-weight: 400; }
.sq__titulo span { color: var(--acento); font-size: var(--t-rotulo); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; margin-left: 0.75rem; }
@media (min-width: 62rem) {
  .sq__ficha { grid-template-columns: 1fr 1.4fr; align-items: start; gap: 2.5rem; }
}

/* ------------------------------------------------------- abrir una obra */

.proyecto { position: relative; }
.proyecto__abrir {
  position: absolute; inset: 0;
  width: 100%; padding: 0;
  border: 0; background: none;
  cursor: pointer;
}
.proyecto__abrir:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .visor, .visor::backdrop { transition: none; }
  .sq { --sq-ms: 0ms; }
  .sq__ficha { transition: none; }
}

/* El aviso de que una obra tiene album, y la vuelta al pase de las doce. */
.sq__rotulo { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.sq__mas {
  display: block; margin-top: 0.45rem;
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ocre-vivo);
}

.sq__volver {
  margin-right: auto;
  border: 1px solid var(--linea); border-radius: var(--sq-radio);
  background: none; color: var(--texto);
  padding: 0 1rem; height: 2.25rem;
  font: inherit; font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s var(--curva), color 0.25s var(--curva);
}
.sq__volver:hover, .sq__volver:focus-visible { border-color: var(--acento); color: var(--acento); }