/* desktop.css — composición de escritorio (≥1024px): copy a la izquierda, foto a la derecha y desplegables debajo.
   Por debajo de 1024px el sitio queda como siempre (móvil vertical). Los valores salen de tokens.css. */

.m-only { display: none !important; }
.dnav, .dfoot { display: flex; }
.hud-line.d-only { display: inline-flex; }
.btn-d { display: inline-flex; }
.behind { display: flex; }
.hero__copy, .dnav__links { display: block; }
.dnav__links { display: flex; }

:root { --dnav-h: 72px; --dgutter: clamp(32px, 4vw, 64px); }
.topbar, .dock { display: none; }

/* ---------- Navegación ---------- */
.dnav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--dnav-h); padding: 0 var(--dgutter);
  align-items: center; justify-content: space-between;
  background: linear-gradient(var(--c-bg) 50%, rgba(7, 5, 13, .75) 78%, transparent);
}
.dnav__mark { font: 700 16px/1 var(--f-hud); letter-spacing: .22em; color: var(--c-text); text-decoration: none; text-transform: uppercase; }
.dnav__mark span { color: var(--c-pink); }
.dnav__links { gap: clamp(24px, 3vw, 48px); }
.dnav__links a { font: 500 15px/1 var(--f-body); letter-spacing: 0; color: var(--c-text-dim); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.dnav__links a:hover, .dnav__links a:focus-visible { color: var(--c-text); border-color: var(--c-accent); outline: none; }
.dnav .lang button, .lang button { cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  column-gap: var(--dgutter); min-height: min(76svh, 680px);
  padding: calc(var(--dnav-h) + 28px) var(--dgutter) 36px;
  max-width: 1280px; margin: 0 auto;
}
.hero__head { position: relative; z-index: 3; display: block; }
.fullname {
  margin: 18px 0 0; transform: none; font: 600 18px/1 var(--f-hud); letter-spacing: .3em; text-transform: uppercase; translate: none;
}
.fullname span { display: inline; background: none; color: var(--c-accent-text); -webkit-background-clip: border-box; background-clip: border-box; filter: none; }
.hero__title { display: block; margin-top: 6px; font: 400 clamp(64px, 6.9vw, 112px)/.9 var(--f-title); letter-spacing: -.005em; white-space: nowrap; text-transform: uppercase; text-shadow: 0 4px 40px rgba(7, 5, 13, .7); }
.hero__title span { display: block; }
.hero__title span:last-child::after { content: ""; display: inline-block; width: .14em; height: .14em; margin-left: .06em; background: var(--c-pink); }
.hero__sub { margin-top: 20px; max-width: 18em; font: 500 clamp(20px, 1.7vw, 26px)/1.25 var(--f-body); color: var(--c-text-dim); }
.btn-d {
  align-items: center; gap: 14px; margin-top: 24px; padding: 16px 30px; border: 0;
  border-radius: var(--radius-pill); background: var(--grad-accent); color: #fff; text-decoration: none;
  font: 500 17px/1 var(--f-body); letter-spacing: 0;
  box-shadow: 0 8px 32px var(--c-glow); transition: filter var(--t-fast), transform var(--t-fast) var(--ease-snap);
}
.btn-d:hover { filter: brightness(1.15); } .btn-d:active { transform: scale(.97); }
.btn-d:focus-visible, .dfoot a:focus-visible, .dfoot button:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 3px; }

.stage { height: min(54svh, 520px); margin: 0; overflow: hidden; }
.stage__band { width: 70%; }
.stage__ghost { font-size: clamp(150px, 15vw, 240px); top: 6%; }
.portrait { width: min(100%, 380px); }

/* ---------- Perfiles (desplegables) ---------- */
.chars { max-width: 1100px; margin: 0 auto; padding: 24px var(--dgutter) 24px; gap: 20px; }
.acc { gap: 14px; }
.char__head { min-height: 92px; padding: 16px 28px; column-gap: 20px; row-gap: 6px; cursor: pointer; }
.char__num { font-size: 16px; }
.char__name { font-size: 44px; }
.char__count { font-size: 12px; }
.char__chev { width: 12px; height: 12px; }
.char__content { padding: 4px 28px 28px; gap: 22px; }
.tool { height: 38px; font-size: 12px; padding: 0 16px 0 12px; } .tool img { width: 20px; height: 20px; }
.bio { font-size: 18px; max-width: 46em; }
.quote { font-size: 18px; }
.cards { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card__title { font-size: 22px; }
.card__desc { font-size: 16px; }
.ai { gap: 18px; }
.ai__title { font-size: 32px; }
.ai__list { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ai-card { padding: 22px; }

.behind { align-items: center; gap: 48px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--c-line); }
.behind__title { flex: 0 0 auto; font: 800 clamp(44px, 4.4vw, 68px)/1 var(--f-body); letter-spacing: -.02em; max-width: 7em; }
.behind__text { flex: 1; max-width: 26em; padding-left: 40px; border-left: 1px solid var(--c-line); font: 500 20px/1.35 var(--f-body); color: var(--c-text-dim); }
.behind .btn-d { margin-top: 0; }

.dfoot { align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 28px var(--dgutter) 40px; border-top: 1px solid var(--c-line); }
.dfoot__links { display: flex; align-items: center; gap: 28px; }
.dfoot__links a { display: inline-flex; opacity: .8; transition: opacity var(--t-fast); } .dfoot__links a:hover { opacity: 1; }
.dfoot__links button { font: 600 13px/1 var(--f-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim); cursor: pointer; } .dfoot__links button:hover { color: var(--c-text); }

/* El fondo en capas se ajusta a pantallas grandes */
.watermark { left: 2%; bottom: 8%; width: 320px; }
.bg__embers { background-size: 720px 640px; }
.bg__glow { background:
  radial-gradient(420px 520px at 48% 42%, rgba(196, 120, 255, .22), transparent 70%),
  radial-gradient(760px 640px at 48% 44%, color-mix(in srgb, var(--c-char) 42%, transparent), transparent 72%),
  radial-gradient(600px 200px at 50% 104%, rgba(255, 0, 89, .14), transparent 70%); }