/*estilos.css*/ :root { --ink: #082040; --ink-2: #0d3161; --paper: #f4f7fa; --card: #ffffff; --line: #e3e9f0; --muted: #5b6b7e; --text: #10233f; --brand: #3B3A96; --brand-2: #5C5AC8; --brand-soft: #ECEBF9; --wa: #25d366; --wa-dark: #1eb657; --wa-ink: #128c50; --pink: #f02890; --gold: #fff010; --indigo: #404098; --amber: #f59e0b; --amber-soft: #fef3c7; --ok: #16a34a; --ok-soft: #ecfdf3; --bad: #b91c1c; --bad-soft: #fef2f2; --radius: 16px; --radius-s: 11px; --shadow: 0 1px 2px rgba(8, 32, 64, .05), 0 10px 26px -14px rgba(8, 32, 64, .18); --shadow-lg: 0 22px 44px -22px rgba(8, 32, 64, .30); --font-d: "Sora", system-ui, sans-serif; --font-b: "Inter", system-ui, sans-serif; --gap-xs: 4px; --gap-s: 8px; --gap-m: 16px; --gap-l: 24px; --gap-xl: 32px; } * { margin: 0; padding: 0; box-sizing: border-box } .skip-link { position: absolute; top: -40px; left: 0; background: #082040; color: #fff; padding: 8px 12px; border-radius: 0 0 8px 0; font-size: 12px; font-weight: 700; z-index: 9999; transition: top .2s ease } .skip-link:focus { top: 0 } *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px } input.valid, select.valid, textarea.valid { border-color: #16a34a !important; box-shadow: 0 0 0 2px rgba(22, 163, 74, .12) } input.invalid, select.invalid, textarea.invalid { border-color: #b91c1c !important; box-shadow: 0 0 0 2px rgba(185, 28, 28, .10) } [hidden] { display: none } html { scroll-behavior: smooth } body { font-family: var(--font-b); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none } img { max-width: 100%; display: block } button { font-family: inherit } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px } main { flex: 1; width: 100% } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-family: var(--font-b); font-weight: 700; font-size: 14px; line-height: 1; padding: 12px 18px; border-radius: 12px; transition: transform .16s ease, filter .16s ease, background .16s ease, color .16s, box-shadow .16s, border-color .16s; white-space: nowrap } .btn:active { transform: scale(.98) } .btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 13px } .btn-sm { padding: 9px 13px; font-size: 13px; border-radius: 10px } .btn-p { background: var(--ink); color: #fff } .btn-p:hover { background: var(--ink-2); transform: translateY(-2px) } .btn-b { background: var(--brand); color: #fff } .btn-b:hover { background: #0675ae; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(8, 136, 200, .7) } .btn-f { background: var(--pink); color: #fff } .btn-f:hover { background: #c21e77; transform: translateY(-2px) } .btn-wa { background: var(--wa); color: #fff } .btn-wa:hover { background: var(--wa-dark); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .7) } .btn-w { background: #fff; color: var(--wa-dark); border: 1.5px solid var(--wa) } .btn-w:hover { background: #f1fdf6 } .btn-o { background: #fff; color: var(--ink); border: 1.5px solid var(--line) } .btn-o:hover { border-color: var(--brand-2); color: var(--brand); transform: translateY(-2px) } .btn-y { background: var(--gold); color: var(--ink) } .btn-y:hover { filter: brightness(.98); transform: translateY(-2px) } .btn-txt { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; font-family: inherit } .btn-txt:hover { color: var(--ink); text-decoration: underline } .btn-txt-perigo { background: none; border: none; color: var(--bad); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; font-family: inherit } .btn-txt-perigo:hover { text-decoration: underline } .topo { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) } .topo .bar { display: flex; align-items: center; gap: 18px; height: 64px } .logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-d); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink); flex-shrink: 0 } .logo img { height: 52px; width: auto; display: block } nav.main { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; min-width: 0 } nav.main a { padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #475569; transition: .15s; white-space: nowrap; letter-spacing: -.01em } nav.main a:hover { color: var(--ink); background: #f1f5f9 } nav.main a.on { color: var(--brand); background: var(--brand-soft); font-weight: 700 } .bar-right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-shrink: 0 } .bar-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0 } .socials { display: flex; align-items: center; gap: 6px; padding-right: 4px; border-right: 1px solid var(--line); margin-right: 2px } .socials a { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; transition: .15s } .socials a svg { width: 17px; height: 17px; display: block } .socials a.ig { color: #E4405F } .socials a.fb { color: #1877F2 } .socials a.tt { color: #000 } .socials a.wa { color: #25D366 } .socials a:hover { transform: translateY(-1px); background: #f8fafc } .socials a.ig:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff } .socials a.fb:hover { background: #1877f2; color: #fff } .socials a.tt:hover { background: #000; color: #fff } .socials a.wa:hover { background: #25d366; color: #fff } .socials.top { display: flex } .btn-wa-topo { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--wa); color: #fff; font: 700 12.5px var(--font-b); text-decoration: none; white-space: nowrap; transition: .15s } .btn-wa-topo:hover { background: var(--wa-dark); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(37, 211, 102, .7) } .btn-wa-topo svg { flex-shrink: 0; display: block } .wa-txt { white-space: nowrap } .cart { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); background: #fff; cursor: pointer; flex-shrink: 0 } .cart .n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--pink); color: #fff; font: 800 10px var(--font-d); display: grid; place-items: center; padding: 0 4px } .burger { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0 } .burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: .15s } .topo.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .topo.open .burger span:nth-child(2) { opacity: 0 } .topo.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } .drawer { display: none; padding: 8px 20px 18px; background: #f8fafc; border-top: 1px solid var(--line) } .topo.open .drawer { display: block } .drawer[hidden] { display: none } .drawer-nav { display: flex; flex-direction: column } .drawer-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid #e8eef4; font: 600 14px var(--font-b); color: #334155; text-decoration: none } .drawer-nav a.on { color: var(--brand) } .drawer-sep { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 4px 2px } .drawer-nav a.drawer-wa { color: var(--wa-ink); display: flex; align-items: center; gap: 8px; border-bottom: 0; padding-top: 14px } .drawer-soc { display: flex; gap: 10px; padding-top: 14px; align-items: center } .drawer-soc a { width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; display: grid; place-items: center } .drawer-soc a.ig { color: #E4405F } .drawer-soc a.fb { color: #1877F2 } .drawer-soc a.tt { color: #000 } .drawer-soc a.wa { color: #25D366 } .drawer-soc a svg { width: 18px; height: 18px; display: block } .promo { background: linear-gradient(90deg, #082040, #0d3161 60%, #404098); color: #fff; border-bottom: 0 } .promo-in { position: relative; width: 100%; max-width: 1340px; margin: 0 auto; min-height: clamp(210px, 30vw, 420px) } .promo-slide { position: relative; display: none; align-items: flex-end; justify-content: flex-start; min-height: inherit; overflow: hidden; color: #fff; text-decoration: none } .promo-slide.on { display: flex; animation: promoIn .45s ease } .promo-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(6, 20, 44, 0) 38%, rgba(6, 20, 44, .78)); z-index: 1; pointer-events: none } @keyframes promoIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } .promo-fx { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; padding: clamp(16px, 3vw, 30px) clamp(18px, 4vw, 44px); max-width: min(680px, 86%) } .promo-tag { align-self: flex-start; font: 800 10px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; background: #fbbf24; color: #0b1120; border-radius: 99px; padding: 6px 11px } .promo-fx b { font-weight: 800; font-size: clamp(17px, 2.4vw, 26px); line-height: 1.15; text-shadow: 0 1px 10px rgba(0, 0, 0, .45) } .promo-sub { font-size: 13px; opacity: .92 } .promo-preco { font-weight: 800; font-size: 15px; color: #ffe08a } .promo-antigo { text-decoration: line-through; opacity: .65; font-size: 12px; margin-left: 6px; color: inherit } .promo-go { display: inline-block; margin-top: 10px; align-self: flex-start; background: #fff; color: #082040; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s } .promo-go:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5) } .promo-nav { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 6px; align-items: center } .promo-set { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); color: #fff; width: 26px; height: 26px; border-radius: 99px; cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center } .promo-set:hover { background: rgba(255, 255, 255, .18) } .promo-dots { display: flex; gap: 5px; align-items: center } .promo-dot { width: 7px; height: 7px; border-radius: 99px; border: none; background: rgba(255, 255, 255, .35); padding: 0; cursor: pointer } .promo-dot.on { background: #fbbf24; width: 18px } .promo-nav { pointer-events: none } .promo-nav .promo-set, .promo-nav .promo-dot { pointer-events: auto } @media(max-width:640px) { .promo-in { min-height: clamp(170px, 44vw, 240px) } .promo-fx { padding: 14px 16px } .promo-nav { right: 10px; bottom: 10px } } @media (prefers-reduced-motion:reduce) { .promo-slide.on { animation: none } } .hero-dirb { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, #082040, #0d3161 55%, #123f73) } .hero-cmyk { position: absolute; inset: 0; opacity: .22; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 0 0, #37b6f0 0 2px, transparent 2.1px), radial-gradient(circle at 100% 0, #f02890 0 2px, transparent 2.1px), radial-gradient(circle at 0 100%, #fff010 0 2px, transparent 2.1px), radial-gradient(circle at 100% 100%, #404098 0 2px, transparent 2.1px); background-size: 24px 24px; background-position: 0 0, 12px 0, 0 12px, 12px 12px } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; padding: 40px 0 12px } .hero-txt { min-width: 0 } .kicker { display: block; font-family: var(--font-d); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px } .hero-txt .kicker { color: #7dd3fc } .hero-txt h1 { font-family: var(--font-d); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin-top: 10px } .grad-txt { background: linear-gradient(90deg, #37b6f0, #ff7dc3, #37b6f0); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 6s linear infinite } @keyframes gradShift { to { background-position: 200% center } } .hero-txt .sub { margin: 18px 0 26px; font-size: 16.5px; line-height: 1.7; color: #c9d6e6; max-width: 52ch } .hero-txt .cta { display: flex; gap: 11px; margin-top: 28px; flex-wrap: wrap } .hero-meta { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; align-items: center } .hero-meta .hm { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #cfe0ef; font-weight: 600 } .hm-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0 } .hero-card { position: relative; z-index: 1; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; padding: 16px; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg) } .hc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px } .hc-top span { font-size: 12px; color: #a9bfd6; font-weight: 700 } .hc-tag { font-size: 10px; font-weight: 800; color: var(--ink); background: var(--gold); border-radius: 99px; padding: 3px 8px; letter-spacing: .03em } .hc-ph { aspect-ratio: 16/10; border-radius: 14px; position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255, 240, 16, .30), transparent 46%), linear-gradient(200deg, rgba(240, 40, 144, .34), transparent 56%), linear-gradient(135deg, rgba(8, 136, 200, .45), transparent 62%), linear-gradient(250deg, rgba(64, 64, 152, .55), #0d3161) } .hc-ph i { position: absolute; inset: 14px; border: 1.6px dashed rgba(255, 255, 255, .55); border-radius: 11px } .hc-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 } .hc-cap b { font-size: 13.5px; color: #fff; font-family: var(--font-d) } .hc-cap span { font-size: 11.5px; color: #a9bfd6; text-align: right } .hc-btn { width: 100% } .hero-dirb .wrap:last-child { padding-bottom: 6px } .passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding: 14px 0 42px; position: relative; z-index: 1 } .passo { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px; padding: 16px; display: grid; gap: 6px; align-content: start } .passo b { color: #fff; font-size: 14px } .passo span:not(.p-n) { color: rgba(230, 240, 250, .72); font-size: 12.8px; line-height: 1.5 } .p-n { width: 28px; height: 28px; border-radius: 99px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; display: grid; place-items: center; font-family: var(--font-d); font-weight: 700; font-size: 13px; box-shadow: 0 0 0 3px rgba(64, 182, 240, .14) } #selo-google-capa { margin-top: 18px } .corpo { padding: 46px 0 72px } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 22px } .sec-head .h2 { margin: 0 } .h2 { font-family: var(--font-d); font-size: clamp(23px, 3vw, 31px); letter-spacing: -.02em; line-height: 1.12; margin: 4px 0 0; color: var(--ink) } .intro { color: var(--muted); margin: 10px 0 24px; font-size: 14.5px; line-height: 1.6; max-width: 66ch } .dica { background: var(--brand-soft); border: 1px solid #cdecf9; border-radius: 16px; padding: 16px 18px; font-size: 13.5px; color: #155e75; line-height: 1.6; margin-top: 26px } .sec-head .h2::before { content: ""; display: block; width: 52px; height: 4px; border-radius: 99px; margin-bottom: 10px; background: linear-gradient(90deg, var(--gold), var(--pink), var(--brand), var(--indigo)) } .eyebrow-m { font-family: var(--font-d); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px } .brand-rule { height: 4px; width: 64px; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--pink), var(--brand), var(--indigo)) } #p-catalogo .cat-head { margin-bottom: 6px } #p-catalogo .cat-head .eyebrow-m { margin-bottom: 12px } #p-catalogo .cat-head h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08 } #p-catalogo .cat-head .intro { margin: 14px 0 0; font-size: 15px; max-width: 62ch } #p-catalogo .busca-row { gap: 18px; margin: 30px 0 8px } #p-catalogo #busca { border-radius: 14px; padding: 15px 18px; font-size: 15px; box-shadow: var(--shadow) } #p-catalogo .chips { gap: 8px; margin-top: 4px } #p-catalogo .cat-chip { border-radius: 999px; padding: 9px 16px; font-size: 13px } #p-catalogo .grid { margin-top: 26px } @media(max-width:560px) { #p-catalogo .cat-head h2 { font-size: 26px } #p-catalogo .grid { gap: 12px } } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px } .prod { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0 } .prod:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(8, 136, 200, .5) } .prod::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--pink), var(--brand), var(--indigo)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; z-index: 3 } .prod:hover::after { transform: scaleX(1) } .prod .thumb { aspect-ratio: auto; height: 136px; position: relative; display: grid; place-items: center; font-size: 40px; background: linear-gradient(165deg, #f2f7fb, #e4edf5) } .prod .thumb .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .prod .thumb .ph-count { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(11, 17, 32, .82); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 3px 8px; line-height: 1; pointer-events: none } .prod .tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px); font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--brand); padding: 4px 9px; border-radius: 999px; text-transform: uppercase } .selo-pers { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .02em; background: rgba(11, 17, 32, .92); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .5); border-radius: 99px; padding: 3px 9px; backdrop-filter: blur(3px); pointer-events: none } .prod .bd { padding: 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; border-top: 1px solid #f0f3f7 } .prod b { font-family: var(--font-d); font-size: 14px; line-height: 1.32; letter-spacing: -.01em; color: var(--ink) } .prod .desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere } .prod .price { margin-top: auto; padding-top: 9px; border-top: 1px dashed #e9edf2; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; row-gap: 2px } .prod .price span { grid-column: 1; font-size: 11px; color: var(--muted); font-weight: 600 } .prod .price b { grid-column: 2; justify-self: end; text-align: right; font-family: var(--font-d); font-size: 17px; color: var(--ink) } .prod .price em { grid-column: 1/-1; justify-self: end; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: right; line-height: 1.3 } .prod .fx { display: block; font-size: 11.5px; font-weight: 700; color: #0a7c4a; margin-top: 2px } .cat-pill { flex-shrink: 0; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer } .desq { display: inline-block; background: var(--gold); color: var(--ink); font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 6px } .faixas-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: radial-gradient(600px 200px at 100% 0, rgba(8, 136, 200, .35), transparent), var(--ink); color: #fff; border-radius: 20px; padding: 28px; margin: 52px 0 10px; box-shadow: var(--shadow-lg) } .faixas-cta h3 { font-family: var(--font-d); font-size: 19px; margin-bottom: 6px } .faixas-cta p { color: rgba(255, 255, 255, .75); font-size: 13.5px; max-width: 460px } .busca-row { display: grid; gap: 14px; margin-bottom: 8px } #busca { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 18px; font-family: var(--font-b); font-size: 15px; outline: none; background: #fff; color: var(--ink) } #busca:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(8, 145, 178, .10) } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px } .cat-chip { flex-shrink: 0; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s } .cat-chip:hover { border-color: var(--brand-2); color: var(--brand) } .cat-chip.on { background: var(--ink); color: #fff; border-color: var(--ink) } .cat-vazio { display: none; color: var(--muted); text-align: center; padding: 44px 0 } .cat-vazio a { color: var(--brand); font-weight: 700 } .chip-demo { background: rgba(2, 20, 27, .82); color: #fde68a; border: 1px solid rgba(253, 230, 138, .35); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 99px; letter-spacing: .04em } .foto-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ink); border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; position: relative; overflow: hidden; color: #fff } .foto-cta::before { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 40, 144, .35), transparent 70%) } .foto-cta b { color: var(--gold); font-size: 15px } .foto-cta span { display: block; font-size: 13.5px; color: #c7d5e4; margin-top: 3px } .foto-cta .btn { position: relative; z-index: 1; flex: none } .foot { margin-top: 0; background: radial-gradient(900px 320px at 88% -20%, rgba(8, 136, 200, .28), transparent), radial-gradient(700px 300px at -8% 120%, rgba(240, 40, 144, .15), transparent), var(--ink); color: #c7d5e4; border-top: 4px solid var(--brand) } .f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; padding: 50px 20px 30px } .f-grid b { display: block; color: #fff; font-family: var(--font-d); font-size: 13.5px; margin-bottom: 16px } .f-marca .logo img { height: 42px; width: auto; margin-bottom: 14px } .f-marca p { font-size: 13px; line-height: 1.7; max-width: 300px; color: #93a7bd } .f-col a, .f-col span { display: block; font-size: 13px; padding: 5px 0; color: #c7d5e4 } .f-col a:hover { color: #67e8f9 } .ft-paginas a { color: #c7d5e4; font-size: 13px; text-decoration: none } .ft-redes { display: flex; gap: 9px; margin-top: 16px } .rede { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #cbd5e1; transition: .15s } .rede:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px) } .rede-icone { width: 20px; height: 20px; object-fit: contain; border-radius: 5px } .f-pay-line { background: rgba(255, 255, 255, .02); border-top: 1px solid rgba(255, 255, 255, .1) } .f-pay-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px } .f-pay-lbl { font-family: var(--font-d); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #93a7bd } .pay { display: flex; gap: 7px; flex-wrap: wrap; align-items: center } .pb { height: 28px; min-width: 52px; padding: 0 11px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-d); font-weight: 800; font-size: 10.5px; letter-spacing: .01em } .pb svg { width: 16px; height: 16px } .pb.pix { background: #32bc76; color: #fff } .pb.visa { background: #1a1f71; color: #fff; font-style: italic } .pb.mc { background: #fff; color: #202020; border: 1px solid rgba(255, 255, 255, .18) } .pb .md { display: inline-flex } .pb .md i { width: 13px; height: 13px; border-radius: 99px } .pb .md i:first-child { background: #eb001b } .pb .md i:last-child { background: #f79e1b; margin-left: -5px } .pb.elo { background: #fff; color: #202020; border: 1px solid rgba(255, 255, 255, .18) } .pb .el { display: inline-flex; position: relative; width: 17px; height: 12px } .pb .el i { position: absolute; top: 0; width: 12px; height: 12px; border-radius: 99px; opacity: .9 } .pb .el i:nth-child(1) { left: 0; background: #111 } .pb .el i:nth-child(2) { left: 4px; background: #f9bf17 } .pb .el i:nth-child(3) { left: 8px; background: #00a4e0 } .pb.hiper { background: #c8102e; color: #fff } .pb.amex { background: #2e77bc; color: #fff } .pb.diners { background: #0079be; color: #fff } .f-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 20px; color: #8fa3ba; font-size: 12px } .f-lock { color: #3fd69a; display: inline-flex; align-items: center; gap: 6px; font-weight: 600 } .f-empresa { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; border-top: 1px solid rgba(255, 255, 255, .06); margin: 0; padding: 14px 20px 18px; font-size: 12px; color: rgba(226, 232, 240, .55); text-align: center } .wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; border-radius: 99px; background: var(--wa); color: #fff; display: grid; place-items: center; font-size: 24px; text-decoration: none; box-shadow: 0 12px 26px -6px rgba(37, 211, 102, .55); transition: transform .15s } .wa-fab svg { width: 28px; height: 28px; display: block } .wa-fab:hover { transform: scale(1.08) } .toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none } .fab-topo { position: fixed; bottom: 70px; right: 20px; z-index: 89; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(8, 136, 200, .4); transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateY(10px) } .fab-topo.visible { opacity: 1; transform: translateY(0) } .toast { background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(2, 20, 27, .35); opacity: 0; transform: translateY(8px); transition: all .3s; pointer-events: auto } .toast.show { opacity: 1; transform: none } .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; gap: 10px; align-items: center; justify-content: center; background: var(--ink); color: #d7e0ea; border-top: 1px solid rgba(255, 255, 255, .14); border-radius: 0; padding: 8px 14px; box-shadow: 0 -8px 22px rgba(8, 32, 64, .16); font-size: 11.5px; line-height: 1.4; max-width: none; margin: 0 } .cookie-bar p { margin: 0 } .cookie-bar a { color: #7dd3fc; font-weight: 700; text-decoration: underline } .cookie-bts { display: flex; gap: 8px; flex-shrink: 0 } .page { display: none; animation: fade .25s ease } .page.on { display: block } @keyframes fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } .prova { background: #fbfcfe; border-top: 1px solid var(--line); padding: 44px 0 48px } .prova[hidden] { display: none } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow) } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #eef2f6; font-size: 12px; font-weight: 600; color: var(--ink) } .ic { font-style: normal } .pd { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start } .pd .fig { border-radius: 22px; aspect-ratio: 1/1; display: grid; place-items: center; font-size: 110px; background: linear-gradient(160deg, #eef4f8, #dfe9f1); box-shadow: var(--shadow); position: relative; overflow: hidden } .pd .fig small { font-size: 12px; color: var(--muted); margin-top: 14px; grid-area: 1/1 } .pd .fig img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px } .pd h1 { font-family: var(--font-d); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; line-height: 1.12 } .pd .sub { color: var(--muted); margin-top: 12px; line-height: 1.65; font-size: 15px; white-space: pre-line } .pd .from { display: flex; align-items: baseline; gap: 10px; margin: 24px 0; padding: 18px 20px; background: var(--brand-soft); border-radius: 16px } .pd .from span { font-size: 13px; font-weight: 600; color: var(--brand) } .pd .from b { font-family: var(--font-d); font-size: 30px; color: var(--ink) } .pd .from small { font-size: 12px; color: var(--muted); margin-left: auto; max-width: 20ch; text-align: right } #p-produto .corpo { padding: 34px 0 84px } #p-produto .btn.btn-o.btn-sm { margin-bottom: 0 } .pd { border-radius: 24px } .pd .fig { border-radius: 20px; box-shadow: 0 1px 2px rgba(8, 32, 64, .05), 0 24px 48px -28px rgba(8, 32, 64, .4); background: linear-gradient(160deg, #eef4f8, #dbe7f1) } .pd .fig img { border-radius: 20px } .pd h1 { font-size: clamp(27px, 3.4vw, 40px) } .pd .from { position: relative; border-radius: 16px; background: linear-gradient(120deg, #082040, #123f73); color: #fff; padding: 20px 22px; margin: 26px 0; overflow: hidden } .pd .from::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, #fff010, #f02890, #37b6f0, #7b6cf0) } .pd .from span { color: rgba(255, 255, 221, .85); font-weight: 600 } .pd .from b { color: #fff; font-size: 34px } .pd .from small { color: rgba(255, 255, 221, .8); opacity: 1; max-width: 26ch; text-align: left; margin-left: auto; display: block } .tiers { box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: 16px; overflow: hidden } .tiers th { background: #f2f6fa } .tiers tr.on td { background: var(--brand-soft) } .tiers td b { color: var(--ok) } .qsel { border-radius: 14px } .qsel button:hover { background: var(--paper) } .pd-cta .btn-b { flex: 1 } .pd .meta { margin-top: 28px } @media(max-width:900px) { .pd { grid-template-columns: 1fr; gap: 30px } .pd .from small { margin-left: 0; max-width: none } } .gal { display: flex; gap: 8px; margin-top: 10px } .gal-b { width: 56px; height: 56px; border-radius: 10px; border: 2px solid #d7e3ef; background: #fff; padding: 0; cursor: pointer; overflow: hidden; transition: border-color .15s } .gal-b img { width: 100%; height: 100%; object-fit: cover; display: block } .gal-b.on { border-color: var(--brand) } .gal-b:hover { border-color: var(--brand-2) } .tiers { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 14px } .crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 6px } .crumb a { color: var(--brand-2); font-weight: 600; text-decoration: none } .crumb a:hover { text-decoration: underline } .crumb b { color: var(--ink); font-weight: 700 } .pd-cada { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--brand-2) } .pd-troca { margin: 10px 0 0; font-size: 12.5px; color: var(--muted) } .tiers th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1.5px solid var(--line) } .tiers td { padding: 11px 12px; border-bottom: 1px dashed var(--line) } .tiers td:last-child { text-align: right; font-weight: 700; font-family: var(--font-d) } .tiers tr.on td { background: var(--brand-soft) } .opt { display: flex; gap: 12px; margin-bottom: 12px } .opt input { accent-color: var(--brand-2); width: 18px; height: 18px; margin-top: 2px } .opt label { font-size: 14px; line-height: 1.5; cursor: pointer } .opt small { display: block; color: var(--muted); font-size: 12.5px } .qsel { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; width: max-content; margin: 6px 0 20px } .qsel button { width: 44px; height: 44px; border: none; background: #fff; font-size: 20px; cursor: pointer; color: var(--ink) } .qsel button:hover { background: var(--paper) } .qsel b { width: 70px; text-align: center; font-family: var(--font-d); font-size: 16px } .pd-cta { display: flex; gap: 12px; flex-wrap: wrap } .pd .meta { margin-top: 26px; display: grid; gap: 10px } .meta div { display: flex; gap: 10px; font-size: 13px; color: var(--muted); align-items: center } .meta svg { width: 16px; height: 16px; stroke: var(--brand-2); flex-shrink: 0 } .thumb { position: relative; display: grid; place-items: center; font-size: 40px; background: linear-gradient(160deg, #eef4f8, #e2ecf3) } .gabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px } .gab { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: .15s } .gab:hover { border-color: var(--brand-2) } .gab .ic { font-size: 30px; margin-bottom: 14px } .gab b { font-size: 15px; display: block } .gab .fmt { font-family: var(--font-d); font-size: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; padding: 4px 10px; display: inline-block; margin: 10px 0 } .gab p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; overflow-wrap: anywhere } .gab .dl { display: flex; gap: 8px; flex-wrap: wrap } .auth { max-width: 460px; margin: 0 auto } .auth-wrap { max-width: 460px; margin: 0 auto } .auth h2, .auth-wrap h2 { font-family: var(--font-d); font-size: 24px; letter-spacing: -.02em } .auth p, .auth-wrap p { color: var(--muted); font-size: 14px; margin: 8px 0 22px; line-height: 1.6 } .auth .card, .auth-wrap .card { border-radius: 20px } .cad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 980px } .cad-side .h2 { margin-top: 6px } .cad-side .intro { margin-top: 16px } .cad-bens { list-style: none; display: grid; gap: 16px; margin-top: 26px } .cad-bens li { display: flex; gap: 14px; align-items: center } .cad-bens b { font-size: 14px; display: block } .cad-bens small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px } .hc-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--brand-soft); color: var(--brand) } .wa-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; margin: 18px 0 } .wa-or::before, .wa-or::after { content: ""; flex: 1; height: 1px; background: var(--line) } .tabs { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 26px; overflow-x: auto } .tabs button { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; font-family: var(--font-b); white-space: nowrap } .tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow) } .f { margin-bottom: 14px } .f label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2) } .f input, .f select, .ef-cep { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-family: var(--font-b); font-size: 15px; outline: none; transition: .15s; background: #fff; color: var(--ink) } .f input:focus, .ef-cep:focus { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(8, 145, 178, .12) } #p-conta .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, var(--ink), #0f3f7a 70%); color: #fff; border-radius: 20px; padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--shadow-lg) } #p-conta .sec-head h2 { color: #fff; display: flex; align-items: center; gap: 10px; margin: 0 } #p-conta .sec-head h2::before { background: linear-gradient(90deg, #fff010, #f02890, #37b6f0, #7b6cf0) } #p-conta .sec-head p { color: #c9d6e6; font-size: 13.5px; margin-top: 2px } #p-conta .sec-head .btn { color: #fff } #p-conta .tabs { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: sticky; top: 76px; z-index: 20 } #p-conta .tabs button.on { background: var(--brand); color: #fff; box-shadow: none } .dash-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px } .dn { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden } .dn b { font-size: 29px; font-weight: 800; line-height: 1.15; color: var(--ink) } .dn-rot { font-size: 12.5px; font-weight: 700; color: var(--ink-2) } .dn-sub { font-size: 12px; color: var(--muted) } .dn.dn-largo { grid-column: span 1 } .dn.dn-alerta { border-color: #fca5a5; background: linear-gradient(180deg, #fef2f2, #fff 70px) } .dn.dn-alerta b { color: var(--bad) } .dash-acoes { background: #fff; border: 1.5px solid #fca5a5; border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow); border-left: 5px solid var(--amber) } .dash-acoes h3 { font-family: var(--font-d); font-size: 15px; font-weight: 800; margin: 0 0 8px; color: var(--bad) } .acao { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; margin-top: 10px; flex-wrap: wrap } .acao:first-of-type { margin-top: 4px } .acao-txt { flex: 1; min-width: 210px } .acao-txt b { display: block; font-size: 14.5px; margin-bottom: 3px } .acao-txt p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55 } .dash-ok { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 16px; padding: 20px 22px; margin-bottom: 18px } .dash-ok b { display: block; font-size: 15px; color: #15803d; margin-bottom: 4px } .dash-ok p { margin: 0; font-size: 13.5px; color: #166534 } .dash-rodape { display: flex; gap: 10px; flex-wrap: wrap } .vazio-resumo { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 44px 26px; text-align: center; box-shadow: var(--shadow) } .vazio-resumo .ic { font-size: 38px; margin-bottom: 12px } .vazio-resumo b { display: block; font-size: 17px; margin-bottom: 6px } .vazio-resumo p { color: var(--muted); font-size: 14px; margin: 0 auto 18px; max-width: 380px } .order { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 14px; border-left: 5px solid var(--brand-soft) } .order:hover { border-left-color: var(--brand); transform: translateY(-1px) } .order .top { display: flex; justify-content: space-between; gap: 14px; align-items: start; flex-wrap: wrap } .order b { font-family: var(--font-d); font-size: 16px } .order .when { font-size: 12.5px; color: var(--muted); margin-top: 3px } .st { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-family: var(--font-d) } .st i { width: 7px; height: 7px; border-radius: 99px; font-style: normal } .st-rascunho { background: var(--paper); color: var(--muted) } .st-rascunho i { background: #94a3b8 } .st-orcado { background: var(--brand-soft); color: var(--brand) } .st-orcado i { background: var(--brand-2) } .st-aprovado { background: #dcfce7; color: #166534 } .st-aprovado i { background: #22c55e } .st-producao { background: var(--amber-soft); color: #92400e } .st-producao i { background: var(--amber) } .st-pronto { background: #ececf8; color: var(--indigo) } .st-pronto i { background: var(--indigo) } .order .val { font-family: var(--font-d); font-weight: 700; font-size: 16px; margin-top: 12px } .tl { display: flex; margin-top: 16px } .tl .p { flex: 1; text-align: center; position: relative; font-size: 10.5px; color: var(--muted); font-weight: 600 } .tl .p::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 99px; background: var(--line); margin: 0 auto 7px; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line) } .tl .p.done::before { background: var(--brand-2); box-shadow: 0 0 0 1.5px var(--brand-2) } .tl .p.done { color: var(--brand) } .tl .p:not(:last-child)::after { content: ""; position: absolute; top: 6px; left: calc(50% + 10px); width: calc(100% - 20px); height: 2px; background: var(--line) } .tl .p.done:not(:last-child)::after { background: var(--brand-2) } .tlv { margin-top: 14px; border-left: 3px solid var(--line); padding-left: 0; display: flex; flex-direction: column; gap: 2px } .tlv .p { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 0 4px 16px } .tlv .p .dot { position: absolute; left: -8px; top: 8px; width: 13px; height: 13px; border-radius: 99px; background: #fff; border: 3px solid var(--line) } .tlv .p.done { color: var(--ink) } .tlv .p.done .dot { border-color: var(--brand-2); background: var(--brand-2) } .end-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px } .end-topo h3 { font-size: 19px; font-weight: 800; margin: 0 } .end-topo p { font-size: 13.5px; color: var(--muted); margin: 3px 0 0 } .end-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; margin-bottom: 20px } .end-card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; position: relative; box-shadow: var(--shadow); display: flex; flex-direction: column } .end-card.e-padrao { border-color: var(--wa); background: linear-gradient(180deg, #f6fefa, #fff 60px) } .e-selo { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 800; color: var(--wa-ink); background: #dcfce7; padding: 4px 9px; border-radius: 999px; letter-spacing: .02em } .e-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 7px } .e-ic { font-size: 17px; line-height: 1 } .e-topo b { font-size: 15px; font-weight: 800 } .e-txt { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; overflow-wrap: anywhere; flex: 1 } .e-cep { font-size: 12px; opacity: .8 } .e-acoes { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap } .end-form { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow) } .end-form.e-editando { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .09) } .ef-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line) } .ef-cab b { font-size: 16px; font-weight: 800 } .ef-passo { display: flex; gap: 14px; padding-bottom: 20px; position: relative } .ef-passo:not(.ef-ultimo)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 6px; width: 2px; background: var(--line) } .ef-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1 } .ef-corpo { flex: 1; min-width: 0 } .ef-lb { display: block; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px } .ef-cep-linha { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap } .ef-cep { max-width: 170px; font-variant-numeric: tabular-nums; letter-spacing: .03em } .ef-cep-linha .cep-aviso { margin-top: 0; align-self: center; min-height: 0 } .cep-aviso { font-size: 12.5px; margin-top: 6px; min-height: 17px; font-weight: 600 } .end-cep { max-width: 220px } .ef-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px } .ef-grid .f { margin: 0; min-width: 0 } .ef-grid .g-3 { grid-column: span 3 } .ef-grid .g-4 { grid-column: span 4 } .ef-grid .g-6 { grid-column: span 6 } .ef-grid .g-8 { grid-column: span 8 } .ef-grid .g-9 { grid-column: span 9 } .ef-grid label small { font-weight: 500; opacity: .6 } .ef-rodape { margin-top: 4px; padding-left: 42px } .ef-rodape .btn { min-width: 190px; justify-content: center } .chips-rotulo { display: flex; gap: 8px; flex-wrap: wrap } .chip-rot { padding: 8px 16px; border: 1.5px solid var(--line); background: var(--card); border-radius: 99px; font-family: var(--font-b); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 6px } .chip-rot:hover { border-color: var(--brand-2); color: var(--brand) } .chip-rot.on { background: var(--brand); border-color: var(--brand); color: #fff } .end-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 2px } .end-grid .col-rua { grid-column: span 4 } .end-grid .col-num { grid-column: span 2 } .end-grid .col-compl { grid-column: span 3 } .end-grid .col-bairro { grid-column: span 3 } .end-grid .col-cidade { grid-column: span 4 } .end-grid .col-uf { grid-column: span 2 } .end-grid .f { margin: 0 } .ci { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow) } .ci .th { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(160deg, #eef4f8, #dfe9f1); display: grid; place-items: center; font-size: 28px; flex-shrink: 0; overflow: hidden } .ci .th img { width: 100%; height: 100%; object-fit: cover } .ci b { font-size: 14.5px } .ci small { color: var(--muted); font-size: 12.5px; display: block; margin-top: 3px; line-height: 1.5 } .ci .val { margin-left: auto; font-family: var(--font-d); font-weight: 700; white-space: nowrap } .sum { background: var(--ink); color: #fff; border-radius: 20px; padding: 26px; margin-top: 20px } .ck-steps { display: flex; gap: 0; margin: 4px 0 16px } .ck-steps div { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); padding: 10px 4px; border-bottom: 3px solid var(--line) } .ck-steps div.on { color: var(--ink); border-color: var(--brand-2) } .ck-steps div.done { color: #0a7c4a; border-color: #0a7c4a } .sum .row { display: flex; justify-content: space-between; font-size: 14px; color: #c7d5e4; padding: 7px 0 } .sum .row:has(.fr-preco) { color: #fff } .sum .tot { display: flex; justify-content: space-between; border-top: 1px dashed rgba(255, 255, 255, .25); margin-top: 10px; padding-top: 14px; font-family: var(--font-d); font-weight: 700; font-size: 19px } .tot b { font-family: var(--font-d) } .callout { border-radius: 16px; padding: 16px 18px; font-size: 13.5px; line-height: 1.6; margin: 16px 0 } .co-amber { background: var(--amber-soft); color: #92400e; border: 1px dashed var(--amber) } .co-blue { background: var(--brand-soft); color: #0c4a6e; border: 1px dashed var(--brand-2) } .co-green { background: #dcfce7; border: 1px solid #86efac; color: #14532d } .empty { text-align: center; padding: 70px 20px; color: var(--muted) } .empty .e { font-size: 44px; margin-bottom: 14px } .empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px } .empty p { font-size: 13.5px } .fr { margin-top: 16px; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 17px; background: #fff } .fr-t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px } .fr-cep { display: flex; gap: 9px; align-items: center } .fr-cep input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--font-b); font-size: 14px; background: var(--paper); color: var(--ink) } .fr-cep input:focus { outline: none; border-color: var(--brand-2); background: #fff } .fr-msg { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55 } .fr-msg.fr-erro { color: var(--bad) } .fr-lista { display: grid; gap: 8px; margin-top: 12px } .fr-op { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--paper); cursor: pointer } .fr-op.on { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 3px rgba(30, 64, 175, .08) } .fr-op input { accent-color: var(--brand-2); width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer } .fr-op div { flex: 1; min-width: 0 } .fr-op b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink) } .fr-op small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px } .fr-preco { font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap } .pag { margin-top: 16px; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 17px; background: #fff } .pag-t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px } .pag-g { display: grid; gap: 9px } .pag-i { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--paper) } .pag-i.on { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4, #dcfce7) } .pag-ic { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #fff; border: 1.5px solid var(--line); color: var(--brand-2) } .pag-i.on .pag-ic { border-color: #86efac; color: #15803d } .pag-ic svg { width: 18px; height: 18px } .pag-i b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink) } .pag-i small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45 } .pag-i.on small { color: #15803d; font-weight: 600 } .pag-obs { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55 } #modal-app { border: 0; padding: 0; background: transparent; max-width: min(560px, 92vw); width: 100% } #modal-app::backdrop { background: rgba(11, 31, 58, .55); backdrop-filter: blur(3px) } #modal-app .modal-in { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-lg); max-height: 88vh; overflow: auto } #modal-app h3 { font-family: var(--font-d); font-size: 19px; margin-bottom: 12px } #modal-app input[type=file] { width: 100%; padding: 11px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: 13px; background: var(--paper); cursor: pointer } #modal-app input[type=file]:hover { border-color: var(--brand) } #modal-app textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; resize: vertical } #modal-app textarea:focus { outline: 0; border-color: var(--brand) } .arte-erro { background: var(--bad-soft); border: 1.5px solid #fca5a5; border-radius: 11px; padding: 13px 15px; margin: 0 0 13px; font-size: 13.5px; color: var(--bad); line-height: 1.6 } .arte-erro[hidden] { display: none } .arte-erro b { display: block; margin-bottom: 3px } .doc-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start } .doc-lista { display: grid; gap: 3px; position: sticky; top: 90px } .doc-lista a { display: flex; gap: 9px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 11px; border-radius: 9px; text-decoration: none; line-height: 1.3 } .doc-lista a span { font-size: 15px } .doc-lista a:hover { background: var(--paper); color: var(--ink) } .doc-lista a.on { background: var(--brand-soft); color: var(--brand) } .doc { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden } .doc-head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; background: linear-gradient(160deg, #f8fafc, #eef2f7); border-bottom: 1px solid var(--line) } .doc-head .ic { font-size: 26px; line-height: 1 } .doc-head h1 { font-family: var(--font-d); font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -.01em; margin: 2px 0 4px } .doc-head p { font-size: 13px; color: var(--muted); margin: 0 } .doc-body { padding: 22px 26px; font-size: 14.5px; line-height: 1.72; color: #26303e } .doc-body h3 { font-size: 15.5px; font-weight: 800; margin: 24px 0 8px; letter-spacing: -.01em; display: flex; gap: 9px; align-items: baseline } .doc-body h3:first-child { margin-top: 0 } .doc-body h3 .n { color: var(--brand-2); font-size: 12.5px; font-weight: 800 } .doc-body p { margin: 0 0 12px } .doc-body ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px } .doc-body li::marker { color: var(--brand-2) } .doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px } .doc-body th { background: var(--paper); text-align: left; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 12px; border: 1px solid var(--line) } .doc-body td { padding: 9px 12px; border: 1px solid var(--line); vertical-align: top } .doc-body .dest { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 11px; padding: 12px 14px; font-size: 13.5px; margin: 14px 0 } .doc-body .nota-legal { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted) } .doc-rodape { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: #f8fafc; flex-wrap: wrap } .prova-nota { display: flex; align-items: center; gap: 16px; justify-content: center; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 24px; max-width: 560px; margin: 0 auto 26px; box-shadow: var(--shadow); flex-wrap: wrap } .pg-logo { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center } .pg-logo svg { width: 26px; height: 26px; display: block } .pg-txt { text-align: left; line-height: 1.4 } .pg-linha { display: flex; align-items: center; gap: 8px } .pg-linha b { font-size: 23px; font-weight: 800; color: var(--ink) } .pg-txt span { font-size: 13px; color: var(--muted) } .estrelas { color: #fbbf24; letter-spacing: 2px; font-size: 15px; line-height: 1 } .prova-deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; max-width: 1080px; margin: 0 auto; padding: 0 20px } .dep { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 0; box-shadow: var(--shadow) } .dep blockquote { margin: 9px 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--ink); quotes: "\201C" "\201D" } .dep blockquote::before { content: open-quote } .dep blockquote::after { content: close-quote } .dep figcaption { font-size: 12.5px; color: var(--muted); font-weight: 600 } .dep-avatar { width: 18px; height: 18px; border-radius: 99px; object-fit: cover; vertical-align: -4px; margin-right: 4px } .selo-google { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); width: max-content } .ft-topo { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40 } .ft-topo-in { max-width: 960px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px } .ft-topo-in img { height: 32px; width: auto; display: block } .ft-topo-in .ft-voltar { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; transition: .15s } .ft-topo-in .ft-voltar span { transition: transform .15s } .ft-topo-in .ft-voltar:hover { color: var(--brand); border-color: var(--brand-2) } .ft-topo-in .ft-voltar:hover span { transform: translateX(-2px) } .fpc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px } .fpc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column } .fpc-n { font-weight: 700; font-size: 12px; color: var(--ink); line-height: 1.35; min-height: 33px } .fpc-p { font-family: var(--font-d); font-weight: 800; font-size: 18px; color: var(--ink); margin-top: 2px } .fpc-t { margin-top: 7px; align-self: flex-start; background: #e8f7ef; color: #0a7a55; font-weight: 700; font-size: 9.5px; padding: 3px 8px; border-radius: 999px; letter-spacing: .02em } .btn-mini { padding: 6px 11px; font-size: 12.5px; border-radius: 9px } .v-ok { color: #15803d } .v-bad { color: var(--bad) } .v-mid { color: #b45309 } .tabbar-m { display: none } @media (max-width:960px) { .grid { grid-template-columns: repeat(3, 1fr) } .gabs { grid-template-columns: 1fr 1fr } .f-grid { grid-template-columns: 1fr 1fr; gap: 26px } .doc-wrap { grid-template-columns: 1fr; gap: 14px } .doc-lista { position: static; grid-template-columns: 1fr 1fr; gap: 5px } .dash-num { grid-template-columns: repeat(2, 1fr) } .cad-grid { grid-template-columns: 1fr } nav.main { display: none } .socials.top { display: none } .bar-sep { display: none } .btn-wa-topo .wa-txt { display: none } .btn-wa-topo { width: 36px; padding: 0; justify-content: center } .burger { display: inline-flex } .topo .bar { gap: 12px } } @media (max-width:900px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; padding: 38px 0 26px } .hero-card { max-width: 480px } } @media (max-width:960px) { .tabbar-m { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: 7px 6px calc(9px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px -12px rgba(8, 32, 64, .18) } .tabbar-m a { flex: 1; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0; border-radius: 10px } .tabbar-m a .em { display: block; font-size: 17px; margin-bottom: 2px; font-style: normal } .tabbar-m a.on { color: var(--brand) } .tabbar-m a.f { color: var(--pink) } .tabbar-m button.tab-menu { flex: 1; display: block; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0; border: 0; background: none; border-radius: 10px; font-family: inherit; cursor: pointer } .tabbar-m button.tab-menu .em { display: block; font-size: 17px; margin-bottom: 2px } body { padding-bottom: 72px } } @media (max-width:720px) { .grid { grid-template-columns: repeat(2, 1fr) } .passos { grid-template-columns: 1fr } .f-grid { grid-template-columns: 1fr } .faixas-cta { flex-direction: column; align-items: flex-start } #p-conta .dash-num { grid-template-columns: repeat(2, 1fr); gap: 10px } #p-conta .tabs { position: static } } @media (max-width:560px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px } .prod .thumb { height: 108px } .prod .bd { padding: 12px } .gabs { grid-template-columns: 1fr } .hero-txt h1 { font-size: 30px } .hero-txt .sub { font-size: 15px } .passos { padding-top: 6px } .foto-cta { padding: 16px } .doc-body, .doc-head { padding: 18px 16px } .ef-grid { grid-template-columns: repeat(6, 1fr) } .ef-grid .g-8 { grid-column: span 4 } .ef-grid .g-4 { grid-column: span 2 } .ef-grid .g-6 { grid-column: span 6 } .ef-grid .g-9 { grid-column: span 4 } .ef-grid .g-3 { grid-column: span 2 } .ef-rodape { padding-left: 0 } .ef-rodape .btn { width: 100% } .end-form { padding: 18px 16px } .ft-topo-in img { height: 26px } } @media (max-width:620px) { .end-grid { grid-template-columns: repeat(4, 1fr) } .end-grid .col-rua { grid-column: span 4 } .end-grid .col-num { grid-column: span 2 } .end-grid .col-compl { grid-column: span 2 } .end-grid .col-bairro { grid-column: span 4 } .end-grid .col-cidade { grid-column: span 3 } .end-grid .col-uf { grid-column: span 1 } .end-cep { max-width: none } } @media (max-width:480px) { #p-conta .dash-num { grid-template-columns: 1fr 1fr } } #p-inicio .vitrine-wrap { padding-top: 76px; padding-bottom: 70px } #p-inicio .vitrine-wrap .sec-head { margin-bottom: 28px } #p-inicio .vitrine-wrap .grid { margin-bottom: 0 } #p-inicio .fotosband { margin: 0; padding: 68px 0 } #p-inicio .fim-wrap { padding-top: 68px; padding-bottom: 70px } #p-inicio .fim-wrap .faixas-cta { margin: 0 } .passos { padding: 16px 0 46px } @media (prefers-reduced-motion:no-preference) { @keyframes heroUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } #p-inicio .hero-dirb .hero-grid>* { animation: heroUp .6s cubic-bezier(.2, .7, .2, 1) both } #p-inicio .hero-dirb .passos>* { animation: heroUp .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .12s } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } } .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; flex-wrap: wrap } .sec-h h2 { font-family: var(--font-d); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; color: var(--ink); line-height: 1.1 } .sec-h p { color: var(--muted); font-size: 13.5px; margin-top: 6px } .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } @media(max-width:520px) { .dois { grid-template-columns: 1fr } } .ck-aceite { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 13px; font-size: 12.5px; color: var(--muted); line-height: 1.5; cursor: pointer } .ck-aceite input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto } .st-recebido { background: var(--brand-soft); color: var(--brand) } .st-recebido i { background: var(--brand-2) } #p-conta .sec-h { align-items: center; background: linear-gradient(120deg, var(--ink), #0f3f7a 70%); color: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow-lg) } #p-conta .sec-h h2 { color: #fff; display: flex; align-items: center; gap: 10px } #p-conta .sec-h p { color: #c9d6e6; margin-top: 4px } #p-conta .sec-h .btn { color: #fff; border-color: rgba(255, 255, 255, .25) } .pay { display: flex; gap: 6px; flex-wrap: wrap; align-items: center } .pb { padding: 0; background: none; min-width: 0; height: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); border-radius: 5px; overflow: hidden; display: inline-flex } .pb svg { height: 30px; width: auto; display: block } .pb[class] { line-height: 1 } .f-grid { row-gap: 34px } .f-grid .f-col { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 16px } @media(min-width:961px) { .f-grid .f-col { border-top: 0; padding-top: 0; border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 26px } .f-grid .f-col:first-of-type { margin-top: 0 } } .f-base { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 20px; border-top: 1px solid rgba(255, 255, 255, .1); color: #8fa3ba; font-size: 12.5px } .f-base-l { display: flex; align-items: center; gap: 18px; flex-wrap: wrap } .f-google { color: #fbbf24 } .f-empresa { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1120px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .06); padding: 12px 20px 16px; font-size: 12px; color: rgba(226, 232, 240, .55); text-align: center } .fotosband { position: relative; color: #fff; background: linear-gradient(120deg, #082040, #404098); overflow: hidden; border-radius: 0; margin: 0; padding: 60px 0 } .fotosband>.hero-cmyk { opacity: .18 } .fb-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center } .fotosband h2 { font-family: var(--font-d); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.12; margin-top: 6px } .fotosband h2 em { font-style: normal; color: var(--gold) } .fotosband p { color: #c9d6e6; margin: 12px 0 18px; font-size: 14.5px; line-height: 1.7; max-width: 48ch } .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px } .tags span { font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); padding: 5px 11px; border-radius: 99px; color: #e6edf5 } .fp-ph { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; transform: rotate(-1deg); box-shadow: var(--shadow-lg) } .fp-ph .ph { position: absolute; inset: 0; background: conic-gradient(from 210deg at 50% 60%, #fff010, #f02890, #37b6f0, #404098, #fff010), linear-gradient(#fff, transparent) } .fp-ph .ph::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.2px); background-size: 14px 14px; opacity: .32 } @media(max-width:820px) { .fb-in { grid-template-columns: 1fr; padding: 0 22px } .fp-ph { max-width: 440px } } .foot { background: #071a33; color: #9fb6cf; border-top: 0; margin-top: 0 } .foot .f-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 20px; padding: 50px 20px 30px } .foot .f-col { border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 22px; border-top: 0; padding-top: 0 } .foot .f-brand { border-left: none; padding-left: 0; border-top: 0 } .foot .f-brand .logo img { height: 56px; width: auto; margin-bottom: 0 } .foot .f-brand .logo { display: inline-block; line-height: 0 } .foot h4 { color: #fff; font-family: var(--font-d); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 15px; display: flex; align-items: center; gap: 8px } .foot h4 .hl { width: 18px; height: 3px; margin: 0; padding: 0; border-radius: 99px; background: linear-gradient(90deg, #fff010, #f02890, #0888c8, #404098); flex-shrink: 0; min-width: 18px; display: inline-block; line-height: 1; box-sizing: content-box } .foot .desc { font-size: 13px; line-height: 1.7; max-width: 30ch; margin-top: 14px; color: #9fb6cf } .foot .f-col a { display: flex; align-items: center; gap: 8px; color: #a9bcd2; font-size: 13px; padding: 5px 0; transition: .15s; position: relative; text-decoration: none } .foot .f-col a::before { content: "›"; color: var(--brand-2); font-weight: 700; font-size: 12px; opacity: .8; transition: .15s; line-height: 1 } .foot .f-col a:hover { color: #fff } .foot .f-col a:hover::before { transform: translateX(2px); opacity: 1 } .foot .f-col .ft-paginas { display: block } .foot .f-col .ft-paginas a { display: flex; align-items: center; gap: 8px; color: #a9bcd2; font-size: 13px; padding: 5px 0 } .foot .f-col .ft-paginas a::before { content: "›"; color: var(--brand-2); font-weight: 700; font-size: 12px; opacity: .8 } .foot .f-col .ft-paginas a:hover { color: #fff } .foot .ft-redes { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap } .foot .ft-redes a.rede { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: #cdd9ea; transition: .15s; font-size: 0 } .foot .ft-redes a.rede::before { content: ""; display: none } .foot .ft-redes a.rede svg { width: 17px; height: 17px; display: block } .foot .ft-redes a.rede .rede-icone { width: 17px; height: 17px; object-fit: contain; border-radius: 5px } .foot .ft-redes a.rede:hover { color: #fff; transform: translateY(-2px) } .foot .ft-redes a.rede { background: rgba(255, 255, 255, .07); color: #cdd9ea; border-radius: 9px; width: 34px; height: 34px } .foot .ft-redes a.rede:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px) } .foot .ft-redes a.rede.ig:hover { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB 90%) } .foot .ft-redes a.rede.fb:hover { background: #1877f2 } .foot .ft-redes a.rede.tt:hover { background: #000 } .foot .ft-redes a.rede.th:hover { background: #0f0f0f } .foot .ft-redes a.rede.wa:hover { background: #25d366 } .foot .ft-redes a.rede:hover { background: rgba(255, 255, 255, .18) } .foot .f-hours { display: block; color: #9fb6cf; font-size: 12.5px; margin-top: 10px; padding-top: 0; border-top: 0; line-height: 1.45; white-space: nowrap } .foot .f-hours b { color: #e2eef8; font-weight: 700 } .foot .f-grid { padding: 32px 20px 22px; gap: 28px; grid-template-columns: 1.45fr 1fr 1fr 1.35fr } .foot .f-col a { padding: 4px 0 } .foot .desc { margin-top: 12px; font-size: 13px; line-height: 1.65 } .foot .f-base { padding: 12px 20px } .foot .f-emp { padding: 10px 20px 16px } .foot .f-pay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 24px 8px } .foot .f-pay-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7e90aa; font-family: var(--font-d) } .foot .pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center } .foot .pb { height: 28px; min-width: 56px; padding: 0 11px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 11px var(--font-d); letter-spacing: .02em; line-height: 1; box-shadow: none } .foot .pb svg { width: 16px; height: 16px; display: block } .foot .pb .md { display: inline-flex } .foot .pb .md i { width: 13px; height: 13px; border-radius: 99px } .foot .pb .md i:first-child { background: #eb001b } .foot .pb .md i:last-child { background: #f79e1b; margin-left: -5px } .foot .pb .el { display: inline-flex; position: relative; width: 17px; height: 11px } .foot .pb .el i { position: absolute; top: 0; width: 12px; height: 12px; border-radius: 99px; opacity: .85 } .foot .pb .el i:nth-child(1) { left: 0; background: #231f20 } .foot .pb .el i:nth-child(2) { left: 4px; background: #f8c300 } .foot .pb .el i:nth-child(3) { left: 8px; background: #00a4e0 } .foot .pb.pix { background: #32bc76; color: #fff } .foot .pb.visa { background: #1a1f71; color: #fff; font-style: italic } .foot .pb.mc { background: #fff; color: #202020; border: 1px solid rgba(0, 0, 0, .12) } .foot .pb.elo { background: #fff; color: #2a2a2a; border: 1px solid rgba(0, 0, 0, .12) } .foot .pb.hiper { background: #c8102e; color: #fff } .foot .pb.amex { background: #2e77bc; color: #fff } .foot .pb.diners { background: #0079be; color: #fff } .foot .f-base { border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: #8fa3ba; max-width: 1120px; margin: 0 auto; padding: 16px 20px } .foot .f-base-l { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap } .foot .f-google { color: #fbbf24 } .foot .f-lock { color: #7ee0b8; display: inline-flex; align-items: center; gap: 6px } .foot .f-emp { border-top: 1px solid rgba(255, 255, 255, .06); max-width: 1120px; margin: 0 auto; padding: 12px 20px 20px; text-align: center; font-size: 11.5px; color: rgba(159, 182, 207, .85); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap } .foot .f-emp b { color: #fff } @media(max-width:960px) { .foot .f-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px } .foot .f-col { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; padding-top: 16px } .foot .f-brand { border-top: 0; padding-top: 0 } } @media(max-width:520px) { .foot .f-grid { grid-template-columns: 1fr; gap: 24px } .foot .f-col { border-top: 1px solid rgba(255, 255, 255, .09) } } .foot .f-paypanel { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 16px 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18) } .foot .f-pay-lbl { font: 800 11px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: #5b6b7e; white-space: nowrap } .foot .pay { display: flex; gap: 16px; flex-wrap: wrap; align-items: center } .foot .pay .pay-it { display: inline-flex; align-items: center; line-height: 0 } .foot .pay img { display: block; width: auto; height: 24px; object-fit: contain } .foot .pay img.lg-visa { height: 20px } .foot .pay img.lg-mc { height: 26px } .foot .pay img.lg-elo { height: 22px } .foot .pay img.lg-hiper { height: 24px } .foot .pay img.lg-amex { height: 30px } .foot .pay img.lg-pix { height: 26px } @media(max-width:560px) { .foot .f-paypanel { gap: 12px; padding: 12px 16px } .foot .pay { gap: 12px } .foot .pay img { height: 22px } .foot .pay img.lg-amex { height: 26px } } #p-conta .sec-h .btn, #p-conta .sec-head .btn { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .42); } #p-conta .sec-h .btn:hover, #p-conta .sec-head .btn:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); } #modal-app { margin: auto; inset: 0 } #modal-app .arte-pre { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: -4px 0 12px; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden } #modal-app .arte-pre img { max-width: 100%; max-height: 38vh; object-fit: contain; display: block; margin: 0 auto; border-radius: 6px } #modal-app .arte-pre .arte-pre-pdf { font-size: 13px; color: var(--brand); font-weight: 600; padding: 6px } #modal-app .arte-pre[hidden] { display: none } #modal-app .arte-pre { position: relative; background: repeating-conic-gradient(#eef2f7 0% 25%, #f7fafd 0% 50%) 50% / 20px 20px } #modal-app .arte-verdict { display: flex; align-items: center; gap: 11px; margin: 12px 0 6px; padding: 12px 14px; border-radius: 13px; border: 1px solid } #modal-app .arte-verdict .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; flex: none } #modal-app .arte-verdict .tt { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; line-height: 1.25 } #modal-app .arte-verdict .ds { font-size: 12.5px; margin-top: 2px } #modal-app .arte-verdict.v-ok { background: var(--ok-soft); border-color: #bbf7d0 } #modal-app .arte-verdict.v-ok .ic { background: #dcfce7 } #modal-app .arte-verdict.v-ok .tt { color: #14532d } #modal-app .arte-verdict.v-ok .ds { color: #3f6212 } #modal-app .arte-verdict.v-mid { background: var(--amber-soft); border-color: #fde68a } #modal-app .arte-verdict.v-mid .ic { background: #fef08a } #modal-app .arte-verdict.v-mid .tt { color: #92400e } #modal-app .arte-verdict.v-mid .ds { color: #a16207 } #modal-app .arte-verdict.v-bad { background: var(--bad-soft); border-color: #fecaca } #modal-app .arte-verdict.v-bad .ic { background: #fee2e2 } #modal-app .arte-verdict.v-bad .tt { color: #7f1d1d } #modal-app .arte-verdict.v-bad .ds { color: #b91c1c } #modal-app .arte-dim { font-size: 12px; color: var(--muted); margin: 2px 0 4px } #modal-app .arte-dim b { color: var(--ink) } #modal-app .arte-dim[hidden] { display: none } #modal-app .arte-chk { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden } #modal-app .arte-chk .row { display: flex; align-items: center; gap: 11px; padding: 9px 13px; font-size: 12.8px; border-bottom: 1px solid var(--line) } #modal-app .arte-chk .row:last-child { border-bottom: 0 } #modal-app .arte-chk .st { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none } #modal-app .arte-chk .st-ok { background: var(--ok) } #modal-app .arte-chk .st-warn { background: var(--amber) } #modal-app .arte-chk .st-bad { background: var(--bad) } #modal-app .arte-chk .lbl { flex: 1 } #modal-app .arte-chk .lbl b { color: var(--ink) } #modal-app .arte-chk .lbl small { display: block; color: var(--muted); font-size: 11.3px; margin-top: 1px } #p-conta #aba-corpo { padding: 2px 0 8px } #p-conta #aba-corpo>.order, #p-conta #aba-corpo>.empty:not(.sem-painel) { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow) } #p-conta .order { border-left-width: 4px; padding: 20px 22px } #p-conta .order .top b { display: flex; align-items: center; gap: 9px } #p-conta .order .top b::before { content: ""; display: inline-block; width: 3px; height: 20px; border-radius: 99px; background: linear-gradient(180deg, #fff010, #f02890, #37b6f0, #7b6cf0) } #p-conta .order .top { row-gap: 10px } #p-conta #aba-corpo>.empty { padding: 52px 26px } #p-conta .empty .e { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--brand-soft); font-size: 34px; margin-bottom: 16px } #p-conta .end-topo h3 { font-family: var(--font-d); font-size: 19px; display: flex; align-items: center; gap: 9px } #p-conta .end-topo h3::before { content: ""; width: 3px; height: 19px; border-radius: 99px; background: linear-gradient(180deg, #fff010, #f02890, #37b6f0, #7b6cf0) } #p-conta .end-card { border-left: 4px solid var(--line) } #p-conta .end-card.e-padrao { border-left-color: var(--wa) } #p-conta #aba-corpo>.card { border-radius: 16px } #p-pedido { padding-bottom: 8px } #p-pedido .wrap.corpo { max-width: 860px } #p-pedido .sec-h h2 { display: flex; align-items: center; gap: 10px } #p-pedido .sec-h h2::before { content: ""; display: inline-block; width: 52px; height: 4px; border-radius: 99px; flex: none; background: linear-gradient(90deg, var(--gold), var(--pink), var(--brand), var(--indigo)) } #p-pedido .ci { border-left: 4px solid var(--brand-soft) } #p-pedido .ci .th { box-shadow: inset 0 0 0 1px var(--line) } #p-pedido .callout { margin-top: 14px } #p-pedido .sum { border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative } #p-pedido .sum::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #fff010, #f02890, #37b6f0, #7b6cf0) } #p-pedido .pd-cta { margin-top: 20px } #p-pedido .pd-cta .btn-b { flex: 1 } @media(max-width:560px) { #p-pedido .ci { flex-wrap: wrap } #p-pedido .ci .val { width: 100%; margin-left: 0; padding-top: 2px } #p-pedido .pd-cta { flex-direction: column } #p-pedido .pd-cta .btn { width: 100% } } .fr-op .fr-selo { display: inline-block; vertical-align: middle; margin-left: 7px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg, #0a0a0a, #1a1a1a); border-radius: 999px; padding: 2px 8px } .fr-op.fr-uber { border-color: var(--brand-2); background: linear-gradient(180deg, #eef6ff, #fff 60px) } .fr-op.fr-uber.on { box-shadow: 0 0 0 3px rgba(30, 64, 175, .12) } .fr-op .fr-selo { margin-left: 0; margin-top: 4px } .uber-aviso { margin: 12px 0 4px; padding: 13px 15px; border: 1px solid #fecaca; border-left: 4px solid var(--brand-2); border-radius: 11px; background: linear-gradient(180deg, #fef2f2, #fff 70%); font-size: 12.5px; color: var(--ink) } .uber-aviso b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--brand-2) } .uber-aviso p { margin: 0; line-height: 1.55; color: #3f3f46 } .uber-aviso p b { display: inline; font-size: 12.5px; color: var(--ink) } .uber-aviso .uber-aceite { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #fecaca; cursor: pointer; font-size: 12.5px; color: #3f3f46; line-height: 1.5 } .uber-aviso .uber-aceite input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--brand-2); cursor: pointer } .uber-aviso .uber-aceite span b { color: var(--ink) } .uber-aviso .uber-aceite:has(input:checked) { color: #14532d } .ck-mymob { margin-top: 10px; background: #f0f9ff; border-color: #bfdbfe; cursor: pointer; display: flex } .uber-aviso.mymob { border-color: #bfdbfe; border-left-color: var(--brand-2); background: linear-gradient(180deg, #f0f9ff, #fff 70%) } .uber-aviso.mymob b { color: var(--brand-2) } .tl7 { position: relative; margin: 18px 0 0; padding-left: 0; list-style: none } .tl7::before { content: ""; position: absolute; left: 18px; top: 12px; bottom: 12px; width: 2px; background: var(--line); border-radius: 99px } .tl7 li { position: relative; display: flex; gap: 14px; padding: 10px 0 10px 0; min-height: 56px } .tl7 .tl7-dot { flex: 0 0 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; font-size: 14px; font-weight: 800; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); background: #fff; color: var(--muted); transition: .2s } .tl7 .tl7-dot.done { background: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--brand-2) } .tl7 .tl7-dot.active { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(255, 240, 16, .25); animation: tl7pulse 2s infinite } .tl7 .tl7-dot.future { background: #fff; color: #9fb6cf } @keyframes tl7pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(255, 240, 16, .25) } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 10px rgba(255, 240, 16, .12) } } .tl7 .tl7-body { flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); transition: .2s } .tl7 .tl7-body:hover { border-color: var(--brand-2); transform: translateY(-1px) } .tl7 .tl7-body.done { border-left: 4px solid var(--brand) } .tl7 .tl7-body.active { border-left: 4px solid var(--gold); background: linear-gradient(180deg, #fffef0, #fff 60px) } .tl7 .tl7-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap } .tl7 .tl7-head b { font-size: 14px; font-family: var(--font-d); color: var(--ink) } .tl7 .tl7-when { font-size: 11.5px; color: var(--muted); font-weight: 600; background: var(--paper); padding: 3px 8px; border-radius: 99px } .tl7 .tl7-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 4px } .tl7 .tl7-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px } .tl7 .tl7-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--paper); color: var(--muted); border: 1px solid var(--line) } .tl7 .tl7-tag.who { background: var(--brand-soft); color: var(--brand); border-color: #cdecf9 } .tl7 .tl7-tag.foto { background: #fef3c7; color: #92400e; border-color: #fde68a } .tl7 .tl7-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap } .tl7 .tl7-photo { margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); max-width: 220px } .tl7 .tl7-photo img { width: 100%; height: auto; display: block } .tl7-expand { margin-top: 8px } .tl7-expand summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--brand-2); list-style: none } .tl7-expand summary::-webkit-details-marker { display: none } .tl7-expand[open] summary { margin-bottom: 8px } .crm-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px } .crm-grid .f { margin: 0 } .crm-grid .g-12 { grid-column: span 12 } .crm-grid .g-6 { grid-column: span 6 } .crm-grid .g-4 { grid-column: span 4 } .crm-grid .g-3 { grid-column: span 3 } .crm-grid .g-8 { grid-column: span 8 } .crm-sec { grid-column: span 12; margin: 18px 0 6px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--font-d); font-size: 13px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px } .crm-sec::before { content: ""; width: 3px; height: 14px; border-radius: 99px; background: linear-gradient(180deg, var(--gold), var(--pink), var(--brand), var(--indigo)); display: inline-block } .crm-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px } @media(max-width:640px) { .crm-grid .g-6, .crm-grid .g-4, .crm-grid .g-3, .crm-grid .g-8 { grid-column: span 12 } } .ped-det { display: grid; gap: 16px } .ped-det-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: start } .ped-det-head b { font-size: 18px } .ped-det-itens { display: grid; gap: 8px } .ped-det-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--paper); border-radius: 10px; border: 1px solid var(--line) } .ped-det-item .th { width: 40px; height: 40px; border-radius: 8px; background: #fff; display: grid; place-items: center; font-size: 18px } .fotos-drop { border: 2px dashed var(--line); border-radius: 16px; padding: 28px 18px; text-align: center; background: var(--paper); transition: .2s; cursor: pointer } .fotos-drop:hover, .fotos-drop.drag { border-color: var(--brand-2); background: var(--brand-soft) } .fotos-drop b { display: block; font-size: 14px; margin-bottom: 4px } .fotos-drop span { font-size: 12.5px; color: var(--muted) } .foto-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px } .foto-card .drag-handle { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; font-size: 12px; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .15) } .foto-card .dpi-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 99px } .dpi-ok { background: #dcfce7; color: #166534 } .dpi-warn { background: #fef3c7; color: #92400e } .dpi-bad { background: #fef2f2; color: #b91c1c } .foto-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: #f4f7fa } .foto-card .foto-actions { display: flex; gap: 6px } .foto-card .foto-actions .btn { flex: 1 } .fl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px } .var-opt { display: flex; gap: 8px; flex-wrap: wrap } .var-opt button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text) } .var-opt button.on { border-color: var(--brand); background: var(--brand-soft); color: #0675ae } .var-opt button.off { opacity: .35; position: relative; cursor: not-allowed } .var-opt button.off::after { content: "em breve"; position: absolute; top: -9px; right: -6px; background: var(--amber-soft); color: #b45309; font-size: 9px; font-weight: 800; border-radius: 6px; padding: 1px 6px } .builder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 14px } .bopt { margin-bottom: 15px } .bprev { background: linear-gradient(160deg, #0a2450, #082040); border-radius: var(--radius); padding: 22px; color: #fff; text-align: center; position: sticky; top: 84px; box-shadow: var(--shadow-lg) } .bprev svg { max-width: 100%; height: auto } .bprev .tot { font-size: 30px; font-weight: 800; margin: 6px 0 } .mont-note { background: var(--amber-soft); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: #8a6d00; margin-top: 10px; font-weight: 600 } .mont-tot { margin-top: 14px; padding: 12px 13px; border-radius: 10px; background: #fff; color: var(--ink) } .mont-tot .mt-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0 } .mont-tot .mt-row span:first-child { color: var(--muted); font-weight: 600 } .mont-tot .mt-row span:last-child { font-weight: 700; text-align: right } .mont-tot .mt-total { font-size: 15px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px } .mont-tot small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted) } .mont-tot details.mont-comp { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 7px } .mont-tot details.mont-comp>summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #1d4ea3; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none } .mont-tot details.mont-comp>summary::-webkit-details-marker { display: none } .mont-tot details.mont-comp>summary::before { content: "›"; display: inline-block; font-size: 15px; line-height: 1; transition: transform .15s ease } .mont-tot details.mont-comp[open]>summary::before { transform: rotate(90deg) } .mont-tot details.mont-comp>summary:hover { color: #16305c; text-decoration: underline } .mont-tot details.mont-comp[open]>summary { margin-bottom: 2px } .mont-tot details.mont-como-coube>summary { color: #5b3a9e } .mont-tot details.mont-como-coube>summary:hover { color: #472c7d } .mont-tot details.mont-como-coube .mt-row { padding: 4px 0 } .mont-tot details.mont-como-coube .mt-row span:last-child { font-weight: 600 } .mont-tot details.mont-como-coube .mt-row small { font-weight: 400; line-height: 1.5 } .mont-file { margin-top: 12px; display: grid; gap: 8px } .mont-file .btn { justify-content: center } .mont-file-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 8px 12px } .mont-file-hint { font-size: 11.5px; color: var(--muted) } .stickband { background: linear-gradient(120deg, #082040, #0888c8 75%); color: #fff } .stickband .fb-in { max-width: 1200px; margin: 0 auto; padding: 34px 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center } .stickband h2 { font-family: var(--font-d); font-size: 24px; margin: 6px 0 8px; color: #fff } .stickband p { font-size: 14px; opacity: .92 } .f-pay-wrap { padding: 0 0 12px; display: flex; justify-content: flex-start } .pay-strip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 8px 14px; margin: 0; width: auto; max-width: 100% } .pay-strip .ps-l { color: #9fb6cf; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-d) } .pay-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center } .pay-badges .pb { background: #fff; border-radius: 5px; height: auto; min-width: 0; padding: 3px 8px; display: inline-flex; place-items: center; box-shadow: none; font: 800 10px var(--font-d); color: #111; line-height: 1.2 } .pay-strip .ps-pix { margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .14); color: #6ee7b7; font-size: 12px; font-weight: 700; white-space: nowrap } .soc-line { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: nowrap } .soc-line .lab { font: 800 10px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: #7e90aa; margin-right: 4px; white-space: nowrap } .soc-line .soc-icons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .soc-line a.rede, .foot .soc-line a.rede { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; color: #fff; transition: .15s; flex-shrink: 0; text-decoration: none; font-size: 0 } .soc-line a.rede::before, .foot .soc-line a.rede::before { content: none; display: none } .soc-line a.rede svg { width: 18px; height: 18px; display: block } .soc-line a.rede .rede-icone { width: 18px; height: 18px; object-fit: contain; border-radius: 5px } .soc-line a.rede:hover { transform: translateY(-2px); color: #fff } .soc-line a.rede.ig:hover { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB) } .soc-line a.rede.fb:hover { background: #1877F2 } .soc-line a.rede.tt:hover { background: #000 } .soc-line a.rede.wa:hover { background: #25D366 } .soc-line a.rede.th:hover { background: #0f0f0f } .f-soc-t, .follow-grid { display: none !important } .acc { border: 1.5px solid var(--line); border-radius: 13px; background: #fff; margin-bottom: 8px; overflow: hidden } .acc .aq { padding: 12px 14px; font-weight: 700; font-size: 13.5px; color: var(--ink); cursor: pointer; display: flex; gap: 9px; align-items: center } .acc .aq .pl { margin-left: auto; color: var(--brand); font-weight: 800 } .acc .aa { padding: 0 14px; font-size: 13px; color: #33475f; max-height: 0; overflow: hidden; transition: .2s } .acc.open .aa { max-height: 400px; padding: 0 14px 13px } .at-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 } .track-res { background: var(--brand-soft); border: 1.5px solid var(--brand-2); border-radius: 13px; padding: 13px 15px; margin-top: 10px } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 4px 11px; background: #eef3f8; color: var(--ink) } .chip.ok { background: var(--ok-soft); color: var(--ok) } .chip.warn { background: var(--amber-soft); color: #b45309 } .chip.info { background: var(--brand-soft); color: #0675ae } @media(max-width:900px) { .builder { grid-template-columns: 1fr } .bprev { position: static } .at-grid { grid-template-columns: 1fr } .stickband .fb-in { grid-template-columns: 1fr } } [hidden] { display: none !important } .store-topo { background: #fff; box-shadow: 0 1px 0 rgba(8, 32, 64, .08); border-bottom: 0 } .store-topo .bar { height: 76px; gap: 20px } .logo-store { gap: 9px; min-width: 190px; color: var(--ink) } .logo-store:hover { color: var(--brand) } .brand-sigil { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--brand), var(--indigo)); color: #fff; font: 900 14px var(--font-d); letter-spacing: -.08em; box-shadow: 0 8px 20px -12px var(--brand) } .brand-word { display: grid; line-height: 1; gap: 3px } .brand-word b { font: 900 15px var(--font-d); letter-spacing: .04em } .brand-word em { font: 900 16px var(--font-d); font-style: normal; color: var(--brand); letter-spacing: .08em } .brand-word small { font: 600 8px var(--font-b); color: var(--muted); letter-spacing: .02em; white-space: nowrap; margin-top: 2px } .store-search { display: flex; align-items: center; flex: 1; max-width: 610px; height: 44px; border: 1.5px solid #cad5e2; border-radius: 8px; background: #f8fafc; overflow: hidden; transition: .18s } .store-search:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(8, 136, 200, .1) } .store-search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 15px; color: var(--ink); font: 500 13px var(--font-b) } .store-search input::placeholder { color: #8190a4 } .store-search button { height: 100%; width: 50px; border: 0; border-left: 1px solid #dce4ed; background: var(--brand); color: #fff; font: 900 25px/1 system-ui; cursor: pointer } .store-search button:hover { background: var(--ink) } .store-topo nav.main { flex: 0 0 auto; min-width: 0; justify-content: flex-start } .store-topo nav.main a { padding: 7px 9px; font-size: 12px } .store-topo .store-search { flex: 1 1 160px; min-width: 0; max-width: 560px } @media(max-width:1240px) { .store-topo .header-account>span:last-child, .store-topo .cart-label, .store-topo .btn-wa-topo .wa-txt { display: none } .store-topo .cart { min-width: 38px; width: 38px; padding: 0; justify-content: center } .store-topo nav.main a { padding: 6px 7px; font-size: 11.5px } } @media(max-width:1050px) { .store-topo nav.main { display: none } .store-topo .burger { display: inline-flex } } .header-account { display: flex; align-items: center; gap: 7px; font: 700 11.5px var(--font-b); color: var(--ink); white-space: nowrap } .header-account:hover { color: var(--brand) } .header-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1.5px solid var(--line); border-radius: 50%; font-size: 15px } .store-topo .btn-wa-topo { height: 35px; padding: 0 11px; border-radius: 7px; font-size: 11px } .store-topo .cart { width: auto; min-width: 83px; height: 38px; display: flex; gap: 6px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 800 } .cart-icon { display: grid; place-items: center; line-height: 1 } .cart-icon svg { width: 19px; height: 19px; display: block } .store-search button svg { width: 20px; height: 20px; display: block; margin: 0 auto } .header-icon svg { width: 15px; height: 15px; display: block } .mission-card .mission-icon svg { width: 23px; height: 23px; display: block } .btn-wa-topo svg, .drawer-wa svg { flex: none } .cart-label { font-size: 10px } .deptbar { background: var(--ink); color: #fff; border-top: 1px solid rgba(255, 255, 255, .08) } .dept-inner { height: 42px; display: flex; align-items: center; gap: 0; overflow: hidden } .dept-inner a { height: 42px; display: inline-flex; align-items: center; padding: 0 14px; color: #e7edf8; font-size: 11.5px; font-weight: 650; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .1) } .dept-inner a:hover { background: var(--ink-2); color: #fff } .faixa-soc { background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08) } .faixa-soc .fs-in { display: flex; align-items: center; gap: 12px; padding: 7px 18px } .faixa-soc .siga { font: 800 10px var(--font-d); letter-spacing: .18em; color: #7d93b2; text-transform: uppercase } .faixa-soc .soc-icons { display: flex; gap: 7px; align-items: center } .faixa-soc .rede { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .09) } .faixa-soc .rede svg { width: 14px; height: 14px } .faixa-soc .rede:hover { background: rgba(255, 255, 255, .22); color: #fff; transform: none } .faixa-soc .faixa-google { margin-left: auto; font: 700 11px var(--font-b); color: #ffe08a; white-space: nowrap } @media(max-width:680px) { .faixa-soc .faixa-google { display: none } .faixa-soc .fs-in { gap: 9px } } .deptbar .menu-navy { display: flex; gap: 2px; align-items: center; flex: 0 0 auto } .deptbar .menu-navy a { height: 42px; display: inline-flex; align-items: center; padding: 0 12px; border-right: 0; border-radius: 0; font-size: 12px; font-weight: 700; color: #dbe7f5; white-space: nowrap } .deptbar .menu-navy a:hover { background: rgba(255, 255, 255, .08); color: #fff } .deptbar .menu-navy a.on { color: var(--gold); background: rgba(255, 255, 255, .08) } .dept-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .25); flex: 0 0 auto } .deptbar.sem-deptos .dept-sep, .deptbar.sem-deptos .dept-k { display: none } .deptbar[hidden] { display: none } .dept-k { height: 42px; display: inline-flex; align-items: center; padding: 0 14px; color: var(--gold); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .1) } .dept-inner a { column-gap: 6px } .dept-inner a .dk-n { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 2px 6px; line-height: 1 } .dept-inner a:hover .dk-n { color: #fff; background: rgba(255, 255, 255, .16) } .store-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #071b3d 0%, #102d61 58%, #162c70 100%); color: #fff } .store-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.5px); background-size: 19px 19px; pointer-events: none } .store-hero .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr); gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 32px } .store-kicker { display: block; color: #8be3e0; font: 800 11px var(--font-d); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 13px } .store-hero h1 { font: 900 clamp(36px, 4.7vw, 62px)/1.03 var(--font-d); letter-spacing: -.055em; max-width: 660px; margin: 0 } .store-hero h1 span { color: #ffb68a } .store-hero .sub { color: #c8d7eb; font-size: 16px; line-height: 1.65; max-width: 590px; margin: 19px 0 24px } .store-hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0 } .store-hero .cta .btn { border-radius: 7px } .store-hero .hero-meta { display: flex; gap: 17px; flex-wrap: wrap; margin: 22px 0 0; color: #d5e1f1; font-size: 11.5px; font-weight: 650 } .store-hero #selo-google-capa { margin-top: 16px } .store-hero .selo-google { margin-top: 0; gap: 8px; padding: 8px 11px; border-radius: 7px; background: rgba(255, 255, 255, .08); width: auto; display: inline-flex } .store-hero-art { position: relative; min-height: 302px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; background: linear-gradient(135deg, #1b4e79, #163469 60%, #47225e); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .65) } .hero-art-top { display: flex; justify-content: space-between; padding: 16px 18px; color: #cfe0ef; font: 800 10px var(--font-d); letter-spacing: .12em; position: relative; z-index: 2 } .hero-art-top b { font-size: 24px; line-height: .5; color: #fff } .hero-art-copy { position: relative; z-index: 2; padding: 30px 0 0 25px; max-width: 260px } .hero-art-copy small { display: block; color: #ffcf9f; font: 800 10px var(--font-d); letter-spacing: .15em } .hero-art-copy strong { display: block; color: #fff; font: 900 30px/.98 var(--font-d); letter-spacing: -.05em; margin: 10px 0 } .hero-art-copy p { color: #d0ddf0; font-size: 12px; line-height: 1.45; margin-bottom: 13px } .hero-art-copy .btn { font-size: 11px; background: #fff; color: var(--ink); border: 0 } .hero-art-shape { position: absolute; border-radius: 50%; filter: drop-shadow(0 16px 17px rgba(0, 0, 0, .18)); transform: rotate(-18deg) } .shape-one { width: 225px; height: 150px; right: 18px; top: 54px; background: linear-gradient(135deg, #ffbd7e 0 47%, #f16f9d 48% 72%, #5fe0da 73%); clip-path: polygon(12% 12%, 90% 0, 100% 68%, 68% 100%, 0 76%); border-radius: 19% } .shape-two { width: 105px; height: 105px; right: 55px; bottom: 29px; background: #fff8df; clip-path: polygon(50% 0, 97% 26%, 79% 83%, 20% 98%, 0 37%); opacity: .92 } .hero-art-label { position: absolute; right: 20px; bottom: 44px; color: #2a385a; z-index: 3; font: 900 8px var(--font-d); letter-spacing: .1em; text-align: center; transform: rotate(-5deg) } .hero-art-label small { font: 600 8px var(--font-b); letter-spacing: 0 } .hero-art-dots { position: absolute; z-index: 4; bottom: 13px; left: 50%; display: flex; gap: 5px } .hero-art-dots i { display: block; width: 6px; height: 6px; background: #7895bd; border-radius: 99px } .hero-art-dots i.on { width: 18px; background: #ffbd8e } .store-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 0; padding-bottom: 28px } .store-steps .passo { min-height: 0; padding: 13px 16px; border-radius: 8px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); display: grid; grid-template-columns: 29px 1fr; column-gap: 10px; align-items: center } .store-steps .passo .p-n { grid-row: span 2 } .store-steps .passo b { font-size: 12px } .store-steps .passo span:not(.p-n) { font-size: 11px; color: #b8c9df } .mission-section { padding-top: 36px; padding-bottom: 28px } .mission-section .sec-head { margin-bottom: 16px } .section-note { font-size: 12px; color: var(--muted); font-weight: 600 } .mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px } .mission-card { display: grid; gap: 6px; min-height: 156px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); transition: .18s; position: relative; overflow: hidden } .mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-2) } .mission-card .mission-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 9px; font-size: 23px; margin-bottom: 3px } .mission-card b { font: 800 16px var(--font-d); color: var(--ink) } .mission-card small { color: var(--muted); font-size: 11.5px } .mission-card strong { font-size: 11.5px; color: var(--brand); margin-top: 5px } .mission-orange .mission-icon { background: #ffeadc; color: #e95c13 } .mission-teal .mission-icon { background: #daf5f0; color: #087e79 } .mission-purple .mission-icon { background: #eee8ff; color: #6a53c7 } .mission-yellow .mission-icon { background: #fff3c2; color: #bd8200 } .mission-pink .mission-icon { background: #fde7f1; color: #c2437f } .store-rail-section { padding-top: 27px; padding-bottom: 28px } .store-rail-section .sec-head { margin-bottom: 14px } .store-rail-section .sec-head .intro { max-width: 600px; font-size: 12.5px } .store-rail-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-rows: 1fr; gap: 13px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 13px; scroll-snap-type: x proximity } @media(min-width:1200px) { #grid-inicio { grid-auto-columns: minmax(0, 1fr) } } @media(max-width:680px) { #grid-inicio { scroll-snap-type: x mandatory } } #home-destaques { position: relative } .rail-fade { display: none; position: absolute; top: 2px; right: 12px; bottom: 26px; width: 58px; background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none; z-index: 2 } .rail-seta { display: none; position: absolute; top: calc(50% - 36px); width: 40px; height: 40px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(8, 32, 64, .14); cursor: pointer; z-index: 3; color: var(--ink); font-size: 18px; align-items: center; justify-content: center; font-family: var(--font-b) } .rail-seta:hover { color: var(--brand); border-color: var(--brand) } .rail-seta.dir { right: 2px } @media(max-width:1199px) { .rail-fade { display: block } .rail-seta.dir { display: flex } } .store-rail-grid::-webkit-scrollbar { height: 7px } .store-rail-grid::-webkit-scrollbar-thumb { background: #cbd6e4; border-radius: 99px } .store-rail-grid .prod { scroll-snap-align: start; min-width: 0; height: 100% } .store-rail-grid .store-empty { grid-column: 1/-1; min-height: 150px; border: 1px dashed #bac7d7; border-radius: 11px; background: #f8fafc; padding: 32px; text-align: center; color: var(--muted); font-size: 12px } .store-empty b { display: block; color: var(--ink); font: 800 15px var(--font-d); margin-bottom: 4px } .home-prod .thumb { height: 156px } .home-prod .bd { padding: 13px } .home-prod .desc { min-height: 34px } .home-prod .store-tiers { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px } .home-prod .store-tier { border: 1px solid #e3e9f0; border-radius: 4px; padding: 3px 5px; font-size: 9.5px; color: var(--muted); background: #f8fafc } .home-prod .store-tier strong { color: var(--ink); font-size: 10px } .home-prod .store-card-cta { display: flex; gap: 7px; align-items: center; margin-top: 9px } .home-prod .store-card-cta .btn { flex: 1; padding: 8px 8px; font-size: 11px } .store-badge { position: absolute; top: 9px; left: 9px; z-index: 4; background: #fff1e8; border: 1px solid #ffc59f; color: #a94d0b; border-radius: 99px; padding: 3px 7px; font-size: 9px; font-weight: 900; letter-spacing: .04em } .store-badge.teal { background: #e6fbf7; border-color: #a7e1d9; color: #087e79 } .store-badge.yellow { background: #fff6cf; border-color: #f2d77d; color: #9b6b00 } .photo-entry-card { display: grid; grid-template-columns: 155px 1fr auto; gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); margin-bottom: 14px } .photo-entry-card h3 { font: 800 17px var(--font-d); margin: 0 0 5px } .photo-entry-card p { font-size: 12.5px; margin: 0; max-width: 590px } .photo-entry-art { position: relative; height: 112px; border-radius: 9px; background: linear-gradient(135deg, #d8f3ef, #effaff); border: 1px solid #b6ddd8; overflow: hidden; padding: 11px; color: #087e79; font: 800 9px var(--font-d); letter-spacing: .07em } .photo-entry-art i { display: block; position: absolute; width: 48px; height: 58px; border: 4px solid white; background: #9bcbc7; transform: rotate(-10deg); box-shadow: 0 5px 10px #7fb4b0; top: 32px; left: 18px } .photo-entry-art i:nth-of-type(2) { left: 55px; top: 25px; background: #fac3a6; transform: rotate(8deg) } .photo-entry-art i:nth-of-type(3) { left: 93px; top: 40px; background: #9bace4; transform: rotate(15deg) } .photo-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px } .photo-tags span { padding: 3px 7px; border-radius: 99px; background: #eaf5f5; color: #287c78; font-size: 10px; font-weight: 800 } .store-proof { margin-top: 25px; background: #f7f9fc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) } .proof-inner { display: grid; grid-template-columns: 1.3fr .7fr auto; gap: 30px; align-items: center; padding-top: 35px; padding-bottom: 35px } .proof-inner h2 { font-size: 25px } .proof-inner p { font-size: 13px; max-width: 520px } .proof-google { display: grid; gap: 3px; text-align: center; padding: 18px 22px; border: 1px solid var(--line); background: #fff; border-radius: 11px; box-shadow: var(--shadow) } .proof-google span { color: #fbbf24; font-size: 20px; letter-spacing: 2px } .proof-google b { font: 800 15px var(--font-d) } .proof-google small { color: var(--muted); font-size: 11px } .proof-actions { display: grid; gap: 8px } .fim-wrap { padding-top: 35px; padding-bottom: 55px } .fim-wrap .faixas-cta { margin: 0 } @media(max-width:1100px) { .logo-store { min-width: 160px } .brand-word small { display: none } .header-account span:last-child { display: none } .store-topo .bar { gap: 12px } .dept-inner a { padding-left: 10px; padding-right: 10px } .store-hero .hero-grid { gap: 28px } .mission-grid { grid-template-columns: repeat(2, 1fr) } .proof-inner { grid-template-columns: 1fr 1fr } .proof-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap } } @media(max-width:960px) { .store-search { max-width: none } .store-topo .bar { height: 70px } .store-topo .bar-right { gap: 7px } .store-topo .header-account { display: none } .store-topo .btn-wa-topo { width: 36px; padding: 0; justify-content: center } .store-topo .btn-wa-topo .wa-txt { display: none } .store-topo .cart-label { display: none } .store-topo .cart { min-width: 38px; width: 38px; padding: 0; justify-content: center } .deptbar { display: none } .store-hero .hero-grid { grid-template-columns: 1fr } .store-hero-art { max-width: 600px; width: 100%; margin: 0 auto } .store-steps { grid-template-columns: 1fr } .store-steps .passo { grid-template-columns: 29px 1fr } .photo-entry-card { grid-template-columns: 130px 1fr } .photo-entry-card>a { grid-column: 2; justify-self: start } .proof-inner { grid-template-columns: 1fr 1fr } } @media(max-width:680px) { .store-topo .bar { padding-left: 14px; padding-right: 14px } .logo-store { min-width: 130px; gap: 6px } .brand-sigil { width: 34px; height: 34px; font-size: 12px } .brand-word b { font-size: 12px } .brand-word em { font-size: 13px } .store-search { height: 38px } .store-search input { padding: 0 10px; font-size: 11px } .store-search button { width: 40px } .store-hero .hero-grid { padding-top: 34px } .store-hero h1 { font-size: 35px } .store-hero .sub { font-size: 14px } .store-hero .cta .btn { flex: 1; min-width: 135px; font-size: 12px; padding: 12px 10px } .hero-meta { gap: 8px !important; font-size: 10px !important } .mission-section { padding-top: 34px } .section-note { display: none } .mission-grid { grid-template-columns: 1fr 1fr; gap: 9px } .mission-card { min-height: 140px; padding: 12px } .mission-card b { font-size: 13px } .mission-card small { font-size: 10px } .mission-card strong { font-size: 10px } .store-rail-grid { grid-auto-columns: minmax(215px, 82vw) } .photo-entry-card { grid-template-columns: 1fr; gap: 12px } .photo-entry-art { height: 94px } .photo-entry-card>a { grid-column: auto } .proof-inner { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 28px } .proof-google { justify-self: start; text-align: left } .proof-actions { display: flex; flex-direction: column; align-items: stretch } .proof-actions .btn { width: 100% } .store-art-label { font-size: 7px } } @media(max-width:420px) { .store-search input::placeholder { font-size: 10px } .logo-store { min-width: 108px } .brand-word small { display: none } .mission-grid { gap: 7px } .mission-card .mission-icon { width: 38px; height: 38px; font-size: 19px } .store-hero .cta { gap: 7px } .store-hero .cta .btn { min-width: 0; font-size: 11px } .store-hero-art { min-height: 260px } .hero-art-copy { padding-left: 18px } .hero-art-copy strong { font-size: 25px } .shape-one { width: 180px; height: 125px; right: 8px } } .brand-logo-wrap { display: inline-flex; align-items: center; min-width: 0; line-height: 1 } .erp-logo { display: block; width: auto; height: 52px; max-width: 200px; object-fit: contain; object-position: left center } .footer-logo .erp-logo { height: 56px; max-width: 224px } .brand-fallback { align-items: center; gap: 9px } .brand-fallback .brand-sigil { flex: 0 0 auto } .foot .f-pay-wrap { display: flex; justify-content: flex-start; padding: 16px 20px 20px } .foot .pay-strip { display: grid; grid-template-columns: auto; gap: 6px; align-items: start; width: max-content; max-width: 100%; box-sizing: border-box; background: #f4f4f4; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 9px 11px 8px } .foot .pay-strip .ps-l { color: #53657a; font: 800 10px var(--font-d); letter-spacing: .1em; text-transform: uppercase } .foot .pay-strip img { display: block; width: 273px; height: 53px; max-width: 100%; object-fit: contain; object-position: left center } .foot .pay-strip .ps-note { color: #53657a; font-size: 10px; line-height: 1.25 } @media(max-width:680px) { .erp-logo { height: 42px; max-width: 158px } .footer-logo .erp-logo { height: 48px; max-width: 192px } .foot .f-pay-wrap { padding-left: 14px; padding-right: 14px } .foot .pay-strip { width: 100%; } } .mont-page-head { margin-bottom: 17px } .mont-back { margin-bottom: 14px; color: var(--muted); background: #fff } .mont-head-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px } .mont-head-grid .intro { max-width: 690px; margin-top: 7px } .mont-draft { display: flex; align-items: center; gap: 10px; min-width: 260px; padding: 12px 14px; border: 1px solid #b9e4dc; border-radius: 12px; background: #f1fcf9; color: #126e67; box-shadow: 0 8px 20px -17px rgba(8, 126, 121, .8) } .mont-draft-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #d4f5ef; font-size: 18px } .mont-draft b { display: block; font: 800 12px var(--font-d) } .mont-draft small { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.35; color: #3e7772 } .mont-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 18px 0 16px; padding: 0; list-style: none } .mont-steps li { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted) } .mont-steps li.on { border-color: #b6ddeb; background: #f3fbfe; color: var(--ink) } .mont-steps li>span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: #edf2f7; color: #71839a; font: 800 11px var(--font-d) } .mont-steps li.on>span { background: var(--brand); color: #fff } .mont-steps b { display: block; font: 800 11.5px var(--font-d) } .mont-steps small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted) } .mont-builder { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: 22px; margin-top: 0 } .mont-options { padding: 22px 22px 7px; border-color: #d8e2ec; box-shadow: 0 10px 28px -24px rgba(8, 32, 64, .5) } .mont-card-title { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--line) } .mont-card-title .eyebrow-m { margin-bottom: 4px } .mont-card-title h2 { font: 850 20px var(--font-d); letter-spacing: -.02em; margin: 0; color: var(--ink) } .mont-card-title p { font-size: 12px; color: var(--muted); margin: 5px 0 0 } .mont-count { padding: 5px 8px; border-radius: 99px; background: #eef5fb; color: #357092; font-size: 10px; font-weight: 800; white-space: nowrap } .mont-option { padding: 14px 0 16px; margin: 0; border-bottom: 1px solid #edf1f5 } .mont-option:last-child { border-bottom: 0 } .mont-opt-label { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px } .mont-num { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; background: #eef5fb; color: var(--brand); font: 900 11px var(--font-d) } .mont-opt-label .fl { margin: 0; font-size: 12px } .mont-opt-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.3 } .mont-option .var-opt { padding-left: 32px } .mont-option .var-opt button { padding: 8px 11px; border-radius: 8px; font-size: 11.5px } .mont-preview { position: sticky; top: 88px; padding: 21px; background: linear-gradient(155deg, #071b3d 0%, #0b2c58 60%, #113b6e 100%); border-radius: 14px; box-shadow: 0 20px 40px -25px rgba(2, 18, 49, .8); text-align: left } .mont-preview-top { display: flex; justify-content: space-between; align-items: center; color: #b8cde4; font: 800 10px var(--font-d); letter-spacing: .12em } .mont-preview-top b { color: #6ee7b7; font-size: 10px; letter-spacing: 0 } .mont-artboard { display: grid; place-items: center; min-height: 205px; margin: 15px 0 11px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 11px; background: radial-gradient(circle at 50% 42%, rgba(48, 145, 191, .26), transparent 55%), rgba(255, 255, 255, .055) } .mont-artboard svg { width: min(100%, 285px); height: auto; display: block } .mont-preview-name { padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #d8e6f4; font-size: 11.5px; line-height: 1.45; text-align: center } .mont-price { display: grid; gap: 2px; margin-top: 14px; padding: 12px 13px; border-radius: 10px; background: #fff; color: var(--ink); text-align: left } .mont-price span { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em } .mont-price strong { font: 900 27px var(--font-d); letter-spacing: -.04em } .mont-price small { font-size: 11px; color: var(--muted) } .mont-price small b { color: #b45309; font-size: 9px; text-transform: uppercase; letter-spacing: .04em } .mont-price em { font-style: normal; color: #a16207; font-size: 10px; margin-top: 3px } .mont-price-loading, .mont-price-consult { display: grid; gap: 3px; margin-top: 14px; padding: 12px; border: 1px dashed rgba(255, 255, 255, .24); border-radius: 10px; color: #c2d3e7; font-size: 12px } .mont-price-consult small { font-size: 10.5px; color: #9fb4d0 } .mont-note-error { margin-top: 14px; background: #fff7ed; color: #9a5c11; border: 1px solid #fed7aa } .mont-contact { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .14) } .mont-contact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #f5fbff } .mont-contact-head b { font-size: 12.5px } .mont-contact-head small { font-size: 10px; color: #9fb4d0 } .mont-preview .f { margin-top: 8px } .mont-preview .f label { color: #cfe6f5; font-size: 10.5px } .mont-preview .f input { background: rgba(255, 255, 255, .97); border-color: transparent; height: 37px; font-size: 12px } .mont-preview .btn { border-radius: 8px } .mont-gabarito { width: 100%; background: transparent; color: #d6e6f5; border: 1px solid rgba(255, 255, 255, .25) } .mont-gabarito:hover { background: rgba(255, 255, 255, .09) } .mont-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 17px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--line) } .mont-trust>div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 13px 15px; background: #fff } .mont-trust span { grid-row: span 2; color: var(--brand); font: 900 12px var(--font-d) } .mont-trust b { font: 800 11.5px var(--font-d); color: var(--ink) } .mont-trust small { font-size: 10.5px; color: var(--muted); line-height: 1.25 } @media(max-width:900px) { .mont-head-grid { display: grid; grid-template-columns: 1fr } .mont-draft { min-width: 0; width: 100% } .mont-builder { grid-template-columns: 1fr } .mont-preview { position: static } } @media(max-width:680px) { .mont-steps { grid-template-columns: 1fr; gap: 6px } .mont-steps li { min-height: 44px } .mont-options { padding: 17px 14px 4px } .mont-card-title { display: block } .mont-count { display: inline-block; margin-top: 9px } .mont-option .var-opt { padding-left: 0 } .mont-trust { grid-template-columns: 1fr } .mont-trust>div { padding: 11px 13px } .mont-preview { padding: 16px } } .ft-statusline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px } .ft-statusline span { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font-size: 10.5px; font-weight: 700 } .ft-statusline .ft-status-ok { border-color: #b7e5d5; background: #effcf7; color: #18745f } @media(max-width:560px) { .ft-statusline { gap: 5px } .ft-statusline span { font-size: 9.5px } } .mont-wa { margin-top: 14px; padding: 14px; border-radius: 10px; background: #effcf5; border: 1px solid #b7e5d5; color: #14532d } .mont-wa b { display: block; font-size: 14px } .mont-wa small { display: block; margin-top: 4px; font-size: 12px; color: #3f6212 } .mont-custom { display: flex; gap: 10px; margin-top: 10px } .mont-custom .f { flex: 1; margin: 0 } .mont-mats button { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 130px; padding: 10px 12px } .mont-mats b { font-size: 13px } .mont-mats small { font-size: 11.5px; color: var(--muted); font-weight: 600 } .mont-view { margin-top: 12px } .mont-fit { margin-top: 10px; display: grid; gap: 8px } .mont-zoom { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) } .mont-zoom input[type=range] { flex: 1; accent-color: var(--brand, #0888c8) } .mont-zoom b { font-size: 12px; color: var(--ink); min-width: 38px; text-align: right } .mont-artboard svg.mont-sheet { width: min(100%, 225px) } @media(max-width:560px) { .mont-mats button { min-width: 0; flex: 1 } .mont-custom { flex-direction: row } } .mont-sizes button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 108px; min-height: 54px; text-align: center; line-height: 1.2 } .mont-size-name { display: block; font-size: 12.5px; font-weight: 800; white-space: nowrap } .mont-size-yield { display: block; color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1.25; white-space: normal } .mont-sizes button.on .mont-size-yield { color: #28779d } .mont-mats button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-width: 138px; min-height: 61px; flex: 1; text-align: left; white-space: normal } .mont-mats b { display: block; line-height: 1.25 } .mont-mats small { display: block; line-height: 1.3; white-space: normal } .mont-quantity { display: grid; gap: 8px; max-width: 390px } .mont-qtd-control { display: grid; grid-template-columns: 44px minmax(150px, 220px) 44px; gap: 8px; align-items: center } .mont-qtd-step { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 21px var(--font-d); cursor: pointer; transition: background .15s, border-color .15s, transform .08s } .mont-qtd-step:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft) } .mont-qtd-step:active:not(:disabled) { transform: scale(.97) } .mont-qtd-step:disabled { opacity: .45; cursor: not-allowed } .mont-qtd-step:focus-visible, .mont-qtd-field input:focus-visible { outline: 3px solid rgba(8, 136, 200, .25); outline-offset: 2px } .mont-qtd-field { position: relative; min-width: 0 } .mont-qtd-field input { width: 100%; height: 44px; padding: 8px 76px 8px 14px; text-align: left; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums } .mont-qtd-field span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none } .mont-qtd-field input::-webkit-inner-spin-button, .mont-qtd-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .mont-qtd-field input[type=number] { appearance: textfield; -moz-appearance: textfield } .mont-qtd-derived { min-height: 52px; padding: 9px 11px; border: 1px solid #d9e9f5; border-radius: 10px; background: #f2f8fd } .mont-qtd-equacao { display: grid; gap: 4px } .mont-qtd-equacao b { font-size: 12.5px; line-height: 1.35; color: var(--ink) } .mont-qtd-equacao small { font-size: 10.5px; line-height: 1.35; color: var(--muted) } .mont-qtd-invalid { font-size: 12px; color: #b45309 } .mont-wa-confirm { margin-top: 7px !important; color: #315d46 !important; line-height: 1.4 } .mont-contact-manual-note { margin: 5px 0 10px; color: #d1deec; font-size: 11.5px; line-height: 1.45 } .mont-wa .btn { width: 100%; justify-content: center; white-space: normal; text-align: center } @media(max-width:560px) { .mont-sizes button { min-width: 0; flex: 1; padding: 8px 6px !important } .mont-size-name { font-size: 11.5px } .mont-size-yield { font-size: 9.5px } .mont-mats button { min-width: 0; flex: 1; padding: 9px 8px !important } .mont-mats b { font-size: 11.5px } .mont-mats small { font-size: 10px } .mont-qtd-control { grid-template-columns: 42px minmax(100px, 1fr) 42px } .mont-qtd-step { width: 42px; height: 44px } } .chip-off { background: #7f1d1d; color: #fff; border: 1px solid rgba(255, 255, 255, .25); font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 99px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; line-height: 1.35; } .chip-off a { color: #fde68a; text-decoration: underline; font-weight: 800 } .chip-off a:hover { color: #fff } @media(max-width:560px) { .chip-off { border-radius: 14px; font-size: 12px; padding: 8px 12px } } .store-hero .cta>:first-child { padding: 14px 26px; font-size: 15px; box-shadow: 0 12px 26px -10px rgba(8, 136, 200, .6) } .selo-google { flex-wrap: wrap; width: auto; max-width: 100%; row-gap: 8px } .selo-chip { font-size: 11.5px; font-weight: 700; color: #dbe7f5; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; padding: 3px 11px; white-space: nowrap } .mission-grid { grid-template-columns: repeat(5, 1fr) } .mission-blue .mission-icon { background: #e0f2fe; color: #0369a1 } .mission-card { border-top: 3px solid transparent } .mission-card:hover { border-top-color: var(--brand-2) } .tl-step { list-style: none; display: flex; margin: 12px 0 4px; padding: 0 } .tl-step li { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); position: relative; padding-top: 26px; min-width: 0 } .tl-step .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #e3e9f0; display: grid; place-items: center; font-size: 12px } .tl-step li.done .dot { background: var(--ok); color: #fff } .tl-step li.now .dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft) } .tl-step li.done .lb, .tl-step li.now .lb { color: var(--ink); font-weight: 800 } .tl-step li::after { content: ""; position: absolute; top: 11px; left: calc(-50% + 13px); right: calc(50% + 13px); height: 3px; border-radius: 3px; background: #e3e9f0 } .tl-step li:first-child::after { display: none } .tl-step li.done::after { background: var(--ok) } .tl-step-cancel { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--bad) } .chip-demo { display: block; text-align: center; border-radius: 0; padding: 9px 14px; font-size: 12.5px } .dept-inner { height: 38px } .dept-inner a { height: 38px } .home-prod { transition: transform .18s ease, box-shadow .18s ease } .home-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) } .foto-card .dpi-badge { font-size: 12.5px; padding: 5px 11px } #ft-google { color: #fbbf24; font-weight: 800; margin-left: 10px; white-space: nowrap } @media(max-width:560px) { .tl-step .lb { display: none } .tl-step li { padding-top: 24px } } .au-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--ink, #082040); color: #8fe3f5; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .6px } .au-big { font-family: var(--font-d); font-size: 30px; line-height: 1.12; margin: 14px 0 4px; letter-spacing: -.5px } .au-cy { color: #00b8d9 } .au-vi { color: #6a7cf5 } .au-svc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; margin: 0 0 8px } .au-svc .au-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--ink, #082040); color: #fff; display: grid; place-items: center; font-size: 16px; flex: none } .au-svc b { font-size: 13px; display: block } .au-svc small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px } .au-contact { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; margin-top: 10px } .au-contact div { margin-top: 4px; color: var(--muted) } .pf-tabs { display: flex; gap: 8px; margin-bottom: 12px } .pf-tab { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--muted); font-family: inherit } .pf-tab.on { border-color: #00b8d9; background: #e6f8fb; color: var(--ink, #082040) } .f-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } @media(max-width:560px) { .f-row2 { grid-template-columns: 1fr } } .ck-opt { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 2px; cursor: pointer } .at-hero { background: linear-gradient(135deg, #0e2a47 0%, #16436e 62%, var(--brand) 100%); border-radius: 18px; color: #fff; padding: 34px 28px 30px; position: relative; overflow: hidden; margin: 6px 0 18px } .at-hero .blob { position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, .22), transparent 65%) } .at-k { letter-spacing: .14em; font-size: 11px; font-weight: 800; color: #fbbf24; text-transform: uppercase } .at-hero h1 { font-size: clamp(24px, 4vw, 32px); margin: 6px 0 8px; line-height: 1.15; color: #fff } .at-hero p { color: #c7d6ea; font-size: 14px; max-width: 560px; margin: 0 0 18px } .at-ctas { display: flex; gap: 10px; flex-wrap: wrap } .at-ghost { background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .35); color: #fff } .at-ghost:hover { background: rgba(255, 255, 255, .2) } .at-strip { margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: #a9bedd } .at-strip b { color: #fff } .at-grid2 { display: grid; grid-template-columns: 1.25fr .95fr; gap: 18px } @media(max-width:860px) { .at-grid2 { grid-template-columns: 1fr } } .at-card { padding: 20px } .at-card h3 { margin: 0 0 4px; font-size: 15.5px } .at-card .sub { color: var(--muted); font-size: 12.5px; margin: 0 0 12px } .at-inp { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-family: var(--font-b); background: #f8fafc; color: var(--ink) } .at-inp:focus { outline: none; border-color: var(--brand); background: #fff } .at-canal { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px } .at-canal .ic2 { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none } .at-canal small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px } .at-canal .seta { margin-left: auto; color: #94a3b8; font-weight: 900; text-decoration: none } .c-wa { background: #e7f6ec } .c-tel { background: #eaf2fb } .c-loc { background: #fdf3e3 } .at-faq .acc { box-shadow: 0 4px 14px -10px rgba(14, 42, 71, .18) } .at-faq .acc.open { border-color: #bcd7f0; box-shadow: 0 6px 18px -10px rgba(29, 111, 184, .25) } .at-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .at-formgrid .full { grid-column: 1/-1 } @media(max-width:560px) { .at-formgrid { grid-template-columns: 1fr } } .at-lbl { font-size: 11px; font-weight: 800; color: #42536b; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px } .hm-hero { background: linear-gradient(135deg, #0e2a47 0%, #16436e 62%, var(--brand) 100%); color: #fff; padding: 46px 0 26px; border-radius: 0 0 26px 26px } .hm-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center } .mk-hero-art { position: relative; min-height: 380px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: linear-gradient(135deg, #1b4e79, #163469 60%, #47225e); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .65) } .mk-hero-art .promo-in { max-width: none; margin: 0; min-height: 380px } .mk-hero-art .promo-slide { min-height: 380px } .mk-hero-art .promo-slide.promo-img { min-height: 380px; border-radius: 0 } .mk-hero-art .promo-nav { right: 14px; bottom: 12px } @media(max-width:900px) { .hm-in { grid-template-columns: 1fr; gap: 24px } .mk-hero-art { min-height: 300px } .mk-hero-art .promo-in { min-height: 300px } .mk-hero-art .promo-slide { min-height: 300px } .mk-hero-art .promo-slide.promo-img { min-height: 300px } } .hm-hero .store-kicker { color: #fbbf24 } .hm-hero h1 { color: #fff } .hm-hero h1 span { color: #fbbf24 } .hm-hero .sub { color: #c7d6ea } .hm-hero .hero-meta { color: #a9bedd } .hm-frame { border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 20px; background: #fff } .hm-frame b { font-size: 14px } .hm-frame small { color: var(--muted); font-size: 11.5px; display: block; margin-top: 6px } .hm-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 4px } .hm-ph i { aspect-ratio: 1/1.16; background: linear-gradient(160deg, #dbeafe, #fbcfe8); border-radius: 4px } .hm-preco { float: right; background: #fff7e6; border: 1px solid #fde4ae; color: #7c5806; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800 } .hm-passos .passo { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; color: #c7d6ea } .hm-passos .passo b { color: #fff } .hm-passos .p-n { background: #fbbf24; color: #3b2a00 } .promo-slide.promo-img { position: relative; display: none; align-items: flex-end; justify-content: flex-start; min-height: clamp(210px, 30vw, 420px); padding: 0; overflow: hidden; border-radius: 18px; color: #fff; text-decoration: none } .promo-slide.promo-img.on { display: flex; animation: promoIn .45s ease } .promo-slide.promo-img .promo-bgimg { position: absolute; inset: -18px 0; width: 100%; height: calc(100% + 36px); object-fit: cover; z-index: 0; transform: translateY(var(--py, 0px)); will-change: transform; transition: transform .12s linear } .promo-slide.promo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(6, 20, 44, 0) 38%, rgba(6, 20, 44, .78)); z-index: 1 } .promo-slide.promo-img .promo-fx { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; max-width: min(560px, 86%) } .promo-slide.promo-img .promo-fx b { font-size: clamp(17px, 2.4vw, 26px); line-height: 1.15; text-shadow: 0 1px 10px rgba(0, 0, 0, .45) } .promo-slide.promo-img .promo-fx .promo-sub { font-size: 13px; opacity: .92 } .promo-slide.promo-img .promo-fx .promo-preco { font-weight: 800; font-size: 15px; color: #ffe08a } .promo-slide.promo-img .promo-fx .promo-antigo { text-decoration: line-through; opacity: .7; font-size: 12px; margin-left: 6px } .promo-slide.promo-img .promo-go { margin-top: 8px; align-self: flex-start; background: #fff; color: #082040; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px } @media (prefers-reduced-motion:reduce) { .promo-slide.promo-img .promo-bgimg { transform: none } } .pd-sticky, .ck-sticky { display: none } .pd-sticky-sp, .ck-sticky-sp { display: none } .arte-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0 } .arte-steps div { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center } .arte-steps div.on { border-color: var(--brand); background: var(--brand-soft) } .arte-steps b { display: block; font-family: var(--font-d); font-size: 15px; color: var(--ink) } .arte-steps span { font-size: 11px; color: var(--muted) } .arte-garantia { margin: 9px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5 } .ci-arte { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-family: var(--font-d); font-weight: 800; font-size: 10px; color: #92400e; background: var(--amber-soft); border: 1px solid #fcd34d; border-radius: 99px; padding: 4px 9px } @media (max-width:960px) { .store-topo .btn-wa-topo, .store-topo .cart { width: 44px; min-width: 44px; height: 44px } .burger { width: 44px; height: 44px } .btn { min-height: 44px } .btn-sm { min-height: 40px } .ck-steps div { font-size: 11.5px; padding: 10px 1px } } @media (max-width:680px) { .store-topo .bar { flex-wrap: wrap; height: auto; padding-top: 9px; padding-bottom: 9px; row-gap: 8px } .store-topo .bar-right { margin-left: auto } .store-search { order: 3; flex: 1 1 100%; max-width: none; height: 44px; border-radius: 12px } .store-search input { font-size: 13px; padding: 0 13px } .store-search input::placeholder { font-size: 12.5px } .store-search button { width: 48px } .logo-store { min-width: 0 } .store-hero .cta { flex-direction: column; gap: 8px } .store-hero .cta .btn { width: 100%; flex: none; min-width: 0; min-height: 48px; font-size: 13.5px; padding: 13px 14px; justify-content: center } .hero-meta { font-size: 11.5px !important; gap: 12px !important } .opt { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; align-items: flex-start } .opt input { width: 20px; height: 20px } .opt label { font-size: 13.5px } .tiers th, .tiers td { padding: 12px 10px; font-size: 13px } .pd-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; align-items: center; gap: 10px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 24px -14px rgba(8, 32, 64, .35) } .pd-sticky-tot { line-height: 1.05; min-width: 0 } .pd-sticky-tot b { font-family: var(--font-d); font-size: 16px; color: var(--ink); white-space: nowrap } .pd-sticky-tot small { display: block; font-size: 10px; color: var(--muted) } .pd-sticky .btn-b { flex: 1; min-height: 47px; font-size: 14px } .pd-sticky-sp { display: block; height: calc(78px + env(safe-area-inset-bottom, 0px)) } .ck-sticky { display: flex; flex-direction: column; gap: 7px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 24px -14px rgba(8, 32, 64, .35) } .ck-sticky-top { display: flex; justify-content: space-between; align-items: baseline } .ck-sticky-top span { font-size: 11px; color: var(--muted) } .ck-sticky-top b { font-family: var(--font-d); font-size: 16px; color: var(--ink) } .ck-sticky .btn { width: 100%; min-height: 47px; font-size: 13.5px } .ck-sticky .ck-sticky-wa { min-height: 42px } .ck-sticky-sp { display: block; height: calc(152px + env(safe-area-inset-bottom, 0px)) } .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 120 } #modal-app { max-width: 100vw; width: 100%; top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto } #modal-app .modal-in { border-radius: 20px 20px 0 0; max-height: 82vh; padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) } #modal-app .modal-in::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 99px; background: #c5d3e0; margin: 0 auto 10px } } @media (min-width:681px) and (max-width:960px) { #modal-app { max-width: 560px; top: auto; bottom: 0; left: 0; right: 0; margin: 0 auto } #modal-app .modal-in { border-radius: 20px 20px 0 0; max-height: 82vh; padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) } #modal-app .modal-in::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 99px; background: #c5d3e0; margin: 0 auto 10px } } .mont-aviso-arte { margin: 0 0 12px; background: var(--bad-soft); border: 1.5px solid #fca5a5; color: #7f1d1d; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.5 } .store-hero .cta .btn { border-radius: 12px; padding: 15px 24px } .store-hero .at-ghost { border-color: rgba(255, 255, 255, .55) } .store-steps { gap: 16px; margin-top: 6px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid rgba(255, 255, 255, .12) } .store-steps .passo { border-radius: 14px; padding: 16px 18px; grid-template-columns: 31px 1fr; column-gap: 12px; transition: background .18s ease, border-color .18s ease } .store-steps .passo:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24) } .store-steps .passo b { font-size: 13px } .store-steps .passo span:not(.p-n) { font-size: 12px; line-height: 1.45 } #selo-google-capa { margin-top: 24px } .hm-hero .selo-google { gap: 13px; padding: 11px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16) } .hm-hero .selo-chip { border: 0; border-left: 1px solid rgba(255, 255, 255, .18); border-radius: 0; padding: 2px 0 2px 15px; margin-left: 1px; background: none } @media(min-width:961px) { .hm-hero { padding: 56px 0 34px } .hm-in { gap: 52px } .hm-hero .store-kicker { margin-bottom: 16px } .hm-hero .sub { margin: 14px 0 26px; font-size: 16.5px } } @media(min-width:901px) { .mk-hero-art { min-height: 420px } .mk-hero-art .promo-in { min-height: 420px } .mk-hero-art .promo-slide { min-height: 420px } .mk-hero-art .promo-slide.promo-img { min-height: 420px } .mk-hero-art .promo-fx { gap: 8px; padding: 30px 34px } .mk-hero-art .promo-go { padding: 10px 18px; margin-top: 12px } } @media(max-width:680px) { .store-hero .cta .btn { padding: 12px 10px } #selo-google-capa { margin-top: 16px } .hm-hero .selo-chip { border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; padding: 3px 10px; margin: 0 } .store-steps { margin-top: 2px; padding-top: 20px; padding-bottom: 26px; gap: 10px } } .store-topo .btn-wa-topo { border-radius: 12px } .store-topo .cart { border-radius: 12px } @media(min-width:961px) { .store-topo .bar { height: 80px; gap: 22px } .store-topo nav.main a { font-size: 12.5px; padding: 8px 10px } } .mission-section { padding: 44px 0 44px } .store-rail-section { padding: 44px 0 44px } .store-proof { margin-top: 44px } .fim-wrap { padding: 44px 0 44px } @media(max-width:680px) { .mission-section { padding: 34px 0 34px } .store-rail-section { padding: 34px 0 34px } .store-proof { margin-top: 30px } .fim-wrap { padding: 34px 0 38px } } .ck-steps { gap: 8px } .ck-steps div { border-bottom: 0; border-radius: 10px; background: #f2f6fa; padding: 11px 6px; font-size: 12.5px } .ck-steps div.on { background: var(--brand); color: #fff } .ck-steps div.done { background: var(--ok-soft); color: #0a7c4a } .f-grid { gap: 44px } .foot .f-grid { padding: 56px 20px 34px } .ft-paginas a { font-size: 12.5px; line-height: 2.1 } .foot a:hover { text-decoration: underline; text-underline-offset: 3px } @media(max-width:680px) { .foot .f-grid { padding-top: 34px } } .store-card-cta .btn { transition: filter .18s ease, transform .18s ease } @media(hover:hover) { .prod:hover .store-card-cta .btn { filter: brightness(.94) } .prod:hover .store-card-cta .btn:first-child { transform: translateY(-1px) } } @media(max-width:1100px) { .mission-grid { grid-template-columns: repeat(2, 1fr); gap: 12px } } @media(max-width:680px) { .mission-grid { grid-template-columns: 1fr; gap: 12px } .mission-card { min-height: 0; padding: 16px; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center } .mission-card .mission-icon { width: 44px; height: 44px; margin-bottom: 0; grid-row: 1/span 2 } .mission-card b { font-size: 14.5px; grid-column: 2; min-width: 0 } .mission-card small { font-size: 12px; line-height: 1.5; grid-column: 2; min-width: 0 } .mission-card strong { font-size: 11px; margin-top: 0; white-space: nowrap; grid-column: 3; grid-row: 1/span 2; align-self: center } .store-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 14px; padding-top: 26px; padding-bottom: 40px } .store-steps .passo { padding: 18px 20px; grid-template-columns: 34px 1fr; column-gap: 12px } .store-steps .passo .p-n { width: 34px; height: 34px; font-size: 14px } .store-steps .passo b { font-size: 14px } .store-steps .passo span:not(.p-n) { font-size: 12.5px; line-height: 1.55 } } @media(max-width:680px) { .arte-steps { grid-template-columns: 1fr; gap: 10px } .arte-steps div { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px } .arte-steps span { font-size: 12px } .tiers { display: block; overflow-x: auto } } @media(max-width:560px) { .acao { flex-wrap: wrap } .acao-txt { min-width: 0; flex: 1 1 100% } .acao .btn { width: 100%; justify-content: center } .pf-tabs { flex-wrap: wrap } } :root { --brand-ink: #075e8f; --muted-2: #8496ad; --wa-2: #22c55e; } .store-topo .faixa-soc { background: #071c36 } .store-topo .faixa-soc .fs-in { gap: 14px; padding: 8px 20px } .store-topo .soc-line .lab, .store-topo .faixa-soc .siga { font-size: 10px; letter-spacing: .14em; color: #8fb2d6 } .faixa-google { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: #eaf3fd } .faixa-google .estrelas, .faixa-google b { color: #fff } .store-topo .bar { height: 78px; gap: 20px; border: 0 } .store-topo .store-search { height: 46px; border: 1.5px solid var(--line); border-radius: 13px; background: var(--paper); max-width: 560px } .store-topo .store-search:focus-within { background: #fff; border-color: #bcd8ec; box-shadow: 0 0 0 4px rgba(10, 134, 200, .12) } .store-topo .store-search input { font-size: 14px } .store-topo .store-search button { width: 38px; height: 38px; margin-right: 3px; border-radius: 10px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff } .store-topo .bar-right { display: flex; align-items: center; gap: 8px } .store-topo .header-account { height: 46px; padding: 0 13px; border-radius: 12px; font-weight: 700; color: var(--ink); font-size: 13.5px } .store-topo .header-account:hover { background: var(--paper) } .store-topo .header-icon { color: var(--brand-ink) } .store-topo .bar-right .cart { order: 2 } .store-topo .bar-right .btn-wa-topo { order: 3 } .store-topo .bar-right .burger { order: 4 } .store-topo .bar-right .header-account { order: 1 } .store-topo .cart { height: 46px; min-width: 46px; border-radius: 12px; border: 1.5px solid var(--line); box-shadow: var(--shadow) } .store-topo .cart:hover { border-color: #cfdbea; background: #fbfdff } .store-topo .btn-wa-topo { height: 44px; padding: 0 16px; border-radius: 12px; background: linear-gradient(180deg, var(--wa-2, #22c55e), #1faa54); color: #fff; font-weight: 800; box-shadow: 0 10px 22px -12px rgba(34, 197, 94, .8) } .store-topo .btn-wa-topo:hover { filter: brightness(1.05); transform: translateY(-1px) } .deptbar { background: #fbfdff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) } .deptbar .dept-inner { height: 48px; gap: 5px } .deptbar .menu-navy a, .deptbar #dept-links a { color: var(--text); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 99px; border: 1px solid transparent } .deptbar .menu-navy a:hover, .deptbar #dept-links a:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: #cfe9f8 } .deptbar .dept-k { color: var(--muted-2); font-weight: 800; letter-spacing: .12em } .deptbar .dept-sep { background: var(--line); height: 18px } .hm-hero { background: radial-gradient(900px 380px at 84% -12%, rgba(40, 169, 233, .26), transparent 60%), radial-gradient(700px 320px at 6% 112%, rgba(245, 165, 36, .14), transparent 60%), linear-gradient(158deg, #071c36 0%, #0c2b50 55%, #0a3c68 100%); padding-top: 58px } .hm-hero .store-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(7px, 2.6vw, 11.5px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9cc8ea; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; padding: 7px 14px; margin-bottom: 18px; white-space: nowrap; max-width: 100% } .hm-hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.03em } .hm-hero .sub { font-size: 16px; line-height: 1.62; color: #c9dcf0; max-width: 56ch } .hm-hero .cta { gap: 12px; margin-top: 26px } .hm-hero .cta .btn { height: 52px; padding: 0 24px; border-radius: 13px; font-size: 15px } .btn-y { background: linear-gradient(180deg, #ffc45c, #f5a524); color: #3b2503; box-shadow: 0 10px 22px -12px rgba(245, 165, 36, .75) } .btn-y:hover { filter: none; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(245, 165, 36, .85) } .hm-hero .at-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28) } .hm-hero .at-ghost:hover { background: rgba(255, 255, 255, .15); transform: translateY(-1px) } .hm-hero .selo-google { gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16) } .hm-hero .selo-google b { color: #fff } .hm-hero .selo-chip { border-left: 1px solid rgba(255, 255, 255, .18); color: #dbe9f8 } .store-steps { gap: 0; padding-top: 0; padding-bottom: 0; margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12) } .store-steps .passo { background: none; border: 0; border-right: 1px solid rgba(255, 255, 255, .09); border-radius: 0; padding: 18px 26px; display: flex; align-items: center; gap: 14px; align-content: center } .store-steps .passo:last-child { border-right: 0 } .store-steps .passo .p-n { width: 34px; height: 34px; flex: none; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: 13.5px } .store-steps .passo b { font-size: 13.5px } .store-steps .passo span:not(.p-n) { font-size: 12px; color: #a9c4de } @media(max-width:960px) { .store-steps .passo { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 14px 20px } .store-steps .passo:last-child { border-bottom: 0 } } .mission-section { padding-top: 50px; padding-bottom: 50px } .store-rail-section { padding-top: 46px; padding-bottom: 46px } .sec-head .eyebrow-m { color: var(--brand) } .sec-head .eyebrow-m::before { content: ""; display: inline-block; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-2); margin-right: 9px; vertical-align: middle } .mission-grid { gap: 14px } .mission-card { border-radius: 18px; padding: 20px 18px 18px; gap: 12px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease } .mission-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d5e2ef } .mission-card .mission-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 21px } .mission-card b { font-size: 15px; letter-spacing: -.01em } .mission-card small { font-size: 12.5px; line-height: 1.55 } .mission-card strong { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--brand-ink); font-weight: 800 } .store-rail-grid { gap: 16px; grid-auto-columns: minmax(248px, 1fr) } .home-prod { border-radius: 18px; box-shadow: var(--shadow) } .home-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d5e2ef } .home-prod .thumb { height: 172px; background: linear-gradient(150deg, #eef6fd, #dcebf8) } .home-prod .store-badge { background: rgba(255, 255, 255, .94); border: 0; color: var(--brand-ink); padding: 6px 10px; font-size: 9.5px; letter-spacing: .08em; box-shadow: var(--shadow) } .home-prod .store-badge.yellow { background: #fff8ea; color: #8a5a06 } .home-prod .bd { padding: 16px; gap: 8px } .home-prod .bd b { font-size: 15px; line-height: 1.32; letter-spacing: -.01em } .home-prod .desc { font-size: 12.5px; line-height: 1.55; color: var(--muted); min-height: 38px } .home-prod .price { grid-template-columns: 1fr; row-gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line) } .home-prod .price span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2) } .home-prod .price b { font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums } .home-prod .price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted) } .home-prod .store-tiers { gap: 6px; margin-top: 6px } .home-prod .store-tier { border-radius: 99px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid #d3eafb; background-image: none } .home-prod .store-tier strong { color: var(--brand-ink); font-size: 11px } .home-prod .store-card-cta { margin-top: 10px; gap: 9px } .home-prod .store-card-cta .btn { flex: 1; height: 40px; padding: 0 10px; font-size: 12.5px; border-radius: 11px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff; border: 0; box-shadow: 0 10px 22px -12px rgba(37, 148, 216, .7) } .home-prod .store-card-cta .btn:hover { filter: brightness(1.05) } .home-prod .product-ref { font-size: 10.5px; color: var(--muted-2); font-weight: 700 } .photo-entry-card { border: 0; border-radius: 18px; padding: 24px; gap: 24px; box-shadow: var(--shadow); background: linear-gradient(150deg, #eaf5fd, #dcecf9) } .photo-entry-card:has(+ .store-rail-grid) {} section:has(#pol-tag-12x8) .photo-entry-card { background: linear-gradient(150deg, #fdeef7, #fbe3f1) } .photo-entry-art { height: 118px; border-radius: 14px; border-color: rgba(255, 255, 255, .9) } .photo-entry-card h3 { font-size: 19px; letter-spacing: -.02em } .photo-entry-card p { font-size: 13.5px; line-height: 1.62 } .photo-tags span { background: #fff; border: 1px solid var(--line); color: var(--text); font-weight: 700 } .store-proof { background: radial-gradient(700px 260px at 90% 0, rgba(40, 169, 233, .22), transparent 60%), linear-gradient(150deg, #071c36, #0c2b50); border: 0 } .store-proof .eyebrow-m { color: #9cc8ea } .store-proof .h2 { color: #fff } .store-proof p { color: #c9dcf0 } .proof-google { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-lg); justify-self: end; min-width: 264px; gap: 6px } .proof-google span { color: #ffb400; letter-spacing: 2px } .proof-google b { font-family: var(--font-d); font-size: 19px; color: var(--ink); letter-spacing: -.02em } .proof-google small { color: var(--muted) } .foot { background: linear-gradient(180deg, #06182e, #04101f) } .f-grid { gap: 44px } .pay-strip { border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); padding: 12px 14px } .f-base { border-top: 1px solid rgba(255, 255, 255, .08) } .promo.sem-img .promo-in { min-height: 0 } .promo.sem-img .promo-slide { min-height: 0; align-items: center } .promo.sem-img .promo-slide::after { display: none } .promo.sem-img .promo-fx { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; max-width: none; width: 100%; padding: 12px 22px } .promo.sem-img .promo-fx b { font-size: clamp(14px, 1.5vw, 17px); text-shadow: none } .promo.sem-img .promo-sub { font-size: 12.5px; opacity: .9 } .promo.sem-img .promo-preco { font-size: 13px } .promo.sem-img .promo-go { margin-left: auto; text-decoration: none } .wa-fab { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); z-index: 55 } .cookie-bar { bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 80 } @media(min-width:961px) { .wa-fab { bottom: 48px } .cookie-bar { bottom: 0; padding: 7px 16px } } @media(max-width:680px) { .cookie-bar { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 12px } .cookie-bar p { flex: 1 1 220px; min-width: 190px; font-size: 11px } .cookie-bts { display: flex; gap: 8px; flex: none } .cookie-bts .btn { min-height: 32px; padding: 5px 12px; font-size: 11.5px } .wa-fab { width: 52px; height: 52px; right: 14px } } @media(max-width:960px) { .tabbar-m { background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); box-shadow: 0 -10px 30px -18px rgba(8, 32, 64, .35) } .tabbar-m a.on { color: var(--brand) } } .home-prod .price>span, .home-prod .price>b, .home-prod .price>em { grid-column: auto; justify-self: start; text-align: left } #grid-cat .prod .price>span, #grid-cat .prod .price>b, #grid-cat .prod .price>em { grid-column: auto; justify-self: start; text-align: left } .deptbar .menu-navy a.on, .deptbar #dept-links a.on { color: var(--brand-ink); background: var(--brand-soft); border-color: #cfe9f8 } #grid-cat { gap: 16px } @media(min-width:1280px) { #grid-cat { grid-template-columns: repeat(5, minmax(0, 1fr)) } } .prod .bd>b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em } #grid-cat .prod .desc { -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.6em } #grid-cat .prod { border-radius: 18px; box-shadow: var(--shadow) } #grid-cat .prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d5e2ef } #grid-cat .prod .thumb { height: 172px; background: linear-gradient(150deg, #eef6fd, #dcebf8) } #grid-cat .prod .bd { padding: 16px; gap: 8px } #grid-cat .prod .bd b { font-size: 15px; line-height: 1.32; letter-spacing: -.01em } #grid-cat .prod .desc { font-size: 12.5px; line-height: 1.55; color: var(--muted) } #grid-cat .prod .price { grid-template-columns: 1fr; row-gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line) } #grid-cat .prod .price span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2) } #grid-cat .prod .price b { font-family: var(--font-d); font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums } #grid-cat .prod .price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted) } #grid-cat .prod .fx { display: inline-flex; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid #d3eafb; border-radius: 99px; padding: 4px 10px } .pg-box { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 14px } .pg-h { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px } .pg-l { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px dashed var(--line) } .pg-l:first-of-type { border-top: 0 } .pg-b { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand) } .pg-b.pg-pix { background: var(--ok-soft); color: var(--ok) } .pg-b.pg-card { background: var(--brand-soft); color: var(--brand) } .pg-t { flex: 1; min-width: 0; color: var(--muted) } .pg-v { flex: 0 0 auto; font-weight: 800; color: var(--ink); white-space: nowrap } .pg-v.pg-ok { color: var(--ok) } .pg-f { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.5 } @media (max-width:640px) { .pg-l { flex-wrap: wrap; gap: 6px } .pg-t { flex: 1 0 100%; order: 3; font-size: 12px } } .ps-list { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .01em } .faixa-soc .fs-in { min-height: 30px } .faixa-soc .siga { letter-spacing: .14em } .faixa-soc .faixa-google { font-weight: 700 } @media (max-width:640px) { .faixa-soc .siga { display: none } .faixa-soc .faixa-google { display: inline-flex; margin-left: 0; font-size: 11px } .faixa-soc .fs-in { min-height: 26px; gap: 8px } } @media (min-width:641px) and (max-width:1024px) { .store-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .dept-inner { overflow-x: auto; overflow-y: hidden; scrollbar-width: none } .dept-inner::-webkit-scrollbar { display: none } .pg-box { max-width: 520px } } .mk-hero-art.sem-img { min-height: 0 } .mk-hero-art.sem-img .promo-in { min-height: 0 } .mk-hero-art.sem-img .promo-slide { min-height: 0; align-items: stretch } .mk-hero-art.sem-img .promo-slide::after { display: none } .mk-hero-art.sem-img .promo-fx { padding: 20px; gap: 6px; justify-content: center } .mk-hero-art.sem-img .promo-tag { font-size: 30px; line-height: 1; margin-bottom: 4px } .mk-hero-art.sem-img .promo-go { margin-top: 12px; align-self: flex-start } @media(max-width:900px) { .mk-hero-art.sem-img, .mk-hero-art.sem-img .promo-in, .mk-hero-art.sem-img .promo-slide, .mk-hero-art.sem-img .promo-slide.promo-img { min-height: 0 } .mk-hero-art.sem-img .promo-fx { padding: 16px } .mk-hero-art.sem-img .promo-tag { font-size: 26px } } @media(min-width:1200px) { .mk-hero-art.sem-img .promo-slide { min-height: 0 } } .page .wrap { padding-left: 24px; padding-right: 24px } #p-produto .wrap.corpo { padding-left: 24px; padding-right: 24px } @media (max-width:640px) { .page .wrap { padding-left: 20px; padding-right: 20px } #p-produto .wrap.corpo { padding-left: 20px; padding-right: 20px } .corpo { padding-top: 26px; padding-bottom: 56px } #p-produto .corpo { padding-top: 20px; padding-bottom: 64px } } @media (max-width:380px) { .page .wrap { padding-left: 16px; padding-right: 16px } #p-produto .wrap.corpo { padding-left: 16px; padding-right: 16px } } .prod .thumb.sem-foto { background: radial-gradient(circle at 1.5px 1.5px, rgba(19, 58, 99, .075) 1.5px, transparent 0) 0 0/13px 13px, linear-gradient(158deg, #f5fafe 0%, #e8f1f9 55%, #dfeaf6 100%); position: relative; font-size: 34px; line-height: 1; } .prod .thumb.sem-foto::before { content: ""; position: absolute; inset: 11px; border: 1.5px dashed rgba(19, 58, 99, .14); border-radius: 11px; pointer-events: none; } .prod .thumb.sem-foto::after { content: attr(data-cat); position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px; font: 800 9px/1.3 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: #6b8099; text-align: center; background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod .thumb.sem-foto[data-cat=""]::after { content: none } .prod .thumb.sem-foto { align-content: center } .prod .thumb.sem-foto>*, .prod .thumb.sem-foto { z-index: 1 } .prod .thumb.sem-foto { padding-bottom: 12px } .vt-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1 } .vt-ph b { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, #0c2c4e, #0888c8); color: #fff; font: 800 19px/52px var(--font-d); text-align: center; box-shadow: 0 6px 16px rgba(8, 32, 64, .18); letter-spacing: .02em } .vt-ph i { font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6b8099; font-weight: 800 } .fig.sem-foto .vt-ph b { width: 64px; height: 64px; border-radius: 18px; font-size: 23px; line-height: 64px } .empty.vazio-bonito { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 24px } .empty.vazio-bonito .vt-ph b { width: 58px; height: 58px; border-radius: 17px; font-size: 21px; line-height: 58px } .vazio-bts { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; justify-content: center } .btn-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important } .btn-wa:hover { filter: brightness(.95) } .home-prod .thumb.sem-foto { font-size: 40px } .home-prod .thumb.sem-foto::before { inset: 14px } @media (max-width:640px) { .prod .thumb.sem-foto { font-size: 27px; padding-bottom: 10px } .prod .thumb.sem-foto::before { inset: 8px; border-radius: 9px } .prod .thumb.sem-foto::after { font-size: 8px; padding: 13px 7px 6px; letter-spacing: .07em } } #grid-cat .prod:nth-child(4n+2) .thumb.sem-foto { background: radial-gradient(circle at 1.5px 1.5px, rgba(19, 58, 99, .07) 1.5px, transparent 0) 0 0/13px 13px, linear-gradient(158deg, #f7fbfe 0%, #eaf2f8 55%, #e2edf5 100%); } #grid-cat .prod:nth-child(4n+3) .thumb.sem-foto { background: radial-gradient(circle at 1.5px 1.5px, rgba(19, 58, 99, .08) 1.5px, transparent 0) 0 0/13px 13px, linear-gradient(158deg, #f4f8fd 0%, #e6eef9 55%, #dde8f6 100%); } #grid-cat .prod:nth-child(4n+4) .thumb.sem-foto { background: radial-gradient(circle at 1.5px 1.5px, rgba(19, 58, 99, .065) 1.5px, transparent 0) 0 0/13px 13px, linear-gradient(158deg, #f6faff 0%, #e9f0f7 55%, #e0e9f3 100%); } .pd .fig.sem-foto { aspect-ratio: auto; min-height: 0; height: 230px; font-size: 76px; background: radial-gradient(circle at 2px 2px, rgba(19, 58, 99, .07) 2px, transparent 0) 0 0/18px 18px, linear-gradient(158deg, #f5fafe 0%, #e8f1f9 55%, #dfeaf6 100%); } .pd .fig.sem-foto::before { content: ""; position: absolute; inset: 16px; border: 1.5px dashed rgba(19, 58, 99, .15); border-radius: 16px; pointer-events: none; } .pd .fig.sem-foto::after { content: attr(data-cat); position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 11px; font: 800 10px/1.3 var(--font-b); letter-spacing: .12em; text-transform: uppercase; color: #6b8099; text-align: center; background: linear-gradient(to top, rgba(255, 255, 255, .93), rgba(255, 255, 255, 0)); } .pd .fig.sem-foto[data-cat=""]::after { content: none } @media (max-width:640px) { .pd .from { flex-wrap: wrap; align-items: baseline; gap: 4px 9px; padding: 15px 16px; margin: 18px 0; } .pd .from small { flex: 1 0 100%; text-align: left; margin-left: 0; max-width: none; margin-top: 2px; } .pd .from b { font-size: 27px } } .photo-entry-art.pola-foto { background: #f3efe9 url(img/polaroid-banner.jpg) center 48%/cover no-repeat; border-color: #e9e2d8; padding: 0 } .photo-entry-art.pola-foto i { display: none } .photo-entry-art.foto-foto { background: #f3efe9 url(img/fotos-revelacao-1.jpg) center 52%/cover no-repeat; border-color: #e9e2d8; padding: 0 } .photo-entry-art.foto-foto i { display: none } .photo-entry-art.foto-foto span { position: absolute; left: 9px; bottom: 8px; color: #fff; font-size: 8px; letter-spacing: .09em; text-shadow: 0 1px 5px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .4) } .ft-mostra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 18px } .ft-mostra-foto { height: 188px; border-radius: 14px; border: 1px solid var(--line); background: #f3efe9 center/cover no-repeat; box-shadow: var(--shadow) } @media(max-width:960px) { .ft-mostra-foto { height: 160px } } @media(max-width:680px) { .ft-mostra { grid-template-columns: 1fr; gap: 10px } .ft-mostra-foto { height: 150px } .ft-mostra-2 { display: none } } .busca-conta { margin: 6px 2px 0; font-size: 12.5px; color: #5b6b7c; letter-spacing: .01em } .busca-conta:empty { display: none } .sk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; overflow: hidden } .sk-card .sk-thumb, .sk-card .sk-l { background: linear-gradient(90deg, #eef2f6 25%, #e3e9f0 37%, #eef2f6 63%); background-size: 400% 100%; animation: sk-brilho 1.4s ease infinite } .sk-card .sk-thumb { height: 104px; border-radius: 10px; margin-bottom: 10px } .sk-card .sk-l { height: 11px; border-radius: 6px; margin-top: 8px } @keyframes sk-brilho { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } } @media (prefers-reduced-motion:reduce) { .sk-card .sk-thumb, .sk-card .sk-l { animation: none } } .pd-skel { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 } .pd-skel .pd-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px } @media(max-width:820px) { .pd-skel .pd-skel-grid { grid-template-columns: 1fr } } .pd-skel .pd-skel-grid>div { display: flex; flex-direction: column; gap: 10px } .pd-skel .sk-l { background: linear-gradient(90deg, #eef2f6 25%, #e3e9f0 37%, #eef2f6 63%); background-size: 400% 100%; animation: sk-brilho 1.4s ease infinite; height: 12px; border-radius: 6px } @media (prefers-reduced-motion:reduce) { .pd-skel .sk-l { animation: none } } .pre-vitrine { padding-top: 24px } .pre-vitrine[hidden] { display: none !important } .pre-vitrine-nota { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted, #5b6b7c) } @media(max-width:680px) { .store-topo .bar { flex-wrap: wrap; height: auto; min-height: 0; gap: 12px; row-gap: 12px; padding-top: 10px; padding-bottom: 12px } .store-topo .store-search { order: 3; flex: 1 1 100%; max-width: none; height: 44px; border-radius: 12px } .store-topo .bar-right { margin-left: auto } .doc-wrap { grid-template-columns: minmax(0, 1fr) } .doc-wrap>*, .doc, .doc-body { min-width: 0 } .doc-lista { grid-template-columns: 1fr } .doc-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch } .doc-body th, .doc-body td { white-space: normal } } @media(max-width:420px) { .sec-head { flex-wrap: wrap; gap: 8px } .sec-head .btn-sm { font-size: 11px; padding: 8px 10px } } @media(max-width:380px) { .faixa-soc .faixa-google { display: none } } .home-prod .price span, #grid-cat .prod .price span { color: var(--muted) } .home-prod .product-ref { color: var(--muted) } .tabbar-m a.on { color: var(--brand-ink) } .proof-google span { color: #a16207 } .soc-icons .rede, .faixa-soc .rede { position: relative } .soc-icons .rede::after, .faixa-soc .rede::after { content: ""; position: absolute; inset: -6px; border-radius: 12px } .promo-set { width: 38px; height: 38px } .faixa-google:empty { display: none } main:not(:has(#p-inicio.on))~#prova-social { display: none !important } .ci-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap } .ci-qty { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 2px 6px } .ci-qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 800; font-size: 13px; line-height: 1; color: var(--ink); display: inline-grid; place-items: center; padding: 0 } .ci-qty button:hover { border-color: var(--brand); color: var(--brand) } .ci-qty b { font-size: 12px; min-width: 18px; text-align: center; color: var(--ink) } @media(max-width:960px) { .ck-sticky { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 58 } .ck-sticky-sp { height: calc(196px + env(safe-area-inset-bottom, 0px)) } main:has(#p-pedido.on .ck-sticky)~.cookie-bar { bottom: calc(182px + env(safe-area-inset-bottom, 0px)) } } @media(max-width:680px) { .cookie-bar { padding: 8px 12px; gap: 8px; font-size: 11px; line-height: 1.4 } .cookie-bts .btn { min-height: 32px; padding: 5px 12px; font-size: 11.5px } } .photo-entry-card, section:has(#pol-tag-12x8) .photo-entry-card { background: #faf6f1 !important; border: 1px solid #e9e2d8 !important; border-radius: 20px !important; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr; min-height: 268px; padding: 0 !important; gap: 0 !important; align-items: stretch; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .18); margin-bottom: 18px; } .photo-entry-body { padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .photo-entry-eyebrow { font-family: var(--font-m, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #64748b; font-weight: 700; margin-bottom: 6px; } .photo-entry-card h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.1; letter-spacing: -.02em; color: #0f172a; margin: 0 0 8px; } .photo-entry-card h3 em { font-style: italic; color: var(--brand); } .photo-entry-card p { color: #475569; font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; max-width: 54ch; } .photo-entry-card .photo-tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; } .photo-entry-card .photo-tags span { font-size: 11.5px; font-weight: 700; color: #0f172a; background: #ffffff; border: 1px solid #e2dad0; padding: 5px 11px; border-radius: 999px; } .photo-entry-card .photo-tags span b { color: var(--brand); font-weight: 800; } .photo-entry-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .btn-entry-dark { background: #0f172a; color: #ffffff !important; text-decoration: none; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, background .15s; } .btn-entry-dark:hover { background: #1e293b; transform: translateY(-1px); } .photo-entry-link { font-size: 12.5px; font-weight: 700; color: #334155; text-decoration: underline; text-underline-offset: 3px; } .photo-entry-link:hover { color: var(--brand) } .photo-entry-garantias { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eae2d6; font-size: 11.5px; color: #475569; } .photo-entry-garantias b { color: #15803d } .photo-entry-card .photo-entry-art { position: relative; min-height: 250px; height: auto !important; border-radius: 0 !important; border: 0 !important; padding: 0 !important; } .photo-entry-card .photo-entry-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #faf6f1 0%, rgba(250, 246, 241, 0) 24%); pointer-events: none; } @media(max-width:960px) { .photo-entry-card, section:has(#pol-tag-12x8) .photo-entry-card { grid-template-columns: 1fr !important; min-height: 0; } .photo-entry-card .photo-entry-art { height: 195px !important; min-height: 0; order: -1; } .photo-entry-card .photo-entry-art::before { background: linear-gradient(0deg, #faf6f1 0%, rgba(250, 246, 241, 0) 40%); } .photo-entry-body { padding: 18px 20px 20px } } @media(max-width:680px) { .photo-entry-card, section:has(#pol-tag-12x8) .photo-entry-card { border-radius: 16px !important; } .photo-entry-card .photo-entry-art { height: 160px !important; } .photo-entry-body { padding: 15px 16px 18px } .photo-entry-card p { font-size: 13px } .photo-entry-card .photo-tags { gap: 6px } .photo-entry-card .photo-tags span { font-size: 11px; padding: 4px 10px } .btn-entry-dark { width: 100%; justify-content: center } } .prod .thumb:has(img.ph), #grid-cat .prod .thumb:has(img.ph) { aspect-ratio: 1 / 1; height: auto !important; } .card-bopp-swatches { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0 2px; } .card-bopp-swatches .cb-dot { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55); flex: 0 0 13px; } .cb-dot.cb-gold { background: linear-gradient(135deg, #fef08a 0%, #d4af37 50%, #92400e 100%) } .cb-dot.cb-silver { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #64748b 100%) } .cb-dot.cb-rose { background: linear-gradient(135deg, #ffe4e6 0%, #f4a28c 50%, #9f1239 100%) } .cb-dot.cb-black { background: linear-gradient(135deg, #475569 0%, #0f172a 100%) } .card-bopp-swatches small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 2px; } .pd { align-items: start; } .pd-gal-col, .pd-info-col { min-width: 0; } @media(min-width:961px) { .pd-gal-col { position: sticky; top: 88px; } } .pd .fig { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); } .pd-fig-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .14); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(15, 23, 42, .12); transition: transform .15s, background .15s; z-index: 2; } .pd-fig-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); } .pd-fig-nav.prev { left: 12px } .pd-fig-nav.next { right: 12px } .pd-fig-badge { position: absolute; left: 12px; bottom: 12px; background: rgba(15, 23, 42, .76); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); z-index: 2; } .pd-fig-zoom { position: absolute; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .94); color: var(--ink); border: 1px solid rgba(15, 23, 42, .14); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; box-shadow: 0 3px 10px rgba(15, 23, 42, .12); z-index: 2; } .pd-fig-zoom:hover { background: #fff } .pd .gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .pd .gal-b { width: 100%; height: auto; padding: 5px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; } .pd .gal-b img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; } .pd .gal-b span { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pd .gal-b.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .pd .gal-b.on span { color: var(--brand-ink); } .pd-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: #faf6f1; border: 1px solid #e6dec8; } .pd-trust-strip>div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pd-trust-strip b { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-trust-strip span { font-size: 11px; color: var(--muted); line-height: 1.3; } .pd-top-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pd-sku-chip { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--paper); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } .pd-title { margin: 8px 0 0; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.22; } .pd-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; } .pd-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #1e293b; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 5px 11px; border-radius: 999px; } .pd-familia-box { margin: 14px 0; padding: 16px; border-radius: 16px; background: #faf6f1; border: 1.5px solid #e4dbcd; } .pd-familia-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #dcd1c0; } .pd-familia-head b { font-size: 14.5px; color: var(--ink); } .pd-familia-head span { font-size: 12px; color: var(--muted); } .pd-fam-group+.pd-fam-group { margin-top: 12px; } .pd-fam-lbl { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; } .pd-fam-lbl strong { color: var(--ink); } .pd-fam-row { display: flex; flex-wrap: wrap; gap: 8px; } .pd-fam-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 11px; border: 1.5px solid #d6cbb9; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; } .pd-fam-btn small { font-size: 11px; font-weight: 600; color: var(--muted); } .pd-fam-btn:hover { border-color: var(--brand); transform: translateY(-1px); } .pd-fam-btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(2, 132, 199, .15); } .pd-swatch { width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .25); flex: 0 0 16px; } .pd-swatch.sw-gold { background: linear-gradient(135deg, #fef08a 0%, #d4af37 50%, #92400e 100%) } .pd-swatch.sw-silver { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #64748b 100%) } .pd-swatch.sw-rose { background: linear-gradient(135deg, #ffe4e6 0%, #f4a28c 50%, #9f1239 100%) } .pd-swatch.sw-black { background: linear-gradient(135deg, #475569 0%, #0f172a 100%) } .pd-swatch.sw-transp { background: linear-gradient(45deg, #cbd5e1 25%, transparent 25%, transparent 75%, #cbd5e1 75%, #cbd5e1), linear-gradient(45deg, #cbd5e1 25%, #fff 25%, #fff 75%, #cbd5e1 75%, #cbd5e1); background-size: 8px 8px; background-position: 0 0, 4px 4px; } .pd-swatch.sw-dark { background: linear-gradient(135deg, #334155 0%, #090d16 100%) } .from-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .from-unit-pill { background: #fff; border: 1px solid #bae6fd; color: var(--brand-ink); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; } .pd-tiers-wrap { margin: 14px 0; } .pd-tiers-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .pd-tiers-head b { font-size: 13.5px } .pd-tiers-head span { font-size: 12px; color: var(--muted) } .tiers.tiers-click { margin: 0; } .tiers.tiers-click tr[onclick] { cursor: pointer; transition: background .12s; } .tiers.tiers-click tr[onclick]:hover { background: #f1f8fe; } .tier-radio { display: inline-block; width: 18px; color: var(--brand); font-weight: 800; } .tier-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; } .tier-tag.hot { background: #fef3c7; color: #92400e; border: 1px solid #fde68a } .tier-tag.best { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0 } .tier-save { color: #0a7c4a; font-weight: 800 } .pd-buy-box { margin-top: 14px; padding: 18px; border-radius: 18px; background: #faf6f1; border: 1.5px solid #e4dbcd; } .pd-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pd-total-preview { display: flex; flex-direction: column; align-items: flex-end; background: #fff; border: 1px solid #dcd1c0; padding: 10px 14px; border-radius: 14px; min-width: 148px; } .pd-total-preview span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .pd-total-preview b { font-family: var(--font-d); font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.15; } .pd-total-preview small { font-size: 11.5px; color: var(--muted); } .pd-rich-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-top: 22px; } .pd-rich-card { padding: 22px; min-width: 0; } .pd-rich-card h2 { font-size: 17.5px; margin: 0 0 12px; } .pd-rich-lead { margin: 0 0 10px; font-size: 15.5px; color: var(--ink); } .pd-specs-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .pd-specs-tbl tr:nth-child(even) { background: var(--paper); } .pd-spec-k { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 700; white-space: nowrap; vertical-align: top; } .pd-spec-ic { color: var(--brand); display: inline-block; width: 22px; } .pd-spec-v { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.45; } .pd-ideal-wrap { display: flex; flex-wrap: wrap; gap: 7px; } .pd-ideal-chip { font-size: 12.5px; font-weight: 600; background: var(--paper); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; } .pd-notas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .pd-nota-card { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; padding: 11px 13px; font-size: 13px; background: var(--paper); } .pd-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 18px; } .pd-lightbox[hidden] { display: none !important } .pd-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .82); backdrop-filter: blur(4px); } .pd-lb-dialog { position: relative; z-index: 1; max-width: min(820px, 94vw); max-height: 90vh; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; } .pd-lb-dialog img { max-width: 100%; max-height: calc(90vh - 70px); object-fit: contain; border-radius: 12px; } .pd-lb-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(15, 23, 42, .78); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; } .pd-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(15, 23, 42, .78); color: #fff; font-size: 24px; font-weight: 800; cursor: pointer; } .pd-lb-nav.prev { left: 20px } .pd-lb-nav.next { right: 20px } .pd-lb-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 6px 2px; font-size: 13px; } @media(max-width:960px) { .pd-rich-grid { grid-template-columns: 1fr; } } @media(max-width:680px) { .pd-trust-strip { grid-template-columns: 1fr; gap: 6px; } .pd-trust-strip>div { flex-direction: row; justify-content: space-between; align-items: center; } .pd-familia-box, .pd-buy-box, .pd-rich-card { padding: 14px; } .pd-fam-btn { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 8px 10px; font-size: 12.5px; } .pd-total-preview { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; } .pd-spec-k { white-space: normal; } } .pd-pill.pd-pill-live { background: var(--brand-soft); border-color: #bae6fd; color: var(--brand-ink); } .pd-live-summary { margin: 0 0 12px; padding: 10px 13px; border-radius: 11px; background: #faf6f1; border: 1px solid #e4dbcd; font-size: 13.5px; line-height: 1.45; color: var(--ink); } .pd-live-summary b { color: var(--brand-ink); } .pd-specs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .pd-specs-head h2 { margin: 0; } .pd-specs-badge { font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid #bae6fd; padding: 3px 9px; border-radius: 999px; } .pd-specs-tbl tr.pd-spec-live { background: #f8fbff; } .pd-specs-tbl tr.pd-spec-live .pd-spec-v { font-weight: 700; color: var(--ink); } .pd-live-dot { color: var(--brand); font-size: 10px; vertical-align: middle; } .photo-entry-art.ades-foto { background: #ede6dc url("img/adesivos-banner.jpg") center/cover no-repeat; } .ades-banner { background: #faf6f1; border: 1px solid #e6dfd5; border-radius: 22px; margin: 4px 0 22px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, .06); } .ab-txt { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; } .ab-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #64748b; background: transparent; border: 0; padding: 0; cursor: pointer; margin-bottom: 8px; } .ab-back:hover { color: #0f172a } .ab-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a6d3b; margin-bottom: 6px; display: block; } .ades-banner h1 { font-family: var(--font-d); font-size: clamp(24px, 3vw, 34px); line-height: 1.12; margin: 0 0 10px; color: #0f172a; font-weight: 800; letter-spacing: -.02em; } .ades-banner h1 em { font-style: italic; font-weight: 700; color: var(--brand); } .ab-sub { color: #475569; font-size: 14px; line-height: 1.58; margin: 0 0 14px; max-width: 54ch; } .ab-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .ab-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #e2dad0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #1e293b; cursor: pointer; transition: .15s; } .ab-pill b { color: var(--brand) } .ab-pill.on, .ab-pill:hover { border-color: var(--brand); background: #f0f9ff; } .ab-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn-hero-dark { background: #0f172a; color: #fff; border: 0; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: .15s; } .btn-hero-dark:hover { background: #1e293b; transform: translateY(-1px); } .ab-link { font-size: 12.5px; color: #334155; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .ab-garantias { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eae2d6; font-size: 11.5px; color: #475569; } .ab-garantias b { color: #15803d } .ab-foto { position: relative; min-height: 280px; background: #ede6dc url("img/adesivos-banner.jpg") center/cover no-repeat; } .ab-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #faf6f1 0%, rgba(250, 246, 241, 0) 24%); pointer-events: none; } .ades-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .ades-sec-head h2 { font-family: var(--font-d); font-size: 18px; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: -.01em; } .ades-sec-head p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; } .ades-sec-badge { font-size: 11.5px; font-weight: 800; color: #082040; background: #e0f2fe; border: 1px solid #bae6fd; padding: 5px 12px; border-radius: 999px; } .mat-grid.mont-mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; } .mat-kit { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); text-align: left; } .mat-kit:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 12px 26px rgba(8, 32, 64, .1); } .mat-kit.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), 0 12px 26px rgba(8, 136, 200, .14); } .mat-photo { height: 142px; background: #f1f5f9 center/cover no-repeat; position: relative; border-bottom: 1px solid var(--line); } .mat-badge { position: absolute; top: 10px; left: 10px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(4px); } .mat-badge.pop { background: #0284c7 } .mat-badge.transp { background: #0f172a } .mat-badge.eco { background: #15803d } .mat-check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 99px; background: #fff; border: 2px solid #cbd5e1; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } .mat-kit.on .mat-check { background: var(--brand); border-color: var(--brand); color: #fff; } .mat-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .mat-name { font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; } .mat-apelido { font-size: 11.5px; color: var(--muted); font-weight: 600; } .mat-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); } .mat-price { font-family: var(--font-d); font-size: 21px; font-weight: 800; color: var(--ink); } .mat-price small { font-size: 11px; font-weight: 600; color: var(--muted); font-family: var(--font-b); } .mat-tiers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .mat-tier { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .mat-bullets { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 11.5px; color: #334155; } .mat-bullets li::before { content: "✓ "; color: var(--brand); font-weight: 900; } .mont-builder.ades-studio { display: grid; grid-template-columns: 340px minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .mont-qtd-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .mont-qtd-shortcuts button { flex: 1 1 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 8px; font-size: 11px; font-weight: 800; color: #475569; cursor: pointer; transition: .15s; } .mont-qtd-shortcuts button.on, .mont-qtd-shortcuts button:hover { border-color: var(--brand); background: #f0f9ff; color: #0369a1; } .mont-stage-col { display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .mont-stage-body { background: radial-gradient(circle at 50% 35%, #f8fafc 0%, #e2e8f0 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .mont-stage-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } .mont-stage-dual.so-cartela { grid-template-columns: 1fr; } .mont-stage-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 8px 22px rgba(8, 32, 64, .08); min-width: 0; } .mont-stage-label { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: 8px; } .mont-stage-label b { background: #f1f5f9; color: #0f172a; padding: 2px 8px; border-radius: 999px; } .mont-artboard-sheet { width: 100%; display: grid; place-items: center; background: linear-gradient(145deg, #1e293b, #0f172a); border-radius: 12px; padding: 12px; min-height: 220px; } .mont-artboard-sheet svg { width: auto; max-width: 100%; max-height: 230px; height: auto; display: block; } .mont-stage-sub { font-size: 11px; color: #64748b; text-align: center; margin-top: 8px; line-height: 1.35; } .mont-util-bar { background: #0f172a; color: #e2e8f0; border-radius: 11px; padding: 9px 12px; font-size: 11.5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .mont-util-bar b { color: #fff } .mont-util-bar .ok { color: #4ade80; font-weight: 800 } .mont-kpi-dark { background: linear-gradient(145deg, #082040, #0c315e); color: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; } .mont-kpi-dark small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #93c5fd; font-weight: 800; display: block; } .mont-kpi-dark strong { font-family: var(--font-d); font-size: 24px; font-weight: 800; display: block; line-height: 1.15; margin-top: 2px; } .mont-kpi-dark span { font-size: 12px; color: #cbd5e1; display: block; margin-top: 3px; } @media(max-width:1120px) { .mont-builder.ades-studio { grid-template-columns: 1fr 1fr; } .mont-builder.ades-studio .mont-preview { grid-column: 1 / -1; } } @media(max-width:960px) { .mont-util-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } main:has(#p-produto.on)~.wa-fab { display: none !important; } } @media(max-width:900px) { .ades-banner { grid-template-columns: 1fr } .ab-foto { height: 210px; min-height: 0; order: -1 } .ab-foto::before { background: linear-gradient(0deg, #faf6f1 0%, rgba(250, 246, 241, 0) 40%) } .ab-txt { padding: 20px 22px 22px } .mat-grid.mont-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px } .mat-photo { height: 116px } .mat-body { padding: 12px 12px 14px } .mat-name { font-size: 14.5px } .mat-price { font-size: 18.5px } .mont-builder.ades-studio { grid-template-columns: 1fr } } @media(max-width:720px) { .mat-grid.mont-mats { grid-template-columns: 1fr; gap: 12px } .mat-photo { height: 138px } .mat-body { padding: 14px 15px 15px } .mat-name { font-size: 16px } .mat-price { font-size: 21px } } @media(max-width:680px) { .ab-txt { padding: 16px 16px 18px } .mat-grid.mont-mats { grid-template-columns: 1fr } .mont-stage-dual { grid-template-columns: 1fr } .mont-stage-col .mont-preview-top { flex-direction: column; align-items: stretch; gap: 8px; } .mont-stage-col .mont-view { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mont-stage-col .mont-view button { width: 100%; justify-content: center; text-align: center; } } @media(max-width:480px) { .mont-util-bar { grid-template-columns: 1fr; gap: 5px; } .pd-cta { flex-direction: column; gap: 8px; } .pd-cta .btn { width: 100%; flex: none; } } .pd-cta .btn { white-space: normal; flex-wrap: wrap; text-align: center; justify-content: center; line-height: 1.3; padding: 11px 14px; max-width: 100%; } .pd-cta .btn small { display: block; width: 100%; font-size: 11px; margin-top: 2px; } .drawer-soc a.rede { color: var(--ink, #082040); background: #fff; border: 1.5px solid #cbd5e1; } .drawer-soc a.rede .rede-icone { filter: brightness(0) opacity(.86); } .drawer-soc a.rede:hover { background: var(--brand-soft, #e0f2fe); border-color: var(--brand, #0888c8); color: var(--brand-ink, #0369a1); } .promo-slide:not(.promo-img) { min-height: 0 !important; } @media(max-width:900px) { .mk-hero-art:not(:has(.promo-slide.on.promo-img)), .mk-hero-art:not(:has(.promo-slide.on.promo-img)) .promo-in, .mk-hero-art:not(:has(.promo-slide.on.promo-img)) .promo-slide, .hm-hero .promo:not(:has(.promo-img)) .promo-in, .hm-hero .promo.sem-img .promo-in { min-height: 0 !important; } .mk-hero-art:not(:has(.promo-slide.on.promo-img)) .promo-slide.on, .hm-hero .promo .promo-slide:not(.promo-img) { min-height: 0 !important; padding: 18px 18px 54px !important; align-items: flex-start; } .mk-hero-art:not(:has(.promo-slide.on.promo-img)) .promo-slide::after { display: none; } .hm-hero .promo .promo-slide:not(.promo-img) .promo-fx { padding: 0 !important; } } .mont-builder, .mont-builder.ades-studio>*, .mont-options, .mont-stage-col, .mont-preview, .mont-fit, .mont-file-picked { min-width: 0; max-width: 100%; } .mont-file-picked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mont-file-picked b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mont-zoom { flex-wrap: wrap; } .mont-zoom input[type=range] { min-width: 96px; } @media(max-width:900px) { .mont-builder, .mont-builder.ades-studio { grid-template-columns: minmax(0, 1fr) !important; } } @media(max-width:640px) { .var-opt.mont-sizes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .var-opt.mont-sizes button { width: 100%; min-width: 0; min-height: 58px; padding: 10px 8px !important; } .var-opt.mont-sizes .mont-size-name { font-size: 13.5px; } .var-opt.mont-sizes .mont-size-yield { font-size: 11px; line-height: 1.25; } .mont-zoom .btn { width: 100%; justify-content: center; } } @media(max-width:560px) { .pd .gal { gap: 6px; } .pd .gal-b { padding: 4px 3px; min-width: 0; } .pd .gal-b span { white-space: normal; text-align: center; line-height: 1.15; font-size: 10px; overflow: visible; text-overflow: clip; word-break: break-word; } } @media (min-width: 681px) { .store-rail-grid .prod.home-prod { max-width: 310px; } } @media (min-width: 961px) { .deptbar .dept-inner { height: 44px; gap: 1px; flex-wrap: nowrap; overflow: hidden; } .deptbar .menu-navy { gap: 1px; } .deptbar .menu-navy a, .deptbar #dept-links a { height: 32px; padding: 0 6px; font-size: 11.5px; column-gap: 3px; } .deptbar .dept-k { height: 32px; padding: 0 5px; font-size: 9px; letter-spacing: .05em; } .deptbar .dept-inner a .dk-n { font-size: 9px; padding: 1px 4px; color: var(--brand-ink); background: var(--brand-soft); } } @media (min-width: 1025px) { #grid-inicio.store-rail-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); overflow-x: visible; gap: 14px; } #grid-inicio.store-rail-grid .prod.home-prod { max-width: none; } } .pd .from { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 18px 20px !important; } .pd .from .from-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; } .pd .from .from-main>div>span { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 221, .88); margin-bottom: 3px; } .pd .from .from-main>div>b { font-family: var(--font-d); font-size: 32px; line-height: 1.1; color: #fff; display: block; } .pd .from>small { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12.5px !important; line-height: 1.48 !important; color: rgba(255, 255, 255, .86) !important; text-align: left !important; } .pd .from>small b { font-family: var(--font-b) !important; font-size: inherit !important; font-weight: 700 !important; display: inline !important; color: #fff !important; } @media (max-width: 640px) { .pd .from .from-main>div>b { font-size: 27px; } } .pd-sticky, .pd-sticky-sp, .ck-sticky, .ck-sticky-sp { display: none !important; } .ci .th { width: 62px; height: 62px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); } .ci .th .ci-ph { width: 100%; height: 100%; object-fit: cover; display: block; } .f textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; font-family: var(--font-b); font-size: 14px; color: var(--ink); background: #fff; resize: vertical; min-height: 74px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .f textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8, 136, 200, .14); } .ck-opt { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0 16px; font-size: 13px; line-height: 1.45; color: var(--ink); cursor: pointer; } .ck-opt input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); } .ck-opt small { grid-column: 2; display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; } .nota-legal { display: none !important; } .store-badge.eco { left: auto; right: 9px; top: 9px; z-index: 5; background: #166534; border: 0; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } .prod .bd>b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.64em } .prod .price span { text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .08em } .foot .f-grid.f2, .f-grid.f2 { grid-template-columns: minmax(280px, 1.25fr) minmax(436px, 2.05fr) minmax(352px, 1.9fr) } .f-grid.f2 .f-meio { display: grid; grid-template-columns: 1fr 1fr } .f-grid.f2 .f-col-ct { grid-column: auto; max-width: none } .f-grid.f2 .pay-strip { width: 100%; max-width: none } .f-grid.f2 .soc-icons { flex-wrap: wrap } .f-grid.f2 .soc-line { flex-direction: column; align-items: flex-start; gap: 8px } .f-grid.f2 .soc-icons .rede { width: 40px; height: 40px; min-width: 40px; min-height: 40px } @media(max-width:960px) { .foot .f-grid.f2, .f-grid.f2 { grid-template-columns: 1fr 1fr } } @media(max-width:960px) { .f-grid.f2 .f-meio { grid-template-columns: 1fr } } @media(max-width:520px) { .foot .f-grid.f2, .f-grid.f2 { grid-template-columns: 1fr } } #p-produto .crumb a { min-height: 32px; display: inline-flex; align-items: center; padding: 2px 4px } #p-produto .pd-fig-zoom { min-height: 34px; display: inline-flex; align-items: center } .pd .fig img.pd-img-contain { object-fit: contain !important; padding: 10px; background: linear-gradient(160deg, #f8fafc, #eef4f8) } .pd .gal[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pd .gal[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .pd .gal[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } .pd .gal[data-count="5"], .pd .gal:has(> .gal-b:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px } @media(max-width:960px) { .pd .gal[data-count="5"], .pd .gal:has(> .gal-b:nth-child(5):last-child) { gap: 6px } .pd .gal[data-count="5"] .gal-b, .pd .gal:has(> .gal-b:nth-child(5):last-child) .gal-b { padding: 4px 3px } .pd .gal[data-count="5"] .gal-b span, .pd .gal:has(> .gal-b:nth-child(5):last-child) .gal-b span { font-size: 9.5px; letter-spacing: -.01em } } .pd-fam-row[data-cols="2"], .pd-fam-row[data-cols="4"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px } .pd-fam-row[data-cols="3"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } .pd-fam-row[data-cols] .pd-fam-btn { width: 100%; min-width: 0; min-height: 44px; flex: none; justify-content: flex-start; text-align: left; padding: 8px 11px; line-height: 1.22 } .pd-fam-row[data-cols] .pd-fam-btn>span:not(.pd-swatch) { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .pd-fam-row[data-cols] .pd-fam-btn small { display: block; line-height: 1.2 } @media(max-width:860px) { .pd-fam-row[data-cols="3"] .pd-fam-btn { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 6px; gap: 5px } .pd-fam-row[data-cols="3"] .pd-fam-btn>span:not(.pd-swatch) { align-items: center; font-size: 11.5px } } .pd-gal-col:has(.pd-rich-grid) { position: static !important } .pd-rich-grid.pd-rich-tabbed { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; grid-template-columns: none } .pd-rich-tabs { display: flex; flex-wrap: nowrap; gap: 5px; padding: 5px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px } .pd-rtab { flex: 1 1 auto; min-width: 0; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 12.5px/1.2 var(--font-b); padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s } .pd-rtab:hover { color: var(--ink) } .pd-rtab.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(8, 32, 64, .09) } .pd-rich-pane { display: none } .pd-rich-pane.on { display: block } .pd-rich-more { display: none; width: 100%; min-height: 38px; margin-top: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--brand-ink); font: 700 12.5px var(--font-b); cursor: pointer; align-items: center; justify-content: center; gap: 6px } .pd-rich-more:hover { border-color: var(--brand); background: var(--brand-soft) } .pd-rich-grid.pd-rich-short:not(.is-exp) .pd-rich-body { max-height: 220px; overflow: hidden; position: relative } .pd-rich-grid.pd-rich-short:not(.is-exp) .pd-rich-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none } .pd-rich-grid.pd-rich-short .pd-rich-more { display: inline-flex } @media(min-width:721px) and (max-width:960px) { .pd { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 22px; align-items: start } .pd .from .from-main>div>b { font-size: 27px } .pd-trust-strip { grid-template-columns: 1fr; gap: 5px; padding: 10px 11px } .pd-trust-strip>div { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px } .pd-rich-card { padding: 16px } .pd-rtab { font-size: 11.5px; padding: 6px 7px; gap: 4px } } @media(max-width:720px) { .pd { display: flex; flex-direction: column; gap: 12px; margin-top: 12px !important } .pd-gal-col, .pd-info-col { display: contents } .pd-m-gal { order: 1; min-width: 0 } .pd-m-head { order: 2; min-width: 0 } .pd-rich-grid.pd-rich-tabbed { order: 3; margin-top: 0; min-width: 0 } .pd-m-calc { order: 4; min-width: 0 } .pd .fig:not(.sem-foto) { aspect-ratio: 4 / 3 } .pd-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 7px 5px; margin-top: 8px } .pd-trust-strip>div { flex-direction: column; align-items: center; text-align: center; min-width: 0 } .pd-trust-strip b { font-size: 10px; line-height: 1.25; letter-spacing: -.01em } .pd-trust-strip span { display: none } .pd-m-head .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13.5px; line-height: 1.45 } .pd-pills { gap: 5px; margin: 8px 0 0 } .pd-pill { font-size: 11px; padding: 4px 9px } .pd-rtab { font-size: 12px; padding: 6px 7px } .pd-rich-grid.pd-rich-tabbed:not(.is-exp) .pd-rich-body { max-height: 190px; overflow: hidden; position: relative } .pd-rich-grid.pd-rich-tabbed:not(.is-exp) .pd-rich-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none } .pd-rich-grid.pd-rich-tabbed .pd-rich-more { display: inline-flex } } .prod-familia[role="link"]:focus-visible {outline:3px solid var(--brand);outline-offset:3px} .prod-familia .desc {min-height:34px} .prod-family-count {position:absolute;left:9px;bottom:9px;z-index:3;padding:4px 9px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(22,27,46,.86);color:#fff;font:800 10px/1.2 var(--font-b);pointer-events:none} .prod-familia .store-un {display:block;margin-top:2px;color:var(--muted);font-size:10.5px;line-height:1.35} .prod-familia .price span {max-width:100%;font-size:10px} .pd-familia-portal .pd-fam-row[data-cols="2"] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .pd-familia-portal .pd-fam-row[data-cols="3"] {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .pd-familia-portal .pd-fam-row[data-cols="4"] {display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .pd-familia-portal .pd-fam-btn {min-width:0;justify-content:flex-start;flex-wrap:wrap} @media(max-width:560px){ .pd-familia-portal .pd-fam-row[data-cols="3"],.pd-familia-portal .pd-fam-row[data-cols="4"] {grid-template-columns:repeat(2,minmax(0,1fr))} .pd-familia-portal .pd-fam-btn {padding:8px 9px;font-size:12px} .prod-family-count {font-size:9px} } /*camada-621-identidade.css*/ /* ════════════════════════════════════════════════════════════════ camada 6.21-B — IDENTIDADE (paleta do logo, regra 19 da casa) #3B3A96 · #EC0F8C · #F4F1EA · #FFF ───────────────────────────────────────────────────────────────── contraste com texto branco: brand 9,41 ✓ pink 4,19 (só texto grande) contraste ink/paper: 14,89 ✓ ════════════════════════════════════════════════════════════════ */ :root{ --ink:#191842; /* azul-tinta da família do logo, não o navy frio */ --ink-2:#292862; --paper:#F4F1EA; /* papel quente do logo */ --brand:#3B3A96; --brand-2:#5C5AC8; --brand-soft:#ECEBF9; --pink:#EC0F8C; --indigo:#3B3A96; --line:#E3DED2; --muted:#5F5C6B; --gold:#F5C518; } a{color:var(--brand)} .btn-b{background:var(--brand);color:#fff} .btn-y{background:linear-gradient(180deg,#F53BA6,#EC0F8C);color:#fff;box-shadow:0 10px 22px -12px rgba(236,15,140,.6)} .btn-wa,.btn-wa-topo{background:#25d366!important;border-color:#25d366!important;color:#0d3a1e!important} /* superfícies quentes */ body,.page,.home,.catalogo,polaroid,main{background:var(--paper)} .card,.prod,.fpc,.pd-card,.tl-card,.at-card,.fr-op{background:#fff} /*ajustes-615.css*/ /* ══════════════════════════════════════════════════════════════════════ VTDigital — portal do cliente · ajustes da versão 6.15.0 Camada isolada: nada aqui reescreve regra existente de forma destrutiva. Para desfazer, basta remover este arquivo e as duas linhas de include nas páginas (index.html, fotos.html, polaroid.html). Nenhum preço, formato, kit ou regra de negócio é tocado. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. FOTOS · o botão rosa sai de cena ────────────────────────────── Era o único rosa do site (--pink), no meio do navy e do azul da casa. Passa a usar o azul do portal, com o mesmo hover de sempre. */ .btn.btn-f{background:var(--brand)} .btn.btn-f:hover{background:#0a6ea3} /* ── 2. FOTOS · pílulas de formato no celular ───────────────────────── Em tela estreita elas quebravam em três linhas tortas. Viram grade de duas colunas e o rótulo passa a caber inteiro. */ @media (max-width:680px){ .ft-banner-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ft-banner-pills .ft-pill{width:100%;text-align:center;white-space:normal; line-height:1.25;padding:8px 6px} } /* ── 3. RESUMO FLUTUANTE (fotos e adesivos) ─────────────────────────── Só no celular: o total do pedido costumava ficar no fim de uma página longa. Uma pastilha discreta mostra o resumo e leva até ele. */ .jx-chip{display:none;position:fixed;left:50%;transform:translateX(-50%); bottom:14px;z-index:80;align-items:center;gap:10px; max-width:calc(100vw - 96px);padding:11px 16px;border:0;border-radius:999px; background:var(--ink,#082040);color:#fff;cursor:pointer; font:700 13px/1 Inter,system-ui,sans-serif;white-space:nowrap; box-shadow:0 14px 34px -12px rgba(8,32,64,.6)} .jx-chip.show{display:inline-flex} .jx-chip .jx-t{overflow:hidden;text-overflow:ellipsis} .jx-chip .jx-go{font-weight:800;color:#7fd4ff} body.jx-com-chip{padding-bottom:74px} @media (min-width:901px){.jx-chip{display:none !important}} /* ── 4. POLAROID · cartão do kit preenche o quadro ──────────────────── A arte dos kits é 1200×515 (2,33:1) e a moldura do cartão era 150 px de altura numa largura de ~380 px (2,53:1) — comia a borda da cena. A moldura passa a ter exatamente a proporção da arte. */ .pol-kit .ph{height:auto;aspect-ratio:1200/515} /* ── 5. POLAROID · slots do kit no celular ──────────────────────────── Quatro quadros em 4:5 ocupavam quase duas telas. Quadrados, eles continuam mostrando a foto inteira e o total volta a caber na tela. */ @media (max-width:680px){ .pol-slot{aspect-ratio:1/1} .pol-slots{gap:8px} } /* ── 6. POLAROID · trilha curta do construtor ───────────────────────── Só informa em que passo o cliente está. Não trava, não bloqueia. */ .jx-trilha{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px;padding:0;list-style:none} .jx-trilha li{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px; background:#fff;border:1px solid var(--line,#e9e2d8);color:#5a6472; font:600 11.5px/1 Inter,system-ui,sans-serif} .jx-trilha li b{font-family:inherit;font-weight:800;color:#0f3f7a} .jx-trilha li.on{background:#eef6fc;border-color:#bfe0f4;color:#0f3f7a} .jx-trilha li.done{background:#eaf7f0;border-color:#cfe6d8;color:#16794a} .jx-trilha li .jx-n{font-weight:800} /* pílula com nome em cima e preço embaixo — altura igual para todas */ .ft-banner-pills .ft-pill b.jx-preco{display:block;margin-top:2px} @media (max-width:680px){ .ft-banner-pills .ft-pill{display:flex;flex-direction:column;justify-content:center; min-height:44px;padding:7px 6px} } /*ajustes-616.css*/ /* ════════════════════════════════════════════════════════════════════ ajustes-616.css — a home do cliente depois do rabisco de 18/10/2026 Camada por cima do pacote, do mesmo jeito que a ajustes-615: não mexe no app.js minificado nem no estilos.css. Para desfazer, apague este arquivo, o ajustes-616.js e as linhas de include nas páginas. Ajustes aqui (os 6 aprovados como baratos): 1 título do herói sem o "pisca" de texto trocando 3 barra de cookies em 1 linha 4 nome do produto inteiro no card da vitrine 6 "Onde está meu pedido?" sai da vitrine e vai para o topo 7 preço visível na primeira tela do celular 9 aviso de preço da vitrine em 1 linha Os ajustes 2, 5 e 8 (estrutura da vitrine) NÃO estão aqui: eles mexem no peso da página e vão ser mostrados em duas versões antes de decidir. ════════════════════════════════════════════════════════════════════ */ /* ── 1. herói: o texto troca sem "pisca" ───────────────────────────── O pacote abre com uma frase e o app troca pelo texto do painel quando a configuração do ERP chega. Medi os dois lados: o site no ar mudou de frase entre uma visita e outra no mesmo dia — ou seja, a troca não é rara, é o comportamento normal. A cura de verdade é fonte única (o pacote nascer com o texto do painel), e isso é mudança de build, não de camada. Aqui eu faço o que dá sem mexer no app.js: a troca acontece, mas suave — 180 ms de esmaecimento, sem pulo de linha. Tentei antes esconder o título até o texto do ERP chegar. Descartei: em rede lenta o herói ficava 2,1 s em branco, e herói em branco é pior que herói que troca de frase. */ #hero-titulo, #hero-sub { transition: opacity .18s ease; } html.jx-hero-trocando #hero-titulo, html.jx-hero-trocando #hero-sub { opacity: .35; } /* ── 7. preço na primeira tela ──────────────────────────────────────── O primeiro preço da home ficava a 876 px numa tela de 844 px: nenhum preço na primeira dobra. Este selo mostra o menor preço REAL do catálogo — se o catálogo não carregar, ele simplesmente não aparece. */ .jx-ck-curta { display: none; } .jx-hero-preco { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 2px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #eaf3fa; font-size: 13.5px; line-height: 1.2; } .jx-hero-preco b { color: #fff; font-size: 15px; font-weight: 800; } .jx-hero-preco .jx-hp-de { color: #9fc3dd; font-size: 12px; text-transform: lowercase; } @media (max-width: 680px) { .jx-hero-preco { font-size: 12.5px; padding: 5px 10px; gap: 6px; } .jx-hero-preco b { font-size: 13.5px; } } /* ── 3. barra de cookies em 1 linha ─────────────────────────────────── Com 98 px ela cobria 2 dos 5 cards no desktop e ~12% da tela no celular, e só saía se o cliente clicasse. Vira faixa fina. */ .cookie-bar { padding: 7px 14px !important; align-items: center !important; gap: 10px !important; } .cookie-bar p { font-size: 12px !important; line-height: 1.3 !important; margin: 0 !important; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cookie-bar p b { font-weight: 700; } .cookie-bar .cookie-bts { flex: 0 0 auto; gap: 6px !important; } .cookie-bar .cookie-bts .btn { padding: 4px 11px !important; font-size: 12px !important; min-height: 0 !important; line-height: 1.5 !important; } /* No celular a conta é mais dura: cada pixel fixo é produto que o cliente não vê. Aqui a faixa fica em UMA linha — o texto encurta com reticência, o link da Política e os dois botões nunca encolhem. */ @media (max-width: 680px) { /* nowrap é o que impede os botões de caírem para a linha de baixo: sem isso a faixa fica com 56 px em vez de ~30 px. */ .cookie-bar { padding: 5px 9px !important; gap: 7px !important; flex-wrap: nowrap !important; } .cookie-bar p { display: flex; align-items: center; gap: 0; font-size: 11px !important; line-height: 1.2 !important; white-space: nowrap; overflow: visible; } .cookie-bar p .jx-ck-long { display: none; } .cookie-bar p .jx-ck-curta { display: inline; } .cookie-bar p .jx-ck-txt { margin-right: 4px; } .cookie-bar p .jx-ck-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cookie-bar p a { flex: 0 0 auto; white-space: nowrap; } .cookie-bar .cookie-bts { gap: 5px !important; } .cookie-bar .cookie-bts .btn { padding: 3px 7px !important; font-size: 10.5px !important; white-space: nowrap; } /* "Só essenciais" vira "Essenciais": 12 px a menos de largura fixa */ .cookie-bar .cookie-bts .btn-o { font-size: 0 !important; } .cookie-bar .cookie-bts .btn-o::after { content: "Essenciais"; font-size: 11px; } } /* ── 4. nome do produto inteiro ─────────────────────────────────────── O app corta o nome em 28 caracteres ("Bolinha de Natal em Acrílico…"). Nome é exatamente o que o cliente procura. Aqui o card ganha duas linhas de 13,5 px e só corta depois da segunda. */ #grid-inicio .prod .bd > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px !important; line-height: 1.28 !important; min-height: 2.56em; /* reserva as 2 linhas: os cards alinham */ word-break: break-word; } /* ── 6. "Onde está meu pedido?" no topo ─────────────────────────────── Ele ocupava o mesmo espaço de um produto na vitrine de entrada. É serviço, não vitrine. Vira link discreto no topo e o grid volta a ter 4 portas de produto. */ .jx-rastreio-topo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; color: #0d2740; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease; } .jx-rastreio-topo:hover { background: var(--brand-soft); color: var(--brand); } .jx-rastreio-topo svg { flex: 0 0 auto; } /* abaixo de 900 px o topo já está cheio: esconde da barra e deixa na tabbar */ @media (max-width: 900px) { .jx-rastreio-topo { display: none; } } /* o card azul ("Onde está meu pedido?") sai da vitrine: o JS só o marca, o CSS esconde. Se o JS não rodar, o card continua lá — nada desaparece por acidente. */ .jx-mission-blue-movido { display: none !important; } /* ── 9. aviso de preço em 1 linha ───────────────────────────────────── O pacote limita o aviso a 600 px, o que o joga em 2 linhas mesmo no desktop com 1.200 px livres. Aqui o limite sobe o suficiente para a frase caber inteira numa linha, sem mexer no texto. No celular não há largura para tanta palavra: entra uma redação curta (o CSS escolhe), e a promessa continua dita — "o final confirmamos no WhatsApp" — em vez de reticência no meio da frase. */ #home-destaques .intro { max-width: 860px !important; } .jx-aviso-curto { display: none; } @media (max-width: 680px) { #home-destaques .intro { max-width: 100% !important; font-size: 11.5px !important; line-height: 1.35 !important; } .jx-aviso-longo { display: none; } .jx-aviso-curto { display: inline; } } /*ajustes-617.css*/ /* ════════════════════════════════════════════════════════════════════ ajustes-617.css — segunda revisão da home (18/10/2026, à noite) Camada por cima do 6.16.0, do mesmo jeito que as anteriores: não mexe no app.js nem no estilos.css. Para desfazer, apague este arquivo, o ajustes-617.js e as linhas de include nas páginas. O que entrou aqui, decidido pelo dono em 18/10: A. os três passos do herói ficam mais fortes (variante B do rabisco) B. o selo do Google vira "um por vez", girando C. o bloco de avaliações vira "um por vez", com setas e bolinhas D. o cartão da nota do Google cabe em duas linhas ════════════════════════════════════════════════════════════════════ */ /* ── A. os três passos, mais fortes ─────────────────────────────────── Não era contraste (medi 14,2:1 no título e 7,9:1 na descrição — muito acima da norma). Era hierarquia: cinza sobre azul, sem peso, o olho passa direto. Aqui o fundo ganha corpo, o título cresce e a descrição clareia. O número vira o ponto de ancoragem da leitura. */ #passos .passo, .hm-passos .passo { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .34) !important; } #passos .passo b, .hm-passos .passo b { font-size: 15.5px !important; letter-spacing: .1px; } #passos .passo span:not(.p-n), .hm-passos .passo span:not(.p-n) { font-size: 13.5px !important; color: #eaf2fb !important; line-height: 1.45 !important; } #passos .p-n, .hm-passos .p-n { width: 38px !important; height: 38px !important; font-size: 15px !important; font-weight: 800 !important; background: #fbbf24 !important; color: #3b2a00 !important; border: 0 !important; } /* o número cresceu: a coluna do card precisa acompanhar, senão o texto encosta nele no celular */ @media (max-width: 900px) { #passos .passo, .hm-passos .passo { grid-template-columns: 38px 1fr !important; column-gap: 12px !important; } } /* ── B. selo do Google: um quadro por vez ───────────────────────────── Eram quatro informações na mesma linha (estrelas, nota, ícone do Google, retirada em Bangu) — 78 px no celular, duas linhas. Agora são dois quadros de uma linha cada, com bolinhas embaixo: 34 px. O JS monta a estrutura; aqui só o comportamento visual. Se o JS não rodar, o selo continua como está hoje — nada desaparece. */ #selo-google-capa { margin-top: 12px !important; } #selo-google-capa .selo-google { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; width: auto !important; max-width: 100%; position: relative; min-height: 28px; align-items: center; padding: 6px 12px !important; } #selo-google-capa .jx-gslides { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; height: 20px; } #selo-google-capa .jx-gslide { position: absolute; inset: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } #selo-google-capa .jx-gslide.on { opacity: 1; transform: none; pointer-events: auto; } #selo-google-capa .jx-gdots { display: flex; gap: 5px; margin-left: 9px; flex: 0 0 auto; } #selo-google-capa .jx-gdot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .35); cursor: pointer; } #selo-google-capa .jx-gdot.on { background: #fbbf24; width: 14px; } /* ── C e D. bloco de avaliações ─────────────────────────────────────── No ar ele tem 5 depoimentos abertos: 1.346 px no celular e 589 px no computador. Vira um quadro só, com setas e bolinhas — 255 e 241 px. As cinco avaliações continuam todas na página. */ #prova-social { padding: 26px 0 6px !important; } /* D. cartão da nota em duas linhas (era 93 px; fica 63 px) */ #prova-social .prova-nota { display: flex !important; align-items: center !important; gap: 9px !important; flex-wrap: nowrap !important; justify-content: center !important; padding: 10px 14px !important; min-height: 0 !important; margin: 0 auto 12px !important; max-width: 640px !important; } #prova-social .prova-nota .pg-logo { width: 20px !important; height: 20px !important; flex: 0 0 auto; margin: 0 !important; } #prova-social .prova-nota .pg-logo svg { width: 20px !important; height: 20px !important; display: block; } #prova-social .prova-nota .pg-txt { display: flex !important; flex-direction: column !important; gap: 1px !important; flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; } #prova-social .prova-nota .pg-linha { margin: 0 !important; font-size: 15px !important; line-height: 1.15 !important; white-space: nowrap !important; } #prova-social .prova-nota .pg-txt > span { font-size: 11.5px !important; line-height: 1.2 !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } #prova-social .prova-nota .btn { padding: 5px 11px !important; font-size: 11.5px !important; line-height: 1.1 !important; flex: 0 0 auto; } /* C. os depoimentos, um por vez */ #prova-social .prova-deps { display: block !important; max-width: 680px !important; margin: 0 auto !important; padding: 0 16px !important; } #prova-social .jx-rv { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 50px 13px 15px; min-height: 118px; display: flex; flex-direction: column; justify-content: center; } #prova-social .jx-rv-quadro { display: none; } #prova-social .jx-rv-quadro.on { display: block; } #prova-social .jx-rv .estrelas { color: #f2b01e; font-size: 12px; letter-spacing: 1px; line-height: 1; } #prova-social .jx-rv blockquote { margin: 4px 0 8px !important; font-size: 13.5px !important; line-height: 1.42 !important; color: #233348 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #prova-social .jx-rv figcaption { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 12px !important; color: #5b6b7e !important; margin: 0 !important; } #prova-social .jx-rv .av { width: 22px; height: 22px; border-radius: 99px; background: #e9f1f8; color: #0b63a8; display: grid; place-items: center; font-weight: 700; font-size: 10.5px; flex: 0 0 auto; } #prova-social .jx-rv-setas { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; } #prova-social .jx-rv-setas button { width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: #0d2740; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; } #prova-social .jx-rv-setas button:hover { background: #eef4f9; } #prova-social .jx-rv-dots { display: flex; gap: 6px; justify-content: center; margin-top: 9px; } #prova-social .jx-rv-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: #cdd9e5; cursor: pointer; } #prova-social .jx-rv-dots button.on { background: #0b63a8; width: 16px; } /* alvo de toque confortável sem engordar a bolinha */ #prova-social .jx-rv-dots button { position: relative; } #prova-social .jx-rv-dots button::after { content: ""; position: absolute; inset: -8px -5px; } /* ── quem pediu menos movimento, recebe menos movimento ─────────────── Sem giro automático: os dois carrosséis ficam parados no primeiro quadro e só andam no clique/toque. */ @media (prefers-reduced-motion: reduce) { #selo-google-capa .jx-gslide, #prova-social .jx-rv-quadro { transition: none !important; } } /* ── E. "Avaliar" vira botão de verdade ─────────────────────────────── Era um contorno de 62×25 px com texto de 11,5 px — parecia legenda, não convite. O botão é o único caminho para o cliente deixar avaliação no Google, e avaliação é o que sustenta o 5,0 do perfil. Aqui ele ganha corpo: fundo azul cheio, 36 px de altura, texto branco em 12,5 px. Contraste medido: 6,24:1 (a norma pede 4,5:1 para texto pequeno). */ #prova-social .prova-nota .btn { background: #0b63a8 !important; border-color: #0b63a8 !important; color: #fff !important; padding: 9px 16px !important; min-height: 36px; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.1 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(11, 99, 168, .25); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } #prova-social .prova-nota .btn:hover, #prova-social .prova-nota .btn:focus { background: #084d82 !important; border-color: #084d82 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 99, 168, .32); } #prova-social .prova-nota .btn:focus-visible { outline: 3px solid #0b63a8; outline-offset: 2px; } /* no celular o cartão é estreito: o texto pode quebrar em duas linhas em vez de virar reticência, e o botão desce se faltar espaço */ @media (max-width: 600px) { #prova-social .prova-nota { flex-wrap: wrap !important; padding: 10px 12px !important; } #prova-social .prova-nota .pg-txt { flex: 1 1 150px !important; } #prova-social .prova-nota .pg-txt > span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } #prova-social .prova-nota .btn { padding: 8px 13px !important; } } /* legenda do Google: duas redações, o CSS escolhe (ver ajustes-617.js) */ .jx-gtxt-curto { display: none; } @media (max-width: 600px) { .jx-gtxt-longo { display: none; } .jx-gtxt-curto { display: inline; } /* Com a legenda curta o botão volta para a mesma linha. Para caber em 342 px sem quebrar, as duas linhas de texto ficam em nowrap e o botão afina um pouco — o cartão fica com uma linha só. */ #prova-social .prova-nota { flex-wrap: nowrap !important; gap: 7px !important; padding: 8px 11px !important; } #prova-social .prova-nota .pg-txt { flex: 1 1 auto !important; gap: 0 !important; } #prova-social .prova-nota .pg-linha { font-size: 13.5px !important; white-space: nowrap !important; } #prova-social .prova-nota .pg-txt > span { font-size: 10.5px !important; white-space: nowrap !important; } #prova-social .prova-nota .btn { padding: 7px 10px !important; font-size: 11.5px !important; min-height: 34px; flex: 0 0 auto; } } /* 6.17.0 — endereço no rodapé (vem do config, mesma coluna do Contato) */ .foot .f-col .f-end{align-items:flex-start;white-space:normal;line-height:1.45;max-width:30ch} .foot .f-col .f-end::before{margin-top:2px} @media(max-width:520px){ .foot .f-col .f-end{max-width:none} } /*ajustes-620-modulos.css*/ /* ════════════════════════════════════════════════════════════════════ ajustes-620-modulos.css — MÓDULOS (19/10/2026) Adesivos (#/montador), Fotos (/fotos.html) e Polaroid (/polaroid.html) Escopo: SÓ o card de escolha dos módulos + o cabeçalho de seção. 1. .fpc (fotos) · .mat-kit (adesivos) · .pol-kit (polaroid) → mesma anatomia de 6 zonas, mesma altura de fileira 2. .vt-shead — cabeçalho de seção numerado 3. .ft-banner-eyebrow / garantias — ritmo das bandas de módulo NÃO toca em: vitrine, catálogo, home, ficha, frete, ERP. Não mexe em preço, faixa, desconto nem estoque. Para desfazer: apagar este arquivo, o .js e as linhas de include. ════════════════════════════════════════════════════════════════════ */ :root{ --vt-ink:#082040; --vt-muted:#5b6b7e; --vt-muted2:#7b8aa0; --vt-line:#e4eaf1; --vt-cream:#f4f1ea; --vt-ok:#0f7a4d; --vt-ok-bg:#e8f7ef; --vt-brand:#3B3A96; /* 6.33.0: era #0888c8 (azul antigo) — o selecionado ficava azul no meio da loja índigo */ --vt-r:18px; } /* ── 1. CARD DE ESCOLHA ──────────────────────────────────────────── Mesma anatomia nos três módulos: mídia 4:3 → selo curto → título 2 linhas → apelido 1 linha → preço (valor + unidade) → faixas → até 2 bullets → rodapé A altura de cada zona é reservada, então as fileiras fecham retas. ───────────────────────────────────────────────────────────────── */ .fpc, .mat-kit, .pol-kit{ /* sem `display` aqui de propósito: o módulo de Fotos esconde os cards da outra aba com style inline (display:none). Forçar display quebrava o filtro "Só a Foto no Papel" / "Com Porta-Retrato". O card já nasce flex no portal, então não perdemos nada. */ flex-direction:column !important; align-items:stretch !important; gap:0 !important; padding:0 !important; background:#fff !important; border:1.5px solid var(--vt-line) !important; border-radius:var(--vt-r) !important; box-shadow:0 1px 2px rgba(8,32,64,.04) !important; overflow:hidden !important; text-align:left !important; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } .fpc:hover, .mat-kit:hover, .pol-kit:hover{ transform:translateY(-3px) !important; box-shadow:0 22px 40px -26px rgba(8,32,64,.45) !important; border-color:#cfe4f4 !important; } .fpc.on, .mat-kit.on, .pol-kit.on{ border-color:var(--vt-brand) !important; box-shadow:0 0 0 3px rgba(8,136,200,.14), 0 22px 40px -26px rgba(8,32,64,.45) !important; } /* mídia: no módulo a foto é ambiente (sangrada, 4:3) */ .fpc .fpc-photo, .mat-kit .mat-photo, .pol-kit .ph{ position:relative !important; width:100% !important; height:168px !important; aspect-ratio:auto !important; border-radius:0 !important; background-size:cover !important; background-position:center !important; flex:0 0 auto !important; } /* véu suave embaixo, igual ao card do catálogo */ .fpc .fpc-photo::after, .mat-kit .mat-photo::after, .pol-kit .ph::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(0deg,rgba(8,32,64,.18),rgba(8,32,64,0)); pointer-events:none; } /* selo curto — o texto comprido vira chip no corpo (ver ajustes-620.js) */ .fpc .fpc-badge, .mat-kit .mat-badge{ top:10px !important; left:10px !important; max-width:calc(100% - 60px) !important; font-family:Inter,system-ui,sans-serif !important; font-size:9.5px !important; font-weight:800 !important; letter-spacing:.04em !important; text-transform:uppercase !important; padding:4px 9px !important; border-radius:999px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* check de selecionado: sempre no mesmo canto, sempre do mesmo tamanho */ .fpc .fpc-check, .mat-kit .mat-check{ top:10px !important; right:10px !important; left:auto !important; width:24px !important; height:24px !important; display:grid !important; place-items:center !important; border-radius:999px !important; font-size:12px !important; font-weight:900 !important; } /* corpo: mesma escada tipográfica nos três */ .fpc .fpc-body{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:14px 15px 16px !important; flex:1 1 auto !important; min-width:0 !important; } .mat-kit .mat-body, .pol-kit .corpo{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:14px 15px 0 !important; flex:1 1 auto !important; min-width:0 !important; } .fpc .fpc-n, .mat-kit .mat-name, .pol-kit h2{ font-family:Sora,system-ui,sans-serif !important; font-size:15px !important; font-weight:600 !important; line-height:1.34 !important; letter-spacing:-.015em !important; color:var(--vt-ink) !important; margin:0 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; min-height:2.68em !important; } .fpc .fpc-apelido, .mat-kit .mat-apelido, .pol-kit .apelido{ font-family:Inter,system-ui,sans-serif !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.4 !important; color:var(--vt-muted) !important; margin:4px 0 0 !important; min-height:1.4em !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* chips de atributo (o que era a segunda metade do selo) */ .vt-chips{display:flex; gap:5px; margin:9px 0 0; overflow:hidden; white-space:nowrap; height:21px; flex:0 0 auto} .vt-chips span{font:600 10.5px/1.5 Inter,sans-serif; color:#33506e; background:#eff5fb; border:1px solid #e0ebf6; border-radius:999px; padding:2px 8px; white-space:nowrap} /* preço: rótulo pequeno + valor + unidade discreta — nunca quebra */ .fpc .fpc-price-row, .mat-kit .mat-price-row, .pol-kit .pr{ margin:13px 0 0 !important; padding-top:12px !important; border-top:1px solid #eef2f7 !important; display:flex !important; align-items:baseline !important; flex-wrap:nowrap !important; gap:3px !important; white-space:nowrap !important; } .fpc .fpc-p, .mat-kit .mat-price, .pol-kit .pr{ font-family:Sora,system-ui,sans-serif !important; font-size:24px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.03em !important; color:var(--vt-ink) !important; font-variant-numeric:tabular-nums !important; display:flex !important; align-items:baseline !important; gap:3px !important; } .fpc .fpc-p small, .mat-kit .mat-price small, .pol-kit .pr small, .pol-kit .pr span{ font-family:Inter,system-ui,sans-serif !important; font-size:11.5px !important; font-weight:600 !important; color:var(--vt-muted2) !important; letter-spacing:0 !important; white-space:nowrap !important; } /* faixas: pílulas em uma linha só, com respiro */ .fpc .fpc-tiers, .mat-kit .mat-tiers{ display:flex !important; gap:5px !important; flex-wrap:nowrap !important; overflow:hidden !important; margin:9px 0 0 !important; height:24px !important; align-items:center !important; } .fpc .fpc-tier, .mat-kit .mat-tier{ font-family:Inter,system-ui,sans-serif !important; font-size:10.5px !important; font-weight:700 !important; background:var(--vt-ok-bg) !important; color:var(--vt-ok) !important; border:1px solid #c6ebd6 !important; border-radius:999px !important; padding:3px 8px !important; white-space:nowrap !important; } .fpc .fpc-tier b, .mat-kit .mat-tier b{font:inherit !important; font-weight:800 !important; color:var(--vt-ok) !important; letter-spacing:0 !important} /* bullets: no máximo 2, uma linha cada */ .fpc .fpc-bullets, .mat-kit .mat-bullets, .pol-kit ul{ margin:9px 0 0 !important; padding:0 !important; list-style:none !important; display:flex !important; flex-direction:column !important; gap:3px !important; } .fpc .fpc-bullets li, .mat-kit .mat-bullets li, .pol-kit ul li{ position:relative !important; font-family:Inter,system-ui,sans-serif !important; font-size:11px !important; line-height:1.45 !important; color:var(--vt-muted) !important; padding-left:14px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .fpc .fpc-bullets li::before, .mat-kit .mat-bullets li::before, .pol-kit ul li::before{ content:""; position:absolute; left:0; top:.42em; width:7px; height:7px; border-radius:2px; background:#bcd2e6; } .fpc .fpc-bullets li:nth-child(n+3), .mat-kit .mat-bullets li:nth-child(n+3), .pol-kit ul li:nth-child(n+3){display:none !important} .mat-kit .mat-bullets li::before{content:"" !important} /* rodapé do card: mesma altura em todos, com a ação */ .vt-cardfoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; padding:9px 15px 11px; border-top:1px solid #eef2f7; font-family:Inter,system-ui,sans-serif; } .vt-cardfoot .pra{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--vt-muted2); white-space:nowrap} .vt-cardfoot .pra::before{ content:""; width:12px; height:12px; flex:0 0 12px; background:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .vt-cardfoot .go{font-size:11.5px; font-weight:800; color:var(--vt-brand); display:inline-flex; align-items:center; gap:4px; transition:gap .2s} .fpc:hover .vt-cardfoot .go, .mat-kit:hover .vt-cardfoot .go, .pol-kit:hover .vt-cardfoot .go{gap:8px} .fpc.on .vt-cardfoot .go, .mat-kit.on .vt-cardfoot .go, .pol-kit.on .vt-cardfoot .go{color:var(--vt-ok)} .fpc.on .vt-cardfoot .go::after, .mat-kit.on .vt-cardfoot .go::after, .pol-kit.on .vt-cardfoot .go::after{content:"✓"} /* nota única do grupo (substitui o bullet repetido em cada kit) */ .vt-nota-grupo{ margin:10px 0 0; font-family:Inter,system-ui,sans-serif; font-size:11.5px; line-height:1.5; color:var(--vt-muted2); display:flex; align-items:flex-start; gap:6px; } .vt-nota-grupo::before{content:"ⓘ"; font-weight:800; color:#9fb2c6} /* ── 2. CABEÇALHO DE SEÇÃO ──────────────────────────────────────── Mesmo desenho do rabisco: número + título + linha de apoio. ───────────────────────────────────────────────────────────────── */ .vt-shead{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; margin:26px 0 14px} .vt-shead .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--vt-brand); border-top:2px solid var(--vt-brand); padding-top:8px} .vt-shead h2, .vt-shead .h{font-family:Sora,system-ui,sans-serif !important; font-size:19px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--vt-ink) !important; margin:0 !important; line-height:1.2 !important} .vt-shead p{margin:5px 0 0 !important; font-size:12.8px !important; line-height:1.5 !important; color:var(--vt-muted) !important; max-width:70ch} /* ── 3. BANDA DE MÓDULO (cabeçalho das telas) ───────────────────── Só iguala ritmo: eyebrow mono, título serif, tags, CTA, garantias. ───────────────────────────────────────────────────────────────── */ .ft-banner-eyebrow, .pb-eyebrow, .mont-eyebrow{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; font-size:10px !important; letter-spacing:.14em !important; text-transform:uppercase !important; font-weight:700 !important; color:#64748b !important; margin:0 0 8px !important; } .ft-banner-garantias, .pb-garantias, .mont-garantias{ display:flex !important; gap:14px !important; flex-wrap:wrap !important; margin-top:14px !important; padding-top:12px !important; border-top:1px solid rgba(8,32,64,.10) !important; font-size:11.5px !important; color:#4a5d73 !important; } .ft-banner-garantias b, .pb-garantias b, .mont-garantias b{color:var(--vt-ok) !important} /* telas estreitas: card de escolha em 2 e depois 1 coluna */ @media(max-width:1024px){ .fpc, .mat-kit, .pol-kit{min-width:0} } /*ajustes-623-cards.css*/ /* ════════════════════════════════════════════════════════════════════ camada 6.23 — CARD DE PRODUTO (o desenho da foto do dono) ──────────────────────────────────────────────────────────────────── Ordem no card: foto · categoria · nome · pílulas · preço · faixa · rodapé (prazo + Ver). Mesma peça na home, no catálogo e onde mais aparecer card de produto. Só estilo: nenhum dado novo é inventado — tudo sai do produto. ════════════════════════════════════════════════════════════════════ */ .prod.card623{ display:flex;flex-direction:column; background:#fff;border:1px solid #E6E1D6;border-radius:18px; padding:10px;box-shadow:0 10px 26px -20px rgba(25,24,66,.45); min-width:0;overflow:hidden;cursor:pointer;container-type:inline-size; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .prod.card623:hover{transform:translateY(-2px);border-color:#D8D1C2; box-shadow:0 18px 34px -22px rgba(25,24,66,.5)} /* ── foto ─────────────────────────────────────────────────────────── */ .card623 .c623-photo{ position:relative;border-radius:14px;overflow:hidden;background:#F4F1EA; aspect-ratio:1/1;margin:0 0 10px;flex:none; } .card623 .c623-photo img{ width:100%;height:100%;object-fit:cover;display:block; } .card623 .c623-fotos{ position:absolute;right:7px;bottom:7px; background:rgba(255,255,255,.94);color:#4A4760; font:800 10.5px/1 var(--font-d,inherit);letter-spacing:.01em; padding:5px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(25,24,66,.18); backdrop-filter:blur(3px); } /* ── texto ────────────────────────────────────────────────────────── */ .card623 .c623-cat{ font:800 9.5px/1.1 var(--font-m,ui-monospace,monospace); letter-spacing:.13em;text-transform:uppercase;color:#6C6A7E; margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .card623 .c623-pers{color:#8B8899} /* card estreito (5 colunas no desktop): some o "· Personalizado", fica a categoria inteira em vez das duas cortadas */ @container (max-width:220px){.card623 .c623-pers{display:none}} .card623 .c623-title{ font:800 15.5px/1.22 var(--font-d,inherit);color:#191842;letter-spacing:-.012em; margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.44em; } .card623 .c623-pills{display:flex;flex-wrap:nowrap;gap:5px;margin:0 0 10px; min-height:24px;overflow:hidden} .card623 .c623-pills span{ font:700 11px/1 var(--font-b,inherit);color:#3F3D57; background:#F3F1EA;border:1px solid #E6E1D6; padding:6px 10px;border-radius:999px;white-space:nowrap; max-width:100%;overflow:hidden;text-overflow:ellipsis; } /* ── preço ────────────────────────────────────────────────────────── */ .card623 .c623-div{height:1px;background:#EDE9DF;margin:0 0 10px} .card623 .c623-from{ font:800 9.5px/1 var(--font-m,ui-monospace,monospace);letter-spacing:.14em; text-transform:uppercase;color:#6C6A7E;margin:0 0 3px; } .card623 .c623-price{ font:800 26px/1 var(--font-d,inherit);color:#191842;letter-spacing:-.03em; margin:0 0 8px;display:flex;align-items:baseline;gap:3px;flex-wrap:wrap; } .card623 .c623-price small{font:700 12.5px/1 var(--font-b,inherit);color:#6C6A7E;letter-spacing:0} .card623 .c623-kit{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; font:700 12px/1.2 var(--font-b,inherit);color:#3F3D57;margin:0 0 8px; } .card623 .c623-off{ font:800 11px/1 var(--font-d,inherit);color:#0F7A3D;background:#E7F6ED; padding:5px 8px;border-radius:7px;white-space:nowrap; } /* ── rodapé ───────────────────────────────────────────────────────── */ .card623 .c623-foot{ margin:auto 0 0;padding-top:9px;border-top:1px solid #EDE9DF; display:flex;align-items:center;justify-content:space-between;gap:8px; font:600 11px/1.2 var(--font-b,inherit);color:#6C6A7E; } .card623 .c623-prazo{display:inline-flex;align-items:center;gap:5px;min-width:0} .card623 .c623-prazo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card623 .c623-prazo svg{flex:none;opacity:.75} .card623 .c623-ver{ font:800 12px/1 var(--font-d,inherit);color:#3B3A96;white-space:nowrap; display:inline-flex;align-items:center;gap:4px;min-height:30px; } /* card esgotado / sem foto continuam legíveis */ .card623 .c623-photo.sem-foto{display:flex;align-items:center;justify-content:center; color:#8B8899;font:700 11.5px var(--font-b,inherit);letter-spacing:.04em} /* ── trilho da home: card maior, para caber as mesmas linhas ───────── */ #p-inicio #grid-inicio{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:78%} #p-inicio #grid-inicio .prod.card623{width:100%;max-width:none;min-width:0;height:100%} #p-inicio .store-rail-grid{scroll-snap-type:x proximity} #p-inicio .store-rail-grid .prod.card623{scroll-snap-align:start} /* ── catálogo: um card por linha no celular (o desenho precisa de 350 px para caber inteiro); 2 colunas a partir de 700 px ────────── */ #grid-cat{display:grid;grid-template-columns:1fr;gap:14px} #grid-cat .prod.card623{height:100%} #grid-cat .prod.card623 .c623-title{min-height:0} @media (min-width:700px){ #grid-cat{grid-template-columns:1fr 1fr;gap:16px} #grid-cat .prod.card623 .c623-title{min-height:2.44em} } @media (min-width:1100px){ #grid-cat{grid-template-columns:repeat(3,1fr);gap:18px} #grid-cat .prod.card623 .c623-price{font-size:28px} } @media (min-width:760px){ #p-inicio #grid-inicio{grid-auto-columns:minmax(0,1fr)} #p-inicio #grid-inicio .prod.card623{width:100%;max-width:none} }