/* ---------- Reproductor del tutorial ---------- */
.tut .title { margin-bottom: 8px; }
.tut .subtitle { margin-bottom: 24px; }
.tut-player { background: #0b0b0f; border: 1px solid var(--line-gold); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); margin-bottom: 24px; }
.tut-player:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 16px; border-radius: 0; }
.stage-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #f0f2f5; }
.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; font-family: "Segoe UI", Helvetica, Arial, sans-serif; color: #1c1e21; }
.screen { position: absolute; inset: 0; background: #f0f2f5; }

.tut-controls { display: flex; align-items: center; gap: 10px; padding: 12px 4px 4px; flex-wrap: wrap; }
.progress { flex: 1; min-width: 120px; height: 6px; background: #1d1d24; border-radius: 999px; overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--gold-grad); transition: width .4s; }
.voice-toggle { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); }
.voice-toggle input { width: auto; margin: 0; accent-color: var(--gold); }
.tut-steps { list-style: none; padding: 8px 4px 2px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tut-steps li { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tut-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1d1d24; font-size: .7rem; }
.tut-steps li.seen { color: var(--text-2); }
.tut-steps li.on { color: #1b1505; background: var(--gold-grad); border-color: transparent; font-weight: 600; }
.tut-steps li.on span { background: rgba(0,0,0,.15); }
.tut-help h2 { margin-bottom: 8px; }

/* Cursor, flecha, aro y clic */
.cursor { position: absolute; width: 34px; height: 34px; z-index: 30; pointer-events: none; transition-property: left, top; transition-timing-function: cubic-bezier(.45,.05,.25,1);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.cursor.press { transform: scale(.85); }
.ring { position: absolute; z-index: 25; border: 4px solid #d4af37; border-radius: 12px; opacity: 0; pointer-events: none;
  transition: all .45s ease; box-shadow: 0 0 0 6px rgba(212,175,55,.25), 0 0 30px rgba(212,175,55,.6); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(212,175,55,.12), 0 0 40px rgba(212,175,55,.8); } }
.arrow { position: absolute; width: 120px; height: 60px; z-index: 26; opacity: 0; pointer-events: none; transition: all .45s ease;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); animation: nudge .9s ease-in-out infinite; }
.arrow.flip { transform: scaleX(-1); animation-name: nudge-flip; }
@keyframes nudge { 50% { translate: 10px 0; } }
@keyframes nudge-flip { 50% { translate: -10px 0; } }
.click-fx { position: absolute; z-index: 29; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid #d4af37; opacity: 0; pointer-events: none; }
.click-fx.go { animation: clickfx .55s ease-out; }
@keyframes clickfx { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(4); } }

/* Avatar y subtítulos */
.avatar-box { position: absolute; left: 20px; bottom: 18px; z-index: 28; display: flex; align-items: flex-end; gap: 12px; max-width: 760px; pointer-events: none; }
.avatar-svg { width: 104px; height: 104px; flex: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.avatar-box.talk .mouth { animation: talk .22s ease-in-out infinite alternate; }
@keyframes talk { from { ry: 1.5; } to { ry: 5; } }
.bubble { background: rgba(10,10,14,.92); color: #f4f0e6; border: 1px solid rgba(212,175,55,.55); border-radius: 16px 16px 16px 4px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.bubble .who { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #d4af37; font-weight: 700; margin-bottom: 4px; }
.bubble p { margin: 0; font-size: 21px; line-height: 1.38; }
.step-badge { position: absolute; top: 14px; right: 16px; z-index: 28; background: rgba(10,10,14,.88); color: #f3dc8a; border: 1px solid rgba(212,175,55,.5); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 600; }
.big-play { position: absolute; left: 50%; top: 42%; z-index: 40; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #f8e7a1, #d4af37 55%, #a8842a); color: #1b1505; font-size: 44px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }

/* ---------- Pantallas recreadas ---------- */
.b-bar { height: 44px; background: #dee1e6; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.b-bar .dots i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; margin-right: 6px; }
.b-bar .dots i:nth-child(2) { background: #febc2e; } .b-bar .dots i:nth-child(3) { background: #28c840; }
.b-url { flex: 1; background: #fff; border-radius: 16px; padding: 6px 16px; font-size: 15px; color: #444; }
.b-page { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; overflow: hidden; background: #f0f2f5; }
.m-top { height: 56px; background: #fff; border-bottom: 1px solid #dadde1; display: flex; align-items: center; gap: 24px; padding: 0 24px; font-size: 15px; }
.m-logo { font-weight: 700; color: #0866ff; font-size: 18px; }
.m-crumb { color: #65676b; }
.m-mode { margin-left: auto; background: #fff4d6; color: #8a6100; border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.pad { padding: 36px 60px; }
.row-sp { display: flex; justify-content: space-between; align-items: center; }
.row-sp h3, .wiz h3, .m-main h3 { font-size: 26px; margin: 0 0 20px; font-family: inherit; color: #1c1e21; letter-spacing: 0; }
.m-btn { border: 0; border-radius: 8px; padding: 12px 22px; font: 600 16px "Segoe UI", sans-serif; background: #e4e6eb; color: #1c1e21; }
.m-btn.green { background: #42b72a; color: #fff; }
.m-btn.blue { background: #0866ff; color: #fff; }
.m-btn.small { padding: 6px 14px; font-size: 14px; }
.m-btn.done { background: #e7f3e8; color: #1e7b34; }
.m-empty { background: #fff; border-radius: 10px; padding: 60px; text-align: center; color: #65676b; font-size: 17px; margin-top: 10px; }
.wiz { background: #fff; margin: 26px auto; width: 1040px; border-radius: 12px; padding: 28px 40px; min-height: 560px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.wiz-steps { display: flex; gap: 28px; font-size: 15px; color: #65676b; margin-bottom: 26px; }
.wiz-steps .on { color: #0866ff; font-weight: 600; } .wiz-steps .done { color: #1e7b34; font-weight: 600; }
.wiz label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 18px; color: #1c1e21; }
.m-input { margin-top: 8px; height: 46px; border: 1px solid #ccd0d5; border-radius: 8px; padding: 11px 14px; font-size: 17px; font-weight: 400; background: #fff; min-width: 420px; color: #1c1e21; white-space: nowrap; overflow: hidden; }
.m-input.filled { color: #444; background: #f5f6f7; }
.m-input.focus { border-color: #0866ff; box-shadow: 0 0 0 3px rgba(8,102,255,.2); }
.m-input.focus::after { content: "|"; animation: blink .8s step-end infinite; color: #0866ff; }
.m-input.wide { width: 760px; }
.m-input.secret { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
@keyframes blink { 50% { opacity: 0; } }
.wiz-foot { position: absolute; left: 40px; right: 40px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #0866ff; }
.m-main .wiz-foot { position: static; margin-top: 26px; }
.wiz-foot.right { justify-content: flex-end; }
.uc { display: flex; gap: 40px; }
.uc-filter { width: 260px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: #1c1e21; }
.uc-filter span { padding: 4px 8px; border-radius: 6px; }
.uc-filter span.on { background: #e7f0ff; color: #0866ff; font-weight: 600; }
.uc-list { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.uc-item { border: 1px solid #dadde1; border-radius: 10px; padding: 14px 18px; font-size: 16px; position: relative; }
.uc-item b { display: block; } .uc-item small { color: #65676b; font-size: 14px; }
.uc-item.pick { padding-left: 54px; border-color: #0866ff; }
.chk { position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border: 2px solid #8a8d91; border-radius: 5px; background: #fff; }
.chk.on { background: #0866ff; border-color: #0866ff; }
.chk.on::after { content: "✓"; color: #fff; position: absolute; left: 3px; top: -3px; font-size: 16px; font-weight: 700; }
.radio { display: flex; align-items: center; gap: 14px; border: 1px solid #dadde1; border-radius: 10px; padding: 18px; font-size: 17px; margin-bottom: 14px; }
.radio .r { width: 22px; height: 22px; border: 2px solid #8a8d91; border-radius: 50%; flex: none; }
.radio .r.on { border: 7px solid #0866ff; }
.sum { display: flex; gap: 40px; background: #f5f6f7; border-radius: 10px; padding: 20px; font-size: 17px; }
.sum small { display: block; color: #65676b; font-size: 14px; }
.note { margin-top: 20px; background: #fff4d6; color: #6b4b00; border-radius: 8px; padding: 12px 16px; font-size: 16px; }
.m-body { display: flex; position: absolute; top: 56px; bottom: 0; left: 0; right: 0; }
.m-side { width: 280px; background: #fff; border-right: 1px solid #dadde1; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; }
.m-nav { padding: 11px 14px; border-radius: 8px; font-size: 16px; color: #1c1e21; }
.m-nav.on { background: #e7f0ff; color: #0866ff; font-weight: 600; }
.m-main { flex: 1; padding: 30px 44px; }
.todo { display: flex; flex-direction: column; gap: 12px; width: 760px; }
.todo-item { background: #fff; border: 1px solid #dadde1; border-radius: 10px; padding: 18px; font-size: 17px; display: flex; align-items: center; gap: 14px; }
.todo-item span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e7f0ff; color: #0866ff; font-weight: 700; }
.todo-item em { margin-left: auto; font-style: normal; font-size: 24px; color: #65676b; }
.sub { color: #65676b; font-size: 16px; } .sub.small { font-size: 15px; margin-top: 16px; }
.perm { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid #dadde1; border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; width: 820px; }
.perm code { font: 600 17px Consolas, monospace; color: #1c1e21; background: none; border: 0; padding: 0; flex: 1; }
.perm-st { color: #65676b; font-size: 15px; }
.setting { background: #fff; border: 1px solid #dadde1; border-radius: 10px; padding: 22px; width: 880px; font-size: 17px; }
.setting small { display: block; color: #65676b; font-size: 14px; margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; }
.grid2 label { font-size: 15px; font-weight: 600; color: #1c1e21; margin: 0; }
.grid2 .m-input { min-width: 0; }
/* Web de la plataforma (recreada) */
.c-top { height: 60px; background: #0b0b0f; color: #cfc9bc; display: flex; align-items: center; gap: 28px; padding: 0 30px; font-size: 16px; }
.c-brand { font-weight: 700; color: #f3dc8a; letter-spacing: .08em; text-transform: uppercase; }
.c-top .c-btn { margin-left: auto; }
.c-main { background: #0f0f13; position: absolute; top: 60px; bottom: 0; left: 0; right: 0; padding: 34px 50px; color: #f4f0e6; }
.c-main .grid2 label { color: #cfc9bc; }
.c-h { font-size: 26px; color: #f3dc8a; margin: 0 0 22px; font-family: Georgia, serif; }
.c-input { margin-top: 8px; height: 46px; border: 1px solid #2c2c34; border-radius: 10px; padding: 11px 14px; font-size: 17px; background: #0b0b0f; color: #f4f0e6; overflow: hidden; white-space: nowrap; }
.c-input.focus { border-color: #d4af37; }
.c-btn { border: 0; border-radius: 10px; padding: 13px 22px; font: 700 16px "Segoe UI", sans-serif; color: #1b1505; background: linear-gradient(135deg, #f8e7a1, #d4af37 55%, #a8842a); margin-top: 18px; }
.c-top .c-btn { margin-top: 0; }
.c-ok { display: none; margin-top: 22px; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.5); color: #f3dc8a; border-radius: 10px; padding: 14px 18px; font-size: 17px; }
.c-ok.show { display: block; margin-top: 0; margin-bottom: 20px; }
.c-empty { color: #9d978b; font-size: 18px; text-align: center; padding: 60px; border: 1px dashed #2c2c34; border-radius: 12px; }
.c-pages { display: flex; gap: 20px; }
.c-page { flex: 1; background: #141419; border: 1px solid #24242c; border-radius: 12px; padding: 20px; font-size: 18px; display: flex; align-items: center; gap: 14px; }
.c-page .av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #d4af37; color: #f3dc8a; font-weight: 700; }
.c-page em { margin-left: auto; font-style: normal; font-size: 13px; color: #7fdc97; border: 1px solid rgba(63,174,90,.5); border-radius: 999px; padding: 3px 10px; }
.c-final { margin-top: 26px; font-size: 20px; color: #f3dc8a; display: inline-block; padding: 10px 6px; }
.fb-dialog { width: 520px; margin: 50px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.15); padding: 30px; font-size: 17px; }
.fb-head { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.fb-pages { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.fb-pages label { position: relative; padding: 14px 14px 14px 54px; border: 1px solid #dadde1; border-radius: 10px; font-size: 17px; }
.fb-pages .chk { top: 13px; }
.fb-btn { width: 100%; border: 0; border-radius: 8px; padding: 14px; background: #0866ff; color: #fff; font: 600 18px "Segoe UI", sans-serif; }
/* ---------- Cámara, foco y efectos ---------- */
.cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.45,.05,.2,1); will-change: transform; }
.ring.spot { box-shadow: 0 0 0 6px rgba(212,175,55,.3), 0 0 30px rgba(212,175,55,.6), 0 0 0 4000px rgba(5,5,10,.45); }
.tcard { position: absolute; left: 22px; top: 18px; z-index: 31; display: flex; flex-direction: column; gap: 2px; padding: 10px 18px 12px;
  background: linear-gradient(135deg, rgba(20,18,10,.95), rgba(10,10,14,.95)); border: 1px solid rgba(212,175,55,.6); border-left: 5px solid #d4af37;
  border-radius: 10px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; transform: translateX(-30px); }
.tcard.in { animation: tcard 5s ease forwards; }
@keyframes tcard { 0% { opacity: 0; transform: translateX(-30px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: .0; transform: translateX(-10px); } }
.tcard span { font: 700 13px Inter, sans-serif; letter-spacing: .28em; color: #d4af37; }
.tcard b { font: 700 25px Cinzel, Georgia, serif; letter-spacing: .02em; color: #f8e7a1; }
.hint { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 33; background: #d4af37; color: #1b1505;
  font: 700 20px Inter, sans-serif; padding: 10px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.hint.show { opacity: 1; }
.hint.btnmode { background: transparent; box-shadow: none; pointer-events: auto; }
.hint.btnmode .btn { font-size: 20px; padding: 12px 26px; }
.hint.good { background: #3fae5a; color: #fff; }
.hint.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(calc(-50% - 10px)); } 40%, 80% { transform: translateX(calc(-50% + 10px)); } }
.practice .cursor, .practice .click-fx:not(.go) { display: none; }
.practice .screen [id^="t-"], .practice .screen [id^="nav-"] { cursor: pointer; }
.outro { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(800px 400px at 50% 30%, rgba(212,175,55,.22), transparent 70%), #07070a; color: #f4f0e6; opacity: 0; pointer-events: none; transition: opacity .8s; }
.outro.show { opacity: 1; }
.outro h2 { font: 700 48px Cinzel, Georgia, serif; color: #f8e7a1; letter-spacing: .1em; text-transform: uppercase; margin: 6px 0; }
.outro p { font-size: 24px; color: #cfc9bc; margin: 4px; }
.outro .wa-line { color: #7fdc97; font-weight: 600; }
.outro.show .intro-emblem { animation: pop .8s ease; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: absolute; inset: 0; z-index: 34; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 110%; transform: rotate(720deg); } }
.start-screen { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(700px 360px at 50% 40%, rgba(212,175,55,.2), rgba(7,7,10,.82) 70%); }
.start-screen .big-play { position: static; margin: 0; }
.start-opts { display: flex; gap: 14px; }
.start-opts .btn { font-size: 20px; padding: 14px 28px; }
.mode-switch { display: flex; border: 1px solid var(--line-gold); border-radius: 999px; padding: 3px; }
.mode-switch button { background: none; border: 0; color: var(--text-2); font: 600 .85rem Inter, sans-serif; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.mode-switch button.on { background: var(--gold-grad); color: #1b1505; }
.v-head, .v-cap { display: none; }

/* ---------- Modo grabación (lo usa el generador de video) ---------- */
.rec { margin: 0; padding: 0; }
.rec .tut-player { border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; background: #07070a; }
.rec .stage-wrap { border-radius: 0; }
.rec-h .tut-player { width: 1280px; height: 720px; }
.rec-v .tut-player { width: 720px; height: 1280px; display: flex; flex-direction: column; justify-content: center; gap: 0;
  background: radial-gradient(600px 500px at 50% 10%, rgba(212,175,55,.18), transparent 60%), #07070a; }
.rec-v .v-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 30px 36px; }
.rec-v .v-brand { font: 700 34px Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #f8e7a1; }
.rec-v .v-step { font: 700 18px Inter, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #1b1505; background: linear-gradient(135deg, #f8e7a1, #d4af37); padding: 6px 18px; border-radius: 999px; }
.rec-v .stage-wrap { border-top: 2px solid #d4af37; border-bottom: 2px solid #d4af37; }
.rec-v .avatar-box, .rec-v .step-badge { display: none; }
.rec-v .tcard { transform-origin: 0 0; }
.rec-v .v-cap { display: flex; align-items: flex-start; gap: 16px; padding: 34px 30px 0; min-height: 300px; }
.rec-v .v-cap .avatar-svg { width: 110px; height: 110px; }
.rec-v .v-cap.talk .mouth { animation: talk .22s ease-in-out infinite alternate; }
.rec-v .v-cap p { margin: 0; font: 600 30px/1.35 Inter, sans-serif; color: #fff; background: rgba(20,20,26,.9); border: 1px solid rgba(212,175,55,.5); border-radius: 18px 18px 18px 4px; padding: 18px 22px; }

/* Ajustes con los nombres y el diseño actuales de Meta */
.m-top { gap: 6px; }
.m-logo { margin-right: 18px; }
.m-menu { font-size: 14px; color: #1c1e21; padding: 6px 10px; border-radius: 6px; }
.m-menu.on { background: #e7f0ff; color: #0866ff; font-weight: 600; }
.m-side { width: 300px; gap: 2px; }
.m-nav { padding: 9px 14px; font-size: 15px; }
.m-nav.sub { padding-left: 34px; font-size: 14px; color: #444; }
.uc-sel { display: inline-block; border: 1px solid #ccd0d5; border-radius: 8px; padding: 6px 14px; font-size: 16px; background: #fff; margin-bottom: 8px; }
.m-main h3 { margin-bottom: 12px; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid #dadde1; margin-bottom: 10px; font-size: 16px; }
.tabs span { padding: 8px 0; color: #65676b; }
.tabs span.on { color: #0866ff; border-bottom: 3px solid #0866ff; font-weight: 600; }
.perm { display: grid; grid-template-columns: 1fr 190px 130px; gap: 14px; padding: 10px 16px; margin-bottom: 8px; width: 880px; }
.perm.head { background: none; border: 0; font-size: 14px; color: #65676b; font-weight: 600; padding: 4px 16px; margin: 0; }
.perm-name small { display: block; color: #65676b; font-size: 13px; }
.perm-st { align-self: center; color: #1e7b34; font-weight: 600; }
.perm .m-btn { align-self: center; justify-self: start; }
.todo-item.dim { color: #8a8d91; }
.todo-item small { font-size: 14px; margin-left: 6px; }
.intro { position: absolute; inset: 0; background: radial-gradient(800px 400px at 50% 20%, rgba(212,175,55,.18), transparent 70%), #0b0b0f; color: #f4f0e6; text-align: center; padding-top: 90px; }
.intro-emblem { width: 110px; height: 110px; margin: 0 auto 18px; border-radius: 50%; border: 6px solid #d4af37; display: grid; place-items: center; font: 700 44px Georgia, serif; color: #f3dc8a; }
.intro h2 { font: 700 42px Georgia, serif; color: #f3dc8a; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.intro p { font-size: 22px; color: #cfc9bc; }
.intro-steps { display: flex; justify-content: center; gap: 30px; margin-top: 26px; }
.intro-steps div { border: 1px solid rgba(212,175,55,.5); border-radius: 14px; padding: 18px 30px; font-size: 21px; min-width: 300px; }
.intro-steps b { display: block; font: 700 34px Georgia, serif; color: #d4af37; }
.intro-steps small { color: #9d978b; font-size: 16px; }