<style>
    * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Open Sans", sans-serif;
      margin: 0;
      background-color: #f9f9f9;
    }

    /* Loading animation */
    .centrar-loading {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #232323;
      z-index: 9999;
      transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 4px solid rgba(245, 217, 165, 0.3);
      border-radius: 50%;
      border-top-color: #f5d9a5;
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .hidden-loading {
      overflow: hidden;
    }

    /* Header with title */
    .header {
      background-color: #232323;
      padding: 20px 0;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .texto-galeria {
      font-family: "Alkatra", sans-serif;
      color: #f5d9a5;
      font-size: 42px;
      margin: 0;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Filters */
    .filters {
      padding: 15px 0;
      background-color: #2c2c2c;
      position: sticky;
      top: 88px;
      z-index: 99;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .filters-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .filters ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 0;
      margin: 0;
    }

    .filters li {
      margin: 5px;
    }

    .filters li a {
      display: block;
      padding: 8px 16px;
      color: #b6b6b6;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      border-radius: 25px;
      transition: all 0.3s ease;
    }

    .filters li a:hover {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .filters li.active a {
      color: #e3ca66;
      border: 1px solid #e3ca66;
      border-radius: 25px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Return button */
    .return-btn {
      display: inline-block;
      margin-top: 15px;
      padding: 8px 20px;
      background-color: #f5d9a5;
      color: #232323;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .return-btn:hover {
      background-color: #e3ca66;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Gallery container */
    #container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 15px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 15px;
    }

    /* Gallery items */
    .grid-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      aspect-ratio: 4/3;
      cursor: pointer;
      background-color: #eaeaea;
      transform: scale(0.9);
      opacity: 0;
    }

    /* Animación de rebote para las imágenes */
    @keyframes bounceIn {
      0% {
        transform: scale(0.3);
        opacity: 0;
      }
      40% {
        transform: scale(1.1);
        opacity: 0.8;
      }
      60% {
        transform: scale(0.9);
        opacity: 1;
      }
      80% {
        transform: scale(1.03);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .grid-item.loaded {
      animation: bounceIn 0.8s ease-out forwards;
    }

    .grid-item:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .grid-item.loaded:hover {
      transform: translateY(-5px) scale(1.02);
    }

    .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1);
      transition: filter 0.5s ease, transform 0.5s ease;
      opacity: 0;
    }

    .grid-item.loaded img {
      opacity: 1;
    }

    .grid-item:hover img {
      filter: grayscale(0);
      transform: scale(1.05);
    }

    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 15px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .grid-item:hover .overlay {
      transform: translateY(0);
    }

    /* Placeholder para imágenes */
    .placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
      background-size: 200% 100%;
      animation: shine 1.5s linear infinite;
      position: absolute;
      top: 0;
      left: 0;
    }

    @keyframes shine {
      to {
        background-position-x: -200%;
      }
    }

    /* Modal */
    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.9);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .modal.show {
      display: flex;
      opacity: 1;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      max-width: 90%;
      max-height: 90vh;
      margin: auto;
      display: block;
      background: #232323;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      position: relative;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    }

    .modal.show .modal-content {
      transform: scale(1);
      opacity: 1;
    }

    .modal-title {
      color: #f5d9a5;
      font-family: "Alkatra", sans-serif;
      font-size: 24px;
      margin-bottom: 15px;
      text-align: center;
    }

    .modal-img {
      max-height: 70vh;
      max-width: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 5px;
      display: block;
      margin: 0 auto;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
    }

    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      color: #f5d9a5;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      transition: all 0.3s ease;
      z-index: 10;
    }

    .close-modal:hover {
      background-color: rgba(245, 217, 165, 0.2);
      transform: rotate(90deg);
    }

    /* Botón de carga más */
    .load-more {
      display: block;
      margin: 30px auto;
      padding: 10px 25px;
      background-color: #f5d9a5;
      color: #232323;
      border: none;
      border-radius: 25px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .load-more:hover {
      background-color: #e3ca66;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .load-more.hidden {
      display: none;
    }

    /* Responsive styles */
    @media screen and (max-width: 768px) {
      .texto-galeria {
        font-size: 36px;
      }

      .filters {
        padding: 10px 0;
        top: 76px;
      }

      .filters ul {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .filters ul::-webkit-scrollbar {
        display: none;
      }

      .filters li a {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
      }
      
      #container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
      }
      
      .grid-item {
        width: calc(50% - 5px) !important;
        margin-bottom: 10px !important;
      }
      
      .overlay {
        transform: translateY(0);
        padding: 8px;
        font-size: 14px;
      }

      .close-modal {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 24px;
      }
    }

    @media screen and (max-width: 576px) {
      .header {
        padding: 15px 0;
      }

      .texto-galeria {
        font-size: 28px;
      }

      .filters {
        top: 62px;
      }

      .filters-container {
        max-height: none; /* Asegura que el menú siempre sea visible */
        overflow: visible;
      }

      .grid-item {
        aspect-ratio: 1/1;
      }
      
      .return-btn {
        padding: 6px 15px;
        font-size: 13px;
      }

      .modal-content {
        max-width: 95%;
        padding: 15px;
      }

      .modal-title {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
    
    @media screen and (max-width: 350px) {
      .grid-item {
        border-radius: 6px;
      }
      
      .overlay {
        padding: 5px;
        font-size: 12px;
      }

      .close-modal {
        width: 30px;
        height: 30px;
        font-size: 20px;
      }
    }
  </style>