:root {
    /* 🎨 Cores principais */
    --primary: #F8F7FF;
    --secondary: #a69682;
    --dark: #241715;
    --light: #ffffff;
    --gray: #c7c7c7;
    --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

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

body {
    background-color: var(--primary);
    color: var(--dark);
    font-family: "Poppins", sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

}

.subtitle {
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.title-h3 {
    font-size: 1.1rem;
}

/* HEADER */
.header {
    width: 100%;
    background-color: var(--primary);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
    padding: 0.5rem 1.4rem;
}

.header-content {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    width: 150px;
    height: auto;
}

.menu-toggle {
    display: none;
}

.navlist ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.navlist a {
    color: var(--dark);
    font-weight: 500;
    text-transform: capitalize;
    cursor: pointer;
    font-size: 1rem;
}

.navlist a:hover {
    transition: 0.2s;
    font-size: 1.2rem;
}

/* HERO */

.hero-section {
    padding: 5rem 0;
    background-color: var(--primary);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: center;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-hero img {
    height: 100%;
    width: 550px;
    border-radius: 20px;
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-top: 1.5rem;
}

.hero-subtitle-mobile {
    display: none;
}

.btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    background-color: #20ba59;
    color: var(--light);
    padding: 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    width: 230px;
    gap: 0.6rem;
}

.btn-cta:hover {
    background-color: #27dd6a;;
    transform: translateY(-2px);
    box-shadow: var(--shadow) scale (1.2);

}

.btn-cta a {
    color: var(--light);
}

/* VALOR */

.valor {
    background-color: var(--primary);
}

.valor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.valor-card {
    justify-content: center;
    text-align: center;
    margin-top: 0.4rem;
}

.card-title {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.valor-card img {
    margin-bottom: 1rem;
}

/* SESSAO PRODUTOS */

.products .title-h2 {
    padding: 3rem 0;
    margin-top: 4rem;
    text-align: center;
    text-transform: capitalize;
}

.subtitle-card-hero {
    text-align: center;
    margin-bottom: 1rem;

}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3rem;
    gap: 3rem;
}

.products-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    text-align: center;
    border-radius: 35px;
    box-shadow: var(--shadow);
    padding: 2rem;
}

.products-card .btn {
    margin-top: auto;
    justify-self: center;
}

.img-products-card img {
    width: 250px;
    height: 100%;
    border-radius: 20px;
}

.btn.btn-whatsapp {
    background-color: #20ba59;
    color: var(--light);
    padding: 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    width: 230px;
    gap: 0.6rem;
    margin-top: 3rem;
    justify-content: center;
}

/**** SOBRE NOS *****/

.sobre-nos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 4rem;
    gap: 4rem;
}

.sobre-nos h2 {
    text-align: center;
    margin-top: 7rem;
}

.sobre-nos-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;

}

.sobre-nos p {
    margin-top: 2rem;
    font-size: 1rem;
}

.sobre-nos h3 {
    font-size: 1.4rem;
}

.sobre-nos-img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #eee;
}
.sobre-nos-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/** CONTATO **/

.contato {
    display: flex;
    padding: 5rem;
    text-align: center;
    margin-top: 5rem;
    align-items: center;
    justify-content: center;
}

.btn-cta.btn {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    margin-top: 1.5rem;
}

.footer {
  background-color: #111;
  color: #fff;
  padding-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand {
    text-align: center;
    padding: 0 7rem;
}

.footer-brand img {
  max-width: 210px;
  margin: 0 auto;
  text-align: center;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #ccc;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact a {
  display: inline-block;
  margin-top: 1rem;
  color: #25d366;
  text-decoration: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: #aaa;
}

/* 📱 Mobile */
@media (max-width: 768px) {

  /* HEADER */
  .header {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .logo img {
    max-width: 260px;
    width: 100%;
  }

  .menu-toggle {
    display: flex;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  .navlist {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--primary);
    box-shadow: var(--shadow);
    z-index: 2000;
  }

  .navlist ul {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    gap: 1.2rem;
  }

  .navlist.active {
    display: block;
  }

  /* HERO */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "subtitle"
      "image"
      "btn";
    padding: 0 2rem;
  }

  .hero-content {
    display: contents;
  }

  .hero-title {
    grid-area: title;
  }

  .hero-subtitle-desktop {
    display: none;
  }

  .hero-subtitle-mobile {
    display: block;
    grid-area: subtitle;
  }

  .img-hero {
    grid-area: image;
    justify-self: center;
  }

  .img-hero img {
    max-width: 320px;
    width: 100%;
    height: auto;
  }

  .btn-cta {
    grid-area: btn;
    justify-self: center;
  }

  /* VALOR */
  .valor-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }

  /* PRODUTOS */
  .products {
    padding: 0 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* SOBRE */
  .sobre-nos-grid {
    grid-template-columns: 1fr;
    padding: 0 2rem;
  }

  .sobre-nos-img {
    margin: 0 auto;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* 📱 Tablets e mobiles grandes */
@media (min-width: 769px) and (max-width: 1024px) {

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .logo img {
    max-width: 100px;
  }

  .img-hero img {
    max-width: 620px;
    width: 100%;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .products-card {
    padding: 1.5rem;
    border-radius: 28px;
  }

  .img-products-card img {
    width: 200px;
    height: auto;
  }

  .btn.btn-whatsapp {
    width: 100%;
    max-width: 260px;
  }

  .valor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sobre-nos-grid {
    grid-template-columns: 1fr;
  }
}
/* 📱 Mobile pequeno (até 480px) */
@media (max-width: 480px) {

  /* CONTAINER */
  .container {
    padding: 0 1rem;
  }

  /* HEADER */
  .logo img {
    max-width: 160px;
  }

  .menu-toggle {
    font-size: 1.8rem;
  }

  /* HERO */
  .hero-section {
    padding: 2rem 0.5rem;
  }

  .hero-title {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-top: -1rem;
  }

  .img-hero img {
    max-width: 400px;
  }

  .btn-cta {
    width: 100%;
    max-width: 100%;
    padding: 1.2rem;
    font-size: 0.95rem;
  }

  /* VALOR */
  .valor-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  /* PRODUTOS */

  .products {
    padding: 0.3rem;
  }

  .title-h2 {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  .subtitle-card-hero {
    margin-top: -0.6rem;
    
  }
  .products-grid {
    gap: 2rem;
    padding: 0;
  }

  .products-card {
    padding: 1.3rem;
    border-radius: 22px;
  }

  .products-card h3 {
    font-size: 1.05rem;
  }

  .img-products-card img {
    width: 300px;
  }

  .btn.btn-whatsapp {
    width: 100%;
    max-width: 100%;
    font-size: 0.95rem;
    padding: 0.9rem;
  }

  /* SOBRE */

  .sobre-nos {
    padding: 0;
  }

  .sobre-nos h2 {
    margin-top: 4rem;
  }

  .sobre-nos h3 {
    font-size: 1rem;
    margin-top: -1.5rem;
  }

  .sobre-nos p {
    font-size: 0.8rem;
    text-align: justify;
  }

  .sobre-nos-img {
    width: 260px;
    height: 260px;
  }
  /** CTA FINAL **/ 

  .contato {
    padding: 0.5rem;
    margin-bottom: 5rem;
  }
   
  .section-title-ctafinal {
    margin-bottom: 2rem;
    font-size: 1rem;
  }

  .section-subtitle-ctafinal {
    font-size: 0.7rem;
  }
  /* FOOTER */
  .footer-brand {
    padding: 0 1rem;
  }

  .footer-brand img {
    max-width: 180px;
  }

  .footer-bottom {
    font-size: 0.8rem;
  }
}