/* ==========================
   🖼 CUADROS PAGE
========================== */

.cuadros-page{

  max-width:1400px;

  margin:120px auto;

  padding:0 20px 100px;

}

/* ==========================
   HERO
========================== */

.cuadros-hero{

  margin-bottom:40px;

}

.cuadros-hero h1{

  font-size:3rem;

  margin-bottom:10px;

}

.cuadros-hero p{

  color:#666;

  font-size:1rem;

}

/* ==========================
   SEARCH
========================== */

.cuadros-search{

  margin-bottom:40px;

}

#buscar-cuadro{

  width:100%;

  max-width:500px;

  height:54px;

  border:none;

  border-radius:16px;

  background:#fff;

  padding:0 20px;

  font-size:1rem;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

  outline:none;

}

/* ==========================
   GRID
========================== */

.cuadros-grid{

  columns:4 280px;

  column-gap:20px;

}

/* ==========================
   CARD
========================== */

.cuadro-card{

  break-inside:avoid;

  margin-bottom:20px;

  background:#fff;

  border-radius:22px;

  overflow:hidden;

  cursor:pointer;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}

.cuadro-card:hover{

  transform:translateY(-6px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.12);

}

.cuadro-img{

  overflow:hidden;

}

.cuadro-card img{

  width:100%;

  display:block;

  transition:transform .5s ease;

}

.cuadro-card:hover img{

  transform:scale(1.04);

}

/* ==========================
   INFO CARD
========================== */

.cuadro-info{

  padding:18px;

}

.cuadro-info h3{

  font-size:1rem;

  margin-bottom:8px;

}

.cuadro-info p{

  color:#666;

  font-size:.92rem;

  margin-bottom:8px;

}

.cuadro-info span{

  display:block;

  color:#888;

  font-size:.85rem;

  margin-bottom:6px;

}

.cuadro-info small{

  color:#999;

  font-size:.78rem;

}

/* ==========================
   🖼 MODAL
========================== */

.cuadro-modal{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.94);

  z-index:99999;

  display:flex;

  align-items:center;

  justify-content:center;

  opacity:0;

  pointer-events:none;

  transition:.3s ease;

  padding:30px;

}

.cuadro-modal.active{

  opacity:1;

  pointer-events:auto;

}

/* ==========================
   MODAL CONTENT
========================== */

.cuadro-modal-content{

  position:relative;

  width:100%;

  max-width:1400px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    360px;

  gap:40px;

  align-items:center;

  animation:modalZoom .35s ease;

}

/* ==========================
   IMAGE AREA
========================== */

#modal-img{

  justify-self:center;

  align-self:center;

  max-width:100%;

  max-height:78vh;

  width:auto;

  height:auto;

  object-fit:contain;

  border-radius:20px;

  background:#111;

  margin-top:30px;

  transition:
    opacity .25s ease,
    transform .35s ease;

}

.modal-img-wrap{

  padding-top:20px;

}

@keyframes modalZoom{

  from{

    transform:scale(.96);

    opacity:0;

  }

  to{

    transform:scale(1);

    opacity:1;

  }

}

/* ==========================
   IMAGE
========================== */

#modal-img.fade{

  opacity:0;

  transform:scale(.98);

}

/* ==========================
   INFO MODAL
========================== */

.cuadro-modal-info{

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

}

.cuadro-modal-scroll{

  width:100%;

  max-height:80vh;

  overflow-y:auto;

  padding-right:10px;

}

.cuadro-modal-info h2{

  font-size:2rem;

  margin-bottom:12px;

}

#modal-info{

  opacity:.82;

  line-height:1.8;

  font-size:1rem;

}

/* ==========================
   SHARE
========================== */

#share-btn{

  margin-top:18px;

  border:none;

  background:white;

  color:black;

  padding:12px 22px;

  border-radius:14px;

  cursor:pointer;

  font-weight:600;

  transition:.25s ease;

}

#share-btn:hover{

  transform:translateY(-2px);

}

/* ==========================
   CLOSE
========================== */

#modal-close{

  position:absolute;

  top:25px;

  right:25px;

  width:58px;

  height:58px;

  border:none;

  border-radius:50%;

  background:white;

  color:black;

  font-size:1.4rem;

  cursor:pointer;

  z-index:20;

  transition:.25s ease;

}

#modal-close:hover{

  transform:scale(1.08);

}

/* ==========================
   NAV BUTTONS
========================== */

.modal-nav{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:64px;

  height:64px;

  border:none;

  border-radius:50%;

  background:
    rgba(255,255,255,.15);

  backdrop-filter:blur(10px);

  color:white;

  font-size:2.5rem;

  cursor:pointer;

  z-index:10;

  transition:.25s ease;

}

.modal-nav:hover{

  background:
    rgba(255,255,255,.28);

}

.modal-nav.prev{

  left:-80px;

}

.modal-nav.next{

  right:-80px;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:900px){

  .cuadros-page{

    margin-top:100px;

  }

  .cuadros-hero h1{

    font-size:2.3rem;

  }

  .cuadros-grid{

    columns:2 180px;

  }

  .modal-nav.prev{

    left:10px;

  }

  .modal-nav.next{

    right:10px;

  }

  .cuadro-modal img{

    max-height:68vh;

  }

  .cuadro-modal-info h2{

    font-size:1.5rem;

  }

}

@media(max-width:768px){

  .cuadros-grid{

    columns:1;

  }

  .cuadro-modal{

    padding:16px;

  }

  #modal-img{

    max-height:70vh;

  }

  .modal-nav{

    width:52px;

    height:52px;

    font-size:2rem;

  }

  #modal-close{

    width:50px;

    height:50px;

    top:15px;

    right:15px;

  }

  .cuadro-modal-info h2{

    font-size:1.3rem;

  }

  #modal-info{

    font-size:.95rem;

  }

}

/* ==========================
   MOBILE
========================== */

@media(max-width:980px){

  .cuadro-modal-content{

    grid-template-columns:1fr;

    gap:24px;

  }

  .cuadro-modal-info{

    text-align:center;

  }

  .cuadro-modal-scroll{

    max-height:none;

    overflow:visible;

  }

}

/* ==========================
   IMAGE WRAP
========================== */

.modal-img-wrap{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

}

/* ==========================
   IMAGE FULLSCREEN BUTTON
========================== */

.img-fullscreen-btn{

  position:absolute;

  top:18px;

  right:18px;

  width:52px;

  height:52px;

  border:none;

  border-radius:50%;

  background:
    rgba(0,0,0,.55);

  backdrop-filter:blur(10px);

  color:white;

  font-size:1.2rem;

  cursor:pointer;

  z-index:5;

  transition:.25s ease;

}

.img-fullscreen-btn:hover{

  transform:scale(1.08);

  background:
    rgba(0,0,0,.75);

}