diff --git a/css/style.css b/css/style.css
index 8824fd0..9001769 100644
--- a/css/style.css
+++ b/css/style.css
@@ -148,6 +148,31 @@ body {
     font-weight: 600;
 }
 
+/* Card color variants */
+.card-green  { border-top: 3px solid #4ade80 !important; }
+.card-green  .card-title { color: #4ade80; }
+.card-green  .btn-link   { color: #4ade80; }
+
+.card-amber  { border-top: 3px solid #fbbf24 !important; }
+.card-amber  .card-title { color: #fbbf24; }
+.card-amber  .btn-link   { color: #fbbf24; }
+
+.card-sky    { border-top: 3px solid #38bdf8 !important; }
+.card-sky    .card-title { color: #38bdf8; }
+.card-sky    .btn-link   { color: #38bdf8; }
+
+.card-red    { border-top: 3px solid #f87171 !important; }
+.card-red    .card-title { color: #f87171; }
+.card-red    .btn-link   { color: #f87171; }
+
+.card-violet  { border-top: 3px solid #c084fc !important; }
+.card-violet  .card-title { color: #c084fc; }
+.card-violet  .btn-link   { color: #c084fc; }
+
+.card-orange  { border-top: 3px solid #fb923c !important; }
+.card-orange  .card-title { color: #fb923c; }
+.card-orange  .btn-link   { color: #fb923c; }
+
 .btn-link:hover {
     color: var(--color-texto);
 }
diff --git a/proyectos.html b/proyectos.html
index fef77cf..09f330d 100644
--- a/proyectos.html
+++ b/proyectos.html
@@ -37,65 +37,76 @@
         <div class="container py-5">
             <h2 class="section-title mb-5">Proyectos en desarrollo</h2>
             
-            <div class="row g-4"> <div class="col-md-6 col-lg-4">
-                    <div class="card project-card h-100">
+            <div class="row g-4">
+
+                <div class="col-md-6 col-lg-4">
+                    <div class="card project-card card-green 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>
+                            <h5 class="card-title fw-bold">📚 Oposiciones</h5>
+                            <p class="card-text">Temario y cuestionarios para TAI AGE</p>
+                            <div id="countdown" class="mb-2"></div>
+                            <p class="card-text card-tecnologia">HTML, CSS, JS</p>
+                            <a href="https://taiage.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-amber 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.</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>
+                            <h5 class="card-title fw-bold">✝️ Recursos Católicos</h5>
+                            <p class="card-text">Web de recursos católicos gratuitos.</p>
+                            <p class="card-text card-tecnologia">HTML, CSS, Bootstrap, JS, PHP, SQL.</p>
+                            <a href="https://recursos-catolicos.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-sky h-100">
                         <div class="card-body">
-                            <h5 class="card-title fw-bold">El Tiempo</h5>
-                            <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, JS.</p>
-                            <a href="eltiempo/index.html" class="btn-link">Saber más →</a>
+                            <h5 class="card-title fw-bold">🌤️ El Tiempo</h5>
+                            <p class="card-text">Estadísticas de Madrid, L'Ampolla y L'Alfas del Pi.</p>
+                            <p class="card-text card-tecnologia">Java, Spring Boot, MySQL, HTML, CSS, JS.</p>
+                            <a href="https://eltiempo.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-red 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, MySQL.</p>
-                            <a href="formula1/index.html" class="btn-link">Saber más →</a>
+                            <h5 class="card-title fw-bold">Fórmula 1</h5>
+                            <p class="card-text">Web de estadísticas de Fórmula 1.</p>
+                            <p class="card-text card-tecnologia">Java, Spring Boot, Hibernate, MySQL.</p>
+                            <a href="https://formula1.tatvil.es" class="btn-link" target="_blank" rel="noopener">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 project-card card-orange h-100">
                         <div class="card-body">
-                            <h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
-                            <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.</p>
+                            <h5 class="card-title fw-bold">Autocompra</h5>
+                            <p class="card-text">Seguimiento de precios y análisis de la compra del supermercado para estadística y lista de la compra automática.</p>
+                            <p class="card-text card-tecnologia">Python, FastAPI, SQLite, HTML, CSS, JS.</p>
+                            <a href="https://autocompra.tatvil.es" class="btn-link" target="_blank" rel="noopener">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6 col-lg-4">
+                    <div class="card project-card card-violet h-100">
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">✂️ Piedra, Papel o Tijera</h5>
+                            <p class="card-text">Juego clásico optimizado para móviles.</p>
+                            <p class="card-text card-tecnologia">HTML, CSS, JavaScript.</p>
                             <a href="piedra-papel-tijera.html" class="btn-link">Saber más →</a>
                         </div>
                     </div>
                 </div>
 
-            </div> </div>
+            </div>
     </section>
 
     <footer class="py-5 text-center">