/* TRIAL · protótipos do portfólio
   Tokens do Design System TRIAL + o "caminho próprio" pedido pelo Jonathan:
   cantos levemente arredondados, linhas finas nos cards, nada de bordas grossas pretas.
   Layout responsivo e animações ficam aqui; cores e textos ficam no próprio desenho. */

:root {
  /* paleta do DS */
  --green: #1fad39;
  --green-mid: #22ba3e;
  --green-light: #24c742;
  --teal: #24c7aa;
  --blue: #338ff8;
  --orange: #ff4a0b;
  --amber: #ffa60b;
  --gray-ink: #333333;
  --gray: #555555;
  --gray-200: #e5e5e5;
  --gray-100: #f2f2f2;
  --white: #ffffff;
  --crimson: #a3002d;

  /* papéis (claro) */
  --surface: #ffffff;
  --surface-alt: #f2f2f2;
  --surface-raise: #ffffff;
  --surface-inverse: #333333;
  --ink: #333333;
  --ink-muted: #555555;
  --border: #e5e5e5;
  --brand: #1fad39;
  --on-brand: #ffffff;
  --alert: #a3002d;
  --chip: #f2f2f2;
  --phone: #333333;

  /* tipografia */
  --font-display: "Hammersmith One", system-ui, sans-serif;
  --font-subtitle: K2D, system-ui, sans-serif;
  --font-body: Catamaran, system-ui, sans-serif;

  /* medidas do DS */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --line-min: 4px;

  /* caminho próprio: mais macio que o DS */
  --r-btn: 10px;
  --r-chip: 8px;
  --r-card: 20px;

  /* motion do DS */
  --motion-instant: 100ms;
  --motion-quick: 200ms;
  --motion-base: 300ms;
  --motion-intro: 1000ms;
  --motion-hold: 100ms;
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sunrise: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-nascente: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-shift: 8px;
}

/* tema escuro: grafite (o DS não usa preto) */
.t-escuro {
  --surface: #333333;
  --surface-alt: #3d3d3d;
  --surface-raise: #3d3d3d;
  --surface-inverse: #2b2b2b;
  --ink: #ffffff;
  --ink-muted: #e5e5e5;
  --border: #555555;
  --brand: #24c742;
  --on-brand: #333333;
  --chip: #474747;
  --phone: #1f1f1f;
}

/* campo verde: tudo branco por cima */
.on-green {
  --ink: #ffffff;
  --ink-muted: #ffffff;
  --border: rgba(255, 255, 255, .45);
}

body { margin: 0; }
.pg { font-family: var(--font-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg img { max-width: 100%; }
.pg h1, .pg h2, .pg h3, .pg h4, .pg p { margin: 0; }
.pg h1, .pg h2, .pg h3 { text-wrap: balance; }
.pg p { text-wrap: pretty; }

/* destaque de palavra: no claro é sublinhado verde grosso; no escuro vira texto verde */
.hl { text-decoration-line: underline; text-decoration-color: var(--green-light); text-decoration-thickness: .13em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.t-escuro .hl { text-decoration: none; color: var(--green-light); }
.on-green .hl { text-decoration-color: var(--white); color: inherit; }

/* container */
.wrap { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 720px) { .wrap { padding-left: 20px; padding-right: 20px; } }

/* colapsos responsivos (o desenho do desktop fica no style; aqui só o celular) */
@media (max-width: 1100px) {
  .md-1 { grid-template-columns: minmax(0, 1fr) !important; }
  .md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md-hide { display: none !important; }
  .md-col { flex-direction: column !important; align-items: stretch !important; }
  .md-span { grid-column: auto !important; grid-row: auto !important; }
  .md-static { position: relative !important; inset: auto !important; transform: none !important; }
  .md-center { text-align: center !important; justify-content: center !important; align-items: center !important; }
  .md-bt { border-left: 0 !important; border-top: 1px solid var(--border) !important; }
  .md-wrap { flex-wrap: wrap !important; }
  .md-show { display: flex !important; }
  .row4 { grid-template-columns: minmax(0, 1fr) 40px !important; padding-top: 26px !important; padding-bottom: 26px !important; }
}
.md-show { display: none; }
@media (max-width: 720px) {
  .sm-1 { grid-template-columns: minmax(0, 1fr) !important; }
  .sm-hide { display: none !important; }
  .sm-show { display: flex !important; }
  .sm-col { flex-direction: column !important; align-items: stretch !important; }
  .sm-wrap { flex-wrap: wrap !important; }
  .sm-left { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
  .sm-full { width: 100% !important; justify-content: center !important; }
  .sm-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sm-gap { gap: 20px !important; }
  .sm-static { position: relative !important; inset: auto !important; transform: none !important; }
  .sm-min { min-height: 0 !important; }
  .sm-scale { transform: scale(.86); transform-origin: 0 0; }
  .sm-nostep { margin-top: 0 !important; }
}
.sm-show { display: none; }

/* botões: o desenho fica no style, aqui só os estados */
.b { transition: background-color var(--motion-instant) var(--ease-rise), color var(--motion-instant) var(--ease-rise), border-color var(--motion-instant) var(--ease-rise); cursor: pointer; }
.b:focus-visible, .lk:focus-visible, .tab:focus-visible, .pg button:focus-visible, .pg a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.b-pri:hover { background: var(--green-mid) !important; }
.t-escuro .b-pri:hover { background: #3ad457 !important; }
.b-sec:hover { background: var(--gray-200) !important; }
.t-escuro .b-sec:hover { background: #555555 !important; }
.b-white:hover { background: var(--gray-100) !important; }
.b-ghost:hover { background: rgba(255, 255, 255, .14) !important; }
.lk { transition: text-decoration-color var(--motion-instant) var(--ease-rise), color var(--motion-instant) var(--ease-rise); }
.lk:hover { text-decoration-color: var(--green-light) !important; }
.nav-a { transition: color var(--motion-instant) var(--ease-rise); text-decoration: none; }
.nav-a:hover { text-decoration: underline; text-decoration-color: var(--green-light); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.card-h { transition: border-color var(--motion-base) var(--ease-rise), background-color var(--motion-base) var(--ease-rise); }
.card-h:hover { border-color: var(--green-light) !important; }
.row-h { transition: background-color var(--motion-base) var(--ease-rise), color var(--motion-base) var(--ease-rise); }
.row-h:hover { background: var(--surface-alt) !important; }
.arrow-go { transition: transform var(--motion-base) var(--ease-rise); }
.card-h:hover .arrow-go, .row-h:hover .arrow-go, .b:hover .arrow-go { transform: translate(3px, -3px); }

/* entradas: sobem da diagonal de baixo para cima e para a direita */
@keyframes trl-rise-in { from { opacity: 0; transform: translate(calc(-1 * var(--shift, 8px)), var(--shift, 8px)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes trl-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--shift, 8px), calc(-1 * var(--shift, 8px))); } }
@keyframes trl-fade { from { opacity: 0; } to { opacity: 1; } }
.rise { transform-origin: 0 100%; animation: trl-rise-in var(--dur, 600ms) var(--ease-rise) both; animation-delay: var(--d, 0ms); }
.rise-l { --shift: 18px; }

/* objetos flutuantes: derivam para cima e para a direita e somem, sem nunca voltar para baixo */
@keyframes trl-drift { 0% { opacity: 0; transform: translate(-14px, 14px) rotate(var(--rot, 45deg)); } 14% { opacity: var(--op, 1); } 86% { opacity: var(--op, 1); } 100% { opacity: 0; transform: translate(14px, -14px) rotate(var(--rot, 45deg)); } }
.drift { animation: trl-drift var(--dur, 9s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes trl-drift-plain { 0% { opacity: 0; transform: translate(-10px, 10px); } 14% { opacity: var(--op, 1); } 86% { opacity: var(--op, 1); } 100% { opacity: 0; transform: translate(10px, -10px); } }
.drift-plain { animation: trl-drift-plain var(--dur, 9s) linear infinite; animation-delay: var(--d, 0s); }

/* avisos que entram, ficam e saem para cima e para a direita */
@keyframes trl-toast { 0% { opacity: 0; transform: translate(-10px, 10px) scale(.97); } 10% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(10px, -10px); } }
.toast { transform-origin: 0 100%; animation: trl-toast var(--dur, 6s) var(--ease-rise) infinite; animation-delay: var(--d, 0s); }

/* faixa que corre para a direita (nunca para a esquerda) */
@keyframes trl-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee-track { display: flex; width: max-content; animation: trl-marquee var(--dur, 38s) linear infinite; }

/* barras do funil crescendo da esquerda para a direita */
@keyframes trl-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.grow-x { transform-origin: 0 50%; animation: trl-grow-x 900ms var(--ease-rise) both; animation-delay: var(--d, 0ms); }

/* ponto "ao vivo" */
@keyframes trl-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live { animation: trl-live 1.6s ease-in-out infinite; }

/* digitação do cursor */
@keyframes trl-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.caret { animation: trl-caret 1s steps(1) infinite; }

/* degraus que sobem um de cada vez */
@keyframes trl-step { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.step-up { transform-origin: 0 100%; animation: trl-step 500ms var(--ease-rise) both; animation-delay: var(--d, 0ms); }

/* faixa verde inclinada que entra da esquerda no hover */
.skew-fill { position: relative; overflow: hidden; }
.skew-fill::before { content: ""; position: absolute; inset: 0 -40px 0 -40px; background: var(--green); transform: skewX(-18deg) translateX(-105%); transition: transform 420ms var(--ease-rise); z-index: 0; }
.skew-fill:hover::before { transform: skewX(-18deg) translateX(0); }
.skew-fill > * { position: relative; z-index: 1; }
.skew-fill:hover .sf-ink { color: var(--white) !important; }
.skew-fill:hover .sf-muted { color: var(--white) !important; }

/* carrossel */
.track { transition: transform 600ms var(--ease-rise); }
.rail { scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* revelação por cima ao passar o mouse (cards de projeto) */
.reveal-up .reveal-panel { transform: translateY(101%); transition: transform 420ms var(--ease-rise); }
.reveal-up:hover .reveal-panel, .reveal-up:focus-within .reveal-panel { transform: none; }

/* entrada ao rolar (só CSS): sobe da diagonal quando o bloco entra na tela; sem suporte, aparece direto */
@supports (animation-timeline: view()) {
  .rv { --shift: 14px; animation: trl-rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

/* losangos que surgem crescendo do canto de baixo (opção A) e "respiram" para cima e para a direita */
@keyframes trl-pop { from { opacity: 0; transform: translate(-16px, 16px) scale(.55); } to { opacity: 1; transform: none; } }
.pop { animation: trl-pop 900ms var(--ease-rise) both; animation-delay: var(--d, 0ms); }
@keyframes trl-breathe { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -12px); } }
.breathe { animation: trl-breathe var(--dur, 7s) ease-in-out infinite; animation-delay: var(--d, 0s); }

/* fechamento: conteúdo espera a nascente e depois sobe */
.cta-wait { opacity: 0; }
.cta-go { animation: trl-rise-in 800ms var(--ease-rise) both; animation-delay: var(--d, 900ms); --shift: 12px; }

/* palavras que trocam subindo (entram por baixo, saem para cima e para a direita) */
@keyframes trl-word { 0% { opacity: 0; transform: translateY(60%); } 8% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 38% { opacity: 0; transform: translate(6%, -60%); } 100% { opacity: 0; transform: translate(6%, -60%); } }
.word { animation: trl-word var(--dur, 9s) var(--ease-rise) infinite; animation-delay: var(--d, 0s); }
/* quatro itens que se revezam no mesmo lugar (cada um fica 1/4 do ciclo): entram por baixo, saem para cima e para a direita */
@keyframes trl-word4 { 0% { opacity: 0; transform: translateY(45%); } 4% { opacity: 1; transform: none; } 21% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translate(3%, -45%); } 100% { opacity: 0; transform: translate(3%, -45%); } }
.word4 { grid-area: 1 / 1; animation: trl-word4 var(--dur, 12s) var(--ease-rise) infinite both; animation-delay: var(--d, 0s); }
@keyframes trl-tick4 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
.tick4 { opacity: 0; animation: trl-tick4 var(--dur, 12s) linear infinite; animation-delay: var(--d, 0s); }
.no-motion .tick4 { animation: none !important; opacity: 0; }
.no-motion .tick4.w-first { opacity: 1; }
.no-motion .word4 { animation: none !important; opacity: 0; }
.no-motion .word4.w-first { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .word4 { animation: none !important; opacity: 0; } .word4.w-first { opacity: 1; } }

/* nova linha do painel: duas animações iguais com nomes diferentes para reiniciar a cada aviso */
@keyframes trl-feed-a { from { opacity: 0; transform: translate(-10px, 10px); } to { opacity: 1; transform: none; } }
@keyframes trl-feed-b { from { opacity: 0; transform: translate(-10px, 10px); } to { opacity: 1; transform: none; } }
.feed-a { animation: trl-feed-a 520ms var(--ease-rise) both; }
.feed-b { animation: trl-feed-b 520ms var(--ease-rise) both; }
.panel-in-a { animation: trl-feed-a 420ms var(--ease-rise) both; }
.panel-in-b { animation: trl-feed-b 420ms var(--ease-rise) both; }
.no-motion .feed-a, .no-motion .feed-b, .no-motion .panel-in-a, .no-motion .panel-in-b { animation: none !important; }

/* abas e itens selecionáveis */
.tab { transition: background-color var(--motion-base) var(--ease-rise), color var(--motion-base) var(--ease-rise), border-color var(--motion-base) var(--ease-rise); cursor: pointer; }
.tab:hover { border-color: var(--green-light) !important; }

/* celular fixo da opção D
   d-static: prancheta parada no canvas (sem rolagem) = lista compacta e o celular troca sozinho
   d-scroll: página rolando de verdade = celular fixo e um capítulo por tela */
.sticky-col { position: sticky; top: 96px; }
.d-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.d-phone { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.d-static .d-phone { align-self: center; }
.d-scroll .d-phone { position: sticky; top: 104px; }
.d-ch { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 0; transition: opacity 420ms var(--ease-rise); }
.d-scroll .d-ch { min-height: 560px; }
.d-scroll .d-ch.is-off { opacity: .38; }
.d-phone-box { width: 340px; max-width: 100%; }
.d-scroll .d-text { padding-bottom: 200px; }
@media (min-width: 1101px) and (max-height: 920px) {
  .d-scroll .d-phone { top: 88px; }
  .d-scroll .d-phone-box { width: 286px; height: 590px; }
  .d-scroll .d-phone-scale { width: 340px; transform: scale(.84); transform-origin: 0 0; }
}
@media (max-width: 1100px) {
  .d-story { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .d-static .d-phone { align-self: auto; }
  .d-scroll .d-phone, .d-scroll .d-text { grid-area: 1 / 1; }
  .d-scroll .d-phone { top: 88px; z-index: 0; }
  .d-scroll .d-text { position: relative; z-index: 1; padding-top: 800px; }
  .d-scroll .d-ch { min-height: 640px; justify-content: flex-end; padding: 0 0 48px; }
  .d-scroll .d-ch.is-off { opacity: 1; }
  .d-scroll .d-card { padding: 22px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .d-phone-box { width: 266px; height: 548px; }
  .d-phone-scale { width: 340px; transform: scale(.78); transform-origin: 0 0; }
  .d-scroll .d-text { padding-top: 640px; }
}

/* ---------- opção A (portfólio gerado): menta, sombras suaves e destaque em texto verde ---------- */
.pa { --mint: #eefaf0; --mint-2: #dff5e3; --line: #e5e5e5; --card: #ffffff;
  --shadow-soft: 0 1px 2px rgba(51, 51, 51, .05), 0 22px 44px -26px rgba(51, 51, 51, .32);
  --shadow-device: 0 2px 6px rgba(51, 51, 51, .08), 0 30px 60px -28px rgba(51, 51, 51, .45);
  --shadow-float: 0 2px 4px rgba(51, 51, 51, .08), 0 18px 34px -16px rgba(51, 51, 51, .42);
  --shadow-green: 0 14px 28px -16px rgba(31, 173, 57, .7); }
.pa.t-escuro { --mint: #3a3a3a; --mint-2: #2e4733; --line: #4a4a4a; --card: #3d3d3d;
  --shadow-soft: 0 22px 44px -26px rgba(0, 0, 0, .55); --shadow-device: 0 30px 60px -28px rgba(0, 0, 0, .7); --shadow-float: 0 18px 34px -16px rgba(0, 0, 0, .6); }
.pa { --glass: rgba(255, 255, 255, .88); --footer: #333333; }
.pa.t-escuro { --glass: rgba(51, 51, 51, .9); --footer: #2a2a2a; }
.pa.sem-sombra { --shadow-soft: none; --shadow-device: none; --shadow-float: none; --shadow-green: none; }
@media (max-width: 720px) {
  .pad-band { padding-top: 92px !important; padding-bottom: 72px !important; }
  .pad-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pad-hero { padding-top: 28px !important; padding-bottom: 64px !important; }
  .pad-cta { padding-top: 96px !important; padding-bottom: 72px !important; }
  .sm-order0 { order: 0 !important; }
  .sm-h1 { font-size: 9.6vw !important; }
  .sm-h2 { font-size: 36px !important; }
  .sm-mb36 { margin-bottom: 36px !important; }
  .sm-gap72 { gap: 72px !important; }
  .sm-mt72 { margin-top: 72px !important; }
  .sm-p22 { padding: 24px 22px 26px !important; }
  .drag-me { touch-action: auto; cursor: default; }
}
.sh-soft { box-shadow: var(--shadow-soft); }
.sh-device { box-shadow: var(--shadow-device); }
.sh-float { box-shadow: var(--shadow-float); }
.sh-green { box-shadow: var(--shadow-green); }
.hov-shadow { transition: box-shadow 300ms ease; }
.hov-shadow:hover { box-shadow: var(--shadow-soft); }
.hl-green { color: var(--green); }
.t-escuro .hl-green { color: var(--green-light); }
.band-tilt { clip-path: polygon(0 72px, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 720px) { .band-tilt { clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); } }
.ul-link { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 2px; }
.ul-nav { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px; transition: background-size 300ms var(--ease-rise), color 150ms ease; }
.ul-nav:hover { background-size: 100% 2px; color: var(--ink) !important; }
.opt-h { transition: background-color 150ms ease, border-color 150ms ease; }
.opt-h:hover { background: var(--mint) !important; border-color: #cfe9d4 !important; }
.t-escuro .opt-h:hover { border-color: var(--green) !important; }
.inp:focus { outline: none; border-color: var(--green) !important; box-shadow: 0 0 0 4px rgba(36, 199, 66, .18); }
.cmp-range { -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; margin: 0; }
.cmp-range::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; }
.cmp-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
.cmp-range:focus-visible { outline: 3px solid #8cff7a; outline-offset: -3px; }
.drag-me { cursor: grab; touch-action: none; }
.drag-me:active { cursor: grabbing; }

/* sem movimento: preferência do sistema ou ajuste "Animações: desligadas" (tudo aparece no lugar final) */
.no-motion .rv, .no-motion .pop, .no-motion .cta-go { animation: trl-fade 1ms both !important; }
.no-motion .cta-wait { opacity: 1 !important; }
.no-motion .breathe { animation: none !important; }
.no-motion .word { animation: none !important; opacity: 0; }
.no-motion .word.word-first { opacity: 1; }
.drift { transform: rotate(var(--rot, 45deg)); opacity: var(--op, 1); }
.no-motion .rise, .no-motion .grow-x, .no-motion .step-up { animation: trl-fade 1ms both !important; }
.no-motion .drift, .no-motion .drift-plain, .no-motion .toast, .no-motion .marquee-track, .no-motion .live, .no-motion .caret { animation: none !important; }
.no-motion .track, .no-motion .reveal-up .reveal-panel, .no-motion .skew-fill::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rise, .grow-x, .step-up, .rv, .pop, .cta-go { animation: trl-fade 1ms both !important; }
  .cta-wait { opacity: 1 !important; }
  .drift, .drift-plain, .toast, .marquee-track, .live, .caret, .breathe { animation: none !important; }
  .word { animation: none !important; opacity: 0; }
  .word.word-first { opacity: 1; }
  .track, .reveal-up .reveal-panel, .skew-fill::before { transition: none !important; }
}

/* ---------- linha 2020 (redesign do site, Drive) ---------- */
.l20-tabwrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 6; line-height: 0; }
.l20-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 4px; }
.l20-item { display: flex; align-items: center; gap: 12px; font-family: var(--font-subtitle); font-weight: 600; font-size: 16px; line-height: 1.3; }
.l20-item img { width: 40px; height: auto; flex: none; }
.l20-steps { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 12px 20px 10px; }
.l20-steps > .l20-frame { position: absolute; inset: 0; border: 2px solid var(--border); transform: skewX(-12deg); border-radius: 4px; pointer-events: none; }
.l20-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; text-align: center; font-family: var(--font-subtitle); font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.l20-tri { width: 26px; height: 22px; background: var(--c, var(--green-light)); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 6px; transform: rotate(-12deg); }
.l20-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 18px 18px 16px; border: 1.5px solid var(--teal); border-radius: 6px; transition: transform 300ms var(--ease-rise), border-color 300ms var(--ease-rise); }
.l20-card:hover { transform: translate(3px, -3px); border-color: var(--green-light); }
.l20-skew { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; background: var(--green); color: #ffffff; font-family: var(--font-subtitle); font-weight: 700; font-size: 17px; text-decoration: none; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background-color 120ms; }
.l20-skew:hover { background: var(--green-mid); }
.l20-band { position: relative; padding: 120px 0 120px; }
.l20-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--green); clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 70px), 0 100%); }
.l20-band::after { content: ""; position: absolute; left: 0; width: 46%; top: 44px; height: 8px; background: var(--gray-ink); transform: skewY(-2.3deg); transform-origin: 0 0; border-radius: 0 4px 4px 0; }
.l20-band > * { position: relative; z-index: 1; }
.l20-cta { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 10px; background: #ffffff; color: #333333; text-decoration: none; border-left: 6px solid var(--amber); transition: transform 300ms var(--ease-rise); }
.l20-cta:hover { transform: translate(3px, -3px); }
.l20-cta:hover .arrow-go { transform: translate(3px, -3px); }
@keyframes l20-pill { from { opacity: 0; transform: translate(-10px, 14px) scale(.96); } to { opacity: 1; transform: none; } }
.l20-pill { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 12px; background: #ffffff; color: #333333; border: 1px solid #e5e5e5; font-family: var(--font-subtitle); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; animation: l20-pill 380ms var(--ease-rise) both; animation-delay: var(--d, 0ms); }
.l20-pill:hover { border-color: var(--green-light); }
.l20-pill i { width: 14px; height: 14px; border-radius: 50%; background: var(--green); flex: none; }
@keyframes l20-menu { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.l20-menu { animation: l20-menu 420ms var(--ease-rise) both; }
.no-motion .l20-pill, .no-motion .l20-menu { animation: none !important; }
@media (max-width: 1100px) {
  .l20-steps { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .l20-step { min-width: 60px; font-size: 11.5px; }
  .l20-band { padding: 96px 0 104px; }
  .l20-band::before { clip-path: polygon(0 34px, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .l20-band::after { top: 24px; width: 60%; height: 6px; transform: skewY(-3.5deg); }
}
@media (max-width: 1100px) { .md-left { text-align: left !important; padding-right: 0 !important; } .md-left .l20-steps { display: flex !important; } }
@media (max-width: 720px) { .sm-pad0 { padding-left: 0 !important; padding-right: 0 !important; } }
@media (max-width: 720px) { .sm-pad0 > [aria-hidden], .md-left > [aria-hidden] { display: none; } }

/* ---------- menu do losango (branch redesign do repositório, 2020) ----------
   O T fica num losango pendurado no topo. Um indicador chama o clique.
   No clique o losango cresce até cobrir a tela e o menu aparece por cima.
   Medidas tiradas do código: 17% da menor medida da tela (mín. 120 px),
   0,7 s com cubic-bezier(.63,.15,.38,.9), indicador a cada 2 s. */
.lz { --lz: clamp(120px, 17vmin, 168px); --lz-c: var(--green); --lz-t: 700ms; --lz-ease: cubic-bezier(.63, .15, .38, .9); --lz-r: calc(50vw + 100vh + 60px); }
.lz-fill { position: fixed; inset: 0; z-index: 58; background: var(--lz-c); pointer-events: none;
  clip-path: polygon(50% calc(var(--lz) * -.62), calc(50% + var(--lz) * .62) 0, 50% calc(var(--lz) * .62), calc(50% - var(--lz) * .62) 0);
  transition: clip-path var(--lz-t) var(--lz-ease), background-color 300ms var(--ease-rise); }
.lz.is-open .lz-fill { pointer-events: auto; clip-path: polygon(50% calc(var(--lz-r) * -1), calc(50% + var(--lz-r)) 0, 50% var(--lz-r), calc(50% - var(--lz-r)) 0); }

.lz-btn { position: fixed; left: 50%; top: 0; z-index: 62; width: calc(var(--lz) * 1.4142); height: calc(var(--lz) * .7071); margin-left: calc(var(--lz) * -.7071); padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: visible; }
.pg .lz-btn:focus-visible { outline: none; }
.lz-btn:focus-visible .lz-dia { box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px var(--gray-ink); }
.lz-dia { position: absolute; left: 50%; top: 0; width: var(--lz); height: var(--lz); margin: calc(var(--lz) * -.5) 0 0 calc(var(--lz) * -.5); border-radius: 0 0 12% 0; background: var(--lz-c); transform: rotate(45deg); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); transition: transform 300ms var(--ease-rise), box-shadow 200ms var(--ease-rise), background-color 300ms var(--ease-rise); }
.lz-btn:hover .lz-dia { transform: rotate(45deg) scale(1.06); }
.lz.is-open .lz-dia { box-shadow: none; transform: rotate(45deg); }
.lz-t { position: absolute; left: 50%; top: calc(var(--lz) * .1); width: calc(var(--lz) * .3); height: auto; transform: translateX(-50%); transition: transform var(--lz-t) var(--lz-ease); pointer-events: none; }
.lz.is-open .lz-t { transform: translate(-50%, 20%) scale(1.1); }

/* indicadores */
.lz-ind { position: absolute; left: 50%; width: 24px; height: 14px; pointer-events: none; opacity: 0; }
.lz-ring { position: absolute; left: 50%; top: 0; width: var(--lz); height: var(--lz); margin: calc(var(--lz) * -.5) 0 0 calc(var(--lz) * -.5); border-radius: 0 0 12% 0; border: 2px solid var(--lz-c); transform: rotate(45deg); opacity: 0; pointer-events: none; }
@keyframes lz-ind-2020 { 0% { opacity: 0; transform: translate(-50%, 0) scale(1); filter: blur(0); } 5% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } 100% { opacity: 0; transform: translate(-50%, 20px) scale(1.5); filter: blur(5px); } }
@keyframes lz-ind-fora { 0%, 100% { opacity: .9; transform: translate(-50%, 0); } 50% { opacity: .35; transform: translate(-50%, 8px); } }
@keyframes lz-ring { 0% { opacity: .8; transform: rotate(45deg) scale(1); } 100% { opacity: 0; transform: rotate(45deg) scale(1.4); } }
.lz-ind-2020 .lz-ind { top: calc(var(--lz) * .7071 - 30px); color: #ffffff; animation: lz-ind-2020 2s 1s infinite ease-in-out both; }
.lz-ind-fora .lz-ind { top: calc(var(--lz) * .7071 + 10px); color: var(--ink); animation: lz-ind-fora 2s 1s infinite ease-in-out both; }
.lz-ind-pulso .lz-ring { animation: lz-ring 2.4s 1s infinite var(--ease-rise) both; }
.lz.is-open .lz-ind, .lz.is-open .lz-ring { animation: none; opacity: 0; }

/* rótulo "fechar" quando aberto */
.lz-close { position: absolute; left: 50%; top: calc(var(--lz) * .7071 + 14px); transform: translate(-50%, -6px); display: inline-flex; align-items: center; gap: 6px; color: #ffffff; font-family: var(--font-subtitle); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 200ms, transform 300ms var(--ease-rise); pointer-events: none; }
.lz.is-open .lz-btn { height: calc(var(--lz) * .7071 + 44px); }
.lz.is-open .lz-close { opacity: 1; transform: translate(-50%, 0); transition-delay: calc(var(--lz-t) * .8); }

/* o menu */
.lz-menu { position: fixed; inset: 0; z-index: 60; overflow: auto; display: flex; flex-direction: column; color: #ffffff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms, visibility 0s 180ms; }
.lz.is-open .lz-menu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms calc(var(--lz-t) * .45), visibility 0s 0s; }
.lz-col { width: 100%; max-width: 820px; margin: 0 auto; padding: calc(var(--lz) * .7071 + 84px) 32px 48px; box-sizing: border-box; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.lz-mini { display: none; }
.lz-i { opacity: 0; transform: translateY(18px); transition: opacity 150ms, transform 150ms; }
.lz.is-open .lz-i { opacity: 1; transform: none; transition: opacity 400ms calc(var(--lz-t) * .55 + var(--i, 0) * 70ms) var(--ease-rise), transform 600ms calc(var(--lz-t) * .55 + var(--i, 0) * 70ms) var(--ease-rise); }
.lz-kick { margin: 0 0 14px; padding-left: 22px; font-family: var(--font-subtitle); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.lz.is-open .lz-kick { opacity: .85; }
.lz-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 60px minmax(0, 1fr) 28px; align-items: center; gap: 20px; padding: 14px 22px; margin-bottom: 6px; color: #ffffff; text-decoration: none; transition: color 250ms var(--ease-rise); }
.lz-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: #ffffff; transform: skewX(-10deg) scaleX(0); transform-origin: 0 50%; transition: transform 350ms var(--ease-rise); }
.lz-row:hover, .pg .lz-row:focus-visible { color: var(--gray-ink); outline: none; }
.lz-row:hover::before, .lz-row:focus-visible::before { transform: skewX(-10deg) scaleX(1); }
.lz-row img { width: 60px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); transition: filter 250ms var(--ease-rise); }
.lz-row:hover img, .lz-row:focus-visible img { filter: none; }
.lz-row b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.08; }
.lz-row small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 16px; line-height: 1.4; opacity: .9; }
.lz-row svg { width: 26px; height: 26px; transition: transform 300ms var(--ease-rise); }
.lz-row:hover svg { transform: translate(4px, -4px); }
.lz-sep { height: 1px; margin: 18px 22px 20px; background: rgba(255, 255, 255, .45); }
.lz-sub { display: flex; flex-wrap: wrap; gap: 8px 34px; padding: 0 22px; }
.lz-sub a { color: #ffffff; font-family: var(--font-subtitle); font-weight: 700; font-size: 22px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 2px; transition: text-decoration-color 200ms; }
.lz-sub a:hover, .pg .lz-sub a:focus-visible { text-decoration-color: #ffffff; outline: none; }
.lz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; padding: 22px 32px 28px; border-top: 1px solid rgba(255, 255, 255, .3); transform: translateY(100%); transition: transform 200ms; }
.lz.is-open .lz-foot { transform: none; transition: transform 600ms calc(var(--lz-t) * .75) var(--ease-rise); }
.lz-foot a { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-family: var(--font-subtitle); font-weight: 700; font-size: 17px; text-decoration: none; }
.lz-foot a svg { width: 22px; height: 22px; flex: none; }
.lz-foot .lz-cta { padding: 12px 20px; border-radius: 10px; background: #ffffff; color: var(--gray-ink); transition: transform 300ms var(--ease-rise); }
.lz-foot .lz-cta:hover { transform: translate(2px, -2px); }
.no-motion .lz *, .no-motion .lz-fill { transition: none !important; animation: none !important; }
.no-motion .lz-ind-2020 .lz-ind, .no-motion .lz-ind-fora .lz-ind { opacity: 1; }
@media (max-width: 700px) {
  .lz-col { padding: calc(var(--lz) * .7071 + 64px) 14px 24px; justify-content: flex-start; }
  .lz-mini { display: inline-flex; }
  .lz-kick { padding-left: 14px; font-size: 12px; }
  .lz-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 14px; margin-bottom: 2px; }
  .lz-row img { width: 44px; height: 38px; }
  .lz-row svg { display: none; }
  .lz-row b { font-size: 27px; }
  .lz-row small { font-size: 15px; }
  .lz-sep { margin: 12px 14px 14px; }
  .lz-sub { padding: 0 14px; gap: 6px 22px; }
  .lz-sub a { font-size: 19px; }
  .lz-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 18px 22px; }
  .lz-foot .lz-cta { justify-content: center; }
}

/* ---------- palco verde (o cartão de visita + o palco da abertura) ----------
   Fundo verde com as facetas do palco em tom sobre tom, as faixas da nascente paradas no canto
   inferior esquerdo (como no cartão de visita) e o sol branco atrás do T. Texto sempre branco. */
.pv { --pv-bg: #1fad39; --pv-b1: #1ca035; --pv-b2: #1c9732; --pv-b0: #22b43c; position: relative; isolation: isolate; background: var(--pv-bg); color: #ffffff; }
.pv--cartao { --pv-bg: #21a738; --pv-b1: #1e9b34; --pv-b2: #1e9231; --pv-b0: #23ae3b; }
.pv-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pv-facets { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; }
.pv-sun { position: absolute; inset: 0; background: radial-gradient(ellipse 42% 60% at var(--pv-sx, 26%) var(--pv-sy, 56%), rgba(255, 255, 255, .22), rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, 0) 72%); }
.pv-bands { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-bands .b0 { fill: var(--pv-b0); }
.pv-bands .b1 { fill: var(--pv-b1); }
.pv-bands .b2 { fill: var(--pv-b2); }
.pv-bands g { transform-box: view-box; }
.pv--no-facets .pv-facets, .pv--no-bands .pv-bands, .pv--no-sun .pv-sun { display: none; }
@keyframes pv-drift { from { transform: translate(-3%, 3%) scale(1.04); } to { transform: none; } }
@keyframes pv-sun { from { opacity: 0; transform: translate(-6%, 8%) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-band { from { transform: translate(-46%, 80%); } to { transform: none; } }
.pv--play .pv-facets { animation: pv-drift 3000ms var(--ease-rise) both; }
.pv--play .pv-sun { animation: pv-sun 2000ms var(--ease-rise) 850ms both; }
.pv--play .pv-bands { animation: pv-fade 300ms linear both; }
.pv--play.pv--rise .pv-bands { animation: none; }
.pv--play.pv--rise .pv-bands g { animation: pv-band 760ms cubic-bezier(.33, 1, .68, 1) both; animation-delay: var(--d, 0ms); }
/* ambiente: para telas que ficam paradas (entrar, carregar). Só o fundo respira, o T não entra em loop */
@keyframes pv-breathe { 0%, 100% { transform: none; } 50% { transform: translate(1.2%, -1.2%) scale(1.02); } }
@keyframes pv-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.pv--ambient .pv-facets { animation: pv-breathe 14s ease-in-out infinite; }
.pv--ambient .pv-sun { animation: pv-glow 7s ease-in-out infinite; }
/* o T no palco verde: branco, com halo branco (o verde não aparece no verde) */
.pv .trl-reveal__band, .pv .trl-reveal__fill { display: none !important; }
.pv .trl-reveal__halo { background: radial-gradient(closest-side, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, 0) 100%); }
@keyframes pv-tglow { from { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } to { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .45)); } }
.pv .trl-reveal--inverse .trl-reveal__glyph { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .45)); }
.pv .trl-reveal--play.trl-reveal--inverse .trl-reveal__glyph { animation-name: pv-tglow; }
/* texto e botões no palco verde */
.pv .hl { text-decoration-color: #ffffff; color: inherit; }
.pv .hl-txt { color: #ffffff; text-decoration: none; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 24px; border: 0; border-radius: 12px; background: #ffffff; color: #333333; font-family: var(--font-subtitle); font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; transition: transform 300ms var(--ease-rise), box-shadow 300ms var(--ease-rise); }
.pv-btn:hover { transform: translate(2px, -2px); }
.pv-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 24px; border: 2px solid #ffffff; border-radius: 12px; background: transparent; color: #ffffff; font-family: var(--font-subtitle); font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; transition: background-color 200ms; }
.pv-ghost:hover { background: rgba(255, 255, 255, .12); }
.pv .b:focus-visible, .pv a:focus-visible, .pv button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
/* degraus em losango do cartão: losangos brancos subindo para a direita, com o ícone dentro */
.pv-steps { display: flex; align-items: flex-end; gap: var(--pv-gap, 18px); }
.pv-step { position: relative; display: grid; justify-items: center; gap: 10px; margin-bottom: calc(var(--i, 0) * var(--pv-rise, 26px)); text-align: center; }
.pv-dia { position: relative; width: var(--pv-d, 84px); height: var(--pv-d, 84px); display: grid; place-items: center; }
.pv-dia::before { content: ""; position: absolute; inset: 14.6%; border-radius: 17%; background: #ffffff; transform: rotate(45deg); transition: transform 300ms var(--ease-rise); }
.pv-dia img { position: relative; width: 62%; height: 62%; object-fit: contain; }
.pv-step:hover .pv-dia::before { transform: rotate(45deg) scale(1.08); }
.pv-step b { font-family: var(--font-subtitle); font-weight: 700; font-size: 15px; line-height: 1.25; color: #ffffff; }
.no-motion .pv-facets, .no-motion .pv-sun, .no-motion .pv-bands, .no-motion .pv-bands g { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pv-facets, .pv-sun, .pv-bands g { animation: none !important; } }
/* replay sem remontar: a raiz alterna .rp-a / .rp-b e as animações trocam de nome, então recomeçam */
@keyframes trl-rise-in-b { from { opacity: 0; transform: translate(calc(-1 * var(--shift, 8px)), var(--shift, 8px)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pv-drift-b { from { transform: translate(-3%, 3%) scale(1.04); } to { transform: none; } }
@keyframes pv-sun-b { from { opacity: 0; transform: translate(-6%, 8%) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes pv-fade-b { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-band-b { from { transform: translate(-46%, 80%); } to { transform: none; } }
.rp-b .rise { animation-name: trl-rise-in-b; }
.rp-b.pv--play .pv-facets, .rp-b .pv--play .pv-facets { animation-name: pv-drift-b; }
.rp-b.pv--play .pv-sun, .rp-b .pv--play .pv-sun { animation-name: pv-sun-b; }
.rp-b.pv--play .pv-bands, .rp-b .pv--play .pv-bands { animation-name: pv-fade-b; }
.rp-b.pv--play.pv--rise .pv-bands g, .rp-b .pv--play.pv--rise .pv-bands g { animation-name: pv-band-b; }
.rp-b .pv-after { animation-name: pv-fade-b; }