/* =========================================================
   Páginas de detalle de un diseño (estructura común)
   Primera: Sitio Web Emprendedor. Lista en inc/config.php → paginas_detalle.
   Colores, íconos y botones: assets/css/tc-nuevo.css
   ========================================================= */

/* ---------- Banner ---------- */
.tc-dhero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 76px;
	background: linear-gradient(135deg, var(--tc-pet-900) 0%, var(--tc-pet-800) 55%, var(--tc-pet-700) 100%);
	border-bottom: 4px solid var(--tc-pet-linea);
	color: #ffffff;
}
.tc-dhero::before,
.tc-dhero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.tc-dhero::before {
	right: -120px;
	top: -160px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(185, 21, 27, .45) 0%, transparent 65%);
	animation: tc-orb1 9s ease-in-out infinite alternate;
}
.tc-dhero::after {
	left: -160px;
	bottom: -220px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(56, 189, 248, .22) 0%, transparent 65%);
	animation: tc-orb2 11s ease-in-out infinite alternate;
}
@keyframes tc-orb1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes tc-orb2 { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, -30px); } }

.tc-dhero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 48px;
	align-items: center;
	max-width: var(--tc-ancho);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}
/* Trama de puntos */
.tc-dhero-inner::before {
	content: "";
	position: absolute;
	inset: -72px -100vw -76px;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
	pointer-events: none;
}
.tc-dhero .tc-kicker { color: var(--tc-acento-suave); }
.tc-dhero .tc-kicker::before { background: var(--tc-acento-suave); }
:is(.entry-content, .is-root-container) .tc-dhero-title {
	margin: 0 0 16px;
	font-size: 50px;
	line-height: 1.08;
	font-weight: 400;
	color: #ffffff;
}
.tc-dhero-title strong {
	font-weight: 600;
	background: linear-gradient(90deg, #E8323A, #FF5A3C);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
:is(.entry-content, .is-root-container) .tc-dhero-intro {
	margin: 0 0 26px;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .75);
}
.tc-dhero-chips { display: flex; flex-wrap: nowrap; gap: 8px; }
:is(.entry-content, .is-root-container) .tc-dhero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	white-space: nowrap;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
}
.tc-dhero-chip::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: var(--tc-acento-suave);
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
/* Tarjeta de precio (mismo estilo que "Habla directo" de Contacto) */
.tc-pcard {
	position: relative;
	padding: 38px 28px 28px;
	background: #F2F2F2;
	border: 1px solid rgba(13, 39, 48, .10);
	border-radius: 24px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	color: var(--tc-pet-800);
	animation: tc-floaty 6s ease-in-out infinite;
}
@keyframes tc-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
:is(.entry-content, .is-root-container) .tc-pcard p { margin: 0; }
:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-kicker {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tc-acento);
}
:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-price {
	font-family: var(--tc-fuente-titulos);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--tc-pet-800);
}
.tc-pcard-price span { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--tc-acento); }
:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-note {
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(13, 39, 48, .10);
	font-size: 14px;
	color: #4B5B62;
}
.tc-pcard-note::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: var(--tc-acento);
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-btn + .tc-pcard-btn { margin-top: 12px; }
.tc-pcard-btn a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 54px;
	padding: 0 48px 0 20px;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
	transition: transform .15s ease;
}
.tc-pcard-btn[class*="tc-ico-"] a::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
.tc-pcard-btn a::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-pcard-btn a:hover { transform: translateY(-2px); }
:is(.entry-content, .is-root-container) .tc-pcard-btn a,
:is(.entry-content, .is-root-container) .tc-pcard-btn a:hover,
:is(.entry-content, .is-root-container) .tc-pcard-btn a:focus { color: #ffffff; }
.tc-pcard-btn--rojo a { background: var(--tc-acento-grad); box-shadow: 0 6px 14px rgba(185, 21, 27, .22); }
.tc-pcard-btn--rojo a:hover { background: var(--tc-acento-grad-hover); }
.tc-pcard-btn--wa a { background: var(--tc-wa-oscuro); box-shadow: 0 6px 14px rgba(18, 140, 69, .22); }
.tc-pcard-btn--wa a:hover { background: var(--tc-wa-hover); }

/* ---------- Secciones ---------- */
.tc-dsec { --tc-sombra: 0 12px 32px rgba(17, 24, 39, .12); --tc-sombra-hover: 0 18px 42px rgba(17, 24, 39, .17); }
/* Espacio entre el título de sección (sin bajada) y su contenido */
:is(.entry-content, .is-root-container) .tc-sec-title + :not(.tc-sec-lead):not(.tc-steps-lead) { margin-top: 26px; }
.tc-dsec { padding: 72px 0; background: #ffffff; }
.tc-dsec--gris { background: var(--tc-c-gris); }
.tc-dsec--suave { background: linear-gradient(180deg, #F7F8FB 0%, #ffffff 100%); }
.tc-dsec-inner { max-width: var(--tc-ancho); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
.tc-grid2, .tc-grid3, .tc-grid4 { display: grid; gap: 20px; }
.tc-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.tc-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(.entry-content, .is-root-container) .tc-grid2 > *, :is(.entry-content, .is-root-container) .tc-grid3 > *, :is(.entry-content, .is-root-container) .tc-grid4 > * { margin: 0; }

/* ¿Para quién es?: imagen del diseño a la izquierda y las 4 tarjetas (2 × 2) a la derecha */
.tc-pqe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
:is(.entry-content, .is-root-container) .tc-pqe-img { margin: 0; }
.tc-pqe-img img { display: block; width: 100%; max-width: 550px; height: auto; aspect-ratio: 550 / 300; margin: 0 auto; object-fit: contain; }
.tc-pqe .tc-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tarjetas con ícono relleno (mismo estilo que los datos de Contacto):
   tarjeta blanca + cuadro con degradé rojo + ícono blanco */
.tc-tcard,
.tc-ben {
	position: relative;
	padding: 92px 22px 22px;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 18px;
	box-shadow: var(--tc-sombra);
	transition: transform .2s ease, box-shadow .2s ease;
}
.tc-tcard:hover,
.tc-ben:hover { transform: translateY(-3px); box-shadow: var(--tc-sombra-hover); }
.tc-tcard::before,
.tc-ben::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 22px;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--tc-acento-grad);
	box-shadow: 0 8px 18px var(--tc-acento-sombra);
}
.tc-tcard::after,
.tc-ben::after {
	content: "";
	position: absolute;
	left: 37px;
	top: 37px;
	width: 22px;
	height: 22px;
	background: #ffffff;
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
:is(.entry-content, .is-root-container) .tc-tcard-title { margin: 0 0 6px; font-size: 19px; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-ben-title { margin: 0 0 6px; font-size: 17px; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-tcard-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tc-c-texto); }
:is(.entry-content, .is-root-container) .tc-ben-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tc-c-texto); }
.tc-ben-ctas { padding-top: 32px; }

/* Qué incluye / no incluye */
.tc-incluye-col { display: grid; gap: 24px; }
/* Dos filas de cajas (Tienda Online: diseño + tienda arriba, hosting + no incluye abajo) */
:is(.entry-content, .is-root-container) .tc-incluye + .tc-incluye { margin-top: 24px; }
.tc-box--no .tc-box-title + .tc-nochips { padding-top: 22px; }
.tc-box {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 18px;
	box-shadow: var(--tc-sombra);
}
/* Cabecera suave de cada tarjeta: misma altura en todas, así los títulos quedan alineados */
:is(.entry-content, .is-root-container) .tc-box-title {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 84px;
	margin: 0;
	padding: 0 28px 0 88px;
	background: #F6F7F9;
	border-bottom: 1px solid #ECEEF2;
	font-size: 21px;
	color: var(--tc-c-navy);
	box-sizing: border-box;
}
.tc-box-title::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 14px;
	background: var(--tc-acento-grad);
	box-shadow: 0 6px 14px var(--tc-acento-sombra);
}
.tc-box-title::after {
	content: "";
	position: absolute;
	left: 40px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #ffffff;
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
.tc-box .tc-checks { padding: 22px 28px 26px !important; }
.tc-box--no { background: #F2F2F2; border-color: rgba(13, 39, 48, .10); }
:is(.entry-content, .is-root-container) .tc-box--no .tc-box-title { background: #E8EBEE; border-bottom-color: #DDE1E5; }
:is(.entry-content, .is-root-container) .tc-box-note { margin: 0; padding: 18px 28px 0; font-size: 14px; color: var(--tc-c-texto); }
.tc-box--no .tc-nochips { padding: 14px 28px 26px; }
.tc-nochips { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.entry-content, .is-root-container) .tc-nochip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	background: #ffffff;
	border: 1px solid #E3E7EE;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tc-c-navy);
}
.tc-nochip::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: var(--tc-c-navy);
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}

/* Lista con check rojo */
:is(.entry-content, .is-root-container) ul.tc-checks {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: #2A3245;
}
:is(.entry-content, .is-root-container) ul.tc-checks li { display: flex; gap: 10px; margin: 0; }
.tc-checks li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	background: var(--tc-acento);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cómo trabajamos: línea de tiempo (horizontal en pantalla grande, vertical en celular) */
:is(.entry-content, .is-root-container) .tc-steps-lead { margin: 0 auto 48px; max-width: 720px; text-align: center; font-size: 16px; color: var(--tc-c-texto); }
.tc-steps-lead strong { color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) ol.tc-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tc-paso;
}
/* Línea fina que une los círculos */
:is(.entry-content, .is-root-container) ol.tc-steps::before {
	content: "";
	position: absolute;
	top: 19px;
	left: calc(100% / 14);
	right: calc(100% / 14);
	height: 2px;
	background: #E3E7EE;
}
:is(.entry-content, .is-root-container) ol.tc-steps li {
	position: relative;
	margin: 0;
	padding: 128px 4px 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='16' fill='%23FCEBEC'/%3E%3C/svg%3E") center 64px / 56px 56px no-repeat;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	color: var(--tc-c-texto);
	counter-increment: tc-paso;
}
.tc-steps li strong { display: block; font-weight: 600; color: var(--tc-c-navy); }
.tc-steps li span { display: block; }
/* Círculo numerado */
.tc-steps li::before {
	content: counter(tc-paso);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border-radius: 50%;
	background: var(--tc-acento);
	box-shadow: 0 0 0 6px #ffffff;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}
/* Ícono lineal sobre fondo rojo muy claro */
.tc-steps li::after {
	content: "";
	position: absolute;
	top: 80px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	background: var(--tc-acento);
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}

/* Badge tipo píldora, centrado sobre el borde superior de la tarjeta (Pagos y Tu caso) */
.tc-pago, .tc-opcion { position: relative; text-align: center; }
/* En la tarjeta de precio del hero el badge es un poco más ancho */
:is(.entry-content, .is-root-container) .tc-pcard .tc-badge {
	padding: 6px 14px;
	background: #FFFFFF;
	border: 1px solid rgba(13, 39, 48, .08);
	font-size: 12px;
	letter-spacing: .05em;
	color: #FF4545;
	box-shadow: 0 4px 12px rgba(7, 19, 24, .16);
}
/* Punto separador entre "PAGO ÚNICO" y "SIN MENSUALIDADES" */
.tc-badge-sep { display: inline-block; margin: 0 .35em; font-weight: 700; transform: scale(1.3); }
:is(.entry-content, .is-root-container) .tc-badge {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	padding: 7px 18px;
	transform: translate(-50%, -50%);
	background: var(--tc-acento);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(17, 24, 39, .14);
}
:is(.entry-content, .is-root-container) .tc-badge--oscuro { background: #333333; }
/* Más aire entre el título de la sección y los badges */
:is(.entry-content, .is-root-container) .tc-sec-title + .tc-grid3:has(.tc-badge) { margin-top: 44px; }

/* Pagos */
.tc-pago {
	padding: 38px 28px 28px;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 18px;
	box-shadow: var(--tc-sombra);
}
:is(.entry-content, .is-root-container) .tc-pago p { margin: 0; }
:is(.entry-content, .is-root-container) .tc-pago-label { margin-bottom: 10px !important; font-size: 14px; font-weight: 800; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-acento); }
:is(.entry-content, .is-root-container) .tc-pago-monto { margin-bottom: 8px !important; font-family: var(--tc-fuente-titulos); font-size: 34px; font-weight: 700; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-pago-item { margin-bottom: 4px !important; font-size: 16px; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-pago-item + .tc-pago-nota { margin-top: 4px !important; }
:is(.entry-content, .is-root-container) .tc-pago-nota { font-size: 14px; color: var(--tc-c-texto); }
:is(.entry-content, .is-root-container) .tc-pago-formas { margin: 0; padding-top: 26px; text-align: center; font-size: 17px; color: var(--tc-c-texto); }
.tc-pago-formas strong { color: var(--tc-c-navy); }

/* Tu caso */
.tc-opcion { padding: 38px 26px 26px; background: #ffffff; border: 1px solid #E5E7EB; border-radius: 18px; box-shadow: var(--tc-sombra); }
.tc-opcion--destacada { border: 2px solid var(--tc-acento); }
:is(.entry-content, .is-root-container) .tc-opcion-title { margin: 0 0 10px; font-size: 19px; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-opcion-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tc-c-texto); }

/* ---------- Tu caso: ¿Ya tienes hosting o dominio? (componente común de las páginas de diseños) ----------
   Cada tarjeta muestra Hosting y Dominio: gris + check = ya lo tiene; rojo + "+" = lo proporcionamos. */
.tc-tucaso .tc-grid3 { align-items: stretch; }
.tc-tucaso .tc-opcion { display: flex; flex-direction: column; }
.tc-servicios { display: flex; justify-content: center; gap: 28px; padding: 6px 0 18px; }
:is(.entry-content, .is-root-container) .tc-serv {
	position: relative;
	margin: 0;
	padding: 64px 0 0;
	min-width: 64px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='16' fill='%23F1F2F4'/%3E%3C/svg%3E") center top / 56px 56px no-repeat;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #333333;
}
:is(.entry-content, .is-root-container) .tc-serv--provee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='16' fill='%23FFF0F0'/%3E%3C/svg%3E"); color: #FF4545; }
/* Ícono lineal (Lucide) */
.tc-serv::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	background: currentColor;
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
/* Indicador: check (ya lo tiene) o + (lo proporcionamos) */
.tc-serv::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23333333' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m6.2 10.2 2.5 2.5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-serv--provee::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23FF4545' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M10 6.2v7.6M6.2 10h7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Leyenda bajo las tarjetas */
.tc-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-top: 28px; }
:is(.entry-content, .is-root-container) .tc-ley { position: relative; margin: 0; padding-left: 26px; font-size: 14px; font-weight: 600; color: var(--tc-c-navy); }
.tc-ley::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23333333' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m6.2 10.2 2.5 2.5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tc-ley--provee::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23FF4545' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M10 6.2v7.6M6.2 10h7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tc-ley strong { color: var(--tc-c-navy); }

/* Trabajos realizados */
.tc-works { gap: 28px; }
.tc-work {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 18px;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, .5);
	text-align: center;
	transition: transform .2s ease;
}
.tc-work:hover { transform: translateY(-3px); }
/* Todas las imágenes a la misma altura, sin franja de fondo */
:is(.entry-content, .is-root-container) .tc-work-img { margin: 0; border-bottom: 1px solid #ECEEF2; }
:is(.entry-content, .is-root-container) .tc-work-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top center; }
.tc-work-body { padding: 18px 20px 22px; }
:is(.entry-content, .is-root-container) .tc-work-title { margin: 0 0 2px; font-size: 18px; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-work-rubro { margin: 0 0 8px; font-size: 14px; color: var(--tc-c-texto); }
:is(.entry-content, .is-root-container) .tc-work-link { margin: 0; font-size: 14px; font-weight: 600; }
:is(.entry-content, .is-root-container) .tc-work-link a { color: var(--tc-acento); text-decoration: none; }
:is(.entry-content, .is-root-container) .tc-work-link a:hover { text-decoration: underline; }

/* Trabajos y opiniones */
.tc-trabajos-cta { padding-top: 28px; }

/* Cierre */
.tc-cierre {
	position: relative;
	overflow: hidden;
	padding: 48px 28px;
	background: linear-gradient(135deg, var(--tc-pet-900) 0%, var(--tc-pet-800) 55%, var(--tc-pet-700) 100%);
	border-radius: 24px;
	text-align: center;
	color: #ffffff;
	box-shadow: var(--tc-sombra);
}
.tc-cierre::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -180px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(185, 21, 27, .40) 0%, transparent 65%);
	pointer-events: none;
}
.tc-cierre > *, .tc-cierre > .wp-block-group__inner-container > * { position: relative; }
:is(.entry-content, .is-root-container) .tc-cierre-title { margin: 0 0 12px; font-size: 36px; font-weight: 600; color: #ffffff; }
:is(.entry-content, .is-root-container) .tc-cierre-text { margin: 0 auto 28px; max-width: 660px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

/* Medios de pago (bajo "Formas de pago") */
.tc-pagos-medios { padding-top: 26px; text-align: center; }
:is(.entry-content, .is-root-container) .tc-pagos-medios .tc-pago-formas { padding-top: 0; }
.tc-pagos-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; padding-top: 18px; }
:is(.entry-content, .is-root-container) .tc-pago-logo { margin: 0; }
.tc-pagos-logos .tc-pago-logo img { display: block; width: auto !important; height: 46px !important; max-width: none; }
.tc-pagos-logos .tc-pago-logo--transf img { height: 72px !important; }

/* Precio + tarjetas aceptadas: el bloque mide lo mismo que el precio,
   y las tarjetas nunca superan ese ancho */
.tc-pcard-pricebox { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; padding-bottom: 18px; }
:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-pay { align-self: stretch; padding-top: 12px; line-height: 0; }
.tc-pcard-pay img { display: block; width: 0; min-width: 100%; max-width: 100%; height: auto; }

/* ---------- Ventanas emergentes ----------
   Bloques Grupo con la clase tc-popup y un anclaje HTML (id). Los abre assets/js/tc-popup.js */
.tc-popup { display: none; }
.tc-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(7, 19, 24, .62);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}
.tc-popup-overlay[hidden] { display: none; }
html.tc-popup-abierto { overflow: hidden; }
.tc-popup-overlay .tc-popup.is-open {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	width: 100%;
	max-width: 960px;
	max-height: 92vh;
	overflow: auto;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	outline: none;
	animation: tc-pop-in .2s ease-out;
}
@keyframes tc-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tc-popup > .wp-block-group__inner-container { display: contents; }
.tc-popup-x {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #ffffff;
	border: 1px solid #E3E7EE;
	border-radius: 50%;
	color: var(--tc-c-navy);
	cursor: pointer;
}
.tc-popup-x:hover { background: #F3F6F8; color: var(--tc-c-navy); }
.tc-popup-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tc-popup-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 36px 28px;
	background: #F3F6F8;
	text-align: center;
}
:is(.entry-content, .is-root-container) .tc-popup-img { margin: 0; }
.tc-popup-img img { display: block; width: 150px; height: auto; }
:is(.entry-content, .is-root-container) .tc-popup-caption { margin: 0; font-family: var(--tc-fuente-titulos); font-size: 16px; font-weight: 600; color: var(--tc-c-navy); }
.tc-popup-body { padding: 36px 34px; }
:is(.entry-content, .is-root-container) .tc-popup-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-acento); }
:is(.entry-content, .is-root-container) .tc-popup-title { margin: 0 0 14px; padding-right: 36px; font-size: 27px; line-height: 1.2; font-weight: 700; color: var(--tc-c-navy); }
:is(.entry-content, .is-root-container) .tc-popup-text { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--tc-c-texto); }
:is(.entry-content, .is-root-container) .tc-popup-text a { color: var(--tc-acento); font-weight: 600; }
:is(.entry-content, .is-root-container) ul.tc-popup-list { display: grid; gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 15px; line-height: 1.55; color: #2A3245; }
:is(.entry-content, .is-root-container) ul.tc-popup-list li { position: relative; margin: 0; padding-left: 32px; }
.tc-popup-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background: var(--tc-acento);
	-webkit-mask: var(--tc-ico) center / contain no-repeat;
	        mask: var(--tc-ico) center / contain no-repeat;
}
.tc-popup--reseller .tc-popup-list li::before { background: #DD7A12; }
.tc-popup--reseller .tc-popup-img img { width: 240px; max-width: 100%; }
/* Logo de Tecreamos.cl bajo "Datacenter en Chile" */
.tc-popup-logo img { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto; }
/* El logo va pegado a "Datacenter en Chile" (el texto se refiere al logo) */
:is(.entry-content, .is-root-container) .tc-popup-media .tc-popup-logo { margin-top: -8px; }
.tc-popup-list strong { color: var(--tc-c-navy); }

/* En el editor de bloques los popups se ven al final de la página, para editarlos */
.is-root-container .tc-popup {
	display: grid;
	grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	margin: 40px auto !important;
	max-width: 960px !important;
	border: 2px dashed #C9CFD9;
	border-radius: 20px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.tc-popup-overlay { padding: 10px; align-items: flex-end; }
	.tc-popup-overlay .tc-popup.is-open,
	.is-root-container .tc-popup { grid-template-columns: minmax(0, 1fr); }
	.tc-popup-media { padding: 24px 20px; gap: 10px; }
	.tc-popup-img img { width: 90px; }
	.tc-popup--reseller .tc-popup-img img { width: 200px; }
	.tc-popup-logo img { width: 180px; }
	.tc-popup-body { padding: 26px 20px; }
	:is(.entry-content, .is-root-container) .tc-popup-title { font-size: 22px; }
	.tc-pagos-logos { gap: 16px 28px; }
	.tc-pagos-logos .tc-pago-logo img { height: 34px !important; }
	.tc-pagos-logos .tc-pago-logo--transf img { height: 56px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.tc-popup-overlay .tc-popup.is-open { animation: none; }
}

/* =========================================================
   RESPONSIVO (≤380 · ≤767 · 768–1024 · 1025–1366 · ≥1367)
   ========================================================= */
@media (max-width: 1366px) {
	:is(.entry-content, .is-root-container) .tc-dhero-title { font-size: 46px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	.tc-dhero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; }
	.tc-dhero-chips { gap: 6px; }
	:is(.entry-content, .is-root-container) .tc-dhero-chip { padding: 7px 10px; font-size: 12.5px; }
	:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-price { font-size: 48px; }
}
@media (max-width: 1024px) {
	.tc-dhero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.tc-pcard { max-width: 520px; }
	.tc-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-pqe { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.tc-grid3.tc-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tc-dhero { padding: 48px 0 52px; }
	:is(.entry-content, .is-root-container) .tc-dhero-title { font-size: 36px; }
	.tc-dhero-chips { flex-wrap: wrap; }
	:is(.entry-content, .is-root-container) .tc-dhero-chip { padding: 7px 10px; font-size: 12.5px; }
	.tc-pcard { padding: 24px 20px 22px; }
	:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-price { font-size: 46px; }
	.tc-dsec { padding: 56px 0; }
	.tc-grid2, .tc-grid3, .tc-grid3.tc-works { grid-template-columns: minmax(0, 1fr); }
	/* Imagen arriba y carrusel debajo, sin espacios extra entre el aviso y las tarjetas */
	.tc-pqe { gap: 0; }
	:is(.entry-content, .is-root-container) .tc-pqe-img { margin-bottom: 24px; }
	/* Espacio para los badges que sobresalen de cada tarjeta */
	.tc-grid3:has(.tc-badge) { row-gap: 36px; }
	/* Línea de tiempo vertical */
	:is(.entry-content, .is-root-container) ol.tc-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 420px; margin-inline: auto; }
	:is(.entry-content, .is-root-container) ol.tc-steps::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
	:is(.entry-content, .is-root-container) ol.tc-steps li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 56px;
		padding: 0 0 0 128px;
		background-position: 60px center;
		text-align: left;
	}
	.tc-steps li strong, .tc-steps li span { display: inline; }
	.tc-steps li::before { top: 50%; left: 0; margin: -20px 0 0; }
	.tc-steps li::after { top: 50%; left: 76px; margin: -12px 0 0; }
	:is(.entry-content, .is-root-container) .tc-box-title { min-height: 76px; padding: 0 20px 0 76px; font-size: 19px; }
	.tc-box-title::before { left: 20px; }
	.tc-box-title::after { left: 32px; }
	.tc-box .tc-checks { padding: 20px 20px 22px !important; }
	:is(.entry-content, .is-root-container) .tc-box-note { padding: 16px 20px 0; }
	.tc-box--no .tc-nochips { padding: 12px 20px 22px; }
	:is(.entry-content, .is-root-container) .tc-cierre-title { font-size: 27px; }
	.tc-cierre { padding: 36px 20px; }
}
/* Carrusel en celular (Para quién es, Por qué elegirnos, Cómo trabajamos).
   El aviso y las flechas los agrega assets/js/tc-carrusel.js */
.tc-car-hint, .tc-car-nav { display: none; }
@media (max-width: 767px) {
	.tc-carrusel {
		display: flex;
		align-items: stretch;
		gap: 14px;
		margin: 0 -24px;
		padding: 18px 24px 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 24px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.tc-carrusel::-webkit-scrollbar { display: none; }
	.tc-carrusel > .wp-block-group__inner-container > *,
	.tc-carrusel > .tc-tcard, .tc-carrusel > .tc-ben {
		flex: 0 0 calc(100% - 48px);
		max-width: 400px;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		text-align: center;
		box-sizing: border-box;
	}
	/* Ícono y textos centrados */
	.tc-carrusel .tc-tcard::before, .tc-carrusel .tc-ben::before { left: 50%; margin-left: -26px; }
	.tc-carrusel .tc-tcard::after, .tc-carrusel .tc-ben::after { left: 50%; margin-left: -11px; }
	.tc-carrusel .tc-tcard, .tc-carrusel .tc-ben { padding: 96px 24px 28px; }

	.tc-car-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		margin: 0 auto 4px;
		font-size: 12px;
		font-weight: 700;
		color: var(--tc-c-texto);
	}
	.tc-car-finger { display: inline-flex; color: var(--tc-acento); animation: tc-swipe 1.6s ease-in-out infinite; }
	@keyframes tc-swipe { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(7px); } }
	.tc-car-finger svg, .tc-car-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.tc-car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
	.tc-car-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		background: var(--tc-acento);
		border: 1px solid var(--tc-acento);
		border-radius: 50%;
		color: #ffffff;
		box-shadow: 0 10px 22px rgba(185, 21, 27, .22);
		cursor: pointer;
		transition: background .2s, opacity .2s;
	}
	.tc-car-arrow:hover, .tc-car-arrow:focus { background: var(--tc-acento-hover); color: #ffffff; }
	.tc-car-arrow:disabled { background: #EEF0F3; border-color: #E0E3E8; color: #9AA1AC; box-shadow: none; cursor: default; }
	.tc-car-counter { min-width: 55px; text-align: center; font-size: 13px; font-weight: 600; color: var(--tc-c-texto); }
	.tc-car-counter strong { font-family: var(--tc-fuente-titulos); font-size: 15px; font-weight: 800; color: var(--tc-acento); }
}
@media (max-width: 380px) {
	.tc-carrusel { margin: 0 -16px; padding-inline: 16px; scroll-padding: 0 16px; }
}
@media (max-width: 380px) {
	.tc-dhero-inner, .tc-dsec-inner { padding-inline: 16px; }
	:is(.entry-content, .is-root-container) .tc-dhero-title { font-size: 30px; }
	:is(.entry-content, .is-root-container) .tc-pcard .tc-pcard-price { font-size: 40px; }
	.tc-pcard-btn a { padding: 0 44px 0 16px; font-size: 15px; }
	.tc-grid4 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.tc-dhero::before, .tc-dhero::after, .tc-pcard, .tc-car-finger { animation: none; }
	.tc-tcard, .tc-ben, .tc-work, .tc-pcard-btn a { transition: none; }
	.tc-tcard:hover, .tc-ben:hover, .tc-work:hover, .tc-pcard-btn a:hover { transform: none; }
}