/* ==========================================================================
   Digital Soluciones — hoja de estilos
   Rediseño sobre la base "Solid State" (HTML5 UP), manteniendo el HTML.
   ========================================================================== */

@import 'fontawesome-all.min.css';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
	--bg:            #f6f8fb;
	--surface:       #ffffff;
	--surface-alt:   #eef2f8;
	--text:          #23324a;
	--text-muted:    #64748b;
	--text-soft:     #94a3b8;
	--border:        #e2e8f0;

	--navy-900:      #0b1730;
	--navy-800:      #102244;
	--navy-700:      #16305c;

	--primary:       #2563eb;
	--primary-dark:  #1d4ed8;
	--primary-light: #eaf1ff;
	--accent:        #14b8a6;
	--accent-dark:   #0d9488;

	--radius-sm:     8px;
	--radius:        14px;
	--radius-lg:     22px;

	--shadow-sm:     0 1px 3px rgba(15, 30, 60, .06);
	--shadow:        0 10px 30px -12px rgba(15, 30, 60, .18);
	--shadow-lg:     0 25px 50px -20px rgba(15, 30, 60, .35);

	--font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-heading:  'Poppins', 'Inter', sans-serif;

	--inner:         62em;
}

/* ---------- reset & base ---------- */
*, *:before, *:after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:none; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, form, label, header, footer, nav, section, article{
	margin:0; padding:0; border:0; font:inherit; vertical-align:baseline;
}

article, aside, figure, figcaption, footer, header, nav, section{ display:block; }

body{ line-height:1; -ms-overflow-style:scrollbar; }
ol, ul{ list-style:none; }

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after{
	transition:none !important;
	animation:none !important;
}

body{
	background-color:var(--bg);
	color:var(--text);
	font-family:var(--font);
	font-size:16.5px;
	font-weight:400;
	line-height:1.7;
}

@media screen and (max-width:1680px){ body{ font-size:15.5px; } }
@media screen and (max-width:980px){ body{ font-size:15px; } }
@media screen and (max-width:480px){ body{ font-size:14.5px; } }

a{
	color:var(--primary);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:color .2s ease, border-color .2s ease;
}
a:hover{ color:var(--primary-dark); border-bottom-color:rgba(37,99,235,.35); }

strong, b{ font-weight:600; color:var(--navy-900); }
em, i{ font-style:italic; }

p{ margin:0 0 1.6em 0; color:var(--text-muted); }

h1, h2, h3, h4, h5, h6{
	font-family:var(--font-heading);
	font-weight:600;
	color:var(--navy-900);
	line-height:1.3;
	margin:0 0 .6em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ color:inherit; border-bottom:0; }

h3.major, h2.major, h1.major{
	position:relative;
	padding-bottom:.6em;
	margin-bottom:1em;
}
h3.major:after, h2.major:after, h1.major:after{
	content:'';
	position:absolute;
	left:0; bottom:0;
	width:48px; height:3px;
	background:var(--primary);
	border-radius:3px;
}

/* ---------- layout helpers ---------- */
#page-wrapper{ overflow-x:hidden; }

.inner{ margin:0 auto; width:100%; max-width:var(--inner); }

/* ==========================================================================
   Header
   ========================================================================== */
#header{
	position:fixed;
	top:0; left:0; width:100%;
	height:4.2em;
	line-height:4.2em;
	padding:0 2em;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(10px);
	box-shadow:0 1px 0 rgba(15,30,60,.06);
	z-index:10000;
	transition:box-shadow .2s ease;
}

#header h1{
	margin:0;
	font-size:1.15em;
	letter-spacing:-.01em;
}
#header h1 a{
	color:var(--navy-900);
	font-weight:700;
	border-bottom:0;
}
#header h1 a:before{
	content:'';
	display:inline-block;
	width:.55em; height:.55em;
	margin-right:.55em;
	border-radius:4px;
	background:linear-gradient(135deg, var(--primary), var(--accent));
	vertical-align:middle;
}

#header nav{
	position:absolute;
	top:0; right:1.4em;
	height:inherit;
	line-height:inherit;
}
#header nav a{
	border:0;
	display:inline-block;
	padding:0 1em;
	font-family:var(--font-heading);
	font-size:.82em;
	font-weight:600;
	color:var(--navy-900);
}
#header nav a[href="#menu"]{
	background:var(--primary);
	color:#fff !important;
	border-radius:999px;
	padding:0 1.5em;
	height:2.5em;
	line-height:2.5em;
	margin-top:calc((4.2em - 2.5em) / 2);
	display:inline-block;
	transition:background-color .2s ease, transform .2s ease;
}
#header nav a[href="#menu"]:hover{ background:var(--primary-dark); transform:translateY(-1px); }
#header nav a[href="#menu"]:before{
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	content:"\f0c9";
	margin-right:.6em;
}

@media screen and (max-width:736px){
	#header{ height:3.4em; line-height:3.4em; padding:0 1.25em; }
	#header nav{ right:.75em; }
	#header nav a[href="#menu"]{ margin-top:calc((3.4em - 2.5em) / 2); padding:0 1.1em; }
}

/* ==========================================================================
   Menú lateral
   ========================================================================== */
#menu{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	position:fixed;
	top:0; left:0;
	width:100%; height:100%;
	background:rgba(11,23,48,.55);
	backdrop-filter:blur(3px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .35s ease, visibility .35s;
	z-index:10001;
}

#menu .inner{
	position:relative;
	width:22em;
	max-width:88%;
	height:100%;
	margin:0;
	padding:3em 2.2em 2em 2.2em;
	background:var(--surface);
	box-shadow:var(--shadow-lg);
	transform:translateX(1.5em);
	opacity:0;
	transition:opacity .35s ease, transform .35s ease;
	overflow-y:auto;
}

#menu h2{
	font-size:1em;
	color:var(--text-soft);
	text-transform:uppercase;
	letter-spacing:.12em;
	padding-bottom:1em;
	margin-bottom:1em;
	border-bottom:1px solid var(--border);
}

#menu .close{
	position:absolute;
	top:0; right:0;
	width:3.6em; height:3.6em;
	text-indent:4em;
	overflow:hidden;
	background-image:url("images/close.svg");
	background-repeat:no-repeat;
	background-position:center;
	background-size:1.1em 1.1em;
	opacity:.5;
	transition:opacity .2s ease;
}
#menu .close:hover{ opacity:1; }

#menu .links{ margin:0; padding:0; }
#menu .links li a{
	display:block;
	padding:.85em .2em;
	border-bottom:1px solid var(--border);
	font-family:var(--font-heading);
	font-weight:500;
	font-size:1.05em;
	color:var(--navy-900);
	border-radius:0;
}
#menu .links li:last-child a{ border-bottom:0; }
#menu .links li a:hover{ color:var(--primary); border-bottom-color:var(--border); padding-left:.5em; }

body.is-menu-visible #menu{ opacity:1; visibility:visible; pointer-events:auto; }
body.is-menu-visible #menu .inner{ transform:translateX(0); opacity:1; }

/* ==========================================================================
   Hero (cabecera de #wrapper)
   ========================================================================== */
#wrapper > header{
	position:relative;
	padding:11.5em 2em 6em 2em;
	text-align:center;
	background:
		radial-gradient(circle at 15% 20%, rgba(20,184,166,.35), transparent 45%),
		radial-gradient(circle at 85% 0%, rgba(37,99,235,.45), transparent 50%),
		linear-gradient(160deg, var(--navy-900), var(--navy-700));
	overflow:hidden;
}

#wrapper > header .inner{ position:relative; z-index:1; width:100%; max-width:44em; }

#wrapper > header h2{
	color:#ffffff;
	font-size:2.3em;
	font-weight:700;
	letter-spacing:-.01em;
	margin-bottom:.5em;
	padding-bottom:0;
	border-bottom:0;
}
#wrapper > header h2:after{ display:none; }

#wrapper > header p{
	color:rgba(255,255,255,.82);
	font-family:var(--font-heading);
	font-weight:400;
	font-size:1.05em;
	letter-spacing:0;
	line-height:1.7;
	text-transform:none;
	max-width:38em;
	margin:0 auto;
}

@media screen and (max-width:980px){
	#wrapper > header{ padding:9.5em 2em 5em 2em; }
	#wrapper > header h2{ font-size:1.9em; }
}
@media screen and (max-width:736px){
	#wrapper > header{ padding:7.5em 1.5em 3.5em 1.5em; }
	#wrapper > header h2{ font-size:1.55em; }
	#wrapper > header p{ font-size:.95em; }
}

/* ==========================================================================
   Contenido general
   ========================================================================== */
.wrapper{ background:var(--surface); }
.wrapper .inner{ padding:5em 2em 2em 2em; }

.wrapper .inner > h3.major{ font-size:1.5em; }
.wrapper .inner > h3.major:not(:first-child){ margin-top:1.2em; }

.wrapper .inner > p{ font-size:1.02em; max-width:46em; }
.wrapper .inner > p strong{ color:var(--navy-900); }

@media screen and (max-width:736px){
	.wrapper .inner{ padding:3.2em 1.5em 1em 1.5em; }
}

/* ==========================================================================
   Servicios (features)
   ========================================================================== */
.features{
	display:flex;
	flex-wrap:wrap;
	gap:1.75em;
	margin:1em 0 2em 0;
}

.features article{
	position:relative;
	width:calc(50% - .875em);
	overflow:hidden;
	padding:0 0 1.6em 0;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.features article:hover{
	box-shadow:var(--shadow);
	transform:translateY(-4px);
	border-color:rgba(37,99,235,.25);
}

.features article .image{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	margin:0 0 1.4em 0;
	overflow:hidden;
	background:var(--surface-alt);
}
.features article .image img{
	width:100%; height:100%;
	object-fit:cover;
	object-position:center;
	border-radius:0;
	display:block;
	transition:transform .4s ease;
}
.features article:hover .image img{ transform:scale(1.05); }

.features article h3.major,
.features article p,
.features article a.special{
	margin-left:2em;
	margin-right:2em;
}

.features article h3.major{
	font-size:1.08em;
	padding-bottom:0;
	margin-bottom:.5em;
}
.features article h3.major:after{ display:none; }

.features article p{ margin-bottom:1.4em; font-size:.96em; }

.features article a.special{
	display:inline-flex;
	align-items:center;
	font-family:var(--font-heading);
	font-size:.85em;
	font-weight:600;
	color:var(--primary);
	border-bottom:0;
	text-transform:none;
	letter-spacing:0;
	margin:0;
}
.features article a.special:before{
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	content:"\f061";
	margin-right:.55em;
	font-size:.85em;
	transition:transform .2s ease;
}
.features article a.special:hover{ color:var(--primary-dark); }
.features article a.special:hover:before{ transform:translateX(3px); }

@media screen and (max-width:736px){
	.features{ gap:1.25em; }
	.features article{ width:100%; padding:1.6em 1.6em 1.3em 1.6em; }
}

/* ==========================================================================
   Footer / contacto
   ========================================================================== */
#footer{
	background:var(--navy-900);
	background:
		radial-gradient(circle at 90% 10%, rgba(37,99,235,.35), transparent 45%),
		linear-gradient(180deg, var(--navy-900), #071023);
}

#footer .inner{
	display:flex;
	flex-wrap:wrap;
	gap:3em;
	padding:6em 2em 3em 2em;
}

#footer h2.major{
	width:100%;
	flex:0 0 100%;
	color:#fff;
	font-size:1.7em;
	padding-bottom:0;
	margin-bottom:.5em;
}
#footer h2.major:after{ background:var(--accent); }

#footer > .inner > p{
	flex:0 0 100%;
	color:rgba(255,255,255,.7);
	max-width:32em;
	width:100%;
	margin-bottom:.5em;
}

#footer form{
	flex:1 1 22em;
	min-width:0;
	margin:0;
}

#footer form > .fields{
	display:flex;
	flex-wrap:wrap;
	gap:1.2em;
	margin:0 0 1.6em 0;
}
#footer form > .fields > .field{ width:100%; }

#footer label{
	display:block;
	margin:0 0 .5em 0;
	font-family:var(--font-heading);
	font-size:.82em;
	font-weight:600;
	color:rgba(255,255,255,.75);
	letter-spacing:.04em;
	text-transform:uppercase;
}

#footer input[type="text"],
#footer input[type="email"],
#footer textarea{
	appearance:none;
	width:100%;
	padding:0 1.1em;
	height:2.9em;
	border-radius:var(--radius-sm);
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.06);
	color:#fff;
	font-family:inherit;
	font-size:1em;
	outline:0;
	transition:border-color .2s ease, background-color .2s ease;
}
#footer textarea{
	height:auto;
	padding:.9em 1.1em;
	resize:vertical;
}
#footer input::placeholder,
#footer textarea::placeholder{ color:rgba(255,255,255,.35); }

#footer input:focus,
#footer textarea:focus{
	border-color:var(--accent);
	background:rgba(255,255,255,.1);
}

#footer ul.actions{ display:flex; margin:0; padding:0; }

#footer input[type="submit"]{
	appearance:none;
	border:0;
	cursor:pointer;
	height:3em;
	padding:0 2em;
	border-radius:999px;
	background:linear-gradient(135deg, var(--primary), var(--accent));
	color:#fff;
	font-family:var(--font-heading);
	font-weight:600;
	font-size:.92em;
	letter-spacing:.02em;
	box-shadow:0 8px 20px -8px rgba(37,99,235,.6);
	transition:transform .2s ease, box-shadow .2s ease;
}
#footer input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(37,99,235,.7); }
#footer input[type="submit"]:active{ transform:translateY(0); }

#footer ul.contact{
	flex:1 1 16em;
	list-style:none;
	margin:0; padding:0;
}
#footer ul.contact li{
	position:relative;
	padding:0 0 0 2.9em;
	margin:0 0 1.5em 0;
	color:rgba(255,255,255,.75);
	line-height:1.5;
}
#footer ul.contact li:last-child{ margin-bottom:0; }
#footer ul.contact li a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.25); }
#footer ul.contact li a:hover{ color:var(--accent); border-color:var(--accent); }

#footer ul.contact li:before{
	font-family:"Font Awesome 5 Free";
	font-weight:400;
	position:absolute;
	left:0; top:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:2.1em; height:2.1em;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:var(--accent);
	font-size:.95em;
}
#footer ul.contact li.icon.solid.fa-globe:before{ content:"\f0ac"; font-weight:900; }
#footer ul.contact li.icon.solid.fa-phone:before{ content:"\f095"; font-weight:900; }
#footer ul.contact li.icon.solid.fa-envelope:before{ content:"\f0e0"; font-weight:900; }

#footer ul.copyright{
	width:100%;
	list-style:none;
	margin:1em 0 0 0;
	padding:2em 0 0 0;
	border-top:1px solid rgba(255,255,255,.1);
	color:rgba(255,255,255,.45);
	font-size:.85em;
}
#footer ul.copyright li{ display:inline-block; }

@media screen and (max-width:980px){
	#footer .inner{ padding:5em 2em 2.5em 2em; gap:2.5em; }
}
@media screen and (max-width:736px){
	#footer .inner{ padding:4em 1.5em 2em 1.5em; flex-direction:column; gap:2.5em; }
}