/* =========================================================================
   Avyra — la IA de FX Informática
   -------------------------------------------------------------------------
   Dos piezas:
     1. Slide del hero  -> #carouselExampleIndicators .fx-avyra-slide
     2. Banda antes de Productos -> #avyra

   Todo va colgado de un id: los selectores del theme Porto pisan las clases
   sueltas y el cambio falla a medias, sin error visible.

   Paleta y tipografia salen del manual de marca Avyra (identidad 26.9):
   Manrope Bold para titulos, Manrope Light para texto. Manrope se carga solo
   para estas piezas (link de Google Fonts en el <head>); el resto del sitio
   sigue en Poppins.
   ========================================================================= */

.fx-avyra-slide,
#avyra {
	--avyra-deep: #08268d;
	--avyra-blue: #4da5fc;
	--avyra-violet: #5b63fb;
	--avyra-lilac: #d7acfd;
	--avyra-sky: #9fe0fe;
	--avyra-font: 'Manrope', 'Poppins', sans-serif;
}

/* Etiqueta "Novedad" (comun a las dos piezas) */
.fx-avyra-slide .fx-avyra-badge,
#avyra .fx-avyra-badge {
	display: inline-block;
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--avyra-deep);
	background: var(--avyra-sky);
	border-radius: 999px;
	padding: 0.45em 1em;
	margin-bottom: 1rem;
}

/* Logo: el SVG oficial con texto blanco (SVG__HORIZONTAL.svg). El manual pide
   no deformarlo ni aplicarle sombras: solo se fija el alto. */
.fx-avyra-slide .fx-avyra-logo,
#avyra .fx-avyra-logo {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 0 1.1rem;
	filter: none;
	box-shadow: none;
}


/* =========================================================================
   1. Slide del hero
   El fondo (img/avyra/avyra-hero.svg) tiene el mismo lienzo que los PNG de
   los otros slides, asi que hereda todo el responsive de fx-custom.css (5b).
   Aca solo va lo propio de la marca.
   ========================================================================= */

#carouselExampleIndicators .fx-avyra-slide .fx-avyra-logo {
	height: clamp(30px, 2.6vw, 64px);
}

#carouselExampleIndicators .fx-avyra-slide .hero-title {
	font-family: var(--avyra-font);
	font-weight: 700 !important;
}

#carouselExampleIndicators .fx-avyra-slide p {
	font-family: var(--avyra-font);
	font-weight: 300;
}

@media (min-width: 1600px) {
	#carouselExampleIndicators .fx-avyra-slide .fx-avyra-badge {
		font-size: clamp(12px, 0.75vw, 18px);
	}
}

/* Tablet: entre 768 y 1199px la banda de color mide 280-440px de alto y el
   bloque (etiqueta + logo + titulo + bajada + boton) no entra. El logo
   ya esta dibujado en grande a la derecha, asi que se va el chico. */
@media (max-width: 1199px) {
	#carouselExampleIndicators .fx-avyra-slide .fx-avyra-logo {
		display: none;
	}
}

@media (max-width: 767px) {
	#carouselExampleIndicators .fx-avyra-slide .fx-avyra-badge {
		font-size: 9px;
		padding: 0.4em 0.8em;
		margin-bottom: 0.45rem;
	}
}


/* =========================================================================
   2. Banda "Avyra" antes de Productos
   Mismo lenguaje que la seccion Productos que tiene debajo (fx-custom.css):
   fondo claro, tarjetas blancas de 18px con borde y sombra apenas azulados,
   titulos #2c3e50 y texto #5a6c7d. La marca Avyra queda en los acentos
   (logo, etiqueta, iconos), no en el fondo.
   ========================================================================= */

#avyra.fx-avyra-band {
	position: relative;
	overflow: hidden;
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(0, 146, 205, 0.1);
	padding: 90px 0;
	color: #5a6c7d;
	background-color: #fff;
	background-image:
		radial-gradient(circle at 100% 0%, rgba(91, 99, 251, 0.08) 0, rgba(91, 99, 251, 0) 42%),
		radial-gradient(circle at 0% 100%, rgba(77, 165, 252, 0.07) 0, rgba(77, 165, 252, 0) 38%);
	font-family: var(--avyra-font);
}

/* Etiqueta mas suave que en el slide: sobre blanco el celeste lleno grita. */
#avyra .fx-avyra-badge {
	color: var(--avyra-deep);
	background: rgba(91, 99, 251, 0.12);
}

/* Version del logo con texto #1d1d1b (neutro del manual) para fondo claro */
#avyra .fx-avyra-logo {
	height: 48px;
}

#avyra .fx-avyra-band-title {
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #2c3e50;
	margin: 0 0 1.1rem;
}

#avyra .fx-avyra-band-lead {
	font-family: var(--avyra-font);
	font-weight: 400;
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.65;
	color: #5a6c7d;
	max-width: 34em;
	margin: 0 0 2rem;
}

#avyra .fx-avyra-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
}

/* El boton toma el color de .btn-primary del sitio (el mismo de "Solicitar
   demo"); aca solo tipografia y medidas. */
#avyra a.fx-avyra-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border-radius: 6px;
	padding: 1rem 1.6rem;
	text-transform: none;
}

#avyra a.fx-avyra-link {
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: 15px;
	color: #2c3e50;
	text-decoration: none;
	border-bottom: 2px solid rgba(91, 99, 251, 0.35);
	padding-bottom: 2px;
}

#avyra a.fx-avyra-link:hover,
#avyra a.fx-avyra-link:focus {
	color: #0092cd;
	border-bottom-color: #0092cd;
}

#avyra a.fx-avyra-link i {
	font-size: 0.8em;
	margin-left: 0.35rem;
}

/* Las tres capacidades: tarjetas como .product-card */
#avyra .fx-avyra-features {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

#avyra .fx-avyra-features li {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.2rem 1.35rem;
	margin: 0 0 0.85rem;
	background: #fff;
	border: 1px solid rgba(0, 146, 205, 0.08);
	border-radius: 18px;
	box-shadow: 0 5px 25px rgba(0, 146, 205, 0.06);
}

#avyra .fx-avyra-feature-icon {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(77, 165, 252, 0.14), rgba(91, 99, 251, 0.14));
	color: var(--avyra-violet);
	font-size: 18px;
}

#avyra .fx-avyra-features h3 {
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #2c3e50;
	margin: 0 0 0.3rem;
}

#avyra .fx-avyra-features p {
	font-family: var(--avyra-font);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: #5a6c7d;
	margin: 0;
}

/* "Llega a todo el ecosistema FX" + productos */
#avyra .fx-avyra-products-label {
	display: block;
	font-family: var(--avyra-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7f8c8d;
	margin-bottom: 0.75rem;
}

#avyra .fx-avyra-products ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

#avyra .fx-avyra-products li {
	font-family: var(--avyra-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: #2c3e50;
	background: #f8f9fa;
	border: 1px solid rgba(44, 62, 80, 0.12);
	border-radius: 999px;
	padding: 0.55rem 0.95rem;
	margin: 0;
}

@media (max-width: 991px) {
	#avyra.fx-avyra-band {
		padding: 64px 0;
	}
}

@media (max-width: 575px) {
	#avyra.fx-avyra-band {
		padding: 52px 0;
	}

	#avyra .fx-avyra-logo {
		height: 38px;
	}

	#avyra .fx-avyra-features li {
		padding: 1rem;
	}
}