/* ===== Mi Historia ===== */

.story-page{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 0%,rgba(155,63,79,.14),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(216,180,106,.07),transparent 24%),
    #090d0b;
}

.story-header{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(9,13,11,.84);
  backdrop-filter:blur(16px);
}

.story-header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.story-back{
  color:var(--muted);
  font-size:.9rem;
  transition:color .2s ease;
}

.story-back:hover{
  color:#fff;
}

.story-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Cormorant Garamond",serif;
  font-size:1.35rem;
  font-weight:600;
}

.story-brand img{
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
}

.story-brand em{
  color:var(--accent-light);
  font-style:italic;
}

.story-hero{
  padding:96px 0 72px;
}

.story-hero-inner{
  max-width:980px;
}

.story-hero h1{
  max-width:820px;
  margin:.35rem 0 1.3rem;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(4rem,10vw,7.5rem);
  font-weight:600;
  line-height:.82;
  letter-spacing:-.035em;
  color:#f3eee8;
}

.story-lead{
  max-width:760px;
  margin:0;
  color:#c3cac4;
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.8;
}

.story-quote{
  max-width:760px;
  margin-top:36px;
  padding:22px 26px;
  border-left:2px solid rgba(199,101,115,.7);
  border-radius:0 18px 18px 0;
  background:linear-gradient(90deg,rgba(155,63,79,.10),rgba(155,63,79,.025));
}

.story-quote span{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.45rem,3vw,2rem);
  font-style:italic;
  line-height:1.35;
  color:#ecd7db;
}

.story-document{
  max-width:980px;
  padding-bottom:100px;
  counter-reset:story;
}

.story-section{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:30px;
  padding:48px 0;
  border-top:1px solid rgba(255,255,255,.07);
  counter-increment:story;
}

.story-section-number::before{
  content:counter(story, decimal-leading-zero);
  display:block;
  padding-top:7px;
  font-family:"Cormorant Garamond",serif;
  color:rgba(199,101,115,.65);
  font-size:1.6rem;
  font-style:italic;
}

.story-section-content{
  max-width:790px;
}

.story-section h2{
  margin:0 0 18px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,5vw,3.15rem);
  font-weight:600;
  line-height:1;
  color:#f3eee8;
}

.story-section p{
  margin:0 0 16px;
  color:#b9c1ba;
  line-height:1.85;
  font-size:1rem;
}

.story-section p:last-child{
  margin-bottom:0;
}

.story-ending{
  margin-top:38px;
  padding:52px 46px;
  text-align:center;
  border-radius:28px;
  border:1px solid rgba(199,101,115,.16);
  background:
    radial-gradient(circle at 50% 0%,rgba(155,63,79,.15),transparent 46%),
    rgba(255,255,255,.025);
}

.story-ending-intro{
  max-width:690px;
  margin:0 auto 26px;
  color:#b9c1ba;
  line-height:1.7;
}

.story-ending-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,5vw,3.7rem);
  font-weight:600;
  line-height:1.05;
  color:#f4eee8;
}

.story-ending-lines span:last-child{
  margin-top:14px;
  color:var(--accent-light);
  font-style:italic;
}

.story-footer{
  border-top:1px solid rgba(255,255,255,.07);
  background:#080b09;
}

.story-footer-inner{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.48);
  font-size:.84rem;
}

.story-footer nav{
  display:flex;
  gap:18px;
}

.story-footer a{
  color:#b9c0ba;
}

.story-footer a:hover{
  color:var(--accent-light);
}

@media(max-width:700px){
  .story-header-inner{
    min-height:68px;
  }

  .story-brand{
    font-size:1.12rem;
  }

  .story-brand img{
    width:34px;
    height:34px;
  }

  .story-hero{
    padding:70px 0 52px;
  }

  .story-section{
    grid-template-columns:1fr;
    gap:10px;
    padding:38px 0;
  }

  .story-section-number::before{
    padding-top:0;
    font-size:1.2rem;
  }

  .story-ending{
    padding:38px 24px;
  }

  .story-footer-inner{
    min-height:105px;
    flex-direction:column;
    justify-content:center;
  }
}