/*
Theme Name: Yuna Dicas
Description: Tema do Yuna Dicas. Catalogo de achadinhos com link de afiliado, feito mobile first e sem construtor de pagina.
Author: Rovaltech
Version: 1.0.0
Text Domain: yuna
*/

/* ===========================================================================
   SISTEMA DE DESIGN
   ---------------------------------------------------------------------------
   O magenta da marca e ACENTO, nao fundo. Em catalogo, cor forte espalhada
   rouba a atencao da foto do produto, que e o que vende. Entao: superficie
   clara e neutra, foto grande, e o magenta reservado para o que o visitante
   deve clicar.
   =========================================================================== */
:root {
	/* marca, tirada do logo (o Y com a sacola) */
	--magenta: #e5007d;
	--magenta-escuro: #b80064;
	--roxo: #6a00b8;
	--roxo-escuro: #3d0070;

	/* neutros com viés roxo: cinza puro ao lado de magenta fica sujo */
	--tinta: #1b1322;
	--tinta-2: #4a4255;
	--tinta-3: #726a7e;
	--linha: #e8e3ee;
	--superficie: #ffffff;
	--fundo: #faf8fc;
	--fundo-2: #f3eff8;

	/* economia em verde: o cerebro le verde como "ganhei", nao como marca */
	--economia: #0b7a43;
	--economia-fundo: #e6f6ed;

	--raio: 14px;
	--raio-p: 10px;
	--sombra: 0 1px 2px rgba(27, 19, 34, .06), 0 8px 24px rgba(27, 19, 34, .06);
	--sombra-alta: 0 2px 4px rgba(27, 19, 34, .08), 0 16px 40px rgba(27, 19, 34, .12);

	--largura: 1180px;
	--gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .fonte-display {
	font-family: 'Outfit', 'Figtree', -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0 0 .5em;
	color: var(--tinta);
}
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
a { color: var(--roxo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--magenta);
	outline-offset: 2px;
	border-radius: 4px;
}

.envolve { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.pular-para-conteudo {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--magenta); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--raio-p) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------------------------------------------------------------- cabecalho */
.topo {
	background: var(--superficie);
	border-bottom: 1px solid var(--linha);
	position: sticky; top: 0; z-index: 50;
}
.topo-barra {
	display: flex; align-items: center; gap: 12px;
	min-height: 60px; padding-block: 10px;
}
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.marca img { width: 38px; height: 38px; border-radius: 10px; }
.marca-nome {
	font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem;
	letter-spacing: -0.03em; color: var(--tinta); line-height: 1;
}
.marca-nome span { color: var(--magenta); }

.busca { flex: 1; min-width: 0; position: relative; }
.busca input {
	width: 100%; border: 1.5px solid var(--linha); background: var(--fundo);
	border-radius: 999px; padding: 11px 44px 11px 16px; font: inherit; font-size: .95rem;
	color: var(--tinta);
}
.busca input::placeholder { color: var(--tinta-3); }
.busca input:focus { border-color: var(--magenta); background: var(--superficie); outline: none; }
.busca button {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	border: 0; background: var(--magenta); color: #fff; width: 34px; height: 34px;
	border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}

.menu-categorias {
	display: flex; gap: 6px; overflow-x: auto; padding-block: 8px;
	scrollbar-width: none; -ms-overflow-style: none;
	border-top: 1px solid var(--linha);
}
.menu-categorias::-webkit-scrollbar { display: none; }
.menu-categorias a {
	flex: none; text-decoration: none; color: var(--tinta-2);
	font-size: .88rem; font-weight: 600; padding: 7px 13px;
	border-radius: 999px; background: var(--fundo-2); white-space: nowrap;
	transition: background .15s, color .15s;
}
.menu-categorias a:hover, .menu-categorias a[aria-current="page"] {
	background: var(--magenta); color: #fff;
}

/* --------------------------------------------------------------------- hero */
.hero {
	padding: 18px 0 14px;
	background: linear-gradient(170deg, #fff 0%, var(--fundo-2) 100%);
	border-bottom: 1px solid var(--linha);
}
.hero h1 { margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero p { color: var(--tinta-2); margin: 0; max-width: 46ch; font-size: 1.02rem; }

/* ------------------------------------------------------------------- secoes */
.secao { padding: 30px 0; }
.secao-topo {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-bottom: 16px;
}
.secao-topo h2 { margin: 0; }
.secao-topo a { font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--magenta); white-space: nowrap; }
.secao-topo a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- grade */
.grade {
	display: grid; gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 960px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------- card */
.card {
	background: var(--superficie); border: 1px solid var(--linha);
	border-radius: var(--raio); overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: #ddd4e8; }
.card-foto { position: relative; aspect-ratio: 1 / 1; background: var(--fundo-2); }
.card-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.selo-off {
	position: absolute; left: 8px; top: 8px;
	background: var(--economia); color: #fff;
	font-size: .72rem; font-weight: 700; padding: 4px 8px; border-radius: 999px;
	letter-spacing: .01em;
}
.card-corpo { padding: 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-titulo {
	font-size: .92rem; font-weight: 600; line-height: 1.35; margin: 0;
	font-family: inherit; letter-spacing: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-titulo a { color: var(--tinta); text-decoration: none; }
.card-titulo a:hover { color: var(--roxo); }
.card-prova { font-size: .78rem; color: var(--tinta-3); display: flex; align-items: center; gap: 5px; }
.card-prova .estrela { color: #f5a623; }
.preco { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.preco-de { font-size: .78rem; color: var(--tinta-3); text-decoration: line-through; }
.preco-por { font-size: 1.15rem; font-weight: 800; font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; }
.card .botao { margin-top: 8px; }

/* ------------------------------------------------------------------- botao */
.botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--magenta); color: #fff; text-decoration: none;
	font-weight: 700; font-size: .95rem; line-height: 1;
	padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
	text-align: center; transition: background .15s, transform .12s;
	font-family: 'Outfit', sans-serif;
}
.botao:hover { background: var(--magenta-escuro); }
.botao:active { transform: scale(.985); }
.botao-largo { width: 100%; }
.botao-fantasma {
	background: transparent; color: var(--roxo); border: 1.5px solid var(--linha);
}
.botao-fantasma:hover { background: var(--fundo-2); color: var(--roxo-escuro); }

/* --------------------------------------------------------- categorias home */
.tiras-categoria { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tiras-categoria { grid-template-columns: repeat(4, 1fr); } }
.tira-cat {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-p);
	padding: 14px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .95rem;
	transition: border-color .15s, transform .15s;
}
.tira-cat:hover { border-color: var(--magenta); transform: translateY(-2px); }
.tira-cat span { color: var(--tinta-3); font-size: .8rem; font-weight: 500; }

/* ------------------------------------------------------- pagina do produto */
.trilha { font-size: .82rem; color: var(--tinta-3); padding: 14px 0 0; }
.trilha a { color: var(--tinta-3); text-decoration: none; }
.trilha a:hover { color: var(--magenta); text-decoration: underline; }

.produto-titulo { margin: 10px 0 .3em; font-size: clamp(1.3rem, 4.4vw, 1.9rem); }
.produto-resumo { color: var(--tinta-2); font-size: 1rem; margin-bottom: 4px; max-width: 70ch; }

/* No celular a ordem e foto, preco com botao, e so depois o resto: a pessoa
   precisa saber quanto custa antes de ler argumento. No computador as areas
   nomeadas jogam o painel de preco para a coluna da direita, sem mudar o HTML. */
.produto {
	display: grid; gap: 16px; padding: 12px 0 36px;
	grid-template-areas: "foto" "painel" "conteudo";
}
.produto-foto { grid-area: foto; }
.produto-painel { grid-area: painel; }
.produto-conteudo { grid-area: conteudo; display: grid; gap: 16px; }
.produto-conteudo .caixa { margin-bottom: 0; }
@media (min-width: 900px) {
	.produto {
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-areas: "foto painel" "conteudo painel";
		align-items: start; gap: 28px 32px;
	}
}

.produto-foto {
	background: var(--superficie); border: 1px solid var(--linha);
	border-radius: var(--raio); padding: 14px; position: relative;
}
.produto-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

.produto-painel {
	background: var(--superficie); border: 1px solid var(--linha);
	border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra);
}
@media (min-width: 900px) { .produto-painel { position: sticky; top: 86px; } }
.bloco-preco { margin: 14px 0; }
.bloco-preco .preco-por { font-size: 2rem; }
.bloco-preco .selo-off {
	position: static; display: inline-block; margin-left: 6px; vertical-align: middle;
}
.preco-aviso { font-size: .76rem; color: var(--tinta-3); margin-top: 4px; }
.prova-linha {
	display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--tinta-2);
	padding: 10px 0; border-block: 1px solid var(--linha); margin-bottom: 14px;
}

.lista-check { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.lista-check li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--tinta-2); }
.lista-check li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--economia-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b7a43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.3'/%3E%3C/svg%3E") center/11px no-repeat;
}

.caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; margin-bottom: 16px; }
.caixa h2 { font-size: 1.15rem; }

.videos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.video-link {
	display: flex; align-items: center; gap: 8px; text-decoration: none;
	border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 11px 13px;
	color: var(--tinta); font-weight: 600; font-size: .9rem; background: var(--fundo);
}
.video-link:hover { border-color: var(--magenta); }

/* CTA fixa no celular: a decisao de clicar acontece a qualquer altura da
   pagina, e obrigar a rolar de volta ate o botao perde venda. */
.cta-fixa {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--linha);
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 12px;
	box-shadow: 0 -6px 20px rgba(27, 19, 34, .08);
}
.cta-fixa .preco-por { font-size: 1.2rem; }
.cta-fixa .botao { flex: 1; }
@media (min-width: 900px) { .cta-fixa { display: none; } }
body.tem-cta-fixa { padding-bottom: 76px; }
@media (min-width: 900px) { body.tem-cta-fixa { padding-bottom: 0; } }

/* -------------------------------------------------------- aviso de afiliado */
.aviso-afiliado {
	font-size: .8rem; color: var(--tinta-3); line-height: 1.5;
	background: var(--fundo-2); border-radius: var(--raio-p);
	padding: 11px 13px; margin-top: 14px;
}
.aviso-afiliado a { color: var(--tinta-2); }

/* ------------------------------------------------------------------ rodape */
.rodape { background: var(--tinta); color: #cfc7da; margin-top: 40px; padding: 34px 0 24px; font-size: .9rem; }
.rodape a { color: #e9e3f2; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-grade { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h3 { color: #fff; font-size: .95rem; margin-bottom: .7em; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rodape-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rodape-social a {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 13px; font-size: .84rem;
}
.rodape-social a:hover { border-color: var(--magenta); text-decoration: none; }
.rodape-fim {
	border-top: 1px solid rgba(255,255,255,.12); margin-top: 24px; padding-top: 16px;
	font-size: .8rem; color: #9e95ad;
}

/* --------------------------------------------------------------- conteudo */
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: 1.6em; }
.prosa img { border-radius: var(--raio-p); margin-block: 1em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }

.vazio { text-align: center; padding: 50px 20px; color: var(--tinta-3); }

/* paginacao */
.paginacao { display: flex; gap: 8px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.paginacao .page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--linha); border-radius: var(--raio-p);
	background: var(--superficie); color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.paginacao .page-numbers.current { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.paginacao .page-numbers:hover:not(.current) { border-color: var(--magenta); color: var(--magenta); }

/* ---------------------------------------------------- destaque moda fitness
   Duas ARTES diferentes, nao a mesma imagem espremida.
   - Computador: o banner panoramico, que ja traz o logotipo YUNA FIT e a linha
     "treinos, looks, achadinhos" dentro da arte. O texto em HTML entra so na
     faixa escura de baixo, onde nao briga com o da imagem.
   - Celular: um recorte quase quadrado so da Yuna, sem texto embutido. Em
     375px o panoramico viraria uma tira e o texto da arte ficaria ilegivel.
   O banner inteiro e um link: no celular, area de toque grande converte mais
   do que um botao pequeno.
--------------------------------------------------------------------------- */
.banner-fit {
	display: block;
	position: relative;
	border-radius: var(--raio);
	overflow: hidden;
	text-decoration: none;
	background: #1b1322;
	box-shadow: var(--sombra);
	transition: transform .18s ease, box-shadow .18s ease;
}
.banner-fit:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.banner-fit img { width: 100%; height: auto; display: block; }

.banner-fit-conteudo {
	display: block;
	padding: 16px 18px 20px;
	background: linear-gradient(135deg, #3d0070 0%, #6a00b8 48%, #e5007d 100%);
	color: #fff;
}
.banner-fit .tarja {
	display: inline-block; background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .32);
	font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.banner-fit .titulo {
	display: block;
	font-family: 'Outfit', sans-serif; font-weight: 800;
	font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.12;
	letter-spacing: -0.02em; margin-bottom: 6px; color: #fff;
}
.banner-fit .apoio {
	display: block; color: rgba(255, 255, 255, .86);
	font-size: .92rem; line-height: 1.45; margin-bottom: 14px; max-width: 44ch;
}
.banner-fit .falso-botao {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: var(--magenta-escuro);
	font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem;
	padding: 12px 20px; border-radius: 999px;
}
.banner-fit:hover .falso-botao { background: #ffe9f5; }

@media (min-width: 720px) {
	/* A faixa de texto sobe por cima do rodape da arte, com degrade para a
	   leitura nao depender do que a foto tiver atras. */
	.banner-fit-conteudo {
		position: absolute; inset: auto 0 0 0;
		background: linear-gradient(to top, rgba(18, 10, 26, .94) 0%, rgba(18, 10, 26, .78) 45%, rgba(18, 10, 26, 0) 100%);
		padding: 80px 34px 28px;
	}
	.banner-fit .apoio { margin-bottom: 16px; }
}

/* ------------------------------------------------------- filtros do catalogo
   Com 380 produtos, rolar ate achar deixou de ser aceitavel. As faixas de
   preco sao links (um toque aplica) e a ordenacao e um select nativo, que no
   celular abre o seletor do proprio sistema: nenhum menu desenhado fica melhor
   do que isso num aparelho de verdade.
--------------------------------------------------------------------------- */
.filtros { margin-bottom: 18px; }
.filtros-linha {
	display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px;
	scrollbar-width: none; -ms-overflow-style: none;
	margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.filtros-linha::-webkit-scrollbar { display: none; }
.filtro-chip {
	flex: none; white-space: nowrap; text-decoration: none;
	background: var(--superficie); border: 1.5px solid var(--linha);
	color: var(--tinta-2); font-size: .86rem; font-weight: 600;
	padding: 8px 14px; border-radius: 999px;
	transition: border-color .15s, color .15s, background .15s;
}
.filtro-chip:hover { border-color: var(--magenta); color: var(--magenta); }
.filtro-chip.on { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.filtros-rodape {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	border-top: 1px solid var(--linha); padding-top: 12px;
}
.filtros-conta { font-size: .88rem; color: var(--tinta-3); }
.filtros-conta strong { color: var(--tinta); font-size: 1rem; }
.filtros-conta a { color: var(--magenta); }

.filtros-ordem { display: flex; align-items: center; gap: 8px; }
.filtros-ordem label { font-size: .85rem; color: var(--tinta-3); font-weight: 500; margin: 0; display: inline; }
.filtros-ordem select {
	font: inherit; font-size: .88rem; font-weight: 600; color: var(--tinta);
	background: var(--superficie); border: 1.5px solid var(--linha);
	border-radius: var(--raio-p); padding: 8px 30px 8px 12px; cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23726a7e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
}
.filtros-ordem select:focus { border-color: var(--magenta); outline: none; }
@media (max-width: 480px) {
	.filtros-rodape { flex-direction: column; align-items: stretch; }
	.filtros-ordem { justify-content: space-between; }
	.filtros-ordem select { flex: 1; max-width: 62%; }
}

/* ------------------------------------------- guias: produto citado no texto
   O guia NAO manda direto para o link de afiliado. Manda para a pagina do
   produto aqui dentro, onde estao preco, beneficios e o botao. Assim o
   visitante decide com informacao na mao e a gente nao queima a visita num
   clique frio, que converte menos.
--------------------------------------------------------------------------- */
.citado {
	display: flex; gap: 14px; align-items: center;
	background: var(--superficie); border: 1px solid var(--linha);
	border-left: 4px solid var(--magenta);
	border-radius: var(--raio-p); padding: 14px; margin: 18px 0;
	text-decoration: none; color: inherit;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.citado:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: #ddd4e8; border-left-color: var(--magenta); }
.citado img { width: 76px; height: 76px; object-fit: contain; flex: none; background: var(--fundo-2); border-radius: 8px; }
.citado-texto { min-width: 0; }
.citado-nome { display: block; font-weight: 700; font-size: .96rem; line-height: 1.3; margin-bottom: 4px; }
.citado-meta { display: block; font-size: .85rem; color: var(--tinta-3); }
.citado-meta b { color: var(--tinta); font-size: 1rem; }
.citado-ver { display: block; margin-top: 5px; font-size: .85rem; font-weight: 700; color: var(--magenta); }

.faq { margin-top: 26px; }
.faq details {
	border: 1px solid var(--linha); border-radius: var(--raio-p);
	background: var(--superficie); margin-bottom: 8px; padding: 0;
}
.faq summary {
	cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: .96rem;
	list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--magenta); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding: 0 16px 14px; margin: 0; color: var(--tinta-2); font-size: .95rem; }