@font-face { font-family: "Bebas Neue"; src: url("../fonts/boarding/bebas-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/boarding/spacemono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/boarding/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/boarding/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* BOARDING PASS — destination weddings, travel birthdays, despedidas, company trips.
   Signature idea: the invitation is a boarding pass. Tear the stub to board; the hero is the
   full pass (flight = hashtag, gate = venue, boarding = call time). Inspired by the boarding-pass
   and passport invitation formats. Type: Bebas Neue · Space Mono · Inter */
:root { --bg: #eef2f5; --paper: #ffffff; --ink: #14233b; --muted: #5d6b80; --line: rgba(20, 35, 59, .14);
  --accent: #e0523a; --accent-ink: #fff; --sky: #1f5fbf; --display: "Bebas Neue", Impact, sans-serif; --mono: "Space Mono", ui-monospace, monospace; --text: "Inter", system-ui, sans-serif; --radius: 16px; }
body { background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--sky) 14%, var(--bg)), var(--bg)); background-color: var(--bg); }
.bp-pass { display: grid; grid-template-columns: 1fr 86px; width: min(340px, 90vw); text-align: left; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--ink) 22%, transparent)); }
.bp-main, .bp-stub { background: var(--paper); position: relative; }
.bp-main { border-radius: 16px 0 0 16px; padding: 16px 16px 14px; display: grid; gap: 4px; -webkit-mask: radial-gradient(circle at 100% 0, transparent 10px, #000 10.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 100% 0, transparent 10px, #000 10.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px) bottom / 100% 51% no-repeat; }
.bp-stub { border-radius: 0 16px 16px 0; border-left: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; transition: transform .8s cubic-bezier(.3,1.2,.5,1); }
.bp-stub span { font: 600 .6rem var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; }
.bp-stub b { font: 400 1.3rem var(--display); letter-spacing: .06em; color: var(--accent); writing-mode: vertical-rl; transform: rotate(180deg); }
.bp-air { font: 600 .66rem var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.bp-codes { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--ink); }
.bp-codes i { font-style: normal; font-size: 1.4rem; color: var(--accent); }
.bp-pax { font: .78rem var(--mono); color: var(--muted); }
.bp-t { font: 600 .95rem var(--text); color: var(--ink); }
.bp-intro { --intro-ms: 1500; background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 30%, var(--bg)), var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.bp-tear { min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 .95rem var(--text); cursor: pointer; animation: seal-breathe 2.4s ease-in-out infinite; }
.is-opening .bp-intro .bp-stub { transform: translate(40px, 70px) rotate(24deg); }
.is-opening .bp-intro-pass .bp-main { transform: translateY(-20px); transition: transform .8s ease .3s; }
.is-opening .bp-tear { opacity: 0; transition: opacity .3s; }
.t-boarding .sh-k { font-family: var(--mono); color: var(--accent); }
.t-boarding .sh-t { font-family: var(--display); letter-spacing: .04em; font-size: clamp(2.4rem, 11vw, 3.4rem); color: var(--ink); }
.t-boarding .s-hero { padding-top: 40px; }
.t-boarding .hero-guest { font: .85rem var(--mono); color: var(--sky); }
.t-boarding .hero-k { font: 600 .72rem var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.t-boarding .hero-t { font-family: var(--display); font-size: clamp(3rem, 15vw, 5rem); line-height: .95; letter-spacing: .02em; color: var(--ink); margin-bottom: 18px; }
.bp-hero-pass { margin: 0 auto 18px; }
.bp-route { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.bp-route b { display: block; font-family: var(--display); font-size: 2.8rem; line-height: .9; color: var(--ink); }
.bp-route span { font: .64rem var(--text); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.bp-route i { font-style: normal; color: var(--accent); font-size: 1.3rem; }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin: 4px 0 0; border-top: 1px dashed var(--line); padding-top: 10px; }
.bp-grid dt { font: 600 .64rem var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bp-grid dd { margin: 0; font: .82rem var(--mono); color: var(--ink); }
.bp-bars { display: block; width: 44px; height: 110px; writing-mode: initial !important; background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
.t-boarding .hero-line { color: var(--muted); max-width: 22em; margin: 0 auto 12px; }
.t-boarding .hero-cta { background: var(--accent); font-weight: 600; letter-spacing: .04em; }
.t-boarding .cd-u { background: var(--cd-box, var(--ink)); color: #fff; border-radius: 12px; padding: 12px 0 8px; }
.t-boarding .cd-u b { font-family: var(--mono); font-size: clamp(1.6rem, 8vw, 2.4rem); }
.t-boarding .cd-u span { color: rgba(255,255,255,.7); }
.t-boarding .btn-line { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.t-boarding .tl-i { background: var(--paper); border: 0; border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.t-boarding .tl-time { font-family: var(--mono); color: var(--accent); }
.t-boarding .tl-title { font-weight: 600; }
.t-boarding .vn-c { border: 0; border-left: 5px solid var(--sky); border-radius: 12px; text-align: left; }
.t-boarding .vn-l { font-family: var(--mono); color: var(--sky); }
.t-boarding .vn-n { font-family: var(--display); font-size: 2rem; letter-spacing: .02em; }
.t-boarding .faq summary { font-weight: 600; }
.t-boarding .rs, .t-boarding .rs-done { border: 0; border-radius: 18px; box-shadow: 0 20px 40px -30px var(--ink); }
.t-boarding .rs-btn { background: var(--accent); font-weight: 600; }
.t-boarding .rs-done-t { font-family: var(--display); letter-spacing: .02em; }
.t-boarding .cl-line { font-family: var(--display); font-size: 2.4rem; letter-spacing: .02em; color: var(--ink); }
.t-boarding .cl-sign { font-family: var(--mono); color: var(--accent); }

/* ---------- destination cover & passport-stamp gallery ---------- */
.bp-dest { margin: 0 auto; max-width: 460px; background: var(--paper); border-radius: var(--radius); padding: 14px; box-shadow: 0 18px 34px -22px rgba(20,35,59,.45); }
.bp-win { padding: 10px; border-radius: 44% 44% 40% 40% / 22% 22% 20% 20%; background: linear-gradient(180deg, #dfe6ee, #c9d3de); box-shadow: inset 0 2px 8px rgba(20,35,59,.25); }
.bp-dimg { border-radius: 40% 40% 36% 36% / 20% 20% 18% 18%; background: color-mix(in srgb, var(--sky) 20%, var(--paper)); }
.bp-dest figcaption { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 6px 2px; border-top: 2px dashed var(--line); font: 2rem/1 var(--display); color: var(--ink); }
.bp-dest figcaption small { display: block; font: 700 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bp-dest figcaption span:last-child { text-align: right; color: var(--accent); }
.bp-dest figcaption i { font-style: normal; color: var(--sky); font-size: 1.4rem; }
.bp-passport { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 22px 16px; border-radius: 10px; background: #f6f1e3 repeating-linear-gradient(0deg, transparent 0 26px, rgba(20,35,59,.05) 26px 27px); box-shadow: inset 0 0 0 1px var(--line), 0 14px 26px -20px rgba(20,35,59,.5); }
.bp-stamp { margin: 0; padding: 7px; border: 2.5px solid currentColor; border-radius: 10px; color: var(--sky); position: relative; }
.bp-stamp.t0 { transform: rotate(-4deg); } .bp-stamp.t1 { transform: rotate(3deg); color: var(--accent); border-radius: 50% / 40%; } .bp-stamp.t2 { transform: rotate(2deg); color: #2f7a4f; } .bp-stamp.t3 { transform: rotate(-2deg); color: var(--accent); border-style: double; border-width: 5px; }
.bp-simg { aspect-ratio: 1; border-radius: 5px; background: color-mix(in srgb, currentColor 14%, var(--paper)); }
.bp-stamp.t1 .bp-simg { border-radius: 50% / 40%; }
.bp-simg img { filter: saturate(.92); }
.bp-stamp figcaption { margin-top: 6px; text-align: center; font: 700 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bp-stamp figcaption b { display: block; font-size: .7rem; letter-spacing: .2em; }