/* ==========================================================================
   Página Maria Menarquinha · padrões girlup/mm-*
   Mobile first. Cores, fontes e tamanhos conforme "Guia - Site Maria Menarquinha"
   (pt do guia = px na tela, medidas máximas no desktop).
   ========================================================================== */

.gu-mm {
	/* Paleta da personagem: registrada no theme.json como "mm-*" (fallback = hex do PSD) */
	--mm-vermelho: var(--wp--preset--color--mm-vermelho, #f40202);
	--mm-vinho: var(--wp--preset--color--mm-vinho, #710033);
	--mm-rosa-forte: var(--wp--preset--color--mm-rosa-forte, #f460bd);
	--mm-laranja: var(--wp--preset--color--mm-laranja, #ff5226);
	--mm-amarelo: var(--wp--preset--color--mm-amarelo, #ffb200);
	--mm-verde: var(--wp--preset--color--mm-verde, #45b79c);
	--mm-roxo: var(--wp--preset--color--mm-roxo, #a47fff);
	--mm-rosa: var(--wp--preset--color--mm-rosa, #ffdcd9);
	--mm-branco: var(--wp--preset--color--base, #fff);

	/* Variações de vermelho: o guia usa #f40202 em tudo. Para passar no contraste
	   WCAG 2.1 AA, troque pelos valores comentados. */
	--mm-vermelho-fundo: var(--mm-vermelho);  /* AA: #e00000 (texto branco pequeno) */
	--mm-vermelho-texto: var(--mm-vermelho);  /* AA: #d00000 (título sobre amarelo) */
	--mm-vermelho-link: var(--mm-vermelho);   /* AA: #e00000 (link sobre branco) */
	--mm-texto: #303030;                      /* parágrafo da abertura */
	--mm-escuro: #2b0014;
	--mm-texto-cartao: var(--mm-branco);      /* Guia 2: Parágrafo 5 (branco) nos cards interativos */

	/* Tokens do tema */
	--mm-fonte-titulo: var(--wp--preset--font-family--antonio, Antonio, "Arial Narrow", sans-serif);
	--mm-fonte-texto: var(--wp--preset--font-family--raleway, Raleway, Arial, sans-serif);
	--mm-largura: var(--wp--style--global--wide-size, 1184px);
	--mm-raio: var(--wp--custom--radius--card, 30px);
	--mm-raio-menor: var(--wp--custom--radius--modal, 20px);
	--mm-secao-y: clamp(var(--wp--preset--spacing--50, 40px), 7vw, var(--wp--preset--spacing--80, 96px));

	margin-block: 0;
	font-family: var(--mm-fonte-texto);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5; /* Guia 2: Raleway 1.5 */
}

/* O theme.json pinta h1/h2 de roxo e h3 de rosa e define tamanhos por nível.
   Aqui os títulos herdam a cor da faixa; tamanho e cor vêm das classes gu-mm-*. */
.gu-mm :is(h1, h2, h3, h4) { color: inherit; font-size: inherit; letter-spacing: -0.025em; line-height: 1.1; }

/* Zera as margens de fluxo do tema (blockGap); os espaçamentos são definidos aqui. */
.wp-block-group.gu-mm { margin-block: 0; }
.gu-mm :is(h1, h2, h3, h4, p, figure, ul) { margin: 0; }
.gu-mm :is(.wp-block-group, .wp-block-image, .wp-block-buttons, .wp-block-list, .wp-block-gallery) { margin-block: 0; }
.gu-mm img { display: block; max-width: 100%; height: auto; }
.gu-mm a:focus-visible,
.gu-mm [tabindex]:focus-visible,
.gu-mm button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Estrutura ---------- */
.gu-mm .gu-mm-secao { padding-block: var(--mm-secao-y); overflow: hidden; }
.gu-mm .gu-mm-secao--amarela { background: var(--mm-amarelo); color: var(--mm-vinho); }
.gu-mm .gu-mm-secao--vinho   { background: var(--mm-vinho);   color: var(--mm-branco); }
.gu-mm .gu-mm-secao--rosa    { background: var(--mm-rosa);    color: var(--mm-vinho); }

.gu-mm .gu-mm-container {
	width: min(100% - 32px, var(--mm-largura));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.gu-mm .gu-mm-centro { align-items: center; text-align: center; }

/* ---------- Tipografia compartilhada ---------- */
.gu-mm .gu-mm-titulo,
.gu-mm .gu-mm-sobretitulo,
.gu-mm .gu-mm-titulo-abertura {
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.gu-mm .gu-mm-titulo,
.gu-mm .gu-mm-sobretitulo { font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.125rem); } /* 50 */
.gu-mm .gu-mm-titulo--vermelho { color: var(--mm-vermelho); }
.gu-mm .gu-mm-titulo--vinho { color: var(--mm-vinho); }

.gu-mm .gu-mm-texto { font-size: 1.125rem; max-width: 70ch; } /* 18 */
.gu-mm .gu-mm-texto--estreito { max-width: 62ch; }
.gu-mm .gu-mm-texto strong, .gu-mm .gu-mm-ponte strong { font-weight: 700; }
.gu-mm .gu-mm-ponte.gu-mm-ponte--leve { font-weight: 400; } /* 1ª linha normal, 2ª em negrito (strong) */

.gu-mm .gu-mm-ponte {
	font-weight: 700;
	font-size: 1.125rem;
	text-align: center;
	margin-top: 16px !important;
	align-self: center;
}

/* Etiquetas retangulares ("Hora de descobrir junto!", "No dia a dia", "Pra brincar") */
.gu-mm .gu-mm-etiqueta {
	align-self: flex-start;
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); /* 30 */
	line-height: 1.1;
	letter-spacing: -0.025em;
	display: inline-flex;
	align-items: center;
	min-height: 57px;      /* Guia 2: 57px de altura */
	padding: 0 15px;
}
.gu-mm .gu-mm-etiqueta--amarela  { background: var(--mm-amarelo);  color: var(--mm-branco); }
.gu-mm .gu-mm-etiqueta--vinho    { background: var(--mm-vinho);    color: var(--mm-branco); }
.gu-mm .gu-mm-dia .gu-mm-etiqueta { background: var(--mm-vinho); } /* Guia 2: Tag 2 ("No dia a dia") vinho */
.gu-mm .gu-mm-etiqueta--vermelha { background: var(--mm-vermelho); color: var(--mm-branco); }

/* ---------- Botões ---------- */
.gu-mm .gu-mm-botoes { gap: 12px; }
.gu-mm .gu-mm-botao .wp-block-button__link {
	background: var(--mm-vermelho);
	color: var(--mm-branco);
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); /* 30 */
	line-height: 1.1;
	letter-spacing: -0.025em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 61px;      /* Guia 2: 61px de altura */
	padding: 0 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.gu-mm .gu-mm-botao .wp-block-button__link:hover,
.gu-mm .gu-mm-botao .wp-block-button__link:focus,
.gu-mm .gu-mm-botao .wp-block-button__link:active {
	/* Guia 2: hover inverte as cores (fundo branco, texto vermelho); substitui o turquesa do theme.json */
	background: var(--mm-branco);
	color: var(--mm-vermelho);
}

.gu-mm .gu-mm-botao-link .wp-block-button__link {
	background: transparent;
	color: var(--mm-vermelho-link);
	padding: 0;
	border-radius: 0;
	font-family: var(--mm-fonte-texto);
	font-weight: 700;
	font-size: 1.125rem; /* 18 */
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gu-mm .gu-mm-botao-link .wp-block-button__link:hover,
.gu-mm .gu-mm-botao-link .wp-block-button__link:focus,
.gu-mm .gu-mm-botao-link .wp-block-button__link:active { background: transparent; color: var(--mm-vinho); text-decoration: underline; }

/* ==========================================================================
   1. Abertura
   ========================================================================== */
/* Duas colunas independentes (bloco Colunas): o tamanho da personagem não depende do texto.
   Medidas do PSD (1280px): logo 401×138, título 60px, personagem 417×530. */
.gu-mm .gu-mm-abertura__colunas { gap: 32px; margin: 0; }
.gu-mm .gu-mm-abertura__texto { display: flex; flex-direction: column; gap: 0; }
.gu-mm .gu-mm-abertura__imagem { display: flex; justify-content: center; align-items: flex-start; }

.gu-mm .gu-mm-abertura__logo img { width: min(401px, 100%); height: auto; }   /* 401×138 */
.gu-mm .gu-mm-titulo-abertura {
	margin-top: 8px !important;                                            /* logo → título */
	color: var(--mm-vermelho-texto);
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem); /* 60 */
	line-height: 1.2;  /* medido no PSD: 72px entre as linhas com fonte de 60px */
	letter-spacing: -0.025em;
}
.gu-mm .gu-mm-abertura .gu-mm-texto {
	margin-top: 18px !important;                                           /* título → parágrafo */
	color: var(--mm-texto);
	line-height: 1.5;
	max-width: 680px;  /* no PSD a linha mais longa tem ~635px */
}
.gu-mm .gu-mm-abertura .gu-mm-botoes { margin-top: 32px; }             /* parágrafo → botão */
.gu-mm .gu-mm-abertura .gu-mm-botao .wp-block-button__link { white-space: nowrap; }

/* Personagem: tamanho próprio, limitado pela própria coluna (417×530 no PSD) */
.gu-mm .gu-mm-abertura__personagem { margin: 0; }
.gu-mm .gu-mm-abertura__personagem img { width: auto; max-width: 100%; height: auto; max-height: min(530px, 90vw); }

/* ==========================================================================
   2. Para quem cuida
   ========================================================================== */
/* Duas colunas (bloco Colunas). Medidas do PSD (1280px):
   título 50px; cartão 779×303 (borda preta 1px, cantos 20px, texto a 25px da esquerda);
   selo 195×202 saindo 126px acima e 78px à direita do cartão; personagem 287×435. */
.gu-mm .gu-mm-cuida__colunas { gap: 32px; margin: 0; }
.gu-mm .gu-mm-cuida__texto { display: flex; flex-direction: column; gap: 14px; }   /* título → cartão */
.gu-mm .gu-mm-cuida__cartao {
	position: relative;
	background: var(--mm-branco);
	color: var(--mm-vinho);
	border: 1px solid #000;
	border-radius: var(--mm-raio-menor); /* 20 */
	/* O selo fica sobre o canto superior direito: ~65% dele acima do cartão.
	   O texto começa logo abaixo do selo e ocupa toda a largura do cartão (PSD). */
	--selo: 96px;
	--selo-direita: -6px;
	padding: calc(var(--selo) * 0.39 + 8px) 30px 40px 25px;
	margin-top: calc(var(--selo) * 0.65 - 14px) !important;
	display: flex;
	flex-direction: column;
	gap: 23px;                 /* uma linha em branco entre os parágrafos, como no PSD */
}
.gu-mm .gu-mm-cuida__cartao .gu-mm-texto,
.gu-mm .gu-mm-cuida__titulo { font-size: 1.125rem; line-height: 1.3; max-width: none; } /* PSD: ~23px entre linhas */
.gu-mm .gu-mm-cuida__titulo { font-family: var(--mm-fonte-texto); text-transform: none; letter-spacing: 0; font-weight: 700; }
.gu-mm .gu-mm-cuida__selo {
	position: absolute;
	width: var(--selo);
	top: calc(var(--selo) * -0.65);     /* PSD: 126px acima com 195px de largura */
	right: var(--selo-direita);
	margin: 0;
	z-index: 1;
}
.gu-mm .gu-mm-cuida__imagem { display: flex; justify-content: center; align-items: flex-start; }
.gu-mm .gu-mm-cuida__personagem { margin: 0; }
.gu-mm .gu-mm-cuida__personagem img { width: min(287px, 100%); height: auto; } /* 287×435 */
.gu-mm .gu-mm-cuida .gu-mm-ponte { margin-top: 32px !important; }


/* ==========================================================================
   3. Muito prazer: 4 poses em colunas (bloco Colunas)
   Medidas do PSD (1280px): título 50px; texto centralizado com até 890px e
   linhas a 22px (1,2); cards 271×271, cantos 20px, 16px entre eles.
   ========================================================================== */
.gu-mm .gu-mm-prazer { padding-block: 48px 40px; }
.gu-mm .gu-mm-prazer .gu-mm-container { gap: 21px; }                  /* uma linha em branco entre os parágrafos */
.gu-mm .gu-mm-prazer .gu-mm-sobretitulo { margin-bottom: 4px !important; } /* título → "Uma gotinha…" ≈ 25px */
.gu-mm .gu-mm-prazer .gu-mm-ponte { margin-top: 0 !important; line-height: 1.2; }
.gu-mm .gu-mm-prazer .gu-mm-texto,
.gu-mm .gu-mm-prazer__titulo { line-height: 1.2; max-width: 960px; } /* PSD: 890px; folga para a Raleway real caber em 2 linhas */
.gu-mm .gu-mm-prazer__titulo {
	font-family: var(--mm-fonte-texto);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.gu-mm .gu-mm-poses {
	width: 100%;
	max-width: calc(4 * 271px + 3 * 16px);   /* 1132px, como no PSD */
	margin: 8px auto 6px !important;         /* texto → cards ≈ 29px; cards → frase ≈ 27px */
	gap: 16px;
	flex-wrap: wrap !important;              /* celular: 2 por linha */
	justify-content: center;
}
.gu-mm .gu-mm-pose-coluna {
	flex: 0 1 calc(50% - 8px) !important;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.gu-mm .gu-mm-pose { margin: 0; width: 100%; max-width: 271px; }
.gu-mm .gu-mm-pose img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--mm-verde);
	border-radius: 20px;
	box-shadow: 2px 2px 60px rgba(113, 0, 51, .08);   /* Guia: sombra vinho 8%, tamanho 60 */
	transition: transform .35s ease, box-shadow .35s ease;
}

/* Zoom leve ao passar o mouse (só em telas com mouse; no toque não há hover) */
@media (hover: hover) {
	.gu-mm .gu-mm-pose:hover img {
		transform: scale(1.05);
		box-shadow: 2px 10px 40px rgba(113, 0, 51, .22);
	}
}
@media (prefers-reduced-motion: reduce) {
	.gu-mm .gu-mm-pose:hover img { transform: none; }
}

/* ==========================================================================
   4. Hora de descobrir junto
   Medidas do PSD (1280px): tag 300×57; título 50px; texto 18px com linhas a 22px (1,2);
   3 cards 383×263 (cantos 30px, 11px entre eles, 1172px no total);
   embaixo 2 colunas: "E a menstruação?" + texto (até ~420px, recuado 28px)
   e o card da pergunta 533×310 começando em ~604px.
   ========================================================================== */
.gu-mm .gu-mm-descobrir { padding-block: 50px 40px; }
.gu-mm .gu-mm-descobrir > .gu-mm-container { gap: 0; }
.gu-mm .gu-mm-descobrir > .gu-mm-container > .gu-mm-titulo { margin-top: 20px !important; }   /* tag → título */
.gu-mm .gu-mm-descobrir > .gu-mm-container > .gu-mm-texto { margin-top: 6px !important; line-height: 1.2; max-width: none; } /* título → texto */

/* Cards: uma coluna para cada (bloco Colunas) */
.gu-mm .gu-mm-cartoes-muda {
	width: 100%;
	max-width: calc(3 * 383px + 2 * 11px);   /* 1171px */
	margin: 50px auto 0 !important;          /* texto → cards */
	gap: 11px;
}
.gu-mm .gu-mm-cartao-coluna { display: flex; justify-content: center; min-width: 0; }
.gu-mm .gu-mm-cartao-muda {
	position: relative;
	width: 100%;
	max-width: 383px;
	border-radius: var(--mm-raio); /* 30 */
	overflow: hidden;
	background: var(--mm-roxo);
	color: var(--mm-texto-cartao);
	aspect-ratio: 383 / 263;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gu-mm .gu-mm-cartoes-muda > .wp-block-column:nth-child(3n + 2) .gu-mm-cartao-muda { background: var(--mm-rosa-forte); }
.gu-mm .gu-mm-cartoes-muda > .wp-block-column:nth-child(3n + 3) .gu-mm-cartao-muda { background: var(--mm-verde); }
.gu-mm .gu-mm-cartao-muda__imagem,
.gu-mm .gu-mm-cartao-muda__imagem img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.gu-mm .gu-mm-cartao-muda__imagem img { object-fit: contain; }   /* Guia: ilustração livre dentro do card */
/* Verso: cobre a imagem e aparece no hover (mouse) ou toque/Enter (classe is-virado, via JS) */
.gu-mm .gu-mm-cartao-muda__verso {
	position: absolute;
	inset: 0;
	padding: 24px 32px;
	background: inherit;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;              /* PSD: uma linha em branco entre título e texto */
	font-size: 1.125rem;    /* 18 */
	line-height: 1.2;
	opacity: 0;
	transform: scale(.97);
	transition: opacity .3s ease, transform .3s ease;
}
.gu-mm .gu-mm-cartao-muda.is-virado .gu-mm-cartao-muda__verso,
.gu-mm .gu-mm-cartao-muda:focus-within .gu-mm-cartao-muda__verso { opacity: 1; transform: none; }
@media (hover: hover) {
	.gu-mm .gu-mm-cartao-muda:hover .gu-mm-cartao-muda__verso { opacity: 1; transform: none; }
}
.gu-mm .gu-mm-cartao-muda__titulo { font-family: var(--mm-fonte-texto); text-transform: none; letter-spacing: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }

/* Embaixo: 2 colunas (texto | card da pergunta), centralizadas na vertical */
.gu-mm .gu-mm-descobrir__menstruacao { margin: 70px 0 0 !important; gap: 24px; }   /* cards → bloco de baixo */
.gu-mm .gu-mm-descobrir__explica { display: flex; flex-direction: column; gap: 0; }
.gu-mm .gu-mm-descobrir__explica .gu-mm-texto { margin-top: 24px !important; line-height: 1.2; max-width: 430px; } /* título → texto ≈ 28px */
.gu-mm .gu-mm-descobrir__pergunta { display: flex; }
.gu-mm .gu-mm-pergunta-crianca {
	width: 100%;
	max-width: 533px;
	min-height: 310px;
	background: var(--mm-branco);
	border-radius: var(--mm-raio); /* 30 */
	padding: 44px 32px 52px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;            /* "Pergunta para a criança:" → pergunta ≈ 22px */
}
.gu-mm .gu-mm-pergunta-crianca__rotulo { color: var(--mm-vinho); font-weight: 700; font-size: 1.25rem; line-height: 1.2; } /* Guia 2: Parágrafo 6, bold 20 */
.gu-mm .gu-mm-pergunta-crianca__texto {
	color: var(--mm-vermelho);
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;     /* PSD: 57px entre as linhas com 48px */
	letter-spacing: -0.025em;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* 48 */
}
.gu-mm .gu-mm-descobrir .gu-mm-ponte { margin-top: 56px !important; }   /* card → frase ≈ 59px */

/* ==========================================================================
   5. No dia a dia
   ========================================================================== */
/* Medidas do PSD (1280px): tag 153×57; título 50px em 2 linhas (linhas a 60px = 1,2);
   selo 197×200 a ~44px da borda direita; 4 cards 273×446 (cantos 30px, ~27px entre eles,
   sombra dura 11×9 vinho); dentro: 26px à esquerda, título 36px (1,2), texto 18px (1,2). */
.gu-mm .gu-mm-dia { padding-block: 64px 56px; }
.gu-mm .gu-mm-dia > .gu-mm-container { gap: 0; }
.gu-mm .gu-mm-dia__topo { display: grid; gap: 20px; align-items: start; }
.gu-mm .gu-mm-dia__intro { display: flex; flex-direction: column; gap: 10px; }
.gu-mm .gu-mm-dia__intro .gu-mm-titulo { max-width: 680px; line-height: 1.2; }
.gu-mm .gu-mm-dia__intro .gu-mm-texto { line-height: 1.2; }
.gu-mm .gu-mm-dia__selo { justify-self: end; margin: 0; }
.gu-mm .gu-mm-dia__selo img { width: clamp(120px, 30vw, 197px); height: auto; }   /* 197×200 */

/* Cards: uma coluna para cada (bloco Colunas) */
.gu-mm .gu-mm-cartoes-dica {
	margin: 36px 0 0 !important;          /* texto → cards */
	gap: 27px 27px;
	flex-wrap: wrap !important;           /* celular: 1 por linha; tablet: 2 por linha */
	align-items: flex-start;
}
.gu-mm .gu-mm-dica-coluna { flex: 1 1 100% !important; min-width: 0; display: flex; }
.gu-mm .gu-mm-cartao-dica {
	width: 100%;
	background: var(--mm-vermelho-fundo);
	color: var(--mm-branco);
	border-radius: var(--mm-raio);        /* 30 */
	padding: 32px 21px 32px 26px;
	box-shadow: 11px 9px 0 var(--mm-vinho);
	display: flex;
	flex-direction: column;
	gap: 23px;                            /* título → texto */
	font-size: 1.125rem;                  /* 18 */
	line-height: 1.2;
}
.gu-mm .gu-mm-cartao-dica__titulo {
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;                     /* PSD: 43px entre as linhas com 36px */
	letter-spacing: -0.025em;
	font-size: clamp(1.875rem, 1.6rem + 0.8vw, 2.25rem); /* 36 */
	overflow-wrap: break-word;
}
/* Botão criado pelo JS dentro do título: só o título aparece; clique expande o texto */
.gu-mm .gu-mm-cartao-dica__botao {
	all: unset;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	cursor: pointer;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.gu-mm .gu-mm-cartao-dica__botao > span:first-child { min-width: 0; overflow-wrap: break-word; }
.gu-mm .gu-mm-cartao-dica__botao:focus-visible { outline: 3px solid var(--mm-branco); outline-offset: 6px; border-radius: 4px; }
.gu-mm .gu-mm-cartao-dica__icone {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-top: 2px;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: transform .25s ease;
}
.gu-mm .gu-mm-cartao-dica__icone svg { width: 18px; height: 18px; }
.gu-mm .gu-mm-cartao-dica.is-aberto .gu-mm-cartao-dica__icone { transform: rotate(45deg); }
.gu-mm .gu-mm-cartao-dica [hidden] { display: none !important; }

.gu-mm .gu-mm-frase-final {
	align-self: center;
	text-align: center;
	margin-top: 80px !important;          /* cards → frase (PSD) */
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem); /* 40 */
	letter-spacing: -0.025em;
	color: var(--mm-vinho);
}
.gu-mm .gu-mm-frase-final strong {
	text-decoration: underline;
	text-decoration-color: var(--mm-vermelho);
	text-decoration-thickness: 8px;  /* Guia 2 */
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}

/* ==========================================================================
   6. Pra brincar
   Medidas do PSD (1280px): topo com tag 162×57, título 50px (1 linha) e texto;
   logotipo 285×105 à direita, na altura do título. Embaixo 3 colunas:
   2 cards 383×447 (cantos 30px, sombra dura 11×9 vermelha, 23px entre eles)
   e a personagem pulando 332×425 centralizada na 3ª coluna.
   ========================================================================== */
.gu-mm .gu-mm-brincar { padding-block: 56px 64px; }
.gu-mm .gu-mm-brincar > .gu-mm-container { gap: 0; }

/* Topo: 2 colunas (texto | logotipo) com as mesmas proporções das colunas de baixo */
.gu-mm .gu-mm-brincar__topo { gap: 23px; margin: 0; align-items: flex-start; }
.gu-mm .gu-mm-brincar__conteudo { display: flex; flex-direction: column; gap: 0; }
.gu-mm .gu-mm-brincar__conteudo .gu-mm-titulo { margin-top: 6px !important; line-height: 1.2; }     /* tag → título */
.gu-mm .gu-mm-brincar__conteudo .gu-mm-texto { margin-top: 12px !important; line-height: 1.2; }     /* título → texto */
.gu-mm .gu-mm-brincar__logo-coluna { display: flex; justify-content: center; align-items: flex-start; }
.gu-mm .gu-mm-brincar__logo { margin: 0; }
.gu-mm .gu-mm-brincar__logo img { width: min(285px, 100%); height: auto; }   /* 285×105 */

/* Embaixo: 3 colunas (card | card | personagem) */
.gu-mm .gu-mm-cartoes-brincar { margin: 16px 0 0 !important; gap: 23px; align-items: flex-start; }   /* texto → cards */
.gu-mm .gu-mm-brincar-coluna { display: flex; min-width: 0; }
.gu-mm .gu-mm-cartao-brincar {
	width: 100%;
	max-width: 383px;
	min-height: 447px;                    /* Guia: 383×447 */
	background: var(--mm-branco);
	color: var(--mm-vinho);
	border-radius: var(--mm-raio);        /* 30 */
	box-shadow: 11px 9px 0 var(--mm-vermelho);
	padding: 32px 18px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	font-size: 1.125rem;                  /* 18 */
	line-height: 1.2;
}
.gu-mm .gu-mm-cartao-brincar__titulo {
	min-height: 2.4em;                    /* área de 2 linhas: as imagens ficam na mesma altura nos 2 cards */
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mm-vermelho);
	font-family: var(--mm-fonte-titulo);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	letter-spacing: -0.025em;
	font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem); /* 30 */
}
.gu-mm .gu-mm-cartao-brincar__imagem { width: 100%; max-width: 345px; margin: 0; }
.gu-mm .gu-mm-cartao-brincar__imagem img { width: 100%; aspect-ratio: 345 / 180; object-fit: contain; }
.gu-mm .gu-mm-cartao-brincar__texto {
	max-width: 240px;                     /* PSD: texto em ~230px, centralizado */
	min-height: 3.6em;                    /* área de 3 linhas, centralizada */
	display: flex;
	align-items: center;
	justify-content: center;
}
.gu-mm .gu-mm-cartao-brincar .gu-mm-botoes { justify-content: center; margin-top: auto; }
.gu-mm .gu-mm-cartao-brincar .gu-mm-botao-link .wp-block-button__link { line-height: 1.2; text-align: center; }
.gu-mm .gu-mm-botao-link .wp-block-button__link { text-transform: none; letter-spacing: 0; }

.gu-mm .gu-mm-brincar__ilustra { display: flex; justify-content: center; align-items: flex-start; }
.gu-mm .gu-mm-brincar__personagem { margin: 0; }
.gu-mm .gu-mm-brincar__personagem img { width: min(332px, 100%); height: auto; }   /* 332×425 */

/* ==========================================================================
   7. Banner Girl Up — 3 colunas (texto + botão | personagem | assinatura)
   Medidas do PSD (1280px): faixa rosa com 40px em cima e embaixo; card vinho 1186×450,
   cantos 30px; texto a 60px da borda; título 48px (2 linhas, 1,2); texto 18px (1,2);
   personagem 289×396 a 32px do topo e 22px da base do card; logo 228×81.
   ========================================================================== */
.gu-mm .gu-mm-endosso { padding-block: 40px; }
.gu-mm .gu-mm-endosso__cartao {
	background: var(--mm-vinho);
	color: var(--mm-branco);
	border-radius: var(--mm-raio);      /* 30 */
	padding: 40px 24px 22px;
	max-width: 1186px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}
.gu-mm .gu-mm-endosso__colunas { margin: 0; gap: 24px; align-items: center; }
.gu-mm .gu-mm-endosso__texto { display: flex; flex-direction: column; gap: 0; text-align: center; align-items: center; }
.gu-mm .gu-mm-endosso .gu-mm-titulo { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.2; } /* 48 */
.gu-mm .gu-mm-endosso .gu-mm-texto { margin-top: 26px !important; line-height: 1.2; }
.gu-mm .gu-mm-endosso .gu-mm-botoes { margin-top: 30px; }
.gu-mm .gu-mm-endosso__imagem { display: flex; justify-content: center; align-self: flex-end !important; }
.gu-mm .gu-mm-endosso__personagem { margin: 0; }
.gu-mm .gu-mm-endosso__personagem img { width: min(289px, 100%); height: auto; }   /* 289×396 */
.gu-mm .gu-mm-endosso__assinatura { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gu-mm .gu-mm-endosso__carinho { font-weight: 700; font-size: 1.125rem; line-height: 1.2; width: min(228px, 100%); text-align: left; padding-left: 17px; box-sizing: border-box; } /* Parágrafo 3 */
.gu-mm .gu-mm-endosso__logo { margin: 0; width: min(228px, 100%); }   /* mesma largura do "Com carinho," */
.gu-mm .gu-mm-endosso__logo img { width: min(228px, 100%); height: auto; }   /* 228×81 */

/* ==========================================================================
   Tablet (≥ 600px)
   ========================================================================== */
@media (min-width: 600px) {
	.gu-mm .gu-mm-cuida__cartao { --selo: 130px; --selo-direita: -20px; }
	.gu-mm .gu-mm-container { width: min(100% - 64px, var(--mm-largura)); }
	.gu-mm .gu-mm-dia__topo { grid-template-columns: 1fr auto; }
}

/* ==========================================================================
   Desktop (≥ 960px)
   ========================================================================== */
@media (min-width: 960px) {
	.gu-mm .gu-mm-abertura { padding-block: 64px 48px; }
	.gu-mm .gu-mm-abertura .gu-mm-botoes { margin-left: 104px; }       /* no PSD o botão fica recuado em relação ao texto */






}

/* Para quem cuida: lado a lado a partir de 782px (quando o bloco Colunas deixa de empilhar) */
@media (min-width: 782px) {
	.gu-mm .gu-mm-cuida { padding-block: 100px 78px; }
	.gu-mm .gu-mm-cuida__cartao { --selo: 150px; --selo-direita: -40px; padding-bottom: 58px; margin-top: 0 !important; }
}
@media (min-width: 1100px) {
	.gu-mm .gu-mm-cuida__cartao { --selo: 195px; --selo-direita: -78px; } /* PSD: 195×202, 78px para fora */
}

/* Muito prazer: 4 poses lado a lado a partir de 782px */
@media (min-width: 782px) {
	.gu-mm .gu-mm-poses { flex-wrap: nowrap !important; }
	.gu-mm .gu-mm-pose-coluna { flex: 1 1 0 !important; }
}

/* Descobrir junto: texto recuado como no PSD quando as colunas ficam lado a lado */
@media (min-width: 782px) {
	.gu-mm .gu-mm-descobrir__explica { padding-left: 28px; }
	.gu-mm .gu-mm-cartao-coluna { flex: 1 1 0 !important; }   /* 3 cards sempre com a mesma largura */
}

/* Dia a dia: 4 cards lado a lado a partir de 960px (abaixo disso, 2 por linha) */
@media (min-width: 600px) {
	.gu-mm .gu-mm-dica-coluna { flex: 0 1 calc(50% - 14px) !important; }
}
@media (min-width: 960px) {
	.gu-mm .gu-mm-dia { padding-block: 77px 60px; }
	.gu-mm .gu-mm-cartoes-dica { flex-wrap: nowrap !important; }
	.gu-mm .gu-mm-dica-coluna { flex: 1 1 0 !important; }
	.gu-mm .gu-mm-cartao-dica { max-width: 273px; min-height: 446px; padding: 52px 21px 40px 26px; } /* Guia: 273×446 */
	.gu-mm .gu-mm-dia__selo { margin-right: 44px; }
}

/* Pra brincar: colunas de baixo com a mesma largura; personagem ~20px abaixo do topo dos cards (PSD) */
@media (min-width: 782px) {
	.gu-mm .gu-mm-brincar-coluna,
	.gu-mm .gu-mm-brincar__ilustra { flex: 1 1 0 !important; }
	.gu-mm .gu-mm-brincar__ilustra { padding-top: 19px; }
	/* Topo com a mesma grade das 3 colunas de baixo: o logotipo fica centralizado sobre a personagem */
	.gu-mm .gu-mm-brincar__topo { gap: 46px; }
	.gu-mm .gu-mm-brincar__conteudo { flex: 2 1 0 !important; }
	.gu-mm .gu-mm-brincar__logo-coluna { flex: 1 1 0 !important; }
	.gu-mm .gu-mm-brincar__logo { margin-top: 55px !important; transform: translateX(40px);}   /* PSD: logo na altura do título, ~15px acima dos cards */
}

/* Banner: lado a lado a partir de 782px, texto alinhado à esquerda como no PSD */
@media (min-width: 782px) {
	.gu-mm .gu-mm-endosso__cartao { padding: 32px 40px 22px 60px; min-height: 450px; display: flex; align-items: stretch; }
	.gu-mm .gu-mm-endosso__colunas { width: 100%; align-items: stretch !important; }
	.gu-mm .gu-mm-endosso__texto { flex: 52 1 0 !important; }
	.gu-mm .gu-mm-endosso__imagem { flex: 26 1 0 !important; }
	.gu-mm .gu-mm-endosso__assinatura { flex: 22 1 0 !important; }
	.gu-mm .gu-mm-endosso__texto { text-align: left; align-items: flex-start; justify-content: center; align-self: center !important; }
	.gu-mm .gu-mm-endosso .gu-mm-botoes { margin-left: 4px; }
	.gu-mm .gu-mm-endosso__assinatura { justify-content: center; align-self: center !important; padding-top: 40px; }
}

/* Dia a dia — celular: selo no canto, ao lado da etiqueta "No dia a dia" */
@media (max-width: 599px) {
	.gu-mm .gu-mm-dia__topo { position: relative; }
	.gu-mm .gu-mm-dia__selo {
		position: absolute;
		top: -12px;          /* sobe um pouco, alinhado com a etiqueta */
		right: 0;
		margin: 0;
	}
	.gu-mm .gu-mm-dia__selo img { width: 84px; }
}

/* No editor: verso e textos dos cartões sempre visíveis para facilitar a edição */
.editor-styles-wrapper .gu-mm .gu-mm-cartao-muda { aspect-ratio: auto; }
.editor-styles-wrapper .gu-mm .gu-mm-cartao-muda__imagem { height: auto; }
.editor-styles-wrapper .gu-mm .gu-mm-cartao-muda__verso {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gu-mm *, .gu-mm *::before, .gu-mm *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}