/* ==========================================================================
   Álvarez Varela Arquitectos — hoja de estilos
   Dirección: crema + tinta · Hanken Grotesk + Newsreader · asimetría editorial
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --crema: #F2F0E6;
  --tinta: #211E1F;
  --negro: #0E0D0D;
  --piedra: #8A857E;
  --linea: rgba(33, 30, 31, 0.22);
  --linea-clara: rgba(242, 240, 230, 0.25);

  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --gutter: clamp(16px, 2.2vw, 40px);
  --pad-section: clamp(90px, 12vw, 200px);
}

/* ---------- Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 300; }

.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--linea);
}
.rule--dark { background: var(--linea-clara); }

.arrow { font-style: normal; display: inline-block; }

.link-arrow {
  display: inline-block;
  font-size: 15px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tinta);
  transition: opacity 0.3s ease;
}
.link-arrow:hover { opacity: 0.55; }
.link-arrow .arrow { transition: transform 0.3s ease; }
.link-arrow:hover .arrow { transform: translate(2px, -2px); }

/* Estado de carga: se oculta el contenido hasta css-ready (con JS activo) */
html.css-loading main[data-load-container] { visibility: hidden; }
html.css-ready main[data-load-container] { visibility: visible; }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--crema);
  transition: opacity 0.9s ease;
}
html.css-ready .loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.loader__mark {
  font-family: "Titillium Web", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 5vw, 34px);
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--tinta);
  opacity: 0.9;
}
.loader__line {
  position: relative;
  display: block;
  width: clamp(90px, 12vw, 150px);
  height: 1px;
  overflow: hidden;
  background: var(--linea);
}
.loader__line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--tinta);
  animation: loaderFill 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes loaderFill { to { transform: scaleX(1); } }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 22px var(--gutter);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--crema);
  mix-blend-mode: difference; /* legible sobre foto y sobre crema */
  pointer-events: none;
}
.header a, .header button { pointer-events: auto; }

.header__nav { display: flex; flex-direction: column; gap: 2px; }
.header__nav a { width: fit-content; opacity: 0.95; transition: opacity 0.25s ease; }
.header__nav a:hover { opacity: 0.5; }

.header__cta { justify-self: end; transition: opacity 0.25s ease; }
.header__cta:hover { opacity: 0.5; }

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: var(--crema);
}

.hero__media {
  position: absolute;
  inset: -1px;
  bottom: -420px; /* espacio extra para el parallax y:400 */
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { object-position: center 60%; } /* encuadre ligeramente desplazado hacia arriba */

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,13,13,0.25), rgba(14,13,13,0) 35%, rgba(14,13,13,0) 60%, rgba(14,13,13,0.35));
  pointer-events: none;
}

.hero__content {
  position: absolute;
  top: 44svh;
  left: 0;
  right: 0;
  padding: 0 var(--gutter);
  z-index: 2;
}

.hero__intro {
  max-width: 34ch;
  margin-left: clamp(0px, 8vw, 180px);
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.hero__wordmark {
  position: absolute;
  z-index: 3;
  bottom: 0.14em; /* -0.06em original + 0.2em que compensa el padding-top de las máscaras */
  left: 0;
  width: 100%;
  padding: 0 0.02em;
  font-weight: 400;
  font-size: 12.3vw; /* ajustado para llenar el ancho con "ÁLVAREZ VARELA" */
  line-height: 0.78;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
/* padding-top: da aire arriba para que la tilde de la Á no se recorte en reposo.
   La máscara mantiene overflow:hidden para el reveal y el colapso vertical. */
.hero__wordmark .char-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: 0.2em; }
.hero__wordmark .char { display: inline-block; }

/* ---------- 2 · Grid parallax ---------- */
.pgrid {
  position: relative;
  height: 115svh;
  min-height: 720px;
  overflow: hidden;
  background: var(--crema);
}
.pgrid__wrapper {
  display: flex;
  gap: var(--gutter);
  height: 100%;
  padding: 0 var(--gutter);
}
.pgrid__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  height: 170svh;           /* desborda el viewport: nunca se ven sus extremos */
  margin-top: -35svh;
  will-change: transform;
}
.pgrid__col figure {
  flex: 1;
  min-height: 0;
}

/* ---------- 3 · Statement ---------- */
.statement { padding: var(--pad-section) 0; }

.statement__heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.statement__heading .rv { display: block; text-indent: clamp(60px, 18vw, 340px); }

.statement__rule { margin-top: clamp(50px, 6vw, 110px); }

.statement__cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  margin-top: clamp(28px, 3vw, 48px);
}
.statement__col { display: flex; flex-direction: column; gap: 1.2em; align-items: flex-start; }
.statement__col:first-child { grid-column: 4 / 7; }
.statement__col:last-child { grid-column: 8 / 12; }
.statement__col p { font-size: 17px; line-height: 1.35; }

/* ---------- Hgroup (encabezados de sección) ---------- */
.hgroup { padding-bottom: clamp(24px, 3vw, 44px); }
.hgroup__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px; /* misma separación texto→filete que .services__head (padding-bottom: 14px) */
}
.hgroup__title {
  /* mismo tamaño que .services__sub ("Del primer croquis a la entrega de llaves") */
  font-size: clamp(24px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hgroup__label { font-size: 14px; } /* mismo tamaño que .services__label ("Servicios") */

/* ---------- 4 · Proyectos ---------- */
.projects { padding: var(--pad-section) 0 0; }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  row-gap: clamp(80px, 9vw, 160px);
  padding-top: clamp(30px, 4vw, 60px);
}

.project--lg { grid-column: span 7; }
.project--sm {
  grid-column: span 4 / -1;
  align-self: end;
}
/* fila 2 invertida: el pequeño a la izquierda */
.project--sm:nth-of-type(3) { grid-column: 1 / span 4; align-self: start; margin-top: clamp(60px, 8vw, 140px); }
.project--lg:nth-of-type(4) { grid-column: 6 / -1; }

.project__media { aspect-ratio: 4 / 5; }
.project--sm .project__media { aspect-ratio: 1 / 1; }
.project__media img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.project:hover .project__media img { transform: scale(1.04); }

.project__caption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-top: 16px;
}
.project__caption h3 { font-size: 18px; font-weight: 500; }
.project__caption p { font-size: 14px; color: var(--piedra); line-height: 1.4; }

/* ---------- 5 · Servicios ---------- */
.services { padding: var(--pad-section) 0; }

.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 14px;
}
.services__label { font-size: 14px; }
.services__sub {
  font-size: clamp(24px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
}

.services__list { padding-top: clamp(30px, 4vw, 60px); }
.services__list li {
  font-size: clamp(36px, 4.8vw, 84px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  padding-left: clamp(0px, 26vw, 26vw);
  opacity: 0.15;
  transition: opacity 0.5s ease;
}
.services__list li.is-active, .services__list li:hover { opacity: 1; }

/* ---------- 6 · Estudio ---------- */
.studio { padding: var(--pad-section) 0; }

.studio__statement {
  font-size: clamp(30px, 3.6vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 24ch;
}
.studio__statement em { font-style: normal; font-size: 1.02em; letter-spacing: -0.01em; }

.studio__bottom {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  margin-top: clamp(90px, 14vw, 240px);
}
.studio__text { grid-column: 1 / 5; }
.studio__text p { font-size: 16px; line-height: 1.45; color: var(--tinta); }
.studio__portraits {
  grid-column: 9 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
/* un solo retrato: conserva la escala de antes y deja aire a la izquierda */
.studio__portraits figure { grid-column: 2 / 3; aspect-ratio: 3 / 4; }

/* ---------- 7 · Footer ---------- */
.footer {
  background: var(--negro);
  color: var(--crema);
  padding: clamp(80px, 10vw, 160px) 0 30px;
}

.footer__cta {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  width: fit-content;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 170px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: clamp(40px, 6vw, 100px);
}
.footer__cta-arrow {
  font-family: var(--sans);
  font-size: 0.45em;
  transition: transform 0.35s ease;
}
.footer__cta:hover .footer__cta-arrow { transform: translate(0.15em, -0.15em); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 10vw, 160px);
  font-size: 15px;
  line-height: 1.5;
}
.footer__col { display: flex; flex-direction: column; gap: 2px; }
.footer__label { color: rgba(242, 240, 230, 0.45); margin-bottom: 10px; font-size: 13px; }
.footer__col a { width: fit-content; transition: opacity 0.25s ease; }
.footer__col a:hover { opacity: 0.5; }

/* Wordmark de cierre: misma tipografía que el del hero */
.footer__wordmark {
  margin: 0 calc(var(--gutter) * -1) clamp(30px, 4vw, 60px);
  font-weight: 400;
  font-size: 12.3vw;
  line-height: 0.78;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.footer__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-size: 13px;
  color: rgba(242, 240, 230, 0.45);
}
.footer__credit { text-align: right; }
.footer__top { justify-self: center; transition: color 0.25s ease; }
.footer__top:hover { color: var(--crema); }

/* ---------- 8 · 404 ---------- */
.notfound {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
}

.notfound__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* despeja el header fijo arriba y deja sitio al 404 gigante abajo */
  padding-top: 170px;
  padding-bottom: 29vw;
}

.notfound__label {
  font-size: 14px;
  color: var(--piedra);
  margin-bottom: clamp(18px, 2.4vw, 32px);
}

.notfound__heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-bottom: clamp(28px, 3.6vw, 54px);
}

/* Eco del wordmark del hero: cifra ajustada al ancho, cortada por el borde */
.notfound__code {
  position: absolute;
  bottom: -0.04em;
  left: 0;
  width: 100%;
  font-size: 37vw;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .header { grid-template-columns: 1fr auto; }

  .statement__col:first-child { grid-column: 1 / 7; }
  .statement__col:last-child { grid-column: 7 / -1; }

  .services__list li { padding-left: 10vw; }

  .studio__text { grid-column: 1 / 7; }
  .studio__portraits { grid-column: 7 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  /* El texto introductorio del hero mete demasiada información en una
     pantalla pequeña: se oculta para dejar respirar la imagen. */
  .hero__content { display: none; }

  /* Retícula: se reduce la altura total de la sección quitando alto al
     contenedor de las imágenes (manteniendo el ancho), para que dejen de
     verse tan alargadas verticalmente. El buffer de las columnas conserva
     margen suficiente para el parallax (recorrido reducido en móvil). */
  .pgrid { height: 42svh; min-height: 0; }
  .pgrid__wrapper { gap: 10px; padding: 0 10px; }
  .pgrid__col { gap: 10px; height: 64svh; margin-top: -11svh; }

  .statement__heading .rv { text-indent: 14vw; }
  .statement__cols { grid-template-columns: 1fr; }
  .statement__col:first-child, .statement__col:last-child { grid-column: 1 / -1; }

  .projects__grid { row-gap: 70px; }
  .project--lg, .project--sm,
  .project--sm:nth-of-type(3), .project--lg:nth-of-type(4) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .project__caption { grid-template-columns: 1fr; gap: 4px; }

  .services__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services__list li { padding-left: 0; }

  .studio__bottom { grid-template-columns: 1fr; row-gap: 50px; }
  .studio__text, .studio__portraits { grid-column: 1 / -1; }

  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  /* 404: en pantallas estrechas la cifra pierde altura relativa; se compensa */
  .notfound__content { padding-top: 130px; padding-bottom: 24vw; }
  .notfound__code { font-size: 44vw; }

  /* Crédito en tres líneas: Desarrollado / por / Trace Studio */
  .footer__credit span { display: block; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .services__list li { opacity: 1; }
}