:root {
  color-scheme: light;

  /* NUEVA PALETA SUAVE */
  --amarillo: #f7d944;
  --rosado: #ec639f;
  --rosado-hover: #e9589b;
  --verde: #4ecb71;
  --verde-hover: #3db863;
  --fondo: #fafafa;
  --texto: #444;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   ANIMACIÓN LOGO
========================= */

@keyframes flotar{
  0%{transform: translateY(0);}
  50%{transform: translateY(-8px);}
  100%{transform: translateY(0);}
}

/* =========================
   BODY
========================= */

body{
  font-family:'Fredoka', sans-serif;
  background:linear-gradient(#ffffff, var(--amarillo));
  color:var(--texto);
  overflow-x:hidden;
}

/* =========================
   TIPOGRAFÍA
========================= */

h1{
  font-size:clamp(34px, 6vw, 60px);
  font-weight:700;
  line-height:1.1;
}

h2{
  font-size:clamp(26px, 4vw, 36px);
  font-weight:600;
  color:var(--rosado);
  margin-bottom:20px;
  text-align:center;
}

h3{
  font-size:clamp(20px, 3vw, 24px);
  font-weight:600;
  margin-bottom:10px;
}

p{
  font-size:16px;
  line-height:1.7;
  max-width:700px;
  margin:auto;
}

/* =========================
   ESPACIADO
========================= */

section{
  padding:80px 8%;
}

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

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 8%;
  background:var(--amarillo);
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
  position:sticky;
  top:0;
  z-index:100;
}

.menu a{
  margin-left:20px;
  text-decoration:none;
  color:#555;
  font-size:18px;
  font-weight:600;
  transition:0.3s;
}

.menu a:hover{
  color:var(--rosado);
}

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

.hero{
  height:85vh;
  background:url("https://raw.githubusercontent.com/valeriahernan/Housemagic/refs/heads/main/Fondo1.png");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  padding:20px;
  position:relative;
  filter: saturate(90%);
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
  z-index:1;
}

.hero-text{
  position:relative;
  z-index:2;
  overflow:visible;
}

.hero-logo{
  width:clamp(200px, 30vw, 380px);
  max-width:90%;
  margin-bottom:20px;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.3));
  animation: flotar 3s ease-in-out infinite;
}

.hero-text h1{
  color:white;
  text-shadow:2px 4px 10px rgba(0,0,0,0.4);
}

.hero-text p{
  font-size:clamp(16px, 2.5vw, 20px);
  margin-top:10px;
}

.boton{
  display:inline-block;
  margin-top:20px;
  padding:12px 28px;
  background:var(--rosado);
  border-radius:30px;
  color:white;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
  transition:0.3s;
}

.boton:hover{
  background:var(--rosado-hover);
  transform:scale(1.05);
}

/* =========================
   ACERCA
========================= */

.acerca{
  text-align:center;
}

/* =========================
   EVENTOS
========================= */

.eventos{
  text-align:center;
  background:var(--amarillo);
}

.eventos-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:30px;
}

.evento{
  background:var(--rosado);
  color:white;
  padding:20px;
  border-radius:15px;
  font-size:18px;
  font-weight:600;
  transition:0.3s;
}

.evento:hover{
  transform:translateY(-5px);
  box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

/* =========================
   GALERIA
========================= */

.galeria{
  text-align:center;
  background-image:url("https://raw.githubusercontent.com/valeriahernan/Housemagic/refs/heads/main/globos.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
  filter: saturate(90%);
}

.galeria::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
  z-index:1;
}

.galeria h2,
.slider{
  position:relative;
  z-index:2;
}

.galeria h2{
  color:white;
}

/* =========================
   SLIDER INFINITO
========================= */

.slider{
  position:relative;
  max-width:1000px;
  margin:auto;
  overflow:hidden;
  padding:0 10px;
}

.slides{
  display:flex;
  width:max-content;
  animation:scroll 25s linear infinite;
}

.slides img{
  width:clamp(220px, 30vw, 320px);
  aspect-ratio:4/3;
  object-fit:cover;
  flex-shrink:0;
  border-radius:20px;
  margin-right:15px;
  transition:transform 0.3s;
}

.slides img:hover{
  transform:scale(1.05);
}

@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* =========================
   UBICACION
========================= */

.ubicacion{
  text-align:center;
}

iframe{
  width:100%;
  height:350px;
  border:none;
  border-radius:15px;
  margin-top:20px;
}

/* =========================
   CONTACTO
========================= */

.contacto{
  text-align:center;
  background:#f4f8ff;
}

.boton-whatsapp{
  display:inline-block;
  margin-top:20px;
  padding:12px 28px;
  background:var(--verde);
  border-radius:30px;
  color:white;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
  transition:0.3s;
}

.boton-whatsapp:hover{
  background:var(--verde-hover);
  transform:scale(1.05);
}

/* =========================
   FOOTER
========================= */

footer{
  background:var(--rosado);
  color:white;
  padding:20px;
  text-align:center;
  font-size:16px;
  font-weight:600;
}

/* =========================
   WHATSAPP FLOAT
========================= */

.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--verde);
  color:white;
  padding:16px;
  border-radius:50%;
  font-size:24px;
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
  z-index:1000;
  transition:0.3s;
}

.whatsapp:hover{
  transform:scale(1.1);
}

/* =========================
   ANIMACIÓN SCROLL
========================= */

.animar{
  opacity:0;
  transform:translateY(20px);
  transition:all 0.6s ease-out;
}

.animar.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

  section{
    padding:50px 5%;
  }

  .eventos-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .nav{
    justify-content:center;
  }

  .menu{
    display:none;
  }

  .hero{
    height:75vh;
  }

  .hero-logo{
    width:160px;
  }

  .slides{
    animation:scroll 35s linear infinite;
  }

  .slides img{
    width:60%;
    max-width:180px;
    aspect-ratio:1/1;
    margin:0 6px;
    border-radius:15px;
  }

}