/* ==========================================================================
   Torre de Collserola — hoja principal
   ========================================================================== */

/* --- Reinicio mínimo ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Accesibilidad: salto al contenido, visible solo con teclado */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--c-ink); color: var(--c-paper);
}
.saltar:focus { left: 0; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- Tipografía ----------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--w-light);
  text-transform: uppercase;
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

/* Titular de la página de inicio: el único a 400 px en el diseño. */
.h-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-hero);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

h3, .h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Contenedores --------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: var(--space-section); }

/* ==========================================================================
   Cabecera: fotografía a pantalla completa, titular y cifras
   ========================================================================== */
.portada { position: relative; color: var(--c-over); }

.portada__lienzo {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* En la página de inicio la portada se queda quieta mientras se baja: el
   recorrido extra de scroll es el que hace contar a las cifras. Se resuelve
   con position:sticky, sin librerías de scroll. */
.portada--hero { height: 220svh; }

.portada--hero .portada__lienzo {
  position: sticky;
  top: 0;
  height: 100svh;
}

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

.portada__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* La fotografía del Figma es vertical (el lienzo mide 2000 × 2569). En una
   pantalla apaisada, recortarla a lo ancho amplía mucho el encuadre, así que
   se sube el punto de interés para que siga viéndose la torre entera. */
@media (orientation: landscape) {
  .portada__fondo img { object-position: center 18%; }
}

/* Velo muy leve: sube el contraste del texto blanco sin ensuciar la foto */
.portada__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.18) 100%);
}

/* El fondo queda excluido a propósito: si recibiera position:relative
   dejaría de estar anclado y la fotografía desaparecería del flujo. */
.portada__lienzo > *:not(.portada__fondo) { position: relative; z-index: 1; }

/* Entradilla de las páginas interiores.
   Va dentro del lienzo de la portada, sobre la fotografía, así que necesita
   el mismo margen lateral que el titular y una medida de lectura: sin esto
   el párrafo cruza la pantalla de borde a borde. */
.portada__entradilla {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62ch;
  margin-inline: auto;
  padding-inline: var(--gutter-min);
  padding-bottom: clamp(24px, 5vw, 80px);
  text-align: center;
  text-wrap: pretty;
}

.portada__relleno { min-height: clamp(24px, 6vw, 120px); }

/* --- Entrada del titular y de las cifras ---------------------------------- */
[data-entrada] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px);
  animation: entrada 1200ms var(--ease) 180ms forwards;
}

.cifras [data-cuenta] { opacity: 0; animation: entrada 900ms var(--ease) 700ms forwards; }

@keyframes entrada {
  to { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-entrada], .cifras [data-cuenta] { opacity: 1; filter: none; transform: none; animation: none; }
}

/* --- Barra superior --------------------------------------------------------
   Flota sobre la portada, como en el diseño. En las páginas con fotografía
   va en blanco; en las de fondo claro hereda el negro del documento. */
.barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter-min);
  padding: clamp(20px, 4vw, 79px) var(--gutter-min) 0;
  color: var(--c-ink);
}

body.con-portada .barra { color: var(--c-over); }

.barra__marca { display: block; width: clamp(28px, 2.6vw, 51px); }
.barra__marca img, .barra__marca svg { width: 100%; height: auto; }

.barra__derecha {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
}

/* Selector de idioma. Se imprime solo si hay más de un idioma publicado. */
.idiomas {
  font-family: var(--font-text);
  font-size: var(--fs-cta);
  font-weight: var(--w-regular);
  letter-spacing: 0.01em;
  display: flex;
  gap: 0.4em;
  align-items: baseline;
}
.idiomas__sep { opacity: 0.7; }
.idiomas a[aria-current="true"] { font-weight: 700; }
.idiomas a:not([aria-current="true"]) { opacity: 0.75; }
.idiomas a:hover { opacity: 1; }

/* --- Botón de menú --------------------------------------------------------- */
.menu-boton {
  width: clamp(24px, 1.6vw, 32px);
  height: 20px;
  display: grid;
  align-content: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Se excluye el rótulo para lectores de pantalla: si recibe el ancho de las
   barras se sale de la pantalla y aparece una barra de desplazamiento
   horizontal en todo el sitio. */
.menu-boton span:not(.solo-lectores) {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.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); }

/* --- Titular de portada ---------------------------------------------------- */
.portada__titulo {
  text-align: center;
  align-self: center;
  padding-inline: var(--gutter);
  margin-block: clamp(24px, 4vw, 80px);
  text-wrap: balance;
}

/* --- Cifras ---------------------------------------------------------------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 90px) clamp(24px, 8vw, 160px);
  justify-items: center;
  padding: 0 var(--gutter) clamp(40px, 6vw, 120px);
  max-width: 1700px;
  margin-inline: auto;
  width: 100%;
  list-style: none;
}

.cifra { text-align: center; }

.cifra__valor {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--w-light);
  font-size: var(--fs-figure);
  line-height: var(--lh-figure);
  text-transform: uppercase;
}

.cifra__etiqueta {
  display: block;
  margin-top: clamp(6px, 0.8vw, 16px);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--w-semibold);
  font-size: var(--fs-caption);
  line-height: 1.1;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .cifras { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Menú desplegable a pantalla completa
   ========================================================================== */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--c-ink);
  color: var(--c-paper);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.menu-panel[data-abierto="true"] { opacity: 1; visibility: visible; }

.menu-panel ul { list-style: none; margin: 0; padding: 0; text-align: center; }

.menu-panel a {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--w-light);
  font-size: clamp(2rem, 7vw, 140px);
  line-height: 1.08;
  text-transform: uppercase;
  transition: opacity var(--dur) var(--ease);
}
.menu-panel ul:hover a { opacity: 0.35; }
.menu-panel ul a:hover { opacity: 1; }

.menu-panel__cerrar {
  position: absolute;
  top: clamp(20px, 4vw, 79px);
  right: var(--gutter);
}

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 3.6vw, 72px);
  padding-inline: clamp(24px, 2.5vw, 50px);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: var(--fs-cta);
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.boton:hover { background: var(--c-ink); color: var(--c-paper); }
.boton--claro:hover { background: var(--c-paper); color: var(--c-ink); }

/* ==========================================================================
   Utilidades
   ========================================================================== */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}