/* █▀ ▀█▀ █▄█ █░░ █▀▀ █▀ ░ █▀▀ █▀ █▀ */
/* ▄█ ░█░ ░█░ █▄▄ ██▄ ▄█ ▄ █▄▄ ▄█ ▄█ */

/* General box-sizing */
* {
  box-sizing: border-box; /* Incluye padding y border dentro del tamaño total */
}

/* Body styles */
body {
  margin: 0; /* Sin margen */
  font-family: "Poppins", sans-serif; /* Fuente base */
  background: #3b3d43; /* Fondo oscuro */
}

/* Carrusel */
#carousel {
  margin-top: 0; /* Sin espacio arriba */
}

#imageCarousel img {
  width: 100%; /* Imagen ocupa todo el ancho */
  height: auto; /* Mantiene proporción */
  max-height: 600px; /* Altura máxima */
  object-fit: cover; /* Adapta al contenedor */
}

/* Carrusel captions */
.carousel-caption {
  margin-top: 10px;
  position: absolute;
  top: 52%; /* Centrado vertical */
  left: 50%; /* Centrado horizontal */
  transform: translate(-50%, -50%); /* Centrado completo */
  z-index: 1; /* Texto sobre la imagen */
  font-family: 'Holtwood One SC', serif; /* Fuente estilizada */
  text-transform: uppercase; /* Texto en mayúsculas */
  color: white; /* Texto blanco */
  font-size: 8rem; /* Tamaño del texto */
  text-align: center; /* Centrado de texto */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9); /* Sombra oscura */
}

/* Sección de artículos */
#fossil-articles {
  font-family: "Faculty Glyphic", sans-serif; /* Fuente personalizada */
  line-height: 1.8; /* Altura de línea */
  color: #fff; /* Texto blanco */
  padding: 0 2rem; /* Márgenes laterales */
}

#fossil-articles .article-title {
  font-family: "Playfair Display", serif; /* Fuente para títulos */
  font-size: 60px; /* Tamaño grande */
  font-weight: bold; /* Negrita */
  margin-bottom: 1rem; /* Espaciado inferior */
  text-align: center; /* Centrado */
}

#fossil-articles .article-text {
  font-size: 20px; /* Tamaño moderado */
  margin-bottom: 1rem; /* Espaciado inferior */
  text-align: justify; /* Justificación */
}

#fossil-articles figure {
  margin: 0;
  padding: 1rem 0; /* Espaciado vertical */
}

#fossil-articles img {
  max-width: 100%; /* Imagen ocupa ancho máximo */
  height: auto; /* Mantiene proporción */
  border: 2px solid #ddd; /* Borde claro */
  border-radius: 5px; /* Esquinas redondeadas */
}

#fossil-articles figcaption {
  font-size: 0.9rem; /* Tamaño pequeño */
  color: #ccc; /* Texto claro */
  margin-top: 0.5rem; /* Espaciado superior */
  text-align: center; /* Centrado */
}

.article-image {
  width: 900px; /* Ancho fijo */
  height: auto; /* Mantiene proporción */
}

/* Cookie consent overlay */
.cookie-consent-overlay {
  position: fixed; /* Cubre toda la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* Fondo semitransparente oscuro */
  display: flex; /* Centrado */
  justify-content: center;
  align-items: center;
  z-index: 10000; /* Sobre cualquier elemento */
}

.cookie-consent-container {
  background: #3b3b3b; /* Fondo oscuro */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
  text-align: center; /* Centrado de texto */
}

/* Botones del overlay */
#acceptCookieConsent, #declineCookieConsent {
  padding: 10px 20px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de texto */
  margin: 10px; /* Espaciado entre botones */
  border: none; /* Sin bordes */
  cursor: pointer; /* Cursor de mano */
}

#acceptCookieConsent {
  background-color: green; /* Fondo verde */
  color: white; /* Texto blanco */
}

#declineCookieConsent {
  background-color: red; /* Fondo rojo */
  color: white; /* Texto blanco */
}

/* Deshabilita el scroll */
body.no-scroll {
  overflow: hidden; /* Elimina scroll */
}

/*█▀▄▀█ █▀▀ █▀▄ █ ▄▀█   █▀█ █░█ █▀▀ █▀█ █ █▀▀ █▀   █▀▀ █▀█ █▄░█   █▀█ ▄▀█ █▄░█ █▀▀ █▀█ █▀   █▀▄ █▀▀  █▀█ █▀▀ █▀ █▀█ █░░ █░█ █▀▀ █ █▀█ █▄░█*/
/*█░▀░█ ██▄ █▄▀ █ █▀█   ▀▀█ █▄█ ██▄ █▀▄ █ ██▄ ▄█   █▄▄ █▄█ █░▀█   █▀▄ █▀█ █░▀█ █▄█ █▄█ ▄█   █▄▀ ██▄  █▀▄ ██▄ ▄█ █▄█ █▄▄ █▄█ █▄▄ █ █▄█ █░▀█*/

/* iPhone 8 / Redmi 9 - 393x851 */
@media (min-width: 393px) and (max-width: 851px) {
  body {
    font-size: 15px;
  }
  .carousel-caption {
    margin-top: -23px;
    margin-left: -25px;
    font-size: 2rem; /* Ajusta el tamaño del título para pantallas pequeñas */
  }
}

/* iPad Mini (Vertical) - 768x1024 */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
  .carousel-caption {
    font-size: 2.5rem; /* Títulos ligeramente más grandes para tablets */
  }
}

/* iPad Pro 12.9" (Vertical) - 1024x1366 */
@media (min-width: 1024px) and (max-height: 1366px) {
  body {
    font-size: 17px;
  }
  .carousel-caption {
    font-size: 3rem; /* Tamaño estándar en pantallas grandes */
  }
}

/* Pantalla de portátil más común - 1440x900 */
@media (min-width: 1440px) and (max-height: 900px) {
  body {
    font-size: 18px;
  }
  .carousel-caption {
    font-size: 3.5rem; /* Aumenta el tamaño del título para laptops */
  }
}

/* Pantalla Full HD - 1920x1080 */
@media (min-width: 1920px) and (max-height: 1080px) {
  body {
    font-size: 20px;
  }
  .carousel-caption {
    font-size: 500px; /* Títulos más grandes para pantallas Full HD */
  }
}