/* ============================================================
   henriquemeira.online — Redesign v4 FINAL (Pinterest Blog)
   base.css — monocromático puro. Zero cor de accent.
   Paleta e proporções replicando o Pinterest Business Blog.
   ============================================================ */

/* ---------- Design Tokens (monocromático) ---------- */
:root {
    /* Fundos */
    --bg: #f6f5f3;            /* off-white levemente quente (como o Pinterest Blog) */
    --bg-2: #efedea;          /* variação p/ seções alternadas */
    --card: #ffffff;          /* cards brancos */
    --dark: #111111;          /* footer / CTA */

    /* Texto */
    --ink: #111111;           /* quase-preto — títulos/texto forte */
    --ink-2: #5f5f5f;         /* cinza médio — secundário */
    --ink-3: #8c8c8c;         /* cinza claro — meta/datas */

    /* Linhas / superfícies neutras */
    --line: #e6e4e0;          /* bordas sutis */
    --line-2: #d6d3ce;        /* borda lateral card (cinza diferenciado) */
    --pill: #efedea;          /* tag pill */
    --pill-ink: #5f5f5f;

    /* Tipografia — 2 famílias (sans) */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* headings + logo */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;      /* corpo, tudo */

    /* Ritmo (proporções Pinterest: bastante respiro) */
    --maxw: 1200px;
    --radius: 16px;
    --radius-lg: 22px;
    --header-h: 72px;

    /* Sombras suaves (profundidade dos cards) */
    --shadow-sm: 0 1px 3px rgba(17, 17, 17, .05), 0 1px 2px rgba(17, 17, 17, .04);
    --shadow-md: 0 6px 20px rgba(17, 17, 17, .08);
    --shadow-lg: 0 16px 44px rgba(17, 17, 17, .12);

    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.eyebrow {
    font-family: var(--font-body); font-size: .8rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .6rem;
}
.section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.sub { color: var(--ink-2); margin-top: .4rem; }

/* ---------- Buttons ---------- */
/* texto + seta → (CTAs de ação). Cor laranja Amazon (#FF9900): única cor de
   destaque do site, aplicada a todos os CTAs de ação. Hover: #E68A00. */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem 0; font-weight: 600; font-size: .96rem; color: #FF9900;
    position: relative; transition: color .2s var(--ease);
}
.btn::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #FF9900; transition: width .28s var(--ease); }
.btn:hover { color: #E68A00; }
.btn:hover::after { width: 100%; background: #E68A00; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-muted { color: #FF9900; }
.btn-muted::after { background: #FF9900; }
.btn-muted:hover { color: #E68A00; }
.btn-muted:hover::after { background: #E68A00; }

/* CTA preto (Pinterest "Subscribe") */
.btn-solid {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .8rem 1.6rem; border-radius: 100px;
    background: var(--dark); color: #fff; font-weight: 600; font-size: .95rem;
    transition: transform .2s var(--ease), background .2s;
}
.btn-solid:hover { transform: translateY(-1px); background: #000; }

/* ---------- Header (sem nav: logo | redes | idioma) ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(246, 245, 243, .9);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; }

/* Logo "hm." lowercase, sans geométrica bold */
.logo {
    font-family: var(--font-display); font-weight: 700; font-size: 1.75rem;
    letter-spacing: -0.04em; color: var(--ink); line-height: 1; text-transform: lowercase;
    display: inline-flex; align-items: baseline;
}
.logo .dot { color: var(--ink); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }

/* Social icons (bloco separado, como no site atual) */
.social-icons { display: flex; gap: .9rem; font-size: 1rem; }
.social-icons a { color: var(--ink-2); transition: color .2s, transform .2s; }
.social-icons a:hover { color: var(--ink); transform: translateY(-1px); }

/* Divider vertical separando redes de idioma */
.header-divider { width: 1px; height: 22px; background: var(--line-2); }

/* Language switcher — mesma abordagem do henriquemeira.online atual */
.language-switcher { display: inline-flex; gap: .1rem; }
.lang-btn {
    font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .03em;
    padding: .3rem .45rem; border-radius: 7px; color: var(--ink-3); text-transform: uppercase;
    transition: color .2s, background .2s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.active { color: var(--ink); background: var(--line); }

/* ---------- Footer (colunas, fundo escuro) ---------- */
.site-footer { background: var(--dark); color: #ededed; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.footer-brand .logo { color: #fff; font-size: 2.2rem; }
.footer-brand .logo .dot { color: #fff; }
.footer-brand p { color: #a9a9a9; font-size: .92rem; margin-top: .6rem; max-width: 28ch; }
.footer-col h4 { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a9a9a9; margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { color: #ededed; font-size: .95rem; transition: color .2s; display: inline-flex; align-items: center; gap: .5rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.footer-copy { color: #8c8c8c; font-size: .85rem; }
.footer-backtop { color: #ededed; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; transition: color .2s; }
.footer-backtop:hover { color: #fff; text-decoration: underline; }
.footer-backtop .arrow { transition: transform .25s var(--ease); }
.footer-backtop:hover .arrow { transform: translateY(-3px); }

@media (max-width: 780px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Reveal ---------- */
/* Progressive enhancement: só escondemos para animar quando o JS está ativo
   (html.js). Sem JS — ou se o main.js não rodar — o conteúdo aparece normalmente,
   evitando páginas em branco. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- A11y ---------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--dark); color: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .social-icons { gap: .7rem; }
    .logo { font-size: 1.55rem; }
    .header-right { gap: .9rem; }
}