/*!
Theme Name: Vault Child
Theme URI: https://uicore.co
Description: Multi-Purpose Elementor WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: vault
Version: 1.1.0
Text Domain: vault
*/

/* ==========================================================================
   Alto Control — estilos globales del sitio
   La tipografía (Calibri), los colores y los tamaños de títulos se configuran
   en Vault › Theme Options. Aquí solo va lo que Theme Options no cubre.
   Los estilos propios de cada widget están en el plugin "Alto Control Widgets".
   ========================================================================== */

/* Variables de diseño: toman los colores globales de Theme Options */
:root {
	--ac-font: "Calibri", sans-serif;
	--ac-dark: var(--uicore-dark-color, #20262c);
	--ac-text: var(--uicore-headline-color, #262626);
	--ac-grey: var(--uicore-body-color, #6d7378);
	--ac-turq: var(--uicore-primary-color, #4ae8cd);
	--ac-orange: var(--uicore-secondary-color, #ff7a00);
	--ac-light: var(--uicore-light-color, #f4f7f8);
	--ac-teal: var(--uicore-accent-color, #36b8bd);
	--ac-green: #17b59a; /* "+" de las etiquetas de módulos */
	--ac-w: 1400px;
}

/* Las ondas y fondos de sección sobresalen a los lados: sin scroll horizontal */
html, body { overflow-x: clip; }

/* Contenedores de sección: ancho de contenido 1400px con margen en pantallas chicas */
.e-con.ac-sec > .e-con-inner { max-width: min(var(--content-width, 1400px), calc(100% - 96px)); } /* 48px de margen lateral mínimo en notebooks (a 1440px el contenido quedaba a 13px del borde) */
@media (max-width: 1024px) { .e-con.ac-sec > .e-con-inner { max-width: 100%; } }

/* Videos de fondo de sección (Elementor) a pantalla completa */
.e-con .elementor-background-video-hosted { object-fit: cover; }

/* Imágenes con alto fijo (diseño de Figma): se recortan en lugar de deformarse al cambiar el ancho */
.elementor-widget-image img { object-fit: cover; }

/* Celular: tarjetas y bloques internos no conservan el padding lateral ni el ancho fijo del diseño de escritorio */
@media (max-width: 767px) {
	.e-con:not(.ac-sec) { padding-left: min(var(--padding-left, 0px), 24px) !important; padding-right: min(var(--padding-right, 0px), 24px) !important; }
	.elementor-811 .e-con.e-child { --width: 100%; }
	/* hero: la altura la define el contenido (la mínima en vh dejaba el dashboard tapado por la sección siguiente) */
	[data-elementor-type="wp-page"] > .e-con:first-child, [data-elementor-type="wp-page"] > .e-con:first-child .e-con { --min-height: 0px !important; min-height: 0 !important; }
	[data-elementor-type="wp-page"] > .e-con:first-child { padding-bottom: max(var(--padding-bottom, 0px), 64px) !important; }
}

/* ==========================================================================
   Formulario "Agendar demo" (WPForms) del Home: diseño del Figma
   Campos píldora de 44px, borde #6d7378, texto 18px, separación 25px; botón naranja de 42px.
   ========================================================================== */
.ac-wpf-wrap .wpforms-container { margin: 0 !important; }
.ac-wpf-wrap .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.ac-wpf-wrap .wpforms-form .wpforms-field { grid-column: 1 / -1; padding: 0 !important; margin: 0 !important; width: auto !important; float: none !important; clear: none !important; }
.ac-wpf-wrap .wpforms-form .wpforms-field.wpforms-one-half { grid-column: auto; }
.ac-wpf-wrap .wpforms-form input.wpforms-field-large,
.ac-wpf-wrap .wpforms-form select.wpforms-field-large,
.ac-wpf-wrap .wpforms-form textarea {
	width: 100% !important; max-width: none !important; height: 44px; min-height: 44px; margin: 0;
	/* 11/9 en lugar de 10/10: centra la altura de las mayúsculas en el campo (centrado óptico) */
	padding: 11px 23px 9px !important; border: 1px solid #6d7378 !important; border-radius: 60px !important; background: transparent !important; box-shadow: none !important;
	font-family: var(--ac-font); font-size: 18px; line-height: 22px; color: #6d7378;
}
.ac-wpf-wrap .wpforms-form input::placeholder, .ac-wpf-wrap .wpforms-form textarea::placeholder { color: #6d7378 !important; opacity: 1 !important; }
/* WPForms pone los placeholders al 50% con una regla más específica: mismo gris que el texto del desplegable, como en el boceto */
.ac-wpf-wrap div.wpforms-container-full input::-webkit-input-placeholder, .ac-wpf-wrap div.wpforms-container-full textarea::-webkit-input-placeholder { color: #6d7378 !important; opacity: 1 !important; }
.ac-wpf-wrap .wpforms-form textarea { height: 94px !important; min-height: 94px; padding: 36px 23px 10px !important; border-radius: 19px !important; resize: none; }
/* desplegable: flecha fina como en el boceto */
.ac-wpf-wrap .wpforms-form select.wpforms-field-large {
	appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 56px !important;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%236d7378' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 23px center !important;
}
.ac-wpf-wrap .wpforms-form input:focus, .ac-wpf-wrap .wpforms-form select:focus, .ac-wpf-wrap .wpforms-form textarea:focus { border-color: var(--ac-text) !important; outline: none; }
.ac-wpf-wrap .wpforms-form .wpforms-submit-container { padding: 25px 0 0 !important; margin: 0 !important; }
.ac-wpf-wrap .wpforms-form button.wpforms-submit {
	width: 100%; height: 42px; padding: 12.5px 20px 9.5px !important; border: 0 !important; border-radius: 30px !important;
	background: #ff7a00 !important; color: #fff !important; font-family: var(--ac-font); font-size: 18px; font-weight: 400; line-height: 22px; box-shadow: none !important;
	display: flex; align-items: center; justify-content: center; transition: background-color .2s ease;
}
.ac-wpf-wrap .wpforms-form button.wpforms-submit:hover, .ac-wpf-wrap .wpforms-form button.wpforms-submit:focus-visible { background: #262626 !important; }
.ac-wpf-wrap .wpforms-form label.wpforms-error, .ac-wpf-wrap .wpforms-form em.wpforms-error { margin-top: 6px; padding-left: 23px; font-size: 14px; }
.ac-wpf-wrap .wpforms-confirmation-container-full { margin: 0; padding: 20px 23px; border: 1px solid var(--ac-turq); border-radius: 19px; background: rgba(74,232,205,.12); color: var(--ac-text); font-family: var(--ac-font); font-size: 18px; }
@media (max-width: 767px) {
	.ac-wpf-wrap .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; gap: 16px; }
	.ac-wpf-wrap .wpforms-form .wpforms-submit-container { padding-top: 16px !important; }
}

/* Botones de Elementor (Agendar Demo, Más Novedades…): texto centrado por la altura de las mayúsculas, igual que los botones del plugin */
.elementor-button .elementor-button-content-wrapper { position: relative; top: 1.25px; }
/* Los botones nunca parten su texto en dos líneas (en el hero de Gestión "Agendar Demo" se cortaba por 3px de ancho) */
.elementor-button { white-space: nowrap; }
.e-con > .elementor-widget-button { flex-shrink: 0; }

/* ==========================================================================
   Formulario de la página Contacto (WPForms): diseño del Figma
   Etiquetas 16px negrita, campos blancos sin borde (radio 12, alto 56), mensaje de 180px, botón turquesa.
   ========================================================================== */
.ac-wpf-contacto .wpforms-container { margin: 0 !important; }
.ac-wpf-contacto .wpforms-form .wpforms-field-container { display: flex; flex-direction: column; gap: 24px; }
.ac-wpf-contacto .wpforms-form .wpforms-field { padding: 0 !important; margin: 0 !important; }
.ac-wpf-contacto .wpforms-form .wpforms-field-label {
	margin: 0 0 10px !important; padding: 0; font-family: var(--ac-font) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 20px !important; color: #262626 !important;
}
.ac-wpf-contacto .wpforms-form .wpforms-required-label { display: none; }
.ac-wpf-contacto .wpforms-form input.wpforms-field-large,
.ac-wpf-contacto .wpforms-form textarea {
	width: 100% !important; max-width: none !important; height: 56px; min-height: 56px; margin: 0;
	/* 2/0 en lugar de 1/1: centra la altura de las mayúsculas en el campo */
	padding: 2px 20px 0 !important; border: 0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important;
	font-family: var(--ac-font); font-size: 16px; line-height: 20px; color: #262626;
}
.ac-wpf-contacto .wpforms-form textarea { height: 180px !important; min-height: 180px; padding: 20px !important; line-height: 24px; resize: none; }
.ac-wpf-contacto .wpforms-form input::placeholder, .ac-wpf-contacto .wpforms-form textarea::placeholder,
.ac-wpf-contacto div.wpforms-container-full input::-webkit-input-placeholder, .ac-wpf-contacto div.wpforms-container-full textarea::-webkit-input-placeholder { color: #6d7378 !important; opacity: 1 !important; }
.ac-wpf-contacto .wpforms-form input:focus, .ac-wpf-contacto .wpforms-form textarea:focus { box-shadow: inset 0 0 0 1px var(--ac-turq) !important; outline: none; }
.ac-wpf-contacto .wpforms-form .wpforms-submit-container { padding: 32px 0 0 !important; margin: 0 !important; }
.ac-wpf-contacto .wpforms-form button.wpforms-submit {
	height: auto; padding: 17.3px 32px 14.7px !important; border: 0 !important; border-radius: 48px !important;
	background: #4ae8cd !important; color: #262626 !important; font-family: var(--ac-font); font-size: 18px; font-weight: 700; line-height: 22px; box-shadow: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.ac-wpf-contacto .wpforms-form button.wpforms-submit:hover, .ac-wpf-contacto .wpforms-form button.wpforms-submit:focus-visible { background: #262626 !important; color: #fff !important; }
.ac-wpf-contacto .wpforms-form label.wpforms-error, .ac-wpf-contacto .wpforms-form em.wpforms-error { margin-top: 6px; font-size: 14px; }
.ac-wpf-contacto .wpforms-confirmation-container-full { margin: 0; padding: 20px; border: 0; border-radius: 12px; background: #fff; color: #262626; font-family: var(--ac-font); font-size: 18px; box-shadow: inset 0 0 0 1px var(--ac-turq); }

/* Hero de las páginas de Soluciones (texto a la izquierda, mockup a la derecha): bloque de texto alineado a la izquierda.
   Centrado, el párrafo y los botones ocupaban todo el ancho y el título quedaba corrido 8px: se veía desalineado. */
@media (min-width: 1025px) {
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) { align-items: flex-start !important; }
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) > .elementor-widget { align-self: stretch; }
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) .elementor-heading-title,
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) .elementor-widget-text-editor { text-align: left !important; }
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) .ac-badges { justify-content: flex-start !important; }
	.parent-pageid-134 .ac-hero-sec .e-con:has(> .elementor-widget-ac-badge) > .e-con { justify-content: flex-start !important; }
}

/* Títulos con las líneas repartidas y párrafos sin palabras sueltas en la última línea */
.elementor-heading-title, .ac-w h2, .ac-w h3 { text-wrap: balance; }
.elementor-widget-text-editor p, .ac-w p { text-wrap: pretty; }

/* Ningún bloque interno más ancho que su contenedor (anchos fijos del Figma se salían de la pantalla en notebooks) */
.e-con .e-con, .e-con > .elementor-widget { max-width: 100%; }
/* Filas de botones: si no entran en el ancho, el segundo baja (en vez de salirse de la columna). Solo en notebooks chicas:
   en escritorio entran justos y el ajuste los partía por medio píxel. */
@media (max-width: 1280px) { .e-con:has(> .elementor-widget-button + .elementor-widget-button) { flex-wrap: wrap; row-gap: 12px; } }

/* Video de fondo de secciones con contenido centrado (heros): Elementor lo pone dentro del contenedor de 1400px y se cortaba a los costados.
   Se posiciona respecto de la sección completa; la sección recorta el video con su borde redondeado. */
.e-con-boxed:has(> .e-con-inner > .elementor-background-video-container) { overflow: hidden; }
.e-con-boxed:has(> .e-con-inner > .elementor-background-video-container) > .e-con-inner { position: static !important; }
.e-con-boxed:has(> .e-con-inner > .elementor-background-video-container) > .e-con-inner > * { position: relative; }
.e-con-boxed:has(> .e-con-inner > .elementor-background-video-container) > .e-con-inner > .elementor-background-video-container { position: absolute; }

/* ==========================================================================
   Header nativo de Vault/UiCore con las medidas del Figma
   (menú y sticky se gestionan desde Apariencia → Menús y Theme Options; mega menús = plantillas "Mega Menu" del Theme Builder)
   ========================================================================== */
@media (min-width: 1202px) {
	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
		--ac-hh: 104px; max-width: min(1402px, calc(100% - 96px)); width: 100%; height: var(--ac-hh); padding: 0 !important; margin: 0 auto;
		position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(38,38,38,.2);
	}
	#wrapper-navbar.uicore-scrolled .uicore-header-wrapper > nav.uicore-container { --ac-hh: 80px; }
	#wrapper-navbar .uicore-branding { padding: 0 !important; margin: 0 !important; flex: 0 0 auto; }
	#wrapper-navbar .uicore-branding img.uicore-logo { width: 198.75px; height: 39.75px; max-height: none; object-fit: contain; opacity: .9; }
	#wrapper-navbar .uicore-nav-menu { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; height: 100%; }
	/* menú centrado en la barra, como en el diseño */
	#wrapper-navbar .uicore-menu-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; }
	#wrapper-navbar .uicore-menu { display: flex; align-items: center; gap: 10px; height: auto; }
	#wrapper-navbar .uicore-menu > li > a { display: flex; align-items: center; gap: 7.93px; height: auto; padding: 7.93px !important; line-height: 22px; font-size: 18.36px; color: #6d7378; }
	#wrapper-navbar .uicore-menu > li > a:hover, #wrapper-navbar .uicore-menu > li:hover > a, #wrapper-navbar .uicore-menu > li.current-menu-item > a { color: #262626; }
	/* flecha de los ítems con mega menú (la del Figma) */
	#wrapper-navbar .uicore-menu > li.menu-item-has-megamenu > a::after {
		content: ''; width: 10px; height: 6px; margin: 0; border: 0; transform: none; position: static; opacity: 1;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.3 5.8' fill='none'%3E%3Cpath d='M.65.65l3.76 4.17c.4.44 1.09.44 1.49 0L9.65.65' stroke='%236d7378' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
		transition: transform .2s ease;
	}
	#wrapper-navbar .uicore-menu > li.menu-item-has-megamenu:hover > a::after { transform: rotate(180deg); }
	/* botón Contacto */
	#wrapper-navbar .uicore-extra .uicore-btn {
		margin: 0; background: var(--ac-turq) !important; border: 1.19px solid var(--ac-turq) !important; border-radius: 54.42px !important;
		padding: 8.62px 23.72px 5.62px !important; font-family: var(--ac-font); font-size: 20.16px; font-weight: 400; line-height: 1.22; color: var(--ac-text) !important;
		box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
	}
	#wrapper-navbar .uicore-extra .uicore-btn:hover { background: #262626 !important; border-color: #262626 !important; color: #fff !important; }
	/* mega menú: el panel AC trae su propia tarjeta blanca; el contenedor del theme no agrega fondo ni sombra */
	#wrapper-navbar .uicore-megamenu { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
	/* centrado en la página y justo debajo de la línea del header (como el diseño) */
	#wrapper-navbar .uicore-menu > li.menu-item-has-megamenu { position: static !important; }
	#wrapper-navbar .uicore-menu-container { position: absolute; }
	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container .uicore-megamenu {
		/* el menú está centrado en la barra: desde su mitad, media barra más hasta la línea */
		position: absolute !important; top: calc(50% + var(--ac-hh) / 2 - 1px) !important; left: 50% !important; right: auto !important; margin: 0 !important;
		width: 1584px !important; max-width: calc(100vw - 32px) !important; transform: translateX(-50%) !important;
	}
	/* puente invisible entre el ítem y el panel: al bajar el mouse por el espacio de 32px el menú no se cierra */
	#wrapper-navbar .uicore-megamenu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; }
}

/* Header nativo en tablet y celular: misma barra que el diseño (80px, línea inferior dentro del margen), Contacto dentro del menú */
@media (max-width: 1201px) {
	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container { height: 80px; max-width: calc(100% - 80px); width: 100%; margin: 0 auto; padding: 0 !important; border-bottom: 1px solid rgba(38,38,38,.2); }
	#wrapper-navbar.uicore-scrolled .uicore-header-wrapper > nav.uicore-container { height: 72px; }
	#wrapper-navbar img.uicore-logo { width: 160px; height: 32px; max-height: none; object-fit: contain; }
	#wrapper-navbar .uicore-mobile-head-right .uicore-cta-wrapper { display: none; }
	.uicore-navigation-wrapper .uicore-btn, .uicore-mobile-menu-wrapper .uicore-btn {
		background: var(--ac-turq) !important; color: var(--ac-text) !important; border: 0 !important; border-radius: 35.52px !important;
		font-family: var(--ac-font); font-size: 20.97px; font-weight: 400; padding: 12.5px 25px 9.5px !important; box-shadow: none !important;
	}
	.uicore-navigation-wrapper .uicore-megamenu, .uicore-mobile-menu-wrapper .uicore-megamenu { padding: 0 20px !important; background: transparent !important; box-shadow: none !important; }
}
/* Menú mobile abierto: la barra superior coincide con la del header (logo y X no saltan) y los ítems arrancan en la misma columna */
@media (max-width: 1201px) {
	.uicore-navigation-wrapper > .uicore-container { height: 80px; max-width: calc(100% - 80px) !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(38,38,38,.2); }
	.uicore-navigation-wrapper img.uicore-logo { width: 160px; height: 32px; max-height: none; object-fit: contain; }
	.uicore-navigation-wrapper.uicore-mobile-menu-wrapper .uicore-menu > li > a { margin: 0 40px !important; padding: 16px 0 !important; font-family: var(--ac-font); font-size: 20px !important; line-height: 1.2; color: var(--ac-text) !important; border-bottom: 1px solid rgba(38,38,38,.1); }
	.uicore-navigation-wrapper.uicore-mobile-menu-wrapper .uicore-megamenu { padding: 0 40px !important; box-sizing: border-box; }
	/* el contenido ocupa el alto que queda bajo la barra de 80px (si no, el botón Contacto quedaba cortado abajo) */
	.uicore-navigation-wrapper.uicore-mobile-menu-wrapper .uicore-navigation-content { height: calc(100% - 80px) !important; }
	.uicore-navigation-wrapper.uicore-mobile-menu-wrapper .uicore-cta-wrapper .uicore-btn { margin: 20px 40px 32px !important; width: auto !important; }
	.uicore-navigation-wrapper .uicore-btn { font-size: 20.97px !important; line-height: 1.22 !important; }
	.uicore-navigation-wrapper .uicore-navigation-content .uicore-btn { display: flex; justify-content: center; box-sizing: border-box; }
}