/* =========================================================
   COMPONENTE: TEXTO SERPIENTE
========================================================= */

.texto-serpiente {
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.texto-serpiente__svg {
    display: block;
    width: max(125vw, 1800px);
    height: auto;
    margin-left: 50%;
    overflow: visible;
    transform: translateX(-50%);
}

.texto-serpiente__ribbon {
    fill: none;
    stroke: var(
        --texto-serpiente-background,
        #A480C6
    );
    stroke-width: 68px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.texto-serpiente__text {
    fill: var(
        --texto-serpiente-color,
        #ffffff
    );
}

.texto-serpiente__text,
.texto-serpiente__measure {
    font-size: 38px;
}

.texto-serpiente__text {
    fill: var(
        --texto-serpiente-color,
        #ffffff
    );
}

.texto-serpiente__measure {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .texto-serpiente__svg {
        width: max(155vw, 1500px);
    }

    .texto-serpiente__ribbon {
        stroke-width: 62px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

    .texto-serpiente__svg {
        width: max(260vw, 1250px);
    }

    .texto-serpiente__ribbon {
        stroke-width: 58px;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .texto-serpiente__text {
        transform: none;
    }

}