/*
 * PUBLIMPACTO · LOTE 6C
 * Service Experience Premium · Storytelling
 * Scope estrictamente aislado: .pi-service-experience-story
 */

.pi-service-experience-story {
  --pi-se-black: var(--pi-black, #000);
  --pi-se-ink: var(--pi-ink, #111);
  --pi-se-white: var(--pi-white, #fff);
  --pi-se-paper: var(--pi-paper, #f5f5f2);
  --pi-se-warm: #ded8d1;
  --pi-se-live: var(--pi-brand-live-color, #e3063b);
  --pi-se-line-dark: var(--pi-line-light, rgba(255, 255, 255, .16));
  --pi-se-line-light: var(--pi-line-dark, rgba(17, 17, 17, .14));
  --pi-se-muted-dark: var(--pi-text-muted-dark, rgba(255, 255, 255, .68));
  --pi-se-muted-light: var(--pi-text-muted-light, rgba(17, 17, 17, .62));
  --pi-se-gutter: var(--pi-page-gutter, clamp(1.25rem, 4vw, 3.75rem));
  --pi-se-section-block: var(--pi-section-block, clamp(5rem, 9vw, 7.5rem));
  --pi-se-duration-fast: var(--pi-duration-fast, 180ms);
  --pi-se-duration: var(--pi-duration-standard, 340ms);
  --pi-se-ease: var(--pi-ease-expressive, cubic-bezier(.2, .8, .2, 1));
  background: var(--pi-se-white);
  color: var(--pi-se-ink);
}

.pi-service-experience-story * {
  box-sizing: border-box;
}

.pi-service-experience-story main {
  overflow: clip;
}

.pi-service-experience-story .pi-se-shell {
  position: relative;
  z-index: 3;
  width: min(100%, var(--pi-page-max, 1320px));
  margin-inline: auto;
  padding-inline: var(--pi-se-gutter);
}

.pi-service-experience-story .pi-se-hero,
.pi-service-experience-story .pi-se-chapter,
.pi-service-experience-story .pi-se-cta {
  position: relative;
  isolation: isolate;
}

.pi-service-experience-story .pi-se-hero,
.pi-service-experience-story .pi-se-chapter {
  min-height: 100vh;
  min-height: 100svh;
}

.pi-service-experience-story .pi-se-hero {
  --pi-se-hero-copy-width: min(100%, 820px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--pi-se-black);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-hero .pi-se-shell {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: inherit;
  padding-top: clamp(7.5rem, 14vh, 9.5rem);
  padding-bottom: clamp(.55rem, 1.25vh, .85rem);
}

.pi-service-experience-story .pi-se-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--pi-se-hero-copy-width);
  padding-block: clamp(1.5rem, 4vh, 3rem) clamp(2rem, 5vh, 4rem);
}

.pi-service-experience-story .pi-se-hero-meta {
  display: grid;
  gap: .85rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}

.pi-service-experience-story .pi-se-hero .pi-breadcrumbs {
  margin: 0;
}

.pi-service-experience-story .pi-se-hero-category {
  display: block;
}

.pi-service-experience-story .pi-se-hero .pi-breadcrumbs,
.pi-service-experience-story .pi-se-hero .pi-breadcrumbs a,
.pi-service-experience-story .pi-se-hero .pi-eyebrow {
  color: var(--pi-se-muted-dark);
}

.pi-service-experience-story .pi-se-hero h1 {
  max-width: 16ch;
  margin: 0 0 clamp(1.5rem, 3.25vh, 2.35rem);
  color: var(--pi-se-white);
  font-size: clamp(2.9rem, 4.65vw, 4.9rem);
  font-weight: 500;
  line-height: 1.015;
  letter-spacing: -.04em;
}

.pi-service-experience-story .pi-se-hero h1 .mil-thin {
  color: var(--pi-se-white);
  font-weight: 100;
}

.pi-service-experience-story .pi-se-hero-description {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, .66);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.62;
}

.pi-service-experience-story .pi-se-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: clamp(1.75rem, 3.5vh, 2.75rem);
}

.pi-service-experience .pi-se-button {
  --pi-service-control-surface: var(--pi-black, #000);
  --pi-service-control-ink: var(--pi-white, #fff);
  --pi-service-control-accent: var(--pi-brand-live-color, #e3063b);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 190px;
  min-height: 70px;
  margin: 0;
  padding: 0 18px 0 30px;
  border: 1px solid transparent;
  border-radius: 70px;
  background: var(--pi-se-white);
  color: var(--pi-se-black);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .125rem;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--pi-se-duration-fast) ease,
              background var(--pi-se-duration-fast) ease,
              border-color var(--pi-se-duration-fast) ease,
              transform var(--pi-se-duration-fast) ease;
}

.pi-service-experience .pi-se-button svg {
  width: 40px;
  height: 40px;
  padding: 11px;
  border-radius: 50%;
  background: var(--pi-service-control-surface);
  box-shadow: inset 0 0 0 3px var(--pi-service-control-accent);
  fill: var(--pi-service-control-ink);
  transition: background var(--pi-se-duration-fast) ease,
              box-shadow var(--pi-se-duration-fast) ease,
              transform var(--pi-se-duration-fast) ease;
}

.pi-service-experience .pi-se-button svg path {
  fill: var(--pi-service-control-ink);
}

.pi-service-experience .pi-se-button:hover,
.pi-service-experience .pi-se-button:focus-visible {
  color: var(--pi-se-white);
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
  transform: translateY(-2px);
}

.pi-service-experience .pi-se-button:hover svg,
.pi-service-experience .pi-se-button:focus-visible svg {
  background: var(--pi-service-control-surface);
  transform: translateX(3px);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary {
  position: relative;
  isolation: isolate;
  min-width: 262px;
  min-height: 64px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .16);
  color: var(--pi-se-white);
 
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary::before {
  position: absolute;
  z-index: 0;
  inset: 1px;
  background: var(--pi-se-black);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px));
  content: "";
  transition: background var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 58px;
  width: 1px;
  height: 28px;
  background: var(--pi-service-control-accent);
  content: "";
  transform: translateY(-50%);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary > span {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 0 1.65rem;
  text-align: left;
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary svg {
  position: relative;
  z-index: 1;
  flex: 0 0 58px;
  width: 58px;
  height: 62px;
  padding: 20px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  fill: var(--pi-service-control-accent);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary svg path {
  fill: var(--pi-service-control-accent);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:hover,
.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:focus-visible {
  background: rgba(255, 255, 255, .28);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:hover::before,
.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:focus-visible::before {
  background: var(--pi-se-black);
}

.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:hover svg,
.pi-service-experience-story .pi-se-hero .pi-se-button--hero-primary:focus-visible svg {
  background: transparent;
}

.pi-service-experience-story .pi-se-context-link {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  min-height: 44px;
  padding: .25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .78);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--pi-se-duration-fast) ease,
              border-color var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-context-link > :last-child {
  color: rgba(255, 255, 255, .5);
  font-size: 1rem;
  transition: transform var(--pi-se-duration-fast) var(--pi-se-ease);
}

.pi-service-experience-story .pi-se-context-link:hover,
.pi-service-experience-story .pi-se-context-link:focus-visible {
  border-color: var(--pi-se-white);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-context-link:hover > :last-child,
.pi-service-experience-story .pi-se-context-link:focus-visible > :last-child {
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-context-link:hover > :last-child,
.pi-service-experience-story .pi-se-context-link:focus-visible > :last-child {
  transform: translate(2px, 2px);
}

.pi-service-experience-story .pi-se-hero-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid var(--pi-se-line-dark);
  scrollbar-width: none;
}

.pi-service-experience-story .pi-se-hero-nav::-webkit-scrollbar {
  display: none;
}

.pi-service-experience-story .pi-se-hero-nav a {
  display: inline-flex;
  flex: 1 0 auto;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: .65rem clamp(.8rem, 1.6vw, 1.5rem);
  border-right: 1px solid var(--pi-se-line-dark);
  color: rgba(255, 255, 255, .68);
  font-size: .76rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--pi-se-duration-fast) ease,
              background var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-hero-nav a:last-child {
  border-right: 0;
}

.pi-service-experience-story .pi-se-hero-nav a > :first-child {
  color: var(--pi-se-live);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}

.pi-service-experience-story .pi-se-hero-nav a:hover,
.pi-service-experience-story .pi-se-hero-nav a:focus-visible {
  color: var(--pi-se-white);
  background: rgba(255, 255, 255, .055);
}

.pi-service-experience-story .pi-se-hero .pi-interior-geometry {
  opacity: .58;
}

/* Variante maestra reutilizable: hero-service-dark-default. */
.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry {
  animation: none;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-animation {
  display: block;
  will-change: translate;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
  top: 33%;
  right: -3%;
  width: 350px;
  height: 350px;
  opacity: .27;
  transform: scale(2.112);
  animation: pi-se-hero-float-main 19s ease-in-out -7s infinite alternate;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-2 {
  top: -78px;
  right: 45%;
  left: auto;
  width: 390px;
  height: 390px;
  opacity: .3;
  transform: scale(.88);
  animation: pi-se-hero-float-upper 13s ease-in-out -3s infinite alternate-reverse;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-3 {
  right: auto;
  bottom: 20%;
  left: -5%;
  width: 180px;
  height: 180px;
  opacity: .16;
  transform: scale(.65);
  animation: pi-se-hero-float-lower 23s ease-in-out -11s infinite alternate;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 .mil-dodecahedron {
  animation: pi-se-hero-rotate-main 118s linear -17s infinite;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-2 .mil-dodecahedron {
  animation: pi-se-hero-rotate-upper 83s linear -29s infinite reverse;
}

.pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-3 .mil-dodecahedron {
  animation: pi-se-hero-rotate-lower 147s linear -43s infinite;
}

@keyframes pi-se-hero-float-main {
  0% { translate: 0 0; }
  48% { translate: -10px 14px; }
  100% { translate: 8px -7px; }
}

@keyframes pi-se-hero-float-upper {
  0% { translate: 0 0; }
  42% { translate: 12px 7px; }
  100% { translate: -7px 13px; }
}

@keyframes pi-se-hero-float-lower {
  0% { translate: 0 0; }
  55% { translate: -13px -9px; }
  100% { translate: 6px 8px; }
}

@keyframes pi-se-hero-rotate-main {
  from { transform: rotateX(-8deg) rotateY(360deg) rotateZ(12deg); }
  to { transform: rotateX(352deg) rotateY(0deg) rotateZ(-348deg); }
}

@keyframes pi-se-hero-rotate-upper {
  from { transform: rotateX(30deg) rotateY(-15deg) rotateZ(360deg); }
  to { transform: rotateX(-330deg) rotateY(345deg) rotateZ(0deg); }
}

@keyframes pi-se-hero-rotate-lower {
  from { transform: rotateX(360deg) rotateY(40deg) rotateZ(-20deg); }
  to { transform: rotateX(0deg) rotateY(-320deg) rotateZ(340deg); }
}

/* Fase 6G-4: contraste máximo temporal para identificar los tres slots geométricos. */
.pi-service-experience-story .pi-se-hero--dark-default[data-geometry-phase="identification"] .pi-se-hero-geometry {
  opacity: 1;
}

.pi-service-experience-story .pi-se-hero--dark-default[data-geometry-phase="identification"] .pi-se-hero-geometry .mil-animation {
  display: block;
  opacity: .3 !important;
}

.pi-service-experience-story .pi-se-hero--dark-default[data-geometry-phase="identification"] .pi-se-hero-geometry .mil-pentagon div {
  border-top-color: rgb(255, 255, 255);
  border-top-width: .4px;
}

.pi-service-experience-story .pi-se-chapter {
  display: flex;
  align-items: center;
  padding-block: var(--pi-se-section-block);
}

.pi-service-experience-story .pi-se-chapter-number {
  position: absolute;
  z-index: -1;
  top: clamp(5rem, 10vw, 8.5rem);
  right: max(var(--pi-se-gutter), calc((100vw - var(--pi-page-max, 1320px)) / 2 + var(--pi-se-gutter)));
  margin: 0;
  color: var(--pi-se-live);
  font-size: clamp(7rem, 20vw, 19rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.08em;
  line-height: .72;
  opacity: .075;
  pointer-events: none;
  user-select: none;
}

.pi-service-experience-story .pi-se-chapter--light {
  background: var(--pi-se-white);
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-chapter--dark {
  background: var(--pi-se-ink);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-chapter--black {
  background: var(--pi-se-black);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-chapter--warm {
  background: var(--pi-se-warm);
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-chapter--paper {
  background: var(--pi-se-paper);
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-chapter--dark .pi-eyebrow,
.pi-service-experience-story .pi-se-chapter--black .pi-eyebrow,
.pi-service-experience-story .pi-se-chapter--dark p,
.pi-service-experience-story .pi-se-chapter--black p {
  color: var(--pi-se-muted-dark);
}

.pi-service-experience-story .pi-se-chapter--dark h2,
.pi-service-experience-story .pi-se-chapter--dark h3,
.pi-service-experience-story .pi-se-chapter--black h2,
.pi-service-experience-story .pi-se-chapter--black h3 {
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.pi-service-experience-story .pi-se-editorial-split .pi-section-label {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.pi-service-experience-story .pi-se-editorial-split h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.pi-service-experience-story .pi-se-editorial-split .pi-copy {
  max-width: 720px;
  padding-top: clamp(3rem, 12vh, 7rem);
}

.pi-service-experience-story .pi-se-editorial-split .pi-copy p {
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

.pi-service-experience-story .pi-se-system-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 1px solid var(--pi-se-line-dark);
  border-left: 1px solid var(--pi-se-line-dark);
}

.pi-service-experience-story .pi-se-system-item {
  position: relative;
  min-height: 260px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-right: 1px solid var(--pi-se-line-dark);
  border-bottom: 1px solid var(--pi-se-line-dark);
}

.pi-service-experience-story .pi-se-system-item:nth-child(1),
.pi-service-experience-story .pi-se-system-item:nth-child(2) {
  grid-column: span 6;
}

.pi-service-experience-story .pi-se-system-item:nth-child(3) {
  grid-column: span 8;
}

.pi-service-experience-story .pi-se-system-item:nth-child(4) {
  grid-column: span 4;
}

.pi-service-experience-story .pi-se-system-item h2 {
  max-width: 11ch;
  margin: 2.5rem 0 1.2rem;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.pi-service-experience-story .pi-se-system-item p {
  max-width: 48ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.pi-service-experience-story .pi-se-system-item::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 0;
  background: var(--pi-se-live);
  content: "";
  transition: height var(--pi-se-duration) var(--pi-se-ease);
}

.pi-service-experience-story .pi-se-system-item:hover::after,
.pi-service-experience-story .pi-se-system-item:focus-within::after {
  height: 100%;
}

.pi-service-experience-story .pi-se-statement {
  overflow: hidden;
}

.pi-service-experience-story .pi-se-statement .pi-se-shell {
  display: flex;
  align-items: center;
  min-height: calc(100vh - (2 * var(--pi-se-section-block)));
  min-height: calc(100svh - (2 * var(--pi-se-section-block)));
}

.pi-service-experience-story .pi-se-statement .pi-quote {
  position: relative;
  z-index: 2;
  max-width: 16ch;
  margin: 0;
  color: var(--pi-se-ink);
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
}

.pi-service-experience-story .pi-se-statement .pi-quote::before {
  display: block;
  width: clamp(3rem, 7vw, 6rem);
  height: 4px;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  background: var(--pi-se-live);
  content: "";
}

.pi-service-experience-story .pi-se-statement .pi-section-geometry {
  right: -8vw;
  left: auto;
  width: min(52vw, 760px);
  opacity: .28;
}

.pi-service-experience-story .pi-se-statement .mil-pentagon div {
  border-top-color: var(--pi-se-live);
}

.pi-service-experience-story .pi-se-process-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(4rem, 9vw, 9rem);
  align-items: start;
}

.pi-service-experience-story .pi-se-process-steps {
  display: grid;
  border-top: 1px solid var(--pi-se-line-dark);
}

.pi-service-experience-story .pi-se-process-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(1.6rem, 3.3vw, 2.8rem) 0;
  border-bottom: 1px solid var(--pi-se-line-dark);
}

.pi-service-experience-story .pi-se-process-step::before {
  color: var(--pi-se-live);
  content: attr(data-step);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}

.pi-service-experience-story .pi-se-process-step h3 {
  margin: 0 0 .85rem;
  font-size: clamp(1.5rem, 2.4vw, 2.625rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.pi-service-experience-story .pi-se-process-step p {
  margin: 0;
  line-height: 1.6;
}

.pi-service-experience-story .pi-se-process-connection {
  position: sticky;
  top: 22vh;
  padding-top: clamp(1rem, 5vh, 4rem);
}

.pi-service-experience-story .pi-se-process-connection h2 {
  max-width: 9ch;
  margin: 0 0 1.75rem;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.pi-service-experience-story .pi-se-process-connection p {
  max-width: 590px;
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.pi-service-experience-story .pi-se-process-connection a {
  color: var(--pi-se-white);
  text-decoration-color: var(--pi-se-live);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.pi-service-experience-story .pi-se-related-head {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.pi-service-experience-story .pi-se-related-head h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.pi-service-experience-story .pi-se-related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pi-se-line-light);
  border-left: 1px solid var(--pi-se-line-light);
}

.pi-service-experience-story .pi-se-related-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  min-height: 150px;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border-right: 1px solid var(--pi-se-line-light);
  border-bottom: 1px solid var(--pi-se-line-light);
  color: var(--pi-se-ink);
  text-decoration: none;
  transition: background var(--pi-se-duration-fast) ease,
              color var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-related-link::before {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 0;
  height: 3px;
  background: var(--pi-se-live);
  content: "";
  transition: width var(--pi-se-duration) var(--pi-se-ease);
}

.pi-service-experience-story .pi-se-related-link:hover,
.pi-service-experience-story .pi-se-related-link:focus-visible {
  background: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-related-link:hover::before,
.pi-service-experience-story .pi-se-related-link:focus-visible::before {
  width: calc(100% + 1px);
}

.pi-service-experience-story .pi-se-related-index {
  color: var(--pi-se-muted-light);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}

.pi-service-experience-story .pi-se-related-link strong {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 500;
}

.pi-service-experience-story .pi-se-related-arrow {
  color: var(--pi-se-live);
  font-size: 1.65rem;
  transition: transform var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-related-link:hover .pi-se-related-arrow,
.pi-service-experience-story .pi-se-related-link:focus-visible .pi-se-related-arrow {
  transform: translateX(5px);
}

.pi-service-experience-story .pi-se-cta {
  display: flex;
  min-height: min(72vh, 760px);
  align-items: center;
  padding-block: var(--pi-se-section-block);
  background: var(--pi-se-white);
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: end;
  padding-top: clamp(2rem, 6vw, 5rem);
  border-top: 1px solid var(--pi-se-line-light);
}

.pi-service-experience-story .pi-se-cta-title {
  max-width: 12ch;
  margin: 1.25rem 0 0;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.05em;
}

.pi-service-experience .pi-se-cta .pi-se-button {
  --pi-service-control-surface: var(--pi-white, #fff);
  --pi-service-control-ink: var(--pi-black, #000);
  background: var(--pi-se-black);
  color: var(--pi-se-white);
}

.pi-service-experience .pi-se-cta .pi-se-button:hover,
.pi-service-experience .pi-se-cta .pi-se-button:focus-visible {
  border-color: var(--pi-se-black);
  background: transparent;
  color: var(--pi-se-black);
}

.pi-service-experience-story .pi-se-rail[hidden] {
  display: none;
}

.pi-service-experience-story .pi-se-rail {
  position: fixed;
  z-index: 90;
  top: 50%;
  right: clamp(1rem, 2.1vw, 2.6rem);
  display: grid;
  min-width: 132px;
  padding: .5rem;
  border: 1px solid rgba(17, 17, 17, .14);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .12);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, -50%, 0);
  transition: opacity var(--pi-se-duration) var(--pi-se-ease),
              transform var(--pi-se-duration) var(--pi-se-ease),
              background var(--pi-se-duration-fast) ease,
              border-color var(--pi-se-duration-fast) ease;
  backdrop-filter: blur(16px);
}

.pi-service-experience-story .pi-se-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, -50%, 0);
}

.pi-service-experience-story .pi-se-rail.is-dark {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(8, 8, 8, .86);
}

.pi-service-experience-story .pi-se-rail a {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 44px;
  padding: .45rem .55rem;
  color: rgba(17, 17, 17, .62);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--pi-se-duration-fast) ease,
              background var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-rail.is-dark a {
  color: rgba(255, 255, 255, .6);
}

.pi-service-experience-story .pi-se-rail a::before {
  width: 24px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: width var(--pi-se-duration-fast) ease,
              background var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-rail a:hover,
.pi-service-experience-story .pi-se-rail a:focus-visible,
.pi-service-experience-story .pi-se-rail a[aria-current="location"] {
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-rail.is-dark a:hover,
.pi-service-experience-story .pi-se-rail.is-dark a:focus-visible,
.pi-service-experience-story .pi-se-rail.is-dark a[aria-current="location"] {
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-rail a[aria-current="location"]::before {
  width: 28px;
  height: 3px;
  background: var(--pi-se-live);
}

.pi-service-experience-story .pi-se-rail .pi-se-rail-cta {
  margin-top: .35rem;
  border-top: 1px solid var(--pi-se-line-light);
  color: var(--pi-se-ink);
}

.pi-service-experience-story .pi-se-rail.is-dark .pi-se-rail-cta {
  border-top-color: var(--pi-se-line-dark);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-rail .pi-se-rail-cta::before {
  height: 24px;
  background: none;
  color: var(--pi-se-live);
  content: "→";
  font-size: 1.25rem;
  line-height: 1;
}

.pi-service-experience-story .pi-se-rail .pi-se-rail-cta[aria-current="location"]::before {
  height: 24px;
  background: none;
}

.pi-service-experience .pi-se-button:focus-visible,
.pi-service-experience-story .pi-se-context-link:focus-visible,
.pi-service-experience-story .pi-se-hero-nav a:focus-visible,
.pi-service-experience-story .pi-se-related-link:focus-visible,
.pi-service-experience-story .pi-se-rail a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.pi-service-experience-story.pi-menu-open .pi-se-rail,
.pi-menu-open .pi-service-experience-story .pi-se-rail {
  opacity: 0;
  pointer-events: none;
}

/* Contrato Service Experience: el rail requiere espacio útil desde 1366 px. */
@media (min-width: 1366px) {
  .pi-service-experience-story .pi-se-chapter > .pi-se-shell,
  .pi-service-experience-story .pi-se-cta > .pi-se-shell {
    padding-right: max(calc(var(--pi-se-gutter) + 148px), 176px);
  }
}

@media (max-width: 1365px) {
  .pi-service-experience-story .pi-se-rail {
    display: none;
  }
}

@media (max-width: 1023px) {
  .pi-service-experience-story .pi-se-hero {
    --pi-se-hero-copy-width: min(100%, 740px);
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    top: 20%;
    right: -150px;
    width: 550px;
    height: 550px;
    opacity: .12;
    transform: scale(2.96);
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-2 {
    top: -105px;
    right: 32%;
    opacity: .11;
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-3 {
    right: 14%;
    bottom: -70px;
    opacity: .12;
  }

  .pi-service-experience-story .pi-se-chapter {
    min-height: auto;
  }

  .pi-service-experience-story .pi-se-editorial-split,
  .pi-service-experience-story .pi-se-process-layout,
  .pi-service-experience-story .pi-se-related-head {
    grid-template-columns: 1fr;
  }

  .pi-service-experience-story .pi-se-editorial-split .pi-copy {
    max-width: 760px;
    padding-top: 0;
  }

  .pi-service-experience-story .pi-se-process-connection {
    position: static;
    padding-top: 0;
  }

  .pi-service-experience-story .pi-se-process-connection h2 {
    max-width: 12ch;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    top: 12%;
    right: -150px;
    width: 350px;
    height: 350px;
    transform: scale(1.56);
  }
}

@media (min-width: 768px) and (max-width: 800px) {
  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    right: -250px;
  }
}

@media (max-width: 767px) {
  .pi-service-experience-story .pi-se-hero .pi-se-shell {
    padding-top: 7.5rem;
    padding-bottom: .65rem;
  }

  .pi-service-experience-story .pi-se-hero-copy {
    justify-content: flex-end;
    padding-bottom: 2.75rem;
  }

  .pi-service-experience-story .pi-se-hero h1 {
    max-width: none;
    font-size: clamp(1.68rem, 8.2vw, 3.25rem);
  }

  .pi-service-experience-story .pi-se-hero-description {
    max-width: 36rem;
  }

  .pi-service-experience-story .pi-se-hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .pi-service-experience .pi-se-button {
    min-height: 60px;
    padding-left: 24px;
  }

  .pi-service-experience-story .pi-se-hero-nav a {
    flex: 0 0 auto;
    min-width: 8.75rem;
    min-height: 48px;
    padding: .55rem 1rem;
    font-size: .6875rem;
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    top: 22%;
    right: -300px;
    width: 350px;
    height: 350px;
    opacity: .16;
    transform: scale(1.3);
    
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-2,
  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-3 {
    display: none;
  }

  .pi-service-experience-story .pi-se-system-grid,
  .pi-service-experience-story .pi-se-related-list {
    grid-template-columns: 1fr;
  }

  .pi-service-experience-story .pi-se-system-item:nth-child(n) {
    grid-column: auto;
    min-height: 0;
  }

  .pi-service-experience-story .pi-se-system-item h2 {
    margin-top: 1.5rem;
  }

  .pi-service-experience-story .pi-se-statement .pi-se-shell {
    min-height: 62vh;
  }

  .pi-service-experience-story .pi-se-statement .pi-quote {
    font-size: clamp(2.75rem, 12vw, 5rem);
  }

  .pi-service-experience-story .pi-se-statement .pi-section-geometry {
    right: -45vw;
    width: 120vw;
    opacity: .16;
  }

  .pi-service-experience-story .pi-se-process-step {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pi-service-experience-story .pi-se-related-link {
    min-height: 112px;
  }

  .pi-service-experience-story .pi-se-cta {
    min-height: 68vh;
  }

  .pi-service-experience-story .pi-se-cta-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pi-service-experience-story .pi-se-cta .pi-se-button {
    width: min(100%, 230px);
  }
}

@media (max-width: 359px) {
  .pi-service-experience-story .pi-se-hero-description {
    font-size: .8125rem;
    line-height: 1.58;
  }
}

@media (max-height: 800px) and (min-width: 768px) {
  .pi-service-experience-story .pi-se-chapter {
    min-height: auto;
  }

  .pi-service-experience-story .pi-se-hero .pi-se-shell {
    /* El Hero conserva jerarquía y crece; no se fuerza a caber en 768 px. */
    padding-top: 8rem;
  }

  .pi-service-experience-story .pi-se-statement .pi-se-shell {
    min-height: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-service-experience-story,
  .pi-service-experience-story * {
    scroll-behavior: auto !important;
  }

  .pi-service-experience .pi-se-button,
  .pi-service-experience .pi-se-button svg,
  .pi-service-experience-story .pi-se-context-link,
  .pi-service-experience-story .pi-se-context-link > :last-child,
  .pi-service-experience-story .pi-se-hero-nav a,
  .pi-service-experience-story .pi-se-system-item::after,
  .pi-service-experience-story .pi-se-related-link,
  .pi-service-experience-story .pi-se-related-link::before,
  .pi-service-experience-story .pi-se-related-arrow,
  .pi-service-experience-story .pi-se-rail,
  .pi-service-experience-story .pi-se-rail a,
  .pi-service-experience-story .pi-se-rail a::before {
    transition-duration: .01ms !important;
  }

  .pi-service-experience .pi-se-button:hover,
  .pi-service-experience .pi-se-button:focus-visible,
  .pi-service-experience .pi-se-button:hover svg,
  .pi-service-experience .pi-se-button:focus-visible svg,
  .pi-service-experience-story .pi-se-context-link:hover > :last-child,
  .pi-service-experience-story .pi-se-context-link:focus-visible > :last-child,
  .pi-service-experience-story .pi-se-related-link:hover .pi-se-related-arrow,
  .pi-service-experience-story .pi-se-related-link:focus-visible .pi-se-related-arrow {
    transform: none;
  }

  .pi-service-experience-story .pi-se-hero .mil-animation,
  .pi-service-experience-story .pi-se-hero .mil-dodecahedron,
  .pi-service-experience-story .pi-se-statement .mil-animation {
    animation: none !important;
    transform: none !important;
  }
}

/*
 * PUBLIMPACTO · service-section-01-default@1
 * Lote 7A · fuente interna. El build la integra en
 * storytelling-service-experience.css; no genera un CSS público adicional.
 */

.pi-service-experience-story .pi-se-rail--master {
  min-width: 68px;
  padding: .6rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.pi-service-experience-story .pi-se-rail--master::before {
  position: absolute;
  top: .8rem;
  bottom: .8rem;
  left: 13px;
  width: 1px;
  background: rgba(17, 17, 17, .18);
  content: "";
  transition: background var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-rail--master.is-dark::before {
  background: rgba(255, 255, 255, .24);
}

.pi-service-experience-story .pi-se-rail--master a {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  width: 54px;
  min-height: 46px;
  padding: .35rem .25rem;
  color: rgba(17, 17, 17, .58);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
}

.pi-service-experience-story .pi-se-rail--master.is-dark a {
  color: rgba(255, 255, 255, .62);
}

.pi-service-experience-story .pi-se-rail--master a::before {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 4px;
  height: 0;
  background: var(--pi-se-live);
  content: "";
  transform: translateY(-50%);
  transition: height var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story .pi-se-rail--master a:hover,
.pi-service-experience-story .pi-se-rail--master a:focus-visible,
.pi-service-experience-story .pi-se-rail--master a[aria-current="location"] {
  color: var(--pi-se-live);
}

.pi-service-experience-story .pi-se-rail--master a[aria-current="location"]::before {
  width: 4px;
  height: 24px;
  background: var(--pi-se-live);
}

.pi-service-experience-story .pi-se-rail--master .pi-se-rail-index {
  display: block;
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
}

.pi-service-experience-story .pi-se-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pi-service-experience-story .pi-se-rail--master .pi-se-rail-cta {
  width: 44px;
  min-height: 44px;
  margin: .7rem 0 0 5px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, .22);
  background: rgba(255, 255, 255, .72);
  color: var(--pi-se-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.pi-service-experience-story .pi-se-rail--master.is-dark .pi-se-rail-cta {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .55);
  color: var(--pi-se-white);
}

.pi-service-experience-story .pi-se-rail--master .pi-se-rail-cta::before,
.pi-service-experience-story .pi-se-rail--master .pi-se-rail-cta[aria-current="location"]::before {
  display: none;
}

.pi-service-experience-story .pi-se-rail--master .pi-se-rail-cta svg {
  width: 19px;
  height: 19px;
  fill: var(--pi-se-live);
}

.pi-service-experience-story .pi-se-section-01-default {
  background: var(--pi-se-white);
  color: var(--pi-se-ink);
  scroll-margin-top: 90px;
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-01-header {
  margin-bottom: clamp(2.75rem, 6vw, 5.5rem);
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-index {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin: 0;
  color: rgba(17, 17, 17, .58);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-index > :first-child {
  color: var(--pi-se-live);
  font-variant-numeric: tabular-nums;
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-editorial-split {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-editorial-split h2 {
  max-width: 14ch;
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-editorial-split .pi-copy {
  max-width: 720px;
  padding-top: 0;
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-close {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(17, 17, 17, .18);
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-close p {
  grid-column: 2;
  max-width: 620px;
  margin: 0;
  color: var(--pi-se-ink);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.28;
}

@media (max-width: 1023px) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-editorial-split,
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close {
    grid-template-columns: 1fr;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close p {
    grid-column: 1;
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  .pi-service-experience-story .pi-se-section-01-default {
    min-height: auto;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-01-header {
    margin-bottom: 2.25rem;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-editorial-split {
    gap: 2.25rem;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close {
    gap: 0;
    margin-top: 3rem;
    padding-top: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-service-experience-story .pi-se-rail--master,
  .pi-service-experience-story .pi-se-rail--master::before,
  .pi-service-experience-story .pi-se-rail--master a,
  .pi-service-experience-story .pi-se-rail--master a::before {
    transition-duration: .01ms !important;
  }
}

/*
 * PUBLIMPACTO · sticky-navigation-service-master@1
 * Fuente interna: el build la integra al final de
 * storytelling-service-experience.css. No genera un CSS público adicional.
 */

.pi-service-experience .pi-se-rail.pi-service-sticky-nav {
  display: flex;
  width: 72px;
  min-width: 72px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 4px 0;
  border: 0;
  border-left: 1px solid rgba(17, 17, 17, .18);
  background: transparent;
  box-shadow: none;
  color: rgba(17, 17, 17, .58);
  isolation: isolate;
  backdrop-filter: none;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav[hidden] {
  display: none !important;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav::before {
  display: none;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark {
  border-left-color: rgba(255, 255, 255, .28);
  background: transparent;
  color: rgba(255, 255, 255, .62);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav a {
  position: relative;
  z-index: 1;
  display: flex;
  width: 44px;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  line-height: 1;
  text-decoration: none;
  transition: color var(--pi-se-duration-fast) ease;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav a::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -15px;
  display: block;
  width: 3px;
  height: auto;
  background: var(--pi-se-live);
  content: "";
  opacity: 0;
  transform: none;
  transition: opacity var(--pi-se-duration-fast) ease;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav a:hover,
.pi-service-experience .pi-se-rail.pi-service-sticky-nav a:focus-visible {
  background: transparent;
  color: var(--pi-se-ink);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark a:hover,
.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark a:focus-visible {
  background: transparent;
  color: var(--pi-se-white);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav a[aria-current="location"] {
  color: var(--pi-se-ink);
  font-weight: 600;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark a[aria-current="location"] {
  color: var(--pi-se-white);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav a[aria-current="location"]::before {
  width: 3px;
  height: auto;
  background: var(--pi-se-live);
  opacity: 1;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-se-rail-index {
  display: block;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta {
  width: 44px;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--pi-se-ink);
  clip-path: none;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark .pi-service-sticky-nav__cta {
  color: var(--pi-se-white);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta::before,
.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta[aria-current="location"]::before {
  display: none;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  opacity: 1;
  -webkit-mask: url("/img/icons/avion.svg") center / contain no-repeat;
  mask: url("/img/icons/avion.svg") center / contain no-repeat;
  transition: color var(--pi-se-duration-fast) ease,
              transform var(--pi-se-duration-fast) ease;
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta:hover .pi-service-sticky-nav__cta-icon,
.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta:focus-visible .pi-service-sticky-nav__cta-icon {
  opacity: 1;
  transform: scale(1.08);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta[aria-current="location"] {
  color: var(--pi-se-ink);
}

.pi-service-experience .pi-se-rail.pi-service-sticky-nav.is-dark .pi-service-sticky-nav__cta[aria-current="location"] {
  color: var(--pi-se-white);
}

@media (max-width: 1365px) {
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav {
    display: none !important;
  }
}

@media print {
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav,
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav a,
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav a::before,
  .pi-service-experience .pi-se-rail.pi-service-sticky-nav .pi-service-sticky-nav__cta-icon {
    transition-duration: .01ms !important;
  }
}

/*
 * Storytelling · micro hito 01
 * Reduce únicamente el protagonismo de las geometrías del Hero.
 * Se ensambla dentro del único CSS público de la experiencia.
 */
.pi-service-experience-story .pi-se-hero--dark-default[data-geometry-phase="identification"] .pi-se-hero-geometry .mil-animation {
  opacity: .2 !important;
}

/*
 * PUBLIMPACTO · Lote 7C
 * Contrato fullscreen y anchors para Service Experience.
 * Se ensambla en el CSS consolidado; no genera una hoja pública adicional.
 */

.pi-service-experience-story .pi-se-chapter,
.pi-service-experience-story .pi-se-cta {
  scroll-margin-block-start: 0;
  scroll-margin-top: 0;
}

.pi-service-experience-story .pi-se-chapter {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: none;
}

.pi-service-experience-story .pi-se-chapter::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) and (max-height: 900px) {
  .pi-service-experience-story .pi-se-chapter {
    --pi-se-section-block: clamp(2.75rem, 5.5svh, 5rem);
  }
}

@media (min-width: 768px) {
  .pi-service-experience-story .pi-se-section-01-default {
    --pi-se-section-block: clamp(3rem, 6svh, 5rem);
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-01-header {
    margin-bottom: clamp(1.5rem, 4svh, 3rem);
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close {
    margin-top: clamp(2rem, 5svh, 4rem);
    padding-top: clamp(1rem, 2.2svh, 1.75rem);
  }
}

@media (max-width: 767px) {
  .pi-service-experience-story .pi-se-chapter {
    align-items: flex-start;
  }
}

/* FAQ MASTER SERVICE EXPERIENCE */
.pi-service-experience-story .pi-se-faq-master {
  background:#f5f5f2;
}
.pi-service-experience-story .pi-se-faq-layout {
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);
  gap:clamp(2rem,6vw,7rem);
}
.pi-service-experience-story .pi-se-faq details {
  border-bottom:1px solid rgba(0,0,0,.15);
  padding:1.2rem 0;
}
.pi-service-experience-story .pi-se-faq summary {
  cursor:pointer;
  list-style:none;
  font-weight:500;
}
.pi-service-experience-story .pi-se-faq summary::-webkit-details-marker {display:none;}
.pi-service-experience-story .pi-se-faq details div {
  padding-top:1rem;
  max-width:60ch;
  line-height:1.6;
}
@media (max-width:800px){
 .pi-service-experience-story .pi-se-faq-layout{grid-template-columns:1fr;}
}


/* PUBLIMPACTO · FAQ MASTER REFINAMIENTO */
.pi-se-faq-master .pi-se-section-index {
  color: var(--pi-live-color, currentColor);
}

.pi-se-faq-layout {
  align-items: start;
}

.pi-se-faq {
  align-self: start;
}

.pi-se-faq details {
  overflow: hidden;
}

.pi-se-faq details > div {
  transform-origin: top;
  animation: piFaqOpen .45s cubic-bezier(.2,.7,.2,1);
}

@keyframes piFaqOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================
   FAQ MASTER · SERVICE EXPERIENCE · CLEAN EDITORIAL
   ========================================================== */

.pi-service-experience-story .pi-se-faq-layout {
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(320px,1.28fr);
  gap:clamp(2.5rem,7vw,8rem);
  align-items:start;
}

.pi-service-experience-story .pi-se-faq-intro {
  align-self:start;
}

.pi-service-experience-story .pi-se-faq-intro h2 {
  margin:0;
}

.pi-service-experience-story .pi-se-faq {
  min-width:0;
  align-self:start;
}

.pi-service-experience-story .pi-se-faq details {
  border-bottom:1px solid rgba(0,0,0,.14);
  padding:0;
  overflow:hidden;
}

.pi-service-experience-story .pi-se-faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
}

.pi-service-experience-story .pi-se-faq summary::-webkit-details-marker {
  display:none;
}

.pi-service-experience-story .pi-se-faq summary::after {
  content:"+";
  flex:0 0 auto;
  font-size:22px;
  transition:transform .3s ease;
}

.pi-service-experience-story .pi-se-faq details[open] summary::after {
  transform:rotate(45deg);
}

.pi-service-experience-story .pi-se-faq details > div {
  padding:0 0 24px;
  max-width:62ch;
  line-height:1.7;
  animation:piStoryFaqReveal .35s cubic-bezier(.16,1,.3,1);
}

@keyframes piStoryFaqReveal {
  from {opacity:0; transform:translateY(-8px);}
  to {opacity:1; transform:translateY(0);}
}

@media(max-width:800px){
  .pi-service-experience-story .pi-se-faq-layout {
    grid-template-columns:1fr;
    gap:2rem;
  }
}


/* ==========================================================
   FAQ 05 · FLUJO NATURAL · SIN CENTRADO VERTICAL
   ----------------------------------------------------------
   La sección FAQ no participa del centrado fullscreen.
   Mantiene una posición editorial fija y el acordeón crece hacia abajo.
   ========================================================== */
.pi-service-experience-story #conexiones.pi-se-faq-master {
  display:block;
  height:auto;
  min-height:100vh;
  min-height:100svh;
  max-height:none;
  overflow:visible;
  padding-top:clamp(12vh, 16vh, 18vh);
  padding-bottom:clamp(5rem, 10vh, 8rem);
}

.pi-service-experience-story #conexiones.pi-se-faq-master > .pi-se-shell {
  width:100%;
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-layout {
  align-items:start;
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-intro {
  position:relative;
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq {
  align-self:start;
}

/* ==========================================================
   LOTE 8 · FAQ 05 · MISMO RITMO DE SECCIÓN
   ----------------------------------------------------------
   Mantiene el ancho/padding del sistema Service Experience.
   Solo elimina el centrado vertical del capítulo FAQ.
   ========================================================== */
.pi-service-experience-story #conexiones.pi-se-faq-master {
  display:block;
  min-height:100vh;
  min-height:100svh;
  height:auto;
  max-height:none;
  overflow:visible;
  padding-block:var(--pi-se-section-block);
}

.pi-service-experience-story #conexiones.pi-se-faq-master > .pi-se-shell {
  width:100%;
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-layout {
  align-items:start;
}


/* ==========================================================
   LOTE 9 · FAQ 05 · MISMA GEOMETRÍA HORIZONTAL DEL SISTEMA
   ----------------------------------------------------------
   La sección conserva el ancho y gutter del resto de capítulos.
   Solo se elimina el comportamiento fullscreen de centrado.
   ========================================================== */

.pi-service-experience-story #conexiones.pi-se-faq-master {
  display:block;
  min-height:100vh;
  min-height:100svh;
  height:auto;
  max-height:none;
  overflow:visible;
  padding-top:var(--pi-se-section-block);
  padding-bottom:var(--pi-se-section-block);
}

.pi-service-experience-story #conexiones.pi-se-faq-master > .pi-se-shell {
  width:min(100%, var(--pi-page-max, 1320px));
  margin-inline:auto;
  padding-inline:var(--pi-se-gutter);
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-layout {
  align-items:start;
}


/* ==========================================================
   LOTE 10 · FAQ 05 · TÍTULO + RITMO VERTICAL FINAL
   ----------------------------------------------------------
   Igualamos el comportamiento editorial del título de 01.
   El FAQ conserva la geometría horizontal existente.
   ========================================================== */

.pi-service-experience-story #conexiones.pi-se-faq-master {
  padding-top:calc(var(--pi-se-section-block) * .90);
  padding-bottom:clamp(1.5rem, 3vw, 2.25rem);
}

/* Mismo comportamiento editorial que la sección 01 */
.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-intro h2 {
  max-width:12ch;
}


/* ==========================================================
   LOTE 11 · FAQ MASTER · IDENTIDAD EDITORIAL FINAL
   ========================================================== */

/* 05 · misma etiqueta editorial que sección 01 */
.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-section-index {
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  margin:0;
  color:rgba(17,17,17,.58);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.3;
  text-transform:uppercase;
}

.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-section-index > :first-child {
  color:var(--pi-se-live);
  font-variant-numeric:tabular-nums;
}

/* Cabecera con el mismo ritmo que sección 01 */
.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-section-header {
  margin-bottom:clamp(1.5rem, 4svh, 3rem);
}

/* H2 editorial */
.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq-intro h2 {
  max-width:12ch;
  margin:0;
  font-size:clamp(2.25rem,4.6vw,4.25rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.035em;
}

/* Iconos FAQ sincronizados con color vivo */
.pi-service-experience-story #conexiones.pi-se-faq-master .pi-se-faq summary::after {
  color:var(--pi-se-live);
  transition:transform .3s ease,color .35s ease;
}



/* ==========================================================
   LOTE 13 · SECCIONES 02/03/04 · IDENTIDAD EDITORIAL
   ========================================================== */

/* Elimina numeración gigante de fondo */
.pi-service-experience-story .pi-se-chapter-number {
  display:none;
}

/* Cabeceras editoriales reutilizadas */
.pi-service-experience-story .pi-se-section-header-editorial {
  margin-bottom:clamp(1.5rem, 4svh, 3rem);
}

.pi-service-experience-story .pi-se-section-header-editorial .pi-se-section-index {
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.3;
  text-transform:uppercase;
}

.pi-service-experience-story .pi-se-chapter--light .pi-se-section-header-editorial .pi-se-section-index,
.pi-service-experience-story .pi-se-chapter--warm .pi-se-section-header-editorial .pi-se-section-index {
  color:rgba(17,17,17,.58);
}

.pi-service-experience-story .pi-se-section-header-editorial .pi-se-section-index > :first-child {
  color:var(--pi-se-live);
  font-variant-numeric:tabular-nums;
}

/* Compactar capítulos con nueva cabecera */
.pi-service-experience-story #sistema,
.pi-service-experience-story #principio,
.pi-service-experience-story #proceso {
  padding-block:clamp(3rem, 6svh, 5rem);
}

.pi-service-experience-story #sistema .pi-se-system-grid {
  margin-top:0;
}

.pi-service-experience-story #proceso .pi-se-process-layout {
  margin-top:0;
}



/* ==========================================================
   LOTE 14 · 02 SISTEMA · COMPACTACIÓN EDITORIAL
   ----------------------------------------------------------
   Reduce únicamente el aire interno del componente de cards.
   Mantiene retícula, tipografía, jerarquía y composición.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story #sistema .pi-se-system-item {
    min-height:230px;
    padding:clamp(1.35rem,2.25vw,2.1rem);
  }

  .pi-service-experience-story #sistema .pi-se-system-item h2 {
    margin:clamp(1.5rem,2.1vw,1.75rem) 0 .9rem;
  }

  .pi-service-experience-story #sistema .pi-se-system-item p {
    line-height:1.52;
  }
}


/* ==========================================================
   LOTE 15 · 03 PRINCIPIO · COMPOSICIÓN EDITORIAL
   ----------------------------------------------------------
   Cabecera arriba, concepto centrado en el espacio restante.
   Fondo papel #f5f5f2 y escala tipográfica más contenida.
   ========================================================== */

.pi-service-experience-story #principio {
  --pi-se-principle-pad:clamp(3rem,6svh,5rem);
  padding-block:var(--pi-se-principle-pad);
  background:#f5f5f2;
}

/* La cabecera deja de participar en el mismo eje horizontal del quote. */
.pi-service-experience-story #principio.pi-se-statement .pi-se-shell {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
  min-height:calc(100svh - (2 * var(--pi-se-principle-pad)));
}

/* Mismo anclaje editorial que el resto de capítulos. */
.pi-service-experience-story #principio .pi-se-section-header-editorial {
  align-self:start;
  margin-bottom:0;
}

/* El concepto sigue siendo protagonista, pero con una escala más controlada. */
.pi-service-experience-story #principio .pi-quote {
  align-self:center;
  max-width:15ch;
  font-size:clamp(2.75rem,5.6vw,6.25rem);
  line-height:.98;
}

@media (max-width:767px) {
  .pi-service-experience-story #principio {
    --pi-se-principle-pad:clamp(2.75rem,8vw,4rem);
  }

  .pi-service-experience-story #principio.pi-se-statement .pi-se-shell {
    min-height:auto;
    row-gap:clamp(2.5rem,8vw,4rem);
  }

  .pi-service-experience-story #principio .pi-quote {
    font-size:clamp(2.6rem,11vw,4.5rem);
  }
}


/* ==========================================================
   LOTE 16 · 03 PRINCIPIO · CABECERA + CONTENIDO COMO UNIDAD
   ----------------------------------------------------------
   La cabecera y el concepto se centran juntos.
   La distancia entre ambos replica el ritmo editorial de 02.
   ========================================================== */

.pi-service-experience-story #principio.pi-se-statement .pi-se-shell {
  grid-template-rows:auto auto;
  align-content:center;
  row-gap:clamp(1.5rem,4svh,3rem);
}

.pi-service-experience-story #principio .pi-se-section-header-editorial {
  margin-bottom:0;
}

.pi-service-experience-story #principio .pi-quote {
  align-self:start;
}

@media (max-width:767px) {
  .pi-service-experience-story #principio.pi-se-statement .pi-se-shell {
    row-gap:clamp(2rem,7vw,3rem);
  }
}


/* ==========================================================
   LOTE 17 · 01 PROBLEMA · CIERRE EDITORIAL + AVIÓN
   ----------------------------------------------------------
   Replica la composición propuesta:
   mensaje a la izquierda + icono editorial a la derecha.
   El SVG se utiliza como máscara para heredar el color vivo.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close {
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    align-items:start;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close p {
    grid-column:1;
    max-width:24ch;
  }

  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close-icon {
    grid-column:2;
    justify-self:end;
    align-self:center;
  }
}

.pi-service-experience-story .pi-se-section-01-default .pi-se-section-close-icon {
  display:block;
  width:clamp(72px,6.2vw,94px);
  aspect-ratio:1;
  background-color:var(--pi-se-live);
  -webkit-mask:url("/img/icons/avion.svg") center / contain no-repeat;
  mask:url("/img/icons/avion.svg") center / contain no-repeat;
  transition:background-color .35s ease, transform var(--pi-se-duration-fast) var(--pi-se-ease);
}

@media (hover:hover) and (pointer:fine) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close:hover .pi-se-section-close-icon {
    transform:translate(4px,-4px);
  }
}

@media (max-width:1023px) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close-icon {
    width:72px;
    margin-top:1.5rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close-icon {
    transition:none;
  }
}


/* ==========================================================
   LOTE 18 · 01 PROBLEMA · TEXTO DE CIERRE MÁS COMPACTO
   ----------------------------------------------------------
   Reduce escala y amplía ligeramente la medida editorial
   para resolver el mensaje en tres líneas en escritorio.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story .pi-se-section-01-default .pi-se-section-close p {
    max-width:31ch;
    font-size:clamp(1.05rem,1.45vw,1.45rem);
    line-height:1.3;
  }
}


/* ==========================================================
   LOTE 19 · 04 PROCESO · INTERPRETACIÓN EDITORIAL DESKTOP
   ----------------------------------------------------------
   Desktop:
   - agrupación conceptual abierta a la izquierda;
   - líneas en color vivo;
   - conexión visual con el bloque derecho.
   Mobile:
   - no se toca; conserva el comportamiento anterior.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story #proceso {
    --pi-proceso-connector-gap:clamp(2.5rem,4vw,4rem);
  }

  .pi-service-experience-story #proceso .pi-se-process-layout {
    position:relative;
    grid-template-columns:minmax(320px, 430px) minmax(0, 1fr);
    gap:clamp(4rem, 8vw, 8rem);
    align-items:center;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps {
    position:relative;
    width:min(100%, 430px);
    padding-right:var(--pi-proceso-connector-gap);
    border-top:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:var(--pi-se-live);
    opacity:.85;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps::after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:1px;
    background:var(--pi-se-live);
    opacity:.85;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    position:relative;
    grid-template-columns:56px minmax(0, 1fr);
    gap:1rem;
    padding:clamp(1.9rem, 3vw, 2.6rem) 0;
    border-bottom:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:var(--pi-se-live);
    opacity:.85;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    max-width:17.5rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step::before {
    color:var(--pi-se-live);
  }

  .pi-service-experience-story #proceso .pi-se-process-connection {
    position:relative;
    top:auto;
    align-self:center;
    padding-top:0;
    padding-left:var(--pi-proceso-connector-gap);
  }

  .pi-service-experience-story #proceso .pi-se-process-connection::before {
    content:"";
    position:absolute;
    top:50%;
    left:calc(var(--pi-proceso-connector-gap) * -1);
    width:calc(var(--pi-proceso-connector-gap) + 12px);
    height:1px;
    background:var(--pi-se-live);
    opacity:.9;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection::after {
    content:"";
    position:absolute;
    top:12%;
    bottom:18%;
    left:calc(var(--pi-proceso-connector-gap) * -1);
    width:1px;
    background:var(--pi-se-live);
    opacity:.45;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection h2 {
    max-width:8.5ch;
    margin-bottom:1.5rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection p {
    max-width:34rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection a {
    text-decoration-color:var(--pi-se-live);
  }
}


/* ==========================================================
   LOTE 20 · 04 PROCESO · CONSTRUCCIÓN LINEAL LIMPIA
   ----------------------------------------------------------
   Simplifica la interpretación editorial de desktop:
   - sin números en Escuchar / Editar / Activar;
   - caja izquierda resuelta con div + borders;
   - conexión lineal limpia hacia el bloque derecho;
   - móvil conserva el sistema anterior.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story #proceso .pi-se-process-layout {
    --pi-proceso-gap: clamp(3rem, 5vw, 5rem);
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
    gap: var(--pi-proceso-gap);
    align-items: center;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps {
    position: relative;
    width: min(100%, 370px);
    padding-right: 0;
    border: 1px solid var(--pi-se-live);
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps::before,
  .pi-service-experience-story #proceso .pi-se-process-steps::after,
  .pi-service-experience-story #proceso .pi-se-process-step::before,
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content: none;
    display: none;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    display: block;
    padding: clamp(1.8rem, 3vw, 2.55rem) clamp(1.9rem, 2.7vw, 2.4rem);
    border: 0;
  }

  .pi-service-experience-story #proceso .pi-se-process-step + .pi-se-process-step {
    border-top: 1px solid var(--pi-se-live);
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    max-width: 17.5rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    margin: 0 0 .8rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step p {
    line-height: 1.56;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection {
    position: relative;
    top: auto;
    align-self: center;
    padding-top: 0;
    padding-left: clamp(2.4rem, 4vw, 3.5rem);
    border-left: 1px solid var(--pi-se-live);
  }

  .pi-service-experience-story #proceso .pi-se-process-connection::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: var(--pi-proceso-gap);
    height: 1px;
    background: var(--pi-se-live);
    opacity: .9;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection::after {
    content: none;
    display: none;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection h2 {
    max-width: 7ch;
    margin-bottom: 1.5rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection p {
    max-width: 32rem;
  }
}


/* ==========================================================
   LOTE 21 · 04 PROCESO · DIVS CONECTADOS
   ----------------------------------------------------------
   Desktop:
   1. Izquierda = div con 3 filas, abierta por la izquierda.
   2. Centro = div con 2 filas; solo border-bottom en la fila superior.
   3. Derecha = div de contenido con border-left ajustado a su propia altura.
   Mobile:
   la columna intermedia se oculta y se conserva el sistema anterior.
   ========================================================== */

.pi-service-experience-story #proceso .pi-se-process-bridge {
  display:none;
}

@media (min-width:1024px) {

  .pi-service-experience-story #proceso .pi-se-process-layout {
    display:grid;
    grid-template-columns:
      minmax(320px, 370px)
      clamp(110px, 9vw, 165px)
      minmax(0, 1fr);
    gap:0;
    align-items:stretch;
  }

  /* --------------------------------------------------------
     COLUMNA 01 · TRES FILAS · ABIERTA A LA IZQUIERDA
     -------------------------------------------------------- */

  .pi-service-experience-story #proceso .pi-se-process-steps {
    display:grid;
    grid-template-rows:repeat(3, minmax(0,1fr));
    width:100%;
    padding:0;
    border-top:1px solid var(--pi-se-live);
    border-right:1px solid var(--pi-se-live);
    border-bottom:1px solid var(--pi-se-live);
    border-left:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-steps::before,
  .pi-service-experience-story #proceso .pi-se-process-steps::after {
    content:none;
    display:none;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    display:flex;
    align-items:center;
    padding:clamp(1.75rem,2.6vw,2.4rem)
            clamp(1.9rem,2.7vw,2.4rem);
    border:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-step + .pi-se-process-step {
    border-top:1px solid var(--pi-se-live);
  }

  /* Los números 01/02/03 desaparecen solo en desktop. */
  .pi-service-experience-story #proceso .pi-se-process-step::before,
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:none;
    display:none;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    width:100%;
    max-width:17.5rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    margin:0 0 .78rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step p {
    line-height:1.56;
  }

  /* --------------------------------------------------------
     COLUMNA 02 · DOS FILAS · CONECTOR HORIZONTAL CENTRAL
     -------------------------------------------------------- */

  .pi-service-experience-story #proceso .pi-se-process-bridge {
    display:grid;
    grid-template-rows:1fr 1fr;
    min-width:0;
    align-self:stretch;
  }

  .pi-service-experience-story #proceso .pi-se-process-bridge-row {
    min-height:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-bridge-row--top {
    border-bottom:1px solid var(--pi-se-live);
  }

  /* --------------------------------------------------------
     COLUMNA 03 · UNA FILA · BORDE SOLO A LA ALTURA DEL COPY
     -------------------------------------------------------- */

  .pi-service-experience-story #proceso .pi-se-process-connection {
    position:relative;
    top:auto;
    align-self:center;
    justify-self:start;
    width:min(100%, 540px);
    padding:
      clamp(.7rem,1.2vw,1.1rem)
      0
      clamp(.7rem,1.2vw,1.1rem)
      clamp(2.5rem,4vw,3.8rem);
    border-left:1px solid var(--pi-se-live);
  }

  .pi-service-experience-story #proceso .pi-se-process-connection::before,
  .pi-service-experience-story #proceso .pi-se-process-connection::after {
    content:none;
    display:none;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection h2 {
    max-width:7.2ch;
    margin:0 0 1.45rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection p {
    max-width:32rem;
  }

  /* Desplazamiento editorial:
     el ancho de la columna central hace visible y más larga la conexión. */
}

@media (max-width:1023px) {
  .pi-service-experience-story #proceso .pi-se-process-bridge {
    display:none !important;
  }
}


/* ==========================================================
   LOTE 22 · 03 PRINCIPIO · GEOMETRÍA FLOTANTE DE FONDO
   ----------------------------------------------------------
   Geometría poligonal grande en la esquina inferior derecha,
   con línea gris clara y estilo propio para no competir con
   el color vivo de la sección.
   ========================================================== */

.pi-service-experience-story #principio {
  overflow:hidden;
}

.pi-service-experience-story #principio .pi-se-shell {
  position:relative;
  z-index:1;
}

.pi-service-experience-story #principio .pi-section-geometry {
  left:auto;
  right:-9vw;
  top:auto;
  bottom:-14svh;
  width:min(46vw, 720px);
  opacity:.42;
  pointer-events:none;
  z-index:0;
}

.pi-service-experience-story #principio .mil-pentagon div {
  border-top-color:#d4d4cf;
}

@media (max-width:1023px) {
  .pi-service-experience-story #principio .pi-section-geometry {
    right:-28vw;
    bottom:-10svh;
    width:min(78vw, 520px);
    opacity:.26;
  }

  .pi-service-experience-story #principio .mil-pentagon div {
    border-top-color:#d8d8d3;
  }
}


/* ==========================================================
   LOTE 23 · 03 PRINCIPIO · GEOMETRÍA TEST NEGRA
   ----------------------------------------------------------
   Prueba visual para verificar presencia de la geometría
   sobre fondo claro con un estilo específico de contraste.
   ========================================================== */

.pi-service-experience-story #principio .pi-section-geometry {
  right:-6vw;
  bottom:-10svh;
  width:min(50vw, 760px);
  opacity:.95;
}

.pi-service-experience-story #principio .mil-pentagon div {
  border-top-color:#111111;
}

@media (max-width:1023px) {
  .pi-service-experience-story #principio .pi-section-geometry {
    right:-18vw;
    bottom:-8svh;
    width:min(82vw, 560px);
    opacity:.7;
  }

  .pi-service-experience-story #principio .mil-pentagon div {
    border-top-color:#111111;
  }
}


/* ==========================================================
   LOTE 24 · GEOMETRÍA LIGHT · SECCIÓN 03
   ----------------------------------------------------------
   Estilo independiente para geometrías sobre fondos claros.
   La geometría queda contenida ENTERA dentro de un marco
   cuadrado y deja de depender del recorte usado en Home.
   ========================================================== */

.pi-service-experience-story #principio {
  overflow:hidden;
}

.pi-service-experience-story #principio .pi-section-geometry--light {
  position:absolute;
  left:auto;
  top:auto;

  /* Referencia visual solicitada */
  right:36vw;
  bottom:-4svh;

  width:min(50vw,760px);
  height:min(50vw,760px);
  aspect-ratio:1 / 1;

  opacity:.55;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}

/* El frame y su pieza interna no deben recortar el dodecaedro. */
.pi-service-experience-story #principio .pi-section-geometry--light,
.pi-service-experience-story #principio .pi-section-geometry--light .mil-animation {
  overflow:visible !important;
}

/* Neutralizamos el posicionamiento heredado de las geometrías de fondo oscuro. */
.pi-service-experience-story #principio .pi-section-geometry--light .mil-animation.mil-position-1 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
}

/* Estilo LIGHT: gris visible sobre #f5f5f2, independiente de Home. */
.pi-service-experience-story #principio .pi-section-geometry--light .mil-pentagon div {
  border-top-color:#b7b8b5 !important;
}

/* El contenido siempre queda por encima. */
.pi-service-experience-story #principio > .pi-se-shell {
  position:relative;
  z-index:2;
}

@media (max-width:1023px) {
  .pi-service-experience-story #principio .pi-section-geometry--light {
    right:-10vw;
    bottom:-2svh;
    width:min(72vw,540px);
    height:min(72vw,540px);
    opacity:.30;
  }
}


/* ==========================================================
   LOTE 25 · 03 PRINCIPIO · GEOMETRÍA LIGHT · POSICIÓN FINAL
   ----------------------------------------------------------
   La geometría funciona como contrapunto visual del titular:
   a su derecha, ligeramente elevada y sin invadir el texto.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story #principio .pi-section-geometry--light {
    left:auto;
    right:clamp(8.5rem, 12vw, 13rem);
    top:clamp(2.75rem, 7svh, 4.75rem);
    bottom:auto;

    width:clamp(220px, 18vw, 300px);
    height:clamp(220px, 18vw, 300px);

    opacity:.55;
    overflow:visible !important;
    z-index:0;
  }

  .pi-service-experience-story #principio .pi-section-geometry--light .mil-animation.mil-position-1 {
    inset:0;
    width:100%;
    height:100%;
  }

  /* Estilo específico de geometría sobre fondo claro. */
  .pi-service-experience-story #principio .pi-section-geometry--light .mil-pentagon div {
    border-top-color:#c9cac6 !important;
  }

  /* El contenido editorial permanece siempre por encima. */
  .pi-service-experience-story #principio > .pi-se-shell {
    position:relative;
    z-index:2;
  }
}

@media (min-width:1024px) and (max-width:1365px) {
  .pi-service-experience-story #principio .pi-section-geometry--light {
    right:clamp(4rem, 7vw, 6rem);
    top:clamp(2.75rem, 6svh, 4rem);
    width:clamp(205px, 18vw, 255px);
    height:clamp(205px, 18vw, 255px);
  }
}
/* ==========================================================
   LOTE 27 · 03 PRINCIPIO · GEOMETRÍA LIGHT · AJUSTE RESPONSIVE
   ----------------------------------------------------------
   Ajuste final:
   - más cerca del titular;
   - ligeramente más centrada y más abajo;
   - mayor presencia visual;
   - posiciones específicas por ancho para evitar solapamientos.
   ========================================================== */


/* ==========================================================
   PRESENCIA VISUAL COMÚN
   ========================================================== */

.pi-service-experience-story #principio .pi-section-geometry--light {
  opacity: .88;
}

.pi-service-experience-story
#principio
.pi-section-geometry--light
.mil-pentagon div {
  border-top-color: #b5b6b1 !important;
}


/* ==========================================================
   ESCRITORIO GRANDE · 1600 PX O MÁS
   ========================================================== */

@media (min-width: 1600px) {

  .pi-service-experience-story
  #principio
  .pi-section-geometry--light {

    left: auto;

    /* MÁS VALOR = MÁS HACIA LA IZQUIERDA */
    right: clamp(17rem, 19vw, 23rem);

    /* MÁS VALOR = MÁS HACIA ABAJO */
    top: clamp(4.75rem, 9svh, 6.5rem);

    bottom: auto;

    /* TAMAÑO */
    width: clamp(250px, 16vw, 300px);
    height: clamp(250px, 16vw, 300px);
  }

}


/* ==========================================================
   ESCRITORIO ESTÁNDAR · 1366–1599 PX
   ========================================================== */

@media (min-width: 1366px) and (max-width: 1599px) {

  .pi-service-experience-story
  #principio
  .pi-section-geometry--light {

    left: auto;

    right: clamp(11rem, 14vw, 14rem);

    top: clamp(4.5rem, 8.5svh, 6rem);

    bottom: auto;

    width: clamp(235px, 17vw, 280px);
    height: clamp(235px, 17vw, 280px);
  }

}


/* ==========================================================
   PORTÁTIL / ESCRITORIO CONTENIDO · 1024–1365 PX
   ========================================================== */

@media (min-width: 1024px) and (max-width: 1365px) {

  .pi-service-experience-story
  #principio
  .pi-section-geometry--light {

    left: auto;

    right: clamp(7rem, 11vw, 9rem);

    top: clamp(4.2rem, 8svh, 5.5rem);

    bottom: auto;

    width: clamp(215px, 18vw, 255px);
    height: clamp(215px, 18vw, 255px);

    opacity: .66;
  }

}


/* ==========================================================
   TABLET · 768–1023 PX
   ========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  .pi-service-experience-story
  #principio
  .pi-section-geometry--light {

    left: auto;

    right: clamp(2.5rem, 6vw, 4rem);

    top: clamp(4rem, 8svh, 5.5rem);

    bottom: auto;

    width: clamp(180px, 23vw, 220px);
    height: clamp(180px, 23vw, 220px);

    opacity: .48;
  }

}


/* ==========================================================
   MÓVIL · HASTA 767 PX
   ========================================================== */

@media (max-width: 767px) {

  .pi-service-experience-story
  #principio
  .pi-section-geometry--light {

    left: auto;

    right: clamp(.75rem, 4vw, 1.5rem);

    top: clamp(5rem, 12vw, 6.5rem);

    bottom: auto;

    width: clamp(135px, 38vw, 175px);
    height: clamp(135px, 38vw, 175px);

    opacity: .28;
  }

} 

/* ==========================================================
   LOTE 30 · 01 PROBLEMA · SLIDER EDITORIAL SIMPLE
   ----------------------------------------------------------
   Estructura exacta:
   1) fila superior con flechas a la derecha;
   2) línea horizontal divisoria;
   3) contenido inferior en dos columnas:
      texto izquierda + icono derecha.
   ========================================================== */

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close--slider {
  display:block;
  margin-top:clamp(2rem,5svh,4rem);
  padding-top:0;
  border-top:0;
}

/* 01 · FILA SUPERIOR · SOLO NAVEGACIÓN */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-nav {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.55rem;
  min-height:30px;
  padding:0 .35rem .55rem 0;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-nav-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(17,17,17,.48);
  font:inherit;
  font-size:1.55rem;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  transition:
    color var(--pi-se-duration-fast) ease,
    transform var(--pi-se-duration-fast) ease;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-nav-btn:hover,
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-nav-btn:focus-visible {
  color:var(--pi-se-live);
  transform:translateY(-1px);
  outline:none;
}

/* 02 · DIVISOR */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-divider {
  width:100%;
  height:1px;
  background:rgba(17,17,17,.18);
}

/* 03 · ÁREA QUE CAMBIA */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-track {
  position:relative;
  padding-top:clamp(1rem,2.2svh,1.75rem);
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-slide {
  display:none;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(3rem,8vw,8rem);
  align-items:center;
  min-height:clamp(118px,15svh,160px);
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-slide.is-active {
  display:grid;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-slide[hidden] {
  display:none !important;
}

/* Texto: izquierda */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close--slider
.pi-se-close-slide p {
  grid-column:1;
  justify-self:start;
  max-width:31ch;
  margin:0;
  color:var(--pi-se-ink);
  font-size:clamp(1.05rem,1.45vw,1.45rem);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.3;
}

/* Icono: derecha */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close--slider
.pi-se-close-slide
.pi-se-section-close-icon {
  grid-column:2;
  justify-self:end;
  align-self:center;
  width:clamp(72px,6.2vw,94px);
  margin:0;
  aspect-ratio:1;
  background-color:var(--pi-se-live);
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane {
  -webkit-mask:url("/img/icons/avion.svg") center / contain no-repeat;
  mask:url("/img/icons/avion.svg") center / contain no-repeat;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--swan {
  -webkit-mask:url("/img/icons/cisne2.svg") center / contain no-repeat;
  mask:url("/img/icons/cisne2.svg") center / contain no-repeat;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--pinwheel {
  -webkit-mask:url("/img/icons/molinillo.svg") center / contain no-repeat;
  mask:url("/img/icons/molinillo.svg") center / contain no-repeat;
}

/* Mantiene el pequeño gesto de los iconos que ya tenía la sección. */
@media (hover:hover) and (pointer:fine) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon {
    transform:translate(4px,-4px);
  }
}

/* TABLET / MÓVIL */
@media (max-width:1023px) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider {
    margin-top:3rem;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-close-slide {
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(1.25rem,5vw,3rem);
    min-height:120px;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider
  .pi-se-close-slide p {
    grid-column:1;
    max-width:30ch;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider
  .pi-se-close-slide
  .pi-se-section-close-icon {
    grid-column:2;
    justify-self:end;
    width:72px;
    margin:0;
  }
}

@media (max-width:560px) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-close-slide {
    grid-template-columns:minmax(0,1fr) 64px;
    gap:1rem;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider
  .pi-se-close-slide p {
    font-size:1rem;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider
  .pi-se-close-slide
  .pi-se-section-close-icon {
    width:58px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-close-nav-btn,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider
  .pi-se-section-close-icon {
    transition:none;
  }
}
/* 03 · MOLINILLO · TEXTO EN TRES LÍNEAS EDITORIALES */
@media (min-width: 1024px) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-close-slide:nth-child(3) p {
    max-width: none;
    width: max-content;
    white-space: nowrap;
  }
}


/* ==========================================================
   LOTE 34 · 02 SISTEMA · CTA EDITORIAL SUTIL
   ----------------------------------------------------------
   CTA integrado dentro de la card "Aplicaciones".
   Mantiene la geometría de la retícula y se apoya en el borde
   inferior de la card para alinearse con el cierre de la fila.
   ========================================================== */

.pi-service-experience-story #sistema .pi-se-system-item--applications {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pi-service-experience-story #sistema .pi-se-system-item--applications > p {
  margin-bottom:0;
}

.pi-service-experience-story #sistema .pi-se-system-subtle-cta {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-top:auto;
  padding:.72rem .85rem;
  
  color:#fff;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:
    background var(--pi-se-duration-fast) ease,
    color var(--pi-se-duration-fast) ease,
    transform var(--pi-se-duration-fast) var(--pi-se-ease);
}

.pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow {
  flex:0 0 auto;
  color:var(--pi-se-live);
  font-size:.95rem;
  line-height:1;
  transition:transform var(--pi-se-duration-fast) var(--pi-se-ease);
}

@media (hover:hover) and (pointer:fine) {
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:hover,
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:focus-visible {
    background:#050505;
    color:#fff;
    transform:translateY(-1px);
    outline:none;
  }

  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:hover .pi-se-system-subtle-cta__arrow,
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:focus-visible .pi-se-system-subtle-cta__arrow {
    transform:translate(2px,2px);
  }
}

@media (max-width:1023px) {
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta {
    margin-top:1.5rem;
    white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta,
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow {
    transition:none;
  }
}


/* ==========================================================
   LOTE 36 · 02 SISTEMA · MICROETIQUETAS EDITORIALES
   ----------------------------------------------------------
   Baja la jerarquía visual de las etiquetas internas:
   Arquitectura narrativa · Identidad verbal · Sistema de
   contenido · Aplicaciones.
   ========================================================== */

.pi-service-experience-story #sistema .pi-se-system-item .pi-eyebrow {
  display:block;
  margin:0;
  color:rgba(255,255,255,.52);
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.3;
  text-transform:uppercase;
}


/* ==========================================================
   LOTE 37 · 01 PROBLEMA · TITULAR EN MÁXIMO 4 LÍNEAS
   ----------------------------------------------------------
   Ajuste exclusivo de desktop:
   - damos más ancho real a la columna del H2;
   - reducimos el gap entre ambas columnas;
   - mantenemos intacta la escala tipográfica del titular;
   - la columna de copy sigue siendo ligeramente mayor.
   Tablet y móvil conservan su comportamiento actual.
   ========================================================== */

@media (min-width:1024px) {
  .pi-service-experience-story
  #problema
  .pi-se-editorial-split {
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(3rem,4.5vw,5rem);
  }

  .pi-service-experience-story
  #problema
  .pi-se-editorial-split h2 {
    max-width:15ch;
    text-wrap:balance;
  }
}


/* ==========================================================
   LOTE 39 · 03 PRINCIPIO · TRES FILAS + FADE ESTABLE
   ----------------------------------------------------------
   Estructura visual fija:
   1) Una historia de marca útil
   2) no adorna la realidad:
   3) concepto rotatorio

   La tercera fila reserva siempre el mismo espacio para evitar
   cualquier salto de composición entre palabras.
   ========================================================== */

.pi-service-experience-story #principio .pi-se-principle-quote {
  max-width:none;
  width:max-content;
  margin:0;
  font-weight:300;
}

.pi-service-experience-story #principio .pi-se-principle-premise {
  display:block;
  font-weight:300;
  white-space:nowrap;
}

.pi-service-experience-story #principio .pi-se-principle-focus {
  display:block;
  width:9.25em;
  min-height:1em;
  margin-top:.12em;
  font-weight:600;
  white-space:nowrap;
  opacity:1;
  transition:opacity 360ms cubic-bezier(.2,.65,.25,1);
}

.pi-service-experience-story #principio .pi-se-principle-focus.is-fading {
  opacity:0;
}

@media (max-width:1023px) {
  .pi-service-experience-story #principio .pi-se-principle-quote {
    width:100%;
    max-width:16ch;
  }

  .pi-service-experience-story #principio .pi-se-principle-premise {
    white-space:normal;
  }

  .pi-service-experience-story #principio .pi-se-principle-focus {
    width:100%;
    white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #principio .pi-se-principle-focus {
    transition:none;
  }
}


/* ==========================================================
   LOTE 41 · 04 PROCESO · CONECTIVIDAD + HOVER SEMÁNTICO
   ----------------------------------------------------------
   Desktop grande:
   - desplaza el bloque derecho hacia la derecha;
   - alarga el puente central;
   - da más respiración real a los tres bloques de proceso.

   Interacción:
   - títulos en reposo: blanco suavizado;
   - hover en Escuchar / Editar / Activar:
     activa ese título + "Una disciplina conectada";
   - hover en "Una disciplina conectada":
     activa los tres títulos de la izquierda + el título derecho.
   ========================================================== */

/* Títulos en reposo: menos dureza que el blanco puro. */
.pi-service-experience-story #proceso .pi-se-process-step h3,
.pi-service-experience-story #proceso .pi-se-process-connection h2 {
  color:rgba(255,255,255,.72);
  transition:color 220ms ease;
}

/* DESKTOP CON RAIL · abrimos la composición horizontal */
@media (min-width:1366px) {
  .pi-service-experience-story #proceso .pi-se-process-layout {
    --pi-proceso-expansion:clamp(130px,10vw,190px);
    width:calc(100% + var(--pi-proceso-expansion));
    max-width:calc(100% + var(--pi-proceso-expansion));
    grid-template-columns:
      minmax(360px,400px)
      clamp(220px,14vw,290px)
      minmax(0,1fr);
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    max-width:21rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-connection {
    width:min(100%,540px);
  }
}

/* PORTÁTIL / DESKTOP CONTENIDO · mejora leve sin forzar overflow */
@media (min-width:1024px) and (max-width:1365px) {
  .pi-service-experience-story #proceso .pi-se-process-layout {
    grid-template-columns:
      minmax(330px,390px)
      clamp(130px,13vw,180px)
      minmax(0,1fr);
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    max-width:20rem;
  }
}

/* HOVER SEMÁNTICO · sin JavaScript */
@media (hover:hover) and (pointer:fine) {
  /* Paso izquierdo activo */
  .pi-service-experience-story #proceso .pi-se-process-step:hover h3 {
    color:var(--pi-se-white);
  }

  /* Cualquier paso izquierdo activa también la conclusión derecha */
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-step:hover)
  .pi-se-process-connection h2 {
    color:var(--pi-se-white);
  }

  /* Hover sobre la conclusión derecha */
  .pi-service-experience-story #proceso .pi-se-process-connection:hover h2 {
    color:var(--pi-se-white);
  }

  /* La conclusión derecha activa los tres pasos */
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step h3 {
    color:var(--pi-se-white);
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-step h3,
  .pi-service-experience-story #proceso .pi-se-process-connection h2 {
    transition:none;
  }
}


/* ==========================================================
   LOTE 42 · 05 FAQ · HOVER EDITORIAL + PLUS / MINUS
   ----------------------------------------------------------
   - Hover sutil solo sobre preguntas cerradas.
   - Fondo blanco roto ligeramente más oscuro, sin mover texto.
   - El "+" rota lentamente al recorrer una pregunta cerrada.
   - La pregunta abierta muestra "−" en lugar de una "×".
   ========================================================== */

.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq summary {
  position:relative;
  margin-inline:0;
  padding-inline:20px;
  transition:
    background-color 260ms ease,
    color 220ms ease;
}

/* Hover premium únicamente cuando el acordeón está cerrado. */
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details:not([open]) summary:hover,
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details:not([open]) summary:focus-visible {
  background-color:rgba(17,17,17,.035);
}

/* El símbolo mantiene el color vivo y gana un gesto lento de rotación. */
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq summary::after {
  transform:rotate(0deg);
  transform-origin:center;
  transition:
    transform 480ms cubic-bezier(.2,.7,.2,1),
    color 260ms ease;
}

.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details:not([open]) summary:hover::after,
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details:not([open]) summary:focus-visible::after {
  transform:rotate(180deg);
}

/* Abierto = menos. Sin giro y sin aspecto de X. */
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details[open] summary::after {
  content:"−";
  transform:none;
}

/* El abierto permanece limpio incluso si el cursor sigue encima. */
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details[open] summary:hover,
.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details[open] summary:focus-visible {
  background-color:transparent;
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  #conexiones.pi-se-faq-master
  .pi-se-faq summary,
  .pi-service-experience-story
  #conexiones.pi-se-faq-master
  .pi-se-faq summary::after {
    transition:none;
  }

  .pi-service-experience-story
  #conexiones.pi-se-faq-master
  .pi-se-faq details:not([open]) summary:hover::after,
  .pi-service-experience-story
  #conexiones.pi-se-faq-master
  .pi-se-faq details:not([open]) summary:focus-visible::after {
    transform:none;
  }
}


/* ==========================================================
   LOTE 44 · 05 FAQ · CONTENIDO ALINEADO CON CABECERA
   ----------------------------------------------------------
   El contenido desplegado hereda el mismo aire horizontal
   que el summary para mantener una única línea editorial.
   ========================================================== */

.pi-service-experience-story
#conexiones.pi-se-faq-master
.pi-se-faq details > div {
  padding:0 20px 24px;
}


/* ==========================================================
   LOTE 45 · 04 PROCESO · REVELADO DE COPY + BLOQUE COMPACTO
   ----------------------------------------------------------
   Mantiene la conectividad y el hover semántico del Lote 41.

   Desktop con hover:
   - el copy de Escuchar / Editar / Activar permanece oculto;
   - cada fila revela únicamente su propio copy al hacer hover;
   - al hacer hover en "Una disciplina conectada" se revelan
     simultáneamente los tres copies de la izquierda;
   - "+" editorial en la esquina inferior derecha de cada fila;
   - el "+" desaparece cuando la fila queda activa;
   - títulos ligeramente más pequeños;
   - bloque izquierdo más compacto sin alterar el puente central.

   Tablet / móvil:
   - el contenido permanece visible; no depende de hover.
   ========================================================== */

@media (min-width:1024px) and (hover:hover) and (pointer:fine) {

  /* 01 · BLOQUE IZQUIERDO MÁS COMPACTO */
  .pi-service-experience-story #proceso .pi-se-process-steps {
    grid-template-rows:repeat(3, clamp(118px, 13svh, 138px));
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    position:relative;
    align-items:flex-start;
    min-height:0;
    padding:
      clamp(1.1rem, 1.55vw, 1.4rem)
      clamp(1.55rem, 2.1vw, 2rem);
    overflow:hidden;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    position:relative;
    width:100%;
    max-width:21rem;
  }

  /* 02 · TÍTULOS UN POCO MÁS CONTENIDOS */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    margin:0;
    font-size:clamp(1.45rem, 1.85vw, 2rem);
    line-height:1.06;
  }

  /* 03 · COPY OCULTO SIN MOVER LA GEOMETRÍA DE LA FILA */
  .pi-service-experience-story #proceso .pi-se-process-step p {
    margin:.7rem 0 0;
    opacity:0;
    transform:translateY(5px);
    pointer-events:none;
    transition:
      opacity 240ms ease,
      transform 300ms var(--pi-se-ease);
  }

  /* Cada fila revela únicamente su propio contenido. */
  .pi-service-experience-story #proceso .pi-se-process-step:hover p {
    opacity:1;
    transform:translateY(0);
  }

  /* El bloque derecho activa simultáneamente los tres copies. */
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step p {
    opacity:1;
    transform:translateY(0);
  }

  /* 04 · INDICIO EDITORIAL "+" */
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:"+";
    position:absolute;
    right:clamp(.9rem, 1.35vw, 1.25rem);
    bottom:clamp(.7rem, 1vw, .95rem);
    display:block;
    width:auto;
    height:auto;
    background:none;
    color:var(--pi-se-live);
    font-size:.95rem;
    font-weight:400;
    line-height:1;
    opacity:.72;
    transform:none;
    transition:
      opacity 180ms ease,
      transform 220ms var(--pi-se-ease);
    pointer-events:none;
  }

  .pi-service-experience-story #proceso .pi-se-process-step:hover::after,
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step::after {
    opacity:0;
    transform:scale(.78);
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-step p,
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    transition:none;
  }
}


/* ==========================================================
   LOTE 46 · 04 PROCESO · RETÍCULA EQUILIBRADA + PREFIJO "+ ·"
   ----------------------------------------------------------
   Refinamiento sobre Lote 45:
   - las tres filas tienen exactamente la misma altura y ancho;
   - el bloque gana un poco de aire respecto al ajuste anterior;
   - "+" pasa de la esquina al propio título como "+ · Escuchar";
   - el prefijo conserva el tamaño del título;
   - al activar una fila, el prefijo desaparece sin mover el texto;
   - hover sobre el bloque derecho activa los tres pasos;
   - se mantiene el revelado de copy y la conectividad del Lote 41.
   ========================================================== */

@media (min-width:1024px) and (hover:hover) and (pointer:fine) {

  /* 01 · TRES FILAS GEOMÉTRICAMENTE IDÉNTICAS */
  .pi-service-experience-story #proceso .pi-se-process-steps {
    grid-template-rows:repeat(3, clamp(145px, 14svh, 154px));
    align-self:center;
    align-content:start;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    width:100%;
    height:100%;
    min-height:0;
    align-items:flex-start;
    padding:
      clamp(1.3rem, 1.75vw, 1.55rem)
      clamp(1.55rem, 2.1vw, 2rem);
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    width:100%;
    height:100%;
    max-width:21rem;
  }

  /* 02 · TÍTULO + PREFIJO EDITORIAL */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    display:flex;
    align-items:baseline;
    margin:0;
    font-size:clamp(1.45rem, 1.85vw, 2rem);
    line-height:1.08;
  }

  .pi-service-experience-story #proceso .pi-se-process-plus {
    display:inline-block;
    flex:0 0 auto;
    min-width:1.55em;
    margin-right:.28em;
    color:var(--pi-se-live);
    font:inherit;
    font-weight:400;
    line-height:inherit;
    opacity:.82;
    transition:opacity 180ms ease;
  }

  /* El prefijo desaparece sin desplazar el título. */
  .pi-service-experience-story #proceso .pi-se-process-step:hover .pi-se-process-plus,
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step .pi-se-process-plus {
    opacity:0;
  }

  /* 03 · COPY: UN POCO MÁS DE AIRE CUANDO APARECE */
  .pi-service-experience-story #proceso .pi-se-process-step p {
    margin:.82rem 0 0;
    line-height:1.56;
  }

  /* 04 · ANULAMOS EL "+" ANTIGUO DE LA ESQUINA */
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:none;
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-plus {
    transition:none;
  }
}


/* ==========================================================
   LOTE 47 · 04 PROCESO · REVELADO PROGRESIVO + MÁS AIRE
   ----------------------------------------------------------
   Ajuste final de interacción desktop:
   - las 3 filas conservan exactamente la misma altura;
   - recuperan bastante más aire vertical;
   - título centrado verticalmente en reposo;
   - al activar una fila, el título sube suavemente;
   - el copy aparece progresivamente mientras sube el título;
   - "+ ·" se muestra delante de cada título en reposo;
   - "+ ·" desaparece al activar, sin mover horizontalmente el título;
   - hover en "Una disciplina conectada" reproduce el gesto
     simultáneamente en las tres filas.
   ========================================================== */

@media (min-width:1024px) and (hover:hover) and (pointer:fine) {

  /* Neutralizamos el span de Lote 46 si el HTML que está en servidor lo contiene.
     El prefijo se pinta ahora por CSS para no depender de una versión concreta del HTML. */
  .pi-service-experience-story #proceso .pi-se-process-plus {
    display:none !important;
  }

  /* 01 · RETÍCULA: TRES FILAS EXACTAMENTE IGUALES Y CON MÁS AIRE */
  .pi-service-experience-story #proceso .pi-se-process-steps {
    grid-template-rows:repeat(3, clamp(158px, 15.5svh, 170px));
    align-self:center;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    padding:
      clamp(1.35rem, 1.7vw, 1.6rem)
      clamp(1.65rem, 2.15vw, 2.05rem);
    overflow:hidden;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    position:relative;
    width:100%;
    height:100%;
    max-width:21rem;
  }

  /* 02 · TÍTULO CENTRADO EN REPOSO */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    position:absolute;
    top:50%;
    left:0;
    display:flex;
    align-items:baseline;
    width:100%;
    margin:0;
    font-size:clamp(1.5rem, 1.95vw, 2.08rem);
    line-height:1.08;
    transform:translateY(-50%);
    transition:
      top 440ms cubic-bezier(.2,.72,.2,1),
      transform 440ms cubic-bezier(.2,.72,.2,1),
      color 220ms ease;
    will-change:top,transform;
  }

  /* "+ · Escuchar / Editar / Activar" */
  .pi-service-experience-story #proceso .pi-se-process-step h3::before {
    content:"+ ·";
    display:inline-block;
    flex:0 0 auto;
    margin-right:.5em;
    color:var(--pi-se-live);
    font:inherit;
    font-weight:400;
    line-height:inherit;
    opacity:.9;
    transition:opacity 220ms ease;
  }

  /* 03 · COPY OCULTO, PERO YA POSICIONADO EN SU LUGAR FINAL */
  .pi-service-experience-story #proceso .pi-se-process-step p {
    position:absolute;
    top:4.45rem;
    left:0;
    width:100%;
    max-width:31ch;
    margin:0;
    line-height:1.58;
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:
      opacity 420ms ease 70ms,
      transform 460ms cubic-bezier(.2,.72,.2,1) 40ms;
    will-change:opacity,transform;
  }

  /* 04 · ACTIVACIÓN DE UNA FILA */
  .pi-service-experience-story #proceso .pi-se-process-step:hover h3 {
    top:1.35rem;
    transform:translateY(0);
  }

  .pi-service-experience-story #proceso .pi-se-process-step:hover h3::before {
    opacity:0;
  }

  .pi-service-experience-story #proceso .pi-se-process-step:hover p {
    opacity:1;
    transform:translateY(0);
  }

  /* 05 · ACTIVACIÓN DESDE "UNA DISCIPLINA CONECTADA" */
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step h3 {
    top:1.35rem;
    transform:translateY(0);
  }

  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step h3::before {
    opacity:0;
  }

  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step p {
    opacity:1;
    transform:translateY(0);
  }

  /* 06 · EL "+" ANTIGUO DE ESQUINA QUEDA DEFINITIVAMENTE ANULADO */
  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:none !important;
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-step h3,
  .pi-service-experience-story #proceso .pi-se-process-step h3::before,
  .pi-service-experience-story #proceso .pi-se-process-step p {
    transition:none;
  }
}


/* ==========================================================
   LOTE 48 · 04 PROCESO · PLUS LIMPIO + REVELADO CENTRADO
   ----------------------------------------------------------
   Refinamiento sobre Lote 47:
   - elimina el punto intermedio: "+ Escuchar / + Editar / + Activar";
   - el "+" permanece visible también durante el hover;
   - títulos más pequeños y con menos peso;
   - filas algo más altas y columna izquierda más ancha;
   - el copy se revela expandiendo el grupo desde el centro;
   - el título sube de forma natural mientras aparece el texto;
   - el conjunto activo conserva aire equivalente arriba y abajo;
   - hover en "Una disciplina conectada" activa las tres filas.
   ========================================================== */

@media (min-width:1024px) and (hover:hover) and (pointer:fine) {

  /* 01 · MÁS ANCHO Y MÁS AIRE */
  .pi-service-experience-story #proceso .pi-se-process-steps {
    grid-template-rows:repeat(3, clamp(184px, 18svh, 198px));
    align-self:center;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    width:100%;
    height:100%;
    min-height:0;
    padding:
      clamp(1.45rem, 1.9vw, 1.75rem)
      clamp(1.7rem, 2.2vw, 2.1rem);
    overflow:hidden;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    display:flex;
    width:100%;
    height:100%;
    max-width:24rem;
    flex-direction:column;
    justify-content:center;
  }

  /* 02 · TÍTULOS MÁS EDITORIALES */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    position:static;
    display:flex;
    align-items:baseline;
    width:100%;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:clamp(1.32rem, 1.65vw, 1.82rem);
    font-weight:400;
    letter-spacing:-.01em;
    line-height:1.1;
    transform:none;
    transition:
      color 220ms ease,
      transform 460ms cubic-bezier(.2,.72,.2,1);
  }

  /* El prefijo real del HTML del Lote 46 sigue neutralizado. */
  .pi-service-experience-story #proceso .pi-se-process-plus {
    display:none !important;
  }

  /* "+" limpio, sin punto, y siempre visible. */
  .pi-service-experience-story #proceso .pi-se-process-step h3::before {
    content:"+";
    display:inline-block;
    flex:0 0 auto;
    margin-right:.52em;
    color:var(--pi-se-live);
    font:inherit;
    font-weight:400;
    line-height:inherit;
    opacity:.9;
    transition:color 220ms ease;
  }

  /* 03 · COPY: COLAPSADO EN REPOSO, REVELADO PROGRESIVO */
  .pi-service-experience-story #proceso .pi-se-process-step p {
    position:static;
    width:100%;
    max-width:34ch;
    max-height:0;
    margin:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    line-height:1.58;
    transition:
      max-height 520ms cubic-bezier(.2,.72,.2,1),
      margin-top 460ms cubic-bezier(.2,.72,.2,1),
      opacity 360ms ease 90ms,
      transform 460ms cubic-bezier(.2,.72,.2,1);
  }

  /* 04 · FILA ACTIVA:
     al crecer el copy, el grupo completo sigue centrado en la fila,
     por eso el título sube suavemente y queda aire arriba/abajo. */
  .pi-service-experience-story #proceso .pi-se-process-step:hover h3 {
    color:var(--pi-se-white);
  }

  .pi-service-experience-story #proceso .pi-se-process-step:hover p {
    max-height:6.2em;
    margin-top:.9rem;
    opacity:1;
    transform:translateY(0);
  }

  /* 05 · ACTIVACIÓN DESDE EL BLOQUE DERECHO */
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step h3 {
    color:var(--pi-se-white);
  }

  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step p {
    max-height:6.2em;
    margin-top:.9rem;
    opacity:1;
    transform:translateY(0);
  }

  /* 06 · MÁS ANCHURA REAL EN LA COLUMNA IZQUIERDA */
  .pi-service-experience-story #proceso .pi-se-process-layout {
    grid-template-columns:
      minmax(410px, 440px)
      clamp(205px, 13vw, 275px)
      minmax(0, 1fr);
  }

  .pi-service-experience-story #proceso .pi-se-process-step::after {
    content:none !important;
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-step h3,
  .pi-service-experience-story #proceso .pi-se-process-step h3::before,
  .pi-service-experience-story #proceso .pi-se-process-step p {
    transition:none;
  }
}


/* ==========================================================
   LOTE 49 · 04 PROCESO · PLUS POSTERIOR + REVELADO SUSURRO
   ----------------------------------------------------------
   Refinamiento sobre Lote 48:
   - lectura: "Escuchar + / Editar + / Activar +";
   - el título recupera su eje natural con el copy;
   - "+" más pequeño y centrado verticalmente;
   - "+" permanece visible durante el hover;
   - en reposo usa color vivo; activo pasa a blanco;
   - revelado algo más lento, continuo y suave;
   - no cambia la altura final ni la posición final del contenido.
   ========================================================== */

@media (min-width:1024px) and (hover:hover) and (pointer:fine) {

  /* 01 · QUITAMOS EL PLUS DELANTE */
  .pi-service-experience-story #proceso .pi-se-process-step h3::before {
    content:none;
    display:none;
  }

  /* 02 · TÍTULO + PLUS AL FINAL */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    align-items:center;
  }

  .pi-service-experience-story #proceso .pi-se-process-step h3::after {
    content:"+";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:.46em;
    color:var(--pi-se-live);
    font-size:.72em;
    font-weight:400;
    line-height:1;
    opacity:.92;
    transform:translateY(.02em);
    transition:
      color 380ms ease,
      opacity 380ms ease;
  }

  /* El plus permanece durante la activación y pasa a blanco. */
  .pi-service-experience-story #proceso .pi-se-process-step:hover h3::after,
  .pi-service-experience-story
  #proceso
  .pi-se-process-layout:has(.pi-se-process-connection:hover)
  .pi-se-process-step h3::after {
    color:var(--pi-se-white);
    opacity:1;
  }

  /* 03 · REVELADO MÁS FLUIDO, COMO UN SUSURRO */
  .pi-service-experience-story #proceso .pi-se-process-step p {
    transform:translateY(10px);
    transition:
      max-height 720ms cubic-bezier(.16,1,.3,1),
      margin-top 680ms cubic-bezier(.16,1,.3,1),
      opacity 520ms ease 110ms,
      transform 680ms cubic-bezier(.16,1,.3,1) 40ms;
  }

  /* El color del título acompaña el mismo ritmo, algo más suave. */
  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    transition:
      color 360ms ease,
      transform 680ms cubic-bezier(.16,1,.3,1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story #proceso .pi-se-process-step h3::after {
    transition:none;
  }
}


/* ==========================================================
   LOTE 50 · 01 PROBLEMA · MICROANIMACIONES ORIGAMI
   ----------------------------------------------------------
   Tres comportamientos con significado propio:
   - Avión: se aleja en 4 fotogramas, anclado por la punta superior derecha.
   - Cisne: giro horizontal 3D por fotogramas, mostrando "la otra cara".
   - Molinillo: arranque progresivo por efecto de aire y giro continuo.
   ========================================================== */

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close--slider
.pi-se-section-close-icon {
  transform-origin:center;
  will-change:transform;
}

/* El avión reduce su escala desde la esquina superior derecha para que
   la punta permanezca visualmente anclada mientras se aleja. */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane {
  transform-origin:100% 0%;
}

/* El cisne necesita perspectiva para que el paso por 90° se lea como
   un perfil casi lineal antes de aparecer por la otra cara. */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-close-slide:has(.pi-se-section-close-icon--swan) {
  perspective:900px;
}

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--swan {
  transform-style:preserve-3d;
  backface-visibility:visible;
}

/* ==========================================================
   AVIÓN · ALEJAMIENTO EN 4 FOTOGRAMAS
   ========================================================== */

@keyframes pi-se-plane-depart {
  0% {
    transform:translate3d(0,0,0) scale(1);
  }
  25% {
    transform:translate3d(0,-3px,0) scale(.90);
  }
  50% {
    transform:translate3d(0,-6px,0) scale(.80);
  }
  75% {
    transform:translate3d(0,-9px,0) scale(.70);
  }
  100% {
    transform:translate3d(0,-12px,0) scale(.62);
  }
}

/* ==========================================================
   CISNE · GIRO POR FOTOGRAMAS
   ========================================================== */

@keyframes pi-se-swan-turn {
  0%   { transform:rotateY(0deg); }
  16%  { transform:rotateY(30deg); }
  33%  { transform:rotateY(60deg); }
  50%  { transform:rotateY(90deg); }
  66%  { transform:rotateY(120deg); }
  83%  { transform:rotateY(150deg); }
  100% { transform:rotateY(180deg); }
}

/* ==========================================================
   MOLINILLO · ARRANQUE + GIRO CONTINUO
   ========================================================== */

@keyframes pi-se-pinwheel-start {
  0%   { transform:rotate(0deg); }
  28%  { transform:rotate(28deg); }
  52%  { transform:rotate(78deg); }
  74%  { transform:rotate(165deg); }
  100% { transform:rotate(360deg); }
}

@keyframes pi-se-pinwheel-spin {
  from { transform:rotate(360deg); }
  to   { transform:rotate(720deg); }
}

@media (hover:hover) and (pointer:fine) {

  /* Neutralizamos el gesto genérico anterior para que cada símbolo
     tenga ahora su propio comportamiento. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon {
    transform:none;
  }

  /* Avión: secuencia seca tipo pequeños fotogramas, sin fade. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane {
    animation:pi-se-plane-depart 560ms steps(4,end) forwards;
  }

  /* Cisne: vuelta horizontal en 6 pasos. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan {
    animation:pi-se-swan-turn 760ms steps(6,end) forwards;
  }

  /* Molinillo:
     1) coge aire de forma progresiva;
     2) después mantiene una velocidad continua moderada. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-start 920ms cubic-bezier(.18,.55,.18,1) 0s 1 forwards,
      pi-se-pinwheel-spin 1.55s linear 920ms infinite;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   LOTE 51 · 01 PROBLEMA · AVIÓN ANCLADO + MOLINILLO CON AIRE
   ----------------------------------------------------------
   Refinamiento sobre Lote 50:
   - Avión: la punta superior derecha queda inmóvil y todo el
     símbolo se reduce hacia ella, evitando el efecto "botón".
   - Molinillo: giro totalmente continuo, acelera de forma
     progresiva, completa 3 vueltas y desacelera hasta pararse.
   - Cisne: mantiene el comportamiento aprobado del Lote 50.
   ========================================================== */

/* ==========================================================
   AVIÓN · ANCLA VISUAL EN LA PUNTA REAL DEL SVG
   viewBox 128×128 · punta aprox. x=117 / y=17.2
   ========================================================== */

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane {
  transform-box:border-box;
  transform-origin:91.4% 13.4%;
}

@keyframes pi-se-plane-depart-anchored {
  0%   { transform:scale(1); }
  25%  { transform:scale(.88); }
  50%  { transform:scale(.76); }
  75%  { transform:scale(.64); }
  100% { transform:scale(.52); }
}

/* ==========================================================
   MOLINILLO · SOPLO CONTINUO
   Una sola trayectoria: arranca lento, acelera, mantiene la
   sensación de aire y desacelera hasta detenerse tras 3 vueltas.
   ========================================================== */

@keyframes pi-se-pinwheel-gust {
  from { transform:rotate(0deg); }
  to   { transform:rotate(1080deg); }
}

@media (hover:hover) and (pointer:fine) {

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-depart-anchored
      620ms
      steps(4,end)
      forwards;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-gust
      3.6s
      cubic-bezier(.42,0,.58,1)
      1
      forwards;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   LOTE 52 · 01 PROBLEMA · AVIÓN HACIA ESQUINA + CISNE IDA/VUELTA
   ----------------------------------------------------------
   - Avión: el span conserva su caja. El dibujo pasa a ::before
     y se reduce físicamente desde top-right, de modo que la
     esquina superior derecha permanece inmóvil de verdad.
   - Cisne: hace la vuelta aprobada, espera 1.5 s, vuelve por
     el mismo eje y termina en su posición original.
   - Molinillo: se mantiene EXACTAMENTE como en Lote 51.
   ========================================================== */


/* ==========================================================
   AVIÓN · CAJA FIJA + DIBUJO ANCLADO ARRIBA/DERECHA
   ========================================================== */

/* La caja NO se transforma: mantiene su posición dentro de la retícula. */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane {
  position:relative;
  background-color:transparent;
  -webkit-mask:none;
  mask:none;
  transform:none !important;
  animation:none !important;
}

/* El dibujo vive dentro de la caja y su esquina top-right es el pivote real. */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane::before {
  content:"";
  position:absolute;
  inset:0;
  background-color:var(--pi-se-live);
  -webkit-mask:url("/img/icons/avion.svg") center / contain no-repeat;
  mask:url("/img/icons/avion.svg") center / contain no-repeat;
  transform-origin:100% 0%;
  transform:scale(1);
  will-change:transform;
}

/* Cuatro estados visibles: el extremo superior derecho no se mueve. */
@keyframes pi-se-plane-depart-corner {
  0%   { transform:scale(1); }
  25%  { transform:scale(.86); }
  50%  { transform:scale(.72); }
  75%  { transform:scale(.59); }
  100% { transform:scale(.47); }
}


/* ==========================================================
   CISNE · IDA / ESPERA / VUELTA
   ========================================================== */

@keyframes pi-se-swan-return {
  0%   { transform:rotateY(180deg); }
  16%  { transform:rotateY(150deg); }
  33%  { transform:rotateY(120deg); }
  50%  { transform:rotateY(90deg); }
  66%  { transform:rotateY(60deg); }
  83%  { transform:rotateY(30deg); }
  100% { transform:rotateY(0deg); }
}


@media (hover:hover) and (pointer:fine) {

  /* AVIÓN: solo se anima el dibujo interno. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane::before {
    animation:
      pi-se-plane-depart-corner
      640ms
      steps(4,end)
      forwards;
  }

  /* CISNE:
     0.76 s ida
     1.50 s de pausa
     0.76 s vuelta
     y queda otra vez como al principio. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan {
    animation:
      pi-se-swan-turn
      760ms
      steps(6,end)
      0s
      1
      forwards,
      pi-se-swan-return
      760ms
      steps(6,end)
      2.26s
      1
      forwards;
  }
}


@media (prefers-reduced-motion:reduce) {

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close-icon--plane::before {
    animation:none !important;
    transform:none !important;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan {
    animation:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   LOTE 53 · 01 PROBLEMA · AVIÓN · MÁSCARA ANCLADA TOP-RIGHT
   ----------------------------------------------------------
   Corrección específica del avión:
   - se elimina el pseudo-elemento del Lote 52;
   - recuperamos la máscara SVG directamente sobre el span,
     que es el sistema que ya renderizaba correctamente;
   - NO escalamos la caja ni usamos transform;
   - reducimos únicamente el tamaño de la máscara;
   - mask-position:right top mantiene inmóvil la esquina
     superior derecha mientras el avión se hace pequeño.
   Cisne y molinillo quedan intactos.
   ========================================================== */

.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane {
  position:relative;
  background-color:var(--pi-se-live);
  -webkit-mask-image:url("/img/icons/avion.svg");
  mask-image:url("/img/icons/avion.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:right top;
  mask-position:right top;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  transform:none !important;
  animation:none !important;
}

/* Anulamos por completo el dibujo auxiliar del Lote 52. */
.pi-service-experience-story
.pi-se-section-01-default
.pi-se-section-close-icon--plane::before {
  content:none !important;
  display:none !important;
}

/* El dibujo se reduce DENTRO de una caja fija.
   El punto right/top no cambia nunca de posición. */
@keyframes pi-se-plane-mask-depart {
  0% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  25% {
    -webkit-mask-size:86% 86%;
    mask-size:86% 86%;
  }
  50% {
    -webkit-mask-size:72% 72%;
    mask-size:72% 72%;
  }
  75% {
    -webkit-mask-size:59% 59%;
    mask-size:59% 59%;
  }
  100% {
    -webkit-mask-size:47% 47%;
    mask-size:47% 47%;
  }
}

@media (hover:hover) and (pointer:fine) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-mask-depart
      680ms
      steps(4,end)
      forwards !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close-icon--plane {
    animation:none !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }
}


/* ==========================================================
   LOTE 54 · 01 PROBLEMA · RITMO COMÚN 3.6 S
   ----------------------------------------------------------
   Sincronización temporal de las tres microanimaciones:
   - Molinillo: mantiene su acción aprobada de 3.6 s.
   - Cisne: 0.9 s ida + 1.8 s pausa + 0.9 s vuelta = 3.6 s.
   - Avión: dos alejamientos consecutivos dentro de 3.6 s.
     Cada ciclo termina pequeño, vuelve inmediatamente al frame
     inicial y vuelve a alejarse. Al finalizar queda grande.
   ========================================================== */


/* ==========================================================
   AVIÓN · DOS SALIDAS · TOTAL 3.6 S
   ----------------------------------------------------------
   La máscara sigue fijada a right/top, por lo que el punto de
   fuga permanece exactamente en la esquina superior derecha.
   steps(1,end) conserva el lenguaje de fotogramas sin fade.
   ========================================================== */

@keyframes pi-se-plane-double-depart {
  0% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }

  11.5% {
    -webkit-mask-size:86% 86%;
    mask-size:86% 86%;
  }

  23% {
    -webkit-mask-size:72% 72%;
    mask-size:72% 72%;
  }

  34.5% {
    -webkit-mask-size:58% 58%;
    mask-size:58% 58%;
  }

  45.5% {
    -webkit-mask-size:43% 43%;
    mask-size:43% 43%;
  }

  /* Reset inmediato al frame inicial para lanzar el segundo avión. */
  46% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }

  57.5% {
    -webkit-mask-size:86% 86%;
    mask-size:86% 86%;
  }

  69% {
    -webkit-mask-size:72% 72%;
    mask-size:72% 72%;
  }

  80.5% {
    -webkit-mask-size:58% 58%;
    mask-size:58% 58%;
  }

  91.5% {
    -webkit-mask-size:43% 43%;
    mask-size:43% 43%;
  }

  /* Termina otra vez en grande, no deja el icono perdido al fondo. */
  92%,
  100% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
}


/* ==========================================================
   CISNE · IDA / PAUSA / VUELTA · TOTAL 3.6 S
   ========================================================== */

@media (hover:hover) and (pointer:fine) {

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-double-depart
      3.6s
      steps(1,end)
      1
      forwards !important;
  }

  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan {
    animation:
      pi-se-swan-turn
      900ms
      steps(6,end)
      0s
      1
      forwards,
      pi-se-swan-return
      900ms
      steps(6,end)
      2.7s
      1
      forwards;
  }

  /* Molinillo: se reafirma la duración maestra aprobada. */
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-gust
      3.6s
      cubic-bezier(.42,0,.58,1)
      1
      forwards;
  }
}


@media (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--plane,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--swan,
  .pi-service-experience-story
  .pi-se-section-01-default
  .pi-se-section-close--slider:hover
  .pi-se-close-slide.is-active
  .pi-se-section-close-icon--pinwheel {
    animation:none !important;
  }
}


/* ==========================================================
   LOTE 76 · SECCIÓN 02 · CTA ESTRATEGIA · HOVER LIMPIO
   ----------------------------------------------------------
   Sin bloque negro: solo elevación mínima y gesto de flecha.
   ========================================================== */

@media (hover:hover) and (pointer:fine) {
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:hover,
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:focus-visible {
    background:transparent;
    color:#fff;
    transform:translateY(-1px);
    outline:none;
  }

  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:hover .pi-se-system-subtle-cta__arrow,
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta:focus-visible .pi-se-system-subtle-cta__arrow {
    transform:translate(2px,2px);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 118
   TABLET VERTICAL · HERO STORYTELLING
   Ajustes solicitados:
   - mantener hero en full screen
   - más jerarquía tipográfica
   - gutter lateral estable para tablet vertical
   - geometría principal más alineada a la derecha
   - geometría secundaria desplazada abajo a la izquierda
   - icono SVG limpio en “Sistema narrativo”
   - botón Cookies elevado para no pisar la navegación inferior
   ========================================================= */

.pi-service-experience-story .pi-se-context-link__icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:.95rem;
  height:.95rem;
  color:rgba(255,255,255,.58);
}

.pi-service-experience-story .pi-se-context-link__icon svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

.pi-service-experience-story .pi-se-context-link:hover .pi-se-context-link__icon,
.pi-service-experience-story .pi-se-context-link:focus-visible .pi-se-context-link__icon {
  color:var(--pi-se-white);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pi-service-experience-story {
    --pi-se-gutter: 60px;
  }

  .pi-service-experience-story .pi-se-hero .pi-se-shell {
    padding-top: clamp(8rem, 13vw, 9.1rem);
    padding-bottom: .9rem;
  }

  .pi-service-experience-story .pi-se-hero-copy {
    width: min(100%, 860px);
    padding-block: clamp(2.8rem, 6vh, 4rem) clamp(2.35rem, 4.5vh, 3.2rem);
  }

  .pi-service-experience-story .pi-se-hero h1 {
    max-width: 13.2ch;
    font-size: clamp(4rem, 6.35vw, 4.95rem);
    line-height: 1.01;
  }

  .pi-service-experience-story .pi-se-hero-description {
    max-width: 44rem;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(1.08rem, 1.8vw, 1.2rem);
    line-height: 1.64;
  }

  .pi-service-experience-story .pi-se-hero .pi-breadcrumbs,
  .pi-service-experience-story .pi-se-hero .pi-breadcrumbs a,
  .pi-service-experience-story .pi-se-hero .pi-breadcrumbs span,
  .pi-service-experience-story .pi-se-hero .pi-eyebrow {
    color: rgba(255, 255, 255, .74);
  }

  .pi-service-experience-story .pi-se-context-link {
    gap: .9rem;
    font-size: .76rem;
  }

  .pi-service-experience-story .pi-se-context-link__icon {
    width: .98rem;
    height: .98rem;
  }

  .pi-service-experience-story .pi-se-hero-nav a {
    min-height: 54px;
    padding: .65rem .92rem;
    font-size: .72rem;
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    top: 18%;
    right: -110px;
    width: 500px;
    height: 500px;
    opacity: .15;
    transform: scale(2.56);
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-2 {
    display: none;
  }

  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-3 {
    display: none;
  }

  .pi-cookie-reopen {
    bottom: 78px !important;
    left: 22px !important;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 119
   HERO TABLET VERTICAL · CONTROL GEOMETRÍAS
   - conserva únicamente la geometría principal de la derecha
   - oculta las geometrías 2 y 3
   - alinea la geometría principal un poco más a la derecha
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .pi-service-experience-story .pi-se-hero--dark-default .pi-se-hero-geometry .mil-position-1 {
    right: -145px;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 120
   TABLET VERTICAL · CONTRATO ESPACIAL DE SECCIONES
   ---------------------------------------------------------
   - mismo gutter lateral que la Hero;
   - capítulos 01–05 dejan de ser fullscreen;
   - top y bottom idénticos en todas las secciones;
   - cada sección crece según su contenido.
   La Hero conserva su comportamiento fullscreen.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story {
    --pi-se-gutter:60px;
    --pi-se-tablet-section-space:102px;
  }

  .pi-service-experience-story .pi-se-chapter {
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    padding-block:var(--pi-se-tablet-section-space);
    overflow:visible;
  }

  .pi-service-experience-story .pi-se-chapter > .pi-se-shell {
    width:min(100%,var(--pi-page-max,1320px));
    margin-inline:auto;
    padding-inline:var(--pi-se-gutter);
  }

  .pi-service-experience-story #problema.pi-se-section-01-default {
    --pi-se-section-block:var(--pi-se-tablet-section-space);
    scroll-margin-top:0;
  }

  .pi-service-experience-story #problema .pi-se-section-01-header {
    margin-bottom:clamp(2.5rem,5vw,3.25rem);
  }

  .pi-service-experience-story #problema .pi-se-editorial-split {
    gap:clamp(2.5rem,5vw,3.5rem);
  }

  .pi-service-experience-story #problema .pi-se-section-close--slider {
    margin-top:clamp(3rem,6vw,4rem);
  }

  /* En tablet no existe hover persistente. Al navegar las ideas con
     ← / → se dispara la misma microanimación del icono activo. */
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-double-depart
      3.6s
      steps(1,end)
      1
      forwards !important;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--swan {
    animation:
      pi-se-swan-turn
      900ms
      steps(6,end)
      0s
      1
      forwards,
      pi-se-swan-return
      900ms
      steps(6,end)
      2.7s
      1
      forwards;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-gust
      3.6s
      cubic-bezier(.42,0,.58,1)
      1
      forwards;
  }
}

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) and (prefers-reduced-motion:reduce) {
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-touch-animating
  .pi-se-section-close-icon {
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 121
   02 SISTEMA · TABLET VERTICAL
   ---------------------------------------------------------
   - un card por fila;
   - mismo gutter y ritmo vertical general del Lote 120;
   - altura determinada por contenido;
   - una línea viva permanece activa en un único card.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story #sistema .pi-se-system-grid {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .pi-service-experience-story #sistema .pi-se-system-item:nth-child(n) {
    grid-column:1;
    min-height:0;
    padding:clamp(2rem,4vw,2.6rem);
  }

  .pi-service-experience-story #sistema .pi-se-system-item h2 {
    max-width:18ch;
    margin:1.5rem 0 1rem;
  }

  .pi-service-experience-story #sistema .pi-se-system-item p {
    max-width:58ch;
  }

  .pi-service-experience-story #sistema .pi-se-system-item::after {
    transition:
      height .46s cubic-bezier(.2,.8,.2,1),
      background-color .28s ease;
  }

  .pi-service-experience-story #sistema .pi-se-system-item.is-auto-active::after,
  .pi-service-experience-story #sistema .pi-se-system-item:hover::after,
  .pi-service-experience-story #sistema .pi-se-system-item:focus-within::after {
    height:100%;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 122
   02 SISTEMA · CTA + RITMO DE LÍNEA VIVA
   ---------------------------------------------------------
   - línea activa secuencial 1 → 2 → 3 → 4;
   - permanencia más lenta: 4.2 s por card;
   - CTA de solicitud con más presencia;
   - flecha SVG real, sin Unicode/emoji.
   ========================================================= */

.pi-service-experience-story #sistema .pi-se-system-subtle-cta {
  gap:1rem;
  min-height:52px;
  padding:.7rem 0;
  font-size:.8rem;
  line-height:1.25;
}

.pi-service-experience-story #sistema .pi-se-system-subtle-cta > :first-child {
  max-width:18ch;
}

.pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  background:none!important;
  color:var(--pi-se-live);
}

.pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow svg {
  display:block;
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story #sistema .pi-se-system-subtle-cta {
    margin-top:1.8rem;
    min-height:58px;
    font-size:.86rem;
  }

  .pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow {
    flex-basis:32px;
    width:32px;
    height:32px;
  }

  .pi-service-experience-story #sistema .pi-se-system-subtle-cta__arrow svg {
    width:24px;
    height:24px;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 123
   02 SISTEMA · APLICACIONES · RITMO TABLET
   ---------------------------------------------------------
   "Aplicaciones" no tiene H2 intermedio como los otros cards.
   Se añade aire específico entre eyebrow y descripción para
   mantener una jerarquía equivalente sin inventar un titular.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story
  #sistema
  .pi-se-system-item--applications
  > .pi-eyebrow {
    margin-bottom:1.45rem;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 124
   03 PRINCIPIO NARRATIVO · TABLET VERTICAL
   ---------------------------------------------------------
   - abandona cualquier min-height heredado de fullscreen;
   - usa exactamente el ritmo exterior común de tablet;
   - el contenido crece solo por su altura real;
   - frase editorial ampliada a escala de Hero.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story #principio {
    height:auto;
    min-height:0;
    max-height:none;
    padding-block:var(--pi-se-tablet-section-space);
    overflow:hidden;
  }

  .pi-service-experience-story #principio .pi-se-shell {
    display:grid;
    align-items:start;
    min-height:0 !important;
    height:auto;
    padding-inline:var(--pi-se-gutter);
  }

  .pi-service-experience-story #principio .pi-se-section-header-editorial {
    margin-bottom:clamp(2.75rem,5vw,3.5rem);
  }

  .pi-service-experience-story #principio .pi-se-principle-quote {
    width:100%;
    max-width:13.25ch;
    font-size:clamp(4.2rem,7.4vw,5rem);
    line-height:.98;
    letter-spacing:-.045em;
  }

  .pi-service-experience-story #principio .pi-se-principle-focus {
    margin-top:.14em;
  }

  .pi-service-experience-story #principio .pi-quote::before {
    width:clamp(3.4rem,7vw,4.8rem);
    margin-bottom:clamp(1.7rem,3.4vw,2.25rem);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 126
   TABLET VERTICAL · ESPACIADO EXTERIOR UNIFICADO 01–05
   ---------------------------------------------------------
   Corrección de especificidad:
   #sistema y #proceso conservaban reglas históricas con ID
   (padding-block: clamp(...)) que prevalecían sobre la regla
   general de .pi-se-chapter.

   Contrato definitivo tablet vertical:
   01 / 02 / 03 / 04 / 05
   = exactamente el mismo padding superior e inferior.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story #problema,
  .pi-service-experience-story #sistema,
  .pi-service-experience-story #principio,
  .pi-service-experience-story #proceso,
  .pi-service-experience-story #conexiones {
    height:auto;
    min-height:0;
    max-height:none;
    padding-top:var(--pi-se-tablet-section-space);
    padding-bottom:var(--pi-se-tablet-section-space);
  }

  /* Principio tenía además su propia variable histórica de padding. */
  .pi-service-experience-story #principio {
    --pi-se-principle-pad:var(--pi-se-tablet-section-space);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 127
   05 FAQ · TABLET VERTICAL · SIN FULLSCREEN
   ---------------------------------------------------------
   Corrección de especificidad:
   las reglas históricas de #conexiones.pi-se-faq-master
   seguían imponiendo min-height:100vh / 100svh porque eran
   más específicas que el contrato general del Lote 126.

   Resultado:
   - misma altura natural que 01–04;
   - mismo padding superior e inferior;
   - mismo gutter lateral;
   - sin centrado ni fullscreen.
   ========================================================= */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-service-experience-story #conexiones.pi-se-faq-master {
    display:block;
    height:auto;
    min-height:0;
    max-height:none;
    padding-top:var(--pi-se-tablet-section-space);
    padding-bottom:var(--pi-se-tablet-section-space);
    overflow:visible;
  }

  .pi-service-experience-story #conexiones.pi-se-faq-master > .pi-se-shell {
    width:min(100%,var(--pi-page-max,1320px));
    margin-inline:auto;
    padding-inline:var(--pi-se-gutter);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 137
   TABLET HORIZONTAL · SAFE AREA EDITORIAL
   ---------------------------------------------------------
   Objetivo:
   mantener logo P y hamburguesa flotantes sobre cada superficie
   sin convertir el header en una barra negra fija.

   Contrato tablet horizontal:
   - 88px de zona segura izquierda y derecha;
   - afecta a los shells editoriales de Hero + 01–05;
   - los fondos siguen llegando a borde de viewport;
   - geometrías pueden seguir desbordando la retícula;
   - no altera mega menú ni footer.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story {
    --pi-se-tablet-landscape-safe-left:88px;
    --pi-se-tablet-landscape-safe-right:108px;
  }

  /* Hero + capítulos principales comparten el mismo eje editorial.
     La variable global ya gobierna padding-inline en .pi-se-shell,
     pero lo reafirmamos aquí para neutralizar overrides antiguos. */
  .pi-service-experience-story .pi-se-hero > .pi-se-shell,
  .pi-service-experience-story #problema > .pi-se-shell,
  .pi-service-experience-story #sistema > .pi-se-shell,
  .pi-service-experience-story #principio > .pi-se-shell,
  .pi-service-experience-story #proceso > .pi-se-shell,
  .pi-service-experience-story #conexiones > .pi-se-shell {
    width:min(100%,var(--pi-page-max,1320px));
    margin-inline:auto;
    padding-left:var(--pi-se-tablet-landscape-safe-left);
    padding-right:var(--pi-se-tablet-landscape-safe-right);
  }

  /* En este rango no necesitamos reservar espacio extra para el rail
     desktop, que además permanece oculto por debajo de 1366px y en touch. */
  .pi-service-experience-story .pi-se-chapter > .pi-se-shell,
  .pi-service-experience-story .pi-se-cta > .pi-se-shell {
    padding-right:var(--pi-se-tablet-landscape-safe-right);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 139
   TABLET HORIZONTAL · LOGO MÁS AL BORDE
   ---------------------------------------------------------
   - logo P: 20px hacia la izquierda;
   - hamburguesa: intacta;
   - safe-area izquierda: 108px -> 88px;
   - safe-area derecha: se mantiene en 108px.
   Así recuperamos 20px reales de contenido sin perder la
   zona de seguridad de la hamburguesa.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story .pi-interior-frame .mil-logo-img {
    transform:translateX(-20px);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 140
   HERO · TABLET HORIZONTAL · NAV SIEMPRE VISIBLE
   ---------------------------------------------------------
   Problema:
   la Hero tenía min-height de viewport, pero podía crecer por
   la suma de padding + copy + navegación. El nav inferior
   terminaba fuera de la primera visualización.

   Solución:
   - Hero = exactamente el viewport dinámico;
   - shell = exactamente la altura disponible;
   - primera fila flexible para centrar el copy;
   - segunda fila reservada para el nav inferior;
   - menos padding vertical interno en horizontal;
   - geometrías intactas.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story .pi-se-hero {
    height:100vh;
    height:100svh;
    height:100dvh;
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
  }

  .pi-service-experience-story .pi-se-hero > .pi-se-shell {
    height:100%;
    min-height:0;
    max-height:100%;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    padding-top:72px;
    padding-bottom:0;
  }

  .pi-service-experience-story .pi-se-hero-copy {
    min-height:0;
    align-self:stretch;
    justify-content:center;
    padding-top:0;
    padding-bottom:18px;
  }

  .pi-service-experience-story .pi-se-hero-nav {
    align-self:end;
    margin-top:0;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 141
   01 PROBLEMA · TABLET HORIZONTAL
   ---------------------------------------------------------
   Ajustes:
   - conserva sección fullscreen y contenido centrado;
   - reduce el aire entre contenido principal y slider inferior;
   - activa en touch las mismas microanimaciones aprobadas
     de avión, cisne y molinillo al cambiar de idea.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  /* Menos vacío entre el bloque editorial y el slider,
     sin alterar el centrado general de la sección. */
  .pi-service-experience-story
  #problema
  .pi-se-section-close--slider {
    margin-top:18px;
    padding-top:16px;
  }

  /* Misma acción que en escritorio, disparada por la clase
     que el JS aplica al navegar con ← / →. */
  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--plane {
    animation:
      pi-se-plane-double-depart
      3.6s
      steps(1,end)
      1
      forwards !important;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--swan {
    animation:
      pi-se-swan-turn
      900ms
      steps(6,end)
      0s
      1
      forwards,
      pi-se-swan-return
      900ms
      steps(6,end)
      2.7s
      1
      forwards;
  }

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-active.is-touch-animating
  .pi-se-section-close-icon--pinwheel {
    animation:
      pi-se-pinwheel-gust
      3.6s
      cubic-bezier(.42,0,.58,1)
      1
      forwards;
  }
}

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) and
  (prefers-reduced-motion:reduce) {

  .pi-service-experience-story
  #problema
  .pi-se-close-slide.is-touch-animating
  .pi-se-section-close-icon {
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 142
   02 SISTEMA · TABLET HORIZONTAL
   ---------------------------------------------------------
   Ajustes mínimos sobre la composición ya aprobada:
   - "Aplicaciones" gana separación respecto a su descripción;
   - CTA inferior ocupa el ancho útil de la card;
   - texto y flecha viven en columnas independientes;
   - la flecha SVG queda siempre a la derecha, sin solapar copy.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story
  #sistema
  .pi-se-system-item--applications
  > .pi-eyebrow {
    margin-bottom:1.1rem;
  }

  .pi-service-experience-story
  #sistema
  .pi-se-system-subtle-cta {
    align-self:stretch;
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) 30px;
    column-gap:12px;
    align-items:end;
    margin-top:auto;
    padding:.72rem 0;
    white-space:normal;
  }

  .pi-service-experience-story
  #sistema
  .pi-se-system-subtle-cta
  > :first-child {
    min-width:0;
    max-width:none;
    white-space:normal;
  }

  .pi-service-experience-story
  #sistema
  .pi-se-system-subtle-cta__arrow {
    justify-self:end;
    align-self:end;
    flex:none;
    width:30px;
    height:30px;
    margin:0;
  }

  .pi-service-experience-story
  #sistema
  .pi-se-system-subtle-cta__arrow svg {
    display:block;
    width:22px;
    height:22px;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 143
   04 PROCESO · TABLET HORIZONTAL · SCROLL ESTABLE
   ---------------------------------------------------------
   Diagnóstico:
   01–04 son capítulos fullscreen con overflow-y:auto.
   En 04, las tres filas del proceso + cabecera + paddings
   superan ligeramente la altura útil de algunas tablets.
   Resultado: al iniciar el gesto sobre 04, el navegador entra
   en scroll interno de la propia sección antes de continuar
   con el scroll de página. Visualmente parece que 04 "sube"
   y se monta sobre 03.

   Solución específica para tablet horizontal:
   - 04 deja de tener scroll interno;
   - conserva el fullscreen;
   - compactamos solo el padding vertical de las tres filas
     para que todo el contenido quepa dentro del viewport;
   - estructura, textos, conectores y composición se mantienen.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story #proceso {
    overflow-x:clip;
    overflow-y:hidden;
    overscroll-behavior:auto;
  }

  .pi-service-experience-story #proceso > .pi-se-shell {
    max-height:100%;
  }

  .pi-service-experience-story #proceso .pi-se-process-layout {
    align-items:center;
  }

  .pi-service-experience-story #proceso .pi-se-process-step {
    padding:
      clamp(.95rem, 2.1vh, 1.25rem)
      clamp(1.45rem, 1.9vw, 1.75rem);
  }

  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    margin-bottom:.62rem;
  }

  .pi-service-experience-story #proceso .pi-se-process-step p {
    line-height:1.48;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 144
   04 PROCESO · TABLET HORIZONTAL · COMPACTACIÓN FINA
   ---------------------------------------------------------
   Sobre la corrección de scroll del Lote 143:
   - se compactan las tres filas izquierdas;
   - títulos Escuchar / Editar / Activar algo más pequeños;
   - copy ligeramente reducido;
   - menos padding vertical por fila;
   - la columna derecha y la estructura general no cambian.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story #proceso .pi-se-process-step {
    padding:
      clamp(.72rem, 1.55vh, .95rem)
      clamp(1.25rem, 1.7vw, 1.55rem);
  }

  .pi-service-experience-story #proceso .pi-se-process-step h3 {
    margin:0 0 .48rem;
    font-size:clamp(1.16rem, 1.5vw, 1.42rem);
    line-height:1.06;
  }

  .pi-service-experience-story #proceso .pi-se-process-step p {
    max-width:32ch;
    margin:0;
    font-size:clamp(.82rem, 1.02vw, .93rem);
    line-height:1.42;
  }

  .pi-service-experience-story #proceso .pi-se-process-step > div {
    max-width:20rem;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 145
   02 SISTEMA · TABLET HORIZONTAL · TITULARES MÁS COMPACTOS
   ---------------------------------------------------------
   Se reduce únicamente la escala de:
   - Qué contamos y en qué orden.
   - Cómo suena la marca.
   - Cómo la historia se mantiene viva.

   Se mantiene:
   - peso tipográfico;
   - blanco intenso;
   - retícula y proporciones de cards;
   - copy descriptivo.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story
  #sistema
  .pi-se-system-item h2 {
    max-width:12ch;
    margin:1rem 0 .7rem;
    color:#fff;
    font-size:clamp(1.3rem,1.7vw,1.7rem);
    font-weight:500;
    line-height:1.06;
    letter-spacing:-.02em;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 146
   04 PROCESO · TABLET HORIZONTAL · COPY HOMOLOGADO CON 02
   ---------------------------------------------------------
   El Lote 144 compactó demasiado el texto descriptivo.
   Igualamos ahora el copy de Escuchar / Editar / Activar al
   cuerpo descriptivo de 02 Sistema en este mismo breakpoint:

   - font-size: 1rem;
   - line-height: 1.52;
   - se mantienen padding compacto y títulos reducidos.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story #proceso .pi-se-process-step p {
    font-size:1rem;
    line-height:1.52;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 147
   05 FAQ · TABLET HORIZONTAL · SAFE AREA REAL
   ---------------------------------------------------------
   Diagnóstico:
   05 sí estaba incluido en la regla general del Lote 137,
   pero una regla histórica más específica:
     #conexiones.pi-se-faq-master > .pi-se-shell
   seguía ganando por especificidad y aplicaba el gutter
   antiguo.

   Corrección:
   - misma safe area izquierda que Hero / 01–04;
   - misma safe area derecha que Hero / 01–04;
   - no cambia el acordeón ni su composición interna.
   ========================================================= */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-service-experience-story
  #conexiones.pi-se-faq-master
  > .pi-se-shell {
    width:min(100%,var(--pi-page-max,1320px));
    margin-inline:auto;
    padding-left:var(--pi-se-tablet-landscape-safe-left);
    padding-right:var(--pi-se-tablet-landscape-safe-right);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 155
   STICKY RAIL · TABLET HORIZONTAL · CONTRATO VM
   ---------------------------------------------------------
   Diagnóstico:
   Visual Marketing sí funciona en esta misma tablet porque su
   rail permanece disponible hasta 900px y NO depende de
   pointer/coarse ni de detección táctil.

   Storytelling seguía exigiendo >=1024px y por eso podía quedar
   fuera del breakpoint real del navegador del tablet.

   Contrato:
   - 900–1365px + landscape = rail compacto;
   - vertical sigue sin rail;
   - desktop >=1366 conserva su contrato previo;
   - dimensiones inspiradas en el rail probado de Visual Marketing.
   ========================================================= */

@media
  (min-width:900px) and
  (max-width:1365px) and
  (orientation:landscape) {

  .pi-service-experience-story .pi-se-rail {
    right:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:72px;
    min-width:72px;
    max-width:72px;
    padding:4px 0;
  }

  .pi-service-experience-story .pi-se-rail a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    min-height:42px;
    padding:7px 4px;
    font-size:12px;
    line-height:1;
  }

  .pi-service-experience-story .pi-se-rail a::before {
    position:absolute;
    left:-2px;
    top:9px;
    bottom:9px;
    width:3px;
    height:auto;
    opacity:0;
  }

  .pi-service-experience-story
  .pi-se-rail
  a[aria-current="location"]::before {
    width:3px;
    height:auto;
    opacity:1;
    background:var(--pi-se-live);
  }

  .pi-service-experience-story .pi-se-rail .pi-se-rail-index {
    display:block;
    width:auto;
  }

  .pi-service-experience-story .pi-se-rail .pi-se-rail-cta {
    width:44px;
    min-height:42px;
    margin-top:2px;
    border-top:1px solid var(--pi-se-line-light);
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 156
   FIX DEFINITIVO · RAIL · TABLET HORIZONTAL
   ---------------------------------------------------------
   Causa real encontrada:
   el componente MASTER contiene esta regla heredada:

     @media (max-width:1365px) {
       .pi-service-experience
       .pi-se-rail.pi-service-sticky-nav {
         display:none !important;
       }
     }

   Esa regla estaba anulando los Lotes 153–155 aunque el JS
   estuviera activando correctamente el rail.

   Corrección:
   - override exclusivo para 900–1365px + landscape;
   - selector más específico;
   - display:flex !important para vencer el contrato antiguo;
   - vertical y móvil continúan ocultos.
   ========================================================= */

@media
  (min-width:900px) and
  (max-width:1365px) and
  (orientation:landscape) {

  .pi-service-experience.pi-service-experience-story
  .pi-se-rail.pi-service-sticky-nav {
    display:flex !important;
  }
}


/* =========================================================
   PUBLIMPACTO · LOTE 157
   RAIL TABLET HORIZONTAL · HERO LIMPIO + MÁS SAFE AREA
   ---------------------------------------------------------
   - el rail NO se muestra en Hero 00;
   - aparece desde 01 hasta 05;
   - 01–05 ganan 20px adicionales de safe-area derecha;
   - Hero conserva su composición previa;
   - rail mantiene 72px / right 14px.
   ========================================================= */

@media
  (min-width:900px) and
  (max-width:1365px) and
  (orientation:landscape) {

  .pi-service-experience-story #problema > .pi-se-shell,
  .pi-service-experience-story #sistema > .pi-se-shell,
  .pi-service-experience-story #principio > .pi-se-shell,
  .pi-service-experience-story #proceso > .pi-se-shell,
  .pi-service-experience-story #conexiones.pi-se-faq-master > .pi-se-shell {
    padding-right:128px;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 186
   HERO · CONTRATO FINAL DE GEOMETRÍA ÚNICA
   ----------------------------------------------------------
   Móvil y tablet vertical:
   SOLO permanece visible mil-position-1.
   mil-position-2 y mil-position-3 quedan anuladas de forma
   definitiva al final de la cascada.
   ========================================================== */

@media (max-width: 767.98px) {
  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry
  > .mil-animation.mil-position-2,

  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry
  > .mil-animation.mil-position-3 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }
}

@media
  (min-width: 768px) and
  (max-width: 1100px) and
  (orientation: portrait) {

  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry
  > .mil-animation.mil-position-2,

  .pi-service-experience-story
  .pi-se-hero--dark-default[data-geometry-phase="identification"]
  .pi-se-hero-geometry
  > .mil-animation.mil-position-3 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }
}