body {
      width: 100%;
      margin: 0 auto;
      font-family: 'Poiret One';
    }

    #contenidos {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 0 auto;
    }

    header {
      height: 90%;
      width: 100%;
      background-color: rgb(0, 0, 0);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      border-bottom: rgb(255, 195, 14) 6px solid;
            margin-bottom: 100px;
    }



    header:hover {
      cursor: pointer;
    }

    #subtitulo {
      font-size: 32px;
      color: white;
      text-align: center;
      font-weight: bold;
    }

    #img-logo {
      position: absolute;
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #img-logo img {
      width: 30%;
      object-fit: contain;
    }

        #img-cover {
      background-image: url("../obras/17.webp");
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      opacity: 0.1;
    }

    .bloque {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 60px;
      /* espacio entre imágenes */
      width: 95%;
      margin: 0 auto;
      padding: 60px 0;
    }

    .bloque-interno {
      flex: 1 1 45%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin: 0 auto;
      animation: fadeSlideIn 1.3s ease-out forwards,
        artNouveauFlow 5s ease-in-out infinite;
    }

    footer {
      height: 100px;
      background-color: rgb(0, 0, 0);
    }

    .img-seccion {
      height: 500px;
      background-color: #f0f0f0;
      border: 6px solid rgb(0, 0, 0);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      padding: 10px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .img-seccion>img {
      width: 600px;
      height: 500px;
      object-fit: cover;
      /* hace que la imagen cubra todo el contenedor */
      display: block;
      border: none;
    }


    #novedad {
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 2px solid gray;
      padding-top: 50px;
    }

    .textos-novedad {
      display: flex;
      flex-direction: column;
      justify-content: right;
      align-items: right;
      width: 35%;
      padding-left: 55px;
    }

    #img-novedad {
      width: 45%;
    }

    .texto-seccion {
      font-size: 50px;
      font-weight: bold;
      color: rgb(0, 0, 0);
      padding-top: 10px;
    }

    .bloque-interno:hover {
      color: rgb(255, 200, 0);
      text-decoration: underline;
      cursor: pointer;
    }


    .bloque-interno .img-seccion img {
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }

    .bloque-interno:hover .img-seccion img {
      filter: grayscale(0%);
      transition: filter 0.3s ease;
    }

    .divisoria-seccion {
      width: 98%;
      height: 2px;
      border: none;
      background-color: rgb(0, 0, 0);
    }

    #antetitulo-novedad {
      color: rgb(255, 140, 0);
      font-size: 28px;
    }



    /* Animaciones */

    /* Animación general */
    @keyframes fadeSlideIn {
      0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
        filter: blur(6px);
      }

      60% {
        opacity: 1;
        transform: translateY(-5px) scale(0.98);
        filter: blur(0px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(0.96);
      }
    }

    /* Pequeño "latido" ondulante como un trazo orgánico */
    @keyframes artNouveauFlow {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.01);
      }
    }

    /* Quitar estilo de enlace por defecto */
    .bloque-interno {
      text-decoration: none;
      color: inherit;
    }

    /* Asegurar que toda el área sea clicable */
    .bloque-interno:hover {
      color: rgb(255, 200, 0);
      text-decoration: underline;
      cursor: pointer;
    }

    /* Evitar que cambie el color del texto visitado */
    .bloque-interno:visited {
      color: inherit;
    }

    /* === Efecto gris a color también para la novedad === */
    #novedad .img-seccion img {
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }

    #novedad:hover .img-seccion img {
      filter: grayscale(0%);
    }

    /* === Efecto de texto dorado y subrayado en la novedad === */
    #novedad:hover #titulo-novedad {
      color: rgb(0, 0, 0);
      text-decoration: underline;
      text-decoration-color: rgb(255, 200, 0);
      text-decoration-thickness: 3px;
      text-underline-offset: 6px;
    }

    @media (max-width: 900px) {

      body,
      #contenidos {
        margin: 0 auto;
        /* elimina el auto-centrado */
        padding: 0 10px;
        /* opcional: un poco de aire lateral */
      }

      #img-logo img {
        width: 80%;
        height: auto;
      }

      .img-seccion>img {
        width: 100%;
      }
    }

/* Animación de rebote */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(10px);
  }
  60% {
    transform: translateX(-50%) translateY(5px);
  }
}

/* Flecha animada hacia abajo */
#scroll-arrow {
  width: 20px;
  height: 30px;
  position: absolute;
  bottom: 128px;       /* justo debajo del header */
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 3;
  animation: bounce 2s infinite;
  transition: transform 0.3s ease, filter 0.3s ease; /* transición suave */
}

/* Tallo de la flecha */
#scroll-arrow::before {
  content: '';
  display: block;
  width: 4px;
  height: 20px;
  background-color: rgb(255, 140, 0);
  margin: 0 auto;
  transition: background-color 0.3s ease;
}

/* Punta de la flecha */
#scroll-arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(255, 140, 0);
  margin: 0 auto;
  transition: border-top-color 0.3s ease;
}

/* Animación de rebote */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(10px); }
  60% { transform: translateX(-50%) translateY(5px); }
}



#scroll-arrow:hover::before {
  background-color: white;
    transform:  scale(1.2); /* un 20% más grande */
}

#scroll-arrow:hover::after {
  border-top-color: white;
    transform:  scale(1.2); /* un 20% más grande */
}

/* Animación de aparición con desenfoque y brillo */
@keyframes appearBlurBrightCover {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.5);
  }
  100% {
    opacity: 0.1;        /* cover final */
    filter: blur(0px) brightness(1);
    
  }
}

@keyframes appearBlurBrightLogo {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1.5);
  }
  100% {
    opacity: 1;           /* logo final */
    filter: blur(0px) brightness(1);

  }
}

/* Aplicamos la animación al cover y logo */
#img-cover {
  opacity: 0;
  animation: appearBlurBrightCover 4s ease forwards;
  animation-delay: 1.4s;

}

#img-logo img {
  opacity: 0;
  animation: appearBlurBrightLogo 1s ease forwards;
  animation-delay: 0.2s;
}