/* ============================================================
   ILHA DIGITAL — Sistema de marca para ORÇAMENTOS
   Formato: apresentação em slides (1 tela = 1 slide, como um
   clicker de Keynote/PowerPoint), navegável por clique/teclado/
   swipe, com barra de progresso e botão de tela cheia — mesmo
   padrão já validado nos projetos "Apresentação Comercial" de
   outros clientes da Ilha (Odonto Special, Mega Elétron). Cada
   slide respeita o tamanho da tela (nunca cria scroll vertical);
   a exportação em PDF (Playwright ou impressão do navegador)
   empilha os slides em sequência, 1 slide = 1 página.

   Reaproveita os tokens de cor/fonte do projeto de Relatórios
   (preto+laranja, Bricolage Grotesque + IBM Plex Mono) e adiciona
   os componentes específicos de proposta comercial: capa, cartelas
   de plano/preço, quadros de serviço com ícone, etapas, encerramento.

   Não editar por orçamento — mudanças aqui afetam todas as
   propostas. Cada orçamento importa este arquivo e adiciona só
   o layout específico das suas próprias seções no styles.css
   local (ver .claude/skills/gerador-orcamento-ilha-digital/SKILL.md).
   ============================================================ */

/* ---------- Fontes locais ---------- */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('../fonts/BricolageGrotesque-Variable.ttf') format('truetype');
  font-weight:200 800;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Tokens (mesmos dos Relatórios) ---------- */
:root{
  --black:#000000;
  --white:#ffffff;
  --orange:#FA4616;
  --orange-deep:#C7360D;
  --cream:#F5DFA0;
  --gray-050:#DCE1E1;

  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.30);
  --muted: rgba(255,255,255,.52);
  --muted-2: rgba(255,255,255,.34);
  --ink-soft: rgba(255,255,255,.78);

  --font-display:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --container: 1320px;
  --gutter: clamp(18px, 5.5vw, 88px);
  --chrome-h: 72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
img{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }

html,body{ height:100%; }
html{
  background:var(--black);
  overflow:hidden;
}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-mono);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ============================================================
   MOTOR DO DECK (slide = 1 tela cheia, nunca cria scroll)
   ============================================================ */
.deck{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--black);
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  z-index:1;
  overflow:hidden;
}
.slide.active{ opacity:1; pointer-events:auto; z-index:3; }
.slide.prevslide{ z-index:2; }

.slide__inner{
  position:relative;
  z-index:2;
  height:100%;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:calc(var(--chrome-h) + 3.5vh) var(--gutter) 8vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* Rede de segurança: se o conteúdo for mais alto que o slide (texto
     grande, muitos itens), ROLA aqui dentro em vez de esconder — nunca
     no `.slide` (que precisa ficar com overflow:hidden pra recortar as
     formas decorativas .solar/.orbit-detail que sangram pra fora dele).
     `safe center` evita que o topo do conteúdo fique inacessível ao
     centralizar algo que já não cabe (com fallback pro `center` comum
     em navegadores sem suporte a safe/unsafe). */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@supports (justify-content: safe center){
  .slide__inner{ justify-content:safe center; }
}
.slide__inner.top{ justify-content:flex-start; padding-top:calc(var(--chrome-h) + 5vh); }

/* ---------- Cromagem fixa: logo + navegação (não é slide) ---------- */
.deck-chrome-top{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px var(--gutter) 30px;
  pointer-events:none;
  /* Sutil no desktop (slides nunca rolam, isso é só um leve esfumaçado);
     essencial no mobile, onde um slide muito alto pode rolar por baixo
     do cabeçalho fixo — sem isso o texto passaria por trás da logo. */
  background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 65%, transparent 100%);
}
.brandmark{ height:24px; width:auto; flex:0 0 auto; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.deck-chrome-top .pill{ pointer-events:auto; height:32px; padding:0 16px; font-size:11px; background:rgba(0,0,0,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
@media (max-width:620px){
  .deck-chrome-top .pill{ display:none; }
}

.deck-chrome-top__right{ display:flex; align-items:center; gap:10px; pointer-events:none; }
.deck-pdf-btn{
  pointer-events:auto;
  height:32px;
  padding:0 16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--white);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:border-color .2s, color .2s;
}
.deck-pdf-btn:hover{ border-color:var(--orange); color:var(--orange); }
.deck-pdf-btn svg{ width:13px; height:13px; }
/* Some do print automaticamente (o botão vira parte do .deck-chrome-top,
   já escondido em print). Sem regra extra aqui de propósito. */

.deck-progress{ position:fixed; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.09); z-index:90; }
.deck-progress__bar{ height:100%; width:0%; background:var(--orange); transition:width .5s cubic-bezier(.4,0,.2,1); }

.deck-nav{
  position:fixed;
  bottom:22px; left:0; right:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  pointer-events:none;
}
.deck-nav__btn{
  pointer-events:auto;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--white);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.deck-nav__btn:hover{ border-color:var(--orange); color:var(--orange); }
.deck-nav__btn svg{ width:15px; height:15px; }
.deck-nav__counter{
  pointer-events:none;
  font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.06em;
  min-width:56px;
  text-align:center;
}

.deck-click{ position:fixed; inset:0; z-index:40; cursor:pointer; }

/* ---------- Barra de progresso legada (compat, id ainda referenciado) ---------- */
.progress-bar{ height:100%; width:0%; background:var(--orange); transition:width .5s cubic-bezier(.4,0,.2,1); }

.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(18px, 2.6vh, 34px);
}

.pill{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 20px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pill--outline{ color:var(--orange); border-color:rgba(250,70,22,.55); }

.tag-mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Forma decorativa: sistema solar (receita-base) ---------- */
.solar{
  position:absolute;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 34% 30%, var(--cream) 0%, var(--orange) 40%, #4a1404 70%, #000 100%);
}
.orbit-detail{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.14;
  max-width:none;
}

/* ---------- Escala tipográfica genérica (fluida, calibrada pra caber em 1 tela) ---------- */
.display-xl{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.1rem, 1.5rem + 4vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.display-lg{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.7rem, 1.3rem + 2.6vw, 4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.display-md{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.4rem, 1.15rem + 1.5vw, 2.5rem);
  line-height:1.1;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}

.lede{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:clamp(1rem, .92rem + .6vw, 1.3rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:60ch;
}
.body-text{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:clamp(.95rem, .88rem + .35vw, 1.15rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:68ch;
}
.body-text + .body-text{ margin-top:.9em; }

/* ---------- Stat-strip (linha de indicadores) ---------- */
.stat-strip{
  display:flex;
  flex-wrap:wrap;
  row-gap:20px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:clamp(18px, 2.6vh, 34px);
}
.stat-strip li{
  flex:1 1 160px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:24px;
  margin-right:24px;
  border-right:1px solid var(--line);
}
.stat-strip li:last-child{ border-right:none; margin-right:0; padding-right:0; }
.stat-strip strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem, 1.1rem + 1.1vw, 2.2rem);
  letter-spacing:-.01em;
}
.stat-strip span{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Badge circular (identificador A/B/etc.) ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--orange);
  color:#170800;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  margin-bottom:12px;
}
.badge--muted{ background:rgba(255,255,255,.16); color:rgba(255,255,255,.72); }

/* ---------- Frase de destaque (com ênfase em laranja) ---------- */
.highlight{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.05rem, .92rem + .8vw, 1.4rem);
  line-height:1.35;
  color:var(--white);
  max-width:36ch;
}
.highlight strong{ color:var(--orange); font-weight:700; }

/* ---------- Nota lateral / observação secundária ---------- */
.aside-note{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
}
@media (min-width:760px){
  .aside-note{ text-align:right; }
}

/* ---------- Encerramento (foto + logo grande + tagline) ----------
   É um `.slide` normal (não um elemento à parte). Padrão fixo de
   marca — não é específico de cliente, não reescrever a foto/
   tagline por orçamento. Só o `.closing-meta` muda por cliente. */
.closing-hero{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow-y:auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.10) 26%, rgba(0,0,0,.20) 62%, rgba(0,0,0,.66) 100%),
    url('../images/encerramento-mar.jpg') center/cover no-repeat;
}
.closing-hero__contacts{
  position:absolute;
  top:calc(var(--chrome-h) + 1.5vh);
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px, 2.2vw, 30px);
  align-items:center;
  min-width:0;
}
.closing-hero__contact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:clamp(.72rem, .68rem + .18vw, .84rem);
  color:var(--white);
  white-space:nowrap;
}
.closing-hero__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  color:var(--white);
  flex:0 0 auto;
}
.closing-hero__icon svg{ width:13px; height:13px; }
.closing-hero__brand{ max-width:640px; min-width:0; margin-inline:auto; }
.closing-hero__logo{ height:clamp(38px, 5.5vh, 76px); width:auto; margin:0 auto clamp(12px, 2vh, 22px); }
.closing-hero__tagline{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem, 1.15rem + 3vh, 3rem);
  line-height:1.1;
  color:var(--white);
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.closing-meta{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px var(--gutter);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.35);
}

/* ---------- Animação de entrada ao ativar o slide ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.slide.active .reveal{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > *{
  transition-delay:calc(var(--reveal-i, 0) * 80ms);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   COMPONENTES ESPECÍFICOS DE ORÇAMENTO
   ============================================================ */

/* ---------- Linha fina em gradiente (acento de abertura) ---------- */
.gradient-rule{
  height:3px;
  width:100%;
  max-width:160px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--cream) 100%);
  margin-bottom:16px;
}

/* ---------- Fundos em degradê (grafismos da marca) ----------
   O manual de marca usa esferas grandes em degradê (creme→laranja→
   vermelho-escuro→preto) sangrando pela composição — não um preto
   chapado com só um acento pontual no canto. Aplique UMA destas
   classes em cada `.slide` (nunca mais de uma), alternando o canto/
   direção seção a seção para criar ritmo ao avançar os slides. */
.slide--glow-tr{
  background:
    radial-gradient(1200px circle at 92% -12%, rgba(250,70,22,.38) 0%, rgba(199,54,13,.16) 38%, transparent 66%),
    var(--black);
}
.slide--glow-br{
  background:
    radial-gradient(1100px circle at 100% 115%, rgba(250,70,22,.34) 0%, rgba(199,54,13,.14) 40%, transparent 68%),
    var(--black);
}
.slide--glow-bl{
  background:
    radial-gradient(1100px circle at -8% 112%, rgba(250,70,22,.32) 0%, rgba(199,54,13,.13) 40%, transparent 66%),
    var(--black);
}
.slide--glow-tl{
  background:
    radial-gradient(1000px circle at -6% -10%, rgba(250,70,22,.30) 0%, rgba(199,54,13,.12) 38%, transparent 64%),
    var(--black);
}
.slide--glow-center{
  background:
    radial-gradient(1300px circle at 50% 8%, rgba(250,70,22,.20) 0%, rgba(199,54,13,.09) 42%, transparent 68%),
    var(--black);
}
.slide--glow-soft{
  background:
    radial-gradient(1000px circle at 85% 0%, rgba(250,70,22,.16) 0%, transparent 62%),
    radial-gradient(900px circle at 0% 100%, rgba(199,54,13,.14) 0%, transparent 60%),
    var(--black);
}

/* ---------- Capa da proposta ---------- */
.cover-proposta .slide__inner{ justify-content:center; }

/* Formas decorativas padrão da capa (usadas por toda proposta gerada pelo
   painel — propostas montadas à mão podem sobrescrever em styles.css local). */
.solar--capa{ width:clamp(260px, 42vw, 780px); height:clamp(260px, 42vw, 780px); right:-15vw; bottom:-16vw; opacity:.5; }
.orbit-detail--capa{ width:clamp(180px, 24vw, 460px); left:-2vw; top:8vw; }

/* ---------- Cartelas (borda fina, sem sombra) ---------- */
.proposal-card{
  border:1px solid var(--line-strong);
  padding:clamp(16px, 1.8vw, 28px);
  min-width:0;
}
.proposal-card--dark{
  background:linear-gradient(155deg, rgba(250,70,22,.10), rgba(255,255,255,.015) 60%);
}
.proposal-card__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:10px;
  display:block;
}

/* ---------- Quadros de serviço (com ícone) ---------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(10px, 1.4vw, 18px);
}
@media (max-width:1100px){
  .service-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .service-grid{ grid-template-columns:1fr 1fr; }
}
.service-tile{
  border:1px solid var(--line-strong);
  background:linear-gradient(155deg, rgba(250,70,22,.08), rgba(255,255,255,.012) 60%);
  padding:clamp(16px, 1.8vw, 24px) clamp(13px, 1.5vw, 18px);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.service-tile__icon{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(250,70,22,.55);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
  flex:0 0 auto;
}
.service-tile__icon svg{ width:22px; height:22px; }
.service-tile h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.02rem, .9rem + .75vw, 1.35rem);
  overflow-wrap:break-word;
}
.service-tile p{
  font-family:var(--font-mono);
  font-size:clamp(.8rem, .76rem + .2vw, .95rem);
  line-height:1.45;
  color:var(--muted);
  overflow-wrap:break-word;
}

/* ---------- Grade de planos ---------- */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 2vw, 24px);
}
@media (max-width:900px){
  .plan-grid{ grid-template-columns:1fr; }
}
.plan-card{
  border:1px solid var(--line-strong);
  padding:clamp(16px, 1.8vw, 26px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.plan-card--featured{
  border-color:var(--orange);
  background:rgba(250,70,22,.05);
}
.plan-card__name{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.plan-card--featured .plan-card__name{ color:var(--orange); }
.plan-card__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  margin-bottom:12px;
  overflow-wrap:break-word;
}
.plan-card__deliverables{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.plan-card__deliverables > li{
  font-family:var(--font-mono);
  font-size:clamp(.82rem, .78rem + .18vw, .96rem);
  line-height:1.4;
  color:var(--ink-soft);
  padding-left:14px;
  position:relative;
  min-width:0;
  overflow-wrap:break-word;
}
.plan-card__deliverables > li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--orange);
}
.plan-card__sublist{
  margin-top:5px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.plan-card__sublist li{
  font-family:var(--font-mono);
  font-size:.9em;
  line-height:1.35;
  color:var(--muted);
  padding-left:12px;
  position:relative;
  min-width:0;
  overflow-wrap:break-word;
}
.plan-card__sublist li::before{
  content:"·";
  position:absolute;
  left:0;
  color:var(--muted);
}
.price-tag{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem, 1.25rem + 1.3vw, 2.3rem);
  color:var(--orange);
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.price-tag__period{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
.plan-card__note{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.4;
  color:var(--muted-2);
}

/* ---------- Grid de duas colunas (proposta / contexto do cliente) ---------- */
.two-col{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(20px, 3vw, 56px);
  align-items:start;
}
@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
}

/* ---------- Grade de benefícios (venda o resultado, não só a entrega) ---------- */
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2.2vw, 30px);
}
@media (max-width:900px){
  .benefit-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .benefit-grid{ grid-template-columns:1fr; }
}
.benefit-card{
  border-top:1px solid var(--line-strong);
  padding-top:clamp(12px, 1.6vh, 18px);
  min-width:0;
}
.benefit-card__num{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.09em;
  color:var(--orange);
  margin-bottom:8px;
}
.benefit-card__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.2rem, 1rem + 1vw, 1.65rem);
  margin-bottom:6px;
  overflow-wrap:break-word;
}
.benefit-card p{
  font-family:var(--font-mono);
  font-size:clamp(.85rem, .8rem + .2vw, 1rem);
  line-height:1.45;
  color:var(--ink-soft);
  overflow-wrap:break-word;
}

/* ---------- Etapas do processo (grade de quadros numerados) ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(10px, 1.4vw, 18px);
}
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
}
.steps li{
  border:1px solid var(--line-strong);
  padding:clamp(14px, 1.6vw, 20px);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.steps__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.3px rgba(250,70,22,.85);
}
.steps__body h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.95rem, .88rem + .4vw, 1.2rem);
  margin-bottom:2px;
  overflow-wrap:break-word;
}
.steps__body p{
  font-family:var(--font-mono);
  font-size:clamp(.78rem, .74rem + .16vw, .92rem);
  line-height:1.4;
  color:var(--ink-soft);
  overflow-wrap:break-word;
}

/* ---------- Responsivo geral ---------- */
@media (max-width:760px){
  .top-row{ gap:12px; }
  .stat-strip{ row-gap:16px; }
  .slide__inner{ padding-left:var(--gutter); padding-right:var(--gutter); padding-bottom:16vh; }
}

/* ============================================================
   IMPRESSÃO / EXPORTAÇÃO EM PDF
   O deck de slides (empilhados/absolutos, 1 ativo por vez) vira,
   só no print, uma sequência normal em fluxo — cada `.slide` sai
   como 1 página. Testar com Playwright (page.pdf()) ou
   Cmd/Ctrl+P → Salvar como PDF.
   ============================================================ */
@media print{
  @page{ size: landscape; margin:0; }

  html, body{ background:var(--black); height:auto; overflow:visible; }
  .deck{ position:static; width:auto; height:auto; overflow:visible; }

  .deck-chrome-top, .deck-progress, .deck-nav, .deck-click{ display:none !important; }

  .slide{
    position:relative !important;
    inset:auto;
    opacity:1 !important;
    pointer-events:auto !important;
    height:100vh;
    break-inside:avoid-page;
  }
  .slide + .slide{ break-before:page; }

  .slide__inner{ padding-top:5vh; }

  .proposal-card,
  .plan-card,
  .service-tile,
  .benefit-card,
  .steps li,
  .stat-strip{ break-inside:avoid-page; }

  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}