/*
Theme Name: Etikal Consulting
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Consultoría de innovación social-digital 
Author: Econectados
Author URI: http://econectados.es/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */

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

/* El logo es un SVG dentro de un contenedor flex de Elementor. Como widget
   hijo recibe `width: var(--container-widget-width)`, que en un contenedor
   con flex-grow vale 0%; eso colapsa el widget y, por el `max-width:100%`
   heredado, arrastra al propio SVG a cero. Hay que soltar los tres. */
.elementor-widget-theme-site-logo {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}
.elementor-widget-theme-site-logo a { display: inline-block; }

/* El grupo de la derecha (menú + botón) nace con width:100% y sin encoger,
   así que a poco ancho empuja fuera del viewport. Que ocupe el resto. */
.etkl-header .e-con-inner > .e-con {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
.elementor-widget-theme-site-logo img {
	max-width: none;
	height: auto;
}

/* Encoge al hacer scroll (Elementor añade .elementor-sticky--effects) */
.etkl-header .elementor-widget-theme-site-logo img { transition: width .25s ease; }
/* la altura vive en --min-height del contenedor interior, no en .e-con-inner */
.etkl-header > .e-con { transition: min-height .25s ease; }
.etkl-header.elementor-sticky--effects > .e-con { --min-height: 72px; }
/* el .elementor extra es para ganar a la regla que genera Elementor
   (.elementor-51 .elementor-element-etkhlogo img), que si no manda siempre */
.elementor .etkl-header.elementor-sticky--effects .elementor-widget-theme-site-logo img { width: 110px; }
.etkl-header.elementor-sticky--effects { box-shadow: 0 4px 24px rgba( 12, 6, 91, .09 ); }

/* Subrayado amarillo de la página activa */
.etkl-header .elementor-nav-menu--main .elementor-item { position: relative; }
.etkl-header .elementor-nav-menu--main .current-menu-item > .elementor-item::after,
.etkl-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item::after,
.etkl-header .elementor-nav-menu--main .current-menu-parent > .elementor-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: var( --e-global-color-accent, #FFDE59 );
}

/* El CTA y los datos de contacto del móvil viven ahora en el popup
   "Menú móvil", que se abre por selector (.etkl-burger). */

/* =====================================================================
   MENÚ MÓVIL (popup)
   ===================================================================== */

.etkl-menu-movil .elementor-nav-menu > li > a.elementor-item { justify-content: space-between; }

/* aire bajo el logotipo */
.etkl-menu-movil .elementor-widget-theme-site-logo { margin-bottom: 22px; }

/* separadores: el control del widget solo actúa en horizontal */
.etkl-menu-movil .elementor-nav-menu > li:not( :last-child ) > a.elementor-item {
	border-bottom: 1px solid rgba( 255, 255, 255, .13 );
}

/* El submenú es un desplegable flotante que SmartMenus posiciona con estilos
   en línea; fuera del panel se va a coordenadas negativas. Aquí lo queremos
   como acordeón, así que hay que devolverlo al flujo. */
.etkl-menu-movil .elementor-nav-menu .sub-menu {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 2px 0 12px !important;
	padding-left: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	border-left: 2px solid rgba( 167, 139, 250, .35 );
}
.etkl-menu-movil .elementor-nav-menu .sub-menu a.elementor-sub-item { padding-left: 16px; }

/* botón de cierre del popup */
.elementor-popup-modal a.dialog-close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
}
.elementor-popup-modal a.dialog-close-button svg { width: 16px; height: 16px; }

/* =====================================================================
   PIE
   ===================================================================== */

/* Proporción de las cuatro columnas (la de marca pesa más) */
@media ( min-width: 1025px ) {
	.etkl-foot-cols > .e-con:nth-child( 1 ) { flex: 1.6 1 0; }
	.etkl-foot-cols > .e-con:nth-child( 2 ) { flex: 1.1 1 0; }
	.etkl-foot-cols > .e-con:nth-child( 3 ) { flex: 0.9 1 0; }
	.etkl-foot-cols > .e-con:nth-child( 4 ) { flex: 1.3 1 0; }
}

/* Columna de contacto: dato en grande y su aclaración debajo */
.etkl-footer .etkl-dato { margin-bottom: 16px; }
.etkl-footer .etkl-dato a {
	display: block;
	font-size: 16.5px;
	font-weight: 600;
	margin-bottom: 2px;
}
.etkl-footer .etkl-dato span { display: block; }
.etkl-footer .etkl-zona {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, .5 );
}

/* Barra legal: los enlaces siguen apagados hasta que existan las páginas */
.etkl-foot-legal .sep { opacity: .35; padding: 0 4px; }
.etkl-foot-legal .etkl-legal-pend { color: rgba( 255, 255, 255, .34 ); }

/* =====================================================================
   BOTONES FLOTANTES
   ===================================================================== */

.etkl-flotantes {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 998;
	width: auto;
}
.etkl-flotantes .etkl-fab .elementor-icon {
	box-shadow: 0 8px 22px rgba( 12, 6, 91, .30 );
	transition: transform .2s ease;
}
.etkl-flotantes .etkl-fab .elementor-icon:hover { transform: translateY( -2px ); }

/* el de subir solo aparece cuando ya has bajado */
.etkl-flotantes .etkl-top {
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
body.etkl-scrolled .etkl-flotantes .etkl-top {
	opacity: 1;
	visibility: visible;
	transform: none;
}
@media ( max-width: 767px ) {
	.etkl-flotantes { right: 16px; bottom: 16px; }
}

/* =====================================================================
   HOME
   ===================================================================== */

/* El H1 lleva un <span> para teñir la segunda mitad */
.etkl-hero h1 span { color: var( --e-global-color-primary, #5B2EFF ); }

/* Escena del hero: halo detrás de las mascotas */
.etkl-escena::before {
	content: "";
	position: absolute;
	top: 30px;
	left: 40px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient( circle, #E4DBFF 0%, rgba( 228, 219, 255, 0 ) 70% );
	pointer-events: none;
}
.etkl-mascota img { filter: drop-shadow( 0 22px 34px rgba( 12, 6, 91, .22 ) ); }

/* Tarjetas de dato flotantes */
.etkl-tarjeta {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba( 12, 6, 91, .13 );
	padding: 13px 16px;
}
.etkl-tarjeta p { margin: 0; }
.etkl-tarjeta .etkl-tarjeta-k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #8B84AD;
}
.etkl-tarjeta .etkl-tarjeta-v {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	color: #0C065B;
	margin: 2px 0 3px;
}
.etkl-tarjeta .etkl-tarjeta-s {
	font-size: 12px;
	line-height: 1.45;
	color: rgba( 12, 6, 91, .6 );
}

/* Burbujas de "lo que nos cuentan" */
.etkl-burbujas > .elementor-widget { flex: 1 1 calc( 50% - 9px ); }
.etkl-burbuja {
	position: relative;
	background: #F4F1FE;
	border-radius: 18px 18px 18px 4px;
	padding: 22px 24px;
}
.etkl-burbuja p { margin: 0; }

/* Tarjetas de servicio */
.etkl-servicios-grid > .elementor-widget { flex: 1 1 calc( 25% - 15px ); }
.etkl-servicio {
	background: #fff;
	border-radius: 18px;
	padding: 28px 24px 26px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.etkl-servicio:hover {
	transform: translateY( -3px );
	box-shadow: 0 16px 34px rgba( 12, 6, 91, .10 );
}

@media ( max-width: 1024px ) {
	.etkl-servicios-grid > .elementor-widget { flex: 1 1 calc( 50% - 10px ); }
	.etkl-escena::before { display: none; }
}
@media ( max-width: 767px ) {
	.etkl-burbujas > .elementor-widget,
	.etkl-servicios-grid > .elementor-widget { flex: 1 1 100%; }
}

/* Pilares de metodología */
.etkl-pilares > .elementor-widget { flex: 1 1 calc( 25% - 18px ); }

/* Foto vertical en marco: las once fotos del cliente son 2:3 */
.etkl-foto-marco img {
	border-radius: 26px;
	aspect-ratio: 3 / 3.5;
	object-fit: cover;
	object-position: 50% 18%;
	width: 100%;
}
.etkl-confianza .etkl-foto-marco { flex: 0 0 40%; }

/* Nota interna del bloque de reseñas: se borra al conectar el plugin */
.etkl-nota-dev {
	max-width: 62ch;
	margin: 14px auto 0;
	font-size: 13px;
	font-style: italic;
	opacity: .75;
}

/* Preguntas frecuentes: lista con filete, no cajas */
.etkl-faq .e-n-accordion-item {
	border: 0;
	border-bottom: 1px solid rgba( 12, 6, 91, .12 );
	border-radius: 0;
	background: transparent;
}
.etkl-faq .e-n-accordion-item-title {
	border: 0;
	border-radius: 0;
	background: transparent;
	justify-content: space-between;
	gap: 24px;
}
.etkl-faq .e-n-accordion-item-title {
	font-family: Outfit, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #0C065B;
}
.etkl-faq .e-n-accordion-item[open] .e-n-accordion-item-title { color: #5B2EFF; }
.etkl-faq .e-n-accordion-item-title-icon { color: #5B2EFF; }

@media ( max-width: 1024px ) {
	.etkl-pilares > .elementor-widget { flex: 1 1 calc( 50% - 12px ); }
	.etkl-confianza .etkl-foto-marco { flex: 1 1 auto; max-width: 420px; }
}
@media ( max-width: 767px ) {
	.etkl-pilares > .elementor-widget { flex: 1 1 100%; }
}