/* Seção Outubro Rosa.
   A forma vem dos componentes globais da Vitrine (vitrine-card, vitrine-mini,
   vitrine-badge, eyebrow-tech, display-5, btn-tech). Este arquivo só:
     1) troca o ciano/laranja da casa pelo rosa da campanha, dentro de .sor-section;
     2) acomoda ícone + texto no lugar da foto dos mini-cards;
     3) adiciona o bloco de preço do card.
   Não redefinir aqui fonte, cantos, espaçamento ou formato de botão. */

.sor-section {
    --sor-rosa: #ff4f9a;
    --sor-rosa-claro: #ff8cc0;
    --sor-rosa-borda: rgba(255, 79, 154, 0.3);

    background:
        radial-gradient(48% 60% at 88% 18%, rgba(255, 79, 154, 0.14) 0%, rgba(255, 79, 154, 0) 70%),
        radial-gradient(40% 55% at 6% 88%, rgba(216, 27, 115, 0.12) 0%, rgba(216, 27, 115, 0) 70%);
    scroll-margin-top: 80px;
}

/* Cores: o mesmo componente, em rosa. */
.sor-section .eyebrow-tech {
    color: var(--sor-rosa-claro) !important;
    text-shadow: 0 0 10px rgba(255, 79, 154, 0.5);
}

/* O tema escuro pinta todo span de h2 de ciano com !important
   (body.dark-theme h2 span); daí o !important e a especificidade maior aqui. */
body .sor-section h2 span.home-feature__accent {
    color: var(--sor-rosa-claro) !important;
    text-shadow: 0 0 10px rgba(255, 79, 154, 0.4);
}

.sor-section .vitrine-card,
.sor-section .vitrine-mini {
    border-color: var(--sor-rosa-borda);
}

.sor-section .vitrine-card:hover,
.sor-section .vitrine-card:focus-within,
.sor-section .vitrine-mini:hover,
.sor-section .vitrine-mini:focus-within {
    border-color: rgba(255, 79, 154, 0.6);
}

.sor-section .vitrine-badge {
    border-color: rgba(255, 79, 154, 0.55);
    background: rgba(255, 79, 154, 0.12);
    color: var(--sor-rosa-claro) !important;
}

.sor-section .vitrine-card__features li i {
    color: var(--sor-rosa);
}

.sor-section .btn-tech {
    background: var(--sor-rosa);
    color: #1a0711 !important;
    box-shadow: 0 5px 15px rgba(255, 79, 154, 0.25);
}

.sor-section .btn-tech:hover,
.sor-section .btn-tech:focus-visible {
    background: #ff6aab;
    color: #1a0711 !important;
    box-shadow: 0 10px 25px rgba(255, 79, 154, 0.45);
}

/* Foco de teclado: contorno INTERNO escuro, como nas outras seções da home
   (.home-bloco em css/home-sections.css). O clip-path do .btn-tech corta tudo o
   que fica por fora do botão — o contorno branco e o anel de foco globais do
   gamer-tech-v5 sumiam, e só o fundo mudava (rosa → rosa claro, ~1,2:1). */
.sor-section .btn-tech:focus-visible {
    outline: 2px solid #1a0711;
    outline-offset: -6px;
    box-shadow: 0 10px 25px rgba(255, 79, 154, 0.45);
}

/* Mini-cards de cuidado: ícone no lugar da foto. */
.sor-cuidados {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sor-section .sor-cuidado {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
}

.sor-cuidado__icone {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 79, 154, 0.45);
    background: rgba(255, 79, 154, 0.12);
    color: var(--sor-rosa);
    font-size: 1.3rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.sor-cuidado__corpo p {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    color: rgba(232, 241, 255, 0.75);
    /* Sem palavra sozinha na última linha (ex.: "saúde." em 360 px). */
    text-wrap: pretty;
}

.sor-fonte {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(232, 241, 255, 0.7);
}

.sor-fonte a,
.sor-plano__link {
    color: var(--sor-rosa-claro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "site do INCA" não se parte em duas linhas no celular. */
.sor-fonte a {
    white-space: nowrap;
}

.sor-fonte a:hover,
.sor-fonte a:focus-visible,
.sor-plano__link:hover,
.sor-plano__link:focus-visible {
    color: #fff;
}

/* Card do plano. */
.sor-plano .vitrine-card__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

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

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

.sor-preco__valor span {
    color: var(--sor-rosa-claro);
    font-weight: 800;
}

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

.sor-preco__valor--consulta {
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
}

.sor-plano__cta {
    margin-top: 1.1rem;
}

.sor-plano__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.4rem;
    font-size: 0.92rem;
}

/* Tablet: o card do plano ocupa a largura toda; o botão volta ao tamanho do
   texto (o gamer-tech-v5 estica todo .btn-tech abaixo de 992 px). */
@media (min-width: 576px) and (max-width: 991.98px) {
    .sor-section .sor-plano__cta {
        width: auto;
        align-self: flex-start;
    }
}

/* Celular: texto de conteúdo com 16 px (o .lead do cabeçalho fica em
   css/home-sections.css, junto com o das outras seções). */
@media (max-width: 575.98px) {
    .sor-cuidado__corpo p,
    .sor-fonte,
    .sor-plano__link {
        font-size: 1rem;
    }
}

/* Alto contraste do Windows: o botão cheio perde o fundo; a borda devolve o contorno. */
@media (forced-colors: active) {
    .sor-section .btn-tech {
        border: 2px solid ButtonText;
    }
}