:root {
    --font-heading: 'Montserrat', sans-serif;
    --font-base: 'Inter', sans-serif;
}

/* Dark background for HTML to prevent white flash during page loads */
html {
    background-color: #003466;
}

body {
    font-family: var(--font-base);
    background-color: #f8fafc;
    /* Keep content light */
    color: #003466;
    overflow-x: hidden;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

/* Global Typography Overrides for Text Wrapping */
html,
body,
p,
span,
div,
a,
li {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Ondas (index) */
.waves-svg {
    pointer-events: none;
}

.semicircle-hitbox {
    pointer-events: auto;
    cursor: pointer;
    fill: none;
    stroke: transparent;
    stroke-width: 30;
}

.semicircle-path {
    pointer-events: none;
    transition: stroke-opacity 0.4s ease-out, stroke-width 0.4s ease-out;
}

.semicircle-group:hover .semicircle-path {
    stroke-opacity: 1 !important;
    stroke-width: calc(var(--base-stroke) * 1.3) !important;
}

@keyframes wave-flow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100px);
    }
}

/* Animaciones generales */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Utilidades */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Scroll Reveal Utility */
.scroll-reveal {
    opacity: 0;
    /* Ensure it doesn't block interaction when hidden if strictly needed,
       but opacity 0 usually captures clicks unless visibility: hidden.
       However, we want it to animate in immediately so it shouldn't be an issue.
       For safety, we can rely on opacity. */
}

/* Clip Path Utilities */
.clip-path-slant {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}