/* ==========================================================================
   Jonas Móveis Planejados — base.css
   Reset + tokens de design (Mobile First). Tipografia premium (Inter +
   Poppins), espaçamentos generosos, sombras suaves e bordas arredondadas.
   ========================================================================== */

:root {
    /* -------- Paleta -------- */
    --cor-preto: #111111;
    --cor-preto-puro: #0a0a0a;
    --cor-branco: #ffffff;
    --cor-laranja: #e8701a;
    --cor-laranja-claro: #ff8a3d;
    --cor-laranja-escuro: #c85f12;
    --cor-cinza-claro: #f6f5f3;
    --cor-cinza-borda: #ececec;
    --cor-cinza: #8a8a8a;
    --cor-texto: #1a1a1a;
    --cor-texto-suave: #5c5c5c;

    /* -------- Tipografia -------- */
    --fonte-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fonte-titulo: "Poppins", "Inter", system-ui, sans-serif;

    /* -------- Geometria -------- */
    --raio-sm: 10px;
    --raio-card: 20px;
    --raio-pill: 999px;
    --container: 1240px;

    /* -------- Sombras -------- */
    --sombra-sm: 0 2px 10px rgba(17, 17, 17, .05);
    --sombra: 0 14px 34px rgba(17, 17, 17, .08);
    --sombra-hover: 0 24px 50px rgba(17, 17, 17, .16);

    /* -------- Ritmo vertical -------- */
    --secao-gap: 96px;
    --transicao: .35s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte-base);
    color: var(--cor-texto);
    background: var(--cor-branco);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--cor-preto);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cor-laranja); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--cor-laranja-escuro); }

button { font-family: inherit; }

::selection { background: var(--cor-laranja); color: #fff; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}
@media (max-width: 480px) { .container { padding-inline: 16px; } }

/* Evita estouro horizontal por imagens/elementos largos no mobile */
body { overflow-x: hidden; }

/* Utilitário de carregamento preguiçoso (lazy) */
img[loading="lazy"] { background: var(--cor-cinza-claro); }

/* -------- Botões utilitários (estética premium) -------- */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--cor-laranja);
    color: #fff;
    padding: 14px 30px;
    border: none;
    border-radius: var(--raio-pill);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(232, 112, 26, .28);
    transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn-pill:hover {
    background: var(--cor-laranja-escuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(232, 112, 26, .36);
}

/* -------- Alerta genérico (flash de erro/sucesso em qualquer página) -------- */
.alerta-geral { padding: 14px 0; text-align: center; font-size: .92rem; font-weight: 600; }
.alerta-geral-erro { background: #fdecea; color: #c62828; }
.alerta-geral-ok { background: #eafaf0; color: #1a7a3a; }

/* -------- Página de erro (404/403/500) -------- */
.erro-pagina {
    background: var(--cor-preto-puro);
    padding: 90px 0 110px;
    overflow: hidden;
    position: relative;
}
@media (min-width: 760px) { .erro-pagina { padding: 150px 0 170px; } }
.erro-conteudo { max-width: 620px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }

.erro-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--fonte-titulo);
    font-size: 32vw;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .04);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.erro-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cor-laranja-claro);
    margin-bottom: 18px;
}

.erro-conteudo h1 { color: #fff; font-size: 1.9rem; margin: 0 0 18px; line-height: 1.25; }
@media (min-width: 760px) { .erro-conteudo h1 { font-size: 2.6rem; } }
.erro-conteudo > p { color: rgba(255, 255, 255, .62); margin: 0 0 36px; font-size: 1rem; line-height: 1.65; }

.erro-acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.erro-acoes a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 26px; border-radius: var(--raio-pill);
    font-size: .85rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.erro-btn-outline { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.erro-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.erro-btn-solido { background: var(--cor-laranja); color: #fff; }
.erro-btn-solido:hover { background: var(--cor-laranja-escuro); color: #fff; text-decoration: none; }

.whatsapp-flutuante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    z-index: 999;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.whatsapp-flutuante svg { width: 32px; height: 32px; }
.whatsapp-flutuante:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 600px) {
    .whatsapp-flutuante { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .whatsapp-flutuante svg { width: 28px; height: 28px; }
}