/* Home: hero, véu, depoimentos em vídeo. Gerado a partir das 3 páginas; edite aqui (uma vez) e rode deploy/deploy.sh. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  
  
  background:
    linear-gradient(180deg, rgba(0,36,79,.5) 0%, rgba(0,36,79,.1) 12%, rgba(0,36,79,.58) 24%, rgba(0,36,79,.76) 42%, rgba(0,36,79,.88) 72%, rgba(0,36,79,.95) 100%);
}
@media (min-width:768px){
  .hero::after{
    
    background:
      radial-gradient(78% 95% at 18% 56%, rgba(0,36,79,.86) 0%, rgba(0,36,79,.72) 50%, rgba(0,36,79,0) 88%),
      linear-gradient(90deg, rgba(0,36,79,.45) 0%, rgba(0,36,79,.15) 65%, rgba(0,36,79,0) 100%),
      linear-gradient(180deg, rgba(0,36,79,.45) 0%, rgba(0,36,79,0) 30%, rgba(0,36,79,.1) 68%, rgba(0,36,79,.9) 100%);
  }
}
.hero h1{text-shadow:0 0 28px rgba(0,21,48,.75), 0 2px 6px rgba(0,21,48,.45)}
.hero .eyebrow{text-shadow:0 0 14px rgba(0,21,48,.8), 0 1px 3px rgba(0,21,48,.6)}
.hero .hero-sub{font-weight:400;color:var(--off-white);text-shadow:0 0 18px rgba(0,21,48,.85), 0 1px 4px rgba(0,21,48,.6)}
.hero .cta-note{font-weight:400;color:rgba(249,247,245,.92);text-shadow:0 0 12px rgba(0,21,48,.85), 0 1px 3px rgba(0,21,48,.6)}
.specs dd small{font-weight:400;color:var(--cinza);font-size:.8125rem}
.vid-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,76vw);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 1rem;align-items:start;
  scroll-padding-inline:var(--gutter);
}
.vid-grid::-webkit-scrollbar{display:none}
.vid-item{scroll-snap-align:start;min-width:0}
.vid{position:relative;aspect-ratio:9/16;background:var(--azul-1);border-radius:var(--radius);overflow:hidden}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--azul-1)}
.vid-play{
  position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;
  background:linear-gradient(180deg, rgba(0,36,79,0) 55%, rgba(0,36,79,.55) 100%);
  -webkit-tap-highlight-color:transparent;--focus:var(--dourado);
}
.vid-play span{
  width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  background:var(--dourado);color:var(--azul-1);
  transition:transform .4s var(--ease), background-color .4s var(--ease);
}
.vid-play svg{width:26px;height:26px;margin-left:3px}
.vid-play:hover span{transform:scale(1.07);background:#D5B77E}
.vid.is-playing .vid-play{display:none}
.price dd,.specs dd,.cmp-rows dd{font-weight:500}
@media (min-width:1024px){
  .how{grid-template-columns:1.1fr .9fr;gap:5rem;align-items:start}
  
  .steps{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:0}
  .step{padding:2rem 0;border-bottom:1px solid rgba(201,168,106,.3);cursor:pointer}
  .step:last-child{border-bottom:0}
  html.js .step{opacity:.45;transition:opacity .5s var(--ease)}
  html.js .step.is-active{opacity:1}
  .step-shot,.steps-hint{display:none}
  .how-stage{display:block;position:sticky;top:110px;justify-self:center;width:min(290px,100%);aspect-ratio:520/1068}
  .stage-shot{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
  .stage-shot.is-active{opacity:1}
  .marinas{grid-template-columns:1fr 1fr;gap:5rem}
  .vid-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0;gap:1.5rem}
}
:root{color-scheme:light}