padding: 6rem 2rem;
      margin: 0 -2rem;
      width: calc(100% + 4rem);
      text-align: center;
    }
    
    .contact h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    
    .contact > p {
      opacity: 0.9;
      margin-bottom: 3rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 800px;
      margin: 0 auto 3rem;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.5rem;
      background: rgba(255,255,255,0.1);
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      transition: all 0.3s ease;
    }
    
    .contact-item:hover {
      background: rgba(255,255,255,0.15);
      transform: translateY(-2px);
    }
    
    .contact-icon {
      width: 50px;
      height: 50px;
      background: var(--gold);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--coffee-dark);
      font-size: 1.5rem;
    }
    
    .contact-info {
      text-align: left;
    }
    
    .contact-info strong {
      display: block;
      margin-bottom: 0.25rem;
    }
    
    .contact-info a {
      color: white;
      text-decoration: none;
      opacity: 0.9;
    }
    
    .contact-info a:hover {
      opacity: 1;
      text-decoration: underline;
    }
    
    .map-container {
      max-width: 800px;
      margin: 0 auto;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    
    .map-container iframe {
      width: 100%;
      height: 300px;
      border: none;
    }
    
    /* Footer */
    footer {
      background: var(--coffee-dark);
      color: white;
      padding: 3rem 2rem 2rem;
      text-align: center;
    }
    
    .footer-content {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .footer-logo {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    
    .footer-tagline {
      opacity: 0.8;
      margin-bottom: 2rem;
    }
    
    .footer-social {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    
    .social-link {
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-decoration: none;
      font-size: 1.25rem;
      transition: all 0.3s ease;
    }
    
    .social-link:hover {
      background: var(--gold);
      color: var(--coffee-dark);
      transform: translateY(-3px);
    }
    
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 2rem;
      margin-top: 2rem;
      font-size: 0.9rem;
      opacity: 0.7;
    }
    
    /* Animations */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      nav {
        padding: 1rem;
      }
      
      .nav-links {
        display: none;
      }
      
      .hero {
        padding: 5rem 1.5rem 3rem;
      }
      
      .hero h1 {
        font-size: 2.5rem;
      }
      
      section {
        padding: 4rem 1.5rem;
      }
      
      .section-header h2 {
        font-size: 2rem;
      }
      
      .features,
      .services-grid,
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
      
      .contact-grid {
        grid-template-columns: 1fr;
      }
    }
    
    /* Loading Animation */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  </style>
</head>
<body>
  <div class="bg-pattern"></div>
  
  <!-- Navigation -->
  <nav id="navbar">
    <div class="nav-content">
      <a href="#" class="logo">Panino Café</a>
      <ul class="nav-links">
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#testimonios">Testimonios</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="hero" id="inicio">
    <div class="hero-content">
      <div class="hero-badge">
        <span>★</span> 245 reseñas verificadas
      </div>
      <h1>Panino <span>Café</span></h1>
      <p class="hero-tagline">El mejor café de Bogotá. Una experiencia gastronómica única con los sabores más auténticos.</p>
      <div class="hero-rating">
        <span class="stars">★★★★★</span>
        <span>4.8 de 5 estrellas</span>
      </div>
      <div class="hero-buttons">
        <a href="https://wa.me/5711234567" class="btn btn-primary">
          💬 Escribir por WhatsApp
        </a>
        <a href="tel:5711234567" class="btn btn-secondary">
          📞 Llamar ahora
        </a>
      </div>
    </div>
    <div class="scroll-indicator">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
      </svg>
    </div>
  </section>

  <!-- Features Section -->
  <section id="caracteristicas">
    <div class="section-header fade-in">
      <h2>¿Por qué elegirnos?</h2>
      <p>En Panino Café nos apasiona ofrecerte la mejor experiencia en cada taza y cada bocado.</p>
    </div>
    
    <div class="features">
      <div class="feature-card fade-in">
        <div class="feature-icon">🌱</div>
        <h3>Ingredientes Orgánicos</h3>
        <p>Seleccionamos cuidadosamente ingredientes de producción local y de la más alta calidad para garantizar un sabor excepcional en cada preparación.</p>
      </div>
      
      <div class="feature-card fade-in">
        <div class="feature-icon">☕</div>
        <h3>Baristas Expertos</h3>
        <p>Nuestro equipo está certificado en las mejores técnicas de extracción y arte latte para deleitarte con tazas perfectas.</p>
      </div>
      
      <div class="feature-card fade-in">
        <div class="feature-icon">🏠</div>
        <h3>Ambiente Acogedor</h3>
        <p>Diseñamos espacios cálidos y modernos donde puedes trabajar, relajarte o disfrutar de un buen momento.</p>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <div class="services" id="servicios">
    <div class="section-header fade-in">
      <h2>Nuestros Servicios</h2>
      <p>Descubre todo lo que tenemos para ofrecerte</p>
    </div>
    
    <div class="services-grid">
      <div class="service-item fade-in">
        <div class="service-icon">☕</div>
        <div class="service-content">
          <h3>Café de Especialidad</h3>
          <p>Granos seleccionados de las mejores regiones cafeteras, tostados artesanalmente para resaltar cada nota de sabor.</p>
        </div>
      </div>
      
      <div class="service-item fade-in">
        <div class="service-icon">🥐</div>
        <div class="service-content">
          <h3>Pastelería Fresca</h3>
          <p>Elaborada diariamente en nuestra cocina con recetas tradicionales y los ingredientes más frescos.</p>
        </div>
      </div>
      
      <div class="service-item fade-in">
        <div class="service-icon">🥪</div>
        <div class="service-content">
          <h3>Paninis Gourmet</h3>
          <p>Combinaciones únicas de ingredientes frescos en pan artesanal, perfectos para cualquier momento del día.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Testimonials Section -->
  <section id="testimonios">
    <div class="section-header fade-in">
      <h2>Lo que dicen nuestros clientes</h2>
      <p>Experiencias reales de quienes nos visitan</p>
    </div>
    
    <div class="testimonials-grid">
      <div class="testimonial-card fade-in">
        <div class="testimonial-stars">★★★★★</div>
        <p class="testimonial-text">El mejor café que he probado en Bogotá. El ambiente es increíble, perfecto para trabajar o tener reuniones. El personal es muy amable y el servicio es excelente.</p>
        <div class="testimonial-author">María G.</div>
        <span class="testimonial-badge">★ Cliente verificado</span>
      </div>
      
      <div class="testimonial-card fade-in">
        <div class="testimonial-stars">★★★★★</div>
        <p class="testimonial-text">Sus paninis son deliciosos y el café siempre perfecto. Se nota la calidad en cada detalle. Mi lugar favorito de la zona, vengo todas las semanas.</p>
        <div class="testimonial-author">Carlos R.</div>
        <span class="testimonial-badge">★ Cliente verificado</span>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <div class="contact" id="contacto">
    <h2>¿Te gustaría visitarnos?</h2>
    <p>Estamos ubicados en una zona de fácil acceso. ¡Te esperamos!</p>
    
    <div class="contact-grid">
      <div class="contact-item">
        <div class="contact-icon">📍</div>
        <div class="contact-info">
          <strong>Dirección</strong>
          <span>Carrera 15 # 84-50, Bogotá</span>
        </div>
      </div>
      
      <div class="contact-item">
        <div class="contact-icon">📞</div>
        <div class="contact-info">
          <strong>Teléfono</strong>
          <a href="tel:5711234567">+57 1 123 4567</a>
        </div>
      </div>
      
      <div class="contact-item">
        <div class="contact-icon">🕐</div>
        <div class="contact-info">
          <strong>Horario</strong>
          <span>Lun-Vie: 7AM-9PM</span>
        </div>
      </div>
    </div>
    
    <a href="https://wa.me/5711234567" class="btn btn-primary" style="font-size: 1.1rem; padding: 1.2rem 2.5rem;">
      💬 Reservar por WhatsApp
    </a>
    
    <div class="map-container" style="margin-top: 3rem;">
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.0!2d-74.05!3d4.65!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNMKwMzknMDAuMCJOIDc0wrAwMycwMC4wIlc!5e0!3m2!1ses!2sco!4v1" 
        allowfullscreen="" 
        loading="lazy">
      </iframe>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <div class="footer-content">
      <div class="footer-logo">Panino Café</div>
      <p class="footer-tagline">El mejor café de Bogotá desde 2020</p>
      
      <div class="footer-social">
        <a href="#" class="social-link" aria-label="Instagram">📸</a>
        <a href="#" class="social-link" aria-label="Facebook">📘</a>
        <a href="#" class="social-link" aria-label="WhatsApp">💬</a>
      </div>
      
      <div class="footer-bottom">
        <p>© 2026 Panino Café. Todos los derechos reservados.</p>
        <p style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.6;">
          Página creada con 💙 para mostrar el potencial de tu negocio online
        </p>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <script>
    // Navbar scroll effect
    window.addEventListener('scroll', () => {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    });
    
    // Fade in animation on scroll
    const observerOptions = {
      threshold: 0.1,
      rootMargin
    };
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
        }
      });
    }, observerOptions);
    
    document.querySelectorAll(".fade-in").forEach(el => observer.observe(el));
    
    // Smooth scroll for navigation links
    document.querySelectorAll("a[href^=\"#\"]").forEach(anchor => {
      anchor.addEventListener("click", function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute("href"));
        if (target) {
          target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      });
    });
  </script>
</body>
</html>