/* ==========================================================================
   Páginas públicas de serviço (frente N5)
   /internet-dedicada/, /ip-fixo-corporativo/, /pabx/, /sip/, /tv/, /telemedicina/, /movel/
   --------------------------------------------------------------------------
   Carregado SÓ nessas sete páginas (bloco extra_css de cada template).

   Mesmo desenho da campanha Outubro Rosa e da Vitrine da home, na paleta da casa
   (ciano + laranja): cantos chanfrados por clip-path, borda ciano fina, painel
   escuro, títulos de card em Orbitron, badge chanfrado, botão de vidro laranja com
   o ícone num círculo branco e botão secundário escuro com borda ciano.
   O hero de página repete o slide Outubro Rosa / Trabalhe Conosco (eyebrow em chip,
   título em caixa alta com destaque, chips de vantagem, botões de vidro).

   Este arquivo é autossuficiente: não depende de home-sections.css (N4) nem de
   gamer-tech-ui.css. Do global usa só tokens.css (--vn-*), bootstrap (container,
   display-5) e gamer-tech-v5.css (eyebrow-tech, section-unified-bg).

   Regras de acessibilidade aplicadas aqui:
   - texto de conteúdo >= 16px no celular; alvos de toque >= 44px;
   - foco visível DENTRO do recorte (o clip-path corta outline e sombra externos,
     então o foco usa sombra interna);
   - painéis sempre escuros com tinta clara fixa (contraste >= 4,5:1);
   - sem animação contínua; transições desligadas com prefers-reduced-motion.
   ========================================================================== */

.svc-page {
    --svc-ciano: var(--vn-neon-blue, #00ffea);
    --svc-laranja: var(--vn-neon-orange, #ff4d1d);
    --svc-laranja-claro: #ff8c69;
    --svc-borda: rgba(0, 255, 234, 0.2);
    --svc-borda-forte: rgba(0, 255, 234, 0.55);
    --svc-painel: rgba(7, 14, 24, 0.82);
    --svc-texto: #ffffff;
    --svc-texto-suave: rgba(232, 241, 255, 0.8);
    --svc-chanfro: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --svc-chanfro-m: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --svc-chanfro-p: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

    position: relative;
    color: var(--svc-texto);
}

/* O tema escuro força títulos brancos e todo span de h2 em ciano com !important
   (site-dark.css). Os textos daqui têm cor própria e fixa, com especificidade maior. */
body .svc-page h1,
body .svc-page h2,
body .svc-page h3 {
    color: var(--svc-texto) !important;
}

body .svc-page .svc-destaque {
    color: var(--svc-ciano) !important;
    text-shadow: 0 0 16px rgba(0, 255, 234, 0.4);
}

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

.svc-page a:not([class]):hover,
.svc-page a:not([class]):focus-visible {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */
.svc-section {
    position: relative;
    scroll-margin-top: 80px;
}

/* Brilho de fundo alternado. As elipses ficam no meio da altura e terminam
   transparentes antes da borda, para não desenhar linha entre as seções. */
.svc-section--alt {
    background:
        radial-gradient(42% 46% at 88% 50%, rgba(0, 255, 234, 0.07) 0%, rgba(0, 255, 234, 0) 100%),
        radial-gradient(36% 42% at 8% 55%, rgba(255, 77, 29, 0.05) 0%, rgba(255, 77, 29, 0) 100%);
}

/* A faixa final fica logo abaixo das perguntas (sem o respiro duplo de duas seções).
   section-unified-bg usa !important no padding, daí o !important aqui. */
.svc-page .svc-section--cta {
    padding-top: 0.5rem !important;
}

/* Título com mais largura (cabe numa linha no desktop); o texto de apoio fica em 700px. */
.svc-cabeca {
    max-width: 840px;
    margin: 0 auto 2rem;
    text-align: center;
}

.svc-cabeca .eyebrow-tech {
    justify-content: center;
    margin-bottom: 0.5rem;
}

.svc-cabeca__titulo {
    margin: 0 0 0.65rem;
    text-wrap: balance;
}

.svc-cabeca__texto {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--svc-texto-suave);
}

/* Evita palavra sozinha na última linha dos textos curtos (no celular era comum). */
.svc-hero__lede,
.svc-cabeca__texto,
.svc-card__texto,
.svc-passo p,
.svc-termo p,
.svc-oferta__texto,
.svc-nota,
.svc-cta__texto,
.svc-cta__extra,
.svc-pergunta__resposta p {
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Hero de página (desenho do slide Outubro Rosa / Trabalhe Conosco)
   -------------------------------------------------------------------------- */
.svc-hero {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4.5vw, 4rem);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid #1a2634;
}

/* Malha do tema + vinheta, a mesma do carrossel. */
.svc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(52% 70% at 82% 30%, rgba(0, 255, 234, 0.1) 0%, rgba(0, 255, 234, 0) 70%),
        radial-gradient(circle at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.75) 125%),
        linear-gradient(90deg, rgba(0, 255, 234, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(0, 255, 234, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    pointer-events: none;
    z-index: -1;
}

/* Faixa diagonal discreta no rodapé do hero (mesma do slide). */
.svc-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0, 255, 234, 0.05) 75%, rgba(255, 77, 29, 0.05) 100%),
        repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 19px 20px);
    pointer-events: none;
    z-index: -1;
}

.svc-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.svc-hero__texto {
    min-width: 0;
}

.svc-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    padding: 8px 14px;
    margin: 0 0 16px;
    border: 1px solid rgba(0, 255, 234, 0.45);
    background: rgba(5, 11, 20, 0.72);
    color: var(--svc-ciano);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    clip-path: var(--svc-chanfro-m);
    box-shadow: 0 0 18px rgba(0, 255, 234, 0.14);
}

.svc-eyebrow__rotulo {
    padding: 3px 7px;
    background: var(--svc-ciano);
    color: #050b14;
    font-size: 0.66rem;
    line-height: 1;
    clip-path: var(--svc-chanfro-p);
}

.svc-hero__titulo {
    max-width: 700px;
    margin: 0 0 16px;
    font-size: clamp(2.4rem, 4.8vw, 4.1rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
    overflow-wrap: break-word;
    text-wrap: balance;
}

.svc-hero__lede {
    max-width: 620px;
    margin: 0 0 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.svc-hero__lede strong {
    color: #ffffff;
}

/* Chips de vantagem (os "itens" do slide). */
.svc-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 250px));
    gap: 10px;
    max-width: 560px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.svc-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.svc-chip i {
    flex: 0 0 auto;
    color: var(--svc-ciano);
    font-size: 1rem;
}

/* Preço do hero (TV), mesmo desenho do bloco de mensalidade do Outubro Rosa. */
.svc-preco {
    margin: 0 0 20px;
}

.svc-preco__rotulo {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(232, 241, 255, 0.78);
}

.svc-preco__valor {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0;
    line-height: 1;
}

.svc-preco__valor span {
    color: var(--svc-ciano);
    font-size: 1rem;
    font-weight: 800;
}

.svc-preco__valor strong {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #ffffff;
}

.svc-preco__nota {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    color: var(--svc-texto-suave);
}

/* Mídia do hero: moldura chanfrada; a legenda fica num painel sólido
   (texto nunca direto sobre a foto). */
.svc-hero__midia {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--svc-borda);
    background: #0a0f1a;
    clip-path: var(--svc-chanfro);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
}

.svc-hero__midia img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alinhada à esquerda em todas as larguras (o hero centraliza o texto até 991px; a legenda
   fica ao lado de um ícone e não pode herdar o centro). */
.svc-hero__legenda {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 12px 16px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 11, 20, 0.86);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.svc-hero__legenda > i {
    flex: 0 0 auto;
    color: var(--svc-ciano);
    font-size: 1.4rem;
}

.svc-hero__legenda strong {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--svc-ciano);
}

.svc-hero__legenda span {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   Botões (os de vidro do slide e da Vitrine)
   -------------------------------------------------------------------------- */
.svc-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.svc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    max-width: 100%;
    padding: 14px 26px;
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.35px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    clip-path: var(--svc-chanfro-m);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.svc-btn--primario {
    border: 1px solid var(--vn-glass-orange-border, #ff4d1d);
    background: var(--vn-glass-orange-bg, linear-gradient(135deg, rgba(255, 77, 29, 0.2), rgba(255, 140, 0, 0.2)));
    color: #ffffff;
    box-shadow: var(--vn-glass-orange-glow, 0 0 20px rgba(255, 77, 29, 0.2));
    text-shadow: var(--vn-glass-text-shadow, 0 0 8px rgba(255, 77, 29, 0.8));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.svc-btn--primario:hover {
    transform: translateY(-3px);
    background: var(--vn-glass-orange-bg-hover, linear-gradient(135deg, rgba(255, 77, 29, 0.32), rgba(255, 140, 0, 0.32)));
    box-shadow: var(--vn-glass-orange-glow-hover, 0 0 28px rgba(255, 77, 29, 0.38));
    color: #ffffff;
}

/* Ícone num círculo branco, como no botão de vidro do slide e da Vitrine. */
.svc-btn--primario > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--svc-laranja);
    font-size: 0.8rem;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 6px 14px rgba(171, 64, 15, 0.18);
}

.svc-btn--secundario {
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(5, 11, 20, 0.6);
    color: #ffffff;
    box-shadow: inset 0 0 18px rgba(0, 255, 234, 0.08);
}

.svc-btn--secundario > i {
    color: var(--svc-ciano);
    font-size: 1.05rem;
}

.svc-btn--secundario:hover {
    transform: translateY(-3px);
    border-color: var(--svc-ciano);
    background: rgba(0, 255, 234, 0.1);
    color: #ffffff;
}

/* O clip-path corta outline e sombra externos: o foco fica por dentro. */
.svc-btn:focus-visible {
    outline: none;
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 0 transparent;
}

.svc-btn--primario:focus-visible {
    background: var(--vn-glass-orange-bg-hover, rgba(255, 77, 29, 0.32));
}

.svc-btn--secundario:focus-visible {
    background: rgba(0, 255, 234, 0.14);
}

/* Link de texto com alvo de 44px (ex.: "Ainda não tem fibra? Ver planos"). */
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.4rem 0.2rem;
    color: var(--svc-ciano);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.svc-link:hover,
.svc-link:focus-visible {
    color: #ffffff;
}

.svc-link:focus-visible {
    outline: 2px solid var(--svc-ciano);
    outline-offset: 3px;
}

.svc-hero__extra {
    margin: 14px 0 0;
}

/* Prende a pontuação ao link que tem texto escondido para leitor de tela: o
   .visually-hidden (posição absoluta) abre um ponto de quebra antes do ":" ou do ".". */
.svc-junto {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cards de benefício / público (forma do mini-card do Outubro Rosa)
   -------------------------------------------------------------------------- */
.svc-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Um card só (ex.: telemedicina sem modalidade no cadastro): centralizado, sem esticar. */
.svc-grade--unico {
    max-width: 420px;
    margin-inline: auto;
}

.svc-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem 1.35rem 1.25rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    clip-path: var(--svc-chanfro);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.svc-card:hover {
    transform: translateY(-3px);
    border-color: var(--svc-borda-forte);
}

.svc-icone {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 255, 234, 0.45);
    background: rgba(0, 255, 234, 0.1);
    color: var(--svc-ciano);
    font-size: 1.3rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.svc-icone--laranja {
    border-color: rgba(255, 77, 29, 0.55);
    background: rgba(255, 77, 29, 0.12);
    color: var(--svc-laranja-claro);
}

.svc-card__corpo {
    min-width: 0;
}

.svc-card__titulo {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
}

.svc-card__texto {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-texto-suave);
}

/* --------------------------------------------------------------------------
   "Em palavras simples": sigla, explicação e exemplo
   -------------------------------------------------------------------------- */
.svc-termo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 1.25rem 1.4rem 1.35rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    clip-path: var(--svc-chanfro);
}

.svc-termo__sigla {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.65rem;
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
}

.svc-termo__nome {
    font-family: var(--vn-font-body, "Barlow", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--svc-ciano);
}

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

.svc-page .svc-termo .svc-termo__exemplo {
    margin-top: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--svc-laranja);
    background: rgba(255, 77, 29, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.svc-termo__exemplo strong {
    color: var(--svc-laranja-claro);
}

/* --------------------------------------------------------------------------
   Como funciona (passos numerados)
   -------------------------------------------------------------------------- */
.svc-passos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-passo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem 1.35rem 1.25rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    clip-path: var(--svc-chanfro);
}

.svc-passo__num {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background: var(--svc-ciano);
    color: #050b14;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.svc-passo__titulo {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.svc-passo p {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-texto-suave);
}

/* --------------------------------------------------------------------------
   Ofertas vindas do cadastro de planos (móvel, telemedicina)
   -------------------------------------------------------------------------- */
.svc-oferta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.2rem 1.4rem 1.4rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    clip-path: var(--svc-chanfro);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.svc-oferta:hover,
.svc-oferta:focus-within {
    transform: translateY(-3px);
    border-color: var(--svc-borda-forte);
}

.svc-oferta--incluso {
    border-color: rgba(0, 255, 234, 0.45);
    background:
        linear-gradient(160deg, rgba(0, 255, 234, 0.08), rgba(0, 255, 234, 0) 60%),
        var(--svc-painel);
}

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

.svc-badge--laranja {
    border-color: rgba(255, 77, 29, 0.6);
    background: rgba(255, 77, 29, 0.12);
    color: var(--svc-laranja-claro);
}

.svc-oferta__titulo {
    margin: 0.75rem 0 0.25rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.svc-oferta__destaque {
    margin: 0.5rem 0 0;
    font-size: clamp(2.4rem, 7vw, 3rem);
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
}

/* Franquia do móvel: rótulo pequeno em cima e o número grande, como a mensalidade. */
.svc-oferta__destaque--topo {
    margin-top: 0.3rem;
}

.svc-oferta__texto {
    margin: 0.4rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-texto-suave);
}

.svc-oferta__lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.svc-oferta__lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--svc-texto-suave);
}

.svc-oferta__lista i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--svc-ciano);
}

/* "Consulte" no lugar do valor: menor que o número (vence .svc-preco__valor strong). */
.svc-preco__valor .svc-preco__consulta {
    font-size: 1.3rem;
    text-transform: uppercase;
}

.svc-oferta__topo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-bottom: 1rem;
}

.svc-oferta .svc-preco {
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Nos cards o botão ocupa a largura toda: menos respiro lateral para "Quero este"
   caber numa linha nas três colunas do tablet. */
.svc-oferta .svc-btn {
    width: 100%;
    margin-top: auto;
    padding-inline: 14px;
}

.svc-oferta__acao {
    padding-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Onde assistir (TV): lojas de aplicativo
   -------------------------------------------------------------------------- */
.svc-lojas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cards da mesma linha com a mesma altura (o da Samsung tem uma linha a mais). */
.svc-lojas > li {
    display: flex;
}

.svc-loja {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 64px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    color: #ffffff;
    text-decoration: none;
    clip-path: var(--svc-chanfro-m);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.svc-loja:hover {
    border-color: var(--svc-borda-forte);
    background: rgba(0, 255, 234, 0.08);
}

.svc-loja:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px #ffffff;
}

/* Loja sem link direto do app (Samsung): card de instrução, sem cara de botão. */
.svc-loja--busca:hover {
    border-color: var(--svc-borda);
    background: var(--svc-painel);
}

/* Nome do aplicativo em destaque no texto ("procure por Vreal Stream"). */
.svc-cabeca__texto strong,
.svc-passo p strong,
.svc-loja__texto span strong {
    color: #ffffff;
}

.svc-loja__icone {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.94);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.svc-loja__icone img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.svc-loja__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.svc-loja__texto strong {
    font-size: 1rem;
    font-weight: 800;
}

.svc-loja__texto span {
    font-size: 1rem;
    color: var(--svc-texto-suave);
}

.svc-loja__seta {
    margin-left: auto;
    color: var(--svc-ciano);
}

.svc-nota {
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-texto-suave);
}

/* Aviso (ex.: emergência na telemedicina): painel com acento laranja. */
.svc-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1.25rem 0 0;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 77, 29, 0.5);
    background: rgba(255, 77, 29, 0.08);
    clip-path: var(--svc-chanfro-m);
}

.svc-aviso > i {
    flex: 0 0 auto;
    color: var(--svc-laranja-claro);
    font-size: 1.35rem;
    line-height: 1.2;
}

.svc-aviso p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.svc-aviso strong {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Perguntas rápidas (details/summary: funciona sem JavaScript)
   -------------------------------------------------------------------------- */
.svc-perguntas {
    display: grid;
    gap: 0.75rem;
    max-width: 860px;
    margin: 0 auto;
}

.svc-pergunta {
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    clip-path: var(--svc-chanfro-m);
}

.svc-pergunta[open] {
    border-color: rgba(0, 255, 234, 0.45);
}

.svc-pergunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.9rem 1.25rem;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.svc-pergunta summary::-webkit-details-marker {
    display: none;
}

.svc-pergunta summary i {
    flex: 0 0 auto;
    color: var(--svc-ciano);
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}

.svc-pergunta[open] summary i {
    transform: rotate(45deg);
}

.svc-pergunta summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px #ffffff;
}

.svc-pergunta__resposta {
    padding: 0 1.25rem 1.15rem;
}

.svc-pergunta__resposta p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--svc-texto-suave);
}

.svc-pergunta__resposta p + p {
    margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   CTA final (faixa de fechamento da Vitrine)
   -------------------------------------------------------------------------- */
.svc-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.1rem 1.75rem;
    padding: 1.6rem 1.75rem 1.6rem 2.1rem;
    border: 1px solid var(--svc-borda);
    background: var(--svc-painel);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    clip-path: var(--svc-chanfro);
}

.svc-cta__acento {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--svc-ciano), var(--svc-laranja));
    box-shadow: 0 0 14px rgba(0, 255, 234, 0.45);
}

.svc-cta__copia {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 62ch;
}

.svc-cta__titulo {
    margin: 0 0 0.35rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.svc-cta__texto {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-texto-suave);
}

.svc-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.svc-cta__extra {
    flex: 1 1 100%;
    margin: 0;
    font-size: 1rem;
    color: var(--svc-texto-suave);
}

/* --------------------------------------------------------------------------
   Responsivo (celular primeiro nas medidas de texto e alvo; grades crescem)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* A nota embaixo de uma grade acompanha o cabeçalho centralizado da seção. */
    .svc-nota {
        text-align: center;
    }

    .svc-grade--2,
    .svc-grade--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* Três ofertas lado a lado já no tablet (com 2 colunas a terceira ficava sozinha). */
    .svc-grade--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

/* Três cards de benefício no tablet: ícone em cima, para o texto usar a largura do card. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .svc-grade--3 .svc-card {
        flex-direction: column;
        gap: 0.85rem;
    }
}

@media (min-width: 992px) {
    .svc-hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3.5rem;
    }

    .svc-grade--3,
    .svc-passos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    /* No desktop o passo vira coluna: número em cima, texto embaixo. */
    .svc-passo {
        flex-direction: column;
        gap: 0.85rem;
        padding: 1.4rem 1.5rem 1.5rem;
    }
}

@media (min-width: 1200px) {
    .svc-grade--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .svc-grade--4 .svc-card {
        flex-direction: column;
        gap: 0.85rem;
    }
}

@media (max-width: 991.98px) {
    .svc-hero {
        text-align: center;
    }

    .svc-hero__titulo,
    .svc-hero__lede {
        margin-inline: auto;
    }

    .svc-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 480px;
        margin-inline: auto;
        gap: 8px;
    }

    .svc-chip {
        min-height: 48px;
        padding: 8px 10px;
        font-size: 1rem;
        text-align: left;
    }

    .svc-hero .svc-preco__valor {
        justify-content: center;
    }

    .svc-acoes {
        justify-content: center;
    }

    .svc-hero__midia {
        max-width: 620px;
        margin-inline: auto;
        aspect-ratio: 16 / 10;
    }

    .svc-cta {
        justify-content: center;
        text-align: center;
    }

    .svc-cta__copia {
        flex-basis: 100%;
        max-width: none;
    }

    .svc-cta__acoes {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .svc-hero {
        padding: 1.75rem 0 2.25rem;
    }

    .svc-eyebrow {
        margin-bottom: 14px;
        padding: 7px 11px;
        font-size: 0.72rem;
    }

    .svc-hero__titulo {
        font-size: clamp(2rem, 9.6vw, 2.6rem);
        margin-bottom: 12px;
    }

    .svc-hero__lede {
        font-size: 1.05rem;
        margin-bottom: 18px;
    }

    .svc-acoes,
    .svc-cta__acoes {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 10px;
    }

    .svc-btn {
        width: 100%;
        min-height: 52px;
        padding: 14px 18px;
        font-size: 0.92rem;
    }

    .svc-hero__legenda {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
    }

    .svc-cabeca {
        margin-bottom: 1.5rem;
    }

    .svc-cabeca__texto {
        font-size: 1.05rem;
    }

    .svc-card,
    .svc-passo,
    .svc-termo,
    .svc-oferta {
        padding: 1.05rem 1.1rem 1.15rem;
    }

    .svc-card {
        gap: 0.85rem;
    }

    .svc-icone {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .svc-pergunta summary {
        padding: 0.85rem 1rem;
        font-size: 1.02rem;
    }

    .svc-pergunta__resposta {
        padding: 0 1rem 1rem;
    }

    .svc-cta {
        padding: 1.3rem 1.1rem 1.35rem 1.35rem;
    }

    .svc-cta__titulo {
        font-size: 1.15rem;
    }
}

/* Sem movimento para quem pediu. */
@media (prefers-reduced-motion: reduce) {
    .svc-page *,
    .svc-page *::before,
    .svc-page *::after {
        transition: none !important;
        animation: none !important;
    }

    .svc-card:hover,
    .svc-oferta:hover,
    .svc-oferta:focus-within,
    .svc-btn:hover,
    .svc-btn:focus-visible {
        transform: none;
    }
}

/* Alto contraste do Windows: os botões e painéis perdem o fundo; a borda devolve o contorno. */
@media (forced-colors: active) {
    .svc-btn,
    .svc-card,
    .svc-passo,
    .svc-termo,
    .svc-oferta,
    .svc-pergunta,
    .svc-cta,
    .svc-loja {
        border: 2px solid ButtonText;
        clip-path: none;
    }
}