/* Dr. Henrique Ferreira: cópia do site em WordPress/Elementor (backup em _backup-wp-2026-11-10/).
   Medidas tiradas do site no ar a 1440px e 390px. */

@font-face { font-family: "RCL Morland"; src: url(../fonts/RCLMorland-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "RCL Morland"; src: url(../fonts/RCLMorland-BoldItalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-Thin.woff2) format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-ExtraLight.woff2) format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-Regular_Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Blauer Nue"; src: url(../fonts/BlauerNue-ExtraBold_Italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --azul-escuro: #031d5e;
  --azul-vivo: #1f60ff;
  --azul-medio: #10389b;
  --azul-claro: #d1eaff;
  --dourado: #f5c76a;
  --serif: "RCL Morland", Georgia, serif;
  --sans: "Blauer Nue", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); color: var(--azul-escuro); background: var(--azul-escuro); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; }
.titulo { font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 1.2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botão "Agende sua consulta" */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 344px; height: 71px; border: 1px solid #fff; border-radius: 40px;
  background: var(--azul-vivo); color: #fff; text-decoration: none;
  font: 600 24px/1.2 var(--sans); transition: background-color .2s, transform .2s;
}
.btn:hover { background: #3b74ff; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; }
.btn svg { width: 24px; height: 24px; flex: none; }

/* 1. Hero */
.hero { min-height: 700px; display: flex; align-items: center; background: #001a5a url(../img/hero.webp) center / auto 100% no-repeat; color: #fff; }
.hero .wrap { padding: 0 14px; }
.hero h1 { font-family: var(--serif); font-weight: 700; font-style: italic; font-size: 40px; line-height: 1.2; max-width: 540px; }
.hero h1 em { color: var(--dourado); font-style: italic; display: block; }
.hero p { margin-top: 20px; max-width: 540px; font: italic 400 24px/1.2 var(--sans); }
.hero p strong { font-weight: 700; }
.hero .btn { margin-top: 35px; }

/* 2. Faixa "Cuidar da boca" (moldura e faixa lateral vêm desenhadas no fundo) */
.cuidar { height: 438px; background: #001a5a url(../img/faixa-cuidar.webp) center / auto 100% no-repeat; color: #fff; text-align: center; padding-top: 87px; }
.cuidar h2 { max-width: 860px; margin: 0 auto; }
.cuidar p { max-width: 740px; margin: 19px auto 0; font: 300 24px/1.2 var(--sans); }

/* 3. Serviços */
.servicos { background: #01277e url(../img/fundo-servicos.webp) center / cover no-repeat; color: #fff; text-align: center; padding: 60px 20px 100px; }
.servicos .sub { margin-top: 20px; font: 200 24px/1.2 var(--sans); }
.servicos ul { list-style: none; margin: 73px auto 0; padding: 0; max-width: 1160px; display: grid; grid-template-columns: repeat(6, 1fr); }
.servicos li { display: flex; flex-direction: column; align-items: center; gap: 20px; font: 200 24px/1.2 var(--sans); }
.servicos li img { width: 160px; height: 160px; border-radius: 50%; }
.servicos li span { max-width: 160px; }
.servicos .btn { margin-top: 40px; }

/* Carrossel (antes/depois e fotos de cirurgia) */
.carrossel { position: relative; }
.carrossel .trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carrossel .trilho::-webkit-scrollbar { display: none; }
.carrossel .trilho > * { flex: none; scroll-snap-align: start; }
.carrossel .seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 48px; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .9; }
.carrossel .seta:hover { opacity: 1; }
.carrossel .seta svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.carrossel .seta.ant { left: 4px; }
.carrossel .seta.prox { right: 4px; }
.carrossel .pontos { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.carrossel .pontos button { width: 14px; height: 14px; padding: 4px; border: 0; background: none; cursor: pointer; }
.carrossel .pontos button::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--azul-escuro); opacity: .15; }
.carrossel .pontos button[aria-current="true"]::before { background: var(--azul-vivo); opacity: 1; }

/* 4. Antes e depois */
.sorriso { background: #e3f1ff url(../img/fundo-claro.webp) center / cover no-repeat; text-align: center; padding: 110px 0 100px; }
.sorriso .sub { margin-top: 20px; font: 100 24px/1.2 var(--sans); }
.sorriso .carrossel { max-width: 1278px; margin: 35px auto 0; }
.sorriso .trilho { gap: 10px; }
.sorriso .trilho img { width: calc((100% - 30px) / 4); aspect-ratio: 1; border-radius: 10px; object-fit: cover; }

/* 5. Conheça o seu cirurgião */
.cirurgiao { background: #1d4fbf url(../img/fundo-cirurgiao.webp) center / cover no-repeat; padding: 70px 20px 45px; }
.cirurgiao .card { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; border-radius: 35px; overflow: hidden; background: #fff; min-height: 946px; }
.cirurgiao .texto { padding: 70px 30px 50px 50px; }
.cirurgiao h2 { color: var(--azul-escuro); }
.cirurgiao .texto p { margin-top: 14px; max-width: 525px; font: 200 22px/1.2 var(--sans); color: var(--azul-escuro); }
.cirurgiao .texto h2 + p { margin-top: 20px; }
.cirurgiao .texto strong { font-weight: 400; }
.cirurgiao .texto u { text-underline-offset: 3px; }
.cirurgiao .texto .assina { font-weight: 400; font-style: italic; }
.cirurgiao .foto { background: #0a3fae url(../img/dr-henrique.webp) center top / cover no-repeat; }

/* 6. Infraestrutura */
.infra { background: #e3f1ff url(../img/fundo-claro.webp) center / cover no-repeat; padding: 79px 0 156px; text-align: center; }
.infra .topo { display: grid; grid-template-columns: 585px 328px; gap: 30px; align-items: center; justify-content: start; max-width: 1200px; margin: 0 auto; text-align: left; }
.infra .topo h2 { text-align: right; }
.infra .topo p { font: 200 24px/1.2 var(--sans); }
.infra .carrossel { margin: 29px 30px 0; }
.infra .trilho { gap: 15px; }
.infra .trilho img { width: calc((100% - 30px) / 3); aspect-ratio: 450 / 277; object-fit: cover; border: 1px solid var(--azul-escuro); }
.infra .carrossel .seta { color: #9aa3b5; }
.infra .carrossel .seta svg { filter: none; }
.infra .fecho { max-width: 800px; margin: 50px auto 0; font: 200 24px/1.2 var(--sans); }
.infra .btn { margin-top: 35px; }

/* 7. Agende (formulário) */
.agende { background: #0b2f91 url(../img/fundo-agende.webp) center / cover no-repeat; color: #fff; padding: 100px 20px 100px; scroll-margin-top: 0; }
.agende .grade { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 363px; gap: 40px; align-items: center; }
.agende .chamada { padding-left: 9px; }
.agende .chamada h2 { max-width: 420px; }
.agende .chamada p { margin-top: 20px; max-width: 483px; font: 200 24px/1.2 var(--sans); }
.form { background: #fff; border-radius: 20px; padding: 25px; color: var(--azul-escuro); }
.form h3 { font: 700 24px/1.2 var(--serif); text-align: center; margin-bottom: 14px; }
.form label { display: block; font: 200 16px/1.2 var(--sans); }
.form .campo + .campo { margin-top: 22px; }
.form .campo > label { padding: 6px 0 8px; }
.form .campo > label b { color: #e2001a; font-weight: 400; margin-left: 6px; }
.form input[type=text], .form input[type=tel] {
  width: 100%; height: 40px; padding: 0 16px; border: 1px solid #69727d; border-radius: 3px;
  background: var(--azul-claro); color: var(--azul-escuro); font: 200 16px/1 var(--sans);
}
.form input::placeholder { color: #5b6a8e; opacity: 1; }
.form input:focus { outline: 2px solid var(--azul-vivo); outline-offset: 1px; }
.form .ciente { display: flex; gap: 6px; align-items: flex-start; margin-top: 30px; line-height: 1.5; }
.form .ciente input { margin: 4px 0 0; flex: none; accent-color: var(--azul-medio); }
.form button[type=submit] {
  display: block; width: 100%; height: 40px; margin-top: 30px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--azul-medio); color: #fff; font: 700 24px/1 var(--serif); transition: background-color .2s;
}
.form button[type=submit]:hover { background: var(--azul-vivo); }

/* Faixa infinita */
.faixa { overflow: hidden; height: 72px; display: flex; align-items: center; background: #031a50; border-block: 1px solid rgba(209, 234, 255, .35); }
.faixa div { display: flex; flex: none; white-space: nowrap; font: 400 20px/1 var(--sans); color: #fff; text-transform: uppercase; animation: faixa 40s linear infinite; }
.faixa span { padding-right: .35em; }
@keyframes faixa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .faixa div { animation: none; } }

/* 8. Rodapé */
.rodape { background: var(--azul-escuro); color: #fff; padding: 60px 20px 25px; }
.rodape .grade { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 490px 1fr; padding: 0 0 70px 100px; }
.rodape h2 { font: 700 24px/1.2 var(--serif); color: var(--azul-claro); }
.rodape .cro { margin-top: 20px; font: 200 16px/1.2 var(--sans); }
.rodape .cro + .cro { margin-top: 14px; }
.rodape .redes { display: flex; gap: 30px; margin-top: 40px; }
.rodape .redes a { display: block; width: 40px; height: 40px; color: #fff; transition: opacity .2s; }
.rodape .redes a:hover { opacity: .75; }
.rodape .redes svg { width: 100%; height: 100%; }
.rodape ul { list-style: none; margin: 16px 0 0; padding: 0; color: var(--azul-claro); font: 200 16px/1.2 var(--sans); }
.rodape li { display: flex; gap: 10px; align-items: center; max-width: 450px; }
.rodape li + li { margin-top: 10px; }
.rodape li svg { width: 24px; height: 24px; flex: none; }
.rodape li a { text-decoration: none; }
.rodape li a:hover { text-decoration: underline; }
.rodape .base { max-width: 1140px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .8); padding-top: 42px; text-align: center; font: 200 16px/1.2 var(--sans); }
.rodape .base p + p { margin-top: 20px; }
.rodape .base a { color: #add8e6; text-decoration: none; }

/* Botão flutuante do WhatsApp */
.whats { position: fixed; right: 36px; bottom: 26px; z-index: 50; width: 66px; height: 66px; border-radius: 50%; background: #25d366; border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s; }
.whats:hover { transform: scale(1.06); }
.whats svg { width: 36px; height: 36px; color: #fff; }

/* Telas médias */
@media (max-width: 1240px) {
  .hero .wrap, .infra .topo { padding: 0 30px; }
  .servicos ul { grid-template-columns: repeat(3, 1fr); row-gap: 40px; max-width: 700px; }
  .sorriso .carrossel { margin-inline: 20px; }
  .infra .topo { grid-template-columns: 1fr 1fr; }
  .rodape .grade { grid-template-columns: 1fr 1fr; padding-left: 0; }
}
@media (max-width: 1024px) {
  .cirurgiao .card { grid-template-columns: 1fr; min-height: 0; }
  .cirurgiao .foto { order: -1; aspect-ratio: 1; background-position: center 0; }
  .agende .grade { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .agende .chamada { padding: 0; }
  .agende .chamada h2, .agende .chamada p { margin-inline: auto; }
  .form { width: 100%; max-width: 420px; text-align: left; }
}

/* Celular */
@media (max-width: 767px) {
  .titulo { font-size: 28px; }
  .btn { width: 300px; height: 66px; font-size: 20px; }
  .hero { min-height: 0; display: block; background: #001a5a url(../img/hero-mobile.webp) center top / 100% auto no-repeat; padding: 82vw 0 70px; }
  .hero .wrap { padding: 0 20px; }
  .hero h1 { font-size: 28px; }
  .hero p { margin-top: 20px; font-size: 20px; font-style: normal; }
  .hero p strong { font-style: italic; }
  .hero .btn { margin-top: 34px; }
  .cuidar { height: auto; padding: 76px 20px 80px; background-size: auto 100%; }
  .cuidar h2 { font-size: 24px; }
  .so-desk { display: none; }
  .cuidar p { font-size: 18px; margin-top: 19px; }
  .servicos { padding: 60px 20px 70px; }
  .servicos .sub { margin-top: 0; font-size: 20px; }
  .servicos ul { grid-template-columns: repeat(2, 1fr); row-gap: 34px; margin-top: 50px; }
  .servicos li { gap: 14px; font-size: 20px; }
  .servicos li img { width: 140px; height: 140px; }
  .servicos .btn { margin-top: 44px; }
  .sorriso { padding: 70px 0 60px; text-align: left; }
  .sorriso h2, .sorriso .sub { padding: 0 30px; }
  .sorriso .sub { font-size: 20px; color: #333; }
  .sorriso .carrossel { margin: 30px 20px 0; }
  .sorriso .trilho { gap: 8px; }
  .sorriso .trilho img { width: calc((100% - 8px) / 2); }
  .cirurgiao { padding: 30px 12px; }
  .cirurgiao .card { border-radius: 24px; }
  .cirurgiao .texto { padding: 36px 20px 40px; }
  .cirurgiao .texto p { font-size: 18px; color: #333; }
  .infra { padding: 60px 0 80px; }
  .infra .topo { grid-template-columns: 1fr; gap: 20px; padding: 0 30px; }
  .infra .topo h2 { text-align: left; }
  .infra .topo p { font-size: 20px; }
  .infra .carrossel { margin: 30px 30px 0; }
  .infra .trilho img { width: 100%; }
  .infra .fecho { margin: 40px 20px 0; font-size: 20px; }
  .agende { padding: 70px 20px 60px; }
  .agende .chamada p { font-size: 20px; }
  .faixa { height: 44px; }
  .faixa div { font-size: 14px; }
  .rodape { padding: 60px 30px 25px; }
  .rodape .grade { grid-template-columns: 1fr; row-gap: 50px; padding-bottom: 50px; }
  .rodape li { align-items: flex-start; }
  .whats { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .whats svg { width: 32px; height: 32px; }
}

/* ---------- Página /links ---------- */
@font-face { font-family: "Poppins"; src: url(../fonts/Poppins-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/Poppins-300i.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/Poppins-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../fonts/Poppins-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

.pg-links { background: #fff; color: #262626; font-family: Poppins, Arial, sans-serif; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 160px 0 40px; }
.pg-links .perfil { width: 224px; height: 224px; }
.pg-links h1 { margin-top: 20px; font: 800 24px/1.2 Poppins, Arial, sans-serif; text-align: center; }
.pg-links .cargo { margin-top: 20px; font-weight: 300; font-size: 24px; text-align: center; }
.pg-links nav { margin-top: 30px; width: 461px; display: grid; gap: 20px; }
.pg-links nav a, .pg-links nav button { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 15px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pg-links nav a:hover, .pg-links nav button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(3, 29, 94, .25); }
.pg-links nav img { width: 100%; }
.pg-links .credito { margin-top: auto; padding-top: 120px; font: italic 300 24px/1.2 Poppins, Arial, sans-serif; color: #2a2a2a; }
.pg-links .credito a { color: #0020ff; text-decoration: none; }

.popup { width: min(720px, 100%); max-width: 100%; padding: 0; border: 0; color: #fff; background: #0c3aa8 url(../img/fundo-popup.webp) center / cover no-repeat; font-family: Poppins, Arial, sans-serif; }
.popup .caixa { position: relative; padding: 40px; }
.popup::backdrop { background: rgba(0, 0, 0, .7); }
.popup h2 { font: 800 24px/1.2 Poppins, Arial, sans-serif; margin-right: 24px; }
.popup .fechar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: #222; font-size: 28px; line-height: 1; cursor: pointer; }
.popup form { margin-top: 20px; display: grid; gap: 10px; }
.popup input[type=text], .popup input[type=tel] { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: 50px; font: 400 16px Poppins, Arial, sans-serif; color: #303030; }
.popup .ciente { display: flex; gap: 6px; align-items: flex-start; font-size: 16px; line-height: 1.6; }
.popup .ciente input { margin-top: 6px; flex: none; }
.popup button[type=submit] { height: 40px; border: 0; border-radius: 50px; background: #32a642; color: #fff; font: 700 16px Poppins, Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.popup button[type=submit]:hover { background: #2b9139; }

@media (max-width: 767px) {
  .pg-links { padding: 160px 0 30px; }
  .pg-links .perfil { width: 222px; height: 222px; }
  .pg-links h1 { font-size: 20px; padding: 0 10px; }
  .pg-links .cargo { font-size: 20px; }
  .pg-links nav { width: 100%; }
  .pg-links .credito { padding-top: 80px; }
  .popup { margin: auto 0; }
}