/* Piggy Life · Cómo funciona. Scoped so no other page inherits this motion system. */
.how-page { overflow-x: clip; }
.how-hero { overflow: hidden; }
.how-hero .piggy-container { position: relative; }
.how-hero-title { display: flex; flex-wrap: wrap; column-gap: .22em; }
.how-title-line { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.how-title-line > span { display: block; }

.motion-enabled .how-hero .eyebrow { animation: how-fade-up .46s cubic-bezier(.22,1,.36,1) both .1s; }
.motion-enabled .how-title-line > span { animation: how-line-reveal .72s cubic-bezier(.22,1,.36,1) both .2s; }
.motion-enabled .how-title-line:nth-child(2) > span { animation-delay: .3s; }
.motion-enabled .how-hero .piggy-container > p:last-child { animation: how-fade-up .58s cubic-bezier(.22,1,.36,1) both .54s; }
@keyframes how-fade-up { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes how-line-reveal { from { transform: translateY(105%); } to { transform: translateY(0); } }

.steps-section { position: relative; padding-top: 42px; background: #fff; }
.how-process { --how-progress: 0%; position: sticky; top: 96px; z-index: 12; padding: 17px 26px 15px; border: 1px solid rgba(14,34,68,.07); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 12px 35px rgba(14,34,68,.055); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.how-process ol { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6,1fr); margin: 0; padding: 0; list-style: none; }
.how-process li { display: flex; justify-content: center; color: var(--piggy-navy); opacity: .28; transition: color .3s ease, opacity .3s ease; }
.how-process li:first-child { justify-content: flex-start; }.how-process li:last-child { justify-content: flex-end; }
.how-process li span { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 9px; background: #fff; font-size: .72rem; font-weight: 850; letter-spacing: .08em; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.how-process li.is-complete { opacity: .68; }
.how-process li.is-active { color: #fff; opacity: 1; }
.how-process li.is-active span { background: var(--piggy-pink); box-shadow: 0 6px 16px rgba(255,63,164,.2); }
.how-process-line { position: absolute; left: 42px; right: 42px; top: 30px; height: 1px; overflow: hidden; background: rgba(14,34,68,.12); }
.how-process-line i { display: block; width: var(--how-progress); height: 100%; background: var(--piggy-pink); transition: width .48s cubic-bezier(.22,1,.36,1); }

.how-story-grid { display: grid; grid-template-columns: minmax(390px,.9fr) minmax(0,1.1fr); gap: clamp(60px,8vw,112px); align-items: start; padding-top: 36px; }
.how-story-visual { position: relative; min-height: 100%; }
.how-visual-sticky { position: sticky; top: 190px; height: min(520px,calc(100vh - 225px)); min-height: 430px; overflow: hidden; border: 1px solid rgba(14,34,68,.07); border-radius: 38px; background: radial-gradient(circle at 25% 20%,rgba(255,63,164,.13),transparent 32%),linear-gradient(150deg,#fff8fb 0%,#f7f8fc 58%,#f0fbf7 100%); box-shadow: 0 24px 70px rgba(14,34,68,.1); }
.how-visual { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(30px,4vw,56px); opacity: 0; pointer-events: none; transform: translateY(15px) scale(.985); transition: opacity .5s ease, transform .58s cubic-bezier(.22,1,.36,1); }
.how-visual.is-active { z-index: 2; opacity: 1; transform: translateY(0) scale(1); }
.how-mobile-visual { display: none; }

.how-steps article { position: relative; grid-template-columns: 104px 1fr 62px; gap: 26px; min-height: 68vh; padding: 80px 0; opacity: .42; transition: opacity .35s ease; }
.how-steps article.is-active { opacity: 1; }
.how-steps article > i { width: 58px; height: 58px; font-size: 1.45rem; transition: transform .32s cubic-bezier(.22,1,.36,1), background-color .3s ease; }
.how-steps article.is-active > i { background: var(--piggy-pink); color: #fff; transform: scale(1) rotate(0); }
.motion-enabled .how-steps article:not(.is-active) > i { transform: scale(.9) rotate(-2deg); }
.how-steps article h2 { font-size: clamp(2.1rem,3.4vw,3.45rem); }
.how-steps article p { max-width: 560px; font-size: 1.03rem; }

/* Step 01 */
.profile-orbit { position: relative; width: min(390px,100%); height: 330px; }
.profile-orbit span,.profile-orbit strong { position: absolute; display: grid; place-items: center; min-width: 112px; padding: 15px 18px; border: 1px solid rgba(14,34,68,.08); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 13px 30px rgba(14,34,68,.08); font-size: .82rem; }
.profile-orbit strong { left: 50%; top: 50%; min-width: 145px; min-height: 86px; border-color: rgba(255,63,164,.22); color: var(--piggy-navy); transform: translate(-50%,-50%); }
.profile-orbit span:nth-child(1){left:0;top:30px}.profile-orbit span:nth-child(2){right:0;top:66px}.profile-orbit span:nth-child(3){left:12px;bottom:35px}.profile-orbit span:nth-child(4){right:5px;bottom:18px}
.how-visual.is-active .profile-orbit span { animation: how-card-settle .55s cubic-bezier(.22,1,.36,1) both; }
.how-visual.is-active .profile-orbit span:nth-child(2){animation-delay:.06s}.how-visual.is-active .profile-orbit span:nth-child(3){animation-delay:.12s}.how-visual.is-active .profile-orbit span:nth-child(4){animation-delay:.18s}
@keyframes how-card-settle { from { opacity:0; transform:translate(var(--scatter-x,8px),var(--scatter-y,12px)); } to { opacity:1; transform:translate(0,0); } }

/* Step 02 */
.connection-map { position: relative; width: min(410px,100%); height: 355px; }
.connection-map strong { position:absolute; left:50%; top:50%; z-index:2; display:flex; align-items:center; gap:9px; min-width:145px; justify-content:center; padding:18px; border-radius:18px; background:var(--piggy-navy); color:#fff; transform:translate(-50%,-50%); box-shadow:0 18px 35px rgba(14,34,68,.18); }
.connection-map strong img { width:28px; height:28px; object-fit:contain; }
.connection-map span { position:absolute; z-index:2; padding:11px 15px; border:1px solid rgba(14,34,68,.09); border-radius:999px; background:#fff; box-shadow:0 10px 24px rgba(14,34,68,.07); font-size:.76rem; font-weight:760; }
.connection-map span:nth-of-type(1){left:0;top:25px}.connection-map span:nth-of-type(2){right:0;top:54px}.connection-map span:nth-of-type(3){left:5px;bottom:60px}.connection-map span:nth-of-type(4){right:0;bottom:35px}.connection-map span:nth-of-type(5){left:50%;bottom:0;transform:translateX(-50%);opacity:.45}
.connection-map i { position:absolute; left:50%; top:50%; z-index:1; width:2px; height:135px; background:linear-gradient(transparent,rgba(255,63,164,.5)); transform-origin:top; }
.connection-map i:nth-of-type(1){transform:rotate(-58deg)}.connection-map i:nth-of-type(2){transform:rotate(55deg)}.connection-map i:nth-of-type(3){transform:rotate(-120deg)}.connection-map i:nth-of-type(4){transform:rotate(120deg)}.connection-map i:nth-of-type(5){height:165px;opacity:.25}
.how-visual.is-active .connection-map i { animation: how-line-grow .48s ease both .12s; }
@keyframes how-line-grow { from { scale:1 0; } to { scale:1 1; } }

/* Step 03 */
.health-visual { display:grid; justify-items:center; width:100%; }
.health-ring { width:205px; height:205px; display:grid; place-items:center; padding:18px; border-radius:50%; background:conic-gradient(var(--piggy-pink) 0 78%,rgba(14,34,68,.08) 78%); box-shadow:0 18px 40px rgba(255,63,164,.14); }
.health-ring::before { content:""; grid-area:1/1; width:100%; height:100%; border-radius:50%; background:#fff; }
.health-ring span { grid-area:1/1; z-index:1; display:flex; align-items:baseline; }
.health-ring strong { font-size:3.35rem; line-height:1; }.health-ring small{color:var(--piggy-muted);font-weight:740}
.health-visual > p { margin:18px 0 22px; color:var(--piggy-navy); font-weight:810; }
.health-visual > div:last-child { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.health-visual > div:last-child span { padding:7px 10px; border-radius:999px; background:#fff; color:var(--piggy-muted); font-size:.7rem; font-weight:720; }

/* Step 04 */
.priority-stack { width:min(390px,100%); display:flex; flex-direction:column; align-items:center; gap:9px; }
.priority-stack span { display:flex; align-items:center; gap:13px; width:calc(100% - var(--stack-inset,0px)); padding:15px 18px; border:1px solid rgba(14,34,68,.08); border-radius:14px; background:#fff; box-shadow:0 10px 25px rgba(14,34,68,.06); font-weight:760; }
.priority-stack span:nth-child(1){--stack-inset:80px}.priority-stack span:nth-child(2){--stack-inset:60px}.priority-stack span:nth-child(3){--stack-inset:40px}.priority-stack span:nth-child(4){--stack-inset:20px}.priority-stack span:nth-child(5){border-color:rgba(255,63,164,.28);background:var(--piggy-pink-soft)}
.priority-stack b { width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--piggy-navy);color:#fff;font-size:.7rem; }
.how-visual.is-active .priority-stack span { animation:how-priority .45s cubic-bezier(.22,1,.36,1) both; }
.how-visual.is-active .priority-stack span:nth-child(4){animation-delay:.06s}.how-visual.is-active .priority-stack span:nth-child(3){animation-delay:.12s}.how-visual.is-active .priority-stack span:nth-child(2){animation-delay:.18s}.how-visual.is-active .priority-stack span:nth-child(1){animation-delay:.24s}
@keyframes how-priority { from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)} }

/* Step 05 */
.piggy-recommendation { width:min(390px,100%); padding:30px; border:1px solid rgba(255,63,164,.2); border-radius:26px; background:#fff; box-shadow:0 25px 55px rgba(14,34,68,.11); }
.piggy-recommendation > small { color:var(--piggy-pink);font-size:.67rem;font-weight:850;letter-spacing:.12em; }.piggy-recommendation > span { float:right;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--piggy-pink-soft);color:var(--piggy-pink); }
.piggy-recommendation h3 { clear:both; max-width:310px; padding-top:34px; font-size:1.7rem; line-height:1.15; }
.piggy-recommendation div { height:7px;overflow:hidden;margin:27px 0 14px;border-radius:99px;background:#edf0f4; }.piggy-recommendation div i{display:block;width:72%;height:100%;background:var(--piggy-pink)}
.piggy-recommendation p { margin:0;font-size:.78rem; }

/* Step 06 */
.expert-flow { width:min(430px,100%); display:grid; grid-template-columns:1fr 35px 1fr; gap:13px; align-items:center; }
.expert-node { min-height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:21px;border:1px solid rgba(14,34,68,.08);border-radius:23px;background:#fff;box-shadow:0 14px 35px rgba(14,34,68,.08);text-align:center; }
.expert-node img,.expert-node > span { width:50px;height:50px;display:grid;place-items:center;margin-bottom:13px;border-radius:16px;object-fit:contain; }.expert-node > span{background:var(--piggy-navy);color:#fff;font-weight:850}.expert-node > span img{width:35px;height:35px;margin:0;filter:brightness(0) invert(1)}.expert-node small{color:var(--piggy-muted)}
.expert-flow > i { color:var(--piggy-pink);font-style:normal;font-size:1.6rem;text-align:center; }
.expert-flow > p { grid-column:1/-1;margin:10px 0 0;padding:15px 18px;border-radius:15px;background:var(--piggy-pink-soft);color:var(--piggy-navy);text-align:center;font-weight:760; }

/* Connections */
.how-page .connection-lab { position:relative; }
.how-page .connection-layout { align-items:center; }
.how-page .connection-list { display:grid; gap:12px; overflow:visible; border:0; border-radius:0; background:transparent; }
.how-page .connection-list > div { min-height:82px; border:1px solid rgba(14,34,68,.08); border-radius:19px; background:#fff; box-shadow:0 10px 26px rgba(14,34,68,.045); transition:opacity .55s ease var(--motion-delay,0ms),transform .55s cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms),border-color .2s ease,box-shadow .2s ease; }
.motion-enabled .how-page .connection-list > div { opacity:0; transform:translateY(20px); }
.motion-enabled .how-page .connection-list > div.is-revealed { opacity:1; transform:translateY(0); }
.how-page .connection-list > div:hover { border-color:rgba(255,63,164,.22);box-shadow:0 14px 32px rgba(14,34,68,.07); }
.how-page .connect-toggle { transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }.how-page .connect-toggle:hover,.how-page .connect-toggle:focus-visible{border-color:rgba(255,63,164,.35);transform:translateY(-1px)}

/* Normalized, non-financial scenario chart. */
.how-page .simulation-explainer { background:#fff; }
.how-page .scenario-graphic { height:auto; min-height:430px; display:block; padding:28px; color:var(--piggy-navy); background:linear-gradient(150deg,var(--piggy-navy),#183762); }
.scenario-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:14px;background:rgba(255,255,255,.08); }
.scenario-tabs button { padding:10px 8px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.62);cursor:pointer;font-size:.78rem;font-weight:760;transition:background-color .25s ease,color .25s ease; }
.scenario-tabs button[aria-pressed="true"] { background:#fff;color:var(--piggy-navy); }
.scenario-tabs button:focus-visible { outline:3px solid rgba(255,63,164,.45);outline-offset:2px; }
.scenario-canvas { position:relative;height:310px;margin-top:27px;overflow:hidden;border-radius:20px;background:rgba(255,255,255,.045); }
.scenario-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:100% 25%,25% 100%; }
.scenario-canvas svg { position:absolute;left:18px;right:18px;top:21px;width:calc(100% - 36px);height:250px;overflow:visible; }
.scenario-line { fill:none;stroke:var(--piggy-pink);stroke-width:4;stroke-linecap:round;opacity:.12;transition:opacity .38s ease,stroke-width .38s ease; }
.scenario-area { fill:rgba(255,63,164,.13);opacity:0;transition:opacity .38s ease; }
.scenario-graphic[data-active-scenario="prudente"] .scenario-prudente,.scenario-graphic[data-active-scenario="central"] .scenario-central,.scenario-graphic[data-active-scenario="favorable"] .scenario-favorable{opacity:1}
.scenario-graphic[data-active-scenario="prudente"] .scenario-line.scenario-prudente,.scenario-graphic[data-active-scenario="central"] .scenario-line.scenario-central,.scenario-graphic[data-active-scenario="favorable"] .scenario-line.scenario-favorable{stroke-width:5}
.scenario-axis { position:absolute;left:21px;right:21px;bottom:13px;display:flex;justify-content:space-between;color:rgba(255,255,255,.52);font-size:.69rem; }

/* Reusable reveal contract from piggy-motion.js. */
.motion-enabled .how-page [data-how-reveal] { opacity:0;transform:translateY(15px);transition:opacity .58s ease,transform .58s cubic-bezier(.22,1,.36,1); }
.motion-enabled .how-page [data-how-reveal].is-revealed { opacity:1;transform:translateY(0); }

/* FAQ */
.how-page .accordion article > .faq-answer { display:block;max-height:0;overflow:hidden;padding:0;opacity:0;transition:max-height .28s ease,opacity .22s ease,padding .28s ease; }
.how-page .accordion article.open > .faq-answer { max-height:260px;padding:0 0 22px;opacity:1; }
.how-page .accordion button span { transform:none;transition:color .2s ease; }.how-page .accordion article.open button span{color:var(--piggy-pink);transform:none}
.how-page .accordion button:focus-visible { outline:3px solid rgba(255,63,164,.25);outline-offset:4px;border-radius:8px; }

@media (max-width: 980px) {
	.how-story-grid { grid-template-columns:minmax(315px,.85fr) minmax(0,1.15fr);gap:44px; }
	.how-visual-sticky { top:180px;min-height:390px;height:calc(100vh - 215px); }
	.how-visual { padding:28px; }
	.how-steps article { grid-template-columns:82px 1fr 50px;gap:18px; }
	.how-steps article > i { width:48px;height:48px;font-size:1.2rem; }
	.profile-orbit,.connection-map{transform:scale(.88)}
}

@media (max-width: 820px) {
	.how-process { top:92px;width:min(720px,calc(100% - 40px));padding-inline:18px; }
	.how-process-line{left:34px;right:34px}
	.how-story-grid { display:block;width:min(720px,calc(100% - 40px));padding-top:22px; }
	.how-story-visual { display:none; }
	.how-steps article { display:grid;grid-template-columns:78px 1fr 48px;min-height:auto;padding:58px 0;opacity:.62; }
	.how-steps article.is-active { opacity:1; }
	.how-mobile-visual { display:block;grid-column:1/-1;margin-top:25px; }
	.how-mobile-visual .how-visual { position:relative;inset:auto;display:grid;min-height:390px;padding:28px;border:1px solid rgba(14,34,68,.07);border-radius:28px;background:radial-gradient(circle at 25% 20%,rgba(255,63,164,.12),transparent 32%),linear-gradient(150deg,#fff8fb,#f7f8fc 60%,#f0fbf7);opacity:1;transform:none; }
	.connection-layout,.split-content { gap:52px; }
}

@media (max-width: 600px) {
	.how-hero { padding-top:145px;padding-bottom:80px; }
	.how-hero-title { font-size:clamp(3rem,15vw,4.35rem); }
	.steps-section { padding-top:25px; }
	.how-process { top:78px;width:calc(100% - 28px);padding:12px 13px 11px;border-radius:14px; }
	.how-process li span { width:29px;height:25px;font-size:.64rem; }.how-process-line{left:27px;right:27px;top:24px}
	.how-story-grid { width:calc(100% - 36px); }
	.how-steps article { grid-template-columns:1fr 45px;gap:15px;padding:48px 0; }
	.how-steps article > span { grid-column:1/-1; }.how-steps article > div:not(.how-mobile-visual){grid-column:1}.how-steps article > i{grid-column:2;grid-row:2}.how-mobile-visual{grid-column:1/-1}
	.how-mobile-visual .how-visual { min-height:340px;padding:20px; }
	.profile-orbit,.connection-map{transform:scale(.78)}
	.health-ring{width:175px;height:175px}.health-ring strong{font-size:2.85rem}
	.priority-stack span{padding:12px 14px}.priority-stack span:nth-child(1){--stack-inset:58px}.priority-stack span:nth-child(2){--stack-inset:44px}.priority-stack span:nth-child(3){--stack-inset:30px}.priority-stack span:nth-child(4){--stack-inset:16px}
	.piggy-recommendation{padding:24px}.piggy-recommendation h3{font-size:1.45rem}
	.expert-flow{grid-template-columns:1fr 25px 1fr;gap:7px}.expert-node{min-height:150px;padding:14px;font-size:.82rem}
	.how-page .connection-list > div{align-items:flex-start;flex-direction:column;gap:13px;padding:19px}.how-page .connect-toggle{align-self:flex-end}
	.scenario-tabs button{font-size:.68rem;padding-inline:4px}.how-page .scenario-graphic{min-height:360px;padding:18px}.scenario-canvas{height:270px}.scenario-canvas svg{height:215px}
}

@media (prefers-reduced-motion: reduce) {
	.how-page * { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important; }
	.how-process { position:static; }
	.how-story-grid { display:block; }
	.how-story-visual { display:none; }
	.how-steps article { min-height:auto;opacity:1; }
	.how-mobile-visual { display:block;grid-column:1/-1;margin-top:24px; }
	.how-mobile-visual .how-visual { position:relative;inset:auto;display:grid;min-height:360px;border:1px solid rgba(14,34,68,.07);border-radius:28px;background:#f8f9fc;opacity:1;transform:none; }
	.motion-enabled .how-page [data-how-reveal],.motion-enabled .how-page .connection-list > div { opacity:1;transform:none; }
}