mejoras de estructura

includes/menu.html

@@ -0,0 +1,76 @@
+<header class="site-header">
+  <nav class="main-nav">
+    <a href="inicio.html" class="logo">
+      <img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
+      <img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
+    </a>
+    
+    <div class="nav-actions">
+      <button class="theme-toggle" aria-label="Cambiar tema">
+        <img src="assets/iconos/moon.svg" alt="Modo oscuro" class="theme-icon icon-moon">
+        <img src="assets/iconos/sun.svg" alt="Modo claro" class="theme-icon icon-sun">
+      </button>
+      <button class="menu-toggle" aria-label="Abrir menú" aria-expanded="false">
+        Menú
+      </button>
+    </div>
+  </nav>
+</header>
+
+<!-- Overlay para cerrar el menú -->
+<div class="menu-overlay" id="menu-overlay"></div>
+
+<!-- Menú fullscreen -->
+<div class="fullscreen-menu" id="fullscreen-menu">
+  <button class="menu-close" aria-label="Cerrar menú">✕</button>
+  
+  <div class="menu-content">
+    <!-- Columna 1: Navegación de inicio -->
+    <div class="menu-column">
+      <h3>Inicio</h3>
+      <ul>
+        <li><a href="inicio.html#section-1">Sección 1</a></li>
+        <li><a href="inicio.html#section-2">Sección 2</a></li>
+        <li><a href="inicio.html#section-3">Sección 3</a></li>
+        <li><a href="inicio.html#section-4">Sección 4</a></li>
+        <li><a href="inicio.html#section-5">Sección 5</a></li>
+        <li><a href="inicio.html#section-6">Sección 6</a></li>
+        <li><a href="inicio.html#section-7">Sección 7</a></li>
+      </ul>
+    </div>
+
+    <!-- Columna 2: Sitemap y políticas -->
+    <div class="menu-column">
+      <h3>Navegación</h3>
+      <ul>
+        <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="nosotros.html">Nosotros</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="contacto.html">Contacto</a></li>
+      </ul>
+    </div>
+
+    <!-- Columna 3: Contacto y botones -->
+    <div class="menu-column">
+      <h3>Contacto</h3>
+      <div class="menu-contact-info">
+        <p>📧 info@agencia.com</p>
+        <p>📞 +34 123 456 789</p>
+        
+        <div class="menu-social">
+          <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a>
+          <a href="https://facebook.com" target="_blank" rel="noopener">Facebook</a>
+          <a href="https://linkedin.com" target="_blank" rel="noopener">LinkedIn</a>
+        </div>
+      </div>
+
+      <div class="menu-buttons">
+        <a href="contacto.html" class="btn-menu btn-menu-primary">Hablemos</a>
+        <a href="trabaja.html" class="btn-menu btn-menu-secondary">Trabaja con nosotros</a>
+      </div>
+    </div>
+  </div>
+</div>