/* ==========================================================================
   Classificados Uberlândia - página "Em breve" do domínio principal (web/)
   --------------------------------------------------------------------------
   Página estática, sem JavaScript. Cores da marca (as mesmas do protótipo);
   o tema escuro segue o do aparelho (prefers-color-scheme). Uma coluna só,
   que serve no celular e no computador.
   ========================================================================== */

:root {
    color-scheme: light;
    --fundo: #FFD43B;
    --texto: #171717;
    --texto-2: #3A3526;
    --etiqueta-fundo: #171717;
    --etiqueta-texto: #FFD43B;
    --marcador-fundo: #171717;
    --marcador-texto: #FFD43B;
    --pilula: rgb(23 23 23 / .08);
    --enfeite: rgb(23 23 23 / .05);
    --marca-tinta: #171717;
    --marca-furo: #FFD43B;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --fundo: #121211;
        --texto: #F3F2EE;
        --texto-2: #CAC6BD;
        --etiqueta-fundo: #FFD43B;
        --etiqueta-texto: #171717;
        --marcador-fundo: #FFD43B;
        --marcador-texto: #171717;
        --pilula: rgb(255 255 255 / .07);
        --enfeite: rgb(255 212 59 / .06);
        --marca-tinta: #F3F2EE;
        --marca-furo: #121211;
    }
}

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

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
    body { background: radial-gradient(circle at 50% 0%, rgb(255 212 59 / .14), transparent 60%), var(--fundo); }
}

/* Duas etiquetas grandes e bem apagadas no fundo, no formato da logo */
body::before, body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 620px;
    height: 330px;
    background: var(--enfeite);
    clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
    pointer-events: none;
}
body::before { top: -90px; right: -210px; transform: rotate(-14deg); }
body::after { bottom: -120px; left: -250px; transform: rotate(12deg); }
@media (max-width: 600px) {
    body::before, body::after { width: 400px; height: 214px; }
    body::before { top: -150px; right: -200px; }
    body::after { bottom: -80px; left: -200px; }
}

::selection { background: var(--texto); color: var(--fundo); }

.palco {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: max(40px, env(safe-area-inset-top)) 20px 28px;
    text-align: center;
}

/* Logo em curvas (img/marca.svg): a "tinta" herda fill/stroke e o furo da etiqueta herda color */
.marca {
    display: block;
    width: min(300px, 74vw);
    height: auto;
    aspect-ratio: 1042 / 252;
    fill: var(--marca-tinta);
    stroke: var(--marca-tinta);
    color: var(--marca-furo);
}

/* "Em breve" numa etiqueta de preço pendurada, que balança devagar */
.etiqueta {
    position: relative;
    margin: 44px 0 28px;
    padding: .3em 1.3em .3em .75em;
    background: var(--etiqueta-fundo);
    color: var(--etiqueta-texto);
    font-size: clamp(30px, 7vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - .72em) 0, 100% 50%, calc(100% - .72em) 100%, 0 100%);
    transform: rotate(-4deg);
    transform-origin: 94% 50%;
    animation: balancar 3.4s ease-in-out infinite;
}
.etiqueta::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .42em;
    width: .22em;
    height: .22em;
    margin-top: -.11em;
    border-radius: 50%;
    background: var(--fundo);
}
@keyframes balancar {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(-1deg); }
}

.titulo {
    max-width: 15em;
    margin: 0;
    font-size: clamp(32px, 7.2vw, 60px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
    text-wrap: balance;
}
.marcador {
    display: inline-block;
    padding: 0 .16em .06em;
    border-radius: .12em;
    background: var(--marcador-fundo);
    color: var(--marcador-texto);
    transform: rotate(-1.5deg);
}

.texto {
    max-width: 32em;
    margin: 20px 0 0;
    color: var(--texto-2);
    font-size: clamp(16px, 2.3vw, 19px);
    text-wrap: pretty;
}

.destaques {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}
.destaques li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: var(--pilula);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.destaques svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rodape {
    padding: 18px 20px max(22px, env(safe-area-inset-bottom));
    color: var(--texto-2);
    font-size: 13px;
    text-align: center;
}

.sem-quebra { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .etiqueta { animation: none; }
}