/* ==========================================================================
   OctaFlow — camada visual nova (Paleta A "Feira")
   Carregado em TODAS as páginas. Regras escopadas em .of-*, :where(body.of-page)
   ou body.of-legacy — nenhum seletor de elemento solto.
   Seções: 1 Tokens · 2 Base (páginas novas) · 3 Layout · 4 Componentes
           5 Ponte legada · 6 Utilitários · 7 Movimento reduzido
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  /* superfícies */
  --of-bg:#FBF8F1; --of-bg-alt:#F3EEE3; --of-surface:#FFFFFF; --of-surface-tint-green:#E8F5EC;
  --of-dark:#0F1B3D;
  /* bordas */
  --of-border:#E7DFCC; --of-border-soft:#EBE4D4; --of-border-strong:#857D69;
  /* texto */
  --of-text:#0F1B3D; --of-text-2:#46506E; --of-text-3:#5B647F; --of-text-nav:#2F3A5C;
  --of-text-on-dark:#FBF8F1; --of-text-on-dark-2:#B8BFD6; --of-link-on-dark:#A5B4FF;
  /* marca e ação */
  --of-brand:#1B45FF; --of-brand-hover:#0F2AD6; --of-brand-strong:#1437CC;
  --of-action:#15803D; --of-action-hover:#166534; --of-action-active:#14532D;
  --of-accent:#EA580C;      /* só decorativo */
  --of-accent-text:#9A3412; /* laranja como texto pequeno */
  /* segmentos */
  --of-seg-delivery:#15803D; --of-seg-bar:#1B45FF; --of-seg-mercado:#B91C1C;
  --of-seg-equipe:#C2410C; --of-seg-gestao:#0F1B3D;
  --of-seg-delivery-text:#166534; --of-seg-equipe-text:#9A3412;
  --of-tint-delivery:#DCFCE7; --of-tint-bar:#E0E7FF; --of-tint-mercado:#FEE2E2;
  --of-tint-equipe:#FFEDD5; --of-tint-gestao:#E8EAF2;
  /* feedback */
  --of-error:#B91C1C; --of-error-bg:#FEF2F2; --of-success:#166534; --of-success-bg:#DCFCE7;
  --of-focus:#0F1B3D; --of-focus-on-dark:#FBF8F1;
  --of-disabled-bg:#EDE7DA; --of-disabled-text:#5B647F;
  --of-whatsapp:#128C7E; --of-whatsapp-hover:#0E6F64;
  /* tipografia */
  --of-font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --of-font-title:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --of-fs-display:clamp(2.5rem,1.6rem + 4vw,4.5rem);
  --of-fs-h2:clamp(1.875rem,1.3rem + 2.6vw,3.25rem);
  --of-fs-h3:clamp(1.375rem,1.2rem + .7vw,1.75rem);
  --of-fs-h4:clamp(1.1875rem,1.1rem + .3vw,1.375rem);
  --of-fs-lead:clamp(1.125rem,1.05rem + .3vw,1.25rem);
  --of-fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --of-fs-small:.875rem; --of-fs-eyebrow:.8125rem;
  --of-fs-price:clamp(2.5rem,2rem + 2vw,3.25rem);
  /* espaçamento */
  --of-space-1:4px; --of-space-2:8px; --of-space-3:12px; --of-space-4:16px; --of-space-5:20px;
  --of-space-6:24px; --of-space-8:32px; --of-space-10:40px; --of-space-12:48px; --of-space-14:56px;
  --of-space-16:64px; --of-space-20:80px; --of-space-24:96px;
  --of-section-y:clamp(56px,4rem + 3vw,96px);
  --of-gutter:clamp(16px,4vw,24px);
  --of-container:1200px;
  --of-header-h:64px;
  /* raios */
  --of-radius-sm:10px; --of-radius-md:16px; --of-radius-lg:22px; --of-radius-xl:28px; --of-radius-pill:999px;
  /* sombras */
  --of-shadow-1:0 1px 2px rgba(15,27,61,.06),0 1px 1px rgba(15,27,61,.04);
  --of-shadow-2:0 8px 24px rgba(15,27,61,.08);
  --of-shadow-3:0 30px 80px rgba(15,27,61,.14);
  --of-shadow-brand:0 20px 60px rgba(27,69,255,.15);
  /* movimento */
  --of-ease:cubic-bezier(.2,.7,.2,1); --of-dur-fast:120ms; --of-dur:200ms; --of-dur-slow:320ms;
  /* camadas */
  --of-z-sticky-cta:40; --of-z-float:45; --of-z-header:50; --of-z-nav-panel:60; --of-z-toast:70;
  /* alturas medidas pelo JS */
  --of-sticky-h:0px; --of-consent-h:0px;
}
@media (min-width:1024px){ :root{ --of-header-h:76px; } }

/* 2. Base das páginas novas (especificidade zero) ---------------------------- */
:where(body.of-page){
  margin:0; background:var(--of-bg); color:var(--of-text);
  font-family:var(--of-font-text); font-size:var(--of-fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
:where(html:has(body.of-page)){ scroll-behavior:smooth; scroll-padding-top:calc(var(--of-header-h) + 16px); -webkit-text-size-adjust:100%; }
:where(body.of-page) :where(*,*::before,*::after){ box-sizing:border-box; }
:where(body.of-page) :where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){ margin:0; }
:where(body.of-page) :where(h1,h2,h3,h4){ font-family:var(--of-font-title); color:var(--of-text); text-wrap:balance; }
:where(body.of-page) :where(h1){ font-size:var(--of-fs-display); font-weight:900; line-height:1.02; letter-spacing:-.035em; }
:where(body.of-page) :where(h2){ font-size:var(--of-fs-h2); font-weight:900; line-height:1.08; letter-spacing:-.03em; }
:where(body.of-page) :where(h3){ font-size:var(--of-fs-h3); font-weight:800; line-height:1.2; letter-spacing:-.02em; }
:where(body.of-page) :where(h4){ font-size:var(--of-fs-h4); font-weight:800; line-height:1.25; }
:where(body.of-page) :where(p,li,figcaption){ overflow-wrap:anywhere; text-wrap:pretty; }
:where(body.of-page) :where(img,picture,video,svg){ max-width:100%; height:auto; }
:where(body.of-page) :where(img,video){ display:block; }
:where(body.of-page) :where(a){ color:var(--of-brand); text-underline-offset:3px; }
:where(body.of-page) :where(a:hover){ color:var(--of-brand-hover); text-decoration-thickness:2px; }
:where(body.of-page) :where(button,input,select,textarea){ font:inherit; color:inherit; }
:where(body.of-page) :where(section[id]){ scroll-margin-top:calc(var(--of-header-h) + 16px); }
:where(body.of-page) :where(main:focus){ outline:none; }

/* Foco visível (todas as páginas, só no teclado) */
.of-site :focus-visible{ outline:3px solid var(--of-focus); outline-offset:2px; }
.of-on-dark :focus-visible{ outline-color:var(--of-focus-on-dark); }

/* Caixa dos componentes compartilhados também nas páginas antigas */
.of-header,.of-header *,.of-footer,.of-footer *,.of-consent,.of-consent *,
.of-sticky-cta,.of-sticky-cta *,.of-wa-float,.of-skip-link,.of-btn{ box-sizing:border-box; }

/* 3. Layout ---------------------------------------------------------------- */
.of-container{ width:100%; max-width:calc(var(--of-container) + 2 * var(--of-gutter)); margin-inline:auto; padding-inline:var(--of-gutter); }
.of-container--narrow{ max-width:calc(760px + 2 * var(--of-gutter)); }
.of-section{ padding-block:var(--of-section-y); }
.of-section--alt{ background:var(--of-bg-alt); border-block:1px solid var(--of-border-soft); }
.of-section__head{ display:flex; flex-direction:column; gap:14px; max-width:760px; margin-bottom:var(--of-space-10); }
.of-section__head--center{ margin-inline:auto; text-align:center; align-items:center; }
.of-grid{ display:grid; gap:var(--of-space-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--of-grid-min,260px)),1fr)); }
.of-stack{ display:flex; flex-direction:column; gap:var(--of-stack-gap,16px); }

/* Tipografia utilitária */
.of-display{ font-family:var(--of-font-title); font-size:var(--of-fs-display); font-weight:900; line-height:1.02; letter-spacing:-.035em; }
.of-h2{ font-family:var(--of-font-title); font-size:var(--of-fs-h2); font-weight:900; line-height:1.08; letter-spacing:-.03em; }
.of-h3{ font-family:var(--of-font-title); font-size:var(--of-fs-h3); font-weight:800; line-height:1.2; letter-spacing:-.02em; }
.of-lead{ font-size:var(--of-fs-lead); line-height:1.5; color:var(--of-text-2); max-width:36rem; }
.of-muted{ color:var(--of-text-2); }
.of-small{ font-size:var(--of-fs-small); line-height:1.5; color:var(--of-text-3); }
.of-hl-action{ color:var(--of-action); }
.of-hl-brand{ color:var(--of-brand); }
.of-eyebrow{ font-size:var(--of-fs-eyebrow); font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; color:var(--of-brand); }
@media (min-width:1024px){ .of-eyebrow{ font-size:.875rem; } .of-small{ font-size:.9375rem; } }

/* 4. Componentes ------------------------------------------------------------ */

/* 4.1 Botões */
.of-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border:1.5px solid transparent; border-radius:var(--of-radius-pill);
  font-family:var(--of-font-text); font-size:1rem; font-weight:800; line-height:1.2; letter-spacing:0;
  text-align:center; text-decoration:none; white-space:normal; cursor:pointer; user-select:none;
  transition:background-color var(--of-dur) var(--of-ease),border-color var(--of-dur) var(--of-ease),color var(--of-dur) var(--of-ease),transform var(--of-dur) var(--of-ease),box-shadow var(--of-dur) var(--of-ease);
}
.of-btn:hover{ text-decoration:none; }
.of-btn .of-icon{ width:20px; height:20px; flex:none; }
.of-btn--primary{ background:var(--of-action); color:#fff; }
.of-btn--primary:hover{ background:var(--of-action-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--of-shadow-2); }
.of-btn--primary:active{ background:var(--of-action-active); color:#fff; transform:translateY(0); box-shadow:none; }
.of-btn--secondary,.of-btn--whatsapp{ background:transparent; border-color:var(--of-border-strong); color:var(--of-text); font-weight:700; }
.of-btn--secondary:hover,.of-btn--whatsapp:hover{ background:var(--of-surface); border-color:var(--of-text); color:var(--of-text); }
.of-btn--secondary:active,.of-btn--whatsapp:active{ background:var(--of-bg-alt); }
.of-btn--whatsapp .of-icon{ color:var(--of-whatsapp); }
.of-btn--brand{ background:var(--of-brand); color:#fff; }
.of-btn--brand:hover{ background:var(--of-brand-hover); color:#fff; }
.of-btn--link{ min-height:44px; padding:0 4px; background:none; color:var(--of-text-nav); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.of-btn--link:hover{ color:var(--of-brand-hover); text-decoration:underline; }
.of-btn--lg{ min-height:56px; padding:0 28px; font-size:1.0625rem; }
@media (min-width:1024px){ .of-btn--lg{ font-size:1.125rem; } }
.of-btn--block{ width:100%; }
.of-btn[disabled],.of-btn[aria-disabled="true"]{ background:var(--of-disabled-bg); border-color:var(--of-disabled-bg); color:var(--of-disabled-text); cursor:not-allowed; transform:none; box-shadow:none; }
.of-btn.is-loading{ cursor:progress; }
.of-btn.is-loading::before{ content:""; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:of-spin .7s linear infinite; }
@keyframes of-spin{ to{ transform:rotate(360deg); } }
.of-btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width:639px){ .of-btn-row--stack-mobile{ flex-direction:column; } .of-btn-row--stack-mobile > .of-btn{ width:100%; } }

/* 4.2 Ícones */
.of-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.of-icon{ display:inline-block; width:24px; height:24px; flex:none; vertical-align:middle; }

/* 4.3 Chips, selos, eyebrow por segmento */
.of-seg--delivery{ --of-seg:var(--of-seg-delivery); --of-tint:var(--of-tint-delivery); --of-seg-text:var(--of-seg-delivery-text); }
.of-seg--bar{ --of-seg:var(--of-seg-bar); --of-tint:var(--of-tint-bar); --of-seg-text:var(--of-seg-bar); }
.of-seg--mercado{ --of-seg:var(--of-seg-mercado); --of-tint:var(--of-tint-mercado); --of-seg-text:var(--of-seg-mercado); }
.of-seg--equipe{ --of-seg:var(--of-seg-equipe); --of-tint:var(--of-tint-equipe); --of-seg-text:var(--of-seg-equipe-text); }
.of-seg--gestao,.of-seg--comercio{ --of-seg:var(--of-seg-gestao); --of-tint:var(--of-tint-gestao); --of-seg-text:var(--of-seg-gestao); }
.of-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px;
  border-radius:var(--of-radius-pill); background:var(--of-tint,var(--of-tint-gestao)); color:var(--of-seg-text,var(--of-text));
  font-size:.875rem; font-weight:700; line-height:1.2;
}
.of-chip .of-icon{ width:16px; height:16px; }
.of-badge{
  display:inline-flex; align-items:center; min-height:28px; padding:4px 12px; border-radius:var(--of-radius-pill);
  background:var(--of-brand); color:#fff; font-size:.8125rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.of-badge--action{ background:var(--of-action); }

/* 4.4 Cards */
.of-card{ background:var(--of-surface); border:1px solid var(--of-border); border-radius:var(--of-radius-md); padding:var(--of-space-6); }
.of-card--lg{ border-radius:var(--of-radius-lg); padding:28px; }
.of-card__icon{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; flex:none;
  border-radius:16px; background:var(--of-tint,var(--of-tint-gestao)); color:var(--of-seg,var(--of-text));
}
.of-card__icon .of-icon{ width:30px; height:30px; }
:where(.of-segment-card,.of-tab){ --of-seg:var(--of-seg-gestao); } /* padrão sem vencer .of-seg--* */
.of-segment-card{
  position:relative; display:flex; flex-direction:column; gap:14px; min-height:72px;
  background:var(--of-surface); border:1px solid var(--of-border); border-top:4px solid var(--of-seg);
  border-radius:var(--of-radius-lg); padding:var(--of-space-6); color:var(--of-text); text-decoration:none;
  transition:transform var(--of-dur) var(--of-ease),box-shadow var(--of-dur) var(--of-ease),border-color var(--of-dur) var(--of-ease);
}
.of-segment-card:hover{ transform:translateY(-2px); box-shadow:var(--of-shadow-2); border-color:var(--of-seg); color:var(--of-text); }
.of-segment-card:active{ transform:translateY(0); }
.of-segment-card__link{ margin-top:auto; color:var(--of-seg-text,var(--of-brand)); font-weight:800; }
.of-segment-card:hover .of-segment-card__link{ text-decoration:underline; text-underline-offset:3px; }
.of-quote{ display:flex; flex-direction:column; gap:16px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:var(--of-radius-lg); padding:28px; }
.of-quote__text{ font-size:1.125rem; line-height:1.45; font-weight:600; }
.of-quote__author{ margin-top:auto; font-size:.9375rem; font-weight:700; color:var(--of-brand); }

/* 4.5 Moldura de tela (print do sistema) */
.of-screen{ border-radius:18px; overflow:hidden; border:1px solid var(--of-border); background:#0B0B14; box-shadow:var(--of-shadow-3); }
.of-screen__bar{ display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; background:#12121E; border-bottom:1px solid #24243A; }
.of-screen__dot{ width:11px; height:11px; border-radius:50%; background:#FF5F57; }
.of-screen__dot:nth-child(2){ background:#FEBC2E; } .of-screen__dot:nth-child(3){ background:#28C840; }
.of-screen__url{ margin-left:12px; font-size:13px; color:#8A8AA5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.of-screen img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* 4.6 Abas (vitrine por segmento) */
.of-tabs{ display:flex; flex-direction:column; gap:16px; --of-tabs-interval:7s; }
.of-tabs__bar{ display:flex; align-items:center; gap:8px; }
.of-tabs__list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; }
@media (min-width:768px){ .of-tabs__list{ display:flex; flex-wrap:wrap; } }
.of-tab{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; overflow:hidden;
  min-height:44px; padding:8px 16px; border:2px solid var(--of-border-strong); border-radius:var(--of-radius-pill);
  background:var(--of-surface); color:var(--of-text-nav); font-family:var(--of-font-text); font-size:.9375rem; font-weight:700; line-height:1.2;
  cursor:pointer; transition:background-color var(--of-dur) var(--of-ease),border-color var(--of-dur) var(--of-ease),color var(--of-dur) var(--of-ease);
}
.of-tab:hover{ border-color:var(--of-seg); background:var(--of-tint,var(--of-surface)); }
.of-tab:active{ transform:scale(.98); }
.of-tab .of-icon{ display:none; width:14px; height:14px; }
.of-tab[aria-selected="true"]{ background:var(--of-seg); border-color:var(--of-seg); color:#fff; font-weight:800; }
.of-tab[aria-selected="true"] .of-icon{ display:inline-block; }
.of-tab::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.75); transform:scaleX(0); transform-origin:left; }
.of-tabs.is-running .of-tab[aria-selected="true"]::after{ animation:of-tab-progress var(--of-tabs-interval) linear forwards; }
.of-tabs.is-paused .of-tab[aria-selected="true"]::after{ animation-play-state:paused; }
@keyframes of-tab-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.of-tabs__pause{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:2px solid var(--of-border-strong); border-radius:50%; background:var(--of-surface); color:var(--of-text); cursor:pointer;
}
.of-tabs__pause:hover{ border-color:var(--of-text); }
.of-tabs__pause .of-icon{ width:18px; height:18px; }
.of-tabs__pause .of-tabs__icon-play,.of-tabs__pause[aria-pressed="true"] .of-tabs__icon-pause{ display:none; }
.of-tabs__pause[aria-pressed="true"] .of-tabs__icon-play{ display:inline-block; }
.of-no-js .of-tabs__pause{ display:none; }
.of-tabs__panel[hidden]{ display:none; }
.of-tabs__panel{ animation:of-fade var(--of-dur) var(--of-ease); }
.of-tabs__panel:focus-visible{ outline-offset:4px; border-radius:18px; }
.of-tabs__caption{ margin-top:14px; font-size:1rem; line-height:1.5; color:var(--of-text-nav); }
.of-tabs__caption strong{ color:var(--of-text); }
@keyframes of-fade{ from{ opacity:0; } to{ opacity:1; } }

/* 4.7 FAQ (<details> nativo) */
.of-faq{ display:flex; flex-direction:column; gap:14px; max-width:900px; margin-inline:auto; }
.of-faq__item{ background:var(--of-surface); border:1px solid var(--of-border); border-radius:var(--of-radius-md); }
.of-faq__item[open]{ border-color:var(--of-border-strong); }
.of-faq__question{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:14px 16px;
  font-size:1.0625rem; font-weight:700; line-height:1.35; cursor:pointer; list-style:none; border-radius:inherit;
}
.of-faq__question::-webkit-details-marker{ display:none; }
.of-faq__question:hover{ background:var(--of-bg); }
.of-faq__question .of-icon{ width:22px; height:22px; color:var(--of-text-3); transition:transform var(--of-dur) var(--of-ease); }
.of-faq__item[open] .of-faq__question .of-icon{ transform:rotate(45deg); }
.of-faq__answer{ padding:0 16px 16px; color:var(--of-text-2); line-height:1.55; }
@media (min-width:768px){ .of-faq__question{ padding:20px 24px; font-size:1.125rem; } .of-faq__answer{ padding:0 24px 20px; } }

/* 4.8 Formulário de lead */
.of-lead-form{ display:grid; gap:16px; width:100%; text-align:left; }
@media (min-width:768px){ .of-lead-form__fields{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } }
.of-lead-form__fields{ display:grid; gap:16px; }
.of-field{ display:flex; flex-direction:column; gap:6px; }
.of-field__label{ font-size:.875rem; font-weight:700; color:var(--of-text); }
.of-field__input,.of-field__select{
  width:100%; min-height:48px; padding:0 14px; border:1.5px solid var(--of-border-strong); border-radius:var(--of-radius-sm);
  background:var(--of-surface); color:var(--of-text); font-family:var(--of-font-text); font-size:16px; line-height:1.2;
  transition:border-color var(--of-dur-fast) var(--of-ease);
}
@media (min-width:1024px){ .of-field__input,.of-field__select{ min-height:52px; } }
.of-field__select{ appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F1B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.of-field__input::placeholder{ color:var(--of-text-3); opacity:1; }
.of-field__input:hover,.of-field__select:hover{ border-color:var(--of-text); }
.of-field__input:focus,.of-field__select:focus{ border-color:var(--of-brand); }
.of-field__input[aria-invalid="true"],.of-field__select[aria-invalid="true"]{ border:2px solid var(--of-error); }
.of-field__input:disabled,.of-field__select:disabled{ background:var(--of-disabled-bg); }
.of-field__error{ display:flex; align-items:flex-start; gap:6px; font-size:.875rem; font-weight:600; line-height:1.4; color:var(--of-error); }
.of-field__error[hidden]{ display:none; }
.of-field__error::before{ content:"!"; display:inline-flex; align-items:center; justify-content:center; flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--of-error); color:#fff; font-size:12px; font-weight:800; }
.of-lead-form__summary,.of-lead-form__feedback{ padding:12px 16px; border-radius:var(--of-radius-sm); font-size:.9375rem; line-height:1.45; }
.of-lead-form__summary{ background:var(--of-error-bg); color:var(--of-error); font-weight:700; }
.of-lead-form__summary[hidden],.of-lead-form__feedback:empty{ display:none; }
.of-lead-form__feedback{ background:var(--of-success-bg); color:var(--of-success); font-weight:600; }
.of-lead-form__feedback.is-error{ background:var(--of-error-bg); color:var(--of-error); }
.of-lead-form__feedback a{ color:inherit; font-weight:800; }
.of-lead-form__legal{ font-size:.875rem; line-height:1.5; color:var(--of-text-2); }
.of-lead-form__legal a{ color:var(--of-text-2); }
.of-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* 4.9 Header */
.of-skip-link{
  position:absolute; left:16px; top:-100px; z-index:100; padding:12px 18px; border-radius:var(--of-radius-sm);
  background:var(--of-text); color:#fff; font-family:var(--of-font-text); font-weight:800; text-decoration:none;
}
.of-skip-link:focus{ top:8px; color:#fff; }
.of-header{
  position:sticky; top:0; z-index:var(--of-z-header); width:100%;
  background:var(--of-bg); border-bottom:1px solid var(--of-border-soft);
  font-family:var(--of-font-text); color:var(--of-text);
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .of-header{ background:rgba(251,248,241,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
.of-header__inner{ display:flex; align-items:center; gap:12px; min-height:var(--of-header-h); }
.of-logo{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-right:auto; color:var(--of-text); text-decoration:none; flex:none; }
.of-logo:hover{ color:var(--of-text); text-decoration:none; }
.of-logo picture{ display:contents; }
.of-logo__symbol{ display:block; width:36px; height:36px; object-fit:contain; }
.of-logo__word{ font-family:var(--of-font-title); font-weight:900; font-size:1.3125rem; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.of-logo__flow{ color:var(--of-brand); }
.of-logo__product{ display:block; margin-top:3px; font-family:var(--of-font-text); font-size:.6875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--of-text-nav); }

@media (min-width:1024px){ .of-logo__symbol{ width:42px; height:42px; } .of-logo__word{ font-size:1.5rem; } .of-logo{ gap:12px; } }
.of-header__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.of-header__cta{ min-height:44px; padding:0 14px; font-size:.9375rem; }
.of-header__cta-long{ display:none; }
@media (min-width:640px){ .of-header__cta-long{ display:inline; } .of-header__cta-short{ display:none; } .of-header__cta{ padding:0 20px; } }
@media (max-width:359px){ .of-header:not(.of-header--campaign) .of-header__cta{ display:none; } }
.of-header__demo{ display:none; min-height:44px; padding:0 18px; font-size:.9375rem; }
@media (min-width:768px){ .of-header__demo{ display:inline-flex; } }

.of-nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:0 12px;
  border:1.5px solid var(--of-border-strong); border-radius:var(--of-radius-pill); background:transparent;
  color:var(--of-text); font-family:var(--of-font-text); font-size:.9375rem; font-weight:700; cursor:pointer;
}
.of-nav-toggle:hover{ background:var(--of-bg-alt); }
.of-nav-toggle__icon{ position:relative; display:inline-block; width:18px; height:14px; }
.of-nav-toggle__icon span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform var(--of-dur) var(--of-ease),opacity var(--of-dur) var(--of-ease); }
.of-nav-toggle__icon span:nth-child(1){ top:0; } .of-nav-toggle__icon span:nth-child(2){ top:6px; } .of-nav-toggle__icon span:nth-child(3){ top:12px; }
.of-nav-toggle[aria-expanded="true"] .of-nav-toggle__icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.of-nav-toggle[aria-expanded="true"] .of-nav-toggle__icon span:nth-child(2){ opacity:0; }
.of-nav-toggle[aria-expanded="true"] .of-nav-toggle__icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:419px){ .of-nav-toggle__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .of-nav-toggle{ padding:0; width:44px; } }

/* Painel do menu (celular/tablet) */
.of-header__panel{
  display:none; position:fixed; z-index:var(--of-z-nav-panel); left:0; right:0; top:var(--of-header-h); bottom:0;
  overflow-y:auto; overscroll-behavior:contain; padding:8px var(--of-gutter) calc(24px + env(safe-area-inset-bottom));
  background:var(--of-bg); border-top:1px solid var(--of-border-soft);
}
.of-header__panel.is-open{ display:block; animation:of-fade var(--of-dur) var(--of-ease); }
.of-nav__list,.of-subnav__list{ list-style:none; margin:0; padding:0; }
.of-nav__link,.of-subnav__link{
  display:flex; align-items:center; min-height:56px; padding:0 4px; border-bottom:1px solid var(--of-border-soft);
  color:var(--of-text-nav); font-size:1.0625rem; font-weight:700; text-decoration:none;
}
.of-nav__link:hover,.of-subnav__link:hover,.of-nav__link[aria-current="page"]{ color:var(--of-text); text-decoration:none; }
.of-nav__link[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--of-brand); padding-left:12px; }
.of-subnav{ margin-top:16px; }
.of-subnav::before{ content:"Nesta página"; display:block; padding:8px 4px; font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--of-text-3); }
.of-header__panel-actions{ display:grid; gap:12px; margin-top:24px; }
html.of-nav-open,html.of-nav-open body{ overflow:hidden; }

/* Menu horizontal (desktop) */
@media (min-width:1280px){
  .of-header__inner{ flex-wrap:wrap; column-gap:16px; row-gap:0; }
  .of-header__panel{ display:contents; }
  .of-nav{ order:2; flex:1 1 0%; display:flex; justify-content:center; min-width:0; }
  .of-nav__list{ display:flex; align-items:center; gap:0; }
  .of-nav__link{ min-height:44px; padding:0 7px; border:0; font-size:.90625rem; font-weight:600; white-space:nowrap; position:relative; }
  .of-nav__link::after{ content:""; position:absolute; left:7px; right:7px; bottom:6px; height:2px; background:var(--of-brand); transform:scaleX(0); transition:transform var(--of-dur) var(--of-ease); }
  .of-nav__link:hover::after,.of-nav__link[aria-current="page"]::after{ transform:scaleX(1); }
  .of-nav__link[aria-current="page"]{ box-shadow:none; padding-left:7px; }
  .of-header .of-logo{ order:1; margin-right:0; }
  .of-header__actions{ order:3; }
  .of-nav-toggle,.of-header__panel-actions{ display:none; }
  .of-subnav{ order:4; flex:1 0 100%; margin:0; border-top:1px solid var(--of-border-soft); }
  .of-subnav::before{ display:none; }
  .of-subnav__list{ display:flex; justify-content:center; gap:8px; }
  .of-subnav__link{ min-height:44px; padding:0 12px; border:0; font-size:.9375rem; font-weight:700; }
}
.of-header--campaign .of-header__inner{ flex-wrap:nowrap; }

/* 4.10 Rodapé */
.of-footer{ background:var(--of-bg-alt); border-top:1px solid var(--of-border-soft); color:var(--of-text-2); font-family:var(--of-font-text); font-size:.9375rem; line-height:1.5; padding:56px 0 24px; }
.of-footer__grid{ display:grid; gap:40px; }
@media (min-width:768px){ .of-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .of-footer__grid{ grid-template-columns:1.3fr 1.6fr 1.1fr; } }
.of-footer__brand{ display:flex; flex-direction:column; gap:14px; max-width:360px; }
.of-footer__brand .of-logo{ margin-right:0; align-self:flex-start; }
.of-footer__text{ margin:0; color:var(--of-text-2); }
.of-footer__text--muted{ color:var(--of-text-3); font-size:.875rem; }
.of-footer__nav{ display:grid; gap:32px; grid-template-columns:1fr 1fr; }
.of-footer__col{ display:flex; flex-direction:column; gap:8px; }
.of-footer__title{ margin:0 0 4px; font-size:.8125rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--of-text); }
.of-footer__list{ list-style:none; margin:0; padding:0; }
.of-footer__link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 0; border:0; background:none; line-height:1.35;
  color:var(--of-text-nav); font:inherit; font-weight:600; text-align:left; text-decoration:none; cursor:pointer;
}
.of-footer__link:hover{ color:var(--of-brand-hover); text-decoration:underline; text-underline-offset:3px; }
.of-footer__link .of-icon{ width:20px; height:20px; color:var(--of-text-3); }
.of-footer__list--contact .of-footer__link{ overflow-wrap:anywhere; }
.of-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid var(--of-border); color:var(--of-text-3); font-size:.875rem; }
.of-footer__bottom p{ margin:0; }

/* 4.11 Barra de cookies */
.of-consent{
  position:fixed; z-index:var(--of-z-toast); left:0; right:0; bottom:var(--of-sticky-h);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom)); background:var(--of-surface);
  border-top:1px solid var(--of-border); box-shadow:0 -8px 24px rgba(15,27,61,.08);
  font-family:var(--of-font-text); color:var(--of-text);
}
.of-consent[hidden]{ display:none; }
.of-consent__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.of-consent__text{ flex:1 1 320px; margin:0; font-size:.9375rem; line-height:1.45; color:var(--of-text-2); }
.of-consent__text a{ color:var(--of-brand); font-weight:700; }
.of-consent__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1 1 320px; max-width:420px; }
.of-consent__actions .of-btn{ min-height:44px; padding:0 16px; font-size:.9375rem; }
@media (max-width:639px){ .of-consent__actions{ max-width:none; } }

/* 4.12 CTA fixo no celular */
.of-sticky-cta{
  position:fixed; z-index:var(--of-z-sticky-cta); left:0; right:0; bottom:0;
  padding:8px var(--of-gutter) calc(8px + env(safe-area-inset-bottom));
  background:rgba(251,248,241,.97); border-top:1px solid var(--of-border); box-shadow:0 -8px 24px rgba(15,27,61,.08);
}
.of-sticky-cta[hidden]{ display:none; }
.of-sticky-cta .of-btn{ min-height:52px; }
@media (min-width:1024px),(max-height:430px){ .of-sticky-cta{ display:none !important; } }

/* 4.13 WhatsApp flutuante */
.of-wa-float{
  position:fixed; z-index:var(--of-z-float); right:16px; bottom:calc(max(16px, env(safe-area-inset-bottom)) + var(--of-consent-h));
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:var(--of-whatsapp); color:#fff; box-shadow:0 8px 24px rgba(15,27,61,.22);
  transition:background-color var(--of-dur) var(--of-ease),transform var(--of-dur) var(--of-ease),bottom var(--of-dur) var(--of-ease);
}
.of-wa-float:hover{ background:var(--of-whatsapp-hover); color:#fff; transform:scale(1.05); }
.of-wa-float__icon{ width:28px; height:28px; }
@media (min-width:1024px){ .of-wa-float{ right:24px; bottom:calc(24px + var(--of-consent-h)); } }
body.of-sticky-visible .of-wa-float{ display:none; }
/* LP Bar: a barra fixa própria já tem "Falar no WhatsApp" */
@media (max-width:768px){ body.page-lp-bar:has(#mobile-sticky-cta) .of-wa-float{ display:none; } }

/* 4.14 Vídeo */
.of-video{ position:relative; width:100%; max-width:360px; margin-inline:auto; border-radius:28px; overflow:hidden; background:#05050A; box-shadow:var(--of-shadow-3); aspect-ratio:9/16; }
.of-video video{ width:100%; height:100%; object-fit:cover; }

/* 5. Ponte legada: páginas antigas herdam cor e fonte da Paleta A, sem mudar medidas ----- */
body.of-legacy{
  --font-display:var(--of-font-title);
  --blue-600:var(--of-action); --blue-700:var(--of-action-hover);
  --blue-500:var(--of-brand); --blue-400:#6E8BFF;
  --zinc-950:var(--of-text);
  --zinc-50:var(--of-bg-alt);
  --header-h:var(--of-header-h);
  background:var(--of-bg);
}
body.of-legacy.page-lp-bar{
  --lp-accent-primary:var(--of-brand); --lp-accent-primary-strong:var(--of-brand-strong);
  --lp-accent-secondary:var(--of-accent);
  --lp-surface-hero:var(--of-text); --lp-surface-dark:#14234D;
  --lp-surface-cream:var(--of-bg); --lp-surface-cream-alt:var(--of-bg-alt); --lp-surface-card:var(--of-surface);
}

/* 5.1 Etapa C: em /produtos e /sobre, cards de produto e telas reais em 1 coluna no celular
   (o app.css compacta .grid--3 em 2 colunas e corta o texto em 2–3 linhas). */
@media (max-width: 768px){
  body.of-legacy.page-produtos .grid--3,
  body.of-legacy.page-sobre .people-grid{grid-template-columns:1fr;gap:var(--sp-4,16px)}
  body.of-legacy.page-produtos .product-card{aspect-ratio:auto;padding:var(--sp-5,20px)}
  body.of-legacy.page-produtos .product-card h3{font-size:1.15rem}
  body.of-legacy.page-produtos .product-card p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:.9rem;line-height:1.5}
  body.of-legacy.page-produtos .product-card .btn{font-size:.85rem;padding:10px 12px}
}

/* 6. Utilitários ----------------------------------------------------------- */
.of-visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.of-nowrap{ white-space:nowrap; }
.of-hide-mobile{ display:none; }
@media (min-width:768px){ .of-hide-mobile{ display:revert; } .of-hide-desktop{ display:none; } }

/* 7. Movimento reduzido ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .of-site *,.of-site *::before,.of-site *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  :where(html:has(body.of-site)){ scroll-behavior:auto; }
  .of-tabs__pause{ display:none; }
  .of-tab::after{ display:none; }
}

/* 8. Texto longo (política de privacidade, termos) ---------------------------- */
.of-prose{ display:flex; flex-direction:column; gap:16px; color:var(--of-text-2); }
.of-prose .of-prose__title{ font-size:var(--of-fs-h2); }
.of-prose h2{ margin-top:24px; font-size:var(--of-fs-h4); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.of-prose ul{ display:flex; flex-direction:column; gap:8px; padding-left:1.25rem; }
.of-prose strong{ color:var(--of-text); }

/* ==========================================================================
   9. Etapa B — seções da home e da LP Delivery
   ========================================================================== */

/* 9.1 Recorte 4:3 no celular (of_picture(..., ['mobile' => true])) */
@media (max-width:767px){ .of-picture--m img,.of-screen .of-picture--m img{ aspect-ratio:4/3; } }

/* 9.2 Hero */
.of-hero{
  padding-block:clamp(32px,2rem + 3vw,72px) clamp(48px,3rem + 3vw,80px);
  background:radial-gradient(900px 600px at 10% 0%,rgba(27,69,255,.09),transparent 60%),radial-gradient(800px 600px at 100% 100%,rgba(234,88,12,.08),transparent 60%);
}
.of-hero__grid{ display:grid; gap:40px; align-items:center; }
@media (min-width:1024px){ .of-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; } }
.of-hero__copy{ display:flex; flex-direction:column; gap:20px; min-width:0; }
@media (min-width:1024px){ .of-hero__copy{ gap:24px; } }
.of-hero__title{ font-size:var(--of-fs-display); }
.of-hero__lead{ max-width:30rem; font-size:1.0625rem; font-weight:500; line-height:1.55; letter-spacing:-.003em; color:var(--of-text-nav); } /* subtítulo de produto, não de artigo (2026-10) */
.of-trust{ display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0; font-size:.9375rem; font-weight:600; color:var(--of-text-2); }
.of-trust li{ display:inline-flex; align-items:center; gap:6px; }
.of-trust .of-icon{ width:18px; height:18px; color:var(--of-action); }
@media (max-width:479px){ .of-trust{ flex-direction:column; } }

/* 9.3 Vitrine de abas */
.of-showcase{ min-width:0; }
.of-showcase__figure{ display:flex; flex-direction:column; }
.of-showcase__stage{ position:relative; }
@media (min-width:768px){ .of-showcase__stage--chat{ margin-bottom:36px; margin-right:12px; } }
.of-no-js .of-tabs__bar{ display:none; }
.of-no-js .of-tabs__panel[hidden]{ display:block; }
.of-no-js .of-tabs__panel + .of-tabs__panel{ margin-top:24px; }
.of-chat-mock{ display:none; }
@media (min-width:768px){
  .of-chat-mock{
    display:block; position:absolute; right:-12px; bottom:-36px; width:236px; overflow:hidden;
    border-radius:30px; background:#05050A; border:3px solid #D9D1BD; box-shadow:0 30px 80px rgba(15,27,61,.2);
    font-size:12px; line-height:1.35;
  }
}
.of-chat-mock__head{ display:flex; align-items:center; gap:10px; padding:14px 12px 10px; background:#1F2C34; color:#E9EDEF; }
.of-chat-mock__avatar{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--of-action); }
.of-chat-mock__name{ display:block; font-size:13px; font-weight:700; }
.of-chat-mock__status{ display:block; font-size:10px; color:#AEBAC1; }
.of-chat-mock__tag{ margin-left:auto; padding:2px 8px; border-radius:var(--of-radius-pill); background:#FBF8F1; color:#0F1B3D; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.of-chat-mock__body{ display:flex; flex-direction:column; gap:8px; margin:0; padding:12px 10px 14px; list-style:none; background:#0B141A; }
.of-chat-mock__msg{ align-self:flex-start; max-width:90%; padding:8px 10px; border-radius:10px; background:#202C33; color:#E9EDEF; overflow-wrap:normal; }
.of-chat-mock__msg--in{ align-self:flex-end; background:#005C4B; }

/* 9.4 Faixa de clientes */
.of-clients{ background:var(--of-bg-alt); border-block:1px solid var(--of-border-soft); padding-block:20px; }
.of-clients__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 32px; }
.of-clients__label{ font-size:.9375rem; font-weight:600; color:var(--of-text-nav); }
.of-clients__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 32px; margin:0; padding:0; list-style:none; font-weight:800; color:var(--of-text); }
@media (max-width:639px){
  .of-clients__label{ flex-basis:100%; text-align:center; }
  .of-clients__list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; width:100%; text-align:center; font-size:.9375rem; }
}

/* 9.5 Portas de entrada por segmento */
.of-segments{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
@media (min-width:768px){ .of-segments{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
@media (min-width:1024px){ .of-segments{ grid-template-columns:repeat(6,minmax(0,1fr)); } .of-segments__item{ grid-column:span 2; } .of-segments__item:nth-child(4){ grid-column:2 / span 2; } }
@media (min-width:1280px){ .of-segments{ grid-template-columns:repeat(5,minmax(0,1fr)); } .of-segments__item,.of-segments__item:nth-child(4){ grid-column:auto; } }
.of-segments__item{ display:flex; }
.of-segments .of-segment-card{ width:100%; border-top-width:6px; }
.of-segment-card__body{ display:flex; flex-direction:column; gap:8px; }
.of-segment-card__title{ font-size:1.375rem; }
.of-segment-card__text{ font-size:1rem; line-height:1.5; color:var(--of-text-2); }
.of-segment-card__link{ display:inline-flex; align-items:center; gap:6px; }
.of-segment-card__link .of-icon{ width:18px; height:18px; }
@media (max-width:767px){
  .of-segments .of-segment-card{ display:grid; grid-template-columns:48px 1fr; column-gap:16px; row-gap:8px; padding:20px; border-top-width:4px; }
  .of-segments .of-card__icon{ width:48px; height:48px; border-radius:14px; }
  .of-segments .of-card__icon .of-icon{ width:26px; height:26px; }
  .of-segment-card__link{ grid-column:2; }
  .of-segment-card__title{ font-size:1.1875rem; }
  .of-segment-card__text{ font-size:.9375rem; }
}

/* 9.6 Bloco de duas colunas (vídeo + passos; recursos) */
.of-split{ display:grid; gap:40px; align-items:center; }
@media (min-width:1024px){ .of-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; } }
.of-split__copy{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.of-split__media{ min-width:0; }
@media (max-width:1023px){ .of-split--video .of-split__copy{ order:-1; } }
.of-phone{ width:100%; max-width:300px; margin-inline:auto; border-radius:30px; overflow:hidden; border:3px solid #D9D1BD; background:#05050A; box-shadow:var(--of-shadow-3); aspect-ratio:9/16; }
.of-phone__video{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){ .of-phone{ max-width:320px; } }
.of-steps{ display:flex; flex-direction:column; gap:16px; margin:0; padding:0; list-style:none; }
.of-steps__item{ display:flex; align-items:flex-start; gap:16px; font-size:var(--of-fs-lead); line-height:1.45; color:var(--of-text-nav); }
.of-steps__num{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:12px; background:var(--of-tint-bar); color:var(--of-brand); font-weight:900; }

/* 9.7 Telas reais */
.of-shots{ display:grid; gap:32px 24px; }
@media (min-width:768px){ .of-shots{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.of-shots__item{ display:flex; flex-direction:column; gap:14px; }
.of-shots__frame{ overflow:hidden; border-radius:var(--of-radius-md); border:1px solid var(--of-border); background:#0B0B14; box-shadow:var(--of-shadow-2); }
.of-shots__frame img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.of-shots__item figcaption{ font-size:1.0625rem; line-height:1.5; color:var(--of-text-nav); }
.of-shots__item figcaption strong{ color:var(--of-text); }

/* 9.8 Depoimentos */
.of-quotes{ display:grid; gap:20px; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .of-quotes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .of-quotes{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.of-quotes__item{ display:flex; }
.of-quotes .of-quote{ width:100%; border-top:4px solid var(--of-seg,var(--of-brand)); }
.of-quote__author{ color:var(--of-seg-text,var(--of-brand)); }

/* 9.9 Faixa de planos (home) */
.of-plan-band{ display:grid; gap:28px; align-items:center; padding:clamp(24px,1rem + 3vw,48px); border-radius:var(--of-radius-xl); border:1px solid #BFE3C9; background:var(--of-surface-tint-green); }
@media (min-width:1024px){ .of-plan-band{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; } }
.of-plan-band__copy{ display:flex; flex-direction:column; gap:14px; }
.of-plan-band__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (max-width:767px){ .of-plan-band__actions{ align-items:stretch; } .of-plan-band__actions .of-btn{ width:100%; } }
.of-section--flush-top{ padding-top:0; }

/* 9.10 Formulário: plano escolhido */
.of-lead-form__plan{ padding:10px 14px; border-radius:var(--of-radius-sm); background:var(--of-tint-bar); color:var(--of-brand-strong); font-size:.9375rem; font-weight:700; }
.of-lead-form__plan[hidden]{ display:none; }

/* 9.11 LP Delivery — dores */
.of-pains{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
@media (min-width:480px){ .of-pains{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .of-pains{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }
.of-pain{ display:flex; flex-direction:column; gap:10px; height:100%; padding:24px; border-radius:20px; background:#FFF1EC; border:1px solid #F6C7B5; }
.of-pain .of-icon{ width:28px; height:28px; color:var(--of-accent-text); }
.of-pain__title{ font-size:1.1875rem; }
.of-pain__text{ font-size:.9375rem; line-height:1.5; color:var(--of-text-2); }
.of-bridge{ margin-top:28px; font-size:var(--of-fs-lead); font-weight:700; color:var(--of-text); }
.of-hl-accent{ color:var(--of-accent-text); }

/* 9.12 LP Delivery — como funciona */
.of-how{ display:grid; gap:28px; margin:0; padding:0; list-style:none; counter-reset:none; }
@media (min-width:1024px){ .of-how{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.of-how__step{ display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; }
@media (min-width:1024px){ .of-how__step{ grid-template-columns:1fr; gap:14px; } }
.of-how__num{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--of-brand); color:#fff; font-family:var(--of-font-title); font-size:1.5rem; font-weight:900; }
@media (min-width:1024px){ .of-how__num{ width:56px; height:56px; border-radius:16px; font-size:1.75rem; } }
.of-how__body{ display:flex; flex-direction:column; gap:8px; }
.of-how__text{ color:var(--of-text-2); line-height:1.55; }

/* 9.13 LP Delivery — recursos alternados */
.of-features{ display:flex; flex-direction:column; gap:clamp(56px,3rem + 3vw,88px); margin:0; padding:0; list-style:none; }
.of-feature{ display:grid; gap:24px; align-items:center; }
@media (min-width:1024px){
  .of-feature{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; }
  .of-feature--reverse{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .of-feature--reverse .of-feature__media{ order:2; }
}
@media (max-width:1023px){ .of-feature__media{ order:2; } }
.of-feature__copy{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.of-feature__title{ font-size:clamp(1.625rem,1.2rem + 1.4vw,2.375rem); font-weight:900; line-height:1.08; }
.of-feature__text{ font-size:var(--of-fs-lead); line-height:1.5; color:var(--of-text-2); }
.of-feature__media{ min-width:0; }
.of-feature__media .of-shots__frame{ box-shadow:var(--of-shadow-3); }

/* 9.14 LP Delivery — planos */
.of-plans{ display:grid; gap:20px; margin:0; padding:0; list-style:none; }
@media (min-width:768px){ .of-plans{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .of-plans{ gap:20px; } }
.of-plan{ position:relative; display:flex; flex-direction:column; gap:10px; height:100%; padding:28px 24px; border-radius:var(--of-radius-lg); background:var(--of-surface); border:1px solid var(--of-border); }
.of-plan--featured{ border:2px solid var(--of-brand); box-shadow:var(--of-shadow-brand); }
@media (min-width:1024px){ .of-plan{ padding:30px; } .of-plan--featured{ transform:translateY(-8px); } }
.of-plan .of-badge{ align-self:flex-start; }
.of-plan__name{ font-size:.875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--of-brand); font-family:var(--of-font-text); }
.of-plan__price{ font-family:var(--of-font-title); font-size:var(--of-fs-price); font-weight:900; letter-spacing:-.03em; line-height:1.05; }
.of-plan__price small{ font-family:var(--of-font-text); font-size:1.0625rem; font-weight:600; letter-spacing:0; color:var(--of-text-3); }
.of-plan__price--text{ font-size:clamp(2rem,1.6rem + 1.4vw,2.5rem); }
.of-plan__orders{ font-weight:700; color:var(--of-text-nav); }
.of-plan__list{ display:flex; flex-direction:column; gap:8px; margin:8px 0 16px; padding:0; list-style:none; color:var(--of-text-nav); }
.of-plan__list li{ display:flex; align-items:flex-start; gap:8px; }
.of-plan__list .of-icon{ width:20px; height:20px; margin-top:2px; color:var(--of-action); }
.of-plan .of-btn{ margin-top:auto; }
.of-addon{ display:grid; gap:16px; align-items:center; margin-top:20px; padding:22px 24px; border-radius:18px; background:var(--of-surface); border:1px solid var(--of-border); }
@media (min-width:768px){ .of-addon{ grid-template-columns:minmax(0,1fr) auto auto; gap:24px; } }
.of-addon__title{ font-size:1.25rem; }
.of-addon__text{ margin-top:4px; color:var(--of-text-2); }
.of-addon__price{ font-family:var(--of-font-title); font-size:1.875rem; font-weight:900; line-height:1.1; }
.of-addon__price small{ font-family:var(--of-font-text); font-size:1rem; font-weight:600; color:var(--of-text-3); }
.of-addon__setup{ font-size:.875rem; color:var(--of-text-2); }
.of-plan-notes{ display:flex; flex-direction:column; gap:6px; margin:24px 0 0; padding:0 0 0 1.1rem; font-size:.9375rem; line-height:1.55; color:var(--of-text-2); }

/* 9.15 LP Delivery — prova + dúvidas */
.of-proof{ display:grid; gap:40px; align-items:start; }
@media (min-width:1024px){ .of-proof{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; } .of-proof__quote{ position:sticky; top:calc(var(--of-header-h) + 72px); } }
.of-quote--lg{ padding:clamp(24px,1rem + 2vw,36px); border-top:4px solid var(--of-action); }
.of-quote--lg .of-quote__text{ font-family:var(--of-font-title); font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem); line-height:1.25; font-weight:800; letter-spacing:-.01em; }
.of-proof .of-faq{ max-width:none; margin-inline:0; width:100%; }
.of-proof__faq{ display:flex; flex-direction:column; gap:20px; min-width:0; }
/* rótulo curto das abas no celular (2x2 sem quebrar linha); o longo continua sendo o nome acessível */
.of-tab__short{ display:none; }
@media (max-width:479px){
  .of-tab__long{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .of-tab__short{ display:inline; }
}
/* 9.16 LP Delivery — hero e detalhes */
.of-hero__note{ font-size:.9375rem; font-weight:600; color:var(--of-text-2); }
.of-hero__media{ display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; }
.of-hero__media-caption{ font-size:.875rem; color:var(--of-text-2); text-align:center; }
.of-phone--hero{ max-width:300px; }
@media (min-width:1024px){ .of-phone--hero{ max-width:340px; } }
.of-features__cta{ justify-content:center; margin-top:clamp(48px,2rem + 3vw,72px); }
@media (max-width:639px){ .of-features__cta .of-btn{ width:100%; } }
@media (max-width:399px){ .of-tabs .of-tab{ padding:8px 10px; font-size:.875rem; } }

/* ==========================================================================
   10. Etapa D — carrossel, depoimentos, jornada, menu Soluções, LPs novas
   ========================================================================== */

/* 10.1 Cabeçalho de seção em linha (título + texto/controles à direita) */
.of-section__head--row{ max-width:none; }
@media (min-width:1024px){ .of-section__head--row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; } .of-section__head--row > div{ max-width:760px; } }
.of-section__aside{ max-width:360px; color:var(--of-text-2); }
.of-btn-row--center{ justify-content:center; }

/* 10.2 Carrossel (scroll-snap + setas + pontos) */
.of-carousel{ --of-per-view:1.12; --of-car-gap:16px; position:relative; }
@media (min-width:640px){ .of-carousel{ --of-per-view:2; --of-car-gap:20px; } }
@media (min-width:1024px){ .of-carousel{ --of-per-view:3; } }
.of-carousel--wide{ --of-per-view:1.08; }
@media (min-width:768px){ .of-carousel--wide{ --of-per-view:1.6; } }
@media (min-width:1280px){ .of-carousel--wide{ --of-per-view:2; } }
.of-carousel__track{
  display:grid; grid-auto-flow:column; gap:var(--of-car-gap);
  grid-auto-columns:calc((100% - var(--of-car-gap) * (var(--of-per-view) - 1)) / var(--of-per-view));
  margin:0; padding:4px 2px 8px; list-style:none; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.of-carousel__track::-webkit-scrollbar{ display:none; }
.of-carousel__track:focus-visible{ outline:3px solid var(--of-focus); outline-offset:4px; border-radius:var(--of-radius-md); }
.of-carousel__slide{ display:flex; min-width:0; scroll-snap-align:start; }
.of-carousel__slide > *{ width:100%; }
.of-carousel__nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.of-carousel.is-static .of-carousel__nav{ display:none; }
.of-no-js .of-carousel__nav{ display:none; }
.of-carousel__btn{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none;
  border-radius:50%; border:1px solid var(--of-border-strong); background:var(--of-surface); color:var(--of-text); cursor:pointer;
  transition:background var(--of-dur) var(--of-ease),border-color var(--of-dur) var(--of-ease);
}
.of-carousel__btn:hover:not(:disabled){ background:var(--of-bg-alt); border-color:var(--of-text); }
.of-carousel__btn:focus-visible{ outline:3px solid var(--of-focus); outline-offset:2px; }
.of-carousel__btn:disabled{ opacity:.4; cursor:default; }
.of-carousel__btn .of-icon{ width:22px; height:22px; }
.of-carousel__dots{ display:flex; align-items:center; gap:2px; }
.of-carousel__dot{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.of-carousel__dot::before{ content:""; width:10px; height:10px; border-radius:var(--of-radius-pill); background:var(--of-border-strong); opacity:.45; transition:width var(--of-dur) var(--of-ease),opacity var(--of-dur) var(--of-ease),background var(--of-dur) var(--of-ease); }
.of-carousel__dot[aria-current="true"]::before{ width:24px; opacity:1; background:var(--of-brand); }
.of-carousel__dot:focus-visible{ outline:3px solid var(--of-focus); outline-offset:-6px; border-radius:12px; }

/* 10.3 Card de depoimento */
.of-tcard{ display:flex; flex-direction:column; gap:16px; height:100%; margin:0; padding:28px; background:var(--of-surface); border:1px solid var(--of-border); border-top:4px solid var(--of-seg,var(--of-brand)); border-radius:var(--of-radius-lg); }
.of-tcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.of-tcard__mark{ width:32px; height:32px; color:var(--of-seg,var(--of-brand)); opacity:.35; }
.of-tcard__text{ margin:0; font-family:var(--of-font-title); font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem); font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--of-text); }
.of-tcard__context{ font-size:.9375rem; line-height:1.5; color:var(--of-text-2); }
.of-tcard__author{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--of-border-soft); }
.of-tcard__avatar{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--of-tint,var(--of-tint-bar)); color:var(--of-seg-text,var(--of-brand)); font-weight:900; font-size:.9375rem; }
.of-tcard__name{ display:block; font-weight:800; color:var(--of-text); }
.of-tcard__role{ display:block; font-size:.875rem; color:var(--of-text-3); }

/* 10.4 Jornada "Como começar" */
.of-journey{ display:grid; gap:20px; margin:0 0 40px; padding:0; list-style:none; counter-reset:none; }
@media (min-width:900px){ .of-journey{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.of-journey__step{ position:relative; display:flex; flex-direction:column; gap:10px; padding:28px 24px 24px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:var(--of-radius-lg); }
.of-journey__num{ position:absolute; top:18px; right:22px; font-family:var(--of-font-title); font-size:2.75rem; font-weight:900; line-height:1; color:var(--of-border); }
.of-journey__icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--of-surface-tint-green); color:var(--of-action); }
.of-journey__icon .of-icon{ width:26px; height:26px; }
.of-journey__title{ font-size:var(--of-fs-h4); }
.of-journey__text{ color:var(--of-text-2); line-height:1.55; }
@media (min-width:900px){
  .of-journey__step:not(:last-child)::after{ content:""; position:absolute; top:50px; right:-24px; width:24px; height:2px; background:repeating-linear-gradient(90deg,var(--of-border-strong) 0 4px,transparent 4px 8px); }
}

/* 10.5 Outros módulos (cross-sell) */
.of-more{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .of-more{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .of-more{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.of-more > li{ display:flex; }
.of-more__card{ display:flex; flex-direction:column; gap:10px; width:100%; padding:22px; border-radius:var(--of-radius-lg); background:var(--of-surface); border:1px solid var(--of-border); border-left:4px solid var(--of-seg); color:var(--of-text); text-decoration:none; transition:transform var(--of-dur) var(--of-ease),box-shadow var(--of-dur) var(--of-ease); }
.of-more__card:hover{ transform:translateY(-2px); box-shadow:var(--of-shadow-2); color:var(--of-text); text-decoration:none; }
.of-more__card .of-card__icon{ width:44px; height:44px; border-radius:12px; }
.of-more__card .of-card__icon .of-icon{ width:24px; height:24px; }
.of-more__title{ font-family:var(--of-font-title); font-size:1.1875rem; font-weight:800; }
.of-more__text{ font-size:.9375rem; line-height:1.5; color:var(--of-text-2); }
.of-more__link{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; font-weight:800; color:var(--of-seg-text,var(--of-brand)); }
.of-more__link .of-icon{ width:18px; height:18px; }

/* 10.6 Menu "Soluções" (celular: lista no painel; desktop: dropdown) */
.of-nav__trigger{ display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; background:none; border-left:0; border-right:0; border-top:0; font:inherit; cursor:pointer; text-align:left; }
.of-nav__trigger .of-icon{ width:18px; height:18px; transition:transform var(--of-dur) var(--of-ease); }
.of-nav__trigger[aria-expanded="true"] .of-icon{ transform:rotate(180deg); }
.of-nav__sub{ display:none; margin:0; padding:4px 0 12px; list-style:none; }
.of-nav__item--menu.is-open .of-nav__sub{ display:grid; gap:4px; }
.of-nav__sublink{ display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 10px; border-radius:var(--of-radius-sm); color:var(--of-text); text-decoration:none; }
.of-nav__sublink:hover,.of-nav__sublink[aria-current="page"]{ background:var(--of-bg-alt); color:var(--of-text); text-decoration:none; }
.of-nav__subicon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:12px; background:var(--of-tint); color:var(--of-seg); }
.of-nav__subicon .of-icon{ width:22px; height:22px; }
.of-nav__subtext{ display:flex; flex-direction:column; min-width:0; }
.of-nav__subtitle{ font-weight:700; font-size:1rem; }
.of-nav__subdesc{ font-size:.8125rem; color:var(--of-text-3); }
@media (min-width:1280px){
  .of-nav__item--menu{ position:relative; }
  .of-nav__trigger{ width:auto; border:0; }
  .of-nav__trigger[data-current="true"]::after{ transform:scaleX(1); }
  .of-nav__sub{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:340px; padding:10px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:var(--of-radius-md); box-shadow:var(--of-shadow-3); z-index:60; }
  .of-nav__item--menu.is-open .of-nav__sub{ animation:of-fade var(--of-dur) var(--of-ease); }
}

/* 10.7 Mock da balança (LP Açougue) */
.of-scale-mock{ position:absolute; right:-6px; bottom:-28px; width:min(290px,78%); padding:16px 18px; border-radius:18px; background:var(--of-surface); border:1px solid var(--of-border); box-shadow:var(--of-shadow-3); font-size:.9375rem; }
@media (max-width:767px){ .of-scale-mock{ position:relative; right:auto; bottom:auto; width:auto; margin:-28px 12px 0; } }
.of-scale-mock__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-weight:800; }
.of-scale-mock__head .of-icon{ width:20px; height:20px; color:var(--of-seg-mercado); }
.of-scale-mock__tag{ font-size:.75rem; font-weight:700; color:var(--of-text-3); text-transform:uppercase; letter-spacing:.08em; }
.of-scale-mock__weight{ font-family:var(--of-font-title); font-size:2rem; font-weight:900; letter-spacing:-.02em; color:var(--of-text); line-height:1.1; }
.of-scale-mock__row{ display:flex; justify-content:space-between; gap:12px; color:var(--of-text-2); }
.of-scale-mock__total{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--of-border-strong); font-weight:800; color:var(--of-action); }
.of-showcase__stage--scale{ position:relative; }
@media (min-width:768px){ .of-showcase__stage--scale{ margin-bottom:36px; } }

/* 10.8 Lista de recursos em cards (LPs) */
.of-bento{ display:grid; gap:16px; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .of-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .of-bento{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
.of-bento > li{ display:flex; }
.of-bento__card{ display:flex; flex-direction:column; gap:10px; width:100%; padding:24px; border-radius:var(--of-radius-lg); background:var(--of-surface); border:1px solid var(--of-border); }
.of-bento__card--feature{ background:var(--of-tint,var(--of-surface)); border-color:transparent; }
@media (min-width:1024px){ .of-bento__card--wide{ grid-column:span 2; } .of-bento > li:has(.of-bento__card--wide){ grid-column:span 2; } }
.of-bento__card .of-card__icon{ width:48px; height:48px; border-radius:14px; }
.of-bento__card .of-card__icon .of-icon{ width:26px; height:26px; }
.of-bento__title{ font-size:var(--of-fs-h4); }
.of-bento__text{ color:var(--of-text-2); line-height:1.55; }
.of-bento__card--feature .of-card__icon{ background:var(--of-surface); }

/* 10.9 Faixa de números/compromissos */
.of-facts{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .of-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .of-facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.of-facts li{ display:flex; flex-direction:column; gap:4px; padding:20px; border-radius:var(--of-radius-md); background:var(--of-surface); border:1px solid var(--of-border); }
.of-facts strong{ font-family:var(--of-font-title); font-size:1.75rem; font-weight:900; line-height:1.1; color:var(--of-text); }
.of-facts span{ font-size:.9375rem; color:var(--of-text-2); }

/* 10.10 Página interna simples (sobre, contato, serviços) */
.of-hero--page{ padding-block:clamp(40px,2rem + 4vw,88px) clamp(32px,1.5rem + 3vw,64px); }
.of-hero--page .of-hero__copy{ max-width:820px; }
.of-contact-grid{ display:grid; gap:24px; }
@media (min-width:1024px){ .of-contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:40px; align-items:start; } }
.of-contact-list{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.of-contact-list a,.of-contact-list .of-contact-item{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--of-radius-md); background:var(--of-surface); border:1px solid var(--of-border); color:var(--of-text); text-decoration:none; font-weight:700; }
.of-contact-list a:hover{ border-color:var(--of-text); color:var(--of-text); text-decoration:none; }
.of-contact-list .of-icon{ width:24px; height:24px; color:var(--of-brand); flex:none; }
.of-contact-list small{ display:block; font-weight:500; color:var(--of-text-3); }
.of-plan-band--stack{ grid-template-columns:1fr !important; gap:20px; }
.of-plan-band--stack .of-plan-band__actions{ align-items:stretch; }
/* 10.11 Mock estático (LP Equipe) */
.of-mock-stack{ display:flex; flex-direction:column; gap:16px; width:100%; max-width:380px; margin-inline:auto; }
.of-scale-mock--static{ position:relative; right:auto; bottom:auto; width:auto; margin:0; }
.of-scale-mock--static:nth-child(2){ margin-left:clamp(0px,6vw,48px); margin-right:calc(-1 * clamp(0px,3vw,24px)); }
.of-scale-mock__ok{ display:inline-flex; align-items:center; gap:6px; color:var(--of-action); font-weight:800; }
.of-scale-mock__ok .of-icon{ width:18px; height:18px; }
.of-scale-mock__pending{ display:inline-flex; align-items:center; min-height:26px; padding:2px 10px; border-radius:var(--of-radius-pill); background:var(--of-tint-equipe); color:var(--of-seg-equipe-text); font-size:.8125rem; font-weight:800; }
.of-section--flush-top-sm{ padding-top:clamp(24px,2vw,40px); }
.of-contact-form-intro{ margin:8px 0 20px; }
@media (min-width:1024px){ .of-more:has(> li:nth-child(5)){ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:1024px){ .of-bento--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* backdrop-filter cria bloco de contenção e encolhia o painel fixo do menu no celular */
html.of-nav-open .of-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--of-bg); }
.of-nav__trigger{ font-weight:700; color:var(--of-text-nav); }
@media (min-width:1280px){ .of-nav__trigger{ font-weight:600; font-size:.90625rem; } }

/* 10.12 Celular: listas longas viram carrossel de arrastar (scroll-snap, com "espiada" do próximo card) */
@media (max-width:639px){
  .of-pains,.of-bento,.of-journey,.of-more{
    display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:84%;
    gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--of-gutter)); padding:4px var(--of-gutter) 12px; scroll-padding-inline:var(--of-gutter);
    scrollbar-width:none;
  }
  .of-pains::-webkit-scrollbar,.of-bento::-webkit-scrollbar,.of-journey::-webkit-scrollbar,.of-more::-webkit-scrollbar{ display:none; }
  .of-pains > li,.of-bento > li,.of-journey > li,.of-more > li{ scroll-snap-align:start; }
  .of-bento > li:has(.of-bento__card--wide){ grid-column:auto; }
  .of-journey{ margin-bottom:28px; }
  .of-swipe-hint{ display:flex; }
}
.of-swipe-hint{ display:none; align-items:center; gap:6px; margin-top:4px; font-size:.8125rem; font-weight:700; color:var(--of-text-3); }
.of-bridge .of-icon{ width:24px; height:24px; vertical-align:-5px; margin-right:6px; color:var(--of-brand); }

/* PRD-036: note under the plans (online signup vs. talk to us) */
.of-plans__note{ margin:16px 0 0; text-align:center; font-size:.9375rem; color:var(--of-text-2); }
.of-plans__note a{ color:var(--of-brand); font-weight:600; text-decoration:underline; }

/* PRD-036: payment trust seals under the plans */
.of-trust-pay{ display:grid; gap:14px; margin-top:20px; padding:18px 20px; border:1px solid var(--of-border); border-radius:var(--of-radius-md); background:var(--of-surface-tint-green); }
@media (min-width:900px){ .of-trust-pay{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; } }
.of-trust-pay__seal{ display:flex; gap:12px; align-items:flex-start; }
.of-trust-pay__seal > svg{ width:36px; height:36px; flex:none; color:var(--of-action); }
.of-trust-pay__seal strong{ display:block; color:var(--of-text); }
.of-trust-pay__seal span{ display:block; font-size:.875rem; line-height:1.5; color:var(--of-text-2); }
.of-trust-pay__items{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; padding:0; list-style:none; font-size:.875rem; font-weight:600; color:var(--of-text-2); }
.of-trust-pay__items li{ display:inline-flex; align-items:center; gap:6px; }
.of-trust-pay__items svg{ width:18px; height:18px; color:var(--of-action); }
.of-trust-pay__methods{ gap:6px !important; }
.of-trust-pay__methods span{ display:inline-flex; align-items:center; min-height:28px; padding:2px 10px; border:1px solid var(--of-border); border-radius:var(--of-radius-pill); background:var(--of-surface); font-size:.8125rem; font-weight:700; color:var(--of-text); }

/* PRD-036: payment + after-signup line under the hero trust list */
.of-after-signup{ margin-top:10px; max-width:34rem; font-size:.875rem; line-height:1.5; color:var(--of-text-3); }

/* Home mais calma (2026-10): títulos de seção menores e sem destaque colorido; cards de segmento neutros. */
.page-home .of-section .of-section__head h2{ font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height:1.12; letter-spacing:-.025em; }
.page-home .of-section .of-section__head h2 :where(.of-hl-brand, .of-hl-action, .of-hl-accent){ color:inherit; }
.page-home .of-segments--calm .of-segment-card{ border-top:1px solid var(--of-border); }
.page-home .of-segments--calm .of-segment-card:hover{ border-color:var(--of-text); }
.page-home .of-segments--calm .of-segment-card__link{ color:var(--of-text-nav); }