/* style.css (Versión Responsiva) */

html {
  height: 100%;
}

/* --- ESTILOS BASE (Mobile-First) --- */
/* Estos estilos se aplican a TODOS los tamaños de pantalla, empezando por el móvil */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* El cuerpo de la página ocupará al menos el 100% de la altura de la pantalla */
  background-color: #fdf5e6;
  background-image: url("../images/main-background-texture.png");
  font-family: "Lora", serif;
  margin: 0;
  padding: 0;
}

.page-container {
  width: 100%;
  max-width: 1000px; /* La página nunca será más ancha de 1000px */
  margin: 0 auto; /* Centra el contenedor en pantallas grandes */
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  box-sizing: border-box; /* Asegura que el padding no añada ancho extra */
  position: relative;
  /*overflow-x: hidden; /* Evita el desbordamiento horizontal de las decoraciones */
}

/* El menú ahora será más simple en móviles */
header {
  position: relative; /* ¡CLAVE! Esto se convierte en el "ancla" para el logo y la barra de navegación */
  height: 60px; /* Le damos una altura fija para que contenga todo */
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

.header-texture {
  background-image: url("../images/header-texture.jpg");
  height: 90px;
  width: 100%;
}

.logo-link img {
  height: 100px; /* Ajusta el tamaño del logo según necesites */
  position: absolute;
  bottom: 90%;
  left: 41%;
  z-index: 10;
}

.main-nav {
  background-color: #000;
  border: 2px solid #555;
  border-radius: 25px;
  padding: 5px 30px;

  position: absolute;
  bottom: -6px; /* Lo posiciona en la parte inferior del header */
  left: 50%;
  transform: translateX(-50%);
  width: 95%; /* Ocupa el 95% del ancho del header */
  z-index: 5; /* Está por debajo del logo (z-index: 10) */
}

/*.main-nav .logo img { height: 40px; margin-bottom: 10px; }*/

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Centra los elementos de la lista */
  align-items: center;
  gap: 17px; /* Espacio entre los links */
  height: 40px; /* Altura para los ítems del menú */
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: small;
}

/* El banner se apila verticalmente en móviles */
.banner {
  background: linear-gradient(to right, #6a0d4c, #8d2e6b);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center;
  text-align: center;
  color: white;
}

.click {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}

.pack-tv {
  display: flex;
  flex-direction: row;
}

.cards-container {
  width: 100%;
  /* margin-left: auto; */
  /* margin-right: auto; */

  /* ¡CAMBIO CLAVE! APLICAR FLEXBOX AL CONTENEDOR */
  display: flex; /* Convierte el contenedor en un flexbox */
  justify-content: center; /* Centra el contenido (featured-cards) horizontalmente */
  align-items: center; /* Centra el contenido verticalmente (aunque en este caso no es necesario) */
}

.banner-text h2 {
  font-size: 90px;
  margin: 0;
}
.banner-text p {
  font-size: 18px;
}
.banner-link-interactive {
  margin: 15px 0;
}
#pulsing-arrow {
  width: 110px;
  animation: pulse 1.5s infinite;
}
.tv-container img {
  width: 100%;
  max-width: 280px;
  animation: pulse2 1.5s infinite;
}

/* Los cuadros se apilan verticalmente en móviles */
.featured-cards {
  display: flex;
  flex-direction: column; /* Apila los cuadros verticalmente */
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.card {
  background-color: white;
  border: 3px solid black;
  border-radius: 20px;
  padding: 20px;
  width: 90%; /* Ocupa casi todo el ancho disponible */
  max-width: 320px;
  text-align: center;
  text-decoration: none;
  color: black;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.card img {
  height: 75px;
}

.card-blog {
  background-image: "blog-card.png";
}

.card-player {
  background-image: "player-card.png";
}

.card-blog {
  background-image: "blog-card.png";
}

.card .card-button {
  display: inline-block;
  background-color: #a04282;
  color: white;
  padding: 10px 30px;
  border-radius: 15px;
  margin-top: 10px;
  font-weight: bold;
}

/* En móvil, las decoraciones complejas a menudo se ocultan para no saturar */
/*.deco-texture {
    display: none;
}*/
/* New container for footer textures */
.footer-textures-container {
  /* This container acts as the positioning context for its children */
  position: relative;
  width: 100%;
  height: 0; /* No height, just for positioning */
  bottom:100px;
}

.deco-texture {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: 100% 100%;
  z-index: -1; /* Ensure they are above the main content but below the footer */
}

.paper-scraps {
  background-image: url("../images/paper-scraps.png");
  width: 370px;
  height: 400px;
  bottom: 0;
  right: 0%;
}
.flowers {
  background-image: url("../images/flowers.png");
  width: 190px;
  height: 280px;
  top: 90px;
  right: 0;
}
.lace {
  background-image: url("../images/lace.png");
  width: 300px;
  height: 350px;
  bottom: -0;
  left: -0;
}
.paper-scraps2 {
  background-image: url("../images/paper-scraps2.png");
  width: 350px;
  height: 350px;
  bottom: 0;
  right: 0%;
  z-index: -1;
}
.flowers2 {
  background-image: url("../images/flowers2.png");
  width: 300px;
  height: 320px;
  top: 90px;
  right: 0;
  z-index: -1;
}
.lace2 {
  background-image: url("../images/lace2.png");
  width: 350px;
  height: 350px;
  bottom: -0;
  left: -0;
  z-index: -1;
}
.paper-scraps3 {
  width: 400px;
  height: 400px;
  bottom: 0;
  right: 0%;
  z-index: -1;
}
.flowers3 {
  background-image: url("../images/flowers3.png");
  width: 400px;
  height: 350px;
  top: 90px;
  right: 0;
  z-index: -1;
}
.lace3 {
  background-image: url("../images/lace3.png");
  width: 400px;
  height: 350px;
  bottom: -0;
  left: -0;
  z-index: -1;
}
.paper-scraps4 {
  background-image: url("../images/paper-scraps4.png");
  width: 400px;
  height: 400px;
  bottom: 0;
  right: 0%;
  z-index: -1;
}
.flowers4 {
  background-image: url("../images/flowers4.png");
  width: 150px;
  height: 90px;
  top: 200px;
  right: 0;
  z-index: -1;
}
.lace4 {
  background-image: url("../images/lace4.png");
  width: 350px;
  height: 350px;
  bottom: -0;
  left: -0;
  z-index: -1;
}

/* --- ESTILOS DEL FOOTER --- */
.main-footer {
  background-color: #000;
  color: #a0a0a0;
  padding: 20px;
  margin-top: auto; /* ¡CLAVE! Empuja el footer al final de la página */
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite que se apilen en móvil */
  gap: 20px;
}

.social-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px;
}

.social-links a {
  color: #ffffff;
  font-size: 24px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
  color: #f72585; /* Un color rosa vibrante que va con tu estética */
  transform: scale(1.2);
}

.copyright {
  font-size: 14px;
  margin: 0;
}

/* -------------------------- MEDIA QUERY PARA TABLETS Y ESCRITORIOS --------------------------------------------------------- */
/* @media (min-width: 768px) significa: "Si el ancho de la pantalla es de 768px O MÁS..." */

@media (min-width: 768px) {
  /* ...ENTONCES, aplica estos estilos que sobreescriben los de móvil. */

  .main-nav ul {
    gap: 15px; /* Reducimos el espacio entre links */
    font-size: 14px;
  }

  .page-container {
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    max-width: 80%;
  }

  .main-nav {
    border: 2px solid #555;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 30px;
    position: absolute;
    bottom: -8px;
    width: 95%;
  }
  .main-nav .logo img {
    height: 60px;
    margin-bottom: 0;
  }
  .main-nav ul {
    flex-wrap: nowrap;
  }

  .banner {
    flex-direction: row; /* Vuelve a la vista horizontal */
    justify-content: space-around;
    text-align: center;
    padding: 30px;
  }
  .banner-text p {
    font-size: 24px;
  }
  .tv-container img {
    max-width: 400px;
    margin-left: 30px;
    margin-right: 10px;
  }

  .featured-cards {
    flex-direction: row; /* Vuelve a la vista horizontal */
    align-items: stretch; /* Estira las tarjetas para que tengan la misma altura */
  }
  .card {
    width: 30%; /* Cada tarjeta ocupa un tercio del espacio */
  }

  .logo-link img {
    height: 200px; /* Hacemos el logo un poco más pequeño en móviles */
    position: absolute;
    bottom: -100%;
    left: 41%;
    z-index: 10;
  }

  .footer-content {
    flex-direction: column-reverse; /* Pone el copyright debajo de los iconos */
    text-align: center;
  }

  .click {
    font-size: 40px;
    margin-top: 7%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
  }

  #pulsing-arrow {
    width: 165px;
    animation: pulse 1.5s infinite;
  }
}

/* Animación de la flecha (sin cambios) */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}