/* ============================================================
   JUANMA CIFUENTES — Portfolio
   CSS: Variables · Reset · Base · Nav · Sections · Responsive
   ============================================================ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  --color-fondo:        #F5F0E8;
  --color-fondo-alt:    #1A1714;
  --color-texto:        #1A1714;
  --color-texto-suave:  #6B6058;
  --color-texto-sec:    #8A7D72;
  --color-texto-inv:    #F5F0E8;
  --color-acento:       #7B1F2E;
  --color-acento-claro: #A8394A;
  --color-oro:          #C9A84C;
  --color-linea:        #D4C9B5;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-label:   'Cormorant SC', Georgia, serif;

  --nav-sidebar-w: 56px;
  --section-pad:   clamp(5rem, 9vw, 9rem);
  --inner-max:     1280px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-base: 0.3s;
  --t-slow: 0.6s;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: auto;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* contiene overflow en el scroll-container real */
}
body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-body);
  line-height: 1.75;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto;
  -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
  width: 100%;
}

/* ── 3. ACCESSIBILITY ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 1rem; left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-acento);
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  z-index: 9999;
  transform: translateY(-200%);
  transition: transform 0.2s;
  border-radius: 2px;
}
.skip-link:focus { transform: translateY(0); }

*:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

/* ── 4. LOADING SCREEN ────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-fondo-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  pointer-events: none;
  /* Fallback: desaparece en 3s aunque GSAP falle */
  animation: loaderFallout 0.4s ease 3s forwards;
}
@keyframes loaderFallout {
  to { opacity: 0; visibility: hidden; }
}

.loader-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  color: var(--color-texto-inv);
  letter-spacing: 0.05em;
  clip-path: inset(0 100% 0 0);
}

/* ── 5. SCROLL PROGRESS ───────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-acento);
  z-index: 8000;
  transform-origin: left;
  will-change: width;
}

/* ── 6. NAVIGATION — SIDEBAR ──────────────────────────────── */
.nav-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--nav-sidebar-w);
  height: 100dvh;
  background: var(--color-fondo);
  border-right: 1px solid var(--color-linea);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
  z-index: 500;
  gap: 2rem;
}

.nav-logo {
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-acento);
  writing-mode: horizontal-tb;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-acento);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.nav-logo:hover {
  background: var(--color-acento);
  color: var(--color-texto-inv);
}

.nav-dots {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.nav-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}
.nav-dot span {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-linea);
  transition: background var(--t-base), transform var(--t-base) var(--ease-out);
}
.nav-dot:hover span,
.nav-dot.active span {
  background: var(--color-acento);
  transform: scale(1.5);
}

.nav-dot::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-fondo-alt);
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.nav-dot:hover::after { opacity: 1; }

.nav-sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
.nav-sidebar-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  color: var(--color-texto-suave);
  transition: color var(--t-base);
}
.nav-sidebar-social a:hover { color: var(--color-acento); }
.nav-sidebar-social svg { width: 16px; height: 16px; }

/* ── 7. MOBILE TOPBAR ─────────────────────────────────────── */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(245,240,232,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(123,31,46,.18);
  align-items: center;
  justify-content: center;
  z-index: 499;
}
.mobile-topbar-logo {
  font-family: var(--font-label);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  padding: .25rem .5rem;
  transition: background var(--t-base), color var(--t-base);
}
.mobile-topbar-logo:hover { background: var(--color-acento); color: var(--color-fondo); }

.drawer-logo {
  position: absolute;
  top: 1rem; left: 1.5rem;
  font-family: var(--font-label);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  padding: .25rem .5rem;
}

/* ── 8. HAMBURGER BUTTON ──────────────────────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 6px;
  right: 1rem;
  z-index: 600;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  /* Backdrop para ser visible sobre cualquier fondo */
  background: rgba(26, 23, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 3px;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-texto-inv); /* siempre crema sobre el backdrop oscuro */
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
  transform-origin: center;
}
.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 8. MOBILE DRAWER ─────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--color-fondo-alt);
  z-index: 550;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  gap: 2rem;
}
.nav-drawer.open { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-inv);
  opacity: 0.7;
  transition: opacity var(--t-base);
}
.drawer-close:hover { opacity: 1; }
.drawer-close svg { width: 24px; height: 24px; }

.drawer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.drawer-links li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease-out) calc(var(--i) * 0.05s),
              transform 0.4s var(--ease-out) calc(var(--i) * 0.05s);
}
.nav-drawer.open .drawer-links li {
  opacity: 1;
  transform: translateY(0);
}

.drawer-link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 400;
  color: var(--color-texto-inv);
  letter-spacing: -0.01em;
  display: block;
  padding: 0.2rem 1rem;
  position: relative;
  transition: color var(--t-base);
}
.drawer-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 1rem;
  width: 0; height: 1px;
  background: var(--color-acento-claro);
  transition: width var(--t-slow) var(--ease-out);
}
.drawer-link:hover { color: var(--color-acento-claro); }
.drawer-link:hover::after { width: calc(100% - 2rem); }

.drawer-social {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.drawer-social a {
  display: flex;
  color: var(--color-texto-inv);
  opacity: 0.5;
  transition: opacity var(--t-base);
}
.drawer-social a:hover { opacity: 1; }
.drawer-social svg { width: 20px; height: 20px; }

/* ── 9. LAYOUT BASE ───────────────────────────────────────── */
.section {
  position: relative;
  padding: var(--section-pad) 0;
}
.section-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  padding-left: clamp(1.5rem, 5vw, 4rem);
}

/* Push content past sidebar on desktop */
@media (min-width: 1024px) {
  .section-inner { padding-left: calc(var(--nav-sidebar-w) + clamp(2rem, 4vw, 4rem)); }
}

/* ── MOBILE NAV ACTIVATION ────────────────────────────────── */
@media (max-width: 1023px) {
  .nav-sidebar { display: none; }
  .mobile-topbar { display: flex; }
  .hamburger { display: flex; }

  /* Sections anchor below the topbar when scrolled to */
  .section { scroll-margin-top: 56px; }

  /* First section clears the topbar */
  #hero { padding-top: 56px; }
}

.section-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: 0.75rem;
}
.section-label--inv { color: var(--color-oro); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-texto);
  margin-bottom: 2.5rem;
}
.section-title--inv { color: var(--color-texto-inv); }

.section-header-row {
  margin-bottom: 3rem;
}

/* Ornamental separators between sections */
.section + .section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: clamp(1.5rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-linea) 20%, var(--color-linea) 80%, transparent);
}

/* ── 10. HERO ─────────────────────────────────────────────── */
.section-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* foco en la cara, imagen apaisada */
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26,23,20,0.88) 0%,
    rgba(26,23,20,0.65) 40%,
    rgba(26,23,20,0.35) 70%,
    rgba(26,23,20,0.10) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--inner-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vh, 7rem);
}

@media (min-width: 1024px) {
  .hero-content {
    padding-left: calc(var(--nav-sidebar-w) + clamp(2rem, 4vw, 4rem));
    /* Sin max-width fijo: el nombre debe respirar sobre la imagen */
    max-width: 100%;
  }
}

.hero-pre {
  font-family: var(--font-label);
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-oro);
  margin-bottom: 1.25rem;
}

.hero-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.5vw, 8.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.96;       /* espacio suficiente para ascendentes de Playfair */
  letter-spacing: -0.015em;
  color: var(--color-texto-inv);
  margin-bottom: 1.5rem;
  overflow: visible;       /* nunca recortar: la animación usa clip-path lateral */
  /* Padding vertical para que J/C/S no se corten con line-height ajustado */
  padding: 0.08em 0;
}
.hero-name-line {
  display: block;
  padding-bottom: 0.04em; /* margen extra para descendentes de la S final */
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-style: italic;
  color: rgba(245,240,232,0.75);
  margin-bottom: 2.5rem;
  max-width: 42ch;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-acento);
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-acento);
  transition: background var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              border-color var(--t-base);
  min-height: 44px;
}
.btn-primary:hover {
  background: var(--color-acento-claro);
  border-color: var(--color-acento-claro);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-icon { width: 16px; height: 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(245,240,232,0.35);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
  min-height: 44px;
}
.btn-ghost:hover {
  border-color: rgba(245,240,232,0.7);
  background: rgba(245,240,232,0.08);
  transform: translateY(-2px);
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  right: 3rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-indicator-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(245,240,232,0.6), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%       { transform: scaleY(0.4) translateY(30px); opacity: 0.2; }
}

/* ── 11. SOBRE MÍ ─────────────────────────────────────────── */
.sobre-mi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .sobre-mi-grid {
    grid-template-columns: 1fr 380px;
    gap: 5rem;
    align-items: start;
  }
}

.bio-text p {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--color-texto);
  line-height: 1.8;
  max-width: 65ch;
  margin-bottom: 1.4rem;
}
.bio-text p:last-child { margin-bottom: 0; }
.bio-text em { color: var(--color-acento); font-style: italic; }
.bio-text strong { font-weight: 700; }

.sobre-mi-img-wrap {
  margin-bottom: 1.5rem;
}
.sobre-mi-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(0.08) contrast(1.03);
}

.casting-card {
  background: var(--color-fondo-alt);
  padding: 2rem;
}

.casting-title {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oro);
  margin-bottom: 1.25rem;
}

.casting-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  margin-bottom: 1.5rem;
}
.casting-list dt {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  align-self: center;
}
.casting-list dd {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-texto-inv);
  align-self: center;
}

.casting-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.casting-skill {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-inv);
  border: 1px solid rgba(245,240,232,0.2);
  padding: 0.25rem 0.6rem;
}

.casting-agency {
  border-top: 1px solid rgba(245,240,232,0.12);
  padding-top: 1.2rem;
}
.casting-agency-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: 0.4rem;
}
.casting-agency-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-acento-claro);
  transition: color var(--t-base);
}
.casting-agency-link:hover { color: var(--color-oro); }
.casting-agency-link svg { width: 14px; height: 14px; }

/* ── 12. SHOWREEL ─────────────────────────────────────────── */
.showreel {
  background: var(--color-fondo-alt);
  padding: var(--section-pad) 0 0;
}
/* El separador ornamental es crema sobre fondo oscuro — ocultarlo */
.showreel::before { display: none !important; }
.showreel .section + .section::before { display: none; }

.showreel-header {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  margin-bottom: 3rem;
}
@media (min-width: 1024px) {
  .showreel-header { padding-left: calc(var(--nav-sidebar-w) + clamp(2rem, 4vw, 4rem)); }
}

.showreel-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-texto-inv);
}

.showreel-embed-wrap {
  width: 100%;
  position: relative;
}
.showreel-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-fondo-alt);
}
.showreel-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.showreel-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow);
}
.showreel-placeholder:hover .showreel-thumb {
  transform: scale(1.03);
  filter: brightness(0.7);
}
.showreel-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-inv);
  transition: background var(--t-base), transform var(--t-base) var(--ease-out);
  border: 2px solid rgba(245,240,232,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.showreel-play-btn:hover {
  background: var(--color-acento-claro);
  transform: translate(-50%,-50%) scale(1.1);
}
.showreel-play-btn svg { width: 28px; height: 28px; margin-left: 3px; }

/* Loaded iframe replaces placeholder */
.showreel-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── 13. CINE ─────────────────────────────────────────────── */
.cine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.cine-card--featured {
  grid-column: 1 / -1;
}

.cine-card {
  position: relative;
  overflow: hidden;
  background: var(--color-fondo-alt);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base) var(--ease-out);
}
.cine-card:hover { transform: translateY(-4px); }
.cine-card:hover .cine-card-img { transform: scale(1.04); }

.cine-card-img-wrap {
  overflow: hidden;
  flex-shrink: 0;
}
.cine-card--featured .cine-card-img-wrap { aspect-ratio: 16 / 9; }
.cine-card:not(.cine-card--featured) .cine-card-img-wrap { aspect-ratio: 2 / 3; }

.cine-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
  filter: sepia(0.05) contrast(1.05);
}

/* Gold line on hover */
.cine-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 100%;
  height: 2px;
  background: var(--color-oro);
  transition: right var(--t-slow) var(--ease-out);
  z-index: 1;
}
.cine-card:hover::before { right: 0; }

.cine-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.cine-year {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--color-acento-claro);
}
.cine-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-texto-inv);
  line-height: 1.25;
}
.cine-card--featured .cine-title { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.cine-character {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(245,240,232,0.6);
}
.cine-director {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}
.cine-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.cine-tag {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-inv);
  border: 1px solid rgba(245,240,232,0.2);
  padding: 0.2rem 0.5rem;
}
.cine-badge {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-oro);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 0.2rem 0.5rem;
}
.cine-platform {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento-claro);
  border: 1px solid rgba(168,57,74,0.3);
  padding: 0.2rem 0.5rem;
}

/* ── 14. SERIES — TIMELINE ────────────────────────────────── */
.series {
  background: transparent;
}

/* Bandas de la sección series — full-width naturalmente como hijas directas */
.series-band--light { background: var(--color-fondo); }
.series-band--dark  { background: var(--color-fondo-alt); }

/* Gradiente de transición entre bandas */
.series-band-seam {
  height: 7rem;
  background: linear-gradient(to bottom, var(--color-fondo), var(--color-fondo-alt));
  /* El estado inicial (opacity:0) lo aplica GSAP; sin JS se muestra siempre */
}

.series-band-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding-left: calc(var(--nav-sidebar-w) + clamp(2rem, 4vw, 4rem));
  padding-right: clamp(1.5rem, 5vw, 4rem);
}
.series-band--light .series-band-inner { padding-top: var(--section-pad); }
.series-band--dark  .series-band-inner {
  padding-top: 2rem;
  padding-bottom: var(--section-pad);
}

@media (max-width: 1023px) {
  .series-band-inner {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
}

.timeline-wrapper {
  position: relative;
  padding-left: 2rem;
}

@media (min-width: 1024px) {
  .timeline-wrapper {
    padding-left: 3rem;
  }
}

/* SVG vertical line */
.timeline-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
}
.timeline-svg {
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.timeline-draw {
  color: var(--color-linea);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.timeline-zone {
  padding: 3rem 0;
}

.timeline-zone-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-left: 2rem;
}
.zone-tag {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-acento);
  background: rgba(123,31,46,0.1);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(123,31,46,0.2);
}
.timeline-zone-label--inv .zone-tag {
  color: var(--color-oro);
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.3);
}
.zone-years {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.timeline-entry {
  position: relative;      /* necesario para que timeline-dot sea relativo a entry */
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: flex-start;
}

.timeline-dot {
  position: absolute;
  /* Mobile: wrapper padding-left 2rem. Dot 10px: center = -(2rem + 5px) */
  left: calc(-2rem - 5px);
  top: 0.55rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 2px solid var(--color-fondo);
  flex-shrink: 0;
  z-index: 1;
  transition: transform var(--t-base) var(--ease-out);
}
@media (min-width: 1024px) {
  /* Desktop: wrapper padding-left 3rem. Dot 10px: center = -(3rem + 5px) */
  .timeline-dot { left: calc(-3rem - 5px); }
}
.timeline-dot--gold { background: var(--color-oro); border-color: var(--color-fondo-alt); }
.timeline-entry:hover .timeline-dot { transform: scale(1.5); }

.timeline-card {
  background: transparent;
  border-left: 1px solid var(--color-linea);
  padding: 0 0 0 1.5rem;
  flex: 1;
  transition: border-color var(--t-base);
}
.timeline-card--dark {
  border-color: rgba(245,240,232,0.12);
}
.timeline-entry:hover .timeline-card { border-color: var(--color-acento-claro); }

.timeline-year {
  display: block;
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--color-acento);
  margin-bottom: 0.3rem;
}
.timeline-card--dark .timeline-year { color: var(--color-oro); }

.timeline-show {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-texto);
  margin-bottom: 0.25rem;
  line-height: 1.25;
}
.timeline-card--dark .timeline-show { color: var(--color-texto-inv); }

.timeline-role {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-texto-suave);
  margin-bottom: 0.4rem;
}
.timeline-card--dark .timeline-role { color: rgba(245,240,232,0.55); }

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.timeline-channel {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento);
  border: 1px solid rgba(123,31,46,0.2);
  padding: 0.15rem 0.4rem;
}
.timeline-card--dark .timeline-channel {
  color: var(--color-oro);
  border-color: rgba(201,168,76,0.25);
}
.timeline-genre {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.timeline-card--dark .timeline-genre { color: rgba(245,240,232,0.4); }

/* Zone transition marker */
.timeline-zone-transition {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
  padding-left: 2rem;
}
.zone-transition-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
}
.zone-transition-year {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  color: var(--color-acento);
  line-height: 1;
}

@media (min-width: 768px) {
  .timeline-entry--left {
    padding-right: 0;
  }
  .timeline-entry--right {
    padding-left: 2rem;
  }
}

/* ── 15. TEATRO ───────────────────────────────────────────── */
.teatro {
  background: var(--color-fondo);
}

/* Award box */
.teatro-hito {
  position: relative;
  background: var(--color-acento);
  padding: 2.5rem;
  margin-bottom: 4rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  overflow: hidden;
}
.hito-ornament {
  position: absolute;
  top: -1rem; right: -1rem;
  width: 120px; height: 120px;
  border: 1px solid rgba(245,240,232,0.1);
  border-radius: 50%;
}
.hito-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-oro);
  margin-bottom: 0.5rem;
}
.hito-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  font-weight: 700;
  color: var(--color-texto-inv);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.hito-subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(245,240,232,0.7);
  margin-bottom: 1rem;
  font-style: italic;
}
.hito-award {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-oro);
}
.hito-award svg { width: 14px; height: 14px; fill: var(--color-oro); flex-shrink: 0; }

/* Teatro list — editorial, no cards */
.teatro-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.teatro-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-linea);
  align-items: start;
  position: relative;
  overflow: hidden;
}
.teatro-item:first-child { border-top: 1px solid var(--color-linea); }

/* Animated underline on hover */
.teatro-item::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 80px; right: 0;
  height: 1px;
  background: var(--color-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.teatro-item:hover::after { transform: scaleX(1); }

.teatro-year {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-acento);
  padding-top: 0.25rem;
}

.teatro-obra {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-texto);
  margin-bottom: 0.2rem;
  transition: color var(--t-base);
}
.teatro-item:hover .teatro-obra { color: var(--color-acento); }

.teatro-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

/* Maestros block */
.maestros-block {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-linea);
}
.maestros-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-style: italic;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

/* Teatro — foto grid (3 producciones con imagen) */
.teatro-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.teatro-foto-card:first-child { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .teatro-fotos { grid-template-columns: 1fr; }
  .teatro-foto-card:first-child { grid-column: auto; }
}

.teatro-foto-card {
  overflow: hidden;
  background: var(--color-fondo-alt);
  transition: transform var(--t-base) var(--ease-out);
}
.teatro-foto-card:hover { transform: translateY(-3px); }

.teatro-foto-img-wrap { overflow: hidden; }
.teatro-foto-card:first-child .teatro-foto-img-wrap { aspect-ratio: 16 / 9; }
.teatro-foto-card:not(:first-child) .teatro-foto-img-wrap { aspect-ratio: 3 / 2; }

.teatro-foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
  filter: sepia(0.05) contrast(1.04);
}
.teatro-foto-card:hover .teatro-foto-img { transform: scale(1.04); }

.teatro-foto-caption {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.teatro-foto-year {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-acento-claro);
}
.teatro-foto-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-texto-inv);
  line-height: 1.25;
}
.teatro-foto-card:first-child .teatro-foto-title { font-size: 1.15rem; }
.teatro-foto-venue {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(245,240,232,0.5);
}

/* Musical list — sin fotos, reutiliza estilos zcat */
.musical-list { margin-bottom: 0.5rem; }
.musical-list .zcat-item:first-child { border-top: 1px solid var(--color-linea); }
.musical-list .zcat-item { gap: 0; }

/* ── 16. ZARZUELA ─────────────────────────────────────────── */
.zarzuela {
  background: var(--color-fondo);
}

.voz-block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.voz-badge {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  align-self: flex-start;
}
.voz-text {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: var(--color-texto-suave);
  line-height: 1.7;
  max-width: 52ch;
  font-style: italic;
}

.zarzuela-ornament {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2.5rem;
  color: var(--color-oro);
  opacity: 0.5;
}
.zarzuela-ornament svg { width: 80px; height: 40px; }

.zarzuela-sub-label {
  display: block;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

/* Musicals: asymmetric 2fr/1fr — featured card spans 2 rows */
.zarzuela-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}
.zarzuela-card--featured { grid-row: 1 / 3; }

@media (max-width: 767px) {
  .zarzuela-grid { grid-template-columns: 1fr; }
  .zarzuela-card--featured { grid-row: auto; }
}

.zarzuela-card {
  overflow: hidden;
  background: var(--color-fondo-alt);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base) var(--ease-out);
}
.zarzuela-card:hover { transform: translateY(-4px); }
.zarzuela-card:hover .zarzuela-card-img { transform: scale(1.05); }

.zarzuela-card-img-wrap {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.zarzuela-card--featured .zarzuela-card-img-wrap { aspect-ratio: 2 / 3; flex: none; }
.zarzuela-card:not(.zarzuela-card--featured) .zarzuela-card-img-wrap { aspect-ratio: 4 / 3; }

.zarzuela-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
  filter: sepia(0.12) contrast(1.04);
}

.zarzuela-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.zarzuela-obra {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-texto-inv);
  line-height: 1.25;
}
.zarzuela-card--featured .zarzuela-obra { font-size: 1.2rem; }
.zarzuela-role, .zarzuela-venue {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(245,240,232,0.55);
}

/* Zarzuela & Ópera full catalog */
.zarzuela-catalog-block {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-linea);
}
.zarzuela-catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .zarzuela-catalog { grid-template-columns: 1fr; }
}
.zcat-item {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-linea);
}
.zcat-year {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-acento-claro);
  flex-shrink: 0;
  width: 2.4rem;
}
.zcat-detail {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.zcat-obra {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-texto);
  line-height: 1.3;
}
.zcat-venue {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-texto-suave);
  font-style: italic;
}
.zcat-item--bayreuth .zcat-year { color: var(--color-oro); }
.zcat-item--bayreuth .zcat-obra { color: var(--color-acento); }

/* ── 17. DOCENCIA ─────────────────────────────────────────── */
.docencia {
  background: var(--color-fondo);
}
.docencia-inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .docencia-inner {
    grid-template-columns: 1fr 420px;
    gap: 6rem;
    align-items: center;
    padding-left: calc(var(--nav-sidebar-w) + clamp(2rem, 4vw, 4rem));
  }
}

.docencia-location {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-oro);
  margin-bottom: 1.5rem;
}
.docencia-quote {
  border-left: 2px solid var(--color-acento);
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.docencia-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-style: italic;
  color: var(--color-texto);
  line-height: 1.45;
}
.docencia-desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1rem);
  color: var(--color-texto-suave);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 55ch;
}
.docencia-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.docencia-list li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-texto);
  padding-left: 1rem;
  position: relative;
}
.docencia-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 4px; height: 4px;
  background: var(--color-acento);
  border-radius: 50%;
}

.docencia-img-wrap { overflow: hidden; }
.docencia-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(0.08) contrast(1.03);
}

/* ── 18. GALERÍA ──────────────────────────────────────────── */
.galeria { background: var(--color-fondo); }

/* Gallery filters */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.gallery-filter {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  border: 1px solid var(--color-linea);
  padding: 0.4rem 1rem;
  transition: all var(--t-base);
  cursor: pointer;
  min-height: 36px;
}
.gallery-filter:hover {
  border-color: var(--color-acento);
  color: var(--color-acento);
}
.gallery-filter.active {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-texto-inv);
}

/* Masonry layout */
.gallery-masonry {
  columns: 2;
  column-gap: 6px;
}
@media (min-width: 768px) { .gallery-masonry { columns: 3; } }
@media (min-width: 1280px) { .gallery-masonry { columns: 4; column-gap: 8px; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.gallery-item.visible { opacity: 1; transform: scale(1); }
/* hidden gestionado por JS con fade-out antes de display:none */
.gallery-item.fading-out { opacity: 0; transform: scale(0.95); pointer-events: none; }

.gallery-img {
  width: 100%;
  display: block;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-base);
  filter: sepia(0.06) contrast(1.04);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.04);
  filter: sepia(0) contrast(1.06);
}

.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(26,23,20,0.88), transparent);
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.5rem 0.75rem 0.6rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,23,20,0.93);
  cursor: pointer;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  z-index: 1;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,240,232,0.7);
  transition: color var(--t-base), background var(--t-base);
  border-radius: 0;
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: var(--color-texto-inv); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 24px; height: 24px; }

.lightbox-figure {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox-img {
  max-width: 100%;
  max-height: 80dvh;
  object-fit: contain;
  transition: opacity 0.2s;
}
.lightbox-caption {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
}

/* ── 19. PRENSA ───────────────────────────────────────────── */
.prensa { background: var(--color-fondo); }

.prensa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .prensa-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .prensa-grid { grid-template-columns: 2fr 1fr 1fr; } }

.prensa-card {
  border-top: 1px solid var(--color-linea);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--t-base);
}
.prensa-card:hover { border-color: var(--color-acento); }

.prensa-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prensa-medio {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-acento);
}
.prensa-fecha {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-texto-suave);
}
.prensa-cita {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-texto);
  line-height: 1.6;
  flex: 1;
}
.prensa-obra {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}
.prensa-obra em { font-style: italic; }
.prensa-link{display:inline-flex;align-items:center;gap:.35em;margin-top:.9em;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;
  color:var(--color-acento);transition:color var(--t-base),gap var(--t-base)}
.prensa-link:hover{color:var(--color-acento-claro);gap:.55em}

/* ── 20. CONTACTO ─────────────────────────────────────────── */
.contacto {
  background: var(--color-fondo-alt);
}
.contacto .section-inner { padding-top: 0; }
.contacto::before { display: none; }

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .contacto-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: start;
  }
}

.contacto-info { padding-top: 1rem; }

.contacto-via { margin-bottom: 2.5rem; }
.contacto-via-title {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: 0.5rem;
}
.contacto-via-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(245,240,232,0.5);
  margin-bottom: 0.75rem;
}
.contacto-agency-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-acento-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(168,57,74,0.4);
  transition: color var(--t-base), text-decoration-color var(--t-base);
}
.contacto-agency-link:hover {
  color: var(--color-oro);
  text-decoration-color: rgba(201,168,76,0.5);
}
.contacto-agency-link svg { width: 14px; height: 14px; }

.rrss-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.rrss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(245,240,232,0.6);
  transition: color var(--t-base);
}
.rrss-link:hover { color: var(--color-texto-inv); }
.rrss-link svg { width: 16px; height: 16px; }

.contacto-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 2rem;
}

.btn-cv-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.35rem 0.7rem;
  border: none;
  border-radius: 3px;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.btn-cv-download svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-cv-download:hover {
  background: #ede5d6;
  transform: translateY(-2px);
}

/* ── FORM ─────────────────────────────────────────────────── */
.contacto-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.6);
  display: block;
}

.form-input {
  display: block;
  width: 100%;
  background: rgba(245,240,232,0.05);
  border: 1px solid rgba(245,240,232,0.15);
  color: var(--color-texto-inv);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 48px;
  transition: border-color var(--t-base), background var(--t-base);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  border-color: var(--color-acento-claro);
  background: rgba(245,240,232,0.08);
  outline: none;
}
.form-input::placeholder { color: rgba(245,240,232,0.25); }
.form-select { cursor: pointer; }
.form-select option { background: var(--color-fondo-alt); color: var(--color-texto-inv); }
.form-textarea { resize: vertical; min-height: 140px; }

.form-check-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .65rem;
  margin-top: -.25rem;
}
.form-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: .1rem;
  accent-color: var(--color-acento);
  cursor: pointer;
}
.form-check-label {
  font-family: var(--font-body);
  font-size: .78rem;
  color: rgba(245,240,232,.5);
  line-height: 1.5;
}
.form-check-label a {
  color: rgba(201,168,76,.7);
  text-decoration: underline;
  transition: color var(--t-base);
}
.form-check-label a:hover { color: var(--color-acento-claro); }

.form-error {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-acento-claro);
  min-height: 1em;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--color-acento);
  color: var(--color-texto-inv);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--color-acento);
  min-height: 48px;
  transition: background var(--t-base), transform var(--t-base) var(--ease-out);
  position: relative;
}
.btn-submit:hover { background: var(--color-acento-claro); transform: translateY(-2px); }
.btn-submit:active { transform: scale(0.98); }

.btn-submit-loading,
.btn-submit-success { display: none; }

.btn-submit.loading .btn-submit-text { display: none; }
.btn-submit.loading .btn-submit-loading { display: flex; }

.btn-submit.success .btn-submit-text { display: none; }
.btn-submit.success .btn-submit-loading { display: none; }
.btn-submit.success .btn-submit-success { display: flex; }
.btn-submit.success { background: #2e5e3c; border-color: #2e5e3c; }

.btn-submit-loading svg { width: 18px; height: 18px; }
.btn-submit-success svg { width: 18px; height: 18px; }

.spinner-arc { animation: spin 0.8s linear infinite; transform-origin: center; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.form-status {
  font-family: var(--font-body);
  font-size: 0.85rem;
  min-height: 1.5rem;
  font-style: italic;
}
.form-status.error { color: var(--color-acento-claro); }
.form-status.success { color: #6fc98a; }

/* ── Confirmación descarga móvil ─────────────────────────── */
.foto-confirm { position: fixed; inset: 0; z-index: 800; display: flex; align-items: flex-end; justify-content: center; }
.foto-confirm[hidden] { display: none; }
.foto-confirm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.foto-confirm-box {
  position: relative;
  background: var(--color-fondo);
  color: var(--color-texto);
  border-radius: 16px 16px 0 0;
  padding: 1.5rem 1.5rem 2.5rem;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: sheetUp .25s var(--ease-out);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.foto-confirm-preview {
  width: 100%;
  max-height: 45vh;
  object-fit: contain;
  border-radius: 8px;
}
.foto-confirm-msg {
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-texto-sec);
}
.foto-confirm-btns {
  display: flex;
  gap: .75rem;
  width: 100%;
}
.foto-confirm-cancel {
  flex: 1;
  padding: .85rem;
  border: 1px solid rgba(26,23,20,.2);
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-texto-sec);
}
.foto-confirm-ok {
  flex: 2;
  padding: .85rem;
  border-radius: 6px;
  background: var(--color-acento);
  color: var(--color-fondo);
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

/* ── Galería fotos descargables (contacto) ────────────────── */
.contacto-fotos {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(245,240,232,.08);
}
.contacto-fotos-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,.6);
  margin-bottom: 1.25rem;
}
.contacto-fotos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
/* Fila 1: F2 landscape (cols 1-2) · F1 portrait (col 3) · F7 portrait (col 4) */
.foto-dl:nth-child(1) { grid-column: 3; grid-row: 1; aspect-ratio: 3/4; }
.foto-dl:nth-child(2) { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 3/2; }
.foto-dl:nth-child(7) { grid-column: 4; grid-row: 1; aspect-ratio: 3/4; }
/* Fila 2: F3 F4 F5 F6 portrait uniformes */
.foto-dl:nth-child(3) { grid-column: 1; grid-row: 2; aspect-ratio: 2/3; }
.foto-dl:nth-child(4) { grid-column: 2; grid-row: 2; aspect-ratio: 2/3; }
.foto-dl:nth-child(5) { grid-column: 3; grid-row: 2; aspect-ratio: 2/3; }
.foto-dl:nth-child(6) { grid-column: 4; grid-row: 2; aspect-ratio: 2/3; }

.foto-dl {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  display: block;
}
.foto-dl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease-out), filter .35s;
  filter: brightness(.85);
}
.foto-dl-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s;
}
.foto-dl-icon svg { width: 28px; height: 28px; color: #fff; }
.foto-dl:hover img { transform: scale(1.04); filter: brightness(.7); }
.foto-dl:hover .foto-dl-icon { opacity: 1; }
/* Mobile: F2 full width, resto 2 columnas */
@media(max-width:768px) {
  .contacto-fotos-grid { grid-template-columns: repeat(2, 1fr); }
  .foto-dl:nth-child(1) { grid-column: auto; grid-row: auto; aspect-ratio: 2/3; }
  .foto-dl:nth-child(2) { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 3/2; }
  .foto-dl:nth-child(7) { grid-column: auto; grid-row: auto; aspect-ratio: 1/1; }
  .foto-dl:nth-child(3),
  .foto-dl:nth-child(4),
  .foto-dl:nth-child(5),
  .foto-dl:nth-child(6) { grid-column: auto; grid-row: auto; }
}

/* ── 21. FOOTER ───────────────────────────────────────────── */
.site-footer{background:var(--color-fondo-alt);border-top:1px solid rgba(245,240,232,.08);
  padding:clamp(3rem,7vh,5rem) 0 clamp(1.5rem,4vh,3rem)}
.footer-inner{max-width:var(--inner-max);margin:0 auto;
  padding:0 clamp(1.5rem,5vw,4rem)}
@media(min-width:1024px){
  .footer-inner{padding-left:calc(var(--nav-sidebar-w) + clamp(2rem,4vw,4rem))}
}

/* Top: brand + nav */
.footer-top{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);
  align-items:start;margin-bottom:clamp(2rem,5vh,3.5rem)}

/* Brand */
.footer-brand{display:flex;flex-direction:column;gap:.5rem}
.footer-name{font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:clamp(1.6rem,3vw,2.2rem);color:var(--color-texto-inv);line-height:1}
.footer-tagline{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:rgba(245,240,232,.45)}
.footer-location{display:flex;align-items:center;gap:.35em;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:.65rem;color:rgba(245,240,232,.3)}
.footer-social{display:flex;gap:1rem;margin-top:.8rem}
.footer-social a{color:rgba(245,240,232,.35);transition:color var(--t-base)}
.footer-social a:hover{color:var(--color-oro)}

/* Nav rápido */
.footer-nav{display:flex;gap:clamp(2rem,5vw,4rem)}
.footer-nav-col{display:flex;flex-direction:column;gap:.6rem}
.footer-nav-head{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.65rem;color:rgba(245,240,232,.4);margin-bottom:.2rem}
.footer-nav-link{font-family:var(--font-body);font-size:.85rem;
  color:rgba(245,240,232,.5);transition:color var(--t-base)}
.footer-nav-link:hover{color:var(--color-texto-inv)}

/* Bottom */
.footer-bottom{border-top:1px solid rgba(245,240,232,.07);
  padding-top:clamp(1.2rem,3vh,2rem);
  display:flex;flex-direction:column;gap:.4rem}
.footer-copy{font-family:var(--font-body);font-size:.78rem;color:rgba(245,240,232,.25)}
.footer-legal{font-family:var(--font-body);font-size:.73rem;color:rgba(245,240,232,.18)}
.footer-legal a{color:rgba(245,240,232,.3);transition:color var(--t-base)}
.footer-legal a:hover{color:rgba(245,240,232,.6)}
.footer-crafted{font-family:var(--font-label);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.28);display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:.8rem}
.fluentia-link{display:inline-flex;align-items:center}
.fluentia-logo{height:1.9em;display:inline-block;opacity:.5;filter:brightness(0) invert(1);vertical-align:middle;transition:opacity var(--t-base)}
.fluentia-link:hover .fluentia-logo{opacity:.85}

@media(max-width:700px){
  .footer-top{grid-template-columns:1fr}
  .footer-nav{flex-wrap:wrap;gap:2rem 3rem}
  .footer-crafted{font-size:.58rem;letter-spacing:.14em}
  .fluentia-logo{height:1.5em}
}

/* ── 22. VIDEO MODAL ──────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.video-modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  z-index: 1;
  width: min(900px, 95vw);
  transform: scale(0.92);
  transition: transform 0.35s var(--ease-out);
}
.video-modal.open .modal-content { transform: scale(1); }

.modal-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,240,232,0.7);
  transition: color var(--t-base);
}
.modal-close:hover { color: var(--color-texto-inv); }
.modal-close svg { width: 24px; height: 24px; }

.modal-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.modal-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── 23. SCROLL REVEAL UTILITIES ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.5s var(--ease-out),
              clip-path 0.7s var(--ease-out);
}
.reveal-left.in-view {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
}

/* ── 24. RESPONSIVE — MOBILE FIRST OVERRIDES ──────────────── */
@media (max-width: 1023px) {
  .nav-sidebar { display: none; }
  .hamburger { display: flex; }

  .cine-grid { grid-template-columns: repeat(2, 1fr); }

  .section-inner {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
  .docencia-inner {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
  .showreel-header {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
  .hero-content {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
    max-width: 100%;
  }
  .footer-inner {
    padding-left: clamp(1.25rem, 4vw, 2rem);
    padding-right: clamp(1.25rem, 4vw, 2rem);
  }
}

@media (max-width: 767px) {
  .timeline-entry--left, .timeline-entry--right { padding-left: 0; padding-right: 0; }
  .teatro-item { grid-template-columns: 60px 1fr; gap: 1rem; }

  .cine-grid {
    grid-template-columns: 1fr;
  }
  .cine-card--featured { grid-column: 1 / -1; }

  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; justify-content: center; }

  .scroll-indicator { display: none; }
}

/* ── 25. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; clip-path: none; }
  .hero-name-line { clip-path: none; }
  .hero-pre, .hero-tagline, .hero-ctas { opacity: 1; }
  .loader-name { clip-path: none; }
  .gallery-item { opacity: 1; transform: none; }
}

/* ===== APPEND: nuevas secciones ===== */
/* ============================================================
   NUEVAS SECCIONES — El 18 · Microteatro · Cronología · Quiz
   Usa las variables existentes (--color-*, --font-*).
   ============================================================ */
:root{
  --c-oro-hi:   #E0C36A;   /* oro brillante para acentos  */
  --c-red-deep: #5A1622;   /* vino profundo (degradado)   */
  --col:        90px;     /* ancho por año en cronología */
}

/* ---------- 1 · EL 18 ---------- */
.el18{position:relative;overflow:hidden;color:var(--color-texto-inv);
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(224,195,106,.10), transparent 55%),
    linear-gradient(160deg, var(--color-fondo-alt) 0%, var(--c-red-deep) 55%, var(--color-acento) 140%);
  border-top:3px solid var(--color-oro);border-bottom:3px solid var(--color-oro)}
.el18::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 9px);mix-blend-mode:overlay}
.el18 .section-label{color:var(--c-oro-hi)}
.el18-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;position:relative;z-index:1}
.el18-logo-img{width:min(280px,75%);height:auto;display:block;margin-bottom:.6em;
  filter:drop-shadow(0 0 18px rgba(224,195,106,.18))}
.el18-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05;margin:.1em 0 .6em}
.el18-title em{color:var(--c-oro-hi);font-style:italic}
.el18-text{color:#efe3d2;max-width:48ch;margin-bottom:1.5rem;text-align:justify}
.el18-text strong{color:#fff}
.el18-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.el18-pill{border:1px solid rgba(224,195,106,.55);color:var(--c-oro-hi);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;padding:.55em 1.1em;border-radius:40px}
.el18-cta{display:inline-flex;align-items:center;gap:.6em;background:var(--color-oro);
  color:var(--color-fondo-alt);font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.14em;font-size:.84rem;padding:.95em 1.7em;border-radius:3px;
  transition:transform var(--t-base) var(--ease-out),background var(--t-base)}
.el18-cta:hover{transform:translateY(-3px);background:var(--c-oro-hi)}
.el18-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr 1fr 0.7fr;
  gap:.75rem;height:clamp(520px,74vh,760px)}
.el18-ph--wide{grid-column:span 2}
.el18-ph--wide img{object-fit:contain;background:#000}
.el18-ph{position:relative;overflow:hidden;border:2px solid rgba(224,195,106,.35);
  border-radius:4px;background:#000}
.el18-ph:first-child{grid-row:span 2}
.el18-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);
  transition:transform var(--t-slow) var(--ease-out),filter var(--t-base)}
.el18-ph:hover img{transform:scale(1.06);filter:saturate(1)}
.el18-ph figcaption{position:absolute;left:0;bottom:0;right:0;padding:.7em .9em;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;color:var(--c-oro-hi);background:linear-gradient(transparent,rgba(0,0,0,.8))}
@media(max-width:767px){.el18-grid{grid-template-columns:1fr}.el18-mosaic{height:420px}}

/* El 18 — CTA secundario ghost */
.el18-ctas-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding-bottom:clamp(3.5rem,9vh,7rem)}
.el18-cta--ghost{background:transparent;border:1.5px solid rgba(224,195,106,.55);
  color:var(--c-oro-hi);padding:.9em 1.5em}
.el18-cta--ghost:hover{background:rgba(224,195,106,.1);border-color:var(--c-oro-hi);transform:translateY(-3px)}

/* El 18 — bandas internas */
.el18-band{position:relative;z-index:1;padding:clamp(2.5rem,6vh,5rem) 0}
.el18-band--pilares{background:rgba(0,0,0,.22);
  border-top:1px solid rgba(224,195,106,.18);border-bottom:1px solid rgba(224,195,106,.18)}
.el18-band--metodo{background:rgba(0,0,0,.38);
  border-top:1px solid rgba(224,195,106,.15);border-bottom:1px solid rgba(224,195,106,.15)}
.el18-band--bottom{background:rgba(0,0,0,.28);
  border-top:1px solid rgba(224,195,106,.18)}

/* Cabeceras de banda */
.el18-band-head{margin-bottom:clamp(2rem,5vh,3.5rem)}
.el18-band-head--center{text-align:center;padding-top:clamp(2.5rem,6vh,4rem)}
.el18-band-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.08;color:var(--c-oro-hi);margin:.35em 0 0}

/* Tres pilares */
.el18-pilares-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.el18-pilar{border:1px solid rgba(224,195,106,.28);border-radius:6px;overflow:hidden;
  padding:clamp(1.4rem,3vw,2rem);background:rgba(255,255,255,.04);
  transition:border-color var(--t-base),background var(--t-base)}
.el18-pilar-img{margin:-clamp(1.4rem,3vw,2rem) -clamp(1.4rem,3vw,2rem) clamp(1rem,2vw,1.4rem);
  aspect-ratio:4/3;overflow:hidden}
.el18-pilar-img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.05);transition:transform var(--t-slow) var(--ease-out)}
.el18-pilar:hover .el18-pilar-img img{transform:scale(1.05)}
.el18-pilar-collage{margin:-clamp(1.4rem,3vw,2rem) -clamp(1.4rem,3vw,2rem) clamp(1rem,2vw,1.4rem);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#000}
.el18-pilar-collage--bottom{margin:clamp(1rem,2vw,1.4rem) -clamp(1.4rem,3vw,2rem) -clamp(1.4rem,3vw,2rem)}
.el18-pilar-collage img{width:100%;height:auto;display:block;
  filter:saturate(.85) contrast(1.05);transition:transform var(--t-slow) var(--ease-out)}
.el18-pilar:hover .el18-pilar-collage img{transform:scale(1.03)}
.el18-pilar-collage--3 img:last-child{grid-column:span 2}
.el18-pilar:hover{border-color:rgba(224,195,106,.65);background:rgba(255,255,255,.07)}
.el18-pilar-num{font-family:var(--font-display);font-weight:900;font-style:italic;
  font-size:3rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--color-oro);margin-bottom:.3em}
.el18-pilar-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.4rem);color:#fff;margin:0 0 .65em}
.el18-pilar-text{color:#ddd4c0;font-size:.93rem;line-height:1.65;margin-bottom:.9em;text-align:justify}
.el18-pilar-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.38em}
.el18-pilar-list li{color:var(--c-oro-hi);font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;
  padding-left:1.1em;position:relative}
.el18-pilar-list li::before{content:"—";position:absolute;left:0;opacity:.65}

/* Método */
.el18-metodo-inner{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,5rem);align-items:start}
.el18-metodo-quote{font-family:var(--font-body);font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1.55;color:#fff;
  border-left:3px solid var(--color-oro);padding-left:1.4em;margin:0 0 1.4em;text-align:justify}
.el18-text--cita{border-left:2px solid rgba(224,195,106,.35);padding-left:1em;
  color:#cfc3ac;font-style:italic}

/* Producciones */
.el18-prod-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:1rem;padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.el18-prod-card{border:1px solid rgba(224,195,106,.22);border-radius:6px;
  padding:1.4rem;background:rgba(255,255,255,.04);
  transition:border-color var(--t-base),background var(--t-base),transform var(--t-base) var(--ease-out)}
.el18-prod-card:hover{border-color:rgba(224,195,106,.58);background:rgba(255,255,255,.08);transform:translateY(-4px)}
.el18-prod-card--featured{border-color:rgba(224,195,106,.45);background:rgba(224,195,106,.06)}
.el18-prod-year{font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--c-oro-hi);margin-bottom:.55em}
.el18-prod-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.2rem);color:#fff;margin:0 0 .3em;line-height:1.2}
.el18-prod-meta{font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.1em;font-size:.65rem;color:rgba(224,195,106,.65);margin:0 0 .75em}
.el18-prod-text{color:#ddd4c0;font-size:.87rem;line-height:1.6;margin:0}

/* Premio + contacto */
.el18-bottom-grid{display:grid;grid-template-columns:1fr 1.5fr;
  gap:clamp(2rem,5vw,5rem);align-items:center}
.el18-premio{border:2px solid var(--color-oro);border-radius:6px;overflow:hidden;
  padding:clamp(1.5rem,3vw,2.25rem);text-align:center;background:rgba(224,195,106,.06)}
.el18-premio-img{margin:-clamp(1.5rem,3vw,2.25rem) -clamp(1.5rem,3vw,2.25rem) clamp(2.5rem,5vw,3.5rem);
  aspect-ratio:16/9;overflow:hidden;
  box-shadow:0 0 0 3px var(--color-oro),0 0 0 6px rgba(224,195,106,.18),0 8px 32px rgba(0,0,0,.55)}
.el18-premio-img img{width:100%;height:100%;object-fit:cover;object-position:center 25%;
  filter:saturate(.9) contrast(1.05)}
.el18-premio-tag{font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.2em;font-size:.68rem;color:var(--c-oro-hi);display:block;margin-bottom:.6em}
.el18-premio-nombre{font-family:var(--font-display);font-weight:900;font-style:italic;
  font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.02;color:var(--color-oro);margin:1.8rem 0 .1em}
.el18-premio-anio{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,2vw,1.3rem);color:rgba(224,195,106,.55);margin:0 0 .9em}
.el18-premio-desc{font-style:italic;color:#cfc3ac;font-size:.9rem;line-height:1.6;margin:0;text-align:justify}
.el18-contacto-dir{color:#e8e0d0;font-size:.95rem;line-height:1.6;margin:.5em 0 1.4em}
.el18-contacto-dir em{color:rgba(224,195,106,.65);font-style:normal;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.el18-contacto-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.el18-contacto-link{display:flex;align-items:center;gap:.7em;
  color:#ddd4c0;font-size:.95rem;transition:color var(--t-base)}
.el18-contacto-link:hover{color:#fff}
.el18-contacto-link svg{flex-shrink:0;color:var(--c-oro-hi)}

/* Responsive El 18 ampliado */
@media(max-width:1024px){
  .el18-pilares-grid{grid-template-columns:1fr 1fr}
  .el18-prod-grid{grid-template-columns:1fr 1fr}
  .el18-pilar:nth-child(3){grid-column:span 2}
  .el18-prod-card--featured{grid-column:span 2}
}
@media(max-width:767px){
  .el18-pilares-grid,.el18-metodo-inner,.el18-prod-grid,.el18-bottom-grid{grid-template-columns:1fr}
  .el18-pilar:nth-child(3),.el18-prod-card--featured{grid-column:auto}
}

/* ---------- 2 · MICROTEATRO ---------- */
.micro{background:#efe7d8}
.micro-head{text-align:center;max-width:60ch;margin:0 auto clamp(1.5rem,4vh,2.5rem)}
.micro-kicker{font-style:italic;color:rgba(245,240,232,.6);font-size:1.05rem;max-width:48ch;margin:0 auto}

/* Time picker */
.micro-time-row{display:flex;justify-content:center;gap:1rem;margin:0 auto clamp(1.5rem,4vh,2.5rem)}
.micro-time{display:flex;flex-direction:column;align-items:center;
  width:88px;padding:1em .5em;border-radius:10px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(224,195,106,.25);
  color:rgba(245,240,232,.7);
  transition:background var(--t-base),border-color var(--t-base),transform var(--t-base) var(--ease-out)}
.micro-time:hover{background:rgba(255,255,255,.1);border-color:rgba(224,195,106,.55);transform:translateY(-3px)}
.micro-time.is-active{background:rgba(224,195,106,.15);border-color:var(--color-oro);color:#fff;
  box-shadow:0 0 0 1px var(--color-oro) inset}
.mt-mins{font-family:var(--font-display);font-weight:900;font-size:2.2rem;line-height:1}
.mt-label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;opacity:.7;margin-top:.2em}

.micro-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:.9rem;max-width:920px;margin:0 auto}
.micro-opt{text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(224,195,106,.2);
  border-radius:8px;padding:1.25em 1.2em;color:rgba(245,240,232,.85);
  transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),background var(--t-base)}
.micro-opt:hover{transform:translateY(-4px);border-color:rgba(224,195,106,.55);background:rgba(255,255,255,.09)}
.micro-opt.is-active{border-color:var(--color-oro);background:rgba(224,195,106,.12);color:#fff;
  box-shadow:0 0 0 1px var(--color-oro) inset}
.micro-opt .mo-emoji{font-size:1.6rem;display:block;margin-bottom:.3em}
.micro-opt .mo-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#fff;display:block;margin-bottom:.3em}
.micro-opt .mo-sub{font-size:.84rem;color:rgba(245,240,232,.5);font-style:italic;display:block}
.micro-result{max-width:760px;margin:clamp(2rem,5vh,3.5rem) auto 0;background:var(--color-fondo-alt);
  color:var(--color-texto-inv);border-radius:8px;padding:clamp(1.75rem,4vw,3rem);
  border:2px solid var(--color-oro);opacity:0;transform:translateY(20px) scale(.98);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);pointer-events:none}
.micro-result.is-show{opacity:1;transform:none;pointer-events:auto}
.micro-result .mr-tag{color:var(--c-oro-hi);font-family:var(--font-label);
  text-transform:uppercase;letter-spacing:.2em;font-size:.74rem}
.micro-result .mr-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,4vw,2.2rem);margin:.25em 0 .1em}
.micro-result .mr-dur{color:var(--c-oro-hi);font-style:italic;margin-bottom:1em}
.micro-result .mr-body{color:#e8ddca}.micro-result .mr-body p{margin:.7em 0}
.micro-result .mr-tip{margin-top:1.3em;padding-top:1.1em;border-top:1px solid rgba(224,195,106,.3);
  font-style:italic;color:var(--c-oro-hi);font-size:.96rem}
.micro-result .mr-tip b{font-style:normal;font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;display:block;margin-bottom:.3em}

/* ---------- 3 · CRONOLOGÍA HORIZONTAL ---------- */
.crono{background:linear-gradient(180deg,var(--color-fondo),#efe6d4);overflow:hidden}
.crono-head{text-align:center;max-width:64ch;margin:0 auto}
.crono-kicker{font-style:italic;color:var(--color-texto-suave);font-size:1.1rem;margin:0 auto 1.4em;max-width:54ch}
.crono-legend{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;color:var(--color-texto-suave)}
.crono-legend i{display:inline-block;width:22px;height:0;border-top:2px solid;vertical-align:middle;margin-right:.5em}
.lg-era{color:#c2b495}.lg-work{color:var(--color-texto)}.lg-mile{color:var(--color-acento)}
.crono-stage{position:relative;margin-top:clamp(1.5rem,4vh,2.5rem)}
.crono-wrap{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;cursor:grab}
.crono-wrap.dragging{cursor:grabbing;user-select:none}
.crono-wrap::-webkit-scrollbar{height:9px}
.crono-wrap::-webkit-scrollbar-track{background:rgba(26,23,20,.06)}
.crono-wrap::-webkit-scrollbar-thumb{background:rgba(123,31,46,.45);border-radius:9px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--col));
  grid-auto-rows:minmax(32px,auto);min-width:max-content;padding:80px 140px 160px}
.era{position:absolute;transform:translateY(-50%);font-family:'Caveat',var(--font-display);
  font-weight:700;font-size:clamp(80px,13vw,150px);line-height:1;color:#cbbd9d;opacity:.6;
  white-space:nowrap;z-index:0;pointer-events:none;user-select:none}
.axis{position:relative;grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(var(--cols),var(--col));border-top:2px solid var(--color-acento);z-index:1}
.axis .year{font-family:'EB Garamond',var(--font-body);font-size:12px;color:var(--color-acento);
  text-align:center;padding-top:6px;position:relative}
.axis .year::before{content:"";position:absolute;top:-1px;left:50%;width:1px;height:6px;
  background:var(--color-acento);transform:translateX(-50%)}
.work{position:relative;z-index:3;font-family:'Caveat',var(--font-display);font-size:24px;
  color:var(--color-texto);line-height:1.15;padding:2px 6px;white-space:normal;
  max-width:calc(var(--col)*1.6);cursor:default}
.work .w-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle}
.work--teatro .w-dot{background:var(--color-oro)}
.work--zarzuela .w-dot{background:var(--color-acento-claro)}
.work--tv .w-dot{background:#2b2620}
.work--cine .w-dot{background:#3f6f5f}
.work small{display:block;font-family:'EB Garamond',var(--font-body);font-size:11px;
  font-style:italic;opacity:.65;letter-spacing:.02em;line-height:1.2}
.work .w-vid{color:var(--color-acento);font-size:12px;margin-left:5px;vertical-align:middle}
/* hover suave en título */
.work:hover{color:#000}
.work:hover .w-dot{box-shadow:0 0 0 3px rgba(201,168,76,.3)}

/* ── FOTOS — fila arriba (row 1) y fila dinámica abajo ── */
.strip-photo{position:relative;z-index:1;margin:2px 4px;
  overflow:visible;
  transform:rotate(var(--tilt,0deg));
  transform-origin:top center;
  transition:transform .3s var(--ease-out);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.65))}
.strip-photo:hover{transform:rotate(0deg) scale(1.06);z-index:20}
/* chincheta */
.strip-photo::before{content:"";position:absolute;top:-8px;left:50%;
  transform:translateX(-50%);width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#f0dc88,#9a7010);
  box-shadow:0 2px 5px rgba(0,0,0,.55);z-index:3}
/* marco estilo foto Polaroid */
.strip-photo--up{align-self:end}
.strip-photo--down{align-self:start}
/* tamaño estándar fijo — todas iguales independientemente de los píxeles originales */
.strip-photo img{display:block;width:calc(var(--col)*2);height:auto;max-height:420px;
  object-fit:cover;background:#1a1714;border:6px solid #fff;
  border-bottom-width:32px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* fotos horizontales detectadas por JS: ancho x3 columnas */
.strip-photo--landscape{grid-column-end:span 3 !important}
.strip-photo--landscape img{width:calc(var(--col)*3)}
.strip-photo--landscape figcaption{width:calc(var(--col)*3)}
.strip-photo figcaption{font-family:'Caveat',var(--font-display);font-size:14px;
  color:#333;background:#fff;text-align:center;
  padding:2px 6px 8px;width:calc(var(--col)*2);
  white-space:normal;line-height:1.2;
  margin-top:-28px;position:relative}
.strip-photo figcaption .sp-title{display:block;font-size:15px;font-weight:700;line-height:1.2;margin-bottom:2px}
.strip-photo figcaption .sp-meta{display:block;font-family:'EB Garamond',var(--font-body);
  font-size:11px;font-style:italic;opacity:.65;letter-spacing:.02em;line-height:1.2}
.strip-photo figcaption .m-play{background:none;border:none;cursor:pointer;
  color:var(--color-acento);font-size:11px;margin-left:3px;vertical-align:middle;padding:0}
.milestone{position:relative;z-index:3;font-family:'EB Garamond',var(--font-body);font-size:11.5px;
  color:var(--color-acento);line-height:1.18;padding:2px 4px;max-width:155px}
.milestone .m-year{display:block;font-weight:600;letter-spacing:.05em}
.milestone::after{content:"";display:block;width:1px;height:34px;background:var(--color-acento);margin:4px auto 0}
.crono-hint{position:absolute;top:0;right:0;bottom:0;width:96px;pointer-events:none;display:flex;
  align-items:center;justify-content:flex-end;padding-right:14px;
  background:linear-gradient(90deg,transparent,var(--color-fondo) 78%);transition:opacity .5s;z-index:6}
.crono-hint.gone{opacity:0}
.crono-hint span{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;color:var(--color-acento);display:flex;align-items:center;gap:.4em;
  animation:cronoNudge 1.6s var(--ease-out) infinite}
@keyframes cronoNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(max-width:767px){:root{--col:100px}.era{font-size:62px;opacity:.5}
  .timeline{padding:60px 24px 120px}.work{font-size:20px}}

/* ---------- 4 · QUIZ ---------- */
.quiz{background:var(--color-fondo-alt);color:var(--color-texto-inv)}
.quiz .section-label{color:var(--c-oro-hi)}
.quiz-head{text-align:center;max-width:58ch;margin:0 auto clamp(2rem,5vh,3.25rem)}
.quiz-card{max-width:680px;margin:0 auto;background:rgba(255,255,255,.03);
  border:1px solid rgba(224,195,106,.28);border-radius:10px;
  padding:clamp(1.75rem,4vw,2.9rem);position:relative;min-height:330px}
.quiz-progress{display:flex;gap:8px;justify-content:center;margin-bottom:1.8em}
.quiz-progress span{width:34px;height:4px;border-radius:3px;background:rgba(224,195,106,.25)}
.quiz-progress span.on{background:var(--c-oro-hi)}
.quiz-q{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,3.5vw,2rem);
  text-align:center;margin-bottom:1.4em;line-height:1.2}
.quiz-answers{display:grid;gap:.75rem}
.quiz-ans{text-align:left;background:transparent;color:var(--color-texto-inv);
  border:1px solid rgba(224,195,106,.3);border-radius:6px;padding:1em 1.2em;
  font-family:var(--font-body);font-size:1.02rem;
  transition:transform var(--t-base) var(--ease-out),background var(--t-base),border-color var(--t-base)}
.quiz-ans:hover{transform:translateX(6px);background:rgba(224,195,106,.1);border-color:var(--color-oro)}
.quiz-step{display:none}.quiz-step.is-active{display:block;animation:quizIn .5s var(--ease-out)}
@keyframes quizIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quiz-result{text-align:left}
.qr-layout{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:clamp(1.2rem,3vw,2rem);align-items:start}
.qr-img-wrap{margin:0;border-radius:6px;overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.55);
  border:4px solid rgba(224,195,106,.35);
  transform:rotate(-2deg);
  transition:transform .3s var(--ease-out)}
.qr-img-wrap:hover{transform:rotate(0deg) scale(1.03)}
.qr-img{width:100%;height:clamp(160px,30vh,280px);object-fit:cover;object-position:top center;display:block}
.qr-text{padding-top:.4rem}
.quiz-result .qr-tag{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:var(--c-oro-hi);display:block;margin-bottom:.4em}
.quiz-result .qr-name{font-family:var(--font-display);font-weight:900;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);color:var(--c-oro-hi);margin:.1em 0 .1em;line-height:1.05}
.quiz-result .qr-obra{font-style:italic;color:#d8cdb8;margin-bottom:.9em;font-size:.92rem}
.quiz-result .qr-desc{color:#e8ddca;max-width:40ch;margin:0 0 1.4em;font-size:.9rem;line-height:1.6}
@media(max-width:520px){
  .qr-layout{grid-template-columns:1fr}
  .qr-img{height:220px}
}
.quiz-restart{background:none;border:1px solid var(--color-oro);color:var(--c-oro-hi);
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;
  padding:.8em 1.6em;border-radius:3px;transition:background var(--t-base),color var(--t-base)}
.quiz-restart:hover{background:var(--color-oro);color:var(--color-fondo-alt)}

@media (prefers-reduced-motion: reduce){
  .work-media{transition:none}
  .micro-result{transition:none}
}

/* ---------- 5 · HAMLET CITAS ---------- */
.hq-section{position:relative;overflow:hidden;
  background:#0d0608;
  color:#e8d8c0;
  padding:clamp(4rem,10vh,8rem) 0}

/* Telón — dos paneles que se abren */
.hq-curtain{position:absolute;top:0;bottom:0;width:52%;z-index:10;
  background:
    repeating-linear-gradient(175deg,#5a0e18 0 3px,#3d0910 3px 7px);
  box-shadow:inset -8px 0 24px rgba(0,0,0,.6)}
.hq-curtain--left{left:0;transform-origin:left center}
.hq-curtain--right{right:0;transform-origin:right center;
  box-shadow:inset 8px 0 24px rgba(0,0,0,.6)}

/* Contenido interior */
.hq-inner{position:relative;z-index:1}
.hq-header{text-align:center;margin-bottom:clamp(2.5rem,6vh,5rem)}
.hq-pasaje-with-img{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
  max-width:900px;margin:0 auto clamp(2rem,5vh,3.5rem)}
.hq-pasaje-with-img .hq-pasaje{margin:0}
.hq-side-img img{width:clamp(130px,18vw,200px);height:auto;
  filter:grayscale(1) contrast(1.1) brightness(.9);
  border:1px solid rgba(201,168,76,.2);
  box-shadow:0 0 30px rgba(0,0,0,.65)}
@media(max-width:1023px){
  .hq-curtain{display:none}
}
@media(max-width:600px){.hq-pasaje-with-img{grid-template-columns:1fr}
  .hq-side-img{display:none}}
.hq-header .section-label{color:rgba(201,168,76,.7)}
.hq-title{font-family:var(--font-display);font-weight:700;font-style:italic;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;color:#c9a84c;margin:.4em 0 0}

/* Bloque único por pasaje */
.hq-quote{margin:0;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2rem) clamp(1.8rem,4vw,2.8rem);
  border-left:2px solid rgba(201,168,76,.35);
  background:rgba(255,255,255,.03);
  border-radius:0 6px 6px 0;
  width:100%}
.hq-quote p{font-family:var(--font-body);font-style:italic;
  font-size:clamp(.92rem,1.5vw,1.05rem);
  line-height:1.9;color:rgba(232,216,192,.85);
  margin:0 0 1.1em}
.hq-quote p:last-child{margin-bottom:0}

/* Pasajes */
.hq-pasaje{margin:0 auto clamp(2rem,5vh,3.5rem);max-width:760px;width:100%}
.hq-pasaje-label{display:inline-block;
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.2em;font-size:.65rem;
  color:rgba(201,168,76,.5);border:1px solid rgba(201,168,76,.2);
  padding:.3em .9em;border-radius:20px;margin-bottom:clamp(1.2rem,3vh,2rem)}

/* Divisor entre pasajes */
.hq-divisor{display:flex;align-items:center;gap:1rem;
  margin:clamp(2rem,5vh,3.5rem) auto;
  max-width:760px}
.hq-divisor span:first-child,
.hq-divisor span:last-child{flex:1;height:1px;background:rgba(201,168,76,.2)}
.hq-divisor-icon{color:rgba(201,168,76,.5);font-size:.9rem;flex-shrink:0}


/* ---------- 5 · JUANMA SIN FILTROS ---------- */
.jo{background:var(--color-fondo);color:var(--color-texto);overflow-x:clip}
.jo-header{text-align:center;max-width:52ch;margin:0 auto clamp(2rem,5vh,4rem)}
.jo-intro{color:var(--color-texto-sec);font-size:clamp(.9rem,1.1vw,1.05rem);line-height:1.65;margin-top:.8em}

/* Stage: masonry con columnas CSS — fotos y cards mezclados */
.jo-stage{
  columns:3;
  column-gap:clamp(.75rem,1.5vw,1.5rem);
  /* padding lateral para que las rotaciones no queden recortadas por overflow */
  padding:0 2px 2rem;
}
.jo-portrait,.jo-card{
  break-inside:avoid;
  display:block;
  margin-bottom:clamp(.75rem,1.5vw,1.5rem);
}

/* Fotos */
.jo-portrait{position:relative;border-radius:6px;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  transform:rotate(var(--pt,0deg));
  transition:transform .4s var(--ease-out)}
.jo-portrait:hover{transform:rotate(0deg) scale(1.04) !important;z-index:3;position:relative}
.jo-portrait img{width:100%;height:auto;object-fit:cover;object-position:top center;display:block}

/* Tarjetas */
.jo-card{
  background:var(--color-fondo-alt);
  border:1px solid rgba(201,168,76,.18);
  border-radius:10px;
  padding:clamp(.9rem,1.8vw,1.6rem);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  transform:rotate(var(--card-tilt,0deg));
  transition:transform .35s var(--ease-out),box-shadow .35s;
  cursor:default;
}
.jo-card:hover{
  transform:rotate(0deg) translateY(-5px) !important;
  box-shadow:0 20px 48px rgba(0,0,0,.4);
}
.jo-card-emoji{font-size:clamp(1.4rem,1.8vw,1.8rem);line-height:1;display:block;margin-bottom:.5em}
.jo-card-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(.85rem,1.3vw,1.2rem);color:#fff;
  margin:0 0 .45em;line-height:1.15}
.jo-card-body{color:rgba(245,240,232,.78);font-size:clamp(.78rem,1vw,.9rem);line-height:1.6;margin:0}

/* Responsive — portátil mediano (MacBook 13-14") */
@media(max-width:1100px){
  .jo-stage{columns:2;column-gap:clamp(.75rem,2vw,1.25rem)}
  /* Sin rotación en 2 columnas: más espacio, menos riesgo de recorte */
  .jo-portrait{transform:none !important}
  .jo-card{transform:none !important}
  .jo-card:hover{transform:translateY(-4px) !important}
}
@media(max-width:600px){.jo-stage{columns:1}}
@media(max-width:480px){.jo-portrait{transform:none !important}}

/* ===== Failsafe: si main.js no se ejecuta, no dejar pantalla de carga colgada ===== */
#loading-screen { animation: ls-failsafe 0s linear 4s forwards; }
@keyframes ls-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }