/* /reelsbot/ — identidade própria, leve, sem Bootstrap/Porto. Mobile-first. */
:root {
	--fundo: #F3F5F2;
	--tinta: #1C2421;
	--superficie: #FFFFFF;
	--suave: #5E6B66;
	--linha: #D5DCD8;
	--rec: #E5383B;
	--rec-escuro: #B9262A;
	--link: #2F6F5E;
	--titulo: 'Bricolage Grotesque', system-ui, sans-serif;
	--texto: 'Atkinson Hyperlegible', system-ui, sans-serif;
	--medida: 38rem;
}

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

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font: 1.0625rem/1.6 var(--texto);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

h1, h2 { font-family: var(--titulo); line-height: 1.08; margin: 0 0 1rem; }
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); font-weight: 800; letter-spacing: -.025em; max-width: 16ch; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; }

.rascunho {
	margin: 0;
	padding: .6rem 1rem;
	background: #FFF3C4;
	color: #5A4500;
	font-size: .9rem;
	text-align: center;
}

.topo, main, .rodape { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1rem; }

.topo {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}
.marca { font-family: var(--titulo); font-weight: 700; color: var(--tinta); text-decoration: none; }
.migalhas { font-size: .9rem; color: var(--suave); }
.migalhas a { color: var(--suave); }

/* Abertura: título + quadro de gravação */
.abertura {
	display: grid;
	gap: 2.5rem;
	padding: 1.5rem 0 3.5rem;
}
.lead { font-size: 1.15rem; color: var(--suave); max-width: var(--medida); margin: 0 0 1.75rem; }

.botao {
	display: inline-block;
	padding: .95rem 1.4rem;
	background: var(--rec);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: background .15s ease;
}
.botao:hover { background: var(--rec-escuro); }
.botao:focus-visible { outline-color: var(--tinta); }
.aviso-curto { font-size: .85rem; color: var(--suave); margin: .75rem 0 0; }

.quadro { margin: 0; justify-self: center; width: 100%; max-width: 21rem; }
.quadro-tela {
	aspect-ratio: 9 / 16;
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.1rem 1.3rem;
	background: var(--tinta);
	color: #EEF2EF;
	border-radius: 1.75rem;
	box-shadow: 0 0 0 6px #fff, 0 24px 48px -24px rgba(28, 36, 33, .55);
}
.quadro-barra { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #AEB9B4; }
.rec { width: .7rem; height: .7rem; border-radius: 50%; background: var(--rec); animation: rec 1.6s ease-in-out infinite; }
.quadro-tempo { margin-left: auto; font-variant-numeric: tabular-nums; }
.quadro-tema {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.15;
	margin: 1.1rem 0 1.25rem;
}
.cenas { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .85rem; }
.cenas li {
	display: grid;
	grid-template-columns: 4.1rem 1fr;
	gap: 0 .6rem;
	padding-top: .7rem;
	border-top: 1px solid rgba(238, 242, 239, .14);
	font-size: .9rem;
	line-height: 1.4;
}
.cena-tempo { grid-row: span 2; color: #AEB9B4; font-variant-numeric: tabular-nums; }
.cena-nome { color: #fff; }
.cena-fala { color: #CBD4D0; }
.quadro figcaption { margin-top: 1rem; font-size: .85rem; color: var(--suave); text-align: center; }

@keyframes rec { 50% { opacity: .25; } }

/* Seções */
.secao { max-width: var(--medida); padding: 2.5rem 0; border-top: 1px solid var(--linha); }

.dores { margin: 0; padding-left: 1.2rem; }
.dores li { margin-bottom: .5rem; }

.entregas { margin: 0; display: grid; gap: 1rem; }
.entregas div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; }
.entregas dt { font-family: var(--titulo); font-weight: 700; }
.entregas dd { margin: 0; color: var(--suave); }

.passos { margin: 0; padding-left: 1.4rem; }
.passos li { margin-bottom: .6rem; padding-left: .25rem; }
.passos li::marker { font-family: var(--titulo); font-weight: 700; color: var(--rec); }

.precos table { width: 100%; border-collapse: collapse; }
.precos th, .precos td { padding: .7rem 0; border-bottom: 1px solid var(--linha); text-align: left; }
.precos th { font-weight: 400; color: var(--suave); }
.precos td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.nota { font-size: .85rem; color: var(--suave); }

.faq { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; padding: .9rem 0; font-weight: 700; }
.faq p { margin: 0 0 1rem; color: var(--suave); }

.fechamento {
	margin: 1rem 0;
	padding: 2.5rem 1.5rem;
	background: var(--superficie);
	border-radius: 1.25rem;
}
.fechamento p { color: var(--suave); max-width: var(--medida); }
.fechamento .passos { max-width: var(--medida); margin-bottom: 1.75rem; }

.transparencia p { font-size: .95rem; color: var(--suave); }

.rodape { padding-top: 2rem; padding-bottom: 3rem; font-size: .9rem; }
.rodape a { color: var(--suave); }

@media (min-width: 52rem) {
	.abertura { grid-template-columns: 1fr auto; gap: 4rem; align-items: center; padding: 1.5rem 0 5rem; }
	h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
	.quadro { justify-self: end; width: 17.5rem; }
	.quadro-tema { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rec { animation: none; }
	.botao { transition: none; }
}

.ideias h3 { font-family: var(--titulo); font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.ideias > p { color: var(--suave); }