:root{
  --nb-navy:#0D1936;
  --nb-sand:#F6F1E7;
  --nb-cream:#FAE7B3;
  --nb-lavender:#CABCE6;
  --nb-coral:#FF9495;
  --nb-electric:#FF6A65;
}

.nb-punk-border{
/*   border:2px solid var(--nb-navy); */
/*   box-shadow:4px 4px 0 0 var(--nb-navy); */
	border-top: 2px solid var(--nb-navy);
    border-left: 2px solid var(--nb-navy);
    border-bottom: 8px solid var(--nb-navy);
    border-right: 8px solid var(--nb-navy);
}
.nb-punk-border-sm{
   border:2px solid var(--nb-navy);
   box-shadow:4px 4px 0 0 var(--nb-navy);
/* 	border-top: 2px solid var(--nb-navy);
    border-left: 2px solid var(--nb-navy);
    border-bottom: 4px solid var(--nb-navy);
    border-right: 4px solid var(--nb-navy); */
}

/* Em widgets (botão/ícone), a borda/sombra caem no wrapper .elementor-widget,
   que é retangular por padrão — arredondamos o wrapper pra acompanhar a pílula/círculo interno. */
.elementor-widget-button.nb-punk-border,
.elementor-widget-button.nb-punk-border-sm{
  border-radius:999px;
}
.elementor-widget-icon.nb-punk-border,
.elementor-widget-icon.nb-punk-border-sm{
  border-radius:50%;
}

.nb-marker{
  font-family:'Permanent Marker', 'Nunito', cursive;
}

.elementor .nb-logo img{
  height:80px;
  width:auto;
}
@media (max-width:767px){
  .elementor .nb-logo img{ height:40px; }
}

/* Logo é navy sólido; invertido para ficar legível sobre o fundo navy do footer */
.elementor .nb-logo--footer img{
  height:80px;
  width:auto;
  filter:brightness(0) invert(1);
}

.nb-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--nb-navy);
}

.nb-footer{
  background:var(--nb-navy);
}
.nb-footer__bottom{
  border-top:1px solid rgba(246,241,231,.2);
}

.nb-badge-circle{
  border-radius:50%;
  transform:rotate(-6deg);
  transition:transform .3s ease;
}
.nb-badge-circle:hover{
  transform:rotate(0deg);
}

.nb-hero-photo{
  overflow:hidden;
  border-radius:28px;
}
.elementor .nb-hero-photo img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

.nb-hover-lift{
  transition:transform .2s ease;
}
.nb-hover-lift:hover{
  transform:translateY(-4px);
}

.nb-nav-link{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:color .2s ease;
}
.nb-nav-link:hover{
  color:var(--nb-electric) !important;
}

/* Stickers sobrepostos às fotos (efeito colagem da referência) */
.elementor .nb-photo-wrap{
  position:relative;
}
.elementor .nb-sticker{
  position:absolute;
  z-index:2;
  width:auto;
}
.elementor .nb-sticker--bl{ bottom:-18px; left:-18px;  transform:rotate(-6deg); }
.elementor .nb-sticker--tr{ top:-14px;    right:-10px; transform:rotate(6deg);  }
.elementor .nb-sticker--tl{ top:-18px;    left:-18px;  transform:rotate(-4deg); }

@media (max-width:767px){
  .elementor .nb-sticker--bl{ bottom:-12px; left:-8px; }
  .elementor .nb-sticker--tr{ top:-10px;    right:-4px; }
  .elementor .nb-sticker--tl{ top:-12px;    left:-8px; }
}

/* Selo "100% Brasil" — anel verde externo, miolo amarelo */
.elementor .nb-selo{
  box-sizing:border-box;
  width:112px;
  height:112px;
  flex-shrink:0;
  border-radius:50%;
  transform:rotate(-6deg);
  transition:transform .3s ease;
}
.elementor .nb-selo:hover{
  transform:rotate(0deg);
}
.elementor .nb-selo__inner{
  width:100%;
  height:100%;
  border-radius:50%;
}

/* Igual à referência: no rodapé o selo aparece só a partir do tablet */
@media (max-width:767px){
  .nb-footer .nb-selo{ display:none; }
}

@keyframes nb-float{
  0%, 100% { transform:translateY(0) rotate(-1deg); }
  50%      { transform:translateY(-14px) rotate(1deg); }
}
.elementor .nb-float img{
  animation:nb-float 6s ease-in-out infinite;
}

.elementor .nb-hero-photo img,
.elementor .nb-punk-border,
.elementor .nb-hover-lift{
  transition:transform .25s ease, box-shadow .25s ease;
}

/* Cards levantam e a sombra dura acompanha, reforçando o deslocamento */
.elementor .nb-card-lift:hover{
  transform:translateY(-6px);
  box-shadow:10px 10px 0 0 var(--nb-navy);
}

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [role="button"]:focus-visible{
  outline:3px solid var(--nb-electric);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .elementor .nb-float img{ animation:none; }
  .elementor *,
  .elementor *::before,
  .elementor *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}