@font-face { font-family: 'Open Sans'; font-display: swap; src: url(/assets/open-sans-latin-normal.woff2) format('woff2'); }
html { line-height: 1.3; font-family: 'Open Sans', sans-serif; font-size: min(21px, .3vw + 17px); scrollbar-width: none;; scroll-behavior: smooth; scroll-snap-type: both mandatory; }
body { margin: 0; position: relative; }
* { box-sizing: border-box; }
.breadcrumb { position: absolute; top: -30vh; line-height: 1 } .breadcrumb li { display: inline }
header { z-index: 10; }
h1 { font-size: 2.25rem; text-align: center; margin: 0; }
h1 span { font-size: .58em; }
h2 { line-height: 1.1; margin: .2em 0; font-size: 2.1rem; }
p, address { margin: 1em .3em; width: stretch; }
a { font-weight: bold; text-decoration: none; }
address { text-align: center}

.text-white { color: #fff; text-shadow: 0 0 .1em #000, 0 0 .1em #000; }
.absolute-fullscrn { position: absolute; width: 100%; height: 100dvh; }
.flex-vertical { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.icon-link { display: flex; align-items: center; gap: .3em; width: fit-content; margin: 0 auto; }

.container { min-height: 100dvh; position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.img-full { height: 100dvh; width: 100%; object-position: 0 0; object-fit: cover; display: block; }

.button { font-size: 1.1em; color: #000; background: #fff; padding: .2em .4em; border-radius: .5em; box-shadow: .1em .1em .4em #000; }
.btn-wpp { color: #fff; background: #25d366; }

.one-img-txt { display: flex; justify-content: center; }
.one-img-txt img { object-fit: cover; aspect-ratio: 9 / 16; border-radius: 1em; height: auto; }
.one-img-txt div { max-width: 40em; z-index: 3; position: relative; }

.localizacao { max-width: 46em; margin: 0 auto; padding-bottom: 8rem; gap: 2em; }

footer { display: flex; justify-content: center; flex-wrap: wrap; background: #000; color: #fff; text-align: center; position: absolute; inset: auto 0 0; scroll-snap-align: end; scroll-snap-stop: always; }
footer a.icon-link { color: #fff; margin: 1.5em; }
footer div { font-size: .85em; width: 100% }

.down-button { position: absolute; bottom: 0; right: 0; left: 0; font-size: 2.5em; font-weight: bold; color: #fff; text-shadow: 0 0 .1em #000, 0 0 .1em #000; background-color: transparent; border: none; margin-bottom: 0.1em; }

@media (width <= 719px) { .one-img-txt { padding-bottom: 6rem; } }
@media (width > 639px) and (height <= 599px) { .one-img-txt img { max-width: 47vw; min-height: 608px; margin: 1.5vw; } }
@media (width > 767px) and (height > 599px) { .one-img-txt { align-items: center; } .one-img-txt img { max-width: 47vw; max-height: 96dvh; margin: min(2dvh, 1.5vw); } }
@media (width <= 767px) and (height > 599px) { .one-img-txt { flex-wrap: wrap; } .one-img-txt img { max-height: 98dvh; margin: 1dvh; max-width: calc(100vw - 2dvh); } .one-img-txt h2 { color: #fff; text-align: center; text-shadow: 0 0 .1em #000, 0 0 .1em #000; position: absolute; inset: -100vw 0 auto; } }

.home ul { list-style: none; margin-block-start: 0.4em; padding: .5em .7em; font-weight: bold; font-size: 1.4em; text-align: center; text-shadow: 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff; background: #fff6; border-radius: .5em; }
.product ul { list-style: none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; margin-inline-start: 0.3em; margin-inline-end: 0.3em; }
.product h2 { margin: 3em 0.3rem 0.5em 0.3rem; font-weight: 800; color: #e0e0e0; text-shadow: -1px -1px 0 #666,1px -1px 0 #666,-1px 1px 0 #666,1px 1px 0 #666,0 0 2px #333; background-image: url(); }
.product > header > p.text-white { position: absolute; bottom: 20dvh; text-align: center; font-weight: 700; font-size: 1.4em; }
.product main { padding-bottom: 15em; scroll-snap-align: start; scroll-snap-stop: always }

.carrossel { display: flex; gap: 0.4em; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; anchor-name: --carrossel; anchor-scope: --carrossel; }
.carrossel img { flex: none; max-width: 93vw; height: auto; max-height: 100dvh; min-height: 540px; aspect-ratio: 9 / 16; object-fit: cover; scroll-snap-align: start; border-radius: 1em; }
@media (pointer: fine) {
    .carrossel { scroll-snap-align: start; scroll-snap-stop: always; } html { scroll-snap-type: both proximity; }
	:is(html, .carrossel)::scroll-button(*) { width: 1.4em; height: 1.4em; padding: 0; border: 0; border-radius: .4em; font-size: 1.5em; font-weight: bold; background: #ffffff8f; text-shadow: 0 0 .04em #000, 0 0 .04em #000; cursor: pointer; }
	:is(html, .carrossel)::scroll-button(*):disabled { opacity: .3; cursor: default; }
	.carrossel::scroll-button(*) { position: absolute; position-anchor: --carrossel; align-self: anchor-center; }
	.carrossel::scroll-button(left) { content: '〈' / 'Anterior'; left: calc(anchor(left) + .5em); }
	.carrossel::scroll-button(right) { content: '〉' / 'Próxima'; right: calc(anchor(right) + .5em); }
	html::scroll-button(*) { position: fixed; right: 0; }
	html::scroll-button(up) { content: '〉' / 'Rolar para cima'; top: 1em; rotate: 270deg; }
	html::scroll-button(down) { content: '〉' / 'Rolar para baixo'; bottom: 1em; rotate: 90deg; }
	@supports not selector(::scroll-button(*)) { .carrossel { scrollbar-width: auto; } }
}

li h3 { margin-block-start: 3em; }
li h3::before { content: "➛"; margin: 0 0.3em; }