/* Custom styles that can't be done with Tailwind utility classes */

html {
    scroll-behavior: smooth;
}

.circled {
    position: relative;
    display: inline-block;
}

.circled::after {
    content: '';
    position: absolute;
    top: -0.15em;
    left: -0.15em;
    right: -0.15em;
    bottom: -0.1em;
    border: 4px solid #1a1a1a;
    border-radius: 50%;
    pointer-events: none;
}

.wavy-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    text-decoration: none;
}

.wavy-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none'%3E%3Cpath d='M0 4 Q7 1 14 4 T28 4' stroke='%231a1a1a' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom;
    background-size: 28px 8px;
}

.strategia-title {
    font-size: clamp(1.65rem, 7.2vw, 5.5rem);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .strategia-title {
        font-size: clamp(1.65rem, 8.2vw, 2.1rem);
        white-space: normal;
    }
}

@media (max-width: 360px) {
    .strategia-title {
        font-size: clamp(1.5rem, 8.6vw, 1.95rem);
    }
}

.wave-text {
    font-family: 'Archivo Black', 'Arial Black', sans-serif;
    font-size: 120px;
    fill: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
}