/* Standalone preview: approved hero + a continuous, reversible story. */
.editorial-hero { z-index: 1; }
.ed-shade { background: linear-gradient(90deg,#28100e 0%,#28100ef5 21%,#28100e45 49%,transparent 70%),linear-gradient(0deg,#28100e 0%,transparent 30%); }
.life-story { --cream: #fff4e5; color: var(--cream); position: relative; background: #28100e; }
.story-stage { position: relative; isolation: isolate; overflow: hidden; padding: 96px 7% 110px; background: #100706; }
.story-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; z-index: -3; }
.story-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg,#28100e 0%,#28100e00 24%,#11070600 72%,#110706 100%),linear-gradient(90deg,#170a08b8 0%,transparent 62%); }
.story-kicker { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .17em; font-weight: 650; }
.story-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.story-title { position: relative; margin-top: 46px; font-size: clamp(58px, 8.2vw, 132px); line-height: .9; letter-spacing: -.06em; font-weight: 750; width: max-content; max-width: 100%; }
.story-title span { display: block; }
.story-title em { color: var(--pink); font-style: normal; font-weight: 500; }
.story-title .title-last { padding-left: 1em; }
.story-beats { display: grid; gap: 24px; width: min(460px, 100%); margin-top: 64px; }
.story-card { position: relative; border-radius: 24px; padding: 28px 30px; background-color: #24110de6; color: var(--cream); }
.story-card small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .15em; color: var(--pink); margin-bottom: 15px; }
.story-card h3 { font-size: clamp(24px, 2.5vw, 34px); font-weight: 550; line-height: 1; letter-spacing: -.035em; margin-bottom: 14px; }
.story-card p { font-size: 18px; line-height: 1.36; font-weight: 400; }
.story-card strong { font-weight: 650; }
.story-heart { position: absolute; width: 32px; height: 32px; right: 24px; top: 19px; background: var(--pink); border-radius: 50%; padding: 5px; transform: rotate(-12deg); }
.story-position { display: none; position: absolute; right: 6%; bottom: 40px; padding: 12px 18px; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.story-position i { display: inline-block; width: 6px; height: 6px; background: var(--pink); border-radius: 50%; margin-right: 9px; }
.story-down { color: var(--cream); display: inline-flex; align-items: center; min-height: 44px; gap: 16px; font-size: 10px; letter-spacing: .1em; margin-top: 28px; }
.story-closing { background: var(--editorial-cream) url('assets/graficos/papel-crema.svg') repeat; color: var(--ink); position: relative; overflow: hidden; padding: clamp(72px, 10vw, 150px) 12%; }
.story-closing::before { content: ''; position: absolute; inset: 0 0 auto; height: 100px; background: linear-gradient(180deg,#110706,transparent); pointer-events: none; }
.closing-label { display: flex; align-items: center; gap: 18px; font-size: 10px; letter-spacing: .15em; font-weight: 650; margin-bottom: 30px; }
.closing-label img { width: 38px; height: 38px; }
.closing-text { position: relative; z-index: 1; font-size: clamp(33px, 4.7vw, 72px); line-height: 1.05; letter-spacing: -.04em; font-weight: 450; max-width: 23ch; }
.closing-text strong { font-weight: 700; }
.closing-note { margin-top: 30px; font-size: 14px; letter-spacing: .02em; }



.story-reading { padding: 0; position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.story-reading:focus { width: auto; height: auto; clip-path: none; top: 30px; left: 7%; z-index: 10; padding: 14px 20px; background: var(--cream); color: var(--ink); }
.scroll-story .story-stage { padding: 0; position: sticky; top: 0; height: 100svh; }
.scroll-story .story-kicker { position: absolute; left: 7%; top: 7%; }
.scroll-story .story-title { position: absolute; left: 7%; top: 16%; margin: 0; }
.scroll-story .story-picture { transform: translateY(var(--picture-y, 0px)) scale(1.04); }
.scroll-story .story-title { transform: translateY(var(--title-y, 0px)); opacity: var(--title-opacity, 1); }
.scroll-story .story-beats { position: absolute; left: 7%; bottom: 9%; margin: 0; width: min(460px, 40%); }
.scroll-story .story-card { grid-column: 1; grid-row: 1; align-self: end; opacity: var(--beat-opacity, 0); transform: translateY(var(--beat-y, 16px)); pointer-events: none; }
.scroll-story .story-card:first-child { --beat-opacity: 1; --beat-y: 0px; }
.scroll-story .story-position { display: block; }
.scroll-story .story-down { position: absolute; right: 6%; top: 5%; margin: 0; }
@media (max-width: 760px) {
  .ed-shade { background: linear-gradient(180deg,#180a0a40,transparent 25%,transparent 54%,#28100e 100%); }
  .story-stage { padding: 70px 7% 80px; }
  .story-picture { object-position: 89% center; }
  .story-shade { background: linear-gradient(180deg,#28100e 0%,transparent 25%,#10070600 53%,#100706eb 85%,#110706 100%); }
  .story-title { font-size: clamp(40px, 11.6vw, 82px); margin-top: 32px; line-height: .95; }
  .story-title .title-last { padding-left: .65em; }
  .story-kicker { font-size: 8px; letter-spacing: .12em; }
  .story-card { padding: 21px 23px; border-radius: 22px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .story-card p { font-size: 16px; line-height: 1.32; }
  .story-card h3 { font-size: 25px; margin-bottom: 10px; }
  .story-card small { font-size: 8px; margin-bottom: 10px; }
  .story-card { background-color: #24110dbf; }
  .story-beats { margin-top: 36px; }
  .scroll-story .story-kicker { top: 6%; }
  .scroll-story .story-title { top: 13%; }
  .scroll-story .story-beats { width: 86%; bottom: calc(10% + env(safe-area-inset-bottom)); }
  .scroll-story .story-position { font-size: 8px; bottom: max(20px, env(safe-area-inset-bottom)); right: 7%; }
  .scroll-story .story-down { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: 7%; right: auto; font-size: 8px; }
  .story-closing { padding: 75px 8% 100px; }
  .closing-text { font-size: clamp(31px, 8.3vw, 52px); }
  
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .story-card { background: #281713f5; }
}
@media (prefers-reduced-motion: reduce) {
  .story-title, .story-picture, .story-card { transform: none !important; }
}