/* ============================================================
   Mateo Garenz — Portfolio
   Tokens: blanco puro, negro puro, gris neutro.
   Tipografía: Helvetica (Light para texto general y para el nombre
   principal, peso medio para títulos/nombres de proyecto).
   ============================================================ */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #767676;
  --ink-faint: #b3b3b3;
  --hairline: #ececec;

  --font: Helvetica, Arial, sans-serif;
  --font-condensed: 'Helvetica Neue Condensed Bold', 'Arial Narrow', sans-serif;

  --content-max: 1160px;
  --side-pad: 24px;
  --hero-peek: 72px; /* en móvil asoma el primer proyecto por debajo del vídeo */

  --gap-feed: 96px;
  --gap-projects: 48px; /* separación entre proyectos en la HOME */
  --gap-pair: 32px;
  --gap-hero: 28px; /* espacio entre el vídeo de portada y el primer proyecto */
  --desktop-media-cap: 980px; /* tope de ancho en escritorio para la HOME (no tocar: afecta solo a la home) */
  --project-desktop-cap: 1368px; /* tope de ancho en escritorio SOLO para páginas de proyecto (galería en 2 columnas) */
}

@media (min-width: 720px) {
  :root { --side-pad: 56px; }
}
@media (min-width: 860px) {
  /* En escritorio la portada se queda exactamente como estaba. */
  :root { --hero-peek: 0px; }
}
@media (min-width: 1100px) {
  :root { --side-pad: 96px; --gap-feed: 128px; --gap-projects: 64px; --gap-hero: 48px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Accesibilidad: foco, texto oculto y "saltar al contenido" ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.95rem;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------- Header ---------- */

.site-header {
  /* Fija arriba en todas las páginas: el menú está siempre a mano y en el
     mismo sitio (icono a la izquierda, "Contacto" a la derecha). */
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--side-pad);
  font-size: 0.95rem;
}

/* Páginas interiores: el nombre va justo a la derecha del icono de menú
   (que conserva su sitio, a la izquierda del todo, como en la Home). */
.site-header__left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header a {
  padding: 4px 0;
}

.site-header a:hover {
  color: var(--ink-soft);
}

/* ---------- Hero de vídeo ---------- */

:root {
  --header-h: 64px; /* se recalcula por JS (js/hero.js) según la altura real del header */
}

.hero {
  position: relative;
  cursor: pointer;
  width: 100%;
  /* --viewport-h lo mide js/hero.js con el alto real de la pantalla;
     100svh queda como respaldo si el JS no llega a ejecutarse.
     --hero-peek es el trocito del primer proyecto que se deja asomar
     por debajo, para que se entienda que la página continúa. */
  height: calc(var(--viewport-h, 100svh) - var(--header-h) - var(--hero-peek, 0px));
  min-height: 420px;
  overflow: hidden;
  background: #111;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.05) 72%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}

.hero__text {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 24px;
  text-align: center;
  color: #ffffff;
}

/* El nombre se escala a partir del tamaño del subtítulo para que ambos
   midan lo mismo de ancho, sin JavaScript (antes lo hacía hero.js midiendo
   texto con un canvas). --hero-name-k es la relación de anchos entre
   "Mateo Garenz" y el subtítulo con Helvetica/Arial (mismas métricas);
   si con otra tipografía se descuadra, se ajusta solo este número. */
.hero {
  --hero-role-size: clamp(1rem, 3.1vw, 1.6rem);
  --hero-name-k: 2.79;
}

.hero__name {
  margin: 0;
  font-family: 'Helvetica Neue', var(--font);
  font-weight: 200;
  letter-spacing: -0.01em;
  font-size: calc(var(--hero-role-size) * var(--hero-name-k));
  line-height: 1;
  white-space: nowrap;
}

.hero__role {
  margin: 8px 0 0;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: var(--hero-role-size);
  line-height: 1.4;
}

.hero__scroll:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 10px;
}

.hero__toggle {
  position: absolute;
  z-index: 3;
  right: var(--side-pad);
  bottom: 24px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
}

.hero__toggle:hover { opacity: 0.8; }

.hero__scroll {
  position: absolute;
  z-index: 3;
  cursor: pointer;
  bottom: 28px;
  left: 50%;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: top center;
  animation: hero-scroll 2.6s ease-in-out infinite;
}

@keyframes hero-scroll {
  0%   { opacity: 0.25; transform: translateX(-50%) scaleY(0.55); }
  50%  { opacity: 0.9;  transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0.25; transform: translateX(-50%) scaleY(0.55); }
}

/* ---------- Feed de proyectos ---------- */

.feed {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--gap-hero) var(--side-pad) var(--gap-feed);
  display: flex;
  flex-direction: column;
  gap: var(--gap-projects);
}

.project {
  display: block;
}

.project__media {
  width: 100%;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: var(--ratio-m);
  position: relative;
}

@media (min-width: 860px) {
  .project__media {
    aspect-ratio: var(--ratio-d, var(--ratio-m));
  }
}

.project__media picture {
  display: contents;
}

.project__media img,
.project__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

@media (min-width: 860px) {
  /* Si una pieza concreta define --item-cap, su ancho en escritorio
     queda fijado a ese valor (no crece con el ancho de la página).
     Se usa para dejar el placeholder del cartel de Un Amor Etéreo
     exactamente con el tamaño que ya tenía. */
  .project-page__gallery .project__media {
    max-width: var(--item-cap, none);
    margin-left: auto;
    margin-right: auto;
  }
}

.project__caption {
  margin: 14px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.project-row {
  display: grid;
  grid-template-columns: 1fr;
  /* En móvil, Équipe y Jaguar se separan igual que el resto. */
  gap: var(--gap-projects);
}

@media (min-width: 860px) {
  .project-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-pair);
  }

  /* Proyectos a ancho completo (no en pareja): en escritorio se
     limitan a un ancho algo menor para verse enteros sin apenas
     scroll. Los proyectos en pareja (.project-row) ya quedan bien
     dimensionados por el propio grid, así que no se tocan aquí. */
  .feed > .project {
    max-width: var(--desktop-media-cap);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 28px var(--side-pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__social {
  display: flex;
  gap: 20px;
}

.site-footer__social a:hover {
  color: var(--ink);
}

/* ---------- Página de proyecto ---------- */

.project-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--side-pad) var(--gap-feed);
}

@media (min-width: 860px) {
  /* En escritorio, todo el bloque (título, galería y créditos) se
     estrecha uniformemente y queda centrado, con el mismo margen
     blanco a izquierda y derecha. En móvil no se toca nada. */
  .project-page {
    max-width: var(--project-desktop-cap);
  }
}

.project-page__back {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.project-page__back:hover { color: var(--ink); }

.project-page__head {
  max-width: 640px;
  margin-bottom: 48px;
}

.project-page__title {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.project-page__meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.project-page__desc {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 60ch;
}

.project-page__gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 860px) {
  /* Solo escritorio: la galería pasa de 1 a 2 columnas.
     - Los vídeos horizontales ocupan las dos columnas (.is-full).
     - Si una foto se queda sola en su fila, se centra con el ancho
       de una columna (.is-orphan). */
  .project-page__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .project-page__gallery .project__media.is-full {
    grid-column: 1 / -1;
  }
  /* Proyectos marcados como singleColumn: una sola columna, como antes. */
  .project-page__gallery.is-single-column {
    display: flex;
    flex-direction: column;
  }

  .project-page__gallery .project__media.is-orphan {
    grid-column: 1 / -1;
    width: calc((100% - 40px) / 2);
    justify-self: center;
  }
}

.project-video-link {
  display: block;
  cursor: pointer;
}

.project-video-link__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease;
}

.project-video-link__icon svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: rgba(10, 10, 10, 0.75);
}

.project-video-link:hover .project-video-link__icon {
  background: rgba(255, 255, 255, 0.72);
}

.project-page__credits {
  margin-top: 40px;
}

.project-page__credits p {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.project-page__cta {
  margin: 56px 0 0;
  font-size: 0.95rem;
}

.project-page__cta a {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

.project-page__nav {
  margin-top: 96px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}

.project-page__nav span {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.project-page__nav a {
  font-weight: 500;
}

.project-page__nav a:hover { color: var(--ink-soft); }
.project-page__nav a:last-child { text-align: right; }

/* ---------- Páginas simples (Sobre mí / Contacto) ---------- */

.simple-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px var(--side-pad) 120px;
}

.simple-page h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 300;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.simple-page p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

.simple-page a.contact-link {
  display: inline-block;
  margin-top: 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

.contact-page__links {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-page__links .contact-link {
  margin-top: 0;
}
/* "Hola, soy Mateo!": mismo tamaño de letra que el texto de debajo
   de la foto, conservando el resto de la estética de la página. */
.simple-page h1.about-page__title {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  margin: 0 0 4px;
}

.about-page__photo {
  margin: 28px 0 32px;
}

.about-page__info {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-page__info-block h2 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.about-page__info-block p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.about-page__location {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- Formulario de contacto (final de la Home) ---------- */

.contact-form {
  /* Mismo ancho y márgenes que el feed de proyectos, para que el
     bloque quede alineado con las fotos de la Home. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--side-pad) 112px;
}

/* En la página /contacto el formulario va dentro de la columna de texto. */
.contact-form--page {
  max-width: none;
  padding: 0 0 8px;
  margin-top: 40px;
}

/* .simple-page p (más arriba) pisaría estos párrafos del formulario. */
.simple-page .contact-form__intro {
  margin: 0 0 48px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.simple-page .contact-form__status {
  margin: 20px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* /contacto en dos columnas en escritorio: formulario a la izquierda y
   datos directos a la derecha. En móvil, una debajo de otra. */
.simple-page.contact-page { max-width: var(--content-max); }

.contact-page__cols { display: block; }

.contact-page__cols .contact-form--page { margin-top: 0; }

.contact-page__side { margin-top: 24px; }

@media (min-width: 861px) {
  .contact-page__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
  }

  .contact-page__side { margin-top: 0; }
}

.contact-form__title {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.contact-form__intro {
  max-width: 520px;
  margin: 0 0 48px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.contact-form__form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
}

.contact-form__field {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: 14px 0;
  margin-bottom: 28px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.contact-form__field::placeholder { color: var(--ink-soft); opacity: 1; }

.contact-form__field:focus {
  border-bottom-color: var(--ink);
}

.contact-form__field:focus-visible,
.contact-form__send:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.contact-form__field[aria-invalid="true"] {
  border-bottom-color: var(--ink);
}

.contact-form__field--area {
  resize: vertical;
  min-height: 72px;
  line-height: 1.7;
}

.contact-form__send {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.contact-form__send:hover { color: var(--ink-soft); border-bottom-color: var(--ink-soft); }
.contact-form__send[disabled] { color: var(--ink-faint); border-bottom-color: var(--ink-faint); cursor: default; }

.contact-form__status {
  margin: 20px 0 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Icono de menú y panel de navegación ---------- */

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-toggle:hover span { background: var(--ink-soft); }

/* Abierto: las líneas se cruzan. */
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-menu {
  position: fixed;
  z-index: 14;
  top: var(--header-h, 64px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px var(--side-pad) 24px;
  background: var(--bg);
  font-size: 0.95rem;
}

.site-menu a { align-self: flex-start; }

.site-menu[hidden] { display: none; }

.site-menu a:hover { color: var(--ink-soft); }

/* ---------- Flecha del botón de enviar ---------- */

.contact-form__arrow {
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.45em;
  vertical-align: -0.02em;
}

/* ---------- Página "Proyectos" (moodboard) ---------- */

.moodboard {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 4px var(--side-pad) 64px;
  display: grid;
  /* Móvil: tres columnas. Las filas incompletas quedan alineadas
     a la izquierda, sin centrar nada. */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  justify-content: start;
}

@media (min-width: 860px) {
  .moodboard {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-bottom: 96px;
  }
}

.moodboard__item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg);
}

/* "contain": cada portada se ve ENTERA dentro de su casilla, sin
   recortar nada (importante en los carteles con texto). El hueco
   que sobra queda en blanco, como el resto de la web. */
.moodboard__item picture { display: contents; }

.moodboard__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.moodboard__item:hover img { opacity: 0.86; transition: opacity 0.2s ease; }