/*
Theme Name:  ONControl (Kadence)
Theme URI:   https://www.oncontrol.com.mx/
Description: Tema hijo de Kadence con la identidad visual de ONControl.
Author:      ONControl
Template:    kadence
Version:     1.14.1
Requires PHP: 7.4
Text Domain: kadence-oncontrol
*/

/* ===== Tokens de marca ===== */
:root {
	--onc-navy: #112f51;
	--onc-navy-900: #041223;
	--onc-blue: #1e5a96;
	--onc-cyan: #00c8d7;
	--onc-cyan-700: #00838f;
	--onc-gray-50: #f5f8fb;
	--onc-gray-100: #e6eef6;
	--onc-radius: 12px;
	--onc-shadow: 0 1px 2px rgba(4, 18, 35, .06), 0 8px 24px rgba(4, 18, 35, .08);
}

/* ===== Hero / encabezados de pagina ===== */
.onc-hero {
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(0, 200, 215, .25), transparent 60%),
		linear-gradient(135deg, var(--onc-navy-900) 0%, var(--onc-navy) 55%, var(--onc-blue) 100%);
	color: #fff;
}
.onc-hero :where(h1, h2, h3, h4, p, li) { color: #fff; }
.onc-hero .onc-eyebrow { color: var(--onc-cyan); }
.onc-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--onc-cyan-700);
	margin-bottom: .5rem;
}
.onc-hero .onc-lead { color: rgba(255, 255, 255, .85); }
.onc-lead { font-size: 1.15rem; line-height: 1.6; }

/* ===== Tarjetas ===== */
.onc-card {
	background: #fff;
	border: 1px solid var(--onc-gray-100);
	border-radius: var(--onc-radius);
	box-shadow: var(--onc-shadow);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.onc-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(4,18,35,.08), 0 14px 32px rgba(4,18,35,.12); }
.onc-card h3 { margin-top: .5rem; font-size: 1.2rem; }
.onc-card img { max-height: 96px; width: auto; }
.onc-card .wp-block-image { margin-bottom: .25rem; }

/* Columnas con tarjetas de la misma altura; botones alineados abajo */
.onc-cards > .wp-block-column { display: flex; flex-direction: column; }
.onc-cards > .wp-block-column > .onc-card { flex: 1; display: flex; flex-direction: column; }
.onc-card > .wp-block-group__inner-container { flex: 1; display: flex; flex-direction: column; }
.onc-card > .wp-block-group__inner-container > .wp-block-buttons:last-child { margin-top: auto; padding-top: .5rem; }

/* ===== Lista con palomitas ===== */
.onc-check, .entry-content .onc-check { list-style: none; padding-left: 0; margin-left: 0; }
.onc-card .onc-check li { font-size: .95rem; }
.onc-check li {
	position: relative;
	padding: .35rem 0 .35rem 2rem;
}
.onc-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--onc-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ===== Tablas comparativas (Paquetes / Facturalizate) ===== */
.onc-tabla { overflow-x: auto; margin-bottom: 2rem; }
.wp-block-table.onc-tabla table {
	background: #fff;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--onc-gray-100);
	border-radius: var(--onc-radius);
	overflow: hidden;
	font-size: .95rem;
}
.onc-tabla table:has(th:nth-child(4)) { min-width: 640px; }
.wp-block-table.onc-tabla th:first-child, .wp-block-table.onc-tabla td:first-child { width: 40%; }
.wp-block-table.onc-tabla :where(th, td) { border: 0; }
.onc-tabla thead th {
	background: var(--onc-navy);
	color: #fff;
	font-weight: 600;
	text-align: center;
	border: 0;
	padding: .8rem .6rem;
}
.onc-tabla thead th:first-child { text-align: left; }
.wp-block-table.onc-tabla td { border-top: 1px solid var(--onc-gray-100); padding: .6rem; text-align: center; }
.onc-tabla td:first-child { text-align: left; }
.wp-block-table.onc-tabla tbody tr:nth-child(even) td { background: var(--onc-gray-50); }
.wp-block-table.onc-tabla tfoot td { background: var(--onc-gray-100); font-weight: 700; border-top: 2px solid var(--onc-navy); }
.onc-si { color: var(--onc-cyan-700); font-weight: 700; }
.onc-no { color: #b8c2cc; }
.onc-tabla figcaption { text-align: left; font-size: .85rem; }

/* Movil: las tablas de 5 columnas se desplazan de lado con la primera columna fija y un aviso. */
@media (max-width: 781px) {
	.onc-tabla:has(th:nth-child(4))::before {
		content: "Desliza para ver los 4 paquetes \2192";
		display: block;
		position: sticky;
		left: 0;
		margin-bottom: .4rem;
		font-size: .8rem;
		color: var(--onc-gray-500, #6b7785);
	}
	.onc-tabla table:has(th:nth-child(4)) { min-width: 540px; overflow: visible; font-size: .85rem; }
	.onc-tabla table:has(th:nth-child(4)) :where(th, td):first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 34%;
		box-shadow: 2px 0 4px rgba(4, 18, 35, .08);
	}
	.wp-block-table.onc-tabla table:has(th:nth-child(4)) tbody tr:nth-child(odd) td:first-child { background: #fff; }
	.wp-block-table.onc-tabla table:has(th:nth-child(4)) :where(thead th, td) { padding-left: .45rem; padding-right: .45rem; }
}

/* ===== Galeria de logos de clientes ===== */
.onc-logos {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--onc-logos-col, 6), minmax(0, 1fr));
}
.onc-logos li {
	background: #fff;
	border: 1px solid var(--onc-gray-100);
	border-radius: 10px;
	padding: .75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
}
.onc-logos img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .8;
	transition: filter .2s ease, opacity .2s ease;
}
.onc-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 1024px) { .onc-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .onc-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .onc-logos li { padding: .4rem; border-radius: 8px; } }

/* ===== Video responsivo ===== */
.onc-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--onc-radius); }

/* ===== Contact Form 7 ===== */
.wpcf7 form p { margin-bottom: 1rem; }
.wpcf7 label { font-weight: 600; display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select { width: 100%; margin-top: .35rem; }
.wpcf7 textarea { min-height: 150px; }
.onc-mapa { width: 100%; }
.onc-mapa iframe { display: block; width: 100%; }

/* ===== Encabezado ===== */
.site-header .custom-logo { max-height: 56px; width: auto; }

/* ===== Pie de pagina ===== */
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--onc-cyan); }
.site-footer .widget-title,
.site-footer :where(h2, h3, h4) {
	color: #fff;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 1rem;
}
.site-footer .wp-block-list { list-style: none; margin-left: 0; }
.site-footer .wp-block-list li { padding: .2rem 0; }

/* ===== Botones ===== */
.wp-block-button__link, .header-button, .wpcf7-submit { font-weight: 600; }
.onc-footer-contacto p { margin-bottom: .35rem; }

/* ===== Franja de contacto del pie (antes en la barra superior del encabezado) ===== */
.onc-contacto-franja { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin: 0; }
.onc-contacto-franja a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: #fff; text-decoration: none; }
.onc-contacto-franja a:hover { color: var(--onc-cyan); }
.onc-ico {
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	background: rgba(0, 200, 215, .14);
	position: relative;
}
.onc-ico::before {
	content: ""; position: absolute; inset: 9px;
	background: var(--onc-cyan);
	-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.onc-ico--tel  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.onc-ico--mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.onc-ico--wa   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.2 1.1z'/%3E%3C/svg%3E"); }
.site-top-footer-wrap .site-footer-row-container-inner { border-bottom: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 767px) {
	.onc-contacto-franja { justify-content: center; gap: .75rem 1.25rem; }
}

/* ===== Tarjetas con foto de encabezado (Soluciones) ===== */
.onc-card { overflow: hidden; }
.onc-card .onc-card__foto { margin: -28px -28px 1rem !important; }
.onc-card .onc-card__foto img {
	display: block;
	width: 100%;
	max-height: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top center;
	transition: transform .4s ease;
}
.onc-card:hover .onc-card__foto img { transform: scale(1.04); }
.onc-card .onc-card__foto--alta img { aspect-ratio: 16 / 10; object-position: center 30%; }
.onc-card .onc-card__foto--ilustracion {
	background:
		radial-gradient(300px 140px at 80% 0%, rgba(0, 200, 215, .3), transparent 70%),
		linear-gradient(135deg, var(--onc-navy-900), var(--onc-navy));
}
.onc-card .onc-card__foto--ilustracion img { object-fit: contain; padding: 18px; }
.onc-card:hover .onc-card__foto--ilustracion img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .onc-card .onc-card__foto img { transition: none; } .onc-card:hover .onc-card__foto img { transform: none; } }

/* ===== Medio circulo de la identidad ONControl (la "O" del logo, como en FondoClear.jpg) ===== */
.onc-hero { position: relative; overflow: hidden; isolation: isolate; }
.onc-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 50%;
	left: 0;
	height: 175%;
	aspect-ratio: 1;
	transform: translate(-56%, -50%);
	border-radius: 50%;
	/* interior un poco mas oscuro + aro azul acero claro, como en las piezas de diseno */
	background: radial-gradient(closest-side, rgba(4, 18, 35, .28) 0 61%, rgba(120, 165, 220, .30) 61.6% 99.4%, transparent 100%);
}
.onc-hero > .wp-block-group__inner-container,
.onc-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wp-block-cover.onc-hero > .wp-block-cover__image-background,
.wp-block-cover.onc-hero > .wp-block-cover__background { z-index: 0; }
.onc-carrusel--hero .onc-carrusel__controles { z-index: 3; }

/* Pie de pagina: aro tenue a la derecha */
.site-middle-footer-wrap { position: relative; overflow: hidden; }
.site-middle-footer-wrap::after {
	content: "";
	position: absolute;
	pointer-events: none;
	top: 50%;
	right: 0;
	height: 230%;
	aspect-ratio: 1;
	transform: translate(60%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, transparent 0 61%, rgba(120, 165, 220, .12) 61.6% 99.4%, transparent 100%);
}
.site-middle-footer-wrap .site-container { position: relative; z-index: 1; }

/* Movil: el aro mas contenido */
@media (max-width: 781px) {
	.onc-hero::after { height: 120%; transform: translate(-62%, -50%); }
}

/* ===== "Por que ONControl" (propuesta A, fondo blanco) ===== */
.onc-porque { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.onc-porque::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	top: 50%; left: 0; height: 150%; aspect-ratio: 1; transform: translate(-58%, -50%); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(74, 111, 163, .035) 0 61%, rgba(74, 111, 163, .09) 61.6% 99.4%, transparent 100%);
}
.onc-porque::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	top: -120px; right: -120px; width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 200, 215, .10), transparent 70%);
}
.onc-porque > .wp-block-group__inner-container { position: relative; z-index: 1; }
.onc-card--icono { border-radius: 18px; box-shadow: 0 2px 4px rgba(4, 18, 35, .04), 0 12px 30px rgba(4, 18, 35, .07); position: relative; }
.onc-card--icono h3 { font-size: 1.2rem; margin: 0 0 .35rem; }
.onc-card--icono p { margin: 0; }
.onc-card .onc-card-ico { margin: 0 0 18px !important; width: 56px; height: 56px; flex: none; align-self: flex-start; }
.onc-card .onc-card-ico img {
	width: 56px !important; height: 56px !important; max-width: none !important; max-height: none; padding: 14px; box-sizing: border-box; display: block;
	border-radius: 16px; background: rgba(0, 200, 215, .12);
}
.onc-card--dest { background: linear-gradient(135deg, rgba(0, 200, 215, .10), rgba(0, 200, 215, .02)), #fff; border-color: rgba(0, 200, 215, .45); }
.onc-card--dest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--onc-cyan); border-radius: 18px 0 0 18px; }
.onc-card--dest .onc-card-ico img { background: var(--onc-navy); }

/* Franja de cifras */
.onc-cifras {
	background: var(--onc-gray-50); border: 1px solid var(--onc-gray-100); border-radius: 18px;
	padding: 30px 20px; gap: 0 !important; margin-top: 1rem;
}
.onc-cifras > .wp-block-column + .wp-block-column { border-left: 1px solid var(--onc-gray-100); }
.onc-cifra { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--onc-navy); margin: 0 0 6px !important; }
.onc-cifra em { font-style: normal; color: var(--onc-cyan-700); }
.onc-cifra-txt { font-size: .9rem; margin: 0 !important; }
@media (max-width: 781px) {
	.onc-cifras { display: grid !important; grid-template-columns: 1fr 1fr; row-gap: 22px !important; }
	.onc-cifras > .wp-block-column + .wp-block-column { border-left: 0; }
	.onc-cifra { font-size: 2rem; }
}

/* ===== Franja de valores bajo el carrusel (Presentacion Corporativa) ===== */
.onc-valores { background: var(--onc-navy-900); border-top: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.onc-valores__lista {
	margin: 0; color: rgba(255, 255, 255, .8); font-weight: 700; font-size: 11.5px;
	letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
.onc-sep {
	display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin: 0 14px; vertical-align: middle;
	background: var(--onc-cyan); box-shadow: 0 0 8px var(--onc-cyan);
}
/* Desplazamiento continuo (el plugin duplica la lista); se detiene al pasar el puntero */
.onc-valores .onc-valores__lista { margin: 0 !important; }
.onc-valores .onc-valores__pista { display: flex; align-items: center; width: max-content; max-width: none !important; animation: onc-desplaza 50s linear infinite; }
.onc-valores .onc-valores__pista .onc-valores__lista { white-space: nowrap; flex: none; }
.onc-valores:hover .onc-valores__pista { animation-play-state: paused; }
@keyframes onc-desplaza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .onc-valores .onc-valores__pista { animation: none; } }

/* ===== Resultados con ONControl ===== */
.onc-resultados__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onc-resultados__lista li {
	position: relative; display: block; margin: 0; min-height: 66px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
	padding: 16px 18px 16px 66px; font-size: 15.5px; line-height: 1.4; color: rgba(255, 255, 255, .85);
}
.onc-resultados__lista li::before {
	content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
	background: rgba(0, 200, 215, .18) url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-ok-claro.svg") center / 18px no-repeat;
}
.onc-resultados__lista li strong { color: #fff; }
@media (max-width: 781px) { .onc-resultados__lista { grid-template-columns: 1fr; } }

/* Franja de contacto: icono de telefono con los dos numeros */
.onc-contacto-tel { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.onc-contacto-sep { color: rgba(255, 255, 255, .45); }
/* Cifras: 3 columnas tambien en movil */
@media (max-width: 781px) {
	.onc-cifras { grid-template-columns: repeat(3, 1fr); padding: 22px 8px; }
	.onc-cifra { font-size: 1.55rem; }
	.onc-cifra-txt { font-size: .78rem; }
}

/* ===== Etiquetas (funciones de cada modulo, valores) ===== */
.onc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .75rem 0 0 !important; }
.onc-chips span {
	font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--onc-navy);
	background: var(--onc-gray-50); border: 1px solid var(--onc-gray-100); border-radius: 20px; padding: 4px 10px;
}
.onc-chips--claro span {
	color: rgba(255, 255, 255, .85); background: transparent; border-color: rgba(255, 255, 255, .22);
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px;
}

/* ===== Facturacion segura (Facturalizate) ===== */
.onc-sellos { align-items: stretch !important; }
.onc-sellos > .wp-block-column:first-child { display: flex; flex-direction: column; justify-content: center; padding-right: 10px; }
.onc-sello { height: 100%; background: #fff; border: 1px solid var(--onc-gray-100); border-radius: 18px; box-shadow: 0 12px 30px rgba(4, 18, 35, .07); }
.onc-sello .onc-sello__ico { margin: 0 0 16px !important; width: 64px; }
.onc-sello .onc-sello__ico img { width: 64px !important; height: 64px !important; max-width: none !important; padding: 17px; box-sizing: border-box; border-radius: 50%; background: var(--onc-navy); display: block; }
.onc-sello h3 { font-size: 1.2rem; margin: 0 0 .35rem; }
.onc-sello__num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--onc-navy); margin: 0 0 6px !important; }
.onc-sello__num em { font-style: normal; color: var(--onc-cyan-700); }

/* ===== Que es ONControl? (Nosotros) ===== */
.onc-que .onc-que__visual { margin: 0 auto !important; }
.onc-que .onc-que__visual img { width: 260px; max-width: 100%; height: auto; display: block; }
@media (max-width: 781px) { .onc-que .onc-que__visual img { width: 160px; } }

/* ===== Paquetes: modelo "Planes 2026" ===== */
.onc-planes { --plan1: #9fb6d6; --plan2: #6f8fc0; --plan3: #4a6fa3; --plan4: var(--onc-navy); margin-bottom: 0; }
.wp-block-table.onc-planes table {
	border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
	border-collapse: separate; border-spacing: 0;
}
.wp-block-table.onc-planes th:first-child, .wp-block-table.onc-planes td:first-child { width: 36%; }
/* Pestanas de los planes */
.wp-block-table.onc-planes thead th { background: transparent; padding: 0 6px 12px; vertical-align: bottom; }
.onc-plan {
	display: block; background: #fff; color: var(--onc-navy); font-weight: 700; font-size: .95rem; text-align: center;
	border: 1px solid var(--onc-gray-100); border-top: 4px solid var(--plan1); border-radius: 10px; padding: 10px 6px;
	box-shadow: 0 4px 12px rgba(4, 18, 35, .06);
}
.onc-planes thead th:nth-child(3) .onc-plan { border-top-color: var(--plan2); }
.onc-planes thead th:nth-child(4) .onc-plan { border-top-color: var(--plan3); }
.onc-planes thead th:nth-child(5) .onc-plan { border-top-color: var(--plan4); }
/* Filas */
.wp-block-table.onc-planes tbody td,
.wp-block-table.onc-planes tbody tr:nth-child(even) td {
	background: #fff; border-top: 1px solid var(--onc-gray-100); padding: .55rem .6rem; font-size: .9rem; font-weight: 600; color: var(--onc-navy);
}
.wp-block-table.onc-planes tbody td:first-child,
.wp-block-table.onc-planes tbody tr:nth-child(even) td:first-child { font-weight: 400; color: #3b4a5c; }
.wp-block-table.onc-planes td small { display: block; font-size: .72rem; font-weight: 400; color: #7a8899; }
/* Fila de grupo (modulo) */
.wp-block-table.onc-planes tbody tr:has(.onc-grupo) td { background: #e9f0f8; border-top: 18px solid transparent; background-clip: padding-box; padding: .7rem .6rem; }
.wp-block-table.onc-planes tbody tr:first-child:has(.onc-grupo) td { border-top-width: 0; }
.onc-grupo { font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--onc-navy); }
/* Puntos y guiones */
.onc-pt, .onc-no { display: inline-block; vertical-align: middle; }
.onc-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--plan3); }
tr:has(.onc-grupo) .onc-pt { width: 14px; height: 14px; background: var(--onc-navy); box-shadow: 0 0 0 4px rgba(0, 200, 215, .18); }
.onc-no { width: 14px; height: 2px; border-radius: 2px; background: #c3cfdd; }
/* Costo de licencia base (pie de la tabla "Incluye") */
.wp-block-table.onc-planes tfoot td {
	background: var(--onc-navy); color: #fff;
	border-top: 18px solid transparent; background-clip: padding-box;
	font-size: 1.45rem; font-weight: 800; padding: 1.1rem .6rem;
}
.wp-block-table.onc-planes tfoot td:first-child { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 14px 0 0 14px; }
.wp-block-table.onc-planes tfoot td:last-child { border-radius: 0 14px 14px 0; }
.wp-block-table.onc-planes tfoot td small { color: rgba(255, 255, 255, .7); text-transform: none; letter-spacing: 0; font-weight: 400; }
.onc-planes-nota { font-size: .85rem; color: #6b7785; margin-top: 1.5rem !important; }
/* Tarjetas de resumen: borde superior con el color de cada plan */
.onc-card--plan { border-top: 4px solid #9fb6d6; }
.onc-card--plan-2 { border-top-color: #6f8fc0; }
.onc-card--plan-3 { border-top-color: #4a6fa3; }
.onc-card--plan-4 { border-top-color: var(--onc-navy); }
@media (max-width: 781px) {
	.wp-block-table.onc-planes tbody tr:has(.onc-grupo) td:first-child { background: #e9f0f8; }
	.onc-plan { font-size: .78rem; padding: 8px 4px; }
	.wp-block-table.onc-planes tfoot td { font-size: 1.05rem; }
}
.wp-block-table.onc-planes th:first-child, .wp-block-table.onc-planes td:first-child { text-align: left !important; }
@media (max-width: 781px) { .wp-block-table.onc-planes table :where(thead th, tbody td, tfoot td) { padding-left: .6rem !important; padding-right: .5rem !important; } }
/* Adicionales: importes alineados a la derecha */
.wp-block-table.onc-planes--adicionales tbody td:not(:first-child) { text-align: right !important; padding-right: 2.25rem !important; font-variant-numeric: tabular-nums; }
@media (max-width: 781px) { .wp-block-table.onc-planes--adicionales tbody td:not(:first-child) { padding-right: .9rem !important; } }

/* ===== Soluciones: iconos originales en las tarjetas + circulo de soluciones ===== */
.onc-card .onc-card__foto--icono {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
	height: 150px; background: linear-gradient(180deg, #eef4fa, #e2ebf5); border-bottom: 3px solid var(--onc-cyan);
}
.onc-card .onc-card__foto--icono::before {
	content: ""; position: absolute; right: -60px; top: -60px; width: 170px; height: 170px; border-radius: 50%;
	border: 26px solid rgba(17, 47, 81, .06);
}
.onc-card .onc-card__foto--icono img {
	position: relative; width: auto !important; height: 88px !important; max-height: none; aspect-ratio: auto;
	object-fit: contain; padding: 0; transition: transform .3s ease;
}
.onc-card:hover .onc-card__foto--icono img { transform: scale(1.06); }
.onc-anillo { margin: 1.5rem auto 0 !important; }
.onc-anillo img { display: block; width: 520px; max-width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 781px) { .onc-card .onc-card__foto--icono { height: 120px; } .onc-card .onc-card__foto--icono img { height: 70px !important; } }

/* Imagenes con ancho fijado dentro de tarjetas: alto proporcional (antes se aplastaban con max-height) */
.onc-card .wp-block-image.is-resized img { height: auto !important; max-height: none; }
.onc-card .wp-block-image img { object-fit: contain; }

/* ===== Integraciones (pagina propia + bloque breve en Inicio y Soluciones) ===== */
/* Cifras sobre fondo oscuro */
.onc-cifras--oscuro { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); max-width: 1100px; margin-left: auto !important; margin-right: auto !important; }
.onc-cifras--oscuro > .wp-block-column + .wp-block-column { border-left-color: rgba(255, 255, 255, .12); }
.onc-hero .onc-cifras--oscuro .onc-cifra { color: #fff; }
.onc-hero .onc-cifras--oscuro .onc-cifra em { color: var(--onc-cyan); }
.onc-hero .onc-cifras--oscuro .onc-cifra-txt { color: rgba(255, 255, 255, .75); }
@media (min-width: 782px) { .onc-cifras--oscuro { display: grid !important; grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 781px) { .onc-cifras--oscuro { grid-template-columns: 1fr 1fr; } .onc-cifras--oscuro > .wp-block-column + .wp-block-column { border-left: 0; } }

/* Tarjeta de categoria: icono + titulo en una linea, descripcion y lista de integraciones */
.onc-cats { gap: 22px !important; margin-bottom: 22px !important; }
.onc-cats > .wp-block-column { display: flex; flex-direction: column; }
.onc-cats > .wp-block-column > .onc-cat { flex: 1; }
.onc-cat {
	background: #fff; border: 1px solid var(--onc-gray-100); border-radius: 18px; padding: 26px 28px !important;
	box-shadow: 0 2px 4px rgba(4, 18, 35, .04), 0 12px 30px rgba(4, 18, 35, .07);
}
.onc-cat > .wp-block-group__inner-container { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; }
.onc-cat > .wp-block-group__inner-container > * { grid-column: 1 / -1; margin-top: 0; }
.onc-cat > .wp-block-group__inner-container > .onc-cat__ico,
.onc-cat > .wp-block-group__inner-container > .onc-cat__titulo { grid-column: auto; grid-row: 1; margin: 0 !important; }
.onc-cat .onc-cat__ico img { width: 46px !important; height: 46px !important; max-width: none !important; padding: 11px; box-sizing: border-box; border-radius: 13px; background: var(--onc-navy); display: block; }
.onc-cat .onc-cat__titulo { font-size: 1.2rem; line-height: 1.3; color: var(--onc-navy); }
.onc-cat .onc-cat__desc { margin: 12px 0 14px !important; font-size: 14.5px; line-height: 1.55; }
.onc-cat__items { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.onc-cat__items li { margin: 0; padding: 9px 0; border-top: 1px solid var(--onc-gray-100); font-size: 14.5px; line-height: 1.35; }
.onc-cat__items li strong { color: var(--onc-navy); }
.onc-cat__items li span { display: block; font-size: 13px; color: #6b7785; line-height: 1.4; margin-top: 2px; }
.onc-medida {
	display: inline-block; margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--onc-cyan-700); background: rgba(0, 200, 215, .12); border-radius: 10px; padding: 2px 7px; vertical-align: middle; line-height: 1.5;
}
.onc-cat--ancha .onc-cat__items { grid-template-columns: repeat(4, 1fr); }
.onc-cat--ia { background: linear-gradient(135deg, rgba(0, 200, 215, .10), rgba(0, 200, 215, .02)), #fff; border-color: rgba(0, 200, 215, .45); }
.onc-chips--grandes { gap: 8px; }
.onc-chips--grandes span { font-size: 13.5px; padding: 6px 14px; }
.onc-cat .onc-chips { margin: 0 !important; }
@media (max-width: 781px) {
	.onc-cat { padding: 22px 20px !important; }
	.onc-cat--ancha .onc-cat__items { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .onc-cat__items, .onc-cat--ancha .onc-cat__items { grid-template-columns: 1fr; } }

/* Bloque breve que lleva a la pagina Integraciones */
.onc-teaser-int .onc-chips--claro { justify-content: flex-start; }
.onc-teaser-int .onc-chips--claro span { font-size: 12.5px; letter-spacing: .06em; padding: 7px 14px; background: rgba(255, 255, 255, .06); }
.onc-teaser-int h2 { margin-top: 0; }
/* Aviso: integraciones a la medida; addendas y complementos CFDI incluidos */
.onc-nota-medida {
	max-width: 860px; margin: 0 auto !important; padding: 16px 22px; font-size: 15px; line-height: 1.6;
	background: #fff; border: 1px solid rgba(0, 200, 215, .45); border-radius: 14px; box-shadow: 0 8px 22px rgba(4, 18, 35, .06);
}
.onc-nota-medida .onc-medida { margin: 0 8px 0 0; font-size: 11px; padding: 3px 9px; }
.onc-incluido {
	display: inline-block; margin-left: 8px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--onc-cyan-700); border-radius: 10px; padding: 3px 9px; vertical-align: middle; line-height: 1.5;
}
.onc-cat .onc-cat__sub { margin: 6px 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--onc-cyan-700); }
.onc-cat .onc-cat__sub ~ .onc-cat__sub { margin-top: 18px !important; }
.onc-cat--incluido { border-color: rgba(0, 131, 143, .35); }
.onc-cat--ancha.onc-cat--tres .onc-cat__items { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 781px) { .onc-cat--ancha.onc-cat--tres .onc-cat__items { grid-template-columns: 1fr; } }

/* ===== Soluciones > Mas capacidades: tarjetas anchas (App movil ONControl, Sucursales) ===== */
.onc-destacada {
	gap: 0 !important; margin: 0 !important; background: #fff; border: 1px solid var(--onc-gray-100); border-radius: 18px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(4, 18, 35, .06), 0 8px 24px rgba(4, 18, 35, .08); align-items: stretch !important;
}
.onc-destacada > .wp-block-column { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; }
.onc-destacada > .wp-block-column:has(> .onc-destacada__img) { padding: 0; background: #041223; }
.onc-destacada .onc-destacada__img { margin: 0 !important; height: 100%; }
.onc-destacada .onc-destacada__img img { width: 100%; height: 100% !important; min-height: 420px; object-fit: cover; display: block; }
.onc-destacada .onc-destacada__img--contener img { object-fit: contain; background: #01061a; }
.onc-destacada > .wp-block-column:has(> .onc-destacada__img--contener) { background: #01061a; }
.onc-destacada__pre { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--onc-cyan-700); margin: 0 0 6px !important; }
.onc-destacada h3 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 10px; }
.onc-destacada__lead { font-size: 15.5px; line-height: 1.6; margin: 0 0 18px !important; }
.onc-destacada .onc-chips { margin-top: 0 !important; }
.onc-usos { list-style: none; margin: 0 0 18px !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.onc-usos li {
	position: relative; margin: 0; padding: 12px 14px 12px 54px; background: var(--onc-gray-50); border: 1px solid var(--onc-gray-100); border-radius: 12px;
	font-size: 13.5px; line-height: 1.45;
}
.onc-usos li strong { display: block; color: var(--onc-navy); font-size: 14.5px; margin-bottom: 2px; }
.onc-usos li::before {
	content: ""; position: absolute; left: 12px; top: 13px; width: 30px; height: 30px; border-radius: 9px;
	background: var(--onc-navy) center / 17px no-repeat;
}
.onc-usos li:nth-child(1)::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-pago-claro.svg"); }
.onc-usos li:nth-child(2)::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-caja-claro.svg"); }
.onc-usos li:nth-child(3)::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-pedido-claro.svg"); }
.onc-usos li:nth-child(4)::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-factura-claro.svg"); }
.onc-usos li:nth-child(5)::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/iconos/onc-ico-ajustes-claro.svg"); }
.onc-usos li:last-child { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(0, 200, 215, .10), rgba(0, 200, 215, .02)), #fff; border-color: rgba(0, 200, 215, .45); }
@media (max-width: 781px) {
	.onc-destacada > .wp-block-column { padding: 24px 20px; flex-basis: 100% !important; }
	.onc-destacada > .wp-block-column:has(> .onc-destacada__img) { padding: 0; }
	.onc-destacada .onc-destacada__img img { min-height: 0; height: auto !important; }
	.onc-usos { grid-template-columns: 1fr; }
}
/* Sucursales: tarjeta compacta */
.onc-destacada--compacta { max-width: 860px !important; margin: 0 auto !important; }
.onc-destacada--compacta > .wp-block-column { padding: 22px 28px; }
.onc-destacada--compacta .onc-destacada__img img { min-height: 0; }
.onc-destacada--compacta h3 { font-size: 1.2rem; margin-bottom: 6px; }
.onc-destacada--compacta ul { margin: 0 !important; font-size: 14px; }
.onc-destacada--compacta li { margin-bottom: 4px; }
@media (max-width: 781px) { .onc-destacada--compacta .onc-destacada__img img { max-height: 260px; } }

/* ===== Secciones claras para no confundirse con el footer (aprobado 2026-10-08) ===== */
/* Resultados con ONControl: fondo azul muy suave con medio anillo tenue */
.onc-resultados--claro {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(135deg, #eaf3fa 0%, #f7fbfe 55%, #e3f6f8 100%);
	border-top: 1px solid #dde9f4; border-bottom: 1px solid #dde9f4;
}
.onc-resultados--claro::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none; top: 50%; left: 0; height: 160%; aspect-ratio: 1;
	transform: translate(-58%, -50%); border-radius: 50%;
	background: radial-gradient(closest-side, transparent 0 61%, rgba(74, 111, 163, .10) 61.6% 99.4%, transparent 100%);
}
.onc-resultados--claro > .wp-block-group__inner-container { position: relative; z-index: 1; }
.onc-resultados--claro .onc-resultados__lista li {
	background: #fff; border-color: var(--onc-gray-100); color: var(--onc-text, #3b4a5c);
	box-shadow: 0 2px 4px rgba(4, 18, 35, .03), 0 10px 24px rgba(4, 18, 35, .06);
}
.onc-resultados--claro .onc-resultados__lista li::before { background-color: var(--onc-navy); }
.onc-resultados--claro .onc-resultados__lista li strong { color: var(--onc-navy); }

/* Integraciones: tarjeta azul contenida sobre fondo blanco */
.onc-teaser-int { background: #fff; }
.onc-panel-int { border-radius: 24px; box-shadow: 0 24px 50px rgba(4, 18, 35, .22); }
.onc-panel-int .onc-chips--claro { justify-content: flex-start; }
.onc-panel-int .onc-chips--claro span { font-size: 12.5px; letter-spacing: .06em; padding: 7px 14px; background: rgba(255, 255, 255, .06); }
.onc-panel-int h2 { margin-top: 0; }
@media (max-width: 781px) { .onc-panel-int { padding: 32px 22px !important; border-radius: 18px; } }

/* ===== Encabezados de paginas interiores: imagen del sitio anterior como marca de agua (08_portadas_fondo.php) ===== */
.onc-hero--foto::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: no-repeat center / cover; opacity: .38;
}
.onc-hero--f-nosotros::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-nosotros.png"); }
.onc-hero--f-soluciones::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-soluciones.png"); }
.onc-hero--f-paquetes::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-paquetes.png"); }
.onc-hero--f-validacion::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-validacion.png"); }
.onc-hero--f-casos::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-casos.png"); }
.onc-hero--f-integraciones::before { background-image: url("/wp-content/plugins/oncontrol-contenido/assets/portadas/onc-portada-integraciones.png"); }
/* Contacto: foto del asesor (fondo que tenia el carrusel de Inicio, ya en duotono azul) */
.onc-hero--f-contacto::before {
	background-image: url("/wp-content/uploads/2026/10/onc-carrusel-fondo-asesor.jpg");
	background-position: center 30%; opacity: .75;
}

/* ===== Contacto: imagenes e iconos de la pagina anterior ===== */
.onc-ico--ubica { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.onc-ico--fb { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8z'/%3E%3C/svg%3E"); }
.onc-ico--descarga { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16l-5.7-5.7 1.4-1.4 3.3 3.3zM4 18h16v3H4z'/%3E%3C/svg%3E"); }
.onc-contacto-lista { list-style: none; margin: 0 0 1rem !important; padding: 0 !important; display: grid; gap: 12px; }
.onc-contacto-lista li { display: flex; align-items: flex-start; gap: .75rem; margin: 0; line-height: 1.5; }
.onc-contacto-lista li > span:not(.onc-ico) { padding-top: 6px; }
.onc-contacto-lista li > a { padding-top: 6px; font-weight: 600; }
.onc-contacto-lista .onc-ico::before { background: var(--onc-cyan-700); }
.onc-contacto-lista--descargas li { align-items: center; }
.onc-contacto-lista--descargas li > a { padding-top: 0; }
.onc-card .onc-contacto__img { margin: -4px 0 14px !important; }
.onc-card .onc-contacto__img img { max-height: none; width: 100%; max-width: 360px; height: auto; }
.onc-card .onc-contacto__ico { margin: 0 0 8px !important; }
.onc-card .onc-contacto__ico img { width: 120px; height: auto; max-height: none; }
/* Icono de monitor para la descarga de soporte remoto (como el de la pagina anterior) */
.onc-ico--pantalla { background: transparent; border-radius: 6px; }
.onc-ico--pantalla::before { inset: 2px; }
.onc-contacto-lista .onc-ico--pantalla::before { background: var(--onc-navy); }
.onc-ico--pantalla { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h20v14H2zm2 2v1.4h16V5zm0 2.9v1.4h16V7.9zm0 2.9v1.4h16v-1.4zm0 2.9V15h16v-1.3zM9 18h6l1 2h3v2H5v-2h3z'/%3E%3C/svg%3E"); }