/* =========================================================
   SQNET Soluciones — main.css
   ========================================================= */

:root{
	--navy: #0a1128;
	--navy-2: #0f1a3d;
	--navy-3: #131f4d;
	--blue: #2563eb;
	--blue-light: #3b82f6;
	--text: #1f2937;
	--muted: #6b7280;
	--bg-light: #f6f8fb;
	--border: #e6e9f0;
	--radius: 14px;
	--container: 1180px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	color:var(--text);
	background:#fff;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.2; font-weight:800; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:800px; }
.center{ text-align:center; }
.light{ color:#fff; }

.eyebrow{
	color:var(--blue);
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:.8rem;
	margin-bottom:.6rem;
}
.eyebrow.light{ color:var(--blue-light); }

section.section{ padding:80px 0; }
.section-tight{ padding:64px 0; }
.section-light{ background:#fff; }
.section-light:nth-of-type(even){ background:var(--bg-light); }
.section-dark{ background:var(--navy); }
.section-dark h2, .section-dark p{ color:#fff; }

.section h2{ font-size:2rem; max-width:640px; margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:.5rem;
	padding:.85rem 1.5rem;
	border-radius:10px;
	font-weight:600;
	font-size:.95rem;
	border:1.5px solid transparent;
	cursor:pointer;
	transition:.2s ease;
	white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-light); }
.btn-outline-light{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.08); }
.btn-outline{ border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ background:#e9edf6; }

/* ---------- Header ---------- */
.site-header{
	position:sticky; top:0; z-index:50;
	background:#fff;
	border-bottom:1px solid var(--border);
}
.header-inner{
	display:flex; align-items:center; justify-content:space-between;
	height:76px;
}
.logo-text{
	font-weight:800; font-size:1.3rem; color:var(--navy);
	display:flex; align-items:baseline; gap:.15rem;
}
.logo-text.light{ color:#fff; }
.logo-accent{ color:var(--blue); }
.logo-text small{
	font-weight:600; font-size:.55rem; letter-spacing:.12em;
	color:var(--muted); margin-left:.4rem; align-self:center;
}
.nav-menu{ display:flex; gap:2rem; align-items:center; }
.nav-menu a{ font-weight:500; font-size:.95rem; color:var(--text); }
.nav-menu a:hover{ color:var(--blue); }
.nav-menu li{ position:relative; }
.nav-menu ul{ /* submenu */
	display:none; position:absolute; top:100%; left:0;
	background:#fff; border:1px solid var(--border); border-radius:10px;
	padding:.5rem; min-width:200px; box-shadow:0 12px 24px rgba(10,17,40,.08);
}
.nav-menu li:hover > ul{ display:block; }
.nav-menu ul a{ display:block; padding:.5rem .75rem; border-radius:6px; }
.nav-menu ul a:hover{ background:var(--bg-light); }

.header-cta{ padding:.6rem 1.1rem; background:var(--blue); color:#fff; border-radius:8px; font-size:.85rem; }
.header-cta:hover{ background:var(--blue-light); }
.header-cta svg{ width:16px; height:16px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--navy); }

/* ---------- Hero ---------- */
.hero{
	position:relative;
	min-height:560px;
	display:flex; align-items:center;
	background: linear-gradient(120deg, rgba(8,13,32,.94), rgba(8,13,32,.55)),
		url('../img/hero-datacenter.jpg') center/cover no-repeat;
	background-color: var(--navy);
	color:#fff;
	overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; padding:80px 24px; }
.hero-text{ max-width:640px; }
.hero-text h1{ font-size:2.6rem; color:#fff; }
.hero-text .accent{ color:var(--blue-light); }
.hero-text p{ color:#cbd3e6; font-size:1.05rem; max-width:520px; margin-bottom:2rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:1.75rem; margin-top:3rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-projects{ grid-template-columns:repeat(5,1fr); }

.card{
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:1.75rem;
	transition:.2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(10,17,40,.08); }
.card h3{ font-size:1.05rem; }
.card p{ color:var(--muted); font-size:.92rem; margin:0; }

.card-icon{
	width:52px; height:52px; border-radius:12px;
	background:linear-gradient(135deg, var(--blue), var(--navy-3));
	color:#fff; display:flex; align-items:center; justify-content:center;
	margin-bottom:1rem;
}
.card-icon svg{ width:26px; height:26px; }

/* Proyectos */
.project-card{ padding:0; overflow:hidden; }
.project-card h3, .project-card p{ padding:0 1.25rem; }
.project-card h3{ margin-top:1rem; font-size:1rem; }
.project-card p{ padding-bottom:1.25rem; }
.project-thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-light); }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#dbe3f4,#eef1f8); }

/* ---------- Metodología ---------- */
.steps{
	display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
	margin-top:3rem; position:relative;
}
.steps::before{
	content:""; position:absolute; top:24px; left:12.5%; right:12.5%;
	height:2px; background:rgba(255,255,255,.15); z-index:0;
}
.step{ position:relative; z-index:1; text-align:center; }
.step-number{
	width:48px; height:48px; border-radius:50%;
	background:var(--blue); color:#fff; font-weight:700;
	display:flex; align-items:center; justify-content:center;
	margin:0 auto 1.1rem;
}
.step-icon{ color:var(--blue-light); margin-bottom:.6rem; }
.step-icon svg{ width:26px; height:26px; margin:0 auto; }
.step h3{ color:#fff; font-size:1rem; }
.step p{ color:#aab2c8; font-size:.88rem; }

/* ---------- Por qué elegirnos ---------- */
.why-grid{ text-align:center; }
.why-item{ padding:0 .5rem; }
.why-icon{ color:var(--blue-light); margin-bottom:.8rem; }
.why-icon svg{ width:34px; height:34px; margin:0 auto; }
.why-item h4{ color:#fff; font-size:1rem; }
.why-item p{ color:#aab2c8; font-size:.88rem; }
.why-grid > .why-item + .why-item{ border-left:1px solid rgba(255,255,255,.1); }

/* ---------- CTA banner ---------- */
.cta-banner{ background:linear-gradient(120deg, var(--navy-2), var(--blue)); padding:60px 0; }
.cta-inner{
	display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-inner h2{ color:#fff; font-size:1.7rem; }
.cta-inner p{ color:#dbe3f4; margin:0; }
.cta-actions{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.cta-phone{ color:#fff; font-weight:700; display:flex; align-items:center; gap:.4rem; }
.cta-phone svg{ width:18px; height:18px; }
.cta-note{ color:#bfe3c9; font-size:.85rem; width:100%; text-align:right; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); padding-top:60px; }
.footer-grid{
	display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;
	padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand p{ color:#9aa4c0; font-size:.9rem; max-width:260px; }
.social-links{ display:flex; gap:.7rem; margin-top:1rem; }
.social-links a{
	width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.06);
	display:flex; align-items:center; justify-content:center; color:#fff;
}
.social-links a svg{ width:16px; height:16px; }
.social-links a:hover{ background:var(--blue); }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:1rem; }
.footer-menu li{ margin-bottom:.6rem; }
.footer-menu a{ color:#9aa4c0; font-size:.9rem; }
.footer-menu a:hover{ color:#fff; }
.footer-contact li{ display:flex; align-items:center; gap:.5rem; color:#9aa4c0; font-size:.9rem; margin-bottom:.7rem; }
.footer-contact svg{ width:16px; height:16px; color:var(--blue-light); flex-shrink:0; }
.footer-bottom{ padding:22px 0; }
.footer-bottom-inner{ color:#7b84a3; font-size:.82rem; text-align:center; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
	position:fixed; right:22px; bottom:22px; z-index:60;
	width:56px; height:56px; border-radius:50%;
	background:#25d366; color:#fff;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.whatsapp-float svg{ width:28px; height:28px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
	.grid-3, .grid-4, .grid-projects{ grid-template-columns:repeat(2,1fr); }
	.steps{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
	.steps::before{ display:none; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
	.nav-toggle{ display:flex; }
	.main-nav{
		display:none; position:absolute; top:76px; left:0; right:0;
		background:#fff; border-bottom:1px solid var(--border);
		padding:1rem 24px;
	}
	.main-nav.open{ display:block; }
	.nav-menu{ flex-direction:column; align-items:flex-start; gap:1rem; }
	.nav-menu ul{ position:static; box-shadow:none; border:0; padding-left:1rem; }
	.header-cta{ display:none; }

	.hero-text h1{ font-size:2rem; }
	.grid-3, .grid-4, .grid-projects{ grid-template-columns:1fr; }
	.why-grid > .why-item + .why-item{ border-left:0; border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; }
	.footer-grid{ grid-template-columns:1fr; }
	.cta-inner{ flex-direction:column; align-items:flex-start; }
	.cta-note{ text-align:left; }
}