/* assets/css/common.css */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 700;
    background-color: var(--color-dark);
    color: var(--color-cream);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: var(--heading-letter-spacing);
}

/* Clase para usar fuente de títulos dinámicamente */
.font-heading {
    font-family: var(--font-heading);
}

/* Fuente para botones y enlaces - sobrescribe font-heading cuando está en a/button */
a:not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(h5 a):not(h6 a),
button,
.btn,
.font-button {
    font-family: var(--font-button) !important;
}

.text-outline {
    -webkit-text-stroke: 3px var(--color-dark);
    paint-order: stroke fill;
}

.text-shadow-hard {
    text-shadow: 4px 4px 0px var(--color-dark);
}

.bg-checker {
    background-color: var(--color-cream);
    background-image:
        linear-gradient(48deg, var(--color-orange) 25%, transparent 25%, transparent 75%, var(--color-orange) 75%),
        linear-gradient(48deg, var(--color-orange) 25%, transparent 25%, transparent 75%, var(--color-orange) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.h-24 {
    height: 5.8rem;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.max-w-md {
    max-width: 34rem !important;
}