/* ============================================================
   interface.css — BASERRI FILMS, layout responsive real
   Esqueleto: CSS Grid (header / módulos / footer). Los módulos
   son columnas flex; las medidas del INTERFACE_MASTER_SPEC
   (canvas 2114×1186) quedan solo como referencia visual de
   escritorio, expresadas con fr / clamp() / aspect-ratio.
   position:absolute sobrevive únicamente dentro de componentes
   que lo necesitan: menús flotantes, aguja, cinta, lightboxes.
   Breakpoints: ≥1600 desktop grande · 1200–1599 desktop mediano
   · 821–1199 tablet (nav lateral + bloques) · ≤820 móvil.
   ============================================================ */

/* ---------- 02. Paleta base confirmada ---------- */
:root {
  --header-bg: #050506;
  --footer-bg: #050506;
  --module-1-bg: #191A19;
  --module-2-bg: #191A19;
  --module-3-bg: #101010;
  --black: #000000;
  --grey-structural: #3C3C3C;  /* líneas estructurales unificadas */
  --grey-visible: #787878;     /* solo las dos líneas del Módulo 3 */
  --trajectory-bg: #101010;
  --laurels-bg: #252525;       /* área de laureles */

  /* Acento de la interfaz — muestreado de EINTERFACE-HERO.png */
  --accent: #EB712F;
  --text-white: #E8E8E8;
  --text-grey: #8A8A8A;
  --panel-bg: #1A1A1A;

  /* Aire lateral interno de los módulos 2 y 3 (27–32px en el spec) */
  --pad-x: clamp(16px, 1.4vw, 32px);
  --pad-x3: clamp(14px, 1.3vw, 27px);
}

/* Tipografía de marca: Puente Demi para los momentos de identidad
   (nombre en el header, títulos de banda). Inter queda para la UI. */
@font-face {
  font-family: 'Puente';
  src: url('assets/fonts/puente-demi.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
}

/* Foco visible para navegación por teclado (no afecta el uso con mouse) */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Escritorio: interfaz tipo app que llena el viewport, sin scroll.
   (Tablet y móvil reabren el scroll en sus media queries.) */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000000;
}

/* ---------- 01. Esqueleto: CSS Grid ----------
   Filas: header / separador / módulos / separador / footer.
   Columnas: módulo 1 / sep / módulo 2 / sep / módulo 3, con las
   proporciones del diseño original (359 : 591 : 1158) en fr.
   Los tres módulos crecen y se reducen de forma coordinada.   */
#canvas {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 69px 3px minmax(0, 1fr) 3px 70px;
  grid-template-columns:
    minmax(250px, 359fr) 3px
    minmax(370px, 591fr) 3px
    minmax(560px, 1158fr);
  background: var(--black);
  overflow: hidden;
}

#header            { grid-area: 1 / 1 / 2 / -1; }
.sep-below-header  { grid-area: 2 / 1 / 3 / -1; }
#module-1          { grid-area: 3 / 1 / 4 / 2; }
#sep-v-1           { grid-area: 3 / 2 / 4 / 3; }
#module-2          { grid-area: 3 / 3 / 4 / 4; }
#sep-v-2           { grid-area: 3 / 4 / 4 / 5; }
#module-3          { grid-area: 3 / 5 / 4 / 6; }
.sep-above-footer  { grid-area: 4 / 1 / 5 / -1; }
#footer            { grid-area: 5 / 1 / 6 / -1; }

/* Separadores estructurales (celdas del grid) */
.sep-h { background: var(--grey-structural); }
.sep-v { background: var(--black); }

/* Los separadores de banda ahora son el border-bottom de cada banda */
.band-sep { display: none; }

/* ---------- 03. Header ---------- */
#header {
  background: var(--header-bg);
  display: flex;
  align-items: center;
  padding: 0 clamp(14px, 1.4vw, 28px);
  /* Por encima de los módulos: el buscador despliega sugerencias debajo */
  position: relative;
  z-index: 50;
}

#header-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;   /* el logo vuelve al HOME */
}

/* ---------- Controles de la derecha del header ---------- */

#header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 26px);
}

.hdr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  transition: color 0.25s ease;
}

.hdr-btn:hover { color: var(--accent); }
.hdr-btn.is-active { color: var(--accent); }
.hdr-btn svg { width: 22px; height: 22px; }

.hdr-sep {
  width: 1px;
  height: 24px;
  background: var(--grey-structural);
}

/* Buscador: la caja se expande a la izquierda de la lupa */
#hdr-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

#hdr-search-input {
  width: 0;
  opacity: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--grey-structural);
  background: transparent;
  color: var(--text-white);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
}

#hdr-search-input::placeholder { color: var(--text-grey); }

#hdr-search.is-open #hdr-search-input {
  width: min(200px, 24vw);
  opacity: 1;
  padding: 4px 2px;
}

#hdr-search-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 32px;
  min-width: 210px;
  background: var(--panel-bg);
  border: 1px solid var(--grey-structural);
  padding: 5px 0;
  display: none;
  flex-direction: column;
  z-index: 60;
}

#hdr-search-menu.has-results { display: flex; }

.search-item {
  display: block;
  text-align: left;
  padding: 9px 20px;
  color: var(--text-white);
  font-size: 13px;
  letter-spacing: 1.5px;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.search-item:hover { background: #222222; color: var(--accent); }

.search-item .search-cat {
  color: var(--text-grey);
  font-size: 11px;
  margin-left: 10px;
}

/* Idioma ES | EN (la traducción del contenido al EN sigue pendiente:
   TODO en interface-m3.js) */
#hdr-lang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-opt {
  color: var(--text-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: color 0.25s ease;
}

.lang-opt:hover { color: var(--accent); }
.lang-opt.is-active { color: var(--accent); }

.hdr-lang-sep { color: var(--grey-structural); font-size: 13px; }

/* Reloj: hora local real arriba, fecha abajo */
#hdr-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

#hdr-time {
  color: var(--text-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

#hdr-date {
  color: var(--text-grey);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}

/* Mismo tratamiento tipográfico que las etiquetas del Módulo 3 */
#header-name {
  color: var(--text-white);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ---------- Footer ---------- */
#footer {
  background: var(--footer-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 2vw, 40px);
}

#footer-copy {
  color: var(--text-grey);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
}

#footer-social {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.6vw, 30px);
}

/* ---------- Iconos 3D (SVG + renders de Blender) ---------- */
.icon3d {
  --w: 34px;
  width: var(--w);
  height: var(--w);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}

.icon3d:hover {
  background-position: 0 0;
  background-size: calc(var(--w) * 48) var(--w);
  animation: icon3d-spin 1.6s steps(48) infinite;
}

@keyframes icon3d-spin {
  to { background-position: calc(var(--w) * -48) 0; }
}

.icon-mail      { --w: 40px; background-image: url('assets/icons/icono-mail.svg'); background-size: 94.04% 94.27%; }
.icon-whatsapp  { background-image: url('assets/icons/icono-whatssap.svg'); background-size: 93.60% 94.34%; }
.icon-instagram { background-image: url('assets/icons/icono-instagram.svg'); background-size: 94.04% 94.06%; }
.icon-imdb      { --w: 52px; background-image: url('assets/icons/icono-imdb.svg'); background-size: 94.04% 48.94%; }
.icon-logorafa {
  --w: 44px;
  background-image: url('assets/icons/logo-rafa-acento.svg');
  background-size: 53.56% 94.34%;
}

.icon-mail:hover      { background-image: url('assets/icons/strip-mail.png'); }
.icon-whatsapp:hover  { background-image: url('assets/icons/strip-whatsapp.png'); }
.icon-instagram:hover { background-image: url('assets/icons/strip-instagram.png'); }
.icon-imdb:hover      { background-image: url('assets/icons/strip-imdb.png'); }
.icon-logorafa:hover { background-image: url('assets/icons/strip-logorafa.png'); }

.icon3d.intro-spin {
  background-position: 0 0;
  background-size: calc(var(--w) * 48) var(--w);
  animation: icon3d-spin 1.6s steps(48) 1;
}

.icon-mail.intro-spin      { background-image: url('assets/icons/strip-mail.png'); }
.icon-whatsapp.intro-spin  { background-image: url('assets/icons/strip-whatsapp.png'); }
.icon-instagram.intro-spin { background-image: url('assets/icons/strip-instagram.png'); }
.icon-imdb.intro-spin      { background-image: url('assets/icons/strip-imdb.png'); }

/* Velo mientras interface-intro.js fija los estados iniciales */
html.intro-pending #canvas { visibility: hidden; }

/* ---------- 05. Bandas superiores de los módulos ---------- */
.band {
  flex: 0 0 62px;      /* 59 de banda + 3 del separador (border) */
  height: 62px;
  border-bottom: 3px solid var(--black);
  display: flex;
  align-items: center;
}

/* ---------- 06. Módulo 1 — Panel izquierdo ---------- */
#module-1 {
  background: var(--module-1-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;   /* ancla del desplegable de categorías */
}

/* Pestaña PROYECTOS en la banda superior */
#m1-projects-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 0 var(--pad-x);
  color: var(--text-white);
  transition: color 0.25s ease;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.5px;
}

#m1-projects-tab .tab-chevron {
  width: 12px;
  height: 8px;
  transition: transform 0.2s ease;
}

#m1-projects-tab.is-open { color: var(--accent); }
#m1-projects-tab.is-open .tab-chevron { transform: rotate(180deg); }

/* Menú desplegable de categorías (flotante sobre la lista) */
#m1-dropdown {
  position: absolute;
  left: 24px;
  top: 66px;          /* justo bajo el separador de banda */
  width: 205px;
  background: var(--panel-bg);
  border: 1px solid var(--grey-structural);
  z-index: 20;
  display: none;
  flex-direction: column;
  padding: 6px 0;
}

#m1-dropdown.is-open { display: flex; }

.dropdown-item {
  display: block;
  text-align: left;
  padding: 10px 22px;
  color: var(--text-white);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  transition: color 0.25s ease;
}

.dropdown-item:hover {
  background: #222222;
  color: var(--accent);
}

.dropdown-item.is-active { color: var(--accent); }

.dropdown-sep {
  height: 1px;
  margin: 5px 14px;
  background: var(--grey-structural);
}

/* Lista de obras: ocupa el alto restante, scrolleable */
#m1-works-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 0;
  scrollbar-width: thin;
  scrollbar-color: #6E6E6E transparent;
}

#m1-works-list::-webkit-scrollbar { width: 6px; }
#m1-works-list::-webkit-scrollbar-track { background: transparent; }
#m1-works-list::-webkit-scrollbar-thumb {
  background: #6E6E6E;
  border-radius: 3px;
}

/* Item de obra */
.work-item {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.1vw, 22px);
  margin: 4px 16px;
  padding: 10px 12px;
  border: 1px solid transparent;
  cursor: pointer;
}

.work-item:hover { background: #1E1F1E; }

.work-item.is-selected {
  background: #1E1F1E;
  border-color: var(--accent);
}

/* Recuadro rectangular con proporción de afiche (~0.70): el póster
   se ve entero, sin recortes ni zoom */
.work-thumb {
  width: 74px;
  height: 106px;
  object-fit: contain;
  background: #000;
  flex-shrink: 0;
  display: block;
}

/* Logo en el recuadro HOME de la lista: completo y con aire */
.work-thumb--logo {
  object-fit: contain;
  padding: 10px;
}

/* Placeholder provisional para obras sin portada */
.work-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--grey-structural);
  color: var(--text-grey);
  font-size: 26px;
  font-weight: 300;
}

.work-title {
  color: var(--text-white);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 8px;
  transition: color 0.25s ease;
}

.work-item:hover .work-title { color: var(--accent); }

.work-meta {
  color: var(--text-grey);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Línea gris sobre el contador */
#m1-line-above-counter {
  flex: 0 0 2px;
  background: var(--grey-structural);
}

/* Contador inferior */
#m1-counter {
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: var(--text-grey);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
}

/* ---------- 07. Módulo 2 — Panel central ---------- */
#module-2 {
  background: var(--module-2-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Título de la banda superior */
#m2-band-title {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--pad-x);
  color: var(--text-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.5px;
}

/* 07.1 Poster de la obra seleccionada (196×282 de referencia).
   Altura FIJA por viewport (no flexible): si el recuadro cediera
   según la sinopsis de cada obra, el hover ×2.9 partiría de bases
   distintas y los pósters se agrandarían diferente entre sí. Con
   base constante, todos crecen igual. */
#m2-poster {
  position: relative;
  flex: 0 0 auto;
  height: clamp(180px, 26vh, 282px);
  aspect-ratio: 196 / 282;
  margin: clamp(10px, 2.4vh, 34px) auto 0;
  overflow: visible;
}

/* La imagen se maqueta al triple y se reduce con transform: así el
   hover ×2.9 estira un raster grande y no pierde nitidez. */
#m2-poster-img {
  width: 300%;
  height: 300%;
  object-fit: cover;
  display: block;
  transform: scale(0.333333);
  transform-origin: 0 0;
}

/* Hover sostenido sobre el póster — efecto proyector.
   !important: la intro (GSAP) deja transform inline en #m2-poster. */
#m2-poster {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#m2-poster:hover {
  transform: scale(2.9) !important;
  transform-origin: 50% 0 !important;
  z-index: 40;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.72);
}

/* El resto de la ficha se difumina mientras el póster manda */
#m2-roles,
#m2-grey-sep,
#m2-synopsis,
#m2-trajectory-box {
  transition: filter 0.35s ease;
}

#m2-poster:hover ~ #m2-roles,
#m2-poster:hover ~ #m2-grey-sep,
#m2-poster:hover ~ #m2-synopsis,
#m2-poster:hover ~ #m2-cta,
#m2-poster:hover ~ #m2-trajectory-box {
  filter: blur(4px) brightness(0.55) saturate(0.75);
}

/* Logo del HOME como póster: completo, sin sombra rectangular */
#m2-poster-img.is-logo { object-fit: contain; }
#m2-poster:has(.is-logo) { cursor: default; }
#m2-poster:has(.is-logo):hover { box-shadow: none; }

/* Placeholder provisional para obras sin poster */
#m2-poster-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px dashed var(--grey-structural);
  color: var(--text-grey);
  font-size: 52px;
  font-weight: 300;
}

#m2-poster-empty[hidden],
#m2-poster-img[hidden] { display: none; }

/* Roles / participación: columna centrada bajo el póster.
   Sin contenido (guiones) colapsa y la sinopsis sube sola. */
#m2-roles {
  flex: 0 0 auto;
  margin: 0 var(--pad-x);
  min-height: 0;
  padding: clamp(8px, 1.4vh, 24px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#m2-roles:empty { padding: clamp(6px, 1.2vh, 14px) 0; }

#m2-roles .roles-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

#m2-roles .role {
  color: var(--text-white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.5px;
}

#m2-roles .role-sep {
  color: var(--text-grey);
  font-size: 14px;
  font-weight: 300;
}

/* 07.2 Separador gris interno */
#m2-grey-sep {
  flex: 0 0 2px;
  margin: 0 var(--pad-x);
  background: var(--grey-structural);
}

/* Sinopsis: bajo el separador; interface.js le ajusta cuerpo/altura */
#m2-synopsis {
  flex: 0 0 auto;
  margin: 10px var(--pad-x) 14px;
  height: clamp(110px, 15vh, 152px);
  overflow: hidden;
  color: #C9C9C9;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.3px;
  text-align: justify;
}

/* 07.25 Franja CTA (obras con cta en el catálogo): el mismo borde
   naranja del item seleccionado del módulo 1, fondo negro y texto
   de consola — una pieza más del panel, entre sinopsis y FORMATO */
#m2-cta {
  flex: 0 0 auto;
  margin: 0 clamp(14px, 1.3vw, 30px) 14px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: filter 0.35s ease;
}

#m2-cta[hidden] { display: none; }

#m2-cta-label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  white-space: nowrap;
}

#m2-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Iconos 3D (mail / whatsapp) dentro del CTA: el mismo giro que el
   footer, algo más chicos para caber en el recuadro naranja.
   Sustituyen a los antiguos enlaces de texto EMAIL | WHATSAPP */
#m2-cta-actions .icon3d { --w: 28px; }
#m2-cta-actions .icon-mail { --w: 32px; }

/* Enlaces de texto del CTA (legado; se conservan por compatibilidad) */
.m2-cta-link {
  color: var(--text-white);
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.m2-cta-link:hover { color: var(--accent); }

/* Línea vertical entre los iconos del CTA (mail / whatsapp), en el
   lugar donde antes iba el | de los enlaces de texto */
.m2-cta-sep {
  width: 1px;
  height: 22px;
  background: var(--grey-structural);
}

/* 07.3 Caja de trayectoria: toma el alto restante del módulo.
   Si la sinopsis crece (JS), la caja cede altura sola (flex). */
#m2-trajectory-box {
  flex: 1 1 auto;
  min-height: 140px;
  margin: 0 clamp(14px, 1.3vw, 30px) 17px;
  border: 2px solid var(--black);
  background: var(--trajectory-bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Agrandada: overlay fijo centrado sobre toda la interfaz, con velo.
   position:fixed — es un componente superpuesto, como un lightbox. */
#m2-trajectory-box.is-expanded {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(62px, 8vh, 96px);
  bottom: clamp(24px, 6vh, 62px);
  width: min(950px, 92vw);
  margin: 0;
  z-index: 60;
  border-color: var(--grey-structural);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.7);
}

/* Velo de foco: cubre todo el viewport por detrás de la caja */
#m2-trajectory-box.is-expanded::before {
  content: '';
  position: absolute;
  inset: -3000px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: -1;
}

/* Botón agrandar/achicar, esquina superior derecha de la zona de título */
#m2-traj-expand {
  position: absolute;
  top: 0;
  right: 0;
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-grey);
  transition: color 0.25s ease;
  z-index: 2;
}

#m2-traj-expand:hover { color: var(--accent); }
#m2-traj-expand svg { width: 16px; height: 16px; }

#m2-traj-expand .ico-contract { display: none; }
#m2-trajectory-box.is-expanded #m2-traj-expand .ico-expand { display: none; }
#m2-trajectory-box.is-expanded #m2-traj-expand .ico-contract { display: block; }

/* La caja es el ancla del botón */
#m2-trajectory-box { position: relative; }
#m2-trajectory-box.is-expanded { position: fixed; }

/* Zona de título */
#m2-trajectory-title {
  flex: 0 0 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
}

/* Separador bajo el título */
#m2-trajectory-title-sep {
  flex: 0 0 2px;
  background: var(--black);
}

/* Área de laureles: el resto de la caja, scrolleable */
#m2-awards {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--laurels-bg);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: #6E6E6E transparent;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}

#m2-awards::-webkit-scrollbar { width: 6px; }
#m2-awards::-webkit-scrollbar-track { background: transparent; }
#m2-awards::-webkit-scrollbar-thumb {
  background: #6E6E6E;
  border-radius: 3px;
}

/* Tarjeta-imagen: laureles, logos y badges pre-diseñados (571×380) */
.award-img {
  flex: 0 0 calc(50% - 6px);
  min-width: 0;
  background: var(--trajectory-bg);
  border-radius: 10px;
}

.award-img img {
  width: 100%;
  height: auto;
  display: block;
}

a.award-img {
  display: block;
  transition: filter 0.25s ease;
}

a.award-img:hover { filter: brightness(1.25); }

/* Tarjeta a todo el ancho: hojas de guion */
.award-img--full { flex-basis: 100%; }

.award-img--full img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.award-img--zoom { cursor: zoom-in; }

/* Hoja de guion en texto real (todo en em: escala con la caja) */
.award-sheet {
  flex-basis: 100%;
  background: #F1F1ED;
  color: #141414;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 2.6em 4.2em 3.4em 5.2em;
  border-radius: 3px;
  transition: font-size 0.45s ease;
}

#m2-trajectory-box.is-expanded .award-sheet { font-size: 20px; }

.award-sheet p { margin: 0 0 1em; }

.award-sheet .sh-title {
  text-align: center;
  text-decoration: underline;
  letter-spacing: 0.15em;
  margin-bottom: 3em;
}

.award-sheet .sh-head {
  position: relative;
  margin-top: 1.8em;
}

.award-sheet .sh-num {
  position: absolute;
  left: -3.4em;
  top: 0;
}

.award-sheet .sh-num--r {
  left: auto;
  right: -3.2em;
}

.award-sheet .sh-block { margin-bottom: 1em; }
.award-sheet .sh-block p { margin: 0; }
.award-sheet .sh-char { margin-left: 24%; }
.award-sheet .sh-dial { margin-left: 12%; margin-right: 8%; }

.award-sheet .sh-right {
  text-align: right;
  margin-top: 2em;
}

/* Encabezado de sección en trayectoria (FORMACIÓN / EXPERIENCIA) */
.award-heading {
  flex-basis: 100%;
  text-align: center;
  color: #B4B4B4;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--grey-visible);
  margin-bottom: 2px;
}

/* Aire entre secciones: EXPERIENCIA separada del bloque de FORMACIÓN */
.award-heading:not(:first-child) { margin-top: 28px; }

/* Recuadro de texto con reborde redondeado (CV, formato de seminarios) */
.award-box {
  flex-basis: 100%;
  background: var(--trajectory-bg);
  border: 2px solid #8C8C8C;
  border-radius: 14px;
  padding: 13px 18px 15px;
}

.award-box-period {
  color: #9A9A9A;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 2px;
}

.award-box-title {
  color: #E6E6E6;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.award-box-line {
  color: #A6A6A6;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Tarjeta de texto: avisos */
.award-note {
  flex-basis: 100%;
  padding: 13px 18px;
  background: var(--trajectory-bg);
  border: 1px solid var(--grey-structural);
  color: #AFAFAF;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.8px;
  line-height: 1.55;
  text-align: center;
}

/* ---------- 08. Módulo 3 — Panel derecho ---------- */
#module-3 {
  background: var(--module-3-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;   /* ancla de las flechas del carrusel */
}

/* ---------- 08.5 Banda del módulo 3: etiquetas + herramientas ---------- */
#m3-band {
  justify-content: space-between;
  padding: 0 var(--pad-x3);
  gap: 16px;
  /* Por encima del visor: sus menús cuelgan sobre la imagen */
  position: relative;
  z-index: 40;
}

#m3-tags {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  font-size: clamp(12px, 0.75vw, 15px);
  font-weight: 500;
  letter-spacing: clamp(1px, 0.1vw, 2px);
  color: var(--text-white);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

#m3-tags .tag-hl  { color: var(--accent); }
#m3-tags .tag-sep { color: var(--grey-structural); font-weight: 400; }

#m3-tools {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 30px);
  flex-shrink: 0;
}

.tool-btn,
#m3-zoom-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-white);
  transition: color 0.25s ease;
}

.tool-btn:hover,
#m3-zoom-btn:hover { color: var(--accent); }

.tool-btn.is-active { color: var(--accent); }

.tool-btn svg { width: 22px; height: 22px; }

#m3-zoom { position: relative; }

#m3-zoom-btn {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
}

#m3-zoom-btn .tool-chevron {
  width: 11px;
  height: 7px;
  transition: transform 0.2s ease;
}

#m3-zoom.is-open #m3-zoom-btn .tool-chevron { transform: rotate(180deg); }

/* Menús flotantes de la banda (zoom y compartir) */
#m3-zoom-menu,
#m3-share-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 110px;
  background: var(--panel-bg);
  border: 1px solid var(--grey-structural);
  padding: 5px 0;
  display: none;
  flex-direction: column;
  z-index: 30;
}

#m3-zoom.is-open #m3-zoom-menu,
#m3-share.is-open #m3-share-menu { display: flex; }

.zoom-item,
.share-item {
  display: block;
  text-align: left;
  padding: 9px 20px;
  color: var(--text-white);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.zoom-item:hover,
.share-item:hover { background: #222222; color: var(--accent); }

.zoom-item.is-active { color: var(--accent); }

#m3-share { position: relative; }
#m3-share-menu { min-width: 160px; }

/* 08.2 Visor principal: toma el alto flexible del módulo */
#m3-viewer {
  flex: 1 1 auto;
  min-height: 200px;
  margin: 12px var(--pad-x3) 0;
  background: #000;
  position: relative;   /* ancla del clip absoluto */
}

/* La imagen recortada por el visor; el zoom escala con transform */
#m3-frame-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#m3-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--m3zoom, 1));
  transform-origin: center center;
  /* --m3fx: retoque por obra (contraste) que fija interface-m3.js;
     el x-ray (.is-xray, más específico) lo pisa mientras está activo */
  filter: var(--m3fx, none);
  transition: transform 0.5s ease, filter 0.35s ease;
}

/* Deriva ambiental: zoom y paneo lentísimos, ida y vuelta */
#m3-frame.is-ambient {
  animation: m3AmbientDrift 26s ease-in-out infinite alternate;
}

@keyframes m3AmbientDrift {
  0%   { transform: scale(calc(var(--m3zoom, 1) * 1.03)) translate(0.5%, 0.4%); }
  100% { transform: scale(calc(var(--m3zoom, 1) * 1.08)) translate(-0.6%, -0.5%); }
}

/* Radiografía del visor */
#m3-frame.is-xray {
  filter: invert(1) grayscale(1) brightness(1.08) contrast(1.05);
}

/* Con el cartel sobre el visor (is-noticed), el frame cede
   protagonismo: mismo blur que la ficha del módulo 2 */
#m3-frame.is-noticed {
  filter: blur(4px) brightness(0.55) saturate(0.75);
}

/* Imagen entera (fit: 'contain' en META): frames cuya proporción no
   llena el visor se ven completos, sin recortes, sobre un telón
   desenfocado de la misma imagen (--m3bg lo pone interface-m3.js) */
#m3-frame.is-contain { object-fit: contain; }

/* Imagen entera estirada al visor completo (fit: 'fill' en META):
   sin bandas ni recortes — asume una deformación leve */
#m3-frame.is-fill { object-fit: fill; }

#m3-frame-clip::before {
  content: '';
  position: absolute;
  inset: -40px;   /* desborde: el blur no deja rebordes claros */
  background: var(--m3bg, none) center / cover no-repeat;
  filter: blur(26px) brightness(0.4);
}

/* Video del visor (clip mudo en loop) */
#m3-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Trailer embebido dentro del visor (embedTrailer en interface-m3.js):
   ocupa el recuadro completo, por encima del frame */
#m3-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 2;
}

#m3-frame[hidden],
#m3-video[hidden],
#m3-embed[hidden],
#m3-frame-empty[hidden] { display: none; }

/* Placeholder para proyectos sin frame */
#m3-frame-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-grey);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 6px;
}

/* Aviso centrado sobre la imagen del visor (documentales) */
#m3-frame-notice {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Sin esto, left:50% limita el ancho automático al 50% del visor
     y el max-width nunca llega a actuar */
  width: max-content;
  max-width: min(900px, 96%);
  padding: 22px 26px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--grey-structural);
  color: var(--text-white);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.8px;
  line-height: 1.7;
  text-align: center;
  /* Los avisos con párrafos usan \n\n (p. ej. el del libro) */
  white-space: pre-line;
  pointer-events: none;
  z-index: 3;
}

#m3-frame-notice[hidden] { display: none; }

/* ---------- 08.6 Reproductor bajo el visor ---------- */
#m3-player {
  flex: 0 0 clamp(64px, 8vh, 93px);
  padding: 0 var(--pad-x3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.3vw, 26px);
}

#m3-transport {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 20px);
}

.player-btn {
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease;
}

.player-btn:hover { color: var(--accent); }
.player-btn.is-active { color: var(--accent); }
.player-btn svg { width: 21px; height: 21px; }
.player-btn--play svg { width: 26px; height: 26px; }

.player-sep {
  width: 1px;
  height: 26px;
  background: var(--grey-structural);
}

#m3-timecode {
  color: var(--text-white);
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 400;
  letter-spacing: clamp(1.5px, 0.16vw, 3px);
  font-variant-numeric: tabular-nums;
  min-width: clamp(130px, 9vw, 172px);
  text-align: center;
}

/* Vúmetro digital: dos canales de segmentos LED. Los niveles los
   anima interface-m3.js mientras el trailer embebido está a la vista */
#m3-vumeter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.vu-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vu-tag {
  color: var(--text-grey);
  font-size: 9px;
  letter-spacing: 1px;
  width: 7px;
  line-height: 1;
}

.vu-segs { display: flex; gap: 3px; }

.vu-seg {
  width: clamp(4px, 0.3vw, 6px);
  height: 11px;
  background: #2C2C2C;
  transition: background 90ms linear;
}

.vu-seg.is-on { background: #C9C9C9; }
/* El tramo alto pica en naranja, como una consola de edición */
.vu-seg.is-hot.is-on { background: var(--accent); }

/* 08.3 Líneas bajo el visor (a lo ancho del módulo) */
#m3-grey-line-1,
#m3-grey-line-2 {
  flex: 0 0 1px;
  background: var(--grey-visible);
}

#m3-black-line {
  flex: 0 0 3px;
  background: var(--black);
}

/* ---------- 08.7 Regla de tiempo + aguja ---------- */
#m3-ruler {
  flex: 0 0 clamp(56px, 7vh, 78px);
  margin: 0 var(--pad-x3);
  cursor: grab;
  position: relative;   /* ancla de ticks, timecodes y aguja */
}

#m3-ruler.is-scrubbing { cursor: grabbing; }

#m3-ruler-ticks {
  position: absolute;
  left: 0;
  top: 8px;
  width: 100%;
  height: 18px;
  pointer-events: none;
}

#m3-ruler-ticks .tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 9px;
  background: #565656;
}

#m3-ruler-ticks .tick.major {
  height: 17px;
  background: #8A8A8A;
}

#m3-ruler-labels {
  position: absolute;
  left: 0;
  top: 38px;
  width: 100%;
  height: 20px;
  pointer-events: none;
}

/* Cada timecode empieza justo a la derecha de su marca mayor */
#m3-ruler-labels .tc {
  position: absolute;
  padding-left: 5px;
  color: var(--text-grey);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Aguja naranja: cabeza en la regla, línea que cae hasta la cinta */
#m3-playhead {
  position: absolute;
  top: 0;
  left: 40%;
  width: 0;
  height: calc(clamp(56px, 7vh, 78px) + 4px
             + clamp(34px, 4.5vh, 46px)
             + clamp(120px, 15vh, 150px) + 6px);
  z-index: 6;
  pointer-events: none;
}

#m3-playhead .ph-head {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--accent);
}

#m3-playhead .ph-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--accent);
  opacity: 0.9;
}

/* ---------- 08.8 Fila escena:toma ---------- */
#m3-scenes {
  flex: 0 0 clamp(34px, 4.5vh, 46px);
  margin: 0 var(--pad-x3);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#m3-scenes span {
  color: var(--text-grey);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 08.9 Carrusel + cinta de frames ---------- */
#m3-carousel {
  flex: 0 0 clamp(120px, 15vh, 150px);
  margin: 0 var(--pad-x3) 17px;
  position: relative;   /* ancla de la cinta (absolute inset 0) */
}

#m3-strip {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

#m3-strip::-webkit-scrollbar { display: none; }

.strip-item {
  flex: 0 0 clamp(200px, 14vw, 270px);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
}

.strip-img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(232, 232, 232, 0.85);
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.strip-item:hover .strip-img,
.strip-item.is-current .strip-img { filter: grayscale(0); }

.strip-name {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9C9C9;
  font-size: 12px;
  letter-spacing: 2px;
  transition: color 0.25s ease;
}

.strip-item:hover .strip-name,
.strip-item.is-current .strip-name { color: var(--text-white); }

/* Flechas del carrusel, a los costados de la cinta */
.strip-arrow {
  position: absolute;
  bottom: calc(17px + (clamp(120px, 15vh, 150px) - 44px) / 2);
  width: 22px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-grey);
  transition: color 0.25s ease;
  z-index: 7;
}

.strip-arrow:hover { color: var(--accent); }
.strip-arrow svg { width: 9px; height: 15px; }

#m3-strip-prev { left: 2px; }
#m3-strip-next { right: 2px; }

/* ---------- 08.10 Pantalla completa del módulo 3 ---------- */
#canvas.m3-full #module-1,
#canvas.m3-full #module-2,
#canvas.m3-full #sep-v-1,
#canvas.m3-full #sep-v-2,
#canvas.m3-full #m1-dropdown { display: none; }

#canvas.m3-full #module-3 { grid-column: 1 / -1; }

/* ---------- 07.4 Lightbox del póster ---------- */
#m2-poster { cursor: zoom-in; }

#m2-poster-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: zoom-out;
}

#m2-poster-lightbox.is-open { display: flex; }

#m2-poster-lightbox img {
  max-width: 92vw;
  max-height: 94vh;
  display: block;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
  cursor: zoom-in;
  margin: auto;
}

#m2-poster-lightbox.is-zoomed { overflow: auto; }

#m2-poster-lightbox.is-zoomed img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

#m2-poster-lightbox-close {
  position: absolute;
  top: 24px;
  right: 36px;
  color: var(--text-white);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.25s ease;
}

#m2-poster-lightbox-close:hover { color: var(--accent); }

/* ---------- 07.5 Muro de pósters ----------
   Overlay a pantalla completa (icono de cuadrícula del header):
   la filmografía entera de un vistazo, como la pared de afiches
   de una productora. Click en un afiche → esa obra. */
#poster-wall {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 6, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 90;
  display: none;
  flex-direction: column;
  padding: clamp(18px, 3.5vh, 42px) clamp(16px, 4vw, 64px) clamp(16px, 3vh, 36px);
}

#poster-wall.is-open { display: flex; }

#poster-wall-title {
  color: var(--text-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-align: center;
  margin-bottom: clamp(14px, 2.6vh, 30px);
}

#poster-wall-close {
  position: absolute;
  top: 24px;
  right: 36px;
  color: var(--text-white);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.25s ease;
  z-index: 2;
}

#poster-wall-close:hover { color: var(--accent); }

#poster-wall-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 12.5vw, 190px), 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-content: start;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #6E6E6E transparent;
}

#poster-wall-grid::-webkit-scrollbar { width: 6px; }
#poster-wall-grid::-webkit-scrollbar-track { background: transparent; }
#poster-wall-grid::-webkit-scrollbar-thumb {
  background: #6E6E6E;
  border-radius: 3px;
}

/* Afiche del muro: proporción real de póster, título al hover */
.wall-item {
  position: relative;
  aspect-ratio: 196 / 282;
  background: #000;
  border: 1px solid #262626;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wall-item:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

.wall-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.wall-item:hover img { transform: scale(1.05); }

.wall-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 8px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  color: var(--text-white);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.wall-item:hover .wall-name { opacity: 1; }

/* ---------- 08.11 Lightbox del trailer ---------- */
#m3-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#m3-lightbox.is-open { display: flex; }

#m3-lightbox-frame {
  width: min(1280px, 86vw);
  aspect-ratio: 16 / 9;
}

#m3-trailer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

#m3-lightbox-close {
  position: absolute;
  top: 24px;
  right: 36px;
  color: var(--text-white);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.25s ease;
}

#m3-lightbox-close:hover { color: var(--accent); }

/* ============================================================
   10. DESKTOP MEDIANO (1200–1599px)
   Mismo grid de tres módulos; paddings, tipografías y controles
   ya se reducen con clamp() — aquí solo los ajustes discretos.
   ============================================================ */
@media (max-width: 1599px) {

  #m1-projects-tab,
  #m2-band-title { font-size: 14px; letter-spacing: 2px; }

  .work-item { margin: 4px 10px; padding: 8px 10px; }
  .work-thumb { width: 64px; height: 92px; }
  .work-title, .work-meta { font-size: 14px; }

  #m2-roles .role, #m2-roles .role-sep { font-size: 13px; }
  #m2-synopsis { font-size: 15px; }

  #m3-scenes span, #m3-ruler-labels .tc { font-size: 11px; }
}

/* ============================================================
   10.5 DESKTOP BAJO (ancho ≥1200px, alto <740px)
   Ventanas anchas pero de poca altura: tele o monitor con
   escalado del sistema, ventana restaurada, barras extra del
   navegador. Aplastar los módulos por debajo de su mínimo los
   hacía desbordar sobre el footer; en su lugar el canvas
   conserva su altura mínima de composición y la página reabre
   el scroll vertical, como ya hacen tablet y móvil.
   ============================================================ */
@media (min-width: 1200px) and (max-height: 739px) {

  html, body {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
  }

  #canvas { height: 740px; }
}

/* ============================================================
   11. TABLET (821–1199px)
   Módulo 1 como navegación lateral; módulos 3 y 2 apilados a la
   derecha (visor arriba, ficha debajo). La página scrollea.
   ============================================================ */
@media (max-width: 1199px) and (min-width: 821px) {

  html, body {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
  }

  #canvas {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-rows: 69px 3px auto auto 3px 70px;
    grid-template-columns: minmax(230px, 300px) 3px minmax(0, 1fr);
  }

  #header           { grid-area: 1 / 1 / 2 / -1; }
  .sep-below-header { grid-area: 2 / 1 / 3 / -1; }
  #module-1         { grid-area: 3 / 1 / 5 / 2; }
  #sep-v-1          { grid-area: 3 / 2 / 5 / 3; }
  #module-3         { grid-area: 3 / 3 / 4 / 4; }
  #module-2         { grid-area: 4 / 3 / 5 / 4; }
  #sep-v-2          { display: none; }
  .sep-above-footer { grid-area: 5 / 1 / 6 / -1; }
  #footer           { grid-area: 6 / 1 / 7 / -1; }

  #canvas.m3-full #module-3 { grid-area: 3 / 1 / 4 / -1; }
  #canvas.m3-full #module-2 { display: block; grid-area: 4 / 1 / 5 / -1; }

  /* Módulo 1: la lista acompaña el scroll de la página */
  #module-1 { height: auto; }
  #m1-works-list { max-height: none; }

  /* Módulo 3: sin alto de viewport que repartir, el visor se rige
     por su proporción original */
  #m3-viewer {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 1104 / 562;
  }

  /* Módulo 2: la ficha fluye a su alto natural */
  #m2-trajectory-box { min-height: 320px; height: 420px; flex: 0 0 auto; }
  #m2-synopsis { height: auto; min-height: 60px; max-height: none; }
}

/* ============================================================
   12. MÓVIL (≤820px) — flujo vertical
   Orden: header → proyectos → ficha → visor → controles →
   carrusel → trayectoria → footer. display:contents deshace
   los contenedores de los módulos 2 y 3 para poder mover la
   trayectoria después del carrusel.
   ============================================================ */
@media (max-width: 820px) {

  html, body {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
  }

  #canvas {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    background: var(--module-1-bg);
  }

  .sep-v { display: none; }
  .sep-h { flex: 0 0 3px; width: 100%; }

  /* ---------- Header ---------- */
  #header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    min-height: 0;
  }

  #header-name { font-size: 15px; letter-spacing: 3px; }
  #header-right { gap: 16px; }
  /* El icono de cuadrícula (muro de pósters) sí queda en móvil */
  #hdr-full-btn { display: none; }
  #hdr-clock { display: none; }
  #hdr-search.is-open #hdr-search-input { width: 130px; }

  /* ---------- Los módulos 2 y 3 se deshacen en sus piezas ---------- */
  #module-2, #module-3 { display: contents; }

  /* Piezas del módulo 3 sobre su fondo propio */
  #m3-band, #m3-player, #m3-carousel, #m3-viewer {
    background: var(--module-3-bg);
  }

  /* La trayectoria pasa detrás del carrusel; el footer cierra */
  #m2-trajectory-box { order: 1; }
  .sep-above-footer  { order: 2; }
  #footer            { order: 3; }

  /* ---------- Módulo 1: proyectos ---------- */
  #module-1 { flex: 0 0 auto; }

  .band {
    flex: 0 0 52px;
    height: 52px;
    border-bottom: 2px solid var(--black);
  }

  #m1-dropdown { top: 54px; left: 16px; z-index: 30; }

  #m1-works-list {
    flex: 0 0 auto;
    max-height: 44vh;
    padding: 8px 0;
  }

  #m1-counter { flex: 0 0 40px; }

  /* ---------- Ficha técnica ---------- */
  #m2-poster {
    height: 282px;
    margin: 20px auto 0;
  }

  /* Sin hover-proyector en táctil */
  #m2-poster:hover {
    transform: none !important;
    box-shadow: none;
  }

  #m2-poster:hover ~ #m2-roles,
  #m2-poster:hover ~ #m2-grey-sep,
  #m2-poster:hover ~ #m2-synopsis,
  #m2-poster:hover ~ #m2-cta,
  #m2-poster:hover ~ #m2-trajectory-box {
    filter: none;
  }

  #m2-cta { margin: 0 16px 16px; }

  #m2-roles { padding: 16px 16px 0; margin: 0; }
  #m2-grey-sep { margin: 14px 16px 10px; }

  #m2-synopsis {
    height: auto !important;   /* neutraliza el auto-ajuste desktop */
    min-height: 0;
    font-size: 15px !important;
    margin: 0 16px 16px;
  }

  #m2-trajectory-box,
  #m2-trajectory-box.is-expanded {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    height: 440px;
    flex: 0 0 auto;
    margin: 16px;
  }

  #m2-trajectory-box.is-expanded::before { display: none; }
  #m2-traj-expand { display: none; }

  /* ---------- Visor + controles + carrusel ---------- */
  #m3-band {
    flex-basis: auto;
    height: auto;
    min-height: 52px;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  #m3-tags {
    white-space: normal;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    overflow: visible;
  }

  #m3-zoom, #m3-full-btn { display: none; }

  #m3-viewer {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    aspect-ratio: 16 / 9;
  }

  #m3-frame-notice {
    font-size: 13px;
    padding: 14px 16px;
  }

  #m3-player {
    flex-basis: 60px;
    gap: 14px;
    padding: 0 12px;
  }

  /* Botones con área táctil cómoda */
  .player-btn { padding: 10px 6px; }

  #m3-timecode { font-size: 14px; min-width: 0; letter-spacing: 2px; }
  #m3-vumeter { display: none; }

  /* La radiografía (invert) queda fuera del táctil: era la causa del
     visor "invertido" — un toque accidental sin feedback de hover */
  #m3-xray-btn, #m3-xray-btn + .player-sep { display: none; }

  #m3-ruler, #m3-scenes,
  #m3-grey-line-1, #m3-grey-line-2, #m3-black-line { display: none; }

  #m3-carousel {
    flex-basis: 120px;
    height: 120px;
    margin: 4px 0 18px;
  }

  .strip-item { flex: 0 0 190px; }
  /* Sin hover en táctil: la cinta se ve siempre a color */
  .strip-img { filter: none; }
  .strip-arrow { display: none; }

  /* ---------- Footer ---------- */
  #footer {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    min-height: 0;
  }

  #footer-copy { font-size: 11px; letter-spacing: 1px; }

  /* ---------- Muro de pósters en táctil ---------- */
  #poster-wall { padding: 16px 12px; }
  #poster-wall-close { top: 10px; right: 16px; }
  #poster-wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }
  /* Sin hover: el título del afiche se ve siempre */
  .wall-name { opacity: 1; font-size: 10px; padding: 20px 6px 7px; }
}