/* Estilos para o Acordeão FAQ (com Grid) */
.faq-item .faq-question {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.faq-item.dark .faq-question:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* Colapsado por defeito */
    transition: grid-template-rows 0.4s ease-out;
}
.faq-item.open .faq-answer-wrapper {
    grid-template-rows: 1fr; /* Expandido */
}
.faq-answer {
    overflow: hidden;
}
.faq-answer p{
   font-size:15px!important;
   text-align: justify;
   width: 90%;
}
.faq-item .faq-icon {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.faq-item.open .faq-icon {
    transform: rotate(135deg);
}

/* Animações de Scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}



        /* Estilos para a galeria de imagens do Ambulatório */
       
        /* Animações de Scroll */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            will-change: opacity, transform;
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Estilos para a Galeria de Imagens do Ambulatório */
        .main-image-container {
            overflow: hidden;
            border-radius: 0.75rem; /* rounded-xl */
        }
        .main-image-container img {
            width: 100%;
            height: auto; /* Ajustar para 400px ou 450px se preferir altura fixa */
            max-height: 500px; /* Altura máxima para a imagem principal */
            object-fit: cover;
            transition: transform 0.5s ease, opacity 0.3s ease-in-out;
            border-radius: 0.75rem; /* rounded-xl */
        }
        
        .thumbnail-list {
            max-height: 505px; /* Mesma altura máxima da imagem principal */
            overflow-y: auto; /* Scroll se houver muitas miniaturas */
        }

        .thumbnail-item {
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 0.5rem; /* rounded-lg */
            transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden; /* Para a imagem não vazar no hover */
            margin-bottom: 0.75rem; /* mb-3 */
        }
        .thumbnail-item:hover {
            border-color: #0ea5e9; /* sky-500 */
            transform: scale(1.03);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .thumbnail-item.active {
            border-color: #0284c7; /* sky-600 */
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4); /* Anel de foco sutil */
        }
        .thumbnail-item img {
            width: 100%;
            height: 85px; /* Altura fixa para miniaturas */
            object-fit: cover;
            border-radius: 0.375rem; /* rounded-md */
            transition: transform 0.3s ease;
        }
        .thumbnail-item:hover img {
            transform: scale(1.1);
        }

        /* Estilo para cards de destaque */
        .highlight-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .highlight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Scrollbar customizado para a lista de thumbnails (opcional) */
        .thumbnail-list::-webkit-scrollbar {
            width: 6px;
        }
        .thumbnail-list::-webkit-scrollbar-track {
            background: #e2e8f0; /* slate-200 */
            border-radius: 10px;
        }
        .thumbnail-list::-webkit-scrollbar-thumb {
            background: #94a3b8; /* slate-400 */
            border-radius: 10px;
        }
        .thumbnail-list::-webkit-scrollbar-thumb:hover {
            background: #64748b; /* slate-500 */
        }


           .category-card {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
            border-radius: 0.75rem; /* rounded-xl */
        }
        .category-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .category-card-image-wrapper {
            overflow: hidden;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
        }
        .category-card-image-wrapper img {
            transition: transform 0.5s ease;
            object-fit: cover;
            width: 100%;
            height: 400px; /* Altura fixa para as imagens dos cards */
        }
        .category-card:hover .category-card-image-wrapper img {
            transform: scale(1.1);
        }

        .category-card-icon {
            transition: transform 0.3s ease;
        }
        .category-card:hover .category-card-icon {
            transform: rotate(10deg) scale(1.1);
        }

        /* Animações de Scroll */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
            will-change: opacity, transform; 
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

/*LAND PAGES*/


        .hero-course-bg {
            background-image: url('https://placehold.co/1920x800/0e7490/ffffff?text=YNSA'); /* Imagem de fundo temática */
            background-size: cover;
            background-position: center;
        }

        .section-title-alt {
            @apply text-3xl sm:text-4xl font-bold text-cyan-700 mb-3;
        }
        .section-subtitle-alt {
            @apply text-lg text-slate-600 mb-8 leading-relaxed;
        }

        .content-card {
            @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300;
        }
        .content-card ul li {
            @apply flex items-start mb-2;
        }
        .content-card ul li i.fa-check { /* Estilo específico para o ícone de check */
            @apply text-cyan-500 mr-3 mt-1 text-xs; /* Ajustado para text-xs para ser menor */
        }
        
        .instructor-card {
            @apply bg-gradient-to-br from-sky-50 to-cyan-50 p-6 rounded-xl shadow-lg text-center;
        }
        .instructor-card img {
            @apply w-32 h-32 rounded-full mx-auto mb-4 border-4 border-white shadow-md;
        }

        .cta-button {
            @apply inline-block bg-orange-500 text-white font-bold py-4 px-10 rounded-lg shadow-lg hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 text-lg;
        }

        /* Animações de Scroll */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
            will-change: opacity, transform; 
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .indication-card ul li i.fa-check {
             @apply text-sky-500 mr-2 mt-1 text-xs;
        }


       /* Estilo para cards com hover sutil */
        .course-card, .news-card, .highlight-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .course-card:hover, .news-card:hover, .highlight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra mais pronunciada */
        }


        /*FORM LEADS*/

          /* Estilos para validação de formulário (opcional, pode ser feito com classes do Tailwind) */
        .form-input.invalid {
            border-color: #f87171; /* red-400 */
        }
        .error-message {
            font-size: 0.875rem; /* text-sm */
            color: #ef4444; /* red-500 */
        }

        /* Animações de Scroll (se for usar em uma página maior) */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            will-change: opacity, transform;
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Estilo para o modal de feedback */
        .feedback-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .feedback-modal.active {
            opacity: 1;
            visibility: visible;
        }
        .feedback-modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 0.5rem; /* rounded-lg */
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

    .sm\:text-3xl{ font-size:40px!important; margin-left:40px!important; }
    .sm\:text-base{ font-size:20px!important; margin-left:40px!important; }
    .faixa-lead{background-color: #666;margin-top: -100px;z-index: 1!important;position: relative;}


    #course-categories{background-color: rgba(51,65,85,1);}
       #course-categories h2 {color:#fff!important; font-size: 30px;}
         #course-categories p {color:#fff!important;  font-size: 20px;}
           #course-categories li {color:#fff!important;  font-size: 20px;}
    .category-card{ background-color:rgba(0, 0, 0, 0.3);
    .category-card .text-slate-800, p,li { color:#777!important; } 
 .text-slate-800 { color:#777!important; } 

 .over:text-sky-400{ margin-right:20PX; }



.saiba-mais{ padding:10px; border-radius:10px; background:rgba(0, 0, 0, 0.4); margin:5px;}