/* LIVU na Loja Integrada (gerado por loja-integrada/build_li.py; não edite aqui) */ /* ===== seções do início (mesmo CSS do site, dentro de #livu-home) ===== */ #livu-home{font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);overflow-x:clip;font-size:16px;text-align:left} #livu-home *,#livu-home *::before,#livu-home *::after{box-sizing:border-box} #livu-home :where(h1,h2,h3,h4,p,a,span,li,small,b,strong,button,figcaption){font-family:inherit;letter-spacing:inherit} #livu-home img,#livu-home svg{display:block;max-width:100%} #livu-home button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;box-shadow:none;text-shadow:none;border-radius:0;line-height:inherit;text-transform:none} #livu-home a,#livu-home a:where(:hover,:focus){color:inherit;text-decoration:none} #livu-home h1,#livu-home h2,#livu-home h3,#livu-home h4,#livu-home p,#livu-home figure{margin:0;font-weight:inherit;color:inherit;text-transform:none;letter-spacing:normal;line-height:inherit} #livu-home h1{font-size:2em;font-weight:700}#livu-home h2{font-size:1.5em;font-weight:700}#livu-home h3{font-size:1.17em;font-weight:700} #livu-home ul,#livu-home ol{margin:1em 0;padding-left:40px} #livu-home li{line-height:inherit} #livu-home b,#livu-home strong{font-weight:700} #livu-home small{font-size:smaller} #livu-home .btn{background-image:none;text-shadow:none;border:0;box-shadow:none;filter:none;line-height:1.2;vertical-align:middle;margin:0;color:inherit} #livu-home :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px} #livu-home [hidden]{display:none!important} #livu-home{--mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --bg: #F3F2EF; --surface: #FFFFFF; --ink: #0F1115; --ink-2: #3A3F48; --muted: #5E6573; --line: rgba(15, 17, 21, .09); --line-2: rgba(15, 17, 21, .16); --gutter: clamp(16px, 4vw, 32px); --media: #ECEEF2; --hero-bg: #E9EDF6; --tile: #14171C; --brand: #2F5BFF; --pix: #067552; --pix-bright: #2EE6A6; --pix-soft: #E1F6EE; --wa: #25D366; --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px; --shadow-1: 0 1px 2px rgba(15, 17, 21, .04), 0 10px 28px -14px rgba(15, 17, 21, .14); --shadow-2: 0 2px 6px rgba(15, 17, 21, .06), 0 34px 70px -26px rgba(15, 17, 21, .34); --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.36, .5, 1); --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;} #livu-home .ico{flex: none;} #livu-home .btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .25s;} #livu-home .btn:hover{transform: translateY(-2px);} #livu-home .btn:active{transform: scale(.98);} #livu-home .btn-primary{background: var(--ink); color: #fff;} #livu-home .btn-primary:hover{box-shadow: 0 18px 32px -14px rgba(15, 17, 21, .6);} #livu-home .btn-dark{background: var(--ink); color: #fff;} #livu-home .btn-light{background: #fff; color: var(--ink); height: 48px;} #livu-home .btn:disabled{opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;} #livu-home .round{width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); display: grid; place-items: center; transition: transform .3s var(--spring), background .2s;} #livu-home .round:hover{transform: scale(1.08);} #livu-home .round.sm{width: 40px; height: 40px; background: rgba(15, 17, 21, .06); box-shadow: none;} #livu-home .section{max-width: 1160px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 32px) 0;} #livu-home .section.narrow{max-width: 860px;} #livu-home .section.tight{padding-top: clamp(28px, 4vw, 56px);} #livu-home .section-head{max-width: 720px; margin-bottom: clamp(26px, 4vw, 48px);} #livu-home .section-head.center{margin-inline: auto; text-align: center;} #livu-home .section-head h1,#livu-home .section-head h2{font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin: 16px 0 12px;} #livu-home .section-head p{color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); max-width: 560px;} #livu-home .section-head.center p{margin-inline: auto;} #livu-home .eyebrow{display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);} #livu-home .eyebrow i{width: 6px; height: 6px; background: var(--brand);} #livu-home .eyebrow.light{color: #9AA1AD;} #livu-home .reveal{opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease);} #livu-home .reveal.in{opacity: 1; transform: none;} #livu-home .kicker{margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);} #livu-home .board{position: relative; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden;} #livu-home .board-slides{display: grid; min-height: clamp(480px, calc(100svh - 150px), 640px);} #livu-home .slide{grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); padding-inline: max(var(--gutter), calc((100vw - 1160px) / 2 + var(--gutter))); background: var(--tone, #fff); visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s;} #livu-home .slide.is-on{visibility: visible; opacity: 1; transition: opacity .6s ease .25s;} #livu-home .slide-copy{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(40px, 6vw, 88px) 0 clamp(96px, 9vw, 128px);} #livu-home .slide-copy > *{opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease);} #livu-home .slide.is-on .slide-copy > *{opacity: 1; transform: none;} #livu-home .slide.is-on .slide-copy > :nth-child(1){transition-delay: .1s;} #livu-home .slide.is-on .slide-copy > :nth-child(2){transition-delay: .2s;} #livu-home .slide.is-on .slide-copy > :nth-child(3){transition-delay: .32s;} #livu-home .slide.is-on .slide-copy > :nth-child(4){transition-delay: .42s;} #livu-home .slide.is-on .slide-copy > :nth-child(5){transition-delay: .52s;} #livu-home .slide-h{margin: 18px 0 22px; font-size: clamp(38px, 5vw, 72px); line-height: .96; letter-spacing: -.055em; font-weight: 800; text-wrap: balance;} #livu-home .slide-p{max-width: 44ch; color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px);} #livu-home .slide-facts{list-style: none; display: flex; gap: clamp(20px, 3vw, 44px); margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-2);} #livu-home .slide-facts b{display: block; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;} #livu-home .slide-facts small{color: var(--muted); font-size: 13px;} #livu-home .slide-cta{display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px;} #livu-home .slide-price{font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);} #livu-home .slide-price b{color: var(--pix); font-weight: 500;} #livu-home .slide-media{position: relative; margin: clamp(24px, 3.5vw, 44px) 0; align-self: center; height: calc(100% - 2 * clamp(24px, 3.5vw, 44px)); aspect-ratio: 4 / 5; border-radius: 28px; background: #FDFDFD; overflow: hidden; isolation: isolate;} #livu-home .slide-media > img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: clamp(12px, 3vw, 48px); transform: scale(1.06); transition: transform 2s var(--ease);} #livu-home .slide.is-on .slide-media > img{transform: none;} #livu-home .slide-media.photo > img{object-fit: cover; object-position: var(--pos, 50% 42%); padding: 0;} #livu-home .slide-media figcaption{position: absolute; right: 18px; bottom: 54px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);} #livu-home .slide-media.photo figcaption{left: auto; right: 12px; bottom: 8px; padding: 0; font-size: 8.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); background: none; pointer-events: none;} #livu-home .board-slides{touch-action: pan-y;} #livu-home .board-slides img{-webkit-user-drag: none; user-select: none;} #livu-home .board-ui{position: absolute; left: 0; right: 0; bottom: 0; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter) 14px; display: flex; align-items: center; gap: 20px; pointer-events: none;} #livu-home .board-ui > *{pointer-events: auto;} #livu-home .board-count{font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2);} #livu-home .board-bars{display: flex; gap: 8px;} #livu-home .bar-btn{width: clamp(52px, 7vw, 104px); height: 40px; display: grid; align-items: center;} #livu-home .bar-btn i{position: relative; display: block; height: 2px; background: var(--line-2); overflow: hidden;} #livu-home .bar-btn i::after{content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left;} #livu-home .bar-btn.is-on i::after{animation: lv-fill var(--dur, 6.5s) linear forwards;} #livu-home .board.is-paused .bar-btn.is-on i::after{animation-play-state: paused;} #livu-home .band{padding: clamp(56px, 7vw, 96px) 0;} #livu-home .band.white{background: #fff; border-block: 1px solid var(--line);} #livu-home .band.dark{background: #0B0D11; color: #fff;} #livu-home .band-in{max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter);} #livu-home .feature{display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center;} #livu-home .feature.flip{grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);} #livu-home .feature.flip .feature-copy{order: 2;} #livu-home .ana{margin-top: clamp(56px, 8vw, 104px);} #livu-home .ana-stage{width: 100%;} #livu-home .ana-stage.narrow{max-width: 460px; margin-inline: auto;} #livu-home .ana-canvas{position: relative; width: 100%; aspect-ratio: var(--ar, 1 / 1); background: #FDFDFD; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; isolation: isolate;} #livu-home .ana-canvas.ana-lit{background: radial-gradient(120% 90% at 62% 28%, #FFFFFF 0%, #F6F7F9 55%, #ECEEF2 100%);} #livu-home .ana-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} #livu-home .ana-svg{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);} #livu-home .ana-canvas.has-on .ana-svg{opacity: 1;} #livu-home .ana-dim{fill: #fff; fill-opacity: .55;} #livu-home .ana-spot{opacity: 0; transition: opacity .5s var(--ease);} #livu-home .ana-spot.is-on{opacity: 1;} #livu-home .ana-canvas .pin{z-index: 3; width: 26px; height: 26px; margin: -13px; border: 2px solid #fff; box-shadow: 0 6px 16px -4px rgba(15, 17, 21, .35); font-size: 11px;} #livu-home .ana-canvas .pin::before{inset: -8px;} #livu-home .ana-cap{position: absolute; right: 16px; bottom: 16px; z-index: 12; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);} #livu-home .feature h3.ana-h{margin: 14px 0 18px; font-size: clamp(30px, 3.8vw, 52px); line-height: 1; letter-spacing: -.05em; font-weight: 800; text-wrap: balance;} #livu-home .feature h2,#livu-home .band h2{margin: 14px 0 18px; font-size: clamp(30px, 3.8vw, 52px); line-height: 1; letter-spacing: -.05em; font-weight: 800; text-wrap: balance;} #livu-home .feature-copy > p:not(.kicker){max-width: 46ch; color: var(--ink-2); font-size: 16.5px;} #livu-home .hotlist{list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--line-2);} #livu-home .hotlist button{width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 16px 0; border-top: 1px solid var(--line-2); text-align: left; opacity: 1; transition: opacity .35s;} #livu-home .hotlist.has-on button:not(.is-on){opacity: .45;} #livu-home .hotlist .n{padding-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--muted);} #livu-home .hotlist b{font-size: 17px; letter-spacing: -.01em;} #livu-home .hotlist small{grid-column: 2; margin-top: 2px; color: var(--muted); font-size: 14px;} #livu-home .pin{position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px; scale: calc(1 / var(--z, 1)); border-radius: 50%; background: var(--ink); color: #fff; font: 500 12px/1 var(--mono); display: grid; place-items: center; transition: background .3s, transform .4s var(--spring);} #livu-home .pin::before{content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0;} #livu-home .pin.is-on{background: var(--brand); transform: scale(1.1);} #livu-home .pin.is-on::before{animation: lv-ping 1.8s var(--ease) infinite;} #livu-home .band.dark .kicker{color: #8D95A3;} #livu-home .feature-cta{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px;} #livu-home .cat-head{align-items: flex-end; margin-bottom: 22px;} #livu-home .sec-head h2.sec-soft{margin-top: 8px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;} #livu-home .car-nav{display: flex; gap: 10px;} #livu-home .car-nav .round{width: 44px; height: 44px; border: 1px solid var(--line); box-shadow: none;} #livu-home .cat-tiles{display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; cursor: grab;} #livu-home .cat-tiles::-webkit-scrollbar{display: none;} #livu-home .cat-tiles.is-drag{cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;} #livu-home .cat-tiles img{-webkit-user-drag: none;} #livu-home .cat-tile{flex: 0 0 min(760px, 78%); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); padding: 14px; border-radius: 30px; background: #fff; border: 1px solid var(--line);} #livu-home .cat-media{position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #E3E4E8;} #livu-home .car-dots{display: flex; justify-content: center; gap: 2px; margin-top: 14px;} #livu-home .car-dots button{width: 30px; height: 24px; display: grid; place-items: center;} #livu-home .car-dots button::before{content: ''; width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: width .35s var(--ease), background .3s;} #livu-home .car-dots button.is-on::before{width: 24px; background: var(--ink);} #livu-home .cat-media.photo{background: var(--media); border-color: transparent;} #livu-home .cat-media img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1s var(--ease);} #livu-home .cat-tile:hover .cat-media img{transform: scale(1.04);} #livu-home .cat-body{display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 10px 6px 0;} #livu-home .cat-body .kicker{color: var(--brand);} #livu-home .cat-body h3{font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1;} #livu-home .cat-body p{color: var(--muted);} #livu-home .cat-go{display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px;} #livu-home .cat-go-txt{white-space: nowrap;} #livu-home .cat-foot{display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2);} #livu-home .cat-body > p{margin-bottom: 12px;} #livu-home .cat-price{font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);} #livu-home .cat-price b{color: var(--pix); font-weight: 500;} #livu-home .cat-go{transition: transform .4s var(--spring);} #livu-home .cat-tile:hover .cat-go{transform: translateX(6px);} #livu-home .cat-title{margin: 12px 0 10px; font-size: clamp(40px, 5.2vw, 76px); line-height: .95; letter-spacing: -.055em; font-weight: 800;} #livu-home .cat-intro{max-width: 52ch; color: var(--ink-2); font-size: 17px;} #livu-home .grid.few{grid-template-columns: repeat(auto-fill, minmax(220px, 280px));} @media (max-width: 640px){#livu-home .cat-tiles{gap: 12px;}#livu-home .cat-tile{flex-basis: 84%; grid-template-columns: 1fr; gap: 0; padding: 10px; border-radius: 26px;}#livu-home .cat-body{padding: 14px 6px 4px;}#livu-home .car-nav{display: none;}} #livu-home .sec-head{display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px;} #livu-home .sec-head h2{margin-top: 12px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1; letter-spacing: -.05em; font-weight: 800;} #livu-home .rows{list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-2);} #livu-home .rows a{display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-2); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; transition: padding .5s var(--ease);} #livu-home .rows a:hover{padding-left: 10px;} #livu-home .rows small{display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted);} #livu-home .card-media.studio{background: #FDFDFD; border: 1px solid var(--line);} #livu-home .card-media.studio img{object-fit: cover; object-position: 50% 50%;} @media (max-width: 960px){#livu-home .slide{grid-template-columns: 1fr; grid-template-rows: auto auto;}#livu-home .slide-media{height: auto; width: 100%; aspect-ratio: 4 / 5; margin: 0 0 8px; border-radius: 24px;}#livu-home .slide-copy{padding: 36px 0 28px;}#livu-home .slide-media{grid-row: 2;}#livu-home .board-slides{min-height: 0;}#livu-home .board-ui{position: relative; padding-top: 14px;}#livu-home .slide-media figcaption{bottom: 14px;}#livu-home .feature,#livu-home .feature.flip{grid-template-columns: 1fr;}#livu-home .feature.flip .feature-copy{order: 0;}} @media (max-width: 520px){#livu-home .slide-copy{padding: 28px 0 24px;}#livu-home .slide-h{margin: 12px 0 14px; font-size: clamp(34px, 10vw, 44px);}#livu-home .slide-facts{display: none;}#livu-home .slide-cta{margin-top: 22px;}#livu-home .slide-cta .btn{width: 100%;}} @media (prefers-reduced-motion: reduce){#livu-home .bar-btn.is-on i::after{animation: none; transform: scaleX(1);}} #livu-home .card-media{aspect-ratio: 4 / 5;} #livu-home .card-media img,#livu-home .cmp-img img{object-position: 50% 42%;} #livu-home .cmp-img{aspect-ratio: 4 / 5;} #livu-home .link-info img{mix-blend-mode: normal; width: min(100%, 150px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; margin-bottom: 0;} #livu-home .wave-body{display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: center;} #livu-home .wave-body img{width: 100%; max-width: 190px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px;} #livu-home .facts{list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;} #livu-home .facts li{padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .05);} #livu-home .facts b{display: block; font-size: 16px; letter-spacing: -.01em;} #livu-home .facts small{color: #9AA1AD; font-size: 12.5px;} #livu-home .card::after,#livu-home .tile::after,#livu-home .cmp-wrap::after{content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 91, 255, .09), transparent 62%);} #livu-home .tile::after{background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 62%);} #livu-home .card:hover::after,#livu-home .tile:hover::after,#livu-home .cmp-wrap:hover::after{opacity: 1;} #livu-home .cmp-wrap{position: relative; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: clamp(14px, 2vw, 24px); overflow: hidden;} #livu-home .cmp-top{display: flex; justify-content: center; margin-bottom: 14px;} #livu-home .cmp-scroll{overflow-x: auto; scrollbar-width: thin;} #livu-home .cmp{width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;} #livu-home .cmp.swap{animation: lv-fadeUp .5s var(--ease);} #livu-home .cmp th,#livu-home .cmp td{padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14.5px;} #livu-home .cmp tbody th{text-align: left; font-weight: 600; color: var(--ink-2); position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px;} #livu-home .cmp-corner{width: 160px;} #livu-home .cmp-prod{vertical-align: bottom; padding-bottom: 18px;} #livu-home .cmp-open{display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; transition: transform .45s var(--spring);} #livu-home .cmp-open:hover{transform: translateY(-4px);} #livu-home .cmp-img{width: min(140px, 100%); aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--media); margin-bottom: 8px;} #livu-home .cmp-img img{width: 100%; height: 100%; object-fit: cover;} #livu-home .cmp-open b{font-size: 15px;} #livu-home .cmp-open span{font-size: 12.5px; color: var(--muted); font-weight: 500; max-width: 18ch;} #livu-home .cmp-yes,#livu-home .cmp-no{display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;} #livu-home .cmp-yes{background: var(--pix-soft); color: var(--pix);} #livu-home .cmp-no{background: var(--bg); color: #A5ABB6;} #livu-home .cmp-price td{padding-block: 20px;} #livu-home .cmp-price .pix{display: block; font-size: 22px;} #livu-home .cmp-price small{color: var(--muted); font-size: 12px;} #livu-home .cmp-act td,#livu-home .cmp-act th{border-bottom: 0;} #livu-home .cmp-act .btn{height: 44px; padding: 0 20px; font-size: 14px;} #livu-home .seg{position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(15, 17, 21, .06); isolation: isolate; max-width: 100%; overflow-x: auto; scrollbar-width: none;} #livu-home .seg::-webkit-scrollbar{display: none;} #livu-home .seg > [data-value]{position: relative; z-index: 1; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--ink-2); transition: color .35s var(--ease);} #livu-home .seg > [data-value]:hover:not(.is-active){color: var(--ink);} #livu-home .seg > .is-active{color: #fff;} #livu-home .seg > [aria-disabled="true"]{opacity: .38; cursor: not-allowed;} #livu-home .seg-pill{position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 8px 18px -8px rgba(15, 17, 21, .55); opacity: 0; pointer-events: none; transition: transform .6s var(--spring), width .6s var(--spring), height .6s var(--spring), opacity .25s;} #livu-home .seg-pill.ready{opacity: 1;} #livu-home .seg-dark{background: rgba(255, 255, 255, .08);} #livu-home .seg-dark > [data-value]{color: #AEB4BF; padding: 9px 16px; font-size: 13px;} #livu-home .seg-dark > [data-value]:hover:not(.is-active){color: #fff;} #livu-home .seg-dark > .is-active{color: var(--ink);} #livu-home .seg-dark .seg-pill{background: #fff; box-shadow: none;} #livu-home .grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px;} #livu-home .card{position: relative; display: flex; flex-direction: column; transition: transform .55s var(--ease), filter .55s var(--ease), opacity .55s var(--ease);} #livu-home .card::after{display: none;} #livu-home .card-media{position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--media);} #livu-home .card-media::before{content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); background-size: 220% 100%; animation: lv-shimmer 1.6s linear infinite;} #livu-home .card-media:has(img.ready)::before{display: none;} #livu-home .card-media.clickable{cursor: pointer;} #livu-home .card-media img{width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1s var(--ease);} #livu-home .card-media img.ready{opacity: 1; transform: none;} #livu-home .card:hover .card-media img.ready{transform: scale(1.04);} #livu-home .tag{position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;} #livu-home .card-body{display: flex; flex-direction: column; flex: 1; padding: 16px 2px 0;} #livu-home .card-text h3{font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;} #livu-home .card-text p{font-size: 13.5px; color: var(--muted); margin-top: 3px;} #livu-home .card-body .swatches{margin-top: 14px;} #livu-home .card-foot{display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; margin-top: auto; padding-top: 16px;} #livu-home .card-foot .price{display: contents;} #livu-home .card-foot .price-row{grid-column: 1; grid-row: 1;} #livu-home .card-foot .add{grid-column: 2; grid-row: 1;} #livu-home .card-foot .price small{grid-column: 1 / -1; grid-row: 2;} #livu-home .price-row{display: flex; align-items: center; gap: 8px; flex-wrap: wrap;} #livu-home .pix{color: var(--pix); font-weight: 800; letter-spacing: -.02em;} #livu-home .price .pix{font-size: 23px; line-height: 1.1;} #livu-home .pix-badge{display: inline-flex; align-items: center; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--pix); border-radius: 999px; padding: 4px 9px;} #livu-home .price small{display: block; margin-top: 4px; font-size: 12px; color: var(--muted);} #livu-home .add{display: inline-flex; align-items: center; height: 46px; min-width: 46px; padding: 0 13px; border-radius: 999px; background: var(--ink); color: #fff; flex: none; transition: padding .5s var(--spring), transform .35s var(--spring), background .25s;} #livu-home .add:active{transform: scale(.94);} #livu-home .add-txt{max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14px; transition: max-width .5s var(--ease), opacity .3s, margin .5s var(--ease);} #livu-home .add .ico{transition: transform .45s var(--spring);} #livu-home .card:hover .add:not(:disabled),#livu-home .add:focus-visible{background: var(--brand);} #livu-home .card:hover .add:not(:disabled) .ico{transform: rotate(90deg);} #livu-home .add:disabled{background: #CFD2D8; cursor: not-allowed;} @media (hover: hover) and (pointer: fine){#livu-home .grid:has(.card:hover) .card:not(:hover){filter: saturate(.75); opacity: .6;}#livu-home .card:hover{transform: translateY(-4px); z-index: 3;}} #livu-home .swatches{display: flex; flex-wrap: wrap; gap: 12px; padding: 6px; margin: -6px;} #livu-home .sw{--c: #888; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 17, 21, .16); transition: transform .35s var(--spring);} #livu-home .sw::after{content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--spring);} #livu-home .sw.is-sel::after{opacity: 1; transform: none;} #livu-home .sw:hover{transform: scale(1.12);} #livu-home .swatches.sm{gap: 10px;} #livu-home .swatches.sm .sw{width: 22px; height: 22px;} #livu-home .swatches.sm .sw::after{inset: -4px; border-width: 1.5px;} #livu-home .section.dark-wrap{max-width: none; padding-inline: clamp(8px, 2vw, 24px);} #livu-home .dark-panel{max-width: 1320px; margin: 0 auto; background: #0B0D11; color: #fff; border-radius: clamp(32px, 5vw, 56px); padding: clamp(32px, 5.5vw, 80px) clamp(16px, 3.5vw, 48px) clamp(16px, 3.5vw, 48px);} #livu-home .on-dark{padding-inline: clamp(8px, 1.5vw, 16px);} #livu-home .on-dark p{color: #9AA1AD;} #livu-home .bento{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px;} #livu-home .tile{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--tile); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 32px); transition: border-color .4s, transform .6s var(--ease);} #livu-home .tile:hover{border-color: rgba(255, 255, 255, .16);} #livu-home .tile-kicker{display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8D95A3; font-weight: 800;} #livu-home .tile-kicker.green{color: var(--pix-bright);} #livu-home .tile h3{margin: 10px 0 8px; font-size: clamp(21px, 2vw, 28px); line-height: 1.12; letter-spacing: -.025em; font-weight: 800;} #livu-home .tile p{color: #9AA1AD; font-size: 14.5px; max-width: 34ch;} #livu-home .fine{font-size: 12px; color: #7D8491;} #livu-home .t-case{grid-column: span 5; grid-row: span 2; min-height: 460px;} #livu-home .t-mag{grid-column: span 3;} #livu-home .t-colors{grid-column: span 4;} #livu-home .t-pix{grid-column: span 3;} #livu-home .t-warranty{grid-column: span 4;} #livu-home .t-link{grid-column: span 7;} #livu-home .t-wave{grid-column: span 5;} #livu-home .t-case::before{content: ''; position: absolute; width: 80%; aspect-ratio: 1; right: -12%; bottom: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 91, 255, .5), transparent); filter: blur(10px);} #livu-home .t-case .tile-copy{position: relative; z-index: 1;} #livu-home .dots{display: flex; padding: 14px 0 6px 14px;} #livu-home .dots span{width: 54px; height: 54px; border-radius: 50%; background: var(--c); margin-left: -14px; box-shadow: 0 0 0 4px var(--tile); animation: lv-dotFloat 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s);} #livu-home .big-num{display: flex; align-items: flex-start; font-weight: 800; letter-spacing: -.06em; line-height: .85; color: var(--pix-bright); font-size: clamp(88px, 10vw, 128px);} #livu-home .big-num small{font-size: .38em; margin: .12em 0 0 .06em; letter-spacing: 0;} #livu-home .tile-ico{width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .07); display: grid; place-items: center;} #livu-home .tile-head{display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;} #livu-home .tile-head h3{margin-bottom: 0;} #livu-home .link-body{display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: center;} #livu-home .gauge{position: relative;} #livu-home .gauge svg{width: 100%; overflow: visible;} #livu-home .gauge-bg,#livu-home .gauge-arc{fill: none; stroke-width: 18; stroke-linecap: round;} #livu-home .gauge-bg{stroke: rgba(255, 255, 255, .09);} #livu-home .gauge-arc{stroke: url(#gGrad); stroke-dashoffset: var(--off, 377); transition: stroke-dashoffset 1.5s var(--ease);} #livu-home .gauge-tick{fill: #7D8491; font-size: 12px; font-weight: 700;} #livu-home .gauge-tk{stroke: rgba(255, 255, 255, .26); stroke-width: 2; stroke-linecap: round;} #livu-home .gauge-tk.major{stroke: rgba(255, 255, 255, .5); stroke-width: 2.5;} #livu-home .gauge-flow,#livu-home .gauge-flow-glow{fill: none; stroke-linecap: round; stroke-dasharray: 6 44; opacity: 0; transition: opacity .7s; animation: lv-gFlow 1.3s linear infinite;} #livu-home .gauge-flow{stroke: #fff; stroke-width: 5;} #livu-home .gauge-flow-glow{stroke: #7CF0C8; stroke-width: 18; stroke-dasharray: 10 40;} #livu-home .gauge-flow.on{opacity: .95;} #livu-home .gauge-flow-glow.on{opacity: .75;} #livu-home .gauge-tip{fill: #fff; opacity: 0; transition: opacity .7s; filter: drop-shadow(0 0 6px #7CF0C8);} #livu-home .gauge-tip.on{opacity: 1; animation: lv-tipPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center;} #livu-home .gauge-read{position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px;} #livu-home .gauge-read b{font-size: clamp(48px, 5.4vw, 72px); line-height: 1; letter-spacing: -.04em; font-weight: 800;} #livu-home .gauge-read span{font-size: 22px; color: #9AA1AD; font-weight: 700;} #livu-home .gauge-read small{flex-basis: 100%; font-size: 12px; color: #8D95A3; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;} #livu-home .link-info{display: flex; flex-direction: column; align-items: flex-start; gap: 12px;} #livu-home .link-info img{width: min(100%, 250px); aspect-ratio: 1; object-fit: cover; mix-blend-mode: lighten; opacity: 0; transition: opacity .5s var(--ease); margin-bottom: -8px;} #livu-home .link-info img.ready{opacity: 1;} #livu-home .link-name{font-weight: 700; font-size: 14px; color: #CFD4DC;} #livu-home .about{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--surface); border-radius: clamp(32px, 4vw, 48px); padding: clamp(28px, 5vw, 68px); box-shadow: var(--shadow-1);} #livu-home .about h1,#livu-home .about h2{font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin: 16px 0 18px; text-wrap: balance;} #livu-home .about p{color: var(--ink-2); font-size: 17px; margin-bottom: 14px; max-width: 54ch;} #livu-home .about .btn{margin-top: 14px;} #livu-home .about-stats{display: grid; gap: 12px;} #livu-home .stat{display: flex; align-items: baseline; gap: 18px; padding: 22px 26px; border-radius: 28px; background: var(--bg);} #livu-home .stat b{font-size: clamp(36px, 4vw, 50px); font-weight: 800; letter-spacing: -.04em; line-height: 1; min-width: 2.2ch;} #livu-home .stat span{color: var(--ink-2); font-weight: 600;} #livu-home .faq-item{background: var(--surface); border-radius: 28px; margin-bottom: 10px; box-shadow: var(--shadow-1); overflow: hidden;} #livu-home .faq-q{width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; font-weight: 700; font-size: 16.5px; text-align: left;} #livu-home .faq-ico{flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: transform .5s var(--spring), background .3s, color .3s;} #livu-home .faq-item.open .faq-ico{transform: rotate(135deg); background: var(--ink); color: #fff;} #livu-home .faq-a{display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease);} #livu-home .faq-a > div{min-height: 0; overflow: hidden;} #livu-home .faq-item.open .faq-a{grid-template-rows: 1fr;} #livu-home .faq-a p{padding: 0 26px 24px; color: var(--ink-2); max-width: 62ch;} #livu-home .card-link{font: inherit; color: inherit; text-align: left; letter-spacing: inherit; line-height: inherit;} #livu-home .card-link:hover{text-decoration: underline; text-underline-offset: 3px;} #livu-home .prose h3{font-size: 17px; margin: 22px 0 6px; font-weight: 800;} #livu-home .prose h3:first-child{margin-top: 4px;} #livu-home .prose p{color: var(--ink-2);} #livu-home .prose.swap{animation: lv-fadeUp .5s var(--ease);} #livu-home .help-tabs{display: flex; justify-content: center; margin-bottom: 24px;} #livu-home .help-body{min-height: 320px;} #livu-home .help-body.prose{background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: clamp(24px, 4vw, 44px);} #livu-home .help-body.swap{animation: lv-fadeUp .5s var(--ease);} @media (max-width: 1100px){#livu-home .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}#livu-home .t-case{grid-column: span 12; grid-row: auto; min-height: 420px;}#livu-home .t-case .tile-copy{max-width: 50%;}#livu-home .t-mag,#livu-home .t-pix{grid-column: span 6;}#livu-home .t-colors,#livu-home .t-warranty{grid-column: span 6;}#livu-home .t-link,#livu-home .t-wave{grid-column: span 12;}} @media (max-width: 980px){#livu-home .about{grid-template-columns: 1fr;}} @media (max-width: 760px){#livu-home .grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px;}#livu-home .card-media{border-radius: 20px;}#livu-home .card-body{padding: 12px 2px 0;}#livu-home .card-text h3{font-size: 15px;}#livu-home .card-text p{font-size: 12.5px;}#livu-home .price .pix{font-size: 19px;}#livu-home .card-foot{flex-wrap: wrap;}#livu-home .tile{padding: 22px;}#livu-home .link-body{grid-template-columns: 1fr;}#livu-home .link-info{flex-direction: row; flex-wrap: wrap; align-items: center;}#livu-home .link-info img{width: 96px; margin: 0;}#livu-home .link-name{flex: 1;}} @media (max-width: 520px){#livu-home .t-mag,#livu-home .t-pix,#livu-home .t-colors,#livu-home .t-warranty{grid-column: span 12;}#livu-home .t-case{min-height: 0;}#livu-home .t-case .tile-copy{max-width: none;}} @media (prefers-reduced-motion: reduce){#livu-home .reveal{opacity: 1; transform: none;}} @keyframes lv-fill{to { transform: scaleX(1); }} @keyframes lv-ping{0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.6); }} @keyframes lv-shimmer{from { background-position: 120% 0; } to { background-position: -120% 0; }} @keyframes lv-dotFloat{50% { transform: translateY(-10px); }} @keyframes lv-gFlow{to { stroke-dashoffset: -50; }} @keyframes lv-tipPulse{50% { transform: scale(1.35); }} @keyframes lv-fadeUp{from { opacity: 0; transform: translateY(8px); }} /* ===== seções do início (mesmo CSS do site, dentro de .livu-chrome) ===== */ .livu-chrome{font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);overflow-x:clip;font-size:16px;text-align:left} .livu-chrome *,.livu-chrome *::before,.livu-chrome *::after{box-sizing:border-box} .livu-chrome :where(h1,h2,h3,h4,p,a,span,li,small,b,strong,button,figcaption){font-family:inherit;letter-spacing:inherit} .livu-chrome img,.livu-chrome svg{display:block;max-width:100%} .livu-chrome button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;box-shadow:none;text-shadow:none;border-radius:0;line-height:inherit;text-transform:none} .livu-chrome a,.livu-chrome a:where(:hover,:focus){color:inherit;text-decoration:none} .livu-chrome h1,.livu-chrome h2,.livu-chrome h3,.livu-chrome h4,.livu-chrome p,.livu-chrome figure{margin:0;font-weight:inherit;color:inherit;text-transform:none;letter-spacing:normal;line-height:inherit} .livu-chrome h1{font-size:2em;font-weight:700}.livu-chrome h2{font-size:1.5em;font-weight:700}.livu-chrome h3{font-size:1.17em;font-weight:700} .livu-chrome ul,.livu-chrome ol{margin:1em 0;padding-left:40px} .livu-chrome li{line-height:inherit} .livu-chrome b,.livu-chrome strong{font-weight:700} .livu-chrome small{font-size:smaller} .livu-chrome .btn{background-image:none;text-shadow:none;border:0;box-shadow:none;filter:none;line-height:1.2;vertical-align:middle;margin:0;color:inherit} .livu-chrome :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px} .livu-chrome [hidden]{display:none!important} .livu-chrome{--mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --bg: #F3F2EF; --surface: #FFFFFF; --ink: #0F1115; --ink-2: #3A3F48; --muted: #5E6573; --line: rgba(15, 17, 21, .09); --line-2: rgba(15, 17, 21, .16); --gutter: clamp(16px, 4vw, 32px); --media: #ECEEF2; --hero-bg: #E9EDF6; --tile: #14171C; --brand: #2F5BFF; --pix: #067552; --pix-bright: #2EE6A6; --pix-soft: #E1F6EE; --wa: #25D366; --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px; --shadow-1: 0 1px 2px rgba(15, 17, 21, .04), 0 10px 28px -14px rgba(15, 17, 21, .14); --shadow-2: 0 2px 6px rgba(15, 17, 21, .06), 0 34px 70px -26px rgba(15, 17, 21, .34); --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.36, .5, 1); --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;} .livu-chrome .ico{flex: none;} .livu-chrome .announce{display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ink); color: #D8DBE2; font-size: 12.5px; padding: 9px 16px; text-align: center;} .livu-chrome .announce b{color: #fff;} .livu-chrome .announce i{width: 4px; height: 4px; border-radius: 50%; background: #5a6070;} .livu-chrome .nav{position: sticky; top: 0; z-index: 60; background: rgba(243, 242, 239, .9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--line);} .livu-chrome .nav-in{max-width: 1160px; margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 32px;} .livu-chrome .logo{display: inline-flex; align-items: center; flex: none; line-height: 0;} .livu-chrome .logo img{height: 44px; width: auto;} .livu-chrome .logo.light img{height: 64px;} @media (max-width: 760px){.livu-chrome .logo img{height: 38px;}} .livu-chrome .nav-links{display: flex; gap: 28px;} .livu-chrome .nav-links a{position: relative; padding: 12px 0; font-weight: 600; font-size: 14px; color: var(--ink-2); transition: color .2s; white-space: nowrap;} .livu-chrome .nav-links a::after{content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);} .livu-chrome .nav-links a:hover,.livu-chrome .nav-links a[aria-current="page"]{color: var(--ink);} .livu-chrome .nav-links a:hover::after,.livu-chrome .nav-links a[aria-current="page"]::after{transform: scaleX(1);} .livu-chrome .nav-actions{display: flex; align-items: center; gap: 10px; margin-left: auto;} .livu-chrome .bag-btn{position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .3s var(--spring);} .livu-chrome .bag-btn:hover{transform: scale(1.06);} .livu-chrome .bag-count{position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);} .livu-chrome .menu-btn{display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); place-items: center;} .livu-chrome .mobile-nav{display: none; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .45s var(--ease);} .livu-chrome .nav.menu-open .mobile-nav{max-height: 420px; padding-bottom: 16px;} .livu-chrome .mobile-nav a{display: block; padding: 14px 2px; font-weight: 700; border-bottom: 1px solid var(--line);} .livu-chrome .mobile-nav a[aria-current="page"]{color: var(--brand);} .livu-chrome .round{width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); display: grid; place-items: center; transition: transform .3s var(--spring), background .2s;} .livu-chrome .round:hover{transform: scale(1.08);} .livu-chrome .round.sm{width: 40px; height: 40px; background: rgba(15, 17, 21, .06); box-shadow: none;} .livu-chrome .footer{margin-top: clamp(72px, 10vw, 128px); background: #0B0D11; color: #C9CED7; border-radius: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) 0 0;} .livu-chrome .footer-in{max-width: 1160px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px) 36px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;} .livu-chrome .f-brand p{margin: 16px 0 20px; max-width: 32ch; color: #9AA1AD;} .livu-chrome .f-pay{display: flex; gap: 8px; flex-wrap: wrap;} .livu-chrome .f-pay span{padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; color: #fff;} .livu-chrome .f-col{display: flex; flex-direction: column; align-items: flex-start; gap: 0;} .livu-chrome .f-col h5{color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;} .livu-chrome .f-col a,.livu-chrome .f-col button{color: #9AA1AD; font-size: 15px; padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; text-align: left; transition: color .2s, transform .3s var(--ease);} .livu-chrome .f-col a:hover,.livu-chrome .f-col button:hover{color: #fff; transform: translateX(3px);} .livu-chrome .footer-base{max-width: 1160px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 92px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 12.5px; color: #7D8491;} .livu-chrome .fabs{position: fixed; z-index: 70; right: 20px; bottom: 20px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px; transition: opacity .3s, transform .4s var(--spring);} .livu-chrome .fabs.hide{opacity: 0; transform: scale(.85); pointer-events: none;} .livu-chrome .ai-fab{display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px 0 8px; border-radius: 999px; background: var(--ink); color: #fff; text-align: left; box-shadow: 0 16px 34px -12px rgba(15, 20, 30, .7), 0 2px 6px rgba(0, 0, 0, .15); transition: transform .4s var(--spring);} .livu-chrome .ai-fab:hover{transform: translateY(-3px);} .livu-chrome .ai-ico{width: 42px; height: 42px; border-radius: 50%; background: var(--brand, #26418F); display: grid; place-items: center; flex: none;} .livu-chrome .ai-txt{display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; white-space: nowrap; max-width: 220px; transition: max-width .5s var(--ease), opacity .3s, margin .5s var(--ease);} .livu-chrome .ai-txt b{font-size: 14.5px;} .livu-chrome .ai-txt small{font-size: 12px; color: #B9BFC9;} .livu-chrome .wa-fab{display: inline-flex; align-items: center; gap: 0; height: 52px; min-width: 52px; padding: 0 12px; justify-content: center; border-radius: 999px; background: var(--wa); color: #fff; box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7), 0 2px 6px rgba(0, 0, 0, .15); transition: transform .4s var(--spring), padding .5s var(--spring);} .livu-chrome .wa-fab:hover{transform: translateY(-3px); padding-right: 20px;} .livu-chrome .wa-label{max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 800; font-size: 14.5px; transition: max-width .5s var(--ease), opacity .3s, margin .5s var(--ease);} .livu-chrome .wa-fab:hover .wa-label{max-width: 160px; opacity: 1; margin-left: 8px;} .livu-chrome .chat{position: fixed; z-index: 95; right: 20px; bottom: 20px; width: min(392px, calc(100vw - 24px)); height: min(640px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: #fff; border-radius: 34px; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); overflow: hidden; transform-origin: bottom right; opacity: 0; transform: translateY(26px) scale(.94); pointer-events: none; visibility: hidden; transition: opacity .35s, transform .55s var(--ease), visibility 0s .55s;} .livu-chrome .chat.open{opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .35s, transform .55s var(--ease);} .livu-chrome .chat-head{display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; background: var(--ink); color: #fff;} .livu-chrome .chat-head .round.sm{background: rgba(255, 255, 255, .12); margin-left: auto;} .livu-chrome .chat-avatar{width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; position: relative;} .livu-chrome .chat-avatar img{width: 100%; height: 100%; object-fit: cover;} .livu-chrome .chat-title strong{display: block; font-size: 15px; line-height: 1.2;} .livu-chrome .chat-title small{display: flex; align-items: center; gap: 6px; font-size: 12px; color: #B9BFC9;} .livu-chrome .chat-title small i{width: 7px; height: 7px; border-radius: 50%; background: var(--pix-bright);} .livu-chrome .chat-log{flex: 1; overflow-y: auto; padding: 16px 16px 6px; background: #FAF9F7; scroll-behavior: smooth;} .livu-chrome .msg{display: flex; margin: 7px 0; animation: lv-msgIn .4s var(--ease) backwards;} .livu-chrome .msg.user{justify-content: flex-end;} .livu-chrome .bubble{max-width: 88%; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: #fff; box-shadow: 0 1px 0 var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink);} .livu-chrome .msg.user .bubble{background: var(--ink); color: #fff; border-radius: 20px 20px 6px 20px; box-shadow: none;} .livu-chrome .bubble.typing{display: inline-flex; gap: 5px; padding: 15px 16px;} .livu-chrome .bubble.typing i{width: 7px; height: 7px; border-radius: 50%; background: #B3B8C2; animation: lv-dotBounce 1.1s infinite;} .livu-chrome .bubble.typing i:nth-child(2){animation-delay: .15s;} .livu-chrome .bubble.typing i:nth-child(3){animation-delay: .3s;} .livu-chrome .chat-chips{display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; background: #FAF9F7;} .livu-chrome .chat-chips:empty{display: none;} .livu-chrome .chip{padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; transition: background .25s, color .25s, transform .35s var(--spring); animation: lv-msgIn .4s var(--ease) backwards;} .livu-chrome .chip:hover{background: var(--ink); color: #fff; transform: translateY(-2px);} .livu-chrome .chat-form{display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff;} .livu-chrome .chat-form input{flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 999px; background: var(--bg); padding: 0 18px; font: inherit; font-size: 14.5px; color: var(--ink);} .livu-chrome .chat-form input:focus{outline: 2px solid var(--brand); outline-offset: 0;} .livu-chrome .send{flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .3s var(--spring);} .livu-chrome .send:hover{transform: scale(1.08);} .livu-chrome .chat-human{display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 13px; font-weight: 700; color: #0C7039; background: #F1FAF4; border-top: 1px solid rgba(18, 140, 74, .12);} .livu-chrome .chat-human:hover{background: #E3F6EA;} .livu-chrome .nav-links a{white-space: nowrap;} @media (max-width: 1160px){.livu-chrome .nav-links{display: none;}.livu-chrome .menu-btn{display: grid;}.livu-chrome .mobile-nav{display: block;}.livu-chrome .nav-actions{margin-left: auto;}} @media (max-width: 980px){.livu-chrome .nav-links{display: none;}.livu-chrome .menu-btn{display: grid;}.livu-chrome .mobile-nav{display: block;}.livu-chrome .nav-actions{margin-left: auto;}.livu-chrome .footer-in{grid-template-columns: 1fr 1fr;}.livu-chrome .f-brand{grid-column: 1 / -1;}} @media (max-width: 760px){.livu-chrome .announce span:last-child,.livu-chrome .announce i{display: none;}} @media (max-width: 520px){.livu-chrome .fabs{right: 14px; bottom: 14px; gap: 10px;}.livu-chrome .ai-fab{height: 48px; padding: 0 16px 0 6px; gap: 9px;}.livu-chrome .ai-ico{width: 36px; height: 36px;}.livu-chrome .ai-txt small{display: none;}.livu-chrome .ai-txt b{font-size: 14px;}.livu-chrome .wa-fab{height: 48px; min-width: 48px;}.livu-chrome .chat{right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0;}.livu-chrome .footer-in{grid-template-columns: 1fr;}} @keyframes lv-msgIn{from { opacity: 0; transform: translateY(10px) scale(.97); }} @keyframes lv-dotBounce{40% { transform: translateY(-5px); background: var(--ink); }} /* ========================================================================== LIVU na Loja Integrada: visual geral da loja (todas as páginas) Mesmas cores, fonte e formas do site LIVU. Colado em "Personalize sua loja > Editar CSS" junto com o CSS das seções do início (gerado por build_li.py). ========================================================================== */ :root { --livu-cookie-space: 0px; --livu-css: 21; /* marcador: o script só monta o cabeçalho/rodapé da LIVU quando este CSS já está no ar */ --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bg: #F3F2EF; --surface: #FFFFFF; --ink: #0F1115; --ink-2: #3A3F48; --muted: #5E6573; --line: rgba(15, 17, 21, .09); --line-2: rgba(15, 17, 21, .16); --media: #ECEEF2; --hero-bg: #E9EDF6; --tile: #14171C; --brand: #2F5BFF; --pix: #067552; --pix-bright: #2EE6A6; --pix-soft: #E1F6EE; --wa: #25D366; --gutter: clamp(16px, 4vw, 32px); --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px; --shadow-1: 0 1px 2px rgba(15, 17, 21, .04), 0 10px 28px -14px rgba(15, 17, 21, .14); --shadow-2: 0 2px 6px rgba(15, 17, 21, .06), 0 34px 70px -26px rgba(15, 17, 21, .34); --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.36, .5, 1); /* cores que o tema da loja usa (substituem as do código "CORES DO TEMA") */ --cor-principal: #0F1115 !important; --cor-iconestopo: #0F1115 !important; --cor-textomenu: #3A3F48 !important; --cor-barramenu: transparent !important; --cor-fundorodape: #0F1115 !important; --botoes: #0F1115 !important; --cor-textosubmenu: #0F1115 !important; --cor-fundosubmenu: #FFFFFF !important; --conteudo-rodape: #D8DBE2 !important; } /* ---------- base ---------- */ /* Este CSS também é carregado no checkout: as regras gerais só valem nas páginas da vitrine (as que têm #cabecalho) */ html:has(#cabecalho), body:has(#cabecalho) { background: var(--bg) !important; } body:has(#cabecalho) { font-family: var(--font) !important; color: var(--ink-2); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* fraca de propósito (:where): vence o tema, mas perde para as regras das seções da LIVU (ex.: legendas em DM Mono) */ :where(body:has(#cabecalho)) :where(h1, h2, h3, h4, h5, p, a, span, strong, b, li, label, input, select, textarea, button, div, td, th, small, s, em, legend):not([class*="icon-"]):not(.fa) { font-family: var(--font); } body:has(#cabecalho) :is(input, select, textarea) { font-family: var(--font) !important; } /* botões não: alguns ícones da loja são letras de fonte de ícone */ /* elementos com classe icon-* (ou .fa) desenham o ícone com uma fonte própria: ficam de fora */ :is(.titulo, .nome-produto, .preco-produto, .preco-promocional, .botao, .acoes-produto, .breadcrumbs, #rodape, .menu, .filtro, .ordenar-listagem, .abas-custom, .tab-content, .newsletter-rodape, .newsletter, .cn-wrap-pp):not([class*="icon-"]):not(.fa) { font-family: var(--font) !important; } a { transition: color .2s; } a:hover, a:focus { text-decoration: none; } ::selection { background: var(--ink); color: #fff; } .conteiner, #cabecalho > .conteiner, #corpo > .conteiner, #rodape .conteiner { max-width: 1160px; } .conteiner-principal { background: var(--bg); overflow-x: clip; } #corpo, #corpo > .conteiner { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* sem faixa de cupom no topo: a faixa antiga (código "TARJA TOPO") fica escondida e o cabeçalho sobe de volta */ body::before { content: none !important; display: none !important; } #cabecalho { margin-top: 0 !important; } /* ---------- cabeçalho e rodapé da LIVU (iguais aos do site); os da loja ficam escondidos ---------- */ body.livu-chrome-on #cabecalho, body.livu-chrome-on #rodape, body.livu-chrome-on .newsletter-rodape:not(.livu-news), body.livu-chrome-on .barra-inicial, #modalNewsletter { display: none !important; } #livu-top { position: sticky; top: 0; z-index: 70; } #livu-top .nav { position: static; } #livu-top .nav-ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); background: none; cursor: pointer; transition: background .25s, border-color .25s; } #livu-top .nav-ico:hover { background: #fff; border-color: var(--ink); } #livu-top .nav-actions { gap: 8px; } #livu-top a.bag-btn { text-decoration: none; } #livu-bottom .f-hours { margin-top: 10px; font-size: 13px; color: #9AA1AD; } body.livu-chrome-on .conteiner-principal { padding-top: 0; margin-top: 0 !important; } /* a loja reservava 120px para o cabeçalho antigo */ /* ---------- espaços mais enxutos ---------- */ body.livu-chrome-on .secao-banners { display: none !important; } /* faixa antiga de selos em imagem */ body.livu-chrome-on #corpo { margin-bottom: 0 !important; } body.livu-chrome-on #corpo .secao-principal, body.livu-chrome-on #corpo .secao-secundaria { margin-bottom: 0 !important; } body.livu-selos-baixo #livu-bottom > #livu-selos { padding: 20px var(--gutter) 0; } body.livu-selos-baixo #livu-bottom > #livu-selos + .footer { margin-top: 28px; } body.livu-chrome-on .breadcrumbs { margin-bottom: 8px !important; } body.livu-chrome-on .conteudo { margin-bottom: 8px; } .conteudo > h1.titulo { margin-bottom: 12px !important; } #livu-bottom .footer { margin-top: clamp(28px, 3.5vw, 48px); } #livu-bottom .footer-in { padding-top: clamp(28px, 4vw, 44px); padding-bottom: 24px; } #livu-bottom .footer-base { padding-bottom: 76px; } #livu-home .section { padding-top: clamp(36px, 4.6vw, 64px); } #livu-home .section.tight { padding-top: clamp(20px, 3vw, 36px); } #livu-home .section-head { margin-bottom: clamp(18px, 2.6vw, 30px); } body.livu-pagina-on #corpo { display: none !important; } #livu-home.livu-pagina { padding-bottom: 8px; min-height: 40vh; } #livu-home .band { padding: clamp(36px, 4.6vw, 64px) 0; } #livu-home .band-head { margin-bottom: clamp(16px, 2.4vw, 28px); } /* ---------- categorias da lateral: lista única, a escolhida em destaque, com a cor deslizando ---------- */ body.livu-cats-on .coluna .menu.lateral { display: none !important; } #livu-cats { position: relative; isolation: isolate; display: grid; gap: 2px; padding: 8px; margin-bottom: 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); } #livu-cats a, #livu-cats a:hover, #livu-cats a:focus { position: relative; z-index: 1; display: block; padding: 13px 20px; border-radius: 999px; font-family: var(--font); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--ink-2) !important; text-decoration: none; background: transparent !important; transition: color .35s var(--ease); } #livu-cats a:hover:not(.is-active) { color: var(--ink) !important; } #livu-cats a.is-active, #livu-cats a.is-active:hover { color: #fff !important; } #livu-cats .cat-pill { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; background: var(--ink); opacity: 0; box-shadow: 0 8px 18px -8px rgba(15, 17, 21, .5); transition: transform .55s var(--spring), width .55s var(--spring), height .55s var(--spring), opacity .2s; } #livu-cats .cat-pill.ready { opacity: 1; } .coluna .filtro .titulo, .coluna .lateral.outras .titulo { font-size: 17px !important; } .coluna .filtro li, .coluna .filtro a, .coluna .filtro label { font-size: 14.5px; } /* ---------- newsletter: cartão no visual novo (opção A do esboço), só no fim da página ---------- */ #livu-bottom > .newsletter-rodape.livu-news { display: block !important; height: auto !important; min-height: 0 !important; max-width: 1160px; margin: 22px auto 0; padding: 0 var(--gutter); background: transparent !important; border: 0 !important; box-sizing: border-box; } #livu-bottom .livu-news > div { display: grid !important; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 440px); grid-template-areas: "ico k f" "ico t f" "ico p f"; align-items: center; column-gap: 22px; row-gap: 2px; height: auto !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); } #livu-bottom .livu-news .news-ico { grid-area: ico; width: 54px; height: 54px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; } #livu-bottom .livu-news .news-kicker { grid-area: k; margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #livu-bottom .livu-news .titulo { grid-area: t; display: block; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--font) !important; font-size: clamp(19px, 1.9vw, 24px) !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.15 !important; color: var(--ink) !important; text-transform: none !important; } #livu-bottom .livu-news .texto-newsletter { grid-area: p; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; font-size: 14px; color: var(--muted) !important; } #livu-bottom .livu-news .interno-conteudo { grid-area: f; display: block !important; width: 100%; margin: 0; } #livu-bottom .livu-news .input-conteiner { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; } #livu-bottom .livu-news input[name="email"] { flex: 1; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 14px; border: 0 !important; outline: 0; border-radius: 999px !important; background: none !important; box-shadow: none !important; color: var(--ink); font-family: var(--font); font-size: 14.5px; } #livu-bottom .livu-news .newsletter-assinar { position: static; flex: none; width: auto; height: 44px; margin: 0; padding: 0 20px !important; display: inline-flex; align-items: center; gap: 8px; border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: #fff !important; font-family: var(--font) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; cursor: pointer; text-shadow: none; box-shadow: none; } #livu-bottom .livu-news .newsletter-assinar::before, #livu-bottom .livu-news .newsletter-assinar::after { content: none !important; display: none !important; } #livu-bottom .livu-news .news-fine { margin: 8px 0 0 18px; font-size: 12px; color: var(--muted); } #livu-bottom .livu-news .newsletter-confirmacao { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14.5px; font-weight: 600; } #livu-bottom .livu-news .newsletter-confirmacao.hide { display: none; } @media (max-width: 760px) { #livu-bottom .livu-news > div { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "k" "t" "p" "f"; justify-items: center; text-align: center; row-gap: 6px; box-sizing: border-box; width: 100% !important; overflow: hidden; } #livu-bottom .livu-news > div > * { min-width: 0; max-width: 100%; box-sizing: border-box; } #livu-bottom .livu-news .titulo, #livu-bottom .livu-news .texto-newsletter, #livu-bottom .livu-news .news-fine { overflow-wrap: anywhere; } #livu-bottom .livu-news .interno-conteudo { margin-top: 8px; width: 100%; } #livu-bottom .livu-news .input-conteiner { width: 100%; box-sizing: border-box; } #livu-bottom .livu-news input[name="email"] { width: 0; } #livu-bottom .livu-news .newsletter-assinar { padding: 0 16px !important; } #livu-bottom .livu-news .news-fine { margin-left: 0; } } /* ---------- cabeçalho (loja antiga: não usado quando o da LIVU está ativo) ---------- */ #cabecalho { background: rgba(243, 242, 239, .9) !important; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: none !important; } #cabecalho .logo img { max-height: 44px; width: auto; } #cabecalho .menu .nivel-um > li > a, #cabecalho .menu .nivel-um > li > a .titulo { font-family: var(--font) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; } #cabecalho .menu .nivel-um > li:hover > a .titulo, #cabecalho .menu .nivel-um > li > a:hover .titulo { color: var(--ink) !important; } #cabecalho .menu .nivel-dois { border-radius: var(--r-sm); box-shadow: var(--shadow-2); border: 1px solid var(--line) !important; overflow: hidden; } #cabecalho .menu .nivel-dois a { font-weight: 600; color: var(--ink-2) !important; } #cabecalho .menu .nivel-dois a:hover { color: var(--ink) !important; background: var(--bg) !important; } #cabecalho .busca input, #cabecalho .busca .input-xlarge { border-radius: 999px !important; border: 1px solid var(--line-2) !important; background: #fff !important; box-shadow: none !important; } #cabecalho .carrinho .qtd, #cabecalho .carrinho-qtd, #cabecalho .action-item .qtd { background: var(--brand) !important; color: #fff !important; font-weight: 800; } /* ---------- botões ---------- */ :is(.botao, a.botao, button.botao, .botao.principal, .botao-comprar, .botao-comprar-ajax, .btn-aceito-cookies, #btn-aceito-cookies):not([class*="icon-"]) { background: var(--ink) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--font) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .25s !important; } .botao:not([class*="icon-"]):hover, .botao-comprar:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(15, 17, 21, .6) !important; } .botao.secundario, .botao.continuar-comprando, a.botao.comprar-via-whatsapp { background: rgba(15, 17, 21, .06) !important; color: var(--ink) !important; } .botao.secundario:hover, .botao.continuar-comprando:hover, a.botao.comprar-via-whatsapp:hover { background: rgba(15, 17, 21, .1) !important; box-shadow: none !important; } a.botao.comprar-via-whatsapp i { color: var(--wa); } /* ---------- títulos das vitrines e categorias ---------- */ .titulo-categoria, .vitrine .titulo, h1.titulo, .conteudo > h1.titulo, .secao-principal .titulo-categoria { font-family: var(--font) !important; color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -.03em !important; text-transform: none !important; } .titulo-categoria { font-size: clamp(22px, 2.6vw, 30px) !important; border: 0 !important; } .titulo-categoria strong, .titulo-categoria span { color: var(--ink) !important; font-weight: 800 !important; } .conteudo > h1.titulo { font-size: clamp(26px, 3.2vw, 38px) !important; line-height: 1.08; margin: 6px 0 18px; } /* ---------- cartões de produto (vitrine, categorias, busca) ---------- */ .listagem .listagem-item { background: var(--surface) !important; border-radius: var(--r-md) !important; border: 0 !important; box-shadow: var(--shadow-1); padding: 12px 12px 16px !important; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .listagem .listagem-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .listagem .listagem-item .imagem-produto { background: var(--media); border-radius: calc(var(--r-md) - 8px); overflow: hidden; } .listagem .listagem-item .imagem-produto img { mix-blend-mode: multiply; transition: transform .7s var(--ease); } .listagem .listagem-item:hover .imagem-produto img { transform: scale(1.04); } .listagem .listagem-item .nome-produto { font-family: var(--font) !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: -.01em; } .listagem .listagem-item .preco-promocional, .listagem .listagem-item .preco-venda.titulo { font-family: var(--font) !important; color: var(--ink) !important; font-weight: 800 !important; font-size: 19px !important; letter-spacing: -.02em; } .listagem .listagem-item s.preco-venda, .listagem .listagem-item .preco-venda s { color: var(--muted) !important; font-weight: 500; } .listagem .listagem-item .desconto-a-vista, .desconto-a-vista { color: var(--muted) !important; font-weight: 600; } .desconto-a-vista strong { color: var(--pix) !important; font-weight: 800 !important; } .listagem .listagem-item .botao-comprar, .listagem .listagem-item .comprar-via-whatsapp { height: 42px; line-height: 42px !important; padding: 0 18px !important; font-size: 13.5px !important; } .listagem .listagem-item .bandeiras-produto span, .bandeira-promocao, .bandeiras-produto .fundo-principal { background: var(--ink) !important; color: #fff !important; border-radius: 999px !important; font-weight: 700; font-family: var(--font) !important; } .listagem .listagem-item .produto-sobrepor { border-radius: var(--r-md); } .tag-comprar.fundo-principal { background: var(--ink) !important; border-radius: 999px !important; } /* ---------- menu lateral, filtros e ordenação ---------- */ .listagem, .listagem > ul, #listagemProdutos, .listagem .listagem-linha { background: transparent !important; border: 0 !important; box-shadow: none !important; } .coluna .menu.lateral, .coluna .filtro, .coluna .lateral.outras { background: var(--surface) !important; border: 0 !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 12px !important; } .coluna .menu.lateral .nivel-um > li, .coluna .menu.lateral .nivel-dois > li { border-color: var(--line) !important; background: transparent !important; } .coluna .menu.lateral a:hover { background: var(--bg) !important; } .conteudo > h1.titulo, .ordenar-listagem.topo { border-bottom: 0 !important; } .menu.lateral .nivel-um > li > a, .menu.lateral .titulo, .filtro .titulo { font-family: var(--font) !important; color: var(--ink) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; } .menu.lateral a { color: var(--ink-2) !important; } .menu.lateral a:hover { color: var(--ink) !important; } .ordenar-listagem, .filtro, .menu.lateral { border-color: var(--line) !important; } .ordenar-listagem select, select { border-radius: 999px !important; border: 1px solid var(--line-2) !important; background-color: #fff !important; } .breadcrumbs, .breadcrumbs a, .breadcrumbs span { color: var(--muted) !important; font-size: 12.5px; border: 0 !important; } .breadcrumbs a:hover { color: var(--ink) !important; } /* ---------- página do produto ---------- */ .pagina-produto .produto .nome-produto, .pagina-produto h1.nome-produto { font-family: var(--font) !important; color: var(--ink) !important; font-weight: 800 !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; text-transform: none !important; } .pagina-produto .codigo-produto, .pagina-produto .codigo-produto span { color: var(--muted) !important; font-size: 12.5px; } .pagina-produto .preco-produto .preco-promocional, .pagina-produto .preco-produto strong.preco-promocional { color: var(--ink) !important; font-weight: 800 !important; font-size: clamp(26px, 3vw, 34px) !important; letter-spacing: -.03em; } .pagina-produto .acoes-produto .botao-comprar, .pagina-produto .principal .botao-comprar { height: 54px !important; line-height: 54px !important; font-size: 15.5px !important; padding: 0 30px !important; } .pagina-produto .conteiner-imagem, .pagina-produto #imagemProduto, .pagina-produto .imagem-produto .zoom { background: var(--media); border-radius: var(--r-lg); overflow: hidden; } .pagina-produto .miniaturas li a, .pagina-produto .produto-thumbs a { border-radius: var(--r-sm) !important; overflow: hidden; border-color: var(--line) !important; } .pagina-produto .atributos .atributo-item, .atributo-item { border-radius: 999px !important; border: 1.5px solid var(--line-2) !important; font-weight: 700; color: var(--ink) !important; background: #fff !important; } .atributo-item.active, .atributo-item.selecionado, .atributo-item:hover { border-color: var(--ink) !important; } .pagina-produto .parcelas-produto, .pagina-produto .accordion, .pagina-produto .cep { border-radius: var(--r-md) !important; border-color: var(--line) !important; background: #fff; } .abas-custom .nav-tabs > li > a, .nav-tabs > li > a { font-family: var(--font) !important; font-weight: 700 !important; color: var(--muted) !important; border: 0 !important; background: none !important; } .abas-custom .nav-tabs > li.active > a, .nav-tabs > li.active > a { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--ink); } .tab-content, #descricao { color: var(--ink-2); font-size: 15px; line-height: 1.65; } #descricao h2, #descricao h3, #descricao strong { color: var(--ink); } /* ---------- carrinho rápido e avisos ---------- */ #comprar-ajax-status .sucesso, .carrinho-interno, .minicart-placeholder .carrinho-interno { border-radius: var(--r-md) !important; box-shadow: var(--shadow-2) !important; border: 0 !important; } #avisoCookies { background: rgba(15, 17, 21, .94) !important; color: #D8DBE2 !important; font-family: var(--font) !important; } #avisoCookies a { color: #fff !important; text-decoration: underline; } .whats-btn-fixed { background: var(--wa) !important; box-shadow: var(--shadow-2) !important; } /* ---------- rodapé ---------- */ .newsletter-rodape { background: var(--surface) !important; border-top: 1px solid var(--line); } .newsletter-rodape .titulo { color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -.02em; text-transform: none !important; } .newsletter-rodape input { border-radius: 999px !important; border: 1px solid var(--line-2) !important; } #rodape .institucional, #rodape .pagamento-selos, #rodape > div { background: var(--ink) !important; color: #9AA1AD !important; } #rodape .titulo { color: #fff !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; } #rodape a { color: #C9CDD5 !important; } #rodape a:hover { color: #fff !important; } #rodape .pagamento-selos { border-top: 1px solid rgba(255, 255, 255, .08); } /* ---------- faixa de selos (garantia, frete, loja física): no lugar da antiga imagem "tarja frete" ---------- */ body.livu-com-selos .secao-banners .conteiner > .row-fluid { display: none !important; } body.livu-com-selos .secao-banners .conteiner { padding-top: 12px; background: transparent !important; } #livu-selos { max-width: 1160px; margin: 0 auto; padding: 8px 0; font-family: var(--font); } #livu-home #livu-selos { padding: 16px var(--gutter) 0; } #livu-selos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #livu-selos li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); } #livu-selos .selo-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; } #livu-selos .selo-ico svg { display: block; } #livu-selos b { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; } #livu-selos small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); } @media (max-width: 760px) { #livu-selos ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } #livu-selos ul::-webkit-scrollbar { display: none; } #livu-selos li { scroll-snap-align: start; padding: 12px 14px; } } /* ---------- página inicial: só as seções da LIVU (montadas pelo código "LIVU - início") ---------- */ body.livu-inicio #fullbanner-mob, body.livu-inicio .secao-banners, body.livu-inicio .a-marca, body.livu-inicio #mini-banner-root, body.livu-inicio #corpo { display: none !important; } /* "Mais vendidos" antigo e banners antigos */ /* vitrines da loja abaixo das seções: título discreto, alinhado à esquerda, como "Conheça nossos produtos" */ body.pagina-inicial .titulo-categoria { text-align: left !important; font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.03em !important; margin: 0 0 22px !important; padding: 0 !important; background: none !important; } body.pagina-inicial .titulo-categoria::before, body.pagina-inicial .titulo-categoria::after { display: none !important; } .cn-shadow-pp { display: none !important; } /* popup de cadastro que cobria a página (o cadastro continua no rodapé) */ body.livu-inicio #corpo { padding-top: clamp(40px, 5vw, 72px); } /* ========================================================================== Início mais compacto (menos zoom, texto e imagem na mesma tela) e os blocos novos do "Feito para o seu dia a dia" ========================================================================== */ @media (min-width: 761px) { #livu-home .board-slides { min-height: clamp(380px, calc(100svh - 240px), 480px); } #livu-home .slide-copy { padding: clamp(22px, 3vw, 40px) 0 clamp(58px, 5.5vw, 72px); } #livu-home .slide-h { font-size: clamp(30px, 3.6vw, 50px); margin: 10px 0 12px; } #livu-home .slide-p { font-size: 15.5px; } #livu-home .slide-facts { margin-top: 16px; padding-top: 14px; gap: clamp(16px, 2.4vw, 32px); } #livu-home .slide-facts b { font-size: clamp(18px, 1.6vw, 22px); } #livu-home .slide-cta { margin-top: 18px; } #livu-home .slide-media { margin: 16px 0; height: calc(100% - 32px); } #livu-home .section-head h2, #livu-home .section-head h1 { font-size: clamp(24px, 2.8vw, 34px); margin: 10px 0 8px; } #livu-home .section-head p { font-size: 15.5px; } #livu-home .cat-tile { flex-basis: min(720px, 80%); scroll-snap-align: center; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center; } #livu-home .ana-stage { max-width: 440px; margin-inline: auto; } #livu-home .ana-stage.narrow { max-width: 300px; } #livu-home .hotlist button { padding: 8px 0; } #livu-home .hotlist small { font-size: 13px; } #livu-home .hotlist b { font-size: 15.5px; } #livu-home .ana { margin-top: clamp(24px, 3vw, 40px); } #livu-home .feature { align-items: center; } #livu-home .cat-body h3 { font-size: clamp(24px, 2.4vw, 32px); } #livu-home .cat-feats { gap: 6px; } #livu-home .feature h3.ana-h, #livu-home .feature h2, #livu-home .band h2 { font-size: clamp(24px, 2.7vw, 36px); margin: 8px 0 10px; } #livu-home .feature { gap: clamp(24px, 4vw, 56px); } #livu-home .ana { margin-top: clamp(28px, 4vw, 52px); } #livu-home .ana-stage.narrow { max-width: 400px; } #livu-home .hotlist { margin-top: 16px; } #livu-home .hotlist button { padding: 11px 0; } } #livu-home .bento { grid-auto-rows: minmax(150px, auto); gap: 12px; } #livu-home .tile { padding: clamp(18px, 2vw, 26px); gap: 12px; } #livu-home .tile h3 { font-size: clamp(19px, 1.7vw, 24px); margin: 6px 0 6px; } #livu-home .tile p { font-size: 14px; } #livu-home .big-num { font-size: clamp(64px, 7vw, 92px); } #livu-home .dark-panel { padding-top: clamp(24px, 4vw, 48px); } #livu-home .t-case { grid-column: span 12; grid-row: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr); gap: clamp(16px, 3vw, 36px); align-items: center; } #livu-home .t-case::before { display: none; } #livu-home .case-row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; } #livu-home .case-row figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #FDFDFD; } #livu-home .case-row img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; transition: transform .8s var(--ease); } #livu-home .case-row .cz { filter: grayscale(1) brightness(1.06) contrast(.92); } #livu-home .case-row .cor { display: block !important; position: absolute; inset: 0; height: 100%; clip-path: circle(0% at 19px calc(100% - 18px)); transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1), transform .8s var(--ease); transition-delay: calc(var(--i) * .32s + .25s), 0s; } #livu-home .t-case.go .case-row .cor { clip-path: circle(150% at 19px calc(100% - 18px)); } #livu-home .t-case.go .case-row figcaption i { animation: lv-dotPop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * .32s); } @keyframes lv-dotPop { 0% { transform: scale(1); } 45% { transform: scale(2.3); } 100% { transform: scale(1); } } #livu-home .case-row figure:hover img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { #livu-home .case-row .cor { transition: none; clip-path: none; } } #livu-home .case-row figcaption { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.2; } #livu-home .case-row figcaption i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 17, 21, .18); } #livu-home .t-mag { grid-column: span 5; justify-content: flex-start; min-height: 0; } #livu-home .t-colors { grid-column: span 4; } #livu-home .t-pix { grid-column: span 3; } #livu-home .t-warranty { grid-column: span 12; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; min-height: 0; } #livu-home .t-warranty .tile-copy h3 { margin-bottom: 0; } /* dois anéis de imãs: um chega girando, alinha e encaixa no outro */ #livu-home .mag-svg { display: block !important; width: 100%; max-height: 180px; margin: 0 auto; overflow: visible; } #livu-home .mag-body { fill: #1B1F26; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; } #livu-home .mag-hole { fill: #0B0D11; stroke: rgba(255, 255, 255, .1); stroke-width: 1; } #livu-home .mag-seg { fill: none; stroke-width: 15; stroke-dasharray: 28 13.6; } #livu-home .mag-case .mag-seg { stroke: #FF8A1F; } #livu-home .mag-case .mag-dot { fill: #fff; } #livu-home .mag-charger .mag-body { fill: #2B3039; } #livu-home .mag-charger .mag-seg { stroke: #E9ECF1; } #livu-home .mag-charger .mag-dot { fill: #0B0D11; } #livu-home .mag-ring, #livu-home .mag-pulse, #livu-home .mag-glow { transform-box: view-box; transform-origin: 0 0; } #livu-home .mag-charger { transform: scale(.7); } #livu-home .mag-seg-case { stroke-width: 12; stroke-dasharray: 30 15.55; } #livu-home .mag-pulse { fill: none; stroke: #FF8A1F; stroke-width: 3; opacity: 0; } #livu-home .mag-glow { opacity: .2; } #livu-home .t-mag.go .mag-charger { animation: lv-magIn 5.4s cubic-bezier(.4, 0, .2, 1) infinite; } #livu-home .t-mag.go .mag-pulse { animation: lv-magPulse 5.4s ease-out infinite; } #livu-home .t-mag.go .mag-glow { animation: lv-magGlow 5.4s ease-out infinite; } @keyframes lv-magIn { 0% { transform: translate(-150px, 54px) rotate(72deg) scale(.7); opacity: 0; } 12% { opacity: 1; } 54% { transform: translate(-34px, 12px) rotate(26deg) scale(.7); } 62% { transform: translate(0, 0) rotate(0deg) scale(.7); } 66% { transform: translate(0, 0) rotate(0deg) scale(.67); } 72% { transform: translate(0, 0) rotate(0deg) scale(.7); } 90% { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: 1; } 100% { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: 0; } } @keyframes lv-magPulse { 0%, 60% { opacity: 0; transform: scale(.95); } 63% { opacity: .85; } 82%, 100% { opacity: 0; transform: scale(1.5); } } @keyframes lv-magGlow { 0%, 56% { opacity: .15; } 63% { opacity: 1; } 92% { opacity: .5; } 100% { opacity: .15; } } @media (prefers-reduced-motion: reduce) { #livu-home .t-mag.go .mag-charger, #livu-home .t-mag.go .mag-pulse, #livu-home .t-mag.go .mag-glow { animation: none; } } @media (max-width: 900px) { #livu-home .t-case { grid-template-columns: 1fr; } #livu-home .case-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } #livu-home .case-row::-webkit-scrollbar { display: none; } #livu-home .case-row figure { scroll-snap-align: start; } #livu-home .t-mag, #livu-home .t-colors, #livu-home .t-pix { grid-column: span 12; } } /* ---------- página do produto mais compacta: foto e informações na mesma tela ---------- */ .pagina-produto .produto .nome-produto, .pagina-produto h1.nome-produto { font-size: clamp(20px, 2.1vw, 26px) !important; } .pagina-produto .preco-produto .preco-promocional, .pagina-produto .preco-produto strong.preco-promocional { font-size: clamp(22px, 2.3vw, 28px) !important; } .pagina-produto .conteiner-imagem { max-width: 430px; margin-left: auto; margin-right: auto; } .pagina-produto #imagemProduto { max-height: 430px; width: 100%; object-fit: contain; } .pagina-produto .atributos .atributo-item, .atributo-item { padding-top: 5px !important; padding-bottom: 5px !important; font-size: 13.5px; } .pagina-produto .acoes-produto .botao-comprar, .pagina-produto .principal .botao-comprar { height: 48px !important; line-height: 48px !important; } .pagina-produto .abas-custom { margin-top: 18px; } /* ---------- cartões sem nada encavalado ---------- */ #livu-home .cat-foot { flex-wrap: wrap; gap: 8px 16px; } #livu-home .cat-price { flex: 1 1 auto; min-width: 0; } #livu-home .cat-go { flex: none; } #livu-home .cat-dots { gap: 4px; padding-left: 6px; } #livu-home .cat-dots i { margin-left: 0; } #livu-home .dots { gap: 10px; padding-left: 0; } #livu-home .dots span { margin-left: 0; box-shadow: none; width: 46px; height: 46px; } #livu-home .t-colors p, #livu-home .t-mag p { max-width: 40ch; } /* ---------- páginas de categoria iguais às do site ---------- */ #livu-home.livu-categoria .cat-title { font-size: clamp(32px, 4vw, 52px); margin: 8px 0 8px; } #livu-home.livu-categoria .cat-intro { font-size: 15.5px; } #livu-home.livu-categoria .sec-head { margin-bottom: 22px; } #livu-home.livu-categoria .grid { gap: 28px 18px; } #livu-home.livu-categoria .card-media { display: block; } #livu-home.livu-categoria .card-media img { object-fit: contain; } #livu-home.livu-categoria .card-media .tag { color: var(--ink); } #livu-home.livu-categoria a.add { text-decoration: none; color: #fff; } #livu-home.livu-categoria .card:hover .add .add-txt, #livu-home.livu-categoria .add:focus-visible .add-txt { max-width: 90px; opacity: 1; margin-left: 6px; } #livu-home.livu-categoria .rows a { font-size: clamp(18px, 1.8vw, 22px); padding: 16px 0; } #livu-home.livu-categoria > .section:last-child { padding-top: clamp(28px, 4vw, 48px); } @media (max-width: 900px) { #livu-home.livu-categoria .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- assistente de compras e WhatsApp no canto (os botões antigos da loja saem) ---------- */ #livu-bottom #fabs { display: flex !important; } #livu-bottom #chat { display: flex !important; } body.livu-chat-on .whats-btn-fixed, body.livu-chat-on #whatsappLink, body.livu-chat-on .botao-whatsapp-fixo, body.livu-chat-on .whatsapp-fixo { display: none !important; } body.livu-chat-on .scrollToTop { display: none !important; } #livu-bottom .fabs { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom) + var(--livu-cookie-space)); flex-direction: column; align-items: flex-end; gap: 12px; transition: bottom .35s var(--ease), opacity .3s, transform .4s var(--ease); } #livu-bottom .livu-support-toggle, #livu-bottom .livu-to-top { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), background .3s; } #livu-bottom .livu-support-toggle { color: #fff; background: var(--ink); } #livu-bottom .livu-to-top { color: var(--ink); background: #fff; font: 24px var(--font); } #livu-bottom .livu-support-options { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100vw - 36px); } #livu-bottom .livu-support-options[hidden], #livu-bottom .livu-to-top[hidden] { display: none !important; } #livu-bottom .livu-support-options .wa-label { max-width: 160px; opacity: 1; margin-left: 8px; } #livu-bottom .livu-support-options .ai-txt { max-width: 220px; opacity: 1; margin: 0; } #livu-bottom .livu-support-options .ai-fab { padding-right: 20px; } #livu-bottom .chat { bottom: calc(18px + var(--livu-cookie-space)); max-height: calc(100dvh - 36px - var(--livu-cookie-space)); } #livu-bottom .chat-peek { right: 82px; bottom: calc(18px + env(safe-area-inset-bottom) + var(--livu-cookie-space)); max-width: min(280px, calc(100vw - 106px)); } body.livu-cookies-visible #livu-bottom .chat-peek, #livu-bottom:has(.livu-support-toggle[aria-expanded="true"]) .chat-peek { visibility: hidden; pointer-events: none; } #livu-bottom .ai-txt b { font-size: 14px; } #livu-bottom .chat-head .round.sm { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 0; cursor: pointer; } #livu-bottom .chat-form .send { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; flex: none; } #livu-bottom .chat-human { text-decoration: none; } #livu-bottom .chat-log a { color: var(--brand); } @media (max-width: 640px) { #livu-bottom .ai-txt { max-width: 0; opacity: 0; margin: 0; } #livu-bottom .ai-fab { padding: 0 8px; } } #livu-bottom .msg.restored { animation: none; } #livu-bottom .chat-peek { position: fixed; z-index: 71; right: 18px; bottom: 86px; max-width: min(300px, calc(100vw - 36px)); padding: 12px 16px; border: 0; border-radius: 18px 18px 6px 18px; background: #fff; color: var(--ink); font-family: var(--font); font-size: 13.5px; line-height: 1.4; text-align: left; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .45s var(--ease); } #livu-bottom .chat-peek.show { opacity: 1; transform: none; pointer-events: auto; } #livu-bottom .chat-peek { right: 82px; bottom: calc(18px + env(safe-area-inset-bottom) + var(--livu-cookie-space)); max-width: min(280px, calc(100vw - 106px)); } /* Três categorias juntas no computador; no celular, deslize quando quiser. */ #livu-home #categorias .cat-head .car-nav, #livu-home #catDots { display: none; } #livu-home #catTrack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; cursor: auto; } #livu-home #catTrack .cat-tile { display: flex; flex-direction: column; padding: 14px; gap: 0; min-width: 0; border-radius: 26px; } #livu-home #catTrack .cat-media { width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; } #livu-home #catTrack .cat-body { width: 100%; flex: 1; padding: 22px 8px 8px; } #livu-home #catTrack .cat-body h3 { font-size: 27px; } #livu-home #catTrack .cat-foot { flex-wrap: wrap; gap: 16px; margin-top: 22px; } #livu-home.livu-categoria .card-media { background: color-mix(in srgb, var(--choice-color, #ECEEF2) 8%, #fff); transition: background .45s var(--ease); } #livu-home.livu-categoria .sw { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } #livu-top .bag-btn.bump { animation: livu-bag-response .45s var(--ease); } @keyframes livu-bag-response { 45% { transform: scale(1.12); } } @media (max-width: 760px) { #livu-home #catTrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; cursor: grab; } #livu-home #catTrack .cat-tile { flex: 0 0 86%; scroll-snap-align: center; } #livu-home #catDots { display: flex; } } @media (prefers-reduced-motion: reduce) { #livu-bottom .fabs, #livu-bottom .livu-support-toggle, #livu-bottom .livu-to-top, #livu-home.livu-categoria .card-media, #livu-home.livu-categoria .sw { transition: none; } #livu-top .bag-btn.bump { animation: none; } } .livu-guia { outline: 3px solid var(--brand, #2F5BFF) !important; outline-offset: 6px; border-radius: 14px; animation: lv-guia 1s ease-in-out 3; } @keyframes lv-guia { 50% { outline-color: rgba(47, 91, 255, .25); } } /* opção escolhida na página do produto (a loja marca o li com .active) */ .pagina-produto li.active > .atributo-item, .pagina-produto .atributo-item.active { border-color: var(--ink) !important; background: var(--ink) !important; color: #fff !important; } .pagina-produto li.active > .atributo-item *, .pagina-produto .atributo-item.active * { color: #fff !important; } /* ---------- login e cadastro: cartões arredondados, campos em pílula, tudo no visual novo ---------- */ body.pagina-login #corpo .conteiner, body.pagina-cadastro #corpo .conteiner { max-width: 1060px; } .cadastro .cabecalho-interno { margin-bottom: 8px; } .cadastro h1.titulo { font-family: var(--font) !important; font-size: clamp(30px, 3.4vw, 44px) !important; font-weight: 800 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; color: var(--ink) !important; text-transform: none !important; margin: 10px 0 26px !important; border: 0 !important; } .cadastro h1.titulo small { display: block; margin-top: 10px; font-size: 16px !important; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: var(--muted) !important; } .cadastro .cadastro-logar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 !important; } .cadastro .cadastro-logar > [class*="span"] { width: auto !important; float: none !important; margin: 0 !important; } .cadastro .caixa-sombreada { height: 100%; padding: clamp(24px, 3vw, 38px) !important; background: var(--surface) !important; border: 0 !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-1) !important; } .cadastro legend.titulo { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; font-family: var(--font) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--ink) !important; text-transform: none !important; } .cadastro legend.titulo i { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--bg); color: var(--ink); display: inline-grid; place-items: center; font-size: 16px; margin: 0 !important; } .cadastro .control-group { margin: 0 0 14px !important; } .cadastro .control-label { float: none !important; display: block; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; text-align: left !important; font-family: var(--font); font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .cadastro .controls { margin-left: 0 !important; display: flex; flex-direction: column; gap: 12px; } .cadastro input[type="text"], .cadastro input[type="email"], .cadastro input[type="password"], .cadastro input:not([type]) { width: 100% !important; max-width: none; height: 52px; margin: 0 !important; padding: 0 22px !important; border: 1px solid var(--line-2) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; font-family: var(--font); font-size: 15.5px; color: var(--ink); transition: border-color .25s, box-shadow .25s; } .cadastro input:focus { outline: 0; border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(15, 17, 21, .08) !important; } .cadastro button.botao, .cadastro .botao.principal, .cadastro input[type="submit"] { width: 100%; height: 52px; margin: 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: #fff !important; font-family: var(--font) !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 1 !important; text-shadow: none !important; box-shadow: none !important; transition: transform .35s var(--spring), background .25s; } .cadastro button.botao:hover, .cadastro .botao.principal:hover { background: var(--brand) !important; transform: translateY(-2px); } .cadastro .recuperar-senha { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2) !important; text-decoration: none; } .cadastro .recuperar-senha:hover { color: var(--brand) !important; } .cadastro .social-login-google { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .cadastro .caixa-sombreada form > fieldset > p, .cadastro .caixa-sombreada fieldset label:not(.control-label) { font-family: var(--font); font-size: 14px; color: var(--ink-2); } @media (max-width: 760px) { .cadastro .cadastro-logar { grid-template-columns: 1fr; } } /* janela "Esqueceu a senha" e demais modais da loja */ .modal, #modalRecuperarSenha { border: 0 !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-2) !important; overflow: hidden; font-family: var(--font); } .modal .modal-header { padding: 22px 26px 6px !important; border: 0 !important; background: transparent !important; } .modal .modal-header .titulo { font-family: var(--font) !important; font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.03em; color: var(--ink) !important; text-transform: none !important; } .modal .modal-header .close { width: 36px; height: 36px; border-radius: 50%; background: var(--bg) !important; opacity: 1 !important; color: var(--ink) !important; text-shadow: none !important; line-height: 34px; } .modal .modal-body { padding: 8px 26px 26px !important; border: 0 !important; max-height: none; } .modal .modal-body input[type="text"], .modal .modal-body input[type="email"], .modal .modal-body input[type="password"] { height: 50px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; box-shadow: none; font-family: var(--font); } .modal .modal-body .botao, .modal .modal-body button[type="submit"] { height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-shadow: none; box-shadow: none; } .cadastro .cadastro-logar::before, .cadastro .cadastro-logar::after { display: none !important; content: none !important; } .cadastro input, .cadastro .controls, .cadastro .control-group { box-sizing: border-box; } .cadastro .controls input { float: none !important; display: block; } .cadastro .conteiner, body.pagina-login #corpo .conteiner { padding-left: var(--gutter); padding-right: var(--gutter); } .cadastro .cadastro-logar { align-items: start; } .cadastro .caixa-sombreada { height: auto; } .cadastro .social-login-google, .cadastro #login-google, .cadastro #register-google { display: none !important; } .cadastro .caixa-sombreada form > fieldset > button, .cadastro .caixa-sombreada form > fieldset > .botao { margin-top: 12px !important; } .cadastro .recuperar-senha { margin: 8px 0 0 0 !important; padding: 0 !important; } .cadastro .recuperar-senha i { margin: 0 !important; } .cadastro .caixa-sombreada fieldset { margin: 0; padding: 0; border: 0; } /* telas estreitas: o número grande de 'Quem somos' (10%) não pode passar da caixa */ @media (max-width: 420px) { #livu-home .stat { padding: 18px 20px; gap: 12px; } #livu-home .stat b { flex: none; min-width: 0; font-size: 34px; } #livu-home .stat span { min-width: 0; overflow-wrap: anywhere; } } /* cards das categorias no celular: preço, selo do Pix e botão "+" não se apertam, e o texto pequeno respira */ #livu-home.livu-categoria .card-foot .price small { letter-spacing: 0; word-spacing: 0; line-height: 1.3; } @media (max-width: 520px) { #livu-home.livu-categoria .card-body { padding-left: 0; padding-right: 0; } #livu-home.livu-categoria .card-text h3 { font-size: 16px; } #livu-home.livu-categoria .card-text p { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } #livu-home.livu-categoria .card-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: end; } #livu-home.livu-categoria .card-foot .price-row { gap: 6px; align-items: flex-start; flex-direction: column; } #livu-home.livu-categoria .price .pix { font-size: 20px; letter-spacing: -.02em; } #livu-home.livu-categoria .pix-badge { font-size: 11px; padding: 3px 8px; } #livu-home.livu-categoria .card-foot .price small { font-size: 11.5px; margin-top: 2px; } #livu-home.livu-categoria a.add { width: 42px; height: 42px; flex: none; } }