/**
Theme Name: triscanveterinaria
Author: Origami Soluciones
Author URI: http://wpastra.com/about/
Description: Web Corporativa de Triscan Veterinaria
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: triscanveterinaria
Template: astra
*/

/* ==========================================================================
   0. VARIABLES GLOBALES (:root)
   ========================================================================== 
   Agrupamos todos los colores y valores repetidos aquí. 
   Por qué: Si el cliente decide cambiar el tono de amarillo o morado, 
   solo cambias una línea de código en lugar de buscar por todo el archivo.
*/
:root {
    /* Colores base */
    --color-blanco: #ffffff;
    --color-negro: #000000;
    
    /* Colores de botones y destacados */
    --color-primario: #f5d93b;
    --color-primario-hover: #b19b1f;
    
    /* Colores de formulario y tipografía */
    --color-texto-mutado: #696969;
    --color-foco-input: #6E57D6; /* Morado para el focus */
    
    /* Colores de enlaces */
    --color-enlace: #2A1B71;
    --color-enlace-hover: #2a1b71bb;
    
    /* Efectos y animaciones */
    --transicion-rapida: all 0.2s ease-out;
    --desenfoque-menu: blur(12px);
}

/* ==========================================================================
   1. RESET Y BASE
   ========================================================================== */

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    background-color: var(--color-blanco);
}

/* ==========================================================================
   2. LAYOUT GENERAL Y TIPOGRAFÍAS GLOBALES
   ========================================================================== */

#content .elementor-icon-list-text span a, 
.formularios a, 
.elementor-59 .elementor-element.elementor-element-44a79a9 a {
    color: var(--color-enlace);
    font-weight: 650;
}

#content .elementor-icon-list-text span a:hover, 
.formularios a:hover, 
.elementor-59 .elementor-element.elementor-element-44a79a9 a:hover {
    color: var(--color-enlace-hover);
}

.elementor-icon-list-text span {
    display: flex;
    gap: 12px;
}

footer.ast-custom-footer a{
	color: var(--color-blanco) !important;
}
footer.ast-custom-footer a:hover{
	color: var(--color-primario) !important;
}

.ast-builder-html-element .botonCita{
	transition-duration: .3s !important;
}

/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --- 3.1. CABECERA (HEADER) --- */
/* Degradado para mejorar la accesibilidad (lectura sobre imágenes) */
.ast-theme-transparent-header .main-header-bar:not(.ast-sticky-active) {
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%) !important;
}

.ast-theme-transparent-header [CLASS*="ast-header-button-"] .ast-custom-button {
    background-color: var(--color-primario) !important;
    color: var(--color-negro) !important;
}

.ast-theme-transparent-header [CLASS*="ast-header-button-"] .ast-custom-button:hover {
    background-color: var(--color-primario-hover) !important;
    color: var(--color-blanco) !important;
}

/* --- 3.2. CARRUSEL DE IMÁGENES --- */
/* Forzar el carrusel a ocupar todo el ancho de la pantalla (Full-width breakout) */
.carrusel {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Prevenir que elementos contenedores recorten el carrusel */
.carrusel .elementor-widget-container,
.carrusel .swiper,
.carrusel .swiper-container {
    overflow: visible !important;
    clip-path: none !important;
}

/*Formularios*/
.formularios .wpforms-field-container {
    display: flex !important;
    flex-direction: column !important;
	gap: 35px !important;
}
/* Errores de Validación - Posicionamiento absoluto en el hueco dejado por padding-bottom */
.formularios em.wpforms-error,
.formularios label.wpforms-error{
    position: absolute !important; 
    bottom: -5; 
    left: 0;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1;
    width: 100%;
}

.formularios .wpforms-field-checkbox em.wpforms-error,
.formularios .wpforms-field-checkbox label.wpforms-error{
    text-align: left;
}

/* --- EFECTO FLOATING LABELS (Etiquetas animadas) --- */
/* Ocultamos placeholder nativo */
.formularios input::placeholder,
.formularios textarea::placeholder {
    color: transparent !important;
}

/* Inputs debajo de las etiquetas */
.formularios input,
.formularios textarea {
    position: relative !important;
    z-index: 1 !important;
}

/* Estilo de la etiqueta en reposo */
.formularios .wpforms-field-label {
    display: block !important;
    position: absolute;
    top: 15px; 
    left: 15px;
    background:transparent !important;
    padding: 0 6px !important;
    color: var(--color-texto-mutado);
    font-size: 16px;
    font-weight: normal;
    pointer-events: none; /* Permite hacer clic "a través" de la etiqueta hacia el input */
    transition: var(--transicion-rapida);
    z-index: 5 !important;
    margin: 0 !important;
}

/* Animación: la etiqueta sube al enfocar o al tener texto */
.formularios .wpforms-field:focus-within .wpforms-field-label,
.formularios .wpforms-field:has(input:not(:placeholder-shown)) .wpforms-field-label,
.formularios .wpforms-field:has(textarea:not(:placeholder-shown)) .wpforms-field-label {
    top: -2px;
    left: 10px;
    font-size: 13px;
    color: var(--color-foco-input);
    font-weight: 500;
}

/* Color activo al seleccionar el campo */
.formularios input:focus,
.formularios textarea:focus {
    border-color: var(--color-foco-input) !important;
    outline: none !important;
}

/* Restaurar comportamiento normal para la etiqueta del checkbox */
.formularios .wpforms-field-checkbox .wpforms-field-label {
    position: static !important;
    display: inline-block !important;
    pointer-events: auto;
    padding: 0 !important;
    background-color: transparent !important; 
    color: var(--color-negro) !important;
    font-size: 1rem !important;
    z-index: auto !important;
}

/* --- 3.4. MENÚ MÓVIL (Off-canvas) --- */
/* Fondo Translúcido (Glassmorphism) */
#ast-mobile-popup .ast-mobile-popup-inner {
    background-color: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: var(--desenfoque-menu) !important; 
    -webkit-backdrop-filter: var(--desenfoque-menu) !important; 
}

/* Ocultar capa oscura de Astra */
.ast-mobile-popup-overlay {
    background-color: transparent !important;
}

/* Bloquear scroll de la página principal al abrir el menú */
body:has(#ast-mobile-popup.active) {
    overflow: hidden !important;
}

/* Estructura Grid del Menú Móvil */
.ast-mobile-popup-content {
    display: grid !important;
    grid-template-rows: 1fr auto; /* Navegación arriba, Botones abajo */
    grid-template-columns: auto auto; /* Botón a la izq, Redes a la der */
    min-height: 95% !important;
    box-sizing: border-box !important;
    overflow-y: hidden !important; 
    justify-content: center; 
    padding-bottom: 10px;
}

/* Navegación (Centrada) */
.ast-builder-menu-mobile {
    grid-row: 1; 
    grid-column: 1 / span 2; 
    align-self: center; 
    width: 100%;
}

.ast-builder-menu-mobile .main-navigation ul li {
    text-align: center !important;
}

.ast-builder-menu-mobile .main-navigation ul li a {
    justify-content: center !important; 
    border-bottom: none !important; 
}

/* Botón inferior izquierdo */
.ast-builder-button-mobile {
    grid-area: 2 / 1 / 3 / 2;
    align-self: center;
    justify-self: end; 
    margin-right: 10px !important;
}

/* Redes sociales inferior derecho */
.ast-builder-social-mobile {
    grid-area: 2 / 2 / 3 / 3;
    align-self: center;
    justify-self: start; 
    margin-left: 10px !important;
}

/* ==========================================================================
   4. RESPONSIVE (MEDIA QUERIES)
   ========================================================================== 
   Agrupamos todas las adaptaciones móviles al final respetando el flujo natural.
*/

@media (min-width: 1024px) {
    /* 1. Contenedor principal del menú (la etiqueta <ul>) */
    .main-header-menu.ast-nav-menu {
        flex-wrap: nowrap !important;
        justify-content: center;
        width: 100%;
    }

    /* 2. Elementos individuales de la lista (las etiquetas <li>) */
    .main-header-menu.ast-nav-menu .menu-item {
        flex: 0 1 auto;
    }

    /* 3. Enlaces dentro del menú (las etiquetas <a>) */
    .main-header-menu.ast-nav-menu .menu-item a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* --- Tablets y Móviles Grandes (Max: 767px) --- */
@media (max-width: 767px) {
    /* Destruir Grid de 2 columnas y pasar a 1 columna */
    .formularios .wpforms-field-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .formularios .wpforms-field-label {
        font-size: 0.9rem !important;
    }

    .formularios .wpforms-field,
    .formularios .wpforms-field-textarea {
        grid-area: auto !important;
        width: 100% !important;
    }

    /* Ajuste de alturas para inputs móviles */
    .formularios input[type="text"],
    .formularios input[type="email"],
    .formularios input[type="tel"] {
        height: 52px !important; 
        min-height: 52px !important;
        overflow: hidden !important; 
    }

    .formularios .wpforms-field-textarea textarea {
        height: 130px !important;
        min-height: 130px !important;
        overflow-y: auto !important;
    }

    .formularios .wpforms-field-checkbox {
        margin-top: 10px !important;
    }
	.wsp-pages-title{
		font-size:2.5rem;
	}
	.wsp-pages-list .page_item a{
		font-size:0.9rem
	}
	    
    .formularios .wpforms-field-label, .formularios input[type="checkbox"] ~ label{
        font-size: 0.8rem !important;
    }
    
    /* Limpieza de iconos no vitales en pantallas muy pequeñas */
    a.ast-builder-social-element.ast-facebook,
    a.ast-builder-social-element.ast-twitter-x {
        display: none !important;
    }
    
    /* Alineación de teléfono y WhatsApp */
    .ast-mobile-popup-content .ast-builder-social-mobile,
    .ast-mobile-popup-content .ast-builder-social-element {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    
    /* Transformación de botones a estilo "Pastilla" */
    .ast-builder-button-mobile .ast-custom-button {
        border-radius: 30px !important; 
        padding: 8px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .ast-builder-social-mobile .ast-phone {
        border-radius: 30px !important; 
        padding: 8px 14px !important;
        width: auto !important; 
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        margin-right: 5px !important; 
    }

    /* Inyectar número de teléfono directamente desde CSS */
    .ast-builder-social-mobile .ast-phone::after {
        content: "698 127 775";
        font-family: inherit;
        font-weight: bold;
        font-size: 14px;
        margin-left: 6px; 
    }

    .ast-builder-social-mobile .ast-phone svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Estilo circular para WhatsApp */
    .ast-builder-social-mobile .ast-whatsapp {
        border-radius: 50% !important; 
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .ast-builder-social-mobile .ast-whatsapp svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .ast-header-social-1-wrap {
        margin-left: 0px !important;
    }
	
	.wsp-pages-title{
		font-size:2rem;
	}
	.wsp-pages-list .page_item a{
		font-size:0.8rem
	}
}