/* Asistente "¿Qué tienes?" y modo presentación. Usa los tokens de styles.css. */
.page-head { padding: clamp(32px, 6vw, 72px) var(--gutter) 12px; max-width: 1240px; margin: 0 auto; }
.page-head h1 { font-size: clamp(44px, 8vw, 104px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; }
.page-head .lead { margin-top: 14px; }

.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; padding: 24px var(--gutter) 80px; max-width: 1240px; margin: 0 auto; }
.pick { --tone: var(--blue); text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-lg);
  padding: 20px 20px 18px; display: grid; gap: 6px; box-shadow: 5px 5px 0 var(--tone); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.pick:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tone); }
.pick:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tone); }
.pick[data-tone='orange'] { --tone: var(--stamp); } .pick[data-tone='red'] { --tone: var(--r4); } .pick[data-tone='green'] { --tone: var(--ok); }
.pick b { font-size: 21px; line-height: 1.1; }
.pick span { color: var(--ink-soft); font-size: 15px; }
.pick small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone); margin-top: 4px; }

.guide { max-width: 980px; margin: 0 auto; padding: 18px var(--gutter) 90px; }
.guide-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.back { font: inherit; font-size: 15px; background: none; border: 2px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.back:hover { background: var(--blue-soft); }
.guide h2 { font-size: clamp(34px, 5vw, 56px); margin: 22px 0 6px; max-width: none; }
.guide .meta { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.progress { display: flex; gap: 6px; margin: 22px 0; flex-wrap: wrap; }
.dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 13px var(--mono); cursor: pointer; display: grid; place-items: center; transition: background 0.2s, transform 0.2s var(--ease); }
.dot.done { background: var(--ink); color: var(--paper); }
.dot.now { background: var(--stamp); border-color: var(--stamp); color: #fff; transform: scale(1.12); }
.dot.gate:not(.now) { border-color: var(--stamp); }

.stepcard { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); animation: enter 0.35s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
.stepcard header { padding: 24px 28px 8px; }
.stepcard header p { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--stamp); letter-spacing: 0.08em; text-transform: uppercase; }
.stepcard h3 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 6px; }
.stepbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 760px) { .stepbody { grid-template-columns: 1fr; } }
.stepbody > div { padding: 18px 28px 28px; }
.stepbody > div + div { background: var(--paper-2); border-left: 2px dashed var(--line); }
@media (max-width: 760px) { .stepbody > div + div { border-left: 0; border-top: 2px dashed var(--line); } }
.label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin: 0 0 8px; }
.you { font-size: 19px; line-height: 1.5; margin: 0 0 18px; }
.type { display: flex; gap: 8px; align-items: stretch; }
.type code { flex: 1; background: var(--terminal); color: #ffb88a; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.copy { font: 700 14px var(--display); border: 2px solid var(--ink); background: var(--stamp); color: #fff; border-radius: var(--radius-sm); padding: 0 14px; cursor: pointer; min-width: 88px; }
.copy:hover { filter: brightness(1.08); }
.copy.ok { background: var(--ok); }
.gatebox { margin: 0 28px 24px; padding: 14px 18px; border: 2px dashed var(--stamp); border-radius: var(--radius-sm); background: var(--stamp-soft); display: flex; gap: 12px; align-items: flex-start; }
.gatebox b { font-family: var(--mono); color: var(--stamp); white-space: nowrap; }
.nav-steps { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.nav-steps button { font: 700 17px var(--display); padding: 14px 22px; border-radius: 999px; border: 2px solid var(--ink); cursor: pointer; }
.prev { background: var(--card); color: var(--ink); }
.next { background: var(--ink); color: var(--paper); }
.nav-steps button:disabled { opacity: 0.35; cursor: default; }
.keys { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 14px; }
.done-card { text-align: center; padding: 40px 24px; }
.done-card b { display: block; font-size: 60px; }

/* Presentación */
body.deck { overflow: hidden; height: 100vh; }
.slide { position: fixed; inset: 0; display: grid; align-content: center; padding: 70px clamp(24px, 7vw, 120px) 90px; opacity: 0; pointer-events: none; transform: translateX(30px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); overflow-y: auto; }
.slide.on { opacity: 1; pointer-events: auto; transform: none; }
.slide h1 { font-size: clamp(48px, 9vw, 140px); letter-spacing: -0.055em; line-height: 0.9; }
.slide h2 { font-size: clamp(38px, 6vw, 86px); max-width: 18ch; }
.slide .lead { font-size: clamp(20px, 2vw, 28px); }
.slide .big-cmd { font: 700 clamp(40px, 7vw, 96px) var(--mono); color: var(--blue); }
.slide ul.points { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.4; padding-left: 1.1em; max-width: 38ch; }
.slide ul.points li { margin: 10px 0; }
.slide .cta { display: inline-flex; margin-top: 28px; font: 700 20px var(--display); padding: 14px 26px; border-radius: 999px; background: var(--stamp); color: #fff; text-decoration: none; border: 2px solid var(--ink); width: max-content; }
.slide .cta:hover { filter: brightness(1.06); }
.slide .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 28px; }
.deck-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--paper) 92%, transparent); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13px; }
.deck-bar button { font: inherit; border: 2px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.deck-bar .bar { flex: 1; height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.deck-bar .bar i { display: block; height: 100%; width: 100%; background: var(--stamp); transform-origin: left; transform: scaleX(0); transition: transform 0.4s var(--ease); }
.notes { position: fixed; right: 16px; bottom: 64px; width: min(440px, calc(100vw - 32px)); max-height: 50vh; overflow-y: auto; z-index: 21; background: var(--terminal); color: #e6ecff; border-radius: var(--radius-lg); padding: 18px 20px; font-size: 16px; line-height: 1.5; box-shadow: var(--shadow); display: none; }
.notes.show { display: block; }
.notes h4 { margin: 0 0 8px; font: 700 12px var(--mono); color: #ffb88a; letter-spacing: 0.1em; text-transform: uppercase; }
.notes p { margin: 0 0 10px; }

.pick .ico { display: inline-flex; color: var(--tone); }
.pick .ico .i { width: 32px; height: 32px; stroke-width: 1.75; }
.dot .i { width: 16px; height: 16px; }
.dot.gate:not(.now) { color: var(--stamp); }
.gatebox b { display: inline-flex; align-items: center; gap: 6px; }
.done-card b { display: flex; justify-content: center; color: var(--stamp); }