:root {
    --charcoal: #1e2328;
    --concrete: #c9cccf;
    --orange: #ff6a00;
    --white: #ffffff;
}

@import "tailwindcss";

@theme {  
    --color-charcoal: #1e2328; 
    --color-concrete: #c9cccf; 
    --color-orange: #ff6a00;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fdfdfd; /* Un blanco ligeramente más cálido */
}
.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1581092448348-7d57b3423335?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}
.section-title {
    color: #111827; /* Gris oscuro casi negro */
}
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5e7eb; /* Borde sutil */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}
.btn-primary {
    background-color: var(--orange); /* Gris oscuro */
    color: white;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #111827; /* Gris más oscuro */
}
.btn-secondary {
    background-color: transparent;
    color: #1f2937;
    border: 2px solid #1f2937;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-secondary:hover {
    background-color: #1f2937;
    color: white;
}

.thumb-slide {
    opacity: 0.3;
}

.thumb-slide.is-active {
    opacity: 1;
}

#main-carousel-track {
    height: 100%;
    width: 100%;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
    border: 0px !important;
}