/* Color base de texto (evitamos usar el selector universal *) */
body{
  color: #fff; /* antes: #ffff */
}

/* Iconos del footer */
#whatsapp-icon-footer,
#linkedin-icon-footer,
#email-icon,
#location-icon{
  font-size: clamp(40px, 6vw, 75px);
  line-height: 1;
  transition: transform .2s ease, opacity .2s ease, color .2s ease, background-color .2s ease;
}

/* >>> NUEVO: color del icono de email por defecto y en hover/focus (azul como LinkedIn) */
#email-icon{
  color: #fff; /* estado normal, igual que los demás */
}

/* Hover solo en dispositivos con puntero/hover */
@media (hover: hover) and (pointer: fine){
  #whatsapp-icon-footer:hover,
  #linkedin-icon-footer:hover,
  #email-icon:hover,
  #location-icon:hover{
    transform: scale(1.06);
    opacity: .9;
  }

  /* >>> NUEVO: email en azul + fondo blanco al pasar el mouse (match LinkedIn) */
  #email-icon:hover{
    color: #0A66C2;         /* azul LinkedIn */
  }
}

/* >>> NUEVO: mismo estilo cuando navegas con teclado (accesible) */
#email-icon:focus{
  color: #0A66C2;
  background-color: #fff;
  border-radius: 50%;
  padding: .25rem;
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}

/* Link de email en blanco */
a.link-blanco,
a.link-blanco:link,
a.link-blanco:visited {
  color: #fff;
  text-decoration: none;
}

a.link-blanco:hover,
a.link-blanco:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Campos y botones: sin !important y compatibles con Bootstrap */
.form-control,
.btn,
input,
textarea,
button{
  border-radius: 0; /* reemplaza el !important anterior */
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
  color: inherit;
}

/* Placeholders legibles en fondo oscuro */
.form-control::placeholder,
textarea::placeholder{
  color: rgba(255,255,255,.7);
}

/* Enfoque accesible (no perder el foco) */
.form-control:focus,
.btn:focus{
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
  box-shadow: none;
}

/* MOBILE */
@media only screen and (max-width: 600px){
  /* Iconos más chicos en móvil */
  #whatsapp-icon-footer,
  #email-icon,
  #linkedin-icon-footer,
  #location-icon{
    font-size: 48px;
  }
}