/*
 * GSC Banner Hero — Slider Widget Elementor  v1.1.1
 * Figma: XZFlWcXZwxPWYiZV2lIPoD / node 6879:15480
 */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

/* ══ Variables ══ */
.gsc-banner {
	--gsc-b-blue:       #2F3BE4;
	--gsc-b-blue-hover: #1E2BC5;
	--gsc-b-dark:       #171669;
	--gsc-b-navy:       #001A70;
	--gsc-b-card-bg:    rgba(250, 250, 250, 0.8);
	--gsc-b-label-bg:   rgba(241, 241, 255, 0.1);
	--gsc-b-grad-start: #171669;
	--gsc-b-grad-end:   #2D2BCF;
	--gsc-b-font:       'Quicksand', sans-serif;
}

/* ══ Contenedor ══ */
.gsc-banner {
	position:      relative;
	overflow:      hidden;
	border-radius: 24px;
	padding:       48px;
	min-height:    364px;
	display:       flex;
	align-items:   center;
	background:    linear-gradient(58deg, var(--gsc-b-grad-start) 0%, var(--gsc-b-grad-end) 57.4%);
	box-sizing:    border-box;
	width:         100%;
	cursor:        pointer;
	font-family:   var(--gsc-b-font);
}

/* ══ Capa de fondo ══ */
.gsc-banner__bg {
	position:       absolute;
	inset:          0;
	pointer-events: none;
}

/* ══ Foto única (crossfade por JS al cambiar src) ══ */
.gsc-banner__photo-wrap {
	position:                  absolute;
	left:                      359px;
	top:                       0;
	bottom:                    0;
	right:                     0;          /* ocupa hasta el borde derecho siempre */
	border-bottom-left-radius: 464px;
	overflow:                  hidden;
	z-index:                   1;
	transition:                opacity 0.35s ease;
}
/* Las shapes (z-index:2) se superponen encima de la foto cuando están activas.
   Al ocultarlas, la foto cubre el 100% del espacio derecho sin dejar bloque azul. */

/* Sin shapes: la foto llega al borde derecho, ajustar radio */
.gsc-banner--no-shapes .gsc-banner__photo-wrap {
	border-bottom-right-radius: 0; /* el banner ya tiene overflow:hidden con border-radius */
}

/* Estado de salida: JS añade esta clase para hacer fade-out */
.gsc-banner__photo-wrap--exit { opacity: 0; }

.gsc-banner__photo-wrap img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center top;
	display:         block;
}

/* Gradiente de fusión foto → gradiente de fondo */
.gsc-banner__photo-fade {
	position:   absolute;
	inset:      0;
	background: linear-gradient(240deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
}

/* ══ Shapes decorativas ══ */
.gsc-banner__shapes {
	position:      absolute;
	right:         0;
	top:           0;
	bottom:        0;
	width:         223px;
	border-radius: 0 24px 24px 0;
	overflow:      hidden;
	z-index:       2;
}
.gsc-banner__shapes img {
	width:      114%;
	height:     141%;
	max-width:  none;
	object-fit: cover;
	display:    block;
}

/* ══ Dots de paginación ══ */
.gsc-banner__pagination {
	position:       absolute;
	bottom:         14px;
	left:           50%;
	transform:      translateX(-50%);
	display:        flex;
	align-items:    center;
	gap:            6px;
	z-index:        5;
	pointer-events: auto; /* supera el pointer-events:none del .gsc-banner__bg */
}

.gsc-banner__dot {
	display:            block;
	height:             8px;
	border-radius:      4px;
	background:         rgba(255, 255, 255, 0.45);
	border:             none;
	padding:            0;
	cursor:             pointer;
	transition:         width 0.3s ease, background 0.3s ease;
	appearance:         none;
	-webkit-appearance: none;
	pointer-events:     auto;
}
.gsc-banner__dot--active {
	background: #ffffff;
	width:      20px;
}
.gsc-banner__dot:not(.gsc-banner__dot--active) { width: 8px; }
.gsc-banner__dot:focus { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

/* ══ Tarjeta glassmorphism ══ */
.gsc-banner__card {
	position:                relative;
	z-index:                 3;
	width:                   478px;
	flex-shrink:             0;
	padding:                 32px;
	border-radius:           24px;
	background:              var(--gsc-b-card-bg);
	backdrop-filter:         blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display:                 flex;
	flex-direction:          column;
	gap:                     24px;
	align-items:             flex-start;
	box-sizing:              border-box;
}

.gsc-banner__card-body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	align-items:    flex-start;
	width:          100%;
	transition:     opacity 0.22s ease, transform 0.22s ease;
}

/* Transición del texto al cambiar slide */
.gsc-banner__card-body--exit {
	opacity:   0;
	transform: translateY(6px);
}
.gsc-banner__card-body--enter {
	animation: gsc-b-enter 0.3s ease;
}
@keyframes gsc-b-enter {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* ══ Badge ══ */
.gsc-banner__badge {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         10px 20px;
	border-radius:   16px;
	background:      var(--gsc-b-label-bg);
	border:          1px solid var(--gsc-b-blue);
	font-family:     var(--gsc-b-font);
	font-weight:     500;
	font-size:       12px;
	line-height:     12px;
	color:           var(--gsc-b-dark);
	text-transform:  uppercase;
	white-space:     nowrap;
}

/* ══ Título ══ */
.gsc-banner__title {
	font-family:    var(--gsc-b-font);
	font-weight:    500;
	font-size:      48px;
	line-height:    48px;
	letter-spacing: -0.96px;
	color:          var(--gsc-b-navy);
	margin:         0;
	padding:        0;
}

/* ══ Subtítulo ══ */
.gsc-banner__subtitle {
	font-family:  var(--gsc-b-font);
	font-weight:  500;
	font-size:    16px;
	line-height:  24px;
	color:        rgba(0, 26, 112, 0.8);
	margin:       0;
	padding:      0;
}

/* ══ CTA ══ */
.gsc-banner__cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         12px 24px;
	border-radius:   100px;
	background:      var(--gsc-b-blue);
	color:           #ffffff !important;
	font-family:     var(--gsc-b-font);
	font-weight:     500;
	font-size:       16px;
	line-height:     16px;
	letter-spacing:  -0.2px;
	text-decoration: none !important;
	white-space:     nowrap;
	border:          none;
	cursor:          pointer;
	transition:      background 0.2s ease, opacity 0.22s ease;
}
.gsc-banner__cta:hover,
.gsc-banner__cta:focus {
	background:      var(--gsc-b-blue-hover) !important;
	color:           #ffffff !important;
	text-decoration: none !important;
	outline:         none;
}
.gsc-banner__cta--exit { opacity: 0; }

/* ════════════════════ RESPONSIVE ════════════════════ */

@media (max-width: 1200px) {
	.gsc-banner__card       { width: 400px; }
	.gsc-banner__photo-wrap { left: 300px; /* right: 0 heredado */ }
	.gsc-banner__shapes     { width: 190px; }
	.gsc-banner__title      { font-size: 40px; line-height: 42px; }
}

@media (max-width: 1024px) {
	.gsc-banner { padding: 32px; min-height: 300px; }
	.gsc-banner__card       { width: 340px; padding: 24px; }
	.gsc-banner__title      { font-size: 32px; line-height: 34px; }
	.gsc-banner__photo-wrap { left: 260px; border-bottom-left-radius: 300px; /* right: 0 heredado */ }
	.gsc-banner__shapes     { width: 150px; }
}

@media (max-width: 768px) {
	/* Layout: foto arriba / card abajo */
	.gsc-banner {
		flex-direction: column;
		padding:        0;
		min-height:     auto;
		border-radius:  16px;
		cursor:         default;
		align-items:    stretch;
		background:     #ffffff;
	}
	.gsc-banner__bg {
		position:       relative;
		inset:          unset;
		height:         220px;
		flex-shrink:    0;
		border-radius:  16px 16px 0 0;
		overflow:       hidden;
		background:     linear-gradient(58deg, var(--gsc-b-grad-start) 0%, var(--gsc-b-grad-end) 57.4%);
	}
	.gsc-banner__photo-wrap {
		left:                      0;
		right:                     0;
		border-bottom-left-radius: 0;
	}
	.gsc-banner__shapes { display: none; }
	.gsc-banner__card {
		width:                   100%;
		border-radius:           0 0 16px 16px;
		backdrop-filter:         none;
		-webkit-backdrop-filter: none;
		background:              #ffffff;
		padding:                 24px;
		gap:                     16px;
	}
	.gsc-banner__title { font-size: 28px; line-height: 32px; }
}

@media (max-width: 480px) {
	.gsc-banner__bg    { height: 180px; }
	.gsc-banner__title { font-size: 24px; line-height: 28px; }
	.gsc-banner__cta   { width: 100%; justify-content: center; }
}