/*
Theme: BORG 2026
Theme URI: borg.com.br
Description: Site institucional BORG - Suplementos e Vitaminas - 2026
Author: Antonio Pereira
Author URI: bemmais.com
Version: 1.0
*/

*{
	margin: 0 auto;
	font-family: "Red Hat Display", sans-serif;
	font-weight: 500;
	color: #0d2b45;
	z-index: 1;
	box-sizing: border-box;
}
img{
	max-width: 100%;
}
html, body{
	overflow-x: hidden;
}
li, a{
	list-style: none;
	text-decoration: none;
}
.mob{
	display: none!important;
}

:root{
	--navy: #0d2b45;
	--rainbow: linear-gradient(90deg,#f7941d 0%,#fecb00 18%,#e62b2b 38%,#f26d61 52%,#2b7fc4 68%,#1aa3d6 82%,#16a887 100%);
	/* mesmo arco-íris, mas fechando o ciclo (a última cor repete a primeira) pra dar pra ladrilhar (repeat-x) sem costura e animar em fluxo contínuo */
	--rainbow-loop: linear-gradient(90deg,#f7941d 0%,#fecb00 14.3%,#e62b2b 28.6%,#f26d61 42.9%,#2b7fc4 57.1%,#1aa3d6 71.4%,#16a887 85.7%,#f7941d 100%);
	--purple: linear-gradient(90deg,#7b2ff7 0%,#9d4edd 100%);
	--orange: linear-gradient(95deg,#fe823c 0%,#930665 100%);
	--pink: #d6006e;
	--teal: linear-gradient(90deg,#17b6a4 0%,#0d9488 100%);
	--gold: linear-gradient(90deg,#ff8a00 0%,#ffc700 100%);
}

/* -- HEADER -- */

header{
	width: 100%;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6%;
	position: sticky;
	top: 0;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 20;
}
header #logo img{
	height: 42px;
	margin: 0;
}
header ul{
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
}
header ul li{
	margin: 0 16px;
}
header ul li a{
	color: #000;
	font-weight: 600;
	font-size: 1rem;
	transition: transform .25s;
	display: inline-block;
}
header ul li a:hover{
	transform: scale(1.06);
}
header .header-cta{
	color: #fff;
	font-weight: 800;
	padding: 10px 30px;
	border-radius: 999px;
	white-space: nowrap;
	background-color: #fe823c;
	background-image: linear-gradient(95deg,#930665 0%,#fe823c 50%,#930665 100%);
	background-size: 200% 100%;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	transition: background-position .55s ease, transform .2s ease, box-shadow .25s ease;
}
header .header-cta:hover{
	background-position: 0% 50%;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(147, 6, 101, 0.35);
}
header #menu{
	height: 34px;
	cursor: pointer;
	margin: 0;
}

/* -- HERO -- */

/* slides empilhados: o 1º fica no fluxo e dá a altura da seção, os demais
   ficam por cima (absolute); só o .active aparece e recebe clique. Todos os
   banners precisam ter a mesma proporção (1920x924 desk / 980x536 mob). */
.hero{
	position: relative;
	line-height: 0;
	overflow: hidden;
}
.hero .hero-slide{
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.hero .hero-slide:first-child{
	position: relative;
}
.hero .hero-slide.active{
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease, visibility 0s;
	z-index: 2;
}
.hero img{
	display: block;
	width: 100%;
	margin: 0;
}

/* -- BENEFÃCIOS -- */

.benefits{
	padding: 64px 0 72px;
	overflow: hidden;
}
.sec-title{
	text-align: center;
	margin-bottom: 40px;
}
.sec-title h1{
	display: inline-block;
	position: relative;
	padding-top: 15px;
	font-size: 2rem;
	font-weight: 900;
	color: #1a120c;
}
.sec-title h1::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--rainbow);
}
.benefits .track-wrap{
	width: 100%;
	overflow: hidden;
	margin-bottom: 16px;
}
.benefits .track{
	display: flex;
	width: max-content;
	will-change: transform;
	animation: marquee 40s linear infinite;
}
.benefits .track.reverse{
	animation-direction: reverse;
}
.benefits .track-wrap:hover .track{
	animation-play-state: paused;
}
@keyframes marquee{
	to{ transform: translateX(-50%); }
}
.benefits .pill{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin: 0 16px 0 0;
	padding: 4px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	background-image: linear-gradient(#fff,#fff), var(--rainbow-loop);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 240px 100%;
	background-position: 0 0, 0 0;
	background-repeat: no-repeat, repeat-x;
	white-space: nowrap;
	transition: background-position .4s ease;
}
.benefits .pill:hover{
	animation: rainbow-flow 1.5s linear infinite;
}
@keyframes rainbow-flow{
	to{ background-position: 0 0, -240px 0; }
}
.benefits .pill img{
	height: 30px;
	margin: 0;
}
.benefits .pill span{
	font-weight: 800;
	font-size: 1rem;
	color: var(--navy);
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* -- CTA LINHA COMPLETA -- */

.cta-full{
	text-align: center;
	padding: 8px 0 64px;
}
.cta-full a{
	display: inline-block;
	color: #fff;
	font-weight: 800;
	font-size: 1.2rem;
	padding: 14px 44px;
	border-radius: 999px;
	background-color: #7b2ff7;
	background-image: linear-gradient(90deg,#9d4edd 0%,#7b2ff7 50%,#9d4edd 100%);
	background-size: 200% 100%;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	transition: background-position .55s ease, transform .2s ease, box-shadow .25s ease;
}
.cta-full a:hover{
	background-position: 0% 50%;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(123, 47, 247, 0.35);
}

/* -- LINHA BORG AZ -- */

.az{
	display: flex;
	align-items: center;
	background: linear-gradient(120deg,#dfe2e6 0%,#eef0f2 60%,#e7e9ec 100%);
}
.az .az-img{
	width: 46%;
}
.az .az-img img{
	margin: 0;
}
.az .az-text{
	width: 54%;
	padding: 56px 8% 56px 4%;
}
.eyebrow{
	margin-bottom: 22px;
}
.eyebrow span{
	display: inline-block;
	position: relative;
	padding-top: 15px;
	font-weight: 900;
	color: #1a120c;
	font-size: 1.7rem;
}
.eyebrow span::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--rainbow);
}
.az .az-text h1{
	font-size: 2rem;
	font-weight: 900;
	color: var(--navy);
	margin: 0 0 20px;
}
.az .az-text p{
	margin: 0 0 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #3a4a5a;
}
.az .az-text a{
	display: inline-block;
	margin-top: 12px;
	background: var(--pink);
	color: #fff;
	font-weight: 800;
	padding: 14px 44px;
	border-radius: 999px;
	transition: transform .2s;
	font-size: 1.2rem;
}
.az .az-text a:hover{
	transform: scale(1.05);
}
/* Entrada ao rolar até a seção: a imagem surge em fade e o texto entra pela
   direita. O estado escondido só vale com .az-anim, que o js/home.js põe —
   sem JS, a seção aparece normal. .in é adicionada quando ela entra na tela. */
.az.az-anim{
	overflow: hidden;
}
.az.az-anim > img{
	opacity: 0;
	transition: opacity 1.2s ease;
}
.az.az-anim .az-text{
	opacity: 0;
	transform: translateX(120px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.az.az-anim.in > img,
.az.az-anim.in .az-text{
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.az.az-anim > img,
	.az.az-anim .az-text{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -- QUALIDADE -- */

#s4e5{
	background-image: url(img/i-s4.png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 100%;
}
.quality{
	position: relative;
	padding: 80px 0;
	padding-bottom: 0;
	overflow: hidden;
}
.quality .decor{
	display: none;
}
.quality .wrap{
	position: relative;
	z-index: 1;
	text-align: center;
	width: 60%;
}
.quality .wrap p{
	margin: 0 auto 18px;
	line-height: 1.55;
	color: #3a4a5a;
	font-weight: 500;
}

/* -- TOP MAIS VENDIDOS -- */

.bestsellers{
	position: relative;
	padding: 40px 0 48px;
}
.bestsellers .bestseller-banner{
	width: 80%;
	overflow: hidden;
	border-radius: 22px;
	line-height: 0;
}
.bestsellers .bestseller-banner img{
	width: 100%;
	border-radius: 22px;
	margin: 0;
}
/* Entrada ao rolar até o banner: sobe de baixo pra cima (mesmo esquema do
   .az-anim — classes postas pelo js/home.js). */
.bestsellers.bs-anim .bestseller-banner{
	opacity: 0;
	transform: translateY(120px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.bestsellers.bs-anim.in .bestseller-banner{
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.bestsellers.bs-anim .bestseller-banner{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -- PRODUTOS -- */

.products{
	padding: 72px 0 32px;
}
.products .grid{
	display: flex;
	gap: 2%;
	width: 82%;
	justify-content: center;
}
.products .card{
	display: block;
	width: 19%;
	text-align: center;
}
.products .card img{
	width: 100%;
	border-radius: 16px;
	margin: 0 0 8px;
	transition: transform .3s;
}
.products .card:hover img{
	transform: translateY(-6px);
}
.products .card span{
	display: block;
	font-weight: 800;
	font-size: .95rem;
	color: var(--navy);
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* -- VEJA MAIS -- */

.more-products{
	text-align: center;
	padding: 40px 0 64px;
}
.more-products a{
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 999px;
	background-image: linear-gradient(#fff,#fff), var(--rainbow-loop);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 240px 100%;
	background-position: 0 0, 0 0;
	background-repeat: no-repeat, repeat-x;
	color: var(--navy);
	font-weight: 800;
	padding: 13px 44px;
	transition: background-position .4s ease, transform .2s ease;
}
.more-products a:hover{
	animation: rainbow-flow 1.5s linear infinite;
	transform: scale(1.05);
}

/* -- PERTO DE VOCÃ -- */

.nearby{
	padding: 0 0 72px;
}
.nearby .banner{
	position: relative;
	width: 70%;
	line-height: 0;
}
.nearby .banner > img{
	width: 100%;
	border-radius: 26px;
	margin: 0;
}
.nearby .banner .near-cta{
	position: absolute;
	left: 50%;
	bottom: 29%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 999px;
	padding: 8px 32px;
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.2;
	transition: transform .2s;
	text-wrap: nowrap;
	background-color: rgba(0, 0, 0, 0.7);
}
.nearby .banner .near-cta b{
	font-weight: 900;
	color: #fff;
}
.nearby .banner .near-cta:hover{
	transform: translateX(-50%) scale(1.04);
}

/* -- PÃGINA PRODUTOS -- */

.prod-hero{
	line-height: 0;
}
.prod-hero img{
	display: block;
	width: 100%;
}

.prod-tabs{
	background: #eef0f2;
	padding: 18px 0;
}
.prod-tabs .tabs{
	width: 80%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}
.prod-tabs .tab{
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 22px;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	font-size: .95rem;
	color: var(--navy);
	transition: background .2s, box-shadow .2s;
}
.prod-tabs .tab.active{
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.prod-toolbar{
	width: 78%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 32px 0px;
}
.prod-toolbar .search{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 320px;
	max-width: 100%;
	border: 2px solid #e3e6ea;
	border-radius: 999px;
	padding: 10px 22px;
	margin-left: 0;
}
.prod-toolbar .search img{
	width: 16px;
	margin: 0;
	opacity: .5;
}
.prod-toolbar .search input{
	width: 100%;
	border: none;
	outline: none;
	background: none;
	font-family: inherit;
	font-size: .95rem;
	color: var(--navy);
}
.prod-toolbar .filters{
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 2px solid #e3e6ea;
	border-radius: 999px;
	padding: 10px 22px;
	font-family: inherit;
	font-weight: 700;
	font-size: .95rem;
	color: var(--navy);
	cursor: pointer;
	margin-right: 0;
}
.prod-toolbar .filters img{
	margin: 0;
}
.prod-toolbar .filters img:first-child{
	width: 14px;
}
.prod-toolbar .filters img.plus{
	width: 12px;
}

.prod-grid{
	width: 80%;
}
.prod-grid .grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.prod-card{
	display: block;
	background: #fff;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(13, 43, 69, .25);
	text-align: center;
	transition: transform .3s, box-shadow .3s;
	margin-bottom: 32px;
}
.prod-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 26px 48px rgba(13, 43, 69, .32);
}
.prod-card img{
	display: block;
	width: 100%;
	margin: 0;
}
.prod-card span:not(.result-pill){
	display: inline-block;
	position: relative;
	max-width: 90%;
	margin-top: 14px;
	padding: 14px 0 18px;
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--navy);
}
.prod-card span:not(.result-pill)::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--rainbow);
}

.prod-empty{
	text-align: center;
	color: #52606d;
	padding: 24px 0 48px;
}
.prod-toolbar .filters-count{
	margin: 0 0 0 -6px;
	font-weight: 800;
}

.prod-more{
	text-align: center;
	padding: 8px 0 64px;
}
/* sem mais páginas (filtro/busca com poucos resultados): some o botão mas
   mantém o espaço — é ele que segura o rodapé, que sobe 40px (margin-top
   negativo) e senão cobriria a última fileira de cards */
.prod-more[hidden]{
	display: block;
	visibility: hidden;
}
.prod-more a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--navy);
}
.prod-more a img{
	width: 18px;
	margin: 0;
	transition: transform .2s;
}
.prod-more a:hover img{
	transform: translateY(3px);
}

/* -- PAINEL DE FILTROS -- */

body.no-scroll{
	overflow: hidden;
}

.filters-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 40;
}
.filters-overlay.show{
	opacity: 1;
	pointer-events: auto;
}

.filters-panel{
	position: fixed;
	top: 0;
	right: 0;
	width: 440px;
	max-width: 90%;
	height: 100%;
	background: #fff;
	border-radius: 40px 0 0 40px;
	box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
	padding: 44px 36px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .4s ease;
	z-index: 50;
}
.filters-panel.show{
	transform: translateX(0);
}
.filters-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 36px;
}
.filters-head h2{
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--navy);
	text-transform: uppercase;
}
.filters-clear{
	background: linear-gradient(90deg, #1aa3d6, #16a887);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 22px;
	font-family: inherit;
	font-weight: 800;
	font-size: .85rem;
	cursor: pointer;
	transition: transform .2s;
}
.filters-clear:hover{
	transform: scale(1.05);
}

.filters-field{
	margin-bottom: 26px;
}
.filters-field label{
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--navy);
}
.filters-field select{
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 2px solid #d9dde2;
	border-radius: 999px;
	padding: 12px 44px 12px 20px;
	font-family: inherit;
	font-size: .95rem;
	color: var(--navy);
	background: #fff url(img/produtos-more.png) no-repeat right 18px center;
	background-size: 12px;
	cursor: pointer;
}

.filters-submit{
	display: block;
	width: 100%;
	margin-top: 12px;
	border: 2px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		var(--rainbow) border-box;
	color: var(--navy);
	font-family: inherit;
	font-weight: 900;
	font-size: 1.1rem;
	padding: 14px;
	cursor: pointer;
	transition: transform .2s;
}
.filters-submit:hover{
	transform: scale(1.02);
}

/* -- PÁGINA PRODUTO (SINGLE) -- */

.breadcrumb{
	width: 80%;
	padding: 22px 0;
	font-size: .9rem;
	color: #6b7684;
}
.breadcrumb a{
	color: #6b7684;
	transition: color .2s;
}
.breadcrumb a:hover{
	color: var(--navy);
}
.breadcrumb span{
	margin: 0 6px;
	color: #b8c0c9;
}
.breadcrumb strong{
	color: var(--navy);
	font-weight: 800;
}

.p-hero{
	width: 80%;
	display: flex;
	gap: 60px;
	padding: 4px 0 56px;
}
.p-hero .gallery{
	display: flex;
	gap: 20px;
	width: 55%;
}
.p-hero .thumbs{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.p-hero .thumb{
	width: 110px;
	height: 110px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	background: #fafbfc;
	transition: border-color .2s;
}
.p-hero .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.p-hero .thumb.active,
.p-hero .thumb:hover{
	border-color: var(--pink);
}
.p-hero .main-img{
	flex: 1;
	border-radius: 32px;
	overflow: hidden;
	line-height: 0;
}
.p-hero .main-img img{
	width: 100%;
	margin: 0;
}

.p-hero .p-info{
	width: 45%;
	padding-top: 8px;
}
.p-badge{
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 8px 24px;
	font-weight: 800;
	font-size: .9rem;
	text-transform: uppercase;
	color: var(--navy);
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, var(--p-c1, #ff9d5c), var(--p-c2, #d6006e)) border-box;
	margin-bottom: 24px;
}
.p-info h1{
	font-size: 2.6rem;
	font-weight: 900;
	color: var(--navy);
	margin-bottom: 8px;
	margin-left: 0;
	width: fit-content;
}
.p-info .p-sub{
	font-size: 1.05rem;
	color: #52606d;
	margin-bottom: 20px;
}
.p-info .p-bar{
	height: 6px;
	width: 200px;
	max-width: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--p-c1, #ff3d3d), var(--p-c2, #d6006e));
	margin-bottom: 32px;
	margin-left: 0;
}

.p-options{
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}
.p-option{
	flex: 1;
	max-width: 220px;
	margin: 0;
	text-align: center;
	background: #fff;
	border: 2px solid #e3e6ea;
	border-radius: 16px;
	padding: 16px 12px;
	transition: border-color .2s, box-shadow .2s;
}
.p-option b{
	display: block;
	font-size: 1rem;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 4px;
	text-transform: uppercase;
}
.p-option span{
	font-size: .85rem;
	color: #52606d;
}
.p-option.active{
	border-color: var(--pink);
	box-shadow: 0 6px 18px rgba(214, 0, 110, .15);
}

/* mesma animação do "Descubra o seu" do header, com as cores do produto:
   gradiente cor2 -> cor1 -> cor2 com o dobro da largura; parado mostra a
   metade da direita (cor1 -> cor2) e no hover desliza pra metade da esquerda */
.p-cta{
	display: inline-block;
	background-color: var(--p-c1, #fc1926);
	background-image: linear-gradient(95deg, var(--p-c2, #920665) 0%, var(--p-c1, #fc1926) 50%, var(--p-c2, #920665) 100%);
	background-size: 200% 100%;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	padding: 8px 48px;
	border-radius: 999px;
	transition: background-position .55s ease, transform .2s ease, box-shadow .25s ease;
}
.p-cta:hover{
	background-position: 0% 50%;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--p-c2, #920665) 35%, transparent);
}

.p-benefits{
	padding: 24px 0 48px;
}

.p-tabs{
	width: 80%;
	padding: 24px 0 64px;
}
.p-tabs-nav{
	display: flex;
	gap: 40px;
	border-bottom: 2px solid #e3e6ea;
	margin-bottom: 32px;
}
.p-tab-btn{
	background: none;
	border: none;
	margin: 0;
	padding: 12px 0 16px;
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: #8a94a0;
	cursor: pointer;
	position: relative;
}
.p-tab-btn.active{
	color: var(--navy);
	font-weight: 800;
}
.p-tab-btn.active::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	background: var(--p-c2, var(--p-c1));
	border-radius: 2px;
}
.p-tab-panel{
	display: none;
	color: #3a4a5a;
	line-height: 1.6;
	max-width: 900px;
}
.p-tab-panel.active{
	display: block;
}
.p-tab-panel p,
.p-tab-panel ul{
	margin: 0 0 14px;
}
.p-tab-panel ul{
	padding-left: 20px;
}
.p-tab-panel li{
	list-style: disc;
	margin: 0 0 6px;
}
.p-tab-panel b,
.p-tab-panel strong{
	font-weight: 800;
	color: var(--navy);
}

.related{
	width: 80%;
	padding: 24px 0 72px;
	text-align: center;
}
.related h2{
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--navy);
	margin-bottom: 40px;
}
.related .grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 900px;
}

/* -- FOOTER -- */

footer{
	position: relative;
	z-index: 2;
	margin-top: -40px;
	border-radius: 40px 40px 0 0;
	overflow: hidden;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
footer .top{
	background: #fff;
	padding: 40px 8%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}
footer .top *{
	color: #000;
}
footer .top .f-logo img{
	height: 40px;
	margin: 0 0 4px;
}
footer .top .socials p,
footer .top .info p{
	margin: 0 0 6px;
	font-weight: 600;
}
footer .top .socials .icons{
	margin-top: 8px;
}
footer .top .socials .icons a img{
	height: 26px;
	margin: 0;
	margin-right: 4px;
	transition: transform .2s;
}
footer .top .socials .icons a img:hover{
	transform: scale(1.1);
}
footer .top .info p{
	font-weight: 500;
	opacity: .85;
}
footer .top .info p.label{
	font-weight: 700;
	opacity: 1;
	margin-bottom: 8px;
}
footer .bottom{
	background: #fff;
	text-align: center;
	padding: 14px 5%;
}
footer .bottom,
footer .bottom a{
	color: #000;
	font-size: .9rem;
}
footer .bottom a{
	font-weight: 800;
	transition: color .3s ease;
}
footer .bottom a:hover{
	color: #ff6d21;
}

/* -- PÁGINA DESCUBRA O SEU -- */

.quiz-banner{
	display: block;
	width: 100%;
	margin: 0;
}

.quiz-intro-body{
	width: 100%;
	display: flex;
	align-items: center;
}
.quiz-intro-img{
	width: 50%;
	line-height: 0;
}
.quiz-intro-img img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.quiz-intro-text{
	width: 50%;
	padding: 56px 8% 56px 5%;
	box-sizing: border-box;
}
.quiz-intro-text h1{
	font-size: 2rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.35;
	margin-bottom: 20px;
	text-align: left;
}
.quiz-intro-text h1 b{
	font-weight: 900;
}
.quiz-intro-text > p{
	font-size: 1rem;
	color: #3a4a5a;
	line-height: 1.5;
	margin-bottom: 28px;
	text-align: left;
}
.quiz-intro-text > p b{
	font-weight: 800;
	color: var(--navy);
}
.quiz-start{
	display: inline-block;
	border: none;
	background: var(--teal);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	padding: 14px 40px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: transform .2s;
	margin: 0 0 28px;
}
.quiz-start:hover{
	transform: scale(1.05);
}
.quiz-disclaimer{
	font-size: .82rem;
	color: #8a94a0;
	line-height: 1.5;
	margin: 0 0 10px;
	text-align: left;
}

.quiz-steps{
	padding-bottom: 64px;
}
.quiz-card{
	position: relative;
	width: 80%;
	margin-top: 40px;
	padding: 48px 5% 64px;
	border-radius: 32px;
	background: #fff;
}
.quiz-dots{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 40px 0;
	align-items: center;
}
.quiz-dot{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d9dde2;
	margin: 0;
}
.quiz-dot.active{
	width: 16px;
	height: 16px;
}
.quiz-dot:nth-child(1).active,
.quiz-dot:nth-child(1).done{
	background: linear-gradient(90deg, #f49b18, #e8b31c);
}
.quiz-dot:nth-child(2).active,
.quiz-dot:nth-child(2).done{
	background: linear-gradient(90deg, #c74e29, #f06c5e);
}
.quiz-dot:nth-child(3).active,
.quiz-dot:nth-child(3).done{
	background: linear-gradient(90deg, #ef6e60, #5083b1);
}
.quiz-dot:nth-child(4).active,
.quiz-dot:nth-child(4).done{
	background: linear-gradient(90deg, #7986a3, #3092cd);
}

.quiz-panel{
	display: none;
	text-align: center;
}
.quiz-panel.active{
	display: block;
}
.quiz-panel h2{
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--navy);
	margin-bottom: 8px;
}
.quiz-panel > p{
	font-size: 1rem;
	color: #52606d;
	margin-bottom: 36px;
}

.quiz-options{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.quiz-opt{
	background: #f2f3f5;
	border: none;
	border-radius: 16px;
	cursor: pointer;
	font-family: inherit;
	color: var(--navy);
	transition: background .2s, transform .15s;
	margin: 0;
}
.quiz-opt:hover{
	transform: translateY(-2px);
}
.quiz-opt.selected{
	background: #ffc63a;
}

.quiz-options-icon .quiz-opt{
	width: 18%;
	min-width: 170px;
	padding: 28px 16px;
}
.quiz-opt img{
	display: block;
	width: 34px;
	margin: 0 auto 14px;
}
.quiz-opt span{
	display: block;
	font-weight: 800;
	font-size: .95rem;
	line-height: 1.3;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.quiz-options-text .quiz-opt{
	padding: 16px 30px;
	border-radius: 999px;
	font-weight: 800;
	font-size: .95rem;
}

.quiz-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.quiz-back{
	background: #33363b;
	border: none;
	border-radius: 999px;
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: .95rem;
	padding: 14px 40px;
	cursor: pointer;
	transition: transform .2s;
	margin: 0;
	visibility: hidden;
}
.quiz-back.show{
	visibility: visible;
}
.quiz-back:hover{
	transform: scale(1.05);
}
.quiz-next{
	border: none;
	background: var(--teal);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	padding: 14px 56px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: transform .2s, opacity .2s;
	margin: 0;
}
.quiz-next:disabled{
	opacity: .4;
	cursor: not-allowed;
}
.quiz-next:not(:disabled):hover{
	transform: scale(1.05);
}

.quiz-results-head{
	width: 80%;
	text-align: center;
	padding: 48px 0 8px;
}
.quiz-results-head h2{
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--navy);
	margin-bottom: 10px;
}
.quiz-results-head p{
	font-size: 1rem;
	color: #52606d;
}
.quiz-results-grid{
	width: 80%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 40px 0 56px;
}
.result-card{
	display: flex;
	flex-direction: column;
	padding-bottom: 24px;
}
.result-pill{
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin: 6px auto 16px;
	padding: 6px 16px;
	border: 2px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(#fff,#fff) padding-box,
		var(--rainbow) border-box;
	font-weight: 800;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--navy);
}
.result-pill img{
	width: 18px;
	margin: 0;
}
.result-desc{
	padding: 0 20px;
	font-size: .85rem;
	line-height: 1.5;
	color: #52606d;
	margin-bottom: 20px;
	text-align: left;
}
.result-cta{
	display: block;
	margin: auto 20px 0;
	background: var(--gold);
	color: #fff;
	font-weight: 800;
	font-size: .9rem;
	text-align: center;
	padding: 12px;
	border-radius: 999px;
	transition: transform .2s;
}
.result-cta:hover{
	transform: scale(1.03);
}

.quiz-nearby{
	width: 100%;
	background-image: linear-gradient(rgba(8, 18, 28, .55), rgba(13, 43, 69, .65)), url(img/descubra-onde.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 56px 5%;
	text-align: center;
}
.quiz-nearby h3{
	color: #fff;
	font-size: 1.8rem;
	font-weight: 900;
	margin-bottom: 28px;
}
.quiz-nearby-cta{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--gold);
	color: #fff;
	font-weight: 500;
	font-size: 1.05rem;
	padding: 14px 40px;
	border-radius: 999px;
	transition: transform .2s;
}
.quiz-nearby-cta b{
	font-weight: 900;
	color: #fff;
}
.quiz-nearby-cta:hover{
	transform: scale(1.04);
}

/* -- PÁGINA ONDE ENCONTRAR -- */

.onde-hero{
	line-height: 0;
}
.onde-banner{
	display: block;
	width: 100%;
	margin: 0;
}

.onde-main{
	padding: 48px 0 72px;
	text-align: center;
}
.onde-head{
	width: 80%;
	margin-bottom: 32px;
}
.onde-head h1{
	font-size: 2rem;
	font-weight: 900;
	color: var(--navy);
	margin-bottom: 10px;
}
.onde-head p{
	font-size: 1rem;
	color: #52606d;
}

.onde-boxes{
	width: 70%;
	display: flex;
	gap: 3%;
	margin-bottom: 40px;
	align-items: stretch;
}
.onde-boxes[hidden]{
	display: none;
}
.onde-box{
	flex: 1;
	background: #f2f2f2;
	border-radius: 16px;
	border: 2px solid #cdcdcd;
	padding: 32px;
	text-align: center;
}
.onde-box h3{
	font-weight: 800;
	font-size: 1.7rem;
	color: var(--navy);
	margin-bottom: 10px;
}
.onde-box p{
	font-size: 1rem;
	color: #52606d;
	line-height: 1.4;
	margin-bottom: 24px;
}

.onde-search{
	position: relative;
}
.onde-search input{
	width: 100%;
	border: 2px solid #fff;
	background: #fff;
	border-radius: 999px;
	padding: 13px 150px 13px 22px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--navy);
}
.onde-search input:focus{
	outline: none;
	border-color: #3092cd;
}
.onde-buscar{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #4aa3dd, #1f75b3);
	border: none;
	color: #fff;
	font-weight: 800;
	font-size: 1.2rem;
	padding: 0 30px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	margin: 0;
	transition: transform .2s;
}
.onde-buscar:hover{
	transform: scale(1.05);
}

.onde-online-btn{
	display: block;
	width: 100%;
	background: var(--teal);
	border: none;
	color: #fff;
	font-weight: 800;
	font-size: 1.2rem;
	padding: 14px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	margin: 0;
	transition: transform .2s;
}
.onde-online-btn:hover{
	transform: scale(1.03);
}

.onde-tabs{
	width: 70%;
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}
.onde-tabs[hidden]{
	display: none;
}
.onde-tab{
	width: 49%;
	background: #f2f3f5;
	border: 2px solid #cdcdcd;
	color: var(--navy);
	font-weight: 800;
	font-size: 1.7rem;
	font-family: inherit;
	padding: 12px 24px;
	border-radius: 16px;
	cursor: pointer;
	transition: transform .2s;
}
.onde-tab:hover{
	transform: scale(1.03);
}
.onde-tab[data-tab="farmacia"].active{
	background: linear-gradient(135deg, #4aa3dd, #1f75b3);
	color: #fff;
}
.onde-tab[data-tab="online"].active{
	background: var(--teal);
	color: #fff;
}

.onde-search-compact{
	width: 340px;
	margin-bottom: 32px;
}
.onde-search-compact[hidden]{
	display: none;
}
.onde-search-compact input{
	padding: 10px 110px 10px 18px;
	font-size: 1rem;
	background: #f2f3f5;
	border-color: #f2f3f5;
}
.onde-search-compact input:focus{
	background: #fff;
}
.onde-search-compact .onde-buscar{
	padding: 0 20px;
	font-size: 1.2rem;
}

.onde-results{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
}
.onde-results[hidden]{
	display: none;
}
.onde-results .onde-msg{
	grid-column: 1 / -1;
	text-align: center;
	color: #52606d;
	font-size: .95rem;
	padding: 12px 0;
}
.pharm-card{
	width: 23%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(20, 40, 60, .08);
	text-align: left;
	border: 3px solid #cdcdcd;
}
.pharm-banner{
	background: var(--f-color, #16a887);
	min-height: 76px;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pharm-banner img{
	max-width: 80%;
	max-height: 54px;
	object-fit: contain;
	margin: 0;
}
.pharm-body{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px;
	background-color: #f2f2f2;
}
.pharm-info{
	width: 70%;
}
.pharm-info h4{
	font-weight: 800;
	font-size: 1.5rem;
	color: #4b4b4b;
}
.pharm-info p{
	font-size: 0.9rem;
	color: #4b4b4b;
}
.pharm-map{
	max-width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-shrink: 0;
	background: var(--f-color, #16a887);
	color: #fff!important;
	font-weight: 800;
	font-size: .68rem;
	line-height: 1.2;
	text-align: center;
	padding: 8px 16px;
	border-radius: 14px;
	transition: transform .2s;
}
.pharm-map span{
	color: #fff!important;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
}
.pharm-map img{
	width: 26px;
	margin: 0;
}
.pharm-map:hover{
	transform: scale(1.05);
}
/* rede com cor clara (ex.: Indiana, branca): texto e ícone brancos sumiriam */
.pharm-card.is-light .pharm-banner{
	border-bottom: 2px solid #e3e6ea;
}
.pharm-card.is-light .pharm-map{
	border: 2px solid #cdcdcd;
}
.pharm-card.is-light .pharm-map,
.pharm-card.is-light .pharm-map span{
	color: var(--navy)!important;
}
.pharm-card.is-light .pharm-map img{
	filter: brightness(0);
}

.onde-stores{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.onde-stores[hidden]{
	display: none;
}
.store-card{
	width: 23%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--f-color, #f2f3f5);
	border-radius: 16px;
	padding: 24px 0;
	height: 130px;
	transition: transform .2s;
}
.store-card:hover{
	transform: translateY(-4px);
}
.store-card.no-link:hover{
	transform: none;
}
.store-card.is-light{
	border: 2px solid #e3e6ea;
}
.store-card img{
	width: 80%;
	margin: 0;
}

/* -- PÁGINA CONTATO -- */

.contato-hero{
	line-height: 0;
}
.contato-banner{
	display: block;
	width: 100%;
	margin: 0;
}

.contato-main{
	padding: 56px 0 80px;
	text-align: center;
	background: #f2f3f5;
}

.contato-grid{
	width: 70%;
	display: flex;
	align-items: flex-start;
	gap: 6%;
	text-align: left;
}

.contato-info{
	width: 30%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
}
.contato-pill{
	display: block;
	width: 100%;
	text-align: center;
	background-image: linear-gradient(#fff,#fff), var(--rainbow);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--navy);
}
.contato-note{
	font-size: .78rem;
	color: #7a8794;
	text-align: center;
}

/* ----- Formulário do Contact Form 7 -----
   O CF7 gera o próprio HTML (form.wpcf7-form, spans .wpcf7-form-control-wrap
   com data-name, classes .wpcf7-form-control etc.) — estilizamos em cima
   dessas classes, não das nossas. */

.contato-form{
	width: 64%;
}
.contato-form .wpcf7-form p{
	/* margin: 0;
	grid-column: 1 / -1; */
	display: flex;
	flex-wrap: wrap;
}
.contato-form .wpcf7-form p:has([data-name="email"]),
.contato-form .wpcf7-form p:has([data-name="telefone"]){
	grid-column: span 1;
}
.contato-form .wpcf7-form label{
	width: 100%;
	display: block;
	text-align: left;
	font-weight: 900;
	font-size: 1rem;
	color: #1a120c;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 16px;
}
.contato-form .wpcf7-form label.email, .contato-form .wpcf7-form label.tel{
	width: 49%;
	margin-left: 0;
}
.contato-form .wpcf7-form label.tel{
	width: 49%;
	margin-right: 0;
}
.contato-form select option{
	width: calc(100% - 32px);
}
.contato-form .wpcf7-form-control-wrap{
	display: block;
	margin-top: 8px;
}
.contato-form input.wpcf7-form-control,
.contato-form select.wpcf7-form-control{
	width: 100%;
	background: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--navy);
	box-shadow: 0 1px 3px rgba(13, 43, 69, .08);
}
.contato-form textarea.wpcf7-form-control{
	width: 100%;
	background: #fff;
	border: none;
	border-radius: 22px;
	padding: 18px 22px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--navy);
	min-height: 160px;
	resize: vertical;
	box-shadow: 0 1px 3px rgba(13, 43, 69, .08);
}
.contato-form select.wpcf7-form-control{
	cursor: pointer;
}
.contato-form input.wpcf7-form-control:focus,
.contato-form select.wpcf7-form-control:focus,
.contato-form textarea.wpcf7-form-control:focus{
	outline: none;
	box-shadow: 0 0 0 2px #3092cd;
}
.contato-form .wpcf7-not-valid-tip{
	display: block;
	margin-top: 6px;
	font-size: .78rem;
	color: #c74e29;
	text-transform: none;
	font-weight: 500;
}

.contato-form input.wpcf7-submit{
	display: block;
	width: 100%;
	background-image: linear-gradient(#fff,#fff), var(--rainbow-loop);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 240px 100%;
	background-position: 0 0, 0 0;
	background-repeat: no-repeat, repeat-x;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 14px 0;
	font-family: inherit;
	font-weight: 800;
	font-size: .95rem;
	color: var(--navy);
	cursor: pointer;
	transition: background-position .4s ease, transform .2s;
}
.contato-form input.wpcf7-submit:hover{
	animation: rainbow-flow 1.5s linear infinite;
	transform: scale(1.01);
}
.contato-form .wpcf7-spinner{
	margin: 12px auto 0;
}
.contato-form .wpcf7-response-output{
	margin: 20px 0 0;
	border-radius: 10px;
	font-size: .85rem;
	text-align: left;
}

/* -- PÁGINA A BORG -- */

.sobre-hero{
	line-height: 0;
}
.sobre-banner{
	display: block;
	width: 100%;
	margin: 0;
}

.sobre-intro{
	display: flex;
	align-items: center;
}
.sobre-intro-text{
	width: 50%;
	padding-left: 10%;
	padding-right: 5%;
}
.sobre-intro-text p{
	margin: 0 0 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #3a4a5a;
}
.sobre-intro img{
	width: 50%
}

.sobre-split{
	display: flex;
	align-items: stretch;
	min-height: 480px;
}
.sobre-split-img{
	position: relative;
	width: 50%;
	overflow: hidden;
}
.sobre-split-img > img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.sobre-split-img::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .15);
}
.sobre-split-overlay{
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 0 10%;
}
.sobre-split-overlay h2{
	color: #fff;
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 1.3;
	text-align: center;
}
.sobre-split-tags{
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.sobre-split-tags span{
	width: 100%;
	text-align: center;
	display: inline-block;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: 10px 24px;
}

.sobre-split-cta{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #f2f3f5;
	padding: 0 9%;
}
.sobre-split-cta p{
	margin: 0 0 28px;
	font-weight: 500;
	line-height: 1.5;
	color: #3a4a5a;
}
.sobre-cta-btn{
	display: inline-block;
	width: fit-content;
	background: #fe823c;
	color: #fff;
	font-weight: 800;
	font-size: .95rem;
	padding: 14px 32px;
	border-radius: 999px;
	transition: transform .2s;
}
.sobre-cta-btn:hover{
	transform: scale(1.05);
}
/* mantém o conteúdo do CTA disposto como antes do wrapper existir */
.sobre-split-cta-in{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}
/* Entradas ao rolar (classes postas pelo js/global.js, como na home):
   intro — texto entra pela esquerda, imagem em fade;
   split — imagem em fade, conteúdo do CTA sobe de baixo pra cima. */
.sobre-intro.sobre-anim,
.sobre-split.sobre-anim .sobre-split-cta{
	overflow: hidden;
}
.sobre-intro.sobre-anim > img,
.sobre-split.sobre-anim .sobre-split-img{
	opacity: 0;
	transition: opacity 1.2s ease;
}
.sobre-intro.sobre-anim .sobre-intro-text,
.sobre-split.sobre-anim .sobre-split-cta-in{
	opacity: 0;
	transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.sobre-intro.sobre-anim .sobre-intro-text{
	transform: translateX(-120px);
}
.sobre-split.sobre-anim .sobre-split-cta-in{
	transform: translateY(120px);
}
.sobre-intro.sobre-anim.in > img,
.sobre-intro.sobre-anim.in .sobre-intro-text,
.sobre-split.sobre-anim.in .sobre-split-img,
.sobre-split.sobre-anim.in .sobre-split-cta-in{
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.sobre-intro.sobre-anim > img,
	.sobre-intro.sobre-anim .sobre-intro-text,
	.sobre-split.sobre-anim .sobre-split-img,
	.sobre-split.sobre-anim .sobre-split-cta-in{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -- RESPONSIVO -- */

@media only screen and (max-width: 1300px){
	.mob{
		display: block!important;
	}
	.desk{
		display: none!important;
	}
	header{
		padding: 0 5%;
	}
	header ul{
		position: absolute;
		top: 92px;
		right: 0;
		flex-direction: column;
		align-items: flex-end;
		background: #fff;
		padding: 20px 28px;
		border-bottom-left-radius: 16px;
		box-shadow: 0 16px 16px rgba(0,0,0,.3);
		display: none;
	}
	header ul.menu-on{
		display: flex;
	}
	header ul li{
		margin: 10px 0;
	}
	header ul li .header-cta{
		display: inline-block;
		margin-top: 6px;
	}

	.benefits .pill span{
		font-size: .9rem;
	}

	.az{
		display: block;
	}
	.az .az-img,
	.az .az-text{
		width: 100%;
		padding: 40px 6%;
		text-align: center;
	}
	.quality .decor{
		display: none;
	}

	#s4e5{
		background-image: none;
	}
	.quality{
		padding: 56px 5% 48px;
	}
	.quality .wrap{
		padding: 0;
		max-width: 100%;
	}

	.bestsellers{
		overflow: hidden;
		background: linear-gradient(to bottom, #fff 0, #fff 44%, #7b2ff7 44%, #7b2ff7 56%, #fff 56%, #fff 100%);
	}
	.bestsellers .bestseller-banner{
		width: 94%;
		max-width: 536px; /* minibanner1-m é retrato: não estica em tablet */
	}

	.products .grid{
		flex-wrap: wrap;
		width: 90%;
	}
	.products .card{
		width: 47%;
		margin-bottom: 24px;
	}

	/* no mobile a imagem (encontre-m, retrato) já traz o "Toque aqui" e é o
	   próprio link; o botão HTML .near-cta fica só no desktop (.desk) */
	.nearby .banner{
		width: 90%;
		max-width: 536px;
	}
	.nearby .banner .near-img img{
		width: 100%;
		margin: 0;
	}

	footer .top{
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	footer .top .socials .icons{
		justify-content: center;
	}

	.prod-tabs .tabs{
		width: 90%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.prod-toolbar{
		padding: 20px 5%;
	}
	.prod-toolbar .search{
		width: 100%;
	}
	.prod-grid .grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	.p-hero{
		flex-direction: column;
		gap: 32px;
	}
	.p-hero .gallery,
	.p-hero .p-info{
		width: 100%;
	}
	.p-hero .thumbs{
		flex-direction: row;
	}
	.p-hero .thumb{
		width: 80px;
		height: 80px;
	}
	.p-tabs-nav{
		gap: 24px;
		flex-wrap: wrap;
	}
	.related .grid{
		grid-template-columns: repeat(2, 1fr);
		max-width: 100%;
	}

	.quiz-intro-body{
		flex-direction: column;
	}
	.quiz-intro-img{
		width: 100%;
	}
	.quiz-intro-img img{
		border-radius: 24px;
	}
	.quiz-intro-text{
		width: 100%;
		padding: 32px 6%;
	}
	.quiz-nearby-cta{
		display: block;
	}
	.quiz-card{
		width: 90%;
		padding: 40px 6% 56px;
	}
	.quiz-options-icon .quiz-opt{
		width: 30%;
		min-width: 140px;
	}
	.quiz-results-head,
	.quiz-results-grid{
		width: 90%;
	}
	.quiz-results-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.onde-head,
	.onde-boxes,
	.onde-results,
	.onde-stores{
		width: 90%;
	}
	.onde-boxes{
		flex-direction: column;
	}
	.onde-results,
	.onde-stores{
		grid-template-columns: repeat(2, 1fr);
	}
	.onde-box{
		padding: 24px 20px;
		margin-bottom: 16px;
		width: 100%;
	}
	.onde-tabs{
		width: 90%;
	}
	.pharm-card, .store-card{
		width: 100%;
	}
	.contato-grid{
		width: 90%;
		flex-direction: column;
	}
	.contato-info,
	.contato-form{
		width: 100%;
	}

	.sobre-intro{
		flex-direction: column;
		padding: 56px 6%;
	}
	.sobre-intro-text,
	.sobre-intro img{
		width: 100%;
	}
	.sobre-intro img{
		order: -1;
	}
	.sobre-split{
		flex-direction: column;
		min-height: 0;
	}
	.sobre-split-img,
	.sobre-split-cta{
		width: 100%;
	}
	.sobre-split-img{
		min-height: 340px;
	}
	.sobre-split-cta{
		padding: 48px 6%;
	}
}

@media only screen and (max-width: 700px){
	.sec-title h1{
		font-size: 1.35rem;
	}
	.products .card{
		width: 100%;
	}
	.benefits .track{
		animation-duration: 26s;
	}

	.prod-grid .grid{
		grid-template-columns: 1fr;
	}

	.filters-panel{
		border-radius: 24px 0 0 24px;
		padding: 32px 22px;
	}

	.p-hero .gallery{
		flex-direction: column-reverse;
	}
	.p-hero .thumbs{
		justify-content: center;
	}
	.p-options{
		flex-direction: column;
	}
	.p-option{
		max-width: 100%;
	}
	.p-tabs-nav{
		gap: 16px 24px;
	}
	.related .grid{
		grid-template-columns: 1fr;
	}

	.quiz-intro-text h1{
		font-size: 1.5rem;
	}
	.quiz-options-icon .quiz-opt{
		width: 44%;
		min-width: 0;
		padding: 20px 10px;
	}
	.quiz-opt span{
		font-size: .78rem;
	}
	.quiz-options-text .quiz-opt{
		padding: 14px 22px;
		font-size: .85rem;
	}
	.quiz-nav{
		flex-direction: column;
		gap: 16px;
	}
	.quiz-back{
		position: static;
	}
	.quiz-results-grid{
		grid-template-columns: 1fr;
	}

	.onde-box{
		padding: 24px 20px;
		margin-bottom: 16px;
		width: 100%;
	}
	.onde-search input{
		padding-right: 110px;
		font-size: .82rem;
	}
	.onde-buscar{
		padding: 0 20px;
		font-size: .8rem;
	}
	.onde-results,
	.onde-stores{
		grid-template-columns: 1fr;
	}

	.contato-form .wpcf7-form{
		grid-template-columns: 1fr;
	}

	.sobre-split-overlay h2{
		font-size: 1.25rem;
	}
	.sobre-split-tags span{
		font-size: .78rem;
		padding: 8px 18px;
	}
}