/* ============================================= */
/* ========= CONFIGURACIÓN DE TAILWIND ========== */
/* ============================================= */

/* Esto permite extender la paleta de colores de Tailwind CSS */
/* Se aplica dentro del script de Tailwind, pero aquí se define para referencia */
/* tailwind.config = {
  theme: {
    extend: {
      colors: {
        'cream': {
          100: '#FDF8F5',
          200: '#F6E9E3',
        },
        'charcoal': '#4F4F4F',
        'rose-gold': '#D4AFA7',
      }
    }
  }
}
*/

/* ============================================= */
/* ============= ESTILOS GENERALES ============== */
/* ============================================= */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #FDF8F5; /* Tono crema base */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Clases reutilizables para Títulos y Subtítulos de Sección */
.section-title {
    @apply text-4xl font-bold text-charcoal;
}
.section-subtitle {
    @apply text-lg text-gray-600 mt-4 max-w-2xl mx-auto;
}

/* ============================================= */
/* ============== HEADER Y NAVEGACIÓN =========== */
/* ============================================= */
.nav-link {
    @apply text-gray-600 relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-0 after:h-[2px] after:bg-rose-gold after:transition-all after:duration-300 hover:text-charcoal hover:after:w-full;
}
.nav-link-mobile {
     @apply text-gray-600 hover:text-charcoal transition-colors duration-300;
}


/* ============================================= */
/* ============ SECCIÓN DE BIENVENIDA ============ */
/* ============================================= */
.hero-bg {
    background-image: url('https://placehold.co/1920x1080/A38B86/FFFFFF?text=Beauty+Salon'); /* Imagen de alta calidad */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
}

/* ============================================= */
/* ============== TARJETAS DE SERVICIO ============ */
/* ============================================= */
.service-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
}
.card-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}
.card-title {
    @apply text-2xl font-bold text-charcoal mb-3;
}
.card-description {
    @apply text-gray-600;
}

/* ============================================= */
/* ============ SECCIÓN DE RESULTADOS ============ */
/* ============================================= */
.video-thumbnail {
    @apply block relative rounded-lg shadow-md overflow-hidden group cursor-pointer;
}
.video-thumbnail::after {
    content: '▶';
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl bg-black/40 rounded-full w-20 h-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}
.video-img {
    @apply w-full h-auto object-cover aspect-[4/5] group-hover:scale-105 transition-transform duration-300;
}


/* ============================================= */
/* ============= BOTONES (CTAs) ================ */
/* ============================================= */
.btn {
    @apply font-bold py-3 px-8 rounded-full text-base md:text-lg transition-all duration-300 inline-flex items-center justify-center gap-2 shadow-md hover:shadow-lg transform hover:scale-105;
}

.btn-primary {
    @apply bg-rose-gold text-white hover:bg-opacity-90;
}

.btn-secondary {
    @apply bg-charcoal text-white hover:bg-opacity-90;
}

.btn-dark {
    @apply bg-gray-800 text-white hover:bg-black;
}

.btn-whatsapp {
    @apply bg-green-500 hover:bg-green-600 text-white w-full sm:w-auto;
}

.btn-facebook {
    @apply bg-blue-600 hover:bg-blue-700 text-white w-full sm:w-auto;
}