/* ==========================================================================
   Homepage Cortinar — seções exclusivas da página inicial
   Tokens, botões, container e barra de anúncio ficam em base.css (site-wide).
   ========================================================================== */

/* ---------- Base da home ---------- */
.cortinar-home {
	font-family: var(--f-sans);
	color: var(--c-grafite);
	overflow-x: hidden;
}
.cortinar-home * { box-sizing: border-box; }

/* ---------- Seções genéricas ---------- */
.section { padding-block: var(--sp-8); }
.section--cream { background: var(--c-creme); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-7); }
.section__title {
	font-family: var(--f-serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.12;
	color: var(--c-vinho);
	margin: 0 0 var(--sp-3);
}
.section__sub { font-size: 17px; color: var(--c-texto-2); line-height: 1.6; margin: 0; }
.section__cta { text-align: center; margin-top: var(--sp-7); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	position: relative;
	background:
		radial-gradient(120% 120% at 80% 0%, rgba(161,31,36,.55) 0%, transparent 55%),
		linear-gradient(135deg, #5e0102 0%, #800203 55%, #6a0102 100%);
	color: #fff;
	overflow: hidden;
}
.hero::before {
	/* motivo de cortina em SVG, sutil */
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
	mask-image: linear-gradient(90deg, transparent, #000 30%);
	opacity: .5;
	pointer-events: none;
}
.hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(44px, 6.5vw, 80px) var(--sp-4);
}
.hero__content { max-width: 700px; }
.hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 600;
	margin-bottom: var(--sp-3);
}
.hero__title {
	font-family: var(--f-serif);
	font-weight: 600;
	font-size: clamp(32px, 4.8vw, 54px);
	line-height: 1.08;
	margin: 0 0 var(--sp-3);
	color: #fff;
}
.hero__title em { color: var(--c-gold); font-style: italic; }
.hero__text {
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.55;
	color: rgba(255,255,255,.88);
	margin: 0 0 var(--sp-5);
	max-width: 560px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   BENEFÍCIOS
   ========================================================================== */
.benefits { background: #fff; border-bottom: 1px solid var(--c-borda); }
.benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	padding-block: var(--sp-6);
}
.benefit { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.benefit > div { min-width: 0; }
.benefit svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--c-vinho); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit strong { display: block; font-size: 15px; color: var(--c-grafite); }
.benefit span { display: block; font-size: 13px; color: var(--c-texto-2); }

/* ==========================================================================
   AMBIENTES
   ========================================================================== */
.ambientes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}
.ambiente-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-3);
	background: var(--c-creme);
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--c-grafite);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.ambiente-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); background: #fff; }
.ambiente-card__icon {
	width: 64px; height: 64px;
	display: grid; place-items: center;
	border-radius: var(--r-full);
	background: #fff;
	box-shadow: var(--sh-1);
	transition: background .3s var(--ease);
}
.ambiente-card:hover .ambiente-card__icon { background: var(--c-vinho); }
.ambiente-card__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--c-vinho); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease); }
.ambiente-card:hover .ambiente-card__icon svg { stroke: #fff; }
.ambiente-card__name { font-weight: 600; font-size: 17px; }

/* ==========================================================================
   PRODUTOS EM DESTAQUE
   ========================================================================== */
.produtos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}
.produto-card { min-width: 0; }
.produto-card {
	background: #fff;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.produto-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.produto-card__media {
	display: block;
	aspect-ratio: 4/5;
	background: var(--c-creme-2);
	overflow: hidden;
}
.produto-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.produto-card:hover .produto-card__media img { transform: scale(1.06); }
.produto-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-creme) 0%, var(--c-creme-2) 100%); }
.produto-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.produto-card__name { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0; }
.produto-card__name a { color: var(--c-grafite); text-decoration: none; }
.produto-card__name a:hover { color: var(--c-vinho); }
.produto-card__price { color: var(--c-vinho); font-weight: 700; font-size: 18px; margin-top: auto; }
.produto-card__price del { color: var(--c-texto-2); font-weight: 400; font-size: 14px; margin-right: 6px; }
.produto-card .btn { margin-top: var(--sp-2); }

/* ==========================================================================
   CTA SOB MEDIDA
   ========================================================================== */
.sobmedida {
	background:
		radial-gradient(100% 140% at 0% 100%, rgba(201,162,39,.20) 0%, transparent 50%),
		linear-gradient(120deg, #6a0102 0%, #800203 100%);
	color: #fff;
	padding-block: var(--sp-8);
}
.sobmedida__inner { text-align: center; }
.sobmedida__content { max-width: 680px; margin: 0 auto; }
.sobmedida__title {
	font-family: var(--f-serif);
	font-weight: 600;
	font-size: clamp(26px, 4vw, 42px);
	line-height: 1.15;
	margin: 0 0 var(--sp-3);
	color: #fff;
}
.sobmedida__text { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0 0 var(--sp-6); }
/* Card do simulador interativo dentro da seção — ocupa toda a largura para imersão */
.sobmedida__sim { width: 100%; margin: 0 auto; }
.sobmedida .container { max-width: 1340px; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.depoimentos { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.depo {
	background: #fff;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	margin: 0;
	box-shadow: var(--sh-1);
}
.depo__stars { color: var(--c-gold); font-size: 18px; letter-spacing: 2px; margin-bottom: var(--sp-3); }
.depo__quote { font-family: var(--f-serif); font-size: 19px; line-height: 1.5; font-style: italic; color: var(--c-grafite); margin: 0 0 var(--sp-4); }
.depo__author strong { display: block; font-size: 15px; color: var(--c-vinho); }
.depo__author span { display: block; font-size: 13px; color: var(--c-texto-2); }

/* ==========================================================================
   CONFIANÇA
   ========================================================================== */
.trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); text-align: center; }
.trust__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.trust__item svg { width: 40px; height: 40px; fill: none; stroke: var(--c-vinho); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--sp-1); }
.trust__item strong { font-size: 15px; color: var(--c-grafite); }
.trust__item span { font-size: 13px; color: var(--c-texto-2); line-height: 1.5; max-width: 240px; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
/* Progressive enhancement: só esconde quando o JS confirma que roda (.reveal-on no <html>).
   Sem JS ou com movimento reduzido, todo o conteúdo aparece normalmente. */
.reveal-on .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal-on .reveal { opacity: 1; transform: none; transition: none; }
	.btn, .ambiente-card, .lumi-card, .produto-card { transition: none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (min-width: 640px) {
	.depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ambientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}