/* ============================================================
 * Seções de destaque: home (abaixo dos planos) e as páginas
 * /tv/, /telemedicina/ e /movel/, que também carregam este arquivo
 * (classes .home-feature*, .tech-card dentro de .home-feature e
 * .vitrine__more — não renomear sem conferir essas três páginas).
 * ------------------------------------------------------------
 * Substitui tv-internet-fibra.css + section-health.css + os
 * estilos inline dos templates. Reusa o kit do gamer-tech-v5
 * (.section-gamer, .eyebrow-tech, .tech-card, .tech-icon-box,
 * .tech-feature-list, .hud-badge) e os tokens de tokens.css.
 * Mobile primeiro: imagem com aspect-ratio (nada de altura fixa)
 * e conteúdo antes da imagem em telas pequenas.
 * ============================================================ */

.home-feature {
    position: relative;
    padding: 4rem 0;
}

.home-feature .container {
    position: relative;
    z-index: 2;
}

.home-feature__accent {
    color: var(--vn-neon-blue, #00ffea);
    text-shadow: 0 0 10px rgba(0, 255, 234, 0.4);
}

/* Card de mídia: proporção fluida no lugar dos 500px fixos. */
.home-feature__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border: 1px solid rgba(0, 255, 234, 0.16);
    border-radius: 16px;
    background: var(--vn-bg-dark, #0a0f1a);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

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

/* Legenda sobre a imagem: badge no topo, título embaixo. */
.home-feature__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(5, 11, 20, 0) 40%, rgba(5, 11, 20, 0.88) 100%);
    pointer-events: none;
}

.home-feature__caption-title {
    display: block;
    margin: 0 0 0.2rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.home-feature__caption-text {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(232, 241, 255, 0.75);
}

/* Cards de benefício: borda neutra única (a cor fica no ícone). */
.home-feature .tech-card {
    border-color: rgba(0, 255, 234, 0.2);
    background: rgba(5, 11, 20, 0.6);
    height: 100%;
}

.home-feature .tech-card--orange {
    border-color: rgba(255, 77, 29, 0.3);
}

.home-feature .tech-card h3,
.home-feature .tech-card .h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.home-feature .tech-icon-box--cyan {
    color: var(--vn-neon-blue, #00ffea);
}

.home-feature .tech-icon-box--orange {
    color: var(--vn-neon-orange, #ff4d1d);
}

.home-feature .tech-feature-list {
    border-left-color: var(--vn-neon-orange, #ff4d1d);
}

.home-feature .tech-feature-item i {
    color: var(--vn-neon-blue, #00ffea);
}

/* Mobile: proporção mais compacta e legenda enxuta. */
@media (max-width: 991.98px) {
    .home-feature {
        padding: 3rem 0;
    }

    .home-feature__media {
        aspect-ratio: 4 / 3;
    }

    .home-feature__caption {
        padding: 1rem;
    }

    .home-feature__caption-title {
        font-size: 1.05rem;
    }

    .home-feature__caption-text {
        font-size: 0.8rem;
    }
}



/* ============================================================
 * Componentes das seções da home abaixo dos planos
 * (Outubro Rosa, Vitrine, Soluções Corporativas, Sobre o cliente
 * e Localização)
 * ------------------------------------------------------------
 * Vocabulário: .vitrine__header (eyebrow-tech + display-5 com
 * .home-feature__accent + lead), .vitrine-card, .vitrine-mini,
 * .vitrine-badge, .vitrine__more e .btn-tech em vidro (.home-bloco).
 * Regra de acessibilidade: texto NUNCA sobre a foto — sempre em
 * painel sólido.
 *
 * Cada seção tem o seu CSS em static/components/section_<nome>/css/
 * (fundo, grade e detalhes próprios), carregado de dentro do template
 * da seção — depois de todo o <head>, como no Outubro Rosa.
 *
 * Cores de texto: o tema escuro pinta `body.dark-theme .section-gamer p`
 * com !important; por isso as cores de texto daqui usam
 * `body.dark-theme .home-bloco ...` (especificidade maior).
 * ============================================================ */

.vitrine__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.25rem;
}

/* Quebra de linha: títulos equilibrados (nada de "mais" ou "casa" sozinho na
   última linha em 360 px) e textos sem palavra órfã. Navegador sem suporte
   ignora e quebra como antes. */
.vitrine__header .display-5,
.vitrine__header .lead,
.vitrine-card__title,
.vitrine-mini__title,
.secao-faixa__titulo {
    text-wrap: balance;
}

.vitrine-card__text,
.vitrine-mini__text,
.vitrine-card__features li,
.secao-faixa__sub {
    text-wrap: pretty;
}

.vitrine__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1rem;
    align-items: stretch;
}

.vitrine__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Cantos chanfrados + borda ciano IGUAIS aos cards de plano
   (.plano-card: border rgba(0,255,234,0.18), clip-path polygon 15px,
   fundo rgba(7,14,24,0.75)). O clip-path corta os cantos do card — por
   isso a mídia tem chanfro próprio e o badge vive DENTRO do padding do
   painel, longe das quinas recortadas. */
.vitrine-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(0, 255, 234, 0.18);
    border-radius: 0;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    background: rgba(7, 14, 24, 0.75);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.vitrine-card:hover,
.vitrine-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 234, 0.55);
    box-shadow: 0 30px 60px rgba(0, 255, 234, 0.2);
}

.vitrine-card__media {
    position: relative;
    margin: 0;
    flex: 1 1 auto;
    min-height: 260px;
    overflow: hidden;
    background: #0a1220;
    /* Acompanha o chanfro superior do card pra a foto não vazar a quina. */
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}

.vitrine-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--vitrine-foco, 50%) 50%;
}

.vitrine-card__panel {
    flex: 0 0 auto;
    /* Padding >= 15px nas laterais e na base: badge, título e botão nunca
       alcançam os cantos recortados do card. */
    padding: 1.15rem 1.4rem 1.4rem;
    background: transparent;
}

.vitrine-card__title {
    margin: 0.7rem 0 0.4rem;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.vitrine-card__text {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(232, 241, 255, 0.78);
}

.vitrine-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vitrine-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.98rem;
    line-height: 1.4;
}

.vitrine-card__features li i {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--vn-neon-blue, #00ffea);
}

.vitrine-card__cta {
    align-self: flex-start;
    margin-top: 1.35rem;
    min-height: 48px;
}

/* Rodapé do card grande: preço "a partir de" + CTA na mesma linha. */
.vitrine-card__rodape {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vitrine-card__rodape .vitrine-card__cta {
    margin-top: 0;
}

.vitrine-preco {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.vitrine-preco__rotulo {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vitrine-preco__valor {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
}

.vitrine-preco__valor span {
    font-weight: 800;
}

.vitrine-preco__valor strong {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 900;
}

/* Mini-card horizontal: foto à esquerda, painel sólido à direita. */
.vitrine-mini {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid rgba(0, 255, 234, 0.18);
    border-radius: 0;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    background: rgba(7, 14, 24, 0.75);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.vitrine-mini:hover,
.vitrine-mini:focus-within {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 234, 0.55);
    box-shadow: 0 26px 52px rgba(0, 255, 234, 0.18);
}

.vitrine-mini__media {
    position: relative;
    margin: 0;
    flex: 0 0 38%;
    min-height: 100%;
    overflow: hidden;
    background: #0a1220;
    /* Chanfra só o canto superior-esquerdo (junto com o card). */
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}

.vitrine-mini__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--vitrine-foco, 50%) 50%;
}

.vitrine-mini__panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.2rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.vitrine-mini__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.vitrine-mini__title {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.vitrine-mini__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.vitrine-mini__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 0.3rem;
}

/* Mini-card com ícone no lugar da foto (atalhos). O título é um link que
   cobre o card inteiro (::after), então o card todo é clicável e o foco
   continua num elemento só. */
.vitrine-mini--icone {
    position: relative;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
}

.vitrine-mini__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);
    font-size: 1.3rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.vitrine-mini__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vitrine-mini__seta {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.vitrine-mini--icone:hover .vitrine-mini__seta,
.vitrine-mini--icone:focus-within .vitrine-mini__seta {
    transform: translateX(3px);
}

.vitrine-mini__link {
    color: inherit;
    text-decoration: none;
}

.vitrine-mini__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vitrine-mini__link:hover,
.vitrine-mini__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vitrine-mini__link:focus-visible {
    outline: 2px solid var(--vn-neon-blue, #00ffea);
    outline-offset: 3px;
}

body.dark-theme .home-bloco .vitrine-mini__icone i,
body.dark-theme .home-bloco .vitrine-mini__seta {
    color: var(--vn-neon-blue, #00ffea) !important;
}

body.dark-theme .home-bloco .vitrine-mini__link {
    color: #ffffff !important;
}

/* Badges: factuais e legíveis (informação de venda, não decoração).
   inline-flex + align-self:flex-start = encolhe ao conteúdo. Pequeno
   chanfro pra combinar com o tema. */
.vitrine-badge {
    align-self: flex-start;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(0, 255, 234, 0.1);
    color: var(--vn-neon-blue, #00ffea) !important;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.vitrine-badge--orange {
    border-color: rgba(255, 77, 29, 0.6);
    background: rgba(255, 77, 29, 0.12);
    color: #ff8c69 !important;
}

/* Link textual secundário ("Saiba mais"). Também usado em /tv/ — a base
   fica como estava; o ajuste das seções da home vem em .home-bloco. */
.vitrine__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.5rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vn-neon-blue, #00ffea);
    text-decoration: none;
}

.vitrine__more:hover,
.vitrine__more:focus-visible {
    color: #ffffff !important;
    text-decoration: underline;
}

.vitrine__more:focus-visible {
    outline: 2px solid var(--vn-neon-blue, #00ffea);
    outline-offset: 3px;
    border-radius: 2px;
}

.home-bloco .vitrine__more {
    gap: 0.35rem;
    font-size: 0.9rem;
    text-underline-offset: 3px;
}

/* Faixa de fechamento de seção: texto + ações (Soluções Corporativas). */
.secao-faixa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
    padding: 1.15rem 1.5rem 1.15rem 1.75rem;
    border: 1px solid rgba(0, 255, 234, 0.18);
    background: rgba(7, 14, 24, 0.75);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* Acento ciano→laranja na borda esquerda (dentro do padding, longe da quina). */
.secao-faixa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    background: linear-gradient(180deg, var(--vn-neon-blue, #00ffea), var(--vn-neon-orange, #ff4d1d));
    box-shadow: 0 0 14px rgba(0, 255, 234, 0.45);
}

.secao-faixa__texto {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 60ch;
}

.secao-faixa__titulo {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
}

.secao-faixa__sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.secao-faixa__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ---------- Cores de texto (vencem o tema escuro) ---------- */
body.dark-theme .home-bloco .vitrine-card__title,
body.dark-theme .home-bloco .vitrine-mini__title,
body.dark-theme .home-bloco .secao-faixa__titulo,
body.dark-theme .home-bloco .vitrine-preco__valor strong {
    color: #ffffff !important;
}

body.dark-theme .home-bloco .vitrine-card__text,
body.dark-theme .home-bloco .vitrine-mini__text,
body.dark-theme .home-bloco .vitrine-card__features li,
body.dark-theme .home-bloco .secao-faixa__sub {
    color: rgba(232, 241, 255, 0.8) !important;
}

body.dark-theme .home-bloco .vitrine-preco__rotulo {
    color: rgba(232, 241, 255, 0.7) !important;
}

body.dark-theme .home-bloco .vitrine-preco__valor span,
body.dark-theme .home-bloco .vitrine-card__features li i,
body.dark-theme .home-bloco .vitrine__more {
    color: var(--vn-neon-blue, #00ffea) !important;
}

body.dark-theme .home-bloco .vitrine__more:hover,
body.dark-theme .home-bloco .vitrine__more:focus-visible {
    color: #ffffff !important;
}

/* ---------- Botões de vidro das seções (.home-bloco) ----------
   PRIMÁRIO: laranja vidro (nunca laranja sólido). SECUNDÁRIO
   (.btn-tech--ciano): vidro ciano. Chanfro e formato vêm do .btn-tech
   base (gamer-tech-v5). O foco usa outline INTERNO: o clip-path do
   botão cortaria um outline externo. */
body.dark-theme .home-bloco .btn-tech {
    /* O gamer-tech-v5 deixa todo .btn-tech com 100% de largura abaixo de 992 px;
       nas seções, a largura total é decidida caso a caso (celular). */
    width: auto;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.7rem 1.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    background: var(--vn-glass-orange-bg);
    border: 1px solid var(--vn-glass-orange-border);
    color: #fff !important;
    box-shadow: var(--vn-glass-orange-glow);
    text-shadow: var(--vn-glass-text-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.dark-theme .home-bloco .btn-tech:hover,
body.dark-theme .home-bloco .btn-tech:focus-visible {
    background: var(--vn-glass-orange-bg-hover);
    box-shadow: var(--vn-glass-orange-glow-hover);
    transform: translateY(-2px);
    color: #fff !important;
}

body.dark-theme .home-bloco .btn-tech:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -6px;
}

/* Ícone (primeiro <i>): chip circular branco. */
body.dark-theme .home-bloco .btn-tech > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--vn-neon-orange, #ff4d1d) !important;
    font-size: 0.76rem;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 6px 14px rgba(171, 64, 15, 0.18);
}

body.dark-theme .home-bloco .btn-tech.btn-tech--ciano {
    background: linear-gradient(135deg, rgba(0, 255, 234, 0.16) 0%, rgba(5, 11, 20, 0.62) 60%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(0, 255, 234, 0.62);
    box-shadow: 0 0 0 1px rgba(0, 255, 234, 0.08), 0 0 18px rgba(0, 255, 234, 0.14);
    text-shadow: 0 0 8px rgba(0, 255, 234, 0.45);
}

body.dark-theme .home-bloco .btn-tech.btn-tech--ciano:hover,
body.dark-theme .home-bloco .btn-tech.btn-tech--ciano:focus-visible {
    background: linear-gradient(135deg, rgba(0, 255, 234, 0.28) 0%, rgba(5, 11, 20, 0.66) 60%, rgba(255, 255, 255, 0.07) 100%);
    box-shadow: 0 0 0 1px rgba(0, 255, 234, 0.16), 0 0 26px rgba(0, 255, 234, 0.3);
}

body.dark-theme .home-bloco .btn-tech.btn-tech--ciano > i:first-child {
    color: #036b64 !important;
    box-shadow: 0 6px 14px rgba(0, 120, 110, 0.2);
}

/* Botão compacto dos mini-cards: ainda >= 44px de alvo. */
body.dark-theme .home-bloco .vitrine-mini__actions .btn-tech {
    width: auto;
    min-height: 44px;
    padding: 0.55rem 1.05rem;
    font-size: 0.8rem;
}

/* Separador entre seções: um fio de luz no topo (no lugar do losango). */
.home-bloco::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: min(1100px, 88%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(0, 255, 234, 0.3), transparent);
    pointer-events: none;
}

/* ---------- Notebook pequeno (992–1199 px) ----------
   Com 7fr/5fr a coluna dos mini-cards fica estreita (~380 px), os mini-cards
   crescem para baixo e a foto da fibra estica junto. Meio a meio equilibra. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .vitrine__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vitrine-mini__media {
        flex-basis: 34%;
    }
}

/* ---------- Tablet e celular ---------- */
@media (max-width: 991.98px) {
    .vitrine__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vitrine-card__media {
        min-height: 0;
        flex: none;
        aspect-ratio: 16 / 9;
    }

    /* Sem o stretch do grid (coluna única), flex-basis 0 colapsaria o
       mini-card a zero — altura própria só no card com foto (o de ícone,
       como os do Outubro Rosa, fica do tamanho do texto). */
    .vitrine-mini {
        flex: none;
    }

    .vitrine-mini--foto {
        min-height: 150px;
    }

    .vitrine-mini__media {
        flex-basis: 34%;
    }
}

/* Tablet: card grande "deitado" (foto à esquerda, painel à direita), para a
   foto não ocupar meia tela de altura numa coluna só. Abaixo de 768 px o
   painel ficaria estreito demais (< 300 px): o card volta a ficar em pé. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .vitrine-card--deitado {
        flex-direction: row;
    }

    .vitrine-card--deitado .vitrine-card__media {
        flex: 0 0 42%;
        aspect-ratio: auto;
        min-height: 100%;
    }

    .vitrine-card--deitado .vitrine-card__panel {
        flex: 1 1 auto;
        min-width: 0;
        align-self: center;
    }
}

/* Celular (360–575 px): nada pode estourar a largura; texto de conteúdo >= 16 px
   (ficam menores só rótulos de ação — botões e "Saiba mais" —, badges, sigla da UF
   e as unidades "R$" e "/mês" ao lado do preço). */
@media (max-width: 575.98px) {
    .vitrine__header {
        margin-bottom: 1.5rem;
    }

    /* Borda dos cards mais visível no celular (a 0.18 some em tela pequena). */
    .vitrine-card,
    .vitrine-mini {
        border-color: rgba(0, 255, 234, 0.35);
    }

    .vitrine__grid,
    .vitrine__col {
        gap: 0.85rem;
    }

    .vitrine-mini {
        min-height: 0;
    }

    .vitrine-card__panel {
        padding: 1rem 1.1rem 1.2rem;
    }

    .vitrine-card__title {
        font-size: 1.2rem;
    }

    .vitrine-card__text,
    .vitrine-card__features li,
    .vitrine-mini__text,
    .secao-faixa__sub {
        font-size: 1rem;
    }

    /* O gamer-tech-v5 (N1) baixa todo .section-gamer .lead para 0.95rem
       (15,2 px) no celular; aqui, só nas seções da frente N4, volta a 16 px. */
    .home-bloco .vitrine__header .lead,
    .sor-section .vitrine__header .lead {
        font-size: 1rem;
    }

    .vitrine-card__rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .vitrine-card__cta,
    body.dark-theme .home-bloco .vitrine-card__cta {
        width: 100%;
    }

    /* Mini-card com foto vira "objeto de mídia": miniatura quadrada ao lado
       do badge + título; texto e ações embaixo, na largura toda. */
    .vitrine-mini--foto {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem 0.9rem;
        min-height: 0;
        padding: 0.9rem 0.95rem 0.8rem;
    }

    .vitrine-mini--foto .vitrine-mini__media {
        grid-column: 1;
        grid-row: 1;
        width: 92px;
        min-height: 0;
        aspect-ratio: 1;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    .vitrine-mini--foto .vitrine-mini__panel {
        display: contents;
    }

    .vitrine-mini--foto .vitrine-mini__head {
        grid-column: 2;
        grid-row: 1;
    }

    .vitrine-mini--foto .vitrine-mini__text,
    .vitrine-mini--foto .vitrine-mini__actions {
        grid-column: 1 / -1;
    }

    .vitrine-mini--foto .vitrine-mini__actions {
        margin-top: 0;
        justify-content: space-between;
    }

    .secao-faixa {
        flex-direction: column;
        align-items: stretch;
        padding: 1.1rem 1.1rem 1.15rem 1.35rem;
    }

    .secao-faixa__acoes {
        flex-direction: column;
    }

    body.dark-theme .home-bloco .secao-faixa__acoes .btn-tech {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vitrine-card,
    .vitrine-mini {
        transition: none;
    }

    .vitrine-card:hover,
    .vitrine-card:focus-within,
    .vitrine-mini:hover,
    .vitrine-mini:focus-within,
    body.dark-theme .home-bloco .btn-tech:hover,
    body.dark-theme .home-bloco .btn-tech:focus-visible {
        transform: none;
    }
}

/* Alto contraste do Windows: o vidro some; a borda devolve o contorno. */
@media (forced-colors: active) {
    body.dark-theme .home-bloco .btn-tech {
        border: 2px solid ButtonText;
    }
}