@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{
  --primaria:#6A0053;
  --secundaria:#6A0053;
  --terciaria:#252525;
  --dourado:#D3AF37;
}

html{
  scroll-behavior:smooth;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins,sans-serif;
}

body{
  background:#f3f3f3;
  overflow-x:hidden;
}

/* HERO */

.hero{
  z-index: 1;
  margin:10px;
  position:relative;
  width:calc(100% - 20px);
  min-height:calc(100svh - 20px);
  border-radius:28px;
  overflow:visible;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  background:#f5f5f5;
}

.hero-carousel{
  position:relative;
  z-index:2;
  width:100%;
  height:50svh;
  min-height:360px;
  border-radius:28px;
  flex:0 0 auto;
  overflow:hidden;
  background-image:url("/img/lp/carrosel/1.png");
  background-size:cover;
  background-position:center;
  transition:background-image .8s ease-in-out;
}

.hero-carousel{
  isolation:isolate;
}

.hero-slide-image{
  display:none;
}

/* CAMADA DE ANIMAÇÃO */

.hero-carousel::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  backdrop-filter:blur(18px);

  background:rgba(255,255,255,.02);

  opacity:1;

  animation:heroBlurIn 1.4s ease forwards;

  pointer-events:none;
}

@keyframes heroBlurIn{
  from{
    opacity:1;
    backdrop-filter:blur(22px);
  }

  to{
    opacity:0;
    backdrop-filter:blur(0);
  }
}

.overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.55)
  );

  z-index:1;
}

/* NAVBAR */
.menu{

  width: 26px;
  height: 26px;
  object-fit: contain;
}
nav.menu-open{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.navbar {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;

  width: 320px;
  height: 55px;
  padding: 0 8px;
  opacity: 0.95;
  background: white;
  border-radius: 60px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  overflow: visible;
}

.index-navbar{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%, -12px);
}

.index-navbar.active{
  opacity:.95;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

/* LOGO — escondida no início */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, max-width 0.4s ease;
  align-items: center;
  text-align: center;
}

.logo a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* LOGO */

.logo img {
  width: 120px;
  display:block;
 
  object-fit: contain;
}


/* ESCONDIDOS NO INÍCIO */

/* BTN-DIV — escondido no início */
/* ESCONDIDO */

.navbar .btn-div {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-width: 0;
  overflow: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    max-width 0.4s ease;
}

/* APARECE QUANDO NAVBAR EXPANDE */

.navbar.active .btn-div {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-width: 300px;
  overflow: visible;
}

.navbar.active {
  width: 90%;
  justify-content: space-between;
  padding: 0 12px 0 20px;
  gap: 12px;
  transform: translateX(-50%);
    transition: all 0.5s ease;

    
}

.index-navbar.active{
  transform:translateX(-50%);
}

/* MOSTRAR CONTEÚDO AO EXPANDIR */

.navbar.active .logo {
  opacity: 1;
  visibility: visible;
  width: 120px;
  max-width: 120px;
}

/* NAV */

/* NAV CENTRALIZADO NO INÍCIO */

nav {
  display: flex;
  gap: 1px;
  align-items: center;
  transition: gap 0.4s ease;
}

.navbar.active .btn-div {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-width: 300px;
}


.navbar.active .btn-div {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

nav a {
  text-decoration: none;
  color: var(--terciaria);
  
  padding: 10px 18px;
  border-radius: 30px;
  transition: color 0.3s ease, opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  opacity: 1;
  transform: translateY(0);
   transition:
    color .3s ease,
    transform .3s ease;
}

nav a:hover {
  font-weight: 600;
  color: var(--primaria);  transform:translateY(-1px);
}

/* BOTÕES NAVBAR */
.btn-div a,
.btn-div a:hover,
.btn-div a:focus,
.btn-div a:visited
.buttons a{
  text-decoration:none;
}
.btn-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

/* BOTÃO INSTAGRAM */

.nav-btn {
  position: relative;

  width: 45px;
  height: 45px;
text-decoration: none;
  border: none;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  cursor: pointer;

  background: var(--primaria);

  transition: all 0.4s ease;

  padding: 0 16px;
}

/* EXPANSÃO DO BOTÃO */

.nav-btn:hover {
  width: 185px;
  justify-content: flex-start;
  gap: 10px;
}

/* ÍCONES */

.svgs-icon {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* TEXTO DO BOTÃO */

.nav-btn .btn-text {
  display: flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;

  color: white;
  font-size: 15px;
  font-weight: 600;

  max-width: 0;
  opacity: 0;
  overflow: hidden;

  transform: translateX(10px);

  transition:
    opacity 0.3s ease,
    transform 0.4s ease,
    max-width 0.4s ease;
}

/* MOSTRA TEXTO */

.nav-btn:hover .btn-text {
  max-width: 140px;
  opacity: 1;
  transform: translateX(0);
}

/* SETA */

.btn-text .svgs-icon {
  width: 18px;
  height: 18px;
}




/* MENU MOBILE */

.menu-toggle{
  display:none;

  color:white;

  border:none;
  filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(3344%) hue-rotate(319deg) brightness(92%) contrast(94%);

  width:48px;
  height:48px;

  border-radius:50%;

  font-size:28px;

  cursor:pointer;

  z-index:3100;
}

/* HERO CONTENT */

.hero-content{
  position:absolute;

  z-index:5;

  left:50%;
  bottom:110px;

  transform:translateX(-50%);

  width:100%;
  max-width:900px;

  padding:0 20px;

  color:white;
  text-align:center;

  animation:fade .6s ease;
}

.hero-content h1{
  font-size:clamp(42px,6vw,76px);

  line-height:1;

  font-weight:700;

  margin-bottom:28px;
}

.hero-content p{
  font-size:18px;
  line-height:1.6;

  max-width:660px;

  margin:0 auto 35px;

  font-weight:500;
}

/* BOTÕES HERO */

.buttons{
  text-decoration: none;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.buttons a{

text-decoration: none;}

.primary-btn,
.secondary-btn{
  height:64px;

  border-radius:40px;

  padding:0 30px;

  font-size:16px;
font-weight: 500;

  cursor:pointer;
}

.primary-btn{
  border:none;

  background:  var(--primaria);

  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  padding:0 42px;

  transition:.4s ease;

 
}

.primary-btn:hover{
  transform:translateY(-4px);
background-color: var(--secundaria);
}

.secondary-btn{
  border:1px solid rgba(255,255,255,.7);

  background:rgba(255,255,255,.08);

  color:white;

  backdrop-filter:blur(6px);
}

/* DOTS */

.dots{
  position:absolute;

  z-index:10;

  bottom:35px;
  left:50%;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:10px;
}

.dot{
  width:10px;
  height:10px;

  border-radius:50%;

  border:none;

  background:rgba(255,255,255,.4);

  cursor:pointer;

  transition:.3s ease;
}

.active-dot{
  width:28px;

  border-radius:20px;

  background:white ;
}

/* SECTION 2 */

.section-2{
  width:100%;
  padding:50px 5%;
  
  

}

.section-title{
  text-align:center;
  margin-bottom:0;
  width:100%;
}

.hero-title-area{
  position:relative;
  z-index:1;
  flex:1;
  min-height:calc(50svh - 20px);
  padding:clamp(32px, 6vh, 64px) 5%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.spanH3{
font-size:clamp(38px, 4vw, 52px);
font-weight:bold;
color: var(--dourado);

}
.section-title span{
  color:var(--primaria);

  font-weight:600;

  letter-spacing:3px;

  font-size:14px;
}

.section-title h2{
  font-size:clamp(38px, 4vw, 52px);

  margin:0px 0;

  color:#111;



  margin-inline:auto;

  line-height:1.1;
}

.section-title p{
  color:#666;

  max-width:700px;

  margin:auto;

  font-size:18px;

  line-height:1.7;
}

/* CARDS */

.cards{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

/* CARD */

.card{

 
}

/* ÁREA DA IMAGEM */

.card-image{
  position:relative;

  overflow:hidden;
 border:var(--dourado)  solid 2px;
  border-radius:28px;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.589));
}

/* IMAGEM */

.card img:not(.ImgCard){
  width:100%;
  height:360px;

  object-fit:cover;

  border-radius:28px;

  transition:.5s ease;
}

.ImgCard{
  width: 70%;
  max-width: 240px;

  height: 45vh;

  object-fit: contain;

  display: block;
  margin: 0 auto;
}

/* OVERLAY COM BLUR */

.card-overlay{
  position:absolute;
  inset:0;

  background:rgba(204, 204, 204, 0.322);

  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;

  transition:.4s ease;
}

.card-btn{
  border:none;

  padding:16px 34px;

  border-radius:999px;
  cursor:pointer;
  background:  var(--secundaria);

  color:white;

  font-size:15px;
  font-weight:700;

  cursor:pointer;

  transform:translateY(20px);


  transition: all 0.3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card-btn:hover{
  transform:scale(1.05);
  background-color: var(--dourado) ;

}

/* HOVER */

.card:hover .card-overlay{
  opacity:1;
}

.card:hover .card-btn{
  transform:translateY(0);
}

.card:hover img{
  transform:scale(1.08);
}

/* TEXTO */

.card-content{
  margin-top:10px;
}

.card-content span{
  font-size:12px;

  letter-spacing:3px;

  color:var(--dourado) ;
}

.card-content h3{
 

  font-size:25px;

  line-height:1.1;

  color:var(--terciaria);
}


/* DROPDOWN */

.dropdown {
  position: absolute;
  top: 55px;
  right: 0;

  min-width: 120px;
  background: white;

  border-radius: 12px;
  padding: 8px;

  box-shadow: 0 8px 25px rgba(0,0,0,.15);
  z-index: 1200;
}

.sair{
  width:100%;

  border:none;
  outline:none;

  padding:12px 14px;

  border-radius:12px;

  background:var(--primaria);

  color:white;

  font-family:Poppins, sans-serif;
  font-size:14px;
  font-weight:600;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  transition:.3s ease;
}

/* HOVER */

.sair:hover{
  transform:translateY(-2px);

  background:var(--terciaria);

  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* CLICK */

.sair:active{
  transform:scale(.98);
}

.hidden {
  display: none !important;
}

.icon {
  position: relative;
  cursor: pointer;
  z-index: 1100;

  width: 45px;
  height: 45px;

  border-radius: 50%;
  background: var(--primaria);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
}

/* ANIMAÇÃO */

@keyframes fade{
  from{
    opacity:0;
    transform:translate(-50%,20px);
  }

  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

/* ANIMAÇÃO */
.blur-in{
  opacity:0;

  filter:blur(14px);

  transform:translateY(50px) scale(.98);

  transition:
    opacity 1s ease,
    filter 1s ease,
    transform 1s ease;
}

.blur-in.show{
  opacity:1;

  filter:blur(0);

  transform:translateY(0) scale(1);
}

/* Footer */

/* FOOTER */

.footer{
  width:100%;

  border-top: 2px solid #e4e4e4;
  padding:30px 20px;

  background:#f5f5f5;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.footer p{
  font-family:Poppins,sans-serif;

  font-size:18px;
  font-weight:400;

  color:#7b8794;

  line-height:1.6;
}

.footer span{
  color: var(--dourado);

  font-weight:700;
}

/* WHATSAPP FLOAT */

.whatsapp-float{
  position:fixed;

  right:25px;
  bottom:25px;

  width:65px;
  height:65px;

  border-radius:50%;

  background:var(--terciaria);

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 10px 30px rgba(0,0,0,.2);

  z-index:900;

  transition:.3s ease;
}

.whatsapp-float:hover{
  transform:translateY(-5px) scale(1.05);
  background-color: #00d26a;
}

.whatsapp-float img{
  width:45px;
  height:45px;


  filter:brightness(0) invert(1);
}

/* Desktop padrão */
/* ESCONDE MOBILE NO DESKTOP */
.mobile-only{

  width:90%;

  border:none;
  outline:none;

  padding:12px 14px;

  border-radius:12px;

  background:var(--primaria);

  color:white;

  font-family:Poppins, sans-serif;
  font-size:14px;
  font-weight:600;

  cursor:pointer;

  align-items:center;
  justify-content:center;
  gap:8px;

  transition:.3s ease;
opacity: 1;
  display:none;
}


.desktop-only{
  display:flex;
}

/* TABLET */
@media(max-width:900px){
  .hero{
    min-height:calc(100svh - 20px);
    border-radius:24px;
  }

  .hero-carousel{
    height:54svh;
    min-height:420px;
    border-radius:24px;
    background-position:center;
  }

  .hero-content{
    bottom:120px;
  }

  .hero-title-area{
    min-height:calc(46svh - 20px);
    padding:36px 7%;
  }
  .cards{
    grid-template-columns:1fr;
  }

  .section-title h2{
    font-size:34px;
  }

  .spanH3{
    font-size:34px;
  }

 

  .card img{
    height:260px;
  }

  .card-content h3{
    font-size:26px;
  }


}

/* MOBILE */
@media(max-width:767px){
  .hero{
    margin:8px;
    width:calc(100% - 16px);
    min-height:calc(100svh - 16px);
    border-radius:20px;
  }

  .hero-carousel{
    height:58svh;
    min-height:360px;
    border-radius:24px;
    background-image:none !important;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#f5f5f5;
  }

  .hero-slide-image{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin:auto;
    object-fit:contain;
    border-radius:24px;
  }

  .mobile-only{
    display:flex;
  }

  .desktop-only{
    display:none !important;
  }

  .hero-title-area{
    min-height:auto;
    padding:28px 18px 34px;
    display:flex;
  }

  .footer{
    padding:24px 16px 30px;
  }

  .footer p{
    font-size:14px;
  }

  .whatsapp-float{
    width:58px;
    height:58px;

    right:18px;
    bottom:18px;
  }

  .whatsapp-float img{
    width:28px;
    height:28px;
  }

  .navbar{
    overflow: visible;
    top: 40px;
 
  }

  .navbar{
    width:90%;
    justify-content:space-between;
    padding:0 12px 0 20px;
  }

  .logo{
    opacity:1;
    visibility:visible;
    width:120px;
    max-width:120px;
  }

  .navbar .btn-div{
    display:none;
  }

  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    background:none;
  }

  /* MENU MOBILE */

  nav{
    position:absolute;

    top:70px;
    left:0;

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;

    background:white;

    padding:30px 0;

    border-radius:25px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(-15px);

    transition:
      opacity .3s ease,
      transform .3s ease,
      visibility .3s ease;

    z-index:1050;
  }

  /* MENU ABERTO */

  nav.menu-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
  }

  .hero-content{
    bottom:80px;
  
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:16px;
  }

  .primary-btn{
    width:100%;
  }

  .section-title h2{
    font-size:30px;
    line-height:1.08;
  }

  .spanH3{
    font-size:30px;
  }

  .section-title span{
    display:block;
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:12px;
  }

  .dots{
    bottom:22px;
  }

  .dot{
    width:9px;
    height:9px;
  }

  .active-dot{
    width:24px;
  }




}