/* Hero — Modernista (fase 2). Escopo .pf-hero.
   Slides empilhados com fade (.sl-slide.is-on), painel com recorte de canto,
   animações de entrada, flutuantes (.fl) e controles (dots/play-pause/setas).
   Variantes de botão do board (b-accent etc.) foram descartadas: usar .pf-btn de pf-buttons.css. */

.pf-hero{position:relative;width:100%;max-width:1320px;margin:0 auto;font-family:var(--font-sans,'Prompt',sans-serif)}
.pf-hero *,.pf-hero *::before,.pf-hero *::after{box-sizing:border-box}
.pf-hero .sl{position:relative;height:440px}
.pf-hero .sl-slide{position:absolute;inset:0;display:grid;gap:16px;opacity:0;visibility:hidden;transition:opacity 500ms ease,visibility 0s linear 500ms;z-index:1}
.pf-hero .sl-slide.is-on{opacity:1;visibility:visible;transition-delay:0s;z-index:2}
.pf-hero .sl-slide.l-1col{grid-template-columns:minmax(0,1fr)}
.pf-hero .sl-slide.l-2col{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Painel */
.pf-hero .pn{--bg:#003352;--ln:rgba(255,255,255,.06);--fg:#ffffff;position:relative;display:block;overflow:hidden;border-radius:16px;clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%);isolation:isolate;text-decoration:none;background:var(--bg);color:var(--fg)}
.pf-hero .pn[data-tema="azul"]{--bg:#0057a6}
.pf-hero .pn[data-tema="oferta"]{--bg:#c2410c}
.pf-hero .pn[data-tema="claro"]{--bg:#eef5fb;--ln:rgba(0,87,166,.08);--fg:#003352}
.pf-hero .pn-img{position:absolute;top:0;right:0;bottom:0;width:48%;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:24px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.04) center/cover no-repeat;z-index:-2}
.pf-hero .pn-img::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-12deg,transparent 0 44px,var(--ln) 44px 46px)}
.pf-hero .pn-img span{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:220px}
.pf-hero .pn-solid{position:absolute;top:0;left:0;bottom:0;width:60%;background:var(--bg);clip-path:polygon(0 0,100% 0,calc(100% - 80px) 100%,0 100%);z-index:-1}
.pf-hero .pn-body{position:relative;height:100%;max-width:620px;padding:44px 48px 104px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.pf-hero .l-2col .pn-body{padding:36px 36px 104px}
.pf-hero .eyebrow{font:400 12px/16px 'Prompt',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin:0}
.pf-hero .pn h2{font:600 40px/46px 'Prompt',sans-serif;margin:0;color:inherit}
.pf-hero .destaque{color:#00a3e0}
.pf-hero .pn[data-tema="claro"] .destaque{color:#0057a6}
.pf-hero .sub{font:400 16px/24px 'Prompt',sans-serif;max-width:42ch;opacity:.92;margin:0}
.pf-hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* Animações de entrada (rodam quando o slide recebe .is-on) */
@keyframes pfInUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pfInLine{from{transform:translateY(105%)}to{transform:none}}
@keyframes pfInWipe{from{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}to{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}
@keyframes pfInPop{0%{opacity:0;transform:scale(.6) rotate(-6deg)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
.pf-hero .a-line{display:block;overflow:hidden}
.pf-hero .is-on .a-up{animation:pfInUp 640ms cubic-bezier(.2,.7,.2,1) both}
.pf-hero .is-on .a-line>span{display:block;animation:pfInLine 700ms cubic-bezier(.2,.7,.2,1) both}
.pf-hero .is-on .pn-img{animation:pfInWipe 900ms cubic-bezier(.7,0,.2,1) both}
.pf-hero .is-on .fl{animation:pfInPop 600ms cubic-bezier(.2,.7,.2,1) both}

/* Flutuantes */
.pf-hero .fl{position:absolute;z-index:4}
.pf-hero .fl-in{display:block;transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.pf-hero .fl-in:hover{transform:scale(1.06) rotate(-2deg)}
@keyframes pfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pfTilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.pf-hero .m-flutuar{animation:pfFloat 3.2s ease-in-out infinite}
.pf-hero .m-pulsar{animation:pfPulse 2.2s ease-in-out infinite}
.pf-hero .m-balancar{animation:pfTilt 2.8s ease-in-out infinite}
.pf-hero .f-etiqueta{display:flex;flex-direction:column;padding:14px 26px 14px 30px;background:#00a3e0;color:#003352;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.pf-hero .f-etiqueta b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px;line-height:32px;text-transform:uppercase}
.pf-hero .f-etiqueta small{font-size:13px}
.pf-hero .f-preco{display:flex;flex-direction:column;padding:12px 16px;background:#ffffff;color:#003352;border-radius:12px;box-shadow:0 8px 32px rgba(0,51,82,.25)}
.pf-hero .f-preco small{font-size:12px;color:#56657a}
.pf-hero .f-preco b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:28px;color:#0057a6}
.pf-hero .f-circulo{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:44px;background:#ffffff;color:#c2410c;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.pf-hero .f-circulo.is-sm{width:56px;height:56px;font-size:24px}
.pf-hero .f-chip{display:flex;align-items:center;gap:8px;padding:6px 16px 6px 12px;background:rgba(0,51,82,.88);color:#ffffff;font-size:13px;font-weight:500;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.pf-hero .f-chip i{width:8px;height:8px;border-radius:4px;background:#3fbf73}

/* Cupom */
.pf-hero .cup{display:inline-flex;align-items:stretch;align-self:flex-start;background:#ffffff;border-radius:12px;box-shadow:0 8px 32px rgba(0,51,82,.18);overflow:hidden}
.pf-hero .cup-l{display:flex;flex-direction:column;justify-content:center;padding:0 14px;font-size:11px;line-height:13px;letter-spacing:.06em;text-transform:uppercase;color:#003352;border-right:2px dashed #9fc2e0}
.pf-hero .cup-c{display:flex;align-items:center;padding:0 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;letter-spacing:.06em;color:#c2410c}
.pf-hero .cup button{border:0;background:#0057a6;color:#ffffff;padding:0 16px 0 22px;min-height:52px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.pf-hero .cup button:hover{background:#003352}
.pf-hero .cup button:focus-visible{outline:2px solid #00a3e0;outline-offset:-3px}

/* Controles */
.pf-hero .sl-arrow{position:absolute;top:calc(50% - 22px);z-index:6;width:44px;height:44px;border:0;border-radius:22px;background:#ffffff;color:#003352;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,51,82,.1),0 4px 16px rgba(0,51,82,.18);transition:transform 160ms}
.pf-hero .sl-arrow.is-prev{left:-22px}
.pf-hero .sl-arrow.is-next{right:-22px}
.pf-hero .sl-arrow:hover{transform:scale(1.08)}
.pf-hero .sl-arrow:focus-visible{outline:2px solid #00a3e0;outline-offset:3px}
.pf-hero .sl-ctrl{position:absolute;top:16px;right:20px;z-index:6;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;background:rgba(0,51,82,.82);border-radius:2px}
.pf-hero .sl-dot{position:relative;width:46px;height:28px;border:0;padding:0;background:transparent;cursor:pointer}
.pf-hero .sl-dot span{position:absolute;left:0;right:0;top:12px;height:5px;background:rgba(255,255,255,.3);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);overflow:hidden}
.pf-hero .sl-dot span i{position:absolute;top:0;bottom:0;left:0;width:0;background:#00a3e0}
.pf-hero .sl-dot.is-on span i{width:100%;transition:width var(--pf-hero-delay,6000ms) linear}
.pf-hero.is-paused .sl-dot.is-on span i{width:100%;transition:none}
.pf-hero .sl-dot:focus-visible{outline:2px solid #00a3e0;outline-offset:2px}
.pf-hero .sl-pp{width:28px;height:28px;border:0;border-radius:2px;background:transparent;color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pf-hero .sl-pp:hover{background:#0b3c59}
.pf-hero .sl-pp:focus-visible{outline:2px solid #00a3e0;outline-offset:1px}

@media (max-width: 900px){
  .pf-hero .sl{height:520px}
  .pf-hero .sl-slide.l-2col{grid-template-columns:minmax(0,1fr);overflow-y:auto}
  .pf-hero .pn-body{padding:28px 24px 104px}
  .pf-hero .pn h2{font-size:30px;line-height:36px}
  .pf-hero .pn-img{width:100%;opacity:.35}
  .pf-hero .pn-solid{width:100%;clip-path:none;opacity:.7}
  .pf-hero .sl-arrow{display:none}
}
@media (prefers-reduced-motion: reduce){
  .pf-hero .sl-slide,.pf-hero .fl-in,.pf-hero .sl-dot span i{transition:none!important}
  .pf-hero .is-on .a-up,.pf-hero .is-on .a-line>span,.pf-hero .is-on .pn-img,.pf-hero .is-on .fl,.pf-hero .m-flutuar,.pf-hero .m-pulsar,.pf-hero .m-balancar{animation:none!important}
}