/* Botones */
.br-btn {
	display: inline-block;
	background: linear-gradient(135deg, var(--br-rojo-hover), var(--br-rojo-luminoso));
	color: #fff;
	padding: 14px 20px;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border: none;
	border-radius: 16px;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* Cambio sutil en hover: el extremo oscuro del degradado sube un tono
 * (de --br-rojo-hover a --br-rojo), sin volverse un color plano distinto
 * ni agregar sombra — solo el mismo degradado, un poco más luminoso. */
.br-btn:hover { background: linear-gradient(135deg, var(--br-rojo), var(--br-rojo-luminoso)); color: #fff; }
.br-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
}
.br-btn--outline:hover { background: var(--br-rojo-hover); border-color: var(--br-rojo-hover); color: var(--br-rojo-texto-hover); }
.br-btn--outline-blue { background: transparent; color: var(--br-azul); border: 1px solid var(--br-azul); }
.br-btn--outline-blue:hover { background: var(--br-azul); color: #fff; }
.br-btn__icon { display: inline-block; vertical-align: middle; margin-left: 8px; transition: transform .3s ease; }
.br-btn:hover .br-btn__icon,
.br-btn--outline:hover .br-btn__icon,
.br-btn--outline-blue:hover .br-btn__icon { transform: translateX(4px); }

/* Topbar */
.br-topbar {
	background: var(--br-tinta);
	color: var(--br-topbar-texto);
	font-size: 12.5px;
}
.br-topbar .br-container {
	padding-top: 9px;
	padding-bottom: 9px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.br-topbar__live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--br-verde);
	font-weight: 700;
	letter-spacing: .09em;
}
.br-topbar__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--br-verde);
	animation: br-pulse 2.4s ease-in-out infinite;
}
.br-topbar__contact { display: flex; gap: 18px; flex-wrap: wrap; }
.br-topbar__contact a { color: var(--br-topbar-texto); }
.br-topbar__contact a:hover { color: var(--br-verde); }

/* Header */
.br-header {
	background: var(--br-header-bg);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	position: sticky;
	top: 12px;
	z-index: 60;
	max-width: var(--br-container);
	margin: 12px auto 0;
	border: 1px solid var(--br-linea);
	border-radius: 999px;
	box-shadow: 0 14px 40px -18px rgba(5, 10, 18, .5);
	transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.br-header.is-scrolled {
	box-shadow: 0 18px 46px -16px rgba(5, 10, 18, .68);
	border-color: var(--br-azul);
}
/* Home: el video del hero llega hasta arriba del todo y el navbar flota
 * encima. La topbar se oculta solo aquí (vía la clase "home" que WordPress
 * ya agrega al body en la portada) porque no tiene versión "flotante" —
 * mostrarla implicaría duplicar el tratamiento de vidrio del header pill.
 * En el resto del sitio topbar y header siguen exactamente igual (sticky,
 * en flujo normal). */
.home .br-topbar { display: none; }
/* -webkit-transform promueve el header a su propia capa de composición: sin
 * esto, Safari/iOS puede "despegar" un position:fixed del viewport y dejarlo
 * flotando a mitad de scroll mientras la barra de direcciones se colapsa/
 * expande — reportado por el usuario con captura (el menú "no se queda
 * estático" al hacer scroll en el celular). */
.home .br-header {
	position: fixed;
	left: 0;
	right: 0;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Móvil, en TODO el sitio (no solo Home, a pedido del usuario): la "pill"
 * flotante con margen e inset (pensada para escritorio) es justo la
 * combinación (position:fixed/sticky + backdrop-filter + margen/radius) más
 * propensa al bug de Safari/iOS donde el header se "despega" del viewport a
 * mitad de scroll — reportado por el usuario con captura, solo visto en
 * Home, pero el mismo tratamiento se pareja en todas las páginas por
 * consistencia visual. En vez de perseguir ese bug indefinidamente, en móvil
 * se simplifica a una barra rectangular pegada al borde superior, sin inset
 * ni esquinas redondeadas: menos trabajo de composición para el navegador,
 * resultado más predecible. Escritorio no se toca, sigue con la pill. */
@media (max-width: 900px) {
	.br-header {
		top: 0;
		border-radius: 0;
		margin: 0;
		max-width: 100%;
	}
}
.br-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	height: var(--br-header-h);
}
.br-header__logo { flex: none; }
.br-header__logo img { height: 40px; width: auto; display: block; }
.br-nav { display: flex; flex: 1; justify-content: center; gap: 2px; align-items: center; }
.br-nav__list { display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
.br-nav__item {
	position: relative;
	display: inline-block;
	padding: 10px 15px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--br-azul);
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.br-nav__item:hover, .br-nav__item.is-current { color: var(--br-verde); background: var(--br-gris); }
/* Línea verde bajo el item activo/hover (escritorio) — crece desde el centro. */
.br-nav__item::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: 0;
	height: 2px;
	background: var(--br-verde);
	transform: translateX(-50%);
	transition: width .25s ease;
}
.br-nav__item:hover::after, .br-nav__item.is-current::after { width: calc(100% - 30px); }
.br-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.br-header__cta, .br-header__cta-outline { flex: none; border-radius: 999px; }
.br-header__cta-outline {
	color: var(--br-texto-3);
	border-color: var(--br-linea);
}
.br-header__cta-outline:hover {
	background: var(--br-gris);
	border-color: var(--br-azul);
	color: var(--br-azul);
}

.br-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: 1px solid var(--br-linea);
	color: var(--br-texto-3);
	cursor: pointer;
	flex: none;
	transition: color .2s ease, border-color .2s ease;
}
.br-theme-toggle:hover { color: var(--br-azul); border-color: var(--br-azul); }
.br-theme-toggle:focus,
.br-theme-toggle:focus-visible,
.br-theme-toggle:active {
	background: transparent;
	outline: 2px solid var(--br-azul);
	outline-offset: 2px;
}
.br-theme-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; }
.br-theme-toggle__icon--moon { display: none; }
[data-theme="light"] .br-theme-toggle__icon--sun { display: none; }
[data-theme="light"] .br-theme-toggle__icon--moon { display: block; }

/* !important en fondo/borde: mismo problema que .br-tabgroup__tab (ver más
 * abajo) — Hello Elementor + Elementor Pro inyectan su propio color de acento
 * (rosa/magenta) en botones al hacer hover/focus/tap en TODA página. Sin
 * !important y el reset de :hover/:focus/:active, ese CSS externo gana. */
.br-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: none !important;
	border: none !important;
	cursor: pointer;
	padding: 0;
	flex: none;
	-webkit-tap-highlight-color: transparent;
}
.br-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--br-texto) !important; transition: background .2s ease; }
.br-nav-toggle:hover span { background: var(--br-azul) !important; }
.br-nav-toggle:focus,
.br-nav-toggle:focus-visible,
.br-nav-toggle:active {
	background: none !important;
	outline: 2px solid var(--br-azul);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.br-nav-toggle { display: flex; margin-left: auto; }
	.br-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--br-superficie);
		border-bottom: 1px solid var(--br-linea);
		box-shadow: 0 18px 30px rgba(10, 27, 46, .12);
		display: none;
	}
	.br-nav.is-open { display: block; }
	.br-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
	.br-nav__item { border-radius: 0; padding: 13px var(--br-container-pad); }
	.br-dropdown__panel { position: static; box-shadow: none; border: none; border-top: 1px solid var(--br-linea); min-width: 0; }
	.br-header__cta, .br-header__cta-outline { display: none; }
}

.br-dropdown { position: relative; }
.br-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 270px;
	background: var(--br-superficie);
	border: 1px solid var(--br-linea);
	box-shadow: 0 18px 40px rgba(10, 27, 46, .16);
	z-index: 70;
	display: none;
}
.br-dropdown.is-open .br-dropdown__panel { display: block; animation: br-fade .18s ease both; }
.br-dropdown__link {
	display: block;
	padding: 13px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--br-texto-3);
	border-bottom: 1px solid var(--br-fondo);
}
.br-dropdown__link:hover { background: var(--br-gris); color: var(--br-azul); }

/* Footer */
/* Valor fijo (no var(--br-tinta)): --br-tinta en modo oscuro es #04060a,
 * casi idéntico al fondo general del body (--br-fondo, #05070a) — el footer
 * no se distinguía del resto de la página. Se usa un tono fijo en vez de
 * cambiar --br-tinta para no afectar topbar/hero/CTA-bands, que también lo
 * usan y no fueron parte de este pedido. --br-footer-texto tampoco cambia
 * con el tema, así que este fondo tampoco debe hacerlo. */
.br-footer { background: #0c1826; color: var(--br-footer-texto); padding: 56px 0 30px; }
.br-footer__top { display: flex; gap: 56px; align-items: flex-start; margin-bottom: 30px; }
.br-footer__brand { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.br-footer__logo img { height: 42px; width: auto; display: block; }
.br-footer__repse { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* --br-footer-texto (fijo, no cambia con el tema) en vez de --br-texto-3:
 * --br-texto-3 en modo claro es oscuro (#33465c), pensado para texto sobre
 * fondos claros — casi invisible sobre el footer, que siempre es oscuro. */
.br-footer__repse-text { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--br-footer-texto); }
.br-footer__cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.br-footer__col-title {
	font-family: var(--br-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--br-verde);
	margin-bottom: 14px;
}
.br-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.br-footer__col a, .br-footer__col li { color: var(--br-footer-texto); font-size: 14px; }
.br-footer__col a { transition: color .2s ease; }
.br-footer__col a:hover {
	color: var(--br-verde);
	text-decoration: underline;
	text-decoration-color: var(--br-verde);
	text-underline-offset: 3px;
}
.br-footer__legal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12.5px;
}
@media (max-width: 782px) {
	.br-footer__top { flex-direction: column; gap: 30px; }
	.br-footer__cols { grid-template-columns: 1fr; }
}

/* Botón flotante de WhatsApp */
.br-whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(10, 27, 46, .25);
	transition: transform .2s ease;
}
.br-whatsapp-float:hover { transform: scale(1.06); }
.br-whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* Barra sticky entre servicios: una sola foto estática (la del servicio
 * actual) a modo de portada de blog, con el nombre encima — sin flechas de
 * navegación (quitadas a pedido del usuario, 2026-08-16: se veían como un
 * carrusel interactivo, no era la intención). */
.br-tabs-servicios {
	background: var(--br-superficie);
	border-bottom: 1px solid var(--br-linea);
	position: sticky;
	top: var(--br-header-h);
	z-index: 50;
	box-shadow: 0 12px 30px -14px rgba(4, 6, 10, .5);
}
.br-tabs-servicios__wrap { display: block; }
/* Tamaño "hero" a pedido del usuario (2026-08-14): la foto es la
 * protagonista, no una tira delgada — 240px en escritorio, más baja en
 * móvil para no comerse media pantalla en un bar que además es sticky. */
.br-tabs-servicios__current {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	padding: 22px var(--br-container-pad);
	overflow: hidden;
	isolation: isolate;
}
.br-tabs-servicios__current::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--br-tab-bg);
	background-size: cover;
	background-position: center;
}
/* Degradado más fuerte (llega a .94, antes .88) para "portada de blog": el
 * texto tiene que resaltar sólido sobre cualquier foto, sin depender de
 * dónde caiga lo más oscuro/claro de la imagen de fondo. */
.br-tabs-servicios__current::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(4, 6, 10, .25) 0%, rgba(4, 6, 10, .94) 100%);
}
.br-tabs-servicios__current-label {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-family: var(--br-font-title);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
@media (max-width: 782px) {
	.br-tabs-servicios__current { min-height: 160px; padding: 16px 18px; }
	.br-tabs-servicios__current-label { font-size: 16px; }
}

/* Gauges animados (Cobertura) */
.br-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.br-gauge { text-align: center; }
.br-gauge__num {
	font-family: var(--br-font-title);
	font-weight: 700;
	font-size: 52px;
	color: var(--br-gauge-color, var(--br-verde));
}
.br-gauge__label { font-size: 13.5px; color: var(--br-dark-body); margin-top: 6px; }
@media (max-width: 782px) { .br-gauges { grid-template-columns: 1fr; gap: 24px; } }

/* Tabs de normativas (Nosotros) */
.br-tabgroup__tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
/* !important en los estados interactivos: el tema padre Hello Elementor +
 * Elementor Pro (instalados y activos por detrás, ver ADR 007/009, CSS fuera
 * de este repo) inyectan su propio color de acento en botones/tabs en TODA
 * página — incluida esta, que no usa Elementor. Sin !important, ese CSS
 * externo gana y se ve un rosa/magenta que no existe en ningún archivo
 * nuestro. Ver también el mismo problema resuelto en base.css (a:visited). */
.br-tabgroup__tab {
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	background: var(--br-superficie) !important;
	color: var(--br-texto-3) !important;
	border: 1px solid var(--br-linea) !important;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.br-tabgroup__tab:hover { border-color: rgba(61, 140, 224, .5) !important; color: var(--br-texto) !important; }
/* Mismo anillo de foco que .br-theme-toggle — nada de azul/rosa por defecto del navegador. */
.br-tabgroup__tab:focus,
.br-tabgroup__tab:focus-visible {
	outline: 2px solid var(--br-azul);
	outline-offset: 2px;
}
.br-tabgroup__tab.is-active { background: var(--br-azul) !important; color: #fff !important; border-color: var(--br-azul) !important; }
.br-tabgroup__tab.is-active:hover { border-color: var(--br-azul) !important; }
.br-tabgroup__panel[hidden] { display: none; }
.br-norm-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--br-gris-2);
	border: 1px solid var(--br-linea);
	padding: 16px 18px;
	margin-bottom: 1px;
	transition: border-color .25s ease, background .25s ease;
}
.br-norm-item:hover { border-color: rgba(61, 140, 224, .4); background: var(--br-superficie); }
/* Mismo chip de ícono que .br-servicio-card__icon (chrome fijo, no token de
 * tema): azul en reposo, verde al hover — mismo lenguaje en todo el sitio. */
.br-norm-item__icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, #0a438c, #061024);
	transition: background .3s ease, transform .3s ease;
}
.br-norm-item:hover .br-norm-item__icon { background: linear-gradient(150deg, #6ba82e, #1a2b0c); transform: rotate(-6deg); }
.br-norm-item__icon svg { width: 16px; height: 16px; stroke: #fff; }
.br-norm-item__k { font-weight: 700; color: var(--br-azul); }
.br-norm-item__v { font-size: 14px; color: var(--br-texto-2); margin-top: 4px; }

/* Acordeón de vacantes. !important: no tenía ningún estado de hover/focus
 * propio, así que el CSS de Hello Elementor/Elementor Pro (activos por
 * detrás, ver ADR 007/009) le imponía su color de acento por completo. */
.br-accordion-item { border-bottom: 1px solid var(--br-linea); }
.br-accordion-item__trigger {
	width: 100%;
	text-align: left;
	background: none !important;
	border: none;
	padding: 20px 0;
	font-family: var(--br-font-title);
	font-size: 20px;
	font-weight: 700;
	color: var(--br-texto) !important;
	cursor: pointer;
	display: flex;
	/* Los <button> traen white-space:nowrap por default del navegador, y al
	 * ser heredable se cuela hasta el título y el renglón de datos (ubicación
	 * · modalidad · tipo), impidiendo que hagan wrap — el texto se salía de
	 * la pantalla en vez de bajar de línea (reportado con captura en Vacantes,
	 * títulos largos como "Técnico Especialista en Equipos de Precisión"). */
	white-space: normal;
	justify-content: space-between;
	/* flex-start, no center: con metadata larga el bloque de título ahora
	 * puede ocupar 2 líneas (ver min-width:0 abajo) — con center el ícono
	 * +/✕ quedaba flotando a media altura en vez de alineado con el título. */
	align-items: flex-start;
	gap: 16px;
	transition: color .2s ease;
}
/* min-width:0 en el primer hijo (bloque de título + metadata): los flex-items
 * tienen min-width:auto por default, así que sin esto no se encogen para
 * ajustarse al botón — un texto largo (ej. "Querétaro, Qro. · Presencial ·
 * Tiempo completo · 2") empuja el contenido fuera de la pantalla en vez de
 * bajar de línea. Cubre Vacantes, /servicios/ y los grupos de single-servicio,
 * los tres reusan este mismo componente. */
.br-accordion-item__trigger > *:first-child {
	flex: 1 1 0%;
	min-width: 0 !important;
	overflow-wrap: break-word;
}
.br-accordion-item__trigger:hover,
.br-accordion-item__trigger:active { background: none !important; color: var(--br-azul) !important; }
.br-accordion-item__trigger:focus-visible {
	outline: 2px solid var(--br-azul);
	outline-offset: 2px;
}
.br-accordion-item__panel { padding: 0 0 24px; }
.br-accordion-item__panel[hidden] { display: none; }
.br-accordion-item__icon { display: inline-flex; flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--br-azul) !important; transition: transform .3s ease; }
.br-accordion-item.is-open .br-accordion-item__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .br-accordion-item__icon { transition: none; } }

/* Hub de Servicios: lista de links directos (antes acordeón con número +
 * ícono "+" — mismo look de fila que .br-accordion-item__trigger, pero sin
 * botón/panel: cada fila navega directo al servicio). */
.br-servicios-lista__item {
	display: block;
	padding: 20px 0;
	border-bottom: 1px solid var(--br-linea);
	font-family: var(--br-font-title);
	font-size: 20px;
	font-weight: 700;
	color: var(--br-texto);
	transition: color .2s ease;
}
.br-servicios-lista__item:hover,
.br-servicios-lista__item:focus-visible { color: var(--br-azul); }
.br-servicios-lista__item:focus-visible { outline: 2px solid var(--br-azul); outline-offset: 2px; }

/* Single de servicio: hero */
.br-hero-servicio {
	position: relative;
	background: var(--br-tinta);
	color: #fff;
	overflow: hidden;
}
.br-hero-servicio__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .32;
}
.br-hero-servicio__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(92deg, rgba(8, 22, 38, .95), rgba(8, 22, 38, .5));
}
/* padding-top/bottom, no el shorthand "padding": con "padding: 74px 0 78px"
 * el 0 central resetea el padding lateral que ya pone .br-container (34px),
 * dejando el h1 literalmente en x:0 — reportado con captura en Únete al
 * equipo, pero el mismo bug afectaba a las 5 páginas que reusan este hero
 * (Únete al equipo, Nosotros, Servicios, single-servicio, single-vacante). */
.br-hero-servicio__inner { position: relative; padding-top: 74px; padding-bottom: 78px; }
.br-hero-servicio h1 { font-size: 52px; max-width: 20ch; }
.br-hero-servicio__lead { font-size: 17px; color: var(--br-dark-body); max-width: 58ch; margin: 16px 0 0; }
@media (max-width: 782px) {
	.br-hero-servicio h1 { font-size: 30px; }
	/* Único lead del sitio sin reducción móvil hasta ahora — "Buscamos
	 * personas comprometidas..." en Únete al equipo se veía grande. */
	.br-hero-servicio__lead { font-size: 15px; margin-top: 12px; }
}

/* Modificador para heroes centrados (Nosotros, Contacto, Únete al equipo) — no afecta single-servicio.php */
.br-hero-servicio--center .br-eyebrow { text-align: center; }
.br-hero-servicio--center h1 { text-align: center; max-width: none; }
.br-hero-servicio--center .br-hero-servicio__lead { text-align: center; margin-left: auto; margin-right: auto; }

/* Single de servicio: layout de dos columnas */
.br-servicio-layout {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 56px;
	align-items: start;
	padding-top: 60px;
	padding-bottom: 84px;
}
.br-servicio-intro { font-size: 18px; line-height: 1.7; color: var(--br-texto-2); margin: 0 0 34px; }
@media (max-width: 900px) { .br-servicio-layout { grid-template-columns: 1fr; } }

/* Imagen inline entre la intro y los grupos — rompe el bloque de texto en
 * vez de dejar las dos fotos del servicio apiladas solo en el sidebar. */
.br-servicio-inline-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--br-linea); border-radius: 14px; box-shadow: 0 20px 45px -22px rgba(4, 10, 20, .55); margin: 0 0 34px; }
.br-servicio-inline-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.br-servicio-inline-img:hover img { transform: scale(1.04); }

/* Grupos como acordeón (reutiliza .br-accordion-item de vacantes) — el
 * primero abierto por defecto, el resto colapsado, para que "mucho texto"
 * no se sienta como un muro al cargar la página. */
.br-servicio-grupo .br-accordion-item__trigger h3 { font-size: 22px; color: var(--br-azul); margin: 0; }
.br-servicio-grupo__lista { display: grid; gap: 1px; background: var(--br-linea); border: 1px solid var(--br-linea); margin-bottom: 24px; }
/* Sin esto, el atributo [hidden] no oculta nada: la regla de arriba
 * (display: grid) es del mismo origen "autor" que domina sobre la regla por
 * defecto del navegador [hidden]{display:none}, así que el grupo se queda
 * visible siempre sin importar si el acordeón está abierto o cerrado. */
.br-servicio-grupo__lista[hidden] { display: none; }
.br-servicio-grupo__item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--br-gris-2);
	padding: 13px 18px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--br-texto-2);
	transition: background .2s ease;
}
.br-servicio-grupo__item:hover { background: var(--br-superficie); }
.br-servicio-grupo__item-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--br-verde); }
.br-servicio-grupo__item-icon svg { width: 16px; height: 16px; }

.br-servicio-sidebar { position: sticky; top: 150px; display: grid; gap: 20px; }
.br-servicio-sidebar__img { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 14px; box-shadow: 0 20px 45px -22px rgba(4, 10, 20, .55); }
.br-servicio-sidebar__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.br-servicio-sidebar__img:hover img { transform: scale(1.05); }
.br-servicio-cta { background: var(--br-tinta); color: #fff; padding: 28px 26px; }
.br-servicio-cta h3 { font-size: 24px; margin: 0; }
.br-servicio-cta p { font-size: 14.5px; color: var(--br-dark-body); margin: 10px 0 18px; }
.br-servicio-cta .br-btn { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* Página Nosotros */
.br-section--white { background: var(--br-superficie); }
.br-section-heading { margin: 10px 0 18px; }
.br-section-intro { max-width: 760px; font-size: 16px; margin: 0 0 40px; }

.br-checklist-wrap { max-width: 460px; }
.br-checklist-label { font-weight: 600; color: var(--br-texto); margin: 0 0 14px; }
.br-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.br-checklist li { position: relative; padding-left: 26px; font-size: 15px; color: var(--br-texto-2); }
.br-checklist li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--br-verde); }

.br-valor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Mismo tratamiento que .br-servicio-card (borde, glow radial, lift + sombra
 * al hover) para que se sienta del mismo sistema — ahora con foto. */
.br-valor-card {
	background: var(--br-superficie);
	border: 1px solid var(--br-linea);
	position: relative;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .4s ease;
}
.br-valor-card::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(circle at 30% 0%, rgba(61, 140, 224, .14), transparent 60%);
}
.br-valor-card:hover { transform: translateY(-8px); border-color: rgba(61, 140, 224, .4); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.br-valor-card:hover::before { opacity: 1; }
.br-valor-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; box-shadow: 0 20px 45px -22px rgba(4, 10, 20, .55); }
.br-valor-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.br-valor-card:hover .br-valor-card__img img { transform: scale(1.06); }
.br-valor-card h3 { position: relative; color: var(--br-azul); margin: 22px 26px 12px; font-size: 22px; }
.br-valor-card p { position: relative; font-size: 14.5px; margin: 0 26px 26px; }
@media (max-width: 900px) { .br-valor-grid { grid-template-columns: 1fr; } }

/* Misión/Visión como hero de página completo (mismo patrón a sangre completa
 * que .br-hero-servicio: video/overlay absolutos en la section, sin radio ni
 * sombra de tarjeta), texto directo encima del video con degradado +
 * text-shadow para legibilidad — inspirado en motionarray.com, a petición
 * del cliente. Reutiliza el clip del hero de Home. */
.br-mvv-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	margin: 64px 0;
}
.br-mvv-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Degradado uniforme (no oscuro-solo-a-la-izquierda como .br-hero-home__overlay)
 * porque aquí hay texto en las dos columnas, izquierda y derecha — necesita
 * la misma cobertura oscura en todo el ancho para que Visión (columna
 * derecha) se lea igual de bien que Misión. */
.br-mvv-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 22, 38, .75) 0%, rgba(8, 22, 38, .88) 100%);
}
.br-mvv-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px;
	width: 100%;
	padding: 74px 0 78px;
}
.br-mvv-text h3 {
	color: #fff;
	font-size: 34px;
	margin-bottom: 14px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 10px 28px rgba(0, 0, 0, .75);
}
.br-mvv-text p {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 10px 28px rgba(0, 0, 0, .75);
}
@media (max-width: 782px) {
	.br-mvv-hero { min-height: 0; margin: 40px 0; }
	.br-mvv-hero__grid { grid-template-columns: 1fr; padding: 40px 0; gap: 28px; }
}

.br-section-heading--center { text-align: center; }

/* Valores: mismo chip de ícono azul→verde que .br-servicio-card__icon, en
 * vez del anillo rojo girando sin parar con el texto apretado adentro. */
.br-valores-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-top: 40px; }
.br-valor-circle { text-align: center; }
.br-valor-circle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: linear-gradient(150deg, #0a438c, #061024);
	transition: background .35s ease, transform .35s ease;
}
.br-valor-circle:hover .br-valor-circle__icon { background: linear-gradient(150deg, #6ba82e, #1a2b0c); transform: scale(1.06) rotate(-6deg); }
.br-valor-circle__icon svg { width: 32px; height: 32px; stroke: #fff; }
.br-valor-circle__label { font-size: 17px; margin: 18px 0 8px; color: var(--br-texto); }
.br-valor-circle__desc { font-size: 14px; color: var(--br-texto-2); max-width: 22ch; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .br-valor-circle__icon { transition: none; } }
@media (max-width: 900px) { .br-valores-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .br-valores-grid { grid-template-columns: 1fr; } }

/* Mismo tratamiento que .br-servicio-card (icono, glow radial, lift +
 * sombra) para que ambas grillas de tarjetas se sientan del mismo sistema. */
.br-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.br-trust-item {
	background: var(--br-gris-2);
	border: 1px solid var(--br-linea);
	padding: 30px 26px;
	position: relative;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .4s ease;
}
.br-trust-item::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(circle at 30% 0%, rgba(61, 140, 224, .14), transparent 60%);
}
.br-trust-item:hover { transform: translateY(-8px); border-color: rgba(61, 140, 224, .4); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.br-trust-item:hover::before { opacity: 1; }
.br-trust-item__icon {
	width: 46px;
	height: 46px;
	margin-bottom: 20px;
	background: linear-gradient(150deg, #0a438c, #061024);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: background .35s ease, transform .35s ease;
}
.br-trust-item:hover .br-trust-item__icon { background: linear-gradient(150deg, #6ba82e, #1a2b0c); transform: rotate(-6deg); }
.br-trust-item__icon svg { width: 22px; height: 22px; stroke: #fff; }
.br-trust-item h4 { font-family: var(--br-font-title); font-size: 15px; color: var(--br-azul); margin: 0 0 8px; position: relative; transition: color .3s ease; }
.br-trust-item:hover h4 { color: var(--br-verde); }
.br-trust-item p { font-size: 13.5px; margin: 0; position: relative; }
@media (max-width: 900px) { .br-trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .br-trust-grid { grid-template-columns: 1fr; } }

/* Degradado + textura de líneas diagonales, mismo efecto que .cta-band en
 * bluered-home.html. Fondo fijo (no cambia con el tema), igual criterio que
 * el hero/franja de stats. */
.br-cta-band {
	background: linear-gradient(120deg, #0a438c, var(--br-azul));
	color: #fff;
	text-align: center;
	padding: 64px 0;
	position: relative;
	overflow: hidden;
}
.br-cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 24px);
}
.br-cta-band .br-container { position: relative; z-index: 1; }
.br-cta-band h2 { color: #fff; margin-bottom: 22px; }
.br-cta-band p { max-width: 620px; margin: 0 auto 26px; font-size: 15.5px; color: rgba(255, 255, 255, .85); }

/* Single de vacante: datos rápidos en el hero + formulario de postulación */
.br-vacante-badge {
	display: inline-block;
	background: var(--br-verde);
	color: var(--br-tinta);
	font-family: var(--br-font-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	vertical-align: middle;
}
.br-vacante-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.br-vacante-facts__item { font-size: 13.5px; color: var(--br-dark-body); }
.br-vacante-facts__item strong { color: #fff; }

.br-vacante-form-card { background: var(--br-superficie); border: 1px solid var(--br-linea); padding: 28px 26px; }
.br-vacante-form-card h3 { color: var(--br-azul); margin-bottom: 18px; }

.br-form { display: grid; gap: 14px; }
.br-form label {
	display: grid;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--br-texto-3);
}
.br-form input[type="text"],
.br-form input[type="email"],
.br-form input[type="tel"],
.br-form textarea,
.br-form select,
.br-form input[type="file"] {
	font-family: var(--br-font-body);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	padding: 11px 13px;
	border: 1px solid var(--br-linea);
	background: var(--br-superficie);
	color: var(--br-texto);
	width: 100%;
	box-sizing: border-box;
}
.br-form textarea { resize: vertical; min-height: 90px; }
.br-form button { justify-self: start; }
.br-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.br-alert { padding: 14px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; }
.br-alert--ok { background: #eaf6df; border: 1px solid var(--br-verde); color: #3a5a1a; }
.br-alert--error { background: #fdeceb; border: 1px solid #d9483c; color: #7a241c; }

/* Página Contacto: "Hablemos" + "Cotización" */
/* El botón "Solicitar cotización" del hero de Home enlaza a #datos-contacto
 * (ahora la sección .br-cotizacion) — con el header sticky (--br-header-h)
 * encima, un salto nativo del navegador al anchor dejaría el título tapado
 * por los primeros 74px. */
#datos-contacto { scroll-margin-top: calc(var(--br-header-h) + 20px); }

/* Azul marino fijo (no var(--br-tinta)): a diferencia de hero/footer, que
 * alternan casi-negro/navy con el toggle de tema, esta sección se pidió con
 * un azul oscuro constante en ambos temas, con un difuminado verde apenas
 * perceptible encima. */
.br-contacto-hero {
	position: relative;
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(122, 184, 41, .12), transparent 65%),
		#0a1b2e;
	color: #fff;
	padding: 90px 0 70px;
	overflow: hidden;
}
.br-contacto-hero__inner { text-align: center; }
.br-contacto-hero h1 { margin: 18px 0 0; }
.br-contacto-hero__lead { font-size: 17px; color: rgba(255, 255, 255, .78); max-width: 52ch; margin: 18px auto 0; }

.br-contacto-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 48px;
	text-align: left;
}
@media (max-width: 900px) { .br-contacto-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .br-contacto-cards { grid-template-columns: 1fr; } }
.br-contacto-card {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 26px 22px;
	display: grid;
	gap: 4px;
}
.br-contacto-card__icon {
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	background: linear-gradient(150deg, #0a438c, #061024);
	display: flex;
	align-items: center;
	justify-content: center;
}
.br-contacto-card__icon svg { width: 20px; height: 20px; stroke: #fff; }
.br-contacto-card__label {
	font-family: var(--br-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--br-verde);
	margin-bottom: 6px;
}
.br-contacto-card a,
.br-contacto-card span { color: #fff; font-size: 14.5px; }
.br-contacto-card a:hover { color: var(--br-verde); }
.br-contacto-card__sub { color: rgba(255, 255, 255, .6); font-size: 13px; }

.br-cotizacion {
	position: relative;
	background:
		radial-gradient(ellipse 55% 60% at 90% 100%, rgba(140, 198, 63, .18), transparent 60%),
		linear-gradient(135deg, #0a2f52, var(--br-tinta) 60%);
	color: #fff;
	padding: 90px 0;
	overflow: hidden;
}
.br-cotizacion__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.br-cotizacion h2 { color: #fff; margin-bottom: 16px; }
.br-cotizacion__lead { font-size: 15.5px; color: rgba(255, 255, 255, .8); margin-bottom: 36px; }
.br-cotizacion__form { text-align: left; }
.br-cotizacion__form label { color: rgba(255, 255, 255, .85); }
.br-cotizacion__form button { justify-self: center; margin-top: 6px; }

/* Home: hero */
.br-hero-home {
	position: relative;
	background:
		radial-gradient(ellipse 70% 55% at 12% 5%, rgba(61, 140, 224, .22), transparent 60%),
		radial-gradient(ellipse 55% 45% at 100% 20%, rgba(140, 198, 63, .10), transparent 55%),
		var(--br-tinta);
	color: #fff;
	overflow: hidden;
	min-height: 640px;
	display: flex;
	align-items: center;
}
/* El brillo radial es parte del look oscuro nuevo — en tema claro el hero se
 * queda en el navy plano original (--br-tinta ya vuelve a su valor de
 * siempre vía tokens.css en [data-theme="light"]). */
[data-theme="light"] .br-hero-home { background: var(--br-tinta); }
/* Difuminado arriba/abajo: el video (y su fallback de imagen) se funden con
 * el fondo del hero en vez de cortar en seco contra la topbar/header y la
 * sección siguiente. */
.br-hero-home__bg,
.br-hero-home__video {
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.br-hero-home__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; opacity: .3; }
.br-hero-home__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	opacity: 0;
	transition: opacity .5s ease;
}
.br-hero-home__video.is-active { opacity: 1; }
.br-hero-home__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 22, 38, .82), rgba(8, 22, 38, .97)); }
.br-hero-home__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* padding-top/bottom, no el shorthand "padding: 120px 0": el 0 lateral
 * pisaba el padding de .br-container (34px) — mismo bug que
 * .br-hero-servicio__inner, el h1 quedaba en x:0 en móvil. */
.br-hero-home__inner { position: relative; padding-top: 120px; padding-bottom: 120px; }
@media (min-width: 783px) {
	/* Nudge a la izquierda pedido por el usuario: el contenedor centrado deja
	 * un colchón amplio a la izquierda en pantallas anchas; en móvil no hay
	 * ese margen de sobra, así que el ajuste queda solo para escritorio.
	 * transform en vez de margin-left: un margin-left fijo con margin-right
	 * en auto rompe el cálculo de ancho de .br-container (el contenido se
	 * desborda) — transform solo desplaza lo ya pintado, sin tocar el layout. */
	.br-hero-home__inner { transform: translateX(-28px); }
}
.br-hero-home__eyebrow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--br-dark-body);
}
.br-hero-home__eyebrow-badge {
	background: var(--br-verde);
	color: var(--br-tinta);
	font-family: var(--br-font-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 4px 9px;
	border-radius: 999px;
}
.br-hero-home h1 { font-size: 57px; margin: 22px 0 0; max-width: 780px; text-align: left; }
.br-hero-home__accent { color: #fff; }
.br-hero-home__lead { font-size: 18px; color: var(--br-dark-body); max-width: 56ch; margin: 22px 0 36px; text-align: left; }
.br-hero-home__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 782px) {
	.br-hero-home { min-height: 520px; }
	/* Bajado de 38px: en un iPhone (~340px de ancho de contenido) el titular
	 * completo ("Protegemos la infraestructura...") envolvía en 6 líneas y
	 * ocupaba casi toda la pantalla — reportado por el usuario con captura. */
	.br-hero-home h1 { font-size: 19px; text-align: center; }
	.br-hero-home__lead { font-size: 14.5px; margin: 14px auto 26px; text-align: center; }
	/* Más padding-top que antes: el header ahora flota fijo sobre el video
	 * (ver ".home .br-header") en vez de empujar el hero hacia abajo, así
	 * que el propio hero necesita dejarle espacio al eyebrow para no quedar
	 * tapado por el pill. */
	.br-hero-home__inner { padding-top: 130px; padding-bottom: 80px; text-align: center; }
	/* El badge "Registro REPSE vigente" es más largo que el "REPSE" original
	 * y ya no cabe en una sola fila junto al texto en pantallas angostas —
	 * se centra y se le baja el radio (de pill/999px a uno más discreto) para
	 * que no se vea una cápsula estirada al partirse en dos líneas. */
	.br-hero-home__eyebrow { justify-content: center; border-radius: 16px; }
	/* Apilados y centrados (no en fila) — el secundario mantiene su caja con
	 * borde (fondo transparente, como ya era .br-btn--outline por defecto) —
	 * pedido explícito con captura de referencia. */
	.br-hero-home__ctas { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
	/* El overlay de escritorio llega a 97% de opacidad (pensado para el
	 * degradado izquierda-oscura/derecha-detalle en pantallas anchas) — en
	 * móvil eso tapaba casi por completo el video de fondo. Se aclara para
	 * que el video se perciba sin perder legibilidad del texto encima. */
	.br-hero-home__overlay { background: linear-gradient(180deg, rgba(8, 22, 38, .55), rgba(8, 22, 38, .8)); }
}

/* Franja de cifras en sección propia debajo del video del hero (ya no
 * superpuesta al video). Fondo fijo oscuro (--br-tinta) — mismo criterio que
 * el hero/CTA-bands: no cambia de tono con el toggle de tema. */
.br-stats-band { background: var(--br-tinta); padding: 40px 0; }
.br-stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.br-stats-band__stat { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 22px; }
.br-stats-band__stat:first-child { border-left: none; padding-left: 0; }
.br-stats-band__stat-icon { display: inline-flex; width: 22px; height: 22px; color: var(--br-verde); margin-bottom: 10px; }
.br-stats-band__stat-icon svg { width: 100%; height: 100%; }
.br-stats-band__stat-num { font-family: var(--br-font-title); font-size: 28px; font-weight: 700; color: var(--br-verde); }
.br-stats-band__stat-label { color: var(--br-dark-body); font-size: 12.5px; margin-top: 4px; }
@media (max-width: 782px) { .br-stats-band__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }
/* El degradado horizontal (tercio izquierdo oscuro/tranquilo para el texto,
 * detalle a la derecha) solo aplica donde el video reemplaza a la imagen de
 * fondo (>=783px, mismo breakpoint que arriba). En el fallback móvil el
 * degradado vertical de arriba se queda como está: ahí el texto ocupa casi
 * todo el ancho, no solo el tercio izquierdo. */
@media (min-width: 783px) {
	.br-hero-home__overlay {
		background: linear-gradient(92deg, rgba(8, 22, 38, .96) 26%, rgba(8, 22, 38, .4) 100%);
	}
}

/* Home: grid de 5 servicios */
.br-servicios-cta { margin: 0 0 34px; }
.br-servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.br-servicio-card {
	background: var(--br-superficie);
	border: 1px solid var(--br-linea);
	padding: 30px 26px;
	display: block;
	position: relative;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .4s ease;
}
.br-servicio-card::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(circle at 30% 0%, rgba(61, 140, 224, .14), transparent 60%);
}
.br-servicio-card:hover { transform: translateY(-8px); border-color: rgba(61, 140, 224, .4); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.br-servicio-card:hover::before { opacity: 1; }
/* Chip de icono: gradiente oscuro fijo (no es token de tema), mismo criterio
 * que el chrome fijo del hero/CTA-bands — el icono es un recuadro
 * autocontenido, no una superficie que deba cambiar con el tema. */
.br-servicio-card__icon {
	width: 46px;
	height: 46px;
	margin-bottom: 20px;
	background: linear-gradient(150deg, #0a438c, #061024);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: background .35s ease, transform .35s ease;
}
.br-servicio-card:hover .br-servicio-card__icon { background: linear-gradient(150deg, #6ba82e, #1a2b0c); transform: rotate(-6deg); }
.br-servicio-card__icon svg { width: 22px; height: 22px; stroke: #fff; }
.br-servicio-card__num { font-family: var(--br-font-mono); font-size: 12px; color: var(--br-verde); letter-spacing: .1em; margin-bottom: 14px; position: relative; }
.br-servicio-card h3 { font-size: 21px; color: var(--br-texto); margin-bottom: 10px; transition: color .2s ease; position: relative; }
.br-servicio-card p { font-size: 14px; margin-bottom: 18px; position: relative; }
.br-servicio-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--br-azul); text-transform: uppercase; letter-spacing: .05em; position: relative; transition: gap .3s ease, color .3s ease; }
.br-servicio-card__link svg { transition: transform .3s ease; }
.br-servicio-card:hover h3 { color: var(--br-azul); }
.br-servicio-card:hover .br-servicio-card__link { color: var(--br-verde); gap: 10px; }
@media (max-width: 900px) { .br-servicios-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .br-servicios-grid { grid-template-columns: 1fr; } }

/* Home: cobertura */
.br-mapa-wrap { margin-top: 48px; }

/* Home: bloque Nosotros */
.br-nosotros-preview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.br-nosotros-preview__img { position: relative; aspect-ratio: 4/3.2; overflow: hidden; border: 1px solid var(--br-linea); border-radius: 14px; box-shadow: 0 20px 45px -22px rgba(4, 10, 20, .55); }
.br-nosotros-preview__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.br-nosotros-preview__img:hover img { transform: scale(1.06); }
/* Badge flotante sobre la foto: fondo oscuro fijo con blur, funciona igual
 * en ambos temas porque cubre una fotografía, no una superficie de UI. */
.br-nosotros-preview__badge {
	position: absolute;
	bottom: 18px;
	left: 18px;
	right: 18px;
	background: rgba(5, 7, 10, .7);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .14);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.br-nosotros-preview__badge-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--br-verde);
	box-shadow: 0 0 0 5px rgba(122, 184, 41, .18);
	flex-shrink: 0;
	animation: br-badge-pulse 2s infinite;
}
.br-nosotros-preview__badge span { font-size: 13px; color: rgba(255, 255, 255, .9); }
@keyframes br-badge-pulse {
	0% { box-shadow: 0 0 0 0 rgba(122, 184, 41, .5); }
	70% { box-shadow: 0 0 0 9px rgba(122, 184, 41, 0); }
	100% { box-shadow: 0 0 0 0 rgba(122, 184, 41, 0); }
}
@media (prefers-reduced-motion: reduce) { .br-nosotros-preview__badge-dot { animation: none; } }
@media (max-width: 900px) { .br-nosotros-preview { grid-template-columns: 1fr; } }

/* Home: casos de éxito */
.br-casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.br-caso-card { display: block; background: var(--br-gris-2); border: 1px solid var(--br-linea); }
.br-caso-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px; box-shadow: 0 20px 45px -22px rgba(4, 10, 20, .55); }
.br-caso-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-caso-card__sector { font-family: var(--br-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--br-verde); padding: 18px 20px 0; }
.br-caso-card h3 { font-size: 19px; padding: 8px 20px 20px; margin: 0; color: var(--br-texto); }
@media (max-width: 900px) { .br-casos-grid { grid-template-columns: 1fr; } }

/* GENERAL: tratamiento de fotografías (tarjeta/bloque discreto, no fondos a
 * sangre completa de sección como .br-hero-home__bg/.br-hero-servicio__bg,
 * esos siguen sin radio). Esquinas redondeadas es una excepción específica a
 * imágenes — el resto del sitio sigue con --br-radius: 0 a propósito. Tinte
 * azul (::before) + degradado hacia fondo oscuro fijo (::after, mismo
 * criterio "no cambia con el tema" que .br-mvv-card::after) sobre cada foto. */
.br-nosotros-preview__img::before,
.br-caso-card__img::before,
.br-valor-card__img::before,
.br-servicio-inline-img::before,
.br-servicio-sidebar__img::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(61, 140, 224, .18), transparent 55%);
	pointer-events: none;
}
.br-nosotros-preview__img::after,
.br-caso-card__img::after,
.br-valor-card__img::after,
.br-servicio-inline-img::after,
.br-servicio-sidebar__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(4, 6, 10, .5) 100%);
	pointer-events: none;
}

/* Estado vacío honesto — cuando un shortcode aún no tiene contenido publicado */
.br-empty-state {
	padding: 24px;
	background: var(--br-gris);
	border: 1px dashed var(--br-linea);
	color: var(--br-mute);
	font-size: 13.5px;
}