/* Suka Coffee V7.1.7 · Sección Experiencia inmersiva */
.experience-section.experience-immersive{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  min-height:780px;
  padding:118px 0 128px;
  background-color:#20344f;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--experience-bg-position,center center);
}
.experience-immersive .experience-image-shade{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(110deg,
      rgb(14 32 56 / var(--experience-overlay,.68)) 0%,
      rgb(31 48 70 / var(--experience-overlay,.68)) 52%,
      rgb(92 70 50 / var(--experience-overlay,.68)) 100%);
}
.experience-immersive .experience-image-shade:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,20,36,.15),rgba(8,20,36,.44));
}
.experience-immersive .experience-image-grid{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.experience-immersive:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:84px;
  z-index:0;
  background:linear-gradient(transparent,rgba(14,32,56,.28));
  pointer-events:none;
}
.experience-immersive .experience-content-shell{position:relative;z-index:2}
.experience-immersive .connector-left{background:linear-gradient(90deg,var(--bronze),rgba(255,255,255,.15));top:29%}
.experience-immersive .center-heading{max-width:1040px;margin-bottom:64px}
.experience-immersive .section-mark{background:linear-gradient(90deg,var(--bronze),#f2d1a8);box-shadow:0 0 18px rgba(226,164,91,.45)}
.experience-immersive .center-heading>p:first-of-type{
  color:#f1c28b;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.experience-immersive .center-heading h2{
  color:#fff;
  text-shadow:0 14px 42px rgba(5,14,27,.45);
  max-width:980px;
  margin-inline:auto;
}
.experience-immersive .heading-copy{
  color:rgba(255,255,255,.82);
  max-width:780px;
  font-size:18px;
  text-shadow:0 4px 22px rgba(5,14,27,.48);
}
.experience-immersive .experience-steps{gap:22px}
.experience-immersive .experience-steps:before{
  border-color:rgba(241,194,139,.54);
  top:40px;
}
.experience-immersive .experience-step{
  min-height:252px;
  padding:30px 30px 32px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.08));
  box-shadow:0 24px 55px rgba(5,14,27,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.experience-immersive .experience-step:hover{
  transform:translateY(-8px);
  border-color:rgba(241,194,139,.55);
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.11));
}
.experience-immersive .experience-step>span{
  width:78px;
  height:78px;
  background:linear-gradient(145deg,#f4d0a2,#a8743f);
  color:#1f3046;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 16px 38px rgba(4,13,26,.28),inset 0 1px 0 rgba(255,255,255,.5);
}
.experience-immersive .experience-step h3{color:#fff;font-size:26px;text-shadow:0 5px 20px rgba(5,14,27,.35)}
.experience-immersive .experience-step p{color:rgba(255,255,255,.78);font-size:16px}
@media(max-width:760px){
  .experience-section.experience-immersive{min-height:auto;padding:84px 0 92px;background-position:var(--experience-bg-position,center center)}
  .experience-immersive .experience-image-grid{background-size:54px 54px;opacity:.11}
  .experience-immersive .center-heading{margin-bottom:42px}
  .experience-immersive .center-heading h2{font-size:39px}
  .experience-immersive .heading-copy{font-size:16px}
  .experience-immersive .experience-step{min-height:auto;padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){.experience-immersive .experience-step{transition:none}}