/* ==================================================================
   Portada «La consulta»
   ================================================================== */

/* Cabecera flotante sobre la escena */
.la-cine-home .la-header {
	position: fixed;
	left: 0;
	right: 0;
	background: linear-gradient(rgba(6, 5, 14, 0.75), rgba(6, 5, 14, 0));
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html[data-cine-zone="page"] .la-cine-home .la-header {
	background: rgba(10, 9, 24, 0.9);
	border-bottom-color: var(--la-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------------
   Escenario fijo
   ------------------------------------------------------------------ */
.la-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: #07060b;
	overflow: hidden;
}
.la-stage.is-hidden { visibility: hidden; }
.la-stage__poster,
.la-stage__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.la-stage__poster {
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s var(--la-ease);
}
.la-stage__poster.is-on { opacity: 1; }
.la-stage__canvas { display: block; opacity: 0; transition: opacity 1.4s var(--la-ease); }
.la-stage.is-live .la-stage__canvas { opacity: 1; }
.la-stage.is-live .la-stage__poster { opacity: 0; transition-delay: 1.4s; }
.la-capture .la-stage__poster { display: none; }
.la-capture .la-stage__canvas { opacity: 1; transition: none; }
.la-capture .la-home,
.la-capture .la-header,
.la-capture .la-callbar,
.la-capture .la-stage__veil { visibility: hidden; }

/* Velo de lectura: protege el texto a la izquierda sin apagar la escena */
.la-stage__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(6, 5, 14, 0.8) 0%, rgba(6, 5, 14, 0.45) 34%, rgba(6, 5, 14, 0) 58%),
		linear-gradient(0deg, rgba(6, 5, 14, 0.6) 0%, rgba(6, 5, 14, 0) 30%);
}
@media (max-aspect-ratio: 4/5) {
	.la-stage__veil {
		background: linear-gradient(0deg, rgba(6, 5, 14, 0.92) 0%, rgba(6, 5, 14, 0.7) 38%, rgba(6, 5, 14, 0) 62%);
	}
}

/* ------------------------------------------------------------------
   Escenas
   ------------------------------------------------------------------ */
.la-home { position: relative; z-index: 1; }
.la-home > section:not(.la-cine):not(.la-closing) { position: relative; background: var(--la-night); }

.la-scene {
	position: relative;
	min-height: 120vh;
	display: flex;
	align-items: center;
	max-width: var(--la-wrap);
	margin: 0 auto;
	padding: 120px var(--la-gutter);
}
.la-scene--intro { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding-bottom: 16vh; }
.la-scene--reading { min-height: 150vh; }
.la-scene__copy { max-width: 500px; }
.la-scene--intro .la-scene__copy { max-width: 620px; }
.la-scene--intro .la-display { font-size: clamp(2.9rem, 6.6vw, 5.6rem); }
.la-scene .la-display { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }
.la-scene p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.la-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	margin-right: 8px;
	border: 1px solid var(--la-line-2);
	border-radius: 50%;
	font-size: 11px;
	letter-spacing: 0.06em;
}

/* Entrada del texto ligada a la escena activa (solo con JS) */
.la-js .la-scene__copy {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 1s var(--la-ease), transform 1.2s var(--la-ease);
}
.la-js .la-scene.is-current .la-scene__copy { opacity: 1; transform: none; }

.la-online { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 15px; }
.la-online strong { color: var(--la-ink); font-weight: 500; }
.la-dot {
	position: relative;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--la-ok);
	box-shadow: 0 0 0 0 rgba(143, 224, 176, 0.6);
	animation: la-pulse 2.4s infinite;
}
@keyframes la-pulse {
	0% { box-shadow: 0 0 0 0 rgba(143, 224, 176, 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(143, 224, 176, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 224, 176, 0); }
}
.la-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--la-muted); }
.la-trust li { display: inline-flex; align-items: center; gap: 7px; }
.la-trust .la-icon { color: var(--la-gold-2); width: 17px; height: 17px; }

.la-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--la-caps);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(244, 236, 219, 0.6);
	text-align: center;
	white-space: nowrap;
}
.la-scroll-cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 44px;
	margin: 12px auto 0;
	background: linear-gradient(var(--la-gold-2), rgba(240, 213, 149, 0));
	transform-origin: top;
	animation: la-cue 2.6s var(--la-ease) infinite;
}
@keyframes la-cue {
	0% { transform: scaleY(0); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.la-scroll-cue::after,
	.la-dot { animation: none; }
}

/* Tirada: tres cartas en HTML (manejan la escena y son el respaldo sin WebGL) */
.la-spread { display: flex; gap: 14px; margin-top: 26px; }
.la-spread__card {
	flex: 1;
	max-width: 132px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--la-ink);
	text-align: center;
	cursor: pointer;
	perspective: 600px;
}
.la-spread__card canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 70 / 120;
	border-radius: 6px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(240, 213, 149, 0.25);
	transition: transform 0.6s var(--la-ease), box-shadow 0.4s var(--la-ease);
}
.la-spread__card:hover canvas { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 26px rgba(240, 213, 149, 0.35); }
.la-spread__card.is-drawn canvas { animation: la-flip 0.7s var(--la-ease); }
@keyframes la-flip {
	0% { transform: rotateY(0); }
	50% { transform: rotateY(90deg); }
	100% { transform: rotateY(0); }
}
.la-spread__slot { display: block; margin-top: 10px; font-family: var(--la-caps); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--la-gold-2); }
.la-spread__name { display: block; font-size: 13.5px; color: var(--la-ink-2); }
.la-spread__card.is-drawn .la-spread__name { color: var(--la-ink); font-weight: 500; }

.la-reading {
	margin-top: 24px;
	padding: 22px 24px;
	border: 1px solid var(--la-line-2);
	border-radius: var(--la-radius);
	background: rgba(10, 9, 24, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.la-reading__slot { margin: 0; font-family: var(--la-caps); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--la-gold-2); }
.la-reading__name { margin: 4px 0 2px; font-size: 1.9rem; outline: none; }
.la-reading__key { margin: 0 0 10px; font-style: italic; font-family: var(--la-display); font-size: 1.2rem; color: var(--la-gold-2); }
.la-reading__text { margin: 0; }
.la-reading .la-actions { margin-top: 18px; }
.la-note { font-size: 13.5px; color: var(--la-muted); margin-top: 18px; }

/* Caras del gabinete en la escena III */
.la-faces { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.la-faces li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; }
.la-faces canvas { width: 34px; height: auto; aspect-ratio: 70 / 120; border-radius: 3px; box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.3); }
.la-faces strong { color: var(--la-ink); font-weight: 500; margin-right: 4px; }
.la-faces li.is-on strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--la-ok); vertical-align: 2px; }

.la-chips--signs { max-width: 470px; }
.la-chips--signs .la-chip { min-height: 38px; padding: 6px 14px; font-size: 13.5px; }

/* ------------------------------------------------------------------
   Secciones
   ------------------------------------------------------------------ */
.la-section-head { max-width: 760px; margin-bottom: 44px; }
.la-section-head--split { display: flex; max-width: none; align-items: flex-end; justify-content: space-between; gap: 40px; }
.la-section-head--split > p { max-width: 420px; margin: 0 0 14px; color: var(--la-muted); }
.la-home > section:not(.la-cine):not(.la-closing) { padding: 110px 0; }
/* Polvo de estrellas muy tenue en las secciones (sin imágenes) */
.la-home > section:not(.la-cine):not(.la-closing)::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.55;
	background-image:
		radial-gradient(1px 1px at 12% 18%, rgba(244, 236, 219, 0.55), transparent 60%),
		radial-gradient(1px 1px at 68% 8%, rgba(244, 236, 219, 0.45), transparent 60%),
		radial-gradient(1.4px 1.4px at 86% 42%, rgba(240, 213, 149, 0.6), transparent 60%),
		radial-gradient(1px 1px at 34% 64%, rgba(244, 236, 219, 0.35), transparent 60%),
		radial-gradient(1px 1px at 52% 88%, rgba(244, 236, 219, 0.4), transparent 60%),
		radial-gradient(1.2px 1.2px at 7% 82%, rgba(154, 134, 255, 0.55), transparent 60%),
		radial-gradient(1px 1px at 93% 76%, rgba(244, 236, 219, 0.4), transparent 60%);
	background-size: 420px 420px;
}
.la-home > section > .la-wrap { position: relative; }
.la-home > section + section:not(.la-closing) { border-top: 1px solid var(--la-line); }

/* Primera consulta */
.la-lead-section {
	background:
		radial-gradient(ellipse 60% 70% at 85% 40%, rgba(122, 92, 255, 0.16), rgba(122, 92, 255, 0) 70%),
		radial-gradient(ellipse 50% 60% at 10% 90%, rgba(212, 170, 92, 0.1), rgba(212, 170, 92, 0) 70%),
		var(--la-night) !important;
}
.la-lead-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 64px; align-items: start; }
.la-ticks { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.la-ticks li { position: relative; padding-left: 30px; }
.la-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 16px;
	height: 16px;
	background: var(--la-gold-2);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.la-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 8px; font-size: 1.05rem; }
.la-callout a { font-variant-numeric: lining-nums; display: inline-flex; align-items: center; gap: 8px; font-family: var(--la-display); font-size: 1.9rem; font-weight: 600; color: var(--la-ink); text-decoration: none; }
.la-callout a:hover { color: var(--la-gold-2); }

.la-form-card {
	position: relative;
	padding: 32px;
	border: 1px solid var(--la-line-2);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(36, 28, 72, 0.75), rgba(16, 13, 36, 0.92));
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.la-form-card::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(240, 213, 149, 0.1);
	border-radius: 14px;
	pointer-events: none;
}
.la-reading-note { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(240, 213, 149, 0.08); font-size: 14px; }
.la-reading-note strong { color: var(--la-gold-2); font-weight: 500; }
.la-done { padding: 12px 4px; outline: none; }
.la-done h3 { font-size: 2.2rem; margin: 0.3em 0; }

/* Tarotistas */
.la-reader-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.la-reader {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 22px;
	padding: 24px;
	border: 1px solid var(--la-line);
	border-radius: var(--la-radius);
	background: linear-gradient(170deg, var(--la-night-3), var(--la-night-2));
	transition: border-color 0.4s var(--la-ease), transform 0.4s var(--la-ease);
}
.la-reader:hover { border-color: var(--la-line-2); transform: translateY(-3px); }
.la-reader__card canvas { display: block; width: 96px; height: auto; aspect-ratio: 70 / 120; border-radius: 5px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 213, 149, 0.3); }
.la-reader h3 { margin: 4px 0 0; font-size: 2rem; }
.la-reader__spec { margin: 0; color: var(--la-gold-2); font-size: 15px; }
.la-reader__quote { margin: 10px 0 12px; font-family: var(--la-display); font-style: italic; font-size: 1.12rem; color: var(--la-ink-2); }
.la-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--la-muted); }
.la-reader:not(.is-on) .la-dot { background: rgba(244, 236, 219, 0.3); animation: none; }
.la-reader.is-on .la-status { color: var(--la-ok); }
.la-reader__meta { margin: 0 0 16px; display: grid; gap: 2px; font-size: 13.5px; }
.la-reader__meta div { display: flex; gap: 8px; }
.la-reader__meta dt { min-width: 92px; color: var(--la-muted); }
.la-reader__meta dd { margin: 0; color: var(--la-ink-2); }
.la-reader__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cómo funciona */
.la-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.la-steps li { padding: 30px 28px; border: 1px solid var(--la-line); border-radius: var(--la-radius); background: var(--la-night-2); }
.la-steps h3 { font-size: 2rem; margin: 18px 0 8px; }
.la-steps p { margin: 0; }
.la-steps__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--la-line-2);
	border-radius: 50%;
	font-family: var(--la-caps);
	color: var(--la-gold-2);
}

/* Tarifas */
.la-prices__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.la-price-box { padding: 30px; border: 1px solid var(--la-line); border-radius: var(--la-radius); background: var(--la-night-2); }
.la-price-box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--la-caps); font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--la-gold-2); }
.la-packs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.la-packs li {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 18px 14px;
	border: 1px solid var(--la-line);
	border-radius: 12px;
	text-align: center;
}
.la-packs li.is-featured { border-color: var(--la-gold-2); background: rgba(240, 213, 149, 0.07); }
.la-packs__min { font-variant-numeric: lining-nums; font-family: var(--la-display); font-size: 2.2rem; line-height: 1; color: var(--la-ink); }
.la-packs__min small { font-family: var(--la-sans); font-size: 13px; color: var(--la-muted); }
.la-packs__price { font-size: 1.15rem; font-weight: 600; color: var(--la-gold-2); }
.la-packs__note { font-size: 12.5px; color: var(--la-muted); }
.la-806 { margin: 0; font-variant-numeric: lining-nums; font-family: var(--la-display); font-size: 2.8rem; line-height: 1.1; color: var(--la-ink); }
.la-price-box--806 .la-btn { margin-top: 10px; }

/* Horóscopo */
.la-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.la-tabs button {
	min-height: 42px;
	padding: 8px 16px;
	border: 1px solid var(--la-line);
	border-radius: 999px;
	background: transparent;
	color: var(--la-ink-2);
	font: 500 14px/1 var(--la-sans);
	cursor: pointer;
	transition: background 0.3s var(--la-ease), border-color 0.3s, color 0.3s;
}
.la-tabs button:hover { border-color: var(--la-gold-2); }
.la-tabs button[aria-selected="true"] { background: var(--la-gold-2); border-color: var(--la-gold-2); color: #1b1307; }
.la-sign { padding: 32px; border: 1px solid var(--la-line); border-radius: var(--la-radius); background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(122, 92, 255, 0.14), rgba(122, 92, 255, 0) 70%), var(--la-night-2); }
.la-sign__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.la-sign__head h3 { margin: 0; font-size: 2.6rem; }
.la-sign__head p { margin: 0; color: var(--la-muted); }
.la-sign__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 20px; }
.la-sign__grid dt { font-family: var(--la-caps); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--la-gold-2); margin-bottom: 6px; }
.la-sign__grid dd { margin: 0; }
.la-sign__luck { font-size: 14px; color: var(--la-muted); }

/* Opiniones */
.la-review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.la-review-grid blockquote { margin: 0; height: 100%; padding: 28px; border: 1px solid var(--la-line); border-radius: var(--la-radius); background: var(--la-night-2); }
.la-review-grid p { margin: 0 0 16px; font-family: var(--la-display); font-size: 1.35rem; line-height: 1.35; color: var(--la-ink); }
.la-review-grid footer { font-size: 13.5px; color: var(--la-muted); }
.la-review-grid footer strong { color: var(--la-gold-2); font-weight: 500; }
.la-sample { margin-top: 18px; }

/* Preguntas */
.la-faq__item { border-bottom: 1px solid var(--la-line); }
.la-faq__item summary {
	position: relative;
	padding: 22px 40px 22px 0;
	font-family: var(--la-display);
	font-size: 1.45rem;
	color: var(--la-ink);
	cursor: pointer;
	list-style: none;
}
.la-faq__item summary::-webkit-details-marker { display: none; }
.la-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--la-sans);
	font-size: 22px;
	color: var(--la-gold-2);
	transition: transform 0.3s var(--la-ease);
}
.la-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.la-faq__item p { margin: 0 0 22px; max-width: 46em; }
.la-faq__item[open] p { animation: la-tab-in 0.4s var(--la-ease) both; }

/* Cierre sobre la escena */
.la-closing {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 120px var(--la-gutter);
}
.la-closing__copy { max-width: var(--la-wrap); width: 100%; margin: 0 auto; }
.la-closing .la-display { font-size: clamp(2.8rem, 6vw, 5rem); max-width: 8em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.la-lead-grid { grid-template-columns: 1fr; gap: 40px; }
	.la-steps { grid-template-columns: 1fr; }
	.la-prices__grid { grid-template-columns: 1fr; }
	.la-sign__grid { grid-template-columns: 1fr; gap: 16px; }
	.la-section-head--split { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (max-width: 640px) {
	.la-scene { min-height: 125vh; align-items: flex-end; padding-bottom: 14vh; }
	.la-scene--intro { padding-bottom: 12vh; }
	.la-scene--reading { min-height: 160vh; }
	.la-home > section:not(.la-cine):not(.la-closing) { padding: 80px 0; }
	.la-packs { grid-template-columns: repeat(2, 1fr); }
	.la-reader-grid { grid-template-columns: 1fr; }
	.la-reader { grid-template-columns: 72px 1fr; gap: 16px; padding: 20px; }
	.la-reader__card canvas { width: 72px; }
	.la-form-card { padding: 22px 18px; }
	.la-spread { gap: 10px; }
	.la-trust { gap: 6px 16px; }
	.la-sign { padding: 22px; }
	.la-closing { align-items: flex-end; padding-bottom: 18vh; }
}

/* ------------------------------------------------------------------
   Formas de consultar
   ------------------------------------------------------------------ */
.la-ways {
	background:
		radial-gradient(ellipse 45% 55% at 20% 30%, rgba(122, 92, 255, 0.14), rgba(122, 92, 255, 0) 70%),
		radial-gradient(ellipse 40% 50% at 85% 80%, rgba(212, 170, 92, 0.1), rgba(212, 170, 92, 0) 70%),
		var(--la-night) !important;
}
.la-ways__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.la-ways__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.la-way {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--la-line);
	border-radius: 26px;
	background: linear-gradient(170deg, var(--la-night-3), var(--la-night-2));
	transition: border-color 0.4s var(--la-ease), transform 0.5s var(--la-ease), box-shadow 0.5s var(--la-ease);
}
.la-way:hover { border-color: var(--la-line-2); transform: translateY(-6px); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.8), 0 0 50px -24px rgba(154, 134, 255, 0.5); }
.la-way.is-featured { border-color: rgba(240, 213, 149, 0.45); box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.12), 0 34px 70px -34px rgba(212, 170, 92, 0.55); }
.la-way.is-featured:hover { box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.25), 0 40px 80px -34px rgba(212, 170, 92, 0.7); }

/* Vista previa viva de cada forma de consultar (mismos componentes que la maqueta del móvil) */
.la-way__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	height: 216px;
	padding: 20px 18px;
	overflow: hidden;
	border-bottom: 1px solid var(--la-line);
	border-radius: 25px 25px 0 0;
	background:
		radial-gradient(60% 70% at 85% 5%, rgba(130, 96, 255, 0.5), rgba(130, 96, 255, 0) 70%),
		radial-gradient(55% 60% at 10% 100%, rgba(224, 176, 92, 0.24), rgba(224, 176, 92, 0) 70%),
		#0d0b24;
	font-size: 12.5px;
}
.la-way__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(1px 1px at 14% 20%, #fff, transparent), radial-gradient(1px 1px at 78% 30%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 62% 12%, #f6e1a6, transparent), radial-gradient(1px 1px at 32% 64%, #fff, transparent),
		radial-gradient(1px 1px at 90% 72%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 88%, #f6e1a6, transparent);
	opacity: 0.7;
}
.la-way__visual > * { position: relative; z-index: 1; animation: la-drift 6s ease-in-out infinite; }
.la-way__visual > :nth-child(2) { animation-delay: -1.5s; }
.la-way__visual > :nth-child(3) { animation-delay: -3s; }
@keyframes la-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.la-way__visual .la-msg { max-width: 86%; padding: 8px 11px; }
.la-way__visual .la-msg--in { align-self: flex-start; }
.la-way__visual .la-typing { padding: 8px 10px; }
.la-way__visual .la-letter,
.la-way__visual .la-post { padding: 12px 14px; }
.la-way__visual .la-letter__q { font-size: 15px; }
.la-way__visual .la-post__q { font-size: 15px; }
.la-way__who { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.la-way__who strong { display: block; color: var(--la-ink); font-weight: 500; font-size: 13px; }
.la-way__who small { color: var(--la-ok); font-size: 11px; }
.la-way__seal {
	position: absolute !important;
	right: 18px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #4a330d;
	background: radial-gradient(circle at 34% 30%, #fbe9b8, #d4aa5c 55%, #8a6322);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.5);
	transform: rotate(-12deg);
}
.la-way__seal .la-icon { width: 22px; height: 22px; }

.la-way__body { position: relative; display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 26px; }
.la-way__badge {
	position: absolute;
	top: -14px;
	right: 20px;
	padding: 6px 12px;
	border-radius: 999px;
	color: #1b1307;
	background: linear-gradient(135deg, #f6e1a6, #d4aa5c);
	box-shadow: 0 8px 20px -8px rgba(212, 170, 92, 0.8);
	font-family: var(--la-caps);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.la-way__price {
	margin: 0 0 14px !important;
	padding: 5px 11px;
	border: 1px solid rgba(240, 213, 149, 0.35);
	border-radius: 999px;
	color: var(--la-gold-2);
	font-family: var(--la-caps);
	font-size: 11.5px !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.la-way--publica .la-way__price { color: var(--la-ok); border-color: rgba(120, 220, 170, 0.35); }
.la-way h3 { margin: 0 0 8px; font-size: 1.9rem; }
.la-way__body > p:not(.la-way__price) { margin: 0; font-size: 15px; }
.la-way__perks { margin: 18px 0 24px; font-size: 14.5px; color: var(--la-ink); }
.la-way .la-btn { margin-top: auto; }
.la-way__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: auto;
	border: 1px solid var(--la-line-2);
	border-radius: 50%;
	color: var(--la-gold-2);
}
.la-ways__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 36px 0 0; padding: 0; color: var(--la-muted); font-size: 14px; }
.la-ways__trust li { display: flex; align-items: center; gap: 8px; }
.la-ways__trust .la-icon { color: var(--la-gold-2); }
@media (prefers-reduced-motion: reduce) {
	.la-way__visual > * { animation: none; }
}

/* ------------------------------------------------------------------
   Preguntas públicas
   ------------------------------------------------------------------ */
.la-community__grid { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: start; }
.la-ask__title { margin: 0; font-size: 1.7rem; }
.la-ask textarea { min-height: 120px; }
.la-feed__filters { margin: 0 0 6px; }
.la-feed__filters .la-chip { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.la-qa-list { list-style: none; margin: 0 0 22px; padding: 0; }
.la-feed__empty { color: var(--la-muted); }
.la-private-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--la-line); font-size: 14px; }
.la-private-line .la-icon { color: var(--la-gold-2); }

@media (max-width: 1080px) {
	.la-ways__grid, .la-ways__grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
	.la-community__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.la-way__visual { height: 196px; }
	.la-way__body { padding: 22px 20px 24px; }
	.la-ways__trust { justify-content: flex-start; flex-direction: column; }
}

/* Únete como experto */
.la-join {
	background:
		radial-gradient(ellipse 55% 70% at 10% 30%, rgba(122, 92, 255, 0.14), rgba(122, 92, 255, 0) 70%),
		var(--la-night) !important;
}

/* ------------------------------------------------------------------
   La plataforma: maqueta viva del chat, la pregunta privada y la pública
   ------------------------------------------------------------------ */
.la-platform {
	overflow: hidden;
	background:
		radial-gradient(ellipse 50% 60% at 78% 45%, rgba(122, 92, 255, 0.18), rgba(122, 92, 255, 0) 70%),
		radial-gradient(ellipse 40% 50% at 70% 70%, rgba(212, 170, 92, 0.12), rgba(212, 170, 92, 0) 70%),
		var(--la-night) !important;
}
.la-platform__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.la-platform__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 5px; border: 1px solid var(--la-line); border-radius: 999px; background: rgba(10, 9, 24, 0.5); }
.la-platform__tabs button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--la-ink-2); font: 500 14px/1 var(--la-sans); cursor: pointer; transition: background 0.3s var(--la-ease), color 0.3s; }
.la-platform__tabs button[aria-selected="true"] { background: var(--la-gold-2); color: #1b1307; }
/* Píldora dorada que se desliza hasta la pestaña activa (la coloca site.js) */
.la-platform__tabs { position: relative; }
.la-platform__tabs button { position: relative; z-index: 1; }
.la-platform__pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--la-gold-2); box-shadow: 0 6px 18px -6px rgba(212, 170, 92, 0.7); }
.la-platform__tabs.has-pill .la-platform__pill { transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.4, 1), width 0.55s cubic-bezier(0.3, 1.25, 0.4, 1); }
.la-platform__tabs.has-pill button[aria-selected="true"] { background: transparent; }
.la-platform__desc:not([hidden]),
.la-app__screen.is-on,
.la-app__who:not([hidden]) { animation: la-tab-in 0.5s var(--la-ease) both; }
@keyframes la-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.la-platform__desc { min-height: 3.2em; margin: 16px 0 0; color: var(--la-ink); font-size: 1.05rem; }
.la-platform__trust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.la-platform__trust li { display: flex; gap: 12px; align-items: flex-start; }
.la-platform__trust .la-icon { margin-top: 3px; color: var(--la-gold-2); }
.la-platform__trust strong { display: block; color: var(--la-ink); font-weight: 500; }
.la-platform__note { margin-top: 30px; text-align: right; }

.la-platform__stage { position: relative; display: grid; place-items: center; min-height: 640px; perspective: 1500px; perspective-origin: 50% 40%; }
/* Portal detrás del móvil: el mismo anillo del logo */
.la-orbit {
	position: absolute;
	width: 540px;
	height: 540px;
	border-radius: 50%;
	border: 1px solid rgba(240, 213, 149, 0.22);
	background: radial-gradient(circle, rgba(122, 92, 255, 0.14), rgba(122, 92, 255, 0) 62%);
	box-shadow: inset 0 0 80px rgba(240, 213, 149, 0.06);
}
.la-orbit::before,
.la-orbit::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; border: 1px dashed rgba(240, 213, 149, 0.16); animation: la-spin 90s linear infinite; }
.la-orbit::after { inset: -1px; border: 0; background: conic-gradient(from 0deg, rgba(240, 213, 149, 0) 0 80%, rgba(240, 213, 149, 0.55) 92%, rgba(240, 213, 149, 0) 100%); -webkit-mask: radial-gradient(circle, transparent 69.6%, #000 70%); mask: radial-gradient(circle, transparent 69.6%, #000 70%); animation-duration: 14s; }

/* Móvil en 3D: cuerpo con grosor (capas apiladas), botones laterales, cristal y sombra en el suelo.
   --mx / --my (−1…1) los fija el puntero; el balanceo suave va en la propiedad `rotate`. */
.la-device {
	--mx: 0;
	--my: 0;
	position: relative;
	z-index: 1;
	transform-style: preserve-3d;
	transform: rotateX(calc(9deg - var(--my) * 7deg)) rotateY(calc(-22deg + var(--mx) * 14deg)) rotateZ(-2deg);
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	animation: la-sway 9s ease-in-out infinite;
}
@keyframes la-sway { 0%, 100% { rotate: y -3deg; translate: 0 0; } 50% { rotate: y 4deg; translate: 0 -10px; } }
.la-device__shadow {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 300px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	filter: blur(6px);
	transform: translateX(-46%);
}
.la-phone {
	position: relative;
	width: 300px;
	height: 612px;
	padding: 11px;
	border-radius: 48px;
	transform-style: preserve-3d;
	background: #07060f;
	box-shadow: inset 0 0 0 1.5px #8e8896, inset 0 0 0 3px #26232c, 0 0 90px -24px rgba(154, 134, 255, 0.45);
}
/* Canto metálico: 14 láminas con el mismo contorno, cada una un poco más atrás. */
.la-phone__edge {
	position: absolute;
	inset: 0;
	border-radius: 48px;
	background: linear-gradient(90deg, #8b8295, #2b2733 5%, #17151c 30%, #24212b 60%, #3a3642 86%, #77707f 97%, #2e2a35);
	transform: translateZ(calc(var(--i) * -1.7px));
}
.la-phone__edge:nth-child(1) { --i: 1; } .la-phone__edge:nth-child(2) { --i: 2; } .la-phone__edge:nth-child(3) { --i: 3; }
.la-phone__edge:nth-child(4) { --i: 4; } .la-phone__edge:nth-child(5) { --i: 5; } .la-phone__edge:nth-child(6) { --i: 6; }
.la-phone__edge:nth-child(7) { --i: 7; } .la-phone__edge:nth-child(8) { --i: 8; } .la-phone__edge:nth-child(9) { --i: 9; }
.la-phone__edge:nth-child(10) { --i: 10; } .la-phone__edge:nth-child(11) { --i: 11; } .la-phone__edge:nth-child(12) { --i: 12; }
.la-phone__edge:nth-child(13) { --i: 13; }
.la-phone__edge:nth-child(14) { --i: 14; background: linear-gradient(160deg, #3b3252, #15111f 60%, #2a2238); }
.la-phone__btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #c2b5d8, #5d5278); transform: translateZ(-12px); }
.la-phone__btn--power { top: 168px; right: -3px; height: 86px; }
.la-phone__btn--vol { top: 140px; left: -3px; height: 58px; box-shadow: 0 74px 0 #6d6288; }
.la-phone__glass {
	position: absolute;
	inset: 11px;
	z-index: 4;
	border-radius: 38px;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0) 60%) calc(50% + var(--mx, 0) * 30%) 0 / 260% 100% no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	transform: translateZ(1.2px);
}
/* Mensajes que salen de la pantalla y quedan flotando delante del móvil */
.la-phone__pop { position: absolute; inset: 0; z-index: 5; pointer-events: none; transform: translateZ(40px); }
.la-pop {
	position: absolute;
	margin: 0;
	font-size: 13px;
	transform: translate(0, 10px) scale(0.94);
	opacity: 0;
	transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1), top 0.45s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.5s;
}
/* Todos en el mismo plano, delante de la pantalla */
.la-pop.is-out { transform: translate(var(--dx), 0); opacity: 1; }
.la-pop.is-gone { transform: translate(var(--dx), -14px); opacity: 0; transition-duration: 0.5s, 0.6s, 0.3s; }
/* Liquid glass: cristal translúcido que desenfoca y satura lo que hay detrás, con brillo especular y canto refractado */
.la-pop.la-msg,
.la-pop.la-letter,
.la-pop.la-post {
	overflow: hidden;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%, rgba(154, 134, 255, 0.12));
	color: #fff;
	backdrop-filter: blur(14px) saturate(190%) brightness(1.15);
	-webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.15);
	/* El canto va en sombras interiores: el cristal mide lo mismo que el mensaje original */
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.28),
		inset 0 1px 1px rgba(255, 255, 255, 0.75),
		inset 0 -1px 1px rgba(255, 255, 255, 0.18),
		inset 0 0 18px rgba(255, 255, 255, 0.12),
		inset 6px 0 14px -10px rgba(170, 220, 255, 0.6),
		inset -6px 0 14px -10px rgba(255, 180, 220, 0.5),
		0 30px 50px -18px rgba(0, 0, 0, 0.7),
		0 0 40px -10px rgba(154, 134, 255, 0.5);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.la-pop.la-msg--out {
	background: linear-gradient(150deg, rgba(255, 236, 180, 0.42), rgba(240, 200, 120, 0.16) 50%, rgba(212, 170, 92, 0.3));
	box-shadow:
		inset 0 0 0 1px rgba(255, 240, 200, 0.35),
		inset 0 1px 1px rgba(255, 250, 230, 0.85),
		inset 0 -1px 1px rgba(255, 230, 170, 0.3),
		inset 0 0 18px rgba(255, 230, 170, 0.2),
		0 30px 50px -18px rgba(0, 0, 0, 0.7),
		0 0 40px -8px rgba(240, 213, 149, 0.55);
}
.la-pop.la-msg::before,
.la-pop.la-letter::before,
.la-pop.la-post::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
		linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0) 60%) -120% 0 / 250% 100% no-repeat;
	mix-blend-mode: screen;
	animation: la-glint 3.2s 0.4s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}
@keyframes la-glint { to { background-position: 0 0, 220% 0; } }
.la-pop.la-msg time { opacity: 0.8; }
.la-pop .la-read { color: #b9f5d0; }
.la-pop.la-msg--cards canvas { position: relative; }
.la-platform .is-lifted { visibility: hidden; }
.la-pop.la-letter--answer { background: linear-gradient(150deg, rgba(255, 236, 180, 0.24), rgba(154, 134, 255, 0.14) 55%, rgba(255, 255, 255, 0.06)); }
.la-pop.la-post--dim.is-out { opacity: 0.7; }
.la-phone__notch { position: absolute; top: 20px; left: 50%; z-index: 3; width: 92px; height: 26px; border-radius: 20px; background: #05040c; transform: translateX(-50%) translateZ(0.9px); }
.la-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: #0b0920; transform: translateZ(0.3px); isolation: isolate; }
/* Fondo de la app: aurora en movimiento, polvo de estrellas y el anillo del portal como marca de agua */
.la-phone__screen::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	background:
		radial-gradient(34% 24% at 66% 34%, rgba(130, 96, 255, 0.85), rgba(130, 96, 255, 0) 70%),
		radial-gradient(30% 22% at 34% 58%, rgba(214, 110, 200, 0.55), rgba(214, 110, 200, 0) 70%),
		radial-gradient(34% 22% at 62% 74%, rgba(224, 176, 92, 0.55), rgba(224, 176, 92, 0) 70%),
		radial-gradient(26% 18% at 38% 36%, rgba(70, 190, 230, 0.4), rgba(70, 190, 230, 0) 70%);
	filter: blur(14px);
	animation: la-aurora 18s ease-in-out infinite alternate;
}
.la-phone__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 50% 46%, rgba(240, 213, 149, 0) 34%, rgba(240, 213, 149, 0.13) 34.4%, rgba(240, 213, 149, 0) 35%, rgba(240, 213, 149, 0) 40%, rgba(240, 213, 149, 0.07) 40.3%, rgba(240, 213, 149, 0) 40.8%),
		radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 82% 34%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 64% 12%, #f6e1a6, transparent), radial-gradient(1px 1px at 30% 52%, #fff, transparent),
		radial-gradient(1px 1px at 88% 66%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 84%, #f6e1a6, transparent),
		radial-gradient(1px 1px at 56% 74%, #fff, transparent), radial-gradient(1px 1px at 44% 28%, #fff, transparent),
		linear-gradient(180deg, rgba(11, 9, 32, 0), rgba(11, 9, 32, 0.3));
	animation: la-twinkle 5s ease-in-out infinite alternate;
}
@keyframes la-aurora { from { transform: rotate(0deg) scale(1); } to { transform: rotate(24deg) scale(1.12) translate(4%, -3%); } }
@keyframes la-twinkle { from { opacity: 0.75; } to { opacity: 1; } }
.la-app { display: flex; flex-direction: column; height: 100%; font-size: 13px; }
.la-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 56px 16px 12px; background: rgba(18, 14, 46, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.la-app__who { display: flex; align-items: center; gap: 10px; }
.la-app__who strong { display: block; color: var(--la-ink); font-weight: 500; font-size: 14px; }
.la-app__who small { color: var(--la-ok); font-size: 11.5px; }
.la-app__badge { padding: 4px 9px; border: 1px solid rgba(240, 213, 149, 0.3); border-radius: 999px; color: var(--la-gold-2); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.la-app__screen { position: relative; flex: 1; display: none; flex-direction: column; gap: 8px; padding: 14px 12px; overflow: hidden; background: transparent; }
.la-app__screen.is-on { display: flex; }
.la-app__screen[data-screen="chat"] { justify-content: flex-end; }
.la-app__day { align-self: center; margin: 0 0 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--la-muted); font-size: 10.5px; }
.la-msg { max-width: 84%; padding: 9px 12px 6px; border-radius: 16px 16px 16px 5px; background: #221d4a; color: var(--la-ink); box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.1); line-height: 1.38; }
.la-msg p { margin: 0; }
.la-msg time { display: block; margin-top: 2px; font-size: 10px; text-align: right; opacity: 0.6; }
.la-msg--out { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #f6e1a6, #d4aa5c); color: #1b1307; box-shadow: 0 8px 20px -12px rgba(212, 170, 92, 0.8); }
.la-read { color: #3f7a5a; letter-spacing: -2px; }
.la-msg--cards { display: flex; gap: 6px; padding: 8px; background: rgba(34, 29, 74, 0.7); }
.la-msg--cards canvas { width: 44px; height: auto; aspect-ratio: 70 / 120; border-radius: 3px; box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.35); }
.la-typing { display: none; align-self: flex-start; gap: 4px; padding: 10px 12px; border-radius: 16px 16px 16px 5px; background: #221d4a; }
.la-typing.is-on { display: inline-flex; }
.la-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--la-gold-2); animation: la-type 1.2s infinite; }
.la-typing span:nth-child(2) { animation-delay: 0.15s; }
.la-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes la-type { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* Con JS los mensajes aparecen en secuencia */
.la-js .la-platform .la-msg[data-step] { display: none; }
.la-js .la-platform .la-msg[data-step].is-shown { display: block; animation: la-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.la-js .la-platform .la-msg--cards[data-step].is-shown { display: flex; }
@keyframes la-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.la-app__compose { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 14px 22px; background: rgba(18, 14, 46, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); color: var(--la-muted); }
.la-app__compose i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f6e1a6, #d4aa5c); }

.la-letter,
.la-post { padding: 14px; border-radius: 16px; background: #1c1842; box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.12); color: var(--la-ink-2); line-height: 1.45; }
.la-letter p, .la-post p { margin: 0; }
.la-letter__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; color: var(--la-gold-2); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.la-letter__label .la-icon { width: 14px; height: 14px; }
.la-letter__q { color: var(--la-ink); font-family: var(--la-display); font-size: 17px; font-style: italic; }
.la-letter__progress { height: 4px; margin: 12px 0 6px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.la-letter__progress span { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, #9a86ff, #f0d595); animation: la-progress 3.5s ease-in-out infinite alternate; }
@keyframes la-progress { from { width: 30%; } to { width: 86%; } }
.la-letter__state { color: var(--la-muted); font-size: 11.5px; }
.la-letter--answer { background: linear-gradient(160deg, #2a2257, #1a1640); box-shadow: 0 0 0 1px rgba(240, 213, 149, 0.3); }
.la-letter__more { display: inline-block; margin-top: 8px; color: var(--la-gold-2); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.la-post__meta { margin-bottom: 6px !important; color: var(--la-muted); font-size: 11px; }
.la-post__meta strong { color: var(--la-gold-2); font-weight: 500; }
.la-post__q { color: var(--la-ink); font-family: var(--la-display); font-size: 16px; line-height: 1.3; }
.la-post__answer { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(240, 213, 149, 0.12); }
.la-post__answer strong { color: var(--la-gold-2); font-weight: 500; }
.la-post__foot { display: flex; justify-content: space-between; margin-top: 10px !important; color: var(--la-muted); font-size: 11px; }
.la-post--dim { opacity: 0.55; }

/* Tarjetas flotantes */
.la-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	border: 1px solid rgba(240, 213, 149, 0.25);
	border-radius: 18px;
	background: rgba(24, 20, 52, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
	font-size: 13px;
	animation: la-floaty 6s ease-in-out infinite;
}
.la-float strong { display: block; color: var(--la-ink); font-weight: 500; }
.la-float small { color: var(--la-muted); }
.la-float--a { top: 16%; left: -6%; }
.la-float--b { bottom: 3%; right: -6%; animation-delay: -3s; }
.la-float__stack { display: flex; }
.la-float__stack .la-avatar + .la-avatar { margin-left: -8px; }
@keyframes la-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Avatares: foto real o inicial elegante */
.la-avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(240, 213, 149, 0.55); background: #241e4c; }
.la-avatar--sm { width: 36px; height: 36px; }
.la-avatar--xs { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px #15122c, 0 0 0 2.5px rgba(240, 213, 149, 0.5); }
.la-avatar--initial { display: inline-grid; place-items: center; color: #1b1307; background: linear-gradient(135deg, #f6e1a6, #c9a057); font-family: var(--la-display); font-weight: 600; font-size: 1.05em; }
.la-avatar.is-online { outline: 0; }
span.la-avatar.is-online::after,
.la-app__who .is-online + span strong::after { content: ""; }

@media (prefers-reduced-motion: reduce) {
	.la-platform__desc, .la-app__screen, .la-app__who, .la-faq__item p,
	.la-orbit::before, .la-orbit::after, .la-float, .la-letter__progress span, .la-typing span, .la-device, .la-phone__screen::before, .la-phone__screen::after, .la-pop::before { animation: none; }
}
@media (max-width: 980px) {
	.la-platform__grid { grid-template-columns: 1fr; gap: 30px; }
	.la-platform__stage { min-height: 600px; }
	.la-orbit { width: 440px; height: 440px; }
}
@media (max-width: 560px) {
	.la-platform__stage { min-height: 560px; transform: scale(0.88); transform-origin: top center; margin-bottom: -60px; }
	.la-float--a { top: 1%; left: -6%; }
	.la-float--b { right: -8%; }
	.la-orbit { width: 360px; height: 360px; }
	.la-platform__note { text-align: left; }
	.la-platform__tabs { display: flex; flex-wrap: nowrap; gap: 2px; }
	.la-platform__tabs button { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; white-space: nowrap; }
}