/* =========================================================
   Ravixo — política de privacidade (rascunho, protótipo)
   Mesmo sistema visual da home v2 (lei 10). Página sem JavaScript.
   Paleta: paper #ECEBE6 · ink #0B0B0B · cobalt #1E3BFF (o ponto)
           cobalt-l #8C9BFF · graphite #55554F · ash #A3A39C
   ========================================================= */

:root {
  --paper: #ECEBE6;
  --ink: #0B0B0B;
  --cobalt: #1E3BFF;
  --cobalt-l: #8C9BFF;
  --graphite: #55554F;
  --ash: #A3A39C;
  --white: #F7F6F2;
  --line-p: rgba(11, 11, 11, .16);
  --line-i: rgba(236, 235, 230, .16);

  --f-d: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --f-t: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --f-m: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gut: clamp(16px, 2.8vw, 44px);
  --gap: clamp(12px, 1.4vw, 22px);
  --nav-h: 60px;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --max: 1680px;
  --pw: calc(min(100vw, var(--max)) - 2 * var(--gut));
}

[data-theme="paper"] { --bg: var(--paper); --fg: var(--ink); --fg2: var(--graphite); --line: var(--line-p); --focus: var(--cobalt); background: var(--bg); color: var(--fg); }
[data-theme="ink"]   { --bg: var(--ink); --fg: var(--paper); --fg2: var(--ash); --line: var(--line-i); --focus: var(--paper); background: var(--bg); color: var(--fg); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--f-t);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
p, h1, h2, h3, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus, var(--cobalt)); outline-offset: 3px; }
::selection { background: var(--cobalt); color: #fff; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--cobalt); color: #fff; padding: 14px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.mono { font-family: var(--f-m); font-size: 12px; line-height: 1.45; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.dot { display: inline-block; width: .18em; height: .18em; border-radius: 50%; background: var(--cobalt); margin-left: .06em; vertical-align: baseline; }
.nw { white-space: nowrap; }
.sec-label { display: flex; flex-wrap: wrap; column-gap: 1.4em; align-items: baseline; color: var(--fg2); }
.sec-label span:first-child { color: var(--fg); }

/* ---------- botão ---------- */
.btn {
  --b: var(--cobalt); --c: #fff; --h: var(--ink); --hc: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 0 22px;
  background: var(--b); color: var(--c);
  font: 600 17px/1 var(--f-d); letter-spacing: -.01em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: color .45s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--hc); }
  .btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
}
.btn--nav { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* ---------- NAV (fixa, clara, sem menu: a página é uma só) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line-p); }
.nav__in { height: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; font: 800 26px/1 var(--f-d); letter-spacing: -.04em; text-decoration: none; }
.logo .dot { margin-left: .05em; }
.logo__back { display: inline-block; margin-right: .3em; font: 500 .66em/1 var(--f-t); letter-spacing: 0; transform: translateY(-.04em); transition: transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) { .logo:hover .logo__back { transform: translate(-4px, -.04em); } }
.nav__where { margin-left: 18px; opacity: .75; white-space: nowrap; }
.nav .btn { margin-left: auto; }
@media (max-width: 760px) { :root { --nav-h: 56px; } .nav__in { gap: 10px; } .logo { font-size: 24px; } .btn--nav { padding: 0 12px; font-size: 13px; } .nav__where { display: none; } }
@media (max-width: 369px) { .nav__wa-pre { display: none; } }

/* ---------- DOCUMENTO ---------- */
.doc { padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) 0 clamp(80px, 10vw, 150px); }
.doc__head { max-width: 1100px; }
.doc__title { margin-top: 24px; font: 800 clamp(46px, calc(var(--pw) * .08), 132px)/.9 var(--f-d); letter-spacing: -.04em; }
.doc__title .dot { width: .17em; height: .17em; margin-left: .04em; }
.doc__lede { margin-top: clamp(22px, 2.6vw, 36px); max-width: 44ch; font-size: clamp(19px, 1.55vw, 25px); line-height: 1.4; }

/* resumo: o que importa em cinco linhas */
.sum { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 12px; margin-top: clamp(48px, 6vw, 96px); padding: clamp(20px, 2.4vw, 34px) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.sum__t { grid-column: 1 / span 3; padding-top: .35em; }
.sum__list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gap); }
.sum__list li { position: relative; padding-left: 18px; font: 600 clamp(18px, 1.4vw, 22px)/1.35 var(--f-d); letter-spacing: -.01em; }
.sum__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); }
.sum__list a { text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }

/* cada parte: número · título · texto */
.part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 14px; padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); }
.part__n { grid-column: 1 / span 1; color: var(--cobalt); padding-top: .55em; }
.part__t { grid-column: 2 / span 4; font: 700 clamp(24px, 2.1vw, 34px)/1.08 var(--f-d); letter-spacing: -.025em; text-wrap: balance; }
.part__b { grid-column: 6 / span 6; display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.6; }
.part__b strong { font-weight: 600; }
.part__b a { text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--cobalt); overflow-wrap: anywhere; }
.part__b ul { display: flex; flex-direction: column; gap: 8px; }
.part__b ul li { position: relative; padding-left: 20px; }
.part__b ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); }
.part__law { padding-left: 14px; border-left: 2px solid var(--line); color: var(--fg2); font-size: 16.5px; }

/* com quem: lista de serviços */
.who { border-top: 1px solid var(--line); }
.who > div { display: grid; grid-template-columns: minmax(9em, 1fr) minmax(0, 2fr); column-gap: var(--gap); padding: 11px 0; border-bottom: 1px solid var(--line); }
.who dt { font: 600 17px/1.45 var(--f-d); letter-spacing: -.01em; }
.who dd { color: var(--fg2); font-size: 17px; line-height: 1.5; }

.doc__end { position: relative; padding-left: 24px; margin-top: clamp(40px, 5vw, 72px); font: 600 clamp(20px, 1.7vw, 27px)/1.3 var(--f-d); letter-spacing: -.015em; }
.doc__end .dot { position: absolute; left: 0; top: .42em; width: 11px; height: 11px; margin: 0; }
.doc__end a { text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--cobalt); overflow-wrap: anywhere; }

/* ---------- RODAPÉ (o mesmo da home; o "Ravixo." ocupa a largura sem JS) ---------- */
.foot { padding: clamp(72px, 9vw, 140px) 0 26px; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; }
.foot__col:nth-child(1) { grid-column: 1 / span 3; }
.foot__col:nth-child(2) { grid-column: 4 / span 4; }
.foot__col:nth-child(3) { grid-column: 8 / span 2; }
.foot__col:nth-child(4) { grid-column: 10 / -1; }
.foot__k { margin-bottom: 10px; color: var(--ash); }
.foot__big { display: inline-flex; align-items: center; min-height: 44px; font: 700 clamp(20px, 1.8vw, 30px)/1.1 var(--f-d); letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .foot__big:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } }
.foot__nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
/* 3,31 = largura de "Ravixo." / tamanho da letra (medido no navegador) */
.foot__mark { position: relative; margin: clamp(48px, 6vw, 96px) 0 0 -.035em; font: 800 calc(var(--pw) * .2955)/.8 var(--f-d); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; padding-bottom: .02em; }
.foot__mark .dot { width: .17em; height: .17em; margin-left: .03em; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ash); }
.foot__legal a { display: inline-block; padding-block: 12px; margin-block: -12px; color: inherit; text-underline-offset: 3px; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1023px) {
  .sum__t, .sum__list { grid-column: 1 / -1; }
  .part__n { grid-column: 1 / -1; padding-top: 0; }
  .part__t { grid-column: 1 / -1; }
  .part__b { grid-column: 1 / -1; max-width: 680px; }
  .foot__col:nth-child(1) { grid-column: 1 / span 6; }
  .foot__col:nth-child(2) { grid-column: 7 / -1; }
  .foot__col:nth-child(3) { grid-column: 1 / span 6; }
  .foot__col:nth-child(4) { grid-column: 7 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .doc { padding: calc(var(--nav-h) + 40px) 0 64px; }
  .doc__title { margin-top: 16px; font-size: clamp(40px, 12.2vw, 60px); }
  .doc__lede { font-size: 18px; }
  .sum { margin-top: 36px; padding: 18px 0 20px; }
  .sum__list { grid-template-columns: 1fr; gap: 10px; }
  .sum__list li { font-size: 18px; }
  .part { padding: 26px 0 30px; row-gap: 10px; }
  .part__t { font-size: 24px; }
  .part__b { font-size: 17px; gap: 12px; }
  .who > div { grid-template-columns: 1fr; row-gap: 2px; }
  .doc__end { font-size: 20px; }

  .foot { padding-top: 48px; }
  .foot__grid { row-gap: 18px; }
  .foot__k { margin-bottom: 2px; }
  .foot__col:nth-child(n) { grid-column: 1 / -1; }
  .foot__mark { margin-top: 36px; }
  .foot__legal { gap: 2px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .logo__back { transition: none; }
}