/* Color palette */
:root {
  /* Refined palette for a more sophisticated look */
  --color-background: #FAFAFA; /* soft off-white */
  --color-primary: #0077B6; /* sophisticated blue for CTAs and highlights */
  --color-secondary: #023E8A; /* deep blue for headings */
  --color-accent: #A86B6B; /* muted nude for secondary buttons */
  --color-light: #F9F9F9; /* very light grey for section backgrounds */
  --color-text: #333333; /* dark grey for readability */
  --color-highlight: #0077B6; /* use primary for highlights */
}

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

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  /* Prevent horizontal scrolling on small devices */
  overflow-x: hidden;
}

/* Top bar */
.top-bar {
  background-color: var(--color-secondary);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.3rem 0;
}

.top-bar-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.social-icons a {
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.social-icons a:hover {
  opacity: 0.8;
}

.social-icons svg {
  width: 24px;
  height: 24px;
}

/* Menu toggle button hidden by default; will appear on small screens */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  color: var(--color-secondary);
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

ul {
  list-style: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.site-header {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.divider {
  margin: 0 0.5rem;
  color: var(--color-accent);
}

.main-nav ul {
  display: flex;
  gap: 1.5rem;
}

.main-nav a {
  font-weight: 600;
  color: #fff;
  transition: color 0.2s;
}

  /* Highlight the agendamento link as a call-to-action in the header */
  .main-nav a.cta-link {
    background-color: var(--color-accent);
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
  }

  .main-nav a.cta-link:hover {
    background-color: var(--color-primary);
  }

.main-nav a:hover {
  color: var(--color-accent);
}

/* Hero Section */
.hero {
  background-color: var(--color-light);
  padding: 4rem 0;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.hero-text {
  max-width: 600px;
}

.hero-text h2 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--color-secondary);
}

.cta-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: var(--color-secondary);
}

/* The hero image replaces the icon in newer versions */
.hero-img {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img img {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Sections */
.section {
  padding: 3rem 0;
}

.alt-bg {
  background-color: var(--color-light);
}

h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Highlighted text in paragraphs and headings */
.highlight {
  color: var(--color-primary);
  font-weight: 600;
}

/* About Section */
.about-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}


/* When using real images in the about section */
.about-image img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.about-text {
  flex: 1;
}

.about-text h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

/* About list styles */
.about-list {
  margin-top: 1rem;
  list-style: none;
  padding-left: 0;
}

.about-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-text);
}

.about-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* Information Section */
/* Grid cards used in multiple sections */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background-color: var(--color-light);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  /* Add a subtle burgundy bar on top of each card to echo the site accent color */
  border-top: 4px solid var(--color-primary);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
  font-size: 1.2rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-top: 0.5rem;
}

/* Appointment Section */
.appointment-wrapper {
  text-align: center;
}

.appointment-wrapper h3 {
  color: var(--color-primary);
}

/* Form Section */
.form-section h3 {
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
}

.contact-form label {
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
}

.contact-form button {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.contact-form button:hover {
  background-color: var(--color-secondary);
}

/* Footer */
.site-footer {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 2rem 0;
  font-size: 0.9rem;
}

.footer-contact p {
  margin-bottom: 0.3rem;
}

/* FAQ */
.faq-section details {
  margin-bottom: 1rem;
  background-color: var(--color-light);
  border-radius: 6px;
  overflow: hidden;
}

.faq-section summary {
  list-style: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-secondary);
  position: relative;
}

.faq-section summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  font-weight: 700;
  transition: transform 0.2s;
}

.faq-section details[open] summary::after {
  content: '-';
}

.faq-section details p {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #ddd;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Steps (Como Funciona) */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.step {
  text-align: center;
  padding: 2rem;
  background-color: var(--color-background);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 4px solid var(--color-primary);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.step-icon svg {
  width: 64px;
  height: 64px;
}

.step h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
  font-size: 1.2rem;
}

.step p {
  font-size: 0.95rem;
}

/* Audience (Público-alvo) */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.audience-card {
  background-color: var(--color-light);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 4px solid var(--color-primary);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.audience-icon svg {
  width: 64px;
  height: 64px;
}

.audience-card h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
  font-size: 1.2rem;
}

.audience-card p {
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial {
  background-color: var(--color-background);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  font-style: italic;
  border-top: 4px solid var(--color-primary);
}

.testimonial .quote {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.testimonial .author {
  font-weight: 600;
  color: var(--color-secondary);
  text-align: right;
  font-style: normal;
}

/* Blog */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.blog-card {
  background-color: var(--color-light);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 4px solid var(--color-primary);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.blog-card h4 {
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
  font-size: 1.2rem;
}

.blog-card p {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.read-more {
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.2s;
}

.read-more:hover {
  color: var(--color-secondary);
}

/* Floating WhatsApp Button */
.whatsapp-floating {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
}

.whatsapp-floating a svg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Gallery Section */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Red accent divider used under section headings */
.red-divider {
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin: 0.5rem 0 1.5rem;
}

/* Generic CTA section wrapper */
.cta-after-section {
  text-align: center;
  margin: 2rem 0;
}

/* Secondary CTA button style (red/dark) */
.cta-button.secondary {
  background-color: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.cta-button.secondary:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

/* Blog category label */
.blog-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--color-accent);
  color: var(--color-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  /* Keep the header in a single row on tablets and mobiles to avoid taking too much vertical space */
  .header-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .about-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .contact-form button {
    width: 100%;
  }

  /* Show the menu toggle on small screens */
  .menu-toggle {
    display: block;
  }
  /* Hide the navigation by default; it will be toggled via JS */
  .main-nav {
    display: none;
    width: 100%;
    margin-top: 1rem;
  }
  .main-nav.open {
    display: block;
  }
  /* Stack nav links vertically */
  .main-nav ul {
    align-items: flex-start;
  }
  /* Reduce icon size in top bar */
  .social-icons svg {
    width: 20px;
    height: 20px;
  }
  /* Reduce logo size */
  .logo {
    font-size: 1.4rem;
  }

  /* Hide the top bar on smaller screens to maximize usable space */
  .top-bar {
    display: none;
  }
}

/* Extra small screens (e.g., smartphones) */
@media (max-width: 480px) {
  /* Reduce heading sizes for better readability */
  .hero-text h2 {
    font-size: 1.6rem;
  }
  .hero-text p {
    font-size: 0.95rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  /* Ensure call-to-action buttons span full width */
  .cta-button {
    display: block;
    width: 100%;
    text-align: center;
  }
  /* Adjust container padding on very small devices */
  .container {
    width: 95%;
  }

  /* Further scale down social icons and logo */
  .social-icons svg {
    width: 18px;
    height: 18px;
  }
  .logo {
    font-size: 1.2rem;
  }
  .menu-toggle {
    font-size: 1.5rem;
  }

  /* On very small screens, hide the top bar entirely */
  .top-bar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Formação e Reconhecimento (Trust) Section
   Presents institutional affiliations and qualifications in a horizontal grid
----------------------------------------------------------------------------*/
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.trust-item {
  flex: 1;
  min-width: 250px;
  text-align: center;
}

.trust-icon svg {
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
}

.titles-list {
  list-style: none;
  margin-top: 1rem;
}

.titles-list li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-secondary);
}

.titles-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.titles-list strong {
  color: var(--color-primary);
}

/* Gallery caption style */
.gallery-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-secondary);
}

/* Footer styling */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1rem;
}

/* Mobile CTA fixed at bottom of the viewport */
.mobile-cta {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0.5rem;
  z-index: 1000;
  display: none;
}

@media (max-width: 768px) {
  .mobile-cta {
    display: block;
  }
  /* Adjust spacing on small screens */
  .mobile-cta .cta-button {
    width: 90%;
  }
}

.footer-contact p {
  margin: 0.3rem 0;
}

.footer-contact a {
  color: var(--color-secondary);
}

.footer-social a {
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social svg {
  transition: transform 0.2s;
}

.footer-social a:hover svg {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .trust-grid,
  .footer-grid {
    flex-direction: column;
    align-items: center;
  }
  .footer-social a {
    margin: 0 0.5rem;
  }
}

/* ----------------------------------------------------------------------------
   Zigzag layout for informational cards
   To improve visual flow and break monotony, cards in the specialties, symptoms
   and differentiators sections alternate the position of their icon and text.
   On large screens, odd cards display icon left and text right, while even
   cards reverse the order. On mobile, the layout stacks vertically for
   readability.
*/

/* Base styles for cards in these sections */
.specialties-section .cards-grid .card,
.symptoms-section .cards-grid .card,
.differentiators-section .cards-grid .card {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Allow content to wrap inside the card so text flows nicely next to icons */
  flex-wrap: wrap;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Reverse layout for every second card */
.specialties-section .cards-grid .card:nth-child(even),
.symptoms-section .cards-grid .card:nth-child(even),
.differentiators-section .cards-grid .card:nth-child(even) {
  flex-direction: row-reverse;
}

/* Ensure icons keep their size and don’t shrink */
.card .icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .icon-wrapper svg {
  width: 64px;
  height: 64px;
}

/* Hover effect on cards for subtle microinteraction */
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  /* Stack content vertically on tablets and mobiles */
  .specialties-section .cards-grid .card,
  .symptoms-section .cards-grid .card,
  .differentiators-section .cards-grid .card {
    flex-direction: column !important;
    text-align: center;
  }
  /* Add spacing below icon on small screens */
  .card .icon-wrapper {
    margin-bottom: 1rem;
  }
}