:root {
    --leaf: #6dbb6b;
    --trunk: #8b5a2b;
    --branch: #75502a;
    --paper: #fffef8;
}

.tree-wrap {
    max-width: 65em;
    margin: 1rem auto;
    padding: 0 0.5rem;
}

.tree {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 120%, #e6f5e6 0 52%, #dfeee0 52.5% 100%);
    box-shadow: 0 6px 30px rgba(0, 0, 0, .08) inset;
    overflow: hidden;
}

.tree svg {
    width: 100%;
    height: 100%;
    display: block;
}

.node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    background: var(--paper);
    border: 2px solid rgba(0, 0, 0, .06);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: .65rem .8rem;
    width: clamp(160px, 29vw, 240px);
    font: 500 0.7rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.node h4 {
    margin: 0 0 .35rem;
    font-size: .8rem;
}

.node p {
    margin: 0;
    font-weight: 400;
    font-size: .7rem;
}

.node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--leaf);
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
}

.node:hover {
    transform: translate(-50%, -50%) scale(1.02);
    z-index: 2;
    cursor: pointer;
}

/* ******************************* TABLETA ***************************** */
/* Small devices (tablets, 640px and up) */
@media screen and (min-width: 641px),
handheld and (min-width: 641px) and (max-width: 980px) {
    .node h4 {
        margin: 0 0 .35rem;
        font-size: .7rem;
    }

    .node p {
        margin: 0;
        font-weight: 400;
        font-size: .6rem
    }
}

/* ******************************* MOBIL ***************************** */
@media (max-width: 560px) {
    .tree {
        display: grid;
        grid-template-columns: 1fr;
        gap: .75rem;
        aspect-ratio: auto;
        height: auto;
        padding: .5rem;
    }

    .tree svg {
        display: none !important;
    }

    .node {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: .65rem .75rem;
    }

    .node::before {
        display: none;
    }

    .node h4 {
        font-size: .7rem;
    }

    .node p {
        font-size: .6rem;
    }

    .tree-wrap {
        max-width: 90%;
        margin: 1rem auto;
        padding: 0 .5rem;
    }
}
/* ******************************* CALCULATOR *************************** */
/* Medium and large devices (desktops, 980px and up) */
@media screen and (min-width: 981px),
handheld and (min-width: 640px) {
        .node h4 {
        font-size: .9rem;
    }

    .node p {
        font-size: .8rem;
    }
}