/*
Theme Name:   Hello Elementor Child - BIS
Theme URI:    https://www.bis.net.co/
Description:  Tema hijo de Hello Elementor para Business Integration Services S.A.S. Aquí van todas las personalizaciones (CSS y PHP) sin perderlas al actualizar el tema padre.
Author:       BIS
Template:     hello-elementor
Version:      1.2.2
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   Personalizaciones de BIS
   Escribe aquí tu CSS. Se carga DESPUÉS del tema padre, así que gana este.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX HERO: el logo (posición absoluta, grande) tapaba el subtítulo
   "Potenciamos su ecosistema digital".
   Decisión: conservar el logo grande y bajar el contenido del hero para que
   empiece por DEBAJO del logo, sin solaparse.
   Se aplica un padding-top al contenedor flex del hero (elementor-6e4d86d7).
   👉 Ajusta los valores si quieres más o menos separación.
   -------------------------------------------------------------------------- */
.elementor-element-6e4d86d7 {
	padding-top: 150px;
}

/* En tablet el logo es más chico, hace falta menos empuje. */
@media (max-width: 1024px) {
	.elementor-element-6e4d86d7 {
		padding-top: 120px;
	}
}

/* En móvil, menos aún para no dejar un hueco grande. */
@media (max-width: 767px) {
	.elementor-element-6e4d86d7 {
		padding-top: 90px;
	}
}

/* --------------------------------------------------------------------------
   FONDO DE MARCA — Degradado diagonal en toda la página.
   La portada usa una foto azul con flujo diagonal (navy -> luz). Aquí se
   replica ese "aire" con un degradado diagonal en los azules de marca,
   aplicado a TODO el sitio como base. Es liviano (no pesa como una foto),
   siempre se ve nítido y da identidad coherente a todas las páginas.

   Paleta de marca:  Azul #2A4B8D  ·  Naranja #E35205
   -------------------------------------------------------------------------- */
:root {
	--bis-azul: #2a4b8d;
	--bis-azul-claro: #3a5ea6;
	--bis-azul-oscuro: #16294f;
	--bis-naranja: #e35205;
	/* Tonos claros para el lienzo del sitio (casi blancos, tinte frío de marca) */
	--bis-fondo-1: #eef3fb;
	--bis-fondo-2: #ffffff;
	--bis-fondo-3: #f1f5fc;
}

/* Fondo del sitio: CLARO y sobrio.
   Las secciones de contenido son transparentes, por lo que el fondo del body
   se ve en todas las páginas. Un azul oscuro las volvía ilegibles y saturadas;
   por eso usamos un degradado diagonal MUY claro (casi blanco) con un leve
   tinte frío de marca. Mantiene la identidad sin recargar y deja todo legible.
   La identidad azul fuerte se reserva para el hero y las franjas con .bis-gradient. */
body {
	background: linear-gradient(
		135deg,
		var(--bis-fondo-1) 0%,
		var(--bis-fondo-2) 55%,
		var(--bis-fondo-3) 100%
	) fixed no-repeat;
	background-size: cover;
}

/* Clase utilitaria reutilizable: aplícala a cualquier sección de Elementor
   (Avanzado -> CSS Classes: "bis-gradient") para darle el mismo degradado
   con texto blanco, como el hero de la portada. */
.bis-gradient {
	background: linear-gradient(
		135deg,
		var(--bis-azul-claro) 0%,
		var(--bis-azul) 45%,
		var(--bis-azul-oscuro) 100%
	) !important;
	color: #fff;
}

/* --------------------------------------------------------------------------
   FIX IMÁGENES "CON VELO": los Ajustes globales de Elementor (Kit) tenían
   una regla que ponía TODAS las imágenes al 10% de opacidad
   (.elementor-kit-8 img { opacity: .1 }), haciéndolas verse lavadas/tras una
   cortina, sobre todo en la Galería. Aquí se restaura la opacidad completa.
   (Raíz del problema: Elementor -> Ajustes del sitio -> Imagen -> Opacidad.
   Este override lo deja arreglado sin depender de ese ajuste.)
   -------------------------------------------------------------------------- */
.elementor-kit-8 img {
	opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   MENÚ SUPERIOR — Sistema de estados coherente y corporativo.
   Antes: dos resaltados distintos a la vez (naranja + recuadro azul), estilo
   "caja" anticuado. Ahora: un solo sistema — normal en azul, hover y página
   activa en NARANJA con subrayado fino de 2px. Sin cajas.
   (El subrayado se dibuja con un background lineal para evitar conflictos de
   especificidad con el box-shadow/borde que impone Elementor.)
   -------------------------------------------------------------------------- */
.hfe-nav-menu .menu-item a.hfe-menu-item::before,
.hfe-nav-menu .menu-item a.hfe-menu-item::after {
	display: none !important;
}
.hfe-nav-menu .menu-item a.hfe-menu-item {
	color: var(--bis-azul) !important;
	border: 0 !important;
	background: transparent !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em;
	transition: color 0.2s ease, background-size 0.2s ease;
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item,
.hfe-nav-menu .menu-item.current_page_item > a.hfe-menu-item {
	color: var(--bis-naranja) !important;
	background: linear-gradient(var(--bis-naranja), var(--bis-naranja)) no-repeat !important;
	background-position: 0 100% !important;
	background-size: 100% 2px !important;
}

/* --------------------------------------------------------------------------
   TÍTULOS UNIFICADOS — Acento corto naranja bajo los títulos de sección.
   Los títulos principales (Nuestros Servicios, Sobre Nosotros, Contáctanos,
   Galería…) usan un widget "Divisor" debajo. Aquí se convierte esa línea en
   el mismo acento corto naranja del título del formulario, para dar coherencia
   a toda la página. (No afecta subtítulos ni títulos de tarjeta, que no llevan
   divisor.)
   -------------------------------------------------------------------------- */
.elementor-widget-divider .elementor-divider-separator {
	border-top-color: var(--bis-naranja) !important;
	border-top-width: 3px !important;
	width: 50px !important;
}

/* Títulos de la columna de contacto (Horarios de atención, Información de
   contacto, Dirección): unificarlos con el estilo del título del formulario
   —azul, más grandes, en negrita, centrados y con el acento naranja debajo—.
   Se apuntan por su ID de widget para no afectar otros encabezados.
   (Si algún día reconstruyes esos títulos en Elementor, sus IDs podrían
   cambiar y habría que actualizarlos aquí.) */
.elementor-element-2ce1951b .elementor-heading-title,
.elementor-element-506d4552 .elementor-heading-title,
.elementor-element-35faf911 .elementor-heading-title {
	color: var(--bis-azul) !important;
	font-size: 1.4rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
}
.elementor-element-2ce1951b .elementor-heading-title::after,
.elementor-element-506d4552 .elementor-heading-title::after,
.elementor-element-35faf911 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--bis-naranja);
	border-radius: 2px;
	margin: 0.6rem auto 0;
}

/* Centrar los títulos "Visítanos" y "Contáctanos" (en escritorio estaban
   alineados a la izquierda dentro de su columna). */
.elementor-element-2347b3d8 .elementor-heading-title,
.elementor-element-18f2d502 .elementor-heading-title {
	text-align: center !important;
}

/* --------------------------------------------------------------------------
   MENÚ FIJO (STICKY) + MENÚ EN UNA SOLA LÍNEA + LOGO QUE ENCOGE AL SCROLL
   1) El <ul> del menú tenía flex-wrap:wrap y en pantallas anchas "Contacto"
      caía a una segunda línea. Se fuerza una sola línea.
   2) El header (#masthead) se fija arriba al hacer scroll. Se usa position:
      fixed (sticky no funciona: el contenedor padre del header solo mide lo
      que el propio header) y se compensa con padding-top en el body.
   3) Al bajar (clase .bis-scrolled puesta por JS en functions.php), el logo
      encoge a 52px para que la barra quede compacta, y aparece una sombra.
   -------------------------------------------------------------------------- */
.hfe-nav-menu ul,
ul.hfe-nav-menu {
	flex-wrap: nowrap !important;
}
.hfe-nav-menu .menu-item > a.hfe-menu-item {
	white-space: nowrap !important;
}

header#masthead {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background: #fff !important;
	transition: box-shadow 0.25s ease;
}
/* Nota: no se compensa con padding-top en el body — las páginas ya traen
   espacio superior propio en su primera sección y se generaba una banda
   vacía bajo el menú. Si en alguna página el header fijo llegara a tapar
   el inicio del contenido, se ajusta esa página puntualmente. */
/* Si hay barra de administración de WordPress (usuario logueado) */
body.admin-bar header#masthead {
	top: 32px;
}

.hfe-site-logo-img {
	transition: max-height 0.25s ease;
}
body.bis-scrolled .hfe-site-logo-img {
	max-height: 52px !important;
	width: auto !important;
}
/* El contenedor del logo trae text-align:right; al encogerse, la imagen se
   corría hacia la derecha (se veía "centrada"). Mantener el margen izquierdo
   igual al del logo completo. */
body.bis-scrolled .hfe-site-logo-container,
body.bis-scrolled .hfe-site-logo {
	text-align: left !important;
}

/* LOGO ALINEADO CON EL PIE DE PÁGINA (solo escritorio).
   El logo se ancla siempre a la misma distancia del borde izquierdo que el
   contenido del footer. La distancia la calcula un JS (functions.php) que
   mide el primer ítem del footer y la publica en --bis-logo-left; así queda
   alineado al píxel aunque cambie el ancho del footer o de la pantalla. */
@media (min-width: 1025px) {
	.elementor-widget-site-logo.elementor-absolute {
		left: var(--bis-logo-left, 67px) !important;
	}
}
body.bis-scrolled header#masthead {
	box-shadow: 0 2px 14px rgba(22, 41, 79, 0.12);
}

/* --------------------------------------------------------------------------
   FORMULARIO DE CONTACTO / CAPTACIÓN DE PROSPECTOS
   Diseño corporativo, sobrio y claro. Se coloca con [bis_formulario_contacto].
   -------------------------------------------------------------------------- */
.bis-form {
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}
.bis-form__form {
	background: #fff;
	border: 1px solid #e2e8f4;
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(22, 41, 79, 0.08);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.bis-form__head {
	margin-bottom: 0.4rem;
}
.bis-form__title {
	color: var(--bis-azul);
	font-size: 1.6rem;
	line-height: 1.15;
	margin: 0 0 0.35rem;
}
.bis-form__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--bis-naranja);
	border-radius: 2px;
	margin-top: 0.7rem;
}
.bis-form__subtitle {
	color: #5c6883;
	font-size: 0.95rem;
	margin: 0.6rem 0 0;
}
.bis-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}
.bis-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.bis-form__field > span {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bis-azul);
}
.bis-form__field b {
	color: var(--bis-naranja);
}
.bis-form input,
.bis-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1.5px solid #d8e0ee;
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	color: #1b2440;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bis-form input::placeholder,
.bis-form textarea::placeholder {
	color: #9aa6bf;
}
.bis-form input:focus,
.bis-form textarea:focus {
	outline: none;
	border-color: var(--bis-naranja);
	box-shadow: 0 0 0 3px rgba(227, 82, 5, 0.15);
}
.bis-form textarea {
	resize: vertical;
	min-height: 110px;
}
.bis-form__btn {
	align-self: flex-start;
	background: var(--bis-naranja);
	color: #fff;
	border: 0;
	padding: 0.85rem 2rem;
	border-radius: 100px;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.bis-form__btn:hover {
	background: #c74704;
}
.bis-form__btn:active {
	transform: translateY(1px);
}
.bis-form__nota {
	font-size: 0.8rem;
	color: #6b7688;
	margin: 0.2rem 0 0;
}
.bis-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.bis-form__error {
	background: #fdecea;
	color: #a3271c;
	border: 1px solid #f4c7c1;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
.bis-form__ok {
	background: #fff;
	border: 1px solid #cfe8db;
	border-radius: 16px;
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: 0 10px 40px rgba(22, 41, 79, 0.08);
}
.bis-form__ok-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1f9d55;
	color: #fff;
	font-size: 1.8rem;
	margin-bottom: 1rem;
}
.bis-form__ok h3 {
	color: var(--bis-azul);
	margin: 0.2rem 0 0.5rem;
	font-size: 1.4rem;
}
.bis-form__ok p {
	color: #5c6883;
	margin: 0;
}
@media (max-width: 600px) {
	.bis-form__row {
		grid-template-columns: 1fr;
	}
	.bis-form__form {
		padding: 1.4rem;
	}
}

/* --------------------------------------------------------------------------
   CIFRAS DE RESPALDO — [bis_cifras]
   Franja de números grandes (años, proyectos, clientes...) con animación de
   conteo al entrar en pantalla. Uso en Elementor (widget Shortcode):
   [bis_cifras cifra1="10+" texto1="Años de experiencia"
               cifra2="50+" texto2="Proyectos entregados"
               cifra3="30+" texto3="Clientes atendidos"]
   Admite hasta 4 pares cifra/texto; los vacíos no se muestran.
   -------------------------------------------------------------------------- */
.bis-cifras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 4rem;
	padding: 1.5rem 1rem;
}
.bis-cifra {
	text-align: center;
	min-width: 150px;
}
.bis-cifra__num {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bis-azul);
	letter-spacing: -0.02em;
}
.bis-cifra__num::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--bis-naranja);
	border-radius: 2px;
	margin: 0.5rem auto 0;
}
.bis-cifra__texto {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: #5c6883;
}
/* Sobre fondo azul (.bis-gradient) los números pasan a blanco */
.bis-gradient .bis-cifra__num {
	color: #fff;
}
.bis-gradient .bis-cifra__texto {
	color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 600px) {
	.bis-cifras {
		gap: 1.8rem 2rem;
	}
	.bis-cifra__num {
		font-size: 2.3rem;
	}
}

/* --------------------------------------------------------------------------
   LOGOS DE CLIENTES — [bis_logos_clientes]
   Franja de logos en escala de grises que recuperan color al pasar el mouse.
   Los logos se leen automáticamente de la carpeta:
       wp-content/uploads/clientes/
   (súbelos ahí por cPanel o FTP: png/jpg/svg/webp; el nombre del archivo se
   usa como texto alternativo). Uso: [bis_logos_clientes]
   Título opcional: [bis_logos_clientes titulo="Confían en nosotros"]
   -------------------------------------------------------------------------- */
.bis-logos {
	text-align: center;
	padding: 1.5rem 1rem;
}
.bis-logos__titulo {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #5c6883;
	margin: 0 0 1.6rem;
}
.bis-logos__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2.2rem 3.5rem;
}
.bis-logos__grid img {
	max-height: 52px;
	max-width: 150px;
	width: auto;
	height: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.bis-logos__grid img:hover {
	filter: grayscale(0);
	opacity: 1;
}
.bis-logos__aviso {
	background: #fdf1e0;
	color: #a8620a;
	border: 1px dashed #e8c58a;
	border-radius: 10px;
	padding: 1rem 1.2rem;
	font-size: 0.9rem;
	max-width: 560px;
	margin: 0 auto;
}
@media (max-width: 600px) {
	.bis-logos__grid {
		gap: 1.5rem 2rem;
	}
	.bis-logos__grid img {
		max-height: 40px;
		max-width: 110px;
	}
}