/* ================================================================
   CLÍNICA VITTA — FOLHA DE ESTILO ÚNICA
   Usada por vitta.php (home) e por todas as páginas de profissional
   (daniel.php, felipe.php, davidmourao.php, e as próximas). Qualquer
   ajuste de cor, tipografia, espaçamento ou componente feito aqui
   vale pro site inteiro.
================================================================ */

/* ============================================================
   1. TOKENS DE DESIGN
   Paleta inspirada na sinalização e nos ambientes reais da Vitta:
   espresso quente + estanho + dourado gradiente (do logo).
   Nada de creme+serifada (cliché de IA) — usamos estanho quente.
   Nada de preto+neon — dourado sóbrio, baixa saturação.
=============================================================== */
    :root {
      /* fundo escuro (espresso, não preto puro) */
      --espresso-1: #1e2520;
      --espresso-2: #241E16;
      --espresso-3: #2E2619;

      /* fundo claro (estanho/greige quente, não creme puro) */
      --stone-1: #EDE5D3;
      --stone-2: #E3D8C0;
      --stone-3: #D8CAA9;

      /* texto */
      --ink: #241D14;
      --ink-soft: #4A3F2E;
      --paper: #F6EFE0;
      --paper-soft: #D9CDB2;

      /* dourado — extraído do gradiente do logo */
      --gold-deep: #8A6526;
      --gold: #C69A4C;
      --gold-light: #E8CB86;
      --gold-grad: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-light) 75%, var(--gold-deep) 100%);
      --gold-grad-soft: linear-gradient(120deg, #A9843F 0%, #D4B36B 100%);

      /* verde — tom intermediário extraído da variação de logo em verde da Vitta.
     Fica entre o espresso escuro e o dourado: usado como acento secundário,
     nunca como cor dominante (o dourado continua sendo a cor principal da marca). */
      --green-deep: #16301F;
      --green: #27593E;
      --green-light: #4F8A6A;
      --green-grad: linear-gradient(120deg, var(--green-deep) 0%, var(--green) 50%, var(--green-light) 100%);
      --gold-green-grad: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 30%, var(--green) 70%, var(--green-deep) 100%);

      --line-on-dark: rgba(230, 201, 134, 0.18);
      --line-on-light: rgba(138, 101, 38, 0.22);

      --shadow-soft: 0 20px 60px -25px rgba(27, 23, 18, 0.45);
      --shadow-card: 0 12px 30px -15px rgba(27, 23, 18, 0.25);

      --radius-lg: 26px;
      --radius-md: 16px;
      --radius-sm: 10px;

      --container: 1180px;

      --ff-display: "Fraunces", Georgia, serif;
      --ff-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* ============================================================
   2. RESET
=============================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--ff-body);
      color: var(--ink);
      background: var(--stone-1);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin: 0;
    }

    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 24px;
    }

    @media(max-width:640px) {
      .container {
        padding: 0 20px;
      }
    }

    /* foco visível para acessibilidade */
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================================================
   3. TIPOGRAFIA UTILITÁRIA
=============================================================== */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ff-body);
      font-weight: 700;
      font-size: 12.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold-deep);
    }

    .eyebrow::before {
      content: "";
      width: 12px;
      height: 12px;
      background: var(--gold-grad);
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    section.on-dark .eyebrow {
      color: var(--gold-light);
    }

    h2.section-title {
      font-family: var(--ff-display);
      font-weight: 600;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.12;
      letter-spacing: -0.01em;
      margin-top: 14px;
      max-width: 16ch;
    }

    .section-lede {
      font-size: 17px;
      line-height: 1.65;
      color: var(--ink-soft);
      max-width: 54ch;
      margin-top: 16px;
    }

    section.on-dark .section-lede {
      color: var(--paper-soft);
    }

    section.on-dark h2.section-title {
      color: var(--paper);
    }

    .section-head {
      max-width: 680px;
      margin-bottom: 56px;
    }

    .section-head.centered {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section-head.centered .section-title {
      max-width: 22ch;
      margin-left: auto;
      margin-right: auto;
    }

    .section-head.centered .section-lede {
      margin-left: auto;
      margin-right: auto;
    }

    section {
      padding: 108px 0;
      position: relative;
    }

    section.on-dark {
      background: var(--espresso-1);
      color: var(--paper);
    }

    @media(max-width:768px) {
      section {
        padding: 76px 0;
      }
    }

    /* botões */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 30px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.01em;
      border: 1px solid transparent;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
      white-space: nowrap;
    }

    .btn-gold {
      background: var(--gold-grad);
      background-size: 200% 100%;
      background-position: 0% 0%;
      color: var(--espresso-1);
      box-shadow: 0 14px 30px -12px rgba(198, 154, 76, 0.55);
    }

    .btn-gold:hover {
      background-position: 100% 0%;
      transform: translateY(-2px);
      box-shadow: 0 18px 36px -12px rgba(198, 154, 76, 0.65);
    }

    .btn-ghost-dark {
      background: transparent;
      border-color: rgba(36, 29, 20, 0.25);
      color: var(--ink);
    }

    .btn-ghost-dark:hover {
      border-color: var(--gold-deep);
      background: rgba(138, 101, 38, 0.06);
    }

    .btn-ghost-light {
      background: transparent;
      border-color: rgba(246, 239, 224, 0.35);
      color: var(--paper);
    }

    .btn-ghost-light:hover {
      border-color: var(--gold-light);
      background: rgba(230, 201, 134, 0.08);
    }

    .btn-block {
      width: 100%;
    }

    /* ============================================================
   4. HEADER
=============================================================== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 500;
      background: rgba(51, 68, 50, 0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line-on-dark);
      transition: padding .3s ease, background .3s ease;
    }

    .site-header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 18px;
      padding-bottom: 18px;
      transition: padding .3s ease;
    }

    .site-header.scrolled .container {
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .brand {
      display: flex;
      align-items: center;
    }

    /* LOGO: substitua o src pela sua logomarca horizontal em alta resolução se desejar (SVG idealmente) */
    .brand img {
      height: 40px;
      width: auto;
    }

    @media(max-width:640px) {
      .brand img {
        height: 34px;
      }
    }

    .nav-desktop {
      display: flex;
      align-items: center;
      gap: 38px;
    }

    .nav-desktop a {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--paper-soft);
      position: relative;
      padding: 4px 0;
      transition: color .2s ease;
    }

    .nav-desktop a:hover {
      color: var(--gold-light);
    }

    .nav-desktop a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0%;
      height: 1.5px;
      background: var(--gold-grad);
      transition: width .25s ease;
    }

    .nav-desktop a:hover::after {
      width: 100%;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .header-actions .btn {
      padding: 12px 24px;
      font-size: 14px;
    }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      position: relative;
      flex-shrink: 0;
    }

    .nav-toggle span {
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--paper);
      transition: transform .3s ease, opacity .3s ease, top .3s ease;
    }

    .nav-toggle span:nth-child(1) {
      top: 14px;
    }

    .nav-toggle span:nth-child(2) {
      top: 20px;
    }

    .nav-toggle span:nth-child(3) {
      top: 26px;
    }

    .nav-toggle.open span:nth-child(1) {
      top: 20px;
      transform: rotate(45deg);
    }

    .nav-toggle.open span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
      top: 20px;
      transform: rotate(-135deg);
    }

    .mobile-panel {
      display: none;
      position: fixed;
      inset: 0;
      top: 0;
      background: var(--espresso-1);
      z-index: 480;
      padding: 100px 28px 40px;
      transform: translateX(100%);
      transition: transform .35s ease;
      overflow-y: auto;
    }

    .mobile-panel.open {
      transform: translateX(0);
    }

    .mobile-panel ul {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .mobile-panel a {
      display: block;
      font-family: var(--ff-display);
      font-size: 26px;
      color: var(--paper);
      padding: 14px 0;
      border-bottom: 1px solid var(--line-on-dark);
    }

    .mobile-panel .btn {
      margin-top: 30px;
    }

    @media(max-width: 940px) {
      .nav-desktop {
        display: none;
      }

      .header-actions .btn-ghost-light {
        display: none;
      }

      .nav-toggle {
        display: block;
      }

      .mobile-panel {
        display: block;
      }
    }

    /* ============================================================
   5. HERO
=============================================================== */
    .hero {
      position: relative;
      background: var(--espresso-1);
      color: var(--paper);
      padding: 100px 0 130px;
      overflow: hidden;
    }

    /* Marca d'água geométrica — remete ao duplo-triângulo do logo Vitta */
    .hero-mark {
      position: absolute;
      right: -6%;
      top: -8%;
      width: 620px;
      height: 620px;
      opacity: 0.55;
      pointer-events: none;
    }

    .hero-mark svg {
      width: 100%;
      height: 100%;
    }

    /* Traço botânico — eco discreto do arranjo de flores da recepção. Usado uma única vez. */
    .hero-botanical {
      position: absolute;
      left: -4%;
      bottom: -10%;
      width: 420px;
      opacity: 0.35;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 60px;
      align-items: center;
    }

    @media(max-width:980px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
    }

    .hero-eyebrow {
      color: var(--gold-light);
    }

    .hero h1 {
      font-family: var(--ff-display);
      font-weight: 600;
      font-size: clamp(38px, 5.4vw, 64px);
      line-height: 1.08;
      letter-spacing: -0.01em;
      margin-top: 22px;
      max-width: 15ch;
    }

    .hero h1 em {
      font-style: italic;
      font-weight: 500;
      background: var(--gold-grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p.lede {
      margin-top: 24px;
      font-size: 18px;
      line-height: 1.7;
      color: var(--paper-soft);
      max-width: 46ch;
    }

    .hero-cta-row {
      margin-top: 38px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .hero-trust {
      margin-top: 56px;
      display: grid;
      grid-template-columns: repeat(4, auto);
      gap: 36px;
    }

    @media(max-width:980px) {
      .hero-trust {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
      }
    }

    .hero-trust .num {
      font-family: var(--ff-display);
      font-size: 30px;
      font-weight: 600;
      background: var(--gold-grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-trust .lbl {
      font-size: 12.5px;
      color: var(--paper-soft);
      margin-top: 4px;
      letter-spacing: 0.02em;
    }

    /* Painel visual do hero — construído só com forma/tipografia (sem foto), conforme solicitado.
   COMENTÁRIO: se quiser trocar por uma foto real da fachada/recepção/equipe,
   substitua todo o bloco .hero-panel por uma <img>. */
    .hero-panel {
      position: relative;
      border-radius: var(--radius-lg);
      background: linear-gradient(160deg, var(--espresso-3), var(--espresso-2));
      border: 1px solid var(--line-on-dark);
      padding: 40px;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow-soft);
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid var(--line-on-dark);
      border-radius: calc(var(--radius-lg) - 10px);
      pointer-events: none;
    }

    .hero-panel-label {
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold-light);
      font-weight: 700;
    }

    .hero-plate {
      margin-top: 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .hero-plate-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      background: rgba(246, 239, 224, 0.04);
      border: 1px solid var(--line-on-dark);
    }

    .hero-plate-num {
      font-family: var(--ff-display);
      font-size: 15px;
      color: var(--gold-light);
      min-width: 30px;
    }

    .hero-plate-name {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--paper);
    }

    .hero-panel-foot {
      margin-top: 26px;
      font-size: 13.5px;
      color: var(--paper-soft);
      line-height: 1.6;
      border-top: 1px solid var(--line-on-dark);
      padding-top: 20px;
    }

    /* ============================================================
   6. BENEFÍCIOS
=============================================================== */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    @media(max-width:900px) {
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:600px) {
      .benefits-grid {
        grid-template-columns: 1fr;
      }
    }

    .benefit-card {
      background: var(--paper);
      border: 1px solid var(--line-on-light);
      border-radius: var(--radius-md);
      padding: 32px 28px;
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .benefit-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-card);
    }

    .benefit-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: var(--gold-grad);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .benefit-icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--espresso-1);
    }

    /* verde como tom intermediário: alterna com o dourado nos cards de benefício */
    .benefit-card:nth-child(even) .benefit-icon {
      background: var(--green-grad);
    }

    .benefit-card:nth-child(even) .benefit-icon svg {
      stroke: var(--paper);
    }

    .benefit-card h3 {
      font-family: var(--ff-display);
      font-size: 19px;
      font-weight: 600;
      color: var(--ink);
    }

    .benefit-card p {
      margin-top: 10px;
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--ink-soft);
    }

    /* ============================================================
   7. ESPECIALIDADES — cartões "placa de sala" numerados
=============================================================== */
    .specialties-section {
      background: var(--espresso-1);
      color: var(--paper);
    }

    .specialties-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    @media(max-width:1024px) {
      .specialties-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:720px) {
      .specialties-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:460px) {
      .specialties-grid {
        grid-template-columns: 1fr;
      }
    }

    .spec-card {
      position: relative;
      background: var(--espresso-2);
      border: 1px solid var(--line-on-dark);
      border-radius: var(--radius-md);
      padding: 26px 22px 24px;
      transition: transform .3s ease, border-color .3s ease, background .3s ease;
    }

    .spec-card:hover {
      transform: translateY(-4px);
      border-color: var(--gold);
      background: var(--espresso-3);
    }

    .spec-num {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-display);
      font-size: 14px;
      color: var(--gold-light);
      margin-bottom: 18px;
    }

    /* verde como tom intermediário: metade das salas usa o acento verde em vez do dourado */
    .spec-card:nth-child(even) .spec-num {
      border-color: var(--green-light);
      color: var(--green-light);
    }

    .spec-card:nth-child(even):hover {
      border-color: var(--green-light);
    }

    .spec-card h3 {
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--paper);
    }

    .spec-card p {
      margin-top: 8px;
      font-size: 13px;
      color: var(--paper-soft);
      line-height: 1.55;
    }

    /* ============================================================
   9. EQUIPE / PROFISSIONAIS
=============================================================== */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    @media(max-width:980px) {
      .team-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:600px) {
      .team-grid {
        grid-template-columns: 1fr;
      }
    }

    .team-card {
      background: var(--paper);
      border: 1px solid var(--line-on-light);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
    }

    .team-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-card);
    }

    /* FOTO DO PROFISSIONAL:
   Troque a <div class="team-photo"> por <img src="foto-do-profissional.jpg" alt="Nome Sobrenome">
   Recomendo fotos verticais 4:5, mesmo enquadramento/fundo para todos os 11 perfis. */
    .team-photo {
      aspect-ratio: 4/5;
      background:
        radial-gradient(circle at 50% 38%, rgba(198, 154, 76, 0.28), transparent 60%),
        linear-gradient(150deg, var(--stone-2), var(--stone-3));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      /* <-- ADICIONAR */
    }

    /* ADICIONAR este bloco novo, logo após o .team-photo acima */
    .team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .team-photo .placeholder-mark {
      width: 64px;
      height: 64px;
      opacity: 0.5;
    }

    .team-photo .placeholder-mark svg {
      width: 100%;
      height: 100%;
    }

    .team-photo::after {
      content: "Foto a adicionar";
      position: absolute;
      bottom: 14px;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      opacity: 0.55;
      font-weight: 700;
    }

    .team-body {
      padding: 22px 22px 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .team-specialty {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gold-deep);
    }

    .team-body h3 {
      font-family: var(--ff-display);
      font-size: 20px;
      font-weight: 600;
      margin-top: 8px;
      color: var(--ink);
    }

    .team-credential {
      margin-top: 4px;
      font-size: 13px;
      color: var(--ink-soft);
    }

    .team-link {
      margin-top: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      padding-top: 16px;
      border-top: 1px solid var(--line-on-light);
    }

    .team-link svg {
      width: 14px;
      height: 14px;
      transition: transform .2s ease;
    }

    .team-card:hover .team-link svg {
      transform: translateX(4px);
    }

    /* ============================================================
   10. DEPOIMENTOS
=============================================================== */
    .testimonials-section {
      background: var(--stone-2);
    }

    .testimonial-note {
      font-size: 13px;
      color: var(--ink-soft);
      font-style: italic;
      margin-top: -30px;
      margin-bottom: 40px;
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    @media(max-width:900px) {
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
    }

    .testimonial-card {
      background: var(--paper);
      border-radius: var(--radius-md);
      padding: 30px 28px;
      position: relative;
      border: 1px solid var(--line-on-light);
    }

    .testimonial-tag {
      position: absolute;
      top: 18px;
      right: 18px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--green-deep);
      background: rgba(39, 89, 62, 0.10);
      padding: 5px 10px;
      border-radius: 100px;
    }

    .testimonial-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 16px;
    }

    .testimonial-stars svg {
      width: 15px;
      height: 15px;
      fill: var(--gold);
    }

    .testimonial-card p.quote {
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink);
    }

    .testimonial-author {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line-on-light);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink-soft);
    }

    /* ============================================================
   11. LOCALIZAÇÃO
=============================================================== */
    .location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    @media(max-width:900px) {
      .location-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
    }

    .location-photo-wrap {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    /* FOTO REAL DA FACHADA — Edifício Melina (enviada pelo cliente) */
    .location-photo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .location-badge {
      position: absolute;
      left: 22px;
      bottom: 22px;
      background: rgba(27, 23, 18, 0.82);
      backdrop-filter: blur(6px);
      color: var(--paper);
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line-on-dark);
    }

    .location-badge .b-title {
      font-family: var(--ff-display);
      font-size: 16px;
      font-weight: 600;
    }

    .location-badge .b-sub {
      font-size: 12px;
      color: var(--paper-soft);
      margin-top: 2px;
    }

    .location-info h2 {
      margin-top: 14px;
    }

    .location-list {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .location-item {
      display: flex;
      gap: 16px;
    }

    .location-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--stone-2);
      border: 1px solid var(--line-on-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .location-icon svg {
      width: 19px;
      height: 19px;
      stroke: var(--gold-deep);
    }

    .location-item h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }

    .location-item p {
      margin-top: 3px;
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.55;
    }

    /* placeholder: troque o endereço, telefone e horário pelos dados reais da Vitta */

    .location-map-wrap {
      margin-top: 30px;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--line-on-light);
      aspect-ratio: 16/8;
    }

    .location-map-wrap iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(0.15) contrast(1.02);
    }

    /* ============================================================
   12. FAQ
=============================================================== */
    .faq-list {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .faq-item {
      background: var(--paper);
      border: 1px solid var(--line-on-light);
      border-radius: var(--radius-md);
      padding: 6px 26px;
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 700;
      font-size: 16px;
      color: var(--ink);
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-plus {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      position: relative;
    }

    .faq-plus::before,
    .faq-plus::after {
      content: "";
      position: absolute;
      background: var(--gold-deep);
      transition: transform .3s ease;
    }

    .faq-plus::before {
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      transform: translateY(-50%);
    }

    .faq-plus::after {
      top: 0;
      left: 50%;
      width: 2px;
      height: 100%;
      transform: translateX(-50%);
    }

    .faq-item[open] .faq-plus::after {
      transform: translateX(-50%) rotate(90deg);
      opacity: 0;
    }

    .faq-answer {
      padding: 0 0 22px;
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--ink-soft);
      max-width: 62ch;
    }

    /* ============================================================
   13. CTA FINAL / AGENDAMENTO
=============================================================== */
    .cta-final {
      background: var(--espresso-1);
      color: var(--paper);
      position: relative;
      overflow: hidden;
    }

    .cta-final-grid {
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 56px;
      align-items: flex-start;
    }

    @media(max-width:940px) {
      .cta-final-grid {
        grid-template-columns: 1fr;
      }
    }

    .cta-final .section-title {
      color: var(--paper);
    }

    .cta-list {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .cta-list li {
      display: flex;
      gap: 12px;
      font-size: 15px;
      color: var(--paper-soft);
      align-items: flex-start;
    }

    .cta-list li svg {
      width: 18px;
      height: 18px;
      stroke: var(--green-light);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .booking-form {
      background: var(--espresso-2);
      border: 1px solid var(--line-on-dark);
      border-radius: var(--radius-lg);
      padding: 36px;
    }

    .booking-form h3 {
      font-family: var(--ff-display);
      font-size: 22px;
      font-weight: 600;
      color: var(--paper);
    }

    .booking-form p.form-sub {
      margin-top: 8px;
      font-size: 13.5px;
      color: var(--paper-soft);
      line-height: 1.6;
    }

    .form-row {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-row label {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--paper-soft);
      text-transform: uppercase;
    }

    .form-row input,
    .form-row select {
      background: var(--espresso-1);
      border: 1px solid var(--line-on-dark);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      color: var(--paper);
      font-family: inherit;
      font-size: 14.5px;
      outline: none;
      transition: border-color .2s ease;
    }

    .form-row input::placeholder {
      color: rgba(246, 239, 224, 0.35);
    }

    .form-row input:focus,
    .form-row select:focus {
      border-color: var(--gold);
    }

    .booking-form .btn {
      margin-top: 24px;
    }

    .form-legal {
      margin-top: 14px;
      font-size: 11.5px;
      color: var(--paper-soft);
      opacity: 0.7;
      line-height: 1.5;
    }

    /* ============================================================
   14. FOOTER
=============================================================== */
    .site-footer {
      background: var(--espresso-2);
      color: var(--paper-soft);
      padding: 76px 0 30px;
      border-top: 1px solid var(--line-on-dark);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
      gap: 40px;
    }

    @media(max-width:900px) {
      .footer-top {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media(max-width:560px) {
      .footer-top {
        grid-template-columns: 1fr;
      }
    }

    /* LOGO RODAPÉ — versão empilhada */
    .footer-brand img {
      height: 68px;
      width: auto;
      margin-bottom: 18px;
    }

    .footer-brand p {
      font-size: 13.5px;
      line-height: 1.7;
      max-width: 32ch;
      color: var(--paper-soft);
    }

    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 22px;
    }

    .footer-social a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--line-on-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .2s ease, background .2s ease;
    }

    .footer-social a:hover {
      border-color: var(--gold);
      background: rgba(198, 154, 76, 0.08);
    }

    .footer-social svg {
      width: 16px;
      height: 16px;
      stroke: var(--paper);
    }

    .footer-col h5 {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 20px;
    }

    /* verde como tom intermediário: a coluna do meio usa o acento verde */
    .footer-col.accent-green h5 {
      color: var(--green-light);
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-col a,
    .footer-col span {
      font-size: 14px;
      color: var(--paper-soft);
      transition: color .2s ease;
    }

    .footer-col a:hover {
      color: var(--gold-light);
    }

    .footer-col.accent-green a:hover {
      color: var(--green-light);
    }

    .footer-bottom {
      margin-top: 64px;
      padding-top: 26px;
      border-top: 1px solid var(--line-on-dark);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12.5px;
      color: var(--paper-soft);
      opacity: 0.75;
    }

    .footer-bottom a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ============================================================
   15. BOTÃO FLUTUANTE WHATSAPP
=============================================================== */
    .wa-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 400;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #25D366;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
      transition: transform .25s ease;
    }

    .wa-float:hover {
      transform: scale(1.08);
    }

    .wa-float svg {
      width: 28px;
      height: 28px;
      fill: #fff;
    }

    /* ============================================================
   16. SCROLL REVEAL
=============================================================== */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }


/* ================================================================
   CLASSES EXCLUSIVAS DAS PÁGINAS DE PROFISSIONAL
   (hero do profissional, cards de formação/atuação, galeria, chips
   de sintomas/cidades, citação em destaque, rodapé simples)
================================================================ */

/* ============================================================
   HERO DO PROFISSIONAL
=============================================================== */
.pro-hero{ background: var(--espresso-1); color: var(--paper); overflow:hidden; position:relative; }
.pro-hero-mark{
  position:absolute; right:-8%; top:-10%; width:520px; height:520px; opacity:0.5; pointer-events:none;
}
.pro-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center;
}
@media(max-width:900px){ .pro-hero-grid{ grid-template-columns:1fr; } }

.pro-photo-wrap{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--shadow-soft); border:1px solid var(--line-on-dark);
}
.pro-photo-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

.pro-name{
  font-family: var(--ff-display); font-weight:600; font-size: clamp(28px, 3.6vw, 42px);
  line-height:1.15; margin-top:16px;
}
.pro-specialty{
  margin-top:8px; font-size:16px; color: var(--gold-light); font-weight:600;
}
.pro-credential{
  margin-top:4px; font-size:14.5px; color: var(--paper-soft); font-weight:600; letter-spacing:0.02em;
}
.pro-tagline{
  margin-top:22px; font-size:17px; line-height:1.7; color: var(--paper-soft); max-width:50ch;
}
.pro-cta-row{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }

.pro-badges{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.pro-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:100px; border:1px solid var(--line-on-dark);
  background: rgba(246,239,224,0.04); font-size:13px; font-weight:600; color: var(--paper);
}
.pro-badge svg{ width:15px; height:15px; stroke: var(--gold-light); flex-shrink:0; }

/* ============================================================
   SEÇÕES DE CONTEÚDO
=============================================================== */
.section-head{ max-width:700px; margin-bottom:44px; }
h2.section-title{
  font-family: var(--ff-display); font-weight:600; font-size: clamp(26px, 3.2vw, 36px);
  line-height:1.15; margin-top:12px;
}
.section-lede{ margin-top:14px; font-size:16px; line-height:1.7; color: var(--ink-soft); max-width:64ch; }
section.on-dark .section-lede{ color: var(--paper-soft); }

.info-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:26px; }
@media(max-width:820px){ .info-grid{ grid-template-columns:1fr; } }

.info-card{
  background: var(--paper); border:1px solid var(--line-on-light); border-radius: var(--radius-md);
  padding:30px 28px;
}
section.on-dark .info-card{ background: var(--espresso-2); border-color: var(--line-on-dark); }
.info-card h3{
  font-family: var(--ff-display); font-size:19px; font-weight:600; color: var(--ink);
  display:flex; align-items:center; gap:12px;
}
section.on-dark .info-card h3{ color: var(--paper); }
.info-card h3 .ic{
  width:38px; height:38px; border-radius:10px; background: var(--gold-grad);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-card.accent-green h3 .ic{ background: var(--green-grad); }
.info-card h3 .ic svg{ width:18px; height:18px; stroke: var(--espresso-1); }
.info-card.accent-green h3 .ic svg{ stroke: var(--paper); }
.info-card ul{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.info-card li{ font-size:14.5px; line-height:1.6; color: var(--ink-soft); display:flex; gap:10px; }
section.on-dark .info-card li{ color: var(--paper-soft); }
.info-card li::before{
  content:""; width:6px; height:6px; margin-top:8px; flex-shrink:0;
  background: var(--gold-deep); clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
section.on-dark .info-card li::before{ background: var(--gold-light); }

/* chips (sintomas / procedimentos) */
.tag-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tag-chip{
  padding:9px 16px; border-radius:100px; background: var(--stone-2);
  border:1px solid var(--line-on-light); font-size:13.5px; font-weight:600; color: var(--ink-soft);
}
section.on-dark .tag-chip{ background: rgba(246,239,224,0.06); border-color: var(--line-on-dark); color: var(--paper-soft); }

/* nota de prevenção */
.note-box{
  margin-top:32px; padding:24px 26px; border-radius: var(--radius-md);
  background: rgba(230,201,134,0.08); border:1px solid var(--line-on-dark);
  font-size:14.5px; line-height:1.7; color: var(--paper-soft); max-width:78ch;
}
.note-box strong{ color: var(--gold-light); }

/* galeria de fotos */
.gallery-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media(max-width:640px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3;
  border:1px solid var(--line-on-light); box-shadow: var(--shadow-card);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; }

/* CTA final */
.cta-final{ background: var(--espresso-1); color: var(--paper); }
.cta-final-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  background: var(--espresso-2); border:1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  padding:40px;
}
.cta-final-inner h2{ font-family: var(--ff-display); font-size: clamp(22px,2.6vw,30px); font-weight:600; }
.cta-final-inner p{ margin-top:8px; color: var(--paper-soft); font-size:14.5px; max-width:44ch; }
.cta-final-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* voltar à equipe */
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  color: var(--gold-light); margin-bottom:8px;
}
.back-link svg{ width:15px; height:15px; }

/* ============================================================
   RODAPÉ SIMPLES (rodape.php, nas páginas de profissional)
   .site-footer e .footer-bottom já vêm definidos acima, no bloco
   compartilhado com o footer.php da home — aqui só as classes
   exclusivas do rodapé simples.
=============================================================== */
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
.footer-inner img{ height:52px; width:auto; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; }
.footer-links a{ font-size:13.5px; color: var(--paper-soft); }
.footer-links a:hover{ color: var(--gold-light); }

/* citação em destaque (felipe.php) */
.note-box strong{ color: var(--gold-light); }

/* citação em destaque */
.quote-block{
  margin-top:40px; padding:36px 38px; border-radius: var(--radius-lg);
  background: var(--paper); border:1px solid var(--line-on-light);
  position:relative; max-width:760px;
}
.quote-block::before{
  content:"“"; font-family: var(--ff-display); font-size:64px; line-height:1; color: var(--gold);
  position:absolute; top:12px; left:24px; opacity:0.5;
}
.quote-block p{
  font-family: var(--ff-display); font-style:italic; font-weight:500; font-size: clamp(18px, 2vw, 22px);
  line-height:1.5; color: var(--ink); padding-left:26px;
}

/* chips de cidades de atuação (davidmourao.php) */

/* área de atuação — chips de cidades */
.city-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.city-chip{
  padding:9px 16px; border-radius:100px; background: var(--stone-2);
  border:1px solid var(--line-on-light); font-size:13.5px; font-weight:600; color: var(--ink-soft);
}
.city-chip.main{ background: var(--gold-grad); color: var(--espresso-1); border-color:transparent; }