/* ==========================================================================
   INICIO · OPCIÓN 1  |  BM Monitoring
   Propuesta "inmersiva": fondo de ondas animado en toda la página y hero a
   pantalla completa con el logo BM y los tres logos de área.
   Prefijo: .o1-
   ========================================================================== */

:root {
	--o1-blue: #00b6ed;
	--o1-green: #62f6a4;
	--o1-line: rgba(255, 255, 255, .09);
}

/* ---------- Fondo de ondas animado (toda la página) ----------
   Capa fija detrás del contenido con dos copias de la imagen de líneas del
   sitio: la capa B va girada 180° y deriva en sentido contrario. Como los
   ciclos duran distinto (28s y 37s) el cruce nunca se repite igual. */
.o1-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.o1-bg-layer {
	position: absolute;
	/* Se dibujan más grandes que la ventana para que el desplazamiento
	   nunca deje ver un borde */
	inset: -10%;
	background: url(../images/bg-negro.png) center center / cover no-repeat;
	will-change: transform;
}

.o1-bg-layer--a {
	animation: o1-wave-a 28s ease-in-out infinite;
}

.o1-bg-layer--b {
	opacity: .85;
	animation: o1-wave-b 37s ease-in-out infinite;
}

/* Velo global sobre la imagen de ondas: tintes de la paleta BM más una
   atenuación para que los paneles y el texto mantengan contraste */
.o1-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 50% 40%, rgba(0, 182, 237, .14) 0%, rgba(4, 7, 12, 0) 60%),
		radial-gradient(70% 60% at 85% 95%, rgba(98, 246, 164, .1) 0%, rgba(4, 7, 12, 0) 60%),
		rgba(4, 10, 11, .18);
}

/* Solo se anima la traslación: escalar o rotar de forma progresiva obliga al
   navegador a re-rasterizar la capa en cada fotograma, y con dos capas fijas a
   pantalla completa eso ahoga al renderizador. El giro de la capa B es un
   valor constante dentro de los fotogramas clave, así que no cuesta nada. */
@keyframes o1-wave-a {

	0%,
	100% {
		transform: translate3d(-2%, 0, 0);
	}

	50% {
		transform: translate3d(2%, -1.8%, 0);
	}
}

@keyframes o1-wave-b {

	0%,
	100% {
		transform: rotate(180deg) translate3d(-1.8%, 0, 0);
	}

	50% {
		transform: rotate(180deg) translate3d(1.8%, -1.5%, 0);
	}
}


/* ---------- HERO ---------- */
.o1-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* El header del sitio va en flujo normal y mide ~84px: se descuenta para
	   que el hero siga ocupando exactamente lo que queda de ventana */
	min-height: calc(100vh - 84px);
	padding: 60px 0 90px;
}



.o1-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.o1-hero-logo {
	width: clamp(150px, 22vw, 230px);
	margin-bottom: 2rem;
	animation: o1-float 6s ease-in-out infinite;
	filter: drop-shadow(0 0 45px rgba(0, 182, 237, .45));
}

@keyframes o1-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

.o1-eyebrow {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--o1-green);
	margin-bottom: 1.25rem;
}

/* Compensación de escala: los cuatro SVG comparten lienzo (566.9x566.9) pero
   el arte interior mide distinto. El anillo mide 459x459 en Forestal y Minería,
   371x371 en Security y solo 272x272 en Representaciones; estos factores los
   dejan todos del mismo tamaño óptico. */
.is-forestal {
	--o1-k: .99;
}

.is-mineria {
	--o1-k: 1;
}

.is-security {
	--o1-k: 1.235;
}

.is-representaciones {
	--o1-k: 1.235;
}

/* ---------- Logos de área en el hero ---------- */
.o1-hero-areas {
	display: flex;
	--o1-logo: clamp(76px, 10vw, 118px);
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5.5vw, 4rem);
	margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

.o1-hero-areas a {
	display: block;
	line-height: 0;
	text-decoration: none !important;
}

.o1-hero-areas img {
	/* El ancho del recuadro varía por logo (--o1-k) a propósito: así el
	   círculo dibujado dentro de cada SVG se ve del mismo tamaño óptico en
	   los cuatro, en vez de que Forestal/Minería (cuyo arte llena más el
	   lienzo) se vean más grandes que Security/Representaciones. */
	width: calc(var(--o1-logo) * var(--o1-k, 1));
	height: auto;
	transition: transform .4s ease, filter .4s ease;
}

.o1-hero-areas a:hover img {
	transform: translateY(-6px) scale(1.04);
	filter: drop-shadow(0 0 26px rgba(0, 182, 237, .55));
}

/* Indicador de scroll */
.o1-scroll {
	position: absolute;
	left: 50%;
	bottom: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	color: #fff;
	text-decoration: none !important;
	animation: o1-bounce 1.9s ease-in-out infinite;
}

/* Flecha dibujada con bordes CSS: así no depende del kit de Font Awesome */
.o1-scroll i {
	display: block;
	width: 13px;
	height: 13px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

@keyframes o1-bounce {

	0%,
	100% {
		transform: translateY(0);
		opacity: .5;
	}

	50% {
		transform: translateY(7px);
		opacity: 1;
	}
}


/* ---------- ENCABEZADOS DE SECCIÓN ---------- */
.o1-section {
	padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}

.o1-section-title {
	color: #fff;
	font-size: clamp(1.35rem, 3.4vw, 2rem);
	margin-bottom: .75rem;
}

.o1-section-sub {
	color: #9aa7ab;
	font-size: .82rem !important;
	text-align: center !important;
	max-width: 620px;
	margin: 0 auto;
}

.o1-divider {
	width: 60px;
	height: 3px;
	border-radius: 3px;
	margin: 1.25rem auto 2rem;
	background: linear-gradient(90deg, var(--o1-blue), var(--o1-green));
}

.o1-divider--start {
	margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
	.o1-divider--start {
		margin-left: 0;
		margin-right: auto;
	}
}

/* ---------- Fila en línea (banderas / certificaciones) ---------- */
.o1-inline-row {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.o1-inline-row > .o1-flag {
	flex: 0 0 auto;
}

.o1-inline-row > .o1-iso {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- TARJETAS DE ÁREA ---------- */
.o1-area {
	display: block;
	height: 100%;
	padding: 2.25rem 1.75rem;
	border: 1px solid var(--o1-line);
	border-radius: 24px;
	background: rgba(255, 255, 255, .035);
	text-align: center;
	text-decoration: none !important;
	transition: transform .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

.o1-area:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 182, 237, .5);
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 26px 50px -26px rgba(0, 182, 237, .8);
}

.o1-area-logo {
	display: block;
	height: calc(108px * var(--o1-k, 1));
	width: auto;
	max-width: 100%;
	margin: 0 auto 1.5rem;
	object-fit: contain;
	transition: transform .4s ease;
}

.o1-area:hover .o1-area-logo {
	transform: scale(1.06);
}

.o1-area-text {
	color: #c3ccd0;
	font-size: .8rem !important;
	line-height: 1.85;
	text-align: center !important;
	margin-bottom: 1.35rem;
}

.o1-area-link {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--o1-blue);
}

.o1-area-link i {
	margin-left: .4rem;
	transition: transform .3s ease;
}

.o1-area:hover .o1-area-link i {
	transform: translateX(5px);
}

/* ---------- CAPACIDADES / CONTADORES ---------- */
.o1-stats {
	border-top: 1px solid var(--o1-line);
	border-bottom: 1px solid var(--o1-line);
	background: rgba(255, 255, 255, .02);
}

.o1-stat {
	padding: 1.5rem .75rem;
	text-align: center;
}

.o1-stat i {
	display: block;
	font-size: 1.5rem;
	margin-bottom: .85rem;
	color: var(--o1-blue);
}

.o1-stat-num {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	font-weight: 700;
	line-height: 1;
	color: #fff;
	margin-bottom: .5rem;
}

.o1-stat-label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9aa7ab;
}

/* ---------- QUIÉNES SOMOS ---------- */
.o1-about-text {
	color: #d5dde0;
	font-size: .87rem !important;
	line-height: 2;
	text-align: justify !important;
}

/* ---------- CANARY SPEECH ---------- */
.o1-canary-logo {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
}

.o1-canary-text {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1rem, 2.3vw, 1.3rem) !important;
	font-weight: 600;
	line-height: 1.55;
	text-align: left !important;
}

/* ---------- ISO ---------- */
.o1-iso {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 76px;
}

.o1-iso img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}


/* ---------- PRESENCIA ---------- */
.o1-flag {
	display: block;
	padding: .4rem;
	text-decoration: none !important;
	transition: transform .35s ease, opacity .35s ease;
}

/* Sin recuadro al pasar el cursor: solo un realce del propio logo */
.o1-flag:hover {
	transform: translateY(-4px);
}

.o1-flag img {
	display: block;
	width: 58px;
	margin: 0 auto;
	border-radius: 5px;
}


/* ---------- Animación de aparición (JS) ---------- */
.o1-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s ease;
}

.o1-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 991.98px) {

	/* Canary Speech: logo y texto centrados en vez de lado a lado */
	.o1-canary-logo {
		margin: 0 auto;
	}

	.o1-canary-text {
		text-align: center !important;
	}

	/* Banderas y certificaciones: centradas y más chicas, para que no
	   queden pegadas a los bordes del contenedor una vez que ambas
	   columnas pasan a ocupar el ancho completo */
	.o1-inline-row {
		justify-content: center;
	}

	.o1-flag img {
		width: 46px;
	}

	.o1-inline-row > .o1-iso {
		flex: 0 0 auto;
	}

	.o1-iso {
		width: clamp(76px, 22vw, 100px);
		height: 62px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	.o1-hero {
		min-height: auto;
		padding: 130px 0 80px;
	}

	.o1-scroll {
		display: none;
	}

	.o1-area {
		padding: 1.85rem 1.35rem;
	}

	.o1-hero-areas {
		gap: 1.5rem 1rem;
		/* Base menor: los cuatro entran en una fila desde ~410px de ancho y por
		   debajo se reparten en dos filas */
		--o1-logo: clamp(70px, 16vw, 118px);
	}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {

	.o1-hero-logo,
	.o1-bg-layer,
	.o1-scroll {
		animation: none !important;
	}

	/* El giro de la capa B vive en los fotogramas clave; al desactivar la
	   animación hay que reponerlo para que las ondas sigan cruzándose */
	.o1-bg-layer--b {
		transform: rotate(180deg);
	}

	.o1-hero-areas img {
		transition: none !important;
	}

	.o1-area,
	.o1-flag,
	.o1-reveal {
		transition: none !important;
	}

	.o1-reveal {
		opacity: 1;
		transform: none;
	}
}