/* ==========================================================================
   home.css — portada, presentación, índice de proyectos, galería de
   espacios, ámbitos y cierre. Depende de base.css.
   ========================================================================== */

/* ---------- Paleta de la home: granate #4A2026 y sus subtonos ----------
   Sustituye los tokens de base.css solo en esta página. Contraste sobre
   --bg: ink 12:1, ink-soft 7.9:1, muted-strong 5.1:1 (AA). */
body[data-page='home'] {
  --ink: #4A2026;
  --ink-soft: #633F44;
  --muted-strong: #7C5E61;
  --muted: #9E8889;
  --line: #D9D1CE;
  --accent: #B48D92;
  /* Azul del header (#DBE6F0) llevado a tonos legibles para la portada */
  --hero-blue: #556980;      /* textos pequeños: 5:1 sobre --bg */
  --hero-blue-line: #7FA3C6; /* línea bajo MOA */
}

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Portada ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: 110px;
  padding-bottom: var(--space-5);
  min-height: 100%;
}
.hero__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.hero__title {
  align-self: center;
  margin: var(--space-4) 0;
  line-height: 1;
}
.hero__word {
  display: block;
  overflow: hidden;
  /* La palabra ocupa casi todo el ancho del contenedor (MOTEGA en ancho máximo).
     --word-em = ancho de la palabra en em (MOTEGA mide 5,49 em). */
  font-size: min(calc((min(100vw, 1440px) - 2 * var(--gutter)) / var(--word-em, 5.55)), 62vh, 30rem);
  font-size: min(calc((min(100vw, 1440px) - 2 * var(--gutter)) / var(--word-em, 5.55)), 62svh, 30rem);
  font-weight: 850;
  font-variation-settings: 'wdth' 125;
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  padding-bottom: 0.02em;
  margin-left: -0.04em;
}
.hero__word > span { display: block; }
.hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--space-3);
  border-top: 1px solid var(--ink);
  padding-top: var(--space-3);
}
.hero__mask { display: block; overflow: hidden; }
.hero__mask > span { display: block; }
.hero__sub {
  font-size: var(--fs-xl);
  font-weight: 300;
  font-variation-settings: 'wdth' 75;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.hero__tagline { max-width: 26ch; }
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--ink);
}
.hero__scroll svg { animation: hero-nudge 2.4s var(--ease-in-out) infinite; }
@keyframes hero-nudge {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

@media (max-width: 767px) {
  .hero__inner { padding-top: 96px; padding-bottom: var(--space-4); }
  .hero__meta { grid-template-columns: 1fr; gap: var(--space-2); }
  .hero__scroll { justify-self: start; }
}

/* ---------- Presentación ---------- */
.intro { padding: clamp(6rem, 18vh, 12rem) 0 clamp(4rem, 12vh, 8rem); }
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.intro__label { grid-column: 1 / 4; padding-top: 0.9rem; color: var(--hero-blue); }
.intro__text {
  grid-column: 4 / 13;
  font-size: clamp(1.75rem, 3.6vw, 3.4rem);
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.intro__text .w { display: inline; }
@media (max-width: 767px) {
  .intro__label, .intro__text { grid-column: 1 / -1; }
}

/* ---------- Índice de proyectos ----------
   Filas tipográficas. Al pasar el cursor aparece una imagen del proyecto. */
.idx { position: relative; padding: var(--space-5) 0 var(--space-7); }
.idx__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}
.idx__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variation-settings: 'wdth' 120;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.idx__eyebrow { color: var(--hero-blue); }
.idx__list { border-top: 1px solid var(--hero-blue-line); }
.idx__row {
  --line: 1;
  position: relative;
  border-bottom: 1px solid transparent;
}
/* Línea inferior que se dibuja al entrar */
.idx__row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--hero-blue-line);
  transform: scaleX(var(--line));
  transform-origin: left center;
}
.idx__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(10rem, 20rem) 2.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(1rem, 2.4vw, 1.9rem) clamp(0.5rem, 1.2vw, 1rem);
  overflow: hidden;
  transition: color var(--dur-med) var(--ease-out);
}
.idx__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--hero-blue);
  transition: color var(--dur-med) var(--ease-out);
}
.idx__thumb { display: none; }
.idx__name { display: block; overflow: hidden; padding-bottom: 0.06em; transition: transform 560ms var(--ease-out), opacity 420ms var(--ease-out); }
.idx__name-in {
  display: block;
  font-size: clamp(2.2rem, 6.2vw, 6rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 115;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.idx__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-strong);
  transition: color var(--dur-med) var(--ease-out);
}
.idx__arrow {
  justify-self: end;
  display: inline-flex;
}
.idx__arrow svg { transition: transform 560ms var(--ease-out); }
@media (hover: hover) {
  /* Al pasar el cursor el nombre se aclara un poco; la imagen flotante hace el resto */
  .idx__link:is(:hover, :focus-visible) .idx__name { opacity: 0.55; transform: translateX(1.2rem); }
  .idx__link:hover .idx__arrow svg { transform: translateX(0.4rem) rotate(-45deg); }
}
.idx__link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.idx__cta { margin-top: var(--space-5); }

/* Imagen flotante que sigue al cursor */
.idx__float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: clamp(220px, 20vw, 320px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  box-shadow: 0 24px 60px rgba(74, 32, 38, 0.22);
  transition: opacity 300ms var(--ease-out), scale 420ms var(--ease-out);
}
.idx__float.is-visible { opacity: 1; scale: 1; }
.idx__float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.idx__float img.is-on { opacity: 1; }

@media (max-width: 860px) {
  .idx__float { display: none; }
  .idx__head { flex-wrap: wrap; }
  /* PROYECTOS mide ~7,5 em: 11vw deja margen a los dos lados */
  .idx__title { font-size: 11vw; }
  .idx__link {
    grid-template-columns: 4.5rem minmax(0, 1fr) 1.5rem;
    grid-template-areas: 'thumb name arrow' 'thumb meta arrow';
    column-gap: var(--space-2);
    row-gap: 0.3rem;
  }
  .idx__num { display: none; }
  .idx__thumb {
    grid-area: thumb;
    display: block;
    width: 4.5rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
  }
  .idx__name { grid-area: name; }
  .idx__name-in { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  .idx__meta { grid-area: meta; font-size: 0.6875rem; }
  .idx__arrow { grid-area: arrow; }
}

/* ---------- Galería horizontal ---------- */
.spaces { position: relative; }
.spaces__pin {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  overflow: hidden;
}
.spaces__eyebrow { color: var(--hero-blue); margin-bottom: 0.6rem; }
.spaces__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.03em;
  line-height: 1;
}
.spaces__viewport { outline: none; }
.spaces__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 2vw, 2rem);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.spaces__item { flex: none; }
.spaces__item--0 .spaces__fig { height: min(58vh, 560px); aspect-ratio: 4 / 5; }
.spaces__item--1 .spaces__fig { height: min(46vh, 440px); aspect-ratio: 3 / 2; }
.spaces__item--2 .spaces__fig { height: min(52vh, 500px); aspect-ratio: 1; }
.spaces__link { display: block; }
.spaces__fig {
  overflow: hidden;
  border-radius: 18px;
  background: var(--line);
}
.spaces__fig img {
  width: 112%;
  max-width: none;
  height: 100%;
  margin-left: -6%;
  object-fit: cover;
  transition: scale 900ms var(--ease-out);
}
.spaces__link:hover .spaces__fig img { scale: 1.04; }
.spaces__cap {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.spaces__n { font-family: var(--font-mono); color: var(--hero-blue); }
.spaces__viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (max-width: 860px) {
  .spaces__pin { min-height: 0; padding: var(--space-5) 0; }
  .spaces__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .spaces__viewport::-webkit-scrollbar { display: none; }
  .spaces__track { padding-inline: 16px; }
  .spaces__item { scroll-snap-align: start; scroll-margin-left: 16px; }
  .spaces__item--0 .spaces__fig,
  .spaces__item--1 .spaces__fig,
  .spaces__item--2 .spaces__fig { height: 52vh; aspect-ratio: 4 / 5; }
}

/* ---------- Ámbitos ---------- */
.fields { padding: var(--space-7) 0; }
.fields__eyebrow { color: var(--hero-blue); margin-bottom: var(--space-3); }
.fields__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 3rem);
  row-gap: 0.2rem;
}
.fields__item { position: relative; }
.fields__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.fields__label {
  display: block;
  font-size: clamp(2.4rem, 7.5vw, 7.5rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transition: color var(--dur-med) var(--ease-out);
}
.fields__project {
  display: inline-flex;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-strong);
  transition: color var(--dur-med) var(--ease-out);
}
.fields__n { color: var(--hero-blue); }
@media (hover: hover) {
  .fields__link:hover .fields__label { color: var(--f-ink); }
  .fields__link:hover .fields__project { color: var(--f-strong); }
}
@media (max-width: 600px) {
  .fields__link { flex-direction: column; gap: 0.1rem; }
  /* RESTAURACIÓN, la más larga, mide ~9,3 em */
  .fields__label { font-size: 9.4vw; }
}

/* ---------- Magazine ---------- */
.mag { padding: var(--space-7) 0 var(--space-6); }
.mag__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.mag__eyebrow { color: var(--hero-blue); margin-bottom: 0.6rem; }
.mag__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variation-settings: 'wdth' 120;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.mag__all {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 600;
}
.mag__all svg { transition: transform var(--dur-med) var(--ease-out); }
.mag__all:hover svg { transform: translateX(4px); }
.mag__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter);
  list-style: none;
}
.mag__link { display: block; }
.mag__fig {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: var(--line);
}
.mag__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--ease-out);
}
.mag__meta { margin-top: var(--space-3); color: var(--hero-blue); }
.mag__name {
  margin-top: 0.6rem;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variation-settings: 'wdth' 110;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mag__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.6rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.mag__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.mag__more svg { transition: transform var(--dur-med) var(--ease-out); }
@media (hover: hover) {
  .mag__link:hover .mag__fig img { scale: 1.04; }
  .mag__link:hover .mag__more svg { transform: translateX(4px); }
}
.mag__viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* Móvil: tarjetas que se deslizan con el dedo, como la galería de espacios */
@media (max-width: 860px) {
  .mag__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mag__viewport::-webkit-scrollbar { display: none; }
  .mag__list {
    grid-template-columns: repeat(var(--mag-n, 3), 78vw);
    width: max-content;
    padding: 0 16px;
  }
  .mag__item { scroll-snap-align: start; scroll-margin-left: 16px; }
}

/* ---------- Cierre ---------- */
.closing { padding: var(--space-6) 0 var(--space-7); overflow: hidden; }
.closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.closing__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
}

/* ---------- Movimiento reducido o sin GSAP ---------- */
.home-static .spaces__viewport { overflow-x: auto; }

/* ---------- Pie ---------- */
.site-footer .container > div > span { display: block; margin-top: 0.5rem; }
.footer__contact { font-style: normal; display: grid; gap: 0.25rem; }
.footer__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer__legal { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; }

/* ---------- Logotipo que nace del titular ----------
   home.js lo posiciona y escala con el scroll (transform). */
.home-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: block;
  font-weight: 850;
  font-variation-settings: 'wdth' 125;
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 0;
  will-change: transform;
  transition: color 400ms var(--ease-out);
  color: var(--ink);
  visibility: hidden;
  pointer-events: none;
}
.home-logo.is-active { visibility: visible; }
/* Sobre las fotos del recorrido el logo pasa a un rosado muy claro del mismo tono */
body[data-tone='dark'] .home-logo { color: #F5E9EA; }
.home-logo.is-docked { pointer-events: auto; }
.home-logo:focus-visible { outline-offset: 6px; }

/* Movimiento reducido: logo estático en la esquina */
.home-logo--static {
  top: 30px;
  left: var(--gutter);
  font-size: var(--logo-size);
  transform: none;
  will-change: auto;
}
.home-logo--static.is-visible { visibility: visible; pointer-events: auto; }
@media (max-width: 860px) {
  .home-logo--static { top: 36px; left: 34px; font-size: 26px; }
  /* Encajado en su cápsula de cristal: color tinta, sin fusión */
  .home-logo { transition: color 300ms var(--ease-out); }
  /* En móvil va en su cápsula de cristal: siempre granate */
  .home-logo.is-docked,
  .home-logo--static,
  body[data-tone='dark'] .home-logo.is-docked { color: var(--ink); }
}

/* ---------- Portada: granate + azul ----------
   MOA, subtítulo y lema en granate; textos pequeños y línea en azul. */
.hero__top,
.hero__top span,
.hero__scroll { color: var(--hero-blue); }
.hero__meta { border-top-color: var(--hero-blue-line); }

/* Botón «Escríbenos»: al pasar el cursor toma el azul del menú (pestaña activa) */
.closing__btn {
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.closing__btn:is(:hover, :focus-visible) {
  color: var(--ink);
  background-color: rgba(var(--nav-deep-rgb), 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 14px rgba(var(--nav-deep-rgb), 0.45),
    0 0 34px rgba(var(--nav-deep-rgb), 0.35);
}