/* *****************************************************

    ** Custom Stylesheet special styles for 3.7 version **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Estilos para la tabla comparativa técnica de planes */
:root {
	--bg: ##ebeff5; /* bg-white en main.css */
	--muted: #6b7280; /* c-grey-light en style.css */
	--text: #212122;
	--accent: #004763; /* c-black en style.css */
	--accent-2: #17a2b8; /* c-info en main.css */
	--border: #f8f9fa; /* bg-greylight en main.css */
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.compare-section {
	padding: 28px 18px;
	background: transparent;
	display: flex;
	justify-content: center;
}
.compare-wrap {
	width: 100%;
	background: var(--bg);
	border-radius: 10px;
	border: 1px solid var(--border);
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(7, 18, 38, 0.04);
}

.compare-head {
	display: grid;
	grid-template-columns: 220px repeat(3, 1fr);
	background: #f7fafb;
	padding: 14px 20px;
	align-items: center;
	gap: 10px;
}
.compare-head .col-title {
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
}
.plan-name {
	font-size: 18px;
	font-weight: 800;
	margin: 4px 0;
}
.plan-price {
	font-size: 20px;
	font-weight: 900;
	color: #071226;
}
.plan-sub {
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}

table.compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	table-layout: fixed;
}

/* Rows: label column then three plan columns */
table.compare thead {
	background: transparent;
}
table.compare thead th,
table.compare tbody td {
	padding: 14px 20px;
	border-bottom: 1px solid var(--border);
	box-sizing: border-box;
}
table.compare thead th {
	font-weight: 700;
	text-align: left;
	color: var(--muted);
	background: transparent;
}

table.compare tbody tr td:first-child {
	background: #f7fafb;
	border-right: 1px solid var(--border);
}

/* first column (labels) */
.label-col {
	width: 220px;
	font-weight: 700;
	color: #0b2530;
	background: #ffffff;
	border-right: 1px solid var(--border);
}

/* plan columns */
.plan-col {
	width: calc((100% - 220px) / 3);
	color: #0b2530;
}

.small-note {
	font-size: 13px;
	color: var(--muted);
	padding: 12px 20px;
	background: #fcfeff;
	border-top: 1px solid var(--border);
}

/* Responsive: stack on small screens */
@media (max-width: 880px) {
	.compare-head {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	table.compare thead {
		display: none;
	}
	table.compare thead th,
	table.compare tbody td {
		padding: 10px;
	}
	.label-col {
		display: block;
		width: 100%;
		border-right: none;
		font-weight: 700;
		color: #0b2530;
	}
	.plan-col {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--border);
		color: #0b2530;
	}
	table.compare tbody tr td {
		display: block;
	}
	table.compare tbody tr td:nth-child(2)::before {
		content: "Personal: ";
		font-weight: 700;
		color: var(--muted);
	}
	table.compare tbody tr td:nth-child(3)::before {
		content: "Profesional: ";
		font-weight: 700;
		color: var(--muted);
	}
	table.compare tbody tr td:nth-child(4)::before {
		content: "Negocios: ";
		font-weight: 700;
		color: var(--muted);
	}
}

/* Helpful micro styling for explanations */
.explain {
	font-size: 13px;
	color: var(--muted);
	margin-top: 6px;
}
.ok {
	color: #0b7a78;
	font-weight: 700;
}
.warn {
	color: #b45309;
	font-weight: 700;
}

.section-heading {
	font-size: 48px !important;
	line-height: 48px !important;
	font-weight: 700 !important;
}

@media (max-width: 767px) {
	h2.section-heading {
		font-size: 26px !important;
		line-height: 26px !important;
	}
	.section-subheading {
		font-size: 18px !important;
		line-height: 18px !important;
	}
	.hosting-banner__left {
		flex: 1 1 0px !important;
	}
}

/* Hosting Banner Styles - Adapted to Site Theme */

/* Reset pequeño para este bloque */
.hosting-banner {
	box-sizing: border-box;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color: var(--accent);
	background-color: #f7fafb;
	border-radius: 15px;
	margin-bottom: 60px;
	box-shadow: 0 6px 22px rgba(7, 18, 38, 0.08);
}

/* Contenedor principal */
.hosting-banner__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 48px 6%;
	background: var(--bg);
	border-top: 4px solid transparent;
}

/* Columna izquierda (texto) */
.hosting-banner__left {
	flex: 1 1 540px;
	max-width: 720px;
}

.hosting-banner__eyebrow {
	color: var(--accent-2);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 8px;
	letter-spacing: 0.2px;
}

/* Título grande */
.hosting-banner__title {
	font-size: 48px;
	line-height: 1.02;
	margin: 0 0 18px 0;
	font-weight: 800;
	color: var(--accent);
	text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Texto descriptivo */
.hosting-banner__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
	margin-bottom: 18px;
}

/* Lista de features */
.hosting-banner__features {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 18px 0 24px 0;
	list-style: none;
	padding: 0;
}

.hosting-banner__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 200px;
	font-size: 14px;
	color: var(--accent);
}

/* Check icon simple */
.hosting-banner__check {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--accent-2), #0d8b55);
	color: white;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(23, 162, 184, 0.08);
}

/* CTA */
.hosting-banner__cta-row {
	display: flex;
	align-items: center;
	gap: 18px;
}
.hosting-banner__btn {
	display: inline-block;
	background: var(--accent-2);
	color: #fff;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(23, 162, 184, 0.18);
}
.hosting-banner__hint {
	font-size: 13px;
	color: var(--muted);
}

/* Columna derecha (ilustración) */
.hosting-banner__right {
	flex: 0 0 460px;
	max-width: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Card/illustration container (puedes reemplazar con imagen SVG/PNG) */
.hosting-illustration {
	width: 100%;
	max-width: 460px;
	border-radius: 12px;
	/* border: 3px solid var(--accent-2);
  padding: 20px;
  box-shadow: 0 8px 30px rgba(7, 18, 38, 0.06);
  background: linear-gradient(180deg, #f7fdf8, #eaf8ef); */
	position: relative;
	overflow: visible;
}

/* Placeholder image de ejemplo: ajuste por variable CSS */
.hosting-illustration__img {
	width: 100%;
	/*height: 260px;*/
	background-image: var(--illustration-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 8px;
}

/* Soporta también cuando se inserta un <img> en lugar de usar background-image */
.hosting-illustration__img[src] {
	background-image: none;
	background: transparent;
	display: block;
	object-fit: contain;
}

/* Figura de personaje (opcional) - usamos pseudo-elemento para efecto tirando del medidor */
.hosting-illustration__rope {
	position: absolute;
	right: 16px;
	bottom: -14px;
	width: 120px;
	height: 160px;
	background-image: url(""); /* deja vacío o pón tu SVG */
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Responsive */
@media (max-width: 980px) {
	.hosting-banner__wrap {
		padding: 36px 5%;
		gap: 20px;
		flex-direction: column-reverse;
	}
	.hosting-banner__right {
		width: 100%;
		max-width: 720px;
		flex: none;
	}
	.hosting-banner__left {
		text-align: left;
		max-width: none;
	}
	.hosting-banner__title {
		font-size: 36px;
	}
	.hosting-illustration__img {
		height: 220px;
	}
}

@media (max-width: 520px) {
	.hosting-banner__title {
		font-size: 26px;
	}
	.hosting-banner__desc {
		font-size: 14px;
	}
	.hosting-banner__features li {
		min-width: 140px;
		font-size: 13px;
	}
	.hosting-banner__wrap {
		padding: 24px 4%;
	}
}