/*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} } /*foto-documento.css*/ /* ═══════════════════════════════════════════════════════════════════ FOTO-DOCUMENTO.CSS β€” MΓ³dulo Foto 3Γ—4, Passaporte e Vistos (v6.29.0 β€” Rabisco V2) Segue a rΓ©gua da casa (regua-landing.css + camada-621-identidade.css): Β· SuperfΓ­cie quente #F4F1EA Β· Tinta #191842 Β· Marca #3B3A96 Β· Rosa #EC0F8C Β· Cards amplos em largura total (zero coluna lateral espremida) Β· Zero scroll horizontal (0px) em 1366 / 768 / 390 / 360px Β· Mobile nativo enxuto: Hero compacto no Passo 1, faixa fina nos Passos 2..5, 5 etapas visΓ­veis lado a lado, seletor Recorte/Folha 10Γ—15 sem rolagem ═══════════════════════════════════════════════════════════════════ */ .fd-wrap { max-width: 1200px; margin: 0 auto; padding: 16px 20px 72px; box-sizing: border-box; } .fd-wrap *, .fd-wrap *::before, .fd-wrap *::after { box-sizing: border-box; } /* ── HerΓ³i na rΓ©gua oficial (.pol-banner.rl) ──────────────────────── */ .fd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); background: #faf6f1; border: 1px solid #e9e2d8; border-radius: 22px; overflow: hidden; margin: 4px 0 18px; min-height: 320px; box-shadow: 0 18px 40px -24px rgba(25, 24, 66, 0.18); } .fd-hero-txt { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; z-index: 2; min-width: 0; } .fd-back { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font: 700 12.5px/1.2 var(--font-b, Inter, sans-serif); color: var(--brand, #3B3A96); text-decoration: none; margin-bottom: 10px; } .fd-back:hover { text-decoration: underline; } .fd-hero-sub { margin: 10px 0 2px; font: 400 14.5px/1.58 var(--font-b, Inter, sans-serif); color: #4b5563; max-width: 56ch; } .fd-hero-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color 0.16s, background 0.16s, transform 0.16s; } .fd-hero-pill:hover { border-color: var(--brand, #3B3A96) !important; transform: translateY(-1px); } .fd-hero-pill b { color: var(--brand, #3B3A96); font-weight: 800; } .fd-hero-photo { position: relative; min-height: 280px; background: #ede6dc center/cover no-repeat; } .fd-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #faf6f1 0%, rgba(250, 246, 241, 0.55) 10%, rgba(250, 246, 241, 0) 26%); pointer-events: none; } /* Faixa compacta de contexto no celular nas etapas 2..5 */ .fd-mob-ctx { display: none; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line, #E3DED2); font: 600 12px/1.3 var(--font-b, Inter, sans-serif); color: var(--ink, #191842); scroll-margin-top: 84px; } .fd-mob-ctx b { color: var(--brand, #3B3A96); font-weight: 800; } .fd-mob-ctx button { border: 1px solid var(--line, #E3DED2); background: #f8f6f0; color: var(--brand, #3B3A96); font: 700 11.5px/1 var(--font-b, Inter, sans-serif); padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; } /* ── Barra de 5 passos (zero scroll horizontal em qualquer tela!) ─── */ .fd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; scroll-margin-top: 140px; } .fd-step-btn { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 12px; background: #fff; border: 1.5px solid var(--line, #E3DED2); border-radius: 14px; color: var(--muted, #5F5C6B); font: 700 12.5px/1.2 var(--font-b, Inter, sans-serif); cursor: pointer; text-align: left; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; min-width: 0; } .fd-step-btn:hover:not(:disabled) { border-color: #b7b5e4; } .fd-step-btn:disabled { opacity: 0.55; cursor: not-allowed; } .fd-step-n { width: 24px; height: 24px; border-radius: 999px; background: #f1efe9; color: var(--ink, #191842); font: 800 11.5px/1 var(--font-d, Sora, sans-serif); display: grid; place-items: center; flex-shrink: 0; } .fd-step-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fd-step-tx b { font-size: 12.5px; color: var(--ink, #191842); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-step-tx small { font-size: 10.5px; font-weight: 500; color: var(--muted, #5F5C6B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-step-btn.on { border-color: var(--brand, #3B3A96); background: var(--brand-soft, #ECEBF9); box-shadow: 0 6px 18px -12px rgba(59, 58, 150, 0.45); } .fd-step-btn.on .fd-step-n { background: var(--brand, #3B3A96); color: #fff; } .fd-step-btn.done .fd-step-n { background: #15803d; color: #fff; } /* ── PainΓ©is de etapa ─────────────────────────────────────────────── */ .fd-panel { display: none; background: #fff; border: 1.5px solid var(--line, #E3DED2); border-radius: 18px; padding: 24px 26px; box-shadow: 0 12px 28px -20px rgba(25, 24, 66, 0.16); margin-bottom: 18px; scroll-margin-top: 136px; } .fd-panel.on { display: block; } .fd-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .fd-sec-head h2 { margin: 0 0 4px; font: 800 20px/1.2 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); letter-spacing: -0.015em; } .fd-sec-head p { margin: 0; font: 400 13.5px/1.45 var(--font-b, Inter, sans-serif); color: var(--muted, #5F5C6B); max-width: 62ch; } /* ── Abas de famΓ­lia de documentos ────────────────────────────────── */ .fd-tabs { display: inline-flex; background: #f1efe9; padding: 4px; border-radius: 12px; gap: 4px; flex-wrap: nowrap; max-width: 100%; } .fd-tab { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted, #5F5C6B); font: 700 12.5px/1.1 var(--font-b, Inter, sans-serif); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; } .fd-tab.on { background: #fff; color: var(--ink, #191842); box-shadow: 0 2px 6px rgba(25, 24, 66, 0.1); } /* ── Grade de cards de documentos β€” LARGURA TOTAL SEM ESPREMER! ───── */ .fd-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .fd-doc-card { position: relative; display: flex; flex-direction: column; gap: 11px; width: 100%; padding: 18px 20px; background: #fff; border: 1.5px solid var(--line, #E3DED2); border-radius: 18px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s; min-width: 0; } .fd-doc-card:hover { border-color: #a5a4dc; transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(25, 24, 66, 0.22); } .fd-doc-card.on { border-color: var(--brand, #3B3A96); background: linear-gradient(180deg, #ffffff 0%, #f7f7fe 100%); box-shadow: 0 8px 22px -12px rgba(59, 58, 150, 0.28); } .fd-doc-top { display: flex; align-items: center; gap: 13px; } .fd-doc-icon { width: 48px; height: 48px; border-radius: 12px; background: #f6f4ee; border: 1px solid #e6e1d5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fd-doc-card.on .fd-doc-icon { background: var(--brand-soft, #ECEBF9); border-color: rgba(59, 58, 150, 0.28); } .fd-doc-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fd-doc-tit { font: 800 15.5px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-doc-uso { font: 500 12.5px/1.35 var(--font-b, Inter, sans-serif); color: var(--muted, #5F5C6B); } .fd-doc-check { width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid #cbd5e1; background: #fff; color: transparent; font: 900 12px/1 var(--font-b, Inter, sans-serif); display: grid; place-items: center; flex-shrink: 0; } .fd-doc-card.on .fd-doc-check { background: var(--brand, #3B3A96); border-color: var(--brand, #3B3A96); color: #fff; } .fd-doc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .fd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 700 11.5px/1.2 var(--font-b, Inter, sans-serif); background: #f3f1eb; color: #374151; white-space: nowrap; } .fd-chip.mm { background: var(--brand-soft, #ECEBF9); border: 1px solid rgba(59, 58, 150, 0.2); color: var(--brand, #3B3A96); font-weight: 800; } .fd-chip.ok { background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; } .fd-doc-rule { font: 600 12px/1.4 var(--font-b, Inter, sans-serif); padding: 7px 11px; border-radius: 10px; background: #fff8eb; color: #9a3412; border: 1px solid #fde68a; } .fd-doc-rule.strict { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .fd-doc-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line, #E3DED2); } .fd-doc-price { font: 800 18px/1.1 var(--font-d, Sora, sans-serif); color: var(--brand, #3B3A96); } .fd-doc-price small { font: 600 11.5px/1 var(--font-b, Inter, sans-serif); color: var(--muted, #5F5C6B); } .fd-doc-go { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--brand-soft, #ECEBF9); font: 800 12px/1 var(--font-b, Inter, sans-serif); color: var(--brand, #3B3A96); white-space: nowrap; } .fd-doc-card.on .fd-doc-go { background: var(--brand, #3B3A96); color: #fff; } /* Barra de documento escolhido + CTAs de navegação */ .fd-sel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; background: var(--brand-soft, #ECEBF9); border: 1px solid #d4d3f3; border-radius: 14px; margin-top: 16px; } .fd-sel-bar-info { font-size: 13px; color: var(--ink, #191842); } .fd-sel-bar-info b { font-family: var(--font-d, Sora, sans-serif); } /* Cards informativos digitais (PF online / VFS) */ .fd-digital-note { margin-top: 14px; padding: 13px 16px; background: #f8f6f0; border: 1px solid var(--line, #E3DED2); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #3f3d56; } .fd-digital-note b { color: var(--ink, #191842); } /* Tabela oficial Visafoto recolhΓ­vel */ .fd-tabela-oficial { margin-top: 14px; border: 1px solid var(--line, #E3DED2); border-radius: 14px; background: #fcfbf8; overflow: hidden; } .fd-tabela-oficial summary { padding: 13px 16px; font: 700 13px/1.3 var(--font-b, Inter, sans-serif); color: var(--ink, #191842); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .fd-tabela-oficial summary::-webkit-details-marker { display: none; } .fd-tabela-oficial summary::after { content: "Abrir β–Ύ"; font-size: 11.5px; color: var(--brand, #3B3A96); font-weight: 800; white-space: nowrap; } .fd-tabela-oficial[open] summary::after { content: "Recolher β–΄"; } .fd-tabela-scroll { border-top: 1px solid var(--line, #E3DED2); padding: 0 14px 14px; } .fd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .fd-table th, .fd-table td { padding: 9px 10px; border-bottom: 1px solid #ebe6dc; text-align: left; vertical-align: top; } .fd-table th { font-weight: 800; color: var(--muted, #5F5C6B); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; padding-top: 12px; } .fd-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 12px; border: 1.5px solid var(--line, #E3DED2); background: #fff; color: var(--ink, #191842); font: 700 13.5px/1.15 var(--font-b, Inter, sans-serif); cursor: pointer; text-decoration: none; transition: transform 0.15s, background 0.15s, border-color 0.15s; } .fd-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--brand, #3B3A96); } .fd-btn:disabled { opacity: 0.5; cursor: not-allowed; } .fd-btn.pri { background: var(--brand, #3B3A96); border-color: var(--brand, #3B3A96); color: #fff; box-shadow: 0 10px 22px -12px rgba(59, 58, 150, 0.65); } .fd-btn.pri:hover:not(:disabled) { background: #2f2e7e; border-color: #2f2e7e; } .fd-btn.pink { background: linear-gradient(180deg, #F53BA6, #EC0F8C); border-color: #EC0F8C; color: #fff; box-shadow: 0 10px 22px -12px rgba(236, 15, 140, 0.55); } .fd-btn.sm { min-height: 40px; padding: 8px 13px; font-size: 12.5px; } /* ── Passo 2: escolha cΓ’mera/galeria no topo + 8 regras diretas ───── */ .fd-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .fd-source-card { padding: 18px 20px; border-radius: 18px; border: 1.5px solid var(--line, #E3DED2); background: #fff; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .fd-source-card.cam { border-color: var(--brand, #3B3A96); background: linear-gradient(180deg, #fafaff 0%, #ffffff 100%); } .fd-source-card h3 { margin: 0; font: 800 16px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-source-card p { margin: 0 0 4px; font-size: 13px; line-height: 1.48; color: var(--muted, #5F5C6B); flex: 1; } .fd-rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .fd-rule { padding: 13px 14px; border-radius: 14px; background: #faf8f3; border: 1px solid #e7e2d6; display: flex; flex-direction: column; gap: 5px; } .fd-rule.strict { background: #fff5f7; border-color: #fecdd3; } .fd-rule-head { display: flex; align-items: center; gap: 8px; } .fd-rule-ic { width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid #e5e0d4; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; } .fd-rule b { font: 700 13px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-rule span { font: 400 12px/1.4 var(--font-b, Inter, sans-serif); color: var(--muted, #5F5C6B); } /* ── Passo 3: CΓ’mera ao vivo + Guia Oval + DiagnΓ³stico Local ──────── */ .fd-cam-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; } .fd-cam-stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .fd-cam-viewport { position: relative; width: 100%; max-width: 380px; background: #0f172a; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.55); border: 2px solid #1e293b; } .fd-cam-viewport video { width: 100%; height: 100%; object-fit: cover; display: block; } .fd-cam-viewport.mirror video { transform: scaleX(-1); } .fd-cam-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .fd-cam-countdown { position: absolute; inset: 0; display: none; place-items: center; background: rgba(15, 23, 42, 0.38); color: #fff; font: 800 72px/1 var(--font-d, Sora, sans-serif); text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); z-index: 4; } .fd-cam-countdown.on { display: grid; } .fd-cam-status-pill { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 11px; background: rgba(15, 23, 42, 0.82); color: #fff; font: 700 12px/1.3 var(--font-b, Inter, sans-serif); text-align: center; backdrop-filter: blur(6px); z-index: 3; } .fd-cam-status-pill.ok { background: rgba(21, 128, 61, 0.9); } .fd-cam-ctls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; } .fd-diag-box { background: #faf8f3; border: 1px solid var(--line, #E3DED2); border-radius: 18px; padding: 16px 18px; } .fd-diag-box h3 { margin: 0 0 4px; font: 800 15px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-diag-sub { margin: 0 0 12px; font-size: 12px; color: var(--muted, #5F5C6B); } .fd-diag-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fd-diag-item { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #e6e1d5; display: flex; align-items: flex-start; gap: 8px; } .fd-diag-dot { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font: 900 11px/1 var(--font-b, Inter, sans-serif); flex-shrink: 0; background: #e2e8f0; color: #475569; margin-top: 1px; } .fd-diag-item.ok { border-color: #bbf7d0; background: #f0fdf4; } .fd-diag-item.ok .fd-diag-dot { background: #16a34a; color: #fff; } .fd-diag-item.warn { border-color: #fde68a; background: #fffbeb; } .fd-diag-item.warn .fd-diag-dot { background: #d97706; color: #fff; } .fd-diag-item b { display: block; font-size: 12px; color: var(--ink, #191842); } .fd-diag-item small { display: block; font-size: 11px; color: var(--muted, #5F5C6B); line-height: 1.32; } .fd-nonblock-note { margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: #fff; border: 1px dashed #cbd5e1; font-size: 11.5px; color: #475569; line-height: 1.45; } /* ── Passo 4: Recorte normalizado + Folha 10Γ—15 + Checklist ───────── */ .fd-mob-s4-tabs { display: none; } .fd-crop-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 22px; align-items: start; } .fd-crop-card { background: #faf8f3; border: 1px solid var(--line, #E3DED2); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 136px; } .fd-crop-stage { position: relative; width: 100%; max-width: 280px; background: #111827; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; cursor: grab; box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.45); border: 2px solid var(--brand, #3B3A96); } .fd-crop-stage:active { cursor: grabbing; } .fd-crop-stage img { position: absolute; left: 0; top: 0; max-width: none !important; max-height: none !important; pointer-events: none; user-select: none; -webkit-user-drag: none; display: block; } .fd-crop-ruler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .fd-zoom-row { display: flex; align-items: center; gap: 10px; width: 100%; } .fd-zoom-row input[type="range"] { flex: 1; accent-color: var(--brand, #3B3A96); min-height: 36px; } .fd-crop-tools { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: center; } .fd-previews-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .fd-sheet-card { background: #f5f3ec; border: 1px solid var(--line, #E3DED2); border-radius: 18px; padding: 16px 18px; } .fd-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .fd-sheet-head b { font: 800 14.5px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-sheet-canvas-wrap { display: flex; justify-content: center; align-items: center; padding: 12px; background: #e9e5da; border-radius: 12px; } #fd-sheet-canvas { width: 100%; max-width: 420px; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 12px 26px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.08); display: block; } .fd-orig-compare { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line, #E3DED2); border-radius: 14px; } .fd-orig-thumb { width: 52px; height: 58px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line, #E3DED2); flex-shrink: 0; background: #f1f5f9; } .fd-orig-compare p { margin: 2px 0 0; font-size: 12px; line-height: 1.42; color: var(--muted, #5F5C6B); } .fd-qty-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: #fff; border: 1.5px solid var(--line, #E3DED2); border-radius: 16px; } .fd-qty-head { display: flex; flex-direction: column; gap: 2px; } .fd-qty-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fd-qty-stepper { display: inline-flex; align-items: center; gap: 8px; background: #f8f6f0; padding: 4px 6px; border-radius: 12px; border: 1px solid var(--line, #E3DED2); } .fd-qty-stepper button { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--line, #E3DED2); background: #fff; font: 800 18px/1 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); cursor: pointer; } .fd-qty-stepper b { min-width: 88px; text-align: center; font: 800 13px/1.1 var(--font-d, Sora, sans-serif); } /* ── Passo 5: Login WhatsApp inline + Resumo + Envio ──────────────── */ .fd-checkout-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 18px; align-items: start; } .fd-summary-box, .fd-auth-box { background: #faf8f3; border: 1px solid var(--line, #E3DED2); border-radius: 18px; padding: 18px 20px; min-width: 0; } .fd-summary-box h3, .fd-auth-box h3 { margin: 0 0 10px; font: 800 16px/1.25 var(--font-d, Sora, sans-serif); color: var(--ink, #191842); } .fd-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e5e0d4; font-size: 13px; } .fd-sum-row span { color: var(--muted, #5F5C6B); flex-shrink: 0; } .fd-sum-row b { text-align: right; color: var(--ink, #191842); } .fd-sum-row:last-of-type { border-bottom: 0; } .fd-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 8px; border-top: 2px solid #e5e0d4; } .fd-sum-total strong { font: 800 24px/1 var(--font-d, Sora, sans-serif); color: var(--brand, #3B3A96); } .fd-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; } .fd-field label { font: 700 12px/1.2 var(--font-b, Inter, sans-serif); color: var(--ink, #191842); } .fd-field input { min-height: 46px; padding: 10px 13px; border-radius: 11px; border: 1.5px solid #d5d0c4; background: #fff; font: 500 16px/1.2 var(--font-b, Inter, sans-serif); color: var(--ink, #191842); width: 100%; } .fd-field input:focus { outline: none; border-color: var(--brand, #3B3A96); box-shadow: 0 0 0 3px var(--brand-soft, #ECEBF9); } .fd-otp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; } .fd-otp-digit { width: 100%; height: 46px; text-align: center; font: 800 19px/1 var(--font-d, Sora, sans-serif) !important; padding: 0 !important; border-radius: 10px; border: 1.5px solid #cbd5e1; background: #fff; } .fd-logged-pill { padding: 12px 14px; border-radius: 12px; background: #ecfdf5; border: 1px solid #86efac; color: #14532d; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .fd-lgpd { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: 12px; line-height: 1.45; color: #374151; cursor: pointer; } .fd-lgpd input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand, #3B3A96); flex-shrink: 0; } .fd-success { display: none; background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 18px; padding: 26px 24px; text-align: center; margin-top: 14px; } .fd-success.on { display: block; } .fd-success h2 { margin: 0 0 8px; font: 800 22px/1.2 var(--font-d, Sora, sans-serif); color: #166534; } /* ── Tablet (≀ 960px) ─────────────────────────────────────────────── */ @media (max-width: 960px) { .fd-hero { grid-template-columns: 1fr; min-height: 0; } .fd-hero-photo { order: -1; min-height: 220px; max-height: 240px; } .fd-hero-photo::after { background: linear-gradient(180deg, rgba(250, 246, 241, 0) 58%, #faf6f1 100%); } .fd-doc-grid { grid-template-columns: minmax(0, 1fr); } .fd-step-tx small { display: none; } .fd-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-cam-layout, .fd-crop-layout, .fd-checkout-grid { grid-template-columns: minmax(0, 1fr); } .fd-crop-card { position: static; } .fd-cam-viewport { max-width: 340px; } } /* ── Celular Nativo (≀ 720px β€” Rabisco V2 Aprovado: Zero Scroll!) ─── */ @media (max-width: 720px) { .fd-wrap { padding: 8px 12px 28px; } /* Hero compacto (~195px) no Passo 1 e faixa fina nos Passos 2..5 */ .fd-hero { margin: 4px 0 10px; border-radius: 18px; display: flex; flex-direction: column; } body[data-fd-step="2"] .fd-hero, body[data-fd-step="3"] .fd-hero, body[data-fd-step="4"] .fd-hero, body[data-fd-step="5"] .fd-hero { display: none !important; } body[data-fd-step="2"] .fd-mob-ctx, body[data-fd-step="3"] .fd-mob-ctx, body[data-fd-step="4"] .fd-mob-ctx, body[data-fd-step="5"] .fd-mob-ctx { display: flex; } body[data-fd-step="2"] .foot, body[data-fd-step="3"] .foot, body[data-fd-step="4"] .foot, body[data-fd-step="5"] .foot { display: none; } .fd-hero-photo, .fd-back, .fd-hero .rl-eyebrow, .fd-hero .rl-cta, .fd-hero .rl-selos { display: none !important; } .fd-hero-txt { padding: 14px 14px 13px !important; } .fd-hero h1 { font-size: 21px !important; line-height: 1.15 !important; margin: 0 !important; } .fd-hero-sub { font-size: 12.5px; line-height: 1.38; margin: 6px 0 8px; } #fd-hero-pills { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; margin: 0 !important; } .fd-hero-pill { padding: 6px 8px !important; font-size: 11.5px !important; justify-content: space-between; border-radius: 10px !important; white-space: nowrap; overflow: hidden; min-width: 0; } /* Barra de 5 etapas: todas as 5 visΓ­veis lado a lado, ZERO scroll horizontal */ .fd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; overflow: visible; scroll-margin-top: 128px; } .fd-step-btn { flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; gap: 3px; min-height: 48px; border-radius: 11px; text-align: center; } .fd-step-n { width: 21px; height: 21px; font-size: 11px; } .fd-step-tx b { font-size: 10px; line-height: 1.1; } .fd-step-tx small { display: none; } /* Painel sem caixas aninhadas que espremem a largura ΓΊtil */ .fd-panel { padding: 14px 13px; border-radius: 18px; margin-bottom: 12px; } .fd-sec-head { flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 10px; } .fd-sec-head > div:first-child { flex: 1; min-width: 0; } .fd-sec-head h2 { font-size: 17.5px; margin: 0; } .fd-sec-head p { display: none; } #fd-p1 .fd-sec-head { flex-direction: column; align-items: stretch; gap: 10px; } #fd-p1 .fd-sec-head p { display: block; font-size: 12px; margin-top: 3px; } /* Abas em 1 linha limpa de 3 colunas */ .fd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 4px; padding: 4px; } .fd-tab { padding: 7px 4px; font-size: 11.5px; text-align: center; min-height: 36px; } /* Cards de documentos amplos e compactos no celular */ .fd-doc-grid { gap: 10px; } .fd-doc-card { padding: 13px 14px; gap: 8px; border-radius: 15px; } .fd-doc-top { gap: 10px; } .fd-doc-icon { width: 42px; height: 42px; border-radius: 10px; } .fd-doc-tit { font-size: 14px; } .fd-doc-uso { font-size: 11.5px; } .fd-chip { font-size: 11px; padding: 3px 8px; } .fd-chip.px { display: none; } .fd-doc-rule { font-size: 11.5px; padding: 5px 9px; } body[data-page="foto-documento"] .fd-doc-card:not(.on) .fd-doc-rule, body[data-page="foto-documento"] .fd-doc-card:not(.on) .fd-doc-uso { display:none; } .fd-doc-price-row { padding-top: 8px; } .fd-doc-price { font-size: 16px; } .fd-doc-go { font-size: 11.5px; padding: 5px 10px; } /* Barra fixa acima da tabbar mobile no Passo 1 */ .fd-sel-bar { position: sticky; bottom: 68px; z-index: 40; padding: 10px 12px; border-radius: 14px; background: rgba(236, 235, 249, 0.97); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(25, 24, 66, 0.16); flex-wrap: nowrap; gap: 8px; margin-top: 12px; } .fd-sel-bar-info { font-size: 11.5px; line-height: 1.25; min-width: 0; flex: 1; } .fd-sel-bar .fd-actions { width: auto; flex-shrink: 0; } .fd-sel-bar .fd-btn { min-height: 40px; padding: 9px 14px; font-size: 12.5px; white-space: nowrap; } /* Tabela Visafoto sem nenhum scroll horizontal no celular */ .fd-tabela-scroll { overflow-x: visible; padding: 0 10px 10px; } .fd-table { min-width: 0; } .fd-table thead { display: none; } .fd-table, .fd-table tbody { display: block; width: 100%; } .fd-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 10px 4px; border-bottom: 1px solid #ebe6dc; } .fd-table td { padding: 0; border: 0; font-size: 11.5px; } .fd-table td:first-child { grid-column: 1 / -1; font-size: 12.5px; color: var(--brand, #3B3A96); padding-bottom: 2px; } .fd-table td:last-child { grid-column: 1 / -1; color: var(--muted, #5F5C6B); font-size: 11px; } .fd-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--muted, #5F5C6B); font-size: 10.5px; } /* Passo 2 no celular: CTAs no topo + grade 2Γ—4 compacta */ .fd-source-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 11px; } .fd-source-card { padding: 12px 13px; gap: 6px; border-radius: 14px; } .fd-source-card h3 { font-size: 14px; } .fd-source-card p { font-size: 11.5px; line-height: 1.32; } .fd-source-card .fd-actions { width: 100%; } .fd-source-card .fd-btn { flex: 1 1 auto; min-height: 42px; padding: 9px 13px; font-size: 12.5px; } .fd-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .fd-rule { padding: 9px 10px; gap: 4px; border-radius: 12px; } .fd-rule-ic { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; } .fd-rule b { font-size: 11.5px; } .fd-rule span { font-size: 10.5px; line-height: 1.28; } /* Passo 3 no celular: visor + captura + 2Γ—3 conferΓͺncias em 1 tela */ .fd-cam-layout { gap: 8px; } .fd-cam-stage-wrap { gap: 7px; } .fd-cam-viewport { width: min(100%, 226px); margin: 0 auto; border-radius: 16px; } .fd-cam-status-pill { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; font-size: 11px; } .fd-cam-ctls .fd-btn { min-height: 40px; padding: 8px 12px; font-size: 12.5px; } .fd-diag-box { padding: 10px 11px; border-radius: 14px; } .fd-diag-box h3 { font-size: 12.5px; margin: 0; } .fd-diag-sub, .fd-nonblock-note { display: none; } .fd-diag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 6px; } .fd-diag-item { padding: 5px 7px; gap: 6px; border-radius: 8px; align-items: center; } .fd-diag-item b { font-size: 11px; } .fd-diag-item div small { display: none; } .fd-diag-dot { width: 15px; height: 15px; font-size: 9.5px; margin-top: 0; } /* Passo 4 no celular: Seletor Recorte vs Folha 10Γ—15 sem rolar a tela */ .fd-mob-s4-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 12px; background: #f1efe9; border: 1px solid var(--line, #E3DED2); margin-bottom: 8px; } .fd-mob-s4-tab { border: 0; background: transparent; padding: 8px 6px; border-radius: 9px; font: 800 12px/1.1 var(--font-b, Inter, sans-serif); color: var(--muted, #5F5C6B); cursor: pointer; } .fd-mob-s4-tab.on { background: #fff; color: var(--brand, #3B3A96); box-shadow: 0 1px 4px rgba(25, 24, 66, 0.1); } .fd-crop-layout { gap: 8px; } .fd-crop-layout[data-s4view="crop"] .fd-sheet-only { display: none; } .fd-crop-layout[data-s4view="sheet"] .fd-crop-card { display: none; } .fd-crop-card, .fd-sheet-card { padding: 4px 0; background: transparent; border: 0; gap: 8px; } .fd-crop-stage { width: min(100%, 216px); margin: 0 auto; } .fd-crop-hint { display: none; } .fd-crop-tools .fd-btn { min-height: 36px; padding: 6px 10px; font-size: 11.5px; } .fd-orig-compare { padding: 9px 10px; gap: 9px; } .fd-orig-thumb { width: 40px; height: 48px; } .fd-qty-bar { padding: 10px 12px; border-radius: 14px; background: var(--brand-soft, #ECEBF9); border-color: #d4d3f3; gap: 7px; } .fd-qty-head { width: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; } .fd-qty-actions { width: 100%; justify-content: space-between; flex-wrap: nowrap; } .fd-qty-stepper b { min-width: 82px; font-size: 12px; } #fd-p4-next { flex: 1; min-height: 40px; padding: 9px 12px; font-size: 13px; } /* Passo 5 no celular: Resumo enxuto em linhas limpas + OTP confortΓ‘vel */ .fd-checkout-grid { gap: 10px; } .fd-summary-box, .fd-auth-box { padding: 13px 14px; border-radius: 15px; } .fd-sum-row { padding: 6px 0; font-size: 12px; } .fd-sum-row b { font-size: 12px; max-width: 62%; white-space: normal; word-break: break-word; line-height: 1.3; } .fd-sum-total strong { font-size: 20px; } .fd-lgpd { font-size: 11.5px; margin: 10px 0; } .fd-otp-digit { height: 42px; font-size: 17px !important; } } /* ── v6.29.3 Β· Dica Desktop + QR Offline, Chip Informativo e PortΓ£o Amarelo ── */ .fd-pc-qr-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; margin-bottom: 14px; border-radius: 15px; background: linear-gradient(135deg, #f0f9ff 0%, #eef2ff 100%); border: 1px solid #bae6fd; } .fd-pc-qr-banner.compact { padding: 10px 14px; margin-bottom: 12px; } .fd-pc-qr-tag { display: inline-block; font: 800 10.5px/1 var(--font-b, Inter, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: #0369a1; margin-bottom: 4px; } .fd-pc-qr-txt b { display: block; font: 800 14px/1.3 var(--font-h, Sora, sans-serif); color: var(--ink, #191842); margin-bottom: 3px; } .fd-pc-qr-txt p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #334155; } .fd-pc-qr-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } .fd-pc-qr-box { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 7px 8px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); } .fd-pc-qr-box small { font: 800 9.5px/1.1 var(--font-b, Inter, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; color: #334155; } @media (max-width: 820px), (hover: none) and (pointer: coarse) { .fd-pc-qr-banner { display: none !important; } } .fd-diag-item.info { background: #f0f9ff; border-color: #bae6fd; } .fd-diag-item.info .fd-diag-dot { background: #0284c7; color: #ffffff; } .fd-diag-item.info b { color: #075985; } .fd-diag-item.info small { color: #0c4a6e; } .fd-quality-gate { background: #fffbeb; border: 2px solid #f59e0b; border-radius: 15px; padding: 14px 15px; margin-bottom: 4px; box-shadow: 0 8px 22px rgba(180, 83, 9, 0.09); } .fd-quality-gate[hidden] { display: none !important; } .fd-qg-head { display: flex; align-items: flex-start; gap: 8px; font: 800 13.5px/1.3 var(--font-h, Sora, sans-serif); color: #92400e; margin-bottom: 7px; } .fd-qg-list { margin: 0 0 11px 18px; padding: 0; font-size: 12.5px; line-height: 1.42; color: #78350f; } .fd-qg-list li + li { margin-top: 4px; } .fd-qg-actions { display: flex; flex-wrap: wrap; gap: 8px; } .fd-qg-btn-retry { background: var(--brand, #3B3A96); color: #ffffff; border: 0; border-radius: 10px; padding: 9px 14px; font: 800 12.5px/1.2 var(--font-b, Inter, sans-serif); cursor: pointer; } .fd-qg-btn-force { background: #ffffff; color: #92400e; border: 1px solid #d97706; border-radius: 10px; padding: 9px 12px; font: 700 12px/1.2 var(--font-b, Inter, sans-serif); cursor: pointer; } @media (max-width: 720px) { .fd-quality-gate { padding: 12px; border-radius: 13px; } .fd-qg-actions { flex-direction: column; } .fd-qg-btn-retry, .fd-qg-btn-force { width: 100%; text-align: center; min-height: 40px; } } /*impressao-tcc.css*/ /* ImpressΓ£o/TCC: componentes locais apoiados no shell real do Portal. */ .preview-print [hidden] { display:none !important; } .pd-upload,.pd-option-main,.pd-summary { min-width:0; border:1px solid #e8e3da; border-radius:17px; background:#fff; } .pd-upload { padding:22px; } .pd-upload-head,.pd-option-header,.pd-summary-head { display:flex; align-items:flex-start; gap:14px; min-width:0; } .pd-upload-head > div,.pd-option-header > div,.pd-summary-head > div { flex:1; min-width:0; } .pd-kicker { display:block; color:#7a7893; font:800 10px/1.35 Inter,sans-serif; letter-spacing:.09em; } .pd-upload-head h3,.pd-option-header h3,.pd-summary-head h3,.pd-dialog-head h3 { margin:4px 0 5px; color:#191842; font:800 18px/1.3 Sora,Inter,sans-serif; } .pd-upload-head p,.pd-option-header p,.pd-summary-head p,.pd-dialog-head p { margin:0; color:#687183; font:400 12px/1.5 Inter,sans-serif; } .pd-upload-icon { display:grid; flex:none; place-items:center; width:48px; height:48px; border-radius:14px; background:#eeedfc; color:#3b3a96; font:700 28px/1 Inter,sans-serif; } .pd-chip { flex:none; padding:7px 9px; border-radius:999px; background:#f0effb; color:#4a468e; font:800 9px/1 Inter,sans-serif; letter-spacing:.04em; } .pd-safe { display:flex; align-items:flex-start; gap:10px; margin:19px 0 17px; padding:12px 13px; border:1px solid #e2e0f3; border-radius:11px; background:#f7f6fd; color:#4c4b72; } .pd-safe > span { font:700 16px/1 Inter,sans-serif; } .pd-safe p { margin:0; font:500 12px/1.5 Inter,sans-serif; } .pd-safe strong { color:#302f6d; } .pd-upload-actions { display:flex; flex-wrap:wrap; gap:10px; } .pd-upload-help { margin:9px 0 0; color:#73788a; font:400 11px/1.45 Inter,sans-serif; } .pd-upload-help + .pd-upload-help { margin-top:3px; } .pd-file-list-head { margin:21px 0 10px; padding-top:17px; border-top:1px solid #eeeae2; } .pd-file-list-head strong { color:#252443; font:800 13px/1.35 Inter,sans-serif; } .pd-file-list-head p { margin:3px 0 0; color:#74798a; font:400 11px/1.4 Inter,sans-serif; } .pd-file-list { display:grid; gap:8px; } .pd-file-row { display:flex; align-items:center; gap:11px; padding:11px; border:1px solid #e9e5dd; border-radius:11px; background:#fbfaf8; } .pd-file-icon,.pd-example-icon { display:grid; flex:none; place-items:center; width:39px; height:43px; border-radius:8px; background:#eae8fa; color:#454194; font:800 9px/1 Inter,sans-serif; } .pd-file-info { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; } .pd-file-info strong,.pd-example-detail strong { color:#20213e; font:700 12px/1.3 Inter,sans-serif; overflow-wrap:anywhere; } .pd-file-info span,.pd-example-detail small { color:#7a7e8d; font:500 11px/1.3 Inter,sans-serif; } .pd-remove,.pd-cart-link { flex:none; padding:8px 7px; border:0; border-radius:7px; background:transparent; color:#474496; font:700 11px/1.3 Inter,sans-serif; cursor:pointer; } .pd-remove:hover,.pd-cart-link:hover { background:#ecebfd; } .pd-file-empty,.pd-cart-empty { margin:0; padding:15px; border:1px dashed #e0dcd3; border-radius:10px; background:#faf9f6; color:#7a7e8d; font:400 12px/1.45 Inter,sans-serif; } .pd-cart-link { margin-top:12px; padding-left:0; } .pd-error,.pd-field-error { color:#a12c30 !important; font:700 12px/1.45 Inter,sans-serif !important; } .pd-error { margin:13px 0 0; padding:10px 12px; border:1px solid #f0cccc; border-radius:10px; background:#fff6f5; } .pd-options-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; align-items:start; gap:16px; } .pd-option-main { padding:20px; } .pd-option-header { margin-bottom:20px; } .pd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; } .pd-field { display:flex; flex-direction:column; gap:7px; min-width:0; color:#252443; font:700 12px/1.35 Inter,sans-serif; } .pd-field.pd-full { grid-column:1/-1; } .pd-option-main > .pd-field { margin-bottom:16px; } .pd-field input,.pd-field select { display:block; width:100%; min-width:0; min-height:45px; box-sizing:border-box; padding:10px 11px; border:1px solid #d8d3c9; border-radius:10px; background:#fff; color:#16213d; font:500 13px/1.3 Inter,sans-serif; } .pd-field small { color:#737888; font:400 11px/1.4 Inter,sans-serif; } .pd-field input[aria-invalid="true"] { border-color:#bd4347; box-shadow:0 0 0 2px #f9e0e0; } .pd-fixed-tcc,.pd-notice { margin-top:16px; padding:12px 13px; border-radius:10px; font:500 11px/1.5 Inter,sans-serif; } .pd-fixed-tcc { display:flex; gap:10px; align-items:flex-start; color:#254d45; background:#eff8f3; border:1px solid #d6ecdf; } .pd-fixed-tcc > span { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; color:white; background:#278263; font-weight:800; } .pd-fixed-tcc strong { color:#205b48; font:800 12px/1.35 Inter,sans-serif; } .pd-fixed-tcc p { margin:4px 0 0; } .pd-notice { color:#45466b; background:#f4f4fc; border:1px solid #e2e1f3; } .pd-notice.pd-warn { color:#79531b; background:#fff8e8; border:1px solid #f0e0b9; } .pd-calculation { min-width:0; padding:19px; border:1px solid #e4e2f4; border-radius:16px; background:#f7f6fc; } .pd-calculation h3 { margin:5px 0 17px; color:#191842; font:800 15px/1.3 Sora,Inter,sans-serif; } .pd-calc-big { display:flex; align-items:baseline; gap:8px; color:#77758a; font:600 11px/1.3 Inter,sans-serif; } .pd-calc-big strong { color:#393793; font:800 31px/1 Sora,Inter,sans-serif; } .pd-calculation > p { margin:9px 0 16px; color:#6d7182; font:400 11px/1.5 Inter,sans-serif; } .pd-calc-line,.pd-calc-total { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid #e3e1ef; color:#6a6d7e; font:500 11px/1.35 Inter,sans-serif; } .pd-calc-line b,.pd-calc-total b { color:#252443; text-align:right; white-space:nowrap; } .pd-calc-total { color:#3d3a77; font-weight:800; } .pd-calculation .pd-calc-hint { margin:7px 0 0; color:#77788a; } .pd-inline-cart { margin:4px 0 12px; padding-top:10px; border-top:1px solid #e3e1ef; } .pd-inline-cart > strong { color:#42416f; font:800 10px/1.3 Inter,sans-serif; } .pd-inline-cart-row { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:5px 0; color:#646779; font:500 10px/1.35 Inter,sans-serif; } .pd-inline-cart-row span { min-width:0; overflow-wrap:anywhere; } .pd-inline-cart-row .pd-remove { font-size:10px; padding:5px; } .pd-summary { padding:20px; } .pd-summary-head { padding-bottom:17px; border-bottom:1px solid #eeeae2; } .pd-list-title { margin:16px 0 9px; color:#302f4a; font:800 12px/1.3 Inter,sans-serif; } .pd-summary-items { display:grid; gap:8px; padding:0 0 17px; } .pd-summary-items > .pd-cart-empty { margin-top:16px; } .pd-summary-item { min-width:0; padding:13px; border:1px solid #e8e4dc; border-radius:11px; background:#fff; } .pd-item-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .pd-item-name { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; } .pd-item-name strong { color:#1e213f; overflow-wrap:anywhere; font:800 12px/1.35 Inter,sans-serif; } .pd-item-type { padding:5px 6px; border-radius:6px; color:#49458d; background:#efedfb; font:800 9px/1 Inter,sans-serif; } .pd-item-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; } .pd-item-tags span { padding:5px 7px; border-radius:6px; background:#f5f4f1; color:#555d70; font:600 10px/1.35 Inter,sans-serif; overflow-wrap:anywhere; } .pd-item-warning { margin:8px 0; color:#805a20; font:500 11px/1.45 Inter,sans-serif; } .pd-item-foot { display:flex; justify-content:space-between; gap:10px; color:#76798b; font:500 11px/1.4 Inter,sans-serif; } .pd-item-foot strong { color:#34337d; font-weight:800; } .pd-order-meter { padding:14px; border:1px solid #e5e2f1; border-radius:12px; background:#f7f6fc; } .pd-order-meter > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#4b4a6d; font:700 12px/1.35 Inter,sans-serif; } .pd-order-meter strong { color:#353384; font:800 14px/1.3 Sora,Inter,sans-serif; white-space:nowrap; } .pd-meter-track { width:100%; height:6px; overflow:hidden; margin:11px 0 8px; border-radius:999px; background:#e1dff0; } .pd-meter-track > span { display:block; width:0; height:100%; border-radius:inherit; background:#5955b6; } .pd-order-meter p { margin:0; color:#77788a; font:400 11px/1.45 Inter,sans-serif; } .pd-order-meter.is-over { background:#fff9ee; border-color:#f0ddb8; } .pd-order-meter.is-over .pd-meter-track > span { background:#d29835; } .pd-quote { margin-top:13px; padding:14px; border:1px solid #f0ddb8; border-radius:11px; color:#75511f; background:#fff8e8; } .pd-quote strong { display:block; color:#764c0d; font:800 13px/1.3 Inter,sans-serif; } .pd-quote p { margin:6px 0 0; font:500 11px/1.5 Inter,sans-serif; } .pd-cart { margin-top:21px; padding-top:17px; border-top:1px solid #eeeae2; } .pd-cart-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; } .pd-cart-head h4 { margin:4px 0 0; color:#20213e; font:800 14px/1.3 Sora,Inter,sans-serif; } .pd-cart-head > span { color:#76798a; font:700 11px/1.3 Inter,sans-serif; white-space:nowrap; } #pd-cart-items { display:grid; gap:8px; } .pd-summary-actions { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:17px; border-top:1px solid #eeeae2; } .pd-summary-actions > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .pd-result { margin-top:14px; padding:12px 13px; border:1px solid #cce8d9; border-radius:10px; background:#f0faf4; color:#286548; font:600 12px/1.5 Inter,sans-serif; } .pd-dialog { box-sizing:border-box; width:min(570px,calc(100vw - 24px)); max-width:570px; max-height:calc(100dvh - 26px); margin:auto; padding:0; overflow:auto; border:1px solid #e6e0d8; border-radius:17px; background:#fff; color:#191842; box-shadow:0 25px 70px #12142f55; } .pd-dialog[open] { display:flex; flex-direction:column; overflow:hidden; } .pd-dialog::backdrop { background:rgba(13,23,47,.66); } .pd-dialog * { box-sizing:border-box; } .pd-dialog-head,.pd-dialog-actions,.pd-dialog-note { flex:none; } .pd-example-list { min-height:0; flex:1 1 auto; overflow:auto; } .pd-dialog-actions { padding-top:10px; border-top:1px solid #eeeae2; } .pd-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 20px 15px; border-bottom:1px solid #eeeae2; } .pd-dialog-head h3 { font-size:16px; } .pd-close { flex:none; width:34px; height:34px; border:1px solid #e4dfd7; border-radius:10px; color:#4c4a64; background:white; font:400 23px/1 Inter,sans-serif; cursor:pointer; } .pd-example-list { display:grid; gap:8px; padding:15px 20px; } .pd-example { display:flex; align-items:center; gap:10px; min-width:0; padding:9px 10px; border:1px solid #e8e5dd; border-radius:10px; cursor:pointer; } .pd-example:has(input:checked) { border-color:#7772c5; background:#f8f7ff; } .pd-example:has(input:disabled) { background:#f8f8f6; opacity:.65; cursor:not-allowed; } .pd-example input { flex:none; width:17px; height:17px; accent-color:#3b3a96; } .pd-example-icon { width:34px; height:37px; } .pd-example-detail { display:flex; flex-direction:column; gap:4px; min-width:0; } .pd-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:10px 20px 15px; } .pd-dialog-note { margin:0; padding:0 20px 18px; color:#7b7e8b; font:400 10px/1.45 Inter,sans-serif; } .pd-scan-art { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; min-height:150px; margin:16px 20px 0; padding:16px; border-radius:12px; background:#242d47; } .pd-scan-art > span { color:#cbd3e4; font:800 9px/1 Inter,sans-serif; letter-spacing:.08em; } .pd-scan-paper { display:flex; flex-direction:column; gap:6px; width:74px; height:90px; padding:14px 10px; background:#f8f8f6; border-radius:3px; transform:rotate(-4deg); box-shadow:0 6px 20px #1119; } .pd-scan-paper i { height:3px; border-radius:2px; background:#c8ccda; } .pd-scan-paper i:first-child { width:65%; background:#535e80; } .pd-scan-paper i:last-child { width:70%; } .pd-scan-status { margin:12px 20px; color:#5c6578; font:500 12px/1.5 Inter,sans-serif; } .pd-dialog button:focus-visible,.pd-dialog input:focus-visible,.pd-upload button:focus-visible,.pd-options button:focus-visible,.pd-options input:focus-visible,.pd-options select:focus-visible,.pd-summary button:focus-visible { outline:3px solid #e9b83c; outline-offset:2px; } .pd-option-main input,.pd-option-main select,.pd-upload button,.pd-summary button { scroll-margin:120px 0; } @media (max-width:850px) { .pd-options-layout { grid-template-columns:minmax(0,1fr) 235px; gap:12px; } } @media (max-width:720px) { .pd-upload,.pd-option-main,.pd-summary { padding:15px; border-radius:14px; } .pd-upload-head { gap:10px; } .pd-upload-icon { width:40px; height:40px; font-size:24px; } .pd-upload-head h3,.pd-option-header h3,.pd-summary-head h3 { font-size:16px; } .pd-chip { font-size:8px; padding:6px; } .pd-upload-actions { display:grid; grid-template-columns:1fr; } .pd-upload-actions button { width:100%; } .pd-options-layout { grid-template-columns:1fr; } .pd-calculation { padding:16px; } .pd-calculation h3 { margin-bottom:12px; } .pd-field input,.pd-field select { font-size:16px; } .pd-summary-actions,.pd-summary-actions > div { display:grid; grid-template-columns:1fr; width:100%; } .pd-summary-actions button { width:100%; } .pd-order-meter > div:first-child { flex-wrap:wrap; } .pd-dialog-head { padding:16px 15px 12px; } .pd-example-list { padding:12px 15px; } .pd-dialog-actions { padding:10px 15px 12px; } .pd-dialog-note { padding:0 15px 14px; } .pd-scan-art { margin:12px 15px 0; min-height:120px; } .pd-scan-status { margin:10px 15px; } } @media (max-width:400px) { .pd-grid { grid-template-columns:1fr; gap:12px; } .pd-field.pd-full { grid-column:auto; } .pd-upload-head .pd-chip,.pd-option-header .pd-chip,.pd-summary-head .pd-chip { display:none; } .pd-item-foot { flex-direction:column; gap:4px; } .pd-dialog-actions .pv-primary { flex:1; } #pd-files-dialog .pd-dialog-head { padding:12px 14px 9px; } #pd-files-dialog .pd-example-list { gap:5px; padding:8px 14px; } #pd-files-dialog .pd-example { padding:6px 8px; } #pd-files-dialog .pd-example-icon { width:30px; height:31px; } #pd-files-dialog .pd-example-detail small { font-size:10px; } } /* Cotação ilustrativa e conferΓͺncia de cores, usando a identidade do Portal. */ .pq-eyebrow { display:block; color:#77748f; font:800 10px/1.3 Inter,sans-serif; letter-spacing:.09em; } .pq-demo-tag { flex:none; display:inline-block; padding:6px 8px; border-radius:999px; background:#edebfa; color:#49458a; font:800 9px/1.2 Inter,sans-serif; letter-spacing:.03em; text-align:center; } .pq-detection { min-width:0; margin-top:16px; padding:15px; border:1px solid #dddbf3; border-radius:12px; background:#f8f7ff; scroll-margin-top:145px; } .pq-detection-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .pq-detection-head > div { flex:1; min-width:0; } .pq-detection-head strong { display:block; margin:5px 0 4px; color:#29265f; font:800 13px/1.3 Inter,sans-serif; } .pq-detection-head p { margin:0; color:#686987; font:400 11px/1.5 Inter,sans-serif; } .pq-detected-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:13px; } .pq-detected-row > span { color:#555377; font:700 11px/1.35 Inter,sans-serif; } .pq-page-chips { display:flex; flex-wrap:wrap; gap:5px; } .pq-page-chip { min-width:25px; padding:5px 7px; border:1px solid #d6d3ed; border-radius:7px; background:#fff; color:#46438c; text-align:center; font:800 11px/1 Inter,sans-serif; } .pq-no-pages { color:#77778b; font:600 11px/1.3 Inter,sans-serif; } .pq-selection-note { margin:8px 0 0; color:#555579; font:500 11px/1.45 Inter,sans-serif; } .pq-detection-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; margin-top:11px; } .pq-detection-actions .pv-secondary { min-height:36px; padding:8px 12px; font-size:11px; } .pq-detection-actions .pv-secondary:disabled { border-color:#d5d4e7; background:#f1f0f8; color:#63617d; cursor:default; } .pq-text-button { min-height:36px; padding:8px 0; border:0; background:transparent; color:#403d91; font:800 11px/1.3 Inter,sans-serif; text-align:left; cursor:pointer; } .pq-text-button:hover { text-decoration:underline; } .pq-costing { min-width:0; margin:17px 0 2px; padding:20px; border:1px solid #dfddec; border-radius:15px; background:#faf9ff; scroll-margin-top:145px; } .pq-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .pq-heading > div { flex:1; min-width:0; } .pq-heading h3 { margin:5px 0 5px; color:#191842; font:800 18px/1.3 Sora,Inter,sans-serif; } .pq-heading p { max-width:680px; margin:0; color:#6d7183; font:400 12px/1.5 Inter,sans-serif; } .pq-quick-action { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; margin-top:12px; } .pq-quick-action button { min-height:34px; padding:7px 10px; border:1px solid #bfbce0; border-radius:8px; background:#fff; color:#3c398d; font:800 11px/1.3 Inter,sans-serif; cursor:pointer; } .pq-quick-action button:hover { background:#f1f0fc; } .pq-quick-action span { color:#838495; font:500 10px/1.3 Inter,sans-serif; } .pq-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; } .pq-metric { min-width:0; display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid #ebe8f5; border-radius:11px; background:#fff; } .pq-metric span { color:#656a7e; font:700 11px/1.3 Inter,sans-serif; } .pq-metric strong { color:#23234f; font:800 24px/1.1 Sora,Inter,sans-serif; overflow-wrap:anywhere; } .pq-metric small { color:#8a8d9c; font:500 10px/1.35 Inter,sans-serif; } .pq-metric-color strong { color:#4c48a3; } .pq-metric-note { margin:9px 1px 0; color:#74788a; font:400 11px/1.5 Inter,sans-serif; } .pq-mixed-note { margin-top:14px; padding:12px 13px; border:1px solid #efddb6; border-radius:10px; background:#fff9eb; color:#76531d; } .pq-mixed-note strong { display:block; color:#754e12; font:800 12px/1.35 Inter,sans-serif; } .pq-mixed-note p { margin:5px 0 0; font:500 11px/1.5 Inter,sans-serif; } .pq-price-card { margin-top:15px; overflow:hidden; border:1px solid #e7e3dc; border-radius:12px; background:#fff; } .pq-price-head,.pq-price-row,.pq-total-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; } .pq-price-head { border-bottom:1px solid #eeeae3; background:#fbfaf8; } .pq-price-head > div,.pq-price-row > div,.pq-total-row > div { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; } .pq-price-head strong { color:#292947; font:800 12px/1.3 Inter,sans-serif; } .pq-price-head span:not(.pq-price-badge),.pq-price-row small,.pq-total-row small { color:#858897; font:500 10px/1.4 Inter,sans-serif; } .pq-price-badge { flex:none; color:#77758c; font:800 9px/1.2 Inter,sans-serif; letter-spacing:.03em; } .pq-price-row + .pq-price-row { border-top:1px solid #f2efe9; } .pq-price-row b { color:#383d53; font:700 12px/1.3 Inter,sans-serif; } .pq-price-row > strong { flex:none; color:#686a7d; font:700 11px/1.3 Inter,sans-serif; text-align:right; } .pq-total-row { border-top:1px solid #e6e2f2; background:#f3f2fb; } .pq-total-row b { color:#282558; font:800 13px/1.3 Inter,sans-serif; } .pq-total-row > strong { color:#3b398b; font:800 13px/1.3 Sora,Inter,sans-serif; text-align:right; } .pq-pricing-note { margin:10px 2px 0; color:#77798b; font:400 11px/1.5 Inter,sans-serif; } .pq-details { margin-top:14px; overflow:hidden; border:1px solid #e3e0ed; border-radius:10px; background:#fff; } .pq-details summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; color:#3f3b8c; font:800 12px/1.35 Inter,sans-serif; cursor:pointer; list-style:none; } .pq-details summary::-webkit-details-marker { display:none; } .pq-details summary > span:first-child::before { content:'β–Έ'; display:inline-block; margin-right:7px; transition:transform .15s; } .pq-details[open] summary > span:first-child::before { transform:rotate(90deg); } .pq-item-count { flex:none; color:#858796; font:600 10px/1.3 Inter,sans-serif; } .pq-breakdown { display:grid; gap:8px; padding:0 10px 10px; } .pq-breakdown-item { min-width:0; padding:12px; border:1px solid #ece9e2; border-radius:9px; background:#fcfbf9; } .pq-breakdown-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:7px; } .pq-breakdown-head strong { min-width:0; overflow-wrap:anywhere; color:#242642; font:800 12px/1.35 Inter,sans-serif; } .pq-breakdown-head span { flex:none; color:#77788a; font:700 10px/1.35 Inter,sans-serif; } .pq-breakdown-item p { margin:4px 0 0; color:#666b7a; font:500 11px/1.5 Inter,sans-serif; overflow-wrap:anywhere; } .pq-breakdown-item .pq-breakdown-sheets { color:#494679; } .pq-breakdown-note { margin:1px 2px 0; color:#808392; font:400 10px/1.5 Inter,sans-serif; } .pq-detection:focus-visible,.pq-detection button:focus-visible,.pq-quick-action button:focus-visible,.pq-details summary:focus-visible { outline:3px solid #e9b83c; outline-offset:2px; } @media (max-width:720px) { .pq-costing { margin:14px 0 2px; padding:14px; scroll-margin-top:140px; } .pq-heading h3 { font-size:16px; } .pq-heading p { font-size:11px; } .pq-metrics { gap:6px; margin-top:13px; } .pq-metric { padding:10px 8px; } .pq-metric span { font-size:10px; } .pq-metric strong { font-size:21px; } .pq-metric small { font-size:9px; } .pq-price-head,.pq-price-row,.pq-total-row { padding:11px; } .pq-detection { padding:12px; scroll-margin-top:140px; } #pd-color-mode { scroll-margin-top:140px; } } @media (max-width:400px) { .pq-costing,.pq-detection,#pd-color-mode { scroll-margin-top:195px; } .pq-heading > .pq-demo-tag { display:none; } .pq-detection-head > .pq-demo-tag { display:none; } .pq-price-badge { display:none; } .pq-total-row { align-items:flex-start; flex-direction:column; gap:8px; } .pq-total-row > strong { text-align:left; } .pq-breakdown-head { flex-wrap:wrap; gap:3px 8px; } } #vtimp .preview-steps {grid-template-columns:repeat(4,minmax(0,1fr))!important} #vtimp .fd-doc-card {min-height:180px;padding-bottom:20px} #vtimp .fd-doc-card .fd-doc-icon svg {width:25px;height:25px;stroke:#3b3a96} #vtimp .fd-doc-card:disabled {opacity:.55;cursor:not-allowed} #vtimp .pd-services-soon{margin-top:16px;border:1px solid #e8e3da;border-radius:14px;background:#faf9f6;padding:0 14px} #vtimp .pd-services-soon>summary{cursor:pointer;min-height:44px;padding:12px 0;font:700 12px/1.5 Inter,sans-serif;color:#5f5c6b} #vtimp .pd-services-soon[open]{padding-bottom:14px} #vtimp .pv-section-label {display:inline-flex;align-items:center;border:1px solid #e4e2f3;background:#f6f5fd;color:#3b3a96;font:800 9px/1.2 Inter,sans-serif;letter-spacing:.07em;border-radius:100px;padding:7px 10px;white-space:nowrap} #vtimp .pv-bottom-actions {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid #ece7dd} #vtimp .pv-bottom-actions small,#vtimp .pv-bottom-actions strong {display:block;font:600 12px/1.4 Inter,sans-serif;color:#5f5c6b} #vtimp .pv-bottom-actions strong {color:#171844;font-weight:800;font-size:14px} #vtimp .pv-primary,#vtimp .pv-secondary {min-height:42px;padding:10px 16px;border-radius:11px;font:700 13px/1.2 Inter,sans-serif;cursor:pointer} #vtimp .pv-primary {background:#3b3a96;color:white;border:1px solid #3b3a96} #vtimp .pv-secondary {background:white;color:#34308e;border:1px solid #bdbbe0} #vtimp button:disabled {cursor:not-allowed;opacity:.6} #vtimp .pv-privacy {margin:18px 0 28px;color:#737684;font:400 11px/1.5 Inter,sans-serif;text-align:center} #vtimp .vtimp-confirm {display:flex;gap:9px;margin-top:16px;color:#292943;font:600 13px/1.5 Inter,sans-serif} #vtimp .vtimp-confirm input {accent-color:#3b3a96;width:17px;height:17px;flex:none} #vtimp .vtimp-file {display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e9e5dd;border-radius:11px;background:#fbfaf8} #vtimp .vtimp-file span {flex:1;min-width:0;overflow-wrap:anywhere;font:600 12px/1.4 Inter,sans-serif;color:#252443} #vtimp .vtimp-file button {border:0;background:transparent;color:#474496;font:700 11px Inter,sans-serif;padding:8px;cursor:pointer} .vtimp-home-entry {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;margin-bottom:22px;padding:20px 24px;border-radius:16px;background:#efedf9;color:#242264;text-decoration:none;border:1px solid #dedbf3} .vtimp-home-entry b,.vtimp-home-entry small {display:block}.vtimp-home-entry b {font:800 16px Sora,Inter,sans-serif}.vtimp-home-entry small {font:400 12px/1.5 Inter,sans-serif;margin-top:4px}.vtimp-home-entry strong {white-space:nowrap;font:800 12px Inter,sans-serif} .vtimp-express-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0 22px;padding:20px 24px;border:1px solid #d8c899;border-radius:18px;background:linear-gradient(120deg,#fffaf0 0%,#fff 64%,#f4f1ff 100%);box-shadow:0 8px 24px rgba(36,34,100,.07)} .vtimp-express-copy{min-width:0}.vtimp-express-kicker{display:block;font:800 9px/1.3 Inter,sans-serif;letter-spacing:.09em;color:#78621f}.vtimp-express-card h2{margin:5px 0 4px;font:800 20px/1.2 Sora,Inter,sans-serif;color:#242264}.vtimp-express-card p{margin:0;color:#56576d;font:500 12px/1.5 Inter,sans-serif}.vtimp-express-prices{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px;color:#4a4553;font:600 11.5px/1.4 Inter,sans-serif}.vtimp-express-prices span{white-space:nowrap}.vtimp-express-prices b{color:#29266f;font-weight:800}.vtimp-express-card>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:11px 16px;border-radius:11px;background:#3b3a96;color:#fff;text-decoration:none;white-space:nowrap;font:800 12px/1.2 Inter,sans-serif;box-shadow:0 5px 13px rgba(59,58,150,.18)}.vtimp-express-card>a:hover{background:#2e2d7e;transform:translateY(-1px)} @media(max-width:720px){#vtimp .fd-doc-card {min-height:0;padding-bottom:15px}#vtimp .fd-sec-head {flex-wrap:wrap}#vtimp .pv-bottom-actions{margin-top:16px;gap:8px}#vtimp .pv-primary,#vtimp .pv-secondary{font-size:12px;padding:10px 12px}#vtimp .fd-hero-photo{display:block;min-height:140px}.vtimp-home-entry{margin-top:16px;padding:15px}.vtimp-express-card{align-items:flex-start;flex-direction:column;margin:15px 0;padding:17px}.vtimp-express-card>a{width:100%}.vtimp-express-prices span{white-space:normal}} /* ── Estado de serviΓ§o indisponΓ­vel (6.30.2) ─────────────────────── Nasceu de um fato medido em 30/10/2026: o portal anunciava ImpressΓ£o e TCC como serviΓ§os no ar, e o ERP respondia 401 em /api/impressao porque as rotas ainda nΓ£o estavam publicadas. O cliente percorria quatro passos para bater numa parede. Agora a tela diz a verdade antes de comeΓ§ar β€” e volta ao normal sozinha quando o ERP confirmar. */ .vtimp-manutencao{display:flex;gap:11px;align-items:flex-start;background:#fff7e6; border:1px solid #f0c264;border-radius:12px;padding:13px 16px;margin:0 0 16px; font-size:14.5px;line-height:1.45;color:#7a4b00} .vtimp-manutencao b{color:#5c3800} .vtimp-selo-off{display:inline-flex;align-items:center;width:fit-content; padding:4px 10px;border-radius:99px;background:#fef3c7;color:#8a4b00; border:1px solid #f0c264;font-size:11.5px;font-weight:800;margin:0 0 6px} .fd-doc-card.vtimp-indisponivel{box-shadow:inset 0 0 0 2px #f0b429} /*ajustes-6286-3telas.css*/ /* ════════════════════════════════════════════════════════════════════ ajustes-6286-3telas.css β€” RΓ©gua 3 Telas + Fidelidade ao Painel ERP VersΓ£o 6.28.6 Β· PC (1366Γ—820), Tablet (768Γ—1024) e Celular (390Γ—844) Escopo aditivo e seguro: zero alteração em cΓ‘lculo de preΓ§o/estoque. ════════════════════════════════════════════════════════════════════ */ :root { --cookie-h: 0px; --tabbar-h: 0px; --quickbar-h: 0px; } /* Safe first-paint fallback until JS measures the visible mobile bars. */ @media (max-width: 960px) { :root { --cookie-h: 55px; --tabbar-h: 57px; --quickbar-h: 0px; } } /* ── 1. TOPO GLOBAL: button.cart sem vazamento horizontal ─────────── */ @media (min-width: 1241px) { .topo .cart, .store-topo .cart { width: auto !important; min-width: 44px !important; height: 40px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; overflow: hidden !important; } .topo .cart .n, .store-topo .cart .n { position: static !important; top: auto !important; right: auto !important; min-width: 18px !important; height: 18px !important; margin-left: 2px !important; flex: none !important; } } @media (max-width: 1240px) { .topo .cart, .store-topo .cart { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; position: relative !important; display: grid !important; place-items: center !important; overflow: hidden !important; } .topo .cart .n, .store-topo .cart .n { position: absolute !important; top: 2px !important; right: 2px !important; min-width: 16px !important; height: 16px !important; font-size: 9.5px !important; padding: 0 3px !important; line-height: 1 !important; } } /* ── 2. COORDENAÇÃO DE BARRAS FIXAS (#cookie-bar Γ— #wa-fab Γ— rodapΓ©) ─ */ #cookie-bar .cookie-bts .btn { min-height: 36px !important; padding: 6px 14px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #cookie-bar .cookie-bts .btn-o::after { content: none !important; display: none !important; } @media (min-width: 961px) { #cookie-bar { bottom: 0 !important; } #wa-fab, .wa-fab { bottom: calc(var(--cookie-h, 0px) + 20px) !important; } body:has(#cookie-bar:not([hidden])) { padding-bottom: calc(var(--cookie-h, 0px) + 12px) !important; } } @media (max-width: 960px) { #cookie-bar { bottom: calc(var(--tabbar-h, 64px) + var(--quickbar-h, 0px) + env(safe-area-inset-bottom, 0px)) !important; } #wa-fab, .wa-fab { /* On touch layouts the header already exposes WhatsApp. Removing this fixed overlay keeps it off filters, form fields and checkout actions. */ display: none !important; bottom: calc(var(--tabbar-h, 64px) + var(--cookie-h, 0px) + var(--quickbar-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)) !important; } body { padding-bottom: calc(var(--tabbar-h, 64px) + var(--cookie-h, 0px) + var(--quickbar-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── 3. BARRA RÁPIDA DE COMPRA NO CELULAR (#/produto "Ir AlΓ©m") ────── */ .pd-quick-bar { display: none; } @media (max-width: 720px) { .pd-quick-bar:not([hidden]) { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 75; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line, #e3e9f0); box-shadow: 0 -8px 22px rgba(8, 32, 64, 0.12); } .pd-qb-info { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .pd-qb-info img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line, #e3e9f0); flex: none; } .pd-qb-txt { min-width: 0; } .pd-qb-txt small { display: block; font-size: 10.5px; color: var(--muted, #5b6b7e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-qb-txt b { display: block; font: 800 15px/1.15 var(--font-d, Sora, sans-serif); color: var(--ink, #082040); } .pd-qb-btn { flex: none; min-height: 38px; padding: 0 15px; border: 0; border-radius: 10px; background: #3B3A96; color: #fff; font: 700 12.5px var(--font-b, Inter, sans-serif); cursor: pointer; white-space: nowrap; } } /* ── 4. HOME: BANNERS E VITRINES FIΓ‰IS AO PAINEL DO ERP (0 CORTE) ──── */ #p-inicio .mk-hero-art:has(.promo-slide.promo-img), #p-inicio .mk-hero-art:has(.promo-slide.promo-img) .promo-in, #p-inicio .mk-hero-art .promo-slide.promo-img { min-height: 0 !important; aspect-ratio: var(--hero-banner-ar, 1200 / 515) !important; width: 100% !important; } #p-inicio .mk-hero-art .promo-slide.promo-img { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: #0b2240 !important; } /* Vitrine padronizada de 6 mΓ³dulos da Home (.vb2-grid): - Opção 1 aprovada em 29/10/2026: muda somente o formato da foto. - PC (>= 961px): 2 colunas de cards; texto Γ  esquerda e foto quadrada Γ  direita. - Tablet (681..960px): 2 colunas; foto quadrada centralizada acima do texto. - Celular (<= 680px): 1 coluna; foto quadrada a 76%, centralizada acima do texto. - Textos, fotos, preΓ§os, links e banner nΓ£o sΓ£o alterados por este bloco. - Paleta Creme Editorial #FAF6F1 + Índigo #3B3A96 (aprovada pelo dono) */ #p-inicio .vb2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; } #p-inicio .vb2-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); align-items: center; padding-right: 16px; background: #FAF6F1; border: 1px solid #E5DEC9; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.14); min-width: 0; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } #p-inicio .vb2-card:hover { transform: translateY(-2px); border-color: #cfc6b0; box-shadow: 0 16px 34px -16px rgba(15, 23, 42, 0.22); } #p-inicio .vb2-body { order: 1; padding: 20px; display: flex; flex-direction: column; min-width: 0; } #p-inicio .vb2-art { order: 2; position: relative; display: block; width: 100%; max-width: 224px; height: auto; min-height: 0; aspect-ratio: 1 / 1; align-self: center; justify-self: end; margin: 16px 0; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center center; background-color: #e6e2d8; text-decoration: none; } #p-inicio .vb2-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 32, 64, 0.22) 0%, rgba(8, 32, 64, 0) 36%, rgba(8, 32, 64, 0.30) 100%); pointer-events: none; } #p-inicio .vb2-cat { position: absolute; top: 11px; left: 11px; z-index: 2; background: rgba(255, 255, 255, 0.94); color: #191842; font: 800 10px/1 var(--font-b, Inter, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(8, 32, 64, 0.14); } #p-inicio .vb2-selo { position: absolute; left: 11px; bottom: 11px; z-index: 2; display: inline-flex; align-items: baseline; gap: 5px; background: rgba(8, 32, 64, 0.88); color: #fff; border-radius: 999px; padding: 6px 12px; font: 600 11px/1 var(--font-b, Inter, sans-serif); backdrop-filter: blur(4px); } #p-inicio .vb2-selo b { font: 800 13px/1 var(--font-d, Sora, sans-serif); color: #fff; } #p-inicio .vb2-eye { font: 800 9.5px/1.25 var(--font-b, Inter, sans-serif); letter-spacing: 0.11em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; } #p-inicio .vb2-tit { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: #082040; margin: 0 0 7px; min-height: 2.3em; } #p-inicio .vb2-tit em { font-style: normal; color: #3B3A96; } #p-inicio .vb2-desc { font-size: 12px; line-height: 1.48; color: #475569; margin: 0 0 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.44em; } #p-inicio .vb2-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 11px; } #p-inicio .vb2-pill { border-radius: 11px; font: 700 9.8px/1.2 var(--font-b, Inter, sans-serif); letter-spacing: -0.01em; padding: 6px 5px; background: #FFFFFF; border: 1px solid #D8DEE8; color: #0B2340; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } #p-inicio .vb2-cta { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 9px; } #p-inicio .vb2-btn1 { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 0 14px; border-radius: 12px; background: #3B3A96; color: #fff !important; font: 700 12.5px/1 var(--font-b, Inter, sans-serif); text-decoration: none; white-space: nowrap; transition: background 0.15s ease; } #p-inicio .vb2-btn1:hover { background: #2E2D7A; } #p-inicio .vb2-btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; font: 700 11.5px/1.2 var(--font-b, Inter, sans-serif); color: #3B3A96; text-decoration: underline; text-underline-offset: 3px; } #p-inicio .vb2-checks { padding-top: 9px; border-top: 1px solid rgba(8, 32, 64, 0.09); display: grid; grid-template-columns: 1fr; gap: 3px; font: 600 10.5px/1.3 var(--font-b, Inter, sans-serif); color: #334155; } #p-inicio .vb2-checks b { color: #15803d; font-weight: 800; margin-right: 3px; } /* Tablet (681..960px): 2 colunas; foto 1:1 centralizada no topo. */ @media (max-width: 960px) and (min-width: 681px) { #p-inicio .vb2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #p-inicio .vb2-card { display: flex; flex-direction: column; align-items: stretch; padding-right: 0; } #p-inicio .vb2-art { order: 0; aspect-ratio: 1 / 1; height: auto; min-height: 0; width: 76%; max-width: none; margin: 16px auto 0; flex-shrink: 0; } #p-inicio .vb2-body { order: 1; padding: 20px; flex: 1; } #p-inicio .vb2-tit { font-size: 19.5px; } #p-inicio .vb2-pill { font-size: 10px; padding: 6px 6px; } #p-inicio .vb2-btn2 { min-height: 32px; } } /* Celular (<= 680px): 1 coluna, foto 1:1 centralizada; pΓ­lulas 2Γ—2 preservadas. */ @media (max-width: 680px) { #p-inicio .vb2-grid { grid-template-columns: 1fr; gap: 16px; } #p-inicio .vb2-card { display: flex; flex-direction: column; align-items: stretch; padding-right: 0; } #p-inicio .vb2-art { order: 0; aspect-ratio: 1 / 1; height: auto; min-height: 0; width: 76%; max-width: none; margin: 16px auto 0; flex-shrink: 0; } #p-inicio .vb2-body { order: 1; padding: 20px; flex: 1; } #p-inicio .vb2-tit { font-size: 21px; min-height: 0; } #p-inicio .vb2-desc { min-height: 0; } #p-inicio .vb2-pill { white-space: normal; line-height: 1.25; padding: 7px 6px; } #p-inicio .vb2-btn1 { min-height: 44px; } #p-inicio .vb2-btn2 { min-height: 34px; } } /* Imagens verticais/quadradas protegidas contra corte > 38% (especificidade acima de ajustes-627-cards.css) */ .prod.card623 .c623-photo img.vt-img-contain, .card623 .c623-photo img.vt-img-contain, .home-landings .lc .ph img.vt-img-contain, .ag-wrap .ag-grid img.vt-img-contain, .ag-wrap .ag-novos-grid img.vt-img-contain, img.vt-img-contain { object-fit: contain !important; background: linear-gradient(145deg, #f8fafc, #eef2f7) !important; padding: 6px !important; } /* ── 5. VITRINES E CARDS ALINHADOS NA RΓ‰GUA (Ξ” = 0px NO PREΓ‡O) ────── */ .prod.card623 .b627-q, .card623 .b627-q { order: 7 !important; margin: 8px 16px 0 !important; } @media (min-width: 640px) { #grid-cat .prod.card623 .c623-title, #grid-inicio .prod.card623 .c623-title { min-height: 0 !important; max-height: none !important; } .ag-wrap .ag-grid .prod.card623 .c623-title, .ag-wrap .ag-novos-grid .prod.card623 .c623-title { min-height: 2.5em !important; max-height: 2.5em !important; } #grid-cat .prod.card623 .c623-sub, #grid-inicio .prod.card623 .c623-sub { min-height: 0 !important; max-height: none !important; } .ag-wrap .ag-grid .prod.card623 .c623-sub, .ag-wrap .ag-novos-grid .prod.card623 .c623-sub { min-height: 2.9em !important; max-height: 2.9em !important; } #grid-cat .prod.card623 .c623-cat, #grid-inicio .prod.card623 .c623-cat { flex-wrap: wrap !important; overflow: visible !important; min-height: 0 !important; max-height: none !important; align-items: center !important; } .ag-wrap .ag-grid .prod.card623 .c623-cat, .ag-wrap .ag-novos-grid .prod.card623 .c623-cat { flex-wrap: nowrap !important; overflow: hidden !important; min-height: 24px !important; max-height: 24px !important; align-items: center !important; } } /* ── 6. LANDINGS DE KITS E PACOTES EM 3 TELAS (PARTE 3) ───────────── */ /* cartoes.html (4 kits) e polaroid.html (3 kits): zero card Γ³rfΓ£o */ body[data-page="cartoes"] #kits.pol-kits, .pol-kits[data-kits-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (min-width: 601px) and (max-width: 980px) { body[data-page="cartoes"] #kits.pol-kits, .pol-kits[data-kits-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { body[data-page="cartoes"] #kits.pol-kits, .pol-kits[data-kits-count="4"] { grid-template-columns: 1fr !important; } } @media (min-width: 680px) { .pol-kits[data-kits-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 679px) { .pol-kits[data-kits-count="3"] { grid-template-columns: 1fr !important; } } /* PΓ­lulas do herΓ³i em cartoes.html e polaroid.html no celular: zero estouro */ @media (max-width: 760px) { .rl .rl-pills.pb-pills { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .rl .rl-pills.pb-pills[data-pills-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .rl .rl-pills.pb-pills > .pb-pill { flex: none !important; min-width: 0 !important; width: 100% !important; white-space: normal !important; padding: 8px 8px !important; box-sizing: border-box !important; } .rl .rl-pills.pb-pills[data-pills-count="3"] > .pb-pill { padding: 7px 5px !important; } .rl .rl-pills.pb-pills > .pb-pill i { display: block !important; white-space: normal !important; line-height: 1.25 !important; font-size: 10.5px !important; } } /* agendas.html: 3 colunas quando hΓ‘ 3 itens no Tablet (zero Γ³rfΓ£o 2+1) e fim do bullet duplicado */ @media (min-width: 680px) and (max-width: 960px) { .ag-wrap .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ag-wrap .ag-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .ag-wrap .ag-passos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } .ag-wrap .ag-mat-bullets li::before { content: none !important; display: none !important; } /* etiquetas.html: 4 miniaturas simΓ©tricas + #etq-cor 2Γ—2 no celular */ .etq-gal .thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; max-width: 100% !important; } .etq-gal .thumbs img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; min-width: 0 !important; object-fit: cover !important; } @media (min-width: 680px) and (max-width: 960px) { .etq-sel, .etq-notas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { #etq-cor { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #etq-cor .etq-chip { width: 100% !important; min-width: 0 !important; text-align: center !important; } } /* fotos.html: raio 18 e check na cor institucional #3B3A96 */ .fpc.fpc-card { border-radius: 18px !important; } .fpc.on .fpc-check { background: #3B3A96 !important; border-color: #3B3A96 !important; color: #fff !important; } /* ── 7. ALVOS DE TOQUE >= 32–36px EM TABLET E CELULAR ─────────────── */ #prova-social .vt-dot { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 11px !important; box-sizing: border-box !important; background-clip: content-box !important; } .promo-dot { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } a.ft-banner-back, .cv-step { min-height: 34px !important; display: inline-flex !important; align-items: center !important; } a.ft-banner-back { padding: 4px 10px !important; } #p-atendimento .at-canal .seta { min-width: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #p-montador button, .mont-builder button { min-height: 34px !important; } #p-pedido button { min-width: 34px !important; min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #p-pedido a { min-height: 32px !important; display: inline-flex !important; align-items: center !important; } #p-pedido input[type="checkbox"], #p-pedido input[type="radio"] { min-width: 30px !important; min-height: 30px !important; cursor: pointer !important; } /* v6.29.4: Home .vb2-grid permanece na regra canΓ΄nica ΓΊnica de 2 colunas horizontais (linhas 185+) β€” sem sobrescrita 3 colunas. MantΓ©m janelas 16:9 nos cards de material de Adesivos. */ #p-montador .ades-banner .ab-foto { aspect-ratio: 16 / 10 !important; min-height: 240px; background-size: cover !important; background-position: center center !important; } #p-montador .mat-grid.mont-mats .mat-photo, .mat-grid.mont-mats .mat-photo { aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important; background-size: cover !important; background-position: center center !important; } @media (max-width: 980px) { #p-montador .ades-banner .ab-foto { min-height: 0 !important; height: auto !important; } } /* ── 9. v6.28.10: Fim do corte vertical em .ades-banner (#/montador + agendas.html) e Contraste RodapΓ© ── */ .ades-banner, .ades-banner.rl { height: auto !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important; align-items: stretch !important; overflow: hidden !important; } #p-montador .ades-banner .ab-foto, .ag-wrap .ades-banner .ab-foto { aspect-ratio: auto !important; height: auto !important; min-height: 340px !important; background-size: cover !important; background-position: center center !important; } @media (max-width: 900px) { .ades-banner, .ades-banner.rl { grid-template-columns: 1fr !important; } #p-montador .ades-banner .ab-foto, .ag-wrap .ades-banner .ab-foto { aspect-ratio: 16 / 10 !important; min-height: 0 !important; height: auto !important; } } /* Contraste WCAG AA na faixa global de pagamento (#pay-strip) */ #pay-strip .ps-l, .pay-strip .ps-l { color: #082040 !important; font-weight: 700 !important; } #pay-strip .ps-note, .pay-strip .ps-note { color: #334155 !important; } /* Centralização exata do dΓ­gito em #cart-n quando visΓ­vel (inline style="display:inline") */ .topo .cart .n:not([style*="none"]), .store-topo .cart .n:not([style*="none"]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; } /* ── 10. v6.28.11: Identidade Vetorial Oficial no CabeΓ§alho e RodapΓ© ── */ .topo .logo, .store-topo .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .topo .brand-logo-wrap, .store-topo .brand-logo-wrap, .foot .brand-logo-wrap { display: inline-flex; align-items: center; line-height: 0; } @media (min-width: 961px) { .topo .bar, .store-topo .bar { min-height: 78px; height: 78px; } .topo .logo img.erp-logo, .store-topo .logo img.erp-logo, .topo .logo img, .store-topo .logo img { height: 58px !important; width: auto !important; max-width: 210px !important; object-fit: contain !important; object-position: left center !important; } .foot .f-brand .logo img.erp-logo, .foot .footer-logo img.erp-logo, .footer-logo .erp-logo { height: 56px !important; width: auto !important; max-width: 224px !important; object-fit: contain !important; object-position: left center !important; } #p-conta .tabs { top: 88px; } #p-conta .exec-adm-side, #p-pedido .exec-ck-aside, .bprev, .mont-preview, .pd-gal-col { top: 96px; } } @media (min-width: 681px) and (max-width: 960px) { .topo .bar, .store-topo .bar { min-height: 70px; height: 70px; } .topo .logo img.erp-logo, .store-topo .logo img.erp-logo { height: 46px !important; width: auto !important; max-width: 176px !important; } .foot .f-brand .logo img.erp-logo, .foot .footer-logo img.erp-logo, .footer-logo .erp-logo { height: 52px !important; width: auto !important; max-width: 205px !important; } } @media (max-width: 680px) { .topo .logo img.erp-logo, .store-topo .logo img.erp-logo { height: 42px !important; width: auto !important; max-width: 158px !important; } .foot .f-brand .logo img.erp-logo, .foot .footer-logo img.erp-logo, .footer-logo .erp-logo { height: 48px !important; width: auto !important; max-width: 192px !important; } } /* ── 6.30.3 Β· A FOTO DO CARD PREENCHE A FAIXA (dono, 30/10/2026) ──── O card padrΓ£o da vitrine e do catΓ‘logo tem a faixa em 7:3 e as fotos do catΓ‘logo sΓ£o 4:3. A regra de "proteção contra corte > 38%" acima resolvia o corte deixando a foto INTEIRA sΓ³ que pequena, centralizada em duas tarjas cinza-claro β€” na tela isso lΓͺ como "proporção errada": o card com foto nΓ£o tem o mesmo peso visual do card SEM FOTO, que ocupa a faixa toda com o degradΓͺ. Aqui a foto passa a preencher a faixa (cover), do mesmo jeito que o placeholder preenche β€” os cards da grade ficam alinhados e o "4 fotos" do canto volta a ter foto embaixo. O corte fica no miolo da imagem (object-position center), nunca no topo. Escopo: sΓ³ #grid-inicio e #grid-cat β€” as duas grades em que a faixa Γ© 7:3. Nas telas de agenda/landing a faixa continua 4:3 e a foto continua inteira (contain, como estava). O seletor com :is(#id) tem especificidade de ID, entΓ£o vence a regra de contain acima sem depender da ordem dos arquivos. */ :is(#grid-inicio, #grid-cat) .card623 .c623-photo img, :is(#grid-inicio, #grid-cat) .card623 .c623-photo img.vt-img-contain { object-fit: cover !important; object-position: center !important; background: none !important; padding: 0 !important; } /* Compact desktop: the floating WhatsApp button otherwise covers right-edge actions (including the home-page ImpressΓ£o e TCC entry). The sticky header keeps its own WhatsApp action available in this range. */ @media (min-width: 961px) and (max-width: 1366px) { #wa-fab, .wa-fab { display: none !important; } } /*ajustes-6288-executivo.css*/ /* ════════════════════════════════════════════════════════════════════════════ ajustes-6288-executivo.css β€” PadrΓ£o Executivo Corporativo VTDigital (v6.28.8) Escopo estrito: #p-conta, #p-pedido, #p-entrar, #p-cadastro, #p-atendimento, #p-montador, #p-gabaritos, #p-paginas e modais internos. NΓƒO altera Home (#p-inicio .vb2-grid), CatΓ‘logo (.prod.card623) nem Landings. ════════════════════════════════════════════════════════════════════════════ */ :root { --exec-navy: #082040; --exec-navy-2: #0D2D56; --exec-indigo: #3B3A96; --exec-cream: #FAF6F1; --exec-surface: #FFFFFF; --exec-ink: #0F172A; --exec-slate: #475569; --exec-muted: #64748B; --exec-line: #E2E8F0; --exec-line-strong: #CBD5E1; --exec-ok-bg: #ECFDF5; --exec-ok-ink: #065F46; --exec-warn-bg: #FFFBEB; --exec-warn-ink: #92400E; --exec-ind-bg: #EEF2FF; --exec-ind-ink: #3730A3; --exec-shadow: 0 1px 3px rgba(8, 32, 64, 0.06), 0 6px 18px rgba(8, 32, 64, 0.04); } /* ── UtilitΓ‘rio global de botΓ΅es em tabelas/listas (Correção image-1.png) ── */ .exec-row-actions, #p-conta .env-acoes, #p-conta .e-acoes { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; } #p-conta .env-acoes .btn { flex: 0 0 auto !important; min-width: 0 !important; } /* ════════════════════════════════════════════════════════════════════════════ 1. LOGIN & CADASTRO EXECUTIVO (#p-entrar e #p-cadastro β€” Correção image-2.png) ════════════════════════════════════════════════════════════════════════════ */ #p-entrar .exec-auth-grid, #p-cadastro .exec-auth-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; gap: 24px !important; align-items: start !important; } #p-entrar .exec-auth-pitch, #p-cadastro .exec-auth-pitch { background: linear-gradient(165deg, var(--exec-navy) 0%, var(--exec-navy-2) 100%) !important; color: #FFFFFF !important; border-radius: 16px !important; padding: 32px 28px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 18px !important; position: sticky; top: 90px; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 14px 34px rgba(8, 32, 64, 0.14) !important; min-width: 0; } #p-entrar .exec-auth-pitch .au-tag, #p-cadastro .exec-auth-pitch .au-tag { display: inline-flex !important; align-self: flex-start; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #E2E8F0 !important; font: 700 11px/1 'Inter', sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 6px 11px !important; border-radius: 6px !important; margin-bottom: 16px !important; } #p-entrar .exec-auth-pitch .au-big, #p-cadastro .exec-auth-pitch .au-big { font: 700 26px/1.22 'Sora', sans-serif !important; color: #FFFFFF !important; letter-spacing: -0.02em !important; margin: 0 0 10px !important; } #p-entrar .exec-auth-pitch .intro, #p-cadastro .exec-auth-pitch .intro { color: #CBD5E1 !important; font-size: 13.8px !important; line-height: 1.55 !important; margin: 0 0 22px !important; } .exec-pitch-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; } .exec-pitch-list li { display: flex !important; align-items: flex-start !important; gap: 12px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 11px !important; padding: 12px 14px !important; } .exec-pitch-list .hc-ic { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; font-size: 14px !important; } .exec-pitch-list li b { display: block !important; color: #FFFFFF !important; font: 600 13.5px/1.3 'Sora', sans-serif !important; margin-bottom: 2px !important; } .exec-pitch-list li small { display: block !important; color: #CBD5E1 !important; font-size: 12.2px !important; line-height: 1.45 !important; } .exec-pitch-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; color: #94A3B8; } /* Evita duplicar selo de estrelas antigo embaixo do card escuro */ #p-entrar .exec-auth-pitch .prova624 { display: none !important; } #p-entrar .exec-auth-card, #p-cadastro .exec-auth-card { background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 16px !important; padding: 28px !important; box-shadow: var(--exec-shadow) !important; min-width: 0; } #p-entrar .exec-auth-card h2, #p-cadastro .exec-auth-card h2 { font: 700 20px/1.25 'Sora', sans-serif !important; color: var(--exec-navy) !important; margin: 0 0 6px !important; } /* Faixa "Como funciona" em padrΓ£o sΓ³brio corporativo (sem bolinha amarela) */ #p-entrar .passo624 { background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; } #p-entrar .passo624 .n { background: var(--exec-navy) !important; color: #FFFFFF !important; border-radius: 7px !important; } /* Abas PF / PJ sΓ©rias sem emojis infantis */ #p-cadastro .pf-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; background: #F1F5F9 !important; padding: 4px !important; border-radius: 10px !important; border: 1px solid var(--exec-line) !important; margin-bottom: 18px !important; } #p-cadastro .pf-tab { border: 0 !important; border-radius: 7px !important; padding: 9px 12px !important; font: 600 13px/1.2 'Inter', sans-serif !important; background: transparent !important; color: var(--exec-slate) !important; cursor: pointer; } #p-cadastro .pf-tab.on { background: #FFFFFF !important; color: var(--exec-navy) !important; box-shadow: 0 1px 3px rgba(8, 32, 64, 0.1) !important; } @media (max-width: 920px) { #p-entrar .exec-auth-grid, #p-cadastro .exec-auth-grid { grid-template-columns: 1fr !important; } #p-entrar .exec-auth-card, #p-cadastro .exec-auth-card { order: 1 !important; padding: 20px !important; } #p-entrar .exec-auth-pitch, #p-cadastro .exec-auth-pitch { order: 2 !important; position: static !important; padding: 22px 20px !important; margin-top: 0 !important; } } /* ════════════════════════════════════════════════════════════════════════════ 2. ADMINISTRADOR / DASHBOARD DO CLIENTE (#p-conta) ════════════════════════════════════════════════════════════════════════════ */ #p-conta .exec-adm-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; align-items: start; } #p-conta .exec-adm-side { background: #FFFFFF; border: 1px solid var(--exec-line); border-radius: 15px; overflow: hidden; box-shadow: var(--exec-shadow); position: sticky; top: 84px; min-width: 0; } .exec-adm-user { background: var(--exec-navy); color: #FFFFFF; padding: 18px 18px 16px; } .exec-adm-user-row { display: flex; align-items: center; gap: 11px; } .exec-adm-avatar { width: 38px; height: 38px; border-radius: 9px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); color: #FFFFFF; font: 700 13px/1 'Sora', sans-serif; display: grid; place-items: center; flex-shrink: 0; } .exec-adm-user b { display: block; font: 700 14px/1.25 'Sora', sans-serif; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exec-adm-user small { display: block; font-size: 11.5px; color: #CBD5E1; margin-top: 2px; } .exec-adm-nav { padding: 8px; display: grid; gap: 3px; } .exec-adm-btn { width: 100%; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 'Inter', sans-serif; color: var(--exec-slate); cursor: pointer; text-align: left; transition: background 0.14s, color 0.14s; } .exec-adm-btn:hover { background: #F8FAFC; color: var(--exec-navy); } .exec-adm-btn.on { background: var(--exec-ind-bg); color: var(--exec-indigo); } .exec-adm-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .exec-adm-btn .exec-cnt { margin-left: auto; padding: 2px 7px; border-radius: 99px; font: 700 11px/1.2 'Inter', sans-serif; background: #F1F5F9; color: var(--exec-navy); } .exec-adm-btn.on .exec-cnt { background: var(--exec-indigo); color: #FFFFFF; } .exec-adm-btn.exec-sair { margin-top: 4px; border-top: 1px solid var(--exec-line); border-radius: 0 0 8px 8px; padding-top: 12px; color: #64748B; } #p-conta .exec-adm-main { min-width: 0; } /* No PC usamos a sidebar executiva; as abas originais continuam no DOM p/ compatibilidade */ @media (min-width: 960px) { #p-conta .exec-adm-shell .sec-h, #p-conta .exec-adm-shell .tabs { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; } } @media (max-width: 959px) { #p-conta .exec-adm-shell { grid-template-columns: 1fr; gap: 14px; } #p-conta .exec-adm-side { position: static; } .exec-adm-nav { display: flex; overflow-x: auto; gap: 6px; padding: 8px 10px; scrollbar-width: none; } .exec-adm-nav::-webkit-scrollbar { display: none; } .exec-adm-btn { width: auto; white-space: nowrap; flex-shrink: 0; padding: 8px 12px; } .exec-adm-btn.exec-sair { margin-top: 0; border-top: 0; padding-top: 8px; } #p-conta .exec-adm-shell .sec-h, #p-conta .exec-adm-shell .tabs { display: none !important; } } .exec-pane-hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .exec-pane-hdr h2 { font: 700 20px/1.25 'Sora', sans-serif; color: var(--exec-navy); margin: 0; } .exec-pane-hdr p { font-size: 13px; color: var(--exec-muted); margin: 3px 0 0; } /* KPIs Executivos da Aba Resumo */ #p-conta .dash-num { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 16px !important; } #p-conta .dash-num .dn { grid-column: span 1 !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-left: 3px solid var(--exec-navy) !important; border-radius: 12px !important; padding: 16px !important; box-shadow: var(--exec-shadow) !important; min-width: 0; } #p-conta .dash-num .dn.dn-alerta { border-left-color: #D97706 !important; background: #FFFDF7 !important; } #p-conta .dash-num .dn b { display: block; font: 700 22px/1.15 'Sora', sans-serif !important; color: var(--exec-navy) !important; font-variant-numeric: tabular-nums; margin-bottom: 4px !important; } #p-conta .dash-num .dn-rot { display: block; font: 600 12px/1.3 'Inter', sans-serif !important; color: var(--exec-ink) !important; } #p-conta .dash-num .dn-sub { display: block; font-size: 11.5px !important; color: var(--exec-muted) !important; margin-top: 2px !important; } @media (max-width: 720px) { #p-conta .dash-num { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 400px) { #p-conta .dash-num .dn b { font-size: 18px !important; } #p-conta .dash-num .dn { padding: 13px 12px !important; } } /* Banner de recuperação de carrinho sΓ³brio (sem rosa berrante) */ #p-conta .card-carrinho { background: #FFFFFF !important; border: 1px solid var(--exec-line-strong) !important; border-left: 4px solid var(--exec-indigo) !important; border-radius: 12px !important; padding: 14px 16px !important; box-shadow: var(--exec-shadow) !important; } #p-conta .card-carrinho b { color: var(--exec-navy) !important; } #p-conta .card-carrinho span { color: var(--exec-slate) !important; } /* CartΓ΅es de Pedido + Stepper Horizontal de 5 etapas */ #p-conta .order { background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 14px !important; padding: 20px !important; box-shadow: var(--exec-shadow) !important; margin-bottom: 14px !important; } #p-conta .order .top b { font: 700 15px/1.2 'Sora', monospace !important; color: var(--exec-navy) !important; font-variant-numeric: tabular-nums; } @media (min-width: 681px) { #p-conta .order .tlv { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; margin: 16px 0 6px !important; padding: 12px 14px !important; background: #F8FAFC !important; border: 1px solid var(--exec-line) !important; border-radius: 10px !important; } #p-conta .order .tlv .p { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--exec-muted) !important; padding: 0 !important; border: 0 !important; } #p-conta .order .tlv .p::before { display: none !important; } #p-conta .order .tlv .p .dot { position: static !important; inset: auto !important; margin: 0 !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #CBD5E1 !important; flex-shrink: 0 !important; } #p-conta .order .tlv .p.done { color: var(--exec-navy) !important; } #p-conta .order .tlv .p.done .dot { background: var(--exec-ok-ink) !important; box-shadow: 0 0 0 3px #D1FAE5 !important; } } /* Carrinho e conta aprovados: integrado neste CSS canΓ΄nico, sem camada nova. */ #p-pedido .exec-aceite-resumo { background:#ffffff0d; display:flex; gap:10px; align-items:flex-start; border:1px solid #ffffff26; border-radius:10px; padding:12px; margin-bottom:14px; color:#e2e8f0; font-size:12px; line-height:1.55; cursor:pointer; } #p-pedido .exec-aceite-resumo a { color:white !important; text-decoration:underline; } #p-pedido .exec-cta-stack .btn-b { background:#fff !important; color:var(--exec-navy) !important; border-color:#fff !important; } #p-pedido .exec-cta-stack .btn-w { background:transparent !important; color:#fff !important; border-color:#ffffff66 !important; } #p-conta .exec-conta-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 20px; } #p-conta .exec-conta-stats>div { background:#fff; border:1px solid var(--exec-line); border-radius:14px; padding:18px; min-width:0; } #p-conta .exec-conta-stats b { display:block; font:700 25px/1.3 Sora,sans-serif; color:var(--exec-navy); } #p-conta .exec-conta-stats span { display:block; font-size:12px; line-height:1.5; color:var(--exec-muted); } #p-conta .exec-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; padding:12px; border:1px solid var(--exec-line); border-radius:12px; background:#faf8f3; } #p-conta .exec-status-grid div { min-width:0; overflow-wrap:anywhere; } #p-conta .exec-status-grid small { display:block; color:var(--exec-muted); font-size:11px; } #p-conta .exec-status-grid b { display:block; font-size:12px; color:var(--exec-navy); margin-top:5px; line-height:1.5; } #p-conta .exec-order-next { background:#eeedf8; border-radius:10px; padding:12px 14px; font-size:12px; line-height:1.55; color:var(--exec-indigo); margin:14px 0; } #p-conta .exec-fin-status { display:inline-flex; border-radius:7px; padding:6px 9px; font-size:10px; font-weight:700; color:#626b79; background:#f0f1f3; } #p-conta .exec-fin-status.pago { color:#16744b; background:#e8f5ec; } #p-conta .exec-fin-status.pendente { color:#8a5b16; background:#fff4db; } #p-conta .exec-order-filter { display:grid; gap:6px; margin:0 0 16px; font-size:12px; } #p-conta .exec-order-filter select { border:1px solid var(--exec-line); background:#fff; border-radius:10px; padding:11px; color:var(--exec-navy); max-width:320px; } #p-conta .tabs { gap:8px; flex-wrap:wrap; } #p-conta .tabs button { border-radius:11px; border:1px solid var(--exec-line); background:#fff; } #p-conta .tabs button.on { background:var(--exec-indigo); border-color:var(--exec-indigo); color:#fff; } @media(max-width:680px) { #p-conta .exec-conta-stats { gap:7px; } #p-conta .exec-conta-stats>div { padding:12px 9px; } #p-conta .order .top { flex-wrap:wrap; gap:10px; } #p-conta .exec-row-actions .btn { min-height:42px; } } /* Tabela Executiva de Envios (#p-conta aba Envios β€” Correção image-1.png) */ .exec-tbl-wrap { width: 100%; min-width: 0; overflow-x: auto; background: #FFFFFF; border: 1px solid var(--exec-line); border-radius: 14px; box-shadow: var(--exec-shadow); } .exec-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .exec-tbl th { text-align: left; padding: 12px 16px; background: #F8FAFC; border-bottom: 1px solid var(--exec-line); font: 700 11px/1.2 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--exec-slate); white-space: nowrap; } .exec-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--exec-line); color: var(--exec-ink); vertical-align: middle; } .exec-tbl tbody tr:last-child td { border-bottom: 0; } .exec-tbl .exec-cod { font: 700 13px/1.2 'Sora', monospace; color: var(--exec-navy); white-space: nowrap; } .exec-tbl .exec-actions-cell { text-align: right; white-space: nowrap; } .exec-tbl .exec-row-actions { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 8px !important; flex-wrap: nowrap; } @media (max-width: 680px) { .exec-tbl thead { display: none; } .exec-tbl, .exec-tbl tbody, .exec-tbl tr, .exec-tbl td { display: block; width: 100%; } .exec-tbl tr { padding: 14px 16px; border-bottom: 1px solid var(--exec-line); } .exec-tbl tr:last-child { border-bottom: 0; } .exec-tbl td { padding: 4px 0; border: 0; text-align: left !important; white-space: normal !important; } .exec-tbl .exec-actions-cell { margin-top: 10px; } .exec-tbl .exec-row-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } } /* Aba Dados Cadastrais & EndereΓ§os em largura total executiva (2 colunas no PC) */ #p-conta #aba-corpo .card { max-width: 100% !important; width: 100% !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 14px !important; padding: 24px !important; box-shadow: var(--exec-shadow) !important; box-sizing: border-box !important; } #p-conta #bloco-end > .head-end ~ h2, #p-conta #bloco-end > .head-end ~ p.sub { display: none !important; } #p-conta .exec-dados-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(300px, 1fr); gap: 20px; align-items: start; } @media (min-width: 681px) { #p-conta .exec-dados-grid .crm-grid .f:has(#md-email), #p-conta .exec-dados-grid .crm-grid .f:has(#md-site), #p-conta .exec-dados-grid .crm-grid .f:has(#md-notes) { grid-column: span 12 !important; } #p-conta .exec-dados-grid .crm-grid .f:has(#md-whats), #p-conta .exec-dados-grid .crm-grid .f:has(#md-sec), #p-conta .exec-dados-grid .crm-grid .f:has(#md-contato-nome), #p-conta .exec-dados-grid .crm-grid .f:has(#md-contato-cargo), #p-conta .exec-dados-grid .crm-grid .f:has(#md-optout), #p-conta .exec-dados-grid .crm-grid .f:has(#md-mkt) { grid-column: span 6 !important; } #p-conta .exec-dados-grid .crm-grid .f:has(#nd-cep) { grid-column: span 4 !important; } #p-conta .exec-dados-grid .crm-grid .f:has(#nd-rua) { grid-column: span 5 !important; } #p-conta .exec-dados-grid .crm-grid .f:has(#nd-numero) { grid-column: span 3 !important; } } #p-conta .exec-dados-grid .f:has(input[type="checkbox"]) label { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--exec-navy) !important; cursor: pointer; } #p-conta .exec-dados-grid .f input[type="checkbox"] { width: 17px !important; height: 17px !important; margin: 0 !important; flex-shrink: 0 !important; accent-color: var(--exec-navy); } @media (max-width: 1020px) { #p-conta .exec-dados-grid { grid-template-columns: 1fr; } } #p-conta .exec-dados-grid > * { min-width: 0; } #p-conta .crm-sec { font: 700 11.5px/1.3 'Sora', sans-serif !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--exec-navy) !important; padding-bottom: 6px !important; border-bottom: 1px solid var(--exec-line) !important; margin-top: 14px !important; } /* Destaque sΓ³brio para "Como nos conheceu?" (sem rosa choque) */ #p-conta .campo-origem { background: #F8FAFC !important; border: 1px solid var(--exec-line-strong) !important; border-left: 3px solid var(--exec-indigo) !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 0 0 14px !important; } #p-conta .campo-origem label { display: block !important; color: var(--exec-navy) !important; font: 700 12px/1.3 'Inter', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 6px !important; } #p-conta .campo-origem select { border-color: var(--exec-line-strong) !important; background: #FFFFFF !important; font-weight: 600 !important; } #p-conta .origem-nota { color: var(--exec-muted) !important; font-size: 11.5px !important; } #p-conta .bloco-end { margin-top: 0 !important; border-top: 0 !important; padding: 22px !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 14px !important; box-shadow: var(--exec-shadow) !important; } #p-conta .end-card { border: 1px solid var(--exec-line) !important; border-radius: 12px !important; padding: 14px 16px !important; background: #FFFFFF !important; } #p-conta .end-card.e-padrao { border-color: var(--exec-indigo) !important; background: #FCFCFF !important; } #p-conta .e-ref { display: block; margin-top: 3px; font-size: 12px; color: var(--exec-slate); } /* ════════════════════════════════════════════════════════════════════════════ 3. CARRINHO & CHECKOUT EM 2 COLUNAS (#p-pedido) ════════════════════════════════════════════════════════════════════════════ */ #p-pedido .wrap.corpo { max-width: 1200px !important; } #p-pedido .exec-ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 28px; align-items: start; } #p-pedido .exec-ck-main, #p-pedido .exec-ck-aside { min-width: 0; } #p-pedido .exec-ck-aside { position: sticky; top: 84px; } #p-pedido .exec-ck-card { background: #FFFFFF; border: 1px solid var(--exec-line); border-radius: 14px; padding: 22px; box-shadow: var(--exec-shadow); margin-bottom: 16px; } #p-pedido .exec-ck-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--exec-line); } #p-pedido .exec-ck-card-hd h3 { font: 700 15.5px/1.3 'Sora', sans-serif; color: var(--exec-navy); margin: 0; } #p-pedido .exec-ck-card-hd span { font-size: 12px; color: var(--exec-muted); } #p-pedido .exec-print-sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid #d8d5f1; border-radius: 10px; background: #f7f6ff; color: #29265d; font-size: 12px; } #p-pedido .exec-print-sheets span { color: #575470; } #p-pedido .ci { display: grid !important; grid-template-columns: 68px minmax(0, 1fr) auto !important; gap: 14px !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 10px !important; align-items: start !important; } #p-pedido .ci:last-child { margin-bottom: 0 !important; } #p-pedido .ci .th { width: 68px !important; height: 68px !important; border-radius: 10px !important; background: #F8FAFC !important; border: 1px solid var(--exec-line) !important; overflow: hidden !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } #p-pedido .ci .th img.ci-ph { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #p-pedido .ci .val { font: 700 15px/1.2 'Sora', sans-serif !important; color: var(--exec-navy) !important; font-variant-numeric: tabular-nums; } /* No celular, linhas de um mesmo arquivo precisam de espaΓ§o para o protocolo e para os controles sem comprimir o texto entre foto e preΓ§o. */ @media (max-width: 480px) { #p-pedido .ci.ci-impressao { grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 8px !important; } #p-pedido .ci.ci-impressao .th { width: 52px !important; height: 52px !important; } #p-pedido .ci.ci-impressao small { overflow-wrap: anywhere; } #p-pedido .ci.ci-impressao > .val { grid-column: 2; margin-left: 0 !important; } } .exec-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .exec-mode-btn { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 68px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--exec-line-strong); background: #FFFFFF; color: var(--exec-slate); font: 600 13.5px/1.3 'Inter', sans-serif; cursor: pointer; text-align: left; } .exec-mode-btn b { display: block; color: var(--exec-navy); font-size: 13.5px; margin-bottom: 2px; } .exec-mode-btn small { display: block; font-size: 11.5px; color: var(--exec-muted); font-weight: 500; } .exec-mode-btn.on { border-color: var(--exec-indigo); background: #FCFCFF; box-shadow: 0 0 0 3px rgba(59, 58, 150, 0.1); } .exec-addr-preview { background: #F8FAFC; border: 1px solid var(--exec-line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--exec-ink); } .exec-addr-preview b { color: var(--exec-navy); } .exec-addr-preview .exec-ref-line { color: var(--exec-indigo); font-weight: 600; } .exec-inline-addr { background: #F8FAFC; border: 1px solid var(--exec-line-strong); border-radius: 12px; padding: 16px; margin-top: 12px; } .exec-inline-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .exec-inline-grid .f { margin: 0 !important; min-width: 0; } .exec-c2 { grid-column: span 2; } .exec-c3 { grid-column: span 3; } .exec-c4 { grid-column: span 4; } .exec-c5 { grid-column: span 5; } .exec-c6 { grid-column: span 6; } .exec-c8 { grid-column: span 8; } .exec-c9 { grid-column: span 9; } .exec-c12 { grid-column: span 12; } @media (max-width: 680px) { .exec-mode-tabs { grid-template-columns: 1fr; } .exec-c2, .exec-c3, .exec-c4, .exec-c5, .exec-c6, .exec-c8, .exec-c9 { grid-column: span 12; } } /* Resumo lateral executivo (sem triplicar Pix 5%) */ #p-pedido .exec-sum-box { background: var(--exec-navy); border: 1px solid var(--exec-navy); border-radius: 14px; overflow: hidden; box-shadow: var(--exec-shadow); } #p-pedido .exec-sum-top { background: var(--exec-navy); color: #FFFFFF; padding: 16px 20px; } #p-pedido .exec-sum-top h3 { font: 700 15px/1.25 'Sora', sans-serif; margin: 0; color: #FFFFFF; } #p-pedido .exec-sum-top small { display: block; font-size: 11.5px; color: #CBD5E1; margin-top: 2px; } #p-pedido .exec-sum-body { padding: 18px 20px 20px; } #p-pedido .exec-sum-body .sum { margin: 0 0 14px !important; padding: 14px 16px !important; background: transparent !important; border: 1px solid #FFFFFF26 !important; border-radius: 12px !important; box-shadow: none !important; color: #FFFFFF !important; } #p-pedido .exec-sum-body .sum::before, #p-pedido .exec-sum-body .sum::after { display: none !important; content: none !important; } #p-pedido .exec-sum-body .sum .row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 8px !important; font-size: 13px !important; color: #E2E8F0 !important; padding: 4px 0 !important; } #p-pedido .exec-sum-body .sum .row span:last-child { font-weight: 600 !important; color: #FFFFFF !important; font-variant-numeric: tabular-nums; } #p-pedido .exec-sum-body .sum .tot { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 8px !important; margin-top: 8px !important; padding-top: 10px !important; border-top: 1px solid #FFFFFF40 !important; font: 700 15.5px/1.25 'Sora', sans-serif !important; color: #FFFFFF !important; font-variant-numeric: tabular-nums; } #p-pedido .exec-sum-body .sum .tot span { color: #FFFFFF !important; } #p-pedido .exec-pay-clean { background: #FFFFFF0D; border: 1px solid #FFFFFF26; border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; font-size: 12.2px; line-height: 1.45; color: #E2E8F0; } #p-pedido .exec-pay-clean b { display: block; color: #FFFFFF; margin-bottom: 2px; } #p-pedido .exec-cta-stack { display: grid; gap: 8px; } #p-pedido .exec-cta-stack .btn { width: 100%; justify-content: center; } @media (max-width: 960px) { #p-pedido .exec-ck-layout { grid-template-columns: 1fr; } #p-pedido .exec-ck-aside { position: static; } } /* ════════════════════════════════════════════════════════════════════════════ 4. DEMAIS PÁGINAS INTERNAS (#p-atendimento, #p-montador, #p-gabaritos, #p-paginas) ════════════════════════════════════════════════════════════════════════════ */ /* #p-atendimento β€” CabeΓ§alho corporativo sΓ³brio */ #p-atendimento .at-hero { background: linear-gradient(165deg, var(--exec-navy) 0%, var(--exec-navy-2) 100%) !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 12px 28px rgba(8, 32, 64, 0.12) !important; } #p-atendimento .at-hero .blob { display: none !important; } /* #p-montador β€” Correção de contraste no card direito e cabeΓ§alho Cartela A4 */ #p-montador .mont-stage-label { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 4px 10px !important; min-width: 0 !important; } #p-montador .mont-stage-label span, #p-montador .mont-stage-label b { max-width: 100%; overflow-wrap: anywhere; } #p-montador aside.bprev.mont-preview { color: var(--exec-ink) !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; } #p-montador aside.bprev.mont-preview .mont-kpi-dark { background: var(--exec-navy) !important; color: #FFFFFF !important; border-radius: 12px !important; } #p-montador aside.bprev.mont-preview .mont-kpi-dark small, #p-montador aside.bprev.mont-preview .mont-kpi-dark span { color: #E2E8F0 !important; } #p-montador aside.bprev.mont-preview .mont-kpi-dark strong { color: #FFFFFF !important; } #p-montador #montador-resumo, #p-montador #montador-resumo span, #p-montador #montador-resumo small, #p-montador #montador-resumo p, #p-montador #montador-resumo label { color: var(--exec-ink) !important; } #p-montador .mont-preview-top { color: var(--exec-slate) !important; } #p-montador .mont-preview-top b { color: #059669 !important; } #p-montador aside.bprev.mont-preview .mont-contact { border-top-color: var(--exec-line) !important; } #p-montador aside.bprev.mont-preview .mont-contact-head, #p-montador aside.bprev.mont-preview .mont-contact-head b { color: var(--exec-navy) !important; } #p-montador aside.bprev.mont-preview .mont-contact-head small, #p-montador aside.bprev.mont-preview .mont-contact small, #p-montador aside.bprev.mont-preview .mont-contact p, #p-montador aside.bprev.mont-preview .mont-contact-manual-note, #p-montador aside.bprev.mont-preview .mont-file-hint { color: var(--exec-slate) !important; } #p-montador aside.bprev.mont-preview .f label { color: var(--exec-navy) !important; font-weight: 700 !important; font-size: 11.5px !important; } #p-montador aside.bprev.mont-preview .f input { background: #FFFFFF !important; border: 1.5px solid var(--exec-line-strong) !important; color: var(--exec-ink) !important; } #p-montador aside.bprev.mont-preview .mont-gabarito { background: #F8FAFC !important; color: var(--exec-navy) !important; border: 1px solid var(--exec-line-strong) !important; } #p-montador aside.bprev.mont-preview .mont-gabarito:hover { background: #F1F5F9 !important; } #p-montador aside.bprev.mont-preview .mont-price-loading, #p-montador aside.bprev.mont-preview .mont-price-consult { border-color: var(--exec-line-strong) !important; color: var(--exec-slate) !important; } #p-montador aside.bprev.mont-preview .mont-price-consult small { color: var(--exec-muted) !important; } #p-montador aside.bprev.mont-preview .mont-contact a { color: var(--exec-indigo) !important; font-weight: 600 !important; text-decoration: underline; } /* #p-gabaritos β€” Alinhamento na rΓ©gua Ξ” = 0px nos botΓ΅es */ #p-gabaritos .gabs { align-items: stretch !important; } #p-gabaritos .gab { display: flex !important; flex-direction: column !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-radius: 14px !important; padding: 20px !important; box-shadow: var(--exec-shadow) !important; } #p-gabaritos .gab p { flex: 1 1 auto !important; margin-bottom: 14px !important; } #p-gabaritos .gab .dl { margin-top: auto !important; padding-top: 8px; } #p-gabaritos .exec-dica-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; flex-wrap: wrap !important; background: #FFFFFF !important; border: 1px solid var(--exec-line) !important; border-left: 4px solid var(--exec-navy) !important; border-radius: 12px !important; padding: 16px 20px !important; } #p-gabaritos .exec-dica-bar b { display: block; color: var(--exec-navy); margin-bottom: 2px; } #p-gabaritos .exec-dica-bar span { font-size: 13px; color: var(--exec-slate); } /* #p-paginas β€” Menu em pΓ­lulas horizontais no Tablet/Celular */ @media (max-width: 900px) { #p-paginas .doc-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } #p-paginas .doc-lista { display: flex !important; flex-direction: row !important; overflow-x: auto !important; gap: 6px !important; padding: 4px 2px 8px !important; min-width: 0 !important; scrollbar-width: none; } #p-paginas .doc-lista::-webkit-scrollbar { display: none; } #p-paginas .doc-lista a { flex: 0 0 auto !important; white-space: nowrap !important; border-radius: 99px !important; padding: 8px 13px !important; border: 1px solid var(--exec-line-strong) !important; background: #FFFFFF !important; font-size: 12.5px !important; } #p-paginas .doc-lista a.on { background: var(--exec-navy) !important; border-color: var(--exec-navy) !important; color: #FFFFFF !important; } } /* Mobile: show every legal destination without requiring an undiscoverable horizontal swipe through a scrollbar-hidden row. */ @media (max-width: 520px) { #p-paginas .doc-lista { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; gap: 6px !important; padding: 4px 0 8px !important; } #p-paginas .doc-lista a { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: initial !important; min-height: 48px !important; white-space: normal !important; overflow-wrap: anywhere !important; justify-content: flex-start !important; line-height: 1.3 !important; text-align: left !important; padding: 9px 10px !important; border-radius: 12px !important; } } /* Tablet/touch widths: replace the same hidden horizontal strip with a three-column grid so every legal destination remains visible. */ @media (min-width: 521px) and (max-width: 960px) { #p-paginas .doc-lista { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; gap: 8px !important; padding: 4px 0 8px !important; } #p-paginas .doc-lista a { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: initial !important; min-height: 48px !important; white-space: normal !important; overflow-wrap: anywhere !important; justify-content: flex-start !important; line-height: 1.3 !important; text-align: left !important; padding: 10px 12px !important; border-radius: 12px !important; } } /*wa-tabbar.css*/ /* Small, scoped styles for the persistent WhatsApp destination in the mobile tab bar. */ @media (max-width: 960px) { #tabbar-m > a.tabbar-wa { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 1px; border-radius: 10px; color: #16814a; font: 700 9px/1.1 Inter, system-ui, sans-serif; text-align: center; text-decoration: none; white-space: nowrap; } #tabbar-m > a.tabbar-wa:hover, #tabbar-m > a.tabbar-wa:focus-visible { background: #effbf4; } #tabbar-m > a.tabbar-wa:focus-visible { outline: 2px solid #16814a; outline-offset: -2px; } #tabbar-m > a.tabbar-wa .tabbar-wa-icon, #tabbar-m > a.tabbar-wa .tabbar-wa-icon svg { display: block; width: 17px; height: 17px; color: #20a45b; flex: 0 0 auto; } #tabbar-m > a.tabbar-wa .tabbar-wa-label { display: block; max-width: 100%; overflow: hidden; text-overflow: clip; font: inherit; line-height: 1.1; } }