@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

/* Reset y base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Rubik', sans-serif; }

/* NAVBAR */
.navbar {
  display:flex; justify-content:space-between; align-items:center;
  background:#95569E; padding:0.8em 1.5em;
  position: relative;
}
.navbar .logo {
  color:#fff; font-size:1.5em; text-decoration:none;
}
.nav-menu {
  list-style:none; display:flex; gap:1em;
  position: relative;
}
.nav-menu a {
  color:#fff; text-decoration:none;
}
.menu-dropdown {
  position: absolute;
  top: 100%;
  background-color: #FFF482;
  color: #000;
  padding: 0.5em 1em;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  min-width: 220px;
  z-index: 1000;
}
.menu-dropdown a {
  text-decoration: none;
  color: #000;
  padding: 0.4em 0;
  transition: background 0.3s ease;
}
.menu-dropdown a:hover {
  background-color: #FCED56;
}
.menu-btn:hover .menu-dropdown {
  display: flex;
}

.btn-float {
  position:fixed; bottom:1em; right:1em;
  background:#FCED56; border:none; padding:0.8em 1.2em;
  border-radius:2em; font-weight:bold; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* SLIDER */
.slider {
  position:relative; height:60vh; overflow:hidden;
}
.slide {
  display:none; position:absolute; width:100%; height:100%;
}
.slide img {
  width:100%; height:100%; object-fit:cover;
}
.slogan {
  position:absolute; bottom:2em; left:2em;
  font-size:2em; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.prev, .next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.3); border:none; color:#fff;
  font-size:2em; padding:0.2em 0.5em; cursor:pointer;
}
.prev { left:1em; } .next { right:1em; }

/* GRID DE CATEGORÍAS */
.grid-section {
  padding:6.5em;
}
.grid-section h2 {
  text-align:center; margin-bottom:3.5em;
}
.grid-container {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2.5em;
}
.grid-item {
  position:relative; overflow:hidden; border-radius:0.5em;
  cursor:pointer; transition:transform .3s;
  animation: fadeInUp 1s ease-in-out both;
}
.grid-item img {
  width:100%; display:block;
}
.grid-item h3 {
  position:absolute; bottom:0; width:100%; margin:0;
  background:rgba(0,0,0,0.4); color:#fff; padding:0.5em;
}
.grid-item:hover {
  transform:scale(1.03);
}

/* FOOTER */
.footer {
  background-color: #95569E;
  color: white;
  padding: 3rem 2rem 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
}
.footer-col {
  padding: 1rem;
}
.footer-col:nth-child(1) {
  flex: 0 0 37%; display: flex; align-items: center; justify-content: center;
}
.footer-col:nth-child(2) {
  flex: 0 0 28%;
}
.footer-col:nth-child(3) {
  flex: 0 0 20%;
}
.footer-col:nth-child(4) {
  flex: 0 0 15%;
}
.logo-footer-img {
  height: 90px;
}
.footer-title {
  color: #FCED56;
  font-weight: 600;
  margin-bottom: 0.8rem;
  border-bottom: 2px solid #FCED56;
  display: inline-block;
}
.footer-links, .footer-menu {
  list-style: disc; list-style-position: inside; padding: 0; margin: 0;
}
.footer-links li, .footer-menu li {
  margin-bottom: 0.4rem;
}
.footer-links a, .footer-menu a {
  text-decoration: none; color: white; transition: color 0.3s ease;
}
.footer-links a:hover, .footer-menu a:hover {
  color: #FCED56;
}
.footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.3);
  background-color: #844c8e;
  color: white;
}

.slider-text {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0.75rem 1.5rem;
  font-size: 1.5rem;
  border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-aos].aos-animate {
  opacity: 1;
}

@keyframes fadeInUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
