nosotros + blog en curso

estructura de nosotros y contacto
2026-09-20 11:18:14 -03:00 · 2026-09-20 08:28:34 -03:00
18 changed files with 5588 additions and 1994 deletions
@@ -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>
+<!-- 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">
-
-        <label for="filter-date-to">Hasta:</label>
-        <input type="date" id="filter-date-to">
-
-        <button type="button" id="btn-apply-filters">Aplicar filtros</button>
-        <button type="button" id="btn-clear-filters">Limpiar</button>
+    <!-- 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>

-    <!-- 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 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>
+
+  <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: 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>
+    <!-- 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 5: CTA / Suscripción -->
-    <section id="blog-section-5">
-      <h2>Suscríbete</h2>
-      <p>Contenido pendiente de definir.</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>
  </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>
@@ -3,62 +3,245 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="">
-  <title>Contacto - [Nombre de la agencia]</title>
+  <meta name="description" content="Contactá a Amor y Roma. Contanos sobre tu proyecto y coordinemos un diagnóstico estratégico sin compromiso.">
+  <title>Contacto | Amor y Roma — Agencia Boutique</title>
  <link rel="stylesheet" href="style/main.css">
 </head>
 <body>
  <div id="menu-container"></div>

  <main>
-    <!-- Sección 1: Encabezado -->
-    <section id="contacto-section-1">
-      <h2>Contacto</h2>
-      <p>Contenido pendiente de definir.</p>
-    </section>
-
-    <!-- Sección 2: Formulario de contacto -->
-    <section id="contacto-section-2">
-      <h3>Escríbenos</h3>
-      <form class="contact-form" id="contact-form" novalidate>
-        <label for="contact-name">Nombre</label>
-        <input type="text" id="contact-name" name="name" required>
-
-        <label for="contact-email">Email</label>
-        <input type="email" id="contact-email" name="email" required>
-
-        <label for="contact-phone">Teléfono (opcional)</label>
-        <input type="tel" id="contact-phone" name="phone">
-
-        <label for="contact-subject">Asunto</label>
-        <input type="text" id="contact-subject" name="subject" required>
-
-        <label for="contact-message">Mensaje</label>
-        <textarea id="contact-message" name="message" rows="5" required></textarea>
-
-        <button type="submit">Enviar mensaje</button>
-      </form>
-    </section>
-
-    <!-- Sección 3: Redes sociales -->
-    <section id="contacto-section-3">
-      <h3>Síguenos</h3>
-      <ul class="contact-social">
-        <li><a href="#" target="_blank" rel="noopener">[Red 1]</a></li>
-        <li><a href="#" target="_blank" rel="noopener">[Red 2]</a></li>
-        <li><a href="#" target="_blank" rel="noopener">[Red 3]</a></li>
-      </ul>
-    </section>
-
-    <!-- Sección 4: WhatsApp directo -->
-    <section id="contacto-section-4">
-      <h3>¿Prefieres WhatsApp?</h3>
-      <a class="whatsapp-link"
-         href="https://wa.me/[NUMERO]?text=[MENSAJE_PREDEFINIDO]"
-         target="_blank"
-         rel="noopener">
-        Escríbenos por WhatsApp
+    <!-- SECCIÓN 1: HERO DE CONTACTO -->
+    <section class="hero-section contacto-hero">
+      <div class="hero-content">
+        <span class="badge-filosofia"></span>
+        <h1 class="hero-title">Hablemos de tu proyecto</h1>
+        <p class="hero-subtitle">
+          Contanos dónde estás parado y hacia dónde querés ir. <br>
+          Te respondemos en menos de 48 horas hábiles con una lectura inicial.
+        </p>
+        <div class="hero-cta-group">
+          <a href="#formulario-contacto" class="btn btn-primary">Completar formulario</a>
+          <a href="https://wa.me/543886118304" target="_blank" rel="noopener" class="btn btn-secondary">
+            <span class="icono-whatsapp-btn"></span> Escribinos por WhatsApp
          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- SECCIÓN 2: INFO + FORMULARIO -->
+    <section id="formulario-contacto" class="contacto-grid-section">
+      <div class="contacto-grid">
+        
+        <!-- COLUMNA IZQUIERDA: Información directa -->
+        <aside class="contacto-info">
+          <h2 class="contacto-info-titulo">Canales directos</h2>
+          <p class="contacto-info-texto">
+            Si preferís un contacto más inmediato, elegí el canal que mejor se adapte a tu consulta.
+          </p>
+
+          <ul class="contacto-canales">
+            <li class="canal-item">
+              <span class="canal-icono canal-email"></span>
+              <div class="canal-contenido">
+                <strong>Email</strong>
+                <a href="mailto:contacto@amoryroma.com">hola@amoryroma.com</a>
+              </div>
+            </li>
+            <li class="canal-item">
+              <span class="canal-icono canal-whatsapp"></span>
+              <div class="canal-contenido">
+                <strong>WhatsApp</strong>
+                <a href="https://wa.me/543886118304" target="_blank" rel="noopener">+54 9 11 0000-0000</a>
+              </div>
+            </li>
+            <li class="canal-item">
+              <span class="canal-icono canal-instagram"></span>
+              <div class="canal-contenido">
+                <strong>Instagram</strong>
+                <a href="https://www.instagram.com/amoryroma.creativo" target="_blank" rel="noopener">@amoryroma.creativo</a>
+              </div>
+            </li>
+            <li class="canal-item">
+              <span class="canal-icono canal-linkedin"></span>
+              <div class="canal-contenido">
+                <strong>LinkedIn</strong>
+                <a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/" target="_blank" rel="noopener">Amor & Roma - Estudio creativo</a>
+              </div>
+            </li>
+          </ul>
+
+          <div class="contacto-horario">
+            <strong>Horario de atención</strong>
+            <p>Lunes a Viernes · 9:00 a 18:00 hs (GMT-3)</p>
+          </div>
+        </aside>
+
+        <!-- COLUMNA DERECHA: Formulario -->
+        <form class="contacto-form" id="form-contacto" action="#" method="POST" novalidate>
+          <h2 class="contacto-form-titulo">Contanos sobre tu marca</h2>
+          <p class="contacto-form-subtitulo">Cuanta más información nos des, más precisa será nuestra lectura inicial.</p>
+
+          <!-- Fila 1: Nombre y Empresa -->
+          <div class="form-row form-row-2">
+            <div class="form-group">
+              <label for="nombre">Nombre completo <span class="form-required">*</span></label>
+              <input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
+            </div>
+            <div class="form-group">
+              <label for="empresa">Empresa / Marca</label>
+              <input type="text" id="empresa" name="empresa" placeholder="Nombre de tu marca">
+            </div>
+          </div>
+
+          <!-- Fila 2: Email y Teléfono -->
+          <div class="form-row form-row-2">
+            <div class="form-group">
+              <label for="email">Email <span class="form-required">*</span></label>
+              <input type="email" id="email" name="email" required placeholder="tu@email.com">
+            </div>
+            <div class="form-group">
+              <label for="telefono">Teléfono / WhatsApp</label>
+              <input type="tel" id="telefono" name="telefono" placeholder="+54 9 11 ...">
+            </div>
+          </div>
+
+          <!-- Fila 3: Servicio de interés -->
+          <div class="form-group">
+            <label for="servicio">¿Qué servicio te interesa? <span class="form-required">*</span></label>
+            <select id="servicio" name="servicio" required>
+              <option value="" disabled selected>Seleccioná una opción</option>
+              <option value="branding">Branding & Identidad de Marca</option>
+              <option value="web">Desarrollo Web a Medida</option>
+              <option value="rrss">Gestión de Redes Sociales (Plan recurrente)</option>
+              <option value="automatizaciones">Automatizaciones & Flujos</option>
+              <option value="paid">Paid Media & Campañas</option>
+              <option value="ecosistema">Ecosistema Digital Completo</option>
+              <option value="otro">Otro / Aún no lo tengo claro</option>
+            </select>
+          </div>
+
+          <!-- Fila 4: Etapa del proyecto -->
+          <div class="form-group">
+            <label for="etapa">¿En qué etapa está tu proyecto?</label>
+            <select id="etapa" name="etapa">
+              <option value="" disabled selected>Seleccioná una opción</option>
+              <option value="idea">Solo tengo la idea</option>
+              <option value="inicio">Estoy empezando (sin marca definida)</option>
+              <option value="marcha">Ya está en marcha, necesito orden</option>
+              <option value="redisenio">Quiero rediseñar / reposicionar</option>
+              <option value="escalar">Quiero escalar lo que ya tengo</option>
+            </select>
+          </div>
+
+          <!-- Fila 5: Presupuesto -->
+          <div class="form-group">
+            <label for="presupuesto">Rango de inversión mensual estimado</label>
+            <select id="presupuesto" name="presupuesto">
+              <option value="" disabled selected>Seleccioná un rango</option>
+              <option value="esencial">Hasta $250.000 (Esencial)</option>
+              <option value="impulso">$250.000 – $500.000 (Impulso)</option>
+              <option value="premium">$500.000 – $800.000 (Premium)</option>
+              <option value="elite">Más de $800.000 (Élite)</option>
+              <option value="proyecto">Es un proyecto cerrado (one-off)</option>
+              <option value="no-se">Prefiero que lo evalúen ustedes</option>
+            </select>
+          </div>
+
+          <!-- Fila 6: Mensaje -->
+          <div class="form-group">
+            <label for="mensaje">Contanos sobre tu proyecto <span class="form-required">*</span></label>
+            <textarea id="mensaje" name="mensaje" rows="5" required placeholder="Objetivos, desafíos, referencias, lo que quieras compartir..."></textarea>
+          </div>
+
+          <!-- Fila 7: Cómo nos conoció -->
+          <div class="form-group">
+            <label for="origen">¿Cómo nos conociste?</label>
+            <select id="origen" name="origen">
+              <option value="" disabled selected>Seleccioná una opción</option>
+              <option value="instagram">Instagram</option>
+              <option value="linkedin">LinkedIn</option>
+              <option value="referido">Me recomendaron</option>
+              <option value="google">Búsqueda en Google</option>
+              <option value="otro">Otro</option>
+            </select>
+          </div>
+
+          <!-- Checkbox de consentimiento -->
+          <div class="form-consentimiento">
+            <input type="checkbox" id="consentimiento" name="consentimiento" required>
+            <label for="consentimiento">
+              Acepto que mis datos sean utilizados para contactarme respecto a mi consulta. <span class="form-required">*</span>
+            </label>
+          </div>
+
+          <button type="submit" class="btn btn-primary btn-form-enviar">
+            Enviar consulta
+            <span class="btn-arrow">→</span>
+          </button>
+
+          <p class="form-nota">
+            <small>Te respondemos en menos de 48 horas hábiles. Sin spam, sin llamadas en frío.</small>
+          </p>
+        </form>
+      </div>
+    </section>
+
+    <!-- SECCIÓN 3: QUÉ PASA DESPUÉS -->
+    <section class="proceso-section">
+      <div class="section-header">
+        <h2 class="section-title">Qué pasa después de tu mensaje</h2>
+        <p class="section-subtitle"></p>
+        
+      </div>
+
+      <div class="proceso-grid">
+        <div class="proceso-paso">
+          <div class="proceso-numero">01</div>
+          <h3>Lectura inicial</h3>
+          <p>Analizamos tu mensaje y tu situación actual. Si vemos que podemos aportar valor real, te agendamos una llamada de diagnóstico.</p>
+        </div>
+        <div class="proceso-paso">
+          <div class="proceso-numero">02</div>
+          <h3>Diagnóstico estratégico</h3>
+          <p>Sesión de 30–45 minutos para entender en profundidad tu marca, objetivos y desafíos. Sin costo y sin compromiso.</p>
+        </div>
+        <div class="proceso-paso">
+          <div class="proceso-numero">03</div>
+          <h3>Propuesta a medida</h3>
+          <p>Te enviamos una propuesta detallada con alcance, tiempos, inversión y entregables. Solo avanzamos si hay encaje mutuo.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- SECCIÓN 4: NOTAS IMPORTANTES -->
+    <section class="notas-section">
+      <div class="notas-container">
+        <div class="nota-item">
+          <strong>Presupuesto publicitario aparte</strong>
+          <p>La inversión en Meta Ads, Google Ads u otras plataformas se abona directamente a cada proveedor. Nuestros honorarios cubren estrategia, creatividades y optimización.</p>
+        </div>
+        <div class="nota-item">
+          <strong>Capacidad controlada</strong>
+          <p>Trabajamos con un número limitado de cuentas por mes para garantizar la calidad boutique. Si no podemos tomar tu proyecto ahora, te lo decimos con transparencia.</p>
+        </div>
+        <div class="nota-item">
+          <strong>Cero plantillas</strong>
+          <p>Cada propuesta es única. No vendemos paquetes cerrados: diseñamos la solución que tu marca necesita en su etapa actual.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- SECCIÓN 5: CTA FINAL -->
+    <section class="cta-section">
+      <div class="cta-card">
+        <h2 class="cta-title">¿Preferís una conversación directa?</h2>
+        <p class="cta-subtitle">Agendá una llamada de 15 minutos sin compromiso. Ideal si tenés dudas o querés validar si somos el equipo adecuado para tu proyecto.</p>
+        <div class="cta-buttons">
+          <a href="https://calendly.com/amoryroma" target="_blank" rel="noopener" class="btn btn-cta-primary">Agendar llamada</a>
+          <a href="https://wa.me/543886118304" target="_blank" rel="noopener" class="btn btn-cta-secondary">Escribir por WhatsApp</a>
+        </div>
+      </div>
    </section>
  </main>

@@ -66,5 +249,8 @@

  <script src="scripts/main.js"></script>
  <script src="scripts/efecto.js"></script>
+  <script src="scripts/contacto.js"></script>
+
+  <link rel="stylesheet" href="style/contacto.css">
 </body>
 </html>
@@ -16,7 +16,7 @@
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="servicios.html">Servicios</a></li>
        <li><a href="planes.html">Planes</a></li>
-        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="inicio.html#portfolio">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    </div>
@@ -38,6 +38,7 @@
        <li><a href="inicio.html">Comencemos</a></li>
        <li><a href="inicio.html#servicios">Qué hacemos?</a></li>
        <li><a href="inicio.html#diagnostico">Diagnóstico</a></li>
+        <li><a href="inicio.html#metodologia">Método A&R</a></li>
        <li><a href="inicio.html#planes-destacados">Destacados</a></li>
        <li><a href="inicio.html#portfolio">Desafios</a></li>
      </ul>
@@ -50,7 +51,7 @@
        <li><a href="inicio.html">Inicio</a></li>
        <li><a href="servicios.html">Servicios</a></li>
        <li><a href="planes.html">Planes</a></li>
-        <li><a href="portfolio.html">Portfolio</a></li>
+        <!--<li><a href="portfolio.html">Portfolio</a></li>-->
        <li><a href="nosotros.html">Nosotros</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contacto.html">Contacto</a></li>
@@ -30,7 +30,7 @@
        <!-- Columna Izquierda: Texto introductorio -->
        <div class="servicios-intro">
          <h2 class="servicios-title">Soluciones digitales diseñadas para hacer crecer tu negocio</h2>
-          <p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
+          <p class="servicios-subtitle">Podemos potenciar tu marca en cada etapa de su crecimiento.</p>
          <a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
        </div>

@@ -133,10 +133,33 @@
    <section id="diagnostico" class="diagnostico-section">
      <div class="diagnostico-header">
        <h2 class="diagnostico-title">¿Cuál es el siguiente paso estratégico para tu negocio?</h2>
-        <p class="diagnostico-subtitle">Un recorrido de orientación diseñado para entender el momento actual de tu marca,<br> y definir con precisión quirúrgica la solución que necesitas.</p>
+        <p class="diagnostico-subtitle">Un recorrido de orientación diseñado para entender el momento actual de tu marca, y definir con precisión quirúrgica la solución que necesitás.</p>
      </div>

      <div class="diagnostico-card">
+
+        <!-- PANTALLA DE BIENVENIDA (visible al inicio) -->
+        <div id="diagnostico-bienvenida" class="diagnostico-bienvenida">
+          <div class="bienvenida-icono">
+            <span class="icono-diagnostico" aria-hidden="true"></span>
+          </div>
+          <h3 class="bienvenida-titulo">Diagnóstico Express</h3>
+          <p class="bienvenida-texto">
+            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><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
+            <span class="btn-arrow" aria-hidden="true">→</span>
+          </button>
+        </div>
+
+        <!-- CUESTIONARIO (oculto hasta hacer clic en comenzar) -->
+        <div id="diagnostico-quiz" class="diagnostico-quiz" style="display: none;">
          <!-- Barra de Progreso -->
          <div class="progreso-wrapper">
            <div class="progreso-barra">
@@ -146,19 +169,16 @@
          </div>

          <!-- Contenedor de Preguntas -->
-        <div id="cuestionario-contenedor">
-          <!-- Las preguntas se generan dinámicamente con JavaScript -->
+          <div id="cuestionario-contenedor" class="cuestionario-contenedor">
+            <!-- Se genera dinámicamente con JavaScript -->
+          </div>
        </div>

-        <!-- Botón Reiniciar -->
-        <button class="btn-reiniciar" id="btn-reiniciar">
-          Reiniciar Diagnóstico
-        </button>
-        
-        <!-- Contenedor de Resultados (oculto inicialmente) -->
+        <!-- RESULTADO (oculto inicialmente) -->
        <div id="resultado-contenedor" class="resultado-contenedor" style="display: none;">
-          <!-- El resultado se genera dinámicamente con JavaScript -->
+          <!-- Se genera dinámicamente con JavaScript -->
        </div>
+
      </div>
    </section>

@@ -338,7 +358,7 @@
        <div class="portfolio-text">
          <h2 class="portfolio-title">Nuestros últimos desafíos</h2>
          <p class="portfolio-subtitle">Cada proyecto es una oportunidad para crear algo único y memorable</p>
-          <a href="portfolio.html" class="btn btn-secondary">Ver portfolio completo</a>
+          <!--<a href="portfolio.html" class="btn btn-secondary">Ver portfolio completo</a>-->
        </div>

        <!-- Columna Derecha: Carrusel -->
@@ -346,35 +366,6 @@
          <div class="carousel-container">
            
            <!-- Slide 1 -->
-            <div class="carousel-slide active">
-              <div class="slide-tags">
-                <span class="slide-tag">Branding</span>
-                <span class="slide-tag">Identidad Visual</span>
-                <span class="slide-tag">Manual de Marca</span>
-                <span class="slide-tag">Redes Sociales</span>
-                <span class="slide-tag">Contenido Audiovisual</span>
-                <span class="slide-tag">Paid Media</span>
-                <span class="slide-tag">Estrategia Digital</span>
-              </div>
-              <div class="slide-image-wrapper">
-                <img src="assets/clientes/1_1.png" alt="Mordi" class="carousel-image">
-              </div>
-            </div>
-
-            <!-- Slide 2 -->
-            <div class="carousel-slide">
-              <div class="slide-tags">
-                <span class="slide-tag">Web</span>
-                <span class="slide-tag">UX/UI</span>
-                <span class="slide-tag">Apertura de Redes</span>
-                <span class="slide-tag">SEO</span>
-              </div>
-              <div class="slide-image-wrapper">
-                <img src="assets/clientes/2_1.png" alt="ArWork's" class="carousel-image">
-              </div>
-            </div>
-
-            <!-- Slide 3 -->
            <div class="carousel-slide">
              <div class="slide-tags">
                <span class="slide-tag">Diseño Web</span>
@@ -385,7 +376,7 @@
              </div>
            </div>

-            <!-- Slide 4 -->
+            <!-- Slide 2 -->
            <div class="carousel-slide">
              <div class="slide-tags">
                <span class="slide-tag">Branding</span>
@@ -401,6 +392,36 @@
              </div>
            </div>

+             <!-- Slide 3 -->
+            <div class="carousel-slide active">
+              <div class="slide-tags">
+                <span class="slide-tag">Branding</span>
+                <span class="slide-tag">Creación de personaje</span>
+                <span class="slide-tag">Identidad Visual</span>
+                <span class="slide-tag">Manual de Marca</span>
+                <span class="slide-tag">Redes Sociales</span>
+                <span class="slide-tag">Contenido Audiovisual</span>
+                <span class="slide-tag">Paid Media</span>
+                <span class="slide-tag">Estrategia Digital</span>
+              </div>
+              <div class="slide-image-wrapper">
+                <img src="assets/clientes/1_1.png" alt="Mordi" class="carousel-image">
+              </div>
+            </div>
+
+            <!-- Slide 4 -->
+            <div class="carousel-slide">
+              <div class="slide-tags">
+                <span class="slide-tag">Web</span>
+                <span class="slide-tag">UX/UI</span>
+                <span class="slide-tag">Apertura de Redes</span>
+                <span class="slide-tag">SEO</span>
+              </div>
+              <div class="slide-image-wrapper">
+                <img src="assets/clientes/2_1.png" alt="ArWork's" class="carousel-image">
+              </div>
+            </div>
+            
            <!-- Slide 5 -->
            <div class="carousel-slide">
              <div class="slide-tags">
@@ -510,6 +531,6 @@
  <div id="footer-container"></div>

  <script src="scripts/main.js"></script>
-  <script src="scripts/efecto.js"></script>
+
 </body>
 </html>
@@ -3,22 +3,237 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="">
-  <title>Nosotros - [Nombre de la agencia]</title>
+  <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>

  <main>
-    <section id="nosotros-section-1"><h2>Sección 1</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="nosotros-section-2"><h2>Sección 2</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="nosotros-section-3"><h2>Sección 3</h2><p>Contenido pendiente de definir.</p></section>
+    <!-- SECCIÓN 1: HERO / FILOSOFÍA -->
+    <section class="hero-section nosotros-hero">
+      <div class="hero-content">
+        <h1 class="hero-title">Amor & Roma</h1>
+        <p class="hero-subtitle">
+         No somos una agencia tradicional. <br>Combinamos el arte del marketing digital con la ciencia de los datos.
+        </p>
+        <div class="hero-cta-group">
+          <a href="#nosotros-dualidad" class="btn btn-primary">Descubre nuestra dualidad</a>
+          <a href="contacto.html" class="btn btn-secondary">Hablemos de tu proyecto</a>
+        </div>
+      </div>
+    </section>
+
+    <!-- SECCIÓN 2: LA DUALIDAD DE MARCA -->
+    <section id="nosotros-dualidad" class="dualidad-section">
+      <div class="section-header">
+        <h2 class="section-title">Nuestra Dualidad Estratégica</h2>
+        <p class="section-subtitle">El nombre de nuestra agencia no responde a una visión romántica tradicional, sino a dos pilares operativos inseparables.</p>
+      </div>
+      <div class="dualidad-grid">
+        <article class="dualidad-card card-amor">
+          <div class="card-icon icon-amor"></div>
+          <h3>Amor</h3>
+          <span class="card-tag">La Pasión y el Arte</span>
+          <p>Representa la chispa creativa, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. Es el alma y la identidad de cada marca.</p>
+        </article>
+        <article class="dualidad-card card-roma">
+          <div class="card-icon icon-roma"></div>
+          <h3>Roma</h3>
+          <span class="card-tag">La Construcción y la Estructura</span>
+          <p>Representa la arquitectura, la solidez, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. Es el imperio que sostiene esa visión.</p>
+        </article>
+      </div>
+    </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>
+
+      <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>
+    </section>
+
+    <!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
+    <section id="nosotros-principios" class="principios-section">
+      <div class="section-header">
+        <h2 class="section-title">El Posicionamiento "Boutique"</h2>
+        <p class="section-subtitle">Ser una agencia boutique implica tres principios rectores que protegen la calidad y el resultado de tu proyecto.</p>
+      </div>
+      <div class="principios-grid">
+        <div class="principio-item">
+          <div class="principio-numero">01</div>
+          <h4>Cero plantillas prefabricadas</h4>
+          <p>Cada diseño, arquitectura web o plan de contenidos se crea a medida de la identidad, necesidades y madurez real de tu negocio.</p>
+        </div>
+        <div class="principio-item">
+          <div class="principio-numero">02</div>
+          <h4>Capacidad controlada de cuentas</h4>
+          <p>Priorizamos la profundidad operativa sobre el volumen desmedido de clientes, garantizando atención directa y personalización real.</p>
+        </div>
+        <div class="principio-item">
+          <div class="principio-numero">03</div>
+          <h4>Foco visual y de contenido</h4>
+          <p>Aunque la automatización es clave, nuestro valor diferencial perceptible está en el criterio estético, la narrativa visual y la calidad de producción.</p>
+        </div>
+      </div>
+    </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>
+          </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>
+          <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>
+          </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>
+    </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>
+          </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 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>
+          </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>
+
+    <!-- SECCIÓN 6: CTA FINAL -->
+    <section class="cta-section">
+      <div class="cta-card">
+        <h2 class="cta-title">¿Listo para construir tu imperio con esencia?</h2>
+        <p class="cta-subtitle">Agendemos una reunión. Sin plantillas, sin compromisos, solo estrategia a medida.</p>
+        <div class="cta-buttons">
+          <a href="contacto.html" class="btn btn-cta-primary">Hablemos de tu proyecto</a>
+          <a href="inicio.html#portfolio" class="btn btn-cta-secondary">Ver Casos de Éxito</a>
+        </div>
+      </div>
+    </section>
  </main>

  <div id="footer-container"></div>

  <script src="scripts/main.js"></script>
-  <script src="scripts/efecto.js"></script>
 </body>
 </html>
@@ -3,26 +3,507 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="">
-  <title>Planes - [Nombre de la agencia]</title>
+  <meta name="description" content="Planes de gestión de redes sociales de Amor y Roma. Soluciones escalables desde $250.000/mes.">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
+  <title>Planes - Amor y Roma</title>
  <link rel="stylesheet" href="style/main.css">
+  <link rel="stylesheet" href="style/planes.css">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
  <div id="menu-container"></div>

  <main>
-    <section id="planes-section-1"><h2>Sección 1</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-2"><h2>Sección 2</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-3"><h2>Sección 3</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-4"><h2>Sección 4</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-5"><h2>Sección 5</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-6"><h2>Sección 6</h2><p>Contenido pendiente de definir.</p></section>
-    <section id="planes-section-7"><h2>Sección 7</h2><p>Contenido pendiente de definir.</p></section>
+    <!-- Sección 1: Hero -->
+    <section id="planes-hero" class="planes-hero">
+      <div class="planes-hero-content">
+        <span class="planes-hero-tag">Planes de Redes Sociales</span>
+        <h1 class="planes-hero-title">Gestión profesional de tus redes</h1>
+        <p class="planes-hero-subtitle">Elegí el plan que se adapte a tu etapa de crecimiento. Todos incluyen estrategia, diseño y dirección de arte personalizada.</p>
+        <a href="#planes-selector" class="btn btn-primary planes-hero-cta">Ver planes disponibles</a>
+      </div>
+    </section>
+
+    <!-- Sección 2: Selector de planes -->
+    <section id="planes-selector" class="planes-selector-section">
+      <div class="planes-selector-container">
+        <!-- Tabs desktop -->
+        <div class="planes-tabs" role="tablist" aria-label="Selector de planes">
+          <button class="plan-tab active" role="tab" aria-selected="true" aria-controls="panel-esencial" data-plan="esencial">
+            <span class="tab-label">Plan Esencial</span>
+            <span class="tab-precio">$250k</span>
+          </button>
+          <button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-impulso" data-plan="impulso">
+            <span class="tab-label">Plan Impulso</span>
+            <span class="tab-precio">$420k</span>
+          </button>
+          <button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-premium" data-plan="premium">
+            <span class="tab-label">Plan Premium</span>
+            <span class="tab-precio">$650k</span>
+          </button>
+          <button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-elite" data-plan="elite">
+            <span class="tab-label">Plan Élite</span>
+            <span class="tab-precio">$1M</span>
+          </button>
+        </div>
+
+        <!-- Pills mobile (scroll horizontal) -->
+        <div class="planes-pills" role="tablist" aria-label="Selector de planes mobile">
+          <button class="plan-pill active" role="tab" aria-selected="true" aria-controls="panel-esencial" data-plan="esencial">
+            <span>Esencial</span>
+            <span class="pill-precio">$250k</span>
+          </button>
+          <button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-impulso" data-plan="impulso">
+            <span>Impulso</span>
+            <span class="pill-precio">$420k</span>
+          </button>
+          <button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-premium" data-plan="premium">
+            <span>Premium</span>
+            <span class="pill-precio">$650k</span>
+          </button>
+          <button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-elite" data-plan="elite">
+            <span>Élite</span>
+            <span class="pill-precio">$1M</span>
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección 3: Panel de contenido dinámico -->
+    <section id="planes-panel" class="planes-panel-section">
+      <div class="planes-panel-container">
+        
+        <!-- Panel: Plan Esencial -->
+        <div class="plan-panel active" id="panel-esencial" role="tabpanel" data-plan="esencial">
+          <div class="panel-header">
+            <span class="panel-categoria">Para emprendedores iniciales</span>
+            <h2 class="panel-titulo">Plan Esencial</h2>
+            <p class="panel-subtitulo">Ordená y profesionalizá tu imagen digital con una presencia activa y coherente.</p>
+          </div>
+          
+          <div class="panel-grid-dimensiones">
+            <!-- Dimensión 1: Contenido -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> 8 piezas gráficas/carruseles mensuales</li>
+                <li><i class="fas fa-check"></i> 4 historias estratégicas por semana</li>
+                <li><i class="fas fa-check"></i> Dirección de arte básica</li>
+              </ul>
+            </div>
+
+            <!-- Dimensión 2: Copywriting -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Guías de estilo básicas</li>
+                <li><i class="fas fa-check"></i> Redacción de copys directos</li>
+                <li><i class="fas fa-check"></i> Identidad visual coherente</li>
+              </ul>
+            </div>
+
+            <!-- Dimensión 3: Automatizaciones -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Configuración de respuestas automáticas</li>
+                <li><i class="fas fa-check"></i> FAQ en DM</li>
+                <li><i class="fas fa-times"></i> Flujos avanzados no incluidos</li>
+              </ul>
+            </div>
+
+            <!-- Dimensión 4: Paid Media -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-times"></i> No incluye (orgánico puro)</li>
+                <li><i class="fas fa-info-circle"></i> Disponible como add-on</li>
+              </ul>
+            </div>
+
+            <!-- Dimensión 5: Gestión -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Programación de contenido</li>
+                <li><i class="fas fa-check"></i> Publicación en horarios óptimos</li>
+                <li><i class="fas fa-times"></i> Moderación de comunidad no incluida</li>
+              </ul>
+            </div>
+
+            <!-- Dimensión 6: Reportes -->
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Reporte mensual cuantitativo automatizado</li>
+                <li><i class="fas fa-check"></i> Métricas básicas de alcance e interacción</li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Tarjeta de Precio -->
+          <div class="panel-precio-card">
+            <div class="precio-header">
+              <span class="precio-label">Inversión mensual</span>
+              <div class="precio-valor">
+                <span class="precio-moneda">$</span>
+                <span class="precio-monto">250.000</span>
+                <span class="precio-periodo">/mes</span>
+              </div>
+            </div>
+            <a href="contacto.html?plan=esencial" class="btn btn-primary btn-contratar">Contratar este plan</a>
+          </div>
+        </div>
+
+        <!-- Panel: Plan Impulso -->
+        <div class="plan-panel" id="panel-impulso" role="tabpanel" data-plan="impulso">
+          <div class="panel-header">
+            <span class="panel-categoria">Para pequeños negocios en validación</span>
+            <h2 class="panel-titulo">Plan Impulso</h2>
+            <p class="panel-subtitulo">Crecé tu comunidad y generá engagement mediante formatos dinámicos y contenido persuasivo.</p>
+          </div>
+          
+          <div class="panel-grid-dimensiones">
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-images"> </i>Generación de Contenido</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> 8 piezas gráficas/carruseles mensuales</li>
+                <li><i class="fas fa-check"></i> 4 Reels/TikToks producidos</li>
+                <li><i class="fas fa-check"></i> 6 historias estratégicas por semana</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-pen-fancy"> </i>Copywriting & Arte</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Copywriting persuasivo</li>
+                <li><i class="fas fa-check"></i> Dirección de arte personalizada</li>
+                <li><i class="fas fa-check"></i> Guiones de video básicos</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Flujo automatizado de bienvenida</li>
+                <li><i class="fas fa-check"></i> Derivación a WhatsApp</li>
+                <li><i class="fas fa-times"></i> Cualificación avanzada no incluida</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Configuración de 1 campaña</li>
+                <li><i class="fas fa-check"></i> Tráfico o alcance local</li>
+                <li><i class="fas fa-check"></i> Monitoreo básico</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Programación de contenido</li>
+                <li><i class="fas fa-check"></i> Moderación de comentarios y DMs</li>
+                <li><i class="fas fa-check"></i> Horarios comerciales</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Reporte mensual con análisis básico</li>
+                <li><i class="fas fa-check"></i> Métricas clave de engagement</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="panel-precio-card">
+            <div class="precio-header">
+              <span class="precio-label">Inversión mensual</span>
+              <div class="precio-valor">
+                <span class="precio-moneda">$</span>
+                <span class="precio-monto">420.000</span>
+                <span class="precio-periodo">/mes</span>
+              </div>
+            </div>
+            <a href="contacto.html?plan=impulso" class="btn btn-primary btn-contratar">Contratar este plan</a>
+          </div>
+        </div>
+
+        <!-- Panel: Plan Premium -->
+        <div class="plan-panel" id="panel-premium" role="tabpanel" data-plan="premium">
+          <div class="panel-header">
+            <span class="panel-categoria">Para PyMEs con tracción comercial</span>
+            <h2 class="panel-titulo">Plan Premium</h2>
+            <p class="panel-subtitulo">Posicionate como referente en tu sector con contenido de alta producción y estrategia de conversión.</p>
+          </div>
+          
+          <div class="panel-grid-dimensiones">
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> 10 piezas gráficas/carruseles mensuales</li>
+                <li><i class="fas fa-check"></i> 8 Reels/TikToks producidos</li>
+                <li><i class="fas fa-check"></i> Historias diarias (días hábiles)</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Storytelling avanzado</li>
+                <li><i class="fas fa-check"></i> Guiones de video profesionales</li>
+                <li><i class="fas fa-check"></i> Diseño editorial premium</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Flujos de cualificación de leads</li>
+                <li><i class="fas fa-check"></i> Integración básica a base de datos</li>
+                <li><i class="fas fa-check"></i> Respuestas por palabras clave</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Gestión y optimización de campañas</li>
+                <li><i class="fas fa-check"></i> Conversión y captación de prospectos</li>
+                <li><i class="fas fa-check"></i> A/B testing de creatividades</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Moderación activa de comunidad</li>
+                <li><i class="fas fa-check"></i> Gestión de consultas comerciales</li>
+                <li><i class="fas fa-check"></i> Respuesta en menos de 24hs</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Reporte mensual cualitativo</li>
+                <li><i class="fas fa-check"></i> Reunión de alineación estratégica (30 min)</li>
+                <li><i class="fas fa-check"></i> Análisis de ROI y recomendaciones</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="panel-precio-card">
+            <div class="precio-header">
+              <span class="precio-label">Inversión mensual</span>
+              <div class="precio-valor">
+                <span class="precio-moneda">$</span>
+                <span class="precio-monto">650.000</span>
+                <span class="precio-periodo">/mes</span>
+              </div>
+            </div>
+            <a href="contacto.html?plan=premium" class="btn btn-primary btn-contratar">Contratar este plan</a>
+          </div>
+        </div>
+
+        <!-- Panel: Plan Élite -->
+        <div class="plan-panel" id="panel-elite" role="tabpanel" data-plan="elite">
+          <div class="panel-header">
+            <span class="panel-categoria">Para empresas medianas consolidadas</span>
+            <h2 class="panel-titulo">Plan Élite</h2>
+            <p class="panel-subtitulo">Liderazgo de mercado, dirección de arte exclusiva y embudo publicitario avanzado multicanal.</p>
+          </div>
+          
+          <div class="panel-grid-dimensiones">
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> 12 piezas gráficas/carruseles premium</li>
+                <li><i class="fas fa-check"></i> 12 Reels/TikToks de alta producción</li>
+                <li><i class="fas fa-check"></i> Cobertura diaria integral de historias</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Dirección creativa y de arte exclusiva</li>
+                <li><i class="fas fa-check"></i> Guiones con ganchos de alta retención</li>
+                <li><i class="fas fa-check"></i> Producción audiovisual profesional</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Automatizaciones avanzadas multi-paso</li>
+                <li><i class="fas fa-check"></i> Etiquetado de leads</li>
+                <li><i class="fas fa-check"></i> Seguimiento CRM integrado</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Gestión integral de embudo completo</li>
+                <li><i class="fas fa-check"></i> Awareness, Retargeting, Conversión</li>
+                <li><i class="fas fa-check"></i> Meta Ads + Google Ads + TikTok Ads</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Protocolo prioritario de atención</li>
+                <li><i class="fas fa-check"></i> Gestión de reputación de marca</li>
+                <li><i class="fas fa-check"></i> Respuesta en menos de 4hs</li>
+              </ul>
+            </div>
+
+            <div class="dimension-card">
+              <h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
+              <ul class="dimension-lista">
+                <li><i class="fas fa-check"></i> Dashboard en tiempo real</li>
+                <li><i class="fas fa-check"></i> Reunión mensual ejecutiva</li>
+                <li><i class="fas fa-check"></i> Insights de ROI y KPIs avanzados</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="panel-precio-card">
+            <div class="precio-header">
+              <span class="precio-label">Inversión mensual</span>
+              <div class="precio-valor">
+                <span class="precio-moneda">$</span>
+                <span class="precio-monto">1.000.000</span>
+                <span class="precio-periodo">/mes</span>
+              </div>
+            </div>
+            <a href="contacto.html?plan=elite" class="btn btn-primary btn-contratar">Contratar este plan</a>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Sección 4: Tabla Comparativa -->
+    <section id="planes-comparativa" class="planes-comparativa-section">
+      <div class="comparativa-container">
+        <div class="comparativa-header">
+          <h2 class="comparativa-titulo">Compará los planes</h2>
+          <p class="comparativa-subtitulo">Encontrá el plan perfecto para tu negocio</p>
+        </div>
+        
+        <div class="comparativa-table-wrapper">
+          <table class="comparativa-table">
+            <thead>
+              <tr>
+                <th class="col-caracteristica">Característica</th>
+                <th class="col-plan">Esencial</th>
+                <th class="col-plan">Impulso</th>
+                <th class="col-plan">Premium</th>
+                <th class="col-plan">Élite</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="caracteristica-nombre">Piezas gráficas/mes</td>
+                <td>8</td>
+                <td>8</td>
+                <td>10</td>
+                <td>12</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Reels/TikToks</td>
+                <td><i class="fas fa-times"></i></td>
+                <td>4</td>
+                <td>8</td>
+                <td>12</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Historias/semana</td>
+                <td>4</td>
+                <td>6</td>
+                <td>Daily</td>
+                <td>Daily+</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Copywriting</td>
+                <td>Básico</td>
+                <td>Persuasivo</td>
+                <td>Storytelling</td>
+                <td>Exclusivo</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Automatizaciones</td>
+                <td><i class="fas fa-minus"></i></td>
+                <td>Básicas</td>
+                <td>Cualificación</td>
+                <td>Avanzadas</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Paid Media (Ads)</td>
+                <td><i class="fas fa-times"></i></td>
+                <td>1 campaña</td>
+                <td><i class="fas fa-check"></i></td>
+                <td>Multicanal</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Moderación</td>
+                <td><i class="fas fa-times"></i></td>
+                <td>Comentarios</td>
+                <td>Activa</td>
+                <td>Prioritaria</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Reportes</td>
+                <td>Automático</td>
+                <td>Básico</td>
+                <td>Cualitativo</td>
+                <td>Dashboard</td>
+              </tr>
+              <tr>
+                <td class="caracteristica-nombre">Reuniones</td>
+                <td><i class="fas fa-times"></i></td>
+                <td><i class="fas fa-times"></i></td>
+                <td>Mensual 30min</td>
+                <td>Ejecutiva</td>
+              </tr>
+              <tr class="row-precio">
+                <td class="caracteristica-nombre">Inversión</td>
+                <td class="precio-celda">$250k</td>
+                <td class="precio-celda">$420k</td>
+                <td class="precio-celda">$650k</td>
+                <td class="precio-celda">$1M</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección 5: CTA Final -->
+    <section class="planes-cta">
+      <div class="planes-cta-card">
+        <h2 class="planes-cta-titulo">¿No sabés cuál plan elegir?</h2>
+        <p class="planes-cta-subtitle">Hablamos contigo y te recomendamos el plan ideal según tus objetivos y presupuesto.</p>
+        <div class="planes-cta-buttons">
+          <a href="contacto.html" class="btn btn-cta-primary">Asesoramiento gratuito</a>
+          <a href="inicio.html#diagnostico" class="btn btn-cta-secondary">Hacé el diagnóstico</a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección 6: Espacio de cierre -->
+    <section class="planes-cierre"></section>
  </main>

  <div id="footer-container"></div>

  <script src="scripts/main.js"></script>
-  <script src="scripts/efecto.js"></script>
+  <script src="scripts/planes.js"></script>
 </body>
 </html>
@@ -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();
+});
@@ -190,224 +190,282 @@ document.addEventListener('DOMContentLoaded', async () => {
 });

 /* ============================================
-LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO
+DIAGNÓSTICO INTERACTIVO
 ============================================ */
+function initDiagnostico() {
+  // Elementos del DOM
+  const bienvenida = document.getElementById('diagnostico-bienvenida');
+  const quiz = document.getElementById('diagnostico-quiz');
+  const resultado = document.getElementById('resultado-contenedor');
+  const btnComenzar = document.getElementById('btn-comenzar');
+  const contenedorPreguntas = document.getElementById('cuestionario-contenedor');
+  const barraCompletado = document.getElementById('progreso-completado');
+  const textoProgreso = document.getElementById('progreso-texto');

-// Datos del cuestionario
+  if (!bienvenida || !quiz || !resultado || !btnComenzar) return;
+
+  // Banco de preguntas
  const preguntas = [
    {
      id: 1,
-    titulo: "¿En qué etapa se encuentra hoy tu negocio o proyecto?",
+      titulo: '¿En qué etapa se encuentra hoy tu negocio o proyecto?',
      opciones: [
-      { letra: "A", texto: "Creando el proyecto desde cero o formalizando una idea reciente." },
-      { letra: "B", texto: "Negocio o local activo, pero con una imagen visual que no refleja la calidad de lo que vendo." },
-      { letra: "C", texto: "En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo." },
-      { letra: "D", texto: "Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad." },
-      { letra: "E", texto: "Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing de punta a punta." },
-      { letra: "F", texto: "Emprendimiento personal que gestiono por mi cuenta y donde necesito resolver piezas puntuales." }
+        { texto: 'Creando el proyecto desde cero o formalizando una idea reciente.', valor: 'inicio' },
+        { texto: 'Negocio activo, pero con una imagen visual que no refleja la calidad de lo que vendo.', valor: 'identidad' },
+        { texto: 'En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo.', valor: 'automatizacion' },
+        { texto: 'Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad.', valor: 'paid' },
+        { texto: 'Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing.', valor: 'corporativo' },
+        { texto: 'Emprendimiento personal que gestiono por mi cuenta y necesito resolver piezas puntuales.', valor: 'consultoria' }
      ]
    },
    {
      id: 2,
-    titulo: "¿Cuál es tu cuello de botella más urgente hoy?",
+      titulo: '¿Cuál es tu mayor desafío actual en marketing?',
      opciones: [
-      { letra: "A", texto: "No tengo logo profesional ni página web; me falta confianza frente a la competencia." },
-      { letra: "B", texto: "No tengo tiempo ni equipo para sacar fotos o grabar videos de buena calidad de mis productos/servicios." },
-      { letra: "C", texto: "Perdemos clientes potenciales porque tardamos horas en responder WhatsApp o mensajes de redes." },
-      { letra: "D", texto: "Dependemos del boca a boca o de publicar en redes sin conseguir ventas constantes ni predecibles." },
-      { letra: "E", texto: "Tenemos acciones aisladas sin una dirección estratégica clara ni medición profesional de métricas." },
-      { letra: "F", texto: "Me faltan herramientas gráficas o plantillas para diseñar mis propias publicaciones sin perder horas." }
+        { texto: 'No tengo una identidad clara ni coherente en mis canales.', valor: 'identidad' },
+        { texto: 'Tengo redes pero no generan consultas ni ventas reales.', valor: 'redes' },
+        { texto: 'Mi sitio web está desactualizado o no convierte visitantes en clientes.', valor: 'web' },
+        { texto: 'No tengo tiempo ni equipo para producir contenido constante.', valor: 'contenido' },
+        { texto: 'Invierto en pauta pero no sé si estoy llegando a la audiencia correcta.', valor: 'paid' },
+        { texto: 'No tengo una estrategia clara y voy tomando decisiones sobre la marcha.', valor: 'consultoria' }
      ]
    },
    {
      id: 3,
-    titulo: "¿Con qué infraestructura digital cuentas actualmente?",
+      titulo: '¿Qué objetivo prioritario tenés para los próximos 6 meses?',
      opciones: [
-      { letra: "A", texto: "Prácticamente nada formal (solo una idea, perfil personal o logo provisional)." },
-      { letra: "B", texto: "Perfil comercial en redes sociales, pero con fotos caseras tomadas con el celular." },
-      { letra: "C", texto: "Redes y/o tienda activa con alto volumen de mensajes directos diarios sin automatizar." },
-      { letra: "D", texto: "Redes y web en marcha, pero sin campañas activas de publicidad paga (Meta Ads / Google Ads)." },
-      { letra: "E", texto: "Ecosistema activo (redes, web, pauta), pero disperso entre distintos proveedores sin sinergia." },
-      { letra: "F", texto: "Manejo mis propios canales y solo requiero recursos gráficos específicos para seguir operando." }
+        { texto: 'Lanzar mi marca con una identidad sólida y profesional.', valor: 'identidad' },
+        { texto: 'Construir una comunidad activa y fiel en redes sociales.', valor: 'redes' },
+        { texto: 'Tener un sitio web que venda por mí las 24 horas.', valor: 'web' },
+        { texto: 'Automatizar procesos para ganar tiempo y escalar.', valor: 'automatizacion' },
+        { texto: 'Escalar ventas con campañas de publicidad pagada.', valor: 'paid' },
+        { texto: 'Tener un partner estratégico que me acompañe en las decisiones.', valor: 'consultoria' }
      ]
    },
    {
      id: 4,
-    titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?",
+      titulo: '¿Cómo describirías tu inversión actual en marketing?',
      opciones: [
-      { letra: "A", texto: "Proyecto inicial integral: crear mi identidad de marca y mi sitio web para salir al mercado." },
-      { letra: "B", texto: "Acompañamiento mensual con sesiones presenciales de fotos/video para no preocuparme del contenido." },
-      { letra: "C", texto: "Implementación tecnológica: automatizaciones inteligentes y asistentes para WhatsApp y redes." },
-      { letra: "D", texto: "Gestión de campañas de publicidad digital y páginas de venta enfocadas 100% en conversión." },
-      { letra: "E", texto: "Gestión integral 360°: estrategia de marca completa, pauta multicanal, redes y dirección creativa." },
-      { letra: "F", texto: "Un entregable puntual (diseño de plantilla, digitalización de logo o sesión única de fotos)." }
+        { texto: 'Casi nula o muy básica, recién estoy empezando.', valor: 'inicio' },
+        { texto: 'Baja, hago algunas cosas por mi cuenta pero me falta estructura.', valor: 'identidad' },
+        { texto: 'Media, invierto en contenido pero no veo retorno claro.', valor: 'contenido' },
+        { texto: 'Media-alta, ya tengo equipo o freelancers pero falta dirección.', valor: 'consultoria' },
+        { texto: 'Alta, invierto en pauta y necesito maximizar el ROI.', valor: 'paid' },
+        { texto: 'Integral, busco una agencia que gestione todo 360°.', valor: 'corporativo' }
      ]
    }
  ];

-// Perfiles de resultado
-const perfiles = {
-  A: {
-    titulo: "Mix Lanzamiento Integral",
-    diagnostico: "Tu proyecto necesita bases sólidas y credibilidad inmediata para competir y generar confianza.",
-    solucion: "Identidad visual completa (Branding) + Diseño Web institucional + Gestión de Redes Sociales (Plan Esencial, $250.000/mes).",
-    cta: "Cotizar Mix Lanzamiento"
+  // Mapeo de resultados según valor más frecuente
+  const resultados = {
+    inicio: {
+      titulo: 'Plan Esencial',
+      diagnostico: 'Estás en una etapa fundacional. Tu marca necesita bases sólidas antes de escalar.',
+      solucion: 'Te recomendamos comenzar con un <strong>Plan Esencial</strong>: identidad visual básica, sitio web institucional y gestión inicial de redes. Es el punto de partida ideal para construir con estrategia desde el día uno.'
    },
-  B: {
-    titulo: "Mix Comercio & Presencia Visual",
-    diagnostico: "Tu producto o servicio tiene potencial comercial, pero la calidad visual actual en redes te resta ventas.",
-    solucion: "Plan Premium de Redes Sociales ($650.000/mes), que incluye sesión presencial quincenal de fotos y videos profesionales, 8 reels, asistencia con IA y dirección creativa.",
-    cta: "Ver Plan Premium"
+    identidad: {
+      titulo: 'Construcción de Identidad Estratégica',
+      diagnostico: 'Tu negocio tiene potencial, pero la percepción visual no está a la altura de lo que ofrecés.',
+      solucion: 'Necesitás un trabajo de <strong>Branding integral</strong>: definir el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.'
    },
-  C: {
-    titulo: "Solución Eficiencia & Automatización",
-    diagnostico: "Tu principal fuga de dinero es el tiempo de respuesta: consultas demoradas son ventas perdidas.",
-    solucion: "Implementación de Automatizaciones con Asistentes Inteligentes para WhatsApp, Instagram y Facebook + Plan Impulso ($420.000/mes) para ordenar el flujo de mensajes.",
-    cta: "Automatizar mi Atención"
+    redes: {
+      titulo: 'Comunidades que Convierten',
+      diagnostico: 'Tenés presencia pero no estás generando el impacto ni la conexión que buscás.',
+      solucion: 'Te recomendamos nuestro servicio de <strong>Gestión de Redes Sociales</strong>: creamos contenido de valor y gestionamos tus canales para construir una comunidad activa, fiel y comprometida con tu marca.'
    },
-  D: {
-    titulo: "Mix Acelerador & Conversión",
-    diagnostico: "Tu marca ya está ordenada visualmente; ahora necesita tráfico calificado y un sistema predecible de atracción de clientes.",
-    solucion: "Servicio de Paid Media (Meta Ads + Google Ads) + Optimización de Landing Page / Catálogo + Creatividades publicitarias de alto impacto.",
-    cta: "Escalar mis Ventas"
+    web: {
+      titulo: 'Experiencias Digitales Impactantes',
+      diagnostico: 'Tu sitio web no está cumpliendo su rol como herramienta de venta y conversión.',
+      solucion: 'Necesitás un <strong>rediseño o desarrollo web estratégico</strong>: un sitio que no solo se vea bien, sino que genere resultados tangibles y convierta visitantes en clientes.'
    },
-  E: {
-    titulo: "Servicio Corporativo 360°",
-    diagnostico: "Tu empresa busca liderazgo absoluto de mercado, unificación de imagen y tercerización completa del departamento de marketing.",
-    solucion: "Plan Élite de Redes ($1.000.000/mes) + Branding Integral (packaging, cartelería física) + Pauta multicanal (Meta, TikTok, Google) + Reportes quincenales avanzados con KPIs.",
-    cta: "Agendar Reunión Estratégica"
+    contenido: {
+      titulo: 'Historias que Enamoran',
+      diagnostico: 'Tenés el negocio andando pero te falta el contenido que conecte emocionalmente con tu audiencia.',
+      solucion: 'Te recomendamos nuestro servicio de <strong>Producción de Contenido Audiovisual y Gráfico</strong>: contenido de alta calidad que cuente la historia de tu marca y cautive a tu audiencia.'
    },
-  F: {
-    titulo: "Solución Autogestor / Servicios Puntuales",
-    diagnostico: "Buscas resolver necesidades gráficas puntuales sin comprometerte con un abono mensual recurrente.",
-    solucion: "Paquetes individuales a medida: Digitalización y vectorización de logo, Pack de plantillas editables personalizadas o Producción fotográfica por jornada.",
-    cta: "Elegir Servicios Puntuales"
+    automatizacion: {
+      titulo: 'Automatización de Procesos',
+      diagnostico: 'El crecimiento te está desbordando. Necesitás sistemas que trabajen por vos.',
+      solucion: 'Necesitás <strong>automatizaciones inteligentes</strong>: flujos de WhatsApp, respuestas automáticas y sistemas que liberen tu tiempo para que te enfoques en lo estratégico.'
+    },
+    paid: {
+      titulo: 'Campañas que Escalan Resultados',
+      diagnostico: 'Tenés producto y demanda, pero necesitás acelerar el crecimiento con inversión publicitaria inteligente.',
+      solucion: 'Te recomendamos <strong>Paid Media en Meta, Google y LinkedIn</strong>: campañas gestionadas estratégicamente para maximizar tu ROI y alcanzar a los clientes correctos.'
+    },
+    consultoria: {
+      titulo: 'Asesoramiento Estratégico Integral',
+      diagnostico: 'Tenés recursos y voluntad, pero te falta una brújula estratégica que alinee tus esfuerzos.',
+      solucion: 'Necesitás una <strong>Consultoría de Marketing</strong>: te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.'
+    },
+    corporativo: {
+      titulo: 'Plan Corporativo 360°',
+      diagnostico: 'Tu empresa está en un nivel donde necesitás un equipo dedicado que gestione todo de forma integral.',
+      solucion: 'Te recomendamos el <strong>Plan Corporativo</strong>: dirección creativa y estratégica, branding integral, pauta multicanal, reportes con KPIs y un equipo dedicado exclusivamente a tu marca.'
    }
  };

-// Estado del cuestionario
+  // Estado
  let preguntaActual = 0;
-let respuestas = [];
+  const respuestas = [];

-// Función para calcular el perfil
-function calcularPerfil(respuestas) {
-  const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 };
-  
-  respuestas.forEach(r => { 
-    if (conteo[r] !== undefined) conteo[r]++; 
+  // Iniciar cuestionario
+  btnComenzar.addEventListener('click', () => {
+    bienvenida.style.display = 'none';
+    quiz.style.display = 'block';
+    resultado.style.display = 'none';
+    preguntaActual = 0;
+    respuestas.length = 0;
+    renderizarPregunta();
  });

-  // Encontrar la letra con mayor frecuencia
-  let maxVotos = 0;
-  let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella)
-
-  for (const letra in conteo) {
-    if (conteo[letra] > maxVotos) {
-      maxVotos = conteo[letra];
-      ganador = letra;
-    } else if (conteo[letra] === maxVotos && maxVotos > 0) {
-      // Desempate: priorizar la respuesta de la Pregunta 2
-      if (respuestas[1] === letra) {
-        ganador = letra;
-      }
-    }
-  }
-
-  return ganador;
-}
-
-// Función para renderizar pregunta
+  // Renderizar pregunta actual
  function renderizarPregunta() {
-  const contenedor = document.getElementById('cuestionario-contenedor');
    const pregunta = preguntas[preguntaActual];
+    const progreso = ((preguntaActual) / preguntas.length) * 100;

-  contenedor.innerHTML = `
+    barraCompletado.style.width = `${progreso}%`;
+    textoProgreso.textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
+
+    let html = `
      <div class="pregunta-contenedor">
        <h3 class="pregunta-titulo">${pregunta.titulo}</h3>
        <div class="opciones-contenedor">
-        ${pregunta.opciones.map(opcion => `
-          <button class="opcion-tarjeta" data-letra="${opcion.letra}">
-            ${opcion.texto}
-          </button>
-        `).join('')}
-      </div>
-    </div>
    `;

-  // Agregar event listeners a las opciones
-  document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
-    tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
+    pregunta.opciones.forEach((opcion, index) => {
+      const seleccionada = respuestas[preguntaActual] === opcion.valor ? 'seleccionada' : '';
+      html += `
+        <button class="opcion-tarjeta ${seleccionada}" data-valor="${opcion.valor}" data-index="${index}">
+          <span class="opcion-numero">${index + 1}</span>
+          <span class="opcion-texto">${opcion.texto}</span>
+        </button>
+      `;
+    });
+
+    html += `</div>`;
+
+    // Navegación
+    html += `
+      <div class="pregunta-navegacion">
+        <button class="btn-anterior" ${preguntaActual === 0 ? 'style="visibility: hidden;"' : ''}>
+          ← Anterior
+        </button>
+        <button class="btn-siguiente" ${!respuestas[preguntaActual] ? 'disabled' : ''}>
+          ${preguntaActual === preguntas.length - 1 ? 'Ver resultado' : 'Siguiente →'}
+        </button>
+      </div>
+    `;
+    html += `</div>`;
+
+    contenedorPreguntas.innerHTML = html;
+
+    // Event listeners de opciones
+    const opciones = contenedorPreguntas.querySelectorAll('.opcion-tarjeta');
+    opciones.forEach(opcion => {
+      opcion.addEventListener('click', () => {
+        const valor = opcion.dataset.valor;
+        respuestas[preguntaActual] = valor;
+
+        // Actualizar UI
+        opciones.forEach(o => o.classList.remove('seleccionada'));
+        opcion.classList.add('seleccionada');
+
+        // Habilitar botón siguiente
+        const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente');
+        if (btnSiguiente) btnSiguiente.disabled = false;
+      });
+    });
+
+    // Navegación
+    const btnAnterior = contenedorPreguntas.querySelector('.btn-anterior');
+    const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente');
+
+    if (btnAnterior) {
+      btnAnterior.addEventListener('click', () => {
+        if (preguntaActual > 0) {
+          preguntaActual--;
+          renderizarPregunta();
+        }
      });
    }

-// Función para seleccionar opción
-function seleccionarOpcion(letra) {
-  respuestas[preguntaActual] = letra;
-  
-  // Actualizar barra de progreso
-  const progreso = ((preguntaActual + 1) / preguntas.length) * 100;
-  document.getElementById('progreso-completado').style.width = `${progreso}%`;
-  
-  // Avanzar o mostrar resultado
+    if (btnSiguiente) {
+      btnSiguiente.addEventListener('click', () => {
+        if (respuestas[preguntaActual]) {
          if (preguntaActual < preguntas.length - 1) {
            preguntaActual++;
-    document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
            renderizarPregunta();
          } else {
            mostrarResultado();
          }
        }
-
-// Función para mostrar resultado
-function mostrarResultado() {
-  const perfilLetra = calcularPerfil(respuestas);
-  const perfil = perfiles[perfilLetra];
-  
-  // Ocultar cuestionario y barra de progreso
-  document.getElementById('cuestionario-contenedor').style.display = 'none';
-  document.querySelector('.progreso-barra').style.display = 'none';
-  document.getElementById('progreso-texto').style.display = 'none';
-  document.getElementById('btn-reiniciar').style.display = 'none';
-  
-  // Mostrar resultado
-  const resultadoContenedor = document.getElementById('resultado-contenedor');
-  resultadoContenedor.innerHTML = `
-    <h2 class="resultado-titulo">${perfil.titulo}</h2>
-    <p class="resultado-diagnostico">${perfil.diagnostico}</p>
-    <div class="resultado-solucion">
-      <strong>Solución Amor y Roma:</strong><br>
-      ${perfil.solucion}
-    </div>
-    <button class="resultado-cta">${perfil.cta}</button>
-  `;
-  resultadoContenedor.style.display = 'block';
-  
-  // Event listener al CTA (placeholder por ahora)
-  document.querySelector('.resultado-cta').addEventListener('click', () => {
-    alert('CTA - Por definir acción');
      });
    }
-
-// Función para reiniciar
-function reiniciarCuestionario() {
-  preguntaActual = 0;
-  respuestas = [];
-  
-  // Resetear barra de progreso
-  document.getElementById('progreso-completado').style.width = '0%';
-  document.getElementById('progreso-texto').textContent = 'Pregunta 1 de 4';
-  
-  // Mostrar elementos
-  document.getElementById('cuestionario-contenedor').style.display = 'block';
-  document.querySelector('.progreso-barra').style.display = 'block';
-  document.getElementById('progreso-texto').style.display = 'block';
-  document.getElementById('btn-reiniciar').style.display = 'inline-flex';
-  document.getElementById('resultado-contenedor').style.display = 'none';
-  
-  // Renderizar primera pregunta
-  renderizarPregunta();
  }

+  // Calcular y mostrar resultado
+  function mostrarResultado() {
+    // Contar frecuencia de cada valor
+    const conteo = {};
+    respuestas.forEach(valor => {
+      conteo[valor] = (conteo[valor] || 0) + 1;
+    });
+
+    // Obtener el valor más frecuente
+    let valorGanador = Object.keys(conteo).reduce((a, b) =>
+      conteo[a] > conteo[b] ? a : b
+    );
+
+    const resultadoData = resultados[valorGanador] || resultados.consultoria;
+
+    // Actualizar barra al 100%
+    barraCompletado.style.width = '100%';
+    textoProgreso.textContent = `Completado`;
+
+    // Ocultar quiz y mostrar resultado
+    quiz.style.display = 'none';
+    resultado.style.display = 'block';
+
+    resultado.innerHTML = `
+      <div class="resultado-encabezado">
+        <h3 class="resultado-titulo">${resultadoData.titulo}</h3>
+        <p class="resultado-subtitulo">Según tus respuestas, esto es lo que más te conviene:</p>
+      </div>
+      <p class="resultado-diagnostico">${resultadoData.diagnostico}</p>
+      <div class="resultado-solucion">
+        ${resultadoData.solucion}
+      </div>
+      <div class="resultado-acciones">
+        <a href="contacto.html" class="resultado-cta">
+          Hablemos sobre esto
+          <span aria-hidden="true">→</span>
+        </a>
+        <button class="btn-reiniciar" id="btn-reiniciar-resultado">
+          <span aria-hidden="true">↻</span>
+          Reiniciar diagnóstico
+        </button>
+      </div>
+    `;
+
+    // Event listener del botón reiniciar
+    const btnReiniciar = document.getElementById('btn-reiniciar-resultado');
+    if (btnReiniciar) {
+      btnReiniciar.addEventListener('click', () => {
+        resultado.style.display = 'none';
+        bienvenida.style.display = 'flex';
+        preguntaActual = 0;
+        respuestas.length = 0;
+        barraCompletado.style.width = '0%';
+      });
+    }
+  }
+}
+
+// Inicializar cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+  initDiagnostico();
+});
 /* ============================================
 ANIMACIÓN AUTOMÁTICA DE METODOLOGÍA
 ============================================ */
@@ -671,15 +729,9 @@ function initNavbarAutoHide() {

 // Inicializar cuestionario al cargar la página
 document.addEventListener('DOMContentLoaded', () => {
-  // Solo inicializar si estamos en la sección de diagnóstico
-  if (document.getElementById('cuestionario-contenedor')) {
-    renderizarPregunta();
-    
-    // Event listener al botón de reiniciar
-    document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
-  }
+  // Eliminar el bloque del diagnóstico (ya se maneja en initDiagnostico)
  initMetodologiaAnimation();
  initPlanesFocusEffect();
  initPortfolioCarousel();
-
+  initMarqueeHover(); // ← además, esta NUNCA se está llamando
 });
@@ -0,0 +1,74 @@
+/* ============================================
+   SELECTOR DE PLANES
+   ============================================ */
+function initPlanesSelector() {
+  const tabs = document.querySelectorAll('.plan-tab');
+  const pills = document.querySelectorAll('.plan-pill');
+  const panels = document.querySelectorAll('.plan-panel');
+
+  if (tabs.length === 0 || panels.length === 0) return;
+
+  function activarPlan(planId) {
+    // Desactivar todos los tabs y pills
+    tabs.forEach(tab => {
+      tab.classList.remove('active');
+      tab.setAttribute('aria-selected', 'false');
+    });
+    pills.forEach(pill => {
+      pill.classList.remove('active');
+      pill.setAttribute('aria-selected', 'false');
+    });
+
+    // Desactivar todos los panels
+    panels.forEach(panel => panel.classList.remove('active'));
+
+    // Activar el tab y pill correspondientes
+    const tabActivo = document.querySelector(`.plan-tab[data-plan="${planId}"]`);
+    const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`);
+    const panelActivo = document.getElementById(`panel-${planId}`);
+
+    if (tabActivo) {
+      tabActivo.classList.add('active');
+      tabActivo.setAttribute('aria-selected', 'true');
+    }
+    if (pillActivo) {
+      pillActivo.classList.add('active');
+      pillActivo.setAttribute('aria-selected', 'true');
+    }
+    if (panelActivo) {
+      panelActivo.classList.add('active');
+    }
+
+    // Scroll suave al panel
+    if (panelActivo) {
+      panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }
+
+  // Event listeners para tabs
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      const planId = tab.dataset.plan;
+      activarPlan(planId);
+    });
+  });
+
+  // Event listeners para pills
+  pills.forEach(pill => {
+    pill.addEventListener('click', () => {
+      const planId = pill.dataset.plan;
+      activarPlan(planId);
+    });
+  });
+
+  // Soporte para hash en URL (ej: planes.html#premium)
+  const hash = window.location.hash.replace('#', '');
+  if (hash && document.getElementById(`panel-${hash}`)) {
+    activarPlan(hash);
+  }
+}
+
+// Inicializar cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+  initPlanesSelector();
+});
@@ -4,6 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Servicios de Amor y Roma: gestión de redes, branding, desarrollo web, automatizaciones y paid media.">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <title>Servicios - Amor y Roma</title>
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="style/servicios.css">
@@ -301,7 +302,7 @@
    <section class="servicios-cta">
      <div class="servicios-cta-card">
        <h2 class="servicios-cta-titulo">¿No sabés cuál servicio necesitás?</h2>
-        <p class="servicios-cta-subtitulo">Hacé nuestro diagnóstico gratuito y te recomendamos la solución ideal para tu momento.</p>
+        <p class="servicios-cta-subtitle">Hacé nuestro diagnóstico gratuito y te recomendamos la solución ideal para tu momento.</p>
        <div class="servicios-cta-buttons">
          <a href="inicio.html#diagnostico" class="btn btn-cta-primary">Hacer el diagnóstico</a>
          <a href="contacto.html" class="btn btn-cta-secondary">Hablemos directamente</a>
@@ -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;
+  }
+}
@@ -0,0 +1,505 @@
+/* ============================================
+   SECCIÓN HERO DE CONTACTO
+   ============================================ */
+.contacto-hero {
+  min-height: auto;
+  padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md);
+  text-align: center;
+}
+
+.contacto-hero .hero-title {
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+}
+
+.icono-whatsapp-btn {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background-color: currentColor;
+  -webkit-mask-image: url("../assets/vectores/whatsapp.svg");
+  mask-image: url("../assets/vectores/whatsapp.svg");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+
+/* ============================================
+   SECCIÓN GRID: INFO + FORMULARIO
+   ============================================ */
+.contacto-grid-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-surface);
+}
+
+.contacto-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  gap: var(--spacing-lg);
+  max-width: 1200px;
+  margin: 0 auto;
+  align-items: start;
+}
+
+/* --- Columna Info --- */
+.contacto-info {
+  position: sticky;
+  top: calc(var(--header-height) + var(--spacing-md));
+  background-color: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: var(--spacing-md);
+}
+
+.contacto-info-titulo {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.8rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.contacto-info-texto {
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin-bottom: var(--spacing-md);
+}
+
+.contacto-canales {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.canal-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs);
+  border-radius: 12px;
+  transition: background-color 0.25s ease;
+}
+
+.canal-item:hover {
+  background-color: var(--bg-surface-elevated);
+}
+
+.canal-icono {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  background-color: var(--brand-crimson);
+  border-radius: 10px;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+.canal-email {
+  -webkit-mask-image: url("../assets/iconos/buzon.svg");
+  mask-image: url("../assets/iconos/buzon.svg");
+  background-color: var(--brand-teal);
+}
+.canal-whatsapp {
+  -webkit-mask-image: url("../assets/vectores/whatsapp.svg");
+  mask-image: url("../assets/vectores/whatsapp.svg");
+  background-color: #25D366;
+}
+.canal-instagram {
+  -webkit-mask-image: url("../assets/vectores/insta.svg");
+  mask-image: url("../assets/vectores/insta.svg");
+  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+}
+.canal-linkedin {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
+  background-color: #0A66C2;
+}
+
+.canal-contenido {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.canal-contenido strong {
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+}
+
+.canal-contenido a {
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.canal-contenido a:hover {
+  color: var(--brand-crimson);
+}
+
+.contacto-horario {
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--border);
+}
+
+.contacto-horario strong {
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  display: block;
+  margin-bottom: 4px;
+}
+
+.contacto-horario p {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+/* --- Columna Formulario --- */
+.contacto-form {
+  background-color: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: var(--spacing-md);
+}
+
+.contacto-form-titulo {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.8rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.contacto-form-subtitulo {
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-md);
+}
+
+.form-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.form-row-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-sm);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: var(--spacing-sm);
+}
+
+.form-group label {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.form-required {
+  color: var(--brand-crimson);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  background-color: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  transition: all 0.25s ease;
+  width: 100%;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--brand-crimson);
+  box-shadow: 0 0 0 3px rgba(186, 18, 77, 0.12);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.form-group select {
+  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 1rem center;
+  padding-right: 2.5rem;
+}
+
+[data-theme="dark"] .form-group select {
+  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='%23eaf0ee' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+}
+
+.form-consentimiento {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin: var(--spacing-sm) 0;
+  padding: var(--spacing-sm);
+  background-color: var(--bg-surface-elevated);
+  border-radius: 10px;
+}
+
+.form-consentimiento input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  accent-color: var(--brand-crimson);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.form-consentimiento label {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.btn-form-enviar {
+  width: 100%;
+  justify-content: center;
+  padding: 1rem 2rem;
+  font-size: 1rem;
+  margin-top: var(--spacing-xs);
+}
+
+.form-nota {
+  text-align: center;
+  margin-top: var(--spacing-sm);
+  color: var(--text-muted);
+}
+
+/* ============================================
+   SECCIÓN PROCESO (Qué pasa después)
+   ============================================ */
+.proceso-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.proceso-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1100px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.proceso-grid::before {
+  content: "";
+  position: absolute;
+  top: 40px;
+  left: 15%;
+  right: 15%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--border), var(--brand-crimson), var(--border), transparent);
+  z-index: 0;
+}
+
+.proceso-paso {
+  position: relative;
+  z-index: 1;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.proceso-paso:hover {
+  transform: translateY(-4px);
+  border-color: var(--brand-crimson);
+  box-shadow: var(--shadow);
+}
+
+.proceso-numero {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: var(--bg-surface);
+  border: 2px solid var(--brand-crimson);
+  color: var(--brand-crimson);
+  font-family: var(--font-title);
+  font-style: italic;
+  font-weight: 700;
+  font-size: 1.3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto var(--spacing-sm);
+  box-shadow: 0 4px 12px -2px rgba(186, 18, 77, 0.2);
+}
+
+.proceso-paso h3 {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.2rem;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.proceso-paso p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+/* ============================================
+   SECCIÓN NOTAS IMPORTANTES
+   ============================================ */
+.notas-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-surface);
+}
+
+.notas-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.nota-item {
+  padding: var(--spacing-md);
+  border-left: 3px solid var(--brand-teal);
+  background-color: var(--bg-base);
+  border-radius: 0 12px 12px 0;
+}
+
+.nota-item strong {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.1rem;
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: var(--spacing-xs);
+}
+
+.nota-item p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+/* ============================================
+   RESPONSIVE CONTACTO
+   ============================================ */
+@media (max-width: 968px) {
+  .contacto-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+  }
+
+  .contacto-info {
+    position: static;
+    order: 2;
+  }
+
+  .contacto-form {
+    order: 1;
+  }
+
+  .proceso-grid {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+
+  .proceso-grid::before {
+    display: none;
+  }
+
+  .notas-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .contacto-hero {
+    padding: var(--spacing-lg) var(--spacing-sm);
+  }
+
+  .contacto-grid-section,
+  .proceso-section,
+  .notas-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+
+  .form-row-2 {
+    grid-template-columns: 1fr;
+  }
+
+  .contacto-form,
+  .contacto-info {
+    padding: var(--spacing-sm);
+  }
+
+  .contacto-info-titulo,
+  .contacto-form-titulo {
+    font-size: 1.5rem;
+  }
+
+  .btn-form-enviar {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-cta-group {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .hero-cta-group .btn {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .proceso-paso,
+  .canal-item,
+  .form-group input,
+  .form-group select,
+  .form-group textarea {
+    transition: none;
+  }
+}
@@ -0,0 +1,764 @@
+/* ============================================
+   HEADER, MENÚ Y FOOTER (Base)
+   ============================================ */
+#menu-container { position: sticky; top: 0; z-index: 100; }
+.site-header {
+  background-color: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-sm);
+  box-shadow: var(--shadow);
+  transition: transform 0.35s ease, box-shadow 0.35s ease;
+}
+.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
+.main-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
+.logo { display: flex; align-items: center; }
+.logo img { height: 40px; width: auto; }
+.logo-light { display: block; }
+.logo-dark { display: none; }
+[data-theme="dark"] .logo-light { display: none; }
+[data-theme="dark"] .logo-dark { display: block; }
+
+/* (Se omiten estilos intermedios del menú por brevedad, asumo que ya los tienes en tu archivo original. 
+   Si necesitas el bloque completo del menú, avísame, pero se mantiene intacto tu CSS original aquí). */
+
+.site-footer {
+  border-top: 1px solid var(--border);
+  padding-top: var(--spacing-lg);
+  margin-top: auto;
+  background-color: var(--bg-surface);
+}
+.footer-bottom {
+  border-top: 1px solid var(--border);
+  padding: var(--spacing-sm);
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  background-color: var(--bg-surface);
+  font-family: 'Jost', sans-serif;
+}
+
+/* ============================================
+   COMPONENTES REUTILIZABLES
+   ============================================ */
+.btn {
+  display: inline-block; padding: 0.85rem 2rem; border-radius: 999px;
+  font-family: var(--font-small); font-weight: 600; font-size: 0.95rem;
+  text-align: center; cursor: pointer; transition: all 0.3s ease; text-decoration: none;
+}
+.btn-primary {
+  background-color: var(--btn-primary-bg); color: var(--text-on-accent);
+  border: 1.5px solid var(--btn-primary-bg);
+  box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
+}
+.btn-primary:hover {
+  background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover);
+  color: var(--text-on-accent); transform: translateY(-2px);
+  box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
+}
+.btn-secondary {
+  background-color: transparent; color: var(--text-primary);
+  border: 1.5px solid var(--text-secondary);
+}
+.btn-secondary:hover {
+  background-color: var(--bg-surface-elevated); border-color: var(--btn-primary-bg);
+  color: var(--btn-primary-bg); transform: translateY(-2px);
+}
+
+/* ============================================
+   SECCIÓN HERO (Adaptada para Nosotros)
+   ============================================ */
+.hero-section {
+  min-height: calc(100vh - var(--header-height));
+  background-color: var(--bg-base);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+}
+.hero-content {
+  max-width: 900px; width: 100%;
+  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md);
+}
+.hero-title {
+  font-family: var(--font-title); font-style: italic; font-weight: 700;
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  line-height: 1.1; color: var(--text-primary);
+  opacity: 0; transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.2s forwards;
+}
+.hero-subtitle {
+  font-family: var(--font-title); font-style: italic; font-weight: 400;
+  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
+  line-height: 1.5; color: var(--text-muted);
+  max-width: 750px;
+  opacity: 0; transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.5s forwards;
+}
+.hero-cta-group {
+  display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center;
+  margin-top: var(--spacing-sm);
+  opacity: 0; transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.8s forwards;
+}
+.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; margin-bottom: var(--spacing-xs);
+  opacity: 0; animation: fadeInUp 0.9s ease-out 0s forwards;
+}
+
+@keyframes fadeInUp {
+  0% { opacity: 0; transform: translateY(30px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================
+   ESTILOS ESPECÍFICOS: PÁGINA NOSOTROS
+   ============================================ */
+
+/* Encabezados de sección genéricos */
+.section-header {
+  text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg);
+  padding: 0 var(--spacing-sm);
+}
+.section-title {
+  font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary);
+  margin-bottom: var(--spacing-sm); line-height: 1.15;
+}
+.section-subtitle {
+  font-family: var(--font-body); font-size: 1.1rem;
+  color: var(--text-muted); line-height: 1.6;
+}
+
+/* --- DUALIDAD --- */
+.dualidad-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-surface);
+}
+.dualidad-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md);
+  max-width: 1200px; margin: 0 auto;
+}
+.dualidad-card {
+  background-color: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+.dualidad-card:hover {
+  transform: translateY(-5px);
+  box-shadow: linear-gradient(90deg, var(--brand-crimson), var(--brand-teal));
+  border-color: var(--brand-rose-muted);
+}
+.dualidad-card h3 {
+  font-size: 2.5rem; margin: var(--spacing-sm) 0;
+  color: var(--text-primary);
+}
+.card-amor h3 { color: var(--brand-crimson); }
+.card-roma h3 { color: var(--brand-teal); }
+
+.card-tag {
+  display: inline-block; font-family: var(--font-small);
+  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 1px; color: var(--text-muted); margin-bottom: var(--spacing-sm);
+}
+.dualidad-card p {
+  font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; max-width: 450px; margin: 0 auto;
+}
+.card-icon {
+  width: 64px; height: 64px; margin: 0 auto;
+  background-color: currentColor;
+  -webkit-mask-size: contain; mask-size: contain;
+  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
+  -webkit-mask-position: center; mask-position: center;
+}
+/* Nota: Reemplaza estas URLs con tus iconos reales de amor/corazón y columna/roma */
+.icon-amor { 
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); 
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
+  color: var(--brand-crimson);
+}
+.icon-roma { 
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z'/%3E%3C/svg%3E"); 
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z'/%3E%3C/svg%3E");
+  color: var(--brand-teal);
+}
+
+/* --- PRINCIPIOS --- */
+.principios-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+.principios-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);
+  max-width: 1200px; margin: 0 auto;
+}
+.principio-item {
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  position: relative;
+  transition: all 0.3s ease;
+}
+.principio-item:hover {
+  border-color: var(--brand-teal);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow);
+}
+.principio-numero {
+  font-family: var(--font-title); font-style: italic;
+  font-size: 3rem; font-weight: 700; color: var(--brand-rose-muted);
+  line-height: 1; margin-bottom: var(--spacing-xs);
+}
+.principio-item h4 {
+  font-family: var(--font-title); font-style: italic;
+  font-size: 1.3rem; color: var(--text-primary); margin-bottom: var(--spacing-xs);
+}
+.principio-item p {
+  font-size: 0.95rem; color: var(--text-muted); line-height: 1.6;
+}
+
+/* ============================================
+   SECCIÓN CASOS TESTIGO (VERSIÓN SIMÉTRICA)
+   ============================================ */
+.casos-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.casos-grid-simetrico {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.caso-card {
+  position: relative;
+  background-color: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  min-height: 320px;
+  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 {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson));
+  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 {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12);
+  border-color: var(--brand-teal);
+}
+
+.caso-card:hover::before {
+  opacity: 1;
+}
+
+/* Arquetipo 3 - Insígnia (Destacado pero simétrico) */
+.caso-insignia {
+  border-color: var(--brand-crimson);
+  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-elevated) 100%);
+  box-shadow: 0 8px 24px -8px rgba(186, 18, 77, 0.15);
+}
+
+.caso-insignia::before {
+  opacity: 1;
+  background: linear-gradient(90deg, var(--brand-crimson), var(--brand-rose-muted));
+}
+
+.caso-insignia:hover {
+  box-shadow: 0 16px 40px -10px rgba(186, 18, 77, 0.25);
+  transform: translateY(-6px);
+}
+
+.caso-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+}
+
+.caso-badge {
+  display: inline-block;
+  width: fit-content;
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 0.3rem 0.8rem;
+  border-radius: 999px;
+  background-color: var(--badge-bg);
+  color: var(--badge-text);
+}
+
+.caso-badge-insignia {
+  background-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+  box-shadow: 0 2px 8px -2px rgba(186, 18, 77, 0.3);
+}
+
+.caso-titulo {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.5rem;
+  color: var(--text-primary);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.caso-descripcion {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--brand-sage-light);
+  line-height: 1.6;
+    flex: 1;
+}
+
+.caso-leccion {
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  padding: var(--spacing-xs);
+  padding-left: var(--spacing-sm);
+  border-left: 3px solid var(--brand-teal);
+  background-color: var(--bg-surface-elevated);
+  border-radius: 0 8px 8px 0;
+  margin-top: auto;
+}
+
+.caso-leccion strong {
+  color: var(--text-primary);
+  font-family: var(--font-small);
+  font-weight: 600;
+}
+
+.caso-leccion-insignia {
+  border-left-color: var(--brand-crimson);
+  background-color: rgba(186, 18, 77, 0.05);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .casos-grid-simetrico {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+  
+  .caso-card {
+    min-height: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .casos-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .caso-card {
+    padding: var(--spacing-sm);
+  }
+  
+  .caso-titulo {
+    font-size: 1.3rem;
+  }
+}
+
+/* --- CTA FINAL (Reutiliza y refuerza tu base) --- */
+.cta-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+.cta-card {
+  max-width: 900px; margin: 0 auto;
+  background-color: var(--brand-teal);
+  border-radius: 24px; padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center; position: relative; overflow: hidden;
+  box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4);
+}
+.cta-card::before, .cta-card::after {
+  content: ""; position: absolute; width: 300px; height: 300px;
+  border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none;
+}
+.cta-card::before { top: -100px; left: -100px; background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); }
+.cta-card::after { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); }
+
+.cta-title {
+  font-family: var(--font-title); font-style: italic;
+  font-size: clamp(2rem, 4vw, 3rem); color: #ffffff;
+  margin-bottom: var(--spacing-sm); line-height: 1.15; position: relative; z-index: 1;
+}
+.cta-subtitle {
+  font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem);
+  color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--spacing-md);
+  line-height: 1.6; position: relative; z-index: 1;
+}
+.cta-buttons {
+  display: flex; justify-content: center; gap: var(--spacing-sm);
+  flex-wrap: wrap; position: relative; z-index: 1;
+}
+.btn-cta-primary {
+  background-color: #ffffff; color: var(--brand-teal); border: 1.5px solid #ffffff;
+  padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
+  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
+  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2);
+}
+.btn-cta-primary:hover {
+  background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson);
+  transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
+}
+.btn-cta-secondary {
+  background-color: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6);
+  padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
+  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
+}
+.btn-cta-secondary:hover {
+  background-color: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px);
+}
+/* ============================================
+   SECCIÓN TRANSPARENCIA
+   ============================================ */
+.transparencia-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.transparencia-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.transparencia-card {
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.transparencia-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, var(--brand-crimson), var(--brand-teal));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.4s ease;
+}
+
+.transparencia-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
+  border-color: transparent;
+}
+
+.transparencia-card:hover::before {
+  transform: scaleX(1);
+}
+
+.transparencia-icono {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto var(--spacing-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--bg-surface-elevated);
+  border: 2px solid var(--border);
+  color: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.transparencia-card:hover .transparencia-icono {
+  border-color: var(--brand-crimson);
+  color: var(--brand-crimson);
+  transform: scale(1.1);
+}
+
+.transparencia-titulo {
+  font-family: var(--font-body);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-sm);
+}
+
+.transparencia-dato {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(1.5rem, 3vw, 1rem);
+  font-weight: 500;
+  color: var(--brand-teal-contraste);
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.2;
+}
+
+.transparencia-texto {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  line-height: 1.7;
+}
+
+.transparencia-texto strong {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* Responsive Transparencia */
+@media (max-width: 968px) {
+  .transparencia-grid {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+  
+  .transparencia-card {
+    padding: var(--spacing-md);
+  }
+}
+
+@media (max-width: 480px) {
+  .transparencia-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .transparencia-icono {
+    width: 64px;
+    height: 64px;
+  }
+  
+  .transparencia-dato {
+    font-size: 1.3rem;
+  }
+}
+
+/* ============================================
+   SECCIÓN QUIÉNES SOMOS / EQUIPO
+   ============================================ */
+.equipo-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+/* Título con gradiente en la palabra destacada */
+.text-gradient {
+  background: linear-gradient(90deg, var(--brand-crimson) 0%, var(--brand-teal) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: italic;
+}
+
+.equipo-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-md);
+  max-width: 1100px;
+  margin: 0 auto var(--spacing-md);
+}
+
+.equipo-card {
+  background-color: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 20px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+  min-height: 320px;
+  justify-content: center;
+}
+
+.equipo-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, var(--glow-animation) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.equipo-card:hover {
+  transform: translateY(-6px);
+  border-color: var(--brand-crimson);
+  box-shadow: 0 20px 40px -10px rgba(186, 18, 77, 0.2);
+}
+
+.equipo-card:hover::before {
+  opacity: 0.3;
+}
+
+/* Firma / Nombre en tipografía script */
+.equipo-firma {
+  font-family: var(--font-signature2);
+  font-weight: 400;
+  font-size: clamp(2.2rem, 4vw, 3rem);
+  color: var(--text-primary);
+  line-height: 1.1;
+  margin-bottom: var(--spacing-xs);
+}
+
+/* Rol / Especialidad */
+.equipo-rol {
+  font-family: var(--font-small);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background-color: var(--bg-surface-elevated);
+}
+
+/* Descripción */
+.equipo-descripcion {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  max-width: 380px;
+  margin-top: var(--spacing-xs);
+}
+
+/* Texto final de colaboradores */
+.equipo-colaboradores {
+  text-align: center;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: var(--text-muted);
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.6;
+  font-style: italic;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .equipo-grid {
+    grid-template-columns: 1fr;
+    max-width: 500px;
+  }
+
+  .equipo-card {
+    padding: var(--spacing-md);
+    min-height: auto;
+  }
+
+  .equipo-firma {
+    font-size: 2.2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .equipo-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+
+  .equipo-firma {
+    font-size: 1.9rem;
+  }
+
+  .equipo-rol {
+    font-size: 0.7rem;
+    letter-spacing: 1.5px;
+  }
+
+  .equipo-descripcion {
+    font-size: 0.95rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .equipo-card, .equipo-card::before {
+    transition: none;
+  }
+}
+
+/* ============================================
+   RESPONSIVE (MEDIA QUERIES)
+   ============================================ */
+@media (max-width: 1024px) {
+  .workflow-grid { grid-template-columns: repeat(3, 1fr); }
+  .workflow-grid::before { display: none; } /* Ocultar línea en tablet */
+}
+
+@media (max-width: 968px) {
+  .dualidad-grid { grid-template-columns: 1fr; }
+  .principios-grid { grid-template-columns: 1fr; max-width: 500px; }
+  .casos-grid { grid-template-columns: 1fr; }
+  .caso-card.featured { grid-column: span 1; grid-template-columns: 1fr; }
+}
+
+@media (max-width: 768px) {
+  .hero-section { padding: var(--spacing-md) var(--spacing-sm); min-height: auto; padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
+  .section-title { font-size: 1.75rem; }
+  .workflow-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
+  .workflow-step { flex-direction: row; text-align: left; gap: var(--spacing-sm); align-items: flex-start; }
+  .step-number { flex-shrink: 0; margin-bottom: 0; width: 40px; height: 40px; font-size: 1rem; }
+  .cta-buttons { flex-direction: column; align-items: center; }
+  .btn-cta-primary, .btn-cta-secondary { width: 100%; max-width: 320px; }
+}
+
+@media (max-width: 480px) {
+  .dualidad-card, .principio-item, .caso-card { padding: var(--spacing-sm); }
+  .dualidad-card h3 { font-size: 2rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-title, .hero-subtitle, .hero-cta-group, .badge-filosofia { animation: none; opacity: 1; transform: none; }
+  .dualidad-card, .principio-item, .workflow-step, .caso-card, .btn, .btn-cta-primary, .btn-cta-secondary { transition: none; }
+}
@@ -0,0 +1,728 @@
+/* ============================================
+   PLANES - HERO
+   ============================================ */
+.planes-hero {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.planes-hero::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 600px;
+  height: 600px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--glow-animation) 0%, transparent 70%);
+  filter: blur(60px);
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.planes-hero-content {
+  max-width: 800px;
+  position: relative;
+  z-index: 1;
+}
+
+.planes-hero-tag {
+  font-family: var(--font-small);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: var(--brand-crimson);
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--brand-crimson);
+  border-radius: 999px;
+  margin-bottom: var(--spacing-md);
+}
+
+.planes-hero-title {
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  color: var(--text-primary);
+  line-height: 1.15;
+  margin-bottom: var(--spacing-sm);
+}
+
+.planes-hero-subtitle {
+  font-size: clamp(1rem, 2vw, 1.2rem);
+  color: var(--text-muted);
+  max-width: 600px;
+  margin: 0 auto var(--spacing-md);
+  line-height: 1.6;
+}
+
+.planes-hero-cta {
+  display: inline-block;
+}
+
+/* ============================================
+   PLANES - SELECTOR (TABS + PILLS)
+   ============================================ */
+.planes-selector-section {
+  padding: var(--spacing-sm) var(--spacing-xs);
+  background-color: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.planes-selector-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Tabs desktop */
+.planes-tabs {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.plan-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.9rem 1.8rem;
+  background: transparent;
+  border: 1.5px solid var(--border);
+  border-radius: 16px;
+  cursor: pointer;
+  font-family: var(--font-small);
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+  min-width: 140px;
+}
+
+.plan-tab:hover {
+  border-color: var(--brand-crimson);
+  color: var(--brand-crimson);
+  transform: translateY(-2px);
+}
+
+.plan-tab.active {
+  background-color: var(--brand-crimson);
+  border-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+  box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
+}
+
+.tab-label {
+  font-size: 0.95rem;
+}
+
+.tab-precio {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+/* Pills mobile */
+.planes-pills {
+  display: none;
+  overflow-x: auto;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  scrollbar-width: none;
+}
+
+.planes-pills::-webkit-scrollbar {
+  display: none;
+}
+
+.plan-pill {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.7rem 1.2rem;
+  background: var(--bg-surface-elevated);
+  border: 1.5px solid var(--border);
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: var(--font-small);
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+}
+
+.plan-pill.active {
+  background-color: var(--brand-crimson);
+  border-color: var(--brand-crimson);
+  color: var(--text-on-accent);
+}
+
+.pill-precio {
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+/* ============================================
+   PLANES - PANEL DE CONTENIDO
+   ============================================ */
+.planes-panel-section {
+  padding: var(--spacing-md) var(--spacing-md);
+  background-color: var(--bg-base);
+  min-height: 600px;
+}
+
+.planes-panel-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.plan-panel {
+  display: none;
+  background-color: var(--bg-surface);
+  border-radius: 16px;
+  padding: var(--spacing-sm);
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  animation: slideInPanel 0.5s ease-out;
+}
+
+.plan-panel.active {
+  display: block;
+}
+
+@keyframes slideInPanel {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Header del panel */
+.panel-header {
+  margin-bottom: var(--spacing-sm);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+}
+
+.panel-categoria {
+  font-family: var(--font-small);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  display: inline-block;
+  padding: 0.3rem 0.8rem;
+  background-color: var(--badge-bg);
+  color: var(--badge-text);
+  border-radius: 999px;
+  margin-bottom: var(--spacing-xs);
+}
+
+.panel-titulo {
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+  line-height: 1.2;
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out 0.1s forwards;
+}
+
+.panel-subtitulo {
+  font-size: 1rem;
+  color: var(--text-muted);
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.5;
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out 0.2s forwards;
+}
+
+/* Grid de Dimensiones */
+.panel-grid-dimensiones {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-xs);
+}
+
+.dimension-card {
+  position: relative; /* Necesario para posicionar el icono decorativo */
+  background-color: var(--bg-surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: var(--spacing-sm);
+  /*padding-top: 3.5rem;*/
+  transition: all 0.3s ease;
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out 0.3s forwards;
+  overflow: hidden; /* Para que el icono no se salga */
+}
+
+.dimension-card:hover {
+  border-color: var(--brand-crimson);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+
+/* Icono decorativo en esquina superior derecha */
+.dimension-icon-deco {
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-sm);
+  transform: translateY(-50%);
+  width: 80px; /* Más grande para que se vea como marca de agua */
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Sin fondo ni border-radius */
+  background-color: transparent;
+  opacity: 0.08; /* Muy sutil, casi transparente */
+  color: var(--brand-crimson);
+  font-size: 3rem; /* Icono grande */
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Título sin icono inline */
+.dimension-titulo {
+  font-family: var(--font-subtitle);
+  font-size: 1.1rem; /* Un poco más grande ahora que tiene espacio */
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+  font-style: italic;
+  line-height: 1.2;
+  padding-right: 3.5rem; /* Espacio para que no se superponga con el icono */
+}
+
+.dimension-lista {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.dimension-lista li {
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  line-height: 1.35;
+}
+
+.dimension-lista li i {
+  flex-shrink: 0;
+  margin-top: 0.15rem;
+  font-size: 0.75rem;
+}
+
+.dimension-lista .fa-check {
+  color: var(--btn-secondary-hover);
+}
+
+.dimension-lista .fa-times {
+  color: var(--brand-crimson);
+  opacity: 0.6;
+}
+
+.dimension-lista .fa-info-circle {
+  color: var(--brand-rose-muted);
+}
+
+/* Tarjeta de Precio */
+.panel-precio-card {
+  background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-plum) 100%);
+  border-radius: 12px;
+  padding: var(--spacing-sm);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out 0.5s forwards;
+}
+
+.precio-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.precio-label {
+  font-family: var(--font-small);
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.85);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.precio-valor {
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+  color: #ffffff;
+}
+
+.precio-moneda {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.precio-monto {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: var(--font-title);
+}
+
+.precio-periodo {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.btn-contratar {
+  padding: 0.7rem 1.8rem;
+  background-color: #ffffff;
+  color: var(--brand-teal);
+  border: none;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2);
+}
+
+.btn-contratar:hover {
+  background-color: var(--brand-crimson);
+  color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
+}
+
+/* ============================================
+   PLANES - TABLA COMPARATIVA
+   ============================================ */
+.planes-comparativa-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.comparativa-container {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.comparativa-header {
+  text-align: center;
+  margin-bottom: var(--spacing-md);
+}
+
+.comparativa-titulo {
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.comparativa-subtitulo {
+  font-size: 1.1rem;
+  color: var(--text-muted);
+}
+
+.comparativa-table-wrapper {
+  overflow-x: auto;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+}
+
+.comparativa-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--bg-surface);
+  min-width: 700px;
+}
+
+.comparativa-table thead {
+  background-color: var(--bg-surface-elevated);
+}
+
+.comparativa-table th {
+  padding: var(--spacing-sm) var(--spacing-md);
+  text-align: center;
+  font-family: var(--font-small);
+  font-weight: 700;
+  color: var(--text-primary);
+  border-bottom: 2px solid var(--border);
+}
+
+.col-caracteristica {
+  text-align: left;
+  font-weight: 600;
+}
+
+.comparativa-table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+}
+
+.caracteristica-nombre {
+  text-align: left;
+  font-weight: 500;
+}
+
+.comparativa-table .fa-check {
+  color: var(--brand-teal);
+  font-size: 1.1rem;
+}
+
+.comparativa-table .fa-times {
+  color: var(--brand-crimson);
+  opacity: 0.6;
+}
+
+.comparativa-table .fa-minus {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+.row-precio {
+  background-color: var(--bg-surface-elevated);
+  font-weight: 700;
+}
+
+.precio-celda {
+  font-family: var(--font-title);
+  color: var(--brand-crimson);
+  font-size: 1.1rem;
+}
+
+/* ============================================
+   PLANES - CTA FINAL
+   ============================================ */
+.planes-cta {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.planes-cta-card {
+  max-width: 900px;
+  margin: 0 auto;
+  background-color: var(--brand-teal);
+  border-radius: 24px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4);
+}
+
+.planes-cta-card::before,
+.planes-cta-card::after {
+  content: "";
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.planes-cta-card::before {
+  top: -100px;
+  left: -100px;
+  background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%);
+}
+
+.planes-cta-card::after {
+  bottom: -100px;
+  right: -100px;
+  background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%);
+}
+
+.planes-cta-titulo {
+  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
+  color: #ffffff;
+  margin-bottom: var(--spacing-sm);
+  position: relative;
+  z-index: 1;
+}
+
+.planes-cta-subtitle {
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.85);
+  max-width: 600px;
+  margin: 0 auto var(--spacing-md);
+  position: relative;
+  z-index: 1;
+}
+
+.planes-cta-buttons {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
+}
+
+.btn-cta-primary {
+  background-color: #ffffff;
+  color: var(--brand-teal);
+  border: 1.5px solid #ffffff;
+  padding: 0.85rem 2rem;
+  border-radius: 999px;
+  font-family: var(--font-small);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-cta-primary:hover {
+  background-color: var(--brand-crimson);
+  color: #ffffff;
+  border-color: var(--brand-crimson);
+  transform: translateY(-2px);
+}
+
+.btn-cta-secondary {
+  background-color: transparent;
+  color: #ffffff;
+  border: 1.5px solid rgba(255, 255, 255, 0.6);
+  padding: 0.85rem 2rem;
+  border-radius: 999px;
+  font-family: var(--font-small);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-cta-secondary:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: #ffffff;
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   PLANES - CIERRE
+   ============================================ */
+.planes-cierre {
+  height: var(--spacing-md);
+}
+
+/* ============================================
+   RESPONSIVE PLANES
+   ============================================ */
+@media (max-width: 968px) {
+  .panel-grid-dimensiones {
+    grid-template-columns: 1fr;
+  }
+  
+  .panel-precio-card {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .planes-hero {
+    min-height: 60vh;
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+
+  .planes-tabs {
+    display: none;
+  }
+
+  .planes-pills {
+    display: flex;
+  }
+
+  .planes-panel-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+
+  .plan-panel {
+    padding: var(--spacing-md);
+  }
+
+  .dimension-card {
+    padding: var(--spacing-sm);
+  }
+
+  .dimension-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+  }
+
+  .precio-monto {
+    font-size: 2rem;
+  }
+
+  .comparativa-table-wrapper {
+    border-radius: 8px;
+  }
+
+  .comparativa-table th,
+  .comparativa-table td {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.85rem;
+  }
+
+  .planes-cta-card {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+}
+
+@media (max-width: 480px) {
+  .planes-hero-title {
+    font-size: 1.8rem;
+  }
+
+  .plan-panel {
+    padding: var(--spacing-sm);
+  }
+
+  .panel-titulo {
+    font-size: 1.5rem;
+  }
+
+  .dimension-titulo {
+    font-size: 1rem;
+  }
+
+  .precio-monto {
+    font-size: 1.8rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .plan-panel,
+  .panel-titulo,
+  .panel-subtitulo,
+  .dimension-card,
+  .panel-precio-card {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
@@ -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;
 }
Author	SHA1	Message	Date
ppugliese	cd67fca3dc	nosotros + blog en curso	2026-09-20 11:18:14 -03:00
ppugliese	2a0cfbde0e	estructura de nosotros y contacto	2026-09-20 08:28:34 -03:00