/* ═════════ Versión horizontal ═════════
   Se activa con ?vista=horizontal (clase .h-mode en <html>). Comparte HTML, contenido,
   estilos y comportamiento con la vertical: aquí solo cambia la disposición.
   Por debajo de 1024px de ancho no se aplica nada y la web sigue en vertical.                */

.view-toggle { display: none; }

@media (min-width: 1024px) {
  .view-toggle { display: inline-flex; }

  /* El body es el carril que se desplaza en horizontal */
  html.h-mode { height: 100%; overflow: hidden; scroll-padding-top: 0; }
  .h-mode body {
    display: flex; flex-wrap: nowrap; height: 100dvh;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-timeline: --page x;                     /* alimenta la barra de progreso */
    scrollbar-width: none;
  }
  .h-mode body::-webkit-scrollbar { display: none; }
  .h-mode body > * { flex: none; }

  /* La barra no puede ser sticky en un carril horizontal: fija arriba */
  .h-mode header.bar { position: fixed; left: 0; right: 0; }

  /* Progreso: línea fina abajo que crece con el recorrido */
  .h-mode body::before {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 25;
    background: var(--accent); transform-origin: left; transform: scaleX(0);
  }
  @supports (animation-timeline: scroll()) {
    .h-mode body::before { animation: h-progress linear both; animation-timeline: --page; }
    @keyframes h-progress { to { transform: scaleX(1); } }
  }

  /* 1 · Reel a pantalla completa */
  .h-mode .reel { width: 100vw; height: 100dvh; margin: 0; }
  .h-mode .reel-btn.video { height: 100dvh; min-height: 0; }

  /* 2 · Panel "Work": título grande que abre la sección */
  .h-mode .workhead {
    width: clamp(16rem, 24vw, 22rem); height: 100dvh; max-width: none; margin: 0;
    padding: 0 var(--pad-x); flex-direction: column; justify-content: center; align-items: flex-start;
  }
  .h-mode .workhead:not(.filtered) { width: 0; padding: 0; overflow: hidden; }   /* sin filtro: no hay panel */
  .h-mode .workhead #flabel { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -.045em; }

  /* 3 · Un panel por proyecto: título + vídeo + tarjeta a la izquierda, fichas a la derecha */
  .h-mode #projects { display: flex; height: 100dvh; }
  .h-mode .proj {
    flex: none; height: 100dvh; display: flex; align-items: center;
    padding: calc(3.5rem + 1.5rem) clamp(2rem, 4vw, 4rem) 2.5rem;
  }
  .h-mode .proj::after { background: linear-gradient(90deg, var(--bg), transparent 14%, transparent 86%, var(--bg)); }
  .h-mode .proj > .in {
    max-width: none; margin: 0; display: grid;
    grid-template-columns: auto auto; grid-template-rows: auto auto;
    column-gap: clamp(2rem, 4vw, 4rem); align-items: start;
  }
  .h-mode .proj > .in > h2 { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 1.25rem; font-size: clamp(2rem, 4.2vw, 3.6rem); }
  .h-mode .stage { grid-column: 1; grid-row: 2; width: min(54vw, calc((100dvh - 19rem) * 16 / 9)); }
  .h-mode .proj .o-h .meta, .h-mode .proj.alt .o-h .meta { margin: -3.5rem 1.5rem 0; }
  .h-mode .sheets, .h-mode .proj.alt .sheets {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0;
    width: min(26vw, 44dvh);
    grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c";
  }
  .h-mode .sheets > :nth-child(1) .sheet-btn { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .h-mode #empty { width: 60vw; height: 100dvh; display: flex; align-items: center; }
  .h-mode #empty[hidden] { display: none; }

  /* 4 · About en un panel */
  .h-mode .about { width: 100vw; height: 100dvh; display: flex; align-items: center; border-top: 0; padding-block: calc(3.5rem + 1.5rem) 2.5rem; }
  .h-mode .about > .in { width: 100%; }
  .h-mode .about-grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .h-mode .about-photo { height: min(68dvh, 40rem); width: auto; }

  /* 4b · Contacto en su propio panel */
  .h-mode .contact { width: 100vw; height: 100dvh; display: flex; align-items: center; border-top: 0; padding-block: calc(3.5rem + 1.5rem) 2.5rem; box-sizing: border-box; }
  .h-mode .contact > .in { width: 100%; }
  .h-mode .contact-grid { align-items: center; }
  .h-mode .cf-field textarea { min-height: 5rem; }

  /* 5 · Pie como cierre del recorrido */
  .h-mode .foot {
    width: clamp(16rem, 22vw, 20rem); height: 100dvh; margin: 0;
    flex-direction: column; justify-content: flex-end; align-items: flex-start;
    border-top: 0; border-left: 1px solid var(--line);
  }
}

/* ═════════ Cintillo de marcas fijo abajo (solo en horizontal) ═════════
   En el carril horizontal el cintillo no es un panel más: queda fijo en el pie de la pantalla,
   siempre visible. Los paneles, el guía 3D y el bloque del banner le dejan su espacio. */
@media (min-width: 1024px) {
  .h-mode { --strip: 3.75rem; }
  .h-mode .clients {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 18;
    display: flex; align-items: center; gap: 1.5rem; height: var(--strip); padding: 0 0 0 var(--pad-x);
    background: var(--glass); border-top: 1px solid var(--line); border-bottom: 0;
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  }
  .h-mode .clients-title { flex: none; margin: 0; text-align: left; white-space: nowrap; }
  .h-mode .clients .marquee { flex: 1; min-width: 0; }
  .h-mode .logo-mark { height: calc(var(--h, 1.25) * .8rem); }             /* logos algo más bajos: caben en la franja */
  .h-mode .marquee-track li { font-size: 1rem; }
  /* lo que quedaba en el borde de abajo sube por encima de la franja */
  .h-mode .proj, .h-mode .about, .h-mode .contact { padding-bottom: calc(var(--strip) + 1.5rem); }
  .h-mode .reel-intro { bottom: calc(var(--strip) + 1.5rem); }
  .h-mode .foot { padding-bottom: calc(var(--strip) + 1.5rem); }
  .h-mode .guide { bottom: var(--strip); }
  html.h-mode { --gb: var(--strip); }                                      /* globo del guía (gana a :root de guide.css) */
  .h-mode .guide-hide { bottom: calc(var(--strip) + 420px - 2.75rem); }
  .h-mode .guide-show { bottom: calc(var(--strip) + 1rem); }
}

/* Icono del botón de vista: flechas horizontales en vertical, verticales en horizontal */
.view-toggle .vt-v, .h-mode .view-toggle .vt-h { display: none; }
.h-mode .view-toggle .vt-v { display: inline; }