/* Fuente global para todo el sitio */
body {
  font-family: 'Montserrat', sans-serif; /* Elige tu fuente favorita aquí */
  color: #ffffff;
  background-color: #000000;
}

/* H2: Sección principal */
h2 {
  font-size: 2em;
  font-weight: 700;
  color: #ffffff;
  margin: 2em 0 1em;
  border-left: 5px solid #33ccff;
  padding-left: 0.7em;
}

/* H3: Subsección */
h3 {
  font-size: 1.6em;
  font-weight: 700;
  color: #ffffff;
  margin: 1.8em 0 0.8em;
  border-left: 4px solid #3399cc;
  padding-left: 0.6em;
}

/* H4: Nivel detallado */
h4 {
  font-size: 1.3em;
  font-weight: 600;
  color: #ffffff;
  margin: 1.5em 0 0.6em;
  border-left: 3px solid #66cccc;
  padding-left: 0.5em;
}

/* Texto general */
p {
  font-size: 1em;
  line-height: 1.7em;
  color: #ffffff;
}
/* Fuente general del sitio */
body {
  font-family: 'Lato', sans-serif;
  color: #ffffff;
  background-color: #000000;
  line-height: 1.7em;
}

/* Encabezado H2 – título principal */
h2 {
  font-size: 2em;
  font-weight: 700;
  color: #ffffff;
  margin: 2em 0 1em;
  border-left: 5px solid #33ccff;
  padding-left: 0.7em;
}

/* Encabezado H3 – secciones */
h3 {
  font-size: 1.6em;
  font-weight: 700;
  color: #ffffff;
  margin: 1.8em 0 0.8em;
  border-left: 4px solid #3399cc;
  padding-left: 0.6em;
}

/* Encabezado H4 – subtítulos o temas específicos */
h4 {
  font-size: 1.3em;
  font-weight: 600;
  color: #ffffff;
  margin: 1.5em 0 0.6em;
  border-left: 3px solid #66cccc;
  padding-left: 0.5em;
}

/* Texto general */
p {
  font-size: 1em;
  color: #ffffff;
}
.justificar-lista {
  text-align: justify;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-btn {
  animation: fadeIn 1.2s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-btn {
  animation: fadeIn 1.2s ease-out forwards;
}
/* Justificar texto en Entradas, Páginas y Términos del Glosario */
.single-post p,
.page p,
.glossary-term p {
  text-align: justify;
}
/* --- Estilos para el Cuadro Comparativo Atractivo --- */

/* Contenedor principal de las tarjetas */
.comparative-table-container {
  display: flex; /* Pone las tarjetas una al lado de la otra */
  gap: 20px; /* Espacio entre las tarjetas */
  flex-wrap: wrap; /* Permite que las tarjetas se apilen en pantallas pequeñas */
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Estilo general para cada tarjeta de comparación */
.comparison-card {
  flex: 1; /* Hace que las tarjetas compartan el espacio equitativamente */
  min-width: 280px; /* Ancho mínimo antes de que se apilen */
  border-radius: 12px; /* Esquinas redondeadas */
  overflow: hidden; /* Asegura que el contenido respete las esquinas redondeadas */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
  transition: transform 0.3s ease; /* Transición suave al pasar el ratón */
}

/* Efecto al pasar el ratón por encima */
.comparison-card:hover {
  transform: translateY(-5px); /* Eleva la tarjeta ligeramente */
}

/* Cabecera de la tarjeta */
.card-header {
  padding: 15px 20px;
  color: white;
  text-align: center;
}

.card-header h3 {
  margin: 0;
  font-size: 1.3em; /* Tamaño del título */
  color: white; /* Asegura que el H3 sea blanco */
}

/* Cuerpo de la tarjeta */
.card-body {
  padding: 20px;
  background-color: #ffffff; /* Fondo blanco para el contenido */
}

/* Bloque de cada característica (título + párrafo) */
.characteristic-block {
  margin-bottom: 20px;
}

.characteristic-block strong {
  font-size: 1.1em;
  display: block; /* Hace que el título ocupe su propia línea */
  margin-bottom: 5px;
  color: #333;
}

.characteristic-block p {
  margin: 0;
  font-size: 1em;
  line-height: 1.5; /* Espaciado entre líneas */
  color: #555;
}

/* --- Colores específicos para cada tarjeta --- */

/* Tarjeta de Fructosa (color morado) */
.fructosa-card .card-header {
  background: #8e44ad; /* Morado */
}
.fructosa-card .characteristic-block strong {
    color: #8e44ad;
}


/* Tarjeta de Sacarosa (color azul) */
.sacarosa-card .card-header {
  background: #3498db; /* Azul */
}
.sacarosa-card .characteristic-block strong {
    color: #3498db;
}

/* --- Responsividad para Móviles --- */
@media (max-width: 768px) {
  .comparative-table-container {
    flex-direction: column; /* Apila las tarjetas verticalmente */
  }
/* Contenedor de la sección de testimonios */
.testimonials-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* En móvil, solo una tarjeta por fila */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
footer ul li {
  margin-bottom: 1px; /* Reduce el espacio entre ítems */
  line-height: 1.3;   /* Ajusta la altura de línea */
}