/* ==========================================================================
   Página de produto — Intermedical IVF

   Estrutura de sete regiões que renderizam sempre. A variante (completo,
   padrão, essencial) é decidida no servidor a partir da quantidade real de
   conteúdo e chega como classe no elemento principal.

   Regra que orienta todo o arquivo: quanto MENOS conteúdo o produto tem, mais
   largo e mais espaçado o layout fica. Colunas altas e magras expõem o vazio;
   faixas largas com respiro parecem uma decisão de desenho.
   ========================================================================== */

.intermed-produto {
    font-family: var(--intermed-fonte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--intermed-texto);
}

.intermed-produto *,
.intermed-produto *::before,
.intermed-produto *::after {
    box-sizing: border-box;
}

.intermed-produto :focus-visible {
    outline: 2px solid var(--intermed-petroleo);
    outline-offset: 2px;
    border-radius: 4px;
}

.intermed-container {
    margin: 0 auto;
    max-width: var(--intermed-largura);
    padding: 0 16px;
    width: 100%;
}

.intermed-secao {
    padding: 40px 0;
}

.intermed-secao__titulo {
    color: var(--intermed-petroleo);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Trilha de navegação — hoje em 10px, praticamente ilegível
   -------------------------------------------------------------------------- */

.intermed-breadcrumb {
    padding: 20px 0 0;
}

.intermed-breadcrumb__lista {
    color: var(--intermed-texto-suave);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.intermed-breadcrumb__lista li + li::before {
    content: "›";
    margin-right: 6px;
    opacity: 0.6;
}

.intermed-breadcrumb__lista a {
    color: var(--intermed-texto-suave);
    text-decoration: none;
}

.intermed-breadcrumb__lista a:hover {
    color: var(--intermed-petroleo);
    text-decoration: underline;
}

.intermed-breadcrumb__lista li[aria-current] {
    color: var(--intermed-petroleo);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */

.intermed-hero-produto {
    padding: 24px 0 8px;
}

.intermed-hero-produto__grade {
    display: grid;
    gap: 40px;
    grid-template-columns: 42% 1fr;
}

/* Na variante enxuta as colunas ficam mais equilibradas e a foto ganha mais
   espaço, em vez de sobrar área em branco ao lado de um texto curto. */
.intermed-produto--essencial .intermed-hero-produto__grade {
    grid-template-columns: 46% 1fr;
    gap: 48px;
}

/* A coluna de ações acompanha a rolagem apenas quando há texto longo o
   bastante para justificar — que é exatamente o caso em que hoje sobra mais de
   mil pixels de espaço vazio. */
.intermed-produto--completo .intermed-hero-produto__coluna-media,
.intermed-produto--padrao .intermed-hero-produto__coluna-media {
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    position: sticky;
    top: 96px;
}

.intermed-hero-produto__eyebrow {
    color: var(--intermed-azul);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.intermed-hero-produto__titulo {
    color: var(--intermed-petroleo);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.intermed-hero-produto__texto {
    color: var(--intermed-texto);
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 24px;
}

.intermed-hero-produto__texto p {
    margin: 0 0 14px;
}

.intermed-hero-produto__texto--completo {
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Galeria
   -------------------------------------------------------------------------- */

.intermed-galeria {
    position: relative;
}

.intermed-galeria__principal {
    position: relative;
}

.intermed-moldura--grande {
    border: 1px solid var(--intermed-borda);
    border-radius: var(--intermed-raio);
    padding: 24px;
}

.intermed-galeria__miniaturas {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.intermed-miniatura {
    background: var(--intermed-moldura-fundo);
    border: 2px solid transparent;
    border-radius: var(--intermed-raio-sm);
    cursor: pointer;
    flex: none;
    height: 64px;
    overflow: hidden;
    padding: 4px;
    width: 64px;
}

.intermed-miniatura img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.intermed-miniatura.is-ativa {
    border-color: var(--intermed-petroleo);
}

/* --------------------------------------------------------------------------
   Ações
   -------------------------------------------------------------------------- */

.intermed-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* Os botões são definidos uma única vez, em catalogo.css: eles aparecem
   também nos cartões, na busca sem resultado e no painel do orçamento. */

.intermed-acoes__nota {
    color: var(--intermed-texto-suave);
    font-size: 13px;
    margin: 2px 0 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Ficha de identificação
   -------------------------------------------------------------------------- */

.intermed-fatos {
    border: 1px solid var(--intermed-borda);
    border-radius: var(--intermed-raio);
    margin: 0;
    overflow: hidden;
}

.intermed-fato {
    display: grid;
    gap: 12px;
    grid-template-columns: 40% 1fr;
    padding: 12px 16px;
}

.intermed-fato + .intermed-fato {
    border-top: 1px solid var(--intermed-borda);
}

.intermed-fato:nth-child(odd) {
    background: var(--intermed-moldura-fundo);
}

.intermed-fato__rotulo {
    color: var(--intermed-texto-suave);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.intermed-fato__valor {
    color: var(--intermed-petroleo);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.intermed-fato__valor a {
    color: var(--intermed-azul);
}

.intermed-fato__pendente {
    color: var(--intermed-texto-suave);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Corpo do texto
   -------------------------------------------------------------------------- */

.intermed-secao--corpo .intermed-container {
    display: block;
}

.intermed-secao--com-indice .intermed-container {
    display: grid;
    gap: 40px;
    grid-template-columns: 220px 1fr;
}

.intermed-indice {
    align-self: start;
    position: sticky;
    top: 96px;
}

.intermed-indice__titulo {
    color: var(--intermed-texto-suave);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.intermed-indice__lista {
    border-left: 2px solid var(--intermed-borda);
    list-style: none;
    margin: 0;
    padding: 0;
}

.intermed-indice__lista a {
    color: var(--intermed-texto-suave);
    display: block;
    font-size: 14px;
    padding: 6px 0 6px 14px;
    text-decoration: none;
}

.intermed-indice__lista a:hover {
    color: var(--intermed-petroleo);
}

.intermed-corpo {
    max-width: 760px;
}

/* A descrição vem de um editor visual e traz marcação herdada: fontes e
   tamanhos embutidos que destoariam do restante da página. Estas regras
   neutralizam esse estilo sem alterar o conteúdo cadastrado. */
.intermed-descricao {
    font-size: 16px;
    line-height: 1.7;
}

.intermed-descricao [style*="font-family"],
.intermed-descricao [style*="font-size"],
.intermed-descricao font {
    font-family: inherit !important;
    font-size: inherit !important;
}

.intermed-descricao h2,
.intermed-descricao h3 {
    color: var(--intermed-petroleo);
    font-size: 20px;
    font-weight: 800;
    margin: 32px 0 12px;
    scroll-margin-top: 100px;
}

.intermed-descricao p {
    margin: 0 0 14px;
}

.intermed-descricao ul,
.intermed-descricao ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.intermed-descricao li {
    margin-bottom: 8px;
}

.intermed-descricao img {
    height: auto;
    max-width: 100%;
}

/* Tabelas vindas do editor rolam dentro do próprio bloco, para que a página
   nunca role na horizontal. */
.intermed-descricao table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.intermed-descricao blockquote {
    background: var(--intermed-ciano-claro);
    border-left: 4px solid var(--intermed-azul);
    border-radius: 0 var(--intermed-raio-sm) var(--intermed-raio-sm) 0;
    color: var(--intermed-petroleo);
    font-size: 17px;
    font-weight: 600;
    margin: 24px 0;
    padding: 18px 22px;
}

.intermed-descricao blockquote p:last-child {
    margin-bottom: 0;
}

/* Itens escritos como "Rótulo: valor" viram ficha técnica de duas colunas —
   é o que faz uma lista com marcadores passar a parecer especificação. */
.intermed-ficha__item {
    display: grid;
    gap: 4px 16px;
    grid-template-columns: 34% 1fr;
    list-style: none;
    margin-left: -22px;
    padding: 10px 0;
}

.intermed-ficha__item + .intermed-ficha__item {
    border-top: 1px solid var(--intermed-borda);
}

.intermed-ficha__rotulo {
    color: var(--intermed-petroleo);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Vídeo
   -------------------------------------------------------------------------- */

.intermed-video-cartao {
    align-items: center;
    background: var(--intermed-moldura-fundo);
    border: 1px solid var(--intermed-borda);
    border-radius: var(--intermed-raio);
    color: var(--intermed-petroleo);
    display: flex;
    gap: 16px;
    max-width: 480px;
    padding: 18px 22px;
    text-decoration: none;
}

.intermed-video-cartao__play {
    align-items: center;
    background: var(--intermed-azul);
    border-radius: 50%;
    color: var(--intermed-branco);
    display: flex;
    flex: none;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.intermed-video-cartao__texto {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.intermed-video-cartao__texto small {
    color: var(--intermed-texto-suave);
    font-size: 13px;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Documentação
   -------------------------------------------------------------------------- */

/* Com poucos documentos os cartões mantêm a largura de coluna em vez de
   esticar para preencher a faixa inteira. */
.intermed-documentos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    list-style: none;
    margin: 0;
    max-width: 900px;
    padding: 0;
}

.intermed-documento {
    background: var(--intermed-branco);
    border: 1px solid var(--intermed-borda);
    border-radius: var(--intermed-raio);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.intermed-documento--fispq {
    border-color: var(--intermed-ouro);
}

/* Ícone em traço, no mesmo peso visual do restante da interface: o círculo
   funciona como suporte, e o desenho fica em linha e não preenchido. */
.intermed-documento__icone {
    align-items: center;
    background: var(--intermed-moldura-fundo);
    border: 1px solid var(--intermed-borda);
    border-radius: 50%;
    color: var(--intermed-petroleo);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-bottom: 14px;
    width: 44px;
}

.intermed-documento--fispq .intermed-documento__icone {
    background: var(--intermed-ouro-fundo);
    border-color: var(--intermed-ouro);
    color: var(--intermed-ouro-texto);
}

.intermed-documento__titulo {
    color: var(--intermed-petroleo);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
}

.intermed-documento__texto {
    color: var(--intermed-texto-suave);
    font-size: 14px;
    margin: 0 0 16px;
}

.intermed-documento__acao {
    color: var(--intermed-azul);
    font-weight: 700;
    margin-top: auto;
    text-decoration: none;
}

.intermed-documento__meta {
    color: var(--intermed-texto-suave);
    font-size: 13px;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Faixa institucional
   -------------------------------------------------------------------------- */

.intermed-institucional {
    border-top: 1px solid var(--intermed-borda);
}

.intermed-institucional__lista {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.intermed-institucional__marca {
    color: var(--intermed-azul);
    display: block;
    margin-bottom: 8px;
}

.intermed-institucional__titulo {
    color: var(--intermed-petroleo);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}

.intermed-institucional__texto {
    color: var(--intermed-texto-suave);
    font-size: 14px;
    margin: 0;
}

.intermed-institucional--expandido {
    background: var(--intermed-moldura-fundo);
    padding: 48px 0;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .intermed-hero-produto__grade,
    .intermed-produto--essencial .intermed-hero-produto__grade {
        gap: 28px;
        grid-template-columns: 1fr;
    }

    /* Sem duas colunas não há espaço vazio a preencher, e a coluna fixa só
       atrapalharia a leitura. */
    .intermed-produto--completo .intermed-hero-produto__coluna-media,
    .intermed-produto--padrao .intermed-hero-produto__coluna-media {
        max-height: none;
        overflow: visible;
        position: static;
    }

    .intermed-secao--com-indice .intermed-container {
        display: block;
    }

    .intermed-indice {
        display: none;
    }

    .intermed-documentos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .intermed-documentos,
    .intermed-institucional__lista {
        grid-template-columns: 1fr;
    }

    .intermed-fato {
        gap: 2px;
        grid-template-columns: 1fr;
    }

    .intermed-ficha__item {
        grid-template-columns: 1fr;
        margin-left: -22px;
    }

    .intermed-secao {
        padding: 28px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intermed-produto * {
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Compatibilidade com o construtor visual

   Ver a nota equivalente em catalogo.css: a tipografia global do site é
   aplicada como classe somada a elemento, o que vence regras escritas apenas
   com classe. Sem estas declarações o título do produto sai com 47px em vez de
   34px, o título de seção com 18px em vez de 24px, e os parágrafos da descrição
   ganham peso e cor de destaque, prejudicando a leitura do texto técnico.
   ========================================================================== */

.intermed-produto h1,
.intermed-produto h2,
.intermed-produto h3,
.intermed-produto p,
.intermed-produto ul,
.intermed-produto ol,
.intermed-produto li,
.intermed-produto dl,
.intermed-produto dt,
.intermed-produto dd {
    font-family: var(--intermed-fonte);
}

.intermed-produto .intermed-hero-produto__eyebrow {
    color: var(--intermed-azul);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.4;
    margin: 0 0 8px;
}

.intermed-produto .intermed-hero-produto__titulo {
    color: var(--intermed-petroleo);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
}

.intermed-produto .intermed-secao__titulo {
    color: var(--intermed-petroleo);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 20px;
}

.intermed-produto .intermed-documento__titulo {
    color: var(--intermed-petroleo);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}

.intermed-produto .intermed-institucional__titulo {
    color: var(--intermed-petroleo);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
}

.intermed-produto .intermed-hero-produto__texto,
.intermed-produto .intermed-hero-produto__texto p {
    color: var(--intermed-texto);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
}

.intermed-produto .intermed-hero-produto__texto--completo,
.intermed-produto .intermed-hero-produto__texto--completo p {
    font-size: 16px;
}

.intermed-produto .intermed-documento__texto,
.intermed-produto .intermed-institucional__texto {
    color: var(--intermed-texto-suave);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.intermed-produto .intermed-acoes__nota {
    color: var(--intermed-texto-suave);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    margin: 2px 0 0;
}

.intermed-produto .intermed-fato__rotulo {
    color: var(--intermed-texto-suave);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.intermed-produto .intermed-fato__valor {
    color: var(--intermed-petroleo);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.intermed-produto .intermed-indice__titulo {
    color: var(--intermed-texto-suave);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    margin: 0 0 10px;
}

.intermed-produto .intermed-indice__lista a,
.intermed-produto .intermed-breadcrumb__lista a {
    font-family: var(--intermed-fonte);
    font-weight: inherit;
}

/* Ver a nota em catalogo.css: links no repouso herdam 14px da tipografia
   global, e não do contexto onde estão. */
.intermed-produto .intermed-documento__acao {
    font-size: 15px;
    font-weight: 700;
}

.intermed-produto .intermed-fato__valor a {
    font-size: inherit;
    font-weight: inherit;
}

.intermed-produto .intermed-descricao a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* A descrição vem do editor e é o texto que o cliente realmente lê. A
   tipografia global do site a deixaria maior, mais pesada e colorida, o que
   confunde o corpo do texto com um destaque. */
.intermed-produto .intermed-descricao p,
.intermed-produto .intermed-descricao li {
    color: var(--intermed-texto);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.intermed-produto .intermed-descricao h2,
.intermed-produto .intermed-descricao h3 {
    color: var(--intermed-petroleo);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    margin: 32px 0 12px;
}

.intermed-produto .intermed-descricao blockquote,
.intermed-produto .intermed-descricao blockquote p {
    color: var(--intermed-petroleo);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
}

.intermed-produto .intermed-ficha__rotulo {
    color: var(--intermed-petroleo);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Botão que copia o e-mail
   -------------------------------------------------------------------------- */

.intermed-copiar {
    position: relative;
}

.intermed-copiar__icone {
    display: inline-flex;
    flex: none;
    opacity: 0.7;
}

.intermed-copiar .intermed-botao__rotulo {
    overflow-wrap: anywhere;
}

/* Enquanto a confirmação aparece, o botão veste o verde de sucesso — o mesmo
   das mensagens de envio concluído. Em tom claro, e não preenchido: o botão é
   discreto por escolha, e um bloco verde cheio faria a ação de menor
   prioridade virar, por um segundo, a mais chamativa da coluna. */
a.intermed-copiar.is-copiado,
a.intermed-copiar.is-copiado:hover,
a.intermed-copiar.is-copiado:focus {
    background: rgba(59, 148, 70, 0.12);
    border-color: rgba(59, 148, 70, 0.35);
    color: var(--intermed-verde);
}

.intermed-copiar.is-copiado .intermed-copiar__icone {
    opacity: 1;
}