/* PWRO public guides: existing parchment, local type and blue/gold tokens. */
.comp-page{max-width:1216px;margin:auto;padding:0 32px 64px;color:var(--color-text);font-family:var(--font-body)}
.comp-page *{box-sizing:border-box}.comp-page [hidden]{display:none!important}
.comp-page :is(section,aside)[id]{scroll-margin-top:120px}
.comp-topic-nav{display:flex;gap:8px;border-bottom:1px solid var(--color-gold-line);padding:22px 0}
.comp-topic-nav a{display:flex;align-items:center;gap:28px;padding:8px 16px;border:1px solid transparent;border-radius:6px;color:var(--color-text-muted);font-size:14px;text-decoration:none}
.comp-topic-nav a[aria-current]{border-color:var(--color-gold-line);background:var(--color-surface);color:var(--color-primary)}
.comp-topic-nav a:hover{background:var(--color-secondary-soft)}.comp-topic-nav a span{color:var(--color-gold)}
.comp-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 0 56px}
.comp-eyebrow{display:block;color:var(--color-primary);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.comp-page h1{font-size:clamp(38px,4.8vw,62px)!important;line-height:1.14;margin:18px 0 22px}
.comp-page h1 em{font-style:normal;color:var(--color-primary)}
.comp-page .comp-lead{font-size:18px;line-height:1.7;max-width:470px;margin:0 0 20px;color:var(--color-text-muted)}
.comp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}.comp-pills span{border:1px solid var(--color-gold-line);border-radius:30px;padding:5px 10px;font-size:12px;background:#fffdf880}
.comp-page .comp-shortcut{font-size:13px;margin:20px 0 0;color:var(--color-text-muted)}
.comp-page kbd{font-family:var(--font-body);font-size:11px;background:var(--color-surface);border:1px solid var(--color-border);border-bottom-width:2px;border-radius:4px;padding:2px 5px;white-space:nowrap}
.comp-viewer{margin:0;background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;position:relative}
.comp-viewer::before,.comp-viewer::after{content:'✦';position:absolute;top:48px;color:var(--color-gold);font-size:14px;z-index:1}.comp-viewer::before{left:18px}.comp-viewer::after{right:18px}
.comp-viewer-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px 0}.comp-viewer-count{font-size:12px;color:var(--color-text-muted)}
.comp-stage{height:320px;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#c6dfea88,transparent 66%)}
.comp-stage-scene{position:relative;width:min(100%,calc(320px * 1672 / 941));aspect-ratio:1672/941}
.comp-stage .comp-stage-platform{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.comp-stage .comp-stage-body{position:absolute;left:calc(var(--comp-left,14%) + (var(--comp-width,72%) - var(--comp-width,72%) * var(--comp-width-ratio,1)) / 2);bottom:var(--comp-bottom,27%);width:calc(var(--comp-width,72%) * var(--comp-width-ratio,1));height:calc(var(--comp-height,65%) * var(--comp-height-ratio,1));object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #315c732e)}
.comp-viewer figcaption{padding:0 24px 18px}.comp-viewer label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.comp-viewer select{width:100%;max-width:100%;height:44px;padding:8px 10px;border:1px solid var(--color-field-border);border-radius:6px;background:var(--color-surface);font:14px var(--font-body);color:var(--color-text)}
.feature-page .comp-viewer.comp-viewer--visual figcaption{max-width:520px;padding-inline:8px}
.comp-picker{min-width:0;margin:0;padding:0;border:0}
.comp-picker legend{display:flex;align-items:center;gap:7px;padding:0 4px;margin:0 auto 6px;color:var(--color-primary);font-size:12px;font-weight:600}
.comp-picker .comp-picker-emblem{width:28px;height:32px;object-fit:contain}
.comp-picker-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 3px 9px;scrollbar-width:thin;scrollbar-color:#bb9c60 transparent}
.comp-viewer .comp-choice{position:relative;display:flex;flex:1 0 78px;min-width:0;margin:0;cursor:pointer;scroll-snap-align:center}
.comp-choice input,.comp-picker-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.comp-choice-card{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:7px 5px 9px;border:1px solid #d6c9af;border-radius:10px;background:linear-gradient(155deg,#fffdf9e6,#f4ecdc99);box-shadow:0 2px 4px #70572c0a;transition:border-color .18s,box-shadow .18s,background .18s}
.comp-choice-art{display:flex;align-items:center;justify-content:center;width:100%;height:78px;overflow:visible;background:radial-gradient(ellipse at 50% 70%,#dfd4b24d,transparent 68%)}
.comp-choice-art img{display:block;flex-shrink:0;width:78px;height:78px;max-width:none;object-fit:contain;transform:translateY(0);filter:drop-shadow(0 3px 2px #315c7326);transition:transform .18s}
.comp-choice-art--couple img{width:136px;height:68px;transform:translateY(0)}
.comp-choice-name{display:flex;align-items:center;justify-content:center;min-height:30px;max-width:85px;margin-top:3px;text-align:center;font-size:11px;line-height:1.3;font-weight:600;color:var(--color-text)}
.comp-choice-detail{font-size:10px;line-height:1.5;color:var(--color-text-muted);font-weight:400}
.comp-choice-check{position:absolute;top:4px;right:4px;z-index:1;opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s}
.comp-choice input:checked+.comp-choice-card{border-color:#387391;background:radial-gradient(ellipse at 50% 20%,#e7f2f6,#f7f3e8 85%);box-shadow:inset 0 0 0 1px #387391,0 3px 9px #315c731a}
.comp-choice input:checked+.comp-choice-card .comp-choice-check{opacity:1;transform:scale(1)}
.comp-choice input:checked+.comp-choice-card .comp-choice-name{color:#245971}
.comp-choice input:focus-visible+.comp-choice-card{outline:3px solid #315c73;outline-offset:3px}
.comp-picker-hint{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:2px;font-size:10px;color:var(--color-text-muted)}
.comp-viewer .comp-picker-error{margin:8px 0 0;font-size:12px;text-align:center;color:var(--color-danger)}
.comp-stage[aria-busy=true] .comp-stage-body{opacity:.6}
@media(hover:hover){.comp-choice:hover .comp-choice-card{border-color:#b18e4d;box-shadow:0 3px 10px #846b3122}.comp-choice:hover .comp-choice-art img{transform:translateY(-2px)}}
.comp-rotation{display:flex;justify-content:center;align-items:center;gap:20px;margin:12px 0 0}.comp-rotation span{width:150px;text-align:center;font-size:13px;color:var(--color-text-muted)}
.comp-page button:not(.botao){font-family:var(--font-body);color:var(--color-primary);background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:6px;padding:9px 14px;min-height:44px;font-size:14px}
.comp-page button:not(.botao):hover:not(:disabled){background:var(--color-secondary-soft)}
.comp-page :is(button,input):disabled{opacity:.5;cursor:not-allowed}.comp-rotation button{min-width:44px}
.comp-page .comp-caption{font-size:12px;color:var(--color-text-muted);text-align:center;margin:10px 0 0;line-height:1.5}
.comp-section{padding:52px 0;border-top:1px solid var(--color-gold-line)}
.comp-heading{max-width:690px;margin-bottom:28px}.comp-heading h2,.comp-care-copy h2,.comp-wardrobe h2{margin:12px 0 16px;font-size:clamp(26px,3vw,36px)}
.comp-heading p,.comp-care-copy>p,.comp-wardrobe p{color:var(--color-text-muted);line-height:1.8}
.comp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;margin:0;list-style:none;counter-reset:steps}
.comp-steps li{position:relative;padding:26px;border:1px solid var(--color-gold-line);border-radius:12px;background:#fffdf8b3}
.comp-step-number{position:absolute;top:22px;right:22px;font-family:var(--font-display);font-size:26px;color:var(--color-gold-line)}
.comp-steps img,.comp-step-symbol{display:flex;align-items:center;height:76px;width:76px;object-fit:contain;margin-bottom:18px}.comp-step-symbol{font-size:50px;color:var(--color-primary);font-family:var(--font-display)}
.comp-steps h3{font-size:20px;margin:0 0 12px}.comp-steps p{font-size:15px;line-height:1.8;margin:0;color:var(--color-text-muted)}
.comp-note{font-size:13px;line-height:1.8;color:var(--color-text-muted);border-left:2px solid var(--color-gold);padding-left:14px;margin-top:22px}
.comp-care-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.comp-rules{margin:24px 0 0}.comp-rules div{padding:16px 0;border-top:1px solid var(--color-gold-line)}.comp-rules dt{font-weight:600;font-size:15px;margin-bottom:4px}.comp-rules dd{margin:0;font-size:14px;color:var(--color-text-muted);line-height:1.8}
.comp-demo{padding:28px;background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:14px}
.comp-demo-label{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);background:var(--color-secondary-soft);border-radius:20px;padding:4px 10px}
.comp-demo h3{margin:14px 0;font-size:23px}.comp-care-pet{position:relative;width:160px;height:130px;margin:auto;display:grid;place-items:center}.comp-care-pet img{height:150px;width:150px;object-fit:contain}
.comp-feed-heart{position:absolute;top:5px;right:10px;color:#a14664;font-size:30px;animation:comp-heart 1.5s ease-in-out 2}
.comp-meter-title{display:flex;justify-content:space-between;font-size:14px;font-weight:500;margin:14px 0 8px}.comp-meter-title strong{color:var(--color-primary)}
.comp-demo progress{width:100%;height:12px;border:0;appearance:none;border-radius:20px;overflow:hidden;background:var(--color-secondary-soft)}.comp-demo progress::-webkit-progress-bar{background:var(--color-secondary-soft)}.comp-demo progress::-webkit-progress-value{background:var(--color-primary);border-radius:20px}.comp-demo progress::-moz-progress-bar{background:var(--color-primary);border-radius:20px}
.comp-demo[data-empty=true] progress::-webkit-progress-value{background:var(--color-danger)}
.comp-page .comp-care-time{font-size:13px;color:var(--color-primary);margin:8px 0 22px}
.comp-slider-label{display:flex;justify-content:space-between;font-size:13px}.comp-slider-label output{font-weight:600}.comp-demo input[type=range]{width:100%;margin:12px 0;accent-color:var(--color-primary)}
.comp-pause,.comp-demo-controls label{display:flex;align-items:center;gap:9px;font-size:13px;min-height:36px}.comp-demo input[type=checkbox]{accent-color:var(--color-primary);width:16px;height:16px;flex-shrink:0}
.comp-demo .comp-demo-action{width:100%;margin-top:18px;white-space:normal;text-align:center}
.comp-page .comp-demo-feedback{font-size:13px;line-height:1.7;color:var(--color-text-muted);margin:16px 0 0;min-height:44px}
.comp-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.comp-item-card{display:flex;gap:22px;align-items:flex-start;padding:26px;background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:12px}
.comp-item-card img{width:66px;height:66px;object-fit:contain;flex-shrink:0}.comp-item-card h3{margin:8px 0 12px;font-size:21px}.comp-item-card p{font-size:14px;line-height:1.8;color:var(--color-text-muted);margin:0}
.comp-wardrobe{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}.comp-wardrobe>.comp-couple-art{width:100%;height:auto;object-fit:contain}.comp-wardrobe>.comp-beast-art{width:320px;max-width:100%;height:320px;object-fit:contain;justify-self:center}
.comp-faq{max-width:860px;margin:auto}.comp-faq details{border-bottom:1px solid var(--color-gold-line);padding:18px 0}.comp-faq summary{cursor:pointer;font-weight:600;font-size:16px;padding-right:12px}.comp-faq details p{font-size:14px;line-height:1.8;margin:14px 0 4px;color:var(--color-text-muted)}
.comp-next{padding:36px;margin-top:40px;border:1px solid var(--color-gold-line);border-radius:12px;background:var(--color-secondary-soft);display:flex;justify-content:space-between;align-items:center;gap:24px}.comp-next h2{margin:10px 0;font-size:28px}.comp-next p{font-size:14px;color:var(--color-text-muted);margin:0}.comp-next>a{flex-shrink:0}
.comp-confirm{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--color-gold);border-radius:12px;background:var(--color-surface);color:var(--color-text);padding:28px;box-shadow:var(--shadow-dialog)}
.comp-confirm::backdrop{background:var(--color-overlay)}.comp-confirm h3{margin:12px 0}.comp-confirm p{font-size:15px;line-height:1.8}.comp-confirm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.comp-confirm-actions .botao{white-space:normal;flex:1;font-size:13px;text-align:center}
.comp-transform-demo{text-align:center}.comp-transform-art{height:210px;display:grid;place-items:center;background:radial-gradient(ellipse,#dceaf280,transparent 68%);margin-top:14px}.comp-transform-fox{display:none;height:210px;width:210px;object-fit:contain}.comp-human-mark{font:96px var(--font-display);color:var(--color-primary)}
.comp-transform-demo[data-active=true] .comp-transform-fox{display:block}.comp-transform-demo[data-active=true] .comp-human-mark{display:none}.comp-transform-status{display:block;color:var(--color-primary);font-size:15px;margin:4px 0 14px}.comp-demo-controls label{text-align:left}.comp-demo-controls>.botao{width:100%;margin:16px 0;white-space:normal}
.comp-event-buttons{display:flex;flex-direction:column;gap:8px}.comp-text-button{border:0!important;text-decoration:underline;font-size:12px!important;margin-top:8px}
.comp-comparison-wrap{overflow-x:auto}.comp-comparison{border-collapse:collapse;width:100%;font-size:14px;background:#fffdf880}.comp-comparison caption{text-align:left;color:var(--color-text-muted);font-size:13px;padding-bottom:12px}.comp-comparison :is(th,td){padding:18px;text-align:left;border-bottom:1px solid var(--color-gold-line);vertical-align:top;line-height:1.7}.comp-comparison thead{background:var(--color-secondary-soft)}.comp-comparison th{font-weight:600}.comp-comparison td a{display:block;margin-top:8px;color:var(--color-primary)}
.comp-update-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.comp-update-card{padding:24px;border:1px solid var(--color-gold-line);border-radius:10px;background:#fffdf8b3}.comp-update-card h3{font-size:20px;margin:10px 0}.comp-update-card p{font-size:14px;color:var(--color-text-muted);line-height:1.8;margin:0}.comp-update-card a{display:inline-block;margin-top:16px;color:var(--color-primary);font-size:14px;font-weight:600}.comp-guide-link{display:inline-flex;margin-top:18px;color:var(--color-primary);font-weight:500}
.comp-home-section{max-width:1216px;padding:44px 32px 58px;margin:0 auto}.comp-home-section h2{margin:10px 0 12px}.comp-home-section>.comp-heading p{max-width:610px}.comp-home-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.comp-home-card{display:flex;flex-direction:column;color:var(--color-text)!important;text-decoration:none!important;border:1px solid var(--color-gold-line);border-radius:12px;background:var(--color-surface);padding:24px;transition:transform 180ms,box-shadow 180ms}.comp-home-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.comp-home-art{height:155px;display:grid;place-items:center;background:radial-gradient(ellipse,#dceaf280,transparent 70%)}.comp-home-art img{height:160px;width:100%;object-fit:contain}.comp-home-card h3{font-size:21px;margin:16px 0 8px}.comp-home-card p{font-size:14px;line-height:1.8;margin:0 0 18px;color:var(--color-text-muted)}.comp-home-card>span:last-child{margin-top:auto;color:var(--color-primary);font-weight:600;font-size:14px}
.comp-codex-update{margin:40px 0;padding:36px 0;border-block:1px solid var(--color-gold-line)}.comp-codex-update .comp-heading{max-width:740px}.comp-codex-update .comp-topic-nav{padding-top:0;margin-bottom:36px}.comp-codex-update .comp-note{margin-bottom:0}.comp-codex-path{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.comp-codex-path a{font-size:13px;padding:6px 12px;background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:20px;color:var(--color-primary)}
@keyframes comp-heart{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-8px);opacity:1}}
@media(max-width:1000px){.comp-hero{gap:30px}.comp-care-layout{gap:32px}.comp-update-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comp-steps li{padding:22px}.comp-item-card{gap:14px;padding:22px}.comp-item-card img{width:48px;height:48px}}
@media(max-width:760px){.comp-page{padding:0 20px 40px}.comp-topic-nav{gap:2px;overflow-x:auto}.comp-topic-nav a{gap:12px;padding:8px 10px;white-space:nowrap;font-size:13px}.comp-hero{grid-template-columns:1fr;gap:28px;padding:36px 0}.comp-hero-copy{max-width:600px}.comp-page .comp-lead{font-size:16px}.comp-page h1 br{display:none}.comp-stage{height:280px}.comp-stage-scene{width:min(100%,calc(280px * 1672 / 941))}.comp-steps{grid-template-columns:1fr}.comp-steps li{padding:22px 24px}.comp-steps img,.comp-step-symbol{height:56px;width:56px;margin-bottom:12px}.comp-step-symbol{font-size:40px}.comp-care-layout,.comp-wardrobe{grid-template-columns:1fr;gap:26px}.comp-section{padding:36px 0}.comp-two-cards{grid-template-columns:1fr}.comp-wardrobe>.comp-couple-art{max-width:480px;justify-self:center}.comp-next{padding:26px;flex-direction:column;align-items:flex-start}.comp-next h2{font-size:25px}.comp-comparison :is(th,td){padding:12px 10px;font-size:13px}.comp-codex-update{padding:28px 0;margin:28px 0}.comp-home-section{padding:32px 20px}.comp-home-cards{grid-template-columns:1fr}.comp-home-card{display:grid;grid-template-columns:100px 1fr;column-gap:20px;padding:20px}.comp-home-art{grid-row:1/5;height:125px;align-self:center}.comp-home-art img{height:125px}.comp-home-card h3{margin-top:4px}.comp-home-card p{margin-bottom:12px}.comp-home-card>span:last-child{grid-column:2}}
@media(max-width:440px){.comp-viewer-top{padding:18px 18px 0}.comp-viewer figcaption{padding-inline:18px}.comp-stage{height:250px}.comp-stage-scene{width:min(100%,calc(250px * 1672 / 941))}.comp-demo{padding:22px}.comp-update-grid{grid-template-columns:1fr}.comp-item-card{padding:20px}.comp-home-card{grid-template-columns:74px 1fr;gap:14px}.comp-home-art,.comp-home-art img{height:100px}.comp-confirm-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.comp-page *,.comp-home-card{animation:none!important;transition:none!important;scroll-behavior:auto!important}.comp-home-card:hover{transform:none}}

/* Use the exact shop presentation, in its native 4:5 proportion. */
#alimentacao .comp-item-card img.comp-care-art{width:88px;height:110px;object-fit:contain;border-radius:8px}
@media(max-width:700px){#alimentacao .comp-item-card img.comp-care-art{width:64px;height:80px}}

/* Fera: arrows flank the platform; Pet keeps its existing controls. */
.comp-viewer--side-controls{container-type:inline-size}
.comp-viewer--side-controls .comp-stage{max-height:calc((100cqw - 56px) * 941 / 1672)}
.comp-viewer--side-controls .comp-stage-scene{max-width:calc(100% - 56px)}
.comp-viewer--side-controls .comp-stage-scene .comp-rotation{position:absolute;z-index:4;top:0;left:50%;width:min(calc(100% + 104px),calc(100cqw + 32px));height:100%;transform:translateX(-50%);display:block;margin:0;padding:0;pointer-events:none}
.comp-viewer--side-controls .comp-stage-scene .comp-rotation button{position:absolute;top:66%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;min-width:42px;min-height:42px;padding:8px;border:1px solid var(--color-field-border);border-radius:6px;background:var(--color-surface);color:var(--color-primary);cursor:pointer;pointer-events:auto}
.comp-viewer--side-controls .comp-rotation button:first-of-type{left:0}.comp-viewer--side-controls .comp-rotation button:last-of-type{right:0}
.comp-viewer--side-controls [data-comp-direction]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.comp-viewer--side-controls .comp-rotation button:hover,.mount-rotation button:hover{background:var(--color-secondary-soft)}

.comp-choice-art:has(.comp-cover){height:auto;aspect-ratio:16/9;overflow:hidden;border-radius:5px;background:none}
.comp-choice-art img.comp-cover{width:100%;height:100%;object-fit:contain;filter:none}
.comp-choice:hover .comp-choice-art img.comp-cover{transform:none}
#conteudo-principal .game-banner--companion .game-hero-art>img.comp-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:10px;border:1px solid #d1bd95;filter:none}