/* Componentes compartidos por el portal público y los paneles.
   Todo se construye sobre los tokens que define el design system de
   CrocoBuilder; los valores de reserva de cada var() son los mismos, para que
   el sitio siga siendo legible si el constructor no llegara a cargar. */

/* ------------------------------------------------------------ Estructura */

.bt-container {
	width: 100%;
	max-width: var(--bt-container, 1180px);
	margin-inline: auto;
	padding-inline: var(--bt-space-5, 20px);
}

.bt-main {
	display: block;
	padding-block: var(--bt-space-8, 40px) var(--bt-space-10, 72px);
}

.bt-card {
	background: var(--bt-surface, #fff);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-lg, 24px);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
	padding: var(--bt-space-6, 24px);
	margin-block-end: var(--bt-space-6, 24px);
}

/*
 * Aquí hubo un parche que le quitaba la tarjeta de página a la portada, y más
 * abajo otro igual para /faq/. Desde octubre de 2026 ya no hacen falta: el
 * tema dejó de poner esa tarjeta alrededor de las páginas (`index.php`), que
 * es quitar la causa en vez de ir deshaciendo el efecto página a página.
 */

/*
 * Las páginas de contenido viven sobre blanco.
 *
 * Empezó en la portada v2 (septiembre de 2026: «fondo blanco, todo visual,
 * brillante») y en octubre se extiende a todas las páginas interiores, para
 * que la FAQ, «Quiénes somos», contacto y las legales compartan lienzo con la
 * portada y las tarjetas grises (`bt-tile`) se lean igual en todas.
 *
 * El segundo selector son las páginas que pinta la plantilla «Page ·
 * Individual» del constructor: `--has-body` lo pone CrocoBuilder cuando el
 * cuerpo viene de una plantilla suya, y `.page` lo acota a páginas (la 404
 * también es `--has-body`, pero no es `.page`). Listados, fichas y paneles
 * conservan el gris --bt-bg, que es el que hace destacar sus tarjetas blancas.
 */
body.home,
body.page.crocoblocks-theme-builder--has-body {
	background-color: var(--bt-surface, #fff);
}

/*
 * El cuerpo de una página interior, a todo el ancho cuando trae tarjetas.
 *
 * La plantilla «Page · Individual» limita su «Post Content» a 72ch, que es lo
 * correcto para leer una política de privacidad. Pero /faq/ y «Quiénes somos»
 * no son texto corrido: son documentos del constructor con rejillas de
 * tarjetas, y a 72ch tres tarjetas en fila quedaban en columnas de dos
 * palabras. Sus secciones llevan la clase `bt-interior__section`; donde la
 * hay, se levanta el límite. Cada bloque que necesite ancho de lectura se lo
 * pone él (la FAQ, con `bt-faq-solo`).
 */
.cb-pg_content:has(.bt-interior__section) { max-width: none; }

/*
 * El antetítulo de esa plantilla, como píldora y no como banda.
 *
 * `bt-eyebrow` existe dos veces: aquí abajo, como rótulo en bloque para las
 * cabeceras que pinta el plugin, y en el design system del constructor, como
 * píldora `inline-flex`. Dentro de la cabecera de página ganaba el `display:
 * block` de esta hoja y la píldora se estiraba de lado a lado del contenedor,
 * en todas las páginas interiores. Se le devuelve su forma sólo ahí.
 */
.bt-hero-wrap .bt-eyebrow {
	display: inline-flex;
	gap: 8px;
	width: fit-content;
	margin-block-end: 0;
}

.bt-eyebrow {
	display: block;
	margin-block-end: var(--bt-space-2, 8px);
	color: var(--bt-green-700, #0f7d5b);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bt-muted { color: var(--bt-ink-muted, #5c6c80); }

.bt-prose { line-height: 1.72; }
.bt-prose > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------- Botones */

.bt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bt-space-2, 8px);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--bt-radius-pill, 999px);
	font: inherit;
	font-size: 14px;
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bt-btn:disabled { opacity: .55; cursor: progress; }

.bt-btn-primary {
	background: var(--bt-grad-primary, linear-gradient(135deg, #18aa55 0%, #13996f 100%));
	color: #fff;
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-btn-secondary {
	background: var(--bt-surface, #fff);
	border-color: var(--bt-line-strong, rgba(138, 158, 181, .28));
	color: var(--bt-ink, #162638);
}

.bt-btn-ghost {
	background: transparent;
	color: var(--bt-ink-muted, #5c6c80);
}

/*
 * «Guardar en mi calendario» (requisito 5 del acta): se pidió un color
 * llamativo. Se usa el terciario de la marca —el turquesa—, que no compite
 * con el verde del botón principal de la encuesta y sigue al color que la
 * gestora elija en «Datos del negocio», igual que el resto de la rampa.
 */
.bt-btn-calendar {
	background: var(--bt-brand-tertiary, #11b7a5);
	color: #fff;
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-btn-small { padding: 8px 16px; font-size: 13px; }

@media (hover: hover) {
	.bt-btn:hover:not(:disabled) { transform: translateY(-1px); }
	.bt-btn-primary:hover:not(:disabled) { box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .075)); }
	.bt-btn-calendar:hover:not(:disabled) { box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .075)); }
	.bt-btn-secondary:hover:not(:disabled),
	.bt-btn-ghost:hover:not(:disabled) { background: var(--bt-green-050, #e9faf4); color: var(--bt-green-700, #0f7d5b); }
}

@media (prefers-reduced-motion: reduce) {
	.bt-btn { transition: none; }
	.bt-btn:hover:not(:disabled) { transform: none; }
}

/* -------------------------------------------------------------- Etiquetas */

.bt-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--bt-radius-pill, 999px);
	background: var(--bt-line, rgba(138, 158, 181, .16));
	color: var(--bt-ink-2, #34485e);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.4;
	white-space: nowrap;
}

.bt-status-active {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* El naranja del sistema es de relleno, no de texto: sobre un fondo claro no
   llega a AA. Se oscurece con color-mix para poder usarlo como color de letra
   sin salirse de la paleta. */
.bt-status-draft {
	background: var(--bt-orange-050, #fff5e6);
	color: color-mix(in srgb, var(--bt-orange-500, #ef9b18) 62%, #000);
}

.bt-status-closed {
	background: var(--bt-line, rgba(138, 158, 181, .16));
	color: var(--bt-ink-muted, #5c6c80);
}

/* ---------------------------------------------------------------- Avisos */

.bt-notice {
	margin-block: var(--bt-space-4, 16px);
	padding: var(--bt-space-4, 16px) var(--bt-space-5, 20px);
	border-radius: var(--bt-radius-md, 18px);
	border-inline-start: 3px solid currentColor;
	font-size: 14px;
}

.bt-notice--info {
	background: var(--bt-blue-050, #f1f5ff);
	color: color-mix(in srgb, var(--bt-blue-500, #4f7cff) 68%, #000);
}

.bt-notice--error {
	background: var(--bt-danger-050, #fff2f1);
	color: color-mix(in srgb, var(--bt-danger-500, #c84b4b) 82%, #000);
}

.bt-notice--success {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* ------------------------------------------------------- Tablas de datos */

.bt-datatable { display: block; }

.bt-datarow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bt-space-3, 12px);
	padding-block: var(--bt-space-3, 12px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-datarow:last-child { border-block-end: 0; }

.bt-datarow__label {
	flex: 0 1 auto;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: var(--bt-fs-sm, 13px);
}

.bt-datarow__value {
	flex: 1 1 60%;
	min-width: 0;
	text-align: end;
	font-weight: var(--bt-w-semi, 620);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Herramientas */

.bt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bt-space-4, 16px);
	margin-block-end: var(--bt-space-5, 20px);
}

.bt-toolbar h1,
.bt-toolbar h2 { margin: 0; }

.bt-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
}

/* ------------------------------------------------- Preguntas desplegables */

/*
 * Las preguntas frecuentes, plegadas (reunión de octubre de 2026).
 *
 * Hay dos FAQ en el sitio y las dos se ven igual:
 *
 * - La de producto (portada y /faq/) es un documento del constructor, que no
 *   tiene acordeón ni admite <details>. `assets/js/faq.js` envuelve cada
 *   pregunta en un botón y marca la lista con `.bt-faq--js`; las reglas que
 *   ocultan la respuesta cuelgan de esa clase, así que sin JavaScript no se
 *   oculta nada y la página se lee entera.
 * - La de cada ficha de servicio la pinta el plugin con <details> nativo
 *   (`.bt-faq__item`), que hasta ahora no tenía ningún estilo.
 *
 * El indicador es un «+» dibujado con dos filetes que se cierra en «−» al
 * abrir: no depende de ninguna fuente de iconos.
 */
.bt-faq--js .bt-faq-open__q { margin: 0; }

.bt-faq__toggle,
.bt-faq__item > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bt-space-4, 16px);
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	cursor: pointer;
}

.bt-faq__toggle::after,
.bt-faq__item > summary::after {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	margin-block-start: .35em;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
	color: var(--bt-green-700, #0f7d5b);
	transition: transform .18s ease;
}

.bt-faq__toggle[aria-expanded="true"]::after,
.bt-faq__item[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
	transform: rotate(180deg);
}

.bt-faq--js .bt-faq-open__a[hidden] { display: none; }

/* Fichas de servicio: mismo filete entre preguntas que en la FAQ de producto. */
.bt-service-faq { margin-block-start: var(--bt-space-7, 32px); }

.bt-faq__item {
	padding-block: 18px;
	border-block-end: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
}

.bt-faq__item:first-of-type { border-block-start: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28)); }

.bt-faq__item > summary {
	list-style: none;
	font-size: 18px;
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.35;
	letter-spacing: -.02em;
}

.bt-faq__item > summary::-webkit-details-marker { display: none; }

.bt-faq__item > .bt-prose {
	max-width: 62ch;
	margin-block-start: 8px;
	color: var(--bt-ink-2, #34485e);
	font-size: 15.5px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.bt-faq__toggle::after,
	.bt-faq__item > summary::after { transition: none; }
}

/* ------------------------------------------------------------- Filtros */

/*
 * Barra de filtros del listado de gestión (requisito 11 del acta). Formulario
 * GET sin JavaScript: los controles alinean por la base para que el botón
 * quede a la altura de los campos, no de las etiquetas.
 */
.bt-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--bt-space-4, 16px);
	margin-block-end: var(--bt-space-5, 20px);
	padding: var(--bt-space-4, 16px) var(--bt-space-5, 20px);
}

.bt-filters label {
	display: grid;
	gap: var(--bt-space-1, 4px);
	font-size: 13px;
	font-weight: var(--bt-w-semi, 620);
	color: var(--bt-ink-muted, #5c6c80);
}

.bt-filters input[type="text"],
.bt-filters select {
	min-width: 180px;
	padding: 9px 12px;
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 10px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #162638);
	font: inherit;
	font-size: 14px;
}

.bt-filters input[type="text"]:focus,
.bt-filters select:focus {
	outline: 2px solid var(--bt-green-600, #13996f);
	outline-offset: 1px;
	border-color: transparent;
}

@media (max-width: 640px) {
	.bt-filters label { flex: 1 1 100%; }
	.bt-filters input[type="text"],
	.bt-filters select { width: 100%; }
}

/* ------------------------------------------------------------- Pestañas */

.bt-tabs {
	display: flex;
	gap: var(--bt-space-1, 4px);
	margin-block-end: var(--bt-space-6, 24px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	/* En móvil las cuatro pestañas no caben: se desplazan dentro de su caja,
	   nunca arrastrando el ancho de la página. */
	overflow-x: auto;
	scrollbar-width: thin;
}

.bt-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--bt-space-2, 8px);
	padding: var(--bt-space-3, 12px) var(--bt-space-4, 16px);
	border-block-end: 2px solid transparent;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: 14px;
	font-weight: var(--bt-w-medium, 540);
	text-decoration: none;
	white-space: nowrap;
}

.bt-tab.is-active {
	border-block-end-color: var(--bt-green-600, #13996f);
	color: var(--bt-ink, #162638);
	font-weight: var(--bt-w-semi, 620);
}

.bt-tab__count {
	padding: 1px 8px;
	border-radius: var(--bt-radius-pill, 999px);
	background: var(--bt-line, rgba(138, 158, 181, .16));
	font-size: 11.5px;
}

.bt-tab.is-active .bt-tab__count {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

/* --------------------------------------------------------- Estado vacío */

.bt-empty-state {
	padding: var(--bt-space-9, 56px) var(--bt-space-5, 20px);
	border: 1px dashed var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	text-align: center;
}

.bt-empty-state h2 {
	font-size: var(--bt-fs-h3, 22px);
	line-height: 1.25;
	letter-spacing: -.03em;
}

.bt-empty-state p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--bt-ink-muted, #5c6c80);
}

/* ------------------------------------------------------------ Formularios */

.bt-form { max-width: 620px; }

.bt-field { margin-block-end: var(--bt-space-4, 16px); }

.bt-field label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--bt-fs-sm, 13px);
	font-weight: var(--bt-w-semi, 620);
	color: var(--bt-ink-2, #34485e);
}

.bt-field input:not([type="checkbox"]):not([type="radio"]),
.bt-field select,
.bt-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #162638);
	font: inherit;
	font-size: 15px;
}

.bt-field--check label {
	display: flex;
	align-items: flex-start;
	gap: var(--bt-space-2, 8px);
	font-weight: var(--bt-w-regular, 400);
	font-size: 14px;
}

.bt-field--check input { margin-block-start: 3px; flex: 0 0 auto; }

/* ------------------------------------------------ Portal público: evento */

.bt-event-hero {
	overflow: hidden;
	margin-block-end: var(--bt-space-6, 24px);
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-event-hero__cover {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Último peldaño de la escalera de respaldo: ni destacada ni portada por
   defecto → un degradado de marca que conserva la altura de la cabecera. */
.bt-event-hero__cover--vacia {
	background: var(--bt-grad-primary, linear-gradient(135deg, #18aa55 0%, #13996f 100%));
	opacity: .9;
}

.bt-event-hero__body { padding: var(--bt-space-7, 32px); }

.bt-event-hero__title {
	margin-block: var(--bt-space-3, 12px) var(--bt-space-2, 8px);
	font-size: clamp(30px, 3.4vw, 46px);
	/* Un punto menos que el 720 de los h1 (petición de septiembre de 2026):
	   a este tamaño el peso completo apelmaza, y 620 es el siguiente escalón
	   de la escala de pesos del diseño. */
	font-weight: var(--bt-w-semi, 620);
	line-height: 1.04;
	letter-spacing: -.045em;
}

.bt-event-hero__subtitle {
	font-size: 17px;
	color: var(--bt-ink-muted, #5c6c80);
}

.bt-event-hero__dates { color: var(--bt-green-700, #0f7d5b); }
.bt-event-hero__place { color: var(--bt-ink-2, #34485e); margin-block-end: 0; }

.bt-organizer__logo {
	max-height: 64px;
	width: auto;
	margin-block-end: var(--bt-space-3, 12px);
}

.bt-organizer__name {
	font-size: 18px;
	font-weight: var(--bt-w-semi, 620);
	margin-block-end: var(--bt-space-1, 4px);
}

/* ---------------------------------------------------- Patrocinadores */

.bt-event-sponsors { margin-block-end: var(--bt-space-7, 32px); }

.bt-sponsor-tier { margin-block-end: var(--bt-space-6, 24px); }

.bt-sponsor-tier__label {
	margin-block-end: var(--bt-space-3, 12px);
	font-size: var(--bt-fs-eyebrow, 11.5px);
	font-weight: var(--bt-w-semi, 620);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bt-green-700, #0f7d5b);
}

.bt-sponsor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--bt-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sponsor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	padding: var(--bt-space-5, 20px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-md, 18px);
	background: var(--bt-surface, #fff);
	text-align: center;
}

/* El nivel de patrocinio es un compromiso comercial: se distingue con una
   línea superior de color, no con tamaños distintos de tarjeta, para que la
   rejilla siga siendo regular. */
.bt-sponsor-tier--platino .bt-sponsor-card { border-block-start: 3px solid var(--bt-ink-2, #34485e); }
.bt-sponsor-tier--oro .bt-sponsor-card { border-block-start: 3px solid var(--bt-orange-500, #ef9b18); }
.bt-sponsor-tier--plata .bt-sponsor-card { border-block-start: 3px solid var(--bt-ink-muted, #5c6c80); }
.bt-sponsor-tier--bronce .bt-sponsor-card { border-block-start: 3px solid var(--bt-rose-500, #d95a45); }

.bt-sponsor-card__logo { max-height: 72px; width: auto; object-fit: contain; }
.bt-sponsor-card__name { font-weight: var(--bt-w-semi, 620); }

/* Cuando el logo es la marca genérica (SVG del plugin), el nombre acompaña
   dentro del mismo enlace: apilado debajo del dibujo, no en línea con él. */
.bt-generic-mark + .bt-sponsor-card__name {
	display: block;
	margin-block-start: var(--bt-space-2, 8px);
}

.bt-sponsor-card__certs,
.bt-sponsor-certs__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

/* Una certificación de nombre largo («Huella de Carbono MITECO») no cabe en
   una tarjeta de 180px si el chip no puede partir línea: se salía por los dos
   bordes. Dentro de la tarjeta, el chip parte y crece hacia abajo. */
.bt-sponsor-card__certs .bt-status {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

.bt-cert-list {
	margin: var(--bt-space-3, 12px) 0 0;
	padding: 0;
	list-style: none;
}

.bt-cert-list li {
	padding-block: var(--bt-space-2, 8px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-cert__meta { color: var(--bt-ink-muted, #5c6c80); font-size: var(--bt-fs-sm, 13px); }

/* --------------------------------------------------------------- Participa */

.bt-participate__qr {
	max-width: 220px;
	margin-block: var(--bt-space-4, 16px);
	padding: var(--bt-space-3, 12px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-md, 18px);
	background: #fff;
}

.bt-qr { display: block; width: 100%; height: auto; }

.bt-participate__note { color: var(--bt-ink-muted, #5c6c80); font-size: var(--bt-fs-sm, 13px); }

/* ------------------------------------------------------ Rejilla de eventos */

.bt-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
	gap: var(--bt-space-5, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-event-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bt-space-2, 8px);
	margin-block-end: 0;
}

.bt-event-card__title,
.bt-event-card h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -.02em;
}

.bt-event-card__date,
.bt-event-card__meta {
	margin: 0;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: var(--bt-fs-sm, 13px);
}

.bt-event-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
	margin-block-start: auto;
	padding-block-start: var(--bt-space-3, 12px);
}

/* La imagen destacada en las tarjetas del listado de gestión: va dentro del
   padding de la tarjeta (no a sangre, como en los archivos), así que lleva
   sus propias esquinas. */
.bt-event-card__cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--bt-radius-sm, 14px);
}

/* ------------------------------------------------------ Patrocinador: ficha */

.bt-sponsor-hero { margin-block-end: var(--bt-space-6, 24px); }
.bt-sponsor-hero__logo { max-height: 96px; width: auto; }
.bt-sponsor-hero__subtitle { color: var(--bt-ink-muted, #5c6c80); font-size: 17px; }

.bt-sponsor-list {
	display: grid;
	gap: var(--bt-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sponsor-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-4, 16px);
	margin-block-end: 0;
}

.bt-sponsor-row__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* La imagen destacada en los listados de patrocinadores: son fotos, no
   logotipos, así que se recortan a la caja en vez de encajarse dentro.
   El tamaño subió en septiembre de 2026 (88×60 se veía muy pequeño). */
.bt-sponsor-row__cover {
	flex: 0 0 auto;
	width: 168px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--bt-radius-sm, 14px);
}

/* En pantallas estrechas la tarjeta se apila: la foto pasa a ocupar el
   ancho, que a ese tamaño luce mejor que una miniatura suelta. */
@media (max-width: 640px) {
	.bt-sponsor-row__cover {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.bt-sponsor-row__body { flex: 1 1 220px; min-width: 0; }
.bt-sponsor-row__body h3 { margin: 0 0 2px; font-size: 17px; }
.bt-sponsor-row__body p { margin: 0; }

.bt-sponsor-row__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: var(--bt-space-2, 8px);
}

.bt-sponsor-row__actions { flex: 0 0 auto; margin-inline-start: auto; }

/* --------------------------------------------- Cabecera y pie del sitio */

/* La estructura la aporta CrocoBuilder (Theme Builder); la apariencia, estas
   reglas. Así el constructor no tiene que conocer los tokens y el aspecto no
   depende de una beta. */

.bt-siteheader {
	background: color-mix(in srgb, var(--bt-surface, #fff) 88%, transparent);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

/*
 * Cabecera pegajosa, sólo en escritorio (acuerdo de la reunión de agosto:
 * en tablet y móvil se desplaza con la página).
 *
 * El sticky va en el ENVOLTORIO del constructor y no en `.bt-siteheader`, y
 * no es capricho: CrocoBuilder envuelve la cabecera en un `<header
 * class="crocoblocks-theme-builder-location">` que mide exactamente lo mismo
 * que ella, y un sticky dentro de un padre de su misma altura no engancha
 * nunca — ese era el fallo silencioso de la versión anterior, que declaraba
 * el sticky en la cabecera y no pegaba nada. El umbral (1025px) es el mismo
 * en el que el menú deja de plegarse a modo tablet.
 */
/*
 * Sticky en TODOS los anchos (septiembre de 2026: primero solo escritorio;
 * la gestora pidió extenderlo a móvil y tableta, donde volver arriba para
 * navegar costaba mucho scroll). El z-index alto cumple además otra función:
 * el panel del menú móvil (fixed, z 9999) vive dentro del contexto de
 * apilamiento de este documento, y sin elevarlo el documento del cuerpo
 * —posterior en el DOM— pintaba encima del menú abierto.
 */
.crocoblocks-theme-builder-location:has(> .bt-siteheader) {
	position: sticky;
	top: 0;
	z-index: 90;
}

.bt-siteheader__inner {
	display: flex;
	align-items: center;
	gap: var(--bt-space-6, 24px);
	width: 100%;
	max-width: var(--bt-container, 1180px);
	margin-inline: auto;
	padding: var(--bt-space-3, 12px) var(--bt-space-5, 20px);
}

.bt-siteheader__logo {
	font-size: 20px;
	font-weight: var(--bt-w-bold, 720);
	letter-spacing: -.05em;
	color: var(--bt-ink, #162638);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * La marca nueva (agosto de 2026) es una imagen, no icono+texto: el enlace de
 * la marca envuelve el logo de eventsmov. Los ficheros viven en
 * assets/img/marca/ (recorte, transparente, blanca, gris, icono, apilada).
 */
.bt-siteheader__brandlink {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/*
 * El enlace de la marca lleva el texto «eventsmov» además de la imagen: el
 * elemento image de CrocoBuilder emite siempre alt="" (limitación de la
 * beta), así que sin ese texto el enlace no tendría nombre accesible. El
 * font-size:0 lo colapsa visualmente sin sacarlo del árbol de accesibilidad.
 */
.bt-siteheader__brandanchor,
.bt-sitefooter__brandlink {
	display: inline-flex;
	align-items: center;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}

.bt-siteheader__logoimg {
	display: block;
	height: 34px;
	width: auto;
}

.bt-sitefooter__logoimg {
	display: block;
	height: 28px;
	width: auto;
}

/* La navegación empuja al CTA contra el borde derecho. */
.bt-siteheader__nav { margin-inline-start: auto; }

/*
 * La cabecera en pantallas estrechas (auditoría responsive de septiembre de
 * 2026): el logotipo mide 343px de ancho natural y la marca no encoge, así
 * que logo + hamburguesa + «Solicitar demo» pedían 510px y la página entera
 * desbordaba el viewport de un móvil. La marca pasa a su propia línea (algo
 * más pequeña) y los controles se alinean a la derecha, debajo.
 */
@media (max-width: 640px) {
	.cb-bt_header_inner { flex-wrap: wrap; row-gap: 8px; }
	.bt-siteheader__brandlink { flex-basis: 100%; }
	.bt-siteheader__logoimg { height: 28px; }
	.cb-bt_header_nav { margin-inline-start: auto; }
}

/* El banner de cookies (CookieYes) trae un ancho fijo que desborda un móvil;
   el plugin no ofrece ajuste, así que el tope se le pone desde aquí. */
.cky-consent-container { max-width: calc(100vw - 16px) !important; }

/*
 * La portada en móvil respira sin obligar a tanto scroll (petición de
 * septiembre de 2026). Los rellenos originales vienen del CSS que genera el
 * constructor —vive en la base de datos, no en este repositorio—, así que
 * se pisan desde aquí con !important: es deliberado y queda acotado a esta
 * media query.
 */
@media (max-width: 640px) {
	/* Del borde de la pantalla al primer contenedor, la mitad: el
	   acolchado era doble (contenedor 20px + tarjeta de página 20px). */
	.bt-container { padding-inline: 10px; }
	.bt-main > .bt-container > article.bt-card { padding: 10px; }
}

/*
 * Portada v2 (septiembre de 2026): las clases nuevas del design system
 * (`bt-open-3__d`, `bt-step__d`, `bt-faq-open__a`…) ya nacen con interlineado
 * 1.6, así que desapareció el parche por nodo que corregía las tarjetas de la
 * portada de agosto. Lo que queda aquí es lo que el constructor no alcanza:
 *
 * - El H1 del hero lo pinta `bt-hero-title` con un interlineado de .7 en la
 *   clase del design system (un resto del rediseño de agosto); la regla de
 *   `.bt-hero-title` de más abajo lo corrige a 1.08 y aquí se le quita el
 *   margen superior que la clase también arrastra, porque el hero v2 apila
 *   con `gap` y ese margen descolgaba el titular.
 * - El foco visible de los enlaces del hero y del CTA lo aporta a11y.css.
 */
.crocoblocks-document .bt-hero-v2__copy .bt-hero-title {
	margin-block: 0;
	/* La clase limita a 14ch, pensado para el claim corto de agosto; con el
	   titular nuevo partía en cuatro líneas. La columna de 600px ya acota, y
	   a 62px «La movilidad de tu / público también / deja huella.» cabe en
	   tres, a la altura de la captura de al lado. */
	max-width: none;
	font-size: clamp(40px, 4.4vw, 62px);
}

.bt-siteheader .pb-nav__list {
	display: flex;
	align-items: center;
	gap: var(--bt-space-5, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-siteheader .pb-nav__link {
	color: var(--bt-ink-2, #34485e);
	font-size: 14.5px;
	font-weight: var(--bt-w-medium, 540);
	text-decoration: none;
	white-space: nowrap;
}

.bt-siteheader .pb-nav__collapse-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #162638);
}

/*
 * La hamburguesa clásica en vez del texto «Menu» (septiembre de 2026). El
 * texto NO se elimina: es el único nombre accesible del botón (no trae
 * aria-label), así que se recorta visualmente al estilo sr-only y las tres
 * líneas se dibujan con un pseudoelemento y sus sombras.
 */
.bt-siteheader .pb-nav__collapse-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bt-siteheader .pb-nav__collapse-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/*
 * Sólo cuando el menú está plegado (`.is-collapsed`): el constructor envuelve
 * la lista en `.pb-nav__mobile-panel` SIEMPRE, también en escritorio, así que
 * sin este cerrojo el fondo blanco y la sombra del desplegable móvil pintaban
 * un marco alrededor del menú horizontal — el «fondo blanco del menú» que la
 * reunión de agosto pidió quitar. En escritorio el panel queda transparente y
 * la cabecera aporta el único fondo.
 */
.bt-siteheader .pb-nav.is-collapsed .pb-nav__mobile-panel {
	background: var(--bt-surface, #fff);
	border-block-end: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .075));
	/* A pantalla completa (petición de septiembre de 2026): el panel del
	   constructor abría a 338px y dejaba una franja de página asomando. */
	width: 100vw;
	max-width: none;
	/* El constructor oculta el panel con translateX(-100%), nunca con
	   display:none, así que una transición aquí anima la entrada Y la
	   salida (desliza de izquierda a derecha) en cualquier navegador. */
	transition: transform .25s ease;
}

.bt-siteheader .pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: var(--bt-space-1, 4px);
	padding: var(--bt-space-4, 16px);
}

.bt-siteheader .pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__link {
	display: block;
	padding: 11px var(--bt-space-3, 12px);
	border-radius: var(--bt-radius-sm, 14px);
}

@media (hover: hover) {
	.bt-siteheader .pb-nav__link:hover { color: var(--bt-green-700, #0f7d5b); }
}

/* En pantallas estrechas el CTA se queda: es la conversión principal. Lo que
   se pliega es el menú, que ya trae su propio botón. */
@media (max-width: 640px) {
	.bt-siteheader__inner { gap: var(--bt-space-3, 12px); padding-inline: var(--bt-space-4, 16px); }
	.bt-siteheader__logo { font-size: 18px; }
	.bt-siteheader .bt-btn { padding: 9px 14px; font-size: 13px; }
}

.bt-sitefooter {
	margin-block-start: var(--bt-space-10, 72px);
	padding-block: var(--bt-space-9, 56px) var(--bt-space-6, 24px);
	background: var(--bt-ink, #162638);
	color: #fff;
}

.bt-sitefooter__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-8, 40px);
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: var(--bt-container, 1180px);
	margin-inline: auto;
	padding-inline: var(--bt-space-5, 20px);
}

.bt-sitefooter__brand { flex: 1 1 320px; max-width: 46ch; }

.bt-sitefooter__logo {
	display: inline-block;
	margin-block-end: var(--bt-space-3, 12px);
	font-size: 22px;
	font-weight: var(--bt-w-bold, 720);
	letter-spacing: -.05em;
	color: #fff;
	text-decoration: none;
}

.bt-sitefooter__claim {
	margin: 0;
	color: color-mix(in srgb, #fff 74%, var(--bt-ink, #162638));
	font-size: 14.5px;
}

.bt-sitefooter .pb-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--bt-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sitefooter .pb-nav__link {
	color: color-mix(in srgb, #fff 82%, var(--bt-ink, #162638));
	font-size: 14px;
	text-decoration: none;
}

.bt-sitefooter__legal {
	width: 100%;
	max-width: var(--bt-container, 1180px);
	margin: var(--bt-space-8, 40px) auto 0;
	padding: var(--bt-space-5, 20px) var(--bt-space-5, 20px) 0;
	border-block-start: 1px solid color-mix(in srgb, #fff 16%, transparent);
}

.bt-sitefooter__legal p {
	margin: 0;
	color: color-mix(in srgb, #fff 64%, var(--bt-ink, #162638));
	font-size: var(--bt-fs-sm, 13px);
}

@media (hover: hover) {
	.bt-sitefooter .pb-nav__link:hover,
	.bt-sitefooter__logo:hover { color: #fff; }
}

/* El panel deja de tener sentido bajo el pie oscuro; el menú va desplegado. */
.bt-sitefooter .pb-nav__collapse-toggle { display: none; }

/* ------------------------------------------------------- Cabos sueltos */

/* El anillo reutiliza el donut por dentro; aquí sólo se coloca su pie. */
.bt-ring-wrap { display: grid; justify-items: center; gap: var(--bt-space-2, 8px); }

/* El rótulo del anillo va debajo del círculo, no dentro: en el agujero los
   textos largos se apretujaban y la cifra sola se lee mejor. */
.bt-ring-wrap__caption {
	font-size: 12px;
	line-height: 1.4;
	color: var(--bt-ink-muted, #5c6c80);
	text-align: center;
	max-width: 24ch;
}

.bt-event-details .bt-datatable { margin-block-start: var(--bt-space-4, 16px); }

.bt-event-participants {
	margin-block-start: var(--bt-space-5, 20px);
	padding-block-start: var(--bt-space-5, 20px);
	border-block-start: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
}

.bt-organizer__web { font-size: var(--bt-fs-sm, 13px); }

.bt-reward__image {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--bt-radius-md, 18px);
	margin-block-end: var(--bt-space-4, 16px);
}

.bt-participate--closed { text-align: center; }

.bt-sponsor-events { margin-block-start: var(--bt-space-8, 40px); }

.bt-sponsor-certs { margin-block-start: var(--bt-space-4, 16px); }

.bt-form__result:empty { display: none; }

/* Plantilla de reserva del tema: archivos y paginación. */
.bt-archive-head { margin-block-end: var(--bt-space-7, 32px); }
.bt-archive-desc { color: var(--bt-ink-muted, #5c6c80); max-width: 62ch; }

.bt-page-links,
.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
	margin-block-start: var(--bt-space-7, 32px);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--bt-space-3, 12px);
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	background: var(--bt-green-050, #e9faf4);
	border-color: var(--bt-green-300, #c9eadf);
	color: var(--bt-green-700, #0f7d5b);
	font-weight: var(--bt-w-semi, 620);
}

/* ------------------------------------------------------------- Respuestas */

@media (max-width: 640px) {
	.bt-card { padding: var(--bt-space-5, 20px); border-radius: var(--bt-radius-md, 18px); }
	.bt-event-hero__body { padding: var(--bt-space-5, 20px); }
	.bt-datarow__value { text-align: start; flex-basis: 100%; }
	.bt-toolbar { align-items: flex-start; }
	.bt-toolbar .bt-btn { width: 100%; }
}

/* ------------------------------------------------------------- Landing */

/* Secciones de la portada. La estructura la compone CrocoBuilder; el ritmo
   vertical y la tipografía, estas reglas. */

.bt-section { padding-block: var(--bt-space-10, 72px); }

.bt-section--wash { background: var(--bt-green-050, #e9faf4); }

.bt-section__title {
	max-width: 22ch;
	margin-block-end: var(--bt-space-6, 24px);
	font-size: var(--bt-fs-h2, clamp(30px, 3.1vw, 44px));
	line-height: 1.06;
	letter-spacing: -.05em;
}

.bt-section__lead {
	max-width: 62ch;
	font-size: 17px;
	color: var(--bt-ink-2, #34485e);
}

/* ---- Reclamo ---- */

.bt-hero {
	padding-block: var(--bt-space-10, 72px) var(--bt-space-9, 56px);
	background: linear-gradient(180deg, var(--bt-green-050, #e9faf4) 0%, var(--bt-bg, #f5f8f9) 100%);
}

.bt-hero__inner { max-width: 62ch; }

/* El segundo selector es la clase que lleva el nodo del constructor en la
   portada (`bt-hero-title`, con guion): sin él, el titular caía al h1 base.
   El interlineado subió de .98 a 1.08 (septiembre de 2026): a dos líneas,
   por debajo de 1 los trazos descendentes rozaban la línea siguiente. */
.bt-hero__title,
.bt-hero-title {
	margin-block: var(--bt-space-2, 8px) var(--bt-space-4, 16px);
	font-size: var(--bt-fs-h1, clamp(40px, 4.85vw, 64px));
	line-height: 1.08;
	letter-spacing: -.058em;
	text-wrap: balance;
}

.bt-hero__text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--bt-ink-2, #34485e);
}

.bt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-3, 12px);
	margin-block-start: var(--bt-space-6, 24px);
}

/* ---- Rejillas de tarjetas ---- */

.bt-info-grid,
.bt-step-grid,
.bt-service-grid { align-items: stretch; }

.bt-info-card,
.bt-step-card,
.bt-service-card {
	display: flex;
	flex-direction: column;
	gap: var(--bt-space-2, 8px);
	height: 100%;
	margin-block-end: 0;
}

.bt-info-card h3,
.bt-step-card h3,
.bt-service-card h3 {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -.025em;
}

.bt-info-card p:last-child,
.bt-step-card p:last-child,
.bt-service-card p:last-child {
	margin-block-end: 0;
	color: var(--bt-ink-muted, #5c6c80);
}

/* El número de la tarjeta es decorativo: grande, tenue y fuera del flujo
   de lectura de quien usa lector de pantalla no aporta nada, pero tampoco
   estorba, así que se deja visible y sin más semántica. */
.bt-info-card__num {
	margin: 0;
	font-size: 34px;
	font-weight: var(--bt-w-bold, 720);
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--bt-green-300, #c9eadf);
}

/* ---- Llamada final ---- */

.bt-cta {
	background: var(--bt-ink, #162638);
	color: #fff;
}

.bt-cta__inner { max-width: 56ch; }

.bt-cta__title {
	color: #fff;
	font-size: var(--bt-fs-h2, clamp(30px, 3.1vw, 44px));
	line-height: 1.06;
	letter-spacing: -.05em;
}

.bt-cta p {
	color: color-mix(in srgb, #fff 78%, var(--bt-ink, #162638));
	font-size: 17px;
}

/* Los anclajes del menú no deben dejar el titular pegado a la cabecera fija. */
:where(#inicio, #problema, #producto, #solucion, #como-funciona, #metodologia, #eventos, #faq, #contacto) {
	scroll-margin-top: 84px;
}

@media (max-width: 640px) {
	.bt-section, .bt-hero { padding-block: var(--bt-space-8, 40px); }
	.bt-hero__actions .bt-btn { width: 100%; }
}

/* ==========================================================================
   Directorio de eventos
   ========================================================================== */

/* Los filtros son enlaces, no un formulario: cada combinación tiene su URL, así
   que funciona atrás, se puede compartir y los buscadores la recorren. */
.bt-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-5) var(--bt-space-7);
	margin: var(--bt-space-6) 0 var(--bt-space-5);
	padding-bottom: var(--bt-space-5);
	border-bottom: 1px solid color-mix(in srgb, var(--bt-ink-muted) 18%, transparent);
}

.bt-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-2);
}

.bt-filter-group--vista { margin-inline-start: auto; }

.bt-filter-group__label {
	margin-inline-end: var(--bt-space-1);
	color: var(--bt-ink-muted);
	font-size: .8125rem;
	font-weight: var(--bt-w-semi);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bt-chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .38em .85em;
	border: 1px solid color-mix(in srgb, var(--bt-ink-muted) 28%, transparent);
	border-radius: var(--bt-radius-pill);
	color: var(--bt-ink);
	font-size: .875rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.bt-chip:hover { border-color: var(--bt-green-600); background: var(--bt-green-050); }

.bt-chip.is-active {
	background: var(--bt-green-600);
	border-color: var(--bt-green-600);
	color: #fff;
}

.bt-chip__count {
	color: var(--bt-ink-muted);
	font-size: .78em;
	font-variant-numeric: tabular-nums;
}

.bt-chip.is-active .bt-chip__count { color: color-mix(in srgb, #fff 78%, transparent); }

.bt-archive-filters__reset { margin: 0 0 var(--bt-space-5); font-size: .875rem; }

/* --------------------------------------------------------------- Rejilla */

.bt-event-grid {
	display: grid;
	gap: var(--bt-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-event-grid--rejilla {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.bt-event-grid--lista { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- Tarjeta */

.bt-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	transition: box-shadow .15s ease, transform .15s ease;
}

/* Toda la tarjeta se puede pulsar.
   El enlace real vive en el título y se estira hasta cubrir el bloque. Se
   prefiere esto a un `onclick` en el contenedor porque conserva lo que un
   enlace hace y un `div` clicable no: tabulador, clic central, destino visible
   en la barra de estado y anuncio correcto en un lector de pantalla. */
.bt-event-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bt-event-card:hover { box-shadow: 0 18px 44px rgba(22, 38, 56, .12); }
.bt-event-card:focus-within { outline: 3px solid var(--bt-green-600); outline-offset: 2px; }

.bt-event-card__media { line-height: 0; }

.bt-event-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Sin foto no se deja un hueco roto: un bloque con el degradado de marca
   mantiene la altura de la tarjeta y la rejilla no se desalinea. */
.bt-event-card__img--vacia {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bt-grad-primary);
	opacity: .85;
}

.bt-event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--bt-space-2);
	padding: var(--bt-space-5);
}

.bt-event-card__type { margin: 0; }

.bt-event-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.bt-event-card__title a { color: inherit; text-decoration: none; }
.bt-event-card:hover .bt-event-card__title a { color: var(--bt-green-700); }

.bt-event-card__date,
.bt-event-card__place {
	margin: 0;
	color: var(--bt-ink-muted);
	font-size: .9375rem;
}

.bt-event-card__date { font-weight: var(--bt-w-medium); color: var(--bt-ink); }

/* ------------------------------------------------------- Vista de lista */

/* Dos columnas: 150 px de foto a la izquierda y el texto a la derecha.
   La lista existe para recorrer muchos eventos de un vistazo, así que la
   tarjeta se queda en la altura de la miniatura y no crece con la foto. */
.bt-event-card--lista {
	flex-direction: row;
	align-items: stretch;
	gap: var(--bt-space-5);
}

.bt-event-card--lista .bt-event-card__media {
	flex: 0 0 150px;
	width: 150px;
}

.bt-event-card--lista .bt-event-card__img,
.bt-event-card--lista .bt-event-card__img--vacia {
	width: 150px;
	height: 150px;
	aspect-ratio: 1;
	object-fit: cover;
}

.bt-event-card--lista .bt-event-card__body {
	justify-content: center;
	gap: var(--bt-space-1);
	padding: var(--bt-space-4) var(--bt-space-5) var(--bt-space-4) 0;
}

.bt-event-card--lista .bt-event-card__title { font-size: 1.0625rem; }

/* Por debajo de 30rem la foto de 150 px se come media pantalla. */
@media (max-width: 30rem) {
	.bt-event-card--lista { gap: var(--bt-space-4); }

	.bt-event-card--lista .bt-event-card__media { flex-basis: 96px; width: 96px; }

	.bt-event-card--lista .bt-event-card__img,
	.bt-event-card--lista .bt-event-card__img--vacia { width: 96px; height: 96px; }
}

/* ------------------------------------------------------------------- Pie */

.bt-archive-foot {
	margin-top: var(--bt-space-8);
	padding-top: var(--bt-space-6);
	border-top: 1px solid color-mix(in srgb, var(--bt-ink-muted) 18%, transparent);
	text-align: center;
}

.bt-pagination { margin-top: var(--bt-space-7); }
.bt-pagination ul { display: flex; flex-wrap: wrap; gap: var(--bt-space-2); justify-content: center; list-style: none; margin: 0; padding: 0; }
.bt-pagination a, .bt-pagination span { display: inline-flex; min-width: 2.4em; justify-content: center; padding: .4em .7em; border-radius: var(--bt-radius-sm); text-decoration: none; }
.bt-pagination .current { background: var(--bt-green-600); color: #fff; }

/* ==========================================================================
   Portada: secciones a dos columnas
   ========================================================================== */

/*
 * Texto a la izquierda, imagen a la derecha, sin tocar el árbol del documento.
 *
 * La rejilla hace el trabajo que normalmente haría un contenedor por columna:
 * todo lo que no sea la imagen cae en la primera columna, cada cosa en su fila,
 * y la imagen ocupa la segunda de arriba abajo. Así el constructor sigue viendo
 * los mismos nodos que antes —titular, texto, botones— y la gestora puede
 * reordenarlos sin que la maquetación se rompa.
 */
.bt-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bt-space-9);
	align-items: center;
}

.bt-split > :not(.bt-split__img) { grid-column: 1; }

.bt-split__img {
	grid-column: 2;
	grid-row: 1 / -1;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 26rem;
	object-fit: cover;
	border-radius: var(--bt-radius-lg);
	box-shadow: 0 24px 60px rgba(22, 38, 56, .14);
}

/* El CTA venía centrado; a dos columnas el texto centrado contra una foto a la
   derecha queda descolgado. */
.bt-cta__inner.bt-split { text-align: start; }
.bt-cta__inner.bt-split .bt-btn { justify-self: start; }

/* Por debajo de 62rem la foto deja de acompañar y empieza a estorbar: dos
   columnas de 300 px no dan ni para el titular ni para que la imagen se lea. */
@media (max-width: 62rem) {
	.bt-split { grid-template-columns: 1fr; gap: var(--bt-space-6); }

	.bt-split > :not(.bt-split__img) { grid-column: 1; }

	.bt-split__img {
		grid-column: 1;
		grid-row: auto;
		max-height: 18rem;
		border-radius: var(--bt-radius-md);
	}
}

/* ------------------------------------------- Foto en la tarjeta de sección */

/*
 * 16:9 recortado y ancho completo: es lo que mantiene la simetría.
 *
 * Sin `aspect-ratio` cada tarjeta hereda la proporción de su foto y las tres de
 * la fila dejan de medir lo mismo, que era justo lo que había que evitar. El
 * recorte ya viene hecho desde Unsplash, pero se fija aquí también para que una
 * foto sustituida a mano por la gestora no descuadre la rejilla.
 */
.bt-service-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--bt-radius-sm);
	margin-block-end: var(--bt-space-2);
}

/* ==========================================================================
   Listado del blog
   ========================================================================== */

/* Comparte forma con las tarjetas de evento pero no selector, por lo mismo que
   el catálogo: `.bt-event-card` la usan además los dos paneles y `dashboard.js`
   la toma como gancho. Lo que se comparte son los tokens. */

.bt-post-grid {
	display: grid;
	gap: var(--bt-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-post-grid--rejilla { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.bt-post-grid--lista { grid-template-columns: 1fr; }

.bt-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	transition: box-shadow .15s ease;
}

.bt-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bt-post-card:hover { box-shadow: 0 18px 44px rgba(22, 38, 56, .12); }
.bt-post-card:focus-within { outline: 3px solid var(--bt-green-600); outline-offset: 2px; }

.bt-post-card__media { line-height: 0; }

.bt-post-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bt-post-card__img--vacia {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bt-grad-primary);
	opacity: .85;
}

.bt-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--bt-space-2);
	padding: var(--bt-space-5);
}

.bt-post-card__topic { margin: 0; }

.bt-post-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.bt-post-card__title a { color: inherit; text-decoration: none; }
.bt-post-card:hover .bt-post-card__title a { color: var(--bt-green-700); }

.bt-post-card__date {
	margin: 0;
	color: var(--bt-ink-muted);
	font-size: .9375rem;
}

.bt-post-card__excerpt {
	margin: 0;
	color: var(--bt-ink-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

/* Vista de lista: 150 px de foto a la izquierda, texto a la derecha. La tarjeta
   se queda a la altura de la miniatura; por eso el extracto no se pinta. */
.bt-post-card--lista {
	flex-direction: row;
	align-items: stretch;
	gap: var(--bt-space-5);
}

.bt-post-card--lista .bt-post-card__media { flex: 0 0 150px; width: 150px; }

.bt-post-card--lista .bt-post-card__img,
.bt-post-card--lista .bt-post-card__img--vacia {
	width: 150px;
	height: 150px;
	aspect-ratio: 1;
	object-fit: cover;
}

.bt-post-card--lista .bt-post-card__body {
	justify-content: center;
	gap: var(--bt-space-1);
	padding: var(--bt-space-4) var(--bt-space-5) var(--bt-space-4) 0;
}

.bt-post-card--lista .bt-post-card__title { font-size: 1.0625rem; }

@media (max-width: 30rem) {
	.bt-post-card--lista { gap: var(--bt-space-4); }
	.bt-post-card--lista .bt-post-card__media { flex-basis: 96px; width: 96px; }

	.bt-post-card--lista .bt-post-card__img,
	.bt-post-card--lista .bt-post-card__img--vacia { width: 96px; height: 96px; }
}

/* ------------------------------------------------- Filtros que se pliegan */

/* El resumen se disfraza de ficha para que la fila no se rompa visualmente.
   `list-style: none` y `::-webkit-details-marker` quitan el triangulito, que
   en medio de una fila de chips queda fuera de sitio. */
.bt-filter-more { display: contents; }

.bt-chip--more {
	cursor: pointer;
	list-style: none;
	border-style: dashed;
	font-weight: var(--bt-w-medium);
}

.bt-chip--more::-webkit-details-marker { display: none; }

.bt-filter-more[open] .bt-chip--more { background: var(--bt-green-050); border-style: solid; }

/* El panel ocupa una fila entera: con `display: contents` en el `<details>`,
   los chips plegados fluyen en la misma rejilla que los visibles, y esta línea
   fuerza que empiecen en su propio renglón para que se lea que son «los otros». */
.bt-filter-more__panel {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2);
	flex-basis: 100%;
	padding-top: var(--bt-space-2);
}

/* ---------------------------------------------------- Buscador por título */

.bt-filter-group--buscar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-2);
}

.bt-filter-search {
	min-width: 12rem;
	padding: .45em .8em;
	border: 1px solid color-mix(in srgb, var(--bt-ink-muted) 30%, transparent);
	border-radius: var(--bt-radius-pill);
	background: var(--bt-surface, #fff);
	font: inherit;
	font-size: .9375rem;
}

.bt-filter-search:focus-visible {
	outline: 3px solid var(--bt-green-600);
	outline-offset: 1px;
}

.bt-filter-group--buscar .bt-btn { padding-block: .4em; font-size: .9375rem; }

/* ==========================================================================
   Catálogo de servicios
   ========================================================================== */

/* No reutiliza `.bt-event-card` a propósito. Esa clase la comparten el
   directorio, el panel del cliente y el del gestor, y `dashboard.js` la usa
   como gancho: colgar de ella el catálogo comercial haría que un retoque en un
   sitio moviera los otros tres. Comparten tokens, no selectores.

   Mínimo 18rem y no 17: la tarjeta de servicio lleva subtítulo, y con la
   columna más estrecha se partía en cuatro líneas. */
.bt-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--bt-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-catalog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	transition: box-shadow .15s ease;
}

/* Toda la tarjeta se puede pulsar: el enlace vive en el título y se estira
   hasta cubrir el bloque. Igual que en eventos, y por lo mismo. */
.bt-catalog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bt-catalog-card:hover { box-shadow: 0 18px 44px rgba(22, 38, 56, .12); }
.bt-catalog-card:focus-within { outline: 3px solid var(--bt-green-600); outline-offset: 2px; }

.bt-catalog-card__media { line-height: 0; }

.bt-catalog-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bt-catalog-card__img--vacia {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bt-grad-primary);
	opacity: .85;
}

/* El cuerpo crece y el «Ver el servicio» se va al fondo con `margin-top:auto`:
   así queda a la misma altura en toda la fila aunque los subtítulos midan
   distinto, que es lo que pasa con estos cinco. */
.bt-catalog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--bt-space-2);
	padding: var(--bt-space-5);
}

.bt-catalog-card__type { margin: 0; }

.bt-catalog-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.bt-catalog-card__title a { color: inherit; text-decoration: none; }
.bt-catalog-card:hover .bt-catalog-card__title a { color: var(--bt-green-700); }

.bt-catalog-card__desc {
	margin: 0;
	color: var(--bt-ink-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

/* Decorativo y `aria-hidden`: el enlace real es el título, y anunciar «Ver el
   servicio» además obligaría a oír dos veces el mismo destino. */
.bt-catalog-card__more {
	margin-top: auto;
	padding-top: var(--bt-space-3);
	color: var(--bt-green-700);
	font-size: .9375rem;
	font-weight: var(--bt-w-semi);
}

/* ------------------------------------------------------- Hero de servicio */

/* Mismo patrón que el hero del evento: foto arriba, texto debajo. El texto no
   va superpuesto sobre la imagen porque el contraste dependería de qué haya
   salido en la zona donde cae el titular, y eso deja de cumplirse en cuanto
   alguien cambia la foto por otra más clara. */
.bt-service-hero {
	overflow: hidden;
	margin-block-end: var(--bt-space-6);
	border-radius: var(--bt-radius-lg);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-service-hero__cover {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.bt-service-hero__body { padding: var(--bt-space-7); }

.bt-service-hero__eyebrow { margin: 0 0 var(--bt-space-2); }

.bt-service-hero__title {
	margin-block: 0 var(--bt-space-3);
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.04;
	letter-spacing: -.045em;
}

.bt-service-hero__subtitle {
	margin: 0;
	max-width: 60ch;
	font-size: 17px;
	color: var(--bt-ink-muted);
}

@media (max-width: 48rem) {
	.bt-service-hero__body { padding: var(--bt-space-5); }
}

/* ==========================================================================
   Migas de pan
   ========================================================================== */

.bt-breadcrumbs {
	margin-block-end: var(--bt-space-4);
	font-size: .875rem;
	line-height: 1.4;
}

.bt-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El separador es decorativo y va en CSS, no en el HTML: así no lo lee un
   lector de pantalla —que ya anuncia la lista y su orden— ni se cuela en el
   texto al copiar la ruta. */
.bt-breadcrumbs__item + .bt-breadcrumbs__item::before {
	content: "›";
	margin-inline-end: var(--bt-space-2);
	color: var(--bt-ink-muted);
}

.bt-breadcrumbs__item a {
	color: var(--bt-ink-muted);
	text-decoration: none;
}

.bt-breadcrumbs__item a:hover,
.bt-breadcrumbs__item a:focus-visible {
	color: var(--bt-green-700);
	text-decoration: underline;
}

/* El paso actual no es enlace: se distingue por peso, no sólo por color, para
   que también se note sin percibir el matiz. */
.bt-breadcrumbs__item [aria-current="page"] {
	color: var(--bt-ink);
	font-weight: var(--bt-w-medium);
}

/* Sobre el fondo blanco de un hero el gris de la ruta se queda corto de
   contraste con el borde de la tarjeta; se separa un poco de la foto. */
.bt-event-hero__body > .bt-breadcrumbs,
.bt-service-hero__body > .bt-breadcrumbs {
	margin-block-end: var(--bt-space-3);
}