/* Escena 3D de servicios: pila completa ([data-iso3d=stack]) y una sola capa ([data-iso3d=layer]). CSS 3D real, sin librerías. Solo tokens de main.css.
   Reglas de 3D: solo .i3-view (el contenedor con perspective) recorta con overflow/mask; ningún otro ancestro de la escena usa overflow, filter, mask ni opacity<1; todo el preserve-3d es continuo.
   Se anima solo transform/translate/scale y opacity (esta última únicamente en caras hoja). */
.i3page, .i3m { --n: #dfe5f1; --rd: #f43f5e; --ac: var(--accent); --pb: 46px; --pe: 54px; }
:root[data-theme="dark"] :is(.i3page, .i3m) { --n: #3a5391; }
.c-op { --lc: #2a4a94; --lcd: #002060; --li: #002060; --c1: #e8edf7; --c2: var(--accent); --hot: var(--accent); --gl: var(--accent); }
.c-au { --lc: #e26714; --lcd: #bf540d; --li: #b04e0a; --c1: #002060; --c2: #fff; --hot: #4f7bd8; --gl: var(--navy); }
.c-de { --lc: #6f8fc4; --lcd: #46689f; --li: #3d5f96; --c1: #002060; --c2: var(--accent); --hot: var(--accent); --gl: var(--accent); }
.c-ma { --lc: #c9d3e8; --zc: #f6f8fc; }
:root[data-theme="dark"] .c-op { --lc: #4f7bd8; --lcd: #2a55b0; --li: #9db8f2; --c1: #dbe5fb; }
:root[data-theme="dark"] .c-au { --li: #f59a5b; --gl: #fff; }
:root[data-theme="dark"] .c-de { --lc: #8ea6cf; --lcd: #6f86ad; --li: #cdd6e8; }
:root[data-theme="dark"] .c-ma { --lc: #1d3566; --zc: #0f2759; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- página ---- */
.i3-hero { padding: clamp(6.5rem, 12vw, 8.5rem) 0 1rem; text-align: center; }
.i3-hero h1 { max-width: 20ch; margin: .75rem auto 1rem; }
.i3-hero p { max-width: 62ch; margin: 0 auto; color: var(--text-2); font-size: 1.125rem; line-height: 1.6; }
.i3-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.i3-legend li { display: flex; align-items: center; gap: .5rem; color: var(--text-2); }
.i3-legend i { width: 14px; height: 14px; border-radius: 50%; background: var(--lc); flex: none; }
.i3-legend b { color: var(--li); font-weight: 400; }
.i3-sec { padding-top: 1rem; }
.i3-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 2rem; align-items: start; max-width: 1180px; margin: 0 auto; }
.i3-wrap { min-width: 0; }
.i3-panel { min-width: 0; }
.i3-final { text-align: center; }
.i3-final p { color: var(--text-2); margin: .5rem 0 1.25rem; }

/* ---- escena ---- */
.i3 { --ex: 1; }
.i3-view { position: relative; height: clamp(520px, 78vh, 700px); perspective: 1600px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; }
[data-iso3d=stack] .i3-view { -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.i3-view.gr { cursor: grabbing; }
.i3-world, .i3-stack, .i3-L, .i3-LI { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.i3-world { left: 50%; top: 52%; }
.i3-stack { --pitch: calc(var(--pb) + var(--pe) * var(--ex)); --p: 0; --f: 0; will-change: transform; translate: 0 calc((var(--f) - 3.5) * var(--pitch) * var(--p)); }
.i3-L { translate: 0 calc((3.5 - var(--i)) * var(--pitch) - var(--sg, 0) * var(--p) * 44px); }
.i3-LI { transition: translate .5s var(--ease); }
.pn .act > .i3-LI { translate: 0 -16px; }

/* caja de 6 caras: .bx es un punto (0x0) y las caras salen de él */
.bx { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; display: block; text-decoration: none; font-style: normal;
  --W: calc(var(--w) * 1px); --D: calc(var(--d) * 1px); --H: calc(var(--h) * 1px);
  translate: calc(var(--x) * 1px) calc(-7.5px - (var(--y, 0) + var(--h) / 2) * 1px) calc(var(--z) * 1px); }
.bx > i { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; backface-visibility: hidden; opacity: var(--dim, 1); transition: opacity .3s;
  background: linear-gradient(rgb(0 0 0 / var(--sh, 0)), rgb(0 0 0 / var(--sh, 0))), var(--c); }
.bx > i:nth-child(1) { width: var(--W); height: var(--D); transform: rotateX(90deg) translateZ(calc(var(--H) / 2)) translate(-50%, -50%); }
.bx > i:nth-child(2) { --sh: .5; width: var(--W); height: var(--D); transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)) translate(-50%, -50%); }
.bx > i:nth-child(3) { --sh: .12; width: var(--W); height: var(--H); transform: translateZ(calc(var(--D) / 2)) translate(-50%, -50%); }
.bx > i:nth-child(4) { --sh: .36; width: var(--W); height: var(--H); transform: rotateY(180deg) translateZ(calc(var(--D) / 2)) translate(-50%, -50%); }
.bx > i:nth-child(5) { --sh: .26; width: var(--D); height: var(--H); transform: rotateY(90deg) translateZ(calc(var(--W) / 2)) translate(-50%, -50%); }
.bx > i:nth-child(6) { --sh: .4; width: var(--D); height: var(--H); transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)) translate(-50%, -50%); }
.k0 { --c: var(--lc); } .k1 { --c: var(--c1); } .k2 { --c: var(--c2); } .k3 { --c: var(--n); } .k4 { --c: var(--rd); } .k5 { --c: var(--ac); }
.bx.hot { --c: var(--hot); scale: 1.18; transition: scale .3s; }

/* losa y mapa */
.sl { --c: var(--lc); translate: 0 0 0; --w: 300; --d: 130; --h: 14; }
.sl > i:nth-child(1) { background: linear-gradient(90deg, rgb(0 0 0 / .07) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(rgb(0 0 0 / .07) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .5)), var(--c); }
.dim { --dim: .22; }
.act .sl > i:nth-child(1) { box-shadow: 0 0 0 3px var(--gl), 0 0 28px var(--gl); }
.pr .act .bx:not(.sl):not(.hot) { --dim: .7; }
.pr .dim { --dim: .1; }
.zt { --c: var(--zc); }
.zt.on { --c: var(--accent); }
.zt > i { backface-visibility: visible; }
.ln { display: none; --c: var(--accent); --W: 3px; --D: 3px; --H: calc(var(--k) * var(--pitch) + 2px); translate: calc(var(--x) * 1px) calc(-7.5px - var(--H) / 2) calc(var(--z) * 1px); }
.ln.on { display: block; }

/* etiquetas que siempre miran a cámara (JS contrarrota cada pastilla) */
.lb { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; display: block; translate: calc(var(--x) * 1px) calc(-7.5px - var(--y, 0) * 1px) calc(var(--z) * 1px); pointer-events: none; }
.lb > span { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: .35rem; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .75rem; line-height: 1.4; box-shadow: var(--shadow); }
.lb .n { display: grid; place-items: center; width: 20px; height: 20px; margin: 0 -4px 0 -6px; border-radius: 50%; background: var(--navy-fill); color: var(--on-fill); font-size: .6875rem; font-style: normal; }
.lb em { font-style: normal; }
.lb:not(.zl):not(.mp) em { display: none; }
.ex .lb:not(.zl):not(.mp) em, .lb.on em { display: inline; }
.zl > span { font-size: .6875rem; padding: 1px 7px; }
.zl.on > span { border-color: var(--accent-ink); color: var(--accent-ink); }
.mp > span { background: transparent; border: 0; box-shadow: none; color: var(--text-2); }
.act .lb > span { border-color: var(--accent-ink); }

/* ---- animaciones de objetos ---- */
.a { animation-duration: var(--du, 3s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: calc(var(--dl, 0) * -1s); }
.a-bob { animation-name: bob; } .a-grow { animation-name: grow; transform-origin: 0 calc(var(--h) * .5px); }
.a-drop { animation-name: drop; animation-timing-function: cubic-bezier(.5, 0, 1, .6); } .a-belt { animation-name: belt; animation-timing-function: linear; }
.a-spin { animation-name: spin; animation-timing-function: linear; } .a-scan { animation-name: scan; }
.a-slide { animation-name: slide; } .a-pulse { animation-name: pulse; } .a-hit { animation-name: hit; } .a-stamp { animation-name: stamp; }
.a-blink > i { animation: blink 1.6s steps(1) infinite; animation-delay: calc(var(--dl, 0) * -1s); }
.hot.h-p { animation: pulse 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes grow { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes drop { 0% { transform: translateY(-80px); } 20%, 80% { transform: none; } 100% { transform: translateY(-80px); } }
@keyframes belt { 0% { transform: translateX(-85px) scale(.2); } 10% { transform: translateX(-70px) scale(1); } 90% { transform: translateX(70px) scale(1); } 100% { transform: translateX(85px) scale(.2); } }
@keyframes spin { to { transform: rotateY(360deg); } }
@keyframes scan { 0%, 100% { transform: translateZ(-62px); } 50% { transform: translateZ(62px); } }
@keyframes slide { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes pulse { 50% { transform: scale(1.14); } }
@keyframes hit { 0%, 100% { transform: translateX(0); } 40%, 52% { transform: translateX(-52px); } 60% { transform: translateX(-44px); } }
@keyframes stamp { 50% { transform: translateY(9px); } }
@keyframes blink { 0%, 100% { opacity: var(--dim, 1); } 50% { opacity: calc(var(--dim, 1) * .15); } }
.off .a, .off .a > i, .off .hot { animation-play-state: paused; }
.pr .a:not(.hot), .pr .a:not(.hot) > i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .a, .a > i, .hot.h-p { animation: none; } .i3-LI, .bx > i, .bx.hot { transition: none; } }

/* ---- controles ---- */
.i3-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; margin-top: .75rem; }
.i3-b, .i3-chip, .i3-lb, .i3-nav button, .i3-x { min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.i3-b:hover, .i3-chip:hover, .i3-lb:hover, .i3-nav button:hover:not(:disabled), .i3-x:hover { border-color: var(--navy-fill); }
.i3-b[aria-pressed="true"], .i3-chip[aria-pressed="true"], .i3-lb[aria-pressed="true"], .i3-nav [aria-pressed="true"] { background: var(--navy-fill); border-color: var(--navy-fill); color: var(--on-fill); }
.i3-rot { display: inline-flex; gap: .35rem; }
.i3-rot .i3-b { width: 44px; padding: 0; font-size: 1.4rem; line-height: 1; }
.i3-sl { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-2); }
.i3-sl input { width: 130px; accent-color: var(--accent-btn); height: 44px; }
.i3-tg .t1, .i3-tg .t2, .i3-play .t1, .i3-play .t2 { display: none; }
.i3-tg[data-x="0"] .t1, .i3-tg[data-x="1"] .t2, .i3-play[aria-pressed="false"] .t1, .i3-play[aria-pressed="true"] .t2 { display: inline; }
:is(.i3-b, .i3-chip, .i3-lb, .i3-nav button, .i3-x, .i3-sl input, .i3-link):focus-visible, .i3-ch:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.i3-note { text-align: center; color: var(--text-3); font-size: .9375rem; margin: .75rem auto 0; max-width: 56ch; }

/* ---- panel ---- */
.i3-panel { position: sticky; top: 92px; display: grid; gap: 1rem; }
.i3-ph { font-size: 1.125rem; margin: 0 0 .5rem; }
.i3-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.i3-lb { display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; align-items: center; width: 100%; padding: .3rem .75rem .3rem .4rem; border-radius: var(--radius-sm); text-align: left; }
.i3-lb .n, .i3-ch .n, .i3-st .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lc); color: #fff; font-size: .8125rem; grid-row: span 2; flex: none; }
.c-au :is(.i3-lb,.i3-ch,.i3-st) .n, .c-de :is(.i3-lb,.i3-ch,.i3-st) .n, .i3-lb.c-au .n, .i3-lb.c-de .n { color: #002060; }
.i3-lt { font-size: .875rem; line-height: 1.25; }
.i3-lg { font-size: .75rem; color: var(--li); }
.i3-lb[aria-pressed="true"] .i3-lg { color: inherit; }
.i3-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.i3-chip { padding: .4rem .9rem; }
.i3-pains, .i3-proc { margin-top: .75rem; }
.i3-pain, .i3-card { padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.i3-pain > :is(h3, h4) { margin: 0 0 .15rem; font-size: 1.0625rem; }
.i3-lead { margin: 0 0 .5rem; color: var(--accent-ink); }
.i3-pain ol, .i3-inc { margin: 0 0 .75rem; padding-left: 1.25rem; color: var(--text-2); }
.i3-pain li, .i3-inc li { margin-bottom: .35rem; }
.i3-pz { margin: 0 0 .5rem; font-size: .875rem; color: var(--text-3); }
.i3-pz b { color: var(--text); font-weight: 400; margin-right: .4rem; }
.i3-ly { margin: 0 0 .75rem; font-size: .875rem; color: var(--text-3); }
.i3-cta, .i3-end { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.i3-fine { margin: 0; font-size: .875rem; color: var(--text-3); }
.i3-ch { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; font-size: 1.25rem; }
.i3-ch small { font-size: .8125rem; color: var(--li); font-weight: 400; }
.i3-why { margin: 0 0 .75rem; color: var(--text-2); }
.i3-h4 { font-size: .9375rem; margin: .75rem 0 .35rem; color: var(--text-2); font-weight: 400; }
.i3-steps { list-style: none; margin: 0 0 .75rem; padding: 0; }
.i3-st { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: 1.0625rem; }
.i3-st .n { width: 24px; height: 24px; grid-row: auto; }
.i3-step p { margin: 0 0 .5rem; color: var(--text-2); }
.i3-rc { padding: .5rem .75rem; border-left: 3px solid var(--lc); background: var(--bg-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.i3-rc b { display: block; color: var(--text); font-weight: 400; font-size: .8125rem; }
.i3-link { color: var(--accent-ink); }
.i3-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }
.i3-nav button { padding: .3rem .85rem; }
.i3-nav button:disabled { opacity: .45; cursor: default; }
.i3-dots { display: inline-flex; gap: 2px; margin-left: auto; }
.i3-dots button { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.i3-dots button::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.i3-dots button[aria-current] ::after, .i3-dots button[aria-current]::after { background: var(--accent-btn); transform: scale(1.3); }
.i3-x { margin-top: .75rem; }
/* Los pasos se recogen solo cuando iso3d.js arrancó (pone .i3-ready); si el script no carga, se ven todos. */
.i3-ready .i3-step:not(.is-on) { display: none; }
.js .i3-pain[hidden], .js .i3-card[hidden], .js .i3-proc[hidden], .js .i3-home[hidden] { display: none; }
html:not(.js) .i3-nav, html:not(.js) .i3-x, html:not(.js) .i3-chips, html:not(.js) .i3-ctl { display: none; }
.i3-card, .i3-pain { margin-bottom: .75rem; }
.i3-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; max-width: 1180px; margin: 1.25rem auto 0; padding: 0; list-style: none; }
.i3-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.i3-links a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* ---- una sola capa ---- */
.i3m--layer .i3-grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 1.5rem; align-items: center; }
.i3m--layer .i3-view { height: clamp(380px, 50vh, 470px); }
.i3m--layer .i3-world { top: 50%; }
.i3m--layer .i3-panel { position: static; }
.i3m--layer .i3-card { margin-bottom: 0; }
.i3m--layer .i3-nav { margin-top: 0; }
.i3m--layer .i3-steps { margin-bottom: .5rem; }
.i3m--layer .i3-end { margin: .75rem 0 .5rem; }

@media (max-width: 960px) { .i3-grid, .i3m--layer .i3-grid { grid-template-columns: 1fr; } .i3-panel { position: static; } }
@media (max-width: 760px) {
  .i3page, .i3m { --pb: 40px; --pe: 36px; }
  .i3-view { height: 360px; }
  .i3m--layer .i3-view { height: 340px; }
  .i3-sl input { width: 100px; }
  .ex .lb:not(.zl):not(.mp):not(.on) em { display: none; }
  .i3-list { grid-template-columns: 1fr; }
  .in-proc > .i3-ph, .in-proc > .i3-list { display: none; }
  .i3 { scroll-margin-top: 80px; }
  .i3-dots { margin-left: 0; flex-basis: 100%; justify-content: center; }
}
.i3-cta .btn, .i3-end .btn { padding: .65rem 1.25rem; }
.pr .lb { visibility: hidden; }

/* Reserva de alto: mientras carga el JS diferido la sección no salta ni muestra el contenido en bruto */
.js .i3m--layer .i3-grid { min-height: 440px; }
@media (max-width: 760px) { .js .i3m--layer .i3-grid { min-height: 600px; } }