/* ---------------------------------------------------- */
/* VARIABLES DE COLOR - (NUEVA PALETA) */
/* ---------------------------------------------------- */
:root {
    --primary-color: #F8BD83;   /* Naranja/Melocotón (Acento Principal) */
    --secondary-color: #4699e7ff;     /* Rosa (Títulos y Acentos Secundarios) */
    --accent-color-1: #95C3E2;  /* Azul claro (CTA de Contacto) */
    --background-cream: #FAF0E6; /* Fondo Principal (Cremita Cálido) - Uniforme */
    --background-dark: #3F526B;     /* Footer Oscuro */
    
    --text-dark: #333;          
    --text-light: #fff;             
    --card-bg: #FFFFFF;             /* Fondo de tarjetas */
    --whatsapp-green: #25D366;
    --instagram-pink: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    --gmail-red: #EA4335; /* Nuevo color para Gmail */
}

/* ---------------------------------------------------- */
/* ESTILOS BASE Y TIPOGRAFÍA */
/* ---------------------------------------------------- */
body {
    font-family: 'Quicksand', sans-serif;
    color: var(--text-dark);
    background-color: var(--background-cream); 
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Pacifico', cursive;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

/* ---------------------------------------------------- */
/* NAVEGACIÓN Y HERO */
/* ---------------------------------------------------- */
#mainNavbar {
    background-color: var(--background-cream); 
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

#mainNavbar .navbar-brand {
    font-family: 'Pacifico', cursive;
    color: var(--secondary-color);
    font-size: 1.8rem;
}

#mainNavbar .nav-link {
    color: var(--text-dark) !important; /* !important para asegurar la prevalencia */
    font-weight: 500;
    transition: color 0.3s ease;
}

#mainNavbar .nav-link:hover, #mainNavbar .nav-link.active {
    color: var(--primary-color) !important;
}

#hero {
    background-color: var(--background-cream); 
    min-height: 70vh;
    padding: 100px 0;
    /* QUITAMOS LA IMAGEN DE FONDO QUE ESTABA EN LA VERSIÓN ANTERIOR DEL CSS */
}

#hero h1 {
    font-family: 'Quicksand', sans-serif; /* Más legible para títulos grandes */
    font-weight: 700;
    color: var(--secondary-color); /* Usamos el rosa para el título principal */
    text-shadow: none;
}

#hero .lead {
    color: var(--text-dark);
}

/* ---------------------------------------------------- */
/* ESTILOS DE BOTONES */
/* ---------------------------------------------------- */
.btn {
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

.custom-btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-dark);
    padding: 8px 20px; 
    transition: all 0.3s ease;
}
.custom-btn-primary:hover {
    background-color: #e0a36a; 
    border-color: #e0a36a;
    color: var(--text-dark);
}

.custom-btn-whatsapp {
    background-color: var(--whatsapp-green);
    border-color: var(--whatsapp-green);
    color: var(--text-light) !important;
    padding: 12px 30px;
    transition: all 0.3s ease;
}
.custom-btn-whatsapp:hover {
    background-color: #128C7E;
    border-color: #128C7E;
}

.custom-btn-instagram {
    background: var(--instagram-pink); 
    border: none;
    color: var(--text-light);
    padding: 12px 30px;
    transition: opacity 0.3s;
}
.custom-btn-instagram:hover {
    opacity: 0.9;
    color: var(--text-light);
}

/* Nuevo estilo para el botón de Gmail en la sección de Contacto */
.custom-btn-gmail {
    background-color: var(--gmail-red);
    border-color: var(--gmail-red);
    color: var(--text-light) !important;
    padding: 12px 30px;
    transition: all 0.3s ease;
}
.custom-btn-gmail:hover {
    background-color: #c73c30;
    border-color: #c73c30;
}

/* ---------------------------------------------------- */
/* SECCIÓN LIBROS DESTACADOS (CARRUSEL) */
/* ---------------------------------------------------- */
#featured-books {
    background-color: var(--background-cream); 
    padding: 80px 0;
}

#featured-books img {
    max-height: 350px; 
    object-fit: cover;
    width: 100%;
    max-width: 250px; /* Ancho máximo para mantener la proporción de libro */
    margin-bottom: 1rem;
    border-radius: 8px;
    
    /* ESTILOS DE LIBROS MEJORADOS PARA LA NUEVA PALETA */
    border: 1px solid rgba(0,0,0,0.1); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* Estilo para el precio en el carrusel */
#featured-books .text-secondary {
    color: var(--background-dark) !important; /* Usamos un color oscuro para que resalte más */
    font-weight: 500;
    margin-top: -0.5rem; /* Ajuste de margen para acercarlo al autor */
    margin-bottom: 0.5rem;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    /* Fondo para los controles del carrusel */
    background-color: var(--background-dark);
    padding: 1rem;
    border-radius: 50%;
}

/* ---------------------------------------------------- */
/* SECCIONES: NOSOTROS Y CATEGORÍAS */
/* ---------------------------------------------------- */
#about {
    background-color: var(--background-cream); 
}

#categories {
    background-color: var(--background-cream); 
}

.category-card {
    border: none;
    border-radius: 15px;
    background-color: var(--card-bg); 
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    border-top: 5px solid var(--primary-color); /* Detalle de color en la tarjeta */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ---------------------------------------------------- */
/* SECCIÓN CONTACTO */
/* ---------------------------------------------------- */
#contact {
    background-color: var(--accent-color-1); 
    color: var(--text-light);
}

#contact h2 {
    color: var(--background-dark); /* Color de título que contraste bien */
}

/* ---------------------------------------------------- */
/* WHATSAPP FLOTANTE (Usando IMAGEN) */
/* ---------------------------------------------------- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--whatsapp-green);
    border-radius: 50px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex; /* Para centrar la imagen */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    overflow: hidden; /* Ocultar cualquier cosa que se salga del círculo */
    transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Estilo para la imagen dentro del botón flotante */
.whatsapp-logo-img {
    width: 70%; /* Ajusta el tamaño de la imagen dentro del botón */
    height: 70%;
    object-fit: contain; /* Asegura que la imagen se vea completa */
}

/* ---------------------------------------------------- */
/* PIE DE PÁGINA Y RESPONSIVE */
/* ---------------------------------------------------- */
footer {
    background-color: var(--background-dark); 
    color: var(--text-light);
    padding: 40px 0;
}

footer .social-icons a {
    color: var(--primary-color) !important; /* Iconos de color Melocotón */
}

/* Aseguramos que el ícono de Gmail en el footer tenga el mismo color */
footer .social-icons a:nth-child(3) { 
    color: var(--primary-color) !important;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}

/* === MEJORAS DE RESPONSIVIDAD AÑADIDAS === */
    
    /* MEJORA 1: Arreglo de visualización en móvil para la sección de contacto.
       Incrementamos el padding superior para que el título no quede oculto bajo el navbar sticky. */
    #contact {
        padding-top: 5rem !important; 
    }

    /* MEJORA 2: Mejoras para la sección "Nosotros" en dispositivos móviles (apilamiento). */
    #about h2 {
        font-size: 1.8rem; /* Reducimos el tamaño del título para móvil */
    }
    #about p {
        font-size: 0.95rem; /* Ligeramente más pequeño para mejor lectura */
        line-height: 1.6; /* Ajustamos la altura de línea */
    }
    #about .col-md-6.text-center.mt-4.mt-md-0 {
        /* Reducimos el margen superior de la imagen en móvil para que quede más cerca del botón. */
        margin-top: 2rem !important; 
    }
    #about .btn {
        width: 100%; /* El botón ocupa todo el ancho disponible */
        font-size: 0.9rem; /* Un poco más pequeño para botones grandes */
        padding: 10px 20px;
    }