/* ==========================================================================
   FASES — camada de interação (accordion) sobre o design em style.css
   Base (cascata + .fprod) fica no style.css. Aqui só o comportamento:
   hover (traz pra frente + CTA) e clique (expande + detalhe).
   ========================================================================== */

/* Elementos da interação ocultos por padrão (no mobile usa-se .fcard-mobile) */
.fcard-detail,
.fcta,
.fcard-close { display: none; }

@media (min-width: 861px) {

    /* produtos não capturam o mouse → o hover chega aos cards por baixo */
    .fprod {
        pointer-events: none;
        transition: left .4s ease, top .4s ease, width .4s ease;
    }

    .fcard { cursor: pointer; }
    .fcard-title { transition: left .4s ease, transform .4s ease; }

    /* ----------------------------------------------------------------------
       HOVER — traz o card (e seu produto) para a frente
    ---------------------------------------------------------------------- */
    .fases-stage[data-hover="plan"] .fcard--plan   { z-index: 20; }
    .fases-stage[data-hover="plan"] .fprod--plan90 { z-index: 21; }
    .fases-stage[data-hover="plan"] .fprod--plan30 { z-index: 22; }

    .fases-stage[data-hover="gest"] .fcard--gest   { z-index: 20; }
    .fases-stage[data-hover="gest"] .fprod--gest   { z-index: 21; }

    .fases-stage[data-hover="amam"] .fcard--amam   { z-index: 20; }
    .fases-stage[data-hover="amam"] .fprod--amam   { z-index: 21; }

    /* Ao trazer pra frente, o card vira "vitrine": título centralizado e
       produto no tamanho dos demais, centralizado no box. */
    .fases-stage[data-hover="gest"] .fcard--gest .fcard-title,
    .fases-stage[data-hover="amam"] .fcard--amam .fcard-title {
        left: 50%;
        transform: translateX(-50%);
    }
    .fases-stage[data-hover="gest"] .fprod--gest {
        left: calc(31% + 25px);
        top: 20%;
        width: 34%;
    }
    .fases-stage[data-hover="amam"] .fprod--amam {
        left: calc(57.25% + 40px);
    }

    /* ----------------------------------------------------------------------
       CTA "Saiba mais" — camada acima de tudo, no rodapé de cada card
    ---------------------------------------------------------------------- */
    .fcta {
        position: absolute;
        bottom: 8%;
        transform: translate(-50%, 12px);
        z-index: 30;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 30px;
        border-radius: var(--radius-pill, 50px);
        background: #fff;
        color: var(--coral, #de6a6e);
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: .95rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
    }
    .fcta i { font-size: .8rem; }
    .fcta:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .26); }

    .fcta--plan { left: 22.6%; }
    .fcta--gest { left: 48%; }
    .fcta--amam { left: 77.56%; }

    .fases-stage[data-hover="plan"] .fcta--plan,
    .fases-stage[data-hover="gest"] .fcta--gest,
    .fases-stage[data-hover="amam"] .fcta--amam,
    .fcta:focus-visible {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }

    /* ----------------------------------------------------------------------
       EXPANDIDO — o card preenche o palco e mostra as informações
    ---------------------------------------------------------------------- */
    .fases-stage.has-expanded { aspect-ratio: auto; }
    .fases-stage.has-expanded .fprod,
    .fases-stage.has-expanded .fcta,
    .fases-stage.has-expanded .fcard:not(.is-expanded) { display: none; }

    .fcard.is-expanded {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        z-index: 40;
        cursor: default;
        padding: 40px 52px 46px;
        animation: fcardExpand .42s cubic-bezier(.4, 0, .2, 1);
    }
    @keyframes fcardExpand {
        from { opacity: .35; transform: scale(.975); }
        to   { opacity: 1;   transform: scale(1); }
    }

    /* Planejamento expandido: degradê invertido — parte escura no canto
       direito, descendo na diagonal para a esquerda */
    .fcard--plan.is-expanded {
        background: linear-gradient(210deg, #f39991 0%, #f7e3ee 100%);
    }

    .fcard.is-expanded .fcard-title {
        position: static;
        left: auto;
        top: auto;
        font-size: clamp(2rem, 3vw, 2.8rem);
        margin: 0 0 26px;
    }

    .fcard.is-expanded .fcard-detail { display: block; }

    /* fade-in escalonado do conteúdo */
    .fcard.is-expanded .fcard-detail-top,
    .fcard.is-expanded .fcard-detail-benefits {
        opacity: 0;
        transform: translateY(16px);
        animation: fcardFade .5s ease forwards;
    }
    .fcard.is-expanded .fcard-detail-top      { animation-delay: .18s; }
    .fcard.is-expanded .fcard-detail-benefits { animation-delay: .32s; }
    @keyframes fcardFade { to { opacity: 1; transform: translateY(0); } }

    /* Botão fechar */
    .fcard.is-expanded .fcard-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 22px;
        right: 22px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, .25);
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        transition: background .2s ease;
    }
    .fcard.is-expanded .fcard-close:hover { background: rgba(255, 255, 255, .42); }

    /* ----- layout do detalhe ----- */
    .fcard-detail-top {
        display: grid;
        grid-template-columns: 460px 1fr;
        gap: 48px;
        align-items: center;
    }
    .fcard-detail-media {
        position: relative;
        min-height: 370px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        transform: translateX(30px);
    }
    .fcard-detail-media .pimg-lg {
        width: 75%;
        max-width: 380px;
        filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .3));
    }
    .fcard-detail-media .pimg-sm {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 53%;
        max-width: 245px;
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
    }

    .fcard-headline {
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: clamp(1.05rem, 1.45vw, 1.35rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        margin: 0 0 16px;
    }
    .fcard-bullets {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .fcard-bullets li {
        position: relative;
        padding-left: 18px;
        font-size: .8rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .92);
    }
    .fcard-bullets li::before {
        content: '•';
        position: absolute;
        left: 0;
        top: -1px;
        color: rgba(255, 255, 255, .75);
        font-size: 1.1rem;
    }

    .fcard-detail-benefits { margin-top: 34px; }
    .fcard-benefits-title {
        text-align: center;
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 22px;
    }

    .fcard-spheres {
        list-style: none;
        margin: 0 0 30px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        align-items: start;
        gap: 16px 34px;
    }
    .fsphere { display: flex; justify-content: center; }
    /* intercalado (zigzag): os pares descem */
    .fcard-spheres .fsphere:nth-child(even) { margin-top: 54px; }
    .fcard-spheres--gest .fsphere:nth-child(even),
    .fcard-spheres--amam .fsphere:nth-child(even) { margin-top: 46px; }

    .fsphere-wrap {
        position: relative;
        display: block;
        width: 140px;
        height: 140px;
        transition: transform .22s ease;
    }
    /* Gestação e Amamentação: 8 benefícios numa única linha (esferas responsivas) */
    .fcard-spheres--gest,
    .fcard-spheres--amam {
        grid-template-columns: repeat(8, 1fr);
        gap: 0 14px;
    }
    .fcard-spheres--gest .fsphere-wrap,
    .fcard-spheres--amam .fsphere-wrap {
        width: 100%;
        max-width: 118px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .fcard-spheres--gest .fsphere:nth-child(even),
    .fcard-spheres--amam .fsphere:nth-child(even) { margin-top: 40px; }
    .fcard-spheres--gest .fsphere-label,
    .fcard-spheres--amam .fsphere-label { font-size: .56rem; padding: 6px; }
    .fsphere-wrap:hover { transform: scale(1.08) translateY(-3px); }
    .fsphere-wrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
    }
    .fsphere-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 9px;
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: .72rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        pointer-events: none;
    }
    .fcard-spheres--gest .fsphere-label,
    .fcard-spheres--amam .fsphere-label { font-size: .62rem; padding: 8px; }

    .fcard-buy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        min-width: 250px;
        width: max-content;
        margin: 0 auto;
        padding: 15px 30px;
        border-radius: var(--radius-pill, 50px);
        background: #fff;
        color: var(--coral, #de6a6e);
        border: none;
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
        transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    }
    .fcard-buy i { font-size: 1rem; }
    .fcard-buy:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
        color: #c84f5e;
    }

    @media (max-width: 1024px) {
        .fcard-detail-top { grid-template-columns: 380px 1fr; gap: 32px; }
        .fsphere-wrap { width: 122px; height: 122px; }
        .fcard-spheres--gest .fsphere-wrap,
        .fcard-spheres--amam .fsphere-wrap { max-width: 104px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fcard.is-expanded,
    .fcard.is-expanded .fcard-detail-top,
    .fcard.is-expanded .fcard-detail-benefits {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   POPUP — farmácias parceiras (abre no "Quero comprar")
   ========================================================================== */
.fcompra-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fcompra-modal.is-open { display: flex; }

.fcompra-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, .72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.fcompra-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    background: #fff;
    border-radius: 28px;
    padding: 50px 44px 54px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
    text-align: center;
    animation: fcompraIn .3s ease;
}
@keyframes fcompraIn {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.fcompra-close {
    position: absolute;
    top: 16px;
    right: 22px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--coral, #de6a6e);
    cursor: pointer;
    transition: transform .2s ease;
}
.fcompra-close:hover { transform: scale(1.15); }

.fcompra-title {
    font-family: var(--font, 'Poppins', sans-serif);
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    font-weight: 600;
    color: #56688f;
    margin: 0 0 38px;
}

.fcompra-logos {
    display: flex;
    flex-wrap: nowrap;          /* todos na mesma linha */
    align-items: center;
    justify-content: center;
    gap: 36px;
}
.fcompra-logos a {
    flex: 1 1 0;                /* slots de largura igual = mesmo tamanho */
    min-width: 0;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.fcompra-logos a:hover { transform: scale(1.06); }
.fcompra-logos img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 680px) {
    .fcompra-box { padding: 44px 22px 40px; border-radius: 22px; }
    .fcompra-logos { flex-wrap: wrap; gap: 24px 28px; }
    .fcompra-logos a { flex: 0 0 40%; height: 44px; }
}

/* ==========================================================================
   MOBILE — acordeão: o "Saiba mais" abre as informações dentro do card
   ========================================================================== */
@media (max-width: 860px) {

    /* botão vira toggle */
    .fcard-mtoggle { border: none; cursor: pointer; }
    .fcard-mtoggle i { transition: transform .25s ease; }
    .fcard.is-mobile-open .fcard-mtoggle i { transform: rotate(90deg); }

    /* detalhe entra dentro do card ao abrir */
    .fcard.is-mobile-open .fcard-detail {
        display: block;
        width: 100%;
        margin-top: 22px;
        text-align: left;
        animation: fcardFadeM .35s ease;
    }
    @keyframes fcardFadeM {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }

    /* a imagem já aparece no topo do card → não repete no detalhe */
    .fcard-detail-top { display: block; }
    .fcard-detail-media { display: none; }

    /* título + tópicos */
    .fcard-headline {
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        margin: 0 0 14px;
    }
    .fcard-bullets {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .fcard-bullets li {
        position: relative;
        padding-left: 16px;
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: .82rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .92);
    }
    .fcard-bullets li::before {
        content: '•';
        position: absolute;
        left: 0;
        top: -1px;
        color: rgba(255, 255, 255, .75);
        font-size: 1.1rem;
    }

    /* benefícios */
    .fcard-detail-benefits { margin-top: 26px; }
    .fcard-benefits-title {
        text-align: center;
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 18px;
    }

    /* esferas — grade responsiva (2 col no plan, 3 col no gest/amam) */
    .fcard-spheres {
        list-style: none;
        margin: 0 auto 24px;
        padding: 0;
        max-width: 330px;
        display: grid;
        gap: 14px 12px;
        justify-content: center;
    }
    .fcard-spheres--plan { grid-template-columns: repeat(2, 1fr); }
    .fcard-spheres--gest,
    .fcard-spheres--amam { grid-template-columns: repeat(3, 1fr); }
    .fsphere { display: flex; justify-content: center; }
    .fsphere-wrap {
        position: relative;
        width: 100%;
        max-width: 132px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }
    .fsphere-wrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
    }
    .fsphere-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 7px;
        font-family: var(--font, 'Poppins', sans-serif);
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        pointer-events: none;
    }
    .fcard-spheres--plan .fsphere-label { font-size: .6rem; }
    .fcard-spheres--gest .fsphere-label,
    .fcard-spheres--amam .fsphere-label { font-size: .5rem; padding: 5px; }

    /* botão comprar */
    .fcard-buy {
        display: flex;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 13px 30px;
        border-radius: var(--radius-pill, 50px);
        background: #fff;
        color: var(--coral, #de6a6e);
        font-family: var(--font, 'Poppins', sans-serif);
        font-size: .95rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    }
    .fcard-buy i { font-size: .85rem; }
}

/* ==========================================================================
   N1 — esferas clicáveis: botão + pop-up do nutriente
   ========================================================================== */
button.fsphere-wrap {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.fnutri-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fnutri-modal.is-open { display: flex; }
.fnutri-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, .72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.fnutri-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    width: 100%;
    max-width: 820px;
    padding: 20px 46px 20px 26px;
    border-radius: 50px;
    background: linear-gradient(90deg, #f7dde6 0%, #ec7f9f 100%);   /* brilho / Planejamento */
    box-shadow: 0 26px 64px rgba(0, 0, 0, .45);
    animation: fcompraIn .3s ease;
}
.fnutri-modal--roxa .fnutri-box {
    background: linear-gradient(90deg, #e7d6e6 0%, #97608f 100%);   /* roxa / Gestação e Amamentação */
}
.fnutri-sphere {
    position: relative;
    flex-shrink: 0;
    width: 116px;
    height: 116px;
}
.fnutri-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .3));
}
.fnutri-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    font-family: var(--font, 'Poppins', sans-serif);
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    pointer-events: none;
}
.fnutri-text {
    flex: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font, 'Poppins', sans-serif);
    font-size: clamp(1.05rem, 1.9vw, 1.35rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}
.fnutri-close {
    position: absolute;
    top: 14px;
    right: 24px;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: transform .2s ease;
}
.fnutri-close:hover { transform: scale(1.2); }

@media (max-width: 560px) {
    .fnutri-box {
        flex-direction: column;
        gap: 14px;
        padding: 32px 22px 26px;
        border-radius: 28px;
    }
    .fnutri-sphere { width: 100px; height: 100px; }
    .fnutri-text { font-size: 1.05rem; }
}