:root{
    /* --- Header --- */
    --header-h: clamp(72px, 12vw, 140px);   /* altura de la franja */
    --header-bg: #0c79b8;                   /* color de la franja */
    --header-pad-x: clamp(12px, 4vw, 32px); /* padding lateral */

    /* --- Paleta general --- */
    --bg:#0b0b12; --text:#f1f1fa; --muted:#9aa0b4;
    --primary:#6d3df5; --border:#252536;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--text);
    padding-top: var(--header-h); /* deja sitio para el header fijo */
}

/* ===== FONDO ===== */
body::before{
    content:"";
    position:fixed; inset:0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index:-2;
}
body::after{
    content:"";
    position:fixed; inset:0;
    background:
            radial-gradient(60% 50% at 80% 20%, rgba(109,61,245,.18), transparent 60%),
            linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
    z-index:-1;
}

/* ===== HEADER (solo modificado) ===== */
.brand-header{
    position: fixed; top:0; left:0; right:0; z-index:5;
    height: var(--header-h);
    background: var(--header-bg);
    padding: max(8px, env(safe-area-inset-top)) var(--header-pad-x) 8px;
    display:flex; align-items:center; justify-content:center;
}
.brand-logo{
    height: 100%;           /* ocupa todo el alto de la franja */
    width: auto;
    max-width: 100%;
    object-fit: contain;    /* NO recorta el logo */
    object-position: center;
}

/* ===== CONTENIDO (igual que antes) ===== */
.background-container{
    min-height: calc(100dvh - var(--header-h));
    display:grid; place-items:center;
    padding: 24px 16px 56px;
}
.content{
    text-align:center;
    max-width:640px;
    width: min(92vw, 640px);
    background: rgba(18,18,26,.55);
    border:1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(6px);
}

h1{ font-size: clamp(32px,6vw,64px); letter-spacing:.08em; margin:0 0 8px; }
h2{ font-weight:400; color:var(--muted); margin:0 0 20px; }

form{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
input[type="email"]{
    padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    background:#12121a; color:var(--text);
    min-width:min(420px, 90vw);
}
button{
    padding:12px 18px; border-radius:12px; border:1px solid transparent;
    background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
}
#form-status{ margin-top:12px; color:var(--muted); }