/* ——— Variables: cambiá acá colores, tipografía y márgenes ——— */
:root {
  --fondo: #fff;
  --texto: #000;
  --gris: #8a8a8a;
  --linea: #e6e6e6;
  --seleccion: #f5cde1;
  --sin-portada: #191919; /* color que se ve cuando un proyecto no tiene portada */
  --fuente: "sets-grotesk-m", system-ui, sans-serif;
  --margen: 24px;
  --cabecera: 72px;
  --pie: clamp(170px, 22svh, 240px);
  --t-base: 16px;
  --t-medio: 24px;
  --t-grande: clamp(36px, 5vw, 52px);
}

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

html { -webkit-text-size-adjust: 100%; background: var(--fondo); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* La "hoja" es toda la página menos el footer: tiene fondo y tapa al footer fijo que está detrás */
.hoja {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin-bottom: var(--pie);
  background: var(--fondo);
}
main { flex: 1; padding: 0 var(--margen); }

::selection { background: var(--seleccion); color: #000; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .5; }

img { display: block; width: 100%; height: auto; }
picture { display: block; } /* Eleventy Image envuelve las imágenes en <picture> */

/* Carga de imágenes (todas las páginas menos la home): arrancan borrosas y se enfocan al cargar y entrar en pantalla (js/imagenes.js).
   clip-path evita que el blur se derrame fuera del borde de la imagen. */
.js body:not(.home) main img {
  filter: blur(14px);
  clip-path: inset(0);
  transition: filter .9s ease, opacity .3s;
}
.js body:not(.home) main img.cargada { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js body:not(.home) main img { transition: none; }
}

.gris { color: var(--gris); }

.titulo-grande {
  margin: 0;
  font-size: var(--t-grande);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ——— Cabecera ——— */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--cabecera);
  padding: 0 var(--margen);
}
.marca { font-weight: 700; }
.nav { display: flex; gap: 20px; }
.nav a[aria-current="page"] { color: var(--gris); }

/* ——— Pie: fijo abajo, detrás de la hoja ——— */
.pie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--pie);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: var(--margen);
  background: #000;
  color: #fff;
}
/* Extiende el negro hacia arriba, por detrás de la página: en el "rebote" del scroll (Mac/iPhone)
   la página se estira y deja un hueco entre ella y el footer; así ese hueco se ve negro y no blanco */
.pie::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: inherit;
}
.pie-cta { font-size: var(--t-medio); letter-spacing: -0.02em; }
.pie a.pie-cta { display: inline-flex; align-items: center; gap: .3em; }
.pie-cta svg { width: 1em; height: 1em; flex: none; }
.pie-redes { display: flex; gap: 24px; }
.pie a { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
/* Contacto: footer gris con texto negro y sin "Empezar un proyecto"; las redes quedan a la derecha */
.pagina-contacto .pie { background: #f1f1f1; color: #000; }
.pagina-contacto .pie-redes { margin-left: auto; }

/* ——— Home: carrusel a pantalla completa, con la cabecera encima ——— */
.home main { padding: 0; }
.home .cabecera,
.con-hero .cabecera {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  color: #fff;
}
.home .nav a[aria-current="page"],
.con-hero .nav a[aria-current="page"] { color: inherit; }

.carrusel {
  position: relative;
  height: 100svh;
  min-height: 420px;
  color: #fff;
}
.carrusel-pista { position: absolute; inset: 0; display: grid; }
.slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
  background: var(--sin-portada);
}
.slide.activo { opacity: 1; visibility: visible; }
.slide:hover { opacity: 1; }
.slide picture { height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.carrusel-titulos {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: var(--margen);
  display: grid;
  justify-items: start;
}
.slide-titulo {
  grid-area: 1 / 1;
  visibility: hidden;
  font-size: var(--t-grande);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.slide-titulo.activo { visibility: visible; }

/* ——— Trabajos: título + resumen fijos a la izquierda, imágenes que scrollean a la derecha ——— */
.indice {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--margen);
  align-items: start;
}
.indice-fijo {
  position: sticky;
  top: var(--cabecera);
  height: calc(100svh - var(--cabecera));
  display: grid;
  align-items: end;
  padding: 0 0 var(--margen) 12px;
}

/* Todos los textos ocupan el mismo lugar; solo se ve el del proyecto activo */
.indice-texto {
  grid-area: 1 / 1;
  display: grid;
  gap: 16px;
  max-width: 420px;
  visibility: hidden;
}
.indice-texto.activo { visibility: visible; }
.indice-texto:hover { opacity: 1; }
.indice-nombre { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.indice-resumen { color: var(--gris); }

.indice-imagenes {
  display: grid;
  gap: var(--margen);
  padding: 80px 0 var(--margen);
}
.indice-item:hover { opacity: 1; }
.indice-item img {
  height: calc(100svh - var(--cabecera) - var(--margen) * 2);
  object-fit: cover;
}
.indice-item:hover img { opacity: .9; }
.indice-titulo { display: none; padding-top: 10px; }
.sin-portada {
  display: block;
  height: calc(100svh - var(--cabecera) - var(--margen) * 2);
  background: var(--sin-portada);
}

/* ——— Proyecto ——— */

/* Hero: portada a pantalla completa con el título centrado. Queda quieta y el cuerpo sube por encima.
   Sin sticky/fixed (Safari tiñe sus barras con eso): baja lo mismo que se scrollea durante
   la primera pantalla. La cabecera hace lo mismo para quedar sobre el hero. */
.con-hero main { padding: 0; }
.proyecto-hero {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  color: #fff;
  background: var(--sin-portada);
}
.proyecto-hero img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
.proyecto-hero picture { position: absolute; inset: 0; }
.proyecto-titulo {
  position: relative;
  margin: 0;
  padding: 0 var(--margen);
  font-size: clamp(56px, 11vw, 180px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.04em;
  text-align: center;
}
@supports (animation-timeline: scroll()) {
  .proyecto-hero,
  .con-hero .cabecera {
    animation: hero-quieto linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 100svh;
  }
}
@keyframes hero-quieto {
  to { transform: translateY(100svh); }
}
.con-hero .cabecera { z-index: 1; }
/* El hero que baja no debe salirse de la hoja ni asomar por donde se descubre el footer */
.con-hero .hoja { overflow: clip; }

.proyecto-cuerpo {
  position: relative;
  z-index: 2;
  padding: 24px var(--margen) 0;
  background: var(--fondo);
}

/* Ficha: columnas chicas, etiqueta gris arriba */
.ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
.ficha dt { color: var(--gris); }
.ficha dd { margin: 0; }

/* Servicios en horizontal, como etiquetas sutiles (no son links) */
.ficha-servicios { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ficha-servicios dt { flex-basis: 100%; margin-bottom: -4px; } /* compensa el gap: queda igual que las otras columnas */
.ficha-servicios dd {
  /* mismo alto que una línea de la ficha, para que quede alineado con Estudio Barro, 2026, etc. */
  padding: 0 6px;
  font-size: 12px;
  line-height: calc(14px * 1.35);
  background: var(--linea);
}

/* Textos centrados, grandes, con aire */
.contenido p:not(:has(img)),
.contenido ul,
.contenido ol {
  max-width: 720px;
  margin: 160px auto;
  font-size: var(--t-medio);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}
.contenido ul,
.contenido ol { list-style-position: inside; padding: 0; }
/* Títulos (##, ### o ####, todos iguales): centrados y pegados al texto que les sigue */
.contenido :is(h2, h3, h4) {
  max-width: 720px;
  margin: 160px auto 0;
  font-size: var(--t-base);
  font-weight: 700;
  text-align: center;
}
.contenido :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 16px; }

/* Imágenes: una sola = ancho completo con el borde blanco; 2 o 3 en la misma línea = pegadas */
.contenido p:has(img) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--margen);
}
.contenido p:has(img) img { height: 100%; object-fit: cover; }

/* "Volver" a Trabajos: centrado en el espacio entre el contenido y "Siguiente proyecto" */
.volver {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .4em;
  margin: 80px auto;
  font-weight: 700;
}
.volver svg { width: 1.2em; height: 1.2em; flex: none; }

.siguiente {
  display: block;
  padding: 40px 0 var(--margen);
  border-top: 1px solid var(--linea);
}
.etiqueta { display: block; margin-bottom: 8px; color: var(--gris); }

/* ——— Contacto ——— */
.contacto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 120px;
  min-height: calc(100svh - var(--cabecera) - 80px);
  padding-top: 80px;
}
.contacto-bloques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--margen);
  font-size: var(--t-medio);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.contacto-bloques p { margin: 0; }
.contacto-bloques .gris { margin-bottom: 8px; }
.contacto-cta { align-self: flex-start; }

/* ——— Lab: grilla de 3 columnas con el mismo espacio que Trabajos, sin hover. Cada imagen mantiene su proporción ——— */
.lab {
  columns: 3;
  column-gap: var(--margen);
  padding: 24px 0 var(--margen);
}
.lab figure { margin: 0 0 var(--margen); break-inside: avoid; }

/* ——— Página (Sobre mí) ——— */
.pagina { padding-top: 80px; }
/* Dos columnas: título y textos a la izquierda, imagen a la derecha.
   .contenido se "disuelve" para que sus párrafos entren directo en la grilla. */
.pagina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--margen) * 2);
  align-items: start;
}
.pagina .contenido { display: contents; }
.pagina .titulo-grande,
.pagina .contenido p:not(:has(img)) { grid-column: 1; }
.pagina .titulo-grande { margin-bottom: 32px; }
.pagina .contenido p:not(:has(img)) { max-width: 720px; margin: 0 0 24px; text-align: left; }
/* La imagen ocupa toda la columna derecha, desde arriba (el span cubre todas las filas de texto) */
.pagina .contenido p:has(img) { grid-column: 2; grid-row: 1 / span 20; }

@media (max-width: 1000px) {
  .lab { columns: 2; }
}

/* ——— Celular ——— */
@media (max-width: 720px) {
  :root { --margen: 16px; --cabecera: 56px; --pie: 180px; }
  .indice,
  .contacto-bloques { grid-template-columns: 1fr; }
  .indice-fijo { display: none; }
  .indice-imagenes { padding-top: 24px; }
  .indice-item img,
  .sin-portada { height: auto; aspect-ratio: 4 / 5; }
  .indice-titulo { display: block; }
  .contacto-bloques { font-size: 19px; }
  .lab { columns: 1; }
  .contenido p:not(:has(img)),
  .contenido ul,
  .contenido ol { margin: 96px auto; font-size: 19px; }
  .contenido :is(h2, h3, h4) { margin-top: 96px; }
  .ficha { gap: 16px 32px; }
  /* En el celu las imágenes de a 2 o 3 van una debajo de la otra, con un espacio chico */
  .contenido p:has(img) { grid-auto-flow: row; gap: calc(var(--margen) / 2); }
  /* Sobre mí: una sola columna, la imagen abajo del texto */
  .pagina { grid-template-columns: 1fr; }
  .pagina .contenido p:has(img) { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .pie { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .pagina-contacto .pie-redes { margin-left: 0; } /* en el celu las redes van a la izquierda, como siempre */
}