/*
Theme Name: ReciLar
Description: Tema custom do serviço ReciLar (YouGreen)
Version: 1.0.0
Text Domain: porta-a-porta
*/

/* ─────────────────────────────────────────────────────────────
   Base — aplica os tokens do design system aos elementos globais.
   Os tokens/@font-face vêm de assets/ds/ (carregado antes deste).

   Layout da one-page: mobile-first (só media queries min-width),
   composição editorial/assimétrica — ver docs/spec_onepage_produto.md.
   ───────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

:root {
	/* Distância entre a borda do container e a borda do viewport —
	   usada pelas fotos e painéis que sangram até a borda. */
	--bleed: max(var(--space-5), (100vw - var(--container-max)) / 2 + var(--space-5));
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	color: var(--text-primary);
	background: var(--surface-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	margin: 0 0 var(--space-4);
	color: var(--text-heading);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ── Layout utilitário ───────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.section { padding-block: var(--space-8); }
.section--alt { background: var(--surface-alt); }
.section--green { background: var(--surface-inverse); color: var(--text-on-green); }

#topo,
#como-funciona,
#verificar-cep { scroll-margin-top: var(--space-5); }

/* Kickers/eyebrows — linha de apoio em caixa alta com tracking aberto,
   ecoando a estrutura do logo ("SERVIÇO DE COLETA"). */
.abertura__kicker,
.narrativa__eyebrow,
.fechamento__eyebrow {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

/* Anotações de margem em Montserrat. */
.abertura__pergunta,
.fechamento__pergunta {
	margin: 0 0 var(--space-3) var(--space-2);
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--fence-green);
	transform: rotate(-2deg);
	transform-origin: left bottom;
	position: relative;
	z-index: 1;
}

/* ── Shell (header) ──────────────────────────────────────── */
.site-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-5);
	padding-block: var(--space-4);
}
.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a { color: var(--text-secondary); font-weight: var(--fw-medium); }

/* ─────────────────────────────────────────────────────────────
   Bloco 1 — Abertura
   Afirmação grande no alto-esquerdo; verificador de CEP deslocado
   abaixo-direita sobre um painel verde que sangra até a borda.
   ───────────────────────────────────────────────────────────── */
.abertura {
	padding-block: var(--space-6) var(--space-9);
	overflow-x: clip;
}
.abertura__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

/* Logo ReciLar abrindo o statement, com respiro abaixo. */
.abertura__marca { margin-bottom: clamp(24px, 4vw, 48px); }
.abertura__logo {
	display: block;
	width: clamp(200px, 28vw, 360px);
	max-width: 100%;
	height: auto;
}

.abertura__title {
	margin: 0 0 var(--space-5);
	font-size: clamp(2.75rem, 7vw, var(--fs-display));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	max-width: 14ch;
	text-wrap: balance;
}
.abertura__title em {
	font-style: italic;
	color: var(--fiery-glow);
}
.abertura__lead {
	margin: 0;
	font-size: var(--fs-body-lg);
	color: var(--text-secondary);
	max-width: 30rem;
}
.abertura__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding-bottom: 2px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
	border-bottom: 1.5px solid var(--border-strong);
}
.abertura__scroll:hover {
	color: var(--fiery-glow);
	border-color: var(--fiery-glow);
	text-decoration: none;
}

/* Verificador: o card assenta sobre um painel verde deslocado que
   corre por trás e sangra até a borda direita do viewport. */
.abertura__verificador { position: relative; }
.abertura__verificador::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--space-7);
	left: 10%;
	right: calc(-1 * var(--bleed));
	bottom: calc(-1 * var(--space-5));
	background: var(--fence-green);
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.abertura__verificador::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: calc(var(--space-4) - var(--bleed));
	bottom: calc(var(--space-3) - var(--space-5));
	width: 120px;
	aspect-ratio: 647 / 135;
	background: url("assets/img/logo-recilar-off-white.png") center / contain no-repeat;
	opacity: 0.28;
}
.abertura__verificador .cep-card { margin-right: var(--space-5); }

@media (min-width: 900px) {
	.abertura { padding-block: var(--space-7) var(--space-9); }
	.abertura__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-5);
		align-items: start;
	}
	/* O statement para na coluna 6 — uma calha de respiro antes do card —
	   e fica ABAIXO do card na pilha: o texto nunca cobre o verificador. */
	.abertura__statement {
		grid-column: 1 / 7;
		grid-row: 1;
		position: relative;
		z-index: 1;
		padding-top: var(--space-6);
	}
	/* Deslocado pra baixo: a composição fecha uma diagonal com o título. */
	.abertura__verificador {
		grid-column: 7 / 13;
		grid-row: 1;
		z-index: 2;
		margin-top: var(--space-9);
	}
	.abertura__verificador::before {
		left: -6%;
		bottom: calc(-1 * var(--space-6));
	}
	.abertura__verificador::after {
		bottom: calc(var(--space-3) - var(--space-6));
	}
	.abertura__verificador .cep-card { margin-right: var(--space-6); }
	/* A anotação em Montserrat escapa do card na direção do statement. */
	.abertura__pergunta { margin-left: calc(-1 * var(--space-6)); }
}

/* ─────────────────────────────────────────────────────────────
   Verificador de CEP — card (parcial reutilizado na abertura
   e, em versão compacta, no fechamento).
   ───────────────────────────────────────────────────────────── */
.cep-card {
	position: relative;
	z-index: 1;
	box-shadow: var(--shadow-md);
}

.cep-card__form,
.cep-card__wait-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.cep-card__submit { width: 100%; }

.cep-card__result { text-align: left; }
.cep-card__result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--action-primary);
	color: var(--text-on-green);
	font-size: 1.5rem;
	margin-bottom: var(--space-4);
}
.cep-card__result-title { margin-bottom: var(--space-3); }
.cep-card__result-text {
	color: var(--text-secondary);
	margin-bottom: var(--space-5);
}
.cep-card__result--wait .cep-card__wait-form { margin-top: var(--space-5); }

.cep-card__retry {
	display: inline-block;
	margin-top: var(--space-4);
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	color: var(--text-link);
	cursor: pointer;
	text-decoration: underline;
}
.cep-card__retry:hover { color: var(--text-link-hover); }

/* Versão compacta (fechamento): mesma peça, menos cerimônia. */
.cep-card--compact { padding: var(--space-5); }

@media (min-width: 560px) {
	.cep-card--compact .cep-card__form {
		flex-direction: row;
		align-items: flex-end;
	}
	.cep-card--compact .cep-card__form .field { flex: 1; }
	.cep-card--compact .cep-card__form .cep-card__submit { width: auto; }
}

/* ─────────────────────────────────────────────────────────────
   Bloco 2 — Como funciona
   Capítulos numerados: fotos sangrando até a borda, alternando
   lado e proporção; texto em colunas deslocadas.
   ───────────────────────────────────────────────────────────── */
.narrativa {
	padding-block: var(--space-9);
	overflow-x: clip;
}
.narrativa__head { margin-bottom: var(--space-8); }
.narrativa__title {
	margin: 0;
	font-size: clamp(1.9rem, 5.5vw, var(--fs-h1));
	max-width: 24ch;
}

.capitulo {
	position: relative;
	margin-bottom: var(--space-9);
}
.capitulo:last-child { margin-bottom: 0; }

/* Mobile: foto em sangria total (as duas bordas). */
.capitulo__media {
	margin-inline: calc(50% - 50vw);
	aspect-ratio: 4 / 3;
	border-radius: 0;
}
.capitulo--2 .capitulo__media { aspect-ratio: 16 / 10; }
.capitulo--3 .capitulo__media { aspect-ratio: 4 / 5; }
.capitulo--4 .capitulo__media { aspect-ratio: 16 / 9; }

.capitulo__body { position: relative; }
.capitulo--2 .capitulo__body,
.capitulo--4 .capitulo__body { margin-left: 10%; }

/* Numeral gigante vazado, invadindo a foto. */
.capitulo__num {
	display: block;
	position: relative;
	z-index: 1;
	margin-top: -0.55em;
	font-size: clamp(4.5rem, 16vw, 8.5rem);
	font-weight: var(--fw-bold);
	line-height: 0.9;
	letter-spacing: var(--ls-display);
	color: var(--fence-green-12);
	-webkit-text-stroke: 1.5px var(--fence-green-24);
}
.capitulo__title {
	margin: var(--space-2) 0 var(--space-3);
	font-size: clamp(1.5rem, 4.5vw, var(--fs-h2));
}
.capitulo__text {
	margin: 0;
	font-size: var(--fs-body-lg);
	color: var(--text-secondary);
	max-width: 34rem;
}

@media (min-width: 900px) {
	.capitulo {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-5);
		align-items: start;
	}
	.capitulo__media,
	.capitulo__body { grid-row: 1; }
	.capitulo__media { margin-inline: 0; }
	.capitulo--2 .capitulo__body,
	.capitulo--4 .capitulo__body { margin-left: 0; }

	/* Ímpares: foto sangra à esquerda, texto desce à direita. */
	.capitulo--1 .capitulo__media,
	.capitulo--3 .capitulo__media {
		margin-left: calc(-1 * var(--bleed));
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	}
	.capitulo--1 .capitulo__media { grid-column: 1 / 8; }
	.capitulo--1 .capitulo__body  { grid-column: 8 / 13; margin-top: var(--space-8); }
	.capitulo--3 .capitulo__media { grid-column: 1 / 7; }
	.capitulo--3 .capitulo__body  { grid-column: 7 / 13; margin-top: var(--space-7); }

	/* Pares: foto sangra à direita, texto encosta à esquerda. */
	.capitulo--2 .capitulo__media,
	.capitulo--4 .capitulo__media {
		margin-right: calc(-1 * var(--bleed));
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}
	.capitulo--2 .capitulo__media { grid-column: 6 / 13; }
	.capitulo--2 .capitulo__body  { grid-column: 1 / 6; align-self: center; }
	.capitulo--4 .capitulo__media { grid-column: 5 / 13; aspect-ratio: 21 / 10; }
	.capitulo--4 .capitulo__body  { grid-column: 1 / 5; align-self: end; margin-bottom: var(--space-6); }

	/* O numeral dos ímpares avança sobre a foto vizinha. */
	.capitulo--1 .capitulo__num,
	.capitulo--3 .capitulo__num { margin-left: calc(-1 * var(--space-8)); }
}

/* ── Foto editorial + placeholder por categoria ──────────── */
.foto {
	margin: 0;
	overflow: hidden;
	background: var(--macadamia-beige);
}
.foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.foto--placeholder {
	display: grid;
	place-items: center;
	background-color: var(--macadamia-beige);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(32, 67, 51, 0.05) 0 18px,
		transparent 18px 36px
	);
	border: 1.5px dashed var(--border-default);
}
.foto__tag {
	padding: 6px 14px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--fence-green);
	background: var(--venetian-lace);
	border: 1.5px dashed var(--border-default);
	border-radius: var(--radius-pill);
}

/* ─────────────────────────────────────────────────────────────
   Bloco 3 — Fechamento
   Verde profundo, frase editorial e o verificador compacto:
   o loop de volta à ação da abertura. Emenda no rodapé.
   ───────────────────────────────────────────────────────────── */
.fechamento {
	padding-block: var(--space-9) var(--space-8);
	background: var(--surface-inverse);
	color: var(--text-on-green);
	overflow-x: clip;
}
.fechamento__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}
.fechamento__eyebrow { color: var(--recilar-salvia); }
.fechamento__title {
	margin: 0 0 var(--space-5);
	font-size: clamp(2.25rem, 7vw, var(--fs-h1));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--text-on-green);
	max-width: 18ch;
}
.fechamento__title em {
	font-style: italic;
	color: var(--pumpkin-vapor);
}
.fechamento__nota {
	margin: 0;
	font-size: var(--fs-body-lg);
	color: color-mix(in srgb, var(--venetian-lace) 78%, transparent);
	max-width: 34rem;
}
.fechamento__pergunta { color: var(--pumpkin-vapor); }

/* Planos — dois cards de preço sobre o verde, com stagger editorial. */
.fechamento__planos {
	display: grid;
	gap: var(--space-5);
	align-items: start;
}
.fechamento__planos-titulo { grid-column: 1 / -1; margin-bottom: 0; }

.plano {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	width: 100%;
}
.plano__nome {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}
.plano__preco {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	margin: 0;
	font-weight: var(--fw-bold);
	line-height: 1;
}
.plano__moeda { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.plano__valor { font-size: clamp(2.25rem, 5vw, var(--fs-h1)); letter-spacing: var(--ls-heading); }
.plano__periodo { font-size: var(--fs-sm); color: var(--text-muted); }
.plano__nota {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	max-width: 26ch;
}

@media (min-width: 560px) {
	.fechamento__planos { grid-template-columns: 1fr 1fr; }
	/* O mensal desce em relação ao anual — mesmo stagger diagonal do resto da página. */
	.plano--mensal { margin-top: var(--space-6); }
}

@media (min-width: 900px) {
	.fechamento__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-5);
		row-gap: var(--space-7);
		align-items: start;
	}
	.fechamento__frase { grid-column: 1 / 8; grid-row: 1; }
	.fechamento__planos { grid-column: 1 / 8; grid-row: 2; }
	.fechamento__verificador { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: var(--space-7); }
}

/* ─────────────────────────────────────────────────────────────
   Rodapé — institucional, discreto, mesmo verde do fechamento.
   ───────────────────────────────────────────────────────────── */
.site-footer {
	padding-block: var(--space-8) var(--space-6);
	background: var(--surface-inverse);
	color: color-mix(in srgb, var(--venetian-lace) 72%, transparent);
	font-size: var(--fs-sm);
	border-top: 1px solid color-mix(in srgb, var(--venetian-lace) 16%, transparent);
}
.site-footer a {
	color: var(--text-on-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.site-footer a:hover { color: var(--pumpkin-vapor); }

.site-footer__inner {
	display: grid;
	gap: var(--space-6);
}
.site-footer__tagline {
	margin: var(--space-4) 0 0;
	max-width: 22rem;
}
.site-footer__label {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--venetian-lace);
}
.site-footer__col p { margin: 0 0 var(--space-2); }

.site-footer__yougreen {
	display: inline-block;
	margin-bottom: var(--space-3);
	text-decoration: none;
}
.site-footer__yougreen img {
	display: block;
	height: 26px;
	width: auto;
}
.site-footer__yougreen:hover { opacity: 0.8; }

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid color-mix(in srgb, var(--venetian-lace) 12%, transparent);
	font-size: var(--fs-xs);
}
.site-footer__legal p { margin: 0; }

@media (min-width: 720px) {
	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1.2fr;
		gap: var(--space-7);
	}
}