/* =========================================================================
   Infinity System by Refrisat — Landing Page
   Design system + layout
   ========================================================================= */

/* ---------- Fontes (self-hosted: sem dependência de CDN, aderente à LGPD) */
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens --------------------------------------------------- */
:root {
  /* Marca */
  --navy-950:#04101f;
  --navy-900:#071a33;
  --navy-800:#0b2647;
  --navy-700:#103763;
  --blue-700:#0a5ba4;
  --blue-600:#076ab3;   /* azul institucional Refrisat, extraído do logo vetorial */
  --blue-500:#1b8fe0;
  --cyan-500:#06b7e9;
  --cyan-400:#33cbf0;
  --cyan-200:#a9e6f8;
  --cyan-050:#eefaff;
  --green-700:#12703f;
  --green-500:#1c9c58;
  --violet-600:#6b4bb0;
  --violet-500:#7d5cc6;

  /* Paleta institucional HBR Holding Brasil
     (manual da marca — LOGOS/Holding/MANUAL POCKET_CURVAS.pdf).
     Usada apenas na faixa do grupo; o restante da página segue o azul
     Refrisat. */
  --hbr-navy:#003c64;     /* Pantone 2965C */
  --hbr-gray:#5f5f64;     /* Pantone 425C  */
  --hbr-steel:#5f87a0;    /* Pantone 5415C */
  --hbr-wash:#ecf1f4;     /* 5415C a 12% sobre branco */

  /* Superfícies e texto */
  --ink:#0b1c33;          /* texto principal            AA sobre branco */
  --ink-2:#3d5068;        /* texto secundário  7.0:1                    */
  --ink-3:#5a6c85;        /* texto terciário   4.8:1                    */
  --surface:#ffffff;
  --surface-2:#f5f9fd;
  --surface-3:#eaf2fa;
  --line:#dce7f2;
  --line-2:#c6d8e9;

  /* Texto sobre fundo escuro */
  --on-dark:#ffffff;
  --on-dark-2:#c8d9ea;    /* 9.4:1 sobre --navy-950 */
  --on-dark-3:#9db4cc;    /* 6.1:1 sobre --navy-950 */

  /* Escala tipográfica */
  --fs-display:clamp(2.5rem, 1.55rem + 3.1vw, 4rem);
  --fs-h2:clamp(1.85rem, 1.35rem + 1.7vw, 2.85rem);
  --fs-h3:clamp(1.1rem, 1.02rem + .3vw, 1.3rem);
  --fs-lead:clamp(1.02rem, .96rem + .3vw, 1.19rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.75rem;

  /* Espaçamento (escala de 4) */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.5rem; --sp-8:3rem;
  --sp-9:4rem;   --sp-10:5rem;  --sp-11:6.5rem;

  --section-y:clamp(4rem, 2.4rem + 5vw, 7rem);

  /* Formas */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,38,71,.06), 0 4px 12px rgba(11,38,71,.05);
  --sh-2:0 2px 4px rgba(11,38,71,.05), 0 12px 28px rgba(11,38,71,.08);
  --sh-3:0 24px 60px rgba(4,20,44,.16);
  --ring:0 0 0 3px #fff, 0 0 0 6px var(--blue-600);
  --ring-dark:0 0 0 3px var(--navy-950), 0 0 0 6px var(--cyan-400);

  --container:1200px;
  --header-h:76px;
}

/* ---------- Reset ---------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;
  font-family:'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1,'ss01' 1;
}
h1,h2,h3,h4 { margin:0; font-weight:800; letter-spacing:-.022em; line-height:1.12; text-wrap:balance; }
p { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
img,svg { max-width:100%; display:block; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong,b { font-weight:700; }

/* Foco visível consistente — antes inexistente na página */
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }
.section-dark :focus-visible, .site-footer :focus-visible { box-shadow:var(--ring-dark); }

.skip-link {
  position:fixed; top:-100px; left:16px; z-index:2000;
  background:var(--surface); color:var(--navy-900);
  padding:12px 20px; border-radius:var(--r-sm); font-weight:700; box-shadow:var(--sh-2);
  transition:top .18s ease;
}
.skip-link:focus-visible { top:16px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Layout --------------------------------------------------- */
.container { width:min(var(--container), 100% - 2.5rem); margin-inline:auto; }
.section { padding-block:var(--section-y); position:relative; }
.section-tint { background:var(--surface-2); }
.section-dark { background:var(--navy-950); color:var(--on-dark); }
.section-dark p { color:var(--on-dark-2); }

/* Cabeçalho de seção */
.sec-head { max-width:46rem; margin-bottom:var(--sp-8); }
.sec-head.is-center { margin-inline:auto; text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-eyebrow); font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blue-700); margin-bottom:var(--sp-3);
}
.eyebrow::before { content:""; flex:none; width:22px; height:2px; background:currentColor; border-radius:2px; }
.eyebrow { line-height:1.4; }
.is-center .eyebrow { justify-content:center; }
.eyebrow-light { color:var(--cyan-400); }
.sec-head h2 { font-size:var(--fs-h2); }
.sec-head p { margin-top:var(--sp-4); font-size:var(--fs-lead); color:var(--ink-3); }
.section-dark .sec-head p { color:var(--on-dark-2); }

/* ---------- Botões --------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.4rem; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700; letter-spacing:-.005em;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  text-align:center;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn-primary {
  color:#fff; background:var(--blue-600);
  box-shadow:0 1px 2px rgba(6,60,110,.24), 0 8px 20px rgba(13,118,204,.24);
}
.btn-primary:hover { background:var(--blue-700); transform:translateY(-1px); box-shadow:0 2px 4px rgba(6,60,110,.2), 0 12px 26px rgba(13,118,204,.3); }
.btn-primary:active { transform:none; }
.btn-ghost-light { color:#fff; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.04); }
.btn-ghost-light:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.5); }
.btn-outline { color:var(--blue-700); border:1px solid var(--line-2); background:var(--surface); }
.btn-outline:hover { border-color:var(--blue-500); background:var(--cyan-050); }
.btn-block { width:100%; }

/* ---------- Header --------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(11,38,71,.06); }
.header-inner { height:100%; display:flex; align-items:center; gap:var(--sp-5); }
.brand { display:flex; align-items:center; gap:.55rem; flex:none; }
.brand-mark { width:96px; height:auto; }
.brand-by { font-size:.6875rem; color:var(--ink-3); letter-spacing:.02em; }
.brand-refrisat { width:92px; height:auto; }

.main-nav { margin-left:auto; }
.main-nav ul { display:flex; align-items:center; gap:var(--sp-5); }
.main-nav a {
  position:relative; display:block; padding:.5rem 0;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
  transition:color .18s ease;
}
.main-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--cyan-500); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.main-nav a:hover { color:var(--ink); }
.main-nav a:hover::after, .main-nav a[aria-current="true"]::after { transform:scaleX(1); }
.main-nav a[aria-current="true"] { color:var(--blue-700); }
.header-cta { flex:none; min-height:42px; padding-inline:1.05rem; font-size:var(--fs-xs); }
.header-login { flex:none; min-height:42px; padding-inline:1.05rem; font-size:var(--fs-xs); }
.main-nav .mobile-cta { display:none; }   /* só aparece no menu colapsado */

.nav-toggle {
  display:none; margin-left:auto; width:44px; height:44px;
  align-items:center; justify-content:center; border-radius:var(--r-sm);
}
.nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .22s ease, background .1s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .22s ease, top .22s ease;
}
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top:0; transform:rotate(-45deg); }

/* ---------- Hero ----------------------------------------------------- */
.hero {
  position:relative; overflow:hidden; color:var(--on-dark);
  padding-block:clamp(3.5rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 5.5rem);
  background:
    radial-gradient(90% 70% at 78% 22%, rgba(6,183,233,.16), transparent 60%),
    radial-gradient(70% 60% at 12% 90%, rgba(13,118,204,.2), transparent 62%),
    linear-gradient(160deg, #04101f 0%, #071a33 55%, #082444 100%);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(51,203,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,203,240,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 30%, #000, transparent 75%);
  mask-image:radial-gradient(80% 70% at 70% 30%, #000, transparent 75%);
}
.hero-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem .4rem .55rem; border-radius:var(--r-pill);
  border:1px solid rgba(51,203,240,.36); background:rgba(6,183,233,.1);
  color:var(--cyan-200); font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.hero-pill svg { width:15px; height:15px; }
.hero h1 { font-size:var(--fs-display); margin:var(--sp-5) 0 var(--sp-4); max-width:17ch; }
.hero h1 em { display:block; font-style:normal; color:var(--cyan-400); }
.hero-lead { font-size:var(--fs-lead); color:var(--on-dark-2); max-width:38ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.hero-proof {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4);
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12); max-width:34rem;
}
.hero-proof li { display:flex; align-items:center; gap:.6rem; font-size:var(--fs-xs); font-weight:600; line-height:1.3; color:#e6f3fa; }
.proof-ico {
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:var(--r-md); border:1px solid rgba(51,203,240,.4);
  background:rgba(6,183,233,.1); color:var(--cyan-400);
}
.proof-ico svg { width:19px; height:19px; }
.proof-ico span { font-size:.6875rem; font-weight:800; letter-spacing:-.02em; }

/* Composição visual do hero */
.hero-stage { position:relative; }
.hero-screen {
  border-radius:var(--r-lg); padding:8px;
  background:linear-gradient(150deg, rgba(51,203,240,.55), rgba(13,118,204,.18));
  box-shadow:var(--sh-3), 0 0 60px rgba(6,183,233,.14);
}
.hero-screen img { border-radius:12px; width:100%; }
.hero-readouts {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem;
  margin-top:.85rem;
}
.readout {
  padding:.6rem .7rem; border-radius:var(--r-md);
  border:1px solid rgba(51,203,240,.28); background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.readout dt { font-size:.625rem; letter-spacing:.07em; text-transform:uppercase; color:var(--cyan-200); }
.readout dd { margin:.15rem 0 0; font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.hero-caption { margin-top:.7rem; font-size:.6875rem; color:var(--on-dark-3); text-align:center; }

/* ---------- Variáveis ------------------------------------------------ */
.vars-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.var-map { width:100%; height:auto; }
.var-map .link { fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:4 5; }
.var-map .chip-bg { fill:#fff; stroke:var(--line); }
.var-map .chip-name { font:700 12px/1 'InterVar',sans-serif; fill:var(--ink); }
.var-map .chip-val  { font:600 11px/1 'InterVar',sans-serif; fill:var(--ink-3); }
.var-map .core-ring { fill:none; stroke:rgba(13,118,204,.18); }
.var-badge { fill:var(--blue-600); }
.var-badge.is-energy { fill:var(--green-500); }
.var-badge.is-ok { fill:var(--green-700); }
.var-badge-ico { fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.var-list { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.var-list li {
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:.7rem; align-items:center;
  padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
}
.var-list b     { grid-column:2; font-size:var(--fs-sm); }
.var-list small { grid-column:2; font-size:var(--fs-xs); color:var(--ink-3); }
.var-dot {
  grid-row:1 / span 2; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:var(--blue-600); color:#fff;
}
.var-dot svg { width:17px; height:17px; }
.var-dot.is-energy { background:var(--green-500); }
.var-dot.is-ok     { background:var(--green-700); }

/* ---------- Proximidade ---------------------------------------------- */
.prox-card {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:center;
  padding:clamp(1.75rem,3vw,3rem);
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(140deg,#fff, var(--cyan-050));
  box-shadow:var(--sh-1);
}
.prox-flow { width:100%; height:auto; }
.prox-flow .node { fill:#fff; stroke:var(--line-2); }
.prox-flow .node-dark { fill:var(--navy-800); }
.prox-flow .label { font:700 11px/1 'InterVar',sans-serif; fill:var(--ink-2); text-anchor:middle; }
.prox-flow .label-light { fill:#fff; }
.prox-flow .sub { font:600 9.5px/1 'InterVar',sans-serif; fill:var(--ink-3); text-anchor:middle; }
.prox-flow .wire { fill:none; stroke:var(--blue-500); stroke-width:1.6; stroke-dasharray:5 4; }
.prox-stats { display:flex; flex-wrap:wrap; gap:var(--sp-5); margin-top:var(--sp-6); }
.prox-stats div { display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); color:var(--ink-2); }
.prox-stats b {
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--surface-3); color:var(--blue-700);
  font-size:var(--fs-xs); font-weight:800;
}
.prox-stats b svg { width:16px; height:16px; }

/* ---------- Cards de recurso ----------------------------------------- */
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
.card {
  padding:var(--sp-6) var(--sp-5); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }
.card h3 { font-size:var(--fs-h3); margin:var(--sp-4) 0 var(--sp-2); }
.card p { font-size:var(--fs-sm); color:var(--ink-3); }
.ico-tile {
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-md); background:var(--cyan-050);
  border:1px solid #cae9f7; color:var(--blue-700);
}
.ico-tile svg { width:22px; height:22px; }

/* ---------- Tempo real ----------------------------------------------- */
.rt-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.rt-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; margin-top:var(--sp-6); }
.rt-list li {
  display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem;
  font-size:var(--fs-xs); font-weight:600; color:#d7e7f3;
  border-left:2px solid var(--cyan-500); background:rgba(255,255,255,.04);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.rt-screen { padding:10px; border-radius:var(--r-lg); border:1px solid rgba(51,203,240,.3); background:rgba(255,255,255,.05); box-shadow:var(--sh-3); }
.rt-screen img { border-radius:10px; width:100%; }

/* ---------- Pilares -------------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-4); counter-reset:step; }
.step { position:relative; padding-top:var(--sp-5); }
.step::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blue-600), var(--cyan-500));
  border-radius:2px; opacity:.28;
}
.step:first-child::before { background:var(--blue-600); opacity:1; }
.step-n { font-size:var(--fs-xs); font-weight:800; color:var(--blue-700); letter-spacing:.08em; }
.step h3 { font-size:1.0625rem; margin:var(--sp-3) 0 var(--sp-2); }
.step p { font-size:var(--fs-xs); color:var(--ink-3); }
.step-ico { margin-top:var(--sp-3); color:var(--blue-600); }
.step-ico svg { width:26px; height:26px; }

/* ---------- Arquitetura ---------------------------------------------- */
.arch {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center; gap:var(--sp-4);
  padding:var(--sp-7) var(--sp-5); border:1px solid var(--line);
  border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-1);
}
.arch-node { text-align:center; }
.arch-art { height:118px; display:grid; place-items:center; margin-bottom:var(--sp-4); }
.arch-art img { max-height:112px; width:auto; object-fit:contain; }
.arch-art .ico-cloud { color:var(--blue-500); }
.arch-art .ico-cloud svg { width:82px; height:82px; }
.arch-node b { display:block; font-size:.9375rem; }
.arch-node small { display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:.15rem; }
.arch-link { display:grid; justify-items:center; gap:.35rem; color:var(--line-2); }
.arch-link span { font-size:.625rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.arch-link svg { width:34px; height:10px; }
.spec-list {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:var(--sp-3); margin-top:var(--sp-5);
}
.spec-list li {
  padding:.7rem .9rem; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
}
.spec-list .k { display:block; font-size:.625rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.spec-list .v { display:block; margin-top:.2rem; font-size:var(--fs-sm); font-weight:700; }

/* ---------- Aplicações ----------------------------------------------- */
.apps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
.app {
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--sh-1);
}
.app-body { padding:var(--sp-6) var(--sp-5) var(--sp-5); flex:1; }
.app-tag {
  display:inline-block; padding:.25rem .6rem; border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--blue-700); background:var(--cyan-050); border:1px solid #cae9f7;
}
.app h3 { font-size:1.375rem; margin:var(--sp-4) 0 var(--sp-3); }
.app p { font-size:var(--fs-sm); color:var(--ink-3); }
.app ul { margin-top:var(--sp-4); display:grid; gap:.5rem; }
.app li { position:relative; padding-left:1.4rem; font-size:var(--fs-xs); color:var(--ink-2); }
.app li svg { position:absolute; left:0; top:.15rem; width:14px; height:14px; color:var(--blue-600); }
.app-note { margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-3); }
.app-media { padding:var(--sp-4); background:var(--surface-2); border-top:1px solid var(--line); display:grid; align-content:center; min-height:224px; }
.app-media img { border-radius:var(--r-sm); box-shadow:var(--sh-1); width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center top; }
.app--energy .app-tag { color:var(--green-700); background:#ecfaf1; border-color:#bfe6cf; }
.app--energy li svg { color:var(--green-500); }
.app--medical .app-tag { color:var(--violet-600); background:#f4f0fc; border-color:#ddd2f2; }
.app--medical li svg { color:var(--violet-500); }
.units { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--sp-4); }
.units span {
  padding:.3rem .6rem; border-radius:var(--r-sm); font-size:.6875rem; font-weight:800;
  color:var(--green-700); background:#ecfaf1; border:1px solid #bfe6cf;
}
.med-figure { display:grid; place-items:center; padding:var(--sp-5) 0; }
.med-figure svg { width:min(100%,290px); height:auto; }
.med-figure .room { fill:#faf8ff; stroke:#e2d8f5; }
.med-figure .bore { fill:#fff; stroke:#c9b9e8; }
.med-figure .tag-bg { fill:#fff; stroke:#ddd2f2; }
.med-figure .tag-v { font:800 12px/1 'InterVar',sans-serif; fill:var(--violet-600); }
.med-figure .tag-l { font:600 9px/1 'InterVar',sans-serif; fill:var(--ink-3); }

/* ---------- Segurança ------------------------------------------------ */
.sec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--sp-4); }

/* ---------- Planos --------------------------------------------------- */
.plans { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); align-items:stretch; }
.plan {
  --accent:var(--blue-700);
  position:relative; display:flex; flex-direction:column;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-1);
}
.plan::before { content:""; position:absolute; inset:0 0 auto; height:4px; border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--accent); }
/* green-700 em vez de green-500: branco sobre #1c9c58 dá 3.5:1 e reprova em AA */
.plan--energy  { --accent:var(--green-700); }
.plan--medical { --accent:var(--violet-500); }
.plan--plant   { --accent:var(--navy-800); }
.plan--featured { border-color:var(--blue-500); box-shadow:0 2px 4px rgba(11,38,71,.05), 0 18px 40px rgba(13,118,204,.16); }
.plan-flag {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:.25rem .7rem; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--blue-600); color:#fff; font-size:.625rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
}
.plan-ico { width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-md); color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, #fff); border:1px solid color-mix(in srgb, var(--accent) 22%, #fff); }
.plan-ico svg { width:21px; height:21px; }
.plan h3 { font-size:1.25rem; margin:var(--sp-4) 0 .15rem; color:var(--accent); }
.plan-sub { font-size:var(--fs-xs); color:var(--ink-3); }
.plan-price { margin-top:var(--sp-5); display:flex; align-items:baseline; gap:.25rem; flex-wrap:wrap; }
.plan-price .from { width:100%; font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; }
.plan-price .cur { font-size:1rem; font-weight:800; }
.plan-price .val { font-size:2.6rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan-price .per { font-size:var(--fs-sm); font-weight:700; color:var(--ink-3); }
.plan-annual { margin-top:.35rem; font-size:var(--fs-xs); color:var(--ink-3); }
.plan ul { margin:var(--sp-5) 0; display:grid; gap:.6rem; flex:1; }
.plan li { position:relative; padding-left:1.5rem; font-size:var(--fs-xs); color:var(--ink-2); }
.plan li svg { position:absolute; left:0; top:.1rem; width:15px; height:15px; color:var(--accent); }
.plan-cta { background:var(--accent); color:#fff; min-height:44px; font-size:var(--fs-xs); }
.plan-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.plans-foot { margin-top:var(--sp-5); font-size:var(--fs-xs); color:var(--ink-3); text-align:center; }

/* ---------- FAQ ------------------------------------------------------ */
.faq { max-width:52rem; margin-inline:auto; display:grid; gap:.6rem; }
.faq details { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.faq details[open] { border-color:var(--line-2); box-shadow:var(--sh-1); }
.faq summary {
  display:flex; align-items:center; gap:var(--sp-4); justify-content:space-between;
  padding:1.05rem var(--sp-5); cursor:pointer; font-weight:700; font-size:.9375rem;
  list-style:none;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { flex:none; width:18px; height:18px; color:var(--blue-600); transition:transform .2s ease; }
.faq details[open] summary svg { transform:rotate(45deg); }
.faq p { padding:0 var(--sp-5) 1.15rem; font-size:var(--fs-sm); color:var(--ink-3); max-width:60ch; }

/* ---------- Contato -------------------------------------------------- */
.contact { position:relative; overflow:hidden; }
.contact::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 12% 10%, rgba(6,183,233,.16), transparent 60%);
}
.contact-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.contact-note {
  margin:var(--sp-5) 0; padding:.9rem 1.1rem; border-radius:0 var(--r-md) var(--r-md) 0;
  border-left:3px solid var(--cyan-500); background:rgba(255,255,255,.07);
  color:#e2f6ff; font-size:var(--fs-sm); font-weight:600;
}
.contact-list { display:grid; gap:.7rem; }
.contact-list li { display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); color:var(--on-dark-2); }
.contact-list svg { flex:none; width:17px; height:17px; color:var(--cyan-400); }
.form-card { background:var(--surface); color:var(--ink); border-radius:var(--r-xl); padding:var(--sp-4); box-shadow:var(--sh-3); }
.form-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); padding:.5rem .6rem 1rem; flex-wrap:wrap; }
.form-head h3 { font-size:1.0625rem; }
.form-head span { font-size:var(--fs-xs); color:var(--ink-3); }
.form-frame { position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); }
.form-frame iframe { width:100%; height:760px; border:0; display:block; background:var(--surface); }
.form-skeleton {
  position:absolute; inset:0; display:grid; gap:.75rem;
  grid-auto-rows:min-content; align-content:center; justify-items:center;
  background:var(--surface-2); color:var(--ink-3); font-size:var(--fs-xs);
}
.form-skeleton[hidden] { display:none; }
.spinner { width:26px; height:26px; border:2.5px solid var(--line-2); border-top-color:var(--blue-600); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-legal { padding:.9rem .6rem 0; margin:0; font-size:var(--fs-xs); color:var(--ink-3); }
.form-legal a { color:var(--blue-700); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Grupo HBR Holding Brasil --------------------------------- */
.group-section {
  background:var(--hbr-wash);
  border-block:1px solid rgba(95,135,160,.22);
  padding-block:clamp(3rem, 2rem + 3vw, 4.5rem);
}
.group-head { text-align:center; max-width:44rem; margin:0 auto var(--sp-8); }
.group-lockup { width:clamp(150px, 18vw, 190px); height:auto; margin:0 auto; }
.group-rule { display:block; width:56px; height:3px; border-radius:2px; background:var(--hbr-navy); margin:var(--sp-4) auto var(--sp-5); }
.group-head p { font-size:var(--fs-sm); color:var(--hbr-gray); }

.group-logos {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1.5rem, .8rem + 2.2vw, 2.5rem) clamp(1.75rem, .8rem + 2.6vw, 3rem);
}
.group-logos a {
  display:block; padding:.4rem; border-radius:var(--r-sm);
  opacity:.9; transition:opacity .22s ease, transform .22s ease;
}
.group-logos a:hover, .group-logos a:focus-visible { opacity:1; transform:translateY(-2px); }
.group-logos a:focus-visible { box-shadow:0 0 0 3px var(--hbr-wash), 0 0 0 6px var(--hbr-steel); outline:none; }
/* alturas ajustadas individualmente: cada marca tem proporção diferente,
   igualar a largura deixaria umas gigantes e outras minúsculas */
.gl { width:auto; }
.gl-hbr  { height:32px; }
.gl-air  { height:32px; }
.gl-oce  { height:21px; }
.gl-ener { height:25px; }
.gl-teg  { height:32px; }
.gl-fld  { height:21px; }
.gl-ref  { height:25px; }

/* ---------- Footer --------------------------------------------------- */
.site-footer { background:var(--navy-950); color:var(--on-dark-2); padding-block:var(--sp-8) var(--sp-5); }
.footer-grid { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--sp-6); }
.footer-brand > picture img { width:120px; height:auto; }
.footer-by { display:flex; align-items:center; gap:.5rem; margin-top:var(--sp-3); }
.footer-by span { font-size:.6875rem; color:var(--on-dark-3); }
.footer-by img { width:100px; height:auto; }
.footer-brand > p:last-child { margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--on-dark-3); max-width:34ch; }
.footer-col h4 { font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:var(--sp-4); }
.footer-col ul { display:grid; gap:.55rem; }
.footer-col a { font-size:var(--fs-sm); color:var(--on-dark-2); transition:color .15s ease; }
.footer-col a:hover { color:var(--cyan-400); }
.footer-bottom {
  margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
  font-size:var(--fs-xs); color:var(--on-dark-3);
}

/* ---------- Animação de entrada -------------------------------------- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity:1; transform:none; }

/* ---------- Responsivo ----------------------------------------------- */
@media (max-width:1080px) {
  .hero-grid,
  .vars-grid,
  .rt-grid,
  .contact-grid { grid-template-columns:1fr; }
  .hero h1 { max-width:20ch; }
  .hero-lead { max-width:56ch; }
  .prox-card { grid-template-columns:1fr; }
  .prox-card .prox-media { order:-1; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--sp-6); }
  .arch { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--sp-6); }
  .arch-link { display:none; }
  .apps { grid-template-columns:1fr; }
  .app { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
  .app-media { border-top:0; border-left:1px solid var(--line); height:100%; display:grid; align-content:center; }
  .plans { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--sp-6); }
}

/* A navegação vira menu antes do restante do layout: entre 860 e 1080 px
   os links + CTA não cabiam ao lado da marca (causava overflow horizontal). */
@media (max-width:1080px) {
  :root { --header-h:68px; }
  .main-nav {
    position:fixed; inset:var(--header-h) 0 auto; margin:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px rgba(11,38,71,.12);
    padding:var(--sp-3) 1.25rem var(--sp-5);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .main-nav.is-open { transform:none; opacity:1; visibility:visible; }
  .main-nav ul { flex-direction:column; align-items:stretch; gap:0; }
  .main-nav a { padding:.85rem .25rem; border-bottom:1px solid var(--line); font-size:.9375rem; }
  .main-nav a::after { display:none; }
  .main-nav .mobile-cta { display:block; margin-top:var(--sp-4); }
  .main-nav .mobile-cta a { border-bottom:0; padding:0 1.4rem; }
  .header-cta, .header-login { display:none; }
  .nav-toggle { display:flex; }
  .brand-mark { width:88px; } .brand-refrisat { width:82px; }
}

@media (max-width:860px) {
  :root { --header-h:64px; }
  .brand-mark { width:82px; } .brand-refrisat { width:74px; } .brand-by { display:none; }
  .hero-readouts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-proof { grid-template-columns:1fr; gap:var(--sp-3); }
  .var-map { display:none; }
  .var-list { display:grid; }
  .card-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:var(--sp-5); }
  .step { display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-4); padding-top:var(--sp-4); }
  .step-n { grid-column:1; }
  .step-ico { grid-row:1 / span 3; grid-column:1; margin:0; align-self:start; }
  .step h3, .step p, .step-n { grid-column:2; }
  .step-ico { display:none; }
  .arch { grid-template-columns:1fr; }
  .app { grid-template-columns:1fr; }
  .app-media { border-left:0; border-top:1px solid var(--line); }
  .plans { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}

@media (max-width:520px) {
  .container { width:min(var(--container), 100% - 2rem); }
  .hero-actions .btn { width:100%; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .reveal { opacity:1; transform:none; }
}

@media print {
  .site-header, .nav-toggle, .hero-actions, .form-card, .reveal { box-shadow:none; }
  .reveal { opacity:1; transform:none; }
  .section-dark, .hero { background:#fff !important; color:#000 !important; }
}

/* =========================================================================
   PÁGINAS LEGAIS  (politica-de-privacidade, politica-de-cookies, termos-de-uso)
   Documento de leitura longa: medida de linha curta, hierarquia discreta.
   ====================================================================== */

.legal-page { background:var(--surface-2); }

.legal-header {
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.legal-header .container {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:var(--header-h);
}
.legal-header .back-link {
  font-size:var(--fs-sm); font-weight:600; color:var(--blue-600);
  text-decoration:none; white-space:nowrap; border-radius:var(--r-sm);
}
.legal-header .back-link:hover { text-decoration:underline; }
.legal-header .back-link::before { content:"←"; margin-right:.4em; }

.legal-doc {
  width:min(70ch, 100% - 2.5rem); margin-inline:auto;
  padding-block:clamp(2.5rem, 1.6rem + 3vw, 4.5rem) var(--sp-10);
}
.legal-doc .kicker {
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-600); margin:0 0 var(--sp-2);
}
.legal-doc h1 {
  font-size:clamp(1.9rem, 1.4rem + 1.7vw, 2.6rem); line-height:1.15;
  letter-spacing:-.02em; margin:0 0 var(--sp-3);
}
.legal-doc .doc-meta {
  font-size:var(--fs-sm); color:var(--ink-3);
  padding-bottom:var(--sp-5); margin:0 0 var(--sp-5);
  border-bottom:1px solid var(--line);
}
.legal-doc h2 {
  font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em;
  margin:var(--sp-7) 0 var(--sp-3); scroll-margin-top:calc(var(--header-h) + 1rem);
}
.legal-doc h3 {
  font-size:1rem; margin:var(--sp-5) 0 var(--sp-2); color:var(--ink-2);
}
.legal-doc p, .legal-doc li { color:var(--ink-2); line-height:1.7; }
.legal-doc p { margin:0 0 var(--sp-4); }
.legal-doc ul { margin:0 0 var(--sp-4); padding-left:1.35rem; list-style:disc; }
.legal-doc ul li::marker { color:var(--blue-500); }
.legal-doc li { margin-bottom:var(--sp-2); }
.legal-doc a { color:var(--blue-700); }
.legal-doc code {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85em; background:var(--surface-3); color:var(--ink);
  padding:.12em .38em; border-radius:4px;
}

/* Bloco de identificação do controlador */
.legal-doc .controller {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
  margin:0 0 var(--sp-6); box-shadow:var(--sh-1);
}
.legal-doc .controller p:last-child { margin-bottom:0; }
.legal-doc .controller dt {
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin-top:var(--sp-3);
}
.legal-doc .controller dt:first-child { margin-top:0; }
.legal-doc .controller dd { margin:.15rem 0 0; color:var(--ink-2); line-height:1.6; }

/* Observação de encerramento */
.legal-doc .notice {
  margin:var(--sp-7) 0 0; padding:var(--sp-4) var(--sp-5);
  background:var(--cyan-050); border-left:3px solid var(--cyan-500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm); color:var(--ink-2);
}

/* Tabela de itens de armazenamento (Política de Cookies) */
.legal-doc .cookie-table {
  width:100%; border-collapse:collapse; margin:0 0 var(--sp-4);
  font-size:var(--fs-sm); display:block; overflow-x:auto;
}
.legal-doc .cookie-table th,
.legal-doc .cookie-table td {
  border:1px solid var(--line); padding:var(--sp-2) var(--sp-3);
  text-align:left; vertical-align:top; color:var(--ink-2); line-height:1.6;
}
.legal-doc .cookie-table th { background:var(--surface-2); color:var(--ink); font-weight:600; }

/* Botão de oposição à atribuição de campanha */
.legal-doc #campanha-optout {
  display:inline-block; padding:.5rem .95rem;
  border:1px solid var(--blue-700); border-radius:var(--r-sm);
  color:var(--blue-700); font-size:var(--fs-sm); font-weight:600;
}
.legal-doc #campanha-optout:hover { background:var(--blue-700); color:#fff; }

/* Rodapé enxuto das páginas legais */
.legal-footer {
  border-top:1px solid var(--line); background:var(--surface);
  padding-block:var(--sp-6); font-size:var(--fs-sm); color:var(--ink-3);
}
.legal-footer .container {
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  align-items:center; justify-content:space-between;
}
.legal-footer nav { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); }
.legal-footer a { color:var(--ink-2); text-decoration:none; }
.legal-footer a:hover { color:var(--blue-700); text-decoration:underline; }
.legal-footer a[aria-current="page"] { color:var(--ink); font-weight:600; }
.legal-footer p { margin:0; }

/* Marcador de pendência editorial — não deve sobreviver à publicação */
.legal-doc .todo {
  display:inline-block; background:#fff4d6; color:#7a4c00;
  border:1px dashed #d9a521; border-radius:4px;
  padding:.05em .45em; font-size:.9em; font-weight:600;
}
