/*
 * Outubro Rosa — Unimed Ceará (AIS)
 * Único CSS da página (além do Bootstrap). Referência: assets/template-figma-outubro-rosa.png (1440px)
 * Ordem: fontes → tokens → base → botões/selos → navbar → hero → painéis → footer → animações → responsivo
 */

/* ---------- Fontes locais ---------- */
@font-face {
    font-family: 'UnimedSans';
    src: url('../fonts/unimedsans-regular-webfont.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'UnimedSans';
    src: url('../fonts/unimedsans-bold-webfont.woff2') format('woff2'),
         url('../fonts/unimedsans-bold-webfont.woff') format('woff');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens (Figma) ---------- */
:root {
    --pp-rosa: #E5C2C0;
    --pp-rosa-claro: #FDF5F4;
    --pp-rosa-brilho: #F3B4B0;
    --pp-bronze: #CD9E8F;
    --pp-bronze-escuro: #A06A59;
    --pp-gradiente: linear-gradient(90deg, var(--pp-bronze-escuro) 0%, #C28F80 100%); /* botões: mais forte que o do Figma, p/ contraste com texto branco */
    --pp-titulo: #2E3C36;
    --pp-texto: #63706B;
    --pp-borda: #DAE2DF;
    --pp-divisor: #BFC9C4;
    --pp-font: 'UnimedSans', 'Segoe UI', Arial, sans-serif;
    /* 'Unimed Serif' (títulos): sem arquivo em fonts/ — usa a serifada do sistema até receber o woff2 */
    --pp-font-serif: 'Unimed Serif', 'UnimedSerif', Georgia, 'Times New Roman', serif;
    --pp-container: 1216px;
    --pp-gutter: clamp(24px, 7.8vw, 112px);
    --pp-radius: 18px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    font-family: var(--pp-font);
    color: var(--pp-texto);
    background: #fff;
    overflow-x: hidden;
}
.pp-container { width: 100%; max-width: calc(var(--pp-container) + 2 * var(--pp-gutter)); margin-inline: auto; padding-inline: var(--pp-gutter); }

.pp-eyebrow {
    margin: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--pp-texto);
}
.pp-title {
    margin: 0 0 clamp(24px, 3vw, 32px);
    font-family: var(--pp-font-serif); font-weight: 700;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); line-height: 1.22; color: var(--pp-titulo);
}

/* ---------- Botão (CTA pill) e selos ---------- */
.btn-pp {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--pp-gradiente); color: #fff;
    font-weight: 400; text-decoration: none;
    border-radius: 50px; border: 0; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-pp:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(160, 106, 89, .4); filter: brightness(.94); }
.btn-pp:focus-visible { outline: 3px solid var(--pp-titulo); outline-offset: 3px; }
.btn-pp--sm { padding: 8px 16px; gap: 4px; font-size: 14px; line-height: 20px; }
.btn-pp--lg { padding: 8px 20px; min-height: 48px; font-size: 18px; line-height: 26px; }
.btn-pp--disabled { opacity: .7; cursor: default; }
.btn-pp--disabled:hover { transform: none; box-shadow: none; color: #fff; }

.pp-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    background: #fff; border: .5px solid var(--pp-rosa); border-radius: 50px;
    font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pp-titulo);
}
.pp-pill .bi { color: var(--pp-rosa); font-size: 12px; line-height: 1; }
.pp-pill--selo { padding: 4px 12px; border-radius: var(--pp-radius); }
.pp-pill--selo .bi { font-size: 14px; }

/* ---------- Navbar ---------- */
.pp-navbar {
    min-height: 80px; background: var(--pp-rosa);
    position: sticky; top: 0; z-index: 1030;
}
.pp-navbar .navbar-brand { margin: 0; }
.pp-navbar .navbar-brand img { display: block; width: 157px; height: auto; filter: brightness(0) invert(1); } /* logo branco do Figma */
.pp-navbar .navbar-nav { gap: 16px; }
.pp-navbar .nav-link { color: #fff; font-weight: 600; font-size: 12px; line-height: 16px; padding: 0; }
.pp-navbar .nav-link:hover, .pp-navbar .nav-link:focus-visible { color: var(--pp-titulo); }
.pp-navbar .navbar-toggler { background: #fff; }
.pp-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--pp-titulo); }

/* ---------- Hero ---------- */
.pp-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--pp-rosa-claro);
    padding: clamp(56px, 7vw, 100px) 0 clamp(48px, 5.2vw, 75px);
}
/* Imagem do calendário à direita + degradê que a funde ao fundo */
.pp-hero::before {
    content: ''; position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(703px, 49vw);
    background: url('../assets/hero-outubro-rosa.webp') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(270deg, #000 8%, transparent 100%); mask-image: linear-gradient(270deg, #000 8%, transparent 100%);
}
/* Brilhos rosados (elipses do Figma) */
.pp-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(closest-side, var(--pp-rosa-brilho), rgba(255, 255, 255, 0)) center -50% / 72% 200% no-repeat,
        radial-gradient(closest-side, var(--pp-rosa-brilho), rgba(255, 255, 255, 0)) -8% 40% / 54% 140% no-repeat;
}
.pp-hero__content { max-width: 592px; }
.pp-hero__title {
    margin: 0 0 clamp(16px, 1.6vw, 20px);
    font-family: var(--pp-font-serif); font-weight: 700;
    font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.25rem); line-height: 1.22; color: var(--pp-titulo);
}
.pp-hero__subtitle {
    margin: 0 0 clamp(20px, 2.2vw, 28px);
    font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem); line-height: 1.4; font-weight: 600; color: var(--pp-texto);
}
.pp-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(24px, 2.8vw, 32px); padding: 0; }

/* ---------- Painéis arredondados (cronograma, sobre, diferenciais, FAQ) ---------- */
main { padding-bottom: 16px; }
.pp-panel { margin: 16px 16px 0; border-radius: var(--pp-radius); padding: 64px 0; }
.pp-panel + .pp-panel { margin-top: 16px; }
.pp-panel--rosa { background: var(--pp-rosa); margin-top: 0; }
.pp-panel--claro { background: var(--pp-rosa-claro); }
.pp-panel__inner { width: 100%; max-width: calc(var(--pp-container) + 2 * (var(--pp-gutter) - 16px)); margin-inline: auto; padding-inline: calc(var(--pp-gutter) - 16px); }

/* Cronograma */
.pp-programacao .pp-title { margin-bottom: 32px; }
.pp-programacao__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 32px; }
.pp-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 24px; background: #fff; border: 1px solid var(--pp-borda); border-radius: var(--pp-radius);
}
.pp-pill--hora { margin-bottom: 4px; }
.pp-card__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--pp-titulo); }
.pp-card__text { margin: -6px 0 0; font-size: 14px; line-height: 20px; color: var(--pp-texto); }
.pp-card__text strong { font-weight: 700; color: var(--pp-titulo); }

/* Sobre o encontro */
.pp-sobre__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.pp-sobre__texto { max-width: 800px; }
.pp-sobre__paragrafo { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--pp-texto); }
.pp-sobre__paragrafo strong { font-weight: 700; color: var(--pp-titulo); }
.pp-sobre__foto { position: relative; margin: 0; padding: 0 0 0 0; }
.pp-sobre__foto img {
    display: block; width: min(212px, 100%); height: auto;
    border: 8px solid #fff; border-radius: 16px; box-sizing: content-box;
}
.pp-sobre__selos { position: absolute; right: -32px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Diferenciais */
.pp-diferenciais__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.pp-diferencial { display: flex; align-items: center; gap: 24px; padding: 32px; background: #fff; border-radius: 20px; }
.pp-diferencial__icone {
    flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(180deg, var(--pp-bronze) 0%, var(--pp-rosa) 100%); color: #fff; font-size: 28px;
}
.pp-diferencial__titulo { margin: 0 0 2px; font-family: var(--pp-font-serif); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pp-titulo); }
.pp-diferencial__texto { margin: 0; font-size: 16px; line-height: 24px; color: var(--pp-titulo); }

/* FAQ */
.pp-faq__item { padding: 16px 0 16px; border-bottom: 1px solid var(--pp-divisor); }
.pp-faq__item:first-child { padding-top: 0; }
.pp-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-faq__pergunta { margin: 0 0 8px; font-family: var(--pp-font-serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.33; font-weight: 700; color: var(--pp-titulo); }
.pp-faq__resposta { margin: 0; font-size: 16px; line-height: 24px; color: var(--pp-texto); }

/* ---------- Footer ---------- */
.pp-footer { background: var(--pp-rosa); padding: 64px 0 56px; }
.pp-footer__grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: start; gap: 32px clamp(24px, 4vw, 64px); }
.pp-footer__logo { display: block; width: 157px; height: auto; filter: brightness(0) invert(1); }
.pp-footer__item { margin: 0; font-size: 16px; line-height: 24px; color: var(--pp-titulo); overflow-wrap: anywhere; }
.pp-footer__item strong { font-weight: 700; }
.pp-footer__item a { color: inherit; }
.pp-footer__item a:hover { text-decoration: none; }
.pp-footer__copy { margin: 56px 0 0; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--pp-titulo); }

/* ---------- Animações (discretas; só com JS ativo, exceto entrada do hero) ---------- */
:root { --pp-ease: cubic-bezier(.22, .61, .36, 1); }

@keyframes pp-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Revelar ao rolar: [data-reveal] (+ left|right|zoom) e [data-delay] 1-4 */
.pp-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease); }
.pp-js [data-reveal="left"]  { transform: translateX(-32px); }
.pp-js [data-reveal="right"] { transform: translateX(32px); }
.pp-js [data-reveal="zoom"]  { transform: scale(.94); }
.pp-js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .12s !important; }
[data-delay="2"] { transition-delay: .24s !important; }
[data-delay="3"] { transition-delay: .36s !important; }
[data-delay="4"] { transition-delay: .48s !important; }

/* Navbar: sombra ao rolar + barra de progresso */
.pp-navbar { transition: box-shadow .3s ease; }
.pp-navbar.is-scrolled { box-shadow: 0 6px 20px rgba(46, 60, 54, .12); }
.pp-navbar::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pp-bronze); transform: scaleX(var(--pp-progress, 0)); transform-origin: left; }
.pp-navbar .nav-link { position: relative; transition: color .2s ease; }
.pp-navbar .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #fff; transform: scaleX(0); transition: transform .3s var(--pp-ease); }
.pp-navbar .nav-link:hover::after, .pp-navbar .nav-link:focus-visible::after { transform: scaleX(1); }

/* Microinterações */
.btn-pp:active { transform: scale(.97); }
.pp-card, .pp-diferencial { transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease); }
@media (hover: hover) {
    .pp-card:hover, .pp-diferencial:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(205, 158, 143, .25); }
}

@media (prefers-reduced-motion: no-preference) {
    .pp-hero__content > *, .pp-hero__pills .pp-pill { animation: pp-rise .9s var(--pp-ease) both; }
    .pp-hero__content > :nth-child(1) { animation-delay: .10s; }
    .pp-hero__content > :nth-child(2) { animation-delay: .22s; }
    .pp-hero__content > :nth-child(3) { animation-delay: .34s; }
    .pp-hero__content > :nth-child(4) { animation-delay: .46s; }
}

/* ---------- Responsivo (tipografia e espaçamentos já são fluidos com clamp) ---------- */
@media (max-width: 991.98px) {
    .pp-navbar .navbar-collapse { padding: 16px 0 24px; }
    .pp-navbar .navbar-nav { gap: 16px; margin-bottom: 8px; }
    .pp-navbar .nav-link { font-size: 14px; }
    .pp-hero::before { width: 100%; opacity: .35; }
    .pp-sobre__grid { grid-template-columns: 1fr; justify-items: start; }
    .pp-sobre__selos { right: -16px; }
    .pp-footer__grid { grid-template-columns: 1fr 1fr; }
    .pp-footer__logo { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .pp-panel { margin-inline: 8px; padding: 48px 0; }
    .pp-panel__inner { padding-inline: 20px; }
    .pp-diferencial { flex-direction: column; align-items: flex-start; padding: 24px; }
    .pp-footer__grid { grid-template-columns: 1fr; }
    .pp-footer__copy { margin-top: 40px; }
    .btn-pp--lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .btn-pp, .pp-card, .pp-diferencial, .pp-navbar, .pp-navbar .nav-link::after { transition: none; }
}