:root {
   font-size: 62.5%;
   letter-spacing: 0.1rem;
   --color-primary: #1f2025;  /** #111111;*/
   --color-secondary: #1a1a1a;
   --color-text: #e0e0e0;
   --color-highlight: #a351d7;
   --color-cta: #c770ff;
   --color-dark: #0d0d0d;
}

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

body {
   font-size: 1.8rem;
   font-family: 'Playfair Display', serif;
   background-color: var(--color-primary);
   color: var(--color-text);
   line-height: 1.6;
   overflow-x: hidden;
}

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

header {
   z-index: 10;
   position: relative;
   display: flex;
   align-items: center;
   text-align: center;
   padding: 4rem 0;
   height: 99vh;
   min-height: 340px;
   background: var(--color-dark);
   background-image: url('https://visaotattoo.com.br/wp-content/uploads/2023/10/12-3.jpg.webp');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-position: top center;
}
header::before {
   content: "";
   background: linear-gradient(300deg, #6c0034, #160304, #1e2f64);
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.5;
}
header .container {
   z-index: 10000;
}

header .cta-button {
   margin-top: 2.5rem;
   color: #fff;
   background-color: transparent;
   box-shadow: 0px 0px 13px 2px #e996fa, inset 0px 0px 16px 10px #700486;
   border: 1px solid #720c81;
}
header .cta-button:hover {
   border: 1px solid var(--color-cta)
   background-color: #e159fc;
}

.hero-title {
   font-family: 'Cinzel', serif;
   font-size: 6rem;
   color: var(--color-cta);
   margin-bottom: 0.5rem;
   text-shadow: 0 0 10px rgba(187, 134, 252, 0.4);
}

.hero-subtitle {
   font-size: 2.5rem;
   color: #FFF;
   max-width: 600px;
   margin: 0 auto 2rem;
   text-shadow: 2px 2px 3px black;
}

.cta-button {
   display: inline-block;
   background-color: var(--color-cta);
   color: var(--color-primary);
   padding: 15px 30px;
   border-radius: 5px;
   text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: transform 0.3s ease, background-color 0.3s ease;
   white-space: nowrap;
}

.cta-button:hover {
   transform: translateY(-3px);
   background-color: #a872ff;
}

.section {
   padding: 60px 0;
   text-align: center;
   position: relative;
}

.section-title {
   font-family: 'Cinzel', serif;
   font-size: 3rem;
   margin-bottom: 2rem;
   color: var(--color-highlight);
   text-shadow: 0 0 5px rgba(117, 80, 140, 0.4);
   text-align: center;
}

.section-title::before, .section-title::after {
   content: '';
   display: inline-block;
   width: 50px;
   height: 2px;
   background: var(--color-highlight);
   margin: 0 10px;
   vertical-align: middle;
}

.section-title::before {
   transform: skew(-20deg);
}

.section-title::after {
   transform: skew(20deg);
}

#gallery {
   background-color: var(--color-secondary);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
}

.gallery-item {
   overflow: hidden;
   border-radius: 5px;
   transition: transform 0.3s ease;
   height: 300px;
   width: auto;
   object-fit: cover;       /* definir como a imagem deve preencher a área definida por height e width */
   object-position: 5% 5%;  /* definir posição da image na área definida */
   filter: opacity(0.8) saturate(0.5);
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.5s ease;
}

.gallery-item:hover {
   transform: scale(1.05);
   filter: saturate(1.5) opacity(1);
}

/* Carrossel */
#carousel-section {
   background-color: var(--color-dark);
   padding: 60px 0;
   position: relative;
}

.carousel-container {
   height: 80vh;
   max-height: 380px;
   margin: 0 auto;
   max-width: 800px;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}

.carousel-slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
   height: 100%;
}

.carousel-slide {
   min-width: 100%;
   height: 100%;
}

.carousel-slide img {
   display: block;
   height: 100%;           /* Definir a altura e largura */
   width: 100%;
   object-fit: cover;
   object-position: 50% 50%;  /* definir posição da image na área definida */
}

.carousel-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   padding: 10px;
   cursor: pointer;
   z-index: 100;
}

.carousel-button.prev {
   left: 10px;
}

.carousel-button.next {
   right: 10px;
}

/* Seção Sobre o Artista */
#about-artist {
   background-color: var(--color-primary);
}

.artist-content {
   display: flex;
   flex-direction: column;
   gap: 20px;
   max-width: 800px;
   margin: 0 auto;
   text-align: left;
}

.artist-content img {
   width: 230px;
   /*height: 200px;*/
   /*border-radius: 50%;*/
   aspect-ratio: 3.5/4;
   object-fit: cover;
   object-position: 50% 0%;  /* definir posição da image na área definida */
   object-view-box: inset(4% 0% 10% 0%);
   margin: 0 auto;
   border: 1px solid var(--color-cta);
}

.problem-solution-content {
   display: flex;
   flex-direction: column;
   gap: 20px;
   max-width: 800px;
   margin: 0 auto;
}

.problem-solution-content h3 {
   font-size: 2.3rem;
   color: var(--color-highlight);
}

.social-proof {
   background-color: var(--color-dark);
}

.testimonials-grid {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   gap: 20px;
}

.testimonial-card {
   background: var(--color-secondary);
   padding: 20px;
   border-radius: 5px;
   max-width: 350px;
   text-align: left;
   border-left: 3px solid var(--color-highlight);
}

.testimonial-card p {
   font-style: italic;
   margin-bottom: 10px;
}

.testimonial-card span {
   display: block;
   font-weight: bold;
   color: var(--color-cta);
}

.how-it-works-steps {
   display: flex;
   justify-content: center;
   gap: 40px;
   flex-wrap: wrap;
}

.step {
   max-width: 250px;
}

.step .icon {
   font-size: 3rem;
   color: var(--color-highlight);
   margin-bottom: 10px;
}

.step h4 {
   font-size: 1.25rem;
   margin-bottom: 10px;
}

.differentiation-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 20px;
   max-width: 800px;
   margin: 0 auto;
   text-align: left;
}

.differentiation-item {
   display: flex;
   align-items: center;
   gap: 15px;
}

.differentiation-item .icon {
   font-size: 1.5rem;
   color: var(--color-cta);
}

#contact {
   background-color: var(--color-secondary);
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 15px;
   max-width: 500px;
   margin: 0 auto;
}

.contact-form input, .contact-form textarea {
   padding: 12px;
   border: 1px solid #444;
   background: #222;
   color: var(--color-text);
   border-radius: 5px;
   width: 100%;
   font-size: inherit;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
   color: #888;
}

.submit-button {
   background-color: var(--color-cta);
   color: var(--color-primary);
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   border: none;
   padding: 15px;
}

.submit-button:hover {
   background-color: #a872ff;
}

footer {
   text-align: center;
   padding: 20px 0;
   background-color: var(--color-dark);
   font-size: 1.3rem;
}


/* --- Lightbox / Modal de Imagem --- */
.lightbox {
   display: none; /* Oculta a lightbox por padrão */
   position: fixed;
   z-index: 1000; /* Garante que fique acima de todos os outros elementos */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto; /* Adiciona barra de rolagem se o conteúdo for maior que a tela */
   background-color: rgba(0, 0, 0, 0.95); /* Fundo escuro e semi-transparente */
   backdrop-filter: blur(5px);
   padding: 20px;
   cursor: pointer; /* O cursor indica que o fundo também é clicável para fechar */
}

/* Botão de fechar (X) */
.lightbox-close {
   position: absolute;
   top: 20px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
   z-index: 1001;
}

.lightbox-close:hover,
.lightbox-close:focus {
   color: var(--color-cta);
   text-decoration: none;
}

/* Contêiner da Imagem e do Conteúdo */
.lightbox-content-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   overflow: hidden; /* Oculta o conteúdo que excede o wrapper antes do zoom */
}

/* Estilo da Imagem */
.lightbox-image {
   display: block;
   margin: auto;
   transition: 0.5s;
   max-width: 90%;
   max-height: 95vh; /* Ajuste inicial: se ajusta à altura da tela (95% do viewport) */
   width: 100%;  /**auto;*/
   height: auto;
   object-fit: contain; /* Garante que a imagem inteira seja visível */
   cursor: zoom-in; /* Indica que a imagem é clicável */
}

/* Classe para o "Zoom" - Tamanho Real */
.lightbox-image.zoom-active {
   max-height: none; /* Remove o limite de altura da tela */
   max-width: none;  /* Remove o limite de largura */
   cursor: zoom-out; /* Indica que um clique desfará o zoom */
   object-fit: initial; /* Permite que a imagem exiba seu tamanho original */
}

/* Dica de Zoom */
.zoom-tip {
   position: fixed;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   color: #ccc;
   background: rgba(0, 0, 0, 0.5);
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 1.4rem;
   z-index: 1001;
   opacity: 1;
   transition: opacity 0.3s ease;
}

.zoom-tip.hidden {
    opacity: 0;
}



/*
 * 1. Elemento principal: garante que o conteúdo é rolável.
 * NOTA: Usa 'overflow: auto;' para que a rolagem apareça SOMENTE
 * quando o conteúdo exceder a altura do div.
 */
.div-sem-scrollbar {
  overflow: auto; /* Permite a rolagem */
}

/*
 * 2. Solução para Chrome, Safari e Opera (Motores Webkit)
 * Define o tamanho da barra de rolagem para 0.
 */
.div-sem-scrollbar::-webkit-scrollbar {
  display: none; /* OU width: 0; height: 0; */
}

/*
 * 3. Solução para Firefox
 * Define a largura da barra de rolagem para 'none'.
 */
.div-sem-scrollbar {
  scrollbar-width: none; /* Oculta completamente */
}




/*** MOBILE MEDIA */
@media only screen and (max-width:768px) {

   .section-title::before,
   .section-title::after {
      display: block;
      margin: 10px auto;
   }

   .hero-title {
      line-height: 5.3rem;
      font-size: 3.6rem;
   }
   .hero-subtitle {
      line-height: 3.2rem;
   }

   .artist-content {
      text-align: center;
   }


   .cta-button {
      padding: 15px 18px;
   }
   .differentiation-item .icon {
      font-size: 2.4rem;
   }
   .submit-button {
      font-size: 1.8rem;
   }

}

/*** MEDIUM TABLET MEDIA */
@media only screen and (min-width:768px) and (max-width:819px) {

}

/*** LARGE TABLET MEDIA */
@media screen and (min-width: 820px) and (max-width:1023px) {

}

/*** LAPTOP  MEDIA */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {

}

/*** DESKTOP MEDIA */
@media only screen and (min-width: 1280px) {

}