/* ─── ODONTO URGENTE — SHARED STYLES ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0D2E6E;
  --blue:   #1A5FC8;
  --blue-lt:#2E7BE8;
  --red:    #D0232A;
  --light:  #F4F7FC;
  --gray:   #8A9CB0;
  --white:  #FFFFFF;
  --dark:   #0A1E42;
  --text:   #1a2a3a;
}
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; }
h1,h2,h3,h4,h5 { font-family: 'Montserrat', sans-serif; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAVBAR ─── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 60px;
  transition: all .35s ease;
}
#navbar.scrolled {
  background: var(--navy);
  box-shadow: 0 4px 30px rgba(0,0,0,.25);
}
/* inner container aligns logo/links/cta with page content */
.nav-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 0;
  transition: padding .35s ease;
}
#navbar.scrolled .nav-inner { padding: 10px 0; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 44px; width: auto; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,.9);
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #5DA8FF; }
.nav-cta {
  background: #25D366; color: var(--white);
  padding: 10px 22px; border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  transition: background .2s, transform .15s;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.nav-cta:hover { background: #1da851; transform: scale(1.04); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 26px; height: 2px; background: white; border-radius: 2px; display: block; transition: all .3s; }
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--navy); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: white; font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .08em;
}
.mobile-menu-close {
  position: absolute; top: 24px; right: 28px;
  color: white; font-size: 28px; cursor: pointer; background: none; border: none;
}

/* ─── FOOTER ─── */
footer {
  background: var(--dark); color: rgba(255,255,255,.7);
  padding: 64px 60px 28px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-logo-wrap { display: inline-flex; margin-bottom: 18px; }
.footer-logo-wrap img { height: 44px; width: auto; }
.footer-about { font-size: .84rem; line-height: 1.75; color: rgba(255,255,255,.55); margin-bottom: 20px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: 14px;
  transition: background .2s, color .2s;
}
.footer-socials a:hover { background: var(--blue); color: white; }
.footer-col h4 {
  font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 700;
  color: white; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: rgba(255,255,255,.55); font-size: .83rem; transition: color .2s; }
.footer-links a:hover { color: white; }
.footer-contact { display: flex; flex-direction: column; gap: 11px; }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-contact-item i { color: #5DA8FF; font-size: 13px; margin-top: 2px; width: 16px; flex-shrink: 0; }
.footer-contact-item a { color: rgba(255,255,255,.6); transition: color .2s; }
.footer-contact-item a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.3); }
.footer-bottom a { color: rgba(255,255,255,.45); }

/* ─── CHATBOT ─── */
#chatbot-widget { position: fixed; bottom: 28px; right: 28px; z-index: 999; }
#chatbot-btn {
  width: 62px; height: 62px; border-radius: 50%;
  background: #25D366; color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 6px 24px rgba(37,211,102,.45);
  transition: transform .25s, box-shadow .25s; position: relative;
}
#chatbot-btn:hover { transform: scale(1.08); }
#chatbot-btn .ping {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--red); color: white;
  font-size: 10px; font-weight: 700; font-family: 'Montserrat', sans-serif;
  display: flex; align-items: center; justify-content: center;
  animation: ping-pulse 1.5s infinite;
}
#chatbot-btn .chat-label {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  background: var(--navy); color: white; white-space: nowrap;
  padding: 8px 14px; border-radius: 50px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: opacity .5s; pointer-events: none;
}
#chatbot-btn .chat-label::after {
  content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-right: none; border-left-color: var(--navy);
}
#chatbot-panel {
  position: absolute; bottom: 76px; right: 0; width: 360px;
  border-radius: 20px; background: white;
  box-shadow: 0 20px 70px rgba(0,0,0,.18); overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 160px);
  transform: scale(.9) translateY(20px); transform-origin: bottom right;
  opacity: 0; pointer-events: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
#chatbot-panel.open { opacity: 1; pointer-events: all; transform: scale(1) translateY(0); }
.chat-header {
  background: linear-gradient(135deg, #1ebe5e, #128640);
  padding: 18px 20px; color: white;
}
.chat-header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.chat-header h4 { font-family: 'Montserrat', sans-serif; font-size: .92rem; font-weight: 700; }
.chat-header p { font-size: .73rem; opacity: .82; }
.chat-close-btn { margin-left: auto; background: none; border: none; color: white; font-size: 18px; cursor: pointer; opacity: .8; }
.chat-online { display: flex; align-items: center; gap: 6px; font-size: .73rem; opacity: .8; }
.chat-online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #90EE90; display: inline-block; }
.chat-messages {
  padding: 16px; max-height: 260px; overflow-y: auto;
  flex: 1; /* cresce até o limite do painel */
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.bubble-bot {
  background: #f0f4f8; border-radius: 14px 14px 14px 2px;
  padding: 11px 14px; font-size: .84rem; line-height: 1.55;
  color: var(--text); max-width: 90%; align-self: flex-start;
}
.bubble-user {
  background: var(--navy); color: white;
  border-radius: 14px 14px 2px 14px;
  padding: 10px 14px; font-size: .84rem; line-height: 1.5;
  max-width: 85%; align-self: flex-end; font-weight: 500;
}
.chat-faq-label {
  font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700;
  color: var(--gray); text-transform: uppercase; letter-spacing: .1em;
  align-self: flex-start; padding: 0 4px;
}
.chat-questions { display: flex; flex-direction: column; gap: 7px; align-self: flex-start; width: 100%; }
.faq-btn {
  background: white; border: 1.5px solid #dde4ee;
  border-radius: 10px; padding: 10px 13px; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--navy);
  font-family: 'Montserrat', sans-serif; text-align: left;
  transition: background .2s, border-color .2s; line-height: 1.3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.faq-btn:hover { background: #f0f5ff; border-color: #a8c0f0; }
.faq-btn i { color: var(--blue); font-size: 11px; flex-shrink: 0; }
.chat-input-row { padding: 10px 14px; border-top: 1px solid #eef1f6; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.chat-input-field { flex: 1; padding: 9px 13px; border: 1.5px solid #dde4f0; border-radius: 50px; font-size: .84rem; font-family: 'Open Sans',sans-serif; color: var(--text); outline: none; transition: border-color .2s; }
.chat-input-field:focus { border-color: var(--blue); }
.chat-send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: background .2s; }
.chat-send-btn:hover { background: var(--blue); }
.chat-footer-inner { padding: 12px 16px; border-top: 1px solid #eef1f6; flex-shrink: 0; }
.chat-wpp-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px; border-radius: 50px;
  background: #25D366; color: white;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700;
  transition: background .2s;
}
.chat-wpp-btn:hover { background: #1da851; }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ─── SECTION COMMONS ─── */
section { padding: 88px 60px; }
.container { max-width: 1200px; margin: 0 auto; }
/* Garante que todos cabeçalhos de seção fiquem alinhados ao container */
.section-header { max-width: 1200px; margin: 0 auto; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section-tag::before { content: ''; width: 24px; height: 2px; background: var(--blue); border-radius: 2px; }
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 800; color: var(--navy); line-height: 1.15; margin-bottom: 14px;
}
.section-title span { color: var(--blue); }
.section-sub { font-size: .95rem; color: #5a6e82; line-height: 1.75; max-width: 560px; margin-bottom: 52px; }
.btn-primary {
  background: var(--red); color: white; padding: 14px 30px; border-radius: 50px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  transition: all .25s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: #b01d23; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(208,35,42,.35); }
.btn-blue {
  background: var(--blue); color: white; padding: 14px 30px; border-radius: 50px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  transition: all .25s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-blue:hover { background: var(--blue-lt); transform: translateY(-2px); }
.btn-outline-dark {
  border: 2px solid var(--navy); color: var(--navy);
  padding: 12px 28px; border-radius: 50px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  transition: all .25s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-outline-dark:hover { background: var(--navy); color: white; }

/* ─── PAGE HERO (inner pages) ─── */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--dark) 100%);
  padding: 140px 60px 80px;
  position: relative; overflow: hidden;
}
.page-hero-inner {
  max-width: 1200px; margin: 0 auto;
}
.page-hero::after {
  content: ''; position: absolute; right: -100px; top: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.03);
}
.page-hero .section-tag { color: #5DA8FF; }
.page-hero .section-tag::before { background: #5DA8FF; }
.page-hero h1 { font-size: clamp(2rem,4vw,3.2rem); font-weight: 900; color: white; margin-bottom: 16px; }
.page-hero p { font-size: 1.05rem; color: rgba(255,255,255,.7); max-width: 580px; line-height: 1.75; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(255,255,255,.5);
}
.breadcrumb a { color: rgba(255,255,255,.6); }
.breadcrumb i { font-size: 10px; }

/* ─── ANIMATIONS ─── */
@keyframes ping-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
@keyframes pulse-red { 0%,100%{box-shadow:0 0 0 0 rgba(208,35,42,.5)} 50%{box-shadow:0 0 0 12px rgba(208,35,42,0)} }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 50%{box-shadow:0 0 0 12px rgba(37,211,102,0)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
  section { padding: 68px 36px; }
  #navbar { padding: 14px 36px; }
  #navbar.scrolled { padding: 10px 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width:768px) {
  section { padding: 56px 22px; }
  #navbar { padding: 0 22px; }
  .nav-inner { padding: 12px 0; }
  #navbar.scrolled .nav-inner { padding: 10px 0; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .page-hero { padding: 120px 22px 60px; }
  #chatbot-panel { width: calc(100vw - 40px); right: 0; }
}