/* =============================================================================
   Vidiv · CSS adicional (BD) — 2026-08-26
   La mayoría de esto son clases que el JSON de Elementor YA emitía y que nunca
   llegaron a tokens.css del theme: se renderizaban sin estilo (secciones
   "rotas" en Sectores de la portada y en las tres creatividades de Plataforma).
   Contrato de Elementor que se usa aquí: `.e-con` expone --width/--height y
   `.e-con.e-flex` expone --flex-grow/--flex-shrink/--flex-basis. Se escriben
   las variables (no solo width/flex) para ganar a la CSS por elemento.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 · Punto de estado "en vivo" de los mockups (verde, 7px)
   El JSON ya le pone background_color #10B981; solo le faltaba el tamaño.
   -------------------------------------------------------------------------- */
.v-mock-dot.e-con {
	--width: 7px; --height: 7px; --min-height: 7px;
	--flex-grow: 0; --flex-shrink: 0; --flex-basis: 7px;
	width: 7px; height: 7px; min-height: 7px; border-radius: 50%; padding: 0;
}

/* -----------------------------------------------------------------------------
   2 · Portada · Sectores (plantilla vidiv-global-verticales)
   -------------------------------------------------------------------------- */
/* Las píldoras arrancan en el borde izquierdo del contenedor, no centradas. */
.v-verticals-tabs .e-n-tabs-heading { justify-content: flex-start; }

/* Panel de la pestaña: imagen y texto centrados entre sí (grid de 2 columnas).
   Elementor lee align-items del grid desde --align-items: la propiedad a pelo
   pierde por especificidad contra `.e-con.e-grid`. */
.v-vert-panel { --align-items: center; align-items: center; }

/* Marco de la imagen: ancla la tarjeta flotante. */
.v-vert-visual { position: relative; }
.v-vert-img img {
	display: block; width: 100%; height: auto; border-radius: 16px;
	/* reserva el hueco: las imágenes de los paneles inactivos llegan tarde y
	   sin esto el panel colapsaba a 0 de alto al girar el carrusel */
	aspect-ratio: 16 / 9; object-fit: cover;
}

/* Tarjeta glass flotando sobre la esquina inferior izquierda de la imagen. */
.v-vert-float.e-con {
	position: absolute; left: 18px; bottom: 18px; z-index: 2;
	--width: fit-content; width: fit-content; max-width: calc(100% - 36px);
	--flex-grow: 0; --flex-shrink: 0;
	padding: 10px 14px; border-radius: 14px;
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255,255,255,.65);
	box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 34px -18px rgba(10,10,10,.4);
}
.v-vf-icon.e-con {
	--width: 34px; --flex-grow: 0; --flex-shrink: 0; --flex-basis: 34px;
	width: 34px; height: 34px; padding: 0; border-radius: 10px;
	background: var(--vidiv-off); align-items: center; justify-content: center;
}
.v-vf-icon .elementor-icon { display: inline-flex; }
.v-vf-icon .elementor-icon svg { width: 16px; height: 16px; }
.v-vf-text.e-con { --width: auto; width: auto; --flex-shrink: 1; row-gap: 0; }
/* ponytail: el mockup no lleva punto en esta tarjeta; el nodo existe en el JSON. */
.v-vert-float .v-mock-dot.e-con { display: none; }

/* -----------------------------------------------------------------------------
   3 · Portada · Funcionalidades (los cuatro mockups)
   -------------------------------------------------------------------------- */
/* Icono dentro de una baldosa blanca redondeada (pasos 02 y canales 03). */
.v-feat-item .elementor-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px; background: #fff;
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 1px 2px rgba(11,13,18,.06), 0 8px 20px -14px rgba(11,13,18,.25);
}

/* Línea de puntos que enhebra los cinco pasos del mockup 02.
   El tramo lo dibuja cada paso menos el último, desde el borde de su baldosa
   hasta pasado el centro del siguiente: así no depende del ancho de columna
   (un ::before sobre el grid se convierte en grid item y se descuadra) y el
   sobrante queda tapado por la baldosa blanca de al lado. */
.v-feat-steps { position: relative; }
.v-feat-steps > .e-con { position: relative; z-index: 1; }
.v-feat-steps > .e-con:not(:last-child)::after {
	content: ""; position: absolute; top: 24px;
	left: calc(50% + 26px); right: calc(-50% - 26px);
	border-top: 1px dashed rgba(11,13,18,.22); z-index: 0;
}

/* Tarjeta blanca "Acciones automáticas" y sus tres baldosas. */
.v-feat-card.e-con {
	background: #fff; border: 1px solid var(--vidiv-border); border-radius: 14px;
	padding: 14px 16px; align-items: stretch;
	box-shadow: 0 1px 2px rgba(11,13,18,.04);
}
.v-feat-act.e-con {
	background: var(--vidiv-off); border-radius: 10px; padding: 10px 6px;
	align-items: center; justify-content: center; row-gap: 6px;
	border: 1px solid var(--vidiv-border);
}
.v-feat-act .elementor-icon { display: inline-flex; }
.v-feat-act .elementor-icon svg { width: 16px; height: 16px; }

/* Mockup 04 · cada LLM es una tarjeta blanca con el logo en su baldosa. */
.v-llm-row.e-con {
	background: #fff; border: 1px solid var(--vidiv-border); border-radius: 14px;
	padding: 11px 14px; box-shadow: 0 1px 2px rgba(11,13,18,.04);
}
.v-llm-logo { --container-widget-width: auto; }
.v-llm-logo .elementor-widget-container {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 9px; background: var(--vidiv-off);
}
.v-llm-logo img { display: block; }

/* Mockup 01 · las burbujas del original respiran más que las del theme. */
.v-bubble-agent, .v-bubble-user { font-size: 14.5px; padding: 12px 16px; border-radius: 12px; }

/* -----------------------------------------------------------------------------
   4 · Plataforma · creatividad 1 "Canales activos"
   -------------------------------------------------------------------------- */
.v-ch-badge .elementor-heading-title {
	display: inline-block; padding: 4px 10px; border-radius: 999px;
	background: rgba(11,13,18,.06); white-space: nowrap;
}
.v-ch-row.e-con {
	background: #fff; border: 1px solid rgba(255,255,255,.75); border-radius: 12px;
	padding: 10px 14px; box-shadow: 0 1px 2px rgba(11,13,18,.05);
}
.v-ch-row > .e-con:not(.v-mock-dot) { --flex-shrink: 1; min-width: 0; }
/* En móvil Elementor pone flex-wrap:wrap y la fila se partía en tres líneas
   (icono / texto / punto) dentro de la tarjeta. */
.v-ch-row.e-con { --flex-wrap: nowrap; flex-wrap: nowrap; }
.v-ch-row > .v-mock-dot.e-con { margin-left: auto; }
.v-ch-icon { --container-widget-width: auto; }
.v-ch-icon .elementor-icon { display: inline-flex; }

/* -----------------------------------------------------------------------------
   5 · Plataforma · creatividad 2 "Integraciones"
   -------------------------------------------------------------------------- */
/* Cabecera SERVICIO / TIPO / ESTADO y filas comparten la misma retícula. */
.v-int-head.e-con, .v-mockrow-white.e-con {
	--e-con-grid-template-columns: 1.3fr 1fr 1.1fr;
	grid-template-columns: 1.3fr 1fr 1.1fr;
}
.v-int-head.e-con { padding: 0 14px 2px; }
.v-int-head .elementor-heading-title {
	font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--vidiv-muted);
}
.v-mockrow-white.e-con {
	background: #fff; border: 1px solid rgba(255,255,255,.75); border-radius: 10px;
	padding: 9px 14px; box-shadow: 0 1px 2px rgba(11,13,18,.05);
}
.v-mockrow-white > .e-con { --width: auto; width: auto; --flex-shrink: 1; min-width: 0; }

/* -----------------------------------------------------------------------------
   6 · Plataforma · creatividad 3 "Resolución en primer turno"
   -------------------------------------------------------------------------- */
.v-anlt-chart.e-con {
	background: #fff; border: 1px solid var(--vidiv-border); border-radius: 12px;
	padding: 14px 14px 10px; height: 190px;
	box-shadow: 0 1px 2px rgba(11,13,18,.04);
	/* cuatro líneas de retícula horizontales, sin tocar el fondo de la tarjeta */
	background-image: repeating-linear-gradient(
		to top, var(--vidiv-border) 0 1px, transparent 1px 25%);
	background-position: 14px calc(100% - 28px);
	background-size: calc(100% - 28px) calc(100% - 38px);
	background-repeat: no-repeat;
}
.v-anlt-col.e-con {
	display: grid; grid-template-rows: 1fr auto; height: 100%;
	justify-items: center; row-gap: 6px; padding: 0;
}
.v-anlt-bar.e-con {
	--width: 22px; --flex-grow: 0; --flex-shrink: 0;
	width: 22px; align-self: end; border-radius: 3px 3px 0 0; padding: 0;
}
.v-anlt-bar-1 { height: 44%; } .v-anlt-bar-2 { height: 65%; }
.v-anlt-bar-3 { height: 54%; } .v-anlt-bar-4 { height: 85%; }
.v-anlt-bar-5 { height: 78%; } .v-anlt-bar-6 { height: 100%; }
.v-anlt-bar-7 { height: 96%; }
.v-anlt-day .elementor-heading-title { line-height: 1; }
.v-anlt-kpi.e-con {
	background: #fff; border: 1px solid var(--vidiv-border); border-radius: 12px;
	padding: 12px 14px; box-shadow: 0 1px 2px rgba(11,13,18,.04);
}
.v-anlt-kpi > .elementor-widget-heading:last-child .elementor-heading-title {
	text-transform: uppercase; letter-spacing: .12em;
}

@media (max-width: 767px) {
	.v-anlt-chart.e-con { height: 160px; }
	.v-anlt-bar.e-con { --width: 16px; width: 16px; }
}

/* -----------------------------------------------------------------------------
   7 · Portada · barra de canales en móvil: UNA sola fila
   Las tres píldoras sumaban 349px y a 375 de viewport la tercera bajaba.
   Con padding 9, texto 12.5 y gap 6 caben en 308px; por debajo de ~340 se
   encogen con elipsis en vez de envolver o desbordar la página.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.v-canales-tabs .e-n-tabs-heading {
		flex-wrap: nowrap; max-width: 100%; padding: 4px; column-gap: 6px;
	}
	.v-canales-tabs .e-n-tab-title { flex: 0 1 auto; min-width: 0; padding: 0 9px; }
	.v-canales-tabs .e-n-tab-title-text {
		font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.v-canales-tabs .e-n-tab-title svg { width: 13px; height: 13px; }

	/* A 320 de viewport la etiqueta más larga se recortaba: se aprieta un poco más
	   para que quepan las tres completas. */
	@media (max-width: 340px) {
		.v-canales-tabs .e-n-tabs-heading { column-gap: 4px; padding: 3px; }
		.v-canales-tabs .e-n-tab-title { padding: 0 7px; }
	}

	/* Los cinco pasos del mockup 02 caen a columnas de 49px: baldosa más pequeña
	   para que la etiqueta no se salga de su celda. */
	.v-feat-steps .elementor-icon { width: 40px; height: 40px; border-radius: 10px; }
	.v-feat-steps > .e-con:not(:last-child)::after { top: 20px; left: calc(50% + 22px); right: calc(-50% - 22px); }

	/* Se mantiene la decisión previa: las 8 píldoras de Sectores envuelven centradas. */
	.v-verticals-tabs .e-n-tabs-heading { justify-content: center; }
	.v-vert-float.e-con { left: 10px; bottom: 10px; padding: 8px 10px; max-width: calc(100% - 20px); }
}

/* A11y: contraste del banner de cookies (Complianz) — el verde 43ac2a y el violeta 6764f9
   no llegan a 4.5:1; se alinean con la tinta de la marca. */
#cmplz-cookiebanner-container .cmplz-links a.cmplz-link,
#cmplz-cookiebanner-container .cmplz-documents a.cmplz-link { color: #515866; }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept { background-color: #0b0d12; border-color: #0b0d12; color: #fff; }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences { color: #0b0d12; }

/* ---------- Sección /eventos/ (adaptación 2026-08-31) ---------- */
/* Píldoras de resumen de las páginas de novedades. Heading widget: el ancho se gana con
   --container-widget-width, si no el widget ocupa el 100% de la fila flex. */
.v-evt-pill { --container-widget-width: auto; }
.v-evt-pill .elementor-heading-title {
	display: inline-block; width: fit-content; white-space: nowrap;
	padding: 8px 15px; border-radius: 999px;
	background: #fff; border: 1px solid var(--vidiv-border);
	font-size: 13px; font-weight: 500; color: var(--vidiv-black);
}