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

        li {
           list-style-type: none;
        }

        a {
           text-decoration: none;
           color: #fff;
        }

        h1,h2,h3,h4,h5,h6,p,a {
           font-family: 'Poppins', sans-serif;
        }
        h1,h2,h3,h4,h5,h6 {
           color: var(--primar-clr);
        }

        p {
           color: var(--primar-clr-light);
        }

        body {
           background-color: var(--dark-clr);
           overflow-x: hidden;
        }

        .logo {
           font-size: 1.5rem;
           text-transform: uppercase;
           font-weight: bold;
           font-style: oblique;
           color: #fff;
        }

        /* Variáveis */
        :root{
           /* padding */
           --p-xm: 4px;
           --p-sm: 10px 14px;
           --p-md: 12px 16px;
           --p-lg: 16px 24px;
           --container-pad: 60px 40px;
           --section-heading-pad: 44px 40px;

           /* margin */
           --m-xm: 4px 0;
           --m-sm: 8px 0;
           --m-md: 12px 0;
           --m-t-b: 10px 0;
           --m-t-b-md: 20px 0;

           /* color */
           --primar-clr: #fff;
           --primar-clr-light: #dedede;
           --first-gra-clr: #c32bfb;
           --second-gra-clr: #f818d2;
           --dark-clr: #12011b;
           --light-bg: #ffffff19;

           /* gradient clr */
           --gra-white : linear-gradient(45deg, #fff, #dedede);
           --gra-primary:linear-gradient(45deg, #c32bfb, #f818d2);

           /* font-size */
           --font-sm: .8rem;
           --font-nr: 1rem;
           --font-md: 1.2rem;

           /* border radius */
           --border-radius-full: 50%;
           --section-rad: 12px;
           --btn-radius: 4px;
           --card-rad: 8px;

           /* transition */
           --transition-one: all .25s ease;
           --transition-two: all .50s linear;
        }

        /* Classes Universais Personalizadas */
        .container {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           position: relative;
           padding: var(--container-pad);
           width: 100%;
        }

        .wrapper {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 30px;
           position: relative;
           max-width: 1280px;
           width: 100%;
        }

        .col {
           flex: 1;
           display: flex;
           justify-content: center;
           flex-direction: column;
           position: relative;
        }

        figure {
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
        }

        figure img {
           width: 100%;
           object-fit: cover;
        }

        .section-heading {
           display: flex;
           justify-content: space-between;
           align-items: center;
           max-width: 1280px;
           width: 100%;
           padding: var(--section-heading-pad);
           z-index: 100;
        }

        .section-heading .sub-heading {
           color: var(--primar-clr);
        }

        .heading-one {
           font-size: 3.5rem;
           color: var(--primar-clr);
           line-height: 1.1;
        }

        .heading-two {
           font-size: 2.5rem;
        }

        .heading-three {
           font-size: 1.4rem;
        }

        .heading-one span,
        .heading-two span {
           color: var(--first-gra-clr);
        }

        .btn {
           border: none;
           outline: none;
           background-image: var(--gra-primary);
           color: var(--primar-clr);
           border-radius: var(--btn-radius);
           padding: var(--p-sm);
           font-weight: 500;
           letter-spacing: 1px;
           transition: var(--transition-one);
           font-size: var(--font-nr);
           cursor: pointer;
           display: inline-block;
           text-align: center;
        }
        .btn:hover {
           background-image: var(--gra-white);
           color: var(--dark-clr);
        }

        .clr-one {
           width: 800px;
           height: 800px;
           position: absolute;
           top: -250px;
           left: -400px;
           background-color: var(--first-gra-clr);
           opacity: .4;
           filter: blur(200px);
           border-radius: var(--border-radius-full);
        }

        .clr-two {
           width: 400px;
           height: 400px;
           background-color: var(--second-gra-clr);
           position: absolute;
           left: 50%;
           border-radius: var(--border-radius-full);
           opacity: .4;
           filter: blur(200px);
        }

        /* Seção do Cabeçalho */
        header {
           width: 100%;
           z-index: 1000;
           display: flex;
           justify-content: center;
           align-items: center;
           position: relative;
           padding: 15px 20px;
           position: fixed;
           top: 0;
           left: 0;
           background-color: var(--light-bg);
           backdrop-filter: blur(10px);
        }

        header .nav {
           max-width: 1280px;
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-items: center;
           position: relative;
        }

        header .nav .logo {
           font-size: 1.5rem;
           font-weight: bold;
           color: #fff;
           z-index: 1001;
        }

        .nav nav {
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 20px;
           width: 100%;
        }

        .nav nav ul {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 30px;
           width: 100%;
        }

        .nav .nav-icon {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 20px;
        }

        .fa-solid {
           color: var(--primar-clr);
           transition: var(--transition-one);
           cursor: pointer;
           font-size: 1.2rem;
        }
        .fa-solid:hover {
           color: var(--first-gra-clr);
        }

        header .burger_icon {
           display: none;
           font-size: 1.5rem;
           cursor: pointer;
           z-index: 1001;
        }

        /* Seção Hero */
        .col-text {
           align-self: self-start;
           padding-top: 80px;
        }

        .col-img {
           flex: 1.8;
           position: relative;
        }

        .col-img .hero-img-off {
           width: 260px;
           height: auto;
           padding: 20px 10px;
           background-color: var(--light-bg);
           backdrop-filter: blur(10px);
           line-height: 1.6;
           border-radius: var(--card-rad);
           position: absolute;
           bottom: 160px;
           left: 400px;
        }

        .col-img .hero-img-off p {
           font-size: var(--font-sm);
           color: var(--primar-clr-light);
        }

        .col-img .hero-img-off h3 {
           color: var(--primar-clr);
           font-size: 1.1rem;
        }

        .hero button {
           margin: var(--m-t-b-md);
           width: 200px;
           height: 50px;
           border-radius: 30px;
           font-size: 1rem;
        }

        /* seção de novidades */
        .arrival .col {
           border-radius: var(--card-rad);
           padding: var(--p-sm);
           background-color: var(--light-bg);
        }

        .arrival .col figure {
           border-radius: var(--btn-radius);
           background-color: var(--light-bg);
           padding: 10px;
        }

        .col-body {
           padding: 1rem 0.5rem;
           width: 100%;
        }

        .col-body .rating-icon {
           font-size: var(--font-sm);
           margin-bottom: 5px;
        }

        .col-body .rating-icon .fa-star {
           color: #ffd700;
        }

        .col-body .sub-heading {
           font-size: var(--font-sm);
           color: var(--primar-clr-light);
           margin: 5px 0;
        }

        .col-body .col-footer {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin: var(--m-sm);
        }

        .col-body .col-footer button {
           width: 100px;
           height: 36px;
           font-size: var(--font-sm);
        }

        /* Seção Sobre Nós */
        .about .wrapper {
           z-index: 100;
        }

        .about .col-text .sub-heading {
           color: var(--first-gra-clr);
           font-weight: 600;
        }

        .about .col-text .about-text {
           font-size: 1rem;
           margin: var(--m-md);
           line-height: 1.6;
        }

        .about .col-text .btn {
           width: 140px;
           height: 45px;
           font-size: 1rem;
           margin: var(--m-t-b);
        }

        .get-off {
           width: 180px;
           padding: var(--p-sm);
           background-color: var(--light-bg);
           border-radius: var(--btn-radius);
           backdrop-filter: blur(10px);
           bottom: 230px;
           position: absolute;
           left: 40px;
           z-index: 10;
        }

        .get-off p {
           font-size: .8rem;
           line-height: 1.4;
        }

        .get-off h4 {
           font-size: 1rem;
           margin-bottom: 5px;
        }

        /* Nossa Melhor Coleção */
        .collection .grid-wrapper {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 25px;
           padding: 0 20px;
           max-width: 1280px;
           width: 100%;
        }

        .collection .collection-item {
           transition: var(--transition-one);
        }

        .collection .grid-wrapper .col {
           background-color: var(--light-bg);
           border: 2px solid rgba(220, 35, 186, 0.386);
           border-radius: var(--card-rad);
           padding: 15px;
        }

        .collection .btn-col.btn {
           color: var(--primar-clr);
           transition: var(--transition-one);
        }
        .collection .btn-col.btn:hover {
           background-color: var(--primar-clr);
           color: var(--dark-clr);
        }

        .collection .btn-col {
           margin-right: 8px;
           border: none;
           outline: none;
           border: 1px solid var(--first-gra-clr);
           background-color: transparent;
           color: var(--first-gra-clr);
           width: 120px;
           height: 44px;
           border-radius: var(--btn-radius);
           letter-spacing: 1px;
           cursor: pointer;
           transition: var(--transition-one);
           font-size: 0.9rem;
        }

        .collection .btn-section {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
        }

        .hide {
           display: none;
        }

        /* Depoimentos */
        .testimonial .sub-heading {
           color: var(--first-gra-clr);
           font-weight: bold;
        }

        .testimonial .wrapper {
           gap: 30px;
           align-items: stretch;
        }

        .testimonial figure {
           width: 80px;
           height: 80px;
           margin: 0 auto;
        }

        .testimonial .col {
           align-items: center;
           text-align: center;
           gap: 20px;
           padding: 2rem 1.5rem;
           border-radius: var(--btn-radius);
           background-color: var(--light-bg);
           backdrop-filter: blur(10px);
           z-index: 200;
        }

        .testimonial .col p {
           font-size: var(--font-sm);
           line-height: 1.6;
        }

        .testimonial .col h3 {
           color: var(--first-gra-clr);
           font-size: 1.2rem;
        }

        .testimonial .fa-star {
           color: #ffd700;
           margin: 0 2px;
        }

        .testimonial .wrapper figure img {
           width: 100%;
           height: 100%;
           border-radius: 50%;
           object-fit: cover;
        }

        /* Seção de Inscrição */
        .subscribe .wrapper {
           background-image: linear-gradient(45deg, #0202025c, #000000c3), url(/img/subs.jpg);
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           flex-direction: column;
           border-radius: var(--section-rad);
           padding: 80px 40px;
           text-align: center;
           max-width: 1280px;
           width: 100%;
        }

        .subscribe form {
           display: flex;
           max-width: 500px;
           width: 100%;
           justify-content: center;
           align-items: center;
           gap: 0;
        }

        .subscribe form input {
           width: 100%;
           padding: 15px;
           border: none;
           outline: none;
           border-radius: 4px 0 0 4px;
           font-size: 1rem;
        }

        .subscribe form .btn {
           border-radius: 0 4px 4px 0;
           width: 140px;
           height: 49px;
           white-space: nowrap;
        }

        /* Rodapé */
        footer {
           background-color: #160021;
           width: 100%;
        }

        footer .wrapper .logo {
           color: var(--first-gra-clr);
           font-size: 1.8rem;
        }

        footer .wrapper {
           justify-content: space-between;
           align-items: flex-start;
           max-width: 1280px;
        }

        footer .wrapper .col {
           justify-content: flex-start;
           align-items: flex-start;
           gap: 15px;
           flex: 1;
        }

        footer .wrapper .col:nth-child(1) {
           font-size: .9rem;
        }

        footer .wrapper .col h4 {
           color: var(--primar-clr);
           margin-bottom: 10px;
           font-size: 1.1rem;
        }

        footer a {
           display: block;
           margin: 5px 0;
           transition: var(--transition-one);
        }

        footer a:hover {
           color: var(--first-gra-clr);
           transform: translateX(5px);
        }

        /* ============ RESPONSIVO MOBILE ============ */

        /* Tablets */
        @media screen and (max-width: 1024px) {
           .heading-one {
              font-size: 3rem;
           }
           
           .heading-two {
              font-size: 2.2rem;
           }
           
           .container {
              padding: 40px 20px;
           }
           
           .wrapper {
              gap: 25px;
           }
           
           .col-img .hero-img-off {
              left: 300px;
              bottom: 120px;
           }
        }

        /* Tablets Pequenos */
        @media screen and (max-width: 768px) {
           .heading-one {
              font-size: 2.5rem;
           }
           
           .heading-two {
              font-size: 2rem;
           }
           
           .heading-three {
              font-size: 1.3rem;
           }
           
           .container {
              padding: 30px 15px;
           }
           
           .section-heading {
              padding: 30px 20px;
              flex-direction: column;
              gap: 20px;
              text-align: center;
           }
           
           .clr-one {
              width: 500px;
              height: 500px;
              top: -150px;
              left: -250px;
           }
           
           .clr-two {
              width: 300px;
              height: 300px;
           }
           
           /* Menu Hamburguer */
           header .burger_icon {
              display: block;
           }
           
           .nav nav ul {
              position: fixed;
              top: 0;
              right: -100%;
              height: 100vh;
              width: 280px;
              background-color: var(--dark-clr);
              flex-direction: column;
              justify-content: flex-start;
              padding-top: 100px;
              gap: 0;
              transition: var(--transition-one);
              z-index: 1000;
              box-shadow: -5px 0 15px rgba(0,0,0,0.3);
           }
           
           .nav nav ul.active {
              right: 0;
           }
           
           .nav nav ul li {
              width: 100%;
              border-bottom: 1px solid var(--light-bg);
           }
           
           .nav nav ul li a {
              display: block;
              padding: 18px 25px;
              width: 100%;
              font-size: 1.1rem;
              transition: var(--transition-one);
           }
           
           .nav nav ul li a:hover {
              background-color: var(--light-bg);
              color: var(--first-gra-clr);
           }
           
           .nav .nav-icon {
              gap: 15px;
           }
           
           /* Hero Section */
           .hero .wrapper {
              flex-direction: column;
              gap: 40px;
           }
           
           .col-text {
              align-self: center;
              padding-top: 60px;
              text-align: center;
              width: 100%;
           }
           
           .col-img .hero-img-off {
              position: relative;
              left: auto;
              bottom: auto;
              margin: 30px auto 0;
              width: 100%;
              max-width: 300px;
           }
           
           .hero button {
              width: 180px;
              height: 50px;
              margin: 25px auto;
           }
           
           /* Novidades */
           .arrival .wrapper {
              flex-direction: column;
              gap: 25px;
           }
           
           .arrival .col {
              width: 100%;
              max-width: 350px;
           }
           
           /* Sobre */
           .about .wrapper {
              flex-direction: column-reverse;
              gap: 40px;
           }
           
           .about .col-text {
              text-align: center;
              align-items: center;
           }
           
           .get-off {
              position: relative;
              left: auto;
              bottom: auto;
              margin: 30px auto;
              width: 100%;
              max-width: 280px;
           }
           
           /* Coleção */
           .collection .grid-wrapper {
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 20px;
              padding: 0 10px;
           }
           
           .collection .btn-section {
              justify-content: center;
           }
           
           .collection .btn-col {
              margin: 5px;
              width: 110px;
              height: 42px;
              font-size: 0.85rem;
           }
           
           /* Depoimentos */
           .testimonial .wrapper {
              flex-direction: column;
              gap: 25px;
           }
           
           .testimonial .col {
              width: 100%;
              max-width: 400px;
              margin: 0 auto;
           }
           
           /* Inscrição */
           .subscribe .wrapper {
              padding: 60px 30px;
           }
           
           .subscribe form {
              flex-direction: column;
              gap: 15px;
           }
           
           .subscribe form input {
              border-radius: 4px;
              text-align: center;
           }
           
           .subscribe form .btn {
              border-radius: 4px;
              width: 100%;
              max-width: 200px;
           }
           
           /* Rodapé */
           footer .wrapper {
              flex-direction: column;
              gap: 40px;
              text-align: center;
           }
           
           footer .col {
              align-items: center;
              text-align: center;
           }
        }

        /* Mobile */
        @media screen and (max-width: 480px) {
           .heading-one {
              font-size: 2.2rem;
           }
           
           .heading-two {
              font-size: 1.8rem;
           }
           
           .heading-three {
              font-size: 1.2rem;
           }
           
           .container {
              padding: 25px 10px;
           }
           
           .section-heading {
              padding: 25px 15px;
           }
           
           .clr-one {
              width: 350px;
              height: 350px;
              top: -100px;
              left: -175px;
              filter: blur(150px);
           }
           
           .clr-two {
              width: 200px;
              height: 200px;
              filter: blur(150px);
           }
           
           /* Header */
           header {
              padding: 12px 15px;
           }
           
           .nav nav ul {
              width: 250px;
           }
           
           /* Hero */
           .hero button {
              width: 160px;
              height: 48px;
              font-size: 0.95rem;
           }
           
           .col-img .hero-img-off {
              padding: 15px;
           }
           
           .col-img .hero-img-off h3 {
              font-size: 1rem;
           }
           
           /* Coleção */
           .collection .grid-wrapper {
              grid-template-columns: 1fr;
              gap: 15px;
              padding: 0 5px;
           }
           
           .collection .btn-section {
              flex-direction: column;
              align-items: center;
           }
           
           .collection .btn-col {
              width: 140px;
              margin: 3px;
           }
           
           /* Depoimentos */
           .testimonial .col {
              padding: 1.5rem 1rem;
           }
           
           /* Inscrição */
           .subscribe .wrapper {
              padding: 50px 20px;
           }
           
           .btn {
              padding: 12px 20px;
              font-size: 0.95rem;
           }
           
           p {
              font-size: 0.95rem;
           }
        }

        /* Mobile Pequeno */
        @media screen and (max-width: 360px) {
           .heading-one {
              font-size: 2rem;
           }
           
           .heading-two {
              font-size: 1.6rem;
           }
           
           .container {
              padding: 20px 8px;
           }
           
           .nav nav ul {
              width: 220px;
           }
           
           .collection .grid-wrapper {
              grid-template-columns: 1fr;
           }
           
           .col-body {
              padding: 0.8rem 0.3rem;
           }
        }

        /* Melhorias para Touch */
        @media (hover: none) and (pointer: coarse) {
           .btn, 
           .btn-col,
           .fa-solid {
              min-height: 44px;
              min-width: 44px;
           }
           
           .nav nav ul li a {
              padding: 20px 25px;
           }
           
           /* Aumentar área de toque para todos os botões */
           button, 
           .btn, 
           .btn-col {
              cursor: pointer;
           }
        }

        /* Orientação Landscape Mobile */
        @media screen and (max-width: 768px) and (orientation: landscape) {
           .nav nav ul {
              padding-top: 80px;
              overflow-y: auto;
           }
           
           .hero .wrapper {
              flex-direction: row;
              gap: 20px;
           }
           
           .col-text {
              padding-top: 40px;
           }
           
           .container {
              padding: 20px 15px;
           }
        }

        /* Telas de Alta Resolução */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
           .btn,
           .btn-col {
              border-width: 1.5px;
           }
        }

        /* Redução de Movimento */
        @media (prefers-reduced-motion: reduce) {
           * {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
           }
           
           .clr-one,
           .clr-two {
              animation: none;
           }
        }

        /* Scrollbar Customizada */
        ::-webkit-scrollbar {
           width: 8px;
        }
        ::-webkit-scrollbar-thumb {
           background: rgba(195, 43, 251, 0.5);
           border-radius: 10px;
        }
        ::-webkit-scrollbar-track {
           background-color: #1a0125;
        }

        /*Mapa*/

        /* Estilização geral da seção */
        .map-section {
           text-align: center;
           padding: 40px 20px;
           margin-top: 40px;
        }

        /* Título */
        .map-title {
           font-size: 1.5rem;
           font-weight: 700;
           margin-bottom: 20px;
           color: #ffffff;
        }

        /* Caixa do mapa */
        .map-box {
           width: 100%;
           height: 350px;
           border-radius: 15px;
           overflow: hidden;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
           transition: transform 0.4s ease;
        }

        /* Efeito ao passar o mouse */
        .map-box:hover {
           transform: scale(1.02);
        }

        /* Responsividade */
        @media (max-width: 768px) {
           .map-title {
              font-size: 1.3rem;
           }
           .map-box {
              height: 300px;
           }
        }

        @media (max-width: 480px) {
           .map-title {
              font-size: 1.2rem;
           }
           .map-box {
              height: 250px;
           }
        }

        /* Botão flutuante do WhatsApp */
        .whatsapp-float {
           position: fixed;
           bottom: 35px;
           right: 35px;
           width: 70px;
           height: 70px;
           z-index: 999;
           border-radius: 50%;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: #25d366;
           animation: pulse 1.5s infinite ease-in-out;
           transition: transform .2s;
        }

        .whatsapp-float img {
           width: 40px;
        }

        /* Efeito ao passar o mouse */
        .whatsapp-float:hover {
           transform: scale(1.1);
        }

        /* Animação de pulsar */
        @keyframes pulse {
           0% {
              transform: scale(1);
              box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
           }
           70% {
              transform: scale(1.08);
              box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
           }
           100% {
              transform: scale(1);
              box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
           }
        }

        /* Responsivo */
        @media (max-width: 480px) {
           .whatsapp-float {
              width: 60px;
              height: 60px;
              right: 15px;
              bottom: 15px;
           }

           .whatsapp-float img {
              width: 34px;
           }
        }

        /* Correções adicionais para mobile */
        .mobile-fix {
           /* Garantir que imagens não ultrapassem a largura da tela */
           max-width: 100%;
           height: auto;
        }
        
        /* Prevenir overflow horizontal */
        html, body {
           max-width: 100%;
           overflow-x: hidden;
        }
        
        /* Melhorar legibilidade em telas pequenas */
        @media (max-width: 480px) {
           body {
              font-size: 14px;
           }
        }