diff --git a/src/app/clasificados/page.tsx b/src/app/clasificados/page.tsx
index 3ae558f..ff96c49 100644
--- a/src/app/clasificados/page.tsx
+++ b/src/app/clasificados/page.tsx
@@ -33,43 +33,58 @@ export default function ClasificadosPage() {
   }, []);
 
   return (
-    <main className="animate-fade-in">
-      <section className="hero-section">
-        <div className="hero-bg-gradient"></div>
-        <h1 className="hero-title">
-          Mercado de<br/>Clasificados
-        </h1>
-        <p className="hero-subtitle">
-          El primer portal transaccional de medios impulsado por inteligencia artificial.
-          Compra, venta y servicios en tu comunidad al instante.
-        </p>
-        <button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
-          Explorar Contenido
-        </button>
+    <main className="animate-fade-in relative min-h-screen">
+      {/* Sci-Fi Hero Section */}
+      <section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
+        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px] mix-blend-screen pointer-events-none"></div>
+        
+        <div className="relative z-10 flex flex-col items-center max-w-4xl mx-auto">
+          <h1 className="text-5xl md:text-7xl font-outfit font-black tracking-tighter mb-6 leading-tight">
+            MERCADO DE<br/>
+            <span className="holographic-text block mt-2">CLASIFICADOS</span>
+          </h1>
+          
+          <p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
+            El primer portal transaccional de medios impulsado por inteligencia artificial.
+            Compra, venta y servicios en tu comunidad al instante con total seguridad.
+          </p>
+          
+          <button 
+            onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}
+            className="group relative inline-flex items-center justify-center gap-3 px-8 py-3 rounded-full font-bold text-white overflow-hidden transition-all hover:scale-105"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-90 group-hover:opacity-100 transition-opacity"></div>
+            <span className="relative z-10 tracking-widest uppercase text-sm">Explorar Mercado</span>
+          </button>
+        </div>
       </section>
 
-      <section id="noticias" className="news-section container">
-        <div className="section-header">
+      <section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div>
-              <span className="section-subtitle">Avisos</span>
-              <h2 className="section-title">Anuncios Recientes</h2>
+              <div className="flex items-center gap-3 mb-2">
+                 <div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
+                 <span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
+              </div>
+              <h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
            </div>
-           {/* Aquí se pueden poner filtros de categorias después */}
         </div>
 
         {isLoading ? (
-             <div className="w-full py-20 flex flex-col items-center justify-center text-slate-400">
-                <Loader2 size={40} className="animate-spin mb-4" />
-                <p>Sincronizando información...</p>
+             <div className="w-full py-40 flex flex-col items-center justify-center text-purple-500">
+                <Loader2 size={50} className="animate-spin mb-6" />
+                <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
              </div>
         ) : posts.length === 0 ? (
-             <div className="w-full py-20 flex flex-col items-center justify-center text-slate-500 border border-slate-800 rounded-2xl bg-slate-900/50">
-                <span className="text-4xl mb-4">📢</span>
-                <h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3>
-                <p>El portal ha sido instanciado, en espera de recepción por el bot.</p>
+             <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
+                <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
+                   <Sparkles size={48} className="text-purple-500" />
+                </div>
+                <h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
+                <p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
              </div>
         ) : (
-             <div className="news-grid">
+             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {posts.map((post) => (
                  <NewsCard 
                     key={post.$id}
diff --git a/src/app/eventos/page.tsx b/src/app/eventos/page.tsx
index 1209dc8..b38e29f 100644
--- a/src/app/eventos/page.tsx
+++ b/src/app/eventos/page.tsx
@@ -33,43 +33,58 @@ export default function EventosPage() {
   }, []);
 
   return (
-    <main className="animate-fade-in">
-      <section className="hero-section">
-        <div className="hero-bg-gradient"></div>
-        <h1 className="hero-title">
-          Eventos en tu<br/>Región
-        </h1>
-        <p className="hero-subtitle">
-          El primer portal transaccional de medios impulsado por inteligencia artificial.
-          Los mejores eventos artísticos, culturales y sociales.
-        </p>
-        <button className="action-btn" onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}>
-          Explorar Contenido
-        </button>
+    <main className="animate-fade-in relative min-h-screen">
+      {/* Sci-Fi Hero Section */}
+      <section className="relative flex flex-col items-center justify-center min-h-[60vh] text-center px-4 overflow-hidden mesh-bg">
+        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] mix-blend-screen pointer-events-none"></div>
+        
+        <div className="relative z-10 flex flex-col items-center max-w-4xl mx-auto">
+          <h1 className="text-5xl md:text-7xl font-outfit font-black tracking-tighter mb-6 leading-tight">
+            EVENTOS EN TU<br/>
+            <span className="holographic-text block mt-2">REGIÓN</span>
+          </h1>
+          
+          <p className="text-lg text-slate-400 max-w-2xl mb-10 font-medium">
+            El primer portal transaccional de medios impulsado por inteligencia artificial.
+            Los mejores eventos artísticos, culturales y sociales en un solo lugar.
+          </p>
+          
+          <button 
+            onClick={() => document.getElementById('noticias')?.scrollIntoView({ behavior: 'smooth'})}
+            className="group relative inline-flex items-center justify-center gap-3 px-8 py-3 rounded-full font-bold text-white overflow-hidden transition-all hover:scale-105"
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 opacity-90 group-hover:opacity-100 transition-opacity"></div>
+            <span className="relative z-10 tracking-widest uppercase text-sm">Explorar Agenda</span>
+          </button>
+        </div>
       </section>
 
-      <section id="noticias" className="news-section container">
-        <div className="section-header">
+      <section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div>
-              <span className="section-subtitle">Próximos</span>
-              <h2 className="section-title">Agenda de Eventos</h2>
+              <div className="flex items-center gap-3 mb-2">
+                 <div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-blue-600 rounded-full"></div>
+                 <span className="text-cyan-400 font-bold tracking-widest uppercase text-sm">Próximos</span>
+              </div>
+              <h2 className="text-4xl font-outfit font-black text-white">Agenda de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Eventos</span></h2>
            </div>
-           {/* Aquí se pueden poner filtros de categorias después */}
         </div>
 
         {isLoading ? (
-             <div className="w-full py-20 flex flex-col items-center justify-center text-slate-400">
-                <Loader2 size={40} className="animate-spin mb-4" />
-                <p>Sincronizando información...</p>
+             <div className="w-full py-40 flex flex-col items-center justify-center text-cyan-500">
+                <Loader2 size={50} className="animate-spin mb-6" />
+                <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
              </div>
         ) : posts.length === 0 ? (
-             <div className="w-full py-20 flex flex-col items-center justify-center text-slate-500 border border-slate-800 rounded-2xl bg-slate-900/50">
-                <span className="text-4xl mb-4">📅</span>
-                <h3 className="text-xl font-bold text-white mb-2">No hay publicaciones</h3>
-                <p>El portal ha sido instanciado, en espera de recepción por el bot.</p>
+             <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
+                <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
+                   <Calendar size={48} className="text-cyan-500" />
+                </div>
+                <h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Eventos Próximos</h3>
+                <p className="text-slate-400 relative z-10">El portal se encuentra a la espera de nuevas programaciones en la región.</p>
              </div>
         ) : (
-             <div className="news-grid">
+             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {posts.map((post) => (
                  <NewsCard 
                     key={post.$id}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index de6e95b..46f01a2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -94,7 +94,7 @@ export default function Home() {
                            <div className="absolute inset-0 bg-cyan-500 blur-xl opacity-40 animate-pulse rounded-full"></div>
                            <Loader2 size={60} className="relative animate-spin mb-6" />
                         </div>
-                        <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Data...</p>
+                        <p className="font-outfit text-xl font-bold tracking-widest uppercase animate-pulse">Sincronizando Noticias...</p>
                      </div>
                 ) : posts.length === 0 ? (
                      <div className="w-full py-32 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
diff --git a/src/components/NewsTicker.tsx b/src/components/NewsTicker.tsx
index 07dc981..a6f57b0 100644
--- a/src/components/NewsTicker.tsx
+++ b/src/components/NewsTicker.tsx
@@ -59,15 +59,15 @@ export default async function NewsTicker() {
                         <Link 
                            href={`/post/${noticia.slug}`} 
                            key={idx} 
-                           className="flex items-center gap-3 mx-6 group cursor-pointer border-r border-cyan-800/50 pr-6"
+                           className="flex items-center gap-4 mx-8 group cursor-pointer border-r border-cyan-800/50 pr-8"
                         >
                             {imgUrl && (
                                 // eslint-disable-next-line @next/next/no-img-element
-                                <img src={imgUrl} alt={noticia.titulo} className="w-8 h-8 object-cover rounded shadow-md group-hover:scale-110 transition-transform" />
+                                <img src={imgUrl} alt={noticia.titulo} className="w-10 h-10 object-cover rounded-lg shadow-[0_0_10px_rgba(6,182,212,0.3)] group-hover:scale-110 group-hover:shadow-[0_0_15px_rgba(6,182,212,0.5)] transition-all duration-300 border border-white/10" />
                             )}
                             <span className="text-sm font-bold text-slate-300 group-hover:text-cyan-400 transition-colors uppercase tracking-widest flex items-center gap-2">
-                                <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>
-                                {noticia.titulo.length > 50 ? noticia.titulo.substring(0, 50) + '...' : noticia.titulo}
+                                {!imgUrl && <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>}
+                                {noticia.titulo.length > 55 ? noticia.titulo.substring(0, 55) + '...' : noticia.titulo}
                             </span>
                         </Link>
                     )