estructura de nosotros y contacto

2026-09-20 08:28:34 -03:00
parent c193e4acd9
commit 2a0cfbde0e
13 changed files with 4194 additions and 1939 deletions
@@ -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>
+    <!-- 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: 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>
+    <!-- SECCIÓN 2: INFO + FORMULARIO -->
+    <section id="formulario-contacto" class="contacto-grid-section">
+      <div class="contacto-grid">
        
-        <label for="contact-email">Email</label>
-        <input type="email" id="contact-email" name="email" required>
+        <!-- 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>

-        <label for="contact-phone">Teléfono (opcional)</label>
-        <input type="tel" id="contact-phone" name="phone">
+          <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>

-        <label for="contact-subject">Asunto</label>
-        <input type="text" id="contact-subject" name="subject" required>
+          <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>

-        <label for="contact-message">Mensaje</label>
-        <textarea id="contact-message" name="message" rows="5" required></textarea>
+        <!-- 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>

-        <button type="submit">Enviar mensaje</button>
-      </form>
+          <!-- 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: 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>
+    <!-- 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: 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
-      </a>
+    <!-- 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,32 +133,52 @@
    <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">
-        <!-- Barra de Progreso -->
-        <div class="progreso-wrapper">
-          <div class="progreso-barra">
-            <div class="progreso-barra-completado" id="progreso-completado"></div>
+
+        <!-- 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>
-          <div class="progreso-texto" id="progreso-texto">Pregunta 1 de 4</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> 2 minutos</li>
+            <li><span class="detalle-icono">🎯</span> Recomendación personalizada</li>
+            <li><span class="detalle-icono">💬</span> 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>

-        <!-- Contenedor de Preguntas -->
-        <div id="cuestionario-contenedor">
-          <!-- Las preguntas se generan dinámicamente con JavaScript -->
+        <!-- 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">
+              <div class="progreso-barra-completado" id="progreso-completado"></div>
+            </div>
+            <div class="progreso-texto" id="progreso-texto">Pregunta 1 de 4</div>
+          </div>
+
+          <!-- Contenedor de Preguntas -->
+          <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="style/main.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>
+      <h3 class="transparencia-titulo">INVERSIÓN</h3>
+      <p class="transparencia-dato">Desde $250.000/mes</p>
+      <p class="transparencia-texto">
+        Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
+      </p>
+    </article>
+
+    <!-- Tarjeta 2: TIEMPOS -->
+    <article class="transparencia-card">
+      <div class="transparencia-icono">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
+          <path d="M12 6v6l4 2" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <h3 class="transparencia-titulo">TIEMPOS</h3>
+      <p class="transparencia-dato">15-30 días</p>
+      <p class="transparencia-texto">
+        Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
+      </p>
+    </article>
+
+    <!-- Tarjeta 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>
+      <h3 class="transparencia-titulo">CONTRATO</h3>
+      <p class="transparencia-dato">3 meses · luego mensual</p>
+      <p class="transparencia-texto">
+        Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
+      </p>
+    </article>
+  </div>
+</section>
+
+<!-- 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>
+  <link rel="stylesheet" href="style/nosotros.css">
 </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>
@@ -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
-const preguntas = [
-  {
-    id: 1,
-    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." }
-    ]
-  },
-  {
-    id: 2,
-    titulo: "¿Cuál es tu cuello de botella más urgente hoy?",
-    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." }
-    ]
-  },
-  {
-    id: 3,
-    titulo: "¿Con qué infraestructura digital cuentas actualmente?",
-    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." }
-    ]
-  },
-  {
-    id: 4,
-    titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?",
-    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)." }
-    ]
-  }
-];
+  if (!bienvenida || !quiz || !resultado || !btnComenzar) return;

-// 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"
-  },
-  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"
-  },
-  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"
-  },
-  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"
-  },
-  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"
-  },
-  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"
-  }
-};
+  // Banco de preguntas
+  const preguntas = [
+    {
+      id: 1,
+      titulo: '¿En qué etapa se encuentra hoy tu negocio o proyecto?',
+      opciones: [
+        { 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 mayor desafío actual en marketing?',
+      opciones: [
+        { 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: '¿Qué objetivo prioritario tenés para los próximos 6 meses?',
+      opciones: [
+        { 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: '¿Cómo describirías tu inversión actual en marketing?',
+      opciones: [
+        { 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' }
+      ]
+    }
+  ];

-// Estado del cuestionario
-let preguntaActual = 0;
-let respuestas = [];
+  // 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.'
+    },
+    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.'
+    },
+    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.'
+    },
+    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.'
+    },
+    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.'
+    },
+    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.'
+    }
+  };

-// Función para calcular el perfil
-function calcularPerfil(respuestas) {
-  const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 };
+  // Estado
+  let preguntaActual = 0;
+  const respuestas = [];

-  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)
+  // Renderizar pregunta actual
+  function renderizarPregunta() {
+    const pregunta = preguntas[preguntaActual];
+    const progreso = ((preguntaActual) / preguntas.length) * 100;

-  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;
-      }
+    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.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();
+        }
+      });
+    }
+
+    if (btnSiguiente) {
+      btnSiguiente.addEventListener('click', () => {
+        if (respuestas[preguntaActual]) {
+          if (preguntaActual < preguntas.length - 1) {
+            preguntaActual++;
+            renderizarPregunta();
+          } else {
+            mostrarResultado();
+          }
+        }
+      });
    }
  }

-  return ganador;
-}
+  // Calcular y mostrar resultado
+  function mostrarResultado() {
+    // Contar frecuencia de cada valor
+    const conteo = {};
+    respuestas.forEach(valor => {
+      conteo[valor] = (conteo[valor] || 0) + 1;
+    });

-// Función para renderizar pregunta
-function renderizarPregunta() {
-  const contenedor = document.getElementById('cuestionario-contenedor');
-  const pregunta = preguntas[preguntaActual];
+    // Obtener el valor más frecuente
+    let valorGanador = Object.keys(conteo).reduce((a, b) =>
+      conteo[a] > conteo[b] ? a : b
+    );

-  contenedor.innerHTML = `
-    <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('')}
+    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>
-    </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>
+    `;

-  // Agregar event listeners a las opciones
-  document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
-    tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
-  });
-}
-
-// 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 (preguntaActual < preguntas.length - 1) {
-    preguntaActual++;
-    document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
-    renderizarPregunta();
-  } else {
-    mostrarResultado();
+    // 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%';
+      });
+    }
  }
 }

-// 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();
-}
-
+// 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,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,858 @@
+/* ============================================
+   FUENTES DE MARCA
+   ============================================ */
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
+
+/* ============================================
+   VARIABLES DE TEMA (modo claro por defecto)
+   ============================================ */
+:root {
+  --brand-plum: #170c1d;
+  --brand-crimson: #ba124d;
+  --brand-teal: #003f52;
+  --brand-sage-light: #eaf0ee;
+  --brand-rose-muted: #dfbdb9;
+  --bg-dark-web: #110916;
+  --brand-teal-contraste: var(--brand-teal);
+  --brand-crimson-contraste: var(--brand-crimson);
+
+  --bg-base: var(--brand-sage-light);
+  --bg-surface: #ffffff;
+  --bg-surface-elevated: #f5f9f8;
+  --bg-icon-contrast: var(--brand-teal);
+
+  --text-primary: var(--brand-plum);
+  --text-secondary: var(--brand-teal);
+  --text-muted: rgba(34, 23, 40, 0.65);
+  --text-on-accent: #ffffff;
+
+  --btn-primary-bg: var(--brand-crimson);
+  --btn-primary-hover: #9c0f40;
+  --btn-secondary-bg: var(--brand-teal);
+  --btn-secondary-hover: #002c3a;
+
+  --badge-bg: var(--brand-rose-muted);
+  --badge-text: var(--brand-plum);
+
+  --border: rgba(0, 63, 82, 0.12);
+  --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08);
+  --glow-animation: rgba(186, 18, 77, 0.25);
+  --bg-contraste-teal: rgba(0,63,82, 1);
+
+  --font-title: 'Literata', serif;
+  --font-subtitle: 'Literata', serif;
+  --font-body: 'Raleway', sans-serif;
+  --font-small: 'Jost', sans-serif;
+  --font-signature: 'Windsong', cursive;
+
+  --font-family-base: var(--font-body);
+  --font-size-base: 16px;
+
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --header-height: 72px;
+}
+
+[data-theme="dark"] {
+  --bg-base: var(--bg-dark-web);
+  --bg-surface: #170c1d;
+  --bg-surface-elevated: #221728;
+  --bg-icon-contrast: var(--brand-sage-light);
+  --text-primary: var(--brand-sage-light);
+  --text-secondary: var(--brand-rose-muted);
+  --text-muted: rgba(234, 240, 238, 0.65);
+  --text-on-accent: #ffffff;
+  --btn-primary-bg: var(--brand-crimson);
+  --btn-primary-hover: #d81a5c;
+  --btn-secondary-bg: #0b5066;
+  --btn-secondary-hover: #10637d;
+  --badge-bg: rgba(223, 189, 185, 0.18);
+  --badge-text: var(--brand-rose-muted);
+  --border: rgba(234, 240, 238, 0.12);
+  --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
+  --glow-animation: rgba(186, 18, 77, 0.45);
+  --bg-contraste-teal: rgba(0,63,82, 0.5);
+}
+
+/* ============================================
+   RESET BÁSICO
+   ============================================ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: var(--font-size-base); scroll-behavior: smooth; }
+body {
+  font-family: var(--font-family-base);
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; }
+h4, h5, h6 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; }
+small { font-family: var(--font-small); }
+button, .btn, [class*="btn-"] { font-family: var(--font-small); }
+.signature, .firma { font-family: var(--font-signature); font-weight: 400; }
+body.menu-open { overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
+main { flex: 1; }
+img, video { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }
+ul { list-style: none; }
+
+/* ============================================
+   HEADER, MENÚ Y FOOTER (Base)
+   ============================================ */
+#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 {
+  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);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  min-height: 320px;
+  position: relative;
+}
+
+.caso-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson));
+  border-radius: 16px 16px 0 0;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.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: 500;
+  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);
+  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-signature);
+  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-md) var(--spacing-sm);
+  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-md);
+  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-sm);
+  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-md);
+}
+
+.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(--brand-teal);
+}
+
+.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: 2rem;
+  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;
+  }
+}