/* ═══════════════════════════════════════════════════════════ SoulsGuides — MURO · Capa GUÍA (paso a paso "El Híbrido"). Un solo DOM, dos esqueletos: en escritorio El Atlas (índice pegajoso + un capítulo a la vista); en móvil Los Estandartes (acordeón con anillo de progreso). El modo lo decide la clase `mm` en (matchMedia en muro-guia.js), no media queries duplicadas. Requiere muro-base.css (tokens) y body.muro. Los pasos conservan el contrato de guia-unified.js: li.guia-step[data-step-key] > button.guia-step-check. Tooltips, PiP y modal de vídeo (generados por guia-unified.js) se estilan aquí con los tokens del Muro. ═══════════════════════════════════════════════════════════ */ /* ── Barra global pegajosa (solo móvil) ── */ .mtop{display:none;position:sticky;top:0;z-index:40;align-items:center;gap:12px;padding:10px 16px; background:rgba(var(--bg-rgb),.92);border-bottom:1px solid rgba(var(--crim-rgb),.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} html.mm .mtop{display:flex} .mtop .k{font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--crim-l);white-space:nowrap} .mtop .bar{flex:1;height:3px;background:rgba(var(--muro-text-rgb),.16);position:relative} .mtop .bar b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--crim-d),var(--crim-l));box-shadow:0 0 8px rgba(var(--crim-rgb),.5);transition:width .5s var(--muro-ease)} .mtop .pct{font-size:12px;font-weight:700;color:var(--amber-l)} /* ── Herramientas: búsqueda (ambos modos) + expandir/colapsar (solo móvil) ── */ .tools{display:flex;max-width:1180px;margin:0 auto;align-items:center;gap:10px;padding:16px 20px 0;flex-wrap:wrap} html.mm .tools{max-width:880px;padding-bottom:4px} .tbtn{display:none;font-family:var(--ff-muro);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muro-text);background:transparent;border:1px solid rgba(var(--muro-text-rgb),.22);padding:10px 14px;cursor:pointer;transition:all .3s} html.mm .tbtn{display:inline-flex} .tbtn:hover{color:var(--muro-white);border-color:rgba(var(--crim-rgb),.5)} .gsearch{position:relative;flex:1;min-width:170px;max-width:400px} .gsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--crim-d);pointer-events:none} .gsearch input{width:100%;background:rgba(var(--bg3-rgb),.5);border:1px solid rgba(var(--crim-rgb),.2);color:var(--muro-white); font-family:var(--ff-muro);font-size:13px;letter-spacing:.04em;padding:11px 13px 11px 40px;outline:none;transition:border-color .3s,box-shadow .3s} .gsearch input::placeholder{color:var(--muro-text)} .gsearch input:focus{border-color:rgba(var(--crim-rgb),.55);box-shadow:0 0 22px rgba(var(--crim-rgb),.14)} /* ── Contenedor: grid en PC, bloque en móvil ── */ .atlas{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,4vw,56px);max-width:1180px;margin:0 auto;padding:26px 20px 130px;align-items:start} html.mm .atlas{display:block;max-width:880px;padding-top:14px} /* ── Índice lateral (solo PC) ── */ .indice{position:sticky;top:18px;border:1px solid rgba(var(--muro-text-rgb),.14);background:linear-gradient(170deg,rgba(var(--bg2-rgb),.8),rgba(var(--bg-rgb),.5))} html.mm .indice{display:none} .ind-head{padding:16px 18px 12px;border-bottom:1px solid rgba(var(--crim-rgb),.18)} .ind-head .k{font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--crim-l)} .ind-tot{display:flex;align-items:center;gap:10px;margin-top:10px} .ind-tot .bar{flex:1;height:3px;background:rgba(var(--muro-text-rgb),.16);position:relative} .ind-tot .bar b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--crim-d),var(--crim-l));box-shadow:0 0 8px rgba(var(--crim-rgb),.5);transition:width .5s var(--muro-ease)} .ind-tot .pct{font-size:12px;font-weight:700;color:var(--amber-l)} .ind-cap{border-bottom:1px solid rgba(var(--muro-text-rgb),.08)} .ind-cap:last-child{border-bottom:0} .ind-cap-h{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:13px 18px;transition:background .3s} .ind-cap-h:hover{background:rgba(var(--crim-rgb),.06)} .ind-cap-h .cn{font-family:var(--ff-muro-d);font-weight:900;font-size:15px;color:transparent;-webkit-text-stroke:1px rgba(var(--crim-rgb),.5);flex:none;width:24px;transition:color .3s} .ind-cap.on .ind-cap-h .cn{color:rgba(var(--crim-rgb),.45)} .ind-cap-h .t{flex:1;font-family:var(--ff-muro);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--muro-text-l);line-height:1.3;transition:color .3s} .ind-cap.on .ind-cap-h .t{color:var(--muro-white)} .ind-cap-h .d{font-size:10px;font-weight:700;color:var(--muro-text);white-space:nowrap} .ind-cap-h .d b{color:var(--crim-l)} .ind-cap.done-all .ind-cap-h .d b{color:var(--amber-l)} .ind-zs{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s var(--muro-ease)} .ind-cap.on .ind-zs{grid-template-rows:1fr} .ind-zs-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-bottom:0;transition:padding .5s var(--muro-ease)} .ind-cap.on .ind-zs-in{padding-bottom:8px} .ind-z{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:8px 18px 8px 53px;transition:background .3s} .ind-z:hover{background:rgba(var(--crim-rgb),.05)} .ind-z i{width:5px;height:5px;background:rgba(var(--muro-text-rgb),.5);transform:rotate(45deg);flex:none;transition:all .3s} .ind-z.cur i{background:var(--amber);box-shadow:0 0 7px rgba(var(--amber-rgb),.8)} .ind-z .zt{flex:1;font-size:11.5px;letter-spacing:.03em;color:var(--muro-text);line-height:1.4;transition:color .3s} .ind-z.cur .zt,.ind-z:hover .zt{color:var(--muro-text-l)} .ind-z .zd{font-size:9.5px;font-weight:700;color:var(--muro-text);white-space:nowrap} .ind-z.zdone .zd{color:var(--amber-l)} /* ── Capítulos ── PC: uno a la vez (.cap.on). Móvil: todos apilados como estandartes. */ .lect{min-width:0} .cap{display:none} .cap.on{display:block;animation:capFadeIn .45s var(--muro-ease)} html.mm .cap{display:block;animation:none;margin-bottom:18px} @keyframes capFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} html.mm .band-card{border:1px solid rgba(var(--muro-text-rgb),.15);background:linear-gradient(160deg,rgba(var(--bg2-rgb),.8),rgba(var(--bg-rgb),.45));transition:border-color .4s,box-shadow .4s} html.mm .cap.open .band-card{border-color:rgba(var(--crim-rgb),.42);box-shadow:0 26px 70px -40px rgba(var(--crim-rgb),.45)} /* Cabecera de capítulo: estandarte con anillo (sirve en ambos modos) */ .band-h{position:relative;display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;text-align:left;padding:18px 4px 16px;overflow:hidden;cursor:default;border-bottom:1px solid rgba(var(--crim-rgb),.2);margin-bottom:8px} html.mm .band-h{cursor:pointer;padding:16px 16px;border-bottom:0;margin-bottom:0} html.mm .band-h::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--crim),var(--crim-d));clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),50% 100%,0 calc(100% - 7px))} html.mm .cap.done-all .band-h::before{background:linear-gradient(180deg,var(--amber),var(--amber-l))} .band-ring{position:relative;width:52px;height:52px;flex:none} .band-ring svg{transform:rotate(-90deg)} .band-ring .rb{fill:none;stroke:rgba(var(--muro-text-rgb),.18);stroke-width:3.5} .band-ring .rf{fill:none;stroke:var(--crim-l);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(var(--crim-rgb),.6));transition:stroke-dashoffset .6s var(--muro-ease)} .cap.done-all .band-ring .rf{stroke:var(--amber)} .band-ring .rn{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-muro-d);font-weight:900;font-size:14px;color:var(--muro-white)} .band-tt{flex:1;min-width:0} .band-tt .eb{display:block;font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--crim-l);margin-bottom:5px} .band-tt h2{font-family:var(--ff-muro);font-weight:700;font-size:clamp(19px,2.7vw,26px);letter-spacing:.03em;color:var(--muro-white);line-height:1.15;transition:color .3s} html.mm .band-h:hover .band-tt h2{color:var(--crim-l)} .band-tt .meta{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.05em;color:var(--muro-text)} .band-tt .meta b{color:var(--amber-l);font-weight:700} .band-done{flex:none;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muro-text);white-space:nowrap} .band-done b{color:var(--crim-l);font-size:15px} .cap.done-all .band-done b{color:var(--amber-l)} .band-chev{display:none;flex:none;color:var(--crim-d);transition:transform .45s var(--muro-ease)} html.mm .band-chev{display:block} html.mm .cap.open .band-chev{transform:rotate(180deg);color:var(--crim-l)} /* Cuerpo del capítulo: siempre visible en PC, acordeón en móvil */ .band-body{overflow:visible} html.mm .band-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .6s var(--muro-ease)} html.mm .cap.open .band-body{grid-template-rows:1fr} .band-in{padding:0} html.mm .band-in{min-height:0;overflow:hidden;padding:0 18px;border-top:1px solid transparent;transition:padding .6s var(--muro-ease),border-color .6s} html.mm .cap.open .band-in{padding:4px 18px 22px;border-top-color:rgba(var(--muro-text-rgb),.1)} /* Subzonas · tarjeta con desplegable propio (rendimiento: cerradas por defecto) */ .sz{margin:16px 0 0;border:1px solid rgba(var(--muro-text-rgb),.13);border-left:2px solid rgba(var(--amber-rgb),.4);background:linear-gradient(165deg,rgba(var(--bg3-rgb),.55),rgba(var(--bg2-rgb),.35));transition:border-color .35s,box-shadow .35s} .sz.open{border-color:rgba(var(--amber-rgb),.3);border-left-color:var(--amber);box-shadow:0 14px 40px -30px rgba(var(--amber-rgb),.35)} .sz.zdone{border-left-color:var(--amber)} .sz.zdone .n{color:var(--amber-l)} .sz-h{display:flex;align-items:center;gap:12px;padding:13px 16px;flex-wrap:wrap;cursor:pointer;transition:background .3s} .sz-h:hover{background:rgba(var(--amber-rgb),.05)} .sz-h>i{width:6px;height:6px;background:var(--amber);transform:rotate(45deg);box-shadow:0 0 8px rgba(var(--amber-rgb),.7);flex:none;opacity:.55;transition:opacity .3s} .sz.open .sz-h>i{opacity:1} .sz-h h3{flex:1;min-width:0;font-family:var(--ff-muro);font-weight:700;font-size:15.5px;letter-spacing:.05em;color:var(--muro-text-l);transition:color .3s} .sz-h:hover h3{color:var(--muro-white)} .sz-h .n{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muro-text);white-space:nowrap} .sz-h .n b{color:var(--amber-l);font-size:12px} .sz-chev{flex:none;color:rgba(var(--amber-rgb),.45);transition:transform .45s var(--muro-ease),color .3s} .sz.open .sz-chev{transform:rotate(180deg);color:var(--amber)} .sz-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s var(--muro-ease)} .sz.open .sz-body{grid-template-rows:1fr} .sz-in{min-height:0;overflow:hidden;padding:0 16px;border-top:1px solid transparent;transition:padding .5s var(--muro-ease),border-color .5s} .sz.open .sz-in{padding:2px 16px 14px;border-top-color:rgba(var(--amber-rgb),.12)} /* Rendimiento: no rasterizar listas de pasos fuera de pantalla / cerradas */ .sz-in .guia-steps{content-visibility:auto;contain-intrinsic-size:auto 420px} /* ── Pasos (contrato guia-unified.js: li.guia-step + button.guia-step-check) ── El padding izquierdo evita que el paint containment de content-visibility recorte la punta del rombo del check (rotado 45°, sobresale del botón). */ .sz-in .guia-steps{list-style:none;margin:0;padding:0 0 0 3px} .lect .guia-step{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;padding:9px 0;border-bottom:1px dotted rgba(var(--muro-text-rgb),.12);cursor:pointer} .lect .guia-step:last-child{border-bottom:0} html.mm .lect .guia-step{border-bottom:0;padding:8px 0} .lect .guia-step-check{width:17px;height:17px;margin-top:4px;position:relative;flex:none;background:none;border:0;cursor:pointer;padding:0;color:var(--muro-white)} .lect .guia-step-check::before{content:'';position:absolute;inset:1px;transform:rotate(45deg);border:1px solid rgba(var(--crim-rgb),.5);transition:all .3s} .lect .guia-step-check svg{position:absolute;inset:0;margin:auto;width:10px;height:10px;opacity:0;transform:scale(.4);transition:all .3s var(--muro-ease);pointer-events:none} .lect .guia-step:hover .guia-step-check::before{border-color:var(--crim-l);box-shadow:0 0 10px rgba(var(--crim-rgb),.35)} .lect .guia-step-check.is-checked::before{background:var(--crim);border-color:var(--crim);box-shadow:0 0 12px rgba(var(--crim-rgb),.55)} .lect .guia-step-check.is-checked svg{opacity:1;transform:scale(1)} .lect .guia-step-content{min-width:0} .lect .guia-step-text{display:inline;font-size:12.5px;letter-spacing:.03em;line-height:1.85;color:var(--muro-text-l)} .lect .guia-step-text a{color:var(--amber-l);text-decoration:none;border-bottom:1px dotted rgba(var(--amber-rgb),.5)} .lect .guia-step--done .guia-step-text{color:var(--muro-text);text-decoration:line-through;text-decoration-color:rgba(var(--crim-rgb),.45)} .lect .guia-step-tag{font-family:var(--ff-muro);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:2px 7px;margin-right:8px;vertical-align:2px;white-space:nowrap} .lect .guia-step-tag--optional{color:var(--viol);border:1px solid rgba(var(--viol-rgb),.4)} .lect .guia-step-tag--boss{color:var(--crim-l);border:1px solid rgba(var(--crim-rgb),.45)} /* Navegación anterior/siguiente (solo PC) */ .lect-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(var(--muro-text-rgb),.12)} html.mm .lect-nav{display:none} .lnav{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-muro);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muro-text);border:1px solid rgba(var(--muro-text-rgb),.22);padding:11px 16px;background:none;cursor:pointer;transition:all .3s} .lnav:hover:not(:disabled){color:var(--muro-white);border-color:rgba(var(--crim-rgb),.5)} .lnav:disabled{opacity:.35;cursor:default} /* ── Búsqueda activa: se muestran todos los capítulos y solo lo que coincide ── */ html.searching .cap{display:block;animation:none;margin-bottom:18px} html.searching .lect-nav{display:none} html.searching .cap.s-hide,html.searching .sz.s-hide,html.searching .guia-step.s-hide{display:none} .gsearch-empty{display:none;padding:40px 10px;text-align:center;font-size:12.5px;letter-spacing:.05em;color:var(--muro-text)} html.searching .gsearch-empty.is-visible{display:block} /* ── Vídeo de zona/capítulo: botón que abre el PiP (guia-unified.js) ── */ .guia-play-btn{cursor:pointer;transition:all .3s} .sz-video{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-muro);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--crim-l);border:1px solid rgba(var(--crim-rgb),.35);padding:6px 12px;background:rgba(var(--crim-rgb),.06);white-space:nowrap} .sz-video:hover,.sz-video.is-active{background:rgba(var(--crim-rgb),.16);border-color:var(--crim-l);box-shadow:0 0 16px rgba(var(--crim-rgb),.25)} /* Variante de paso — píldora pequeña bajo el texto */ .guia-play-btn--step{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--ff-muro);font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--crim-l);border:1px solid rgba(var(--crim-rgb),.3);background:rgba(var(--crim-rgb),.05);padding:4px 10px} .guia-play-btn--step:hover,.guia-play-btn--step.is-active{background:rgba(var(--crim-rgb),.15);border-color:var(--crim-l)} .guia-play-btn svg{pointer-events:none} /* ── Términos con tooltip dentro de los pasos ── */ .guia-step-text [data-tooltip]{color:var(--crim-l);border-bottom:1px dotted rgba(var(--crim-rgb),.4);cursor:pointer;transition:color .2s,border-color .2s} .guia-step-text [data-tooltip]:hover{color:var(--crim-l);border-color:var(--crim-l)} /* ── Tooltip flotante (lo genera guia-unified.js) ── */ .guia-tooltip{position:fixed;z-index:10000;max-width:480px;background:rgba(var(--bg2-rgb),.97);border:1px solid rgba(var(--crim-rgb),.3); padding:20px 24px;box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 0 1px rgba(var(--crim-rgb),.06); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:none;opacity:0;transform:translateY(6px); transition:opacity .2s ease,transform .2s ease;max-height:calc(100vh - 16px);overflow:hidden} .guia-tooltip.active{opacity:1;transform:translateY(0)} .guia-tooltip-header{display:flex;align-items:center;gap:14px} .guia-tooltip-img{width:64px;height:64px;object-fit:cover;border:1px solid rgba(var(--crim-rgb),.2);background:rgba(0,0,0,.35);flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.4)} .guia-tooltip-info{min-width:0} .guia-tooltip-name{font-family:var(--ff-muro);font-size:15px;font-weight:700;color:var(--muro-white);margin:0;line-height:1.25;letter-spacing:.02em} .guia-tooltip-type{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--crim-l); background:rgba(var(--crim-rgb),.1);border:1px solid rgba(var(--crim-rgb),.18);padding:2px 8px;margin-top:6px} .guia-tooltip-extra{font-size:12.5px;line-height:1.6;color:var(--muro-text-l);border-top:1px solid rgba(var(--crim-rgb),.12);padding-top:10px;margin-top:8px;overflow:hidden;display:flex;flex-direction:column;gap:3px} .guia-tooltip-line{margin:0;display:flex;align-items:baseline;gap:6px} .guia-tooltip-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--crim-l);white-space:nowrap;flex-shrink:0} .guia-tooltip-label::after{content:':'} .guia-tooltip-line--plain{color:var(--muro-text);font-size:12px} .guia-tooltip-line--plain,.guia-tooltip-line--effect,.guia-tooltip-line--loc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden} .guia-tooltip-line--effect{color:var(--amber-l);font-weight:600} .guia-tooltip-line--effect .guia-tooltip-label{color:var(--amber)} .guia-tooltip-line--loc{color:var(--muro-text);font-size:12px} .guia-tooltip-line--loc .guia-tooltip-label{color:rgba(var(--muro-text-rgb),.7)} /* ── Selector de entradas ambiguas (táctil, lo genera guia-unified.js) ── */ .guia-picker{display:none;position:fixed;z-index:10001;width:min(320px,90vw);max-height:320px;overflow-y:auto; background:linear-gradient(145deg,var(--bg3),var(--bg));border:1px solid rgba(var(--crim-rgb),.2);padding:10px; box-shadow:0 16px 48px rgba(0,0,0,.6);scrollbar-width:thin;scrollbar-color:rgba(var(--crim-rgb),.2) transparent} .guia-picker-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--crim-l);margin-bottom:8px;padding:0 4px} .guia-picker-item{display:flex;align-items:center;gap:10px;padding:8px;cursor:pointer;transition:background .15s} .guia-picker-item:hover{background:rgba(var(--crim-rgb),.08)} .guia-picker-img{width:40px;height:40px;object-fit:cover;border:1px solid rgba(var(--crim-rgb),.12);flex-shrink:0} .guia-picker-info{display:flex;flex-direction:column;gap:2px;min-width:0} .guia-picker-name{font-size:13px;font-weight:600;color:var(--muro-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .guia-picker-type{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--crim-l);opacity:.8} .guia-picker-extra{font-size:11px;color:var(--muro-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── PiP flotante de vídeo ── */ .guia-pip{position:fixed;bottom:88px;right:28px;width:340px;height:228px;display:flex;flex-direction:column;z-index:9998;overflow:hidden; background:var(--bg);border:1px solid rgba(var(--crim-rgb),.22);box-shadow:0 12px 48px rgba(0,0,0,.75),0 0 0 1px rgba(var(--crim-rgb),.06); transform:translateY(calc(100% + 120px));opacity:0;transition:transform .36s cubic-bezier(.34,1.4,.64,1),opacity .28s ease;pointer-events:none} .guia-pip.is-open{transform:translateY(0);opacity:1;pointer-events:auto} .guia-pip-header{display:flex;align-items:center;gap:6px;padding:8px 10px;background:rgba(var(--bg-rgb),.96);border-bottom:1px solid rgba(var(--crim-rgb),.1)} .guia-pip-title{flex:1;font-family:var(--ff-muro);font-size:10px;font-weight:600;color:var(--muro-text);letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase} .guia-pip-expand,.guia-pip-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0; border:1px solid rgba(var(--muro-text-rgb),.2);background:rgba(var(--muro-text-rgb),.05);color:var(--muro-text);cursor:pointer;transition:background .15s,color .15s} .guia-pip-expand:hover,.guia-pip-close:hover{background:rgba(var(--crim-rgb),.2);color:var(--muro-white)} .guia-pip-drag{position:absolute;bottom:0;left:0;width:24px;height:24px;cursor:sw-resize;display:flex;align-items:flex-end;justify-content:flex-start;padding:5px;color:rgba(var(--muro-text-rgb),.4);transition:color .15s;z-index:10} .guia-pip-drag:hover{color:var(--muro-text-l)} .guia-pip-frame{flex:1;position:relative;min-height:0;background:#000} .guia-pip-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none} @media (max-width:560px){ .guia-pip{right:0;bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)} .guia-pip .guia-pip-frame{aspect-ratio:16/9;flex:none} .guia-pip.is-open{transform:translateY(0)} .guia-pip-drag{display:none} } /* ── Modal de vídeo a pantalla completa ── */ .guia-video-modal{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease} .guia-video-modal.is-open{opacity:1;pointer-events:auto} .guia-video-backdrop{position:absolute;inset:0;background:rgba(var(--bg-deep-rgb),.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .guia-video-container{position:relative;z-index:1;width:min(900px,94vw)} .guia-video-close{position:absolute;top:-16px;right:-16px;width:34px;height:34px;background:var(--bg2);border:1px solid rgba(var(--muro-text-rgb),.3); color:var(--muro-white);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s} .guia-video-close:hover{background:var(--crim-d)} .guia-video-wrapper{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.7)} .guia-video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:none} /* ── Nota editorial + CTA de cierre ── */ .gnote{max-width:1180px;margin:0 auto;padding:0 20px} html.mm .gnote{max-width:880px} /* .gcta ahora vive en muro-base.css (compartido por catálogos y guías) */ @media (max-width:640px){ .band-ring{width:44px;height:44px} .band-ring svg{width:44px;height:44px} .band-done{display:none} } @media (prefers-reduced-motion:reduce){ .sz-body,.sz-in,.band-body,.band-in,.ind-zs,.ind-zs-in{transition:none !important} .cap.on{animation:none} } /* ── Guía «plana» (2 niveles: capítulo → pasos, sin zona intermedia) ── Para páginas tipo cuevas / mazmorras donde cada capítulo ES la unidad atómica y no tiene subzonas con nombre propio. La zona contenedora se vuelve transparente y sin cabecera: los pasos cuelgan directamente del capítulo, dejando un único acordeón. El body se fuerza expandido para que la búsqueda (que alterna .open) no pueda colapsarlo y dejar pasos huérfanos sin cabecera que los reabra. */ .muro-guia-flat .sz{margin:0;border:0;background:none;box-shadow:none} .muro-guia-flat .sz-h{display:none} .muro-guia-flat .sz-body{grid-template-rows:1fr} .muro-guia-flat .sz-in{min-height:0;overflow:visible;padding:0;border-top:0} .muro-guia-flat .sz-in .guia-steps{content-visibility:auto;contain-intrinsic-size:auto 420px;padding-top:4px}