/* ============================================
   TMASI — /experiencia (vista independiente)
   Depende de los tokens y componentes definidos
   en css/style.css (botones, eyebrow, container,
   .stats/.stat de Inicio...).
============================================ */

/* ---------- Entrada progresiva del hero (no depende de scroll) ---------- */
.exp-reveal-item{
  opacity:0;
  transform:translateY(20px);
  animation:expFadeUp .8s var(--ease) forwards;
  animation-delay:var(--delay, 0ms);
}
@keyframes expFadeUp{
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Hero ---------- */
.exp-hero{
  position:relative;
  min-height:82vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.exp-hero__media{position:absolute;inset:0;z-index:0;}
.exp-hero__media img{width:100%;height:100%;object-fit:cover;}
.exp-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,58,130,.06) 0%, rgba(11,58,130,.04) 55%, rgba(11,58,130,.24) 100%);
}
.exp-hero__content{position:relative;z-index:1;padding:80px 24px 88px;max-width:760px;}
.exp-hero__back{margin-bottom:22px;}
.exp-hero__panel{
  background:rgba(6,32,74,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:28px;
  padding:52px;
  max-width:680px;
  width:100%;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.3);
}
.exp-hero__title{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  color:#fff;
  margin:6px 0 22px;
  text-wrap:balance;
}
.exp-hero__intro{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:620px;}
.exp-hero__stats{
  margin-top:32px;
  padding:0;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.exp-hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  color:rgba(255,255,255,.7);
  animation:expBob 2.2s ease-in-out infinite;
  z-index:1;
}
@keyframes expBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- Intro de experiencias ---------- */
.exp-stories-intro{padding:100px 0 0;background:var(--gray-50);}
.exp-stories-intro__lead{max-width:560px;margin-top:14px;}

/* ---------- Experiencias editoriales ---------- */
.exp-stories{
  background:var(--gray-50);
  padding:56px 0 110px;
}
.exp-story{
  display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
  padding:46px 0;
}
.exp-story--reverse{grid-template-columns:1fr 1.15fr;}
.exp-story--reverse .exp-story__media{order:2;}
.exp-story--reverse .exp-story__copy{order:1;}
.exp-story__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3;
}
.exp-story__media img,
.exp-story__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
@media (hover:hover){
  .exp-story__media:hover img,
  .exp-story__media:hover video{transform:scale(1.045);}
}
.exp-story__copy{max-width:460px;}
.exp-story__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg, var(--blue-600), var(--green-500));
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  color:#fff;margin-bottom:18px;
}
.exp-story__copy h3{font-size:1.4rem;margin-bottom:14px;}
.exp-story__copy p{font-size:.98rem;}

/* ---------- Volver al inicio (cierre) ---------- */
.exp-return{background:var(--white);padding:0 0 90px;}
.exp-return__inner{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;}
.exp-return__link{gap:8px;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .exp-story,.exp-story--reverse{grid-template-columns:1fr;gap:28px;}
  .exp-story--reverse .exp-story__media{order:1;}
  .exp-story--reverse .exp-story__copy{order:2;}
  .exp-story__copy{max-width:none;}
}

@media (max-width:600px){
  .exp-hero{min-height:74vh;}
  .exp-hero__content{padding:56px 20px 64px;}
  .exp-hero__panel{padding:32px 26px;border-radius:22px;}
  .exp-hero__stats{margin-top:24px;gap:10px;}
  .exp-hero__stats .stat{padding:20px 10px;}
  .exp-stories-intro{padding:70px 0 0;}
  .exp-stories{padding:36px 0 70px;}
  .exp-story{padding:30px 0;}
  .exp-return{padding:0 0 60px;}
}

@media (prefers-reduced-motion: reduce){
  .exp-reveal-item{animation:none;opacity:1;transform:none;}
  .exp-hero__scroll{animation:none;}
  .exp-story__media img,
  .exp-story__media video{transition:none;}
}