/* Define una variable CSS para el color principal de Novo Tears (anteriormente Muxol Orange) */
:root {
  --novo-tears-red: #cb3b2d; /* Rojo para los botones de compra */
  --novo-tears-red-hover: #b02519; /* Tono más oscuro para el hover del rojo */
  --info-blue: #0073b6; /* NUEVA VARIABLE: Color azul para los botones de "leer más" */
  --info-blue-hover: #00569a; /* Tono más oscuro para el hover del azul */
}

/* Ajuste del ancho máximo para el contenedor de Bootstrap */
.container {
    max-width: 1200px;
}

/* Estilos para el BODY - Fondo de espiral */
body {
 /*  background-image: url('../img/fondoespiral.jpg'); 
  background-position: center top;  Centra horizontalmente, alinea arriba */
/* ... existing styles ... */

/* ESTILOS PARA EL BANNER CON IMÁGENES RESPONSIVAS */
.banner-section {
    /* ELIMINADO: background-color: #ffffff; */ /* Ahora la sección será transparente para mostrar el fondo del body */
    padding: 0; /* Asegura que no haya padding extra en el section */
}

.banner-section .container {
    padding: 0; /* Elimina cualquier padding horizontal del container para que la imagen lo ocupe todo */
    margin: 0 auto; /* Centra el container */
}

/* ... rest of your styles ... */
  background-repeat: repeat-y; /* Repite solo verticalmente */

  background-size: cover; /* Ajusta el tamaño para cubrir el ancho, manteniendo la proporción */
  background-color: #ffffff; /* Asegura un fondo blanco debajo de la imagen repetida */
}


/* Estilos del Navbar */
.navbar-custom {
    background-color: #ffffff !important; /* Fondo blanco para el navbar */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Sutil sombra para que resalte */
}
.navbar-custom .nav-link {
    color: #000000; /* Texto negro para los ítems de menú normales */
    font-weight: 500; /* Un poco más de peso para la fuente */
    margin-right: 15px; /* Espacio entre los ítems de menú */
    transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover {

    color: var(--info-blue); /* CAMBIO: Usa el color azul para el hover de los links del nav */
}

/* Estilo para el botón "Compra Online" y los botones "Comprar" de las cards */
.btn-compra-online {

    background-color: var(--novo-tears-red); /* Usa el nuevo color rojo */
    color: #ffffff; /* Texto blanco */

    border: 1px solid var(--novo-tears-red); /* Borde del nuevo color rojo */
    padding: 8px 26px; /* Relleno del botón */
    border-radius: 99999px; /* Bordes ligeramente redondeados (como Bootstrap) */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none; /* Asegura que no tenga subrayado como enlace */
}

.btn-compra-online:hover {

    background-color: var(--novo-tears-red-hover); /* Usa el nuevo color rojo oscuro para el hover */
    color: #ffffff;

    border-color: var(--novo-tears-red-hover);
}

/* NUEVO: Estilos específicos para los botones "leer más" en la sección de Temas de Interés */
#temas-interes-cards .btn-compra-online {
  background-color: var(--info-blue) !important; /* Fondo azul (forzado para sobrescribir) */
  border-color: var(--info-blue) !important;     /* Borde azul (forzado) */
  color: #ffffff !important; /* Texto blanco (forzado) */
}

#temas-interes-cards .btn-compra-online:hover {
  background-color: var(--info-blue-hover) !important; /* Fondo azul oscuro en hover (forzado) */
  border-color: var(--info-blue-hover) !important;     /* Borde azul oscuro en hover (forzado) */
  color: #ffffff !important; /* Texto blanco en hover (forzado) */
}

/* -------------------------------------------------------------------------- */
/* ESTILOS DEL BOTÓN HAMBURGUESA PERSONALIZADO (VISTA MÓVIL) */
/* -------------------------------------------------------------------------- */
.navbar-custom .navbar-toggler {
    border: none; /* Elimina el borde del botón hamburguesa */
    padding: 0; /* Elimina el padding si no lo necesitas */
    outline: none !important; /* Asegura la eliminación del outline en todos los estados */
    box-shadow: none !important; /* Elimina cualquier sombra que pueda aparecer al hacer foco/clic */
}

.navbar-custom .navbar-toggler:focus, /* Para cuando el botón recibe foco */
.navbar-custom .navbar-toggler:active /* Para cuando el botón está activo (clic) */
 {
    outline: none !important;
    box-shadow: none !important;
    border: none !important; /* Por si acaso, refuerza que no haya borde */
}

.navbar-custom .navbar-toggler-icon {
    /* La clave es generar un SVG con el color deseado */

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d42d1f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* CAMBIO: color de la hamburguesa a rojo */
}

/* Estilos de las secciones de contenido (opcional, para visualización) */
.hero-section {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d6efd !important; /* Color primario de Bootstrap */
}

.content-section {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Las secciones son transparentes por defecto si no tienen un background-color */
}

/* ESTILOS PARA EL BANNER CON IMÁGENES RESPONSIVAS */
.banner-section {
  /*  background-color: #ffffff;  Un color de fondo por si las imágenes no llenan el espacio */
    /* Fondo transparente para que se vea la imagen del body */
    padding: 0; /* Asegura que no haya padding extra en el section */
}

.banner-section .container {
    padding: 0; /* Elimina cualquier padding horizontal del container para que la imagen lo ocupe todo */
    margin: 0 auto; /* Centra el container */
}

.banner-section img {
    width: 100%; /* La imagen ocupará el 100% del ancho de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina cualquier espacio extra debajo de la imagen */
}

/* Estilo para las secciones que deben tener offset para el header sticky */
#hero, /* AÑADIDO: para que el scroll al hacer click en el logo no quede tapado */
#productos,
#temas-interes-cards,
#qa {
  scroll-margin-top: 90px; /* Ajusta este valor según la altura real de tu header + un poco de margen */
}

/* Color azul para los títulos de sección específicos */
#productos h2,
#temas-interes-cards h2,
#qa h2 {
  color: var(--info-blue); /* CAMBIO: Ahora usa el color azul para los títulos de sección */
}

#productos .card { /* O el selector específico para tus cards, por ejemplo, #productos > div */
  border-radius: 15px; /* Puedes ajustar este valor. Prueba con 10px, 15px, 20px o incluso más. */
  /* ... otras propiedades de estilo para la card ... */
}

/* Estilo para el footer personalizado */
.footer-custom {
  background-color: var(--info-blue); /* CAMBIO: Aplica el color azul definido */
  color: white; /* Color de texto por defecto en el footer */
}

/* Asegura que el texto legal sea blanco y pequeño */
.footer-custom .text-white {
  color: white !important; /* Sobrescribe cualquier otro color para asegurar el blanco */
}

.footer-custom .small {
  font-size: 0.85em; /* Hace el texto un poco más pequeño */
  line-height: 1.2; /* Mejora la legibilidad en líneas cortas */
}

/* ESTILOS PARA LAS FLECHAS DE NAVEGACIÓN DEL CARRUSEL */
.carousel-control-prev-icon {
  /* Nuevo path SVG para una flecha IZQUIERDA más gruesa y rellena */

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d42d1f'%3e%3cpath d='M11 2L5 8L11 14Z'/%3e%3c/svg%3e") !important; /* CAMBIO: color de la flecha a rojo */
  transform: none !important; /* Asegura que no haya ninguna rotación inesperada */
}

.carousel-control-next-icon {
  /* Nuevo path SVG para una flecha DERECHA más gruesa y rellena */

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d42d1f'%3e%3cpath d='M5 2L11 8L5 14Z'/%3e%3c/svg%3e") !important; /* CAMBIO: color de la flecha a rojo */
  transform: none !important; /* Asegura que no haya ninguna rotación inesperada */
}

/*
ESTILOS PARA LAS FLECHAS Y EL TEXTO DE LOS ACORDEONES (Q&A)
*/
.accordion-button {
  color: #333; /* Color oscuro para el texto del botón del acordeón por defecto */
  background-color: transparent; /* Asegura un fondo transparente */
  font-weight: normal; /* Normal font-weight para el estado contraído */
}


.accordion-button:focus {
  box-shadow: none; /* Elimina la sombra de foco */
  border-color: transparent; /* Elimina el borde de foco si aparece */
  outline: 0; /* Elimina el contorno */
}

/* Color y forma de la flecha del acordeón (más "bold") */
.accordion-button::after {
  /* Nuevo path SVG para una flecha más gruesa y rellena, con color AZUL */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230074c9'%3e%3cpath d='M2 5L8 11L14 5Z'/%3e%3c/svg%3e") !important; /* CAMBIO: fill a azul */
  /* El resto de propiedades de Bootstrap (como el tamaño y la transición) se mantienen */
}

/* Estilo para el botón del acordeón cuando está expandido (no colapsado) */
.accordion-button:not(.collapsed) {
  color: var(--info-blue); /* CAMBIO: Ahora usa el color azul para el texto expandido */
  background-color: transparent; /* Mantiene el fondo transparente */
  box-shadow: none; /* Elimina la sombra de Bootstrap al estar activo */
  font-weight: 700; /* Hace los títulos del acordeón más gruesos (negrita) cuando está expandido */
}

/* Para la flecha cuando el acordeón está expandido (usa la misma flecha más bold) */
.accordion-button:not(.collapsed)::after {
  /* Mantiene la misma flecha más bold, con color AZUL */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230074c9'%3e%3cpath d='M2 5L8 11L14 5Z'/%3e%3c/svg%3e") !important; /* Mantiene el fill en azul */
  transform: rotate(-180deg) !important; /* Asegura la rotación de la flecha */
}

/* ESTILOS ESPECÍFICOS PARA EL MENÚ EN VISTA MÓVIL */
@media (max-width: 991.98px) { /* Aplica estos estilos solo para pantallas pequeñas y medianas (<= Bootstrap 'lg' breakpoint) */
  .navbar-custom .navbar-nav {
    margin-top: 15px;
  }

  .navbar-custom .navbar-nav .nav-item {
    margin-bottom: 10px;
  }

  .navbar-custom .navbar-nav .nav-item:last-child {
    margin-bottom: 0;
  }
}

/* Estilos ESPECÍFICOS para el logo del footer en vista móvil */
@media (max-width: 767.98px) { /* Para pantallas pequeñas (móviles) */
  .footer-custom img {
    max-height: 56px !important; /* Reduce la altura máxima del logo del footer en un 30% (80px * 0.70) */
  }

  /* NUEVO: Reducir el ancho máximo de los logos en las cards de #productos en móvil */
  #productos .card-body img {
    max-width: 60% !important; /* El !important es necesario para sobrescribir 'img-fluid' */
    height: auto; /* Asegura que la altura se ajuste para mantener la proporción */
  }
}