/* ─────────────────────────────────────────────────────────────────────
   buenas.design · v1 (01/11/2026)
   Paleta da Buenas, exatamente (só as 6 cores de "Buenas Studio/color palette.png").
   Tipos: Florentia (títulos), Neue Haas Grotesk (texto), Qonqueror (ênfase).
   Viagem em versão madura: traço fino, rota pontilhada que se desenha,
   avião percorrendo a rota, selo circular, cartão de embarque, painel de aeroporto.
   ───────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Florentia"; src: url("fonts/florentia-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Florentia"; src: url("fonts/florentia-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Florentia"; src: url("fonts/florentia-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Florentia"; src: url("fonts/florentia-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Florentia"; src: url("fonts/florentia-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Florentia"; src: url("fonts/florentia-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Qonqueror"; src: url("fonts/qonqueror.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* paleta da Buenas, exatamente (pedido da Julia, 01/11/2026). Só estas 6 cores no site. */
  --blush: #FFE8E1;
  --coral: #FC6959;
  --yellow: #FFDE6F;
  --lilac: #E1D0FF;
  --purple: #5D48AF;
  --gray: #565656;          /* texto */

  --f-head: "Florentia", "Optima", "Candara", sans-serif;
  --f-sans: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-em: "Qonqueror", "Florentia", serif;

  --gutter: clamp(24px, 5vw, 56px);
  --maxw: 1240px;
  --section: clamp(80px, 10vw, 144px);
  --hdr: 84px;
  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* Cada seção tem um tom: fundo, texto, títulos, rótulos, cartões e destaque.
   Texto corrido nunca vai sobre o coral (nenhuma cor da paleta tem contraste suficiente com ele):
   o coral fica para a faixa do fim, o logo, as rotas, os tickets e os detalhes. */
body, .tone-blush { --bg: var(--blush); --fg: var(--gray); --head: var(--purple); --kick: var(--purple); --card: var(--lilac); --accent: var(--coral); }
.tone-lilac  { --bg: var(--lilac); --fg: var(--gray); --head: var(--purple); --kick: var(--purple); --card: var(--blush); --accent: var(--coral); }
.tone-yellow { --bg: var(--yellow); --fg: var(--gray); --head: var(--purple); --kick: var(--purple); --card: var(--blush); --accent: var(--coral); }
.tone-purple { --bg: var(--purple); --fg: var(--blush); --head: var(--blush); --kick: var(--yellow); --card: var(--blush); --accent: var(--yellow); }
[class*="tone-"] { background: var(--bg); color: var(--fg); }
/* fundo blush contínuo; as áreas de cor são blocos com cantos arredondados, afastados das bordas
   (pedido da Julia, 01/11/2026: "muito bloco atrás de bloco") */
:root { --inset-x: clamp(16px, 3.4vw, 56px); --inset-y: clamp(16px, 2.4vw, 36px); --panel-r: clamp(24px, 3vw, 44px);
  --box-pad: clamp(30px, 3.6vw, 52px); /* espaço entre a borda de uma caixa e o texto (o do cartão de embarque) */ }
.section[class*="tone-"]:not(.tone-blush), .guide, .band { margin: var(--inset-y) var(--inset-x); border-radius: var(--panel-r); overflow: hidden; }
/* no celular tudo se alinha em duas linhas (pedido da Julia): as bordas das caixas na margem da página e o
   texto de dentro de todas as caixas no mesmo recuo do cartão de embarque */
@media (max-width: 860px) {
  :root { --inset-x: var(--gutter); }
  .section[class*="tone-"]:not(.tone-blush), .guide, .band { --gutter: var(--box-pad); }
}
.tone-blush { background: transparent; }

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
/* o que está marcado hidden fica escondido, mesmo com display: grid/flex no próprio estilo (o quadro de
   "enviado" do formulário e o feed do Instagram apareciam por causa disso) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blush);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
::selection { background: var(--yellow); color: var(--purple); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--purple); color: var(--blush); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
mark { background: linear-gradient(transparent 60%, var(--yellow) 60%); color: inherit; padding: 0 .06em; }

.wrap {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush { padding-top: 0; }
/* seção com o mesmo fundo da anterior: as duas folgas somadas viravam um buraco (About: valores → Julia) */
.section--near { padding-top: calc(var(--section) * 0.35); }
.section--top { padding-top: calc(var(--hdr) + 56px); }

/* ───────── tipos ───────── */
.display {
  font: 500 clamp(2.7rem, 6.8vw, 6rem)/1 var(--f-head);
  letter-spacing: -0.03em;
  color: var(--head);
  text-wrap: balance;
}
.display--md { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.04; }
.display--sm { font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.12; max-width: 920px; }
.title {
  font: 500 clamp(2.1rem, 4vw, 3.5rem)/1.06 var(--f-head);
  letter-spacing: -0.025em;
  color: var(--head);
  text-wrap: balance;
}
.title--sm { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; }
.title--center { text-align: center; }
/* ênfase: a palavra marcada com *asteriscos* no site.yml troca para a Qonqueror */
.display em, .title em, .band__title em, .ticker em, .postcard__title em, .post__quote em {
  font-family: var(--f-em);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.08em;
  /* a primeira letra da Qonqueror avança para a esquerda: um respiro em cada linha, para não passar da margem */
  padding-left: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.6; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
/* rótulo em caixa alta, como num painel de aeroporto (as letras giram antes de parar: app.js) */
.kicker {
  font: 500 0.8rem/1.4 var(--f-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kick);
  font-variant-numeric: tabular-nums;
}
.kicker a { text-decoration: none; }

.head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 860px; }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }

/* ───────── botões e links ───────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 30px;
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  background: var(--purple);
  color: var(--blush);
  font: 500 0.82rem/1 var(--f-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
/* o amarelo sobe por trás do texto ao passar o mouse */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: translateY(101%); transition: transform .45s var(--ease); }
.btn:hover { color: var(--purple); border-color: var(--yellow); }
.btn:hover::before { transform: none; }
.btn .plane { width: 18px; height: 18px; fill: currentColor; transition: transform .45s var(--ease); }
.btn:hover .plane { transform: translateX(4px) rotate(-12deg); }
.btn--line { background: transparent; color: var(--purple); }
.btn--light { background: var(--blush); border-color: var(--blush); color: var(--purple); }
.tone-purple .btn--line, .ftr .btn--line { border-color: var(--blush); color: var(--blush); }
.link {
  display: inline-flex; gap: 10px; align-items: baseline;
  font: 500 0.82rem/1.3 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--head); text-decoration: none;
  padding-bottom: 6px;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 1.5px no-repeat;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 30% 1.5px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; }

/* ───────── header ───────── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; transition: background-color .3s, box-shadow .3s, transform .45s var(--ease); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in { display: flex; align-items: center; gap: 32px; min-height: var(--hdr); }
.logo { margin-right: auto; display: block; }
.logo img { width: 120px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a {
  font: 500 0.8rem/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple); text-decoration: none; padding-block: 8px;
  background: linear-gradient(var(--coral), var(--coral)) left bottom / 0% 1.5px no-repeat;
  transition: background-size .4s var(--ease);
}
.nav > a:hover, .nav > a[aria-current="page"] { background-size: 100% 1.5px; }
.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid var(--purple); border-radius: 999px; }
.lang a { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px; font: 500 0.72rem/1 var(--f-sans); letter-spacing: 0.12em; color: var(--purple); text-decoration: none; }
.lang a.lang__on { background: var(--purple); color: var(--blush); }
.hdr.is-solid { background: var(--blush); box-shadow: 0 1.5px 0 var(--lilac); }

.menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; z-index: 2; color: var(--purple); }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s, top .3s; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 26px; }
@media (max-width: 900px) {
  :root { --hdr: 72px; }
  .logo img { width: 104px; }
  .logo { position: relative; z-index: 2; }
  .menu-btn { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
    padding: calc(var(--hdr) + 12px) var(--gutter) 40px; overflow-y: auto;
    background: var(--lilac);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--ease);
    visibility: hidden;
  }
  .nav > a { font: 500 clamp(2.6rem, 12vw, 3.6rem)/1.15 var(--f-head); letter-spacing: -0.02em; text-transform: none; background: none; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .nav > a[aria-current="page"] { font-family: var(--f-em); font-weight: 400; }
  .lang { margin-top: 28px; }
  .menu-open { overflow: hidden; }
  .menu-open .nav { clip-path: inset(0 0 0 0); visibility: visible; }
  .menu-open .nav > a { opacity: 1; transform: none; }
  .menu-open .nav > a:nth-child(2) { transition-delay: .06s; }
  .menu-open .nav > a:nth-child(3) { transition-delay: .12s; }
  .menu-open .nav > a:nth-child(4) { transition-delay: .18s; }
  .menu-open .hdr { background: transparent; box-shadow: none; transform: none; }
  .menu-open .menu-btn span:first-child { top: 21px; transform: rotate(45deg); }
  .menu-open .menu-btn span:last-child { top: 21px; transform: rotate(-45deg); }
}

/* ───────── aparecer ao rolar (app.js põe .is-in) ─────────
   data-reveal          sobe e aparece
   data-reveal="title"  cada palavra sobe da sua própria máscara
   data-reveal="img"    uma cortina abre de baixo para cima enquanto a foto assenta */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="title"] { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.12em 0.16em 0; margin: -0.06em -0.12em -0.16em 0; }
/* a Qonqueror passa bem acima e abaixo da linha: mais espaço na máscara dela */
em .w { padding: 0.4em 0.25em 0.4em 0.08em; margin: -0.4em -0.25em -0.4em -0.08em; }
/* depois que a palavra subiu, a máscara sai (nada fica cortado, nem ao redimensionar) */
.is-in .w { animation: unmask 0s 2.2s forwards; }
@keyframes unmask { to { overflow: visible; } }
.w__i { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: left bottom; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 0.055s); }
.is-in .w__i { transform: none; }
.js [data-reveal="img"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.4s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js [data-reveal="img"] img { scale: 1.16; transition: scale 1.9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="img"].is-in img { scale: 1; }
[data-speed] { translate: 0 var(--py, 0px); will-change: translate; }

/* ───────── elementos de viagem ───────── */
/* avião (ícone) */
.plane { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; }

/* rota pontilhada: se desenha ao rolar e o avião vai junto */
.route { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; overflow: visible; color: var(--coral); }
.route__path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round; }
.route__mask { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 1; }
.route__stop { fill: var(--bg); stroke: currentColor; stroke-width: 1.6; }
.route__plane { fill: currentColor; opacity: 0; transition: opacity .3s; }
.tone-purple .route { color: var(--yellow); }
.route--band { color: var(--blush); }
/* em telas menores o avião fica maior que o desenho da rota (app.js): ela sobe um pouco para ele não
   encostar na foto de baixo (no notebook pequeno o texto está perto, então sobe menos) */
@media (max-width: 1279px) { .route--hero { bottom: 20px; } .route--band { bottom: 14px; } }
@media (max-width: 1000px) { .route--hero { bottom: 42px; } .route--band { bottom: 34px; } }
@media (max-width: 760px) { .route--hero { bottom: 54px; } .route--band { bottom: 44px; } }

/* selo circular: o texto gira devagar; no centro, uma ilustração da Buenas redesenhada em linha
   fina (bússola, mala, globo, lâmpada; inspiradas em "Buenas Studio/outros/Icons Buenas…ai"), em pé */
.badge { width: 100%; height: auto; display: block; color: var(--coral); }
.badge__line { fill: none; stroke: currentColor; stroke-width: 1; }
.badge__line--dots { stroke-dasharray: 1.5 5; }
.badge__ring { transform-origin: 100px 100px; animation: spin 38s linear infinite; }
.badge text { font: 500 13.5px/1 var(--f-sans); letter-spacing: 0.24em; fill: var(--purple); }
.tone-purple .badge text { fill: var(--blush); }
.badge__disc { stroke: none; }
.badge--plane .badge__disc { fill: var(--yellow); }
.badge--plane .badge__line { stroke: var(--purple); }
.badge--globe .badge__line { stroke: var(--coral); }
.badge--stamp .badge__disc { fill: var(--purple); }
.badge--stamp .badge__line { stroke: var(--blush); }
.badge--stamp text { fill: var(--blush); }
.tone-purple .badge--stamp .badge__disc { fill: var(--coral); }

@keyframes spin { to { transform: rotate(360deg); } }

/* código de barras do canhoto (cartão de embarque e tickets) */
.barcode {
  display: block; width: 26px; height: 90px;
  background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 13px);
  opacity: .8;
}

/* ───────── topo (home e páginas) ───────── */
.hero { position: relative; overflow: hidden; padding: calc(var(--hdr) + clamp(56px, 9vw, 130px)) 0 clamp(96px, 11vw, 160px); }
/* em telas menores o pé do topo reserva a altura da rota + avião (que sobem, ver .route--hero), para
   ela nunca passar por cima do texto ou do selo */
@media (max-width: 1279px) { .hero:has(.route--hero) { padding-bottom: max(clamp(96px, 11vw, 160px), calc(8.5vw + 56px)); } }
@media (max-width: 1000px) { .hero:has(.route--hero) { padding-bottom: calc(8.5vw + 80px); } }
@media (max-width: 760px) { .hero:has(.route--hero) { padding-bottom: calc(8.5vw + 90px); } }
.hero__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 26px; text-align: center; max-width: 1080px; }
.hero .lead { max-width: 700px; }
.hero .actions { margin-top: 16px; }
.hero__badge { position: absolute; z-index: 0; width: clamp(120px, 13vw, 190px); top: calc(var(--hdr) + 24px); right: max(var(--gutter), calc(50% - 680px)); }
.hero--page .hero__in { justify-items: start; text-align: left; margin-left: max(var(--gutter), calc(50% - var(--maxw) / 2 + var(--gutter))); margin-right: auto; padding-inline: 0 var(--gutter); }
.hero--page .split { padding-inline: var(--gutter); }
.hero--page .hero__badge { top: calc(50% + var(--hdr) / 2 - 40px); bottom: auto; translate: 0 -50%; right: max(var(--gutter), calc(50% - 620px)); width: clamp(150px, 15vw, 210px); }
/* logo acima de 1000px o selo ainda fica ao lado do texto: o texto deixa a largura dele livre */
@media (min-width: 1001px) and (max-width: 1099px) { .hero--page .hero__in { padding-right: calc(var(--gutter) + clamp(150px, 15vw, 210px) + 40px); } }
@media (max-width: 700px) {
  .hero__badge { width: 92px; top: calc(var(--hdr) + 4px); right: 12px; }
  .hero:not(.hero--page) .hero__badge { display: none; }
}

.hero--404 { min-height: 82svh; display: grid; align-content: center; }

/* 3 imagens grandes logo depois do topo: metade sobre o lilás, metade sobre o blush */
.gallery { padding: 0 0 clamp(28px, 3.4vw, 48px); background: linear-gradient(var(--lilac) 40%, var(--blush) 40%); } /* como era: as fotos começam no lilás do topo */
.gallery__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: start; gap: clamp(12px, 1.6vw, 24px); max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--lilac); }
.gallery__item:first-child { aspect-ratio: 5 / 6; }
.gallery__item:nth-child(2) { margin-top: clamp(24px, 5vw, 80px); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item img[data-speed] { height: 116%; margin-top: -8%; }
@media (max-width: 760px) {
  .gallery__row { grid-template-columns: 1fr 1fr; }
  .gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
  .gallery__item:nth-child(2) { margin-top: 0; }
}

/* faixa de destinos que passa com a rolagem */
.ticker { overflow: hidden; padding-block: clamp(12px, 1.4vw, 18px); border-block: 1.5px solid var(--lilac); }
.ticker__track { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); width: max-content; translate: var(--px, 0px) 0; will-change: translate; }
.ticker__track span { font: 500 clamp(1.1rem, 2.1vw, 1.85rem)/1.1 var(--f-head); letter-spacing: -0.02em; color: var(--purple); white-space: nowrap; }
.ticker__track span:nth-child(4n + 3) { font-family: var(--f-em); font-weight: 400; letter-spacing: 0; }
.ticker__track .plane { width: clamp(13px, 1.3vw, 18px); height: auto; color: var(--coral); }

/* ───────── home: guia ───────── */
.guide { position: relative; overflow: hidden; padding-block: max(56px, calc(var(--section) * 0.55)); }
/* título grande à esquerda; à direita o texto em dois níveis (destaque + apoio) e o botão */
.guide__in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.guide__title { max-width: 9ch; }
.guide__text { display: grid; gap: 22px; justify-items: start; padding-top: clamp(4px, 1vw, 14px); }
/* o destaque em itálico (fonte do texto, não a Florentia), para se diferenciar do texto menor logo abaixo */
.guide__text .lead { font-size: clamp(1.2rem, 1.75vw, 1.5rem); line-height: 1.5; font-style: italic; }
.guide__more { font-size: 1rem; line-height: 1.7; max-width: 520px; opacity: .82; }
.guide__text p:last-child { margin-top: 8px; }
@media (max-width: 860px) { .guide__in { grid-template-columns: 1fr; } .guide__title { max-width: none; } }

/* ───────── tickets (destinos) ───────── */
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.ticket {
  --notch: 13px;
  position: relative; display: grid; grid-template-columns: 1fr 70px;
  min-height: 290px;
  text-decoration: none; color: var(--gray);
  background: var(--bg);
  border: 1.5px solid var(--purple);
  border-radius: 16px;
  transition: transform .5s var(--ease), background-color .4s;
}
/* os recortes do ticket, dos dois lados do picote */
.ticket::before, .ticket::after {
  content: ""; position: absolute; right: 70px; width: calc(var(--notch) * 2); height: var(--notch);
  translate: 50% 0; background: var(--blush); border: 1.5px solid var(--purple);
}
.ticket::before { top: -1.5px; border-top: 0; border-radius: 0 0 var(--notch) var(--notch); }
.ticket::after { bottom: -1.5px; border-bottom: 0; border-radius: var(--notch) var(--notch) 0 0; }
.ticket__main { display: grid; align-content: start; gap: 14px; padding: 26px 26px 30px; }
.ticket__no { font: 500 0.78rem/1 var(--f-sans); letter-spacing: 0.2em; color: var(--coral); }
.ticket__title { font: 500 clamp(1.7rem, 2.4vw, 2.2rem)/1.05 var(--f-head); letter-spacing: -0.02em; color: var(--purple); }
.ticket__text { font-size: 0.98rem; }
.ticket__stub { position: relative; display: grid; justify-items: center; align-content: space-between; padding: 26px 0; color: var(--purple); }
.ticket__stub::before { content: ""; position: absolute; left: -0.75px; top: calc(var(--notch) + 8px); bottom: calc(var(--notch) + 8px); border-left: 1.5px dashed var(--purple); }
.ticket__stub .plane { width: 22px; height: 22px; color: var(--coral); transition: transform .6s var(--ease); }
.ticket:hover { transform: translateY(-8px) rotate(-0.8deg); background: var(--lilac); }
/* ao passar o mouse, uma foto do serviço aparece, cada uma num lugar, sem cobrir texto:
   1 sobe pelo canto de cima do canhoto, 2 desce pelo canto de baixo, 3 sai pelo topo (área vazia) */
.ticket__pic {
  position: absolute; z-index: 2; width: clamp(120px, 11vw, 158px); aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease), transform .75s var(--ease);
}
.ticket__pic img { width: 100%; height: 100%; object-fit: cover; scale: 1.15; transition: scale 1s var(--ease); }
.ticket:hover .ticket__pic { opacity: 1; }
.ticket:hover .ticket__pic img { scale: 1; }
.ticket:nth-child(1) .ticket__pic { top: -48px; right: -44px; transform: translateY(40px) rotate(0deg) scale(.8); }
.ticket:nth-child(1):hover .ticket__pic { transform: none; rotate: 7deg; }
.ticket:nth-child(2) .ticket__pic { bottom: -56px; right: -44px; transform: translateY(-40px) rotate(0deg) scale(.8); }
.ticket:nth-child(2):hover .ticket__pic { transform: none; rotate: -6deg; }
.ticket:nth-child(3) .ticket__pic { bottom: calc(100% - 22px); right: 96px; transform: translateY(50px) scale(.75); }
.ticket:nth-child(3):hover .ticket__pic { transform: none; rotate: 4deg; }
.ticket .ticket__pic { rotate: 0deg; transition: opacity .35s var(--ease), transform .75s var(--ease), rotate .75s var(--ease); }
@media (hover: none), (max-width: 900px) { .ticket__pic { display: none; } }
.ticket:hover .ticket__stub .plane { transform: translateX(8px) rotate(-18deg); }
@media (max-width: 900px) { .tickets { grid-template-columns: 1fr; } .ticket { min-height: 0; } }

/* ───────── cartões de projeto ───────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.card { display: grid; gap: 16px; text-decoration: none; color: var(--head); }
.card:nth-child(3n + 2) { margin-top: clamp(0px, 4vw, 64px); }
.card__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--card); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
/* no mouse em cima, outras imagens do projeto se revezam por cima da capa, como um gif (app.js) */
.card__img:has(.card__flip) { position: relative; }
.card__flip { position: absolute; inset: 0; opacity: 0; }
.card__flip.is-on { opacity: 1; }
.js .card:hover .card__img img, .card:hover .card__img img { scale: 1.06; transition: scale .9s var(--ease); }
.card__name { font: 500 1.45rem/1.15 var(--f-head); letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__name::after { content: "→"; font-family: var(--f-sans); color: var(--coral); transition: translate .4s var(--ease); }
.card:hover .card__name::after { translate: 8px 0; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } .card:nth-child(3n + 2) { margin-top: 0; } .card:nth-child(2n) { margin-top: 48px; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .card:nth-child(2n) { margin-top: 0; } }

/* ───────── depoimentos ───────── */
/* parados, um ao lado do outro: passam com as setas dos lados (ou arrastando no celular), em volta sem fim
   (app.js copia os cartões antes e depois). Cada cartão para na margem do conteúdo e os vizinhos somem no
   degradê das bordas */
.quotes-box { position: relative; --qpad: max(var(--gutter), calc(50% - var(--maxw) / 2 + var(--gutter))); }
.quotes { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--qpad); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.quotes::-webkit-scrollbar { display: none; }
.quotes__track { display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 28px); width: max-content; padding: 10px var(--qpad) 8px; }
.quote { flex: none; width: clamp(290px, 30vw, 420px); margin: 0; display: grid; gap: 22px; padding: clamp(30px, 3vw, 38px); background: var(--card); border-radius: var(--radius); scroll-snap-align: start; transition: transform .5s var(--ease); }
.quote:nth-child(even) { margin-top: 36px; }
.quotes__track.is-loop .quote { margin-top: 0; }
.quotes__track.is-loop .quote.is-low { margin-top: 36px; }
.quotes__nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding-inline: clamp(10px, 2vw, 32px); pointer-events: none; }
.quotes__arrow { pointer-events: auto; display: grid; place-items: center; width: clamp(48px, 4.2vw, 60px); aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--blush); color: var(--purple); cursor: pointer; box-shadow: 0 8px 24px rgb(93 72 175 / .18); transition: background .3s, color .3s, opacity .3s, scale .3s var(--ease); }
.quotes__arrow svg { width: 42%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quotes__arrow--prev svg { rotate: 180deg; }
.quotes__arrow:hover { background: var(--coral); color: var(--blush); scale: 1.06; }
.quotes__arrow:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
/* no celular, sem a escadinha e todos da mesma altura (o nome da cliente no pé de cada cartão), e as
   setas embaixo dos cartões, para não taparem o texto */
@media (max-width: 760px) {
  .quotes__nav { position: static; justify-content: center; gap: 14px; margin-top: 22px; }
  .quotes__track { align-items: stretch; }
  .quote { grid-template-rows: 1fr auto; }
  .quote:nth-child(even), .quotes__track.is-loop .quote.is-low { margin-top: 0; }
}
.quote:hover { transform: translateY(-6px) rotate(-0.6deg); }
.quote blockquote { margin: 0; font-size: 1rem; }
.quote blockquote::before { content: "“"; display: block; height: .5em; margin-bottom: .15em; font: 400 4rem/1 var(--f-em); color: var(--coral); }
.quote figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1.5px dashed var(--lilac); }
.quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.quote figcaption strong { display: block; font: 500 1.2rem/1.2 var(--f-head); color: var(--purple); }
.quote figcaption span { font-size: 0.9rem; line-height: 1.4; }

/* ───────── logos dos clientes (faixa que passa sozinha) ───────── */
.section--logos { padding-block: clamp(40px, 5vw, 72px); }
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; align-items: center; gap: clamp(36px, 5vw, 80px); width: max-content; animation: logos 45s linear infinite; }
.logos__track img { height: clamp(40px, 4.6vw, 60px); width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos__track img:hover { filter: none; opacity: 1; }
.logos:hover .logos__track, .logos:focus-within .logos__track { animation-play-state: paused; }
@keyframes logos { to { transform: translateX(calc(-50% - 10px)); } }

/* ───────── home: Instagram ───────── */
.follow__in { display: grid; justify-items: center; gap: 18px; text-align: center; }
/* grade com os últimos posts do Instagram (app.js lê o feed do Behold) */
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1vw, 14px); margin-top: clamp(32px, 4vw, 52px); }
.ig a { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--blush); }
.ig img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.ig a:hover img { scale: 1.07; }
.ig a:nth-child(even) { translate: 0 18px; }
@media (max-width: 760px) { .ig { grid-template-columns: repeat(3, 1fr); } .ig a:nth-child(n + 7) { display: none; } }

/* ───────── faixa coral do fim (só títulos grandes: nada de texto corrido no coral) ───────── */
/* --lift sobe o texto: tira do topo e devolve no pé, o cartão continua do mesmo tamanho */
.band { --bg: var(--coral); --lift: clamp(28px, 4vw, 52px); position: relative; overflow: hidden; background: var(--coral); color: var(--blush); padding-block: calc(clamp(96px, 12vw, 170px) - var(--lift)) calc(clamp(96px, 12vw, 170px) + var(--lift)); }
/* como no topo: em telas menores a rota sobe (.route--band) e o pé do cartão reserva a altura dela, para o
   avião não ser cortado pela borda do cartão nem passar por cima do texto */
@media (max-width: 1000px) { .band { padding-bottom: calc(max(clamp(96px, 12vw, 170px), calc(8.2vw + 88px)) + var(--lift)); } }
@media (max-width: 760px) { .band { padding-bottom: calc(8.2vw + 94px + var(--lift)); } }
.band__in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 18px; }
.band .kicker { --kick: var(--blush); --accent: var(--blush); }
.band__title { font: 500 clamp(2.8rem, 7.4vw, 6.6rem)/1 var(--f-head); color: var(--blush); letter-spacing: -0.03em; }

/* ───────── rodapé ───────── */
.ftr { background: var(--purple); color: var(--blush); padding-block: clamp(56px, 7vw, 88px) 28px; }
.ftr__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1.5px dashed var(--lilac); }
.ftr__top .btn:first-child { justify-self: start; }
.ftr__top .btn:last-child { justify-self: end; }
.ftr__logo img { width: 170px; }
.ftr__agency { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; padding: 22px 0; border-bottom: 1.5px dashed var(--lilac); text-align: center; font: 500 clamp(1.15rem, 1.8vw, 1.4rem)/1.35 var(--f-head); }
.ftr__agency a { color: var(--yellow); text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 100% 1.5px no-repeat; transition: background-size .45s var(--ease); white-space: nowrap; }
.ftr__agency a:hover { background-size: 30% 1.5px; }
.ftr__cols { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; padding-block: clamp(36px, 5vw, 56px); }
.ftr h3 { font: 500 0.78rem/1.4 var(--f-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.ftr__cols p + p { margin-top: 4px; }
.ftr__cols a { text-decoration: none; }
.ftr__cols a:hover { color: var(--yellow); }
.ftr__social { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; } /* 2 em cima, 2 embaixo */
.ftr__social a { padding-bottom: 3px; background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 100% 1.5px no-repeat; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 8px; font-size: 0.78rem; color: var(--lilac); opacity: .8; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ftr__nav a { text-decoration: none; }
.ftr__nav a:hover { color: var(--yellow); }
@media (max-width: 760px) {
  .ftr__top { grid-template-columns: 1fr; justify-items: center; }
  .ftr__top .btn:first-child, .ftr__top .btn:last-child { justify-self: center; }
  .ftr__logo { order: -1; }
  .ftr__cols { grid-template-columns: 1fr; }
}

/* ───────── duas colunas: texto + imagem ───────── */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: clamp(40px, 6vw, 104px); }
.split--center { align-items: center; }
.split__text { display: grid; gap: 20px; justify-items: start; }
.split__media { position: relative; }
.split__media--badge { max-width: 380px; width: 100%; justify-self: center; }
.portrait { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.js .portrait[data-reveal="img"] { clip-path: circle(0% at 50% 60%); transition: clip-path 1.5s var(--ease); }
.js .portrait[data-reveal="img"].is-in { clip-path: circle(50% at 50% 50%); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.split__badge { position: absolute; width: clamp(110px, 12vw, 170px); right: -4%; bottom: -6%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { max-width: 440px; margin-inline: auto; width: 100%; }
  .split__badge { right: 0; width: 110px; }
}

/* ───────── About ───────── */
.statement { overflow: hidden; padding-block: clamp(120px, 14vw, 210px); }
.statement__in { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 660px; position: relative; z-index: 1; }
.floats { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; width: clamp(150px, 17vw, 270px); translate: var(--fx, 0px) var(--fy, 0px); rotate: calc(var(--r0, 0deg) + var(--fr, 0deg)); will-change: translate, rotate; }
/* cada imagem vira um selo postal: a foto é recortada no formato serrilhado do "Vector.svg" da Julia
   (Buenas Studio/outros), na proporção dele (837×1034), então nunca distorce. Sem borda clara em volta
   (ela pediu para tirar): o picote fica na própria foto */
.float__img { aspect-ratio: 837 / 1034; -webkit-mask: url("brand/stamp-frame.svg") center / 100% 100% no-repeat; mask: url("brand/stamp-frame.svg") center / 100% 100% no-repeat; }
.js .float__img[data-reveal="img"] { clip-path: inset(100% 0 0 0); }
.js .float__img[data-reveal="img"].is-in { clip-path: inset(0); }
.float__img img { width: 100%; height: 100%; object-fit: cover; }
/* cada foto vai na moldura da proporção dela (render.mjs escolhe float--f-*; molduras geradas por
   tools/stamp-frames.mjs com o mesmo picote), para a foto aparecer inteira */
.float--f-wide .float__img { aspect-ratio: 1034 / 837; -webkit-mask-image: url("brand/stamp-frame-wide.svg"); mask-image: url("brand/stamp-frame-wide.svg"); }
.float--f-3x2 .float__img { aspect-ratio: 3 / 2; -webkit-mask-image: url("brand/stamp-frame-3x2.svg"); mask-image: url("brand/stamp-frame-3x2.svg"); }
.float--f-16x9 .float__img { aspect-ratio: 16 / 9; -webkit-mask-image: url("brand/stamp-frame-16x9.svg"); mask-image: url("brand/stamp-frame-16x9.svg"); }
.float--f-9x16 .float__img { aspect-ratio: 9 / 16; -webkit-mask-image: url("brand/stamp-frame-9x16.svg"); mask-image: url("brand/stamp-frame-9x16.svg"); }
.float--1 { --r0: -7deg; top: 8%; right: calc(50% + 350px); }
.float--2 { --r0: 5deg; bottom: 7%; right: calc(50% + 370px); width: clamp(130px, 13vw, 210px); }
.float--3 { --r0: 6deg; top: 6%; left: calc(50% + 360px); width: clamp(130px, 13vw, 210px); }
.float--4 { --r0: -4deg; bottom: 8%; left: calc(50% + 350px); }
.float--f-9x16 { width: clamp(110px, 10vw, 160px); }
@media (max-width: 1100px) { .float { width: 120px; } .float--2, .float--3 { width: 96px; } }
@media (max-width: 760px) {
  .statement { padding-block: 186px; }
  .float { width: 92px; } .float--wide { width: 128px; } .float--f-16x9 { width: 140px; } .float--2, .float--3 { display: none; }
  .float--1 { top: 34px; left: 16px; right: auto; } .float--4 { bottom: 34px; right: 16px; left: auto; }
}
.statement__kicker { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.2 var(--f-em); color: var(--yellow); margin-bottom: -14px; } /* colado no título (pedido da Julia) */
.statement .lead { max-width: 760px; }

.values { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1000px; margin-inline: auto; }
.values li {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px; border: 1.5px solid var(--purple); border-radius: 999px;
  font: 500 clamp(1.15rem, 1.7vw, 1.45rem)/1 var(--f-head); color: var(--purple);
  transition: background-color .35s, color .35s, transform .35s var(--ease);
}
.values li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transition: background-color .35s; }
.values li:hover { background: var(--purple); color: var(--blush); transform: translateY(-3px); }
.values li:hover::before { background: var(--yellow); }

.facts .head { max-width: none; }
.facts__grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.facts__media { position: sticky; top: calc(var(--hdr) + 24px); }
.facts__list { display: grid; gap: 0; border-top: 1.5px solid var(--purple); }
/* sanfona (como no site antigo): uma pergunta aberta por vez, o avião vira ao abrir */
.fact { border-bottom: 1.5px solid var(--purple); }
.fact summary { display: flex; align-items: center; gap: 14px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--f-head); color: var(--purple); }
.fact summary::-webkit-details-marker { display: none; }
.fact summary::after { content: "+"; margin-left: auto; font: 400 1.6rem/1 var(--f-sans); transition: rotate .4s var(--ease); }
.fact[open] summary::after { rotate: 45deg; }
.fact summary .plane { width: 18px; height: 18px; color: var(--coral); transition: rotate .5s var(--ease); }
.fact[open] summary .plane { rotate: 90deg; }
.fact p { padding: 0 0 24px 32px; max-width: 640px; }
.fact[open] p { animation: fact-open .6s var(--ease); }
@keyframes fact-open { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) {
  .facts__grid { grid-template-columns: 1fr; }
  .facts__media { position: relative; top: 0; max-width: 340px; margin-inline: auto; width: 100%; }
}

/* ───────── Services ───────── */
.duo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 104px); align-items: start; }
.duo__media { position: relative; padding-top: 40px; }
.duo__photo { border-radius: var(--radius); overflow: hidden; }
.duo__photo img { width: 100%; }
.duo__badge { position: absolute; z-index: 1; width: clamp(110px, 11vw, 160px); right: -40px; bottom: -44px; }
.duo__text { display: grid; gap: 22px; padding-top: clamp(0px, 4vw, 64px); }
.duo__second { margin-top: 12px; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo__badge { right: -6px; bottom: -30px; width: 100px; }
}

/* Services: o lilás do topo continua por trás de todo o texto e termina um pouco depois do início da
   2ª foto (pedido da Julia: a foto atravessa a divisa, como a 1ª); nunca no meio de um parágrafo */
.duo-band { padding-top: 0; background: var(--lilac); position: relative; isolation: isolate; overflow: hidden; }
.duo-band .duo__media { padding-top: 0; }
.duo-band .duo__second { position: relative; }
.duo-band .duo__second::before { content: ""; position: absolute; z-index: -1; top: 22%; left: -150vw; width: 300vw; height: 300vh; background: var(--blush); }

/* cartões de embarque (Services), teste pedido pela Julia em 01/11/2026: no computador ficam lado a lado,
   um aberto e os outros só com o canhoto (o nome na vertical); clicar no canhoto abre aquele (app.js).
   Com o mouse em cima do aberto, as fotos do serviço aparecem em volta dele, cada uma num lugar, como nos
   tickets da home. Cada cartão numa cor da paleta e com um carimbo de passaporte.
   Sem JavaScript, no tablet e no celular: um embaixo do outro, imagens antes do texto. */
.boarding { --stub: 84px; --notch: 16px; display: grid; gap: clamp(56px, 7vw, 96px); }
.tk {
  --tk-bg: var(--lilac); --fg: var(--gray); --head: var(--purple); --kick: var(--purple); --tk-line: var(--purple); --tk-dot: var(--coral); --tk-icon: var(--coral);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); grid-template-areas: "media media" "text stub";
}
.tk--yellow { --tk-bg: var(--yellow); }
.tk--purple { --tk-bg: var(--purple); --fg: var(--blush); --head: var(--blush); --kick: var(--yellow); --tk-line: var(--blush); --tk-dot: var(--yellow); --tk-icon: var(--yellow); }
.tk__main { display: contents; }
.tk__media { grid-area: media; display: grid; margin-bottom: 32px; }
.tk__img { border-radius: var(--radius); overflow: hidden; }
.tk__img img { width: 100%; }
.tk__img--corner { width: 72%; justify-self: end; margin-top: -16%; position: relative; z-index: 1; outline: 8px solid var(--blush); rotate: 2.5deg; }
/* foto do canto em pé: mais estreita, para não esconder a de baixo */
.tk__img--tall.tk__img--corner { width: 46%; }
.tk__stamp { display: none; }
.tk__text { grid-area: text; display: grid; gap: 20px; align-content: start; padding: var(--box-pad); background: var(--tk-bg); color: var(--fg); border-radius: var(--radius) 0 0 var(--radius); }
.tk__text .kicker { margin: 0; }
/* margem de cima: um respiro entre a descrição e o que inclui */
.tk__label { justify-self: start; margin-top: 18px; font: 500 0.78rem/1.4 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kick); }
/* a lista corre de cima para baixo, coluna por coluna, com o mesmo espaço entre todos os itens */
.tk__list { list-style: none; columns: 2; column-gap: 24px; }
.tk__list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 0.98rem; line-height: 1.45; break-inside: avoid; }
.tk__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tk-dot); translate: 0 -2px; }
/* o canhoto: picote pontilhado e os dois recortes meia-lua na emenda com o resto do cartão */
.tk__stub {
  grid-area: stub; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px;
  padding: 36px 0; border: 0; background: var(--tk-bg); color: var(--head); font: inherit; text-align: center; cursor: default;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tk__stub::before { content: ""; position: absolute; left: -0.75px; top: calc(var(--notch) + 8px); bottom: calc(var(--notch) + 8px); border-left: 1.5px dashed var(--tk-line); opacity: .8; transition: opacity .3s var(--ease); }
.tk__stub::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--notch) * -1); width: calc(var(--notch) * 2); pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--blush) var(--notch), transparent calc(var(--notch) + 0.5px)), radial-gradient(circle at 50% 100%, var(--blush) var(--notch), transparent calc(var(--notch) + 0.5px));
}
.tk__no { font: 500 0.78rem/1 var(--f-sans); letter-spacing: 0.2em; color: var(--kick); }
.tk__name { display: none; }
.tk__icon .plane { display: block; width: 24px; height: 24px; color: var(--tk-icon); transition: translate .5s var(--ease), rotate .5s var(--ease); }
.tk__stub .barcode { color: var(--head); }
.tk__stub:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
@media (max-width: 760px) {
  .boarding { --stub: 64px; }
  .tk__list { columns: 1; }
  .tk__no { display: none; }
}
/* celular estreito: o título do cartão (Brand Design, Social Media) cabe numa linha ao lado do canhoto */
@media (max-width: 400px) { .tk__text .title { font-size: min(1.9rem, 8.2vw); } }

/* computador: lado a lado, abrindo e fechando como uma sanfona */
@media (min-width: 1001px) {
  .js .boarding { --stub: 92px; --gap: 12px; display: flex; gap: var(--gap); align-items: stretch; container-type: inline-size; }
  .js .tk { position: relative; display: flex; flex: 0 0 auto; min-width: 0; transition: flex-grow .8s var(--ease); }
  .js .tk.is-open { flex-grow: 1; }
  .js .tk__main {
    /* o conteúdo tem a largura do cartão aberto (100cqw menos os 3 canhotos e os vãos): não se reorganiza
       enquanto abre, só é revelado. O carimbo fica pequeno no canto de cima, à direita. */
    --open: calc(100cqw - 3 * var(--stub) - 2 * var(--gap));
    position: relative; display: grid; grid-template-columns: var(--open); align-items: center;
    flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; background: var(--tk-bg); border-radius: var(--radius) 0 0 var(--radius);
  }
  .js .tk__text { grid-area: auto; gap: 16px; align-content: center; padding: 40px 32px 40px 48px; border-radius: 0; }
  .js .tk__text .title { font-size: clamp(2rem, 2.6vw, 2.6rem); }
  .js .tk__text > p:not([class]) { max-width: 62ch; font-size: 1rem; line-height: 1.6; }
  .js .tk__list { columns: 3; column-gap: 22px; }
  .js .tk__list li { margin-bottom: 9px; font-size: 0.93rem; line-height: 1.4; }
  /* o carimbo de passaporte, pequeno e meio torto no canto, como se tivesse sido batido no cartão (pedido da Julia) */
  .js .tk__stamp { display: block; position: absolute; top: 26px; right: 30px; width: 78px; height: auto; rotate: -10deg; opacity: .9; }
  .js .tk--yellow .tk__stamp { rotate: 8deg; }
  .js .tk--purple .tk__stamp { rotate: -4deg; }
  /* o conteúdo aparece depois que o cartão abre e some logo ao fechar */
  .js .tk__main > * { opacity: 0; transition: opacity .2s var(--ease); }
  .js .tk.is-open .tk__main > * { opacity: 1; transition: opacity .5s var(--ease) .35s; }
  .js .tk__stub { flex: 0 0 var(--stub); padding: 32px 0 30px; cursor: pointer; transition: border-radius .4s var(--ease), translate .4s var(--ease); }
  .js .tk__name { display: block; writing-mode: vertical-rl; rotate: 180deg; font: 500 0.95rem/1 var(--f-sans); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
  .js .tk:not(.is-open) .tk__stub { border-radius: var(--radius); }
  .js .tk:not(.is-open) .tk__stub::before { opacity: 0; }
  .js .tk:not(.is-open) .tk__stub:hover { translate: 0 -8px; }
  .js .tk:not(.is-open) .tk__stub:hover .plane { translate: 0 -4px; rotate: -45deg; }
  .js .tk.is-open .tk__stub { cursor: default; }

  /* as fotos: escondidas, aparecem com o mouse em cima do cartão aberto, cada uma num lugar, sem cobrir o
     texto: espiam por cima ou por baixo das bordas (entram só na margem do cartão) */
  .js .tk__media { position: absolute; inset: 0; z-index: 3; display: block; margin: 0; pointer-events: none; }
  .js .tk:not(.is-open) .tk__media { visibility: hidden; }
  .js .tk__img, .js .tk__img--corner, .js .tk__img--tall.tk__img--corner {
    position: absolute; width: 220px; margin: 0; outline: 0; border-radius: 14px; rotate: 0deg; opacity: 0;
    transition: opacity .35s var(--ease), transform .75s var(--ease), rotate .75s var(--ease);
  }
  .js .tk__img--corner { width: 250px; }
  .js .tk__img--tall.tk__img--corner { width: 160px; }
  .js .tk__img img { scale: 1.12; transition: scale 1s var(--ease); }
  .js .tk.is-open:not(.is-opening):hover .tk__img { opacity: 1; transform: none; }
  .js .tk.is-open:not(.is-opening):hover .tk__img img { scale: 1; }
  /* 1º cartão: a 1ª foto sai por cima, a 2ª por baixo, perto do canhoto */
  .js .tk:nth-child(1) .tk__img:first-child { bottom: calc(100% - 26px); left: 30%; transform: translateY(40px) scale(.8); }
  .js .tk:nth-child(1).is-open:hover .tk__img:first-child { rotate: -5deg; }
  .js .tk:nth-child(1) .tk__img--corner { top: calc(100% - 26px); right: calc(var(--stub) + 40px); transform: translateY(-40px) scale(.8); }
  .js .tk:nth-child(1).is-open:hover .tk__img--corner { rotate: 6deg; }
  /* 2º: a 1ª sai por baixo, a 2ª por cima, no meio */
  .js .tk:nth-child(2) .tk__img:first-child { top: calc(100% - 26px); left: 18%; transform: translateY(-40px) scale(.8); }
  .js .tk:nth-child(2).is-open:hover .tk__img:first-child { rotate: 4deg; }
  .js .tk:nth-child(2) .tk__img--corner { bottom: calc(100% - 26px); left: 50%; transform: translateY(40px) scale(.8); }
  .js .tk:nth-child(2).is-open:hover .tk__img--corner { rotate: -6deg; }
  /* 3º: a 1ª sai por cima, a 2ª por baixo, no meio */
  .js .tk:nth-child(3) .tk__img:first-child { bottom: calc(100% - 26px); left: 14%; transform: translateY(40px) scale(.8); }
  .js .tk:nth-child(3).is-open:hover .tk__img:first-child { rotate: 5deg; }
  .js .tk:nth-child(3) .tk__img--corner { top: calc(100% - 26px); left: 44%; transform: translateY(-40px) scale(.8); }
  .js .tk:nth-child(3).is-open:hover .tk__img--corner { rotate: -4deg; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
  .js .tk, .js .tk__main > *, .js .tk__stub, .js .tk__img { transition: none; }
}

/* roteiro (processo): uma linha pontilhada liga as paradas e vai se preenchendo ao rolar */
.steps { --p: 0; list-style: none; position: relative; display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.steps::before, .steps::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 0; border-left: 1.5px dashed var(--purple); opacity: .5; }
.steps::after { border-left: 2px solid var(--coral); opacity: 1; transform-origin: top; transform: scaleY(var(--p)); }
.steps::before, .steps::after { z-index: 0; }
.step { z-index: 1; }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: clamp(20px, 3vw, 40px); padding: 22px 0; }
.step__n { grid-row: span 2; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--purple); color: var(--purple); font: 500 0.85rem/1 var(--f-sans); letter-spacing: 0.08em; transition: background-color .4s, color .4s; }
.step.is-in .step__n { background: var(--purple); color: var(--blush); transition-delay: .3s; }
.step h3 { font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--f-head); color: var(--purple); padding-top: 10px; margin-bottom: 6px; }

/* ───────── Contato ───────── */
.form-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 104px); align-items: start; }
.form-wrap__intro { display: grid; gap: 18px; justify-items: start; position: sticky; top: calc(var(--hdr) + 24px); }
.form { padding: clamp(24px, 3.4vw, 48px); background: var(--lilac); border-radius: var(--radius); }
@media (max-width: 860px) { .form { padding-inline: var(--box-pad); } } /* texto no mesmo recuo das outras caixas */
#form-fields { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field span { font: 500 1.15rem/1.3 var(--f-head); color: var(--purple); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 2px; border: 0; border-bottom: 1.5px solid var(--purple); border-radius: 0;
  background: transparent; color: var(--gray); font-size: 1.05rem;
  transition: border-color .25s, padding .25s;
}
.field select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235D48AF' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 32px; }
.field textarea { resize: none; min-height: 110px; field-sizing: content; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--coral); border-bottom-width: 2.5px; }
.field [aria-invalid="true"] { border-bottom-color: var(--coral); border-bottom-width: 2.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#form-fields .btn { justify-self: start; margin-top: 8px; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--purple); font-weight: 500; padding: 12px 16px; border: 1.5px solid var(--coral); border-radius: 12px; }
.form__status a { color: inherit; }
/* enviado (pedido da Julia, 01/11/2026): o quadro inteiro fica roxo-escuro (cores do tom roxo) e um avião
   cruza a rota pontilhada antes do recado */
.form { transition: background-color .6s var(--ease); }
.form.is-sent { background: var(--purple); }
.form__done { display: grid; gap: 16px; justify-items: start; align-content: center; min-height: 340px; padding: 8px 0; }
.form__done:focus { outline: none; }
.form__done .lead { max-width: 34ch; }
.form__flight { display: flex; align-items: center; width: 100%; color: var(--yellow); animation: flight 1.6s var(--ease) both; }
.form__flight::before { content: ""; flex: 1; margin-right: 10px; border-top: 2px dashed currentColor; opacity: .7; }
.form__flight .plane { width: 40px; height: 40px; }
@keyframes flight { from { width: 0; opacity: 0; } 15% { opacity: 1; } to { width: 100%; } }
@media (max-width: 860px) {
  .form-wrap { grid-template-columns: 1fr; }
  .form-wrap__intro { position: static; }
}

/* ───────── página de projeto ───────── */
.project { padding-top: calc(var(--hdr) + clamp(40px, 6vw, 88px)); }
.project__head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.project__hero { margin: 0; border-radius: var(--radius); overflow: hidden; }
.project__hero img, .pm img { width: 100%; }
.project__intro { display: grid; grid-template-columns: 0.32fr 0.68fr; gap: clamp(28px, 5vw, 80px); padding-block: clamp(44px, 6vw, 88px); }
.project__facts { display: grid; gap: 0; align-content: start; border-top: 1.5px solid var(--purple); }
.project__facts > div { padding: 14px 0; border-bottom: 1.5px dashed var(--purple); }
.project__facts dt { font: 500 0.75rem/1.5 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); }
.project__facts dd { font: 500 1.25rem/1.3 var(--f-head); color: var(--purple); }
.project__about { display: grid; gap: 14px; max-width: 760px; }
.project__about h2 { margin-bottom: 6px; }
.project__about p, .pm--text p { margin: 0; }
.project__about h3, .project__about h4, .pm--text h3, .pm--text h4 { font: 500 1.35rem/1.3 var(--f-head); color: var(--purple); }
.project__about strong, .pm--text strong { color: var(--purple); font-weight: 600; }
.project__about a, .pm--text a { color: var(--purple); }
/* rótulos e listas de palavras dos textos antigos (render.mjs, structureRich): subtítulo + etiquetas */
.pm--text h3:not(:first-child) { margin-top: 14px; }
.pm-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pm-tags li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1.5px solid var(--purple); border-radius: 999px; font: 500 1.05rem/1 var(--f-head); color: var(--purple); }
.pm-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.project__body { display: grid; gap: clamp(14px, 1.6vw, 24px); padding-bottom: var(--section); }
.pm { margin: 0; }
.pm--image { border-radius: var(--radius); overflow: hidden; }
.pm--text { display: grid; gap: 12px; max-width: 760px; margin: clamp(24px, 3vw, 48px) 0 clamp(24px, 3vw, 48px) calc(32% + clamp(28px, 5vw, 80px) * 0.32); font-size: 1.08rem; }
.pm--video { border-radius: var(--radius); overflow: hidden; background: var(--lilac); }
.pm--video video { display: block; width: 100%; height: auto; }
.pm--grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: inherit; }
.pm--grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 860px) {
  .project__intro { grid-template-columns: 1fr; }
  .pm--text { margin-left: 0; }
  .pm--grid { grid-template-columns: 1fr; }
}

.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); padding-bottom: var(--section); }
.pnav__item { display: grid; gap: 8px; text-decoration: none; color: var(--purple); }
.pnav__item--next { text-align: right; }
.pnav__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--lilac); margin-bottom: 10px; }
.pnav__img img { width: 100%; height: 100%; object-fit: cover; }
.pnav__item:hover .pnav__img img { scale: 1.06; transition: scale .9s var(--ease); }
.pnav__label { font: 500 0.75rem/1.5 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); }
.pnav__name { font: 500 clamp(1.5rem, 2.8vw, 2.3rem)/1.1 var(--f-head); letter-spacing: -0.02em; }

/* ───────── blog (diário de bordo) ───────── */
/* lista: o post mais novo grande, como um cartão-postal deitado; os outros dois lado a lado */
.posts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); }
/* página do blog: no computador, os posts depois do destaque vão de 3 em 3 (com 4 posts, uma linha cheia) */
@media (min-width: 1001px) { .posts:not(.posts--more) { grid-template-columns: repeat(3, 1fr); } }
.postcard { display: grid; gap: 20px; align-content: start; text-decoration: none; color: var(--fg); }
.postcard--feature { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); }
.postcard__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--card); }
.postcard--feature .postcard__img { aspect-ratio: 5 / 4; }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.postcard:hover .postcard__img img { scale: 1.05; }
.postcard__body { display: grid; gap: 14px; justify-items: start; }
.postcard__meta { font: 500 0.75rem/1.4 var(--f-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); }
.postcard__title { font: 500 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--f-head); letter-spacing: -0.01em; color: var(--head); text-wrap: balance; }
.postcard--feature .postcard__title { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.postcard__excerpt { max-width: 52ch; }
.postcard__more { margin-top: 4px; padding-bottom: 6px; border-bottom: 1.5px solid var(--coral); font: 500 0.78rem/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); }
.postcard__more span { display: inline-block; transition: translate .4s var(--ease); }
.postcard:hover .postcard__more span { translate: 6px 0; }
@media (max-width: 760px) { .posts, .postcard--feature { grid-template-columns: 1fr; } }

/* post: cabeçalho, capa larga e o texto numa coluna confortável de ler */
.post { padding-top: calc(var(--hdr) + clamp(40px, 6vw, 88px)); }
.post__head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.post__head .display { max-width: 16ch; }
.post__head .kicker a { color: inherit; text-decoration: none; }
.post__head .kicker a:hover { color: var(--coral); }
.post__lead { max-width: 40ch; font: italic 400 clamp(1.3rem, 2.1vw, 1.75rem)/1.4 var(--f-head); color: var(--purple); }
.post__meta { font: 500 0.75rem/1.5 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.post__cover { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 8; background: var(--card); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .post__cover { aspect-ratio: 4 / 3; } }
.post__body { max-width: 680px; margin: clamp(48px, 7vw, 88px) auto 0; font-size: 1.125rem; line-height: 1.75; }
.post__body > * { margin: 0; }
.post__body > * + * { margin-top: 1.15em; }
.post__body h2 { margin-top: 2.1em; font: 500 clamp(1.55rem, 2.5vw, 2rem)/1.2 var(--f-head); letter-spacing: -0.01em; color: var(--purple); text-wrap: balance; }
.post__body h2 + * { margin-top: 0.7em; }
.post__body strong { font-weight: 600; color: var(--purple); }
.post__body ul { padding-left: 1.3em; }
.post__body li + li { margin-top: 0.55em; }
.post__body li::marker { color: var(--coral); }
/* a frase em destaque: lilás, em Florentia itálico, com a aspa da Buenas */
.post__quote { margin-block: 2em; padding: clamp(30px, 4vw, 44px); background: var(--lilac); border-radius: var(--radius); }
.post__body > .post__quote { margin-top: 2em; }
.post__quote::before { content: "“"; display: block; height: .45em; font: 400 4rem/1 var(--f-em); color: var(--coral); }
.post__quote p { margin: 0; font: italic 400 clamp(1.4rem, 2.4vw, 1.85rem)/1.35 var(--f-head); color: var(--purple); text-wrap: balance; }
/* imagens um pouco mais largas que o texto no desktop */
.post__fig { margin-inline: clamp(-140px, calc((680px - 100vw) / 2 + var(--gutter)), 0px); }
.post__body > .post__fig { margin-top: 2em; margin-bottom: 0.6em; }
.post__img { display: block; overflow: hidden; border-radius: var(--radius); background: var(--card); }
.post__img img { width: 100%; }
.post__fig figcaption { margin-top: 12px; font-size: 0.9rem; line-height: 1.5; text-align: center; }
/* links dentro do texto do post (para outras páginas do site) */
.post__body :is(p, li) a { color: var(--purple); font-weight: 500; text-decoration: underline 1.5px var(--coral); text-underline-offset: 4px; transition: color .25s var(--ease); }
.post__body :is(p, li) a:hover { color: var(--coral); }
.post__fig figcaption a { color: var(--coral); font-weight: 500; text-decoration: none; white-space: nowrap; }
.post__fig figcaption a:hover { text-decoration: underline; }
/* o convite do fim */
.post__cta { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 820px; margin: clamp(64px, 8vw, 104px) auto 0; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px); border-radius: var(--panel-r); }
.post__cta p:not(.kicker) { max-width: 46ch; }
.post__cta .btn { margin-top: 8px; }
.post-more__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
/* no celular, um embaixo do outro, com folga e um traço entre os dois para não grudar um no outro */
@media (max-width: 560px) { .pnav { grid-template-columns: 1fr; gap: 0; } .pnav__item--next { text-align: left; margin-top: 28px; padding-top: 28px; border-top: 1.5px dashed var(--lilac); } }

/* ───────── telas menores: nada por cima do texto ───────── */
@media (max-width: 1000px) {
  /* o selo do topo das páginas internas desce para depois do texto, à direita, em vez de flutuar sobre ele.
     O da home fica no canto de cima, como no computador (pedido da Julia: "deixe em cima, como tava antes");
     o título da home é centralizado e não chega até ele. No celular (até 700px) ele some. */
  .hero:has(.hero__badge) { display: flex; flex-direction: column; }
  .hero .hero__in { order: 1; }
  .hero--page .hero__badge { position: relative; order: 2; top: auto; bottom: auto; right: auto; translate: none; align-self: flex-end; width: clamp(96px, 16vw, 130px); margin: 28px var(--gutter) 0 0; }
}
@media (max-width: 760px) {
  /* frase + botão (About, antes do portfólio): um embaixo do outro */
  .head--row { grid-template-columns: 1fr; justify-items: start; }
  .btn { max-width: 100%; text-align: center; }
}

/* ───────── menos movimento ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-reveal], .js [data-reveal="img"], .js .portrait[data-reveal="img"] { opacity: 1; transform: none; clip-path: none; }
  .js [data-reveal="img"] img { scale: none; }
  .logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .quotes { scroll-behavior: auto; }
  .badge, .badge__ring { rotate: none; animation: none; }
}

/* ───────── home: carimbos de passaporte na seção roxa ───────── */
.guide__left { display: grid; gap: clamp(16px, 2.2vw, 28px); align-content: start; }
/* carimbos da Julia (SVG) batidos um por cima do outro, como num passaporte: cada um desce grande e
   girado, bate no papel (amassa um pouco e volta) e o grupo todo dá um tranco a cada batida */
.guide__stamps { position: relative; width: min(100%, 400px); aspect-ratio: 460 / 275; }
.js .guide__stamps[data-reveal] { opacity: 1; transform: none; }
.guide__stamps img { position: absolute; height: auto; rotate: var(--r); }
.js .guide__stamps img { opacity: 0; }
.guide__stamps img:nth-child(1) { width: 36%; left: 0; top: 4%; --r: -10deg; --t: .2s; }
.guide__stamps img:nth-child(2) { width: 44%; left: 24%; top: 22%; --r: 8deg; --t: .65s; }
.guide__stamps img:nth-child(3) { width: 44%; left: 55%; top: 0; --r: -6deg; --t: 1.1s; }
.js .guide__stamps.is-in img { animation: stamp .6s var(--t) both; }
/* as batidas caem em .2 + .33, .65 + .33 e 1.1 + .33 s (55% de .6 s) */
.js .guide__stamps.is-in { animation: stamp-thump 1.7s both; }
@keyframes stamp {
  0% { opacity: 0; scale: 2.3; rotate: calc(var(--r) - 16deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  55% { opacity: 1; scale: .9; rotate: var(--r); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  78% { scale: 1.03; }
  100% { opacity: 1; scale: 1; rotate: var(--r); }
}
@keyframes stamp-thump {
  0%, 31%, 35%, 57.5%, 61.5%, 84%, 88%, 100% { translate: 0 0; }
  32.5%, 59%, 85.5% { translate: 0 3px; }
}
/* no celular os carimbos vêm depois do texto, não entre o título e o texto; o pé do cartão desconta o
   respiro que já sobra dentro do grupo de carimbos, para o espaço embaixo ficar igual ao de cima */
@media (max-width: 860px) { .guide__left { display: contents; } .guide__stamps { order: 1; width: min(100%, 360px); } .guide { padding-bottom: max(40px, calc(var(--section) * 0.45)); } }