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

html{
scroll-behavior:smooth;
}

body{
background:#f5f7fa;
color:#333;
}

img{
max-width:100%;
height:auto;
display:block;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
background:white;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
flex-wrap:wrap;
gap:10px;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.logo{
font-size:24px;
font-weight:700;
}

.logo span{
color:#4aa3ff;
}

nav a{
margin:0 15px;
text-decoration:none;
color:#333;
font-weight:500;
}

.btn-agendar{
background:#4aa3ff;
color:white;
padding:10px 20px;
border-radius:6px;
text-decoration:none;
}

.hero{
min-height:90vh;
background:url("https://images.unsplash.com/photo-1588776814546-1ffcf47267a5") center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding:40px 20px;
position:relative;
z-index:1;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:-1;
}

.hero h1{
font-size:48px;
max-width:800px;
margin:auto;
}

.hero p{
margin-top:15px;
max-width:600px;
margin-left:auto;
margin-right:auto;
}

.hero-btn{
background:#4aa3ff;
padding:15px 30px;
margin-top:20px;
display:inline-block;
border-radius:8px;
color:white;
text-decoration:none;
}

.servicos{
padding:80px 10%;
text-align:center;
}

.servicos-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.sobre{
display:flex;
gap:40px;
padding:80px 10%;
align-items:center;
flex-wrap:wrap;
}

.sobre-img{
flex:1;
min-width:280px;
}

.sobre-text{
flex:1;
min-width:280px;
}

.depoimentos{
background:white;
padding:80px 10%;
text-align:center;
}

.depoimentos-grid{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.depoimento{
background:#f2f6ff;
padding:25px;
border-radius:10px;
width:280px;
}

.equipe{
padding:80px 10%;
text-align:center;
}

.equipe-grid{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
}

.dentista img{
width:200px;
border-radius:50%;
}

.agendamento{

padding:100px 10%;
background:linear-gradient(135deg,#f0f6ff,#ffffff);
text-align:center;

position:relative;
z-index:0;

overflow:hidden;

}

.agendamento h2{

font-size:32px;
margin-bottom:40px;

}

.agendamento-box{

max-width:700px;
margin:auto;

background:rgba(255,255,255,0.65);

backdrop-filter:blur(14px);

padding:40px;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,0.1);

position:relative;

}

.agendamento-container{

display:flex;
flex-direction:column;
gap:15px;

}

.agendamento-container input,
.agendamento-container select{

padding:14px;

border-radius:8px;

border:1px solid #ddd;

font-size:15px;

}

.calendar-box{

background:white;

border-radius:15px;

padding:20px;

box-shadow:0 5px 20px rgba(0,0,0,0.05);

}

.calendar-header{

display:flex;
justify-content:space-between;
align-items:center;

font-weight:600;
margin-bottom:15px;

}

.calendar-header button{

background:#4aa3ff;
color:white;
border:none;
padding:5px 10px;
border-radius:6px;
cursor:pointer;

}

.calendar-grid{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:8px;

}

.day{

padding:12px;

border-radius:8px;

cursor:pointer;

transition:0.2s;

}

.day:hover{

background:#e8f2ff;

}

.day.selected{

background:#4aa3ff;
color:white;
font-weight:600;

}

.horarios{

margin-top:20px;

}

.horarios-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(80px,1fr));

gap:10px;

}

.hora{

padding:10px;

border:none;

background:#4aa3ff;

color:white;

border-radius:6px;

cursor:pointer;

transition:0.2s;

}

.hora:hover{

background:#2f8fff;

}

.hora.selecionado{

background:#0d5bd9;

}

.btn-agendar{

background:#4aa3ff;

color:white;

padding:15px;

border:none;

border-radius:8px;

font-weight:600;

cursor:pointer;

}

.contato iframe{
width:100%;
height:300px;
border:0;
margin-top:20px;
border-radius:10px;
}

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:14px 18px;
border-radius:100px;
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
font-weight:600;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
z-index:999;
}

/* CONTATO / MAPA */

.contato{
padding:80px 10%;
background:#f5f7fa;
text-align:center;
}

.contato h2{
font-size:32px;
margin-bottom:40px;
}

.map-container{
max-width:1000px;
margin:auto;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
border:4px solid white;
transition:0.4s;
}

.map-container:hover{
transform:scale(1.02);
box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.map-container iframe{
width:100%;
height:450px;
border:0;
display:block;
filter:grayscale(20%) contrast(110%);
}

footer{
background:#0f172a;
color:#e5e7eb;
padding:60px 10% 30px;
}

.footer-bottom strong{
color:#4aa3ff;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
margin-bottom:40px;
}

.footer-logo{
font-size:22px;
font-weight:700;
margin-bottom:10px;
}

.footer-logo span{
color:#4aa3ff;
}

.footer-col h4{
margin-bottom:15px;
font-size:16px;
color:white;
}

.footer-col p{
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.footer-col a{
display:block;
color:#cbd5e1;
text-decoration:none;
margin-bottom:8px;
font-size:14px;
transition:0.2s;
}

.footer-col a:hover{
color:#4aa3ff;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:20px;
text-align:center;
font-size:14px;
color:#94a3b8;
}

/* ================= CALENDÁRIO RESPONSIVO ================= */

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:6px;
width:100%;
}

.day{
width:100%;
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
padding:0;
font-size:14px;
box-sizing:border-box;
}

/* HEADER PREMIUM */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;

background:rgba(255,255,255,0.8);
backdrop-filter:blur(12px);

transition:all 0.3s ease;
}

.hero{
margin-top:90px;
}

/* header menor quando rolar */

header.scroll{
padding:8px 8%;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* diminuir logo */

header.scroll .logo{
font-size:15px;
}

/* diminuir botão */

header.scroll .btn-agendar{
padding:6px 14px;
}

/* HEADER NORMAL */
header{
transition:all 0.3s ease;
}

/* HEADER MENOR AO SCROLL */
header.header-scroll{
padding:8px 5%;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* diminuir logo */
header.header-scroll .logo{
font-size:20px;
}

/* diminuir menu */
header.header-scroll nav a{
font-size:14px;
}

/* diminuir botão */
header.header-scroll .btn-agendar{
padding:8px 14px;
font-size:14px;
}

.fade-up{
opacity:0;
transform:translateY(30px);
transition:0.6s;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

/* TABLET */

@media (max-width:1024px){

header{
padding:20px 5%;
}

.servicos,
.sobre,
.equipe,
.depoimentos,
.agendamento,
.contato{
padding:70px 5%;
}

.hero h1{
font-size:40px;
}

}

/* CELULAR */

@media (max-width:768px){

header{
flex-direction:column;
align-items:center;
}

nav a{
margin:5px 10px;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:14px;
}

.hero-btn{
padding:12px 22px;
}

.sobre{
flex-direction:column;
text-align:center;
}

.sobre ul{
list-style:none;
}

.dentista img{
width:150px;
}

.agendamento-box{
padding:25px;
}

.calendar-grid{
gap:6px;
}

.day{
padding:10px;
font-size:14px;
}

.horarios-grid{
grid-template-columns:repeat(3,1fr);
}

}

/* CELULAR PEQUENO */

@media (max-width:480px){

.hero{
min-height:70vh;
}

.hero h1{
font-size:26px;
}

.hero p{
font-size:13px;
}

nav{
gap:10px;
}

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

.depoimentos-grid{
flex-direction:column;
align-items:center;
}

.equipe-grid{
flex-direction:column;
align-items:center;
}

}

@media (max-width:600px){

/* HEADER */

header{
padding:12px 5%;
flex-direction:column;
gap:10px;
text-align:center;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

nav a{
margin:0;
font-size:13px;
}

/* HERO */

.hero h1{
font-size:34px;
}

.hero p{
font-size:14px;
padding:0 10px;
}

/* CAIXA DE AGENDAMENTO */

.agendamento-box{
width:90%;
padding:25px;
}

/* INPUTS */

.agendamento-box input,
.agendamento-box select{
font-size:14px;
padding:10px;
}

/* CALENDÁRIO */

#calendario{
width:100%;
max-width:100%;
padding:15px;
}

.cal-grid{
gap:5px;
}

.cal-dia{
font-size:14px;
}

/* GALERIA */

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

/* TABELA DO BARBEIRO */

#barbeiroTable{
min-width:500px;
}

}

/* ================= TELAS MUITO PEQUENAS ================= */

@media (max-width:400px){

.cal-dia{
font-size:12px;
}

.hero h1{
font-size:28px;
}

.btn{
padding:12px 25px;
font-size:13px;
}

}

@media (max-width:480px){

.calendar-grid{
gap:4px;
}

.day{
font-size:12px;
}

}

/* ================= NOVAS SEÇÕES ================= */

/* BENEFÍCIOS */

.beneficios {
padding: 80px 10%;
background: linear-gradient(135deg, #f0f6ff, #f5f7fa);
text-align: center;
}

.beneficios h2 {
font-size: 32px;
margin-bottom: 50px;
}

.beneficios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}

.beneficio-card {
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-top: 4px solid #4aa3ff;
}

.beneficio-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.beneficio-icon {
font-size: 50px;
margin-bottom: 15px;
}

.beneficio-card h3 {
color: #333;
margin-bottom: 10px;
font-size: 18px;
}

.beneficio-card p {
color: #666;
line-height: 1.6;
}

/* GALERIA ANTES E DEPOIS */

.galeria {
padding: 80px 10%;
background: white;
text-align: center;
}

.galeria h2 {
font-size: 32px;
margin-bottom: 50px;
}

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

.galeria-item {
position: relative;
overflow: hidden;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.galeria-image {
position: relative;
overflow: hidden;
height: 300px;
}

.galeria-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.galeria-item:hover .galeria-image img {
transform: scale(1.1);
}

.galeria-label {
position: absolute;
bottom: 15px;
right: 15px;
background: #4aa3ff;
color: white;
padding: 8px 15px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
}

/* FAQ */

.faq {
padding: 80px 10%;
background: linear-gradient(135deg, #f5f7fa, #f0f6ff);
}

.faq h2 {
font-size: 32px;
margin-bottom: 50px;
text-align: center;
}

.faq-container {
max-width: 800px;
margin: auto;
}

.faq-item {
background: white;
margin-bottom: 15px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.faq-item.open {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.faq-question {
width: 100%;
padding: 20px;
border: none;
background: white;
text-align: left;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}

.faq-question::after {
content: '▼';
font-size: 12px;
transition: transform 0.3s ease;
}

.faq-item.open .faq-question::after {
transform: rotate(180deg);
}

.faq-question:hover {
background: #f5f7fa;
color: #4aa3ff;
}

.faq-answer {
background: #fafbfc;
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
border-top: 1px solid #e0e0e0;
}

.faq-answer p {
padding: 20px;
color: #666;
line-height: 1.8;
margin: 0;
}

/* NEWSLETTER */

.newsletter-section {
background: linear-gradient(135deg, #4aa3ff, #2f8fff);
color: white;
padding: 40px;
text-align: center;
margin-bottom: 40px;
border-radius: 15px;
}

.newsletter-section h3 {
font-size: 24px;
margin-bottom: 10px;
}

.newsletter-section p {
margin-bottom: 20px;
opacity: 0.9;
}

.newsletter-form {
display: flex;
gap: 10px;
max-width: 500px;
margin: auto;
flex-wrap: wrap;
justify-content: center;
}

.newsletter-form input {
flex: 1;
min-width: 250px;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
}

.btn-newsletter {
padding: 12px 30px;
background: white;
color: #4aa3ff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-newsletter:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* CERTIFICADOS */

.certificado {
display: inline-block;
background: #e8f4ff;
color: #4aa3ff;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-top: 8px;
}

/* ================= NOTIFICAÇÕES ================= */

@keyframes slideIn {
from {
  transform: translateX(400px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

@keyframes slideOut {
from {
  transform: translateX(0);
  opacity: 1;
}
to {
  transform: translateX(400px);
  opacity: 0;
}
}

.notification {
animation: slideIn 0.3s ease;
}

/* ================= MODO ESCURO ================= */

:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: white;
  --text-primary: #333;
  --text-secondary: #666;
  --border-color: #ddd;
  --shadow: rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --shadow: rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

html[data-theme="dark"] header {
  background: rgba(22, 33, 62, 0.95);
  color: var(--text-primary);
}

html[data-theme="dark"] nav a {
  color: var(--text-primary);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .beneficio-card,
html[data-theme="dark"] .depoimento,
html[data-theme="dark"] .agendamento-box,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .calendar-box {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
  background: #2a3a5a;
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme="dark"] input::placeholder {
  color: var(--text-secondary);
}

html[data-theme="dark"] section {
  background: var(--bg-primary);
  color: var(--text-primary);
}

html[data-theme="dark"] h2 {
  color: var(--text-primary);
}

html[data-theme="dark"] .depoimentos {
  background: var(--bg-primary);
}

html[data-theme="dark"] .sobre {
  color: var(--text-primary);
}

html[data-theme="dark"] footer {
  background: #0f1419;
}

html[data-theme="dark"] .faq-answer {
  background: #2a3a5a;
  border-top-color: var(--border-color);
}

html[data-theme="dark"] .faq-answer p {
  color: var(--text-secondary);
}

html[data-theme="dark"] .day:hover {
  background: #2f8fff;
}

html[data-theme="dark"] .agendamento {
  background: linear-gradient(135deg, #16213e, #0f172a);
}

/* Dark Mode Toggle */

.dark-mode-toggle {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 999;
}

@media (max-width: 768px) {
  .dark-mode-toggle {
    top: 80px;
  }

  .beneficios,
  .galeria,
  .faq {
    padding: 60px 5%;
  }

  .beneficios-grid,
  .galeria-grid {
    gap: 15px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input {
    min-width: 100%;
  }
}