/* Componentes y pantallas — PROTOCOLO DESEO OCULTO */

/* ---------- Primitivos ---------- */
.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  background: linear-gradient(180deg, rgba(25, 25, 25, .9), rgba(13, 13, 13, .93));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 14px 40px rgba(0, 0, 0, .35);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1.35rem;
  border-radius: var(--r-sm); border: 1px solid transparent; font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .3s, background .25s, border-color .25s, color .25s;
}
.btn .ic { width: 1.25em; height: 1.25em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-primary { background: linear-gradient(180deg, #A8151F, #7A0F18); color: #fff; border-color: rgba(255, 130, 130, .28); box-shadow: 0 8px 26px rgba(143, 17, 27, .38), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { box-shadow: 0 10px 32px rgba(166, 20, 32, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-ghost { background: rgba(255, 255, 255, .02); border-color: rgba(200, 164, 93, .4); color: var(--gold); }
.btn-ghost:hover { background: rgba(200, 164, 93, .1); border-color: var(--gold); }
.btn-gold { background: linear-gradient(180deg, #EBD08F, #C8A45D 55%, #A8843F); color: #1A1205; box-shadow: 0 8px 26px rgba(200, 164, 93, .22), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-gold:hover { box-shadow: 0 10px 30px rgba(200, 164, 93, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.wide { width: 100%; }
.center { text-align: center; }
.fine { font-size: .8rem; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font: 500 .74rem/1 var(--sans); letter-spacing: .08em; }
.link .ic { width: 16px; height: 16px; }
.link-i { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.link-b { color: var(--gold); font: 500 .76rem/1 var(--sans); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }

.page { padding-top: 22px; }
.page-h { position: relative; padding: 14px 0 20px; isolation: isolate; }
.page-h .lead { margin-top: 8px; max-width: 34rem; }
.page-h .h1 { margin: 6px 0 4px; }
.page-h.art { padding: 22px 16px 24px; margin: 0 -16px; border-radius: 0; }
.page-h.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--art); background-size: cover; background-position: var(--art-x, 50%) 0; opacity: .42; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 90%), linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(90deg, transparent 5%, #000 90%); }
.page-h.art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, var(--bg)); }
.sec { margin-top: 30px; }
.sec-h { margin-bottom: 14px; }
.sec-t { font: 600 1.05rem/1.2 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.empty { color: var(--mut); padding: 14px; font-size: .9rem; }
.stack > * + * { margin-top: 14px; }

/* Barras, anillos, chips */
.bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8F111B, #F0525E); box-shadow: 0 0 10px rgba(229, 66, 79, .5); transition: width .9s var(--ease); }
.st-done .bar > i, .ds-done .bar > i { background: linear-gradient(90deg, #8F6F31, #EBD08F); box-shadow: none; }
.ring { position: relative; width: var(--s); height: var(--s); flex: none; }
.ring svg { width: 100%; height: 100%; }
.ring-fg { transition: stroke-dashoffset 1.1s var(--ease); filter: drop-shadow(0 0 6px rgba(229, 66, 79, .45)); }
.ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring-in b { font: 600 calc(var(--s) * .26) var(--serif); letter-spacing: .02em; }
.ring-in small { font: 500 .56rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--gold); background: rgba(200, 164, 93, .06); }
.chip .ic { width: 14px; height: 14px; }
.chip.st-progress, .chip.st-active { color: var(--red-hot); border-color: rgba(229, 66, 79, .5); background: rgba(143, 17, 27, .18); }
.chip.st-pending, .chip.st-locked { color: var(--mut); border-color: var(--line-soft); background: rgba(255, 255, 255, .03); }
.chip.st-next { color: #E8D3A0; }

/* Callouts, quotes, listas */
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); font-size: .92rem; }
.callout b { display: block; font: 600 .66rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; }
.callout .co-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.callout .co-ic .ic { width: 18px; height: 18px; }
.co-avoid { border-color: rgba(229, 66, 79, .35); background: rgba(143, 17, 27, .12); }
.co-avoid b, .co-avoid .co-ic { color: var(--red-hot); }
.co-consent { border-color: rgba(200, 164, 93, .4); background: rgba(200, 164, 93, .07); }
.co-consent b, .co-consent .co-ic { color: var(--gold); }
.co-tip { border-color: rgba(200, 164, 93, .3); background: rgba(200, 164, 93, .05); }
.co-tip .co-ic { color: var(--gold); }
.co-warn { border-color: rgba(229, 66, 79, .45); background: rgba(143, 17, 27, .16); }
.co-warn b, .co-warn .co-ic { color: var(--red-hot); }
.co-note .co-ic { color: var(--gold); }
.quote { margin: 16px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold); font: italic 500 1.3rem/1.35 var(--serif); color: #EDE6D8; }
.bul li { position: relative; padding: 6px 0 6px 20px; }
.bul li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.dlist li { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.dlist li:first-child { border-top: 0; }
.dlist b { display: block; color: var(--gold); font: 600 1.1rem/1.2 var(--serif); letter-spacing: .02em; }
.dlist span { color: #D8D4CE; font-size: .92rem; }
.info-grid { display: grid; gap: 12px; }
.info { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); }
.info h4 { margin: 0 0 6px; font: 600 1.12rem/1.2 var(--serif); color: var(--gold); letter-spacing: .02em; }
.info p { font-size: .92rem; color: #DAD6D0; }
.info-s { margin-top: 8px; font-size: .86rem; color: var(--mut); }
.info-s b { color: var(--gold); font-weight: 600; }
.grp { margin-top: 16px; }
.grp h4 { font: 600 .95rem/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.intro-b + .intro-b { margin-top: 18px; }
.intro-b p, .intro-c p { margin-top: 10px; }
.intro-c .quote { margin-top: 18px; }

/* Acordeón / details */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(25, 25, 25, .9), rgba(13, 13, 13, .93)); overflow: hidden; }
.acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold); flex: none; }
.acc-ic .ic { width: 18px; height: 18px; }
.acc-t { flex: 1; font: 600 1.12rem/1.2 var(--serif); letter-spacing: .04em; }
.acc-chev { width: 20px; height: 20px; color: var(--gold); transition: transform .3s var(--ease); }
details[open] > summary .acc-chev { transform: rotate(180deg); }
.acc-b { padding: 4px 16px 18px; }
.acc-b > * + * { margin-top: 12px; }

/* Formularios */
.field { width: 100%; min-height: 96px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(200, 164, 93, .28); border-radius: 12px; color: var(--ink); padding: 14px; font: 400 1rem/1.55 var(--sans); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.field.one { min-height: 50px; resize: none; }
.field::placeholder { color: #7d7976; }
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 164, 93, .16); }
.chk { display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 52px; padding: 10px 4px; text-align: left; border-radius: 12px; }
.chk-list li + li { border-top: 1px solid var(--line-soft); }
.chk-box { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(200, 164, 93, .7); display: grid; place-items: center; color: transparent; transition: background .25s, border-color .25s, color .25s, transform .2s; margin-top: 1px; }
.chk-box .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.chk-t { flex: 1; font-size: .98rem; line-height: 1.5; }
.chk:hover .chk-box { border-color: var(--gold-hi); }
.chk.on .chk-box { background: linear-gradient(180deg, #C8202C, #8F111B); border-color: #E5424F; color: #fff; transform: scale(1.04); }
.chk.on .chk-t { color: #E8E4DD; }
.switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid var(--line-soft); transition: background .25s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #d9d4cb; transition: transform .25s var(--ease); }
.switch.on { background: linear-gradient(180deg, #A8151F, #7A0F18); border-color: rgba(255, 130, 130, .3); }
.switch.on i { transform: translateX(22px); background: #fff; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.scale-b { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); font: 600 1.1rem var(--serif); color: var(--gold); transition: background .2s, color .2s, border-color .2s; }
.scale-b:hover { background: rgba(200, 164, 93, .1); }
.scale-b.on { background: linear-gradient(180deg, #A8151F, #7A0F18); color: #fff; border-color: #E5424F; }
.scale-t { display: flex; justify-content: space-between; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-top: 6px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #E5424F var(--p), rgba(255, 255, 255, .14) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.range::-moz-range-progress { height: 6px; border-radius: 99px; background: #E5424F; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--gold); border: 3px solid #1a1205; box-shadow: 0 0 0 1px var(--gold); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid #1a1205; }
.tabs { display: flex; gap: 6px; padding: 5px; margin: 6px 0 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, .4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 10px; font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #cfcac4; white-space: nowrap; transition: background .25s, color .25s; }
.tab .ic { width: 18px; height: 18px; }
.tab:hover { color: var(--ink); }
.tab.on { background: linear-gradient(180deg, rgba(168, 21, 31, .85), rgba(110, 14, 22, .85)); color: #fff; box-shadow: 0 4px 16px rgba(143, 17, 27, .4); }
.tabs-4 .tab { flex-direction: column; gap: 6px; padding: 0 8px; min-height: 58px; font-size: .6rem; }
.tabs-sm { max-width: 260px; margin: 0 auto 14px; }

/* ---------- Acceso ---------- */
body.is-access { background: #060606; }
.access { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.access-art { position: absolute; inset: 0 0 auto 0; height: 62vh; z-index: -1; overflow: hidden; }
.access-art img { position: absolute; left: -4%; top: 0; width: 290%; max-width: none; height: auto; filter: saturate(1.05); }
.access-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 6, 6, .5) 0, transparent 22%, rgba(6, 6, 6, .55) 62%, #060606 98%), linear-gradient(90deg, transparent 50%, rgba(6, 6, 6, .8)); }
.access-in { margin-top: auto; width: 100%; max-width: 480px; margin-inline: auto; padding: 0 22px calc(28px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; }
.access-brand { position: relative; display: grid; place-items: center; width: 100%; margin-bottom: 8px; }
.access-emblem { width: 168px; height: 168px; margin: 0 auto -18px; -webkit-mask-image: radial-gradient(circle, #000 34%, transparent 47%); mask-image: radial-gradient(circle, #000 34%, transparent 47%); transform: scale(1.5); transform-origin: 50% 60%; }
.access-emblem img { width: 100%; height: 100%; object-fit: contain; }
.access-logo { width: min(100%, 420px); aspect-ratio: 1672 / 520; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 62%, transparent 100%); position: relative; }
.access-logo img { position: absolute; left: 0; top: -72%; width: 100%; height: auto; }
.access-form { width: 100%; text-align: center; }
.access-h { margin: 8px 0 8px; color: #fff; letter-spacing: .26em; font-size: 1.35rem; }
.access-p { font-size: 1.15rem; line-height: 1.4; font-style: italic; color: #D9D4CB; max-width: 24rem; margin: 0 auto 20px; }
.access-label { display: block; text-align: left; font: 600 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.access-field { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 8px 0 16px; border-radius: 12px; border: 1px solid rgba(200, 164, 93, .55); background: rgba(8, 8, 8, .82); color: var(--gold); transition: box-shadow .25s, border-color .25s; }
.access-field:focus-within { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(200, 164, 93, .18); }
.access-field input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--ink); font: 500 1.05rem var(--sans); letter-spacing: .06em; }
.access-eye { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); border-radius: 10px; }
.access-err { min-height: 22px; margin-top: 8px; color: #FF7A85; font-size: .86rem; }
.access-cta { width: 100%; min-height: 58px; margin-top: 6px; font-size: .86rem; letter-spacing: .28em; }
.access-foot { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; color: var(--gold); }
.access-foot span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 164, 93, .5)); }
.access-foot span:last-child { background: linear-gradient(270deg, transparent, rgba(200, 164, 93, .5)); }
.access-foot i { font-style: normal; font-size: .8rem; }
.access-foot-t { color: #b9a37a; font-size: .6rem; letter-spacing: .3em; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (min-width: 900px) {
  .access-art { height: 100vh; inset: 0; }
  .access-art img { left: 50%; width: 1672px; height: 941px; transform: translateX(-60%); top: 0; }
  .access-art::after { background: linear-gradient(180deg, rgba(6, 6, 6, .6), rgba(6, 6, 6, .3) 40%, #060606 95%), linear-gradient(90deg, #060606 0, transparent 30%, transparent 55%, #060606 90%); }
}

/* ---------- Inicio ---------- */
.home-h { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-transform: uppercase; font-family: var(--serif); }
.home-h1 { font-size: 1.8rem; font-weight: 400; letter-spacing: .24em; color: #E8E4DD; }
.home-h2 { font-size: clamp(1.6rem, 8.2vw, 3.8rem); font-weight: 700; letter-spacing: .01em; margin: 2px 0 6px; max-width: 100%; overflow-wrap: normal; word-break: keep-all; }
.home-h3 { font-size: clamp(1.2rem, 5.6vw, 1.9rem); font-weight: 500; letter-spacing: .28em; color: var(--gold); }
.home-lead { margin-top: 14px; max-width: 24rem; color: #E4DFD6; }
.home-prog-wrap { position: relative; z-index: 3; margin-top: 18px; }
.home-prog { display: grid; grid-template-columns: 1fr auto; gap: 16px 18px; align-items: center; padding: 18px; border-color: rgba(200, 164, 93, .4); }
.home-pct { font: 600 2.8rem/1 var(--serif); color: var(--gold-hi); margin: 6px 0 10px; }
.home-pct small { font-size: 1.4rem; }
.home-prog-m { text-align: right; }
.home-day { font: 600 1.9rem/1 var(--serif); margin-top: 6px; }
.home-day small { font-size: 1rem; color: var(--mut); }
.home-cta { grid-column: 1 / -1; min-height: 56px; font-size: .78rem; }
.home-next { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.home-next .eyebrow { font-size: .6rem; color: var(--mut); }
.home-next b { font: 600 1.15rem/1.25 var(--serif); }
.scroller { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 14px; margin: 0 -16px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: 0 0 72%; max-width: 300px; }
.pcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.pcard:hover { transform: translateY(-3px); border-color: rgba(200, 164, 93, .5); }
.pcard.st-progress { border-color: rgba(229, 66, 79, .7); box-shadow: 0 0 0 1px rgba(143, 17, 27, .35), 0 16px 40px rgba(143, 17, 27, .25); }
.pcard-img { height: 170px; background-color: #120a0a; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.pcard-in { position: relative; margin-top: -64px; padding: 0 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pcard-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--red-hot); border: 1px solid rgba(229, 66, 79, .5); background: rgba(8, 8, 8, .7); box-shadow: 0 0 18px rgba(229, 66, 79, .25); }
.pcard-ic .ic { width: 22px; height: 22px; }
.pcard-h { font: 600 1.6rem/1.02 var(--serif); letter-spacing: .02em; margin: 6px 0 8px; text-transform: uppercase; }
.pcard-d { font-size: .9rem; color: #CFCAC3; margin-bottom: 16px; flex: 1; }
.pcard-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.pcard-n { font: 500 .8rem var(--sans); color: var(--ink); }
.pcard-go { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold); }
.pcard-go .ic { width: 18px; height: 18px; }
.xgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
.xcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.xcard:hover { transform: translateY(-3px); border-color: rgba(200, 164, 93, .5); }
.xcard-img { height: 120px; background-color: #120a0a; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.xcard-in { position: relative; margin-top: -40px; padding: 0 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.xcard-t { display: flex; align-items: center; gap: 8px; }
.xcard-t .h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.xcard-ic { color: var(--gold); display: grid; }
.xcard-ic .ic { width: 22px; height: 22px; }
.xcard-d { font-size: .82rem; color: #CFCAC3; line-height: 1.45; flex: 1; }
.xcard-p { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--mut); }
.xcard-p .bar { flex: 1; }
.xcard-b { min-height: 40px; font-size: .64rem; padding: 0 .8rem; }
.guide { display: flex; gap: 16px; align-items: center; border-color: rgba(200, 164, 93, .3); }
.guide-q { font-size: 1.15rem; margin-top: 6px; }
.finish { border-color: rgba(200, 164, 93, .45); background: linear-gradient(180deg, rgba(48, 30, 12, .45), rgba(14, 10, 8, .95)); }
.finish-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.finish-a .btn { flex: 1 1 200px; }

/* ---------- Camino / Fase ---------- */
.camino-grid > .pcard { max-width: none; }
.phase-tag { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.phase-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--red-hot); border: 1px solid rgba(229, 66, 79, .5); background: rgba(8, 8, 8, .6); box-shadow: 0 0 18px rgba(229, 66, 79, .3); }
.phase-ic .ic { width: 22px; height: 22px; }
.phase-n { font: 500 .9rem/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.phase-h { margin-bottom: 10px; font-size: clamp(2.2rem, 10vw, 3.8rem); }
.hero .lead { max-width: 30rem; }
.pprog, .pstrip { display: flex; align-items: center; gap: 16px; border-color: rgba(200, 164, 93, .4); }
.pprog { margin-top: 16px; }
.pprog-m { flex: 1; min-width: 0; }
.pprog-t { font: 500 1.05rem/1.3 var(--serif); margin: 4px 0 10px; }
.pprog-l { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); color: var(--gold); font: 600 .64rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pprog-l.static { color: var(--gold); }
.pprog-l .ic { width: 20px; height: 20px; }
.pprog-cta { white-space: nowrap; min-height: 46px; padding: 0 1rem; }
.dlist-rows > li + li, .mod-list > li + li { margin-top: 10px; }
.drow { display: flex; align-items: center; gap: 14px; padding: 12px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.drow:hover { transform: translateX(3px); border-color: rgba(200, 164, 93, .5); }
.drow.ds-active { border-color: rgba(229, 66, 79, .75); box-shadow: 0 0 0 1px rgba(143, 17, 27, .3), 0 10px 30px rgba(143, 17, 27, .22); }
.drow.ds-locked { opacity: .72; }
.drow-img { flex: none; width: 64px; height: 64px; border-radius: 10px; background-color: #170c0c; border: 1px solid var(--line-soft); }
.mod-n { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 600 1.25rem var(--serif); color: var(--gold); }
.drow-m { flex: 1; min-width: 0; }
.drow-m .eyebrow { font-size: .58rem; }
.drow-t { display: block; font: 600 1.12rem/1.2 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); margin: 3px 0 2px; }
.drow-d { display: block; font-size: .85rem; color: #CFCAC3; line-height: 1.4; }
.drow-s { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 66px; color: var(--mut); }
.drow-s small { font: 600 .54rem/1.1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.drow-s .ic { width: 26px; height: 26px; }
.drow-s.ds-done { color: var(--gold); }
.drow-s.ds-active { color: var(--red-hot); }
.drow-s.ds-open { color: var(--red-hot); }
.drow-go { flex: none; width: 18px; height: 18px; color: var(--gold); }
.pnav .btn { flex: 1; max-width: 240px; }
.mcycle { margin-top: 18px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.mq { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yn { display: flex; gap: 6px; flex: none; }
.yn-b { min-width: 52px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); font: 600 .78rem var(--sans); letter-spacing: .08em; color: var(--gold); }
.yn-b.on { background: linear-gradient(180deg, #A8151F, #7A0F18); color: #fff; border-color: #E5424F; }
.mc-note, .mc-last { margin: 12px 0; font-size: .88rem; }

/* ---------- Día ---------- */
.day-n { margin-top: 6px; }
.day-h { font-size: clamp(2rem, 9vw, 3.4rem); margin: 6px 0 10px; }
.pstrip { margin-top: 18px; padding: 14px 16px; }
.pstrip-m { flex: none; }
.pstrip-t { font: 500 1.8rem/1 var(--serif); margin-top: 4px; color: var(--gold-hi); }
.pstrip-t b { font-size: 2.2rem; }
.pstrip .bar { flex: 1; }
.pstrip-p { font-size: .9rem; color: var(--mut); }
.pstrip-l { display: none; }
@media (min-width: 560px) { .pstrip-l { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); color: var(--gold); font: 600 .62rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; } }
.lockcard { text-align: center; padding: 30px 20px; display: grid; gap: 12px; justify-items: center; }
.lockcard-ic { width: 44px; height: 44px; color: var(--gold); }
.lockcard p { max-width: 30rem; }
.lock-hint { font-size: .84rem; }
.stepper-w { position: sticky; top: calc(var(--hdr) - 1px); z-index: 40; padding-top: 10px; padding-bottom: 10px; margin-top: 12px; background: linear-gradient(180deg, rgba(8, 8, 8, .96), rgba(8, 8, 8, .86)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: none; }
.stepper { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 820px; margin: 0 auto; }
.stepper::-webkit-scrollbar { display: none; }
.stepper li { flex: 1 0 auto; }
.stepper button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-soft); color: var(--mut); font: 600 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: all .25s; }
.stp-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-size: .62rem; letter-spacing: 0; }
.stepper button.cur { color: var(--gold-hi); border-color: var(--gold); background: rgba(200, 164, 93, .1); }
.stepper button.ok .stp-n { background: #8F111B; border-color: #E5424F; color: #fff; }
.dwrap { max-width: 820px; margin-top: 18px; }
.dsec { padding: 20px 18px; scroll-margin-top: 120px; }
.dsec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dsec-n { font: 600 .74rem/1 var(--sans); color: var(--gold); width: 26px; height: 26px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; }
.dsec-ic { color: var(--gold); display: grid; }
.dsec-ic .ic { width: 22px; height: 22px; }
.dsec-t { font: 600 1.2rem/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.ent + .ent { margin-top: 14px; }
.ent p { margin-top: 4px; color: #DDD9D2; }
.dsec .callout { margin-top: 16px; }
.aplica-i { margin-bottom: 8px; }
.aplica-c { margin-top: 10px; font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.refl + .refl { margin-top: 16px; }
.refl-q { display: block; font: 500 1.12rem/1.35 var(--serif); margin-bottom: 8px; color: #EDE7DB; }
.refl-s { margin-top: 12px; font-size: .78rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.refl-s .ic { width: 14px; height: 14px; }
.comp-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-top: 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); }
.comp-sum b { font: 600 1.3rem var(--serif); color: var(--gold-hi); }
.comp-checks { margin-top: 16px; }
.comp-checks .chk { border: 1px solid var(--line-soft); padding: 12px 14px; background: rgba(255, 255, 255, .02); }
.adv { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.adv-m { text-align: center; }
.adv-m b { font: 600 1.4rem var(--serif); color: var(--gold-hi); display: block; }
.adv-m small { font: 500 .56rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.adv .btn { font-size: .66rem; letter-spacing: .1em; padding: 0 .6rem; }
@media (max-width: 420px) { .adv { grid-template-columns: 1fr 1fr; } .adv-m { display: none; } }

/* ---------- Progreso ---------- */
.gprog { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border-color: rgba(200, 164, 93, .4); }
.gprog-m { min-width: 0; }
.gprog-t { font: 500 1.2rem/1.3 var(--serif); margin: 6px 0 12px; }
.gprog-m .muted { margin-top: 10px; font-size: .88rem; }
.gprog-s { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.stat { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--gold); }
.stat .ic { width: 24px; height: 24px; }
.stat b { font: 600 1.7rem/1 var(--serif); color: var(--ink); }
.stat span { font: 500 .56rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.fases-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mini { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), border-color .25s; }
.mini:hover { transform: translateY(-2px); border-color: rgba(200, 164, 93, .5); }
.mini.on { border-color: rgba(229, 66, 79, .75); box-shadow: 0 0 22px rgba(143, 17, 27, .25); }
.mini-img { height: 82px; background-color: #170c0c; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
.mini-b { padding: 0 12px 12px; margin-top: -10px; display: grid; gap: 6px; }
.mini-b b { font: 600 1.02rem/1.15 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.mini-b span { font-size: .78rem; color: var(--mut); }
.mini-b .eyebrow { font-size: .54rem; }
.act-g { align-items: stretch; }
.act-list li + li { border-top: 1px solid var(--line-soft); }
.act-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.act-row > .ic:last-child { color: var(--gold); width: 18px; height: 18px; flex: none; }
.act-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--mut); color: var(--mut); }
.act-ic .ic { width: 18px; height: 18px; }
.act-ic.ok { border-color: #3CB371; color: #3CB371; background: rgba(60, 179, 113, .1); }
.act-ic.go { border-color: var(--red-hot); color: var(--red-hot); background: rgba(143, 17, 27, .15); }
.act-m { flex: 1; min-width: 0; display: grid; }
.act-m b { font: 500 1.02rem/1.25 var(--serif); }
.act-m small { color: var(--mut); font-size: .76rem; }
.quote-card { min-height: 180px; overflow: hidden; display: flex; align-items: flex-end; }
.quote-card-img { position: absolute; inset: 0; opacity: .5; background-color: #120a0a; }
.quote-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 8, 8, .95), rgba(8, 8, 8, .15)); }
.quote-card-t { position: relative; z-index: 2; color: var(--gold); }
.quote-card-t .lead { color: #F1ECE2; margin-top: 6px; }
.logro-last { display: flex; align-items: center; gap: 16px; margin-top: 16px; border-color: rgba(229, 66, 79, .5); background: linear-gradient(90deg, rgba(110, 14, 22, .5), rgba(14, 10, 10, .9)); }
.logro-last > .ic:first-child { width: 40px; height: 40px; color: var(--gold); flex: none; }
.logro-last > div { flex: 1; }
.logro-last > .ic:last-child { color: var(--gold); flex: none; }
.evo-g { align-items: start; }
.evo-row { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.evo-row label { display: block; }
.evo-row label b { font: 600 1.1rem var(--serif); letter-spacing: .04em; color: var(--gold-hi); }
.evo-row label small { display: block; color: var(--mut); font-size: .8rem; }
.evo-in { display: flex; align-items: center; gap: 14px; }
.evo-in output { width: 34px; text-align: center; font: 600 1.4rem var(--serif); color: var(--gold-hi); }
.evo-form .btn { width: 100%; margin-top: 14px; }
.evo-chart .radar { width: 100%; max-width: 380px; margin: 8px auto 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; font-size: .78rem; color: var(--mut); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-gold { background: #C8A45D; } .lg-red { background: #E5424F; }
.deltas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; margin-top: 14px; }
.deltas li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: .88rem; }
.deltas b.up { color: #4FD08A; } .deltas b.dn { color: var(--red-hot); }
.logros-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.logro { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 22px 14px; opacity: .65; }
.logro.on { opacity: 1; border-color: rgba(200, 164, 93, .6); box-shadow: 0 0 30px rgba(200, 164, 93, .12); }
.logro-m { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--mut); background: rgba(255, 255, 255, .03); }
.logro.on .logro-m { color: #1a1205; background: linear-gradient(180deg, #EBD08F, #A8843F); border-color: var(--gold-hi); box-shadow: 0 0 24px rgba(200, 164, 93, .35); }
.logro-m .ic { width: 28px; height: 28px; }
.logro .h3 { font-size: 1.15rem; }
.logro .muted { font-size: .82rem; }

/* ---------- Diario ---------- */
.priv { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; font-size: .84rem; color: var(--mut); }
.priv .ic { width: 16px; height: 16px; color: var(--gold); flex: none; }
.jform-a { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.entry-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.entry-a { display: flex; gap: 6px; }
.icon-sm { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line); transition: background .2s; }
.icon-sm:hover { background: rgba(200, 164, 93, .12); }
.icon-sm .ic { width: 18px; height: 18px; }
.entry-t { color: #E2DED7; }
.rf-day { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.rf-day:first-child { border-top: 0; }
.rf { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line); }
.rf-q { font: 500 .95rem var(--serif); color: var(--gold); margin-bottom: 2px; }

/* ---------- Mapas ---------- */
.route { display: grid; gap: 14px; }
.route-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.route-h > div { flex: 1; min-width: 0; }
.nodes { display: flex; flex-wrap: wrap; gap: 10px; }
.node { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 600 1.1rem var(--serif); border: 1.5px solid rgba(200, 164, 93, .4); color: var(--gold); background: rgba(0, 0, 0, .4); transition: transform .2s, box-shadow .2s; }
.node:hover { transform: scale(1.08); }
.node .ic { width: 18px; height: 18px; }
.node.ds-done { background: linear-gradient(180deg, #B01A26, #7A0F18); color: #fff; border-color: #E5424F; }
.node.ds-active { border-color: var(--red-hot); color: #fff; box-shadow: 0 0 0 4px rgba(229, 66, 79, .18), 0 0 22px rgba(229, 66, 79, .5); }
.node.ds-locked { color: var(--mut); border-color: var(--line-soft); }
.node.ds-open { border-color: var(--gold); }
.exp-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exp-node { display: grid; justify-items: center; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.exp-node b { font: 600 1.8rem var(--serif); color: var(--gold-hi); }
.exp-node span { font: 600 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.legend-n { margin-top: 16px; }
.lg-done { background: #B01A26; } .lg-active { background: #E5424F; box-shadow: 0 0 8px #E5424F; } .lg-open { border: 1.5px solid var(--gold); } .lg-locked { border: 1.5px solid var(--mut); }
.legend-n i { border-radius: 50%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-b { min-height: 42px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); font: 600 .64rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #cfcac4; transition: all .2s; }
.chip-b.on { background: rgba(143, 17, 27, .4); border-color: #E5424F; color: #fff; }
.rmap-card { display: grid; gap: 16px; }
.rmap { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin: 6px auto 0; }
.rmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 1px solid var(--gold); background: radial-gradient(circle, rgba(143, 17, 27, .5), rgba(8, 8, 8, .9)); box-shadow: 0 0 30px rgba(143, 17, 27, .4); }
.rcenter small { font: 500 .5rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rcenter b { font: 600 .82rem/1.1 var(--serif); letter-spacing: .08em; }
.rnode { position: absolute; transform: translate(-50%, -50%); width: 26%; min-width: 74px; max-width: 104px; display: grid; justify-items: center; gap: 3px; padding: 7px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 10, 10, .92); color: var(--ink); transition: all .25s var(--ease); }
.rnode b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 .7rem var(--sans); color: #1a1205; background: var(--gold); }
.rnode span { font: 500 .6rem/1.2 var(--sans); text-align: center; }
.rnode:hover, .rnode.on { border-color: #E5424F; background: rgba(110, 14, 22, .85); transform: translate(-50%, -50%) scale(1.06); z-index: 2; }
.rdetail { min-height: 70px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.bodymap-g { display: grid; gap: 16px; }
.bodymap { position: relative; width: 210px; aspect-ratio: 200 / 420; margin: 0 auto; }
.body-svg { width: 100%; height: 100%; }
.pt { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--sans); z-index: 2; transition: transform .2s, box-shadow .2s; }
.pt::before { content: ""; position: absolute; inset: -8px; }
.pt.static::before { display: none; }
.pt.static { position: static; transform: none; flex: none; font-size: .64rem; }
.pt.lvl1 { border: 1.5px solid var(--gold); color: var(--gold-hi); background: rgba(8, 8, 8, .85); }
.pt.lvl2 { border: 1.5px solid var(--gold); color: #1a1205; background: var(--gold); }
.pt.lvl3 { border: 1.5px solid #FF7A85; color: #fff; background: linear-gradient(180deg, #C8202C, #8F111B); box-shadow: 0 0 14px rgba(229, 66, 79, .55); }
button.pt:hover { transform: translate(-50%, -50%) scale(1.15); }
.pt.sel { box-shadow: 0 0 0 4px rgba(245, 243, 239, .25), 0 0 18px rgba(200, 164, 93, .7); transform: translate(-50%, -50%) scale(1.2); }
.pt-detail p { margin-top: 8px; font-size: .92rem; color: #DDD9D2; }
.pt-detail b { color: var(--gold); font-weight: 600; }
.lvls { display: grid; gap: 10px; margin-top: 10px; }
.lvls li { display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.lvls .pt { width: 40px; height: 28px; border-radius: 99px; }
.pt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.pt-li { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; text-align: left; border-radius: 12px; border: 1px solid var(--line-soft); font-size: .8rem; line-height: 1.25; }
.pt-li.on { border-color: var(--gold); background: rgba(200, 164, 93, .1); }
.bodymap-g + .pt-list + .callout, #bodymap-wrap > .callout { margin-top: 16px; }

/* ---------- Vínculo Vivo / Tacto ---------- */
.prac { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(25, 25, 25, .9), rgba(13, 13, 13, .93)); overflow: hidden; }
.prac.done { border-color: rgba(200, 164, 93, .6); }
.prac > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px; cursor: pointer; }
.prac > summary::-webkit-details-marker { display: none; }
.prac-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 600 1.05rem var(--serif); color: var(--gold); }
.prac-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.prac-t b { font: 600 1.12rem/1.2 var(--serif); letter-spacing: .03em; }
.prac-t .eyebrow { font-size: .55rem; }
.prac-ok { color: var(--mut); opacity: .5; }
.prac.done .prac-ok { color: var(--gold); opacity: 1; }
.prac-b { padding: 4px 16px 18px; display: grid; gap: 10px; }
.pr-c { font: italic 500 1.12rem/1.4 var(--serif); color: var(--gold-hi); }
.pr-btn { margin-top: 6px; }
.plan-top { margin-bottom: 14px; }
.plan-prog { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.plan-prog b { font: 600 1.5rem var(--serif); color: var(--gold-hi); white-space: nowrap; }
.plan-prog .bar { flex: 1; }
.week { margin-bottom: 14px; }
.week-h { margin-bottom: 8px; }
.tramo { padding: 12px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.tramo-m p { font: 500 1.08rem/1.3 var(--serif); margin-top: 3px; }
.dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(200, 164, 93, .5); font: 600 1rem var(--serif); color: var(--gold); transition: all .2s; }
.dchip .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.dchip.on { background: linear-gradient(180deg, #B01A26, #7A0F18); border-color: #E5424F; color: #fff; }
.tech { display: flex; align-items: center; gap: 14px; }
.tech > div { flex: 1; min-width: 0; }
.tech > .ic:last-child { color: var(--gold); flex: none; }
.tech-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line); background: rgba(200, 164, 93, .06); }
.tech-ic .ic { width: 22px; height: 22px; }
.mp-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); color: var(--mut); font-size: .92rem; }
.mp-list li.on { color: var(--ink); }
.mp-list li.on .ic { color: var(--gold); }
.sdots { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.sdots-t { font: 600 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.sdots-d { display: flex; flex: 1; gap: 5px; }
.sdots-d i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.sdots-d i.ok { background: var(--gold); } .sdots-d i.cur { background: #E5424F; box-shadow: 0 0 8px rgba(229, 66, 79, .6); }
.tstep .h2 { text-transform: none; letter-spacing: .01em; font-size: clamp(1.5rem, 6vw, 2rem); }
.ts-ic { display: inline-grid; vertical-align: -.2em; margin-right: 10px; color: var(--gold); }
.how { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); }
.how b { font: 600 .62rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.how p { margin-top: 6px; font-size: .94rem; }
.how.sig-ok { border-color: rgba(79, 208, 138, .35); background: rgba(79, 208, 138, .06); }
.how.sig-ok b { color: #4FD08A; }
.sig-grid { display: grid; gap: 10px; }
.sig { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); }
.sig b { font: 600 1rem/1.25 var(--serif); color: var(--gold-hi); }
.sig span { color: var(--gold); display: grid; }
.sig p { font-size: .88rem; color: #D4D0C9; }
.timer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.timer-t { font: 600 2.6rem/1 var(--serif); color: var(--gold-hi); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.timer-a { display: flex; gap: 8px; }
.tl { display: grid; gap: 8px; }
.tl-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .02); transition: all .25s; }
.tl-row .chk { width: auto; min-height: 0; padding: 0; flex: none; }
.tl-row.cur { border-color: #E5424F; background: rgba(143, 17, 27, .2); box-shadow: 0 0 22px rgba(143, 17, 27, .25); }
.tl-row.on { opacity: .75; }
.tl-m b { display: block; font: 600 1.12rem/1.2 var(--serif); margin: 2px 0; }
.tl-m p { font-size: .88rem; color: #D0CCC5; }
.tl-m .eyebrow { font-size: .56rem; }

/* ---------- Config ---------- */
.cfg-logo { width: min(100%, 360px); aspect-ratio: 1672 / 520; margin: 0 auto 18px; position: relative; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 62%, transparent 100%); }
.cfg-logo img { position: absolute; left: 0; top: -72%; width: 100%; height: auto; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.set-row b { font: 600 1.1rem var(--serif); }
.set-row p { font-size: .84rem; margin-top: 2px; }
.inl { display: inline-block; vertical-align: -3px; width: 18px; height: 18px; color: var(--gold); margin-right: 4px; }
.danger { border-color: rgba(229, 66, 79, .4); }

/* ---------- Toast y modal ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + var(--safe-b) + 14px); z-index: 120; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 99px; background: rgba(16, 16, 16, .96); border: 1px solid var(--gold); color: var(--ink); font-size: .88rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .3s; }
.toast .ic { color: var(--gold); width: 20px; height: 20px; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.modal-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .22s both; }
.modal-back.out { animation: fadeOut .18s both; }
.modal { width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; padding: 26px 22px; border-radius: 18px; border: 1px solid rgba(200, 164, 93, .5); background: linear-gradient(180deg, #1a1311, #0e0b0a); box-shadow: 0 30px 90px rgba(0, 0, 0, .8), 0 0 60px rgba(143, 17, 27, .25); animation: pop .3s var(--ease) both; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.modal-actions .btn { flex: 1 1 150px; }
body.modal-open { overflow: hidden; }
.done-m, .ach-reveal { text-align: center; }
.done-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #C8202C, #8F111B); color: #fff; box-shadow: 0 0 34px rgba(229, 66, 79, .5); animation: pop .5s var(--ease) both .1s; }
.done-ic .ic { width: 34px; height: 34px; stroke-width: 2.2; }
.ach-medal { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #1a1205; background: linear-gradient(180deg, #F0DAA0, #B8923F); box-shadow: 0 0 50px rgba(200, 164, 93, .5); animation: medal .8s var(--ease) both; }
.ach-medal .ic { width: 44px; height: 44px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes medal { from { opacity: 0; transform: scale(.6) rotate(-14deg); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .page-h.art { padding-inline: 24px; margin-inline: -24px; }
  .scroller { padding-inline: 24px; margin-inline: -24px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .logros-g { grid-template-columns: repeat(3, 1fr); }
  .fases-g { grid-template-columns: repeat(3, 1fr); }
  .home-prog { grid-template-columns: 1.1fr .6fr 1fr; }
  .home-cta { grid-column: auto; }
  .home-next { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .tabs-4 .tab { flex-direction: row; gap: 8px; font-size: .64rem; }
  .bodymap-g { grid-template-columns: 240px 1fr; align-items: start; }
  .bodymap { width: 240px; }
}
@media (min-width: 900px) {
  .page-h.art { margin-inline: 0; border-radius: 0 0 var(--r) var(--r); padding-inline: 32px; }
  .scroller { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 0; margin: 0; }
  .scroller > * { max-width: none; }
  .camino-grid { margin-top: 8px; }
  .xgrid { gap: 18px; }
  .xcard-img { height: 160px; }
  .pcard-img { height: 200px; }
  .toast { bottom: 28px; }
  .home-prog { padding: 22px 26px; }
  .gprog { grid-template-columns: auto 1fr auto; gap: 28px; }
  .gprog-s { grid-column: auto; grid-template-columns: repeat(3, 90px); padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--line-soft); }
  .logros-g { grid-template-columns: repeat(3, 1fr); }
  .fases-g { grid-template-columns: repeat(5, 1fr); }
  .info-grid.three { grid-template-columns: repeat(3, 1fr); }
  .stepper-w { top: calc(var(--hdr) - 1px); }
  .dsec { padding: 26px 28px; }
  .tabs { max-width: 640px; }
  .tabs-4 { max-width: 760px; }
  .page-h .lead { max-width: 40rem; }
  .rmap { width: 440px; }
}

/* ---- ajustes tras pruebas ---- */
.pprog { flex-wrap: wrap; }
.pprog > .ring, .pprog > svg, .pprog > .ring-w { flex: none; }
.pprog-m { flex: 1 1 140px; }
.pprog-l, .pprog .pprog-cta { flex: 1 1 100%; justify-content: center; padding: 12px 0 0; margin-top: 2px; border-left: 0; border-top: 1px solid var(--line); }
.pprog .pprog-cta { border: 1px solid transparent; padding: 0 1rem; }
@media (min-width: 640px) {
  .pprog { flex-wrap: nowrap; }
  .pprog-l { flex: none; padding: 0 0 0 16px; margin: 0; border-top: 0; border-left: 1px solid var(--line); }
  .pprog .pprog-cta { flex: none; }
}

/* ================= Mapa del Tacto interactivo ================= */
.mm { --heat: 0; }
.mm-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mm-mo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--muted, #A7A3A0); text-align: center; transition: all .25s var(--ease); min-height: 76px; }
.mm-mo .ic { width: 20px; height: 20px; }
.mm-mo span { display: grid; gap: 2px; }
.mm-mo b { font: 600 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.mm-mo small { font-size: .66rem; line-height: 1.2; opacity: .8; }
.mm-mo.on { color: var(--ivory, #F5F3EF); border-color: rgba(229, 66, 79, .7); background: linear-gradient(180deg, rgba(143, 17, 27, .5), rgba(74, 8, 13, .45)); box-shadow: 0 0 22px rgba(143, 17, 27, .35); }
.mm-mo.on .ic { color: var(--gold-hi, #E3C27B); }

.mm-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mm-col-body .tabs-sm { margin-bottom: 10px; }
.mm-body { position: relative; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, rgba(74, 8, 13, .55), #0a0606 70%); padding: 10px 0 6px; }
.mm-glow { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 42%, rgba(229, 66, 79, .9), transparent 70%); opacity: calc(.08 + var(--heat) * .55); pointer-events: none; transition: opacity .3s; mix-blend-mode: screen; }
.mm-figwrap { position: relative; display: flex; justify-content: center; }
.mm-figbox { position: relative; width: 100%; max-width: 250px; aspect-ratio: 240 / 520; touch-action: manipulation; cursor: crosshair; }
.mm-fig { position: absolute; inset: 0; }
.mm-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mm-aura { opacity: calc(.18 + var(--heat) * .75); }
.mm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mm-pt { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; z-index: 4; border: 0; background: none; padding: 0; color: #fff; }
.mm-pt::before { content: ""; position: absolute; inset: -6px; }
.mm-pt b { position: relative; z-index: 2; font: 700 .7rem var(--sans); }
.mm-pt i { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 160, .95), rgba(229, 66, 79, .8) 55%, rgba(143, 17, 27, .35)); box-shadow: 0 0 14px 3px rgba(229, 66, 79, .6); animation: mmPulse 2.2s ease-in-out infinite; }
.mm-pt.lvl1 i { background: radial-gradient(circle, rgba(8, 8, 8, .9) 35%, rgba(200, 164, 93, .35)); box-shadow: 0 0 12px 2px rgba(200, 164, 93, .55); border: 1.5px solid var(--gold); }
.mm-pt.lvl2 i { background: radial-gradient(circle, rgba(227, 194, 123, .95), rgba(200, 164, 93, .75)); box-shadow: 0 0 14px 3px rgba(200, 164, 93, .6); }
.mm-pt.lvl2 b { color: #1a1205; }
.mm-pt.found i { animation-duration: 3.6s; filter: saturate(.75); }
.mm-pt.sel { z-index: 5; }
.mm-pt.sel i { inset: 2px; box-shadow: 0 0 0 3px rgba(245, 243, 239, .35), 0 0 22px 6px rgba(229, 66, 79, .8); }
.mm-pt:hover i { transform: scale(1.2); }
@keyframes mmPulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.18); opacity: 1; } }
.mm-rip, .mm-trail { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.mm-rip { width: 20px; height: 20px; border: 2px solid rgba(255, 190, 150, .9); animation: mmRip .8s ease-out forwards; }
.mm-rip.big { border-color: rgba(229, 66, 79, .95); box-shadow: 0 0 18px rgba(229, 66, 79, .7); }
.mm-trail { width: 26px; height: 26px; background: radial-gradient(circle, rgba(255, 170, 130, .55), transparent 70%); animation: mmTrail .7s ease-out forwards; }
@keyframes mmRip { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }
@keyframes mmTrail { from { opacity: 1; transform: translate(-50%, -50%) scale(.8); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }

.mm-col-face { display: grid; gap: 10px; }
.mm-face { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(200, 164, 93, .55); box-shadow: 0 0 calc(10px + var(--heat) * 40px) rgba(229, 66, 79, calc(.2 + var(--heat) * .55)), inset 0 0 30px rgba(0, 0, 0, .6); background: #080606; }
.mm-face-svg { width: 100%; height: 100%; display: block; }
.mm-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(229, 66, 79, .5); z-index: 2; pointer-events: none; animation: mmBreath var(--br, 3.4s) ease-in-out infinite; }
@keyframes mmBreath { 0%, 100% { transform: scale(.94); opacity: .1; } 50% { transform: scale(1); opacity: .6; } }
.mm-meter-h { display: flex; justify-content: space-between; align-items: baseline; font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.mm-meter-h b { font: 600 1rem/1 var(--serif); letter-spacing: .04em; color: var(--ivory, #F5F3EF); text-transform: none; }
.mm-meter-b { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mm-meter-f { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #C8A45D, #E5424F 70%, #ff7a85); box-shadow: 0 0 12px rgba(229, 66, 79, .6); transition: width .25s linear; }
.mm-state { font: 500 .95rem/1.35 var(--serif); color: #E7E2DA; min-height: 2.7em; }
.mm-resp { font: italic 500 .9rem/1.35 var(--serif); color: var(--gold-hi, #E3C27B); min-height: 2.7em; opacity: 0; transition: opacity .4s; padding-left: 10px; border-left: 2px solid rgba(200, 164, 93, .5); }
.mm-resp.on { opacity: 1; }
.mm-resp.pop { animation: mmPop .5s var(--ease); }
@keyframes mmPop { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
.mm-btns { display: flex; gap: 8px; }
.mm-btns .btn { min-height: 44px; font-size: .68rem; padding: 0 12px; }
.mm-btns .btn:first-child { flex: 1; }
.mm-hint { margin: 14px 0; font-size: .82rem; color: #A7A3A0; display: flex; gap: 8px; align-items: flex-start; }
.mm-hint .inl { flex: none; margin-top: 2px; color: var(--gold); }
.mm-prog { margin: 16px 0 4px; font-size: .84rem; color: #CFCAC3; display: flex; gap: 8px; align-items: center; }
.mm-prog b { color: var(--gold); }
.mm-intro-t { margin: 6px 0 14px; color: #DDD9D2; }
.mm-check { margin-top: 12px; font-size: .84rem; color: #CFCAC3; display: flex; gap: 8px; }
.mm-ok { margin-left: auto; width: 16px; height: 16px; color: var(--gold); flex: none; }
@media (max-width: 420px) {
  .mm-mo small { display: none; }
  .mm-mo { min-height: 62px; }
  .mm-btns .btn { font-size: .62rem; letter-spacing: .08em; }
}
@media (min-width: 760px) {
  .mm-stage { grid-template-columns: 300px 1fr; gap: 24px; }
  .mm-col-face { grid-template-columns: 1fr; max-width: 340px; }
  .mm-moments { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) { .mm-pt i, .mm-ring { animation: none; } }
.pref-rm .mm-pt i, .pref-rm .mm-ring { animation: none; }
@media (max-width: 480px) {
  .tabs .tab { padding-left: 6px; padding-right: 6px; letter-spacing: .1em; font-size: .66rem; flex: 1 1 auto; }
}
@media (min-width: 1000px) {
  .mm { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 36px; align-items: start; }
  .mm-right { position: sticky; top: 96px; }
  .mm-right .mm-hint { margin-top: 0; }
  .mm-stage { grid-template-columns: 300px 1fr; }
}

/* acceso: fondo más transparente, recortado a la pareja y sin textos del póster */
.access-art img { opacity: .5; filter: saturate(.95) brightness(.85); }
@media (min-width: 900px) {
  .access-art img { left: -4%; top: -2vh; width: 190vw; height: auto; transform: none; opacity: .38; filter: blur(1.5px) saturate(.95) brightness(.8); }
  .access-art::after { background: linear-gradient(180deg, rgba(6, 6, 6, .55), rgba(6, 6, 6, .25) 35%, #060606 92%), linear-gradient(90deg, rgba(6, 6, 6, .15) 0, rgba(6, 6, 6, .55) 38%, #060606 62%, #060606 100%); }
}
@media (min-width: 900px) {
  .access-art { height: 74vh; inset: 0 0 auto 0; }
  .access-art img { left: -2%; top: -3vh; width: 150vw; opacity: .5; filter: saturate(.95) brightness(.85); }
  .access-art::after { background: linear-gradient(180deg, rgba(6, 6, 6, .45), transparent 30%, rgba(6, 6, 6, .6) 66%, #060606 98%), linear-gradient(90deg, transparent 0, rgba(6, 6, 6, .2) 30%, rgba(6, 6, 6, .85) 55%, #060606 70%); }
}

/* guía: foto de Mateo Navarro + frases rotativas */
.guide { align-items: flex-start; }
.guide-av { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(143, 17, 27, .35), 0 8px 24px rgba(0, 0, 0, .5); background: #0b0707; }
.guide-av picture, .guide-av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.guide-dot { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #3ddc84; border: 2px solid #111; box-shadow: 0 0 8px rgba(61, 220, 132, .7); }
.guide-b { min-width: 0; flex: 1; }
.guide-q { transition: opacity .45s ease, transform .45s ease; min-height: 4.2em; }
.guide-q.out { opacity: 0; transform: translateY(6px); }
.guide-dots { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.guide-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(245, 243, 239, .2); transition: all .4s; }
.guide-dots i.on { width: 16px; border-radius: 3px; background: var(--gold); }
@media (min-width: 640px) { .guide-av { width: 104px; height: 104px; } .guide-q { min-height: 3.2em; } }
.pref-rm .guide-q { transition: none; }

/* Herramientas */
.frases .frase { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.frases .frase p { font: italic 500 1.02rem/1.45 var(--serif); color: var(--ink); }
.frases .frase .icon-sm[aria-pressed="true"] { color: var(--gold); }
.frases .frase .icon-sm[aria-pressed="true"] .ic { fill: currentColor; }

/* Duración Infinita */
.drow-ic { display: grid; place-items: center; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(143, 17, 27, .35), #150b0b 70%); }
.drow-ic .ic { width: 30px; height: 30px; }
.prac.pos > summary { min-height: 86px; }
.pos-pg { flex: none; width: 84px; display: grid; place-items: center; border-radius: 10px; background: #130a0a; border: 1px solid var(--line-soft); padding: 4px; }
.pos-big { display: grid; place-items: center; padding: 10px; border-radius: 12px; background: #130a0a; border: 1px solid var(--line-soft); }
.mtrs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.mtr { display: inline-flex; align-items: center; gap: 4px; }
.mtr em { color: var(--gold); display: inline-flex; }
.mtr .ic { width: 12px; height: 12px; }
.mtr-d { display: inline-flex; gap: 2px; }
.mtr-d i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.mtr-d i.on { background: var(--gold); }
.wid { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); display: grid; gap: 10px; }
.wid input[type=range] { width: 100%; accent-color: #C8A45D; min-height: 44px; }
.esc-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 8px; }
.esc-bar i { display: block; height: 100%; transition: width .25s var(--ease), background .25s; }
.breath { display: grid; place-items: center; gap: 8px; padding: 8px 0; }
.breath-c { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 66, 79, .6), rgba(143, 17, 27, .25)); border: 1px solid #E5424F; transition: transform 4s ease-in-out; }
.breath-c.in { transform: scale(1.7); transition-duration: 4s; }
.breath-c.out { transform: scale(1); transition-duration: 6s; }
.pref-rm .breath-c { transition: none; }
.dial { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
#dial-g { transition: transform .15s; }

/* Cama Mojada */
.metro { display: grid; place-items: center; height: 70px; }
.metro i { width: 28px; height: 28px; border-radius: 50%; background: rgba(229, 66, 79, .25); border: 1px solid #E5424F; transition: transform .12s, background .12s; }
.metro i.on { background: #E5424F; transform: scale(1.5); }
.arm { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.arm-sw { transform-origin: 24px 26px; animation: armSw 1.6s ease-in-out infinite alternate; }
.arm-wr .arm-hand { transform-origin: 100px 38px; animation: armWr .35s ease-in-out infinite alternate; }
@keyframes armSw { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes armWr { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.pref-rm .arm-sw, .pref-rm .arm-wr .arm-hand { animation: none; }
.sema { padding: 14px 16px; border-width: 1.5px; }
.sema-l { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- Pulido móvil ---------- */
a, button, summary, label, [role="tab"], [role="checkbox"], [role="switch"], input, select, textarea { touch-action: manipulation; }
a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1em); }        /* evita el zoom automático de iOS al enfocar */
input[type="range"] { min-height: 44px; }
html { overflow-wrap: break-word; }
img, svg { max-width: 100%; }
@media (hover: none) { .mm-pt:hover i { transform: none; } }
@media (max-height: 480px) and (orientation: landscape) {
  .bnav a { min-height: 44px; flex-direction: row; gap: 6px; }
  .bnav a .ic { width: 20px; height: 20px; }
}

.tools-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .tools-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tools-g .tech { padding: 12px 14px; }
.frases .frase .icon-sm { width: 44px; height: 44px; flex: none; }
.link, .link-b, .link-i, .switch { position: relative; }
.link::after, .link-b::after, .link-i::after { content: ""; position: absolute; inset: -12px -8px; }
.switch::after { content: ""; position: absolute; inset: -8px -4px; }
.link-b { min-height: 32px; }
.back-btn { min-height: 44px; }
.route { grid-template-columns: minmax(0, 1fr); }
.route-h { flex-wrap: wrap; }
@media (max-width: 360px) { .nodes { gap: 8px; } .node { width: 42px; height: 42px; } }