/* Clínica D'elles — estilos globais */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  color: #0f172a;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #0f2f5e; text-decoration: none; }
a:hover { color: #0e7490; }

input, select, textarea, button { font-family: inherit; }

::selection { background: #cfe0f5; }

:focus-visible { outline: 2px solid #0f2f5e; outline-offset: 2px; }

/* Botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.btn-primary { background: #0f2f5e; color: #ffffff; }
.btn-primary:hover { background: #123a76; color: #ffffff; }

.btn-white { background: #ffffff; color: #0f2f5e; }
.btn-white:hover { background: #e6eef9; color: #0f2f5e; }

.btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.btn-outline:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); color: #ffffff; }

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: #0e7490;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-link:hover { color: #0f2f5e; }

/* Cartões com hover (tratamentos) */

.card-hover {
  border: 1px solid #e8ebf0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-hover:hover {
  border-color: #0f2f5e;
  box-shadow: 0 12px 30px rgba(15, 47, 94, 0.09);
}

/* Inputs */

.input-field {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  font-size: 15px;
  background: #ffffff;
  color: #0f172a;
}
.input-field:focus { border-color: #0f2f5e; }

/* FAQ */

.faq-item {
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color .18s ease, background-color .18s ease;
}
.faq-item.is-open { border-color: #0f2f5e; background: #f9fbfd; }

.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  text-align: left;
}

.faq-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef3fa;
  color: #0f2f5e;
  transition: transform .22s ease, background-color .18s ease, color .18s ease;
}
.faq-icon.is-open {
  background: #0f2f5e;
  color: #ffffff;
  transform: rotate(180deg);
}

.faq-answer { padding: 0 24px 24px; max-width: 70ch; display: none; }
.faq-answer.is-open { display: block; }

/* Localização (página contato) */

.location-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #ffffff;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  padding: 18px;
  transition: border-color .15s ease, background-color .15s ease;
}
.location-btn:hover { border-color: #0f2f5e; background: #fbfcfe; }

/* Header responsivo */

[data-wa-float] { display: none; }

@media (max-width: 860px) {
  [data-desktop-nav] { display: none !important; }
  [data-cta-long] { display: none !important; }
  [data-cta-short] { display: inline !important; }
}

@media (max-width: 700px) {
  [data-wa-float] { display: flex !important; }
  [data-footer-bottom] { padding-bottom: 88px !important; }
}

/* Modal (página contato) */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 20, 40, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay[hidden] { display: none; }

.modal-sheet {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  padding: 26px 22px 30px;
  box-shadow: 0 -10px 40px rgba(8, 20, 40, 0.3);
}

.modal-close {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: #eef3fa;
  color: #0f2f5e;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal-close:hover { background: #e0e9f6; }