/* Variante clara de las landings de marketing (se carga DESPUÉS de welcome-light.css, con <body class="lp-light">).
   Hero, cabecera y pie siguen oscuros; el resto es claro. Reutiliza los tokens de welcome-light.css. */

/* Banda oscura del hero (misma lógica que ".header, .hero" de la home) */
.lp-hero-dark {
	--primary-black: #07050d; --carbon-dark: #0f0b1a; --carbon-medium: #171129; --carbon-light: #221a3a;
	--text-primary: #ffffff; --text-secondary: #b9b5c9; --text-dim: #7f7a93;
	position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(900px 420px at 85% 0%, rgba(232, 35, 31, .22), transparent 60%),
		radial-gradient(700px 380px at 0% 100%, rgba(244, 121, 30, .14), transparent 60%),
		linear-gradient(160deg, #07050d 0%, #0f0b1a 45%, #171129 100%);
}
.lp-hero-dark .kiosk-landing-section { margin-bottom: 0; padding-bottom: 70px; }
.lp-hero-dark .kiosk-grid { margin-bottom: 0; }

/* Secciones claras */
.lp-light .benefits-section { background: transparent; }
.lp-light .section-title { color: var(--text-primary); }
.lp-light .benefit-card,
.lp-light .bld-card,
.lp-light .bld-step,
.lp-light .hiw-step,
.lp-light .hiw-role,
.lp-light .bld-faq details {
	background: #fff; border: 1px solid #e4e6ec; box-shadow: 0 10px 30px rgba(29, 29, 31, .06);
}
.lp-light .benefit-card:hover { box-shadow: 0 16px 40px rgba(232, 35, 31, .12); }
.lp-light .bld-card li, .lp-light .bld-step p, .lp-light .hiw-step p, .lp-light .hiw-node p,
.lp-light .hiw-role-body p, .lp-light .bld-faq p { color: var(--text-secondary); }
.lp-light .bld-card li b { color: var(--text-primary); }
.lp-light .bld-card h3, .lp-light .bld-step h3, .lp-light .hiw-step-top h3, .lp-light .hiw-node h3,
.lp-light .hiw-role-body h3, .lp-light .bld-faq summary { color: var(--text-primary); }
.lp-light .bld-faq details[open] { box-shadow: 0 14px 34px rgba(232, 35, 31, .1); }
.lp-light .bld-cross { background: linear-gradient(135deg, rgba(232, 35, 31, .07), rgba(244, 121, 30, .05)); border-color: rgba(232, 35, 31, .2); }
.lp-light .bld-cross h3 { color: var(--text-primary); }
.lp-light .bld-cross p { color: var(--text-secondary); }

/* Cómo funciona: los dibujos SVG tienen fondo oscuro propio; sobre claro se ven como pantallas con sombra */
.lp-light .hiw-svg { filter: drop-shadow(0 12px 22px rgba(29, 29, 31, .25)); }
.lp-light .hiw-node-ico { background: #fff; box-shadow: 0 0 0 6px rgba(244, 121, 30, .14), 0 8px 20px rgba(29, 29, 31, .08); color: #E8231F; }
.lp-light .hiw-role-img { background: #0a0714; }
.lp-light .hiw-arrow { color: #E8231F; }

/* Teléfonos con vídeo: marco oscuro + sombra suave */
.lp-light .bld-video { box-shadow: 0 24px 60px rgba(29, 29, 31, .3), 0 0 0 5px #1a1626; }
.lp-hero-dark .bld-phone figcaption { color: rgba(255, 255, 255, .65); }

/* Botón secundario sobre fondo claro (el de la landing es blanco sobre oscuro) */
.lp-light .bld-cross .btn-secondary { background: #fff; color: var(--text-primary); border: 1px solid #d5d8e0; }
.lp-light .bld-cross .btn-secondary:hover { border-color: #E8231F; color: #E8231F; }
/* Enlaces del pie con colores que no existen en el tema claro */
.lp-light .footer { --accent-green: #4ade80; --accent-pink: #f857a6; }

/* Landings de funciones (carta QR, TPV, comandero, KDS, kiosco, reservas): secciones «flow» y «adv» */
.lp-light .flow-step-item { background: #fff; border: 1px solid #e4e6ec; box-shadow: 0 8px 24px rgba(29, 29, 31, .06); }
.lp-light .flow-step-title { color: var(--text-primary); }
.lp-light .flow-step-desc, .lp-light .flow-section p { color: var(--text-secondary); }
.lp-light .flow-section [class*="image-placeholder"],
.lp-light .flow-section [class*="image-real"] {
	background: linear-gradient(135deg, #fff7f0, #fff); border: 2px dashed rgba(232, 35, 31, .3); box-shadow: 0 16px 40px rgba(29, 29, 31, .08);
	--text-primary: #1d1d1f; --text-secondary: #55555a; --text-dim: #86868b;
}
.lp-light .adv-box { background: #fff; border: 1px solid #e4e6ec; box-shadow: 0 16px 40px rgba(29, 29, 31, .08); }
.lp-light .adv-title { color: var(--text-primary); }
.lp-light .adv-desc, .lp-light .adv-list li { color: var(--text-secondary); }
/* Enlaces amarillos (--accent-cyan) ilegibles sobre blanco */
.lp-light main a[style*="accent-cyan"] { color: #b45309 !important; text-decoration: underline; }

/* Formularios y quiz de las landings (diagnóstico, guía de precios): bordes y fondos pensados para oscuro */
.lp-light .diag-option { background: #fff; border: 1px solid #d5d8e0; color: var(--text-primary); }
.lp-light .diag-option:hover { border-color: #F4791E; }
.lp-light .diag-option.is-active { background: rgba(232, 35, 31, .06); border-color: #E8231F; }
.lp-light .diag-option-check { border: 1.5px solid #b8bcc8; background: #fff; }
.lp-light .diag-option.is-active .diag-option-check { background: #E8231F; border-color: #E8231F; }
.lp-light .diag-field input, .lp-light .diag-field select, .lp-light .diag-field textarea {
	background: #fff; border: 1px solid #d5d8e0; color: var(--text-primary);
}
.lp-light .diag-field input:focus, .lp-light .diag-field select:focus { border-color: #E8231F; outline: none; box-shadow: 0 0 0 3px rgba(232, 35, 31, .12); }
.lp-light .diag-field label { color: var(--text-primary); }