.hero--luna{
  background-image:url('../../imagenes/paseo-luna-llena/cataratas-bajo-la-luz-de-la-luna-llena.webp');
}

.year-calendar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:28px;
  width:100%;
  max-width:100%;
}

.month-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}

.month-card h3{
  margin:0 0 14px;
  font-size:1.05rem;
  text-align:center;
}

.weekdays,
.days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  width:100%;
  max-width:100%;
}

.weekdays span{
  font-size:.72rem;
  font-weight:700;
  color:#6a7886;
  text-align:center;
  min-width:0;
}

.day{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:.88rem;
  color:#4f5d6a;
  background:#f6f8fb;
  min-width:0;
  box-sizing:border-box;
}

.day.empty{
  background:transparent;
}

.day.active{
  background:#092d6a;
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 14px rgba(9,45,106,.18);
}

.calendar-note{
  max-width:860px;
  margin:22px auto 0;
  text-align:center;
  color:#52606d;
  font-size:.95rem;
}

.card-luna{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.card-luna h3{
  margin:0 0 10px;
  font-size:1.12rem;
}

.card-luna p{
  margin:0;
  color:#52606d;
}

/* Tablet */
@media (max-width:900px){
  .year-calendar{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
}

/* Mobile */
@media (max-width:640px){
  .year-calendar{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:22px;
  }

  .month-card{
    padding:16px 12px;
  }

  .month-card h3{
    font-size:1rem;
    margin-bottom:12px;
  }

  .weekdays,
  .days{
    gap:4px;
  }

  .weekdays span{
    font-size:.66rem;
  }

  .day{
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:8px;
    font-size:.78rem;
  }

  .calendar-note{
    font-size:.88rem;
    margin-top:18px;
    padding:0 4px;
  }

  .card-luna{
    padding:18px;
  }
}

/* Mobile muy angosto */
@media (max-width:360px){
  .month-card{
    padding:14px 10px;
  }

  .weekdays,
  .days{
    gap:3px;
  }

  .weekdays span{
    font-size:.62rem;
  }

  .day{
    font-size:.7rem;
    border-radius:7px;
  }
}