/*
 * Base: reset, escala tipográfica, layout de cena, controles e o sistema de
 * revelação usado por toda a página.
 *
 * Nada aqui sabe o que é "serviço" ou "projeto". As cenas ficam em secoes.css.
 */

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

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 100%;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* A galeria e as cenas sangradas passam da largura da cena de propósito. */
    overflow-x: clip;
}

img,
svg,
video,
picture {
    display: block;
    max-width: 100%;
}

/* `hidden` precisa vencer os display: flex/grid dos componentes. */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: var(--r-1);
}

/* O cabeçalho flutuante não pode cobrir o começo da cena ao ir por âncora. */
[id] {
    scroll-margin-top: calc(var(--altura-chrome) + var(--e-5));
}

/* ---------- Tipografia ----------
   Hierarquia montada com tamanho, peso e entrelinha juntos. O tracking é
   específico do tamanho: fecha no texto grande, abre no texto pequeno. */

.mega,
.display,
.titulo,
.nome {
    font-family: var(--fonte-display);
    font-optical-sizing: auto;
    text-wrap: balance;
    margin: 0;
}

/* Uma frase que ocupa a cena inteira. Hero e chamada final. */
.mega {
    font-size: var(--t-mega);
    line-height: 0.94;
    letter-spacing: var(--tr-mega);
    font-weight: 700;
}

/* Declaração que carrega uma cena sozinha, no lugar de um parágrafo. */
.display {
    font-size: var(--t-display);
    line-height: 0.98;
    letter-spacing: var(--tr-display);
    font-weight: 700;
}

.titulo {
    font-size: var(--t-titulo);
    line-height: 1.04;
    letter-spacing: var(--tr-titulo);
    font-weight: 700;
}

.nome {
    font-size: var(--t-nome);
    line-height: 1.08;
    letter-spacing: -0.026em;
    font-weight: 650;
}

.sub {
    font-size: var(--t-sub);
    line-height: 1.5;
    letter-spacing: var(--tr-corpo);
    color: var(--tinta-media);
    margin: 0;
    max-width: var(--larg-texto);
    text-wrap: pretty;
}

.corpo {
    font-size: var(--t-corpo);
    line-height: 1.62;
    color: var(--tinta-media);
    margin: 0;
    max-width: 46ch;
    text-wrap: pretty;
}

/* Texto pequeno pede tracking positivo — o oposto do título grande. */
.rotulo {
    font-size: var(--t-micro);
    line-height: 1.4;
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    font-weight: 650;
    color: var(--tinta-fraca);
    margin: 0;
}

/* Números que se comparam entre si não podem dançar de largura. */
.numeral {
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout de cena ---------- */

.conteudo {
    width: 100%;
    max-width: var(--larg-cena);
    margin-inline: auto;
    padding-inline: var(--goteira);
}

/* Texto isolado não deve atravessar 84rem: linha longa demais não se lê. */
.conteudo--estreito {
    max-width: calc(var(--larg-texto) + var(--goteira) * 2);
}

.cena {
    position: relative;
    padding-block: var(--e-cena);
    background: var(--fundo);
}

.cena--nevoa {
    --fundo: var(--nevoa);
}

/* Cena sem respiro no topo ou no pé, quando a de baixo continua o mesmo campo. */
.cena--rente-topo {
    padding-top: 0;
}

.cena--rente-pe {
    padding-bottom: 0;
}

/*
 * Cabeça de cena: rótulo + título, com o título mandando.
 *
 * Sem `max-width` de propósito. As quebras destes títulos são desenhadas uma a
 * uma em <span class="linha">, e uma largura máxima aqui só brigaria com elas.
 * (Nada de `ch` em contêiner: `ch` mede na fonte do próprio elemento, e num
 * wrapper de 1rem ele vale um terço do que vale no título.)
 */
.cabeca {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    margin-bottom: var(--e-8);
}

.cabeca .rotulo + * {
    margin-top: calc(var(--e-1) * -1);
}

/* ---------- Fotografia ----------
   O quadro reserva a proporção antes de a imagem chegar: nada salta na tela. */

.quadro {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-3);
    background: var(--nevoa-funda);
}

.quadro > img,
.quadro > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sem foto ainda: moldura que se assume como reserva, sem simular trabalho. */
.reserva {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e-2);
    background: linear-gradient(160deg, var(--acento-tenue), transparent 65%), var(--nevoa-funda);
    color: var(--tinta-fraca);
}

.reserva svg {
    width: 2rem;
    height: 2rem;
    color: var(--acento);
    opacity: 0.45;
}

.reserva span {
    font-size: var(--t-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    font-weight: 650;
}

/* ---------- Botões ----------
   Hierarquia clara: uma ação principal, uma de apoio. O feedback vive no
   toque (pointerdown), não na soltura. */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    /* Alvo confortável de toque mesmo no tamanho pequeno. */
    min-height: 2.75rem;
    padding: 0.8125rem 1.5rem;
    border-radius: var(--r-pilula);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    white-space: nowrap;
    transform: scale(1);
    transition: transform 130ms var(--curva-saida), background-color 200ms ease,
        border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.botao[data-pressionado='true'] {
    transform: scale(0.96);
    transition-duration: 90ms;
}

.botao--primario {
    background: var(--marca);
    color: var(--branco);
    box-shadow: var(--sombra-marca);
}

/* Na cena escura o primário se inverte: papel branco sobre grafite. */
.cena--escura .botao--primario,
.hero--escuro .botao--primario {
    color: var(--grafite);
    box-shadow: none;
}

.botao--primario:hover {
    background: var(--marca-funda);
}

.botao--secundario {
    background: transparent;
    border: 1px solid var(--fio-forte);
    color: var(--tinta);
}

.botao--secundario:hover {
    border-color: var(--tinta);
    background: var(--acento-tenue);
}

.botao--grande {
    min-height: 3.25rem;
    padding: 1rem 1.875rem;
    font-size: 1.0625rem;
}

.botao--pequeno {
    min-height: 2.375rem;
    padding: 0.5rem 1.125rem;
    font-size: var(--t-pequeno);
}

.botao__icone {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* Par de ações: a principal primeiro, a de apoio ao lado. */
.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
}

/* ---------- Link de texto ----------
   Sublinhado que cresce a partir da origem, em vez de piscar inteiro. */

.elo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-weight: 600;
    letter-spacing: -0.008em;
    color: var(--tinta);
}

.elo::after {
    content: '';
    position: absolute;
    inset: auto 0 -0.25rem 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--curva-saida);
}

.elo:hover::after {
    transform: scaleX(1);
}

/* ---------- Indicador de funcionamento ---------- */

.ponto {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--fechado);
    flex: none;
}

.ponto[data-aberto='true'] {
    background: var(--aberto);
}

/* ---------- Nota do Google ---------- */

.nota {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-pequeno);
    color: var(--tinta-media);
}

.nota__valor {
    font-weight: 700;
    color: var(--tinta);
}

.estrelas {
    display: inline-flex;
    gap: 0.0625rem;
}

/* Cada estrela é a versão apagada com a acesa recortada por cima. */
.estrela {
    position: relative;
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--fio-forte);
}

.estrela__cheia {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--estrela);
}

.estrela svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ---------- Campos de formulário ----------
   Sem caixa: o campo é uma linha, como num formulário impresso bem feito. */

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
}

.campo__rotulo {
    font-size: var(--t-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    font-weight: 650;
    color: var(--tinta-fraca);
}

.campo__entrada {
    width: 100%;
    padding: 0.75rem 0;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fio-forte);
    border-radius: 0;
    transition: border-color 200ms ease;
    appearance: none;
}

.campo__entrada::placeholder {
    color: var(--tinta-fraca);
}

.campo__entrada:focus {
    outline: none;
    border-bottom-color: var(--acento);
    border-bottom-width: 1px;
    box-shadow: 0 1px 0 0 var(--acento);
}

.campo__entrada:user-invalid {
    border-bottom-color: #d93a3a;
    box-shadow: none;
}

textarea.campo__entrada {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.6;
}

select.campo__entrada {
    /* Seta própria: o select nativo não aceita estilo consistente entre browsers. */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 0.5rem) 1.375rem, calc(100% - 0.1875rem) 1.375rem;
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    padding-right: 1.75rem;
    cursor: pointer;
}

.campo__erro {
    font-size: 0.8125rem;
    color: #d93a3a;
}

/* ---------- Revelação ao rolar ----------
   Três gestos, um por natureza de conteúdo. Nenhum é necessário para ler a
   página: sem JavaScript tudo já nasce visível (o estado inicial só é aplicado
   quando o script marca <html> com data-cena). */

[data-cena] [data-revelar] {
    opacity: 0;
    transition: opacity 700ms var(--curva-cena), transform 700ms var(--curva-cena),
        clip-path 900ms var(--curva-cena);
    transition-delay: var(--atraso, 0ms);
    will-change: opacity, transform;
}

/* Apoio: sobe pouco e aponta para onde vai parar. */
[data-cena] [data-revelar='subir'] {
    transform: translate3d(0, 20px, 0);
}

/* Título: a linha emerge por baixo de uma máscara, como texto sendo impresso. */
[data-cena] [data-revelar='linha'] {
    clip-path: inset(-0.25em -0.25em 105% -0.25em);
    transform: translate3d(0, 0.32em, 0);
    opacity: 1;
}

/* Imagem: abre a partir de um leve zoom, o oposto de aparecer chapada. */
[data-cena] [data-revelar='foto'] {
    clip-path: inset(6% 6% 6% 6% round var(--r-3));
}

[data-cena] [data-revelar='foto'] img {
    transform: scale(1.08);
    transition: transform 1200ms var(--curva-cena);
    transition-delay: var(--atraso, 0ms);
}

[data-cena] [data-revelar][data-visivel='true'] {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.25em -0.25em -0.25em -0.25em);
}

[data-cena] [data-revelar='foto'][data-visivel='true'] {
    clip-path: inset(0 0 0 0 round var(--r-3));
}

[data-cena] [data-revelar='foto'][data-visivel='true'] img {
    transform: scale(1);
}

/*
 * A máscara de linha precisa de um bloco próprio para recortar. O <span>
 * externo é a janela; o interno é o que se move.
 */
.linha {
    display: block;
    overflow: hidden;
    padding-bottom: 0.04em;
}

/* ---------- Movimento reduzido ----------
   Não é ausência de feedback: é a mesma informação chegando por opacidade,
   sem deslocamento, sem máscara e sem escala. */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-cena] [data-revelar],
    [data-cena] [data-revelar='linha'],
    [data-cena] [data-revelar='foto'] {
        transform: none;
        clip-path: none;
        opacity: 0;
        transition: opacity 260ms ease;
    }

    [data-cena] [data-revelar='foto'] img {
        transform: none;
        transition: none;
    }

    [data-cena] [data-revelar][data-visivel='true'] {
        opacity: 1;
    }

    .botao[data-pressionado='true'] {
        transform: none;
        opacity: 0.7;
    }
}

/* ---------- Utilidades ---------- */

.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Atalho invisível também para o teclado não serve de nada: ao receber foco,
   o "pular para o conteúdo" aparece. */
a.apenas-leitor:focus {
    position: fixed;
    top: var(--e-3);
    left: var(--e-3);
    z-index: 90;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1.25rem;
    clip-path: none;
    background: var(--marca);
    color: #fff;
    font-weight: 600;
    border-radius: var(--r-pilula);
}

/* Recado curto de estado — hoje só a falha de carregamento. */
.aviso {
    margin: var(--e-6) auto 0;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-2);
    background: var(--acento-tenue);
    color: var(--tinta-media);
    font-size: var(--t-pequeno);
    line-height: 1.5;
}