/* ============================================================
   razones-lactancia-materna · línea de razones, gotas y datos
   ============================================================ */

/* ---------- figuras ---------- */

.fig {
    margin: 38px 0 34px;
    padding: 28px 26px 20px;
    background: var(--white);
    border: 1px solid rgba(33, 48, 42, .08);
    border-radius: 28px;
    box-shadow: 0 8px 30px rgba(42, 56, 48, .04)
}

.fig svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.fig figcaption {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(33, 48, 42, .07);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted)
}

/* ---------- la leche evoluciona: gotas con nivel ---------- */

.leche-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 440px;
    margin: auto
}

.leche-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.leche-unit svg {
    width: min(96px, 100%);
    height: auto
}

.leche-base {
    fill: var(--paper-2);
    stroke: rgba(33, 48, 42, .14);
    stroke-width: 1.5
}

.leche-fill {
    transform-box: fill-box;
    transform-origin: top;
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(.2, .8, .2, 1)
}

.leche-unit:nth-child(1) .leche-fill { --h: 32%; fill: #dcae87 }
.leche-unit:nth-child(2) .leche-fill { --h: 64%; fill: #a9c2b0; transition-delay: .15s }
.leche-unit:nth-child(3) .leche-fill { --h: 94%; fill: #7e9d8a; transition-delay: .3s }

.is-visible .leche-fill {
    transform: translateY(calc(100% - var(--h)))
}

.leche-unit strong {
    font: 400 22px var(--serif);
    letter-spacing: -.02em
}

.leche-unit span {
    font: 700 9px var(--manrope);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    text-align: center
}

/* ---------- línea de razones: círculos numerados ---------- */

.razones {
    margin: 6px 0 4px
}

.razon {
    position: relative;
    padding: 0 0 30px 62px
}

.razon:last-child {
    padding-bottom: 8px
}

.razon:after {
    content: "";
    position: absolute;
    left: 19px;
    top: 46px;
    bottom: 4px;
    width: 1px;
    background: rgba(33, 48, 42, .14)
}

.razon:last-child:after {
    display: none
}

.razon-num {
    position: absolute;
    left: 0;
    top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(207, 141, 144, .13);
    color: var(--terra);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 400 20px var(--serif)
}

.razon-body h3 {
    font: 400 24px/1.15 var(--serif);
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 4px 0 10px
}

.razon-body p {
    margin: 0
}

/* ---------- tarjetas de datos ---------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 34px 0 8px
}

.stat-card {
    padding: 22px 18px 18px;
    background: var(--white);
    border: 1px solid rgba(33, 48, 42, .08);
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(42, 56, 48, .04)
}

.stat-card strong {
    display: block;
    font: 400 42px/.9 var(--serif);
    letter-spacing: -.03em;
    color: var(--sage-deep)
}

.stat-card span {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted)
}

/* ---------- referencias plegables ---------- */

.refs {
    border: 1px solid rgba(33, 48, 42, .09);
    border-radius: 20px;
    background: var(--white);
    padding: 2px 20px;
    margin: 18px 0 10px;
    box-shadow: 0 8px 30px rgba(42, 56, 48, .04)
}

.refs summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font: 700 10px var(--manrope);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sage-deep)
}

.refs summary::-webkit-details-marker {
    display: none
}

.refs summary:before {
    content: "✦";
    font-size: 13px;
    color: var(--terra)
}

.refs summary:after {
    content: "+";
    margin-left: auto;
    font: 400 18px var(--serif);
    color: var(--muted)
}

.refs[open] summary:after {
    content: "–"
}

.refs ol {
    list-style: decimal;
    margin: 0 0 16px;
    padding: 0 4px 0 22px
}

.refs ol li {
    padding: 0;
    border: 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 10px
}

.refs ol li:before {
    content: none
}

.refs ol li:last-child {
    margin-bottom: 0
}

.refs ol li strong {
    color: #4a5a51;
    font-weight: 600
}

.refs ol li em {
    font-style: italic
}

/* ---------- aparición al hacer scroll ---------- */

@media (prefers-reduced-motion: no-preference) {

    .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1)
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none
    }

    .razones .reveal:nth-child(2) { transition-delay: .08s }
    .razones .reveal:nth-child(3) { transition-delay: .16s }
    .razones .reveal:nth-child(4) { transition-delay: .24s }

    .stat-row .reveal:nth-child(2) { transition-delay: .1s }
    .stat-row .reveal:nth-child(3) { transition-delay: .2s }
}

/* ---------- responsive ---------- */

@media(max-width:620px) {
    .leche-track {
        gap: 8px
    }

    .stat-row {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .fig {
        padding: 18px 14px 14px;
        border-radius: 22px
    }

    .razon {
        padding-left: 52px
    }

    .razon:after {
        left: 15px
    }

    .razon-body h3 {
        font-size: 21px
    }
}