/*
 * TIVIT OneCloud — folha da landing page.
 *
 * Gerada a partir de tickets/SC-2608-02/landingonecloudv2.html.
 * Carregada só por template-onecloud.php.
 *
 * Todo o CSS de página é escopado em .oc-page porque o global.css do tema
 * aplica `html, body, * { font-family: Montserrat }` — um seletor universal
 * que venceria qualquer regra de elemento nossa.
 *
 * Ver tickets/SC-2608-02/especificacao-tecnica.md, §3.5 a §3.9.
 */

/* ---- design system: colors ---- */
:root{
/* Brand — extraídas do logo oficial TIVIT/Almaviva */
--tivit-red:#F20024;--tivit-red-press:#C10020;--tivit-red-dark:#8F0018;--tivit-red-tint:#FFE7EB;--tivit-red-tint-strong:#FFC2CC;
--almaviva-blue:#20438B;--almaviva-blue-press:#18336A;--almaviva-blue-dark:#0F2249;--almaviva-blue-tint:#E9EEF7;
/* Neutros */
--ink-900:#0E0E11;--ink-800:#17171B;--ink-700:#26262C;--ink-600:#3D3D45;--ink-500:#5C5C66;--ink-400:#82828E;--ink-300:#AFAFB8;--ink-200:#D7D7DD;--ink-100:#EDEDF1;--ink-050:#F6F6F8;--white:#FFFFFF;
/* Semânticos */
--success:#0E8F4E;--success-tint:#E4F5EC;--warning:#C97A00;--warning-tint:#FDF1DE;--danger:#F20024;--danger-tint:#FFE7EB;--info:#20438B;--info-tint:#E9EEF7;
/* Aliases de superfície e texto */
--surface-page:var(--white);--surface-muted:var(--ink-050);--surface-card:var(--white);--surface-inverse:var(--ink-900);--surface-brand:var(--tivit-red);--surface-brand-soft:var(--tivit-red-tint);
--text-title:var(--ink-900);--text-body:var(--ink-600);--text-muted:var(--ink-400);--text-on-brand:var(--white);--text-on-inverse:var(--white);--text-link:var(--tivit-red);--text-link-hover:var(--tivit-red-press);
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-300);--border-brand:var(--tivit-red);
--focus-ring:var(--tivit-red);
/* Overlays / gradientes de proteção */
--overlay-scrim:rgba(14,14,17,.55);
--overlay-protect:linear-gradient(180deg,rgba(14,14,17,0) 0%,rgba(14,14,17,.75) 100%); /* @kind other */
--overlay-protect-left:linear-gradient(90deg,rgba(14,14,17,.85) 0%,rgba(14,14,17,0) 70%); /* @kind other */
--gradient-brand:linear-gradient(120deg,#F20024 0%,#8F0018 100%); /* @kind other */
}
/* ---- design system: typography ---- */
:root{
--font-display:"Viga",system-ui,sans-serif;
--font-body:"Titillium Web",system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fs-display-1:64px;--fs-display-2:52px;--fs-h1:40px;--fs-h2:32px;--fs-h3:24px;--fs-h4:20px;--fs-lead:20px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:13px;--fs-stat:56px;
--lh-tight:1.08; /* @kind font */
--lh-heading:1.2; /* @kind font */
--lh-snug:1.35; /* @kind font */
--lh-body:1.6; /* @kind font */
--ls-display:-.01em; /* @kind font */
--ls-eyebrow:.14em; /* @kind font */
--ls-button:.02em; /* @kind font */
--type-hero:var(--fw-regular) var(--fs-display-1)/var(--lh-tight) var(--font-display); /* @kind font */
--type-section:var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
--type-card-title:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-body); /* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
--type-lead:var(--fw-light) var(--fs-lead)/var(--lh-snug) var(--font-body); /* @kind font */
--type-button:var(--fw-semibold) var(--fs-small)/1 var(--font-body); /* @kind font */
}
/* ---- design system: spacing ---- */
:root{
--sp-0:0; /* @kind spacing */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
--container-max:1240px;--container-gutter:24px;--grid-gap:24px;
--section-y:96px;--section-y-compact:64px;
--header-h:88px;
}
/* ---- design system: radii ---- */
:root{
--radius-0:0;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
--radius-button:var(--radius-pill);--radius-card:var(--radius-lg);--radius-input:var(--radius-sm);--radius-tag:var(--radius-pill);--radius-media:var(--radius-lg);
--border-width:1px;--border-width-strong:2px;
}
/* ---- design system: elevation ---- */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(14,14,17,.06);
--shadow-sm:0 2px 8px rgba(14,14,17,.08);
--shadow-md:0 8px 24px rgba(14,14,17,.10);
--shadow-lg:0 18px 48px rgba(14,14,17,.14);
--shadow-brand:0 12px 28px rgba(242,0,36,.28);
--shadow-inset-hairline:inset 0 -1px 0 var(--border-subtle);
--blur-glass:saturate(140%) blur(14px); /* @kind other */
--surface-glass:rgba(255,255,255,.72);
--surface-glass-inverse:rgba(14,14,17,.62);
/* Vidro — três intensidades. Ver a regra de uso e contraste no readme. */
--glass-blur-sm:saturate(120%) blur(8px); /* @kind other */
--glass-blur-md:saturate(140%) blur(16px); /* @kind other */
--glass-blur-lg:saturate(160%) blur(28px); /* @kind other */
--glass-border:1px solid rgba(255,255,255,.22); /* @kind other */
--glass-border-inverse:1px solid rgba(255,255,255,.10); /* @kind other */
}

/* Transparência reduzida: o vidro vira superfície opaca, mantendo a leitura. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --blur-glass:none;
    --glass-blur-sm:none;--glass-blur-md:none;--glass-blur-lg:none;
    --surface-glass:var(--white);
    --surface-glass-inverse:var(--ink-900);
  }
}
/* ---- design system: motion ---- */
:root{
/* ---------- curvas ---------- */
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-emphasis:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-spring:cubic-bezier(.22,1.2,.36,1); /* @kind other */

/* ---------- durações ---------- */
--dur-micro:90ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:400ms; /* @kind other */
--dur-reveal:600ms; /* @kind other */
--dur-cinematic:900ms; /* @kind other */

/* ---------- encadeamento ---------- */
--stagger-tight:40ms; /* @kind other */
--stagger-base:70ms; /* @kind other */
--stagger-loose:120ms; /* @kind other */

/* ---------- reveal no scroll ---------- */
--reveal-shift-sm:16px; /* @kind other */
--reveal-shift-md:32px; /* @kind other */
--reveal-shift-lg:56px; /* @kind other */

/* ---------- parallax (fator de profundidade) ---------- */
--parallax-subtle:.04; /* @kind other */
--parallax-base:.08; /* @kind other */
--parallax-max:.15; /* @kind other */

/* ---------- transições compostas ---------- */
--transition-base:all var(--dur-base) var(--ease-standard); /* @kind other */
--transition-emphasis:all var(--dur-slow) var(--ease-emphasis); /* @kind other */
--transition-spring:transform var(--dur-slow) var(--ease-spring); /* @kind other */

/* ---------- estados ---------- */
--hover-lift:translateY(-2px); /* @kind other */
--hover-lift-lg:translateY(-6px); /* @kind other */
--hover-scale:1.02; /* @kind other */
--press-scale:.98; /* @kind other */
}

/* ---------------------------------------------------------------------------
   Movimento reduzido — em degraus, não tudo-ou-nada.
   Some o que desloca no espaço (parallax, deslocamento de reveal, spring);
   ficam os fades de opacidade e as trocas de cor, que orientam sem enjoar.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  :root{
    --ease-spring:var(--ease-standard);
    --dur-slow:var(--dur-base);
    --dur-reveal:var(--dur-base);
    --dur-cinematic:var(--dur-base);
    --stagger-tight:0ms;
    --stagger-base:0ms;
    --stagger-loose:0ms;
    --reveal-shift-sm:0px;
    --reveal-shift-md:0px;
    --reveal-shift-lg:0px;
    --parallax-subtle:0;
    --parallax-base:0;
    --parallax-max:0;
    --hover-lift:none;
    --hover-lift-lg:none;
    --hover-scale:1;
    --transition-spring:none;
  }
}

/* =================== CSS DE PÁGINA =================== */

/* ===========================================================================
   CSS de página. Só layout e composição — cor, tipo, raio, sombra, espaço e
   movimento vêm dos tokens do design system.
   =========================================================================== */
:root{
  /* Único valor fora da escala do DS: a escala tipográfica do sistema termina
     em --fs-caption (12px), e a cromo dos mockups de produto precisa descer
     mais para caber. Restrito ao interior dos mockups. */
  --fs-micro:11px;

  /* ---- D6: tipografia de produção substitui a do design system ----
     tivit.com renderiza Montserrat + Poppins; Viga e Titillium estão
     declaradas no tema mas nenhuma regra as aplica. Só estes tokens mudam —
     cor, espaço, raio, sombra e movimento seguem vindo do DS. */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-lead:'Poppins',system-ui,sans-serif;
  --fs-display-1:48px;--fs-display-2:40px;
  --fs-h1:40px;--fs-h2:40px;--fs-h3:24px;--fs-h4:20px;
  --fs-lead:18px;--fs-body:16px;
  --lh-tight:1.2;--lh-heading:1.2;--lh-body:1.5;
  --ls-display:normal;
  /* O shorthand `font:` do --type-lead reescreve a família, então o lead em
     Poppins tem de ser resolvido no token, não numa regra à parte. */
  --type-lead:var(--fw-light) var(--fs-lead)/var(--lh-body) var(--font-lead);

  /* medidas do header do site, medidas em produção */
  --site-header-h:60px;
  --product-bar-h:47px;
  /* Valor exato da barra em produção. O --tivit-red-dark do DS é #8F0018 —
     seis unidades ao lado; aqui a fidelidade ao site vale mais que o token. */
  --product-bar-bg:#990017;
  --product-bar-hover:#E50022;
}
.oc-page h1, .oc-page h2, .oc-page h3, .oc-page h4{font-weight:var(--fw-semibold)}

/* ---------- estrutura ---------- */
.oc-page html{scroll-behavior:smooth}
.oc-page img, .oc-page svg{display:block}
.oc-page .oc-wrap{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-gutter)}
.oc-page section{padding-block:var(--section-y)}
.oc-page [id]{scroll-margin-top:calc(var(--site-header-h) + var(--product-bar-h))}  /* header do site (60px) + barra do produto (47px) */
.oc-page .oc-sec-head{max-width:640px;margin-bottom:var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-4)}
.oc-page .oc-sec-head h2{font:var(--type-section);color:var(--text-title)}
.oc-page .oc-sec-head p{font:var(--type-lead);color:var(--text-body)}

/* ---------- eyebrow (DS: caixa alta, tracking .14em; sem o filete de 28px do DS, por pedido) -- */
.oc-page .oc-eyebrow{display:flex;align-items:center;gap:var(--sp-3);font:var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tivit-red)}
.oc-page .oc-eyebrow.oc-on-inverse{color:var(--white)}

/* ---------- ícones (wrapper Icon do DS: grade 24, traço 1.8, currentColor) -- */
.oc-page .oc-ico-svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oc-page .oc-ico-sm{width:18px;height:18px}
.oc-page .oc-ico-xs{width:14px;height:14px;stroke-width:2.2}

/* ---------- botões (DS: pílula total; medidas de components/core/Button.jsx) */
.oc-page .oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font:var(--type-button);letter-spacing:var(--ls-button);border-radius:var(--radius-pill);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;transition:var(--transition-base);padding:13px 28px}
.oc-page .oc-btn-lg{padding:17px 38px;font-size:var(--fs-body)}
.oc-page .oc-btn-sm{padding:8px 18px;font-size:var(--fs-caption)}
.oc-page .oc-btn-primary{background:var(--tivit-red);border-color:var(--tivit-red);color:var(--text-on-brand)}
.oc-page .oc-btn-primary:hover{background:var(--tivit-red-press);border-color:var(--tivit-red-press);transform:var(--hover-lift);box-shadow:var(--shadow-brand);color:var(--text-on-brand)}
.oc-page .oc-btn-secondary{background:transparent;border-color:var(--tivit-red);color:var(--tivit-red)}
.oc-page .oc-btn-secondary:hover{background:var(--tivit-red);color:var(--text-on-brand)}
.oc-page .oc-btn-light{background:var(--white);border-color:var(--white);color:var(--tivit-red)}
.oc-page .oc-btn-light:hover{background:var(--tivit-red-tint);color:var(--tivit-red)}
.oc-page .oc-btn:active{transform:scale(var(--press-scale))}

/* ---------- barra do produto (réplica do .custom-menu.bg-red) ---------- */
/* #990017, 47px, itens em Poppins 400 16px brancos, hover #E50022 + sublinhado. */
.oc-page .oc-product-bar{position:sticky;top:var(--site-header-h);z-index:29;min-height:var(--product-bar-h);background:var(--product-bar-bg)}
.oc-page .oc-product-bar .oc-wrap{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--product-bar-h)}
/* O logo do OneCloud entra no lugar do texto "TIVIT OneCloud".
   O arquivo é escuro; a inversão o torna branco, como faz o variant="inverse" do DS. */
.oc-page .oc-product-brand img{height:26px;width:auto;filter:brightness(0) invert(1)}
.oc-page .oc-product-nav{display:flex;align-items:center;margin-left:auto;flex-wrap:wrap}
.oc-page .oc-product-nav a{font:var(--fw-regular) var(--fs-body)/var(--product-bar-h) var(--font-lead);color:var(--white);padding-inline:var(--sp-3);transition:background var(--dur-base) var(--ease-standard)}
.oc-page .oc-product-nav a:hover{background:var(--product-bar-hover);color:var(--white);text-decoration:underline}
.oc-page .oc-product-bar .oc-btn{margin-left:var(--sp-3);flex:none}

/* ---------- hero ---------- *//* ---------- hero ---------- */
/* DS: aberturas são full-bleed com vídeo em loop mudo + scrim direcional.
   Sem o vídeo, fica a superfície inversa plana e o scrim de proteção —
   nunca um gradiente decorativo. Em produção, entrar com o <video>. */
.oc-page .oc-hero{position:relative;background:var(--surface-inverse);padding-block:var(--sp-24);overflow:hidden}
.oc-page .oc-hero::before{content:"";position:absolute;inset:0;background:var(--overlay-protect-left)}
.oc-page .oc-hero .oc-wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center}
.oc-page .oc-hero-copy{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
.oc-page .oc-hero h1{font:var(--fw-regular) var(--fs-display-2)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-display);color:var(--white);max-width:820px}
.oc-page .oc-hero h1 em{font-style:normal;color:var(--tivit-red-tint-strong)}
.oc-page .oc-hero .oc-sub{font:var(--type-lead);color:rgba(255,255,255,.85);max-width:620px}
.oc-page .oc-hero-ctas{display:flex;gap:var(--sp-3);margin-top:var(--sp-2);flex-wrap:wrap}
.oc-page .oc-trust-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.oc-page .oc-chip{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--fw-regular) var(--fs-caption)/1.4 var(--font-body);color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);border:var(--border-width) solid rgba(255,255,255,.14);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill)}
.oc-page .oc-chip .oc-ico-svg{color:var(--success);flex:none}

/* ---------- mockup: console Agentic Ops ---------- */
.oc-page .oc-mock{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);overflow:hidden}
.oc-page .oc-mock-bar{display:flex;align-items:center;gap:var(--sp-2);background:var(--surface-muted);border-bottom:var(--border-width) solid var(--border-subtle);padding:var(--sp-3) var(--sp-4)}
.oc-page .oc-mock-bar .oc-b{width:var(--sp-2);height:var(--sp-2);border-radius:var(--radius-pill);background:var(--ink-200);flex:none}
.oc-page .oc-mock-bar .oc-b:first-child{background:var(--tivit-red-tint-strong)}
.oc-page .oc-mock-bar .oc-t{margin-left:var(--sp-2);font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.oc-page .oc-chat{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.oc-page .oc-msg{max-width:85%;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);font:var(--fw-regular) var(--fs-caption)/1.55 var(--font-body)}
.oc-page .oc-msg.oc-user{align-self:flex-end;background:var(--ink-900);color:var(--white)}
.oc-page .oc-msg.oc-bot{align-self:flex-start;background:var(--surface-muted);border:var(--border-width) solid var(--border-subtle);color:var(--text-body)}
.oc-page .oc-msg.oc-bot b{color:var(--text-title);font-weight:var(--fw-semibold)}
.oc-page .oc-msg.oc-bot .oc-agent{display:flex;align-items:center;gap:var(--sp-2);font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);color:var(--tivit-red);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);margin-bottom:var(--sp-2)}
.oc-page .oc-msg.oc-bot .oc-agent::before{content:"";width:var(--sp-2);height:var(--sp-2);border-radius:var(--radius-pill);background:currentColor;flex:none}
.oc-page .oc-steps{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-2)}
.oc-page .oc-step{display:flex;align-items:flex-start;gap:var(--sp-2);font:var(--fw-regular) var(--fs-micro)/1.5 var(--font-body);color:var(--text-muted)}
.oc-page .oc-step .oc-ico-xs{color:var(--success);flex:none;margin-top:2px}
.oc-page .oc-step.oc-run .oc-ico-xs{color:var(--info)}
/* Gate de aprovação: o vermelho aqui é ênfase de marca, não semântica de
   erro — o DS pede que alerta de erro não fique ao lado de um CTA primário. */
.oc-page .oc-approval{align-self:stretch;border:var(--border-width-strong) solid var(--tivit-red);border-radius:var(--radius-card);padding:var(--sp-4);background:var(--tivit-red-tint)}
.oc-page .oc-approval .oc-a-title{display:flex;align-items:center;gap:var(--sp-2);font:var(--type-card-title);font-size:var(--fs-small);color:var(--text-title);margin-bottom:var(--sp-3)}
.oc-page .oc-approval .oc-a-title .oc-ico-svg{color:var(--tivit-red);flex:none}
.oc-page .oc-params{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4);font:var(--fw-regular) var(--fs-micro)/1.4 var(--font-body);margin-bottom:var(--sp-3)}
.oc-page .oc-params div{background:var(--white);border:var(--border-width) dashed var(--border-default);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-2);color:var(--text-body)}
.oc-page .oc-params b{color:var(--text-title);font-weight:var(--fw-semibold)}
.oc-page .oc-a-actions{display:flex;gap:var(--sp-2);align-items:center}
.oc-page .oc-a-note{font:var(--fw-regular) var(--fs-micro)/1.4 var(--font-body);color:var(--text-body);margin-top:var(--sp-2)}
.oc-page .oc-mock-cap{font:var(--fw-regular) var(--fs-micro)/1.4 var(--font-body);color:var(--text-muted);padding:var(--sp-3) var(--sp-4);border-top:var(--border-width) solid var(--border-subtle);background:var(--surface-muted)}

/* ---------- números (DS StatBlock: valor em Viga vermelho) ---------- */
.oc-page .oc-numbers{background:var(--surface-page);border-bottom:var(--border-width) solid var(--border-subtle);padding-block:var(--sp-12)}
.oc-page .oc-numbers .oc-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.oc-page .oc-num{display:flex;flex-direction:column;gap:var(--sp-2)}
.oc-page .oc-num .oc-v{font-family:var(--font-display);font-size:var(--fs-stat);line-height:1;color:var(--tivit-red)}
.oc-page .oc-num p{font:var(--fw-regular) var(--fs-small)/var(--lh-snug) var(--font-body);color:var(--text-body);max-width:180px}

/* ---------- cards (DS Card: raio 16, hairline, xs → md no hover) ---------- */
.oc-page .oc-card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-6);box-shadow:var(--shadow-xs);transition:var(--transition-base)}
.oc-page .oc-card:hover{box-shadow:var(--shadow-md);transform:var(--hover-lift)}
.oc-page .oc-card .oc-ico{width:44px;height:44px;border-radius:var(--radius-md);background:var(--tivit-red-tint);color:var(--tivit-red);display:grid;place-items:center;flex:none}
.oc-page .oc-card h3{font:var(--type-card-title);font-family:var(--font-body);letter-spacing:0;color:var(--text-title)}
.oc-page .oc-card p{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.oc-page .oc-card .oc-tag{align-self:flex-start;margin-top:auto;font:var(--fw-semibold) var(--fs-caption)/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--tivit-red);background:var(--tivit-red-tint);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-tag)}
.oc-page .oc-ai{background:var(--surface-muted)}
.oc-page .oc-ai-grid, .oc-page .oc-ent-grid{display:grid;gap:var(--grid-gap)}
.oc-page .oc-ai-grid{grid-template-columns:repeat(4,1fr)}
.oc-page .oc-ent-grid{grid-template-columns:repeat(3,1fr)}

/* ---------- pilares ---------- */
.oc-page .oc-pillar .oc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.oc-page .oc-pillar.oc-alt{background:var(--surface-muted)}
.oc-page .oc-pillar.oc-alt .oc-wrap{direction:rtl}
.oc-page .oc-pillar.oc-alt .oc-wrap>*{direction:ltr}
.oc-page .oc-pillar-copy{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.oc-page .oc-pillar h2{font:var(--type-section);color:var(--text-title)}
.oc-page .oc-pillar .oc-lead{font:var(--type-lead);color:var(--text-body)}
.oc-page .oc-feat{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);padding:0;margin:0}
.oc-page .oc-feat li{display:flex;gap:var(--sp-3);font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.oc-page .oc-feat li::before{content:"";flex:0 0 var(--sp-2);height:var(--sp-2);border-radius:2px;background:var(--tivit-red);margin-top:var(--sp-2)}
.oc-page .oc-feat b{color:var(--text-title);font-weight:var(--fw-semibold)}
.oc-page .oc-pillar .oc-btn{margin-top:var(--sp-3)}

/* ---------- painéis de mockup ---------- */
.oc-page .oc-panel{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);overflow:hidden}
.oc-page .oc-panel-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:var(--border-width) solid var(--border-subtle);background:var(--surface-muted)}
.oc-page .oc-panel-hd .oc-ttl{font:var(--fw-semibold) var(--fs-small)/1 var(--font-body);color:var(--text-title)}
.oc-page .oc-panel-hd .oc-pill{font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);color:var(--text-body);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3)}
.oc-page .oc-panel-bd{padding:var(--sp-5)}
.oc-page .oc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}
.oc-page .oc-kpi{border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-3)}
.oc-page .oc-kpi .oc-v{font-family:var(--font-display);font-size:var(--fs-h4);line-height:1.1;color:var(--text-title)}
.oc-page .oc-kpi .oc-l{font:var(--fw-regular) var(--fs-micro)/1.35 var(--font-body);color:var(--text-body);margin-top:var(--sp-1)}
.oc-page .oc-kpi .oc-v.oc-err{color:var(--danger)} .oc-kpi .oc-v.oc-warn{color:var(--warning)} .oc-kpi .oc-v.oc-ok{color:var(--success)}
.oc-page .oc-legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font:var(--fw-regular) var(--fs-micro)/1 var(--font-body);color:var(--text-body)}
.oc-page .oc-legend span{display:inline-flex;align-items:center;gap:var(--sp-1)}
.oc-page .oc-legend i{width:var(--sp-2);height:var(--sp-2);border-radius:2px;flex:none}
.oc-page .oc-bars{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4)}
.oc-page .oc-brow{display:grid;grid-template-columns:140px 1fr var(--sp-10);gap:var(--sp-3);align-items:center;font:var(--fw-regular) var(--fs-micro)/1 var(--font-body)}
.oc-page .oc-brow .oc-bl{color:var(--text-body)}
.oc-page .oc-brow .oc-track{height:var(--sp-2);background:var(--ink-100);border-radius:var(--radius-pill);overflow:hidden}
.oc-page .oc-brow .oc-track{display:block}
.oc-page .oc-brow .oc-fill{display:block;height:100%;border-radius:var(--radius-pill);background:var(--tivit-red)}  /* display:block — herdado do V1 como <span> inline, a largura % nunca era aplicada e as 5 barras renderizavam com 0px */
.oc-page .oc-brow .oc-val{text-align:right;font-weight:var(--fw-semibold);color:var(--text-title)}
.oc-page .oc-alertbox{display:flex;gap:var(--sp-3);align-items:flex-start;border:var(--border-width) solid var(--border-subtle);border-left:var(--sp-1) solid var(--tivit-red);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4);background:var(--surface-card)}
.oc-page .oc-alertbox .oc-ico-svg{color:var(--tivit-red);flex:none}
.oc-page .oc-alertbox .oc-tx{font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-body);color:var(--text-body)}
.oc-page .oc-alertbox .oc-tx b{color:var(--text-title);font-weight:var(--fw-semibold)}
/* pipeline */
/* Uma linha sempre. Com flex-wrap:wrap o 5º nó caía para baixo e sobrava uma
   seta apontando para o vazio. Os nós dividem o que houver (flex:1 1 0) e
   min-width:0 deixa o texto quebrar dentro do nó em vez de empurrar a linha. */
.oc-page .oc-pipe{display:flex;align-items:stretch;flex-wrap:nowrap;padding-block:var(--sp-2)}
.oc-page .oc-node{border:var(--border-width-strong) solid var(--border-default);border-radius:var(--radius-md);padding:var(--sp-2);background:var(--surface-card);flex:1 1 0;min-width:0}
.oc-page .oc-node b{display:block;font:var(--fw-semibold) var(--fs-micro)/1.3 var(--font-body);color:var(--text-title)}
.oc-page .oc-node span{font:var(--fw-regular) var(--fs-micro)/1.3 var(--font-body);color:var(--text-muted)}
.oc-page .oc-node.oc-start{border-color:var(--success)} .oc-node.oc-act{border-color:var(--tivit-red)} .oc-node.oc-end{border-color:var(--info)}
.oc-page .oc-link{flex:0 0 var(--sp-3);align-self:center;height:var(--border-width-strong);background:var(--border-default);position:relative}
.oc-page .oc-link::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--border-default)}
/* tabela de inventário */
.oc-page .oc-tbl{width:100%;border-collapse:collapse;font:var(--fw-regular) var(--fs-micro)/1.4 var(--font-body)}
.oc-page .oc-tbl th{text-align:left;font-weight:var(--fw-semibold);color:var(--text-body);padding:var(--sp-2) var(--sp-3);border-bottom:var(--border-width) solid var(--border-default);background:var(--surface-muted)}
.oc-page .oc-tbl td{padding:var(--sp-2) var(--sp-3);border-bottom:var(--border-width) solid var(--border-subtle);color:var(--text-body)}
.oc-page .oc-st{display:inline-block;font:var(--fw-semibold) var(--fs-micro)/1.3 var(--font-body);border-radius:var(--radius-pill);padding:2px var(--sp-2)}
.oc-page .oc-st.oc-ok{background:var(--success-tint);color:var(--success)}
.oc-page .oc-st.oc-warn{background:var(--warning-tint);color:var(--warning)}
.oc-page .oc-st.oc-err{background:var(--danger-tint);color:var(--danger)}
.oc-page .oc-mini-chat{margin-top:var(--sp-4);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-3);background:var(--surface-muted);display:flex;flex-direction:column;gap:var(--sp-1)}
.oc-page .oc-mini-chat .oc-who{font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);color:var(--tivit-red);text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.oc-page .oc-mini-chat .oc-q{font:var(--fw-semibold) var(--fs-caption)/1.5 var(--font-body);color:var(--text-title)}
.oc-page .oc-mini-chat .oc-a{font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-body);color:var(--text-body)}

/* ---------- multicloud (faixa institucional escura) ---------- */
.oc-page .oc-clouds{background:var(--surface-inverse);padding-block:var(--section-y-compact);text-align:center}
.oc-page .oc-clouds .oc-sec-head{max-width:760px;margin-inline:auto;align-items:center;text-align:center}
.oc-page .oc-clouds h2{font:var(--type-section);color:var(--white)}
.oc-page .oc-clouds .oc-sub{font:var(--type-lead);color:rgba(255,255,255,.82)}
.oc-page .oc-cloud-row{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.oc-page .oc-cloud-chip{border:var(--border-width) solid rgba(255,255,255,.2);border-radius:var(--radius-card);padding:var(--sp-4) var(--sp-6);background:rgba(255,255,255,.04);font:var(--fw-semibold) var(--fs-small)/1.3 var(--font-body);color:var(--white)}
.oc-page .oc-cloud-chip small{display:block;font:var(--fw-regular) var(--fs-micro)/1.3 var(--font-body);color:rgba(255,255,255,.65);margin-top:var(--sp-1)}

/* ---------- enterprise ---------- */
.oc-page .oc-badges{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-8)}
.oc-page .oc-badge{border:var(--border-width) solid var(--border-default);border-radius:var(--radius-pill);padding:var(--sp-3) var(--sp-5);font:var(--fw-semibold) var(--fs-small)/1 var(--font-body);color:var(--text-title)}

/* ---------- trial ---------- */
.oc-page .oc-trial{background:var(--surface-muted)}
.oc-page .oc-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);counter-reset:step}
.oc-page .oc-step-card{position:relative;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-8);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--sp-2)}
.oc-page .oc-step-card::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:var(--sp-5);right:var(--sp-6);font-family:var(--font-display);font-size:var(--fs-h1);line-height:1;color:var(--tivit-red-tint)}
/* Reserva espaço pro número decorativo (::before, absoluto no canto) não
   sobrepor o título quando o texto é mais longo, como em "Receba os
   primeiros insights". */
.oc-page .oc-step-card h3{font:var(--type-card-title);font-family:var(--font-body);letter-spacing:0;color:var(--text-title);padding-right:var(--sp-12)}
.oc-page .oc-step-card p{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.oc-page .oc-trial-cta{text-align:center;margin-top:var(--sp-10)}

/* ---------- CTA final ---------- */
.oc-page .oc-final{background:var(--surface-inverse)}
.oc-page .oc-final .oc-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-16);align-items:center}
.oc-page .oc-final-copy{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.oc-page .oc-final h2{font:var(--type-section);color:var(--white)}
.oc-page .oc-final p{font:var(--type-lead);color:rgba(255,255,255,.85)}
/* Coluna que recebe o embed do RD Station. O RD Station não define fundo
   próprio para o formulário — sem este cartão branco, os campos ficam
   soltos sobre o fundo escuro da seção. */
.oc-page .oc-form{min-width:0;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--sp-8)}

/* ---------- footer (DS Footer: rodapé claro, não escuro) ---------- */

/* ===========================================================================
   MOVIMENTO — nível `expressive` do design system
   Landing page de produto: repertório completo (reveal encadeado, hover
   ampliado, parallax leve, spring no retorno do press). Todos os valores vêm
   de ds/tokens/motion.css, que já zera deslocamento, stagger e parallax sob
   prefers-reduced-motion — o comportamento reduzido é herdado, não recodificado.
   =========================================================================== */

/* Reveal só existe quando há JS. Sem a classe .oc-js o conteúdo nasce visível —
   nada de página em branco se o script não rodar. */
.oc-page.oc-js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-shift-md));
  transition:opacity var(--dur-reveal) var(--ease-emphasis),
             transform var(--dur-reveal) var(--ease-emphasis);
  transition-delay:calc(var(--i,0) * var(--stagger-base));
  will-change:opacity,transform}
.oc-page.oc-js [data-reveal].oc-is-in{opacity:1;transform:none;will-change:auto}

/* Parallax do mockup do herói — profundidade sutil, teto do DS bem abaixo */
.oc-page .oc-hero .oc-mock{transform:translate3d(0,var(--py,0),0)}

/* Hover expressivo: card e mídia podem escalar; botão nunca. */
.oc-page .oc-card:hover, .oc-page .oc-step-card:hover{
  transform:var(--hover-lift-lg) scale(var(--hover-scale));
  box-shadow:var(--shadow-md)}
.oc-page .oc-card, .oc-page .oc-step-card{transition:var(--transition-emphasis)}
.oc-page .oc-panel:hover, .oc-page .oc-mock:hover{box-shadow:var(--shadow-lg),0 0 0 1px var(--border-default)}

/* Spring no retorno do press — o botão volta com vida, sem sair do lugar */
.oc-page .oc-btn{transition:background var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-slow) var(--ease-spring)}
.oc-page .oc-btn:active{transform:scale(var(--press-scale));transition:transform var(--dur-micro) var(--ease-standard)}

/* Ícones dos cards acompanham o hover do card */
.oc-page .oc-card .oc-ico{transition:transform var(--dur-base) var(--ease-spring)}
.oc-page .oc-card:hover .oc-ico{transform:scale(1.08) rotate(-3deg)}


/* ---------- mockups: rolagem dentro do próprio card (D7 / §3.7) ---------- */
/* São telas de produto: reorganizá-las para mobile destruiria a leitura que as
   justifica. Cada uma guarda largura mínima e rola dentro do container; a
   página nunca rola na horizontal. overscroll-behavior impede que o gesto
   dentro do card sequestre a rolagem vertical. */
/* No desktop os painéis cabem: sem contexto de overflow, não há como
   nascer barra. A rolagem entra só onde é necessária, abaixo de 992px. */
@media (max-width:992px){
  .oc-page .oc-scroll{overflow:visible}
}

/* min-width:0 é obrigatório: como item de grid o padrão é `auto`, que impede
   encolher abaixo do conteúdo — a tabela empurrava o cartão e a página inteira. */
.oc-page .oc-scroll,.oc-page .oc-panel,.oc-page .oc-panel-bd,.oc-page .oc-pillar .oc-wrap>*{min-width:0}
.oc-page .oc-scroll::-webkit-scrollbar{height:6px}
.oc-page .oc-scroll::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-pill)}
.oc-page .mock-wrap{--oc-min:320px}
.oc-page .panel-safe{--oc-min:380px}
.oc-page .panel-finops{--oc-min:360px}
.oc-page .panel-automation{--oc-min:540px}
.oc-page .panel-governance{--oc-min:420px}
/* Sombra na aresta direita avisa que há mais conteúdo */


/* ---------- responsivo ---------- */
@media (max-width:992px){
  /* Alvos de toque: mínimo 44px nos controles do produto (§3.7). Vale só para
     controle, não para link em meio a texto corrido. */
  .oc-page .oc-btn,.oc-page .oc-product-nav a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

.oc-page .oc-hero .oc-wrap, .oc-page .oc-pillar .oc-wrap, .oc-page .oc-final .oc-wrap{grid-template-columns:1fr;gap:var(--sp-10)}
.oc-page .oc-pillar.oc-alt .oc-wrap{direction:ltr}
.oc-page .oc-numbers .oc-wrap, .oc-page .oc-ai-grid{grid-template-columns:repeat(2,1fr)}
.oc-page .oc-ent-grid, .oc-page .oc-steps-grid{grid-template-columns:1fr}
.oc-page .oc-site-nav{display:none}
.oc-page section{padding-block:var(--section-y-compact)}
.oc-page .oc-hero h1{font-size:var(--fs-h1)}
}
@media (max-width:768px){
  /* O alvo de toque de 44px não cabe com folga numa barra de 47px — o botão
     ocupava 94% da altura. A barra cresce para 64px e ganha respiro; o alvo
     continua nos 44px que a acessibilidade pede. */

  /* ---- painéis cabem na coluna, em vez de rolar ----
     A rolagem interna (D7) foi revertida: na prática o cartão que rola por
     dentro lê como conteúdo cortado. Aqui cada painel reflowa. */
  .oc-page .oc-panel-bd{padding:var(--sp-3)}
  .oc-page .oc-kpis{grid-template-columns:1fr;gap:var(--sp-2)}
  .oc-page .oc-brow{grid-template-columns:1fr;gap:var(--sp-1);row-gap:2px}
  .oc-page .oc-brow .oc-val{grid-row:1;justify-self:end;margin-top:-18px}
  .oc-page .oc-panel-hd{flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3)}

  /* pipeline: 5 nós não cabem lado a lado em 327px — vira vertical */
  .oc-page .oc-pipe{flex-direction:column;align-items:stretch;gap:0}
  .oc-page .oc-node{flex:none;width:100%}
  .oc-page .oc-link{flex:0 0 var(--sp-3);align-self:center;width:2px;height:var(--sp-4);margin-inline:auto}
  .oc-page .oc-link::after{right:auto;top:auto;left:-3px;bottom:-1px;
    border-left-color:transparent;border-top-color:var(--border-default)}

  /* a tabela é o único caso que não reflowa: rola sozinha, não o cartão */
  .oc-page .oc-tbl{display:block;overflow-x:auto;white-space:nowrap}

  .oc-page .oc-product-bar{min-height:64px}
  .oc-page .oc-product-bar .oc-wrap{min-height:64px;padding-block:var(--sp-2)}

  /* Piso tipográfico: a escala do DS termina em 12px e os mockups desciam a 11.
     Em tela pequena, 11px é ilegível — §3.7. */
  :root{--fs-micro:12px}
  /* Duas barras fixas comeriam altura demais numa tela pequena: só o header do
     site permanece; a barra do produto rola com a página. */
.oc-page .oc-product-bar{position:static}
.oc-page [id]{scroll-margin-top:var(--site-header-h)}
.oc-page .oc-product-nav{display:none}
}
@media (max-width:576px){
.oc-page .oc-numbers .oc-wrap, .oc-page .oc-ai-grid{grid-template-columns:1fr}
.oc-page .oc-params, .oc-page .oc-kpis{grid-template-columns:1fr}
.oc-page .oc-brow{grid-template-columns:110px 1fr 36px}
.oc-page .oc-topbar .oc-btn{display:none}
}

/* ---------------------------------------------------------------------------
   Header do tema nesta página — só no desktop (≥1200px, breakpoint xl do
   Bootstrap: é onde o nav de texto substitui o hambúrguer, ver
   .d-xl-none/.mobile no header.php).

   O tema adiciona .sticky ao rolar (assets/js/tivit.js:945), e o style.css
   responde com `animation: fadeInDown 1s`, `transition: all 1s` e
   `background-color:#990017`. Efeito: o menu anima e fica vermelho — o mesmo
   vermelho da barra de produto logo abaixo, formando um bloco de 107px.

   Aqui o header fica estável: sem animação, sem transição, sem troca de cor.
   O escopo é a classe de template no <body>, então nenhuma outra página do
   site é afetada — o comportamento do tema segue intacto onde já existia.

   Restrito a desktop porque o problema que motivou é exclusivamente dele: as
   duas barras vermelhas fixas (nav do tema + barra de produto do OneCloud)
   só colidem lado a lado no nav de texto. No mobile, só a barra do tema fica
   fixa (a barra de produto rola com a página — ver .oc-product-bar acima),
   então não existe bloco duplo pra evitar; forçar fundo branco lá só deixava
   o ícone do menu (hamburguer-white.svg, branco por padrão) invisível sobre
   fundo branco. Sem a regra, o mobile mantém o vermelho e o branco do tema,
   que já tem contraste correto. */
@media (min-width:1200px){
body.page-template-template-onecloud .nav-header-new,
body.page-template-template-onecloud .nav-header-new.sticky{
  animation:none;
  transition:none;
  background-color:var(--white);
  box-shadow:none}

/* Ícone branco (hamburguer-white.svg) sobre o fundo branco forçado acima —
   sem isso ficaria invisível também no desktop, se algum layout aqui vier a
   depender do ícone em vez do nav de texto. */
body.page-template-template-onecloud .nav-header-new .navbar-toggler-icon{
  filter:invert(1)}
}