/* ===================================================================
 * public-shell.css — header, footer, mobile drawer, cupons-bar
 * Compartilhado pelas paginas publicas. Tokens (--c1, --c2, --bg,
 * --font-titulo, --font-corpo, --logo-altura) vem inline por tenant.
 * =================================================================== */

/* base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-corpo);background:var(--bg);color:var(--txt)}

/* ===================================================================
 * PRESETS DE ESTILO VISUAL (Fase 2)
 * Tokens que mudam por preset via `body[data-estilo="X"]`.
 * Default = 'compacto' (preserva visual atual).
 * Tokens consumidos pelos templates:
 *   --radius           border-radius global de cards/inputs/badges
 *   --radius-sm        radius menor (badges, chips)
 *   --card-shadow      sombra resting do card
 *   --card-shadow-hover sombra no hover
 *   --card-padding     padding interno do .card-body
 *   --card-border      borda do card (none ou 1px/2px)
 *   --btn-weight       peso do texto de CTAs/botoes
 *   --title-weight     peso de titulos
 * =================================================================== */
body{
  --radius: 12px;
  --radius-sm: 6px;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06);
  --card-shadow-hover: 0 8px 24px rgba(0,0,0,.10);
  --card-padding: .85rem;
  --card-border: 1px solid var(--border);
  --btn-weight: 700;
  --title-weight: 700;
}
body[data-estilo="vibrante"]{
  --radius: 6px;
  --radius-sm: 4px;
  --card-shadow: 0 4px 12px rgba(0,0,0,.12);
  --card-shadow-hover: 0 10px 30px rgba(0,0,0,.18);
  --card-padding: .65rem;
  --card-border: none;
  --btn-weight: 800;
  --title-weight: 800;
}
body[data-estilo="editorial"]{
  --radius: 4px;
  --radius-sm: 2px;
  --card-shadow: none;
  --card-shadow-hover: 0 2px 8px rgba(0,0,0,.08);
  --card-padding: 1.1rem;
  --card-border: 1px solid var(--border);
  --btn-weight: 600;
  --title-weight: 600;
}
body[data-estilo="macio"]{
  --radius: 20px;
  --radius-sm: 12px;
  --card-shadow: 0 2px 8px rgba(0,0,0,.06);
  --card-shadow-hover: 0 12px 32px rgba(0,0,0,.10);
  --card-padding: 1rem;
  --card-border: none;
  --btn-weight: 700;
  --title-weight: 700;
}
body[data-estilo="black_friday"]{
  --radius: 4px;
  --radius-sm: 2px;
  --card-shadow: 0 4px 16px color-mix(in srgb, var(--c1) 22%, transparent);
  --card-shadow-hover: 0 6px 24px color-mix(in srgb, var(--c1) 38%, transparent);
  --card-padding: .75rem;
  --card-border: 2px solid var(--c1);
  --btn-weight: 800;
  --title-weight: 800;
}
/* Pulse sutil no badge -% pra reforcar a urgencia (so no preset BF) */
body[data-estilo="black_friday"] .badge{
  animation: bf-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes bf-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--c1) 60%, transparent)}
  50%    {box-shadow:0 0 0 6px transparent}
}
@media(prefers-reduced-motion: reduce){
  body[data-estilo="black_friday"] .badge{animation:none}
}

/* ===== HEADER (full) ===== */
header{background:var(--c2);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.25)}
.h-top{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0;min-width:0}
.logo-img{height:var(--logo-altura);width:auto;max-width:240px;object-fit:contain;display:block}
.logo-txt{font-family:var(--font-titulo);font-size:1.3rem;font-weight:800;color:var(--c1);white-space:nowrap;letter-spacing:-.01em}
.srch{flex:1;max-width:560px}
.srch form{display:flex;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;transition:border-color .2s}
.srch form:focus-within{border-color:var(--c1)}
.srch input{flex:1;background:transparent;border:none;outline:none;padding:.55rem .9rem;font-size:.92rem;color:#fff;font-family:var(--font-corpo)}
.srch input::placeholder{color:rgba(255,255,255,.45)}
.srch button{background:var(--c1);border:none;padding:.55rem 1rem;cursor:pointer;color:#fff;font-size:1rem}
.h-nav{display:flex;gap:.25rem;margin-left:auto;flex-shrink:0}
.nav-a{display:flex;align-items:center;gap:.3rem;color:rgba(255,255,255,.8);text-decoration:none;font-size:.84rem;font-weight:500;padding:.4rem .7rem;border-radius:6px;transition:all .15s;white-space:nowrap}
.nav-a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav-a.on{background:var(--c1);color:#fff}

/* ===== HEADER (minimal — usado em /oferta/{id}, /ir/{slug}) ===== */
.h-mini{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.25rem}
.h-mini .voltar{color:rgba(255,255,255,.7);text-decoration:none;font-size:.85rem;font-weight:500;padding:.4rem .8rem;border-radius:6px;transition:all .15s}
.h-mini .voltar:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ===== CUPONS BAR (subset que mostra) ===== */
.cupons-bar{background:var(--c2);border-top:1px solid rgba(255,255,255,.07);padding:.45rem 1.25rem}
.cupons-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:.6rem;overflow-x:auto;scrollbar-width:none}
.cupons-in::-webkit-scrollbar{display:none}
.c-lbl{font-size:.72rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.c-chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:.28rem .7rem;font-size:.78rem;color:rgba(255,255,255,.88);white-space:nowrap;cursor:pointer;transition:all .15s;flex-shrink:0;text-decoration:none}
.c-chip:hover{background:var(--c1);border-color:var(--c1);color:#fff}
.c-code{font-weight:700;font-family:monospace;letter-spacing:.04em}
.c-loja{display:inline-flex;align-items:center;gap:.3rem;opacity:.7;font-size:.72rem}
.c-loja img{width:12px;height:12px;object-fit:contain;border-radius:2px}
.c-val{color:var(--c1);font-weight:700}
.c-chip:hover .c-val{color:#fff}

/* ===== HAMBURGUER + MOBILE DRAWER ===== */
.h-menu-btn{display:none;background:transparent;border:none;cursor:pointer;padding:.4rem;color:#fff;flex-shrink:0;border-radius:6px;transition:background .15s}
.h-menu-btn:hover{background:rgba(255,255,255,.1)}
.h-menu-btn:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.h-menu-btn svg{display:block}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;opacity:0;transition:opacity .25s}
.mob-overlay.open{opacity:1}
.mob-drawer{position:fixed;top:0;right:0;bottom:0;width:min(300px,85vw);background:var(--c2);z-index:201;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.35)}
.mob-drawer.open{transform:translateX(0)}
.mob-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}
.mob-drawer-title{font-family:var(--font-titulo);font-size:1rem;font-weight:800;color:var(--c1)}
.mob-close-btn{background:transparent;border:none;cursor:pointer;color:rgba(255,255,255,.6);padding:.3rem;border-radius:6px;transition:all .15s;line-height:0}
.mob-close-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.mob-close-btn:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.mob-nav{display:flex;flex-direction:column;padding:.75rem .75rem;gap:.15rem;flex:1}
.mob-nav-a{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.8);text-decoration:none;font-size:.95rem;font-weight:500;padding:.7rem .85rem;border-radius:8px;transition:all .15s}
.mob-nav-a:hover,.mob-nav-a.on{background:var(--c1);color:#fff}
.mob-nav-a:focus-visible{outline:2px solid var(--c1);outline-offset:2px}

/* ===== FOOTER (full) ===== */
footer{background:var(--c2);color:rgba(255,255,255,.45);margin-top:3rem}
.f-in{max-width:1280px;margin:0 auto;padding:2.5rem 1.25rem}
.f-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem}
.f-logo-wrap{display:flex;align-items:center;gap:.75rem}
.f-logo-img{height:calc(var(--logo-altura) * 0.95);width:auto;max-width:200px;object-fit:contain}
.f-logo{font-family:var(--font-titulo);font-size:1.35rem;font-weight:800;color:var(--c1);letter-spacing:-.01em}
.f-desc{font-size:.83rem;color:rgba(255,255,255,.38);max-width:280px;margin-top:.35rem;line-height:1.5}
.f-info-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.38);margin-bottom:.7rem}
.f-info-links{display:flex;flex-direction:column;gap:.5rem;font-size:.84rem}
.f-info-links a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .15s}
.f-info-links a:hover{color:#fff}
.soc-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.38);margin-bottom:.7rem;text-align:center}
.soc-links{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center}
.soc-a{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.48rem .85rem;color:rgba(255,255,255,.75);text-decoration:none;font-size:.8rem;font-weight:500;transition:all .15s}
.soc-a:hover{background:var(--c1);border-color:var(--c1);color:#fff}
.soc-a svg{width:15px;height:15px;flex-shrink:0}
.f-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;text-align:center;font-size:.76rem}
.f-bottom p{margin-bottom:1rem}
.f-bottom p:last-child{margin-bottom:0}
.f-selos{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.selo{display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.45rem .85rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.65)}
.selo svg{flex-shrink:0;opacity:.8}
.f-powered{font-weight:800;background:linear-gradient(90deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}

/* ===== FOOTER (compact — usado em blog/post) ===== */
.f-compact{max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem;text-align:center;font-size:.76rem;line-height:1.6}
.f-compact a{color:rgba(255,255,255,.7);text-decoration:none}
.f-compact a:hover{color:#fff}

/* ===== RESPONSIVO ===== */
@media(max-width:768px){
  .h-nav{display:none}
  .h-menu-btn{display:flex;align-items:center;justify-content:center;margin-left:auto}
  .mob-overlay{display:block}
  .srch{max-width:none}
  .f-top{flex-direction:column;align-items:flex-start}
  /* logos grandes encolhem proporcionalmente no mobile */
  .logo-img{max-height:48px}
  .f-logo-img{max-height:44px}
}