diff --git a/assets/fonts/Kaleagnetta.woff2 b/assets/fonts/Kaleagnetta.woff2
new file mode 100644
index 0000000..8b002b3
Binary files /dev/null and b/assets/fonts/Kaleagnetta.woff2 differ
diff --git a/blog.html b/blog.html
index d657c25..b603781 100644
--- a/blog.html
+++ b/blog.html
@@ -3,66 +3,341 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="">
-  <title>Blog - [Nombre de la agencia]</title>
+  <meta name="description" content="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
+  <title>Blog | Amor y Roma — Recursos y Estrategias</title>
   <link rel="stylesheet" href="style/main.css">
-  <link rel="stylesheet" href="style/blog.css">
 </head>
 <body>
   <div id="menu-container"></div>
 
   <main>
-    <!-- Sección 1: Encabezado del blog -->
-    <section id="blog-section-1">
-      <h2>Blog</h2>
-      <p>Contenido pendiente de definir.</p>
-    </section>
+<!-- SECCIÓN 1: HERO COMPACTO -->
+<section class="blog-hero-compact">
+  <div class="hero-compact-content">
+    <span class="badge-filosofia"></span>
+    <h1 class="hero-compact-title">Ideas que construyen marcas</h1>
+    <p class="hero-compact-subtitle">
+      Estrategia, diseño y tecnología explicados sin tecnicismos innecesarios.
+    </p>
+  </div>
+</section>
 
-    <!-- Sección 2: Filtros dinámicos -->
-    <section id="blog-section-2">
-      <div class="blog-filters">
-        <label for="filter-category">Categoría:</label>
-        <select id="filter-category">
-          <option value="">Todas</option>
-          <!-- Las opciones se cargarán dinámicamente -->
+<!-- SECCIÓN 2: HEADER DE FILTROS (STICKY CON BUSCADOR) -->
+<section class="blog-filters-header" id="blog-filters-header">
+  <div class="filters-header-container">
+    
+    <!-- Fila superior: Buscador + Filtros principales -->
+    <div class="filters-top-row">
+      <div class="search-wrapper-compact">
+        <span class="search-icon">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+        </span>
+        <input 
+          type="text" 
+          id="blog-search" 
+          placeholder="Buscá por tema: branding, web, redes..." 
+          autocomplete="off"
+          aria-label="Buscar artículos"
+        >
+        <button class="search-clear" id="search-clear" type="button" aria-label="Limpiar búsqueda">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6 6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="filter-group-compact">
+        <button class="filter-btn active" data-filter="all">Todos</button>
+        <button class="filter-btn" data-filter="destacados">Destacados</button>
+      </div>
+    </div>
+
+    <!-- Fila inferior: Categorías + Ordenamiento -->
+    <div class="filters-bottom-row">
+      <div class="filter-categories-compact">
+        <button class="category-btn active" data-category="all">Todas</button>
+        <button class="category-btn" data-category="branding">Branding</button>
+        <button class="category-btn" data-category="web">Web</button>
+        <button class="category-btn" data-category="redes">Redes</button>
+        <button class="category-btn" data-category="automatizaciones">Automatizaciones</button>
+        <button class="category-btn" data-category="paid">Paid Media</button>
+        <button class="category-btn" data-category="estrategia">Estrategia</button>
+        <button class="category-btn" data-category="casos">Casos</button>
+      </div>
+
+      <div class="filter-secondary-compact">
+        <select id="sort-select" class="sort-select-compact">
+          <option value="recent">Más recientes</option>
+          <option value="popular">Más populares</option>
+          <option value="alphabetical">A-Z</option>
         </select>
+      </div>
+    </div>
 
-        <label for="filter-date-from">Desde:</label>
-        <input type="date" id="filter-date-from">
+    <!-- Info de resultados -->
+    <div class="results-info-compact">
+      <span id="results-count">Mostrando <strong>todos</strong> los artículos</span>
+      <button class="reset-filters-compact" id="reset-filters">Limpiar filtros</button>
+    </div>
+  </div>
+</section>
 
-        <label for="filter-date-to">Hasta:</label>
-        <input type="date" id="filter-date-to">
+    <!-- SECCIÓN 3: ARTÍCULOS DESTACADOS -->
+<section class="featured-posts" id="featured-posts">
+  <div class="section-header">
+    <h2 class="section-title">Más leídos</h2>
+    <p class="section-subtitle">Los artículos que más están ayudando a marcas como la tuya.</p>
+  </div>
 
-        <button type="button" id="btn-apply-filters">Aplicar filtros</button>
-        <button type="button" id="btn-clear-filters">Limpiar</button>
+  <div class="featured-grid">
+    <!-- Artículo destacado 1 -->
+    <article class="featured-card" data-categories="branding estrategia" data-tags="identidad, marca, posicionamiento" data-featured="true">
+      <div class="featured-image">
+        <img src="../assets/blog/branding-completo.jpg" alt="Guía completa de branding">
+        <span class="featured-badge">Más leído</span>
+      </div>
+      <div class="featured-content">
+        <div class="featured-meta">
+          <span class="category-tag branding">Branding</span>
+          <time datetime="2024-01-15">15 Ene 2024</time>
+        </div>
+        <h3 class="featured-title">Guía completa: Cómo construir una identidad de marca que perdure</h3>
+        <p class="featured-excerpt">
+          Desde el diagnóstico inicial hasta el manual de identidad. Todo lo que necesitás saber para crear una marca con esencia y solidez estratégica.
+        </p>
+        <div class="featured-footer">
+          <span class="reading-time">⏱ 12 min de lectura</span>
+          <a href="#" class="btn-read">Leer artículo →</a>
+        </div>
+      </div>
+    </article>
+
+    <!-- Artículo destacado 2 -->
+    <article class="featured-card" data-categories="web" data-tags="landing page, conversión, diseño" data-featured="true">
+      <div class="featured-image">
+        <img src="../assets/blog/landing-page.jpg" alt="Landing pages">
+      </div>
+      <div class="featured-content">
+        <div class="featured-meta">
+          <span class="category-tag web">Web</span>
+          <time datetime="2024-01-10">10 Ene 2024</time>
+        </div>
+        <h3 class="featured-title">Landing pages que convierten: 7 principios probados</h3>
+        <p class="featured-excerpt">
+          Estructura, copy y diseño working together para transformar visitantes en clientes reales.
+        </p>
+        <div class="featured-footer">
+          <span class="reading-time">⏱ 8 min de lectura</span>
+          <a href="#" class="btn-read">Leer artículo →</a>
+        </div>
+      </div>
+    </article>
+
+    <!-- Artículo destacado 3 -->
+    <article class="featured-card" data-categories="automatizaciones" data-tags="instagram, chatbots, leads" data-featured="true">
+      <div class="featured-image">
+        <img src="../assets/blog/automatizacion.jpg" alt="Automatizaciones">
+      </div>
+      <div class="featured-content">
+        <div class="featured-meta">
+          <span class="category-tag automatizaciones">Automatizaciones</span>
+          <time datetime="2024-01-05">5 Ene 2024</time>
+        </div>
+        <h3 class="featured-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
+        <p class="featured-excerpt">
+          Flujos inteligentes que trabajan 24/7 mientras vos te enfocás en lo que mejor sabés hacer.
+        </p>
+        <div class="featured-footer">
+          <span class="reading-time"> 9 min de lectura</span>
+          <a href="#" class="btn-read">Leer artículo →</a>
+        </div>
+      </div>
+    </article>
+  </div>
+</section>
+
+    <!-- SECCIÓN 4: GRID DE ARTÍCULOS -->
+    <section class="blog-grid-section">
+      <div class="blog-grid" id="blog-grid">
+        
+        <!-- ARTÍCULO 1 -->
+        <article class="blog-card" data-categories="redes estrategia" data-tags="contenido, planificación, calendario" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/contenido-redes.jpg" alt="Contenido para redes">
+            <span class="card-category redes">Redes</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2024-01-20">20 Ene 2024</time>
+              <span class="reading-time-mini">8 min</span>
+            </div>
+            <h3 class="card-title">Planificación de contenido: el método de los 3 pilares</h3>
+            <p class="card-excerpt">
+              Cómo estructurar tu calendario editorial para mantener coherencia sin volverte loco.
+            </p>
+            <div class="card-tags">
+              <span class="tag">Contenido</span>
+              <span class="tag">Planificación</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+
+        <!-- ARTÍCULO 2 -->
+        <article class="blog-card" data-categories="branding" data-tags="logo, identidad, diseño" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/logo-design.jpg" alt="Diseño de logo">
+            <span class="card-category branding">Branding</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2024-01-18">18 Ene 2024</time>
+              <span class="reading-time-mini">6 min</span>
+            </div>
+            <h3 class="card-title">Tu logo no es tu marca (y por qué importa)</h3>
+            <p class="card-excerpt">
+              La diferencia entre un símbolo bonito y una identidad estratégica que realmente funciona.
+            </p>
+            <div class="card-tags">
+              <span class="tag">Logo</span>
+              <span class="tag">Identidad</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+
+        <!-- ARTÍCULO 3 -->
+        <article class="blog-card" data-categories="web paid" data-tags="seo, google ads, tráfico" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/seo-web.jpg" alt="SEO">
+            <span class="card-category web">Web</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2024-01-12">12 Ene 2024</time>
+              <span class="reading-time-mini">10 min</span>
+            </div>
+            <h3 class="card-title">SEO vs Paid Media: cuándo usar cada uno</h3>
+            <p class="card-excerpt">
+              No son enemigos, son complementarios. Te explicamos cómo combinarlos estratégicamente.
+            </p>
+            <div class="card-tags">
+              <span class="tag">SEO</span>
+              <span class="tag">Google Ads</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+
+        <!-- ARTÍCULO 4 -->
+        <article class="blog-card" data-categories="casos estrategia" data-tags="caso de éxito, tecnología, ecosistema" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/caso-tech.jpg" alt="Caso de éxito">
+            <span class="card-category casos">Casos</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2024-01-08">8 Ene 2024</time>
+              <span class="reading-time-mini">7 min</span>
+            </div>
+            <h3 class="card-title">Caso de éxito: Ecosistema digital para startup tech</h3>
+            <p class="card-excerpt">
+              Cómo construimos una presencia integral desde cero: branding, web y redes en 90 días.
+            </p>
+            <div class="card-tags">
+              <span class="tag">Caso de Éxito</span>
+              <span class="tag">Tecnología</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+
+        <!-- ARTÍCULO 5 -->
+        <article class="blog-card" data-categories="automatizaciones redes" data-tags="manychat, instagram, ventas" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/chatbot.jpg" alt="Chatbot">
+            <span class="card-category automatizaciones">Automatizaciones</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2024-01-03">3 Ene 2024</time>
+              <span class="reading-time-mini">9 min</span>
+            </div>
+            <h3 class="card-title">Chatbots que no parecen robots: la clave está en el copy</h3>
+            <p class="card-excerpt">
+              Cómo escribir flujos de conversación que suenen humanos y realmente vendan.
+            </p>
+            <div class="card-tags">
+              <span class="tag">ManyChat</span>
+              <span class="tag">Ventas</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+
+        <!-- ARTÍCULO 6 -->
+        <article class="blog-card" data-categories="estrategia branding" data-tags="posicionamiento, competencia, diferenciación" data-featured="false">
+          <div class="card-image">
+            <img src="../assets/blog/posicionamiento.jpg" alt="Posicionamiento">
+            <span class="card-category estrategia">Estrategia</span>
+          </div>
+          <div class="card-content">
+            <div class="card-meta">
+              <time datetime="2023-12-28">28 Dic 2023</time>
+              <span class="reading-time-mini">11 min</span>
+            </div>
+            <h3 class="card-title">Posicionamiento: cómo destacar en un mercado saturado</h3>
+            <p class="card-excerpt">
+              Estrategias prácticas para encontrar tu espacio único y volverte inolvidable.
+            </p>
+            <div class="card-tags">
+              <span class="tag">Posicionamiento</span>
+              <span class="tag">Diferenciación</span>
+            </div>
+            <a href="#" class="card-link">Leer artículo</a>
+          </div>
+        </article>
+      </div>
+
+      <!-- ESTADO VACÍO (cuando no hay resultados) -->
+      <div class="empty-state" id="empty-state" style="display: none;">
+        <div class="empty-icon">🔍</div>
+        <h3>No encontramos artículos con esos filtros</h3>
+        <p>Probá con otros términos o limpiá los filtros para ver todo el contenido.</p>
+        <button class="btn btn-primary" id="empty-reset">Ver todos los artículos</button>
+      </div>
+
+      <!-- PAGINACIÓN / CARGAR MÁS -->
+      <div class="load-more-container">
+        <button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
       </div>
     </section>
 
-    <!-- Sección 3: Listado de artículos -->
-    <section id="blog-section-3">
-      <div class="blog-list" id="blog-list">
-        <!-- Los artículos se inyectarán aquí desde PHP/DB -->
-        <p>Cargando artículos...</p>
+    <!-- SECCIÓN 5: NEWSLETTER -->
+    <section class="newsletter-section">
+      <div class="newsletter-card">
+        <div class="newsletter-content">
+          <h2 class="newsletter-title">Ideas frescas en tu inbox</h2>
+          <p class="newsletter-subtitle">
+            Suscribite y recibí nuestras mejores estrategias de branding, web y marketing digital. 
+            Sin spam, solo contenido de valor.
+          </p>
+        </div>
+        <form class="newsletter-form" id="newsletter-form">
+          <button type="submit" class="btn btn-primary">Tu email profesional</button>
+          <button type="submit" class="btn btn-primary">Suscribirme</button>
+        </form>
       </div>
     </section>
-
-    <!-- Sección 4: Paginación -->
-    <section id="blog-section-4">
-      <nav class="blog-pagination" id="blog-pagination" aria-label="Paginación del blog">
-        <!-- Controles de paginación -->
-      </nav>
-    </section>
-
-    <!-- Sección 5: CTA / Suscripción -->
-    <section id="blog-section-5">
-      <h2>Suscríbete</h2>
-      <p>Contenido pendiente de definir.</p>
-    </section>
   </main>
 
   <div id="footer-container"></div>
 
   <script src="scripts/main.js"></script>
-  <script src="scripts/efecto.js"></script>
+  <script src="scripts/blog.js"></script>
+  <link rel="stylesheet" href="style/blog.css">
 </body>
 </html>
\ No newline at end of file
diff --git a/inicio.html b/inicio.html
index 92d6152..d707fb8 100644
--- a/inicio.html
+++ b/inicio.html
@@ -148,9 +148,9 @@
             Respondé 4 preguntas rápidas y te vamos a recomendar el servicio ideal para el momento en que está tu marca.
           </p>
           <ul class="bienvenida-detalles">
-            <li><span class="detalle-icono">⏱</span> 2 minutos</li>
-            <li><span class="detalle-icono">🎯</span> Recomendación personalizada</li>
-            <li><span class="detalle-icono">💬</span> Sin compromiso</li>
+            <li><span class="detalle-icono"></span><i class="fa-regular fa-alarm-clock"></i> 2 minutos</li>
+            <li><span class="detalle-icono"></span><i class="fa-solid fa-bullseye"></i> Recomendación personalizada</li>
+            <li><span class="detalle-icono"></span><i class="fa-regular fa-comment-dots"></i> Sin compromiso</li>
           </ul>
           <button class="btn btn-primary btn-comenzar" id="btn-comenzar">
             Comenzar diagnóstico
diff --git a/nosotros.html b/nosotros.html
index 4302e31..f073121 100644
--- a/nosotros.html
+++ b/nosotros.html
@@ -5,7 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
   <title>Nosotros | Amor y Roma — Agencia Boutique</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
   <link rel="stylesheet" href="style/main.css">
+  <link rel="stylesheet" href="style/nosotros.css">
 </head>
 <body>
   <div id="menu-container"></div>
@@ -48,36 +50,36 @@
     </section>
 
     <!-- SECCIÓN: QUIÉNES SOMOS / EQUIPO -->
-<section id="nosotros-equipo" class="equipo-section">
-  <div class="section-header">
-    <h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
-    <p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
-  </div>
+    <section id="nosotros-equipo" class="equipo-section">
+      <div class="section-header">
+        <h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
+        <p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
+      </div>
 
-  <div class="equipo-grid">
-    <!-- PATRICIA -->
-    <article class="equipo-card">
-      <div class="equipo-firma">Patricia Pugliese</div>
-      <span class="equipo-rol">Estrategia & Creatividad</span>
-      <p class="equipo-descripcion">
-        Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
+      <div class="equipo-grid">
+        <!-- PATRICIA -->
+        <article class="equipo-card">
+          <div class="equipo-firma">Patricia Pugliese</div>
+          <span class="equipo-rol">Estrategia & Creatividad</span>
+          <p class="equipo-descripcion">
+            Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
+          </p>
+        </article>
+
+        <!-- FRANCISCO -->
+        <article class="equipo-card">
+          <div class="equipo-firma">Francisco Anfuso</div>
+          <span class="equipo-rol">Desarrollo & Tecnología</span>
+          <p class="equipo-descripcion">
+            Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
+          </p>
+        </article>
+      </div>
+
+      <p class="equipo-colaboradores">
+        Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.
       </p>
-    </article>
-
-    <!-- FRANCISCO -->
-    <article class="equipo-card">
-      <div class="equipo-firma">Francisco Anfuso</div>
-      <span class="equipo-rol">Desarrollo & Tecnología</span>
-      <p class="equipo-descripcion">
-        Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
-      </p>
-    </article>
-  </div>
-
-  <p class="equipo-colaboradores">
-    Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.
-  </p>
-</section>
+    </section>
 
     <!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
     <section id="nosotros-principios" class="principios-section">
@@ -105,117 +107,117 @@
     </section>
 
     <!-- SECCIÓN 4: TRANSPARENCIA -->
-<section id="nosotros-transparencia" class="transparencia-section">
-  <div class="section-header">
-    <h2 class="section-title">Transparencia antes de la primera reunión</h2>
-    <p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
-  </div>
-  
-  <div class="transparencia-grid">
-    <!-- Tarjeta 1: INVERSIÓN -->
-    <article class="transparencia-card">
-      <div class="transparencia-icono">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <path d="M12 2v20M2 12h20" stroke-linecap="round"/>
-          <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
-        </svg>
+    <section id="nosotros-transparencia" class="transparencia-section">
+      <div class="section-header">
+        <h2 class="section-title">Transparencia antes de la primera reunión</h2>
+        <p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
       </div>
-      <h3 class="transparencia-titulo">INVERSIÓN</h3>
-      <p class="transparencia-dato">Desde $250.000/mes</p>
-      <p class="transparencia-texto">
-        Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
-      </p>
-    </article>
+      
+      <div class="transparencia-grid">
+        <!-- Tarjeta 1: INVERSIÓN -->
+        <article class="transparencia-card">
+          <div class="transparencia-icono">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M12 2v20M2 12h20" stroke-linecap="round"/>
+              <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <p class="transparencia-titulo">INVERSIÓN</p>
+          <p class="transparencia-dato">Desde $250.000/mes</p>
+          <p class="transparencia-texto">
+            Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
+          </p>
+        </article>
 
-    <!-- Tarjeta 2: TIEMPOS -->
-    <article class="transparencia-card">
-      <div class="transparencia-icono">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
-          <path d="M12 6v6l4 2" stroke-linecap="round"/>
-        </svg>
-      </div>
-      <h3 class="transparencia-titulo">TIEMPOS</h3>
-      <p class="transparencia-dato">15-30 días</p>
-      <p class="transparencia-texto">
-        Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
-      </p>
-    </article>
+        <!-- Tarjeta 2: TIEMPOS -->
+        <article class="transparencia-card">
+          <div class="transparencia-icono">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
+              <path d="M12 6v6l4 2" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <p class="transparencia-titulo">TIEMPOS</p>
+          <p class="transparencia-dato">15-30 días</p>
+          <p class="transparencia-texto">
+            Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
+          </p>
+        </article>
 
-    <!-- Tarjeta 3: CONTRATO -->
-    <article class="transparencia-card">
-      <div class="transparencia-icono">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
-          <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
-        </svg>
+        <!-- Tarjeta 3: CONTRATO -->
+        <article class="transparencia-card">
+          <div class="transparencia-icono">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
+              <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <p class="transparencia-titulo">CONTRATO</p>
+          <p class="transparencia-dato">3 meses · luego mensual</p>
+          <p class="transparencia-texto">
+            Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
+          </p>
+        </article>
       </div>
-      <h3 class="transparencia-titulo">CONTRATO</h3>
-      <p class="transparencia-dato">3 meses · luego mensual</p>
-      <p class="transparencia-texto">
-        Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
-      </p>
-    </article>
-  </div>
-</section>
+    </section>
 
-<!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
-<section id="nosotros-casos" class="casos-section">
-  <div class="section-header">
-    <h2 class="section-title">Matriz de Soluciones</h2>
-    <p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
-  </div>
-  
-  <div class="casos-grid-simetrico">
-    <!-- ARQUETIPO 1 -->
-    <article class="caso-card">
-      <div class="caso-header">
-        <span class="caso-badge">Arquetipo 1</span>
-        <h3 class="caso-titulo">Identidad Integral</h3>
+    <!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
+    <section id="nosotros-casos" class="casos-section">
+      <div class="section-header">
+        <h2 class="section-title">Matriz de Soluciones</h2>
+        <p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
       </div>
-      <p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
-      <div class="caso-leccion">
-        <strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
-      </div>
-    </article>
+      
+      <div class="casos-grid-simetrico">
+        <!-- ARQUETIPO 1 -->
+        <article class="caso-card">
+          <div class="caso-header">
+            <span class="caso-badge">Arquetipo 1</span>
+            <h3 class="caso-titulo">Identidad Integral</h3>
+          </div>
+          <p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
+          <div class="caso-leccion">
+            <strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
+          </div>
+        </article>
 
-    <!-- ARQUETIPO 2 -->
-    <article class="caso-card">
-      <div class="caso-header">
-        <span class="caso-badge">Arquetipo 2</span>
-        <h3 class="caso-titulo">Infraestructura B2B</h3>
-      </div>
-      <p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
-      <div class="caso-leccion">
-        <strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
-      </div>
-    </article>
+        <!-- ARQUETIPO 2 -->
+        <article class="caso-card">
+          <div class="caso-header">
+            <span class="caso-badge">Arquetipo 2</span>
+            <h3 class="caso-titulo">Infraestructura B2B</h3>
+          </div>
+          <p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
+          <div class="caso-leccion">
+            <strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
+          </div>
+        </article>
 
-    <!-- ARQUETIPO 3 (INSÍGNIA) -->
-    <article class="caso-card caso-insignia">
-      <div class="caso-header">
-        <span class="caso-badge caso-badge-insignia">Arquetipo 3 (Insígnia)</span>
-        <h3 class="caso-titulo">Ecosistema Digital Completo</h3>
-      </div>
-      <p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
-      <div class="caso-leccion caso-leccion-insignia">
-        <strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
-      </div>
-    </article>
+        <!-- ARQUETIPO 3 (INSÍGNIA) -->
+        <article class="caso-card caso-insignia">
+          <div class="caso-header">
+            <span class="caso-badge caso-badge-insignia">Arquetipo 3 (Insígnia)</span>
+            <h3 class="caso-titulo">Ecosistema Digital Completo</h3>
+          </div>
+          <p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
+          <div class="caso-leccion caso-leccion-insignia">
+            <strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
+          </div>
+        </article>
 
-    <!-- ARQUETIPO 4 -->
-    <article class="caso-card">
-      <div class="caso-header">
-        <span class="caso-badge">Arquetipo 4</span>
-        <h3 class="caso-titulo">Profesionalización de Servicios</h3>
+        <!-- ARQUETIPO 4 -->
+        <article class="caso-card">
+          <div class="caso-header">
+            <span class="caso-badge">Arquetipo 4</span>
+            <h3 class="caso-titulo">Profesionalización de Servicios</h3>
+          </div>
+          <p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
+          <div class="caso-leccion">
+            <strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
+          </div>
+        </article>
       </div>
-      <p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
-      <div class="caso-leccion">
-        <strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
-      </div>
-    </article>
-  </div>
-</section>
+    </section>
 
     <!-- SECCIÓN 6: CTA FINAL -->
     <section class="cta-section">
@@ -233,7 +235,5 @@
   <div id="footer-container"></div>
 
   <script src="scripts/main.js"></script>
-  <script src="scripts/efecto.js"></script>
-  <link rel="stylesheet" href="style/nosotros.css">
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts/blog.js b/scripts/blog.js
index e69de29..f3cab05 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -0,0 +1,185 @@
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Blog JS cargado');
+  
+  const searchInput = document.getElementById('blog-search');
+  const searchClear = document.getElementById('search-clear');
+  const blogGrid = document.getElementById('blog-grid');
+  const emptyState = document.getElementById('empty-state');
+  const resultsCount = document.getElementById('results-count');
+  const filtersHeader = document.getElementById('blog-filters-header');
+  
+  if (!searchInput || !blogGrid) {
+    console.error('Faltan elementos del DOM');
+    return;
+  }
+
+  let currentFilters = {
+    search: '',
+    category: 'all',
+    featured: 'all',
+    sort: 'recent'
+  };
+
+  // ===== EFECTO SCROLL EN FILTROS =====
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 100) {
+      filtersHeader.classList.add('is-scrolled');
+    } else {
+      filtersHeader.classList.remove('is-scrolled');
+    }
+  });
+
+  // ===== BUSCADOR =====
+  searchInput.addEventListener('input', (e) => {
+    const value = e.target.value.trim();
+    currentFilters.search = value;
+    
+    if (searchClear) {
+      searchClear.classList.toggle('visible', value.length > 0);
+    }
+    
+    filterArticles();
+  });
+
+  if (searchClear) {
+    searchClear.addEventListener('click', () => {
+      searchInput.value = '';
+      searchClear.classList.remove('visible');
+      currentFilters.search = '';
+      filterArticles();
+      searchInput.focus();
+    });
+  }
+
+  // ===== FILTROS PRINCIPALES =====
+  document.querySelectorAll('.filter-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentFilters.featured = btn.dataset.filter;
+      filterArticles();
+    });
+  });
+
+  // ===== CATEGORÍAS =====
+  document.querySelectorAll('.category-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentFilters.category = btn.dataset.category;
+      filterArticles();
+    });
+  });
+
+  // ===== ORDENAMIENTO =====
+  const sortSelect = document.getElementById('sort-select');
+  if (sortSelect) {
+    sortSelect.addEventListener('change', (e) => {
+      currentFilters.sort = e.target.value;
+      sortArticles();
+    });
+  }
+
+  // ===== RESET =====
+  const resetFilters = document.getElementById('reset-filters');
+  if (resetFilters) {
+    resetFilters.addEventListener('click', () => {
+      currentFilters = { search: '', category: 'all', featured: 'all', sort: 'recent' };
+      searchInput.value = '';
+      searchClear?.classList.remove('visible');
+      
+      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+      document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
+      
+      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+      document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
+      
+      if (sortSelect) sortSelect.value = 'recent';
+      
+      filterArticles();
+    });
+  }
+
+  // ===== FUNCIÓN DE FILTRADO =====
+  const filterArticles = () => {
+    const articles = document.querySelectorAll('.blog-card, .featured-card');
+    let visibleCount = 0;
+
+    articles.forEach(article => {
+      const categories = article.dataset.categories || '';
+      const tags = article.dataset.tags || '';
+      const isFeatured = article.dataset.featured === 'true';
+      
+      const title = article.querySelector('.card-title, .featured-title')?.textContent.toLowerCase() || '';
+      const excerpt = article.querySelector('.card-excerpt, .featured-excerpt')?.textContent.toLowerCase() || '';
+      
+      const searchTerm = currentFilters.search.toLowerCase();
+      const matchSearch = searchTerm === '' || 
+        title.includes(searchTerm) || 
+        excerpt.includes(searchTerm) ||
+        categories.toLowerCase().includes(searchTerm) ||
+        tags.toLowerCase().includes(searchTerm);
+      
+      const matchCategory = currentFilters.category === 'all' || 
+        categories.toLowerCase().includes(currentFilters.category.toLowerCase());
+      
+      let matchFeatured = true;
+      if (currentFilters.featured === 'destacados') {
+        matchFeatured = isFeatured;
+      }
+      
+      if (matchSearch && matchCategory && matchFeatured) {
+        article.style.display = '';
+        visibleCount++;
+      } else {
+        article.style.display = 'none';
+      }
+    });
+
+    sortArticles();
+    updateResultsCount(visibleCount);
+    
+    if (emptyState) {
+      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
+    }
+  };
+
+  const sortArticles = () => {
+    const articles = Array.from(document.querySelectorAll('.blog-card'));
+    const container = blogGrid;
+    
+    switch(currentFilters.sort) {
+      case 'recent':
+        articles.sort((a, b) => {
+          const dateA = new Date(a.querySelector('time')?.datetime || 0);
+          const dateB = new Date(b.querySelector('time')?.datetime || 0);
+          return dateB - dateA;
+        });
+        break;
+      case 'alphabetical':
+        articles.sort((a, b) => {
+          const titleA = a.querySelector('.card-title')?.textContent || '';
+          const titleB = b.querySelector('.card-title')?.textContent || '';
+          return titleA.localeCompare(titleB);
+        });
+        break;
+    }
+    
+    articles.forEach(article => container.appendChild(article));
+  };
+
+  const updateResultsCount = (count) => {
+    if (!resultsCount) return;
+    
+    if (count === 0) {
+      resultsCount.innerHTML = 'No se encontraron artículos';
+    } else if (currentFilters.category === 'all' && currentFilters.search === '') {
+      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículos`;
+    } else {
+      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículo${count !== 1 ? 's' : ''}`;
+    }
+  };
+
+  // Inicializar
+  filterArticles();
+});
\ No newline at end of file
diff --git a/style/blog.css b/style/blog.css
index e69de29..5a0ee74 100644
--- a/style/blog.css
+++ b/style/blog.css
@@ -0,0 +1,962 @@
+/* ============================================
+   HERO COMPACTO DEL BLOG
+   ============================================ */
+.blog-hero-compact {
+  padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md) var(--spacing-lg);
+  background-color: var(--bg-base);
+  text-align: center;
+  position: relative;
+}
+
+.hero-compact-content {
+  max-width: 700px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.blog-hero-compact .badge-filosofia {
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  background-color: var(--badge-bg);
+  color: var(--badge-text);
+  font-family: var(--font-small);
+  font-weight: 600;
+  font-size: 0.85rem;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  opacity: 0;
+  animation: fadeInUp 0.9s ease-out 0s forwards;
+}
+
+.blog-hero-compact .hero-compact-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-weight: 700;
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  line-height: 1.1;
+  color: var(--text-primary);
+  opacity: 0;
+  animation: fadeInUp 0.9s ease-out 0.2s forwards;
+}
+
+.blog-hero-compact .hero-compact-subtitle {
+  font-family: var(--font-body);
+  font-size: clamp(1rem, 2vw, 1.15rem);
+  color: var(--text-muted);
+  line-height: 1.6;
+  max-width: 600px;
+  opacity: 0;
+  animation: fadeInUp 0.9s ease-out 0.4s forwards;
+}
+
+/* ============================================
+   SECCIÓN FILTROS Y BUSCADOR (INTEGRADOS, NO STICKY)
+   ============================================ */
+.blog-filters-section {
+  padding: var(--spacing-md) var(--spacing-md);
+  background-color: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+  position: relative; /* Sin sticky, fluye normal */
+  z-index: 1;
+}
+
+.filters-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+/* Fila superior: Buscador + Filtros principales */
+.filters-top-row {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Buscador con forma redondeada (pill) */
+.search-wrapper-compact {
+  flex: 1;
+  min-width: 280px;
+  max-width: 480px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-base);
+  border: 1.5px solid var(--border);
+  border-radius: 999px; /* Forma redondeada como los botones */
+  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
+  transition: all 0.3s ease;
+}
+
+.search-wrapper-compact:focus-within {
+  border-color: var(--brand-crimson);
+  box-shadow: 0 0 0 3px rgba(186, 18, 77, 0.1);
+  background-color: var(--bg-surface);
+}
+
+.search-wrapper-compact .search-icon {
+  color: var(--text-muted);
+  margin-right: 0.6rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.search-wrapper-compact input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  padding: 0.4rem 0;
+  outline: none;
+  min-width: 0;
+}
+
+.search-wrapper-compact input::placeholder {
+  color: var(--text-muted);
+}
+
+.search-clear {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.4rem;
+  display: none;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.search-clear:hover {
+  background-color: var(--bg-surface-elevated);
+  color: var(--brand-crimson);
+}
+
+.search-clear.visible {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Filtros principales (Todos / Destacados) */
+.filter-group-compact {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.filter-btn {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  border: 1.5px solid var(--border);
+  border-radius: 999px;
+  background-color: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.25s ease;
+  white-space: nowrap;
+}
+
+.filter-btn:hover {
+  border-color: var(--brand-crimson);
+  color: var(--brand-crimson);
+}
+
+.filter-btn.active {
+  background-color: var(--brand-crimson);
+  border-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+}
+
+/* Fila inferior: Categorías + Ordenamiento */
+.filters-bottom-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  padding-top: var(--spacing-xs);
+  border-top: 1px solid var(--border);
+}
+
+.filter-categories-compact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  flex: 1;
+}
+
+.category-btn {
+  font-family: var(--font-small);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.4rem 0.85rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background-color: var(--bg-base);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.category-btn:hover {
+  border-color: var(--brand-teal);
+  color: var(--brand-teal);
+}
+
+.category-btn.active {
+  background-color: var(--brand-teal);
+  border-color: var(--brand-teal);
+  color: var(--text-on-accent);
+}
+
+.filter-secondary-compact {
+  flex-shrink: 0;
+}
+
+.sort-select-compact {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  padding: 0.45rem 2rem 0.45rem 0.9rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23170c1d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  transition: all 0.2s ease;
+}
+
+.sort-select-compact:hover {
+  border-color: var(--brand-teal);
+}
+
+/* Info de resultados */
+.results-info-compact {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  padding-top: var(--spacing-xs);
+}
+
+.reset-filters-compact {
+  background: none;
+  border: none;
+  color: var(--brand-crimson);
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.reset-filters-compact:hover {
+  background-color: rgba(186, 18, 77, 0.1);
+}
+
+/* ============================================
+   TAGS CON MEJOR CONTRASTE (UNIFICADO)
+   ============================================ */
+.category-tag {
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.35rem 0.85rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border: 1.5px solid transparent;
+  transition: all 0.2s ease;
+}
+
+/* Branding */
+.category-tag.branding {
+  background-color: var(--brand-crimson);
+  color: #ffffff;
+  border-color: var(--brand-crimson);
+}
+[data-theme="dark"] .category-tag.branding {
+  background-color: rgba(186, 18, 77, 0.95);
+  color: #ffffff;
+  border-color: rgba(186, 18, 77, 1);
+}
+
+/* Web */
+.category-tag.web {
+  background-color: var(--brand-teal);
+  color: #ffffff;
+  border-color: var(--brand-teal);
+}
+[data-theme="dark"] .category-tag.web {
+  background-color: rgba(0, 63, 82, 0.95);
+  color: #ffffff;
+  border-color: rgba(0, 63, 82, 1);
+}
+
+/* Automatizaciones */
+.category-tag.automatizaciones {
+  background-color: var(--brand-plum);
+  color: #ffffff;
+  border-color: var(--brand-plum);
+}
+[data-theme="dark"] .category-tag.automatizaciones {
+  background-color: rgba(23, 12, 29, 0.95);
+  color: var(--brand-sage-light);
+  border-color: rgba(23, 12, 29, 1);
+}
+
+/* Redes */
+.category-tag.redes {
+  background-color: #00a88c;
+  color: #ffffff;
+  border-color: #00a88c;
+}
+[data-theme="dark"] .category-tag.redes {
+  background-color: rgba(5, 104, 87, 0.95);
+  color: #ffffff;
+  border-color: rgba(0, 168, 140, 1);
+}
+
+/* Paid Media */
+.category-tag.paid {
+  background-color: #6b4c9a;
+  color: #ffffff;
+  border-color: #6b4c9a;
+}
+[data-theme="dark"] .category-tag.paid {
+  background-color: rgba(107, 76, 154, 0.95);
+  color: #ffffff;
+  border-color: rgba(107, 76, 154, 1);
+}
+
+/* Estrategia */
+.category-tag.estrategia {
+  background-color: #d97706;
+  color: #ffffff;
+  border-color: #d97706;
+}
+[data-theme="dark"] .category-tag.estrategia {
+  background-color: rgba(217, 119, 6, 0.95);
+  color: #ffffff;
+  border-color: rgba(217, 119, 6, 1);
+}
+
+/* Casos */
+.category-tag.casos {
+  background-color: #475569;
+  color: #ffffff;
+  border-color: #475569;
+}
+[data-theme="dark"] .category-tag.casos {
+  background-color: rgba(71, 85, 105, 0.95);
+  color: #ffffff;
+  border-color: rgba(71, 85, 105, 1);
+}
+
+.category-tag:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* ============================================
+   ARTÍCULOS DESTACADOS (VERSIÓN SIMÉTRICA)
+   ============================================ */
+.featured-posts {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+  position: relative;
+}
+
+.featured-posts .section-header {
+  max-width: 1400px;
+  margin: 0 auto var(--spacing-lg);
+  text-align: left;
+  padding-left: var(--spacing-sm);
+  position: relative;
+}
+
+.featured-posts .section-header::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 60px;
+  background: linear-gradient(180deg, var(--brand-crimson) 0%, var(--brand-teal) 100%);
+  border-radius: 2px;
+}
+
+.featured-posts .section-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+  line-height: 1.2;
+  padding-left: var(--spacing-md);
+}
+
+.featured-posts .section-subtitle {
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  padding-left: var(--spacing-md);
+  max-width: 600px;
+}
+
+.featured-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.featured-card {
+  background-color: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 20px;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+}
+
+/* Glow sutil para destacar en hover */
+.featured-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 20px;
+  padding: 2px;
+  background: linear-gradient(135deg, 
+    rgba(186, 18, 77, 0.3) 0%, 
+    rgba(0, 63, 82, 0.3) 50%, 
+    rgba(186, 18, 77, 0.3) 100%
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+.featured-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
+}
+
+.featured-card:hover::before {
+  opacity: 1;
+}
+
+.featured-badge {
+  position: absolute;
+  top: var(--spacing-sm);
+  left: var(--spacing-sm);
+  background-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+  font-family: var(--font-small);
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.35rem 0.8rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(186, 18, 77, 0.3);
+}
+
+.featured-image {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 16/10;
+  flex-shrink: 0;
+}
+
+.featured-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.featured-card:hover .featured-image img {
+  transform: scale(1.05);
+}
+
+.featured-content {
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex: 1;
+}
+
+.featured-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-xs);
+}
+
+.featured-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.3rem;
+  color: var(--text-primary);
+  line-height: 1.3;
+  margin-bottom: var(--spacing-xs);
+}
+
+.featured-excerpt {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  flex: 1;
+}
+
+.featured-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--spacing-sm);
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--border);
+}
+
+.reading-time {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.btn-read {
+  font-family: var(--font-small);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--brand-crimson);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.btn-read:hover {
+  transform: translateX(4px);
+  color: var(--brand-teal);
+}
+
+/* ============================================
+   GRID DE ARTÍCULOS
+   ============================================ */
+.blog-grid-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-surface);
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.blog-card {
+  background-color: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.12);
+  border-color: var(--brand-teal);
+}
+
+.card-image {
+  position: relative;
+  aspect-ratio: 16/10;
+  overflow: hidden;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.blog-card:hover .card-image img {
+  transform: scale(1.08);
+}
+
+.card-category {
+  position: absolute;
+  top: var(--spacing-sm);
+  left: var(--spacing-sm);
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.3rem 0.8rem;
+  border-radius: 999px;
+  background-color: var(--bg-surface);
+  color: var(--brand-crimson);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.card-content {
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex: 1;
+}
+
+.card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.reading-time-mini {
+  font-weight: 600;
+}
+
+.card-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.2rem;
+  color: var(--text-primary);
+  line-height: 1.3;
+  margin-bottom: var(--spacing-xs);
+}
+
+.card-excerpt {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  flex: 1;
+}
+
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: var(--spacing-xs);
+}
+
+.tag {
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.7rem;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-secondary);
+}
+
+.card-link {
+  font-family: var(--font-small);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--brand-crimson);
+  text-decoration: none;
+  margin-top: var(--spacing-xs);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all 0.2s ease;
+}
+
+.card-link:hover {
+  color: var(--brand-teal);
+  gap: 0.6rem;
+}
+
+/* Estado vacío */
+.empty-state {
+  text-align: center;
+  padding: var(--spacing-lg) var(--spacing-md);
+  grid-column: 1 / -1;
+  display: none;
+}
+
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: var(--spacing-sm);
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.5rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.empty-state p {
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-md);
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.load-more-container {
+  text-align: center;
+  margin-top: var(--spacing-lg);
+}
+
+/* ============================================
+   NEWSLETTER
+   ============================================ */
+.newsletter-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.newsletter-card {
+  max-width: 900px;
+  margin: 0 auto;
+  background-color: var(--brand-teal);
+  border-radius: 24px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: var(--spacing-lg);
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.newsletter-card::before {
+  content: "";
+  position: absolute;
+  top: -100px;
+  right: -100px;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%);
+  opacity: 0.3;
+  filter: blur(60px);
+}
+
+.newsletter-content {
+  position: relative;
+  z-index: 1;
+}
+
+.newsletter-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  color: #ffffff;
+  margin-bottom: var(--spacing-xs);
+}
+
+.newsletter-subtitle {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+}
+
+.newsletter-form {
+  display: flex;
+  gap: var(--spacing-sm);
+  position: relative;
+  z-index: 1;
+}
+
+.newsletter-form input {
+  flex: 1;
+  padding: 0.85rem 1.2rem;
+  border: none;
+  border-radius: 999px;
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  background-color: rgba(255, 255, 255, 0.95);
+  color: var(--text-primary);
+}
+
+.newsletter-form input::placeholder {
+  color: var(--text-muted);
+}
+
+.newsletter-form .btn {
+  white-space: nowrap;
+  background-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+  border: 1.5px solid var(--brand-crimson);
+}
+
+.newsletter-form .btn:hover {
+  background-color: #ffffff;
+  color: var(--brand-teal);
+  border-color: #ffffff;
+}
+
+/* ============================================
+   RESPONSIVE BLOG
+   ============================================ */
+@media (max-width: 1024px) {
+  .blog-grid,
+  .featured-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .featured-card {
+    min-height: 420px;
+  }
+}
+
+@media (max-width: 768px) {
+  .blog-hero-compact {
+    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
+  }
+
+  .blog-filters-section {
+    padding: var(--spacing-sm);
+  }
+
+  .filters-top-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-wrapper-compact {
+    max-width: 100%;
+    min-width: 100%;
+  }
+
+  .filter-group-compact {
+    justify-content: center;
+  }
+
+  .filters-bottom-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-categories-compact {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding-bottom: 4px;
+  }
+
+  .filter-categories-compact::-webkit-scrollbar {
+    display: none;
+  }
+
+  .category-btn {
+    flex-shrink: 0;
+  }
+
+  .filter-secondary-compact {
+    align-self: flex-end;
+  }
+
+  .blog-grid,
+  .featured-grid {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+  
+  .featured-card {
+    min-height: auto;
+  }
+
+  .newsletter-card {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  
+  .newsletter-form {
+    flex-direction: column;
+  }
+  
+  .newsletter-form .btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .blog-hero-compact .hero-compact-title {
+    font-size: 2rem;
+  }
+
+  .search-wrapper-compact {
+    padding: 0.4rem 0.4rem 0.4rem 1rem;
+  }
+  
+  .search-wrapper-compact input {
+    font-size: 0.9rem;
+  }
+
+  .filter-btn {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.8rem;
+  }
+  
+  .featured-title,
+  .card-title {
+    font-size: 1.2rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .blog-card,
+  .featured-card,
+  .filter-btn,
+  .category-btn,
+  .search-wrapper-compact,
+  .category-tag {
+    transition: none;
+  }
+}
\ No newline at end of file
diff --git a/style/main.css b/style/main.css
index efc4b76..655451d 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,7 +1,15 @@
 /* ============================================
    FUENTES DE MARCA
    ============================================ */
-@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=WindSong&display=swap');
+
+@font-face {
+  font-family: 'Kaleagnetta';
+  src: url(../assets/fonts/Kaleagnetta.woff2);
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 /* ============================================
    VARIABLES DE TEMA (modo claro por defecto)
@@ -47,6 +55,7 @@
   --font-body: 'Raleway', sans-serif;
   --font-small: 'Jost', sans-serif;
   --font-signature: 'Windsong', cursive;
+  --font-signature2: 'Kaleagnetta', cursive;
 
   --font-family-base: var(--font-body);
   --font-size-base: 16px;
@@ -65,6 +74,8 @@
   --bg-surface: #170c1d;
   --bg-surface-elevated: #221728;
   --bg-icon-contrast: var(--brand-sage-light);
+  --brand-teal-contraste: #116c88;
+  --brand-crimson-contraste: #d81a5c;
 
   --text-primary: var(--brand-sage-light);
   --text-secondary: var(--brand-rose-muted);
@@ -833,9 +844,9 @@ PANTALLA DE BIENVENIDA
 .bienvenida-icono {
   width: 80px;
   height: 80px;
-  border-radius: 50%;
+  /*border-radius: 50%;
   background-color: var(--bg-surface-elevated);
-  border: 2px solid var(--border);
+  border: 2px solid var(--border);*/
   display: flex;
   align-items: center;
   justify-content: center;
@@ -843,8 +854,8 @@ PANTALLA DE BIENVENIDA
 }
 
 .icono-diagnostico {
-  width: 40px;
-  height: 40px;
+  width: 70px;
+  height: 70px;
   display: block;
   background-color: var(--btn-primary-bg);
   -webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
diff --git a/style/nosotros.css b/style/nosotros.css
index 00732c1..49a612a 100644
--- a/style/nosotros.css
+++ b/style/nosotros.css
@@ -1,107 +1,3 @@
-/* ============================================
-   FUENTES DE MARCA
-   ============================================ */
-@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
-
-/* ============================================
-   VARIABLES DE TEMA (modo claro por defecto)
-   ============================================ */
-:root {
-  --brand-plum: #170c1d;
-  --brand-crimson: #ba124d;
-  --brand-teal: #003f52;
-  --brand-sage-light: #eaf0ee;
-  --brand-rose-muted: #dfbdb9;
-  --bg-dark-web: #110916;
-  --brand-teal-contraste: var(--brand-teal);
-  --brand-crimson-contraste: var(--brand-crimson);
-
-  --bg-base: var(--brand-sage-light);
-  --bg-surface: #ffffff;
-  --bg-surface-elevated: #f5f9f8;
-  --bg-icon-contrast: var(--brand-teal);
-
-  --text-primary: var(--brand-plum);
-  --text-secondary: var(--brand-teal);
-  --text-muted: rgba(34, 23, 40, 0.65);
-  --text-on-accent: #ffffff;
-
-  --btn-primary-bg: var(--brand-crimson);
-  --btn-primary-hover: #9c0f40;
-  --btn-secondary-bg: var(--brand-teal);
-  --btn-secondary-hover: #002c3a;
-
-  --badge-bg: var(--brand-rose-muted);
-  --badge-text: var(--brand-plum);
-
-  --border: rgba(0, 63, 82, 0.12);
-  --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08);
-  --glow-animation: rgba(186, 18, 77, 0.25);
-  --bg-contraste-teal: rgba(0,63,82, 1);
-
-  --font-title: 'Literata', serif;
-  --font-subtitle: 'Literata', serif;
-  --font-body: 'Raleway', sans-serif;
-  --font-small: 'Jost', sans-serif;
-  --font-signature: 'Windsong', cursive;
-
-  --font-family-base: var(--font-body);
-  --font-size-base: 16px;
-
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 2rem;
-  --spacing-lg: 4rem;
-  --header-height: 72px;
-}
-
-[data-theme="dark"] {
-  --bg-base: var(--bg-dark-web);
-  --bg-surface: #170c1d;
-  --bg-surface-elevated: #221728;
-  --bg-icon-contrast: var(--brand-sage-light);
-  --text-primary: var(--brand-sage-light);
-  --text-secondary: var(--brand-rose-muted);
-  --text-muted: rgba(234, 240, 238, 0.65);
-  --text-on-accent: #ffffff;
-  --btn-primary-bg: var(--brand-crimson);
-  --btn-primary-hover: #d81a5c;
-  --btn-secondary-bg: #0b5066;
-  --btn-secondary-hover: #10637d;
-  --badge-bg: rgba(223, 189, 185, 0.18);
-  --badge-text: var(--brand-rose-muted);
-  --border: rgba(234, 240, 238, 0.12);
-  --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
-  --glow-animation: rgba(186, 18, 77, 0.45);
-  --bg-contraste-teal: rgba(0,63,82, 0.5);
-}
-
-/* ============================================
-   RESET BÁSICO
-   ============================================ */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { font-size: var(--font-size-base); scroll-behavior: smooth; }
-body {
-  font-family: var(--font-family-base);
-  background-color: var(--bg-base);
-  color: var(--text-primary);
-  line-height: 1.5;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; }
-h4, h5, h6 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; }
-small { font-family: var(--font-small); }
-button, .btn, [class*="btn-"] { font-family: var(--font-small); }
-.signature, .firma { font-family: var(--font-signature); font-weight: 400; }
-body.menu-open { overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
-main { flex: 1; }
-img, video { max-width: 100%; display: block; }
-a { color: inherit; text-decoration: none; }
-ul { list-style: none; }
-
 /* ============================================
    HEADER, MENÚ Y FOOTER (Base)
    ============================================ */
@@ -344,6 +240,7 @@ ul { list-style: none; }
 }
 
 .caso-card {
+  position: relative;
   background-color: var(--bg-surface);
   border: 1.5px solid var(--border);
   border-radius: 16px;
@@ -351,9 +248,12 @@ ul { list-style: none; }
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   min-height: 320px;
-  position: relative;
+  overflow: hidden;                 /* recorta la barra en las esquinas */
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 0.3s ease;
+  will-change: transform;           /* opcional, para suavizar en hover */
 }
 
 .caso-card::before {
@@ -361,12 +261,18 @@ ul { list-style: none; }
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson));
-  border-radius: 16px 16px 0 0;
   opacity: 0;
   transition: opacity 0.3s ease;
+  pointer-events: none;             /* no interfiere con el hover */
+  z-index: 0;
+}
+
+.caso-card > * {
+  position: relative;
+  z-index: 1;                       /* contenido por encima de la barra */
 }
 
 .caso-card:hover {
@@ -614,7 +520,7 @@ ul { list-style: none; }
 .transparencia-titulo {
   font-family: var(--font-body);
   font-size: 0.85rem;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 2px;
   color: var(--text-muted);
   margin-bottom: var(--spacing-sm);
@@ -625,7 +531,7 @@ ul { list-style: none; }
   font-style: italic;
   font-size: clamp(1.5rem, 3vw, 1rem);
   font-weight: 500;
-  color: var(--brand-teal);
+  color: var(--brand-teal-contraste);
   margin-bottom: var(--spacing-sm);
   line-height: 1.2;
 }
@@ -736,7 +642,7 @@ ul { list-style: none; }
 
 /* Firma / Nombre en tipografía script */
 .equipo-firma {
-  font-family: var(--font-signature);
+  font-family: var(--font-signature2);
   font-weight: 400;
   font-size: clamp(2.2rem, 4vw, 3rem);
   color: var(--text-primary);
diff --git a/style/planes.css b/style/planes.css
index 7d197de..f4a6578 100644
--- a/style/planes.css
+++ b/style/planes.css
@@ -70,7 +70,7 @@
    PLANES - SELECTOR (TABS + PILLS)
    ============================================ */
 .planes-selector-section {
-  padding: var(--spacing-md) var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-xs);
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
@@ -188,7 +188,7 @@
   display: none;
   background-color: var(--bg-surface);
   border-radius: 16px;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm);
   box-shadow: var(--shadow);
   border: 1px solid var(--border);
   animation: slideInPanel 0.5s ease-out;
@@ -212,7 +212,7 @@
 /* Header del panel */
 .panel-header {
   margin-bottom: var(--spacing-sm);
-  padding-bottom: var(--spacing-sm);
+  padding-bottom: var(--spacing-xs);
   border-bottom: 1px solid var(--border);
   text-align: center;
 }
@@ -255,7 +255,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
 }
 
 .dimension-card {
@@ -331,7 +331,7 @@
 }
 
 .dimension-lista .fa-check {
-  color: var(--brand-teal);
+  color: var(--btn-secondary-hover);
 }
 
 .dimension-lista .fa-times {
@@ -384,7 +384,7 @@
 }
 
 .precio-monto {
-  font-size: 2rem;
+  font-size: 1.5rem;
   font-weight: 700;
   font-family: var(--font-title);
 }
diff --git a/style/servicios.css b/style/servicios.css
index c5883c4..455627f 100644
--- a/style/servicios.css
+++ b/style/servicios.css
@@ -194,9 +194,9 @@
    SERVICIOS - PANEL DE CONTENIDO
    ============================================ */
 .servicios-panel-section {
-  padding: var(--spacing-lg) var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-xs);
   background-color: var(--bg-base);
-  min-height: 600px;
+  min-height: 400px;
 }
 
 .servicios-panel-container {
@@ -209,7 +209,7 @@
   display: none;
   background-color: var(--bg-surface);
   border-radius: 20px;
-  padding: var(--spacing-lg);
+  padding: var(--spacing-md);
   box-shadow: var(--shadow);
   border: 1px solid var(--border);
   animation: slideInPanel 0.5s ease-out;
@@ -232,8 +232,8 @@
 /* icono */
 .panel-icono-decorativo {
   position: absolute;
-  top: var(--spacing-lg);
-  right: var(--spacing-lg);
+  top: var(--spacing-md);
+  right: var(--spacing-md);
   width: 160px;
   height: 160px;
   display: flex;
@@ -303,7 +303,7 @@
 /* Header del panel */
 .panel-header {
   margin-bottom: var(--spacing-md);
-  padding-bottom: var(--spacing-md);
+  padding-bottom: var(--spacing-xs);
   border-bottom: 1px solid var(--border);
 }
 
@@ -318,14 +318,14 @@
   background-color: var(--bg-contraste-teal);
   color: var(--text-on-accent);
   border-radius: 999px;
-  margin-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-xs);
 }
 
 .panel-titulo {
   font-size: clamp(1.8rem, 3.5vw, 2.5rem);
   color: var(--text-primary);
-  margin-bottom: var(--spacing-xs);
-  line-height: 1.2;
+  margin-bottom: var(--spacing-md);
+  line-height: 1;
   opacity: 0;
   animation: fadeInUp 0.6s ease-out 0.1s forwards;
 }
@@ -334,7 +334,7 @@
   font-size: 1.1rem;
   color: var(--text-muted);
   max-width: 700px;
-  line-height: 1.6;
+  line-height: 1.4;
   opacity: 0;
   animation: fadeInUp 0.6s ease-out 0.2s forwards;
 }
@@ -343,8 +343,8 @@
 .panel-body {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
-  margin-bottom: var(--spacing-md);
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
 }
 
 .panel-columna {
@@ -400,10 +400,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: var(--spacing-md);
+  padding-top: var(--spacing-xs);
   border-top: 1px solid var(--border);
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-xs);
   opacity: 0;
   animation: fadeInUp 0.6s ease-out 0.5s forwards;
 }