@import "tailwindcss";

/* public/css/app.css */
@import "./shared/variables.css";
@import "./shared/nav.css";
@import "./shared/footer.css";
@import "./shared/componentes.css";
@import "./web/home.css";

@layer base {
    body {
        font-family: 'Poppins', sans-serif;
        @apply bg-gray-50 text-gray-800 antialiased;
    }
}

@layer components {
    /* --- NAVBAR CUSTOM --- */
    .chifa-nav {
        @apply bg-white/95 backdrop-blur-md shadow-sm fixed top-0 left-0 w-full z-50 transition-all duration-300 h-20 flex items-center;
    }
    
    .nav-link {
        @apply text-gray-600 hover:text-red-700 font-medium px-1 text-sm transition-colors duration-200 relative pb-1;
    }
    
    .nav-link-active {
        @apply text-red-700 font-semibold border-b-2 border-red-700;
    }

    /* --- BOTONES CORPORATIVOS --- */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 text-sm font-bold text-white bg-red-700 hover:bg-red-800 rounded-xl shadow-lg shadow-red-700/20 transition-all duration-200 transform hover:-translate-y-0.5;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white bg-zinc-800/90 hover:bg-zinc-800 rounded-xl border border-zinc-700 transition-all duration-200;
    }
    
    .btn-card {
        @apply w-full bg-red-700 hover:bg-red-800 text-white text-center py-2.5 rounded-xl font-semibold text-xs tracking-wide transition-colors duration-200 shadow-sm;
    }

    /* --- CONTENEDORES Y TARJETAS --- */
    .chifa-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .section-title {
        @apply text-3xl font-extrabold text-gray-900 sm:text-4xl tracking-tight;
    }

    .card-promo {
        @apply bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100 flex flex-col justify-between hover:shadow-xl transition-all duration-300 group;
    }

    .card-plato {
        @apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col justify-between hover:shadow-md transition-all duration-200 group;
    }

    /* --- BENEFICIOS Y TESTIMONIOS --- */
    .card-beneficio {
        @apply bg-white p-6 rounded-2xl border border-gray-100 shadow-sm flex items-start gap-4 hover:scale-[1.02] transition-transform duration-200;
    }

    .card-testimonio {
        @apply bg-white p-8 rounded-2xl shadow-sm border border-gray-100 flex flex-col justify-between space-y-6 relative;
    }

    /* --- FOOTER CUSTOM --- */
    .chifa-footer {
        @apply bg-zinc-900 text-gray-400 pt-16 pb-8 border-t border-zinc-800 text-sm;
    }
}