:root {
      --olive-green: #556B2F;
      --olive-green-light: #6B8E23;
      --olive-green-bg: #f5f7f0;
    }
    .hero-banner {
      height: 50vh; /* En móviles, un poco menos alto */
    }
    @media (min-width: 768px) {
      .hero-banner {
        height: 60vh;
      }
    }
    .hero-banner h1 {
      color: white !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .hero-banner p {
      color: rgba(255,255,255,0.95) !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    .hero-banner {
      height: 60vh;
      background-image: url('../img/ban-img01.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    /* Overlay semitransparente para mejorar legibilidad del texto */
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3); /* Oscurece suavemente la imagen */
      z-index: 0;
    }

    /* Hacer que el subtítulo del hero banner se vea igual que el título */
    .hero-banner .hero-subtitle {
      font-size: 2.5rem; /* Igual que display-4 en móviles */
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    /* Ajuste para escritorio */
    @media (min-width: 768px) {
      .hero-banner .hero-subtitle {
        font-size: 4.5rem; /* Igual que display-4 en md+ */
      }
    }

    /* Asegurar que el texto esté por encima del overlay */
    .z-1 {
      z-index: 1;
    }

    /* Responsive: ajustar altura en móviles */
    @media (max-width: 768px) {
      .hero-banner {
        height: 50vh;
      }
      .hero-banner h1 {
        font-size: 1.8rem;
      }
      .hero-banner p {
        font-size: 1.1rem;
      }
    }


    /* Navbar con fondo blanco y texto en verde olivo */
    .navbar {
      background-color: #fff !important;
      transition: all 0.3s ease;
      box-shadow: none;
    }

    /* Texto del logo y enlaces */
    .navbar-brand,
    .navbar-nav .nav-link {
      color: var(--olive-green) !important;
      font-weight: 500;
    }

    .navbar-brand:hover,
    .navbar-nav .nav-link:hover {
      color: #3a4a2a !important; /* Verde olivo más oscuro al pasar el mouse */
      text-decoration: none;
    }

    /* Ícono del menú hamburguesa (navbar-toggler) en verde olivo */
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2885, 107, 47, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Efecto al hacer scroll: fondo blanco con sombra suave */
    .navbar.scrolled {
      background-color: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* Estilo hover para los enlaces del menú */
    .navbar-nav .nav-link {
      color: var(--olive-green) !important;
      font-weight: 500;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 0 4px;
      transition: all 0.25s ease;
    }

    .navbar-nav .nav-link:hover {
      background-color: var(--olive-green) !important;
      color: white !important;
      text-decoration: none !important;
    }

    /* También aplicar hover al logo si se desea (opcional) */
    .navbar-brand:hover {
      color: var(--olive-green) !important;
      text-decoration: none !important;
    }

    /* Secciones */
    .section-padding {
      padding: 60px 0;
    }
    .bg-olive-light {
      background-color: var(--olive-green-bg);
    }

    /* Títulos */
    h1, h2, h3, h4, h5, h6 {
      color: var(--olive-green);
    }

    /* Badges en horarios */
    .badge.bg-primary {
      background-color: var(--olive-green) !important;
      color: white !important;
    }
    .badge.bg-secondary {
      background-color: var(--olive-green-light) !important;
      color: white !important;
    }

    /* Footer */
    
    footer.footer-olive {
      all: unset !important;
      display: block !important;
      background-color: #ffffff !important;
      border: 2px solid #556B2F !important;
      color: #556B2F !important;
      border-radius: 12px !important;
      max-width: 800px;
      margin: 2rem auto !important;
      padding: 1.5rem !important;
      text-align: center !important;
      font-size: 1rem !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }
    
    .btn-btnCita {
        background-color: #556B2F !important;  /* olive-green */
        color: white !important;
        border: none;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .btn-btnCita:hover {
        background-color: #5a6740 !important;
        color: white !important;
        transform: translateY(-2px);
    }

    /* Botón personalizado en verde olivo */
    .btn-olive {
      background-color: var(--olive-green);
      color: white !important;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
      transition: all 0.25s ease;
      box-shadow: 0 2px 6px rgba(85, 107, 47, 0.3);
    }

    .btn-olive:hover {
      background-color: #4a5d28; /* Verde olivo ligeramente más oscuro */
      color: white !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(85, 107, 47, 0.4);
      text-decoration: none !important;
    }    

    /* Estilo para horario abierto */
    .abierto {
      color: var(--olive-green) !important;
      font-weight: bold;
    }
    .abierto small {
      color: var(--olive-green) !important;
      font-weight: normal;
      background-color: rgba(85, 107, 47, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 6px;
    }

    /* Día actual resaltado */
    .list-group-item-success {
      background-color: #f8faf5 !important;
      border-left: 4px solid var(--olive-green);
    }
    /* Fondo verde olivo en títulos de tarjetas */
    .card-title {
      background-color: var(--olive-green);
      color: white !important;
      padding: 8px 12px;
      margin: -1rem -1rem 1rem -1rem; /* Extiende el fondo hasta los bordes de la tarjeta */
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      font-weight: 600;
    }
  
    /* Tarjetas de la sección Inicio: borde verde olivo */
    /* Tarjetas de la sección Inicio */
    #inicio .card {
      border: 2px solid var(--olive-green);
      border-radius: 8px;
      transition: all 0.3s ease;
      background-color: #fff;
    }

    #inicio .card:hover {
      border-color: #4a5d28; /* Verde olivo más oscuro */
      border-width: 3px;
      box-shadow: 0 6px 16px rgba(85, 107, 47, 0.2);
      transform: translateY(-3px);
    }

    /* Título de las tarjetas */
    #inicio .card-title {
      background-color: white !important;
      color: var(--olive-green) !important;
      font-weight: 600;
      padding: 10px;
      margin: -2px -2px 16px -2px; /* Ajuste para coincidir con el borde de 2px */
      border-bottom: 2px solid var(--olive-green);
      border-radius: 6px 6px 0 0;
    }

    /* Título al hacer hover (junto con la tarjeta) */
    #inicio .card:hover .card-title {
      color: #4a5d28 !important;
      border-bottom-color: #4a5d28;
    }

    /* Alinear a la izquierda el contenido de las tarjetas de SERVICIOS */
    /* Estilo para las tarjetas de SERVICIOS */
    #servicios .card-body {
      text-align: left;
      padding: 1.25rem;
    }

    #servicios .card-body .mb-3 {
      text-align: center;
      margin-bottom: 1rem;
    }

    #servicios .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--olive-green) !important;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--olive-green); /* Línea divisoria suave */
      background: none !important;
      border-radius: 0 !important;
    }

    /* Resaltado suave al pasar el mouse en tarjetas de Inicio, Enfermedades y Servicios */
    /* Resaltado al pasar el mouse en tarjetas de Inicio, Enfermedades y Servicios */
    #inicio .card,
    #enfermedades .card,
    #servicios .card {
      border: 1px solid rgba(85, 107, 47, 0.15);
      border-radius: 8px;
      transition: all 0.25s ease;
      background-color: #fff;
    }

    #inicio .card:hover,
    #enfermedades .card:hover,
    #servicios .card:hover,
    #datos-contacto .card:hover,
    #contacto .card:hover {
      border: 2px solid var(--olive-green); /* ¡Más grueso y en verde olivo sólido! */
      box-shadow: 0 4px 14px rgba(85, 107, 47, 0.18);
      transform: translateY(-2px);
    }

    /* Línea bajo el título en cards de contacto */
    /* Título con línea divisoria - para servicios y contacto */
    #datos-contacto .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--olive-green) !important;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--olive-green);
      background: none !important;
      border-radius: 0 !important;
    }
    /* Hover para tarjetas de la sección de contacto */
    #datos-contacto .card {
      border: 2px solid transparent; /* Reserva espacio para evitar saltos */
      border-radius: 8px;
      background-color: #fff;
      transition: all 0.25s ease;
    }

    #datos-contacto .card:hover {
      border-color: var(--olive-green);
      box-shadow: 0 4px 14px rgba(85, 107, 47, 0.18);
      transform: translateY(-2px);
    }

    /* Efecto de enfoque en verde olivo para todos los campos del formulario */
    #formContacto .form-control:focus,
    #formContacto .form-select:focus {
      border-color: var(--olive-green) !important;
      box-shadow: 0 0 0 0.25rem rgba(85, 107, 47, 0.25) !important;
    }

    /* Contorno visible en campos del formulario de contacto - versión reforzada */
    #contacto #formContacto .form-control,
    #contacto #formContacto .form-select,
    #contacto #formContacto input,
    #contacto #formContacto textarea,
    #contacto #formContacto select {
      border: 2px solid var(--olive-green) !important;
      border-radius: 6px !important;
      background-color: #fff !important;
      color: #495057 !important;
      padding: 0.6rem 0.75rem !important;
      box-shadow: none !important;
    }

    #contacto #formContacto input:-webkit-autofill,
    #contacto #formContacto input:-webkit-autofill:hover,
    #contacto #formContacto input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      -webkit-text-fill-color: #495057 !important;
      border: 2px solid var(--olive-green) !important;
    }

    /* Efecto de foco */
    #contacto #formContacto .form-control:focus,
    #contacto #formContacto .form-select:focus,
    #contacto #formContacto input:focus,
    #contacto #formContacto textarea:focus,
    #contacto #formContacto select:focus {
      border-color: var(--olive-green) !important;
      box-shadow: 0 0 0 0.25rem rgba(85, 107, 47, 0.25) !important;
    }

    /* Estilo para campos inválidos */
    #formContacto .form-control.is-invalid,
    #formContacto .form-select.is-invalid {
      border-color: #dc3545 !important;
    }

    #formContacto .invalid-feedback {
      color: #dc3545;
      font-size: 0.875rem;
    }    

    /* Estilo para tarjetas de la sección Enfermedades */
    #enfermedades .card {
      background-color: #fff !important;
      border: 2px solid transparent; /* para hover sin saltos */
    }

    #enfermedades .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--olive-green) !important;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--olive-green);
      background: none !important;
    }

    #enfermedades .card-text {
      color: #495057; /* gris oscuro para mejor legibilidad */
    }

    /* Ocultar el contador visual, pero mantener la lógica activa */
    #contador-actualizacion {
      display: none !important; /* block = mostrar */
    }