:root {
    --negro: #0b0b0b;
    --negro-soft: #1a1a1a;
    --amarillo-oscuro: #c9a227;
    --amarillo-soft: #e6cf72;
    --blanco: #ffffff;
    --sombra-suave: 0 20px 40px rgba(0,0,0,.18);
    --sombra-hover: 0 25px 60px rgba(0,0,0,.28);
}

/* ================= BASE ================= */
html, body { font-family: 'Poppins', sans-serif; margin: 0; scroll-behavior: smooth; }

/* Fondo con overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url("static/panguearriba.jpg") center/cover no-repeat;
    z-index: -1;
}

/* NAVBAR */
.custom-navbar { background: var(--negro-soft); backdrop-filter: blur(10px); box-shadow: var(--sombra-suave); padding: 16px 0; }
.navbar-logo { height: 60px; }
.nav-link { font-weight: 500; color: var(--blanco); transition: color .3s ease; }
.nav-link:hover { color: var(--amarillo-oscuro) !important; }

/* HERO */
.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-title { font-size: clamp(3rem,6vw,4.5rem); font-weight: 800; color: var(--amarillo-oscuro); text-shadow: 0 6px 15px rgba(0,0,0,.85); }
.hero-text { color: var(--blanco); font-size: 1.15rem; max-width: 700px; margin: 0 auto; }

/* TARJETAS */
.card { background: var(--amarillo-soft); border-radius: 26px; border: none; box-shadow: var(--sombra-suave); transition: transform .35s ease, box-shadow .35s ease; }
.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--sombra-hover); }
.card h2, .card h5 { color: var(--negro); }

/* LIST GROUP */
.list-group { border-radius: 24px; overflow: hidden; }
.list-group-item { padding: 18px 22px; font-size: .95rem; background: var(--amarillo-soft); color: var(--negro); }

/* AVISO IMPORTANTE */
.notice-btn { position: fixed; top: 200px; right: 20px; background: linear-gradient(135deg,var(--amarillo-oscuro),var(--amarillo-soft)); color: var(--negro); font-weight: 600; border-radius: 50px; padding: 12px 22px; box-shadow: var(--sombra-suave); border: none; transition: transform .3s ease, box-shadow .3s ease; z-index: 999; }
.notice-btn:hover { transform: scale(1.05); box-shadow: var(--sombra-hover); }

.notice-card { position: fixed; top: 150px; right: 20px; width: 360px; background: var(--amarillo-soft); border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-hover); display: none; z-index: 1000; color: var(--negro); }
.notice-header { background: var(--amarillo-oscuro); color: var(--negro); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.notice-logo { width: 70px; height: auto; }
.notice-body { padding: 18px; font-size: .9rem; }

/* FOOTER */
.footer-custom { background: var(--amarillo-oscuro); color: var(--negro); padding: 30px 0; text-align: center; border-top-left-radius: 40px; border-top-right-radius: 40px; }
.footer-custom p { margin: 4px 0; font-size: .9rem; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .notice-card { width: 90%; right: 5%; }
    .hero-title { font-size: 2.8rem; }
}
