/* Tema Agenda Saúde: paleta verde sobre o style.css do template. Carregar por último. */

:root {
    --as-50: #F6FBF9;
    --as-100: #D7EFE6;
    --as-300: #8FD1BD;
    --as-500: #3F9F86;
    --as-900: #1F4F45;
    --as-950: #163a33;
    --as-texto: #1F4F45;

    --bgcolor: var(--as-300);
    --cl-verde: var(--as-300);
    --cl-escuro: var(--as-900);
}

body {
    background-color: var(--as-50);
}
p {
    color: #3d5752;
}

/* Logo */
.top-bar .logo {
    flex-shrink: 0;
}
.cl-logo--img img {
    display: block;
    height: 64px;
    width: auto;
    max-width: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.header-right .login a {
    white-space: nowrap;
}
.top-bar .navbar {
    padding-left: 24px;
}
@media (max-width: 1600px) {
    .header-right .login { display: none; }
}
@media (max-width: 576px) {
    .cl-logo--img img { height: 56px; }
}

/* Português não usa maiúscula em cada palavra */
.accordion-item .heading,
.accordion-item .heading .title,
.heading span,
.heading h6,
.btn .btn-wrap .text-one,
.btn .btn-wrap .text-two,
.navbar-links li a {
    text-transform: none !important;
}

/* Preloader */
.preloader {
    background-color: var(--as-50) !important;
}
.loader {
    --c: no-repeat linear-gradient(var(--as-500) 0 0);
}

/* Botões */
.btn {
    background-color: var(--as-500);
    color: #fff;
}
.btn:hover {
    color: #fff;
    background-color: var(--as-900);
}
.btn svg path,
.btn svg {
    fill: currentColor;
}
.btn.cl-btn-ghost:hover {
    background-color: rgba(143, 209, 189, .12);
}
.cl-mobile-nav__panel .btn {
    color: #fff;
}
a.union:hover svg {
    fill: var(--as-900);
}

/* Hero */
.hero-text h2 .hero-hl {
    color: var(--as-300) !important;
}
.hero-section::before {
    background: linear-gradient(90deg, rgba(22, 58, 51, .92) 0%, rgba(22, 58, 51, .7) 55%, rgba(22, 58, 51, .45) 100%) !important;
}

/* Formulário de orçamento */
.get-a-quote form,
form#orcamento-form {
    background: rgba(22, 58, 51, .88) !important;
    border-color: rgba(143, 209, 189, .25) !important;
}
.get-a-quote input[type="tel"]:focus,
.get-a-quote .cl-select:focus,
.get-a-quote input:focus {
    border-color: var(--as-300) !important;
    box-shadow: 0 0 0 4px rgba(143, 209, 189, .18) !important;
}

/* Títulos de seção */
.heading span:before {
    background-color: var(--as-300);
}
.heading h2,
.heading h3 {
    color: var(--as-texto);
}

/* Especialidades */
.count-text i {
    background-color: var(--as-300);
}
.services[data-bg]:hover > a {
    background-color: var(--as-300);
    color: var(--as-900);
}
.services[data-bg]:hover > i.wpfood-segment-icon,
.services:hover > i.wpfood-segment-icon {
    color: var(--as-300);
}
#services .services.cl-seg--medica,
#services .services.cl-seg--fisio,
#services .services.cl-seg--nutri,
#services .services.cl-seg--lab {
    --wpfood-services-bg: linear-gradient(135deg, #3F9F86, #1F4F45);
}
#services .services.cl-seg--odonto,
#services .services.cl-seg--psico,
#services .services.cl-seg--pediatria {
    --wpfood-services-bg: linear-gradient(135deg, #2f7f6b, #163a33);
}
#services .services.cl-seg--estetica,
#services .services.cl-seg--derma,
#services .services.cl-seg--vet {
    --wpfood-services-bg: linear-gradient(135deg, #1F4F45, #102b26);
}

/* Recursos */
.wpfood-modules-section {
    background: linear-gradient(180deg, var(--as-900) 0%, var(--as-950) 100%);
}
.wpfood-mod-card {
    background: linear-gradient(180deg, rgba(31, 79, 69, .95) 0%, rgba(22, 58, 51, .95) 100%);
    border-color: rgba(143, 209, 189, .16);
}
.wpfood-mod-card--accent {
    border-color: rgba(143, 209, 189, .4);
    background: linear-gradient(165deg, rgba(63, 159, 134, .35) 0%, rgba(22, 58, 51, .95) 100%);
}
.wpfood-mod-card--accent:hover {
    border-color: rgba(143, 209, 189, .65);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .35), 0 0 0 1px rgba(143, 209, 189, .2);
}
.wpfood-mod-card::before {
    background: radial-gradient(600px 120px at 20% 0%, rgba(143, 209, 189, .12), transparent 55%);
}
.wpfood-mod-card:hover {
    border-color: rgba(143, 209, 189, .4);
}
.wpfood-mod-card__icon,
.wpfood-mod-card--accent .wpfood-mod-card__icon {
    background: linear-gradient(180deg, rgba(143, 209, 189, .22) 0%, rgba(143, 209, 189, .08) 100%);
    color: var(--as-300);
    box-shadow: inset 0 0 0 1px rgba(143, 209, 189, .3);
}
.wpfood-mod-list li::before {
    background: rgba(143, 209, 189, .14);
    box-shadow: inset 0 0 0 1px rgba(143, 209, 189, .3);
}
.wpfood-mod-list li::after {
    border-left-color: var(--as-300);
    border-bottom-color: var(--as-300);
}
.wpfood-mod-card__badge {
    background: var(--as-300);
    color: var(--as-900);
    border-color: var(--as-300);
}
.wpfood-modules-eyebrow::before {
    box-shadow: 0 0 0 3px rgba(143, 209, 189, .25);
}
#pricing .pricing--featured {
    box-shadow: 0 2px 0 var(--as-300), 0 24px 60px rgba(31, 79, 69, .25);
}
#pricing .pricing-link-alt:focus-visible {
    outline-color: rgba(143, 209, 189, .6);
}
.wpfood-modules-eyebrow {
    color: var(--as-300);
}
.wpfood-modules-eyebrow::before {
    background: var(--as-300);
}
.wpfood-mod-card--accent .wpfood-mod-list li::before {
    background: rgba(143, 209, 189, .16);
    box-shadow: inset 0 0 0 1px rgba(143, 209, 189, .35);
}
.wpfood-mod-card--accent .wpfood-mod-list li::after {
    border-left-color: var(--as-300);
    border-bottom-color: var(--as-300);
}

/* Faixa de demonstração */
.cl-demo-section {
    padding: 90px 0;
}
@media (max-width: 768px) {
    .cl-demo-section { padding: 56px 0; }
}
.cl-demo-band {
    background: linear-gradient(135deg, var(--as-500) 0%, var(--as-900) 70%, var(--as-950) 100%);
    box-shadow: 0 30px 80px rgba(31, 79, 69, .25);
}
.cl-demo-band h2 span {
    color: var(--as-100);
}
.cl-demo-band p {
    color: rgba(246, 251, 249, .85);
}
.cl-demo-band .btn {
    background-color: var(--as-50);
    color: var(--as-900);
}
.cl-demo-band .btn:hover {
    background-color: var(--as-100);
    color: var(--as-900);
}

/* Como funciona */
#como-funciona {
    background-color: var(--as-100);
}

.nav-pills .nav-link.active {
    background-color: var(--as-900) !important;
    border-color: var(--as-900) !important;
    color: #fff !important;
}
.nav-pills .nav-link:not(.active):hover {
    background-color: var(--as-300);
}
#como-funciona h3,
#pricing h2,
#pricing h3,
.questions h2 {
    color: var(--as-texto);
}

/* Dúvidas */
.accordion-item.active .icon:before {
    background: var(--as-500);
}
.accordion-item.active a.heading .title {
    background-color: var(--as-100);
}
.accordion-item.active a.heading {
    color: var(--as-900);
}
.questions {
    background-color: var(--as-50);
    background-image: linear-gradient(180deg, var(--as-50) 22%, var(--as-100));
}

/* Planos */
.pricing-bottom ul li i {
    color: var(--as-500);
}
#pricing .pricing:not(.pricing--featured) .pricing-btn:hover {
    background: var(--as-100) !important;
    border-color: var(--as-500);
}
#pricing .pricing--featured .pricing-hero {
    background: linear-gradient(155deg, var(--as-500) 0%, var(--as-900) 72%);
    border-bottom-color: var(--as-300);
}
#pricing .pricing-badge {
    background: var(--as-900) !important;
}
#pricing .pricing:not(.pricing--featured) .pricing-amount {
    color: var(--as-900);
}
#pricing .pricing-pill {
    background: var(--as-300);
    color: var(--as-900);
    box-shadow: 0 4px 14px rgba(143, 209, 189, .35);
}
#pricing .pricing-recommended {
    color: var(--as-100);
}
#pricing .pricing:not(.pricing--featured) .pricing-link-alt:hover {
    color: var(--as-900) !important;
}

/* Botões dos planos */
#pricing .pricing-btn {
    position: relative;
    gap: 14px;
    padding: 8px 8px 8px 26px;
    min-height: 58px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
    justify-content: space-between;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
#pricing .pricing-btn .btn-wrap {
    flex: 1;
    text-align: center;
}
#pricing .pricing-btn .btn-wrap .text-one,
#pricing .pricing-btn .btn-wrap .text-two {
    justify-content: center;
    width: 100%;
}
#pricing .pricing-btn .cl-plan-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    transition: transform .25s ease, background .2s ease, color .2s ease;
}
#pricing .pricing-btn:hover {
    transform: translateY(-3px);
}
#pricing .pricing-btn:hover .cl-plan-ico {
    transform: translateX(3px) rotate(-45deg);
}
#pricing .pricing-btn:focus-visible {
    outline: 3px solid rgba(63, 159, 134, .45);
    outline-offset: 3px;
}

#pricing .pricing:not(.pricing--featured) .pricing-btn {
    background: var(--as-50) !important;
    color: var(--as-900) !important;
    border: 2px solid var(--as-500);
    box-shadow: 0 6px 18px rgba(31, 79, 69, .08);
}
#pricing .pricing:not(.pricing--featured) .pricing-btn .cl-plan-ico {
    background: var(--as-500);
    color: #fff;
}
#pricing .pricing:not(.pricing--featured) .pricing-btn:hover {
    background: var(--as-500) !important;
    color: #fff !important;
    border-color: var(--as-500);
    box-shadow: 0 14px 30px rgba(63, 159, 134, .3);
}
#pricing .pricing:not(.pricing--featured) .pricing-btn:hover .cl-plan-ico {
    background: #fff;
    color: var(--as-500);
}

#pricing .pricing--featured .pricing-btn {
    background: linear-gradient(135deg, var(--as-500) 0%, var(--as-900) 100%) !important;
    color: #fff !important;
    border: 0;
    box-shadow: 0 12px 28px rgba(31, 79, 69, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
#pricing .pricing--featured .pricing-btn .cl-plan-ico {
    background: var(--as-300);
    color: var(--as-900);
}
#pricing .pricing--featured .pricing-btn:hover {
    background: linear-gradient(135deg, #47b095 0%, var(--as-500) 100%) !important;
    box-shadow: 0 18px 38px rgba(31, 79, 69, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
}
#pricing .pricing--featured .pricing-btn:hover .cl-plan-ico {
    background: #fff;
}
#pricing .pricing--featured .pricing-bottom ul li i {
    color: var(--as-500);
}
#pricing .pricing--featured .pricing-btn {
    background: var(--as-500) !important;
    color: #fff !important;
}
#pricing .pricing--featured .pricing-btn:hover {
    background: var(--as-900) !important;
}
.pricing.two {
    background-color: var(--as-900);
}
.pricing.two .pricing-top {
    background-color: var(--as-300);
}

/* Rodapé */
footer {
    background-color: var(--as-950);
}
footer ul.wpfood-footer-social {
    gap: 10px;
}
footer .wpfood-footer-social li a {
    background-color: transparent !important;
    border-color: rgba(143, 209, 189, .25);
    color: var(--as-50);
}
footer .wpfood-footer-social i {
    background-color: rgba(143, 209, 189, .14) !important;
    color: var(--as-50);
}
footer .wpfood-footer-social li a:hover i {
    background-color: var(--as-300) !important;
    color: var(--as-900);
}
.footer-form input {
    background-color: rgba(143, 209, 189, .1);
    border-color: rgba(143, 209, 189, .3);
}
.footer-form input::placeholder {
    color: rgba(246, 251, 249, .6);
}
.footer-form input:focus {
    border-color: var(--as-300);
}
footer .wpfood-footer-social li a:hover {
    color: var(--as-900);
    background-color: var(--as-300);
    border-color: var(--as-300);
}
footer p,
footer .copyright p {
    color: rgba(246, 251, 249, .72);
}

/* Menu mobile */
.cl-mobile-nav__panel {
    background: var(--as-900);
}

/* Chatbot */
#chatbot-bubble {
    background: var(--as-500) !important;
    box-shadow: 0 10px 28px rgba(31, 79, 69, .35) !important;
}
#chatbot-bubble:hover {
    background: var(--as-900) !important;
    box-shadow: 0 14px 34px rgba(31, 79, 69, .45) !important;
}
#chatbot-bubble i {
    font-size: 26px;
    color: #fff;
}
#chatbot-header,
#chatbot-send,
.user-msg {
    background: linear-gradient(135deg, var(--as-500) 0%, var(--as-900) 100%) !important;
}
.bot-msg {
    border-left-color: var(--as-500) !important;
}
#chatbot-messages button,
#chatbot-messages .btn-option,
#chatbot-messages .chatbot-btn,
#chatbot-messages .chatbot-btn-sugestao,
#chatbot-messages .chatbot-btn-categoria {
    background: var(--as-500) !important;
    background-image: none !important;
    color: #fff !important;
}
#chatbot-messages button:hover,
#chatbot-messages .btn-option:hover,
#chatbot-messages .chatbot-btn:hover,
#chatbot-messages .chatbot-btn-sugestao:hover,
#chatbot-messages .chatbot-btn-categoria:hover {
    background: var(--as-900) !important;
}
#chatbot-messages a.destaque,
#chatbot-messages .chatbot-btn-sugestao.destaque {
    background: var(--as-300) !important;
    color: var(--as-900) !important;
}
#chatbot-messages a.destaque:hover,
#chatbot-messages .chatbot-btn-sugestao.destaque:hover {
    background: var(--as-100) !important;
}
#chatbot-input:focus {
    border-color: var(--as-500);
}
#chatbot-messages .bot-msg a:not(.chatbot-btn):not(.chatbot-btn-sugestao):not(.btn-option) {
    color: var(--as-500) !important;
}
.typing-dot {
    background: var(--as-500);
}
#chatbot-messages {
    background: linear-gradient(to bottom, var(--as-50) 0%, #fff 100%);
}
