/* Vídeos a pantalla completa. El mismo breakpoint se usa en ambos controladores. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
  :root { --mobile-screen: 100vh; }
  @supports (height: 100svh) { :root { --mobile-screen: 100svh; } }
  @supports (height: 100dvh) { :root { --mobile-screen: 100dvh; } }
  html { scroll-padding-top: 100px; }

  .topbar { top: max(12px, env(safe-area-inset-top)); height: 62px; }
  .hero { height: var(--mobile-screen); min-height: 0; max-height: none; }
  .hero-media { inset: 0; transform: none !important; will-change: auto; }
  .hero-media .hero-art, .hero-video {
    inset: 0; width: 100%; max-width: none; height: 100%;
    object-fit: cover; object-position: 75% center; animation: none;
  }
  .hero:after {
    background: linear-gradient(180deg, #f1f1f1ed 0%, #f1f1f1bb 23%, transparent 42%, transparent 55%, #f1f1f1e8 82%, #f1f1f1fa 100%);
  }
  .hero-content {
    height: 100%; max-width: none; display: flex; flex-direction: column;
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  .hero .eyebrow { font-size: .7rem; line-height: 1.4; margin-bottom: 10px; max-width: 290px; }
  .hero h1 { font-size: clamp(3.35rem, 14vw, 5.6rem); line-height: .89; max-width: 100%; }
  .hero .hero-copy { margin: auto 0 0; max-width: 390px; font-size: .9rem; line-height: 1.45; }
  .hero-actions { margin-top: 16px; gap: 16px; flex-wrap: nowrap; }
  .hero-actions .button { min-height: 44px; padding: 13px 16px; font-size: .8rem; gap: 12px; }
  .hero-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: .8rem; white-space: nowrap; }
  .hero-meta, .hero-stamp, .hero-trailer, .hero-bottom, .noro-quote { display: none; }
  .motion-control { min-width: 44px; height: 44px; bottom: max(8px, env(safe-area-inset-bottom)); }

  .nora-journey { height: auto; min-height: 0; padding: 0; scroll-margin-top: -100px; }
  .nora-journey .journey-stage {
    height: auto; min-height: 0; position: relative; display: block;
    padding: var(--mobile-screen) 0 0;
  }
  .nora-journey .journey-film, .nora-journey .journey-film.is-manual,
  .nora-journey .journey-art {
    inset: 0; width: 100%; height: var(--mobile-screen);
    object-fit: cover; object-position: 54% center; transform: none !important;
  }
  .nora-journey .journey-art { opacity: 1; will-change: auto; }
  .nora-journey .journey-stage:after {
    height: var(--mobile-screen); bottom: auto;
    background: linear-gradient(#ededed55, transparent 25%, transparent 75%, #17171744);
  }
  .nora-journey .journey-content { width: calc(100% - 40px); margin: 0 auto; padding-top: 40px; }
  .nora-journey .journey-panels { display: block; width: 100%; max-width: none; height: auto; }
  .nora-journey .journey-panel {
    position: relative; inset: auto; opacity: 1; visibility: visible; transform: none !important;
    padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid #17171726;
  }
  .nora-journey .journey-panel h2 { font-size: clamp(3.2rem, 12vw, 3.6rem); }
  .nora-journey .journey-panel h2 br { display: none; }
  .nora-journey .journey-panel p { max-width: 460px; font-size: 1rem; }
  .nora-journey .journey-nav, .nora-journey .journey-hint { display: none; }
  .nora-journey .journey-signal { top: calc(100px + env(safe-area-inset-top)); right: 20px; }
  .nora-journey .journey-note { position: relative; inset: auto; margin: 0 20px 40px; width: max-content; max-width: calc(100% - 40px); }
  .nora-journey .journey-film-controls,
  .nora-journey.is-viewing .journey-film-controls {
    position: absolute; top: calc(var(--mobile-screen) - 76px - env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right)); bottom: auto; margin: 0; align-items: flex-end;
  }
  .journey-film-controls button { min-height: 44px; }
  .nora-journey .journey-film-controls span { display: none; }
  .nora-journey.is-viewing .journey-content, .nora-journey.is-viewing .journey-note {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nora-journey.is-viewing .journey-stage { padding-top: var(--mobile-screen); }
}


@media (max-width: 370px) {
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding-inline: 12px; font-size: .75rem; }
  .hero-actions .text-link { font-size: .75rem; }
}

@media (max-width: 760px) and (max-height: 670px) {
  .hero-content { padding-top: calc(88px + env(safe-area-inset-top)); padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: 3.35rem; }
  .hero .hero-copy { font-size: .8125rem; line-height: 1.4; }
  .hero-actions { margin-top: 10px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .hero-content { padding-top: calc(86px + env(safe-area-inset-top)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(2.8rem, 14vh, 4rem); max-width: 50%; }
  .hero .eyebrow { display: none; }
  .hero .hero-copy { max-width: 43%; font-size: .8125rem; line-height: 1.35; }
  .hero-actions { margin-top: 10px; }
  .hero:after { background: linear-gradient(90deg, #f1f1f1f5, #f1f1f1cc 35%, transparent 60%); }
  .hero-media .hero-art, .hero-video { object-position: 70% center; }
  .nora-journey .journey-signal { top: 96px; }
  .motion-control { left: auto; right: max(12px, env(safe-area-inset-right)); }
  .nora-journey .journey-film-controls, .nora-journey.is-viewing .journey-film-controls {
    top: calc(var(--mobile-screen) - 104px - env(safe-area-inset-bottom));
  }
}

@media (max-width: 1024px) and (max-height: 360px) and (orientation: landscape) and (pointer: coarse) {
  .hero h1 { display: flex; gap: .2em; max-width: none; font-size: 2.7rem; }
  .hero .hero-copy { max-width: 47%; }
  .hero-content { padding-top: 82px; padding-bottom: 20px; }
}

/* Expand the header itself: its transform/backdrop otherwise contain fixed children. */
/* Include landscape phones, matching the mobile video layout and menu controller. */
@media (max-width: 950px), (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
  .topbar .menu-toggle { display: block; min-height: 44px; }
  .topbar:not(.menu-open) .nav { display: none; }
  .topbar.menu-open {
    position: fixed; inset: 0; transform: none; width: 100%; max-width: none;
    height: 100vh; height: 100svh; height: 100dvh; margin: 0;
    box-sizing: border-box; border: 0; border-radius: 0;
    background: #f9f9f9; backdrop-filter: none; z-index: 1000;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr); gap: 20px 12px;
    align-items: center;
  }
  .topbar.menu-open .nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: static; grid-column: 1 / -1; align-self: stretch;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: 6px; gap: 12px; font-size: 1.25rem;
  }
  .topbar.menu-open .menu-toggle { flex-shrink: 0; white-space: nowrap; }
  .topbar.menu-open .nav a { flex-shrink: 0; min-height: 44px; }
}