/*
 * Dra. Lara França — Consulta Online | v1.1.0
 * CSS exclusivo do widget. Linha do tempo no mobile e botão outline
 * com cores de hover próprias (sem herdar magenta do Elementor/tema).
 */
.lfco,
.lfco * { box-sizing: border-box; }

.lfco {
    --lfco-rule-color: #899b85;
    --lfco-link-color: #3c4b38;
    --lfco-link-hover-color: #293a2b;
    --lfco-link-border-color: #9aaa93;
    --lfco-link-hover-border-color: #293a2b;
    --lfco-mobile-step-gap: 28px;
    --lfco-motion-duration: 600ms;
    width: 100%;
    color: #3c4b38;
    background-color: #fff;
    padding: 80px 30px;
}

.lfco__container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

.lfco__header {
    margin: 0 0 46px;
    text-align: left;
}

.lfco__title {
    margin: 0 0 13px;
    color: #3c4b38;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.7vw, 48px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.lfco__intro {
    margin: 0;
    max-width: 580px;
    color: #667061;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}

.lfco__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lfco-columns, 4), minmax(0, 1fr));
    align-items: start;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lfco-step {
    min-width: 0;
    position: relative;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--lfco-rule-color);
    transition:
        opacity var(--lfco-motion-duration) ease,
        transform var(--lfco-motion-duration) cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--lfco-delay, 0ms);
}

.lfco-step::marker { content: ''; }

.lfco-step__number {
    display: block;
    margin: 0 0 7px;
    color: #3c4b38;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 44px;
    font-weight: 500;
    line-height: 1;
}

.lfco-step__content { min-width: 0; }

.lfco-step__title {
    margin: 0 0 11px;
    color: #33432f;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.012em;
}

.lfco-step__description {
    margin: 0;
    color: #5d6859;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* Tipografia pouco específica, para permitir customização no painel Elementor. */
.lfco-step__link {
    font-size: 12px;
    font-weight: 650;
}

/* Botão sem preenchimento. Seletores e !important impedem que o tema
   ou as cores globais do Elementor substituam os estados por magenta. */
.lfco .lfco-step__link,
.lfco .lfco-step__link:link,
.lfco .lfco-step__link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    margin-top: 18px;
    padding: 9px 13px;
    border: 1px solid var(--lfco-link-border-color) !important;
    border-radius: 4px;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--lfco-link-color) !important;
    font-family: inherit;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.lfco .lfco-step__link:hover,
.lfco .lfco-step__link:focus-visible,
.lfco .lfco-step__link:active,
.lfco .lfco-step__link:visited:hover {
    border-color: var(--lfco-link-hover-border-color) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--lfco-link-hover-color) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.lfco .lfco-step__link:focus-visible {
    outline: 2px solid var(--lfco-link-hover-border-color) !important;
    outline-offset: 3px;
}

.lfco-step__link-arrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform 220ms ease;
}

.lfco .lfco-step__link:hover .lfco-step__link-arrow,
.lfco .lfco-step__link:focus-visible .lfco-step__link-arrow {
    transform: translate(2px, -2px);
}

.lfco-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 22px;
    margin-top: 58px;
    padding: 25px 30px;
    background-color: #eef2ef;
    border: 1px solid #dbe4db;
    border-radius: 10px;
}

.lfco-summary__item { min-width: 0; }

.lfco-summary__label {
    display: block;
    margin: 0 0 6px;
    color: #3c4b38;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.lfco-summary__value {
    margin: 0;
    color: #3c4b38;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* CTA grande opcional na base (mantido para compatibilidade com v1.0.0). */
.lfco__cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.lfco .lfco__cta-link,
.lfco .lfco__cta-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 13px 22px;
    border-radius: 4px;
    background-color: #3c4b38;
    color: #fdebdD;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: filter 200ms ease, transform 200ms ease;
}

.lfco .lfco__cta-link:hover,
.lfco .lfco__cta-link:focus-visible {
    color: #fdebdD;
    background-color: #3c4b38;
    filter: brightness(1.12);
    text-decoration: none;
    transform: translateY(-1px);
}
.lfco .lfco__cta-link:focus-visible { outline: 2px solid #3c4b38; outline-offset: 3px; }

/* Animação ativada SOMENTE pelo JS após checagens de suporte e acessibilidade.
   Sem JS, com movimento reduzido ou dentro do editor, tudo permanece visível. */
.lfco.lfco--motion-ready .lfco-step:not(.lfco-step--visible) {
    opacity: 0;
    transform: translateY(18px);
}

.lfco.lfco--motion-ready .lfco-step.lfco-step--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .lfco { padding: 64px 24px; }
    .lfco__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
    .lfco__header { margin-bottom: 36px; }
}

/* MOBILE: procedimento vertical com uma única haste conectando todos os nós. */
@media (max-width: 767px) {
    .lfco { padding: 54px 20px; }
    .lfco__title { font-size: clamp(30px, 8vw, 39px); }
    .lfco__intro { font-size: 14px; line-height: 1.7; }
    .lfco__header { margin-bottom: 38px; }

    .lfco .lfco__steps {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        padding: 0;
        overflow: visible;
    }

    /* Cada conexão termina no próximo número, sem prolongar a linha após o passo 4. */
    .lfco .lfco-step:not(:last-child)::before {
        content: '';
        position: absolute;
        z-index: 0;
        left: 23px;
        top: 24px;
        bottom: -24px;
        width: 1px;
        background: var(--lfco-rule-color);
        opacity: 0.75;
        transform-origin: center top;
    }

    .lfco.lfco--motion-ready .lfco-step:not(:last-child)::before {
        transform: scaleY(0);
        transition: transform 850ms cubic-bezier(0.25, 0.65, 0.26, 1) 150ms;
    }

    .lfco.lfco--motion-ready .lfco-step.lfco-step--visible::before {
        transform: scaleY(1);
    }

    .lfco .lfco-step {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 18px;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0 !important;
    }

    .lfco .lfco-step:not(:last-child) {
        padding-bottom: max(24px, var(--lfco-mobile-step-gap));
    }

    .lfco-step__number {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        margin: 0;
        border: 1px solid var(--lfco-rule-color);
        border-radius: 50%;
        background: #f2f5f0;
        color: #3c4b38;
        font-size: 29px;
        font-style: italic;
        line-height: 1;
        box-shadow: 0 0 0 5px #fff;
    }

    .lfco-step__content { min-width: 0; padding: 3px 0 0; }
    .lfco-step__title { margin-bottom: 7px; font-size: 16px; }
    .lfco-step__description { font-size: 14px; line-height: 1.7; }
    .lfco .lfco-step__link { margin-top: 14px; }

    .lfco-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin-top: 42px;
        padding: 24px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lfco *, .lfco *::before, .lfco *::after {
        animation: none !important;
        transition: none !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .lfco.lfco--motion-ready .lfco-step {
        opacity: 1 !important;
        transform: none !important;
    }
}