/**
 * PBA — Estilos del subsistema de abogados.
 *
 * Transcripción de la maqueta aprobada. Las decisiones y su porqué están
 * en fuentes/estructura-perfil-abogado-pba.md; aquí solo van notas sobre
 * el código.
 *
 * TODO va prefijado con .pba- y anidado bajo .pba-perfil. Es deliberado:
 * este CSS convive con Royal Elementor Kit y con Elementor, que definen
 * clases genéricas por todas partes. Sin prefijo, un día una actualización
 * del tema pisaría el perfil o al revés.
 *
 * Tampoco se declara nada sobre body, html ni * — los tokens van en
 * .pba-perfil, no en :root, por el mismo motivo.
 *
 * No se carga ninguna fuente: Poppins ya la sirve el tema. Añadir una
 * segunda petición a Google Fonts empeoraría el rendimiento, que ya es
 * el punto flojo del sitio (ver rendimiento-web-pba.md).
 */

.pba-perfil {
	--pba-dorado: #CC8A2E;
	--pba-dorado-hover: #B87926;
	--pba-titulos: #222222;
	--pba-textos: #555555;
	--pba-gris: #999999;
	--pba-blanco: #FFFFFF;
	--pba-blanco-suave: #E0E0E0;
	--pba-confianza: #121212;

	/* Neutro cálido derivado del dorado. Propuesto en este subsistema,
	   no venía en la base visual del sitio. */
	--pba-fondo-suave: #FAF8F4;
	--pba-linea: #E7E1D8;

	--pba-serif: Georgia, 'Times New Roman', serif;
	--pba-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--pba-medida: 66ch;

	background: var(--pba-blanco);
	color: var(--pba-textos);
	font-family: var(--pba-sans);
	font-size: 17px;
	line-height: 1.6;
}

.pba-perfil *,
.pba-perfil *::before,
.pba-perfil *::after { box-sizing: border-box; }

.pba-perfil h1,
.pba-perfil h2,
.pba-perfil h3 {
	font-family: var(--pba-serif);
	font-weight: 400;
	color: var(--pba-titulos);
	margin: 0;
	text-wrap: balance;
}

.pba-perfil p { margin: 0; }
.pba-perfil a { color: inherit; }
.pba-perfil img { max-width: 100%; height: auto; }

.pba-env {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* ---------- 1 · Ruta ---------- */
.pba-ruta {
	font-size: 12px;
	color: #B3ADA4;
	padding-block: 16px 0;
	letter-spacing: .2px;
}
.pba-ruta a,
.pba-ruta a:visited {
	color: #B3ADA4 !important;
	font-weight: 400;
	text-decoration: none;
}
.pba-ruta a:hover,
.pba-ruta a:focus { color: var(--pba-dorado) !important; }

/* ---------- 2 · Identidad ---------- */
.pba-identidad { padding-block: 45px 80px; }
.pba-identidad .pba-env {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 56px;
	align-items: start;
}

/* 4/5 es la proporción real de las fotografías del estudio (1200×1500).
   Cualquier otra recortaría cabezas. */
.pba-retrato {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(160deg, #F6F1E9 0%, #EFE7DA 100%);
}
.pba-retrato img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pba-pretitulo {
	font-size: 12px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--pba-dorado);
	line-height: 1.4;
}
.pba-identidad h1 {
	/* Elementor impone 60px al H1 global, también en móvil. */
	font-size: clamp(32px, 4vw, 45px) !important;
	line-height: 1.08;
	margin-block: 14px 0;
}
.pba-cargo {
	color: var(--pba-gris);
	font-style: italic;
	font-size: 16px;
	/* El reset global de párrafos del tema anula este margen. */
	margin-top: 10px !important;
}

/* Divisor recurrente del sistema. 1px entero: a 1.5px el redondeo
   subpíxel la pinta distinta en cada pantalla. */
.pba-raya {
	width: 96px;
	height: 1px;
	background: var(--pba-dorado);
	border: 0;
	margin: 24px 0 26px;
}
.pba-raya--corta { width: 34px; margin: 0; }

.pba-entrada {
	font-size: 17px;
	font-weight: 400 !important;
	line-height: 1.65;
	max-width: 62ch;
}

.pba-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 26px;
}
.pba-etiqueta {
	font-size: 10px;
	letter-spacing: .7px;
	text-transform: uppercase;
	border: 1px solid var(--pba-linea);
	padding: 6px 11px;
	color: var(--pba-gris);
	text-decoration: none;
	background: var(--pba-fondo-suave);
}
a.pba-etiqueta:hover { border-color: var(--pba-dorado); color: var(--pba-dorado); }
a.pba-etiqueta::after { content: '\203A'; margin-left: 6px; color: var(--pba-dorado); }

.pba-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }

/* El único botón dorado macizo de la página. Si aparece un segundo,
   deja de leerse cuál es la acción importante. */
.pba-btn {
	font-family: var(--pba-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.2px;
	padding: 12px 22px;
	border: 1px solid transparent;
	text-decoration: none;
	display: inline-block;
	background: var(--pba-dorado);
	color: var(--pba-blanco);
	border-radius: 2px;
	transition: background .18s;
}
.pba-btn:hover { background: var(--pba-dorado-hover); color: var(--pba-blanco); }

/* El color global de los enlaces del tema es #666. El texto del CTA debe
   permanecer blanco en todos los estados; el hover solo cambia el fondo. */
.pba-perfil a.pba-btn,
.pba-perfil a.pba-btn:link,
.pba-perfil a.pba-btn:visited,
.pba-perfil a.pba-btn:hover,
.pba-perfil a.pba-btn:focus,
.pba-perfil a.pba-btn:active { color: var(--pba-blanco) !important; }

/* ---------- Secciones de prosa ---------- */
/* Sin border-top: lo que separa los bloques es la alternancia de fondo.
   Las líneas divisorias se probaron y hacían ruido. */
.pba-seccion { padding-block: 64px; }
.pba-seccion--tono { background: var(--pba-fondo-suave); }

.pba-seccion h2,
.pba-areas h2,
.pba-cta h2 {
	font-size: clamp(26px, 2.9vw, 35px);
	line-height: 1.12;
	margin-top: 12px;
}

/* Los dos contenedores de prosa comparten regla, y desde la 1.4.1 no es
   cosmética: .pba-actual tenía la medida pero NO la separación entre
   párrafos, y como .pba-perfil p lleva margin:0 para protegerse del tema,
   dos párrafos seguidos salían pegados sin nada que los separase.

   No se notó antes porque la práctica actual era un solo párrafo en los
   cuatro perfiles cargados. En cuanto uno creció a cuatro, el bloque se
   leyó como un muro. La separación va con gap y no con margin para que
   no haya márgenes que colapsen ni que el tema pueda pisar. */
.pba-prosa,
.pba-actual {
	max-width: var(--pba-medida);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pba-prosa p,
.pba-actual p {
	margin: 0;
	font-weight: 400 !important;
}

/* ---------- 7 · Áreas ---------- */
/* El pretítulo va FUERA de la rejilla, a ancho completo sobre las dos
   columnas: rotula la sección entera, no la columna izquierda.
   Dentro de la rejilla habría heredado el gap de 56px como separación
   con el H2 de debajo, en vez de los 12px que usan las demás secciones. */
.pba-areas__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.pba-lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.pba-lista li {
	border-bottom: 1px solid var(--pba-linea);
	padding-block: 15px;
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-weight: 400 !important;
}
.pba-lista li:first-child { border-top: 1px solid var(--pba-linea); }
.pba-punto {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pba-dorado);
	flex: none;
	transform: translateY(-3px);
}
.pba-lista a,
.pba-lista a:visited {
	color: var(--pba-textos) !important;
	font-weight: 400 !important;
	text-decoration: none;
}
.pba-lista a:hover,
.pba-lista a:focus { color: var(--pba-dorado) !important; }

/* Flecha dibujada con CSS: evita que iOS convierta ↗ en un emoji y mantiene
   exactamente el mismo tamaño y grosor en todos los sistemas. */
.pba-enlazada::after {
	content: '';
	width: 10px;
	height: 10px;
	margin-left: 11px;
	display: inline-block;
	border-top: 1px solid var(--pba-dorado);
	border-right: 1px solid var(--pba-dorado);
	background: linear-gradient(
		135deg,
		transparent 46%,
		var(--pba-dorado) 47%,
		var(--pba-dorado) 53%,
		transparent 54%
	);
	transform: translateY(1px);
}

/* ---------- 8 · Contacto ---------- */
.pba-cta {
	background: var(--pba-confianza);
	color: var(--pba-blanco-suave);
	padding-block: 72px;
}
.pba-cta h2 { color: var(--pba-blanco); }
.pba-cta .pba-env {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}
.pba-cta p { max-width: 52ch; }

.pba-vias { display: flex; flex-direction: column; gap: 2px; }
.pba-via {
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid rgba(224, 224, 224, .16);
}
.pba-via:first-child { border-top: 1px solid rgba(224, 224, 224, .16); }
.pba-via__et {
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pba-dorado);
	width: 112px;
	flex: none;
}
.pba-via__va { color: var(--pba-blanco-suave); }
/* Sin subrayado: cuatro subrayados seguidos ensucian una columna corta,
   y la etiqueta dorada ya indica que la fila es accionable. */
.pba-perfil .pba-via__va a,
.pba-perfil .pba-via__va a:link,
.pba-perfil .pba-via__va a:visited {
	color: var(--pba-blanco-suave) !important;
	text-decoration: none;
}
.pba-perfil .pba-via__va a:hover,
.pba-perfil .pba-via__va a:focus,
.pba-perfil .pba-via__va a:active { color: var(--pba-dorado) !important; }

/* ---------- 9 · Otros abogados ---------- */
.pba-fichas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.pba-ficha {
	position: relative;
	background: var(--pba-blanco);
	border: 1px solid var(--pba-linea);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 2px;
	transition: border-color .18s ease;
}
/* Respuesta contenida al pasar el ratón: sin sombras ni elevación.
   Eso es lenguaje de producto, no de estudio jurídico. */
.pba-ficha:hover { border-color: #D6CBB8; }

.pba-mini {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: linear-gradient(160deg, #F6F1E9, #EFE7DA);
	margin-bottom: 6px;
}
.pba-ficha h3 { font-size: 25px; line-height: .95; }
.pba-f-cargo { font-size: 14px; color: var(--pba-gris); font-style: italic; }
.pba-ficha p { font-size: 15px; line-height: 1.55; }

.pba-ver {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	/* auto y no 4px: empuja el enlace al fondo de la ficha, que ya es una
	   columna flexible. Así los "Ver perfil" de una fila quedan alineados
	   aunque los extractos midan distinto, sin tener que recortar textos
	   para cuadrar píxeles. */
	margin-top: auto;
	padding-top: 4px;
}

/* El color va reforzado porque .pba-perfil a { color: inherit } de la
   línea 62 pesa más que .pba-ver a secas y le ganaba: el enlace salía
   gris en reposo y solo se ponía dorado al pasar el ratón. Mismo
   tratamiento que ya llevan el botón de contacto, las listas de áreas
   y las vías de contacto. */
.pba-perfil .pba-ver,
.pba-perfil .pba-ver:link,
.pba-perfil .pba-ver:visited { color: var(--pba-dorado) !important; }
/* Stretched link: toda la ficha es pulsable, pero en el HTML hay UN solo
   enlace. Evita dos enlaces al mismo destino desde la misma página y la
   duda de cuál texto ancla cuenta. Peaje asumido: el texto de la ficha
   no se puede seleccionar con el ratón. */
.pba-ver::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pba-perfil .pba-ficha:hover .pba-ver { color: var(--pba-dorado-hover) !important; }

/* 16px con el texto a 13px no es un descuido: el › es una marca pequeña
   centrada en la línea y las mayúsculas de al lado llenan toda la caja.
   A igual font-size el chevron se dibuja a la mitad. */
.pba-ver .pba-ch { font-size: 16px; line-height: 1; }

/* ---------- 10 · Cierre ---------- */
/* Vive dentro del bloque 8, con su mismo fondo. Lo que lo hace retroceder
   es el color, no el tamaño: por eso puede ser legible y discreto a la vez. */
.pba-cierre {
	/* El tema anula los márgenes de algunos bloques; se restituye el aire. */
	margin-top: 50px !important;
	font-size: 14px;
	color: var(--pba-gris);
}
/* Aquí los enlaces SÍ van subrayados, al contrario que en el resto del
   perfil: es texto corrido y sin subrayado no se sabe qué palabras enlazan. */
.pba-cierre a { color: var(--pba-textos); }
.pba-cierre a:hover { color: var(--pba-dorado); }

/* ---------- Directorio (/abogados/) ---------- */
/* Misma escala y mismos tokens que el perfil. Lo único propio es la
   cabecera, la barra de filtros y una rejilla de tres columnas que no
   depende de que haya exactamente tres fichas. */

/* Un solo fondo de arriba abajo. La alternancia blanco/hueso del perfil
   separa bloques de contenido comparables; aquí solo habría una costura,
   entre la cabecera y la lista, y se lee como un corte, no como un ritmo.
   Con todo en hueso las fichas blancas destacan igual que en el bloque 8
   del perfil, que es la relación ya aprobada. */
.pba-directorio { background: var(--pba-fondo-suave); }

/* Cabecera centrada. Es la convención de arranque de todo el sitio: los
   hero de las landings son centrados, así que una cabecera alineada a la
   izquierda sería la única distinta. No contradice la decisión del bloque
   8 del perfil de no centrar las fichas: allí se centraban PÁRRAFOS de
   tres líneas dentro de una tarjeta, que cuestan de leer porque cada
   línea arranca en un punto distinto. Aquí se centra una cabecera corta,
   que es otra cosa. Por eso el texto DENTRO de las fichas sigue a la
   izquierda. */
.pba-dir-cabecera { padding-block: 40px 64px; }
.pba-dir-cabecera .pba-env { text-align: center; }
.pba-dir-cabecera .pba-raya { margin-inline: auto; }
.pba-dir-cabecera .pba-entrada { margin-inline: auto; }

.pba-directorio h1 {
	/* Elementor impone 60px al H1 global, también en móvil. Misma escala
	   que el nombre de un perfil: son dos páginas del mismo sistema. */
	font-size: clamp(32px, 4vw, 45px) !important;
	line-height: 1.08;
	margin-block: 14px 0;
}

.pba-dir-filtros {
	display: flex;
	flex-wrap: wrap;
	/* Centrados, en el mismo eje que la cabecera. Con los filtros a la
	   izquierda y la cabecera centrada la página tendría dos ejes. */
	justify-content: center;
	gap: 8px;
	/* Aire suficiente para que la barra de filtros se lea como un control
	   y no como la primera fila de la rejilla. */
	margin-bottom: 52px;
}

/* Pastillas, no botones dorados macizos. El único botón dorado del
   sistema es el de contactar; si una fila de filtros compite con él,
   deja de leerse cuál es la acción importante.
   -------------------------------------------------------------------
   TODOS LOS ESTADOS VAN DECLARADOS Y REFORZADOS, y no es exageración.
   Un <button> arrastra el estilo nativo del navegador y, encima, el
   tema y Elementor definen sus propios :hover, :focus y :active con
   fondo azul. Si aquí solo se declara el estado en reposo, el azul del
   tema aparece en cuanto el ratón pasa por encima — que es justo lo que
   estaba ocurriendo. Es el mismo choque que ya obligó a proteger el
   botón de contacto, las listas de áreas, las vías de contacto y el
   enlace "Ver perfil". */
.pba-directorio .pba-filtro,
.pba-directorio .pba-filtro:hover,
.pba-directorio .pba-filtro:focus,
.pba-directorio .pba-filtro:active {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--pba-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--pba-textos) !important;
	background: var(--pba-blanco) !important;
	/* Algunos temas pintan los botones con degradado, no con color plano:
	   sin esto el fondo azul volvería por background-image. */
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none;
	border: 1px solid var(--pba-linea) !important;
	border-radius: 2px;
	padding: 9px 15px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.pba-directorio .pba-filtro:hover {
	border-color: #D6CBB8 !important;
	color: var(--pba-titulos) !important;
}

/* El estado activo se marca con aria-pressed y no con una clase: así el
   dato que ve el lector de pantalla y el que ve el ojo son el mismo y no
   pueden desincronizarse. Va el último a propósito, para que un filtro
   activo siga dorado aunque el ratón esté encima. */
.pba-directorio .pba-filtro[aria-pressed="true"],
.pba-directorio .pba-filtro[aria-pressed="true"]:hover {
	border-color: var(--pba-dorado) !important;
	color: var(--pba-dorado) !important;
}

.pba-directorio .pba-filtro:focus-visible {
	outline: 2px solid var(--pba-dorado);
	outline-offset: 2px;
}

/* "Todas las áreas" no es un área: es el botón de quitar el filtro. El
   hueco extra lo separa del grupo sin obligar a una segunda fila. */
.pba-dir-filtros .pba-filtro:first-child { margin-right: 12px; }

/* Blindaje del filtro: algunos temas declaran display en elementos que
   deberían respetar el atributo hidden. */
.pba-directorio .pba-ficha[hidden] { display: none !important; }

/* auto-fit y no un número fijo de columnas: con cuatro abogados hoy y diez
   mañana, la rejilla se recompone sola y nunca deja una fila coja. */
.pba-fichas--dir {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: stretch;
}

.pba-dir-vacio {
	font-size: 15px;
	color: var(--pba-gris);
	margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pba-dir-cabecera { padding-block: 24px 44px; }
	.pba-directorio { font-size: 16px; }
	.pba-dir-filtros { margin-bottom: 36px; }

	.pba-ruta { padding-block: 14px 0; }
	.pba-identidad { padding-block: 24px 56px; }
	.pba-identidad .pba-env { grid-template-columns: 1fr; gap: 28px; }

	/* Centrada y con tope de ancho: a pantalla completa la foto se comería
	   la pantalla entera antes de que apareciera el nombre. */
	.pba-retrato { width: 100%; max-width: 420px; margin-inline: auto; }

	.pba-areas__cols,
	.pba-cta .pba-env { grid-template-columns: 1fr; gap: 36px; }
	/* El correo es la cadena más larga del bloque. Sin min-width:0 fuerza la
	   pista del grid a su ancho mínimo y crea scroll horizontal en móviles
	   estrechos. anywhere solo actúa cuando ya no cabe completo. */
	.pba-cta .pba-env > *,
	.pba-vias,
	.pba-via__va { min-width: 0; }
	.pba-via__va { overflow-wrap: anywhere; }
	.pba-fichas { grid-template-columns: 1fr; }
	.pba-env { padding-inline: 22px; }
	.pba-perfil { font-size: 16px; }
}

/* Por debajo de 520px la foto llena la columna: así queda alineada con
   el texto Y centrada al mismo tiempo, que era el conflicto. */
@media (max-width: 520px) {
	.pba-retrato { max-width: none; }
}