/* ==========================================================
   GUIA DE PRIMEIROS CUIDADOS
   Usa os tokens do style.css (cores, raios, sombras, tema escuro)
========================================================== */

:root{
    --guia-ok:#38747c;
    --guia-ok-bg:rgba(56,116,124,.10);
    --guia-alerta:#bb533a;
    --guia-alerta-bg:rgba(187,83,58,.08);
}

body.tema-escuro{
    --guia-ok:#5fb0ba;
    --guia-ok-bg:rgba(95,176,186,.08);
    --guia-alerta:#e88064;
    --guia-alerta-bg:rgba(232,128,100,.07);
}

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

.guia-hero{
    position:relative;
    overflow:hidden;
    padding:150px 32px 40px;
}

.guia-hero-inner{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

.guia-hero h1{
    font-size:clamp(40px,6vw,74px);
    line-height:.98;
    letter-spacing:-3px;
    color:var(--heading);
    margin-bottom:22px;
}

.guia-parabens{
    font-size:22px;
    font-weight:600;
    color:var(--accent-text);
    margin-bottom:14px;
}

.guia-intro{
    max-width:640px;
    margin:0 auto;
    color:var(--text-secondary);
    font-size:18px;
    line-height:1.7;
}

.guia-hero-acoes{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px;
}

.guia-hero-acoes button.btn{
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
}

.guia-resumo{
    max-width:1000px;
    margin:52px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.guia-resumo div{
    padding:20px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    transition:transform .4s var(--ease), border-color .35s ease, box-shadow .35s ease;
}

.guia-resumo div:hover{
    transform:translateY(-4px);
    border-color:var(--border-primary);
    box-shadow:var(--shadow-blue);
}

.guia-resumo i{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:14px;
    margin-bottom:14px;
    font-size:19px;
    color:var(--accent-text);
    background:rgba(112,164,189,.13);
}

.guia-resumo strong{
    display:block;
    font-size:17px;
    color:var(--text);
    margin-bottom:3px;
}

.guia-resumo span{
    font-size:13.5px;
    color:var(--text-secondary);
}

/* ---------- Layout com índice ---------- */

.guia-layout{
    max-width:1100px;
    margin:60px auto 0;
    padding:0 32px;
    display:grid;
    grid-template-columns:240px 1fr;
    gap:40px;
    align-items:start;
}

.guia-indice{
    position:sticky;
    top:100px;
    padding:22px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(18px);
}

.guia-indice-titulo{
    font-size:12px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--accent-text);
    margin-bottom:14px;
}

.guia-indice nav{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.guia-indice a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:500;
    color:var(--text-secondary);
    transition:background-color .3s ease, color .3s ease, transform .35s var(--ease);
}

.guia-indice a span{
    font-size:11px;
    font-weight:800;
    color:var(--text-muted);
    min-width:18px;
    transition:color .3s ease;
}

.guia-indice a:hover{
    color:var(--accent-text);
    transform:translateX(3px);
}

.guia-indice a.ativo{
    color:var(--accent-text);
    background:rgba(112,164,189,.12);
}

.guia-indice a.ativo span{
    color:var(--accent-text);
}

.guia-conteudo{
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
}

/* ---------- Blocos ---------- */

.guia-bloco{
    position:relative;
    scroll-margin-top:100px;
    padding:34px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
}

.guia-bloco > p{
    color:var(--text-secondary);
    font-size:16.5px;
    line-height:1.75;
    margin-bottom:14px;
}

.guia-bloco > p:last-child{
    margin-bottom:0;
}

.guia-bloco strong{
    color:var(--text);
}

.guia-bloco-topo{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
}

.guia-icone{
    flex-shrink:0;
    width:60px;
    height:60px;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:26px;
    color:#fff;
    background:linear-gradient(135deg,#0d64c9,#004ea9);
    box-shadow:0 10px 24px rgba(0,78,169,.28);
}

.guia-num{
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.6px;
    color:var(--accent-text);
    margin-bottom:4px;
}

.guia-bloco h2{
    font-size:clamp(24px,3vw,30px);
    line-height:1.1;
    letter-spacing:-1px;
    color:var(--heading);
}

/* bloco "muito importante" */

.guia-bloco-importante{
    border-color:var(--border-primary);
}

.guia-bloco-importante::before{
    content:"";
    position:absolute;
    top:0;
    left:34px;
    right:34px;
    height:3px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,#0d64c9,var(--logo-accent));
}

.guia-selo{
    position:absolute;
    top:24px;
    right:24px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--guia-alerta);
    background:var(--guia-alerta-bg);
    border:1px solid currentColor;
}

/* destaque azul */

.guia-destaque{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    margin-bottom:16px;
    border-radius:16px;
    border:1px solid var(--border-primary);
    background:rgba(112,164,189,.10);
}

.guia-destaque i{
    font-size:22px;
    color:var(--accent-text);
    flex-shrink:0;
}

.guia-destaque p{
    font-size:16.5px;
    line-height:1.6;
    color:var(--text);
}

.guia-nota{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:15px !important;
}

.guia-nota i{
    color:var(--accent-text);
    margin-top:3px;
}

/* ---------- Troca de ração ---------- */

.racao-etapas{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:22px 0 14px;
}

.racao-etapa{
    padding:16px;
    border-radius:16px;
    border:1px solid var(--border);
    background:var(--surface-light);
}

body.tema-escuro .racao-etapa{
    background:rgba(255,255,255,.03);
}

.racao-dias{
    display:block;
    font-size:13px;
    font-weight:800;
    color:var(--accent-text);
    margin-bottom:12px;
}

.racao-barra{
    display:flex;
    height:30px;
    border-radius:9px;
    overflow:hidden;
    margin-bottom:12px;
    font-size:11.5px;
    font-weight:800;
}

.racao-barra span{
    display:grid;
    place-items:center;
    color:#fff;
    min-width:0;
}

.racao-barra .antiga{
    flex:1;
    background:#8a9aa3;
}

.racao-barra .nova{
    flex:0 0 var(--nova);
    background:linear-gradient(135deg,#0d64c9,#004ea9);
}

body.tema-escuro .racao-barra .antiga{
    background:#3a4550;
}

.racao-etapa p{
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-secondary);
}

.racao-legenda{
    display:flex;
    gap:18px;
    margin-bottom:18px;
    font-size:13px;
    color:var(--text-secondary);
}

.racao-legenda span{
    display:flex;
    align-items:center;
    gap:7px;
}

.ponto{
    width:10px;
    height:10px;
    border-radius:3px;
}

.ponto.antiga{ background:#8a9aa3; }
.ponto.nova{ background:#0d64c9; }
body.tema-escuro .ponto.antiga{ background:#3a4550; }

/* ---------- Use x Evite ---------- */

.guia-comparar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:6px 0 14px;
}

.guia-sim,
.guia-nao{
    padding:20px;
    border-radius:18px;
    border:1px solid;
}

.guia-sim{
    background:var(--guia-ok-bg);
    border-color:color-mix(in srgb, var(--guia-ok) 35%, transparent);
}

.guia-nao{
    background:var(--guia-alerta-bg);
    border-color:color-mix(in srgb, var(--guia-alerta) 35%, transparent);
}

.guia-sim > span,
.guia-nao > span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.guia-sim > span{ color:var(--guia-ok); }
.guia-nao > span{ color:var(--guia-alerta); }

.guia-sim > span i,
.guia-nao > span i{
    width:24px;
    height:24px;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:13px;
}

.guia-sim > span i{ background:var(--guia-ok); }
.guia-nao > span i{ background:var(--guia-alerta); }

.guia-sim p,
.guia-nao p,
.guia-sim li,
.guia-nao li{
    color:var(--text-secondary);
    font-size:15px;
    line-height:1.6;
}

.guia-sim ul,
.guia-nao ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.guia-sim li::before,
.guia-nao li::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    margin-right:10px;
    vertical-align:middle;
}

.guia-sim li::before{ background:var(--guia-ok); }
.guia-nao li::before{ background:var(--guia-alerta); }

/* ---------- Lista com ícones ---------- */

.guia-lista{
    list-style:none;
    display:grid;
    gap:10px;
}

.guia-lista li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface-light);
    color:var(--text-secondary);
    font-size:15.5px;
    line-height:1.5;
    transition:transform .35s var(--ease), border-color .35s ease;
}

body.tema-escuro .guia-lista li{
    background:rgba(255,255,255,.03);
}

.guia-lista li:hover{
    transform:translateX(5px);
    border-color:var(--border-primary);
}

.guia-lista i{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:17px;
    color:var(--accent-text);
    background:rgba(112,164,189,.13);
}

/* ---------- Tags ---------- */

.guia-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:6px;
}

.guia-tags span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border-radius:999px;
    font-size:13.5px;
    font-weight:600;
    color:var(--text-secondary);
    background:rgba(112,164,189,.10);
    border:1px solid var(--border);
}

.guia-tags i{
    color:var(--accent-text);
}

/* ---------- Alerta ---------- */

.guia-alerta{
    padding:22px;
    border-radius:18px;
    background:var(--guia-alerta-bg);
    border:1px solid color-mix(in srgb, var(--guia-alerta) 40%, transparent);
}

.guia-alerta-topo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    color:var(--guia-alerta);
    font-size:17px;
}

.guia-alerta-topo i{
    font-size:22px;
}

.guia-alerta-topo strong{
    color:var(--guia-alerta) !important;
}

.guia-alerta p{
    color:var(--text-secondary);
    line-height:1.7;
    font-size:15.5px;
}

.guia-alerta ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
    margin:12px 0 14px;
}

.guia-alerta li{
    padding:7px 13px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:var(--guia-alerta);
    background:var(--surface-solid);
    border:1px solid color-mix(in srgb, var(--guia-alerta) 30%, transparent);
}

.guia-btn-alerta{
    margin-top:18px;
    background:var(--guia-alerta);
    color:#fff;
    box-shadow:0 10px 24px color-mix(in srgb, var(--guia-alerta) 30%, transparent);
}

.guia-btn-alerta:hover{
    transform:translateY(-3px);
}

/* ---------- Final ---------- */

.guia-final{
    max-width:900px;
    margin:80px auto 110px;
    padding:56px 40px;
    text-align:center;
    border-radius:34px;
    border:1px solid var(--border-primary);
    background:
        linear-gradient(135deg, rgba(112,164,189,.22), rgba(255,255,255,.92)),
        var(--surface-solid);
    box-shadow:var(--shadow);
}

body.tema-escuro .guia-final{
    background:
        linear-gradient(135deg, rgba(112,164,189,.18), rgba(18,18,18,.9)),
        var(--surface-solid);
}

.guia-final .cta-icon{
    margin:0 auto 22px;
}

.guia-final .section-label{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
}

.guia-final .section-label::before,
.guia-final .section-label::after{
    content:"";
    width:30px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--logo-accent));
}

.guia-final .section-label::after{
    transform:scaleX(-1);
}

.guia-final h2{
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-2px;
    color:var(--heading);
    margin-bottom:16px;
}

.guia-final > p:not(.section-label){
    max-width:620px;
    margin:0 auto 12px;
    color:var(--text-secondary);
    font-size:17px;
    line-height:1.7;
}

.guia-final-desejo{
    font-weight:600;
    color:var(--accent-text) !important;
}

.guia-final-botoes{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:28px;
}

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

@media(max-width:1050px){

    .guia-resumo{
        grid-template-columns:repeat(2,1fr);
    }

    .guia-layout{
        grid-template-columns:minmax(0,1fr);
        gap:22px;
        padding:0 24px;
    }

    /* índice vira faixa de chips que acompanha a rolagem */
    .guia-indice{
        top:70px;
        z-index:10;
        padding:10px;
        border-radius:16px;
        min-width:0;
    }

    .guia-indice-titulo{
        display:none;
    }

    .guia-indice nav{
        flex-direction:row;
        overflow-x:auto;
        scrollbar-width:none;
        gap:6px;
    }

    .guia-indice nav::-webkit-scrollbar{
        display:none;
    }

    .guia-indice a{
        flex-shrink:0;
        white-space:nowrap;
        padding:8px 12px;
        font-size:13.5px;
    }

    .guia-indice a:hover{
        transform:none;
    }

    .racao-etapas{
        grid-template-columns:repeat(2,1fr);
    }

    .guia-bloco{
        scroll-margin-top:150px;
    }

}

@media(max-width:700px){

    .guia-hero{
        padding:118px 18px 20px;
    }

    .guia-hero h1{
        font-size:clamp(38px,11vw,52px);
        letter-spacing:-2px;
    }

    .guia-parabens{
        font-size:18px;
    }

    .guia-intro{
        font-size:15.5px;
    }

    .guia-hero-acoes{
        flex-direction:column;
    }

    .guia-resumo{
        margin-top:34px;
        gap:10px;
    }

    .guia-resumo div{
        padding:14px;
    }

    .guia-resumo i{
        width:36px;
        height:36px;
        font-size:16px;
        margin-bottom:10px;
    }

    .guia-resumo strong{
        font-size:15px;
    }

    .guia-resumo span{
        font-size:12.5px;
    }

    .guia-layout{
        padding:0 16px;
        margin-top:36px;
    }

    .guia-indice{
        top:64px;
    }

    .guia-bloco{
        padding:24px 20px;
        border-radius:22px;
    }

    .guia-bloco > p{
        font-size:15.5px;
    }

    .guia-bloco-topo{
        gap:14px;
        margin-bottom:18px;
    }

    .guia-icone{
        width:50px;
        height:50px;
        border-radius:16px;
        font-size:22px;
    }

    .guia-bloco-importante{
        padding-top:58px;
    }

    .guia-selo{
        top:18px;
        right:auto;
        left:20px;
    }

    .guia-bloco-importante::before{
        left:20px;
        right:20px;
    }

    .racao-etapas{
        grid-template-columns:1fr;
        gap:10px;
    }

    .racao-etapa{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        column-gap:14px;
        padding:14px;
    }

    .racao-dias{
        grid-column:1 / -1;
        margin-bottom:8px;
    }

    .racao-barra{
        grid-column:1 / -1;
        margin-bottom:8px;
    }

    .racao-etapa p{
        grid-column:1 / -1;
    }

    .guia-comparar{
        grid-template-columns:1fr;
    }

    .guia-lista li{
        font-size:14.5px;
        padding:12px 14px;
    }

    .guia-btn-alerta{
        width:100%;
    }

    .guia-final{
        margin:60px 16px 80px;
        padding:40px 22px;
        border-radius:28px;
    }

    .guia-final-botoes{
        flex-direction:column;
    }

}

/* ---------- Impressão / Salvar em PDF ---------- */

@media print{

    body::before,
    .header,
    .mobile-menu,
    .whatsapp-float,
    .hero-blur,
    .guia-hero-acoes,
    .guia-indice,
    .guia-btn-alerta,
    .guia-final-botoes,
    .footer{
        display:none !important;
    }

    body,
    body.tema-escuro{
        --background:#fff;
        --surface:#fff;
        --surface-solid:#fff;
        --surface-light:#f4f7f9;
        --text:#0b1b2b;
        --text-secondary:#3e4f5a;
        --heading:#004ea9;
        --accent-text:#004ea9;
        --border:rgba(7,56,77,.15);
        background:#fff !important;
    }

    [data-aos]{
        opacity:1 !important;
        transform:none !important;
    }

    .guia-hero{
        padding:0 0 10px;
    }

    .guia-resumo{
        margin-top:20px;
    }

    .guia-layout{
        display:block;
        margin-top:20px;
        padding:0;
    }

    .guia-bloco,
    .guia-resumo div,
    .guia-final{
        box-shadow:none !important;
        backdrop-filter:none;
        break-inside:avoid;
    }

    .guia-conteudo{
        gap:14px;
    }

    .guia-final{
        margin:20px 0 0;
        padding:28px;
        background:#f4f7f9 !important;
    }

    .racao-barra span,
    .guia-icone,
    .guia-sim > span i,
    .guia-nao > span i{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

}