/* ==========================================================================
   Rodapé — topo · diretório · linha legal · assinatura BVI
   Base escura por baixo do <main>: a última seção da página assenta sobre
   ela com os cantos de baixo arredondados (main.css). O --co-abyss é mais
   fundo que as seções escuras, então o encaixe aparece em qualquer página.
   Mobile-first.

   Assinatura: a palavra BVI cortada pelo pé da página, com as letras
   contornadas como a marca fundida no corpo da válvula. Três camadas de
   fundo recortadas em cada letra (background-clip):
   a luz do cursor (--mx/--my, footer.js), a faixa de brilho da entrada
   (--sweep, keyframes.css) e o preenchimento quase transparente.
   footer.js liga .is-armed (letras dentro da fenda) e .is-revealed (sobem).
   ========================================================================== */

/* Intensidade da luz do cursor: registrada para a transição acender e apagar. */
@property --spot {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.footer {
    position: relative;
    z-index: 1;                       /* abaixo do <main> (--z-content), que assenta por cima */
    margin-top: calc(-1 * var(--radius-lg));
    padding-top: calc(var(--radius-lg) + clamp(3.5rem, 7vw, 6rem));
    overflow: clip;                   /* corta a assinatura no pé da página */
    font-size: var(--fs-sm);
    color: var(--text-2);
    background: var(--co-abyss);
}

/* --- Topo ------------------------------------------------------------------------ */
.footer__top {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "brand     totop"
        "statement statement";
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6) var(--space-3);
    padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    border-bottom: 1px solid var(--line);
}

.footer__brand {
    grid-area: brand;
    justify-self: start;
    border-radius: var(--radius-sm);
}

/* Sem max-width: a imagem nunca é espremida pela coluna (altura fixa + largura menor distorceria). */
.footer__brand img {
    width: auto;
    max-width: none;
    height: 32px;
}

/* Telas de 320px: logo e "Voltar ao topo" dividem a mesma linha. */
@media (max-width: 359.98px) {
    .footer__brand img {
        height: 28px;
    }
}

.footer__statement {
    grid-area: statement;
    max-width: 30rem;
    color: var(--text-3);
}

.footer__statement-lead {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-snug);
    color: var(--text);
}

.footer__totop {
    grid-area: totop;
}

/* O volante da válvula: no hover gira meia volta no sentido de fechar (horário). */
.footer__wheel {
    stroke-width: 1.6;
}

@media (hover: hover) {
    .footer__totop:hover .btn__badge {
        transform: rotate(180deg);
    }
}

/* --- Diretório ---------------------------------------------------------------------- */
.footer__directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
    padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.footer__group {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.footer__group--company { --reveal-delay: 80ms; }
.footer__group--service { --reveal-delay: 160ms; }
.footer__group--place   { --reveal-delay: 240ms; }

/* No celular, atendimento e sede ocupam a linha toda, separados por um fio. */
.footer__group--service,
.footer__group--place {
    grid-column: 1 / -1;
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
}

.footer__label {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
}

.footer__links {
    display: grid;
    justify-items: start;
}

.footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    color: var(--text-2);
    transition: color var(--dur-base) var(--ease-apple);
    -webkit-tap-highlight-color: transparent;
}

/* Página atual: a válvula que o visitante está vendo. */
.footer__link[aria-current="page"] {
    color: var(--text);
}

.footer__link[aria-current="page"]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--co-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(var(--co-accent-rgb), 0.8);
}

.footer__out {
    display: inline-flex;
    font-size: 0.9em;
    color: var(--text-3);
    transition:
        color var(--dur-base) var(--ease-apple),
        transform var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) {
    .footer__link:hover {
        color: var(--text);
    }

    .footer__link:hover .footer__out {
        color: var(--co-accent-2);
        transform: translate3d(2px, -2px, 0);
    }
}

/* Atendimento: o número é o que se procura, então ele é o destaque. */
.footer__channel {
    display: grid;
    gap: 2px;
    padding-block: var(--space-2);
}

.footer__kind {
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.footer__value {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-snug);
    color: var(--text);
    transition: color var(--dur-base) var(--ease-apple);
}

@media (hover: hover) {
    .footer__channel:hover .footer__value {
        color: var(--co-accent-2);
    }
}

.footer__note {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.footer__address {
    display: grid;
    line-height: 1.7;
}

.footer__address span:first-child {
    color: var(--text);
}

.footer__directions {
    margin-top: var(--space-1);
}

/* --- Linha legal ----------------------------------------------------------------------- */
.footer__legal {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-6);
    font-size: var(--fs-xs);
    color: var(--text-3);
    border-top: 1px solid var(--line);
}

.footer__legal a {
    color: var(--text-2);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    transition: color var(--dur-base) var(--ease-apple);
}

.footer__legal a:hover {
    color: var(--text);
}

/* --- Assinatura: a palavra BVI ------------------------------------------------------------
   Uma palavra só, na largura do conteúdo, com o tracking das palavras fantasma
   (-0,04em), cortada pelo pé da página como a palavra gigante da referência.
   O tamanho sai da largura (cqi do .footer__sign): as caixas somam 1,723em
   (B 0,745 + V 0,729 + I 0,329 - 2 × 0,04) e as hastes das pontas recuam
   0,075em cada na Archivo 800, então a tinta mede 1,573em. A margem negativa
   desconta esse recuo: o B encosta na borda esquerda do texto e o I na direita.
   O brilho mora aqui, e não no rodapé, para não clarear o fundo da linha legal.
   -------------------------------------------------------------------------------------- */
.footer__sign {
    container-type: inline-size;
    margin-top: clamp(var(--space-12), 6vw, var(--space-20));
    background: radial-gradient(60% 100% at 50% 100%, rgba(var(--co-accent-rgb), 0.14), transparent 70%);
}

.mark {
    --mark-size: calc(100cqi / 1.573);
    --mark-bearing: calc(var(--mark-size) * 0.075);
    --caption-gap: clamp(var(--space-3), 1.2vw, var(--space-5));

    display: flex;
    margin-inline: calc(-1 * var(--mark-bearing));
    padding-top: calc(var(--fs-2xs) + var(--caption-gap));
    /* Corte pelo pé da página. No celular a palavra é pequena: fica à mostra cerca
       de 85% da altura das maiúsculas; do tablet em diante, cerca de 65%. */
    margin-bottom: calc(var(--mark-size) * -0.14);
    user-select: none;
}

.mark__unit {
    position: relative;
}

.mark__unit + .mark__unit {
    margin-left: calc(var(--mark-size) * -0.04);   /* o tracking, entre caixas */
}

.mark__unit:nth-child(2) { --mark-delay: 100ms; }
.mark__unit:nth-child(3) { --mark-delay: 200ms; }

.mark__slot {
    display: block;
    overflow: clip;
}

.mark__letter {
    --mx: -100vmax;
    --my: -100vmax;

    display: block;
    font-family: var(--font-display);
    font-size: var(--mark-size);
    font-weight: 800;
    line-height: 0.74;                /* a caixa abraça a altura das maiúsculas (0,687em) */
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--white-rgb), 0.16);
    background-image:
        radial-gradient(circle calc(var(--mark-size) * 0.45) at var(--mx) var(--my),
            rgba(var(--co-accent-2-rgb), calc(0.55 * var(--spot, 0))), transparent),
        linear-gradient(100deg,
            transparent 42%, rgba(var(--co-accent-2-rgb), 0.5) 50%, transparent 58%),
        linear-gradient(rgba(var(--white-rgb), 0.035), rgba(var(--white-rgb), 0.035));
    background-size: 100% 100%, 300% 100%, 100% 100%;
    background-position: 0 0, var(--sweep, 100%) 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: --spot var(--dur-slow) var(--ease-apple);
}

.mark.is-lit .mark__letter {
    --spot: 1;
}

/* Legenda acima de cada letra, começando na borda dela; a última termina na
   borda do I, que encosta na margem. Só as hastes das pontas têm o recuo de 0,075em. */
.mark__caption {
    position: absolute;
    bottom: calc(100% + var(--caption-gap));
    left: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    line-height: 1;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-3);
}

.mark__unit:first-child .mark__caption {
    padding-left: var(--mark-bearing);
}

.mark__unit:last-child .mark__caption {
    left: auto;
    right: 0;
    padding-right: var(--mark-bearing);
}

/* Entrada: as letras sobem do pé da página, a legenda vem atrás e a faixa de luz passa. */
.mark.is-armed .mark__letter {
    transform: translate3d(0, 102%, 0);
    transition:
        transform 1400ms var(--ease-out-expo) var(--mark-delay, 0ms),
        --spot var(--dur-slow) var(--ease-apple);
}

.mark.is-armed .mark__caption {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo) calc(var(--mark-delay, 0ms) + 500ms),
        transform var(--dur-reveal) var(--ease-out-expo) calc(var(--mark-delay, 0ms) + 500ms);
}

.mark.is-revealed .mark__letter {
    transform: none;
    animation: light-sweep 1600ms var(--ease-soft) calc(var(--mark-delay, 0ms) + 700ms) both;
}

.mark.is-revealed .mark__caption {
    opacity: 1;
    transform: none;
}

/* --- Toque: alvos de 44px -------------------------------------------------------------- */
@media (pointer: coarse) {
    .footer__link {
        min-height: 44px;
    }
}

/* --- Tablet ---------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .footer__top {
        grid-template-areas:
            "brand     totop"
            "statement totop";
        align-items: end;
    }

    .footer__brand {
        align-self: start;
    }

    .footer__group--service,
    .footer__group--place {
        grid-column: auto;
        padding-top: 0;
        border-top: 0;
    }

    .footer__legal {
        display: flex;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .mark {
        margin-bottom: calc(var(--mark-size) * -0.28);
    }
}

/* --- Desktop ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .footer {
        padding-top: calc(var(--radius-lg) + clamp(5rem, 7vw, 7rem));
    }

    .footer__brand img {
        height: 34px;
    }

    .footer__directory {
        grid-template-columns: 1fr 1fr 1.25fr 1.25fr;
        column-gap: var(--space-8);
    }
}