/* ============================================================================= OCompra.com — critical.css (above-the-fold, F9) Inlinado no (coberto por hash na CSP). Contém: tokens da Paleta A ATIVA + reset/tipografia base + header sticky + hero + início do grid de cards. O restante (app.css) é carregado de forma não bloqueante. Sem @import / CDN / webfont externa (fontes do sistema p/ evitar FOIT/CLS). ============================================================================= */ :root{ --color-primary:#E8470C;--color-primary-d:#C23A09;--color-primary-l:#FF6A33; --color-secondary:#1F2A44;--color-secondary-l:#2C3A5C;--color-accent:#FFB703; --color-accent-d:#E09E00;--color-success:#1B9E5A;--color-success-l:#E6F6EE; --color-alert:#C81E1E;--color-alert-l:#FDECEC;--color-bg:#FFFFFF; --color-bg-soft:#FFF4EC;--color-bg-warm:#FFE9DA;--color-surface:#FFFFFF; --color-text:#1A1A1A;--color-text-soft:#3A4150;--color-text-muted:#5B6472; --color-text-inv:#FFFFFF;--color-border:#E6E0DA;--color-border-soft:#F1EBE5; --grad-hero:linear-gradient(135deg,#E8470C 0%,#FF6A33 48%,#FF8A00 100%); --grad-cta:linear-gradient(180deg,#FF6A33 0%,#E8470C 100%); --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs-base:1rem;--fs-lg:1.375rem;--fs-2xl:2.25rem; --fw-semibold:600;--fw-bold:700;--fw-black:800; --radius-sm:6px;--radius:10px;--radius-lg:16px;--radius-pill:999px; --space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space:16px; --shadow-1:0 1px 2px rgba(31,42,68,.06),0 1px 3px rgba(31,42,68,.08); --shadow-2:0 2px 6px rgba(31,42,68,.08),0 4px 12px rgba(31,42,68,.08); --shadow-cta:0 6px 16px rgba(232,71,12,.32); --shadow-focus:0 0 0 3px rgba(255,138,0,.45); --t-base:200ms cubic-bezier(.2,.7,.3,1); --maxw:1180px;--header-h:60px;--card-min:180px; } @media (min-width:900px){:root{--fs-2xl:3rem}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;background:var(--color-bg);color:var(--color-text); font-family:var(--font-sans);line-height:1.55;font-size:var(--fs-base); -webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--color-primary);text-decoration:none} h1,h2,h3{line-height:1.2;margin:0} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:8px;top:8px;position:fixed;z-index:1000;background:#fff; color:var(--color-secondary);padding:8px 12px;border-radius:var(--radius)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} :focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)} /* O anel global :focus-visible (box-shadow + radius-sm) NAO deve atingir os controles dentro das barras de busca: dentro do pill (overflow:hidden) ele fica torto/recortado. O foco e dado pelo CONTAINER (:focus-within). Botao mantem feedback de brilho. */ .site-search :focus,.site-search :focus-visible,.hero-search :focus,.hero-search :focus-visible{box-shadow:none !important;border-radius:0;outline:none} .site-search button:focus-visible,.hero-search button:focus-visible{filter:brightness(1.12)} /* --- Header sticky --- */ .site-header{position:sticky;top:0;z-index:500;background:var(--color-secondary); color:#fff;box-shadow:var(--shadow-2)} .header-inner{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; padding:10px var(--space-4);min-height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:var(--fw-black); font-size:1.3rem;letter-spacing:-.01em} .brand-mark{display:inline-flex;width:30px;height:30px;color:var(--color-primary-l);flex:0 0 auto} .brand-name b{color:var(--color-accent)} .site-search{order:3;display:flex;flex:1 1 100%;min-width:0;background:#fff; border-radius:var(--radius-pill);box-shadow:var(--shadow-1);overflow:hidden; align-items:center;padding-left:14px} .site-search .icon{color:var(--color-text-muted);width:20px;height:20px;flex:0 0 auto} .site-search input{flex:1;min-width:0;border:0;padding:11px 12px;font-size:var(--fs-base); background:transparent;color:var(--color-text)} .site-search input:focus{outline:none} .site-search button{border:0;background:var(--grad-cta);color:#fff;font-weight:var(--fw-bold); padding:0 18px;align-self:stretch;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .country-selector{display:flex;gap:6px;align-items:center} .country-selector .label{display:none} .country-selector a,.country-selector .country-disabled{color:#fff;font-size:.8rem; font-weight:var(--fw-semibold);padding:5px 9px;border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.02em} .country-selector a[aria-current="true"]{background:var(--color-primary);border-color:var(--color-primary)} .country-selector .country-disabled{opacity:.45;border-style:dashed} /* --- Hero (full-bleed dentro de main.container) --- */ .hero{background:var(--grad-hero);color:#fff;padding:36px 0 30px;position:relative;overflow:hidden; margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-4)) var(--space-6);width:auto} .hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none} .hero-inner{position:relative;text-align:center;max-width:720px;margin:0 auto} .hero h1{font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:-.02em; text-shadow:0 1px 2px rgba(0,0,0,.12)} .hero-sub{margin:12px auto 0;max-width:560px;font-size:1.05rem;color:rgba(255,255,255,.92)} .hero-search{display:flex;margin:20px auto 0;max-width:560px;background:#fff; border-radius:var(--radius-pill);box-shadow:var(--shadow-2);overflow:hidden; align-items:center;padding-left:16px} .hero-search .icon{color:var(--color-text-muted);flex:0 0 auto} .hero-search input{flex:1;min-width:0;border:0;padding:14px 12px;font-size:1.05rem;background:transparent} .hero-search input:focus{outline:none} .hero-search button{border:0;background:var(--grad-cta);color:#fff;font-weight:var(--fw-bold); padding:0 22px;align-self:stretch;cursor:pointer} /* --- Início do grid de cards (acima da dobra) --- */ main{padding-top:var(--space-6);padding-bottom:var(--space-8)} .offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr)); gap:var(--space-4)} .card{background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden; display:flex;flex-direction:column} .card-media{position:relative;aspect-ratio:1/1;background:#fff} .card-media img{width:100%;height:100%;object-fit:contain} .price-now{font-size:1.35rem;font-weight:var(--fw-black);color:var(--color-primary);line-height:1.1} .btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--grad-cta);color:#fff;border:0;border-radius:var(--radius); padding:11px 16px;font-weight:var(--fw-bold);font-size:var(--fs-base);cursor:pointer; box-shadow:var(--shadow-cta);text-align:center} /* --- Banner de consentimento (fim do viewport) --- */ .consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:900; background:var(--color-secondary);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.25)} .consent-banner[hidden]{display:none} .consent-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px var(--space-4)} .consent-text{margin:0;flex:1 1 240px;font-size:.9rem;color:rgba(255,255,255,.9)} .consent-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .consent-btn{padding:9px 16px;border:0;border-radius:var(--radius);font-weight:var(--fw-bold);cursor:pointer} .consent-accept{background:var(--grad-cta);color:#fff} .consent-reject{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)} .consent-link{color:#fff;text-decoration:underline} @media (min-width:680px){ .site-search{order:0;flex:1 1 auto;max-width:460px} .country-selector .label{display:inline;color:rgba(255,255,255,.6);font-size:.8rem} }