/* ============================================================
   WEBX STUDIO — COMO FUNCIONA
   Mobile-first
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root{
  --paper:#FBFBFD;
  --surface:#FFFFFF;
  --surface-2:#F2F3F6;

  --ink:#1D1D1F;
  --ink-2:#626268;
  --ink-3:#85858A;

  --line:rgba(0,0,0,.11);
  --line-soft:rgba(0,0,0,.075);

  --accent:#0B63F6;
  --accent-ink:#0958DC;
  --accent-soft:rgba(11,99,246,.085);

  --shadow-s:
    0 1px 2px rgba(0,0,0,.035),
    0 10px 26px rgba(0,0,0,.05);

  --shadow-m:
    0 2px 6px rgba(0,0,0,.045),
    0 24px 64px rgba(0,0,0,.09);

  --container:1120px;
  --section:88px;

  --radius:20px;
  --ease:cubic-bezier(.2,.8,.2,1);

  color-scheme:light;
}


@media (min-width:768px){
  :root{
    --section:120px;
  }
}


/* ============================================================
   BASE
   ============================================================ */

*,
*::before,
*::after{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}


body{
  margin:0;

  overflow-x:hidden;

  background:var(--paper);
  color:var(--ink);

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size:17px;
  line-height:1.6;

  letter-spacing:-.011em;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


img,
svg{
  display:block;
  max-width:100%;
}


a{
  color:inherit;
  text-decoration:none;
}


button{
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}


:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}


h1,
h2,
h3,
h4,
h5,
p{
  margin:0;
}


.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:22px;
}


.section{
  padding-block:var(--section);
}


.section--tight{
  padding-block:calc(var(--section) * .64);
}


/* ============================================================
   TIPOGRAFIA — MESMO PADRÃO DA HOME
   ============================================================ */

.display{
  font-size:clamp(2.45rem, 7.4vw, 4.1rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.032em;
}


.lede{
  color:var(--ink-2);
  font-size:clamp(1.05rem, 2vw, 1.25rem);
  line-height:1.5;
  letter-spacing:-.016em;
}


.body-2{
  color:var(--ink-2);
  font-size:.98rem;
  line-height:1.62;
}


.eyebrow{
  display:block;

  margin-bottom:13px;

  color:var(--accent);

  font-size:.72rem;
  font-weight:700;
  line-height:1.2;

  letter-spacing:.14em;
  text-transform:uppercase;
}


/* ============================================================
   BOTÕES
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:50px;

  padding-inline:25px;

  border-radius:999px;

  font-size:.96rem;
  font-weight:500;
  letter-spacing:-.015em;

  transition:
    transform .25s var(--ease),
    background-color .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .25s var(--ease);
}


.btn:active{
  transform:scale(.97);
}


.btn svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.btn--primary{
  color:#fff;

  background:var(--accent);

  box-shadow:
    0 1px 2px rgba(11,99,246,.22),
    0 8px 20px rgba(11,99,246,.12);
}


.btn--primary:hover{
  background:var(--accent-ink);
}


.btn--ghost{
  color:var(--ink);

  background:rgba(255,255,255,.78);

  border:1px solid var(--line);
}


.btn--ghost:hover{
  background:#fff;
  border-color:rgba(0,0,0,.16);
}


.btn--sm{
  min-height:38px;
  padding-inline:18px;
  font-size:.9rem;
}


/* ============================================================
   NAVBAR
   ============================================================ */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;

  padding:0;

  transition:padding .5s var(--ease);
}


.nav__bar{
  display:flex;
  align-items:center;
  gap:18px;

  width:100%;
  max-width:100%;
  height:62px;

  margin-inline:auto;

  padding-inline:22px;

  background:transparent;

  border:1px solid transparent;
  border-radius:0;

  transition:
    max-width .5s var(--ease),
    height .5s var(--ease),
    border-radius .5s var(--ease),
    background-color .5s var(--ease),
    border-color .5s var(--ease),
    box-shadow .5s var(--ease),
    padding .5s var(--ease),
    backdrop-filter .5s var(--ease);
}


.nav.is-detached{
  padding:10px 14px;
}


.nav.is-detached .nav__bar{
  max-width:1060px;
  height:56px;

  padding-inline:18px 10px;

  border-color:rgba(0,0,0,.08);
  border-radius:18px;

  background:rgba(239,240,243,.82);

  -webkit-backdrop-filter:saturate(185%) blur(26px);
  backdrop-filter:saturate(185%) blur(26px);

  box-shadow:
    0 1px 0 rgba(255,255,255,.78) inset,
    0 12px 34px rgba(0,0,0,.075);
}


.brand{
  display:flex;
  align-items:baseline;
  gap:7px;

  font-size:1.06rem;
  letter-spacing:-.03em;

  white-space:nowrap;
}


.brand b{
  font-weight:700;
}


.brand span{
  color:var(--ink-2);
  font-size:.92rem;
  font-weight:400;
}


.nav__links{
  display:none;
  align-items:center;
  gap:30px;

  margin-left:auto;
}


.nav__links a{
  color:var(--ink-2);

  font-size:.94rem;
  font-weight:450;

  transition:color .2s var(--ease);
}


.nav__links a:hover,
.nav__links a[aria-current="page"]{
  color:var(--ink);
}


.nav__cta{
  display:none;
  margin-left:22px;
}


/* ============================================================
   HAMBÚRGUER
   ============================================================ */

.burger{
  position:relative;

  width:42px;
  height:42px;

  margin-left:auto;
  flex:0 0 42px;

  border-radius:12px;

  transition:
    background-color .3s var(--ease),
    transform .3s var(--ease);
}


.burger span{
  position:absolute;

  top:50%;
  left:50%;

  width:19px;
  height:1.5px;

  background:var(--ink);

  border-radius:999px;

  transform-origin:center;

  transition:
    transform .38s var(--ease),
    opacity .25s var(--ease);
}


.burger span:first-child{
  transform:translate(-50%, -5px);
}


.burger span:last-child{
  transform:translate(-50%, 5px);
}


.nav.is-open .burger span:first-child{
  transform:translate(-50%, -50%) rotate(45deg);
}


.nav.is-open .burger span:last-child{
  transform:translate(-50%, -50%) rotate(-45deg);
}


.burger:active{
  transform:scale(.94);
}


/* ============================================================
   MENU MOBILE
   ============================================================ */

.sheet{
  position:fixed;
  inset:0;
  z-index:110;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;

  padding:104px 28px 32px;

  background:rgba(251,251,253,.94);

  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .35s var(--ease),
    visibility .35s;
}


.sheet.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


.sheet > a:not(.btn){
  display:flex;
  align-items:center;

  min-height:58px;

  padding:15px 0;

  border-bottom:1px solid var(--line-soft);

  color:var(--ink);

  font-size:1.18rem;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.025em;

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity .4s var(--ease),
    transform .4s var(--ease),
    color .2s var(--ease);
}


.sheet.is-open > a{
  opacity:1;
  transform:none;
}


.sheet.is-open > a:nth-child(1){ transition-delay:.04s; }
.sheet.is-open > a:nth-child(2){ transition-delay:.08s; }
.sheet.is-open > a:nth-child(3){ transition-delay:.12s; }
.sheet.is-open > a:nth-child(4){ transition-delay:.16s; }
.sheet.is-open > a:nth-child(5){ transition-delay:.20s; }


.sheet .btn{
  align-self:flex-start;

  margin-top:28px;

  opacity:0;
  transform:translateY(10px);
}


.sheet.is-open .btn{
  opacity:1;
  transform:none;
  transition-delay:.24s;
}


/* ============================================================
   HERO
   ============================================================ */

.process-hero{
  padding-top:124px;

  background:
    radial-gradient(
      65% 78% at 72% 38%,
      rgba(11,99,246,.10),
      transparent 74%
    );
}


.process-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;

  align-items:center;
}


.process-hero__copy{
  max-width:600px;
}


.process-hero__title{
  max-width:9.5ch;
}


.process-hero__copy .lede{
  max-width:39ch;
  margin-top:18px;
}


.process-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;

  margin-top:28px;
}


/* ============================================================
   HERO — GRAPHIC
   ============================================================ */

.process-hero__visual{
  position:relative;
  min-height:330px;
}


.process-hero__visual::before{
  content:"";

  position:absolute;
  left:50%;
  top:48%;

  width:94%;
  height:82%;

  transform:translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(11,99,246,.10) 0%,
      rgba(11,99,246,.045) 40%,
      transparent 72%
    );

  filter:blur(48px);
}


.hero-browser{
  position:absolute;

  overflow:hidden;

  background:#fff;

  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;

  box-shadow:
    0 2px 6px rgba(0,0,0,.035),
    0 20px 50px rgba(35,75,150,.09);
}


.hero-browser--back{
  left:2%;
  top:90px;

  z-index:1;

  width:34%;
  height:160px;

  opacity:.68;

  transform:rotate(-3deg);
}


.hero-browser--main{
  right:9%;
  top:20px;

  z-index:2;

  width:62%;
  height:245px;

  transform:rotate(-4deg);
}


.hero-browser__bar{
  display:flex;
  align-items:center;
  gap:12px;

  height:34px;

  padding-inline:13px;

  background:#F8F9FB;
  border-bottom:1px solid var(--line-soft);

  color:var(--ink-2);

  font-size:.58rem;
}


.hero-browser__bar strong{
  margin-right:auto;

  color:var(--ink);
}


.hero-browser__bar b{
  margin-left:auto;
}


.hero-browser__bar i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#A9B2C0;
}


.hero-browser__mini{
  display:grid;
  gap:9px;

  padding:18px 15px;
}


.hero-browser__mini span{
  display:block;

  width:72%;
  height:9px;

  background:#DAE2ED;

  border-radius:4px;
}


.hero-browser__mini span:nth-child(2){
  width:52%;
}


.hero-browser__mini span:nth-child(3){
  width:32%;
  height:18px;

  background:var(--accent);
}


.hero-browser__scene{
  position:relative;

  height:calc(100% - 34px);

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #ECEFF3 0%,
      #CFD4DA 42%,
      #F5F6F7 100%
    );
}


.hero-browser__panel{
  position:absolute;

  left:8%;
  bottom:13%;

  display:flex;
  flex-direction:column;

  color:#2B2C2F;
}


.hero-browser__panel span{
  font-size:.66rem;
}


.hero-browser__panel strong{
  margin-top:2px;

  font-size:1rem;
  letter-spacing:-.03em;
}


.hero-browser__object{
  position:absolute;

  bottom:0;

  background:
    linear-gradient(
      160deg,
      #D9D9D6,
      #B7B7B4
    );

  border-radius:999px 999px 0 0;
}


.hero-browser__object--1{
  right:18%;
  width:58px;
  height:132px;
}


.hero-browser__object--2{
  right:7%;
  width:44px;
  height:72px;
}


.hero-dark-card{
  position:absolute;

  left:17%;
  top:78px;

  z-index:4;

  display:flex;
  flex-direction:column;

  width:180px;

  padding:24px 18px;

  color:#fff;

  background:#111318;

  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;

  box-shadow:
    0 16px 38px rgba(0,0,0,.16);

  transform:rotate(-1deg);
}


.hero-dark-card > span{
  font-size:1.02rem;
  line-height:1.15;
  letter-spacing:-.03em;
}


.hero-dark-card small{
  margin-top:23px;

  color:#BBC0C8;

  font-size:.57rem;
  line-height:1.35;
}


.hero-check-card{
  position:absolute;

  right:0;
  bottom:3px;

  z-index:5;

  display:grid;
  gap:9px;

  width:150px;

  padding:17px;

  background:rgba(255,255,255,.9);

  border:1px solid rgba(0,0,0,.06);
  border-radius:15px;

  box-shadow:var(--shadow-m);

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);

  color:var(--ink-2);

  font-size:.66rem;
}


.hero-check-card span::first-letter{
  color:var(--accent);
}


.hero-handnote{
  position:absolute;

  right:1%;
  top:-3px;

  z-index:6;

  display:flex;
  align-items:flex-start;
  gap:3px;

  color:#6B7890;

  transform:rotate(-4deg);
}


.hero-handnote svg{
  width:48px;
  margin-top:5px;
}


.hero-handnote span{
  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  font-size:.68rem;
  line-height:1.35;

  text-align:center;
}


/* ============================================================
   PRINCÍPIOS DA HERO
   ============================================================ */

.process-pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:0;

  margin-top:54px;

  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}


.process-pillar{
  display:flex;
  align-items:center;
  gap:14px;

  min-height:94px;

  padding-block:20px;

  border-bottom:1px solid var(--line-soft);
}


.process-pillar:last-child{
  border-bottom:0;
}


.process-pillar__icon{
  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  flex:0 0 48px;

  color:var(--accent);

  background:var(--accent-soft);

  border-radius:50%;
}


.process-pillar__icon svg{
  width:23px;
  height:23px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.process-pillar h3{
  font-size:.92rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.018em;
}


.process-pillar p{
  margin-top:4px;

  color:var(--ink-3);

  font-size:.78rem;
  line-height:1.4;
}


/* ============================================================
   FLUXO / ETAPAS
   ============================================================ */

.process-flow{
  border-top:1px solid var(--line-soft);
}


.process-step{
  position:relative;

  display:flex;
  align-items:center;

  min-height:78svh;

  padding-block:88px;

  background:#FFFFFF;

  border-bottom:1px solid var(--line-soft);
}


.process-step--light{
  background:
    linear-gradient(
      180deg,
      #FBFBFD 0%,
      #F8FAFD 100%
    );
}


.process-step__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;

  align-items:center;
}


.process-step__copy{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:20px;

  align-items:start;
}


.process-step__number{
  color:#A9C8FF;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(3.2rem, 16vw, 5.7rem);
  font-weight:400;
  line-height:.86;

  letter-spacing:-.06em;
}


.process-step__copy .eyebrow{
  margin-bottom:9px;
}


.process-step__copy h2{
  color:var(--ink);

  font-size:clamp(2rem, 8vw, 3.25rem);
  font-weight:600;
  line-height:1.03;

  letter-spacing:-.04em;
}


.process-step__copy p{
  max-width:42ch;

  margin-top:15px;

  color:var(--ink-2);

  font-size:.98rem;
  line-height:1.58;
}


.process-step__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:22px;
}


.process-step__chips span{
  display:inline-flex;
  align-items:center;

  min-height:31px;

  padding-inline:11px;

  color:#526175;

  background:#F5F8FC;

  border:1px solid rgba(11,99,246,.08);
  border-radius:999px;

  font-size:.72rem;
  font-weight:500;
}


/* ============================================================
   VISUAIS DAS ETAPAS
   ============================================================ */

.step-visual{
  position:relative;

  min-height:310px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(11,99,246,.06),
      transparent 70%
    );

  border-radius:24px;
}


.step-note{
  position:absolute;

  right:2%;
  top:8%;

  display:flex;
  align-items:flex-start;
  gap:4px;

  color:#6A7890;

  transform:rotate(-4deg);
}


.step-note--left{
  right:auto;
  left:0;

  transform:rotate(-5deg);
}


.step-note span{
  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  font-size:.71rem;
  line-height:1.45;

  text-align:center;
}


.step-note svg{
  width:46px;
  margin-top:6px;
}


/* Descoberta */

.notebook{
  position:absolute;

  left:11%;
  top:15%;

  width:65%;

  padding:28px 24px 25px 40px;

  background:#fff;

  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;

  box-shadow:var(--shadow-m);

  transform:rotate(-2deg);
}


.notebook__spiral{
  position:absolute;

  left:8px;
  top:0;
  bottom:0;

  width:16px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 8px,
      #B8BCC3 8px 11px,
      transparent 11px 19px
    );
}


.notebook strong{
  font-size:1rem;
  letter-spacing:-.025em;
}


.notebook ul{
  display:grid;
  gap:10px;

  margin:18px 0 0;
  padding:0;

  list-style:none;

  color:var(--ink-2);

  font-size:.75rem;
}


.pen{
  position:absolute;

  right:13%;
  top:38%;

  width:15px;
  height:145px;

  background:
    linear-gradient(
      90deg,
      #1E1F21,
      #6A6D72 50%,
      #151618
    );

  border-radius:999px;

  transform:rotate(28deg);

  box-shadow:0 10px 20px rgba(0,0,0,.16);
}


.pen::after{
  content:"";

  position:absolute;

  left:3px;
  bottom:-13px;

  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:16px solid #1E1F21;
}


/* Direção */

.strategy-card{
  position:absolute;

  left:12%;
  top:19%;

  width:55%;
  min-height:190px;

  padding:28px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #15171C,
      #26344A
    );

  border-radius:16px;

  box-shadow:var(--shadow-m);
}


.strategy-card::after{
  content:"";

  position:absolute;

  right:-35px;
  bottom:-30px;

  width:150px;
  height:150px;

  border:1px solid rgba(255,255,255,.14);

  transform:rotate(38deg);
}


.strategy-card strong{
  display:block;

  max-width:9ch;

  font-size:1.45rem;
  line-height:1.12;

  letter-spacing:-.035em;
}


.strategy-card p{
  max-width:22ch;

  margin-top:18px;

  color:#C4CBD5;

  font-size:.72rem;
  line-height:1.45;
}


.strategy-list{
  position:absolute;

  right:10%;
  top:27%;

  z-index:2;

  display:grid;
  gap:12px;

  width:42%;

  padding:21px;

  background:rgba(255,255,255,.93);

  border:1px solid rgba(0,0,0,.06);
  border-radius:15px;

  box-shadow:var(--shadow-s);

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}


.strategy-list span{
  color:#526175;

  font-size:.72rem;
}


/* Estrutura */

.sitemap{
  position:absolute;

  left:8%;
  right:8%;
  top:18%;

  min-height:200px;

  padding:22px;

  background:
    linear-gradient(
      180deg,
      #F8FAFD,
      #EEF3FA
    );

  border:1px solid rgba(0,0,0,.055);
  border-radius:17px;

  box-shadow:var(--shadow-s);
}


.sitemap__title{
  display:block;

  margin-bottom:16px;

  color:var(--ink-2);

  font-size:.74rem;
  text-align:center;
}


.sitemap__node{
  position:relative;

  width:max-content;

  margin-inline:auto;

  padding:10px 34px;

  color:#32405A;

  background:#fff;

  border:1px solid rgba(11,99,246,.10);
  border-radius:9px;

  box-shadow:0 6px 18px rgba(45,75,130,.05);

  font-size:.78rem;
}


.sitemap__node::after{
  content:"";

  position:absolute;

  left:50%;
  top:100%;

  width:1px;
  height:35px;

  background:#BFD0E8;
}


.sitemap__branches{
  position:relative;

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;

  margin-top:38px;
}


.sitemap__branches::before{
  content:"";

  position:absolute;

  left:10%;
  right:10%;
  top:-14px;

  height:1px;

  background:#BFD0E8;
}


.sitemap__branches span{
  position:relative;

  padding:9px 8px;

  color:#526175;

  background:#fff;

  border:1px solid rgba(11,99,246,.08);
  border-radius:8px;

  text-align:center;

  font-size:.7rem;
}


/* Design */

.design-type-card{
  position:absolute;

  left:7%;
  top:21%;

  z-index:3;

  width:145px;

  padding:24px 20px;

  background:rgba(255,255,255,.93);

  border:1px solid rgba(0,0,0,.06);
  border-radius:15px;

  box-shadow:var(--shadow-m);

  transform:rotate(-4deg);
}


.design-type-card strong{
  display:block;

  font-size:3rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.06em;
}


.design-type-card > span{
  color:var(--ink-2);
  font-size:.72rem;
}


.palette{
  display:flex;
  gap:7px;

  margin-top:18px;
}


.palette i{
  width:18px;
  height:18px;

  border-radius:50%;

  background:#0B63F6;
}


.palette i:nth-child(2){ background:#70819A; }
.palette i:nth-child(3){ background:#1D1D1F; }
.palette i:nth-child(4){ background:#E6E9EE; }


.design-browser{
  position:absolute;

  right:5%;
  top:13%;

  width:72%;
  height:220px;

  overflow:hidden;

  background:#fff;

  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;

  box-shadow:var(--shadow-m);

  transform:rotate(2deg);
}


.design-browser__bar{
  display:flex;
  align-items:center;
  gap:13px;

  height:34px;

  padding-inline:13px;

  border-bottom:1px solid var(--line-soft);

  color:var(--ink-3);

  font-size:.52rem;
}


.design-browser__bar b{
  margin-right:auto;

  color:var(--ink);
}


.design-browser__body{
  display:grid;
  grid-template-columns:.9fr 1.1fr;

  height:calc(100% - 34px);
}


.design-browser__body > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:24px;

  color:#fff;

  background:#111318;
}


.design-browser__body strong{
  max-width:7ch;

  font-size:1.25rem;
  line-height:1.08;

  letter-spacing:-.04em;
}


.design-browser__body span{
  margin-top:9px;

  color:#AEB4BF;

  font-size:.55rem;
}


.design-browser__image{
  background:
    linear-gradient(
      145deg,
      #D2D8DE,
      #8D9BAA
    );
}


/* Desenvolvimento */

.code-card{
  position:absolute;

  left:5%;
  right:7%;
  top:15%;

  overflow:hidden;

  color:#E8ECF1;

  background:
    linear-gradient(
      135deg,
      #070B12 0%,
      #090F18 46%,
      #0B1321 100%
    );

  border:1px solid rgba(255,255,255,.05);
  border-radius:15px;

  box-shadow:
    0 18px 50px rgba(0,0,0,.14);
}


.code-card__tabs{
  display:flex;
  gap:15px;

  padding:11px 16px;

  border-bottom:1px solid rgba(255,255,255,.07);

  color:#9FA8B6;

  font-size:.58rem;
}


.code-card__tabs span:first-child{
  color:#fff;
}


.code-card pre{
  overflow:hidden;

  margin:0;

  padding:20px;

  color:#E8A8B8;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size:.62rem;
  line-height:1.62;

  white-space:pre-wrap;
}


.code-checks{
  position:absolute;

  right:2%;
  bottom:12%;

  z-index:3;

  display:grid;
  gap:9px;

  width:145px;

  padding:17px;

  color:#E7F5EC;

  background:rgba(18,22,27,.95);

  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;

  box-shadow:var(--shadow-m);

  font-size:.65rem;
}


.code-checks span::first-letter{
  color:#54D68C;
}


/* ===== REFINO SOLICITADO — ETAPA 05 ===== */

.step-visual--development{
  overflow:visible;
}

.step-visual--development .step-note{
  top:2%;
  right:0;

  z-index:4;

  display:flex;
  align-items:flex-start;
  gap:6px;

  transform:rotate(-3deg);
}

.step-visual--development .step-note svg{
  width:42px;
  margin-top:2px;
}

.step-visual--development .step-note span{
  max-width:106px;

  color:#5D7090;

  font-size:.82rem;
  line-height:1.35;
  text-align:left;

  text-shadow:0 1px 0 rgba(255,255,255,.9);
}


/* Revisão */

.review-card{
  position:absolute;

  left:7%;
  top:18%;

  width:63%;

  padding:24px;

  background:#fff;

  border:1px solid rgba(0,0,0,.06);
  border-radius:15px;

  box-shadow:var(--shadow-m);
}


.review-card strong{
  display:block;

  margin-bottom:16px;

  font-size:.9rem;
}


.review-card span{
  display:block;

  margin-top:10px;

  color:var(--ink-2);

  font-size:.72rem;
}


.review-card span::first-letter{
  color:var(--accent);
}


.review-success{
  position:absolute;

  right:7%;
  top:30%;

  display:flex;
  align-items:center;
  gap:11px;

  width:38%;

  padding:18px;

  background:rgba(255,255,255,.94);

  border:1px solid rgba(0,0,0,.06);
  border-radius:15px;

  box-shadow:var(--shadow-s);
}


.review-success b{
  display:grid;
  place-items:center;

  width:36px;
  height:36px;

  flex:0 0 36px;

  color:#fff;

  background:var(--accent);

  border-radius:50%;
}


.review-success span{
  color:var(--ink-2);

  font-size:.68rem;
  line-height:1.4;
}


/* ============================================================
   ETAPA 07 — PUBLICAÇÃO
   Graphic final com imagem
   ============================================================ */

.step-visual--launch{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:310px;

  overflow:visible;

  background:transparent;
}


/*
  A imagem original possui a anotação desenhada no canto superior
  direito. Esta camada cobre somente essa área clara para que a
  anotação possa ser recriada abaixo em HTML/CSS, sem alterar o PNG.
*/
.step-visual--launch::before{
  content:"";

  position:absolute;
  top:0;
  right:-1%;

  z-index:2;

  width:33%;
  height:21.5%;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      #FBFBFD 0%,
      #FAFBFD 100%
    );
}


/*
  Mantém a imagem abaixo da máscara e da nova anotação.
*/
.launch-artwork{
  position:relative;
  z-index:1;
}


/* ============================================================
   ANOTAÇÃO — MESMO PADRÃO DAS OUTRAS ETAPAS
   ============================================================ */

.step-note--launch{
  right:1%;
  top:2.5%;

  z-index:3;

  align-items:flex-start;
  gap:5px;

  transform:rotate(-4deg);
}


.step-note--launch span{
  /*
    A família, peso e espessura vêm de .step-note span,
    garantindo consistência com o restante da página.
  */
  min-width:112px;

  text-align:center;
}


.step-note--launch svg{
  width:48px;

  margin-top:2px;

  flex:0 0 48px;
}


/* ============================================================
   IMAGEM DO GRAPHIC
   ============================================================ */

.launch-artwork{
  display:block;

  width:100%;
  max-width:680px;

  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(
      0 24px 36px
      rgba(22,50,92,.08)
    );

  transform:translateZ(0);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:700px){

  .step-visual--launch{
    min-height:380px;
  }


  .step-note--launch{
    right:1.5%;
    top:3%;
  }


  .launch-artwork{
    width:100%;
    max-width:720px;
  }

}


/* ============================================================
   DESKTOP
   Mesmo espaço visual dos demais graphics da página
   ============================================================ */

@media (min-width:920px){

  .step-visual--launch{
    min-height:420px;

    padding-inline:0;
  }


  .step-note--launch{
    right:0;
    top:3%;
  }


  .step-note--launch span{
    font-size:.74rem;
  }


  .step-note--launch svg{
    width:52px;
    flex-basis:52px;
  }


  .launch-artwork{
    width:108%;
    max-width:none;

    /*
      Pequeno aumento proposital para que o card
      tenha a mesma presença dos demais graphics.
    */
    transform:
      translateX(-2%)
      scale(1.02);
  }

}


/* ============================================================
   NOTEBOOKS COM MENOR ALTURA
   ============================================================ */

@media (min-width:920px) and (max-height:850px){

  .step-visual--launch{
    min-height:350px;
  }


  .launch-artwork{
    width:102%;

    transform:
      translateX(-1%)
      scale(1);
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:699px){

  .step-visual--launch{
    min-height:auto;

    padding-block:12px;
  }


  .step-visual--launch::before{
    right:-5%;

    width:38%;
    height:22%;
  }


  .launch-artwork{
    width:108%;
    max-width:none;

    margin-inline:-4%;

    filter:
      drop-shadow(
        0 18px 28px
        rgba(22,50,92,.07)
      );
  }

}


/* ============================================================
   MOBILE PEQUENO
   ============================================================ */

@media (max-width:420px){

  .step-visual--launch{
    min-height:auto;
  }


  .launch-artwork{
    width:112%;

    margin-inline:-6%;
  }

}


/* ============================================================
   CTA FINAL
   ============================================================ */

.process-cta{
  padding-top:64px;
}


.process-cta__box{
  position:relative;

  display:grid;
  grid-template-columns:1fr;
  gap:26px;

  overflow:hidden;

  padding:30px 24px;

  background:
    radial-gradient(
      circle at 83% 35%,
      rgba(11,99,246,.11),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #F3F7FF 0%,
      #FAFBFD 56%,
      #F2F6FF 100%
    );

  border:1px solid rgba(11,99,246,.075);
  border-radius:26px;
}


.process-cta__copy{
  position:relative;
  z-index:2;
}


.process-cta__copy h2{
  max-width:22ch;

  margin-top:7px;

  font-size:clamp(2rem, 7vw, 3rem);
  font-weight:600;
  line-height:1.05;

  letter-spacing:-.038em;
}


.process-cta__copy p{
  max-width:48ch;

  margin-top:12px;

  color:var(--ink-2);

  font-size:.96rem;
  line-height:1.55;
}


.process-cta__graphic{
  position:absolute;

  left:48%;
  top:12%;

  width:250px;
  height:170px;

  opacity:.22;

  transform:rotate(-8deg);
}


.process-cta__graphic span{
  position:absolute;

  width:125px;
  height:78px;

  background:#BFD4FA;

  border-radius:14px;
}


.process-cta__graphic span:nth-child(1){
  left:0;
  top:45px;
}


.process-cta__graphic span:nth-child(2){
  left:70px;
  top:0;
}


.process-cta__graphic span:nth-child(3){
  right:0;
  bottom:0;
}


.process-cta__actions{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:9px;
}


.process-cta__actions small{
  color:var(--ink-3);

  font-size:.72rem;
}


/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  border-top:1px solid var(--line);
  padding-block:52px 40px;
}


.foot__grid{
  display:grid;
  gap:36px;
}


.foot h5{
  margin:0 0 14px;

  font-size:.9rem;
  font-weight:600;
  letter-spacing:-.01em;
}


.foot ul{
  display:grid;
  gap:10px;

  margin:0;
  padding:0;

  list-style:none;
}


.foot a,
.foot li{
  color:var(--ink-2);
  font-size:.94rem;
}


.foot a:hover{
  color:var(--ink);
}


.foot__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;

  margin-top:44px;

  padding-top:22px;

  border-top:1px solid var(--line-soft);

  color:var(--ink-3);

  font-size:.86rem;
}


/* ============================================================
   ANIMAÇÕES
   ============================================================ */

.reveal{
  opacity:0;

  transform:translateY(16px);

  transition:
    opacity .82s var(--ease),
    transform .82s var(--ease);
}


.reveal.in{
  opacity:1;
  transform:none;
}


.hero-enter{
  opacity:0;

  transform:translateY(14px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}


.hero-enter--1{ transition-delay:.05s; }
.hero-enter--2{ transition-delay:.13s; }
.hero-enter--3{ transition-delay:.21s; }
.hero-enter--4{ transition-delay:.29s; }
.hero-enter--5{ transition-delay:.18s; }
.hero-enter--6{ transition-delay:.42s; }


body.is-ready .hero-enter{
  opacity:1;
  transform:none;
}


/* ============================================================
   HOVER
   ============================================================ */

@media (hover:hover){

  .burger:hover{
    background:var(--surface-2);
  }


  .process-step__chips span{
    transition:
      transform .24s var(--ease),
      border-color .24s var(--ease),
      background-color .24s var(--ease);
  }


  .process-step__chips span:hover{
    transform:translateY(-2px);

    background:#fff;

    border-color:rgba(11,99,246,.18);
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width:700px){

  .wrap{
    padding-inline:32px;
  }


  .process-pillars{
    grid-template-columns:repeat(3,1fr);
  }


  .process-pillar{
    padding-inline:20px;

    border-right:1px solid var(--line-soft);
    border-bottom:0;
  }


  .process-pillar:first-child{
    padding-left:0;
  }


  .process-pillar:last-child{
    padding-right:0;
    border-right:0;
  }


  .process-step{
    min-height:76svh;

    padding-block:104px;
  }


  .process-step__copy{
    gap:28px;
  }


  .step-visual{
    min-height:380px;
  }


  .sitemap__branches{
    grid-template-columns:repeat(4,1fr);
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:920px){

  .nav__bar{
    height:66px;
    padding-inline:32px;
  }


  .nav.is-detached{
    padding:12px 20px;
  }


  .nav__links{
    display:flex;
  }


  .nav__cta{
    display:inline-flex;
  }


  .burger{
    display:none;
  }


  .process-hero{
    padding-top:142px;
  }


  .process-hero__grid{
    grid-template-columns:
      minmax(0,.88fr)
      minmax(0,1.12fr);

    gap:68px;
  }


  .process-hero__visual{
    min-height:350px;
  }


  .process-step{
    min-height:82svh;

    padding-block:112px;
  }


  .process-step__grid{
    grid-template-columns:
      minmax(0,.9fr)
      minmax(0,1.1fr);

    gap:78px;
  }


  .process-step__grid--reverse .process-step__copy{
    order:2;
  }


  .process-step__grid--reverse .step-visual{
    order:1;
  }


  .process-step__number{
    font-size:5.2rem;
  }


  .step-visual{
    min-height:420px;
  }


  .process-cta__box{
    grid-template-columns:
      minmax(0,1.35fr)
      auto;

    align-items:center;

    gap:40px;

    padding:38px 42px;
  }


  .process-cta__actions{
    align-items:flex-end;

    text-align:right;
  }


  .foot__grid{
    grid-template-columns:
      1.6fr
      1fr
      1fr
      1fr;

    gap:40px;
  }

}


/* ============================================================
   DESKTOP GRANDE
   ============================================================ */

@media (min-width:1200px){

  .process-hero__grid{
    gap:78px;
  }


  .process-step__grid{
    gap:88px;
  }

}


/* ============================================================
   NOTEBOOKS / VIEWPORTS BAIXOS
   ============================================================ */

@media (min-width:920px) and (max-height:850px){

  .process-hero{
    padding-top:118px;
    padding-bottom:86px;
  }


  .process-step{
    min-height:720px;
    padding-block:88px;
  }


  .step-visual{
    min-height:350px;
  }

}


/* ============================================================
   MOBILE PEQUENO
   ============================================================ */

@media (max-width:420px){

  .process-hero{
    padding-top:112px;
  }


  .process-hero__title{
    max-width:8.5ch;
  }

  .process-hero__actions{
    flex-direction:column;
  }


  .process-hero__actions .btn{
    width:100%;
  }


  .process-hero__visual{
    min-height:280px;
  }


  .hero-browser--main{
    right:3%;

    width:68%;
    height:210px;
  }


  .hero-browser--back{
    width:38%;
    height:135px;
  }


  .hero-dark-card{
    left:7%;
    top:84px;

    width:148px;

    padding:19px 15px;
  }


  .hero-dark-card > span{
    font-size:.86rem;
  }


  .hero-check-card{
    width:130px;

    font-size:.59rem;
  }


  .hero-handnote{
    display:none;
  }


  .process-step{
    min-height:auto;

    padding-block:88px;
  }


  .process-step__copy{
    grid-template-columns:1fr;
    gap:14px;
  }


  .process-step__number{
    font-size:3.4rem;
  }


  .process-step__copy h2{
    font-size:2.15rem;
  }


  .step-visual{
    min-height:290px;
  }


  .step-note{
    display:none;
  }


  .notebook{
    left:5%;
    width:73%;
  }


  .pen{
    right:8%;
  }


  .strategy-card{
    left:4%;
    width:62%;
  }


  .strategy-list{
    right:3%;
    width:47%;
  }


  .design-type-card{
    left:2%;
  }


  .design-browser{
    right:1%;
    width:74%;
  }


  .code-card{
    left:1%;
    right:1%;
  }


  .code-checks{
    right:1%;
  }


  .review-card{
    left:2%;
    width:68%;
  }


  .review-success{
    right:1%;
    width:43%;
  }


  .launch-card{
    left:1%;
    right:1%;
  }


  .process-cta__actions{
    width:100%;
  }


  .process-cta__actions .btn{
    width:100%;
  }

}

/* ============================================================
   HERO — TÍTULO NO MOBILE
   Mantém "à publicação." sempre na mesma linha
   ============================================================ */

@media (max-width:767px){

  .process-hero__title{
    /* Remove a largura estreita usada no desktop. */
    max-width:none;
  }

  .process-hero__title-line{
    /* Impede a quebra entre "à" e "publicação". */
    white-space:nowrap;
  }

}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }


  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }


  .reveal,
  .hero-enter{
    opacity:1 !important;
    transform:none !important;
  }

}