body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6; 
        
    /* IMPORTANTE: Este padding-top debe ser mayor a la altura de la pleca (140px) */
    padding-top: 160px;
    background-color: #f8f9fa;
}

/* --- Estilos para la Pleca Superior Fija --- */
.pleca-fija {
            background-color: #fb701b; /* Fondo Naranja */
            color: #ffffff; /* Letras Blancas */
            z-index: 1030;
            padding-top: 15px; /* Padding superior de 15px como se solicitó */ 
            box-sizing: border-box; /* Asegura que el padding no incremente la altura total */
            border-bottom: 2px solid #fb701b; /* Borde sutil para separar del contenido */
        }

/* --- Estilos para el área del logo --- */
.logo-container .fa-globe {
    padding-top: 20px;
    font-size: 52px; 
    color: #ffffff; /* Ícono del logo en blanco */
}
        
.logo-container img {
    max-height: 80px; /* Ajusta la altura máxima de tu logo si usas una imagen */
}

/* --- Estilos para la información de contacto en la pleca --- */
.info-header {
    font-size: 0.9rem;
    text-align: right;
    color: #f0f0f0; /* Un blanco un poco menos intenso para mejor lectura */
}

.info-header p {
    margin-bottom: 2px;
}

.info-header .empresa {
    font-weight: 700;
    font-size: 1.2rem;
    color: #ffffff; /* El nombre de la empresa en blanco puro */
}

.info-header .whatsapp-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.info-header .whatsapp-link:hover {
    color: #cccccc;
}

.imagen-destacada{
    padding-top: 25px;
    padding-bottom: 25px;
}

/* --- Estilos para el contenido principal --- */
    .contenido-principal {
    padding-top: 20px;
    max-width: 960px; 
}

.contenido-principal h3 {
    color: #0d6efd;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.firma {
    text-align: center;
    margin-top: 3rem;
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
}

/* --- LÓGICA RESPONSIVA --- */

/* Estilos para MÓVILES (hasta 991px de ancho) */
@media (max-width: 991.98px) {
    body {
        /* Padding superior más grande para el header apilado */
        padding-top: 260px; 
    }

    .pleca-fija {
        height: auto; /* Altura automática para que quepa todo */
        padding-bottom: 20px;
    }

    /* Apilamos el logo y la info verticalmente */
    .pleca-fija .container-fluid {
        flex-direction: column; 
    }

    .info-header {
        text-align: center; /* Centramos el texto de contacto */
        margin-top: 15px; /* Espacio entre el logo y la info */
    }
}

/* Estilos para ESCRITORIO (992px de ancho o más) */
@media (min-width: 992px) {
    body {
        /* Padding superior justo para el header fijo de 140px */
        padding-top: 160px; 
    }

    .pleca-fija {
        height: 140px;
    }

    .info-header {
        text-align: right; /* Alineamos el texto a la derecha */
    }
}

.firmas {
    max-height: 60px;
}


/* =========================================
   ESTILOS PARA EL BOTÓN FLOTANTE DE WHATSAPP
   ========================================= */

.whatsapp-flotante {
  /* ----- Posicionamiento Fijo ----- */
  position: fixed;
  right: 25px; /* Distancia desde la derecha */
  top: 50%;    /* Posicionado a la mitad de la pantalla verticalmente */
  
  /* ----- Corrección de centrado vertical ----- */
  /* Lo subimos la mitad de su propia altura para que quede perfectamente centrado */
  transform: translateY(-50%); 
  
  /* ----- Apariencia del botón ----- */
  background-color: #25D366; /* Color verde oficial de WhatsApp */
  color: #FFFFFF;           /* Color del icono (blanco) */
  width: 60px;               /* Ancho del botón */
  height: 60px;              /* Alto del botón */
  border-radius: 50%;        /* Para hacerlo perfectamente circular */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Sombra para darle profundidad */

  /* ----- Centrado del icono dentro del círculo (Flexbox) ----- */
  display: flex;
  justify-content: center;
  align-items: center;

  /* ----- Capa y transición ----- */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  transition: all 0.3s ease; /* Transición suave para los efectos */
  text-decoration: none; /* Quitamos el subrayado del enlace */
}

/* Efecto al pasar el mouse por encima */
.whatsapp-flotante:hover {
  background-color: #128C7E; /* Un verde más oscuro al pasar el mouse */
  transform: translateY(-50%) scale(1.1); /* Lo hacemos un poco más grande */
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
}