/* Package geometry is isolated from GSAP's entrance animation on the anchor. */
#fechas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; max-width:970px; padding:32px 14px 12px; }
:is(#fechas, .ticket-flight) .city-button { --box-depth:64px; --box-half:32px; --box-height:132px; --kraft:#b79465; --kraft-top:#d4b787; --kraft-side:#987344; --label:#f7f1df; display:block; position:relative; height:calc(var(--box-height) + 20px); min-height:0; padding:0; border:0; border-radius:12px; background:none; color:#282a21; backdrop-filter:none; perspective:1050px; isolation:auto; box-shadow:none; transition:none; touch-action:manipulation; }
:is(#fechas, .ticket-flight) .city-button:hover, :is(#fechas, .ticket-flight) .city-button:active { background:none; color:#282a21; box-shadow:none; transform:none; }
:is(#fechas, .ticket-flight) .city-button:focus-visible { outline:3px solid var(--yellow); outline-offset:16px; }
:is(#fechas, .ticket-flight) :where(.city-button) span { display:block; font:inherit; letter-spacing:normal; }
:is(#fechas, .ticket-flight) .ticket-box { position:relative; width:100%; height:var(--box-height); transform-style:preserve-3d; transform:rotateX(calc(-15deg + var(--tilt-x,0deg))) rotateY(calc(-11deg + var(--tilt-y,0deg))); transition:transform 220ms cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.ticket-face { position:absolute; border:1px solid #70532f55; background-color:var(--kraft); background-image:repeating-linear-gradient(0deg,#ffffff05 0px,#ffffff05 1px,transparent 1px,transparent 3px); }
.ticket-front { inset:0; transform:translateZ(var(--box-half)); border-radius:3px; box-shadow:inset 0 1px #fff5,0 18px 30px -15px #0007; }
.ticket-back { inset:0; transform:translateZ(calc(-1 * var(--box-half))); background-color:#78603e; }
.ticket-side { width:var(--box-depth); height:100%; top:0; background-color:var(--kraft-side); }
.ticket-side-left { left:calc(-1 * var(--box-half)); transform:rotateY(-90deg); }
.ticket-side-right { right:calc(-1 * var(--box-half)); transform:rotateY(90deg); }
.ticket-lid { width:100%; height:var(--box-depth); top:0; left:0; transform-origin:center top; transform:translateZ(calc(-1 * var(--box-half))) rotateX(90deg); background-color:var(--kraft-top); transition:transform 420ms cubic-bezier(.22,.75,.18,1); }
.ticket-lid:before { content:''; position:absolute; left:57%; top:0; width:24%; height:100%; background:linear-gradient(90deg,#f0d997a6,#fff0b6a6,#d4bc7799); border-inline:1px solid #c3a56566; }
.ticket-lid:after { content:''; position:absolute; inset:0; border:1px solid #fff2; }
.ticket-front:before { content:''; position:absolute; top:0; right:19%; width:24%; height:14px; background:#e6d08c9c; border-inline:1px solid #aa8c5144; }
:is(#fechas, .ticket-flight) .ticket-label { position:absolute; inset:24px 20px 22px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; gap:7px; padding:12px 16px; background:var(--label); border:1px solid #fff8; border-radius:3px; box-shadow:0 2px 3px #5a431a24; text-align:left; }
:is(#fechas, .ticket-flight) .ticket-city { font-family:var(--sans); font-size:clamp(22px,2.2vw,28px); font-weight:650; line-height:1.1; letter-spacing:-.6px; }
:is(#fechas, .ticket-flight) time { font-family:var(--mono); font-size:13px; font-weight:400; line-height:1.2; letter-spacing:-.4px; white-space:nowrap; }
:is(#fechas, .ticket-flight) .ticket-stamp { position:absolute; right:10px; bottom:5px; font:800 9px/1 var(--sans); border:1px solid #5d49326b; border-radius:50%; padding:3px 6px; transform:rotate(-8deg); opacity:.7; }
:is(#fechas, .ticket-flight) .ticket-arrow { position:absolute; right:10px; top:5px; font-size:14px; line-height:1; color:#645636; }
.ticket-side-right:after { content:'↑ ↑'; position:absolute; bottom:14px; left:10px; font:18px/1 var(--mono); color:#493a29aa; }
.ticket-bottom { width:100%; height:var(--box-depth); bottom:calc(-1 * var(--box-half)); background:#5a4a30; transform:rotateX(90deg); }
:is(#fechas, .ticket-flight) .ticket-glow { position:absolute; inset:0; background:#fff3a0; transform:rotateX(90deg); top:calc(-1 * var(--box-half)); height:var(--box-depth); opacity:0; transition:opacity 200ms ease; }
:is(#fechas, .ticket-flight) .city-button[data-opening] .ticket-box { transform:translateY(-5px) rotateX(-13deg) rotateY(-6deg); }
:is(#fechas, .ticket-flight) .city-button[data-opening] .ticket-lid { transform:translateZ(calc(-1 * var(--box-half))) rotateX(163deg); }
:is(#fechas, .ticket-flight) .city-button[data-opening] .ticket-glow { opacity:.8; }
html[data-theme=day] :is(#fechas, .ticket-flight) .city-button { --kraft:#c7a576; --kraft-top:#dfc69c; --kraft-side:#aa8757; --label:#fffaf0; }
html[data-theme=day] :is(#fechas, .ticket-flight) .city-button:focus-visible { outline-color:var(--wine); }
@media (hover:hover) and (pointer:fine) {
  :is(#fechas, .ticket-flight) .city-button:hover .ticket-label { background:#fff8cf; }
  :is(#fechas, .ticket-flight) .city-button:hover .ticket-arrow { color:#982c2b; }
}
@media(min-width:801px) and (max-width:1000px) {
  #fechas { gap:24px; }
  :is(#fechas, .ticket-flight) .ticket-label { inset-inline:14px; padding-inline:10px; }
  :is(#fechas, .ticket-flight) .ticket-city { font-size:22px; }
  :is(#fechas, .ticket-flight) time { font-size:12px; }
}
@media(max-width:800px) {
  #fechas { grid-template-columns:1fr; gap:30px; max-width:390px; padding:24px 15px 4px; }
  :is(#fechas, .ticket-flight) .city-button { --box-depth:44px; --box-half:22px; --box-height:100px; height:116px; }
  :is(#fechas, .ticket-flight) .ticket-box { transform:rotateX(calc(-14deg + var(--tilt-x,0deg))) rotateY(calc(-7deg + var(--tilt-y,0deg))); }
  :is(#fechas, .ticket-flight) .ticket-label { inset:15px 18px 15px; padding:12px 16px; gap:5px; }
  :is(#fechas, .ticket-flight) .ticket-city { font-size:25px; }
  :is(#fechas, .ticket-flight) time { font-size:13px; }
  :is(#fechas, .ticket-flight) .ticket-stamp { font-size:8px; right:9px; bottom:4px; }
}
@media(max-width:370px) {
  #fechas { padding-inline:10px; }
  :is(#fechas, .ticket-flight) .ticket-label { inset-inline:13px; padding-inline:12px; }
  :is(#fechas, .ticket-flight) .ticket-city { font-size:23px; }
  :is(#fechas, .ticket-flight) time { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(#fechas, .ticket-flight) .ticket-box { transform:rotateX(-14deg) rotateY(-7deg)!important; }
  :is(#fechas, .ticket-flight) .ticket-lid { transition:none; }
}

/* The flight is a visual clone; real links remain in their original layout. */
#fechas .city-button[data-in-flight] .ticket-box { visibility:hidden; }
.ticket-flight { position:fixed; inset:0; z-index:10000; overflow:hidden; isolation:isolate; pointer-events:none; }
.ticket-flight-shade { position:absolute; inset:0; background:#21180f; opacity:0; }
.ticket-flight-stage { position:absolute; will-change:transform; }
#ticket-flight .ticket-flight-source { width:100%; margin:0; opacity:1; transform:none!important; }
#ticket-flight .ticket-box { transition:none; will-change:transform; }
#ticket-flight .ticket-lid { transition:none; }
#ticket-flight .ticket-glow { opacity:1; background:radial-gradient(ellipse at 50% 48%,#1b130c 12%,#49351e 72%,#8f6d40); transition:none; }
.ticket-flight-face { position:absolute; left:50%; height:auto; z-index:2; opacity:0; pointer-events:none; transform-origin:50% 100%; filter:drop-shadow(0 10px 12px #0005); will-change:transform,opacity; }
@media(prefers-reduced-motion:reduce) { .ticket-flight { display:none; } }