/* ==================================================================
   /empresa — "Sesc e sua empresa" (landing pública da empresa parceira)
   Importado do protótipo sesc-empresa.html. Todo o CSS vive sob .se-page
   para não vazar pro resto do site (o protótipo usava nomes genéricos como
   .wrap, .icon, .hero). As classes que colidiam com bootstrap/mainpublic
   foram renomeadas: .btn->.se-btn, .modal->.se-modal, .carousel->.se-carousel,
   .lead->.pd-lead, e os estados .open/.show/.active -> .se-open/.se-show/.se-active.
   Header, barra utilitária e footer do protótipo saíram: quem os fornece é o
   _Layout do site.
   ================================================================== */

.se-page { --navy:#13286e; --navy-2:#0e1f56; --navy-3:#0b1846; --blue:#1a53c0; --gold:#f6a800; --gold-2:#e09a00; --green:#2e9e5b; --purple:#7a3fb0; --orange:#e8720c; --text:#26304d; --muted:#6b7280; --bg:#ffffff; --bg-soft:#f4f6fb; --bg-band:#eef2fc; --border:#e3e8f2; --shadow:0 10px 30px rgba(19,40,110,.08); --radius:14px; }
/* Folga entre a testeira e o subnav. Fica em 0 porque o sesc-empresa.js passou a
   medir o fundo REAL da testeira (getBoundingClientRect), então a barra encosta
   sozinha e não precisa mais de compensação. Existe para o caso de se querer
   afastar de propósito — é o único número a mexer. */
.se-page { --se-subnav-gap: 0px; }
.se-page * { box-sizing:border-box }
.se-page { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text); line-height: 1.5; }
.se-page a { text-decoration:none;color:inherit }
.se-page .wrap { max-width:1200px;margin:0 auto;padding:0 20px }
.se-page .icon { width:18px;height:18px;flex:0 0 auto }
.se-page button { font-family:inherit;cursor:pointer }



/* Sub nav */
.se-page .subnav {
    /* Cola no fundo da testeira do site. --se-header-h é onde a testeira termina
       na tela, medido a cada quadro pelo sesc-empresa.js; --se-subnav-gap é 0 e só
       existe para quem quiser afastar de propósito. O fallback de 130px é a soma
       declarada no mainpublic.css (40px da barra utilitária + 90px da testeira),
       usado apenas se o JS não rodar. */
    position: sticky;
    top: calc(var(--se-header-h, 130px) + var(--se-subnav-gap, 0px));
    z-index: 900;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 30, 70, .12);
}
.se-page .subnav .wrap { display:flex;align-items:center;gap:6px;height:52px;overflow-x:auto }
.se-page .subnav a { display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:52px;font-size:13.5px;font-weight:500;color:#dfe6fb;white-space:nowrap;position:relative;transition:.15s }
.se-page .subnav a:hover { color:#fff;background:rgba(255,255,255,.06) }
.se-page .subnav a.se-active { color:#fff;font-weight:700 }
.se-page .subnav a.se-active::after { content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--gold) }

/* Apresentação (o hero antigo virou o _PageHeader do site) */
.se-page .se-intro { padding:28px 0 0 }
.se-page .se-intro p { font-size:16px;line-height:1.6;color:#48526e;max-width:760px;margin:0 auto;text-align:center }

/* Programas */
.se-page section.block { padding:52px 0 }
.se-page .sec-title { text-align:center;font-size:24px;font-weight:800;color:var(--navy);margin:0 0 26px }
.se-page .programas { background:var(--bg-soft);border-radius:18px;padding:26px }
.se-page .prog-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:16px }
.se-page .prog-card { background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;color:var(--text);transition:.18s;cursor:pointer;position:relative }
.se-page .prog-card:hover { transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent }
.se-page .prog-card.se-active { border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-4px) }
.se-page .prog-ic { width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#fff }
.se-page .prog-ic svg { width:34px;height:34px }
.se-page .prog-detail { margin-top:22px;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:none;grid-template-columns:1fr 1.25fr }
.se-page .prog-detail.se-open { display:grid;animation:se-fade .28s ease }
@keyframes se-fade { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }
.se-page .pd-media { min-height:250px;display:grid;place-items:center;color:#fff;position:relative }
.se-page .pd-media svg { width:78px;height:78px;opacity:.95 }
.se-page .pd-media .tag { position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);color:var(--navy);font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px }
.se-page .pd-text { padding:28px 30px }
.se-page .pd-text h3 { margin:0 0 6px;color:var(--navy);font-size:23px }
.se-page .pd-text .pd-lead { color:var(--muted);margin:0 0 18px;font-size:14.5px }
.se-page .pd-text ul { list-style:none;margin:0;padding:0;display:grid;gap:13px }
.se-page .pd-text li { display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text) }
.se-page .pd-text li svg { width:20px;height:20px;color:var(--green);flex:0 0 auto;margin-top:1px }

/* Aderência */
.se-page .aderencia { background:var(--bg-band);border-radius:16px;padding:26px 30px }
.se-page .aderencia-top { display:flex;align-items:center;gap:22px }
.se-page .aderencia .ic { width:54px;height:54px;color:var(--navy);flex:0 0 auto }
.se-page .aderencia .ic svg { width:100%;height:100% }
.se-page .aderencia h3 { margin:0 0 4px;color:var(--navy);font-size:19px }
.se-page .aderencia p { margin:0;color:#516084;font-size:14px }
.se-page .aderencia .btn-navy { margin-left:auto;background:var(--navy);color:#fff;border:none;padding:15px 24px;border-radius:10px;font-weight:700;display:inline-flex;gap:10px;align-items:center;white-space:nowrap;transition:.15s }
.se-page .aderencia .btn-navy:hover { background:var(--navy-2);transform:translateY(-1px) }
.se-page .aderencia-detail { margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px 26px;display:none;animation:se-fade .28s ease }
.se-page .aderencia-detail.se-open { display:block }
.se-page .ad-label { display:block;font-weight:600;color:var(--text);margin-bottom:12px;font-size:14.5px }
.se-page .ad-row { display:flex;gap:12px;flex-wrap:wrap }
.se-page .ad-row input { flex:1;min-width:220px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;font-size:15px }
.se-page .ad-row input:focus { outline:none;border-color:var(--navy) }
.se-page .ad-btn { border:none;background:var(--navy);color:#fff;padding:13px 26px;border-radius:10px;font-weight:700;white-space:nowrap;cursor:pointer;transition:.15s }
.se-page .ad-btn:hover { background:var(--navy-2) }
/* Enquanto a consulta corre o botão fica travado — sem indicar isso, o clique
   repetido parece que "não pegou" e gasta consulta paga à toa. */
.se-page .ad-btn:disabled { opacity:.6;cursor:progress }
.se-page .ad-btn:disabled:hover { background:var(--navy) }

/* Benefícios */
.se-page .beneficios { display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:22px }
.se-page .benef { display:flex;flex-direction:column;gap:8px }
.se-page .benef .bic { width:40px;height:40px;color:var(--navy) }
.se-page .benef .bic svg { width:100%;height:100% }
.se-page .benef h4 { margin:2px 0 0;color:var(--navy);font-size:15px }
.se-page .benef p { margin:0;color:var(--muted);font-size:13px }

/* Dúvidas */
.se-page .duvidas { background:var(--navy);color:#fff }
.se-page .duvidas .wrap { display:flex;align-items:center;gap:24px;padding:26px 20px;flex-wrap:wrap }
.se-page .duvidas-head { display:flex;align-items:center;gap:16px }
.se-page .duvidas .dic { width:40px;height:40px;flex:0 0 auto }
.se-page .duvidas .dic svg { width:100%;height:100% }
.se-page .duvidas-head b { font-size:17px;display:block }
.se-page .duvidas-head span { color:#c8d3f2;font-size:14px }
.se-page .contatos { margin-left:auto;display:flex;gap:14px;flex-wrap:wrap }
.se-page .contato-item { display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 15px;color:#fff;transition:.15s }
.se-page .contato-item:hover { background:rgba(255,255,255,.16);transform:translateY(-2px) }
.se-page .ci-ic { width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto }
.se-page .ci-ic svg { width:20px;height:20px;color:#fff }
.se-page .contato-item.wpp .ci-ic { background:#25d366 }
.se-page .ci-txt { display:flex;flex-direction:column;line-height:1.35 }
.se-page .ci-txt b { font-size:13.5px;display:block }
.se-page .ci-txt small { font-size:12.5px;color:#c8d3f2 }

/* Modal */
.se-page .overlay { position:fixed;inset:0;background:rgba(9,17,45,.55);display:none;place-items:center;z-index:2000;padding:20px }
.se-page .overlay.se-open { display:grid }
.se-page .se-modal { background:#fff;border-radius:16px;max-width:min(420px, calc(100vw - 24px));width:100%;padding:30px;box-shadow:0 30px 70px rgba(0,0,0,.3);animation:se-pop .2s ease }
@keyframes se-pop { from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1} }
.se-page .se-modal h3 { margin:0 0 6px;color:var(--navy) }
.se-page .se-modal p.sub { margin:0 0 20px;color:var(--muted);font-size:14px }
.se-page .se-modal .close { position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;color:#94a0bd }
.se-page .modal-head { position:relative }
.se-page .result { margin-top:16px;padding:14px;border-radius:10px;background:var(--bg-band);color:var(--navy);font-weight:600;font-size:14px;display:none }
.se-page .result.se-show { display:block }
.se-page .result.ok { background:#e7f6ee;color:#1e6b3f }
.se-page .result.no { background:#fdecec;color:#a12626 }
.se-page .result.warn { background:#fff4e2;color:#8a5a00 }
.se-page .result a { color:inherit;font-weight:800;text-decoration:underline;cursor:pointer }

/* Estado "consultando": a consulta de aderência vai à Receita e pode levar alguns
   segundos. Sem sinal na tela o usuário acha que o botão não funcionou e clica de novo. */
.se-page .result.loading { background:var(--bg-band);color:var(--navy);display:flex;align-items:center;gap:12px }
.se-page .ad-spin {
    width:20px;height:20px;flex:none;border-radius:50%;
    /* Base que funciona em qualquer navegador: arco girando sobre trilho claro. */
    border:2.5px solid rgba(19,40,110,.18);border-top-color:var(--navy);
    animation:se-spin .7s linear infinite;
}
/* Onde houver suporte a mask, vira o anel de gradiente (visual mais suave). */
@supports (mask: radial-gradient(#000, #000)) {
    .se-page .ad-spin {
        border:none;
        background:conic-gradient(from 0deg, rgba(19,40,110,0), var(--navy));
        mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
        -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
    }
}
@keyframes se-spin { to { transform:rotate(360deg) } }
/* Quem pediu menos movimento continua vendo que algo está acontecendo, só que devagar:
   tirar a animação por completo deixaria o indicador de carregamento sem função. */
@media (prefers-reduced-motion: reduce) {
    .se-page .ad-spin { animation-duration:1.8s }
}

/* Galeria de ações */
.se-page .sec-sub { text-align:center;color:var(--muted);margin:-14px 0 28px;font-size:14.5px }
.se-page .gallery { display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px }
.se-page .gal-card { background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:.2s;box-shadow:0 2px 10px rgba(19,40,110,.05) }
.se-page .gal-card:hover { transform:translateY(-5px);box-shadow:var(--shadow) }
.se-page .gal-thumb { height:172px;display:grid;place-items:center;position:relative }
.se-page .gal-thumb svg { width:58px;height:58px;color:#fff;opacity:.95 }
.se-page .gal-thumb .count { position:absolute;top:10px;right:10px;background:rgba(0,0,0,.3);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px }
.se-page .gal-thumb .count svg { width:14px;height:14px;opacity:1 }
.se-page .gal-body { padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px }
.se-page .gal-body b { color:var(--navy);font-size:16px }
.se-page .gal-body .see { color:var(--blue);font-size:12.5px;font-weight:700;white-space:nowrap }
.se-page .modal-gal { max-width:min(680px, calc(100vw - 24px)) }
.se-page .se-carousel { position:relative;border-radius:12px;overflow:hidden }
.se-page .slides { display:flex;transition:transform .35s ease }
.se-page .slide { min-width:100%;height:360px;display:grid;place-items:center;position:relative }
.se-page .slide svg { width:84px;height:84px;color:#fff;opacity:.92 }
.se-page .slide .cap { position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.42);color:#fff;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600 }
.se-page .car-nav { position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:none;background:rgba(255,255,255,.95);color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:.15s;box-shadow:0 3px 12px rgba(0,0,0,.18) }
.se-page .car-nav svg { width:26px;height:26px;display:block;transition:transform .15s }
.se-page .car-nav:hover { background:#fff }
.se-page .car-nav:hover svg { transform:scale(1.15) }
.se-page .car-nav.prev { left:14px }
.se-page .car-nav.next { right:14px }
.se-page .thumbs { display:flex;gap:10px;margin-top:16px;overflow-x:hidden;scroll-behavior:smooth }
.se-page .thumbs .thumb { flex:0 0 auto;width:68px;height:46px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;display:grid;place-items:center;overflow:hidden;opacity:.5;transition:.2s }
.se-page .thumbs .thumb svg { width:22px;height:22px;color:#fff;opacity:.92 }
.se-page .thumbs .thumb:hover { opacity:.85 }
.se-page .thumbs .thumb.on { opacity:1;border-color:var(--navy);box-shadow:0 3px 9px rgba(19,40,110,.22) }
.se-page .gal-foot { display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap }
.se-page .gal-counter { font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap }
.se-page .gal-foot .thumbs { margin-top:0;flex:1;min-width:0 }
.se-page .thumb-nav { flex:0 0 auto;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:.15s }
.se-page .thumb-nav:hover { background:var(--bg-soft);border-color:var(--navy) }
.se-page .thumb-nav svg { width:20px;height:20px }
/* Inclui a mesma folga do subnav: sem ela os links da própria barra parariam
   acima do ponto certo e o título da seção ficaria escondido atrás dela. */
.se-page section[id] { scroll-margin-top: calc(var(--se-header-h, 130px) + var(--se-subnav-gap, 0px) + var(--se-subnav-h, 52px) + 12px) }

/* Responsivo */
@media(max-width:980px) {
    .se-page .prog-detail.se-open { grid-template-columns:1fr }
    .se-page .pd-media { min-height:190px }
    .se-page .slide { height:300px }
    .se-page .aderencia-top { flex-wrap:wrap }
    .se-page .aderencia .btn-navy { margin-left:0;width:100%;justify-content:center }
    .se-page .duvidas .wrap { flex-wrap:wrap }
    .se-page .contatos { margin-left:0 }
}
@media(max-width:600px) {
    .se-page .wrap { padding:0 16px }
    .se-page .se-intro p { font-size:15px;text-align:left }
    .se-page section.block { padding:34px 0 }
    .se-page .sec-title { font-size:20px }
    .se-page .sec-sub { font-size:13.5px;margin:-8px 0 22px }
    .se-page .subnav .wrap { height:46px }
    .se-page .subnav a { height:46px;padding:0 12px;font-size:13px }
    .se-page .programas { padding:18px }
    .se-page .pd-text { padding:22px 20px }
    .se-page .pd-text h3 { font-size:20px }
    .se-page .slide { height:220px }
    .se-page .car-nav { width:42px;height:42px }
    .se-page .car-nav svg { width:22px;height:22px }
    .se-page .thumbs .thumb { width:54px;height:38px }
    .se-page .overlay { padding:10px }
    .se-page .se-modal { padding:22px 16px }
    .se-page .modal-gal { max-width:calc(100vw - 20px) }
    .se-page .se-carousel, .se-page .slides { max-width:100% }
    .se-page .slide { min-width:100%;width:100% }
    .se-page .aderencia { padding:22px 20px }
    .se-page .duvidas .wrap { padding:22px 16px }
    .se-page .duvidas-head { width:100% }
    .se-page .contatos { flex-direction:column;width:100% }
    .se-page .contato-item { width:100% }
    .se-page .ci-txt small { word-break:break-word }
    .se-page .benef { align-items:center;text-align:center }
    .se-page .aderencia-top { flex-direction:column;align-items:center;text-align:center }
    .se-page .gal-counter { width:100%;text-align:center;font-size:12px;order:-1 }
    .se-page .gal-foot { gap:10px }
    .se-page .thumbs .thumb { width:52px;height:36px }
    .se-page .thumbs .thumb svg { width:20px;height:20px }
}
@media(max-height:500px) {
    .se-page .overlay { padding:8px }
    .se-page .se-modal { max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto }
    .se-page .modal-gal { display:flex;flex-direction:column;overflow:hidden;padding:14px 18px;height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px) }
    .se-page .modal-gal h3 { margin-bottom:2px }
    .se-page .modal-gal .sub { margin:0 0 8px;font-size:12.5px }
    .se-page .modal-gal .se-carousel { flex:1;min-height:0 }
    .se-page .modal-gal .slides, .se-page .modal-gal .slide { height:100% }
    .se-page .modal-gal .slide svg { width:60px;height:60px }
    .se-page .modal-gal .gal-foot { margin-top:10px }
}

/* Redesenho (fase 5): ícones de programa em tint claro + traço na cor da área,
   no lugar de círculos de cor saturada (padrão de badge do site: tint + matiz escura). */
.se-page .prog-card[data-prog="0"] .prog-ic { background: #fde8f3 !important; color: #be185d; }
.se-page .prog-card[data-prog="1"] .prog-ic { background: #e6effe !important; color: #1d4ed8; }
.se-page .prog-card[data-prog="2"] .prog-ic { background: #f1e9fe !important; color: #6d28d9; }
.se-page .prog-card[data-prog="3"] .prog-ic { background: #fff0e5 !important; color: #c2410c; }
.se-page .prog-card[data-prog="4"] .prog-ic { background: #e5f8ec !important; color: #15803d; }