ZOMBIELAND El Eco de los Muertos CASO: Mark Vidal & Dra. Nuria Soler ACCESO: CLASIFICADO ESTADO: ATRINCHERADO @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap'); :root { --color-principal: #F88C00; --color-fondo-oscuro: #0c0e0c; --color-borde: #5a4a35; --color-texto: #e2e8e2; } .historia-terror-moderna { background: linear-gradient(rgba(12, 14, 12, 0.25), rgba(12, 14, 12, 0.40)), url('/wp-content/uploads/Z.001_PORTADA.jpg'); background-size: cover; background-position: center; border: 1px solid var(--color-borde); border-radius: 2px; color: var(--color-texto); font-family: 'Share Tech Mono', monospace; font-size: 1rem; line-height: 1.6; max-width: 900px; margin: 30px auto; padding: 40px 25px 25px 25px; position: relative; box-sizing: border-box; } .historia-terror-moderna::before { content: "REGISTRO DE INCIDENCIAS // CASO MARK VIDAL"; position: absolute; top: -12px; left: 20px; background: #151515; color: var(--color-principal); font-size: 0.65rem; padding: 0 10px; border: 1px solid var(--color-borde); } .bloque-membrete-expediente { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--color-borde); padding: 16px; margin-bottom: 20px; box-sizing: border-box; } .sub-meta { font-size: 0.72rem; color: #ffffff; background: rgba(0, 0, 0, 0.75); padding: 4px 10px; display: inline-block; border-left: 3px solid var(--color-principal); letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; font-weight: bold; } .expediente-titulo-contenedor { border: 1px solid var(--color-borde); padding: 45px 15px; margin-bottom: 12px; background: rgba(0, 0, 0, 0.45); box-sizing: border-box; } .expediente-header-title { font-family: 'Cinzel', serif !important; font-size: clamp(1.5rem, 5vw, 2.2rem) !important; font-weight: 700 !important; text-transform: uppercase !important; margin: 0 !important; color: #ffffff !important; text-align: center !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95) !important; } .archivo-meta-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: rgba(10, 10, 10, 0.75); border: 1px dashed var(--color-borde); padding: 10px; font-size: 0.7rem; color: #c5cbc5; box-sizing: border-box; } .meta-item { white-space: nowrap; } .meta-item strong { color: var(--color-principal); } @media screen and (max-width: 768px) { .archivo-meta-box { display: flex; flex-direction: row; justify-content: space-between; align-items: center; overflow-x: auto; gap: 8px; padding: 8px 10px; font-size: 0.6rem; } } Registro de Incidencias - Historia Completa :root { --color-principal: #f1c40f; --color-fondo-oscuro: #0c0e0c; --color-borde: #3d463d; --color-borde-naranja: #ffb347; --base-font-size: 0.85rem; } html { scroll-behavior: smooth; } .historia-terror-moderna-cuerpo { background: var(--color-fondo-oscuro); border: 1px solid var(--color-borde); color: #c0c5c0; font-family: 'Share Tech Mono', monospace; padding: 40px 0px 0px 0px; max-width: 900px; margin: 30px auto; position: relative; box-sizing: border-box; } .historia-terror-moderna-cuerpo::before { content: "REGISTRO DE INCIDENCIAS // CASO EMMA"; position: absolute; top: -12px; left: 20px; background: var(--color-fondo-oscuro); color: var(--color-principal); font-size: 0.65rem; padding: 0 10px; border: 1px solid var(--color-borde); } /* ================================================================= */ /* DISEÑO ESCRITORIO: TODO EN VERTICAL A LA DERECHA */ /* ================================================================= */ .menu-flotante-superior { position: fixed; right: 35px; top: calc(50% - 170px); background: transparent; border: none; width: 48px; padding: 0; display: flex; flex-direction: column; gap: 6px; z-index: 1000; box-sizing: border-box; transition: opacity 0.3s ease, visibility 0.3s ease; } .btn-flotante-sup { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #161a16; color: #c0c5c0; border: 1px solid var(--color-borde-naranja); border-radius: 8px; text-decoration: none; font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; font-weight: bold; cursor: pointer; transition: all 0.35s ease; } .btn-flotante-sup:hover { background: var(--color-principal); color: #0c0e0c; border-color: var(--color-principal); } .menu-flotante-iconos { position: fixed; right: 47px; top: calc(50% + 40px); background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 6px; z-index: 1000; box-sizing: border-box; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu-flotante-iconos a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #161a16; color: #c0c5c0; border: 1px solid var(--color-borde-naranja); border-radius: 8px; text-decoration: none; font-size: 0.75rem; font-weight: bold; cursor: pointer; box-sizing: border-box; padding: 0; transition: all 0.35s ease; } .menu-flotante-iconos a:hover, .menu-flotante-iconos a.activo { background: var(--color-principal); color: #0c0e0c; border-color: var(--color-principal); } .menu-flotante-independiente { position: fixed; right: 35px; bottom: 35px; background: transparent; border: none; width: 48px; z-index: 1000; } .menu-flotante-independiente button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #161a16; color: #c0c5c0; border: 1px solid var(--color-borde-naranja); border-radius: 8px; cursor: pointer; font-size: 0.75rem; font-weight: bold; transition: all 0.35s ease; } .menu-flotante-independiente button:hover { background: var(--color-principal); color: #0c0e0c; border-color: var(--color-principal); } .menu-oculto { opacity: 0; visibility: hidden; pointer-events: none; } /* ACORDEONES */ .capitulo-bloque { border-bottom: 1px solid var(--color-borde); background: #111411; width: 100%; box-sizing: border-box; margin-bottom: 10px; } .capitulo-btn { background: #161a16; color: #c0c5c0; cursor: pointer; padding: 14px 20px; width: calc(100% - 30px); margin: 10px auto; border: 1px solid var(--color-borde-naranja); border-radius: 10px; text-align: left; font-family: 'Share Tech Mono', monospace; font-size: 0.88rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .capitulo-btn:hover, .capitulo-btn.active { background: var(--color-principal); color: #0c0e0c; border-color: var(--color-principal); } .capitulo-btn span.flecha { font-size: 0.7rem; color: var(--color-principal); transition: transform 0.3s ease; } .capitulo-btn.active span.flecha { transform: rotate(180deg); color: #0c0e0c; } .capitulo-contenido { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); background-color: var(--color-fondo-oscuro); width: 100%; box-sizing: border-box; } .capitulo-inner { padding: 15px 0px; border-top: 1px dashed var(--color-borde); width: 100%; box-sizing: border-box; } .capitulo-frame-container { width: 100%; min-height: 100px; border: none; background: transparent; display: block; box-sizing: border-box; overflow: hidden; } /* ================================================================= */ /* DISEÑO MÓVIL: BOTONES DE CAPÍTULOS CENTRADOS EN EL MARGEN INFERIOR */ /* ================================================================= */ @media (max-width: 768px) { .menu-flotante-superior { top: 520px; bottom: 60px; right: 15px; flex-direction: column; } .menu-flotante-iconos { top: auto; bottom: 15px; left: 50%; /* Centrado absoluto horizontal */ right: auto; transform: translateX(-50%); /* Ajuste fino para centrar exactamente el bloque */ flex-direction: row; gap: 6px; } .menu-flotante-independiente { position: fixed !important; right: 15px !important; bottom: 15px !important; left: auto !important; top: auto !important; width: 48px !important; } .historia-terror-moderna-cuerpo { margin-bottom: 120px; } } ▲ A+ A- ▼ 01 02 03 04 ☢ CAP.01: Primeras Transmisiones y la Gasolinera ▼ CAP.02: La Sombra del Culto ▼ CAP.03: Zona de Cuarentena ▼ CAP.04: El Refugio Final ▼ function toggleAcordeon(btn) { btn.classList.toggle("active"); const contenido = btn.nextElementSibling; const iframe = contenido.querySelector('iframe'); if (contenido.style.maxHeight && contenido.style.maxHeight !== "0px") { contenido.style.maxHeight = "0px"; } else { ajustarAlturaIframe(iframe); contenido.style.maxHeight = contenido.scrollHeight + "px"; } } function ajustarAlturaIframe(iframe) { if (iframe) { try { const innerDoc = iframe.contentDocument || iframe.contentWindow.document; if (innerDoc && innerDoc.body) { const alturaTotal = innerDoc.body.scrollHeight; iframe.style.height = alturaTotal + "px"; const contenido = iframe.closest('.capitulo-contenido'); if (contenido && contenido.style.maxHeight && contenido.style.maxHeight !== "0px") { contenido.style.maxHeight = contenido.scrollHeight + "px"; } } } catch(e) {} } } function inicializarIframeAutosize(iframe) { ajustarAlturaIframe(iframe); try { const innerDoc = iframe.contentDocument || iframe.contentWindow.document; if (innerDoc && innerDoc.defaultView) { const observer = new ResizeObserver(() => { ajustarAlturaIframe(iframe); }); observer.observe(innerDoc.body); } } catch(e) {} } document.getElementById("btnInicio").addEventListener("click", (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }); document.getElementById("btnBajarPoco").addEventListener("click", (e) => { e.preventDefault(); window.scrollBy({ top: 400, behavior: "smooth" }); }); document.getElementById("btnExtra").addEventListener("click", () => { document.getElementById("menuSuperior").classList.toggle("menu-oculto"); document.getElementById("menuFlotante").classList.toggle("menu-oculto"); }); let currentFontSize = 0.85; document.getElementById("btnAumentar").addEventListener("click", () => { if (currentFontSize < 1.30) { currentFontSize += 0.08; document.documentElement.style.setProperty('--base-font-size', currentFontSize + 'rem'); actualizarIframesYAcordeones(); } }); document.getElementById("btnDisminuir").addEventListener("click", () => { if (currentFontSize > 0.70) { currentFontSize -= 0.08; document.documentElement.style.setProperty('--base-font-size', currentFontSize + 'rem'); actualizarIframesYAcordeones(); } }); function actualizarIframesYAcordeones() { document.querySelectorAll(".capitulo-frame-container").forEach(iframe => { try { iframe.contentDocument.documentElement.style.setProperty('--base-font-size', currentFontSize + 'rem'); ajustarAlturaIframe(iframe); } catch(e) {} }); document.querySelectorAll(".capitulo-btn.active").forEach(btn => { const contenido = btn.nextElementSibling; contenido.style.maxHeight = contenido.scrollHeight + "px"; }); }