/* ===== styles.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,500;14..32,700&display=swap');

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

body {
    font-family: 'Inter', sans-serif;
    background: #0c0b17;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #eef5ff;
    background-image: radial-gradient(circle at 30% 10%, #1e2a4a 0%, #0a0817 80%);
    line-height: 1.5;
}

/* ===== NAVBAR ===== */
.custom-navbar {
    background: rgba(5, 5, 20, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 170, 70, 0.25);
    padding: 0.8rem 0;
    transition: 0.25s;
}

.custom-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.8rem;
    background: linear-gradient(145deg, #fca85a, #b47aff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
}

.custom-navbar .navbar-brand i {
    color: #ff9940;
    margin-right: 4px;
}

.custom-navbar .nav-link {
    color: rgba(230, 240, 255, 0.8);
    font-weight: 400;
    margin: 0 0.4rem;
    position: relative;
    transition: 0.2s;
    text-transform: lowercase;
    font-size: 1.1rem;
}

.custom-navbar .nav-link:hover {
    color: #ffb870;
}

.custom-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, #ffa05e, #b388ff, transparent);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.custom-navbar .nav-link:hover::after {
    transform: scaleX(1);
}

.badge-nav {
    background: #26253f;
    border-radius: 60px;
    padding: 0.45rem 1.2rem;
    font-size: 0.9rem;
    border: 1px solid #ffa55c;
    color: #ffe6c7;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.navbar-toggler {
    border: 1px solid rgba(255, 170, 100, 0.4);
    background: rgba(0,0,0,0.3);
}

/* ===== CONTENIDO PRINCIPAL ===== */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.magic-glass-card {
    background: rgba(18, 22, 45, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 170, 100, 0.25);
    border-radius: 56px 56px 42px 42px;
    padding: 2.8rem 1.8rem 2rem;
    width: 100%;
    max-width: 950px;
    box-shadow: 0 30px 50px -15px #00000080, inset 0 1px 2px rgba(255,215,150,0.2);
    transition: box-shadow 0.3s;
}

.magic-glass-card:hover {
    box-shadow: 0 40px 60px -15px #b362ff40, inset 0 0 12px #ffb57020;
}

/* ===== WAVE HEADER ===== */
.wave-header {
    text-align: center;
    margin-bottom: 1.2rem;
}

.wave-title {
    font-size: 3.2rem;
    font-weight: 700;
    background: linear-gradient(130deg, #ffd6a0, #bf9bff, #9ad7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -2px;
    line-height: 1.1;
}

.wave-sub {
    font-size: 1.3rem;
    color: #bfd5ff;
    background: rgba(0, 20, 40, 0.5);
    display: inline-block;
    padding: 0.3rem 2rem;
    border-radius: 60px;
    backdrop-filter: blur(4px);
    border: 1px solid #ffb25940;
}

/* ===== SVG WAVE ===== */
.svg-wave-container {
    text-align: center;
    margin: 1.8rem 0 1.5rem;
}

.svg-wave-container svg {
    max-width: 550px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 15px #301c4e);
    transition: transform 0.25s;
    cursor: pointer;
}

.svg-wave-container svg:hover {
    transform: scale(1.01) translateY(-4px);
}

.wave-path {
    animation: waveMotion 6s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes waveMotion {
    0% { d: path("M0,64 C80,100 160,20 240,48 C320,76 400,40 480,64 L480,160 L0,160 Z"); }
    30% { d: path("M0,72 C96,38 176,120 256,100 C336,80 416,55 480,78 L480,160 L0,160 Z"); }
    70% { d: path("M0,52 C88,20 152,110 240,112 C328,114 400,28 480,60 L480,160 L0,160 Z"); }
    100% { d: path("M0,64 C80,100 160,20 240,48 C320,76 400,40 480,64 L480,160 L0,160 Z"); }
}

.wave-hint {
    font-size: 0.9rem;
    color: #fdcf9e;
    margin-top: 0.3rem;
    opacity: 0.7;
}

/* ===== SOCIAL REEL (tus 7 enlaces) ===== */
.social-reel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1rem;
    margin: 2.8rem 0 1.5rem;
}

.social-item {
    background: #171d31;
    border: 1px solid #ffad7050;
    backdrop-filter: blur(8px);
    padding: 0.7rem 1.6rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #f0f3ff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s ease;
    box-shadow: 0 8px 12px #00000040;
}

.social-item i {
    font-size: 1.6rem;
    color: #ffb05c;
    transition: transform 0.2s;
}

.social-item:hover {
    background: #2f2a55;
    border-color: #ff8a3c;
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 15px 20px #9f6eff40;
    color: white;
}

.social-item:hover i {
    transform: scale(1.1);
    color: #ffc107;
}

/* ===== DEVELOPER BADGE ===== */
.developer-badge {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding: 0.9rem 1.8rem;
    display: inline-block;
    border: 1px dashed #ffb25b;
    font-size: 1.1rem;
    margin-top: 1rem;
    width: auto;
    backdrop-filter: blur(4px);
}

.developer-badge .separator {
    margin: 0 0.8rem;
    color: #ffc489;
    opacity: 0.5;
}

/* ===== FOOTER ===== */
.custom-footer {
    background: #0c0a1b;
    border-top: 1px solid #ff9f4b30;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: #b3c6ff;
}

.footer-left {
    font-size: 1rem;
}

.footer-left i {
    color: #ff9f4b;
    margin-right: 4px;
}

.footer-right {
    font-size: 0.98rem;
}

.footer-link {
    color: #fec28b;
    text-decoration: none;
    border-bottom: 1px dotted #ff8f46;
    margin: 0 2px;
}

.footer-link:hover {
    color: white;
    border-bottom-color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .wave-title { font-size: 2.2rem; }
    .magic-glass-card { padding: 2rem 1rem; border-radius: 40px; }
    .social-item { padding: 0.5rem 1.2rem; font-size: 0.9rem; }
    .social-item i { font-size: 1.3rem; }
    .developer-badge { font-size: 0.9rem; padding: 0.6rem 1rem; }
    .footer-grid { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 480px) {
    .badge-nav { display: none; }
    .wave-sub { font-size: 1rem; }
}