@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-primario: #3B2A20;
        --color-secundario: #F6EFE3;
        --color-acento: #C8873E;
        --color-acento-2: #B23A48;
        --color-texto: #1F1B17;
        --color-fondo: #FFFDF8;
        --color-whatsapp: #25D366;
    }

    body {
        background-color: var(--color-fondo);
        color: var(--color-texto);
        font-family: 'Inter', sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Fraunces', serif;
        color: var(--color-primario);
    }
    
    .font-handwriting {
        font-family: 'Caveat', cursive;
    }
}

@layer components {
    .btn-primary {
        @apply bg-[#3B2A20] text-white px-6 py-3 rounded-full font-medium transition-transform hover:scale-105 active:scale-95;
    }
    .btn-secondary {
        @apply bg-[#C8873E] text-white px-6 py-3 rounded-full font-medium transition-transform hover:scale-105 active:scale-95;
    }
    .btn-outline {
        @apply border-2 border-[#3B2A20] text-[#3B2A20] px-6 py-3 rounded-full font-medium transition-colors hover:bg-[#3B2A20] hover:text-white;
    }
    .btn-whatsapp {
        @apply bg-[#25D366] text-white px-6 py-3 rounded-full font-medium flex items-center justify-center gap-2 transition-transform hover:scale-105;
    }
}

/* Utilidades para animaciones y scroll */
.smooth-scroll {
    scroll-behavior: smooth;
}

.hover-zoom img {
    transition: transform 0.3s ease;
}
.hover-zoom:hover img {
    transform: scale(1.05);
}