/* RECURSO ANATOMÍA DE UNA WEB QUE CONVIERTE */
.hnw-web-anatomy{padding:145px 0 140px;background:linear-gradient(180deg,#1a364d 0%,#030b11 100%)}
.hnw-web-anatomy__head{margin-bottom:75px}
.hnw-web-anatomy__eyebrow{display:block;margin-bottom:17px;color:#F25555;font-family:'Poppins',sans-serif;font-size:11px;line-height:1;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}
.hnw-web-anatomy__head h2{max-width:760px;margin:0;color:#fff;font-family:'Poppins',sans-serif;font-size:40px;line-height:1.12;font-weight:700;letter-spacing:-1.2px}
.hnw-web-anatomy__head h2 span{color:#73b9d7}
.hnw-web-anatomy__head h2 .hnw-code-mark{color:#F25555}
.hnw-web-anatomy__head p{max-width:455px;margin:0 0 4px auto;color:rgba(255,255,255,.68);font-size:14px;line-height:1.75}
.hnw-web-anatomy__frame{overflow:hidden;border:1px solid #dfe7ed;border-radius:18px;background:#fbfdff;box-shadow:0 26px 65px rgba(15,39,56,.08)}
.hnw-web-anatomy__browser{display:flex;align-items:center;gap:13px;min-height:52px;padding:0 20px;border-bottom:1px solid #e2e8f0;background:#fff}
.hnw-web-anatomy__browser-dots{display:flex;align-items:center;gap:5px}
.hnw-web-anatomy__browser-dots span{display:block;width:7px;height:7px;border-radius:50%;background:#d6dee5}
.hnw-web-anatomy__browser-dots span:first-child{background:#F25555}
.hnw-web-anatomy__browser>span{padding-left:12px;border-left:1px solid #e2e8f0;color:#94a3b8;font-size:9px;line-height:1;font-weight:700;letter-spacing:.4px}
.hnw-web-anatomy__layers{position:relative;padding:0 28px}
.hnw-web-anatomy__layers:before{content:"";position:absolute;top:45px;bottom:45px;left:56px;width:1px;background:#dce5eb}
.hnw-web-anatomy__layer{position:relative;display:grid;grid-template-columns:58px 1fr 210px;align-items:center;gap:24px;min-height:155px;padding:24px 0}
.hnw-web-anatomy__layer:not(:last-child){border-bottom:1px solid #e7edf2}
.hnw-web-anatomy__index{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #d9e3ea;border-radius:50%;background:#fff;box-shadow:0 0 0 8px #fbfdff}
.hnw-web-anatomy__index span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff2f2;color:#F25555;font-size:11px;line-height:1;font-weight:800}
.hnw-web-anatomy__type{display:block;margin-bottom:5px;color:#94a3b8;font-size:9px;line-height:1;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hnw-web-anatomy__layer-main h3{margin:0 0 7px;color:#0F2738;font-family:'Poppins',sans-serif;font-size:25px;line-height:1.15;font-weight:800}
.hnw-web-anatomy__layer-main p{max-width:410px;margin:0;color:#64748b;font-size:12px;line-height:1.65}
.hnw-web-anatomy__tags{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px}
.hnw-web-anatomy__tags span{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 8px;border:1px solid #dfe7ed;border-radius:20px;background:#fff;color:#64748b;font-size:8px;line-height:1;font-weight:700}
.hnw-web-anatomy__result{max-width:330px;margin-left:auto;padding-left:45px;border-left:1px solid rgba(255,255,255,.14)}
.hnw-web-anatomy__result-label{display:block;max-width:250px;margin-bottom:28px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.5;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.hnw-web-anatomy__result h3{max-width:290px;margin:0 0 15px;color:#fff;font-family:'Poppins',sans-serif;font-size:25px;line-height:1.2;font-weight:700}
.hnw-web-anatomy__result>p{max-width:285px;margin:0;color:rgba(255,255,255,.66);font-size:12px;line-height:1.7}
.hnw-web-anatomy__result-flow{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.62);font-size:9px;font-weight:700}
.hnw-web-anatomy__result-flow i{color:rgba(255,255,255,.35);font-style:normal}
.hnw-web-anatomy__result-flow strong{color:#F25555;font-weight:800}

/* WIREFRAME */
.hnw-anatomy-wireframe{position:relative;width:260px;height:235px;margin-bottom:30px;overflow:hidden;border:1px solid #dce6ee;border-radius:18px;background:#fff;box-shadow:0 16px 35px rgba(15,39,56,.07)}
.hnw-anatomy-wireframe__header{display:flex;align-items:center;justify-content:space-between;height:39px;padding:0 13px;border-bottom:1px solid #e5ebf0;background:#f8fafc}
.hnw-anatomy-wireframe__logo{display:block;width:45px;height:7px;border-radius:5px;background:#0F2738}
.hnw-anatomy-wireframe__header>div{display:flex;align-items:center;gap:5px}
.hnw-anatomy-wireframe__header i{display:block;width:17px;height:4px;border-radius:3px;background:#d7e0e7}
.hnw-anatomy-wireframe__hero{display:grid;grid-template-columns:1.15fr .85fr;gap:11px;padding:21px 15px 16px}
.hnw-anatomy-wireframe__hero-copy small{display:block;width:33px;height:5px;margin-bottom:8px;border-radius:4px;background:#F25555}
.hnw-anatomy-wireframe__hero-copy strong{display:block;width:100%;height:8px;margin-bottom:6px;border-radius:4px;background:#0F2738}
.hnw-anatomy-wireframe__hero-copy strong:nth-child(3){width:72%}
.hnw-anatomy-wireframe__hero-copy p{width:91%;height:5px;margin:11px 0 13px;border-radius:4px;background:#dbe4eb}
.hnw-anatomy-wireframe__button{display:flex;align-items:center;justify-content:center;width:67px;height:25px;border-radius:5px;background:#F25555;color:#fff;font-size:7px;line-height:1;font-weight:800}
.hnw-anatomy-wireframe__hero-image{display:flex;align-items:center;justify-content:center;height:88px;border-radius:10px;background:#eef5ff;color:#20517b}
.hnw-anatomy-wireframe__hero-image svg{display:block;width:45px;height:45px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hnw-anatomy-wireframe__features{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 15px}
.hnw-anatomy-wireframe__features span{display:block;height:35px;border:1px solid #e1e8ee;border-radius:7px;background:#fbfdff}
.hnw-anatomy-wireframe__conversion{position:absolute;left:15px;right:15px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#94a3b8;font-size:7px;line-height:1;font-weight:800;letter-spacing:.5px}
.hnw-anatomy-wireframe__conversion i{color:#bbc5ce;font-style:normal}
.hnw-anatomy-wireframe__conversion strong{color:#F25555;font-weight:800}
.hnw-code-mark{display:inline-block;margin:0 5px;font-family:Consolas,Monaco,monospace;font-size:.8em;font-weight:400;letter-spacing:-1px;vertical-align:.08em}

@media only screen and (max-width:767px){
	.hnw-web-anatomy{padding:85px 0 80px}
	.hnw-web-anatomy__head{margin-bottom:45px;text-align:center}
	.hnw-web-anatomy__eyebrow{margin-bottom:14px}
	.hnw-web-anatomy__head h2{font-size:30px!important;line-height:1.15;letter-spacing:-.7px}
	.hnw-web-anatomy__body{row-gap:42px}
	.hnw-web-anatomy__frame{border-radius:13px;box-shadow:0 18px 45px rgba(15,39,56,.07)}
	.hnw-web-anatomy__browser{min-height:45px;padding:0 14px}
	.hnw-web-anatomy__layers{padding:0 17px}
	.hnw-web-anatomy__layers:before{top:38px;bottom:38px;left:39px}
	.hnw-web-anatomy__layer{grid-template-columns:44px 1fr;gap:14px;min-height:0;padding:26px 0}
	.hnw-web-anatomy__index{align-self:start;width:42px;height:42px;box-shadow:0 0 0 6px #fbfdff}
	.hnw-web-anatomy__index span{width:28px;height:28px;font-size:10px}
	.hnw-web-anatomy__type{font-size:8px}
	.hnw-web-anatomy__layer-main h3{font-size:21px!important}
	.hnw-web-anatomy__layer-main p{font-size:11px;line-height:1.65}
	.hnw-web-anatomy__tags{grid-column:2;justify-content:flex-start;margin-top:-5px}
	.hnw-web-anatomy__tags span{min-height:21px;padding:0 7px;font-size:7px}
}



.hnw-web-compare {
	padding:145px 0 130px;
	background:#f8fafc!important;
	overflow:hidden;
}


/* =====================================================================
   CABECERA
   ===================================================================== */

.hnw-web-compare__head {
	max-width:850px;
	margin:0 auto 48px;
	text-align:center;
}

.hnw-web-compare__eyebrow {
	display:inline-block;
	margin-bottom:15px;
	color:#F25555;
	font-size:10px;
	line-height:1;
	font-weight:800;
	letter-spacing:1px;
	text-transform:uppercase;
}

.hnw-web-compare__head h2 {
	margin:0;
	color:#0F2738;
	font-family:'Poppins',sans-serif;
	font-size:42px;
	line-height:1.12;
	font-weight:700;
	letter-spacing:-1.1px;
}
.hnw-web-compare__head h2 span{display:block;color:#20517b}
.hnw-web-compare__head p{max-width:650px;margin:18px auto 0;color:#64748b;font-size:14.5px;line-height:1.7}


/* =====================================================================
   STAGE
   ===================================================================== */

.hnw-web-compare__stage {
	--split:0%;

	position:relative;

	width:100%;
	max-width:1180px;
	height:650px;

	margin:0 auto;

	overflow:hidden;

	border:1px solid #dbe5ec;
	border-radius:22px;

	background:#fff;

	box-shadow:
		0 25px 65px rgba(15,39,56,.07);
}


/* =====================================================================
   CAPAS
   ===================================================================== */

.hnw-web-compare__layer {
	position:absolute;
	inset:0;

	padding:30px;

	background:#fff;
}

.hnw-web-compare__layer--bad {
	z-index:1;
}

.hnw-web-compare__layer--good {
	z-index:2;

	clip-path:
		inset(
			0
			calc(100% - var(--split))
			0
			0
		);

	background:#fff;
}


/* =====================================================================
   CABECERA DE CADA CAPA
   ===================================================================== */

.hnw-web-compare__panel-head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:25px;

	height:73px;
	padding-bottom:20px;

	border-bottom:1px solid #e4ebf0;
}

.hnw-web-compare__label {
	display:flex;
	align-items:center;
	gap:13px;
}

.hnw-web-compare__label > span {
	display:flex;
	align-items:center;
	justify-content:center;

	flex:0 0 38px;

	width:38px;
	height:38px;

	border-radius:50%;

	background:#fff0f0;

	color:#F25555;

	font-size:9px;
	font-weight:800;
}

.hnw-web-compare__label small {
	display:block;

	margin-bottom:4px;

	color:#F25555;

	font-size:7px;
	line-height:1;
	font-weight:800;
	letter-spacing:.9px;
	text-transform:uppercase;
}

.hnw-web-compare__label strong {
	display:block;

	color:#0F2738;

	font-family:'Poppins',sans-serif;
	font-size:16px;
	line-height:1.25;
	font-weight:700;
}

.hnw-web-compare__panel-head > p {
	max-width:370px;
	margin:0;

	color:#64748b;

	font-size:10px;
	line-height:1.5;

	text-align:right;
}


/* =====================================================================
   MOCKUP GENERAL
   ===================================================================== */

.hnw-web-compare__mockup {
	position:absolute;

	top:124px;
	right:30px;
	bottom:30px;
	left:30px;

	overflow:hidden;

	border:1px solid #d9e4eb;
	border-radius:18px;

	background:#eef5f8;
}

.hnw-web-compare__browser {
	display:flex;
	align-items:center;
	gap:6px;

	height:43px;

	padding:0 17px;

	border-bottom:1px solid #dce6ec;

	background:#edf4f7;
}

.hnw-web-compare__browser span {
	display:block;

	width:8px;
	height:8px;

	border-radius:50%;

	background:#bdcad3;
}

.hnw-web-compare__site {
	position:absolute;

	top:43px;
	right:17px;
	bottom:17px;
	left:17px;

	overflow:hidden;

	border:1px solid #dce5eb;
	border-radius:14px;

	background:#fff;
}


/* =====================================================================
   ANTES
   ===================================================================== */

.hnw-web-compare__mockup--bad {
	background:#eef1f3;
}

.hnw-web-compare__mockup--bad
.hnw-web-compare__browser {
	background:#e8ecef;
}

.hnw-web-compare__bad-topbar {
	display:flex;
	align-items:center;
	justify-content:space-between;

	height:56px;

	padding:0 19px;

	border-bottom:1px solid #ddd;

	background:#f0f0f0;
}

.hnw-web-compare__bad-logo {
	color:#555;

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

.hnw-web-compare__bad-nav {
	display:flex;
	gap:14px;

	color:#777;

	font-size:7px;
}

.hnw-web-compare__bad-hero {
	padding:18px 19px 13px;
}

.hnw-web-compare__bad-banner {
	height:108px;

	margin-bottom:17px;

	border-radius:2px;

	background:
		linear-gradient(
			135deg,
			#9da4aa,
			#777e84
		);
}

.hnw-web-compare__bad-copy {
	max-width:65%;
}

.hnw-web-compare__line {
	height:6px;

	margin-bottom:7px;

	border-radius:1px;

	background:#bfc5ca;
}

.hnw-web-compare__line.w-90 {
	width:90%;
}

.hnw-web-compare__line.w-88 {
	width:88%;
}

.hnw-web-compare__line.w-84 {
	width:84%;
}

.hnw-web-compare__line.w-82 {
	width:82%;
}

.hnw-web-compare__line.w-72 {
	width:72%;
}

.hnw-web-compare__line.w-69 {
	width:69%;
}

.hnw-web-compare__line.w-68 {
	width:68%;
}

.hnw-web-compare__line.w-64 {
	width:64%;
}

.hnw-web-compare__line.w-60 {
	width:60%;
}

.hnw-web-compare__line.w-58 {
	width:58%;
}

.hnw-web-compare__line.w-54 {
	width:54%;
}

.hnw-web-compare__line.w-52 {
	width:52%;
}

.hnw-web-compare__bad-buttons {
	display:flex;
	gap:7px;

	margin-top:13px;
}

.hnw-web-compare__bad-buttons span {
	width:70px;
	height:23px;

	border-radius:2px;

	background:#90979d;
}

.hnw-web-compare__bad-buttons span:last-child {
	width:54px;

	background:#d1d5d8;
}

.hnw-web-compare__bad-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:9px;

	padding:0 19px;
}

.hnw-web-compare__bad-card {
	min-height:75px;

	padding:10px;

	border:1px solid #d0d4d7;

	background:#eee;
}

.hnw-web-compare__bad-icon {
	width:20px;
	height:20px;

	margin-bottom:9px;

	background:#a7adb2;
}

.hnw-web-compare__bad-footer-note {
	display:flex;
	gap:5px;

	padding:13px 19px;
}

.hnw-web-compare__bad-footer-note span {
	display:inline-flex;
	align-items:center;

	min-height:22px;
	padding:0 8px;

	border:1px solid #d2d5d8;

	background:#eee;

	color:#777;

	font-size:6px;
	font-weight:700;
}

/* =====================================================================
   DESPUÉS — LANDING OPTIMIZADA / EJEMPLO FICTICIO
   ===================================================================== */

.hnw-web-compare__mockup--good {
	padding:0;
	overflow:hidden;
	background:#eaf3f5;
}

.hnw-web-compare__good-site {
	display:flex;
	flex-direction:column;
	background:#fff;
}


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

.hnw-web-compare__good-topbar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;

	flex:0 0 48px;

	padding:0 22px;

	border-bottom:1px solid #e5edf0;

	background:rgba(255,255,255,.96);
}

.hnw-web-compare__good-brand {
	display:flex;
	align-items:center;
	gap:7px;
}

.hnw-web-compare__good-brandmark {
	display:grid;
	grid-template-columns:8px 8px;
	grid-template-rows:8px 8px;
	gap:2px;

	width:18px;
	height:18px;
}

.hnw-web-compare__good-brandmark i {
	display:block;
	border-radius:2px;
	background:#ef5b5b;
}

.hnw-web-compare__good-brandmark i:nth-child(2) {
	background:#173047;
}

.hnw-web-compare__good-brandmark i:nth-child(3) {
	grid-column:2;
	background:#57a9b5;
}

.hnw-web-compare__good-brand strong {
	color:#173047;

	font-family:'Poppins',sans-serif;
	font-size:11px;
	line-height:1;
	font-weight:800;
	letter-spacing:1px;
}

.hnw-web-compare__good-nav {
	display:flex;
	align-items:center;
	gap:17px;

	color:#53697b;

	font-size:6.5px;
	line-height:1;
	font-weight:700;
}

.hnw-web-compare__good-nav b {
	display:flex;
	align-items:center;
	justify-content:center;

	min-height:25px;

	padding:0 10px;

	border-radius:7px;

	background:#173047;
	color:#fff;

	font-weight:700;
}


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

.hnw-web-compare__good-hero {
	position:relative;

	display:grid;
	grid-template-columns:
		minmax(0,1.04fr)
		minmax(175px,.68fr)
		minmax(235px,.93fr);

	gap:18px;
	align-items:center;

	flex:1;
	min-height:0;

	padding:22px 25px 18px;

	background:
		radial-gradient(circle at 53% 20%,rgba(103,184,192,.20),transparent 25%),
		radial-gradient(circle at 68% 76%,rgba(242,137,112,.13),transparent 27%),
		linear-gradient(135deg,#fafdfe 0%,#eef7f8 100%);
}


/* =========================================================
   COPY
   ========================================================= */

.hnw-web-compare__good-copy {
	position:relative;
	z-index:2;
	min-width:0;
}

.hnw-web-compare__good-eyebrow {
	display:inline-flex;
	align-items:center;

	min-height:23px;

	margin-bottom:11px;
	padding:0 10px;

	border:1px solid rgba(239,91,91,.24);
	border-radius:20px;

	background:#fff6f4;
	color:#d94d4d;

	font-size:6px;
	line-height:1;
	font-weight:800;
	letter-spacing:.65px;
}

.hnw-web-compare__good-eyebrow:before {
	content:"";

	width:5px;
	height:5px;

	margin-right:6px;

	border-radius:50%;

	background:#ef5b5b;
}

.hnw-web-compare__good-copy h3 {
	max-width:330px;

	margin:0;

	color:#10283c;

	font-family:'Poppins',sans-serif;
	font-size:27px;
	line-height:1.04;
	font-weight:800;
	letter-spacing:-.8px;
}

.hnw-web-compare__good-copy h3 span {
	display:block;
	color:#ef5b5b;
}

.hnw-web-compare__good-copy > p {
	max-width:340px;

	margin:11px 0 0;

	color:#657789;

	font-size:8px;
	line-height:1.6;
}

.hnw-web-compare__good-actions {
	display:flex;
	align-items:center;
	gap:7px;

	margin-top:15px;
}

.hnw-web-compare__good-primary,
.hnw-web-compare__good-secondary {
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-height:30px;

	padding:0 12px;

	border-radius:6px;

	font-size:6.5px;
	line-height:1;
	font-weight:800;
}

.hnw-web-compare__good-primary {
	background:#ef5b5b;
	color:#fff;

	box-shadow:0 8px 18px rgba(239,91,91,.19);
}

.hnw-web-compare__good-secondary {
	border:1px solid #d5e0e5;
	background:rgba(255,255,255,.8);
	color:#173047;
}


/* prueba social */

.hnw-web-compare__good-social {
	display:flex;
	align-items:center;
	gap:9px;

	margin-top:17px;
}

.hnw-web-compare__good-avatars {
	display:flex;
	padding-left:4px;
}

.hnw-web-compare__good-avatars i {
	display:flex;
	align-items:center;
	justify-content:center;

	width:20px;
	height:20px;

	margin-left:-4px;

	border:2px solid #fff;
	border-radius:50%;

	background:#d9ebe9;
	color:#285b5d;

	font-size:5px;
	font-style:normal;
	font-weight:800;
}

.hnw-web-compare__good-avatars i:nth-child(2) {
	background:#f5ddd4;
	color:#94594d;
}

.hnw-web-compare__good-avatars i:nth-child(3) {
	background:#dfe5ef;
	color:#50637d;
}

.hnw-web-compare__good-avatars i:nth-child(4) {
	background:#e8e0ef;
	color:#665577;
}

.hnw-web-compare__good-social > span {
	display:block;

	color:#8695a2;

	font-size:5px;
	line-height:1.35;
}

.hnw-web-compare__good-social > span strong {
	display:block;
	margin-bottom:2px;
	color:#173047;
	font-size:5.7px;
}


/* =========================================================
   VISUAL CENTRAL
   ========================================================= */

.hnw-web-compare__good-art {
	position:relative;
	z-index:1;

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

	min-width:0;
	height:100%;
}

.hnw-web-compare__good-art > svg {
	position:relative;
	z-index:2;

	display:block;

	width:100%;
	max-width:225px;
	height:auto;

	overflow:visible;
}

.hnw-web-compare__good-orb {
	position:absolute;
	z-index:0;

	display:block;

	border-radius:50%;

	filter:blur(.2px);
}

.hnw-web-compare__good-orb--one {
	width:105px;
	height:105px;

	top:12%;
	right:0;

	background:rgba(239,91,91,.10);
}

.hnw-web-compare__good-orb--two {
	width:120px;
	height:120px;

	left:-10px;
	bottom:5%;

	background:rgba(76,166,175,.11);
}

.hnw-web-compare__good-note {
	position:absolute;
	z-index:3;

	top:13px;
	right:-4px;

	max-width:100px;

	color:#53697b;

	font-size:6px;
	line-height:1.35;
	font-weight:700;

	transform:rotate(-5deg);
}

.hnw-web-compare__good-note i {
	display:inline-block;
	margin-right:3px;
	color:#ef5b5b;
	font-size:10px;
	font-style:normal;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.hnw-web-compare__good-form {
	position:relative;
	z-index:3;

	align-self:center;

	width:100%;

	padding:16px;

	border:1px solid rgba(214,226,232,.95);
	border-radius:13px;

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

	box-shadow:
		0 18px 38px rgba(23,48,71,.10);
}

.hnw-web-compare__good-formline {
	display:block;

	width:28px;
	height:3px;

	margin-bottom:9px;

	border-radius:3px;

	background:#ef5b5b;
}

.hnw-web-compare__good-form > small {
	display:block;

	margin-bottom:5px;

	color:#ef5b5b;

	font-size:5.5px;
	line-height:1;
	font-weight:800;
	letter-spacing:.65px;
}

.hnw-web-compare__good-form > strong {
	display:block;

	color:#173047;

	font-family:'Poppins',sans-serif;
	font-size:12px;
	line-height:1.2;
	font-weight:800;
}

.hnw-web-compare__good-formintro {
	margin:5px 0 10px;

	color:#7c8d9a;

	font-size:6px;
	line-height:1.45;
}

.hnw-web-compare__good-formgrid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:5px;
}

.hnw-web-compare__good-field {
	display:flex;
	align-items:center;

	height:25px;

	margin-bottom:5px;
	padding:0 8px;

	border:1px solid #dbe5e9;
	border-radius:5px;

	background:#fbfcfd;
}

.hnw-web-compare__good-field span {
	color:#9aa8b2;
	font-size:5.7px;
	line-height:1;
}

.hnw-web-compare__good-field--message {
	height:37px;
	align-items:flex-start;
	padding-top:8px;
}

.hnw-web-compare__good-submit {
	display:flex;
	align-items:center;
	justify-content:center;

	height:28px;

	margin-top:3px;

	border-radius:5px;

	background:#ef5b5b;

	color:#fff;

	font-size:6px;
	line-height:1;
	font-weight:800;

	box-shadow:0 7px 16px rgba(239,91,91,.17);
}

.hnw-web-compare__good-safe {
	margin:7px 0 0;

	color:#94a3ad;

	font-size:5px;
	line-height:1;

	text-align:center;
}

.hnw-web-compare__good-safe span {
	color:#4b9494;
	font-weight:800;
}


/* =========================================================
   EVIDENCIAS
   ========================================================= */

.hnw-web-compare__good-proof {
	display:grid;
	grid-template-columns:repeat(3,1fr);

	flex:0 0 45px;

	border-top:1px solid #e4ecef;

	background:rgba(255,255,255,.97);
}

.hnw-web-compare__good-proof > div {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;

	border-right:1px solid #e4ecef;
}

.hnw-web-compare__good-proof > div:last-child {
	border-right:0;
}

.hnw-web-compare__good-proof strong {
	color:#ef5b5b;
	font-size:6px;
	line-height:1;
	font-weight:800;
}

.hnw-web-compare__good-proof span {
	color:#173047;
	font-size:6px;
	line-height:1;
	font-weight:700;
}

/* =====================================================================
   SLIDER
   ===================================================================== */

.hnw-web-compare__divider{position:absolute;top:0;bottom:0;left:clamp(28px,var(--split),calc(100% - 23px));z-index:5;width:1px;transform:translateX(-.5px)}

.hnw-web-compare__divider-line {
	position:absolute;

	inset:0;

	width:1px;

	background:#F25555;

	opacity:.70;
}

.hnw-web-compare__handle {
	position:absolute;

	top:50%;
	left:50%;

	display:flex;
	align-items:center;
	justify-content:center;
	gap:4px;

	width:48px;
	height:48px;

	border:1px solid #d5e0e7;
	border-radius:50%;

	background:#fff;

	color:#20517b;

	box-shadow:
		0 8px 22px rgba(15,39,56,.12);

	transform:
		translate(-50%,-50%);
}

.hnw-web-compare__handle i {
	font-family:Arial,sans-serif;
	font-size:14px;
	font-style:normal;
	font-weight:700;
}


/* INPUT INVISIBLE SOBRE TODO EL STAGE */

.hnw-web-compare__range {
	position:absolute;

	inset:0;

	z-index:10;

	width:100%;
	height:100%;

	margin:0;

	opacity:0;

	cursor:ew-resize;

	-webkit-appearance:none;
	appearance:none;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media only screen and (max-width:991px) and (min-width:768px) {

	.hnw-web-compare__head h2 {
		font-size:36px;
	}

	.hnw-web-compare__stage {
		height:610px;
	}

	.hnw-web-compare__layer {
		padding:23px;
	}

	.hnw-web-compare__mockup {
		top:113px;
		right:23px;
		bottom:23px;
		left:23px;
	}

}

/* DESPUÉS — TABLET */

@media only screen and (max-width:991px) and (min-width:768px) {

	.hnw-web-compare__good-topbar {
		padding:0 16px;
	}

	.hnw-web-compare__good-nav {
		gap:9px;
		font-size:5.5px;
	}

	.hnw-web-compare__good-hero {
		grid-template-columns:minmax(0,1fr) minmax(190px,.83fr);

		gap:14px;

		padding:18px;
	}

	.hnw-web-compare__good-copy h3 {
		font-size:23px;
	}

	.hnw-web-compare__good-copy > p {
		font-size:7px;
	}

	.hnw-web-compare__good-art {
		position:absolute;

		right:30%;
		bottom:22px;

		width:190px;
		height:220px;

		opacity:.90;

		pointer-events:none;
	}

	.hnw-web-compare__good-art > svg {
		max-width:180px;
	}

	.hnw-web-compare__good-note {
		display:none;
	}

	.hnw-web-compare__good-form {
		grid-column:2;

		padding:13px;

		background:rgba(255,255,255,.97);
	}

	.hnw-web-compare__good-social {
		margin-top:13px;
	}

}

/* =====================================================================
   MOBILE
   ===================================================================== */

@media only screen and (max-width:767px) {

	.hnw-web-compare {
		padding:85px 0 80px;
	}


	.hnw-web-compare__head {
		margin-bottom:32px;
	}


	.hnw-web-compare__head h2 {
		font-size:30px!important;
		line-height:1.15;
		letter-spacing:-.7px;
	}


	.hnw-web-compare__head p {
		font-size:11px;
	}


	.hnw-web-compare__stage {
		height:680px;

		border-radius:15px;
	}


	.hnw-web-compare__layer {
		padding:15px;
	}


	.hnw-web-compare__panel-head {
		display:block;

		height:92px;

		padding-bottom:13px;
	}


	.hnw-web-compare__panel-head > p {
		max-width:none;

		margin-top:9px;

		font-size:7px;

		text-align:left;
	}


	.hnw-web-compare__label strong {
		font-size:13px;
	}


	.hnw-web-compare__mockup {
		top:122px;
		right:15px;
		bottom:15px;
		left:15px;

		border-radius:12px;
	}


	.hnw-web-compare__browser {
		height:35px;
	}


	.hnw-web-compare__site {
		top:35px;
		right:10px;
		bottom:10px;
		left:10px;

		border-radius:10px;
	}


	/* ANTES */

	.hnw-web-compare__bad-nav {
		gap:5px;

		font-size:5px;
	}


	.hnw-web-compare__bad-hero {
		padding:12px;
	}


	.hnw-web-compare__bad-banner {
		height:95px;
	}


	.hnw-web-compare__bad-grid {
		grid-template-columns:1fr;

		padding:0 12px;
	}


	.hnw-web-compare__bad-card {
		min-height:48px;
	}


	.hnw-web-compare__bad-footer-note {
		padding:10px 12px;
	}

	.hnw-web-compare__handle {
		width:42px;
		height:42px;
	}

}

/* =========================================================
   DISEÑO WEB — PUENTE TABLET SLIDER DE PLANES
   767–1128
   ========================================================= */

@media only screen and (min-width:767px) and (max-width:1128.98px) {

    #planes-diseno-web ul.offer_ul .offer_li {
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:0 !important;
        width:100% !important;
        max-width:100% !important;
    }

    #planes-diseno-web ul.offer_ul .offer_li > .image_wrapper {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        flex:0 0 44% !important;
        width:44% !important;
        max-width:44% !important;

        margin:0 !important;
        padding:0 28px 0 0 !important;

        box-sizing:border-box !important;
        float:none !important;
    }

    #planes-diseno-web ul.offer_ul .offer_li > .image_wrapper img {
        display:block !important;
        width:100% !important;
        max-width:460px !important;
        height:auto !important;
        margin:0 auto !important;
    }

    #planes-diseno-web ul.offer_ul .offer_li > .desc_wrapper {
        flex:0 0 56% !important;
        width:56% !important;
        max-width:56% !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;
        float:none !important;
    }

}


/* 767–768: las imágenes siguen afectadas por hide-mobile */
@media only screen and (min-width:767px) and (max-width:768.98px) {

    #planes-diseno-web .offer_li > .image_wrapper.hide-mobile {
        display:flex !important;
    }

    #planes-diseno-web .offer_li .desc_wrapper p.hide-mobile {
        display:block !important;
    }

    #planes-diseno-web .offer_li .dw-divider.hide-mobile {
        display:block !important;
    }

    #planes-diseno-web .pricing-switch-container .hide-mobile {
        display:inline !important;
    }

}


/* 767 exacto: usar posición de controles de tablet */
@media only screen and (min-width:767px) and (max-width:767.98px) {

    #planes-diseno-web .offer_ul.active-slider {
        position:relative !important;
        left:0 !important;
        opacity:1 !important;
        visibility:visible !important;
        padding-bottom:30px !important;
    }

    #planes-diseno-web .offer_ul:not(.active-slider) {
        position:absolute !important;
        left:-9999px !important;
        top:0 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    #planes-diseno-web .offer_ul.active-slider .slick-dots {
        position:absolute !important;
        bottom:0 !important;
        left:45% !important;

        width:auto !important;

        display:flex !important;
        justify-content:flex-start !important;

        padding:0 !important;
        margin:0 !important;
    }

}


/* =========================================================
   DISEÑO WEB — ANATOMÍA EN TABLET
   Mantener una sola columna hasta que exista ancho real
   ========================================================= */

@media only screen and (min-width:768px) and (max-width:1023.98px) {

    #arquitectura-web .hnw-web-anatomy__body > .col-md-8 {
        flex:0 0 100% !important;
        max-width:100% !important;
        width:100% !important;
    }

    #arquitectura-web .hnw-web-anatomy__body > .col-md-4 {
        display:none !important;
    }

}

/* =========================================================
   COMPARADOR DISEÑO WEB — DESPUÉS EN MÓVIL
   ========================================================= */

@media only screen and (max-width:767px) {

	.hnw-web-compare__good-topbar {
		flex:0 0 37px;

		padding:0 10px;
	}

	.hnw-web-compare__good-brand {
		gap:5px;
	}

	.hnw-web-compare__good-brandmark {
		transform:scale(.78);
		transform-origin:left center;
	}

	.hnw-web-compare__good-brand strong {
		font-size:8px;
	}

	.hnw-web-compare__good-nav span {
		display:none;
	}

	.hnw-web-compare__good-nav b {
		position:relative;

		width:22px;
		height:18px;
		min-height:0;

		padding:0;

		background:transparent;

		font-size:0;
	}

	.hnw-web-compare__good-nav b:before,
	.hnw-web-compare__good-nav b:after {
		content:"";

		position:absolute;
		left:2px;

		width:18px;
		height:2px;

		border-radius:3px;

		background:#173047;
	}

	.hnw-web-compare__good-nav b:before {
		top:5px;
	}

	.hnw-web-compare__good-nav b:after {
		top:11px;
	}


	/* HERO */

	.hnw-web-compare__good-hero {
		display:flex;
		flex-direction:column;
		align-items:stretch;
		justify-content:flex-start;

		gap:0;

		padding:12px 12px 9px;

		overflow:hidden;
	}


	/* COPY */

	.hnw-web-compare__good-eyebrow {
		min-height:20px;

		margin-bottom:8px;
		padding:0 8px;

		font-size:5px;
	}

	.hnw-web-compare__good-copy h3 {
		max-width:255px;

		font-size:20px;
		line-height:1.04;
		letter-spacing:-.45px;
	}

	.hnw-web-compare__good-copy > p {
		max-width:270px;

		margin-top:7px;

		font-size:6.5px;
		line-height:1.45;
	}

	.hnw-web-compare__good-actions {
		margin-top:9px;
	}

	.hnw-web-compare__good-primary,
	.hnw-web-compare__good-secondary {
		min-height:25px;

		padding:0 9px;

		font-size:5.5px;
	}

	.hnw-web-compare__good-secondary {
		display:none;
	}

	.hnw-web-compare__good-social {
		display:none;
	}


	/* VISUAL */

	.hnw-web-compare__good-art {
		position:relative;

		width:100%;
		height:126px;

		margin:-4px 0 -6px;

		flex:0 0 126px;
	}

	.hnw-web-compare__good-art > svg {
		position:absolute;

		right:-2px;
		bottom:-16px;

		width:170px;
		max-width:none;
	}

	.hnw-web-compare__good-orb--one {
		width:82px;
		height:82px;

		top:8px;
		right:12px;
	}

	.hnw-web-compare__good-orb--two {
		width:90px;
		height:90px;

		left:45px;
		bottom:-18px;
	}

	.hnw-web-compare__good-note {
		top:22px;
		left:7px;
		right:auto;
		max-width:93px;
		font-size:5.5px;
		line-height:1.35;
		transform:rotate(-5deg);
	}


	/* FORMULARIO */

	.hnw-web-compare__good-form {
		width:100%;
        margin-top:-27px;
        position:relative;
        z-index:4;
		padding:9px;
		border-radius:8px;
		box-shadow:0 10px 22px rgba(23,48,71,.08);
	}

	.hnw-web-compare__good-formline {
		width:22px;
		height:2px;
		margin-bottom:6px;
	}

	.hnw-web-compare__good-form > small {
		margin-bottom:3px;
		font-size:4.5px;
	}

	.hnw-web-compare__good-form > strong {
		font-size:9px;
	}

	.hnw-web-compare__good-formintro {
		display:none;
	}

	.hnw-web-compare__good-formgrid {
		display:block;
	}

	.hnw-web-compare__good-field {
		height:21px;

		margin-bottom:3px;
		padding:0 6px;
	}

	.hnw-web-compare__good-field span {
		font-size:5px;
	}

	.hnw-web-compare__good-field--message {
		display:none;
	}

	.hnw-web-compare__good-submit {
		height:23px;

		margin-top:4px;

		font-size:5.4px;
	}

	.hnw-web-compare__good-safe {
		margin-top:4px;
		font-size:4.5px;
	}


	/* RESULTADOS */

	.hnw-web-compare__good-proof {
		flex:0 0 38px;
	}

	.hnw-web-compare__good-proof > div {
		gap:3px;
		padding:0 2px;
	}

	.hnw-web-compare__good-proof strong {
		font-size:4.7px;
	}

	.hnw-web-compare__good-proof span {
		font-size:4.7px;
	}

}