/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
   :root {
    --gap: 16px;
    --sidebar-min: 260px;
    --main-min: 380px;
    --wrap-max: 1400px;
    --box-padding: 12px;
    --border-radius: 10px;
  }
  
@font-face{
   font-family: "pixelify";
   src:url(../fonts/PixelifySans-Regular.ttf);
      }

@font-face{
  font-family: "VT323";
  src:url(../fonts/VT323-Regular.ttf);
}
@font-face{
  font-family:"pixelscript";
  src:url(../fonts/pixelscript.ttf);
}

/* ========================================
      RESET & BASE STYLES
      ======================================== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   body {
       font-family: 'VT323';
       background: #f5f5f0;
       background: url(galeria/fondo.png);
       background-size:contain;
       background-attachment: fixed;
       color: #333;
       line-height: 1.6;
       cursor: url(images/cursorestrella.png),auto;
   }
   
   /* ========================================
      HEADER
      ======================================== */
   .header {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       margin: 30px auto 0;
       padding: 20px 0;
       text-align: center;
       position: relative;
   }
   
   .header h1 {
       font-family: 'pixelify';
       font-size: clamp(2.5rem, 5vw, 4rem);
       font-weight: 600;
       margin: 0;
       padding: 0;
       line-height: 1.2;
       color: #dfb21d;
       text-shadow: 
           2px 2px 0 rgba(255, 255, 255, 0.8),
           4px 4px 0 rgba(0, 0, 0, 0.2),
           0 0 20px rgba(79, 61, 70, 0.3);
       transition: all 0.3s ease;
       cursor: pointer;
   }
    /* ========================================
      MAIN CONTAINER
      ======================================== */
   .container {
       display: flex;
       max-width: 1400px;
       margin: 0 auto;
       padding: 40px 20px;
       gap: 40px;
   }
   
   /* ========================================
      SIDEBAR
      ======================================== */
   .sidebar {
       width: 200px;
       flex-shrink: 0;
       font-family: 'VT323';
       cursor: url(images/cursorestrella.png),auto;
   }
   
   .sidebar h1 {
       font-size: 18px;
       margin-bottom: 30px;
       color: #fffdfd;
       text-transform: lowercase;
   }
   
   .sidebar nav {
       position: sticky;
       top: 40px;
   }
   
   .sidebar ul {
       list-style: none;
   }
   
   .sidebar li {
       margin-bottom: 12px;
   }
   
   .sidebar a {
       color: #fcfafa;
       text-decoration: none;
       font-size: 16px;
       cursor: pointer;
       display: block;
       padding: 4px 0;
       cursor: url(images/cursorestrella.png),auto;
   }
   
   .sidebar a:hover,
   .sidebar a.active {
       color: #de4362;
       text-decoration: underline;
   }
   
   /* ========================================
      GALLERY WRAPPER
      ======================================== */
   .gallery-wrapper {
       flex: 1;
       background: #ffffff00;
       background-image: url(images/notebook.png);
       background-size: repeat;
       border: 1px solid #0c0c0c;
       border-radius: 5px;
       box-shadow: 
           inset 0 0 0 1px #e5e5e5,
           0 2px 4px rgba(0,0,0,0.1);
       padding: 40px;
       cursor: url(images/cursorestrella.png),auto;
   }
   
   .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-rows: 350px; 
}
   
   /* ========================================
      POLAROID CARDS
      ======================================== */
   .polaroid {
       background: #fbedcc;
       background-image: url(bgimages/crumpled.jpg);
       padding: 0;
       display: flex;
       flex-direction: column;
       box-shadow: 0 3px 10px rgba(0,0,0,0.2);
       transition: transform 0.2s;
       /*break-inside: avoid;*/
       margin-bottom: 20px;
       position:relative;
       border: 1px solid #e5dcc3;
       cursor: url(images/cursorestrella.png),auto;
   }
   
   .polaroid:hover {
       transform: translateY(-5px) rotate(1deg);
       box-shadow: 0 6px 18px rgba(0,0,0,0.25);
   }
   
   .polaroid.hidden {
       display: none;
   }
   
   .polaroid-img {
    flex: 1;          
    overflow: hidden;
    min-height: 0;   
}

.polaroid-img img,
.polaroid-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
   
   /* Caption Area */
   .polaroid-caption {
       padding: 25px 15px 15px 15px;
       background: #efe4c4;
       font-family: 'VT323', monospace;
       font-size: 16px;
       color: #333;
       text-align: center;
       min-height: 85px;
       position: relative;
       background: repeating-linear-gradient(
           transparent,
           transparent 18px,
           #4a010100 18px,
           #30000000 19px
       );
   }
   
   /* Stamp in top right of caption */
   /*.polaroid-caption::before {
       content: 'xoxo';
       position: absolute;
       top: 10px;
       right: 10px;
       width: 60px;
       height: 20px;
       border: 2px dashed #999;
       background: rgba(253, 214, 214, 0.904);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
   }*/
   
   /* ========================================
      LIGHTBOX
      ======================================== */
   .lightbox {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       z-index: 1000;
       justify-content: center;
       align-items: center;
       font-family: 'VT323';
   }
   
   .lightbox.active {
       display: flex;
   }
   
   .lightbox-content {
       max-width: 90%;
       max-height: 90%;
       position: relative;
   }
   
   .lightbox-content img,
   .lightbox-content video {
       max-width: 100%;
       max-height: 90vh;
       object-fit: contain;
   }
   
   .lightbox-caption {
       color: white;
       text-align: center;
       margin-top: 15px;
       font-size: 14px;
       font-family: 'VT323';
   }
   
   .lightbox-close {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 40px;
       color: white;
       cursor: pointer;
       z-index: 1001;
   }
   
   /* ========================================
      RESPONSIVE BREAKPOINTS
      ======================================== */
   
   /* ipad kids --- under 1024px */
   @media (max-width: 1024px) {
       .gallery {
           column-count: 2;
       }
   
       .camera-decor {
           width: 80px;
       }
   
       .camera-left {
           left: 5%;
       }
   
       .camera-right {
           right: 5%;
       }
   }
   
   /* new phone who dis --- under 768px */
   @media (max-width: 768px) {
       .container {
           flex-direction: column;
           padding: 20px;
       }
   
       .sidebar {
           width: 100%;
       }
   
       .sidebar nav {
           position: static;
       }
   
       .sidebar ul {
           display: flex;
           flex-wrap: wrap;
           gap: 15px;
       }
   
       .gallery {
           column-count: 1;
       }
   
       .camera-decor {
           width: 60px;
       }
   
       .camera-left {
           left: 2%;
       }
   
       .camera-right {
           right: 2%;
       }
   }

  .back-home img {
    width: 100px;        
    height: auto;       
    margin-top: 15px;   
    transition: transform 0.2s ease; 
}

.back-home img:hover {
    transform: scale(1.1);
}