/* Modern Aerotermia Valencia Design - Inspired by course platform */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary-blue: #1e3a8a;
  --primary-green: #059669;
  --primary-purple: #7c3aed;
  --primary-orange: #ea580c;
  --secondary-gray: #64748b;
  --light-gray: #f8fafc;
  --dark-navy: #0f172a;
  --success-green: #10b981;
  --warning-amber: #f59e0b;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-light: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: #ffffff;
  scroll-behavior: smooth;
}

/* Navigation */
.navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primary-blue) !important;
}

.nav-link {
  font-weight: 500;
  color: var(--text-primary) !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--primary-blue) !important;
}

.nav-link.active {
  color: var(--primary-blue) !important;
  font-weight: 600;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
  color: white;
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="30" cy="30" r="2"/></g></svg>');
  opacity: 0.3;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero .lead {
  font-size: 1.25rem;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* Modern Cards */
.card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-blue);
}

.card-body {
  padding: 2rem;
}

/* Service Cards with Color Coding */
.service-card-1 { border-top: 4px solid var(--primary-green); }
.service-card-2 { border-top: 4px solid var(--primary-blue); }
.service-card-3 { border-top: 4px solid var(--primary-purple); }
.service-card-4 { border-top: 4px solid var(--primary-orange); }

.service-card-1:hover { box-shadow: 0 20px 40px rgba(5, 150, 105, 0.15); }
.service-card-2:hover { box-shadow: 0 20px 40px rgba(30, 58, 138, 0.15); }
.service-card-3:hover { box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15); }
.service-card-4:hover { box-shadow: 0 20px 40px rgba(234, 88, 12, 0.15); }

/* Feature Icons */
.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.icon-green { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.icon-blue { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.icon-purple { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.icon-orange { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }

.card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Pricing Table */
.pricing-table {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.table {
  margin: 0;
  border: none;
}

.table thead th {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  color: white;
  font-weight: 600;
  padding: 1.25rem;
  border: none;
  text-align: center;
}

.table tbody td {
  padding: 1.25rem;
  border-color: var(--border-light);
  text-align: center;
  font-weight: 500;
}

.table tbody tr:hover {
  background-color: rgba(30, 58, 138, 0.05);
}

/* Process Steps */
.process-step {
  text-align: center;
  transition: all 0.3s ease;
}

.step-number {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 auto 1.5rem;
  position: relative;
}

.step-1 .step-number { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.step-2 .step-number { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.step-3 .step-number { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }
.step-4 .step-number { background: linear-gradient(135deg, var(--primary-blue), #3b82f6); }

/* Testimonials */
.testimonial-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  position: relative;
  border-left: 4px solid var(--primary-blue);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonial-rating {
  color: #fbbf24;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

.testimonial-author {
  font-weight: 600;
  color: var(--text-primary);
}

/* Buttons */
.btn {
  font-weight: 600;
  border-radius: 12px;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  border: none;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

.btn-success {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

.btn-warning {
  background: linear-gradient(135deg, var(--warning-amber), #f59e0b);
  color: white;
}

.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

.btn-outline-light {
  border: 2px solid white;
  color: white;
  background: transparent;
}

.btn-outline-light:hover {
  background: white;
  color: var(--primary-blue);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

/* Forms */
.form-control, .form-select {
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
  outline: none;
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.input-group-text {
  background: var(--light-gray);
  border: 2px solid var(--border-light);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--text-secondary);
}

/* Alerts */
.alert {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  font-weight: 500;
  border-left: 4px solid;
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left-color: var(--success-green);
  color: #047857;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left-color: var(--warning-amber);
  color: #92400e;
}

.alert-primary {
  background-color: rgba(30, 58, 138, 0.1);
  border-left-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* Section Backgrounds */
.section-light {
  background-color: var(--light-gray);
}

.section-gradient {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
  color: white;
}

/* Page Sections */
.page-section {
  display: none;
  animation: fadeInUp 0.5s ease forwards;
}

.page-section.active {
  display: block;
}

/* Footer */
footer {
  background: var(--dark-navy);
  color: white;
  padding: 3rem 0 1rem;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-blue), var(--primary-purple), var(--primary-orange));
}

footer a {
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

footer a:hover {
  color: white;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero .lead {
    font-size: 1.125rem;
  }

  .card-body {
    padding: 1.5rem;
  }

  .btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }

  .feature-icon,
  .step-number {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* Main content spacing */
.main-content {
  margin-top: 76px;
}

/* Price and savings highlights */
.price-highlight {
  color: var(--success-green) !important;
}

.savings-highlight {
  color: var(--primary-blue) !important;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Loading states */
.loading {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.loading:nth-child(1) { animation-delay: 0.1s; }
.loading:nth-child(2) { animation-delay: 0.2s; }
.loading:nth-child(3) { animation-delay: 0.3s; }
.loading:nth-child(4) { animation-delay: 0.4s; }

/* Utilities */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
}

.border-gradient {
  border: 2px solid;
  border-image: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) 1;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Print styles */
@media print {
  .navbar, footer, .btn {
    display: none !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid var(--border-light) !important;
  }
}
/* Modified to make the Valencia temperature boxes have the same height */
</style>
<body class="bg-light">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Modern Aerotermia Valencia</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#hero">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Servicios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">Características</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#pricing">Precios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#process">Proceso</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testimonials">Testimonios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contacto</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="hero" class="hero d-flex align-items-center">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <h1 class="display-4 fw-bold">Aire Acondicionado y Aerotermia en Valencia</h1>
                    <p class="lead">Soluciones de climatización eficientes y sostenibles para tu hogar o negocio. Expertos en aerotermia, aire acondicionado y más.</p>
                    <a href="#contact" class="btn btn-primary btn-lg">Contáctanos</a>
                    <a href="https://wa.me/XXXXXXXXXXXXX" class="btn btn-success btn-lg ms-2"><i class="bi bi-whatsapp"></i> WhatsApp</a>
                </div>
                <div class="col-lg-5">
                    <img src="https://via.placeholder.com/400x300" class="img-fluid" alt="Aerotermia Valencia">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-5 section-light">
        <div class="container">
            <h2 class="text-center mb-5">Nuestros Servicios</h2>
            <div class="row">
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card service-card-1">
                        <div class="card-body">
                            <div class="feature-icon icon-green"><i class="bi bi-thermometer-half"></i></div>
                            <h5 class="card-title">Aerotermia</h5>
                            <p class="card-text">Instalación y mantenimiento de sistemas de aerotermia para calefacción, refrigeración y agua caliente sanitaria.</p>
                            <a href="#" class="btn btn-sm btn-primary">Más información</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card service-card-2">
                        <div class="card-body">
                            <div class="feature-icon icon-blue"><i class="bi bi-snow"></i></div>
                            <h5 class="card-title">Aire Acondicionado</h5>
                            <p class="card-text">Venta, instalación y reparación de aire acondicionado de todas las marcas y modelos.</p>
                            <a href="#" class="btn btn-sm btn-primary">Más información</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card service-card-3">
                        <div class="card-body">
                            <div class="feature-icon icon-purple"><i class="bi bi-radiator"></i></div>
                            <h5 class="card-title">Calefacción</h5>
                            <p class="card-text">Instalación y mantenimiento de sistemas de calefacción por suelo radiante, radiadores y calderas.</p>
                            <a href="#" class="btn btn-sm btn-primary">Más información</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card service-card-4">
                        <div class="card-body">
                            <div class="feature-icon icon-orange"><i class="bi bi-droplet"></i></div>
                            <h5 class="card-title">Fontanería</h5>
                            <p class="card-text">Servicios de fontanería en general, incluyendo reparación de fugas, instalación de sanitarios y desatascos.</p>
                            <a href="#" class="btn btn-sm btn-primary">Más información</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Características Destacadas</h2>
            <div class="row">
                <div class="col-lg-6">
                    <h3>¿Por qué elegirnos?</h3>
                    <p>Contamos con un equipo de profesionales altamente cualificados y con años de experiencia en el sector de la climatización. Ofrecemos soluciones personalizadas y adaptadas a las necesidades de cada cliente.</p>
                    <ul>
                        <li>Asesoramiento técnico especializado</li>
                        <li>Presupuestos sin compromiso</li>
                        <li>Instalaciones garantizadas</li>
                        <li>Servicio de mantenimiento integral</li>
                        <li>Atención al cliente personalizada</li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <img src="https://via.placeholder.com/500x400" class="img-fluid" alt="Equipo de profesionales">
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="py-5 section-light">
        <div class="container">
            <h2 class="text-center mb-5">Nuestros Precios</h2>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="pricing-table">
                        <table class="table table-responsive">
                            <thead>
                                <tr>
                                    <th>Servicio</th>
                                    <th>Descripción</th>
                                    <th>Precio</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Instalación de Aerotermia</td>
                                    <td>Incluye la instalación completa del sistema</td>
                                    <td>Desde 3.500€</td>
                                </tr>
                                <tr>
                                    <td>Instalación de Aire Acondicionado</td>
                                    <td>Incluye la instalación básica del equipo</td>
                                    <td>Desde 300€</td>
                                </tr>
                                <tr>
                                    <td>Mantenimiento Anual</td>
                                    <td>Mantenimiento preventivo y correctivo</td>
                                    <td>Desde 150€</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section id="process" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Nuestro Proceso</h2>
            <div class="row text-center">
                <div class="col-md-3 process-step step-1">
                    <div class="step-number">1</div>
                    <h4>Contacto Inicial</h4>
                    <p>Cuéntanos tus necesidades y te asesoraremos.</p>
                </div>
                <div class="col-md-3 process-step step-2">
                    <div class="step-number">2</div>
                    <h4>Visita Técnica</h4>
                    <p>Realizamos una visita para evaluar tu espacio.</p>
                </div>
                <div class="col-md-3 process-step step-3">
                    <div class="step-number">3</div>
                    <h4>Elaboración de Presupuesto</h4>
                    <p>Te enviamos un presupuesto detallado y sin compromiso.</p>
                </div>
                <div class="col-md-3 process-step step-4">
                    <div class="step-number">4</div>
                    <h4>Instalación y Puesta en Marcha</h4>
                    <p>Instalamos tu equipo y te explicamos su funcionamiento.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section id="testimonials" class="py-5 section-light">
        <div class="container">
            <h2 class="text-center mb-5">Testimonios</h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="testimonial-card">
                        <div class="testimonial-rating">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                        </div>
                        <p class="testimonial-text">"Excelente servicio y atención al detalle. ¡Recomendables 100%!"</p>
                        <div class="testimonial-author">Juan Pérez</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="testimonial-card">
                        <div class="testimonial-rating">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                        </div>
                        <p class="testimonial-text">"Muy contentos con la instalación de aerotermia. Ahorramos mucho en la factura de la luz."</p>
                        <div class="testimonial-author">María García</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Contacto</h2>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <form>
                        <div class="mb-3">
                            <label for="name" class="form-label">Nombre</label>
                            <input type="text" class="form-control" id="name" placeholder="Tu nombre">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" placeholder="Tu email">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Mensaje</label>
                            <textarea class="form-control" id="message" rows="5" placeholder="Tu mensaje"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Enviar Mensaje</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="text-center">
        <div class="container">
            <p>&copy; 2024 Modern Aerotermia Valencia. Todos los derechos reservados.</p>
            <a href="#"><i class="bi bi-envelope"></i> info@aerotermiavalencia.com</a>
            <a href="#"><i class="bi bi-phone"></i> +34 123 456 789</a>
        </div>
    </footer>

    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <!-- Place any other scripts you want *after* bootstrap, but *before* closing the body tag -->

    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/XXXXXXXXXXXXX/XXXXXXXXXXXXX';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->
</body>
</html>
  
  Valencia’s average temperatures boxes can have the same height by using flexbox.