/* Etapa 4A · estructura visual del panel y pantallas de acceso. */
.epu-s4a-page {
	min-height: calc(100vh - 76px);
	background: var(--epu-s4a-workspace-bg, #f3f4f5);
}

.epu-s4a-layout {
	display: grid !important;
	grid-template-columns: minmax(240px, 292px) minmax(0, 1fr);
	gap: clamp(18px, 2.2vw, 32px) !important;
	align-items: start !important;
	width: min(calc(100% - 40px), 1420px) !important;
	margin: 0 auto !important;
	padding: clamp(22px, 3vw, 42px) 0 clamp(42px, 5vw, 76px) !important;
}

.epu-s4a-layout > .elementor-element { min-width: 0; }
.epu-s4a-layout--account > .elementor-widget-epu-s4a-account-navigation,
.epu-s4a-layout--account > .elementor-widget-epu-s4a-access-intro { grid-column: 1; grid-row: 1; }
.epu-s4a-layout--account > .elementor-widget-epu-s4a-account-content { grid-column: 2; grid-row: 1; }
.epu-s4a-layout--registration > .elementor-widget-epu-s4a-access-intro { grid-column: 1; }
.epu-s4a-layout--registration > .elementor-widget-epu-s4a-access-registration { grid-column: 2; }

body.logged-in .epu-s4a-layout--account > .elementor-widget-epu-s4a-access-intro { display: none; }
body:not(.logged-in) .epu-s4a-layout--account > .elementor-widget-epu-s4a-account-navigation { display: none; }

.elementor-editor-active .epu-s4a-layout--account > .elementor-widget-epu-s4a-access-intro,
.elementor-editor-preview .epu-s4a-layout--account > .elementor-widget-epu-s4a-access-intro { display: block; }

.epu-s4a-navigation,
.epu-s4a-content,
.epu-s4a-access-form { min-width: 0; }

.epu-s4a-page .ep-account.ep-account--elementor-part {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.epu-s4a-page .ep-account.ep-account--elementor-part::before { display: none !important; }
.epu-s4a-navigation .ep-account-sidebar {
	position: sticky;
	top: 94px;
	width: 100% !important;
	min-height: min(720px, calc(100vh - 118px));
	border-radius: 20px !important;
	background: var(--epu-s4a-nav-bg, #111) !important;
	box-shadow: 0 20px 52px rgba(17, 17, 17, .14) !important;
}

.epu-s4a-navigation .ep-account-nav a { color: var(--epu-s4a-nav-text, #f1f1f1) !important; }
.epu-s4a-navigation .ep-account-nav a.is-active { background: var(--epu-s4a-active, #c9360d) !important; }
.epu-s4a-navigation .ep-sidebar-label,
.epu-s4a-navigation .ep-sidebar-user small,
.epu-s4a-navigation .ep-sidebar-user em { color: var(--epu-s4a-nav-muted, #b8bbc0) !important; }

.epu-s4a-content .ep-account-main {
	width: 100% !important;
	min-width: 0;
	padding: 0 0 36px !important;
}

.epu-s4a-content .ep-account-main > .ep-account-form,
.epu-s4a-content .ep-account-main > .ep-survey-editor,
.epu-s4a-content .ep-account-main > .ep-my-plan,
.epu-s4a-content .ep-account-main > .ep-plan-history {
	background: var(--epu-s4a-surface, #fff) !important;
}

.epu-s4a-access-intro {
	height: 100%;
	min-height: 650px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 88% 12%, rgba(255, 95, 42, .24), transparent 29%),
		linear-gradient(145deg, var(--epu-s4a-intro-bg, #111), #202226);
	box-shadow: 0 22px 58px rgba(17, 17, 17, .18);
	color: var(--epu-s4a-intro-text, #d6d8dc);
}

.epu-s4a-access-intro__inner {
	display: flex;
	flex-direction: column;
	min-height: inherit;
	padding: clamp(30px, 4vw, 54px);
}

.epu-s4a-kicker {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: 22px;
	padding: 8px 11px;
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 999px;
	color: #ffae91;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.epu-s4a-access-intro h1 {
	max-width: 620px;
	margin: 0 0 18px;
	color: var(--epu-s4a-intro-title, #fff);
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.04;
	letter-spacing: -.045em;
}

.epu-s4a-access-intro p {
	max-width: 590px;
	margin: 0;
	color: var(--epu-s4a-intro-text, #d6d8dc);
	font-size: 16px;
	line-height: 1.7;
}

.epu-s4a-access-intro ul {
	display: grid;
	gap: 13px;
	margin: 34px 0;
	padding: 0;
	list-style: none;
}

.epu-s4a-access-intro li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	color: #f1f1f1;
	font-weight: 680;
}

.epu-s4a-access-intro li span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--epu-s4a-active, #ff5f2a);
	color: #fff;
}

.epu-s4a-access-intro a {
	margin-top: auto;
	color: #fff;
	font-size: 13px;
	font-weight: 750;
}

.epu-s4a-access-form,
.epu-s4a-content:has(.ep-account-login) {
	display: grid;
	align-items: center;
	min-height: 650px;
	padding: clamp(18px, 3vw, 40px);
	border-radius: 22px;
	background: var(--epu-s3-surface-bg, #fff);
}

.epu-s4a-content:has(.ep-account-login) { background: #fff; }
.epu-s4a-page .ep-account-login,
.epu-s4a-page .ep-account-registration {
	width: min(100%, 720px) !important;
	margin: auto !important;
	padding: 0 !important;
}

.epu-s4a-page .ep-account-login .ep-access-card,
.epu-s4a-page .ep-account-registration .ep-access-card {
	margin: 0 !important;
}

.epu-s4a-editor-notice {
	padding: 18px;
	border: 1px dashed #c9360d;
	border-radius: 12px;
	background: #fff7f3;
	color: #7f240b;
	font-weight: 700;
}

@media (max-width: 1100px) {
	.epu-s4a-layout { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
	.epu-s4a-access-intro h1 { font-size: clamp(32px, 4vw, 46px); }
}

@media (max-width: 860px) {
	.epu-s4a-layout,
	.epu-s4a-layout--account,
	.epu-s4a-layout--registration {
		grid-template-columns: minmax(0, 1fr);
		width: min(calc(100% - 24px), 760px) !important;
	}
	.epu-s4a-layout--account > .elementor-widget-epu-s4a-account-navigation,
	.epu-s4a-layout--account > .elementor-widget-epu-s4a-access-intro,
	.epu-s4a-layout--account > .elementor-widget-epu-s4a-account-content,
	.epu-s4a-layout--registration > .elementor-widget-epu-s4a-access-intro,
	.epu-s4a-layout--registration > .elementor-widget-epu-s4a-access-registration { grid-column: 1; grid-row: auto; }
	.epu-s4a-navigation .ep-account-sidebar { position: static; min-height: 0; }
	.epu-s4a-access-intro { min-height: 500px; }
	.epu-s4a-access-form,
	.epu-s4a-content:has(.ep-account-login) { min-height: 0; padding: 14px; }
}

@media (max-width: 620px) {
	.epu-s4a-layout { width: min(calc(100% - 16px), 760px) !important; padding-top: 14px !important; }
	.epu-s4a-access-intro { min-height: 440px; border-radius: 18px; }
	.epu-s4a-access-intro__inner { padding: 26px 22px; }
	.epu-s4a-access-intro h1 { font-size: 34px; }
	.epu-s4a-page .ep-account-login .ep-access-card,
	.epu-s4a-page .ep-account-registration .ep-access-card { padding: 24px 17px !important; border-radius: 16px !important; }
}