<!-- Tipografía policial estilo máquina de escribir -->
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
background-color: #0d0d0d;
color: #f0f0f0;
font-family: 'Special Elite', monospace;
line-height: 1.7;
}
.encabezado {
background: linear-gradient(to bottom, #0d0d0d, #1a1a1a);
padding: 2em 1em;
text-align: center;
overflow: visible;
}
.typewriter {
display: inline-block;
font-size: 1.2em;
font-family: 'Special Elite', monospace;
color: #ff6a00;
letter-spacing: 0.08em;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid orange;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
text-shadow: 1px 1px 3px #000;
margin-top: 0;
line-height: 1.4;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
.intro-caja {
max-width: 850px;
margin: 3em auto;
padding: 2em 3em;
background-color: rgba(25, 25, 25, 0.9);
border: 1px solid #333;
border-radius: 8px;
box-shadow: 0 0 20px rgba(255, 102, 0, 0.05);
}
.intro-caja p {
margin-bottom: 1.5em;
font-size: 1.05em;
}
em {
color: #cccccc;
font-style: italic;
}
/* Estilo de los enlaces internos */
.intro-caja a,
.intro-caja .tw-link,
.intro-caja tw-link,
.intro-caja .link {
display: inline-block;
margin: 1em 0.3em;
padding: 0.5em 1.2em;
background-color: #ff6a00;
color: #000;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
font-family: 'Special Elite', monospace;
transition: background 0.3s ease;
}
.intro-caja a:hover,
.intro-caja tw-link:hover {
background-color: #00ffff;
color: #000;
}
</style>
<!-- CONTENIDO -->
<div class="encabezado">
<h3><span class="typewriter">🧩 EL CRIMEN PERFECTO</span></h3>
</div>
<div class="intro-caja">
<p>El sol del mediodía se filtra entre garrochos y sauces, al fondo resuena el bullicio de las calles aledañas al humedal Santa María del Lago. Son las 12:05 PM del 12 de junio del año en curso.</p>
<p>El guarda encargado de la seguridad ha hallado las evidencias del finado en su ronda. ¡Un crimen atroz!</p>
<p>Del delicado cuerpo solamente flotan unas plumas en la mitad del espejo de agua, mientras aves negras empiezan a avizorarse en la cima de los árboles. Era un pato canadiense. Viajó durante muchos kilómetros para llegar hasta la sabana bogotana desde su sitio de origen.</p>
<p>El rondero debe informar de inmediato la situación. Empezará ahora una labor de pesquisa e investigación.</p>
<p>Tu misión (como líder de eventos y logísticas varias de la JAC), si decides aceptarla, es descubrir al victimario. La siguiente es la lista de los presuntos sospechosos. Deberás revisar el perfil de cada uno, sus prontuarios y coartadas. Adicional, otras pruebas del suceso. Al final de este intrincado camino podrás dilucidar todo.</p>
<p><em>¡Que el espíritu de la tingua te acompañe en esta labor!</em></p>
<div class="link">[[Fichas de Sospechosos]]</div>
<div class="link">[[Otras pruebas y pistas]]</div>
<div class="link">[[Dictamen final]]</div>
</div>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>El Caso del Pato Perdido 🦆</title>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Special Elite', monospace;
background-color: #121212; /* negro oscuro tipo noir */
color: #f5f5f5; /* texto claro */
padding: 10px;
}
h3 {
color: #ffa500; /* naranja fuerte */
font-size: 1.4em;
border-bottom: 1px dashed #444;
padding-bottom: 5px;
}
.ficha {
background-color: #1f1f1f;
border-left: 6px solid #ffa500;
padding: 18px;
margin-bottom: 25px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(255, 165, 0, 0.2);
}
.ficha h3 {
margin-top: 0;
color: #ffc107; /* amarillo dorado */
}
.ficha p {
line-height: 1.6;
}
.coartada {
font-style: italic;
color: #ddd;
margin-top: 10px;
}
.link {
margin-top: 30px;
font-weight: bold;
color: #ffa500;
text-decoration: underline;
text-align: center;
cursor: pointer;
}
.link:hover {
color: #ffffff;
}
</style>
</head>
<body>
<h2>🚨 Fichas de Sospechosos: caso del pato canadiense 🦆</h2>
<div class="ficha">
<h3>🧓 Doña Ruca</h3>
<p>Vecina del bloque 3 en la unidad Sago, conocida por su carácter regañona, con su aversión particular hacia las aves. Ha sido oída gritando a los patos del humedal. Se sospecha que pudo haber actuado en venganza por los "regalos" que otras aves dejan en su balcón.</p>
<p class="coartada">🗨️ COARTADA: "A esa hora yo estaba viendo la Rosa de Guadalupe en Caracol TV...”</p>
</div>
<div class="ficha">
<h3>🐈 Michi</h3>
<p>El gato gris de doña Gladis, famoso por su ternura pero su carácter inquieto. Se ha visto rondando el humedal y molestando a los patos. Aunque su dueña afirma que estaba dormido, su historial es preocupante.</p>
<p class="coartada">🗨️ COARTADA “Michi durmió toda la mañana en mi regazo. Tiene gastritis y solo caza cucarachas...”</p>
</div>
<div class="ficha">
<h3>⛽ Byron, el Aceitoso</h3>
<p>Mecánico corpulento de la estación de gasolina de la 80. Conocido por su apetito exótico y sus experimentos culinarios cuestionables. Ha bromeado sobre cocinar fauna local, lo cual genera sospechas.</p>
<p class="coartada">🗨️ COARTADA “Yo estaba limpiando un carburador con el nuevo. Pregúntenle al flaco.”</p>
</div>
<div class="ficha">
<h3>🧢 Daniel, el Travieso</h3>
<p>Adolescente creativo pero bastante hiperactivo. Vive cerca del humedal y ha sido regañado por molestar aves. Aunque asegura que solo le gusta comer pollo, ha tenido ideas “artísticas” con los animales antes.</p>
<p class="coartada">🗨️ COARTADA "Estaba en el parque con Juanfer haciendo un TikTok. ¡Qué pato ni qué nada!”</p>
</div>
<div class="ficha">
<h3>🧛♂️ Doctor Morfino</h3>
<p>Forastero enigmático que vive en la calle 77. Se dice ornitólogo y poeta, pero hay algo inquietante en su presencia. Algunos niños aseguran que hablaba con el pato antes del suceso.</p>
<p class="coartada">🗨️ COARTADA “No quiso dar declaraciones. Hablaría con su abogado el señor Garzón.”</p>
</div>
<div class="link">[[Otras pruebas y pistas]]</div>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🕵️ Pruebas del Hecho – El Caso del Pato Perdido</title>
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Special Elite', monospace;
background-color: #1b1b1b;
color: #f1f1f1;
padding: 10px;
}
.titulo-principal {
font-size: 1.6em;
color: #ffc107;
text-align: center;
margin-bottom: 20px;
border-bottom: 2px dashed #444;
padding-bottom: 10px;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #ffc107;
}
.clasificado {
text-align: center;
font-size: 1.5em;
color: red;
border: 2px dashed red;
padding: 10px;
margin-bottom: 30px;
transform: rotate(-5deg);
display: inline-block;
}
.prueba {
background-color: #2a2a2a;
color: #f5f5f5;
border-left: 6px solid #ff5722;
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
.prueba h2, .prueba h3 {
color: #ff9800;
margin-top: 0;
}
.prueba p {
font-size: 1em;
line-height: 1.6;
}
.btn {
display: inline-block;
margin-top: 10px;
background-color: #444;
color: #ffc107;
padding: 8px 15px;
text-decoration: none;
border: 1px solid #ffc107;
border-radius: 4px;
font-size: 0.9em;
}
.btn:hover {
background-color: #ffc107;
color: #111;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #ffc107 }
}
</style>
</head>
<body>
<div class="titulo-principal">🕵️ PRUEBAS DEL EXPEDIENTE</div>
<div class="clasificado">CLASIFICADO</div>
<div class="prueba">
<h2>📍 Estado del occiso</h2>
<p>Solo se hallaron algunas plumas negras con reflejos amarillos verduzcos, parcialmente mojadas, esparcidas junto al espejo sur del humedal. Sin rastros de sangre, pero sí huellas confusas: unas de humano con botas de caucho y otras con marcas de crocs.</p>
<a class="btn" href="https://static.wixstatic.com/media/cd730f_de414829e6c6475388e56c68ce89de1a~mv2.jpg" target="_blank">🔍 Ver imagen</a>
</div>
<div class="prueba">
<h2>🎶 Último canto registrado</h2>
<p>Vecinos cercanos reportaron un graznido prolongado, distinto al habitual. Fue descrito como “melancólico”, y ocurrió a las 11:58 a.m. del 12 de junio. Un niño grabó un fragmento de los últimos cantos del pato esa mañana.</p>
<a class="btn" href="https://video.wixstatic.com/video/cd730f_51685f8330384b2b902454c5a6292348/240p/mp4/file.mp4" target="_blank">▶️ Escuchar audio</a>
</div>
<div class="prueba">
<h2>🥬 Dieta preferida</h2>
<p>El pato solía alimentarse de hierbas, juncos y pequeños insectos, ocasionalmente de buchón. Mostraba una clara preferencia por la guapucha o camarón de río y rechazaba el pan de mogolla que arrojaban algunos adultos imprudentes (evidencias recogidas).</p>
<a class="btn" href="https://static.wixstatic.com/media/cd730f_60f8be998ec84a9da62bd00170678986~mv2.webp" target="_blank">🔍 Ver imagen</a>
</div>
<div class="prueba">
<h2>🍁 Origen canadiense</h2>
<p>El pato pertenecía a la especie <em>Branta canadensis</em>, comúnmente conocida como "ganso canadiense". Según Don Berto, biólogo del barrio, había migrado desde el oeste de Canadá, y había sido visto en el humedal Santa María desde febrero. Era conocido por los observadores como “Canadito”.</p>
<a class="btn" href="https://static.wixstatic.com/media/cd730f_be0e3a498439423180e18692cf9b2473~mv2.png" target="_blank">🔍 Ver imagen</a>
</div>
</body>
</html>
<div class="link">[[Dictamen final]]</div>
<style>
/* Fuente estilo máquina de escribir */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
font-family: 'Special Elite', monospace;
background-color: #1a1a1a;
color: #f0f0f0;
padding: 30px;
}
/* Título principal */
.dictamen-titulo {
font-size: 1.5em;
color: #ffcc00;
text-align: center;
margin-bottom: 30px;
border-bottom: 2px dashed #444;
padding-bottom: 10px;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #ffcc00;
}
/* Contenedor de opciones */
.opciones-dictamen {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Botones tipo noir */
.opcion-link {
background-color: #222;
border: 1px solid #ffcc00;
color: #ffcc00;
padding: 12px 20px;
text-align: left;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
transition: background 0.3s, color 0.3s;
}
.opcion-link:hover {
background-color: #ffcc00;
color: #111;
}
/* Animación estilo máquina de escribir */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #ffcc00 }
}
</style>
<div class="dictamen-titulo">🔎 Veredicto Final</div>
<p style="text-align:center;">(Elige quién crees que es el culpable del crimen del pato canadiense)</p>
(set: $culpable to "")
<div class="opciones-dictamen">
(link: "🧓 Doña Ruca")[
(set: $culpable to "ruca")
(goto: "Veredicto final")
]
(link: "🐈 Michi el Gato")[
(set: $culpable to "michi")
(goto: "Veredicto final")
]
(link: "⛽ Byron el Aceitoso")[
(set: $culpable to "brron")
(goto: "Veredicto final")
]
(link: "🧢 Daniel el Travieso")[
(set: $culpable to "daniel")
(goto: "Veredicto final")
]
(link: "🧛♂️ Doctor Morfino")[
(set: $culpable to "morfino")
(goto: "Veredicto final")
]
</div>
:: Veredicto Final
{
(if: $culpable is "")[
⚠️ <b>No seleccionaste ningún sospechoso.</b><br>
(link: "Volver")[(goto: "Dictamen Final")]
]
(else-if: $culpable is "morfino")[
✅ <b>Correcto:</b> El Doctor Morfino era el verdadero culpable. ¡Justicia para Canadito, el pato canadiense! El acusado ha aceptado su delito. Llorando, confesó que todo fue por impresionar a una vecina de la cl 78 con un //pato a la orange//. Está dispuesto a restaurar el daño. Deberá apoyar el proyecto de protección de la fauna del humedal con muchas horas de capacitación, sensibilizando sobre la biodiversidad del sitio. ¡El Dr Morfino se convertirá en un defensor del Santa María!
]
(else:)[
❌ <b>Incorrecto:</b> Ese sospechoso era inocente. Sigue intentando.
]
}
(link: "Volver a intentar")[(goto: "Dictamen final")]