*{box-sizing:border-box}

html{-webkit-font-smoothing:antialiased}

body{
  margin:0;
  font-family:var(--font-core);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--surface-page);
  overflow-x:hidden;
}

a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:var(--border-width) solid var(--link-rule);
  transition:color var(--transition-ui),border-color var(--transition-ui);
}
a:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}

::selection{background:var(--accent);color:var(--ink-inverse)}

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

/* ---------- estrutura ---------- */

.container{max-width:var(--container-max);margin:0 auto}

.section{padding:var(--section-py) var(--container-px)}
.section--band{background:var(--surface-band)}
.section--brick{background:var(--surface-brick)}
.section--accent{background:var(--surface-accent)}

.measure{max-width:var(--container-text)}

.rule{width:var(--rule-width);height:var(--rule-height);background:var(--line-rule)}
.rule--inverse{background:var(--rule-inverse)}

/* ---------- tipografia ---------- */

.display{
  margin:0;
  font-size:var(--size-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  font-weight:var(--weight-medium);
  color:var(--ink-inverse);
  text-wrap:pretty;
}
.display__line{display:block;font-weight:var(--weight-medium)}
.display__word{
  display:block;
  min-height:1.08em;
  font-weight:var(--weight-semibold);
  color:var(--sand);
  transition:opacity var(--transition-word),transform var(--transition-word);
}

.section-title{
  margin:0;
  font-size:var(--size-section);
  font-weight:var(--weight-semibold);
  line-height:var(--lh-section);
  letter-spacing:var(--ls-section);
  color:var(--ink);
  text-wrap:pretty;
}
.section-title--inverse{color:var(--ink-inverse)}
.section-head .measure{margin-left:auto;margin-right:auto}
.highlight{color:var(--accent)}
.highlight--sand{color:var(--sand)}

.subtitle{
  margin:var(--space-5) 0 0;
  font-size:var(--size-subtitle);
  line-height:var(--lh-subtitle);
  color:var(--sand);
  text-wrap:pretty;
}

.lede{margin:var(--space-5) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}
.body{margin:var(--space-5) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--ink);text-wrap:pretty}
.body--muted{color:var(--text-secondary)}
.body--inverse{color:var(--ink-inverse)}
.body--strong{font-weight:var(--weight-medium)}

.source{
  margin:var(--space-3) 0 0;
  font-size:var(--size-source);
  line-height:var(--lh-source);
  font-style:italic;
  color:var(--text-secondary);
}
.source--sand{color:var(--sand);opacity:0.7}

.eyebrow{
  margin:0;
  font-size:var(--size-eyebrow);
  font-weight:var(--weight-medium);
  letter-spacing:var(--ls-eyebrow);
  line-height:var(--lh-eyebrow);
  text-transform:uppercase;
  color:var(--ink);
}
.eyebrow--accent{color:var(--accent)}
.authority__signature-name{margin-top:var(--space-5)}

/* ---------- botao ---------- */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  font-family:var(--font-core);
  font-size:var(--size-button);
  font-weight:var(--weight-medium);
  letter-spacing:var(--ls-button);
  line-height:var(--lh-button);
  text-transform:uppercase;
  padding:var(--space-4) var(--space-8);
  min-height:52px;
  border:none;
  border-radius:var(--radius-none);
  background:var(--accent);
  color:var(--ink-inverse);
  cursor:pointer;
  transition:background-color var(--transition-ui),color var(--transition-ui),border-color var(--transition-ui);
}
.button:hover{background:var(--accent-hover);border-bottom-color:transparent}
.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.button--inverse{background:var(--ink-inverse);color:var(--accent)}
.button--inverse:hover{background:var(--sand);color:var(--accent)}
.button--inverse:focus-visible{outline-color:var(--ink-inverse)}
.button--block{width:100%}

/* ---------- cabecalho ---------- */

.masthead{
  background:var(--surface);
  padding:var(--space-5) var(--container-px);
  border-bottom:var(--border-width) solid var(--line);
}
.masthead__inner{max-width:var(--container-max);margin:0 auto;display:flex;align-items:center}
.masthead__logo{height:34px;width:auto}

/* ---------- hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--surface-accent);
  min-height:80vh;
  display:flex;
  align-items:center;
  padding:var(--section-py) var(--container-px);
}
.hero__dots{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(var(--dot-color) 1.2px,transparent 1.2px);
  background-size:var(--dot-cell-mobile) var(--dot-cell-mobile);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 50%);
  mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 50%);
}
.hero__arcs{
  position:absolute;
  top:0;
  bottom:0;
  right:-15%;
  width:70%;
  z-index:1;
  color:var(--sand);
  opacity:0.14;
  pointer-events:none;
}
.hero__arcs svg{width:100%;height:100%}

.section--relative{position:relative;overflow:hidden}
.pratica__arcs{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:50%;
  z-index:0;
  color:var(--sand);
  opacity:0.14;
  pointer-events:none;
}
.pratica__arcs svg{width:100%;height:100%}
.section--brick .container{position:relative;z-index:1}
.hero__content{position:relative;z-index:2;width:100%;max-width:var(--container-max);margin:0 auto}
.hero__cta{margin-top:var(--space-8);display:flex}
.hero__cta--center{justify-content:center}
.hero__cta--pratica{justify-content:center}

/* ---------- galeria bento ---------- */

.section--bleed{padding-left:0;padding-right:0}
.section--bleed .container{padding-left:var(--container-px);padding-right:var(--container-px)}

.bento{
  margin-top:var(--space-12);
  overflow:hidden;
  touch-action:pan-y;
}
.bento__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:74vw;
  gap:var(--space-4);
  width:max-content;
  animation:bento-scroll 48s linear infinite;
}
.bento.is-dragging .bento__track{animation-play-state:paused}
.bento__track.is-paused{animation-play-state:paused}
@keyframes bento-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.bento__item{
  position:relative;
  margin:0;
  padding:0;
  aspect-ratio:4/5;
  border:var(--border-width) solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--placeholder);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  text-align:left;
  font-family:var(--font-core);
  cursor:pointer;
}
.bento__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bento__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento__caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:var(--space-4);
  background:linear-gradient(to top,var(--photo-scrim),var(--photo-scrim-end));
}
.bento__name{
  display:block;
  font-size:var(--size-eyebrow);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-inverse);
}
.bento__desc{
  display:block;
  margin-top:var(--space-2);
  font-size:var(--size-source);
  line-height:var(--lh-source);
  font-weight:var(--weight-regular);
  color:var(--sand);
}
.lightbox{
  border:none;
  border-radius:var(--radius-sm);
  padding:0;
  max-width:900px;
  width:calc(100% - var(--space-12));
  background:var(--surface);
}
.lightbox::backdrop{background:var(--dialog-scrim)}
.lightbox__figure{margin:0;border-bottom:var(--border-width) solid var(--line)}
.lightbox__figure img{width:100%;height:auto}
.lightbox__body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.lightbox__close{align-self:flex-start;margin-top:var(--space-2)}

/* ---------- dados ---------- */

.stats{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-12)}
.stat{border-left:var(--border-width) solid var(--accent);padding-left:var(--space-6)}
.stat__figure{
  margin:0;
  font-size:var(--size-figure);
  font-weight:var(--weight-semibold);
  line-height:var(--lh-figure);
  letter-spacing:var(--ls-figure);
  color:var(--accent);
}
.stat__text{margin:var(--space-4) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--ink);text-wrap:pretty}

.stats--stacked{display:grid;gap:var(--space-16);margin:var(--space-12) auto 0;max-width:var(--container-text)}
.stat--inverse{border-left-color:var(--rule-inverse);display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:baseline}
.stat--inverse .stat__figure{color:var(--ink-inverse);flex:0 0 auto;min-width:150px}
.stat--inverse .stat__body{flex:1 1 280px}
.stat--inverse .stat__text{margin:0;color:var(--ink-inverse)}

/* ---------- colunas e cards ---------- */

.columns{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-12)}
.column__number{margin:0 0 var(--space-3);font-size:var(--size-figure);font-weight:var(--weight-semibold);letter-spacing:var(--ls-figure);line-height:var(--lh-figure);color:var(--accent)}
.column__title{margin:0;font-size:var(--size-card-title);font-weight:var(--weight-semibold);line-height:1.3;color:var(--ink)}
.column__text{margin:var(--space-4) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}

.precedent{
  box-sizing:border-box;
  width:100%;
  margin:var(--space-16) auto 0;
  max-width:calc(var(--container-max) - clamp(0px,6vw,96px));
  background:var(--surface-band);
  border-radius:var(--radius-sm);
  padding:clamp(24px,4vw,48px);
}
.precedent__title{margin:0;font-size:var(--size-card-title);font-weight:var(--weight-semibold);line-height:1.3;color:var(--accent)}
.precedent__text{margin:var(--space-5) 0 0;text-wrap:pretty}
.precedent__text--muted{font-size:var(--size-body);font-weight:var(--weight-regular);color:var(--ink-muted)}
.precedent__text--turn{
  font-size:var(--size-card-title);
  font-weight:var(--weight-semibold);
  color:var(--accent);
  border-top:var(--border-width) solid var(--line);
  padding-top:var(--space-5);
}

.steps{
  margin-top:var(--space-12);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:82vw;
  gap:var(--space-8);
  overflow-x:auto;
  overflow-y:hidden;
  touch-action:pan-x pan-y;
  scroll-snap-type:x proximity;
  scroll-padding-inline:calc(50% - 41vw);
  padding-inline:calc(50% - 41vw);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.steps::-webkit-scrollbar{display:none}
.step{
  position:relative;
  padding-top:var(--space-8);
  scroll-snap-align:center;
}
.step__track{
  position:absolute;
  top:9px;
  left:calc(28px + var(--space-3));
  right:calc(var(--space-8) * -1);
  height:var(--border-width);
  background:var(--line);
}
.step--last .step__track{display:none}
.step__number{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 0 var(--space-4);
  border-radius:50%;
  background:var(--surface-page);
  border:var(--border-width) solid var(--accent);
  font-size:var(--size-body);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-figure);
  color:var(--accent);
}
.step__title{margin:0;font-size:var(--size-card-title);font-weight:var(--weight-semibold);line-height:1.3;color:var(--ink)}
.step__text{margin:var(--space-3) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}

.steps__nav{display:none}

.split{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-12);align-items:start}
.figure{margin:0}
.figure img{width:100%;height:auto;border:var(--border-width) solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.split .figure img{aspect-ratio:4/3;object-fit:cover}
.figure__text{margin:var(--space-6) 0 0;font-size:var(--size-body);line-height:var(--lh-body);color:var(--text-secondary);text-wrap:pretty}

.cards{margin-top:var(--space-16);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6)}
.card{
  background:var(--surface-card);
  border:var(--border-width) solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--space-8);
}
.card__title{margin:0;font-size:var(--size-eyebrow);font-weight:var(--weight-medium);letter-spacing:var(--ls-eyebrow);line-height:var(--lh-eyebrow);text-transform:uppercase;color:var(--accent)}
.card__text{margin:var(--space-5) 0 0;font-size:var(--size-body-sm);line-height:var(--lh-body-sm);color:var(--text-secondary);text-wrap:pretty}

.authority{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
}
.authority__portrait{position:relative;width:100%;max-width:none;aspect-ratio:4/5;overflow:hidden;box-shadow:var(--shadow-card)}
.authority__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- formulario ---------- */

.form{
  position:relative;
  margin:var(--space-12) auto 0;
  max-width:500px;
  background:var(--surface-card);
  border:var(--border-width) solid var(--line);
  border-radius:var(--radius-sm);
  padding:clamp(24px,4vw,32px);
  display:grid;
  gap:var(--field-gap);
}
.field{display:grid;gap:var(--space-2)}
.field__label{
  font-size:var(--size-label);
  font-weight:var(--weight-medium);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink);
}
.field__input,.field__select{
  width:100%;
  padding:var(--space-4);
  font-family:var(--font-core);
  font-size:var(--size-body);
  color:var(--ink);
  background:var(--surface-field);
  border:var(--border-width) solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color var(--transition-ui);
}
.field__input:focus,.field__select:focus{outline:none;border-color:var(--border-focus)}
.field__select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.microcopy{margin:0;font-size:var(--size-source);line-height:var(--lh-source);color:var(--text-secondary);text-align:center}
.form__feedback{
  margin:0;
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--success);
  text-align:center;
  opacity:0;
  transition:opacity var(--transition-ui);
}
.form__feedback.is-visible{opacity:1}

/* ---------- rodape ---------- */

.footer{background:var(--surface-accent);padding:var(--space-8) var(--container-px)}
.footer__row{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-5);
  text-align:center;
}
.footer__logo{height:40px;width:auto}
.footer__meta{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.footer__privacy{font-size:var(--size-body-sm);line-height:var(--lh-body-sm);color:var(--ink-inverse);border-bottom-color:var(--link-inverse-rule)}
.footer__privacy:hover{color:var(--sand);border-bottom-color:var(--sand)}
.footer__legal{margin:0;font-size:var(--size-source);line-height:var(--lh-source);color:var(--sand)}

/* ---------- breakpoints ---------- */

@media (min-width:768px){
  .hero__dots{background-size:var(--dot-cell) var(--dot-cell)}
  .hero__arcs{right:-3%;width:38%;opacity:0.35}
  .pratica__arcs{left:-3%;width:38%;opacity:0.35}
  .hero .display,.hero .subtitle{max-width:58%}
  .bento__track{grid-auto-columns:38vw}
  .bento{cursor:grab}
  .bento.is-dragging{cursor:grabbing}
  .steps{grid-auto-columns:44vw;scroll-padding-inline:calc(50% - 22vw);padding-inline:calc(50% - 22vw);cursor:grab}
  .steps.is-dragging{cursor:grabbing}
  .steps__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-6);
    margin-top:var(--space-8);
  }
  .steps__arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    border:var(--border-width) solid var(--line);
    background:var(--surface-page);
    color:var(--accent);
    font-size:var(--size-body);
    cursor:pointer;
    transition:border-color var(--transition-ui),background-color var(--transition-ui);
  }
  .steps__arrow:hover{border-color:var(--accent)}
  .steps__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .steps__dots{display:flex;align-items:center;gap:var(--space-3)}
  .steps__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    padding:0;
    background:var(--line);
    cursor:pointer;
  }
  .steps__dot.is-active{background:var(--accent)}
  .section-head{text-align:center}
  .section-head .measure{max-width:var(--container-text)}
  .lede--center{text-align:center;margin-left:auto;margin-right:auto}
  .lede--hide-desktop{display:none}
  .columns--center{text-align:center}
  .columns--center .column__number{margin-left:auto;margin-right:auto}
  .footer__row{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
  .footer__meta{align-items:flex-end;text-align:right}
  .authority{
    grid-template-columns:40fr 60fr;
    grid-template-areas:
      "portrait headline"
      "portrait text"
      "portrait signature";
    align-items:center;
    column-gap:var(--space-12);
    row-gap:var(--space-3);
  }
  .authority__headline{grid-area:headline;margin:0}
  .authority__text{grid-area:text;margin:0}
  .authority__portrait{grid-area:portrait;align-self:start;aspect-ratio:1/1}
  .authority__signature{grid-area:signature}
  .authority__signature-name{margin-top:var(--space-3)}
}

@media (min-width:1024px){
  .bento__track{grid-auto-columns:23vw}
  .steps{grid-auto-columns:30vw;scroll-padding-inline:calc(50% - 15vw);padding-inline:calc(50% - 15vw)}
}

@media (prefers-reduced-motion:reduce){
  .display__word{transition:none}
  .bento__track{animation:none}
}