/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO — ignacio.uy
   Sistema visual: Swiss/editorial · Inter + JetBrains Mono · acento rojo
   ────────────────────────────────────────────────────────────────────
   Índice:
     1. Variables (colores, tipografías, espaciados)
     2. Reset y base
     3. Navegación
     4. Hero (video de fondo + título con animación slot)
     5. Listado de proyectos (grid)
     6. Vista de proyecto (detalle + galería)
     7. Skills / herramientas
     8. Footer
     9. Utilidades y media queries globales
   ════════════════════════════════════════════════════════════════════ */


/* ── 1. VARIABLES ────────────────────────────────────────────────────
   Tocá acá primero: casi todos los cambios visuales salen de esta caja. */
:root{
  /* Colores */
  --ink:    #111111;   /* texto principal / líneas fuertes */
  --paper:  #ffffff;   /* fondo */
  --grey:   #6b6b6b;   /* texto secundario, metadata */
  --line:   #e4e4e4;   /* líneas sutiles (separadores de cards) */
  --accent: #c8392b;   /* rojo de marca: hovers, énfasis, palabra fija del hero */

  /* Tipografías */
  --mono: 'JetBrains Mono', monospace;  /* labels, metadata, botones */
  --sans: 'Inter', system-ui, sans-serif; /* títulos y cuerpo */

  /* Espaciado maestro: padding lateral de toda la página.
     Escala solo entre 20px (mobile) y 56px (desktop grande). */
  --pad: clamp(20px, 4vw, 56px);

  /* Galería del proyecto: ancho máximo de imágenes/videos en desktop */
  --gallery-max: 70%;

  /* Animación slot del hero */
  --slot-duration: .6s;                        /* duración del swipe */
  --slot-ease: cubic-bezier(.65, 0, .35, 1);   /* ease in/out */
}


/* ── 2. RESET Y BASE ───────────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box }

body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }

/* Etiqueta editorial: texto chico, mono, mayúsculas espaciadas.
   Se usa en toda la web para metadata. */
.label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hidden{ display:none }


/* ── 3. NAVEGACIÓN ──────────────────────────────────────────────────
   Fija arriba. mix-blend-mode:difference hace que el texto se invierta
   solo según lo que tenga detrás (blanco sobre el video, negro sobre
   fondo blanco). Si cambiás colores de fondo raros, revisá esto. */
nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--pad);
  color: #fff;
  mix-blend-mode: difference;
}
nav .brand{ font-weight:700; font-size:15px; letter-spacing:-.01em }
nav .menu{ display:flex; gap:28px }
nav .menu a{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .85;
}
nav .menu a:hover{ opacity:1 }


/* ── 4. HERO ────────────────────────────────────────────────────────
   Pantalla completa con video de fondo oscurecido y título abajo. */
.hero{
  position: relative;
  height: 100svh;           /* svh = alto real en mobile (sin barras) */
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}

/* El video se oscurece con opacity + un degradado encima para que
   el texto blanco siempre lea bien. Ajustá opacity si tu video es
   muy claro u oscuro. */
.hero video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 45%);
}

.hero-content{
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad); gap: 24px;
}

.hero h1{
  font-size: clamp(44px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  /* Flex alineado a la derecha: .design queda anclado al margen y
     ambas piezas comparten la misma métrica de línea (1.25) para
     que sus baselines coincidan exactas */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ── Animación slot del título ──
   Estructura:  [palabra rotativa] + [texto fijo en acento]
   .slot es la "ventana" (recorta), .slot-inner es la columna que
   se desliza verticalmente. La lógica está en main.js.

   IMPORTANTE: la ventana y cada fila miden 1.25em (no 1em) para que
   los descendentes de letras como "g" no queden cortados por la
   máscara. Si cambiás una de estas alturas, cambiá las tres. */
.slot{
  display: inline-block;
  overflow: hidden;
  height: 1.25em;           /* ventana: una fila con aire p/ descendentes */
}
.slot-inner{
  display: flex;
  flex-direction: column;
}
.slot-inner span{
  display: block;
  height: 1.25em;           /* cada fila = altura de la ventana */
  line-height: 1.25;
  text-align: right;   /* cada palabra se pega al .design, sin hueco
                          aunque tengan anchos distintos */
}
.slot-inner.animating{
  transition: transform var(--slot-duration) var(--slot-ease);
}
.hero h1 .fixed{
  font-style: normal;
  color: var(--accent);     /* el ".design" fijo, en rojo */
  line-height: 1.25;        /* misma métrica que el slot = baselines alineadas */
}

.hero-meta{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 18px;
}
.hero-meta .label{ opacity:.75 }
.scroll-hint{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; opacity: .75;
}


/* ── 5. LISTADO DE PROYECTOS ──────────────────────────────────────── */
.work{ padding: calc(var(--pad) * 1.4) var(--pad) }

/* Cabecera de sección: título + metadata, con línea negra abajo.
   Este patrón se repite en Skills para mantener consistencia. */
.section-head{
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px; margin-bottom: 40px;
}
.section-head h2{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700; letter-spacing: -.02em;
}
.section-head .label{ color: var(--grey) }

/* Grid responsivo: las cards se acomodan solas.
   Cambiá el 300px para cards más grandes o más chicas. */
.grid{
  display: grid;
  gap: 40px 28px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card{ display:block; cursor:pointer }
.card .thumb{
  aspect-ratio: 4/3;        /* proporción de las miniaturas */
  overflow: hidden;
  background: #f2f2f2;
}
.card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.card:hover img{ transform: scale(1.04) }
.card .info{
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  gap: 16px; align-items: baseline;
}
.card h3{ font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.3 }
.card:hover h3{ color: var(--accent) }
.card .fields{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); text-align: right; white-space: nowrap;
}

/* Skeletons de carga */
.skeleton .thumb{ animation: pulse 1.4s ease-in-out infinite }
.skeleton .bar{
  height:14px; width:60%; background:#f2f2f2;
  margin-top:14px; animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

.state-msg{
  font-family: var(--mono); font-size: 12px;
  color: var(--grey); padding: 40px 0;
}


/* ── 6. VISTA DE PROYECTO ─────────────────────────────────────────── */
.project-view{ padding: calc(72px + var(--pad)) var(--pad) var(--pad) }

.back{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 40px;
  cursor: pointer; background: none; border: none; padding: 0;
}
.back:hover{ color: var(--accent) }

.project-head{
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: 32px; align-items: end;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 32px; margin-bottom: 16px;
}
.project-head h1{
  font-size: clamp(36px, 6vw, 84px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.project-meta{ display:flex; flex-direction:column; gap:8px; text-align:right }
.project-meta .label{ color: var(--grey) }
.project-meta a.label{ color: var(--accent) }

.project-desc{
  max-width: 64ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6; color: #333;
  padding: 32px 0 48px;
}

/* Galería: columna centrada. En desktop las piezas se limitan a
   --gallery-max (80%); en mobile van a ancho completo. */
.gallery{
  display: flex; flex-direction: column;
  gap: 8px; align-items: center;
}
.gallery img, .gallery video{ width:100%; height:auto }
.gallery .embed{
  position: relative; width: 100%;
  aspect-ratio: 16/9; background: #000;
}
.gallery .embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

.project-nav{
  display: flex; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--ink);
  margin-top: 64px; padding-top: 24px;
}
.project-nav a{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey);
}
.project-nav a:hover{ color: var(--accent) }


/* ── 7. SKILLS / HERRAMIENTAS ─────────────────────────────────────── */
.skills{ padding: 0 var(--pad) calc(var(--pad) * 1.4) }

/* Grid de logos: se acomodan solos. Cambiá el 120px para logos
   más grandes o más chicos. */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 32px 24px;
}
.skill{
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 24px 12px;
  border: 1px solid var(--line);
}
.skill img{
  height: 36px; width: auto;
  filter: grayscale(1);          /* logos en gris... */
  opacity: .7;
  transition: filter .3s, opacity .3s;
}
.skill:hover img{
  filter: grayscale(0);          /* ...a color en hover */
  opacity: 1;
}
.skill .label{ color: var(--grey); font-size: 10px }
.skill:hover .label{ color: var(--ink) }


/* ── 7b. SOBRE MÍ ─────────────────────────────────────────────────── */
.about{ padding: 60px var(--pad) calc(var(--pad) * 1.4) }

/* Frase de apertura: grande, tipo lead editorial */
.about-lead{
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: 26ch;
  margin-bottom: 48px;
}

/* Cuerpo del texto: en desktop fluye en dos columnas tipo diario.
   Si preferís una sola columna, borrá el bloque @media de abajo. */
.about-body p{
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  margin-bottom: 1.2em;
}
.about-body p:last-child{ margin-bottom: 0 }

/* Frase de cierre: el remate, destacado */
.about-punch{
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  max-width: 34ch;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.about-punch .accent{ color: var(--accent) }

@media (min-width: 900px){
  .about-body{
    column-count: 2;
    column-gap: 48px;
  }
  .about-body p{
    break-inside: avoid;   /* evita párrafos cortados entre columnas */
  }
}


/* ── 8. FOOTER ─────────────────────────────────────────────────────── */
footer{
  border-top: 1px solid var(--ink);
  margin: 0 var(--pad);
  padding: 32px 0 48px;
  display: flex; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
footer .label{ color: var(--grey) }
footer a:hover{ color: var(--accent) }


/* ── 9. UTILIDADES Y MEDIA QUERIES ────────────────────────────────── */

/* Desktop: limitar el ancho de la galería del proyecto */
@media (min-width: 721px){
  .gallery img, .gallery video, .gallery .embed{
    max-width: var(--gallery-max);
  }
}

/* Mobile */
@media (max-width: 720px){
  nav .menu{ gap: 18px }
  .grid{ gap: 32px }
  .project-head{ grid-template-columns: 1fr; align-items: start }
  .project-meta{ text-align: left }
}

/* Accesibilidad: si el usuario pide menos movimiento,
   apagamos video de fondo y animaciones */
@media (prefers-reduced-motion: reduce){
  .hero video{ display: none }
  .card img{ transition: none }
  .slot-inner.animating{ transition: none }
}