:root{
    --med-blue: #0067b8;
    --turquoise: #00a3c4;
    --coral: #ff6b5f;
    --sand: #f4d9a5;
    --nav-h: 80px;
    --logo-size:56px;
    --footer-h:80px;
    --text-color:#072033;
    --body-bg:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    min-height:100vh;
    background:var(--body-bg);
    color:var(--text-color);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

/* NAV */
.sidebar{
    position:fixed; top:0; left:0; right:0;
    height:var(--nav-h);
    display:flex; align-items:center; padding:0 4vw;
    background: linear-gradient(90deg, rgba(0,103,184,0.92), rgba(0,163,196,0.94));
    z-index:10;
}
.logo{ display:flex; align-items:center; height:var(--logo-size); }
.logo img{ display:block; height:calc(var(--logo-size)); width:auto; object-fit:contain; }
.logo-fallback{ display:none; font-weight:700; color:#fff; font-size:1.15rem; }

/* MAIN (centro absoluto) */
.content{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    text-align:center;
}

/* HERO */
.hero {
    margin: 0;
    line-height: 1;
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 6rem);
    max-width: 90%;
    word-break: break-word;
}

/* Cuando el texto pasa a la parte inferior (ej: en móvil pequeño) */
@media (max-width: 600px) {
    .hero {
        line-height: 1.2; /* más espacio vertical entre líneas */
    }
}


.hero-gradient{
    background: linear-gradient(90deg,
    var(--sand) 0%,
    var(--coral) 24%,
    #fa43c6 38%,
    var(--med-blue) 65%,
    var(--turquoise) 88%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: gradientMove 9s linear infinite;
}

.coming-soon {
    text-align: center;
    margin: 30px; /* espacio para separarla del hero y del footer */
}

.coming-soon p {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(7, 32, 51, 0.75);
    line-height: 1.5;
}

/* FOOTER */
footer{
    height:var(--footer-h);
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(90deg, var(--med-blue), var(--turquoise));
    color:#fff;
}

/* Animaciones */
@keyframes gradientMove{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.fade-out{
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-in{
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.6s ease, transform 0.6s ease;
}