/* Hero Modernista no site (fase B banners). Carregar DEPOIS de pf-hero.css.
   Tudo preso em .pf-hero: nao usa :root nem .pf-btn (estilo.css ja tem .pf-btn). */

.pf-hero-wrap{padding:16px 16px 0}

/* Foto real (substitui o placeholder listrado da styleguide) */
.pf-hero .pn-img.has-foto{width:100%;padding:0}
.pf-hero .pn-img.has-foto::before{background:linear-gradient(90deg,var(--bg) 0%,rgba(0,0,0,0) 70%);opacity:.85}
.pf-hero .pn[data-tema="claro"] .pn-img.has-foto::before{opacity:.65}
.pf-hero .pn-img.is-m{display:none}
@media (max-width:767px){
  .pf-hero .pn-img.is-d.tem-m{display:none}
  .pf-hero .pn-img.is-m{display:flex}
}

/* Painel inteiro clicavel */
.pf-hero .pn-link{position:absolute;inset:0;z-index:3}
.pf-hero .pn-body{z-index:4;pointer-events:none}
.pf-hero .pn-body a,.pf-hero .pn-body button,.pf-hero .pn-body input,.pf-hero .pn-body form{pointer-events:auto}

/* Selo e titulo grande */
.pf-hero .selo{align-self:flex-start;display:inline-block;padding:4px 10px;border-radius:4px;background:#00a3e0;color:#003352;font:600 12px/16px 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.pf-hero .destaque{color:#00a3e0}
.pf-hero .pn[data-tema="oferta"] .destaque,.pf-hero .pn[data-tema="azul"] .destaque{color:#ffffff;text-decoration:underline;text-decoration-color:#00a3e0;text-underline-offset:6px}
.pf-hero .titulo-grande{font:700 72px/72px 'Barlow Condensed',sans-serif;margin:0;letter-spacing:.01em}

/* Botoes do hero (proprios; .pf-btn conflita com estilo.css) */
.pf-hero .hb{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 26px;border:0;text-decoration:none;cursor:pointer;font:600 16px/20px 'Barlow Condensed','Prompt',sans-serif;letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter 120ms,transform 120ms}
.pf-hero .hb:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none}
.pf-hero .hb:focus-visible{outline:2px solid #00a3e0;outline-offset:3px}
.pf-hero .hb-accent{background:#00a3e0;color:#003352}
.pf-hero .hb-primario{background:#0057a6;color:#fff}
.pf-hero .hb-escuro{background:#003352;color:#fff}
.pf-hero .hb-branco{background:#fff;color:#003352}
.pf-hero .hb-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;clip-path:none;border-radius:2px}
.pf-hero .hb-texto{background:transparent;color:inherit;padding:0;clip-path:none;text-decoration:underline;text-underline-offset:4px}
.pf-hero .hb .seta{font-size:18px;line-height:1}

/* Busca no painel */
.pf-hero .busca{display:flex;max-width:440px;margin-top:4px;background:#fff;border-radius:4px;overflow:hidden}
.pf-hero .busca input{flex:1;min-width:0;border:0;padding:0 14px;min-height:48px;font:400 15px 'Prompt',sans-serif;color:#003352}
.pf-hero .busca button{border:0;background:#0057a6;color:#fff;padding:0 18px;font:600 15px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}

/* Flutuante simples (fase B: chip). Posicao vem de pos_x/pos_y (%). */
.pf-hero .f-chip-site{display:inline-flex;flex-direction:column;padding:8px 12px;border-radius:8px;background:#fff;color:#003352;font:500 13px/16px 'Prompt',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.pf-hero .f-chip-site small{font-size:11px;opacity:.75}

@media (max-width:900px){
  .pf-hero .titulo-grande{font-size:52px;line-height:52px}
  .pf-hero .fl.oculta-m{display:none}
}
@media (max-width:767px){
  .pf-hero .sl{height:420px}
  .pf-hero .sl-slide.l-2col{grid-template-columns:minmax(0,1fr)}
  .pf-hero .sl-slide.l-2col .pn:nth-child(2){display:none}
  .pf-hero .sl-arrow{display:none}
}