/* A complete comparison in every slide; the artwork is never cropped. */
.hero-intro{display:flex;flex-direction:column;gap:18px;min-width:0}
.site-header{container:site-header / inline-size}
.hero-story{min-width:0;align-self:start;--scene-before:var(--coralTint);--scene-after:var(--ice);--scene-accent:var(--green);--scene-after-ink:var(--green)}
.hero-story[data-story="mochila"]{--scene-before:var(--coralTint);--scene-after:var(--mist);--scene-accent:var(--green);--scene-after-ink:var(--green)}
.hero-story[data-story="licao"]{--scene-before:var(--mist);--scene-after:var(--mist);--scene-accent:var(--green);--scene-after-ink:var(--green)}
.hero-story[data-story="dentes"]{--scene-before:var(--ice);--scene-after:var(--coralTint);--scene-accent:var(--coralDeep);--scene-after-ink:var(--coralDeep)}
.scene-card{border:1px solid var(--mist);border-top:4px solid var(--scene-accent);border-radius:22px;overflow:hidden;box-shadow:0 14px 40px #203F390b;background:var(--scene-before)}
.scene-viewport{position:relative;display:grid;gap:2px;background:var(--ice);touch-action:pan-y pinch-zoom;container-type:inline-size}
.scene-panel{display:grid;grid-template-columns:3fr 2fr;align-items:stretch;min-width:0;margin:0;background:var(--scene-before)}
.scene-art{position:relative;aspect-ratio:1;overflow:hidden;align-self:center;grid-column:1;grid-row:1}
.scene-art img{position:absolute;inset:0 auto auto 0;width:200%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none}
.scene-after{grid-template-columns:2fr 3fr;background:var(--scene-after)}
.scene-after .scene-art{grid-column:2}
.scene-after .scene-art img{transform:translateX(-50%)}
.scene-caption{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 12px;min-width:0;overflow-wrap:normal}
.scene-caption .caption-connector{display:block;align-self:flex-start;flex:0 0 28px;width:48px;height:28px;margin-left:5px;color:var(--coralDeep);stroke-width:2.3;overflow:visible;pointer-events:none}
.scene-after .caption-connector{color:var(--scene-after-ink)}
.scene-after .scene-caption{grid-column:1}
.scene-label{font-size:var(--font-min);line-height:1.4;font-weight:700;color:var(--coralDeep)}
.scene-after .scene-label{color:var(--scene-after-ink)}
.scene-label>span{display:none}
.scene-caption>p{font-family:'DM Sans',sans-serif;font-size:clamp(1rem,4.6vw,1.3rem);line-height:1.18;font-weight:700;letter-spacing:-.025em;text-wrap:balance;color:var(--coralDeep)}
.scene-after .scene-caption>p{color:var(--scene-after-ink)}
.scene-controls{display:none;align-items:center;justify-content:center;gap:3px;padding-top:7px}
.slideshow-ready .scene-controls{display:flex}
.scene-arrow,.scene-play{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;background:transparent;color:var(--green);font-size:1.35rem}
.scene-play{font-size:var(--font-min);border:1px solid var(--mist);margin-left:4px;min-width:44px;min-height:44px;align-self:center}
.scene-arrow:hover,.scene-play:hover{background:var(--ice)}
.scene-dots{display:flex;min-width:0}
.scene-dots button{width:36px;min-height:44px;padding:10px 7px;background:transparent;display:grid;place-items:center}
.scene-dots span{display:block;width:7px;height:7px;border-radius:8px;background:var(--line);transition:width .2s,background .2s}
.scene-dots button[aria-pressed=true] span{width:23px;background:var(--scene-accent)}
.scene-footnote{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 12px;font-size:var(--font-min);line-height:1.5;color:var(--ink);padding:6px 3px 0}
.scene-footnote>span{overflow-wrap:normal}
.scene-footnote>span:first-child{font-weight:700;color:var(--scene-accent)}
.scene-count{font-variant-numeric:tabular-nums;font-weight:400;margin-right:7px;white-space:nowrap}
.hero-story:not(.slideshow-ready) .scene-footnote{padding-top:12px}
.benefit-strip{grid-template-columns:repeat(auto-fit,minmax(min(100%,4.4rem),1fr))}
@media(max-width:899px){
 .hero{gap:18px;padding-top:18px}
 .hero-intro{grid-row:1}
 .hero-story{grid-row:2;width:100%;max-width:560px;margin:2px auto 0}
 .hero .eyebrow{font-size:var(--font-min);margin-bottom:10px}
 .hero h1{font-size:clamp(2rem,8.8vw,3.1rem);line-height:1.1}
 .hero .lead{font-size:1.0625rem;margin-top:14px}
 .hero-copy h1 span{text-decoration-thickness:3px}
 .hero-actions .button{min-height:52px}
 .hero-actions .aux{font-size:var(--font-min);margin-top:7px}
}
@media(min-width:600px) and (max-width:899px){
 .scene-caption{padding:24px;gap:4px}
 .scene-caption>p{font-size:1.75rem}
 .scene-label{font-size:var(--font-min)}
 .scene-label>span{display:inline}
 .scene-footnote{font-size:var(--font-min)}
}
@media(min-width:900px){
 .header-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
 .header-inner .brand{justify-self:start}
 .header-inner .header-cta{justify-self:end}
 .hero{max-width:1160px;grid-template-columns:minmax(0,1.08fr) minmax(0,1.42fr);grid-template-rows:auto;column-gap:48px;row-gap:0;align-items:start;padding-top:36px;padding-bottom:46px}
 .hero-intro{grid-column:1;grid-row:1;gap:28px}
 .hero-copy{align-self:auto;padding-bottom:0}
 .hero h1{font-size:clamp(2.5rem,3.8vw,3.25rem);line-height:1.08}
 .hero-copy h1 span{display:block}
 .hero .lead{font-size:1.125rem;margin-top:24px}
 .hero .eyebrow{font-size:var(--font-min);margin-bottom:18px}
 .hero-actions{align-self:stretch}
 .hero-actions .button{min-width:0;width:100%;max-width:320px}
 .hero-actions .aux{font-size:var(--font-min)}
 .hero-story{grid-column:2;grid-row:1;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
 .scene-card{grid-column:1/-1}
 .scene-card{border-radius:25px}
 .scene-viewport{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
 .scene-panel,.scene-after{display:flex;flex-direction:column;justify-content:space-between}
 .scene-art{width:100%;flex-shrink:0}
 .scene-caption{padding:16px 18px;gap:4px;min-height:104px;justify-content:flex-start;width:100%}
 .scene-label{font-size:var(--font-min)}
 .scene-label>span{display:inline;margin-left:4px}
 .scene-caption>p{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.2;min-height:2.4em;display:flex;align-items:center;text-wrap:balance}
 .scene-controls{grid-column:2;grid-row:2;padding:0;justify-content:flex-end}
 .scene-dots button{width:36px}
 .scene-footnote{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;gap:2px;font-size:var(--font-min);padding:0}
 @container site-header (width < 48rem){
  .header-inner{grid-template-columns:1fr auto}
  .header-inner nav{grid-column:1/-1;grid-row:2;justify-self:center}
  .header-inner .brand{white-space:nowrap}
 }
}
@media(max-width:359px){
 .scene-caption{padding:10px;gap:4px}
 .scene-caption>p{font-size:1rem}
 .scene-label{font-size:var(--font-min)}
 .scene-dots button{width:29px}
 .scene-controls{gap:0}
 .scene-play{margin-left:2px}
 .hero h1{font-size:2rem}
 .benefit-strip>span{font-size:var(--font-min);overflow-wrap:normal}
}
@media(prefers-reduced-motion:reduce){.scene-dots span{transition:none}}
/* Enlarged text gets a full-width caption instead of being squeezed beside the art. */
@container (width < 14rem){
 .scene-panel,.scene-after{grid-template-columns:minmax(0,1fr)}
 .scene-panel .scene-caption{grid-column:1;grid-row:1;padding:16px}
 .scene-panel .scene-art{grid-column:1;grid-row:2}
}