/* ============================================================
   AMPARO VIDA — páginas comerciais, blog e componentes novos
   Carregado depois de styles.css. O arquivo original fica intacto:
   é o que está em produção hoje e não vale o risco de reescrever.
   ============================================================ */

:root {
    /* Medida do texto de leitura. ~75 caracteres por linha é onde o olho
       volta para o começo da próxima linha sem se perder. */
    --artigo-largura: 46rem;
    --artigo-corpo: 1.125rem;
    --artigo-entrelinha: 1.8;

    --raio: 14px;
    --raio-g: 20px;
    --sombra-1: 0 1px 2px rgba(28, 78, 128, .06), 0 4px 16px rgba(28, 78, 128, .06);
    --sombra-2: 0 2px 4px rgba(28, 78, 128, .08), 0 12px 32px rgba(28, 78, 128, .10);

    --tinta-suave: rgba(28, 78, 128, .06);
    --borda-suave: rgba(28, 78, 128, .10);
}

/* ---------- Acessibilidade ---------- */

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: .75rem 1.25rem;
    background: var(--primary-dark);
    color: var(--white);
    border-radius: 0 0 var(--raio) 0;
    font-weight: 600;
}

.pular-para-conteudo:focus {
    left: 0;
    color: var(--white);
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- WhatsApp flutuante ---------- */

.whatsapp-flutuante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
    transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), box-shadow .2s ease-out;
}

.whatsapp-flutuante svg { width: 30px; height: 30px; }
.whatsapp-flutuante:hover { transform: scale(1.08); color: #fff; box-shadow: 0 8px 26px rgba(37, 211, 102, .5); }
.whatsapp-flutuante:active { transform: scale(.96); }

@media (min-width: 768px) {
    .whatsapp-flutuante { right: 2rem; bottom: 2rem; width: 62px; height: 62px; }
    .whatsapp-flutuante svg { width: 34px; height: 34px; }
}

/* ---------- Tag reutilizável ---------- */

.frente-tag,
.article-category {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--accent-green);
    color: #14330a;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---------- Home: as três frentes ---------- */

.frentes { padding: 4rem 0; }

.frentes-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .frentes-grid { grid-template-columns: repeat(3, 1fr); }
}

.frente-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 2rem;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-g);
    background: var(--white);
    box-shadow: var(--sombra-1);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease-out, border-color .25s ease-out;
}

.frente-card h3 { margin: 0; font-size: 1.375rem; }
.frente-card p { margin: 0; color: var(--text-light); flex: 1; }

.frente-link {
    font-weight: 700;
    color: var(--primary-light);
    transition: gap .2s ease-out;
}

.frente-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: rgba(155, 197, 61, .5);
}

/* ---------- Página de serviço: hero ---------- */

.servico-hero {
    padding: 10rem 0 4rem;
    background:
        radial-gradient(90rem 40rem at 70% -20%, rgba(155, 197, 61, .13), transparent 60%),
        linear-gradient(180deg, #fbfdf8 0%, var(--white) 100%);
}

@media (min-width: 1024px) { .servico-hero { padding: 13rem 0 5rem; } }

.servico-hero-conteudo { max-width: 46rem; }
.servico-hero-conteudo h1 { margin: 1rem 0; font-size: clamp(2rem, 6vw, 3.25rem); }

.servico-hero-sub {
    font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.servico-hero-nota {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--text-light);
}

/* ---------- Página de serviço: seções numeradas ---------- */

.servico-secao { padding: 3.5rem 0; }
.servico-secao-alt { background: #fafcf7; }

.servico-secao-conteudo {
    max-width: var(--artigo-largura);
    margin: 0 auto;
}

.servico-secao-numero {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(155, 197, 61, .55);
    letter-spacing: -.03em;
}

.servico-secao h2 {
    margin: .5rem 0 1.25rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.servico-secao p {
    font-size: var(--artigo-corpo);
    line-height: var(--artigo-entrelinha);
    color: #3c4a5a;
}

.servico-secao strong { color: var(--primary-dark); }

.servico-secao-artigo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--accent-green);
    border-radius: 0 var(--raio) var(--raio) 0;
    background: var(--tinta-suave);
}

.servico-secao-artigo-rotulo {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-green-dark);
}

.servico-secao-artigo-titulo { font-weight: 600; }

/* ---------- Página de serviço: bloco de plantões ----------
   Fundo no mesmo tom das seções alternadas, para separar do hero branco e da
   seção 01 que vem logo abaixo. O destaque azul repete o gradiente do CTA
   final e da caixa de missão da home — é a mesma família visual. */

.plantoes {
    padding: 4rem 0;
    background: #fafcf7;
    border-top: 1px solid var(--borda-suave);
    border-bottom: 1px solid var(--borda-suave);
}

.plantoes-cabecalho {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.plantoes-rotulo {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-green-dark);
}

.plantoes-cabecalho h2 {
    margin: .6rem 0 1rem;
    font-size: clamp(1.625rem, 4.4vw, 2.375rem);
    line-height: 1.2;
}

.plantoes-titulo-destaque { display: block; color: var(--accent-green-dark); }

.plantoes-cabecalho p {
    margin: 0;
    font-size: var(--artigo-corpo);
    line-height: 1.7;
    color: #3c4a5a;
}

/* nowrap: "de 4 a 24 / horas" partido em duas linhas perde o destaque */
.plantoes-cabecalho strong { color: var(--primary-dark); white-space: nowrap; }

.plantoes-cartao {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    max-width: 64rem;
    margin: 0 auto;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-g);
    background: var(--white);
    box-shadow: var(--sombra-1);
}

@media (min-width: 860px) {
    .plantoes-cartao { grid-template-columns: 5fr 7fr; }
}

.plantoes-horas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #16406b 100%);
    color: var(--white);
}

.plantoes-horas-numero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.plantoes-horas-rotulo {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}

.plantoes-horas-faixa {
    margin: .25rem 0 .35rem;
    font-size: clamp(3.75rem, 11vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--white);
}

.plantoes-horas-a {
    font-size: .45em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent-green);
}

.plantoes-horas-texto {
    max-width: 22rem;
    margin: 0 auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.plantoes-itens {
    list-style: none;
    margin: 0;
    padding: .5rem 1.5rem;
}

@media (min-width: 860px) {
    .plantoes-itens { padding: 1rem 2.5rem; }
}

.plantoes-item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 0;
}

.plantoes-item + .plantoes-item { border-top: 1px solid var(--borda-suave); }

.plantoes-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(155, 197, 61, .16);
    color: var(--accent-green-dark);
}

.plantoes-icone svg { width: 26px; height: 26px; }

.plantoes-item h3 { margin: 0 0 .35rem; font-size: 1.125rem; }

.plantoes-item p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-light);
}

.plantoes-ajuda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 48rem;
    margin: 2rem auto 0;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(155, 197, 61, .3);
    border-radius: var(--raio-g);
    background: var(--white);
}

@media (min-width: 720px) {
    .plantoes-ajuda {
        flex-direction: row;
        justify-content: space-between;
        padding: 1.5rem 2rem;
        text-align: left;
    }
}

.plantoes-ajuda-titulo { margin: 0 0 .2rem; font-weight: 700; color: var(--primary-dark); }
.plantoes-ajuda-texto { margin: 0; font-size: .9375rem; color: var(--text-light); }

/* ---------- Página de serviço: CTA final ---------- */

.servico-cta { padding: 4rem 0; }

.servico-cta-caixa {
    max-width: var(--artigo-largura);
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    border-radius: var(--raio-g);
    background: linear-gradient(135deg, var(--primary-dark) 0%, #16406b 100%);
    color: var(--white);
}

.servico-cta-caixa h2 { color: var(--white); }
.servico-cta-caixa p { color: rgba(255, 255, 255, .88); }

.btn-grande { padding: 1.1rem 2.25rem; font-size: 1.0625rem; }

.servico-cta-alternativa {
    margin: 1.25rem 0 0;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .8);
}

.servico-cta-alternativa a {
    color: var(--accent-green);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Aviso médico ---------- */

.aviso-medico {
    display: block;
    max-width: var(--artigo-largura);
    margin: 0 auto 3rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--borda-suave);
    border-radius: var(--raio);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* ---------- Cartões de artigo ---------- */

.blog-home { padding: 4rem 0; background: #fafcf7; }

.artigos-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) { .artigos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .artigos-grid { grid-template-columns: repeat(3, 1fr); } }

.artigo-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-g);
    background: var(--white);
    box-shadow: var(--sombra-1);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease-out;
}

.artigo-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.artigo-card-img { aspect-ratio: 5 / 3; overflow: hidden; background: var(--bg-light); }

.artigo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.artigo-card:hover .artigo-card-img img { transform: scale(1.04); }

.artigo-card-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: 1.5rem;
    flex: 1;
}

.artigo-card-corpo h3 { margin: 0; font-size: 1.1875rem; line-height: 1.35; }
.artigo-card-corpo p { margin: 0; font-size: .9375rem; color: var(--text-light); flex: 1; }

.artigo-card-meta { font-size: .8125rem; color: var(--text-light); }

/* ---------- Artigo ---------- */

.article-header {
    padding: 9rem 0 3rem;
    background:
        radial-gradient(70rem 30rem at 30% -10%, rgba(69, 144, 201, .12), transparent 60%),
        linear-gradient(180deg, #f7fafd 0%, var(--white) 100%);
}

@media (min-width: 1024px) { .article-header { padding: 12rem 0 3rem; } }

.article-header__content {
    max-width: var(--artigo-largura);
    margin: 0 auto 2.5rem;
    text-align: center;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.article-reading-time { font-size: .875rem; color: var(--text-light); }

.article-title { font-size: clamp(1.875rem, 5.5vw, 3rem); margin-bottom: 1rem; }

.article-subtitle {
    font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.article-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.author-image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-light);
}

.author-info { text-align: left; }
.author-name { display: block; font-weight: 700; }
.article-date { font-size: .875rem; color: var(--text-light); }

.article-image {
    max-width: 56rem;
    margin: 0 auto;
    border-radius: var(--raio-g);
    overflow: hidden;
    box-shadow: var(--sombra-2);
}

.article-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.article-content { padding: 3rem 0 4rem; }

.article-body {
    max-width: var(--artigo-largura);
    margin: 0 auto;
    font-size: var(--artigo-corpo);
    line-height: var(--artigo-entrelinha);
    color: #3c4a5a;
}

.article-intro {
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--primary-dark);
    margin-bottom: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--tinta-suave);
    border-left: 4px solid var(--primary-light);
    border-radius: 0 var(--raio) var(--raio) 0;
}

.article-body h2 {
    font-size: clamp(1.375rem, 3.6vw, 1.875rem);
    margin: 3rem 0 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--accent-green);
}

.article-body h3 { font-size: 1.3125rem; margin: 2rem 0 .75rem; }
.article-body p { margin-bottom: 1.35rem; }
.article-body strong { color: var(--primary-dark); }

.article-body a {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-list { margin: 1.5rem 0; padding-left: 1.5rem; list-style: none; }
.article-list li { margin-bottom: .75rem; line-height: 1.6; }

/* As cores das caixas são semânticas de propósito — âmbar = dado,
   verde = alívio, vermelho = risco. O leitor decodifica isso antes de ler,
   então elas não seguem a paleta da marca. */
.highlight-box,
.success-box,
.warning-box {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--raio);
    border: 1px solid;
}

.highlight-box { background: #fff8e6; border-color: #f5dfa6; }
.highlight-box h4, .highlight-box p { color: #6b5209; }

.success-box { background: #eaf7ec; border-color: #b9e2c1; }
.success-box h4, .success-box p, .success-box li { color: #15532a; }

.warning-box { background: #fdecec; border-color: #f3c2c2; }
.warning-box h4, .warning-box p, .warning-box li { color: #7a1f1f; }

.highlight-box h4, .success-box h4, .warning-box h4 {
    margin-bottom: .6rem;
    font-size: 1.0625rem;
}

.highlight-box p:last-child,
.success-box p:last-child,
.warning-box p:last-child { margin-bottom: 0; }

.article-cta {
    margin: 3rem 0 2rem;
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: var(--raio-g);
    background: linear-gradient(135deg, var(--primary-dark) 0%, #16406b 100%);
    color: var(--white);
}

.article-cta h3 { color: var(--white); }
.article-cta p { color: rgba(255, 255, 255, .88); }

.article-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda-suave);
}

.article-share { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; }

.share-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--borda-suave);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary-dark);
    cursor: pointer;
    transition: background .2s ease-out, color .2s ease-out, transform .2s cubic-bezier(.34, 1.4, .64, 1);
}

.share-btn:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); }
.share-btn svg { width: 18px; height: 18px; }

/* ---------- Índice do blog ---------- */

.blog-topo {
    padding: 9rem 0 2.5rem;
    text-align: center;
    background: linear-gradient(180deg, #f7fafd 0%, var(--white) 100%);
}

@media (min-width: 1024px) { .blog-topo { padding: 12rem 0 3rem; } }

.blog-topo p { max-width: 40rem; margin: 0 auto; color: var(--text-light); }
.blog-lista { padding: 2rem 0 4rem; }

/* ---------- Submenu de Serviços ---------- */

.nav-item-com-submenu { position: relative; }

.nav-link-submenu {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
}

.nav-seta {
    width: 11px;
    height: 8px;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.nav-link-submenu[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }

.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu-link {
    display: block;
    font-weight: 500;
    color: var(--primary-dark);
}

.submenu-link:hover,
.nav-link-submenu:hover { color: var(--accent-green-dark); }

.nav-link-ativo { color: var(--accent-green-dark); font-weight: 700; }

/* Desktop: painel flutuante */
@media (min-width: 1024px) {
    .submenu {
        position: absolute;
        top: calc(100% + .75rem);
        left: 50%;
        translate: -50% 0;
        min-width: 17rem;
        padding: .5rem;
        border: 1px solid var(--borda-suave);
        border-radius: var(--raio);
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        box-shadow: var(--sombra-2);

        /* Fechado: sem interação e fora do fluxo de foco.
           visibility (e não só opacity) para o link não continuar clicável. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .18s ease-out, transform .18s cubic-bezier(.22, 1, .36, 1), visibility .18s;
    }

    .nav-item-com-submenu:hover .submenu,
    .nav-item-com-submenu:focus-within .submenu,
    .nav-link-submenu[aria-expanded="true"] + .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Ponte invisível entre o botão e o painel — sem ela o menu fecha
       quando o mouse atravessa o vão. */
    .nav-item-com-submenu::after {
        content: "";
        position: absolute;
        inset: 100% 0 auto 0;
        height: .75rem;
    }

    .submenu-link {
        padding: .65rem .85rem;
        border-radius: 8px;
        font-size: .9375rem;
        transition: background .15s ease-out;
    }

    .submenu-link:hover { background: var(--tinta-suave); }
}

/* Mobile: acordeão dentro do menu aberto */
@media (max-width: 1023px) {
    .submenu {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .25s cubic-bezier(.22, 1, .36, 1);
    }

    .submenu > li { overflow: hidden; }

    .nav-link-submenu[aria-expanded="true"] + .submenu { grid-template-rows: 1fr; }

    .submenu-link {
        display: block;
        padding: .7rem 0 .7rem 1rem;
        min-height: 44px;
        border-left: 2px solid var(--borda-suave);
        font-size: .9375rem;
    }
}

/* ---------- Diferenciais: 2x2 ----------
   O auto-fit com minmax(280px) do styles.css dava 3 numa linha e 1 sozinha
   no iPad, o que fica torto com quatro cards. Duas colunas fixas resolvem em
   qualquer largura acima do celular. */
@media (min-width: 640px) {
    .differentials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* <picture> é inline e não tem largura própria, então o `width: 100%` do
   .footer-logo resolvia para zero e o logo sumia. display:contents tira o
   wrapper do layout e deixa o <img> ser dimensionado pelo bloco do rodapé. */
.footer-block picture { display: contents; }

/* Página 404 */
.erro-codigo {
    font-size: clamp(3.5rem, 14vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent-green);
    margin-bottom: .5rem;
}