/* ============================================================
 * Atendimento (frente N6): FAQ, suporte técnico, reclamações,
 * orçamento, atendimento 24/7 e exclusão de dados.
 * ------------------------------------------------------------
 * Mesma linguagem da seção Outubro Rosa / Vitrine: cabeçalho
 * centrado (eyebrow-tech + display + destaque), cards escuros com
 * canto chanfrado (clip-path), borda ciano fina, badge pequeno,
 * btn-tech laranja. Tudo com prefixo .at- (não mexe no tema global).
 * Celular primeiro; texto de conteúdo >= 16 px; alvos >= 44 px.
 * ============================================================ */

.at-body {
    --at-ciano: var(--vn-neon-blue, #00ffea);
    --at-borda: rgba(0, 255, 234, 0.18);
    --at-borda-forte: rgba(0, 255, 234, 0.5);
    --at-fundo-card: rgba(7, 14, 24, 0.78);
    --at-texto: rgba(232, 241, 255, 0.8);
    --at-texto-suave: rgba(232, 241, 255, 0.72);
    --at-erro: #ff8c69;
    --at-sucesso: #4ff0b5;
    --at-chanfro: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --at-chanfro-p: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ---------- Cabeçalho das páginas ---------- */
.at-hero {
    --section-pad: 2.25rem;
    position: relative;
}

.at-hero + .at-secao {
    --section-pad: 1rem;
    padding-top: 0 !important;
}

.at-secao {
    --section-pad: 2rem;
    position: relative;
    scroll-margin-top: 84px;
}

/* section-unified-bg usa overflow:hidden, o que transforma a seção num contêiner de
   rolagem e quebra o "sticky" da coluna lateral. clip corta igual sem esse efeito. */
.at-secao.section-unified-bg {
    overflow: visible;
    overflow-x: clip;
}

.at-cabeca {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.at-cabeca--secao {
    margin-bottom: 1.5rem;
}

.at-body .at-titulo {
    margin: 0 0 0.75rem;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.at-body .at-titulo .at-destaque,
body.dark-theme .at-titulo span.at-destaque {
    color: var(--at-ciano) !important;
    text-shadow: 0 0 10px rgba(0, 255, 234, 0.4);
}

.at-lede {
    margin: 0 auto;
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--at-texto);
}

.at-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.at-cta .btn-tech,
.at-cta .btn-tech-outline {
    justify-content: center;
    min-height: 52px;
    min-width: 220px;
}

/* O tema estica todo btn-tech até 991 px (width: 100%); no tablet os dois CTAs ficam lado a lado. */
@media (min-width: 576px) {
    .at-cta .btn-tech,
    .at-cta .btn-tech-outline {
        width: auto;
        padding-left: 28px;
        padding-right: 28px;
    }
}

.at-hero__horario {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.25rem auto 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--at-borda);
    background: rgba(0, 255, 234, 0.05);
    color: var(--at-texto);
    font-size: 0.95rem;
    text-align: left;
    clip-path: var(--at-chanfro-p);
}

.at-hero__horario i {
    color: var(--at-ciano);
    margin-top: 0.15rem;
}

.at-escolhido {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem auto 0;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(0, 255, 234, 0.1);
    color: #fff;
    clip-path: var(--at-chanfro-p);
}

.at-escolhido i {
    color: var(--at-ciano);
}

/* ---------- Grade: conteúdo + coluna lateral ---------- */
.at-duas-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.at-coluna-principal,
.at-coluna-lateral {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.at-coluna-estreita {
    max-width: 820px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .at-duas-colunas {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: 2rem;
    }

    .at-coluna-lateral {
        position: sticky;
        top: 96px;
    }
}

/* ---------- Card (mesma forma do vitrine-card) ---------- */
.at-card {
    position: relative;
    display: block;
    padding: 1.4rem;
    border: 1px solid var(--at-borda);
    background: var(--at-fundo-card);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    clip-path: var(--at-chanfro);
    color: var(--at-texto);
}

.at-card--compacto {
    padding: 1.25rem 1.4rem;
}

.at-body .at-card__titulo {
    margin: 0 0 0.6rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.at-texto {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--at-texto);
}

.at-texto:last-child {
    margin-bottom: 0;
}

.at-texto--centro {
    text-align: center;
    margin-top: 1.25rem;
}

.at-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(0, 255, 234, 0.1);
    color: var(--at-ciano);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.at-icone {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 255, 234, 0.45);
    background: rgba(0, 255, 234, 0.1);
    color: var(--at-ciano);
    font-size: 1.2rem;
    clip-path: var(--at-chanfro-p);
}

.at-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--at-ciano);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.at-link:hover,
.at-link:focus-visible {
    color: #fff;
}

.at-card a:not([class]) {
    color: var(--at-ciano);
    text-underline-offset: 3px;
}

.at-botao-largo {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    min-width: 0 !important;
    /* 35 px de cada lado (btn-tech) quebravam "Perguntar no WhatsApp" em 360 px */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ---------- Canais e horários ---------- */
.at-canais__lista {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.at-canal {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--at-texto) !important;
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.at-canal:hover,
.at-canal:focus-visible {
    border-color: var(--at-borda-forte);
    background: rgba(0, 255, 234, 0.06);
}

.at-canal:focus-visible,
.at-canal-card:focus-visible,
.at-atalho-card:focus-visible,
.at-faq__botao:focus-visible,
.at-atalho:focus-visible,
.at-faq__copiar:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Botões chanfrados das páginas de atendimento (CTAs do topo, Enviar dos formulários,
   contatos da exclusão de dados): o clip-path do .btn-tech corta o contorno externo do
   tema (offset +3 px), então aqui o foco fica POR DENTRO do botão. */
body.at-body main .btn-tech:focus-visible,
body.at-body main .btn-tech-outline:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -5px !important;
    box-shadow: none !important;
}

.at-canal__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.at-canal__texto strong {
    color: #fff;
    font-size: 1rem;
}

.at-canal__texto span {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.at-canal__seta {
    color: var(--at-texto-suave);
}

.at-horarios {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.at-horarios__linha dt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.at-horarios__linha dt i {
    color: var(--at-ciano);
}

.at-horarios__linha dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--at-texto);
}

.at-horarios + .at-link {
    margin-top: 0.4rem;
}

.at-horarios--grande {
    border-top: none;
    padding-top: 0.25rem;
    gap: 1rem;
}

.at-horarios--grande .at-horarios__linha {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.at-horarios--grande dd {
    font-size: 1.05rem;
}

.at-horarios--grande .at-link {
    min-height: 44px;
    margin-top: 0.2rem;
}

/* ---------- Dicas e passos ---------- */
.at-dicas {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-dicas li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    font-size: 0.98rem;
    line-height: 1.5;
}

.at-dicas strong {
    display: block;
    color: #fff;
}

.at-passos {
    display: grid;
    gap: 0.45rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.at-passos li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--at-texto);
}

.at-passos__num {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(0, 255, 234, 0.1);
    color: var(--at-ciano);
    font-size: 0.8rem;
    font-weight: 800;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* ---------- Formulários ---------- */
.at-form-card {
    padding: 1.4rem 1.25rem 1.5rem;
}

.at-form-card__cabeca {
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.at-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.at-form__grade {
    display: grid;
    gap: 1.1rem;
}

.at-legenda {
    margin: 0;
    font-size: 0.92rem;
    color: var(--at-texto-suave);
}

.at-obrigatorio {
    color: var(--at-erro);
    font-weight: 700;
}

.at-campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.at-rotulo {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.at-ajuda {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--at-texto-suave);
}

/* O tema escuro pinta todo input com !important (site-dark.css); por isso a especificidade + !important aqui. */
body.dark-theme .at-input,
.at-body .at-input.form-control,
.at-body .at-input.form-select {
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 0.9rem !important;
    /* borda com contraste >= 3:1 sobre o card (WCAG 1.4.11) */
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    font-size: 16px !important; /* sem zoom do iOS */
    line-height: 1.4;
    box-shadow: none !important;
    clip-path: var(--at-chanfro-p);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.dark-theme select.at-input,
.at-body select.at-input.form-select {
    padding-right: 2.5rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ffea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-size: 16px 12px !important;
}

body.dark-theme textarea.at-input {
    min-height: 120px;
    resize: vertical;
}

body.dark-theme .at-input::placeholder {
    color: rgba(232, 241, 255, 0.55);
}

body.dark-theme .at-input:focus {
    border-color: var(--at-ciano) !important;
    box-shadow: inset 0 0 0 2px rgba(0, 255, 234, 0.55) !important;
    outline: none;
}

body.dark-theme .at-input[aria-invalid="true"] {
    border-color: var(--at-erro) !important;
    box-shadow: inset 3px 0 0 var(--at-erro) !important;
}

body.dark-theme .at-input[aria-invalid="true"]:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 140, 105, 0.7) !important;
}

.at-body select.at-input option {
    background: #0d1117;
    color: #fff;
}

.at-erro {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: var(--at-erro);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.at-erro[hidden] {
    display: none;
}

.at-erro i {
    margin-top: 0.15rem;
}

.at-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.at-grupo legend {
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.at-grupo legend + * {
    clear: left;
}

.at-grupo--erro {
    border-color: rgba(255, 140, 105, 0.6);
}

.at-grupo__campos {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.25rem;
}

.at-grupo__campos .at-rotulo {
    font-size: 0.95rem;
}

.at-form__acoes {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.25rem;
}

.at-form__enviar {
    justify-content: center;
    width: 100%;
    min-height: 52px;
}

.at-privacidade {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--at-texto-suave);
}

.at-privacidade i {
    color: var(--at-ciano);
    margin-top: 0.15rem;
}

.at-privacidade a {
    color: var(--at-ciano);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 576px) {
    .at-grupo__campos,
    .at-form__grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .at-form-card {
        padding: 1.75rem 1.75rem 1.9rem;
    }
}

@media (min-width: 768px) {
    .at-form__acoes {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .at-form__enviar {
        width: auto;
        flex: 0 0 auto;
    }

    .at-privacidade {
        max-width: 420px;
    }
}

/* Alertas (sucesso / erro com resumo) */
.at-alerta {
    margin: 0 0 1.1rem;
    padding: 1rem 1.1rem;
    border: 1px solid;
    clip-path: var(--at-chanfro-p);
    color: #fff;
}

.at-alerta:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.at-alerta--erro {
    border-color: rgba(255, 140, 105, 0.7);
    background: rgba(255, 77, 29, 0.1);
}

.at-alerta--sucesso {
    border-color: rgba(79, 240, 181, 0.6);
    background: rgba(79, 240, 181, 0.08);
}

.at-alerta__titulo {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.45;
}

.at-alerta--erro .at-alerta__titulo i {
    color: var(--at-erro);
}

.at-alerta--sucesso .at-alerta__titulo i {
    color: var(--at-sucesso);
}

.at-alerta__texto {
    margin: 0.35rem 0 0 1.6rem;
    color: var(--at-texto);
}

.at-alerta__lista {
    margin: 0.5rem 0 0;
    padding-left: 1.6rem;
}

.at-alerta__lista li {
    margin: 0.2rem 0;
}

.at-alerta__lista a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Número de protocolo: linha própria, sem quebrar no hífen (RCL-XXXX-XXXXXX) e com
   algarismos de largura fixa, para o cliente anotar sem erro no celular. */
.at-protocolo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0.75rem 0 0 1.6rem;
}

.at-protocolo__rotulo {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--at-texto-suave);
}

.at-protocolo__numero {
    display: inline-block;
    max-width: 100%;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(79, 240, 181, 0.55);
    background: rgba(79, 240, 181, 0.1);
    clip-path: var(--at-chanfro-p);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: all;
}

/* Telas bem estreitas (320 px): o número ganha a largura toda do alerta. */
@media (max-width: 399.98px) {
    .at-protocolo,
    .at-protocolo ~ .at-alerta__texto {
        margin-left: 0;
    }

    .at-protocolo__numero {
        font-size: 1.1rem;
        letter-spacing: 0.04em;
    }
}

/* ---------- FAQ: busca, atalhos e lista ---------- */
.at-busca {
    max-width: 640px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.at-busca__rotulo {
    margin-bottom: 0.4rem;
}

.at-busca__caixa {
    position: relative;
}

.at-busca__icone {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--at-ciano);
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 1;
}

body.dark-theme .at-busca__campo {
    min-height: 54px;
    padding-left: 2.75rem !important;
    padding-right: 3.25rem !important;
    border-color: rgba(0, 255, 234, 0.4) !important;
}

.at-busca__campo::-webkit-search-cancel-button {
    display: none;
}

.at-busca__limpar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.at-busca__limpar[hidden] {
    display: none;
}

.at-busca__limpar:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

.at-busca__status {
    min-height: 1.4em;
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--at-texto-suave);
}

.at-atalhos {
    margin: 1rem -0.75rem 0;
}

/* Celular: atalhos numa faixa que rola de lado (sem empurrar as perguntas para baixo). */
.at-atalhos__lista {
    display: flex;
    scroll-padding-inline: 0.75rem;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.75rem 0.5rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.75rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 0.75rem, #000 calc(100% - 1.5rem), transparent 100%);
}

.at-atalhos__lista li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.at-atalho {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(0, 255, 234, 0.35);
    background: rgba(0, 255, 234, 0.06);
    color: #e8f1ff !important;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    clip-path: var(--at-chanfro-p);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.at-atalho:hover,
.at-atalho.is-atual {
    border-color: var(--at-ciano);
    background: rgba(0, 255, 234, 0.16);
    color: #fff !important;
}

.at-atalho.is-vazio {
    opacity: 0.45;
}

@media (min-width: 768px) {
    .at-atalhos {
        margin: 1.25rem 0 0;
    }

    .at-atalhos__lista {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        padding: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.at-faq {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.at-faq__categoria {
    scroll-margin-top: 90px;
}

.at-faq__categoria[hidden] {
    display: none;
}

.at-body .at-faq__categoria-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.at-body .at-faq__categoria-titulo::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    height: 1.1em;
    background: var(--at-ciano);
    box-shadow: 0 0 10px rgba(0, 255, 234, 0.6);
}

/* As classes .accordion/.accordion-item/.accordion-body ficam no HTML só pelo contrato com a
   sincronização da base de conhecimento (ver components/atendimento/faq_lista.html); aqui o
   visual do Bootstrap (borda colada, cantos, padding) é desligado. */
.at-faq .at-faq__lista.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: inherit;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}

.at-faq .at-faq__item.accordion-item {
    margin-bottom: 0.6rem;
    border: 1px solid var(--at-borda);
    border-radius: 0;
    background: var(--at-fundo-card);
    color: inherit;
    clip-path: var(--at-chanfro);
    scroll-margin-top: 90px;
    transition: border-color 0.2s ease;
}

.at-faq .at-faq__texto.accordion-body {
    padding: 0;
}

.at-faq__item[hidden] {
    display: none;
}

.at-faq .at-faq__item.is-aberto,
.at-faq .at-faq__item:focus-within {
    border-color: var(--at-borda-forte);
}

.at-faq .at-faq__item.is-destaque {
    border-color: var(--at-ciano);
    box-shadow: inset 0 0 0 1px var(--at-ciano);
}

.at-body .at-faq__pergunta {
    margin: 0;
    font-family: var(--vn-font-body, "Barlow", sans-serif);
    font-size: 1rem;
}

.at-faq__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.85rem 1.1rem;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.at-faq__botao:hover {
    background: rgba(255, 255, 255, 0.04);
}

.at-faq__botao[aria-expanded="true"] {
    color: var(--at-ciano);
}

.at-faq__seta {
    flex: 0 0 auto;
    color: var(--at-ciano);
    transition: transform 0.2s ease;
}

.at-faq__botao[aria-expanded="true"] .at-faq__seta {
    transform: rotate(180deg);
}

.at-faq__resposta {
    padding: 0 1.1rem 1rem;
}

/* Sem JavaScript as respostas ficam abertas; com JS, só a aberta aparece. */
.at-js .at-faq__item:not(.is-aberto) .at-faq__resposta {
    display: none;
}

.at-faq__texto {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--at-texto);
}

.at-faq__texto p:last-child {
    margin-bottom: 0;
}

.at-faq__texto a {
    color: var(--at-ciano);
}

.at-faq__texto mark,
.at-faq__botao mark {
    padding: 0 0.1em;
    background: rgba(0, 255, 234, 0.25);
    color: #fff;
}

.at-faq__copiar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    margin-top: 0.4rem;
    padding: 0.25rem 0.1rem;
    border: none;
    background: transparent;
    color: var(--at-texto-suave);
    font-size: 0.92rem;
    cursor: pointer;
}

.at-faq__copiar:hover {
    color: var(--at-ciano);
}

.at-faq__copiar.is-copiado {
    color: var(--at-sucesso);
}

.at-faq-vazio[hidden] {
    display: none;
}

/* ---------- Atendimento 24/7: canais, atalhos, fotos ---------- */
.at-grade-canais,
.at-grade-atalhos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-canal-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icone nome"
        "icone valor"
        "icone nota";
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem 1.1rem;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.at-canal-card .at-icone {
    grid-area: icone;
    align-self: center;
}

.at-canal-card__nome {
    grid-area: nome;
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
}

.at-canal-card__valor {
    grid-area: valor;
    color: var(--at-ciano);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.at-canal-card__nota {
    grid-area: nota;
    color: var(--at-texto-suave);
    font-size: 0.92rem;
}

.at-canal-card:hover,
.at-atalho-card:hover {
    border-color: var(--at-borda-forte);
}

.at-atalho-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 76px;
    padding: 1rem 1.1rem;
    color: var(--at-texto) !important;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.at-atalho-card > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.at-atalho-card strong {
    color: #fff;
    font-size: 1.02rem;
}

.at-atalho-card strong + span {
    font-size: 0.95rem;
}

.at-horarios-card {
    padding: 1.5rem;
}

.at-grade-fotos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Foto de ponta a ponta no topo do card (o padding do .at-card no celular não vale aqui). */
.at-card.at-foto-card {
    padding: 0;
    overflow: hidden;
}

.at-foto-card picture {
    display: block;
}

.at-foto-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.at-foto-card__corpo {
    padding: 1.1rem 1.25rem 1.3rem;
}

@media (min-width: 576px) {
    .at-grade-canais,
    .at-grade-atalhos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .at-grade-canais {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .at-grade-atalhos,
    .at-grade-fotos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .at-grade-fotos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .at-hero {
        --section-pad: 3.25rem;
    }
}

/* ---------- Exclusão de dados (form dentro do card da página) ---------- */
.dd-request-form.at-form {
    margin-top: 1.25rem;
}

/* ---------- Celular: texto de apoio que o cliente precisa ler fica em 16 px ---------- */
@media (max-width: 767.98px) {
    .at-legenda,
    .at-ajuda,
    .at-privacidade,
    .at-erro,
    .at-hero__horario,
    .at-canal__texto span,
    .at-atalho,
    .at-busca__status,
    .at-link,
    .at-faq__copiar,
    .at-canal-card__nota,
    .at-horarios__linha dd,
    .at-passos li,
    .at-dicas li,
    .at-atalho-card strong,
    .at-atalho-card strong + span,
    .at-grupo__campos .at-rotulo {
        font-size: 1rem;
    }
}

/* ---------- Celular ---------- */
@media (max-width: 575.98px) {
    .at-hero {
        --section-pad: 1.5rem;
    }

    .at-lede {
        font-size: 1rem;
    }

    .at-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .at-cta .btn-tech,
    .at-cta .btn-tech-outline {
        min-width: 0;
        width: 100%;
    }

    .at-card {
        padding: 1.15rem;
        border-color: rgba(0, 255, 234, 0.32);
    }

    .at-form-card {
        padding: 1.2rem 1rem 1.3rem;
    }

    .at-grupo {
        padding: 0.85rem;
    }

    .at-faq__botao {
        padding: 0.8rem 0.95rem;
    }

    .at-faq__resposta {
        padding: 0 0.95rem 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-faq__seta,
    .at-canal,
    .at-canal-card,
    .at-atalho,
    .at-faq__item {
        transition: none;
    }
}

@media (forced-colors: active) {
    .at-card,
    .at-faq__item,
    .at-input,
    .at-atalho,
    .at-canal {
        border: 1px solid CanvasText;
    }
}