/* Estudo visual. Carregado apenas com ?direction=white. */
html[data-direction="white"]{
  --paper:#fff;
  --cream:#f7f4ee;
  --soft:#fbfaf7;
  --ink:#081710;
  --line:rgba(8,23,16,.16);
}

html[data-direction="white"] body{background:#fff}

html[data-direction="white"] .site-head{
  background:rgba(0,10,6,.08);
  border-bottom-color:rgba(255,255,255,.12);
  backdrop-filter:blur(2px);
  transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease,backdrop-filter 220ms ease;
}

html[data-direction="white"] .site-head:not(.is-light) .nav a:not(.pill){display:none}

html[data-direction="white"] .site-head.is-light{
  color:var(--ink);
  background:rgba(255,255,255,.94);
  border-bottom-color:rgba(8,23,16,.12);
  backdrop-filter:blur(18px);
}

html[data-direction="white"] .site-head.is-light .logo-white{opacity:0}
html[data-direction="white"] .site-head.is-light .logo-color{opacity:1}

html[data-direction="white"] .site-head.is-light .pill{
  color:var(--ink);
  background:transparent;
  border-color:rgba(8,23,16,.28);
}
html[data-direction="white"] .site-head.is-light .menu-toggle{color:var(--ink)}
html[data-direction="white"] .site-head.is-light + .mobile-menu{
  color:var(--ink);
  background:rgba(255,255,255,.985);
}
html[data-direction="white"] .site-head.is-light + .mobile-menu .mobile-menu-nav>a:not(.pill){border-bottom-color:rgba(8,23,16,.14)}
html[data-direction="white"] .about,
html[data-direction="white"] .products,
html[data-direction="white"] .standard{background:#fff}

html[data-direction="white"] .about{
  padding-top:clamp(120px,14vw,220px);
}

html[data-direction="white"] .about-top{
  padding-bottom:clamp(90px,11vw,170px);
}

html[data-direction="white"] .metrics{
  background:var(--soft);
  border-color:var(--line);
}

html[data-direction="white"] .metric{
  min-height:260px;
  padding:44px 40px;
  border-color:var(--line);
}

html[data-direction="white"] .products{
  min-height:100svh;
  padding-block:clamp(78px,7vw,108px);
  display:flex;
  align-items:center;
}

html[data-direction="white"] .products .section-head{
  margin-bottom:clamp(34px,3.5vw,50px);
}

html[data-direction="white"] .products .display{
  font-size:clamp(52px,5.25vw,86px);
}

html[data-direction="white"] .editorial-grid{
  grid-template-rows:repeat(2,clamp(205px,22vh,228px));
  gap:16px;
  border:0;
  background:#fff;
}

html[data-direction="white"] .tile{
  border:0!important;
  border-radius:2px;
  background:var(--cream);
}

html[data-direction="white"] .tile:focus-visible,
html[data-direction="white"] .solution:focus-visible,
html[data-direction="white"] .pill:focus-visible{
  outline:3px solid #008835;
  outline-offset:4px;
}

html[data-direction="white"] .solutions{
  min-height:100svh;
  padding-block:clamp(70px,6vw,94px);
  display:flex;
  align-items:center;
  margin-inline:clamp(0px,1.7vw,28px);
  border-radius:clamp(0px,2vw,28px);
  background:#03130c;
  overflow:hidden;
}

html[data-direction="white"] .solutions .display{
  font-size:clamp(52px,5.25vw,86px);
}

html[data-direction="white"] .solutions .section-head{
  margin-bottom:0;
}

html[data-direction="white"] .solutions-grid{
  margin-top:clamp(34px,3.5vw,50px);
}

html[data-direction="white"] .solutions-image{
  min-height:clamp(480px,54vh,520px);
}

html[data-direction="white"] .solution{
  padding-block:20px;
}

html[data-direction="white"] .solution-stage-cta{
  min-height:58px;
  padding-inline:30px;
  color:#fff;
  background:#008835;
  border-color:#008835;
  backdrop-filter:none;
  box-shadow:0 18px 42px rgba(0,136,53,.36);
}

html[data-direction="white"] .standard{
  min-height:100svh;
  padding-block:clamp(82px,7vw,112px);
  display:flex;
  align-items:center;
}

html[data-direction="white"] .standard-images{
  height:clamp(510px,62vh,590px);
  grid-template-columns:1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px;
}

html[data-direction="white"] .standard-images figure{
  border-radius:2px;
}

html[data-direction="white"] .standard-images figure:first-child{
  margin-top:0;
}

html[data-direction="white"] .standard-images figure:first-child img{
  object-position:center 58%;
}

html[data-direction="white"] .standard-images figure:last-child img{
  object-position:center 48%;
}

html[data-direction="white"] .standard-copy .display{
  font-size:clamp(50px,5.2vw,84px);
}

html[data-direction="white"] .standard-lede{
  margin-block:26px 34px;
}

html[data-direction="white"] .signal{
  min-height:104px;
  align-items:center;
}

html[data-direction="white"] .sustain{
  margin-inline:clamp(0px,1.7vw,28px);
  border-radius:clamp(0px,2vw,28px);
  min-height:880px;
}

html[data-direction="white"] .closing{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:center;
  color:var(--ink);
  background:#fff;
  overflow:hidden;
}

html[data-direction="white"] .closing::before{
  content:"";
  position:absolute;
  inset:34px 34px 34px 53%;
  border-radius:3px;
  background:url('../img/fechamento-cone-vermelho-carmim-v6-limpo.webp') 58% center/cover no-repeat;
}

html[data-direction="white"] .closing-grid{
  position:relative;
  z-index:1;
  width:100%;
  grid-template-columns:minmax(0,47%) 1fr;
  align-items:center;
  gap:6vw;
}

html[data-direction="white"] .closing .display strong{
  display:block;
  color:var(--green)!important;
}

html[data-direction="white"] .closing-lede{
  max-width:590px;
  margin:34px 0 32px;
  color:#4e5c54;
  font-size:clamp(16px,1.35vw,19px);
  font-weight:300;
}

html[data-direction="white"] .closing .closing-cta{
  min-height:56px;
  padding-inline:30px;
  color:#fff;
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 18px 44px rgba(0,137,61,.18);
  backdrop-filter:none;
}

html[data-direction="white"] .pill{
  transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 200ms ease,color 200ms ease;
}

html[data-direction="white"] .pill:active{transform:scale(.97)}

@media(hover:hover) and (pointer:fine){
  html[data-direction="white"] .solution-stage-cta:hover{
    color:#fff;
    background:#006f2d;
    border-color:#006f2d;
    transform:translateY(-2px);
    box-shadow:0 22px 48px rgba(0,111,45,.42);
  }
  html[data-direction="white"] .closing .closing-cta:hover{
    color:#fff;
    background:#007d37;
    border-color:#007d37;
    transform:translateY(-2px);
    box-shadow:0 22px 52px rgba(0,125,55,.24);
  }
}

@media(max-width:900px){
  html[data-direction="white"] .products,
  html[data-direction="white"] .solutions,
  html[data-direction="white"] .standard{min-height:auto;display:block}
  html[data-direction="white"] .products,
  html[data-direction="white"] .standard{padding-block:110px}
  html[data-direction="white"] .solutions{padding-block:96px}
  html[data-direction="white"] .editorial-grid{grid-template-rows:400px repeat(2,240px)}
  html[data-direction="white"] .solutions-image{min-height:480px}
  html[data-direction="white"] .standard-images{height:560px}
  html[data-direction="white"] .closing{min-height:760px;align-items:flex-end}
  html[data-direction="white"] .closing::before{inset:24px 24px 42% 24%}
  html[data-direction="white"] .closing-grid{grid-template-columns:1fr;padding-bottom:74px}
}

@media(max-width:560px){
  html[data-direction="white"] .about{padding-top:105px}
  html[data-direction="white"] .metric{min-height:170px;padding:30px 24px}
  html[data-direction="white"] .products{padding-block:92px}
  html[data-direction="white"] .editorial-grid{display:grid;gap:10px;border:0}
  html[data-direction="white"] .tile{height:300px}
  html[data-direction="white"] .tile.big{height:470px}
  html[data-direction="white"] .solutions,
  html[data-direction="white"] .sustain{margin-inline:10px;border-radius:18px}
  html[data-direction="white"] .solutions{padding-block:82px}
  html[data-direction="white"] .standard{padding-block:92px}
  html[data-direction="white"] .standard-images{height:500px;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
  html[data-direction="white"] .standard-images figure:first-child{margin-top:0}
  html[data-direction="white"] .signal{min-height:92px}
  html[data-direction="white"] .closing{min-height:780px}
  html[data-direction="white"] .closing::before{inset:18px 18px 48% 18%}
  html[data-direction="white"] .closing-grid{padding-bottom:54px}
  html[data-direction="white"] .closing-lede{margin-block:26px 28px;font-size:15px}
  html[data-direction="white"] .closing .closing-cta{width:100%;padding-inline:22px}
}