/* As 4 aberturas da LE Viagens. Só a de html[data-hero] aparece (o servidor grava a escolha da Letícia). */
html:not([data-hero="a"]) .hero-a, html:not([data-hero="b"]) .hero-b,
html:not([data-hero="c"]) .hero-c, html:not([data-hero="d"]) .hero-d { display: none !important; }
.hero { position: relative; overflow: hidden; }
.hero h1 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: .98; color: var(--petroleo); }
.hero .sobretitulo { color: var(--agua-texto); }
.ceu-fundo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: linear-gradient(180deg, #2FB8C6, #BDEBF0); }

/* A · Janela do avião */
.hero-a { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6.5rem 1.4rem 3rem;
  background: radial-gradient(120% 90% at 50% 45%, #FFFFFF 0%, #EEF6F7 55%, #DCEBEE 100%); }
.hero-a::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,65,81,.035) 0 1px, transparent 1px 180px); pointer-events: none; }
.a-kicker { margin-bottom: 1.4rem; }
.a-palco { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); width: min(1320px, 100%); }
.a-lado { margin: 0; font: 800 clamp(2.6rem, 6.4vw, 6.2rem)/.98 var(--display); letter-spacing: -.025em; color: var(--petroleo); }
.a-esq { text-align: right; } .a-dir { text-align: left; }
.a-janela { position: relative; width: clamp(220px, 21vw, 320px); aspect-ratio: 5 / 7.4; border-radius: 47% / 32%; padding: clamp(14px, 1.6vw, 22px);
  background: linear-gradient(150deg, #FFFFFF, #E2EEF1 70%, #CFE0E4); box-shadow: 0 40px 80px -40px rgba(0,65,81,.55), inset 0 2px 0 #fff, inset 0 -6px 18px rgba(0,65,81,.12); }
.a-vidro { position: relative; width: 100%; height: 100%; border-radius: 46% / 31%; overflow: hidden; box-shadow: inset 0 0 0 6px rgba(0,65,81,.08), inset 0 10px 30px rgba(0,0,0,.25); }
.a-vidro::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,0) 38%); pointer-events: none; }
.a-persiana { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #F2F7F8, #DCE8EB); box-shadow: 0 6px 12px rgba(0,0,0,.15); animation: a-abre 2.2s .5s cubic-bezier(.65,0,.2,1) forwards; }
.a-persiana::after { content: ''; position: absolute; left: 50%; bottom: 10px; width: 34%; height: 8px; transform: translateX(-50%); border-radius: 8px; background: rgba(0,65,81,.25); }
@keyframes a-abre { to { transform: translateY(-86%); } }
.entrou .a-persiana { animation: none; transform: translateY(-86%); }
/* A Letícia flutuando do lado de fora do vidro, entre as nuvens: sobe quando a persiana abre e balança de leve */
.a-leticia { position: absolute; z-index: 1; left: 50%; top: 40%; width: 86%; max-width: none; height: auto; translate: -50% 0;
  transform-origin: 50% 30%; filter: drop-shadow(0 14px 16px rgba(0,65,81,.18)) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  animation: a-surge 1s 1.4s cubic-bezier(.2,.9,.25,1.15) backwards, a-flutua 6s 2.4s ease-in-out infinite; }
@keyframes a-surge { from { transform: translateY(70%) rotate(4deg); } to { transform: translateY(0) rotate(-6deg); } }
@keyframes a-flutua { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5%) rotate(-3deg); } }
.a-leticia { transform: rotate(-6deg); }
.a-nuvens-frente { position: absolute; z-index: 2; inset: auto -10% -6% -10%; height: 42%; pointer-events: none; animation: a-deriva 14s ease-in-out infinite alternate; }
.a-nuvens-frente span { position: absolute; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.98), rgba(255,255,255,.85) 45%, rgba(255,255,255,0)); filter: blur(5px); }
.a-nuvens-frente span:nth-child(1) { left: -6%; width: 70%; height: 78%; }
.a-nuvens-frente span:nth-child(2) { left: 28%; width: 62%; height: 64%; bottom: -8%; }
.a-nuvens-frente span:nth-child(3) { right: -8%; width: 58%; height: 86%; }
@keyframes a-deriva { to { translate: -7% 0; } }
.a-persiana { z-index: 3; }
.a-vidro::after { z-index: 4; }
.a-oi { position: absolute; z-index: 5; right: -14%; top: 16%; padding: .45rem .8rem; border-radius: 14px 14px 14px 3px; background: #fff; color: var(--petroleo);
  font: 800 1rem/1 var(--display); box-shadow: 0 12px 24px -10px rgba(0,65,81,.45); rotate: 8deg; animation: a-oi .5s 2.4s cubic-bezier(.2,.9,.3,1.4) backwards; }
@keyframes a-oi { from { opacity: 0; scale: .4; } }
.entrou .a-leticia { animation: a-flutua 6s ease-in-out infinite; }
.entrou .a-oi { animation: none; }
.a-assento { margin: .9rem 0 0; font: 600 .82rem var(--corpo); color: var(--agua-texto); }
.a-acoes { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.a-acoes p { margin: 0; max-width: 34rem; }

/* B · Ela no céu */
.hero-b { height: 100svh; min-height: 640px; }
.b-base { position: absolute; inset: auto 0 0; height: 18%; z-index: 1; background: linear-gradient(180deg, transparent, rgba(255,255,255,.55)); }
.b-gigante { position: absolute; left: 0; right: 0; bottom: 34%; z-index: 2; margin: 0; text-align: center; white-space: nowrap;
  font: 800 clamp(6rem, 21vw, 21rem)/.8 var(--display); letter-spacing: -.05em; color: var(--petroleo); opacity: .92; }
.b-gigante span { font-weight: 200; }
/* As laterais e a base da foto original cortam a manga em linha reta: dissolvem no céu e somem atrás das nuvens */
.b-pessoa { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 86%; width: auto; max-width: none;
  filter: drop-shadow(0 24px 30px rgba(0,65,81,.16));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 66%, transparent 96%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 66%, transparent 96%); mask-composite: intersect; }
.b-nuvens-frente { position: absolute; z-index: 3; left: 0; right: 0; bottom: -4%; height: 30%; pointer-events: none; animation: a-deriva 16s ease-in-out infinite alternate; }
.b-nuvens-frente span { position: absolute; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.97), rgba(255,255,255,.8) 45%, rgba(255,255,255,0)); filter: blur(8px); }
.b-nuvens-frente span:nth-child(1) { left: 14%; width: 34%; height: 80%; }
.b-nuvens-frente span:nth-child(2) { left: 32%; width: 38%; height: 100%; bottom: -10%; }
.b-nuvens-frente span:nth-child(3) { left: 50%; width: 32%; height: 74%; }
.b-nuvens-frente span:nth-child(4) { left: -6%; width: 30%; height: 60%; opacity: .7; }
/* "mundo." vazado por cima dela: o contorno e um véu leve deixam a palavra inteira sem esconder a Letícia */
.b-contorno { z-index: 3; color: rgba(0,65,81,.14); -webkit-text-stroke: 2px rgba(0,65,81,.55); opacity: 1; pointer-events: none; }
.b-pre { position: absolute; z-index: 4; top: 22%; left: clamp(1.2rem, 6vw, 6rem); }
.b-pre h1 { font-size: clamp(1.8rem, 3.2vw, 3rem); margin-top: .8rem; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b-cartao { position: absolute; z-index: 4; right: clamp(1.2rem, 4vw, 4rem); bottom: clamp(1rem, 3vh, 2rem); width: min(360px, 88vw); padding: 1.4rem 1.5rem; border-radius: 22px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 60px -30px rgba(0,65,81,.5); }
.b-cartao p { margin: .2rem 0 1.1rem; }
.b-numeros { display: flex; gap: 1.2rem; margin-bottom: 1rem; }
.b-numeros b { display: block; font: 800 2rem/1 var(--display); }
.b-numeros small { font-size: .78rem; }

/* C · Cartão de embarque */
.hero-c { min-height: 100svh; display: grid; place-items: center; padding: 6.5rem 1.2rem 3rem; }
.c-conteudo { position: relative; z-index: 2; width: min(1040px, 100%); text-align: center; }
.c-conteudo h1 { font-size: clamp(2.4rem, 5.6vw, 5rem); margin: .8rem 0 2rem; }
.c-passe { display: grid; grid-template-columns: 1fr 250px; text-align: left; border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.92); box-shadow: 0 50px 90px -40px rgba(0,65,81,.65); transform: rotate(-1.5deg); }
.entrou .c-passe { transform: rotate(-1.5deg) !important; }
.c-corpo { padding: 1.6rem 2rem 1.8rem; }
.c-topo { display: flex; justify-content: space-between; align-items: center; font: 600 .74rem var(--corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--agua-texto); }
.c-topo img { width: 76px; }
.c-rota { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; margin: 1.3rem 0; }
.c-dir { text-align: right; }
.c-cod { font: 800 clamp(2.6rem, 5vw, 4.2rem)/1 var(--display); letter-spacing: -.02em; }
.c-cidade { font-size: .9rem; }
.c-trilha { position: relative; height: 40px; }
.c-trilha svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-trilha path { fill: none; stroke: var(--letreiro); stroke-width: 2; stroke-dasharray: 6 7; }
.c-aviao { position: absolute; top: 50%; left: 4%; width: 28px; height: 28px; margin-top: -14px; color: var(--petroleo); animation: c-voa 5s ease-in-out infinite alternate; }
@keyframes c-voa { to { left: calc(96% - 28px); } }
.c-campos { display: grid; grid-template-columns: repeat(4, auto); gap: 1rem 1.6rem; border-top: 2px dashed rgba(0,65,81,.18); padding-top: 1.1rem; margin: 0; }
.c-campos dt { font: 600 .68rem var(--corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--agua-texto); }
.c-campos dd { margin: .15rem 0 0; font: 800 1.05rem var(--display); }
.c-canhoto { position: relative; background: var(--petroleo); color: var(--gelo); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.c-canhoto::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; border-left: 3px dotted rgba(244,251,252,.9); }
.c-agente { display: flex; align-items: center; gap: .8rem; }
.c-agente img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--ceu); border: 2px solid var(--gelo); }
.c-agente b { font: 800 1rem var(--display); color: #fff; display: block; }
.c-agente small { font-size: .78rem; }
.c-barras { height: 54px; border-radius: 4px; opacity: .85; background: repeating-linear-gradient(90deg, #C8F5F7 0 2px, transparent 2px 4px, #C8F5F7 4px 7px, transparent 7px 9px, #C8F5F7 9px 10px, transparent 10px 14px); }
.c-embarcar { justify-content: center; background: var(--agua-clara); color: var(--petroleo); }

/* D · Painel de partidas */
.hero-d { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.d-alto { position: relative; display: grid; align-content: end; justify-items: center; text-align: center; padding: 7rem 1.2rem 2.4rem; }
.d-alto > :not(canvas):not(.d-voo) { position: relative; z-index: 2; }
/* Avião com a Letícia na cabine: atravessa o céu vazio, balança, hélice girando; para fora da tela e com menos movimento */
.d-voo { position: absolute; z-index: 1; left: 0; top: 116px; width: clamp(190px, 21vw, 310px); animation: d-atravessa 24s linear infinite; pointer-events: none; }
.d-balanco { animation: d-balanca 2.6s ease-in-out infinite alternate; }
.d-aviao { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 18px rgba(0,65,81,.25)); }
.d-helice { transform-box: fill-box; transform-origin: center; animation: d-gira .12s linear infinite alternate; }
.d-rastro { animation: d-rastro .8s linear infinite; }
@keyframes d-atravessa { from { transform: translateX(-120%); } to { transform: translateX(calc(100vw + 20%)); } }
@keyframes d-balanca { from { transform: translateY(-6px) rotate(-2.5deg); } to { transform: translateY(8px) rotate(2deg); } }
@keyframes d-gira { from { transform: scaleY(1); } to { transform: scaleY(.12); } }
@keyframes d-rastro { to { stroke-dashoffset: 22; } }
.hero-d:not(.viva) .d-voo, .hero-d:not(.viva) .d-voo * { animation-play-state: paused; }
.d-alto h1 { font-size: clamp(2.8rem, 7vw, 6.6rem); margin-top: .9rem; }
.d-sub { max-width: 36rem; margin: 1.1rem 0 1.6rem; font-size: 1.1rem; }
.d-foto { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--ceu); border: 3px solid #fff; box-shadow: 0 12px 30px -10px rgba(0,65,81,.6); }
.d-painel { position: relative; z-index: 2; background: #032F3A; color: var(--gelo); padding: 1.4rem clamp(1rem, 4vw, 3.5rem) 1.8rem; }
.d-cab { display: flex; justify-content: space-between; align-items: baseline; font: 600 .74rem var(--corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--agua-clara); margin-bottom: .8rem; }
.d-cab b { font: 800 1.1rem var(--display); letter-spacing: .04em; color: #fff; }
.d-linha { display: grid; grid-template-columns: 7rem 1fr 14rem; gap: 1rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(200,245,247,.12); font: 600 1rem ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.d-flap { display: inline-flex; gap: 3px; }
.d-flap i { display: inline-grid; place-items: center; width: 1.25em; height: 1.6em; background: #0B4655; border-radius: 3px; font-style: normal; color: #F4FBFC; position: relative; }
.d-flap i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(0,0,0,.45); }
.d-status { color: var(--agua-clara); text-align: right; }
.d-linha.sua { color: #fff; }
.d-linha.sua .d-status { color: #032F3A; background: var(--agua-clara); border-radius: 999px; padding: .3rem .8rem; justify-self: end; animation: d-pisca 1.4s steps(2) infinite; }
@keyframes d-pisca { 50% { opacity: .55; } }

/* Atalho da Letícia: aviãozinho ao lado do logo (3 toques) e o seletor */
.aviao-secreto { margin-left: -1.5rem; align-self: flex-start; margin-top: .2rem; background: none; border: 0; padding: .45rem; color: var(--petroleo); opacity: .7; cursor: default; rotate: -18deg; -webkit-tap-highlight-color: transparent; }
.aviao-secreto .i { width: 1.15rem; height: 1.15rem; }
.seletor { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem .7rem; border-radius: 18px; background: rgba(0,65,81,.92); color: #fff; box-shadow: 0 20px 50px -15px rgba(0,0,0,.6); width: max-content; max-width: calc(100vw - 24px); font: 600 .92rem var(--corpo); }
.seletor[hidden] { display: none; }
.seletor-seta, .seletor-fechar { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.seletor-nome { min-width: 11rem; text-align: center; }
.seletor-pin { display: flex; gap: .4rem; }
.seletor-pin input { width: 6.5rem; padding: .55rem .7rem; border-radius: 999px; border: 0; font: 600 .95rem var(--corpo); }
.seletor-pin button { padding: .55rem 1rem; border-radius: 999px; border: 0; background: var(--agua-clara); color: var(--petroleo); font: 700 .92rem var(--corpo); cursor: pointer; }
.seletor-msg { flex-basis: 100%; text-align: center; font-size: .82rem; color: var(--gelo); min-height: 1em; }
.seletor-msg:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .a-persiana { animation: none; transform: translateY(-86%); }
  .a-leticia, .entrou .a-leticia, .a-nuvens-frente, .a-oi, .b-nuvens-frente { animation: none; }
  .c-aviao { animation: none; left: 46%; }
  .d-linha.sua .d-status { animation: none; }
  .d-voo, .d-voo * { animation: none !important; }
  .d-voo { left: 58%; }
}
@media (max-width: 760px) {
  .a-palco { grid-template-columns: 1fr; gap: 1rem; }
  .a-esq, .a-dir { text-align: center; }
  .a-janela { width: 56vw; margin: 0 auto; }
  .hero-a { justify-content: flex-start; padding-top: 6rem; }
  .b-gigante { bottom: 27%; font-size: 31vw; }
  .b-pessoa { height: 62%; }
  .b-pre { top: 15%; left: 1.1rem; right: 1.1rem; }
  .b-cartao { left: 1rem; right: 1rem; width: auto; bottom: 1rem; }
  .b-numeros { display: none; }
  .c-passe { grid-template-columns: 1fr; transform: none; }
  .entrou .c-passe { transform: none !important; }
  .c-canhoto::before { left: 14px; right: 14px; top: -1px; bottom: auto; border-left: 0; border-top: 3px dotted rgba(244,251,252,.9); }
  .c-campos { grid-template-columns: 1fr 1fr; }
  .c-corpo { padding: 1.3rem 1.2rem; }
  .d-linha { grid-template-columns: 1fr auto; font-size: .82rem; }
  .d-linha .d-hora { display: none; }
  .d-flap i { width: 1.05em; }
  .d-voo { top: 92px; width: 44vw; animation-duration: 14s; }
  .seletor-nome { min-width: 0; flex: 1; }
}