/* /sesion/ — estilos solo de esta página. Usa los tokens del sitio (--teal, --coral, --bg…). */

/* El robot flotante del sitio no aplica aquí: esta página trae el suyo, junto al mapa. */
.robot-bubble, .robot-panel { display: none !important; }

@property --x  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --y  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --rx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --ry { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --z  { syntax: '<number>';     inherits: true; initial-value: 1; }

.ses {
  --navy: #0D1726; --ink: #14384A; --cream: #FEF6E3; --coral2: #EF7A74;
  --gut: clamp(16px, 4vw, 48px);
  overflow-x: clip;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ses a { text-shadow: none; }
.ses button:focus-visible, .ses a:focus-visible { outline: 3px solid #F2B84B; outline-offset: 3px; }

/* ── 1. Presentación ───────────────────────────────────────────────── */
.ses-hero { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gut) 8px; }
.ses-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.025em; color: var(--text-primary); margin: 0 0 14px; text-wrap: balance; }
.ses-hero p { text-wrap: pretty; max-width: 60ch; font-size: clamp(16px, 2vw, 18px); color: var(--text-secondary); line-height: 1.65; }

/* ── 2. Puertas ────────────────────────────────────────────────────── */
.doors { max-width: var(--max); margin: 0 auto; padding: clamp(20px, 4vw, 40px) var(--gut) clamp(36px, 6vw, 64px); }
.doors-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3.5vw, 44px); max-width: 880px; margin: 0 auto; }

.door {
  --leaf: #2B6E88; --leaf2: #1d4f66; --lit: #ffe3a1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door--ahora { --leaf: #1d4a66; --leaf2: #0D1726; --lit: #bfe9f7; }
.door--ayuda { --leaf: #E05C4A; --leaf2: #b13e2e; --lit: #fff0c2; }

.door-sign {
  font-weight: 800; font-size: clamp(10.5px, 2.8vw, 14px); letter-spacing: .14em; text-transform: uppercase;
  background: var(--navy); color: #fff; padding: 7px clamp(8px, 2vw, 16px); border-radius: 4px; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(13,23,38,.2);
}
.door-frame {
  position: relative; display: block; width: min(100%, 210px); aspect-ratio: 3 / 4.1;
  border-radius: 999px 999px 6px 6px; border: clamp(4px, 1vw, 7px) solid #d9d2c3;
  background: #cfc7b6; box-shadow: 0 18px 30px -12px rgba(13,23,38,.35), inset 0 0 0 1px rgba(13,23,38,.12);
  perspective: 1000px; overflow: hidden;
}
.door-room {
  position: absolute; inset: 0; border-radius: 999px 999px 0 0; overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, var(--lit) 0%, rgba(255,255,255,.55) 55%, #f4efe3 100%);
  opacity: .4; transition: opacity .5s;
}
.door-room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: rgba(13,23,38,.14); }
.door-leaf {
  position: absolute; inset: 0; border-radius: 999px 999px 0 0; color: rgba(255,255,255,.92);
  background: linear-gradient(100deg, var(--leaf2), var(--leaf) 55%, var(--leaf));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset -10px 0 24px rgba(0,0,0,.18);
  transform-origin: left center; transition: transform .75s cubic-bezier(.2,.9,.25,1);
  display: grid; place-items: start center;
}
.door-leaf::before, .door-leaf::after { content: ""; position: absolute; left: 15%; right: 15%; border: 2px solid rgba(255,255,255,.26); border-radius: 8px; }
.door-leaf::before { top: 11%; bottom: 52%; border-radius: 999px 999px 8px 8px; }
.door-leaf::after  { top: 52%; bottom: 8%; }
.door-ico { position: relative; z-index: 1; width: 34%; margin-top: 24%; }
.door-knob {
  position: absolute; right: 11%; top: 54%; width: clamp(8px, 2.2vw, 13px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a63c 60%, #9a6f1c); box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.door-text { font-size: clamp(12.5px, 3.2vw, 15.5px); font-weight: 600; color: var(--text-primary); line-height: 1.35; max-width: 20ch; }
.door-go { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.door--ayuda .door-go { color: #b13e2e; }
.door-go::after { content: " →"; }

.door[aria-expanded="true"] .door-leaf { transform: perspective(1000px) rotateY(58deg); }
.door[aria-expanded="true"] .door-room, .door:focus-visible .door-room { opacity: 1; }
.door[aria-expanded="true"] .door-go::after { content: " ↓"; }
.door[aria-expanded="true"] .door-frame { box-shadow: 0 18px 40px -10px color-mix(in srgb, var(--leaf) 55%, transparent), inset 0 0 0 1px rgba(13,23,38,.12); }
@media (hover: hover) {
  .door:hover .door-leaf { transform: perspective(1000px) rotateY(34deg); }
  .door[aria-expanded="true"]:hover .door-leaf { transform: perspective(1000px) rotateY(58deg); }
  .door:hover .door-room { opacity: 1; }
}
.door--ayuda:not([aria-expanded="true"]) .door-frame { animation: sosGlow 2.8s ease-in-out infinite; }
@keyframes sosGlow { 0%, 100% { box-shadow: 0 18px 30px -12px rgba(13,23,38,.35); } 50% { box-shadow: 0 0 0 6px rgba(224,92,74,.18), 0 18px 34px -10px rgba(224,92,74,.5); } }

.door-panel {
  max-width: 880px; margin: clamp(18px, 3vw, 30px) auto 0; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: clamp(16px, 3vw, 28px); box-shadow: 0 20px 50px -20px rgba(13,23,38,.25);
  animation: rise .45s cubic-bezier(.2,.8,.2,1);
}
.door-panel[hidden] { display: none; }
.door-panel .lead { font-size: clamp(16px, 2.3vw, 19px); font-weight: 600; color: var(--text-primary); line-height: 1.5; margin: 0 0 14px; max-width: 58ch; }
.door-panel .nota, .zcard .nota { margin: 14px 0 0; font-size: 14px; font-weight: 700; color: #b13e2e; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Recurso (enlace) ──────────────────────────────────────────────── */
.res-list { display: grid; gap: 8px; }
.res-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; background: #fff; color: var(--text-primary);
  border: 1px solid var(--border-strong) !important; border-radius: 10px; text-decoration: none;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; font: inherit; text-align: left; width: 100%; cursor: pointer;
}
.res:hover { border-color: var(--accent) !important; background: var(--bg-card-2); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(43,110,136,.5); color: var(--text-primary); }
.res-t { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; }
.res-d { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.res-b { flex: 1; min-width: 0; }
.res-go { flex: none; font-weight: 700; color: var(--accent); margin-top: 1px; }
.res--alerta { border-color: rgba(224,92,74,.55) !important; background: #fff6f4; }
.res--alerta .res-go { color: #b13e2e; }
.res--nota { cursor: default; background: transparent; border-style: dashed !important; box-shadow: none; }
.res--nota:hover { transform: none; background: transparent; box-shadow: none; border-color: var(--border-strong) !important; }

/* ── 3. Mapa ───────────────────────────────────────────────────────── */
.park { background: radial-gradient(ellipse at 15% 0%, #123452 0, #0a1a29 55%, #07111b 100%); color: #e8f1f6; padding: clamp(36px, 6vw, 76px) 0; }
.park-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.park .eyebrow { color: #7fd0ee; }
.park h2 { color: #fff; font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 10px; }
.park-lede { color: rgba(232,241,246,.75); max-width: 58ch; font-size: clamp(15px, 1.9vw, 17px); margin: 0; }
.park-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.park-head-t { min-width: 0; }
.park-grid { position: relative; margin-top: clamp(18px, 3vw, 30px); }

.stage { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #07111b; isolation: isolate;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
.world {
  --x: 50%; --y: 50%; --rx: 30%; --ry: 30%; --z: 1;
  position: absolute; inset: 0; transform: scale(var(--z)); transform-origin: var(--x) var(--y);
  transition: --x .9s cubic-bezier(.2,.8,.2,1), --y .9s cubic-bezier(.2,.8,.2,1), --rx .9s, --ry .9s, --z .9s cubic-bezier(.2,.8,.2,1);
}
.world[data-active="plaza"]   { --x: 24%;   --y: 51%; --rx: 22%; --ry: 40%; --z: 1.14; }
.world[data-active="cancha"]  { --x: 50.5%; --y: 25%; --rx: 24%; --ry: 24%; --z: 1.14; }
.world[data-active="quiosco"] { --x: 81%;   --y: 49%; --rx: 14%; --ry: 24%; --z: 1.2; }
.world[data-active="ayuda"]   { --x: 50.2%; --y: 63%; --rx: 11%; --ry: 17%; --z: 1.22; }
.world[data-active="entrada"] { --x: 50%;   --y: 80%; --rx: 14%; --ry: 14%; --z: 1.2; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx i { position: absolute; display: block; }

.dim { position: absolute; inset: 0; background: rgba(3,10,18,.46); opacity: 0; transition: opacity .6s; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y), transparent 0, transparent 52%, #000 100%);
          mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y), transparent 0, transparent 52%, #000 100%); }
.lift { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y), rgba(255,230,180,.20) 0, rgba(255,226,170,.06) 55%, transparent 80%); }
.world[data-active] .dim, .world[data-active] .lift { opacity: 1; }

/* niebla que cruza el parque */
.fx-mist { overflow: hidden; mix-blend-mode: screen; opacity: .5; }
.fx-mist i { width: 70%; height: 55%; border-radius: 50%; background: radial-gradient(ellipse, rgba(150,190,220,.28), transparent 68%); filter: blur(18px); animation: mist 38s linear infinite; }
.fx-mist i:nth-child(1) { top: 52%; left: -40%; }
.fx-mist i:nth-child(2) { top: 18%; left: -70%; animation-duration: 52s; animation-delay: -20s; opacity: .8; }
@keyframes mist { to { transform: translateX(240%); } }

/* íconos neón que respiran */
.fx-glows i { width: var(--w); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--c) 0, transparent 62%); mix-blend-mode: screen; animation: breath 3.6s ease-in-out var(--d) infinite; }
@keyframes breath { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }

/* faroles y luciérnagas */
.fx-lamps i { width: 2.7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,205,125,.95) 0, rgba(255,170,70,.34) 34%, transparent 68%); animation: flick var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes flick { 0% { opacity: .5; transform: translate(-50%, -50%) scale(.82); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
.fx-flies i { width: 5px; height: 5px; border-radius: 50%; background: #e3ff9a; box-shadow: 0 0 9px 3px rgba(215,255,120,.7); opacity: 0; animation: fly var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes fly { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .95; } 70% { opacity: .75; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* senderos con luz que avanza */
.fx-route { width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.fx-route path { fill: none; stroke: rgba(255,236,170,.85); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 3 30; filter: drop-shadow(0 0 6px rgba(255,214,120,.9)); animation: dash 2.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -66; } }
.world[data-active] .fx-route { opacity: .55; }

/* cuando el parque no está a la vista, todo se pausa */
.park:not(.live) .fx *, .park:not(.live) .pin-n::after { animation-play-state: paused !important; }

.hit { position: absolute; inset: 0; width: 100%; height: 100%; }
.hit [data-zone] { fill: transparent; cursor: pointer; pointer-events: all; }

/* pines: la insignia queda justo en el punto, la etiqueta cuelga al lado */
.pin { position: absolute; transform: translate(-50%, -50%); padding: 0; background: none; border: 0; cursor: pointer; z-index: 3; font: inherit; }
.pin-n { position: relative; width: clamp(24px, 4.2cqw, 38px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral2); color: #fff; font-weight: 800; font-size: clamp(12px, 1.9cqw, 17px);
  box-shadow: 0 0 0 2.5px rgba(255,255,255,.92), 0 8px 20px rgba(0,0,0,.55); transition: transform .25s, background .25s, color .25s; }
.pin-n::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--coral2); animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.pin-l { position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); background: var(--cream); color: var(--ink); font-weight: 800;
  font-size: clamp(10.5px, 1.9cqw, 15px); padding: .34em .8em; border-radius: 8px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.5); transition: transform .25s; pointer-events: none; }
.pin--left .pin-l { left: auto; right: calc(100% + 8px); }
.pin--help .pin-n { background: #E05C4A; }
.pin--gate .pin-n { background: #F2B84B; color: #4a3207; }
.pin--gate .pin-n::after { border-color: #F2B84B; }
.pin.on .pin-n, .pin:hover .pin-n { transform: scale(1.18); background: #fff; color: var(--coral2); }
.pin--help.on .pin-n, .pin--help:hover .pin-n { color: #E05C4A; }
.pin--gate.on .pin-n, .pin--gate:hover .pin-n { color: #b07a10; }
.pin.on .pin-l, .pin:hover .pin-l { transform: translateY(-50%) scale(1.06); }
@media (max-width: 640px) {
  .pin-l { display: none; }
  .pin.on .pin-l { display: block; top: calc(100% + 8px); left: 50%; right: auto; transform: translateX(-50%); }
  .pin.on .pin-l { transform: translateX(-50%); }
  .pin[data-zone="ayuda"] { top: 57% !important; }
  .pin[data-zone="entrada"] { top: 86% !important; }
}
.zcard { scroll-margin-top: 84px; }
.stage-wrap { position: relative; max-width: 1180px; margin: 0 auto; }

/* ── Robot y tarjetas laterales ────────────────────────────────────── */
.park-side { display: grid; gap: 16px; min-width: 0; }
.rcard { background: var(--cream); color: var(--ink); border-radius: 18px; padding: 16px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: end; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.robot { width: 96px; height: auto; align-self: end; animation: floaty 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
.robot.hop { animation: hop .6s cubic-bezier(.3,1.6,.5,1), floaty 4.6s ease-in-out .6s infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-14px) scale(.96, 1.05); } 100% { transform: translateY(0) scale(1, 1); } }
.bubble { position: relative; background: #fff; border-radius: 16px 16px 16px 4px; padding: 13px 15px; font-size: 15.5px; line-height: 1.5; min-height: 6.4em; box-shadow: 0 6px 16px -8px rgba(20,56,74,.3); }
.bubble::before { content: ""; position: absolute; left: -9px; bottom: 14px; border: 9px solid transparent; border-left: 0; border-right-color: #fff; }
.bubble.typing::after { content: "▍"; color: var(--teal); animation: blink .8s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.rctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rctas:empty { display: none; }
.cta { display: inline-flex; gap: 6px; align-items: center; background: var(--teal); color: #fff !important; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 0 !important; text-decoration: none; transition: background .2s, transform .2s; animation: rise .35s both; }
.cta:hover { background: var(--navy); transform: translateY(-1px); }
.rchips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(20,56,74,.28); }
.rchips-t { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(20,56,74,.7); }
.chip { background: #fff; color: var(--ink); border: 1px solid rgba(20,56,74,.22); font-weight: 700; font-size: 13.5px; padding: 8px 12px; border-radius: 999px; transition: background .18s, border-color .18s, transform .18s; }
@media (hover: hover) { .chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-1px); } }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 960px) { .park-side { order: 2; } }

.zcard { background: #fff; color: var(--text-primary); border-radius: 18px; padding: clamp(16px, 2.4vw, 22px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.zhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zbadge { flex: none; width: 42px; aspect-ratio: 1; border-radius: 50%; background: var(--coral2); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.zbadge.help { background: #E05C4A; } .zbadge.gate { background: #F2B84B; color: #4a3207; }
.zhead h3 { margin: 0; font-size: 20px; line-height: 1.15; color: var(--text-primary); letter-spacing: -.01em; }
.zhead p { margin: 2px 0 0; font-size: 14px; color: var(--text-secondary); }
.zback { margin-left: auto; background: none; color: var(--accent); font-weight: 700; font-size: 13px; padding: 6px 4px; }
.zback:hover { text-decoration: underline; }
.zgroup + .zgroup { margin-top: 16px; }
.zgroup h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.zidle p { margin: 0 0 12px; color: var(--text-secondary); font-size: 15px; }
.zswitch { display: flex; align-items: center; gap: 12px; }
.zswitch .zbadge { width: 34px; font-size: 16px; }
.zswitch .res-t { font-size: 15px; }
.zcard .fade { animation: rise .4s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 420px) { .res-list--2 { grid-template-columns: minmax(0, 1fr); } }

/* ── 4. Para llevarte ──────────────────────────────────────────────── */
.take, .all { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 64px) var(--gut) 0; }
.take h2, .all h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 18px; }
.take-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.take-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .take-grid, .take-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.take-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--border-strong) !important; border-radius: 16px; color: var(--text-body); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.take-card:hover { transform: translateY(-3px); border-color: var(--accent) !important; box-shadow: 0 18px 36px -18px rgba(43,110,136,.55); color: var(--text-body); }
.take-card strong { font-size: 19px; color: var(--text-primary); letter-spacing: -.01em; }
.take-card span { font-size: 15px; line-height: 1.5; }
.take-card em { margin-top: 8px; font-style: normal; font-weight: 700; color: var(--accent); }
.take-k { align-self: flex-start; font-size: 11.5px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--bg-card-2); color: var(--accent); padding: 4px 9px; border-radius: 5px; }
.take-card--poll { background: var(--navy); border-color: var(--navy) !important; }
.take-card--poll strong, .take-card--poll span, .take-card--poll em { color: #fff; }
.take-card--poll .take-k { background: rgba(255,255,255,.14); color: #bfe9f7; }

/* ── 5. Lista completa ─────────────────────────────────────────────── */
.all { padding-bottom: clamp(48px, 7vw, 88px); }
.all-lede { color: var(--text-secondary); margin: -8px 0 22px; }
.all-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
@media (max-width: 900px) { .all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .all-grid { grid-template-columns: minmax(0, 1fr); } }
.all-col h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary); padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.all-col h3 small { display: block; margin-top: 2px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-secondary); }
.all-col ul { list-style: none; margin: 0; padding: 0; }
.all-col li { border-bottom: 1px solid var(--divider); }
.all-col a { display: block; padding: 8px 0; font-size: 15px; font-weight: 600; border-bottom: 0; }
.all-col a::after { content: " ↗"; color: var(--text-muted); font-weight: 400; }


/* ── Botón de sonido ───────────────────────────────────────────────── */
.snd {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #cfe9f5; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 9px 16px 9px 13px; font: inherit; font-size: 14px; font-weight: 700;
  transition: background .2s, border-color .2s, color .2s;
}
.snd svg { width: 19px; height: 19px; flex: none; }
.snd .snd-w1, .snd .snd-w2 { opacity: 0; transition: opacity .25s; }
.snd .snd-x { opacity: .85; }
.snd:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.snd[aria-pressed="true"] { background: #F2B84B; border-color: #F2B84B; color: #3d2a05; }
.snd[aria-pressed="true"] .snd-x { opacity: 0; }
.snd[aria-pressed="true"] .snd-w1 { opacity: 1; }
.snd[aria-pressed="true"] .snd-w2 { opacity: 1; transition-delay: .08s; }
.snd.pend { border-color: rgba(242,184,75,.75); color: #f7d79a; }
.snd[disabled] { opacity: .5; cursor: default; }

/* ── Capa de vida (canvas) ─────────────────────────────────────────── */
.fx-vida { width: 100%; height: 100%; opacity: .96; }

/* ── Despertar de cada zona ────────────────────────────────────────── */
.fx-zona { position: absolute; inset: 0; pointer-events: none; }
.fxz { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.fx-zona[data-active="plaza"]   .fxz-chat,
.fx-zona[data-active="cancha"]  .fxz-torres,
.fx-zona[data-active="quiosco"] .fxz-escribe,
.fx-zona[data-active="ayuda"]   .fxz-baliza,
.fx-zona[data-active="entrada"] .fxz-candados { opacity: 1; }

/* plaza: las apps suben de la plaza */
.fxz-chat { left: 12.5%; top: 14%; width: 25%; height: 32%; }
.fxz-chat i {
  position: absolute; bottom: 0; width: 10.5%; aspect-ratio: 1; border-radius: 26%;
  background: #fff center / 62% no-repeat; opacity: 0;
  box-shadow: 0 0 12px rgba(150,215,255,.55), 0 5px 12px rgba(0,0,0,.45);
  animation: burbuja var(--t, 3.6s) ease-out var(--d, 0s) infinite;
}
.fxz-chat i::after { content: ""; position: absolute; left: 14%; bottom: -16%; border: .4em solid transparent; border-top-color: #fff; border-right: 0; }
@keyframes burbuja {
  0%   { opacity: 0; transform: translateY(14%) scale(.5); }
  18%  { opacity: 1; transform: translateY(-20%) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-190%) scale(.92); }
}
/* cancha: las torres se encienden una por una */
.fxz-torres i {
  position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(226,246,255,.95) 0, rgba(150,215,255,.38) 32%, transparent 68%);
  animation: torre 2.6s ease-in-out var(--d, 0s) infinite;
}
@keyframes torre { 0%, 70%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.9); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } }
/* quiosco: alguien está escribiendo */
.fxz-escribe { left: 76.5%; top: 37.5%; width: 7%; height: 7%; display: flex; align-items: center; justify-content: center; gap: 12%; }
.fxz-escribe i { width: 20%; aspect-ratio: 1; border-radius: 50%; background: #0d2433; animation: escribe 1.25s ease-in-out infinite; }
.fxz-escribe i:nth-child(2) { animation-delay: .16s; }
.fxz-escribe i:nth-child(3) { animation-delay: .32s; }
@keyframes escribe { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-28%); } }
/* punto de ayuda: baliza */
.fxz-baliza { left: 50.2%; top: 62.5%; width: 0; height: 0; }
.fxz-baliza::before, .fxz-baliza::after {
  content: ""; position: absolute; left: 0; top: 0; width: 9cqw; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(224,92,74,.9); animation: baliza 2.1s ease-out infinite;
}
.fxz-baliza::after { animation-delay: 1.05s; }
@keyframes baliza { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
/* entrada: los siete candados se cierran */
.fxz-candados i {
  position: absolute; top: 76.5%; width: 1.5%; aspect-ratio: 1; border-radius: 50%;
  background: #F2B84B; box-shadow: 0 0 10px rgba(242,184,75,.9); opacity: 0;
  animation: candado 3.2s ease-in-out var(--d, 0s) infinite;
}
@keyframes candado { 0%, 8% { opacity: 0; transform: scale(.4); } 20%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }

/* ── Tarjeta flotante sobre el mapa ────────────────────────────────── */
@media (min-width: 1100px) {
  .zcard {
    position: absolute; z-index: 5; width: clamp(300px, 30%, 384px); max-height: 88%; overflow: auto; overscroll-behavior: contain;
    right: auto; left: auto; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), visibility .3s;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12);
  }
  .zcard.on { opacity: 1; visibility: visible; transform: none; }
  .zcard.pos-der { right: max(14px, 3%); }
  .zcard.pos-izq { left: max(14px, 3%); }
  .park-grid:not(:hover) .zcard:not(.on) { pointer-events: none; }
  .zcard::-webkit-scrollbar { width: 8px; }
  .zcard::-webkit-scrollbar-thumb { background: rgba(20,56,74,.25); border-radius: 8px; }
}
@media (max-width: 1099px) {
  .zcard { margin-top: 14px; }
}

/* ── Nivel 2: plataformas ──────────────────────────────────────────── */
.zpista { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-secondary); }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pchip {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; cursor: pointer; text-align: left;
  background: #fff; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 10px; font: inherit;
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.pchip:hover { border-color: var(--accent); background: var(--bg-card-2); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(43,110,136,.55); }
.pchip-t { font-weight: 700; font-size: 14px; line-height: 1.25; }
.pchip .pico { width: 22px; height: 22px; flex: none; }
.pchip--alerta { grid-column: 1 / -1; border-color: rgba(224,92,74,.5); background: #fff6f4; color: #8f3123; }
.pchip--alerta:hover { border-color: #E05C4A; background: #ffeeea; }
.zhead-t { min-width: 0; }
@media (max-width: 420px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* ── Robot debajo del mapa, en una sola fila ───────────────────────── */
.park-side { margin-top: clamp(14px, 2.2vw, 22px); }
.rcard { max-width: 1180px; margin: 0 auto; grid-template-columns: 92px minmax(0, 1fr); align-items: center; padding: 14px 18px; }
.rcard .bubble { min-height: 0; }
@media (min-width: 761px) {
  .rcard { grid-template-columns: 92px minmax(0, 22rem) minmax(0, 1fr); gap: 10px 18px; align-items: center; }
  .rctas { grid-column: 3; grid-row: 1; margin-top: 0; align-content: center; }
  .rchips { grid-column: 1 / -1; margin-top: 4px; padding-top: 10px; }
}

/* ── Saltar de zona sin salir de la tarjeta ────────────────────────── */
.zsalto { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.zsalto-t { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.zsalto-b {
  width: 30px; height: 30px; flex: none; border-radius: 50%; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px;
  background: #fff; color: var(--text-secondary); border: 1px solid var(--border-strong);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.zsalto-b:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-1px); }
.zsalto-b.on { background: var(--coral2); border-color: var(--coral2); color: #fff; }
.zsalto-b.help.on { background: #E05C4A; border-color: #E05C4A; }
.zsalto-b.gate.on { background: #F2B84B; border-color: #F2B84B; color: #4a3207; }

/* con una zona activa, las demás etiquetas se apartan */
.world[data-active] .pin:not(.on) .pin-l { opacity: 0; transition: opacity .3s; }
.world[data-active] .pin:not(.on) .pin-n { opacity: .72; transform: scale(.86); }
.world[data-active] .pin:not(.on):hover .pin-n { opacity: 1; transform: scale(1.12); }
.world[data-active] .pin:not(.on):hover .pin-l { opacity: 1; }

/* En el teléfono el mapa va de orilla a orilla para que se vea más grande */
@media (max-width: 640px) {
  .stage-wrap { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); }
  .stage { border-radius: 0; }
  .stage-wrap > .zcard { margin-left: var(--gut); margin-right: var(--gut); }
}

/* ── Menos movimiento ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ses *, .ses *::before, .ses *::after { animation: none !important; transition-duration: .01ms !important; }
  .door:hover .door-leaf { transform: none; }
  .world { --z: 1 !important; }
}