:root{
  /* Rojo Fuego: Más fuerte y puro */
  --firered: #C81E1E; 
  --darkgray: #1f2937;
  --card-dark: #0b0b0b;
  --card-dark-soft: #000; 
  /* Dorado Sutil */
  --firegold: #CCAA00; 
}

/* estilo base */
body { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  scroll-padding-top: 120px;
  
  /* APLICACIÓN DE LA FUENTE INTER EN TODO EL SITIO */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html {
  scroll-padding-top: 120px;
}

/* Modo oscuro global */
body.dark-mode { 
  background-color: #000 !important; 
  color: #e6e6e6 !important; 
}

/* Header */
body.dark-mode header { background-color: var(--firered) !important; box-shadow: none !important; }

body.dark-mode header a,
body.dark-mode header .text-xs,
body.dark-mode header .text-lg,
header a, 
header .text-xs, 
header .text-lg 
{ color: #fff !important; }

/* Cards / Secciones */
body.dark-mode .bg-white { background-color: var(--card-dark) !important; color: #e6e6e6 !important; }
body.dark-mode .text-gray-600 { color: #cfcfcf !important; }

/* FIX: Corrección de fondo de Tarjetas en páginas de producto con Bootstrap */
.card.product-card {
    /* Fuerza el color de fondo de las tarjetas a blanco (modo claro) */
    background-color: #ffffff !important; 
    /* Fuerza el color del texto principal de la tarjeta a un color oscuro */
    color: #212529 !important; 
}

/* FIX: Corrección de fondo de Tarjetas en modo oscuro (si Bootstrap lo está sobreescribiendo) */
body.dark-mode .card.product-card {
    background-color: var(--card-dark) !important;
    color: #e6e6e6 !important; 
}

/* Corrección Específica para la Sección Quienes Somos en Modo Noche */
body.dark-mode #quienes-somos { 
    background-color: var(--card-dark-soft) !important; 
    color: #e6e6e6 !important; 
}

/* FIX: Línea blanca en hover de navegación para Modo Oscuro */
body.dark-mode .nav-link-effect span {
    background-color: white !important;
}

/* Custom background for Tipos de Fuego section (Ahora con imagen de llamas y overlay de color) */
.bg-fire-flames {
  position: relative; 
  overflow: hidden; 
  /* *** DEBES REEMPLAZAR 'img/llamas-difuminadas.jpg' CON LA RUTA DE TU IMAGEN *** */
  background-image: url('img/llamas-difuminadas.jpg'); 
  background-size: cover;
  background-position: center;
  background-color: #f7f7f7; 
}

/* Overlay para mejorar el contraste y el tono de fuego */
.bg-fire-flames::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(200, 30, 30, 0.2); 
  z-index: 1; 
}

body.dark-mode .bg-fire-flames {
  background-color: var(--card-dark-soft); 
}

body.dark-mode .bg-fire-flames::before {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Footer */
footer { 
background-color: var(--firered) !important; 
color: #fff !important; 
}
body.dark-mode footer { 
background-color: var(--firered) !important; 
}


body.dark-mode footer a,
body.dark-mode footer div,
body.dark-mode footer .text-gray-500,
body.dark-mode footer .text-gray-600,
footer a, 
footer div,
footer .text-gray-500,
footer .text-gray-600 {
  color: #fff !important;
}

/* Botones */
body.dark-mode .bg-[var(--firered)] { background-color: var(--firered) !important; }
body.dark-mode .border { border-color: rgba(255,255,255,0.08) !important; }

/* ================================================================= */
/* FIXES DE COLOR REFORZADOS CON !important (SOLUCION A PROBLEMAS DE IPAD/IPHONE/MAC) */
/* ================================================================= */

/* FIXES ESPECÍFICOS PARA LOS ÍCONOS DE FORMAS DE PAGO EN MODO NOCHE */
body.dark-mode #icon-efectivo,
body.dark-mode #icon-deposito,
body.dark-mode #icon-transferencia {
    color: #fff !important; 
}

/* FIX 1: Títulos de Formas de Pago (Día y Noche) */
body.dark-mode #formas-de-pago h2, 
body.dark-mode #formas-de-pago h5,
body.dark-mode #formas-de-pago p,
body.dark-mode #formas-de-pago h4 {
    color: #ffffff !important; /* Fuerza blanco en modo noche */
}

/* FIX REFORZADO: Aseguramos que el texto de Formas de Pago sea NEGRO en modo día para evitar intermitencia en iOS/iPad */
#formas-de-pago h5,
#formas-de-pago h4 {
    color: var(--darkgray, #000) !important; 
}

/* ================================================================ */
/* 💥 FIX FINAL: Título "Tipos de fuego" siempre blanco */
/* El fondo de llamas puede ser claro o tiene poca uniformidad de color, forzamos blanco para alto contraste. */
/* ================================================================ */
#title-tipos-fuego {
    color: #ffffff !important;
}

/* ================================================================= */

/* Navegación móvil */
body.dark-mode #mobile-nav { background-color: #000 !important; color: #fff !important; }
body.dark-mode #mobile-nav a { color: #fff !important; }

/* FIX: Aseguramos que el texto del menú móvil sea BLANCO en modo día (fondo rojo) */
#mobile-nav a { color: #fff !important; } 

/* Botones de menú y modo */
#btn-menu-mobile, #btn-menu-desktop, #mode-btn-mobile, #mode-btn-desktop {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
}
body.dark-mode #btn-menu-mobile, body.dark-mode #mode-btn-mobile,
body.dark-mode #btn-menu-desktop, body.dark-btn-desktop {
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* Menú móvil animado */
#mobile-nav { transition: max-height 0.25s ease; overflow: hidden; }

/* Mejora de contraste para títulos en modo oscuro (ya cubre Quienes Somos) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: #ffffff !important;
}

/* Nuevo estilo para asegurar que la base de la imagen no se corte */
.object-cover-bottom {
object-fit: contain;
object-position: bottom;
}

/* BOTÓN WHATSAPP FLOTANTE */
.whatsapp-float {
position: fixed; 
width: 50px; 
height: 50px; 
bottom: 20px; 
right: 20px; 
background-color: #25d366; 
color: #fff;
border-radius: 50px; 
text-align: center;
z-index: 1000; 
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); 
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

/* Aplicamos el tamaño y centrado al ícono de Font Awesome directamente */
.whatsapp-float i {
  font-size: 30px; 
  line-height: 50px; 
  vertical-align: middle; 
}


/* Efecto de hover para las tarjetas de productos */
.card-hover-effect {
transition: transform 0.3s ease, box-shadow 0.3s ease; 
/* Nota: Sombra sutil al inicio (reemplaza 'shadow' en el HTML) */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); 
}

/* Aplicar cuando el ratón está encima */
.card-hover-effect:hover {
transform: translateY(-5px); 
box-shadow: 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
}

/* FIX: Evitar cambio de fondo en tarjetas de Quienes Somos/Productos al seleccionar en modo claro (iPad/iOS tap issue) */
      .card-hover-effect:hover,
      .card-hover-effect:active {
          background-color: #ffffff !important; 
      }

/* ---------------------------------------------------------------------- */
/* FIX: Adaptación de texto de botones para iPad y tabletas */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* * NOTA: Reemplaza '.btn' si tus botones tienen una clase diferente 
  * (e.g., '.mi-boton-personalizado')
  */
  .btn {
      white-space: nowrap !important; /* Fuerza a que el texto NO se separe en líneas */
      font-size: 0.9rem !important;    /* Opcional: reduce ligeramente la fuente para ganar espacio */
      padding: 0.5rem 0.8rem !important; /* Opcional: ajusta el padding si es necesario */
       }
  }

/* CLASE CUSTOM PARA EFECTO HOVER DE NAVEGACIÓN */
.nav-link-effect {
position: relative;
/* CAMBIO CLAVE: Reducción del padding lateral en pantallas medianas a través de Tailwind (px-2 md:px-1 lg:px-2) */
padding: 0 10px; 
}

/* FIX: Ajuste del padding lateral del efecto para evitar desbordamiento */
@media (min-width: 768px) and (max-width: 1023px) { 
  .nav-link-effect {
      padding: 0 4px; /* Reducción de 10px a 4px en iPad/Tablet */
  }
}
@media (min-width: 1024px) {
  .nav-link-effect {
      padding: 0 10px; /* Vuelve a 10px en escritorios grandes */
  }
}


.nav-link-effect span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: white; /* Color de la línea */
transform: scaleX(0);
transition: transform 0.3s ease-out;
}

.nav-link-effect:hover span {
transform: scaleX(1);
}

/* ---------------------------------------------------------------------- */
/* ESTILOS ESPECÍFICOS DEL CAROUSEL (Diapositivas y Puntos) */
/* ---------------------------------------------------------------------- */

.carousel-slide {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CHATGPT ME DIJO QUE HICIERA ESTE CAMBIO */

.carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Esto hace que el video cubra todo */
  object-position: center; /* Centrado bonito */
  display: block;
}

/* Punto activo */
.indicator-dot.current-dot {
  opacity: 1; 
  transform: scale(1.2); 
  transition: transform 0.3s ease;
}

/* Video va debajo */
.carousel-slide video {
  position: absolute;
  z-index: 1 !important;
}

/* Contenedor de puntos */
.carousel-indicators {
  position: absolute !important;
  bottom: 20px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20 !important;
}

/* Cada punto */
.indicator-dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20 !important;
}