/* ==========================================================================
   PORTAFOLIO · Portada y proyectos
   public/assets/css/portada.css
   ========================================================================== */

/* ==========================================================================
   Portada: una sola fotografía a pantalla completa
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tinta);
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Se muestra poco a poco al cargar, para que no haya salto. */
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s var(--curva), transform 1.4s var(--curva);
}

.hero__foto.es-cargada {
  opacity: 1;
  transform: scale(1);
}

/* Velo de la portada: dos degradados, uno arriba y otro abajo.
   - El inferior garantiza la legibilidad del titular y los botones.
   - El superior existe porque la cabecera es transparente sobre la foto: con
     una imagen clara (un muro de piedra al sol, por ejemplo) el logotipo y los
     enlaces blancos se perdían por completo. El velo es corto y suave, así que
     oscurece sólo la franja del menú y no la fotografía. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgb(10 9 8 / 0.52) 0%,
      rgb(10 9 8 / 0.22) 7%,
      transparent 18%
    ),
    linear-gradient(
      to top,
      rgb(10 9 8 / 0.78) 0%,
      rgb(10 9 8 / 0.42) 32%,
      rgb(10 9 8 / 0.08) 58%,
      transparent 78%
    );
  pointer-events: none;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen) clamp(2.5rem, 7vh, 5.5rem);
  color: var(--papel);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.hero__eyebrow {
  font-size: var(--t-xs);
  letter-spacing: var(--e-etiqueta);
  text-transform: uppercase;
  color: rgb(251 250 248 / 0.72);
}

.hero__titulo {
  font-size: var(--t-3xl);
  line-height: 0.94;
  max-width: 20ch;
  text-wrap: balance;
}

.hero__entrada {
  font-size: var(--t-md);
  color: rgb(251 250 248 / 0.82);
  max-width: 46ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.hero__bajar {
  position: absolute;
  left: 50%;
  bottom: var(--e-4);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  font-size: 0.6rem;
  letter-spacing: var(--e-etiqueta);
  text-transform: uppercase;
  color: rgb(251 250 248 / 0.6);
}

.hero__bajar-linea {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgb(251 250 248 / 0.7), transparent);
  animation: bajarLatido 2.8s var(--curva) infinite;
}

@keyframes bajarLatido {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* El indicador de scroll sobra en pantallas pequeñas: ocupa sitio y el gesto
   de deslizar es obvio en un móvil. */
@media (max-width: 700px) {
  .hero__bajar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__foto {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero__bajar-linea {
    animation: none;
  }
}

/* ==========================================================================
   Introducción
   ========================================================================== */

.intro {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-9) var(--margen) var(--e-7);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 860px) {
  .intro {
    grid-template-columns: 1fr;
    padding-top: var(--e-8);
  }
}

.intro__titulo {
  font-size: var(--t-xl);
  max-width: 16ch;
}

.intro__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-top: var(--e-2);
}

.intro__texto {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 52ch;
}

.intro__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  margin-top: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.intro__dato-clave {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--e-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--e-1);
}

.intro__dato-valor {
  font-family: var(--serif);
  font-size: var(--t-md);
}

/* ==========================================================================
   Rejilla de proyectos
   ========================================================================== */

.proyectos {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen) var(--e-8);
}

.proyectos__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-6);
}

.proyectos__rejilla {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}

/* Composición escalonada: las tarjetas no miden todas lo mismo ni empiezan a
   la misma altura. Es lo que hace la rejilla editorial en vez de una cuadrícula
   uniforme de tienda online. */
.proyecto {
  display: block;
  grid-column: span 6;
}

.proyecto:nth-child(4n + 1) {
  grid-column: span 7;
}

.proyecto:nth-child(4n + 2) {
  grid-column: span 5;
  /* Baja un poco la columna corta para romper la línea. */
  margin-top: clamp(0rem, 6vw, 5rem);
}

.proyecto:nth-child(4n + 3) {
  grid-column: span 5;
}

.proyecto:nth-child(4n + 4) {
  grid-column: span 7;
  margin-top: clamp(0rem, 5vw, 4rem);
}

@media (max-width: 860px) {
  .proyecto,
  .proyecto:nth-child(4n + 1),
  .proyecto:nth-child(4n + 2),
  .proyecto:nth-child(4n + 3),
  .proyecto:nth-child(4n + 4) {
    grid-column: span 12;
    margin-top: 0;
  }
}

.proyecto__marco {
  position: relative;
  overflow: hidden;
  background: var(--papel-2);
  /* La proporción la fija cada foto, así que la imagen no se recorta. */
  aspect-ratio: var(--ratio, 4 / 3);
}

.proyecto__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva), opacity var(--d-medio) var(--curva);
  opacity: 0;
}

.proyecto__foto.es-cargada {
  opacity: 1;
}

@media (hover: hover) {
  .proyecto:hover .proyecto__foto,
  .proyecto:focus-visible .proyecto__foto {
    transform: scale(1.035);
  }
}

.proyecto__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-3);
}

.proyecto__titulo {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.1;
}

.proyecto__meta {
  font-size: var(--t-xs);
  letter-spacing: var(--e-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.proyecto__subtitulo {
  font-size: var(--t-sm);
  color: var(--gris);
  margin-top: var(--e-1);
}

/* La tarjeta entera es un enlace: se marca el foco en el título. */
.proyecto:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 6px;
}

/* ==========================================================================
   Llamada de contacto
   ========================================================================== */

.contacto {
  position: relative;
  margin: var(--e-8) 0 0;
  padding: var(--e-9) var(--margen);
  background: var(--tinta);
  color: var(--papel);
}

.contacto__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: end;
}

@media (max-width: 860px) {
  .contacto__interior {
    grid-template-columns: 1fr;
  }
}

.contacto__titulo {
  font-size: var(--t-2xl);
  line-height: 0.98;
  max-width: 18ch;
}

.contacto__texto {
  font-size: var(--t-md);
  color: rgb(251 250 248 / 0.72);
  max-width: 42ch;
  margin-bottom: var(--e-4);
}

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.contacto .boton--fantasma {
  color: var(--papel);
  border-color: rgb(251 250 248 / 0.34);
}

.contacto .boton--fantasma:hover {
  border-color: var(--papel);
}

/* ==========================================================================
   Estado de carga y error
   ========================================================================== */

.cargando {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: var(--e-8) var(--margen);
}

.cargando__texto {
  font-size: var(--t-sm);
  letter-spacing: var(--e-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
  animation: latidoTexto 1.8s ease-in-out infinite;
}

@keyframes latidoTexto {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.error-carga {
  max-width: 40rem;
  margin: var(--e-9) auto;
  padding: 0 var(--margen);
  text-align: center;
}

.error-carga__titulo {
  font-size: var(--t-lg);
  margin-bottom: var(--e-3);
}

.error-carga__texto {
  color: var(--gris);
  margin-bottom: var(--e-5);
}