[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(11rem, .34fr) minmax(0, 1fr); 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.webp"); }
.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.webp"); }
.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.webp"); }
@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; } }
/* Conversación ilustrativa: el contexto se muestra como evidencia antes de la respuesta humana. */
.experience-conversation__phone { position: relative; isolation: isolate; gap: .85rem; padding: 1rem; }
.experience-conversation__phone-bar { display: flex; align-items: center; justify-content: space-between; min-height: 2.3rem; padding: 0 .2rem .65rem; border-bottom: 1px solid rgba(119, 228, 255, .16); color: #d9f6ff; font: 800 .72rem var(--public-font-title); letter-spacing: .02em; }
.experience-conversation__phone-bar span { display: inline-flex; align-items: center; gap: .45rem; }
.experience-conversation__phone-bar i { color: #56e9ff; font-size: 1rem; }
.experience-conversation__presence { width: .48rem; height: .48rem; border-radius: 50%; background: #5aeda2; box-shadow: 0 0 .8rem rgba(90, 237, 162, .76); }
.experience-conversation__context { display: grid; gap: .48rem; max-width: 94%; margin-left: auto; padding: .9rem; border: 1px solid rgba(90, 235, 255, .35); border-radius: 1rem; background: linear-gradient(135deg, rgba(0, 104, 129, .34), rgba(7, 40, 70, .74)); box-shadow: 0 .75rem 1.8rem rgba(0, 0, 0, .17), inset 0 1px rgba(255, 255, 255, .09); }
.experience-conversation__context-label { display: inline-flex; align-items: center; gap: .42rem; color: #69edff; font: 800 .66rem var(--public-font-title); letter-spacing: .1em; text-transform: uppercase; }
.experience-conversation__context-label i { font-size: .98rem; }
.experience-conversation__context strong { color: #fff; font: 800 .98rem var(--public-font-title); }
.experience-conversation__context p { margin: 0; color: #c5eef7; font-size: .79rem; line-height: 1.42; }
.experience-conversation__context-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.experience-conversation__context-tags span { padding: .22rem .46rem; border: 1px solid rgba(134, 237, 255, .18); border-radius: 999px; background: rgba(1, 16, 29, .34); color: #c6f5ff; font: 700 .61rem var(--public-font-title); }
@media (prefers-reduced-motion: no-preference) { .experience-conversation__presence { animation: conversation-presence 2.8s ease-in-out infinite; } }
@keyframes conversation-presence { 50% { box-shadow: 0 0 1.25rem rgba(90, 237, 162, .94); transform: scale(1.18); } }
/* Recursos: cada elección arma una composición propia, sin repetir el atlas de conexiones. */
.experience-resource-hub__visual { position: relative; display: grid; min-height: 13.5rem; place-items: center; margin-top: 1.25rem; overflow: hidden; border: 1px solid rgba(105, 230, 255, .16); border-radius: .9rem; background: radial-gradient(circle at 50% 50%, rgba(0, 202, 246, .13), transparent 34%), linear-gradient(145deg, rgba(2, 19, 33, .84), rgba(3, 40, 60, .58)); isolation: isolate; }
.experience-resource-hub__orbit { position: absolute; border: 1px solid rgba(77, 231, 255, .18); border-radius: 50%; pointer-events: none; }
.experience-resource-hub__orbit--outer { width: 13rem; height: 13rem; }
.experience-resource-hub__orbit--inner { width: 8.5rem; height: 8.5rem; border-color: rgba(77, 231, 255, .3); }
.experience-resource-hub__core { position: relative; z-index: 2; display: grid; width: 6.8rem; min-height: 6.8rem; place-items: center; align-content: center; gap: .42rem; padding: .75rem; border: 1px solid rgba(92, 238, 255, .64); border-radius: 1.1rem; background: radial-gradient(circle at 50% 20%, rgba(98, 236, 255, .34), transparent 43%), rgba(2, 43, 62, .94); box-shadow: 0 0 2.25rem rgba(0, 229, 255, .23), inset 0 1px rgba(255, 255, 255, .17); color: #f1fdff; text-align: center; }
.experience-resource-hub__core i { color: #67efff; font-size: 1.72rem; text-shadow: 0 0 1rem rgba(0, 229, 255, .7); }
.experience-resource-hub__core span { font: 800 .7rem/1.15 var(--public-font-title); }
.experience-resource-hub__signal { position: absolute; z-index: 2; padding: .38rem .54rem; border: 1px solid rgba(130, 232, 255, .27); border-radius: 999px; background: rgba(3, 30, 48, .85); box-shadow: 0 .65rem 1.15rem rgba(0, 0, 0, .16); color: #c9f6ff; font: 700 .61rem var(--public-font-title); white-space: nowrap; }
.experience-resource-hub__signal--one { top: 16%; left: 10%; }
.experience-resource-hub__signal--two { right: 8%; bottom: 19%; }
.experience-resource-hub__signal--three { top: 20%; right: 9%; }
.experience-resource-hub__spark { position: absolute; z-index: 1; width: .38rem; height: .38rem; border-radius: 50%; background: #4eeeff; box-shadow: 0 0 .9rem rgba(78, 238, 255, .96); }
.experience-resource-hub__spark--one { top: 28%; left: 31%; }
.experience-resource-hub__spark--two { right: 29%; bottom: 29%; }
.experience-resource-hub__spark--three { bottom: 21%; left: 38%; }
@media (prefers-reduced-motion: no-preference) { .experience-resource-hub__orbit--outer { animation: resource-orbit 16s linear infinite; } .experience-resource-hub__orbit--inner { animation: resource-orbit 10s linear infinite reverse; } .experience-resource-hub__core { animation: resource-core-breathe 4s ease-in-out infinite; } .experience-resource-hub__spark { animation: resource-spark 2.8s ease-in-out infinite; } .experience-resource-hub__spark--two { animation-delay: .8s; } .experience-resource-hub__spark--three { animation-delay: 1.55s; } }
@keyframes resource-orbit { to { transform: rotate(360deg); } }
@keyframes resource-core-breathe { 50% { box-shadow: 0 0 3rem rgba(0, 229, 255, .36), inset 0 1px rgba(255, 255, 255, .22); transform: translateY(-.16rem); } }
@keyframes resource-spark { 50% { opacity: .35; transform: scale(.68); } }
@media (max-width: 720px) { .experience-resource-hub__visual { min-height: 12.4rem; } .experience-resource-hub__signal--one { left: 6%; } .experience-resource-hub__signal--two { right: 5%; } .experience-resource-hub__signal--three { right: 6%; } }
@media (prefers-reduced-motion: reduce) { .experience-resource-hub__orbit, .experience-resource-hub__core, .experience-resource-hub__spark { animation: none; } }
/* Portada editorial de capítulo: una lectura visual propia antes del contenido funcional. */
.experience-chapter-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(22rem, 1.22fr);
  min-height: clamp(15rem, 30vw, 23rem);
  margin-top: clamp(1.2rem, 4vw, 3.4rem);
  padding: clamp(1.4rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(96, 225, 255, .2);
  border-radius: clamp(1.35rem, 3vw, 2rem);
  background: linear-gradient(122deg, rgba(2, 19, 34, .98), rgba(3, 41, 62, .8));
  box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .07);
  isolation: isolate;
}
.experience-chapter-hero__copy { position: relative; z-index: 3; display: grid; align-content: end; max-width: 29rem; padding: clamp(.4rem, 2vw, 1.25rem) 0; }
.experience-chapter-hero__eyebrow { margin: 0; color: #59eaff; font: 800 .7rem var(--public-font-title); letter-spacing: .15em; text-transform: uppercase; }
.experience-chapter-hero__statement { margin: .7rem 0 0; color: #eefcff; font: 800 clamp(1.6rem, 3vw, 2.85rem)/1.02 var(--public-font-title); letter-spacing: -.05em; }
.experience-chapter-hero__visual { position: absolute; z-index: 1; inset: 0 0 0 36%; overflow: hidden; background: linear-gradient(90deg, rgba(2, 17, 29, .92) 0%, rgba(2, 17, 29, .38) 30%, rgba(2, 17, 29, .04) 70%), radial-gradient(circle at 58% 26%, rgba(0, 229, 255, .35), transparent 29%), linear-gradient(145deg, #073953, #010a15); background-position: center; background-size: cover; }
.experience-chapter-hero--producto .experience-chapter-hero__visual { background-image: linear-gradient(90deg, rgba(2, 17, 29, .93) 0%, rgba(2, 17, 29, .39) 30%, rgba(2, 17, 29, .04) 70%), linear-gradient(145deg, rgba(0, 229, 255, .15), transparent 55%), url("/static/public_site/images/atlas/operation-control-v1.webp"); }
.experience-chapter-hero--soluciones .experience-chapter-hero__visual { background-image: linear-gradient(90deg, rgba(2, 17, 29, .93) 0%, rgba(2, 17, 29, .4) 30%, rgba(2, 17, 29, .06) 70%), linear-gradient(145deg, rgba(66, 150, 255, .17), transparent 55%), url("/static/public_site/images/atlas/commerce-catalog-v1.webp"); }
.experience-chapter-hero--integraciones .experience-chapter-hero__visual { background-image: linear-gradient(90deg, rgba(2, 17, 29, .93) 0%, rgba(2, 17, 29, .42) 30%, rgba(2, 17, 29, .07) 70%), linear-gradient(145deg, rgba(53, 243, 188, .14), transparent 55%), url("/static/public_site/images/atlas/conversation-operator-v1.webp"); }
.experience-chapter-hero__visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(108deg, transparent 28%, rgba(107, 240, 255, .18) 49%, transparent 68%); transform: translate3d(-120%, 0, 0); pointer-events: none; }
.experience-chapter-hero__mesh { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(85, 228, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(85, 228, 255, .12) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(90deg, transparent, #000 38%); }
.experience-chapter-hero__glow { position: absolute; width: 12rem; height: 12rem; border: 1px solid rgba(94, 236, 255, .36); border-radius: 50%; box-shadow: 0 0 2.8rem rgba(0, 229, 255, .18), inset 0 0 2rem rgba(0, 229, 255, .09); }
.experience-chapter-hero__glow--one { top: 11%; right: 15%; }
.experience-chapter-hero__glow--two { width: 6.5rem; height: 6.5rem; right: 33%; bottom: 12%; border-color: rgba(121, 156, 255, .4); }
.experience-chapter-hero__signal { position: absolute; z-index: 2; padding: .44rem .7rem; border: 1px solid rgba(139, 239, 255, .31); border-radius: 999px; background: rgba(3, 28, 45, .74); box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .18); color: #d9faff; font: 800 .62rem var(--public-font-title); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(.5rem); }
.experience-chapter-hero__signal--one { top: 18%; right: 10%; }
.experience-chapter-hero__signal--two { right: 33%; bottom: 16%; }
.experience-chapter-hero__signal--three { right: 12%; bottom: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .experience-chapter-hero__visual::after { animation: chapter-visual-pass 7.2s var(--public-ease-flow) infinite; }
  .experience-chapter-hero__glow--one { animation: chapter-visual-orbit 16s linear infinite; }
  .experience-chapter-hero__glow--two { animation: chapter-visual-orbit 11s linear infinite reverse; }
}
@keyframes chapter-visual-pass { 0%, 20% { transform: translate3d(-120%, 0, 0); } 48%, 100% { transform: translate3d(120%, 0, 0); } }
@keyframes chapter-visual-orbit { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .experience-chapter-hero { grid-template-columns: 1fr; min-height: 22rem; align-items: end; }
  .experience-chapter-hero__visual { inset: 0; opacity: .72; }
  .experience-chapter-hero__copy { padding-top: 8rem; }
  .experience-chapter-hero__signal--two { right: 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-chapter-hero__visual::after, .experience-chapter-hero__glow { animation: none; }
}
/* Recursos se presenta como orientación editorial: criterio y próximo paso, no un atlas repetido. */
.experience-chapter-hero--recursos .experience-chapter-hero__visual {
  background-image: linear-gradient(90deg, rgba(2, 17, 29, .94) 0%, rgba(2, 17, 29, .46) 31%, rgba(2, 17, 29, .08) 70%), linear-gradient(145deg, rgba(140, 123, 255, .20), transparent 55%), url("/static/public_site/images/atlas/resources-guidance-v1.webp");
}
.experience-chapter-hero--recursos .experience-chapter-hero__glow--one {
  border-color: rgba(140, 123, 255, .50);
  box-shadow: 0 0 2.8rem rgba(140, 123, 255, .24), inset 0 0 2rem rgba(9, 217, 239, .09);
}
.experience-chapter-hero--recursos .experience-chapter-hero__signal--one { color: #e3ddff; }
/* Sectores usa una escena de operación real: variedad de rubros con una base común. */
.experience-chapter-hero--sectores .experience-chapter-hero__visual {
  background-image: linear-gradient(90deg, rgba(2, 17, 29, .94) 0%, rgba(2, 17, 29, .44) 31%, rgba(2, 17, 29, .08) 70%), linear-gradient(145deg, rgba(255, 181, 86, .17), transparent 56%), url("/static/public_site/images/atlas/sectors-operation-v1.webp");
}
.experience-chapter-hero--sectores .experience-chapter-hero__glow--two {
  border-color: rgba(255, 190, 103, .46);
  box-shadow: 0 0 2.2rem rgba(255, 171, 67, .18), inset 0 0 1.4rem rgba(255, 196, 112, .07);
}
.experience-chapter-hero--sectores .experience-chapter-hero__signal--three { color: #ffe3b5; }
.experience-selector__visual, .experience-timeline__visual { position: relative; min-height: 8.2rem; margin-bottom: .9rem; overflow: hidden; border: 1px solid rgba(99,220,255,.22); border-radius: .85rem; background: linear-gradient(145deg, rgba(2,22,38,.9), rgba(2,57,73,.62)); isolation: isolate; }
.experience-selector__visual img, .experience-timeline__visual img { display: block; width: 100%; height: 8.2rem; object-fit: cover; opacity: .72; mix-blend-mode: screen; transition: opacity .26s ease, transform .36s var(--public-ease-out), filter .26s ease; }
.experience-selector__visual::after, .experience-timeline__visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(3,17,29,.82), transparent 64%), linear-gradient(180deg, transparent, rgba(0,229,255,.18)); pointer-events: none; }
.experience-selector__visual.is-swapping img, .experience-timeline__visual.is-swapping img { opacity: 1; transform: scale(1.045); filter: saturate(1.2); }
.experience-selector__visual-glow, .experience-timeline__visual-scan { position: absolute; inset: 10% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #52eaff, transparent); box-shadow: 0 0 1rem #00e5ff; animation: experience-visual-scan 3.2s ease-in-out infinite; z-index: 1; }
@keyframes experience-visual-scan { 50% { transform: translateY(6.2rem); opacity: .3; } }
.experience-timeline__detail { display: grid; grid-template-columns: minmax(10rem, .65fr) minmax(0, 1fr); column-gap: 1.2rem; }
.experience-timeline__detail > :not(.experience-timeline__visual) { grid-column: 2; }
.experience-timeline__detail .experience-timeline__visual { grid-row: 1 / span 4; margin: 0; }
.experience-timeline__detail .experience-timeline__confirmation { grid-column: 2; }
.experience-resource-hub__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; mix-blend-mode: screen; transition: opacity .3s ease, transform .45s var(--public-ease-out), filter .3s ease; }
.experience-resource-hub__visual.is-swapping .experience-resource-hub__image { opacity: .36; transform: scale(1.05); filter: saturate(1.3); }
.experience-resource-hub__core, .experience-resource-hub__signal { z-index: 2; }
@media (max-width: 720px) { .experience-timeline__detail { grid-template-columns: 1fr; } .experience-timeline__detail > :not(.experience-timeline__visual) { grid-column: 1; } .experience-timeline__detail .experience-timeline__visual { grid-row: auto; margin-bottom: .85rem; } .experience-timeline__detail .experience-timeline__confirmation { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .experience-selector__visual-glow, .experience-timeline__visual-scan { animation: none; } .experience-selector__visual img, .experience-timeline__visual img, .experience-resource-hub__image { transition: none; } }

/* Las proporciones estaban al reves y explicaban DOS quejas de una sola vez:
   la lista de botones se llevaba 1fr y la escena .75fr, asi que cada boton
   media 629px (deformado, con el texto perdido a la izquierda) mientras la
   imagen quedaba apretada al costado. Ahora la columna ancha es la de la
   escena y los botones ocupan lo que necesitan. */
.experience-selector__visual, .experience-timeline__visual {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
/* 8.2rem fijos achataban la foto a 131px de alto. El alto sale de la
   proporcion, que es la de los archivos (1672x941 = 16:9), asi que `cover`
   no recorta. */
.experience-selector__visual img, .experience-timeline__visual img {
  height: 100%;
}

/* La linea de tiempo de Como funciona usa las fotos HECHAS PARA ESOS PASOS
   (how-*), que son 3:2 -- las del set viejo eran 16:9 y ademas casi no se
   distinguian entre si. Con la caja en 16:9, `cover` les cortaba ~16% de alto.
   El selector de recorridos sigue con sus fotos 16:9 y no se toca. */
.experience-timeline__visual { aspect-ratio: 3 / 2; }