:root {
--royal:      #1E4FD1;
--deep:       #0F2C6E;
--aqua:       #3BC9D6;
--yellow:     #FFC63A;
--bg-light:   #EEF4FF;
--text:       #2B3240;
--white:      #fff;
--green:      #00A650;
--green-dark: #00913F;
--red:        #E11D2E;
--muted:      #6B7385;
--line:       #DEE5F1;
--font-title: "Baloo 2", system-ui, sans-serif;
--font-body:  system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--header-h:   60px;
--tap:        44px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--text);
background: var(--white);
line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-title); margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--white);
color: var(--royal);
padding: 10px 14px;
font-weight: 700;
border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.announce {
background: var(--royal);
color: var(--white);
overflow: hidden;
}
.announce__viewport {
display: grid;
align-items: center;
min-height: 34px;
padding: 6px 10px;
overflow: hidden;
}
.announce__item {
grid-area: 1 / 1;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 350ms ease;
pointer-events: none;
}
.announce__item.is-active { opacity: 1; }
.announce__inner {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
white-space: nowrap;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.25;
will-change: transform;
}
.announce__icon {
width: 15px;
height: 15px;
flex: 0 0 auto;
color: var(--white);
}
.announce__item.is-marquee.is-active .announce__inner {
animation: announce-slide 9s ease-in-out infinite alternate;
}
@keyframes announce-slide {
from { transform: translateX(var(--shift, 0px)); }
to   { transform: translateX(calc(var(--shift, 0px) * -1)); }
}
@media (min-width: 400px) {
.announce__inner { font-size: 12px; }
.announce__icon { width: 16px; height: 16px; }
}
@media (min-width: 768px) {
.announce__viewport { min-height: 38px; }
.announce__inner { font-size: 13px; gap: 9px; }
.announce__icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.announce__item { transition: none; }
.announce__item.is-marquee.is-active .announce__inner { animation: none; }
}
.header {
background: var(--white);
border-bottom: 1px solid rgba(15, 44, 110, .08);
}
.header__bar {
display: grid;
grid-template-columns: var(--tap) 1fr var(--tap);
align-items: center;
gap: 8px;
min-height: var(--header-h);
padding: 6px 10px;
max-width: 1120px;
margin: 0 auto;
}
.header__logo {
justify-self: center;
display: block;
line-height: 0;
}
.header__logo img {
height: 44px;
width: auto;
object-fit: contain;
}
.icon-btn {
width: var(--tap);
height: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--royal);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { background: var(--bg-light); }
.icon-btn:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
@media (min-width: 768px) {
:root { --header-h: 72px; }
.header__bar { padding: 8px 20px; }
.header__logo img { height: 56px; }
}
.drawer-overlay {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(15, 44, 110, .45);
opacity: 0;
transition: opacity 280ms ease;
}
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.is-visible { opacity: 1; }
.drawer {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: min(82vw, 320px);
height: 100%;
height: 100dvh;
background: var(--white);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 300ms ease;
box-shadow: 0 0 40px rgba(15, 44, 110, .18);
overflow-y: auto;
visibility: hidden;
}
.drawer.is-open {
transform: translateX(0);
visibility: visible;
}
.drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: var(--header-h);
padding: 8px 8px 8px 18px;
border-bottom: 1px solid rgba(15, 44, 110, .08);
}
.drawer__title {
font-family: var(--font-title);
font-weight: 700;
font-size: 18px;
color: var(--deep);
}
.drawer__nav {
list-style: none;
margin: 0;
padding: 8px 0;
}
.drawer__nav a {
display: block;
padding: 14px 18px;
min-height: var(--tap);
font-family: var(--font-title);
font-weight: 600;
font-size: 17px;
color: var(--deep);
text-decoration: none;
}
.drawer__nav a:hover { background: var(--bg-light); color: var(--royal); }
.drawer__nav a:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; }
body.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.drawer, .drawer-overlay { transition: none; }
}
.gallery {
position: relative;
background: var(--white);
}
.gallery__track {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
flex: 0 0 100%;
margin: 0;
aspect-ratio: 1 / 1;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--bg-light);
}
.gallery__dots {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
pointer-events: none;
}
.gallery__dot {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.gallery__dot::before {
content: "";
display: block;
width: 7px;
height: 7px;
border-radius: 99px;
background: rgba(255, 255, 255, .7);
box-shadow: 0 1px 3px rgba(15, 44, 110, .3);
transition: width 250ms ease, background-color 250ms ease;
}
.gallery__dot[aria-current="true"]::before {
width: 20px;
background: var(--royal);
}
.gallery__dot:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; border-radius: 6px; }
.gallery__arrow {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: rgba(255, 255, 255, .82);
color: var(--deep);
cursor: pointer;
transition: opacity 200ms ease, background-color 200ms ease;
}
.gallery__arrow svg { width: 22px; height: 22px; }
.gallery__arrow:hover { background: var(--white); }
.gallery__arrow:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.gallery__arrow[disabled] { opacity: .3; cursor: default; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
@media (min-width: 768px) {
.gallery { max-width: 560px; margin: 0 auto; }
.gallery__arrow { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
.gallery__dot::before { transition: none; }
}
.offer {
background: var(--white);
padding: 18px 16px 30px;
}
.offer__inner {
max-width: 560px;
margin: 0 auto;
}
.offer__seal {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
padding: 6px 12px;
border-radius: 99px;
background: var(--red);
color: var(--white);
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 3px 10px rgba(225, 29, 46, .22);
}
.offer__seal svg { width: 14px; height: 14px; flex: 0 0 auto; }
.offer__title {
font-family: var(--font-title);
font-size: 25px;
font-weight: 800;
line-height: 1.15;
color: var(--deep);
margin: 0 0 9px;
}
.rating {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 12px;
font-size: 13px;
}
.rating__score {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
color: var(--text);
}
.rating__stars { width: 92px; height: 18.4px; display: block; flex: 0 0 auto; }
.rating__count { color: var(--muted); text-decoration: underline; }
.offer__sub {
margin: 0 0 20px;
font-size: 14.5px;
line-height: 1.55;
color: #4A5262;
}
.offer__label {
display: block;
width: 100%;
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
color: var(--deep);
margin: 0 0 10px;
padding: 0;
}
.themes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 0 0 20px;
}
.theme {
position: relative;
display: block;
padding: 5px 5px 7px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--white);
text-align: center;
cursor: pointer;
transition: border-color 180ms ease, box-shadow 180ms ease;
-webkit-tap-highlight-color: transparent;
}
.theme.is-selected {
border-color: var(--royal);
box-shadow: 0 0 0 2px rgba(30, 79, 209, .12);
}
.theme__pick {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 12px;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme__pick:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.theme__zoom {
position: absolute;
right: 6px;
bottom: 6px;
z-index: 2;
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: rgba(0, 0, 0, .35);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme__zoom::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 99px;
}
.theme__zoom svg { width: 15px; height: 15px; color: var(--white); }
.theme__zoom:focus-visible { outline: 2px solid var(--white); outline-offset: -3px; border-radius: 99px; }
.theme__thumb {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: 9px;
overflow: hidden;
background: #F1F4FA;
}
.theme__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.theme__check {
position: absolute;
top: -7px;
right: -7px;
z-index: 2;
width: 19px;
height: 19px;
border-radius: 99px;
background: var(--royal);
color: var(--white);
border: 2px solid var(--white);
display: none;
align-items: center;
justify-content: center;
}
.theme__check svg { width: 11px; height: 11px; }
.theme.is-selected .theme__check { display: flex; }
.theme__name {
display: flex;
align-items: center;
justify-content: center;
margin-top: 6px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.sizes {
border: 0;
margin: 0 0 18px;
padding: 0;
min-inline-size: 0;
}
.size {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 14px;
margin-bottom: 12px;
border: 2px solid var(--line);
border-radius: 14px;
background: var(--white);
cursor: pointer;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.size:last-child { margin-bottom: 0; }
.size.is-selected {
border-color: var(--royal);
box-shadow: 0 0 0 3px rgba(30, 79, 209, .12);
}
.size__radio {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
border: 2px solid #C7D2E6;
border-radius: 99px;
background: var(--white);
cursor: pointer;
position: relative;
}
.size__radio:checked { border-color: var(--royal); }
.size__radio:checked::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 99px;
background: var(--royal);
}
.size__radio:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.size__info { flex: 1 1 auto; min-width: 0; }
.size__prices { flex: 0 0 auto; text-align: right; }
.size__info > span,
.size__prices > span { display: block; }
.size__name {
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
line-height: 1.2;
color: var(--deep);
}
.size__dim { font-size: 12.5px; color: var(--muted); }
.size__save {
margin-top: 2px;
font-size: 12px;
font-weight: 700;
color: var(--green);
}
.size__from {
font-size: 11.5px;
color: #8A93A6;
text-decoration: line-through;
}
.size__pix {
font-family: var(--font-title);
font-weight: 800;
font-size: 17px;
line-height: 1.15;
color: var(--green);
}
.size__pix small { font-size: 11px; font-weight: 600; }
.size__tag {
position: absolute;
top: -9px;
right: 14px;
padding: 3px 9px;
border-radius: 99px;
background: var(--deep);
color: var(--white);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
white-space: nowrap;
}
.price {
background: transparent;
padding: 4px 0 0;
margin: 0 0 16px;
text-align: center;
}
.price__row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
}
.price__value {
font-family: var(--font-title);
font-weight: 800;
font-size: 30px;
line-height: 1;
color: var(--green);
}
.price__pix { font-size: 13px; font-weight: 600; color: var(--muted); }
.price__off {
padding: 4px 9px;
border-radius: 99px;
background: var(--red);
color: var(--white);
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
}
.price__card {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 9px 0 0;
font-size: 13px;
color: #4A5262;
}
.price__card svg { width: 17px; height: 17px; color: var(--deep); flex: 0 0 auto; }
.btn-buy {
display: block;
width: 100%;
min-height: 54px;
padding: 14px 18px;
border: 0;
border-radius: 14px;
background: var(--green);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 166, 80, .28);
animation: btn-pulse 2.4s ease-in-out infinite;
}
@keyframes btn-pulse {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.018); }
}
.btn-buy.is-highlight { animation: btn-destaque 1.1s ease 2; }
@keyframes btn-destaque {
0%, 100% { transform: scale(1);     box-shadow: 0 6px 18px rgba(0, 166, 80, .28); }
40%      { transform: scale(1.045); box-shadow: 0 10px 28px rgba(0, 166, 80, .5); }
}
.btn-buy:hover { background: var(--green-dark); }
.btn-buy:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.giftbox {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 11px 12px;
border-radius: 14px;
background: rgba(0, 166, 80, .07);
}
.giftbox__icon { flex: 0 0 auto; display: flex; color: var(--green); }
.giftbox__icon svg { width: 22px; height: 22px; }
.giftbox__text { flex: 1 1 auto; min-width: 0; text-align: left; }
.giftbox__title {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
color: var(--deep);
}
.giftbox__name {
display: block;
margin-top: 3px;
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
line-height: 1.25;
color: var(--text);
}
.giftbox__desc {
display: block;
font-size: 12.5px;
line-height: 1.35;
color: var(--muted);
}
.giftbox__thumb {
position: relative;
flex: 0 0 auto;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 10px;
overflow: hidden;
background: #F1F4FA;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.giftbox__thumb:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.giftbox__zoom {
position: absolute;
right: 3px;
bottom: 3px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
background: rgba(0, 0, 0, .35);
}
.giftbox__zoom svg { width: 11px; height: 11px; color: var(--white); }
.giftbox__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.offer__title { font-size: 30px; }
.price__value { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.btn-buy, .btn-buy.is-highlight { animation: none; }
.theme__thumb, .size { transition: none; }
}
.lightbox {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(8, 18, 40, .9);
opacity: 0;
transition: opacity 220ms ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 100%;
transform: scale(.96);
transition: transform 220ms ease;
}
.lightbox.is-open .lightbox__fig { transform: scale(1); }
.lightbox__img {
max-width: min(92vw, 560px);
max-height: 70vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 16px;
background: rgba(255, 255, 255, .06);
}
.lightbox__caption {
max-width: min(92vw, 560px);
padding: 11px 15px;
border-radius: 12px;
background: rgba(8, 18, 40, .78);
text-align: center;
}
.lightbox__name {
display: block;
font-family: var(--font-title);
font-weight: 700;
font-size: 18px;
color: var(--white);
}
.lightbox__desc {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.5;
color: #D9E0EE;
}
.lightbox__desc[hidden] { display: none; }
.lightbox__close,
.lightbox__nav {
position: absolute;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: rgba(255, 255, 255, .14);
color: var(--white);
cursor: pointer;
transition: background-color 180ms ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
@media (prefers-reduced-motion: reduce) {
.lightbox, .lightbox__fig { transition: none; }
.lightbox__fig { transform: none; }
}
.modal {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(8, 18, 40, .62);
opacity: 0;
transition: opacity 200ms ease;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal__card {
position: relative;
width: 100%;
max-width: 420px;
max-height: 88vh;
overflow-y: auto;
padding: 22px 18px 18px;
border-radius: 18px;
background: var(--white);
box-shadow: 0 20px 50px rgba(15, 44, 110, .28);
transform: scale(.96);
transition: transform 200ms ease;
}
.modal.is-open .modal__card { transform: scale(1); }
.modal__card:focus { outline: none; }
.modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: transparent;
color: var(--deep);
cursor: pointer;
}
.modal__close svg { width: 20px; height: 20px; }
.modal__close:hover { background: var(--bg-light); }
.modal__close:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.modal__title {
font-family: var(--font-title);
font-size: 20px;
font-weight: 800;
color: var(--deep);
margin: 0 44px 16px 0;
}
.review__theme {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.review__thumb {
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 10px;
object-fit: cover;
background: #F1F4FA;
}
.review__line,
.review__label {
margin: 0;
font-size: 14px;
color: #4A5262;
}
.review__line { margin-bottom: 12px; }
.review__label strong,
.review__line strong {
font-family: var(--font-title);
font-weight: 700;
color: var(--deep);
}
.review__gift {
padding: 11px 12px;
margin-bottom: 14px;
border: 1.5px dashed rgba(0, 166, 80, .45);
border-radius: 12px;
background: rgba(0, 166, 80, .06);
}
.review__giftHead {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 10px;
font-size: 13.5px;
font-weight: 700;
color: var(--deep);
}
.review__giftHead svg { width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; }
.review__giftHead .review__free { margin-left: auto; }
.review__giftBody {
display: flex;
align-items: center;
gap: 10px;
}
.review__giftThumb {
position: relative;
display: block;
overflow: hidden;
}
.review__giftThumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.review__giftText { min-width: 0; }
.review__giftText strong {
display: block;
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
line-height: 1.25;
color: var(--deep);
}
.review__brindeDesc {
display: block;
margin-top: 1px;
font-size: 12.5px;
color: var(--muted);
}
.review__free {
padding: 3px 9px;
border-radius: 99px;
background: var(--green);
color: var(--white);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .04em;
}
.review__price {
text-align: center;
padding: 12px 0 16px;
}
.review__pix {
display: flex;
align-items: baseline;
justify-content: center;
gap: 7px;
margin: 0;
}
.review__value {
font-family: var(--font-title);
font-weight: 800;
font-size: 30px;
line-height: 1;
color: var(--green);
}
.review__pixTag { font-size: 13px; font-weight: 600; color: var(--muted); }
.review__card {
margin: 7px 0 0;
font-size: 13px;
color: #4A5262;
}
.modal__cta {
display: block;
width: 100%;
min-height: 54px;
padding: 14px 18px;
border: 0;
border-radius: 14px;
background: var(--green);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 18px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 166, 80, .26);
}
.modal__cta:hover { background: var(--green-dark); }
.modal__cta:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.modal__back {
display: block;
width: 100%;
min-height: 44px;
margin-top: 6px;
padding: 10px;
border: 0;
background: transparent;
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.modal__back:hover { color: var(--royal); }
.modal__back:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.modal, .modal__card { transition: none; }
.modal__card { transform: none; }
}
.faq { margin-top: 30px; }
.faq__title {
font-family: var(--font-title);
font-size: 21px;
font-weight: 800;
color: var(--deep);
text-align: center;
margin: 0 0 16px;
}
.faq__list { border-bottom: 1px solid #E7ECF5; }
.faq__item { border-top: 1px solid #E7ECF5; }
.faq__q { margin: 0; }
.faq__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 15px 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.faq__btn:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; border-radius: 6px; }
.faq__label {
font-family: var(--font-title);
font-weight: 700;
font-size: 14.5px;
line-height: 1.3;
color: var(--deep);
}
.faq__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--royal);
transition: transform 240ms ease;
}
.faq__icon svg { width: 18px; height: 18px; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 260ms ease, opacity 200ms ease;
}
.faq__item.is-open .faq__panel {
grid-template-rows: 1fr;
opacity: 1;
}
.faq__panelInner { overflow: hidden; }
.faq__a {
margin: 0;
padding: 0 0 16px;
font-size: 14px;
line-height: 1.6;
color: #4A5262;
}
@media (min-width: 768px) {
.faq__title { font-size: 24px; }
.faq__label { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
.faq__icon, .faq__panel { transition: none; }
}
.social {
background: var(--deep);
color: var(--white);
padding: 32px 16px 36px;
}
.social__inner {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.social__title {
font-family: var(--font-title);
font-size: 23px;
font-weight: 800;
line-height: 1.2;
color: var(--white);
margin: 0 0 10px;
}
.social__sub {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, .82);
}
.social__videos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.social__video {
position: relative;
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, .09);
}
.social__video video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
@media (min-width: 768px) {
.social { padding: 44px 20px 48px; }
.social__title { font-size: 28px; }
.social__sub { font-size: 15px; }
.social__videos { gap: 12px; }
}
.emo {
background: var(--bg-light);
padding: 34px 16px 38px;
}
.emo__inner {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.emo__supra {
margin: 0 0 8px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .1em;
color: var(--royal);
}
.emo__title {
font-family: var(--font-title);
font-size: 23px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
margin: 0 0 12px;
}
.emo__text {
margin: 0 0 22px;
font-size: 14.5px;
line-height: 1.65;
color: #4A5262;
}
.emo__photo {
position: relative;
width: 100%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 3 / 4;
border-radius: 18px;
overflow: hidden;
background: #DCE4F2;
}
.emo__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.emo { padding: 48px 20px 52px; }
.emo__title { font-size: 28px; }
.emo__text { font-size: 15.5px; }
.emo__photo { max-width: 380px; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cmp {
background: var(--white);
padding: 34px 16px 38px;
}
.cmp__inner {
max-width: 560px;
margin: 0 auto;
}
.cmp__title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
text-align: center;
margin: 0 0 10px;
}
.cmp__sub {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: #4A5262;
text-align: center;
}
.cmp__box {
padding: 14px;
border-radius: 20px;
background: var(--bg-light);
box-shadow: 0 8px 24px rgba(15, 44, 110, .08);
}
.cmp__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.cmp__table th,
.cmp__table td {
padding: 12px 6px;
vertical-align: middle;
text-align: center;
}
.cmp__table tbody th[scope="row"] {
width: auto;
padding-left: 0;
padding-right: 10px;
text-align: left;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
color: var(--text);
}
.cmp__table thead th {
width: 82px;
font-family: var(--font-title);
font-size: 12px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
}
.cmp__table tbody th[scope="row"],
.cmp__table tbody td:last-child { border-bottom: 1px solid #DDE5F3; }
.cmp__table tbody .cmp__colAk { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.cmp__table tbody tr:last-child th[scope="row"],
.cmp__table tbody tr:last-child td:last-child { border-bottom: 0; }
.cmp__colAk { background: var(--deep); color: var(--white); }
.cmp__table thead .cmp__colAk { border-radius: 12px 12px 0 0; color: var(--white); }
.cmp__table tbody tr:last-child .cmp__colAk {
border-radius: 0 0 12px 12px;
border-bottom: 0;
}
.cmp__sim,
.cmp__simPapel,
.cmp__nao {
display: inline-flex;
align-items: center;
justify-content: center;
}
.cmp__sim {
width: 24px;
height: 24px;
border-radius: 99px;
background: rgba(255, 255, 255, .16);
color: var(--white);
}
.cmp__sim svg { width: 14px; height: 14px; }
.cmp__simPapel { color: var(--royal); }
.cmp__simPapel svg { width: 18px; height: 18px; }
.cmp__nao { color: var(--red); }
.cmp__nao svg { width: 17px; height: 17px; }
.cmp__resumo th[scope="row"] { padding: 0; }
.cmp__resumo td { padding-top: 12px; padding-bottom: 14px; }
.cmp__selo,
.cmp__ruim {
display: inline-block;
max-width: 100%;
font-family: var(--font-title);
font-weight: 800;
font-size: 11px;
line-height: 1.2;
}
.cmp__selo {
padding: 5px 9px;
border-radius: 99px;
background: var(--yellow);
color: var(--deep);
}
.cmp__ruim {
padding: 5px 4px;
color: var(--red);
}
.cmp__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 54px;
margin-top: 14px;
padding: 14px 18px;
border: 0;
border-radius: 14px;
background: var(--deep);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 17px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(15, 44, 110, .24);
}
.cmp__cta svg { width: 20px; height: 20px; flex: 0 0 auto; }
.cmp__cta:hover { background: #0B2255; }
.cmp__cta:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
@media (min-width: 768px) {
.cmp { padding: 46px 20px 50px; }
.cmp__title { font-size: 27px; }
.cmp__sub { font-size: 15px; }
.cmp__box { padding: 18px; }
.cmp__table thead th { width: 110px; font-size: 13px; }
.cmp__table tbody th[scope="row"] { font-size: 14.5px; }
}
.nums {
background: var(--deep);
color: var(--white);
padding: 34px 16px 38px;
}
.nums__inner {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.nums__title {
font-family: var(--font-title);
font-size: 23px;
font-weight: 800;
line-height: 1.2;
color: var(--white);
margin: 0 0 10px;
}
.nums__sub {
margin: 0 0 24px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, .82);
}
.nums__grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 20px;
overflow: hidden;
background: #16357A;
border: 1px solid rgba(255, 255, 255, .1);
}
.nums__item {
padding: 20px 14px;
border-right: 1px solid rgba(255, 255, 255, .15);
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.nums__item:nth-child(2n) { border-right: 0; }
.nums__item:nth-last-child(-n+2) { border-bottom: 0; }
.nums__value {
margin: 0 0 6px;
font-family: var(--font-title);
font-size: 36px;
font-weight: 800;
line-height: 1;
color: var(--white);
font-variant-numeric: tabular-nums;
}
.nums__desc {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: rgba(255, 255, 255, .75);
}
@media (min-width: 768px) {
.nums { padding: 46px 20px 50px; }
.nums__title { font-size: 28px; }
.nums__sub { font-size: 15px; }
.nums__grid { grid-template-columns: repeat(4, 1fr); }
.nums__item { padding: 22px 16px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .15); }
.nums__item:last-child { border-right: 0; }
.nums__value { font-size: 40px; }
.nums__desc { font-size: 13px; }
}
.aval {
background: var(--white);
padding: 28px 16px 24px;
}
.aval__inner {
max-width: 560px;
margin: 0 auto;
}
.aval__title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
text-align: center;
margin: 0 0 14px;
}
.aval__resumo {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 14px;
margin-bottom: 16px;
border-radius: 18px;
background: var(--white);
box-shadow: 0 8px 24px rgba(15, 44, 110, .1);
}
.aval__nota {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding-right: 14px;
border-right: 1px solid #E7ECF5;
}
.aval__notaNum {
font-family: var(--font-title);
font-size: 34px;
font-weight: 800;
line-height: 1;
color: var(--deep);
}
.aval__notaTotal {
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
}
.aval__stars { display: block; width: 86px; height: 17.2px; }
.aval__stars--big { width: 92px; height: 18.4px; }
.aval__barras {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.aval__bar {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: var(--muted);
}
.aval__barNum { flex: 0 0 auto; width: 8px; text-align: right; }
.aval__barTrack {
flex: 1 1 auto;
height: 6px;
border-radius: 99px;
background: #EDF1F8;
overflow: hidden;
}
.aval__barFill {
display: block;
height: 100%;
border-radius: 99px;
background: var(--yellow);
}
.aval__barQtd { flex: 0 0 auto; width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.aval__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.aval__card {
padding: 10px;
border: 1px solid #E7ECF5;
border-radius: 14px;
background: var(--white);
}
.aval__card.is-hidden { display: none; }
.aval__card.is-revealing { animation: aval-entra 320ms ease both; }
@keyframes aval-entra {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}
.aval__photo {
position: relative;
display: block;
aspect-ratio: 3 / 4;
margin-bottom: 9px;
border-radius: 10px;
overflow: hidden;
background: #E9EEF7;
}
.aval__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.aval__card .aval__stars { width: 72px; height: 14.4px; margin-bottom: 6px; }
.aval__name {
margin: 0 0 4px;
font-family: var(--font-title);
font-size: 13.5px;
font-weight: 700;
color: var(--deep);
}
.aval__text {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: #4A5262;
}
.aval__mais,
.aval__escrever {
display: block;
width: 100%;
min-height: 50px;
padding: 13px 18px;
border-radius: 14px;
font-family: var(--font-title);
font-weight: 800;
font-size: 16px;
cursor: pointer;
}
.aval__mais {
border: 0;
background: var(--deep);
color: var(--white);
margin-bottom: 8px;
}
.aval__mais[hidden] { display: none; }
.aval__mais:hover { background: #0B2255; }
.aval__escrever {
border: 2px solid var(--royal);
background: transparent;
color: var(--royal);
}
.aval__escrever:hover { background: var(--bg-light); }
.aval__mais:focus-visible,
.aval__escrever:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.aval__ok {
margin: 12px 0 0;
padding: 11px 12px;
border-radius: 12px;
background: rgba(0, 166, 80, .1);
color: #00733A;
font-size: 13.5px;
font-weight: 700;
text-align: center;
}
.aval__ok[hidden] { display: none; }
@media (min-width: 768px) {
.aval { padding: 36px 20px 32px; }
.aval__title { font-size: 27px; }
.aval__grid { grid-template-columns: repeat(4, 1fr); }
.aval__resumo { padding: 20px 18px; gap: 22px; }
}
.avalForm { margin-top: 4px; }
.avalForm__label {
display: block;
margin: 14px 0 7px;
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
color: var(--deep);
}
.avalForm__label:first-child { margin-top: 0; }
.avalForm__stars {
display: flex;
gap: 4px;
margin-bottom: 4px;
}
.avalForm__star {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: #DDE4EF;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 140ms ease, color 140ms ease;
}
.avalForm__star svg { width: 27px; height: 27px; fill: currentColor; }
.avalForm__star.is-on { color: var(--yellow); }
.avalForm__star:hover { transform: scale(1.08); }
.avalForm__star:focus-visible { outline: 2px solid var(--royal); outline-offset: -2px; border-radius: 8px; }
.avalForm__input {
display: block;
width: 100%;
padding: 12px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--white);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.45;
}
.avalForm__input::placeholder { color: #9AA3B5; }
.avalForm__input:focus-visible { outline: 2px solid var(--royal); outline-offset: 1px; border-color: var(--royal); }
.avalForm__area { resize: vertical; min-height: 96px; }
.avalForm__foto {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
margin-top: 14px;
padding: 11px 14px;
border: 1.5px dashed var(--line);
border-radius: 12px;
color: var(--royal);
font-size: 13.5px;
font-weight: 700;
text-align: center;
cursor: pointer;
}
.avalForm__foto:hover { background: var(--bg-light); }
.avalForm__foto svg { width: 19px; height: 19px; flex: 0 0 auto; }
.avalForm__fotoTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avalForm__enviar {
display: block;
width: 100%;
min-height: 52px;
margin-top: 16px;
padding: 13px 18px;
border: 0;
border-radius: 14px;
background: var(--royal);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 17px;
cursor: pointer;
}
.avalForm__enviar:hover { background: #1A44B4; }
.avalForm__enviar:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.avalForm__enviar[disabled] {
background: #C7D2E6;
color: #F4F7FC;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.avalForm__star { transition: none; }
.aval__card.is-revealing { animation: none; }
}
.foot {
background: var(--deep);
color: var(--white);
padding: 30px 16px 26px;
}
.foot__inner {
max-width: 560px;
margin: 0 auto;
}
.foot__brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.foot__logo {
width: auto;
height: 38px;
}
.foot__newsTitle {
font-family: var(--font-title);
font-size: 19px;
font-weight: 800;
line-height: 1.25;
color: var(--white);
margin: 0 0 8px;
}
.foot__newsText {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, .8);
}
.foot__form {
position: relative;
display: flex;
align-items: center;
}
.foot__input {
width: 100%;
min-height: 50px;
padding: 13px 58px 13px 18px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 99px;
background: rgba(255, 255, 255, .08);
color: var(--white);
font-family: var(--font-body);
font-size: 16px;
}
.foot__input::placeholder { color: rgba(255, 255, 255, .55); }
.foot__input:focus-visible {
outline: 2px solid var(--white);
outline-offset: 1px;
border-color: transparent;
}
.foot__send {
position: absolute;
right: 5px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: var(--royal);
color: var(--white);
cursor: pointer;
}
.foot__send svg { width: 20px; height: 20px; }
.foot__send:hover { background: #1A44B4; }
.foot__send:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.foot__msg {
margin: 10px 0 0;
font-size: 13px;
font-weight: 700;
}
.foot__msg[hidden] { display: none; }
.foot__msg.is-ok { color: #7BE3AE; }
.foot__msg.is-erro { color: #FFB3B8; }
.foot__line {
height: 0;
margin: 22px 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .15);
}
.foot__acc { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.foot__acc:last-child { border-bottom: 0; }
.foot__accQ { margin: 0; }
.foot__accBtn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 14px 0;
border: 0;
background: transparent;
color: var(--white);
font-family: var(--font-title);
font-weight: 700;
font-size: 15px;
text-align: left;
cursor: pointer;
}
.foot__accBtn:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; border-radius: 6px; }
.foot__accIcon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
transition: transform 240ms ease;
}
.foot__accIcon svg { width: 18px; height: 18px; }
.foot__acc.is-open .foot__accIcon { transform: rotate(45deg); }
.foot__accPanel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 260ms ease, opacity 200ms ease;
}
.foot__acc.is-open .foot__accPanel {
grid-template-rows: 1fr;
opacity: 1;
}
.foot__accInner { overflow: hidden; }
.foot__list {
list-style: none;
margin: 0;
padding: 0 0 12px;
}
.foot__list a {
display: block;
padding: 9px 0;
font-size: 14px;
color: rgba(255, 255, 255, .82);
text-decoration: none;
}
.foot__list a:hover { color: var(--white); text-decoration: underline; }
.foot__list a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 4px; }
.foot__missionTitle {
margin: 0 0 7px;
font-family: var(--font-title);
font-size: 15px;
font-weight: 800;
color: var(--white);
}
.foot__missionText {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, .8);
}
.foot__copy {
text-align: center;
color: rgba(255, 255, 255, .7);
}
.foot__copy p { margin: 0; font-size: 12.5px; }
@media (min-width: 768px) {
.foot { padding: 44px 20px 32px; }
.foot__newsTitle { font-size: 22px; }
.foot__logo { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.foot__accIcon, .foot__accPanel { transition: none; }
}
.doc {
background: var(--white);
padding: 22px 16px 40px;
}
.doc__inner {
max-width: 620px;
margin: 0 auto;
}
.doc__back {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
font-weight: 700;
color: var(--royal);
text-decoration: none;
}
.doc__back:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 10px; }
.doc__back svg { width: 17px; height: 17px; flex: 0 0 auto; }
.doc__back--top {
padding: 11px 16px;
border: 1.5px solid var(--royal);
border-radius: 99px;
background: var(--bg-light);
font-size: 14px;
}
.doc__back--top:hover { background: var(--royal); color: var(--white); }
.doc__back--fim {
margin-top: 10px;
font-size: 13.5px;
}
.doc__back--fim:hover { text-decoration: underline; }
.doc__title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
margin: 18px 0;
}
.doc__inner h2 {
font-family: var(--font-title);
font-size: 17px;
font-weight: 700;
color: var(--deep);
margin: 24px 0 8px;
}
.doc__inner p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.7;
color: #3E4655;
}
.doc__inner p strong { color: var(--deep); }
.doc__inner ul {
margin: 0 0 14px;
padding-left: 20px;
}
.doc__inner li {
margin-bottom: 7px;
font-size: 15px;
line-height: 1.7;
color: #3E4655;
}
.doc__inner a { color: var(--royal); }
@media (min-width: 768px) {
.doc { padding: 30px 20px 56px; }
.doc__title { font-size: 32px; }
}
.bump { margin: 0 0 18px; }
.bump[hidden] { display: none; }
.bump.is-entrando { animation: bump-entra 380ms ease both; }
@keyframes bump-entra {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: none; }
}
.bump__card {
position: relative;
padding: 14px 12px 12px;
border: 2px solid var(--line);
border-radius: 14px;
background: var(--white);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bump__card.is-selected {
border-color: var(--royal);
box-shadow: 0 0 0 3px rgba(30, 79, 209, .12);
}
.bump__tag {
position: absolute;
top: -9px;
left: 14px;
padding: 3px 9px;
border-radius: 99px;
background: var(--green);
color: var(--white);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
}
.bump__row {
display: flex;
align-items: center;
gap: 11px;
}
.bump__thumb {
position: relative;
flex: 0 0 auto;
width: 78px;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: #F1F4FA;
}
.bump__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bump__ver {
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
border: 0;
border-radius: 99px;
background: rgba(0, 0, 0, .45);
color: var(--white);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .05em;
cursor: pointer;
}
.bump__ver svg { width: 11px; height: 11px; }
.bump__ver:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
.bump__info { flex: 1 1 auto; min-width: 0; }
.bump__info > span { display: block; }
.bump__name {
font-family: var(--font-title);
font-weight: 700;
font-size: 14.5px;
line-height: 1.2;
color: var(--deep);
}
.bump__free {
display: inline-block !important;
margin: 4px 0 5px;
padding: 2px 7px;
border-radius: 99px;
background: rgba(0, 166, 80, .12);
color: #00733A;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .04em;
}
.bump__desc {
font-size: 12px;
line-height: 1.35;
color: var(--muted);
}
.bump__price {
margin-top: 4px;
font-family: var(--font-title);
font-weight: 800;
font-size: 15px;
color: var(--green);
}
.bump__pick {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
cursor: pointer;
}
.bump__check {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 24px;
height: 24px;
margin: 0;
border: 2px solid #C7D2E6;
border-radius: 99px;
background: var(--white);
cursor: pointer;
}
.bump__check:checked { border-color: var(--royal); background: var(--royal); }
.bump__check:checked::after {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid var(--white);
border-width: 0 2.5px 2.5px 0;
transform: rotate(43deg);
}
.bump__check:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.bump__perso {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.bump__perso[hidden] { display: none; }
.bump__persoTitle {
display: block;
margin-bottom: 8px;
font-family: var(--font-title);
font-weight: 700;
font-size: 13px;
color: var(--deep);
}
.bump__persoRow {
display: flex;
align-items: center;
gap: 10px;
}
.bump__input {
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
padding: 11px 12px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--white);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
}
.bump__input::placeholder { color: #9AA3B5; }
.bump__input:focus-visible { outline: 2px solid var(--royal); outline-offset: 1px; border-color: var(--royal); }
.bump__prev {
position: relative;
flex: 0 0 auto;
width: 68px;
aspect-ratio: 1 / 1;
padding: 0;
border: 1.5px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #F1F4FA;
cursor: pointer;
}
.bump__prevImg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bump__prev:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.bump__zoomTxt,
.bump__semNome,
.bump__addNome {
display: block;
width: 100%;
min-height: 40px;
padding: 9px 6px;
border: 0;
background: transparent;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.bump__zoomTxt { margin-top: 8px; color: var(--royal); }
.bump__semNome { color: var(--muted); text-decoration: underline; }
.bump__addNome {
margin-top: 10px;
color: var(--royal);
text-decoration: underline;
}
.bump__addNome[hidden] { display: none; }
.bump__zoomTxt:focus-visible,
.bump__semNome:focus-visible,
.bump__addNome:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 8px; }
.bagname {
position: absolute;
top: var(--et-top, 45.5%);
left: var(--et-left, 28.5%);
width: var(--et-width, 42%);
height: var(--et-height, 16%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
}
.bagname[hidden] { display: none; }
.bagname__txt {
flex: 0 0 auto;
display: block;
box-sizing: border-box;
padding: 0 5%;
font-family: var(--font-title);
font-weight: 700;
line-height: 1.06;
text-align: center;
color: #2B3240;
transform-origin: center center;
overflow-wrap: normal;
}
.bagname__medidor {
position: fixed;
left: -9999px;
top: 0;
visibility: hidden;
pointer-events: none;
}
.lightbox__quadro {
position: relative;
display: inline-block;
line-height: 0;
}
@media (prefers-reduced-motion: reduce) {
.bump.is-entrando { animation: none; }
.bump__card { transition: none; }
}
.review__bag {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
margin-bottom: 14px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--bg-light);
}
.review__bag[hidden] { display: none; }
.review__bagThumb {
position: relative;
overflow: hidden;
}
.review__bagImg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.review__bagLinha {
display: block;
margin-top: 1px;
font-size: 12.5px;
color: var(--muted);
}
.review__bagLinha span {
font-weight: 700;
color: var(--deep);
}
.cart-overlay {
position: fixed;
inset: 0;
z-index: 64;
background: rgba(15, 44, 110, .38);
opacity: 0;
transition: opacity 260ms ease;
}
.cart-overlay[hidden] { display: none; }
.cart-overlay.is-visible { opacity: 1; }
.cart {
position: fixed;
top: 0;
right: 0;
z-index: 65;
display: flex;
flex-direction: column;
width: min(88vw, 340px);
height: 100%;
height: 100dvh;
background: var(--white);
box-shadow: -8px 0 36px rgba(15, 44, 110, .2);
transform: translateX(100%);
transition: transform 280ms ease;
}
.cart[hidden] { display: none; }
.cart.is-open { transform: translateX(0); }
.cart__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 8px 12px 16px;
border-bottom: 1px solid var(--line);
}
.cart__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-title);
font-weight: 800;
font-size: 17px;
color: var(--deep);
}
.cart__title svg { width: 19px; height: 19px; color: var(--royal); }
.cart__close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 99px;
background: transparent;
color: var(--deep);
cursor: pointer;
}
.cart__close svg { width: 19px; height: 19px; }
.cart__close:hover { background: var(--bg-light); }
.cart__close:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.cart__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px 16px;
}
.cart__row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.cart__row:last-child { border-bottom: 0; }
.cart__row[hidden] { display: none; }
.cart__thumb {
position: relative;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 9px;
overflow: hidden;
background: #F1F4FA;
}
.cart__thumb[hidden] { display: none; }
.cart__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cart__txt { flex: 1 1 auto; min-width: 0; }
.cart__rot {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
}
.cart__val {
display: block;
margin-top: 2px;
font-family: var(--font-title);
font-weight: 700;
font-size: 14px;
line-height: 1.25;
color: var(--deep);
}
.cart__val.is-falta { color: var(--red); }
.cart__preco {
flex: 0 0 auto;
font-family: var(--font-title);
font-weight: 700;
font-size: 13.5px;
color: var(--green);
}
.cart__gratis {
flex: 0 0 auto;
padding: 3px 8px;
border-radius: 99px;
background: var(--green);
color: var(--white);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
}
.cart__foot {
flex: 0 0 auto;
padding: 14px 16px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--white);
}
.cart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.cart__total span {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.cart__total strong {
font-family: var(--font-title);
font-weight: 800;
font-size: 22px;
color: var(--green);
}
.cart__cta {
display: block;
width: 100%;
min-height: 50px;
padding: 13px 16px;
border: 0;
border-radius: 14px;
background: var(--royal);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 16px;
cursor: pointer;
}
.cart__cta:hover { background: #1A44B4; }
.cart__cta:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.is-destaque {
animation: destaque-etapa 2s ease;
border-radius: 14px;
}
@keyframes destaque-etapa {
0%, 100% { box-shadow: 0 0 0 0 rgba(30, 79, 209, 0); }
25%, 75% { box-shadow: 0 0 0 5px rgba(30, 79, 209, .22); }
}
@media (prefers-reduced-motion: reduce) {
.cart, .cart-overlay { transition: none; }
.is-destaque { animation: none; }
}
.icon-btn--cart { position: relative; }
.cart-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
background: var(--red);
color: var(--white);
font-family: var(--font-title);
font-weight: 800;
font-size: 11px;
line-height: 1;
box-shadow: 0 0 0 2px var(--white);
pointer-events: none;
}
.cart-badge[hidden] { display: none; }
.cart-badge.is-pop { animation: badge-pop 420ms ease; }
@keyframes badge-pop {
0%   { transform: scale(.4); opacity: 0; }
60%  { transform: scale(1.18); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cart-badge.is-pop { animation: none; }
}
.faqfull {
background: var(--white);
padding: 24px 16px 36px;
}
.faqfull__inner {
max-width: 560px;
margin: 0 auto;
}
.faqfull__title {
font-family: var(--font-title);
font-size: 22px;
font-weight: 800;
line-height: 1.2;
color: var(--deep);
text-align: center;
margin: 0 0 18px;
}
@media (min-width: 768px) {
.faqfull { padding: 34px 20px 44px; }
.faqfull__title { font-size: 27px; }
}
.dica {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 12px 13px;
margin: 16px 0 0;
border-radius: 16px;
background: var(--bg-light);
}
.dica__icone {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 99px;
background: var(--white);
color: var(--royal);
}
.dica__icone svg { width: 19px; height: 19px; }
.dica__txt { min-width: 0; }
.dica__titulo {
display: block;
margin-bottom: 3px;
font-family: var(--font-title);
font-weight: 800;
font-size: 15px;
color: var(--deep);
}
.dica__texto {
display: block;
font-size: 13.5px;
line-height: 1.55;
color: #4A5262;
}
@media (min-width: 768px) {
.dica { padding: 14px 18px; }
.dica__texto { font-size: 14.5px; }
}