/* ═══════════════════════════════════════════════════════════════════════════
   PC FORMATECH — Camada de refinamento visual
   Carregada por ÚLTIMA, depois de theme-system.css.

   Por que um arquivo separado: styles.css e styles2.css têm 61 e 26 seletores
   repetidos e theme-system.css usa 396 !important. Reabrir aquelas regras para
   ajustar aparência significa disputar especificidade a cada linha. Esta camada
   vence por ordem de carga, então quase nada aqui precisa de !important.

   Índice
     01 · Escala tipográfica e tokens
     02 · Atmosfera (grade técnica + brilho direcional)
     03 · Hero
     04 · Indicadores do carrossel
     05 · Cards "Curiosidade"
     06 · Antes vs Depois
     07 · Diagnóstico — chips no lugar de checkbox nativo
     08 · Serviços
     09 · Formulário de agendamento
     10 · Foco visível
     11 · Mobile
     12 · prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 01 · Escala tipográfica ─────────────────────────────────────────────────
   Antes o h1 tinha 45px e quase todo o resto vivia entre 11 e 13px, sem degraus
   intermediários. Escala de razão 1.25, com piso de 15px para texto de leitura;
   12px fica reservado a rótulos em caixa alta, onde o letter-spacing compensa. */

:root {
    --fs-label:  0.75rem;    /* 12px — só caixa alta com tracking */
    --fs-xs:     0.8125rem;  /* 13px — metadados */
    --fs-sm:     0.9375rem;  /* 15px — piso de leitura */
    --fs-base:   1.0625rem;  /* 17px — corpo */
    --fs-md:     1.25rem;    /* 20px */
    --fs-lg:     1.5625rem;  /* 25px */
    --fs-xl:     1.95rem;    /* 31px */
    --fs-2xl:    2.4375rem;  /* 39px */
    --fs-display: clamp(2.2rem, 4.6vw, 3.8rem);

    --tracking-label: 0.14em;
    --tracking-tight: -0.025em;

    /* Brilho da marca, usado com parcimônia: só em elementos de ação. */
    --glow-accent: 0 0 0 1px rgba(111, 191, 179, 0.28), 0 8px 30px -8px rgba(64, 153, 143, 0.55);
    --glow-accent-strong: 0 0 0 1px rgba(111, 191, 179, 0.5), 0 12px 42px -10px rgba(64, 153, 143, 0.75);

    --edge-line: rgba(64, 153, 143, 0.16);
    --plate-bg: rgba(255, 255, 255, 0.72);
    --plate-border: rgba(11, 61, 61, 0.1);
}

html[data-theme='dark'] {
    --edge-line: rgba(95, 201, 190, 0.13);
    --plate-bg: rgba(12, 24, 38, 0.66);
    --plate-border: rgba(95, 201, 190, 0.18);
}

body {
    font-size: var(--fs-base);
    line-height: 1.62;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4,
.brand-name, .hero-kicker, .section-title {
    font-family: var(--pcft-font-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h2 { font-size: var(--fs-2xl); line-height: 1.12; }
h3 { font-size: var(--fs-md); line-height: 1.28; }
h4 { font-size: var(--fs-sm); }

/* Números e dados técnicos em mono: é o idioma visual da área e cria hierarquia
   sem precisar de mais uma cor. */
.proof-card strong,
.transform-boot,
.metric-item small,
.price-tag span:last-child,
.price,
.summary-total,
.hero-trust-strip span {
    font-family: var(--pcft-font-mono);
    font-variant-numeric: tabular-nums;
}

.services-subtitle,
.pc-transform-head p,
.proof-card span,
.attention-card .teaser,
.attention-card .reveal-copy,
.service-card p {
    font-size: var(--fs-sm);
}

.attention-label,
.transform-chip,
.hero-kicker {
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 700;
}


/* ── 02 · Atmosfera ──────────────────────────────────────────────────────────
   Um único gesto repetido, não cinco efeitos diferentes: uma grade técnica de
   1px muito discreta no fundo das seções largas, que só se percebe de relance e
   dá ao fundo a textura de instrumento em vez de gradiente liso. */

.pc-transform,
.diagnostic-section,
.proof-section,
.services,
.scheduling {
    position: relative;
    isolation: isolate;
}

.pc-transform::before,
.diagnostic-section::before,
.proof-section::before,
.services::before,
.scheduling::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--edge-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--edge-line) 1px, transparent 1px);
    background-size: 64px 64px;
    /* A grade some nas bordas para não virar padrão de fundo declarado. */
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    opacity: 0.85;
}

/* Brilho direcional apenas onde há ação. */
.hero-cta-primary,
.diagnostic-btn:not(.ghost),
.urgency-cta,
.booking-btn,
.whatsapp-btn {
    box-shadow: var(--glow-accent);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.hero-cta-primary:hover,
.diagnostic-btn:not(.ghost):hover,
.urgency-cta:hover,
.booking-btn:hover,
.whatsapp-btn:hover {
    box-shadow: var(--glow-accent-strong);
    transform: translateY(-2px);
}


/* ── 03 · Hero ───────────────────────────────────────────────────────────────
   O overlay do tema (.hero-overlay, definido por token com !important) continua
   dando o tom da marca. O trabalho de legibilidade passa para esta camada: um
   scrim vertical concentrado onde o texto vive, mais uma vinheta.

   Antes o overlay era um gradiente único sobre 17 fotos de luminância muito
   diferente — funcionava nas escuras e deixava o parágrafo ilegível nos slides
   de código colorido e de setup RGB. */

.hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 78% at 50% 42%, transparent 26%, rgba(2, 14, 13, 0.46) 100%),
        linear-gradient(to bottom,
            rgba(2, 14, 13, 0.16) 0%,
            rgba(2, 14, 13, 0.34) 34%,
            rgba(2, 14, 13, 0.58) 72%,
            rgba(2, 14, 13, 0.74) 100%);
}

/* Placa de vidro atrás do texto: resolve a legibilidade de vez, seja qual for a
   foto, e é o elemento que mais empurra o hero para a leitura "tech". */
.hero-content {
    position: relative;
    padding: clamp(1.6rem, 3.4vw, 3rem) clamp(1.4rem, 3vw, 3.2rem);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(4, 26, 25, 0.52), rgba(3, 16, 15, 0.34));
    border: 1px solid rgba(150, 226, 216, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* Fio de luz na aresta superior — o detalhe que dá acabamento à placa. */
.hero-content::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(146, 232, 220, 0.75), transparent);
    pointer-events: none;
}

.hero-content h1 {
    font-size: var(--fs-display);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    /* Com a placa de vidro, a pilha de 4 text-shadows deixa de ser necessária —
       ela borrava as bordas das letras. */
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-content p {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.58;
    max-width: 62ch;
    text-shadow: none;
}

.hero-kicker {
    background: rgba(6, 32, 30, 0.72);
    border: 1px solid rgba(146, 232, 220, 0.42);
    color: #cdf3ec;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.hero-trust-strip span {
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
    background: rgba(6, 32, 30, 0.6);
    border: 1px solid rgba(146, 232, 220, 0.24);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}


/* ── 04 · Indicadores do carrossel ───────────────────────────────────────────
   Agora são <button> gerados por main.js (um por slide). Reset de botão para
   manterem a aparência de ponto. */

.hero-indicators .indicator {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Com 17 slides a linha de pontos fica longa; o ativo vira um traço, que lê a
   posição de relance melhor do que 17 círculos iguais. */
.hero-indicators .indicator.active {
    width: 26px;
    border-radius: 999px;
}


/* ── 05 · Cards "Curiosidade" ────────────────────────────────────────────────
   O parágrafo era truncado por um fade e a frase terminava no meio da palavra.
   As quatro colunas também tinham alturas diferentes. */

.attention-grid {
    align-items: stretch;
}

.attention-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
}

.attention-card .reveal-copy {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 1;
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--edge-line);
}


/* ── 06 · Antes vs Depois ────────────────────────────────────────────────────
   Era a seção com maior potencial de impacto e os dois cards eram visualmente
   idênticos — o contraste prometido existia só no texto. */

.transform-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Faixa de estado no topo do card: vermelha à esquerda, luminosa à direita. */
.transform-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.transform-card.before::before {
    background: linear-gradient(90deg, #c2453d, rgba(194, 69, 61, 0.15));
}

.transform-card.after::before {
    background: linear-gradient(90deg, #40998F, #6FBFB3);
    box-shadow: 0 0 22px rgba(64, 153, 143, 0.75);
}

/* O card "Antes" parece desgastado: dessaturado e sem brilho. */
.transform-card.before {
    filter: saturate(0.62);
    border-color: rgba(194, 69, 61, 0.24);
}

/* O "Depois" parece o sistema otimizado. */
.transform-card.after {
    border-color: rgba(64, 153, 143, 0.42);
    box-shadow: 0 0 0 1px rgba(111, 191, 179, 0.18), 0 22px 50px -28px rgba(64, 153, 143, 0.6);
}

.transform-chip {
    align-self: flex-start;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: var(--fs-label);
}

.transform-chip.danger {
    background: rgba(194, 69, 61, 0.14);
    color: #c2453d;
    border: 1px solid rgba(194, 69, 61, 0.32);
}

.transform-chip.success {
    background: rgba(64, 153, 143, 0.14);
    color: var(--brand-400, #40998F);
    border: 1px solid rgba(64, 153, 143, 0.4);
}

/* O boot é o número que prova a seção — antes era uma linha de 13px no rodapé. */
.transform-boot {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--edge-line);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.transform-card.after .transform-boot {
    color: var(--brand-400, #40998F);
    text-shadow: 0 0 26px rgba(64, 153, 143, 0.45);
}

.metric-bar {
    overflow: hidden;
    border-radius: 999px;
}

.metric-bar i {
    box-shadow: 0 0 18px rgba(64, 153, 143, 0.5);
}


/* ── 07 · Diagnóstico ────────────────────────────────────────────────────────
   Checkbox nativo do sistema operacional era o detalhe que mais destoava numa
   página que se apresenta como premium. Vira chip com estado. */

.diagnostic-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.diagnostic-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 1rem 0.62rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--plate-border);
    background: var(--plate-bg);
    font-size: var(--fs-sm);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.diagnostic-checks label:hover {
    border-color: rgba(64, 153, 143, 0.5);
    transform: translateY(-1px);
}

.diagnostic-checks input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    border-radius: 6px;
    border: 1.5px solid rgba(64, 153, 143, 0.55);
    background: transparent;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease;
}

.diagnostic-checks input[type="checkbox"]::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.diagnostic-checks input[type="checkbox"]:checked {
    background: var(--brand-400, #40998F);
    border-color: var(--brand-400, #40998F);
}

.diagnostic-checks input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
}

.diagnostic-checks label:has(input:checked) {
    border-color: var(--brand-400, #40998F);
    box-shadow: var(--glow-accent);
}

.diagnostic-chipline {
    font-family: var(--pcft-font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
}


/* ── 08 · Serviços ───────────────────────────────────────────────────────────
   grid-auto-rows: 1fr igualava a altura dos cards, mas o conteúdo preenchia
   menos da metade — sobrava um vazio de ~120px entre a descrição e o botão. */

.service-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card h3 {
    font-size: var(--fs-md);
    margin-bottom: 0;
}

.service-card p {
    margin-bottom: 0;
    color: var(--pcft-muted-color, var(--brand-text-muted));
}

/* Os três primeiros itens do modal, trazidos para o card. Antes sobrava um
   vazio de ~120px entre a descrição e o botão porque grid-auto-rows: 1fr
   igualava as alturas sem que houvesse conteúdo para preencher. */
.service-card-points {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
    text-align: left;
    font-size: var(--fs-xs);
    color: var(--pcft-muted-color, var(--brand-text-muted));
}

.service-card-points li {
    position: relative;
    padding-left: 1.15rem;
    line-height: 1.45;
}

.service-card-points li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.52em;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--brand-400, #40998F);
    box-shadow: 0 0 8px rgba(64, 153, 143, 0.8);
}

/* O botão fica colado no rodapé do card, alinhado entre as colunas. */
.service-card .service-details-btn {
    margin-top: auto;
}

.service-card .service-icon-wrapper {
    margin-block: 0.4rem;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glow-accent);
    border-color: rgba(64, 153, 143, 0.42);
}

.service-card:has(.service-checkbox:checked) {
    border-color: var(--brand-400, #40998F);
    box-shadow: var(--glow-accent-strong);
}

.price-tag {
    font-family: var(--pcft-font-mono);
    font-variant-numeric: tabular-nums;
}

.price-tag span:first-child {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.price-tag span:last-child {
    font-size: var(--fs-sm);
    font-weight: 700;
}


/* ── 09 · Formulário de agendamento ──────────────────────────────────────────
   Mesmos checkboxes nativos do diagnóstico, agora em linhas selecionáveis. */

.services-checkbox-group label.service-checkbox {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--plate-border);
    background: var(--plate-bg);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.services-checkbox-group label.service-checkbox:hover {
    border-color: rgba(64, 153, 143, 0.5);
}

.services-checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    border-radius: 6px;
    border: 1.5px solid rgba(64, 153, 143, 0.55);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease;
}

.services-checkbox-group input[type="checkbox"]::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* !important obrigatório: theme-system.css pinta o fundo de todo input de
   .form-group com var(--theme-surface) !important, e sem isto a caixa marcada
   continuava branca — o cliente escolhia o serviço e nada indicava a escolha. */
.services-checkbox-group input[type="checkbox"]:checked {
    background: var(--brand-400, #40998F) !important;
    border-color: var(--brand-400, #40998F) !important;
}

.services-checkbox-group input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
}

.services-checkbox-group label.service-checkbox:has(input:checked) {
    border-color: var(--brand-400, #40998F);
    box-shadow: var(--glow-accent);
}

/* O preço dentro da linha alinha em coluna com os demais. */
.services-checkbox-group label.service-checkbox span {
    font-variant-numeric: tabular-nums;
}


/* ── 10 · Foco visível ───────────────────────────────────────────────────────
   Não havia estado de foco em lugar nenhum: navegar por teclado era às cegas. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-400, #40998F);
    outline-offset: 3px;
    border-radius: 6px;
}

.hero-content a:focus-visible,
.hero-indicators .indicator:focus-visible,
.hero-nav-btn:focus-visible {
    outline-color: #cdf3ec;
}

/* Link de salto para o conteúdo, visível só quando recebe foco. */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 4000;
    padding: 0.75rem 1.4rem;
    border-radius: 0 0 10px 10px;
    background: var(--brand-900, #0B3D3D);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}


/* ── 11 · Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Os botões flutuantes (WhatsApp e tema) ficavam por cima do CTA do hero e
       do rodapé das seções. Reserva o espaço que eles ocupam. */
    .hero-actions {
        padding-bottom: 4.5rem;
    }

    .footer {
        padding-bottom: 5.5rem;
    }

    .hero-content {
        border-radius: 16px;
        padding: 1.4rem 1.1rem;
    }
}

@media (max-width: 480px) {
    /* Antes/Depois era forçado a 2 colunas mesmo em 375px, e "Queda de
       desempenho em tarefas simples" quebrava em três linhas numa coluna de
       ~150px. Abaixo desta largura, empilha. */
    .pc-transform-grid {
        grid-template-columns: 1fr;
    }

    .diagnostic-checks label {
        width: 100%;
    }
}


/* ── 12 · prefers-reduced-motion ─────────────────────────────────────────────
   Não havia nenhuma ocorrência em todo o projeto, num site com carrossel
   automático, contadores animados, barras animadas e reveal em 15 blocos.
   O autoplay e os contadores são desligados no main.js; aqui vai o resto. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-cta-primary:hover,
    .service-card:hover,
    .diagnostic-checks label:hover {
        transform: none;
    }
}


/* ── 13 · Navegação ──────────────────────────────────────────────────────────
   A nav tinha 3 links para 9 seções e nenhum levava às duas ações que a página
   existe para provocar. Agora tem 5, com "Agendar" tratado como ação. */

.nav-links {
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav-links li a {
    font-size: var(--fs-sm);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    transition: background 0.22s ease, color 0.22s ease;
}

/* O header muda de cor conforme o tema (escuro em uns, branco em outros), então
   o botão se tinge a partir da própria cor do texto do header em vez de assumir
   um fundo escuro — assim ele aparece nos dois casos. */
.nav-links li .nav-cta {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
    font-weight: 700;
    margin-left: 0.35rem;
}

.nav-links li .nav-cta:hover {
    background: color-mix(in srgb, currentColor 26%, transparent);
    border-color: currentColor;
}

@media (max-width: 560px) {
    /* Os 5 itens precisam caber em 375px sem cortar o CTA: tipografia e
       espaçamento apertados o suficiente para somar menos que a largura útil. */
    .nav-links li a {
        padding: 0.4rem 0.38rem;
        font-size: 0.8125rem;
    }

    .nav-links li .nav-cta {
        margin-left: 0.15rem;
        padding-inline: 0.6rem;
    }
}


/* ── 14 · Cabeçalho no mobile ────────────────────────────────────────────────
   O header tem altura fixa (4cm ≈ 151px). Com 5 itens de navegação, a lista
   quebrava em duas linhas e o botão "Agendar" transbordava 26px para fora do
   fundo do header. Em telas estreitas a lista vira uma faixa rolável de uma
   linha só: a altura do header fica estável e os 5 itens continuam acessíveis. */

@media (max-width: 560px) {
    /* .header é flex e .nav-bar é o único item: por padrão um item flex não
       encolhe abaixo do tamanho do próprio conteúdo (min-width:auto), então a
       fila de links sem quebra alargava o header (e a página) além da tela em
       vez de rolar dentro dele. min-width:0 devolve o direito de encolher. */
    .nav-bar { min-width: 0; }

    .nav-links {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        max-width: 100%;
        padding-inline: 0.25rem;
        justify-content: flex-start;
        scroll-snap-type: x proximity;
        gap: 0.1rem;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .nav-links li a {
        white-space: nowrap;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · METADE INFERIOR — agendamento, social, sobre e rodapé

   O que estava errado, medido no navegador:
     · .scheduling-options era um grid de UMA coluna, então o formulário e os
       três cards de informação ficavam empilhados em 1103px de largura;
     · os campos herdavam text-align:center, deixando os rótulos centralizados
       sobre inputs de 1065px — ninguém lê um formulário assim;
     · os inputs tinham 36px de altura com 4,8px de padding, abaixo do mínimo
       confortável para toque (44px);
     · os info-cards viravam três barras horizontais de 1103×149px;
     · no rodapé escuro, os cards de contato e de redes eram brancos, o que os
       fazia parecer colados de outra página.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 15.1 · Cabeçalhos de seção ─────────────────────────────────────────── */

.scheduling > h2,
.social-proof > h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: var(--fs-2xl);
    margin-bottom: 0.5rem;
}

.scheduling > h2 i,
.social-proof > h2 i {
    font-size: 0.72em;
    color: var(--brand-400, #40998F);
}


/* ── 15.2 · Agendamento: duas colunas ───────────────────────────────────── */

.scheduling-container {
    max-width: 1120px;
    text-align: left;
}

/* O formulário fica com quase o dobro da coluna de apoio. Abaixo de 960px as
   duas empilham, com a informação de contexto vindo primeiro. */
.scheduling-options {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 1.75rem;
    align-items: start;
    text-align: left;
}

.quick-booking {
    border-radius: 18px;
    border: 1px solid var(--plate-border);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    overflow: hidden;
}

.quick-booking > h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--fs-md);
    margin: 0 0 1.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--edge-line);
}

.quick-booking > h3 i {
    color: var(--brand-400, #40998F);
    font-size: 0.85em;
}

.schedule-form {
    background: none;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 1.05rem;
    max-width: none;
}


/* ── 15.3 · Campos ──────────────────────────────────────────────────────── */

.schedule-form .form-group {
    display: grid;
    gap: 0.4rem;
    text-align: left;
}

.schedule-form .form-group > label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pcft-muted-color, var(--brand-text-muted));
    margin: 0;
}

.schedule-form .form-group > label i {
    color: var(--brand-400, #40998F);
    width: 1em;
    text-align: center;
    font-size: 0.95em;
}

/* 48px de altura: confortável para toque e para leitura, contra os 36px de
   antes. O padding generoso é o que dá a sensação de acabamento. */
.schedule-form input[type="text"],
.schedule-form input[type="tel"],
.schedule-form input[type="email"],
.schedule-form input[type="date"],
.schedule-form select,
.schedule-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.95rem;
    border-radius: 11px;
    border: 1px solid var(--plate-border);
    background: var(--pcft-card-background, #fff);
    color: inherit;
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.schedule-form textarea {
    min-height: 110px;
    resize: vertical;
}

.schedule-form input::placeholder,
.schedule-form textarea::placeholder {
    color: var(--pcft-muted-color, var(--brand-text-muted));
    opacity: 0.72;
}

.schedule-form input:hover,
.schedule-form select:hover,
.schedule-form textarea:hover {
    border-color: rgba(64, 153, 143, 0.45);
}

.schedule-form input:focus,
.schedule-form select:focus,
.schedule-form textarea:focus {
    outline: none;
    border-color: var(--brand-400, #40998F);
    box-shadow: 0 0 0 3px rgba(64, 153, 143, 0.18);
}

/* Seta própria no lugar da nativa, que muda de cara em cada sistema. */
.schedule-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% + 1px),
        calc(100% - 0.8rem) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.schedule-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1.05rem;
}

.schedule-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--pcft-muted-color, var(--brand-text-muted));
    margin-top: 0.35rem;
}


/* ── 15.4 · Seleção de serviços e total ─────────────────────────────────── */

.services-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 0.55rem;
    margin-top: 0.15rem;
}

/* O total é o número que decide a conversa. Antes era uma linha de texto solta
   logo abaixo da lista. */
.total-price-display {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(64, 153, 143, 0.35);
    background: linear-gradient(135deg, rgba(64, 153, 143, 0.12), rgba(64, 153, 143, 0.04));
}

.total-price-display .total-label {
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--pcft-muted-color, var(--brand-text-muted));
}

.total-price-display .total-value {
    font-family: var(--pcft-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-400, #40998F);
}


/* ── 15.5 · Botão de envio ──────────────────────────────────────────────── */

.submit-schedule-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 54px;
    margin-top: 0.35rem;
    border: 0;
    border-radius: 12px;
    background: var(--pcft-button-background, var(--brand-gradient-btn));
    color: var(--pcft-button-text, #fff);
    font-family: var(--pcft-font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--glow-accent);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.submit-schedule-btn:hover {
    box-shadow: var(--glow-accent-strong);
    transform: translateY(-2px);
}

.submit-schedule-btn i {
    font-size: 1.15em;
}


/* ── 15.6 · Coluna de apoio ─────────────────────────────────────────────── */

.scheduling-info {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    /* Acompanha a rolagem enquanto o formulário, que é longo, é preenchido. */
    position: sticky;
    top: 4.6cm;
}

.info-card {
    display: grid;
    gap: 0.3rem;
    text-align: left;
    padding: 1.15rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--plate-border);
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--brand-400, #40998F), transparent);
}

.info-card > i {
    font-size: 1.1rem;
    color: var(--brand-400, #40998F);
    margin-bottom: 0.25rem;
}

.info-card h4 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.info-card p {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--pcft-muted-color, var(--brand-text-muted));
}

.info-card p strong {
    color: inherit;
    font-weight: 600;
}

.info-card small {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--pcft-muted-color, var(--brand-text-muted));
    opacity: 0.85;
}


/* ── 15.7 · Conecte-se conosco ──────────────────────────────────────────── */

.social-proof .social-container {
    max-width: 1000px;
    margin-inline: auto;
}

.social-proof .social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
    align-items: stretch;
}

.social-proof .social-link,
.social-proof .location-info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.15rem 0.85rem;
    text-align: left;
    padding: 1.2rem 1.3rem;
    border-radius: 14px;
    border: 1px solid var(--plate-border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.social-proof .social-link > i,
.social-proof .location-info > i {
    grid-row: 1 / 3;
    font-size: 1.5rem;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-content: center;
    border-radius: 11px;
    background: rgba(64, 153, 143, 0.12);
    color: var(--brand-400, #40998F);
}

.social-proof .social-link.instagram > i {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.16), rgba(253, 175, 55, 0.16));
    color: #d6336c;
}

.social-proof .social-link.whatsapp > i {
    background: rgba(37, 211, 102, 0.14);
    color: #1da851;
}

.social-proof .social-link span,
.social-proof .location-info span {
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.social-proof .social-link small,
.social-proof .location-info small {
    font-size: 0.72rem;
    color: var(--pcft-muted-color, var(--brand-text-muted));
    line-height: 1.4;
}

.social-proof .social-link:hover {
    transform: translateY(-3px);
    border-color: rgba(64, 153, 143, 0.45);
    box-shadow: var(--glow-accent);
}


/* ── 15.8 · Sobre ───────────────────────────────────────────────────────── */

.about-header {
    max-width: 60ch;
    margin-inline: auto;
}

.about-content {
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 2.5rem;
}

.about-main {
    display: grid;
    /* Sem uma coluna explícita, o único item do grid encolhe para caber no
       conteúdo (o cartão de texto ficava estreito, sobrando vazio ao lado). */
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    text-align: left;
}

/* Avatar e nome na mesma linha, alinhados pelo centro: antes eram dois
   blocos separados (uma foto-placeholder alta de um lado, o texto do outro)
   sem relação visual direta entre a "foto" e o nome que ela representa. */
.about-profile-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

.about-profile-photo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    /* styles.css e styles2.css têm min-height (220–280px) sobrando do antigo
       cartão-retrato: min-height sempre vence sobre height quando é maior,
       então sem isto o avatar virava uma pílula alta em vez de um círculo. */
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border: 1px solid rgba(64, 153, 143, 0.35);
    background:
        radial-gradient(circle at 50% 30%, rgba(64, 153, 143, 0.28), transparent 62%),
        linear-gradient(160deg, rgba(11, 61, 61, 0.9), rgba(26, 92, 92, 0.75));
    color: #cdf3ec;
    box-shadow: var(--glow-accent);
}

.about-profile-photo i {
    font-size: 1.7rem;
    opacity: 0.8;
}

.about-profile-id { min-width: 0; }

/* .about-text tinha seu próprio cartão branco porque, no layout antigo, ela
   ficava sozinha ao lado da foto, sem nenhum cartão externo unificando as
   duas. Agora .about-main já é o cartão (regra coletiva de "premium card"
   compartilhada com outras seções); manter os dois criava uma caixa branca
   dentro de outra caixa branca, com padding em dobro. */
.about-main .about-text {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.about-role {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--fs-sm);
    color: var(--pcft-muted-color, var(--text-light));
}

.about-text h3 {
    font-size: var(--fs-xl);
    line-height: 1.2;
    margin: 0;
}

.about-text p {
    max-width: 62ch;
    margin: 0 0 0.9rem;
}

.about-text .highlight-text {
    padding-left: 1rem;
    border-left: 2px solid var(--brand-400, #40998F);
    font-weight: 600;
}

.about-personal-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.6rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: var(--pcft-button-background, var(--brand-gradient-btn));
    color: var(--pcft-button-text, #fff);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    box-shadow: var(--glow-accent);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.about-personal-cta:hover {
    box-shadow: var(--glow-accent-strong);
    transform: translateY(-2px);
}

.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
}

.about-features .feature-card {
    display: grid;
    gap: 0.45rem;
    text-align: left;
    padding: 1.3rem;
    border-radius: 14px;
    border: 1px solid var(--plate-border);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.about-features .feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(64, 153, 143, 0.45);
    box-shadow: var(--glow-accent);
}

.about-features .feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-content: center;
    border-radius: 11px;
    background: rgba(64, 153, 143, 0.12);
    color: var(--brand-400, #40998F);
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.about-features .feature-card h4 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.about-features .feature-card p {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--pcft-muted-color, var(--brand-text-muted));
}

/* Os números da marca em mono, alinhados como uma régua. */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
    gap: 0;
    border: 1px solid var(--plate-border);
    border-radius: 14px;
    overflow: hidden;
}

.about-stats .stat-item {
    display: grid;
    gap: 0.3rem;
    padding: 1.3rem 1rem;
    text-align: center;
    border-right: 1px solid var(--edge-line);
}

.about-stats .stat-item:last-child {
    border-right: 0;
}

.about-stats .stat-number {
    font-family: var(--pcft-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--brand-400, #40998F);
}

.about-stats .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pcft-muted-color, var(--brand-text-muted));
    line-height: 1.4;
}


/* ── 15.9 · Rodapé ──────────────────────────────────────────────────────── */

/* O rodapé é escuro; os cards eram brancos e pareciam colados de outra página.
   Agora são vidro sobre o próprio fundo, com a borda fazendo a separação. */
.footer .contact-item,
.footer .social-link,
.footer .location-info,
.footer .payment-highlight {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.footer-content {
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 2rem;
    align-items: start;
    text-align: left;
}

.footer-content h3 {
    font-size: var(--fs-lg);
    margin: 0 0 0.3rem;
}

.footer-content h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.9rem;
    opacity: 0.85;
}

.footer .slogan {
    font-style: italic;
    font-size: var(--fs-sm);
    opacity: 0.9;
    margin: 0 0 0.6rem;
}

.footer .footer-description {
    font-size: var(--fs-xs);
    line-height: 1.6;
    max-width: 40ch;
    opacity: 0.82;
    margin: 0 0 1.2rem;
}

.footer .payment-highlight {
    padding: 1rem 1.15rem;
}

.footer .payment-methods {
    display: grid;
    gap: 0.5rem;
}

.footer .payment-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--fs-xs);
}

.footer-contact,
.footer-social {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.footer .contact-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem;
}

.footer .contact-item > i {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.footer .contact-info p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.footer .contact-info small {
    font-size: 0.7rem;
    opacity: 0.75;
}

.footer .social-links {
    display: grid;
    gap: 0.7rem;
}

.footer .social-link,
.footer .location-info {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer .social-link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(3px);
}

.footer .social-link > i,
.footer .location-info > i {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
}

.footer .social-link span,
.footer .location-info span {
    display: grid;
    gap: 0.12rem;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.footer .social-link small,
.footer .location-info small {
    font-size: 0.7rem;
    opacity: 0.75;
}

.footer-bottom {
    max-width: 1120px;
    margin-inline: auto;
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-info-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    opacity: 0.8;
}

.footer-info-bottom p {
    margin: 0;
}

.payment-methods-icons {
    display: flex;
    gap: 0.75rem;
    font-size: 1.15rem;
    opacity: 0.75;
}


/* ── 15.10 · Metade inferior no mobile ──────────────────────────────────── */

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

    /* No empilhamento, o contexto (horário, local, como funciona) vem antes do
       formulário: ajuda a decidir se vale a pena preencher. */
    .scheduling-info {
        order: -1;
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    }

}

@media (max-width: 560px) {
    .about-stats .stat-item {
        border-right: 0;
        border-bottom: 1px solid var(--edge-line);
    }

    .about-stats .stat-item:last-child {
        border-bottom: 0;
    }

    .footer-info-bottom {
        justify-content: center;
        text-align: center;
    }
}


/* ── 15.11 · Texto dos cards do rodapé ──────────────────────────────────────
   styles2.css define `.social-link strong { color: var(--primary-color) }`, um
   teal quase preto. Isso funcionava enquanto os cards do rodapé eram brancos;
   com o vidro escuro, "Instagram", "WhatsApp" e a cidade caíram para 1,19:1 e
   2,08:1 de contraste — praticamente invisíveis.

   A correção é escopada em .footer de propósito: na seção "Conecte-se Conosco",
   que fica sobre fundo claro, a cor escura continua sendo a certa. */

.footer .social-link strong,
.footer .location-info strong,
.footer .contact-info strong,
.footer .payment-item span,
.footer .social-link small,
.footer .location-info small {
    color: inherit;
}


/* ── 16 · Hero: foto em moldura própria ──────────────────────────────────────
   Antes as 17 fotos ocupavam a tela inteira atrás de uma placa de vidro com
   todo o texto: no celular não se via nada da imagem. Agora a foto tem uma
   moldura no formato da maioria delas (3:2) e a preenche (cover): as poucas
   que não têm esse formato ganham zoom em vez de faixas vazias. No computador
   o texto fica ao lado; no celular, só o título passa por cima (ver abaixo).

   Os seletores usam #home para vencer as regras antigas espalhadas por
   styles.css, mobile-desktop.css e theme-system.css sem disputar !important. */

#home.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "foto"
        "texto";
    align-items: center;
    gap: 0;
    min-height: 0;
    height: auto;
    padding: 0 0 2rem;
    text-align: left;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 85% 0%, color-mix(in srgb, var(--theme-accent, #2d7a7a) 32%, transparent), transparent 70%),
        linear-gradient(160deg, #0b2b2c 0%, #061719 100%);
}

#home .hero-overlay { display: none; }

/* Moldura da foto */
#home .hero-slider {
    grid-area: foto;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #04100f;
    box-shadow: none;
}

#home .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#home .hero-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

#home .hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    transform: none;
}

/* Setas: fixas nos cantos de baixo, na linha dos indicadores, em todos os
   slides. No meio das laterais elas cobriam o texto e os botões dos anúncios,
   e mudar de lugar só nos anúncios fazia as setas pularem. */
#home .hero-nav-btn {
    grid-area: foto;
    position: absolute;
    top: auto;
    bottom: 7px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(3, 14, 14, 0.55);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    opacity: 0.85;
    transform: none;
    z-index: 3;
}

#home .hero-nav-btn:hover { opacity: 1; }
#home .hero-nav-btn i { font-size: 15px; }
#home .hero-prev { left: 10px; right: auto; }
#home .hero-next { right: 10px; left: auto; }

#home .hero-indicators {
    grid-area: foto;
    position: absolute;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(3, 14, 14, 0.45);
    z-index: 3;
}

/* Texto: fora da foto, sem placa de vidro */
#home .hero-content {
    grid-area: texto;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem 1rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    text-align: left;
}

#home .hero-content::before { display: none; }

#home .hero-content h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.8rem, 7vw, 3.2rem);
    line-height: 1.06;
    text-shadow: none;
}

#home .hero-content p {
    max-width: 46ch;
    margin: 0 0 1.3rem;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.55;
}

#home .hero-actions {
    justify-content: flex-start;
    padding-bottom: 0;
}

#home .hero-trust-strip {
    justify-content: flex-start;
    margin-top: 1.2rem;
}

@media (max-width: 899px) {
    /* Título e frase por cima da foto, numa faixa com sombra só no topo: a
       moldura quadrada deixa a maior parte da foto livre embaixo do texto.
       A caixa de texto some do layout (display: contents) para o título, os
       botões e os selos ocuparem cada um a sua área da grade. */
    #home.hero {
        grid-template-areas:
            "selo"
            "foto"
            "acoes"
            "confianca";
    }

    #home .hero-content { display: contents; }

    #home .hero-slider {
        aspect-ratio: 1 / 1;
        max-height: calc(100svh - 7rem);
    }

    #home #pcft-seasonal-badge {
        grid-area: selo;
        justify-self: start;
        margin: 1rem 1rem 0;
    }

    /* Cartão de vidro, não um degradê solto: uma faixa que só esmaece nas
       bordas lia bem em fotos escuras, mas em fotos claras (mesa clara,
       tela branca) o texto quase sumia. Um cartão com fundo translúcido e
       contorno próprio lê em cima de qualquer foto do carrossel. */
    #home .hero-titulo {
        grid-area: foto;
        align-self: start;
        position: relative;
        z-index: 2;
        margin: 0.9rem 1rem;
        padding: 0.9rem 1rem;
        border-radius: 14px;
        background: rgba(2, 12, 12, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(10px) saturate(1.1);
                backdrop-filter: blur(10px) saturate(1.1);
        box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
        pointer-events: none;
    }

    #home .hero-content h1 {
        margin: 0 0 0.4rem;
        padding: 0;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
    }

    #home .hero-content p {
        max-width: none;
        margin: 0;
        padding: 0;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    }

    #home .hero-actions {
        grid-area: acoes;
        padding: 1rem 1rem 0;
    }

    #home .hero-trust-strip {
        grid-area: confianca;
        margin: 1rem 1rem 0;
    }

    /* No celular os dois botões dividem a largura, sem quebrar em linhas soltas. */
    #home .hero-actions > a {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Selos em grade 2×2, menores: em fila solta ocupavam três linhas e
       ficavam embaixo dos botões flutuantes. */
    #home .hero-trust-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding-bottom: 4.5rem;
    }

    #home .hero-trust-strip span {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.45rem;
        padding: 0.5rem 0.65rem;
        border-radius: 12px;
        font-size: 0.72rem;
        line-height: 1.25;
        white-space: normal;
    }
}

@media (min-width: 900px) {
    #home.hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas: "texto foto";
        gap: clamp(1.75rem, 3.5vw, 3.5rem);
        padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 4vw, 4rem);
    }

    #home .hero-slider {
        aspect-ratio: 3 / 2;
        max-height: calc(100vh - 210px);
        min-height: 360px;
        border-radius: 22px !important;
        box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.85);
    }

    #home .hero-content { padding: 0; }
    #home .hero-content h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
}


/* ── 17 · "Agendar" no menu ──────────────────────────────────────────────────
   O fundo translúcido com borda (regra original, seção 13) lia como uma aba
   já selecionada. Um botão branco cheio corrigia isso mas virou ênfase forte
   demais. Sem caixa nenhuma: só texto, um pouco mais forte que os outros
   links — reconhecível como ação, sem chamar mais atenção que o resto do
   menu nem parecer um estado ativo. */

.nav-links li .nav-cta {
    background: none;
    border: 0;
    box-shadow: none;
    font-weight: 800;
}

.nav-links li .nav-cta:hover,
.nav-links li .nav-cta:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}


/* ── 18 · Celular compacto ───────────────────────────────────────────────────
   No celular a página passava de 14.000px: cabeçalho de 151px fixo na tela,
   cards empilhados um por linha e textos longos. Aqui os blocos ficam lado a
   lado sempre que cabem, o cabeçalho encolhe e o que se repete sai. */

@media (max-width: 600px) {
    /* Cabeçalho: de 151px para 104px — é espaço que fica o tempo todo na tela.
       O logo e o título tinham margin-top de 1cm e cada item do menu 1rem em
       cima e embaixo (styles.css), o que empurrava o menu para fora do fundo. */
    body {
        padding-top: 6.5rem;
        padding-bottom: 0;
    }

    .header { height: 6.5rem; }

    .logo-img,
    .brand-text { margin-top: 0; }

    .nav-links li { margin: 0; }

    .nav-bar {
        padding: 0.55rem 0.75rem 0.4rem;
        gap: 0.4rem;
    }

    .logo-img {
        width: 40px;
        height: 40px;
    }

    .brand-name { font-size: 1.2rem; }
    .tagline { font-size: 0.66rem; }

    /* Banner: sem a folga grande embaixo dos selos. */
    #home.hero { padding-bottom: 1.5rem; }
    #home .hero-content h1 { font-size: 1.75rem; }
    #home .hero-content p { font-size: 0.95rem; }
    #home .hero-trust-strip { padding-bottom: 0; margin-top: 1rem; }

    /* Seções: menos respiro vertical. */
    .attention-flow,
    .pc-transform,
    .diagnostic-section,
    .proof-section,
    .services,
    .testimonials,
    .faq,
    .scheduling,
    .social-proof,
    .about {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .faq-container,
    .scheduling-container,
    .social-container {
        width: 100%;
        max-width: 100%;
        padding-inline: 1rem;
        box-sizing: border-box;
    }

    h2,
    .section-title,
    .scheduling > h2,
    .social-proof > h2 {
        font-size: 1.5rem;
    }

    /* Curiosidades: 2 colunas com texto curto. */
    .attention-grid { gap: 0.6rem; }

    .attention-card {
        padding: 0.9rem 0.8rem;
        gap: 0.45rem;
    }

    .attention-card h3 {
        font-size: 0.98rem;
        line-height: 1.22;
    }

    .attention-card .teaser {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    /* Antes x Depois lado a lado. */
    .pc-transform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .transform-card {
        padding: 0.85rem 0.75rem;
        gap: 0.5rem;
    }

    .transform-chip {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
        letter-spacing: 0.06em;
    }

    .transform-card ul { gap: 0.3rem; }
    .transform-card li { font-size: 0.75rem; line-height: 1.3; }
    .transform-boot { font-size: 0.82rem; padding-top: 0.5rem; }

    .pc-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .metric-item span { font-size: 0.82rem; }
    .metric-item small { font-size: 0.72rem; }

    /* Diagnóstico: sintomas em 2 colunas, botões na mesma linha. */
    .diagnostic-shell { padding: 1.25rem 1rem; }

    .diagnostic-checks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .diagnostic-checks label {
        width: auto;
        min-height: 44px;
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
        line-height: 1.25;
    }

    .diagnostic-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .diagnostic-actions .diagnostic-btn {
        width: 100%;
        padding-inline: 0.5rem;
        font-size: 0.82rem;
    }

    .diagnostic-whatsapp { width: 100%; justify-content: center; }
    .diagnostic-urgency { font-size: 0.8rem; }

    /* Serviços: a lista de itens já está em "Ver Detalhes"; no card fica o essencial. */
    .service-card .service-card-points { display: none; }

    .service-card p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 0.8rem;
    }

    /* Perguntas: lado a lado, ícone menor. */
    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .faq-item { padding: 0.9rem 0.75rem; }
    .faq-question { gap: 0.5rem; }

    .faq-question .question-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .faq-question h3 { font-size: 0.86rem; line-height: 1.3; }
    .faq-answer p { font-size: 0.8rem; line-height: 1.45; }

    /* Agendamento: serviços, modo/limpeza e data/horário em 2 colunas. */
    .services-checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .services-checkbox-group label.service-checkbox {
        padding: 0.55rem 0.55rem;
        gap: 0.45rem;
        align-items: flex-start;
    }

    .services-checkbox-group label.service-checkbox span {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .schedule-form .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .schedule-form .form-row label { font-size: 0.78rem; }

    .scheduling-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .scheduling-info .info-card { padding: 0.9rem 0.8rem; }
    .scheduling-info .info-card:last-child { grid-column: 1 / -1; }
    .scheduling-info .info-card h4 { font-size: 0.9rem; }
    .scheduling-info .info-card p,
    .scheduling-info .info-card small { font-size: 0.78rem; }

    /* Conecte-se: três quadros lado a lado. */
    .social-proof .social-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .social-proof .social-link,
    .social-proof .location-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.85rem 0.4rem;
        text-align: center;
    }

    .social-proof .social-link span,
    .social-proof .location-info span {
        display: block;
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .social-proof .social-link small,
    .social-proof .location-info small { display: none; }

    /* Sobre: texto enxuto e os quatro diferenciais em 2×2. */
    .about-text h3 { font-size: 1.45rem; line-height: 1.15; }
    .about-text .highlight-text { font-size: 0.95rem; }
    .about-text p { font-size: 0.88rem; }

    .about-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    /* minmax(0, 1fr) deixa a COLUNA encolher, mas cada item de grid ainda tem
       min-width:auto por padrão e pode vazar da própria coluna sem empurrar
       nada visivelmente — só alarga o documento (rolagem lateral fantasma
       de ~21px). min-width:0 nos itens fecha essa saída. */
    .feature-card,
    .stat-item { min-width: 0; }

    .feature-card {
        padding: 0.9rem 0.75rem;
        gap: 0.35rem;
        text-align: left;
        justify-items: start;
    }

    .feature-card .feature-icon {
        width: 34px;
        height: 34px;
        margin: 0;
    }

    .feature-card h4 { font-size: 0.86rem; line-height: 1.25; }
    .feature-card p { font-size: 0.76rem; line-height: 1.4; }

    .about-stats { gap: 0.5rem; }
    .about-stats .stat-item { padding: 0.9rem 0.5rem; }
    .about-stats .stat-number { font-size: 1.6rem; }

    /* Rodapé: pagamento em uma linha e sem repetir a cidade. */
    .footer-content { gap: 1.5rem; }

    .payment-highlight .payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .payment-highlight .payment-methods > * {
        width: auto;
        min-width: 0;
        padding: 0.5rem 0.35rem;
        font-size: 0.74rem;
        justify-content: center;
    }

    .footer-contact .contact-item { padding: 0.6rem 0.75rem; }

    .footer-social .social-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .footer { padding-bottom: 5.5rem; }
}


/* ── 19 · Depoimentos compactos ──────────────────────────────────────────────
   Eram três faixas largas empilhadas (≈240px cada), com estrelas, balão,
   avatar, resultado e data cada um numa linha própria. Agora: três cartões
   lado a lado a partir do tablet e uma faixa que desliza no celular, com o
   cartão enxuto — estrelas, frase, e quem disse numa linha só.
   #depoimentos vence as regras do tema escuro sem precisar de !important. */

#depoimentos .testimonials-container { max-width: 1120px; }

#depoimentos .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 0 0;
}

#depoimentos .testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: 16px;
    text-align: left;
    transform: none;
}

#depoimentos .testimonial-card:hover { transform: translateY(-2px); }

#depoimentos .testimonial-rating {
    margin: 0;
    color: #f8b84e;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-align: left;
}

/* O theme-system.css pinta o balão com !important (regra coletiva de cards);
   aqui ele vira só texto dentro do cartão. */
#depoimentos .testimonial-bubble {
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#depoimentos .testimonial-bubble p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.5;
    text-align: left;
}

#depoimentos .client-info {
    margin-top: auto;
    padding: 0.65rem 0 0;
    gap: 0.6rem;
    background: none;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

#depoimentos .client-avatar-initial {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.75rem;
}

#depoimentos .client-details h3,
#depoimentos .client-details h4 {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.2;
}

#depoimentos .testimonial-outcome {
    margin: 0.1rem 0 0;
    font-size: 0.74rem;
    line-height: 1.3;
}

/* A data exata ("24 de setembro às 19:15") ocupava uma linha a mais em cada
   cartão sem ajudar a decidir nada. */
#depoimentos .testimonial-time { display: none; }

@media (max-width: 760px) {
    /* A margem negativa da faixa (abaixo) pode alargar o overflow do documento
       além da tela em navegadores mobile, mesmo sem nada visível cortado —
       é um bug conhecido de margem negativa dentro de overflow-x:auto. Este
       contentor não precisa rolar por si só, então ele contém esse excesso. */
    #depoimentos .testimonials-container { overflow-x: hidden; }

    #depoimentos .testimonials-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        margin-inline: -1rem;
        padding: 0.25rem 1rem 0.75rem;
        scrollbar-width: none;
    }

    #depoimentos .testimonials-grid::-webkit-scrollbar { display: none; }

    #depoimentos .testimonial-card {
        flex: 0 0 78%;
        scroll-snap-align: center;
    }
}


/* ── 20 · Serviços compactos ─────────────────────────────────────────────────
   O card tinha min-height: 320px (styles.css) e as linhas do grid eram
   iguais (1fr): com o texto curto, sobrava um vão grande entre a descrição
   e o botão. Sem altura mínima, cada linha fica só do tamanho do card mais
   alto dela, e o botão continua alinhado no rodapé entre as colunas. */

.services-grid {
    gap: 1.25rem;
    grid-auto-rows: auto;
}

.service-card {
    min-height: 0;
    height: auto;
    padding: 2.4rem 1rem 1rem;
    gap: 0.5rem;
}

.service-card .service-icon-wrapper {
    margin-block: 0;
}

.service-icon-wrapper i { font-size: 1.8rem; }

.service-card .service-details-btn {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .services-grid { gap: 0.6rem; }

    .service-card {
        padding: 2.35rem 0.7rem 0.8rem;
        gap: 0.4rem;
    }

    .service-card h3 {
        font-size: 0.98rem;
        line-height: 1.2;
    }

    .service-icon-wrapper i { font-size: 1.45rem; }

    .service-card .service-details-btn {
        min-height: 38px;
        padding: 0.45rem 0.6rem;
        font-size: 0.8rem;
    }
}


/* ── 21 · Faixa da loja Bird Tech ────────────────────────────────────────────
   Chamada para loja.html depois dos serviços. As cores são as do logo da
   Bird Tech, iguais nos dois temas: a faixa é da loja, não do tema do site. */

.bird-tech-faixa {
    max-width: 1120px;
    margin: 0 auto 2.5rem;
    padding: 1.4rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.2rem 1.6rem;
    border-radius: 22px;
    background: linear-gradient(120deg, #1a47b8 0%, #2f7fe0 60%, #33b5f5 100%);
    color: #fff;
    box-shadow: 0 24px 48px -28px rgba(26, 71, 184, 0.8);
}

.bird-tech-faixa img {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
}

.bird-tech-texto { flex: 1; min-width: 0; }

.bird-tech-selo {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

.bird-tech-faixa h2 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    line-height: 1.2;
    color: #fff !important;
    text-align: left;
}

.bird-tech-faixa p { margin: 0; color: rgba(255, 255, 255, 0.92) !important; }

.bird-tech-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 1.3rem;
    border-radius: 999px;
    background: #fff;
    color: #1a47b8 !important;
    font-weight: 800;
    text-decoration: none;
}

.bird-tech-botao:hover { filter: brightness(0.96); }

@media (max-width: 760px) {
    .bird-tech-faixa {
        margin: 0 1rem 2rem;
        padding: 1.1rem;
        flex-wrap: wrap;
    }

    .bird-tech-faixa img { width: 64px; height: 64px; padding: 8px; border-radius: 16px; }
    .bird-tech-texto { flex-basis: calc(100% - 88px); }
    .bird-tech-botao { width: 100%; justify-content: center; }
}


/* ── 22 · Animações leves ────────────────────────────────────────────────────
   Com a página parada, o navegador refazia o layout 75 vezes por segundo: a
   barra de progresso do indicador ativo animava width (layout a cada quadro)
   e o brilho do botão principal animava box-shadow (pintura a cada quadro).
   No celular isso somava ~25 s de processamento no carregamento. Agora as
   duas animam só transform e opacity, que a placa de vídeo faz sozinha. */

.hero-indicators .indicator.active::after {
    width: 100%;
    transform-origin: left center;
    animation: indicador-progresso 10s linear both;
}

@keyframes indicador-progresso {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.hero-cta-primary {
    position: relative;
    isolation: isolate;
    animation: none;
}

/* O brilho mais forte fica numa camada própria que só acende e apaga. */
.hero-cta-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 16px 44px rgba(45, 122, 122, 0.64);
    opacity: 0;
    animation: cta-brilho 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cta-brilho {
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta-primary::after,
    .hero-indicators .indicator.active::after { animation: none; }
}


/* ── 23 · Título só para leitores de tela ────────────────────────────────────
   Seções que têm título visual implícito (os cards falam por si) ganham um
   h2 escondido: sem ele, a ordem de títulos pulava do h1 para os h3. */

.titulo-oculto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ── 24 · Rodapé sem repetição ───────────────────────────────────────────────
   A cidade aparecia em Contato e de novo em Redes Sociais. */
.footer-social .location-info { display: none; }


/* ── 25 · Títulos de seção unificados ────────────────────────────────────────
   Havia quatro estilos de h2 na mesma página: grande e escuro (Serviços),
   médio com ícone solto no canto (Depoimentos), degradê verde com ícone
   (Perguntas, Conecte-se) e pequeno (Sobre). Agora todos seguem o mesmo:
   mesmo tamanho, cor do tema, sem ícone decorativo e o mesmo traço embaixo. */

.pc-transform-head h2,
.proof-head h2,
.services > h2,
#depoimentos > .section-title,
.faq > .section-title,
.social-proof > h2,
.about-header h2 {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    margin: 0 auto 2.2rem;
    padding: 0 0 0.9rem;
    font-family: var(--pcft-font-heading);
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--pcft-heading-color, var(--primary-color));
    background: none;
    -webkit-text-fill-color: currentColor;
}

#depoimentos > .section-title i,
.faq > .section-title i,
.social-proof > h2 i {
    display: none;
}

.pc-transform-head h2::after,
.proof-head h2::after,
.services > h2::after,
#depoimentos > .section-title::after,
.faq > .section-title::after,
.social-proof > h2::after,
.about-header h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    top: auto;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: var(--pcft-button-background, linear-gradient(90deg, #2d7a7a, #40998f));
}

/* Subtítulos logo abaixo do traço. */
.pc-transform-head h2 + p,
.services > h2 + .services-subtitle,
.about-header h2 + .about-subtitle {
    margin-top: -1.2rem;
}

/* Perguntas e Conecte-se tinham só 1rem de respiro: pareciam coladas nas
   seções vizinhas. */
.faq,
.social-proof {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* styles.css reservava 8rem sob o rodapé para a barra fixa de orçamento, o
   que deixava uma faixa vazia depois do rodapé. A folga agora fica dentro
   do próprio rodapé. */
body { padding-bottom: 0; }
.footer { padding-bottom: 5.5rem; }

/* O tema escuro pintava Perguntas e Conecte-se com degradê (theme-system). */
html[data-theme='dark'] .faq > .section-title,
html[data-theme='dark'] .social-proof > h2 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--theme-text);
}

/* O cabeçalho do Sobre tinha 60ch: o título quebrava em duas linhas. */
.about-header { max-width: 820px; }

/* Ícone das perguntas: quadrado quase preto no tema claro destoava do resto
   dos cards; agora segue o mesmo tom suave dos ícones de diferenciais. */
.faq-question .question-icon {
    border-radius: 14px;
    background: color-mix(in srgb, var(--theme-accent, #2d7a7a) 12%, transparent);
    box-shadow: none;
}

.faq-question .question-icon i {
    color: var(--theme-accent, #2d7a7a) !important;
}

@media (max-width: 600px) {
    .pc-transform-head h2,
    .proof-head h2,
    .services > h2,
    #depoimentos > .section-title,
    .faq > .section-title,
    .social-proof > h2,
    .about-header h2 {
        margin-bottom: 1.4rem;
        padding-bottom: 0.7rem;
        font-size: 1.5rem;
    }

    .pc-transform-head h2 + p,
    .services > h2 + .services-subtitle,
    .about-header h2 + .about-subtitle { margin-top: -0.6rem; }

    .faq,
    .social-proof {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .about-header { margin-bottom: 1.6rem; }
}

/* ── 26 · Links para as páginas de serviço (servicos/) ──────────────────────
   Ajudam quem quer detalhes e ligam as páginas novas ao resto do site, o que
   faz o Google encontrá-las e entender do que cada uma trata. */

.servicos-mais {
    margin: 1.4rem 0 0;
    text-align: center;
}

.servicos-mais a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #2d7a7a) 40%, transparent);
    color: var(--theme-accent, #2d7a7a);
    font-weight: 700;
    text-decoration: none;
}

.servicos-mais a:hover { background: color-mix(in srgb, var(--theme-accent, #2d7a7a) 10%, transparent); }

.footer-servicos {
    max-width: 1120px;
    margin: 2.2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.1rem;
    text-align: left;
}

.footer-servicos h4 {
    flex: 1 0 100%;
    margin: 0 0 0.3rem;
    font-size: var(--fs-label, 0.75rem);
    letter-spacing: var(--tracking-label, 0.08em);
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.85;
}

.footer-servicos a {
    color: inherit;
    opacity: 0.8;
    font-size: 0.9rem;
    text-decoration: none;
}

.footer-servicos a:hover { opacity: 1; text-decoration: underline; }