/* ==========================================================================
   Brétema — landing.css
   Base: reset ligero, tokens locales (espejo de theme.json) y tipografía.
   ========================================================================== */

:root {
	--bre-verde: var(--wp--preset--color--verde, #2C4A34);
	--bre-verde-oscuro: var(--wp--preset--color--verde-oscuro, #1F3526);
	--bre-oro: var(--wp--preset--color--oro, #A9833E);
	--bre-oro-texto: #7E5F27; /* oro más oscuro para TEXTO: cumple AA (5.25:1) sobre crema */
	--bre-crema: var(--wp--preset--color--crema, #F6F1E6);
	--bre-texto: var(--wp--preset--color--texto, #26372B);
	--bre-salvia: var(--wp--preset--color--salvia, #8FA08C);
	--bre-pan: var(--wp--preset--color--pan, #9C6B3F);

	--bre-serif-display: var(--wp--preset--font-family--miller, "Miller Display", "Cormorant Garamond", Georgia, serif);
	--bre-serif-cuerpo: var(--wp--preset--font-family--lora, "Lora", Georgia, serif);
}

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

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

body {
	margin: 0;
	background-color: var(--bre-crema);
	color: var(--bre-texto);
	font-family: var(--bre-serif-cuerpo);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
	font-family: var(--bre-serif-display);
	font-weight: 400;
	color: var(--bre-verde);
	line-height: 1.1;
	margin: 0;
}

a { color: var(--bre-verde); }

/* ==========================================================================
   Secciones de la landing
   ========================================================================== */

.landing {
	max-width: 680px;
	margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 4rem);
}

/* Hero / logo */
.landing__hero { width: 100%; display: flex; justify-content: center; }
.landing__logo {
	width: min(360px, 82%);
	height: auto;
	background: #fff;
	padding: clamp(0.5rem, 2.5vw, 1rem);
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--bre-oro) 20%, transparent);
	box-shadow: 0 12px 34px -14px rgba(31, 53, 38, 0.30);
}

/* Anuncio */
.landing__anuncio { display: flex; flex-direction: column; gap: 0.6rem; }
.landing__title {
	font-size: clamp(2.6rem, 12vw, 5.25rem); /* suelo cabe en pantallas ~320px (palabra única) */
	letter-spacing: 0.01em;
	color: var(--bre-verde);
}
.landing__subtitle {
	margin: 0;
	font-family: var(--bre-serif-cuerpo);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: clamp(0.85rem, 2.6vw, 1.05rem);
	font-weight: 600;
	color: var(--bre-oro-texto);
	padding-left: 0.32em; /* compensa el tracking a la derecha */
}
.landing__claim {
	margin: 0.4rem 0 0;
	font-size: clamp(1.05rem, 3.4vw, 1.35rem);
	color: var(--bre-texto);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
}
.landing__claim em { font-style: italic; }
.landing__flor { color: var(--bre-oro); font-size: 0.9em; line-height: 1; }

/* Tarjeta del evento */
.landing__evento { width: 100%; }
.evento__card {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 4vw, 1.75rem);
	text-align: left;
	max-width: 460px;
	margin: 0 auto;
	padding: clamp(1.4rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2.25rem);
	border: 1.5px solid color-mix(in srgb, var(--bre-oro) 55%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, #fff 45%, var(--bre-crema));
}
.evento__icon { color: var(--bre-verde); flex: 0 0 auto; }
.evento__body { display: flex; flex-direction: column; gap: 0.15rem; }
.evento__fecha {
	margin: 0;
	font-family: var(--bre-serif-display);
	font-size: clamp(1.15rem, 4.2vw, 1.6rem); /* Miller es más ancha: cabe en una línea */
	font-weight: 400;
	color: var(--bre-verde);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.evento__hora {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.9rem;
	color: var(--bre-texto);
}
.evento__sep {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--bre-oro) 45%, transparent);
	margin: 0.6rem 0;
}
.evento__tipo {
	margin: 0;
	font-family: var(--bre-serif-display);
	font-size: clamp(1.15rem, 4vw, 1.4rem);
	color: var(--bre-verde);
}

/* Ubicación */
.landing__ubicacion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--bre-verde);
}
.ubicacion__pin { color: var(--bre-oro); }
.ubicacion__dir {
	margin: 0;
	font-size: clamp(1rem, 3vw, 1.15rem);
	letter-spacing: 0.03em;
	color: var(--bre-texto);
}
.ubicacion__dir strong {
	display: inline-block;
	margin-top: 0.15rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--bre-verde);
}

/* Pie */
.landing__footer {
	width: 100%;
	padding-top: clamp(1.5rem, 5vw, 2.5rem);
	border-top: 1px solid color-mix(in srgb, var(--bre-verde) 18%, transparent);
	color: color-mix(in srgb, var(--bre-texto) 70%, transparent);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}
.landing__footer p { margin: 0; }

/* Móvil: la tarjeta del evento apila icono + texto */
@media (max-width: 420px) {
	.evento__card { flex-direction: column; text-align: center; align-items: center; }
	.evento__body { align-items: center; }
}