@import url("fonts.css");

:root{
  --base:#006354;
  --base-med:#0D796A;
  --base-claro:#659A8C;

  --acento:#D94E33;
  --acento-med:#E07A56;
  --acento-claro:#EEC1A2;

  --preto:#231F20;
  --branco:#FFFFFF;

  --fonte:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fonte-2:"Questrial",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fonte-marca:"Eastman Roman","Eastman",var(--fonte);
  --fonte-marca-2:Tahoma,Verdana,var(--fonte-2);

  --pad-x:clamp(24px,6vw,110px);
  --pad-y:clamp(30px,5vh,64px);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--base);
}

body{
  margin:0;
  font-family:var(--fonte);
  font-weight:300;
  color:var(--branco);
  background:var(--base);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

.screen{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  overflow:hidden;
}

.t-base   { background:var(--base);     color:var(--branco) }
.t-base-med { background:var(--base-med); color:var(--branco) }
.t-acento{ background:var(--acento);  color:var(--base)   }
.t-preto  { background:var(--preto);    color:var(--branco) }

.t-branco { background:var(--branco);   color:var(--preto)  }

.hero{
  background:var(--branco);
  color:var(--preto);
  align-items:center;
  justify-content:center;
}

.hero__meta{
  position:absolute;
  top:var(--pad-y);
  left:var(--pad-x);
  right:var(--pad-x);
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.8vw,11px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(35,31,32,.5);
  opacity:0;
}
.hero__logo{ display:block; line-height:0 }
.hero__logo .raiz-logo{ height:clamp(20px,2.2vw,30px) }

.stage{
  width:min(78vw,1180px);
  cursor:pointer;
}
.logo-svg{ width:100%; height:auto; display:block; overflow:visible }

.hero #grid{ opacity:.30 }

.gl{ opacity:0 }
.ltr{ opacity:0; transform-box:fill-box; transform-origin:50% 100% }
.gv{ transform-box:fill-box; transform-origin:50% 100% }
.gh{ transform-box:fill-box; transform-origin:0% 50% }

.hero #type path{
  fill-opacity:.69;
  transition:fill-opacity 900ms cubic-bezier(.2,.7,.2,1);
}
.is-done .hero #type path{ fill-opacity:1 }

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:var(--pad-y);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-family:var(--fonte-2);
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(35,31,32,.55);
  text-decoration:none;
  opacity:0;
}
.scroll-cue__line{
  width:1px; height:44px;
  background:linear-gradient(to bottom,var(--acento),transparent);
  animation:cueSlide 1.9s ease-in-out infinite;
}
@keyframes cueSlide{
  0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.5 }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1  }
}

.ui-in{ animation:fadeIn 900ms cubic-bezier(.2,.7,.2,1) forwards }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.hero__meta.ui-in{ animation-name:fadeInUp }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.scroll-cue.ui-in{ animation-name:fadeInUpC }
@keyframes fadeInUpC{ from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }

.sec{
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--pad-y) + 28px) var(--pad-x) calc(var(--pad-y) + 54px);
}

.sec__grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(28px,5vw,80px);
  align-items:center;
}
.sec__grid--wide{ grid-template-columns:1fr }

.sec__title{
  margin:0;
  font-weight:800;

  font-size:clamp(28px,3.75vw,62px);
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--acento);
  overflow-wrap:break-word;
  hyphens:manual;
}
.t-acento .sec__title{ color:var(--base) }

.eyebrow{
  font-family:var(--fonte-2);
  font-size:clamp(9px,.8vw,11px);
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.6;
  margin:0 0 14px;
}

.sec__body p{
  margin:0 0 1.05em;
  font-size:clamp(13.5px,1.15vw,17px);
  line-height:1.75;
  max-width:62ch;
  color:rgba(255,255,255,.86);
}
.t-acento .sec__body p{ color:rgba(35,31,32,.82) }
.sec__body p:last-child{ margin-bottom:0 }

.deflist{ margin:0; display:grid; gap:clamp(14px,1.8vh,22px) }
.deflist dt{
  font-family:var(--fonte-2);
  font-size:clamp(9px,.78vw,11px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--acento);
  margin-bottom:5px;
}
.t-acento .deflist dt{ color:var(--base) }
.deflist dd{
  margin:0;
  font-size:clamp(13.5px,1.1vw,16.5px);
  line-height:1.7;
  color:rgba(255,255,255,.86);
  max-width:60ch;
}

.pills{ display:grid; gap:12px; margin-top:clamp(18px,3vh,30px) }
.pill{ border-left:2px solid var(--acento); padding:2px 0 2px 16px }
.pill b{
  display:block;
  font-family:var(--fonte-2);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acento); margin-bottom:4px; font-weight:400;
}
.pill span{ font-size:clamp(14px,1.2vw,18px); line-height:1.5; font-weight:400 }

.sec__foot{
  position:absolute;
  left:var(--pad-x); right:var(--pad-x);
  bottom:var(--pad-y);
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  font-family:var(--fonte-2);
  font-size:clamp(8px,.72vw,10px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.t-acento .sec__foot{ color:rgba(35,31,32,.5) }
.sec__foot hr{ flex:1; border:0; height:1px; margin:0; background:currentColor; opacity:.35 }

.raiz-logo{
  height:clamp(17px,1.9vw,26px);
  width:auto;
  display:block;
  color:var(--acento);
  flex:none;
}
.t-acento .raiz-logo{ color:var(--base) }

.versions{ padding:0; display:grid; grid-template-columns:1fr 1fr }
.version{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,6vw,80px);
  position:relative;
}
.version--acento{ background:var(--acento); color:var(--base) }
.version--base   { background:var(--base);    color:var(--acento) }
.version .mark-svg{ width:min(74%,520px); height:auto; color:inherit }

.versions--h .version .mark-svg{ width:min(86%,600px) }
.version__tag{
  position:absolute; bottom:clamp(18px,4vh,38px); left:0; right:0;
  text-align:center;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.72vw,10px); letter-spacing:.24em; text-transform:uppercase;

  opacity:.78;
}

.type-block + .type-block{ margin-top:clamp(24px,4vh,46px) }
.type-name{
  font-family:var(--fonte-marca);
  font-size:clamp(40px,6vw,88px);
  line-height:.98;
  margin:0 0 10px;
  color:var(--acento);
  font-weight:800;
}
.type-block--2 .type-name{
  font-family:var(--fonte-marca-2);
  font-weight:400;
  color:var(--acento-claro);
}
.type-set{
  font-family:var(--fonte-marca);

  font-size:clamp(9.5px,1.06vw,19px);
  line-height:1.7;
  letter-spacing:.03em;
  word-spacing:.14em;
  color:rgba(255,255,255,.82);
  margin:0;
  white-space:nowrap;
}
.type-block--2 .type-set{ font-family:var(--fonte-marca-2) }
.type-set + .type-set{ margin-top:4px; color:rgba(255,255,255,.6) }

.palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(6px,.8vw,14px); width:100% }
.swatch{
  position:relative;
  border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:clamp(180px,40vh,360px);
  color:rgba(35,31,32,.78);
  transform-origin:center bottom;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),
             box-shadow .38s cubic-bezier(.2,.7,.2,1);
}
.swatch:hover,
.swatch:focus-within{
  transform:scale(1.09) translateY(-8px);
  box-shadow:0 26px 54px rgba(0,0,0,.38);
  z-index:3;
}

.swatch__fill{
  flex:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
.swatch__info{
  padding:clamp(8px,1vw,14px);
  background:rgba(255,255,255,.94);
  font-family:var(--fonte-2);
  font-size:clamp(7.5px,.62vw,10px);
  line-height:1.75;
  letter-spacing:.06em;
}
.swatch__info b{ display:block; font-weight:400; letter-spacing:.14em; text-transform:uppercase }
.neutrals{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(6px,.8vw,14px); margin-top:clamp(6px,.8vw,14px) }
.neutral{
  position:relative;
  transform-origin:center bottom;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),
             box-shadow .38s cubic-bezier(.2,.7,.2,1);
  padding:clamp(14px,2vw,24px);
  border-radius:3px;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.85vw,12px);
  letter-spacing:.2em;
  text-transform:uppercase;
  min-height:clamp(64px,10vh,110px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.neutral:hover{ transform:scale(1.05) translateY(-6px); box-shadow:0 22px 46px rgba(0,0,0,.34); z-index:3 }
.neutral--preto { background:var(--preto);  color:var(--branco) }
.neutral--branco{ background:var(--branco); color:var(--preto)  }

.shot{ padding:0; align-items:center; justify-content:center }
.shot img{ width:100%; height:100%; position:absolute; inset:0 }
.shot--cover img{ object-fit:cover }
.shot--contain img{ object-fit:contain }
.shot__tag{
  position:absolute;
  left:var(--pad-x); bottom:var(--pad-y);
  z-index:2;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.8vw,11px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--branco);

  background:rgba(35,31,32,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:9px 16px;
  border-radius:999px;
  pointer-events:none;
}

.board{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3vh,34px);
  padding:calc(var(--pad-y) + 20px) var(--pad-x);
}

.board__marca,
.board__grade{ display:none }

.board__art{
  width:auto; height:auto;
  max-width:min(100%,1360px);
  max-height:64vh;
}

.board__marca{ width:min(34vw,150px); height:auto }
.board__marca--alta{ width:min(46vw,200px) }
.board__grade{ width:auto; height:auto; max-width:100%; max-height:54vh }
.board__grade--alta{ max-height:54vh }
.board__art--tall{ height:min(72vh,700px); width:auto; max-width:34vw; max-height:none }

.board__art--pagina{ max-height:74vh }
.board__tag{
  margin:0;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.8vw,11px);
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.65;
}

.board--split{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:clamp(32px,5vw,90px);
}
.board__side{ display:flex; flex-direction:column; gap:clamp(14px,2.4vh,26px) }
.board__side .mark-svg{
  width:min(40vw,600px); height:auto;
  color:var(--base);
  --alvo:var(--acento);
}

.ampliar{
  position:relative;
  display:block;
  padding:0; border:0; background:none;
  font:inherit; color:inherit;
  cursor:zoom-in;
}
.shot .ampliar{ position:absolute; inset:0 }
.ampliar:focus-visible{ outline:2px solid var(--acento); outline-offset:-4px }

.ampliar__lupa{
  position:absolute; z-index:3;
  right:clamp(10px,1.6vw,18px); top:clamp(10px,1.6vw,18px);
  width:clamp(32px,3.2vw,40px); height:clamp(32px,3.2vw,40px);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(35,31,32,.55);
  color:var(--branco);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background-color .25s,color .25s,transform .25s;
  pointer-events:none;
}
.ampliar__lupa svg{ width:52%; height:52% }
.ampliar:hover .ampliar__lupa,
.ampliar:focus-visible .ampliar__lupa{
  background:var(--acento); color:var(--base); transform:scale(1.08);
}

.lente{ position:fixed; inset:0; z-index:60; display:none }
.lente.aberta{ display:block }
body.lente-aberta{ position:fixed; left:0; right:0; width:100% }

.lente__fundo{
  position:absolute; inset:0;
  background:var(--base);
  opacity:.97;
  cursor:zoom-out;
}

.lente::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:clamp(88px,13vh,150px);
  background:linear-gradient(to top,rgba(35,31,32,.62),rgba(35,31,32,0));
  pointer-events:none;
}

.lente__palco{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:none;
  cursor:zoom-in;
}

.lente__img{
  max-width:calc(100% - 2 * clamp(10px,3vw,52px));
  max-height:calc(100% - clamp(112px,16vh,168px));
  width:auto; height:auto;
  background:var(--branco);
  transform-origin:center center;
  will-change:transform;
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
}

.lente__fechar,
.lente__nav,
.lente__zoom{
  position:absolute; z-index:4;
  width:clamp(38px,4.4vw,48px); height:clamp(38px,4.4vw,48px);
  display:grid; place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;

  background:rgba(35,31,32,.62);
  color:var(--branco);
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .25s,color .25s,border-color .25s,transform .25s;
}
.lente__fechar:hover,.lente__nav:hover,.lente__zoom:hover{
  background:var(--acento); color:var(--base); border-color:var(--acento);
}
.lente__fechar:focus-visible,.lente__nav:focus-visible,.lente__zoom:focus-visible{
  outline:2px solid var(--acento); outline-offset:3px;
}
.lente__fechar svg,.lente__nav svg,.lente__zoom svg{ width:44%; height:44% }

.lente__fechar{ top:clamp(14px,3vh,28px); right:clamp(14px,3vw,32px) }
.lente__nav{ top:50%; transform:translateY(-50%) }
.lente__nav:hover{ transform:translateY(-50%) scale(1.06) }
.lente__nav--ant { left:clamp(10px,2vw,28px) }
.lente__nav--prox{ right:clamp(10px,2vw,28px) }
.lente__nav--prox svg{ transform:rotate(180deg) }

.lente--unica .lente__nav{ display:none }

.lente__barra{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  padding:clamp(12px,2.4vh,24px) clamp(64px,10vw,110px);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,2vw,18px);
  flex-wrap:wrap;
  pointer-events:none;
}
.lente__barra > *{ pointer-events:auto }
.lente__zoom{ position:static; flex:none }

.lente__conta{
  flex:none;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.78vw,11px);
  letter-spacing:.22em;
  color:rgba(255,255,255,.58);
}
.lente__legenda{
  margin:0;
  font-family:var(--fonte-2);
  font-size:clamp(9px,.8vw,12px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--branco);
  text-align:center;
  max-width:52ch;
}
.lente__dica{
  position:absolute; z-index:4; left:0; right:0;
  bottom:calc(clamp(12px,2.4vh,24px) + clamp(38px,4.4vw,48px) + 14px);
  margin:0;
  text-align:center;
  font-family:var(--fonte-2);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 6px rgba(35,31,32,.7);
  pointer-events:none;
  display:none;
}
.lente.tem-zoom .lente__dica{ opacity:0 }
@media (hover:none){ .lente__dica{ display:block } }

.end{ align-items:center; justify-content:center; flex-direction:column; gap:clamp(20px,4vh,40px); text-align:center }
.end__raiz{ width:min(46vw,340px); height:auto; display:block; color:var(--acento) }

.social{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  border-radius:999px;
  font-family:var(--fonte);
  font-size:clamp(12px,1.05vw,15px);
  font-weight:600;
  letter-spacing:.06em;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s,color .25s,border-color .25s;
}
.btn__ico{ width:1.15em; height:1.15em; flex:none }
.btn--ig{ background:var(--acento); color:var(--base) }
.btn--ig:hover{ background:var(--acento-med) }
.btn--wa{ background:transparent; color:var(--acento); border-color:var(--acento) }
.btn--wa:hover{ background:var(--acento); color:var(--base) }
.btn:hover{ transform:translateY(-2px) }
.btn:focus-visible{ outline:2px solid var(--branco); outline-offset:3px }
.end__credit{
  font-family:var(--fonte-2);
  font-size:clamp(10px,.9vw,13px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  line-height:2.2;
}
.end__credit b{ color:var(--acento); font-weight:400 }
.top-link{
  font-family:var(--fonte-2);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:10px 20px;
  transition:color .25s,border-color .25s;
}
.top-link:hover{ color:var(--acento); border-color:var(--acento) }

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none }
.reveal[data-delay="1"]{ transition-delay:.10s }
.reveal[data-delay="2"]{ transition-delay:.20s }
.reveal[data-delay="3"]{ transition-delay:.30s }

@media (max-width:900px){
  .stage{ width:86vw }
  .sec__grid{ grid-template-columns:1fr; gap:clamp(20px,4vh,32px) }

  .sec{ padding-top:calc(var(--pad-y) + 34px) }
  .sec__body p{ line-height:1.62; margin-bottom:.85em }
  .neutral{ min-height:clamp(56px,7.5vh,90px) }
  .versions{ grid-template-columns:1fr }

  .version{ min-height:50svh; padding:clamp(18px,5vw,40px) }
  .version .mark-svg{ width:min(64%,360px); max-height:32svh }
  .versions--h .version .mark-svg{ width:min(88%,520px); max-height:22svh }
  .palette{ grid-template-columns:repeat(3,1fr) }

  .type-set{ white-space:normal; font-size:clamp(11px,2.3vw,17px); line-height:1.55 }
  .type-set span{ display:block }

  .type-name{ font-size:clamp(32px,5vw,60px) }
  .type-block + .type-block{ margin-top:clamp(16px,3vh,30px) }
  .swatch:hover,.swatch:focus-within,.neutral:hover{ transform:none; box-shadow:none }
  .swatch{ min-height:clamp(120px,17vh,200px) }
  .sec__foot{ font-size:8px; gap:12px }
  .sec__foot .hide-sm{ display:none }
  .raiz-logo{ height:16px }
  .social{ width:100%; flex-direction:column; align-items:stretch; max-width:320px }
  .btn{ justify-content:center }

  .shot{ min-height:62svh }

  .lente__nav{ top:auto; bottom:clamp(12px,2.4vh,24px); transform:none }
  .lente__nav:hover{ transform:scale(1.06) }

  .lente__barra{
    left:calc(clamp(38px,4.4vw,48px) + clamp(10px,2vw,28px) + 10px);
    right:calc(clamp(38px,4.4vw,48px) + clamp(10px,2vw,28px) + 10px);
    padding-left:0; padding-right:0;
  }
  .lente__legenda{ font-size:9px; letter-spacing:.14em }
  .board--split{ flex-direction:column; justify-content:center }
  .board__art--tall{ height:auto; max-width:min(60vw,260px); max-height:52vh }

  .board{ gap:clamp(12px,2vh,22px); padding-left:clamp(14px,4vw,40px); padding-right:clamp(14px,4vw,40px) }
  .board--partida .board__art{ display:none }
  .board--partida .board__marca,
  .board--partida .board__grade{ display:block }

  .board__art--pagina{ max-height:54vh }
  .board__marca--alta{ width:min(38vw,176px) }
  .board__side{ align-items:center; text-align:center }
  .board__side .mark-svg{ width:min(62vw,300px) }
}

@media (max-width:520px){
  .palette{ grid-template-columns:repeat(2,1fr) }
  .type-set{ font-size:12px }

  .sec{ padding-top:calc(var(--pad-y) + 26px) }
  .sec__body p{ font-size:13px; line-height:1.55 }
  .deflist{ gap:12px }
  .pills{ gap:9px; margin-top:16px }
}

@media (max-height:520px) and (orientation:landscape){
  .stage{ width:62vw }
  .scroll-cue{ display:none }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .scroll-cue__line{ animation:none }
  .ui-in{ animation:none; opacity:1 }
  .reveal{ opacity:1; transform:none; transition:none }
  .swatch,.neutral{ transition:none }
  .swatch:hover,.swatch:focus-within,.neutral:hover{ transform:none }
  .ampliar__lupa,.lente__fechar,.lente__nav,.lente__zoom{ transition:none }
}