/* ============================================================
   PEDROPABLOMORA.COM
   Todo el diseño del sitio sale de este archivo.
   Empezá por el bloque :root — casi todo cuelga de ahí.
   ============================================================ */

:root{
  --accent:  #ff1f6b;   /* magenta: indicador del carrusel y foco */
  --bg:      #f4f4f4;   /* fondo de la grilla */
  --fg:      #101010;   /* texto */
  --hero-bg: #0a0a0a;   /* fondo del hero */

  /* TAMAÑO DE LOS THUMBNAILS
     La grilla tiene 12 columnas fluidas. El tamaño de cada pieza es
     cuántas columnas ocupa, no un ancho en píxeles: así crece con la
     pantalla en vez de agregar una columna más.

       --span-h  ancho de las piezas horizontales
       --span-v  ancho de las verticales

     6 y 3  →  2 horizontales por fila, o 4 verticales   (actual)
     4 y 2  →  3 horizontales por fila, o 6 verticales   (más chico)
     12 y 6 →  1 horizontal por fila, o 2 verticales     (enorme)

     Usá siempre números que dividan 12 y que estén en relación 2:1,
     si no la grilla queda con huecos. */
  --cols:    12;
  --span-h:  6;
  --span-v:  3;

  --gutter:  1px;       /* separación entre piezas */
  --pad:     16px;      /* margen lateral */
  --row:     4px;       /* unidad de fila del masonry. No tocar. */
  --scrim:   .10;       /* velo del rollover. Subilo a .25 si tus piezas son claras. */

  --logo-w:  180px;     /* ancho del logo arriba a la izquierda */
  --font:    "Wix Madefor Text", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0; font-family:var(--font); color:var(--fg);
  background:var(--hero-bg); -webkit-font-smoothing:antialiased;
}
img,video{ display:block; width:100%; height:auto }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* ============================================================
   LOGO — fijo arriba a la izquierda, siempre encima de todo
   El SVG entra como máscara, así que el color lo maneja el CSS:
   blanco mientras estás sobre el hero, negro al bajar a la grilla.
   Por eso el archivo tiene que ser monocromo.
   ============================================================ */
.brand{
  position:fixed; top:var(--pad); left:var(--pad); z-index:10;
  width:var(--logo-w); height:24px;
  background:currentColor; color:#fff;
  -webkit-mask:url("/assets/logo.svg") no-repeat left center;
          mask:url("/assets/logo.svg") no-repeat left center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:color .3s ease;
}
.brand.is-dark{ color:var(--fg) }
.brand:focus-visible{ outline:2px solid var(--accent); outline-offset:6px }

/* ============================================================
   HERO FIJO + CARRUSEL
   ============================================================ */
.hero{
  position:fixed; inset:0; z-index:0; height:100svh;
  background:var(--hero-bg); overflow:hidden;
}
.reel{
  display:flex; height:100%;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.reel::-webkit-scrollbar{ display:none }
.reel:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.slide{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  position:relative; margin:0;
}
.slide > .media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

.reel-nav{
  position:absolute; z-index:2; left:var(--pad); bottom:var(--pad);
  display:flex; gap:6px;
}
.reel-nav button{
  width:34px; height:2px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .25s;
}
.reel-nav button[aria-current="true"]{ background:var(--accent) }
.reel-nav button:focus-visible{ outline:2px solid #fff; outline-offset:4px }
@media (hover:none){
  .reel-nav button{ position:relative }
  .reel-nav button::after{ content:""; position:absolute; inset:-14px -4px }
}

/* ============================================================
   GRILLA — pasa por encima del hero
   ============================================================ */
.site-main{
  position:relative; z-index:1; margin-top:100svh;
  background:var(--bg); padding:var(--gutter) var(--pad) 0;
}

.work{
  display:grid;
  grid-template-columns:repeat(var(--cols), 1fr);
  grid-auto-rows:var(--row);
  grid-auto-flow:dense;   /* rellena huecos. Sacalo si querés orden estricto. */
  gap:var(--gutter);
  max-width:var(--maxw, none);   /* poné un valor si no querés que crezca infinito */
  margin:0 auto;
}
.work-item{
  grid-row-end:span 60;   /* valor de arranque; el JS lo pisa */
  position:relative; display:block; overflow:hidden;
  background:#e2e2e2; text-decoration:none; color:inherit;
  content-visibility:auto;
}
.work-item[data-o="h"]{ grid-column:span var(--span-h) }
.work-item[data-o="v"]{ grid-column:span var(--span-v) }
.work-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.work-item img,
.work-item video{ position:absolute; inset:0; height:100%; object-fit:cover }
.work-item .poster{ z-index:1; transition:opacity .4s ease }
@media (hover:hover){ .work-item:hover .poster{ opacity:0 } }

/* rollover: velo al 10% + título, sin categoría */
.work-item .title{
  position:absolute; inset:0; z-index:2;
  display:grid; align-content:end; padding:18px;
  background:rgba(0,0,0,var(--scrim));
  color:#fff; font-size:1rem; font-weight:500; letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  opacity:0; transition:opacity .28s ease;
}
@media (hover:hover){
  .work-item:hover .title, .work-item:focus-visible .title{ opacity:1 }
}
@media (hover:none){ .work-item .title{ opacity:1 } }

/* ============================================================
   FICHA DE PROYECTO
   ============================================================ */
.project{
  position:relative; z-index:1; background:var(--bg);
  margin-top:0; padding:120px 0 0;
}
.project .page{ max-width:62ch; margin:0 auto; padding:0 var(--pad) 48px }
.project h1{ font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.02em; margin:0 0 .4em }
.project p{ line-height:1.6 }
.project-media{ margin:0 0 var(--gutter) }
.project-nav{
  display:flex; justify-content:space-between; gap:24px;
  padding:64px var(--pad); font-size:.9rem;
}
.project-nav a{ color:inherit }

/* ============================================================
   PIE
   ============================================================ */
.site-footer{
  position:relative; z-index:1; background:var(--bg);
  padding:64px var(--pad) 40px; font-size:.82rem; line-height:1.6;
}
.site-footer a{ color:inherit }

/* ============================================================
   RESPONSIVE
   Escritorio        →  2 horizontales por fila, 4 verticales
   Tablet horizontal →  1 horizontal por fila, 2 verticales
   Teléfono          →  todo a una columna, a sangre
   ============================================================ */
@media (max-width:1024px){
  :root{ --cols:6; --span-h:6; --span-v:3; --pad:14px; --logo-w:150px }
}
@media (max-width:600px) {
  :root{ --cols:1; --span-h:1; --span-v:1; --pad:12px; --logo-w:130px }
  .site-main{ padding-left:0; padding-right:0 }
  .work-item .title{ font-size:.9rem; padding:14px }
  .site-footer{ padding-left:12px; padding-right:12px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important }
}