:root{
  --bg:#ffffff;
  --text:#0f0f10;
  --muted:#6b7280;
  --card:#f8fafc;
  --border:#e5e7eb;
}

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

html{scroll-behavior:smooth}

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

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

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,0.7);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.brand-logo{height:40px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav a{color:var(--text);text-decoration:none;font-weight:500}
.nav a:focus-visible,
.menu-toggle:focus-visible,
.hero-whats:focus-visible,
.contact-link:focus-visible,
.map-link:focus-visible{
  outline:3px solid rgba(20,184,166,.75);
  outline-offset:4px;
}
.menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  background:rgba(255,255,255,.65);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--text);
  transition:.2s ease;
}
.nav.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){opacity:0}
.nav.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{
  min-height:100vh;display:flex;align-items:center;
  background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/background-hero.png');
  background-size:cover;
  background-position:center;
  color:#fff;
  padding-top:64px; /* compensar nav */
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;text-align:center}
.hero h1{font-size:44px;line-height:1.1;margin-bottom:14px}
.hero p{color:#cbd5e1;max-width:700px;margin:0 auto}
.hero-contact{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:26px;
}
.hero-contact span{
  color:#ecfdf5;
  font-weight:600;
  max-width:760px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-contact-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.hero-whats{
  min-width:220px;
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:8px;
  background:rgba(187,247,208,.78);
  color:#064e3b;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  transition:.2s ease;
}
.hero-whats:hover{
  background:rgba(217,249,157,.9);
  transform:translateY(-2px);
}
.hero-urgent{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.76);
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(254,226,226,.94));
  color:#7f1d1d;
  box-shadow:0 14px 30px rgba(127,29,29,.24);
}
.hero-urgent::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:9px;
  border-radius:50%;
  background:#dc2626;
  box-shadow:0 0 0 6px rgba(220,38,38,.15);
  vertical-align:1px;
}
.hero-urgent:hover{
  background:linear-gradient(135deg, #fff, #fecaca);
  box-shadow:0 18px 36px rgba(127,29,29,.3);
}

/* SECTIONS */
section{padding:80px 0}
h2{font-size:30px;text-align:center;margin-bottom:10px}
.sub{color:var(--muted);text-align:center;margin-bottom:40px}

/* SERVICES */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{
  --service-overlay:linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:var(--card);
  background-clip:padding-box;
  border:0;
  border-radius:16px;
  padding:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:.25s ease;
}
.card-profilaxia{
  background:var(--service-overlay), url('../images/profilaxia.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-profilaxia p{color:#f1f5f9}
.card-ortodontia{
  background:var(--service-overlay), url('../images/orto3.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-ortodontia p{color:#f1f5f9}
.card-harmonizacao{
  background:var(--service-overlay), url('../images/harmo.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-harmonizacao p{color:#f1f5f9}
.card-lentes{
  background:var(--service-overlay), url('../images/lente.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-lentes p{color:#f1f5f9}
.card-canal{
  background:var(--service-overlay), url('../images/canal2.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-canal p{color:#f1f5f9}
.card-restauracoes{
  background:var(--service-overlay), url('../images/restaura.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-restauracoes p{color:#f1f5f9}
.card-implantes{
  background:var(--service-overlay), url('../images/implant.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-implantes p{color:#f1f5f9}
.card-proteses{
  background:var(--service-overlay), url('../images/protese.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-proteses p{color:#f1f5f9}
.card-apneia{
  background:var(--service-overlay), url('../images/apneia.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.card-apneia p{color:#f1f5f9}
.card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.08)}
.card h3{
  margin-bottom:8px;
  font-size:22px;
  line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.card p{
  margin-top:8px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}
.team .member{padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff;text-align:center}
.team .member-featured{text-align:left}
.team .member h3{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.25;
}
.member-instagram{overflow:hidden}
.member-instagram h3{margin-bottom:14px}
.instagram-embed{
  display:flex;
  justify-content:center;
  width:100%;
  overflow:hidden;
}
.instagram-embed .instagram-media{
  min-width:0 !important;
  max-width:540px !important;
  width:100% !important;
}
.member-featured .instagram-embed{margin-top:16px}
.member-featured h3{margin-bottom:12px;text-align:center}
.member-featured p{color:#4b5563;margin-top:10px}

/* LOCATIONS */
.locations{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.location{padding:22px;border-radius:16px;background:#0b0b0c;color:#fff}
.location p{color:#d1d5db}
.location p + p{margin-top:8px}
.contact-link{
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
}
.map-link{
  display:inline-block;
  margin-top:14px;
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* FOOTER */
footer{background:#000;color:#9ca3af;padding:28px 0;text-align:center}

@media(max-width:900px){
  .nav .container{padding:0 12px}
  .nav-inner{
    position:relative;
    flex-direction:row;
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
  }
  .brand{min-width:0;justify-content:flex-start;gap:8px}
  .brand-logo{height:30px}
  .brand span{
    font-size:13px;
    white-space:nowrap;
    letter-spacing:0;
  }
  .menu-toggle{display:flex;flex:0 0 auto}
  .nav-links{
    position:absolute;
    top:calc(100% + 8px);
    left:12px;
    right:12px;
    display:none;
    width:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
  }
  .nav.open .nav-links{display:flex}
  .nav a{
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;
    text-align:center;
  }
  .nav a:hover{background:#f3f4f6}
  .hero{padding-top:64px}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .hero p{font-size:15px}
  .hero-contact{width:100%;gap:14px}
  .hero-contact span{
    max-width:520px;
    font-size:14px;
    line-height:1.45;
  }
  .hero-contact-actions{
    width:100%;
    max-width:360px;
    margin:0 auto;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-whats{
    width:100%;
    min-width:0;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
}