/*
Theme Name: Astra Child
Template: astra
*/

/* ========================================= */
/* CABECERA                     */
/* ========================================= */

/* Asegurar que el submenú de "Más" se adapte al contenido si metemos items largos */
#menu-item-4000 .sub-menu {
    min-width: 240px; /* Un poco más ancho por defecto */
}


/* Aseguramos que el botón en sí no tenga colores raros */
.ast-mobile-menu-trigger {
    color: #000000 !important;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    fill: #000000!important;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    width: 30px;
    height: 30px;
}

header#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* Compensación por la barra de administración de WordPress (si estás logueado) */
body.admin-bar header#masthead {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar header#masthead {
        top: 46px !important;
    }
}

/* Compensación del contenido principal (EVITA que el contenido se oculte bajo la cabecera) */
body #page {
    padding-top: 100px;
}

ul.sub-menu a:hover{
    text-decoration: underline;
    color: #c2f3c0!important;
}

/* Estilo Base del Botón (Clase .yogamudra-btn) */
.yogamudra-btn { 
	display: ruby-text;
padding: 12px 25px; 
    font-weight: 500;
	font-family: Catamaran!important;
    font-size: 16px;
    text-align: center;
    text-decoration: none; 
    border-radius: 8px; /* Bordes redondeados similares a la imagen */
    cursor: pointer;
    transition: background-color 0.3s ease; 
    border: 1px solid transparent; /* Aseguramos un borde transparente para que la caja no salte */
}

/* Estilo para el Botón Principal (Clase .yogamudra-btn-principal) */
.yogamudra-btn-principal {
    color: #000000; /* Texto blanco */
    background-color: #ffffff; /* Verde brillante similar al de la imagen */
    /* Eliminamos la sombra (box-shadow) para un aspecto más plano y limpio, como la imagen */
}

/* Estado :hover (al pasar el ratón) */
.yogamudra-btn-principal:hover {
    background-color: #c2f3c0; /* Verde un poco más oscuro al pasar el ratón */
}


/* 1. Contenedor: Alinea los iconos horizontalmente (uno al lado del otro) */
.yogamudra-sociales-contenedor {
    display: flex; /* La clave para poner los hijos en línea */
    align-items: center; /* Alineación vertical centrada (por si acaso) */
    gap: 15px; /* Añade un espacio de 15px entre el icono de Facebook y el de Instagram */
    margin: 0; /* Aseguramos que no haya márgenes externos */
    padding: 0; /* Aseguramos que no haya rellenos externos */
}

/* 2. Estilo del enlace: Asegura que el tamaño de la imagen es correcto y que el enlace es un bloque. */
.yogamudra-social-enlace img {
    width: 20px;
    height: auto;
    display: block; /* Asegura que la imagen respeta el width */
    margin: 0; /* Elimina cualquier margen residual en las imágenes */
}

/* 1. Estado Base: Aseguramos una transición suave (0.3 segundos) */
.yogamudra-social-enlace {
    /* La transición se aplica al enlace para que el cambio de opacidad sea suave */
    transition: opacity 0.3s ease; 
}

/* 2. Estado Hover: Opacidad baja a 0.5 (50% de transparencia) */
.yogamudra-social-enlace:hover {
    opacity: 0.5;
}

/* Texto menu cabecera */
nav a {
    text-transform: none !important;
    font-size:16px!important;
    font-weight:500;
    font-family:Catamaran!important;
}

/* CANCELACIÓN UPPERCASE */
h1, h2, h3, h4, h5, h6, p,a 
.elementor-heading-title {
    text-transform: none !important;
}


/* FORMULARIO */
/* ======================================================= */
/* DISEÑO FORMULARIO - VERSIÓN SEGURA (SIN SIMBOLOS >)     */
/* ======================================================= */

/* 1. Contenedor Flexible */
#wpcf7-f3844-p3907-o1 form {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 0;
}

/* 2. Columnas (Nombre, Email, Teléfono) */
/* NOTA: Hemos quitado el simbolo ">" para evitar el error de marcado */
#wpcf7-f3844-p3907-o1 form p:nth-of-type(1),
#wpcf7-f3844-p3907-o1 form p:nth-of-type(2),
#wpcf7-f3844-p3907-o1 form p:nth-of-type(3) {
    width: 32%; 
    margin-bottom: 20px; 
    margin-top: 0;
}

/* 3. Filas completas (Mensaje, Aceptación, Botón) */
#wpcf7-f3844-p3907-o1 form p:nth-of-type(4),
#wpcf7-f3844-p3907-o1 form p:nth-of-type(5),
#wpcf7-f3844-p3907-o1 form p:nth-of-type(6) {
    width: 100%;
    margin-bottom: 20px; 
    margin-top: 0;
}

/* 4. Estilo de los Inputs */
#wpcf7-f3844-p3907-o1 input:not([type="submit"]):not([type="checkbox"]),
#wpcf7-f3844-p3907-o1 textarea,
#wpcf7-f3844-p3907-o1 select { 
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    background-color: #fff;
    margin-top: 5px; 
    display: block; 
}

/* Altura del mensaje */
#wpcf7-f3844-p3907-o1 textarea {
    height: 150px; 
}

/* Checkbox */
#wpcf7-f3844-p3907-o1 .wpcf7-acceptance {
    font-size: 14px;
}

/* 5. Botón Enviar (Negro, Izquierda) */
#wpcf7-f3844-p3907-o1 input[type="submit"] {
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    float: left; 
    margin-bottom: 0; 
}

#wpcf7-f3844-p3907-o1 input[type="submit"]:hover {
    background-color: #333333; 
}

/* ========================================= */
/* 6. MÓVIL (RESPONSIVE)                     */
/* ========================================= */

@media (max-width: 768px) {
    #wpcf7-f3844-p3907-o1 form p:nth-of-type(1),
    #wpcf7-f3844-p3907-o1 form p:nth-of-type(2),
    #wpcf7-f3844-p3907-o1 form p:nth-of-type(3) {
        width: 100%; 
    }
}

/* ======================================================= */
/* FORMULARIO 2 (ID 3837) - TEXTO BLANCO / BOTÓN BLANCO    */
/* ======================================================= */

/* 1. Color del texto general BLANCO */
#wpcf7-f3844-p3837-o1 {
    color: #ffffff;
}
#wpcf7-f3844-p3837-o1 label {
    color: #ffffff;
}
#wpcf7-f3844-p3837-o1 a {
    color: #ffffff; /* Enlace política privacidad blanco */
    text-decoration: underline;
}

/* 2. Contenedor Flexible (Igual que el anterior) */
#wpcf7-f3844-p3837-o1 form {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 0;
}

/* 3. Columnas (Nombre, Email, Teléfono) */
#wpcf7-f3844-p3837-o1 form p:nth-of-type(1),
#wpcf7-f3844-p3837-o1 form p:nth-of-type(2),
#wpcf7-f3844-p3837-o1 form p:nth-of-type(3) {
    width: 32%; 
    margin-bottom: 20px; 
    margin-top: 0;
}

/* 4. Filas completas (Mensaje, Aceptación, Botón) */
#wpcf7-f3844-p3837-o1 form p:nth-of-type(4),
#wpcf7-f3844-p3837-o1 form p:nth-of-type(5),
#wpcf7-f3844-p3837-o1 form p:nth-of-type(6) {
    width: 100%;
    margin-bottom: 20px; 
    margin-top: 0;
}

/* 5. Estilo de los Inputs */
#wpcf7-f3844-p3837-o1 input:not([type="submit"]):not([type="checkbox"]),
#wpcf7-f3844-p3837-o1 textarea,
#wpcf7-f3844-p3837-o1 select { 
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    background-color: #fff; /* Fondo blanco para escribir */
    color: #000; /* Texto negro al escribir */
    margin-top: 5px; 
    display: block; 
}

/* Altura del mensaje */
#wpcf7-f3844-p3837-o1 textarea {
    height: 150px; 
}

/* Checkbox tamaño letra */
#wpcf7-f3844-p3837-o1 .wpcf7-acceptance {
    font-size: 14px;
}

/* 6. BOTÓN ENVIAR (BLANCO CON TEXTO NEGRO) */
#wpcf7-f3844-p3837-o1 input[type="submit"] {
    background-color: #ffffff; /* Fondo Blanco */
    color: #000000; /* Texto Negro */
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    float: left; 
    margin-bottom: 0; 
}

#wpcf7-f3844-p3837-o1 input[type="submit"]:hover {
    background-color: #e6e6e6; /* Gris muy clarito al pasar el ratón */
    color: #000000;
}

/* ========================================= */
/* 7. MÓVIL (RESPONSIVE)                     */
/* ========================================= */

@media (max-width: 768px) {
    #wpcf7-f3844-p3837-o1 form p:nth-of-type(1),
    #wpcf7-f3844-p3837-o1 form p:nth-of-type(2),
    #wpcf7-f3844-p3837-o1 form p:nth-of-type(3) {
        width: 100%; 
    }
}

/* FORMULARIO OCULTO PARA EVITAR SPAM */
.yoga-field-verify {
    display: none !important;
    visibility: hidden;
}


/* ========================================= */
/* WHATSAPP CHAT MODERNO                     */
/* ========================================= */

.whatsapp-wrapper {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea todo a la derecha */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Tipografía sistema tipo WhatsApp */
}

/* --- Botón Flotante (Círculo Verde) --- */
.whatsapp-float {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin-top: 10px;
    background-color: #53cc60;
    color: #FFF;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s;
}

/* Efecto Hover (al pasar el ratón) */
.whatsapp-float:hover {
    background-color: #46b350; /* Un poco más oscuro */
    transform: scale(1.1); /* Efecto de zoom */
}

/* Asegurar que el icono SVG dentro sea blanco */
.whatsapp-float svg {
    fill: white !important;
    width: 35px !important;
    height: 35px !important;
}

/* Caja del Chat */
.whatsapp-chat-box {
    width: 300px; /* Un poco más ancho para que respire */
    background: #e5ddd5; /* Color de fallback */
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    
    /* Animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.whatsapp-chat-box.mostrar-chat {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cabecera Verde */
.chat-header {
    background-color: #53cc60; /* Verde más similar a la referencia */
    color: white;
    padding: 12px 18px; /* Padding reducido para quitar altura excesiva */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-title {
    font-weight: 600;
    font-size: 16px;
}

#close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    line-height: 20px;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
}
#close-chat:hover {
    opacity: 1;
}

/* Cuerpo del chat (Fondo con imagen) */
.chat-body {
    padding: 20px;
    /* Imagen de fondo proporcionada */
    background-image: url('https://www.yogamudra.es/wp-content/uploads/2026/01/bg_whatsapp.webp');
    background-repeat: repeat; 
    background-size: 300px; /* Ajuste del patrón */
    position: relative;
}

/* Burbuja de mensaje blanca */
.chat-message p {
    background: white;
    padding: 15px 18px;
    border-radius: 0px 8px 8px 8px; /* Esquina superior izq cuadrada simulando bocadillo */
    font-size: 16px; /* Letra más grande */
    color: #4a4a4a; /* Gris oscuro para el texto */
    margin: 0 0 15px 0;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
}

/* Triangulito del bocadillo */
.chat-message p::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 10px solid white;
    border-left: 10px solid transparent;
}

/* Contenedor del botón para alinear a la derecha */
.chat-footer-btn {
    text-align: right; /* Alineación a la derecha clave */
}

/* Botón "Ir a WhatsApp" */
.chat-btn-link {
    display: inline-block; /* Ya no ocupa todo el ancho */
    background-color: #53cc60; /* Mismo verde que header */
    color: white !important;
    text-align: center;
    padding: 10px 24px;
    border-radius: 25px; /* Bordes muy redondeados tipo pastilla */
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: transform 0.2s, background 0.2s;
}

.chat-btn-link:hover {
    background-color: #46b350;
    transform: translateY(-2px);
}

/* Ajuste móvil */
@media screen and (max-width: 767px) {
    .whatsapp-wrapper {
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-chat-box {
        width: 260px;
    }
}

/* Invisibilidad para la encuesta */
#wrapper-whatsapp, .whatsapp-wrapper {
    pointer-events: none !important;
    background: transparent !important; 
}

#wrapper-whatsapp > *, .whatsapp-wrapper > * {
    pointer-events: auto !important;
    pointer-events: all !important; /* Fallback para algunos navegadores */
}

.chat-window,
.chat-btn-link,
.chat-message,
.chat-header {
    pointer-events: auto !important;
}