:root{
  --rosa:#FF4081; --cyan:#00BCD4; --amarillo:#FFC107;
  --verde:#8BC34A; --morado:#9C27B0; --naranja:#FF5722;
  --oscuro:#1a1a2e; --claro:#f5f5fa;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:var(--claro);color:var(--oscuro);line-height:1.6;}

/* HEADER */
header{
  background:linear-gradient(135deg,var(--rosa),var(--morado),var(--cyan));
  padding:1rem 2rem;color:#fff;position:sticky;top:0;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:auto;flex-wrap:wrap;}
.logo{font-size:1.8rem;font-weight:900;letter-spacing:2px;text-shadow:2px 2px 0 #fff3;text-decoration:none;color:#fff;}
.logo span{color:var(--amarillo);}
nav ul{display:flex;list-style:none;gap:1.5rem;flex-wrap:wrap;}
nav a{color:#fff;text-decoration:none;font-weight:600;padding:.5rem 1rem;border-radius:25px;transition:.3s;}
nav a:hover{background:#fff3;transform:translateY(-2px);}

/* HERO */
.hero{
  text-align:center;padding:4rem 1rem;
  background:linear-gradient(135deg,var(--amarillo),var(--rosa));
  color:#fff;
}
.hero h1{font-size:3rem;margin-bottom:1rem;text-shadow:3px 3px 0 #0003;}
.hero p{font-size:1.2rem;}

/* SECCIONES */
section{padding:3rem 1rem;max-width:1200px;margin:auto;}
section h2{font-size:2rem;margin-bottom:2rem;color:var(--morado);text-align:center;}

/* GRID UNIDADES */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;}
.card{
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.1);transition:.3s;cursor:pointer;
  text-decoration:none;color:inherit;display:block;
}
.card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 15px 35px rgba(0,0,0,.2);}
.card-header{height:120px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:900;}
.card-body{padding:1.5rem;}

/* NOTICIAS */
.noticia{background:#fff;border-radius:15px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 4px 15px rgba(0,0,0,.08);}
.noticia h3{color:var(--rosa);margin-bottom:.5rem;}
.noticia .fecha{font-size:.85rem;color:#888;margin-bottom:.5rem;}

/* MURO MENSAJES */
.mensaje{
  background:#fff;border-left:5px solid var(--cyan);
  padding:1rem 1.5rem;border-radius:10px;margin-bottom:1rem;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.mensaje .autor{font-weight:700;color:var(--morado);}
.mensaje .fecha{font-size:.8rem;color:#888;}

form{background:#fff;padding:2rem;border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,.1);max-width:600px;margin:auto;}
form input,form textarea,form select{
  width:100%;padding:.8rem;margin-bottom:1rem;border:2px solid #eee;
  border-radius:10px;font-size:1rem;transition:.3s;
}
form input:focus,form textarea:focus{border-color:var(--rosa);outline:none;}
button,.btn{
  background:linear-gradient(135deg,var(--rosa),var(--morado));
  color:#fff;border:none;padding:.8rem 2rem;border-radius:25px;
  font-weight:700;cursor:pointer;transition:.3s;font-size:1rem;
  display:inline-block;text-decoration:none;text-align:center;
}
button:hover,.btn:hover{transform:scale(1.05);box-shadow:0 5px 20px rgba(255,64,129,.4);}

/* BOTÓN SUBIR */
#btnSubir{
  position:fixed;bottom:30px;right:30px;width:55px;height:55px;
  border-radius:50%;background:linear-gradient(135deg,var(--rosa),var(--morado));
  color:#fff;border:none;font-size:1.5rem;cursor:pointer;
  box-shadow:0 5px 20px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transition:.3s;z-index:99;
}
#btnSubir.visible{opacity:1;visibility:visible;}

/* FOOTER */
footer{background:var(--oscuro);color:#fff;text-align:center;padding:2rem;margin-top:3rem;}

/* ANIMACIONES SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(50px);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.active{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal-left.active{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal-right.active{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(0.8);transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal-scale.active{opacity:1;transform:scale(1);}
.reveal:nth-child(2){transition-delay:0.1s}
.reveal:nth-child(3){transition-delay:0.2s}
.reveal:nth-child(4){transition-delay:0.3s}
.reveal:nth-child(5){transition-delay:0.4s}
.reveal:nth-child(6){transition-delay:0.5s}

/* RESPONSIVE */
@media(max-width:768px){
  .hero h1{font-size:2rem;}
  nav ul{gap:.5rem;font-size:.9rem;}
  .nav-container{flex-direction:column;gap:1rem;}
  #btnSubir{width:45px;height:45px;bottom:20px;right:20px;}
}