/* =========================================================
   RESET GLOBAL
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

/* =========================================================
   THEME SYSTEM
========================================================= */

:root{

  /* BACKGROUNDS */
  --bg:#0f0f0f;
  --bg-secondary:#171717;
  --bg-card:#1d1d1d;
  --bg-soft:#232323;

  /* TEXT */
  --text:#ffffff;
  --text-soft:#b8b8b8;

  /* BRAND */
  --primary:#2182ae;
  --primary-hover:#2fa9ce;

  /* UI */
  --border:rgba(255,255,255,0.08);

  --shadow:
  0 10px 30px rgba(0,0,0,0.28);

  --overlay:
  linear-gradient(
    to top,
    rgba(0,0,0,0.78),
    rgba(0,0,0,0.30)
  );

  --header-bg:
  rgba(15,15,15,0.82);

}

/* =========================================================
   LIGHT MODE
========================================================= */

html.light-mode{

  --bg:#f4f6f8;
  --bg-secondary:#ffffff;
  --bg-card:#ffffff;
  --bg-soft:#eeeeee;

  --text:#111111;
  --text-soft:#5d5d5d;

  --primary:#2182ae;
  --primary-hover:#1c95bc;

  --border:rgba(0,0,0,0.08);

  --shadow:
  0 10px 30px rgba(0,0,0,0.08);

  --overlay:
  linear-gradient(
    to top,
    rgba(0,0,0,0.42),
    rgba(0,0,0,0.12)
  );

  --header-bg:
  rgba(255,255,255,0.88);

}

/* =========================================================
   BODY
========================================================= */

body{

  font-family:'Montserrat',sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.6;

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;

  transition:
  background .35s ease,
  color .35s ease;

}

/* =========================================================
   GLOBAL TRANSITIONS
========================================================= */

header,
section,
footer,
div,
input,
textarea,
button,
a,
span{

  transition:
  background-color .3s ease,
  color .3s ease,
  border-color .3s ease,
  box-shadow .3s ease,
  transform .3s ease;

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:20px;
}

/* =========================================================
   LINKS
========================================================= */

a{
  text-decoration:none;
  color:inherit;
}

/* =========================================================
   IMAGES
========================================================= */

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

/* =========================================================
   CONTAINER
========================================================= */

.container{

  width:90%;
  max-width:1300px;

  margin:auto;

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

}

/* =========================================================
   LOADER
========================================================= */

#loader{

  position:fixed;
  inset:0;

  background:var(--bg);

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

  z-index:99999;

}

#loader span{

  font-size:2rem;
  font-weight:800;
  letter-spacing:6px;

  color:var(--primary);

}

#loader.hide{

  opacity:0;
  visibility:hidden;

}

/* =========================================================
   HEADER
========================================================= */

header.sticky-header{

  position:sticky;
  top:0;

  z-index:9999;

  background:var(--header-bg);

  backdrop-filter:blur(16px);

  border-bottom:1px solid var(--border);

  padding:1rem 0;

}

header.sticky-header.scrolled{

  box-shadow:var(--shadow);

}

/* =========================================================
   LOGO
========================================================= */

.logo img{

  height:58px;

  object-fit:contain;

}

.logo img:hover{

  transform:scale(1.03);

}

/* =========================================================
   MENU
========================================================= */

nav{
  margin-left:auto;
  position:relative;
}

.menu{

  display:flex;
  align-items:center;

  gap:8px;

  list-style:none;

}

.menu li a{

  position:relative;

  padding:12px 16px;

  font-size:.92rem;
  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  color:var(--text);

}

.menu li a::after{

  content:"";

  position:absolute;

  bottom:4px;
  left:50%;

  width:0%;
  height:2px;

  background:var(--primary);

  transform:translateX(-50%);

  transition:.3s ease;

}

.menu li a:hover{

  color:var(--primary);

}

.menu li a:hover::after{

  width:70%;

}

/* =========================================================
   CART COUNTER
========================================================= */

.cart-counter{

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

  min-width:22px;
  height:22px;

  padding:0 6px;

  margin-left:6px;

  border-radius:999px;

  background:#ff3b3f;

  color:#fff;

  font-size:.72rem;
  font-weight:700;

}

/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle{

  width:48px;
  height:48px;

  margin-left:15px;

  border:none;
  border-radius:14px;

  background:var(--bg-card);

  color:var(--text);

  border:1px solid var(--border);

  cursor:pointer;

  font-size:1rem;

}

.theme-toggle:hover{

  background:var(--primary);

  color:#fff;

  transform:translateY(-2px);

}

/* =========================================================
   MENU MOBILE
========================================================= */

.menu-icon{

  display:none;

  background:none;
  border:none;

  color:var(--text);

  font-size:1.8rem;

  cursor:pointer;

}

/* =========================================================
   HERO
========================================================= */

.hero{

  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;

}

.slider{

  width:100%;
  height:100%;

  position:relative;

}

.slide{

  position:absolute;
  inset:0;

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

  background-size:cover;
  background-position:center;

  opacity:0;
  visibility:hidden;

  transform:scale(1.03);

}

.slide.active{

  opacity:1;
  visibility:visible;

  z-index:2;

  transform:scale(1);

}

.overlay{

  position:absolute;
  inset:0;

  background:var(--overlay);

}

/* =========================================================
   CAPTION
========================================================= */

.caption{

  position:relative;
  z-index:5;

  max-width:850px;

  text-align:center;

  padding:20px;

  animation:fadeUp 1s ease;

}

.tag{

  display:inline-block;

  margin-bottom:18px;

  padding:8px 18px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,0.14);

  background:rgba(255,255,255,0.06);

  backdrop-filter:blur(10px);

  font-size:.85rem;
  font-weight:700;

  letter-spacing:2px;

}

.caption h1,
.caption h2{

  font-size:5rem;

  font-weight:800;

  line-height:1;

  margin-bottom:20px;

  text-transform:uppercase;

  color:#fff;

  text-shadow:
  0 10px 25px rgba(0,0,0,0.35);

}

.caption p{

  max-width:700px;

  margin:auto auto 30px;

  font-size:1.15rem;

  color:#e5e5e5;

}

/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons{

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

  gap:15px;

  flex-wrap:wrap;

}

.botao,
.botao-comprar,
.botao-finalizar{

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

  padding:15px 30px;

  border:none;
  border-radius:14px;

  background:var(--primary);

  color:#fff;

  font-weight:700;

  cursor:pointer;

  box-shadow:
  0 10px 20px rgba(33,130,174,0.25);

}

.botao:hover,
.botao-comprar:hover,
.botao-finalizar:hover{

  background:var(--primary-hover);

  transform:translateY(-3px);

}

.botao-secundario{

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

  padding:15px 30px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,0.16);

  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  color:#fff;

  font-weight:600;

}

.botao-secundario:hover{

  background:#fff;

  color:#111;

}

/* =========================================================
   SECTION TITLE
========================================================= */

.section-title{

  text-align:center;

  margin-bottom:60px;

}

.section-title span{

  color:var(--primary);

  letter-spacing:3px;

  font-size:.88rem;
  font-weight:700;

}

.section-title h2{

  font-size:3rem;

}

/* =========================================================
   FEATURED
========================================================= */

.featured{

  padding:120px 8%;

}

.featured-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:30px;

}

.featured-card{

  position:relative;

  overflow:hidden;

  border-radius:24px;

  background:var(--bg-secondary);

  border:1px solid var(--border);

  box-shadow:var(--shadow);

  opacity:0;

  transform:translateY(40px);

}

.featured-card.show-element{

  opacity:1;

  transform:translateY(0);

}

.featured-card:hover{

  transform:translateY(-10px);

}

.featured-card img{

  width:100%;
  height:420px;

  object-fit:cover;

}

.featured-card:hover img{

  transform:scale(1.05);

}

.featured-info{

  padding:24px;

}

.featured-info h3{

  font-size:1.5rem;

  margin-bottom:10px;

}

.featured-info p{

  color:var(--text-soft);

  margin-bottom:18px;

}

.featured-info a{

  color:var(--primary);

  font-weight:700;

}

/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter{

  padding:120px 8%;

}

.newsletter-content{

  max-width:900px;

  margin:auto;

  text-align:center;

  background:var(--bg-secondary);

  border:1px solid var(--border);

  border-radius:30px;

  padding:70px 40px;

  box-shadow:var(--shadow);

}

.newsletter-content span{

  color:var(--primary);

  letter-spacing:3px;

  font-weight:700;

}

.newsletter-content h2{

  font-size:2.8rem;

  margin:20px 0 35px;

}

.newsletter-form{

  display:flex;

  gap:15px;

  max-width:650px;

  margin:auto;

}

/* =========================================================
   FORMS
========================================================= */

input,
textarea,
select{

  width:100%;

  padding:16px;

  border-radius:14px;

  border:1px solid var(--border);

  background:var(--bg-card);

  color:var(--text);

  font-size:1rem;

  outline:none;

}

input:focus,
textarea:focus,
select:focus{

  border-color:var(--primary);

  box-shadow:
  0 0 0 4px rgba(33,130,174,0.15);

}

/* =========================================================
   CHAT
========================================================= */

#chat-toggle{

  position:fixed;

  bottom:25px;
  right:25px;

  width:65px;
  height:65px;

  border:none;
  border-radius:50%;

  background:var(--primary);

  color:#fff;

  font-size:1.3rem;

  cursor:pointer;

  z-index:9999;

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

}

#chat-toggle:hover{

  transform:scale(1.08);

}

#chat-box{

  position:fixed;

  bottom:100px;
  right:25px;

  width:340px;
  height:480px;

  background:var(--bg-secondary);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  opacity:0;
  visibility:hidden;

  transform:translateY(20px);

  z-index:9999;

  box-shadow:var(--shadow);

}

#chat-box.show-chat{

  opacity:1;
  visibility:visible;

  transform:translateY(0);

}

.chat-header{

  padding:18px;

  background:var(--primary);

  color:#fff;

  font-weight:700;

}

.chat-body{

  flex:1;

  padding:18px;

  overflow-y:auto;

}

.bot-message,
.user-message{

  padding:12px 16px;

  border-radius:14px;

  margin-bottom:12px;

  max-width:85%;

}

.bot-message{

  background:var(--bg-soft);

}

.user-message{

  background:var(--primary);

  color:#fff;

  margin-left:auto;

}

.chat-footer{

  display:flex;

  gap:10px;

  padding:15px;

  border-top:1px solid var(--border);

}

.chat-footer button{

  width:55px;

  border:none;

  border-radius:12px;

  background:var(--primary);

  color:#fff;

  cursor:pointer;

}

/* =========================================================
   FOOTER
========================================================= */

footer{

  padding:50px 20px;

  background:var(--bg-secondary);

  border-top:1px solid var(--border);

  text-align:center;

  color:var(--text-soft);

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp{

  from{

    opacity:0;

    transform:translateY(40px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){

  .caption h1,
  .caption h2{

    font-size:4rem;

  }

}

@media(max-width:768px){

  .menu-icon{
    display:block;
  }

  nav .menu{

    position:absolute;

    top:75px;
    right:0;

    width:250px;

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

    border-radius:20px;

    background:var(--bg-secondary);

    border:1px solid var(--border);

    display:none;

  }

  nav .menu.show{
    display:flex;
  }

  .hero{
    height:85vh;
  }

  .caption h1,
  .caption h2{
    font-size:2.9rem;
  }

  .caption p{
    font-size:1rem;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .newsletter-form{
    flex-direction:column;
  }

  #chat-box{

    width:92%;

    right:4%;

    bottom:90px;

  }

}

@media(max-width:480px){

  .caption h1,
  .caption h2{

    font-size:2.2rem;

  }

  .section-title h2{

    font-size:2.2rem;

  }

  .newsletter-content h2{

    font-size:2rem;

  }

}