/* =========================================================
   MARBECOM - DARK TELECOM STYLE
========================================================= */

:root{

	--primary:#0B1F33;
	--secondary:#163A5F;
	--accent:#2ED3FF;

	--bg:#F4F8FB;
	--text:#102030;

	--white:#ffffff;
}

/* ===== BASE ===== */

body.dark-telecom{
	background:
		radial-gradient(circle at top left,#163A5F 0%,#081421 55%);
	color:white;
	min-height:100vh;
	overflow-x:hidden;
	position:relative;
}

/* GRID TECNOLÓGICO */

body.dark-telecom::before{
	content:"";
	position:fixed;
	inset:0;

	background-image:
	linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
	linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

	background-size:60px 60px;

	pointer-events:none;
	z-index:-1;
}

/* ===== HEADER ===== */

.header{
	position:sticky;
	top:0;
	z-index:999;
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	background:
	linear-gradient(
		180deg,
		rgba(3,10,15,0.88),
		rgba(3,10,15,0.62)
	);
	border-bottom:1px solid rgba(0,255,200,0.08);
}

.nav-container{
	height:82px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0;
	width:min(100% - 48px, 1180px);
	max-width:1180px;
	margin:0 auto;
}

.logo-left img{
	height:42px;
	width:auto;
	display:block;
}

.logo-right img{
	height:28px;
	width:auto;
	display:block;
}

.menu{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:34px;
}

.menu a{
	color:#d6f7f4;
	font-size:18px;
	font-weight:500;
	position:relative;
	transition:.3s;
}

.menu a:hover{
	color:white;
}

.menu a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-6px;
	width:0;
	height:2px;
	background:var(--accent);
	transition:.3s;
}

.menu a:hover::after{
	width:100%;
}

/* ===== DROPDOWN ===== */

.dropdown{
	position:relative;
}

.dropdown-content{
	position:absolute;
	top:120%;
	left:0;

	min-width:220px;

	background:linear-gradient(
		135deg,
		rgba(8,18,35,.96),
		rgba(16,35,60,.96)
	);

	border:1px solid rgba(255,255,255,.08);

	border-radius:18px;

	padding:10px;

	backdrop-filter:blur(18px);

	box-shadow:
		0 20px 45px rgba(0,0,0,.25),
		0 0 0 1px rgba(255,255,255,.03);

	opacity:0;
	visibility:hidden;

	transform:translateY(10px);

	transition:
		opacity .3s ease,
		transform .3s ease,
		visibility .3s ease;

	z-index:999;
}

.dropdown:hover .dropdown-content{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.dropdown-content a{
	display:block;

	padding:14px 16px;

	color:#ffffff;

	font-size:14px;
	font-weight:500;

	border-radius:12px;

	position:relative;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;

	overflow:hidden;
}

.dropdown-content a::after{
	content:"";

	position:absolute;

	left:16px;
	bottom:8px;

	width:0%;
	height:2px;

	background:linear-gradient(
		90deg,
		#00c2ff,
		#4ddcff
	);

	border-radius:10px;

	transition:width .3s ease;
}

.dropdown-content a:hover{
	background:rgba(255,255,255,.04);
	transform:translateX(2px);
	color:#ffffff;
}

.dropdown-content a:hover::after{
	width:calc(100% - 32px);
}

.dropdown-content.right{
	right:0;
	left:auto;
}

/* ===== HERO ===== */

.hero-modern{
	padding:110px 0 90px;
	position:relative;
	overflow:hidden;
}

.hero-bg{
	position:absolute;
	width:600px;
	height:600px;
	right:-200px;
	top:-200px;

	background:radial-gradient(circle,
	rgba(46,211,255,.25) 0%,
	transparent 70%);

	filter:blur(30px);
}

.hero-grid{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	align-items:center;
	gap:80px;
}

.hero-badge{
	display:inline-block;

	background:rgba(46,211,255,.1);

	border:1px solid rgba(46,211,255,.25);

	color:var(--accent);

	padding:10px 18px;

	border-radius:40px;

	font-size:12px;
	font-weight:700;

	letter-spacing:1px;

	margin-bottom:28px;
}

.hero-content h1{
	font-size:72px;
	line-height:1;
	letter-spacing:-2px;
	margin-bottom:28px;

	max-width:780px;
}

.hero-content p{
	font-size:19px;
	line-height:1.9;

	color:rgba(255,255,255,.72);

	max-width:620px;
}

.hero-buttons{
	display:flex;
	gap:18px;
	margin-top:38px;
}

.hero-visual{
	position:relative;
}

.hero-visual img{
	width:100%;
	border-radius:30px;

	border:1px solid rgba(255,255,255,.08);

	box-shadow:
	0 30px 70px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.08);

	transition:.4s;
}

.hero-visual img:hover{
	transform:translateY(-8px);
}

/* ===== BOTONES ===== */

.btn-primary{
	background:linear-gradient(135deg,#2ED3FF,#1688C9);

	color:white;

	padding:16px 28px;

	border-radius:14px;

	font-weight:600;

	transition:.3s;
}

.btn-primary:hover{
	transform:translateY(-3px);

	box-shadow:
	0 12px 35px rgba(46,211,255,.25);
}

.btn-secondary{
	border:1px solid rgba(255,255,255,.15);

	padding:16px 28px;

	border-radius:14px;

	color:white;

	background:rgba(255,255,255,.04);

	backdrop-filter:blur(10px);

	transition:.3s;
}

.btn-secondary:hover{
	background:rgba(255,255,255,.08);
}

.btn-white{
	background:white;
	color:#081421;

	padding:14px 28px;

	border-radius:8px;

	font-weight:700;

	display:inline-block;

	transition:all .3s ease;
}

.btn-white:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* ===== STATS ===== */

.stats-band{
	padding:40px 0;

	background:rgba(255,255,255,.03);

	border-top:1px solid rgba(255,255,255,.05);
	border-bottom:1px solid rgba(255,255,255,.05);

	backdrop-filter:blur(10px);
}

.stats-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
	text-align:center;
}

.stat-item{
	padding:20px;
}

.stat-item h3{
	font-size:48px;
	margin-bottom:10px;
	color:var(--accent);
}

.stat-item p{
	color:rgba(255,255,255,.7);
}

/* ===== SERVICES ===== */

.services-section{
	padding:110px 0;
}

.section-heading{
	text-align:center;
	margin-bottom:70px;
}

.section-heading span{
	color:var(--accent);
	font-size:13px;
	font-weight:700;
	letter-spacing:2px;
}

.section-heading h2{
	font-size:52px;
	line-height:1.1;
	margin-top:20px;
}

.services-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}

.service-card{
	background:rgba(255,255,255,.04);

	border:1px solid rgba(255,255,255,.08);

	backdrop-filter:blur(18px);

	padding:40px;

	border-radius:28px;

	transition:.35s;
}

.service-card:hover{
	transform:translateY(-10px);

	border-color:rgba(46,211,255,.3);

	box-shadow:
	0 20px 50px rgba(0,0,0,.35);
}

.service-icon{
	font-size:42px;
	margin-bottom:25px;
}

.service-card h3{
	font-size:28px;
	margin-bottom:15px;
}

.service-card p{
	line-height:1.8;
	color:rgba(255,255,255,.72);
}

/* ===== ABOUT ===== */

.about-section{
	padding:20px 0 110px;
}

.about-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	align-items:center;
}

.about-image img{
	border-radius:28px;

	border:1px solid rgba(255,255,255,.08);

	box-shadow:
	0 25px 60px rgba(0,0,0,.35);
}

.about-text h2{
	font-size:54px;
	line-height:1.1;
	margin:20px 0 28px;
}

.about-text p{
	line-height:1.9;
	color:rgba(255,255,255,.72);
	margin-bottom:20px;
}

/* ===== CTA PREMIUM CARD ===== */

.cta-premium{

	width:88%;
	max-width:1300px;

	margin:90px auto;

	padding:100px 30px;

	text-align:center;

	border-radius:70px;

	background:
	linear-gradient(
		135deg,
		#11253d,
		#163A5F
	);

	border:1px solid rgba(255,255,255,.08);

	position:relative;
	overflow:hidden;

	box-shadow:
	0 30px 70px rgba(0,0,0,.35),
	0 0 120px rgba(46,211,255,.06);
}

/* GLOW */

.cta-premium::before{

	content:"";

	position:absolute;

	width:500px;
	height:500px;

	background:
	radial-gradient(
		circle,
		rgba(46,211,255,.18),
		transparent 70%
	);

	top:-250px;
	right:-200px;

	filter:blur(20px);
}

/* BRILLO */

.cta-premium::after{

	content:"";

	position:absolute;

	top:0;
	left:-120%;

	width:60%;
	height:100%;

	background:linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,.10),
		transparent
	);

	transform:skewX(-20deg);

	transition:1s;
}

.cta-premium:hover::after{
	left:130%;
}

.cta-premium *{
	position:relative;
	z-index:2;
}

/* TÍTULO */

.cta-premium h2{

	font-size:44px;
	line-height:1.1;

	max-width:950px;

	margin:20px auto 40px;
}

/* FRASE BANDA*/
.cta-sub{
	color:rgba(255,255,255,.72);
	font-size:18px;
	margin-bottom:30px;
}

/* BADGE */

.hero-badge-dark{

	background:rgba(46,211,255,.10);

	border:1px solid rgba(46,211,255,.18);

	color:#8FE8FF;
}

/* BOTÓN */

.btn-white{

	background:white;
	color:#081421;

	padding:15px 30px;

	border-radius:12px;

	font-weight:700;

	display:inline-block;

	transition:.3s;
}

.btn-white:hover{

	transform:translateY(-3px);

	box-shadow:
	0 12px 30px rgba(0,0,0,.18);
}

/* =========================================================
   CONNECTIVITY PAGE
========================================================= */

.connectivity-hero{
	padding:120px 0 90px;
	position:relative;
}

.connectivity-grid{
	display:grid;
	grid-template-columns:1fr 1.15fr;
	align-items:center;
	gap:90px;
}

/* TEXTO */

.connectivity-content{
	max-width:650px;
}

.connectivity-content h1{

	font-size:78px;
	line-height:.95;
	letter-spacing:-3px;

	margin:28px 0 24px;
}

.hero-line{

	width:90px;
	height:4px;

	border-radius:30px;

	background:linear-gradient(
		90deg,
		#2ED3FF,
		#1688C9
	);

	margin-bottom:40px;
}

.connectivity-content p{

	font-size:21px;
	line-height:1.8;

	color:rgba(255,255,255,.78);

	margin-bottom:26px;
}

/* IMAGEN */

.connectivity-image{
	position:relative;
}

.connectivity-image img{

	width:100%;
	height:540px;

	object-fit:cover;

	border-radius:34px;

	border:1px solid rgba(46,211,255,.25);

	box-shadow:
	0 35px 80px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.12);

	transition:.4s;
}

.connectivity-image img:hover{
	transform:translateY(-8px);
}

/* BOTÓN */

.connectivity-content .btn-primary{

	margin-top:18px;

	padding:18px 34px;

	font-size:17px;

	border-radius:14px;
}

/* SERVICES */

.connectivity-services{
	padding:30px 0 110px;
}

.services-mini-grid{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:34px;
}

.mini-service{

	background:rgba(255,255,255,.03);

	border:1px solid rgba(255,255,255,.08);

	backdrop-filter:blur(14px);

	border-radius:34px;

	padding:48px 34px;

	text-align:center;

	transition:.35s;
}

.mini-service:hover{

	transform:translateY(-10px);

	border-color:rgba(46,211,255,.28);

	box-shadow:
	0 25px 60px rgba(0,0,0,.35);
}

.mini-icon{

	font-size:54px;

	margin-bottom:26px;
}

.mini-service h3{

	font-size:34px;

	margin-bottom:16px;
}

.mini-service p{

	font-size:18px;

	line-height:1.7;

	color:rgba(255,255,255,.72);
}

/* RESPONSIVE */

@media(max-width:1200px){

	.connectivity-content h1{
		font-size:60px;
	}

	.connectivity-image img{
		height:460px;
	}
}

@media(max-width:1000px){

	.connectivity-grid,
	.services-mini-grid{
		grid-template-columns:1fr;
	}

	.connectivity-hero{
		padding-top:80px;
	}

	.connectivity-content{
		max-width:100%;
	}

	.connectivity-content h1{
		font-size:52px;
	}

	.connectivity-image img{
		height:auto;
	}
}

/* =========================================================
   CONNECTIVITY FINAL OVERRIDE
========================================================= */

.connectivity-hero{
	padding:70px 0 40px;
	position:relative;
}

.connectivity-grid{
	display:grid;
	grid-template-columns:0.9fr 1.1fr;
	align-items:center;
	gap:55px;
}

.connectivity-content{
	max-width:520px;
	padding-left:10px;
}

.connectivity-content h1{
	font-size:50px;
	line-height:.92;
	letter-spacing:0px;
	margin:20px 0 18px;
	font-weight:800;

	white-space:nowrap;
}

.hero-line{
	width:70px;
	height:3px;
	border-radius:30px;
	background:linear-gradient(
		90deg,
		#2ED3FF,
		#1688C9
	);
	margin-bottom:34px;
}

.connectivity-content p{
	font-size:17px;
	line-height:1.85;
	color:rgba(255,255,255,.78);
	margin-bottom:20px;
	font-weight:500;
}

.connectivity-content .btn-primary{
	margin-top:10px;
	padding:16px 28px;
	font-size:15px;
	border-radius:12px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	gap:10px;
}

.connectivity-image{
	position:relative;
}

.connectivity-image::before{
	content:"";
	position:absolute;
	inset:-20px;
	background:
	radial-gradient(
		circle,
		rgba(0,180,255,.12),
		transparent 70%
	);
	z-index:-1;
	filter:blur(30px);
}

.connectivity-image img{
	width:100%;
	object-fit:cover;
	border-radius:28px;
	border:2px solid rgba(0,195,255,.45);

	box-shadow:
	0 20px 60px rgba(0,0,0,.45),
	0 0 80px rgba(0,170,255,.08);

	transition:.4s;
}

.connectivity-image img:hover{
	transform:translateY(-6px);
}

.connectivity-services{
	padding:20px 0 70px;
}

.services-mini-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px;
}

.mini-icon{

	width:82px;
	height:82px;

	margin:0 auto 24px;

	border-radius:24px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:34px;

	color:#67e8ff;

	background:
	linear-gradient(
		180deg,
		rgba(46,211,255,.16),
		rgba(46,211,255,.06)
	);

	border:1px solid rgba(46,211,255,.18);

	box-shadow:
	0 10px 30px rgba(0,180,255,.12),
	inset 0 1px 0 rgba(255,255,255,.05);

	backdrop-filter:blur(12px);

	transition:.35s;
}

.mini-service:hover .mini-icon{

	transform:translateY(-4px);

	box-shadow:
	0 20px 40px rgba(0,180,255,.18),
	0 0 25px rgba(46,211,255,.12);
}

.mini-icon i{
	font-size:34px;
}

.container{
	max-width:1380px;
}

.footer{
	margin-top:10px;
}

/* =========================================================
   CONTACTO
========================================================= */

.contact-wrapper{
	max-width:800px;
	margin:50px auto;
}

.contact-card{
	background:#111827;
	border-radius:20px;
	padding:40px;
	box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.contact-card h1{
	text-align:center;
	margin-bottom:30px;
	color:#fff;
}

.contact-card .form-control{
	background:#1f2937;
	border:1px solid #374151;
	color:white;
	border-radius:12px;
	padding:14px;
}

.contact-card .form-control::placeholder{
	color:#9ca3af;
}

.contact-card textarea{
	min-height:150px;
	resize:none;
}

.contact-card select{
	background:#1f2937;
	color:white;
}

.form-label{
	font-weight:600;
}

.btn-contact{
	width:100%;
	padding:14px;
	border-radius:12px;
	background:#2563eb;
	border:none;
	color:white;
	font-weight:bold;
	transition:.3s;
}

.btn-contact:hover{
	background:#1d4ed8;
}

.legal-box{
	background:#1f2937;
	padding:20px;
	border-radius:12px;
	color:#d1d5db;
	font-size:14px;
	line-height:1.6;
	margin-top:10px;
}

.form-check-label a{
	color:#60a5fa;
	text-decoration:none;
}

.form-check-label a:hover{
	text-decoration:underline;
}

/* =========================================================
   LEGAL PAGE
========================================================= */

.legal-hero{
	padding:120px 0 80px;
}

.legal-hero-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:90px;
}

.legal-hero-content h1{
	font-size:72px;
	line-height:1;
	letter-spacing:-2px;
	margin:28px 0 24px;
	max-width:700px;
}

.legal-hero-content p{
	font-size:20px;
	line-height:1.8;
	color:rgba(255,255,255,.75);
	max-width:620px;
}

.legal-hero-image img{
	width:100%;
	height:500px;
	object-fit:cover;

	border-radius:34px;

	border:1px solid rgba(46,211,255,.2);

	box-shadow:
	0 30px 70px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.08);
}

/* ===== LEGAL GRID ===== */

.legal-section{
	padding:20px 0 100px;
}

.legal-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}

.legal-card{
	background:rgba(255,255,255,.03);

	border:1px solid rgba(255,255,255,.08);

	backdrop-filter:blur(16px);

	border-radius:30px;

	padding:42px 34px;

	transition:.35s;
}

.legal-card:hover{
	transform:translateY(-10px);

	border-color:rgba(46,211,255,.3);

	box-shadow:
	0 20px 60px rgba(0,0,0,.35);
}

.legal-icon{
	font-size:48px;
	margin-bottom:26px;
}

.legal-card h3{
	font-size:28px;
	margin-bottom:18px;
}

.legal-card p{
	font-size:17px;
	line-height:1.8;
	color:rgba(255,255,255,.72);
}

/* ===== CTA ===== */

.legal-cta{

	width:88%;
	max-width:1300px;

	margin:0 auto 90px;

	padding:90px 30px;

	text-align:center;

	border-radius:60px;

	background:
	linear-gradient(
		135deg,
		#11253d,
		#163A5F
	);

	border:1px solid rgba(255,255,255,.08);

	position:relative;
	overflow:hidden;

	box-shadow:
	0 30px 70px rgba(0,0,0,.35),
	0 0 120px rgba(46,211,255,.06);
}

.legal-cta h2{
	font-size:46px;
	line-height:1.15;
	max-width:900px;
	margin:20px auto 30px;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1100px){

	.legal-hero-grid,
	.legal-grid{
		grid-template-columns:1fr;
	}

	.legal-hero-content h1{
		font-size:54px;
	}

	.legal-hero-image img{
		height:auto;
	}
}

@media(max-width:768px){

	.legal-hero{
		padding-top:70px;
	}

	.legal-hero-content h1{
		font-size:42px;
	}

	.legal-card{
		padding:34px 26px;
	}

	.legal-card h3{
		font-size:24px;
	}

	.legal-cta{
		width:94%;
		padding:60px 24px;
		border-radius:28px;
	}

	.legal-cta h2{
		font-size:32px;
	}
	
}

/* ===== LEGAL DOWNLOAD ===== */

.legal-actions{
	margin-top:38px;
}

.legal-download{

	display:inline-flex;
	align-items:center;
	gap:14px;

	padding:18px 30px;

	border-radius:18px;

	background:
	linear-gradient(
		135deg,
		rgba(46,211,255,.16),
		rgba(46,211,255,.06)
	);

	border:1px solid rgba(46,211,255,.22);

	color:white;

	font-size:15px;
	font-weight:600;

	backdrop-filter:blur(14px);

	transition:.35s;

	box-shadow:
	0 10px 35px rgba(0,180,255,.08);
}

.legal-download span{
	font-size:20px;
}

.legal-download:hover{

	transform:translateY(-4px);

	border-color:rgba(46,211,255,.45);

	box-shadow:
	0 18px 45px rgba(0,180,255,.16),
	0 0 25px rgba(46,211,255,.12);
}

/* =========================================================
   DONDE ESTAMOS
========================================================= */

.location-hero{
	padding:90px 0 80px;
}

.location-grid{
	display:grid;
	grid-template-columns:1fr 1.05fr;
	align-items:start;
	gap:80px;
}

/* TEXTO */

.location-content{
	max-width:620px;
}

.location-content h1{

	font-size:78px;
	line-height:.95;

	letter-spacing:-3px;

	margin:28px 0 24px;
}

.location-content p{

	font-size:20px;
	line-height:1.8;

	color:rgba(255,255,255,.76);

	margin-bottom:26px;
}

/* INFO CARDS */

.location-info-grid{

	display:flex;
	flex-direction:column;
	gap:18px;

	margin-top:40px;
}

.location-info-card{

	display:flex;
	align-items:center;
	gap:20px;

	padding:22px 24px;

	border-radius:24px;

	background:rgba(255,255,255,.04);

	border:1px solid rgba(255,255,255,.08);

	backdrop-filter:blur(14px);

	transition:.35s;
}

.location-info-card:hover{

	transform:translateY(-4px);

	border-color:rgba(46,211,255,.24);

	box-shadow:
	0 18px 40px rgba(0,0,0,.25);
}

/* ICONO */

.info-icon{

	width:62px;
	height:62px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:18px;

	font-size:28px;

	background:linear-gradient(
		135deg,
		rgba(46,211,255,.22),
		rgba(22,136,201,.18)
	);

	border:1px solid rgba(46,211,255,.22);

	box-shadow:
	0 10px 25px rgba(46,211,255,.12);
}

.location-info-card h3{

	font-size:18px;
	margin-bottom:6px;
}

.location-info-card p{

	margin:0;

	font-size:15px;

	line-height:1.5;

	color:rgba(255,255,255,.68);
}

/* MAPA */

.location-map{

	position:relative;
}

.location-map iframe{

	width:100%;
	height:720px;

	border:0;

	display:block;

	border-radius:34px;

	border:1px solid rgba(46,211,255,.18);

	box-shadow:
	0 35px 80px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.08);
}

.location-map{
	position:sticky;
	top:120px;
}

.location-map::before{

	content:"";

	position:absolute;

	width:340px;
	height:340px;

	right:-80px;
	top:-80px;

	background:
	radial-gradient(
		circle,
		rgba(46,211,255,.18),
		transparent 70%
	);

	filter:blur(20px);

	z-index:-1;
}

.location-subtext{

	font-size:20px;
	line-height:1.7;

	color:rgba(255,255,255,.72);

	max-width:620px;

	margin-bottom:45px;
}

/* =========================================================
   PRODUCTS PAGE
========================================================= */

.products-hero{
	padding:120px 0 90px;
}

.products-grid{
	display:grid;
	grid-template-columns:1fr 1.1fr;
	align-items:center;
	gap:90px;
}

.products-content h1{
	font-size:76px;
	line-height:.95;
	letter-spacing:-3px;
	margin:28px 0 24px;
}

.products-content p{
	font-size:20px;
	line-height:1.8;
	color:rgba(255,255,255,.76);
	margin-bottom:24px;
	max-width:620px;
}

.products-subtext{
	font-size:24px !important;
	color:white !important;
	font-weight:600;
}

/* IMAGEN */

.products-image img{
	width:100%;
	height:560px;
	object-fit:cover;

	border-radius:34px;

	border:1px solid rgba(46,211,255,.2);

	box-shadow:
	0 35px 80px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.08);
}

/* SERVICES */

.products-services{
	padding:20px 0 110px;
}

.products-cards-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:34px;
}

.product-card{
	background:rgba(255,255,255,.03);

	border:1px solid rgba(255,255,255,.08);

	border-radius:34px;

	overflow:hidden;

	backdrop-filter:blur(14px);

	transition:.35s;
}

.product-card:hover{
	transform:translateY(-10px);

	border-color:rgba(46,211,255,.28);

	box-shadow:
	0 25px 60px rgba(0,0,0,.35);
}

.product-image img{
	width:100%;
	height:240px;
	object-fit:cover;
}

.product-content{
	padding:34px;  
}

.product-icon{
	width:70px;
	height:70px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:34px;

	border-radius:22px;

	background:linear-gradient(
		135deg,
		rgba(46,211,255,.18),
		rgba(46,211,255,.08)
	);

	border:1px solid rgba(46,211,255,.18);

	margin-bottom:24px;
}

.product-content h3{
	font-size:34px;
	margin-bottom:18px;
}

.product-content p{
	font-size:18px;
	line-height:1.7;
	color:rgba(255,255,255,.72);
}

/* CTA */

.products-cta{
	padding-bottom:110px;
}

.products-cta-box{
	text-align:center;

	padding:90px 40px;

	border-radius:50px;

	background:
	linear-gradient(
		135deg,
		#10263f,
		#163A5F
	);

	border:1px solid rgba(255,255,255,.08);

	box-shadow:
	0 30px 70px rgba(0,0,0,.35),
	0 0 120px rgba(46,211,255,.06);
}

.products-cta-box h2{
	font-size:48px;
	line-height:1.1;

	max-width:900px;

	margin:24px auto 28px;
}

.products-cta-box p{
	font-size:19px;
	line-height:1.8;

	color:rgba(255,255,255,.72);

	max-width:760px;

	margin:0 auto 40px;
}

/* RESPONSIVE */

@media(max-width:1000px){

	.products-grid,
	.products-cards-grid{
		grid-template-columns:1fr;
	}

	.products-content h1{
		font-size:54px;
	}

	.products-image img{
		height:auto;
	}

	.products-cta-box h2{
		font-size:38px;
	}
}

@media(max-width:768px){

	.products-content h1{
		font-size:42px;
	}

	.products-content p{
		font-size:17px;
	}

	.product-content h3{
		font-size:28px;
	}

	.products-cta-box{
		padding:60px 24px;
		border-radius:30px;
	}

	.products-cta-box h2{
		font-size:30px;
	}
}

/* =========================================================
   TARIFAS PAGE
========================================================= */

.tarifas-hero{
	padding:120px 0 90px;
}

.tarifas-grid{
	display:grid;
	grid-template-columns:1fr 1.1fr;
	align-items:center;
	gap:90px;
}

/* TEXTO */

.tarifas-content h1{
	font-size:76px;
	line-height:.95;
	letter-spacing:-3px;

	margin:28px 0 24px;
}

.tarifas-content p{
	font-size:20px;
	line-height:1.8;

	color:rgba(255,255,255,.76);

	margin-bottom:24px;

	max-width:620px;
}

.tarifas-subtext{
	font-size:24px !important;
	color:white !important;
	font-weight:600;
}


/* =========================================================
   TARIFAS SHOWCASE
========================================================= */
.tarifa-card img{

	width:100%;

	height:auto;

	object-fit:contain;

	display:block;

	border-radius:22px;
}


.tarifas-section{
	padding:10px 0 110px;
}

.tarifas-showcase{
	display:flex;
	flex-direction:column;
	gap:40px;
}

/* BANNER */

.tarifa-banner{
	position:relative;

	display:block;

	border-radius:38px;

	overflow:hidden;

	border:1px solid rgba(255,255,255,.08);

	background:rgba(255,255,255,.03);

	padding:18px;

	box-shadow:
	0 30px 70px rgba(0,0,0,.35),
	0 0 100px rgba(46,211,255,.04);

	transition:.45s ease;
}

.tarifa-banner:hover{
	transform:translateY(-8px);

	border-color:rgba(46,211,255,.25);

	box-shadow:
	0 35px 90px rgba(0,0,0,.45),
	0 0 120px rgba(46,211,255,.10);
}

/* IMAGEN */

.tarifa-banner img{
	width:100%;

	height:auto;

	display:block;

	object-fit:contain;

	border-radius:22px;

	transition:transform .7s ease;
}

.tarifa-banner:hover img{
	transform:scale(1.03);
}

/* OVERLAY */

.tarifa-overlay{
	position:absolute;
	inset:0;

	display:flex;
	flex-direction:column;
	justify-content:flex-end;

	padding:50px;

	background:
	linear-gradient(
		to top,
		rgba(3,10,20,.92) 0%,
		rgba(3,10,20,.55) 40%,
		rgba(3,10,20,.15) 70%,
		transparent 100%
	);
}

.tarifa-overlay span{
	color:#5FDBFF;

	font-size:13px;
	font-weight:700;

	letter-spacing:2px;

	margin-bottom:18px;
}

.tarifa-overlay h3{
	font-size:42px;
	line-height:1.1;

	max-width:620px;

	color:white;
}

/* RESPONSIVE */

@media(max-width:1000px){

	.tarifa-banner{
		height:340px;
	}

	.tarifa-overlay{
		padding:34px;
	}

	.tarifa-overlay h3{
		font-size:34px;
	}
}

@media(max-width:768px){

	.tarifa-banner{
		height:260px;
		border-radius:24px;
	}

	.tarifa-overlay{
		padding:24px;
	}

	.tarifa-overlay h3{
		font-size:24px;
	}
}

/* CTA */

.tarifas-cta{
	padding-bottom:110px;
}

.tarifas-cta-box{
	text-align:center;

	padding:90px 40px;

	border-radius:50px;

	background:
	linear-gradient(
		135deg,
		#10263f,
		#163A5F
	);

	border:1px solid rgba(255,255,255,.08);

	box-shadow:
	0 30px 70px rgba(0,0,0,.35),
	0 0 120px rgba(46,211,255,.06);
}

.tarifas-cta-box h2{
	font-size:48px;
	line-height:1.1;

	max-width:900px;

	margin:24px auto 28px;
}

.tarifas-cta-box p{
	font-size:19px;
	line-height:1.8;

	color:rgba(255,255,255,.72);

	max-width:760px;

	margin:0 auto 40px;
}



/* RESPONSIVE */

@media(max-width:1000px){

	.tarifas-grid,
	.tarifas-cards-grid{
		grid-template-columns:1fr;
	}

	.tarifas-content h1{
		font-size:54px;
	}

	.tarifas-image img{
		height:auto;
	}

	.tarifas-cta-box h2{
		font-size:38px;
	}
}

@media(max-width:768px){

	.tarifas-content h1{
		font-size:42px;
	}

	.tarifas-content p{
		font-size:17px;
	}

	.tarifa-content h3{
		font-size:28px;
	}

	.tarifas-cta-box{
		padding:60px 24px;
		border-radius:30px;
	}

	.tarifas-cta-box h2{
		font-size:30px;
	}
}

@media(max-width:1000px){

	.location-map iframe{
		height:520px;
	}
}

@media(max-width:768px){

	.location-map iframe{
		height:420px;
	}
}

/* RESPONSIVE */

@media(max-width:1000px){

	.location-grid{
		grid-template-columns:1fr;
	}

	.location-content{
		max-width:100%;
	}

	.location-content h1{
		font-size:54px;
	}

	.location-map iframe{
		height:480px;
	}
}

@media(max-width:768px){

	.location-hero{
		padding-top:80px;
	}

	.location-content h1{
		font-size:42px;
	}

	.location-content p{
		font-size:17px;
	}

	.location-info-card{
		padding:18px;
	}

	.location-map iframe{
		height:400px;
	}
}

/* ===== RESPONSIVE ===== */

@media(max-width:1200px){

	.connectivity-content h1{
		font-size:54px;
	}

	.connectivity-image img{
		height:390px;
	}
}

@media(max-width:1000px){

	.connectivity-grid,
	.services-mini-grid{
		grid-template-columns:1fr;
	}

	.connectivity-content{
		max-width:100%;
	}

	.connectivity-content h1{
		font-size:48px;
	}

	.connectivity-hero{
		padding-top:60px;
	}

	.connectivity-image img{
		height:auto;
	}
}

@media(max-width:768px){

	.connectivity-content h1{
		font-size:40px;
		line-height:1;
	}

	.connectivity-content p{
		font-size:16px;
	}

	.mini-service{
		padding:32px 22px;
		min-height:auto;
	}
}

@media(max-width:768px){

	.connectivity-content h1{
		font-size:42px;
		line-height:1;
	}

	.connectivity-content p{
		font-size:17px;
	}

	.mini-service{
		padding:36px 24px;
	}

	.mini-service h3{
		font-size:28px;
	}
}

/* RESPONSIVE */

@media(max-width:1000px){

	.connectivity-grid,
	.services-mini-grid{
		grid-template-columns:1fr;
	}

	.connectivity-content h1{
		font-size:48px;
	}

	.connectivity-hero{
		padding-top:70px;
	}
}

@media(max-width:768px){

	.connectivity-content h1{
		font-size:40px;
	}

	.connectivity-content p{
		font-size:16px;
	}

	.mini-service{
		padding:30px 24px;
	}
}

/* ===== RESPONSIVE ===== */

@media(max-width:1000px){

	.cta-premium{

		width:92%;

		padding:70px 25px;

		border-radius:30px;
	}

	.cta-premium h2{
		font-size:42px;
	}
}

@media(max-width:768px){

	.cta-premium{

		width:94%;

		padding:55px 20px;

		border-radius:24px;
	}

	.cta-premium h2{
		font-size:32px;
	}
}
/* BADGE */

.hero-badge-dark{

	background:rgba(46,211,255,.10);

	border:1px solid rgba(46,211,255,.22);

	color:#9BEFFF;

	font-size:11px;

	padding:8px 15px;
}

/* BOTÓN */

.btn-white{

	background:white;

	color:#0B1F33;

	padding:11px 22px;

	border-radius:7px;

	font-size:14px;
	font-weight:700;

	display:inline-block;

	transition:all .3s ease;
}

.btn-white:hover{

	transform:translateY(-2px);

	box-shadow:
	0 8px 20px rgba(0,0,0,.18);
}

/* BADGE */

.hero-badge-dark{

	background:rgba(46,211,255,.08);

	border:1px solid rgba(46,211,255,.18);

	color:#8FE8FF;
}

/* BOTÓN */

.btn-white{

	background:white;

	color:#0B1F33;

	padding:13px 28px;

	border-radius:8px;

	font-weight:700;

	display:inline-block;

	transition:all .3s ease;
}

.btn-white:hover{

	transform:translateY(-2px);

	box-shadow:
	0 10px 25px rgba(0,0,0,.22);
}



.hero-badge-dark{

	background:rgba(255,255,255,.08);

	border:1px solid rgba(255,255,255,.12);

	color:#c8f7ff;
}

.btn-white{

	background:white;
	color:#00695c;

	padding:15px 30px;

	border-radius:10px;

	font-weight:700;

	display:inline-block;

	transition:.3s;
}

.btn-white:hover{

	transform:translateY(-3px);

	box-shadow:
	0 12px 30px rgba(0,0,0,.18);
}

/* BADGE */
.hero-badge-dark{
	background:rgba(46,211,255,.10);

	border:1px solid rgba(46,211,255,.18);

	color:#8FE8FF;
}

/* ===== FOOTER ===== */

.footer{
	padding:50px 0;

	background:rgba(0,0,0,.22);

	border-top:1px solid rgba(255,255,255,.05);

	text-align:center;
}

.footer p{
	color:rgba(255,255,255,.65);
	margin:8px 0;
}

/* ===== FADE ===== */

.fade-in{
	opacity:1;
	transform:translateY(0);
}

body.js .fade-in{
	opacity:0;
	transform:translateY(30px);

	transition:
		opacity .8s ease,
		transform .8s ease;
}

body.js .fade-in.visible{
	opacity:1;
	transform:translateY(0);
}
body.dark-telecom{
	padding-bottom:0;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1000px){

	.hero-grid,
	.about-grid,
	.services-grid,
	.stats-grid{
		grid-template-columns:1fr;
	}

	.hero-content h1{
		font-size:52px;
	}

	.about-text h2{
		font-size:42px;
	}

	.section-heading h2{
		font-size:40px;
	}

	.cta-premium h2{
		font-size:42px;
	}

	.hero-modern{
		padding-top:70px;
	}
}

@media(max-width:768px){

	.cta-premium{
		padding:24px 18px;
	}

	.cta-premium h2{
		font-size:24px;
	}
	.menu{
		display:none;
	}

	.hero-content h1{
		font-size:44px;
		line-height:1.05;
	}

	.hero-buttons{
		flex-direction:column;
	}

	.btn-primary,
	.btn-secondary{
		text-align:center;
	}

	.services-section,
	.about-section{
		padding:80px 0;
	}

	.cta-premium{
		padding:70px 25px;
	}
}

/* Premium cross-site: header scroll + botón flotante */
.header{
	transition:
		background .45s ease,
		backdrop-filter .45s ease,
		border-color .45s ease,
		box-shadow .45s ease;
}

.header.scrolled{
	background:rgba(8, 20, 33, 0.94);
	backdrop-filter:blur(22px);
	border-bottom-color:rgba(0, 255, 200, 0.14);
	box-shadow:0 12px 40px rgba(0, 0, 0, 0.35);
}

.float-contact{
	position:fixed;
	right:28px;
	bottom:28px;
	z-index:998;
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	height:58px;
	border-radius:50%;
	background:linear-gradient(135deg, #00ffd0, #00c2a8);
	color:#041014;
	box-shadow:
		0 12px 32px rgba(0, 255, 210, 0.32),
		0 0 24px rgba(0, 255, 200, 0.22);
	transition:
		transform .35s cubic-bezier(.22, 1, .36, 1),
		box-shadow .35s ease;
}

.float-contact:hover{
	transform:translateY(-4px) scale(1.05);
	box-shadow:
		0 18px 42px rgba(0, 255, 210, 0.42),
		0 0 36px rgba(0, 255, 200, 0.35);
}

.float-contact:focus-visible{
	outline:2px solid #00ffd0;
	outline-offset:3px;
}

@media (max-width:640px){
	.float-contact{
		right:18px;
		bottom:18px;
		width:52px;
		height:52px;
	}
}
/* =========================================================
   MOBILE REDESIGN V3 - MARBECOM
   Header fijo, menú hamburguesa, enlace a MARBE Comunicaciones
   y ajuste real para teléfono móvil.
========================================================= */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.mobile-menu-toggle,
.site-switch-mobile{
  display:none !important;
}

.mobile-menu-toggle{
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  margin-left:auto;
  border:1px solid rgba(46,211,255,.28);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#8fe8ff;
  cursor:pointer;
}

.mobile-menu-line{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:#8fe8ff;
  transition:transform .26s ease, opacity .26s ease;
}

.header.nav-open .mobile-menu-line:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.header.nav-open .mobile-menu-line:nth-child(2){
  opacity:0;
}

.header.nav-open .mobile-menu-line:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width: 980px){
  body.dark-telecom{
    padding-top:64px !important;
    background:
      radial-gradient(circle at 84% 4%, rgba(46,211,255,.17), transparent 30%),
      radial-gradient(circle at 0% 28%, rgba(0,255,208,.08), transparent 31%),
      linear-gradient(145deg,#06111d 0%,#0a1a2a 58%,#06101b 100%) !important;
  }

  body.mobile-menu-open{
    overflow:hidden !important;
  }

  body.dark-telecom::before{
    background-size:42px 42px;
    opacity:.55;
  }

  .container{
    width:min(100% - 32px, 560px) !important;
    max-width:560px !important;
  }

  .header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:9999 !important;
    background:rgba(6,17,29,.96) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    box-shadow:0 12px 36px rgba(0,0,0,.38) !important;
  }

  .nav-container{
    height:64px !important;
    padding:0 !important;
    width:min(100% - 28px, 560px) !important;
  }

  .logo-left img{
    height:40px !important;
    width:auto !important;
  }

  .logo-right img{
    height:30px !important;
    width:auto !important;
  }

  .logo-dropdown{
    display:none !important;
  }

  .mobile-menu-toggle{
    display:flex !important;
  }

  .header .menu{
    position:fixed !important;
    top:74px !important;
    left:16px !important;
    right:16px !important;
    z-index:10000 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    max-height:calc(100svh - 92px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:12px !important;
    border-radius:22px !important;
    background:
      radial-gradient(circle at top right, rgba(46,211,255,.15), transparent 34%),
      linear-gradient(180deg, rgba(7,22,36,.99), rgba(4,12,21,.99)) !important;
    border:1px solid rgba(46,211,255,.20) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.58) !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px) scale(.98);
    transition:opacity .22s ease, visibility .22s ease, transform .22s ease;
  }

  .header.nav-open .menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  .header .menu .dropdown{
    width:100% !important;
  }

  .header .menu a,
  .header .menu .dropdown > a{
    width:100% !important;
    min-height:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 15px !important;
    border-radius:15px !important;
    color:#effcff !important;
    font-size:.98rem !important;
    font-weight:700 !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.055) !important;
  }

  .header .menu a::before,
  .header .menu .dropdown > a::before{
    content:"";
    width:8px;
    height:8px;
    margin-right:10px;
    border-radius:50%;
    background:rgba(46,211,255,.54);
    box-shadow:0 0 16px rgba(46,211,255,.28);
  }

  .header .menu a::after,
  .header .menu .dropdown > a::after{
    content:"›" !important;
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin-left:auto;
    color:#8fe8ff !important;
    background:none !important;
    font-size:1.15rem;
    line-height:1;
  }

  .header .menu .dropdown-content{
    position:static !important;
    min-width:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    display:grid !important;
    gap:8px !important;
    margin-top:8px !important;
    padding:0 0 0 10px !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .header .menu .dropdown-content a{
    min-height:46px !important;
    font-size:.93rem !important;
    font-weight:650 !important;
    background:rgba(46,211,255,.055) !important;
    color:rgba(255,255,255,.9) !important;
  }

  .site-switch-mobile{
    display:flex !important;
    margin-top:8px !important;
    background:linear-gradient(135deg, rgba(46,211,255,.20), rgba(0,255,208,.12)) !important;
    border:1px solid rgba(46,211,255,.34) !important;
    color:#ffffff !important;
  }

  .site-switch-mobile::after{
    content:"↗" !important;
  }

  .hero-modern{
    padding:42px 0 48px !important;
  }

  .hero-grid,
  .about-grid,
  .services-grid,
  .stats-grid,
  .contact-grid,
  .legal-hero-grid,
  .conditions-grid,
  .tarifas-grid,
  .productos-grid,
  .conectividad-grid,
  .ubicacion-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .hero-content,
  .section-heading,
  .about-text,
  .cta-premium{
    text-align:center !important;
  }

  .hero-content h1,
  .section-heading h2,
  .about-text h2,
  .cta-premium h2{
    font-size:clamp(2rem, 9vw, 2.8rem) !important;
    line-height:1.08 !important;
    letter-spacing:-1.3px !important;
  }

  .hero-content p,
  .about-text p,
  .section-heading p,
  .cta-premium p{
    font-size:.98rem !important;
    line-height:1.62 !important;
  }

  .hero-buttons,
  .cta-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-white,
  .btn-submit{
    width:100% !important;
    min-height:50px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:14px 18px !important;
    border-radius:15px !important;
  }

  .hero-visual,
  .about-image,
  .contact-card,
  .legal-card,
  .condition-card,
  .service-card,
  .stat-card,
  .tarifa-card,
  .producto-card,
  .conectividad-card,
  .ubicacion-card{
    border-radius:22px !important;
  }

  .hero-visual img,
  .about-image img,
  .conectividad-image img,
  .ubicacion-image img{
    width:100% !important;
    height:auto !important;
    max-height:230px !important;
    object-fit:cover !important;
    border-radius:22px !important;
  }

  .stats-section,
  .services-section,
  .about-section,
  .cta-section,
  .contact-section,
  .legal-section,
  .tarifas-section,
  .productos-section,
  .conectividad-section,
  .ubicacion-section{
    padding:46px 0 !important;
  }

  .stat-card,
  .service-card,
  .contact-card,
  .legal-card,
  .condition-card,
  .tarifa-card,
  .producto-card,
  .conectividad-card,
  .ubicacion-card{
    padding:22px 18px !important;
    min-height:auto !important;
  }

  .cta-premium{
    padding:28px 20px !important;
    border-radius:24px !important;
  }

  .contact-card input,
  .contact-card textarea,
  .form-control{
    font-size:16px !important;
  }

  .footer{
    padding:36px 0 !important;
  }
}

@media (max-width: 480px){
  .container{
    width:min(100% - 26px, 440px) !important;
  }

  .header .menu{
    top:72px !important;
    left:12px !important;
    right:12px !important;
  }

  .logo-left img{
    height:36px !important;
  }

  .hero-content h1,
  .section-heading h2,
  .about-text h2,
  .cta-premium h2{
    font-size:clamp(1.85rem, 9.2vw, 2.45rem) !important;
  }

  .hero-modern{
    padding-top:34px !important;
  }
}

/* =========================================================
   FINAL POLISH - MARBECOM PUBLICACIÓN
   Limpieza visual, estados activos, formulario y móvil.
========================================================= */

.menu a.active,
.menu .dropdown > a.active{
  color:#ffffff;
}

.menu a.active::after,
.menu .dropdown > a.active::after{
  width:100%;
}

.header .site-switch-mobile{
  text-decoration:none;
}

.contact-form #success-msg,
#success-msg{
  display:none;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(46,211,255,.10);
  border:1px solid rgba(46,211,255,.25);
  color:#dffaff;
  font-weight:700;
  line-height:1.45;
}

#success-msg.form-error{
  background:rgba(255,80,80,.10);
  border-color:rgba(255,80,80,.30);
  color:#ffdada;
}

.contact-form.is-sending{
  opacity:.78;
}

.contact-form button:disabled,
.btn-primary:disabled{
  cursor:not-allowed;
  opacity:.75;
}

.tarifa-banner,
.product-card,
.mini-service,
.contact-card{
  will-change:transform;
}

.tarifa-banner:focus-visible,
.product-card:focus-within,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-white:focus-visible,
.mobile-menu-toggle:focus-visible{
  outline:3px solid rgba(46,211,255,.75);
  outline-offset:4px;
}

@media (min-width:981px){
  .site-switch-mobile{
    display:none !important;
  }

  .menu a.active{
    color:#fff;
  }
}

@media (max-width:980px){
  .menu a.active,
  .header .menu .dropdown > a.active{
    background:linear-gradient(135deg, rgba(46,211,255,.18), rgba(0,255,208,.08)) !important;
    border-color:rgba(46,211,255,.32) !important;
  }

  .site-switch-mobile{
    margin-top:12px !important;
    min-height:56px !important;
    background:linear-gradient(135deg,#2ed3ff,#00ffd0) !important;
    color:#041014 !important;
    border:0 !important;
    box-shadow:0 16px 35px rgba(46,211,255,.18) !important;
  }

  .site-switch-mobile::before{
    background:#041014 !important;
    box-shadow:none !important;
  }

  .site-switch-mobile::after{
    color:#041014 !important;
    font-weight:900 !important;
  }

  .products-hero,
  .tarifas-hero,
  .connectivity-hero,
  .legal-hero{
    padding:34px 0 28px !important;
  }

  .products-grid,
  .tarifas-grid,
  .connectivity-grid,
  .legal-hero-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .products-content,
  .tarifas-content,
  .connectivity-content,
  .legal-hero-content{
    max-width:100% !important;
    padding-left:0 !important;
    text-align:center !important;
  }

  .products-content h1,
  .tarifas-content h1,
  .connectivity-content h1,
  .legal-hero-content h1{
    white-space:normal !important;
    font-size:clamp(2.05rem, 9vw, 2.75rem) !important;
    line-height:1.05 !important;
    letter-spacing:-1.2px !important;
    margin:18px 0 14px !important;
  }

  .hero-line{
    margin:0 auto 22px !important;
  }

  .products-content p,
  .tarifas-content p,
  .connectivity-content p,
  .legal-hero-content p{
    font-size:.98rem !important;
    line-height:1.62 !important;
    margin-bottom:14px !important;
  }

  .products-image img,
  .tarifas-image img,
  .connectivity-image img,
  .legal-hero-image img{
    width:100% !important;
    height:auto !important;
    max-height:260px !important;
    object-fit:cover !important;
    border-radius:22px !important;
  }

  .products-cards-grid,
  .services-mini-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .product-image img{
    height:190px !important;
  }

  .product-content,
  .mini-service{
    padding:22px 18px !important;
  }

  .product-content h3,
  .mini-service h3{
    font-size:1.35rem !important;
    margin-bottom:10px !important;
  }

  .product-content p,
  .mini-service p{
    font-size:.95rem !important;
    line-height:1.55 !important;
  }

  .tarifas-showcase{
    gap:18px !important;
  }

  .tarifa-banner{
    padding:8px !important;
    border-radius:22px !important;
  }

  .tarifa-banner img{
    border-radius:16px !important;
  }

  .contact-card{
    padding:22px 18px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    width:100% !important;
    min-height:48px !important;
    font-size:16px !important;
  }

  .contact-form textarea{
    min-height:130px !important;
  }

  .cta-premium{
    width:min(100% - 28px, 560px) !important;
    margin:34px auto !important;
  }

  .footer .container{
    text-align:center !important;
  }
}

@media (max-width:480px){
  .products-image img,
  .tarifas-image img,
  .connectivity-image img,
  .legal-hero-image img{
    max-height:220px !important;
  }

  .product-image img{
    height:170px !important;
  }
}

/* Contact form base styling */
.contact-form{
  display:grid;
  gap:14px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:#ffffff;
  padding:15px 16px;
  font:inherit;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.58);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color:rgba(46,211,255,.55);
  box-shadow:0 0 0 4px rgba(46,211,255,.10);
  background:rgba(255,255,255,.075);
}

.contact-form textarea{
  min-height:150px;
  resize:vertical;
}

.contact-form .btn-primary,
.contact-form button[type="submit"]{
  border:none;
  cursor:pointer;
}


/* =========================================================
   AJUSTE FINAL HEADER + BOTÓN FLOTANTE MARBECOM
   Igualación visual con MARBE Comunicaciones
========================================================= */

@media (min-width:981px){
  .header .nav-container{
    width:min(100% - 48px, 1180px) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    height:82px !important;
    padding:0 !important;
  }

  .header .logo-left img{
    height:42px !important;
    width:auto !important;
    display:block !important;
  }

  .header .logo-right img{
    height:28px !important;
    width:auto !important;
    display:block !important;
  }

  .header .menu{
    gap:34px !important;
  }
}

/* Botón flotante de contacto en MarbeCom: azul/cian, no verde */
.float-contact,
.floating-contact,
.contact-floating,
.whatsapp-float,
.btn-floating,
body.dark-telecom .float-contact,
body.dark-telecom .floating-contact,
body.dark-telecom .contact-floating,
body.dark-telecom .whatsapp-float,
body.dark-telecom .btn-floating{
  background:linear-gradient(135deg,#2ed3ff 0%,#0ea5e9 55%,#2563eb 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(147,226,255,.55) !important;
  box-shadow:
    0 18px 42px rgba(14,165,233,.34),
    0 0 0 8px rgba(46,211,255,.08) !important;
}

.float-contact i,
.floating-contact i,
.contact-floating i,
.whatsapp-float i,
.btn-floating i,
.float-contact svg,
.floating-contact svg,
.contact-floating svg,
.whatsapp-float svg,
.btn-floating svg{
  color:#ffffff !important;
  stroke:#ffffff !important;
}

.float-contact:hover,
.floating-contact:hover,
.contact-floating:hover,
.whatsapp-float:hover,
.btn-floating:hover{
  background:linear-gradient(135deg,#67e8f9 0%,#38bdf8 48%,#1d4ed8 100%) !important;
  box-shadow:
    0 22px 52px rgba(56,189,248,.42),
    0 0 0 9px rgba(56,189,248,.10) !important;
}


/* =========================================================
   FIX DROPDOWN HEADER - EVITA QUE SE CIERRE AL BAJAR EL RATÓN
   Crea una zona invisible entre el logo/enlace y el desplegable.
========================================================= */
@media (min-width:981px){
  .header .dropdown,
  .header .logo-dropdown{
    position:relative !important;
  }

  .header .dropdown::after,
  .header .logo-dropdown::after{
    content:"";
    position:absolute;
    left:-18px;
    right:-18px;
    top:100%;
    height:28px;
    display:block;
    background:transparent;
    pointer-events:auto;
  }

  .header .dropdown-content{
    top:calc(100% + 10px) !important;
    pointer-events:none;
  }

  .header .dropdown:hover .dropdown-content,
  .header .dropdown:focus-within .dropdown-content,
  .header .logo-dropdown:hover .dropdown-content,
  .header .logo-dropdown:focus-within .dropdown-content{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .header .dropdown-content:hover{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }
}


/* =========================================================
   FIX MENÚ MARBECOM - SIN SUBRAYADOS NATIVOS
   El menú debe comportarse como MARBE Comunicaciones:
   solo se marca la página activa/hover con color y línea controlada.
========================================================= */

/* Quita el subrayado típico de los enlaces del menú */
.header .menu a,
.header .menu a:link,
.header .menu a:visited,
.header .menu a:hover,
.header .menu a:focus,
.header .menu a:active,
.header .dropdown-content a,
.header .dropdown-content a:link,
.header .dropdown-content a:visited,
.header .dropdown-content a:hover,
.header .dropdown-content a:focus,
.header .dropdown-content a:active{
  text-decoration:none !important;
}

/* Estado normal: limpio */
.header .menu > a,
.header .menu .dropdown > a{
  color:#d6f7f4 !important;
}

/* Hover: solo cambia color, no subrayado del navegador */
.header .menu > a:hover,
.header .menu .dropdown:hover > a,
.header .menu .dropdown > a:hover{
  color:#00ffd0 !important;
}

/* Línea decorativa controlada, como en MARBE Comunicaciones */
@media (min-width:981px){
  .header .menu > a::after,
  .header .menu .dropdown > a::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:-7px !important;
    width:0 !important;
    height:1px !important;
    background:#00ffd0 !important;
    transition:.3s !important;
  }

  .header .menu > a:hover::after,
  .header .menu .dropdown:hover > a::after,
  .header .menu > a.active::after,
  .header .menu .dropdown > a.active::after{
    width:100% !important;
  }

  /* Evita que todos parezcan activos a la vez */
  .header .menu > a:not(.active):not(:hover)::after,
  .header .menu .dropdown:not(:hover) > a:not(.active)::after{
    width:0 !important;
  }
}

/* Dropdown limpio: sin subrayado y con aspecto de tarjeta */
.header .dropdown-content a{
  color:#d6f7f4 !important;
  text-decoration:none !important;
}

.header .dropdown-content a:hover{
  color:#00ffd0 !important;
  text-decoration:none !important;
  background:rgba(0,255,208,.08) !important;
}

/* En móvil no queremos líneas de subrayado debajo de los enlaces */
@media (max-width:980px){
  .header .menu a::after,
  .header .menu .dropdown > a::after,
  .header .dropdown-content a::after{
    text-decoration:none !important;
  }

  .header .menu a,
  .header .menu .dropdown > a,
  .header .dropdown-content a{
    text-decoration:none !important;
  }
}


/* =========================================================
   FIX FINAL MARBECOM - COLORES AZULES PROPIOS
   Evita que MarbeCom herede el verde de MARBE Comunicaciones.
========================================================= */

:root{
  --marbecom-blue:#2ed3ff;
  --marbecom-blue-2:#38bdf8;
  --marbecom-blue-dark:#0ea5e9;
}

/* Menú superior MarbeCom en escritorio */
@media (min-width:981px){
  .header .menu > a,
  .header .menu .dropdown > a{
    color:#d8f6ff !important;
    text-decoration:none !important;
  }

  .header .menu > a:hover,
  .header .menu .dropdown:hover > a,
  .header .menu .dropdown > a:hover,
  .header .menu > a.active,
  .header .menu .dropdown > a.active{
    color:var(--marbecom-blue) !important;
  }

  .header .menu > a::after,
  .header .menu .dropdown > a::after{
    background:var(--marbecom-blue) !important;
  }

  .header .menu > a:hover::after,
  .header .menu .dropdown:hover > a::after,
  .header .menu > a.active::after,
  .header .menu .dropdown > a.active::after{
    background:var(--marbecom-blue) !important;
    box-shadow:0 0 14px rgba(46,211,255,.35) !important;
  }
}

/* Desplegable de Conectividad */
.header .dropdown-content a,
.header .dropdown-content a:link,
.header .dropdown-content a:visited{
  color:#d8f6ff !important;
  text-decoration:none !important;
}

.header .dropdown-content a:hover,
.header .dropdown-content a:focus{
  color:var(--marbecom-blue) !important;
  text-decoration:none !important;
  background:rgba(46,211,255,.10) !important;
}

/* Menú móvil MarbeCom */
@media (max-width:980px){
  .header .mobile-menu-toggle{
    border-color:rgba(46,211,255,.34) !important;
    color:var(--marbecom-blue) !important;
    background:rgba(7,22,36,.82) !important;
    box-shadow:0 14px 36px rgba(14,165,233,.20) !important;
  }

  .header .mobile-menu-toggle:hover,
  .header .mobile-menu-toggle:focus-visible{
    background:rgba(46,211,255,.10) !important;
    border-color:rgba(46,211,255,.55) !important;
  }

  .header .mobile-menu-line{
    background:var(--marbecom-blue) !important;
  }

  .header .menu a,
  .header .menu .dropdown > a,
  .header .dropdown-content a{
    color:#e7faff !important;
    text-decoration:none !important;
  }

  .header .menu a:hover,
  .header .menu .dropdown > a:hover,
  .header .dropdown-content a:hover,
  .header .menu a.active,
  .header .menu .dropdown > a.active{
    color:var(--marbecom-blue) !important;
    border-color:rgba(46,211,255,.34) !important;
    background:rgba(46,211,255,.08) !important;
  }

  .header .menu a::before,
  .header .menu .dropdown > a::before{
    background:var(--marbecom-blue) !important;
    box-shadow:0 0 16px rgba(46,211,255,.35) !important;
  }

  .header .menu a::after,
  .header .menu .dropdown > a::after,
  .header .dropdown-content a::after{
    color:var(--marbecom-blue) !important;
  }

  .site-switch-mobile{
    background:linear-gradient(135deg,#2ed3ff,#38bdf8,#0ea5e9) !important;
    color:#04131c !important;
    box-shadow:0 16px 35px rgba(46,211,255,.22) !important;
  }

  .site-switch-mobile::before{
    background:#04131c !important;
  }

  .site-switch-mobile::after{
    color:#04131c !important;
  }
}

/* Botón flotante MarbeCom azul/cian */
.float-contact,
.floating-contact,
.contact-floating,
.whatsapp-float,
.btn-floating,
body.dark-telecom .float-contact,
body.dark-telecom .floating-contact,
body.dark-telecom .contact-floating,
body.dark-telecom .whatsapp-float,
body.dark-telecom .btn-floating{
  background:linear-gradient(135deg,#2ed3ff 0%,#0ea5e9 55%,#2563eb 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(147,226,255,.55) !important;
  box-shadow:
    0 18px 42px rgba(14,165,233,.34),
    0 0 0 8px rgba(46,211,255,.08) !important;
}

.float-contact i,
.floating-contact i,
.contact-floating i,
.whatsapp-float i,
.btn-floating i,
.float-contact svg,
.floating-contact svg,
.contact-floating svg,
.whatsapp-float svg,
.btn-floating svg{
  color:#ffffff !important;
  stroke:#ffffff !important;
}


/* =========================================================
   FIX FINAL MARBECOM - HEADER MISMO TAMAÑO EN TODAS LAS PÁGINAS
   Especialmente contratoalta.html, que puede verse afectada por estilos externos.
========================================================= */

/* Evita que Bootstrap u otros estilos cambien el header */
body.dark-telecom .header,
.header{
  min-height:82px !important;
  height:82px !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

body.dark-telecom .header .nav-container,
.header .nav-container{
  height:82px !important;
  min-height:82px !important;
  width:min(100% - 48px, 1180px) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
}

/* Mismo tamaño de logos en todas las páginas de MarbeCom */
body.dark-telecom .header .logo-left img,
.header .logo-left img{
  height:42px !important;
  max-height:42px !important;
  width:auto !important;
  display:block !important;
}

body.dark-telecom .header .logo-right img,
.header .logo-right img{
  height:28px !important;
  max-height:28px !important;
  width:auto !important;
  display:block !important;
}

/* Mismo tamaño de enlaces del menú en todas las páginas */
body.dark-telecom .header .menu,
.header .menu{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;
  margin:0 !important;
  padding:0 !important;
}

body.dark-telecom .header .menu > a,
body.dark-telecom .header .menu .dropdown > a,
.header .menu > a,
.header .menu .dropdown > a{
  font-family:'Inter', sans-serif !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

/* Evita que el enlace activo de Contrato Alta cambie tamaño/peso */
body.dark-telecom .header .menu > a.active,
body.dark-telecom .header .menu .dropdown > a.active,
.header .menu > a.active,
.header .menu .dropdown > a.active{
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  transform:none !important;
}

/* Dropdown con tamaño estable */
body.dark-telecom .header .dropdown,
.header .dropdown{
  display:block !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
}

body.dark-telecom .header .dropdown-content a,
.header .dropdown-content a{
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
}

/* Versión móvil: conserva el header compacto pero igual en todas */
@media (max-width:980px){
  body.dark-telecom .header,
  .header{
    min-height:64px !important;
    height:64px !important;
  }

  body.dark-telecom .header .nav-container,
  .header .nav-container{
    height:64px !important;
    min-height:64px !important;
    width:min(100% - 28px, 560px) !important;
    max-width:560px !important;
  }

  body.dark-telecom .header .logo-left img,
  .header .logo-left img{
    height:38px !important;
    max-height:38px !important;
  }

  body.dark-telecom .header .logo-right img,
  .header .logo-right img{
    height:28px !important;
    max-height:28px !important;
  }

  body.dark-telecom .header .menu,
  .header .menu{
    gap:6px !important;
  }

  body.dark-telecom .header .menu > a,
  body.dark-telecom .header .menu .dropdown > a,
  .header .menu > a,
  .header .menu .dropdown > a{
    font-size:.98rem !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    padding:14px 15px !important;
  }
}


/* =========================================================
   FIX DEFINITIVO CONTRATO ALTA
   Se elimina dependencia visual de Bootstrap y se iguala el header
   con el resto de páginas de MarbeCom.
========================================================= */

/* Header MarbeCom fijo en tamaño: todas las páginas iguales */
html body.dark-telecom header.header{
  height:82px !important;
  min-height:82px !important;
  display:flex !important;
  align-items:center !important;
  background:
    linear-gradient(
      180deg,
      rgba(3,10,15,0.88),
      rgba(3,10,15,0.62)
    ) !important;
  border-bottom:1px solid rgba(0,255,200,0.08) !important;
  box-sizing:border-box !important;
}

html body.dark-telecom header.header > .nav-container{
  height:82px !important;
  min-height:82px !important;
  width:min(100% - 48px, 1180px) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
}

html body.dark-telecom header.header .logo-left,
html body.dark-telecom header.header .logo-right,
html body.dark-telecom header.header .logo-left a,
html body.dark-telecom header.header .logo-right a{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

html body.dark-telecom header.header .logo-left img{
  height:42px !important;
  max-height:42px !important;
  width:auto !important;
  display:block !important;
}

html body.dark-telecom header.header .logo-right img{
  height:28px !important;
  max-height:28px !important;
  width:auto !important;
  display:block !important;
}

html body.dark-telecom header.header nav#menu-principal{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;
  margin:0 !important;
  padding:0 !important;
}

html body.dark-telecom header.header nav#menu-principal > a,
html body.dark-telecom header.header nav#menu-principal > .dropdown > a{
  font-family:'Inter', sans-serif !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  color:#d8f6ff !important;
  text-decoration:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  letter-spacing:0 !important;
  box-sizing:border-box !important;
}

html body.dark-telecom header.header nav#menu-principal > a.active,
html body.dark-telecom header.header nav#menu-principal > .dropdown > a.active,
html body.dark-telecom header.header nav#menu-principal > a:hover,
html body.dark-telecom header.header nav#menu-principal > .dropdown:hover > a{
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  color:#2ed3ff !important;
  transform:none !important;
}

/* Formulario Contrato Alta sin Bootstrap */
.contrato-alta-page .contact-wrapper{
  padding:70px 0 55px !important;
}

.contrato-alta-page .contact-card{
  max-width:980px !important;
  margin:0 auto !important;
}

.contrato-alta-page .row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:18px !important;
  margin:0 !important;
}

.contrato-alta-page .col-md-6,
.contrato-alta-page .col-12{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
}

.contrato-alta-page .col-12{
  grid-column:1 / -1 !important;
}

.contrato-alta-page .form-label{
  display:block !important;
  margin:0 0 8px !important;
  color:#ffffff !important;
  font-size:.95rem !important;
  font-weight:700 !important;
}

.contrato-alta-page .form-control{
  width:100% !important;
  min-height:50px !important;
  padding:14px 15px !important;
  border-radius:14px !important;
  border:1px solid rgba(46,211,255,.18) !important;
  background:rgba(255,255,255,.055) !important;
  color:#ffffff !important;
  font-family:'Inter', sans-serif !important;
  font-size:1rem !important;
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}

.contrato-alta-page .form-control:focus{
  border-color:rgba(46,211,255,.55) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 4px rgba(46,211,255,.10) !important;
}

.contrato-alta-page textarea.form-control{
  min-height:135px !important;
  resize:vertical !important;
}

.contrato-alta-page .form-check{
  display:flex !important;
  gap:12px !important;
  align-items:flex-start !important;
  margin:8px 0 0 !important;
}

.contrato-alta-page .form-check-input{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  margin-top:3px !important;
  accent-color:#2ed3ff !important;
}

.contrato-alta-page .form-check-label{
  color:#d8f6ff !important;
  line-height:1.55 !important;
}

.contrato-alta-page .form-check-label a{
  color:#2ed3ff !important;
  text-decoration:none !important;
  font-weight:800 !important;
}

@media (max-width:980px){
  html body.dark-telecom header.header{
    height:64px !important;
    min-height:64px !important;
  }

  html body.dark-telecom header.header > .nav-container{
    height:64px !important;
    min-height:64px !important;
    width:min(100% - 28px, 560px) !important;
    max-width:560px !important;
  }

  html body.dark-telecom header.header .logo-left img{
    height:38px !important;
    max-height:38px !important;
  }

  html body.dark-telecom header.header .logo-right img{
    height:28px !important;
    max-height:28px !important;
  }

  html body.dark-telecom header.header nav#menu-principal{
    gap:6px !important;
  }

  html body.dark-telecom header.header nav#menu-principal > a,
  html body.dark-telecom header.header nav#menu-principal > .dropdown > a,
  html body.dark-telecom header.header nav#menu-principal > a.active,
  html body.dark-telecom header.header nav#menu-principal > .dropdown > a.active{
    font-size:.98rem !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    padding:14px 15px !important;
  }

  .contrato-alta-page .contact-wrapper{
    padding:34px 0 36px !important;
  }

  .contrato-alta-page .row{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .contrato-alta-page .col-md-6,
  .contrato-alta-page .col-12{
    grid-column:1 / -1 !important;
  }
}


/* =========================================================
   FIX DEFINITIVO HEADER ÚNICO MARBECOM
   Este bloque manda sobre todos los anteriores.
   Soluciona que Contrato Alta cambie tamaño/posición del menú.
========================================================= */

html body.dark-telecom .header.marbecom-header,
html body.dark-telecom header.header.marbecom-header{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;
  height:82px !important;
  min-height:82px !important;
  display:flex !important;
  align-items:center !important;
  background:
    linear-gradient(
      180deg,
      rgba(3,10,15,0.88),
      rgba(3,10,15,0.62)
    ) !important;
  border-bottom:1px solid rgba(0,255,200,0.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

html body.dark-telecom .marbecom-header-inner{
  width:min(100% - 48px, 1180px) !important;
  max-width:1180px !important;
  height:82px !important;
  min-height:82px !important;
  margin:0 auto !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) 190px !important;
  align-items:center !important;
  column-gap:24px !important;

  box-sizing:border-box !important;
}

html body.dark-telecom .marbecom-header-inner .logo-left{
  justify-self:start !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

html body.dark-telecom .marbecom-header-inner .logo-dropdown{
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  position:relative !important;
}

html body.dark-telecom .marbecom-header-inner .logo-left a,
html body.dark-telecom .marbecom-header-inner .logo-right{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  text-decoration:none !important;
}

html body.dark-telecom .marbecom-header-inner .logo-left img{
  height:42px !important;
  max-height:42px !important;
  width:auto !important;
  display:block !important;
  object-fit:contain !important;
}

html body.dark-telecom .marbecom-header-inner .logo-right img{
  height:28px !important;
  max-height:28px !important;
  width:auto !important;
  display:block !important;
  object-fit:contain !important;
}

html body.dark-telecom .marbecom-header-inner nav#menu-principal{
  justify-self:center !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
}

html body.dark-telecom .marbecom-header-inner nav#menu-principal > a,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:'Inter', sans-serif !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;

  color:#d8f6ff !important;
  text-decoration:none !important;

  margin:0 !important;
  padding:0 !important;
  min-height:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}

html body.dark-telecom .marbecom-header-inner nav#menu-principal > a:hover,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown:hover > a,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > a.active,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a.active{
  color:#2ed3ff !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  transform:none !important;
  text-decoration:none !important;
}

html body.dark-telecom .marbecom-header-inner nav#menu-principal > a::after,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  bottom:-8px !important;
  width:0 !important;
  height:1px !important;
  background:#2ed3ff !important;
  transition:width .25s ease !important;
  box-shadow:0 0 12px rgba(46,211,255,.35) !important;
}

html body.dark-telecom .marbecom-header-inner nav#menu-principal > a:hover::after,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown:hover > a::after,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > a.active::after,
html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a.active::after{
  width:100% !important;
}

/* Dropdown estable, sin cortes al bajar el ratón */
html body.dark-telecom .marbecom-header-inner .dropdown{
  position:relative !important;
}

html body.dark-telecom .marbecom-header-inner .dropdown::after{
  content:"" !important;
  position:absolute !important;
  left:-8px !important;
  right:-8px !important;
  top:100% !important;
  height:18px !important;
  background:transparent !important;
}

html body.dark-telecom .marbecom-header-inner .dropdown-content{
  top:calc(100% + 14px) !important;
  z-index:10001 !important;
  text-decoration:none !important;
}

html body.dark-telecom .marbecom-header-inner .dropdown-content a{
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  color:#d8f6ff !important;
  text-decoration:none !important;
}

html body.dark-telecom .marbecom-header-inner .dropdown-content a:hover{
  color:#2ed3ff !important;
  background:rgba(46,211,255,.10) !important;
  text-decoration:none !important;
}

/* Mobile: mantiene la hamburguesa y no rompe el header */
@media (max-width:980px){
  html body.dark-telecom .header.marbecom-header,
  html body.dark-telecom header.header.marbecom-header{
    position:fixed !important;
    height:64px !important;
    min-height:64px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }

  html body.dark-telecom .marbecom-header-inner{
    width:min(100% - 28px, 560px) !important;
    max-width:560px !important;
    height:64px !important;
    min-height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    column-gap:0 !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-left img{
    height:38px !important;
    max-height:38px !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-dropdown{
    display:none !important;
  }

  html body.dark-telecom .marbecom-header-inner .mobile-menu-toggle{
    display:flex !important;
    flex:0 0 46px !important;
    margin-left:auto !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal{
    position:fixed !important;
    top:74px !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-height:calc(100svh - 92px) !important;
    overflow:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding:12px !important;
    border-radius:22px !important;
    background:linear-gradient(180deg, rgba(5,14,22,0.98), rgba(3,10,15,0.98)) !important;
    border:1px solid rgba(46,211,255,.20) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.58) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) scale(.98) !important;
    transition:opacity .22s ease, visibility .22s ease, transform .22s ease !important;
  }

  html body.dark-telecom .header.nav-open .marbecom-header-inner nav#menu-principal{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a{
    width:100% !important;
    min-height:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 15px !important;
    border-radius:15px !important;
    color:#e7faff !important;
    font-size:.98rem !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(255,255,255,.055) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a.active,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a.active{
    color:#2ed3ff !important;
    border-color:rgba(46,211,255,.34) !important;
    background:rgba(46,211,255,.08) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a::after,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a::after{
    position:static !important;
    content:"›" !important;
    width:auto !important;
    height:auto !important;
    background:none !important;
    color:#2ed3ff !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   LIMPIEZA FINAL MARBECOM
   Se elimina visualmente cualquier enlace auxiliar de cambio de web.
   El cambio a MARBE Comunicaciones se mantiene desde el logo derecho.
========================================================= */
body.dark-telecom .site-switch-mobile{
  display:none !important;
}


/* =========================================================
   FIX CONTRATO ALTA - SELECT ASUNTO LEGIBLE
   Corrige que las opciones del desplegable se vean blancas
   sobre fondo claro al abrir el selector.
========================================================= */

.contrato-alta-page select,
.contrato-alta-page select.form-control{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  color:#ffffff !important;
  background-color:rgba(255,255,255,.055) !important;
  border:1px solid rgba(46,211,255,.18) !important;
}

/* Cuando se abre el desplegable, los navegadores suelen usar fondo claro.
   Por eso las opciones deben ir oscuras para que siempre se lean. */
.contrato-alta-page select option,
.contrato-alta-page select.form-control option{
  color:#06111d !important;
  background:#ffffff !important;
}

/* Opción placeholder/deshabilitada */
.contrato-alta-page select option:disabled,
.contrato-alta-page select.form-control option:disabled{
  color:#6b7280 !important;
}

/* Cuando el select está enfocado mantiene el estilo azul de MarbeCom */
.contrato-alta-page select:focus,
.contrato-alta-page select.form-control:focus{
  color:#ffffff !important;
  border-color:rgba(46,211,255,.55) !important;
  background-color:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 4px rgba(46,211,255,.10) !important;
}

/* En móvil algunos navegadores pintan el select distinto */
@media (max-width:980px){
  .contrato-alta-page select,
  .contrato-alta-page select.form-control{
    color:#ffffff !important;
    background-color:rgba(255,255,255,.07) !important;
  }

  .contrato-alta-page select option,
  .contrato-alta-page select.form-control option{
    color:#06111d !important;
    background:#ffffff !important;
  }
}


/* =========================================================
   REFRESH CORPORATIVO MARBECOM
   Ajustes visuales para dar una imagen más seria y profesional
========================================================= */

.hero-visual img,
.about-image img,
.products-image img,
.legal-hero-image img{
  width:100%;
  object-fit:cover;
  border-radius:32px;
  border:1px solid rgba(120,180,230,.16);
  box-shadow:0 28px 72px rgba(0,0,0,.42), 0 0 90px rgba(46,211,255,.05);
}

.hero-visual img{
  min-height:430px;
  aspect-ratio: 4 / 3;
  object-position:center;
}

.about-image img{
  min-height:420px;
  aspect-ratio: 5 / 4;
}

.section-heading h2,
.about-text h2,
.products-content h1,
.location-content h1,
.legal-hero-content h1{
  max-width:12ch;
}

.service-card,
.product-card,
.legal-card,
.location-info-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(120,180,230,.12);
  box-shadow:0 22px 54px rgba(0,0,0,.26);
}

.service-card::before,
.product-card::before,
.legal-card::before,
.location-info-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, rgba(46,211,255,.0), rgba(46,211,255,.75), rgba(46,211,255,.0));
  opacity:.9;
}

.service-icon,
.product-icon,
.info-icon,
.legal-icon,
.legal-download span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:64px;
  padding:0 18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(46,211,255,.16), rgba(46,211,255,.06));
  border:1px solid rgba(46,211,255,.22);
  color:#8fe8ff;
  font-size:15px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  box-shadow:0 14px 28px rgba(6,28,46,.28);
}

.service-card h3{
  font-size:26px;
  line-height:1.2;
}

.service-card p,
.product-content p,
.legal-card p,
.location-info-card p{
  color:rgba(255,255,255,.75);
}

.product-content h3{
  font-size:30px;
  line-height:1.15;
}

.product-card .product-image img{
  transition:transform .45s ease;
}

.product-card:hover .product-image img,
.hero-visual:hover img,
.about-image:hover img{
  transform:scale(1.02);
}

.location-info-grid{
  gap:16px;
}

.location-info-card{
  gap:18px;
  align-items:flex-start;
}

.location-info-card h3{
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:1.2px;
  color:#8fe8ff;
  margin-bottom:6px;
}

.location-info-card p{
  font-size:16px;
  color:rgba(255,255,255,.84);
}

.legal-download{
  gap:12px;
  border-radius:16px;
  padding:16px 24px;
}

.legal-download span{
  min-width:52px;
  height:52px;
  font-size:12px;
  letter-spacing:1.4px;
}

.footer-title,
.footer-subtitle,
.footer-info,
.footer-email{
  max-width:unset;
}

@media (min-width: 981px){
  .services-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:26px;
  }

  .products-cards-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:28px;
  }
}

@media (max-width: 980px){
  .hero-visual img,
  .about-image img,
  .products-image img,
  .legal-hero-image img{
    min-height:unset;
    aspect-ratio:auto;
    border-radius:24px;
  }

  .section-heading h2,
  .about-text h2,
  .products-content h1,
  .location-content h1,
  .legal-hero-content h1{
    max-width:none;
  }

  .service-icon,
  .product-icon,
  .info-icon,
  .legal-icon,
  .legal-download span{
    min-width:56px;
    height:56px;
    font-size:13px;
    letter-spacing:1.2px;
  }

  .service-card,
  .product-card,
  .legal-card,
  .location-info-card{
    border-radius:24px;
  }

  .service-card h3,
  .product-content h3,
  .legal-card h3{
    font-size:22px;
  }
}


/* =========================================================
   SEGUNDA PASADA PREMIUM MARBECOM
   Línea visual más sobria, corporativa y menos infantil
========================================================= */

:root{
  --mc-bg:#06111d;
  --mc-panel:rgba(9,25,42,.72);
  --mc-panel-soft:rgba(255,255,255,.035);
  --mc-border:rgba(129,201,255,.14);
  --mc-border-strong:rgba(46,211,255,.34);
  --mc-text:#f4fbff;
  --mc-muted:rgba(226,242,252,.72);
  --mc-blue:#2ed3ff;
  --mc-blue-2:#38bdf8;
}

/* Hero más premium */
.hero-modern{
  position:relative;
  overflow:hidden;
}

.hero-modern::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(4,12,21,.96) 0%, rgba(6,17,29,.80) 42%, rgba(8,32,52,.42) 100%),
    radial-gradient(circle at 74% 25%, rgba(46,211,255,.16), transparent 32%);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:1;
}

.hero-badge{
  border:1px solid rgba(46,211,255,.28);
  background:rgba(46,211,255,.075);
  box-shadow:0 14px 38px rgba(0,0,0,.20);
}

.hero-content h1{
  letter-spacing:-3px;
}

.hero-content p{
  color:var(--mc-muted);
}

/* Imagen del index más seria */
.hero-visual{
  position:relative;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:34px;
  background:
    linear-gradient(135deg, rgba(46,211,255,.30), rgba(255,255,255,.05), rgba(46,211,255,.08));
  opacity:.7;
  z-index:-1;
}

.hero-visual img{
  filter:saturate(.92) contrast(1.08) brightness(.86);
}

.hero-visual::after{
  content:"Operador global de comunicaciones";
  position:absolute;
  left:22px;
  bottom:22px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(3,10,15,.72);
  border:1px solid rgba(255,255,255,.12);
  color:#eaf9ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}

/* Secciones */
.section-heading{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

.section-heading .section-intro,
.section-intro{
  margin:22px auto 0;
  max-width:760px;
  color:var(--mc-muted);
  font-size:18px;
  line-height:1.75;
}

/* Tarjetas corporativas */
.service-card,
.product-card,
.legal-card,
.location-info-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
  border:1px solid var(--mc-border);
  box-shadow:
    0 22px 54px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.service-card:hover,
.product-card:hover,
.legal-card:hover,
.location-info-card:hover{
  border-color:var(--mc-border-strong);
  box-shadow:
    0 26px 72px rgba(0,0,0,.34),
    0 0 54px rgba(46,211,255,.06);
}

/* Sustituye look emoji por códigos técnicos */
.service-icon,
.product-icon,
.info-icon,
.legal-icon{
  min-width:64px;
  height:64px;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(46,211,255,.14), rgba(46,211,255,.045));
  border:1px solid rgba(46,211,255,.24);
  color:#8fe8ff;
  font-size:14px !important;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  box-shadow:
    0 16px 32px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* Listas profesionales en tarjetas del index */
.professional-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:11px;
}

.professional-list li{
  position:relative;
  padding-left:20px;
  color:rgba(235,248,255,.78);
  font-size:15px;
  line-height:1.45;
}

.professional-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2ed3ff;
  box-shadow:0 0 14px rgba(46,211,255,.5);
}

/* About ejecutivo */
.premium-about .about-image{
  position:relative;
}

.premium-about .about-image::after{
  content:"Red · Voz · Datos · Soporte";
  position:absolute;
  left:22px;
  bottom:22px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(3,10,15,.76);
  border:1px solid rgba(255,255,255,.12);
  color:#eaf9ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}

.executive-points{
  display:grid;
  gap:12px;
  margin:30px 0 32px;
}

.executive-points div{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.executive-points strong{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(46,211,255,.10);
  border:1px solid rgba(46,211,255,.20);
  color:#8fe8ff;
  font-size:13px;
  letter-spacing:1px;
}

.executive-points span{
  color:rgba(244,251,255,.86);
  font-weight:700;
}

/* Productos más profesionales */
.product-card{
  display:grid;
  grid-template-rows:auto 1fr;
}

.product-image{
  position:relative;
  overflow:hidden;
}

.product-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(3,10,15,.52) 100%);
  pointer-events:none;
}

.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.product-meta span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(46,211,255,.075);
  border:1px solid rgba(46,211,255,.16);
  color:#ccefff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
}

/* Tarifas con estilo de propuesta */
.premium-tarifas .tarifas-showcase{
  gap:28px;
}

.premium-tarifa-card{
  padding:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
  border:1px solid var(--mc-border);
  border-radius:26px;
}

.tarifa-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.tarifa-card-head span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  color:#8fe8ff;
  background:rgba(46,211,255,.10);
  border:1px solid rgba(46,211,255,.18);
  font-weight:900;
  font-size:13px;
}

.tarifa-card-head h3{
  margin:0;
  color:#f4fbff;
  font-size:20px;
  line-height:1.2;
  text-align:right;
}

.premium-tarifa-card img{
  border-radius:18px;
  background:#ffffff;
}

/* CTA menos infantil y más premium */
.cta-premium{
  border-radius:44px;
  background:
    radial-gradient(circle at 20% 0%, rgba(46,211,255,.20), transparent 35%),
    linear-gradient(135deg, #0b1b2d, #102b47 58%, #081421);
  border:1px solid rgba(120,180,230,.14);
}

.cta-premium h2{
  letter-spacing:-1.5px;
}

.btn-primary,
.btn-secondary,
.btn-white{
  text-decoration:none !important;
}

/* Ajuste de mapa y ubicación */
.location-map iframe{
  filter:saturate(.88) contrast(1.02);
  border:1px solid rgba(46,211,255,.18);
}

/* Responsive */
@media (max-width:980px){
  .hero-visual::after,
  .premium-about .about-image::after{
    left:16px;
    bottom:16px;
    font-size:10px;
    max-width:calc(100% - 32px);
    white-space:normal;
  }

  .section-heading .section-intro,
  .section-intro{
    font-size:15.5px;
    line-height:1.65;
  }

  .professional-list{
    margin-top:18px;
  }

  .executive-points{
    margin:24px 0 28px;
  }

  .premium-tarifa-card{
    padding:16px;
    border-radius:22px;
  }

  .tarifa-card-head h3{
    font-size:17px;
  }

  .cta-premium{
    border-radius:28px;
  }
}


/* =========================================================
   REDISEÑO PREMIUM - PRODUCTOS Y SERVICIOS (MARBECOM)
========================================================= */

.mc-products-hero{
  padding:118px 0 82px;
}

.mc-products-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px, 520px);
  gap:72px;
  align-items:center;
}

.mc-products-copy h1{
  font-size:74px;
  line-height:.96;
  letter-spacing:-3px;
  margin:26px 0 22px;
  max-width:11ch;
}

.mc-products-lead{
  font-size:21px;
  line-height:1.7;
  color:rgba(244,251,255,.78);
  max-width:620px;
}

.mc-products-points{
  display:grid;
  gap:14px;
  margin:34px 0 34px;
  max-width:620px;
}

.mc-products-points div{
  display:flex;
  align-items:center;
  gap:15px;
  padding:15px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.mc-products-points strong{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(46,211,255,.11);
  border:1px solid rgba(46,211,255,.22);
  color:#8fe8ff;
  font-size:13px;
  font-weight:800;
}

.mc-products-points span{
  color:rgba(244,251,255,.88);
  font-weight:600;
  line-height:1.45;
}

.mc-products-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.mc-products-visual{
  position:relative;
}

.mc-products-visual img{
  width:100%;
  min-height:560px;
  object-fit:cover;
  border-radius:34px;
  border:1px solid rgba(129,201,255,.16);
  box-shadow:0 28px 72px rgba(0,0,0,.42);
  filter:saturate(.92) contrast(1.05) brightness(.92);
}

.mc-products-panel{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:22px 24px;
  border-radius:22px;
  background:rgba(4,12,21,.78);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
}

.mc-products-panel span{
  display:block;
  margin-bottom:12px;
  color:#8fe8ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mc-products-panel ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
}

.mc-products-panel li{
  position:relative;
  padding-left:18px;
  color:rgba(245,251,255,.88);
  font-size:14px;
}

.mc-products-panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2ed3ff;
  box-shadow:0 0 12px rgba(46,211,255,.55);
}

.mc-products-overview{
  padding:12px 0 104px;
}

.mc-product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:54px;
}

.mc-product-card{
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.024));
  border:1px solid rgba(129,201,255,.14);
  box-shadow:0 22px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}

.mc-product-media{
  position:relative;
}

.mc-product-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 44%, rgba(3,10,15,.58) 100%);
}

.mc-product-media img{
  width:100%;
  height:248px;
  object-fit:cover;
  display:block;
}

.mc-product-body{
  padding:30px 30px 32px;
}

.mc-product-top{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.mc-product-code{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(46,211,255,.15), rgba(46,211,255,.05));
  border:1px solid rgba(46,211,255,.24);
  color:#8fe8ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.8px;
  box-shadow:0 12px 24px rgba(0,0,0,.20);
}

.mc-product-top h3{
  font-size:30px;
  line-height:1.1;
  margin:0;
}

.mc-product-body p{
  color:rgba(238,248,255,.76);
  font-size:17px;
  line-height:1.72;
  margin-bottom:22px;
}

.mc-product-list{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:grid;
  gap:11px;
}

.mc-product-list li{
  position:relative;
  padding-left:19px;
  color:rgba(244,251,255,.82);
  font-size:15px;
  line-height:1.5;
}

.mc-product-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2ed3ff;
}

.mc-product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mc-product-tags span{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(46,211,255,.075);
  border:1px solid rgba(46,211,255,.16);
  color:#d4f3ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
}

.mc-products-value{
  padding:0 0 110px;
}

.mc-products-value-grid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:34px;
  align-items:start;
}

.mc-value-intro{
  padding:38px 34px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(129,201,255,.14);
}

.mc-value-intro h2{
  font-size:46px;
  line-height:1.08;
  letter-spacing:-1.6px;
  margin:22px 0 18px;
}

.mc-value-intro p{
  color:rgba(238,248,255,.75);
  font-size:18px;
  line-height:1.75;
}

.mc-value-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.mc-value-card{
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border:1px solid rgba(129,201,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.mc-value-card strong{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(46,211,255,.10);
  border:1px solid rgba(46,211,255,.18);
  color:#8fe8ff;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:18px;
}

.mc-value-card h3{
  font-size:22px;
  line-height:1.2;
  margin-bottom:12px;
}

.mc-value-card p{
  color:rgba(238,248,255,.74);
  font-size:15px;
  line-height:1.65;
  margin:0;
}

@media (max-width: 1180px){
  .mc-products-hero-grid,
  .mc-products-value-grid{
    grid-template-columns:1fr;
  }

  .mc-products-copy h1{
    max-width:none;
  }

  .mc-value-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 980px){
  .mc-products-hero{
    padding:88px 0 64px;
  }

  .mc-products-hero-grid{
    gap:34px;
  }

  .mc-products-copy h1{
    font-size:46px;
    letter-spacing:-2px;
    margin:18px 0 18px;
  }

  .mc-products-lead{
    font-size:17px;
    line-height:1.65;
  }

  .mc-products-points{
    margin:24px 0 26px;
    gap:10px;
  }

  .mc-products-points div{
    padding:13px 14px;
    border-radius:16px;
  }

  .mc-products-points strong{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .mc-products-visual img{
    min-height:unset;
    height:360px;
    border-radius:24px;
  }

  .mc-products-panel{
    left:16px;
    right:16px;
    bottom:16px;
    padding:16px 16px 17px;
    border-radius:18px;
  }

  .mc-products-panel ul{
    grid-template-columns:1fr;
    gap:8px;
  }

  .mc-product-grid,
  .mc-value-cards{
    grid-template-columns:1fr;
  }

  .mc-product-card{
    border-radius:22px;
  }

  .mc-product-media img{
    height:220px;
  }

  .mc-product-body{
    padding:22px 20px 24px;
  }

  .mc-product-top h3{
    font-size:24px;
  }

  .mc-product-body p{
    font-size:15.5px;
    line-height:1.64;
  }

  .mc-product-list li,
  .mc-value-card p{
    font-size:14px;
  }

  .mc-products-value{
    padding-bottom:80px;
  }

  .mc-value-intro{
    padding:28px 22px;
    border-radius:22px;
  }

  .mc-value-intro h2{
    font-size:32px;
    line-height:1.15;
  }

  .mc-value-intro p{
    font-size:15.5px;
    line-height:1.65;
  }

  .mc-value-card{
    padding:22px 18px;
    border-radius:20px;
  }
}


/* =========================================================
   FIX ORGANIZACIÓN PRODUCTOS Y SERVICIOS
   Corrige el bloque de catálogo: título demasiado estrecho,
   exceso de aire y organización visual poco profesional.
========================================================= */

/* Quitar la limitación global que partía el título en muchas líneas */
.mc-products-overview .section-heading,
.mc-products-overview .section-heading h2,
.mc-products-overview .section-heading .section-intro{
  max-width:980px !important;
}

/* El bloque de catálogo queda más compacto y mejor situado */
.mc-products-overview{
  padding:48px 0 104px !important;
}

.mc-products-overview .section-heading{
  text-align:left !important;
  margin:0 0 46px !important;
  display:grid !important;
  grid-template-columns:minmax(0,.78fr) minmax(360px,.62fr) !important;
  gap:54px !important;
  align-items:end !important;
}

.mc-products-overview .section-heading span{
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;
}

.mc-products-overview .section-heading h2{
  margin:0 !important;
  font-size:58px !important;
  line-height:1.02 !important;
  letter-spacing:-2.4px !important;
  max-width:720px !important;
}

.mc-products-overview .section-heading .section-intro{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.75 !important;
  color:rgba(226,242,252,.72) !important;
  max-width:520px !important;
}

/* Tarjetas más arriba, mejor ritmo visual */
.mc-product-grid{
  margin-top:0 !important;
  gap:26px !important;
}

/* En escritorio las tarjetas quedan más compactas y alineadas */
.mc-product-card{
  display:grid !important;
  grid-template-columns:44% 56% !important;
  min-height:330px !important;
}

.mc-product-media{
  height:100% !important;
}

.mc-product-media img{
  height:100% !important;
  min-height:330px !important;
}

.mc-product-body{
  padding:30px 30px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.mc-product-top{
  margin-bottom:14px !important;
}

.mc-product-top h3{
  font-size:28px !important;
}

.mc-product-body p{
  font-size:16px !important;
  line-height:1.62 !important;
  margin-bottom:18px !important;
}

.mc-product-list{
  gap:8px !important;
  margin-bottom:18px !important;
}

.mc-product-list li{
  font-size:14px !important;
}

/* El bloque de valor queda más conectado con el catálogo */
.mc-products-value{
  padding:8px 0 104px !important;
}

@media (max-width:1180px){
  .mc-products-overview .section-heading{
    grid-template-columns:1fr !important;
    gap:18px !important;
    text-align:left !important;
  }

  .mc-products-overview .section-heading h2{
    max-width:780px !important;
  }

  .mc-products-overview .section-heading .section-intro{
    max-width:760px !important;
  }

  .mc-product-card{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }

  .mc-product-media img{
    height:260px !important;
    min-height:260px !important;
  }

  .mc-product-body{
    display:block !important;
  }
}

@media (max-width:980px){
  .mc-products-overview{
    padding:34px 0 76px !important;
  }

  .mc-products-overview .section-heading{
    margin-bottom:30px !important;
    gap:14px !important;
  }

  .mc-products-overview .section-heading h2{
    font-size:36px !important;
    line-height:1.08 !important;
    letter-spacing:-1.4px !important;
  }

  .mc-products-overview .section-heading .section-intro{
    font-size:15.5px !important;
    line-height:1.65 !important;
  }

  .mc-product-grid{
    gap:18px !important;
  }

  .mc-product-media img{
    height:210px !important;
    min-height:210px !important;
  }

  .mc-product-body{
    padding:22px 20px 24px !important;
  }

  .mc-product-top h3{
    font-size:24px !important;
  }
}


/* =========================================================
   AJUSTE TÍTULO PRODUCTOS
   Centrado del título y subtítulo del catálogo
========================================================= */

.mc-products-overview .section-heading{
  text-align:center !important;
  margin:0 0 46px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}

.mc-products-overview .section-heading span{
  grid-column:auto !important;
  margin:0 !important;
}

.mc-products-overview .section-heading h2{
  margin:0 !important;
  max-width:760px !important;
  text-align:center !important;
}

.mc-products-overview .section-heading .section-intro{
  margin:0 !important;
  max-width:760px !important;
  text-align:center !important;
}

@media (max-width:980px){
  .mc-products-overview .section-heading{
    gap:12px !important;
    margin-bottom:28px !important;
  }

  .mc-products-overview .section-heading h2,
  .mc-products-overview .section-heading .section-intro{
    max-width:100% !important;
  }
}


/* =========================================================
   FIX REAL CENTRADO - PRODUCTOS Y SERVICIOS
   Centra el título respecto al bloque completo de tarjetas.
========================================================= */

.mc-products-overview .section-heading{
  width:100% !important;
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.mc-products-overview .section-heading span{
  width:100% !important;
  text-align:center !important;
}

.mc-products-overview .section-heading h2{
  width:100% !important;
  max-width:1120px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:56px !important;
  line-height:1.05 !important;
  letter-spacing:-2px !important;
}

.mc-products-overview .section-heading .section-intro{
  width:100% !important;
  max-width:850px !important;
  margin:0 auto !important;
  text-align:center !important;
}

.mc-product-grid{
  width:100% !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (min-width:1200px){
  .mc-products-overview .section-heading h2{
    white-space:normal !important;
  }
}

@media (max-width:980px){
  .mc-products-overview .section-heading{
    max-width:100% !important;
  }

  .mc-products-overview .section-heading h2{
    max-width:100% !important;
    font-size:36px !important;
    line-height:1.08 !important;
    letter-spacing:-1.3px !important;
  }

  .mc-products-overview .section-heading .section-intro{
    max-width:100% !important;
  }
}


/* =========================================================
   TARIFAS - SOLO TÍTULO Y SUBTÍTULO
   No modifica tarjetas ni imágenes.
========================================================= */

.premium-tarifas .tarifas-heading,
.premium-tarifas .section-heading{
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}

.premium-tarifas .tarifas-heading span,
.premium-tarifas .section-heading span{
  width:100% !important;
  text-align:center !important;
  margin:0 !important;
}

.premium-tarifas .tarifas-heading h2,
.premium-tarifas .section-heading h2{
  width:100% !important;
  max-width:1080px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:56px !important;
  line-height:1.05 !important;
  letter-spacing:-2px !important;
}

.premium-tarifas .tarifas-heading .section-intro,
.premium-tarifas .section-heading .section-intro{
  width:100% !important;
  max-width:850px !important;
  margin:0 auto !important;
  text-align:center !important;
}

@media (max-width:980px){
  .premium-tarifas .tarifas-heading,
  .premium-tarifas .section-heading{
    gap:12px !important;
  }

  .premium-tarifas .tarifas-heading h2,
  .premium-tarifas .section-heading h2{
    font-size:36px !important;
    line-height:1.08 !important;
    letter-spacing:-1.3px !important;
    max-width:100% !important;
  }

  .premium-tarifas .tarifas-heading .section-intro,
  .premium-tarifas .section-heading .section-intro{
    max-width:100% !important;
  }
}


/* =========================================================
   INDEX MARBECOM - SERVICIOS + CONTADORES
   Título centrado y números animados.
========================================================= */

/* Bloque de servicios: título centrado real y sin cortes raros */
.premium-capabilities .section-heading{
  width:100% !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:58px !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}

.premium-capabilities .section-heading span{
  width:100% !important;
  text-align:center !important;
  margin:0 !important;
}

.premium-capabilities .section-heading h2{
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:56px !important;
  line-height:1.06 !important;
  letter-spacing:-2px !important;
}

.premium-capabilities .section-heading .section-intro{
  width:100% !important;
  max-width:850px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:18px !important;
  line-height:1.72 !important;
}

/* Contadores: mismo aspecto limpio, con animación sin saltos */
.stats-band .stat-item h3,
.stats-band .counter-number,
.stats-band .counter-text{
  font-variant-numeric:tabular-nums;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stats-band .counter-number.is-counted{
  text-shadow:0 0 18px rgba(46,211,255,.18);
}

@media (max-width:980px){
  .premium-capabilities .section-heading{
    max-width:100% !important;
    margin-bottom:34px !important;
    gap:12px !important;
  }

  .premium-capabilities .section-heading h2{
    max-width:100% !important;
    font-size:36px !important;
    line-height:1.08 !important;
    letter-spacing:-1.3px !important;
  }

  .premium-capabilities .section-heading .section-intro{
    max-width:100% !important;
    font-size:15.5px !important;
    line-height:1.65 !important;
  }

  .stats-band .stat-item h3,
  .stats-band .counter-number,
  .stats-band .counter-text{
    min-height:46px;
  }
}


/* =========================================================
   AJUSTES FINALES CHATGPT - CTA + RESPONSIVE MARBECOM
   Fecha: 2026-06-18
========================================================= */

:root{
  --mc-cta-dark:#071722;
  --mc-cta-petrol:#0e3a50;
  --mc-cta-cyan:#28c7df;
  --mc-cta-cyan-soft:#8fe8ff;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

body.dark-telecom{
  min-height:100svh;
  background-color:#081421;
}

body.dark-telecom .container{
  width:min(100% - 48px, 1180px);
  max-width:1180px;
}

/* Botones inferiores de llamada a la acción: sin verde chillón */
body.dark-telecom .cta-premium{
  background:
    radial-gradient(circle at 18% 0%, rgba(40,199,223,.22), transparent 36%),
    radial-gradient(circle at 85% 90%, rgba(34,128,164,.18), transparent 42%),
    linear-gradient(135deg, #071722 0%, #0d263b 48%, #0e3a50 100%) !important;
  border:1px solid rgba(143,232,255,.16) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.40),
    0 0 120px rgba(40,199,223,.08) !important;
}

body.dark-telecom .cta-premium .btn-white,
body.dark-telecom .cta-premium a.btn-white{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:54px;
  padding:15px 32px !important;
  border-radius:15px !important;
  color:#f7feff !important;
  background:
    linear-gradient(135deg, #0b3448 0%, #11657b 52%, #28c7df 100%) !important;
  border:1px solid rgba(143,232,255,.34) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 28px rgba(40,199,223,.14) !important;
  text-decoration:none !important;
  font-weight:800 !important;
  letter-spacing:.1px;
}

body.dark-telecom .cta-premium .btn-white:hover,
body.dark-telecom .cta-premium a.btn-white:hover{
  transform:translateY(-3px) !important;
  background:
    linear-gradient(135deg, #123f56 0%, #16728a 48%, #5bdff0 100%) !important;
  border-color:rgba(143,232,255,.55) !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.32),
    0 0 34px rgba(40,199,223,.22) !important;
}

body.dark-telecom .cta-premium .btn-white:active,
body.dark-telecom .cta-premium a.btn-white:active{
  transform:translateY(-1px) !important;
}

body.dark-telecom .hero-buttons,
body.dark-telecom .cta-actions{
  flex-wrap:wrap;
}

body.dark-telecom .hero-visual img,
body.dark-telecom .connectivity-image img,
body.dark-telecom .legal-hero-image img,
body.dark-telecom .tarifas-image img,
body.dark-telecom .mc-products-visual img,
body.dark-telecom .location-image img,
body.dark-telecom .about-image img{
  max-width:100%;
  height:auto;
}

@media (min-width:981px) and (max-width:1400px){
  body.dark-telecom .nav-container{
    width:min(100% - 42px, 1120px) !important;
  }

  body.dark-telecom .menu{
    gap:24px;
  }

  body.dark-telecom .menu a{
    font-size:16px;
  }

  body.dark-telecom .hero-modern,
  body.dark-telecom .connectivity-hero,
  body.dark-telecom .legal-hero,
  body.dark-telecom .tarifas-hero,
  body.dark-telecom .mc-products-hero,
  body.dark-telecom .location-hero{
    padding-top:clamp(64px,7vh,88px) !important;
    padding-bottom:clamp(56px,7vh,78px) !important;
  }

  body.dark-telecom .hero-grid,
  body.dark-telecom .connectivity-grid,
  body.dark-telecom .legal-hero-grid,
  body.dark-telecom .tarifas-grid,
  body.dark-telecom .mc-products-hero-grid,
  body.dark-telecom .location-grid,
  body.dark-telecom .about-grid{
    gap:clamp(36px,4vw,58px) !important;
  }

  body.dark-telecom .hero-content h1,
  body.dark-telecom .connectivity-content h1,
  body.dark-telecom .legal-hero-content h1,
  body.dark-telecom .tarifas-content h1,
  body.dark-telecom .mc-products-copy h1,
  body.dark-telecom .location-content h1{
    font-size:clamp(3.25rem,5vw,4.85rem) !important;
    line-height:.98 !important;
  }
}

@media (min-width:981px) and (max-height:820px){
  body.dark-telecom .hero-modern,
  body.dark-telecom .connectivity-hero,
  body.dark-telecom .legal-hero,
  body.dark-telecom .tarifas-hero,
  body.dark-telecom .mc-products-hero,
  body.dark-telecom .location-hero{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  body.dark-telecom .hero-content h1,
  body.dark-telecom .connectivity-content h1,
  body.dark-telecom .legal-hero-content h1,
  body.dark-telecom .tarifas-content h1,
  body.dark-telecom .mc-products-copy h1,
  body.dark-telecom .location-content h1{
    font-size:clamp(2.85rem,4.4vw,4.25rem) !important;
    margin-bottom:18px !important;
  }

  body.dark-telecom .hero-content p,
  body.dark-telecom .connectivity-content p,
  body.dark-telecom .legal-hero-content p,
  body.dark-telecom .tarifas-content p,
  body.dark-telecom .mc-products-copy p,
  body.dark-telecom .location-content p{
    font-size:1rem !important;
    line-height:1.65 !important;
  }

  body.dark-telecom .hero-visual img,
  body.dark-telecom .connectivity-image img,
  body.dark-telecom .legal-hero-image img,
  body.dark-telecom .tarifas-image img,
  body.dark-telecom .mc-products-visual img,
  body.dark-telecom .location-image img{
    max-height:410px !important;
    object-fit:contain !important;
  }

  body.dark-telecom .cta-premium{
    margin:60px auto !important;
    padding:68px 28px !important;
  }
}

@media (max-width:1200px){
  body.dark-telecom .services-grid,
  body.dark-telecom .productos-grid,
  body.dark-telecom .tarifas-cards-grid,
  body.dark-telecom .conditions-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:980px){
  body.dark-telecom{
    padding-top:64px !important;
  }

  body.dark-telecom .container{
    width:min(100% - 34px, 760px);
  }

  body.dark-telecom .header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }

  body.dark-telecom .nav-container{
    height:64px !important;
    width:min(100% - 28px, 760px) !important;
  }

  body.dark-telecom .logo-left img{
    max-height:36px !important;
    width:auto !important;
  }

  body.dark-telecom .logo-right{
    display:none !important;
  }

  body.dark-telecom .hero-modern,
  body.dark-telecom .connectivity-hero,
  body.dark-telecom .legal-hero,
  body.dark-telecom .tarifas-hero,
  body.dark-telecom .mc-products-hero,
  body.dark-telecom .location-hero{
    padding:48px 0 54px !important;
  }

  body.dark-telecom .hero-grid,
  body.dark-telecom .connectivity-grid,
  body.dark-telecom .legal-hero-grid,
  body.dark-telecom .tarifas-grid,
  body.dark-telecom .mc-products-hero-grid,
  body.dark-telecom .location-grid,
  body.dark-telecom .about-grid,
  body.dark-telecom .contact-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  body.dark-telecom .hero-content,
  body.dark-telecom .connectivity-content,
  body.dark-telecom .legal-hero-content,
  body.dark-telecom .tarifas-content,
  body.dark-telecom .mc-products-copy,
  body.dark-telecom .location-content,
  body.dark-telecom .about-text{
    max-width:760px !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.dark-telecom .hero-buttons,
  body.dark-telecom .cta-actions{
    justify-content:center !important;
  }

  body.dark-telecom .hero-visual,
  body.dark-telecom .connectivity-image,
  body.dark-telecom .legal-hero-image,
  body.dark-telecom .tarifas-image,
  body.dark-telecom .mc-products-visual,
  body.dark-telecom .location-image,
  body.dark-telecom .about-image{
    max-width:620px !important;
    margin:0 auto !important;
  }

  body.dark-telecom .hero-visual img,
  body.dark-telecom .connectivity-image img,
  body.dark-telecom .legal-hero-image img,
  body.dark-telecom .tarifas-image img,
  body.dark-telecom .mc-products-visual img,
  body.dark-telecom .location-image img,
  body.dark-telecom .about-image img{
    max-height:360px !important;
    object-fit:contain !important;
  }

  body.dark-telecom .stats-grid,
  body.dark-telecom .services-grid,
  body.dark-telecom .productos-grid,
  body.dark-telecom .tarifas-cards-grid,
  body.dark-telecom .conditions-grid,
  body.dark-telecom .connectivity-cards,
  body.dark-telecom .conectividad-grid,
  body.dark-telecom .ubicacion-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }
}

@media (max-width:768px){
  body.dark-telecom .hero-content h1,
  body.dark-telecom .connectivity-content h1,
  body.dark-telecom .legal-hero-content h1,
  body.dark-telecom .tarifas-content h1,
  body.dark-telecom .mc-products-copy h1,
  body.dark-telecom .location-content h1,
  body.dark-telecom .contact-card h1{
    font-size:clamp(2.1rem, 10vw, 3.2rem) !important;
    line-height:1.04 !important;
    letter-spacing:-1.6px !important;
  }

  body.dark-telecom .hero-content p,
  body.dark-telecom .connectivity-content p,
  body.dark-telecom .legal-hero-content p,
  body.dark-telecom .tarifas-content p,
  body.dark-telecom .mc-products-copy p,
  body.dark-telecom .location-content p{
    font-size:1rem !important;
    line-height:1.65 !important;
  }

  body.dark-telecom .hero-buttons,
  body.dark-telecom .cta-actions{
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  body.dark-telecom .btn-primary,
  body.dark-telecom .btn-secondary,
  body.dark-telecom .btn-white,
  body.dark-telecom .btn-submit{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }

  body.dark-telecom .stats-grid,
  body.dark-telecom .services-grid,
  body.dark-telecom .productos-grid,
  body.dark-telecom .tarifas-cards-grid,
  body.dark-telecom .conditions-grid,
  body.dark-telecom .connectivity-cards,
  body.dark-telecom .conectividad-grid,
  body.dark-telecom .ubicacion-grid{
    grid-template-columns:1fr !important;
  }

  body.dark-telecom .cta-premium{
    width:min(100% - 28px, 720px) !important;
    margin:52px auto !important;
    padding:46px 20px !important;
    border-radius:28px !important;
  }

  body.dark-telecom .cta-premium h2{
    font-size:clamp(1.8rem,8vw,2.5rem) !important;
  }
}

@media (max-width:480px){
  body.dark-telecom .container{
    width:calc(100% - 28px) !important;
  }

  body.dark-telecom .nav-container{
    width:calc(100% - 24px) !important;
  }

  body.dark-telecom .logo-left img{
    max-height:32px !important;
  }

  body.dark-telecom .header .menu{
    left:12px !important;
    right:12px !important;
  }

  body.dark-telecom .hero-modern,
  body.dark-telecom .connectivity-hero,
  body.dark-telecom .legal-hero,
  body.dark-telecom .tarifas-hero,
  body.dark-telecom .mc-products-hero,
  body.dark-telecom .location-hero{
    padding-top:38px !important;
  }

  body.dark-telecom .hero-visual img,
  body.dark-telecom .connectivity-image img,
  body.dark-telecom .legal-hero-image img,
  body.dark-telecom .tarifas-image img,
  body.dark-telecom .mc-products-visual img,
  body.dark-telecom .location-image img,
  body.dark-telecom .about-image img{
    max-height:280px !important;
  }
}


/* =========================================================
   MENÚ MÓVIL MARBECOM - VERSIÓN FINAL CORREGIDA
   Igual a la hamburguesa de MARBE Comunicaciones, adaptada
   a los tonos azul/cian de MarbeCom.
========================================================= */

html body.dark-telecom nav#menu-principal > .site-switch-mobile{
  display:none !important;
}

@media (max-width:980px){
  html body.dark-telecom.mobile-menu-open{
    overflow:hidden !important;
  }

  html body.dark-telecom .header.marbecom-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:68px !important;
    min-height:68px !important;
    z-index:9999 !important;
    background:rgba(3,10,17,.96) !important;
    border-bottom:1px solid rgba(46,211,255,.14) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.36) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }

  html body.dark-telecom{
    padding-top:68px !important;
  }

  html body.dark-telecom .marbecom-header-inner{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    height:68px !important;
    min-height:68px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-left{
    display:flex !important;
    align-items:center !important;
    flex:0 1 auto !important;
    min-width:0 !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-left img{
    height:40px !important;
    max-height:40px !important;
    width:auto !important;
    display:block !important;
    object-fit:contain !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-dropdown{
    display:none !important;
  }

  html body.dark-telecom .marbecom-header-inner .mobile-menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    margin-left:auto !important;
    padding:0 !important;
    border-radius:15px !important;
    border:1px solid rgba(46,211,255,.32) !important;
    background:rgba(5,15,24,.80) !important;
    color:#2ed3ff !important;
    box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 24px rgba(46,211,255,.08) !important;
    cursor:pointer !important;
    transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
  }

  html body.dark-telecom .marbecom-header-inner .mobile-menu-toggle:hover,
  html body.dark-telecom .marbecom-header-inner .mobile-menu-toggle:focus-visible{
    background:rgba(46,211,255,.10) !important;
    border-color:rgba(46,211,255,.58) !important;
    outline:none !important;
  }

  html body.dark-telecom .marbecom-header-inner .mobile-menu-toggle:active{
    transform:scale(.97) !important;
  }

  html body.dark-telecom .marbecom-header-inner .mobile-menu-line{
    display:block !important;
    width:21px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#2ed3ff !important;
    box-shadow:0 0 12px rgba(46,211,255,.34) !important;
    transition:transform .28s ease, opacity .28s ease !important;
  }

  html body.dark-telecom .header.nav-open .mobile-menu-line:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  html body.dark-telecom .header.nav-open .mobile-menu-line:nth-child(2){
    opacity:0 !important;
  }

  html body.dark-telecom .header.nav-open .mobile-menu-line:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal{
    position:fixed !important;
    top:78px !important;
    left:16px !important;
    right:16px !important;
    width:calc(100vw - 32px) !important;
    max-width:none !important;
    height:auto !important;
    max-height:calc(100svh - 96px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    margin:0 !important;
    padding:12px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    border-radius:22px !important;
    border:1px solid rgba(46,211,255,.20) !important;
    background:
      radial-gradient(circle at 88% 0%, rgba(46,211,255,.14), transparent 36%),
      linear-gradient(180deg, rgba(5,18,27,.98), rgba(3,10,16,.98)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.58), 0 0 45px rgba(46,211,255,.07) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) scale(.985) !important;
    transition:opacity .24s ease, visibility .24s ease, transform .24s ease !important;
  }

  html body.dark-telecom .header.nav-open .marbecom-header-inner nav#menu-principal{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown::after{
    display:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a{
    width:100% !important;
    min-height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin:0 !important;
    padding:15px 16px !important;
    border-radius:15px !important;
    color:#e9fbff !important;
    font-size:1rem !important;
    line-height:1.25 !important;
    font-weight:750 !important;
    letter-spacing:0 !important;
    text-decoration:none !important;
    background:rgba(255,255,255,.035) !important;
    border:1px solid rgba(255,255,255,.055) !important;
    box-shadow:none !important;
    transform:none !important;
    white-space:normal !important;
    transition:background .24s ease, border-color .24s ease, color .24s ease !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a::before,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a::before,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a::before{
    content:"" !important;
    display:block !important;
    width:8px !important;
    height:8px !important;
    flex:0 0 8px !important;
    margin:0 2px 0 0 !important;
    border-radius:999px !important;
    background:#2ed3ff !important;
    box-shadow:0 0 16px rgba(46,211,255,.38) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a::after,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a::after,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a::after{
    content:"›" !important;
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin-left:auto !important;
    color:#2ed3ff !important;
    background:none !important;
    font-size:1.16rem !important;
    line-height:1 !important;
    box-shadow:none !important;
    opacity:1 !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a:hover,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a:focus-visible,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > a.active,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a:hover,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a:focus-visible,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .dropdown > a.active,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a:hover,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a:focus-visible,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a.active{
    color:#ffffff !important;
    background:rgba(46,211,255,.08) !important;
    border-color:rgba(46,211,255,.26) !important;
    outline:none !important;
    transform:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile{
    display:flex !important;
    width:100% !important;
    min-height:56px !important;
    margin:0 !important;
    padding:15px 16px !important;
    color:rgba(235,248,252,.92) !important;
    background:rgba(2,8,14,.78) !important;
    border:1px solid rgba(255,255,255,.035) !important;
    box-shadow:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile::before{
    background:rgba(0,22,32,.80) !important;
    box-shadow:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile::after{
    content:"›" !important;
    color:rgba(46,211,255,.34) !important;
    opacity:1 !important;
    box-shadow:none !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:hover,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:focus-visible{
    color:#ffffff !important;
    background:rgba(5,18,27,.88) !important;
    border-color:rgba(46,211,255,.15) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:hover::before,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:focus-visible::before{
    background:rgba(46,211,255,.22) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:hover::after,
  html body.dark-telecom .marbecom-header-inner nav#menu-principal > .site-switch-mobile:focus-visible::after{
    color:rgba(46,211,255,.55) !important;
  }
}

@media (max-width:480px){
  html body.dark-telecom .marbecom-header-inner{
    width:calc(100% - 30px) !important;
  }

  html body.dark-telecom .marbecom-header-inner .logo-left img{
    height:36px !important;
    max-height:36px !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal{
    top:78px !important;
    left:16px !important;
    right:16px !important;
    width:calc(100vw - 32px) !important;
    padding:12px !important;
  }
}

/* =========================================================
   FIX FINAL - HEADER SIEMPRE VISIBLE MARBECOM
   Mantiene el menú superior fijo al hacer scroll, sin tapar contenido.
========================================================= */
html body.dark-telecom{
  padding-top:82px !important;
  scroll-padding-top:98px !important;
}

html body.dark-telecom .header.marbecom-header,
html body.dark-telecom header.header.marbecom-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
}

html body.dark-telecom .header.marbecom-header.scrolled,
html body.dark-telecom header.header.marbecom-header.scrolled{
  background:rgba(8,20,33,.94) !important;
  border-bottom-color:rgba(46,211,255,.18) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.36) !important;
  backdrop-filter:blur(22px) !important;
  -webkit-backdrop-filter:blur(22px) !important;
}

@media (max-width:980px){
  html body.dark-telecom{
    padding-top:68px !important;
    scroll-padding-top:84px !important;
  }
}


/* =========================================================
   AJUSTE FINAL: enlace de cambio de web SOLO EN TELÉFONO
   Evita que "Ir a MarbeComunicaciones" aparezca en tablet
   o en escritorio. Se mantiene únicamente dentro de la
   hamburguesa móvil de teléfonos.
========================================================= */
@media (min-width:768px){
  html body.dark-telecom nav#menu-principal > .site-switch-mobile{
    display:none !important;
  }
}

@media (max-width:767px){
  html body.dark-telecom .header.nav-open .marbecom-header-inner nav#menu-principal > .site-switch-mobile{
    display:flex !important;
  }
}

/* =========================================================
   CORRECCIÓN DEFINITIVA - CAMBIO A MARBECOMUNICACIONES SOLO MÓVIL
   El enlace existe en el HTML para la hamburguesa, pero queda oculto
   siempre en escritorio/tablet. Solo aparece al abrir el menú en teléfono.
========================================================= */
html body.dark-telecom .header.marbecom-header .marbecom-header-inner nav#menu-principal > a.site-switch-mobile,
html body.dark-telecom header.header.marbecom-header .marbecom-header-inner nav#menu-principal > a.site-switch-mobile{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:767px){
  html body.dark-telecom .header.marbecom-header.nav-open .marbecom-header-inner nav#menu-principal > a.site-switch-mobile,
  html body.dark-telecom header.header.marbecom-header.nav-open .marbecom-header-inner nav#menu-principal > a.site-switch-mobile{
    display:flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}


/* =========================================================
   CORRECCIÓN FINAL - ACTIVO REAL EN SUBMENÚ MARBECOM
   En móvil, Productos y Tarifas se marcan ellos mismos y no
   Conectividad cuando se está dentro de esas páginas.
========================================================= */
@media (max-width: 767px){
  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a.active{
    color:#ffffff !important;
    background:rgba(46,211,255,.10) !important;
    border-color:rgba(46,211,255,.34) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a.active::before{
    background:#2ed3ff !important;
    box-shadow:0 0 16px rgba(46,211,255,.45) !important;
  }

  html body.dark-telecom .marbecom-header-inner nav#menu-principal .dropdown-content a.active::after{
    color:#2ed3ff !important;
    opacity:1 !important;
  }
}


/* =========================================================
   AJUSTE FINAL - HERO INDEX EN PORTÁTIL
   Evita que la imagen principal del index quede demasiado alta
   y con espacios visuales arriba/abajo en 1366x768.
========================================================= */
@media (min-width:981px){
  body.dark-telecom .hero-modern .hero-visual img{
    width:100% !important;
    height:clamp(330px,26vw,430px) !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }

  body.dark-telecom .hero-modern .hero-visual::after{
    bottom:18px !important;
  }
}


/* =========================================================
   AJUSTE FINAL - PRODUCTOS HERO EN PORTÁTIL
   Evita franjas vacías arriba y abajo en la imagen del hero
   de productos.html cuando se ve en portátil.
========================================================= */
@media (min-width:981px) and (max-width:1440px) and (max-height:900px){
  body.dark-telecom .mc-products-visual{
    display:flex !important;
    align-items:stretch !important;
  }

  body.dark-telecom .mc-products-visual img{
    width:100% !important;
    height:clamp(500px,62vh,620px) !important;
    min-height:clamp(500px,62vh,620px) !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }
}


/* =========================================================
   FIX DEFINITIVO - PRODUCTOS HERO EN PORTÁTIL
   Recorta visualmente la imagen para quitar zonas sobrantes
   superiores/inferiores sin afectar al escritorio alto.
========================================================= */
@media (min-width:981px) and (max-height:920px){
  body.dark-telecom .mc-products-visual{
    border-radius:34px !important;
    overflow:hidden !important;
    background:rgba(10,29,47,.72) !important;
  }

  body.dark-telecom .mc-products-visual img{
    width:100% !important;
    height:clamp(520px,64vh,640px) !important;
    min-height:clamp(520px,64vh,640px) !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center 68% !important;
    display:block !important;
    transform:scale(1.18) !important;
    transform-origin:center center !important;
    border-radius:34px !important;
  }

  body.dark-telecom .mc-products-panel{
    z-index:2 !important;
  }
}


/* =========================================================
   FIX FINAL MÓVIL - DÓNDE ESTAMOS MARBECOM
   Centra la sección y evita desbordes laterales en móvil.
========================================================= */
@media (max-width: 980px){
  body.dark-telecom{
    overflow-x:hidden !important;
  }

  body.dark-telecom .location-hero{
    overflow:hidden !important;
  }

  body.dark-telecom .location-hero .container,
  body.dark-telecom .location-grid{
    width:calc(100% - 28px) !important;
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body.dark-telecom .location-content,
  body.dark-telecom .location-info-grid,
  body.dark-telecom .location-map{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  body.dark-telecom .location-info-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    align-items:center !important;
  }

  body.dark-telecom .location-info-card > div{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  body.dark-telecom .location-info-card p{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  body.dark-telecom .location-map iframe{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
  }
}

@media (max-width: 480px){
  body.dark-telecom .location-hero .container,
  body.dark-telecom .location-grid{
    width:calc(100% - 24px) !important;
  }

  body.dark-telecom .location-info-card{
    padding:18px 16px !important;
    gap:14px !important;
  }

  body.dark-telecom .location-info-card .info-icon{
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
  }
}