[data-susbi-experience] { position: relative; }
.experience-chapter-hero, .experience-map { width: min(100% - 2rem, 78rem); margin-inline: auto; }
.experience-chapter-hero { padding: 2.5rem 0 1rem; }
.experience-chapter-hero__eyebrow { margin: 0; color: #00e5ff; font: 800 .72rem var(--public-font-title); letter-spacing: .16em; text-transform: uppercase; }
.experience-chapter-hero__statement { max-width: 30rem; margin: .6rem 0 0; color: #a8c8d7; font-size: clamp(1rem, 2vw, 1.25rem); }
.experience-map { margin-block: clamp(2.5rem, 8vw, 7rem); padding: clamp(1.25rem, 4vw, 3.5rem); overflow: hidden; border: 1px solid rgba(89, 234, 255, .22); border-radius: 2rem; background: linear-gradient(145deg, rgba(5, 29, 48, .9), rgba(1, 12, 23, .84)); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .05); }
.experience-map__intro { max-width: 42rem; text-align: left; }
.experience-map__intro h2 { margin: .4rem 0 .75rem; color: #f6fbff; font: 800 clamp(2rem, 4vw, 3.8rem)/.98 var(--public-font-title); letter-spacing: -.055em; }
.experience-map__intro p:last-child { margin: 0; color: #9fc1d0; }
.experience-map__canvas { position: relative; display: grid; min-height: clamp(26rem, 44vw, 36rem); place-items: center; margin-top: 2rem; overflow: hidden; border-radius: 1.4rem; background-image: linear-gradient(rgba(64, 207, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 207, 255, .07) 1px, transparent 1px); background-size: 2.75rem 2.75rem; }
.experience-map__orbit { position: absolute; border: 1px solid rgba(0, 229, 255, .22); border-radius: 50%; pointer-events: none; }
.experience-map__orbit--outer { width: min(68vw, 32rem); height: min(68vw, 32rem); }
.experience-map__orbit--inner { width: min(43vw, 20rem); height: min(43vw, 20rem); border-color: rgba(0, 229, 255, .35); }
.experience-map__core { position: relative; z-index: 2; display: grid; width: 10.7rem; min-height: 11.5rem; place-items: center; align-content: center; gap: .65rem; padding: 1.1rem; border: 1px solid #44ddff; border-radius: 1.4rem; background: radial-gradient(circle at 50% 18%, rgba(68, 221, 255, .38), transparent 44%), rgba(6, 34, 55, .92); box-shadow: 0 0 2.6rem rgba(0, 229, 255, .28), inset 0 1px rgba(255,255,255,.2); text-align: center; }
.experience-map__core i { color: #7beeff; font-size: 2rem; text-shadow: 0 0 1.2rem #00e5ff; }
.experience-map__core strong { color: #fff; font: 800 1rem var(--public-font-title); }
.experience-map__core span { color: #bae3ee; font-size: .78rem; line-height: 1.35; }
.experience-map__controls { position: absolute; inset: 0; z-index: 3; }
.experience-map__node { position: absolute; display: inline-flex; align-items: center; gap: .6rem; min-width: 9rem; min-height: 3.8rem; padding: .8rem 1rem; border: 1px solid rgba(126, 218, 255, .34); border-radius: .85rem; background: rgba(5, 27, 46, .92); box-shadow: 0 1rem 2rem rgba(0,0,0,.22); color: #edfaff; font: 700 .82rem var(--public-font-title); text-align: left; transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out; will-change: transform; }
.experience-map__node i { color: #00d6f6; font-size: 1.25rem; }
.experience-map__node:nth-child(1) { top: 10%; left: 8%; }
.experience-map__node:nth-child(2) { top: 7%; left: 50%; transform: translateX(-50%); }
.experience-map__node:nth-child(3) { top: 18%; right: 8%; }
.experience-map__node:nth-child(4) { bottom: 13%; right: 8%; }
.experience-map__node:nth-child(5) { bottom: 8%; left: 50%; transform: translateX(-50%); }
.experience-map__node.is-selected, .experience-map__node:hover { border-color: #00e5ff; background: rgba(1, 59, 78, .94); box-shadow: 0 0 0 1px rgba(0,229,255,.14), 0 1rem 2.2rem rgba(0,229,255,.18); }
.experience-map__node:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.experience-map__status { margin: 1.25rem 0 0; color: #bce7f0; text-align: center; }
@media (hover: hover) and (pointer: fine) { .experience-map__node:hover { transform: translateY(-3px); } .experience-map__node:nth-child(2):hover, .experience-map__node:nth-child(5):hover { transform: translateX(-50%) translateY(-3px); } }
@media (max-width: 720px) { .experience-map { padding: 1.1rem; border-radius: 1.25rem; } .experience-map__canvas { min-height: 35rem; } .experience-map__node { min-width: 7.4rem; min-height: 3.25rem; padding: .65rem; font-size: .72rem; } .experience-map__node:nth-child(1) { top: 5%; left: 3%; } .experience-map__node:nth-child(2) { top: 2%; } .experience-map__node:nth-child(3) { top: 17%; right: 3%; } .experience-map__node:nth-child(4) { bottom: 14%; right: 3%; } .experience-map__node:nth-child(5) { bottom: 4%; } }
@media (prefers-reduced-motion: reduce) { .experience-map__node { transition: none; } }

.experience-simulator, .experience-timeline, .experience-conversation { width: min(100% - 2rem, 78rem); margin: clamp(2.5rem, 7vw, 6rem) auto; padding: clamp(1.3rem, 4vw, 3.2rem); border: 1px solid rgba(109, 201, 255, .2); border-radius: 1.6rem; background: linear-gradient(145deg, rgba(7, 31, 51, .9), rgba(2, 13, 25, .9)); box-shadow: 0 1.8rem 5rem rgba(0,0,0,.23); }
.experience-simulator h2, .experience-timeline h2, .experience-conversation h2 { margin: .45rem 0 .8rem; color: #f7fcff; font: 800 clamp(1.75rem, 3.8vw, 3.3rem)/1 var(--public-font-title); letter-spacing: -.05em; }
.experience-simulator p, .experience-conversation p { color: #a9c9d7; }
.experience-simulator__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.experience-simulator__steps li { min-width: 0; padding: 1rem; border: 1px solid rgba(99, 220, 255, .16); border-radius: 1rem; background: rgba(0, 14, 27, .42); }
.experience-simulator__steps span, .experience-timeline li > span { display: inline-grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: rgba(0,229,255,.16); color: #55e9ff; font: 800 .7rem var(--public-font-title); }
.experience-simulator__steps strong { display: block; margin-top: 1.3rem; color: #fff; font-family: var(--public-font-title); }
.experience-simulator__steps small { display: block; margin-top: .45rem; color: #9bbdcb; line-height: 1.4; }
.experience-timeline ol { display: grid; gap: 0; max-width: 54rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.experience-timeline li { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.4rem; }
.experience-timeline li:not(:last-child)::before { grid-column: 1; width: 1px; height: 100%; margin: 1.8rem auto -1.4rem; content: ""; background: linear-gradient(#00e5ff, rgba(0,229,255,.05)); }
.experience-timeline li > span { position: relative; z-index: 1; }
.experience-timeline strong { color: #fff; font-family: var(--public-font-title); }
.experience-timeline p { margin: .35rem 0 0; color: #a9c9d7; }
.experience-conversation { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(15rem, .7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.experience-conversation__phone { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(83, 228, 255, .32); border-radius: 1.5rem; background: #031725; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1.2rem 2.8rem rgba(0,0,0,.3); }
.experience-conversation__phone p { max-width: 88%; margin: 0; padding: .75rem .85rem; border-radius: 1rem; font-size: .85rem; line-height: 1.42; }
.experience-conversation__incoming { background: rgba(255,255,255,.07); color: #e8f9ff !important; }
.experience-conversation__signal { margin-inline: auto 0 !important; background: rgba(0,229,255,.13); color: #b9eff7 !important; }
.experience-conversation__outgoing { margin-inline: auto 0 !important; background: rgba(62,130,255,.18); color: #d6e4ff !important; }
@media (max-width: 760px) { .experience-simulator__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .experience-conversation { grid-template-columns: 1fr; } }
.experience-selector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .75fr); gap: 1rem; margin-top: 1.75rem; padding: .8rem; border: 1px solid rgba(99, 220, 255, .16); border-radius: 1.2rem; background: rgba(0, 12, 23, .38); }
.experience-selector__tabs { display: grid; align-content: center; gap: .65rem; }
.experience-selector__tab { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(116, 214, 255, .2); border-radius: .8rem; background: rgba(5, 27, 46, .72); color: #b9dce8; font: 700 .82rem var(--public-font-title); text-align: left; transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out; }
.experience-selector__tab.is-selected { border-color: #00e5ff; background: rgba(0, 91, 119, .38); color: #fff; box-shadow: 0 0 0 1px rgba(0,229,255,.1), 0 1rem 2rem rgba(0,229,255,.1); }
.experience-selector__tab:focus-visible, .experience-timeline__stage-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.experience-selector__panel, .experience-timeline__detail { min-height: 9.6rem; padding: 1.2rem; border: 1px solid rgba(87, 233, 255, .28); border-radius: 1rem; background: radial-gradient(circle at 86% 12%, rgba(0,229,255,.16), transparent 42%), rgba(3, 28, 47, .86); }
.experience-selector__label { color: #55e9ff; font: 800 .67rem var(--public-font-title); letter-spacing: .13em; text-transform: uppercase; }
.experience-selector__panel strong, .experience-timeline__detail strong { display: block; margin-top: .7rem; color: #fff; font: 800 1.1rem var(--public-font-title); }
.experience-selector__panel p, .experience-timeline__detail p { margin: .45rem 0 0; color: #b3d4df; line-height: 1.5; }
.experience-timeline__stages { margin-bottom: 1rem !important; }
.experience-timeline__stage-button { grid-column: 1 / -1; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: center; width: 100%; gap: 1rem; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; transition: transform 180ms ease-out, opacity 180ms ease-out; }
.experience-timeline__stage-button > span { display: inline-grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: rgba(0,229,255,.16); color: #55e9ff; font: 800 .7rem var(--public-font-title); }
.experience-timeline__stage-button strong { padding: .82rem 1rem; border: 1px solid transparent; border-radius: .8rem; color: #a9c9d7; transition: color 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out; }
.experience-timeline__stage-button.is-selected strong { border-color: rgba(85,233,255,.24); background: rgba(0, 78, 104, .31); color: #fff; }
@media (hover: hover) and (pointer: fine) { .experience-selector__tab:hover, .experience-timeline__stage-button:hover { transform: translateY(-2px); } }
@media (max-width: 760px) { .experience-selector { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .experience-selector__tab, .experience-timeline__stage-button, .experience-timeline__stage-button strong { transition: none; } }
/* Atlas conectado: SVG independiente de las tarjetas y movimiento acotado al canvas. */
.experience-map__canvas { isolation: isolate; }
.experience-map__links { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.experience-map__link { fill: none; stroke: rgba(0, 229, 255, .18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.experience-map__link.is-active { stroke: #00e5ff; stroke-dasharray: 5 8; animation: atlas-link-flow 1.8s linear infinite; filter: drop-shadow(0 0 .45rem rgba(0, 229, 255, .62)); }
.experience-map__node,
.experience-map__node:nth-child(n) { right: auto; bottom: auto; left: var(--atlas-x); top: var(--atlas-y); transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.experience-map__node.is-dragging { z-index: 5; cursor: grabbing; transition: none; user-select: none; }
.experience-map__actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.experience-map__reset { min-height: 2.6rem; padding-inline: .9rem; border: 1px solid rgba(107, 224, 255, .35); border-radius: 999px; background: rgba(5, 27, 46, .72); color: #caeff8; font: 700 .76rem var(--public-font-title); letter-spacing: .03em; }
.experience-map__reset:hover { border-color: #00e5ff; color: #fff; }
@keyframes atlas-link-flow { to { stroke-dashoffset: -26; } }
@media (hover: hover) and (pointer: fine) { .experience-map__node:hover, .experience-map__node:nth-child(2):hover, .experience-map__node:nth-child(5):hover { transform: translate(-50%, -50%) translateY(-3px); } }
@media (max-width: 720px) { .experience-map__canvas { min-height: 32rem; } .experience-map__node, .experience-map__node:nth-child(n) { min-width: 6.7rem; max-width: 8.5rem; } }
@media (prefers-reduced-motion: reduce) { .experience-map__link.is-active { animation: none; } }
/* La conversación se entiende sin JavaScript; la secuencia solo mejora la entrada en viewport. */
.experience-timeline__confirmation { display: grid; gap: .45rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(102, 225, 255, .28); border-radius: .9rem; background: rgba(0, 83, 109, .22); }
.experience-timeline__confirmation > span { color: #55e9ff; font: 800 .68rem var(--public-font-title); letter-spacing: .13em; text-transform: uppercase; }
.experience-timeline__confirmation > strong { margin-top: 0; }
.experience-timeline__confirmation > p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .experience-conversation.is-conversation-ready .experience-conversation__phone [data-conversation-message] { opacity: 0; transform: translate3d(0, .7rem, 0); }
  .experience-conversation.is-conversation-visible .experience-conversation__phone [data-conversation-message] { animation: conversation-arrive 420ms var(--public-ease-out) forwards; animation-delay: var(--conversation-delay); }
}
@keyframes conversation-arrive { to { opacity: 1; transform: translate3d(0, 0, 0); } }
.experience-resource-hub .experience-selector__panel { display: grid; align-content: start; gap: .35rem; }
.experience-resource-hub [data-resource-link] { width: fit-content; margin-top: .8rem; }
/* Escenas editoriales: fotografía propia como capa, degradado legible como fallback. */
.experience-editorial { width: min(100% - 2rem, 78rem); min-height: clamp(15rem, 29vw, 23rem); margin: clamp(1.5rem, 5vw, 4rem) auto; overflow: hidden; border: 1px solid rgba(99, 220, 255, .18); border-radius: 1.6rem; background-color: #051827; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, .24); }
.experience-editorial--operation { background-image: linear-gradient(90deg, rgba(3, 15, 26, .95) 0%, rgba(3, 15, 26, .58) 43%, rgba(3, 15, 26, .12) 100%), url("/static/public_site/images/atlas/operation-team.png"); }
.experience-editorial--commercial { background-image: linear-gradient(90deg, rgba(3, 15, 26, .95) 0%, rgba(3, 15, 26, .58) 43%, rgba(3, 15, 26, .12) 100%), url("/static/public_site/images/atlas/commercial-counter.png"); }
.experience-editorial--conversation { background-image: linear-gradient(90deg, rgba(3, 15, 26, .95) 0%, rgba(3, 15, 26, .58) 43%, rgba(3, 15, 26, .12) 100%), url("/static/public_site/images/atlas/conversation-context.png"); }
@media (max-width: 720px) { .experience-editorial { min-height: 14rem; border-radius: 1.2rem; background-position: 63% center; } }
/* Ocho relaciones siguen siendo legibles: órbita asimétrica y caption editorial. */
.experience-map__canvas { min-height: clamp(30rem, 48vw, 40rem); }
.experience-editorial { position: relative; display: flex; align-items: end; margin-block: clamp(1.5rem, 5vw, 4rem); }
.experience-editorial__caption { position: relative; width: min(100% - 2rem, 31rem); margin: 1rem; padding: clamp(1rem, 2.4vw, 1.6rem); border: 1px solid rgba(116, 226, 255, .28); border-radius: 1rem; background: linear-gradient(135deg, rgba(2, 16, 28, .90), rgba(3, 31, 49, .68)); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(10px); }
.experience-editorial__caption span { color: #5beaff; font: 800 .67rem var(--public-font-title); letter-spacing: .13em; text-transform: uppercase; }
.experience-editorial__caption strong { display: block; margin-top: .55rem; color: #fff; font: 800 clamp(1.3rem, 2.6vw, 2rem)/1.03 var(--public-font-title); letter-spacing: -.04em; }
.experience-editorial__caption p { margin: .6rem 0 0; color: #c0e4ee; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) { .experience-editorial__caption { animation: editorial-caption-rise 640ms var(--public-ease-out) both; } }
@keyframes editorial-caption-rise { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@media (max-width: 720px) { .experience-map__canvas { min-height: 39rem; } .experience-editorial__caption { width: calc(100% - 1.25rem); margin: .625rem; } }
@media (prefers-reduced-motion: reduce) { .experience-editorial__caption { animation: none; } }@media (prefers-reduced-motion: no-preference) { .experience-editorial::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, transparent 34%, rgba(113, 237, 255, .13) 49%, transparent 64%); transform: translateX(-110%); animation: editorial-light-pass 7s var(--public-ease-flow) infinite; pointer-events: none; } }
@keyframes editorial-light-pass { 0%, 20% { transform: translateX(-110%); } 44%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .experience-editorial::after { display: none; } }