html {
  scroll-behavior: smooth;
  background-color: #F5F5F5;
  color-scheme: light;
}

body{
    width: 100%;
    background-color: #F5F5F5;
    font-family: 'Montserrat'; /* fonte do coprpo do texto */
    font-weight: 400;
    font-size: clamp(12px, 1.0vw, 20px);
    color: #3B3B3B; /* Cor da fonte do conteúdo */
    margin: 0; /*Retira a margem padrão do body*/
    padding:0; /*Remove o espaçamento interno padrão do body */
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer{
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #F5F5F5;
}

h1 {
    font-family: 'Montserrat';
    font-weight: 400;
    color: #3B3B3B;
    font-size: clamp(10px,1.0vw,20px);
    margin-top: 0;
    margin-bottom: 60px;
}
h2 {
   font-family: 'Montserrat';
    font-weight: 700;
    color: #842425;
    font-size: clamp(22px,1.7vw,32px);
    margin-top: 0;
    margin-bottom: 0; 
}
h3 {
    font-family: 'Montserrat';
    font-weight: 600;
    color: #F5F5F5;
    font-size: clamp(10px, 0.8vw, 18px);
    margin-top: 0;
    margin-bottom: 0;
}

header {
    margin: 0;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 80px; /*Altura do header */
    line-height: 0;
    z-index: 9999;
    background-color: #F5F5F5;
    display: flex;
    justify-content: center;
}

main {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cabecalho{
    display: none;
}

.cabeçalho_mobile{
    width: 90%;
    height: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F5F5F5;
}

.menu_Hamburguer{
    width: 44px;
    height: 44px;
    border: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.menu_Hamburguer span{
    width: 44px;
    height: 5px;
    background-color: #842425;
    border-radius: 22px;
}

.menu_mobile{
    display: none;
    width: 100%;
    height: auto;
    justify-content: center;
    background-color: #F5F5F5;
    text-align: center;
    position: absolute;
    top: 75px;
    left: 0;
    box-shadow: 0 4px 6px rgba(0,0,0.1);
}

.menu_mobile ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    list-style: none;
    margin-top: 3%;
    margin-bottom: 3%;
}

.menu_mobile li a{
    height: 40px;
    width: auto;
    text-decoration: none;
    color: #3B3B3B;
}

.menu_mobile.aberto{
    display: flex;
}

.hero{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #bfaa93, #b99f88);
}

.hero img{
    height: 35dvh;
    min-height: 400px;
    max-width: 800px;
    width: auto;
    margin-right: 10%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.infotext01{
    color: #F5F5F5;
    width: 40%;
    margin-left: 10%;
}

.CTA{
    margin-top: 70px;
    height: 44px;
    width: auto;
    display: flex;
    gap: 0.5rem;
    cursor:pointer;
    transition: all 0.3 ease;
}

.CTA button{
    background-color: #809373;
    color: #F5F5F5;
    border: none;
    border-radius: 44px;
    font-weight: 700;
    padding-left: 3rem;
    padding-right: 3rem;
}

.CTA:hover{
    transform: scale(1.02);
}

.CTA img{
    width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
}

.backgroundBarra{
    background-color: #809373;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    color: #F5F5F5;
    overflow-x: hidden;
}
.perfuracoessBar{
    display: flex;
    gap: 4vh;
    white-space: nowrap;
    align-items: center;
    animation: moverDireita 30s linear infinite, fadeloop 20s linear infinite;
}

.icone{
    width: 15px;
    height: 15px;
    background-image: url("https://dradripiercer.vieiraelenk.com/wp-content/uploads/2026/07/Stars.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    color: #F5F5F5;
    background-size: contain;
}

@keyframes moverDireita {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes fadeloop {
    0% {opacity: 0;}
    10% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}

.backgroundgray{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    background-color: #E6E6DC;
}

.skills{
    margin-top: 3%;
    margin-bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skills img{
    width: 50%;
    height: auto;
}

.skills h3 {
    color: #842425;
}

.backgroundvinho{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #842425;
    color: #F5F5F5;
    align-items: center;
    margin: 0;
}

.backgroundvinho h2{
    color: #F5F5F5;
}

.backgroundvinho h3 {
    font-style: italic;
    font-weight: 400;
}

.pqvieiraelenk {
    width: 90%;
    height: auto;
    margin-top: 3%;
    margin-bottom: 3%;
}

.background2{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
}


.BG-sobre-Adriana{
    width: 100%;
    height: auto;
    background-color: #809373;
    display: flex;
    justify-content: center;
    color: #F5F5F5;
}

.BG-sobre-Adriana h2 {
    color: #F5F5F5;
}

.mg_cto{
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 70px;
}

.mg_cto img{
    height: 40dvh;
    min-height: 400px;
    width: auto;
}

.sobreDri{
    display: flex;
    flex-direction: column;
    width: 40%;
    height: auto;
}

.skill_dri{
    font-size: clamp(10px, 1vw, 15px);
    margin-bottom: 40px;
}
.sobreDri p {
    margin-top: 0;
}

.video-institucional{
    height: 40dvh;
    min-height: 600px;
    aspect-ratio: 1/2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb_video{
    position: relative;
    width: 281px;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
}

.tb_video img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.tb_video button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F5F5F5;
    color: #3B3B3B;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 20px;
    cursor: pointer;
}

.qualificacoes-profissional{
    width: 30dvh;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    margin-top: 3%;
    margin-bottom: 3%;
}

.qual_box{
    display: flex;
    align-items: center;
    gap: 30px;
}

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

.skill_format{
    margin-bottom: 3%;
    margin-top: 3%;
}

.icon_format img{
    width: auto;
    height: 70px;
}

.background{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.serv_skill{
    margin-top: 3%;
    width: 80%;
    height: auto;
}

.modal_PS{
    display: none;
}

.text_contat h3 {
    color: #842425;
}

.mapeamentoPerfuração{
    display: inline-block;
    position: relative;
    height: 100%;
    z-index: 1;
}

.mapeamentoPerfuração img {
    height: 95%;
    display: block;
}

.modal_PS{
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.modal_contentPS {
    background: #fff;
    border-radius: 8px;
    max-width: 600px;
    aspect-ratio: 9/16;
    height: 80%;
}

.slideshow_PS {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.slideshow_PN {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.slideshow_PO {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.slideshow_PB {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.slideshow_POL {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 8px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
    object-fit: cover;
}

.slide.ativo {
    opacity:1;
}

.ancorPoint div{
    position: absolute;
    z-index: 2;

}

.mapeamentoPerfuração button{
    width: 1.5vh;
    min-width: 30px;
    height: 1.5vh;
    min-height: 30px;
    background-image: url("https://dradripiercer.vieiraelenk.com/wp-content/uploads/2026/07/icon_piercing.svg");
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
    transition: transform 0.2s ease-in-out; /*Suaviza o efeito */

    animation: pulseOpacity 2s infinite ease-in-out;
}

.mapeamentoPerfuração button:hover{
    transform: scale(1.2); //*aumenta 20% ao passar o mouse */
}

.perfuraçãoSobrancelha{ top:26%; left: 60%; width: 1.5vh; height: 1.5vh;}
.perfuraçãoNariz {top: 35%; left:50%; width: 1.5vh; height: 1.5vh;}
.perfuraçãoOrelha{top:29%; left:72%; width: 1.5vh; height: 1.5vh;}
.perfuraçãoBoca{top: 45%; left:50%; width: 1.5vh; height: 1.5vh;}
.perfuraçãoOutros{top:87%; left:49%; width: 1.5vh; height: 1.5vh;}

@keyframes pulseOpacity {
    0% {opacity: 1;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}

.locInfo {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.locInfo img{
    max-width: 80%;
    max-height: 80%;
}

.centerGrid{
    width: 90%;
    height: auto;
    margin-top: 3%;
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: minmax(100px, 200px);
    gap: 5px;
}

.grid img{
    width: 100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 10px;
}

.imagemPequena{
    grid-column: span 1;
    grid-row: span 1;
}

.imagemVertical{
    grid-column: span 1;
    grid-row: span 2; 
}

.imagemVertical2{
    grid-column: span 1;
    grid-row: span 2; 
}

.imagemGrande{
    grid-column: span 2;
    grid-row: span 2;
}

.grid2{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(200px, 400px);
    gap: 5px;
}

.grid2 img{
    width: 100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 10px;
}

.imagemHorizontal{
    grid-column: span 1;
    grid-row: span 1;
}

.cont_hist {
    width: 80%;
    height: auto;
    margin-bottom: 3%;
}
.txt_view{
    font-size: clamp(10px, 1vw, 15px);
    font-weight: 600;
    margin-bottom: 0;
}

.conteudoJoias{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 90%;
    height: 26dvh;
    min-height: 350px;
    border-radius: 20px;
    color: #F5F5F5;
    overflow: hidden;
    margin-bottom: 3%;
}

.açoCirurgico img, .piercingTitanio img, .piercingSobencomenda img, .piercingRemoçãoetroca img {
    position: absolute;
    object-position: center;
    object-fit: cover;
    width: auto;
    height: 100%;
}


.açoCirurgico, .piercingTitanio, .piercingSobencomenda, .piercingRemoçãoetroca {
    display: flex;
    align-items: flex-end;
}

.txt_cont{
    z-index: 1;
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 3%;
    text-align: center;
    font-size: clamp(10px, 1vw, 15px);
}

.txt_cont h2{
    font-size: clamp(10px, 1vw, 15px);
    color: #F5F5F5;
}

.conheçanossoestudio{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.conheçanossoestudio img{
    width: 250px;
    height: 250px;
    border-radius: 20px;
    margin-bottom: 4%;
}

.txt_studio{
    width: 40%;
    height: auto;
}

.classificacao{
    width: 90%;
    display: flex;
    justify-content: space-evenly;
}

.classificacao a{
    text-decoration: none;
    color: #3B3B3B;
    text-align: center;
    width: 230px;
    height: auto;
    margin-bottom: 5%;
    margin-top: 5%;
}

.classfic_Star{
    background-image: url("https://dradripiercer.vieiraelenk.com/wp-content/uploads/2026/07/estrela.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 2vh;
    max-width: 15px;
    height: 2vh;
    max-height: 15px;
}

.cont_Star{
    display: flex;
    justify-content: center;
    gap: 1%;
}

.outros_serv{
    margin-top: 3%;
    width: 70%;
    height: 20dvh;
    min-height: 250px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.outros_serv img{
    width: auto;
    height: 100%;
    border-radius: 20px;
}

.cm_cta{
    width: 60%;
    height: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cm_cta H2 {
    color: #809373;
}

.txt_cta{
    margin-top: 0;
}

.google_maps {
    aspect-ratio: 1/1;
    width: 40%;
    border: 4px solid #809373;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-bottom: 5%;
    margin-top: 5%;
}

.google_maps iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.infRod {
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    margin-top: 5%;
}

.logotipoinf{
    width: 350px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logotipoinf h2{
    margin-bottom: 5%;
}

.logotipoinf img{
    width: 70px;
    height: 70px;
    margin-bottom: 5%;
}

.logotipoinf p{
    margin-bottom: 0;
    margin-top: 0;
}

.logotipoinf a{
    text-decoration: none;
    color: #F5F5F5;
}

.socialpst a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #F5F5F5;
    gap: 10px;
}

.socialpst img {
    width: 30px;
    height: 30px;
}

.rodtxt{
    width: 80%;
    height: auto;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 1%;
}

.rodtxt p{
    margin-bottom: 0;
    margin-top: 0;
}