/* TrainerPY — tema oscuro profesional, acento menta */
:root {
  --bg: #0D1012;
  --surface: #161A1D;
  --surface-2: #1E2326;
  --surface-3: #262C30;
  --line: #2A3135;
  --ink: #F1F5F3;
  --muted: #8B9592;
  --dim: #5E6865;
  --accent: #3DE3A0;
  --accent-2: #24C784;
  --accent-ink: #04281A;
  --accent-soft: rgba(61, 227, 160, .13);
  --warn: #F4B740;
  --warn-soft: rgba(244, 183, 64, .14);
  --red: #F2585D;
  --red-soft: rgba(242, 88, 93, .14);
  --body-base: #2B3236;
  --body-line: #0D1012;
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --nav-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--ink); font: 500 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  font-feature-settings: "tnum" 1;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }
a { color: var(--accent); }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- arranque */
.boot { height: 100vh; display: grid; place-items: center; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- login */
.login {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: calc(20px + var(--safe-t)) 22px calc(26px + var(--safe-b));
  max-width: 460px; margin: 0 auto;
}
.login-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 0 30px; }
.login-hero .body-wrap { width: 150px; margin-bottom: 18px; }
.logo { display: flex; align-items: center; gap: 10px; justify-content: center; }
.logo-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.logo-mark svg { width: 26px; height: 26px; stroke-width: 2.6; }
.logo b { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.login-hero p { color: var(--muted); margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.login form { display: grid; gap: 12px; }

/* ---------- estructura */
.shell { min-height: 100vh; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 18px); }
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13, 16, 18, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: calc(12px + var(--safe-t)) 18px 12px;
  display: flex; align-items: center; gap: 10px;
}
.top .titles { flex: 1; min-width: 0; }
.top h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .sub { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 1px; }
.wrap { padding: 4px 18px 0; max-width: 640px; margin: 0 auto; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
  background: rgba(19, 23, 25, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); display: flex; justify-content: center;
}
.tabbar a {
  flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--dim); text-decoration: none; font-size: 11.5px; font-weight: 700; position: relative;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--accent); }
.tabbar a .dot { position: absolute; top: 9px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- controles */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px; border-radius: var(--radius-md); border: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; text-decoration: none;
  transition: transform .1s, filter .15s;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.btn.danger { background: var(--red-soft); color: var(--red); font-weight: 700; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: .5; }
.icon-btn {
  width: 42px; height: 42px; flex: none; border-radius: 12px; border: 0;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.plain { background: transparent; }
.icon-btn.danger { color: var(--red); }
.icon-btn.accent { background: var(--accent-soft); color: var(--accent); }

.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%; min-height: 52px; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); font-size: 16px; font-weight: 600; outline: none;
}
.input::placeholder { color: var(--dim); font-weight: 500; }
.input:focus { border-color: var(--accent); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.45; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--dim); }
.input-icon .input { padding-left: 46px; }
.input-icon .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.hint { font-size: 13px; color: var(--muted); margin: 0; font-weight: 500; }
.err { background: var(--red-soft); color: var(--red); padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 38px; padding: 0 16px; border-radius: 11px; border: 0;
  background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 14px;
}
.tab.on { background: var(--accent); color: var(--accent-ink); }
.seg { display: flex; background: var(--surface); border-radius: 13px; padding: 4px; margin: 0 0 16px; gap: 4px; }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--muted); font-size: 14px; }
.seg button.on { background: var(--surface-3); color: var(--ink); }

/* días de la semana */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 2px 0 16px; }
.wd {
  border: 0; border-radius: 13px; padding: 9px 0 8px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface); color: var(--dim); font-weight: 800; font-size: 14px;
}
.wd small { font-size: 10.5px; font-weight: 700; }
.wd.has { color: var(--ink); }
.wd.has small { color: var(--accent); }
.wd.on { background: var(--accent); color: var(--accent-ink); }
.wd.on small { color: var(--accent-ink); }
.wd.today::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* ---------- tarjetas y listas */
.card { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.card + .card { margin-top: 12px; }
.list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.item {
  display: flex; align-items: center; gap: 13px; padding: 12px;
  background: var(--surface); border-radius: var(--radius-md); text-decoration: none; color: inherit;
  border: 0; width: 100%; text-align: left;
}
.item .grow { flex: 1; min-width: 0; }
.item .t { font-weight: 700; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { color: var(--muted); font-size: 13px; margin-top: 2px; font-weight: 600; }
.item .chev { color: var(--dim); }
.item.off { opacity: .5; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.red { background: var(--red-soft); color: var(--red); }
.avatar {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--accent-soft); color: var(--accent);
}
.thumb {
  width: 58px; height: 58px; flex: none; border-radius: 13px; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center; color: var(--dim);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .mini-body { width: 70%; }
.section-h { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
.section-h h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.2px; }
.section-h:first-child { margin-top: 6px; }
.section-h a, .section-h button { font-size: 14px; font-weight: 700; color: var(--accent); background: none; border: 0; text-decoration: none; }

.empty { text-align: center; padding: 36px 18px; color: var(--muted); }
.empty .ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: var(--surface); display: grid; place-items: center; color: var(--accent); }
.empty .ic svg { width: 30px; height: 30px; }
.empty h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.empty p { margin: 0 auto 18px; max-width: 32ch; }

.fab {
  position: fixed; right: 18px; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 25;
  height: 54px; padding: 0 22px 0 18px; border-radius: 16px; border: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.fab svg { width: 22px; height: 22px; stroke-width: 2.6; }

/* ---------- mapa muscular */
.body-wrap { position: relative; }
.body-svg { width: 100%; height: auto; display: block; overflow: visible; }
.body-svg .outline path { stroke: #121518; stroke-width: 4; stroke-linejoin: round; }
.body-svg .outline path, .body-svg .fillonly .head path { fill: #2F3439; }
.body-svg .outline g path, .body-svg .fillonly path { stroke: none; }
.body-svg .fillonly > path { fill-opacity: 1; }
.body-svg .hair { fill: #1C2024; stroke: none; }
.body-svg .det { fill: none; stroke: #1A1D21; stroke-width: 1.8; stroke-linecap: round; opacity: .9; }
.body-svg .m path { stroke: #16191C; stroke-width: 2; stroke-linejoin: round; transition: fill .35s, stroke .35s, opacity .35s; }
.body-svg .m.l1 path, .body-svg .m.r0 path, .body-svg .m.sel path { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--accent); stroke-width: 2.4; }
.body-svg .m.l2 path, .body-svg .m.r1 path { fill: color-mix(in srgb, var(--accent) 28%, transparent); stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 2; }
.body-svg .m.r2 path { fill: color-mix(in srgb, var(--warn) 35%, transparent); stroke: color-mix(in srgb, var(--warn) 80%, transparent); stroke-width: 2; }
.body-svg.click .m { cursor: pointer; }
@media (hover: hover) { .body-svg.click .m:hover path { fill: color-mix(in srgb, var(--accent) 40%, transparent); stroke: var(--accent); } }
.body-svg.anim .m.l1, .body-svg.anim .m.r0 { animation: glow 2.6s ease-in-out .3s 2; }
@keyframes glow { 50% { opacity: .65; } }
.body-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.body-pair .lbl { text-align: center; font-size: 12px; font-weight: 700; color: var(--dim); margin-top: 6px; }
.muscle-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.muscle-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- inicio del alumno */
.hello { margin: 2px 0 16px; }
.hello h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; margin: 0; line-height: 1.15; }
.hello p { color: var(--muted); margin: 4px 0 0; }
.coach-msg {
  display: flex; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
  border-left: 3px solid var(--accent);
}
.coach-msg .avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.coach-msg b { font-size: 13px; color: var(--accent); display: block; margin-bottom: 2px; }
.coach-msg p { margin: 0; white-space: pre-line; font-size: 14.5px; }
.today-card { background: var(--surface); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: 1fr 112px; gap: 14px; align-items: center; }
.today-card .k { font-size: 13px; color: var(--muted); font-weight: 700; }
.today-card h3 { font-size: 22px; font-weight: 800; margin: 4px 0 10px; line-height: 1.2; letter-spacing: -0.4px; }
.today-card .stats { display: flex; gap: 16px; margin-bottom: 16px; }
.today-card .stats div { font-size: 12px; color: var(--muted); font-weight: 600; }
.today-card .stats b { display: block; font-size: 19px; color: var(--ink); font-weight: 800; }
.today-card .btn { grid-column: 1 / -1; }
.day-notes { background: var(--surface); border-radius: var(--radius-md); padding: 13px 15px; margin-top: 12px; font-size: 14.5px; }
.day-notes b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--warn); margin-bottom: 4px; }
.day-notes b svg { width: 16px; height: 16px; }
.day-notes p { margin: 0; white-space: pre-line; }
.mini-list .item { padding: 10px; }
.mini-list .thumb { width: 48px; height: 48px; border-radius: 11px; }

/* ---------- modo entrenamiento */
.wo-head { position: sticky; top: calc(66px + var(--safe-t)); z-index: 15; background: var(--bg); padding: 2px 0 12px; }
.wo-bar { display: flex; align-items: center; gap: 12px; }
.wo-clock { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; min-width: 88px; }
.wo-clock small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.progress { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.wo-count { font-size: 14px; font-weight: 800; white-space: nowrap; }

.ex { background: var(--surface); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.ex.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.ss-tag { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--warn); margin: 18px 2px 8px; }
.ss-tag::after { content: ""; flex: 1; height: 1px; background: var(--warn-soft); }
.ex-media { position: relative; background: #fff; }
.ex-media img { width: 100%; max-height: 240px; object-fit: contain; }
.ex-media .play {
  position: absolute; right: 12px; bottom: 12px; height: 38px; padding: 0 14px 0 10px; border-radius: 11px; border: 0;
  background: rgba(13,16,18,.85); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.ex-media .play svg { width: 18px; height: 18px; color: var(--accent); fill: var(--accent); }
.ex-body { padding: 15px 15px 16px; }
.ex-top { display: flex; gap: 12px; align-items: flex-start; }
.ex-top .grow { flex: 1; min-width: 0; }
.ex-name { font-size: 18px; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -0.3px; }
.ex-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ex-top .mini { width: 46px; flex: none; }
.ex-target { display: flex; gap: 8px; margin: 14px 0 0; }
.ex-target div { flex: 1; background: var(--surface-2); border-radius: 12px; padding: 9px 10px; }
.ex-target small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.ex-target b { font-size: 17px; font-weight: 800; white-space: nowrap; }
.ex-note { font-size: 14px; background: var(--warn-soft); color: #F8D58C; padding: 10px 12px; border-radius: 12px; margin: 12px 0 0; display: flex; gap: 8px; }
.ex-note svg { width: 18px; height: 18px; color: var(--warn); margin-top: 1px; }
.last-time { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin: 12px 0 0; font-weight: 600; flex-wrap: wrap; }
.last-time svg { width: 16px; height: 16px; }
.last-time b { color: var(--ink); }
.suggest { color: var(--accent); font-weight: 700; flex-wrap: nowrap; align-items: flex-start; }
.suggest svg { margin-top: 2px; }

.sets { margin-top: 14px; }
.sets-h, .set-row { display: grid; grid-template-columns: 44px 1fr 1fr 52px; gap: 8px; align-items: center; }
.sets-h { font-size: 11.5px; color: var(--dim); font-weight: 800; padding: 0 0 6px; text-align: center; }
.set-row { margin-bottom: 8px; }
.set-n { height: 48px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.set-row input {
  width: 100%; height: 48px; border: 1.5px solid transparent; border-radius: 12px; background: var(--surface-2);
  text-align: center; font-size: 18px; font-weight: 800; outline: none; -moz-appearance: textfield; padding: 0 4px;
}
.set-row input::placeholder { color: var(--dim); font-weight: 700; }
.set-row input:focus { border-color: var(--accent); }
.set-row input::-webkit-outer-spin-button, .set-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.set-ok { height: 48px; border-radius: 12px; border: 0; background: var(--surface-3); color: var(--dim); display: grid; place-items: center; transition: background .15s, transform .1s; }
.set-ok svg { width: 22px; height: 22px; stroke-width: 3; }
.set-ok:active { transform: scale(.92); }
.set-row.ok .set-n { background: var(--accent-soft); color: var(--accent); }
.set-row.ok input { background: var(--accent-soft); color: var(--accent); }
.set-row.ok .set-ok { background: var(--accent); color: var(--accent-ink); }
.ex-actions { display: flex; gap: 8px; margin-top: 6px; }
.ex-actions .btn { flex: 1; }
.howto { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.howto summary { color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary svg { width: 18px; height: 18px; }
.howto p { white-space: pre-line; margin: 10px 0 0; font-size: 14.5px; color: #CDD5D2; }

/* temporizador de descanso */
.timer {
  position: fixed; left: 14px; right: 14px; bottom: calc(var(--nav-h) + var(--safe-b) + 10px); z-index: 40;
  max-width: 500px; margin: 0 auto; overflow: hidden;
  background: var(--surface-3); border-radius: 20px; padding: 12px 12px 12px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.7);
  transform: translateY(160%); transition: transform .32s cubic-bezier(.2,.9,.3,1.15);
}
.timer.show { transform: none; }
body.has-timer .shell { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 110px); }
.timer .ring { width: 54px; height: 54px; flex: none; }
.timer .ring circle { fill: none; stroke-width: 5; }
.timer .ring .bg { stroke: var(--surface); }
.timer .ring .fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s linear; }
.timer .num { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.timer .lbl { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.timer .grow { flex: 1; }
.timer .icon-btn { background: var(--surface); width: 44px; height: 44px; font-weight: 800; font-size: 13px; }
.timer.end { background: var(--accent); color: var(--accent-ink); }
.timer.end .lbl { color: var(--accent-ink); }
.timer.end .icon-btn { background: rgba(0,0,0,.15); color: var(--accent-ink); }

/* ---------- progreso */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: var(--surface); border-radius: var(--radius-md); padding: 13px 12px; }
.kpi b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.kpi small { font-size: 12px; color: var(--muted); font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal span { aspect-ratio: 1; border-radius: 7px; background: var(--surface-2); }
.cal span.on { background: var(--accent); }
.cal span.today { box-shadow: inset 0 0 0 2px var(--warn); }
.cal span.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; font-size: 11px; color: var(--dim); text-align: center; font-weight: 700; margin-bottom: 6px; }
.prog { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface); border-radius: var(--radius-md); border: 0; width: 100%; text-align: left; }
.prog .grow { flex: 1; min-width: 0; }
.prog .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog .s { color: var(--muted); font-size: 13px; font-weight: 600; }
.prog .w { font-size: 20px; font-weight: 800; text-align: right; white-space: nowrap; }
.prog .w small { font-size: 12px; color: var(--muted); }
.spark { width: 64px; height: 28px; flex: none; }
.chart { width: 100%; height: 170px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .ar { fill: url(#chartFill); }
.chart .pt { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.chart text { fill: var(--dim); font-size: 10px; font-weight: 700; font-family: var(--font); }
.hist-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hist-row:last-child { border-bottom: 0; }
.hist-row .d { color: var(--muted); font-weight: 600; }
.hist-row .v { text-align: right; font-weight: 700; }
.sess { background: var(--surface); border-radius: var(--radius-md); padding: 13px 14px; }
.sess .top-l { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sess .t { font-weight: 800; }
.sess .s { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.sess .c { margin: 10px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: 11px; font-size: 14px; white-space: pre-line; }
.rpe { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: 13px; }
.rpe.low { background: var(--accent-soft); color: var(--accent); }
.rpe.mid { background: var(--warn-soft); color: var(--warn); }
.rpe.high { background: var(--red-soft); color: var(--red); }

/* ---------- entrenador: rutina */
.day-title-input {
  width: 100%; border: 0; border-bottom: 1.5px dashed var(--line); background: transparent;
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px; padding: 4px 0 8px; outline: none; margin-bottom: 4px;
}
.day-title-input:focus { border-bottom-color: var(--accent); border-bottom-style: solid; }
.ritem { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface); border-radius: var(--radius-md); }
.ritem .grow { flex: 1; min-width: 0; cursor: pointer; }
.ritem .t { font-weight: 700; line-height: 1.3; }
.ritem .s { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.ritem .moves { display: flex; flex-direction: column; gap: 2px; }
.ritem .moves .icon-btn { width: 32px; height: 28px; border-radius: 8px; }
.ritem .ss { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--warn-soft); color: var(--warn); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.toolbar { display: flex; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }
.toolbar .btn { flex: 1; min-width: 140px; }
.toolbar .btn:first-child { flex-basis: 100%; }
.picker-map { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 250px; margin: 0 auto 6px; }
.muscle-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.mchip { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13.5px; }
.mchip.on { background: var(--accent); color: var(--accent-ink); }
.mchip.sec { background: var(--accent-soft); color: var(--accent); }

/* ---------- hoja inferior (modal) */
.sheet-bg {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .62);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s;
}
.sheet-bg.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 620px; max-height: 93vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 24px 24px 0 0; border-top: 1px solid var(--line);
  padding: 10px 18px calc(22px + var(--safe-b));
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.sheet-bg.show .sheet { transform: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 0 auto 14px; }
.sheet h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 16px; }
.sheet form, .sheet .stack { display: grid; gap: 14px; }
.sheet .video { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.sheet .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.img-pick { display: flex; gap: 12px; align-items: center; }
.img-pick .thumb { width: 86px; height: 86px; }
.share-box { background: var(--surface); border-radius: var(--radius-md); padding: 15px; font-size: 15px; line-height: 1.7; }
.share-box b { color: var(--accent); }
.rpe-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.rpe-scale button { height: 46px; border-radius: 10px; border: 0; background: var(--surface-2); font-weight: 800; color: var(--muted); }
.rpe-scale button.on { color: #000; }
.rpe-label { text-align: center; font-weight: 700; color: var(--muted); font-size: 14px; min-height: 20px; }
.summary-big { text-align: center; padding: 6px 0 4px; }
.summary-big .trophy { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.summary-big .trophy svg { width: 36px; height: 36px; }
.summary-big h2 { margin: 0 0 4px; }
.pr { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--warn-soft); border-radius: 12px; color: var(--warn); font-weight: 700; }
.pr svg { width: 18px; height: 18px; }
.plates-out { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 110px; padding: 10px 0; }
.plates-out .bar { width: 60px; height: 10px; background: #9AA3A0; border-radius: 3px; }
.plates-out .pl { border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; writing-mode: vertical-rl; }
.plates-out .stop { width: 8px; height: 30px; background: #9AA3A0; border-radius: 2px; }

/* ---------- aviso */
.toast {
  position: fixed; left: 50%; top: calc(12px + var(--safe-t)); z-index: 90;
  transform: translate(-50%, -160%); transition: transform .3s ease;
  background: var(--surface-3); color: var(--ink); padding: 12px 18px; border-radius: 14px;
  font-weight: 700; max-width: calc(100% - 32px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.7);
  display: flex; align-items: center; gap: 8px;
}
.toast.show { transform: translate(-50%, 0); }
.toast.good::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.toast.bad { background: var(--red); color: #fff; }
.offline-pill { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 85; background: var(--warn); color: #2B1D00; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }

.profile-card { background: var(--surface); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.profile-card .avatar { width: 58px; height: 58px; font-size: 22px; border-radius: 17px; }
.menu { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: 0; background: none; text-align: left; font-weight: 700; color: var(--ink); text-decoration: none; }
.menu > * + * { border-top: 1px solid var(--line); }
.menu .chev { margin-left: auto; color: var(--dim); }
.menu svg.i:first-child { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================ página del entrenador */
.avatar.has-img, .bc-photo.has-img { overflow: hidden; padding: 0; }
.avatar.has-img img, .bc-photo.has-img img { width: 100%; height: 100%; object-fit: cover; }

.tlogin { min-height: 100vh; background: var(--bg); }
.tl-cover { position: relative; height: 42vh; min-height: 260px; max-height: 480px; overflow: hidden; }
.tl-bg { position: absolute; inset: 0; background: center 30% / cover no-repeat; }
.tl-bg.empty { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 45%, #000) 0%, var(--bg) 70%); }
.tl-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,13,0) 0%, rgba(7,9,13,.08) 40%, rgba(7,9,13,.7) 78%, var(--bg) 100%);
}
.tl-main {
  position: relative; z-index: 2; max-width: 460px; margin: -104px auto 0;
  padding: 0 22px calc(28px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tl-photo {
  width: 136px; height: 136px; border-radius: 50%; overflow: hidden; flex: none;
  border: 4px solid var(--bg); box-shadow: 0 0 0 3px var(--accent), 0 22px 50px -12px rgba(0,0,0,.8);
  background: var(--surface-2); display: grid; place-items: center;
  animation: popIn .6s cubic-bezier(.2,.9,.3,1.2) both;
}
.tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.tl-photo span { font-size: 46px; font-weight: 800; color: var(--accent); }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } }
.tl-role {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 800; letter-spacing: .2px;
}
.tl-role svg { width: 16px; height: 16px; stroke-width: 2.4; }
.tl-name { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; margin: 10px 0 0; }
.tl-bio { color: #C3CCC9; margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; max-width: 34ch; }
.tl-social { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.tl-social a {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
}
.tl-social svg { width: 18px; height: 18px; color: var(--accent); }
.tl-form { width: 100%; display: grid; gap: 12px; margin-top: 26px; text-align: left; }
.tl-form h2 { font-size: 15px; font-weight: 800; color: var(--muted); margin: 0 0 2px; text-align: center; }

/* directorio de entrenadores */
.dir { max-width: 900px; margin: 0 auto; padding: calc(28px + var(--safe-t)) 18px calc(30px + var(--safe-b)); }
.dir-h { text-align: center; margin-bottom: 22px; }
.dir-h h1 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin: 22px 0 6px; }
.dir-h p { color: var(--muted); margin: 0 0 16px; }
.dir-h .input-icon { max-width: 420px; margin: 0 auto; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.dcard { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface); text-decoration: none; color: #fff; display: block; }
.dimg { position: absolute; inset: 0; display: grid; place-items: center; }
.dimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dimg span { font-size: 44px; font-weight: 800; color: var(--c); }
.dcard:hover .dimg img { transform: scale(1.04); }
.dcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.88) 100%); }
.dtxt { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
.dtxt b { display: block; font-size: 16px; line-height: 1.2; }
.dtxt small { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 3px; }
.dtxt small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* tarjeta "Mi página" en el perfil del entrenador */
.brand-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; margin-bottom: 4px; }
.bc-cover { position: relative; height: 110px; overflow: hidden; }
.bc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--surface) 100%); }
.bc-body { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px; margin-top: -36px; position: relative; z-index: 2; }
.bc-photo { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent); background: var(--surface-2); display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--accent); flex: none; }
.bc-body .grow { padding-bottom: 6px; min-width: 0; }
.bc-body b { display: block; font-size: 17px; font-weight: 800; }
.bc-body small { color: var(--accent); font-weight: 700; font-size: 13px; }
.bc-link { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); font-weight: 700; font-size: 14px; overflow: hidden; }
.bc-link svg { width: 18px; height: 18px; color: var(--accent); }
.bc-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 16px 16px; }

/* editor de la página */
.bf-preview { position: relative; margin-bottom: 52px; }
.bf-cover { display: block; height: 150px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); cursor: pointer; }
.bf-cover img { width: 100%; height: 100%; object-fit: cover; }
.bf-empty { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 14px; }
.bf-photo { position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%); width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); background: var(--surface-2); display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.bf-photo img { width: 100%; height: 100%; object-fit: cover; }
.bf-photo svg { width: 30px; height: 30px; }
.slug-input { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.slug-input:focus-within { border-color: var(--accent); }
.slug-input span { padding: 0 2px 0 14px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.slug-input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 50px; font-size: 16px; font-weight: 700; padding-right: 14px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 3px rgba(0,0,0,.15); }
.sw.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }

/* vista previa y opciones de portada */
.bp { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.bp-cover { position: relative; height: 170px; overflow: hidden; }
.bp-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,18,.05) 0%, rgba(13,16,18,.4) 50%, rgba(13,16,18,.9) 82%, var(--bg) 100%); }
.bp-main { position: relative; z-index: 2; margin-top: -58px; padding: 0 12px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bp-photo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); background: var(--surface-2); display: grid; place-items: center; }
.bp-photo img { width: 100%; height: 100%; object-fit: cover; }
.bp-photo span { font-size: 30px; font-weight: 800; color: var(--accent); }
.bp .tl-role { margin-top: 10px; font-size: 11.5px; padding: 4px 10px; }
.bp .tl-role i { font-style: normal; }
.bp-name { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin-top: 6px; }
.cover-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cm { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 12px; }
.cm svg { width: 20px; height: 20px; }
.cm.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gpick { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 0; padding: 0; background: var(--surface); box-shadow: inset 0 0 0 2px transparent; position: relative; }
.gpick img { width: 100%; height: 100%; object-fit: cover; }
.gpick.on { box-shadow: 0 0 0 3px var(--accent); }
.row-btns { display: flex; gap: 8px; }
.row-btns > * { flex: 1; }

.demo-card { margin-bottom: 4px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.dc-h { display: flex; gap: 12px; align-items: flex-start; }
.dc-h > svg { width: 26px; height: 26px; color: var(--accent); margin-top: 2px; }
.dc-h b { display: block; font-size: 16px; }
.dc-h small { color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.45; display: block; margin-top: 2px; }

/* ======================================================================
   ESTILO 2.0: vidrio oscuro con acento lima
   (va al final para redefinir tokens y componentes)
   ====================================================================== */
:root {
  --bg: #07090D;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .075);
  --surface-3: rgba(255, 255, 255, .12);
  --line: rgba(255, 255, 255, .09);
  --glass-border: rgba(255, 255, 255, .085);
  --glass-hi: rgba(255, 255, 255, .06);
  --ink: #F3F6F1;
  --muted: #8E9894;
  --dim: #5F6966;
  --accent: #C8F542;
  --accent-2: #B4E22E;
  --accent-ink: #11160A;
  --accent-soft: rgba(200, 245, 66, .13);
  --radius: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --nav-h: 66px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, sans-serif;
}
html, body { background: var(--bg); }
body {
  font-family: var(--font); font-stretch: 100%;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(64, 92, 132, .30) 0%, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(200, 245, 66, .05) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
/* títulos con tipografía expandida */
.top h1, .hello h2, .tl-name, .dir-h h1, .sheet h2, .section-h h2, .today-card h3, .ex-name,
.empty h2, .kpi b, .wo-clock, .timer .num, .stat-line .n, .logo b, .bp-name, .summary-big h2, .profile-card .grow > div:first-child {
  font-family: var(--display); font-stretch: 118%; letter-spacing: -.3px;
}
.top h1 { font-size: 21px; }
.section-h h2 { font-size: 16px; }

/* superficies de vidrio */
.card, .item, .kpi, .prog, .sess, .ritem, .ex, .coach-msg, .day-notes, .profile-card, .menu, .brand-card,
.share-box, .today-card, .wd, .seg, .cm, .bp, .gpick, .dcard, .mini-list .item {
  background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--surface);
  border: 1px solid var(--glass-border);
}
.card, .ex, .today-card, .brand-card, .menu { border-radius: var(--radius); }
.item, .prog, .sess, .ritem, .kpi, .coach-msg, .day-notes, .profile-card { border-radius: var(--radius-md); }
.coach-msg { border-left: 1px solid var(--glass-border); box-shadow: inset 3px 0 0 var(--accent); }

.top { background: linear-gradient(180deg, rgba(7, 9, 13, .92) 60%, rgba(7, 9, 13, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: 16px; }
.top .icon-btn.plain { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 50%; }

/* botones en píldora */
.btn { border-radius: 999px; font-family: var(--display); font-stretch: 110%; letter-spacing: -.1px; }
.btn.ghost { background: var(--surface-2); border: 1px solid var(--glass-border); }
.btn.outline { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.icon-btn { border-radius: 50%; background: var(--surface-2); border: 1px solid var(--glass-border); }
.icon-btn.plain { border: 0; background: transparent; }
.fab { border-radius: 999px; bottom: calc(var(--nav-h) + var(--safe-b) + 26px); font-family: var(--display); font-stretch: 110%; }

/* campos */
.input, .slug-input, .set-row input { background: rgba(255, 255, 255, .04); border-color: var(--glass-border); }
.input { border-radius: var(--radius-sm); }
.input-icon .input { border-radius: 999px; }
.input:focus, .slug-input:focus-within { border-color: var(--accent); background: rgba(255, 255, 255, .06); }

/* chips: contorno en píldora, activo en lima */
.tab, .mchip, .chip {
  border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, .2); min-height: 38px;
}
.tab.on, .mchip.on { background: transparent; color: var(--accent); border-color: var(--accent); }
.mchip.sec { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge { border-radius: 999px; padding: 4px 10px; }
.badge.accent { background: var(--accent); color: var(--accent-ink); }
.seg { border-radius: 999px; padding: 5px; }
.seg button { border-radius: 999px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* días de la semana */
.wd { border-radius: 18px; }
.wd.on { background: var(--accent); border-color: var(--accent); }

/* barra inferior flotante */
.tabbar {
  left: 14px; right: 14px; bottom: calc(12px + var(--safe-b)); height: var(--nav-h); padding: 7px;
  border-radius: 999px; border: 1px solid var(--glass-border); gap: 4px; justify-content: space-between;
  background: rgba(16, 20, 26, .78); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); max-width: 520px; margin: 0 auto;
}
.tabbar a { flex: 1 1 0; max-width: none; flex-direction: row; gap: 8px; border-radius: 999px; color: #7D8784; font-size: 14px; font-family: var(--display); font-stretch: 110%; transition: flex-grow .3s, background .3s, color .3s; }

.tabbar a.on { flex-grow: 2.2; background: var(--accent); color: var(--accent-ink); }

.tabbar a.on svg { stroke-width: 2.2; }

.shell { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 34px); }
.timer { bottom: calc(var(--nav-h) + var(--safe-b) + 24px); border-radius: 26px; background: rgba(30, 36, 44, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); }
body.has-timer .shell { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 120px); }

/* ---------- tarjeta "rutina de hoy" (banner lima) */
.today-card {
  position: relative; overflow: hidden; display: block; padding: 20px 20px 18px;
  background: var(--accent); color: var(--accent-ink); border: 0;
}
.today-card::before {      /* textura suave */
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .55), transparent 45%),
              repeating-linear-gradient(115deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 9px);
}
.today-card > * { position: relative; }
.today-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; max-width: 62%; }
.today-card .tags span { border: 1.5px solid rgba(17, 22, 10, .55); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.today-card h3 { font-size: 27px; line-height: 1.02; text-transform: uppercase; margin: 0 0 14px; max-width: 64%; font-weight: 800; letter-spacing: -.5px; }
.today-card .k { color: rgba(17, 22, 10, .7); }
.today-card .stats { margin-bottom: 16px; max-width: 64%; }
.today-card .stats div { color: rgba(17, 22, 10, .7); }
.today-card .stats b { color: var(--accent-ink); font-family: var(--display); font-stretch: 115%; font-size: 21px; }
.today-card .body-wrap { position: absolute; right: -6px; top: 6px; bottom: 70px; width: 40%; display: flex; justify-content: center; }
.today-card .body-wrap .body-svg { height: 100%; width: auto; }
.today-card .btn { background: #0C0F0A; color: var(--accent); width: 100%; }
.today-card .badge.accent { background: #0C0F0A; color: var(--accent); }
.today-card .badge.warn { background: rgba(12, 15, 10, .85); color: var(--accent); }
/* el mapa sobre el lima: cuerpo oscuro, músculos activos claros */
.today-card .body-svg .m.l1 path { fill: rgba(12, 15, 10, .82); stroke: #0C0F0A; }
.today-card .body-svg .m.l2 path { fill: rgba(12, 15, 10, .45); stroke: rgba(12, 15, 10, .7); }
.today-card .body-svg .outline path { stroke: rgba(12, 15, 10, .35); }

.hello h2 { font-size: 24px; }
.avatar { border-radius: 50%; }
.thumb { border-radius: 16px; background: rgba(255, 255, 255, .05); }
.kpi b { font-size: 22px; }
.kpi b { color: var(--ink); }
.cal span { border-radius: 8px; }
.ex-target div { border-radius: 14px; background: rgba(255, 255, 255, .05); }
.set-n, .set-ok { border-radius: 50%; width: 48px; justify-self: center; }
.set-row { grid-template-columns: 48px 1fr 1fr 48px; }
.set-row input { border-radius: 999px; }
.sheet { background: rgba(12, 15, 20, .94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--glass-border); border-radius: 30px 30px 0 0; }
.sheet-bg { background: rgba(0, 0, 0, .55); }
.toast { border-radius: 999px; background: rgba(30, 36, 44, .95); border: 1px solid var(--glass-border); }
.logo-mark { border-radius: 50%; }
.tl-role { font-family: var(--display); font-stretch: 112%; }
.dcard { border-radius: 26px; }
.empty .ic { border-radius: 50%; background: var(--surface-2); border: 1px solid var(--glass-border); }
.top { background: rgba(7, 9, 13, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-bottom: 12px; }
.wo-head { background: rgba(7, 9, 13, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); top: calc(64px + var(--safe-t)); margin: 0 -18px; padding: 4px 18px 12px; }
.btn.sm { white-space: nowrap; }

.tl-bg { image-rendering: auto; }

/* pie de página con el crédito */
.credit { text-align: center; padding: 26px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .1px; }
.credit a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.credit a:hover, .credit a:focus-visible { color: var(--muted); border-bottom-color: currentColor; }

/* ================================================================ página de inicio (venta a entrenadores) */
.land { max-width: 1080px; margin: 0 auto; padding: calc(14px + var(--safe-t)) 20px calc(20px + var(--safe-b)); }
.ln-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
.ln-nav .logo b { font-size: 21px; }
.ln-nav .logo-mark { width: 36px; height: 36px; }
.ln-hero { display: grid; gap: 22px; align-items: center; padding: 26px 0 10px; }
.ln-copy h1 { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(34px, 8.6vw, 60px); line-height: 1; letter-spacing: -1.2px; margin: 16px 0 14px; text-wrap: balance; }
.ln-copy > p { color: #C2CBC8; font-size: 17px; line-height: 1.55; margin: 0 0 22px; max-width: 46ch; }
.ln-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ln-ctas .btn { min-height: 54px; padding: 0 24px; }
.ln-copy .hint b { color: var(--ink); }
.ln-visual { position: relative; display: flex; justify-content: center; padding: 10px 0 20px; }
.ln-visual::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; top: 12%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%); filter: blur(10px); }
.ln-body { position: relative; width: min(330px, 82vw); }
.ln-chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px;
  background: rgba(20, 24, 30, .78); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .8); font-size: 14px;
}
.ln-chip small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ln-chip b { font-family: var(--display); font-stretch: 110%; }
.ln-chip svg { width: 22px; height: 22px; color: var(--accent); }
.ln-chip.c1 { top: 8%; left: 0; display: block; }
.ln-chip.c2 { top: 44%; right: -2px; }
.ln-chip.c3 { bottom: 12%; left: 2%; }
.ln-sec { padding: 42px 0 6px; }
.ln-sec h2, .ln-final h2 { font-family: var(--display); font-stretch: 116%; font-weight: 800; font-size: clamp(25px, 6vw, 36px); line-height: 1.08; letter-spacing: -.6px; margin: 0 0 20px; text-wrap: balance; }
.ln-grid3 { display: grid; gap: 12px; }
.lf { padding: 20px; border-radius: var(--radius); background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--surface); border: 1px solid var(--glass-border); }
.lf svg { width: 26px; height: 26px; color: var(--accent); }
.lf b { display: block; font-family: var(--display); font-stretch: 112%; font-size: 18px; margin: 12px 0 6px; }
.lf p { margin: 0; color: var(--muted); line-height: 1.5; }
.ln-split { display: grid; gap: 30px; }
.ln-k { display: inline-block; color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ln-split h2 { margin-bottom: 16px; }
.ln-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ln-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.ln-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); stroke-width: 3.2; }
.ln-brand-card { position: relative; overflow: hidden; padding: 26px 22px; border-radius: 28px; background: var(--accent); color: var(--accent-ink); }
.ln-brand-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .5), transparent 45%), repeating-linear-gradient(115deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 9px); }
.ln-brand-card > * { position: relative; z-index: 1; }
.ln-brand-card h2 { margin: 18px 0 10px; }
.ln-brand-card p { margin: 0; font-size: 16.5px; line-height: 1.55; max-width: 56ch; color: rgba(17, 22, 10, .85); }
.ln-url { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #0C0F0A; color: #E8F5C8; font-weight: 600; font-size: 14px; max-width: 100%; }
.ln-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-url b { color: var(--accent); }
.ln-url svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ln-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.ln-steps li { counter-increment: s; position: relative; padding: 20px 20px 20px 74px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--glass-border); }
.ln-steps li::before { content: counter(s); position: absolute; left: 20px; top: 20px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: 18px; }
.ln-steps b { font-family: var(--display); font-stretch: 112%; font-size: 17px; }
.ln-steps p { margin: 4px 0 0; color: var(--muted); }
.ln-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.ln-faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform .2s; }
.ln-faq details[open] summary::after { transform: rotate(45deg); }
.ln-faq details p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
.ln-final { margin-top: 44px; text-align: center; padding: 34px 22px; border-radius: 28px; background: linear-gradient(180deg, var(--glass-hi), transparent), var(--surface); border: 1px solid var(--glass-border); }
.ln-final p { color: var(--muted); margin: -8px 0 20px; }
.ln-final .btn { min-height: 54px; padding: 0 26px; }
@media (min-width: 820px) {
  .ln-hero { grid-template-columns: 1.15fr .85fr; padding-top: 40px; }
  .ln-grid3 { grid-template-columns: repeat(3, 1fr); }
  .ln-split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ln-steps { grid-template-columns: repeat(3, 1fr); }
  .ln-brand-card { padding: 38px; }
}

.share-prev { border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); max-width: 260px; margin: 0 auto; aspect-ratio: 1080 / 1350; background: var(--surface); }
.share-prev img { width: 100%; height: 100%; object-fit: cover; }


/* ================================================================ ajustes 2.4 */
/* tarjetas: color sólido equivalente al vidrio (sin desenfoque detrás, que en Android pinta bandas) */
.card, .item, .kpi, .prog, .sess, .ritem, .ex, .coach-msg, .day-notes, .profile-card, .menu, .brand-card,
.share-box, .wd, .seg, .cm, .bp, .gpick, .mini-list .item, .lf, .ln-steps li, .ln-final {
  background: linear-gradient(180deg, #15191E, #101317 70%); transform: translateZ(0);
}
.wd.on, .seg button.on { background: var(--accent); }
.today-card, .ln-brand-card { transform: translateZ(0); }

/* series hechas: un solo tono parejo en número, kilos y repeticiones */
.set-row .set-n, .set-row input { transition: none; }
.set-row.ok .set-n, .set-row.ok input {
  background: color-mix(in srgb, var(--accent) 17%, #0E1115); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.set-row.ok .set-ok { background: var(--accent); color: var(--accent-ink); }
.set-row input:focus { border-color: var(--accent); }

/* 1) "Mi página": portada más alta con degradado negro para leer el nombre encima */
.brand-card { background: #0F1216; }
.bc-cover { height: 170px; }
.bc-cover::after { background: linear-gradient(180deg, rgba(15, 18, 22, 0) 0%, rgba(15, 18, 22, .25) 40%, rgba(15, 18, 22, .85) 78%, #0F1216 100%); }
.bc-body { margin-top: -74px; }
.bc-body b { font-size: 19px; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.bc-body small { text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.bp-cover::after { background: linear-gradient(180deg, rgba(7, 9, 13, 0) 0%, rgba(7, 9, 13, .3) 45%, rgba(7, 9, 13, .88) 80%, var(--bg) 100%); }

/* 2) temporizador oculto de verdad (antes asomaba debajo de la barra) */
.timer { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1.15), opacity .2s, visibility .2s; }
.timer.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* barra inferior: el punto de mensajes va pegado al ícono (no sobre el texto) */
.tabbar a .tb-l { display: none; }
.tabbar a.on .tb-l { display: inline; }
.tabbar a .tb-ic { position: relative; display: grid; place-items: center; }
.tabbar a .dot { position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #10141A; }
.tabbar a.on .dot { box-shadow: 0 0 0 2px var(--accent); }

/* ======================================================================
   ESTILO 3D: profundidad con luz arriba, sombra abajo y relieve al tocar
   ====================================================================== */
:root {
  --lift: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 -1px 0 rgba(0, 0, 0, .55),
          0 1px 2px rgba(0, 0, 0, .55), 0 12px 26px -14px rgba(0, 0, 0, .95);
  --lift-hi: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .6),
          0 2px 4px rgba(0, 0, 0, .5), 0 22px 40px -18px rgba(0, 0, 0, 1);
  --sink: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .045);
  --surf-a: #1B2026; --surf-b: #0F1216;
}
/* tarjetas elevadas */
.card, .item, .kpi, .prog, .sess, .ritem, .ex, .day-notes, .profile-card, .menu, .brand-card,
.share-box, .cm, .bp, .gpick, .mini-list .item, .lf, .ln-steps li, .ln-final, .coach-note, .seg {
  background: linear-gradient(180deg, var(--surf-a) 0%, var(--surf-b) 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: var(--lift);
}
.ex, .card, .brand-card, .menu { box-shadow: var(--lift-hi); }
.item, .prog, .ritem, .menu > * { transition: transform .12s ease, box-shadow .12s ease; }
.item:active, .prog:active { transform: translateY(1px) scale(.992); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px -6px rgba(0,0,0,.9); }

/* botones con volumen que se hunden al tocarlos */
.btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 86%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18),
              0 2px 3px rgba(0, 0, 0, .45), 0 12px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .1s ease, box-shadow .1s ease, filter .15s;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .5); }
.btn.ghost, .icon-btn, .tab, .mchip, .chip {
  background: linear-gradient(180deg, #232931 0%, #171B20 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .45), 0 8px 16px -10px rgba(0, 0, 0, .9);
  color: var(--ink);
}
.btn.ghost:active, .icon-btn:active, .tab:active, .mchip:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.icon-btn.plain { background: transparent; box-shadow: none; border: 0; }
.btn.danger { background: linear-gradient(180deg, #3A1C21, #26131A); border: 1px solid rgba(242, 88, 93, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 4px rgba(0, 0, 0, .45); }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.tab.on, .mchip.on { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--accent), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.seg button.on, .wd.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 88%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.wd { background: linear-gradient(180deg, #1D2228, #12151A); border: 1px solid rgba(255, 255, 255, .06); box-shadow: var(--lift); }

/* campos hundidos */
.input, .slug-input, .set-row input, .set-n { box-shadow: var(--sink); }
.input:focus, .set-row input:focus { box-shadow: var(--sink), 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.set-ok { background: linear-gradient(180deg, #2A3038, #1A1E24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 3px 6px rgba(0, 0, 0, .5); }
.set-row.ok .set-ok {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 6px 14px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}
.set-row.ok .set-n, .set-row.ok input { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.ex-target div { background: linear-gradient(180deg, #14181D, #101317); box-shadow: var(--sink); }
.progress, .bar { box-shadow: var(--sink); }
.progress i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, #000), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }

/* banner lima con relieve */
.today-card, .ln-brand-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .12),
              0 3px 6px rgba(0, 0, 0, .5), 0 26px 50px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}
.today-card .btn { background: linear-gradient(180deg, #1A1F17, #0A0C08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(0, 0, 0, .7); }
.body-svg { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); }
.today-card .body-svg { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }

/* fotos y avatares con relieve */
.avatar, .thumb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -4px rgba(0, 0, 0, .8); }
.tl-photo, .bc-photo, .bf-photo { box-shadow: 0 0 0 3px var(--accent), 0 18px 36px -12px rgba(0, 0, 0, .95), 0 0 40px -6px color-mix(in srgb, var(--accent) 35%, transparent); }

/* barra inferior y capas flotantes */
.tabbar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .5), 0 24px 44px -16px rgba(0, 0, 0, 1); }
.tabbar a.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 86%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 8px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.timer, .toast, .sheet, .ln-chip, .fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .5), 0 26px 50px -18px rgba(0, 0, 0, 1); }
.fab { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 86%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 30px -10px color-mix(in srgb, var(--accent) 65%, transparent); }
.badge.accent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px -2px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- consejo del entrenador: foto + globo de mensaje (sin línea lateral) */
.coach-msg { display: none; }
.coach-note { border-radius: var(--radius); padding: 14px 14px 16px; margin-bottom: 14px; position: relative; overflow: hidden; }
.coach-note::before {   /* brillo suave del color de la app detrás de la foto */
  content: ""; position: absolute; width: 180px; height: 180px; left: -60px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none;
}
.cn-head { position: relative; display: flex; align-items: center; gap: 12px; }
.cn-av { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 800; color: var(--accent); background: #1B2026;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px #12151A, 0 8px 16px -6px rgba(0, 0, 0, .9); }
.cn-av img { width: 100%; height: 100%; object-fit: cover; }
.cn-head b { display: block; font-family: var(--display); font-stretch: 112%; font-size: 16px; line-height: 1.2; }
.cn-head small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cn-q { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.cn-q svg { width: 17px; height: 17px; stroke-width: 2.4; }
.cn-bubble {
  position: relative; margin: 14px 0 0; padding: 13px 15px; border-radius: 6px 18px 18px 18px;
  background: linear-gradient(180deg, #232A31, #1A1F25); border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px -12px rgba(0, 0, 0, .9);
  font-size: 15px; line-height: 1.5; white-space: pre-line; color: #E3E9E6;
}
.cn-bubble::before {   /* piquito del globo apuntando a la foto */
  content: ""; position: absolute; left: 16px; top: -7px; width: 14px; height: 14px; transform: rotate(45deg);
  background: #232A31; border-left: 1px solid rgba(255, 255, 255, .06); border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ======================================================================
   PÁGINA DE INICIO 2: maqueta de celular en 3D, cinta y grilla de funciones
   ====================================================================== */
.land2 { max-width: 1120px; margin: 0 auto; padding: calc(12px + var(--safe-t)) 18px calc(20px + var(--safe-b)); overflow-x: clip; }
.l2-nav { position: sticky; top: calc(8px + var(--safe-t)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(16, 20, 26, .72); border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px -18px rgba(0,0,0,1); }
.l2-nav .logo b { font-size: 19px; }
.l2-nav .logo-mark { width: 34px; height: 34px; }
.l2-nav .btn.sm { min-height: 40px; }
.l2-eye { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--accent);
  background: linear-gradient(180deg, #1D2228, #13161B); border: 1px solid rgba(255,255,255,.07); box-shadow: var(--lift); }
.l2-eye svg { width: 16px; height: 16px; }

.l2-hero { display: grid; gap: 30px; align-items: center; padding: 34px 0 14px; }
.l2-copy h1 { font-family: var(--display); font-stretch: 122%; font-weight: 800; font-size: clamp(36px, 9.4vw, 66px); line-height: .98; letter-spacing: -1.6px; margin: 18px 0 16px; text-wrap: balance;
  background: linear-gradient(180deg, #FFFFFF 30%, #B9C2BF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l2-copy > p { color: #BAC3C0; font-size: 17px; line-height: 1.55; margin: 0 0 24px; max-width: 46ch; }
.l2-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.l2-ctas .btn { min-height: 56px; padding: 0 26px; font-size: 16.5px; }
.l2-demo { color: var(--dim); font-size: 13px; margin: 14px 0 0; }
.l2-demo b { color: var(--muted); }

/* escenario 3D con el celular */
.l2-stage { position: relative; perspective: 1400px; display: flex; justify-content: center; padding: 24px 0 36px; }
.l2-stage::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; top: 6%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%); filter: blur(16px); }
.l2-stage::after { content: ""; position: absolute; bottom: 14px; width: 56%; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 70%); filter: blur(6px); }
.l2-phone { position: relative; z-index: 1; width: min(280px, 72vw); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 10px;
  background: linear-gradient(145deg, #3A424B 0%, #14181D 40%, #0B0D10 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.18), 30px 40px 60px -20px rgba(0,0,0,.95), -6px 0 0 -2px #0B0D10;
  transform: rotateY(-16deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d; animation: l2float 7s ease-in-out infinite; }
@keyframes l2float { 50% { transform: rotateY(-10deg) rotateX(4deg) rotateZ(0deg) translateY(-8px); } }
.l2-notch { position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; border-radius: 999px; background: #000; }
.l2-screen { height: 100%; border-radius: 35px; overflow: hidden; background: radial-gradient(120% 50% at 50% 0%, rgba(64, 92, 132, .35), transparent 60%), #07090D;
  padding: 46px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.l2-s-top small { display: block; color: var(--muted); font-size: 9px; font-weight: 600; }
.l2-s-top b { font-family: var(--display); font-stretch: 118%; font-size: 15px; }
.l2-s-banner { position: relative; border-radius: 18px; padding: 11px; min-height: 52%; background: var(--accent); color: var(--accent-ink); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.l2-s-banner > div:first-child { display: flex; gap: 4px; }
.l2-s-banner span { border: 1px solid rgba(17,22,10,.5); border-radius: 999px; padding: 1px 6px; font-size: 7.5px; font-weight: 700; }
.l2-s-banner b { display: block; font-family: var(--display); font-stretch: 120%; font-size: 17px; line-height: 1; margin: 9px 0 5px; max-width: 58%; }
.l2-s-banner em { font-style: normal; font-size: 8px; font-weight: 600; opacity: .75; }
.l2-s-body { position: absolute; right: -4px; top: 6px; bottom: 30px; width: 46%; }
.l2-s-body .body-svg { height: 100%; width: auto; margin-left: auto; filter: none; }
.l2-s-body .body-svg .m.l1 path { fill: rgba(12,15,10,.82); stroke: #0C0F0A; }
.l2-s-body .body-svg .m.l2 path { fill: rgba(12,15,10,.45); stroke: rgba(12,15,10,.7); }
.l2-s-banner i { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; place-items: center; height: 24px; border-radius: 999px; background: #0C0F0A; color: var(--accent); font-style: normal; font-size: 8.5px; font-weight: 700; }
.l2-s-row { display: grid; grid-template-columns: 22px 1fr 1fr 22px; gap: 5px; align-items: center; }
.l2-s-row > span { height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 17%, #0E1115); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.l2-s-row .l2-ok { background: var(--accent); color: var(--accent-ink); }
.l2-s-row .l2-ok svg { width: 12px; height: 12px; stroke-width: 3; }
.l2-s-row.off > span { background: #171B20; color: #8E9894; }
.l2-s-row.off .l2-ok { color: #5F6966; }
.l2-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(36, 42, 50, .92), rgba(20, 24, 30, .92)); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 40px -16px rgba(0,0,0,1);
  animation: l2bob 6s ease-in-out infinite; }
.l2-float > svg.i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.l2-float small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.l2-float b { font-family: var(--display); font-stretch: 110%; font-size: 13.5px; white-space: nowrap; }
.l2-float.f1 { top: 0; left: 0; }
.l2-float.f2 { top: 44%; right: 0; animation-delay: -2s; }
.l2-float.f3 { bottom: 12%; left: 4%; animation-delay: -4s; }
@keyframes l2bob { 50% { transform: translateY(-7px); } }
.l2-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.l2-ring circle { fill: none; stroke: #2A3038; stroke-width: 5; }
.l2-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 34; }

/* cinta de funciones */
.l2-ticker { margin: 18px -18px 0; padding: 14px 0; overflow: hidden; border-block: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, #11151A, #0B0E12); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.l2-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: l2scroll 38s linear infinite; }
.l2-track span { font-family: var(--display); font-stretch: 116%; font-weight: 700; font-size: 17px; white-space: nowrap; color: #D6DDDA; }
.l2-track i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@keyframes l2scroll { to { transform: translateX(-50%); } }

.l2-sec { padding: 52px 0 6px; }
.l2-sec h2, .l2-final h2 { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(26px, 6.4vw, 40px); line-height: 1.04; letter-spacing: -.8px; margin: 0 0 22px; text-wrap: balance; }

/* grilla tipo bento */
.l2-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx { position: relative; overflow: hidden; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, #1B2026, #0F1216); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--lift-hi); }
.bx b { font-family: var(--display); font-stretch: 112%; font-size: 16.5px; line-height: 1.2; margin-top: auto; }
.bx p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.bx-big { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
.bx-big .bx-txt b { font-size: 21px; display: block; margin-bottom: 8px; }
.bx-big .bx-txt p { font-size: 14.5px; }
.bx-body .body-pair { gap: 4px; }
.bx-body .lbl { display: none; }
.bx-ring { width: 74px; height: 74px; margin-bottom: 14px; }
.bx-ring circle { fill: none; stroke: #232930; stroke-width: 7; }
.bx-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 70; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.bx-ring text { fill: var(--ink); font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: 17px; text-anchor: middle; }
.bx-spark { width: 100%; height: 70px; margin-bottom: 14px; overflow: visible; }
.bx-spark polyline { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
.bx-spark circle { fill: var(--accent); stroke: #0F1216; stroke-width: 3; }
.bx-play, .bx-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; color: var(--accent-ink);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 80%, #000));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 12px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.bx-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.bx-ic svg { width: 26px; height: 26px; }
.bx-lime { grid-column: 1 / -1; background: var(--accent); color: var(--accent-ink); border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.12), 0 26px 50px -24px color-mix(in srgb, var(--accent) 60%, transparent); }
.bx-lime::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 92% 0%, rgba(255,255,255,.5), transparent 45%), repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 2px, transparent 2px 9px); }
.bx-lime > * { position: relative; z-index: 1; }
.bx-lime b { font-size: 22px; margin-top: 14px; }
.bx-lime p { color: rgba(17,22,10,.8); font-size: 14.5px; max-width: 52ch; }
.bx-url { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: #0C0F0A; color: #E8F5C8; font-weight: 600; font-size: 13px; max-width: 100%; }
.bx-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-url b { color: var(--accent); font-size: 13px; margin: 0; font-family: var(--font); font-stretch: 100%; }
.bx-url svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.bx-sw { display: flex; gap: 8px; margin-top: 14px; }
.bx-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #0C0F0A, inset 0 2px 0 rgba(255,255,255,.4); }

/* panel del entrenador + números */
.l2-panel { display: grid; gap: 22px; }
.l2-panel ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.l2-panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.l2-panel li svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; color: var(--accent-ink); stroke-width: 3.2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.l2-panel h2 { margin: 16px 0 0; }
.l2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.l2-stats div { border-radius: 24px; padding: 20px 16px; background: linear-gradient(180deg, #1B2026, #0F1216); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--lift-hi); }
.l2-stats b { display: block; font-family: var(--display); font-stretch: 120%; font-weight: 800; font-size: 38px; line-height: 1; color: var(--accent); text-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.l2-stats small { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; font-size: 13px; }

/* pasos */
.l2-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.l2-steps li { counter-increment: s; position: relative; padding: 22px 20px 22px 82px; border-radius: 26px; background: linear-gradient(180deg, #1B2026, #0F1216); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--lift-hi); }
.l2-steps li::before { content: counter(s); position: absolute; left: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 20px; color: var(--accent-ink);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 80%, #000));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.l2-steps b { font-family: var(--display); font-stretch: 112%; font-size: 17px; }
.l2-steps p { margin: 5px 0 0; color: var(--muted); line-height: 1.45; }

.l2-faq details { margin-bottom: 10px; border-radius: 20px; padding: 16px 18px; background: linear-gradient(180deg, #1A1F25, #111418); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--lift); }
.l2-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); font-size: 18px; transition: transform .2s; }
.l2-faq details[open] summary::after { transform: rotate(45deg); }
.l2-faq details p { margin: 12px 0 0; color: var(--muted); line-height: 1.55; }

.l2-final { position: relative; overflow: hidden; margin-top: 52px; text-align: center; padding: 44px 22px; border-radius: 32px; background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -5px 0 rgba(0,0,0,.12), 0 30px 60px -26px color-mix(in srgb, var(--accent) 65%, transparent); }
.l2-final::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% -20%, rgba(255,255,255,.55), transparent 55%), repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 2px, transparent 2px 9px); }
.l2-final > * { position: relative; z-index: 1; }
.l2-final p { margin: -8px 0 22px; color: rgba(17,22,10,.78); font-size: 16px; }
.l2-final .btn { min-height: 56px; padding: 0 28px; background: linear-gradient(180deg, #1A1F17, #0A0C08); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px -10px rgba(0,0,0,.7); }

@media (min-width: 860px) {
  .l2-hero { grid-template-columns: 1.1fr .9fr; padding-top: 56px; }
  .l2-bento { grid-template-columns: repeat(4, 1fr); }
  .bx-big { grid-column: span 2; grid-row: span 2; grid-template-columns: 1fr; }
  .bx-big .bx-body { max-width: 300px; margin: 0 auto; }
  .bx-lime { grid-column: span 4; }
  .l2-panel { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; }
  .l2-steps { grid-template-columns: repeat(3, 1fr); }
  .l2-ticker { margin-inline: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion: reduce) { .l2-phone, .l2-float, .l2-track { animation: none !important; } }

/* 2.7 · aviso sin conexión dentro de la app */
.net-err { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 64px 22px 30px; }
.net-err .ne-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: linear-gradient(180deg, var(--surf-a, #1B2026), var(--surf-b, #0F1216));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -14px #000, 0 0 40px -12px var(--accent); }
.net-err .ne-ic .i { width: 32px; height: 32px; stroke: var(--accent); }
.net-err h2 { margin: 0; font-size: 21px; font-weight: 800; font-stretch: 115%; }
.net-err p { margin: 0 0 10px; color: var(--muted, #8E9894); max-width: 300px; line-height: 1.5; }
body:has(.net-err) .offline-pill { display: none; }

/* 2.7.1 · botón X para cerrar los paneles (queda fijo arriba a la derecha al desplazar) */
.sheet-x { position: sticky; top: 0; float: right; z-index: 3; width: 40px; height: 40px; margin: 2px -4px -42px 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--accent-ink, #11160A);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgba(0,0,0,.4); }
.sheet-x .i { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.8; }
.sheet-x:active { transform: scale(.92); }
.sheet > h2:first-of-type { padding-right: 46px; }

/* 2.7.5 · número de WhatsApp en la portada */
.l2-wa { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.l2-wa .i { width: 18px; height: 18px; stroke: var(--accent); }
.l2-wa a { color: var(--text, #F3F6F1); font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.l2-final .l2-wa { justify-content: center; }

/* 2.7.6 · video tutorial en la portada */
.l2-watch { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 700 15px var(--font, inherit); }
.l2-watch .i { width: 18px; height: 18px; stroke: var(--accent); }
.l2-video { display: grid; gap: 26px; align-items: center; }
.l2-video-copy h2 { margin: 12px 0 10px; }
.l2-video-copy p { color: var(--muted); line-height: 1.55; margin: 0 0 18px; max-width: 46ch; }
.l2-video-frame { justify-self: center; width: min(340px, 100%); border-radius: 30px; overflow: hidden; background: #07090D;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -25px rgba(0,0,0,.95), 0 0 60px -20px color-mix(in srgb, var(--accent) 50%, transparent); }
.l2-video-frame iframe { display: block; width: 100%; height: calc(min(340px, 100vw - 32px) * 16 / 9 + 84px); border: 0; }
@media (min-width: 860px) { .l2-video { grid-template-columns: 1fr auto; } .l2-video-frame { width: 360px; } .l2-video-frame iframe { height: calc(360px * 16 / 9 + 84px); } }
#l2-tutorial { scroll-margin-top: 96px; }

/* 2.7.7 · número de WhatsApp sobre el fondo lima del cierre */
.l2-final .l2-wa { margin-top: 22px; color: rgba(17,22,10,.72); }
.l2-final .l2-wa .i { stroke: #11160A; }
.l2-final .l2-wa a { color: #11160A; }