/* ============================================================
   Base styles — paleta, tipografías, topbar y footer compartidos
   ============================================================ */

:root {
    --plum: #0d2922;
    --plum-2: #143b32;
    --plum-3: #06201a;
    --paper: #f5ecd2;
    --ink: #04140f;

    --pink: #ff5e6c;
    --lime: #d4e34a;
    --cyan: #6dcbe0;
    --sun: #ffc94d;
    --coral: #ff9466;
    --lavender: #c79bd9;

    --font-display: 'Big Shoulders Display', sans-serif;
    --font-body:    'Space Grotesk', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
    --font-script:  'Caveat', cursive;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--plum);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
    background-image:
        radial-gradient(900px 600px at 10% -5%, rgba(255, 94, 108, .16), transparent 60%),
        radial-gradient(800px 700px at 100% 10%, rgba(109, 203, 224, .12), transparent 60%),
        radial-gradient(700px 600px at 50% 110%, rgba(212, 227, 74, .10), transparent 60%);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
    background-size: 6px 6px;
    mix-blend-mode: screen;
}

body > * { position: relative; z-index: 1; }

.display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.005em; line-height: .85; text-transform: uppercase; }
.mono    { font-family: var(--font-mono); }
.scribble{ font-family: var(--font-script); font-weight: 700; }

/* ===== Topbar ===== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px;
    background: var(--plum-3);
    border-bottom: 2px solid #000;
}
.topbar .left { display: flex; align-items: center; gap: 14px; }
.topbar .logo {
    width: 30px;
    height: 30px;
    background: var(--pink);
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.topbar .logo::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sun);
    transform: translate(-50%, -50%);
}
.topbar .name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--paper);
    line-height: 1;
    text-decoration: none;
}
.topbar .name span { color: var(--lime); }
.topbar .nav { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12px; align-items: center; }
.topbar .nav a {
    color: rgba(245, 236, 210, .7);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.topbar .nav a:hover { color: var(--lime); }
.topbar .nav .live { color: var(--pink); }
.topbar .nav .live::before { content: "●"; margin-right: 4px; animation: blink 1.4s infinite; }
.topbar .nav .pill {
    border: 2px solid #000;
    background: var(--sun);
    color: var(--plum-3);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
    box-shadow: 2px 2px 0 #000;
}
@keyframes blink { 50% { opacity: .3; } }

/* ===== Footer ===== */
.footer {
    margin-top: 60px;
    background: var(--plum-3);
    border-top: 2px solid #000;
    padding: 60px 26px 30px;
}
.footer .inner { max-width: 1280px; margin: 0 auto; }
.footer .signoff {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(48px, 8vw, 120px);
    line-height: .82;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--paper);
}
.footer .signoff .pink   { color: var(--pink); }
.footer .signoff .sun    { color: var(--sun); }
.footer .signoff .cyan   { color: var(--cyan); }
.footer .signoff .stroke { -webkit-text-stroke: 2px var(--paper); color: transparent; }

.footer .grid-foot {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1.5px dashed rgba(245, 236, 210, .3);
}
.footer h5 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 12px;
}
.footer .links { display: flex; flex-direction: column; gap: 4px; }
.footer .links a {
    color: var(--paper);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.1;
}
.footer .links a:hover { color: var(--pink); }
.footer .scribble-note {
    font-family: var(--font-script);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cyan);
    transform: rotate(-2deg);
    max-width: 24ch;
}
.footer .meta {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1.5px dashed rgba(245, 236, 210, .2);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(245, 236, 210, .5);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.footer .meta b { color: var(--pink); font-weight: 700; }

@media (max-width: 720px) {
    .footer { padding: 40px 20px 24px; }
    .footer .grid-foot { grid-template-columns: 1fr; }
}