/* R323: only new story sections; legacy samples stay untouched. */
body[data-product-page="r04"][data-product-story] #guia-real.story-section,
body[data-product-page="r04"][data-product-story] #app-real.story-section{grid-template-columns:minmax(0,1fr)}
/* Native app samples retain their natural proportions and readable available width. */
body[data-product-story] .story-gallery{align-items:start}
body[data-product-story] .story-gallery figure:nth-child(2) img{width:auto;max-width:100%;height:auto;max-height:none}

/* Local candidate: existing device scene replaces isolated cover in the initial offer. */
body[data-product-story] #oferta.detail-opening[data-mockup-hero="r01"]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"scene intro" "scene offer";align-items:start;column-gap:clamp(24px,4vw,56px);row-gap:16px;padding:clamp(20px,3vw,48px)}
body[data-product-story] #oferta[data-mockup-hero="r01"]>*{min-width:0}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-intro{grid-area:intro}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-intro :is(h1,.eyebrow){color:var(--offer-heading,var(--product-dark,#193A8A))}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-intro h1{font-size:clamp(32px,3.3vw,56px);line-height:1.12;font-weight:700;max-width:22ch;margin:12px 0 16px}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-intro .story-opening{margin:0;line-height:1.5}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-hero-scene{grid-area:scene;margin:0;align-self:start;overflow:visible;border-radius:20px}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-hero-scene img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:inherit}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-hero-scene figcaption{color:inherit;padding:12px 0 0;font-size:14px;line-height:1.5}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-copy{grid-area:offer;min-width:0}
body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-copy>p:last-child{margin-top:20px}
@media(max-width:760px){body[data-product-story] #oferta.detail-opening[data-mockup-hero="r01"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "scene" "offer";row-gap:20px}body[data-product-story] #oferta[data-mockup-hero="r01"] .detail-hero-scene{width:100%}}