/* Scoped storytelling composition for the standalone About page. */
.about-page .story-chapter{position:relative;background:var(--paper);padding:72px 6% 60px;isolation:isolate}
.about-page .story-opening{position:sticky;top:var(--story-top,82px);z-index:1;min-height:calc(100svh - 82px);display:flex;flex-direction:column;justify-content:space-between}
.about-page .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);align-items:start;max-width:1320px;margin:0 auto;width:100%}
.about-page .story-copy{max-width:580px}
.about-page .story-copy h1,.about-page .story-copy h2{font:500 clamp(23px,2.3vw,32px)/1.2 var(--font);letter-spacing:-.8px;margin:0 0 24px}
.about-page .story-chapter p{font:400 15px/1.6 var(--font);color:var(--muted);margin:0 0 16px}
.about-page .story-photos{height:510px;position:relative;min-width:0;isolation:isolate;z-index:1}
.about-page .story-photo{position:absolute;padding:0;overflow:hidden;border:0;border-radius:5px;background:var(--surface);box-shadow:0 4px 20px #20211f0a;cursor:grab;touch-action:pan-y;user-select:none;translate:var(--photo-x,0px) var(--photo-y,0px);transition:box-shadow 220ms ease}
.about-page .story-photo:hover,.about-page .story-photo:focus-visible{box-shadow:0 12px 32px #20211f20}
.about-page .story-photo.is-dragging{cursor:grabbing;box-shadow:0 15px 36px #20211f22}
.about-page .story-photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.about-page .photo-portrait{left:0;top:0;width:42%;aspect-ratio:941/1672}
.about-page .photo-travel{left:48%;top:110px;width:50%;aspect-ratio:3/4}
.about-page .story-next{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;min-height:44px;margin:45px auto 0}
.about-page .story-next span{transition:transform 220ms ease}.about-page .story-next:hover span{transform:translateY(3px)}
.about-page .story-personal{position:sticky;top:var(--story-top,82px);z-index:2;min-height:85svh;padding-top:110px;border-radius:28px 28px 0 0;box-shadow:0 -15px 40px #20211f05}
.about-page .story-personal .story-grid{align-items:center}
.about-page .personal-photos{height:430px}
.about-page .photo-camera{width:78%;aspect-ratio:16/9;left:10%;top:60px}
.about-page .story-background{border-radius:28px 28px 0 0;box-shadow:0 -15px 40px #20211f05;z-index:3;padding-top:90px;padding-bottom:100px}
.about-page .story-background h2{font-size:30px;letter-spacing:-1px;font-weight:500;margin:0 0 35px}
.about-page .story-background h3{font-size:17px;line-height:1.4;font-weight:500;margin:0 0 5px}
.about-page .story-background article{margin-bottom:30px}.about-page .story-background .story-meta{margin-bottom:8px;font-size:13px}
.about-page .story-background h3 a{transition:color 200ms}.about-page .story-background h3 a:hover{color:#809ed2}.about-page .story-background h3 a span{display:inline-block;white-space:nowrap}
.about-page .story-education p{font-size:13px}
.about-page #contacto{z-index:4;background:var(--paper)}
.story-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:701px) and (pointer:fine){.about-page .story-photo{touch-action:none}}
@media(max-width:700px){
 .about-page .story-chapter{padding:38px 6% 48px}.about-page .story-opening,.about-page .story-personal{position:relative;top:auto;min-height:0}
 .about-page .story-grid{grid-template-columns:1fr;gap:30px}.about-page .story-photos{height:370px;max-width:420px;width:100%;margin:auto}
 .about-page .photo-portrait{width:43%}.about-page .photo-travel{top:70px}
 .about-page .story-copy h1,.about-page .story-copy h2{font-size:26px}.about-page .story-chapter p{font-size:15px}
 .about-page .story-next{margin-top:24px}.about-page .story-personal{min-height:0;border-radius:22px 22px 0 0}
 .about-page .personal-photos{height:240px}.about-page .photo-camera{top:10px;left:5%;width:90%}
 .about-page .story-background h2{font-size:28px;margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.about-page .story-opening,.about-page .story-personal{position:relative;top:auto}.about-page .story-photo,.about-page .story-next span{transition:none}}
@media(min-width:701px){
 .about-page .story-opening{padding-top:48px;padding-bottom:28px}
 .about-page .story-opening .story-copy p{font-size:14px;line-height:1.55;margin-bottom:12px}
 .about-page .story-opening .story-copy h1{font-size:28px;margin-bottom:20px}
 .about-page .story-opening .story-next{margin-top:24px}
}

/* White duplicate glyphs are clipped to the photos; the original copy stays dark. */
.about-page .story-copy{position:relative;z-index:2;pointer-events:none}
.about-page .story-copy a{pointer-events:auto}
.about-page .story-contrast{position:absolute;inset:0;pointer-events:none;clip-path:inset(100%);overflow:hidden}
.about-page .story-copy .story-contrast :is(h1,h2,p){color:#fff}

/* Contacto cubre el último capítulo con la misma transición del relato. */
.about-page .story-background{position:sticky;top:var(--story-top,82px)}
.about-page #contacto{position:relative;border-radius:28px 28px 0 0;box-shadow:0 -15px 40px #20211f05}
@media(prefers-reduced-motion:reduce){.about-page .story-background{position:relative;top:auto}}