/**
 * cuenta.css — Pantalla "Mi cuenta": datos personales del usuario (registro) +
 * hub hacia SU industria (perfil público). Bloque .cuenta.
 *
 * Nota: el template todavía se llama template-maqueta-cuenta.php, pero estos
 * estilos ya quedan con su nombre/estructura "real" para cuando se implemente.
 */

.cuenta {
  --fill: var(--nexo-yellow);
  color: var(--nexo-dark);
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(6rem, 11vh, 9rem) var(--container-pad) clamp(4rem, 9vh, 7rem);
}
.cuenta--after-hero { padding-block-start: clamp(2.25rem, 5vh, 3.5rem); }

/* ── Banner ───────────────────────────────────────────────────────────────── */
.cuenta__hero { position: relative; background: var(--accent, var(--nexo-yellow)); overflow: hidden; }
/* La X va a todo color y opacidad completa (como el hero real) → contrasta con
   el color del banner en vez de quedar del mismo tono. */
.cuenta__hero-bgx { position: absolute; inset-block: 0; inset-inline-end: 0; width: clamp(200px, 38%, 420px); pointer-events: none; z-index: 0; }
.cuenta__hero-bgx svg { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: var(--x-relief); }
.cuenta__hero-inner {
  position: relative; z-index: 1; max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 2.75rem);
  padding: clamp(6.5rem, 15vh, 10rem) var(--container-pad) clamp(2.5rem, 6vh, 4rem);
  color: var(--nexo-dark);
}
.cuenta__hero-media {
  flex-shrink: 0; width: clamp(96px, 12vw, 132px); aspect-ratio: 1;
  background: var(--nexo-bg); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px var(--nexo-bg), inset 0 0 0 2px color-mix(in srgb, var(--nexo-dark) 15%, transparent);
}
.cuenta__hero-media img { width: 72%; height: 72%; object-fit: contain; }
.cuenta__hero-media.is-photo { background: var(--nexo-bg); border-radius: 50%; overflow: hidden; }
.cuenta__hero-media.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.cuenta__hero-id { min-width: 0; }
.cuenta__hero-eyebrow { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .35rem; opacity: .7; }
.cuenta__hero-name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: .98; letter-spacing: -.02em; margin: 0; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.cuenta__section { margin-block-end: 2.75rem; }
.cuenta__section-title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 0 0 .35rem; }
.cuenta__section-desc { font-size: var(--fs-sm); color: color-mix(in srgb, var(--nexo-dark) 55%, transparent); margin: 0 0 1.5rem; }

/* ── Campos ───────────────────────────────────────────────────────────────── */
.cuenta__field { margin-block-end: 1.6rem; }
.cuenta__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--nexo-dark); margin-block-end: .5rem; }
.cuenta__label .req { color: var(--nexo-red); }
.cuenta__hint { font-size: var(--fs-sm); color: color-mix(in srgb, var(--nexo-dark) 55%, transparent); margin: .35rem 0 0; }
.cuenta input[type=text], .cuenta input[type=email], .cuenta input[type=tel], .cuenta input[type=password], .cuenta select {
  width: 100%; padding: 1.05rem 1rem;
  font-family: var(--font-heading); font-size: var(--fs-base); color: var(--nexo-dark);
  background: var(--fill); border: 0; border-radius: 0;
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s;
}
.cuenta input:focus, .cuenta select:focus { outline-color: var(--nexo-dark); }
.cuenta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .cuenta__row { grid-template-columns: 1fr; } }

/* ── Hub "Tu industria" ───────────────────────────────────────────────────── */
.cuenta__divider { height: 1px; background: color-mix(in srgb, var(--nexo-dark) 14%, transparent); margin-block: 2.5rem; border: 0; }
.cuenta__hub { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 1.25rem; padding: 1.4rem 1.6rem; outline: 2px solid var(--nexo-dark); outline-offset: -2px; }
@media (max-width: 640px) { .cuenta__hub { grid-template-columns: 56px 1fr; } }
.cuenta__hub-logo { width: 72px; height: 72px; background: var(--nexo-dark); display: flex; align-items: center; justify-content: center; }
.cuenta__hub-logo img { width: 70%; height: 70%; object-fit: contain; }
.cuenta__hub-name { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-base); margin: 0; }
.cuenta__hub-meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--nexo-purple); font-weight: var(--fw-semibold); }
.cuenta__hub-actions { display: flex; gap: .5rem; }
@media (max-width: 640px) { .cuenta__hub-actions { grid-column: 1 / -1; } }
.cuenta__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; border: 0; }
.cuenta__pill--solid { background: var(--nexo-purple); color: var(--nexo-cream); }
.cuenta__pill--ghost { background: transparent; color: var(--nexo-dark); box-shadow: inset 0 0 0 2px var(--nexo-dark); }
.cuenta__pill--solid:hover { filter: brightness(1.08); }
.cuenta__pill--ghost:hover { background: var(--nexo-dark); color: var(--nexo-cream); }
.cuenta__create { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1rem; padding: .8rem 1.4rem; background: var(--nexo-green); color: var(--nexo-dark); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border: 0; cursor: pointer; }

/* ── Barra de acciones ────────────────────────────────────────────────────── */
.cuenta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid color-mix(in srgb, var(--nexo-dark) 14%, transparent); }
.cuenta__save { appearance: none; border: 0; background: var(--nexo-purple); color: var(--nexo-cream); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-base); padding: .95rem 2.5rem; cursor: pointer; transition: filter .15s, transform .15s; }
.cuenta__save:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cuenta__note { font-size: var(--fs-sm); color: color-mix(in srgb, var(--nexo-dark) 55%, transparent); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .cuenta__hero-inner { gap: 1.1rem; padding-block: clamp(5rem, 13vh, 6.5rem) 1.75rem; }
  .cuenta__hero-media { width: 78px; }
  .cuenta__hero-name { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .cuenta__hero-bgx { width: 42vw; }
  .cuenta__hero-eyebrow { font-size: 10px; }

  .cuenta__hub { grid-template-columns: 56px 1fr; row-gap: 1rem; }
  .cuenta__hub-actions { grid-column: 1 / -1; }
  .cuenta__pill { flex: 1; justify-content: center; }
  .cuenta__actions { flex-direction: column; align-items: stretch; }
  .cuenta__save { width: 100%; }
}