/* ==========================================================================
   Marcela Ribeiro · base global
   Tokens, tipografia e componentes compartilhados pelos widgets (prefixo mr-).
   Cada widget tem o seu CSS em assets/css/<widget>.css
   ========================================================================== */

:root {
	--mr-purple:        #53206b;
	--mr-purple-mid:    #7b3fa0;
	--mr-lavender:      #ecd7fe;
	--mr-lavender-soft: #f8f2ff;
	--mr-white:         #ffffff;
	--mr-dark:          #1a1a1a;
	--mr-text-muted:    #372b41;
	--mr-text-light:    #9e86b0;
	--mr-border:        rgba(83, 32, 107, .12);
	--mr-shadow:        0 4px 28px rgba(83, 32, 107, .09);
	--mr-font-display:  'Cormorant Garamond', Georgia, serif;
	--mr-font-body:     'Nunito', -apple-system, sans-serif;
	--mr-max-w:         1100px;
}

html { scroll-behavior: smooth; overflow-x: clip; }

body {
	font-family: var(--mr-font-body);
	color: var(--mr-dark);
	background: var(--mr-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

:focus-visible { outline: 2px solid var(--mr-purple); outline-offset: 3px; }

/* ---------- Tipografia compartilhada ---------- */
.mr-eyebrow {
	font-family: var(--mr-font-body);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mr-purple-mid);
}

.mr-display {
	font-family: var(--mr-font-display);
	font-weight: 400;
	font-style: italic;
	line-height: 1.1;
	text-wrap: balance;
}

/* ---------- Flor da logo (ilustração de fundo), pintada com a cor do texto (currentColor) ---------- */
.mr-hero__deco,
.mr-phero__deco,
.mr-ahero__deco,
.mr-appr__deco,
.mr-cta-final__deco,
.mr-blog__img-deco,
.mr-plist__img-deco {
	display: block;
	aspect-ratio: 480 / 459;
	background-color: currentColor;
	-webkit-mask: url('../images/flor-logo.webp') center / contain no-repeat;
	mask: url('../images/flor-logo.webp') center / contain no-repeat;
}

/* ---------- Foto recortada em balão (mesmo padrão das heros) ---------- */
.mr-bphoto { position: relative; width: 100%; max-width: var(--mr-bp-w, 320px); margin: 0 auto; padding-top: 2.5rem; }
.mr-bphoto--sm { --mr-bp-w: 220px; }
.mr-bphoto--lg { --mr-bp-w: 400px; }
.mr-bphoto--square { --mr-bp-ratio: 1 / 1; }
.mr-bphoto__frame { position: relative; }

/* o balão recorta o corpo; a cabeça (2ª camada) sai por cima do topo */
.mr-bphoto__blob {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mr-bp-ratio, 3 / 4);
	overflow: hidden;
	background: var(--mr-bp-bg, var(--mr-lavender));
	border-radius: 50% 50% 45% 55% / 55% 50% 50% 45%;
	animation: mr-bphoto-morph 13s ease-in-out infinite;
}
.mr-bphoto .mr-bphoto__body,
.mr-bphoto .mr-bphoto__head {
	display: block;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}
.mr-bphoto .mr-bphoto__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mr-bphoto .mr-bphoto__head {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mr-bp-ratio, 3 / 4);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	pointer-events: none;
}

/* variante para fundo escuro: a pessoa fica inteira dentro do balão, sem a cabeça passar por fora */
.mr-bphoto.mr-bphoto--inset .mr-bphoto__head { display: none; }
.mr-bphoto.mr-bphoto--inset .mr-bphoto__body { top: auto; bottom: -6%; left: 2%; width: 96%; height: 96%; object-fit: contain; object-position: 50% 100%; }

.mr-bphoto__dot { position: absolute; border-radius: 50%; background: var(--mr-purple); opacity: .07; animation: mr-bphoto-float 5s ease-in-out infinite; }
.mr-bphoto__dot:nth-child(1) { width: 40px; height: 40px; top: 14%; left: -6%; animation-delay: -1s; }
.mr-bphoto__dot:nth-child(2) { width: 24px; height: 24px; bottom: 14%; right: -4%; animation-delay: -3.5s; }

@keyframes mr-bphoto-morph {
	0%, 100% { border-radius: 50% 50% 45% 55% / 55% 50% 50% 45%; }
	25%      { border-radius: 58% 42% 56% 44% / 42% 58% 42% 58%; }
	50%      { border-radius: 35% 65% 45% 55% / 60% 42% 58% 40%; }
	75%      { border-radius: 62% 38% 52% 48% / 40% 60% 40% 60%; }
}
@keyframes mr-bphoto-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
	.mr-bphoto__blob,
	.mr-bphoto__dot { animation: none; }
}

/* ---------- Botões ---------- */
.mr-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1.9rem;
	border-radius: 100px;
	border: 2px solid transparent;
	font-family: var(--mr-font-body);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}
.mr-btn { -webkit-tap-highlight-color: transparent; }
.mr-btn:hover { transform: translateY(-2px); }
.mr-btn:active { transform: translateY(0); }

/*
 * Cada variação define TODOS os estados (normal, hover, foco, toque) com seletor forte,
 * para o hover/:active do tema (links e botões) e do kit do Elementor nunca pintarem o botão.
 * No celular o toque dispara :hover e :active, então eles precisam ficar iguais aos de desktop.
 */
.mr-btn.mr-btn--primary,
.mr-btn.mr-btn--primary:visited { background: var(--mr-purple); border-color: var(--mr-purple); color: #fff; }
.mr-btn.mr-btn--primary:hover,
.mr-btn.mr-btn--primary:focus,
.mr-btn.mr-btn--primary:active { background: #6a2988; border-color: #6a2988; color: #fff; box-shadow: 0 6px 20px rgba(83, 32, 107, .3); }

.mr-btn.mr-btn--outline,
.mr-btn.mr-btn--outline:visited { background: transparent; border-color: var(--mr-purple); color: var(--mr-purple); }
.mr-btn.mr-btn--outline:hover,
.mr-btn.mr-btn--outline:focus,
.mr-btn.mr-btn--outline:active { background: var(--mr-purple); border-color: var(--mr-purple); color: #fff; }

.mr-btn.mr-btn--wa,
.mr-btn.mr-btn--wa:visited { background: #25d366; border-color: #25d366; color: #fff; }
.mr-btn.mr-btn--wa:hover,
.mr-btn.mr-btn--wa:focus,
.mr-btn.mr-btn--wa:active { background: #1db954; border-color: #1db954; color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, .35); }

.mr-btn.mr-btn--ghost,
.mr-btn.mr-btn--ghost:visited { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #fff; }
.mr-btn.mr-btn--ghost:hover,
.mr-btn.mr-btn--ghost:focus,
.mr-btn.mr-btn--ghost:active { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* ---------- Entrada suave ao rolar (ligada pelo main.js) ---------- */
.mr-js .mr-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.mr-js .mr-reveal.is-visible { opacity: 1; transform: none; }
.mr-reveal--d1 { transition-delay: .1s !important; }
.mr-reveal--d2 { transition-delay: .2s !important; }
.mr-reveal--d3 { transition-delay: .3s !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mr-js .mr-reveal { opacity: 1; transform: none; transition: none; }
}