/*
 * Única hoja de estilos del sitio. Prohibido CSS en snippets, en
 * bloques del editor, en PHP suelto o con !important. Todo estilo
 * nuevo se agrega ACÁ, usando las variables de abajo.
 */

/* ==========================================================
   VARIABLES — valores neutros y sobrios de arranque. Se van a
   terminar de definir cuando se trabaje el diseño real del sitio.
   ========================================================== */
:root {
	/* Colores — paleta de marca congelada el 15/08/2026 (ver marca/COLORES.txt) */
	--color-primario: #0e7c66;
	--color-secundario: #4a4a4a;
	--color-fondo: #ffffff;
	--color-texto: #1f2937;
	--color-borde: #d9d9d9;
	--color-menta: #d7f0e9;
	--color-acento: #f59e0b; /* SOLO acentos puntuales: pulso, tilde verificado — nunca texto ni fondos grandes */

	/* Tipografía */
	--tamano-texto-base: 16px;
	--tamano-texto-chico: 0.875rem;
	--tamano-texto-titulo: 1.75rem;
	--tamano-texto-subtitulo: 1.25rem;

	/* Espaciados */
	--espacio-chico: 0.5rem;
	--espacio-medio: 1rem;
	--espacio-grande: 2rem;

	/* Bordes */
	--radio-borde: 4px;

	/* Estado (formularios, avisos) */
	--color-error: #b42318; /* SOLO fondos sólidos (globito de aviso) — para texto usar --color-error-texto */
	--color-error-fondo: #fdf1f0;
	--color-error-texto: #b42318; /* mismo tono en claro; en el panel oscuro se aclara para seguir siendo legible */
	--color-exito: #1e7a34;
	--color-acento-fondo: #fffaf0;
	--color-superficie: var(--color-menta);
}

/* ==========================================================
   RESETEO SUAVE
   ========================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================
   TIPOGRAFÍA DEL SISTEMA
   ========================================================== */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--tamano-texto-base);
	color: var(--color-texto);
	background-color: var(--color-fondo);
	line-height: 1.5;
}

h1 {
	font-size: var(--tamano-texto-titulo);
}

h2 {
	font-size: var(--tamano-texto-subtitulo);
}

a {
	color: var(--color-primario);
}

/* ==========================================================
   EL LIENZO — ancho completo por fuera, 1280 por dentro
   (28/08/2026, G1 de la revisión de escritorio)

   Antes, todo el sitio vivía adentro de una caja de 960px: en una
   pantalla grande se veía encajonado y ninguna sección podía tener
   fondo de borde a borde. Ahora el <main> es una grilla de tres
   columnas — margen, contenido, margen — donde:

     · el contenido normal (cualquier hijo directo) cae solo en la
       columna del medio, que llega hasta --bm-ancho-maximo (1280px)
       con los márgenes crecientes de --bm-margen-pagina;
     · lo que lleve .bm-a-todo-ancho ocupa las tres columnas, así su
       FONDO llega hasta los dos bordes de la pantalla (y adentro
       vuelve a centrar su contenido con .bm-contenedor).

   .bm-lienzo repite la misma grilla para un envoltorio intermedio
   (la portada, por ejemplo), que necesita que sus secciones puedan
   ser de ancho completo aunque estén un nivel más adentro.

   El texto de lectura larga (guías, artículos, políticas) NO se
   ensancha: sigue limitado a --bm-ancho-lectura por su propia clase
   (.bm-prosa y compañía), centrado adentro de esta grilla.
   ========================================================== */
.sitio-main,
.bm-lienzo {
	display: grid;
	grid-template-columns:
		[bm-total-start] minmax(var(--bm-margen-pagina), 1fr)
		[bm-centro-start] minmax(0, var(--bm-ancho-maximo))
		[bm-centro-end] minmax(var(--bm-margen-pagina), 1fr)
		[bm-total-end];
}

.sitio-main > *,
.bm-lienzo > * {
	grid-column: bm-centro;
	min-width: 0; /* sin esto, una tabla o un texto largo estira la columna y empuja scroll horizontal */
}

.sitio-main > .bm-a-todo-ancho,
.bm-lienzo > .bm-a-todo-ancho {
	grid-column: bm-total;
}

/* Varias plantillas (institucionales, /soy-medico/, /creditos/)
   envuelven todo su contenido en .bm-contenedor. Como hijo directo
   del lienzo eso sobraría: la grilla ya le da el tope de 1280 y los
   márgenes laterales, y el padding propio del contenedor las dejaría
   más angostas todavía. Adentro de una sección de ancho completo,
   .bm-contenedor sigue funcionando igual que siempre. */
.sitio-main > .bm-contenedor,
.bm-lienzo > .bm-contenedor {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================
   HEADER / FOOTER — mínimo
   ========================================================== */
.sitio-header {
	border-bottom: 1px solid var(--color-borde);
}

.sitio-main {
	padding-top: var(--espacio-grande);
	padding-bottom: var(--espacio-grande);
}

.sitio-footer {
	border-top: 1px solid var(--color-borde);
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
}

/* ==========================================================
   PÁGINAS DE ESPECIALIDAD (Fase 4A: /{especialista}/ y sus zonas)
   ========================================================== */
.bmed-seo-pagina {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-grande);
}

.bmed-migas {
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-suave);
}

.bmed-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmed-migas li:not(:last-child)::after {
	content: '›';
	margin-left: 0.4rem;
	color: var(--bm-gris-borde);
}

.bmed-migas a {
	color: var(--bm-verde);
	text-decoration: none;
}

.bmed-migas a:hover {
	text-decoration: underline;
}

.bmed-migas span[aria-current='page'] {
	color: var(--bm-gris-suave);
}

.bmed-seo-intro {
	max-width: 640px;
	color: var(--color-secundario);
}

.bmed-lista-medicos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--espacio-medio);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmed-tarjeta-medico {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
}

.bmed-tarjeta-medico a {
	font-weight: 700;
	text-decoration: none;
}

.bmed-tarjeta-medico a:hover {
	text-decoration: underline;
}

.bmed-seo-formulario {
	padding-top: var(--espacio-grande);
	border-top: 1px solid var(--color-borde);
}

/* ==========================================================
   LA GUÍA PUBLICADA (Fase 4B: el motor de contenido reemplaza
   el texto corto de la página madre de la especialidad)
   ========================================================== */
.bmed-guia-respuesta-corta {
	max-width: 720px;
	font-size: var(--tamano-texto-subtitulo);
	color: var(--color-texto);
	margin: 0;
}

.bmed-guia-foto {
	display: block;
	width: 100%;
	border-radius: var(--radio-borde);
}

.bmed-guia-cuerpo {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
}

.bmed-guia-cuerpo h2 {
	margin-top: var(--espacio-medio);
}

.bmed-guia-cuerpo h3 {
	font-size: 1.05rem;
}

.bmed-guia-cuerpo ul,
.bmed-guia-cuerpo ol {
	padding-left: 1.25rem;
}

.bmed-guia-cuerpo table {
	width: 100%;
	border-collapse: collapse;
}

.bmed-guia-cuerpo th,
.bmed-guia-cuerpo td {
	padding: var(--espacio-chico);
	border: 1px solid var(--color-borde);
	text-align: left;
}

.bmed-guia-faq {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
}

.bmed-guia-faq-item h3 {
	margin-bottom: 0.25rem;
}

.bmed-guia-faq-item p {
	margin: 0;
	color: var(--color-secundario);
}

/* ==========================================================
   FORMULARIOS PROPIOS (registro, ingresar, ajustes)
   ========================================================== */
.bmed-subtitulo {
	color: var(--color-secundario);
	margin-top: 0;
}

.bmed-form {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-grande);
	max-width: 640px;
}

.bmed-fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-medio);
}

.bmed-fila .bmed-campo {
	flex: 1 1 220px;
}

.bmed-campo-chico {
	flex: 0 1 160px;
}

.bmed-campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.bmed-campo label,
.bmed-label-grupo {
	font-weight: 600;
	font-size: var(--tamano-texto-chico);
}

.bmed-input,
.bmed-select,
.bmed-input-file,
.bmed-selector-input,
.bmed-textarea {
	font-size: 1rem; /* nunca menos de 16px: en iPhone, un campo más chico acerca la pantalla sola */
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
	color: var(--color-texto);
	font-family: inherit;
	width: 100%;
}

.bmed-textarea {
	resize: vertical;
	min-height: 5rem;
}

.bmed-selector-input:disabled {
	background: var(--color-superficie);
	cursor: not-allowed;
}

.bmed-input:focus,
.bmed-select:focus,
.bmed-selector-input:focus,
.bmed-textarea:focus {
	outline: 2px solid var(--color-primario);
	outline-offset: 1px;
}

.bmed-nota {
	margin: 0;
	font-size: var(--tamano-texto-chico);
	color: var(--color-secundario);
}

.bmed-error {
	margin: 0;
	font-size: var(--tamano-texto-chico);
	color: var(--color-error-texto);
}

.bmed-error-general {
	padding: var(--espacio-chico) var(--espacio-medio);
	background: var(--color-error-fondo);
	border-radius: var(--radio-borde);
}

/* Especialidad ya certera (llegó desde /{especialista}/): no es un
   campo editable, así que no se dibuja como un <input>. */
.bmed-especialidad-fija {
	margin: 0;
	padding: 0.65rem 0.75rem;
	background: var(--color-superficie);
	border-radius: var(--radio-borde);
	color: var(--color-primario);
	font-weight: 700;
	text-transform: capitalize;
}

.bmed-radios,
.bmed-checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-medio);
}

.bmed-radio,
.bmed-check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: normal;
	font-size: 1rem;
}

.bmed-boton {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radio-borde);
	border: 1px solid var(--color-primario);
	background: var(--color-fondo);
	color: var(--color-primario);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.bmed-boton-primario {
	background: var(--color-primario);
	color: #ffffff;
}

.bmed-boton-peligro {
	border-color: var(--color-error-texto);
	color: var(--color-error-texto);
}

.bmed-nota-ingresar {
	margin-top: var(--espacio-chico);
}

/* Selector con buscador (especialidad, provincia, localidad): desplegable
   estilo "selector de países" — al enfocar muestra la lista completa,
   al escribir filtra en vivo. */
.bmed-selector-contenedor {
	position: relative;
}

.bmed-selector-lista {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	max-height: 280px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: none;
}

.bmed-selector-item {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.bmed-selector-item:hover {
	background: var(--color-superficie);
}

.bmed-selector-item.bmed-no-se {
	background: var(--color-superficie);
	border-bottom: 1px solid var(--color-borde);
}

.bmed-selector-item.bmed-no-se strong {
	color: var(--color-primario);
}

/* La opción ya elegida, para que se note al reabrir la lista. */
.bmed-selector-item.bmed-seleccionado {
	background: var(--color-superficie);
	color: var(--color-primario);
	font-weight: 600;
}

.bmed-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.bmed-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	background: var(--color-superficie);
	border-radius: 999px;
	font-size: var(--tamano-texto-chico);
}

.bmed-chip button {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--color-secundario);
	font-size: 0.9rem;
	line-height: 1;
	padding: 0;
}

/* ==========================================================
   FICHA PÚBLICA DEL MÉDICO
   ========================================================== */
.bmed-ficha-cabecera {
	display: flex;
	gap: var(--espacio-grande);
	align-items: flex-start;
	flex-wrap: wrap;
}

.bmed-ficha-foto {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-superficie);
	flex-shrink: 0;
}

.bmed-ficha-nombre {
	margin: 0 0 0.25rem;
}

.bmed-ficha-especialidad-primaria {
	margin: 0 0 0.5rem;
	font-size: var(--tamano-texto-subtitulo);
	color: var(--color-primario);
	font-weight: 600;
}

.bmed-ficha-matricula {
	margin: 0;
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
}

.bmed-ficha-tilde {
	display: inline-block;
	margin-left: 0.5rem;
	color: var(--color-acento);
	font-weight: 600;
}

.bmed-ficha-seccion {
	margin-top: var(--espacio-grande);
}

.bmed-ficha-seccion h2 {
	margin: 0 0 0.5rem;
}

.bmed-ficha-lista {
	margin: 0;
	padding-left: 1.25rem;
}

/* Fase 5B: recuadro de reclamo de una ficha precargada — bien visible,
   con botón grande, arriba de la ficha. */
.bmed-reclamo-cartel {
	margin-bottom: var(--espacio-grande);
	padding: var(--espacio-grande);
	background: var(--color-primario);
	color: #ffffff;
	border-radius: var(--radio-borde);
	text-align: center;
}

.bmed-reclamo-cartel p {
	margin: 0 0 var(--espacio-chico);
}

.bmed-reclamo-cartel .bmed-boton-primario {
	background: #ffffff;
	color: var(--color-primario);
	border-color: #ffffff;
}

.bmed-boton-grande {
	padding: 1rem 2rem;
	font-size: 1.1rem;
}

/* Fase 5B: el pie con el aviso REFEPS + el link de corrección/baja, en cualquier ficha pública. */
.bmed-ficha-pie-refeps {
	margin-top: var(--espacio-grande);
	padding-top: var(--espacio-medio);
	border-top: 1px solid var(--color-borde);
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
}

.bmed-ficha-pie-refeps p {
	margin: 0 0 var(--espacio-chico);
}

.bmed-ficha-link-correccion {
	cursor: pointer;
	color: var(--color-secundario);
	text-decoration: underline;
}

.bmed-correccion-form {
	margin-top: var(--espacio-medio);
	max-width: 420px;
}

/* ==========================================================
   EL PANEL DEL MÉDICO Y EL PANEL PRIVADO DE GABRIEL
   ========================================================== */
.bmed-panel {
	background: var(--color-fondo);
	color: var(--color-texto);
}

/* Modo oscuro: escopado a los dos paneles (el médico y el privado de
   Gabriel son lo único del sitio con este interruptor — el resto del
   sitio, la parte pública, siempre queda en modo claro).
   También se repite en <html> (mismo atributo, mismo valor, lo pone
   el JS del panel) para que la franja del encabezado del sitio y el
   fondo por fuera del panel (el "rebote" al final del scroll en el
   celular) no se queden blancos — si no, se ve una franja blanca
   encandilante arriba en el celular con el panel de noche. */
.bmed-panel[data-tema="oscuro"],
html[data-tema="oscuro"] {
	--color-fondo: #12161c;
	--color-texto: #e7ebf0;
	--color-secundario: #a8b2c0;
	--color-borde: #2a323d;
	--color-superficie: #1b212a;
	--color-exito: #34d399; /* el verde de siempre (#1e7a34) no se lee bien sobre este fondo oscuro */
	--color-error-texto: #f87171; /* ídem con el rojo — el globito de aviso sigue con el rojo sólido de siempre */
	--color-acento-fondo: #2a2013;
	--bm-logo-med: #6FCFB4; /* el "Med" de la cabecera: el verde de marca no se lee sobre este fondo */
}

html[data-tema="oscuro"] {
	background-color: var(--color-fondo);
}

.bmed-panel-franja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-medio);
	padding-bottom: var(--espacio-medio);
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: var(--espacio-grande);
}

.bmed-panel-saludo {
	margin: 0;
	font-size: var(--tamano-texto-subtitulo);
	font-weight: 600;
}

.bmed-panel-franja-derecha {
	display: flex;
	align-items: center;
	gap: var(--espacio-medio);
}

.bmed-panel-creditos {
	padding: 0.5rem 0.85rem;
	background: var(--color-superficie);
	border-radius: var(--radio-borde);
	font-size: var(--tamano-texto-chico);
}

/* Tarjetas-incentivo: nunca en rojo, nunca semáforo de castigo. */
.bmed-tarjeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-medio);
	padding: var(--espacio-medio);
	margin-bottom: var(--espacio-medio);
	background: var(--color-superficie);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
}

.bmed-tarjeta p {
	margin: 0;
}

.bmed-tarjeta-acciones {
	display: flex;
	align-items: center;
	gap: var(--espacio-chico);
}

.bmed-tarjeta-cerrar {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--color-secundario);
	font-size: 1rem;
	padding: 0.25rem;
}

/* Pestañas: barra horizontal en escritorio. */
.bmed-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: var(--espacio-grande);
}

.bmed-tab-boton {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	border: none;
	background: none;
	color: var(--color-texto);
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.bmed-tab-flecha {
	display: none;
}

.bmed-tab-contenido {
	display: none;
}

.bmed-tab-contenido.activa {
	display: block;
}

.bmed-tab-volver {
	display: none;
}

.bmed-placeholder {
	color: var(--color-secundario);
}

/* Celular: la barra de pestañas pasa a ser un menú apilado, y cada
   pestaña abierta ocupa toda la pantalla (con su propio "Volver"). */
@media (max-width: 700px) {
	.bmed-tabs-nav {
		flex-direction: column;
		border-bottom: none;
	}

	.bmed-tab-boton {
		justify-content: space-between;
		padding: var(--espacio-medio);
		border: 1px solid var(--color-borde);
		border-radius: var(--radio-borde);
		margin-bottom: 0.4rem;
	}

	.bmed-tab-flecha {
		display: inline;
		color: var(--color-secundario);
	}

	.bmed-panel-con-pestana-abierta .bmed-tabs-nav,
	.bmed-panel-con-pestana-abierta .bmed-panel-franja,
	.bmed-panel-con-pestana-abierta .bmed-tarjeta {
		display: none;
	}

	.bmed-tab-contenido.activa {
		position: fixed;
		inset: 0;
		z-index: 50;
		overflow-y: auto;
		background: var(--color-fondo);
		padding: var(--espacio-medio);
	}

	.bmed-tab-volver {
		display: inline-block;
		margin-bottom: var(--espacio-medio);
		border: none;
		background: none;
		color: var(--color-primario);
		font-size: 1rem;
		font-family: inherit;
		cursor: pointer;
		padding: 0;
	}
}

/* ==========================================================
   AJUSTES
   ========================================================== */
.bmed-ajustes-seccion {
	padding-bottom: var(--espacio-grande);
	margin-bottom: var(--espacio-grande);
	border-bottom: 1px solid var(--color-borde);
}

.bmed-ajustes-seccion:last-child {
	border-bottom: none;
}

.bmed-ajustes-seccion h3 {
	margin-top: 0;
}

.bmed-aviso-ok {
	color: var(--color-exito);
	font-weight: 600;
}

.bmed-ajustes-peligro h3 {
	color: var(--color-error-texto);
}

.bmed-aj-qr {
	display: block;
	margin-top: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
}

/* Anchos acotados para campos sueltos (fuera de un .bmed-fila), en
   vez de un style="max-width" suelto en cada input. */
.bmed-input-chico {
	max-width: 220px;
}

.bmed-input-medio {
	max-width: 320px;
}

.bmed-input-ancho {
	max-width: 420px;
}

/* Anchos de campo reusables — para no volver a poner style="" suelto. */
.bmed-input-chico {
	max-width: 160px;
}

.bmed-input-mediano {
	max-width: 280px;
}

.bmed-input-ancho {
	max-width: 420px;
}

/* ==========================================================
   EL ATRIBUTO "hidden" TIENE QUE GANAR SIEMPRE
   ========================================================== */
/* Varias clases (.bmed-campo, .bmed-boton) fijan su propio display,
   y eso le ganaba al hidden que pone JS (mismo peso de especificidad,
   pero la hoja de estilos del sitio le gana a la del navegador). Esta
   regla va al final del archivo a propósito, para quedar siempre
   después de esas clases en la cascada. Sin esto, el campo "¿Cuál?"
   del título quedaba visible aunque JS le pusiera hidden. */
[hidden] {
	display: none;
}

/* ==========================================================
   VISTA ENFOCADA DE AJUSTES — las tarjetas del panel (matrícula,
   email) llevan a UNA sola sección de Ajustes, no al formulario
   entero. "Ver todos los ajustes" saca el enfoque.
   ========================================================== */
.bmed-ajustes-volver {
	display: none;
}

.bmed-ajustes[data-bmed-enfoque] .bmed-ajustes-seccion {
	display: none;
}

.bmed-ajustes[data-bmed-enfoque] .bmed-ajustes-volver {
	display: inline-block;
	margin-bottom: var(--espacio-medio);
}

.bmed-ajustes[data-bmed-enfoque="matricula"] .bmed-ajustes-seccion[data-bmed-seccion="matricula"] {
	display: block;
}

.bmed-ajustes[data-bmed-enfoque="email"] .bmed-ajustes-seccion[data-bmed-seccion="email"] {
	display: block;
}

.bmed-ajustes[data-bmed-enfoque="pausa"] .bmed-ajustes-seccion[data-bmed-seccion="pausa"] {
	display: block;
}

/* ==========================================================
   EL RECORRIDO DEL PACIENTE — espera, gracias, cartel de empuje
   ========================================================== */
.bmed-pantalla-espera,
.bmed-pantalla-gracias,
.bmed-cartel-empuje {
	display: flex;
	justify-content: center;
	padding: var(--espacio-grande) var(--espacio-medio);
}

.bmed-espera-contenedor,
.bmed-contenedor-gracias,
.bmed-cartel-contenedor {
	max-width: 480px;
	width: 100%;
	text-align: center;
}

.bmed-espera-spinner {
	width: 42px;
	height: 42px;
	margin: 0 auto var(--espacio-medio);
	border: 4px solid var(--color-superficie);
	border-top-color: var(--color-primario);
	border-radius: 50%;
	animation: bmed-girar 0.8s linear infinite;
}

@keyframes bmed-girar {
	to {
		transform: rotate(360deg);
	}
}

.bmed-espera-texto {
	color: var(--color-secundario);
	font-size: var(--tamano-texto-subtitulo);
}

.bmed-cartel-contenedor h2 {
	margin-bottom: var(--espacio-medio);
}

.bmed-cartel-contenedor p {
	margin-bottom: var(--espacio-grande);
}

.bmed-cartel-botones {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-chico);
}

.bmed-cartel-form {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-chico);
}

.bmed-boton-secundario {
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	color: var(--color-secundario);
}

/* ==========================================================
   SALA DE ESPERA
   ========================================================== */
.bmed-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--color-error);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.bmed-sala-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--espacio-medio);
}

.bmed-pastilla {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--color-borde);
	background: var(--color-fondo);
	color: var(--color-texto);
	font-size: var(--tamano-texto-chico);
	font-family: inherit;
	cursor: pointer;
}

.bmed-pastilla-activa {
	background: var(--color-primario);
	border-color: var(--color-primario);
	color: #ffffff;
}

.bmed-sala-lista {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
}

.bmed-sala-card {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
	transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
	max-height: 500px;
	overflow: hidden;
}

.bmed-sala-card-entrando {
	opacity: 0;
	transform: translateY(-6px);
}

.bmed-sala-card-saliendo {
	opacity: 0;
	transform: scale(0.98);
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	border-width: 0;
}

.bmed-sala-card-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espacio-chico);
	margin-bottom: 0.35rem;
}

.bmed-sala-card-cabecera strong {
	font-size: var(--tamano-texto-subtitulo);
}

.bmed-sala-antiguedad {
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
	white-space: nowrap;
}

.bmed-sala-motivo {
	margin: 0 0 0.5rem;
}

.bmed-sala-meta {
	margin: 0 0 0.5rem;
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
}

.bmed-sala-atender {
	margin-top: var(--espacio-medio);
	width: 100%;
}

.bmed-sala-boton-escritorio {
	display: none;
}

@media (min-width: 701px) {
	.bmed-sala-atender {
		width: auto;
	}

	.bmed-sala-boton-celular {
		display: none;
	}

	.bmed-sala-boton-escritorio {
		display: inline;
	}
}

/* ==========================================================
   MIS PACIENTES
   ========================================================== */
.bmed-mis-pacientes {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
}

.bmed-paciente-card {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
}

.bmed-paciente-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espacio-chico);
}

.bmed-paciente-cabecera h3 {
	margin: 0;
}

.bmed-paciente-fecha {
	color: var(--color-secundario);
	font-size: var(--tamano-texto-chico);
}

.bmed-paciente-dato {
	margin: 0.25rem 0;
}

.bmed-paciente-dato a {
	color: var(--color-texto);
	text-decoration: none;
}

.bmed-paciente-motivo {
	margin-top: var(--espacio-chico);
	padding-top: var(--espacio-chico);
	border-top: 1px solid var(--color-borde);
}

.bmed-paciente-motivo p {
	margin: 0.25rem 0 0;
	color: var(--color-secundario);
}

/* ==========================================================
   MODAL (confirmar atención, sin créditos, avisos)
   ========================================================== */
.bmed-modal-fondo {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--espacio-medio);
	background: rgba(0, 0, 0, 0.5);
}

.bmed-modal {
	max-width: 420px;
	width: 100%;
	padding: var(--espacio-grande);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
	color: var(--color-texto);
}

.bmed-modal h3 {
	margin-top: 0;
}

.bmed-modal-acciones {
	display: flex;
	justify-content: flex-end;
	gap: var(--espacio-chico);
	margin-top: var(--espacio-grande);
}

/* Pestaña 💳 Cargar créditos: los 5 packs + la pantalla de instrucciones. */
.bmed-packs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--espacio-medio);
}

.bmed-pack-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
	text-align: center;
}

.bmed-pack-ahorro {
	position: absolute;
	top: -0.6rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--color-acento);
	color: #ffffff;
	font-size: var(--tamano-texto-chico);
	font-weight: bold;
}

.bmed-pack-creditos {
	margin: var(--espacio-chico) 0 0;
	font-size: var(--tamano-texto-subtitulo);
	font-weight: bold;
}

.bmed-pack-precio {
	margin: 0;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--color-primario);
}

.bmed-pack-precio-unitario {
	margin: 0 0 var(--espacio-chico);
	font-size: var(--tamano-texto-chico);
	color: var(--color-secundario);
}

.bmed-pago-pendiente {
	padding: var(--espacio-grande);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-superficie);
}

.bmed-pago-dato {
	margin: 0.25rem 0;
}

.bmed-pago-codigo {
	margin: var(--espacio-chico) 0;
	font-size: 1.2rem;
}

/* Panel privado de Gabriel (/panel-bm/): números vivos del día. */
.bmed-admin-numeros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--espacio-chico);
	margin: var(--espacio-medio) 0;
}

.bmed-admin-numero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: var(--espacio-medio) var(--espacio-chico);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-superficie);
	text-align: center;
}

.bmed-admin-numero strong {
	font-size: 1.6rem;
	color: var(--color-primario);
}

.bmed-admin-numero span {
	font-size: var(--tamano-texto-chico);
	color: var(--color-secundario);
}

/* La única alerta roja de los números vivos: crisis sin resolver en
   Preguntas. --color-error-texto ya viene ajustado para leerse bien
   en modo oscuro (ver el bloque [data-tema="oscuro"] de arriba). */
.bmed-admin-numero-alerta {
	border-color: var(--color-error);
}

.bmed-admin-numero-alerta strong {
	color: var(--color-error-texto);
}

/* Tarjeta de la bandeja 🚨 Crisis: mismo .bmed-admin-card de siempre,
   con un borde izquierdo que la distingue de un vistazo de "Esperando
   tu revisión", sin usar rojo sólido de fondo (nada de alarma visual
   agresiva, coherente con la pantalla que ve el paciente). */
.bmed-admin-card-crisis {
	border-left: 4px solid var(--color-error);
}

/* Los dos botones de la bandeja de crisis traen más texto que
   "Aprobar"/"Rechazar" — .bmed-modal-acciones no envuelve por
   default (pensada para esos dos botones cortos) y a 390px se
   desbordaba. Acá sí envuelve, sin tocar el resto de sus usos. */
.bmed-modal-acciones-crisis {
	flex-wrap: wrap;
}

.bmed-ajustes-seccion-crisis {
	border-color: var(--color-error);
}

/* Panel privado de Gabriel: tarjetas de cola (pagos, verificaciones, consultas...). */
.bmed-admin-lista {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
	margin-bottom: var(--espacio-grande);
}

.bmed-admin-card {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
}

.bmed-admin-card-historial {
	background: var(--color-superficie);
}

.bmed-admin-card-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--espacio-chico);
	margin-bottom: var(--espacio-chico);
}

.bmed-admin-nota {
	width: 100%;
	margin: var(--espacio-chico) 0;
	resize: vertical;
}

.bmed-admin-estado {
	font-size: var(--tamano-texto-chico);
	font-weight: bold;
	white-space: nowrap;
}

.bmed-admin-estado-aprobado {
	color: var(--color-exito);
}

.bmed-admin-estado-rechazado {
	color: var(--color-error-texto);
}

.bmed-admin-verif-foto {
	display: block;
	max-width: 100%;
	max-height: 320px;
	margin: var(--espacio-chico) 0;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
}

.bmed-admin-card-cuarentena {
	border-color: var(--color-acento);
	background: var(--color-acento-fondo);
}

.bmed-admin-consulta-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-chico);
	margin-top: var(--espacio-chico);
}

.bmed-admin-consulta-acciones .bmed-select {
	flex: 1 1 220px;
}

.bmed-admin-estado-consulta-en_espera { color: var(--color-primario); }
.bmed-admin-estado-consulta-cuarentena { color: var(--color-acento); }
.bmed-admin-estado-consulta-atendida { color: var(--color-exito); }
.bmed-admin-estado-consulta-descartada,
.bmed-admin-estado-consulta-vencida { color: var(--color-secundario); }

.bmed-admin-guardado {
	margin-left: var(--espacio-chico);
	color: var(--color-exito);
	font-size: var(--tamano-texto-chico);
}

/* ==========================================================
   BANDEJA DE CONTENIDO (Fase 4B)
   ========================================================== */
.bmed-admin-contenido-preview {
	max-height: 400px;
	overflow-y: auto;
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-superficie);
	font-size: var(--tamano-texto-chico);
}

.bmed-admin-lista-fallas {
	margin: var(--espacio-chico) 0;
	padding-left: 1.25rem;
	color: var(--color-error-texto);
	font-size: var(--tamano-texto-chico);
}

.bmed-admin-semaforo {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-superficie);
	margin-bottom: var(--espacio-grande);
}

.bmed-admin-semaforo h3 {
	margin-top: 0;
}

/* ==========================================================
   SERENO IA — informe de IA generativa de Search Console (25/08/2026)
   ========================================================== */
.bmed-admin-ia-tabla {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--espacio-medio);
	font-size: var(--tamano-texto-chico);
}

.bmed-admin-ia-tabla th,
.bmed-admin-ia-tabla td {
	padding: var(--espacio-chico);
	border-bottom: 1px solid var(--color-borde);
	text-align: left;
}

/* ==========================================================
   MÓDULO DE PREGUNTAS (Fase 4C)
   ========================================================== */
.bmed-preguntas-form {
	padding: var(--espacio-medio);
	margin-bottom: var(--espacio-grande);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-superficie);
}

.bmed-preguntas-form h2 {
	margin-top: 0;
}

.bmed-preguntas-form form {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
}

.bmed-preguntas-resultado h2 {
	margin-top: 0;
}

.bmed-lista-preguntas {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
	margin: 0 0 var(--espacio-grande);
	padding: 0;
	list-style: none;
}

.bmed-tarjeta-pregunta {
	padding: var(--espacio-medio);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-borde);
	background: var(--color-fondo);
}

.bmed-tarjeta-pregunta a {
	font-weight: 700;
	text-decoration: none;
}

.bmed-tarjeta-pregunta a:hover {
	text-decoration: underline;
}

.bmed-pregunta-texto {
	font-weight: 600;
	margin: 0 0 var(--espacio-chico);
}

.bmed-respuestas {
	display: flex;
	flex-direction: column;
	gap: var(--espacio-medio);
	margin-bottom: var(--espacio-grande);
}

.bmed-respuesta {
	padding: var(--espacio-medio);
	border-left: 3px solid var(--color-primario);
	background: var(--color-superficie);
	border-radius: var(--radio-borde);
}

.bmed-respuesta-autor {
	margin: 0 0 var(--espacio-chico);
	font-weight: 700;
	font-size: var(--tamano-texto-chico);
}

.bmed-respuesta-texto {
	margin: 0;
	white-space: pre-line;
}

.bmed-preguntas-relacionadas {
	padding-top: var(--espacio-grande);
	border-top: 1px solid var(--color-borde);
}

/* La respuesta del equipo editorial se distingue de la de un médico
   matriculado: misma tarjeta, pero con la barrita al costado apagada
   (gris) en vez del verde de la marca — así, cuando las dos están una
   arriba de la otra, se ve de un vistazo cuál tiene matrícula detrás. */
.bmed-respuesta-editorial {
	border-left-color: var(--color-borde);
}

/* Panel del médico: el aviso de que esa pregunta viene de la siembra y
   solo tiene la respuesta orientativa del equipo. Los colores salen de
   las variables (no fijos): el panel del médico tiene modo oscuro, y
   ahí --color-superficie y --color-texto se redefinen solos. */
.bmed-pregunta-marca-editorial {
	margin: 0 0 var(--espacio-chico);
	padding: var(--espacio-chico) var(--espacio-medio);
	border-left: 3px solid var(--color-acento);
	background: var(--color-superficie);
	border-radius: var(--radio-borde);
	color: var(--color-texto);
	font-size: var(--tamano-texto-chico);
}

.bmed-pregunta-editorial {
	margin-bottom: var(--espacio-medio);
	font-size: var(--tamano-texto-chico);
}

.bmed-pregunta-editorial summary {
	cursor: pointer;
	color: var(--color-secundario);
}

/* ==========================================================
   CAPA 1 — CIMIENTOS DEL NUEVO SISTEMA (17/08/2026)
   Todo lo que sigue es aditivo y opt-in: variables con prefijo
   --bm- y clases con prefijo .bm-. No se toca ni se borra nada
   de lo anterior. Las plantillas de hoy no usan nada de esto
   todavía, así que el sitio no cambia visualmente.
   ========================================================== */

/* Inter autoalojada (subconjunto latino, 400 y 600). Guardada en
   wp-content/themes/buscomed-tema/fuentes/ — no depende de Google
   Fonts externo, por velocidad y privacidad. Se declara acá pero
   todavía no se aplica a nada (ver --bm-fuente más abajo: se usa
   recién cuando se vistan las plantillas). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fuentes/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fuentes/inter-600.woff2') format('woff2');
}

/* Variables del sistema nuevo — todas con prefijo --bm- para no
   chocar con las variables de arriba (--color-*, --tamano-*, etc.),
   que siguen siendo las que usan las plantillas de hoy. */
:root {
	/* Colores */
	--bm-verde: #0E7C66;
	--bm-verde-oscuro: #0A5F4E;
	--bm-menta: #D7F0E9;
	--bm-menta-texto: #084F41;
	--bm-pizarra: #1F2937;
	--bm-gris-texto: #4B5563;
	--bm-gris-suave: #6B7280;
	--bm-gris-borde: #D1D5DB;
	--bm-gris-linea: #E5E7EB;
	--bm-gris-fondo: #F9FAFB;
	--bm-blanco: #FFFFFF;
	--bm-ambar: #F59E0B;
	--bm-ambar-fondo: #FEF3C7;
	--bm-ambar-texto: #78350F;
	--bm-rojo: #BE4438;
	--bm-rojo-fondo: #FDECEA;
	--bm-exito: #0E7C66;
	/* Procedencia (26/08/2026): dos tonos nuevos de chapita para los
	   canales que no tenían uno propio (IA y redes sociales) — mismo
	   criterio que los de arriba, acentos sólidos, se leen igual en
	   claro y oscuro. */
	--bm-violeta-fondo: #EDE9FE;
	--bm-violeta-texto: #5B21B6;
	--bm-azul-fondo: #DBEAFE;
	--bm-azul-texto: #1D4ED8;

	/* El "Med" del nombre en la cabecera (28/08/2026): el verde de
	   marca sobre fondo claro. Adentro de un panel en modo oscuro se
	   cambia por el verde claro alterno del pack (#6FCFB4), que es
	   justamente el que el pack define para fondos oscuros. */
	--bm-logo-med: #0E7C66;

	/* Tipografía */
	--bm-fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bm-peso-normal: 400;
	--bm-peso-seminegrita: 600;

	/* Escala de tamaños — los ÚNICOS tamaños permitidos en todo el sitio */
	--bm-letra-12: 0.75rem;
	--bm-letra-14: 0.875rem;
	--bm-letra-16: 1rem;
	--bm-letra-18: 1.125rem;
	--bm-letra-24: 1.5rem;
	--bm-letra-30: 1.875rem;
	--bm-letra-36: 2.25rem;
	--bm-letra-48: 3rem;

	--bm-interlineado-texto: 1.45;
	--bm-interlineado-titulo: 1.2;
	--bm-espaciado-titulo: -0.02em;

	/* Espaciado — múltiplos de 8, más 4 y 12 para ajustes finos */
	--bm-esp-4: 4px;
	--bm-esp-8: 8px;
	--bm-esp-12: 12px;
	--bm-esp-16: 16px;
	--bm-esp-24: 24px;
	--bm-esp-32: 32px;
	--bm-esp-48: 48px;
	--bm-esp-64: 64px;

	/* Radios */
	--bm-radio-pildora: 9999px;
	--bm-radio-tarjeta: 16px;
	--bm-radio-panel: 24px;
	--bm-radio-chico: 8px;
	--bm-radio-circulo: 50%;

	/* Sombras */
	--bm-sombra-flotante: 0 8px 24px rgba(0, 0, 0, 0.12);
	--bm-sombra-modal: 0 8px 80px rgba(0, 0, 0, 0.12);
	--bm-anillo-foco: 0 0 0 4px rgba(14, 124, 102, 0.35);
	--bm-borde-interior: inset 0 0 0 1px var(--bm-gris-borde);
	--bm-borde-interior-suave: inset 0 0 0 1px var(--bm-gris-linea);

	/* Anchos y márgenes de página */
	--bm-ancho-maximo: 1280px;
	--bm-ancho-lectura: 960px;
	--bm-margen-pagina: 24px;

	/* Movimiento */
	--bm-transicion: 0.2s cubic-bezier(0.4, 0.2, 0.2, 1);
	--bm-transicion-lenta: 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* Margen de página: sube en pantallas más anchas (celular = 24px, el
   valor de arriba, ya cubierto). */
@media (min-width: 768px) {
	:root {
		--bm-margen-pagina: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--bm-margen-pagina: 48px;
	}
}

@media (min-width: 1280px) {
	:root {
		--bm-margen-pagina: 64px;
	}
}

/* ==========================================================
   CLASES DE COMPONENTES — todas opt-in, prefijo .bm-. Ninguna
   plantilla las usa todavía: no cambian nada visible hasta que
   se vistan las páginas.
   ========================================================== */

/* --- Botones --- */
.bm-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--bm-radio-pildora);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: color var(--bm-transicion), background-color var(--bm-transicion);
}

.bm-boton--principal {
	background-color: var(--bm-verde);
	color: var(--bm-blanco);
}

.bm-boton--principal:hover,
.bm-boton--principal:active {
	background-color: var(--bm-verde-oscuro);
}

.bm-boton--secundario {
	background-color: var(--bm-blanco);
	color: var(--bm-pizarra);
	box-shadow: var(--bm-borde-interior);
}

.bm-boton--secundario:hover {
	background-color: var(--bm-gris-fondo);
}

.bm-boton--chico {
	height: 36px;
	padding: 8px 16px;
	font-size: var(--bm-letra-12);
}

.bm-boton:disabled,
.bm-boton[disabled],
.bm-boton--deshabilitado {
	opacity: 0.5;
	cursor: not-allowed;
}

.bm-boton:focus-visible {
	box-shadow: var(--bm-anillo-foco);
}

/* --- Tarjetas --- */
.bm-tarjeta {
	background-color: var(--bm-blanco);
	border-radius: var(--bm-radio-tarjeta);
	box-shadow: var(--bm-borde-interior-suave);
	overflow: hidden;
}

.bm-tarjeta__cuerpo {
	padding: var(--bm-esp-16);
}

/* --- Chapitas --- */
.bm-chapita {
	display: inline-flex;
	align-items: center;
	border-radius: var(--bm-radio-pildora);
	padding: 4px 12px;
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-12);
	font-weight: var(--bm-peso-seminegrita);
	line-height: 1;
}

.bm-chapita--menta {
	background-color: var(--bm-menta);
	color: var(--bm-menta-texto);
}

.bm-chapita--ambar {
	background-color: var(--bm-ambar-fondo);
	color: var(--bm-ambar-texto);
}

.bm-chapita--gris {
	background-color: var(--bm-gris-fondo);
	color: var(--bm-gris-texto);
}

.bm-chapita--violeta {
	background-color: var(--bm-violeta-fondo);
	color: var(--bm-violeta-texto);
}

.bm-chapita--azul {
	background-color: var(--bm-azul-fondo);
	color: var(--bm-azul-texto);
}

/* --- Campos de formulario --- */
.bm-campo {
	min-height: 44px;
	padding: 12px 16px;
	border-radius: var(--bm-radio-tarjeta);
	box-shadow: var(--bm-borde-interior);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16); /* nunca menos de 16px: en iPhone, un campo más chico hace zoom solo al tocarlo */
	background-color: var(--bm-blanco);
	color: var(--bm-pizarra);
}

.bm-campo:focus {
	outline: none;
	box-shadow: var(--bm-anillo-foco), inset 0 0 0 1px var(--bm-verde);
}

.bm-campo--error {
	box-shadow: inset 0 0 0 1px var(--bm-rojo);
}

.bm-campo-etiqueta {
	display: block;
	margin-bottom: var(--bm-esp-8);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
}

.bm-campo-error-texto {
	margin-top: var(--bm-esp-8);
	font-size: var(--bm-letra-14);
	color: var(--bm-rojo);
}

/* --- Enlaces de texto corrido (guías, artículos, respuestas) --- */
.bm-prosa {
	max-width: var(--bm-ancho-lectura);
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
	color: var(--bm-pizarra);
}

.bm-prosa p {
	margin: 16px 0;
}

.bm-prosa a {
	color: var(--bm-verde);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bm-prosa a:hover {
	color: var(--bm-verde-oscuro);
}

/* Blindaje: dentro de .bm-prosa un botón sigue siendo botón, nunca
   se subraya aunque sea un <a>. */
.bm-prosa a.bm-boton {
	text-decoration: none;
}

@media (min-width: 768px) {
	.bm-prosa {
		font-size: var(--bm-letra-18);
	}
}

/* --- Avatar --- */
.bm-avatar {
	display: inline-block;
	border-radius: var(--bm-radio-circulo);
	overflow: hidden;
}

.bm-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-avatar--44 {
	width: 44px;
	height: 44px;
}

.bm-avatar--64 {
	width: 64px;
	height: 64px;
}

.bm-avatar--96 {
	width: 96px;
	height: 96px;
}

/* --- Contenedor de página ---
   Centra su contenido en una franja de exactamente --bm-ancho-maximo
   (1280px) de ANCHO ÚTIL, dejando el margen de página a los costados.
   Por eso el tope suma los dos márgenes: si dijera 1280 a secas, el
   padding se comería 128px y el contenido quedaría en 1152 — o sea,
   desalineado con la columna del lienzo (ver "EL LIENZO", arriba), que
   sí da 1280 útiles. Con esta cuenta, la cabecera, el pie y cualquier
   franja de ancho completo alinean al píxel con el resto de la página.
   (28/08/2026.) */
.bm-contenedor {
	max-width: calc(var(--bm-ancho-maximo) + var(--bm-margen-pagina) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bm-margen-pagina);
	padding-right: var(--bm-margen-pagina);
}

/* --- Utilidades mínimas --- */
.bm-foto-redonda {
	border-radius: var(--bm-radio-tarjeta);
	overflow: hidden;
}

.bm-oculto-accesible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Variante de botón que falta en la Capa 1: ancho completo --- */
.bm-boton--bloque {
	width: 100%;
}

/* ==========================================================
   CAPA 2A — FICHA DE MÉDICO (17/08/2026)
   Primera plantilla vestida con el sistema --bm-/.bm- de la Capa 1.
   Todo lo de acá vive escopeado bajo .bm-pagina-ficha (el div raíz
   que imprime bmed_ficha_publica_render(), en ficha-publica.php) para
   no afectar ninguna otra página, aunque algunos selectores reusen
   nombres .bmed-* que también existen en otras plantillas.
   ========================================================== */
.bm-pagina-ficha {
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
	background-color: var(--bm-blanco);
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

/* Ningún enlace se subraya en la ficha, salvo el texto corrido
   dentro de .bm-prosa (regla transversal del pedido). */
.bm-pagina-ficha a {
	text-decoration: none;
}

.bm-pagina-ficha .bm-prosa a {
	text-decoration: underline;
}

/* --- Cabecera de identidad --- */
.bm-pagina-ficha .bm-ficha-cabecera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bm-esp-16);
}

@media (min-width: 768px) {
	.bm-pagina-ficha .bm-ficha-cabecera {
		flex-direction: row;
		align-items: center;
		gap: var(--bm-esp-24);
	}
}

.bm-pagina-ficha .bm-ficha-avatar {
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.bm-pagina-ficha .bm-ficha-avatar {
		width: 128px;
		height: 128px;
	}
}

.bm-pagina-ficha .bm-ficha-nombre {
	margin: 0 0 var(--bm-esp-4);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

@media (min-width: 768px) {
	.bm-pagina-ficha .bm-ficha-nombre {
		font-size: var(--bm-letra-36);
	}
}

.bm-pagina-ficha .bm-ficha-especialidad {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-normal);
	color: var(--bm-gris-texto);
}

.bm-pagina-ficha .bm-ficha-chapitas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
}

/* --- Tarjetas de información: presentación, otras especialidades,
   subespecialidades, zona, modalidad — una por sección. --- */
.bm-pagina-ficha .bmed-ficha-seccion {
	margin-top: 0;
	padding: var(--bm-esp-16);
}

.bm-pagina-ficha .bm-ficha-seccion-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-pagina-ficha .bm-ficha-texto {
	margin: 0;
	font-size: var(--bm-letra-16);
	color: var(--bm-pizarra);
}

/* El <article> agrupa la cabecera + las tarjetas de información: el
   espaciado entre ellas lo da este gap, no el margin-top viejo de
   .bmed-ficha-seccion (pisado arriba a 0 para no duplicarlo). */
.bm-pagina-ficha .bmed-ficha {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

/* --- Aviso "reclamá tu perfil" (fichas precargadas) --- */
.bm-pagina-ficha .bmed-reclamo-cartel {
	background-color: var(--bm-menta);
	color: var(--bm-menta-texto);
	padding: 0;
	text-align: center;
}

.bm-pagina-ficha .bmed-reclamo-cartel .bm-tarjeta__cuerpo {
	padding: var(--bm-esp-24);
}

.bm-pagina-ficha .bmed-reclamo-cartel p {
	margin: 0 0 var(--bm-esp-8);
	color: var(--bm-menta-texto);
}

/* --- CTA de recomendación al pie (solo fichas precargadas): mismo
   respiro que las tarjetas de arriba, sin tocar el formulario en sí
   (bmed_formulario_paciente_html_bloqueado se comparte con otras
   páginas — su marcado interno no se toca acá). --- */
.bm-pagina-ficha .bmed-seo-formulario {
	padding: var(--bm-esp-16);
	padding-top: var(--bm-esp-24);
}

.bm-pagina-ficha .bmed-seo-formulario .bm-ficha-seccion-titulo {
	margin-bottom: var(--bm-esp-16);
}

/* --- Pie REFEPS + link de corrección/baja --- */
.bm-pagina-ficha .bm-ficha-pie {
	margin-top: var(--bm-esp-16);
	padding: var(--bm-esp-16);
	padding-top: var(--bm-esp-16);
	border-top: 1px solid var(--bm-gris-linea);
	color: var(--bm-gris-suave);
	font-size: var(--bm-letra-14);
}

.bm-pagina-ficha .bmed-ficha-link-correccion {
	color: var(--bm-gris-suave);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
}

/* --- CAPA 2B — CONSULTA DIRIGIDA (17/08/2026) ---
   El cuadro de dos puertas de la ficha activa: solo dos botones
   apilados, sin título. El espacio con la cabecera y con la tarjeta
   siguiente ya lo da el gap de .bmed-ficha (arriba) — acá solo hace
   falta el respiro ENTRE los dos botones, que no tienen ningún
   contenedor con gap propio. */
.bm-pagina-ficha .bm-ficha-consulta-dirigida .bm-boton + .bm-boton {
	margin-top: var(--bm-esp-8);
}

/* Letra chica gris del aviso "tu consulta va dirigida a..." debajo del
   botón de envío del formulario del paciente (Paso 3). No está
   escopeada a .bm-pagina-ficha porque el formulario también vive en
   su propia página (/quiero-un-medico-recomendado/), fuera de la
   ficha. */
.bm-aviso-destinatario {
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-suave);
	margin-top: var(--bm-esp-8);
}

/* La etiqueta de prioridad exclusiva de la Sala de espera (Paso 4):
   la chapita ámbar de siempre, pero de ancho completo arriba de la
   tarjeta en vez de una píldora en línea con el texto. */
.bmed-sala-card .bmed-sala-exclusiva {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: var(--bm-esp-8);
}

/* ==========================================================
   CIRCUITO DE RECLAMO DE PERFIL — Canal 2 (18/08/2026)
   /reclamar-perfil/ y la pantalla "reclamo pendiente" de /mi-panel/.
   Escopeado a .bm-pagina-reclamo y .bm-pagina-reclamo-pendiente:
   reusan .bm-tarjeta/.bm-boton/.bmed-campo de siempre, esto es solo
   el ajuste puntual de espaciado entre tarjetas.
   ========================================================== */
.bm-pagina-reclamo .bm-tarjeta,
.bm-reclamo-pendiente-tarjeta {
	margin-bottom: var(--bm-esp-16);
}

.bm-reclamo-cabecera .bm-ficha-chapitas {
	margin-top: var(--bm-esp-8);
}

.bm-reclamo-aviso {
	background: var(--bm-acento-fondo, #fffaf0);
}

.bm-pagina-reclamo #bmed-reclamo-form-credencial {
	margin-top: var(--bm-esp-16);
}

.bm-reclamo-error-general {
	margin-bottom: var(--bm-esp-16);
}

/* ==========================================================
   CABECERA DEL SITIO (28/08/2026, G3 — reemplaza el menú de 4
   ítems y el logo-imagen de la Fase 2.2)

   El isotipo (solo el corazón con pulso) + el nombre y la bajada
   escritos en HTML, y a la derecha dos destinos: "Soy médico" como
   enlace de texto y "Buscar médico" como botón píldora destacado.
   La franja es de ancho completo; adentro, .bm-cabecera centra todo
   a 1280 con los márgenes del sistema (.bm-contenedor).
   El colapsado de celular es el mismo casillero sin JS de antes.
   ========================================================== */
.bm-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bm-esp-16);
	padding-top: var(--bm-esp-16);
	padding-bottom: var(--bm-esp-16);
}

/* --- La marca --- */
.bm-cabecera-marca {
	display: inline-flex;
	align-items: center;
	gap: var(--bm-esp-12);
	text-decoration: none;
	color: inherit;
}

.bm-cabecera-isotipo {
	display: block;
	width: auto;
	height: 44px;
}

.bm-cabecera-marca-texto {
	display: flex;
	flex-direction: column;
	line-height: var(--bm-interlineado-titulo);
}

.bm-cabecera-marca-nombre {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	letter-spacing: var(--bm-espaciado-titulo);
	color: var(--color-texto); /* cambia solo en el modo oscuro de los paneles */
}

.bm-cabecera-marca-med {
	color: var(--bm-logo-med);
}

.bm-cabecera-marca-bajada {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-12);
	color: var(--color-secundario);
}

/* --- Los dos destinos --- */
.bm-cabecera-nav {
	display: flex;
	align-items: center;
	gap: var(--bm-esp-24);
}

.bm-cabecera-enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--color-texto);
	text-decoration: none;
}

.bm-cabecera-enlace:hover {
	color: var(--bm-verde);
}

/* El botón ☰ solo existe visualmente en celular — en escritorio el
   menú ya se ve entero, el casillero no hace falta. */
.bmed-menu-boton {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bm-radio-chico);
	font-size: var(--bm-letra-18);
	color: var(--color-texto);
	cursor: pointer;
}

@media (max-width: 700px) {
	.bmed-menu-boton {
		display: inline-flex;
	}

	.bm-cabecera-nav {
		display: none;
		width: 100%;
		order: 3;
		flex-direction: column;
		align-items: stretch;
		gap: var(--bm-esp-12);
	}

	.bmed-menu-toggle:checked ~ .bm-cabecera-nav {
		display: flex;
	}

	.bm-cabecera-enlace {
		border-top: 1px solid var(--bm-gris-linea);
		padding: var(--bm-esp-8) 0;
	}

	.bm-cabecera-marca-bajada {
		display: none; /* en un celular angosto compite con el nombre; la bajada sigue en el HTML */
	}
}

/* ==========================================================
   PORTADA (25/08/2026)
   Seis bloques, celular primero. Todo escopado bajo .bm-portada
   (mismo criterio que .bm-pagina-ficha en la Capa 2A) para no
   afectar ninguna otra página.
   ========================================================== */
.bm-portada {
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
}

.bm-portada > section {
	margin-bottom: var(--bm-esp-48);
}

.bm-portada > section:last-child {
	margin-bottom: 0;
}

.bm-portada-seccion-titulo {
	margin: 0 0 var(--bm-esp-24);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

/* --- Bloque 1: hero --- */
.bm-portada-hero {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-24);
}

/* Foto arriba en celular (aunque el H1 vaya primero en el HTML, a
   propósito, para que un lector de pantalla o un buscador lean el
   título antes que la imagen) — decisión de armonía visual: la foto
   ya lleva fetchpriority alto, tiene sentido que sea lo primero que
   se ve. En escritorio, texto a la izquierda y foto a la derecha. */
.bm-portada-hero-foto {
	order: -1;
}

.bm-portada-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-portada-hero-apoyo {
	margin: 0 0 var(--bm-esp-24);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-portada-hero-foto {
	border-radius: var(--bm-radio-tarjeta);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.bm-portada-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.bm-portada-hero {
		flex-direction: row;
		align-items: center;
		gap: var(--bm-esp-48);
	}

	.bm-portada-hero-texto,
	.bm-portada-hero-foto {
		flex: 1 1 0;
		order: 0;
	}

	.bm-portada-hero-boton {
		width: auto;
	}

	.bm-portada-hero-titulo {
		font-size: var(--bm-letra-48);
	}
}

/* --- Bloque 2: elegidor de especialidad --- */
.bm-portada-esp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--bm-esp-8);
}

.bm-portada-esp-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--bm-esp-8) var(--bm-esp-12);
	border-radius: var(--bm-radio-chico);
	background-color: var(--bm-gris-fondo);
	color: var(--bm-pizarra);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bm-transicion);
}

.bm-portada-esp-item:hover {
	background-color: var(--bm-menta);
	color: var(--bm-menta-texto);
}

/* El casillero es invisible (.bm-oculto-accesible) pero real: sigue
   siendo tocable con el teclado y con un lector de pantalla. Las 44
   especialidades "extra" están SIEMPRE en el HTML — esto solo las
   tapa visualmente en celular hasta que se tilda el casillero. */
.bm-portada-esp-item--extra {
	display: none;
}

.bm-portada-esp-toggle:checked ~ .bm-portada-esp-grid .bm-portada-esp-item--extra {
	display: flex;
}

.bm-portada-esp-toggle:checked ~ .bm-portada-esp-boton {
	display: none;
}

.bm-portada-esp-boton {
	margin-top: var(--bm-esp-16);
}

@media (min-width: 768px) {
	.bm-portada-esp-item--extra {
		display: flex;
	}

	.bm-portada-esp-boton {
		display: none;
	}
}

/* --- Bloque 3: números vivos --- */
.bm-portada-numeros-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bm-esp-16);
	text-align: center;
}

/* Sin esto, una columna de grid nunca se achica más allá del ancho
   natural de su contenido — con un número de 4 o 5 cifras en un
   celular angosto (320-360px), eso puede forzar scroll horizontal de
   toda la página. Con min-width: 0 la columna sí puede achicarse. */
.bm-portada-numero-item {
	min-width: 0;
}

.bm-portada-numero-valor {
	margin: 0;
	font-size: var(--bm-letra-36);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
	line-height: var(--bm-interlineado-titulo);
}

.bm-portada-numero-etiqueta {
	margin: var(--bm-esp-4) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

.bm-portada-confianza {
	margin: var(--bm-esp-16) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-suave);
	text-align: center;
}

/* --- Bloque 4: cómo funciona --- */
.bm-portada-pasos {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-24);
}

.bm-portada-paso {
	text-align: center;
}

.bm-portada-paso-numero {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-36);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
	line-height: 1;
}

.bm-portada-paso-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-portada-paso-texto {
	margin: 0;
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

@media (min-width: 768px) {
	.bm-portada-pasos {
		flex-direction: row;
	}

	.bm-portada-paso {
		flex: 1 1 0;
	}
}

/* --- Bloque 5: preguntas recientes --- */
.bm-portada-preguntas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-16);
}

.bm-portada-pregunta-texto {
	display: block;
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
	text-decoration: none;
}

.bm-portada-pregunta-texto:hover {
	color: var(--bm-verde);
}

.bm-portada-pregunta-respuesta {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

.bm-portada-pregunta-autor {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-suave);
}

.bm-portada-preguntas-ver-todas {
	margin: var(--bm-esp-16) 0 0;
	text-align: center;
	font-size: var(--bm-letra-14);
}

@media (min-width: 768px) {
	.bm-portada-preguntas-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Bloque 6: puerta del médico --- */
.bm-portada-medico {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bm-esp-16);
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-panel);
	background-color: var(--bm-menta);
	text-align: center;
}

.bm-portada-medico-texto {
	margin: 0;
	font-size: var(--bm-letra-16);
	color: var(--bm-menta-texto);
}

@media (min-width: 768px) {
	.bm-portada-medico {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ==========================================================
   CAPA 2C — PÁGINA MADRE DE ESPECIALIDAD (25/08/2026)
   /{especialista}/ (56 páginas de una misma plantilla:
   bmed_seo_render_madre() en modulos/seo/urls-programaticas.php).
   Escopado bajo .bm-pagina-madre (coexiste con .bmed-seo-pagina, que
   sigue dando el ancho/gap de siempre — también lo usa la página de
   zona, sin tocar). Celular primero.
   ========================================================== */

/* --- Mini-hero --- */
.bm-madre-hero {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

.bm-madre-hero-titulo {
	margin: 0;
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-madre-hero-apoyo {
	margin: 0;
	max-width: var(--bm-ancho-lectura);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

@media (min-width: 768px) {
	.bm-madre-hero-titulo {
		font-size: var(--bm-letra-36);
	}

	.bm-madre-hero-boton {
		width: auto;
	}
}

/* --- Contadores de la especialidad --- */
.bm-madre-numeros {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bm-esp-16);
	max-width: 320px;
}

.bm-madre-numero-item {
	min-width: 0; /* sin esto, un número de varias cifras puede forzar scroll horizontal en un celular angosto */
}

.bm-madre-numero-valor {
	margin: 0;
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
	line-height: var(--bm-interlineado-titulo);
}

.bm-madre-numero-etiqueta {
	margin: var(--bm-esp-4) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

/* --- La guía (solo las especialidades con guía publicada) --- */
.bm-madre-guia-titulo {
	margin: 0 0 var(--bm-esp-16);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

/* La tabla comparativa de la guía: bordes y encabezado del sistema
   nuevo, sin tocar el marcado (sigue siendo una <table> nativa de
   wp_kses_post, nada de JS). */
.bm-pagina-madre .bmed-guia-cuerpo table {
	border: 1px solid var(--bm-gris-linea);
	border-radius: var(--bm-radio-chico);
	overflow: hidden;
}

.bm-pagina-madre .bmed-guia-cuerpo th,
.bm-pagina-madre .bmed-guia-cuerpo td {
	padding: var(--bm-esp-12);
	border: 1px solid var(--bm-gris-linea);
}

.bm-pagina-madre .bmed-guia-cuerpo th {
	background-color: var(--bm-gris-fondo);
	font-weight: var(--bm-peso-seminegrita);
}

/* --- FAQ como acordeón nativo (<details>/<summary>, sin JS) --- */
.bm-madre-faq {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
}

.bm-madre-faq-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-madre-faq-item {
	padding: var(--bm-esp-16);
	border-radius: var(--bm-radio-chico);
	background-color: var(--bm-gris-fondo);
}

.bm-madre-faq-pregunta {
	cursor: pointer;
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
}

.bm-madre-faq-item[open] .bm-madre-faq-pregunta {
	margin-bottom: var(--bm-esp-8);
}

.bm-madre-faq-respuesta {
	margin: 0;
	color: var(--bm-gris-texto);
}

/* --- Listado de médicos: misma grilla de siempre (.bmed-lista-medicos),
   tarjeta vestida con avatar + nombre + chapitas. Comparte función con
   la página de zona — no cambia qué médicos lista ni su orden. --- */
.bm-madre-tarjeta-medico {
	display: flex;
	align-items: flex-start;
	gap: var(--bm-esp-12);
	border: none; /* pisa el borde de .bmed-tarjeta-medico: .bm-tarjeta ya da el contorno con box-shadow */
	padding: var(--bm-esp-16);
}

.bm-madre-tarjeta-avatar {
	flex-shrink: 0;
}

.bm-madre-tarjeta-cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
	min-width: 0;
}

.bm-madre-tarjeta-nombre {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
	text-decoration: none;
}

.bm-madre-tarjeta-nombre:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-madre-tarjeta-chapitas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
}

/* --- Bloque nuevo: preguntas de pacientes con respuesta ---
   Parcial reutilizable (bmed_preguntas_render_bloque_madre_respondidas()
   en modulos/preguntas/vista-publica.php) — hoy colgado de la página
   madre, listo para que las páginas de zona lo sumen después. */
.bm-madre-preguntas {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

.bm-madre-preguntas-titulo {
	margin: 0;
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-madre-preguntas-lista {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-madre-pregunta-item {
	padding: var(--bm-esp-16);
}

.bm-madre-pregunta-enlace {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
	text-decoration: none;
}

.bm-madre-pregunta-enlace:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-madre-preguntas-ver-todas {
	margin: 0;
	font-size: var(--bm-letra-14);
}

/* ==========================================================
   CAPA 2D — PÁGINA DE ZONA + TEJIDO DE ENLACES (25/08/2026)
   /{especialista}/{provincia}/ y /{especialista}/{provincia}/{localidad}/
   (bmed_seo_render_zona() en modulos/seo/urls-programaticas.php).
   Escopado por nombre (.bm-zona-*, mismo criterio que .bm-madre-* de
   la Capa 2C) — coexiste con .bmed-seo-pagina, que sigue dando el
   ancho/gap de siempre. Celular primero.
   ========================================================== */

/* --- Mini-hero: mismas medidas que el de la página madre --- */
.bm-zona-hero {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

.bm-zona-hero-titulo {
	margin: 0;
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-zona-hero-apoyo {
	margin: 0;
	max-width: var(--bm-ancho-lectura);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

@media (min-width: 768px) {
	.bm-zona-hero-titulo {
		font-size: var(--bm-letra-36);
	}

	.bm-zona-hero-boton {
		width: auto;
	}
}

/* --- Contador de la zona: un solo número (a diferencia de la madre,
   que muestra dos) --- */
.bm-zona-numeros {
	max-width: 320px;
}

.bm-zona-numero-valor {
	margin: 0;
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
	line-height: var(--bm-interlineado-titulo);
}

.bm-zona-numero-etiqueta {
	margin: var(--bm-esp-4) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

/* --- El tejido de enlaces: mismo criterio del pie de la ficha (Capa
   2A, .bm-ficha-pie) — título de sección 14px gris suave, enlaces
   verdes sin subrayado. Un solo estilo para los tres bloques nuevos:
   "El mismo especialista en otras zonas" y "Otras especialidades en
   {lugar}" (páginas de zona) y "Por zona" (página madre). --- */
.bm-zona-enlaces {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
	padding-top: var(--bm-esp-16);
	border-top: 1px solid var(--bm-gris-linea);
}

.bm-zona-enlaces-titulo {
	margin: 0;
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-gris-suave);
}

.bm-zona-enlaces-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bm-esp-8) var(--bm-esp-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-zona-enlaces-link {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	color: var(--bm-verde);
	text-decoration: none;
}

.bm-zona-enlaces-link:hover {
	color: var(--bm-verde-oscuro);
	text-decoration: underline;
}

.bm-zona-enlaces-destacado {
	margin: 0;
	font-weight: var(--bm-peso-seminegrita);
}

/* ==========================================================
   CAPA 2E — FORMULARIO DEL PACIENTE (25/08/2026)
   El circuito completo: formulario (general/precargado/dirigido),
   selector de especialidad, verificación de teléfono (enlace mágico
   por SMS — no hay pantalla de código), spinner, cartel de empuje a
   online y la confirmación final. Escopado bajo .bm-pagina-formulario,
   la clase nueva que se sumó al contenedor raíz de las 5 pantallas
   (vista-formulario.php, pantalla-espera.php, pantalla-gracias.php,
   cartel-empuje.php, y la pantalla de /confirmar-telefono/ que
   reutiliza el marcado de gracias) — así ningún otro formulario del
   sitio (registro, ingresar, ajustes, reclamo de perfil, todos
   comparten los mismos nombres .bmed-* de siempre) se ve afectado.
   Celular primero. Cero lógica tocada: solo marcado y CSS.
   ========================================================== */
.bm-pagina-formulario {
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
	background-color: var(--bm-blanco);
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
}

/* --- Contenedor: una sola columna, ancho de lectura cómodo.
   El lienzo del sitio ya centra todo a 1280px (ver "EL LIENZO",
   arriba) — esto lo angosta bastante más, a propósito y solo en las
   páginas de este circuito: un formulario largo se completa mejor en
   una columna angosta que estirado de punta a punta de la pantalla. --- */
.bm-form-contenedor {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Título de cada pantalla (general, dirigido, gracias, SMS) --- */
.bm-form-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

@media (min-width: 768px) {
	.bm-form-titulo {
		font-size: var(--bm-letra-30);
	}
}

.bm-pagina-formulario .bmed-subtitulo {
	margin: 0 0 var(--bm-esp-24);
	color: var(--bm-gris-texto);
	font-size: var(--bm-letra-16);
}

/* --- El <form> en sí: mismo ancho que el contenedor (640px de
   siempre no hace nada acá, el que manda es .bm-form-contenedor). --- */
.bm-pagina-formulario .bmed-form {
	gap: var(--bm-esp-24);
}

.bm-pagina-formulario .bmed-fila {
	gap: var(--bm-esp-16);
}

.bm-pagina-formulario .bmed-campo {
	gap: var(--bm-esp-8);
}

/* --- Campos: el sistema .bm-campo de la Capa 1, sumado a las
   clases con gancho de JS (.bmed-selector-input) que no se pueden
   renombrar sin romper el buscador de especialidad/provincia/
   localidad — conviven las dos clases en el mismo elemento. --- */
.bm-pagina-formulario .bm-campo {
	width: 100%;
	display: block;
}

.bm-pagina-formulario textarea.bm-campo {
	resize: vertical;
	min-height: 96px;
}

/* Especialidad ya certera (llegó bloqueada desde una ficha/madre/
   zona): la pastilla menta, con la altura y el radio del sistema
   nuevo — antes tenía el borde/radio genérico del sistema viejo. */
.bm-pagina-formulario .bmed-especialidad-fija {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 12px 16px;
	background-color: var(--bm-menta);
	border-radius: var(--bm-radio-tarjeta);
	color: var(--bm-menta-texto);
	font-weight: var(--bm-peso-seminegrita);
	text-transform: capitalize;
}

/* --- El selector con buscador (especialidad/provincia/localidad):
   mismo comportamiento JS de siempre, traje nuevo. --- */
.bm-pagina-formulario .bmed-selector-lista {
	border: none;
	border-radius: var(--bm-radio-tarjeta);
	box-shadow: var(--bm-sombra-flotante);
	padding: var(--bm-esp-8) 0;
}

.bm-pagina-formulario .bmed-selector-item {
	padding: 12px 16px;
	font-size: var(--bm-letra-16);
}

.bm-pagina-formulario .bmed-selector-item:hover {
	background-color: var(--bm-gris-fondo);
}

.bm-pagina-formulario .bmed-selector-item.bmed-seleccionado {
	background-color: var(--bm-menta);
	color: var(--bm-menta-texto);
	font-weight: var(--bm-peso-seminegrita);
}

/* El "No sé" — visible y amable, nunca escondido: fondo menta
   propio, primera opción de la lista (el HTML ya lo pone primero). */
.bm-pagina-formulario .bmed-selector-item.bmed-no-se {
	background-color: var(--bm-menta);
	border-bottom: none;
	border-radius: var(--bm-radio-chico);
	margin: 0 var(--bm-esp-8) var(--bm-esp-8);
}

.bm-pagina-formulario .bmed-selector-item.bmed-no-se:hover {
	background-color: var(--bm-menta);
}

.bm-pagina-formulario .bmed-selector-item.bmed-no-se strong {
	color: var(--bm-menta-texto);
	font-weight: var(--bm-peso-seminegrita);
}

/* --- Modalidad de atención: chips cómodas al tacto (mínimo 44px),
   nunca menos por la misma regla que ya rige los campos. --- */
.bm-pagina-formulario .bmed-radios {
	gap: var(--bm-esp-8);
}

.bm-pagina-formulario .bmed-radio {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: var(--bm-radio-pildora);
	box-shadow: var(--bm-borde-interior);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-normal);
}

/* --- Notas y aviso legal --- */
.bm-pagina-formulario .bmed-nota {
	color: var(--bm-gris-suave);
	font-size: var(--bm-letra-14);
}

/* --- Error general (arriba del formulario, cuando falla algo que
   no es de un campo puntual) — mismo rojo que .bm-campo-error-texto. --- */
.bm-pagina-formulario .bmed-error-general {
	margin: 0 0 var(--bm-esp-16);
	padding: var(--bm-esp-12) var(--bm-esp-16);
	background-color: var(--bm-rojo-fondo);
	border-radius: var(--bm-radio-tarjeta);
	color: var(--bm-rojo);
	font-size: var(--bm-letra-14);
}

/* --- El aviso "Tu consulta va dirigida a..." (.bm-aviso-destinatario)
   ya existe desde la Capa 2B — nada que agregar acá, queda dentro de
   este contenedor con el mismo ancho de lectura del resto. --- */

/* --- El spinner de espera: ya usaba el verde de marca
   (--color-primario, mismo valor hex que --bm-verde) — se deja el
   giro tal cual, solo el mensaje pasa al tamaño del sistema nuevo. --- */
.bm-pagina-formulario .bmed-espera-texto {
	color: var(--bm-gris-texto);
	font-size: var(--bm-letra-18);
}

/* --- La confirmación final y la pantalla de teléfono confirmado:
   ícono de éxito en verde, junto al texto existente (que no cambió
   ni un carácter — solo el "✓" quedó envuelto en un span para
   poder darle su propio círculo). --- */
.bm-pagina-formulario .bm-form-exito-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: var(--bm-esp-8);
	vertical-align: middle;
	border-radius: var(--bm-radio-circulo);
	background-color: var(--bm-menta);
	color: var(--bm-exito);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
}

/* --- El cartel de empuje a online: tarjeta destacada, fondo menta,
   radio 16px — el texto (título, cuerpo, los dos botones) es el que
   ya definen las opciones de wp_options, intacto. --- */
.bm-pagina-formulario .bm-cartel-empuje-tarjeta {
	padding: var(--bm-esp-24);
	background-color: var(--bm-menta);
	border-radius: var(--bm-radio-tarjeta);
	text-align: center;
}

.bm-pagina-formulario .bm-cartel-empuje-tarjeta .bm-form-titulo {
	color: var(--bm-menta-texto);
}

.bm-pagina-formulario .bm-cartel-empuje-tarjeta p {
	color: var(--bm-menta-texto);
	margin: 0 0 var(--bm-esp-24);
}

.bm-pagina-formulario .bmed-cartel-botones {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
}

/* El camino alternativo del cartel ("No, prefiero solo presencial"):
   discreto a propósito — nunca compite con el botón principal. */
.bm-form-enlace-discreto {
	display: inline-block;
	padding: var(--bm-esp-8);
	border: none;
	background: none;
	color: var(--bm-gris-suave);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-normal);
	text-decoration: underline;
	cursor: pointer;
}

.bm-form-enlace-discreto:hover {
	color: var(--bm-pizarra);
}

/* ==========================================================
   CAPA 2F — PREGUNTAS: ÍNDICE + PREGUNTA INDIVIDUAL (25/08/2026)
   /preguntas/ (bmed_preguntas_render_index()) y /pregunta/{slug}/
   (bmed_preguntas_render_individual()), en
   modulos/preguntas/vista-publica.php + formulario-publico.php.
   Escopado bajo .bm-pagina-preguntas, el mismo criterio que
   .bm-pagina-madre/.bm-pagina-zona: coexiste con .bmed-seo-pagina
   (que sigue dando el layout de siempre) y es solo un gancho de
   escopado, no una re-tipografía general de la página — ninguna
   lógica del módulo (siembra, moderación IA, orden de respuestas,
   Schema QAPage) se tocó. --- */

.bm-preguntas-titulo {
	margin: 0;
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
}

.bm-preguntas-intro {
	max-width: var(--bm-ancho-lectura);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

/* --- El listado del índice: cada pregunta como tarjeta --- */
.bm-preguntas-lista {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-preguntas-tarjeta {
	padding: var(--bm-esp-16);
}

.bm-preguntas-tarjeta-enlace {
	display: block;
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
	text-decoration: none;
}

.bm-preguntas-tarjeta-enlace:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-preguntas-tarjeta-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
	margin-top: var(--bm-esp-8);
}

/* --- El formulario "Hacé tu pregunta", arriba del índice --- */
.bm-preguntas-form-tarjeta {
	padding: var(--bm-esp-16);
	padding-top: var(--bm-esp-24);
}

.bm-preguntas-form-tarjeta form {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

/* --- El CTA "necesitás un X" / "hacé otra consulta", en tarjeta --- */
.bm-preguntas-cta {
	padding: var(--bm-esp-16);
	padding-top: var(--bm-esp-24);
}

.bm-preguntas-cta-titulo {
	margin: 0 0 var(--bm-esp-16);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
}

/* --- La pantalla de cuidado (25/08/2026): lo que ve el paciente en vez
   de la confirmación normal cuando la pregunta activó la detección de
   crisis. Tarjeta menta, calma, sin rojo — los teléfonos son el único
   elemento con jerarquía fuerte, porque son lo único que importa que se
   note acá. --- */
.bm-preguntas-cuidado {
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-tarjeta);
	background-color: var(--bm-menta);
	color: var(--bm-menta-texto);
}

.bm-preguntas-cuidado p {
	margin: 0 0 var(--bm-esp-16);
	color: var(--bm-menta-texto);
	line-height: 1.6;
}

.bm-preguntas-cuidado-lista {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
	margin: 0 0 var(--bm-esp-16);
	padding: var(--bm-esp-16);
	list-style: none;
	background-color: var(--color-fondo);
	border-radius: var(--bm-radio-tarjeta);
}

.bm-preguntas-cuidado-etiqueta {
	display: block;
	margin-bottom: 0.2rem;
	font-size: var(--bm-letra-14);
	color: var(--bm-pizarra);
}

.bm-preguntas-cuidado-tel {
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde-oscuro);
	text-decoration: none;
}

.bm-preguntas-cuidado-tel:hover {
	text-decoration: underline;
}

.bm-preguntas-cuidado-o {
	margin: 0 var(--bm-esp-8);
	color: var(--bm-pizarra);
	font-size: var(--bm-letra-14);
}

/* --- El H1 de la pregunta individual: la keyword long-tail, más
   chico que el mini-hero de madre/zona (30/36px) porque es el
   título de un contenido, no una landing — mismo criterio que
   .bm-form-titulo (Capa 2E). --- */
.bm-preguntas-pregunta-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
	font-family: var(--bm-fuente);
	color: var(--bm-pizarra);
}

@media (min-width: 768px) {
	.bm-preguntas-pregunta-titulo {
		font-size: var(--bm-letra-30);
	}
}

/* --- El texto de cada respuesta (dentro de .bm-prosa, ver
   vista-publica.php) --- */
.bm-preguntas-respuesta-texto {
	margin: 0;
}

/* --- La firma de quien responde: la pieza de confianza. Un médico
   real trae avatar + nombre enlazado a su ficha + chapitas; el
   equipo editorial va sobrio, sin avatar ni chapita de matrícula
   (nunca se hace pasar por un médico matriculado). --- */
.bm-preguntas-firma {
	display: flex;
	align-items: center;
	gap: var(--bm-esp-12);
	margin: 0 0 var(--bm-esp-8);
}

.bm-preguntas-firma-avatar {
	flex-shrink: 0;
}

.bm-preguntas-firma-cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-4);
	min-width: 0;
}

.bm-preguntas-firma-nombre {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
	text-decoration: none;
}

a.bm-preguntas-firma-nombre:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-preguntas-firma-chapitas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
}

.bm-preguntas-firma--editorial {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-gris-suave);
}

/* --- Los enlaces internos al pie ("Últimas preguntas sobre esta
   especialidad" y el link al índice): mismo criterio que el pie de
   la ficha y el tejido de enlaces de zona (Capa 2A/2D) — título de
   sección 14px gris suave, enlaces verdes sin subrayado. --- */
.bm-preguntas-pie {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
	padding-top: var(--bm-esp-16);
	border-top: 1px solid var(--bm-gris-linea);
}

.bm-preguntas-pie-titulo {
	margin: 0;
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-gris-suave);
}

.bm-preguntas-pie-lista {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-preguntas-pie-link {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	color: var(--bm-verde);
	text-decoration: none;
}

.bm-preguntas-pie-link:hover {
	color: var(--bm-verde-oscuro);
	text-decoration: underline;
}

.bm-preguntas-pie-destacado {
	margin: 0;
	font-weight: var(--bm-peso-seminegrita);
}

/* --- La línea del SMS en la pantalla de gracias (Paso 3 de la Capa
   2F, gotera de conversión detectada en la 2E): 16px, más grande que
   el resto de las notas de esta pantalla (14px) porque es el único
   aviso que explica un paso que el paciente puede llegar a hacer
   después de salir de la página. --- */
.bm-pagina-formulario .bm-form-nota-sms {
	margin-top: var(--bm-esp-8);
	font-size: var(--bm-letra-16);
}

/* ==========================================================
   CAPA 2G — EL PANEL DEL MÉDICO (/mi-panel/) Y EL PANEL PRIVADO
   DE GABRIEL (/panel-bm/) (25/08/2026)
   Los dos comparten la misma raíz .bmed-panel (con o sin
   data-tema="oscuro" — también la pantalla neutra de "reclamo
   pendiente" la reusa). Todo lo de acá vive escopado bajo esa
   clase: cero cambios a .bmed-boton/.bmed-campo/etc. FUERA del
   panel — el registro, el ingreso y el resto del sitio público
   siguen exactamente igual.
   Regla de oro del modo oscuro: acá adentro SOLO colores en
   variables --color-* (las que sí se redefinen bajo
   [data-tema="oscuro"], más arriba en este archivo) — nunca un
   --bm-* de color fijo (--bm-pizarra/--bm-blanco/--bm-gris-*)
   como fondo o texto, porque esos no invierten. Los acentos
   sólidos (--bm-verde/--bm-ambar/--bm-rojo) sí se usan tal cual:
   son píldoras/chips de un solo color, se leen igual en los dos
   modos (mismo criterio que ya probó la Capa 2B con la etiqueta
   ámbar de prioridad exclusiva).
   ========================================================== */

.bmed-panel {
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
}

/* --- Franja superior: saludo/título, créditos, botón de tema --- */
.bmed-panel-franja {
	padding-bottom: var(--bm-esp-16);
	margin-bottom: var(--bm-esp-24);
	border-bottom: 1px solid var(--color-borde);
	gap: var(--bm-esp-16);
}

.bmed-panel-saludo {
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bmed-panel-creditos {
	padding: var(--bm-esp-8) var(--bm-esp-16);
	border-radius: var(--bm-radio-pildora);
	background-color: var(--color-superficie);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-panel-franja .bmed-boton {
	min-height: 36px;
	padding: var(--bm-esp-8) var(--bm-esp-16);
	font-size: var(--bm-letra-12);
}

/* --- Tarjetas-incentivo (matrícula/email) y las tarjetas destacadas
   del panel de Gabriel ("de turno ahora", cuarentena) --- */
.bmed-panel .bmed-tarjeta {
	padding: var(--bm-esp-16);
	margin-bottom: var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
	background-color: var(--color-superficie);
	gap: var(--bm-esp-12);
}

.bmed-panel .bmed-tarjeta-cerrar {
	font-size: var(--bm-letra-16);
}

/* --- Pestañas: barra con subrayado en escritorio, lista apilada en
   celular. La clase -activa la pone el JS de cada panel al abrir una
   pestaña (puro estado visual, no toca qué contenido se muestra). --- */
.bmed-panel .bmed-tabs-nav {
	gap: var(--bm-esp-8);
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: var(--bm-esp-24);
}

.bmed-panel .bmed-tab-boton {
	padding: var(--bm-esp-12) var(--bm-esp-16);
	border-radius: var(--bm-radio-chico) var(--bm-radio-chico) 0 0;
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--color-secundario);
	border-bottom: 2px solid transparent;
	transition: color var(--bm-transicion), border-color var(--bm-transicion), background-color var(--bm-transicion);
}

.bmed-panel .bmed-tab-boton:hover {
	color: var(--color-texto);
	background-color: var(--color-superficie);
}

.bmed-panel .bmed-tab-boton-activa {
	color: var(--color-primario);
	border-bottom-color: var(--color-primario);
}

/* El verde de marca (--color-primario) en texto chico (14px) no llega al
   contraste mínimo sobre el fondo oscuro (medido: 3,5, hace falta 4,5) —
   mismo hallazgo que ya hizo la sesión del modo oscuro del 17/08 con los
   estados "aprobado"/"rechazado". Ahí se usa --color-exito, ya aclarado
   para leerse bien en oscuro (el borde, que no necesita contraste de
   texto, sigue con --color-primario en los dos modos). */
.bmed-panel[data-tema="oscuro"] .bmed-tab-boton-activa {
	color: var(--color-exito);
}

.bmed-panel .bmed-tab-badge {
	background-color: var(--bm-rojo);
}

@media (max-width: 700px) {
	.bmed-panel .bmed-tab-boton {
		padding: var(--bm-esp-16);
		border-radius: var(--bm-radio-tarjeta);
		border: 1px solid var(--color-borde);
		margin-bottom: var(--bm-esp-8);
	}

	.bmed-panel .bmed-tab-boton-activa {
		border-color: var(--color-primario);
		background-color: var(--color-superficie);
	}
}

/* --- Botones dentro del panel: misma forma que .bm-boton (píldora,
   44px), colores por variable para seguir el modo oscuro. --- */
.bmed-panel .bmed-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--bm-esp-12) var(--bm-esp-24);
	border-radius: var(--bm-radio-pildora);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	transition: background-color var(--bm-transicion), color var(--bm-transicion);
}

.bmed-panel .bmed-boton-primario {
	border-color: var(--color-primario);
	background-color: var(--color-primario);
}

.bmed-panel .bmed-boton:not(.bmed-boton-primario):not(.bmed-boton-peligro):hover {
	background-color: var(--color-superficie);
}

/* --- Campos de formulario dentro del panel --- */
.bmed-panel .bmed-input,
.bmed-panel .bmed-select,
.bmed-panel .bmed-textarea,
.bmed-panel .bmed-selector-input,
.bmed-panel .bmed-input-file {
	min-height: 44px;
	padding: var(--bm-esp-12) var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	font-family: var(--bm-fuente);
}

.bmed-panel .bmed-campo label,
.bmed-panel .bmed-label-grupo {
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-panel .bmed-chip {
	padding: var(--bm-esp-4) var(--bm-esp-12);
	background-color: var(--color-superficie);
}

/* --- Estados vacíos: más aire, centrados, un poco más de peso --- */
.bmed-panel .bmed-placeholder {
	padding: var(--bm-esp-24) 0;
	text-align: center;
	color: var(--color-secundario);
	font-size: var(--bm-letra-16);
}

/* ── SALA DE ESPERA ──────────────────────────────────────────── */

.bmed-panel .bmed-sala-filtros {
	gap: var(--bm-esp-8);
	margin-bottom: var(--bm-esp-16);
}

.bmed-panel .bmed-pastilla {
	padding: var(--bm-esp-8) var(--bm-esp-16);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
}

.bmed-panel .bmed-pastilla-activa {
	background-color: var(--color-primario);
	border-color: var(--color-primario);
}

.bmed-panel .bmed-sala-lista {
	gap: var(--bm-esp-16);
}

.bmed-panel .bmed-sala-card {
	padding: var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
}

.bmed-panel .bmed-sala-card-cabecera strong {
	font-size: var(--bm-letra-18);
}

.bmed-panel .bmed-sala-atender {
	margin-top: var(--bm-esp-16);
}

/* La etiqueta ámbar de prioridad exclusiva (Capa 2B, .bm-chapita--ambar
   ya la vestía): acá se remata como banner de ancho completo,
   centrado, con el mismo radio de esquina que la tarjeta nueva por
   arriba — para que quede pegada prolija al borde, no "flotando". */
.bmed-panel .bmed-sala-exclusiva {
	justify-content: center;
	text-align: center;
	padding: var(--bm-esp-8) var(--bm-esp-12);
	border-radius: var(--bm-radio-chico);
	font-size: var(--bm-letra-14);
}

/* ── MIS PACIENTES ───────────────────────────────────────────── */
.bmed-panel .bmed-mis-pacientes {
	gap: var(--bm-esp-16);
}

.bmed-panel .bmed-paciente-card {
	padding: var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
}

.bmed-panel .bmed-paciente-cabecera h3 {
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-panel .bmed-paciente-motivo {
	margin-top: var(--bm-esp-12);
	padding-top: var(--bm-esp-12);
	border-top: 1px solid var(--color-borde);
}

/* ── MODAL (confirmar atención / candado de plata / aviso) ──────── */
.bmed-panel .bmed-modal {
	max-width: 420px;
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-tarjeta);
	box-shadow: var(--bm-sombra-modal);
}

.bmed-panel .bmed-modal h3 {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-panel .bmed-modal-acciones {
	gap: var(--bm-esp-8);
	margin-top: var(--bm-esp-24);
}

/* ── CRÉDITOS Y PACKS ────────────────────────────────────────── */
.bmed-panel .bmed-packs {
	gap: var(--bm-esp-16);
	margin-top: var(--bm-esp-16);
}

.bmed-panel .bmed-pack-card {
	padding: var(--bm-esp-24) var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
	gap: var(--bm-esp-4);
	transition: border-color var(--bm-transicion);
}

.bmed-panel .bmed-pack-card:hover {
	border-color: var(--color-primario);
}

.bmed-panel .bmed-pack-ahorro {
	border-radius: var(--bm-radio-pildora);
	font-size: var(--bm-letra-12);
}

.bmed-panel .bmed-pack-creditos {
	font-size: var(--bm-letra-18);
}

.bmed-panel .bmed-pack-precio {
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--color-primario);
}

.bmed-panel .bmed-pago-pendiente {
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-tarjeta);
	background-color: var(--color-superficie);
}

.bmed-panel .bmed-pago-codigo {
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
}

/* ── AJUSTES (perfil, matrícula, email, contraseña, compartir, baja) ── */
.bmed-panel .bmed-ajustes-seccion {
	padding-bottom: var(--bm-esp-24);
	margin-bottom: var(--bm-esp-24);
	border-bottom: 1px solid var(--color-borde);
}

.bmed-panel .bmed-ajustes-seccion h3 {
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-panel .bmed-aj-qr {
	border-radius: var(--bm-radio-chico);
}

/* ── PANEL DE GABRIEL (/panel-bm/): números vivos + tarjetas de cola
   (Pagos, Verificaciones, Consultas, Demanda, Gasto de API, Contenido,
   Preguntas, Solicitudes/Reclamos) — todas comparten .bmed-admin-card/
   .bmed-admin-lista, así que una sola regla las viste a todas parejo. ── */
.bmed-panel .bmed-admin-numeros {
	gap: var(--bm-esp-12);
	margin: var(--bm-esp-16) 0 var(--bm-esp-24);
}

.bmed-panel .bmed-admin-numero {
	padding: var(--bm-esp-16) var(--bm-esp-12);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
	background-color: var(--color-superficie);
}

.bmed-panel .bmed-admin-numero strong {
	font-size: var(--bm-letra-24);
	color: var(--color-primario);
}

.bmed-panel .bmed-admin-lista {
	gap: var(--bm-esp-16);
	margin-bottom: var(--bm-esp-24);
}

.bmed-panel .bmed-admin-card {
	padding: var(--bm-esp-16);
	border-radius: var(--bm-radio-tarjeta);
	border: 1px solid var(--color-borde);
}

.bmed-panel .bmed-admin-card-historial {
	background-color: var(--color-superficie);
}

.bmed-panel .bmed-admin-card-cuarentena {
	border-color: var(--bm-ambar);
	background-color: var(--color-acento-fondo);
}

.bmed-panel .bmed-admin-nota {
	border-radius: var(--bm-radio-chico);
}

.bmed-panel .bmed-admin-verif-foto {
	border-radius: var(--bm-radio-chico);
}

.bmed-panel .bmed-admin-semaforo,
.bmed-panel .bmed-admin-contenido-preview {
	border-radius: var(--bm-radio-tarjeta);
}

/* ==========================================================
   RESTOS DEL TRAJE (25/08/2026) — la paginación con números
   Componente compartido por madre, zona e índice de preguntas
   (bmed_seo_render_paginacion(), un solo lugar). Números como
   botón chico, actual destacado en verde, mínimo 44px de área
   tocable en los tres (flechas y números), aunque el círculo
   visual sea más chico — el padding completa el toque.
   ========================================================== */
.bmed-seo-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
	margin-top: var(--bm-esp-8);
}

.bmed-seo-paginacion-numeros {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bm-esp-8);
}

.bmed-seo-paginacion-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--bm-esp-8) var(--bm-esp-16);
	border-radius: var(--bm-radio-pildora);
	background-color: var(--bm-gris-fondo);
	color: var(--bm-pizarra);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bm-transicion);
}

.bmed-seo-paginacion-flecha:hover {
	background-color: var(--bm-gris-linea);
}

.bmed-seo-paginacion-num,
.bmed-seo-paginacion-num--actual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--bm-esp-4) var(--bm-esp-8);
	border-radius: var(--bm-radio-pildora);
	font-family: var(--bm-fuente);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	text-decoration: none;
}

.bmed-seo-paginacion-num {
	color: var(--bm-pizarra);
	background-color: transparent;
	transition: background-color var(--bm-transicion);
}

.bmed-seo-paginacion-num:hover {
	background-color: var(--bm-gris-fondo);
}

.bmed-seo-paginacion-num--actual {
	background-color: var(--bm-verde);
	color: var(--bm-blanco);
}

.bmed-seo-paginacion-puntos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	color: var(--bm-gris-suave);
	font-size: var(--bm-letra-14);
}

/* --- Procedencia (26/08/2026): detalle en la pestaña Consultas y bloque
   de conteo en la pestaña Demanda del panel privado. Vive adentro del
   panel, así que sigue la regla de oro del modo oscuro: solo variables
   --color-* acá (las chapitas ya usan sus --bm-* fijos, definidos arriba
   junto a las demás). --- */
.bmed-procedencia-acordeon {
	margin-top: var(--bm-esp-8);
	font-size: var(--bm-letra-14);
}

.bmed-procedencia-acordeon summary {
	cursor: pointer;
	color: var(--color-primario);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-procedencia-detalle {
	margin: var(--bm-esp-8) 0 0;
}

.bmed-procedencia-detalle dt {
	margin-top: var(--bm-esp-8);
	color: var(--color-secundario);
	font-weight: var(--bm-peso-seminegrita);
}

.bmed-procedencia-detalle dt:first-child {
	margin-top: 0;
}

.bmed-procedencia-detalle dd {
	margin: 0;
	color: var(--color-secundario);
	word-break: break-word;
}

.bmed-admin-procedencia-columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-24);
}

@media (min-width: 720px) {
	.bmed-admin-procedencia-columnas {
		grid-template-columns: 1fr 1fr;
	}
}

.bmed-admin-separador {
	margin: var(--bm-esp-24) 0;
	border: none;
	border-top: 1px solid var(--bm-gris-linea);
}

/* Antifraude (25/08/2026): campo señuelo del formulario del paciente y
   de Preguntas — invisible para una persona (visual y lectores de
   pantalla vía aria-hidden en el HTML), pero un bot que completa todo
   a ciegas sí lo llena. Nunca depende de display:none/visibility:hidden
   (algunos rastreadores simples las detectan y saltean el campo). */
.bmed-campo-trampa {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================
   PÁGINAS INSTITUCIONALES (26/08/2026): políticas de privacidad,
   términos y condiciones, cómo funciona, contacto — las 4 páginas de
   /politicas-de-privacidad/, /terminos-y-condiciones/, /como-funciona/
   y /contacto/. Celular primero.
   ========================================================== */

/* Políticas y términos: .bm-prosa ya da el ancho de lectura y el
   tamaño de letra — acá solo falta centrarla dentro de .bm-contenedor
   (que es más ancho) en pantallas grandes. */
.bm-pagina-institucional .bm-prosa {
	margin-left: auto;
	margin-right: auto;
}

.bm-pagina-institucional h2 {
	margin: var(--bm-esp-32) 0 var(--bm-esp-12);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bm-pagina-institucional ul,
.bm-pagina-institucional ol {
	margin: var(--bm-esp-16) 0;
	padding-left: var(--bm-esp-24);
}

.bm-pagina-institucional li {
	margin-bottom: var(--bm-esp-8);
}

/* --- Cómo funciona: hero simple --- */
.bm-cf-hero {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto var(--bm-esp-48);
	text-align: center;
}

.bm-cf-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-cf-hero-apoyo {
	margin: 0;
	font-size: var(--bm-letra-18);
	color: var(--bm-gris-texto);
}

/* --- Las dos mitades: apiladas en celular, lado a lado desde tablet.
   Una línea divisoria sutil entre las dos desde que hay espacio para
   ponerlas en columnas. --- */
.bm-cf-mitades {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-48);
}

.bm-cf-mitad-titulo {
	margin: 0 0 var(--bm-esp-24);
	font-size: var(--bm-letra-24);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bm-cf-pasos {
	margin: 0 0 var(--bm-esp-24);
	padding: 0;
	list-style: none;
}

.bm-cf-cta {
	width: 100%;
	margin-bottom: var(--bm-esp-48);
}

.bm-cf-faq .bm-madre-faq-titulo {
	font-size: var(--bm-letra-18);
}

@media (min-width: 768px) {
	.bm-cf-mitades {
		grid-template-columns: 1fr 1fr;
		gap: var(--bm-esp-64);
	}

	.bm-cf-mitad {
		padding-left: var(--bm-esp-32);
		border-left: 1px solid var(--bm-gris-linea);
	}

	.bm-cf-mitad:first-child {
		padding-left: 0;
		border-left: none;
	}

	.bm-cf-cta {
		width: auto;
	}
}

/* ==========================================================
   LA DUPLA VENDEDORA (26/08/2026): /soy-medico/ (landing de
   captación) y /creditos/ (precios públicos). Celular primero,
   dentro de .bm-pagina-institucional (mismo h2/ul/li que ya da esa
   clase). Cada sección con margen inferior generoso — son páginas
   largas, de una sola columna, pensadas para leerse de arriba abajo.
   ========================================================== */

.bm-pagina-soy-medico > section,
.bm-pagina-creditos > section {
	margin-bottom: var(--bm-esp-48);
}

/* --- Hero de /soy-medico/: mismo patrón que .bm-portada-hero --- */
.bm-sm-hero {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-24);
}

.bm-sm-hero-foto {
	order: -1;
	border-radius: var(--bm-radio-tarjeta);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.bm-sm-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bm-sm-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-sm-hero-apoyo {
	margin: 0 0 var(--bm-esp-24);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-sm-hero-botones {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
}

@media (min-width: 768px) {
	.bm-sm-hero {
		flex-direction: row;
		align-items: center;
		gap: var(--bm-esp-48);
	}

	.bm-sm-hero-texto,
	.bm-sm-hero-foto {
		flex: 1 1 0;
		order: 0;
	}

	.bm-sm-hero-titulo {
		font-size: var(--bm-letra-48);
	}

	.bm-sm-hero-botones {
		flex-direction: row;
	}

	.bm-sm-hero-botones .bm-boton {
		width: auto;
	}
}

/* --- El modelo en 3 tarjetas --- */
.bm-sm-modelo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-16);
	margin-top: var(--bm-esp-24);
}

.bm-sm-modelo-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-sm-modelo-texto {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
	line-height: var(--bm-interlineado-texto);
}

.bm-sm-modelo-link {
	display: inline-block;
	margin-top: var(--bm-esp-12);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
}

@media (min-width: 768px) {
	.bm-sm-modelo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Cómo funciona para usted: reusa .bm-portada-pasos --- */
.bm-sm-aviso-honorarios {
	margin: var(--bm-esp-16) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

/* --- El reclamo: franja menta, mismo tono que .bm-portada-medico --- */
.bm-sm-reclamo {
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-panel);
	background-color: var(--bm-menta);
}

.bm-sm-reclamo .bm-portada-seccion-titulo,
.bm-sm-reclamo-texto {
	color: var(--bm-menta-texto);
}

.bm-sm-reclamo-texto {
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
}

.bm-sm-reclamo-acciones {
	margin: var(--bm-esp-24) 0;
}

.bm-sm-reclamo-nota {
	margin: var(--bm-esp-8) 0 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-menta-texto);
}

/* --- Precios (/creditos/) --- */
.bm-pr-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bm-pr-hero-apoyo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-pr-hero-nota {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

.bm-pr-packs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-16);
}

.bm-pr-pack {
	text-align: center;
}

.bm-pr-pack-chapita {
	margin-bottom: var(--bm-esp-8);
}

.bm-pr-pack-creditos {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-pr-pack-precio {
	margin: 0 0 var(--bm-esp-4);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-verde);
}

.bm-pr-pack-xcredito {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

@media (min-width: 640px) {
	.bm-pr-packs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bm-pr-packs-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ==========================================================
   LAS 3 PIEZAS DE PREGUNTAS FRECUENTES (26/08/2026):
   /dudas-de-pacientes/, /dudas-de-medicos/ y el bloque corto de la
   portada. Las dos páginas reusan .bm-pagina-institucional y
   .bm-madre-faq tal cual (mismo acordeón que ya usa /como-funciona/);
   acá solo lo que les falta: el hero simple y la tarjeta de cierre.
   ========================================================== */

.bm-du-hero {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto var(--bm-esp-32);
	text-align: center;
}

.bm-du-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bm-du-hero-apoyo {
	margin: 0;
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-du-faq {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto;
}

.bm-du-cierre {
	max-width: var(--bm-ancho-lectura);
	margin: var(--bm-esp-48) auto 0;
	text-align: center;
}

.bm-du-cierre-texto {
	margin: 0 0 var(--bm-esp-16);
	font-size: var(--bm-letra-16);
}

.bm-du-cierre-nota {
	margin: var(--bm-esp-12) 0 0;
	font-size: var(--bm-letra-14);
}

/* --- El bloque corto de la portada: mismo acordeón, ancho de lectura --- */
.bm-portada-faq-lista {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto;
}

.bm-portada-faq-lista .bm-madre-faq-respuesta a {
	font-weight: var(--bm-peso-seminegrita);
}

/* ==========================================================
   EL CARRIL DE ARTÍCULOS (26/08/2026) — segundo carril del motor de
   contenido: /contenidos/ (índice) y /contenidos/{slug}/ (artículo).
   Mobile-first, reusa .bm-tarjeta/.bm-boton/.bm-madre-faq/.bm-prosa/
   .bmed-guia-cuerpo ya existentes. Cero !important.
   ========================================================== */

/* --- El recuadro "En pocas palabras" arriba del artículo --- */
.bm-resumen-corto {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto var(--bm-esp-24);
	padding: var(--bm-esp-16) var(--bm-esp-24);
	background-color: var(--bm-gris-fondo);
	border-left: 4px solid var(--bm-verde);
	border-radius: var(--bm-radio-chico);
}

.bm-resumen-corto-etiqueta {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-12);
	font-weight: var(--bm-peso-seminegrita);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bm-verde);
}

.bm-resumen-corto-texto {
	margin: 0;
	font-size: var(--bm-letra-16);
	line-height: var(--bm-interlineado-texto);
	color: var(--bm-pizarra);
}

/* --- La tarjeta de invitación (menta, a mitad y al final del artículo) --- */
.bm-tarjeta--menta {
	background-color: var(--bm-menta);
}

.bm-articulo-cta {
	max-width: var(--bm-ancho-lectura);
	margin: var(--bm-esp-32) auto;
	padding: var(--bm-esp-24);
	text-align: center;
}

.bm-articulo-cta-titulo {
	margin: 0 0 var(--bm-esp-16);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-menta-texto);
}

/* --- El artículo individual --- */
.bm-pagina-articulo .bm-articulo {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-24);
}

.bm-articulo-titulo {
	font-size: var(--bm-letra-30);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
	color: var(--bm-pizarra);
	margin: 0;
}

.bm-articulo-hero-img {
	width: 100%;
	height: auto;
	border-radius: var(--bm-radio-tarjeta);
}

.bm-articulo-segui-leyendo h2 {
	font-size: var(--bm-letra-24);
	margin: 0 0 var(--bm-esp-16);
}

.bm-articulo-segui-leyendo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-12);
}

.bm-articulo-segui-leyendo-lista a {
	color: var(--bm-verde);
	font-weight: var(--bm-peso-seminegrita);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- El índice /contenidos/ --- */
.bm-contenidos-hero {
	max-width: var(--bm-ancho-lectura);
	margin: 0 auto;
	text-align: center;
}

.bm-contenidos-hero-titulo {
	font-size: var(--bm-letra-36);
	line-height: var(--bm-interlineado-titulo);
	margin: 0 0 var(--bm-esp-12);
}

.bm-contenidos-hero-apoyo {
	font-size: var(--bm-letra-18);
	color: var(--bm-gris-texto);
	margin: 0;
}

.bm-contenidos-vacio {
	text-align: center;
	color: var(--bm-gris-texto);
}

.bm-contenidos-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-24);
}

@media (min-width: 700px) {
	.bm-contenidos-grilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bm-contenidos-grilla {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bm-contenidos-tarjeta {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--bm-transicion);
}

.bm-contenidos-tarjeta:hover {
	box-shadow: var(--bm-sombra-flotante);
}

.bm-contenidos-tarjeta-img img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.bm-contenidos-tarjeta-cuerpo {
	padding: var(--bm-esp-16);
}

.bm-contenidos-tarjeta-titulo {
	font-size: var(--bm-letra-18);
	line-height: var(--bm-interlineado-titulo);
	margin: 0 0 var(--bm-esp-8);
	color: var(--bm-pizarra);
}

.bm-contenidos-tarjeta-arranque {
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
	margin: 0;
}

/* La sección "Artículos" del pie (los últimos 6, como el hermano)
   se retiró el 28/08/2026: el pie nuevo de cuatro columnas la
   reemplaza por un solo enlace "Artículos" al índice, dentro de la
   columna PACIENTES. Ver la sección "EL PIE DEL SITIO", al final. */

/* --- El panel: el checklist del temario de 30 candidatos --- */
.bmed-articulos-tema-item {
	display: flex;
	align-items: flex-start;
	gap: var(--bm-esp-8);
	padding: var(--bm-esp-8) 0;
	border-bottom: 1px solid var(--bm-gris-linea);
	font-size: var(--bm-letra-14);
	cursor: pointer;
}

.bmed-articulos-tema-item input {
	margin-top: 4px;
}

/* ==========================================================
   RESEÑAS DE PACIENTES (26/08/2026): la sección "Opiniones de
   pacientes" al final de una ficha ACTIVA, y su formulario "Dejar mi
   opinión". Todo dentro de .bm-pagina-ficha, reusa .bm-tarjeta/
   .bm-campo/.bm-boton/.bm-chapita existentes. Celular primero.
   ========================================================== */

.bm-resena-vacio {
	color: var(--bm-gris-texto);
	font-size: var(--bm-letra-14);
	margin: 0 0 var(--bm-esp-16);
}

.bm-resenas-lista {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
	margin-bottom: var(--bm-esp-16);
}

.bm-resena-tarjeta {
	padding-bottom: var(--bm-esp-16);
	border-bottom: 1px solid var(--bm-gris-linea);
}

.bm-resena-tarjeta:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.bm-resena-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bm-esp-8);
	margin-bottom: 4px;
}

/* Estrellas: solo lectura (reseñas publicadas y bandeja del panel). */
.bm-resena-estrellas {
	color: var(--bm-ambar);
	font-size: var(--bm-letra-16);
	letter-spacing: 1px;
}

.bm-resena-autor {
	font-weight: var(--bm-peso-seminegrita);
	font-size: var(--bm-letra-14);
	color: var(--bm-pizarra);
}

.bm-resena-fecha {
	font-size: var(--bm-letra-12);
	color: var(--bm-gris-texto);
}

.bm-resena-texto {
	margin: 0;
	font-size: var(--bm-letra-14);
	line-height: var(--bm-interlineado-texto);
	color: var(--bm-pizarra);
}

/* El <details> "Dejar mi opinión": el summary hace de botón (sin
   marcador nativo de flecha, el propio .bm-boton ya se ve como uno). */
.bm-resena-detalles summary {
	list-style: none;
	cursor: pointer;
	width: 100%;
}

.bm-resena-detalles summary::-webkit-details-marker {
	display: none;
}

.bm-resena-detalles[open] summary {
	margin-bottom: var(--bm-esp-16);
}

.bm-resena-form {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-16);
}

.bm-campo-grupo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bm-resena-ayuda {
	margin: 0;
	font-size: var(--bm-letra-12);
	color: var(--bm-gris-texto);
}

.bm-resena-resultado {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-verde);
	font-weight: var(--bm-peso-seminegrita);
}

/* El control de puntaje: 5 radios en orden inverso (row-reverse) para
   que ":checked ~ label"/"label:hover ~ label" pinten desde la
   estrella tocada hacia la primera, sin depender de JavaScript. Cada
   label mide 44px (zona táctil cómoda al dedo, misma regla que el
   resto del sitio). */
.bm-resena-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.bm-resena-rating input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bm-resena-rating label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: var(--bm-letra-24);
	line-height: 1;
	color: var(--bm-gris-linea);
	cursor: pointer;
	border-radius: var(--bm-radio-circulo);
}

.bm-resena-rating label::before {
	content: '★';
}

.bm-resena-rating input:checked ~ label,
.bm-resena-rating input:hover ~ label,
.bm-resena-rating label:hover,
.bm-resena-rating label:hover ~ label {
	color: var(--bm-ambar);
}

.bm-resena-rating input:focus-visible + label {
	box-shadow: var(--bm-anillo-foco);
}

/* ==========================================================
   EL PIE DEL SITIO (28/08/2026, G4)
   Cuatro columnas de enlaces y, debajo, la fila legal centrada.
   La franja es de ancho completo; adentro, .bm-pie centra todo a
   1280 con los márgenes del sistema (.bm-contenedor).
   En el formulario del paciente se imprime SOLO la fila legal (ver
   footer.php) — el CSS es el mismo, no hace falta nada aparte.
   ========================================================== */
.bm-pie {
	padding-top: var(--bm-esp-48);
	padding-bottom: var(--bm-esp-32);
	font-family: var(--bm-fuente);
}

.bm-pie-columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-32);
	margin-bottom: var(--bm-esp-32);
}

.bm-pie-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-12);
	font-weight: var(--bm-peso-seminegrita);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bm-gris-suave);
}

.bm-pie-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
}

.bm-pie-lista a {
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
	text-decoration: none;
}

.bm-pie-lista a:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-pie-legal {
	margin: 0;
	padding-top: var(--bm-esp-16);
	border-top: 1px solid var(--bm-gris-linea);
	text-align: center;
	font-size: var(--bm-letra-12);
	color: var(--bm-gris-suave);
}

.bm-pie-legal a {
	color: var(--bm-gris-texto);
	text-decoration: none;
}

.bm-pie-legal a:hover {
	color: var(--bm-verde);
	text-decoration: underline;
}

.bm-pie-separador {
	margin: 0 var(--bm-esp-4);
	color: var(--bm-gris-borde);
}

@media (min-width: 768px) {
	.bm-pie-columnas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bm-pie-columnas {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--bm-esp-48);
	}
}

/* ==========================================================
   LA TARJETA DE MÉDICO DEL DIRECTORIO (28/08/2026)
   La usan la grilla de /medicos/ y el carrusel de la portada.
   Es más grande que la tarjeta de renglón de las páginas madre/zona
   (esa no se tocó): acá no hay contexto que diga la especialidad ni
   la zona, así que cada tarjeta se cuenta sola.
   ========================================================== */
.bm-medico-tarjeta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bm-esp-8);
	padding: var(--bm-esp-24);
	text-align: center;
}

.bm-medico-tarjeta-avatar {
	margin-bottom: var(--bm-esp-8);
}

.bm-medico-tarjeta-rubro {
	margin: 0;
	font-size: var(--bm-letra-12);
	font-weight: var(--bm-peso-seminegrita);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bm-gris-suave);
}

.bm-medico-tarjeta-nombre {
	margin: 0;
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
}

.bm-medico-tarjeta-nombre a {
	color: var(--bm-pizarra);
	text-decoration: none;
}

.bm-medico-tarjeta-nombre a:hover {
	color: var(--bm-verde);
}

.bm-medico-tarjeta-chapitas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bm-esp-4);
	margin: 0;
}

.bm-medico-tarjeta-resenas {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

.bm-medico-tarjeta-resenas .bm-resena-estrellas {
	color: var(--bm-ambar);
}

.bm-medico-tarjeta-boton {
	margin-top: var(--bm-esp-8);
}

/* ==========================================================
   /medicos/ — EL BUSCADOR DE MÉDICOS (28/08/2026, N1)
   Filtros al costado en escritorio, desplegables en celular con el
   mismo casillero sin JavaScript que usa la cabecera.
   ========================================================== */
.bm-medicos-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-medicos-hero-apoyo {
	margin: 0;
	max-width: var(--bm-ancho-lectura);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-medicos-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-32);
}

/* --- La barra de filtros --- */
.bm-medicos-filtros {
	display: none;
	flex-direction: column;
	gap: var(--bm-esp-8);
	padding: var(--bm-esp-24);
	border-radius: var(--bm-radio-tarjeta);
	background-color: var(--bm-gris-fondo);
}

.bm-medicos-filtros-toggle:checked ~ .bm-medicos-filtros {
	display: flex;
}

.bm-medicos-filtros-titulo {
	margin: 0 0 var(--bm-esp-8);
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
}

.bm-medicos-filtros-campo {
	width: 100%;
	margin-bottom: var(--bm-esp-8);
}

.bm-medicos-filtros-enviar {
	margin-top: var(--bm-esp-8);
}

.bm-medicos-filtros-limpiar {
	margin-top: var(--bm-esp-8);
	text-align: center;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

.bm-medicos-filtros-boton {
	width: 100%;
	margin-bottom: var(--bm-esp-16);
}

.bm-medicos-conteo {
	margin: 0 0 var(--bm-esp-16);
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-gris-texto);
}

.bm-medicos-vacio {
	margin: 0;
	padding: var(--bm-esp-32);
	border-radius: var(--bm-radio-tarjeta);
	background-color: var(--bm-gris-fondo);
	text-align: center;
	color: var(--bm-gris-texto);
}

.bm-medicos-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-16);
}

@media (min-width: 700px) {
	.bm-medicos-grilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bm-medicos-hero-titulo {
		font-size: var(--bm-letra-36);
	}

	/* En escritorio los filtros son una columna fija a la izquierda y
	   están siempre abiertos: el botón de desplegar no hace falta. */
	.bm-medicos-layout {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--bm-esp-48);
		align-items: start;
	}

	.bm-medicos-filtros-boton {
		display: none;
	}

	.bm-medicos-filtros {
		display: flex;
		position: sticky;
		top: var(--bm-esp-24);
	}

	.bm-medicos-grilla {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
   /resenas/ — TODAS LAS OPINIONES PUBLICADAS (28/08/2026, N2)
   ========================================================== */
.bm-resenas-hero-titulo {
	margin: 0 0 var(--bm-esp-12);
	font-size: var(--bm-letra-30);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	letter-spacing: var(--bm-espaciado-titulo);
}

.bm-resenas-hero-apoyo {
	margin: 0;
	max-width: var(--bm-ancho-lectura);
	font-size: var(--bm-letra-16);
	color: var(--bm-gris-texto);
}

.bm-resenas-vacio {
	margin: 0;
	padding: var(--bm-esp-48) var(--bm-esp-24);
	border-radius: var(--bm-radio-tarjeta);
	background-color: var(--bm-gris-fondo);
	text-align: center;
	font-size: var(--bm-letra-18);
	color: var(--bm-gris-texto);
}

.bm-resenas-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bm-esp-16);
}

.bm-resenas-tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
	padding: var(--bm-esp-24);
}

.bm-resenas-tarjeta-estrellas {
	display: flex;
	align-items: center;
	gap: var(--bm-esp-8);
	margin: 0;
	color: var(--bm-ambar);
}

.bm-resenas-tarjeta-autor {
	font-size: var(--bm-letra-14);
	font-weight: var(--bm-peso-seminegrita);
	color: var(--bm-pizarra);
}

.bm-resenas-tarjeta-texto {
	margin: 0;
	font-size: var(--bm-letra-16);
	color: var(--bm-pizarra);
}

.bm-resenas-tarjeta-medico {
	margin: 0;
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-suave);
}

.bm-resenas-tarjeta-medico a {
	color: var(--bm-verde);
	text-decoration: none;
}

.bm-resenas-tarjeta-medico a:hover {
	text-decoration: underline;
}

@media (min-width: 700px) {
	.bm-resenas-grilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bm-resenas-hero-titulo {
		font-size: var(--bm-letra-36);
	}

	.bm-resenas-grilla {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
   PORTADA V2 — LAS PIEZAS NUEVAS (28/08/2026)
   Las franjas de ancho completo, el carrusel y los ajustes de la
   nube de especialidades. Lo que ya estaba (hero, números, cómo
   funciona, FAQ) sigue en la sección "PORTADA (25/08/2026)", más
   arriba en este archivo.
   ========================================================== */

/* Un lienzo anidado (hoy: la portada) siempre ocupa las tres
   columnas del lienzo de afuera — si no, sus secciones de ancho
   completo quedarían encerradas en la columna del medio y el fondo
   no llegaría a los bordes. */
.sitio-main > .bm-lienzo {
	grid-column: bm-total;
}

/* --- Las dos franjas hermanas: la gris de pacientes (bloque 2b) y
   la menta del médico (bloque 8). Misma composición, espejada. --- */
.bm-franja {
	padding-top: var(--bm-esp-48);
	padding-bottom: var(--bm-esp-48);
}

.bm-franja--gris {
	background-color: var(--bm-gris-fondo);
}

.bm-franja--menta {
	background-color: var(--bm-menta);
}

.bm-franja-interior {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-24);
	align-items: center;
	text-align: center;
}

.bm-franja-foto {
	width: 100%;
	max-width: 480px;
	border-radius: var(--bm-radio-tarjeta);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.bm-franja-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bm-franja-texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bm-esp-24);
}

.bm-franja-leyenda {
	margin: 0;
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	color: var(--bm-pizarra);
}

.bm-franja--menta .bm-franja-leyenda {
	color: var(--bm-menta-texto);
}

@media (min-width: 768px) {
	.bm-franja-interior {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--bm-esp-48);
		text-align: left;
	}

	/* La espejada (bloque 8): mismo HTML, la foto pasa al otro lado. */
	.bm-franja-interior--espejada {
		flex-direction: row-reverse;
	}

	.bm-franja-foto {
		flex: 0 1 42%;
		max-width: none;
	}

	.bm-franja-texto {
		flex: 1 1 0;
		align-items: flex-start;
	}

	.bm-franja-leyenda {
		font-size: var(--bm-letra-24);
	}
}

/* --- El carrusel: una pista que se desliza con imanes. Las flechas
   las enciende js/carrusel.js y solo cuando hay sobrante. --- */
.bm-carrusel {
	position: relative;
}

.bm-carrusel-pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: var(--bm-esp-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--bm-esp-4);
	padding-bottom: var(--bm-esp-8);
	scrollbar-width: thin;
}

.bm-carrusel-item {
	scroll-snap-align: start;
	min-width: 0;
}

.bm-carrusel-item > * {
	height: 100%;
}

.bm-carrusel-flecha {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: var(--bm-radio-circulo);
	background-color: var(--bm-blanco);
	box-shadow: var(--bm-sombra-flotante);
	color: var(--bm-pizarra);
	font-size: var(--bm-letra-18);
	line-height: 1;
	cursor: pointer;
}

.bm-carrusel-flecha--izq {
	left: calc(var(--bm-esp-16) * -1);
}

.bm-carrusel-flecha--der {
	right: calc(var(--bm-esp-16) * -1);
}

@media (min-width: 1024px) {
	.bm-carrusel-pista {
		grid-auto-columns: minmax(0, calc(33.333% - var(--bm-esp-16)));
	}

	/* En escritorio las flechas sí se ven — el JS les saca el hidden
	   cuando hay tarjetas fuera de pantalla. */
	.bm-carrusel-flecha:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Las reseñas van en dos filas de tres, deslizándose de a columnas. */
.bm-carrusel-pista--dos-filas {
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
}

/* --- El título centrado (bloque 6) --- */
.bm-portada-seccion-titulo--centrado {
	text-align: center;
}

/* --- La pastilla centrada de "ver todo" (bloques 3 y 6) --- */
.bm-portada-pastilla-envoltorio {
	margin: var(--bm-esp-24) 0 0;
	text-align: center;
}

/* --- La tarjeta de artículo de la portada --- */
.bm-portada-articulo-tarjeta {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.bm-portada-articulo-img {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.bm-portada-articulo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bm-portada-articulo-cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--bm-esp-8);
	padding: var(--bm-esp-16);
}

.bm-portada-articulo-titulo {
	font-size: var(--bm-letra-18);
	font-weight: var(--bm-peso-seminegrita);
	line-height: var(--bm-interlineado-titulo);
	color: var(--bm-pizarra);
}

.bm-portada-articulo-tarjeta:hover .bm-portada-articulo-titulo {
	color: var(--bm-verde);
}

.bm-portada-articulo-arranque {
	font-size: var(--bm-letra-14);
	color: var(--bm-gris-texto);
}

/* --- La nube de especialidades, ahora compacta y en píldoras
   completas: el redondeo pasa de esquina suave a píldora y el aire
   de arriba y abajo baja a tres cuartos del que tenía. --- */
.bm-portada-esp-item {
	border-radius: var(--bm-radio-pildora);
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: var(--bm-esp-16);
	padding-right: var(--bm-esp-16);
}

/* Una nube de verdad: cada píldora ocupa lo que mide su nombre y se
   van acomodando solas, en vez de la grilla de columnas iguales que
   tenía antes (con columnas parejas no se lee como nube, se lee como
   una tabla de botones). */
.bm-portada-esp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bm-esp-8);
}

/* La línea de confianza va arriba de los números, no debajo. */
.bm-portada-confianza {
	margin: 0 0 var(--bm-esp-24);
}

.bm-portada-numeros .bm-portada-esp-grid {
	margin-top: var(--bm-esp-32);
}

@media (min-width: 768px) {
	/* En escritorio la nube no necesita el alto táctil de 44px de
	   cada píldora: ahí es donde se ve de verdad "compacta". */
	.bm-portada-esp-item {
		min-height: 36px;
	}
}

/* Una pista con menos tarjetas de las que entran en pantalla se
   centra: con el título centrado arriba, una sola tarjeta pegada al
   margen izquierdo se lee como un error. Como en ese caso la pista
   nunca desborda, centrarla no puede esconder nada. */
.bm-carrusel-pista--pocos {
	justify-content: center;
}