/* ───────── Mosaico de proyectos 3D y VFX: mismo lenguaje que Fotografía ─────────
   Usa la cabecera, el índice y el nombre fijo con fusión "diferencia" de fotografia.css.
   Cada proyecto: su vídeo a todo el ancho y, debajo, sus fichas en una fila sin huecos. */
.m3-projects { padding: 0 0 clamp(3rem, 8vw, 6rem); }
.m3-projects .ph-loading { padding: 4rem var(--pad-x); }
.m3-body { display: flex; flex-direction: column; }

/* Vídeo del proyecto: siempre a todo el ancho (los verticales se recortan aquí y se ven enteros al abrirlos) */
.m3-video {
  position: relative; display: block; width: 100%; height: min(56.25vw, 100svh);   /* 16:9 a todo el ancho; en pantallas muy anchas recorta arriba y abajo */
  padding: 0; border: 0; background: var(--bg2); cursor: pointer; overflow: hidden;
}
.m3-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.m3-pill {
  position: absolute; right: var(--pad-x); bottom: clamp(1rem, 3vw, 2rem); z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: var(--r-pill);
  background: rgba(20, 20, 22, .5); color: #fff; font: 600 .875rem/1 var(--font-body, inherit);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background .3s ease;
}
.m3-pill svg { width: .75rem; height: .75rem; fill: currentColor; }
@media (hover: hover) { .m3-video:hover .m3-pill { background: rgba(20, 20, 22, .75); } }
.m3-video:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* VFX: proyectos en filas justificadas (anchos y altos exactos los calcula 3d-mosaico.js).
   Cada vídeo conserva su proporción (--r = ancho/alto): nada se recorta. */
.m3-rows { display: flex; flex-wrap: wrap; }
.m3-rows > .m3-proj { flex: none; grid-template-rows: minmax(0, 1fr); }   /* fila = alto del proyecto (el vídeo cargado no la agranda) */
.m3-rows .m3-body { height: 100%; min-height: 0; }
.m3-videos { display: flex; height: 100%; }
.m3-videos .m3-video { flex: none; height: 100%; width: auto; aspect-ratio: var(--r, .5625); min-width: 0; min-height: 0; }

/* Mismo diseño en todos los proyectos: nombre arriba a la izquierda, del mismo tamaño en todos
   (--vt: el mayor que cabe en el hueco más estrecho), y botón + redondo a la derecha */
.m3-rows .ph-title { font-size: var(--vt, 2rem); padding: 0 3.5rem 0 1rem; hyphens: manual; }
.m3-rows .ph-title::before { height: 1rem; }
.m3-rows > .m3-proj > .m3-info { top: calc(4.25rem + 1rem); margin: 1rem .9rem 0 0; }
.m3-rows .m3-info-btn { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; }
.m3-rows .m3-info-btn span { display: none; }
.m3-rows .m3-info-btn svg { width: .85rem; height: .85rem; }

/* Etiqueta y botón de sonido de cada vídeo: iguales en todos (solo icono) */
.m3-label {
  position: absolute; left: .9rem; bottom: .95rem; z-index: 1; max-width: calc(100% - 4rem);
  color: #fff; font: 600 .8125rem/1.2 var(--font-body, inherit); text-align: left; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.m3-videos .m3-pill { right: .75rem; bottom: .75rem; padding: .6rem; }
.m3-videos .m3-pill .m3-pill-t { display: none; }

/* Fichas: una fila; flex-grow = ancho/alto de cada imagen → todas a la misma altura, sin recortar */
.m3-sheets { display: flex; align-items: flex-start; overflow: hidden; }
.m3-sheet {
  flex: 1 1 0; min-width: 0; margin: 0 -1px 0 0; padding: 0; border: 0; background: var(--bg2);
  cursor: zoom-in; overflow: hidden;
}
.m3-sheet img { display: block; width: calc(100% + 1px); height: auto; transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .25s ease; }
@media (hover: hover) { .m3-sheet:hover img { transform: scale(1.03); filter: brightness(1.05); } }
.m3-sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* entrada suave al acercarse */
.m3-video, .m3-sheets { opacity: 0; transition: opacity .9s ease; }
.m3-video.shown, .m3-sheets.shown { opacity: 1; }   /* no "in": esa clase ya limita el ancho en styles.css */

/* Burbuja "Info": arriba a la derecha de cada proyecto, fija como el nombre mientras pasan sus vídeos */
.m3-proj > .m3-info {
  grid-area: 1 / 1; justify-self: end; align-self: start; position: sticky; z-index: 3;
  top: calc(4.25rem + clamp(1rem, 2.5vw, 2rem)); margin: clamp(1rem, 2.5vw, 2rem) var(--pad-x) 0 0;
  width: 0; display: flex; flex-direction: column; align-items: flex-end;   /* ancho 0: no tapa clics fuera del botón */
}
.m3-info:empty { display: none; }
.m3-info-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .95rem; border: 0; border-radius: var(--r-pill);
  background: rgba(20, 20, 22, .55); color: #fff; font: 600 .8125rem/1 var(--font-body, inherit); cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background .25s ease;
}
.m3-info-btn svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m3-info.open .m3-info-btn svg { transform: rotate(45deg); }       /* + → × */
@media (hover: hover) { .m3-info-btn:hover { background: rgba(20, 20, 22, .78); } }
.m3-info-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.m3-info-panel {
  width: min(24rem, calc(100vw - 2 * var(--pad-x))); margin-top: .5rem; padding: 1.1rem 1.2rem;
  border-radius: 18px; background: rgba(20, 20, 22, .72); color: #f4f4f5;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transform-origin: top right;
  animation: m3-pop .45s cubic-bezier(.2, .8, .2, 1);
}
.m3-info-panel[hidden] { display: none; }
.m3-info-panel p { margin: 0; font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
.m3-info-panel a { color: #fff; }
.m3-info-panel .m3-info-client { margin-bottom: .45rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.m3-info-panel .m3-info-credits { margin-top: .9rem; font-size: .75rem; line-height: 1.5; opacity: .75; }
.m3-info-panel .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.m3-info-panel .chips span { padding: .28rem .65rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-pill); font-size: .75rem; color: #f4f4f5; background: none; opacity: 1; }
@keyframes m3-pop { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
/* el nombre deja sitio al botón para no pasar por debajo */
.m3-proj > .ph-title { padding-right: calc(var(--pad-x) + 6.5rem); }

/* Reproductor con sonido */
.m3-player { z-index: 330; }
.m3-player video {
  position: absolute; inset: 4.25rem 4.5rem 2rem; width: calc(100% - 9rem); height: calc(100% - 6.25rem);
  object-fit: contain; background: #000; border-radius: 10px;
}

@media (max-width: 760px) {
  .m3-rows > .m3-proj { width: 100% !important; height: auto !important; }
  .m3-videos { flex-direction: column; height: auto; }
  .m3-videos .m3-video { width: 100%; height: auto; }   /* cada vídeo con su propia proporción */
  .m3-sheets { flex-wrap: wrap; }
  .m3-sheet { flex-basis: 50%; }
  .m3-player video { inset: 4rem .5rem 2rem; width: calc(100% - 1rem); height: calc(100% - 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .m3-video, .m3-sheets { opacity: 1; transition: none; }
  .m3-info-panel { animation: none; }
}