:root {
    /* Colores */
    --color-primary: #50845B; /* Verde principal */
    --color-secondary: #D1B280; /* Ocre suave */
    --color-background: #F5F0E1; /* Fondo claro crema */
    --color-footer-bg: #2C3E2F; /* Verde bosque oscuro para footer */
    --color-button: #7B5B3E; /* Marrón para botones */
    --color-text-dark: #333333; /* Texto oscuro general */
    --color-text-light: #F5F0E1; /* Texto claro (para footer) */
    --color-link-footer: #90B4A0; /* Verde más claro para enlaces de footer */

    /* Colores de fondo de sección (para clases .section-bg-X) */
    --section-bg-1: #E8E1D0;
    --section-bg-2: #FFFBEA;
    --section-bg-3: #D5E0CC;
    --section-bg-4: #F0E8D7;

    /* Tipografía */
    --font-serif: 'Playfair Display', serif; /* Para títulos */
    --font-sans-serif: 'Inter', sans-serif; /* Para cuerpo de texto */
    --font-size-base: 1.125rem; /* 18px para legibilidad */

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Bordes y sombras */
    --border-radius-sm: 0.5rem; /* Bordes suaves */
    --border-radius-md: 1rem;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave y difusa */
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.12);
    --shadow-button-press: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Efecto de presión */

    /* Transiciones */
    --transition-duration: 0.3s;
    --transition-timing-function: ease-in-out;
}

/* Base global */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans-serif);
    line-height: 1.8; /* Mayor interlineado para "aire" */
    color: var(--color-text-dark);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--color-primary);
    line-height: 1.3;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em; /* Ligero ajuste para títulos */
}

h1 {
    font-size: 3.5rem; /* Gran tamaño para H1 */
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: 2.8rem;
    color: var(--color-primary);
}

h3 {
    font-size: 2.2rem;
    color: var(--color-primary);
}

h4 {
    font-size: 1.8rem;
    color: var(--color-primary);
}

p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
    line-height: 1.7; /* Interlineado generoso */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing-function);
}

a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Layout y Espaciado */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

section {
    padding: var(--spacing-xxl) var(--spacing-md); /* Amplio padding para secciones */
    margin-bottom: var(--spacing-xl);
}

/* Clases de fondo de sección */
.section-bg-1 {
    background-color: var(--section-bg-1);
}

.section-bg-2 {
    background-color: var(--section-bg-2);
}

.section-bg-3 {
    background-color: var(--section-bg-3);
}

.section-bg-4 {
    background-color: var(--section-bg-4);
}

/* Header */
.header {
    background-color: rgba(245, 240, 225, 0.9); /* Fondo ligeramente transparente para efecto flotante */
    backdrop-filter: blur(8px); /* Efecto de desenfoque */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-light);
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(209, 178, 128, 0.3); /* Borde sutil */
}

.header-logo img {
    height: 60px; /* Tamaño del logo */
    display: block;
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-lg);
}

.header-nav li a {
    color: var(--color-primary);
    font-family: var(--font-sans-serif);
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-duration) var(--transition-timing-function),
                color var(--transition-duration) var(--transition-timing-function),
                transform var(--transition-duration) var(--transition-timing-function);
    position: relative;
    overflow: hidden;
}

.header-nav li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary);
    transform: translateX(-100%);
    transition: transform var(--transition-duration) var(--transition-timing-function);
    z-index: -1;
    border-radius: var(--border-radius-sm);
}

.header-nav li a:hover::before {
    transform: translateX(0);
}

.header-nav li a:hover {
    color: var(--color-text-light); /* Texto blanco cuando el fondo ocre aparece */
    transform: translateY(-2px);
}


/* Botones (Botones con bordes suaves, efecto de prensa sutil al hacer hover, gradiente lineal de un ocre a un marrón suave. Fuente legible en tono crema oscuro. Formas orgánicas o redondeadas.) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-md); /* Más redondeado */
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing-function);
    color: var(--color-text-light); /* Texto crema oscuro para los botones */
    background: linear-gradient(145deg, var(--color-button), darken(var(--color-button), 10%)); /* Gradiente suave */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.1); /* Sombra sutil y "borde" inferior */
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.btn:hover {
    transform: translateY(-3px); /* Ligera elevación */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(1px); /* Efecto de presión */
    box-shadow: var(--shadow-button-press);
    background: linear-gradient(145deg, darken(var(--color-button), 5%), var(--color-button));
}

/* Efecto de prensa más pronunciado para los botones */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
}

.btn:active::after {
    opacity: 1;
}

/* Cards (Ligeras elevaciones para tarjetas de producto) */
.card {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light); /* Sombra suave */
    padding: var(--spacing-lg);
    transition: transform var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);
    overflow: hidden; /* Para contener bordes redondeados */
}

.card:hover {
    transform: translateY(-5px); /* Elevación al pasar el ratón */
    box-shadow: var(--shadow-medium);
}

/* Footer (Oscuro, profundo verde bosque con tipografía crema clara. Iconos de redes sociales en estilo 'claymorphism' para un aspecto 3D suave. Enlaces en un tono más claro de verde para contraste.) */
.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
    padding: var(--spacing-xxl) var(--spacing-md);
    text-align: center;
    font-size: 0.95rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-section {
    flex: 1;
    min-width: 250px;
    margin: var(--spacing-md);
}

.footer-section h4 {
    color: var(--color-secondary); /* Ocre para títulos de sección */
    font-family: var(--font-serif);
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-section ul li a {
    color: var(--color-link-footer); /* Verde más claro para enlaces */
    transition: color var(--transition-duration) var(--transition-timing-function);
}

.footer-section ul li a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-primary); /* Fondo verde principal para claymorphism */
    color: var(--color-text-light);
    font-size: 1.5rem;
    box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.2), /* Sombra inferior-derecha */
        -5px -5px 10px rgba(255, 255, 255, 0.1); /* Sombra superior-izquierda (luz) */
    transition: all var(--transition-duration) var(--transition-timing-function);
    text-decoration: none;
}

.social-icon:hover {
    transform: scale(1.05);
    box-shadow: 
        8px 8px 15px rgba(0, 0, 0, 0.25), 
        -8px -8px 15px rgba(255, 255, 255, 0.15);
}

.social-icon:active {
    transform: scale(0.95);
    box-shadow: 
        inset 2px 2px 5px rgba(0, 0, 0, 0.3), 
        inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

.footer-bottom {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.7rem;
    }

    .header-nav ul {
        gap: var(--spacing-md);
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    body {
        font-size: 1rem;
    }

    .header {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .header-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Animaciones sutiles (ejemplo: fade-in para elementos al aparecer) */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clases de utilidad para texturas (se pueden aplicar a secciones o contenedores) */
.texture-wood-light {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0dGVybiBpZD0id29vZGVncmFpbiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIyMDAiIHkyPSIyMDAiIHN0cm9rZT0iIzc3NzciIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4wNSIvPgogICAgICAgICAgICA8bGluZSB4MT0iMjAwIiB5MT0iMCIgeDI9IjAiIHkyPSIyMDAiIHN0cm9rZT0iIzc3NzciIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4wNSIvPgogICAgICAgICAgICA8bGluZSB4MT0iMCIgeTE9IjEwMCIgeDI9IjIwMCIgeTI9IjEwMCIgc3Ryb2tlPSIjNzc3NyIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjA1Ii8+CiAgICAgICAgICAgIDxsaW5lIHgxPSIxMDAiIHkxPSIwIiB4Mj0iMTAwIiB5Mj0iMjAwIiBzdHJva2U9IiM3Nzc3IiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuMDUiLz4KICAgICAgICAgICAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMSkiLz4KICAgICAgICAgICAgPHBhdGggZD0iTTAgNjAgQzYwIDMwLCAxNDAgMzAsIDIwMCA2MCIgc3Ryb2tlPSIjNzc3NyIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiIG9wYWNpdHk9IjAuMDgiLz4KICAgICAgICAgICAgPHBhdGggZD0iTTAgMTQwIEM2MCAxNzAsIDE0MCAxNzAsIDIwMCAxNDAiIHN0cm9rZT0iIzc3NzciIHN0cm9rZS13aWR0aD0iMC41IiBmaWxsPSJub25lIiBvcGFjaXR5PSIwLjA4Ii8+CiAgICAgICAgPC9wYXR0ZXJuPgogICAgPC9kZWZzPgogICAgPHJlY3Qgd2lkdG09IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCN3b29kZWdyYWluKSIvPgogICAgPHJlY3Qgd2lkdG09IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmdoYmEoMjQ1LDI0MCwyMjUsMC43KSIvPgo8L3N2Zz4=');
    background-size: 200px 200px;
    background-blend-mode: multiply; /* Para un efecto más sutil */
}

.texture-stone-beige {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0dGVybiBpZD0ic3RvbmV0ZXh0dXJlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMiIGZpbGw9IiM2NjYiLz4KICAgICAgICAgICAgPGNpcmNscyBjeD0iMjUiIGN5PSI3NSIgcj0iMiIgZmlsbD0iIzY2NiIvPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI3NSIgY3k9IjI1IiByPSIyIiBmaWxsPSIjNjY2Ii8+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMjAiIHI9IjEuNSIgZmlsbD0iIzY2NiIvPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI3MCIgY3k9IjgwIiByPSIxLjUiIGZpbGw9IiM2NjYiLz4KICAgICAgICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmdidSgyNDUsMjQwLDIyNSwwLjAyKSIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwIEwxMDAgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjAuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuMSIvPgogICAgICAgICAgICA8cGF0aCBkPSJNIDAgMTAwIEwxMDAgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjAuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuMSIvPgogICAgICAgIDwvcGF0dGVybj4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjc3RvbmV0ZXh0dXJlKSIvPgogICAgPHJlY3Qgd2lkdG09IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmdoYmEoMjQ1LDI0MCwyMjUsMC40KSIvPgo8L3N2Zz4=');
    background-size: 100px 100px;
    background-blend-mode: overlay;
}



/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}