/*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} }

/*ajustes-615.css*/
/* ══════════════════════════════════════════════════════════════════════
   VTDigital — portal do cliente · ajustes da versão 6.15.0
   Camada isolada: nada aqui reescreve regra existente de forma destrutiva.
   Para desfazer, basta remover este arquivo e as duas linhas de include
   nas páginas (index.html, fotos.html, polaroid.html).
   Nenhum preço, formato, kit ou regra de negócio é tocado.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. FOTOS · o botão rosa sai de cena ──────────────────────────────
   Era o único rosa do site (--pink), no meio do navy e do azul da casa.
   Passa a usar o azul do portal, com o mesmo hover de sempre. */
.btn.btn-f{background:var(--brand)}
.btn.btn-f:hover{background:#0a6ea3}

/* ── 2. FOTOS · pílulas de formato no celular ─────────────────────────
   Em tela estreita elas quebravam em três linhas tortas. Viram grade de
   duas colunas e o rótulo passa a caber inteiro. */
@media (max-width:680px){
  .ft-banner-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ft-banner-pills .ft-pill{width:100%;text-align:center;white-space:normal;
    line-height:1.25;padding:8px 6px}
}

/* ── 3. RESUMO FLUTUANTE (fotos e adesivos) ───────────────────────────
   Só no celular: o total do pedido costumava ficar no fim de uma página
   longa. Uma pastilha discreta mostra o resumo e leva até ele. */
.jx-chip{display:none;position:fixed;left:50%;transform:translateX(-50%);
  bottom:14px;z-index:80;align-items:center;gap:10px;
  max-width:calc(100vw - 96px);padding:11px 16px;border:0;border-radius:999px;
  background:var(--ink,#082040);color:#fff;cursor:pointer;
  font:700 13px/1 Inter,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 14px 34px -12px rgba(8,32,64,.6)}
.jx-chip.show{display:inline-flex}
.jx-chip .jx-t{overflow:hidden;text-overflow:ellipsis}
.jx-chip .jx-go{font-weight:800;color:#7fd4ff}
body.jx-com-chip{padding-bottom:74px}
@media (min-width:901px){.jx-chip{display:none !important}}

/* ── 4. POLAROID · cartão do kit preenche o quadro ────────────────────
   A arte dos kits é 1200×515 (2,33:1) e a moldura do cartão era 150 px
   de altura numa largura de ~380 px (2,53:1) — comia a borda da cena.
   A moldura passa a ter exatamente a proporção da arte. */
.pol-kit .ph{height:auto;aspect-ratio:1200/515}

/* ── 5. POLAROID · slots do kit no celular ────────────────────────────
   Quatro quadros em 4:5 ocupavam quase duas telas. Quadrados, eles
   continuam mostrando a foto inteira e o total volta a caber na tela. */
@media (max-width:680px){
  .pol-slot{aspect-ratio:1/1}
  .pol-slots{gap:8px}
}

/* ── 6. POLAROID · trilha curta do construtor ─────────────────────────
   Só informa em que passo o cliente está. Não trava, não bloqueia. */
.jx-trilha{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px;padding:0;list-style:none}
.jx-trilha li{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--line,#e9e2d8);color:#5a6472;
  font:600 11.5px/1 Inter,system-ui,sans-serif}
.jx-trilha li b{font-family:inherit;font-weight:800;color:#0f3f7a}
.jx-trilha li.on{background:#eef6fc;border-color:#bfe0f4;color:#0f3f7a}
.jx-trilha li.done{background:#eaf7f0;border-color:#cfe6d8;color:#16794a}
.jx-trilha li .jx-n{font-weight:800}

/* pílula com nome em cima e preço embaixo — altura igual para todas */
.ft-banner-pills .ft-pill b.jx-preco{display:block;margin-top:2px}
@media (max-width:680px){
  .ft-banner-pills .ft-pill{display:flex;flex-direction:column;justify-content:center;
    min-height:44px;padding:7px 6px}
}

/*ajustes-616.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-616.css — a home do cliente depois do rabisco de 18/10/2026

   Camada por cima do pacote, do mesmo jeito que a ajustes-615: não mexe
   no app.js minificado nem no estilos.css. Para desfazer, apague este
   arquivo, o ajustes-616.js e as linhas de include nas páginas.

   Ajustes aqui (os 6 aprovados como baratos):
     1  título do herói sem o "pisca" de texto trocando
     3  barra de cookies em 1 linha
     4  nome do produto inteiro no card da vitrine
     6  "Onde está meu pedido?" sai da vitrine e vai para o topo
     7  preço visível na primeira tela do celular
     9  aviso de preço da vitrine em 1 linha

   Os ajustes 2, 5 e 8 (estrutura da vitrine) NÃO estão aqui: eles mexem
   no peso da página e vão ser mostrados em duas versões antes de decidir.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. herói: o texto troca sem "pisca" ─────────────────────────────
   O pacote abre com uma frase e o app troca pelo texto do painel quando
   a configuração do ERP chega. Medi os dois lados: o site no ar mudou
   de frase entre uma visita e outra no mesmo dia — ou seja, a troca não
   é rara, é o comportamento normal.

   A cura de verdade é fonte única (o pacote nascer com o texto do
   painel), e isso é mudança de build, não de camada. Aqui eu faço o que
   dá sem mexer no app.js: a troca acontece, mas suave — 180 ms de
   esmaecimento, sem pulo de linha.

   Tentei antes esconder o título até o texto do ERP chegar. Descartei:
   em rede lenta o herói ficava 2,1 s em branco, e herói em branco é
   pior que herói que troca de frase. */
#hero-titulo, #hero-sub {
  transition: opacity .18s ease;
}
html.jx-hero-trocando #hero-titulo,
html.jx-hero-trocando #hero-sub { opacity: .35; }

/* ── 7. preço na primeira tela ────────────────────────────────────────
   O primeiro preço da home ficava a 876 px numa tela de 844 px: nenhum
   preço na primeira dobra. Este selo mostra o menor preço REAL do
   catálogo — se o catálogo não carregar, ele simplesmente não aparece. */
.jx-ck-curta { display: none; }

.jx-hero-preco {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf3fa;
  font-size: 13.5px;
  line-height: 1.2;
}
.jx-hero-preco b { color: #fff; font-size: 15px; font-weight: 800; }
.jx-hero-preco .jx-hp-de { color: #9fc3dd; font-size: 12px; text-transform: lowercase; }
@media (max-width: 680px) {
  .jx-hero-preco { font-size: 12.5px; padding: 5px 10px; gap: 6px; }
  .jx-hero-preco b { font-size: 13.5px; }
}

/* ── 3. barra de cookies em 1 linha ───────────────────────────────────
   Com 98 px ela cobria 2 dos 5 cards no desktop e ~12% da tela no
   celular, e só saía se o cliente clicasse. Vira faixa fina. */
.cookie-bar {
  padding: 7px 14px !important;
  align-items: center !important;
  gap: 10px !important;
}
.cookie-bar p {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cookie-bar p b { font-weight: 700; }
.cookie-bar .cookie-bts { flex: 0 0 auto; gap: 6px !important; }
.cookie-bar .cookie-bts .btn {
  padding: 4px 11px !important;
  font-size: 12px !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
}
/* No celular a conta é mais dura: cada pixel fixo é produto que o
   cliente não vê. Aqui a faixa fica em UMA linha — o texto encurta com
   reticência, o link da Política e os dois botões nunca encolhem. */
@media (max-width: 680px) {
  /* nowrap é o que impede os botões de caírem para a linha de baixo:
     sem isso a faixa fica com 56 px em vez de ~30 px. */
  .cookie-bar { padding: 5px 9px !important; gap: 7px !important; flex-wrap: nowrap !important; }
  .cookie-bar p {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: visible;
  }
  .cookie-bar p .jx-ck-long { display: none; }
  .cookie-bar p .jx-ck-curta { display: inline; }
  .cookie-bar p .jx-ck-txt { margin-right: 4px; }
  .cookie-bar p .jx-ck-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cookie-bar p a { flex: 0 0 auto; white-space: nowrap; }
  .cookie-bar .cookie-bts { gap: 5px !important; }
  .cookie-bar .cookie-bts .btn {
    padding: 3px 7px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
  }
  /* "Só essenciais" vira "Essenciais": 12 px a menos de largura fixa */
  .cookie-bar .cookie-bts .btn-o { font-size: 0 !important; }
  .cookie-bar .cookie-bts .btn-o::after { content: "Essenciais"; font-size: 11px; }
}

/* ── 4. nome do produto inteiro ───────────────────────────────────────
   O app corta o nome em 28 caracteres ("Bolinha de Natal em Acrílico…").
   Nome é exatamente o que o cliente procura. Aqui o card ganha duas
   linhas de 13,5 px e só corta depois da segunda. */
#grid-inicio .prod .bd > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px !important;
  line-height: 1.28 !important;
  min-height: 2.56em;      /* reserva as 2 linhas: os cards alinham */
  word-break: break-word;
}

/* ── 6. "Onde está meu pedido?" no topo ───────────────────────────────
   Ele ocupava o mesmo espaço de um produto na vitrine de entrada. É
   serviço, não vitrine. Vira link discreto no topo e o grid volta a ter
   4 portas de produto. */
.jx-rastreio-topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 9px;
  color: #0d2740;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.jx-rastreio-topo:hover { background: var(--brand-soft); color: var(--brand); }
.jx-rastreio-topo svg { flex: 0 0 auto; }
/* abaixo de 900 px o topo já está cheio: esconde da barra e deixa na tabbar */
@media (max-width: 900px) { .jx-rastreio-topo { display: none; } }

/* o card azul ("Onde está meu pedido?") sai da vitrine: o JS só o marca,
   o CSS esconde. Se o JS não rodar, o card continua lá — nada desaparece
   por acidente. */
.jx-mission-blue-movido { display: none !important; }

/* ── 9. aviso de preço em 1 linha ─────────────────────────────────────
   O pacote limita o aviso a 600 px, o que o joga em 2 linhas mesmo no
   desktop com 1.200 px livres. Aqui o limite sobe o suficiente para a
   frase caber inteira numa linha, sem mexer no texto.
   No celular não há largura para tanta palavra: entra uma redação curta
   (o CSS escolhe), e a promessa continua dita — "o final confirmamos no
   WhatsApp" — em vez de reticência no meio da frase. */
#home-destaques .intro { max-width: 860px !important; }
.jx-aviso-curto { display: none; }

@media (max-width: 680px) {
  #home-destaques .intro { max-width: 100% !important; font-size: 11.5px !important; line-height: 1.35 !important; }
  .jx-aviso-longo { display: none; }
  .jx-aviso-curto { display: inline; }
}

/*ajustes-617.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-617.css — segunda revisão da home (18/10/2026, à noite)

   Camada por cima do 6.16.0, do mesmo jeito que as anteriores: não mexe
   no app.js nem no estilos.css. Para desfazer, apague este arquivo, o
   ajustes-617.js e as linhas de include nas páginas.

   O que entrou aqui, decidido pelo dono em 18/10:
     A. os três passos do herói ficam mais fortes (variante B do rabisco)
     B. o selo do Google vira "um por vez", girando
     C. o bloco de avaliações vira "um por vez", com setas e bolinhas
     D. o cartão da nota do Google cabe em duas linhas
   ════════════════════════════════════════════════════════════════════ */

/* ── A. os três passos, mais fortes ───────────────────────────────────
   Não era contraste (medi 14,2:1 no título e 7,9:1 na descrição — muito
   acima da norma). Era hierarquia: cinza sobre azul, sem peso, o olho
   passa direto. Aqui o fundo ganha corpo, o título cresce e a descrição
   clareia. O número vira o ponto de ancoragem da leitura. */
#passos .passo,
.hm-passos .passo {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}
#passos .passo b,
.hm-passos .passo b {
  font-size: 15.5px !important;
  letter-spacing: .1px;
}
#passos .passo span:not(.p-n),
.hm-passos .passo span:not(.p-n) {
  font-size: 13.5px !important;
  color: #eaf2fb !important;
  line-height: 1.45 !important;
}
#passos .p-n,
.hm-passos .p-n {
  width: 38px !important;
  height: 38px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: #fbbf24 !important;
  color: #3b2a00 !important;
  border: 0 !important;
}
/* o número cresceu: a coluna do card precisa acompanhar, senão o texto
   encosta nele no celular */
@media (max-width: 900px) {
  #passos .passo,
  .hm-passos .passo { grid-template-columns: 38px 1fr !important; column-gap: 12px !important; }
}

/* ── B. selo do Google: um quadro por vez ─────────────────────────────
   Eram quatro informações na mesma linha (estrelas, nota, ícone do
   Google, retirada em Bangu) — 78 px no celular, duas linhas. Agora são
   dois quadros de uma linha cada, com bolinhas embaixo: 34 px.

   O JS monta a estrutura; aqui só o comportamento visual. Se o JS não
   rodar, o selo continua como está hoje — nada desaparece. */
#selo-google-capa { margin-top: 12px !important; }
#selo-google-capa .selo-google {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100%;
  position: relative;
  min-height: 28px;
  align-items: center;
  padding: 6px 12px !important;
}
#selo-google-capa .jx-gslides {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 20px;
}
#selo-google-capa .jx-gslide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#selo-google-capa .jx-gslide.on { opacity: 1; transform: none; pointer-events: auto; }
#selo-google-capa .jx-gdots {
  display: flex;
  gap: 5px;
  margin-left: 9px;
  flex: 0 0 auto;
}
#selo-google-capa .jx-gdot {
  width: 5px; height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
}
#selo-google-capa .jx-gdot.on { background: #fbbf24; width: 14px; }

/* ── C e D. bloco de avaliações ───────────────────────────────────────
   No ar ele tem 5 depoimentos abertos: 1.346 px no celular e 589 px no
   computador. Vira um quadro só, com setas e bolinhas — 255 e 241 px.
   As cinco avaliações continuam todas na página. */
#prova-social { padding: 26px 0 6px !important; }

/* D. cartão da nota em duas linhas (era 93 px; fica 63 px) */
#prova-social .prova-nota {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  min-height: 0 !important;
  margin: 0 auto 12px !important;
  max-width: 640px !important;
}
#prova-social .prova-nota .pg-logo {
  width: 20px !important; height: 20px !important;
  flex: 0 0 auto; margin: 0 !important;
}
#prova-social .prova-nota .pg-logo svg { width: 20px !important; height: 20px !important; display: block; }
#prova-social .prova-nota .pg-txt {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
#prova-social .prova-nota .pg-linha {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
#prova-social .prova-nota .pg-txt > span {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
#prova-social .prova-nota .btn {
  padding: 5px 11px !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;
  flex: 0 0 auto;
}

/* C. os depoimentos, um por vez */
#prova-social .prova-deps {
  display: block !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}
#prova-social .jx-rv {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 50px 13px 15px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#prova-social .jx-rv-quadro { display: none; }
#prova-social .jx-rv-quadro.on { display: block; }
#prova-social .jx-rv .estrelas { color: #f2b01e; font-size: 12px; letter-spacing: 1px; line-height: 1; }
#prova-social .jx-rv blockquote {
  margin: 4px 0 8px !important;
  font-size: 13.5px !important;
  line-height: 1.42 !important;
  color: #233348 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#prova-social .jx-rv figcaption {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  color: #5b6b7e !important;
  margin: 0 !important;
}
#prova-social .jx-rv .av {
  width: 22px; height: 22px;
  border-radius: 99px;
  background: #e9f1f8;
  color: #0b63a8;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10.5px;
  flex: 0 0 auto;
}
#prova-social .jx-rv-setas {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#prova-social .jx-rv-setas button {
  width: 26px; height: 26px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0d2740;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
#prova-social .jx-rv-setas button:hover { background: #eef4f9; }
#prova-social .jx-rv-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 9px;
}
#prova-social .jx-rv-dots button {
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #cdd9e5;
  cursor: pointer;
}
#prova-social .jx-rv-dots button.on { background: #0b63a8; width: 16px; }
/* alvo de toque confortável sem engordar a bolinha */
#prova-social .jx-rv-dots button { position: relative; }
#prova-social .jx-rv-dots button::after {
  content: ""; position: absolute; inset: -8px -5px;
}

/* ── quem pediu menos movimento, recebe menos movimento ───────────────
   Sem giro automático: os dois carrosséis ficam parados no primeiro
   quadro e só andam no clique/toque. */
@media (prefers-reduced-motion: reduce) {
  #selo-google-capa .jx-gslide,
  #prova-social .jx-rv-quadro { transition: none !important; }
}

/* ── E. "Avaliar" vira botão de verdade ───────────────────────────────
   Era um contorno de 62×25 px com texto de 11,5 px — parecia legenda, não
   convite. O botão é o único caminho para o cliente deixar avaliação no
   Google, e avaliação é o que sustenta o 5,0 do perfil. Aqui ele ganha
   corpo: fundo azul cheio, 36 px de altura, texto branco em 12,5 px.
   Contraste medido: 6,24:1 (a norma pede 4,5:1 para texto pequeno). */
#prova-social .prova-nota .btn {
  background: #0b63a8 !important;
  border-color: #0b63a8 !important;
  color: #fff !important;
  padding: 9px 16px !important;
  min-height: 36px;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(11, 99, 168, .25);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#prova-social .prova-nota .btn:hover,
#prova-social .prova-nota .btn:focus {
  background: #084d82 !important;
  border-color: #084d82 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 99, 168, .32);
}
#prova-social .prova-nota .btn:focus-visible {
  outline: 3px solid #0b63a8;
  outline-offset: 2px;
}

/* no celular o cartão é estreito: o texto pode quebrar em duas linhas em
   vez de virar reticência, e o botão desce se faltar espaço */
@media (max-width: 600px) {
  #prova-social .prova-nota { flex-wrap: wrap !important; padding: 10px 12px !important; }
  #prova-social .prova-nota .pg-txt { flex: 1 1 150px !important; }
  #prova-social .prova-nota .pg-txt > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #prova-social .prova-nota .btn { padding: 8px 13px !important; }
}

/* legenda do Google: duas redações, o CSS escolhe (ver ajustes-617.js) */
.jx-gtxt-curto { display: none; }
@media (max-width: 600px) {
  .jx-gtxt-longo { display: none; }
  .jx-gtxt-curto { display: inline; }
  /* Com a legenda curta o botão volta para a mesma linha. Para caber em
     342 px sem quebrar, as duas linhas de texto ficam em nowrap e o
     botão afina um pouco — o cartão fica com uma linha só. */
  #prova-social .prova-nota {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 8px 11px !important;
  }
  #prova-social .prova-nota .pg-txt { flex: 1 1 auto !important; gap: 0 !important; }
  #prova-social .prova-nota .pg-linha { font-size: 13.5px !important; white-space: nowrap !important; }
  #prova-social .prova-nota .pg-txt > span { font-size: 10.5px !important; white-space: nowrap !important; }
  #prova-social .prova-nota .btn {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    min-height: 34px;
    flex: 0 0 auto;
  }
}

/* 6.17.0 — endereço no rodapé (vem do config, mesma coluna do Contato) */
.foot .f-col .f-end{align-items:flex-start;white-space:normal;line-height:1.45;max-width:30ch}
.foot .f-col .f-end::before{margin-top:2px}
@media(max-width:520px){ .foot .f-col .f-end{max-width:none} }

/*ajustes-620-modulos.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-620-modulos.css — MÓDULOS (19/10/2026)
   Adesivos (#/montador), Fotos (/fotos.html) e Polaroid (/polaroid.html)

   Escopo: SÓ o card de escolha dos módulos + o cabeçalho de seção.
   1. .fpc (fotos) · .mat-kit (adesivos) · .pol-kit (polaroid)
      → mesma anatomia de 6 zonas, mesma altura de fileira
   2. .vt-shead — cabeçalho de seção numerado
   3. .ft-banner-eyebrow / garantias — ritmo das bandas de módulo

   NÃO toca em: vitrine, catálogo, home, ficha, frete, ERP.
   Não mexe em preço, faixa, desconto nem estoque.
   Para desfazer: apagar este arquivo, o .js e as linhas de include.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --vt-ink:#082040;
  --vt-muted:#5b6b7e;
  --vt-muted2:#7b8aa0;
  --vt-line:#e4eaf1;
  --vt-cream:#f4f1ea;
  --vt-ok:#0f7a4d;
  --vt-ok-bg:#e8f7ef;
  --vt-brand:#3B3A96;   /* 6.33.0: era #0888c8 (azul antigo) — o selecionado ficava azul no meio da loja índigo */
  --vt-r:18px;
}

/* ── 1. CARD DE ESCOLHA ────────────────────────────────────────────
   Mesma anatomia nos três módulos:
     mídia 4:3 → selo curto → título 2 linhas → apelido 1 linha
     → preço (valor + unidade) → faixas → até 2 bullets → rodapé
   A altura de cada zona é reservada, então as fileiras fecham retas.
   ───────────────────────────────────────────────────────────────── */

.fpc, .mat-kit, .pol-kit{
  /* sem `display` aqui de propósito: o módulo de Fotos esconde os cards
     da outra aba com style inline (display:none). Forçar display quebrava
     o filtro "Só a Foto no Papel" / "Com Porta-Retrato". O card já nasce
     flex no portal, então não perdemos nada. */
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  background:#fff !important;
  border:1.5px solid var(--vt-line) !important;
  border-radius:var(--vt-r) !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
  overflow:hidden !important;
  text-align:left !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.fpc:hover, .mat-kit:hover, .pol-kit:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 22px 40px -26px rgba(8,32,64,.45) !important;
  border-color:#cfe4f4 !important;
}
.fpc.on, .mat-kit.on, .pol-kit.on{
  border-color:var(--vt-brand) !important;
  box-shadow:0 0 0 3px rgba(8,136,200,.14), 0 22px 40px -26px rgba(8,32,64,.45) !important;
}

/* mídia: no módulo a foto é ambiente (sangrada, 4:3) */
.fpc .fpc-photo,
.mat-kit .mat-photo,
.pol-kit .ph{
  position:relative !important;
  width:100% !important;
  height:168px !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  flex:0 0 auto !important;
}
/* véu suave embaixo, igual ao card do catálogo */
.fpc .fpc-photo::after,
.mat-kit .mat-photo::after,
.pol-kit .ph::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(0deg,rgba(8,32,64,.18),rgba(8,32,64,0));
  pointer-events:none;
}

/* selo curto — o texto comprido vira chip no corpo (ver ajustes-620.js) */
.fpc .fpc-badge,
.mat-kit .mat-badge{
  top:10px !important; left:10px !important;
  max-width:calc(100% - 60px) !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:9.5px !important; font-weight:800 !important; letter-spacing:.04em !important;
  text-transform:uppercase !important;
  padding:4px 9px !important; border-radius:999px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
/* check de selecionado: sempre no mesmo canto, sempre do mesmo tamanho */
.fpc .fpc-check,
.mat-kit .mat-check{
  top:10px !important; right:10px !important; left:auto !important;
  width:24px !important; height:24px !important;
  display:grid !important; place-items:center !important;
  border-radius:999px !important;
  font-size:12px !important; font-weight:900 !important;
}

/* corpo: mesma escada tipográfica nos três */
.fpc .fpc-body{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:14px 15px 16px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.mat-kit .mat-body,
.pol-kit .corpo{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:14px 15px 0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.fpc .fpc-n,
.mat-kit .mat-name,
.pol-kit h2{
  font-family:Sora,system-ui,sans-serif !important;
  font-size:15px !important; font-weight:600 !important;
  line-height:1.34 !important; letter-spacing:-.015em !important;
  color:var(--vt-ink) !important;
  margin:0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:2.68em !important;
}
.fpc .fpc-apelido,
.mat-kit .mat-apelido,
.pol-kit .apelido{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:500 !important;
  line-height:1.4 !important; color:var(--vt-muted) !important;
  margin:4px 0 0 !important;
  min-height:1.4em !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}

/* chips de atributo (o que era a segunda metade do selo) */
.vt-chips{display:flex; gap:5px; margin:9px 0 0; overflow:hidden; white-space:nowrap; height:21px; flex:0 0 auto}
.vt-chips span{font:600 10.5px/1.5 Inter,sans-serif; color:#33506e; background:#eff5fb; border:1px solid #e0ebf6; border-radius:999px; padding:2px 8px; white-space:nowrap}

/* preço: rótulo pequeno + valor + unidade discreta — nunca quebra */
.fpc .fpc-price-row,
.mat-kit .mat-price-row,
.pol-kit .pr{
  margin:13px 0 0 !important;
  padding-top:12px !important;
  border-top:1px solid #eef2f7 !important;
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  white-space:nowrap !important;
}
.fpc .fpc-p,
.mat-kit .mat-price,
.pol-kit .pr{
  font-family:Sora,system-ui,sans-serif !important;
  font-size:24px !important; font-weight:800 !important;
  line-height:1 !important; letter-spacing:-.03em !important;
  color:var(--vt-ink) !important;
  font-variant-numeric:tabular-nums !important;
  display:flex !important; align-items:baseline !important; gap:3px !important;
}
.fpc .fpc-p small,
.mat-kit .mat-price small,
.pol-kit .pr small,
.pol-kit .pr span{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:600 !important;
  color:var(--vt-muted2) !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

/* faixas: pílulas em uma linha só, com respiro */
.fpc .fpc-tiers,
.mat-kit .mat-tiers{
  display:flex !important; gap:5px !important;
  flex-wrap:nowrap !important; overflow:hidden !important;
  margin:9px 0 0 !important; height:24px !important; align-items:center !important;
}
.fpc .fpc-tier,
.mat-kit .mat-tier{
  font-family:Inter,system-ui,sans-serif !important;
  font-size:10.5px !important; font-weight:700 !important;
  background:var(--vt-ok-bg) !important; color:var(--vt-ok) !important;
  border:1px solid #c6ebd6 !important; border-radius:999px !important;
  padding:3px 8px !important; white-space:nowrap !important;
}
.fpc .fpc-tier b,
.mat-kit .mat-tier b{font:inherit !important; font-weight:800 !important; color:var(--vt-ok) !important; letter-spacing:0 !important}

/* bullets: no máximo 2, uma linha cada */
.fpc .fpc-bullets,
.mat-kit .mat-bullets,
.pol-kit ul{
  margin:9px 0 0 !important; padding:0 !important;
  list-style:none !important;
  display:flex !important; flex-direction:column !important; gap:3px !important;
}
.fpc .fpc-bullets li,
.mat-kit .mat-bullets li,
.pol-kit ul li{
  position:relative !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:11px !important; line-height:1.45 !important;
  color:var(--vt-muted) !important;
  padding-left:14px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.fpc .fpc-bullets li::before,
.mat-kit .mat-bullets li::before,
.pol-kit ul li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:7px; height:7px; border-radius:2px;
  background:#bcd2e6;
}
.fpc .fpc-bullets li:nth-child(n+3),
.mat-kit .mat-bullets li:nth-child(n+3),
.pol-kit ul li:nth-child(n+3){display:none !important}
.mat-kit .mat-bullets li::before{content:"" !important}

/* rodapé do card: mesma altura em todos, com a ação */
.vt-cardfoot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:13px; padding:9px 15px 11px;
  border-top:1px solid #eef2f7;
  font-family:Inter,system-ui,sans-serif;
}
.vt-cardfoot .pra{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--vt-muted2); white-space:nowrap}
.vt-cardfoot .pra::before{
  content:""; width:12px; height:12px; flex:0 0 12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.vt-cardfoot .go{font-size:11.5px; font-weight:800; color:var(--vt-brand); display:inline-flex; align-items:center; gap:4px; transition:gap .2s}
.fpc:hover .vt-cardfoot .go, .mat-kit:hover .vt-cardfoot .go, .pol-kit:hover .vt-cardfoot .go{gap:8px}
.fpc.on .vt-cardfoot .go, .mat-kit.on .vt-cardfoot .go, .pol-kit.on .vt-cardfoot .go{color:var(--vt-ok)}
.fpc.on .vt-cardfoot .go::after, .mat-kit.on .vt-cardfoot .go::after, .pol-kit.on .vt-cardfoot .go::after{content:"✓"}

/* nota única do grupo (substitui o bullet repetido em cada kit) */
.vt-nota-grupo{
  margin:10px 0 0; font-family:Inter,system-ui,sans-serif;
  font-size:11.5px; line-height:1.5; color:var(--vt-muted2);
  display:flex; align-items:flex-start; gap:6px;
}
.vt-nota-grupo::before{content:"ⓘ"; font-weight:800; color:#9fb2c6}

/* ── 2. CABEÇALHO DE SEÇÃO ────────────────────────────────────────
   Mesmo desenho do rabisco: número + título + linha de apoio.
   ───────────────────────────────────────────────────────────────── */
.vt-shead{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; margin:26px 0 14px}
.vt-shead .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--vt-brand); border-top:2px solid var(--vt-brand); padding-top:8px}
.vt-shead h2, .vt-shead .h{font-family:Sora,system-ui,sans-serif !important; font-size:19px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--vt-ink) !important; margin:0 !important; line-height:1.2 !important}
.vt-shead p{margin:5px 0 0 !important; font-size:12.8px !important; line-height:1.5 !important; color:var(--vt-muted) !important; max-width:70ch}

/* ── 3. BANDA DE MÓDULO (cabeçalho das telas) ─────────────────────
   Só iguala ritmo: eyebrow mono, título serif, tags, CTA, garantias.
   ───────────────────────────────────────────────────────────────── */
.ft-banner-eyebrow, .pb-eyebrow, .mont-eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:10px !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; font-weight:700 !important;
  color:#64748b !important; margin:0 0 8px !important;
}
.ft-banner-garantias, .pb-garantias, .mont-garantias{
  display:flex !important; gap:14px !important; flex-wrap:wrap !important;
  margin-top:14px !important; padding-top:12px !important;
  border-top:1px solid rgba(8,32,64,.10) !important;
  font-size:11.5px !important; color:#4a5d73 !important;
}
.ft-banner-garantias b, .pb-garantias b, .mont-garantias b{color:var(--vt-ok) !important}

/* telas estreitas: card de escolha em 2 e depois 1 coluna */
@media(max-width:1024px){
  .fpc, .mat-kit, .pol-kit{min-width:0}
}

/*ajustes-625-padrao.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-625-padrao.css — PADRONIZAÇÃO DE ESTILO (21/10/2026 · 6.25.1)
   Rabisco aprovado: RABISCO-PADRONIZACAO-COMPONENTES.html (D1–D5)

   Escopo: SÓ estilo — nenhuma foto e nenhum texto de página é trocado.
     D2+D3 · banner claro (polaroid, fotos, cartões) = raio 22 + sombra
             suave do montador, que é a base de design
     D1    · CTA do herói das páginas = roxo da identidade, raio 12
             (a home mantém a pílula rosa; agendas têm o próprio override)
     D4    · estado selecionado das pills = índigo da identidade (6.33.0)
             o mesmo azul que o ajustes-620-modulos.css já usa nos cards
     D5    · selo "a partir de" sobre a foto dos banners e da banda
             escura da home (.vt-selo-preco)

   Os cards de produto NÃO estão aqui: o padrão deles (.pol-kit da
   polaroid) já vive em ajustes-620-modulos.css + ajustes-620-modulos.js
   e cobre .fpc / .mat-kit / .pol-kit nas quatro páginas.

   NÃO toca em: vitrine, catálogo, ficha, frete, ERP, agendas.
   Não mexe em preço, faixa, desconto nem estoque.
   Para desfazer: apagar este arquivo e as 4 linhas de include.
   ════════════════════════════════════════════════════════════════════ */

/* ── D2+D3 · banner claro: raio e sombra do montador (a base) ───── */
.pol-banner,
.ft-banner{
  border-radius:22px !important;
  box-shadow:0 12px 32px rgba(15,23,42,.06) !important;
}

/* ── D1 · CTA do herói das páginas: roxo identidade, raio 12 ────── */
.ades-banner .btn-hero-dark,
.ft-banner .btn-hero-dark{
  background:#3b3a96;
  border-radius:12px;
}
.ades-banner .btn-hero-dark:hover,
.ft-banner .btn-hero-dark:hover{
  background:#2e2d7a;
}

/* ── D4 · seleção das pills: azul da loja (como os cards e o ──────
   .ab-pill.on do montador). Só o estado selecionado — o texto de
   preço de cada página mantém a cor da sua identidade. ──────────── */
.pb-pill.on,
.ft-pill.on{
  border-color:var(--brand) !important;
  background:#f0f9ff !important;
}

/* ── D5 · selo "a partir de" sobre a foto ─────────────────────────
   Vai dentro do elemento de foto do banner (.pb-foto, .ft-banner-img)
   e da banda escura da home (.photo-entry-art). Só CSS: o texto do
   selo é markup estático em cada página, com o preço real dela. ── */
.vt-selo-preco{
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:baseline; gap:5px;
  background:rgba(8,32,64,.82); color:#fff;
  border-radius:999px; padding:7px 13px;
  font-family:Inter,system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.01em;
  backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -8px rgba(8,32,64,.6);
  pointer-events:none;
}
.vt-selo-preco b{
  font-family:Sora,system-ui,sans-serif;
  font-size:13.5px; font-weight:800; letter-spacing:-.01em;
}
.photo-entry-art{ position:relative; }
@media(max-width:760px){
  .vt-selo-preco{ left:10px; bottom:10px; padding:6px 11px; font-size:10.5px; }
  .vt-selo-preco b{ font-size:12.5px; }
}

/*camada-621-identidade.css*/
/* ════════════════════════════════════════════════════════════════
   camada 6.21-B — IDENTIDADE (paleta do logo, regra 19 da casa)
   #3B3A96 · #EC0F8C · #F4F1EA · #FFF
   ─────────────────────────────────────────────────────────────────
   contraste com texto branco:  brand 9,41 ✓   pink 4,19 (só texto grande)
   contraste ink/paper: 14,89 ✓
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#191842;            /* azul-tinta da família do logo, não o navy frio */
  --ink-2:#292862;
  --paper:#F4F1EA;          /* papel quente do logo */
  --brand:#3B3A96;
  --brand-2:#5C5AC8;
  --brand-soft:#ECEBF9;
  --pink:#EC0F8C;
  --indigo:#3B3A96;
  --line:#E3DED2;
  --muted:#5F5C6B;
  --gold:#F5C518;
}
a{color:var(--brand)}
.btn-b{background:var(--brand);color:#fff}
.btn-y{background:linear-gradient(180deg,#F53BA6,#EC0F8C);color:#fff;box-shadow:0 10px 22px -12px rgba(236,15,140,.6)}
.btn-wa,.btn-wa-topo{background:#25d366!important;border-color:#25d366!important;color:#0d3a1e!important}
/* superfícies quentes */
body,.page,.home,.catalogo,polaroid,main{background:var(--paper)}
.card,.prod,.fpc,.pd-card,.tl-card,.at-card,.fr-op{background:#fff}

/*ajustes-627-cards.css*/
/* ─────────────────────────────────────────────────────────────────
   6.27 — CARDS PADRÃO v2 (o dono viu o fotos.html no preview e
   cravou: "faz os cards assim para todas"). O desenho dos cards de
   foto virou a régua global, somado ao que o 627 já trouxe (selos
   fixos, zoom sutil, sem-foto com emoji, skeleton, altura igual).
   · A RÉGUA (medida no fotos.html + print aprovado):
     foto 4:3 no topo com selos · título Sora 800 · sublinha muted
     · DIVISÓRIA PONTILHADA antes do preço · preço grande Sora +
     sufixo "/ un" muted · pílulas de faixa VERDES em fila ·
     bullets com quadradinho (língua do 620) · rodapé com relógio +
     ação, respiro 16px.
   · FAMÍLIAS VESTIDAS: .prod (home #grid-inicio + #grid-cat),
     .ag-mat (agendas.html), .fpc.fpc-card (fotos.html — a dona da
     régua, recebe só os acréscimos) e pílulas de faixa dos módulos
     620 (.mat-tiers/.pol-tiers) pra ficar tudo na mesma língua.
   · SÓ ESTILO: preço/lógica/JS de compra intocados; tirou a linha
     do HTML, o portal volta ao que era.
   ───────────────────────────────────────────────────────────────── */

/* ═══ 1. .prod — home e catálogo ═══════════════════════════════ */
.prod {
  display: flex; flex-direction: column;
  border-radius: 14px; border: 1px solid var(--line, #e3e9f0);
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
}
.prod:hover { box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.prod .thumb {
  height: auto; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff);
  font-size: 44px;
}
.prod .thumb .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.prod:hover .thumb .ph { transform: scale(1.03); }

/* selos nos lugares fixos */
.prod .thumb .store-badge, .prod .thumb .tag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line, #e3e9f0);
  color: var(--ink, #082040); border-radius: 999px;
  font: 800 9px var(--font-b, Inter, sans-serif); letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px;
}
.prod .thumb .store-badge.eco { top: auto; left: auto; bottom: 8px; right: 8px; background: #166534; border: 0; color: #fff; }
.prod .thumb .ph-count {
  position: absolute; top: 8px; right: 8px;
  font: 800 9px monospace; color: var(--brand-ink, #0369a1);
  background: var(--brand-soft, #e6f5fc); border: 1px solid #bfe0f2;
  border-radius: 999px; padding: 2px 7px;
}
.prod .thumb .selo-pers, .prod .selo-pers {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(255,255,255,.94); border: 1px solid #f0abfc;
  color: #a21caf; border-radius: 999px;
  font: 800 9px var(--font-b, Inter, sans-serif); letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px;
}

/* sem foto: nunca buraco */
.prod .thumb.sem-foto, .fig.sem-foto { background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff); }
.vt-ph { display: grid; place-items: center; gap: 3px; }
.vt-ph b {
  font: 800 10px ui-monospace, monospace; letter-spacing: .1em;
  color: var(--brand-ink, #0369a1); background: var(--brand-soft, #e6f5fc);
  border: 1px solid #bfe0f2; border-radius: 999px; padding: 2px 8px;
}
.vt-ph i { font: 700 9px var(--font-b, Inter, sans-serif); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #9fb2c6; }
.thumb .vt-emoji, .fig .vt-emoji { font-size: 44px; line-height: 1; display: block; }

/* corpo na régua do fotos.html */
.prod .bd { padding: 14px 16px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.prod .bd > b, .prod .bd b {
  font: 800 16px/1.25 var(--font-d, Sora, sans-serif); color: #0b2340;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod .desc {
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif); color: var(--muted, #5b6b7e);
  margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod .price {
  margin-top: auto; padding-top: 8px; margin-bottom: 0;
  border-top: 1px dashed var(--line, #e3e9f0);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.prod .bd > .price:first-of-type { margin-top: 12px; }
.prod .price span {
  font: 700 10px var(--font-b, Inter, sans-serif); letter-spacing: .06em;
  text-transform: uppercase; color: #9fb2c6;
}
.prod .price b {
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important;
  letter-spacing: -.01em; color: #0b2340;
}
.prod .price em {
  font: 700 11.5px var(--font-b, Inter, sans-serif) !important;
  font-style: normal; color: var(--muted, #5b6b7e);
}

/* rodapé na régua: relógio + ação, respiro 16px */
.prod .store-card-cta {
  margin-top: 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  border-top: 1px solid #eef2f7; padding: 9px 16px 16px;
}
.prod .store-card-cta .product-ref {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0; /* esconde o "preço de referência" nativo — ao lado do
     relógio vai o PRAZO, como o dono pediu ("exemplo: 3 dias úteis") */
  color: var(--muted2, #7b8aa0); white-space: nowrap;
}
.prod .store-card-cta .product-ref::after {
  content: "3 dias úteis";
  font: 600 10.5px var(--font-b, Inter, sans-serif);
}
.prod .store-card-cta .product-ref::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.prod .store-card-cta .btn {
  background: none !important; border: 0; box-shadow: none !important;
  transform: none !important; padding: 0; margin: 0;
  color: var(--brand, #0888c8);
  font: 800 11.5px var(--font-b, Inter, sans-serif);
  display: inline-flex; align-items: center; gap: 4px;
}
.prod .store-card-cta .btn:hover { color: #066ea3; gap: 8px; }
.prod .store-card-cta .btn::after { content: "›"; font-weight: 800; }

/* ═══ 2. ag-mat — agendas.html ═════════════════════════════════ */
.ag-mat {
  border: 1px solid var(--line, #e3e9f0) !important; border-radius: 14px !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.ag-mat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.ag-mat-badge {
  top: 8px !important; left: 8px !important; border-radius: 999px !important;
  padding: 4px 9px !important; letter-spacing: .05em; text-transform: uppercase;
}
.ag-wrap .ag-mat-name, .ag-mat-name { font: 800 16px/1.25 var(--font-d, Sora, sans-serif) !important; color: #0b2340 !important; }
.ag-wrap .ag-mat-price, .ag-mat-price {
  border-top: 1px dashed var(--line, #e3e9f0); padding-top: 8px; margin-top: 8px;
  display: flex; align-items: baseline; gap: 5px;
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important; color: #0b2340 !important;
}
.ag-wrap .ag-mat-price span, .ag-mat-price span {
  font: 700 11.5px/1 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important; margin-left: 0 !important;
}

/* ═══ 3. fpc.fpc-card — fotos.html (a dona da régua) ════════════ */
.fpc.fpc-card {
  border: 1px solid var(--line, #e3e9f0) !important; border-radius: 14px !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.fpc.fpc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)); }
.fpc.fpc-card.on {
  border-color: var(--brand, #0888c8) !important;
  box-shadow: 0 0 0 2px rgba(8,136,200,.14), var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30));
}
.fpc-badge {
  top: 8px !important; left: 8px !important; border-radius: 999px !important;
  padding: 4px 9px !important; letter-spacing: .05em; text-transform: uppercase;
}

/* ═══ 4. a mesma língua em todas as famílias ═══════════════════ */
/* pílulas de faixa verdes (tiers) em .prod, fotos e módulos 620 */
.store-tiers > *, .fpc-tiers > *, .mat-tiers > *, .pol-tiers > * {
  background: #ecfdf3 !important; color: #166534 !important;
  border: 1px solid #bbf7d0 !important; border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;
}
/* bullets com quadradinho (língua do 620 aprovado) em todas */
.ag-mat-bullets li, .fpc-bullets li {
  list-style: none; position: relative; padding-left: 14px;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important; color: #334155 !important;
}
.ag-mat-bullets li::before, .fpc-bullets li::before {
  content: "" !important; position: absolute; left: 0; top: .42em;
  width: 7px; height: 7px; border-radius: 2px; background: #bcd2e6;
}

/* ═══ 6. peças enriquecidas do .prod (injeta o 627 js) ═══════════
   O template vivo do card (app.js) é thumb + título + price (+kit):
   sublinha, pílulas de faixa e rodapé entram por JS com dado vivo
   de PRODS — aqui mora só o visual delas, na régua fotos.html. */
.p627-sub {
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif);
  color: var(--muted, #5b6b7e); margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p627-tiers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.p627-tiers span {
  background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0;
  border-radius: 999px; padding: 3px 8px;
  font: 700 10.5px var(--font-b, Inter, sans-serif);
}
.p627-foot {
  margin: 12px -16px 0; border-top: 1px solid #eef2f7;
  padding: 9px 16px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.p627-foot .pra {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10.5px var(--font-b, Inter, sans-serif);
  color: var(--muted2, #7b8aa0); white-space: nowrap;
}
.p627-foot .pra::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat;
}
.p627-foot .go {
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--brand, #0888c8);
  font: 800 11.5px var(--font-b, Inter, sans-serif);
  display: inline-flex; align-items: center; gap: 4px; transition: gap .15s;
}
.p627-foot .go::after { content: "›"; font-weight: 800; }
.p627-foot .go:hover { gap: 8px; color: #066ea3; }

/* ═══ 7. família c623 (home/catálogo) na régua aprovada ═════════
   Medido no vivo (rodada 100): o módulo 623 repinta os cards da
   home/catálogo com markup próprio (c623-*) e INJETA o css dele
   DEPOIS do nosso (ordem de sheets medida no jsdom). Por isso esta
   camada de sobreposição usa !important em cada declaração (uma
   por linha) — é só estilo: tirou o arquivo, voltou ao original. */
.prod.card623 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  background: #fff !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18)) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .prod.card623 {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  background: #fff !important;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18)) !important;

  padding: 0 !important;
  border-radius: 18px !important;
  min-width: 0 !important;
}
.prod.card623:hover { box-shadow: var(--shadow-lg, 0 22px 44px -22px rgba(8,32,64,.30)) !important; }
.card623 .c623-photo {
  aspect-ratio: 4/3 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-photo {
  aspect-ratio: 7/3 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, #fde8f0, #e8f4fb 60%, #fff) !important;

  margin: 0 !important;
  border-radius: 0 !important;
}
.card623 .c623-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
}
.prod.card623:hover .c623-photo img { transform: scale(1.03) !important; }
.card623 .c623-fotos {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  font: 800 9px ui-monospace, monospace !important;
  color: var(--brand-ink, #0369a1) !important;
  background: var(--brand-soft, #e6f5fc) !important;
  border: 1px solid #bfe0f2 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
}
.card623 .c623-photo.sem-foto {
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
}
.card623 .c623-photo.sem-foto > span:not(.vt-emoji):not(.c623-fotos) {
  font: 700 9px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9fb2c6 !important;
}
.card623 .c623-cat {
  margin: 14px 16px 0 !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-cat {
  margin: 8px 15px 0 !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.card623 .c623-catname {
  background: #f1f5f9 !important;
  border: 1px solid var(--line, #e3e9f0) !important;
  color: #334155 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.card623 .c623-pers {
  display: inline-flex !important;
  color: #a21caf !important;
  background: #fdf4ff !important;
  border: 1px solid #f0abfc !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.card623 .c623-title {
  margin: 5px 16px 0 !important;
  font-family: var(--font-d, Sora, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0b2340 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-title {
  margin: 12px 15px 0 !important;
  font-family: var(--font-d, Sora, sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0b2340 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow-wrap: anywhere;
}
.card623 .c623-sub {
  margin: 5px 16px 0 !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-sub {
  margin: 5px 15px 0 !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;

  min-height: 0 !important;
  max-height: none !important;
  overflow-wrap: anywhere;
}
.card623 .c623-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 5px 16px 0 !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 7px 15px 0 !important;

  min-height: 0 !important;
  overflow: visible !important;
}
.card623 .c623-pills span {
  background: #ecfdf3 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-pills span {
  background: #ecfdf3 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font: 700 10.5px var(--font-b, Inter, sans-serif) !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
.card623 .c623-div {
  height: 0 !important;
  background: none !important;
  border-top: 1px dashed var(--line, #e3e9f0) !important;
  margin: 6px 16px 0 !important;
}
.card623 .c623-from {
  margin: 8px 16px 0 !important;
  font: 700 10px var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #9fb2c6 !important;
}
.card623 .c623-price {
  margin: 2px 16px 0 !important;
  font: 800 22px/1 var(--font-d, Sora, sans-serif) !important;
  color: #0b2340 !important;
}
.card623 .c623-price small {
  font: 700 11.5px var(--font-b, Inter, sans-serif) !important;
  color: var(--muted, #5b6b7e) !important;
  margin-left: 4px !important;
}
.card623 .c623-kit {
  margin: 6px 16px 0 !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font: 600 11px var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.card623 .c623-off {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font: 800 9.5px var(--font-b, Inter, sans-serif) !important;
  text-transform: uppercase !important;
}
.card623 .c623-foot {
  margin-top: auto !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 9px 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
/* Variante da mesma peça, restrita à home e ao catálogo. */
:is(#grid-inicio, #grid-cat) .card623 .c623-foot {
  margin-top: auto !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 12px 15px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

}
.card623 .c623-prazo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font: 600 10.5px var(--font-b, Inter, sans-serif) !important;
  color: var(--muted2, #7b8aa0) !important;
  white-space: nowrap !important;
}
.card623 .c623-prazo svg {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
}
.card623 .c623-ver {
  color: var(--brand, #0888c8) !important;
  font: 800 11.5px var(--font-b, Inter, sans-serif) !important;
}

:is(#grid-inicio, #grid-cat) .card623 .c623-sub:empty { display: none !important; }
/* sequência idêntica à do fotos.html: foto, título, sublinha, tag,
   divisória, preço, faixas, kit, rodapé */
.card623 .c623-photo { order: 0 !important; }
.card623 .c623-title { order: 1 !important; }
.card623 .c623-sub { order: 2 !important; }
.card623 .c623-cat { order: 3 !important; }
.card623 .c623-div { order: 4 !important; }
.card623 .c623-from { order: 5 !important; }
.card623 .c623-price { order: 6 !important; }
.card623 .c623-pills { order: 7 !important; }
.card623 .c623-bullets {
  order: 8 !important;
  margin: 6px 16px 0 !important;
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  gap: 3px !important;
}
.card623 .c623-bullets li {
  position: relative !important;
  padding-left: 14px !important;
  font: 400 11.5px/1.45 var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.card623 .c623-bullets li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .42em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 2px !important;
  background: #bcd2e6 !important;
}
.card623 .c623-kit { order: 9 !important; }
.card623 .c623-foot { order: 10 !important; }

/* ═══ 5. skeleton de carregamento ══════════════════════════════ */
.vt-sk { background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 14px; overflow: hidden; }
.vt-sk .sk-foto { aspect-ratio: 4/3; }
.vt-sk .sk-l { height: 10px; border-radius: 6px; margin: 10px 16px 0; }
.vt-sk .sk-l.w40 { width: 40%; }
.vt-sk .sk-l.w60 { width: 60%; }
.vt-sk .sk-l.w80 { width: 80%; }
.vt-sk .sk-foot { border-top: 1px solid #eef2f7; margin-top: 14px; padding: 12px 16px 16px; display: flex; justify-content: space-between; gap: 8px; }
.vt-sk .sk-dot { height: 10px; width: 64px; border-radius: 6px; }
.vt-sk .sk-foto, .vt-sk .sk-l, .vt-sk .sk-dot {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
  background-size: 200% 100%; animation: vtsk 1.2s ease infinite;
}
@keyframes vtsk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .prod .thumb .ph, .ag-mat, .fpc.fpc-card { transition: none; }
  .prod:hover .thumb .ph, .ag-mat:hover, .fpc.fpc-card:hover { transform: none; }
  .vt-sk .sk-foto, .vt-sk .sk-l, .vt-sk .sk-dot { animation: none; }
}

/* ── 8. respiro acima da linha do rodapé (dono, 22/10) ───────────────
   A linha do .c623-foot colava no tier/bullets (0px acima), enquanto a
   pontilhada da régua tem 6px acima / 8px abaixo. Devolve 8px acima da
   linha sem perder o margin-top:auto que alinha rodapés (R112). */
.card623 .c623-kit:has(+ .c623-foot) { margin-bottom: 8px !important; }
.card623 .c623-bullets:has(+ .c623-foot) { margin-bottom: 8px !important; }

/* ── 9. 6.27.8 — rodada 118 (22/10/2026) ────────────────────────────
   Bloco medido e reversível (itens 1, 2, 3, 4 e 5 da prancheta 6.27.8).
   Apagar da linha "9. 6.27.8" até o fim do arquivo = volta a 6.27.7.
   · .i6278/.i6278w: ícones SVG no lugar dos emojis que viravam □ em
     aparelho sem fonte de emoji (menu-mãe, popover, texto do catálogo).
   · .b627-q: seletor de quantidade do card único do botton espelho.
   · .pol-kit .ph: as 3 artes novas dos kits polaroid (medidas no
     rabisco aprovado: 12×8 paisagem, 5×9 grade 3×3, tira tripla blush).
   · #grid-inicio: trilho da home em 3 colunas (card 275→372px medido
     no rabisco prancheta-3-colunas.html, régua do fotos).            */
.i6278 { width: 1.05em; height: 1.05em; vertical-align: -0.18em; display: inline-block; }
.i6278w { display: inline-block; line-height: 0; }
.drawer-nav a.l6278 { display: flex; align-items: center; gap: 8px; color: var(--brand-ink, #0369a1); font-weight: 700; }
.drawer-nav a.l6278 .i6278 { flex-shrink: 0; }

/* botton espelho: seletor de pacote dentro do card único */
/* o card623 traz display:flex !important no próprio 627 — esconder o
   card sobrando por style.display inline PERDE pra esse important
   (medido no ar 22/10: os 3 pacotes seguiam visíveis). A regra por
   atributo abaixo empata o important e vence por vir depois. */
.prod.card623[data-b6278off="1"] { display: none !important; }
.b627-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0 2px; }
.b627-q button { font: 700 11px/1.15 var(--font-b); padding: 6px 2px; border: 1.5px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 1px; align-items: center; }
.b627-q button small { font-weight: 600; font-size: 9.5px; color: var(--muted); }
.b627-q button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink, #0369a1); }
.b627-q button.on small { color: inherit; }

/* polaroid v6.29.4: sem !important fixo em site_img_pola_* — respeita o upload do ERP e o fallback de polaroid.html */

/* home: trilho em 3 colunas no desktop (aprovado no rabisco).
   Medido no ar (22/10): quem manda hoje é #p-inicio #grid-inicio do
   ajustes-624-vitrine.css (repeat(4,1fr), carregado DEPOIS do 627) —
   por isso o seletor aqui sobe um id + classe pra vencer na cascata. */
@media (min-width: 1025px) {
  #p-inicio #grid-inicio.store-rail-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  #p-inicio #grid-inicio.store-rail-grid .prod.home-prod { max-width: none; }
}

/* ── 10. 6.27.10 — arredondamento unificado (dono, rodada 119, 22/10) ──
   Medido no ar em 22/10: as pílulas de preço estavam rachadas em duas
   linguagens — 999px (fotos .ft-pill, agendas .ab-pill) contra 11px
   (polaroid/cartões .pb-pill, a pílula da captura do dono); o CTA
   principal das agendas estava 999px contra 12px das outras três;
   e o card do catálogo (.card623 + foto) estava 14px contra 18px dos
   kits (.pol-kit/.mat-kit, já iguais entre si).
   Os wrappers cremes JÁ estavam unificados em 22px (.pol-banner,
   .ft-banner, .ades-banner — medido) — não mexe. O estádio 999px
   continua só onde é linguagem de selo: "a partir de", chips de
   departamento, pílulas verdes do card e link de voltar.
   Só CSS, cinco linhas: apagou o bloco, voltou ao estado de hoje. */
.ft-pill { border-radius: 11px; }
.ab-pill { border-radius: 11px; }
.btn-hero-dark { border-radius: 12px; }
.prod.card623 { border-radius: 18px !important; }
.card623 .c623-photo { border-radius: 18px !important; }

/* ═══ 11. R125 (23/10): chip verde de volta a uma linha só ═══════
   O núcleo tem `.mont-mats b{display:block}` (feito pro texto dos
   atalhos de quantidade) que atropelava o <b> do preço dentro da
   pílula de faixa (.mat-tier/.fpc-tier/.ag-mat-tier): o valor caía
   em segunda linha e a pílula estourava a fileira de 24px do 620.
   Aqui o <b> do chip volta a ser inline — valor, lógica de compra
   e JS intocados; a pílula reassume a língua aprovada do 620.     */
.mat-tier b, .fpc-tier b, .ag-mat-tier b { display: inline !important; }

/* ═══ 12. R125 (23/10): vitrine da home — 4 landings em 2×2 ═════
   A antiga grade de 7 cards misturava landing com serviço. Agora:
   .home-landings = bloco 2×2 só com os 4 cards que levam aos HTMLs
   próprios, na língua do card (foto sangrada + selo + raio 18);
   .home-servicos = fileira de 3 pra quem é serviço (ícone, sem foto).
   Réguas: wrapper 22 não se aplica (seção aberta); card 18; selo é o
   .rl-selo da regua-landing.css. Textos/links de hoje, mesmos.     */
.home-landings {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 760px) { .home-landings { grid-template-columns: 1fr; } }
.home-landings .lc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e3e9f0);
  border-radius: 18px; overflow: hidden; text-decoration: none;
  box-shadow: var(--shadow, 0 1px 2px rgba(8,32,64,.05), 0 10px 26px -14px rgba(8,32,64,.18));
  transition: transform .16s ease, box-shadow .16s ease;
}
.home-landings .lc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(8,32,64,.06), 0 16px 34px -16px rgba(8,32,64,.24); }
.home-landings .lc .ph { position: relative; height: 150px; overflow: hidden; display: block; }
.home-landings .lc .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.home-landings .lc .bd { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px 15px; flex: 1; }
.home-landings .lc .eyebrow {
  font: 800 9.5px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; color: #64748b;
}
.home-landings .lc b { font-family: var(--font-d, Sora, Inter, sans-serif); font-size: 16.5px; font-weight: 800; color: #082040; }
.home-landings .lc small { font-size: 12.5px; line-height: 1.5; color: #5b6b7e; }
.home-landings .lc strong { margin-top: auto; padding-top: 10px; font: 700 12px/1 var(--font-b, Inter, sans-serif); color: #3B3A96; }
.home-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 760px) { .home-servicos { grid-template-columns: 1fr; } }
.home-servicos .sv {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  background: #fff; border: 1px solid var(--line, #e3e9f0); border-radius: 18px;
  padding: 14px 16px;
}
.home-servicos .sv .ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; background: #eef2f7; color: #3B3A96;
}
.home-servicos .sv .ic svg { width: 19px; height: 19px; }
.home-servicos .sv b { display: block; font-size: 13.5px; color: #082040; margin-bottom: 2px; }
.home-servicos .sv small { font-size: 11.5px; line-height: 1.45; color: #5b6b7e; display: block; }

/* ═══ 13. R128 (23/10): agendas.html — últimos fora-da-régua ═════
   (a) seção 2 "Também no balcão" nasce vazia e exibia ao cliente um
       recado interno ("rascunho · ainda não está no ERP"): escondida
       até o ERP ganhar os produtos (pra reabrir, tire .ag-sec-draft);
   (b) CTA de meio de página era rosa #D60C7E — a cor da casa é o
       índigo #3B3A96 (mesma língua do herói e das outras landings);
   (c) cards de miolo .ag-mat com raio 14 → 18, o raio de card da casa
       (foto com cantos presos via overflow).                        */
.ag-sec-draft { display: none !important; }
#ag-novos:empty { display: none !important; }
.ag-wrap .ag-btn-principal { background: #3B3A96 !important; }
.ag-wrap .ag-btn-principal:hover { background: #2E2D7A !important; }
.ag-wrap .ag-mat { border-radius: 18px !important; overflow: hidden; }

/* ============================================================
   14) Página de produto — régua da casa (R129)
   galeria .fig 20px→18 (foto de card); .pd-trust-strip 14px→12 (barra)
   ============================================================ */
.pd .fig{border-radius:18px;overflow:hidden}
.pd .fig img{border-radius:18px}
.pd-trust-strip{border-radius:12px}
.pd{border-radius:22px}

/* ============================================================
   15) R131 — respiros pedidos pelo dono na página de produto
   - .pd-cta: botões "colados" (gap 12) -> 16px + quebra limpa
   - .from > small vazio: slot da msg de tier que fica só com as
     linhas quando o produto não tem tiers -> some sem deixar vão
   ============================================================ */
.pd-cta{gap:16px;flex-wrap:wrap;margin-top:16px}
#produto-corpo .from > small:empty,
.pd .from > small:empty{display:none !important}

/* R137 (23/10, noite): card LARGO de Brindes na vitrine da home — o bloco
   .home-landings é 2×2 com 4 cards; o 5º (copo long drink, produto e não
   landing) entra ocupando as 2 colunas pra não ficar órfão. Foto sangrada
   à esquerda, texto à direita; no mobile empilha como os irmãos.        */
.home-landings .lc.lc-wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.home-landings .lc.lc-wide .ph { width: 38%; flex: 0 0 38%; height: 190px; min-height: 0; }
.home-landings .lc.lc-wide .bd { justify-content: center; }
@media (max-width: 760px) {
  .home-landings .lc.lc-wide { flex-direction: column; }
  .home-landings .lc.lc-wide .ph { width: 100%; flex: none; height: 150px; min-height: 0; }
}

/*regua-landing.css*/
/* ═════════════════════════════════════════════════════════════
   REGUA-LANDING.CSS — a mesma língua pra toda landing (6.27.12)
   ─────────────────────────────────────────────────────────────
   DONA DA RÉGUA: o herói do polaroid.html. Toda landing (página
   HTML própria ou herói de rota do index) veste estes slots:

     .rl            wrapper do herói (raio 22, foto + texto)
     .rl-eyebrow    sobrancelha: SEM emoji, caixa alta via CSS
     .rl h1         título Georgia 42 com <em>/<span> colorido
     .rl-pills      fileira única, no MÁXIMO 4 pílulas
     .rl-pill       pílula: raio 11, 11px, borda linha, fundo branco
     .rl-cta        par: .rl-btn (marca, raio 12) + .rl-wa
     .rl-wa         "ou falar no WhatsApp →" (12px, muted)
     .rl-extra      link utilitário opcional (gabaritos, polaroid…)
     .rl-selos      fileira de ✓ verdes, 11,5px
     .rl-photo      foto sangrada + .rl-selo (badge verde)

   CHECKLIST DOS 7 CONFERES (landing nova ou mexida):
     1 sobrancelha sem emoji (o CSS caixa-alta sozinho)
     2 título Georgia com palavra colorida
     3 ≤ 4 pílulas em uma fileira
     4 CTA da marca + "ou falar no WhatsApp →"
     5 selos ✓ presentes
     6 foto sangrada com selo (ou .rl.sem-foto justificada)
     7 wrapper 22 / card 18 / pílula 11 / CTA 12
   Quem não passar, não sobe. Manual vivo: este cabeçalho +
   portal/modelo-landing.html + PADRAO-DA-CASA seção 7.
   ───────────────────────────────────────────────────────────── */

.rl { border-radius: 22px !important; overflow: hidden; }

.rl .rl-eyebrow {
  display: inline-block;
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #64748b !important; background: none !important;
}

.rl h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.08 !important; font-weight: 700 !important;
  letter-spacing: -0.01em !important; color: #082040 !important;
}
.rl h1 em, .rl h1 span {
  font-style: normal !important;
  color: var(--rl-accent, #3B3A96) !important;
}

.rl .rl-pills {
  display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; margin: 12px 0 0 !important;
}
.rl .rl-pills > * {
  border-radius: 11px !important;
  font: 700 11px/1 var(--font-b, Inter, sans-serif) !important;
  padding: 7px 10px !important;
  border: 1px solid #d8dee8 !important; background: #fff !important;
  color: #0b2340 !important; white-space: nowrap !important;
}
.rl .rl-pills > .on, .rl .rl-pills > [class*="on"] {
  border-color: var(--rl-accent, #3B3A96) !important;
  color: var(--rl-accent, #3B3A96) !important; background: #fff !important;
}

.rl .rl-cta { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 14px !important; }
.rl .rl-cta .rl-btn,
.rl .rl-cta a.rl-btn,
.rl .rl-cta button.rl-btn {
  border-radius: 12px !important;
  font: 700 13.5px/1 var(--font-b, Inter, sans-serif) !important;
  padding: 14px 22px !important;
  background: var(--rl-accent, #3B3A96) !important; color: #fff !important;
  border: 0 !important; cursor: pointer; text-decoration: none !important;
}
.rl .rl-wa {
  font: 700 12.5px/1.2 var(--font-b, Inter, sans-serif) !important;
  color: #1d8a4e !important; text-decoration: none !important;
}
.rl .rl-wa:hover { text-decoration: underline !important; }
.rl .rl-extra {
  font: 600 11.5px/1.2 var(--font-b, Inter, sans-serif) !important;
  color: #5b6b7e !important; text-decoration: none !important;
}
.rl .rl-extra:hover { text-decoration: underline !important; }

.rl .rl-selos { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 12px !important; }
.rl .rl-selos > * {
  font: 600 11.5px/1.3 var(--font-b, Inter, sans-serif) !important;
  color: #334155 !important;
}
.rl .rl-selos b, .rl .rl-selos i {
  color: #15803d !important; font-style: normal !important; margin-right: 4px;
}

.rl .rl-photo { position: relative !important; background-size: cover !important; background-position: center 45% !important; }
.rl .rl-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.rl-selo {
  position: absolute !important; left: 12px !important; top: 12px !important;
  background: #166534 !important; color: #fff !important;
  font: 800 9.5px/1 var(--font-b, Inter, sans-serif) !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  padding: 6px 10px !important; border-radius: 999px !important;
}

/*ajustes-626-menumega.css*/
/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL VTDIGITAL v6.29.5 — MEGA-MENU EXECUTIVO + GAVETA MOBILE + BARRA NAVY
   1. Mega-Menu Desktop (≥ 961px): 7 categorias organizadas em 1 linha:
      Catálogo (só miniatura 42×42 antes do nome, sem foto maior lateral) ·
      Gráfica & Papelaria · Adesivos & Etiquetas · Fotos & Polaroid ·
      Brindes · Impressão 3D (separado) · Atendimento (com Gabaritos).
   2. Gaveta Mobile (≤ 960px): todas as seções sincronizadas sem páginas órfãs
      e sem emojis quebrados (zero 🪪 / ▯).
   3. Página #/catalogo: filtro e 3 cards visuais de Fotos & Polaroid c/ fotos.
   4. Barra Executiva Navy (.vtx-exec-foot / .polx-exec-foot): padronizada e
      visível desde a abertura em todos os módulos do Portal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BARRA DE TOPO DO MEGA-MENU (escondida no celular ≤ 960px) ── */
.aj626-bar {
  display: none;
}

.aj626-mae {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  height: 34px;
  padding: 0 9px;
  border-radius: 9px;
  font: 600 12px/1 var(--font-b, Inter, system-ui, sans-serif);
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.14s ease, color 0.14s ease;
}
.aj626-mae:hover,
.aj626-mae.hv {
  color: #082040;
  background: #F1F5F9;
}
.aj626-mae.on {
  color: #3B3A96;
  background: #EEF0FF;
  font-weight: 700;
}
.aj626-mae .st {
  font-size: 8px;
  color: #7B8AA0;
  transition: transform 0.15s ease;
}
.aj626-mae.hv .st {
  transform: rotate(180deg);
}

/* ── PAINEL DROPDOWN DO MEGA-MENU ── */
.aj626-p {
  position: fixed;
  z-index: 9400;
  width: 530px;
  max-width: calc(100vw - 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  background: #FFFFFF;
  border: 1px solid #DCE3EC;
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(8, 32, 64, 0.32);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.aj626-p.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Modo Catálogo: SÓ a miniatura antes do nome, SEM foto maior na lateral */
.aj626-p.single-col {
  width: 520px;
  grid-template-columns: minmax(0, 1fr);
}
.aj626-p.single-col .aj626-foto {
  display: none !important;
}

.aj626-p::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--seta, 24px);
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-left: 1px solid #DCE3EC;
  border-top: 1px solid #DCE3EC;
  transform: rotate(45deg);
  z-index: 3;
}

.aj626-esq {
  padding: 10px 11px 11px;
  min-width: 0;
}
.aj626-tit {
  display: block;
  font: 800 9.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8A9BB0;
  padding: 2px 8px 7px;
}
.aj626-p ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.aj626-p li a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1E293B;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background 0.12s ease, color 0.12s ease;
  min-width: 0;
}
.aj626-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #F1F5F9;
  background-size: cover;
  background-position: center;
  border: 1px solid #E2E8F0;
  flex: 0 0 36px;
}
.aj626-p.single-col .aj626-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 42px;
}
.aj626-txwrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aj626-p li a .tx {
  font: 700 12.5px/1.22 var(--font-b, Inter, sans-serif);
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aj626-sub {
  font: 500 10.5px/1.25 var(--font-b, Inter, sans-serif);
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aj626-prc {
  font: 700 10px/1 var(--font-b, Inter, sans-serif);
  color: #475569;
  background: #F1F5F9;
  padding: 4px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.aj626-p li a .n {
  font: 800 9.5px/1 ui-monospace, monospace;
  color: #3B3A96;
  background: #EEF0FF;
  border: 1px solid #D6DAFF;
  border-radius: 999px;
  padding: 3px 7px;
  flex: 0 0 auto;
}
.aj626-p li a::after {
  content: "›";
  color: #CBD5E1;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
}
.aj626-p li a:hover,
.aj626-p li a.on {
  background: #F4F5FF;
  color: #3B3A96;
}
.aj626-p li a:hover .tx,
.aj626-p li a.on .tx {
  color: #3B3A96;
}
.aj626-p li a:hover::after,
.aj626-p li a.on::after {
  color: #3B3A96;
}

.aj626-foto {
  min-height: 210px;
  background: #082040 center / cover no-repeat;
  border-left: 1px solid #EEF2F7;
  border-radius: 0 15px 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}
.aj626-cap {
  background: linear-gradient(to top, rgba(8, 32, 64, 0.92) 0%, rgba(8, 32, 64, 0.65) 68%, rgba(8, 32, 64, 0) 100%);
  color: #FFFFFF;
  padding: 28px 12px 12px;
}
.aj626-cap b {
  display: block;
  font: 700 12.5px/1.25 var(--font-b, Inter, sans-serif);
  color: #FFFFFF;
}
.aj626-cap span {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font: 700 10.5px/1.1 var(--font-b, Inter, sans-serif);
  color: #FFFFFF;
}

.aj626-fade {
  animation: aj626fade 0.16s ease;
}
@keyframes aj626fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (min-width: 961px) {
  html.aj626 .deptbar .dept-inner > #nav-main,
  html.aj626 .deptbar .dept-inner > #dept-links {
    display: none !important;
  }
  html.aj626 .aj626-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.aj626 .aj626-bar::-webkit-scrollbar {
    display: none;
  }
}

/* ── 2. GAVETA MOBILE ORGANIZADA (≤ 960px, #drawer-itens) ── */
.aj626-drw-sec {
  display: block;
  padding: 10px 14px 4px;
  margin-top: 4px;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3B3A96;
  border-top: 1px solid #EEF2F7;
}
.aj626-drw-sec:first-child {
  border-top: 0;
  margin-top: 0;
}
.drawer-nav a.aj626-drw-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #082040;
  text-decoration: none;
  border-radius: 10px;
}
.drawer-nav a.aj626-drw-link small {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  flex-shrink: 0;
}
.drawer-nav a.aj626-drw-link.on {
  background: #EEF0FF;
  color: #3B3A96;
}

/* ── 3. CARDS DE FOTOS & POLAROID DENTRO DE #/catalogo ── */
.vtx-cat-studio-card {
  cursor: pointer;
}
.vtx-cat-studio-card .c623-photo {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}
.vtx-cat-studio-card .c623-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.vtx-cat-studio-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(8, 32, 64, 0.86);
  color: #FFFFFF;
  font: 800 9.5px/1 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}

/* ── 4. BARRA EXECUTIVA NAVY UNIFICADA EM TODOS OS MÓDULOS ── */
.vtx-exec-foot,
.polx-exec-foot {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  box-shadow: 0 16px 32px -20px rgba(8, 32, 64, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-sizing: border-box !important;
}
.vtx-exec-foot-wrap {
  max-width: 1200px;
  margin: 18px auto 26px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.vtx-foot-left,
.polx-foot-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}
.vtx-foot-kicker,
.polx-foot-kicker {
  font: 800 10px/1.2 var(--font-b, Inter, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93C5FD !important;
}
.vtx-foot-price-row,
.polx-foot-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.vtx-foot-price,
.polx-foot-price b.gr {
  font: 800 26px/1.05 var(--font-d, Sora, Inter, sans-serif) !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em;
}
.vtx-foot-info,
.polx-foot-price span {
  font: 500 12.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #CBD5E1 !important;
}
.vtx-foot-sub {
  font: 500 11.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #93C5FD;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vtx-foot-lgpd {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font: 500 11.5px/1.35 var(--font-b, Inter, sans-serif);
  color: #E2E8F0;
  cursor: pointer;
  margin-top: 3px;
}
.vtx-foot-lgpd input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: #22C55E;
  flex-shrink: 0;
}

.vtx-foot-actions,
.polx-foot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vtx-btn-ghost,
.polx-exec-foot .pol-env {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  min-height: 44px;
  font: 700 12.5px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-ghost:hover,
.polx-exec-foot .pol-env:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}
.vtx-btn-main,
.polx-exec-foot .pol-add {
  appearance: none;
  background: #FFFFFF !important;
  color: #082040 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  min-height: 44px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-main:disabled,
.vtx-btn-main.is-disabled,
.polx-exec-foot .pol-add:disabled {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
.vtx-btn-close,
.polx-exec-foot .pol-close {
  appearance: none;
  background: #22C55E !important;
  color: #052E16 !important;
  border: 1px solid #22C55E !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-height: 44px;
  font: 800 13px/1.1 var(--font-b, Inter, sans-serif) !important;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vtx-btn-close.is-subtle,
.polx-exec-foot .pol-close.is-subtle {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #BBF7D0 !important;
  border: 1px solid rgba(34, 197, 94, 0.42) !important;
}

/* Revelação de Fotos: barra original fica oculta visualmente (mas funcional para fotos.js)
   enquanto a Barra Executiva #vtx-bar-fotos fica sempre visível desde 0 fotos */
body.vtx-has-fotos-bar #barra {
  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: 0 !important;
}

/* Foto 3×4 Passo 4 (#fd-p4): transforma .fd-qty-bar na Barra Executiva Navy */
#fd-p4 .fd-qty-bar {
  background: linear-gradient(125deg, #082040 0%, #0F3562 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 32px -20px rgba(8, 32, 64, 0.55) !important;
}
#fd-p4 .fd-qty-bar .fd-qty-head b {
  color: #93C5FD !important;
  font-size: 10.5px !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}
#fd-p4 .fd-qty-bar #fd-qty-total,
#fd-p4 .fd-qty-bar #fd-qty-total b {
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper b {
  color: #FFFFFF !important;
}
#fd-p4 .fd-qty-bar .fd-qty-stepper button {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}
#fd-p4 .fd-qty-bar #fd-p4-next {
  background: #22C55E !important;
  color: #052E16 !important;
  border-color: #22C55E !important;
  font-weight: 800 !important;
}
#fd-p4 .vtx-fd-sub {
  font-size: 11.5px;
  color: #93C5FD;
  margin: 4px 0 10px;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .foot .f-grid.f2,
  .f-grid.f2 {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 1.5fr) !important;
  }
}

@media (max-width: 680px) {
  .vtx-exec-foot,
  .polx-exec-foot {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  .vtx-foot-actions,
  .polx-foot-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .vtx-btn-ghost,
  .vtx-btn-main,
  .vtx-btn-close,
  .polx-exec-foot .pol-env,
  .polx-exec-foot .pol-add,
  .polx-exec-foot .pol-close {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj626-p,
  .aj626-mae .st,
  .aj626-fade {
    transition: none;
    animation: none;
  }
}

/* Início separado dos botões indexados por departamento. */
#aj626-bar .aj626-inicio {
  height:34px; display:inline-flex; align-items:center; flex:0 0 auto;
  border-radius:9px; padding:0 11px; text-decoration:none; white-space:nowrap;
  font:700 12px/1 var(--font-b,Inter,system-ui,sans-serif); color:#3b3a96;
}
#aj626-bar .aj626-inicio.on,#aj626-bar .aj626-inicio:hover { background:#eef0ff; }
@media(min-width:961px) and (max-width:1100px){
  #aj626-bar{gap:0!important}
  #aj626-bar .aj626-mae{padding:0 3px!important;gap:2px!important;font-size:10px!important}
  #aj626-bar .aj626-inicio{padding:0 5px;font-size:10px}
}

/*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; }
}


/*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;
  }
}

/*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;
  }
}


/*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;
  }
}


/*ajustes-631-acabamento.css*/
/* ════════════════════════════════════════════════════════════════════
   ajustes-631-acabamento.css — 6.31.0 (01/11/2026)

   Camada de ACABAMENTO: área do cliente, fotos e polaroid.
   Só aparência. Nenhuma regra aqui muda cálculo, preço, frete ou
   gravação — nada de JS, nada de markup novo.

   ── O que esta camada conserta ──────────────────────────────────────
   1. PALETA. O site tem hoje DUAS marcas conviventes: a identidade
      (índigo #3B3A96 sobre creme #F4F1EA, definida em
      camada-621-identidade.css) e uma paleta azul antiga que ainda
      vaza nos módulos por --vt-* (--vt-brand:#0888c8, em
      ajustes-620-modulos.css). Resultado visível: o card selecionado
      fica azul, o resto da loja é índigo. Aqui os --vt-* são
      reapontados para a identidade.

   2. A "tira arco-íris". O cartão de pedido desenhava uma barrinha
      com degradê amarelo→rosa→azul→violeta antes do número
      (.order .top b::before). Vira a barra da marca.

   3. HIERARQUIA. Número, data, valor e etapa tinham pesos parecidos.
      Aqui: número e valor em Sora, rótulos em caixa-alta de 10 px,
      números tabulares no dinheiro.

   4. AVALIAÇÃO. A caixa era rosa (#FFF9FC/#F3C4D8) e parecia erro.
      Vira creme dourado na pergunta e verde na confirmação. A marcação
      .aval-estrelas button[data-n] NÃO muda (o teste da estrela usa).

   5. DUAS TELAS. Em ≥1024 px os cartões de pedido e de balcão ficam em
      duas colunas e os cards de módulo ganham largura mínima maior.

   Rollback: remover o <link> desta camada dos HTML. Nada mais depende
   dela.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. a identidade manda ────────────────────────────────────────── */
:root{
  /* módulos (ajustes-620-modulos.css) passam a usar a marca da casa */
  --vt-brand:#3B3A96;
  --vt-ink:#191842;
  --vt-line:#E3DED2;
  --vt-cream:#F4F1EA;
  --vt-bg:#F4F1EA;
  --vt-muted:#5F5C6B;
  --vt-muted2:#8A8578;
  --vt-ok:#0F7A3D;
  --vt-ok-bg:#EAF6EE;

  /* azuis de apoio viram índigo/violeta da identidade */
  --brand-2:#5B5BD6;
  --brand-soft:#ECEBF8;
  --brand-ink:#2F2E7A;
}

/* ── 2. tipografia e números ──────────────────────────────────────── */
.money, .order .val, .fpc .fpc-p, .pol-kit .pr, .exec-status-grid b{
  font-variant-numeric:tabular-nums;
}
/* rótulo pequeno no padrão único: 10 px, caixa-alta, tracking */
.exec-status-grid small,
.balcao-meta,
.tabs + * .lab,
.ft-banner-eyebrow,
.pb-eyebrow{
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ── 3. ÁREA DO CLIENTE ───────────────────────────────────────────── */

/* abas: controle segmentado, sem "esticar" o texto em 5 colunas */
.tabs{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  padding:4px !important;
  gap:3px !important;
  box-shadow:none !important;
}
.tabs button{
  min-height:38px;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  border-radius:10px !important;
  color:var(--muted) !important;
  padding:9px 6px !important;
}
.tabs button.on{
  background:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 6px 14px -10px rgba(59,58,150,.9) !important;
}

/* cartão de pedido (orçamento do site) */
.order{
  border-left-width:3px !important;
  border-left-color:var(--brand-soft) !important;
  border-radius:15px !important;
  padding:16px 17px !important;
}
.order:hover{border-left-color:var(--brand) !important; transform:none !important}
/* a barrinha arco-íris vira a barra da marca */
.order .top b::before{
  background:var(--brand) !important;
  width:3px !important;
  height:17px !important;
  border-radius:99px !important;
}
.order .top b{font-size:14.5px !important; letter-spacing:-.01em !important}
.order .when{font-size:11.5px !important; color:var(--muted-2) !important}

.exec-status-grid{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:11px 12px !important;
}
.exec-status-grid small{
  font-size:9px !important; font-weight:800 !important; color:var(--muted-2) !important; margin-bottom:3px;
}
.exec-status-grid b{font-size:12.5px !important; color:var(--ink) !important}
.exec-order-next{font-size:12px !important; line-height:1.5 !important; color:var(--muted) !important}

.exec-fin-status{
  border-radius:99px !important;
  font:800 9.5px/1 var(--font-b) !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:6px 9px !important;
}

/* ações: um primário claro, o resto discreto */
.exec-row-actions{gap:7px !important}
.exec-row-actions .btn{min-height:38px; font-size:12px !important; border-radius:10px !important}

/* pedido de balcão */
.balcao-h b{font-size:14px !important; color:var(--ink) !important}
.balcao-h span{font-size:11.5px !important; line-height:1.5 !important}
.balcao-card{
  border-radius:14px !important;
  border:1px solid var(--line) !important;
  padding:13px 14px !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
}
.balcao-top b{font-size:13.5px !important; letter-spacing:-.01em !important}
.balcao-st{
  font-family:var(--font-b) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  padding:5px 8px !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
}
.balcao-st::before{
  content:""; width:5px; height:5px; border-radius:99px; background:currentColor; display:block;
}
.balcao-meta{font-size:11.5px !important; color:var(--muted-2) !important; margin-top:4px !important}
.balcao-linha{
  background:var(--paper) !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  color:#4a4a5e !important;
  padding:7px 10px !important;
}
.balcao-wa{
  font-size:12px !important;
  color:var(--brand) !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  min-height:32px;
}

/* avaliação: de rosa-choque para creme dourado */
.aval-l3{
  background:#FDFAF3 !important;
  border:1px solid #EADFC6 !important;
  border-radius:13px !important;
  padding:12px 13px !important;
}
.aval-top b{font-size:13px !important; color:#6B4A0B !important}
.aval-estrelas{gap:7px !important}
.aval-estrelas button{
  width:46px !important;
  flex:0 0 auto;
  height:44px !important;
  border-radius:10px !important;
  border:1px solid #E3D6BB !important;
  background:#fff !important;
  color:#C9B78F !important;
  font-size:18px !important;
  transition:transform .12s, border-color .12s, background .12s;
}
.aval-estrelas button:hover{border-color:#D9AE54 !important; transform:translateY(-1px)}
.aval-estrelas button.on{
  background:#FFF6E3 !important;
  border-color:#D9AE54 !important;
  color:#C08A16 !important;
}
.aval-dica{color:#8A6A2B !important; font-size:11px !important}
.aval-google{min-height:40px; border-radius:10px !important}

/* resumo da conta: números com peso, rótulo discreto */
.exec-conta-stats>div{
  border-radius:13px !important;
  padding:14px 16px !important;
  border:1px solid var(--line) !important;
}
.exec-conta-stats b{font-size:23px !important; letter-spacing:-.02em}
.exec-conta-stats span{
  font-size:9px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:var(--muted-2) !important; margin-top:2px;
}

/* estado vazio */
.empty{
  border-radius:14px !important;
  border:1px dashed #DDD6C7 !important;
  background:#fff !important;
}
.empty b{font-size:14px !important}

/* ── 4. MÓDULOS: FOTOS E POLAROID ─────────────────────────────────── */

/* banner: mesma pele nos dois módulos */
.ft-banner, .pol-banner{
  border-radius:18px !important;
  border:1px solid #EADFCB !important;
  box-shadow:0 16px 34px -28px rgba(8,32,64,.55) !important;
}
.ft-banner-eyebrow, .pb-eyebrow{
  font-family:var(--font-b) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  color:#8A8272 !important;
}
.ft-banner h1, .pb-tit{
  letter-spacing:-.015em !important;
  line-height:1.08 !important;
}
.ft-banner-sub, .pb-sub{
  font-size:13px !important;
  line-height:1.55 !important;
  color:#5F5A4E !important;
  max-width:52ch;
}
/* botões de faixa de preço: brancos, com o valor em índigo */
.ft-pill, .pb-pills > *{
  background:#fff !important;
  border:1px solid #E4DCCB !important;
  border-radius:9px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:#4A4438 !important;
  padding:8px 10px !important;
  box-shadow:none !important;
}
.ft-pill b, .pb-pills b{color:var(--brand) !important}
.ft-pill.on, .pb-pills .on{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 2px rgba(59,58,150,.12) !important;
}
/* botão principal do banner + link do WhatsApp */
.btn-hero-dark, .pb-btn{
  background:var(--brand) !important;
  border-radius:11px !important;
  min-height:44px;
  font-size:13px !important;
  box-shadow:0 10px 20px -14px rgba(59,58,150,.95) !important;
}
.btn-hero-dark:hover, .pb-btn:hover{background:#2F2E7A !important}
.ft-banner-garantias, .pb-selos{font-size:11px !important; color:#6C6555 !important}
.ft-banner-garantias b, .pb-selos i{color:var(--ok) !important}

/* selo "a partir de R$ …" */
.vt-selo-preco{
  background:rgba(25,24,66,.92) !important;
  border-radius:99px !important;
  font:700 10.5px/1 var(--font-b) !important;
  padding:7px 11px !important;
  backdrop-filter:blur(4px);
}
.vt-selo-preco b{font-weight:800 !important}

/* card de escolha (fotos e polaroid) */
.fpc-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important}
.fpc, .pol-kit{
  border-radius:15px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(8,32,64,.04) !important;
  overflow:hidden;
}
.fpc:hover, .pol-kit:hover{border-color:#CFC7E6 !important; transform:none !important}
.fpc .fpc-photo, .pol-kit .ph{height:150px !important}
.fpc .fpc-n, .pol-kit h2{font-size:14px !important; letter-spacing:-.01em !important}
.fpc .fpc-apelido, .pol-kit .apelido{font-size:11px !important; color:var(--muted) !important}
.fpc .fpc-price-row, .pol-kit .pr{border-top:1px solid var(--line) !important}
.fpc .fpc-p, .pol-kit .pr b{font-size:22px !important; letter-spacing:-.025em !important; color:var(--ink) !important}
/* faixas de desconto: pílulas creme em vez de verde-água */
.fpc .fpc-tier{
  background:#F6F2E9 !important;
  color:#6B5A2E !important;
  border:1px solid #E9DFC9 !important;
  border-radius:7px !important;
  font-size:10px !important;
  font-weight:700 !important;
}
.fpc .fpc-tier b{color:#4A3D16 !important}
.fpc .fpc-bullets li::before, .pol-kit ul li::before{
  background:#CFC7E6 !important;
  border-radius:99px !important;
  width:5px !important; height:5px !important;
}
.fpc .fpc-check{border-radius:99px !important}
/* botão "escolher" no pé do card */
.vt-cardfoot .go, .fpc .vt-cardfoot .go{font-size:11.5px !important; font-weight:800 !important}
.fpc.on .vt-cardfoot .go, .pol-kit.on .vt-cardfoot .go{color:var(--ok) !important}

/* montador do polaroid: gabarito e resumo */
.pol-prev, .pol-build, .pol-slots{border-radius:14px !important}
.polx-clear-btn, .polx-batch-btn{border-radius:10px !important; font-size:11.5px !important}
.polx-foot-price b{font-variant-numeric:tabular-nums}

/* ── 5. DUAS TELAS ────────────────────────────────────────────────── */
@media (min-width:1024px){
  /* A área do cliente aproveita a largura — mas SEM virar grade.
     Tentativa descartada em 01/11: `*:has(> .order){display:grid}` pegava
     o .wrap inteiro (o cartão é filho direto dele) e jogava abas, números e
     pedidos de balcão em duas colunas. Duas colunas aqui exigem um
     contêiner próprio na marcação — fica para a próxima leva. */
  #p-conta .wrap, .wrap:has(.order){max-width:1120px}
  .balcao-card{margin-top:8px !important}

  /* cards de módulo mais largos, 3 por linha em tela cheia */
  .fpc-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:14px !important}
  .ft-banner, .pol-banner{min-height:330px}
  .ft-banner h1, .pb-tit{font-size:clamp(30px,3.2vw,40px) !important}
}
@media (max-width:560px){
  .exec-status-grid{grid-template-columns:1fr 1fr !important}
  .exec-conta-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important}
  .exec-conta-stats>div{padding:11px 12px !important}
  .exec-conta-stats b{font-size:19px !important}
  .fpc-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important}
  .fpc .fpc-photo{height:110px !important}
  /* no celular as estrelas ocupam a largura toda (alvo grande para o dedo) */
  .aval-estrelas button{flex:1 1 0 !important; width:auto !important}
}

/*ajustes-633-kits.css*/
/* 6.32.4 — nada de texto cortado nos cards de produto
   (1) bullets dos kits: estavam com nowrap + overflow:hidden + ellipsis
       → "couchê 250 g · verniz UV total na…" em cartões (246 px),
         "Ideal para quadros de parede e…" em fotos (258 px).
   (2) apelido ("Tamanho Clássico · 15 × 10 cm"), faixas de preço
       ("3+ R$ 22,90 · 10+ R$ 19,90"), pílulas do polaroid na home
       ("4 fotos grandes · R$ 9,90") e o selo da foto também morriam em "…",
       principalmente no celular e em 1024 px.
   Regra: onde não cabe numa linha, quebra em duas — nunca "…". */
.fpc .fpc-bullets li,
.mat-kit .mat-bullets li,
.pol-kit .corpo ul li,
.pol-kit ul li{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  line-height:1.45 !important;
}

/* apelido do tamanho / material */
.fpc .fpc-apelido,
.mat-kit .mat-apelido,
.pol-kit .apelido{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.35 !important;
}

/* faixas de preço (3+, 10+, 30+) — antes a caixa tinha altura fixa de 24 px */
.fpc .fpc-tiers,
.mat-kit .mat-tiers,
.pol-kit .pol-tiers,
.pol-tiers,
.store-tiers{
  height:auto !important;
  min-height:24px !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
  row-gap:4px !important;
  align-items:center !important;
}
.fpc .fpc-tier,
.mat-kit .mat-tier,
.store-tiers > *,
.pol-tiers > *{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* pílulas do card do polaroid na home */
#p-inicio .vb2-pill,
.vb2-pill{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.25 !important;
  height:auto !important;
}

/* selo em cima da foto (★ MAIS PEDIDO · …) */
.fpc-badge,
.fpc .fpc-badge{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
  max-width:calc(100% - 16px) !important;
}

/* etapas do montador do polaroid: "Polaroid 12×8 — kit com 4 fotos" saía "…" no celular */
.vtx-step .txt,
.vtx-step small,
.vtx-steps .txt,
.vtx-step.done .txt{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.3 !important;
}

/* 6.32.5 — preço e unidade no mesmo card, sem sair pela borda
   No celular o card tem 179 px: "R$ 14,90 / ampliação" passava 2 px da
   borda e o "o" final sumia; "R$ 2,49 / foto avulsa" passava 7 px. O card
   tem overflow:hidden, então o texto era cortado em silêncio — nenhum
   detector de estouro de página pegava isso. */
.fpc .fpc-price-row,
.mat-kit .mat-price-row,
.pol-kit .pr{
  flex-wrap:wrap !important;
  white-space:normal !important;
  row-gap:2px !important;
}
.fpc .fpc-p,
.mat-kit .mat-price,
.pol-kit .pr b{
  flex-wrap:wrap !important;
  max-width:100% !important;
}
.fpc .fpc-price-row small,
.mat-kit .mat-price-row small,
.fpc .fpc-p small,
.mat-kit .mat-price small,
.pol-kit .pr small,
.pol-kit .pr span{
  white-space:normal !important;
  overflow:visible !important;
  line-height:1.2 !important;
}

/*correcoes-layout.css*/
/* ============================================================================
   CORREÇÕES DE LAYOUT — VTDigital · 04/11/2026 · versão final
   Medido no site no ar com Chromium 1280×900 e 390×844.
   Entra só o que foi testado e não piorou nada. O que parecia correção e piorou
   ficou de fora, com a medição anotada — está tudo no fim do arquivo.
   Só CSS: nenhum HTML e nenhum JS precisam mudar.
   Instalação: subir este arquivo e incluir UMA linha em cada página, depois do
   último CSS de ajustes (ajustes-633-kits.css):
     <link rel="stylesheet" href="correcoes-layout.css?v=6.33.5">
   ========================================================================== */

/* ============================ 1. A PÁGINA QUE PULA AO TROCAR DE CARD ======
   Polaroid (e a página de cartões usa as mesmas peças).
   ANTES: altura da página 2.574 / 3.150 / 2.961 px conforme o kit escolhido
          → 576 px de sobe-e-desce. No celular: 5.097 / 6.048 / 5.021 → 1.027 px.
   DEPOIS: 0 px de variação nas duas larguras (medido, não estimado).
   ========================================================================= */

/* (a) os cards perdem a barra "prévia ao lado / Escolher" depois do primeiro
       clique e a linha encolhe 48 px — e o card escolhido desalinha a base */
.pol-kits { align-items: stretch; }
.pol-kit  { min-height: 365px; }

/* (b) a prévia da moldura tem altura de conteúdo: 192 / 361 / 369 px por kit */
#frames { min-height: 370px; }

/* (c) a grade de fotos cresce com o número de fotos (444 → 666 px) e a barra
       "Mostrando 1–6 de 9" só existe acima de 6 fotos (0 → 56 px):
       janela fixa com rolagem própria + barra sempre reservada */
#slots     { height: 520px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
#pol-pager { min-height: 56px; }

@media (max-width: 760px) {
  .pol-kit           { min-height: 352px; }
  #frames            { min-height: 0; height: 430px; overflow-y: auto; overscroll-behavior: contain; }
  #slots             { height: 380px; }
  #pol-pager         { min-height: 98px; }
  #montar .polx-head { min-height: 225px; }   /* o nome do kit quebra uma linha a mais */
}

/* ============================ 2. ALVO DE TOQUE NO CELULAR =================
   Botões de 24 a 30 px de altura para o dedo. Medido antes de corrigir:
     foto-documento: 4 pastilhas de preço de 27 px + abas de 36 px
     agendas:        4 amostras de cor de 24 px
     fotos:          aba "Ver Todos" de 30 px
   Vai para 40 px (o ideal de acessibilidade é 44 — 40 já resolve o dedo sem
   engordar as pastilhas e quebrar o desenho do topo).
   ========================================================================= */
@media (max-width: 760px) {
  .rl-pills .pb-pill,
  .fd-hero-pill,
  .fd-tab,
  .ag-swatches button,
  .ft-ptab { min-height: 40px; }

  .ag-swatches button { padding-block: 8px; }
}

/* ==========================================================================
   O QUE FOI TESTADO E FICOU DE FORA (com o número que justifica)
   ==========================================================================

   1) RESERVAR A ALTURA DOS BLOCOS QUE CARREGAM DEPOIS (para matar o salto ao
      abrir). Não funciona: o conteúdo real fica MENOR que a reserva e o bloco
      encolhe na chegada — cria o salto que se queria evitar.
      Medido: fotos 0,18 → 0,39 (piorou 2×) · polaroid 0,01 → 0,29 (piorou).
      Na home e no catálogo quase não mexeu (0,93 → 0,95 / 0,92 → 0,93).

   2) ALINHAR A COLUNA EM 1180 EM TODAS AS PÁGINAS. Também piora o salto: o
      conteúdo é montado depois e, com a coluna mais estreita, ele re-quebra e
      empurra tudo.
      Medido: fotos 0,18 → 0,33 · foto 3×4 0,30 → 0,57.
      Ou seja: alinhar a coluna só faz sentido DEPOIS de resolver o item 3.

   3) O SALTO GRANDE (0,86) CONTINUA, e não é CSS. Aos ~900 ms o app troca o
      conteúdo inteiro do <main>: ele está com 21 px de altura e passa a 776 px,
      e o rodapé sai da tela. Enquanto a página não for pintada antes de buscar
      os dados (ou vier pronta do servidor), esse salto existe — reservar altura
      por bloco não resolve porque o problema é o <main> inteiro.
      É mudança no app.js, não no CSS.

   4) IMAGENS SEM LARGURA E ALTURA: 29 de 30 na home e 48 de 49 no catálogo
      vêm sem width/height. Isso se corrige no HTML de cada imagem, não aqui.
   ========================================================================== */

/* ======================= 3. A PÁGINA NÃO PODE "MUDAR" AO TROCAR O CARD ===
   Medido no ar (6.33.5), altura da página ao trocar entre os três kits:
     1024 px → 12x8 3162 · 9x6 3162 · tripla 3114  →  48 px de salto
     1100 px → 3132 ... 14 px de salto
     360 px  → 27 a 40 px de salto
   Três peças mudavam de altura conforme o kit escolhido:
     1) .polx-head        — o nome do kit leva 1, 2 ou 3 linhas   (77 / 126 / 143 px)
     2) #pol-steps        — "Faltam 9 foto(s)" quebra em 1..5 linhas (49 a 149 px)
     3) .polx-foot-price  — "R$ 12,90" + "1 kit × ..." quebra em 2 linhas (27 / 53 px)
   Cada faixa abaixo é o PIOR caso medido de 10 em 10 px, de 320 a 2560 px, nos 3 kits.
   Altura reservada = altura do conteúdo → a página nunca cresce nem encolhe ao trocar. */

#pol-steps        { min-height: 149px; }
.polx-foot-price  { min-height: 27px; }

@media (min-width: 340px)  { #pol-steps { min-height: 135px; } }
@media (min-width: 370px)  { #pol-steps { min-height: 121px; } }
@media (min-width: 380px)  { #pol-steps { min-height: 108px; } }
@media (min-width: 590px)  { #pol-steps { min-height: 94px;  } }
@media (min-width: 690px)  { #pol-steps { min-height: 106px; } }
@media (min-width: 990px)  { #pol-steps { min-height: 63px;  } }
@media (min-width: 1180px) { #pol-steps { min-height: 49px;  } }

@media (max-width: 760px)  { .polx-foot-price { min-height: 53px; } }
@media (min-width: 761px) and (max-width: 1179px) { .polx-foot-price { min-height: 53px; } }

/* cabeçalho do kit: 77 px de 1100 para cima; 126/143 nas larguras onde o nome quebra */
@media (min-width: 761px) and (max-width: 820px)  { #montar .polx-head { min-height: 143px; } }
@media (min-width: 821px) and (max-width: 1099px) { #montar .polx-head { min-height: 126px; } }

/* tira de prévia no celular: quadro proporcional à tela — em 390 px o kit de 9 fotos
   virava 5 linhas (913 px) dentro de uma janela de 430 px e 5 quadros saíam da caixa */
@media (max-width: 760px) {
  #frames .pol-frame                  { width: min(140px, calc(50% - 6px)); }
  #frames[data-kit="9x6"] .pol-frame  { width: min(84px, calc(33.333% - 8px)); }
  #frames[data-kit="9x6"] .pol-frame .f { height: 29.88px; }
  #frames[data-kit="tripla"] .pol-frame { width: min(112px, calc(50% - 6px)); }
}

/* barra de paginação das fotos: "Mostrando 1–6 de 9" só aparece com mais de 6 fotos e,
   em tela de 350 px para baixo, quebra em outra linha (98 → 137 px) */
@media (max-width: 350px) { #pol-pager { min-height: 137px; } }