:root {
  --marsala: #63172D;
  --champanhe: #C6C0B6;
  --dourado: #9B7D3A;
  --claro: #f9f9f9;
  --escuro: #1e1e1e;
}


/* ------------------ CONFIGURA SEÇÃO ESPECIALISTA ------------------*/

@font-face {
  font-family: 'Callina';
  src: url('fonts/Callina.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.img-desktop {/*bloqueia a imagem do mobile*/
  display: block;
}

.img-mobile { /*Libera a imagem do desktop*/
  display: none;
}

.nossa-especialista {
position: relative;
background: var(--claro);
padding: 8vh 5vw;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: flex-start;
}

.conteudo-especialista {
z-index: 3;
max-width: 100rem;
}

.conteudo-especialista h3 {
color: var(--marsala);
font-size: clamp(1.2rem, 2.5vw, 2rem);
margin-bottom: 1rem;
}

.conteudo-especialista h2 {
font-family: 'Callina', sans-serif;
color: var(--dourado);
margin-bottom: 1rem;
font-size: clamp(7rem, 3vw, 9rem);
}

.conteudo-especialista p {
font-size: clamp(1rem, 2.3vw, 1.8rem);
line-height: 1.6;
margin-bottom: 1rem;
margin-left: .4rem;
}

.imagem-especialista {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
height: 100%;
background-color: #F7F7F7;
}

.imagem-especialista img {
height: 100%;
object-fit: cover;
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* --------- CONFIGURA A SEÇÃO DESCRIÇÃO  ---------- */

.texto-descricao{
flex: 1 1 50%;
text-align: justify;
padding: 0 2rem;
max-width: 80rem;
margin: 0 auto;
}

.descricao {
background: white;
border: 2px solid var(--dourado);
border-radius: 16px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
max-width: 100%;
width: 90%;
margin: 5vh auto;
font-size: 1.3rem;
line-height: 1.8;
}

.descricao h3 {
font-size: 1.8rem;
line-height: 1.8;
color: var(--dourado);
}

.descricao p {
font-size: 1.3rem;
line-height: 1.8;
}

/* ---------------- CONFIGURA A SEÇÃO SOBRE A CLÍNICA ----------------*/

.sobre-clinica {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 5vh 2rem;
background: #fff5ee;
}

.sobre-clinica .texto {
flex: 1 1 500px;
max-width: 600px;
font-size: 1.2rem;
line-height: 1.6;
}

.sobre-clinica .texto h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--marsala);
}

.sobre-clinica .texto p {
margin-bottom: 1.5rem;
}

.sobre-clinica .btn-saiba-mais {
display: inline-block;
background: var(--dourado);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: background 0.3s ease;
}

.sobre-clinica .btn-saiba-mais:hover {
background: #8a6a2f;
}

.sobre-clinica .imagem {
flex: 1 1 400px;
max-width: 500px;
display: flex;
align-items: center;
justify-content: center;
}

.swiper-sobre {
width: 100%;
height: auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.swiper-sobre .swiper-slide {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
box-shadow: none;
}

.swiper-sobre .swiper-slide img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
object-fit: cover;
}


/* Estilização dos botões de navegação */
.swiper-sobre .swiper-button-prev,
.swiper-sobre .swiper-button-next {
color: var(--marsala);
background: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
top: 50%;
transform: translateY(-50%);
}

.swiper-sobre .swiper-button-prev {
left: 10px;
}

.swiper-sobre .swiper-button-next {
right: 10px;
}

.swiper-sobre .swiper-button-prev::after,
.swiper-sobre .swiper-button-next::after {
font-size: 20px;
font-weight: bold;
}

/*----------------------------- CONFIGURAÇÃO DA SEÇÃO TRATAMENTO ------------------------------------ */

.sessao-tratamentos {
  background-color: #fceecf;
  padding: 4rem 0;
}

.titulo-secao {
  color: var(--marsala); /* ou #63172D */
  font-size: 2rem;
  /*font-weight: 700;*/
  text-align: center;
  margin-bottom: 2rem;
}



.titulo-tratamentos {
  text-align: center;
  font-size: 2.5rem;
  color: #1e1e1e;
  margin-bottom: 2rem;
  font-weight: 700;
  border-bottom: 2px solid #1e1e1e;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.swiper-tratamentos {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.card-tratamento {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-tratamento .imagem {
  width: 100%;
  aspect-ratio: 1 / 1; /* força formato quadrado, responsivo */
  overflow: hidden;
  position: relative;
}

.img-tratamento {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou 'cover' se quiser manter o preenchimento completo */
  display: block;
}

.card-tratamento .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(99, 23, 45, 0.8); /* marsala com transparência */
  color: #fff;
  text-align: center;
  padding: 07px 8px;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.card-tratamento .overlay h3 {
  color: #fff;
  font-size: 1.3rem;
  margin: 0;
  font-weight: 500;
}

/* Botões */
.swiper-tratamentos .swiper-button-prev,
.swiper-tratamentos .swiper-button-next {
color: var(--marsala);
background: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
top: 50%;
transform: translateY(-50%);
}

.swiper-tratamentos .swiper-button-prev::after,
.swiper-tratamentos .swiper-button-next::after {
font-size: 20px;
font-weight: bold;
}

/* ------------------ CONFIGURAÇÃO DA PÁGINA PARA VISUALIZAÇÃO NO CELULAR ------------------------------*/

@media screen and (max-width: 768px){ 

.img-desktop { /*Bloqueia a imagem do desktop*/
    display: none;
}

.img-mobile { /*Libera a imagem do mobile*/
    display: block;
    width: 120%;
    max-width: none;
    height: auto;
    object-fit: cover;
    transform: scale(1.1);
}

/*CONFIGURA A IMAGEM DA BÁRBARA*/ 

.nossa-especialista {
    position: static;
    flex-direction: column;
    padding: 0.5rem;
    margin: 0.5rem;
  }

.imagem-especialista {
    position: static;
    width: 100vw; /* ocupa toda a largura da viewport */
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

.imagem-especialista img {
    width: 100vw; /* força a imagem a ocupar toda a tela */
    height: auto;
    object-fit: cover;
    
  }


/* ------------- CONFIGURA O TEXTO DE BEM VINDOS --------------------*/

.conteudo-especialista {
z-index: 5;
max-width: 100rem;
}

.conteudo-especialista h3 {
color: var(--marsala);
font-size: clamp(1rem, 2.5vw, 2rem);
margin-bottom: 1rem;
}

.conteudo-especialista h2 {
font-family: 'Callina', sans-serif;
color: var(--dourado);
margin-bottom: 1rem;
font-size: clamp(2.8rem, 3vw, 5rem);
}

.conteudo-especialista p {
font-size: clamp(.8, 2.3vw, 1.5rem);
line-height: 1.6;
margin-bottom: .4rem;
margin-left: 1.8rem;
}

/*--------------- CONFIGURA A SEÇÃO DESCRIÇÃO -------------------*/

.texto-descricao {
flex: 1 1 100%;
text-align: justify;
padding: 0 1rem;
max-width: 100rem;
margin: 0 auto;

}

.descricao {
background: white;
border: 2px solid var(--dourado);
border-radius: 16px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
max-width: 100%;
width: 90%;
margin: 5vh auto;
font-size: 1.3rem;
line-height: 1.8;

}

.descricao h3 {
font-size: 1.6rem;
line-height: 1.8;
color: var(--dourado);
align-items:center;
text-align: left;
}

.descricao p {
font-size: 1rem;
line-height: 1.4;
align-items: justify;
text-align: justify;
}

/* ---------------- CONFIGURA A SEÇÃO SOBRE A CLÍNICA ----------------*/

.sobre-clinica {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
align-items: center;
justify-content: center;

padding: 5vh 2rem;
background: #fff5ee;
}

.sobre-clinica .texto {
flex: 1 1 10rem;
max-width: 10rem;
font-size: 1.2rem;
line-height: 1.6;
}

.sobre-clinica .texto h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--marsala);
}

.sobre-clinica .texto p {
margin-bottom: 1.5rem;
text-align: left
}

.sobre-clinica .imagem,
.sobre-clinica .texto {
	max-width: 100%;
	text-align: center;
}

.sobre-clinica .btn-saiba-mais {
	margin-top: 1rem;
}

.swiper-sobre {
	max-width: 100%;
}

.sobre-slide img {
	max-height: 100rem;
	object-fit: cover;
}

/* Estilização dos botões de navegação */
.swiper-sobre .swiper-button-prev,
.swiper-sobre .swiper-button-next {
color: var(--marsala);
background: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
top: 50%;
transform: translateY(-50%);
}

.swiper-sobre .swiper-button-prev {
left: 10px;
}

.swiper-sobre .swiper-button-next {
right: 10px;
}

.swiper-sobre .swiper-button-prev::after,
.swiper-sobre .swiper-button-next::after {
font-size: 20px;
font-weight: bold;
}


/*----------------TRATAMENTOS---------------*/
.titulo-tratamentos {
font-size: 1.8rem;
}
.card-tratamento .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(99, 23, 45, 0.8); /* marsala com transparência */
  color: #fff;
  text-align: center;
  padding: 10px 8px;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
}