/* VISUALIZE+ — /sites/ · composição da página de criação de sites.
   O sistema vive em base.css; aqui fica só o que é desta folha. */

@import url('base.css?v=20260829');

.hero__lead {
    margin-top: var(--s5);
}

.case__print {
    margin-bottom: var(--s7);
}

.case__actions {
    margin-top: var(--s7);
}

/* A prova colada não precisa da folha inteira: uma foto de tela lida
   melhor com margem de carbono em volta. */
.case__print {
    max-width: 900px;
}

/* ---------- A PROVA ANOTADA ----------
   A captura não é troféu, é desenho técnico. Três chapinhas de papel com o
   numeral em Courier, cada uma puxando uma régua de fio até a decisão que
   marca — e o mesmo numeral abre a linha que explica aquela decisão logo
   abaixo. A tinta é a régua pré-impressa, que o sistema já reserva para
   numeral de ordem em papel branco (5,05:1 sobre a chapa branca do pino).
   Uma peça só, olhada de perto, lê como método; a mesma peça sem marca
   nenhuma lê como a única que existe. */

.print__plate {
    position: relative;
    display: block;
}

.pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.5rem, 0.9vw, 0.75rem);
    pointer-events: none;
    --lead: 4em;
}

.pin__no {
    display: block;
    padding: 0.34em 0.46em;
    border: var(--hair) solid var(--rule-print);
    background: var(--paper);
    color: var(--rule-print);
    font-family: var(--font-record);
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.pin__lead {
    display: block;
    width: var(--lead);
    height: var(--hair);
    background: var(--rule-print);
}

/* 01 — a linha "há 9 anos": o tempo de casa é a prova que abre a tela. */
.pin--a {
    top: 45%;
    left: 2.2%;
    --lead: 4.6em;
}

/* 02 — a foto do salão, puxada da direita para não cobrir a cena. A régua
   encosta na borda do recorte redondo na altura em que ele é mais largo. */
.pin--b {
    top: 40%;
    right: 6%;
    flex-direction: row-reverse;
    --lead: 7em;
}

/* 03 — o botão de orçamento, a única saída da página. */
.pin--c {
    top: 79%;
    left: 2.2%;
    --lead: 4.2em;
}

/* Abaixo desta largura a captura de 1800px vira miniatura ilegível e a marca
   viraria sujeira: some com os pinos e as três linhas numeradas se explicam
   sozinhas. */
@media (max-width: 640px) {
    .pin {
        display: none;
    }
}