/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.9
Updated: 2025-07-03 16:44:57

*/

/* ===== IMPORTAR FONT AWESOME ===== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://pro.fontawesome.com/releases/v5.10.0/css/all.css');

/* ===== CLASE WHATSAPP CON FONT AWESOME ===== */

.whatsapp-icon a{
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding-right: 30px; /* Espacio para el icono */
}

.whatsapp-icon a::after {
    content: "\f232"; /* Código Font Awesome para WhatsApp original */
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "fa-brands-400", "FontAwesome";
    font-weight: 400; /* Cambiado de 900 a 400 */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 24px; /* Tamaño del icono - puedes cambiarlo */
    color: #ffffff; /* Color blanco */
    position: absolute;
    top: 50%;
    right: 8px; /* Posición a la derecha del texto */
    transform: translateY(-50%);
    transition: all 0.3s ease;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}

.talk-icon a{
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding-right: 30px; /* Espacio para el icono */
}

.talk-icon a::after {
    content: "\f232"; /* Código Font Awesome para WhatsApp original */
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "fa-brands-400", "FontAwesome";
    font-weight: 400; /* Cambiado de 900 a 400 */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 34px; /* Tamaño del icono - puedes cambiarlo */
    color: #ffffff; /* Color blanco */
    position: absolute;
    top: 50%;
    right: 19px; /* Posición a la derecha del texto */
    transform: translateY(-50%);
    transition: all 0.3s ease;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}

/* ===== CLASE WHATSAPP RESPALDO ===== */

/* Versión de respaldo si Font Awesome no carga */
.whatsapp-icon-backup {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding-right: 25px;
}

.whatsapp-icon-backup::after {
    content: "📱"; /* Emoji como respaldo */
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    line-height: 1;
}

/* ===== ALTERNATIVAS SI NO FUNCIONA ===== */

/* Opción 1: Con emoji WhatsApp directo */
.whatsapp-emoji a::after {
    content: "💬"; /* Emoji de chat */
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    line-height: 1;
}

/* Opción 2: Con símbolo de teléfono */
.whatsapp-phone a::after {
    content: "📞"; /* Emoji de teléfono */
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    line-height: 1;
}

/* Opción 3: Con texto simple */
.whatsapp-text a::after {
    content: "WA"; /* Texto WA */
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    line-height: 1;
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 label{
    display: block;
    width: 100%;
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 input[type="text"], #form_bf343a2e-378c-42f4-9450-6719eb1b1738 input[type="email"] {
    background-color: #e6e6e6; /* Color de fondo claro */
    border: none;
    border-radius: 20px;
    height: 40px; /* Altura del campo de texto */
    margin-top: 10px;
	max-width: 100%;
	width: 100%;
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 select {
    background-color: #e6e6e6; /* Color de fondo claro */
    border: none;
    border-radius: 20px;
    height: 40px; /* Altura del campo de texto */
    margin-top: 10px;
	max-width: 100%;
    width: 100%; /* Ancho completo */
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 textarea {
    background-color: #e6e6e6; /* Color de fondo claro */
    border: none;
    border-radius: 20px;
    height: 140px; /* Altura del campo de texto */
    margin-top: 10px;
	max-width: 100%;
    width: 100%; /* Ancho completo */
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 button[type="submit"]{
  background: #6aaa86;
  border: transparent;
  border-radius: 11px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-weight: 500;
  height: 50px;
  margin-top: 20px;
  padding: 10px 80px;
}

#form_bf343a2e-378c-42f4-9450-6719eb1b1738 button[type="submit"]:hover{
    background: #609b7a;
}