/* RESET */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    color: #333;
}

/* MENU SUPERIOR */
.menu-superior {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #3366cc;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 1000;
  box-sizing: border-box;
}

.menu-logo img { height: 40px; max-width: 120px; object-fit: contain; }
.menu-items { display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-end; max-width: 80%; }
.menu-items a { color: #fff; text-decoration: none; font-weight: bold; white-space: nowrap; transition: 0.2s; padding: 6px 8px; border-radius: 4px; }
.menu-items a:hover { background: rgba(255,255,255,0.15); }

/* BOTÓN HAMBURGUESA */
.menu-toggle { display: none; font-size: 24px; cursor: pointer; color: #fff; margin-left: 10px; }

/* SLIDER */
.slider-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - 70px - 50px); /* altura de viewport - menú (70px) - espacio visible del contenido (50px) */
    margin: 0 auto 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.slider-container .swiper,
.slider-container .swiper-wrapper,
.slider-container .swiper-slide {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.slider-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swiper-button-next, .swiper-button-prev {
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
}

/* CONTENIDO */
.contenido {
  margin-top: 20px;
  padding: 20px;
}

/* SECCIONES Y GRILLAS */
.seccion { margin-bottom: 50px; }
.seccion h2 { margin-bottom: 20px; color: #333; font-size: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 15px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.card-img { width: 100%; height: auto; max-height: 150px; object-fit: contain; border-radius: 8px; margin-bottom: 10px; }
.card-title { font-size: 16px; margin: 6px 0; }
.card-resumen { flex-grow:1; font-size: 14px; color: #555; }

/* Botones */
.boton-primario { display: inline-block; margin-top: 10px; padding: 6px 10px; background: #007bff; color: #fff; text-decoration: none; border-radius: 6px; transition:0.2s; }
.boton-primario:hover { background:#0056b3; }
.boton-vermas { display: inline-block; padding:6px 12px; background:#4da6ff; color:#fff; text-decoration:none; border-radius:6px; transition:0.2s; }
.boton-vermas:hover { background:#3399ff; }

.sin-imagen { width: 100%; max-height:150px; background:#eee; display:flex; justify-content:center; align-items:center; border-radius:8px; color:#777; font-size:14px; }

/* FOOTER */
.footer { text-align:center; padding:20px; margin-top:40px; background:#eee; font-size:14px; color:#666; }

/* RESPONSIVE */
@media(max-width: 992px){
  .slider-container { display:none !important; }
}

@media (max-width: 900px) {
  .menu-items { display:none; flex-direction:column; background:#3366cc; position:absolute; top:60px; right:0; width:220px; padding:10px; box-shadow:0 4px 8px rgba(0,0,0,0.2); }
  .menu-items.active { display:flex; }
  .menu-toggle { display:block; }
}