/* ==========================================================================
   MedCare - CSS Customizado
   Site Institucional: Soluções de Software para Saúde
   Template Base: RatherApp (bootstrap.css, fonts.css, style.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS CSS (Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    --mc-azul-principal: #1a4a9e;
    --mc-azul-claro: #2563eb;
    --mc-azul-hover: #1d4ed8;
    --mc-azul-escuro: #0f2d5e;
    --mc-azul-bg: #f0f5ff;
    --mc-verde: #059669;
    --mc-verde-hover: #047857;
    --mc-roxo: #7c3aed;
    --mc-roxo-hover: #6d28d9;
    --mc-cinza-texto: #4b5563;
    --mc-cinza-claro: #f9fafb;
    --mc-branco: #ffffff;
    --mc-sombra: 0 4px 20px rgba(26, 74, 158, 0.12);
    --mc-sombra-hover: 0 8px 30px rgba(26, 74, 158, 0.2);
    --mc-transicao: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mc-radius: 8px;
    --mc-radius-lg: 16px;
}

/* --------------------------------------------------------------------------
   2. ESTILOS GLOBAIS E SCROLL SUAVE
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Seleção de texto com cores da marca */
::selection {
    background-color: var(--mc-azul-principal);
    color: var(--mc-branco);
}

::-moz-selection {
    background-color: var(--mc-azul-principal);
    color: var(--mc-branco);
}

/* --------------------------------------------------------------------------
   3. OVERRIDE DE CORES PRIMÁRIAS DO TEMPLATE
   -------------------------------------------------------------------------- */

/* Botões primários */
.button-primary {
    background-color: var(--mc-azul-principal) !important;
    border-color: var(--mc-azul-principal) !important;
}

.button-primary:hover,
.button-primary:focus,
.button-primary:active {
    background-color: var(--mc-azul-hover) !important;
    border-color: var(--mc-azul-hover) !important;
}

/* Botão Ujarak - override de pseudo-elementos */
.button-primary.button-ujarak::before {
    background: var(--mc-azul-hover) !important;
}

/* Links e elementos com cor primária do template */
a:hover {
    color: var(--mc-azul-claro);
}

.link-primary {
    color: var(--mc-azul-principal);
}

.link-primary:hover {
    color: var(--mc-azul-hover);
}

/* Cor de fundo primária usada pelo template */
.bg-primary {
    background-color: var(--mc-azul-principal) !important;
}

/* Texto primário */
.text-primary {
    color: var(--mc-azul-principal) !important;
}

/* --------------------------------------------------------------------------
   4. NAVBAR - Identidade MedCare
   -------------------------------------------------------------------------- */
.rd-navbar-brand .brand img {
    max-height: 50px;
    width: auto;
    transition: var(--mc-transicao);
}

/* Navbar fixa - background sólido ao scrollar */
.rd-navbar-fixed .rd-navbar-panel,
.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main,
.rd-navbar-fullwidth.rd-navbar--is-stuck .rd-navbar-main {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Links da navbar */
.rd-navbar-nav > li > .rd-navbar-link {
    transition: var(--mc-transicao);
}

.rd-navbar-nav > li.active > .rd-navbar-link,
.rd-navbar-nav > li > .rd-navbar-link:hover {
    color: var(--mc-azul-principal) !important;
}

/* Submenu - borda superior com cor da marca */
.rd-navbar-nav .rd-navbar-dropdown {
    border-top: 3px solid var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   5. HERO / SWIPER SLIDER - Overlay Azulado
   -------------------------------------------------------------------------- */
.swiper-slider .swiper-slide {
    position: relative;
}

.swiper-slider .swiper-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 74, 158, 0.7) 0%,
        rgba(37, 99, 235, 0.5) 50%,
        rgba(15, 45, 94, 0.6) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.swiper-slide-caption {
    position: relative;
    z-index: 2;
}

/* Título do hero */
.swiper-slide-caption h1,
.swiper-slide-caption .heading-1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Parágrafo do hero */
.swiper-slide-caption p {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* Paginação do swiper com cor da marca */
.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--mc-azul-claro) !important;
}

/* --------------------------------------------------------------------------
   6. SEÇÕES - Estilos Gerais
   -------------------------------------------------------------------------- */

/* Títulos de seção */
.section-title h2,
.section-title .heading-2 {
    color: var(--mc-azul-escuro);
}

/* Decoração sob títulos */
.divider-default {
    background-color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   7. CARDS DE SERVIÇOS (box-icon-modern)
   -------------------------------------------------------------------------- */
.box-icon-modern {
    transition: var(--mc-transicao);
    border-radius: var(--mc-radius);
}

.box-icon-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--mc-sombra-hover);
}

.box-icon-modern .icon {
    color: var(--mc-azul-principal);
    transition: var(--mc-transicao);
}

.box-icon-modern:hover .icon {
    color: var(--mc-azul-claro);
    transform: scale(1.1);
}

.box-icon-modern-decor {
    background-color: var(--mc-azul-principal) !important;
}

.box-icon-modern .button-primary {
    background-color: var(--mc-azul-principal) !important;
}

/* --------------------------------------------------------------------------
   8. SEÇÃO DE TECNOLOGIA (reutilizando team-classic)
   -------------------------------------------------------------------------- */
.team-classic {
    transition: var(--mc-transicao);
    border-radius: var(--mc-radius);
    overflow: hidden;
}

.team-classic:hover {
    transform: translateY(-5px);
    box-shadow: var(--mc-sombra-hover);
}

.team-classic-figure {
    position: relative;
    overflow: hidden;
}

.team-classic-caption {
    padding: 20px 15px;
    background: var(--mc-branco);
    text-align: center;
    border-top: 3px solid var(--mc-azul-principal);
    transition: var(--mc-transicao);
}

.team-classic:hover .team-classic-caption {
    border-top-color: var(--mc-azul-claro);
}

.team-classic-name a {
    color: var(--mc-azul-escuro);
    transition: var(--mc-transicao);
}

.team-classic-name a:hover {
    color: var(--mc-azul-principal);
}

.team-classic-status {
    color: var(--mc-cinza-texto);
    font-size: 14px;
}

/* Overlay gradiente sobre imagens de tecnologia */
.tech-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(26, 74, 158, 0.15) 60%,
        rgba(26, 74, 158, 0.5) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: var(--mc-transicao);
}

.team-classic:hover .tech-overlay {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(37, 99, 235, 0.2) 50%,
        rgba(37, 99, 235, 0.6) 100%
    );
}

/* --------------------------------------------------------------------------
   9. CARDS DE CONFORMIDADE / CERTIFICAÇÕES (reutilizando pricing)
   -------------------------------------------------------------------------- */
.box-pricing {
    transition: var(--mc-transicao);
    border-radius: var(--mc-radius);
    overflow: hidden;
}

.box-pricing:hover {
    transform: translateY(-5px);
    box-shadow: var(--mc-sombra-hover);
}

/* Badge "Em Conformidade" - verde */
.box-pricing-popular .box-pricing-badge {
    background: var(--mc-verde) !important;
    color: var(--mc-branco);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Badge genérica */
.box-pricing-badge {
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Título do card de conformidade */
.box-pricing-title {
    color: var(--mc-azul-escuro);
}

/* Popular card - destaque azul */
.box-pricing-popular {
    border: 2px solid var(--mc-azul-principal);
}

/* Botão dentro dos cards de pricing */
.box-pricing-button .button {
    transition: var(--mc-transicao);
}

.box-pricing-popular .box-pricing-button .button {
    background-color: var(--mc-azul-principal) !important;
    color: var(--mc-branco) !important;
    border-color: var(--mc-azul-principal) !important;
}

.box-pricing-popular .box-pricing-button .button:hover {
    background-color: var(--mc-azul-hover) !important;
    border-color: var(--mc-azul-hover) !important;
}

/* --------------------------------------------------------------------------
   10. BADGES DE CONFORMIDADE (LGPD, e-SUS, etc.)
   -------------------------------------------------------------------------- */
.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: var(--mc-transicao);
    white-space: nowrap;
}

.mc-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* Ícone dentro do badge */
.mc-badge .mc-badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Variantes de badge com cores */
.mc-badge--verde {
    background: rgba(5, 150, 105, 0.2);
    border-color: rgba(5, 150, 105, 0.4);
    color: var(--mc-verde);
}

.mc-badge--azul {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--mc-azul-claro);
}

.mc-badge--roxo {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
    color: var(--mc-roxo);
}

/* Badges em fundo claro */
.mc-badge--light {
    background: var(--mc-azul-bg);
    border-color: rgba(26, 74, 158, 0.15);
    color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   11. CONTADORES / STATS
   -------------------------------------------------------------------------- */
.counter-classic .heading-2,
.counter-classic .heading-1 {
    color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   12. TABS E TOGGLES
   -------------------------------------------------------------------------- */
.tabs-custom .nav-tabs li.active a,
.tabs-custom .nav-tabs li a:hover {
    color: var(--mc-azul-principal);
    border-color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   13. PROGRESS BARS
   -------------------------------------------------------------------------- */
.progress-bar-striped,
.progress-bar {
    background-color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   14. TESTIMONIALS / DEPOIMENTOS
   -------------------------------------------------------------------------- */
.quote-classic::before {
    color: var(--mc-azul-principal);
    opacity: 0.15;
}

/* --------------------------------------------------------------------------
   15. CTA (Call to Action) SECTIONS
   -------------------------------------------------------------------------- */
.section-cta {
    background-color: var(--mc-azul-principal);
}

/* --------------------------------------------------------------------------
   16. MODAL DE CONTATO
   -------------------------------------------------------------------------- */
.modal .form-input:focus {
    border-color: var(--mc-azul-principal);
    box-shadow: 0 0 0 3px rgba(26, 74, 158, 0.1);
}

.modal .button-primary {
    background-color: var(--mc-azul-principal) !important;
}

.modal .button-primary:hover {
    background-color: var(--mc-azul-hover) !important;
}

/* --------------------------------------------------------------------------
   17. FORMULÁRIOS
   -------------------------------------------------------------------------- */
.form-wrap .form-input:focus,
.form-wrap .form-input:active {
    border-color: var(--mc-azul-claro);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.form-wrap .form-label.focus {
    color: var(--mc-azul-principal);
}

/* RD Mailform validation */
.rd-mailform .has-error .form-input {
    border-color: #ef4444;
}

.rd-mailform .has-success .form-input {
    border-color: var(--mc-verde);
}

/* --------------------------------------------------------------------------
   18. FOOTER - Background Escuro e Elegante
   -------------------------------------------------------------------------- */
.page-footer,
footer.section-lg {
    background-color: #0c1a2e !important;
    color: rgba(255, 255, 255, 0.7);
}

.page-footer h4,
.page-footer h5,
.page-footer .heading-4,
.page-footer .heading-5 {
    color: var(--mc-branco);
}

.page-footer a {
    color: rgba(255, 255, 255, 0.65);
    transition: var(--mc-transicao);
}

.page-footer a:hover {
    color: var(--mc-azul-claro);
}

/* Linha divisória do footer */
.page-footer .divider-default {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Copyright no footer */
.page-footer .rights {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* Ícones sociais no footer */
.page-footer .list-inline-sm a .icon {
    color: rgba(255, 255, 255, 0.5);
    transition: var(--mc-transicao);
}

.page-footer .list-inline-sm a:hover .icon {
    color: var(--mc-azul-claro);
    transform: translateY(-2px);
}

/* Footer com gradiente sutil */
.page-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--mc-azul-principal) 0%,
        var(--mc-azul-claro) 33%,
        var(--mc-verde) 66%,
        var(--mc-roxo) 100%
    );
}

footer.section-lg {
    position: relative;
}

/* --------------------------------------------------------------------------
   19. SCROLLBAR CUSTOMIZADA
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--mc-azul-principal);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mc-azul-hover);
}

/* --------------------------------------------------------------------------
   20. ANIMAÇÕES EXTRAS
   -------------------------------------------------------------------------- */

/* Fade-in ao aparecer na viewport (usar com JS IntersectionObserver) */
.mc-animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mc-animate-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulso suave para CTAs */
@keyframes mc-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 74, 158, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(26, 74, 158, 0);
    }
}

.mc-pulse {
    animation: mc-pulse 2s infinite;
}

/* Gradiente animado para backgrounds */
@keyframes mc-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.mc-gradient-animated {
    background: linear-gradient(
        135deg,
        var(--mc-azul-principal),
        var(--mc-azul-claro),
        var(--mc-roxo),
        var(--mc-azul-principal)
    );
    background-size: 300% 300%;
    animation: mc-gradient-shift 8s ease infinite;
}

/* Flutuação suave para ícones/elementos decorativos */
@keyframes mc-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mc-float {
    animation: mc-float 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   21. UTILITÁRIOS MedCare
   -------------------------------------------------------------------------- */

/* Backgrounds da marca */
.mc-bg-azul {
    background-color: var(--mc-azul-principal);
    color: var(--mc-branco);
}

.mc-bg-azul-claro {
    background-color: var(--mc-azul-bg);
}

.mc-bg-verde {
    background-color: var(--mc-verde);
    color: var(--mc-branco);
}

.mc-bg-roxo {
    background-color: var(--mc-roxo);
    color: var(--mc-branco);
}

/* Textos da marca */
.mc-text-azul {
    color: var(--mc-azul-principal);
}

.mc-text-verde {
    color: var(--mc-verde);
}

.mc-text-roxo {
    color: var(--mc-roxo);
}

/* Bordas */
.mc-border-azul {
    border-color: var(--mc-azul-principal);
}

.mc-border-verde {
    border-color: var(--mc-verde);
}

/* Sombras */
.mc-shadow {
    box-shadow: var(--mc-sombra);
}

.mc-shadow:hover {
    box-shadow: var(--mc-sombra-hover);
}

/* Gradientes de texto */
.mc-text-gradient {
    background: linear-gradient(135deg, var(--mc-azul-principal), var(--mc-azul-claro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --------------------------------------------------------------------------
   22. RESPONSIVIDADE APRIMORADA
   -------------------------------------------------------------------------- */

/* Tablets e abaixo (max-width: 991px) */
@media (max-width: 991px) {
    /* Navbar mobile */
    .rd-navbar-brand .brand img {
        max-height: 40px;
    }

    /* Hero - ajuste de texto */
    .swiper-slide-caption h1,
    .swiper-slide-caption .heading-1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .swiper-slide-caption p {
        font-size: 15px;
    }

    /* Cards de serviço - espaçamento */
    .box-icon-modern {
        margin-bottom: 20px;
    }

    /* Team/Tech cards */
    .team-classic {
        margin-bottom: 25px;
    }

    .team-classic-caption {
        padding: 15px 12px;
    }

    /* Pricing/Conformidade cards */
    .box-pricing {
        margin-bottom: 25px;
    }

    /* Footer */
    .page-footer .col-lg-3,
    .page-footer .col-lg-4 {
        margin-bottom: 30px;
    }
}

/* Smartphones (max-width: 767px) */
@media (max-width: 767px) {
    /* Hero - texto menor */
    .swiper-slide-caption h1,
    .swiper-slide-caption .heading-1 {
        font-size: 22px;
        line-height: 1.35;
    }

    .swiper-slide-caption p {
        font-size: 14px;
        max-width: 90%;
    }

    /* Botões - largura total em mobile */
    .swiper-slide-caption .button {
        display: block;
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    /* Seções - padding reduzido */
    .section-lg {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Badges - wrap em mobile */
    .mc-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Cards de pricing - stack vertical */
    .box-pricing {
        max-width: 100%;
    }

    /* Títulos de seção */
    .section-title h2,
    .section-title .heading-2 {
        font-size: 24px;
    }

    /* Counter - menor em mobile */
    .counter-classic .heading-2,
    .counter-classic .heading-1 {
        font-size: 32px;
    }
}

/* Smartphones pequenos (max-width: 479px) */
@media (max-width: 479px) {
    .swiper-slide-caption h1,
    .swiper-slide-caption .heading-1 {
        font-size: 18px;
    }

    .swiper-slide-caption p {
        font-size: 13px;
    }

    .section-title h2,
    .section-title .heading-2 {
        font-size: 20px;
    }

    .team-classic-caption {
        padding: 12px 10px;
    }

    .team-classic-name {
        font-size: 16px;
    }

    .mc-badge {
        font-size: 10px;
        padding: 2px 8px;
        gap: 3px;
    }
}

/* Telas grandes (min-width: 1200px) */
@media (min-width: 1200px) {
    /* Hero mais impactante em telas grandes */
    .swiper-slide-caption h1,
    .swiper-slide-caption .heading-1 {
        font-size: 56px;
        letter-spacing: -0.5px;
    }

    /* Cards com mais espaçamento */
    .box-icon-modern {
        padding: 35px 30px;
    }
}

/* --------------------------------------------------------------------------
   23. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
    .rd-navbar,
    .swiper-slider,
    .page-footer,
    .button {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* --------------------------------------------------------------------------
   24. ACESSIBILIDADE
   -------------------------------------------------------------------------- */

/* Focus visível para navegação por teclado */
*:focus-visible {
    outline: 2px solid var(--mc-azul-claro);
    outline-offset: 2px;
}

/* Respeitar preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mc-float,
    .mc-pulse,
    .mc-gradient-animated {
        animation: none !important;
    }
}

/* Modo de alto contraste */
@media (prefers-contrast: high) {
    .mc-badge {
        border-width: 2px;
    }

    .button-primary {
        border: 2px solid var(--mc-azul-escuro) !important;
    }
}