:root {
  --gap: 3rem;
  --white-color: #ffffff;
  --primary-color: #000000;
  --secondary-color: #efbf56; /* Bege */
  --light-gray-color: #cccccc;
  --header-bg-color: rgba(245, 245, 245, 0.9); /* Cinza claro com transparência */
  --toggle-color: #333333; /* Cinza escuro para o toggle */
}

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Urbanist", sans-serif;
  font-size: 2rem;
  color: var(--primary-color);
  line-height: 1.5;
}

body.menu-open {
  overflow: hidden; /* Bloqueia a rolagem quando o menu está aberto */
}

.menu ul {
  max-height: 100vh; /* Garante que o menu não ultrapasse a altura da tela */
  overflow-y: auto; /* Adiciona scroll apenas ao menu, se necessário */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Urbanist", sans-serif;
}

h1 {
  line-height: 1.1;
}

h2 {
  font-size: 60px;
  margin-bottom: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 3rem;
}

p {
  font-size: 1.8rem; /* Tamanho da fonte */
  line-height: 1.6; /* Espaçamento entre linhas */
  color: var(--primary-color); /* Cor do texto */
  margin-bottom: 2rem; /* Margem inferior */
  text-align: left; /* Alinhamento do texto */
  font-weight: 400; /* Peso da fonte (normal) */
}

.main-bg {
  background-color: #333333; /* Mesma cor dos botões Procedimentos */
  color: var(--white-color);
}

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

.main-content {
  max-width: 120rem;
  margin: 0 auto;
  padding: 3rem var(--gap); /* Reduzindo o padding de 5rem para 3rem */
}

.section {
  min-height: 60vh; /* Aumentei de 40vh para 60vh */
  padding: 3rem 0;
  text-align: center;
}

/* Ajuste específico para a seção de Lentes de Resina */
.lentes-section {
  min-height: 300px; /* Altura fixa de 300 pixels */
}

/* Ajuste específico para a seção de Contato */
#contato {
  min-height: 50vh; /* Altura reduzida para desktop */
  padding: 2rem 0; /* Padding reduzido para desktop */
}

/* Menu */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--header-bg-color);
  border-bottom: 0.1rem solid var(--light-gray-color);
  padding: 1rem 0;
  backdrop-filter: blur(10px);
}

.menu-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.menu h1 {
  font-size: 2.3rem;
  color: var(--primary-color);
}

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

.menu ul li a {
  font-size: 2.2rem; /* Aumentando o tamanho da fonte */
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500; /* Adicionando peso médio à fonte */
  letter-spacing: 0.5px; /* Pequeno espaçamento entre letras */
}

.menu ul li a:hover {
  color: var(--secondary-color);
}

.destaque {
  color: var(--secondary-color);
  font-weight: 600; /* Peso um pouco maior para destaque */
}

/* Header com Efeito Shrink */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--header-bg-color);
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  padding: 2rem 0;
  height: 160px;
  border: none;
  backdrop-filter: blur(10px);
}

#header.shrink {
  padding: 1.5rem 0;
  height: 80px;
}

#header .logo {
  width: 120px;
  height: auto;
  border-radius: 100%;
  transition: width 0.3s ease-in-out;
  cursor: pointer;
  pointer-events: auto !important; /* Garantir que a logo seja clicável */
  user-select: none; /* Evitar seleção de texto */
}

#header.shrink .logo {
  width: 60px;
}

/* Estilo para os links do menu no header */
#header nav ul li a {
  font-size: 2rem; /* Tamanho adequado para mobile */
  font-weight: 500;
  letter-spacing: 0.3px;
}

#header.shrink nav ul li a {
  font-size: 1.8rem; /* Tamanho menor quando o header encolhe */
}

/* Efeito de hover nos links do menu */
#header nav ul li a:hover {
  color: rgb(239, 191, 86); /* Cor do hover */
}

/* Seção de Introdução */
#home {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.intro-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: none;
  animation: fadeInBackground 1.5s ease-out forwards;
}

/* Animação para a imagem de fundo */
@keyframes fadeInBackground {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
}

.intro-text-overlay {
  position: relative !important;
  z-index: 2 !important;
  color: white !important;
  max-width: 100% !important;
  padding: 0 1rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

.intro-text-overlay h1 {
  font-size: 48px !important;
  line-height: 1.1 !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
  text-align: center !important;
  color: white !important;
  font-weight: 700 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  /* Efeito: vem de cima para o centro */
  transform: translateY(-100px);
  opacity: 0;
  animation: slideInFromTop 1.2s ease-out 0.5s forwards;
}

.intro-text-overlay p {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  text-align: center !important;
  color: var(--secondary-color) !important;
  font-weight: 500 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  /* Efeito: vem da direita para o centro */
  transform: translateX(100%);
  opacity: 0;
  animation: slideInFromRight 1.2s ease-out 1.2s forwards;
}

/* Animação: deslizar de cima para o centro */
@keyframes slideInFromTop {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animação: deslizar da direita para o centro */
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.intro-text-overlay p .text-bege {
  position: relative; /* Necessário para o pseudo-elemento */
  display: inline-block;
}

/* Animações removidas - textos sem efeitos de entrada */

/* Responsividade para o efeito */
@media (max-width: 768px) {
  /* Remove borda dourada do mobile */
  html {
    border: none !important;
    outline: none !important;
  }

  body {
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  * {
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* Remove qualquer borda ou outline de elementos específicos */
  input, button, a, div, section, nav, header, footer {
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Remove bordas específicas do mobile */
  .menu, #header, .section, .image-item, .logo {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove qualquer borda dourada do viewport */
  html, body {
    background-color: #ffffff !important;
    border-color: transparent !important;
  }

  /* Remove bordas de elementos interativos */
  a:focus, button:focus, input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Centralizar imagem principal em mobile */
  .intro-img {
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .intro-img img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .intro-text-overlay h1 {
    font-size: 36px;
    /* Efeito em mobile: vem de cima */
    transform: translateY(-100px);
    opacity: 0;
    animation: slideInFromTop 1s ease-out 0.3s forwards;
  }
  
  .intro-text-overlay p {
    font-size: 1.8rem;
    /* Efeito em mobile: vem da direita */
    transform: translateX(100%);
    opacity: 0;
    animation: slideInFromRight 1s ease-out 0.8s forwards;
  }

  /* Configuração adicional para telas muito pequenas */
  @media (max-width: 480px) {
    .intro-img img {
      object-fit: cover !important;
      object-position: center center !important;
      width: 100vw !important;
      height: 100vh !important;
      min-width: 100vw !important;
      min-height: 100vh !important;
    }
    
    .intro-text-overlay h1 {
      font-size: 28px !important; /* Ainda menor para telas pequenas */
      line-height: 1.1 !important;
      margin-bottom: 1rem !important;
      padding: 0 1rem !important;
    }
    
    .intro-text-overlay p {
      font-size: 1.4rem !important; /* Ainda menor para telas pequenas */
      line-height: 1.2 !important;
      margin-bottom: 0.5rem !important;
      padding: 0 1rem !important;
    }
    
    .intro-text-overlay {
      padding: 0 1rem !important;
      max-width: 90% !important;
    }
  }
}

.text h2 {
  font-size: 64px; /* Aumentando para ficar igual à imagem */
  margin-bottom: 3rem; /* Aumentando a margem */
  font-weight: 700;
  line-height: 1.1; /* Melhorando o espaçamento entre linhas */
  text-align: center; /* Centralizando o texto */
  max-width: 1200px; /* Aumentando a largura máxima */
  margin-left: auto; /* Centralizando horizontalmente */
  margin-right: auto; /* Centralizando horizontalmente */
}

/* Grid de Imagens - Responsividade Completa */
.image-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

/* Desktop - 4 colunas */
@media (min-width: 1200px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Laptop/Tablet Landscape - 3 colunas */
@media (min-width: 992px) and (max-width: 1199px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet Portrait - 3 colunas */
@media (min-width: 769px) and (max-width: 991px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile - 2 colunas */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .image-item {
    height: 140px;
    /* Desabilitar seleção e interação em mobile */
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    /* Desabilitar seleção e interação das imagens em mobile */
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
  }
}

.tratamentos-right img {
  width: 200px;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Tamanhos responsivos para image-item */
/* Desktop */
@media (min-width: 1200px) {
  .image-item {
    height: 200px;
  }
}

/* Laptop/Tablet Landscape */
@media (min-width: 992px) and (max-width: 1199px) {
  .image-item {
    height: 180px;
  }
}

/* Tablet Portrait */
@media (min-width: 769px) and (max-width: 991px) {
  .image-item {
    height: 160px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .image-item {
    height: 140px;
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
  }
}

/* Botão de Agenda */
.agenda-button-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.agenda-button {
  display: inline-flex;
  align-items: center;
  background-color: #333333;
  color: #efbf56;
  padding: 1.2rem 1.8rem;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.agenda-button i {
  margin-right: 0.5rem;
  font-size: 1.8rem;
  color: white;
  background: #25D366;
  border-radius: 50%;
  border: 0.6rem solid #25D366;
}

.agenda-button:hover {
  transform: scale(1.1);
}

/* Estilo para o título "Lentes de Resina" */
.lentes-title-container {
  text-align: center;
  margin-bottom: 1rem;
}

.lentes-title {
  font-size: 35px;
  font-weight: bold;
  color: #000;
}

.lentes-title a {
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
}

/* Estilo para o título "O que é?" */
.lentes-subtitle {
  font-size: 30px;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.5rem;
  text-align: left;
  text-transform: uppercase;
}

/* Estilo para o texto descritivo */
.lentes-text {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #333;
  text-align: left;
  margin-bottom: 1rem;
  font-weight: 500; /* Peso da fonte (medium) */
}

/* Container para imagens e tipos de lentes */
.lentes-grid {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1rem 0;
}

.lentes-left {
  flex: 1;
}

.lentes-right {
  flex: 1;
  margin-top: 2rem;
}

/* Para telas maiores */
.lentes-images {
  display: flex;
  gap: 1rem;
  justify-content: flex-start; /* Alinhar à esquerda */
}

.lentes-image-item img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo para a seção "Tipos de Lentes de Resina" */
.lentes-tipos {
  flex: 1;
  text-align: left;
}

/* Estilo para o título "Tipos de Lentes de Resina" */
.lentes-tipos-title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Estilo para as caixas de tipos de lentes */
.lentes-tipo-box {
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Estilo para os títulos das caixas de tipos de lentes */
.lentes-tipo-subtitle {
  font-size: 20px;
  font-weight: bold;
  color: #efbf56; /* Cor das letras em bege */
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: left;
  background-color: #333333; /* Fundo escuro */
  padding: 10px 15px; /* Adiciona um pouco de espaço interno */
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Sinal de + no final sem borda */
.lentes-tipo-subtitle::after {
  content: "+";
  font-size: 24px;
  color: #efbf56; /* Cor do sinal de + em bege */
  font-weight: normal;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Sinal de - quando a caixa está aberta */
.lentes-tipo-subtitle.active::after {
  content: "−";
  transform: rotate(0deg);
}

/* Efeito de hover no sinal de + */
.lentes-tipo-subtitle:hover::after {
  transform: rotate(90deg);
}

.lentes-tipo-subtitle.active:hover::after {
  transform: rotate(0deg);
}

/* Estilo para o texto oculto */
.hidden-texto {
  display: none;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-top: 0.5rem;
  background-color: #ffffff;
  padding: 0.5rem;
  border-radius: 5px;
  font-weight: 700;
  width: 100%;
  text-align: left;
}

/* Mostrar texto ao clicar */
.show-texto {
  display: block;
}

/* Seção de Tratamentos */
#tratamentos {
  padding: 5rem 0;
  background-color: #e8e8e8; /* Cor de fundo cinza mais escura */
}

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

.tratamentos-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
  text-align: left; /* Alinhar o título à esquerda */
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.tratamentos-title span {
  font-size: 48px; /* Mantenha o tamanho da fonte */
  font-weight: 700; /* Mantenha o peso da fonte */
  color: var(--primary-color); /* Mantenha a cor */
}

.tratamentos-text {
  font-size: 1.4rem;
  text-align: left; /* Mudando de center para left */
  line-height: 1.6;
  padding: 0 !important; /* Removendo padding lateral */
  margin-bottom: 2rem; /* Garantindo margem inferior */
}

.tratamentos-text br {
  display: block !important; /* Garantindo que a quebra de linha funcione */
}

/* Container para conteúdo e imagem */
.tratamentos-content {
  display: flex;
  gap: 2rem; /* Espaço entre o conteúdo e a imagem */
  align-items: center; /* Centralizar verticalmente */
}

/* Div para o conteúdo (lado esquerdo) */
.tratamentos-left {
  flex: 2; /* Ocupa mais espaço */
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Espaço entre as caixas */
}

/* Estilos para as abas - Layout igual à imagem */
.tabs {
  width: 100%;
  text-align: left;
}

.tabs-buttons {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}

.tab-button {
  background-color: #333333;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-button.active {
  background-color: #333333;
  color: #efbf56;
  font-weight: 700;
}

.tab-button:hover:not(.active) {
  /* Removendo o efeito de hover */
  background-color: #333333;
}

.tabs-content {
  width: 100%;
  background-color: white;
  padding: 25px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Estilo para os parágrafos dentro das abas ativas */
.tab-content p {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 400; /* Peso da fonte (normal) */
}

/* Div para a imagem (lado direito) */
.tratamentos-img {
  flex: 1; /* Ocupa menos espaço */
  max-width: 484px; /* Largura máxima da imagem */
}

.tratamentos-img img {
  width: 500px; /* Largura fixa */
  height: 300px; /* Altura fixa */
  object-fit: cover; /* Garante que a imagem cubra o espaço */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsividade */
@media (max-width: 768px) {
  .tratamentos-content {
    flex-direction: column; /* Empilha conteúdo e imagem em telas menores */
  }

  .tratamentos-img {
    order: -1; /* Coloca a imagem acima do conteúdo em telas menores */
    margin-bottom: 2rem; /* Espaço entre a imagem e o conteúdo */
    max-width: 100%; /* Largura total em telas menores */
  }

  .tratamentos-img img {
    width: 100%; /* Largura total em telas menores */
    height: auto; /* Altura automática para manter a proporção */
  }

  .tabs-buttons {
    flex-direction: column;
    gap: 2px;
  }

  .tab-button {
    width: 100%;
    margin-bottom: 2px;
  }

  .tab-button:last-child {
    margin-bottom: 0;
  }

  .tabs-content {
    border-radius: 8px;
    margin-top: 15px;
  }

  /* Ajustes para a seção de tratamentos em mobile */
  .tratamentos-title {
    font-size: 36px; /* Ajustando tamanho para mobile */
    text-align: left; /* Mudando de center para left */
  }

  .tratamentos-text {
    font-size: 1.4rem; /* Reduzindo de 1.8rem para 1.4rem */
    text-align: left; /* Mudando de center para left */
    line-height: 1.6;
    padding: 0 !important; /* Removendo padding lateral */
    margin-bottom: 2rem; /* Garantindo margem inferior */
  }

  .tratamentos-text br {
    display: block !important; /* Garantindo que a quebra de linha funcione */
  }

  .tab-content p {
    font-size: 1.7rem; /* Aumentando de 1.6rem para 1.7rem */
    line-height: 1.6;
    text-align: left;
    padding: 0 0.5rem;
  }
}

/* Seção de Contato */
#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.avaliacao-container {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 20px;
}

.text-bege {
  color: #efbf56;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.text-avaliacao {
  color: #efbf56;
  font-size: 32px; /* Aumentando significativamente */
  font-weight: bold;
  margin-bottom: 2rem; /* Aumentando margem */
}

.text-avaliacao {
  text-align: center;
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  background-image: linear-gradient(90deg, #5CD466 0%, #2E6A33 100%);
  color: white;
  padding: 1.2rem 2rem; /* Aumentando o padding */
  font-size: 32px; /* Aumentando significativamente */
  font-weight: bold;
  text-decoration: none;
  margin-top: 1.5rem; /* Aumentando margem */
  transition: transform 0.3s ease;
}

.whatsapp-button i {
  margin-right: 1rem; /* Aumentando margem */
  font-size: 2.2rem; /* Aumentando tamanho do ícone */
}

.whatsapp-button:hover {
  transform: scale(1.05);
}

.horarios {
  color: white;
  font-size: 18px; /* Aumentando de 14px para 18px */
  margin-top: 1.2rem; /* Aumentando margem */
  text-align: center;
  line-height: 1.4;
}

/* Footer */
.footer {
  background-color: var(--white-color);
  padding: 1rem;
  border-top: 1px solid #ccc;
  font-size: 1.6rem;
  color: #000;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.footer-column:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  max-width: 100px;
}

.footer p {
  font-size: 1.6rem;
  line-height: 1.1;
  color: #000;
  margin: 0.1rem 0;
  font-weight: 400; /* Peso da fonte (normal) */
  text-align: center;
}

.fa-instagram {
  font-size: 3rem;
  color: #E1306C;
  transition: transform 0.3s ease;
}

.fa-instagram:hover {
  transform: scale(1.1);
}

/* Responsividade */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }

  /* Ajustes para o menu em mobile */
  .menu-toggle {
    display: block;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }

  .menu-icon {
    width: 30px;
    height: 3px;
    background-color: var(--toggle-color);
    position: relative;
    transition: all 0.3s ease;
  }

  .menu-icon::before,
  .menu-icon::after {
    content: '';
    width: 30px;
    height: 3px;
    background-color: var(--toggle-color);
    position: absolute;
    transition: all 0.3s ease;
  }

  .menu-icon::before {
    transform: translateY(-8px);
  }

  .menu-icon::after {
    transform: translateY(8px);
  }

  .close-menu:checked~.menu .menu-icon {
    background-color: transparent;
  }

  .close-menu:checked~.menu .menu-icon::before {
    transform: rotate(45deg);
  }

  .close-menu:checked~.menu .menu-icon::after {
    transform: rotate(-45deg);
  }

  .menu ul {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background-color: #f5f5f5;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .close-menu:checked~.menu ul {
    display: flex;
  }

  /* Ajustes para o grid de imagens em mobile */
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-item {
    height: auto;
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
  }

  .image-item {
    width: 165px; /* Largura fixa */
    height: 215px; /* Altura fixa */
    margin: 0 auto; /* Centraliza as imagens */
  }

  /* Ajustes para o header em mobile */
  #header {
    padding: 1rem 0;
  }

  #header.shrink {
    padding: 1rem 0;
    height: 80px;
  }

  #header .logo {
    width: 80px;
  }

  #header.shrink .logo {
    width: 60px;
  }

  /* Ajustes para o texto em mobile */
  .text {
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
    max-width: 95% !important;
  }

  .text br {
    display: block !important;
  }

  /* Adicionar quebra manual para mobile */
  /* .text::after {
    content: "Seu sorriso é nossa prioridade. Transforme-o com a nossa expertise e confiança";
    display: block;
    white-space: pre-line;
  } */

  /* Ajustes para o footer em mobile */
  .footer-container {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-column {
    min-width: 100%;
  }

  @keyframes explode {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.5);
    }

    100% {
      transform: scale(1);
    }
  }

  /* Classe para aplicar a animação de clique */
  .explode-effect {
    animation: explode 0.5s ease-out;
  }

  /* Ajustes para a seção de lentes em mobile */
  .lentes-grid {
    flex-direction: column;
  }

  .lentes-images {
    flex-direction: column;
    align-items: center;
  }

  /* Ajustes para a seção de tratamentos em mobile */
  .tratamentos-content {
    flex-direction: column;
  }

  .tratamentos-grid {
    grid-template-columns: 1fr;
  }

  .tratamentos-right {
    max-width: 100%;
  }

  .lentes-image-item img {
    width: 100%; /* Largura responsiva (ocupa 100% do container) */
    height: auto; /* Altura automática para manter a proporção */
    max-width: 100%; /* Garante que a imagem não ultrapasse o container */
  }

  /* Centralizar imagem principal em mobile */
  .intro-img {
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .intro-img img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .intro-text-overlay h1 {
    font-size: 48px !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    text-align: center !important;
    color: white !important;
    font-weight: 700 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    /* Efeito: vem de cima para o centro */
    transform: translateY(-100px);
    opacity: 0;
    animation: slideInFromTop 1.2s ease-out 0.5s forwards;
  }
  
  .intro-text-overlay p {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
    text-align: center !important;
    color: var(--secondary-color) !important;
    font-weight: 500 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    /* Efeito: vem da direita para o centro */
    transform: translateX(100%);
    opacity: 0;
    animation: slideInFromRight 1.2s ease-out 1.2s forwards;
  }

  .intro-text-overlay {
    position: relative !important;
    z-index: 2 !important;
    color: white !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* Desabilitar seleção de todas as imagens em mobile - Configuração robusta */
  img:not(.logo) {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
  }

  /* Garantir que a logo permaneça clicável */
  .logo {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  /* Desabilitar seleção para containers de imagens */
  .image-item, .image-grid, .lentes-image-item, .tratamentos-img, .intro-img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
  }

  /* Desabilitar menu de contexto em mobile */
  * {
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* Permitir seleção apenas para textos e inputs necessários */
  p, h1, h2, h3, h4, h5, h6, span, a, input, textarea, button {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
  }
}

/* Efeito de Montagem Alternada - Versão Simplificada */
.alternate-element {
    opacity: 0 !important;
    position: relative !important;
    transition: all 0.3s ease-out !important;
    filter: blur(8px) !important;
}

.alternate-element.alternate-from-left {
    transform: translateX(-100px) scale(0.8) !important;
}

.alternate-element.alternate-from-right {
    transform: translateX(100px) scale(0.8) !important;
}

.alternate-element.alternate-active {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    filter: blur(0) !important;
}

/* Efeito de brilho após a montagem */
.alternate-element.alternate-active::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 0.8s ease-in-out 0.1s;
    z-index: 2;
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Atrasos escalonados para cada imagem - Mais rápidos */
.image-item:nth-child(1) .alternate-element { transition-delay: 0.02s !important; }
.image-item:nth-child(2) .alternate-element { transition-delay: 0.04s !important; }
.image-item:nth-child(3) .alternate-element { transition-delay: 0.06s !important; }
.image-item:nth-child(4) .alternate-element { transition-delay: 0.08s !important; }
.image-item:nth-child(5) .alternate-element { transition-delay: 0.1s !important; }
.image-item:nth-child(6) .alternate-element { transition-delay: 0.12s !important; }
.image-item:nth-child(7) .alternate-element { transition-delay: 0.14s !important; }
.image-item:nth-child(8) .alternate-element { transition-delay: 0.16s !important; }

/* Responsividade */
@media (max-width: 768px) {
    .alternate-element {
        filter: blur(5px) !important;
        transition: all 0.25s ease-out !important;
    }
    
    .alternate-element.alternate-active {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        filter: blur(0) !important;
    }
    
    /* Delays escalonados para mobile - Mais rápidos */
    .image-item:nth-child(1) .alternate-element { transition-delay: 0.01s !important; }
    .image-item:nth-child(2) .alternate-element { transition-delay: 0.02s !important; }
    .image-item:nth-child(3) .alternate-element { transition-delay: 0.03s !important; }
    .image-item:nth-child(4) .alternate-element { transition-delay: 0.04s !important; }
    .image-item:nth-child(5) .alternate-element { transition-delay: 0.05s !important; }
    .image-item:nth-child(6) .alternate-element { transition-delay: 0.06s !important; }
    .image-item:nth-child(7) .alternate-element { transition-delay: 0.07s !important; }
    .image-item:nth-child(8) .alternate-element { transition-delay: 0.08s !important; }
}

/* Remover todos os efeitos antigos de imagens */
.paint-element,
.paint-active,
.slice-element,
.slice-active,
.slice-overlay,
.puzzle-container,
.puzzle-piece,
.puzzle-piece.glow,
.fade-rotate-element,
.fade-rotate-active,
.reveal-element,
.reveal-active,
.reveal-element::before,
.reveal-active::before,
.paint-element::before,
.paint-active::before,
.paint-element::after,
.paint-active::after {
        display: none !important;
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}

/* Seção de Resultados - Layout Específico */
.resultados-container {
  display: flex;
  gap: 4rem;
  margin-bottom: 3rem;
  align-items: flex-start;
}

.resultados-left {
  flex: 0 0 auto;
  min-width: 300px;
}

.resultados-right {
  flex: 1;
}

.resultados-title {
  font-size: 60px;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.resultados-description {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--primary-color);
  margin: 0;
  text-align: left;
  font-weight: 400;
}

/* Responsividade para a seção de Resultados */
@media (max-width: 768px) {
  .resultados-container {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  .resultados-left {
    min-width: auto;
  }
  
  .resultados-title {
    font-size: 40px;
    text-align: left;
  }
  
  .resultados-description {
    font-size: 1.8rem; /* Aumentando de 1.6rem para 1.8rem */
    text-align: left;
    line-height: 1.6; /* Melhorando o espaçamento entre linhas */
    padding: 0 !important; /* Removendo padding lateral para alinhamento correto */
  }
}

/* Efeito de hover nas imagens da seção RESULTADOS - apenas desktop */
@media (min-width: 769px) {
  .image-item {
    cursor: pointer; /* Cursor de mãozinha quando passa o mouse */
  }

  .image-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
    z-index: 1;
  }

  .image-item:hover::before {
    opacity: 1;
  }

  .image-item:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
  }
}

/* Responsividade */
@media (max-width: 768px) {
  /* Prevenir overflow horizontal em mobile */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Garantir que containers principais se ajustem */
  .main-content, .section, .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  h1 {
    font-size: 3rem;
  }

  /* Desabilitar seleção de todas as imagens em mobile - Configuração robusta */
  img:not(.logo) {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
  }

  /* Garantir que a logo permaneça clicável */
  .logo {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  /* Desabilitar seleção para containers de imagens */
  .image-item, .image-grid, .lentes-image-item, .tratamentos-img, .intro-img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
  }

  /* Desabilitar menu de contexto em mobile */
  * {
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  /* Permitir seleção apenas para textos e inputs necessários */
  p, h1, h2, h3, h4, h5, h6, span, a, input, textarea, button {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
  }
}

.close-menu {
  display: none;
}

.close-menu-label,
.menu-toggle {
  display: block;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  text-decoration: none !important;
}

.close-menu-label:focus,
.menu-toggle:focus {
  outline: none;
}

.close-menu-label:hover,
.menu-toggle:hover {
  text-decoration: none !important;
}

/* Seção de Contato - Texto Principal */
.text {
  font-size: 48px;
  font-weight: 700;
  color: white;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.text br {
  display: block !important;
}

/* Ajustes para telas grandes */
@media (min-width: 1200px) {
  .text {
    font-size: 46px;
    line-height: 1.2;
    max-width: 1400px;
  }
}

/* Ajustes para telas médias */
@media (min-width: 769px) and (max-width: 1199px) {
  .text {
    font-size: 42px;
    line-height: 1.2;
    max-width: 1000px;
  }
}