/* El meu compte — maqueta estática del boceto (frame T38jE).
   El boceto muestra el estado NO autenticado: Accedir + Registrar-se + franja Trust.
   ponytail: layout fijo; en fase 2 pasa a overrides reales de WooCommerce (myaccount/). */

.compte-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 56px var(--pad-x) 8px;
}
.compte-head__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--wine);
}
.compte-head__title {
	font-family: var(--font-display);
	font-size: 46px;
	font-weight: 600;
	letter-spacing: -1px;
	color: var(--ink);
	margin: 0;
}

.compte-cols {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 36px var(--pad-x) 40px;
}
.compte-card {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.compte-card--login { background: var(--paper-card); }
.compte-card--register { background: var(--paper-2); }
.compte-card__title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.compte-card__intro {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.56;
	color: var(--ink-soft);
	margin: 0;
}

.compte-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.compte-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--ink-faint);
}
.compte-input {
	width: 100%;
	padding: 14px 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 2px;
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--ink);
}
.compte-input::placeholder { color: var(--ink-faint); }

.compte-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.compte-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--ink-soft);
	cursor: pointer;
}
.compte-remember input { width: 18px; height: 18px; accent-color: var(--wine); margin: 0; }
.compte-forgot {
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--wine);
	text-decoration: none;
}

.compte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border: 0;
	border-radius: 2px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--paper);
	text-decoration: none;
	cursor: pointer;
}
.compte-btn--wine { background: var(--wine); width: 100%; }
.compte-btn--dark { background: var(--ink); align-self: flex-start; width: 200px; padding: 16px 28px; justify-content: center; }
.compte-head__title, .compte-card__title { line-height: normal; }
.compte-note {
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.44;
	color: var(--ink-faint);
	margin: 0;
}

/* Franja Trust */
.compte-trust {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px var(--pad-x) 64px;
	border-top: 1px solid var(--line);
}
.compte-trust__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-align: center;
}
.compte-trust__item svg { color: var(--green); flex-shrink: 0; }

@media (max-width: 1024px) {
	.compte-head, .compte-cols, .compte-trust { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 820px) {
	.compte-cols { flex-direction: column; }
	.compte-trust { flex-direction: column; align-items: stretch; gap: 18px; }
	.compte-trust__item { justify-content: flex-start; }
}
@media (max-width: 768px) {
	.compte-head, .compte-cols, .compte-trust { padding-left: var(--pad-x); padding-right: var(--pad-x); }
	.compte-inline { flex-direction: column; align-items: flex-start; gap: 12px; }
	.compte-btn--dark { width: 100%; }
}