/*
 * Blindar 360 — site.css
 * Solo lo que theme.json no puede expresar. Todo color/tipografía/espaciado
 * de bloque vive en theme.json; este archivo cubre: filete de acento,
 * banda de consecuencia, foco visible, panel de submenú de navegación y
 * el tratamiento de los placeholders de contacto del pie ([[TELÉFONO]] etc).
 */

/* El propio sistema de diseño declara "* { box-sizing: border-box }" como
   base en cada .dc.html — nuestro tema nunca lo replicó. Sin esto, un
   elemento con padding + width:100% (como la cabecera) suma el padding
   AL ancho en vez de incluirlo, y desborda el viewport horizontalmente.
   Es la causa de fondo, no un parche puntual. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ============================================================
   ANCHO Y ALINEACIÓN — regla de arquitectura del tema
   ============================================================
   WordPress asume que un bloque de grupo SIN "align" fue dejado angosto
   a propósito por alguien usando el editor visual: lo encoge a 760px y
   lo centra con margin:auto !important. Este tema no se construyó
   clic a clic en el editor — el HTML de bloques se generó a mano — así
   que esa regla se volvió una trampa: bastaba con olvidar "align":"wide"
   en un solo bloque para que aterrizara angosto y centrado en el medio
   de la página. Pasó más de una vez (héroes, tarjetas, CTAs, imágenes).

   En vez de perseguir "align" bloque por bloque, se invierte la regla:
   todo wp:group hijo directo de un layout "constrained" ocupa el 100%
   del ancho disponible por defecto, salvo que se marque explícitamente
   alignfull/alignleft/alignright. Esto no toca párrafos ni encabezados
   sueltos (el texto corrido de Privacidad/Términos sigue angosto como
   corresponde) — solo bloques de grupo, que son los que veníamos
   encontrando mal alineados. */
.is-layout-constrained > .wp-block-group:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Mismo problema, otro tipo de elemento: WordPress aplica el contentSize de
   760px a CUALQUIER hijo directo de un layout "constrained", no solo a los
   wp:group. Las tablas del sitio (obligaciones, orientación, cursos) son
   <table> sueltas dentro de un grupo, así que aterrizaban a 760px centradas
   en vez de ocupar los 1240px del contenedor. La regla de arriba no las
   cubría porque solo miraba .wp-block-group.

   No se generaliza a "todo hijo directo" a propósito: los párrafos y
   encabezados de Privacidad y Términos SÍ deben quedarse angostos a 760px,
   que es exactamente para lo que sirve contentSize. */
.is-layout-constrained > table {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

/* En móvil una tabla de 3-4 columnas no cabe en 390px sin romper el padding
   lateral de 32px que la guía §10.4 marca como intocable. En vez de encoger
   las columnas hasta volverlas ilegibles, la tabla se desplaza en horizontal
   dentro de su propia caja — el resto de la página no se mueve. */
@media (max-width: 860px) {
	.is-layout-constrained > table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
}

/* .alignwide quedó excluido de la regla de arriba a propósito: WordPress SÍ
   sabe limitar su ancho por su cuenta (via --wp--style--global--wide-size),
   pero solo cuando ese var está definido en el contexto — y en más de un
   punto del sitio no lo estaba, dejando la franja en cuestión estirarse al
   100% del contenedor padre en vez de a los 1240px del diseño (ej. la banda
   amarilla "Gratis te decimos qué tienes mal"). Se fija aquí el límite de
   forma explícita, igual que .b360-contenedor, para no depender de que el
   var llegue bien armado a cada bloque. */
.alignwide {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Contenedor y sección reutilizables — para cualquier bloque nuevo que se
   agregue de aquí en adelante, en vez de depender de "align":"wide"/"full"
   y el theme.json. Mismo patrón que .dp-contenedor/.dp-seccion en el tema
   de Don Pedro: el ancho lo decide esta clase, con CSS plano, no el motor
   de alineación de bloques. */
.b360-contenedor {
	max-width: 1240px;
	margin-inline: auto;
	width: 100%;
}

.b360-contenedor--angosto {
	max-width: 760px;
	margin-inline: auto;
	width: 100%;
}

/* Bordes de un solo lado (acento) — WordPress agrega automáticamente
   border-style:solid en los 4 lados a cualquier elemento con la clase
   has-border-color, aunque el bloque solo haya definido un borde superior
   o inferior de acento (ej. el filete de color arriba de una tarjeta, o
   el subrayado amarillo bajo un enlace). Resultado: un recuadro completo
   no deseado en vez de una sola línea. Se apaga aquí explícitamente el
   resto de los lados cuando solo uno viene definido en el estilo en
   línea — no toca los elementos que sí definen "border-width" en los
   4 lados a propósito (tarjetas numeradas, marcos de captura). */
[style*="border-top-width"]:not([style*="border-bottom-width"]):not([style*="border-left-width"]):not([style*="border-right-width"]):not([style*="border-width"]) {
	border-right-style: none !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
}

[style*="border-bottom-width"]:not([style*="border-top-width"]):not([style*="border-left-width"]):not([style*="border-right-width"]):not([style*="border-width"]) {
	border-top-style: none !important;
	border-right-style: none !important;
	border-left-style: none !important;
}

[style*="border-left-width"]:not([style*="border-top-width"]):not([style*="border-bottom-width"]):not([style*="border-right-width"]):not([style*="border-width"]) {
	border-top-style: none !important;
	border-right-style: none !important;
	border-bottom-style: none !important;
}

/* Rejillas de tarjetas — el bloque de grupo de WordPress solo genera
   grid-template-columns con auto-fill, nunca auto-fit. Con auto-fill, si el
   contenedor alcanza para más columnas de las que hay tarjetas, WP reserva
   igual esa columna vacía (ej. 3 tarjetas en un contenedor donde caben 4:
   queda una 4ª columna fantasma y las 3 reales no se estiran a llenar el
   ancho). auto-fit colapsa esa columna vacía — es lo que usa el diseño
   original. Se fuerza aquí por ancho mínimo, con !important porque WP
   genera su regla en una hoja de estilo aparte por bloque. */
.b360-grid-140 { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important; }
.b360-grid-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important; }
.b360-grid-220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
.b360-grid-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; }
.b360-grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }

/* Secciones ancho completo sin espacio entre ellas — el diseño las pone una
   contra otra (verde, amarillo, blanco, papel...) sin dejar ver el fondo
   gris de la página entre medio. El bloque de grupo de WordPress agrega por
   defecto 24px de margen superior entre hermanos; se anula para bloques
   ancho-completo consecutivos y entre cabecera/contenido/pie. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.is-layout-constrained > .alignfull {
	margin-block-start: 0;
}

/* Cabecera fija — la guía (00-Guía-WordPress §10.1) es explícita: "fixed, no
   sticky", visible durante todo el scroll, con un spacer reservando su alto
   para no tapar contenido. 68px/58px son el alto MÍNIMO (min-height, no
   height): mientras el wordmark sea texto plano en vez del logo definitivo,
   ese texto puede pedir más alto del que un ícono fijo pediría, y con una
   altura fija ese contenido se cortaba o se desbordaba por debajo del fondo
   blanco. min-height dejar crecer la cabecera con lo que de verdad tenga
   dentro. El spacer (padding-top de .wp-site-blocks) se recalcula por JS
   contra el alto real medido, no un número fijo — así se mantiene correcto
   sin importar cuánto mida el contenido del día. */
.wp-site-blocks {
	padding-top: var( --b360-header-h, 68px );
}

.b360-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	min-height: 68px;
	transition: min-height .22s cubic-bezier(.2, 0, .2, 1), box-shadow .22s cubic-bezier(.2, 0, .2, 1);
	/* El núcleo de WordPress aplica ":where(.wp-block-group.has-background)
	   {padding:1.25em 2.375em}" a todo grupo con fondo. La cabecera tiene
	   fondo blanco, así que heredaba 20px arriba y abajo y medía 109px en vez
	   de los 68px del diseño. El estilo en línea del bloque solo declara el
	   padding lateral, por eso el vertical sobrevivía. */
	padding-top: 0;
	padding-bottom: 0;
}

.b360-header.is-scrolled {
	min-height: 58px;
	box-shadow: 0 2px 14px rgba(28, 46, 41, .09);
}

/* La fila interior lleva min-height:68px en su estilo en línea (es lo que
   fija el alto en reposo). Sin bajarla también, la cabecera no puede encoger
   a 58px al hacer scroll: el contenido seguiría exigiendo 68. */
.b360-header .b360-contenedor {
	transition: min-height .22s cubic-bezier(.2, 0, .2, 1);
}

.b360-header.is-scrolled .b360-contenedor {
	min-height: 58px !important;
}

@media (max-width: 860px) {
	.b360-header {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* La barra de administración de WordPress (#wpadminbar) también es
   position:fixed;top:0, con z-index por encima del nuestro — sin este ajuste
   nuestra cabecera fija queda parcialmente tapada detrás de la barra negra
   cuando se navega el sitio con sesión de administrador iniciada (no afecta
   a un visitante real, que nunca ve esa barra). */
.admin-bar .b360-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .b360-header {
		top: 46px;
	}
}

/* Formulario de contacto (Fluent Forms) — el botón de envío del diseño ocupa
   todo el ancho de la tarjeta; por defecto Fluent Forms lo deja del ancho de
   su texto, alineado a la izquierda. */
#fluentform_3 .ff-btn-submit {
	width: 100%;
	justify-content: center;
}

/* Subrayado animado en el menú — la guía distingue esto explícitamente de un
   simple cambio de color: "box-shadow:inset 0 -2px 0", .14s. */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: box-shadow .14s cubic-bezier(.2, 0, .2, 1), color .14s cubic-bezier(.2, 0, .2, 1);
	box-shadow: inset 0 -2px 0 transparent;
}

.wp-block-navigation .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--oro);
}

/* theme.json agrega text-decoration:underline a todo :hover del sitio (para
   los enlaces de texto corrido); dentro del menú eso se suma al subrayado
   animado de arriba y se ven dos líneas. El menú usa solo el box-shadow.

   El color de hover también hay que declararlo aquí: la regla de theme.json
   es "a:where(:not(.wp-element-button)):hover", y :where() la deja con
   especificidad 0 en esa parte, así que pierde contra la regla propia del
   bloque de navegación (.wp-block-navigation .wp-block-navigation-item__content).
   Resultado: el enlace nunca cambiaba de color al pasar el mouse. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none !important;
	color: var(--wp--preset--color--oro) !important;
}

/* Botón flotante de WhatsApp — fijo abajo a la izquierda, fondo blanco (nunca
   el verde de WhatsApp per la guía §10.2), hasta tener el número real enlaza
   a Contacto. Inyectado globalmente vía functions.php (wp_footer), no es
   contenido de página. */
.b360-whatsapp-float {
	position: fixed;
	bottom: 18px;
	left: 18px;
	z-index: 45;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--plata);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(28, 46, 41, .07), 0 1px 1px rgba(28, 46, 41, .04);
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--verde);
	text-decoration: none;
}

.b360-whatsapp-float i {
	color: var(--wp--preset--color--verde);
	font-size: 16px;
}

/* Tarjetas con filete — hover eleva + sombra (guía §10.9), único movimiento
   de entrada permitido fuera de los contadores que suben desde 0. Se aplica
   por atributo a las tarjetas con borde de acento ya existentes en el sitio,
   sin tener que tocar cada patrón de página por separado. */
[style*="border-top-width"].has-border-color:hover,
[style*="border-left-width"].has-border-color:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(28, 46, 41, .10), 0 2px 6px rgba(28, 46, 41, .06);
}

[style*="border-top-width"].has-border-color,
[style*="border-left-width"].has-border-color {
	transition: transform .2s cubic-bezier(.2, 0, .2, 1), box-shadow .2s cubic-bezier(.2, 0, .2, 1);
}

/* Vista previa del Score 360 (Frente laboral). Reemplaza la captura estática
   por los componentes vivos ScoreDial + ComplianceBar del sistema de diseño.
   La animación de subida desde 0 es la ÚNICA excepción que permite la guía
   §10.9 ("un contador/score que sube desde 0 al montar"); el resto del sitio
   sigue sin animación de entrada. */
.b360-score {
	border: 1px solid var(--wp--preset--color--plata);
	border-radius: 4px;
	padding: 32px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 40px;
	align-items: center;
}

/* Bajo 640px el dial de 150px y las barras no conviven en dos columnas sin
   romper el padding lateral; se apilan. */
@media (max-width: 640px) {
	.b360-score {
		grid-template-columns: 1fr;
		gap: 28px;
		justify-items: center;
	}
}

.b360-score-arc,
.b360-bar-fill {
	transition: stroke-dasharray .36s cubic-bezier(0, 0, .2, 1), width .36s cubic-bezier(0, 0, .2, 1);
}

/* Quien prefiera menos movimiento ve el valor final, sin recorrido. */
@media (prefers-reduced-motion: reduce) {
	.b360-score-arc,
	.b360-bar-fill {
		transition: none;
	}
}

/* Rejillas de 170px (pie) */
.b360-grid-170 { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important; }

/* Foco visible — anillo amarillo de 3px, criterio de accesibilidad de la guía. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 204, 0, .55);
	border-radius: 2px;
}

/* Marca en cabecera y pie. Los lockups traen fondo horneado que calza con
   su contexto (el claro sobre el blanco de la cabecera, el oscuro sobre el
   verde del pie), así que solo hay que quitarles los márgenes por defecto
   de figure/imagen para que se alineen con la bajada "Gestión de riesgos". */
.b360-marca .wp-block-site-logo,
.b360-marca-pie {
	margin: 0 !important;
}

.b360-marca .wp-block-site-logo img,
.b360-marca-pie img {
	display: block;
}

.b360-marca .wp-block-site-logo a,
.b360-marca-pie a {
	display: block;
	border: 0;
}

/* Filete de acento de 3px bajo eyebrows / etiquetas de sección. */
.b360-eyebrow-rule {
	width: 48px;
	height: 3px;
	background: var(--wp--preset--color--amarillo);
}

.b360-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amarillo);
}

/* Eyebrow sobre fondo claro. El oro de marca (#A98E5A) sobre el gris papel
   da 2.82:1 y no cumple AA — y el eyebrow es texto de 11px, así que necesita
   4.5:1, no los 3:1 de un elemento gráfico. Se usa una variante más oscura
   del mismo oro (4.79:1 sobre papel, 5.31:1 sobre blanco). El preset "oro"
   NO se toca: los íconos y filetes que lo usan son gráficos y ahí sí basta
   con 3:1, y cambiarlo alteraría el color de marca en todo el sitio. */
.b360-eyebrow.is-dark {
	color: #806839;
}

/* Banda de consecuencia — amarillo pleno, texto negro, ancho completo. */
.b360-banda-consecuencia {
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--negro);
}

.b360-banda-consecuencia p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	letter-spacing: .01em;
	margin: 0;
}

/* Navegación principal — panel flotante accesible por teclado, sin depender
   de :hover (mejora sobre el prototipo, que solo abría submenús al pasar el
   mouse: core/navigation ya soporta apertura por teclado y foco). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--wp--preset--color--plata);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(28, 46, 41, .07), 0 1px 1px rgba(28, 46, 41, .04);
	padding: 8px;
	min-width: 220px;
}

.wp-block-navigation .wp-block-navigation-item__content {
	white-space: nowrap;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 12px;
	border-radius: 3px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: rgba(28, 46, 41, .045);
	color: var(--wp--preset--color--oro);
}

/* Enlaces del pie invisibles — WordPress genera "a:where(:not(.wp-element-button))
   {color:verde}" a partir de styles.elements.link en theme.json. Ese selector
   apunta al TAG <a> directamente; el color blanco/plata/amarillo que cada
   párrafo del pie recibe (has-blanco-color, has-plata-color, has-amarillo-color)
   vive en el <p> que envuelve al link, no en el <a>, así que nunca llega a
   heredarse: el enlace siempre terminaba en verde oscuro (#1C2E29) sobre el
   fondo verde del pie — prácticamente ilegible. Se fuerza aquí a heredar del
   párrafo contenedor, que es el que ya trae el color correcto. */
.b360-footer a {
	color: inherit;
}

.b360-footer a:hover {
	color: var(--wp--preset--color--amarillo);
}

/* Formulario de contacto (Fluent Forms) — el plugin trae su propia tipografía
   de etiquetas; el diseño las quiere como un eyebrow: mayúsculas, 11px,
   espaciadas, en gris apagado (mismo tratamiento que el componente Field
   del sistema de diseño, no algo que Fluent Forms ofrezca de fábrica). */
#fluentform_3 .ff-el-input--label label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: #77726E;
}

/* Placeholders de contacto del pie — visibles siempre, para que el cliente
   sepa que falta completarlos (mismo tratamiento que el prototipo). */
.b360-placeholder {
	background: rgba(255, 204, 0, .16);
	border-bottom: 2px solid var(--wp--preset--color--amarillo);
	padding: 0 4px;
}

/* Navegación móvil — el diseño usa un punto de quiebre propio de 860px y un
   panel desplegable bajo la cabecera (no el overlay de pantalla completa
   por defecto de WordPress). Se fuerza aquí porque el bloque core/navigation
   no expone el breakpoint como atributo; hay que sobreescribir su CSS
   interno con la misma especificidad que usa internamente. */
@media (min-width: 861px) {
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	.b360-header-auth {
		display: flex !important;
	}
}

@media (max-width: 860px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid var(--wp--preset--color--plata);
		border-radius: 4px;
		background: #fff;
	}

	.wp-block-navigation__responsive-container-open svg {
		width: 15px;
		height: 15px;
	}

	.b360-header-auth {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: absolute !important;
		inset: auto 0 auto 0 !important;
		top: 100% !important;
		z-index: 39 !important;
		background-color: #fff !important;
		color: var(--wp--preset--color--negro) !important;
		overflow: visible !important;
		animation: none !important;
		box-shadow: 0 8px 16px rgba(28, 46, 41, .12);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0 !important;
		padding: 6px 20px 18px !important;
		max-width: none !important;
		border-top: 1px solid var(--wp--preset--color--plata);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 11px 4px !important;
		font-size: 15px !important;
		border-bottom: 1px solid var(--wp--preset--color--plata);
		display: block !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		min-width: 0 !important;
		padding: 0 0 0 16px !important;
	}
}

/* Tarjeta de dato del hero — filete inferior entre las dos cifras. */
.b360-hero-stat-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
}

.b360-hero-stat-divider {
	border-top: 1px solid rgba(255, 255, 255, .16);
}