
<style>
    /* Reinicio de márgenes y paddings globales */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Estilos generales */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* Contenedor principal del header */
    .header-container {
      background-color: #000; /* Fondo negro del header */
      height: 100px;          /* Altura fija */
      display: flex;          /* Activar flexbox */
      align-items: center;    /* Centrar verticalmente los elementos */
      justify-content: space-between; /* Espaciado entre los elementos */
      padding: 0 20px;        /* Espaciado horizontal */
    }

    /* Imagen lateral izquierda */
    .header-image-left {
      width: 87px;            /* Ancho de la imagen */
      height: 87px;           /* Altura de la imagen */
      border-radius: 50%;     /* Redondear bordes */
      animation: spin-left 7s linear infinite; /* Animación de giro izquierda a derecha (4 segundos) */
      display: block;         /* Asegurar comportamiento inline-block */
      border: none;           /* Eliminar cualquier borde no deseado */
    }

    /* Imagen lateral derecha (WhatsApp) */
    .header-image-right {
      width: 87px;            /* Ancho de la imagen */
      height: 87px;           /* Altura de la imagen */
      border-radius: 50%;     /* Redondear bordes */
      border: 3px solid #FFD700; /* Borde amarillo */
      cursor: pointer;        /* Cambia el cursor al pasar sobre la imagen */
      animation: spin-right 12s linear infinite; /* Animación de giro derecha a izquierda (12 segundos) */
      display: block;         /* Asegurar comportamiento inline-block */
      background: none;       /* Eliminar cualquier fondo por defecto */
      outline: none;          /* Eliminar efecto de foco al hacer clic */
    }

    /* Enlace sin efectos de foco */
    a:focus {
      outline: none; /* Eliminar el contorno de foco alrededor del enlace */
    }

    /* Animación de giro izquierda a derecha */
    @keyframes spin-left {
      from {
        transform: rotate(0deg); /* Posición inicial */
      }
      to {
        transform: rotate(360deg); /* Giro completo */
      }
    }

    /* Animación de giro derecha a izquierda */
    @keyframes spin-right {
      from {
        transform: rotate(0deg); /* Posición inicial */
      }
      to {
        transform: rotate(-360deg); /* Giro completo */
      }
    }

    /* Contenedor del texto */
    .header-text {
      text-align: center;     /* Centrar texto */
      flex: 1;                /* Ocupar el espacio restante */
    }

    /* Texto principal */
    .header-title {
      font-family: "Times New Roman", serif; /* Fuente Times New Roman */
      font-size: 27px;          /* Tamaño del texto */
      font-weight: bold;        /* Negrita */
      color: transparent;       /* Texto transparente */
      background: url('../IMG/FUEGO.gif') no-repeat center;
      background-size: cover;   /* Asegurar que el GIF cubra todo el texto */
      -webkit-background-clip: text; /* Clip del fondo dentro del texto */
      -webkit-text-fill-color: transparent; /* Fondo transparente para mostrar el GIF */
      margin: 0; /* Sin márgenes */
    }

    /* Subtítulo */
    .header-subtitle {
      font-family: "Times New Roman", serif; /* Fuente Times New Roman */
      font-size: 27px;         /* Tamaño del subtítulo */
      color: #00BFFF;          /* Texto en color celeste */
      margin: 0;               /* Sin márgenes */
    }

    /* Estilos para dispositivos móviles */
    @media (max-width: 768px) {
      .header-image-left, 
      .header-image-right { 
        display: none; /* Ocultar imágenes en versión móvil */
      }

      .header-container {
        justify-content: center; /* Centrar solo el texto */
      }
    }
  </style>