/* ================================================= */
/* ===== BODY NUESTROS SERVICIOS ===== */
/* ================================================= */
.services-section {
	padding: 100px 60px;
	background-image: url("../img/servicios/nosotros.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
}

/* ===== TITULO ===== */
.services-header {
	text-align: center;
	margin-bottom: 80px;
}

.services-header h1 {
	color: #ff6600;
	font-size: 52px;
	margin-bottom: 20px;
}

.services-header p {
	color: #666;
	font-size: 20px;
}

/* ===== GRID ===== */
.services-grid {
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: start;
}

/* ===== TARJETAS ===== */
.service-card {
	background: #ffffff;
	border-radius: 22px;
	overflow: hidden;
	border: 2px solid transparent;
	transition: 0.3s ease;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ========================================= */
/* BORDES SIEMPRE VISIBLES */
/* ========================================= */
.service-card.refrigeradas {
	border-color: #2196F3;
}

.service-card.secas {
	border-color: #FFC107;
}

.service-card.electricas {
	border-color: #4CAF50;
}

/* ========================================= */
/* HOVER GENERAL */
/* ========================================= */
.service-card:hover {
	transform: translateY(-10px);
}

li {
	text-align: center;
}

/* ========================================= */
/* HOVER REFRIGERADAS */
/* ========================================= */
.service-card.refrigeradas:hover {
	box-shadow: 
		0 12px 30px rgba(33, 150, 243, .20),
		0 0 20px rgba(33, 150, 243, .25);
}

/* ========================================= */
/* HOVER SECAS */
/* ========================================= */
.service-card.secas:hover {
	box-shadow: 
		0 12px 30px rgba(255, 193, 7, .20),
		0 0 20px rgba(255, 193, 7, .25);
}

/* ========================================= */
/* HOVER ELÉCTRICAS */
/* ========================================= */
.service-card.electricas:hover {
	box-shadow: 
		0 12px 30px rgba(76, 175, 80, .20),
		0 0 20px rgba(76, 175, 80, .25);
}

/* ===== IMAGEN ===== */
.service-card img {
	width: 100%;
	height: 120px;
	object-fit: contain;
	display: block;
}

/* ===== CONTENIDO ===== */
.service-content {
	padding: 35px;
}

/* ===== BOTON BASE ===== */
.service-btn {
	width: 100%;
	color: white;
	border: none;
	padding: 18px;
	font-size: 24px;
	border-radius: 12px;
	cursor: pointer;
	transition: 0.3s ease;
}

/* ❄️ REFRIGERADAS */
.btn-refrigeradas {
	background: #2196F3;
}

.btn-refrigeradas:hover {
	background: #1976D2;
}

/* 📦 SECAS */
.btn-secas {
	background: #FFC107;
}

.btn-secas:hover {
	background: #E0A800;
}

/* ⚡ ELECTRICAS */
.btn-electricas {
	background: #4CAF50;
}

.btn-electricas:hover {
	background: #388E3C;
}

/* ===== LISTA ===== */
.service-list {
	list-style: none;
	margin-top: 20px;
	max-height: 0;
	overflow: hidden;
	transition: 0.4s ease;
}

/* mostrar lista al hover */
.service-card:hover .service-list {
	max-height: 500px;
}

/* ===== ITEMS ===== */
.service-list li {
	color: #444;
	padding: 14px 0;
	border-bottom: 1px solid #eee;
	font-size: 17px;
	line-height: 1.6;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ===== CONTADOR BASE ===== */
.contador {
	font-size: 14px;
	font-weight: bold;
	min-width: 40px;
	text-align: right;
}

/* ❄️ REFRIGERADAS */
.contador.refrigeradas {
	color: #2196F3;
}

/* 📦 SECAS */
.contador.secas {
	color: #FFC107;
}

/* ⚡ ELECTRICAS */
.contador.electricas {
	color: #4CAF50;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
	.services-section {
		padding: 60px 20px;
	}
	.services-header h1 {
		font-size: 36px;
	}
}

/* ================================================= */
/* ===== GPS SECTION ===== */
/* ================================================= */
.gps-section {
	padding: 120px 60px;
	position: relative;
	background: url("../img/servicios/gps-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
}

/* ===== CAPA OSCURA ===== */
.gps-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 1;
}

/* ===== CONTENEDOR ===== */
.gps-container {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* ===== CONTENIDO ===== */
.gps-content {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}

/* ===== TITULO ===== */
.gps-content h2 {
	color: white;
	font-size: 46px;
	margin-bottom: 25px;
}

/* ===== TEXTO ===== */
.gps-content p {
	color: #d1d1d1;
	font-size: 18px;
	margin-bottom: 55px;
	line-height: 1.8;
}

/* ===== TARJETAS GPS ===== */
.gps-card {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 40px;
	text-align: center;
	transition: 0.3s;
}

.gps-card:hover {
	transform: translateY(-10px);
	border-color: white;
	box-shadow: 0 0 25px white;
}

/* ===== ICONOS ===== */
.gps-icon {
	font-size: 55px;
	margin-bottom: 20px;
}

/* ===== TITULOS ===== */
.gps-card h3 {
	color: #fff;
	font-size: 26px;
	margin-bottom: 15px;
}

/* ===== TEXTO ===== */
.gps-card p {
	color: #d1d1d1;
	line-height: 1.8;
	font-size: 16px;
}

/* ================================================= */
/* ===== TEMPERATURA ===== */
/* ================================================= */
.temperature-section {
	padding: 120px 60px;
	position: relative;
	background: url("../img/servicios/temperatura-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
}

/* ===== CAPA OSCURA ===== */
.temperature-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 1;
}

/* ===== CONTENIDO ===== */
.temperature-content {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}

/* ===== TITULO ===== */
.temperature-content h2 {
	color: #0055ff;
	font-size: 46px;
	margin-bottom: 25px;
}

/* ===== TEXTO ===== */
.temperature-content p {
	color: #d1d1d1;
	font-size: 18px;
	margin-bottom: 55px;
	line-height: 1.8;
}

/* ===== GRID ===== */
.temperature-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

/* ===== TARJETAS ===== */
.temp-box {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	padding: 35px 55px;
	border-radius: 22px;
	font-size: 28px;
	font-weight: bold;
	transition: 0.35s;
}

/* ===== HOVER ===== */
.temp-box:hover {
	transform: translateY(-10px);
	border-color: white;
	box-shadow: 0 0 30px white;
}

/* ================================================= */
/* ===== ECO ===== */
/* ================================================= */
.eco-section {
	padding: 120px 60px;
	position: relative;
	background: url("../img/servicios/eco-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	text-align: center;
}

/* ===== CAPA OSCURA ===== */
.eco-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 1;
}

/* ===== CONTENIDO ===== */
.eco-section h2,
.eco-section .eco-descripcion,
.eco-grid {
	position: relative;
	z-index: 2;
}

.eco-descripcion {
	color: #ffffff;
	font-size: 18px;
	margin-bottom: 60px;
}

/* ===== TITULO ===== */
.eco-section h2 {
	color: #00ff99;
	font-size: 46px;
	margin-bottom: 60px;
}

/* ===== GRID ===== */
.eco-grid {
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* ===== TARJETAS ===== */
.eco-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	padding: 45px;
	transition: 0.35s;
}

/* ===== HOVER ===== */
.eco-card:hover {
	transform: translateY(-10px);
	border-color: #00ff99;
	box-shadow: 0 0 30px rgba(0, 255, 153, 0.25);
}

/* ===== TITULO TARJETA ===== */
.eco-card h3 {
	color: #fff;
	margin-bottom: 20px;
	font-size: 26px;
}

/* ===== TEXTO ===== */
.eco-card p {
	color: #d1d1d1;
	line-height: 1.8;
	font-size: 16px;
}

/* ================================================= */
/* ===== SEGURIDAD ===== */
/* ================================================= */
.security-section {
	padding: 120px 60px;
	position: relative;
	background: url("../img/servicios/seguridad-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	text-align: center;
}

/* ===== CAPA OSCURA ===== */
.security-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.78);
	z-index: 1;
}

/* ===== CONTENIDO ===== */
.security-section h2,
.security-section .seguridad-descripcion,
.security-grid {
	position: relative;
	z-index: 2;
}

/* ===== TÍTULO ===== */
.security-section h2 {
	color: #ffffff;
	font-size: 56px;
	font-weight: 700;
	margin-bottom: 30px;
}

/* ===== DESCRIPCIÓN ===== */
.seguridad-descripcion {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.8;
	margin-bottom: 60px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* ===== GRID ===== */
.security-grid {
	max-width: 1300px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

/* ===== TARJETAS ===== */
.security-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 22px;
	padding: 45px 30px;
	color: #ffffff;
	font-size: 20px;
	line-height: 1.7;
	transition: 0.35s;
}

/* ===== HOVER ===== */
.security-card:hover {
	transform: translateY(-10px);
	border-color: #ffffff;
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
}

/* ================================================= */
/* ===== MERCANCIA ===== */
/* ================================================= */
.mercancia-section {
	padding: 120px 60px;
	position: relative;
	background: url("../img/servicios/mercancia-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	text-align: center;
}

/* =======================
CAPA OSCURA
======================= */
.mercancia-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .78);
	z-index: 1;
}

/* =======================
CONTENIDO
======================= */
.mercancia-section>* {
	position: relative;
	z-index: 2;
}

/* =======================
TÍTULO
======================= */
.mercancia-section h2 {
	color: green;
	font-size: 46px;
	margin-bottom: 25px;
}

/* =======================
PÁRRAFO
======================= */
.mercancia-texto {
	max-width: 900px;
	margin: 0 auto 60px;
	color: #d1d1d1;
	line-height: 1.8;
	font-size: 16px;
}

.mercancia-texto2 {
	max-width: 900px;
	margin: 0 auto 60px;
	color: #d1d1d1;
	line-height: 1.8;
	font-size: 20px;
}

/* =======================
TARJETAS
======================= */
.mercancia-servicios {
	max-width: 1200px;
	margin: 0 auto 70px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 35px;
}

.mercancia-card {
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 25px;
	padding: 40px;
	text-align: left;
	transition: .35s;
}

.mercancia-card:hover {
	transform: translateY(-8px);
	border-color: green;
	box-shadow: 0 0 25px rgba(0, 128, 0, .45);
}

.mercancia-card h3 {
	color: green;
	font-size: 28px;
	margin-bottom: 20px;
}

.mercancia-card p {
	color: #d1d1d1;
	line-height: 1.8;
	font-size: 16px;
}

/* =======================
GRID MERCANCÍAS
======================= */
.mercancia-grid {
	max-width: 1200px;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.mercancia-grid span {
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .08);
	color: #fff;
	padding: 18px 32px;
	border-radius: 50px;
	font-size: 17px;
	transition: .35s;
}

.mercancia-grid span:hover {
	transform: translateY(-8px);
	border-color: green;
	box-shadow: 0 0 25px rgba(0, 128, 0, .45);
}

/* =======================
RESPONSIVE MERCANCIA
======================= */
@media (max-width: 991px) {
	.mercancia-section {
		padding: 90px 30px;
		background-attachment: scroll;
	}
	.mercancia-section h2 {
		font-size: 38px;
	}
	.mercancia-servicios {
		grid-template-columns: 1fr;
	}
	.mercancia-card {
		padding: 30px;
	}
	.mercancia-card h3 {
		font-size: 24px;
	}
}

@media (max-width: 576px) {
	.mercancia-section {
		padding: 70px 20px;
	}
	.mercancia-section h2 {
		font-size: 32px;
	}
	.mercancia-texto {
		font-size: 15px;
	}
	.mercancia-card {
		padding: 25px;
	}
	.mercancia-card h3 {
		font-size: 22px;
	}
	.mercancia-grid span {
		width: 100%;
		text-align: center;
		font-size: 16px;
	}
}

/* ================================================= */
/* ===== ESTADISTICAS ===== */
/* ================================================= */
.stats-section {
	padding: 120px 60px;
	background: linear-gradient(
		180deg,
		#0d0d0d,
		#151515
	);
}

.stats-grid {
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

/* ===== TARJETA ===== */
.stat-card {
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #222;
	border-radius: 24px;
	padding: 60px 30px;
	text-align: center;
	overflow: hidden;
	backdrop-filter: blur(10px);
	transition: 0.4s;
}

/* ===== LINEA SUPERIOR ===== */
.stat-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: green;
}

/* ===== HOVER ===== */
.stat-card:hover {
	transform: translateY(-12px);
	border-color: green;
	box-shadow: 0 0 35px green;
}

/* ===== ICONO ===== */
.stat-icon {
	font-size: 55px;
	margin-bottom: 25px;
}

/* ===== NUMERO ===== */
.stat-card h2 {
	color: green;
	font-size: 60px;
	margin-bottom: 18px;
	font-weight: bold;
}

/* ===== TEXTO ===== */
.stat-card p {
	color: #d1d1d1;
	font-size: 20px;
	letter-spacing: 1px;
}

/* =======================================
   RESPONSIVE GENERAL SERVICIOS
======================================= */
@media (max-width: 768px) {
	.gps-section,
	.temperature-section,
	.eco-section,
	.security-section,
	.mercancia-section,
	.stats-section {
		padding: 70px 20px;
		background-attachment: scroll;
	}

	/* GPS */
	.gps-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.gps-content h2 {
		font-size: 32px;
	}
	.gps-card {
		padding: 25px;
	}

	/* TEMPERATURA */
	.temperature-content h2 {
		font-size: 32px;
	}
	.temp-box {
		width: 100%;
		padding: 25px;
		font-size: 24px;
	}

	/* ECO */
	.eco-grid {
		grid-template-columns: 1fr;
	}
	.eco-section h2 {
		font-size: 32px;
	}

	/* SEGURIDAD */
	.security-grid {
		grid-template-columns: 1fr;
	}
	.security-section h2 {
		font-size: 32px;
	}

	/* MERCANCIA */
	.mercancia-section h2 {
		font-size: 32px;
	}
	.mercancia-grid span {
		width: 100%;
	}

	/* ESTADISTICAS */
	.stats-grid {
		grid-template-columns: 1fr;
	}
	.stat-card h2 {
		font-size: 42px;
	}
}

/* Evita desbordamientos horizontales */
* {
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden;
}