/* Extensões de prévia; não altera dimensões dos cinco espaços de fotografia. */
.design-panel{padding:16px var(--gutter);display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);color:var(--fg);background:var(--bg)}
.design-panel button,.design-pause{font:inherit;min-height:44px;padding:8px 16px;color:var(--fg);background:var(--bg);border:1px solid currentColor;cursor:pointer}
.design-panel button[aria-pressed=true]{color:var(--bg);background:var(--fg)}
.design-pause{display:block;margin:24px auto}
.hero.design-dark .hero__block{background:var(--fg);color:var(--bg)}
.hero.design-dark .hero__title,.hero.design-dark .hero__line{color:var(--bg)}
.design-preview .btn{transition:background-color .2s,color .2s,border-color .2s}
.design-preview .btn__arrow{transition:transform .2s}
@media(hover:hover){.design-preview .btn:hover .btn__arrow{transform:translateX(5px)}.design-preview .btn--solid:hover{background:var(--fg);color:var(--bg)}.design-preview .design-dark .btn--solid:hover{background:var(--bg);color:var(--fg)}}
.design-preview .btn:focus-visible,.design-panel button:focus-visible,.design-pause:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.design-preview .btn:active .btn__arrow{transform:translateX(2px)}
@keyframes design-onda{0%,100%{transform:translateY(.08em)}50%{transform:translateY(-.24em)}}
.design-preview [data-onda] .onda__l{animation-name:design-onda;animation-delay:calc((var(--i) - var(--n)) * .12s)}
@media(prefers-reduced-motion:reduce){.design-preview [data-onda] .onda__l{animation:none}.design-preview .btn,.design-preview .btn__arrow{transition:none}}
.design-hero .hero[hidden]{display:none}
.design-pomodoro{object-position:center bottom!important}
.design-banner-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:16px;background:var(--bg)}
.design-banner-controls button{min-height:44px;padding:8px 16px;font:inherit;background:transparent;color:var(--fg);border:1px solid var(--line);cursor:pointer}
.design-banner-controls button[aria-pressed=true]{border-color:var(--fg);text-decoration:underline;text-underline-offset:.3em}
.design-shop-banner{margin:32px var(--gutter) 0;padding:clamp(24px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--bg-surface);color:var(--fg);border-bottom:10px solid var(--fg)}
.design-shop-banner h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,4rem);line-height:1.1}
.design-shop-banner img{width:38%;max-width:320px;height:220px;object-fit:contain}
@media(max-width:600px){.design-shop-banner img{height:130px}.design-shop-banner{gap:12px}}

/* The Sardinha frame defines both slides, including on narrow screens. */
.design-hero{display:grid;position:relative;isolation:isolate}
.design-hero > .hero{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .75s ease,visibility .75s;align-self:stretch}
.design-hero > .hero.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.design-hero .hero__media{min-height:0;min-width:0}
.design-hero .hero__media picture{display:block;width:100%;height:100%}
.design-hero .hero__media img{position:absolute;inset:0;transform-origin:center bottom}
.design-hero .hero__block{min-width:0}
.design-banner-controls{grid-area:2/1;padding:10px;gap:24px}
.design-banner-controls button{border:0;border-bottom:2px solid transparent;padding:8px 0;font-size:.8rem;letter-spacing:.06em}
.design-banner-controls button[aria-pressed=true]{border-color:var(--fg);text-decoration:none}
.sobre__grade{position:relative}
.sobre__grade > figure{transform-origin:top left;position:relative}
.design-photo-ghost{overflow:hidden;pointer-events:none}
.design-photo-ghost picture,.design-photo-ghost img{display:block;width:100%;height:100%;object-fit:cover}
.design-photo-in{position:absolute;inset:0;display:block}
.design-preview .btn{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s;overflow:hidden}
.design-preview .btn__arrow{transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
 .design-preview .btn:hover .btn__arrow{transform:translateX(8px)}
 .design-preview .btn--solid:hover{box-shadow:inset 0 -4px 0 rgba(255,255,255,.18)}
 .design-preview .btn:not(.btn--solid):hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
}
.design-preview .btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
@media(min-width:900px){.design-hero>.hero{height:min(calc(100svh - var(--h-header)),46vw);min-height:0}}
@media(prefers-reduced-motion:reduce){.design-hero>.hero,.design-preview .btn,.design-preview .btn__arrow{transition:none}}

/* Editorial hero: one quiet surface, coordinated text fades, no selector UI. */
.design-hero>.hero{transition:opacity 1.1s ease-in-out,visibility 1.1s}
.design-hero .hero__block{display:grid;align-content:center;justify-items:start;grid-template-rows:auto auto auto}
.design-hero .hero__title{line-height:1.04;max-width:10ch;min-height:2.08em;display:flex;align-items:end;font-size:clamp(2.4rem,4vw,4.5rem)}
.design-hero .hero__line{min-height:3em;max-width:34ch;margin:0}
.design-hero .hero__block>.btn{align-self:start}
.design-progress{position:absolute;inset:0 0 auto;height:2px;z-index:3;background:transparent;pointer-events:none}
.design-progress span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
@media(max-width:899px){.design-hero .hero__title{font-size:clamp(2rem,7vw,3rem);min-height:2.08em}.design-hero .hero__block{gap:1rem}}
@media(prefers-reduced-motion:reduce){.design-hero>.hero{transition:none}.design-progress{display:none}}
.design-hero .hero__block{justify-content:stretch;grid-template-columns:minmax(0,1fr)}

/* Local responsive film: fixed geometry before media loads. */
.design-shop-motion{display:block;padding:0;border:0;position:relative}
.design-shop-motion video{display:block;width:100%;height:auto;aspect-ratio:4/1;pointer-events:none}
.design-shop-motion>img{display:none}
.design-shop-motion>h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.design-shop-motion video{aspect-ratio:4/3}}