/* =========================================================
   RECURSOS — PACKS 360
   ========================================================= */


/* =========================================================
   UTILIDAD — ACENTO HNW
   ========================================================= */

.hnw-accent {
	color:#F25555;
}


/* =========================================================
   SISTEMA 360 POR CAPAS
   ========================================================= */

.hnw-section-method-layers {
	padding:165px 0 185px;
	background:#ffffff;
}

.hnw-method-layers__copy {
	padding-right:60px;
}

.hnw-method-layers__heading {
	font-size:42px;
	line-height:1.1;
	color:#0F2738;
	font-weight:700;
	letter-spacing:-1px;
	margin:18px 0 25px;
}

.hnw-method-layers__intro {
	font-size:15px;
	line-height:1.75;
	color:#64748b;
	margin:0;
}

.hnw-method-layers__stack {
	max-width:650px;
	margin-left:auto;
}

.hnw-method-layers__card {
	border:1px solid #e2e8f0;
	border-radius:15px;
	padding:24px 28px;
	display:flex;
	align-items:center;
	gap:28px;
}

.hnw-method-layers__card--web {
	background:#ffffff;
	margin-bottom:14px;
}

.hnw-method-layers__card--seo {
	background:#f8fafc;
	margin:0 25px 14px;
}

.hnw-method-layers__card--ads {
	background:#f3f6f8;
	margin:0 50px;
}

.hnw-method-layers__number {
	font-size:12px;
	font-weight:800;
	color:#F25555;
	min-width:28px;
}

.hnw-method-layers__meta {
	min-width:120px;
}

.hnw-method-layers__meta strong {
	display:block;
	font-size:20px;
	color:#0F2738;
}

.hnw-method-layers__meta span {
	font-size:11px;
	color:#94a3b8;
	text-transform:uppercase;
	letter-spacing:.7px;
}

.hnw-method-layers__card p {
	font-size:13px;
	line-height:1.6;
	color:#64748b;
	margin:0;
}

.hnw-method-layers__tail {
	margin-top:32px;
	text-align:right;
	padding-right:50px;
}

.hnw-method-layers__tail span {
	font-size:13px;
	color:#64748b;
}

.hnw-method-layers__tail strong {
	color:#0F2738;
}


/* =========================================================
   PACKS 360 — INTRO + TARJETAS
   ========================================================= */

.hnw-packs-pricing {
	padding:110px 0 !important;
}

.hnw-packs-intro__heading {
	font-size:32px;
}

.hnw-pack-kicker {
	letter-spacing:1px;
}

.hnw-pack-kicker--muted {
	color:#64748b !important;
}

.hnw-pack-preview {
	font-size:13px;
	color:#64748b;
	line-height:1.6;
	margin:0 0 14px;
	min-height:68px;
}

.hnw-pack-preview-divider {
	margin:0 0 20px;
}

.hnw-pack-features {
	margin:0 0 20px !important;
}

.hnw-pack-featured-label {
	background:#0F2738 !important;
}


/* =========================================================
   EVOLUCIÓN DIGITAL
   ========================================================= */

.hnw-section-evolution {
	background:#ffffff;
	padding:105px 0;
}

.hnw-section-evolution__heading {
	font-size:clamp(28px,3vw,31px);
	line-height:1.15;
	color:#0F2738;
	font-weight:600;
	margin-top:15px;
}

.hnw-section-evolution__items {
	position:relative;
}

.hnw-section-evolution__items::before {
	content:"";
	position:absolute;
	left:10px;
	right:10px;
	top:44px;
	height:1px;
	background:#e6edf2;
}

.hnw-section-evolution__item {
	position:relative;
	padding:4px 15px 0;
	z-index:2;
}

.hnw-section-evolution__title {
	display:inline-flex;
	align-items:center;
	gap:9px;
	background:#ffffff;
	padding-right:14px;
	margin-bottom:27px;
}

.hnw-section-evolution__title i {
	color:#94a3b8;
	font-size:15px;
}

.hnw-section-evolution__title strong {
	color:#0F2738;
	font-size:18px;
	font-weight:700;
}

.hnw-section-evolution__item p {
	color:#64748b;
	font-size:13px;
	line-height:1.65;
	margin:0;
}


/* =========================================================
   MOBILE — HASTA 766px
   ========================================================= */

@media only screen and (max-width:766.98px) {

	/* SISTEMA 360 */

	.hnw-section-method-layers {
		padding:110px 0 130px;
	}

	.hnw-method-layers__copy {
		padding-right:0;
		text-align:center;
		margin-bottom:38px;
	}

	.hnw-method-layers__heading {
		font-size:34px;
		line-height:1.12;
		margin:15px 0 18px;
	}

	.hnw-method-layers__intro,
	.hnw-method-layers__card p {
		display:none !important;
	}

	.hnw-method-layers__card,
	.hnw-method-layers__card--web,
	.hnw-method-layers__card--seo,
	.hnw-method-layers__card--ads {
		margin:0 0 16px;
		padding:22px 24px;
		gap:18px;
		border-radius:18px;
	}

	.hnw-method-layers__meta {
		min-width:0;
	}

	.hnw-method-layers__meta strong {
		font-size:19px;
	}

	.hnw-method-layers__tail {
		text-align:center;
		padding-right:0;
		margin-top:8px;
	}

	.hnw-method-layers__tail span {
		display:block;
		font-size:14px;
		line-height:1.5;
	}


	/* PACKS */

	#planes-360 .hnw-packs-intro {
		margin-bottom:0 !important;
	}


	/* EVOLUCIÓN */

	.hnw-section-evolution__items::before {
		display:none;
	}

		.hnw-section-evolution__item {
		margin-top:28px;
	}
}


/* =========================================================
   PACKS 360 — FRONTERA TABLET 767px
   Replica la composición que Bootstrap activa desde 768px
   sin afectar 766px ni inferiores
   ========================================================= */

@media only screen and (min-width:767px) and (max-width:767.98px) {

	/* MISMO ANCHO DE CONTENEDOR QUE EN 768px */

	#metodologia-360 > .container,
	#planes-360 > .container,
	.hnw-section-evolution > .container,
	.hnw-landing-close > .container {
		max-width:720px !important;
		width:100% !important;
	}


	/* SISTEMA 360 — 5 / 7 */

	#metodologia-360 > .container > .row > .col-md-5 {
		flex:0 0 41.666667% !important;
		max-width:41.666667% !important;
		width:41.666667% !important;
	}

	#metodologia-360 > .container > .row > .col-md-7 {
		flex:0 0 58.333333% !important;
		max-width:58.333333% !important;
		width:58.333333% !important;
	}

	#metodologia-360 .hnw-method-layers__heading {
		font-size:42px !important;
		line-height:1.1 !important;
	}

	#metodologia-360 .hnw-method-layers__card {
		padding:24px 28px !important;
	}


	/* PACKS — 3 COLUMNAS */

	#planes-360 > .container > .row > .col-md-4 {
		flex:0 0 33.333333% !important;
		max-width:33.333333% !important;
		width:33.333333% !important;
	}

	#Content #planes-360 .row.align_center.hnw-packs-intro {
		margin-bottom:20px !important;
	}

	#planes-360 .hnw-packs-intro__heading {
		font-size:32px !important;
		line-height:1.2 !important;
	}

	#planes-360 .card-purpose-saas {
		padding:23px !important;
	}

	#planes-360 .card-purpose-saas ul {
		margin:12px 0 18px !important;
	}

	#planes-360 .card-purpose-saas ul li {
		font-size:11px !important;
		line-height:1.4 !important;
		margin-bottom:8px !important;
	}

	#planes-360 .card-purpose-saas ul li i {
		font-size:14px !important;
	}

	#planes-360 .space-mobile2 {
		margin-bottom:0 !important;
	}


	/* EVOLUCIÓN DIGITAL — 5 / 7 + 3 COLUMNAS */

	.hnw-section-evolution > .container > .row > .col-md-5 {
		flex:0 0 41.666667% !important;
		max-width:41.666667% !important;
		width:41.666667% !important;
	}

	.hnw-section-evolution > .container > .row > .col-md-7 {
		flex:0 0 58.333333% !important;
		max-width:58.333333% !important;
		width:58.333333% !important;
	}

	.hnw-section-evolution__items > .col-md-4 {
		flex:0 0 33.333333% !important;
		max-width:33.333333% !important;
		width:33.333333% !important;
	}

	#Content .hnw-section-evolution__heading {
		line-height:1.15 !important;
	}

	#Content .hnw-section-evolution__item {
		padding:4px 15px 0 !important;
	}

	#Content .hnw-section-evolution__title {
		padding-right:14px !important;
	}


	/* CIERRE — 7 / 5 */

	.hnw-landing-close > .container > .row > .col-md-7 {
		flex:0 0 58.333333% !important;
		max-width:58.333333% !important;
		width:58.333333% !important;
	}

	.hnw-landing-close > .container > .row > .col-md-5 {
		flex:0 0 41.666667% !important;
		max-width:41.666667% !important;
		width:41.666667% !important;
	}

	#Content .hnw-landing-close {
		padding:120px 0 !important;
	}

	#Content .hnw-landing-close__copy {
		padding-right:55px !important;
		text-align:left !important;
	}

	#Content .hnw-landing-close__copy h2 {
		font-size:40px !important;
		line-height:1.12 !important;
	}

	#Content .hnw-landing-close__copy p {
		font-size:16px !important;
		line-height:1.7 !important;
	}

	#Content .hnw-landing-close__cta {
		min-height:54px !important;
		padding:0 24px !important;
		font-size:14px !important;
	}

	#Content .hnw-landing-close__system {
		margin-top:0 !important;
		padding:31px 32px !important;
		text-align:left !important;
	}

	#Content .hnw-landing-close__system-title {
		margin-bottom:27px !important;
	}

	#Content .hnw-landing-close__item {
		padding:15px 0 !important;
	}

	#Content .hnw-landing-close__item strong {
		font-size:15px !important;
	}

	#Content .hnw-landing-close__item > div > span {
		font-size:12px !important;
	}


	/* Evita que las reglas globales de H2 móvil reduzcan
	   los spans únicamente en este píxel tablet */

	#Content #metodologia-360 h2 span,
	#Content #planes-360 h2 span,
	#Content .hnw-section-evolution h2 span,
	#Content .hnw-landing-close h2 span {
		font-size:inherit !important;
	}

}

/* =========================================================
   PACKS 360 — PRECIO TABLET
   En 768–991 las tarjetas siguen siendo estrechas.
   Recupera el tamaño original definido en el HTML.
   ========================================================= */

@media only screen and (min-width:767px) and (max-width:991.98px) {

	#planes-360 .card-purpose-saas > div:last-child > div {
		font-size:27px !important;
		line-height:1.05 !important;
		letter-spacing:-.02em !important;
	}

}