/* Same image-through-letter composition as the Caetano narrative, in CECON colors. */
.benefits-intro{position:relative;background:var(--paper);isolation:isolate}
.benefits-stage{position:relative;height:100svh;min-height:620px;overflow:clip;background:#30362b}
.benefits-photo,.benefits-veil,.benefits-shade{position:absolute;inset:0;width:100%;height:100%}
.benefits-photo{object-fit:cover;object-position:50% 46%;max-width:none;transform-origin:center}
.benefits-veil{display:none;z-index:2;pointer-events:none}
.benefits-shade{z-index:1;pointer-events:none;background:linear-gradient(90deg,#1c2015e6 0%,#1c2015a6 30%,#1c201514 62%,transparent 78%),linear-gradient(0deg,#1c201533,transparent 62%)}
.benefits-masthead{display:none;position:absolute;z-index:3;left:5.5%;right:5.5%;top:10%;align-items:center;gap:28px;color:var(--olive);pointer-events:none}
.benefits-editorial-line{height:1px;background:#494e3730;flex:1;transform-origin:left}
.benefits-count{display:flex;align-items:center;gap:16px;font-size:10px;line-height:1;letter-spacing:2px;font-weight:550;font-variant-numeric:tabular-nums}
.benefits-count::before{content:'';width:36px;height:1px;background:#8a704f}
.benefits-notes{display:none;position:absolute;z-index:3;top:75%;left:6%;width:88%;text-align:center;color:var(--olive);pointer-events:none}
.benefits-notes p{position:absolute;inset:0 0 auto;margin:0;color:var(--olive);font-size:clamp(12px,1.3vw,20px);line-height:1.75;letter-spacing:.19em;font-weight:400;text-wrap:balance}
.benefits-note-line{position:absolute;top:3.7em;left:calc(50% - 22px);width:44px;height:1px;background:#8a704f}
.benefits-narrative-cue{display:none;position:absolute;z-index:3;left:5%;right:5%;bottom:max(28px,5.5svh);align-items:center;flex-direction:column;gap:9px;color:#796345;text-align:center;pointer-events:none;font-size:11px;line-height:1.5;letter-spacing:.12em}
.benefits-narrative-cue svg{display:block;flex:none}
.benefits-stage .benefits-skip{position:absolute;bottom:18px;right:5.5%;z-index:6;transform:translateY(180%);font-size:11px;padding:12px 18px;min-height:44px}
.benefits-stage .benefits-skip:focus-visible{transform:none;outline:2px solid var(--sand);outline-offset:5px}
.benefits-stage>.banner-content{position:absolute;z-index:4;inset:auto 0 0;height:auto;padding-block:0 7svh;pointer-events:auto}
.benefits-stage .banner-copy{max-width:490px}
.benefits-stage .banner-copy .eyebrow{color:#f0e6d3}
.benefits-stage .banner-copy h1{font-size:clamp(45px,3.7vw,60px);line-height:1.06;color:#fffaf0;max-width:490px}
.benefits-stage .banner-copy h1 em{color:#e9cfaa}
.benefits-stage .banner-description{color:#fff9ed;font-size:14px;line-height:1.8;max-width:415px}
.benefits-stage .banner-copy .actions>a:focus-visible{outline-color:#fffaf0}
/* Native scrolling drives the mask. No wheel/touch interception or extra motion library. */
body[data-page=inicio].benefits-live .benefits-intro{height:400svh}
.benefits-live .benefits-stage{position:sticky;top:0;min-height:0;height:100svh}
.benefits-live .benefits-veil,.benefits-live .benefits-notes{display:block}
.benefits-live .benefits-masthead,.benefits-live .benefits-narrative-cue{display:flex}
.benefits-live .benefits-stage>.banner-content{visibility:hidden;pointer-events:none}
.benefits-live .benefits-intro[data-hero-visible] .banner-content{visibility:visible}
.benefits-live .benefits-intro[data-hero-ready] .banner-content{pointer-events:auto}
body[data-page=inicio].benefits-live>.header{position:fixed;z-index:12;inset:0 0 auto;transform:translateY(-110%);visibility:hidden;pointer-events:none}
body[data-page=inicio].benefits-live.benefits-past>.header{transform:none;visibility:visible;pointer-events:auto}
@media(min-width:1700px){.benefits-stage>.banner-content{width:calc(100% - 160px);max-width:1600px}.benefits-stage .banner-copy{max-width:550px}}
@media(max-width:900px){.benefits-masthead{left:6%;right:6%;gap:18px}.benefits-count{font-size:9px;gap:10px}.benefits-count::before{width:25px}.benefits-notes{top:66%;left:8%;width:84%}.benefits-notes p{font-size:13px;line-height:1.9;letter-spacing:.14em}.benefits-note-line{top:5em}.benefits-stage .banner-copy h1{font-size:clamp(38px,6vw,54px)}.benefits-stage>.banner-content{padding-bottom:6svh}.benefits-stage .banner-copy{max-width:610px}}
@media(max-width:900px) and (orientation:portrait){.benefits-photo{height:58svh;object-position:78% 46%}.benefits-live .benefits-photo{height:100%}.benefits-shade{background:linear-gradient(0deg,#30362b 0%,#30362b 42%,#30362b00 66%)}.benefits-stage .banner-copy h1{max-width:600px}.benefits-stage .banner-description{max-width:520px}}
@media(max-width:600px){.benefits-stage{min-height:640px}.benefits-masthead{top:11%;left:6%;right:6%;gap:13px}.benefits-count{font-size:9px}.benefits-count::before{width:20px}.benefits-notes{top:61%;left:8%;width:84%}.benefits-notes p{font-size:12px;letter-spacing:.12em;line-height:1.9}.benefits-note-line{top:5.5em}.benefits-narrative-cue{bottom:max(36px,10svh);font-size:10px;gap:9px}.benefits-stage>.banner-content{width:calc(100% - 48px);padding-bottom:4svh}.benefits-stage .banner-copy h1{font-size:clamp(31px,8.5vw,43px);line-height:1.05;letter-spacing:-.7px}.benefits-stage .banner-copy .eyebrow{font-size:7px;letter-spacing:1.1px;margin-bottom:13px}.benefits-stage .banner-description{font-size:13px;line-height:1.7;margin-top:16px}.benefits-stage .banner-copy .actions{margin-top:20px;grid-template-columns:1fr 1fr;gap:10px}.benefits-stage .banner-copy .actions>a{min-height:48px;font-size:10px;padding:11px 7px}.benefits-stage .benefits-skip{right:24px}}
@media(max-width:600px) and (orientation:portrait){.benefits-photo{height:48svh;object-position:78% 46%}.benefits-live .benefits-photo{height:100%}.benefits-shade{background:linear-gradient(0deg,#30362b 0%,#30362b 46%,#30362b00 67%)}}
@media(max-width:600px) and (max-height:700px){.benefits-stage .banner-copy h1{font-size:clamp(26px,7.7vw,33px)}.benefits-stage .banner-description{font-size:12px;line-height:1.6;margin-top:12px}.benefits-stage .banner-copy .actions{margin-top:15px}.benefits-stage .banner-copy .actions>a{min-height:46px}.benefits-stage .banner-copy .eyebrow{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.benefits-intro .benefits-stage{position:relative}.benefits-stage .benefits-skip{display:none}}
@media print{.benefits-intro{height:auto!important}.benefits-stage{height:auto!important;min-height:0!important;background:var(--paper)}.benefits-photo,.benefits-veil,.benefits-shade,.benefits-masthead,.benefits-notes,.benefits-narrative-cue,.benefits-skip{display:none!important}.benefits-stage>.banner-content{position:static!important;visibility:visible!important;opacity:1!important;padding:30px 0!important}.benefits-stage .banner-copy h1,.benefits-stage .banner-copy .eyebrow,.benefits-stage .banner-description{color:var(--ink)!important}}
