/* Cresta Arquitectura · dirección Asoleamiento
   Solo la paleta del estudio. El cielo cambia de tono con la altura real del sol
   sobre Sinsacate (lo calcula asoleamiento.js). La luz celeste es exclusiva del
   sol y del botón de reunión: todo lo demás usa cal, azules o tinta.
   Fotos, logo y fuentes están en esta misma carpeta. */

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-code-pro-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400-latin.woff2") format("woff2");
}

:root {
  --noche: #14161C;
  --azul-noche: #26336E;
  --azul: #283C8E;
  --azul-medio: #4F80C0;
  --celeste: #98BCE2;
  --cal: #FAFAF8;
  --cal-suave: rgba(250, 250, 248, 0.8);
  --tinta: #22242B;

  --display: "Source Code Pro", "Courier New", monospace;
  --texto: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --ancho: 1240px;
  --margen: clamp(20px, 4vw, 48px);

  /* Valores de noche por defecto: sin JavaScript la página se ve completa */
  --cielo-alto: #14161C;
  --cielo-horizonte: #26336E;
  --tinta-cielo: #FAFAF8;
  --luz: 0;
  --sombra: 0;
  --sombra-angulo: 180deg;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--azul-medio) var(--azul-noche); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--cal);
  line-height: 1.6;
  caret-color: var(--azul-medio);
}
::selection { background: var(--azul-medio); color: var(--cal); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; }
.sol :focus-visible, .trayectoria :focus-visible, .ocaso :focus-visible, .pie :focus-visible,
.cielo-pagina-suelo :focus-visible, .contacto :focus-visible { outline-color: var(--cal); }
.es-dia .cabecera :focus-visible { outline-color: var(--azul-noche); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--cal); color: var(--azul-noche);
  padding: 10px 14px; font-family: var(--display); font-size: 13px;
}
.saltar:focus { top: 16px; }
main:focus { outline: none; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); }

/* Cabecera: flota sobre el cielo y toma su tinta. En escritorio, logo a la
   izquierda y menú a la derecha; en celular, logo centrado y menú debajo */
.cabecera {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 16px var(--margen);
  color: var(--tinta-cielo);
}
.marca { display: inline-flex; align-items: center; min-height: 44px; }
/* El PNG del logo trae mucho aire alrededor del trazo: los márgenes negativos lo
   recortan para que la caja del enlace sea el logo visible (proporciones medidas del PNG) */
.marca img { --alto-logo: 100px; height: var(--alto-logo); width: auto; max-width: none; margin: calc(var(--alto-logo) * -0.387) calc(var(--alto-logo) * -0.867) calc(var(--alto-logo) * -0.381) calc(var(--alto-logo) * -0.862); }
.marca-oscura { display: none !important; }
.es-dia .marca-clara { display: none !important; }
.es-dia .marca-oscura { display: block !important; }
.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 28px; }
.menu-grupo { display: contents; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: currentColor; }

/* Primer pantallazo: cielo arriba, tierra abajo, la sede parada sobre el horizonte */
.sol {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
  background: var(--azul-noche);
  color: var(--cal);
}
.cielo {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: flex-end;
  /* la altura la da la carta, que se achata en pantallas bajas (asoleamiento.js) */
  padding: 144px calc(32% + var(--margen) + 24px) 0 var(--margen);
  background: linear-gradient(180deg, var(--cielo-alto), var(--cielo-horizonte));
  color: var(--tinta-cielo);
}
.carta { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carta:active { cursor: grabbing; }
.carta text { font-family: var(--display); fill: currentColor; letter-spacing: 0.02em; }
/* Los rumbos van bajo el horizonte, sobre la tierra azul: siempre en cal.
   La lectura es la leyenda de la carta, arriba a la izquierda, y toma la tinta del cielo. */
.carta .rumbo { fill: var(--cal-suave); }
.carta .lectura { fill: currentColor; font-variant-numeric: tabular-nums; }
.grilla { stroke: currentColor; stroke-opacity: 0.2; vector-effect: non-scaling-stroke; }
.arco { fill: none; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.arco-hoy { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hora-punto { fill: currentColor; }
.horizonte { stroke: var(--azul-medio); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sol-halo { fill: var(--celeste); opacity: 0.4; }
.sol-disco { fill: var(--cal); stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; }

.tierra {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  /* arriba queda lugar para los rumbos de la carta */
  padding: 48px var(--margen) clamp(40px, 6vh, 72px);
}
.tierra h1 {
  margin: 0 0 14px;
  max-width: 24ch;
  font-size: clamp(34px, min(4.4vw, 7vh), 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--cal);
}
.bajada { margin: 0 0 22px; max-width: 46ch; font-size: 18px; color: rgba(250, 250, 248, 0.84); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.boton-luz {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--celeste); color: var(--azul-noche);
  font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.boton-luz:hover { background: var(--cal); }
.enlace { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: 14px; letter-spacing: 0.02em; }
.enlace:hover { text-decoration-thickness: 2px; }

.control-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 16px 0 0; }
.control-dia label { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cal-suave); }
.control-dia input[type="range"] { -webkit-appearance: none; appearance: none; width: min(300px, 60vw); height: 44px; margin: 0; background: transparent; cursor: pointer; }
.control-dia input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--azul-medio); }
.control-dia input[type="range"]::-moz-range-track { height: 1px; background: var(--azul-medio); }
.control-dia input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--cal); border: 2px solid var(--azul-medio); }
.control-dia input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cal); border: 2px solid var(--azul-medio); }
.boton-ahora {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  background: none; border: 1px solid var(--azul-medio); color: var(--cal);
  font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.boton-ahora:hover { border-color: var(--cal); }
.boton-ahora[hidden] { display: none; }

.ventana {
  grid-column: 2; grid-row: 1 / 3; align-self: end;
  position: relative; z-index: 2; overflow: hidden;
  margin: 0 var(--margen) clamp(40px, 6vh, 72px) 0;
  background: var(--azul-noche);
}
/* Sede por hora: dos fotos reales superpuestas; la de adelante se hace visible a
   medida que avanza la hora (asoleamiento.js).
   Tratamiento de fotografía analógica, común a las 19 fotos: color apagado, negros
   lavados, un toque cálido, velo azul noche arriba, viñeta suave y grano */
.ventana {
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.ventana-foto {
  display: block; width: 100%; height: clamp(420px, 70vh, 720px);
  object-fit: cover; object-position: 50% 55%;
  filter: saturate(0.6) contrast(0.88) brightness(1.05) sepia(0.2);
}
.ventana-foto:not([src]) { display: none; }
.ventana-foto--siguiente { position: absolute; top: 0; left: 0; opacity: 0; }
.ventana-tono {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 51, 110, 0.5), rgba(250, 250, 248, 0.25));
  mix-blend-mode: soft-light; opacity: 0.6;
}
.ventana::before, .ventana::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Viñeta */
.ventana::before { background: radial-gradient(ellipse 85% 75% at 50% 55%, rgba(20, 22, 28, 0) 50%, rgba(20, 22, 28, 0.6) 100%); opacity: 0.45; }
/* Grano fotográfico */
.ventana::after { background-image: var(--grano); background-size: 240px 240px; mix-blend-mode: overlay; opacity: 0.5; }
/* Caída de luz: se oscurece hacia el lado contrario al sol; el ángulo sigue el
   azimut y la fuerza crece cuando el sol está bajo. No dibuja ninguna silueta. */
.ventana-sombra {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--sombra-angulo), rgba(38, 51, 110, 0) 10%, rgba(38, 51, 110, 1) 100%);
  mix-blend-mode: multiply;
  opacity: var(--sombra);
}
/* De noche la sede se tiñe de azul; de día queda con su color */
.ventana-luz {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--azul-noche); mix-blend-mode: multiply;
  opacity: calc(0.5 * (1 - var(--luz)));
}

/* El proceso sobre el día real: curva de altura del sol de hoy, de la salida a la puesta */
.escucha { padding: clamp(80px, 11vw, 144px) 0; background: var(--cal); }
.escucha h2, .trayectoria h2, .ocaso h2 {
  margin: 0 0 16px; max-width: 20ch;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
}
.escucha h2 { color: var(--azul-noche); }
.escucha-intro { margin: 0 0 56px; max-width: 52ch; font-size: 18px; }
.recorrido { position: relative; }
.dia { position: absolute; top: 0; left: 0; overflow: visible; }
.dia-curva { fill: none; stroke: var(--azul-medio); stroke-width: 1.5; }
.dia-base { stroke: var(--azul-noche); stroke-opacity: 0.35; stroke-width: 1; }
.dia-marca { stroke: var(--azul-noche); stroke-opacity: 0.45; stroke-width: 1; }
.dia-tallo { stroke: var(--azul-noche); stroke-width: 1; }
.dia-punto { fill: var(--azul-noche); stroke: var(--cal); stroke-width: 2; }
.dia text { font-family: var(--display); font-size: 12px; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.dia .dia-hora { fill: var(--azul-noche); font-weight: 600; }
.etapas { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 232px 0 0; list-style: none; }
.etapa { position: relative; }
.etapa h3 { margin: 0 0 8px; font-size: 20px; color: var(--azul-noche); }
.etapa p { margin: 0; max-width: 30ch; font-size: 16px; }

/* Trayectoria: una escala de años, como la de un plano */
.trayectoria { padding: clamp(80px, 11vw, 144px) 0 clamp(64px, 8vw, 112px); background: var(--azul-noche); color: var(--cal); }
.trayectoria h2 { color: var(--cal); }
.tray-texto { margin: 0; max-width: 60ch; font-size: 18px; color: rgba(250, 250, 248, 0.86); }
/* Cifras junto al texto, discretas, con la misma línea vertical que las marcas de la escala */
.tray-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; }
.tray-cifras { display: flex; gap: 40px; }
.cifra { display: flex; flex-direction: column; margin: 0; padding-left: 14px; border-left: 1px solid var(--azul-medio); }
.cifra-num { min-width: 4ch; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); line-height: 1; letter-spacing: -0.02em; color: var(--cal); font-variant-numeric: tabular-nums; }
.cifra-txt { margin-top: 8px; font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cal-suave); }
@media (max-width: 760px) {
  .tray-cabeza { grid-template-columns: minmax(0, 1fr); }
  .tray-cifras { gap: 32px; }
}
.escala-marco { position: relative; margin: 72px 0 0; }
.escala {
  position: relative; height: 330px; margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--azul-medio);
}
/* Marcas de la escala, una por año: líneas dibujadas en un SVG */
.escala-marcas { position: absolute; left: 0; top: 320px; width: 100%; height: 10px; overflow: visible; pointer-events: none; }
.escala-marcas line { stroke: var(--azul-medio); stroke-width: 1; vector-effect: non-scaling-stroke; }
.escala li { position: absolute; bottom: 0; left: calc((var(--anio) - 2006) / 20 * 100%); }
.escala li::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1px;
  height: calc(34px + var(--fila) * 58px); background: var(--azul-medio);
}
.escala a {
  position: absolute; left: 0; bottom: calc(34px + var(--fila) * 58px);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 44px; padding: 0 8px 4px 10px; white-space: nowrap;
  font-size: 16px; line-height: 1.25; text-decoration: none;
  /* Fondo del color de la sección: la línea de otra obra pasa por detrás del nombre, no por encima */
  background: var(--azul-noche); z-index: 1;
}
.escala .hacia-izq a { left: auto; right: 0; padding: 0 10px 4px 8px; text-align: right; }
.escala a:hover { text-decoration: underline; }
.anio { font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; color: var(--cal-suave); font-variant-numeric: tabular-nums; }
/* Pantallas medianas: la escala es más corta y los nombres ocupan más proporción;
   se achican un poco para que ninguna línea de año pase por detrás de un nombre */
@media (min-width: 761px) and (max-width: 1100px) {
  .escala a { font-size: 13px; padding: 0 6px 4px 8px; }
  .escala .hacia-izq a { padding: 0 8px 4px 6px; }
  .escala .anio { font-size: 11px; }
}
.escala-anios { position: relative; height: 28px; font-family: var(--display); font-size: 12px; color: var(--cal-suave); }
.escala-anios span { position: absolute; top: 8px; left: calc((var(--anio) - 2006) / 20 * 100%); transform: translateX(-50%); }
.escala-anios span:first-child { transform: none; }
.escala-anios span:last-child { transform: translateX(-100%); }

/* Cierre: la puesta de sol real de hoy */
.ocaso { background: linear-gradient(180deg, var(--azul-noche), var(--noche)); color: var(--cal); padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 10vw, 120px); }
.ocaso-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: 40px; }
.ocaso h2 { color: var(--cal); }
.ocaso-texto { margin: 0 0 32px; max-width: 46ch; font-size: 18px; color: rgba(250, 250, 248, 0.86); }
.ocaso-figura { margin: 0; width: 100%; max-width: 440px; justify-self: end; }
.ocaso-sol { display: block; width: 100%; }
.ocaso-sol circle { fill: var(--celeste); }
.ocaso-sol line { stroke: var(--azul-medio); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ocaso-lectura { width: fit-content; max-width: 100%; margin-top: 10px; font-family: var(--display); font-size: 12px; letter-spacing: 0.02em; color: var(--cal-suave); font-variant-numeric: tabular-nums; }
.ocaso-lectura:empty { display: none; }

.pie { background: var(--noche); color: rgba(250, 250, 248, 0.82); padding: 36px 0; font-size: 14px; text-align: center; }
/* Centrado al ancho de la página: en escritorio en una fila, en celular apilado */
.pie-grilla { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 32px; }
.pie img { height: 34px; width: auto; }
.pie p { margin: 0; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; }
.pie a:hover { color: var(--cal); }

/* Notebooks de pantalla baja: se ajustan los aires del primer pantallazo para que
   "Recorré el día" quede a la vista sin bajar */
@media (min-width: 761px) and (max-height: 760px) {
  .cielo { padding-top: 136px; }
  .tierra { padding-top: 40px; }
  .tierra h1 { margin-bottom: 10px; }
  .bajada { margin-bottom: 16px; font-size: 16px; }
  .tierra .boton-luz { min-height: 48px; }
  .control-dia { margin-top: 8px; }
}

/* Tablet: el logo un poco más chico para que entre con el menú */
@media (max-width: 900px) {
  .marca img { --alto-logo: 80px; }
}

/* Celular: el logo arriba al centro y el menú en una fila debajo; el cielo arriba,
   la frase y la reunión enseguida, la sede después */
@media (max-width: 760px) {
  .cabecera { flex-direction: column; align-items: center; padding-bottom: 0; gap: 4px; }
  .marca img { --alto-logo: 72px; }
  .menu { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { flex: none; font-size: 11px; letter-spacing: 0.04em; }
  .sol { grid-template-columns: minmax(0, 1fr); }
  .cielo { padding: 172px var(--margen) 0; }
  .tierra { padding: 52px var(--margen) 40px; }
  .ventana { grid-column: 1; grid-row: 3; margin: 0 var(--margen) 48px; }
  .ventana-foto { height: auto; aspect-ratio: 4 / 5; }

  .etapas { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 8px 0 8px 108px; }
  .trayectoria { padding-bottom: 40px; }
  .ocaso { padding-top: 32px; }

  /* La escala de años se para en vertical: un eje con una marca por año, las obras
     colgadas de su año y el espacio entre ellas proporcional a los años que pasaron
     (--salto: años desde la obra anterior, 16 px por año) */
  .escala { height: auto; border: 0; background: none; padding: 8px 0; }
  .escala::before { content: ""; position: absolute; left: 60px; top: 0; bottom: 0; width: 1px; background: var(--azul-medio); }
  .escala li { position: relative; left: auto; margin-top: calc(var(--salto, 1) * 16px); }
  .escala li::before {
    left: 56px; bottom: 100%; width: 9px; height: calc(var(--salto, 1) * 16px);
    background: repeating-linear-gradient(to top, transparent 0 15px, var(--azul-medio) 15px 16px);
  }
  .escala li::after { content: ""; position: absolute; left: 56px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--cal); }
  .escala a, .escala .hacia-izq a {
    position: static; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 40px;
    min-height: 44px; padding: 0; text-align: left; white-space: normal; background: none;
  }
  .escala .anio { text-align: right; }
  .escala-anios, .escala-marcas { display: none; }

  /* En celular el cierre va centrado: la puesta arriba, después la frase y el botón */
  .ocaso-grilla { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ocaso-grilla > div { display: flex; flex-direction: column; align-items: center; }
  .ocaso h2 { margin-inline: auto; }
  .ocaso-texto { margin-inline: auto; }
  .ocaso-figura { order: -1; max-width: 280px; justify-self: center; }
  .pie-grilla { flex-direction: column; gap: 8px; }
}

/* ---------- Intro animada (solo Inicio, una vez por visita) ----------
   Mismo mecanismo que el sitio actual. El fondo #25346D es el azul que trae el
   video: es la única excepción a la paleta, para que no se note el borde del
   cuadro. Al retirarse, el sol sale en la carta (asoleamiento.js). */
.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: #25346D;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
html.intro-on body { overflow: hidden; }
.intro-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #25346D; transition: transform 0.7s ease; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro.is-leaving .intro-video { transform: scale(1.04); }
html.intro-on .tierra > * { opacity: 0; transform: translateY(18px); }
html.intro-on.intro-reveal .tierra > * {
  opacity: 1; transform: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.intro-on.intro-reveal .tierra > :nth-child(2) { transition-delay: 0.1s; }
html.intro-on.intro-reveal .tierra > :nth-child(3) { transition-delay: 0.2s; }

/* ---------- Páginas internas: franja de cielo con la carta compacta ----------
   El título vive en el cielo y toma su tinta; la carta muestra el sol de hoy.
   Debajo del horizonte, una franja de tierra azul (con los atajos en Proyectos). */
.cielo-pagina { background: var(--azul-noche); color: var(--cal); }
.cielo-pagina-cielo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px 56px;
  padding: 156px var(--margen) 0;
  background: linear-gradient(180deg, var(--cielo-alto), var(--cielo-horizonte));
  color: var(--tinta-cielo);
}
.cielo-pagina h1 {
  margin: 0 0 36px; max-width: 22ch;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--tinta-cielo);
}
.cielo-pagina-suelo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  min-height: 48px; padding: 32px var(--margen) 24px;
}
/* Páginas sin atajos: no hay franja azul vacía; el horizonte toca directamente
   la sección clara y los rumbos pasan a azul noche para leerse sobre cal */
.cielo-pagina--sin-suelo { background: var(--cal); padding-bottom: 32px; }
.cielo-pagina--sin-suelo .cielo-pagina-cielo { border-bottom: 1.5px solid var(--azul-medio); }
.cielo-pagina--sin-suelo .carta .rumbo { fill: var(--azul-noche); }
.atajos a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--azul-medio); color: var(--cal); text-decoration: none;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.2s ease;
}
.atajos a:hover { border-color: var(--cal); }

/* ---------- Proyectos ---------- */
.obras { background: var(--cal); padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 128px); }
.obras-cat + .obras-cat { margin-top: clamp(56px, 7vw, 88px); }
.obras-cat h2 { margin: 0 0 20px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; color: var(--azul-noche); scroll-margin-top: 24px; }
.obras-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 280px); gap: 16px; }
.obra { position: relative; min-width: 0; }
.obra--ancha { grid-column: span 2; }
.obra-tarjeta {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  margin: 0; padding: 0; border: 0; background: var(--azul-noche);
  color: var(--cal); font: inherit; text-align: left; cursor: pointer;
}
.obra-tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
/* Duotono: la foto se ve en azul y recupera el color al pasar el mouse o con el foco */
.obra-tinte { position: absolute; inset: 0; background: var(--azul-noche); mix-blend-mode: color; opacity: 0.85; transition: opacity 0.4s ease; }
.obra-velo { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(20, 22, 28, 0) 0%, rgba(20, 22, 28, 0.72) 100%); }
.obra-tarjeta:hover .obra-tinte, .obra-tarjeta:focus-visible .obra-tinte { opacity: 0; }
.obra-tarjeta:hover img { transform: scale(1.04); }
.obra-nombre {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.obra-nombre small { display: block; margin-top: 3px; font-family: var(--texto); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: rgba(250, 250, 248, 0.9); }
.obra-ultima {
  position: absolute; top: 12px; left: 12px; display: none; padding: 4px 8px;
  background: var(--noche); color: var(--cal);
  font-family: var(--display); font-size: 11px; letter-spacing: 0.06em;
}
.obra.es-ultima .obra-ultima { display: inline-block; }
@media (hover: none) {
  .obra-tinte { opacity: 0; }
  .obras-revelar .obra-tinte { opacity: 0.85; transition: none; }
  .obras-revelar .obra.is-visible .obra-tinte { opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
}
@media (max-width: 900px) {
  .obras-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 34vw, 260px); }
  .obra--ancha:not(:first-child) { grid-column: auto; }
  /* Con la primera obra ancha y una cantidad par de obras, la última quedaría sola
     con un hueco al lado: ocupa la fila entera */
  .obras-grilla:has(> .obra--ancha:first-child) > .obra:last-child:nth-child(even) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .obras-grilla { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .obra--ancha, .obras-grilla:has(> .obra--ancha:first-child) > .obra:last-child:nth-child(even) { grid-column: auto; }
  .obra-tarjeta { aspect-ratio: 4 / 3; }
}

/* Ficha ampliada de una obra */
.ficha-fondo { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 22, 28, 0.86); }
.ficha-fondo.is-open { display: flex; }
.ficha { position: relative; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; background: var(--cal); }
.ficha-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: rgba(20, 22, 28, 0.45); color: var(--cal); cursor: pointer;
  transition: background-color 0.15s ease;
}
.ficha-cerrar:hover { background: rgba(20, 22, 28, 0.7); }
.ficha-cerrar:focus-visible { outline-color: var(--cal); }
.ficha-galeria { position: relative; background: var(--noche); }
.ficha-img { display: block; width: 100%; height: 62vh; object-fit: contain; background: var(--noche); transition: opacity 0.2s ease; }
.ficha-img.is-cargando { opacity: 0.3; }
.ficha-cuenta { position: absolute; top: 14px; left: 14px; padding: 4px 9px; background: rgba(20, 22, 28, 0.45); color: var(--cal); font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; }
.ficha-cuenta[hidden], .ficha-flecha[hidden] { display: none; }
.ficha-flecha { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 56px; border: 0; background: none; color: var(--cal); cursor: pointer; }
.ficha-flecha svg { width: 24px; height: 24px; }
.ficha-previa { left: 0; }
.ficha-siguiente { right: 0; }
.ficha-galeria :focus-visible { outline-color: var(--cal); outline-offset: -4px; }
.ficha-puntos { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: flex; }
.ficha-puntos button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.ficha-puntos button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(250, 250, 248, 0.45); }
.ficha-puntos button.is-active::before { background: var(--cal); }
@media (pointer: coarse) {
  .ficha-puntos { bottom: 0; }
  .ficha-puntos button { width: 40px; height: 44px; }
}
.ficha-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 32ch; margin: 0; color: var(--cal); text-align: center; }
.ficha-error[hidden] { display: none; }
.ficha-cuerpo { padding: 28px 32px 36px; }
.ficha-cuerpo h2 { margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 30px); color: var(--azul-noche); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 20px; font-family: var(--display); font-size: 14px; font-variant-numeric: tabular-nums; }
.ficha-datos > span { display: flex; flex-direction: column; }
.ficha-dato-k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(34, 36, 43, 0.72); }
.ficha-desc { margin: 0; max-width: 62ch; font-size: 16px; }
.ficha-desc[hidden] { display: none; }
@media (max-width: 640px) {
  .ficha-fondo { padding: 0; align-items: stretch; }
  .ficha { max-height: none; height: 100%; }
  .ficha-img { height: 46vh; }
  .ficha-cuerpo { padding: 22px 20px 40px; }
}

/* ---------- Sobre nosotros ---------- */
.estudio { background: var(--cal); padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 112px); }
.estudio-texto { max-width: 640px; }
/* Texto justificado, como en el sitio actual (decisión del estudio) */
.estudio-texto p { margin: 0 0 20px; font-size: 17px; text-align: justify; hyphens: auto; }
.estudio-texto p:first-child { font-size: 20px; line-height: 1.5; color: var(--azul-noche); }
.estudio-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(56px, 7vw, 88px) 0 40px; }
/* Las fotos de la sede reciben la luz del sol de ahora, como en Inicio */
.foto-sol { position: relative; margin: 0; overflow: hidden; }
.foto-sol img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  filter: brightness(calc(0.6 + 0.4 * var(--luz))) saturate(calc(0.5 + 0.5 * var(--luz)));
}
.estudio .enlace { color: var(--azul-noche); }

/* ---------- Servicios ---------- */
.servicios { background: var(--cal); padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 112px); }
.momentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.momento { padding-top: 20px; border-top: 1.5px solid var(--azul-medio); }
.momento h2 { margin: 0 0 24px; font-size: 22px; color: var(--azul-noche); }
.servicio + .servicio { margin-top: 28px; }
.servicio h3 { margin: 0 0 6px; font-size: 17px; color: var(--azul-noche); }
.servicio p { margin: 0; max-width: 42ch; font-size: 16px; }
.servicios-cierre { margin-top: clamp(56px, 7vw, 88px); }

/* ---------- Contacto ---------- */
.contacto { background: var(--azul-noche); color: var(--cal); padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 128px); }
.contacto-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 72px; }
.contacto .boton-luz { width: 100%; max-width: 440px; }
.contacto-lista { max-width: 440px; margin: 24px 0 0; padding: 0; list-style: none; }
.contacto-lista li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(79, 128, 192, 0.55); }
.contacto-lista li:last-child { border-bottom: 0; }
.contacto-k { font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cal-suave); }
.contacto-lista a { display: inline-flex; align-items: center; min-height: 44px; }
.contacto-v { display: flex; flex-direction: column; padding: 10px 0; }
.contacto-v a { min-height: 44px; }
.contacto-bloque + .contacto-bloque { margin-top: 40px; }
.contacto-bloque h2 { margin: 0 0 10px; font-size: 20px; color: var(--cal); }
.contacto-bloque p { margin: 0; max-width: 46ch; color: rgba(250, 250, 248, 0.86); }
.contacto-bloque .sol-hoy { margin-top: 12px; font-size: 16px; color: var(--cal-suave); font-variant-numeric: tabular-nums; }
.sol-hoy:empty { display: none; }

/* ---------- Página no encontrada ---------- */
.aviso { background: var(--cal); padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 128px); }
.aviso p { margin: 0 0 20px; max-width: 52ch; font-size: 18px; }
.aviso .enlace { color: var(--azul-noche); }

@media (max-width: 760px) {
  .cielo-pagina-cielo { grid-template-columns: minmax(0, 1fr); padding-top: 168px; }
  .cielo-pagina h1 { margin-bottom: 44px; }
  .cielo-pagina-suelo { padding-top: 40px; }
  .estudio-fotos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .foto-sol img { aspect-ratio: 4 / 5; }
  .momentos { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contacto-grilla { grid-template-columns: minmax(0, 1fr); }
}

/* Celular: el botón de reunión, "Recorré el día", los atajos de Proyectos y el
   cierre de Servicios van centrados; los tres atajos, parejos en una sola fila */
@media (max-width: 760px) {
  .tierra .acciones, .control-dia { align-self: stretch; justify-content: center; }
  .cielo-pagina-suelo { justify-content: center; }
  .atajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .atajos a { justify-content: center; padding: 0 4px; font-size: 11px; letter-spacing: 0.04em; }
  .servicios-cierre { display: flex; justify-content: center; }
}

/* Celulares angostos (360 px): el menú pasa a dos filas en lugar de cortarse */
@media (max-width: 380px) {
  /* dos filas parejas: Proyectos y Sobre nosotros arriba, Servicios y Contacto abajo */
  .menu { flex-direction: column; align-items: center; overflow-x: visible; }
  .menu-grupo { display: flex; justify-content: center; gap: 0 24px; }
  .cielo { padding-top: 208px; }
  .cielo-pagina-cielo { padding-top: 208px; }
}

@media (prefers-reduced-motion: reduce) {
  .boton-luz, .atajos a, .ficha-img, .ficha-cerrar { transition: none; }
  .obra-tarjeta img { transition: none; }
  .obra-tarjeta:hover img { transform: none; }
}