/* =====================================================
   Lucio – ¿Qué pido?
   Solo dos colores: #646cff (azul) y #efeadc (crema).
   Sin degradados, sin contornos, sin colores extra.
   ===================================================== */

@font-face {
	font-family: 'Geist';
	src: url('../fonts/geist.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Evangelos';
	src: url('../fonts/evangelos.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Elegant';
	src: url('../fonts/elegant.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

.lucio-reco {
	--lr-azul: #646cff;
	--lr-crema: #efeadc;
	--lr-titulo: 'Geist', sans-serif;
	--lr-acento: 'Evangelos', serif;
	--lr-cuerpo: 'Elegant', monospace, serif;

	background: var(--lr-azul);
	color: var(--lr-crema);
	font-family: var(--lr-cuerpo);
	min-height: 88vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px);
	box-sizing: border-box;
	overflow: hidden;
}
.lucio-reco *,
.lucio-reco *::before,
.lucio-reco *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.lr-stage {
	width: 100%;
	max-width: 640px;
	text-align: center;
}

/* ---------- Transición entre pasos ---------- */
.lr-step {
	animation: lr-enter .45s ease both;
}
.lr-step.lr-leaving {
	animation: lr-leave .28s ease both;
}
@keyframes lr-enter {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes lr-leave {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-14px); }
}

/* ---------- Intro ---------- */
.lr-logo {
	width: clamp(180px, 40vw, 260px);
	height: auto;
	display: block;
	margin: 0 auto 8px;
	animation: lr-float 5s ease-in-out infinite;
}
@keyframes lr-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.lr-kicker {
	font-family: var(--lr-acento);
	font-size: clamp(18px, 3vw, 24px);
	letter-spacing: .04em;
	margin-bottom: 10px;
}
.lr-title {
	font-family: var(--lr-titulo);
	font-weight: 300;
	font-size: clamp(34px, 7vw, 56px);
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--lr-crema);
	margin-bottom: 18px;
}
.lr-sub {
	font-size: clamp(15px, 2.4vw, 18px);
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 auto 30px;
	opacity: .92;
}

/* ---------- Pregunta ---------- */
.lr-question {
	font-family: var(--lr-titulo);
	font-weight: 300;
	font-size: clamp(26px, 5.4vw, 40px);
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.lr-hint {
	font-family: var(--lr-acento);
	font-size: clamp(15px, 2.6vw, 19px);
	margin-bottom: 28px;
	opacity: .9;
}

.lr-options {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
}

.lr-btn {
	font-family: var(--lr-cuerpo);
	font-size: clamp(16px, 2.6vw, 19px);
	line-height: 1.35;
	background: var(--lr-crema);
	color: var(--lr-azul);
	border-radius: 999px;
	padding: 16px 28px;
	width: 100%;
	cursor: pointer;
	transition: transform .18s ease, opacity .18s ease;
	animation: lr-enter .45s ease both;
}
.lr-options .lr-btn:nth-child(1) { animation-delay: .05s; }
.lr-options .lr-btn:nth-child(2) { animation-delay: .12s; }
.lr-options .lr-btn:nth-child(3) { animation-delay: .19s; }
.lr-options .lr-btn:nth-child(4) { animation-delay: .26s; }

.lr-btn:hover { transform: translateY(-3px) scale(1.015); }
.lr-btn:active { transform: translateY(0) scale(.985); }
.lr-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--lr-azul), 0 0 0 6px var(--lr-crema);
}

.lr-btn--ghost {
	background: var(--lr-azul);
	color: var(--lr-crema);
}
.lr-btn--ghost:focus-visible {
	box-shadow: 0 0 0 3px var(--lr-crema);
}

/* ---------- Progreso ---------- */
.lr-progress {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 30px;
}
.lr-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--lr-crema);
	opacity: .3;
	transition: opacity .3s ease, transform .3s ease;
}
.lr-dot.lr-dot--on {
	opacity: 1;
	transform: scale(1.25);
}

/* ---------- Atrás ---------- */
.lr-back {
	font-family: var(--lr-cuerpo);
	font-size: 14px;
	background: transparent;
	color: var(--lr-crema);
	cursor: pointer;
	margin-top: 26px;
	opacity: .75;
	transition: opacity .2s ease;
	letter-spacing: .03em;
}
.lr-back:hover { opacity: 1; }
.lr-back:focus-visible { box-shadow: 0 0 0 2px var(--lr-crema); border-radius: 6px; }

/* ---------- Resultado ---------- */
.lr-result-kicker {
	font-family: var(--lr-acento);
	font-size: clamp(17px, 3vw, 22px);
	margin-bottom: 12px;
	animation: lr-enter .5s ease both;
}
.lr-result-name {
	font-family: var(--lr-titulo) !important;
	font-weight: 300 !important;
	font-size: clamp(38px, 8vw, 64px);
	line-height: 1;
	letter-spacing: -.01em;
	margin-bottom: 6px;
	animation: lr-enter .55s ease .1s both;
}
.lr-result-price {
	font-family: var(--lr-acento);
	font-size: clamp(20px, 4vw, 28px);
	margin-bottom: 22px;
	animation: lr-enter .55s ease .18s both;
}
.lr-result-desc {
	font-size: clamp(15px, 2.5vw, 18px);
	line-height: 1.65;
	max-width: 50ch;
	margin: 0 auto 26px;
	animation: lr-enter .55s ease .26s both;
}

.lr-why {
	background: var(--lr-crema);
	color: var(--lr-azul);
	border-radius: 22px;
	padding: 22px 26px;
	max-width: 52ch;
	margin: 0 auto 18px;
	text-align: left;
	animation: lr-enter .55s ease .34s both;
}
.lr-why-label {
	font-family: var(--lr-acento);
	font-size: 15px;
	letter-spacing: .05em;
	display: block;
	margin-bottom: 8px;
}
.lr-why-text {
	font-size: clamp(15px, 2.4vw, 17px);
	line-height: 1.6;
}

.lr-extra {
	font-size: clamp(13px, 2.2vw, 15px);
	line-height: 1.6;
	max-width: 48ch;
	margin: 0 auto 6px;
	opacity: .85;
	animation: lr-enter .55s ease .42s both;
}
.lr-extra strong { font-weight: 700; }

.lr-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
	animation: lr-enter .55s ease .5s both;
}
.lr-result-actions .lr-btn { width: auto; min-width: 200px; }

.lr-noscript {
	color: #efeadc;
	background: #646cff;
	padding: 32px;
	text-align: center;
	font-size: 16px;
}


/* ---------- Blindaje contra estilos del tema ----------
   Regla de oro: sobre azul todo es crema, sobre crema todo es azul.
   Ningún otro color entra aquí. */
.lucio-reco,
.lucio-reco h1, .lucio-reco h2, .lucio-reco h3,
.lucio-reco p, .lucio-reco span, .lucio-reco em,
.lucio-reco strong, .lucio-reco li, .lucio-reco a {
	color: var(--lr-crema) !important;
}
.lucio-reco .lr-title,
.lucio-reco .lr-question,
.lucio-reco .lr-result-name {
	color: var(--lr-crema) !important;
	background: transparent !important;
	text-shadow: none !important;
}
.lucio-reco .lr-btn {
	background: var(--lr-crema) !important;
	color: var(--lr-azul) !important;
	border: none !important;
	outline: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}
.lucio-reco .lr-btn--ghost {
	background: var(--lr-azul) !important;
	color: var(--lr-crema) !important;
}
.lucio-reco .lr-back {
	background: transparent !important;
	color: var(--lr-crema) !important;
}
.lucio-reco .lr-why,
.lucio-reco .lr-why p,
.lucio-reco .lr-why span {
	color: var(--lr-azul) !important;
}
.lucio-reco .lr-why {
	background: var(--lr-crema) !important;
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
	.lucio-reco *,
	.lucio-reco *::before,
	.lucio-reco *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (max-width: 480px) {
	.lr-result-actions .lr-btn { width: 100%; }
}