Mejoras en piedra, papel y tijera y cuenta atras opos

css/piedra-papel-tijera.css

@@ -142,6 +142,53 @@ body {
   margin-bottom: 1rem;
 }
 
+.game-btn {
+    font-size: 2.5rem;
+    padding: 10px;
+    border: var(--borde); /* Usamos tu variable de borde */
+    border-radius: 50%;
+    background: var(--color-secundario);
+    color: var(--color-texto);
+    cursor: pointer;
+    transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion);
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.3rem;
+}
+
+.game-btn:hover {
+    transform: scale(1.15);
+    box-shadow: 0 0 10px var(--color-acento);
+    background: var(--color-fondo);
+}
+
+/* Clase que añade el JS al hacer click */
+.game-btn.seleccionada {
+    box-shadow: 0 0 20px var(--color-acento);
+    transform: scale(1.2);
+    border-color: var(--color-acento);
+}
+
+.game-btn-pc {
+    font-size: 2.5rem;
+    opacity: 0.3;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* Clase para resaltar la elección del PC */
+.pc-elegido {
+    opacity: 1;
+    transform: scale(1.2);
+}
+
 /* Imágenes */
 .btn-img {
   width: 70px;
@@ -175,6 +222,95 @@ body {
   margin-top: 1rem;
 }
 
+/* ── Mapa SVG interactivo ─────────────────────────────────── */
+.mapa-svg {
+  width: 90%;
+  max-width: 320px;
+  margin-top: 1rem;
+  overflow: visible;
+}
+
+/* Líneas de conexión */
+.conexion {
+  stroke: var(--color-primario);
+  stroke-width: 1.5;
+  opacity: 0.3;
+  transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s;
+}
+
+/* Nodos: círculo base */
+.nodo circle {
+  fill: var(--color-secundario);
+  stroke: var(--color-primario);
+  stroke-width: 2;
+  transition: fill 0.25s, stroke 0.25s, filter 0.25s, opacity 0.25s;
+}
+
+.nodo-emoji {
+  font-size: 20px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.nodo-label {
+  font-size: 10px;
+  fill: var(--color-texto);
+  font-family: var(--fuente-base);
+  pointer-events: none;
+  transition: opacity 0.25s, fill 0.25s;
+}
+
+/* ── Estados al pasar el ratón sobre un botón ─────────────── */
+
+/* Atenúa todas las conexiones cuando el mapa está activo */
+.mapa-activo .conexion {
+  opacity: 0.1;
+}
+
+/* Resalta las conexiones activas (las del botón en hover) */
+.mapa-activo .conexion.conexion-activa {
+  stroke: var(--color-acento);
+  stroke-width: 2.5;
+  opacity: 1;
+}
+
+/* Nodo origen (la opción sobre la que se hace hover) */
+.nodo.nodo-origen circle {
+  stroke: var(--color-acento);
+  stroke-width: 3;
+}
+
+/* Nodos vencidos: se iluminan en dorado */
+.nodo.nodo-vencido circle {
+  fill: var(--color-acento);
+  stroke: var(--color-acento);
+  filter: drop-shadow(0 0 7px var(--color-acento));
+}
+
+.nodo.nodo-vencido .nodo-label {
+  fill: var(--color-acento);
+  font-weight: 700;
+  opacity: 1;
+}
+
+/* El resto de nodos se atenúa */
+.mapa-activo .nodo:not(.nodo-vencido):not(.nodo-origen) circle {
+  opacity: 0.35;
+}
+.mapa-activo .nodo:not(.nodo-vencido):not(.nodo-origen) .nodo-label {
+  opacity: 0.35;
+}
+
+/* Texto de pista debajo del mapa */
+.mapa-hint-texto {
+  font-size: 0.8rem;
+  color: var(--color-acento);
+  font-weight: 600;
+  min-height: 1.2rem;
+  margin-top: 0.4rem;
+  transition: opacity 0.25s;
+}
+
 /* Texto */
 .grande {
   font-size: 1.2rem;

css/style.css

@@ -157,6 +157,12 @@ body {
     background: transparent;
 }
 
+#countdown {
+    font-size: 1.2rem;
+    color: var(--color-acento);
+    font-weight: bold;
+}
+
 /* Footer */
 footer {
     border-top: 1px solid var(--color-borde);

js/codigo.js

@@ -12,16 +12,55 @@ function calcularEdad(fechaNacimiento) {
 
 const fechaNacimientoAndrea = "2001-01-14"; 
 const edadAndrea = calcularEdad(fechaNacimientoAndrea);
-document.getElementById("edad-andrea").textContent = edadAndrea;
+if (document.getElementById("edad-andrea")) document.getElementById("edad-andrea").textContent = edadAndrea;
 
 const fechaNacimientoGemelos = "2004-11-24"; 
 const edadGemelos = calcularEdad(fechaNacimientoGemelos);
-document.getElementById("edad-gemelos").textContent = edadGemelos;
+if (document.getElementById("edad-gemelos")) document.getElementById("edad-gemelos").textContent = edadGemelos;
 
 const fechaPandemia = "2020-03-11";
 const edadPandemia = calcularEdad(fechaPandemia);
-document.getElementById("edad-pandemia").textContent = edadPandemia;
+if (document.getElementById("edad-pandemia")) document.getElementById("edad-pandemia").textContent = edadPandemia;
 
 // añade el año actual al pie de página
-document.getElementById("anio").textContent = new Date().getFullYear();
+if (document.getElementById("anio")) document.getElementById("anio").textContent = new Date().getFullYear();
 
+// PROYECTOS
+
+/**
+ * Script para la cuenta atrás del examen TAI AGE
+ * Fecha: 23 de mayo de 2026
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Definimos la fecha objetivo (23 de mayo de 2026 a las 09:00)
+    const examenDate = new Date("May 23, 2026 09:00:00").getTime();
+    const countdownContainer = document.getElementById("countdown");
+
+    // Si el contenedor no existe en esta página, no ejecutamos el intervalo
+    if (!countdownContainer) return;
+
+    const updateTimer = () => {
+        const now = new Date().getTime();
+        const diff = examenDate - now;
+
+        if (diff < 0) {
+            countdownContainer.innerHTML = "¡Día del examen!";
+            clearInterval(timerInterval);
+            return;
+        }
+
+        // Cálculos de tiempo
+        const d = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const s = Math.floor((diff % (1000 * 60)) / 1000);
+
+        // Formateamos el texto
+        countdownContainer.innerHTML = `Examen en: ${d}d ${h}h ${m}m ${s}s`;
+    };
+
+    // Ejecutamos una vez al cargar y luego cada segundo
+    updateTimer();
+    const timerInterval = setInterval(updateTimer, 1000);
+});

js/piedra.js

@@ -15,6 +15,12 @@ function inicializarDOM() {
   DOM.resultado = document.getElementById("resultado");
   DOM.opciones = document.querySelectorAll(".btn-img");
   DOM.toggleTema = document.getElementById("toggle-tema");
+
+  DOM.eleccionordenador = document.getElementById("eleccionordenador");
+  DOM.resultado = document.getElementById("resultado");
+
+  DOM.opciones = document.querySelectorAll(".game-btn"); 
+  DOM.toggleTema = document.getElementById("toggle-tema");
 }
 
 function ocultarJuego() {
@@ -58,33 +64,112 @@ function reproducirSonido() {
 }
 
 function quienGana(opcionJugador) {
-  const opciones = ["piedra", "papel", "tijera", "lagarto", "spock"];
+    // 1. Definir opciones y elección aleatoria del ordenador
-  const opcionOrdenador = opciones[Math.floor(Math.random() * opciones.length)];
+    const opciones = ["piedra", "papel", "tijera", "lagarto", "spock"];
+    const opcionOrdenador = opciones[Math.floor(Math.random() * opciones.length)];
 
-  DOM.eleccionjugador.textContent = opcionJugador;
+    // Diccionario de emojis para actualizar los textos de pantalla
-  DOM.eleccionordenador.textContent = opcionOrdenador;
+    const emojis = {
+        piedra: "🪨",
+        papel: "📄",
+        tijera: "✂️",
+        lagarto: "🦎",
+        spock: "🖖"
+    };
 
-  const ganaJugador =
+    // 2. Actualizar visualmente la elección en el DOM
-    (opcionJugador === "piedra" && ["tijera", "lagarto"].includes(opcionOrdenador)) ||
+    DOM.eleccionjugador.textContent = `Elegiste: ${emojis[opcionJugador]}`;
-    (opcionJugador === "papel" && ["piedra", "spock"].includes(opcionOrdenador)) ||
+    DOM.eleccionordenador.textContent = `PC eligió: ${emojis[opcionOrdenador]}`;
-    (opcionJugador === "tijera" && ["papel", "lagarto"].includes(opcionOrdenador)) ||
-    (opcionJugador === "lagarto" && ["papel", "spock"].includes(opcionOrdenador)) ||
-    (opcionJugador === "spock" && ["piedra", "tijera"].includes(opcionOrdenador));
 
-  if (opcionJugador === opcionOrdenador) {
+    // 3. Resaltar el icono del ordenador (opcional, para dar feedback visual)
-    DOM.resultado.textContent = "Empate";
+    document.querySelectorAll('.game-btn-pc').forEach(el => el.classList.remove('pc-elegido'));
-    animarResultado("empate");
+    const pcIcono = document.getElementById(`pc-${opcionOrdenador}`);
-  } else if (ganaJugador) {
+    if (pcIcono) {
-    DOM.resultado.textContent = "Ganaste";
+        pcIcono.classList.add('pc-elegido');
-    DOM.puntosPersona.textContent = (parseInt(DOM.puntosPersona.textContent) + 1).toString();
+    }
-    animarResultado("victoria");
+
-  } else {
+    // 4. Lógica de victoria (Reglas extendidas de Sheldon Cooper)
-    DOM.resultado.textContent = "Perdiste";
+    // El jugador gana si su opción vence a la del ordenador
-    DOM.puntosOrdenador.textContent = (parseInt(DOM.puntosOrdenador.textContent) + 1).toString();
+    const ganaJugador =
-    animarResultado("derrota");
+        (opcionJugador === "piedra" && (opcionOrdenador === "tijera" || opcionOrdenador === "lagarto")) ||
+        (opcionJugador === "papel" && (opcionOrdenador === "piedra" || opcionOrdenador === "spock")) ||
+        (opcionJugador === "tijera" && (opcionOrdenador === "papel" || opcionOrdenador === "lagarto")) ||
+        (opcionJugador === "lagarto" && (opcionOrdenador === "papel" || opcionOrdenador === "spock")) ||
+        (opcionJugador === "spock" && (opcionOrdenador === "piedra" || opcionOrdenador === "tijera"));
+
+    // 5. Determinar resultado y actualizar puntuación
+    if (opcionJugador === opcionOrdenador) {
+        DOM.resultado.textContent = "¡Empate! 🤝";
+        animarResultado("empate");
+    } else if (ganaJugador) {
+        DOM.resultado.textContent = "¡Has ganado! 🏆";
+        // Convertimos a número, sumamos 1 y devolvemos a texto
+        let puntosActuales = parseInt(DOM.puntosPersona.textContent);
+        DOM.puntosPersona.textContent = (puntosActuales + 1).toString();
+        animarResultado("victoria");
+    } else {
+        DOM.resultado.textContent = "Has perdido 😢";
+        let puntosPC = parseInt(DOM.puntosOrdenador.textContent);
+        DOM.puntosOrdenador.textContent = (puntosPC + 1).toString();
+        animarResultado("derrota");
+    }
+
+    // 6. Efecto de sonido
+    reproducirSonido();
+}
+
+// Reglas: qué opciones vence cada elección
+const vence = {
+  piedra:  ["tijera", "lagarto"],
+  papel:   ["piedra", "spock"],
+  tijera:  ["papel",  "lagarto"],
+  lagarto: ["papel",  "spock"],
+  spock:   ["piedra", "tijera"]
+};
+
+const nombresMapa = {
+  piedra: "Piedra", papel: "Papel", tijera: "Tijera",
+  lagarto: "Lagarto", spock: "Spock"
+};
+
+function activarMapaHover(choice) {
+  const mapa = document.getElementById("mapa-juego");
+  if (!mapa) return;
+
+  mapa.classList.add("mapa-activo");
+
+  // Marcar nodo origen
+  const origen = document.getElementById(`nodo-${choice}`);
+  if (origen) origen.classList.add("nodo-origen");
+
+  // Marcar nodos vencidos y conexiones activas
+  vence[choice].forEach(beaten => {
+    const nodo = document.getElementById(`nodo-${beaten}`);
+    if (nodo) nodo.classList.add("nodo-vencido");
+  });
+  mapa.querySelectorAll(`.conexion[data-from="${choice}"]`)
+      .forEach(l => l.classList.add("conexion-activa"));
+
+  // Texto de pista
+  const hint = document.getElementById("mapa-hint");
+  if (hint) {
+    const vencidos = vence[choice].map(v => nombresMapa[v]).join(" y ");
+    hint.textContent = `${nombresMapa[choice]} vence a: ${vencidos}`;
   }
+}
 
-  reproducirSonido();
+function desactivarMapaHover() {
+  const mapa = document.getElementById("mapa-juego");
+  if (!mapa) return;
+
+  mapa.classList.remove("mapa-activo");
+  mapa.querySelectorAll(".nodo-origen, .nodo-vencido")
+      .forEach(n => n.classList.remove("nodo-origen", "nodo-vencido"));
+  mapa.querySelectorAll(".conexion-activa")
+      .forEach(l => l.classList.remove("conexion-activa"));
+
+  const hint = document.getElementById("mapa-hint");
+  if (hint) hint.textContent = "";
 }
 
 function configurarEventos() {
@@ -98,6 +183,8 @@ function configurarEventos() {
       op.classList.add("seleccionada");
       quienGana(op.id);
     });
+    op.addEventListener("mouseenter", () => activarMapaHover(op.dataset.choice));
+    op.addEventListener("mouseleave", desactivarMapaHover);
   });
 }
 

piedra-papel-tijera.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Piedra · Papel · Tijera · Lagarto · Spock</title>
-
     <script src="js/piedra.js" defer></script>
     <link rel="stylesheet" href="css/piedra-papel-tijera.css">
     <link rel="icon" href="favicon.ico" type="image/x-icon">
@@ -27,7 +26,6 @@
 
     <main class="cuerpo">
 
-        <!-- Jugador -->
         <section class="columna" id="persona">
             <header class="cabecera-jugador">
                 <p id="etiquetaJugador">Puntuación Jugador:</p>
@@ -35,23 +33,79 @@
             </header>
 
             <div class="opciones">
-                <img src="img/piedra-papel-tijera/piedra.png"  id="piedra"  class="btn-img" alt="Piedra">
+                <button class="game-btn" id="piedra" data-choice="piedra" title="Piedra">🪨</button>
-                <img src="img/piedra-papel-tijera/papel.png"   id="papel"   class="btn-img" alt="Papel">
+                <button class="game-btn" id="papel" data-choice="papel" title="Papel">📄</button>
-                <img src="img/piedra-papel-tijera/tijera.png"  id="tijera"  class="btn-img" alt="Tijera">
+                <button class="game-btn" id="tijera" data-choice="tijera" title="Tijera">✂️</button>
-                <img src="img/piedra-papel-tijera/lagarto.png" id="lagarto" class="btn-img" alt="Lagarto">
+                <button class="game-btn" id="lagarto" data-choice="lagarto" title="Lagarto">🦎</button>
-                <img src="img/piedra-papel-tijera/spock.png"   id="spock"   class="btn-img" alt="Spock">
+                <button class="game-btn" id="spock" data-choice="spock" title="Spock">🖖</button>
             </div>
 
             <p class="grande" id="eleccionjugador">¿Qué eliges?</p>
         </section>
 
-        <!-- Centro -->
         <section class="columna" id="imagencentro">
             <p class="grande" id="resultado">Resultado</p>
-            <img src="img/piedra-papel-tijera/esquemaminimalista.png" class="central-img" alt="Esquema del juego">
+
+            <!-- Mapa interactivo: pasa el ratón sobre los botones para ver qué vence cada opción -->
+            <svg id="mapa-juego" class="mapa-svg" viewBox="0 0 350 290" xmlns="http://www.w3.org/2000/svg" aria-label="Mapa de reglas del juego">
+
+                <!-- Conexiones (quién vence a quién) -->
+                <!-- piedra → tijera -->
+                <line class="conexion" data-from="piedra" data-to="tijera"   x1="253" y1="127" x2="133" y2="213"/>
+                <!-- piedra → lagarto -->
+                <line class="conexion" data-from="piedra" data-to="lagarto"  x1="266" y1="137" x2="246" y2="203"/>
+                <!-- papel → piedra -->
+                <line class="conexion" data-from="papel"  data-to="piedra"   x1="102" y1="112" x2="248" y2="112"/>
+                <!-- papel → spock -->
+                <line class="conexion" data-from="papel"  data-to="spock"    x1="97"  y1="97"  x2="154" y2="57"/>
+                <!-- tijera → papel -->
+                <line class="conexion" data-from="tijera" data-to="papel"    x1="104" y1="203" x2="84"  y2="137"/>
+                <!-- tijera → lagarto -->
+                <line class="conexion" data-from="tijera" data-to="lagarto"  x1="138" y1="228" x2="212" y2="228"/>
+                <!-- lagarto → papel -->
+                <line class="conexion" data-from="lagarto" data-to="papel"   x1="217" y1="213" x2="97"  y2="127"/>
+                <!-- lagarto → spock -->
+                <line class="conexion" data-from="lagarto" data-to="spock"   x1="230" y1="203" x2="183" y2="67"/>
+                <!-- spock → piedra -->
+                <line class="conexion" data-from="spock"  data-to="piedra"   x1="196" y1="57"  x2="253" y2="97"/>
+                <!-- spock → tijera -->
+                <line class="conexion" data-from="spock"  data-to="tijera"   x1="167" y1="67"  x2="120" y2="203"/>
+
+                <!-- Nodos (posiciones en pentágono) -->
+                <g class="nodo" id="nodo-spock">
+                    <circle cx="175" cy="42" r="26"/>
+                    <text x="175" y="42" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🖖</text>
+                    <text x="175" y="8"  text-anchor="middle" class="nodo-label">Spock</text>
+                </g>
+
+                <g class="nodo" id="nodo-piedra">
+                    <circle cx="274" cy="112" r="26"/>
+                    <text x="274" y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🪨</text>
+                    <text x="308" y="116" text-anchor="start" class="nodo-label">Piedra</text>
+                </g>
+
+                <g class="nodo" id="nodo-lagarto">
+                    <circle cx="238" cy="228" r="26"/>
+                    <text x="238" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">🦎</text>
+                    <text x="238" y="272" text-anchor="middle" class="nodo-label">Lagarto</text>
+                </g>
+
+                <g class="nodo" id="nodo-tijera">
+                    <circle cx="112" cy="228" r="26"/>
+                    <text x="112" y="228" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">✂️</text>
+                    <text x="112" y="272" text-anchor="middle" class="nodo-label">Tijera</text>
+                </g>
+
+                <g class="nodo" id="nodo-papel">
+                    <circle cx="76" cy="112" r="26"/>
+                    <text x="76"  y="112" text-anchor="middle" dominant-baseline="central" class="nodo-emoji">📄</text>
+                    <text x="42"  y="116" text-anchor="end"   class="nodo-label">Papel</text>
+                </g>
+            </svg>
+
+            <p id="mapa-hint" class="mapa-hint-texto"></p>
         </section>
 
-        <!-- Ordenador -->
         <section class="columna" id="ordenador">
             <header class="cabecera-jugador">
                 <p>Puntuación Ordenador:</p>
@@ -59,11 +113,11 @@
             </header>
 
             <div class="opciones">
-                <img src="img/piedra-papel-tijera/piedra.png"  class="btn-img" alt="Piedra">
+                <div class="game-btn-pc" id="pc-piedra">🪨</div>
-                <img src="img/piedra-papel-tijera/papel.png"   class="btn-img" alt="Papel">
+                <div class="game-btn-pc" id="pc-papel">📄</div>
-                <img src="img/piedra-papel-tijera/tijera.png"  class="btn-img" alt="Tijera">
+                <div class="game-btn-pc" id="pc-tijera">✂️</div>
-                <img src="img/piedra-papel-tijera/lagarto.png" class="btn-img" alt="Lagarto">
+                <div class="game-btn-pc" id="pc-lagarto">🦎</div>
-                <img src="img/piedra-papel-tijera/spock.png"   class="btn-img" alt="Spock">
+                <div class="game-btn-pc" id="pc-spock">🖖</div>
             </div>
 
             <p class="grande" id="eleccionordenador">Elección del ordenador</p>
@@ -71,7 +125,7 @@
 
     </main>
 
-     <footer class="py-5 text-center">
+    <footer class="py-5 text-center">
         <div class="container">
             <p class="mb-0">&copy; 2026 - Tatiana Villa</p>
         </div>

proyectos.html

@@ -10,65 +10,53 @@
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
 <body class="bg-black text-light">
+    <header>
+        <nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
+            <div class="container-fluid">
+                <a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
+                    <span class="text-primary">{</span>tatvil <span class="text-primary">}</span>
+                </a>
 
-   <!-- Header -->
+                <a class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#menuNav" 
-<header>
+                aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation" style="cursor: pointer;">
-    <nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
+                    <span class="navbar-toggler-icon"></span>
-        <div class="container-fluid">
+                </a>
-
+                <div class="collapse navbar-collapse justify-content-end" id="menuNav">
-            <!-- Logo -->
+                    <ul class="navbar-nav">
-            <a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
+                        <li class="nav-item"><a class="nav-link" href="index.html">Inicio</a></li>
-                <span class="text-primary">{</span>Aplicaciones de Vanguardia <span class="text-primary">}</span>
+                        <li class="nav-item"><a class="nav-link" href="proyectos.html">Proyectos</a></li>
-            </a>
+                        <li class="nav-item"><a class="nav-link" href="habilidades.html">Habilidades</a></li>
-
+                        <li class="nav-item"><a class="nav-link" href="formacion.html">Formación</a></li>
-             <!-- Botón móvil -->
+                    </ul>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
+                </div>
-                    aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <!-- Menú -->
-            <div class="collapse navbar-collapse justify-content-end" id="menuNav">
-                <ul class="navbar-nav">
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="index.html">Inicio</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="proyectos.html">Proyectos</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="habilidades.html">Habilidades</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="formacion.html">Formación</a>
-                    </li>
-<!--
-                    <li class="nav-item">
-                        <a class="nav-link" href="experiencia.html">Experiencia</a>
-                    </li>
-                -->
-                </ul>
             </div>
-
+        </nav>
-        </div>
+    </header>
-    </nav>
-</header>
 
     <section id="proyectos" class="py-5">
         <div class="container py-5">
             <h2 class="section-title mb-5">Proyectos en desarrollo</h2>
             
-            <div class="row g-4">
+            <div class="row g-4"> <div class="col-md-6 col-lg-4">
+                    <div class="card project-card h-100">
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Oposiciones</h5>
+                            <p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
+                            
+                            <div id="countdown" class="mb-2" ></div>
+                            
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JS</p>
+                            <a href="oposiciones/index.html" class="btn-link">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">
                         <div class="card-body">
                             <h5 class="card-title fw-bold">Recursos Católicos</h5>
-                            <p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
+                            <p class="card-text text-muted">Web de recursos católicos gratuitos.</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JS, PHP, SQL.</p>
                             <a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
                         </div>
                     </div>
@@ -78,8 +66,8 @@
                     <div class="card project-card h-100">
                         <div class="card-body">
                             <h5 class="card-title fw-bold">El Tiempo</h5>
-                            <p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
+                            <p class="card-text text-muted">Estadísticas de Madrid, L'Ampolla y L'Alfas del Pi.</p>
-                            <p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
+                            <p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JS.</p>
                             <a href="eltiempo/index.html" class="btn-link">Saber más →</a>
                         </div>
                     </div>
@@ -87,54 +75,27 @@
 
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">
-
                         <div class="card-body">
                             <h5 class="card-title fw-bold">Formula 1</h5>
                             <p class="card-text text-muted">Web de estadísticas de Fórmula 1.</p>
-                            <p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, JPA, MySQL, HTML, CSS, JavaScript.</p>
+                            <p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, MySQL.</p>
                             <a href="formula1/index.html" class="btn-link">Saber más →</a>
                         </div>
                     </div>
                 </div>
 
-
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">Oposiciones</h5>
-                            <p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS</p>
-                            <a href="oposiciones/index.html" class="btn-link">Saber más →</a>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-md-6 col-lg-4">
-                    <div class="card project-card h-100">
-
                         <div class="card-body">
                             <h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
-                            <p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
+                            <p class="card-text text-muted">Juego clásico optimizado para móviles.</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript.</p>
                             <a href="piedra-papel-tijera.html" class="btn-link">Saber más →</a>
                         </div>
                     </div>
                 </div>
 
-                <div class="col-md-6 col-lg-4">
+            </div> </div>
-                    <div class="card project-card h-100">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">F1</h5>
-                            <p class="card-text text-muted">Pronosticos, estadisticas, resultados y noticias de Fórmula 1.</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
-                            <a href="f1.html" class="btn-link">Saber más →</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </section>
 
     <footer class="py-5 text-center">
@@ -144,5 +105,7 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-</body>
+    
+    <script src="js/codigo.js"></script> 
+    </body>
 </html>