/*
 * Banners del Cyberday en el slider del home (banner-home.js los monta).
 *
 * .fgcy-hb cubre la slide entera con el fondo; .fgcy-hb-zona es la parte que
 * se ve (la calcula el JS) y es un contenedor: todo escala con --u, que sale
 * de su alto y su ancho, asi entra igual en un monitor grande que en la slide
 * de 300 px del celular. Los textos chicos tienen un minimo legible (max()).
 *
 * Selectores de dos clases como minimo: el kit de Elementor y Smart Slider
 * les ponen margen, color y tipografia a h2, p y a.
 */

@font-face {
	font-family: "FgcyMontserrat";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fgcy-hb {
	--fgcy-fondo: #05002D;
	--fgcy-lila: #D99BF0;
	--fgcy-magenta: #FF00FF;
	--fgcy-cian: #00FFF6;
	--fgcy-tenue: #B9ADE0;
	position: absolute;
	inset: 0;
	z-index: 21; /* sobre .n2-ss-layers-container (20), que trae la capa con la clase */
	overflow: hidden;
	background-color: var(--fgcy-fondo);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	font-family: "FgcyMontserrat", "Montserrat", system-ui, sans-serif;
	color: #FFFFFF;
	line-height: 1.2;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}
.fgcy-hb *, .fgcy-hb *::before, .fgcy-hb *::after { box-sizing: border-box; }

.fgcy-hb .fgcy-hb-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: linear-gradient(rgba(5, 0, 45, 0), var(--fgcy-fondo));
	pointer-events: none;
}

/* Lienzo de diseño: 1000 x 660. Las unidades cq se resuelven donde se usa
   --u, siempre dentro de la zona. */
.fgcy-hb .fgcy-hb-zona {
	--u: min(calc(100cqh / 660), calc(100cqw / 1000));
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	container: fgcyhb / size;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --lado deja libres las flechas del slider. */
.fgcy-hb .fgcy-hb-in {
	--lado: 72px;
	--tit-em: 6.4;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(14 * var(--u));
	width: calc(100cqw - 2 * var(--lado));
	max-height: 100cqh;
	padding: calc(28 * var(--u)) 0;
}
.fgcy-hb--durante .fgcy-hb-in { --tit-em: 9.4; }

.fgcy-hb .fgcy-hb-aro {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(calc(560 * var(--u)), 78cqh);
	aspect-ratio: 1;
	transform: translate(-50%, -46%);
	border: max(3px, calc(5 * var(--u))) solid var(--fgcy-magenta);
	border-radius: 50%;
	box-shadow: 0 0 28px rgba(255, 0, 255, .6), inset 0 0 22px rgba(255, 0, 255, .4);
	pointer-events: none;
}

.fgcy-hb .fgcy-hb-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(8px, calc(14 * var(--u)));
}
.fgcy-hb .fgcy-hb-logo {
	display: block;
	width: auto;
	height: max(26px, calc(56 * var(--u)));
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.fgcy-hb .fgcy-hb-x { font-size: max(13px, calc(24 * var(--u))); font-weight: 300; color: var(--fgcy-lila); }
.fgcy-hb .fgcy-hb-nombre { font-size: max(12px, calc(20 * var(--u))); font-weight: 800; letter-spacing: .06em; }

.fgcy-hb .fgcy-hb-fechas {
	padding: max(4px, calc(9 * var(--u))) max(12px, calc(24 * var(--u)));
	border: 1px solid rgba(217, 155, 240, .6);
	border-radius: 999px;
	font-size: max(10px, calc(14 * var(--u)));
	font-weight: 300;
	letter-spacing: .18em;
	white-space: nowrap;
}
.fgcy-hb .fgcy-hb-fechas b { font-weight: 800; }

.fgcy-hb .fgcy-hb-kicker {
	margin-top: calc(8 * var(--u));
	font-size: max(10px, calc(18 * var(--u)));
	font-weight: 800;
	letter-spacing: .22em;
	color: var(--fgcy-cian);
}

.fgcy-hb .fgcy-hb-tit {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: min(calc(128 * var(--u)), calc((100cqw - 2 * var(--lado)) / var(--tit-em)));
	font-weight: 900;
	line-height: .9;
	letter-spacing: -.02em;
	text-transform: none;
	white-space: nowrap;
	color: #FFFFFF;
}

.fgcy-hb .fgcy-hb-sub {
	margin: 0;
	font-size: max(12px, calc(26 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	color: var(--fgcy-lila);
}

.fgcy-hb .fgcy-hb-falta {
	margin-top: calc(6 * var(--u));
	font-size: max(9px, calc(13 * var(--u)));
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--fgcy-tenue);
}

.fgcy-hb .fgcy-hb-cd {
	display: flex;
	justify-content: center;
	gap: max(6px, calc(10 * var(--u)));
}
.fgcy-hb .fgcy-hb-caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: max(52px, calc(86 * var(--u)));
	padding: max(5px, calc(12 * var(--u))) 0;
	border: 2px solid var(--fgcy-cian);
	border-radius: max(8px, calc(14 * var(--u)));
	background: rgba(5, 0, 45, .7);
	box-shadow: 0 0 16px rgba(0, 255, 246, .35);
}
.fgcy-hb .fgcy-hb-caja--magenta { border-color: var(--fgcy-magenta); box-shadow: 0 0 16px rgba(255, 0, 255, .45); }
.fgcy-hb .fgcy-hb-num {
	font-size: max(20px, calc(40 * var(--u)));
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--fgcy-cian);
}
.fgcy-hb .fgcy-hb-caja--magenta .fgcy-hb-num { color: var(--fgcy-magenta); }
.fgcy-hb .fgcy-hb-uni {
	margin-top: max(2px, calc(4 * var(--u)));
	font-size: max(8px, calc(11 * var(--u)));
	letter-spacing: .15em;
	color: var(--fgcy-tenue);
}

.fgcy-hb .fgcy-hb-btn {
	display: inline-flex;
	align-items: center;
	min-height: max(44px, calc(54 * var(--u)));
	margin-top: calc(4 * var(--u));
	padding: 0 max(18px, calc(32 * var(--u)));
	border-radius: 999px;
	background: var(--fgcy-magenta);
	box-shadow: 0 0 24px rgba(255, 0, 255, .6);
	color: var(--fgcy-fondo);
	font-size: max(12px, calc(16 * var(--u)));
	font-weight: 900;
	letter-spacing: .06em;
	text-decoration: none;
}
.fgcy-hb .fgcy-hb-btn:hover,
.fgcy-hb .fgcy-hb-btn:focus { color: var(--fgcy-fondo); background: #FF4DFF; }
.fgcy-hb .fgcy-hb-btn:focus-visible { outline: 3px solid var(--fgcy-cian); outline-offset: 3px; }

.fgcy-hb .fgcy-hb-legal {
	max-width: calc(760 * var(--u));
	margin: calc(6 * var(--u)) 0 0;
	font-size: max(11px, calc(11 * var(--u)));
	line-height: 1.55;
	color: var(--fgcy-tenue);
}

/* Celular: sin flechas en el slider, alcanza con el margen de siempre. */
@container fgcyhb (max-width: 700px) {
	.fgcy-hb .fgcy-hb-in { --lado: 16px; }
}
/* Slide baja (celular): el texto legal no entra. */
@container fgcyhb (max-height: 460px) {
	.fgcy-hb .fgcy-hb-legal { display: none; }
}
/* La mas baja (celular angosto): el boton del Banner 2 necesita el lugar. */
@container fgcyhb (max-height: 300px) {
	.fgcy-hb--durante .fgcy-hb-fechas { display: none; }
}