/* =========================================================
   Más Servicios — hoja de estilos principal
   ========================================================= */

:root{
	--mas-navy: #0a1a56;
	--mas-navy-dark: #071140;
	--mas-royal: #0038a8;
	--mas-royal-light: #0d4fd6;
	--mas-cyan: #6fd6e0;
	--mas-cyan-soft: #e4f8fa;
	--mas-warm: #ff7a3d;
	--mas-warm-dark: #e6621f;
	--mas-warm-soft: #fff1e8;
	--mas-bg: #f6f8fc;
	--mas-white: #ffffff;
	--mas-text: #1c2333;
	--mas-text-soft: #545b6e;
	--mas-border: #e3e7f1;
	--mas-radius: 18px;
	--mas-radius-sm: 12px;
	--mas-shadow: 0 16px 40px -18px rgba(10,26,86,.28);
	--mas-shadow-sm: 0 8px 20px -12px rgba(10,26,86,.25);
	--mas-container: 1180px;
	--mas-font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
	--mas-font-body: 'Mulish', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--mas-font-body);
	color: var(--mas-text);
	background: var(--mas-white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
	font-family: var(--mas-font-heading);
	color: var(--mas-navy);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
}
p{ margin: 0 0 1em; }
.mas-container{
	max-width: var(--mas-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Botones ---------- */
.mas-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	white-space: nowrap;
}
.mas-btn--warm{
	background: linear-gradient(135deg, var(--mas-warm), var(--mas-warm-dark));
	color: #fff;
	box-shadow: 0 10px 24px -8px rgba(230,98,31,.55);
}
.mas-btn--warm:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(230,98,31,.6); }
.mas-btn--primary{
	background: var(--mas-royal);
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(0,56,168,.5);
}
.mas-btn--primary:hover{ transform: translateY(-2px); background: var(--mas-royal-light); }
.mas-btn--ghost{
	background: transparent;
	border-color: rgba(255,255,255,.6);
	color: #fff;
}
.mas-btn--ghost:hover{ background: rgba(255,255,255,.14); }
.mas-btn--lg{ padding: 16px 34px; font-size: 16px; }

/* ---------- Topbar ---------- */
.mas-topbar{
	background: var(--mas-navy);
	color: #cfd8f5;
	font-size: 13px;
}
.mas-topbar__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 24px;
	gap: 16px;
}
.mas-topbar__info{ display: flex; gap: 22px; flex-wrap: wrap; }
.mas-topbar__item{ display: inline-flex; align-items: center; gap: 6px; color: #cfd8f5; }
.mas-topbar__item:hover{ color: var(--mas-cyan); }
.mas-topbar__social{ display: flex; gap: 12px; }
.mas-topbar__social a{ color: #cfd8f5; display: inline-flex; }
.mas-topbar__social a:hover{ color: var(--mas-cyan); }

/* ---------- Header ---------- */
.mas-header{
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 18px -10px rgba(10,26,86,.25);
}
.mas-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 24px;
}
.mas-logo img{ height: 56px; width: auto; }
.mas-nav__list{
	display: flex;
	align-items: center;
	gap: 6px;
}
.mas-nav__list a{
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 600;
	color: var(--mas-navy);
	transition: background .15s ease, color .15s ease;
}
.mas-nav__list a:hover,
.mas-nav__list .current-menu-item > a{
	background: var(--mas-cyan-soft);
	color: var(--mas-royal);
}
.mas-header__actions{ display: flex; align-items: center; gap: 14px; }
.mas-header__cta{ padding: 11px 22px; font-size: 14px; }
.mas-nav-toggle{
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid var(--mas-border);
	background: #fff;
	cursor: pointer;
}
.mas-nav-toggle span{
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--mas-navy);
	transition: transform .2s ease, opacity .2s ease;
}
.mas-nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mas-nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.mas-nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.mas-hero{
	position: relative;
	background: radial-gradient(120% 140% at 15% 0%, var(--mas-royal-light) 0%, var(--mas-navy) 55%, var(--mas-navy-dark) 100%);
	color: #fff;
	overflow: hidden;
	padding: 96px 0 110px;
}
.mas-hero__decor{
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 10% 20%, rgba(111,214,224,.9), transparent 60%),
		radial-gradient(2px 2px at 25% 70%, rgba(111,214,224,.7), transparent 60%),
		radial-gradient(3px 3px at 50% 15%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(2px 2px at 70% 55%, rgba(111,214,224,.8), transparent 60%),
		radial-gradient(3px 3px at 85% 25%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(2px 2px at 92% 75%, rgba(111,214,224,.7), transparent 60%);
	opacity: .8;
	pointer-events: none;
}
.mas-hero__inner{ position: relative; z-index: 1; }
.mas-hero__content{ max-width: 720px; }
.mas-eyebrow{
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	font-weight: 700;
	color: var(--mas-warm);
	margin-bottom: 12px;
}
.mas-hero h1{
	color: #fff;
	font-size: clamp(32px, 4.4vw, 52px);
	margin-bottom: 18px;
}
.mas-hero__text{ color: #d7deef; font-size: 17px; max-width: 600px; }
.mas-hero__text p{ margin-bottom: .8em; }
.mas-hero__actions{ display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Secciones genéricas ---------- */
.mas-section{ padding: 84px 0; }
.mas-section--tint{ background: var(--mas-bg); }
.mas-section__head{ max-width: 640px; margin-bottom: 46px; }
.mas-section__head h2{ font-size: clamp(26px, 3vw, 36px); }
.mas-section__lead{ color: var(--mas-text-soft); font-size: 17px; }
.mas-section__cta{ margin-top: 40px; text-align: center; }

/* ---------- Valores ---------- */
.mas-values{ padding-top: 64px; padding-bottom: 40px; }
.mas-values__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.mas-value{
	background: var(--mas-white);
	border: 1px solid var(--mas-border);
	border-radius: var(--mas-radius);
	padding: 30px 26px;
	box-shadow: var(--mas-shadow-sm);
}
.mas-value__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--mas-warm-soft);
	color: var(--mas-warm-dark);
	margin-bottom: 16px;
}
.mas-value__icon svg{ width: 30px; height: 30px; }
.mas-value h3{ font-size: 19px; margin-bottom: 8px; }
.mas-value p{ color: var(--mas-text-soft); margin: 0; font-size: 15px; }

/* ---------- Tarjetas de servicio (preview) ---------- */
.mas-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
}
.mas-card{
	background: var(--mas-white);
	border-radius: var(--mas-radius);
	padding: 30px 24px;
	border: 1px solid var(--mas-border);
	box-shadow: var(--mas-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mas-card:hover{ transform: translateY(-4px); box-shadow: var(--mas-shadow); }
.mas-card__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var(--mas-cyan-soft);
	color: var(--mas-royal);
	margin-bottom: 16px;
}
.mas-card__icon svg{ width: 28px; height: 28px; }
.mas-card h3{ font-size: 18px; margin-bottom: 8px; }
.mas-card p{ color: var(--mas-text-soft); font-size: 14.5px; margin: 0; }

/* ---------- Marquee de clientes ---------- */
.mas-marquee{
	overflow: hidden;
	position: relative;
	padding: 18px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mas-marquee__track{
	display: flex;
	align-items: center;
	gap: 56px;
	width: max-content;
	animation: mas-marquee-scroll 34s linear infinite;
}
.mas-marquee:hover .mas-marquee__track{ animation-play-state: paused; }
.mas-marquee__item{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	opacity: .85;
	filter: grayscale(15%);
}
.mas-marquee__item img{ max-height: 46px; width: auto; }
.mas-marquee__badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mas-navy);
	color: #fff;
	font-family: var(--mas-font-heading);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
}
.mas-marquee__name{ font-weight: 700; color: var(--mas-navy); white-space: nowrap; }
@keyframes mas-marquee-scroll{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
.mas-clients-preview{ padding-top: 56px; }

/* ---------- CTA band ---------- */
.mas-cta-band{
	background: linear-gradient(120deg, var(--mas-navy), var(--mas-royal));
	color: #fff;
	padding: 56px 0;
}
.mas-cta-band__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mas-cta-band h2{ color: #fff; font-size: 26px; margin-bottom: 6px; }
.mas-cta-band p{ color: #d7deef; margin: 0; }

/* ---------- Page hero (páginas internas) ---------- */
.mas-page-hero{
	background: linear-gradient(120deg, var(--mas-navy-dark), var(--mas-royal));
	color: #fff;
	padding: 70px 0 56px;
}
.mas-page-hero h1{ color: #fff; font-size: clamp(28px, 3.6vw, 40px); }
.mas-page-hero__text{ color: #d7deef; max-width: 680px; font-size: 16px; }
.mas-page-hero__text p{ margin-bottom: .7em; }

/* ---------- Servicios detalle ---------- */
.mas-service-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 48px 0;
	border-bottom: 1px solid var(--mas-border);
}
.mas-service-row:last-child{ border-bottom: none; }
.mas-service-row--reverse{ direction: rtl; }
.mas-service-row--reverse > *{ direction: ltr; }
.mas-service-row__media img{
	border-radius: var(--mas-radius);
	box-shadow: var(--mas-shadow);
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
}
.mas-service-row__media{
	background: var(--mas-cyan-soft);
	border-radius: var(--mas-radius);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mas-service-row__icon{ color: var(--mas-royal); width: 84px; height: 84px; display: inline-flex; }
.mas-service-row__icon svg{ width: 100%; height: 100%; }
.mas-service-row__badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--mas-warm-soft);
	color: var(--mas-warm-dark);
	margin-bottom: 14px;
}
.mas-service-row__badge svg{ width: 24px; height: 24px; }
.mas-service-row__content h2{ font-size: 26px; margin-bottom: 12px; }
.mas-service-row__text{ color: var(--mas-text-soft); margin-bottom: 22px; }
.mas-service-row__text p{ margin-bottom: .7em; }

/* ---------- Grilla de clientes ---------- */
.mas-clients-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px;
}
.mas-client-tile{
	background: #fff;
	border: 1px solid var(--mas-border);
	border-radius: var(--mas-radius-sm);
	padding: 22px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	box-shadow: var(--mas-shadow-sm);
}
.mas-client-tile img{ max-height: 48px; width: auto; margin: 0 auto; }
.mas-client-tile__badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--mas-navy);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-family: var(--mas-font-heading);
}
.mas-client-tile p{ margin: 0; font-size: 13.5px; font-weight: 600; color: var(--mas-text-soft); }

/* ---------- Formulario de contacto ---------- */
.mas-contact__grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: flex-start;
}
.mas-contact__form-wrap h2,
.mas-contact__info h2{ font-size: 22px; margin-bottom: 18px; }
.mas-form{
	background: #fff;
	border: 1px solid var(--mas-border);
	border-radius: var(--mas-radius);
	padding: 30px;
	box-shadow: var(--mas-shadow-sm);
}
.mas-form__row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.mas-form__field{ margin-bottom: 18px; }
.mas-form__field label{
	display: block;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--mas-navy);
	margin-bottom: 6px;
}
.mas-form__field input,
.mas-form__field select,
.mas-form__field textarea{
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1.5px solid var(--mas-border);
	font-family: var(--mas-font-body);
	font-size: 15px;
	color: var(--mas-text);
	background: #fbfcfe;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mas-form__field input:focus,
.mas-form__field select:focus,
.mas-form__field textarea:focus{
	outline: none;
	border-color: var(--mas-royal-light);
	box-shadow: 0 0 0 3px rgba(13,79,214,.15);
}
.mas-form__hp{ position: absolute; left: -9999px; opacity: 0; }
.mas-alert{
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 14.5px;
}
.mas-alert--success{ background: #e7f8ee; color: #1c7a44; border: 1px solid #b9ecc9; }
.mas-alert--error{ background: #fdecec; color: #b3271e; border: 1px solid #f6c6c2; }

.mas-contact__info{
	background: var(--mas-navy);
	color: #fff;
	border-radius: var(--mas-radius);
	padding: 30px;
}
.mas-contact__info h2{ color: #fff; }
.mas-contact__info-list{ display: flex; flex-direction: column; gap: 18px; }
.mas-contact__info-list li{ display: flex; gap: 12px; align-items: flex-start; }
.mas-contact__info-icon{
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255,255,255,.12);
	color: var(--mas-cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mas-contact__info-list a{ color: #cfe0ff; }
.mas-contact__info-list a:hover{ color: var(--mas-cyan); }
.mas-contact__info-list strong{ font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; color: #9fb2e0; }

/* ---------- Footer ---------- */
.mas-footer{ background: var(--mas-navy-dark); color: #b9c3e3; padding-top: 64px; }
.mas-footer__grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 36px;
	padding-bottom: 46px;
}
.mas-footer__mark{ margin-bottom: 16px; border-radius: 12px; }
.mas-footer__wordmark{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--mas-font-heading);
	font-weight: 800;
	font-size: 22px;
	color: #fff;
	margin-bottom: 16px;
}
.mas-footer__wordmark em{
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--mas-cyan);
}
.mas-footer__brand p{ color: #b9c3e3; font-size: 14.5px; }
.mas-footer__social{ display: flex; gap: 12px; }
.mas-footer__social a{
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.08);
	display: inline-flex; align-items: center; justify-content: center;
	color: #cfe0ff;
}
.mas-footer__social a:hover{ background: var(--mas-warm); color: #fff; }
.mas-footer__col h3{ color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.mas-footer__col ul{ display: flex; flex-direction: column; gap: 10px; }
.mas-footer__col a{ color: #b9c3e3; font-size: 14.5px; }
.mas-footer__col a:hover{ color: var(--mas-cyan); }
.mas-footer__contact li{ color: #b9c3e3; font-size: 14.5px; }
.mas-footer__bottom{ border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.mas-footer__bottom p{ margin: 0; font-size: 13px; color: #8b96bd; text-align: center; }

/* ---------- Botón flotante de WhatsApp ---------- */
.mas-whatsapp-float{
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
	z-index: 90;
	transition: transform .2s ease;
}
.mas-whatsapp-float:hover{ transform: scale(1.08); color: #fff; }

/* ---------- Contenido genérico (page.php / index.php) ---------- */
.mas-generic-content{ max-width: 780px; }
.mas-generic-content h2{ margin-top: 1.4em; }

/* ---------- Animación de aparición ---------- */
.mas-animate{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mas-animate.is-visible{ opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
	.mas-values__grid{ grid-template-columns: 1fr; }
	.mas-service-row{ grid-template-columns: 1fr; }
	.mas-service-row--reverse{ direction: ltr; }
	.mas-contact__grid{ grid-template-columns: 1fr; }
	.mas-footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
	.mas-nav{
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 84vw);
		height: 100vh;
		background: #fff;
		box-shadow: -12px 0 32px -14px rgba(10,26,86,.35);
		transform: translateX(100%);
		transition: transform .25s ease;
		z-index: 200;
		padding: 90px 28px 28px;
		overflow-y: auto;
	}
	.mas-nav.is-open{ transform: translateX(0); }
	.mas-nav__list{ flex-direction: column; align-items: stretch; gap: 4px; }
	.mas-nav__list a{ padding: 12px 16px; }
	.mas-nav-toggle{ display: flex; }
	.mas-header__cta{ display: none; }
	.mas-topbar__inner{ flex-direction: column; gap: 6px; align-items: flex-start; }
}

@media (max-width: 640px){
	.mas-hero{ padding: 64px 0 76px; }
	.mas-section{ padding: 56px 0; }
	.mas-footer__grid{ grid-template-columns: 1fr; }
	.mas-form__row{ grid-template-columns: 1fr; }
	.mas-cta-band__inner{ flex-direction: column; align-items: flex-start; }
}