/* Solis Viagens · tokens da marca (manual Solis) */
:root {
  --noite: #0f2233;
  --noite-2: #142b40;
  --atlantico: #1e5aa8;
  --claro: #5b93db;
  --ambar: #e8960c;
  --mata: #2f7d4f;
  --nevoa: #f3f5f8;
  --texto-2: #c9d4e3;
  --texto-3: #8fa0b5;
  --linha: rgb(91 147 219 / 0.22);
  --erro: #ff8a7a;
  --display: "Archivo", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noite); color: var(--nevoa); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--noite); color: var(--nevoa); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ambar); color: var(--noite); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
[id] { scroll-margin-top: 5rem; }

.display { font-family: var(--display); font-stretch: 118%; font-weight: 750; letter-spacing: -0.02em; line-height: 0.98; }
.h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); max-width: 17ch; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.largura { max-width: 1400px; margin: 0 auto; }
.largura--estreita { max-width: 1000px; }
.secao { padding: clamp(6rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem); }
.kicker { color: var(--ambar); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }

/* ---------- Topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top); background: linear-gradient(rgb(15 34 51 / 0.85), transparent); }
.topo__in { max-width: 1400px; margin: 0 auto; height: 4.5rem; padding: 0 clamp(1.25rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marca { display: inline-flex; align-items: center; gap: 0.75rem; }
.marca__sol { width: 2rem; height: 2rem; flex-shrink: 0; }
.marca__txt { display: flex; flex-direction: column; line-height: 1; font-family: var(--display); }
.marca__txt b { font-size: 1.05rem; font-weight: 700; font-stretch: 125%; letter-spacing: 0.16em; }
.marca__txt small { margin-top: 0.3rem; font-size: 0.62rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.34em; color: var(--claro); }
.topo__nav { display: none; gap: 2rem; font-size: 0.9rem; color: var(--texto-2); }
.topo__nav a:hover { color: var(--nevoa); }
@media (min-width: 1024px) { .topo__nav { display: flex; } .topo__in { height: 5rem; } }

/* CTA do menu: contorno que se preenche da esquerda. */
.cta-nav { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--ambar); border-radius: 999px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; transition: color .3s; }
.cta-nav span { position: absolute; inset: 0; z-index: -1; background: var(--ambar); transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.cta-nav:hover { color: var(--noite); }
.cta-nav:hover span { transform: scaleX(1); }
.cta-nav:active { transform: scale(0.98); }

/* ---------- Filme rolado ---------- */
.filme { position: relative; isolation: isolate; overflow-x: clip; --progresso: 0; }
.filme__palco { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--noite); }
.filme__midia, .filme__camada, .filme__camada picture, .filme__camada img, .filme__camada video, .filme__camada canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.filme__camada { overflow: hidden; opacity: 0; will-change: opacity; }
.filme__camada:first-child { opacity: 1; }
.filme__camada img, .filme__camada video, .filme__camada canvas { object-fit: cover; object-position: 50% 50%; }
.filme__camada canvas { z-index: 1; display: block; }
.filme__camada[data-pintado="true"] img { visibility: hidden; }
.filme__progresso { position: absolute; z-index: 5; inset: 0 0 auto; height: 2px; background: rgb(243 245 248 / 0.14); }
.filme__progresso span { display: block; height: 100%; background: var(--ambar); transform: scaleX(var(--progresso)); transform-origin: left; }
.filme__rota { position: absolute; z-index: 6; right: clamp(1rem, 4vw, 4rem); bottom: clamp(1rem, 3vw, 2rem); display: flex; gap: 0.25rem; }
.filme__rota button { min-height: 2.75rem; padding: 0.6rem 0.85rem; border: 0; background: none; cursor: pointer; color: var(--texto-2); font-family: var(--display); font-stretch: 112%; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
.filme__rota button:hover, .filme__rota button[aria-current="step"] { color: var(--nevoa); }
.filme__rota button[aria-current="step"] { text-decoration: underline; text-decoration-color: var(--ambar); text-decoration-thickness: 0.15em; text-underline-offset: 0.3em; }
.filme__historia { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.cap { position: relative; min-height: calc(var(--peso, 1.4) * 100vh); min-height: calc(var(--peso, 1.4) * 100svh); }
#inicio { --peso: 1.5; }
#destino { --peso: 1.6; }
.sprite { position: absolute; }
.s1 { fill: var(--s1, #E8960C); }
.s2 { fill: var(--s2, #1E5AA8); }
.s3 { fill: var(--s3, #2F7D4F); }
.cap__pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); }
.cap--dir .cap__pin { justify-content: flex-end; }
.cap__txt { position: relative; width: min(40rem, 48vw); pointer-events: auto; }
/* Sem caixa atrás do texto: a leitura vem da sombra nas letras e de um véu uniforme no vídeo, sem bordas. */
.filme__palco::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(15 34 51 / 0.32) 0%, rgb(15 34 51 / 0.12) 38%, rgb(15 34 51 / 0.12) 62%, rgb(15 34 51 / 0.4) 100%); }
.cap__kicker, .cap__titulo, .cap__corpo { text-shadow: 0 1px 2px rgb(15 34 51 / 0.55), 0 4px 28px rgb(15 34 51 / 0.6); }
.cap__kicker { margin-bottom: 1rem; color: var(--ambar); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.cap__titulo { max-width: 13ch; font-family: var(--display); font-stretch: 118%; font-weight: 750; font-size: clamp(2.5rem, 5.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.cap__corpo { max-width: 42ch; margin-top: 1.5rem; color: var(--texto-2); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; }
.cap__tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; }
.cap__tags li { padding: 0.45rem 0.7rem; border: 1px solid var(--linha); color: var(--claro); font-size: 0.82rem; }
.cap__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

@media (max-width: 860px) {
  .filme__rota { display: none; }
  .cap__pin, .cap--dir .cap__pin { align-items: flex-end; justify-content: flex-start; padding: 6.5rem max(1.25rem, env(safe-area-inset-right)) calc(5.5rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
  .cap__txt { width: min(100%, 36rem); }
  /* No celular o texto fica embaixo: o véu da tela inteira escurece só a metade de baixo, sem caixa nem borda. */
  .filme__palco::after { background: linear-gradient(180deg, rgb(15 34 51 / 0.3) 0%, rgb(15 34 51 / 0.05) 30%, rgb(15 34 51 / 0.25) 55%, rgb(15 34 51 / 0.6) 100%); }
  .cap__titulo { max-width: 14ch; font-size: clamp(2.2rem, 10.5vw, 4.5rem); }
  .cap__kicker, .cap__titulo, .cap__corpo { text-shadow: 0 1px 2px rgb(15 34 51 / 0.6), 0 2px 12px rgb(15 34 51 / 0.5); }
}

/* CTA do capítulo 1: pílula âmbar com um sol que nasce no hover. */
.cta-sol { display: inline-flex; align-items: center; gap: 0.75rem; height: 3.5rem; padding: 0 1.75rem 0 1.25rem; border-radius: 999px; background: var(--ambar); color: var(--noite); font-weight: 600; box-shadow: 0 10px 40px -12px rgb(232 150 12 / 0.7); transition: transform .2s; }
.cta-sol:hover { transform: translateY(-2px); }
.cta-sol:active { transform: translateY(1px); }
.cta-sol__sol { position: relative; width: 1.5rem; height: 1.5rem; overflow: hidden; }
.cta-sol__sol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--noite); }
.cta-sol__sol i { position: absolute; left: 50%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--noite); transform: translate(-50%, 14px); transition: transform .5s ease-out; }
.cta-sol:hover .cta-sol__sol i { transform: translate(-50%, 2px); }

/* CTA do capítulo 5: seta que percorre uma rota tracejada. */
.cta-rota { display: inline-flex; align-items: center; gap: 1rem; padding: 0.5rem 0; font-weight: 600; }
.cta-rota span { position: relative; width: 6rem; border-top: 1px dashed var(--claro); }
.cta-rota i { position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-top: 2px solid var(--ambar); border-right: 2px solid var(--ambar); transform: rotate(45deg); transition: left .5s ease-out; }
.cta-rota:hover i { left: calc(100% - 10px); }

@keyframes sobe { from { transform: translateY(18px); } to { transform: none; } }
.entra { animation: sobe .9s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Como funciona ---------- */
.passos-secao { border-top: 1px solid var(--linha); }
.passos { position: relative; display: grid; gap: 3rem; margin-top: 4rem; }
.passos li p { max-width: 36ch; margin-top: 0.75rem; color: var(--texto-2); line-height: 1.65; }
.passos .h3 { margin-top: 1.5rem; }
.passos__n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--ambar); border-radius: 50%; background: var(--noite); color: var(--ambar); font-family: var(--display); font-weight: 700; font-size: 0.9rem; }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .passos::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; border-top: 1px dashed rgb(91 147 219 / 0.6); }
}

/* ---------- Serviços ---------- */
.servicos-secao { background: var(--noite-2); }
.servicos { margin-top: 3.5rem; border-top: 1px solid var(--linha); }
.servicos li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 0.75rem 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linha); }
.servicos img { width: 56px; height: 56px; transition: transform .5s ease-out; }
.servicos h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); transition: color .2s; }
.servicos p { grid-column: 1 / -1; max-width: 48ch; color: var(--texto-2); line-height: 1.65; }
.servicos li:hover img { transform: translateY(-4px) rotate(-4deg); }
.servicos li:hover h3 { color: var(--ambar); }
@media (min-width: 768px) {
  .servicos li { grid-template-columns: 88px 1fr 1.2fr; gap: 2.5rem; padding: 2rem 0; }
  .servicos img { width: 88px; height: 88px; }
  .servicos p { grid-column: auto; transform: translateX(8px); transition: transform .5s; }
  .servicos li:hover p { transform: none; }
}

/* ---------- Orçamento ---------- */
.orcamento { display: grid; gap: 3.5rem; }
.intro { max-width: 52ch; margin-top: 1.25rem; color: var(--texto-2); line-height: 1.65; }
.form { display: grid; gap: 0.5rem 2rem; margin-top: 3rem; }
.campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.campo label, .campo legend { font-size: 0.875rem; font-weight: 600; color: var(--texto-2); }
.campo legend { margin-bottom: 0.75rem; padding: 0; }
.campo input:not([type="radio"]):not([type="checkbox"]) { width: 100%; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--linha); background: transparent; color: var(--nevoa); font: inherit; font-size: 1rem; border-radius: 0; color-scheme: dark; transition: border-color .2s; }
.campo input::placeholder { color: #8796aa; }
.campo input:focus { outline: none; border-bottom-color: var(--ambar); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--erro); }
.err { min-height: 1.25rem; font-size: 0.875rem; color: var(--erro); }
.opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opcoes label { cursor: pointer; }
.opcoes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcoes span { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--linha); border-radius: 999px; font-size: 0.875rem; font-weight: 400; color: var(--texto-2); transition: background .2s, border-color .2s, color .2s; }
.opcoes label:hover span { border-color: var(--claro); }
.opcoes input:checked + span { background: var(--ambar); border-color: var(--ambar); color: var(--noite); }
.opcoes input:focus-visible + span { outline: 2px solid var(--ambar); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 400 !important; }
.check input { margin-top: 0.25rem; width: 1rem; height: 1rem; accent-color: var(--ambar); }
.form-note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--texto-3); }
@media (min-width: 768px) { .form { grid-template-columns: 1fr 1fr; } .campo--largo { grid-column: 1 / -1; } }

/* Envio: bloco largo com borda grossa que afunda ao clicar. */
.cta-enviar { width: 100%; padding: 1rem 1.5rem; border: 0; border-bottom: 5px solid #a86a05; background: var(--ambar); color: var(--noite); text-align: left; cursor: pointer; font-family: var(--display); font-stretch: 115%; font-size: 1.125rem; font-weight: 700; transition: transform .15s, border-bottom-width .15s, filter .15s; }
.cta-enviar:hover { filter: brightness(1.05); }
.cta-enviar:active { transform: translateY(3px); border-bottom-width: 2px; }
@media (min-width: 768px) { .cta-enviar { width: auto; } }

.atendimento { position: relative; overflow: hidden; align-self: start; padding: clamp(2rem, 4vw, 2.5rem); border: 1px solid var(--linha); background: var(--noite-2); }
.atendimento p { margin-top: 1rem; color: var(--texto-2); line-height: 1.65; }
.atendimento__sol { position: absolute; right: -4rem; bottom: -5rem; width: 16rem; height: 16rem; opacity: 0.15; pointer-events: none; --s1: var(--claro); --s2: var(--claro); --s3: var(--claro); }
.atendimento__fone { display: inline-block; margin-top: 2rem; font-family: var(--display); font-stretch: 112%; font-size: 1.5rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ambar); text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color .2s; }
.atendimento__fone:hover { color: var(--ambar); }
@media (min-width: 1024px) { .orcamento { grid-template-columns: 1.25fr 0.75fr; gap: 5rem; } .atendimento { position: sticky; top: 7rem; } }

/* ---------- Perguntas ---------- */
#perguntas { border-top: 1px solid var(--linha); }
.faq { margin-top: 3rem; border-top: 1px solid var(--linha); }
.faq details { padding: 0.5rem 0; border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex-shrink: 0; width: 1rem; height: 1rem; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; background: var(--ambar); }
.faq summary i::before { top: 50%; left: 0; width: 1rem; height: 2px; transform: translateY(-50%); }
.faq summary i::after { left: 50%; top: 0; width: 2px; height: 1rem; transform: translateX(-50%); transition: transform .3s; }
.faq details[open] summary i::after { transform: translateX(-50%) scaleY(0); }
.faq p { max-width: 65ch; padding-bottom: 1.5rem; color: var(--texto-2); line-height: 1.65; }

/* ---------- Rodapé ---------- */
.rodape { position: relative; overflow: hidden; padding: 5rem clamp(1.25rem, 4vw, 2.5rem) 7rem; border-top: 1px solid var(--linha); }
.rodape__sol { position: absolute; right: -6rem; bottom: -12rem; width: 32rem; height: 32rem; opacity: 0.07; pointer-events: none; --s1: var(--nevoa); --s2: var(--nevoa); --s3: var(--nevoa); }
.rodape__in { position: relative; display: flex; flex-direction: column; gap: 3rem; }
.rodape__in > div > p { max-width: 40ch; margin-top: 1.5rem; color: var(--texto-2); line-height: 1.65; }
.rodape__links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--texto-2); }
.rodape__links a:hover { color: var(--nevoa); }
.rodape__links p { margin-top: 1rem; color: var(--texto-3); }
@media (min-width: 768px) { .rodape__in { flex-direction: row; align-items: flex-end; justify-content: space-between; } .rodape__links { text-align: right; } }

/* Botão flutuante do WhatsApp: anel que pulsa uma vez. */
.cta-flutuante { position: fixed; z-index: 50; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--atlantico); color: var(--nevoa); box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.6); transition: transform .2s; }
.cta-flutuante svg { width: 1.75rem; height: 1.75rem; }
.cta-flutuante:hover { transform: scale(1.05); }
.cta-flutuante:active { transform: scale(0.95); }
.cta-flutuante__anel { position: absolute; inset: 0; border: 2px solid var(--ambar); border-radius: 50%; opacity: 0; animation: anel 1.4s ease-out 1.2s 1 both; }
@keyframes anel { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@media (min-width: 768px) { .cta-flutuante { right: 1.5rem; bottom: 1.5rem; } }

/* Página de privacidade */
.pagina { max-width: 760px; margin: 0 auto; padding: 8rem clamp(1.25rem, 4vw, 2.5rem) 5rem; }
.pagina h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.pagina h2 { margin-top: 2.5rem; font-family: var(--display); font-stretch: 112%; font-size: 1.35rem; }
.pagina p, .pagina li { margin-top: 1rem; color: var(--texto-2); line-height: 1.7; }
.pagina ul { list-style: disc; padding-left: 1.25rem; }
.pagina a { color: var(--nevoa); text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .cta-flutuante__anel { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .cap { min-height: 100svh !important; }
}

/* Menu ganha fundo sólido depois do filme. */
.topo { transition: background-color .3s, box-shadow .3s; }
.topo--solido { background: rgb(15 34 51 / 0.94); box-shadow: 0 1px 0 var(--linha); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }