/* ============================================================
   Portadas de álbum — mosaico editorial, no cuadrícula uniforme.
   Seis columnas y un patrón de 5 piezas que se repite: una pieza ancha, dos altas,
   dos medianas. Ningún álbum queda del mismo tamaño que su vecino, y el ritmo se
   sostiene con cualquier número de álbumes (el patrón cicla con nth-child(5n+x)).
   ============================================================ */
/* El tamaño se mide en FILAS de una altura base, no en aspect-ratio por pieza: con
   aspect-ratio, dos piezas de distinto ancho en la misma fila dan distinta altura y
   el mosaico se llena de huecos negros. Contando filas, el ciclo tesela exacto.

   Ciclo de 5 piezas sobre 6 columnas — 6x3 arriba, 6x2 abajo, cero huecos:
     A 4x3 (ancha)  B 2x3 (alta)
     C 2x2   D 2x2   E 2x2                                            */
.portafolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(84px, 10.5vw, 148px);
  gap: var(--space-4);
}
.portafolio-album { grid-column: span 2; grid-row: span 2; }
.portafolio-album:nth-child(5n + 1) { grid-column: span 4; grid-row: span 3; }
.portafolio-album:nth-child(5n + 2) { grid-column: span 2; grid-row: span 3; }

/* Tablet: 4 columnas. Ciclo de 3 — A 4x3, luego pares 2x2. */
@media (max-width: 900px) {
  .portafolio-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(80px, 12vw, 130px); }
  .portafolio-album,
  .portafolio-album:nth-child(5n + 2) { grid-column: span 2; grid-row: span 2; }
  .portafolio-album:nth-child(5n + 1) { grid-column: span 4; grid-row: span 3; }
}
/* Móvil: 2 columnas. La pieza que abre ciclo va a lo ancho, el resto en pares. */
@media (max-width: 560px) {
  .portafolio-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(72px, 21vw, 110px); gap: var(--space-3); }
  .portafolio-album,
  .portafolio-album:nth-child(5n + 2) { grid-column: span 1; grid-row: span 2; }
  .portafolio-album:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
}

/* El monograma apagado va de fondo del ÁLBUM, no en un div aparte: así cubre los dos
   casos con el mismo código — álbum todavía sin fotos, y portada que existe pero no
   carga (hoy hay 3 con 404 en storage). Sin esto quedan rectángulos negros mudos. */
.portafolio-album {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background:
    url('/shared/img/favicon-512.png') no-repeat center / 34% auto,
    linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-sunken));
}
.portafolio-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}
.portafolio-album:hover img { transform: scale(1.07); filter: saturate(1.15); }
/* El fondo del álbum ya trae el monograma; este div solo ocupa la caja. */
.portafolio-album-sinfoto { width: 100%; height: 100%; }

/* El degradado es del ÁLBUM, no de la etiqueta. Iba en la etiqueta, y como al hover
   la etiqueta sube 4px se llevaba su sombra con ella y destapaba una franja de foto
   cruda contra el borde inferior. Anclado aquí, el texto se mueve y la sombra no. */
.portafolio-album::after {
  content: '';
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
}
.portafolio-album-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6) var(--space-4) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: transform var(--duration-base) var(--ease-out);
}
.portafolio-album-label::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--rule-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.portafolio-album:hover .portafolio-album-label { transform: translateY(-4px); }
.portafolio-album:hover .portafolio-album-label::after { transform: scaleX(1); }

/* ============================================================
   Fotos dentro de un álbum — mampostería por columnas.
   Antes todas iban recortadas a 1:1: un tatuaje de antebrazo y uno de espalda
   acababan con la misma silueta y la página entera se leía como una plantilla.
   Aquí cada foto conserva su proporción real y las columnas se acomodan solas.
   ============================================================ */
.portafolio-fotos-masonry {
  columns: 4 240px;
  column-gap: var(--space-4);
}
@media (max-width: 900px) { .portafolio-fotos-masonry { columns: 3 200px; } }
@media (max-width: 560px) { .portafolio-fotos-masonry { columns: 2 140px; column-gap: var(--space-3); } }

.portafolio-foto-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  height: auto;
  /* Sin esto una foto se parte entre dos columnas a mitad de imagen. */
  break-inside: avoid;
  margin-bottom: var(--space-4);
}
@media (max-width: 560px) { .portafolio-foto-btn { margin-bottom: var(--space-3); } }
.portafolio-foto-btn img {
  width: 100%;
  height: auto;          /* proporción real de la foto, sin recorte */
  display: block;
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
}
.portafolio-foto-btn:hover img { transform: scale(1.03); filter: saturate(1.12); }

.portafolio-card-album { display: block; text-decoration: none; }

/* ============================================================
   Visor de la galería. La foto va sola sobre el fondo oscuro —sin panel, sin borde y sin
   padding— para que lo único que se vea sea el trabajo. Los controles flotan sobre el
   borde de la pantalla, que es donde el ojo los busca cuando quiere pasar de foto.
   ============================================================ */
.portafolio-visor-foto {
  display: block;
  max-width: min(94vw, 1500px);
  max-height: 86vh;
  max-height: 86dvh;
  object-fit: contain;
}
.portafolio-visor-boton {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(232, 201, 109, .38);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  backdrop-filter: blur(8px);
  color: var(--color-gold-bright);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.portafolio-visor-boton:hover,
.portafolio-visor-boton:focus-visible {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg);
}
.portafolio-visor-cerrar { top: var(--space-4); right: var(--space-4); width: 46px; height: 46px; }
.portafolio-visor-flecha {
  top: 50%;
  width: 58px;
  height: 58px;
  font-size: var(--text-xl);
  /* La regla global de `button:hover` mete translateY(-2px) y la flecha perdía el
     centrado: se vuelve a fijar en los tres estados. */
  transform: translateY(-50%);
}
.portafolio-visor-flecha:hover,
.portafolio-visor-flecha:focus-visible,
.portafolio-visor-flecha:active { transform: translateY(-50%); }
.portafolio-visor-flecha--prev { left: var(--space-5); }
.portafolio-visor-flecha--next { right: var(--space-5); }
.portafolio-visor-contador {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  padding: 4px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  /* En el teléfono la foto manda: los controles se achican y se van casi al borde. */
  .portafolio-visor-foto { max-width: 96vw; max-height: 78vh; max-height: 78dvh; }
  .portafolio-visor-cerrar { top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; }
  .portafolio-visor-flecha { width: 46px; height: 46px; font-size: var(--text-lg); }
  .portafolio-visor-flecha--prev { left: var(--space-2); }
  .portafolio-visor-flecha--next { right: var(--space-2); }
  .portafolio-visor-contador { bottom: var(--space-3); }
}

/* La etiqueta Before / After de los pares (cover-ups), sobre la foto en la rejilla. */
.portafolio-foto-btn { position: relative; }
.portafolio-foto-etiqueta {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  color: var(--color-gold);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Álbum de pares (cover-ups): dos columnas y en orden de lectura, para que cada "antes"
   quede al lado de su "después". Las dos fotos se recortan igual (4:5) para que la
   comparación sea de verdad. */
.portafolio-fotos-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.portafolio-fotos-pares .portafolio-foto-btn img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 560px) {
  .portafolio-fotos-pares { gap: var(--space-3); }
}
/* Carga del álbum: huecos con forma de foto mientras llegan, y entrada escalonada por posición
   (en orden de lectura, no todas de golpe). Solo opacidad y transform: corren en el compositor. */
.portafolio-esqueleto {
  display: block;
  break-inside: avoid;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-sunken));
  animation: portafolio-pulso 1.4s ease-in-out infinite;
}
.portafolio-esqueleto:nth-child(3n + 2) { aspect-ratio: 1; }
.portafolio-esqueleto:nth-child(3n) { aspect-ratio: 3 / 4; }
@media (max-width: 560px) { .portafolio-esqueleto { margin-bottom: var(--space-3); } }
@keyframes portafolio-pulso { 50% { opacity: .55; } }
/* El `to` es explícito: la tarjeta nace con opacity:0, y un `to` implícito animaría de 0 a 0 (quedaba invisible). */
@keyframes portafolio-foto-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Nacen ocultas y la entrada arranca cuando portafolio.js marca la rejilla como .listo (ya maquetada). */
.portafolio-foto-entra { opacity: 0; }
.listo .portafolio-foto-entra { animation: portafolio-foto-entra .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .portafolio-esqueleto { animation: none; } .portafolio-foto-entra { opacity: 1; } .listo .portafolio-foto-entra { animation: none; } }

/* Apertura directa en un álbum (?album=…): el script del <head> pone la clase antes del primer
   pintado. El listado no llega a verse, y el hueco del álbum ya tiene altura y pulso. */
.vista-album-directa #vista-albumes { display: none; }
.vista-album-directa #vista-album[hidden] { display: block; }
.vista-album-directa #album-fotos-grid:empty::before {
  content: '';
  display: block;
  height: 70vh;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-sunken));
  animation: portafolio-pulso 1.4s ease-in-out infinite;
}