/* ==========================================================================
   BASOFT, site novo (22/09/2026)

   Direcao: vinheta de emissora. Fundo escuro profundo, a luz azul do favicon
   (#1E90FF e #0A6CD8), grao de filme, barras de cinema que se abrem no
   carregamento e secoes que entram em cena ao rolar.

   Regras que valem para a folha inteira:
   - Tudo o que se mexe para quem pediu menos movimento (prefers-reduced-motion).
     No fim do arquivo ha um bloco que desliga animacao, paralaxe e revelacao.
   - Nenhum texto importante mora so em imagem ou em pseudo-elemento.
   - O foco do teclado e sempre visivel (azul claro, 2px, com folga).
   ========================================================================== */

:root {
    color-scheme: dark;

    --fundo: #03050b;
    --fundo-2: #060a15;
    --painel: #0a1120;
    --painel-2: #0e172b;
    --linha: rgba(255, 255, 255, .09);
    --linha-forte: rgba(255, 255, 255, .18);

    --tinta: #eef3ff;
    --tinta-2: #c9d3ea;
    --suave: #9ba8c7;

    --azul: #1e90ff;
    --azul-fundo: #0a6cd8;
    --azul-claro: #86c5ff;
    --no-ar: #ff4545;
    --wa: #25d366;

    --largura: 1240px;
    --lado: clamp(16px, 4vw, 32px);
    --curva: cubic-bezier(.22, 1, .36, 1);
    --curva-cinema: cubic-bezier(.77, 0, .18, 1);

    /* Luxo (22/09/2026): titulo em serifada fina de alto contraste, e tudo o
       que e rotulo, botao e texto numa sans geometrica leve. --letra-titulo
       ficou com a sans porque ela e a letra dos rotulos pela folha inteira;
       os titulos usam --letra-display (ver o bloco LUXO no fim). */
    --letra-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --letra-titulo: 'Manrope', system-ui, sans-serif;
    --letra-texto: 'Manrope', system-ui, sans-serif;
    --letra-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--letra-texto);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; }

:focus-visible {
    outline: 2px solid var(--azul-claro);
    outline-offset: 3px;
    border-radius: 4px;
}

.wrap {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--lado);
}

.pular {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 500;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--tinta);
    color: #04060c;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s;
}
.pular:focus { top: 12px; }

.so-leitor {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Letra de impacto -------------------------------------------------- */
.titulo, h1, h2 {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 118;
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
}
.serif {
    font-family: var(--letra-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    font-variation-settings: normal;
}
.titulo .serif, h1 .serif, h2 .serif { color: var(--azul-claro); }

.olho {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--azul-claro);
}
.olho::before {
    content: "";
    width: 28px; height: 1px;
    background: currentColor;
    opacity: .7;
}

/* ==========================================================================
   A CAMADA DE CINEMA
   ========================================================================== */

/* Grao de filme: um ruido SVG em cima de tudo, sem pegar clique. */
.grao {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grao 1s steps(6) infinite;
}
/* O grao se mexe trocando a posicao do fundo, e nao o elemento: um fixo maior
   que a tela alarga a pagina no celular. */
@keyframes grao {
    0% { background-position: 0 0; }
    20% { background-position: -37px 23px; }
    40% { background-position: 29px -41px; }
    60% { background-position: -19px -13px; }
    80% { background-position: 43px 31px; }
    100% { background-position: 0 0; }
}

/* As barras de cinema: nascem fechadas no meio da tela e se abrem.
   So CSS, entao nada depende do JS para a pagina aparecer. */
.letterbox {
    position: fixed;
    left: 0; right: 0;
    height: 50.5vh;
    z-index: 400;
    background: #000;
    pointer-events: none;
    animation: abre-barra 1.25s var(--curva-cinema) .35s forwards;
}
.letterbox--cima { top: 0; transform-origin: top; }
.letterbox--baixo { bottom: 0; transform-origin: bottom; }
@keyframes abre-barra {
    to { transform: scaleY(0); }
}

/* O fio de luz que acende no meio, como TV ligando. */
.vinheta-luz {
    position: fixed;
    left: 50%; top: 50%;
    z-index: 401;
    width: 70vw; height: 2px;
    margin-left: -35vw;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--azul) 30%, #fff 50%, var(--azul) 70%, transparent);
    box-shadow: 0 0 24px 4px rgba(30, 144, 255, .7);
    transform: scaleX(0);
    opacity: 0;
    animation: fio 1.1s var(--curva) forwards;
}
@keyframes fio {
    0% { transform: scaleX(0); opacity: 0; }
    30% { transform: scaleX(1); opacity: 1; }
    70% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1.4) scaleY(0); opacity: 0; }
}

/* Barra de progresso de leitura, fina, no topo. */
.progresso {
    position: fixed;
    top: 0; left: 0;
    z-index: 120;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--azul-fundo), var(--azul), var(--azul-claro));
}

/* ==========================================================================
   TOPO
   ========================================================================== */
.topo {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    /* O menu do celular mora fora da tela, a direita; sem este corte ele
       alargava a pagina inteira. */
    overflow-x: clip;
    transition: background .4s var(--curva), border-color .4s, padding .4s;
    border-bottom: 1px solid transparent;
}
.topo.rolou,
.topo.aberto {
    background: rgba(3, 5, 11, .82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom-color: var(--linha);
}
.topo__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 18px var(--lado);
    transition: padding .4s var(--curva);
}
.topo.rolou .topo__in { padding-top: 12px; padding-bottom: 12px; }

.marca {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex: none;
}
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca b {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .22em;
    background: linear-gradient(176deg, #fff 10%, #dfe9ff 45%, #9cc8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.menu {
    display: flex;
    align-items: center;
    gap: 26px;
}
.menu a,
.menu .parado {
    font-size: 14px;
    font-weight: 500;
    color: var(--tinta-2);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.menu > a:not(.botao)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--azul);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--curva);
}
.menu > a:not(.botao):hover { color: #fff; }
.menu > a:not(.botao):hover::after,
.menu > a[aria-current="page"]::after { transform: scaleX(1); }
.menu > a[aria-current="page"] { color: #fff; }

/* Parado ate a pagina ficar pronta: texto, e nao link. */
.menu .parado {
    color: rgba(201, 211, 234, .42);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.menu .parado small {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 99px;
    padding: 1px 7px;
    line-height: 1.5;
}
.menu .tv svg { width: 17px; height: 17px; }
.ponto {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--no-ar);
    box-shadow: 0 0 0 0 rgba(255, 69, 69, .6);
    animation: pulso 1.8s infinite;
}
.menu .parado .ponto { background: rgba(255, 69, 69, .45); animation: none; }
@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 69, .55); }
    70% { box-shadow: 0 0 0 9px rgba(255, 69, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 69, 0); }
}

.menu-botao {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--linha-forte);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--tinta);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.menu-botao span {
    width: 18px; height: 1.6px;
    background: currentColor;
    transition: transform .3s var(--curva), opacity .2s;
}
.topo.aberto .menu-botao span:first-child { transform: translateY(3.3px) rotate(45deg); }
.topo.aberto .menu-botao span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 960px) {
    .menu-botao { display: inline-flex; }
    .menu {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 22px;
        padding: 90px 28px 40px;
        background: #050914;
        border-left: 1px solid var(--linha);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .5s var(--curva), visibility 0s .5s;
        z-index: -1;
    }
    .topo.aberto .menu {
        transform: none;
        visibility: visible;
        transition: transform .5s var(--curva), visibility 0s;
    }
    .menu a, .menu .parado { font-size: 19px; }
    .menu .botao { font-size: 15px; margin-top: 8px; }
}

/* ==========================================================================
   BOTOES
   ========================================================================== */
.botao {
    --cor: var(--azul);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 99px;
    background: linear-gradient(180deg, #3aa0ff, var(--azul) 45%, var(--azul-fundo));
    color: #fff;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 112;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px rgba(30, 144, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .3s var(--curva), box-shadow .3s, background .3s, border-color .3s;
}
.botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(30, 144, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.botao svg { width: 18px; height: 18px; flex: none; }

.botao--wa {
    background: var(--wa);
    color: #03220f;
    box-shadow: 0 10px 30px -12px rgba(37, 211, 102, .7);
}
.botao--wa:hover { box-shadow: 0 16px 40px -12px rgba(37, 211, 102, .85); }

.botao--vazado,
.botao--calmo {
    background: rgba(255, 255, 255, .04);
    border-color: var(--linha-forte);
    color: var(--tinta);
    box-shadow: none;
}
.botao--vazado:hover,
.botao--calmo:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: none;
}
.botao--grande { min-height: 56px; padding: 16px 34px; font-size: 16px; }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 120;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid var(--linha-forte);
    color: var(--suave);
    line-height: 1.4;
    white-space: nowrap;
}
.selo--ar { color: #fff; border-color: rgba(255, 69, 69, .5); background: rgba(255, 69, 69, .12); }
.selo--ar::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--no-ar);
    animation: pulso 1.8s infinite;
}
.selo--azul { color: var(--azul-claro); border-color: rgba(30, 144, 255, .45); background: rgba(30, 144, 255, .1); }

/* ==========================================================================
   ABERTURA (hero)
   ========================================================================== */
.abertura {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--fundo-2);
}
.abertura--interna { min-height: 78vh; min-height: 78svh; }
.abertura--curta { min-height: 60vh; min-height: 60svh; }

.abertura__fundo {
    position: absolute;
    inset: -8% 0 -8% 0;
    z-index: -2;
}
.abertura__fundo img {
    width: 100%; height: 100%;
    object-fit: cover;
    animation: foco 2.4s var(--curva) .5s both;
}
@keyframes foco {
    from { filter: blur(14px) brightness(.4); transform: scale(1.12); }
    to { filter: none; transform: scale(1.02); }
}
@media (max-width: 700px) {
    @keyframes foco {
        from { opacity: 0; transform: scale(1.1); }
        to { opacity: 1; transform: scale(1.02); }
    }
}
.abertura::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 70% at 78% 12%, rgba(30, 144, 255, .30), transparent 60%),
        radial-gradient(60% 50% at 10% 90%, rgba(10, 108, 216, .25), transparent 70%),
        linear-gradient(180deg, rgba(3, 5, 11, .72) 0%, rgba(3, 5, 11, .38) 38%, rgba(3, 5, 11, .88) 80%, var(--fundo) 100%);
}
/* Linhas de varredura bem de leve, como monitor de estudio. */
.abertura::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

/* O quadro do visor da camera: cantos, REC e timecode. So enfeite, por isso
   aria-hidden no HTML. */
.visor {
    position: absolute;
    inset: 96px var(--lado) 28px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: aparece .8s ease 1.5s forwards;
}
.visor i {
    position: absolute;
    width: 26px; height: 26px;
    border: 0 solid rgba(255, 255, 255, .55);
}
.visor i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.visor i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.visor i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.visor__rec,
.visor__tc {
    position: absolute;
    top: 14px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 100;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .78);
    font-variant-numeric: tabular-nums;
}
.visor__rec { left: 40px; display: flex; align-items: center; gap: 8px; }
.visor__rec::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--no-ar);
    animation: pisca 1.2s steps(2) infinite;
}
.visor__tc { right: 40px; }
@keyframes pisca { 50% { opacity: .15; } }
@keyframes aparece { to { opacity: 1; } }

.abertura__in {
    position: relative;
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 140px var(--lado) clamp(56px, 9vh, 96px);
}

.abertura h1 {
    font-size: clamp(34px, 6.6vw, 104px);
    max-width: 16ch;
    margin: 22px 0 0;
    text-shadow: 0 10px 50px rgba(0, 0, 0, .5);
}
.abertura--interna h1 { font-size: clamp(38px, 6vw, 92px); max-width: 18ch; }
.abertura h1 .serif { font-size: .9em; }

/* Revelacao do titulo linha a linha, atras de uma mascara. */
.linha { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.linha > span {
    display: inline-block;
    transform: translateY(108%);
    animation: sobe 1.15s var(--curva) forwards;
}
.linha:nth-child(1) > span { animation-delay: 1.15s; }
.linha:nth-child(2) > span { animation-delay: 1.3s; }
.linha:nth-child(3) > span { animation-delay: 1.45s; }
@keyframes sobe { to { transform: none; } }

.entra {
    opacity: 0;
    transform: translateY(16px);
    animation: entra .9s var(--curva) forwards;
}
.entra--1 { animation-delay: .95s; }
.entra--2 { animation-delay: 1.65s; }
.entra--3 { animation-delay: 1.8s; }
@keyframes entra { to { opacity: 1; transform: none; } }

.abertura__sub {
    max-width: 52ch;
    margin-top: 26px;
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--tinta-2);
}
.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.rolar {
    position: absolute;
    right: var(--lado);
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--suave);
    writing-mode: vertical-rl;
}
.rolar::after {
    content: "";
    width: 1px; height: 54px;
    background: linear-gradient(var(--azul), transparent);
    animation: desce 2.2s var(--curva) infinite;
    transform-origin: top;
}
@keyframes desce {
    0% { transform: scaleY(0); }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 700px) { .rolar { display: none; } .visor { inset: 84px 12px 16px; } }

/* ==========================================================================
   TICKER "NO AR"
   ========================================================================== */
.ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    background: linear-gradient(90deg, #07101f, #050912);
    overflow: hidden;
}
.ticker__rotulo {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    background: var(--no-ar);
    color: #fff;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.ticker__rotulo::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: pisca 1.2s steps(2) infinite;
}
.ticker__rotulo::after {
    content: "";
    position: absolute;
    right: -16px; top: 0; bottom: 0;
    width: 16px;
    background: var(--no-ar);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ticker__trilho {
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker__faixa {
    display: flex;
    width: max-content;
    animation: corre 46s linear infinite;
}
.ticker:hover .ticker__faixa { animation-play-state: paused; }
.ticker__faixa ul {
    display: flex;
    list-style: none;
    padding: 16px 0;
}
.ticker__faixa li {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-left: 22px;
    white-space: nowrap;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 112;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.ticker__faixa li::after {
    content: "";
    width: 6px; height: 6px;
    transform: rotate(45deg);
    background: var(--azul);
    box-shadow: 0 0 10px var(--azul);
}
@keyframes corre { to { transform: translateX(-50%); } }

/* ==========================================================================
   SECOES
   ========================================================================== */
.secao {
    position: relative;
    padding: clamp(80px, 12vw, 150px) 0;
    overflow-x: clip;
}
.secao--linha { border-top: 1px solid var(--linha); }
.secao__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: clamp(36px, 6vw, 64px);
}
.secao__cabeca h2,
.titulo-secao {
    font-size: clamp(34px, 5.4vw, 72px);
    margin-top: 18px;
    max-width: 16ch;
}
.secao__cabeca p,
.secao__lead {
    max-width: 46ch;
    color: var(--suave);
    font-size: 17px;
}
.num-secao {
    position: absolute;
    top: clamp(30px, 5vw, 56px);
    right: var(--lado);
    font-family: var(--letra-titulo);
    font-size: 12px;
    letter-spacing: .24em;
    color: var(--suave);
    opacity: .7;
}

/* Brilho azul de fundo, parado. */
.brilho {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .5;
    pointer-events: none;
    z-index: -1;
    background: rgba(30, 144, 255, .35);
    max-width: 80vw;
    max-height: 80vw;
}

/* Manifesto: frase grande, palavra por palavra acendendo. */
.manifesto h2 {
    font-size: clamp(34px, 6vw, 88px);
    max-width: 17ch;
    margin-top: 22px;
}
.manifesto p {
    max-width: 50ch;
    margin-top: 28px;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--tinta-2);
}

/* ==========================================================================
   HOLOFOTE: cartao com brilho de refletor que segue o mouse
   ========================================================================== */
.holofote {
    --mx: 50%;
    --my: 0%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--linha);
    border-radius: 22px;
    background: linear-gradient(170deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    transition: border-color .4s, transform .5s var(--curva);
}
.holofote::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgba(30, 144, 255, .22), transparent 45%);
    transition: opacity .45s;
}
.holofote::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    opacity: 0;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(134, 197, 255, .9), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity .45s;
}
.holofote:hover::before,
.holofote:hover::after,
.holofote:focus-within::before { opacity: 1; }
a.holofote { text-decoration: none; }
a.quadro { display: block; }
a.holofote:hover { transform: translateY(-4px); }

/* ==========================================================================
   AS TRES FRENTES
   ========================================================================== */
.frentes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.frente {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 36px);
    min-height: 100%;
}
.frente__num {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(134, 197, 255, .45);
}
.frente__rotulo {
    margin-top: 22px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--azul-claro);
}
.frente h3 {
    margin-top: 10px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 115;
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
}
.frente > p {
    margin-top: 14px;
    color: var(--tinta-2);
    font-size: 15.5px;
}
.provas {
    list-style: none;
    margin-top: 20px;
    display: grid;
    gap: 10px;
    flex: 1;
}
.provas li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    color: var(--suave);
    line-height: 1.55;
}
.provas li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 10px; height: 1.5px;
    background: var(--azul);
}
.frente__ir {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 115;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(30, 144, 255, .6);
    padding-bottom: 4px;
    transition: gap .3s var(--curva), border-color .3s;
}
.frente__ir:hover { gap: 16px; border-color: #fff; }

.ponte {
    margin: clamp(40px, 6vw, 70px) auto 0;
    max-width: 60ch;
    text-align: center;
    font-family: var(--letra-serif);
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.3;
    color: var(--tinta);
}
.ponte b { font-style: normal; font-family: var(--letra-titulo); font-weight: 700; color: var(--azul-claro); font-size: .8em; letter-spacing: -.01em; }

@media (max-width: 960px) {
    .frentes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GRADE DE PROGRAMACAO
   Os servicos como a grade de uma emissora. A linha que esta sob o mouse,
   ou no meio da tela no celular, vira a que esta "no ar".
   ========================================================================== */
.grade {
    border-top: 1px solid var(--linha-forte);
    list-style: none;
}
.grade__linha {
    border-bottom: 1px solid var(--linha);
}
.grade__item {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr) 150px;
    align-items: center;
    gap: 24px;
    padding: 26px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .4s, padding .45s var(--curva);
    isolation: isolate;
}
.grade__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(30, 144, 255, .16), rgba(30, 144, 255, .02) 70%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--curva);
}
.grade__bloco {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 110;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--suave);
    font-variant-numeric: tabular-nums;
}
.grade__bloco b { display: block; font-size: 26px; letter-spacing: -.02em; color: var(--tinta); font-weight: 800; margin-top: 2px; }
.grade__nome {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 115;
    font-size: clamp(21px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    transition: color .35s;
}
.grade__desc { color: var(--suave); font-size: 15px; line-height: 1.55; }
.grade__estado {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 120;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--suave);
    white-space: nowrap;
}
.grade__estado::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    transition: background .3s, box-shadow .3s;
}
.grade__estado .no-ar { display: none; color: #fff; }
a.grade__item:hover::before,
a.grade__item:focus-visible::before,
.grade__item.agora::before { transform: scaleX(1); }
a.grade__item:hover .grade__nome,
.grade__item.agora .grade__nome { color: #fff; }
a.grade__item:hover .grade__estado::before,
.grade__item.agora .grade__estado::before { background: var(--no-ar); box-shadow: 0 0 12px var(--no-ar); }
a.grade__item:hover .grade__estado .no-ar,
.grade__item.agora .grade__estado .no-ar { display: inline; }
a.grade__item:hover .grade__estado .depois,
.grade__item.agora .grade__estado .depois { display: none; }
a.grade__item:hover { padding-left: 26px; }

@media (max-width: 860px) {
    .grade__item {
        grid-template-columns: 64px 1fr;
        grid-template-areas: "bloco nome" "bloco desc" "bloco estado";
        gap: 6px 16px;
        padding: 22px 6px;
        align-items: start;
    }
    .grade__bloco { grid-area: bloco; }
    .grade__bloco b { font-size: 22px; }
    .grade__nome { grid-area: nome; }
    .grade__desc { grid-area: desc; font-size: 14.5px; }
    .grade__estado { grid-area: estado; justify-self: start; margin-top: 6px; }
    a.grade__item:hover { padding-left: 6px; }
}

/* ==========================================================================
   FOTOS COM PARALAXE
   ========================================================================== */
.quadro {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--painel);
    border: 1px solid var(--linha);
}
.quadro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.quadro--par img { height: 116%; margin-top: -8%; will-change: transform; }
.quadro figcaption,
.quadro__tag {
    position: absolute;
    left: 14px; bottom: 14px;
    padding: 7px 13px;
    border-radius: 99px;
    background: rgba(3, 5, 11, .66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--linha);
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}
.quadro__tag { top: 14px; bottom: auto; }

/* ==========================================================================
   HISTORIA
   ========================================================================== */
.historia {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: start;
}
.historia__texto p { color: var(--tinta-2); font-size: 17px; }
.historia__texto p + p { margin-top: 18px; }
.historia__texto strong { color: #fff; }
.historia__fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    position: sticky;
    top: 100px;
}
.historia__fotos .quadro { aspect-ratio: 3 / 4; }
.historia__fotos .quadro:nth-child(2) { margin-top: 48px; }
.historia__texto .frase-grande {
    font-family: var(--letra-serif);
    font-style: italic;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    color: #fff;
    margin: 30px 0;
    padding-left: 22px;
    border-left: 2px solid var(--azul);
}
@media (max-width: 900px) {
    .historia { grid-template-columns: 1fr; }
    .historia__fotos { position: static; }
}

/* ==========================================================================
   A CASA INTEIRA (cartoes)
   ========================================================================== */
.casa {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.cartao {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    min-height: 290px;
    color: inherit;
}
.cartao__icone {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(30, 144, 255, .35);
    background: rgba(30, 144, 255, .08);
    color: var(--azul-claro);
}
.cartao__icone svg { width: 24px; height: 24px; }
.cartao h3 {
    margin-top: 22px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 112;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cartao p { margin-top: 10px; font-size: 14.5px; color: var(--suave); flex: 1; }
.cartao__preco { margin-top: 12px; font-size: 13px; color: var(--suave); }
.cartao__preco b { color: #fff; font-size: 17px; }
.cartao__seta {
    margin-top: 20px;
    font-family: var(--letra-titulo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--azul-claro);
}
/* Parado: aparece, mas diz que ainda nao abriu. Nada de link morto. */
.cartao--parado { opacity: .62; }
.cartao--parado .cartao__icone { border-color: var(--linha-forte); background: rgba(255, 255, 255, .03); color: var(--suave); }
.cartao--parado .cartao__seta { color: var(--suave); }
@media (max-width: 1060px) { .casa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .casa { grid-template-columns: 1fr; } .cartao { min-height: 0; } }

/* ==========================================================================
   NUMEROS (so os que ja estao no site)
   ========================================================================== */
.numeros {
    display: grid;
    /* Tres, e nao quatro (25/09/2026): o quarto numero, o de lugares do
       auditorio, saiu a pedido. Com repeat(4) sobrava uma coluna vazia
       na direita, e a fileira ficava torta sem motivo aparente. */
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}
.numero {
    padding: clamp(36px, 6vw, 70px) var(--lado);
    border-right: 1px solid var(--linha);
}
.numero:last-child { border-right: 0; }
.numero b {
    display: block;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 118;
    font-size: clamp(44px, 6vw, 84px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, #fff, var(--azul-claro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.numero span { display: block; margin-top: 10px; font-size: 14px; color: var(--suave); }
@media (max-width: 700px) {
    .numeros { grid-template-columns: 1fr; }
    .numero { border-right: 0; border-bottom: 1px solid var(--linha); }
    .numero:last-child { border-bottom: 0; }
}

/* ==========================================================================
   BLOCOS DE DESTAQUE (texto + foto)
   ========================================================================== */
.destaque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}
.destaque--inverso .destaque__midia { order: -1; }
.destaque__midia .quadro { aspect-ratio: 5 / 4; }
.destaque h2 { font-size: clamp(32px, 4.6vw, 62px); margin-top: 18px; }
.destaque__lead { margin: 20px 0 26px; color: var(--suave); font-size: 17px; max-width: 46ch; }
.lista-fina {
    list-style: none;
    margin-bottom: 30px;
    border-top: 1px solid var(--linha);
}
.lista-fina li {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--linha);
    font-size: 15.5px;
    color: var(--tinta-2);
}
.lista-fina li::before {
    content: attr(data-n);
    flex: none;
    width: 28px;
    font-family: var(--letra-titulo);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--azul);
    padding-top: 2px;
}
.lista-fina b { color: #fff; font-weight: 600; }
@media (max-width: 900px) {
    .destaque { grid-template-columns: 1fr; }
    .destaque--inverso .destaque__midia { order: 0; }
}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.galeria {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
}
.galeria .quadro img { transition: transform 1s var(--curva); }
.galeria .quadro:hover img { transform: scale(1.06); }
.g-a { grid-column: span 3; grid-row: span 2; }
.g-b { grid-column: span 3; grid-row: span 2; }
.g-c { grid-column: span 2; grid-row: span 2; }
.g-d { grid-column: span 2; grid-row: span 2; }
.g-e { grid-column: span 2; grid-row: span 2; }
.g-f { grid-column: span 3; grid-row: span 2; }
.g-g { grid-column: span 3; grid-row: span 2; }
@media (max-width: 860px) {
    .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
    .galeria .quadro { grid-column: span 1; grid-row: span 1; }
    .galeria .g-a, .galeria .g-f { grid-column: span 2; grid-row: span 2; }
}

/* ==========================================================================
   AVALIACOES
   ========================================================================== */
.avaliacoes {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(32px, 6vw, 70px);
    align-items: center;
}
.nota-grande {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 118;
    font-size: clamp(96px, 14vw, 180px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    background: linear-gradient(180deg, #fff, var(--azul));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 16px;
}
.estrelas { color: #ffcc4d; letter-spacing: 3px; font-size: 20px; }
.depoimentos { display: grid; gap: 14px; }
.depoimento { padding: 24px 26px; }
.depoimento blockquote { margin: 10px 0 12px; font-size: 17px; font-weight: 500; color: var(--tinta); }
.depoimento cite { font-style: normal; font-size: 13px; color: var(--suave); }
@media (max-width: 860px) { .avaliacoes { grid-template-columns: 1fr; } }

/* ==========================================================================
   CHAMADA FINAL E CONTATO
   ========================================================================== */
.chamada {
    position: relative;
    text-align: center;
    padding: clamp(100px, 14vw, 180px) 0;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid var(--linha);
}
.chamada::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 900px; height: 900px;
    max-width: 160vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(30, 144, 255, .28), transparent 62%);
    z-index: -1;
}
/* O feixe do refletor descendo sobre a frase. */
.chamada::after {
    content: "";
    position: absolute;
    left: 50%; top: -20%;
    width: 60%; height: 120%;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(134, 197, 255, .10) 50%, transparent 58%);
    z-index: -1;
    pointer-events: none;
}
.chamada h2 { font-size: clamp(42px, 8.6vw, 124px); }
.chamada p { margin: 24px auto 34px; max-width: 44ch; color: var(--tinta-2); font-size: 18px; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
}
.contato__lista { list-style: none; border-top: 1px solid var(--linha); }
.contato__lista li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--linha);
}
.contato__lista svg { width: 22px; height: 22px; color: var(--azul-claro); margin-top: 2px; }
.contato__lista b { display: block; font-family: var(--letra-titulo); font-variation-settings: 'wdth' 112; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; }
.contato__lista span, .contato__lista a { color: var(--suave); font-size: 15px; text-decoration: none; }
.contato__lista a:hover { color: #fff; }
a.mapa {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    padding: 28px;
    text-decoration: none;
    overflow: hidden;
}
.mapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .45; }
.mapa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(3, 5, 11, .92)); }
.mapa b { font-family: var(--letra-titulo); font-variation-settings: 'wdth' 115; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.mapa span { margin-top: 8px; color: var(--tinta-2); font-size: 15px; }
.mapa em { margin-top: 18px; font-style: normal; font-family: var(--letra-titulo); font-weight: 700; font-size: 14px; color: var(--azul-claro); }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } .mapa { min-height: 280px; } }

/* ==========================================================================
   REDES (so as que a casa usa; a lista mora no topo do cinema.js)
   ========================================================================== */
.redes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.redes a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--linha-forte);
    border-radius: 99px;
    text-decoration: none;
    font-size: 14px;
    color: var(--tinta-2);
    transition: border-color .3s, color .3s, background .3s;
}
.redes a:hover { border-color: var(--azul); color: #fff; background: rgba(30, 144, 255, .08); }
.redes svg { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   RODAPE
   ========================================================================== */
.rodape {
    position: relative;
    padding: clamp(64px, 9vw, 100px) 0 36px;
    border-top: 1px solid var(--linha);
    background: linear-gradient(180deg, var(--fundo), #02040a);
    overflow: hidden;
}
.rodape__topo {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 36px;
}
.rodape h4 {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--suave);
    margin-bottom: 16px;
}
.rodape__sobre p { margin-top: 16px; color: var(--suave); font-size: 14.5px; max-width: 34ch; }
.rodape__col a,
.rodape__col span {
    display: block;
    color: var(--tinta-2);
    font-size: 14.5px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color .3s;
}
.rodape__col a:hover { color: #fff; }
.rodape__col .parado { color: rgba(201, 211, 234, .42); }
.rodape__col .redes a { display: inline-flex; margin: 0; font-size: 13.5px; }
.rodape__marca {
    margin: clamp(48px, 8vw, 90px) 0 26px;
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 125;
    font-weight: 900;
    font-size: clamp(64px, 16vw, 240px);
    line-height: .8;
    letter-spacing: -.02em;
    text-align: center;
    background: linear-gradient(180deg, rgba(134, 197, 255, .22), rgba(134, 197, 255, 0) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
}
.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--linha);
    font-size: 13px;
    color: var(--suave);
}
.rodape__base a { color: var(--suave); }
@media (max-width: 900px) { .rodape__topo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__topo { grid-template-columns: 1fr; } }

/* Botao flutuante do WhatsApp. Some enquanto o aviso de medicao esta na tela,
   para os dois nao disputarem o mesmo canto. */
.flutuante {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 95;
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wa);
    color: #fff;
    box-shadow: 0 12px 36px rgba(37, 211, 102, .45);
    transition: transform .3s var(--curva);
}
.flutuante:hover { transform: scale(1.08); }
.flutuante svg { width: 28px; height: 28px; }
body:has(.consentimento) .flutuante { display: none; }

/* ==========================================================================
   AVISO DE MEDICAO (o HTML vem do bloco de consentimento no <head>;
   aqui muda so o visual). Recusar e Aceitar tem exatamente o mesmo tamanho.
   ========================================================================== */
.consentimento {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 450;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid rgba(30, 144, 255, .35);
    border-radius: 18px;
    background: rgba(6, 10, 21, .94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    animation: entra .6s var(--curva) 2s both;
}
.consentimento p {
    flex: 1;
    min-width: 240px;
    color: var(--tinta-2);
    font-size: 13.5px;
    line-height: 1.55;
}
.consentimento a { color: var(--azul-claro); }
.consentimento__botoes { display: flex; gap: 10px; flex: none; }
.consentimento__botoes .botao {
    min-width: 116px;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
    transform: none;
}
@media (max-width: 520px) {
    .consentimento { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; gap: 12px; }
    .consentimento p { font-size: 12.5px; }
    .consentimento__botoes { width: 100%; }
    .consentimento__botoes .botao { flex: 1 1 0; }
}

/* ==========================================================================
   PAGINAS INTERNAS
   ========================================================================== */

/* Servicos: cada bloco como um "programa" da grade. */
.programa-bloco {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(24px, 5vw, 64px);
    padding: clamp(48px, 7vw, 84px) 0;
    border-top: 1px solid var(--linha);
}
.programa-bloco__lado { position: sticky; top: 100px; align-self: start; }
.programa-bloco__lado .grade__bloco b { font-size: 44px; }
.programa-bloco h2 { font-size: clamp(30px, 4vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.programa-bloco__corpo > p { margin-top: 18px; color: var(--tinta-2); font-size: 17px; max-width: 62ch; }
.programa-bloco__corpo > p a { color: var(--azul-claro); }
.programa-bloco .lista-fina { margin-top: 22px; margin-bottom: 0; }
.fotos-duplas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.fotos-duplas .quadro { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
    .programa-bloco { grid-template-columns: 1fr; }
    .programa-bloco__lado { position: static; }
    .programa-bloco__lado .grade__bloco b { font-size: 32px; }
}
@media (max-width: 520px) { .fotos-duplas { grid-template-columns: 1fr; } }

/* Canal: os programas gravados aqui. */
.episodio {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
}
.episodio h2 { font-size: clamp(34px, 5vw, 64px); margin-top: 16px; }
.episodio p { margin: 18px 0 26px; color: var(--tinta-2); font-size: 17px; }
.episodio .quadro { aspect-ratio: 16 / 10; }
.tela-play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
}
.tela-play span {
    width: 76px; height: 76px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(3, 5, 11, .55);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tela-play svg { width: 26px; height: 26px; margin-left: 4px; }
@media (max-width: 860px) { .episodio { grid-template-columns: 1fr; } }

.programas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    list-style: none;
}
.programa { padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; min-height: 170px; color: inherit; }
.programa__nome { font-family: var(--letra-titulo); font-variation-settings: 'wdth' 115; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.programa__quem { color: var(--suave); font-size: 14.5px; flex: 1; }
.programa__ir { font-family: var(--letra-titulo); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-claro); }
@media (max-width: 900px) { .programas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .programas { grid-template-columns: 1fr; } }

/* Software: produtos e formulario. */
.produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.produto { padding: clamp(24px, 3vw, 34px); }
.produto--destaque { grid-column: 1 / -1; }
.produto h2, .produto h3 {
    font-family: var(--letra-titulo);
    font-variation-settings: 'wdth' 115;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.produto--destaque h2 { font-size: clamp(32px, 4.4vw, 58px); }
.produto p { margin-top: 14px; color: var(--tinta-2); font-size: 16px; max-width: 70ch; }
@media (max-width: 760px) { .produtos { grid-template-columns: 1fr; } }

.conversar { padding: clamp(26px, 4vw, 48px); }
.conversar h2 { font-size: clamp(32px, 4.4vw, 56px); }
.conversar__sub { margin-top: 16px; color: var(--tinta-2); font-size: 17px; max-width: 60ch; }
.conversar__form { margin-top: 28px; display: grid; gap: 16px; }
.conversar__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.conversar label { display: grid; gap: 8px; }
.conversar label > span { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.conversar input,
.conversar textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--linha-forte);
    background: rgba(3, 5, 11, .6);
    color: var(--tinta);
    font: inherit;
    font-size: 16px;
}
.conversar input::placeholder, .conversar textarea::placeholder { color: #7482a3; }
.conversar input:focus, .conversar textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
.conversar__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.conversar__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.conversar__zap { color: var(--azul-claro); font-weight: 500; font-size: 15px; }
.conversar__nota { font-size: 13px; color: var(--suave); }
.conversar__nota a { color: var(--azul-claro); }
@media (max-width: 620px) { .conversar__dupla { grid-template-columns: 1fr; } }

/* Privacidade: leitura longa, coluna estreita. */
.leitura { max-width: 780px; }
.leitura section { padding: 34px 0; border-top: 1px solid var(--linha); }
.leitura h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.02em; }
.leitura p, .leitura li { color: var(--tinta-2); font-size: 16.5px; }
.leitura p { margin-top: 14px; }
.leitura ul { margin-top: 14px; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.leitura li { position: relative; padding-left: 22px; }
.leitura li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--azul); }
.leitura strong { color: #fff; }
.leitura a { color: var(--azul-claro); }
.leitura__data { margin-top: 26px; font-size: 13.5px; color: var(--suave); }

/* ==========================================================================
   REVELACAO AO ROLAR
   A classe .js so existe quando o JS roda; sem JS tudo aparece normal.
   ========================================================================== */
.js [data-r] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--curva), transform 1.1s var(--curva);
}
/* A mascara e feita com mask, e nao com clip-path: elemento todo recortado
   por clip-path nunca "intersecta" para o IntersectionObserver e ficaria
   escondido para sempre. */
.js [data-r="mascara"] {
    transform: none;
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
    transition: opacity .3s, -webkit-mask-size 1.3s var(--curva-cinema), mask-size 1.3s var(--curva-cinema);
}
.js [data-r].in { opacity: 1; transform: none; }
.js [data-r="mascara"].in { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.js [data-r].d1 { transition-delay: .1s; }
.js [data-r].d2 { transition-delay: .2s; }
.js [data-r].d3 { transition-delay: .3s; }

/* ==========================================================================
   MENOS MOVIMENTO: quem pediu nao ve animacao nenhuma
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .letterbox, .vinheta-luz { display: none; }
    .grao { animation: none; }
    .linha > span, .entra { transform: none; opacity: 1; animation: none; }
    .abertura__fundo img { animation: none; transform: none; filter: none; }
    .visor { opacity: 1; animation: none; }
    .js [data-r] { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
    .ticker__faixa { animation: none; flex-wrap: wrap; width: auto; }
    .ticker__faixa ul + ul { display: none; }
    .ticker__faixa ul { flex-wrap: wrap; row-gap: 4px; }
    .quadro--par img { height: 100%; margin-top: 0; }
    .ponto, .selo--ar::before, .visor__rec::before, .ticker__rotulo::before { animation: none; }
}

/* Em tela media os tres numeros empilham de dois em dois. */
@media (max-width: 980px) and (min-width: 701px) {
    .numeros { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   LUXO (22/09/2026): "que botoes horriveis... nos somos uma empresa de
   tecnologia nivel Tony Stark, e acho que as letras poderiam ser mais
   minimalistas, tipo um estilo bem caprichado, com requinte, luxo, estilo
   Rolex" (Danilo).

   Substitui o bloco "vidro e botoes novos" da mesma data. O que ficou:
   - Letras: Cormorant Garamond 300/400 nos titulos, Manrope 200 a 500 no
     resto. Rotulo e sempre caixa alta pequena com tracking largo.
   - Botao fino: 1px de borda, canto de 3px, caixa alta com tracking e a seta
     que desliza no hover. O primario e azul metalico, o do WhatsApp e fino
     como os outros e o verde fica so no icone.
   - Fio de 1px separando secoes, numeros com algarismo fino e tabular,
     micro-rotulos tipo relogio (N&ordm; 01) e brilho prata azulado nos
     titulos-chave.
   - O vidro continua, mais contido: canto pequeno, borda de fio.
   ========================================================================== */
:root {
    --fio: rgba(255, 255, 255, .12);
    --fio-forte: rgba(255, 255, 255, .28);
    --prata: #c4d6ee;
    --wa-fino: #7fe0a8;
    --raio: 4px;
    --metal: linear-gradient(100deg, #f5f8fd 0%, #c3d3ea 30%, #ffffff 48%, #9db8dc 66%, #e9eff9 100%);
    --metal-azul: linear-gradient(100deg, #d8ebff 0%, #86c5ff 42%, #eef6ff 58%, #6aaef3 100%);
}

/* Luz ambiente atras de tudo: sem algo colorido por tras, vidro nao aparece. */
body::before {
    content: '';
    position: fixed; inset: -20vmax;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(40vmax 30vmax at 12% 18%, rgba(30, 144, 255, .16), transparent 70%),
        radial-gradient(36vmax 28vmax at 88% 62%, rgba(10, 108, 216, .14), transparent 70%),
        radial-gradient(30vmax 24vmax at 50% 105%, rgba(134, 197, 255, .08), transparent 70%);
}

body {
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: .003em;
    caret-color: var(--azul-claro);
}
::selection { background: rgba(30, 144, 255, .38); color: #fff; }
:focus-visible {
    outline: 1px solid var(--azul-claro);
    outline-offset: 4px;
    border-radius: 2px;
    box-shadow: 0 0 0 5px rgba(30, 144, 255, .16);
}

/* ---- Titulos ------------------------------------------------------------ */
.titulo, h1, h2 {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -.012em;
    font-variant-numeric: lining-nums;
}
.serif {
    font-family: var(--letra-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -.005em;
}
/* O brilho metalico nos titulos-chave: a parte em italico. */
.titulo .serif, h1 .serif, h2 .serif {
    background: var(--metal-azul);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .08em;
    text-shadow: none;
}
.abertura h1 { text-shadow: 0 8px 40px rgba(0, 0, 0, .45); }
.abertura h1 .serif { font-size: 1em; }
.abertura--interna h1 { font-size: clamp(38px, 5.6vw, 84px); }
.abertura__sub { font-weight: 300; font-size: clamp(16px, 1.4vw, 18.5px); }
.secao__cabeca h2, .titulo-secao { font-size: clamp(36px, 4.8vw, 66px); max-width: 22ch; }
.secao__cabeca p, .secao__lead { font-weight: 300; font-size: 16.5px; }
.manifesto h2 { font-size: clamp(38px, 5.6vw, 82px); }
.manifesto p { font-weight: 300; }
.destaque h2 { font-size: clamp(34px, 4.2vw, 58px); }
.chamada h2 { font-size: clamp(42px, 7.2vw, 108px); line-height: 1; }
.chamada p { font-weight: 300; }

/* ---- Rotulos: caixa alta pequena, tracking largo ------------------------ */
.olho {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .32em;
    color: var(--prata);
}
.olho::before { width: 36px; opacity: .5; }
.num-secao {
    font-family: var(--letra-texto);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .3em;
    font-variant-numeric: tabular-nums;
    color: var(--suave);
}
.selo {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .24em;
    padding: 4px 9px;
    border-radius: 2px;
}

/* ---- Topo --------------------------------------------------------------- */
.topo {
    background: linear-gradient(180deg, rgba(6, 10, 22, .6), rgba(6, 10, 22, .25)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}
.marca b {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: .46em;
    margin-right: -.46em;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
}
.menu { gap: 30px; }
.menu a, .menu .parado {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.menu .tv { display: inline-flex; align-items: center; gap: 7px; }
.menu .tv svg { width: 16px; height: 16px; }
.menu .parado small { letter-spacing: .18em; border-radius: 2px; }
.menu-botao { border-radius: 3px; border-color: var(--fio-forte); background: transparent; }
@media (max-width: 960px) {
    .menu { background: rgba(4, 7, 16, .97); }
    .menu a, .menu .parado {
        font-family: var(--letra-display);
        font-size: 30px;
        font-weight: 300;
        letter-spacing: 0;
        text-transform: none;
    }
    .menu .tv svg { width: 22px; height: 22px; }
}

/* ---- Botoes ------------------------------------------------------------- */
.botao {
    --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M0 5h18.6M14.4 .8 18.6 5l-4.2 4.2'/%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
    isolation: isolate;
    gap: 12px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--fio-forte);
    border-radius: 3px;
    background: rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: none;
    transition: border-color .45s var(--curva), background .45s var(--curva), box-shadow .45s var(--curva), color .3s;
}
/* A seta fina, depois do texto, desliza no hover. */
.botao::before {
    content: "";
    order: 3;
    flex: none;
    width: 20px; height: 10px;
    background: currentColor;
    -webkit-mask: var(--seta) center / contain no-repeat;
    mask: var(--seta) center / contain no-repeat;
    opacity: .7;
    transition: transform .5s var(--curva), opacity .3s;
}
/* O brilho que passa, bem de leve. */
.botao::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .9s var(--curva);
}
.botao:hover { transform: none; border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .06); box-shadow: 0 10px 30px -18px rgba(134, 197, 255, .6); }
.botao:hover::before { transform: translateX(5px); opacity: 1; }
.botao:hover::after { transform: translateX(120%); }
.botao svg { width: 16px; height: 16px; flex: none; }

/* Primario: azul metalico escovado, sem gritar. */
.botao:not(.botao--vazado):not(.botao--calmo):not(.botao--wa) {
    border-color: rgba(134, 197, 255, .7);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 52%),
        linear-gradient(100deg, #0a58b8 0%, #1a7ae6 36%, #4aa6ff 50%, #1a7ae6 64%, #0a54ae 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 30px -18px rgba(30, 144, 255, .9);
}
.botao:not(.botao--vazado):not(.botao--calmo):not(.botao--wa):hover {
    border-color: rgba(200, 228, 255, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 40px -18px rgba(30, 144, 255, 1);
}

.botao--vazado, .botao--calmo {
    background: rgba(255, 255, 255, .025);
    border-color: var(--fio-forte);
    box-shadow: none;
}
.botao--vazado:hover, .botao--calmo:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .62);
}

/* WhatsApp: o mesmo botao fino. O verde mora so no icone. */
.botao--wa {
    background: rgba(255, 255, 255, .025);
    border-color: var(--fio-forte);
    color: #fff;
    box-shadow: none;
}
.botao--wa:hover {
    border-color: rgba(127, 224, 168, .6);
    background: rgba(127, 224, 168, .05);
    box-shadow: 0 10px 30px -18px rgba(127, 224, 168, .7);
}
.botao--wa svg {
    width: 17px; height: 17px;
    padding: 0; margin: 0;
    border-radius: 0;
    background: none;
    color: var(--wa-fino);
}

.botao--grande { min-height: 52px; padding: 0 30px; font-size: 11.5px; }
.botao--fino { min-height: 40px; padding: 0 18px; font-size: 10.5px; gap: 10px; }
.botao--fino::before { width: 16px; }

/* No aviso de medicao, Recusar e Aceitar sem seta e do mesmo tamanho. */
.consentimento .botao::before { display: none; }
.consentimento__botoes .botao { font-size: 11px; padding: 0 18px; }

/* No topo, o Fale conosco e so a bolinha: fina, de vidro, icone fino. O
   texto continua para leitor de tela, so nao ocupa espaco. */
.topo .menu > .botao--wa {
    width: 40px; height: 40px;
    min-height: 0; padding: 0; gap: 0;
    font-size: 0; letter-spacing: 0;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .04);
}
.topo .menu > .botao--wa::before { display: none; }
.topo .menu > .botao--wa svg { width: 19px; height: 19px; }

/* A bolinha flutuante: vidro escuro, borda fina e um anel verde discreto. */
.flutuante {
    width: 54px; height: 54px;
    background: rgba(6, 10, 21, .55);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 40px -14px rgba(0, 0, 0, .9);
    color: var(--wa-fino);
    transition: border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.flutuante::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(127, 224, 168, .22);
    pointer-events: none;
}
.flutuante:hover { transform: none; border-color: rgba(127, 224, 168, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 44px -14px rgba(127, 224, 168, .45); }
.flutuante svg { width: 23px; height: 23px; }

/* ---- Fio entre secoes: 1px que some nas pontas, com um losango no meio -- */
.secao--linha { border-top-color: transparent; }
.secao--linha::before,
.secao--linha::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    pointer-events: none;
}
.secao--linha::before {
    width: min(var(--largura), 100%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 18%, rgba(196, 214, 238, .32) 50%, rgba(255, 255, 255, .14) 82%, transparent);
}
.secao--linha::after {
    width: 7px; height: 7px;
    margin: -3px 0 0 -3.5px;
    transform: rotate(45deg);
    border: 1px solid rgba(196, 214, 238, .5);
    background: var(--fundo);
}

/* ---- Ticker e visor ----------------------------------------------------- */
.ticker { background: linear-gradient(90deg, rgba(7, 16, 31, .85), rgba(5, 9, 18, .85)); border-color: var(--fio); }
.ticker__rotulo {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .32em;
}
.ticker__faixa li {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .26em;
    color: var(--tinta-2);
}
.ticker__faixa li::after { width: 4px; height: 4px; background: transparent; border: 1px solid var(--azul-claro); box-shadow: none; }
.visor__rec, .visor__tc {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .26em;
}
.visor i { border-color: rgba(255, 255, 255, .45); }
.rolar { font-size: 10px; letter-spacing: .34em; }

/* ---- Vidro, agora contido: canto pequeno e borda de fio ----------------- */
.holofote { border-radius: 6px; border-color: var(--fio); }
.cartao, .programa, .consentimento, .quadro {
    background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)) !important;
    border: 1px solid var(--fio) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px -36px rgba(0, 0, 0, .9);
    border-radius: 6px;
}
.quadro { border-radius: var(--raio); }
.cartao:hover, .programa:hover {
    border-color: rgba(134, 197, 255, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 28px 70px -34px rgba(30, 144, 255, .4);
}
.quadro figcaption, .quadro__tag {
    border-radius: 2px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 11px;
}

/* ---- As tres frentes ---------------------------------------------------- */
.frente__num {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-size: 64px;
    font-weight: 300;
    line-height: .9;
    letter-spacing: 0;
    font-variant-numeric: lining-nums;
    -webkit-text-stroke: 0;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.frente__num::before {
    content: "N\00BA";
    margin-top: 8px;
    font-family: var(--letra-texto);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .3em;
}
.frente__rotulo {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--prata);
}
.frente h3 {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-size: clamp(28px, 2.5vw, 34px);
    font-weight: 400;
    letter-spacing: -.005em;
    line-height: 1.08;
}
.frente > p { font-weight: 300; }
.provas li { font-weight: 300; }
.provas li::before { height: 1px; background: var(--azul-claro); opacity: .8; }
.frente__ir {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    border-bottom-color: rgba(134, 197, 255, .45);
}
.ponte {
    font-family: var(--letra-display);
    font-weight: 300;
    font-size: clamp(24px, 2.7vw, 36px);
    line-height: 1.28;
}
.ponte b {
    font-family: var(--letra-display);
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    letter-spacing: 0;
    color: var(--azul-claro);
}

/* ---- Grade: linhas de fio, e nao cartoes -------------------------------- */
.grade { border-top: 1px solid var(--fio-forte); }
.grade__linha { border-bottom: 1px solid var(--fio); }
.grade__item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.grade__item::before { background: linear-gradient(90deg, rgba(30, 144, 255, .12), rgba(30, 144, 255, .02) 70%, transparent); }
.grade__bloco {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .32em;
}
.grade__bloco b {
    font-family: var(--letra-texto);
    font-size: 30px;
    font-weight: 200;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--tinta);
    margin-top: 4px;
}
.grade__nome {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-size: clamp(23px, 2.4vw, 32px);
    font-weight: 400;
    letter-spacing: 0;
}
.grade__desc { font-weight: 300; }
.grade__estado {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .26em;
}
.grade__estado::before { width: 5px; height: 5px; }
.programa-bloco__lado .grade__bloco b { font-size: 48px; }
@media (max-width: 860px) { .programa-bloco__lado .grade__bloco b { font-size: 34px; } }

/* ---- Numeros: tabela de fio, algarismo fino e tabular ------------------- */
.numeros {
    gap: 0;
    counter-reset: numero;
    border-top: 1px solid var(--fio);
    border-bottom: 1px solid var(--fio);
}
.numero {
    counter-increment: numero;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--fio);
    border-radius: 0;
    box-shadow: none;
}
.numero:last-child { border-right: 0; }
/* SEM "Nº 01" EM CIMA DO NUMERO (25/09/2026).
   "Nao coloque o n 01 n 02 n 03, remova essa informacao" (Danilo). A etiqueta
   numerava a ordem em que os numeros aparecem, e ordem de aparicao nao e
   informacao: ninguem precisa saber que "3.000 podcasts" e o primeiro de tres.
   Ela ainda empurrava o numero para baixo, que e o que mais custava. */
.numero::before { content: none; }
.numero b {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: clamp(40px, 4.6vw, 68px);
    font-weight: 200;
    letter-spacing: -.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.numero span {
    margin-top: 14px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}
@media (max-width: 980px) and (min-width: 701px) {
    .numero:nth-child(2n) { border-right: 0; }
    .numero:nth-child(-n+2) { border-bottom: 1px solid var(--fio); }
}
@media (max-width: 700px) {
    .numero { border-right: 0; border-bottom: 1px solid var(--fio); }
    .numero:last-child { border-bottom: 0; }
}

/* ---- Historia ----------------------------------------------------------- */
.historia__texto p { font-weight: 300; }
.historia__texto strong { font-weight: 500; }
.historia__texto .frase-grande {
    font-family: var(--letra-display);
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 42px);
    border-left-width: 1px;
    border-left-color: var(--azul-claro);
}

/* ---- Cartoes ------------------------------------------------------------ */
.cartao__icone {
    width: 44px; height: 44px;
    border-radius: 50%;
    border-color: rgba(134, 197, 255, .3);
    background: transparent;
}
.cartao__icone svg { width: 21px; height: 21px; }
.cartao h3 {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 0;
}
.cartao p { font-weight: 300; }
.cartao__preco b { font-weight: 300; letter-spacing: .02em; }
.cartao__seta, .programa__ir {
    font-family: var(--letra-texto);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .26em;
}

/* ---- Lista fina, avaliacoes, contato ------------------------------------ */
.lista-fina { border-top-color: var(--fio); }
.lista-fina li { border-bottom-color: var(--fio); font-weight: 300; }
.lista-fina li::before {
    font-family: var(--letra-texto);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--azul-claro);
}
.lista-fina b { font-weight: 500; }
.nota-grande {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-weight: 200;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums lining-nums;
    background: var(--metal);
    -webkit-background-clip: text;
    background-clip: text;
}
.estrelas { color: #e3c98d; letter-spacing: 5px; font-size: 16px; }
.depoimento blockquote { font-family: var(--letra-display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.35; }
.depoimento cite { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }

.contato__lista { border-top-color: var(--fio); }
.contato__lista li { border-bottom-color: var(--fio); }
.contato__lista svg { width: 20px; height: 20px; }
.contato__lista b {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--suave);
    margin-bottom: 4px;
}
.contato__lista span, .contato__lista a { font-size: 15.5px; font-weight: 300; color: var(--tinta); }
a.mapa { border-radius: 6px; }
.mapa b { font-family: var(--letra-display); font-variation-settings: normal; font-size: 32px; font-weight: 400; letter-spacing: 0; }
.mapa span { font-weight: 300; }
.mapa em { font-family: var(--letra-texto); font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }

/* ---- Redes: icone fino e rotulo discreto -------------------------------- */
.redes { gap: 8px; }
.redes a {
    gap: 11px;
    min-height: 46px;
    padding: 7px 16px 7px 12px;
    border: 1px solid var(--fio);
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tinta);
    transition: border-color .4s var(--curva), background .4s var(--curva);
}
.redes a:hover { border-color: rgba(134, 197, 255, .5); background: rgba(30, 144, 255, .05); color: #fff; }
.redes svg { width: 18px; height: 18px; color: var(--azul-claro); }
.redes span { display: flex; flex-direction: column; line-height: 1.35; }
.redes small {
    font-size: 11.5px;
    font-weight: 300;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--suave);
}

/* ---- Paginas internas --------------------------------------------------- */
.programa-bloco {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--fio);
    border-radius: 0;
    box-shadow: none;
}
.programa-bloco__corpo > p { font-weight: 300; }
.programa__nome, .produto h2, .produto h3 {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-weight: 400;
    letter-spacing: 0;
}
.programa__nome { font-size: 27px; }
.produto p, .episodio p, .conversar__sub { font-weight: 300; }
.conversar label > span { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.conversar input, .conversar textarea { border-radius: 3px; border-color: var(--fio-forte); font-weight: 300; }
.conversar input:focus, .conversar textarea:focus { outline: 1px solid var(--azul-claro); outline-offset: 2px; }
.tela-play span { width: 70px; height: 70px; border-color: rgba(255, 255, 255, .4); }
.leitura h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: 0; }
.leitura p, .leitura li { font-weight: 300; }
.leitura strong { font-weight: 500; }
.leitura li::before { height: 1px; }

/* ==========================================================================
   QUEM JA PASSOU POR AQUI: o letreiro e a faixa do Instagram
   ========================================================================== */
.passou .secao__cabeca { margin-bottom: clamp(30px, 5vw, 52px); }
.passou .secao__cabeca p {
    font-family: var(--letra-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.3;
    color: var(--tinta);
}

/* O letreiro: nomes em serifada fina correndo devagar entre dois fios. A
   velocidade e fixa em pixels por segundo (o cinema.js mede e acerta a
   duracao), entao com 3 ou 60 nomes o passo e o mesmo. */
.letreiro {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px) 0;
    border-top: 1px solid var(--fio);
    border-bottom: 1px solid var(--fio);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.letreiro:empty { display: none; }
.letreiro__linha {
    display: flex;
    width: max-content;
    animation: corre var(--dur, 60s) linear infinite;
}
.letreiro__linha + .letreiro__linha { margin-top: clamp(14px, 2vw, 22px); animation-direction: reverse; }
.letreiro:hover .letreiro__linha,
.letreiro:focus-within .letreiro__linha { animation-play-state: paused; }
.letreiro ul { display: flex; list-style: none; }
.letreiro li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 0 clamp(28px, 4vw, 54px);
    white-space: nowrap;
}
.letreiro li::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    width: 5px; height: 5px;
    border: 1px solid var(--prata);
    opacity: .55;
    transform: translate(50%, -50%) rotate(45deg);
}
.letreiro b {
    font-family: var(--letra-display);
    font-size: clamp(28px, 3.4vw, 50px);
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
}
.letreiro span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--suave);
}

.insta__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: clamp(56px, 8vw, 96px);
    margin-bottom: 22px;
}
.insta__cabeca .botao svg { color: var(--azul-claro); }
.insta {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.insta__faixa {
    display: flex;
    width: max-content;
    animation: corre var(--dur, 80s) linear infinite;
}
.insta:hover .insta__faixa,
.insta:focus-within .insta__faixa { animation-play-state: paused; }
.insta ul { display: flex; gap: 14px; padding-right: 14px; list-style: none; }
.insta li a {
    position: relative;
    display: block;
    width: clamp(210px, 22vw, 300px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--raio);
    border: 1px solid var(--fio);
    background: var(--painel);
}
.insta img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.82) brightness(.92);
    transition: transform 1.1s var(--curva), filter .6s;
}
.insta li a:hover img, .insta li a:focus-visible img { transform: scale(1.05); filter: none; }
.insta li a:focus-visible { outline-offset: -3px; }

/* ==========================================================================
   FALE COM A GENTE (rodape) E O MAPA
   ========================================================================== */
.rodape { border-top-color: var(--fio); }
.rodape__topo { grid-template-columns: 1.6fr 1fr 1fr; }
.rodape h4 {
    font-family: var(--letra-texto);
    font-variation-settings: normal;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .32em;
}
.rodape__sobre p { font-weight: 300; }
.rodape__col a, .rodape__col span { font-weight: 300; }
.rodape__marca {
    font-family: var(--letra-display);
    font-variation-settings: normal;
    font-weight: 300;
    font-size: clamp(64px, 15vw, 200px);
    line-height: .9;
    letter-spacing: .14em;
    padding-left: .14em;
    background: none;
    color: transparent;
    -webkit-text-stroke: 1px rgba(134, 197, 255, .22);
    -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 95%);
    mask-image: linear-gradient(180deg, #000 25%, transparent 95%);
}
.rodape__base {
    border-top-color: var(--fio);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.rodape__base a { text-decoration: none; }
@media (max-width: 900px) { .rodape__topo { grid-template-columns: 1fr 1fr; } .rodape__sobre { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rodape__topo { grid-template-columns: 1fr; } }

.fale {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    gap: clamp(28px, 4.5vw, 60px);
    align-items: start;
    margin-top: clamp(48px, 7vw, 84px);
    padding-top: clamp(40px, 6vw, 64px);
    border-top: 1px solid var(--fio);
}
.fale h4 { margin-bottom: 14px; }
.fale__lugar {
    font-family: var(--letra-display);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 300;
    line-height: 1.06;
    margin-bottom: 26px;
}
.fale__lugar .serif {
    background: var(--metal-azul);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .06em;
}
.fale__lista { margin: 0; }
.fale__lista > div {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fio);
}
.fale__lista > div:first-child { border-top: 1px solid var(--fio); }
.fale__lista dt {
    font-size: 10px;
    font-weight: 500;
    line-height: 2.1;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--suave);
}
.fale__lista dd { margin: 0; font-size: 15.5px; font-weight: 300; color: var(--tinta); }
.fale__lista dd > a,
.fale__mapa-acima a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .55s var(--curva), color .3s;
}
.fale__lista dd > a:hover,
.fale__mapa-acima a:hover { color: #fff; background-size: 100% 1px; }
.fale .redes { margin-top: 2px; }
.fale__mapa-acima {
    margin-top: 22px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--azul-claro);
}
.fale--sem-mapa { grid-template-columns: minmax(0, 1fr); }
.fale--sem-mapa .fale__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.fale--sem-mapa .fale__lista > div { grid-template-columns: minmax(0, 1fr); gap: 6px; border-top: 1px solid var(--fio); }
@media (max-width: 1060px) { .fale--sem-mapa .fale__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fale { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .fale__lista > div, .fale--sem-mapa .fale__lista > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .fale--sem-mapa .fale__lista { grid-template-columns: minmax(0, 1fr); }
}

/* O mapa: embed do OpenStreetMap escurecido por filtro, moldura de fio,
   cantos de visor e as coordenadas como num mostrador. So recebe clique
   depois que a pessoa clica nele (o cinema.js poe .ativo), para a rolagem
   da pagina nao ficar presa dentro do mapa. */
.mapa-osm { margin: 0; }
.mapa-osm__quadro {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #0b1222;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .95), 0 0 0 5px rgba(255, 255, 255, .025);
}
.contato .mapa-osm__quadro { aspect-ratio: 5 / 4; }
.mapa-osm iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9);
    pointer-events: none;
}
.mapa-osm.ativo iframe { pointer-events: auto; }
.mapa-osm__quadro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(3, 5, 11, .6)),
        linear-gradient(180deg, rgba(30, 144, 255, .07), rgba(3, 5, 11, .12));
    transition: opacity .5s;
}
.mapa-osm.ativo .mapa-osm__quadro::after { opacity: .35; }
.mapa-osm__quadro > i {
    position: absolute;
    z-index: 2;
    width: 16px; height: 16px;
    border: 0 solid rgba(255, 255, 255, .55);
    pointer-events: none;
}
.mapa-osm__quadro > i:nth-of-type(1) { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.mapa-osm__quadro > i:nth-of-type(2) { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.mapa-osm__quadro > i:nth-of-type(3) { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.mapa-osm__quadro > i:nth-of-type(4) { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.mapa-osm__coord {
    position: absolute;
    z-index: 2;
    top: 18px; left: 36px;
    padding: 5px 9px;
    border-radius: 2px;
    background: rgba(3, 5, 11, .6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .8);
    pointer-events: none;
}
/* O anel que pulsa em cima do ponto marcado. Some quando o mapa e
   liberado, porque ai a pessoa arrasta e o ponto sai do centro. */
.mapa-osm__pino {
    position: absolute;
    z-index: 2;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 1px solid rgba(134, 197, 255, .8);
    box-shadow: 0 0 24px rgba(30, 144, 255, .45);
    pointer-events: none;
    animation: anel 2.6s var(--curva) infinite;
}
@keyframes anel {
    0% { transform: scale(.4); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}
.mapa-osm.ativo .mapa-osm__pino { display: none; }
.mapa-osm__ativar {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 40px 36px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font: 500 9.5px/1 var(--letra-texto);
    letter-spacing: .24em;
    text-transform: uppercase;
    cursor: pointer;
}
.mapa-osm__ativar span {
    padding: 6px 10px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(3, 5, 11, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color .3s;
}
.mapa-osm__ativar:hover span { border-color: rgba(134, 197, 255, .6); }
.mapa-osm__ativar:focus-visible { outline-offset: -6px; }
.mapa-osm.ativo .mapa-osm__ativar { display: none; }
.mapa-osm__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 560px) {
    .mapa-osm__quadro, .contato .mapa-osm__quadro { aspect-ratio: 1 / 1; }
    .mapa-osm__ativar { padding: 0 0 40px 30px; }
    .mapa-osm__coord { left: 30px; }
    .mapa-osm__acoes .botao { flex: 1 1 100%; }
}

/* ==========================================================================
   MENOS MOVIMENTO, para o que entrou neste bloco
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .botao::after { display: none; }
    .mapa-osm__pino { animation: none; opacity: .8; transform: scale(.7); }
    .letreiro { -webkit-mask-image: none; mask-image: none; }
    .letreiro__linha { animation: none; width: auto; justify-content: center; }
    .letreiro ul[aria-hidden] { display: none; }
    .letreiro ul { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding: 0 var(--lado); }
    .letreiro li { white-space: normal; }
    /* A faixa de fotos para e vira rolagem lateral dentro dela mesma. */
    .insta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
    .insta__faixa { animation: none; }
    .insta ul[aria-hidden] { display: none; }
    .insta li { scroll-snap-align: start; }
}

/* O <picture> nao existe para o leiaute (25/09/2026).

   Cada foto passou a ter uma versao em WebP, e a forma de oferecer as duas e
   embrulhar a imagem num <picture>. Esse embrulho e um elemento a mais entre o
   pai e o <img>, e como ele nasce inline ele traria um vao de linha de base
   embaixo de toda foto, alem de furar qualquer regra que conte com o <img>
   sendo filho direto. display:contents faz o embrulho sumir do leiaute e
   deixar o <img> exatamente onde estava. */
picture { display: contents; }

/* ==========================================================================
   A FRASE DE ABERTURA (25/09/2026)

   "Melhora a fonte nessa frase, destaque o software, e acho que um azul solido
   fica melhor" (Danilo).

   A segunda linha vinha com o degrade metalico: quatro tons de azul andando
   dentro da letra. Ele funciona num titulo pequeno sobre fundo chapado e
   trabalha contra aqui, porque esta linha e enorme e mora em cima de uma foto
   da plateia com luz azul atras. Degrade sobre degrade nao tem contraste
   possivel, e o texto some nas letras que caem sobre a parte clara da foto.

   Azul solido resolve isso: uma cor so, escolhida clara o bastante para
   aguentar a parte mais clara da foto. E a letra ganha corpo, porque italico
   fino de 84px sobre fotografia vira desenho e nao palavra.

   E SOFTWARE SAI DO ITALICO. E a palavra que a frase inteira existe para
   dizer, e a unica que muda o que a pessoa acha que a BASOFT vende. Em pe,
   branca e com a letra de titulo, ela para de ser parte da onda e vira a
   coisa anunciada.
   ========================================================================== */
.abertura h1 .serif {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #4aa6ff;
    font-weight: 500;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.abertura h1 .palavra-chave {
    font-family: var(--letra-titulo);
    font-style: normal;
    font-weight: 600;
    font-variation-settings: 'wdth' 100;
    color: #fff;
    letter-spacing: -.015em;
    padding-inline: .02em;
}

/* ==========================================================================
   NO CELULAR, DEDO E OLHO (01/10/2026).

   A auditoria mediu a 375 px: link do rodape com 25 px de altura, os "ir
   para" dos cartoes com 23 px e letra de 10,5 px, telefone e e-mail com
   22 px. Da para usar, mas erra-se o toque. O alvo passa a ter 44 px, que e
   o minimo que um dedo acerta sem mirar, e o texto que se LE (rotulo de
   campo, assinatura de depoimento, base do rodape) ganha piso de 12 px.
   Selo decorativo fica como esta.

   O letter-spacing dos rotulos encolhe junto: com 12 px e .22em a linha
   estourava a largura em tela estreita.
   ========================================================================== */
@media (max-width: 620px) {
    .rodape__col a {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 0;
    }
    .rodape__col span { margin: 12px 0; }
    .rodape__col .redes a { display: inline-flex; }

    /* A area de toque cresce por um pseudo-elemento invisivel, e nao por
       altura: com min-height o fio de baixo descolaria da palavra. */
    .frente__ir {
        position: relative;
        font-size: 12px;
        letter-spacing: .16em;
    }
    .frente__ir::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: -12px; bottom: -12px;
    }
    .grade__bloco { font-size: 12px; letter-spacing: .2em; }

    .fale__lista dd > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .conversar label > span,
    .depoimento cite { font-size: 12px; letter-spacing: .14em; }
    .fale__lista dt,
    .fale__mapa-acima { font-size: 12px; letter-spacing: .18em; }
    .fale__mapa-acima a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* O botao de rever a escolha de medicao, na pagina de privacidade, e a
   linha que diz qual e a escolha de hoje (preferencias.js). */
.leitura .rever-medicao { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.leitura .rever-medicao .botao { min-height: 44px; }
.leitura .rever-medicao [data-escolha-medicao] { font-size: 14.5px; color: var(--suave); }
/* Aviso reaberto por quem ja escolheu: entra sem os 2 s de espera da primeira visita. */
.consentimento--reaberto { animation-delay: 0s; }