/* ==========================================================================
   FREEDOM START — SITE INSTITUCIONAL 2026
   Sistema visual derivado do documento "Ecossistema e Modelo de Gestão por CTDs"
   Fontes: Montserrat (display e texto) · Azeret Mono (rótulos), as mesmas do dossiê
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root{
  /* Superfícies escuras: a mesma tinta do cartão da credencial */
  --void:#0A0D12;
  --ink:#10151C;
  --navy:#1B2230;
  --navy-2:#232B36;
  --ink-2:#1B2230;
  --navy-3:#2F3742;

  /* Superfícies claras: papel-prova cinza-azulado frio */
  --paper:#DCE0E7;
  --paper-2:#EEF0F4;
  --white:#F7F8FA;

  /* Marca */
  --purple:#4B1F91;
  --purple-hi:#5E2BB4;
  --purple-lt:#7C4DD1;
  --purple-soft:#E7E2F3;
  --purple-glow:rgba(124,77,209,.35);
  --purple-border:rgba(75,31,145,.34);

  /* Espectro comportamental (DISC) */
  --r:#FF3131;
  --y:#FACD19;
  --b:#458CE6;
  --g:#6ACF27;

  /* Texto */
  --t1:#10151C;
  --t2:#2F3742;
  --t3:#4A525E;
  --t4:#6B7480;
  --on-dark-1:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.74);
  --on-dark-3:rgba(255,255,255,.52);
  --on-dark-4:rgba(255,255,255,.46);

  /* Linhas */
  --line:rgba(47,55,66,.16);
  --line-2:rgba(47,55,66,.30);
  --line-d:rgba(255,255,255,.13);
  --line-d2:rgba(255,255,255,.22);

  /* Tipografia */
  /* Três vozes: estrutura, gente e máquina. */
  --fd:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;   /* títulos e interface */
  --fp:'Newsreader',Georgia,'Times New Roman',serif;                 /* texto corrido */
  --fm:'Azeret Mono',ui-monospace,'SFMono-Regular',Consolas,monospace; /* rótulos e dados */
  --fb:var(--fd);

  /* Métrica */
  --maxw:1280px;
  --gut:clamp(20px,5vw,56px);
  --sec-y:clamp(72px,10vh,132px);
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:26px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(16,21,28,.05);
  --sh-2:0 1px 2px rgba(16,21,28,.05),0 10px 26px -12px rgba(16,21,28,.20);
  --sh-3:0 24px 60px -24px rgba(16,21,28,.34);
  --sh-d:0 20px 48px -20px rgba(0,0,0,.55);

  /* Curvas */
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:70px;
  --docbar-h:34px;
}

/* ============================ 2. RESET =================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);
  font-size:16px;
  line-height:1.62;
  color:var(--t1);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
::selection{background:var(--purple);color:#fff}
:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px;border-radius:4px}
body.no-scroll{overflow:hidden}

/* ============================ 3. TIPOGRAFIA ============================== */
.d1{font-family:var(--fd);font-weight:900;font-size:clamp(38px,6.4vw,76px);line-height:1.04;letter-spacing:-.035em}
.d2{font-family:var(--fd);font-weight:800;font-size:clamp(26px,3.5vw,42px);line-height:1.08;letter-spacing:-.028em}
.d2--tight{font-size:clamp(25px,2.9vw,38px)}
.d3{font-family:var(--fd);font-weight:800;font-size:clamp(21px,2.5vw,31px);line-height:1.16;letter-spacing:-.022em}
.h4{font-family:var(--fd);font-weight:700;font-size:clamp(17px,1.5vw,21px);line-height:1.24;letter-spacing:-.018em}
.h5{font-family:var(--fd);font-weight:600;font-size:clamp(15px,1.15vw,17px);line-height:1.3;letter-spacing:-.012em}

/* Texto corrido em serifada: é onde a leitura deixa de ser consulta e vira conversa. */
.lead{font-family:var(--fp);font-size:clamp(17px,1.45vw,22px);line-height:1.62;font-weight:400;color:var(--t2)}
.body{font-family:var(--fp);font-size:clamp(15px,1.08vw,17.5px);line-height:1.72;font-weight:400;color:var(--t3)}
.small{font-family:var(--fp);font-size:15px;line-height:1.66;color:var(--t3)}
.lst li{font-family:var(--fp);font-size:clamp(15px,1vw,16.5px);line-height:1.62}
.quote-block p,.mblock p,.modal__sub,.cred-cap+*,.form-note{font-family:var(--fp)}
.stat__d{font-family:var(--fp);font-size:14.5px;line-height:1.6}
.footer-brand p{font-family:var(--fp);font-size:15px}
.marquee span{font-family:var(--fd)}
/* a interface continua geométrica */
.nav a,.dock__link,.footer-col a,.form-field input,.module p,
.cred,.cred *,.docbar__in{font-family:var(--fd)}

.mono{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.eyebrow{
  font-family:var(--fm);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--purple);
  display:inline-flex;align-items:center;gap:11px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none;opacity:.6}
/* todo eyebrow carrega o número da seção a que pertence */
main{counter-reset:sec}
.section{counter-increment:sec}
.section .eyebrow::before{
  content:counter(sec,decimal-leading-zero);
  width:auto;height:auto;background:none;opacity:.55;letter-spacing:.14em;
}
.eyebrow--plain::before{display:none}

.rule{width:56px;height:3px;background:var(--purple);border-radius:2px;margin:22px 0}
.spectrum{display:flex;gap:4px}
.spectrum i{width:28px;height:3px;border-radius:2px;display:block}
.spectrum i:nth-child(1){background:var(--r)}
.spectrum i:nth-child(2){background:var(--y)}
.spectrum i:nth-child(3){background:var(--b)}
.spectrum i:nth-child(4){background:var(--g)}

.accent{color:var(--purple)}
.txt-r{color:var(--r)}.txt-y{color:var(--y)}.txt-b{color:var(--b)}.txt-g{color:var(--g)}

/* ============================ 4. SUPERFÍCIES ============================= */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(48px,6vh,80px)}

/* O papel do dossiê: base fria com duas manchas de luz */
.on-paper,.on-paper-2{
  color:var(--t1);
  background-image:
    radial-gradient(1200px 700px at 80% -10%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(900px 600px at 0% 100%,rgba(75,31,145,.07),transparent 62%);
}
.on-paper{background-color:var(--paper)}
.on-paper-2{background-color:var(--paper-2)}
.on-white{background:var(--white);color:var(--t1)}
.on-ink{background:var(--ink);color:var(--on-dark-1)}
.on-navy{background:var(--navy);color:var(--on-dark-1)}
.on-deep{
  background:
    radial-gradient(1100px 640px at 82% -8%,rgba(124,77,209,.24),transparent 62%),
    radial-gradient(880px 520px at 6% 108%,rgba(30,136,229,.10),transparent 60%),
    linear-gradient(158deg,#232B36 0%,#161C25 38%,#0E131A 100%);
  color:var(--on-dark-1);
}
.on-ink .lead,.on-navy .lead,.on-deep .lead{color:var(--on-dark-2)}
.on-ink .body,.on-navy .body,.on-deep .body{color:var(--on-dark-2)}
.on-ink .small,.on-navy .small,.on-deep .small{color:var(--on-dark-3)}
.on-ink .eyebrow,.on-navy .eyebrow,.on-deep .eyebrow{color:var(--purple-lt)}
.on-ink .rule,.on-navy .rule,.on-deep .rule{background:var(--purple-lt)}

.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.section > .container{position:relative;z-index:2}

/* ============================ 5. GRIDS ================================== */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,24px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.6vw,76px);align-items:center}
.split--top{align-items:start}
.split--w{grid-template-columns:.92fr 1.08fr}
.sec-head{margin-bottom:clamp(32px,5vh,58px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head p{margin-top:16px;max-width:64ch}
.sec-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:end;max-width:none}

/* ============================ 6. BOTÕES ================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;position:relative;
  transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .3s;
  white-space:nowrap;border:1px solid transparent;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{background:var(--purple);color:#fff;box-shadow:0 10px 30px rgba(75,31,145,.28)}
.btn--primary:hover{background:var(--purple-hi);box-shadow:0 16px 40px rgba(75,31,145,.36)}

.btn--light{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.btn--light:hover{box-shadow:0 16px 42px rgba(0,0,0,.3)}

.btn--ghost{border-color:var(--line-2);color:var(--t1);background:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:var(--purple);color:var(--purple);background:#fff}

.btn--ghost-d{border-color:var(--line-d2);color:#fff;background:rgba(255,255,255,.05)}
.btn--ghost-d:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}

.btn--sm{padding:11px 20px;font-size:14px}
.btn--lg{padding:17px 32px;font-size:16px}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;
  font-size:14px;color:var(--purple);transition:gap .25s var(--ease),color .2s;
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.link-arrow:hover{gap:12px}
.link-arrow:hover svg{transform:translateX(2px)}
.on-deep .link-arrow,.on-ink .link-arrow,.on-navy .link-arrow{color:var(--purple-lt)}

/* ============================ 7. CARTÕES ================================ */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,2vw,30px);padding-left:clamp(24px,2.2vw,34px);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s,background .3s;
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card__top{position:absolute;top:0;left:0;bottom:0;width:4px;height:auto}
.card h3 + p,.card h4 + p,.card h5 + p,.card h6 + p{margin-top:11px}
.card__num{
  font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--purple-lt);
  display:block;margin-bottom:14px;
}

.on-ink .card,.on-navy .card,.on-deep .card{
  background:rgba(255,255,255,.045);border-color:var(--line-d);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.on-ink .card--hover:hover,.on-navy .card--hover:hover,.on-deep .card--hover:hover{
  background:rgba(255,255,255,.085);border-color:var(--line-d2);box-shadow:var(--sh-d);
}

.tag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:#fff;
}
.tag--p{background:var(--g)}
.tag--c{background:var(--y);color:#3B2A00}
.tag--e{background:var(--r)}
.tag--a{background:var(--b)}
.tag--purple{background:var(--purple)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;background:rgba(10,19,48,.05);color:var(--t2);
  display:inline-flex;align-items:center;gap:7px;
}
.on-ink .chip,.on-navy .chip,.on-deep .chip{background:rgba(255,255,255,.08);color:var(--on-dark-2)}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.chip--p::before{background:var(--g);opacity:1}
.chip--c::before{background:var(--y);opacity:1}
.chip--e::before{background:var(--r);opacity:1}
.chip--a::before{background:var(--b);opacity:1}
.chip--plain::before{display:none}

.lst{display:flex;flex-direction:column;gap:11px}
.lst li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--t2)}
.lst li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--purple-lt);transform:rotate(45deg);border-radius:1px;
}
.on-ink .lst li,.on-navy .lst li,.on-deep .lst li{color:var(--on-dark-2)}
.lst strong{color:var(--t1);font-weight:600}
.on-ink .lst strong,.on-navy .lst strong,.on-deep .lst strong{color:#fff}

.note{
  font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t4);display:flex;align-items:center;gap:8px;margin-top:16px;
}
.note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--y);flex:none}
.on-ink .note,.on-navy .note,.on-deep .note{color:var(--on-dark-4)}

/* ============================ 8. HEADER ================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:945;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(8,14,36,.82);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-d);
}
.site-header.is-light.is-stuck{
  background:rgba(255,255,255,.88);border-bottom-color:var(--line);
  box-shadow:0 2px 24px rgba(10,19,48,.06);
}
.header-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{width:34px;height:34px}
.brand__txt{line-height:1}
.brand__top{
  font-family:var(--fm);font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--on-dark-3);display:block;margin-bottom:3px;
}
.brand__name{font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff}
.is-light .brand__top{color:var(--t3)}
.is-light .brand__name{color:var(--ink)}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{
  font-size:14px;font-weight:500;padding:9px 13px;border-radius:999px;color:var(--on-dark-2);
  transition:color .2s,background .2s;position:relative;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.is-active{color:#fff}
.nav a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--purple-lt);border-radius:2px;
}
.is-light .nav a{color:var(--t2)}
.is-light .nav a:hover{color:var(--purple);background:rgba(75,31,145,.07)}
.is-light .nav a.is-active{color:var(--purple)}
.is-light .nav a.is-active::after{background:var(--purple)}

.header-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:16px}
.burger{
  display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;
  border:1px solid var(--line-d2);color:#fff;
}
.is-light .burger{border-color:var(--line-2);color:var(--ink)}
.burger svg{width:20px;height:20px}

.scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--purple-lt);z-index:950;width:0}

.mobile-menu{
  position:fixed;inset:0;z-index:940;background:rgba(8,14,36,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--header-h) + 26px) var(--gut) 40px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none}
/* menu aberto no topo: o cabecalho ainda nao esta preso, entao recebe fundo proprio */
body.no-scroll .site-header:not(.is-stuck){background:rgba(8,14,36,.98);border-bottom-color:var(--line-d)}
.mobile-menu a{
  font-family:var(--fd);font-weight:600;font-size:clamp(20px,5.6vw,26px);letter-spacing:-.02em;color:#fff;
  padding:15px 0;border-bottom:1px solid var(--line-d);display:flex;align-items:baseline;gap:14px;
}
.mobile-menu a i{font-family:var(--fm);font-style:normal;font-size:11px;color:var(--purple-lt);font-weight:500}
.mobile-menu .btn{margin-top:26px}

/* ============================ 9. DOCK ================================== */
.dock{position:fixed;right:18px;bottom:18px;z-index:880;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dock__panel{
  background:rgba(10,19,48,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-d);border-radius:var(--r-md);padding:16px;width:240px;
  box-shadow:var(--sh-d);transform-origin:bottom right;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.dock__panel.is-hidden{opacity:0;visibility:hidden;transform:scale(.94) translateY(8px);pointer-events:none}
.dock__title{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:12px;
}
.dock__link{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid transparent;transition:.22s;margin-bottom:7px;line-height:1.25;
}
.dock__link svg{width:16px;height:16px;flex:none}
.dock__link:hover{background:rgba(255,255,255,.14);transform:translateX(-2px)}
.dock__link--fs{border-color:rgba(242,179,28,.4)}
.dock__link--fs svg{color:var(--y)}
.dock__link--ac{border-color:rgba(93,181,49,.4)}
.dock__link--ac svg{color:var(--g)}
.dock__link--wa{border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.12)}
.dock__link--wa svg{color:#25D366}
.dock__link small{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);margin-top:2px}
.dock__toggle{
  width:54px;height:54px;border-radius:50%;background:var(--purple);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 32px rgba(75,31,145,.45);
  transition:transform .3s var(--ease),background .25s;
}
.dock__toggle:hover{transform:scale(1.06);background:var(--purple-hi)}
.dock__toggle svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.dock.is-open .dock__toggle svg{transform:rotate(135deg)}

/* ============================ 10. HERO ================================= */
.hero{
  position:relative;min-height:min(100svh,940px);display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(28px,6vh,64px));
  padding-bottom:clamp(36px,7vh,80px);overflow:hidden;
}
.hero__grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,64px);align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;border-radius:999px;
  border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
  font-family:var(--fm);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-2);margin-bottom:26px;
}
.hero__badge b{color:#fff;font-weight:500}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--g);flex:none;box-shadow:0 0 0 4px rgba(106,207,39,.22)}
.hero h1{margin-bottom:0;font-size:clamp(34px,5vw,64px)}
.hero__sub{max-width:46ch;margin-top:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__tag{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;margin-top:34px;
}
.hero__visual{position:relative}
.hero__orbit{width:100%;height:auto;max-height:min(74vh,660px);margin-inline:auto}

.orbit-spin{transform-box:fill-box;transform-origin:center;animation:spin 52s linear infinite}
.orbit-spin--rev{animation-duration:72s;animation-direction:reverse}
.orbit-spin--fast{animation-duration:34s}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse-soft{animation:pulseSoft 4.2s ease-in-out infinite}
@keyframes pulseSoft{0%,100%{opacity:.35}50%{opacity:.95}}
/* Os nucleos dos CTDs ficam parados: quem gira sao as orbitas */

/* Barra de números sob o hero */
.stat-band{border-top:1px solid var(--line-d);padding-top:clamp(24px,4vh,40px);margin-top:clamp(32px,6vh,64px)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__n{font-family:var(--fd);font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.04em;color:#fff}
.stat__l{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.stat__d{font-size:13px;line-height:1.5;color:var(--on-dark-3);max-width:30ch}
.on-paper .stat__n,.on-paper-2 .stat__n,.on-white .stat__n{color:var(--ink)}
.on-paper .stat__l,.on-paper-2 .stat__l{color:var(--t4)}
.on-paper .stat__d,.on-paper-2 .stat__d{color:var(--t3)}

/* ============================ 11. MARQUEE ============================== */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;gap:36px;width:max-content;animation:marquee 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--fd);font-weight:600;font-size:clamp(14px,1.3vw,19px);
  color:var(--on-dark-4);white-space:nowrap;transition:color .3s;
}
.marquee span:hover{color:var(--on-dark-2)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================ 12. CTDs ================================= */
.ctd-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(24px,3.4vh,34px)}
.ctd-tab{
  display:flex;align-items:center;gap:12px;padding:13px 20px 13px 14px;border-radius:14px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.04);color:var(--on-dark-2);
  transition:.28s var(--ease);text-align:left;flex:1 1 200px;
}
.ctd-tab .mk{width:30px;height:30px;flex:none}
.ctd-tab__t{font-family:var(--fd);font-weight:700;font-size:15px;color:#fff;letter-spacing:-.01em;display:block}
.ctd-tab__s{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);display:block;margin-top:3px}
.ctd-tab:hover{background:rgba(255,255,255,.09);border-color:var(--line-d2);transform:translateY(-2px)}
.ctd-tab.is-active{background:rgba(255,255,255,.11);border-color:var(--tabc,var(--purple-lt));box-shadow:0 0 0 1px var(--tabc,var(--purple-lt)) inset}
.ctd-tab.is-active .ctd-tab__s{color:var(--tabc,var(--purple-lt))}

.ctd-panel{display:none}
.ctd-panel.is-active{display:block;animation:fadeUp .5s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ctd-panel__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.ctd-panel__mark{width:clamp(64px,7vw,96px);height:auto;margin-bottom:20px}
.ctd-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px}
.ctd-meta h4{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);font-weight:500;margin-bottom:7px}
.ctd-meta p{font-size:14px;line-height:1.55;color:var(--on-dark-2)}

.mk{display:block}

/* Ciclo */
.cycle{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,6vh,84px)}
.cycle__steps{display:flex;flex-direction:column;gap:16px}
.cycle__step{display:flex;gap:16px;align-items:flex-start}
.cycle__step .n{font-family:var(--fm);font-size:11px;letter-spacing:.1em;padding-top:3px;flex:none;width:22px}
.cycle__step p{font-size:14.5px;line-height:1.55;color:var(--on-dark-2)}
.cycle__step strong{color:#fff;font-weight:600}
.flow{display:flex;align-items:center;gap:clamp(10px,2vw,26px);flex-wrap:wrap;margin-top:clamp(24px,3.6vh,36px)}
.flow__node{display:flex;align-items:center;gap:10px}
.flow__node svg{width:24px;height:24px}
.flow__node span{font-family:var(--fd);font-weight:600;font-size:clamp(14px,1.2vw,17px);color:#fff}
.flow__ar{color:var(--on-dark-4);font-size:18px}

/* ============================ 13. ASSESSMENTS ========================== */
.asmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.asmt{
  cursor:pointer;text-align:left;width:100%;display:flex;flex-direction:column;gap:12px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,2vw,28px);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.asmt::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px 220px at 80% 0%,var(--ac,rgba(75,31,145,.1)),transparent 70%);
}
.asmt:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.asmt:hover::after{opacity:1}
.asmt__ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--ab,rgba(75,31,145,.09));color:var(--ac,var(--purple));
}
.asmt__ico svg{width:22px;height:22px}
.asmt__more{
  margin-top:auto;padding-top:8px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);display:inline-flex;align-items:center;gap:8px;
  transition:gap .25s var(--ease);
}
.asmt:hover .asmt__more{gap:12px}
.asmt__more svg{width:13px;height:13px}

.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.module{padding:20px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);transition:.3s var(--ease)}
.module:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:var(--sh-1)}
.module h4{font-family:var(--fd);font-weight:600;font-size:15px;margin-bottom:5px;letter-spacing:-.01em}
.module p{font-size:12.5px;line-height:1.5;color:var(--t3)}

/* ============================ 14. TRILHA ===============================
   A trilha deixou de ser pilha e virou percurso: quatro marcos em linha,
   ligados por um fio contínuo, lidos da esquerda para a direita.

   1. O FIO É DESENHADO MARCO A MARCO, e não como uma linha única atrás da
      grade. É o que permite mudar de peso e de cor a cada passo: 1px em branco
      fraco na porta de entrada, 4px no amarelo cheio do CTDC na licença. O
      grid tem gap 0 e o respiro vem do padding interno de cada marco; o
      segmento anula esse padding com margem negativa, então os quatro se
      encostam e formam um traço só que engrossa e esquenta conforme avança.
   2. O NÓ É UM LOSANGO preenchido com a cor do próprio segmento, na aresta
      esquerda do marco. Nó e fio na mesma cor: o fio passa por baixo sem
      precisar de máscara sobre o gradiente da seção. O losango é a mesma
      marca de item do .lst e do .fid-src. O nível 04 fecha o percurso com um
      nó maior na aresta direita (<i> dentro da via), que no desktop aponta
      para o botão e no mobile desce até ele.
   3. AS PONTAS SÃO NOMEADAS acima do fio (Entrada · Licença de formar), então
      a direção do percurso é declarada antes de o olho começar a percorrer.
      Some abaixo de 920px, onde o eixo gira e as pontas deixam de existir na
      horizontal.
   4. A ALTURA DO RÓTULO DE ETAPA É RESERVADA (min-height de duas linhas) para
      os quatro fios caírem na mesma altura mesmo quando um rótulo quebra, e a
      ficha Habilita/Emite é empurrada para a base com margin-top:auto, então
      as quatro colunas fecham alinhadas e se leem por linha, na horizontal,
      que é a direção do percurso.

   A ficha diz o que o nível habilita e o documento que ele emite. Os quatro
   documentos já estavam publicados nesta seção (a linha pequena do .trail__hab
   de hoje) e o do nível 01 está no site.js, em GRADE.bonus. Nenhum
   pré-requisito de matrícula é afirmado, porque a página nunca afirmou nenhum
   além do "sem pré-requisito" do nível 01.

   Linguagem de dossiê: sem sombra, sem translateY, sem brilho. O retorno ao
   mouse é o fio que clareia e engorda 1px (a tarja que engorda, aplicada ao
   percurso) e o número que vai a branco. Como o fio é absoluto dentro de uma
   faixa de altura fixa, engordar não empurra nada.

   Preço saiu do bloco. O nível 01 traz "bolsa de 100%" no rótulo de etapa, em
   verde. A palavra "gratuito" não aparece em lugar nenhum da página: o curso
   tem preço e a Freedom cobre, o que é fato diferente e melhor de contar.

   Contraste: o rótulo de etapa e a descrição em --on-dark-3, os dt da ficha em
   --on-dark-4 (o mesmo piso do .note). A rampa amarela só entra em corpo
   grande (o algarismo, a partir de 22px em peso 800) e no fio, que é
   decoração. O verde é o mesmo --g que a seção já usava no .free.

   MOBILE: abaixo de 920px o mesmo fio gira 90 graus e vira canaleta vertical à
   esquerda. Nenhum conteúdo é escondido, e a progressão de peso e cor continua
   legível de cima para baixo.
   ======================================================================== */
.trilha{--pad:clamp(14px,1.9vw,28px);--axis:12px;margin-top:clamp(28px,4vh,44px)}

/* as pontas do percurso, nomeadas acima do fio */
.trilha__pontas{
  display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-4);
}
.trilha__pontas span:last-child{color:rgba(250,205,25,.72)}

.trilha__fio{display:grid;grid-template-columns:repeat(4,1fr);gap:0}

.trilha__marco{
  --fio:rgba(255,255,255,.28);    /* cor do segmento */
  --fio-hi:rgba(255,255,255,.55); /* cor do segmento sob o mouse */
  --num:var(--on-dark-4);         /* cor do algarismo */
  --h:1px;                        /* peso do segmento */
  --no:9px;                       /* lado do losango */
  position:relative;display:flex;flex-direction:column;padding-right:var(--pad);
}
.trilha__marco--n2{--fio:rgba(250,205,25,.40);--fio-hi:rgba(250,205,25,.62);--num:rgba(250,205,25,.62);--h:2px;--no:11px}
.trilha__marco--n3{--fio:rgba(250,205,25,.66);--fio-hi:rgba(250,205,25,.86);--num:rgba(250,205,25,.82);--h:3px;--no:13px}
.trilha__marco--n4{--fio:var(--y);--fio-hi:var(--y);--num:var(--y);--h:4px;--no:15px}

.trilha__etapa{
  display:block;font-family:var(--fm);font-size:9.5px;font-weight:500;line-height:1.5;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-3);min-height:3em;
}
.trilha__etapa b{font-weight:500;color:var(--g)}

/* a faixa do fio: altura fixa, e o segmento vaza o padding do marco para
   encostar no segmento seguinte */
.trilha__via{position:relative;display:block;height:22px;margin:10px calc(var(--pad) * -1) 14px 0}
.trilha__via::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:var(--h);
  background:var(--fio);transform:translateY(-50%);
  transition:height .3s var(--ease),background-color .3s var(--ease);
}
.trilha__via::after,.trilha__via i{
  position:absolute;top:50%;width:var(--no);height:var(--no);border-radius:1px;
  background:var(--fio);transform:translateY(-50%) rotate(45deg);
  transition:background-color .3s var(--ease);
}
.trilha__via::after{content:"";left:0}
.trilha__via i{right:2px;width:calc(var(--no) + 4px);height:calc(var(--no) + 4px)}

.trilha__marco:hover .trilha__via::before{height:calc(var(--h) + 1px);background:var(--fio-hi)}
.trilha__marco:hover .trilha__via::after,
.trilha__marco:hover .trilha__via i{background:var(--fio-hi)}

.trilha__n{
  font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.3vw,32px);line-height:1;
  letter-spacing:-.03em;color:var(--num);transition:color .3s var(--ease);
}
.trilha__marco:hover .trilha__n{color:#fff}

.trilha__marco h3{color:#fff;margin-top:10px}
.trilha__d{font-family:var(--fd);font-size:13.5px;line-height:1.5;color:var(--on-dark-3);margin-top:7px}

/* o que o nível habilita e o documento que ele emite, presos na base para as
   quatro colunas se lerem por linha */
.trilha__ficha{display:grid;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-d)}
.trilha__ficha dt{font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-4)}
.trilha__ficha dd{font-family:var(--fd);font-size:14px;line-height:1.35;letter-spacing:-.012em;margin-top:4px}
.trilha__hab dd{font-weight:600;color:#fff}
.trilha__doc dd{font-weight:500;font-size:13px;color:var(--on-dark-2)}

/* o destino do percurso: onde ficam matrícula e turmas, e o único botão da
   trilha. O fio termina no lugar para onde a pessoa deve clicar. */
.trilha__fim{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vh,40px);
  padding-top:clamp(18px,2.2vh,26px);border-top:1px solid var(--line-d);
}
.trilha__fim .note{flex:1;min-width:min(300px,100%);margin-top:0}

/* A conta da bolsa. Dizer "gratuito" apagaria o investimento; dizer quanto já
   foi concedido transforma o mesmo fato em prova de compromisso. O algarismo é
   calculado em PHP a partir de duas constantes no topo do index, então não
   envelhece sozinho, e a conta fica escrita embaixo para ser auditável. */
.bolsa{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(18px,3vw,44px);margin-top:clamp(26px,3.4vh,40px);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2vw,28px);
  border:1px solid rgba(250,205,25,.34);border-radius:var(--r-md);
  background:rgba(250,205,25,.06);
}
.bolsa__n{display:flex;flex-direction:column;gap:7px}
.bolsa__n b{
  font-family:var(--fd);font-weight:800;font-size:clamp(25px,3.2vw,42px);line-height:1;
  letter-spacing:-.035em;color:var(--y);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bolsa__n > span{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.bolsa__d{font-family:var(--fp);font-size:15px;line-height:1.62;color:var(--on-dark-2);margin:0}
.bolsa__d b{color:#fff;font-weight:600;white-space:nowrap}
.bolsa__d em{
  display:block;margin-top:9px;font-style:normal;font-family:var(--fm);font-size:10px;
  letter-spacing:.14em;color:var(--on-dark-4);font-variant-numeric:tabular-nums;
}
@media (max-width:620px){.bolsa{grid-template-columns:1fr;gap:14px}}
@media print{
  .bolsa__n b{color:#000!important}
  .bolsa__n > span,.bolsa__d,.bolsa__d em{color:#333!important}
  .bolsa__d b{color:#000!important}
}

/* botão do CTDC: os mesmos valores da tag amarela que abre a seção. De
   contorno, para não disputar com o CTA roxo da bolsa que vem logo abaixo. */
.btn--ctdc{background:rgba(250,205,25,.12);color:var(--y);border-color:rgba(250,205,25,.42)}
.btn--ctdc:hover{background:rgba(250,205,25,.2);border-color:rgba(250,205,25,.7);color:var(--y)}

/* ---- responsivo da trilha ---- */
@media (max-width:1080px){
  .trilha{--pad:clamp(12px,1.6vw,20px)}
  .trilha__d{font-size:13px}
  .trilha__ficha dd{font-size:13.5px}
}
@media (max-width:920px){
  /* o mesmo fio gira: vira canaleta vertical à esquerda, com a via em posição
     absoluta cobrindo o marco inteiro (padding-bottom incluído), então os
     quatro segmentos continuam encostados */
  .trilha{--pad:0px}
  .trilha__pontas{display:none}
  .trilha__fio{grid-template-columns:1fr}
  .trilha__marco{padding:0 0 clamp(24px,4.5vw,34px) 38px}
  .trilha__etapa{min-height:0}
  .trilha__via{position:absolute;left:0;top:0;bottom:0;width:var(--axis);height:auto;margin:0}
  .trilha__via::before{left:50%;right:auto;top:0;bottom:0;width:var(--h);height:auto;transform:translateX(-50%)}
  .trilha__marco:first-child .trilha__via::before{top:9px}
  .trilha__marco:hover .trilha__via::before{height:auto;width:calc(var(--h) + 1px)}
  .trilha__via::after{left:50%;top:9px;transform:translate(-50%,0) rotate(45deg)}
  .trilha__via i{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%,50%) rotate(45deg)}
  .trilha__marco h3{margin-top:8px}
  .trilha__ficha{grid-template-columns:1fr 1fr;gap:14px;max-width:520px}
}
@media (max-width:620px){
  .trilha__fim{flex-direction:column;align-items:stretch}
  .trilha__fim .btn{width:100%;white-space:normal}
}
@media (max-width:480px){
  .trilha{--axis:10px}
  .trilha__marco{padding-left:30px}
  .trilha__n{font-size:24px}
  .trilha__ficha{grid-template-columns:1fr;gap:10px}
}
@media print{
  /* a regra da camada 22 força .on-deep para fundo branco, mas não alcança as
     cores declaradas nos filhos: sem isto o fio e o texto somem no papel */
  .trilha__via::before,.trilha__via::after,.trilha__via i{background:#8A8A8A!important}
  .trilha__n,.trilha__marco h3,.trilha__hab dd{color:#000!important}
  .trilha__etapa,.trilha__etapa b,.trilha__d,.trilha__ficha dt,.trilha__doc dd{color:#444!important}
  .trilha__fio{break-inside:avoid}
}

/* ============================ 15. PLANOS =============================== */
.plan{display:flex;flex-direction:column;height:100%}
.plan--hl{background:rgba(250,205,25,.08);border-color:rgba(250,205,25,.34)}
.plan__badge{
  position:absolute;top:18px;right:18px;font-family:var(--fm);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--y);
}
.plan__price{display:flex;align-items:baseline;gap:8px;margin:18px 0 4px}
.plan__price b{font-family:var(--fd);font-weight:800;font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:-.04em;color:#fff}
.plan__price span{font-size:13px;color:var(--on-dark-3)}
.plan .lst{margin-top:20px;flex:1}
.plan .btn{margin-top:24px}

.benefit-row{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);padding-top:26px;margin-top:clamp(24px,3.4vh,36px);border-top:1px solid var(--line-d)}
.benefit{display:flex;flex-direction:column;gap:6px}
.benefit b{font-family:var(--fd);font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;color:var(--g);line-height:1}
.benefit span{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3)}

/* ============================ 16. MARCAS/SÍMBOLOS ====================== */
.brand-card{padding:clamp(24px,2.8vw,40px)}
.brand-card__head{display:flex;align-items:center;gap:20px}
.brand-card__head .mk{width:clamp(52px,5.4vw,74px);flex:none;background:var(--ink);border-radius:16px;padding:9px}
.brand-card__div{width:1px;align-self:stretch;background:var(--line)}
.brand-card__name{font-family:var(--fd);font-weight:600;font-size:clamp(19px,2vw,27px);letter-spacing:-.02em}
.brand-card__name .thin{letter-spacing:.24em;font-weight:400}

/* Fundo escuro: as marcas tem vaos brancos que precisam de contraste */
.symbol{text-align:left;background:var(--ink);border-color:transparent;color:var(--on-dark-1)}
.symbol.card--hover:hover{border-color:transparent}
.symbol h3{color:#fff}
.symbol .body{color:var(--on-dark-2)}
.symbol .mk{width:clamp(58px,6vw,82px);margin-bottom:20px}
.symbol__meta{display:flex;gap:22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d)}
.symbol__meta div{display:flex;flex-direction:column;gap:3px}
.symbol__meta dt{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-4)}
.symbol__meta dd{font-family:var(--fd);font-weight:600;font-size:14px;color:#fff}

.swatches{display:flex;gap:8px}
.swatches i{width:30px;height:30px;border-radius:8px;display:block}

/* ============================ 17. VALORES / TIME ======================= */
.quote-block{border-left:3px solid var(--purple);padding-left:clamp(16px,1.8vw,26px)}
.quote-block + .quote-block{margin-top:24px}
.quote-block h3{font-family:var(--fm);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);margin-bottom:9px;font-weight:500}

.founder{
  position:relative;border-radius:var(--r-lg);overflow:hidden;text-align:left;width:100%;
  background:rgba(255,255,255,.045);border:1px solid var(--line-d);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.founder:hover{transform:translateY(-6px);border-color:var(--line-d2);box-shadow:var(--sh-d)}
.founder__img{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(160deg,#16294F,#0A1330)}
.founder__img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s var(--ease)}
.founder:hover .founder__img img{transform:scale(1.045)}
.founder__body{padding:22px 24px 26px;position:relative}
.founder__bar{position:absolute;top:0;left:0;right:0;height:3px}
.founder__badge{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;display:block}
.founder__name{font-family:var(--fd);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.02em}
.founder__role{font-size:13.5px;color:var(--on-dark-3);margin-top:4px}
.founder__more{
  margin-top:14px;font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-lt);display:inline-flex;align-items:center;gap:8px;transition:gap .25s var(--ease);
}
.founder:hover .founder__more{gap:12px}
.founder__more svg{width:13px;height:13px}

/* ============================ 18. CTA / FOOTER ========================= */
.cta-final{text-align:center}
.cta-final .marks{display:flex;justify-content:center;gap:clamp(20px,3vw,44px);margin-bottom:clamp(24px,4vh,42px)}
.cta-final .marks svg{width:clamp(40px,4.6vw,60px)}
.cta-final .lead{margin-inline:auto;max-width:54ch}
.cta-final__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vh,40px)}
.cta-final__contacts{
  display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,3vw,44px);
  margin-top:clamp(30px,4.6vh,48px);font-family:var(--fm);font-size:11.5px;
  letter-spacing:.06em;color:var(--on-dark-3);
}
.cta-final__contacts a{display:inline-flex;align-items:center;gap:9px;transition:color .2s}
.cta-final__contacts a:hover{color:#fff}
.cta-final__contacts svg{width:15px;height:15px;color:var(--purple-lt)}

.site-footer{background:var(--void);color:var(--on-dark-2);padding-block:clamp(52px,7vh,84px) 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.footer-brand svg{width:38px;margin-bottom:18px}
.footer-brand p{font-size:13.5px;line-height:1.7;color:var(--on-dark-3)}
.footer-brand strong{color:#fff;font-weight:600}
.footer-col h3{
  font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-4);margin-bottom:16px;font-weight:500;
}
.footer-col a{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:5px 0;color:var(--on-dark-3);transition:color .2s,transform .2s}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-bottom{
  margin-top:clamp(38px,5vh,58px);padding-block:24px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--on-dark-4);
}
.footer-bottom .mono{font-size:9.5px;letter-spacing:.24em;color:var(--purple-lt)}

/* ============================ 19. MODAIS =============================== */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.modal.is-open{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(6,11,28,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__box{
  position:relative;background:var(--white);border-radius:var(--r-lg);width:min(760px,100%);
  max-height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--sh-3);animation:modalIn .42s var(--ease-out) both;
}
.modal__box--wide{width:min(940px,100%)}
.modal__box--narrow{width:min(500px,100%)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal__head{
  padding:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:none;
  background:var(--white);
}
.modal__head--dark{background:linear-gradient(140deg,#101F44,#241A55);border-bottom-color:var(--line-d);color:#fff}
.modal__head--dark .modal__sub{color:var(--on-dark-3)}
.modal__title{font-family:var(--fd);font-weight:700;font-size:clamp(19px,2.1vw,26px);letter-spacing:-.025em;line-height:1.2}
.modal__sub{font-size:13.5px;color:var(--t3);margin-top:6px}
.modal__close{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(10,19,48,.06);color:var(--t2);transition:.22s;
}
.modal__close:hover{background:var(--purple);color:#fff;transform:rotate(90deg)}
.modal__head--dark .modal__close{background:rgba(255,255,255,.12);color:#fff}
.modal__close svg{width:18px;height:18px}
.modal__body{padding:clamp(22px,2.6vw,32px);overflow-y:auto;flex:1}
.modal__foot{
  padding:20px clamp(22px,2.6vw,32px);border-top:1px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);
}
.modal__stats{display:flex;gap:26px}
.modal__stats div{display:flex;flex-direction:column}
.modal__stats b{font-family:var(--fd);font-weight:700;font-size:19px;color:var(--purple)}
.modal__stats span{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}

.mblock{margin-bottom:26px}
.mblock:last-child{margin-bottom:0}
.mblock__t{
  display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:16px;
  letter-spacing:-.015em;margin-bottom:12px;
}
.mblock__t svg{width:18px;height:18px;color:var(--purple)}
.mblock p{font-size:14.5px;line-height:1.65;color:var(--t2)}

.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.dl{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--paper);transition:.28s var(--ease);
}
.dl:hover{border-color:var(--purple);background:var(--purple-soft);transform:translateY(-3px)}
.dl b{font-family:var(--fd);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.dl b svg{width:15px;height:15px;color:var(--purple)}
.dl span{font-size:12px;color:var(--t3);line-height:1.45}
.dl em{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);font-style:normal;margin-top:4px}

.mod-item{padding:18px 0;border-bottom:1px solid var(--line)}
.mod-item:last-child{border-bottom:none;padding-bottom:0}
.mod-item__h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.mod-item__n{font-family:var(--fm);font-size:11px;color:var(--purple);letter-spacing:.1em;font-weight:500}
.mod-item__t{font-family:var(--fd);font-weight:600;font-size:15.5px;letter-spacing:-.012em;flex:1;min-width:min(200px,100%)}
.mod-item__d{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}
.mod-item ul{display:flex;flex-wrap:wrap;gap:7px}
.mod-item li{font-size:12px;padding:5px 10px;border-radius:6px;background:var(--paper-2);color:var(--t2)}

/* Formulário */
.form-field{margin-bottom:16px}
.form-field label{
  display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;
}
.form-field label svg{width:13px;height:13px}
.form-field input{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--paper);font-size:15px;transition:.22s;
}
.form-field input::placeholder{color:var(--t4)}
.form-field input:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(75,31,145,.12)}
.form-field.has-error input{border-color:var(--r);background:rgba(230,51,41,.04)}
.form-error{display:block;font-size:12px;color:var(--r);margin-top:6px;min-height:16px}
.form-note{font-size:11.5px;color:var(--t4);text-align:center;margin-top:14px;line-height:1.5}
.btn.is-loading{opacity:.72;pointer-events:none}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

.form-success{text-align:center;padding:12px 0}
.form-success__ico{
  width:66px;height:66px;border-radius:50%;background:rgba(93,181,49,.12);color:var(--g);
  display:grid;place-items:center;margin:0 auto 20px;
}
.form-success__ico svg{width:30px;height:30px}

.lead-hero{text-align:center;margin-bottom:24px}
.lead-hero__ico{
  width:62px;height:62px;border-radius:20px;background:var(--purple-soft);color:var(--purple);
  display:grid;place-items:center;margin:0 auto 18px;
}
.lead-hero__ico svg{width:28px;height:28px}

/* Modal fundador */
.fmodal__head{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.fmodal__img{width:104px;height:104px;border-radius:22px;overflow:hidden;flex:none;background:var(--paper-2)}
.fmodal__img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fmodal__badge{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;display:inline-block}
.fmodal__soc{display:flex;gap:10px;margin-top:14px}
.fmodal__soc span{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--t3);
  padding:6px 11px;border-radius:8px;background:var(--paper-2);
}
.fmodal__soc svg{width:13px;height:13px}

/* ============================ 20. REVEAL =============================== */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* ============================ 21. RESPONSIVO =========================== */
@media (max-width:1080px){
  .header-actions .btn{display:none}
  .hero__grid{grid-template-columns:1fr;gap:clamp(28px,6vh,52px)}
  .hero__visual{order:-1;max-width:520px;margin-inline:auto}
  .hero{min-height:0}
  .ctd-panel__grid{grid-template-columns:1fr;gap:28px}
  .cycle{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .sec-head--split{grid-template-columns:1fr;align-items:start}
}
@media (max-width:920px){
  :root{--header-h:66px}
  .nav{display:none}
  .header-actions{margin-left:auto}
  .burger{display:flex}
  .header-actions .btn{display:none}
  .split,.split--w{grid-template-columns:1fr;gap:32px}
  .g3,.g4,.asmt-grid,.modules-grid{grid-template-columns:repeat(2,1fr)}
  .dl-grid{grid-template-columns:1fr}
  .hero__orbit{max-height:none}
}
@media (max-width:620px){
  .g2,.g3,.g4,.asmt-grid,.modules-grid{grid-template-columns:1fr}
  .ctd-meta{grid-template-columns:1fr;gap:16px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .dock{right:12px;bottom:12px}
  .dock__panel{width:min(240px,calc(100vw - 24px))}
  .modal__foot{flex-direction:column;align-items:stretch}
  .modal__foot .btn{width:100%}
  .stat-band .g4{gap:26px}
  .cta-final__contacts{flex-direction:column;gap:12px}
  .brand-card__head{flex-direction:column;align-items:flex-start;gap:14px}
  .brand-card__div{display:none}
}
@media (max-width:480px){
  /* O SVG do hero escala com a largura, entao o corpo dentro do viewBox sobe para o
     rotulo nao cair abaixo do piso tipografico da pagina. */
  .ctd-node text:first-of-type{font-size:23px}
  .ctd-node text:last-of-type{font-size:16px}
}

/* ============================ 22. ACESSIBILIDADE ======================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}
.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;
}
.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:1100;background:var(--purple);color:#fff;
  padding:12px 20px;border-radius:10px;font-weight:600;
}
.skip-link:focus{left:12px}

@media print{
  .site-header,.dock,.scroll-bar,.mobile-menu,.modal{display:none!important}
  body{background:#fff}
  .section{padding-block:24px;break-inside:avoid}
  .on-ink,.on-navy,.on-deep{background:#fff!important;color:#000!important}
}

.footer-col a svg{width:14px;height:14px;flex:none;opacity:.6;transition:opacity .2s}
.footer-col a:hover svg{opacity:1}

/* ============================ 23. CREDENCIAL =============================
   Crachá trazido do dossiê Credencial-ctdc.html. Toda a métrica interna é em
   em, com 1em = largura/34,4, então o cartão inteiro escala por --cw.
   ======================================================================== */
.cred-stage{
  display:grid;grid-template-columns:1fr;justify-items:center;
  gap:clamp(30px,4vw,52px) clamp(22px,3.4vw,44px);
}
@media(min-width:780px){.cred-stage{grid-template-columns:repeat(2,max-content)}}
/* os quatro portadores lado a lado: o cartão encolhe para caber no container.
   Como toda a métrica interna é em em, ele escala inteiro por --cw. */
@media(min-width:1200px){
  .cred-stage{
    --cgap:20px;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(26px,3vh,38px) var(--cgap);
  }
  .cred-stage .cred{--cw:min(276px,calc((min(100vw,var(--maxw)) - 2*var(--gut) - 3*var(--cgap) - 18px)/4))}
  .cred-stage .cred-holder{width:100%;max-width:min(276px,calc((min(100vw,var(--maxw)) - 2*var(--gut) - 3*var(--cgap) - 18px)/4))}
}
.cred-holder{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%}
.cred-cap{min-height:2.6em}
.cred-actions{margin-top:auto}
.cred-cap{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3);text-align:center;
}
.cred-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cred-btn{
  appearance:none;background:none;padding:8px 14px;cursor:pointer;
  font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-3);border:1px solid var(--line-d);border-radius:99px;transition:.2s;
}
.cred-btn:hover{color:#fff;border-color:var(--purple-lt);background:rgba(124,77,209,.16)}

.cred{
  --cw:clamp(236px,76vw,344px);
  --edu:#FACD19;--plat:#458CE6;--cons:#6ACF27;
  --roxo:#4B1F91;--roxo-lt:#7C4DD1;--acc:var(--roxo-lt);
  width:var(--cw);aspect-ratio:344/546;font-size:calc(var(--cw)/34.4);
  position:relative;perspective:1600px;font-family:var(--fd);line-height:1.62;
}
.cred--p{--acc:#6ACF27}
.cred--c{--acc:#FACD19}
.cred--e{--acc:#FF3131}
.cred--a{--acc:#458CE6}
.cred--fs{--acc:#7C4DD1}

.cred__flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.5,.05,.2,1)}
.cred.is-flipped .cred__flip{transform:rotateY(180deg)}
.cred__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:1.9em;overflow:hidden;
  background:linear-gradient(158deg,#232B36 0%,#161C25 38%,#0E131A 100%);
  box-shadow:
    0 1.4em 3.4em -1.2em rgba(0,0,0,.62),
    0 .3em .9em -.5em rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.09);
  display:flex;flex-direction:column;color:#EDF1F6;
}
.cred__face--back{transform:rotateY(180deg)}
/* laminacao holografica */
.cred__face::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.30;
  background:repeating-linear-gradient(114deg,rgba(255,255,255,.14) 0 2px,rgba(255,255,255,0) 2px 9px);
}
.cred__guil{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;color:#9FB4CC}

.cred__spectrum{display:flex;height:.42em;flex:0 0 auto;position:relative;z-index:3}
.cred__spectrum i{flex:1;display:block}
.cred__spectrum i:nth-child(1){background:var(--edu)}
.cred__spectrum i:nth-child(2){background:var(--plat)}
.cred__spectrum i:nth-child(3){background:var(--cons)}
.cred__spectrum i:nth-child(4){flex:0 0 14%;background:var(--roxo)}

.cred__body{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;padding:1.5em 1.6em 1.25em}

.cred__head{display:flex;align-items:flex-start;gap:.9em}
.cred__mk{width:2.7em;height:2.7em;flex:0 0 auto;display:block;object-fit:contain;
  filter:drop-shadow(0 .1em .2em rgba(0,0,0,.45))}
.cred__wm{flex:1;min-width:0}
.cred__wm b{display:block;font-size:.94em;font-weight:800;letter-spacing:.15em;line-height:1.15}
.cred__wm span{display:block;font-family:var(--fm);font-size:.52em;font-weight:400;letter-spacing:.17em;
  color:rgba(237,241,246,.5);margin-top:.35em;line-height:1.4}
.cred__seal{width:4.6em;height:4.6em;flex:0 0 auto;margin-top:-.15em;position:relative}
.cred__seal>svg{position:absolute;inset:0;width:100%;height:100%}
.cred__seal>img{position:absolute;left:31.5%;top:31.5%;width:37%;height:37%;object-fit:contain;display:block}

.cred__hr{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.05));margin:.95em 0;flex:0 0 auto}

.cred__ident{display:flex;gap:1.1em;flex:0 0 auto}
.cred__photo{
  width:10.8em;flex:0 0 auto;aspect-ratio:85/121;border-radius:.55em;overflow:hidden;position:relative;
  background:#DDE2EA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 .35em .8em -.3em rgba(0,0,0,.55);
}
.cred__photo img{width:100%;height:100%;object-fit:cover}
.cred__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(122deg,rgba(124,77,209,.13),rgba(30,136,229,0) 48%,rgba(76,175,80,.10)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,0) 1px 3px);
}
.cred__pcorner{position:absolute;right:.35em;bottom:.35em;width:1.5em;height:1.5em;border-radius:.2em;z-index:2;
  background:conic-gradient(from 210deg,var(--edu),var(--cons),var(--plat),var(--roxo-lt),var(--edu));
  opacity:.85;mix-blend-mode:screen;filter:blur(.02em)}
.cred__idcol{flex:1;min-width:0;display:flex;flex-direction:column}
.cred__bigmark{font-size:3.6em;font-weight:800;letter-spacing:.02em;line-height:.86;margin-top:-.06em}
.cred__underrule{display:flex;height:.16em;margin:.5em 0 .6em;border-radius:99px;overflow:hidden}
.cred__underrule i{flex:1}
.cred__underrule i:nth-child(1){background:var(--edu)}
.cred__underrule i:nth-child(2){background:var(--plat)}
.cred__underrule i:nth-child(3){background:var(--cons)}
.cred__microline{font-family:var(--fm);font-size:.5em;letter-spacing:.13em;line-height:1.55;
  color:rgba(237,241,246,.52);text-transform:uppercase}
.cred__grade{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
  padding:.42em .7em;border-radius:.35em;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  font-family:var(--fm);font-size:.52em;letter-spacing:.17em;text-transform:uppercase;color:#fff}
.cred__grade i{width:.55em;height:.55em;border-radius:50%;background:var(--acc);box-shadow:0 0 .5em var(--acc)}

.cred__name{margin-top:1.05em;flex:0 0 auto}
.cred__name .lbl{font-family:var(--fm);font-size:.48em;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,241,246,.42)}
.cred__name b{display:block;font-size:1.72em;font-weight:800;letter-spacing:-.005em;line-height:1.1;margin-top:.22em}
.cred__name .role{font-size:.86em;font-weight:500;color:rgba(237,241,246,.72);margin-top:.3em;line-height:1.35}

.cred__grow{flex:1;min-height:.6em}

.cred__levels{
  flex:0 0 auto;border-radius:.7em;padding:.85em .9em .9em;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 .1em .5em rgba(0,0,0,.3);
}
.cred__levels .cap{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--fm);font-size:.46em;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,241,246,.55)}
.cred__lrow{display:flex;align-items:center;gap:.62em;margin-top:.74em}
.cred__lrow .pl{width:6.4em;flex:0 0 auto;font-family:var(--fm);font-size:.5em;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(237,241,246,.8)}
.cred__lrow .sq{display:flex;gap:.42em;flex:0 0 auto}
.cred__lrow .sq i{width:2.5em;height:2.5em;flex:0 0 auto;border-radius:.18em;display:block;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cred__lrow .num{margin-left:auto;flex:0 0 auto;font-family:var(--fm);font-size:.64em;font-weight:600;letter-spacing:.06em}
/* rampas: mais escuro conforme o acesso e mais completo */
.cred__lrow.edu i.on:nth-child(1){background:#FDF1C5;box-shadow:none}
.cred__lrow.edu i.on:nth-child(2){background:#FADF7C;box-shadow:none}
.cred__lrow.edu i.on:nth-child(3){background:#F7CF3E;box-shadow:none}
.cred__lrow.edu i.on:nth-child(4){background:#FACD19;box-shadow:none}
.cred__lrow.edu i.on:nth-child(5){background:#B98F00;box-shadow:none}
.cred__lrow.edu .num{color:var(--edu)}
.cred__lrow.plat i.on:nth-child(1){background:#CBE3FA;box-shadow:none}
.cred__lrow.plat i.on:nth-child(2){background:#95C6F3;box-shadow:none}
.cred__lrow.plat i.on:nth-child(3){background:#57A7EC;box-shadow:none}
.cred__lrow.plat i.on:nth-child(4){background:#458CE6;box-shadow:none}
.cred__lrow.plat i.on:nth-child(5){background:#125A9E;box-shadow:none}
.cred__lrow.plat .num{color:#6FB2F0}
.cred__lrow.cons i.on:nth-child(1){background:#CFEAD1;box-shadow:none}
.cred__lrow.cons i.on:nth-child(2){background:#9FD8A3;box-shadow:none}
.cred__lrow.cons i.on:nth-child(3){background:#6EC473;box-shadow:none}
.cred__lrow.cons i.on:nth-child(4){background:#6ACF27;box-shadow:none}
.cred__lrow.cons i.on:nth-child(5){background:#2E7D32;box-shadow:none}
.cred__lrow.cons .num{color:#7BC97F}

.cred__foot{display:flex;align-items:flex-end;gap:.9em;margin-top:.85em;flex:0 0 auto}
.cred__fdata{flex:1;min-width:0}
.cred__chiprow{display:flex;align-items:center;gap:.6em}
.cred__chip{width:3.4em;height:2.6em;border-radius:.3em;flex:0 0 auto;
  background:linear-gradient(140deg,#E3C878,#B9954A 46%,#F0DFA8 62%,#A8863E);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cred__chip svg{width:100%;height:100%;opacity:.55}
.cred__fdata dl{margin:.62em 0 0;display:grid;grid-template-columns:auto 1fr;gap:.16em .7em;
  font-family:var(--fm);font-size:.5em;letter-spacing:.1em;text-transform:uppercase}
.cred__fdata dt{color:rgba(237,241,246,.42)}
.cred__fdata dd{margin:0;color:rgba(237,241,246,.92);font-weight:500}
.cred__qr{flex:0 0 auto;width:7.6em;text-align:center}
.cred__qr .plate{background:#fff;border-radius:.42em;padding:.3em;box-shadow:0 .2em .5em rgba(0,0,0,.4)}
.cred__qr svg{display:block;width:100%;height:auto}
.cred__qr span{display:block;margin-top:.34em;font-family:var(--fm);font-size:.42em;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(237,241,246,.5)}

.cred__microtext{margin-top:.7em;flex:0 0 auto;white-space:nowrap;overflow:hidden;
  font-family:var(--fm);font-size:.38em;letter-spacing:.28em;color:rgba(237,241,246,.30);text-transform:uppercase}

/* ---------- verso ---------- */
.cred__mag{height:4.4em;flex:0 0 auto;margin-top:4.2em;position:relative;z-index:3;
  background:linear-gradient(180deg,#0A0D12,#171C24 40%,#0A0D12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
.cred__bbody{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;padding:1.3em 1.6em 1.25em}
.cred__btitle{font-family:var(--fm);font-size:.52em;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,241,246,.5)}
.cred__scale{margin-top:.9em;display:flex;flex-direction:column;gap:1.1em}
.cred__srow{display:flex;gap:.6em;align-items:flex-start}
.cred__srow i{width:.42em;flex:0 0 auto;border-radius:99px;align-self:stretch;margin-top:.12em}
.cred__srow .t{flex:1;min-width:0}
.cred__srow .t b{display:block;font-size:.72em;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cred__srow .t span{display:block;font-size:.62em;color:rgba(237,241,246,.62);line-height:1.5;margin-top:.16em}
.cred__srow .n{font-family:var(--fm);font-size:.56em;font-weight:600;color:rgba(237,241,246,.5)}

.cred__sign{margin-top:1.35em;border-radius:.4em;overflow:hidden;position:relative;background:#EDEFF3;flex:0 0 auto}
.cred__sign .gp{position:absolute;inset:0;opacity:.5;color:#8FA0BC}
.cred__sign .in{position:relative;padding:.55em .7em .4em;display:flex;flex-direction:column;gap:.1em}
.cred__sign .lb{font-family:var(--fm);font-size:.42em;letter-spacing:.16em;text-transform:uppercase;color:#5C6875}
.cred__sign svg.sig{height:3.3em;width:auto;color:#1E2A3A}
.cred__sign .sn{font-family:var(--fm);font-size:.44em;letter-spacing:.1em;color:#5C6875;text-transform:uppercase}

.cred__terms{margin-top:1.15em;font-size:.6em;line-height:1.6;color:rgba(237,241,246,.55)}
.cred__terms b{color:rgba(237,241,246,.85);font-weight:600}
.cred__valid{margin-top:1.35em;display:flex;align-items:center;gap:.75em;padding:.7em .8em;border-radius:.45em;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.cred__valid p{flex:1;font-size:.58em;line-height:1.5;color:rgba(237,241,246,.62)}
.cred__valid .st{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45em;padding:.4em .6em;border-radius:.3em;
  background:rgba(106,207,39,.16);box-shadow:inset 0 0 0 1px rgba(106,207,39,.5);
  font-family:var(--fm);font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:#8FD694}
.cred__valid .st i{width:.5em;height:.5em;border-radius:50%;background:#6ACF27;box-shadow:0 0 .5em #6ACF27}
.cred__bfoot{margin-top:auto;padding-top:1.2em;display:flex;align-items:flex-end;gap:.8em}
.cred__bcode{flex:1;min-width:0}
.cred__bcode svg{width:100%;height:3em;color:#EDF1F6}
.cred__bcode span{display:block;margin-top:.25em;font-family:var(--fm);font-size:.44em;letter-spacing:.24em;color:rgba(237,241,246,.6)}
.cred__holo{width:3.4em;height:3.4em;flex:0 0 auto;border-radius:.35em;
  background:conic-gradient(from 30deg,#FACD19,#6ACF27,#458CE6,#7C4DD1,#FF3131,#FACD19);
  opacity:.72;position:relative;overflow:hidden}
.cred__holo svg{position:absolute;inset:14%;width:72%;height:72%;color:rgba(10,14,20,.75)}

@media (prefers-reduced-motion:reduce){ .cred__flip{transition:none} }

/* ============================ 24. CAMADA DOSSIÊ ==========================
   Elementos que ligam o site à linguagem do Credencial-ctdc.html: barra de
   controle documental no topo, marcas de registro nos cantos e o ajuste de
   deslocamento que os dois impõem ao cabeçalho fixo.
   ======================================================================== */
.docbar{
  position:fixed;top:0;left:0;right:0;z-index:960;height:var(--docbar-h);
  background:rgba(220,224,231,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.docbar__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:14px;
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t3);
}
.docbar__in b{font-weight:600;color:var(--t2);letter-spacing:.14em}
.docbar__sp{flex:1}
@media(max-width:900px){.docbar .hide-sm{display:none}}
.docbar__dots{display:flex;gap:4px}
.docbar__dots i{width:6px;height:6px;border-radius:50%;display:block}
.docbar__dots i:nth-child(1){background:var(--r)}
.docbar__dots i:nth-child(2){background:var(--y)}
.docbar__dots i:nth-child(3){background:var(--b)}
.docbar__dots i:nth-child(4){background:var(--g)}

.regmark{
  position:fixed;width:16px;height:16px;pointer-events:none;z-index:5;
  opacity:.26;color:var(--t2);
}
.regmark--tl{top:calc(var(--docbar-h) + 12px);left:10px}
.regmark--tr{top:calc(var(--docbar-h) + 12px);right:10px}
.regmark--bl{bottom:10px;left:10px}
.regmark--br{bottom:10px;right:10px}

/* o cabeçalho fixo desce a altura da barra de controle */
.site-header{top:var(--docbar-h)}
.scroll-bar{top:var(--docbar-h)}
.mobile-menu{padding-top:calc(var(--docbar-h) + var(--header-h) + 26px)}
.hero{padding-top:calc(var(--docbar-h) + var(--header-h) + clamp(28px,6vh,64px))}
html{scroll-padding-top:calc(var(--docbar-h) + var(--header-h) + 18px)}

@media(max-width:700px){
  :root{--docbar-h:0px}
  .docbar,.regmark{display:none}
}

/* ---- acabamento de documento ---- */
.card{box-shadow:none}
.card--hover:hover{box-shadow:var(--sh-2)}
.module{box-shadow:none}
.btn--primary{box-shadow:0 6px 18px -8px rgba(75,31,145,.55)}
.btn--primary:hover{box-shadow:0 10px 26px -10px rgba(75,31,145,.6)}
.btn--light{box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.btn--light:hover{box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}

/* rótulos e números em Azeret: um pouco menos de peso ótico */
.mono,.eyebrow{font-weight:500}
.stat__n,.benefit b,.plan__price b{font-weight:800;letter-spacing:-.03em}

/* o filete lateral do cartão precisa de respiro no cartão escuro também */
.on-ink .card,.on-navy .card,.on-deep .card{backdrop-filter:none;-webkit-backdrop-filter:none}

@media print{ .docbar,.regmark{display:none!important} }

/* ============================ 25. VOZ HUMANA ============================
   O traço de assinatura da credencial reaparece como filete da seção da
   essência: o mesmo sistema, escrito à mão.
   ====================================================================== */
.assinatura{width:112px;height:auto;color:var(--purple);margin:20px 0 24px;opacity:.9}
.on-ink .assinatura,.on-navy .assinatura,.on-deep .assinatura{color:var(--purple-lt)}

/* Propósito e missão ganham o ar de anotação dentro do documento */
.quote-block{
  border-left:2px solid var(--purple);
  background:linear-gradient(90deg,rgba(75,31,145,.05),transparent 72%);
  padding:14px 18px 14px clamp(16px,1.8vw,24px);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.quote-block p{color:var(--t2)}

/* ============================ 26. CARTÕES DE DOCUMENTO ===================
   Fora a flutuação. Num dossiê o cartão é um bloco impresso na página, não um
   objeto solto sobre ela: nada sobe, nada projeta sombra. O retorno ao mouse
   é o filete que escurece e a tarja lateral que engorda, que é o vocabulário
   que a peça já usa.
   ======================================================================== */
.card,.module,.asmt,.dl{
  transition:border-color .24s var(--ease),background-color .24s var(--ease);
}
.card__top{transition:width .24s var(--ease)}

/* estado de repouso: papel sobre papel, filete de cabelo, sem sombra */
.card,.module,.asmt,.dl{box-shadow:none}
.module{border-radius:var(--r-md)}

/* estado sob o mouse: só o contorno responde */
.card--hover:hover,
.module:hover,
.asmt:hover,
.dl:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--purple-border);
  background-color:var(--white);
}
.card--hover:hover .card__top{width:7px}

/* o brilho radial era linguagem de app, não de documento */
.asmt::after{display:none}
.asmt:hover{border-color:var(--ac,var(--purple))}
.asmt:hover .asmt__ico{background:var(--ac,var(--purple));color:#fff}
.asmt__ico{transition:background .24s var(--ease),color .24s var(--ease)}

/* nas seções escuras o mesmo princípio, com o filete claro */
.on-ink .card--hover:hover,
.on-navy .card--hover:hover,
.on-deep .card--hover:hover{
  transform:none;box-shadow:none;
  background-color:rgba(255,255,255,.07);
  border-color:var(--line-d2);
}
.symbol.card--hover:hover{border-color:transparent;background-color:var(--ink-2,#1B2230)}

/* os cartões de download do modal seguem a mesma regra */
.dl:hover{background-color:var(--paper-2)}

/* o crachá é o único objeto físico da página: continua com relevo próprio */
.cred__face{box-shadow:
  0 1.4em 3.4em -1.2em rgba(0,0,0,.62),
  0 .3em .9em -.5em rgba(0,0,0,.5),
  inset 0 0 0 1px rgba(255,255,255,.09)}

/* ============================ 27. FICHA DO ASSESSMENT ===================
   O cartão precisa dizer, antes do clique, que existe um PDF do outro lado.
   ====================================================================== */
.aviso{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vh,40px);padding:clamp(16px,1.8vw,22px);
  border:1px dashed var(--line-2);border-radius:var(--r-md);
  background:rgba(255,255,255,.4);
}
.aviso__ico{
  width:42px;height:42px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--purple-soft);color:var(--purple);
}
.aviso__ico svg{width:20px;height:20px}
.aviso p{flex:1;min-width:min(280px,100%);margin:0;font-family:var(--fp);font-size:15.5px;line-height:1.65;color:var(--t2)}
.aviso p b{font-weight:600;color:var(--t1)}
.aviso__spec{
  flex:none;font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t3);padding:8px 12px;border:1px solid var(--line-2);border-radius:99px;
}
.on-ink .aviso,.on-navy .aviso,.on-deep .aviso{background:rgba(255,255,255,.05);border-color:var(--line-d2)}

.asmt{padding-left:clamp(24px,2.2vw,34px)}
.asmt__ico{box-shadow:inset 0 0 0 1px var(--ac,var(--purple))}
.asmt__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.asmt__spec{
  font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t4);display:inline-flex;align-items:center;gap:7px;
}
.asmt__spec::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--ac,var(--purple));flex:none}
.asmt__more{margin-top:0;padding-top:0;font-size:9.5px}
.asmt__base{
  font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;
}
.asmt__base::before{content:"";width:16px;height:1px;background:var(--line-2);flex:none}
.asmt:hover .asmt__more,.asmt:focus-within .asmt__more{color:var(--ac,var(--purple))}

/* O cartao inteiro continua clicavel, mas quem carrega o papel de botao e o
   titulo: o leitor de tela anuncia o nome do assessment em vez de engolir o
   conteudo do cartao dentro de um role="button". O alvo de clique volta ao
   cartao inteiro pelo overlay do proprio botao. */
.asmt__btn{
  font:inherit;color:inherit;letter-spacing:inherit;text-align:left;
  padding:0;background:none;border:0;cursor:pointer;
}
.asmt__btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.asmt__btn:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px;border-radius:4px}
@supports selector(:has(*)){
  .asmt__btn:focus-visible{outline:none}
  .asmt:has(.asmt__btn:focus-visible){outline:2px solid var(--purple-lt);outline-offset:3px}
}

/* ============================ 28. PESSOAS EM ÓRBITA =====================
   As fichas giram em torno do núcleo enquanto se contra-giram sobre o próprio
   eixo, então a pessoa nunca aparece de cabeça para baixo.
   ====================================================================== */
/* A ficha gira em torno do núcleo e se contra-gira sobre o próprio eixo, na
   mesma duração, então a pessoa nunca aparece deitada. */
.orb-run{transform-box:view-box;transform-origin:280px 280px;animation:spin var(--orb) linear infinite}
.orb-face{transform-box:fill-box;transform-origin:center;animation:spin var(--orb) linear infinite}
.orb-run--meio{--orb:40s;animation-direction:reverse}
.orb-face--meio{--orb:40s}
.orb-run--fora{--orb:56s}
.orb-face--fora{--orb:56s;animation-direction:reverse}
.orb-run--dentro{--orb:30s}
.orb-face--dentro{--orb:30s;animation-direction:reverse}
.orb-people use{filter:drop-shadow(0 0 4px currentColor)}
.orb-people image{image-rendering:auto}
@media (prefers-reduced-motion:reduce){
  .orb-run,.orb-face{animation:none}
}

/* ============================ 29. ONDA NO CENTRO ========================
   Os quatro centros ficam em cruz, a 176 do núcleo: CTA 0°, CTDE 90°,
   CTDC 180°, CTDP 270°. As quatro fichas do anel do meio (40s, reverso)
   partem de 18°, 108°, 198° e 288°, então a cada 10s elas alcançam o CTA,
   a primeira vez em 2,00s. Esse é o período de tudo abaixo.

   O CTA responde com a onda e solta três pulsos pela malha. A velocidade é a
   mesma nos três (172,8 unidades do viewBox por segundo), e a onda do destino
   dispara quando a cabeça do pulso toca a borda do disco (raio 44):
     arco até CTDP e CTDE  276,5 de percurso, borda em 84,1%   chega 3,35s
     reta até o CTDC        352 de percurso,  borda em 87,5%   chega 3,78s
   Mudar posição, raio ou duração exige refazer esses atrasos.
   ====================================================================== */
.onda{
  transform-box:fill-box;transform-origin:center;opacity:0;
  animation:ondaCentro 10s cubic-bezier(.22,.8,.28,1) infinite;
}
@keyframes ondaCentro{
  0%   {transform:scale(1);    opacity:.62; stroke-width:2}
  19%  {transform:scale(1.60); opacity:0;   stroke-width:.5}
  100% {transform:scale(1.60); opacity:0;   stroke-width:.5}
}
.onda--a{animation-delay:2.00s}
.onda--p,.onda--e{animation-delay:3.35s}
.onda--c{animation-delay:3.78s}
.onda--eco{opacity:0}
.onda--a.onda--eco{animation-delay:2.34s}
.onda--p.onda--eco,.onda--e.onda--eco{animation-delay:3.69s}
.onda--c.onda--eco{animation-delay:4.12s}

/* Pulsos da malha do CTA. pathLength="100" normaliza os três caminhos, e o
   traço de 9 unidades anda da origem até sair pela ponta (0 a 109). O arco
   faz isso em 1,747s (17,47% de 10s), a reta, mais longa, em 2,22s (22,2%). */
.cta-pulso{
  fill:none;stroke:#9CC6FF;stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:9 200;stroke-dashoffset:9;opacity:0;
  filter:drop-shadow(0 0 5px #458CE6);
  animation:10s linear 2s infinite;
}
.cta-pulso--arco{animation-name:pulsoArco}
.cta-pulso--reta{animation-name:pulsoReta}
@keyframes pulsoArco{
  0%            {stroke-dashoffset:9;    opacity:1}
  17.47%        {stroke-dashoffset:-100; opacity:1}
  17.48%,100%   {stroke-dashoffset:-100; opacity:0}
}
@keyframes pulsoReta{
  0%            {stroke-dashoffset:9;    opacity:1}
  22.2%         {stroke-dashoffset:-100; opacity:1}
  22.21%,100%   {stroke-dashoffset:-100; opacity:0}
}

/* o próprio disco do centro responde com um respiro curto */
.ctd-alvo{transform-box:fill-box;transform-origin:center;animation:respiroCentro 10s cubic-bezier(.22,.8,.28,1) infinite}
@keyframes respiroCentro{
  0%   {transform:scale(1)}
  8%   {transform:scale(1.05)}
  26%  {transform:scale(1)}
  100% {transform:scale(1)}
}
.ctd-alvo--a{animation-delay:2.00s}
.ctd-alvo--p,.ctd-alvo--e{animation-delay:3.35s}
.ctd-alvo--c{animation-delay:3.78s}

@media (prefers-reduced-motion:reduce){
  .onda,.cta-pulso{display:none}
  .ctd-alvo{animation:none}
}

/* ============================ 30. DISC EM DESTAQUE =======================
   O DISC alimenta todo o resto do sistema, então ele sai da grade dos seis e
   ocupa a largura inteira. A tarja lateral, que nos outros cartões carrega uma
   cor só, aqui traz o espectro completo: é a única peça da página com as
   quatro cores empilhadas.
   ======================================================================== */
.disc-hi{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,3vw,46px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(24px,2.6vw,36px);padding-left:clamp(30px,3vw,46px);
  position:relative;overflow:hidden;margin-bottom:clamp(22px,3vh,34px);
  transition:border-color .24s var(--ease);
}
.disc-hi:hover{border-color:var(--purple-border)}
.disc-hi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(180deg,
    var(--r) 0 25%, var(--y) 25% 50%, var(--g) 50% 75%, var(--b) 75% 100%);
}

.disc-hi__tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple);border:1px solid var(--purple-border);border-radius:999px;padding:6px 13px;
}
.disc-hi__tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--purple);flex:none;
  animation:batida 2.6s var(--ease) infinite;
}
/* o único pulso da página: o assessment que a empresa chama de coração */
@keyframes batida{
  0%,72%,100%{transform:scale(1);opacity:1}
  8%{transform:scale(1.7);opacity:.5}
  16%{transform:scale(1);opacity:1}
  24%{transform:scale(1.45);opacity:.6}
  34%{transform:scale(1);opacity:1}
}
.disc-hi__t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:16px}
.disc-hi__t h3{font-family:var(--fd);font-weight:900;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em;line-height:1}
.disc-hi__base{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);
  display:inline-flex;align-items:center;gap:8px;
}
.disc-hi__base::before{content:"";width:18px;height:1px;background:var(--line-2);flex:none}

.disc-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin-top:24px}
.disc-4 div{border-top:2px solid var(--ac);padding-top:11px}
.disc-4 b{
  font-family:var(--fd);font-weight:900;font-size:clamp(22px,2.2vw,30px);line-height:1;
  letter-spacing:-.04em;color:var(--ac);display:block;
}
.disc-4 span{display:block;font-family:var(--fd);font-weight:600;font-size:13px;margin-top:8px;letter-spacing:-.01em}
.disc-4 small{display:block;font-family:var(--fp);font-size:12.5px;line-height:1.45;color:var(--t3);margin-top:5px}

.disc-hi__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}

/* Painel dos três modelos: lista de anexos, não grade de cartões */
.disc-docs{
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-2);align-self:start;
}
.disc-docs__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.disc-docs__h span{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.disc-docs__h b{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);font-weight:500}
.dlrow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:15px 18px;border-bottom:1px solid var(--line);
  transition:background-color .24s var(--ease);
}
.dlrow:last-child{border-bottom:none}
.dlrow:hover{background:var(--white)}
.dlrow__n{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--purple);flex:none}
.dlrow__t b{display:block;font-family:var(--fd);font-weight:600;font-size:14.5px;letter-spacing:-.012em}
.dlrow__t small{display:block;font-family:var(--fp);font-size:12.5px;line-height:1.45;color:var(--t3);margin-top:3px}
.dlrow__a{
  font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);
  display:inline-flex;align-items:center;gap:7px;flex:none;transition:color .24s;
}
.dlrow__a svg{width:14px;height:14px}
.dlrow:hover .dlrow__a{color:var(--purple)}

/* Filete que separa o destaque dos cinco complementares */
.asmt-div{
  display:flex;align-items:center;gap:16px;margin:clamp(24px,3.2vh,36px) 0 clamp(16px,2vh,22px);
}
.asmt-div span{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);flex:none;
}
.asmt-div::after{content:"";flex:1;height:1px;background:var(--line)}

/* Ponte para o Freedom ID no fim da grade */
.asmt-bridge{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(18px,2.4vh,26px);padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border:1px solid var(--purple-border);border-radius:var(--r-md);background:rgba(255,255,255,.42);
}
.asmt-bridge p{margin:0;font-family:var(--fp);font-size:15.5px;line-height:1.6;color:var(--t2);flex:1;min-width:min(280px,100%)}
.asmt-bridge p b{font-weight:600;color:var(--t1)}

/* ============================ 31. FREEDOM IA =============================
   A camada de inteligência aparece em superfície escura, do lado da máquina.
   As 14 análises são listadas por onde encostam no sistema, porque é assim que
   a pessoa encontra a que resolve o problema dela.
   ======================================================================== */
.ia-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.ia-card{
  background:rgba(255,255,255,.045);border:1px solid var(--line-d);border-radius:var(--r-md);
  padding:clamp(20px,2vw,28px);position:relative;overflow:hidden;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .24s var(--ease),background-color .24s var(--ease);
}
.ia-card:hover{border-color:var(--line-d2);background-color:rgba(255,255,255,.07)}
.ia-card__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(126,87,194,.18);color:var(--purple-lt);box-shadow:inset 0 0 0 1px rgba(126,87,194,.4);
}
.ia-card__ico svg{width:21px;height:21px}
.ia-card h3{font-family:var(--fd);font-weight:700;font-size:16.5px;letter-spacing:-.015em;color:#fff;margin-bottom:10px}
.ia-card p{font-family:var(--fp);font-size:14.5px;line-height:1.62;color:var(--on-dark-2);margin:0}
.ia-card p + p{margin-top:10px;color:var(--on-dark-3);font-size:13.5px}


/* O ciclo de um programa de liderança: as mesmas quatro etapas para a turma
   inteira. Mesma moldura e mesma divisória do .ia-line, com o rodapé que fecha
   a volta. Nada sobe e nada projeta sombra: é bloco impresso, como o resto. */
.ia-cyc{
  margin-top:clamp(24px,3.4vh,38px);
  border:1px solid var(--line-d);border-radius:var(--r-md);overflow:hidden;
}
.ia-cyc__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:clamp(15px,1.6vw,19px) clamp(18px,2vw,26px);
  border-bottom:1px solid var(--line-d);background:rgba(255,255,255,.03);
}
.ia-cyc__h em{
  font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--purple-lt);
}
.ia-cyc__h span{font-family:var(--fp);font-size:13.5px;line-height:1.5;color:var(--on-dark-3)}

.ia-cyc__steps{display:grid;grid-template-columns:repeat(4,1fr)}
.ia-cyc__steps li{padding:clamp(18px,1.9vw,24px);border-left:1px solid var(--line-d)}
.ia-cyc__steps li:first-child{border-left:none}
.ia-cyc__n{
  display:block;font-family:var(--fm);font-size:10px;letter-spacing:.12em;
  color:var(--purple-lt);margin-bottom:11px;
}
.ia-cyc__steps b{
  display:block;font-family:var(--fd);font-weight:600;font-size:15px;
  letter-spacing:-.015em;color:#fff;
}
.ia-cyc__steps p{
  font-family:var(--fp);font-size:13.5px;line-height:1.55;color:var(--on-dark-3);margin-top:6px;
}

/* o rodapé é onde a volta se fecha: mesma tarja roxa da metade humana do .ia-line */
.ia-cyc__f{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:13px clamp(18px,2vw,26px);
  border-top:1px solid var(--line-d);background:rgba(126,87,194,.10);
}
.ia-cyc__f svg{width:16px;height:16px;color:var(--purple-lt);flex:none}
.ia-cyc__f p{
  flex:1;min-width:min(260px,100%);margin:0;
  font-family:var(--fp);font-size:13.5px;line-height:1.55;color:var(--on-dark-2);
}
.ia-cyc__f b{color:#fff;font-weight:600}

.ia-map{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.7vw,24px);
  align-items:start;margin-top:clamp(24px,3.4vh,38px);
}
.ia-col{display:flex;flex-direction:column;gap:clamp(14px,1.7vw,24px)}
.ia-grp{
  border:1px solid var(--line-d);border-radius:var(--r-md);padding:clamp(18px,1.9vw,26px);
  background:rgba(255,255,255,.03);
}
.ia-grp__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:13px;border-bottom:1px solid var(--line-d);
}
.ia-grp__h span{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-lt)}
.ia-grp__h b{font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:-.03em;color:#fff}
.ia-grp ul{margin-top:4px}
.ia-grp li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ia-grp li:last-child{border-bottom:none;padding-bottom:0}
.ia-grp li b{display:block;font-family:var(--fd);font-weight:600;font-size:14.5px;letter-spacing:-.012em;color:#fff}
.ia-grp li span{display:block;font-family:var(--fp);font-size:13.5px;line-height:1.55;color:var(--on-dark-3);margin-top:4px}
.ia-grp li b .badge-id{
  display:inline-block;width:auto;margin:0 0 0 9px;vertical-align:middle;
  font-family:var(--fm);font-size:8.5px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--purple-lt);border:1px solid rgba(126,87,194,.5);border-radius:999px;padding:2px 9px;
}

/* A divisão de trabalho: o que a IA prepara e o que continua com a pessoa */
.ia-line{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(24px,3.4vh,38px);
  border:1px solid var(--line-d);border-radius:var(--r-md);overflow:hidden;
}
.ia-line > div{padding:clamp(22px,2.4vw,32px);position:relative}
.ia-line > div + div{border-left:1px solid var(--line-d)}
.ia-line > div:last-child{background:rgba(126,87,194,.10)}
.ia-line h3{font-family:var(--fd);font-weight:700;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.02em;color:#fff}
.ia-line p{font-family:var(--fp);font-size:14.5px;line-height:1.65;color:var(--on-dark-2);margin-top:11px}
.ia-line em{
  font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--purple-lt);display:block;margin-bottom:13px;
}

.ia-note{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-top:clamp(20px,2.6vh,30px);padding:clamp(16px,1.8vw,22px);
  border:1px dashed var(--line-d2);border-radius:var(--r-md);
}
.ia-note svg{width:18px;height:18px;color:var(--purple-lt);flex:none;margin-top:3px}
.ia-note p{flex:1;min-width:min(280px,100%);margin:0;font-family:var(--fp);font-size:14px;line-height:1.62;color:var(--on-dark-3)}
.ia-note p b{color:var(--on-dark-1);font-weight:600}

/* ============================ 32. FREEDOM ID =============================
   O documento consolidado volta para o papel. Seis entradas à esquerda, o
   sumário do relatório à direita e, entre os dois, as linhas que fazem o
   caminho. As linhas são decoração: somem no mobile sem levar conteúdo junto.
   ======================================================================== */
.fid{display:grid;grid-template-columns:.84fr 74px 1.16fr;gap:clamp(14px,1.6vw,22px);align-items:stretch}

.fid-srcs{display:grid;grid-auto-rows:1fr;align-self:stretch;width:100%}
.fid-src{
  display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);
}
.fid-src:last-child{border-bottom:none}
.fid-src i{
  width:9px;height:9px;border-radius:1px;background:var(--ac);transform:rotate(45deg);flex:none;
}
.fid-src__t{flex:1;min-width:0}
.fid-src__t b{display:block;font-family:var(--fd);font-weight:600;font-size:14.5px;letter-spacing:-.012em;color:var(--t1)}
.fid-src__t > span{display:block;font-family:var(--fp);font-size:13px;line-height:1.45;color:var(--t3);margin-top:2px}

.fid-flow{align-self:stretch;min-height:220px}
.fid-flow svg{width:100%;height:100%;display:block}
.fid-flow .fid-base{stroke-opacity:.30}
.fid-flow .fid-run{stroke-opacity:.85;stroke-dasharray:3 9;animation:fidFlow 2.8s linear infinite}
@keyframes fidFlow{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

.fid-doc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;position:relative;transition:border-color .24s var(--ease);
}
.fid-doc:hover{border-color:var(--purple-border)}
.fid-doc__band{display:grid;grid-template-columns:repeat(6,1fr);height:5px}
.fid-doc__band i{background:var(--ac);display:block}
.fid-doc__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px clamp(18px,2vw,26px);border-bottom:1px solid var(--line);background:var(--paper-2);
}
.fid-doc__h span{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.fid-doc__h b{
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);display:inline-flex;align-items:center;gap:7px;
}
.fid-doc__h b svg{width:13px;height:13px}
.fid-toc{padding:6px clamp(18px,2vw,26px)}
.fid-toc li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.fid-toc li:last-child{border-bottom:none}
.fid-toc__n{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--purple-lt);padding-top:2px}
.fid-toc__d b{display:block;font-family:var(--fd);font-weight:600;font-size:14.5px;letter-spacing:-.012em;color:var(--t1)}
.fid-toc__d > span{display:block;font-family:var(--fp);font-size:13px;line-height:1.5;color:var(--t3);margin-top:3px}
.fid-doc__f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px clamp(18px,2vw,26px);border-top:1px solid var(--line);background:var(--paper-2);
}
.fid-doc__f span{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
/* o documento consolidado tambem esta aberto para download, no rodape da propria peca */
.fid-doc__dl{
  font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);display:inline-flex;align-items:center;gap:7px;flex:none;
  transition:gap .24s var(--ease);
}
.fid-doc__dl svg{width:13px;height:13px}
.fid-doc__dl:hover{gap:11px}

.fid-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(26px,3.6vh,42px)}

/* o roxo do realce precisa clarear quando o fundo é tinta */
.on-ink .accent,.on-navy .accent,.on-deep .accent{color:var(--purple-lt)}

/* ---- responsivo das três peças novas ---- */
@media (max-width:920px){
  .disc-hi{grid-template-columns:1fr;gap:26px}
  .ia-cards,.fid-facts{grid-template-columns:1fr}
  .ia-cyc__steps{grid-template-columns:1fr 1fr}
  .ia-cyc__steps li:nth-child(3){border-left:none}
  .ia-cyc__steps li:nth-child(n+3){border-top:1px solid var(--line-d)}
  .ia-map{grid-template-columns:1fr}
  .ia-line{grid-template-columns:1fr}
  .ia-line > div + div{border-left:none;border-top:1px solid var(--line-d)}
  .fid{grid-template-columns:1fr;gap:24px}
  .fid-flow{display:none}
  .fid-srcs{grid-auto-rows:auto}
}
@media (max-width:620px){
  .disc-4{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .ia-cyc__steps{grid-template-columns:1fr}
  .ia-cyc__steps li{border-left:none;border-top:1px solid var(--line-d)}
  .ia-cyc__steps li:first-child{border-top:none}
  .disc-hi__foot{flex-direction:column;align-items:stretch}
  .disc-hi__foot .btn{width:100%}
  .dlrow{grid-template-columns:auto 1fr;row-gap:8px}
  .dlrow__a{grid-column:2}
}

/* ============================ 33. A CONTA ================================
   A seção do problema deixou de listar sintoma e passou a apresentar conta.
   A anatomia é a do .fid-doc: faixa de cabeçalho em mono sobre o papel escuro,
   lançamentos separados por filete de cabelo, rodapé com a procedência. Cada
   lançamento carrega a tarja lateral de 4px na cor do cartão que o desdobra
   logo abaixo, então o vermelho e o amarelo amarram as duas metades da seção.

   O algarismo é o único lugar da página em que o espectro entra dentro do tipo
   em vez de ficar ao lado dele. Continua em Montserrat, porque é número de
   vitrine e não de registro, e a rampa vai do vermelho ao roxo: os dois
   extremos são tokens, o miolo é a interpolação entre eles. A cor sólida é
   declarada antes do recorte e o recorte só entra sob @supports, para o
   algarismo nunca sumir. O amarelo do print de referência ficou de fora no
   papel: #FACD19 sobre #EEF0F4 dá 1,6:1 e o número some. Ele volta na variante
   de tinta, onde lê.

   Bloco escrito depois da camada 26, então o hover segue a regra do dossiê:
   só o contorno escurece para o roxo, sem sombra e sem translateY.
   ======================================================================== */
.conta{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .24s var(--ease);
}
.conta:hover{border-color:var(--purple-border)}

.conta__h,.conta__f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px clamp(18px,2vw,28px);background:var(--paper);
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
}
.conta__h{border-bottom:1px solid var(--line)}
.conta__f{border-top:1px solid var(--line)}
.conta__h b,.conta__f b{font-weight:500;color:var(--t2)}

.conta__ln{
  position:relative;display:grid;align-items:start;
  grid-template-columns:minmax(0,clamp(150px,19vw,260px)) 1fr;
  gap:clamp(16px,3vw,44px);
  padding:clamp(26px,3.2vw,44px) clamp(18px,2vw,28px);
}
.conta__ln + .conta__ln{border-top:1px solid var(--line)}
.conta__ln h3 + p{margin-top:12px}
.conta__ln p + p{margin-top:11px}

/* o rótulo do lançamento é o eyebrow sem o número da seção, com o tracinho de volta */
.conta__ln .eyebrow--plain{margin-bottom:12px}
.conta__ln .eyebrow.eyebrow--plain::before{
  display:block;content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none;
}

.conta__n{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(58px,8.4vw,124px);line-height:.86;letter-spacing:-.05em;color:var(--purple);
}
.on-ink .conta__n,.on-navy .conta__n,.on-deep .conta__n{color:var(--purple-lt)}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .conta__n{
    background-image:linear-gradient(112deg,var(--r) 4%,var(--purple) 96%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .on-ink .conta__n,.on-navy .conta__n,.on-deep .conta__n{
    background-image:linear-gradient(112deg,var(--y) 0%,var(--r) 46%,var(--purple-lt) 100%);
  }
}

/* se a conta for para a tinta, o bloco inteiro vai junto: uma classe no <section> resolve */
.on-ink .conta,.on-navy .conta,.on-deep .conta{background:rgba(255,255,255,.045);border-color:var(--line-d)}
.on-ink .conta__h,.on-navy .conta__h,.on-deep .conta__h,
.on-ink .conta__f,.on-navy .conta__f,.on-deep .conta__f{
  background:rgba(255,255,255,.05);border-color:var(--line-d);color:var(--on-dark-3);
}
.on-ink .conta__h b,.on-navy .conta__h b,.on-deep .conta__h b,
.on-ink .conta__f b,.on-navy .conta__f b,.on-deep .conta__f b{color:var(--on-dark-1)}
.on-ink .conta__ln + .conta__ln,
.on-navy .conta__ln + .conta__ln,
.on-deep .conta__ln + .conta__ln{border-color:var(--line-d)}

/* contraste forçado não recorta gradiente: o algarismo volta a ser cor chapada */
@media (forced-colors:active){
  .conta__n{background-image:none;-webkit-text-fill-color:currentColor;color:CanvasText}
}

/* A ponte: cada lançamento termina apontando para a parte do sistema que
   responde por ele. O vocabulário é o do rodapé do cartão de assessment,
   filete de cabelo e rótulo em mono roxo. */
.ponte{margin-top:clamp(16px,2vh,22px);padding-top:16px;border-top:1px solid var(--line)}
.ponte > .mono{display:block;color:var(--purple);margin-bottom:12px}
.ponte__links{display:flex;flex-wrap:wrap;gap:10px 22px}
.on-ink .ponte,.on-navy .ponte,.on-deep .ponte{border-top-color:var(--line-d)}
.on-ink .ponte > .mono,.on-navy .ponte > .mono,.on-deep .ponte > .mono{color:var(--purple-lt)}

@media (max-width:760px){
  .conta__ln{grid-template-columns:1fr;gap:12px;padding-left:clamp(20px,5vw,28px)}
  .conta__n{font-size:clamp(56px,17vw,92px)}
}

/* ============================ 34. O CIRCUITO DA TESE =====================
   O texto da seção descreve um ciclo fechado e o desenho antigo era uma
   fileira de quatro cartões iguais que não se tocavam. Aqui a forma passa a
   dizer o que o texto diz, com as palavras do próprio texto.

   1. O CIRCUITO SÃO AS BORDAS, e não linhas posicionadas por coordenada. As
      três partes (.ciclo__partes) e a base (.ciclo__soma) são dois blocos
      empilhados: a borda de cima e a da direita do conjunto são a ida, em
      traço sólido; a de baixo e a da esquerda são a volta, em tracejado. O
      desenho estica com o conteúdo, fecha em qualquer largura e não tem
      número mágico para recalcular quando um texto crescer.
   2. AS QUATRO PASSAGENS SÃO NOMEADAS pelo lead, verbatim. As orações que
      fechavam o parágrafo desceram para o pé de cada camada (.ciclo__pass) e
      para o rótulo da aresta de retorno. É o que impede o retângulo de ler
      como moldura: uma aresta que carrega a oração da passagem só pode ser
      percurso. Também é o que faz o ciclo fechar na leitura assistida, onde
      borda, seta e cor não existem.
   3. A COR DO LOSANGO DA PASSAGEM É A DE QUEM RECEBE: amarelo no pé da 01,
      azul no pé da 02, verde no pé da 03, e esse mesmo verde é o nó da aresta
      de descida. A troca de mão é a troca de cor na fronteira.
   4. A VOLTA É DECLARADA DUAS VEZES: pela seta no canto superior esquerdo,
      que entra na aresta sólida logo antes do nó 01, e pelo rótulo embaixo,
      que é um link para #camada-01. O handler de âncoras do site.js já rola e
      move o foco, então o retorno funciona no teclado.
   5. A ASSIMETRIA DA 04 é resolvida na planta: ela não é uma quarta coluna, é
      a base com a largura das três somadas, sobre --paper-2, com a aresta de
      cima dividida em três terços nas cores de 01, 02 e 03. As divisórias de
      cabelo entre as partes caem nas mesmas frações, então cada terço termina
      embaixo da parte que representa. A tag "recebe 01 · 02 · 03" diz em
      texto o que a barra diz em cor, para quem não vê a barra. O número dela
      fica na linha do título, e não empilhado como nas outras três.
   6. A COR MUDA DE PAPEL: as três partes usam a cor como nó sobre o fio, a 04
      usa como nó na aresta de descida e recebe as outras três na barra. Some a
      tarja lateral de cartão, que era o que fazia as quatro se lerem iguais.

   Linguagem de dossiê: sem sombra, sem translateY, sem brilho. O retorno ao
   mouse é o nó que engorda (11 para 15px, o mesmo movimento da trilha) e as
   duas arestas de volta que escurecem de --purple-border para --purple, a
   partir de qualquer ponto da figura: encostar em uma parte acende o ciclo
   inteiro.

   NÃO HÁ ANIMAÇÃO, e é decisão. O orçamento de movimento da página está gasto
   no diagrama do hero e no tracejado da seção 10, e o pulso do selo DISC já é
   a única repetição da superfície clara. Um terceiro traço andando aqui leria
   como tique. A direção já está dita pelo contraste sólido/tracejado, pela
   seta, pelo rótulo e pelas quatro orações, que continuam de pé com
   prefers-reduced-motion ligado: o que existe são transições de estado, que a
   camada 22 zera sozinha.

   MOBILE: abaixo de 920px as partes empilham e o circuito gira, como o fio da
   trilha já gira. A ida passa a descer pela aresta esquerda (o nó de cada
   parte desce junto) e a volta ocupa as três outras arestas: sobe pela
   direita, atravessa o topo e entra em 01 pelo alto, com a seta girada 90
   graus. Nada é escondido em nenhuma largura.
   ======================================================================== */
.ciclo{
  --fio:var(--purple);              /* a ida */
  --fio-ret:var(--purple-border);   /* a volta, mais clara até o mouse chegar */
  --w:1.5px;                        /* peso do traço, constante nas quatro arestas */
  --no:11px;                        /* lado do losango do nó */
  --canto:3px;
  margin-top:clamp(28px,4vh,44px);
  background:var(--white);border-radius:var(--r-md);
  padding:clamp(16px,2.4vw,30px);
}
.ciclo:hover{--fio-ret:var(--purple)}

/* ---- as três partes: a aresta de cima é o percurso ---- */
.ciclo__partes{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--w) solid var(--fio);
  border-right:var(--w) solid var(--fio);
  border-left:var(--w) dashed var(--fio-ret);
  border-radius:var(--canto) var(--canto) 0 0;
  transition:border-color .24s var(--ease);
}

/* a seta da volta chegando: entra na aresta sólida logo antes do nó 01 */
.ciclo__partes::after{
  content:"";position:absolute;top:calc(var(--w) / -2);left:clamp(18px,2.6vw,34px);
  width:0;height:0;
  border-left:7px solid var(--fio-ret);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transform:translateY(-50%);transition:border-left-color .24s var(--ease);
}

.ciclo__p{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,28px) clamp(15px,1.7vw,24px) clamp(20px,2.2vw,28px);
}
.ciclo__p + .ciclo__p{border-left:1px solid var(--line)}
.ciclo__p h3 + p{margin-top:11px}

/* o nó da parte, centrado sobre a aresta de percurso */
.ciclo__p::before{
  content:"";position:absolute;top:calc(var(--w) / -2);left:50%;
  width:var(--no);height:var(--no);background:var(--ac,var(--purple-lt));border-radius:1px;
  outline:1px solid var(--anel,transparent);   /* só o amarelo pede o anel: 1,6:1 no papel */
  transform:translate(-50%,-50%) rotate(45deg);
  transition:width .24s var(--ease),height .24s var(--ease);
}
.ciclo__p:hover::before{width:calc(var(--no) + 4px);height:calc(var(--no) + 4px)}

/* a passagem: a oração do lead que esta camada entrega à seguinte, com o
   losango na cor de quem recebe. Filete e respiro são os do .asmt__foot. */
.ciclo__pass{
  display:flex;align-items:baseline;gap:10px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--fp);font-size:14.5px;line-height:1.55;color:var(--t2);
}
.ciclo__pass::before{
  content:"";width:7px;height:7px;flex:none;align-self:center;border-radius:1px;
  background:var(--nx,var(--purple-lt));transform:rotate(45deg);
}
.ciclo__p .body + .ciclo__pass{margin-top:16px}

/* ---- a base: as três anteriores em um só fluxo ---- */
.ciclo__soma{
  position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;
  gap:clamp(12px,2vw,26px);
  padding:clamp(22px,2.4vw,30px) clamp(15px,1.7vw,24px);
  background:var(--paper-2);
  border-right:var(--w) solid var(--fio);
  border-bottom:var(--w) dashed var(--fio-ret);
  border-left:var(--w) dashed var(--fio-ret);
  border-radius:0 0 var(--canto) var(--canto);
  transition:border-color .24s var(--ease);
}
/* o segundo lado do grid da base: min-width:0 impede que uma palavra longa
   estoure a coluna, que e o modo classico de um filho de grid vazar */
.ciclo__soma-t{min-width:0}
.ciclo__soma-h{display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap}
.ciclo__soma-h + p{margin-top:11px}

/* a barra diz a soma em cor; a tag diz a mesma coisa em texto */
.ciclo__contem{
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t3);white-space:nowrap;
  padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;
}

/* as três cores entrando por cima, cada terço alinhado à parte que o gerou */
.ciclo__band{
  position:absolute;top:0;left:0;right:0;height:3px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.ciclo__band i{display:block}
.ciclo__band i:nth-child(1){background:var(--r)}
.ciclo__band i:nth-child(2){background:var(--y)}
.ciclo__band i:nth-child(3){background:var(--b)}

/* o nó da organização, no ponto em que o percurso entra na base. top:9px
   livra os 3px da barra de terços. */
.ciclo__soma::after{
  content:"";position:absolute;top:9px;right:calc(var(--w) / -2);
  width:var(--no);height:var(--no);background:var(--g);border-radius:1px;
  transform:translate(50%,-50%) rotate(45deg);
}

/* ---- o número da camada: mesmos valores do .card__num ---- */
.ciclo__n{
  display:block;font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.14em;
  color:var(--purple-lt);margin-bottom:14px;
}
.ciclo__soma .ciclo__n{margin:0;padding-top:2px}

/* ---- o retorno, escrito embaixo da aresta que o desenha ---- */
.ciclo__volta{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-left:clamp(10px,1.4vw,18px);
}
.ciclo__volta::before{
  content:"";width:0;height:0;flex:none;align-self:center;
  border-right:7px solid var(--fio-ret);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:border-right-color .24s var(--ease);
}
.ciclo__volta .mono{font-size:10px;letter-spacing:.18em;color:var(--purple)}
.ciclo__volta em{
  font-style:normal;font-family:var(--fp);font-size:15px;line-height:1.6;
  color:var(--t3);transition:color .2s var(--ease);
}
.ciclo__volta:hover em{color:var(--t1)}

/* ---- responsivo: o mesmo circuito, girado ---- */
@media (max-width:920px){
  .ciclo__partes{
    grid-template-columns:1fr;
    border-top:var(--w) dashed var(--fio-ret);
    border-right:var(--w) dashed var(--fio-ret);
    border-left:var(--w) solid var(--fio);
  }
  .ciclo__soma{
    border-right:var(--w) dashed var(--fio-ret);
    border-left:var(--w) solid var(--fio);
    grid-template-columns:1fr;gap:10px;
  }
  .ciclo__soma .ciclo__n{padding-top:0}
  .ciclo__p + .ciclo__p{border-left:none;border-top:1px solid var(--line)}
  /* o nó desce para a aresta esquerda, um por parte */
  .ciclo__p::before{top:clamp(26px,7vw,34px);left:calc(var(--w) / -2)}
  /* a volta agora chega por cima: a seta gira e entra em 01 descendo */
  .ciclo__partes::after{top:0;left:calc(var(--w) / -2);transform:translate(-50%,-50%) rotate(90deg)}
  /* o nó da organização acompanha o percurso, que passou para a esquerda */
  .ciclo__soma::after{right:auto;left:calc(var(--w) / -2);transform:translate(-50%,-50%) rotate(45deg)}
}
@media (max-width:620px){
  .ciclo{--no:9px;padding:14px}
  .ciclo__pass{font-size:14px}
  .ciclo__volta{gap:8px}
  .ciclo__volta em{font-size:14.5px}
}

/* contraste forçado não pinta background: nós, barra e setas voltam em tinta
   de sistema, senão o percurso some junto com as cores */
@media (forced-colors:active){
  .ciclo__p::before,.ciclo__soma::after,.ciclo__pass::before,.ciclo__band i{background:CanvasText}
  .ciclo__partes::after{border-left-color:CanvasText}
  .ciclo__volta::before{border-right-color:CanvasText}
}
@media print{
  /* fundo e cor de traço não sobrevivem sozinhos no papel */
  .ciclo{background:#fff;break-inside:avoid}
  .ciclo__soma{background:#fff;border-top:1px solid #666}
  .ciclo__partes,.ciclo__soma{border-color:#666!important}
  .ciclo__partes::after{border-left-color:#666!important}
  .ciclo__volta::before{border-right-color:#666!important}
  .ciclo__p::before,.ciclo__soma::after,.ciclo__pass::before{background:#666!important}
}

/* ============================ 35. REGISTRO DOS VALORES ===================
   Os sete valores eram sete cartões brancos iguais numa grade de duas colunas
   com o sétimo esticado, que é a forma mais template da página: sete objetos
   soltos sobre o papel, sem contagem, sem ordem declarada e sem ligação com os
   três substantivos do título ao lado. Aqui eles viram uma peça só, e a peça é
   um registro.

   1. A ANATOMIA É A DO .fid-doc (seção 10) e a do .conta (seção 33): faixa de
      cabeçalho em mono sobre --paper, corpo em linhas separadas por filete de
      cabelo, faixa de rodapé com a procedência. A linha é o .fid-toc li:
      algarismo em mono, nome em Montserrat, legenda em Newsreader. Some a
      caixa por item.
   2. A CANALETA É DESENHADA LINHA A LINHA, como o fio da trilha (seção 11), e
      não como uma barra atrás da lista. Cada .vreg__via sobe 1px (top:-1px)
      para cobrir o filete do próprio irmão, então os sete segmentos se encostam
      e formam uma margem contínua de 3px. É isso que permite o trecho sob o
      mouse mudar de peso e de cor sem mexer no resto. Quem trocar o border-top
      da linha por pseudo-elemento, ou engordar o filete, abre sete falhas nessa
      margem.
   3. O RETORNO AO MOUSE É O DA CAMADA 26: o filete da peça escurece para o
      roxo, a canaleta do trecho engorda de 3px para 6px e vai a roxo, e a linha
      assume --paper-2, o mesmo escurecimento tonal que o .dl já usa. Sem
      sombra, sem translateY, sem brilho.
   4. A COLUNA "VEM DE" propõe a qual dos três substantivos do título cada valor
      pertence, e o losango carrega o tom da raiz: três alfas do mesmo --purple,
      na mecânica da rampa da trilha. Como a ordem publicada dos sete não muda,
      são os losangos que deixam o agrupamento legível na vertical. O losango é
      a marca de item do .lst e do .fid-src, não é vocabulário novo.
      É PROPOSTA A VALIDAR COM A LIDERANÇA: apagar os sete .vreg__raiz, o
      terceiro <span> da régua e os três <b> do rodapé derruba o assunto inteiro
      sem tocar em nenhuma linha deste bloco. As colunas caem de três para duas
      pelo próprio media de 480px, que já é a versão de duas colunas.
   5. O CARIMBO DO RODAPÉ é a roseta guilhoché do crachá, o mesmo
      <symbol id="cred-rosette"> por <use>, com o coração roxo por cima. O README
      já registra que a assinatura do verso da credencial reaparece nesta seção;
      o selo do mesmo cartão passa a carimbar o registro. Chapado: o relevo
      continua sendo exclusividade do crachá na seção 14. Depende de
      credencial_sprite(), que sai na linha 221 do index.php, antes desta seção.

   A variante de tinta está escrita caso a seção mude de superfície um dia, como
   no bloco 33.
   ======================================================================== */
.vreg{
  --vreg-n:clamp(28px,2.8vw,38px);   /* faixa do algarismo */
  --vreg-r:clamp(84px,9vw,104px);    /* faixa da raiz, fixa nos dois grids */
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .24s var(--ease);
}
.vreg:hover{border-color:var(--purple-border)}

.vreg__h,.vreg__f{
  display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:13px clamp(18px,2vw,26px);background:var(--paper);
  font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
}
.vreg__h{border-bottom:1px solid var(--line)}
.vreg__f{border-top:1px solid var(--line)}
.vreg__h b,.vreg__f b{font-weight:500;color:var(--t2)}

/* a régua declara a forma do registro antes da primeira entrada. As três
   faixas são as mesmas do corpo, senão o rótulo não cai sobre a coluna. */
.vreg__cols{
  display:grid;grid-template-columns:var(--vreg-n) 1fr var(--vreg-r);gap:clamp(12px,1.4vw,18px);
  padding:9px clamp(18px,2vw,26px) 9px clamp(26px,2.4vw,34px);
  border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);
}

.vreg__rows li{
  position:relative;display:grid;align-items:baseline;
  grid-template-columns:var(--vreg-n) 1fr var(--vreg-r);gap:clamp(12px,1.4vw,18px);
  padding:clamp(13px,1.5vw,17px) clamp(18px,2vw,26px) clamp(13px,1.5vw,17px) clamp(26px,2.4vw,34px);
  transition:background-color .24s var(--ease);
}
.vreg__rows li + li{border-top:1px solid var(--line)}
.vreg__rows li:hover{background:var(--paper-2)}

/* a canaleta da margem: sete segmentos que se encostam e viram um traço só */
.vreg__via{
  position:absolute;left:0;top:-1px;bottom:0;width:3px;background:var(--line-2);
  transition:width .24s var(--ease),background-color .24s var(--ease);
}
.vreg__rows li:hover .vreg__via{width:6px;background:var(--purple)}

.vreg__n{
  font-family:var(--fm);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  color:var(--purple-lt);transition:color .24s var(--ease);
}
.vreg__rows li:hover .vreg__n{color:var(--purple)}

.vreg__t{min-width:0}
.vreg__t b{
  display:block;font-family:var(--fd);font-weight:700;
  font-size:clamp(15.5px,1.25vw,17px);letter-spacing:-.015em;color:var(--t1);
}
.vreg__t > span{
  display:block;font-family:var(--fp);font-size:13.5px;line-height:1.5;color:var(--t3);margin-top:3px;
}

/* a raiz proposta. O losango é o do .lst e do .fid-src; o tom vem da rampa da
   trilha, aqui em três alfas do roxo da marca. Abaixo de .55 o losango some no
   papel e parece falha de renderização. */
.vreg__raiz{
  --tar:var(--purple-lt);
  display:flex;align-items:baseline;min-width:0;
  font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t4);transition:color .24s var(--ease);
}
.vreg__raiz i{
  width:8px;height:8px;flex:none;display:block;border-radius:1px;
  background:var(--tar);transform:rotate(45deg);margin-right:10px;
  position:relative;top:-1px;
}
.vreg__rz--t{--tar:rgba(75,31,145,.55)}
.vreg__rz--c{--tar:rgba(75,31,145,.78)}
.vreg__rz--a{--tar:var(--purple)}
.vreg__rows li:hover .vreg__raiz{color:var(--t2)}

/* o rodapé: a apuração à esquerda, o carimbo à direita, que é onde um
   documento carrega quem responde por ele */
.vreg__tally{min-width:0}
.vreg__seal{display:inline-flex;align-items:center;gap:10px;color:var(--purple);font-weight:500}
.vreg__stamp{position:relative;width:30px;height:30px;flex:none;display:block}
.vreg__guil{position:absolute;inset:0;width:100%;height:100%;color:var(--purple);opacity:.2}
.vreg__heart{
  position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;fill:var(--purple);
}

/* se o registro for para a tinta um dia, o bloco inteiro vai junto */
.on-ink .vreg,.on-navy .vreg,.on-deep .vreg{background:rgba(255,255,255,.045);border-color:var(--line-d)}
.on-ink .vreg__h,.on-navy .vreg__h,.on-deep .vreg__h,
.on-ink .vreg__f,.on-navy .vreg__f,.on-deep .vreg__f{
  background:rgba(255,255,255,.05);border-color:var(--line-d);color:var(--on-dark-3);
}
.on-ink .vreg__h b,.on-navy .vreg__h b,.on-deep .vreg__h b,
.on-ink .vreg__f b,.on-navy .vreg__f b,.on-deep .vreg__f b{color:var(--on-dark-1)}
.on-ink .vreg__cols,.on-navy .vreg__cols,.on-deep .vreg__cols{border-color:var(--line-d);color:var(--on-dark-4)}
.on-ink .vreg__rows li + li,.on-navy .vreg__rows li + li,.on-deep .vreg__rows li + li{border-color:var(--line-d)}
.on-ink .vreg__rows li:hover,.on-navy .vreg__rows li:hover,.on-deep .vreg__rows li:hover{background:rgba(255,255,255,.05)}
.on-ink .vreg__via,.on-navy .vreg__via,.on-deep .vreg__via{background:var(--line-d2)}
.on-ink .vreg__rows li:hover .vreg__via,.on-navy .vreg__rows li:hover .vreg__via,.on-deep .vreg__rows li:hover .vreg__via{background:var(--purple-lt)}
.on-ink .vreg__n,.on-navy .vreg__n,.on-deep .vreg__n,
.on-ink .vreg__rows li:hover .vreg__n,.on-navy .vreg__rows li:hover .vreg__n,.on-deep .vreg__rows li:hover .vreg__n{color:var(--purple-lt)}
.on-ink .vreg__t b,.on-navy .vreg__t b,.on-deep .vreg__t b{color:#fff}
.on-ink .vreg__t > span,.on-navy .vreg__t > span,.on-deep .vreg__t > span{color:var(--on-dark-3)}
.on-ink .vreg__raiz,.on-navy .vreg__raiz,.on-deep .vreg__raiz{color:var(--on-dark-4)}
.on-ink .vreg__rows li:hover .vreg__raiz,.on-navy .vreg__rows li:hover .vreg__raiz,.on-deep .vreg__rows li:hover .vreg__raiz{color:var(--on-dark-2)}
.on-ink .vreg__rz--t,.on-navy .vreg__rz--t,.on-deep .vreg__rz--t{--tar:rgba(124,77,209,.5)}
.on-ink .vreg__rz--c,.on-navy .vreg__rz--c,.on-deep .vreg__rz--c{--tar:rgba(124,77,209,.75)}
.on-ink .vreg__rz--a,.on-navy .vreg__rz--a,.on-deep .vreg__rz--a{--tar:var(--purple-lt)}
.on-ink .vreg__seal,.on-navy .vreg__seal,.on-deep .vreg__seal{color:var(--purple-lt)}
.on-ink .vreg__guil,.on-navy .vreg__guil,.on-deep .vreg__guil{color:var(--purple-lt);opacity:.3}
.on-ink .vreg__heart,.on-navy .vreg__heart,.on-deep .vreg__heart{fill:var(--purple-lt)}

/* ---- responsivo do registro ----
   Até 481px as três colunas cabem: em 580px de container sobram 26+12 do
   algarismo, 84 da raiz e o resto para o texto. Abaixo disso a raiz desce para
   a segunda linha alinhada ao valor, que é a mesma manobra do .dlrow__a no
   media de 620px, e a régua perde a terceira faixa junto. */
@media (max-width:480px){
  .vreg{--vreg-n:26px}
  .vreg__cols,.vreg__rows li{
    grid-template-columns:var(--vreg-n) 1fr;
    padding-left:clamp(20px,5vw,26px);padding-right:16px;
  }
  .vreg__cols span:last-child{display:none}
  .vreg__raiz{grid-column:2;margin-top:9px}
}

/* ============================ 35. FREEDOM SUMMIT =========================
   O encarte do encontro anual, entre a seção 11 e a 12. Peça datada dentro de
   página perene, então três coisas foram resolvidas no desenho:

   1. NÃO É UMA SEÇÃO. Sem a classe .section, o contador do eyebrow não a vê:
      entrar e sair não renumera 12, 13, 14 e 15 nem obriga a mexer no menu
      mobile, que traz o número escrito. O que separa a faixa das vizinhas são
      os dois filetes e a faixa de controle, do mesmo jeito que uma folha
      inserida se separa das páginas do dossiê.
   2. A DATA É O OBJETO GRÁFICO, em Azeret Mono. A página trata número de
      vitrine em Montserrat 800 (.conta__n, .bolsa__n, .trilha__n) e registro
      em mono. Data é registro: 14 · 11 · 2026 com os separadores em roxo
      claro, tabular-nums, e a ficha do encontro descendo em linhas separadas
      por filete de cabelo. A última linha da ficha é a única coisa da peça que
      muda com o tempo, e vem em amarelo.
   3. A SUPERFÍCIE É TINTA, não papel. Faixa clara entre duas seções escuras é
      o gesto do banner promocional. Como a peça leva .on-ink, herda o
      tratamento escuro de .lead, .body, .chip e .note, e o bloco abaixo é só
      layout, sem uma cor de texto redeclarada.

   Linguagem de dossiê: sem sombra, sem translateY, sem brilho, sem hover na
   peça. A única coisa que reage ao mouse é o botão, que é o botão padrão do
   site, igual ao .btn--ctdc da trilha logo acima.
   ======================================================================== */
.summit{
  position:relative;
  padding-block:clamp(48px,6.6vh,86px);
  border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);
}

/* faixa de controle: o vocabulário da barra documental do topo, para a peça se
   apresentar como documento inserido antes de dizer qualquer palavra */
.summit__ctrl{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:clamp(26px,3.6vh,42px);
  border-bottom:1px solid var(--line-d);
  font-family:var(--fm);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-4);
}
.summit__ctrl b{font-weight:600;letter-spacing:.14em;color:var(--on-dark-2)}
.summit__ctrl svg{width:12px;height:12px;flex:none;color:var(--purple-lt)}
.summit__sp{flex:1;min-width:6px}

.summit__in{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(26px,4.6vw,72px);align-items:start;
}

/* ---- a data como registro ---- */
.summit__rot{
  display:block;font-family:var(--fm);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-4);margin-bottom:14px;
}
.summit__data{
  display:block;font-family:var(--fm);font-weight:500;
  font-size:clamp(33px,5.4vw,62px);line-height:1;letter-spacing:-.02em;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.summit__data i{font-style:normal;color:var(--purple-lt)}

/* a ficha do encontro: filete de cabelo entre linhas, como anexo de documento */
.summit__ficha{margin-top:clamp(18px,2.4vh,26px)}
.summit__ficha li{
  font-family:var(--fm);font-size:10.5px;line-height:1.6;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-3);
  padding-block:10px;border-top:1px solid var(--line-d);
}
.summit__ficha li:last-child{padding-bottom:0}
.summit__ficha .summit__estampa{color:var(--y);font-weight:500}

/* ---- a chamada ---- */
.summit__ed{display:block;color:var(--on-dark-4);margin-bottom:13px}
.summit h2{color:#fff}
.summit .lead{margin-top:16px;max-width:54ch}
.summit .body{margin-top:14px;max-width:62ch}
.summit__frentes{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}

/* ---- o programa: quatro eixos em linha, na largura inteira ----
   Cada eixo termina apontando para a seção do site que já responde por ele, no
   vocabulário da .ponte da seção 04: rótulo curto e seta, em .link-arrow, que
   já tem variante sobre tinta. É o que mantém a faixa útil para quem lê a
   página e não vai ao encontro. */
.summit__prog{
  margin-top:clamp(30px,4vh,48px);padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid var(--line-d);
}
.summit__prog > .mono{
  display:block;font-size:9.5px;letter-spacing:.2em;color:var(--on-dark-4);
  margin-bottom:clamp(16px,2vh,22px);
}
.summit__eixos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)}
.summit__eixos li{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.summit__eixos b{
  font-family:var(--fm);font-size:10px;font-weight:500;letter-spacing:.18em;
  color:var(--purple-lt);
}
.summit__eixos p{
  font-family:var(--fd);font-weight:500;font-size:14.5px;line-height:1.4;
  letter-spacing:-.012em;color:var(--on-dark-2);
}
.summit__ref{font-size:12.5px;font-weight:500;margin-top:auto;padding-top:3px}
.summit__ref svg{width:14px;height:14px}

/* ---- o pé: a mesma anatomia do .trilha__fim ---- */
.summit__pe{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vh,40px);
  padding-top:clamp(18px,2.2vh,26px);border-top:1px solid var(--line-d);
}
.summit__pe .note{flex:1;min-width:min(320px,100%);margin-top:0}

/* ---- responsivo ---- */
@media (max-width:1080px){
  .summit__eixos{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,26px)}
}
@media (max-width:920px){
  .summit__in{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .summit__data{font-size:clamp(32px,9vw,52px)}
  .summit .lead,.summit .body{max-width:none}
}
@media (max-width:560px){
  .summit__eixos{grid-template-columns:1fr;gap:16px}
  .summit__eixos li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:baseline}
  .summit__eixos b{grid-row:1}
  .summit__ref{grid-column:2;margin-top:0}
  .summit__pe{flex-direction:column;align-items:stretch}
  .summit__pe .btn{width:100%;white-space:normal}
}

/* No papel a faixa vira o que ela sempre foi: um convite impresso. A regra da
   camada 22 leva .on-ink para fundo branco mas não alcança as cores dos
   filhos, então sem isto a data e a ficha sumiriam. */
@media print{
  .summit{padding-block:24px;break-inside:avoid;border-color:#BBB!important}
  .summit__data{color:#000!important}
  .summit__data i{color:#777!important}
  .summit h2{color:#000!important}
  .summit__ficha li,.summit__eixos p{color:#333!important}
  .summit__ctrl,.summit__ctrl b,.summit__rot,.summit__ed,
  .summit__eixos b,.summit__prog > .mono,.summit__ref{color:#555!important}
  .summit__ficha .summit__estampa{color:#000!important}
  .summit__ficha li,.summit__ctrl,.summit__prog,.summit__pe{border-color:#DDD!important}
}