/* ==========================================================================
   Tráiler con caja de 53 pies: escena fija en 3D con el scroll (trailer-53.js).
   Sin JavaScript, sin WebGL o con «reducir movimiento» queda como bloque
   normal con la imagen del tráiler; trailer-53.js agrega .tr53--animado.
   ========================================================================== */

.tr53 { position: relative; background: #fff; }
.tr53 .eyebrow i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; }

/* ------------------------------------------------------------------ versión estática */
.tr53__fijo { max-width: 1440px; margin: auto; padding: 80px 5% 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 6%; align-items: end; }
.tr53__lienzo, .tr53__cota { display: none; }
.tr53__intro h2 { font-size: clamp(32px, 4.5vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; margin: 14px 0 0; }
.tr53__intro h2 span { display: block; }
.tr53__foto { grid-column: 1 / -1; margin: 12px 0; }
.tr53__foto img { display: block; width: 100%; height: auto; }
.tr53__texto p:not(.eyebrow), .tr53__cierre p { max-width: 380px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.tr53__cierre h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 12px; }

@media (max-width: 760px) {
  .tr53__fijo { grid-template-columns: 1fr; padding: 48px 5%; }
}

/* ------------------------------------------------------------------ versión animada (scroll) */
.tr53--animado { height: 560vh; }
.tr53--animado .tr53__fijo { position: sticky; top: 0; height: 100svh; max-width: none; padding: 0; display: block; overflow: hidden; isolation: isolate; }
.tr53--animado .tr53__foto { display: none; }
.tr53--animado .tr53__lienzo { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tr53--animado .tr53__lienzo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tr53--animado .tr53__lienzo canvas + canvas { clip-path: circle(0 at 50% 50%); }

/* escena 1: título enorme alrededor del tráiler */
.tr53--animado .tr53__intro { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tr53--animado .tr53__intro .eyebrow { position: absolute; left: 4.5%; top: 7%; margin: 0; }
.tr53--animado .tr53__intro h2 { position: absolute; inset: 0; margin: 0; font-size: clamp(54px, 9.6vw, 172px); line-height: .92; letter-spacing: -.045em; }
.tr53--animado .tr53__intro h2 span { position: absolute; will-change: transform; white-space: nowrap; }
.tr53--animado .tr53__intro h2 span:first-child { left: 3.5%; top: 11%; }
.tr53--animado .tr53__intro h2 span:last-child { right: 3.5%; bottom: 6%; color: var(--red); }

/* escena 2: cota sobre la caja */
.tr53--animado .tr53__cota { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tr53--animado .tr53__cota svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr53--animado .tr53__cota line { stroke: var(--ink); stroke-width: 1.4; }
.tr53--animado .tr53__cota line:first-child { stroke: var(--red); stroke-width: 2; }
.tr53--animado .tr53__cota p { position: absolute; margin: 0; transform: translate(-50%, calc(-100% - 14px)); display: flex; align-items: baseline; gap: 10px; white-space: nowrap; background: #fff; padding: 4px 14px; border-radius: 999px; }
.tr53--animado .tr53__cota b { font-size: clamp(34px, 3.6vw, 56px); font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--red); }
.tr53--animado .tr53__cota span { font-size: 13px; color: var(--muted); }
.tr53--animado .tr53__texto { position: absolute; left: 4.5%; bottom: 9%; width: 330px; z-index: 3; opacity: 0; }

/* escena 4: cierre a la izquierda, el tráiler cargado a la derecha */
.tr53--animado .tr53__cierre { position: absolute; left: 4.5%; top: 50%; margin-top: -120px; width: 340px; z-index: 3; opacity: 0; }
.tr53--animado .tr53__cierre h3 { font-size: clamp(30px, 3vw, 46px); }

@media (max-width: 760px) {
  .tr53--animado .tr53__intro .eyebrow { left: 5%; top: 8%; }
  .tr53--animado .tr53__intro h2 { font-size: clamp(40px, 12vw, 66px); }
  .tr53--animado .tr53__intro h2 span:first-child { left: 5%; top: 12%; }
  .tr53--animado .tr53__intro h2 span:last-child { right: 5%; bottom: auto; top: 62%; }
  .tr53--animado .tr53__cota span { font-size: 11px; }
  .tr53--animado .tr53__texto { left: 5%; right: 5%; bottom: 6%; width: auto; }
  .tr53--animado .tr53__cierre { left: 5%; right: 5%; top: auto; bottom: 5%; margin: 0; width: auto; }
  .tr53--animado .tr53__cierre h3 { font-size: 30px; }
}

/* aviso para bajar al entrar a la escena (trailer-53.js lo desvanece con el scroll) */
.tr53__baja { display: none; }
.tr53--animado .tr53__baja { display: flex; position: absolute; left: 4.5%; bottom: 7%; z-index: 4; margin: 0; transform: translate(var(--x, 0), var(--dy, 0)); flex-direction: row-reverse; align-items: center; gap: 14px; pointer-events: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tr53--animado .tr53__baja i { position: relative; width: 22px; height: 34px; border: 1.6px solid var(--ink); border-radius: 12px; }
.tr53--animado .tr53__baja i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: tr53-baja 1.6s ease-in-out infinite; }
@keyframes tr53-baja { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 760px) { .tr53--animado .tr53__baja { left: 50%; --x: -50%; bottom: 3.5%; flex-direction: column; gap: 10px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .tr53__baja i::after { animation: none; } }