/* === CONTENEDOR GENERAL === */
.cd-wrapper{
  max-width:1200px;
  margin:40px auto 0; /* sistema héroe */
  padding:0 40px;
}

/* === HERO (CON TARJETAS) === */
.cd-hero{
  text-align:center !important; /* desktop center */
  margin-bottom:50px; /* sistema héroe */
}

.cd-hero h1{
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
  color:#121212;
}

.cd-hero p{
  font-size:16px;
  line-height:1.45;
  color: var(--body-text);
}

/* === GRID === */
.cd-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
  margin-bottom:120px;
}

.cd-item{
  cursor:pointer;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cd-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
}

.cd-item span{
  font-size:17px;
  color: var(--body-text);
}

/* === MOBILE === */
@media(max-width:860px){

  .cd-wrapper{
    padding:0 16px;
    margin-top:60px; /* sistema héroe */
  }

  .cd-hero{
    text-align:left !important; /* mobile siempre left */
    margin-bottom:32px; /* sistema héroe */
  }

  .cd-hero h1{
    font-size:28px;
  }

  .cd-hero p{
    font-size:16px;
    color: var(--body-text);
  }

  .cd-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    margin-bottom:80px;
  }

  .cd-item{
    text-align:left;
  }

  .cd-item img{
    height:170px;
  }

  .cd-item span{
    font-size:16px;
    color: var(--body-text);
  }
}

/* === LIGHTBOX === */
#cdLightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

#cdLightbox.open{
  display:flex;
  flex-direction:column;
}

#cdClose{
  position:absolute;
  top:22px;
  right:22px;
  font-size:30px;
  color:#fff;
  cursor:pointer;
  font-weight:400;
}

#cdImg{
  max-width:90%;
  max-height:70vh;
  border-radius:10px;
  object-fit:contain;
}

#cdTitle{
  color:#fff;
  font-size:18px;
  margin-top:18px;
  text-align:center;
}

/* === FLECHAS DESKTOP === */
.cd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 44px;
  cursor: pointer;
  padding: 12px;
  user-select: none;
  z-index: 10;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.cd-arrow:hover {
  opacity: 1;
}

.cd-left { left: 30px; }
.cd-right { right: 30px; }

/* === MOBILE LIGHTBOX === */
@media(max-width:860px){
  .cd-arrow { display:none; }

  #cdImg{
    max-width:100%;
    max-height:72vh;
  }

  #cdTitle{
    font-size:16px;
  }
}