/* ==========================================================================
    0. CSS Pure Toggle Hacks (replaces JS)
   ========================================================================== */
.css-toggle-checkbox,
.help-checkbox {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
}

/* High Contrast Toggle - CSS Pure */
.contrast-label {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  cursor: pointer;
  font-size: 18px;
  color: var(--brand-teal);
  background: rgba(255,255,255,0.9);
  border: 2px solid var(--brand-teal);
  border-radius: 50%;
  line-height: 1;
  padding: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.contrast-label:hover {
  background: var(--brand-teal);
  color: #fff;
  transform: scale(1.05);
}



/* Help Button - CSS Pure Dropdown */.help-label {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 9999;
  width: 38px;
  height: 38px;
  background-color: var(--brand-coral);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border: 2px solid var(--brand-coral);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.help-label:hover {
  background-color: #fff;
  color: var(--brand-coral);
  transform: scale(1.05);
}

.help-dropdown {
  position: fixed;
  top: 55px;
  right: 15px;
  z-index: 10000;
  width: 320px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  background-color: var(--container-bg, #fff);
  border: 2px solid var(--border-color, #ccc);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.help-checkbox:checked ~ .help-dropdown {
  max-height: 500px;
  opacity: 1;
  padding: 15px;
}


  .help-content {
    max-height: 420px; /* limits height inside dropdown */
    overflow: auto;    /* allow scrolling but hide native scrollbars below */
    padding: 0;
    scroll-behavior: smooth;

    /* Hide scrollbars while preserving scroll functionality */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
  .help-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }


.help-content h4 {
  margin: 0 0 10px 0;
  color: var(--heading-color, #333);
}

.help-content h5 {
  margin: 10px 0 5px 0;
  color: var(--heading-color, #333);
}

.help-content p, .help-content li {
  font-size: 14px;
  color: var(--paragraph-color, #555);
}

.help-content ul {
  padding-left: 20px;
}

.help-content hr {
  margin: 10px 0;
  border-color: var(--border-color, #ccc);
}

/* High Contrast Mode - Buttons */
body.high-contrast .contrast-label {
  background: var(--hc-bg-color);
  color: var(--hc-button-bg);
  border-color: var(--hc-button-bg);
}
body.high-contrast .contrast-label:hover {
  background: var(--hc-button-bg);
  color: var(--hc-bg-color);
}
body.high-contrast .help-label {
  background: var(--hc-bg-color);
  color: var(--hc-button-bg);
  border-color: var(--hc-button-bg);
}
body.high-contrast .help-label:hover {
  background: var(--hc-button-bg);
  color: var(--hc-bg-color);
}

body.high-contrast .help-dropdown {
  background-color: var(--hc-container-bg);
  border-color: var(--hc-border-color);
}

body.high-contrast .help-content h4,
body.high-contrast .help-content h5 {
  color: var(--hc-heading-color);
}

body.high-contrast .help-content p,
body.high-contrast .help-content li {
  color: var(--hc-paragraph-color);
}

body.high-contrast .help-content hr {
  border-color: var(--hc-border-color);
}

/* Mobile Menu Toggle - CSS Pure */
.mobile-menu-button {
  display: none;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 12px;
  font-size: 1.5em;
  cursor: pointer;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1002;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--container-shadow);
}

.mobile-menu-button span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--text-color, #333);
  position: relative;
  border-radius: 2px;
}

.mobile-menu-button span::before,
.mobile-menu-button span::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 2.5px;
  background: var(--text-color, #333);
  left: 0;
  border-radius: 2px;
}

.mobile-menu-button span::before {
  top: -9px;
}

.mobile-menu-button span::after {
  top: 9px;
}

/* Hamburger to X when checked */
#mobile-menu-toggle:checked ~ .mobile-menu-button span {
  background: transparent;
}

#mobile-menu-toggle:checked ~ .mobile-menu-button span::before {
  top: 0;
  transform: rotate(45deg);
}

#mobile-menu-toggle:checked ~ .mobile-menu-button span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .mobile-menu-button {
    display: none !important;
  }
}

/* Mobile only */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .main-header {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .main-header-controls {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .nav-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .nav-container img {
    max-width: 90vw !important;
    height: auto;
  }
  
  .nav-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .main-nav {
    width: 100%;
    max-width: 100%;
    display: none;
  }
  
  .main-nav ul {
    padding: 0 10px;
    box-sizing: border-box;
  }
  
  .mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .css-toggle-checkbox#mobile-menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}

.mobile-menu-wrapper {
  display: none;
}

/* Show menu when checkbox is checked - sibling selector */
#mobile-menu-toggle:checked ~ .mobile-menu-wrapper {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: color-mix(in srgb, var(--text-color) 60%, transparent);
  backdrop-filter: blur(6px);
  z-index: 1001;
  overflow-y: auto;
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu {
  padding: 80px 24px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--container-bg);
  border-radius: 24px 24px 0 0;
  margin-top: auto;
  max-height: 85vh;
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu li {
  margin-bottom: 4px;
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a {
  color: var(--text-color, #333);
  text-decoration: none;
  font-size: 1.15em;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a i {
  width: 22px;
  text-align: center;
  font-size: 1.1em;
  color: var(--brand-teal, #0d9488);
}

#mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a:hover {
  background: var(--hover-bg, rgba(0,0,0,0.05));
}

/* Close button inside menu */
.mobile-menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: var(--text-color, #333);
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  line-height: 1;
}

.mobile-menu-close:hover {
  background: var(--hover-bg, rgba(0,0,0,0.05));
}

@media (min-width: 768px) {
  .mobile-menu-button,
  .mobile-menu-wrapper {
    display: none !important;
  }
}

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

  .mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   CSS Pure Carousel - Photo Banner
   ========================================================================== */
.photobanner-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.photobanner-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.photobanner-slide {
  min-width: 100%;
  display: none;
}

.photobanner-slide:first-child,
.photobanner-slide.active {
  display: block;
}

.photobanner-slide img {
  width: 100%;
  height: auto;
}

/* Radio-based CSS Carousel */
.photobanner-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.photobanner-radio:nth-child(1):checked ~ .photobanner-slides {
  transform: translateX(0);
}

.photobanner-radio:nth-child(2):checked ~ .photobanner-slides {
  transform: translateX(-100%);
}

.photobanner-radio:nth-child(3):checked ~ .photobanner-slides {
  transform: translateX(-200%);
}

.photobanner-radio:nth-child(4):checked ~ .photobanner-slides {
  transform: translateX(-300%);
}

.photobanner-radio:nth-child(5):checked ~ .photobanner-slides {
  transform: translateX(-400%);
}

/* Controls visibility based on radio */
.photobanner-radio:nth-child(1):checked ~ .photobanner-dots .dot:nth-child(1),
.photobanner-radio:nth-child(2):checked ~ .photobanner-dots .dot:nth-child(2),
.photobanner-radio:nth-child(3):checked ~ .photobanner-dots .dot:nth-child(3),
.photobanner-radio:nth-child(4):checked ~ .photobanner-dots .dot:nth-child(4),
.photobanner-radio:nth-child(5):checked ~ .photobanner-dots .dot:nth-child(5) {
  background-color: var(--brand-teal);
}

/* CSS Auto-play Carousel Animation */
@keyframes carouselSlide {
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  70% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.carousel-autoplay .photobanner-slides {
  animation: carouselSlide 15s infinite;
}

.carousel-autoplay .photobanner-slide {
  display: block;
}

/* CSS Pure Toggle Details */
.toggle-details-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-details-checkbox:checked ~ .hidden {
  display: table-cell !important;
}

/* CSS Pure Show/Hide */
.css-show {
  display: none;
}

.css-toggle-checkbox-input {
  position: absolute;
  opacity: 0;
}

.css-toggle-checkbox-input:checked ~ .css-show {
  display: block;
}

.css-toggle-checkbox-input:not(:checked) ~ .css-hide {
  display: none;
}

/* CSS Pure Accordion */
.accordion-checkbox {
  position: absolute;
  opacity: 0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-checkbox:checked ~ .accordion-content {
  max-height: 500px;
}

.accordion-icon::after {
  content: '\+';
  transition: transform 0.3s;
}

.accordion-checkbox:checked ~ .accordion-icon::after {
  content: '\-';
  transform: rotate(180deg);
}

/* ==========================================================================
   1. Base Styles & Variables
   ========================================================================== */
:root {
  /* --- Nova Paleta de Cores Landing Page Moderna --- */
  --brand-teal: #0d9488;        /* cor primária (teal escuro) */
  --brand-teal-dark: #0f766e;   /* hover */
  --brand-teal-light: #14b8a6;  /* destaque claro */
  --brand-coral: #f97316;       /* laranja vibrante / headings */
  --brand-coral-2: #ea580c;     /* alternativa laranja */
  --brand-purple: #8b5cf6;       /* roxo para acentos */
  --brand-pink: #ec4899;        /* pink para highlights */
  --brand-blue: #0ea5e9;        /* azul cielo */
  --brand-blue-dark: #0284c7;   /* azul cielo escuro */
  
  /* Semantic aliases */
  --primary: var(--brand-teal);
  --primary-hover: var(--brand-teal-dark);
  --danger: #dc3545;
  --danger-hover: #c82333;
  --success: #28a745;
  --success-hover: #218838;
  --warning: #ffc107;
  --warning-hover: #e0a800;
  --info: var(--brand-blue);
  
  --bg-color: #f8fafc;          /* page background suave */
  --bg-alt: #e2e8f0;           /* background alternativo */
  --text-color: #1e293b;       /* texto principal escuro */
  --text-muted: #64748b;       /* alias para muted-color */
  --muted-color: #64748b;      /* textos secundários */
  --container-bg: #ffffff;     /* cards e containers */
  --container-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --container-border: #e2e8f0;
  --card-bg: var(--container-bg);
  --hover-bg: rgba(0,0,0,0.05);
  --alternate-bg: var(--bg-alt);
  
  --heading-color: var(--brand-coral);
  --paragraph-color: var(--text-color);
  
  --link-color: var(--brand-teal);
  --link-hover-decoration: underline;
  
  --border-color: #e2e8f0;
  --table-header-bg: #f1f5f9;
  
  --nav-bg: #0d9488;
  --nav-text: #ffffff;
  --nav-gradient: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
  
  --footer-bg: linear-gradient(135deg, #1e293b, #334155);
  --footer-text: #e2e8f0;
  
  --input-bg: #ffffff;
  --input-text: #1e293b;
  --input-border: #cbd5e1;
  
  --button-bg: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
  --button-text: #ffffff;
  --button-hover-bg: linear-gradient(135deg, var(--brand-teal-dark), #0f5950);
  
  /* Variáveis de Alto Contraste */
  --hc-bg-color: #000000;
  --hc-text-color: #ffffff;
  --hc-container-bg: #121212;
  --hc-container-shadow: rgba(255,255,255,0.12);
  --hc-container-border: #ffffff22;
  --hc-heading-color: #ffffff;
  --hc-paragraph-color: #e6e6e6;
  --hc-link-color: #22d3ee;
  --hc-link-hover-decoration: underline;
  --hc-border-color: #444444;
  --hc-table-header-bg: #222222;
  --hc-nav-bg: #000000;
  --hc-nav-text: #ffffff;
  --hc-footer-bg: #000000;
  --hc-footer-text: #bbbbbb;
  --hc-input-bg: #1e1e1e;
  --hc-input-text: #ffffff;
  --hc-input-border: #555555;
  --hc-input-placeholder: #9a9a9a;
  --hc-button-bg: #0d9488;
  --hc-button-text: #ffffff;
  --hc-button-hover-bg: #0f766e;
  --hc-primary: #22d3ee;
  --hc-primary-hover: #67e8f9;
  --hc-danger: #ff4444;
  --hc-danger-hover: #ff6666;
  --hc-success: #44ff44;
  --hc-success-hover: #66ff66;
  --hc-warning: #ffff44;
  --hc-warning-hover: #ffff66;
  --hc-info: #44ddff;
  --hc-muted-color: #bbbbbb;
  --hc-alternate-bg: #1a1a1a;
  --hc-hover-bg: rgba(255,255,255,0.1);
}
 
 body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.6;
 }
 
 /* ==========================================================================
    2. High Contrast Mode
    ========================================================================== */
 body.high-contrast {
    --bg-color: var(--hc-bg-color);
    --text-color: var(--hc-text-color);
    --text-muted: var(--hc-muted-color);
    --muted-color: var(--hc-muted-color);
    --container-bg: var(--hc-container-bg);
    --container-shadow: var(--hc-container-shadow);
    --container-border: var(--hc-container-border);
    --card-bg: var(--hc-container-bg);
    --hover-bg: var(--hc-hover-bg);
    --alternate-bg: var(--hc-alternate-bg);
    --heading-color: var(--hc-heading-color);
    --paragraph-color: var(--hc-paragraph-color);
    --link-color: var(--hc-link-color);
    --link-hover-decoration: var(--hc-link-hover-decoration);
    --border-color: var(--hc-border-color);
    --table-header-bg: var(--hc-table-header-bg);
    --nav-bg: var(--hc-nav-bg);
    --nav-text: var(--hc-nav-text);
    --nav-gradient: var(--hc-nav-bg);
    --footer-bg: var(--hc-footer-bg);
    --footer-text: var(--hc-footer-text);
    --input-bg: var(--hc-input-bg);
    --input-text: var(--hc-input-text);
    --input-border: var(--hc-input-border);
    --input-placeholder: var(--hc-input-placeholder);
    --button-bg: var(--hc-button-bg);
    --button-text: var(--hc-button-text);
    --button-hover-bg: var(--hc-button-hover-bg);
    --primary: var(--hc-primary);
    --primary-hover: var(--hc-primary-hover);
    --danger: var(--hc-danger);
    --danger-hover: var(--hc-danger-hover);
    --success: var(--hc-success);
    --success-hover: var(--hc-success-hover);
    --warning: var(--hc-warning);
    --warning-hover: var(--hc-warning-hover);
    --info: var(--hc-info);
  }
 
  /* Specific component styles for High Contrast */
  body.high-contrast .btn-primary {
    background-color: var(--hc-button-bg);
    border-color: var(--hc-button-bg);
    color: var(--hc-button-text);
  }
  body.high-contrast .btn-primary:hover {
    background-color: var(--hc-button-hover-bg);
    border-color: var(--hc-button-hover-bg);
  }
  
  body.high-contrast .btn-secondary {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
  }
  body.high-contrast .btn-secondary:hover {
    background-color: #4e555b;
    border-color: #484e53;
  }
  
  body.high-contrast .btn-outline-secondary {
      color: var(--hc-muted-color);
      border-color: var(--hc-input-border);
  }
  body.high-contrast .btn-outline-secondary:hover {
      background-color: var(--hc-alternate-bg);
      color: var(--hc-text-color);
  }
 
 body.high-contrast label,
 body.high-contrast .form-label {
     color: var(--hc-heading-color);
 }
 
 body.high-contrast .form-control {
   background-color: var(--hc-input-bg);
   color: var(--hc-input-text);
   border: 1px solid var(--hc-input-border);
 }
 
 body.high-contrast .form-control::placeholder {
   color: var(--hc-input-placeholder);
   opacity: 1;
 }
 
 body.high-contrast fieldset {
     border-color: var(--hc-border-color);
 }
 
  body.high-contrast #image-preview-container {
    background-color: var(--hc-container-bg);
    border-color: var(--hc-input-border);
  }
  
  body.high-contrast #preview-placeholder {
      color: var(--hc-input-placeholder);
  }
  
  body.high-contrast th {
      color: var(--hc-heading-color);
  }
  body.high-contrast .table td {
    color: var(--hc-text-color);
  }
  
  body.high-contrast .card {
    background-color: var(--hc-container-bg);
    border-color: var(--hc-border-color);
    box-shadow: 0 2px 5px var(--hc-container-shadow);
    color: var(--hc-text-color);
  }
  body.high-contrast .card-header {
      background-color: var(--hc-alternate-bg);
      border-bottom-color: var(--hc-border-color);
  }
  body.high-contrast .card-title {
      color: var(--hc-heading-color);
  }
  
  body.high-contrast .alert-primary {
      background-color: var(--hc-alternate-bg);
      color: var(--hc-heading-color);
      border-color: var(--hc-primary);
  }
  body.high-contrast .alert-success {
      background-color: var(--hc-alternate-bg);
      color: var(--hc-heading-color);
      border-color: var(--hc-success);
  }
  
  body.high-contrast ul.list-checked li::before {
      color: var(--hc-success);
  }
  
body.high-contrast .text-muted {
    color: var(--hc-muted-color);
}

body.high-contrast #mobile-menu-toggle:checked ~ .mobile-menu-wrapper {
    background: var(--hc-text-color);
    border-left: 3px solid var(--hc-bg-color);
}

body.high-contrast #mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a {
    color: var(--hc-bg-color);
    border-bottom: 1px solid var(--hc-border-color);
}

body.high-contrast #mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a i {
    color: var(--hc-bg-color);
}

body.high-contrast #mobile-menu-toggle:checked ~ .mobile-menu-wrapper .mobile-menu a:hover {
    background: var(--hc-hover-bg);
}

body.high-contrast .mobile-menu-close {
    color: var(--hc-bg-color);
}

body.high-contrast .mobile-menu-close:hover {
    background: var(--hc-hover-bg);
}

body.high-contrast .photobanner-radio:nth-child(1):checked ~ .photobanner-dots .dot:nth-child(1),
body.high-contrast .photobanner-radio:nth-child(2):checked ~ .photobanner-dots .dot:nth-child(2),
body.high-contrast .photobanner-radio:nth-child(3):checked ~ .photobanner-dots .dot:nth-child(3),
body.high-contrast .photobanner-radio:nth-child(4):checked ~ .photobanner-dots .dot:nth-child(4),
body.high-contrast .photobanner-radio:nth-child(5):checked ~ .photobanner-dots .dot:nth-child(5) {
  background-color: var(--hc-link-color);
}

body.high-contrast .dot.active {
  background-color: var(--hc-link-color);
}

body.high-contrast .news-carousel-dots .dot.active {
  background-color: var(--hc-link-color);
}

body.high-contrast .news-carousel-dots .dot {
  background-color: var(--hc-muted-color);
}

body.high-contrast .news-carousel-control {
  color: var(--hc-heading-color);
}

body.high-contrast .phone-input:focus {
  border-color: var(--hc-link-color);
  box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.25);
}

 /* ==========================================================================
    3. Layout Elements (Header, Nav, Footer, Container)
     ========================================================================== */
header {
    text-align: center;
    margin-bottom: 30px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

.main-header {
  max-width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
 }
 .main-header-controls {
    margin: 0px auto;
    margin-top:30px;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: var(--bg-color);   
  }
  .main-header-controls .logo {
   /* Styles for your logo/site title area */
   display: flex;
   align-items: center;
 }
 .main-header-controls .logo img {
    height: 50px; /* Adjust as needed */
    margin-right: 10px;
    max-width: 100%;
  }
 .main-header-controls .logo span {
   font-size: 1.5em;
   font-weight: bold;
   color: var(--heading-color); /* Use heading color for site title */
 }
 .main-header-controls .controls {
   /* Container for buttons like High Contrast Toggle */
   display: flex;
   align-items: center;
   gap: 10px; /* Space between controls */
 }
 
nav.main-nav {
    background: var(--nav-gradient);
    color: var(--nav-text);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
 nav.main-nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: center;
 }
 nav.main-nav li {
   display: inline;
   margin: 0 15px;
 }
 nav.main-nav a {
   color: var(--nav-text);
   text-decoration: none;
 }
 nav.main-nav a:hover {
   text-decoration: var(--link-hover-decoration);
 }
 
 .nav-container { /* Specific for header logo/text area */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .nav-container img {  
    height: auto;  
    width: auto; /* Let image size naturally or set a max-width */
    max-width: 100%;
    max-height: 150px;
    margin-bottom: 0.5rem; /* Space between image and text */
  }
 .nav-container span {
   font-weight: bold;
   font-size: larger;
   text-align: center;
 }
 
 .container {
   max-width: 800px;
   margin: 20px auto;
   background-color: var(--container-bg);
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px var(--container-shadow);
   border: 1px solid var(--container-border);
 }
 
footer {
   text-align: center;
   margin-top: 20px;
   padding: 20px;
   background-color: var(--footer-bg);
   color: var(--footer-text);
   min-height: 30px;
   border-top: 1px solid var(--border-color);
 }
 footer img {
   display: inline;
   vertical-align: middle;
 }
 
 /* ==========================================================================
    4. Typography (Headings, Paragraphs, Links)
    ========================================================================== */
 h1, h2, h3, h4, h5, h6 {
   color: var(--heading-color);
   margin-top: 1.5em;
   margin-bottom: 0.5em;
 }
 h1 { font-size: 2.5em; }
 h2 { font-size: 2em; }
 h3 { font-size: 1.75em; }
 
 p {
   color: var(--paragraph-color);
   margin-bottom: 1em;
 }
 
 a {
   color: var(--link-color);
   text-decoration: none;
 }
 a:hover {
   text-decoration: var(--link-hover-decoration);
 }
 
 hr {
     border: 0;
     border-top: 1px solid var(--border-color);
     margin: 1.5em 0;
 }
 
 /* ==========================================================================
    5. Components (Buttons, Forms, Tables, Cards, Alerts, Lists, etc.)
    ========================================================================== */
 
 /* --- Buttons --- */
 .button { /* Generic .button class */
   display: inline-block;
   padding: 10px 15px;
   background-color: var(--button-bg);
   color: var(--button-text);
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   transition: background-color 0.15s ease-in-out;
 }
.button:hover {
    background-color: var(--button-hover-bg);
    text-decoration: none;
  }

  .btn-submit-form {
    background-color: var(--primary);
    color: white;
    font-weight: bold;
  }
  .btn-submit-form:hover {
    background-color: var(--primary-hover);
  }

.btn-cancelar {
     background-color: var(--danger);
     color: white;
   }
   .btn-cancelar:hover {
     background-color: var(--danger-hover);
   }

   .button-group {
     display: flex;
     gap: 1rem;
     margin-top: 1rem;
   }
 
 /* --- Forms --- */
 label,
 .form-label {
   font-weight: bold;
   display: block;
   margin-bottom: 0.5rem;
   color: var(--heading-color);
 }
 
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="url"],
 textarea,
 select {
   width: 100%;
   padding: 0.375rem 0.75rem;
   margin-bottom: 1rem;
   border: 1px solid var(--input-border);
   border-radius: 0.25rem;
   box-sizing: border-box; /* Important for width and padding */
   background-color: var(--input-bg);
   color: var(--input-text);
   line-height: 1.5;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 input:focus, textarea:focus, select:focus { /* General focus style */
     outline: none;
     border-color: var(--link-color); /* Or a specific focus color variable */
     box-shadow: 0 0 0 0.2rem rgba(var(--link-color), 0.25); /* Example focus ring */
 }
 
 
 fieldset {
   padding: 1em;
   margin-bottom: 1rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
 }
 
/* Image Preview Area */
#image-preview-container {
   border: 2px dashed var(--border-color);
   padding: 1rem;
   text-align: center;
   margin-bottom: 1rem;
   min-height: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--container-bg);
 }
 #preview-placeholder {
     color: var(--paragraph-color);
 }
 
 /* --- Tables --- */
 table { /* Base styles for <table> element */
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1rem;
   background-color: var(--container-bg);
 }
 th, td {
   padding: 0.75rem;
   border: 1px solid var(--border-color);
   text-align: left;
   vertical-align: top;
 }
 th {
   background-color: var(--table-header-bg);
   font-weight: bold;
   color: var(--heading-color);
 }
 /* Styles for .table class (if used alongside Bootstrap or for specific tables) */
 .table { /* This class might be redundant if you style <table> directly and consistently */
     /* If Bootstrap CSS is linked, these might conflict or be unnecessary */
     /* color: #212529; */
     /* background-color: transparent; */
 }
 .table th,
 .table td {
     white-space: nowrap; /* Use with caution, can break layout */
 }
 
 
 /* --- Cards --- */
 .card {
   border: 1px solid var(--border-color);
   border-radius: 5px;
   margin-bottom: 20px;
   box-shadow: 0 2px 5px var(--container-shadow);
   background-color: var(--container-bg);
   overflow: hidden;
 }
 .card-header {
   background-color: var(--table-header-bg);
   padding: 0.75rem 1.25rem;
   border-bottom: 1px solid var(--border-color);
 }
 .card-body {
   padding: 1.25rem;
 }
 .card-title {
   margin-bottom: 0.75rem;
   font-size: 1.25rem;
   font-weight: 500;
   color: var(--heading-color);
 }
 
 .alert {
   justify-content: space-between;
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid black;
   animation-name: fadeOutAlert;
   animation-duration: 0.5s; /* Duração do fade out */
   animation-delay: 5s;    /* Espera 5 segundos antes de começar */
   animation-fill-mode: forwards; /* Mantém o estado final da animação */
   animation-timing-function: ease-in-out;
 }
 
 @keyframes fadeOutAlert {
   from {
     opacity: 1;
     transform: translateY(0); /* Opcional: para um leve movimento ao sumir */
   }
   to {
     opacity: 0;
     transform: translateY(-20px); /* Opcional: move para cima ao sumir */
     /* Para realmente esconder e tornar não clicável após a animação */
     visibility: hidden;
     height: 0; /* Colapsa a altura */
     padding-top: 0;
     padding-bottom: 0;
     margin-bottom: 0; /* Remove a margem para não ocupar espaço */
     border: 0; /* Remove a borda */
   }
 }
 
 /* Exemplo de uso no seu HTML (você já tem isso) */
 /*
 <div class="alert alert-success" role="alert">
   Mensagem de sucesso!
 </div>
 
 <div class="alert alert-danger" role="alert">
   Mensagem de erro!
 </div>
 */
 
 
 /* --- Lists --- */
 ul, ol {
     padding-left: 2em;
     margin-bottom: 1rem;
 }
 ul.list-unstyled {
   list-style: none;
   padding-left: 0;
 }
 ul.list-checked {
   list-style: none;
   padding-left: 0;
 }
 ul.list-checked li {
   position: relative;
   padding-left: 1.5em;
   margin-bottom: 5px;
 }
ul.list-checked li::before {
   content: "✓";
   color: var(--brand-teal-dark);
   position: absolute;
   left: 0;
 }
 
 /* --- Adotante Details Specific Styles --- */
 .adotante-details-row td {
   padding: 0 !important; /* Remove padding for full-width inner div */
 }
.adotante-details-row .p-3 { /* Content inside expanded row */
  background-color: var(--container-bg);
  border-top: 1px solid var(--border-color);
 }
 .action-buttons button, .action-buttons a {
   min-width: 80px; 
   margin-bottom: 0.25rem; 
   margin-right: 0.25rem;
 }
 .action-buttons form {
   margin-right: 0.25rem; /* Align delete button form */
   display: inline-block; /* Ensure forms are inline if multiple */
 }
 .details-sub-table td {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   vertical-align: top; 
 }
  .details-sub-table strong {
    color: var(--text-color);
  }
 
/* --- Horizontal Scroll for Historias --- */
 .historias-scroll-container {
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom: 1rem;
   font-size: 0; /* Fix for inline-block spacing */
 }
 .historias-scroll-container .card-item { /* Assuming .card-item is used for individual story cards */
   display: inline-block;
   width: 300px; /* Or your preferred card width */
   margin-right: 10px;
   white-space: normal;
   vertical-align: top;
   font-size: 1rem; /* Reset font size for card content */
   /* Ensure .card-item has its own card styling (border, padding, etc.)
      or inherits from a global .card style if applicable */
 }
 .historias-scroll-container .card-item:last-child {
   margin-right: 0;
 }
 
 /* --- Voluntarios Section (Sobre Page) --- */
 .voluntarios-carousel-container {
   position: relative;
 }
 
 .voluntarios-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    scroll-behavior: smooth; /* Habilita a rolagem suave via JS */
    padding-bottom: 1rem; /* Espaço para a barra de rolagem, se visível */
    /* Esconde a barra de rolagem para um visual mais limpo, mas mantém a funcionalidade */
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
 }
 
 .voluntarios-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
 }
 
 .voluntario-card {
    flex: 0 0 280px; /* Não cresce, não encolhe, base de 280px */
    width: 280px;
    box-shadow: 0 2px 5px var(--container-shadow);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--container-bg);
 }
 
 .voluntario-card .card-body {
    padding: 1rem; /* Preenchimento um pouco menor */
 }
 .voluntario-card .card-title { font-size: 1.1rem; }
 .voluntario-card .card-subtitle { font-size: 0.9rem; }
 .voluntario-card .card-text { font-size: 0.9rem; margin-top: 0.5rem; }
 .voluntario-card .blockquote { font-size: 0.9rem; padding-left: 1rem; border-left: 3px solid var(--border-color); }
 
 .voluntarios-carousel-control {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(255, 255, 255, 0.9);
   color: var(--text-color);
   border: 1px solid var(--border-color);
   padding: 0;
   font-size: 1.5rem;
   font-weight: bold;
   cursor: pointer;
   z-index: 10;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   box-shadow: 0 2px 5px var(--container-shadow);
   transition: background-color 0.2s, box-shadow 0.2s;
 }
 
 .voluntarios-carousel-control:hover,
 .voluntarios-carousel-control:focus {
   background-color: #fff;
   box-shadow: 0 4px 8px var(--container-shadow);
   outline: none;
 }
 
 .voluntarios-carousel-control.prev {
   left: -20px;
 }
 
 .voluntarios-carousel-control.next {
   right: -20px;
 }
 
 /* --- Login Container --- */
 .login-container {
   background-color: var(--container-bg); /* Use variable */
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px var(--container-shadow); /* Use variable */
   max-width: 400px; /* Example max-width for login forms */
   margin: 2rem auto; /* Center it */
 }
 .login-container h2 {
   text-align: center;
   margin-bottom: 20px;
   color: var(--heading-color);
 }
 /* Label, input, button styles within .login-container should ideally
    inherit from global styles or .form-label, .form-control, .btn.
    Override only if necessary. */
 
 /* --- Cookie Consent Banner --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
   background-color: color-mix(in srgb, var(--brand-teal-dark) 92%, transparent);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
  }
.cookie-consent-banner p {
    margin: 0;
    flex-grow: 1;
    text-align: left;
    color: white; /* Ensure text is white on dark background */
    word-wrap: break-word;
    word-break: break-word;
  }
  .cookie-consent-banner button { /* Style for the accept button */
    padding: 8px 15px;
    cursor: pointer;
    background-color: var(--button-bg); /* Green, consider a variable */
    color: var(--button-text);
    border: none;
    border-radius: 4px;
  }
  
  /* Responsive adjustments for cookie banner */
  @media (max-width: 768px) {
    .cookie-consent-banner {
      padding: 10px 15px;
      gap: 10px;
      flex-wrap: wrap;
    }
    .cookie-consent-banner p {
      font-size: 0.9em;
      word-wrap: break-word;
    }
    .cookie-consent-banner button {
      padding: 6px 10px;
      font-size: 0.85em;
    }
  }
  
  @media (max-width: 480px) {
    .cookie-consent-banner {
      padding: 8px 12px;
      gap: 8px;
      flex-direction: column;
    }
    .cookie-consent-banner p {
      font-size: 0.85em;
      margin-bottom: 8px;
      word-wrap: break-word;
      text-align: center;
    }
    .cookie-consent-banner button {
      padding: 5px 8px;
      font-size: 0.8em;
    }
  }
 
 /* ==========================================================================
    6. Images & Fixed Height Image Containers
    ========================================================================== */
 img {
   max-width: 100%;
   height: auto;
   display: block;
 }
 
 .img-fluid-rounded { /* Corrected typo from rouded to rounded */
   width: 200px; /* This makes it not "fluid" in the Bootstrap sense */
   height: 200px;
   border-radius: 50%;
   object-fit: cover;
 }
 
 .noticia-img-fixed-height,
 .historia-img-fixed-height,
 .procura-img-fixed-height {
     height: 200px;
     object-fit: cover;
     width: 100%;
 }
 
 .adocao-img { /* For adoption photobanner */
     height: 300px; /* Or max-height: 400px; as previously */
     object-fit: cover;
     width: 100%;
 }
 
 /* ==========================================================================
    7. Utilities (Text Alignment, Spacing, Responsive Tables)
    ========================================================================== */
 .text-center { text-align: center; }
 .text-left   { text-align: left; }
 .text-right  { text-align: right; }
 
.text-muted {
  color: var(--muted-color);
  opacity: 1;
}
 
 /* Spacing Utilities - Add !important only if strictly necessary to override other styles */
 .mt-2 { margin-top: 10px; }
 .mt-3 { margin-top: 15px; }
 .mt-4 { margin-top: 20px; }
 .mb-2 { margin-bottom: 10px; }
 .mb-3 { margin-bottom: 15px; }
 .mb-4 { margin-bottom: 20px; }
 .mb-5 { margin-bottom: 25px; }
 
 .table-responsive {
     width: 100%;
     overflow-x: auto;
 }
 /* .table-responsive:hover { overflow-x: auto; } /* This is redundant */
 
 /* ==========================================================================
    8. Grid System (Placeholder - Use Bootstrap's or complete this)
    ========================================================================== */
 /*
     If you are including the Bootstrap CSS file,
     you DO NOT need to redefine grid classes (.row, .col-*) here.
     Remove them if Bootstrap's CSS is linked.
     If not using Bootstrap's CSS, you'll need to complete these definitions.
  */
  
  @media (max-width: 600px) {
   .container {
     margin: 5px;
     padding: 10px;
   }
   h1 { font-size: 1.75em; }
   h2 { font-size: 1.5em; }
 
   /* Styles for navigation links within main-nav (if it were visible) or a .main-navbar class */
   /* Adjust selector if your mobile menu uses different classes for links */
   nav.main-nav a, /* If mobile menu reuses main-nav structure but is shown via JS */
   .main-navbar a.nav-link { /* If you have a .main-navbar class */
     /* color: blue; /* Example, use var(--nav-text) or var(--link-color) */
     /* text-decoration: none; */
     /* padding: 10px; */
   }
   nav.main-nav a:hover,
   .main-navbar a.nav-link:hover,
   .main-navbar a.nav-link.active-nav-item {
     /* background-color: lightblue; /* Example, use variables */
     /* color: darkblue; /* Example, use variables */
   }
 }
 
 /* ==========================================================================
    10. Animations & Specific Carousels
    ========================================================================== */
 
 /* --- CSS Marquee-like Scroll (Photobanner, Historia-item) --- */
 /* Note: This creates a jumpy scroll. For smooth infinite scroll,
    content duplication or JS is usually required. */
 .photobanner,
 .historia-item { /* Assuming .historia-item is for the marquee, not the scroll container cards */
     overflow-x: auto; /* Allows manual scroll as fallback if animation is paused/fails */
     white-space: nowrap;
     padding-bottom: 10px; /* For scrollbar visibility */
 }
 .photobanner::-webkit-scrollbar,
 .historia-item::-webkit-scrollbar { height: 8px; }
.photobanner::-webkit-scrollbar-track,
.historia-item::-webkit-scrollbar-track { background: var(--bg-alt); border-radius: 4px; }
.photobanner::-webkit-scrollbar-thumb,
.historia-item::-webkit-scrollbar-thumb { background: var(--muted-color); border-radius: 4px; }
.photobanner::-webkit-scrollbar-thumb:hover,
.historia-item::-webkit-scrollbar-thumb:hover { background: var(--text-color); }
 
 .photobanner .scroll-content,
 .historia-item .scroll-content { /* The actual content to be animated */
     display: inline-block; /* Or display: flex; if items are flex children */
     /* animation: scroll-x 30s linear infinite; /* Animation applied here */
 }
  
 /* --- JS-Driven Photobanner (Adoption Section) --- */
 .photobanner-container { /* Main container for the JS carousel */
      position: relative;
      overflow: hidden;
 }
 .photobanner-slides { /* Container for all slides */
      display: flex;
      transition: transform 0.5s ease-in-out;
 }
 .photobanner-slide { /* Individual slide */
      min-width: 100%;
      box-sizing: border-box;
      position: relative;
      display: none; /* JS will control which is active */
 }
 .photobanner-slide.active {
      display: block;
 }
 .banner-text { /* Text overlay on a slide */
      position: absolute;
      bottom: 10px;
      left: 10px;
      color: #ffffff;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
 }
 .photobanner-control { /* Prev/Next buttons */
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      z-index: 10;
 }
 .photobanner-control.prev { left: 10px; }
 .photobanner-control.next { right: 10px; }
 
 .photobanner-dots { /* Container for dot indicators */
      text-align: center;
      position: absolute;
      bottom: 10px;
      width: 100%;
      z-index: 10;
 }
 .dot { /* Individual dot */
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 3px;
  background-color: var(--border-color);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.dot.active {
  background-color: var(--brand-teal);
 }
 
 /* ==========================================================================
    End of File
    ========================================================================== */
       /* justify-content: space-between;  */
      gap: 20px; /* Define um espaçamento de 20px entre os cards (horizontal e vertical) */
      margin-top: 20px;
       overflow-x: auto; 
    }

  /* home cards */
  .home-cards-container,
  .home-cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow: auto;
  }
 .home-card {
    /* Ajuste a largura/base dos cards para funcionar bem com o 'gap' */
    /* Para 3 colunas com gap de 20px: */
      /* width: calc((100% - 2 * 20px) / 1);   */
       flex-basis: calc((100% - 2 * 20px) / 2);   
       flex-shrink: 0;
      /* flex-grow: 1;  Opcional, para preencher espaço se a última linha tiver menos itens */
      /* margin-bottom: 20px;  Não é mais necessário se 'gap' cuidar do espaçamento vertical */
}  

.home-card-img {
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Mantém a proporção e cobre a área */
}

.home-card-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a 3 linhas */
    -webkit-box-orient: vertical;
}

/* Ajustes responsivos com 'gap' */
@media (max-width: 992px) { /* Apply responsive adjustments to both card types */
    .home-card {
        width: calc((100% - 20px) / 2);
         /* flex-basis: calc((100% - 20px) / 2);  */
    }
}

@media (max-width: 768px) {
    .home-card {
        width: 100%; /* 1 card por linha em telas pequenas */
    }
}

  .img-thumbnail {
  cursor: pointer;
}

.img-thumbnail:hover{
  transform: scale(1.05); /* pequeno zoom no hover */
  transition: transform 0.3s ease-in-out; /* transição suave */
}

@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
  

}
  


/* Estilos para o Carrossel de Notícias */

.news-carousel-container {
  position: relative; /* Necessário para posicionar os controles */
  overflow: hidden;   /* Essencial: esconde os slides que estão fora da área visível */
  width: 100%;        /* Ocupa toda a largura disponível no container pai */
  border-radius: 8px; /* Opcional: para bordas arredondadas */
}

.news-carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out; /* A mágica da animação de slide! */
  /* O JavaScript irá alterar a propriedade 'transform' para mover os slides */
}

.news-carousel-slide {
  flex: 0 0 100%; /* Cada slide ocupa 100% da largura do container */
  box-sizing: border-box;
  /* O 'w-100' no seu .noticia-item já ajuda aqui, mas isso garante */
  padding: 0 10px; /* Adiciona um pequeno espaçamento se desejar ver um pouco dos slides vizinhos, ou 0 para tela cheia */
}

/* Ajuste para o card dentro do slide, se necessário */
.news-carousel-slide .noticia-item {
  margin-bottom: 0; /* Remove margem inferior se houver, para alinhar melhor no carrossel */
}

.news-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: var(--heading-color);
  border: none;
  padding: 8px 12px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10; /* Para ficar sobre os slides */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.news-carousel-control:hover,
.news-carousel-control:focus {
  background-color: var(--hover-bg);
  outline: none;
}

.news-carousel-control.prev {
  left: -15px;
  cursor: pointer;
  color: var(--heading-color);
  font-weight: bolder;
}

.news-carousel-control.next {
  right: -15px;
  cursor: pointer;
  color: var(--heading-color);
  font-weight: bolder;
}

.news-carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.news-carousel-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--link-color);
  opacity: 0.6;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.news-carousel-dots .dot.active {
  background-color: var(--brand-teal-dark);
  opacity: 1;
}

/* Para garantir que a imagem dentro do card se ajuste bem */
.noticia-img-fixed-height {
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    /* A altura já está definida no seu HTML/CSS, o object-fit melhora a apresentação */
}

/* Ajustes para o modo de alto contraste, se você tiver um */
body.high-contrast .news-carousel-control {
  background-color: var(--hc-button-bg, #000); /* Use suas variáveis de alto contraste */
  color: var(--hc-button-text, #fff);
  border: 1px solid var(--hc-button-text, #fff);
}

body.high-contrast .news-carousel-dots .dot {
  background-color: var(--hc-border-color, #fff);
  border: 1px solid var(--hc-text-color, #000);
}

body.high-contrast .news-carousel-dots .dot.active {
  background-color: var(--hc-link-color, #000); /* Ou uma cor de destaque */
}

/* Estilos para validação de telefone */
.phone-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.phone-error:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.search-wrapper {
  max-width:600px;
  margin:10px auto 0;
  padding:0 15px 15px;
  position:relative
}
.search-inner {
  position:relative
}
.search-input {
  width:100%;
  padding:10px 40px 10px 14px;
  border:2px solid var(--brand-teal);
  border-radius:8px;
  font-size:1rem;
  outline:none;
  background:var(--container-bg);
  color:var(--text-color);
  box-sizing:border-box
}
.search-input:focus {
  border-color:var(--brand-teal);
  box-shadow:0 0 0 3px rgba(13,148,136,0.15)
}
.search-icon {
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--brand-teal);
  pointer-events:none
}
.search-results-box {
  display:none;
  position:absolute;
  top:100%;
  left:15px;
  right:15px;
  background:var(--container-bg);
  border:1px solid var(--border-color);
  border-radius:0 0 8px 8px;
  max-height:400px;
  overflow-y:auto;
  z-index:1000;
  box-shadow:0 4px 12px rgba(0,0,0,0.1)
}
.search-results-box a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  text-decoration:none;
  color:var(--text-color);
  border-bottom:1px solid var(--bg-alt);
  transition:background 0.2s
}
.search-results-box a:last-child {
  border-bottom:none;
  border-radius:0 0 8px 8px
}
.search-results-box a:hover {
  background:var(--bg-alt)
}
.sr-icon {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  flex-shrink:0;
  color:#fff
}
.sr-title {
  font-weight:600;
  font-size:0.9rem
}
.sr-desc {
  font-size:0.8rem;
  color:var(--muted-color)
}
.sr-none {
  padding:20px;
  text-align:center;
  color:var(--muted-color)
}

/* Estilo para inputs de telefone */
.phone-input {
  transition: all 0.3s ease;
}

.phone-input.phone-error {
  border-color: var(--danger);
}

.phone-input.phone-valid {
  border-color: var(--success);
}

.phone-input:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}