Plantilla HTML para negocio de aire acondicionado

Tener presencia en internet es especialmente importante para profesionales que ofrecen servicios locales. Cuando una persona necesita instalar un aire acondicionado, reparar una avería o realizar una limpieza, normalmente busca una solución rápida desde el móvil.

Por eso hemos creado esta plantilla web para un negocio de aire acondicionado, diseñada para presentar servicios, generar confianza y facilitar que los clientes soliciten un presupuesto mediante formulario, teléfono o WhatsApp.

La plantilla está desarrollada con HTML, CSS y JavaScript puro. No utiliza frameworks ni librerías externas, por lo que puedes personalizarla fácilmente y publicarla en cualquier alojamiento web.

¿Para quién está pensada esta plantilla?

Esta plantilla puede utilizarse como punto de partida para diferentes tipos de profesionales y pequeñas empresas relacionadas con la climatización:

Instaladores de aire acondicionado.
Técnicos independientes.
Empresas de reparación y mantenimiento.
Profesionales de refrigeración.
Negocios de calefacción y climatización.
Servicios técnicos para viviendas y comercios.
Emprendedores que están comenzando a ofrecer servicios locales.

Aunque el diseño está orientado al aire acondicionado, también puedes adaptarlo a servicios de electricidad, fontanería, calderas, placas solares o mantenimiento del hogar.

Qué incluye la plantilla

La página incorpora las secciones más importantes para presentar un negocio de servicios profesionales.

Encabezado con navegación

El menú permanece visible mientras el usuario recorre la página. Desde él se puede acceder rápidamente a los servicios, las zonas de atención, las opiniones, las preguntas frecuentes y el formulario de presupuesto.

También incluye un botón principal para solicitar información.

Sección principal orientada a la conversión

La primera parte de la web explica claramente qué hace el negocio:

Instalación de aire acondicionado.
Reparación de averías.
Limpieza y mantenimiento.
Atención para viviendas y pequeños comercios.

El visitante encuentra desde el primer momento dos opciones de contacto: solicitar un presupuesto o iniciar una conversación por WhatsApp.

Esta estructura es especialmente útil para negocios locales, ya que muchos usuarios no quieren recorrer toda la página antes de contactar.

Código completo

Desplázate dentro del bloque para verlo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="Instalación, reparación y mantenimiento de aire acondicionado en Madrid. Solicita presupuesto por WhatsApp."
  >
  <title>ClimaFácil | Aire acondicionado en Madrid</title>

  <style>
    :root {
      --primary: #0878c9;
      --primary-dark: #04578f;
      --primary-soft: #e9f6ff;
      --secondary: #0c2940;
      --accent: #ff9d1f;
      --accent-dark: #df7800;
      --success: #16a66a;
      --background: #ffffff;
      --background-soft: #f4f9fc;
      --text: #31485a;
      --muted: #718394;
      --border: #dce8ef;
      --white: #ffffff;
      --shadow-sm: 0 12px 34px rgba(13, 40, 64, 0.08);
      --shadow-lg: 0 28px 75px rgba(13, 40, 64, 0.16);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: 1180px;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
    }

    body {
      overflow-x: hidden;
      background: var(--background);
      color: var(--text);
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      line-height: 1.65;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    ul {
      list-style: none;
    }

    svg {
      display: block;
      max-width: 100%;
    }

    .container {
      width: min(100% - 40px, var(--container));
      margin-inline: auto;
    }

    .section {
      padding: 104px 0;
    }

    .section-soft {
      background: var(--background-soft);
    }

    .section-header {
      width: min(100%, 740px);
      margin: 0 auto 54px;
      text-align: center;
    }

    .section-header p {
      color: var(--muted);
      font-size: 1.05rem;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border: 1px solid #b9ddf5;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-dark);
      font-size: 0.8rem;
      font-weight: 850;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 5px rgba(8, 120, 201, 0.12);
    }

    h1,
    h2,
    h3 {
      color: var(--secondary);
      line-height: 1.12;
    }

    h1 {
      font-size: clamp(3rem, 7vw, 5.5rem);
      letter-spacing: -0.065em;
    }

    h2 {
      margin-bottom: 18px;
      font-size: clamp(2.15rem, 5vw, 3.5rem);
      letter-spacing: -0.045em;
    }

    h3 {
      font-size: 1.22rem;
      letter-spacing: -0.02em;
    }

    .button {
      display: inline-flex;
      min-height: 54px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 23px;
      border-radius: 14px;
      font-weight: 850;
      transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
    }

    .button:hover {
      transform: translateY(-3px);
    }

    .button-primary {
      background: var(--primary);
      color: var(--white);
      box-shadow: 0 15px 35px rgba(8, 120, 201, 0.28);
    }

    .button-primary:hover {
      background: var(--primary-dark);
      box-shadow: 0 20px 45px rgba(8, 120, 201, 0.34);
    }

    .button-secondary {
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--secondary);
      box-shadow: var(--shadow-sm);
    }

    .button-accent {
      background: var(--accent);
      color: #3a2400;
      box-shadow: 0 15px 35px rgba(255, 157, 31, 0.3);
    }

    .button-accent:hover {
      background: var(--accent-dark);
      color: var(--white);
    }

    .icon {
      width: 21px;
      height: 21px;
      flex: 0 0 auto;
    }

    /* Encabezado */

    .site-header {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid transparent;
      transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    }

    .site-header.scrolled {
      border-color: rgba(220, 232, 239, 0.9);
      background: rgba(255, 255, 255, 0.93);
      box-shadow: 0 8px 30px rgba(13, 40, 64, 0.06);
      backdrop-filter: blur(18px);
    }

    .navbar {
      display: flex;
      min-height: 84px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--secondary);
      font-size: 1.25rem;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    .logo-mark {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 13px;
      background: linear-gradient(145deg, #1ca8ef, var(--primary-dark));
      color: var(--white);
      box-shadow: 0 12px 28px rgba(8, 120, 201, 0.25);
    }

    .logo strong {
      color: var(--primary);
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .nav-link {
      position: relative;
      color: #486072;
      font-size: 0.94rem;
      font-weight: 750;
    }

    .nav-link::after {
      position: absolute;
      right: 0;
      bottom: -8px;
      left: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--primary);
      content: "";
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }

    .nav-link:hover::after {
      transform: scaleX(1);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .phone-link {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--secondary);
      font-size: 0.92rem;
      font-weight: 850;
    }

    .phone-link svg {
      color: var(--primary);
    }

    .menu-button {
      display: none;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 12px;
      background: var(--primary-soft);
      color: var(--primary);
    }

    /* Hero */

    .hero {
      position: relative;
      overflow: hidden;
      padding: 165px 0 100px;
      background:
        radial-gradient(circle at 92% 15%, rgba(28, 168, 239, 0.22), transparent 32%),
        radial-gradient(circle at 8% 85%, rgba(255, 157, 31, 0.13), transparent 27%),
        linear-gradient(180deg, #f5fbff 0%, #ffffff 100%);
    }

    .hero::before {
      position: absolute;
      top: 110px;
      right: -150px;
      width: 500px;
      height: 500px;
      border: 1px solid rgba(8, 120, 201, 0.13);
      border-radius: 50%;
      content: "";
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      align-items: center;
      gap: 70px;
      grid-template-columns: 1.05fr 0.95fr;
    }

    .hero-title span {
      background: linear-gradient(135deg, var(--primary), #20b7e9);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-description {
      max-width: 670px;
      margin: 27px 0 33px;
      color: var(--muted);
      font-size: 1.16rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 28px;
      color: #526b7d;
      font-size: 0.9rem;
      font-weight: 700;
    }

    .trust-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .check {
      display: grid;
      width: 21px;
      height: 21px;
      place-items: center;
      border-radius: 50%;
      background: #dcf9eb;
      color: var(--success);
      font-size: 0.78rem;
      font-weight: 950;
    }

    .hero-visual {
      position: relative;
      min-height: 540px;
    }

    .visual-background {
      position: absolute;
      inset: 35px 0 0 35px;
      border-radius: 45px;
      background: linear-gradient(145deg, #075f9b, #0c304b);
      box-shadow: var(--shadow-lg);
      transform: rotate(2deg);
    }

    .room-card {
      position: absolute;
      top: 0;
      right: 25px;
      left: 0;
      min-height: 450px;
      overflow: hidden;
      padding: 35px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 38px;
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.97),
          rgba(232, 247, 255, 0.94)
        );
      box-shadow: var(--shadow-lg);
      transform: rotate(-1deg);
      backdrop-filter: blur(15px);
    }

    .room-window {
      position: absolute;
      top: 35px;
      left: 35px;
      width: 120px;
      height: 175px;
      overflow: hidden;
      border: 10px solid var(--white);
      border-radius: 16px;
      background: linear-gradient(180deg, #9ddcff 0%, #e8f7ff 55%, #c7e6b5 56%);
      box-shadow: 0 14px 30px rgba(13, 40, 64, 0.1);
    }

    .room-window::before,
    .room-window::after {
      position: absolute;
      background: rgba(255, 255, 255, 0.85);
      content: "";
    }

    .room-window::before {
      top: 0;
      bottom: 0;
      left: 50%;
      width: 6px;
      transform: translateX(-50%);
    }

    .room-window::after {
      top: 48%;
      right: 0;
      left: 0;
      height: 6px;
    }

    .air-conditioner {
      position: absolute;
      top: 55px;
      right: 40px;
      width: 265px;
      height: 105px;
      padding: 22px 24px;
      border-radius: 20px 20px 28px 28px;
      background: linear-gradient(180deg, #ffffff, #eaf4f9);
      box-shadow: 0 18px 40px rgba(13, 40, 64, 0.18);
    }

    .air-conditioner::before {
      position: absolute;
      right: 22px;
      bottom: 15px;
      left: 22px;
      height: 13px;
      border-radius: 5px 5px 12px 12px;
      background: #c9dbe5;
      content: "";
    }

    .air-logo {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--primary);
      font-weight: 900;
    }

    .temperature {
      position: absolute;
      top: 23px;
      right: 25px;
      color: var(--primary);
      font-size: 0.9rem;
      font-weight: 900;
    }

    .air-flow {
      position: absolute;
      top: 150px;
      right: 105px;
      display: grid;
      gap: 13px;
    }

    .air-flow span {
      width: 145px;
      height: 3px;
      border-radius: 999px;
      background:
        linear-gradient(
          90deg,
          rgba(28, 168, 239, 0),
          rgba(28, 168, 239, 0.72),
          rgba(28, 168, 239, 0)
        );
      animation: airMove 2.5s ease-in-out infinite;
    }

    .air-flow span:nth-child(2) {
      width: 120px;
      margin-left: 20px;
      animation-delay: 0.3s;
    }

    .air-flow span:nth-child(3) {
      width: 90px;
      margin-left: 45px;
      animation-delay: 0.6s;
    }

    .technician-card {
      position: absolute;
      right: 25px;
      bottom: 65px;
      left: 25px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 22px;
      border-radius: 22px;
      background: var(--white);
      box-shadow: 0 18px 40px rgba(13, 40, 64, 0.13);
    }

    .technician-avatar {
      display: grid;
      width: 64px;
      height: 64px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 19px;
      background: linear-gradient(145deg, var(--primary-soft), #bce9ff);
      color: var(--primary-dark);
    }

    .technician-info {
      flex: 1;
    }

    .technician-info span {
      color: var(--muted);
      font-size: 0.85rem;
    }

    .technician-info strong {
      display: block;
      color: var(--secondary);
      font-size: 1.05rem;
    }

    .technician-status {
      padding: 7px 11px;
      border-radius: 999px;
      background: #dcf9eb;
      color: #087f50;
      font-size: 0.75rem;
      font-weight: 850;
    }

    .floating-rating {
      position: absolute;
      right: 0;
      bottom: 5px;
      width: 205px;
      padding: 18px;
      border-radius: 18px;
      background: var(--white);
      box-shadow: var(--shadow-lg);
      animation: floatCard 4s ease-in-out infinite;
    }

    .rating-stars {
      color: var(--accent);
      letter-spacing: 2px;
    }

    .floating-rating strong {
      display: block;
      margin: 4px 0;
      color: var(--secondary);
    }

    .floating-rating span {
      color: var(--muted);
      font-size: 0.82rem;
    }

    /* Franja urgente */

    .emergency-strip {
      background: var(--secondary);
      color: var(--white);
    }

    .emergency-content {
      display: flex;
      min-height: 86px;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }

    .emergency-text {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .emergency-icon {
      display: grid;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 13px;
      background: rgba(255, 157, 31, 0.15);
      color: var(--accent);
    }

    .emergency-text strong {
      display: block;
      font-size: 1.02rem;
    }

    .emergency-text span {
      color: #b8c5cf;
      font-size: 0.9rem;
    }

    /* Servicios */

    .services-grid {
      display: grid;
      gap: 23px;
      grid-template-columns: repeat(3, 1fr);
    }

    .service-card {
      position: relative;
      overflow: hidden;
      padding: 32px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--white);
      box-shadow: 0 12px 34px rgba(13, 40, 64, 0.05);
      transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    }

    .service-card::after {
      position: absolute;
      right: -45px;
      bottom: -45px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(8, 120, 201, 0.05);
      content: "";
      transition: transform 0.35s ease;
    }

    .service-card:hover {
      border-color: #a7d5ef;
      box-shadow: var(--shadow-sm);
      transform: translateY(-8px);
    }

    .service-card:hover::after {
      transform: scale(1.5);
    }

    .service-icon {
      display: grid;
      width: 58px;
      height: 58px;
      margin-bottom: 24px;
      place-items: center;
      border-radius: 18px;
      background: var(--primary-soft);
      color: var(--primary);
    }

    .service-card p {
      margin: 12px 0 21px;
      color: var(--muted);
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary);
      font-weight: 850;
    }

    /* Ventajas */

    .advantages-grid {
      display: grid;
      align-items: center;
      gap: 74px;
      grid-template-columns: 1fr 1fr;
    }

    .advantages-visual {
      position: relative;
      min-height: 520px;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: linear-gradient(145deg, #0a638f, #0d2840);
      box-shadow: var(--shadow-lg);
    }

    .toolbox {
      position: absolute;
      top: 70px;
      right: 55px;
      left: 55px;
      padding: 35px;
      border-radius: 25px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow-lg);
    }

    .toolbox-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 25px;
    }

    .toolbox-header span {
      padding: 7px 11px;
      border-radius: 999px;
      background: #dcf9eb;
      color: #087f50;
      font-size: 0.76rem;
      font-weight: 850;
    }

    .tool-list {
      display: grid;
      gap: 12px;
    }

    .tool-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 15px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: #f9fcfe;
    }

    .tool-item-left {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .tool-icon {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 11px;
      background: var(--primary-soft);
      color: var(--primary);
    }

    .tool-status {
      color: var(--success);
      font-size: 0.78rem;
      font-weight: 850;
    }

    .experience-card {
      position: absolute;
      right: 25px;
      bottom: 25px;
      width: 210px;
      padding: 22px;
      border-radius: 19px;
      background: var(--white);
      box-shadow: var(--shadow-lg);
      animation: floatCard 4.5s ease-in-out infinite;
    }

    .experience-card strong {
      display: block;
      color: var(--primary);
      font-size: 2.2rem;
      letter-spacing: -0.05em;
    }

    .experience-card span {
      color: var(--muted);
      font-size: 0.88rem;
    }

    .advantages-content > p {
      margin-bottom: 33px;
      color: var(--muted);
      font-size: 1.06rem;
    }

    .advantage-list {
      display: grid;
      gap: 21px;
    }

    .advantage-item {
      display: grid;
      gap: 15px;
      grid-template-columns: auto 1fr;
    }

    .advantage-number {
      display: grid;
      width: 43px;
      height: 43px;
      place-items: center;
      border-radius: 14px;
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 900;
    }

    .advantage-item p {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    /* Proceso */

    .process-grid {
      display: grid;
      gap: 22px;
      grid-template-columns: repeat(4, 1fr);
    }

    .process-card {
      position: relative;
      padding: 30px 25px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--white);
      text-align: center;
    }

    .process-icon {
      display: grid;
      width: 65px;
      height: 65px;
      margin: 0 auto 20px;
      place-items: center;
      border-radius: 20px;
      background: linear-gradient(145deg, var(--primary-soft), #d7f1ff);
      color: var(--primary);
    }

    .process-step {
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 50%;
      background: var(--secondary);
      color: var(--white);
      font-size: 0.75rem;
      font-weight: 900;
    }

    .process-card p {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    /* Estadísticas */

    .stats {
      position: relative;
      overflow: hidden;
      padding: 73px 0;
      background: var(--secondary);
      color: var(--white);
    }

    .stats-grid {
      display: grid;
      gap: 25px;
      grid-template-columns: repeat(4, 1fr);
    }

    .stat {
      padding: 20px 28px;
      border-left: 1px solid rgba(255, 255, 255, 0.13);
    }

    .stat:first-child {
      border-left: 0;
    }

    .stat strong {
      display: block;
      margin-bottom: 5px;
      font-size: clamp(2.2rem, 4vw, 3.35rem);
      letter-spacing: -0.05em;
    }

    .stat span {
      color: #aebcc7;
    }

    /* Opiniones */

    .testimonials-grid {
      display: grid;
      gap: 23px;
      grid-template-columns: repeat(3, 1fr);
    }

    .testimonial-card {
      padding: 30px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--white);
      box-shadow: 0 12px 34px rgba(13, 40, 64, 0.05);
    }

    .testimonial-stars {
      margin-bottom: 18px;
      color: var(--accent);
      letter-spacing: 3px;
    }

    .testimonial-card blockquote {
      margin-bottom: 25px;
      color: var(--secondary);
      font-size: 1.01rem;
      font-weight: 650;
    }

    .testimonial-user {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .user-avatar {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--primary-soft), #bae9ff);
      color: var(--primary-dark);
      font-weight: 900;
    }

    .testimonial-user strong {
      display: block;
      color: var(--secondary);
    }

    .testimonial-user span {
      color: var(--muted);
      font-size: 0.84rem;
    }

    /* Formulario */

    .contact-wrapper {
      display: grid;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--secondary);
      box-shadow: var(--shadow-lg);
      grid-template-columns: 1fr 0.92fr;
    }

    .contact-copy {
      position: relative;
      overflow: hidden;
      padding: 70px;
      color: var(--white);
    }

    .contact-copy h2 {
      color: var(--white);
    }

    .contact-copy > p {
      max-width: 520px;
      color: #b9c7d1;
    }

    .contact-benefits {
      display: grid;
      gap: 16px;
      margin-top: 32px;
    }

    .contact-benefit {
      display: flex;
      align-items: center;
      gap: 11px;
      color: #d9e2e9;
    }

    .contact-data {
      display: grid;
      gap: 13px;
      margin-top: 35px;
    }

    .contact-data a {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--white);
      font-weight: 800;
    }

    .contact-data svg {
      color: var(--accent);
    }

    .contact-form {
      margin: 18px;
      padding: 42px;
      border-radius: 26px;
      background: var(--white);
    }

    .form-row {
      display: grid;
      gap: 15px;
      grid-template-columns: repeat(2, 1fr);
    }

    .form-group {
      margin-bottom: 17px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: var(--secondary);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .form-control {
      width: 100%;
      min-height: 51px;
      padding: 13px 15px;
      border: 1px solid var(--border);
      border-radius: 12px;
      outline: none;
      background: var(--white);
      color: var(--secondary);
      transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    }

    textarea.form-control {
      min-height: 120px;
      resize: vertical;
    }

    .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(8, 120, 201, 0.12);
    }

    .privacy-note {
      margin: 13px 0 0;
      color: var(--muted);
      font-size: 0.78rem;
      text-align: center;
    }

    .form-message {
      display: none;
      margin-top: 15px;
      padding: 13px 14px;
      border-radius: 10px;
      background: #dcf9eb;
      color: #087f50;
      font-weight: 800;
    }

    .form-message.visible {
      display: block;
    }

    /* FAQ */

    .faq-list {
      width: min(100%, 860px);
      margin: 0 auto;
    }

    .faq-item {
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--white);
      box-shadow: 0 8px 24px rgba(13, 40, 64, 0.04);
    }

    .faq-question {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 24px;
      background: transparent;
      color: var(--secondary);
      font-weight: 850;
      text-align: left;
    }

    .faq-symbol {
      display: grid;
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 11px;
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 1.2rem;
      transition: transform 0.25s ease;
    }

    .faq-answer {
      display: grid;
      overflow: hidden;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease;
    }

    .faq-answer-inner {
      overflow: hidden;
    }

    .faq-answer p {
      padding: 0 24px 24px;
      color: var(--muted);
    }

    .faq-item.active .faq-answer {
      grid-template-rows: 1fr;
    }

    .faq-item.active .faq-symbol {
      transform: rotate(45deg);
    }

    /* Footer */

    .footer {
      padding: 70px 0 30px;
      background: #081c2d;
      color: #9dafbd;
    }

    .footer-grid {
      display: grid;
      gap: 50px;
      grid-template-columns: 1.5fr repeat(3, 1fr);
    }

    .footer-brand p {
      max-width: 385px;
      margin-top: 18px;
    }

    .footer-title {
      margin-bottom: 18px;
      color: var(--white);
      font-size: 0.95rem;
      font-weight: 850;
    }

    .footer-links {
      display: grid;
      gap: 12px;
    }

    .footer-links a {
      transition: color 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--white);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 52px;
      padding-top: 25px;
      border-top: 1px solid #173348;
      font-size: 0.88rem;
    }

    /* WhatsApp */

    .whatsapp-floating {
      position: fixed;
      z-index: 950;
      right: 22px;
      bottom: 22px;
      display: flex;
      width: 59px;
      height: 59px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #20c763;
      color: var(--white);
      box-shadow: 0 15px 35px rgba(32, 199, 99, 0.38);
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .whatsapp-floating:hover {
      box-shadow: 0 20px 42px rgba(32, 199, 99, 0.45);
      transform: translateY(-5px) scale(1.04);
    }

    /* Animaciones */

    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes airMove {
      0%,
      100% {
        opacity: 0.3;
        transform: translateX(0);
      }

      50% {
        opacity: 1;
        transform: translateX(18px);
      }
    }

    @keyframes floatCard {
      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-11px);
      }
    }

    /* Responsive */

    @media (max-width: 1050px) {
      .phone-link {
        display: none;
      }

      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 940px) {
      .menu-button {
        display: grid;
      }

      .nav-menu {
        position: fixed;
        top: 84px;
        right: 20px;
        left: 20px;
        display: grid;
        gap: 20px;
        padding: 25px;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-15px);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .nav-menu.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .nav-button {
        display: none;
      }

      .hero-grid,
      .advantages-grid,
      .contact-wrapper {
        grid-template-columns: 1fr;
      }

      .hero-content {
        text-align: center;
      }

      .hero-description {
        margin-inline: auto;
      }

      .hero-actions,
      .hero-trust {
        justify-content: center;
      }

      .hero-visual {
        width: min(100%, 650px);
        margin: 0 auto;
      }

      .advantages-visual {
        order: 2;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat:nth-child(3) {
        border-left: 0;
      }

      .testimonials-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 680px) {
      .container {
        width: min(100% - 28px, var(--container));
      }

      .section {
        padding: 80px 0;
      }

      .hero {
        padding: 135px 0 80px;
      }

      .hero-actions {
        flex-direction: column;
      }

      .hero-actions .button {
        width: 100%;
      }

      .hero-visual {
        min-height: 500px;
      }

      .visual-background {
        inset: 30px 0 0 18px;
      }

      .room-card {
        right: 8px;
        padding: 22px;
      }

      .room-window {
        top: 27px;
        left: 24px;
        width: 95px;
        height: 145px;
      }

      .air-conditioner {
        top: 52px;
        right: 22px;
        width: 210px;
      }

      .air-flow {
        top: 150px;
        right: 65px;
      }

      .technician-card {
        right: 18px;
        bottom: 80px;
        left: 18px;
        padding: 17px;
      }

      .technician-status {
        display: none;
      }

      .floating-rating {
        right: 5px;
        width: 180px;
      }

      .emergency-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 23px 0;
      }

      .emergency-content .button {
        width: 100%;
      }

      .services-grid,
      .process-grid,
      .stats-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        gap: 0;
      }

      .stat {
        border-top: 1px solid rgba(255, 255, 255, 0.13);
        border-left: 0;
      }

      .stat:first-child {
        border-top: 0;
      }

      .toolbox {
        top: 35px;
        right: 20px;
        left: 20px;
        padding: 23px;
      }

      .advantages-visual {
        min-height: 500px;
      }

      .contact-copy,
      .contact-form {
        padding: 34px 24px;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .contact-form {
        margin: 12px;
      }

      .footer-bottom {
        flex-direction: column;
      }

      .whatsapp-floating {
        right: 16px;
        bottom: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>

<body>
  <header class="site-header" id="header">
    <div class="container navbar">
      <a class="logo" href="#inicio" aria-label="ClimaFácil, inicio">
        <span class="logo-mark">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 2v20"></path>
            <path d="m4.93 4.93 14.14 14.14"></path>
            <path d="M2 12h20"></path>
            <path d="m4.93 19.07 14.14-14.14"></path>
          </svg>
        </span>

        Clima<strong>Fácil</strong>
      </a>

      <nav aria-label="Navegación principal">
        <ul class="nav-menu" id="navMenu">
          <li><a class="nav-link" href="#servicios">Servicios</a></li>
          <li><a class="nav-link" href="#ventajas">Ventajas</a></li>
          <li><a class="nav-link" href="#proceso">Cómo trabajamos</a></li>
          <li><a class="nav-link" href="#opiniones">Opiniones</a></li>
          <li><a class="nav-link" href="#preguntas">Preguntas</a></li>
        </ul>
      </nav>

      <div class="nav-actions">
        <a class="phone-link" href="tel:+34600000000">
          <svg
            class="icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"></path>
          </svg>

          600 000 000
        </a>

        <a class="button button-primary nav-button" href="#presupuesto">
          Pedir presupuesto
        </a>

        <button
          class="menu-button"
          id="menuButton"
          type="button"
          aria-label="Abrir menú"
          aria-expanded="false"
          aria-controls="navMenu"
        >
          <svg
            class="icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M4 7h16M4 12h16M4 17h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <main>
    <section class="hero" id="inicio">
      <div class="container hero-grid">
        <div class="hero-content reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Técnicos de climatización
          </span>

          <h1 class="hero-title">
            Tu hogar fresco,
            <span>cómodo y eficiente</span>
          </h1>

          <p class="hero-description">
            Instalamos, reparamos y realizamos el mantenimiento de equipos
            de aire acondicionado para viviendas, oficinas y pequeños
            comercios. Atención rápida y presupuesto sin compromiso.
          </p>

          <div class="hero-actions">
            <a class="button button-primary" href="#presupuesto">
              Solicitar presupuesto

              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M5 12h14M13 6l6 6-6 6"></path>
              </svg>
            </a>

            <a
              class="button button-secondary"
              href="https://wa.me/34600000000?text=Hola%2C%20quiero%20solicitar%20información%20sobre%20aire%20acondicionado"
              target="_blank"
              rel="noopener noreferrer"
            >
              Hablar por WhatsApp
            </a>
          </div>

          <div class="hero-trust">
            <span class="trust-item">
              <span class="check">✓</span>
              Presupuesto sin compromiso
            </span>

            <span class="trust-item">
              <span class="check">✓</span>
              Técnicos profesionales
            </span>

            <span class="trust-item">
              <span class="check">✓</span>
              Trabajo garantizado
            </span>
          </div>
        </div>

        <div class="hero-visual reveal">
          <div class="visual-background"></div>

          <div class="room-card">
            <div class="room-window"></div>

            <div class="air-conditioner">
              <div class="air-logo">
                <svg
                  class="icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="M12 2v20"></path>
                  <path d="m4.93 4.93 14.14 14.14"></path>
                  <path d="M2 12h20"></path>
                  <path d="m4.93 19.07 14.14-14.14"></path>
                </svg>

                ClimaFácil
              </div>

              <span class="temperature">22 °C</span>
            </div>

            <div class="air-flow" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>

            <div class="technician-card">
              <div class="technician-avatar">
                <svg
                  class="icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"></path>
                </svg>
              </div>

              <div class="technician-info">
                <span>Servicio solicitado</span>
                <strong>Instalación de split</strong>
              </div>

              <span class="technician-status">Confirmado</span>
            </div>
          </div>

          <div class="floating-rating">
            <div class="rating-stars">★★★★★</div>
            <strong>Clientes satisfechos</strong>
            <span>Servicio rápido, limpio y profesional</span>
          </div>
        </div>
      </div>
    </section>

    <section class="emergency-strip">
      <div class="container emergency-content">
        <div class="emergency-text">
          <div class="emergency-icon">
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="9"></circle>
              <path d="M12 7v5l3 2"></path>
            </svg>
          </div>

          <div>
            <strong>¿Tu aire acondicionado ha dejado de funcionar?</strong>
            <span>
              Solicita una revisión y te responderemos lo antes posible.
            </span>
          </div>
        </div>

        <a class="button button-accent" href="tel:+34600000000">
          Llamar ahora
        </a>
      </div>
    </section>

    <section class="section section-soft" id="servicios">
      <div class="container">
        <div class="section-header reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Nuestros servicios
          </span>

          <h2>Soluciones de climatización para cada necesidad</h2>

          <p>
            Cuidamos tu equipo desde la instalación inicial hasta las
            reparaciones y revisiones necesarias para prolongar su vida útil.
          </p>
        </div>

        <div class="services-grid">
          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="4" width="18" height="7" rx="2"></rect>
                <path d="M7 15c1.5 0 1.5 2 3 2s1.5-2 3-2 1.5 2 3 2"></path>
              </svg>
            </div>

            <h3>Instalación de equipos</h3>

            <p>
              Instalación de sistemas split y multisplit para viviendas,
              oficinas y pequeños negocios.
            </p>

            <a class="service-link" href="#presupuesto">
              Solicitar presupuesto
            </a>
          </article>

          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"></path>
              </svg>
            </div>

            <h3>Reparación de averías</h3>

            <p>
              Diagnóstico de equipos que no enfrían, pierden agua, hacen
              ruido o muestran códigos de error.
            </p>

            <a class="service-link" href="#presupuesto">
              Pedir una revisión
            </a>
          </article>

          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M3 6h18"></path>
                <path d="M7 12h10"></path>
                <path d="M10 18h4"></path>
              </svg>
            </div>

            <h3>Limpieza y mantenimiento</h3>

            <p>
              Limpieza de filtros, revisión del desagüe y mantenimiento
              preventivo para mejorar el rendimiento.
            </p>

            <a class="service-link" href="#presupuesto">
              Programar mantenimiento
            </a>
          </article>

          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M12 2v20"></path>
                <path d="m4.93 4.93 14.14 14.14"></path>
                <path d="M2 12h20"></path>
                <path d="m4.93 19.07 14.14-14.14"></path>
              </svg>
            </div>

            <h3>Revisión de refrigerante</h3>

            <p>
              Comprobación de fugas y carga de refrigerante cuando el equipo
              pierde capacidad de enfriamiento.
            </p>

            <a class="service-link" href="#presupuesto">
              Consultar servicio
            </a>
          </article>

          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M3 21h18"></path>
                <path d="M5 21V8l7-5 7 5v13"></path>
                <path d="M9 21v-6h6v6"></path>
              </svg>
            </div>

            <h3>Climatización comercial</h3>

            <p>
              Soluciones para tiendas, oficinas, restaurantes y pequeños
              locales comerciales.
            </p>

            <a class="service-link" href="#presupuesto">
              Solicitar visita
            </a>
          </article>

          <article class="service-card reveal">
            <div class="service-icon">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="12" cy="12" r="9"></circle>
                <path d="M12 7v5l3 2"></path>
              </svg>
            </div>

            <h3>Asesoramiento personalizado</h3>

            <p>
              Te ayudamos a elegir la potencia y el equipo apropiado según
              el espacio y el uso previsto.
            </p>

            <a class="service-link" href="#presupuesto">
              Recibir asesoramiento
            </a>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="ventajas">
      <div class="container advantages-grid">
        <div class="advantages-visual reveal">
          <div class="toolbox">
            <div class="toolbox-header">
              <div>
                <small>Revisión técnica</small>
                <h3>Equipo preparado</h3>
              </div>

              <span>Todo correcto</span>
            </div>

            <div class="tool-list">
              <div class="tool-item">
                <div class="tool-item-left">
                  <span class="tool-icon">°C</span>
                  <strong>Temperatura</strong>
                </div>

                <span class="tool-status">Correcta</span>
              </div>

              <div class="tool-item">
                <div class="tool-item-left">
                  <span class="tool-icon">≋</span>
                  <strong>Flujo de aire</strong>
                </div>

                <span class="tool-status">Óptimo</span>
              </div>

              <div class="tool-item">
                <div class="tool-item-left">
                  <span class="tool-icon">✓</span>
                  <strong>Seguridad</strong>
                </div>

                <span class="tool-status">Verificada</span>
              </div>
            </div>
          </div>

          <div class="experience-card">
            <strong>10+</strong>
            <span>Años de experiencia en climatización</span>
          </div>
        </div>

        <div class="advantages-content reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Servicio de confianza
          </span>

          <h2>Un trabajo profesional de principio a fin</h2>

          <p>
            Analizamos las necesidades del espacio, explicamos las opciones
            disponibles y realizamos cada instalación de forma ordenada.
          </p>

          <div class="advantage-list">
            <div class="advantage-item">
              <span class="advantage-number">1</span>

              <div>
                <h3>Presupuesto claro</h3>
                <p>
                  Conocerás el servicio recomendado y su coste antes de
                  comenzar.
                </p>
              </div>
            </div>

            <div class="advantage-item">
              <span class="advantage-number">2</span>

              <div>
                <h3>Atención personalizada</h3>
                <p>
                  Te asesoramos según las características de tu vivienda o
                  negocio.
                </p>
              </div>
            </div>

            <div class="advantage-item">
              <span class="advantage-number">3</span>

              <div>
                <h3>Instalación limpia</h3>
                <p>
                  Protegemos el espacio y retiramos los residuos generados
                  durante el trabajo.
                </p>
              </div>
            </div>

            <div class="advantage-item">
              <span class="advantage-number">4</span>

              <div>
                <h3>Garantía y seguimiento</h3>
                <p>
                  Comprobamos el equipo y explicamos cómo utilizarlo
                  correctamente.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-soft" id="proceso">
      <div class="container">
        <div class="section-header reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Cómo trabajamos
          </span>

          <h2>Solicita tu servicio en cuatro pasos</h2>

          <p>
            Un proceso sencillo para recibir asesoramiento y solucionar tus
            necesidades de climatización.
          </p>
        </div>

        <div class="process-grid">
          <article class="process-card reveal">
            <span class="process-step">1</span>
            <div class="process-icon">💬</div>
            <h3>Cuéntanos qué necesitas</h3>
            <p>Contacta por teléfono, WhatsApp o mediante el formulario.</p>
          </article>

          <article class="process-card reveal">
            <span class="process-step">2</span>
            <div class="process-icon">🔎</div>
            <h3>Valoramos el trabajo</h3>
            <p>Revisamos la información o concertamos una visita técnica.</p>
          </article>

          <article class="process-card reveal">
            <span class="process-step">3</span>
            <div class="process-icon">📅</div>
            <h3>Acordamos fecha y precio</h3>
            <p>Confirmamos el presupuesto y programamos el servicio.</p>
          </article>

          <article class="process-card reveal">
            <span class="process-step">4</span>
            <div class="process-icon">✓</div>
            <h3>Realizamos el servicio</h3>
            <p>Instalamos o reparamos el equipo y comprobamos el resultado.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="stats" aria-label="Datos destacados">
      <div class="container stats-grid reveal">
        <div class="stat">
          <strong>500+</strong>
          <span>Servicios realizados</span>
        </div>

        <div class="stat">
          <strong>10+</strong>
          <span>Años de experiencia</span>
        </div>

        <div class="stat">
          <strong>24 h</strong>
          <span>Respuesta habitual</span>
        </div>

        <div class="stat">
          <strong>4,9/5</strong>
          <span>Valoración de clientes</span>
        </div>
      </div>
    </section>

    <section class="section section-soft" id="opiniones">
      <div class="container">
        <div class="section-header reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Opiniones de clientes
          </span>

          <h2>La tranquilidad de recibir un buen servicio</h2>

          <p>
            Sustituye estos testimonios por reseñas reales de tu negocio.
          </p>
        </div>

        <div class="testimonials-grid">
          <article class="testimonial-card reveal">
            <div class="testimonial-stars">★★★★★</div>

            <blockquote>
              “Instalaron el aire acondicionado con mucho cuidado y dejaron
              todo limpio. El equipo funciona perfectamente.”
            </blockquote>

            <div class="testimonial-user">
              <span class="user-avatar">MR</span>

              <div>
                <strong>María Rodríguez</strong>
                <span>Instalación en vivienda</span>
              </div>
            </div>
          </article>

          <article class="testimonial-card reveal">
            <div class="testimonial-stars">★★★★★</div>

            <blockquote>
              “El aparato no enfriaba y localizaron el problema rápidamente.
              El trato fue claro y profesional.”
            </blockquote>

            <div class="testimonial-user">
              <span class="user-avatar">JG</span>

              <div>
                <strong>Javier Gómez</strong>
                <span>Reparación de equipo</span>
              </div>
            </div>
          </article>

          <article class="testimonial-card reveal">
            <div class="testimonial-stars">★★★★★</div>

            <blockquote>
              “Nos recomendaron el equipo adecuado para el local y organizaron
              la instalación sin interrumpir el negocio.”
            </blockquote>

            <div class="testimonial-user">
              <span class="user-avatar">LP</span>

              <div>
                <strong>Laura Pérez</strong>
                <span>Climatización de comercio</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="presupuesto">
      <div class="container">
        <div class="contact-wrapper reveal">
          <div class="contact-copy">
            <span class="eyebrow">
              <span class="eyebrow-dot"></span>
              Presupuesto sin compromiso
            </span>

            <h2>Cuéntanos qué servicio necesitas</h2>

            <p>
              Completa el formulario con los datos básicos. Puedes indicar
              el tipo de equipo, la avería o las características del espacio.
            </p>

            <div class="contact-benefits">
              <div class="contact-benefit">
                <span class="check">✓</span>
                Respuesta rápida y personalizada
              </div>

              <div class="contact-benefit">
                <span class="check">✓</span>
                Presupuesto claro antes de comenzar
              </div>

              <div class="contact-benefit">
                <span class="check">✓</span>
                Atención para viviendas y negocios
              </div>
            </div>

            <div class="contact-data">
              <a href="tel:+34600000000">
                <svg
                  class="icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"></path>
                </svg>

                600 000 000
              </a>

              <a href="mailto:info@climafacil.es">
                <span>✉</span>
                info@climafacil.es
              </a>
            </div>
          </div>

          <form class="contact-form" id="contactForm">
            <div class="form-row">
              <div class="form-group">
                <label for="name">Nombre</label>

                <input
                  class="form-control"
                  id="name"
                  name="name"
                  type="text"
                  placeholder="Tu nombre"
                  required
                >
              </div>

              <div class="form-group">
                <label for="phone">Teléfono</label>

                <input
                  class="form-control"
                  id="phone"
                  name="phone"
                  type="tel"
                  placeholder="600 000 000"
                  required
                >
              </div>
            </div>

            <div class="form-group">
              <label for="email">Correo electrónico</label>

              <input
                class="form-control"
                id="email"
                name="email"
                type="email"
                placeholder="nombre@correo.com"
                required
              >
            </div>

            <div class="form-group">
              <label for="service">Servicio que necesitas</label>

              <select
                class="form-control"
                id="service"
                name="service"
                required
              >
                <option value="">Selecciona una opción</option>
                <option value="instalacion">Instalación</option>
                <option value="reparacion">Reparación</option>
                <option value="mantenimiento">Mantenimiento</option>
                <option value="gas">Revisión de refrigerante</option>
                <option value="negocio">Climatización comercial</option>
              </select>
            </div>

            <div class="form-group">
              <label for="message">Cuéntanos qué necesitas</label>

              <textarea
                class="form-control"
                id="message"
                name="message"
                placeholder="Describe el equipo, la avería o el trabajo"
                required
              ></textarea>
            </div>

            <button
              class="button button-primary"
              style="width: 100%;"
              type="submit"
            >
              Solicitar presupuesto
            </button>

            <p class="privacy-note">
              Al enviar el formulario aceptas el tratamiento de tus datos
              para responder a la solicitud.
            </p>

            <div
              class="form-message"
              id="formMessage"
              role="status"
              aria-live="polite"
            >
              Solicitud enviada correctamente. Nos pondremos en contacto.
            </div>
          </form>
        </div>
      </div>
    </section>

    <section class="section section-soft" id="preguntas">
      <div class="container">
        <div class="section-header reveal">
          <span class="eyebrow">
            <span class="eyebrow-dot"></span>
            Preguntas frecuentes
          </span>

          <h2>Resuelve tus dudas sobre el servicio</h2>

          <p>
            Información útil antes de solicitar una instalación, reparación
            o mantenimiento.
          </p>
        </div>

        <div class="faq-list">
          <article class="faq-item reveal">
            <button
              class="faq-question"
              type="button"
              aria-expanded="false"
            >
              ¿Cuánto cuesta instalar un aire acondicionado?
              <span class="faq-symbol">+</span>
            </button>

            <div class="faq-answer">
              <div class="faq-answer-inner">
                <p>
                  El precio depende del equipo, la distancia entre las
                  unidades, los materiales y las características del inmueble.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal">
            <button
              class="faq-question"
              type="button"
              aria-expanded="false"
            >
              ¿Por qué mi aire acondicionado no enfría?
              <span class="faq-symbol">+</span>
            </button>

            <div class="faq-answer">
              <div class="faq-answer-inner">
                <p>
                  Puede deberse a filtros sucios, problemas eléctricos, falta
                  de refrigerante, una fuga o una avería interna.
                </p>
              </div>
            </div>
          </article>

          <article class="faq-item reveal">
            <button
              class="faq-question"
              type="button"
              aria-expanded="false"
            >
              ¿Cada cuánto tiempo debe limpiarse?
              <span class="faq-symbol">+</span>
            </button>

            <div class="faq-answer">
              <div class="faq-answer-inner">
                <p>
                  Los filtros deben revisarse con frecuencia durante los meses
                  de mayor uso. También es aconsejable una revisión profesional.
                </p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="logo" href="#inicio">
            <span class="logo-mark">❄</span>
            <span style="color: #ffffff;">
              Clima<span style="color: #38bdf8;">Fácil</span>
            </span>
          </a>

          <p>
            Instalación, reparación y mantenimiento de aire acondicionado
            para viviendas, oficinas y pequeños negocios.
          </p>
        </div>

        <div>
          <h3 class="footer-title">Servicios</h3>

          <ul class="footer-links">
            <li><a href="#servicios">Instalación</a></li>
            <li><a href="#servicios">Reparación</a></li>
            <li><a href="#servicios">Mantenimiento</a></li>
          </ul>
        </div>

        <div>
          <h3 class="footer-title">Información</h3>

          <ul class="footer-links">
            <li><a href="#ventajas">Ventajas</a></li>
            <li><a href="#opiniones">Opiniones</a></li>
            <li><a href="#preguntas">Preguntas frecuentes</a></li>
          </ul>
        </div>

        <div>
          <h3 class="footer-title">Legal</h3>

          <ul class="footer-links">
            <li><a href="#">Aviso legal</a></li>
            <li><a href="#">Privacidad</a></li>
            <li><a href="#">Cookies</a></li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <span>
          © <span id="currentYear"></span> ClimaFácil. Todos los derechos
          reservados.
        </span>

        <span>Instalación y reparación de aire acondicionado.</span>
      </div>
    </div>
  </footer>

  <a
    class="whatsapp-floating"
    href="https://wa.me/34600000000?text=Hola%2C%20quiero%20solicitar%20un%20presupuesto%20de%20aire%20acondicionado"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Contactar por WhatsApp"
  >
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.8"
      width="29"
      height="29"
    >
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6A8.38 8.38 0 0 1 12.5 3h.5a8.48 8.48 0 0 1 8 8z"></path>
    </svg>
  </a>

  <script>
    const header = document.getElementById("header");
    const menuButton = document.getElementById("menuButton");
    const navMenu = document.getElementById("navMenu");
    const navLinks = document.querySelectorAll(".nav-link");
    const revealElements = document.querySelectorAll(".reveal");
    const faqItems = document.querySelectorAll(".faq-item");
    const contactForm = document.getElementById("contactForm");
    const formMessage = document.getElementById("formMessage");
    const currentYear = document.getElementById("currentYear");

    function updateHeader() {
      header.classList.toggle("scrolled", window.scrollY > 20);
    }

    function closeMenu() {
      navMenu.classList.remove("active");
      document.body.classList.remove("menu-open");
      menuButton.setAttribute("aria-expanded", "false");
    }

    menuButton.addEventListener("click", () => {
      const isOpen = navMenu.classList.toggle("active");

      document.body.classList.toggle("menu-open", isOpen);
      menuButton.setAttribute("aria-expanded", String(isOpen));
    });

    navLinks.forEach((link) => {
      link.addEventListener("click", closeMenu);
    });

    window.addEventListener("scroll", updateHeader);
    updateHeader();

    const revealObserver = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) {
            return;
          }

          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        });
      },
      {
        threshold: 0.12
      }
    );

    revealElements.forEach((element) => {
      revealObserver.observe(element);
    });

    faqItems.forEach((item) => {
      const question = item.querySelector(".faq-question");

      question.addEventListener("click", () => {
        const isActive = item.classList.contains("active");

        faqItems.forEach((faqItem) => {
          faqItem.classList.remove("active");

          const faqButton = faqItem.querySelector(".faq-question");
          faqButton.setAttribute("aria-expanded", "false");
        });

        if (!isActive) {
          item.classList.add("active");
          question.setAttribute("aria-expanded", "true");
        }
      });
    });

    contactForm.addEventListener("submit", (event) => {
      event.preventDefault();
      formMessage.classList.add("visible");
      contactForm.reset();

      window.setTimeout(() => {
        formMessage.classList.remove("visible");
      }, 5000);
    });

    currentYear.textContent = new Date().getFullYear();
  </script>
</body>
</html>

Vista previa de la plantilla

La vista tiene su propio desplazamiento

Diseño visual relacionado con la climatización

La plantilla utiliza una combinación de azul, blanco y naranja. El azul transmite frescura, confianza y profesionalidad, mientras que el naranja ayuda a destacar botones y llamadas a la acción.

La sección principal incluye una representación visual de un equipo de aire acondicionado, indicadores de temperatura y una tarjeta de servicio técnico.

Todos estos elementos están realizados con HTML y CSS, por lo que no es obligatorio descargar imágenes adicionales para que el diseño funcione.

Aviso para reparaciones urgentes

Debajo de la portada se incluye una franja destacada para clientes que necesitan una revisión rápida.

Este bloque puede utilizarse para mostrar mensajes como:

Servicio de reparación.
Atención en menos de 24 horas.
Disponibilidad durante el verano.
Revisiones urgentes.
Teléfono de asistencia.

Es una sección especialmente útil durante los meses más calurosos, cuando muchas personas buscan soluciones inmediatas.

Servicios incluidos en la plantilla

La página dispone de tarjetas independientes para presentar los principales servicios del negocio.

Instalación de aire acondicionado

Permite explicar qué tipos de equipos se instalan: split, multisplit, sistemas por conductos o equipos para pequeños locales comerciales.

También puedes añadir información sobre marcas, garantía, materiales incluidos y zonas de instalación.

Reparación de averías

Esta tarjeta está pensada para clientes cuyo equipo no enfría, pierde agua, hace ruidos, emite malos olores o muestra códigos de error.

Es recomendable describir problemas habituales porque coinciden con las búsquedas que realizan muchos usuarios.

Limpieza y mantenimiento

El mantenimiento puede convertirse en un servicio recurrente para el negocio.

En esta sección puedes ofrecer:

Limpieza de filtros.
Desinfección de unidades.
Revisión del desagüe.
Comprobación del rendimiento.
Mantenimiento preventivo.
Preparación del equipo antes del verano.

Recarga de gas refrigerante

La plantilla también incluye un servicio relacionado con la comprobación de fugas y la carga de refrigerante.

Conviene explicar que la falta de gas puede ser consecuencia de una fuga y que el equipo debe revisarse antes de realizar una recarga.

Climatización para negocios

Esta sección está dirigida a oficinas, tiendas, restaurantes, academias y otros pequeños establecimientos.

Puedes adaptarla para ofrecer contratos de mantenimiento, instalaciones comerciales o revisiones periódicas.

Asesoramiento personalizado

No todos los clientes saben qué equipo necesitan. Por eso la plantilla incluye un servicio de asesoramiento.

El profesional puede valorar aspectos como:

Tamaño de la estancia.
Orientación del inmueble.
Número de ventanas.
Nivel de aislamiento.
Uso diario del espacio.
Consumo energético.
Número de personas que utilizan la habitación.

Sección para generar confianza

Una web de servicios locales debe transmitir seguridad antes de pedir al usuario que llame o deje sus datos.

La plantilla incorpora un bloque donde puedes destacar las principales ventajas del negocio:

Presupuestos claros.
Atención personalizada.
Instalaciones limpias.
Garantía del trabajo.
Experiencia profesional.
Rapidez de respuesta.

También incluye una tarjeta con información sobre los años de experiencia y una revisión visual del equipo.

Es importante sustituir los datos demostrativos por información verdadera. No conviene publicar números de clientes, años de experiencia o valoraciones que no puedan demostrarse.

Cómo funciona el proceso de contratación

La plantilla explica el proceso en cuatro pasos sencillos:

El cliente describe el servicio

El usuario puede contactar mediante teléfono, WhatsApp o formulario.

El profesional valora el trabajo

Dependiendo del servicio, puede solicitar fotografías, información sobre el equipo o concertar una visita.

Se acuerdan el precio y la fecha

El cliente recibe un presupuesto y confirma cuándo se realizará el trabajo.

Se realiza el servicio

El técnico instala, repara o revisa el equipo y comprueba su funcionamiento.

Mostrar el proceso ayuda a reducir la incertidumbre del cliente y hace que el servicio parezca más organizado.

Zonas de servicio

Para un negocio local es fundamental explicar claramente dónde trabaja.

La plantilla incluye una sección con un mapa decorativo y una lista de zonas. En el ejemplo se muestran diferentes áreas de Madrid, pero puedes sustituirlas por tus ciudades, municipios, barrios o códigos postales.

Por ejemplo:

Madrid Centro.
Carabanchel.
Usera.
Vallecas.
Getafe.
Leganés.
Alcorcón.
Móstoles.

No es necesario incluir demasiadas zonas. Es preferible seleccionar aquellas en las que realmente puedes ofrecer un servicio rápido.

También puedes crear páginas independientes para cada localidad si quieres mejorar el posicionamiento local de la web.

Opiniones de clientes

Las reseñas son uno de los elementos más importantes para una empresa de servicios.

La plantilla incluye tres tarjetas de testimonios con nombre, tipo de servicio y valoración.

Antes de publicar la web, sustituye los testimonios demostrativos por reseñas reales. Puedes utilizar comentarios recibidos en Google, siempre respetando la privacidad del cliente.

Una opinión útil suele mencionar:

Qué problema tenía el cliente.
Qué servicio se realizó.
Cómo fue la atención.
Si se cumplió el horario.
Si el espacio quedó limpio.
Si recomendaría al profesional.

Las reseñas específicas resultan más creíbles que frases generales como “excelente servicio”.

Formulario para solicitar presupuesto

El formulario recoge la información básica para valorar una solicitud:

Nombre.
Teléfono.
Correo electrónico.
Tipo de servicio.
Zona o código postal.
Descripción del problema.

Esta selección de campos permite recibir datos suficientes sin hacer que el formulario sea demasiado largo.

En la plantilla, el formulario funciona como demostración visual. Al enviarlo aparece un mensaje de confirmación, pero la información no se envía a ningún correo.

Para utilizarlo en una web real debes conectarlo con una de estas opciones:

Un archivo PHP.
Un servicio externo de formularios.
Una API.
Un plugin de WordPress.
Una plataforma de automatización.
Un sistema de gestión de clientes.

También puedes configurar el formulario para enviar directamente la información a WhatsApp.

Botón flotante de WhatsApp

La plantilla incluye un botón fijo en la esquina inferior de la pantalla.

Este botón permite que el visitante inicie una conversación sin buscar el número de teléfono dentro de la página.

Antes de publicar la web debes cambiar el número de ejemplo. En el enlace de WhatsApp, el teléfono debe escribirse con el prefijo internacional, sin espacios ni símbolos.

Por ejemplo, un número español debe comenzar por 34.

También puedes personalizar el mensaje inicial para que el cliente proporcione información útil:

“Hola, quiero solicitar un presupuesto de aire acondicionado. El servicio sería en [zona] y necesito [instalación, reparación o mantenimiento].”

Cómo personalizar la plantilla

La página está incluida en un único archivo HTML. En su interior encontrarás los estilos CSS y el código JavaScript.

Esto facilita la personalización porque no necesitas organizar diferentes carpetas para comenzar.

Cambiar el nombre del negocio

Busca el nombre ClimaFácil y reemplázalo por el nombre comercial del emprendedor.

Haz el cambio en:

Logotipo.
Encabezado.
Pie de página.
Título de la página.
Meta descripción.

Cambiar los datos de contacto

Debes modificar:

Número de teléfono.
Número de WhatsApp.
Correo electrónico.
Horarios.
Zonas de servicio.

Comprueba especialmente los enlaces que comienzan por tel:, mailto: y wa.me.

Modificar los colores

Los colores principales están definidos mediante variables CSS al principio del documento.

Puedes sustituir el azul por otro color relacionado con la identidad visual del negocio sin editar cada sección por separado.

También puedes cambiar el color naranja de los botones secundarios por amarillo, verde o rojo.

Añadir fotografías reales

Aunque la plantilla funciona sin imágenes, las fotografías reales pueden aumentar la confianza.

Puedes incluir imágenes de:

Instalaciones terminadas.
Técnicos trabajando.
Unidades interiores y exteriores.
Herramientas.
Vehículo comercial.
Equipo de trabajo.
Antes y después de una limpieza.

Utiliza fotografías propias y evita imágenes genéricas que no representen el servicio real.

Diseño responsive

La plantilla se adapta automáticamente a diferentes tamaños de pantalla.

En ordenadores, las secciones utilizan varias columnas para aprovechar el espacio disponible. En móviles, los contenidos se organizan verticalmente para facilitar la lectura.

También se adaptan:

El menú de navegación.
Los botones.
Las tarjetas de servicios.
El formulario.
Las estadísticas.
Las opiniones.
Las zonas de atención.
El botón de WhatsApp.

Antes de publicarla, revisa la página desde un teléfono real. Comprueba que los botones sean fáciles de pulsar y que los textos no sean demasiado largos.

Optimización para SEO local

La plantilla proporciona una buena estructura inicial, pero debes personalizarla para la ciudad donde trabaja el negocio.

En lugar de utilizar un título general como:

“Instalación y reparación de aire acondicionado”

puedes escribir:

“Instalación y reparación de aire acondicionado en Madrid”

También puedes incluir la ubicación dentro de:

Título SEO.
Meta descripción.
Encabezado principal.
Sección de servicios.
Zonas de atención.
Texto alternativo de las imágenes.
Datos de contacto.

Evita repetir el nombre de la ciudad de forma artificial. El contenido debe seguir siendo natural y útil.

Consejos para mejorar la plantilla

Añade precios orientativos

Puedes incluir precios desde una cantidad determinada, siempre que expliques qué elementos pueden modificar el presupuesto.

Conecta Google Maps

Sustituye el mapa decorativo por un mapa real cuando el negocio disponga de una dirección comercial o un área de servicio definida.

Añade un portafolio de trabajos

Una galería con instalaciones reales puede ayudar al cliente a valorar la calidad del servicio.

Incluye las marcas utilizadas

Puedes mostrar los fabricantes con los que trabajas, evitando dar a entender que existe una relación oficial cuando no sea así.

Configura Google Business Profile

La web puede enlazarse con el perfil de empresa de Google para mejorar la visibilidad en búsquedas locales y recibir reseñas.

Optimiza las imágenes

Convierte las fotografías a formatos ligeros como WebP y evita subir archivos excesivamente grandes.

Errores que debes evitar

No publiques la plantilla sin revisar los datos de ejemplo. Un teléfono incorrecto o un enlace de WhatsApp sin modificar puede hacer que pierdas clientes.

Tampoco debes mantener opiniones ficticias, cifras inventadas o zonas donde realmente no prestas servicio.

Otro error común es utilizar un formulario que visualmente parece funcionar, pero que no envía los mensajes. Realiza varias pruebas antes de publicar la web.

Por último, comprueba que la página incluya aviso legal, política de privacidad y política de cookies cuando sea necesario.

Código completo de la plantilla

A continuación puedes copiar el código completo de la plantilla y guardarlo en un archivo llamado index.html.

Después de abrirlo en el navegador, podrás modificar los textos, colores, servicios, datos de contacto y zonas de atención.

La plantilla está desarrollada únicamente con HTML, CSS y JavaScript, por lo que no necesita instalaciones adicionales.

Conclusión

Esta plantilla web para un negocio de aire acondicionado ofrece una base completa para que un emprendedor pueda presentar sus servicios y comenzar a captar clientes por internet.

Incluye llamadas a la acción, contacto por WhatsApp, formulario de presupuesto, servicios, zonas de atención, opiniones y preguntas frecuentes.

Puedes utilizarla como ejercicio de desarrollo web, adaptarla para un proyecto personal o convertirla en la página profesional de un técnico o pequeña empresa de climatización.

Lo más importante es sustituir todos los contenidos de ejemplo por información real y adaptar el diseño a la identidad del negocio.