:root {
    --terra: #b8532f;
    --terra-dark: #9e4529;
    --terra-soft: rgba(184, 83, 47, 0.10);
    --terra-text: #96432b;
    --terra-on-dark: #e2895f;
    --ink: #17140f;
    --ink-2: #211d17;
    --cream: #f6f1ea;
    --cream-2: #ede6dc;
    --paper: #fffdf9;
    --text: #211d17;
    --muted: #6b6559;
    --muted-light: #a8a294;
    --line: rgba(23, 20, 15, 0.10);
    --line-dark: rgba(255, 255, 255, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--cream);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

/* body { font-family: 'Inter', sans-serif; } */
h1, h2, h3 { 
    font-family: 'Audiowide', sans-serif; 
    letter-spacing: -0.02em;
    /* line-height: 1.05; */
}

@font-face {
    font-family: Ethnocentric;
    src: url(/assets/font/Ethnocentric-Regular.woff);
}
.logo {
    font-family: 'Ethnocentric', sans-serif;
}
.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--terra-text);
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.glass { 
    background: rgba(73, 64, 64, 0.8); 
    /* background: rgba(255, 255, 255, 0.8); */
    backdrop-filter: blur(10px); 
}

nav {
    font-family: 'Audiowide', sans-serif;
}

.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 100;
    transition: all 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

.bg-dynamic-section {
    /* background-image: var(--section-bg, none); */
    background-image: url(../img/other/fondo_003.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: background-image 0.5s ease-in-out;
}

.bg-overlay-light {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8));
}

.bg-overlay-medium {
    background: linear-gradient(rgba(7, 0, 0, 0.1), rgba(182, 94, 94, 0.10));
}

.bg-overlay-dark {
    background: linear-gradient(rgba(15,23,42,0.8), rgba(15,23,42,0.8));
}

.bg-selector-panel {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1000;
    background: white;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid #e2e8f0;
    max-width: 200px;
}

.flotarmouse {
    position: relative;
    animation: flotar 2s infinite alternate;
}