/*
Theme Name: MiPerfil Theme
Description: Tema propio de MiPerfil.ar — plantillas PHP clásicas, sin page builder, mobile-first. Ver docs/FASE-3-DISENO.md.
Author: MiPerfil.ar
Version: 0.1.0
Text Domain: miperfil-theme
*/

/* ==========================================================================
   Variables y reset
   ========================================================================== */
:root {
	--azul: #29446b;
	--azul-claro: #3d5f8f;
	--naranja: #ff6b3e;
	--verde: #2ecc71;
	--verificado: #1d9a2a;
	--dorado: #f1c40f;
	--texto: #1f2937;
	--texto-suave: #6b7280;
	--fondo: #ffffff;
	--fondo-suave: #f8fafc;
	--borde: #e5e7eb;
	--radio: 10px;
	--ancho-maximo: 1160px;
	/* Gris cálido real del fondo de página (confirmado en vivo,
	   rgb(244,245,240)) — header y footer lo usan también para no
	   quedar "más blancos" que el resto del sitio. */
	--fondo-pagina: #f4f5f0;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fondo-pagina); /* confirmado en vivo: rgb(244,245,240) en el sitio real */
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--texto);
	line-height: 1.5;
}

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

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Los navegadores NO heredan la tipografía del body en los controles
   de formulario por default (caían en Arial/monospace del sistema,
   bien distinto — y visualmente más "pesado" — que Poppins). Sin este
   reset, cualquier <input>/<textarea>/<button>/<select> del sitio
   (buscador del hero, formulario de reseña, etc.) se veía en negrita
   comparado con el resto del texto aunque su font-weight ya fuera 400. */
input, textarea, select, button {
	font-family: inherit;
	font-size: 100%;
}

.contenedor {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 16px;
}

.btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--radio);
	font-weight: 700;
	font-size: 15px;
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-claro); }
/* Reemplaza el botón grande y brillante que había antes (emoji +
   verde default) — el sitio real no tiene un botón de contacto ahí, así
   que en vez de replicar un estilo genérico esto es un link simple con
   el ícono real de WhatsApp, mismo lenguaje visual que el resto. */
.footer-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--azul);
}
.footer-whatsapp img { border-radius: 50%; }
.btn-outline { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-chico { padding: 8px 14px; font-size: 13px; }
.btn[disabled], .btn-proximamente {
	background: var(--fondo-suave);
	color: var(--texto-suave);
	border: 1px dashed var(--borde);
	cursor: default;
}

/* Aviso persistente para quien tiene un perfil sin publicar (Atajo, o
   wizard completo a medio hacer) — visible en cualquier página mientras
   dure esa situación, no es un bloqueo, solo un recordatorio. */
.aviso-perfil-sin-publicar {
	background: #fff4ed;
	border-bottom: 1px solid var(--naranja);
}
.aviso-perfil-sin-publicar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	padding: 10px 16px;
	font-size: 13px;
	text-align: center;
	color: var(--texto);
}
.aviso-perfil-sin-publicar__inner a {
	font-weight: 700;
	color: var(--naranja);
	white-space: nowrap;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
}
.badge-verificado { background: #eafaf1; color: var(--verificado); }
.badge-destacado { background: #fff6e0; color: #a9760a; }
.badge-verificado svg { width: 14px; height: 14px; display: block; fill: currentColor; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	border-bottom: 1px solid var(--borde);
	/* Antes `position:sticky` — quedaba siempre pegado arriba al
	   scrollear, a pedido de Mariano ya no se queda fijo. */
	/* Antes #fff puro — quedaba notoriamente más blanco que el resto del
	   sitio (fondo real #f4f5f0). */
	background: var(--fondo-pagina);
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	max-width: var(--ancho-maximo);
	margin: 0 auto;
}
.site-header__logo { font-weight: 800; font-size: 20px; color: var(--azul); }
.site-header__logo img { display: block; height: 56px; width: auto; }

.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
/* CSS real exacto del menú (.header-navbar__menu .menu > li > a en el
   sitio viejo), traducido a nuestras clases — antes era mucho más bold
   (font-weight:600) de lo que el real usa (500, normal salvo hover). */
.nav-desktop a {
	position: relative;
	display: inline-block;
	font-weight: 500;
	font-size: 16px;
	color: var(--azul);
	padding: 8px 10px;
	transition: all .3s ease;
}
.nav-desktop a:hover {
	color: var(--naranja);
	transform: translateY(-2px);
}
.nav-desktop a::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: 50%;
	height: 2px;
	background-color: var(--naranja);
	transition: all .3s ease;
	border-radius: 2px;
}
.nav-desktop a:hover::after { transform: translateX(-50%) scaleX(1); }

.nav-hamburguesa-btn {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	line-height: 1;
	padding: 4px 8px;
	color: var(--azul);
	transition: transform .3s ease, color .3s ease, background .2s ease;
}
.nav-hamburguesa-btn:hover { color: var(--naranja); }
@media (max-width: 860px) {
	/* Kebab de 3 puntos (antes 3 líneas) — mismo azul que las palabras de
	   al lado, no naranja (probado y confirmado con Mariano). Círculo con
	   borde para que se lea claro como botón con más opciones adentro,
	   no como un simple adorno. */
	.nav-hamburguesa-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 2px solid var(--azul);
		border-radius: 50%;
		color: var(--azul);
	}
	.nav-hamburguesa-btn:hover { background: var(--fondo-suave); }
	/* Logo centrado en mobile (antes a la izquierda) — con la nav de
	   escritorio oculta acá, el único hijo visible de `.site-header__inner`
	   es el logo. */
	.site-header__inner { justify-content: center; }
}

/* Fila corta de accesos SOLO mobile, boceto de Mariano probando algo
   nuevo: logo arriba centrado, esta fila abajo con los 3 más usados en
   texto (Inicio/Mi Perfil/Empleos) + el hamburguesa para el resto
   (Perfiles/Espacios profesionales quedan solo ahí adentro). En
   desktop no se ve — ahí ya está la nav completa de siempre. */
.nav-header-rapida { display: none; }
@media (max-width: 859px) {
	/* Grid de 3 columnas (en vez de flex + space-between) para que la
	   lista quede centrada DE VERDAD en el medio de la fila, no
	   empujada a la izquierda por el hamburguesa a la derecha. */
	.nav-header-rapida {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		/* Sin esto la lista quedaba pegada al botón (0px de por medio) —
		   el "centrado" del grid es entre las 2 columnas 1fr, no deja
		   aire propio contra la columna del medio. */
		column-gap: 10px;
		align-items: center;
		max-width: var(--ancho-maximo);
		margin: 0 auto;
		padding: 0 16px 14px;
	}
	.nav-header-rapida ul {
		grid-column: 2;
		justify-self: center;
		display: flex;
		/* Con las 4 palabras (Inicio/Mi Perfil/Perfiles/Empleos) + el
		   hamburguesa, un viewport de ~390px queda justo — este gap es el
		   máximo que deja centrar de verdad sin que se corte ni empuje
		   todo a la izquierda. */
		gap: 10px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.nav-header-rapida .nav-hamburguesa-btn { grid-column: 3; justify-self: end; }
	.nav-header-rapida a { font-weight: 600; font-size: 17px; color: var(--azul); white-space: nowrap; }
	.nav-header-rapida a:hover { color: var(--naranja); text-decoration: none; }
}

/* Bug real medido (no a ojo): con las 4 palabras + el botón, un
   viewport angosto de verdad (320-360px, ej. iPhone SE) no alcanza —
   `nav-header-rapida` se salía del ancho de la pantalla y generaba
   scroll lateral en TODA la página (confirmado con
   `document.documentElement.scrollWidth` > `clientWidth`). Se esconde
   "Perfiles" solo ahí — sigue en el menú completo del hamburguesa,
   no se pierde el acceso. */
@media (max-width: 374px) {
	.nav-header-rapida__item--oculto-360 { display: none; }
}

.nav-mobile-panel {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 60;
}
.nav-mobile-panel.esta-abierto { display: block; }
.nav-mobile-panel__hoja {
	background: #fff;
	width: 80%;
	max-width: 320px;
	height: 100%;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	/* Esquina redondeada del lado que "nace" (izquierda de la hoja) —
	   antes era un rectángulo a secas. */
	border-radius: 18px 0 0 18px;
	overflow: hidden;
	box-shadow: -8px 0 30px rgba(0,0,0,.15);
}
.nav-mobile-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	flex: 0 0 auto;
}
.nav-mobile-panel__cerrar {
	background: rgba(255,255,255,.18);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nav-mobile-panel__cerrar:hover { background: rgba(255,255,255,.3); }
.nav-mobile-panel ul { list-style: none; padding: 12px; margin: 0; overflow-y: auto; }
.nav-mobile-panel li + li { margin-top: 4px; }
.nav-mobile-panel a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 12px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	color: var(--texto);
	transition: background .15s ease;
}
.nav-mobile-panel a:hover, .nav-mobile-panel a:active {
	background: var(--fondo-suave);
	text-decoration: none;
}
.nav-mobile-panel__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #eaf0f8;
	color: var(--azul);
}
.nav-mobile-panel__icono svg { width: 19px; height: 19px; }
.nav-mobile-panel__label { flex: 1; }
.nav-mobile-panel__flecha { color: var(--texto-suave); font-size: 18px; }
/* "Cerrar sesión" es una acción distinta (irreversible en el momento,
   te saca del sitio) — separada con un borde arriba y en un tono
   apagado, no mezclada visualmente con la navegación de siempre. */
.nav-mobile-panel__salir { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.nav-mobile-panel__salir a { color: var(--texto-suave); }
.nav-mobile-panel__salir .nav-mobile-panel__icono { background: var(--fondo-suave); color: var(--texto-suave); }

@media (min-width: 860px) {
	.nav-desktop { display: block; }
	.nav-hamburguesa-btn { display: none; }
}

/* ==========================================================================
   Hero del home — fondo real (JPG sideloado por Activos_Migrador, ver
   docs/AUDITORIA-VISUAL.md sección 3). El gradiente queda como respaldo
   para una instalación nueva donde todavía no corrió esa migración.
   ========================================================================== */
.hero {
	position: relative;
	padding: 56px 16px 80px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 55%, #4a7fb8 100%);
	color: #fff;
	/* Antes centrado en mobile ("apretado, sin espacio de sobra") — a
	   pedido de Mariano, el H1/H2 va a la izquierda en todos los
	   tamaños, no solo en desktop. */
	text-align: left;
}
.hero::before, .hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
}
.hero::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.hero::after { width: 220px; height: 220px; bottom: -120px; left: -60px; background: rgba(255,255,255,.06); }
/* Con el hero real (JPG sideloado, fondo claro) el texto pasa a oscuro —
   confirmado por color computado en vivo del H1 real (#29446b, no blanco). */
.hero--con-imagen-real {
	background-image: var(--hero-imagen-real);
	background-size: cover;
	background-position: center;
	color: var(--azul);
}
.hero--con-imagen-real::before, .hero--con-imagen-real::after { display: none; }
.hero__titulo { font-size: 28px; margin: 0 0 10px; position: relative; }
.hero__subtitulo { font-size: 16px; opacity: .9; margin: 0 0 28px; position: relative; }
.hero--con-imagen-real .hero__subtitulo { opacity: .85; color: var(--texto-suave); }

.hero__buscador {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: #fff;
	padding: 14px;
	border: 2px solid var(--azul);
	border-radius: 14px;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
/* Volvimos al estilo de siempre (campo redondeado con sombra propia) —
   Mariano no quería el marco único con divisores — pero sin el borde
   individual de cada campo (pedido explícito: "sin los border
   contornos internos"), que quedaba redundante con el borde del
   contenedor. El resto (radio, sombra, alto, tipografía) igual que antes. */
.hero__buscador input[type="text"],
.hero__buscador select {
	flex: 1 1 160px;
	height: 46px;
	border: none;
	border-radius: 10px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--azul);
	background: #fff;
	box-shadow: 0 2px 6px rgba(30,58,138,.08);
	transition: all .3s ease;
}
.hero__buscador input[type="text"]::placeholder { color: var(--azul); opacity: 1; font-weight: 600; }
.hero__buscador input[type="text"]:hover,
.hero__buscador input[type="text"]:focus,
.hero__buscador select:hover,
.hero__buscador select:focus {
	box-shadow: 0 0 0 3px rgba(30,58,138,.2);
	outline: none;
}
.hero__buscador button { flex: 0 0 auto; border-radius: 3px; }
/* En mobile (cuando el input/select ocupan cada uno el 100% de ancho por
   el wrap) el botón "Buscar" tiene que estirarse igual, no quedar
   angosto/pegado a la izquierda. */
@media (max-width: 859px) {
	.hero__buscador button { flex: 1 1 100%; height: 46px; }
}

@media (min-width: 860px) {
	/* Más alto: con menos padding se veía "zoomeada"/recortada la foto de
	   fondo, no se apreciaban los detalles. El text-align:left ya lo
	   pone la regla base de `.hero` (ver arriba) para todos los tamaños. */
	.hero {
		padding: 110px 16px 150px;
	}
	.hero__titulo { font-size: 38px; }
	.hero__buscador {
		/* Bastante más ancho — el real ocupa gran parte del ancho del
		   hero en desktop, el nuestro quedaba angosto en comparación. */
		max-width: 1000px;
		margin: 0;
	}
}

/* El buscador del archivo /perfiles/ reusa `.hero__buscador` pero NO
   quiere el ancho/alineado a la izquierda pensado para el hero de la
   home — acá va centrado y angosto, "flotando" en el medio de la
   página. Ahora vive DENTRO de `.perfiles-resultados` (ver
   archive-mp_perfil.php) — por eso ya no necesita un `max-width` propio
   centrado en toda la página: toma el 100% del ancho de esa columna,
   quedando alineado con las tarjetas de abajo (mismo ancho, mismo borde
   izquierdo), tal como pidió Mariano. El selector con las 2 clases pesa
   más que `.hero__buscador` solo del media query de arriba (home), así
   que gana sin depender del orden. */
.hero__buscador.hero__buscador--archivo {
	max-width: none;
	width: 100%;
	margin: 0 0 20px;
}
/* En mobile, que no toque los bordes del todo — un poco más angosto que
   su columna (que ya tiene el padding de `.contenedor`) para que se
   sienta "flotando", no pegado a los costados — mismo criterio que las
   tarjetas de abajo (ver `.perfiles-resultados .grid` más abajo). */
@media (max-width: 859px) {
	.hero__buscador.hero__buscador--archivo { max-width: calc(100% - 24px); margin: 0 auto 20px; }
}
@media (min-width: 860px) {
	.hero__buscador.hero__buscador--archivo {
		width: 100%;
		margin: 0 0 20px;
	}
}

/* ==========================================================================
   Secciones genéricas / grids
   ========================================================================== */
/* Bug real encontrado (no a propósito): `.seccion` siempre se usa junto
   con `.contenedor` (que pone `padding:0 16px`), pero al ser las 2 el
   shorthand `padding` con la misma especificidad, la que gana por orden
   en la hoja se queda con los 4 lados — `.seccion` pisaba el padding
   horizontal de `.contenedor` con su propio `0`, dejando el contenido
   pegado al borde en mobile (sin el respiro de 16px de siempre). Con
   longhand (`padding-top/bottom`) no compite con el horizontal de
   `.contenedor`. */
.seccion { padding-top: 40px; padding-bottom: 40px; }
.seccion__titulo { font-size: 22px; margin: 0 0 20px; text-transform: uppercase; color: var(--azul); letter-spacing: .02em; }

.grid-scroll {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}
.grid-scroll > * { scroll-snap-align: start; flex: 0 0 260px; }

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

/* ==========================================================================
   "Filtros extra" (Ubicación/Profesión) del archivo /perfiles/ — vivían
   como un panel aparte (sidebar flotante en desktop, barra "Filtrar"
   propia en mobile); ahora son un `<details>` plegado DENTRO del mismo
   buscador principal, sin sidebar ni layout de 2 columnas: la búsqueda
   de texto ya cubre nombre/profesión, esto es solo para afinar más.
   ========================================================================== */
.perfiles-resultados { min-width: 0; }
.perfiles-resultados__contador { font-size: 13px; color: var(--texto-suave); margin: 0 0 16px; }

.buscador-filtros-extra { flex: 1 1 100%; margin-top: 2px; }
.buscador-filtros-extra summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--azul);
}
.buscador-filtros-extra summary::-webkit-details-marker { display: none; }
.buscador-filtros-extra summary::after { content: "▾"; font-size: 10px; }
.buscador-filtros-extra[open] summary::after { content: "▴"; }
.buscador-filtros-extra__campos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}
.buscador-filtros-extra__campos .perfiles-filtros__campo { flex: 1 1 200px; }
.perfiles-filtros__campo label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--azul);
	margin-bottom: 6px;
}
.perfiles-filtros__campo input {
	width: 100%;
	border: 1px solid var(--borde);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
}

/* Paginación — círculos con contorno azul, nunca texto en inglés (el
   "prev_text"/"next_text" de paginate_links() ya vienen como ‹/› solos,
   ver archive-mp_perfil.php / archive-mp_espacio.php). */
.paginacion { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.paginacion .page-numbers {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 1.5px solid var(--azul);
	border-radius: 50%;
	color: var(--azul);
	font-weight: 600;
	font-size: 14px;
}
.paginacion .page-numbers.dots { border-color: transparent; color: var(--texto-suave); }
.paginacion .page-numbers.current { background: var(--azul); color: #fff; }
.paginacion a.page-numbers:hover { background: var(--fondo-suave); text-decoration: none; }
.paginacion .prev.page-numbers, .paginacion .next.page-numbers { font-size: 18px; }

/* Grid del archivo, más angosto que el `.grid` genérico (240px) — tarjetas
   más finitas, para separar bien la info como pidió Mariano. */
.perfiles-resultados .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Todas las tarjetas del archivo miden lo mismo sin importar cuánto texto
   tenga cada perfil: alto fijo + una sola línea con "..." en nombre/
   profesión/ubicación (ver `.tarjeta__nombre > a`/`.tarjeta__meta--*`
   arriba). El renglón de visitas/reseñas queda pegado casi al borde
   inferior (`margin-top:auto` en la columna flex del cuerpo). */
.perfiles-resultados .perfil-card { height: 360px; display: flex; flex-direction: column; }
.perfiles-resultados .perfil-card__imagen-wrap { flex: 0 0 auto; }
.perfiles-resultados .tarjeta__cuerpo { flex: 1; min-height: 0; }
/* Ubicación agrupada con las stats de abajo, no con la profesión de
   arriba — Mariano: "mas cerca de reseñas y vistas que de médico". El
   margin-top:auto en la ubicación (no en las stats) es lo que empuja
   ese espacio extra ARRIBA de la ubicación en vez de entre ubicación y
   stats, que quedan pegadas entre sí. */
.perfiles-resultados .tarjeta__meta--ubicacion { margin-top: auto; padding-top: 14px; }
.perfiles-resultados .perfil-card__stats { padding-top: 4px; }

@media (max-width: 720px) {
	/* 1 sola columna, una tarjeta abajo de la otra — 2 por fila quedaba
	   todo muy chico para leer la info. Un poco más angosta que el 100%
	   de su columna (mismo criterio que el buscador de arriba) para que
	   las tarjetas queden flotando, no pegadas a los bordes del costado. */
	.perfiles-resultados .grid {
		grid-template-columns: 1fr;
		gap: 12px;
		max-width: calc(100% - 24px);
		margin: 0 auto;
	}

	/* Tarjeta más compacta en mobile — valores reales del sitio viejo
	   (regla "PERFILES – MOBILE MÁS COMPACTO" que pasó Mariano) adaptados
	   a nuestras clases: menos alto, radio más suave, foto un poco más
	   grande, texto más apretado. */
	.perfiles-resultados .perfil-card {
		height: 300px;
		border-radius: 18px;
		padding: 6px;
	}
	.perfiles-resultados .perfil-card__avatar { width: 120px; height: 120px; }
	.perfiles-resultados .tarjeta__nombre { font-size: 15px; line-height: 1.1; margin-bottom: 2px; }
	.perfiles-resultados .tarjeta__meta--profesion,
	.perfiles-resultados .tarjeta__meta--ubicacion { font-size: 11px; line-height: 1.1; }
}

/* Sello "Perfil Certificado" y contador de visitas en la tarjeta del
   archivo — no aplican al carrusel de la home (flags apagados por
   defecto en template-parts/perfil-card.php). */
.perfil-card__imagen-wrap { position: relative; display: block; }
.perfil-card__sello-certificado {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var(--azul);
	border-radius: 50%;
	font-size: 13px;
}

/* ==========================================================================
   "Nos acompañan" — carrusel de scroll automático real, CSS literal del
   sitio viejo (Mariano lo pegó completo), adaptado a nuestros 4 logos
   curados (sin los ítems vencidos/"Publicitá acá" del carrusel viejo, y
   sin `.logo-fantasma` — no hace falta rellenar, el loop cierra igual
   duplicando el bloque real una vez). Ver docs/AUDITORIA-VISUAL.md sección 7.
   ========================================================================== */
.carrusel-titulo {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: var(--azul);
	/* Más aire arriba (antes 0) para separar del hero — quedaba pegado
	   justo debajo, sin ningún espacio que marque el cambio de sección. */
	margin: 40px 0 6px 0;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.carrusel-contenedor {
	overflow: hidden;
	padding: 30px 0;
	width: 100%;
	display: flex;
	align-items: center;
	border-top: 2px solid var(--azul);
	border-bottom: 2px solid var(--azul);
}
.carrusel-track {
	display: flex;
	width: max-content;
	animation: scrollAutomatico 20s linear infinite;
}
.carrusel-track:hover {
	animation-play-state: paused;
}
.carrusel-bloque {
	display: flex;
	align-items: center;
}
.logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 50px;
	transition: transform 0.3s ease;
	width: 160px;
	height: 60px;
	flex-shrink: 0;
}
.logo-item:hover { transform: scale(1.08); }
.logo-item img {
	max-height: 120px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}
@keyframes scrollAutomatico {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.carrusel-track { animation: none; }
}

/* ==========================================================================
   Barra de estadísticas — franja azul de ancho completo, contenido real
   editable (ver functions.php, sección "mp_stat_*"). "Perfiles" se cuenta
   en vivo. Ver docs/AUDITORIA-VISUAL.md sección 7.
   ========================================================================== */
.stats-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 48px;
	background: var(--azul);
	color: #fff;
	padding: 24px 16px;
	text-align: center;
}
.stat strong { display: block; font-size: 28px; font-weight: 700; }
.stat span { font-size: 13px; opacity: .9; letter-spacing: .5px; }

/* Mosaico de categorías — antes una lista de píldoras de texto. 7
   categorías reales + 2 accesos propios del ecosistema (Empleos,
   Espacios profesionales) completan un mosaico parejo de 9 — 3x3 SIEMPRE,
   mobile incluido (Mariano: "me lo imaginaba 3 columnas de 3"), con
   cuadrados más chicos ahí que en desktop. Mismo lenguaje azul del
   resto del sitio, no un color cualquiera. */
.categorias-mosaico {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.categorias-mosaico__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 6px;
	border-radius: 12px;
	background: linear-gradient(155deg, var(--azul) 0%, var(--azul-claro) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 4px 14px rgba(41,68,107,.18);
	transition: transform .2s ease, box-shadow .2s ease;
}
.categorias-mosaico__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(41,68,107,.28);
	text-decoration: none;
	color: #fff;
}
.categorias-mosaico__item svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (min-width: 640px) {
	.categorias-mosaico { gap: 18px; }
	.categorias-mosaico__item { padding: 32px 16px; font-size: 15px; border-radius: 16px; gap: 10px; }
	.categorias-mosaico__item svg { width: 34px; height: 34px; }
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.tarjeta {
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}
/* Le da a la tarjeta de proyecto el mismo contorno fino que la de perfil
   (para que se vea "viva" como esas) pero en naranja en vez de navy —
   así se distingue de un vistazo cuál es cuál en el mismo carrusel. */
.proyecto-card { border: 1px solid var(--naranja); border-radius: 16px; }
/* Mismo ancho que la tarjeta de perfil del carrusel de al lado (220px) —
   quedaban mucho más grandes que esas. */
.grid-scroll--proyectos.grid-scroll > * { flex: 0 0 220px; max-width: 220px; }
.tarjeta__imagen { aspect-ratio: 4/3; background: var(--fondo-suave); overflow: hidden; }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__cuerpo { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tarjeta__nombre { font-weight: 700; font-size: 16px; margin: 0; display: flex; align-items: center; gap: 6px; }
/* Mayúsculas chicas confirmadas contra el sitio real (getComputedStyle en
   vivo): el dato guardado sigue en case normal ("Abogada"), esto es 100%
   presentación — ver docs/AUDITORIA-VISUAL.md sección 2. 13px en el
   archivo /perfiles/ es la única diferencia real entre esos 2 contextos. */
.tarjeta__meta {
	font-size: 11px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
}
body.post-type-archive-mp_perfil .tarjeta__meta { font-size: 13px; }

.perfil-card__avatar {
	/* Más grande todavía (72px → 104px → 128px) — a pedido de Mariano, la
	   foto tiene que ser la protagonista de la tarjeta del archivo
	   /perfiles/, bien grande y centrada. */
	width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
	/* Anillo azul sólido de 4px — confirmado en vivo (`.hp-vendor__image
	   img`), aplica igual en el carrusel de la home y en el archivo
	   /perfiles/ (a diferencia de las "rayas futuristas" de abajo, que
	   solo van en la home). */
	border: 4px solid var(--azul); box-sizing: border-box;
	/* Antes tenía un margen superior negativo (-36px) pensado para que el
	   avatar se superpusiera a una imagen de cabecera — esa cabecera
	   nunca llegó a existir en el markup de la tarjeta (perfil-card.php
	   no tiene ningún `.tarjeta__imagen`), así que el avatar quedaba con
	   la mitad de arriba recortada por el `overflow: hidden` de `.tarjeta`.
	   Bug real, no una cuestión de diseño a retocar después. */
	margin: 22px auto 12px; background: var(--fondo-suave);
}
.perfil-card { text-align: center; position: relative; }
/* El nombre (y su badge) quedaban pegados a la izquierda dentro de la
   fila flex de 100% de ancho, a pesar del text-align:center del
   ancestro (no afecta el eje principal de un flex). Escapado a
   `.perfil-card` (no al `.tarjeta__nombre` genérico) para no
   afectar la tarjeta de proyecto, que sí va alineada a la izquierda. */
.perfil-card .tarjeta__nombre { justify-content: center; }
/* Nombre siempre en una sola línea con "..." si no entra — todas las
   tarjetas del archivo tienen que medir lo mismo sin importar qué tan
   largos sean el nombre/profesión/ubicación de cada perfil. */
.tarjeta__nombre > a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.tarjeta__nombre .badge { flex-shrink: 0; }
/* Jerarquía visual pedida: nombre (arriba, ya en negrita) > profesión >
   ubicación. La categoría del rubro se sacó de la tarjeta (no aporta
   acá, ya está el filtro de categoría en el buscador). */
.tarjeta__meta--profesion,
.tarjeta__meta--ubicacion {
	text-transform: none;
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tarjeta__meta--profesion { font-size: 13px; font-weight: 600; color: var(--azul); }
.tarjeta__meta--ubicacion { font-size: 12px; color: var(--texto-suave); }
/* Visitas + reseñas van juntas, chicas y sin protagonismo — son un dato
   de contexto, no la información principal de la tarjeta. */
.perfil-card__stats {
	display: flex;
	justify-content: center;
	gap: 10px;
	font-size: 11px;
	color: var(--texto-suave);
}

/* ==========================================================================
   Tarjeta del carrusel "Perfiles destacados" de la home — geometría real
   exacta de `.profesionales-scroll .hp-vendor.hp-vendor--view-block`
   (CSS pegado literal por Mariano, comparado con getBoundingClientRect
   contra miperfil.ar). Mapeo de clases reales → nuestras propias:
     .hp-vendor.hp-vendor--view-block → .perfil-card (article.tarjeta.perfil-card)
     .hp-vendor__image (wrapper)      → el <a> que envuelve la foto
     .hp-vendor__image img            → .perfil-card__avatar
     .hp-vendor__content              → .tarjeta__cuerpo
     .hp-vendor__name                 → .tarjeta__nombre
     .hp-vendor__verified-badge       → .badge-verificado / .badge-destacado
     .hp-vendor__profession/location  → .tarjeta__meta
   Scopeado a `.grid-scroll--perfiles` (solo el carrusel de perfiles de la
   home) — el archivo /perfiles/ nunca tuvo esta tarjeta ni las "rayas
   futuristas", solo el anillo azul genérico de `.perfil-card__avatar` de
   arriba. No ampliar este scope.
   ========================================================================== */
.grid-scroll--perfiles { gap: 20px; padding: 10px 0 15px; }
.grid-scroll--perfiles .perfil-card {
	flex: 0 0 220px;
	max-width: 220px;
	/* Contenedor más alto todavía, con aire propio arriba/abajo (no solo
	   el margen de la foto) para que quede enmarcado, no pegado a los
	   bordes. */
	min-height: 340px;
	padding: 24px 0 20px;
	position: relative;
	background-color: #fff;
	border: 1px solid var(--azul);
	border-radius: 16px;
	/* CORRECCIÓN: había puesto overflow:visible pensando que las rayas
	   debían sobresalir del borde — Mariano confirmó en vivo que el real
	   las recorta con overflow:hidden + este mismo border-radius, no las
	   deja sobresalir. `.tarjeta` ya trae overflow:hidden por defecto, acá
	   solo se lo confirma explícito. */
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
	transition: transform .2s ease, box-shadow .3s ease;
}
.grid-scroll--perfiles .perfil-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.grid-scroll--perfiles .perfil-card > a {
	/* Valor real medido — la foto queda como está, lo que se agranda es
	   la tarjeta completa (ver .perfil-card / .tarjeta__cuerpo abajo).
	   Menos margen abajo: el nombre va más pegado a la foto. */
	width: 120px;
	height: 130px;
	margin: 0 auto 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.grid-scroll--perfiles .perfil-card__avatar {
	width: 100%;
	height: 100%;
	margin: 0;
}
.grid-scroll--perfiles .tarjeta__cuerpo {
	text-align: center;
	padding: 8px 10px 16px;
	/* Un poco más de aire que el mínimo real medido (90px) — la
	   información quedaba muy apretada a ese valor exacto. */
	min-height: 112px;
	/* Ocupa el espacio restante de la tarjeta más alta (min-height:300px
	   en .perfil-card) y centra el contenido ahí adentro, en vez de
	   dejar un hueco vacío abajo. */
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	position: relative;
	z-index: 1;
}
.grid-scroll--perfiles .tarjeta__nombre {
	width: 100%;
	margin-top: 0;
	margin-bottom: 1px;
	line-height: 1.15;
	font-size: 15px;
	color: var(--azul);
	/* Faltaba esto: sin justify-content:center, el nombre+badge quedaban
	   pegados a la izquierda dentro de la fila de 100% de ancho. */
	justify-content: center;
}
.grid-scroll--perfiles .tarjeta__nombre > a {
	display: block;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.grid-scroll--perfiles .badge-verificado,
.grid-scroll--perfiles .badge-destacado {
	flex-shrink: 0;
	background: none;
	padding: 0;
	font-size: 12px;
}
.grid-scroll--perfiles .badge-verificado svg { width: 12px; height: 12px; }
.grid-scroll--perfiles .tarjeta__meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
/* La tarjeta real del carrusel de home solo muestra profesión + ubicación
   (2 líneas) — no categoría ni rating, a diferencia del archivo
   /perfiles/ que sí agrega el renglón de visitas/reseñas. Confirmado por
   medición real: sin este recorte la tarjeta medía 246px de alto contra
   364px real (exceso de contenido, no una diferencia de espaciado). La
   categoría ya no existe en el markup compartido (se sacó del todo del
   template), así que acá solo queda ocultar el renglón de stats. */
.grid-scroll--perfiles .perfil-card__stats { display: none; }
.grid-scroll--perfiles .perfil-card::before,
.grid-scroll--perfiles .perfil-card::after {
	content: "";
	position: absolute;
	width: 120%;
	left: -10%;
	height: 3px;
	background: linear-gradient(90deg, var(--azul), var(--naranja), var(--naranja));
	z-index: 0;
	pointer-events: none;
}
.grid-scroll--perfiles .perfil-card::before { top: 15%; transform: rotate(10deg); opacity: .6; }
.grid-scroll--perfiles .perfil-card::after { top: 90%; transform: rotate(10deg); opacity: .5; }

.grid-scroll--perfiles::-webkit-scrollbar { height: 8px; }
.grid-scroll--perfiles::-webkit-scrollbar-track { background: rgba(41,68,107,.1); border-radius: 4px; }
.grid-scroll--perfiles::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 4px; }
.grid-scroll--perfiles::-webkit-scrollbar-thumb:hover { background: #1f3350; }
.grid-scroll--perfiles { scrollbar-width: thin; scrollbar-color: var(--azul) rgba(41,68,107,.1); }

@media (max-width: 768px) {
	.grid-scroll--perfiles .perfil-card { flex-basis: 200px; max-width: 200px; }
	.grid-scroll--perfiles .badge-verificado,
	.grid-scroll--perfiles .badge-destacado { font-size: 14px; }
}

/* ==========================================================================
   Perfil individual
   ========================================================================== */
.perfil-hero {
	background: linear-gradient(135deg, var(--azul), var(--azul-claro));
	color: #fff;
	padding: 32px 16px 48px;
}
/* Mismo hero real que la home (misma imagen), con velo oscuro — medido
   en vivo contra un perfil real: fondo
   linear-gradient(rgba(10,16,40,.38),rgba(10,16,40,.38)), url(...) y
   texto NEGRO (rgb(0,0,0), no blanco) sobre esa imagen. No es una
   elección nuestra: es lo que el sitio real hace hoy. */
.perfil-hero--con-imagen-real {
	background: linear-gradient(rgba(10,16,40,.38), rgba(10,16,40,.38)), var(--hero-imagen-real);
	background-size: cover;
	background-position: center;
	color: #000;
}
.perfil-hero--con-imagen-real .perfil-hero__linea a { color: #000; }
.perfil-hero__inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; max-width: var(--ancho-maximo); margin: 0 auto; }
/* Todo más grande — quedaba chico para ser lo primero que se ve del
   perfil (foto, nombre, profesión, ubicación). */
.perfil-hero__avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: rgba(255,255,255,.15); flex-shrink: 0; }
.perfil-hero__nombre { font-size: 32px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* En mobile todo centrado (foto arriba, texto y botones debajo,
   centrados) — antes quedaba desalineado a la izquierda al apilarse. */
@media (max-width: 640px) {
	.perfil-hero__inner { flex-direction: column; text-align: center; }
	.perfil-hero__nombre, .circulo-acciones { justify-content: center; }
}
/* Confirmado en vivo (getBoundingClientRect + getComputedStyle contra un
   perfil real): acá el ícono de verificado es grande (28px) y navy, SIN
   píldora ni la palabra "Verificado" al lado — distinto del ícono chico
   verde que sí va en tarjetas/listados. No es una regla genérica del
   sitio viejo aplicada de más: se verificó que gana en la cascada real
   (el color navy pisa incluso un color inline distinto en el propio
   HTML real), no quedó como código muerto. */
.perfil-hero__nombre .badge-verificado {
	background: none;
	padding: 0;
	font-size: 28px;
	color: var(--azul);
}
.perfil-hero__nombre .badge-verificado svg { width: 28px; height: 28px; }
.perfil-hero__profesion { font-size: 19px; opacity: .95; margin: 0 0 6px; }
.perfil-hero__linea { font-size: 16px; opacity: .9; margin: 3px 0; }
.perfil-hero__linea a { color: #fff; text-decoration: underline; }

.circulo-acciones { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
/* Los logos reales (WhatsApp/Instagram/Mail/...) ya son un círculo
   completo de por sí (fondo navy + glifo blanco, con su propio margen
   interno) — el fondo circular propio del botón quedaba como un
   segundo aro alrededor, con un espacio "vacío" entre el borde del
   logo y el borde del botón. Fondo transparente en reposo (aparece
   solo al hover, como affordance) y el logo casi llena la caja. */
.circulo-btn {
	width: 52px; height: 52px; border-radius: 50%;
	background: transparent;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	transition: background .15s;
}
.circulo-btn:hover { background: rgba(255,255,255,.25); text-decoration: none; }
.circulo-btn img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }

.tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-x: auto;
	position: sticky;
	top: 57px;
	background: #fff;
	z-index: 10;
	padding: 10px 0;
	border-bottom: 1px solid var(--borde);
}
.tabs-nav a {
	padding: 10px 18px;
	white-space: nowrap;
	font-weight: 600;
	font-size: 14px;
	color: var(--texto-suave);
	border-radius: 999px;
	transition: background .15s, color .15s;
}
.tabs-nav a:hover { background: var(--fondo-suave); text-decoration: none; }
.tabs-nav a.activo { color: var(--azul); background: #e7edfb; }

/* `<details>/<summary>` reales — cada sección abre/cierra
   independiente con un solo click nativo, sin JS, y varias pueden
   quedar abiertas a la vez (a diferencia de un acordeon "exclusivo" que
   cierra las demás) — calcado del `<details class="hp-acc">` real.
   Empiezan abiertas (`open`) para no perder la visibilidad que ya
   tenían antes de ser plegables. Estética de tarjetas blancas +
   sombra suave + chevron, calcada de la referencia real (no la versión
   plana de línea divisoria + "+/−" que tenía antes). */
.acordeon {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 14px;
	padding: 0 20px;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.acordeon > summary {
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
	content: "";
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-right: 2px solid var(--texto-suave);
	border-bottom: 2px solid var(--texto-suave);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.acordeon[open] > summary::after { transform: rotate(-135deg); }
.acordeon__titulo { font-size: 18px; margin: 0; display: inline-block; }
/* Secciones fijas de `.acordeon` sin `<details>/<summary>` (ej.
   "Mi Perfil"/"Nosotros"): el título va directo, así que necesita el
   mismo padding vertical que le da `summary` a las plegables. */
.acordeon > h2.acordeon__titulo { display: block; padding: 18px 0; }

/* Bloques de contenido "hands-on" del wizard (sobre mí / servicios /
   experiencia) — Fase 4, ver Perfil\Contenido\Bloques. */
.mp-bloque-titulo { font-size: 16px; margin: 14px 0 4px; }
.mp-bloque-secundario { color: var(--texto-suave); margin: 2px 0 10px; }
.acordeon__contenido { margin-top: 0; padding-bottom: 20px; color: var(--texto); }

.experiencia-item, .educacion-item { margin-bottom: 14px; }
.experiencia-item__rol { font-weight: 700; }
.experiencia-item__meta { font-size: 13px; color: var(--texto-suave); }

.resena {
	border-left: 3px solid var(--azul);
	background: var(--fondo-suave);
	padding: 14px 18px;
	border-radius: 0 8px 8px 0;
	margin-bottom: 14px;
}
.resena__texto { margin: 0 0 8px; font-style: italic; }
.resena__autor { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.resena__estrellas { color: var(--dorado); margin-left: 6px; }
/* Solo la ve el dueño del perfil — discreto a propósito, no es un
   botón que se quiera invitar a usar seguido. */
.resena__denunciar { margin: 8px 0 0; }
.resena__denunciar-btn {
	background: none; border: none; padding: 0;
	font-size: 12px; color: var(--texto-suave);
	cursor: pointer; text-decoration: underline;
}
.resena__denunciar-btn:hover { color: var(--naranja); }
.resena__denunciada { margin: 8px 0 0; font-size: 12px; color: var(--naranja); font-weight: 600; }

.resena-form { background: var(--fondo-suave); border-radius: var(--radio); padding: 18px; margin-top: 20px; }
.resena-form label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; }
.resena-form input[type="text"], .resena-form textarea {
	width: 100%; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 15px;
}
.resena-form__estrellas { display: flex; gap: 6px; font-size: 22px; }
.resena-form__estrellas label { margin: 0; cursor: pointer; }

/* Layout de perfil individual: en mobile, un solo bloque apilado — el
   sidebar (foto/nombre/contacto chico) se oculta directo, ya se ve todo
   eso mismo arriba en el hero y repetirlo abajo de todo el contenido no
   aporta nada. En desktop pasa a 2 columnas con el sidebar "flotando"
   fijo (position:sticky) al lado del contenido, calcado del real
   `hp-aside`. */
.perfil-layout { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.perfil-layout__principal { min-width: 0; }
.perfil-sidebar { display: none; }

@media (min-width: 860px) {
	.perfil-layout { flex-direction: row; align-items: flex-start; }
	.perfil-layout__principal { flex: 1 1 auto; }
	.perfil-sidebar {
		display: block;
		flex: 0 0 260px;
		position: sticky;
		top: 96px;
		background: #fff;
		border: 1px solid var(--borde);
		border-radius: var(--radio);
		padding: 20px;
		text-align: center;
	}
}
/* 68x68 medido en el snippet real `vendor_pro` (`.hp-card` inline
   style), no un valor a ojo. */
.perfil-sidebar__avatar {
	width: 68px; height: 68px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	margin: 0 auto 10px;
}
.perfil-sidebar__nombre { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; margin: 0 0 4px; }
.perfil-sidebar__nombre .badge-verificado { background: none; padding: 0; font-size: 14px; color: var(--verificado); }
.perfil-sidebar__nombre .badge-verificado svg { width: 14px; height: 14px; }
/* Mismos botones de contacto que el hero, pero chicos y sobre fondo
   blanco — el fondo semitransparente del hero (pensado para la foto de
   atrás) sería invisible acá. */
.perfil-sidebar .circulo-acciones { justify-content: center; margin-top: 12px; }
.perfil-sidebar .circulo-btn { width: 40px; height: 40px; background: var(--fondo-suave); font-size: 16px; }
.perfil-sidebar .circulo-btn:hover { background: var(--borde); }
.perfil-sidebar .circulo-btn img { width: 34px; height: 34px; }

.perfil-qr { text-align: center; margin-top: 30px; }
.perfil-qr__imagen { margin: 0 auto; }

.completado-barra { background: var(--borde); border-radius: 999px; height: 10px; overflow: hidden; margin: 8px 0; }
.completado-barra__relleno { height: 100%; background: var(--verde); }

/* Proyecto individual — segunda pasada: sin la franja navy de antes
   (era la de perfil-hero reusada sin necesidad), encabezado simple. */
.proyecto-header { padding: 28px 16px 0; }
.proyecto-header__titulo { font-size: 24px; margin: 0 0 6px; color: var(--texto); }
.proyecto-header__meta { font-size: 14px; color: var(--texto-suave); margin: 0; }
.proyecto-header__meta a { color: var(--azul); }

/* Visor: imagen principal bastante más chica que antes (antes ocupaba
   todo el ancho del contenedor en 'large'), miniaturas debajo que
   cambian la principal en el lugar (ver assets/main.js) en vez de abrir
   la imagen suelta en otra pestaña. */
.proyecto-visor { margin-bottom: 24px; }
.proyecto-visor__principal {
	display: block;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 4/3;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--fondo-suave);
	margin: 0 0 12px;
	/* Es un <button> (para poder abrir el lightbox) — resetea los
	   estilos default de botón nativo. */
	padding: 0;
	border: none;
	cursor: zoom-in;
}
.proyecto-visor__principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proyecto-visor__miniaturas { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.proyecto-visor__miniatura {
	width: 64px; height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: var(--fondo-suave);
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
}
.proyecto-visor__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proyecto-visor__miniatura:hover { opacity: 1; }
.proyecto-visor__miniatura.esta-activa { opacity: 1; border-color: var(--azul); }

/* Lightbox de la galería — clickear la imagen principal abre esto:
   pantalla completa, flechas para recorrer TODAS las fotos del
   proyecto. Calca el resultado funcional del Slick+modal real (ver
   comentario de single-mp_proyecto.php) sin traer esa librería. */
.proyecto-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(15, 23, 39, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* El atributo `hidden` nativo pierde contra `display:flex` de arriba
   (misma especificidad, gana la regla de autor sobre la del navegador)
   — sin esto el lightbox quedaba invisible pero seguía intercept*ando
   los clicks. */
.proyecto-lightbox[hidden] { display: none; }
.proyecto-lightbox__imagen {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	display: block;
}
.proyecto-lightbox__cerrar {
	position: absolute;
	top: 16px; right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.proyecto-lightbox__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,.12);
	border: none;
	color: #fff;
	width: 48px; height: 48px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	transition: background .2s ease;
}
.proyecto-lightbox__flecha:hover { background: rgba(255,255,255,.25); }
.proyecto-lightbox__flecha--prev { left: 16px; }
.proyecto-lightbox__flecha--next { right: 16px; }
.proyecto-lightbox__contador {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 13px;
	opacity: .8;
	margin: 0;
}
@media (max-width: 600px) {
	.proyecto-lightbox__flecha { width: 40px; height: 40px; font-size: 15px; }
}

.proyecto-descripcion { line-height: 1.7; margin-bottom: 24px; }

.proyecto-dueno__titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 10px; }
.proyecto-dueno .perfil-card { max-width: 280px; margin: 0 0 20px; }

.proyecto-atributos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 280px;
	background: var(--fondo-suave);
	border-radius: var(--radio);
	padding: 16px;
}
.proyecto-atributos__item { font-size: 14px; color: var(--texto); }

/* Layout de 2 columnas en desktop: galería/descripción a la izquierda,
   tarjeta del dueño + atributos del proyecto "flotando" a la derecha
   mientras se scrollea — en mobile no hay espacio de sobra, se apila
   normal (dueño y atributos abajo de la descripción). */
.proyecto-layout { display: flex; flex-direction: column; gap: 28px; }
.proyecto-layout__principal { min-width: 0; }

@media (min-width: 860px) {
	.proyecto-layout { flex-direction: row; align-items: flex-start; }
	.proyecto-layout__principal { flex: 1 1 auto; }
	.proyecto-layout__lateral {
		flex: 0 0 280px;
		position: sticky;
		top: 96px; /* debajo del header sticky (~80px) + aire */
	}
}

/* ==========================================================================
   Encabezado secundario (Espacios Profesionales) — banda con la misma
   foto real del hero, sin velo oscuro (texto navy, no negro/blanco como
   el hero de perfil individual). Reusable para otras páginas internas
   si hiciera falta más adelante.
   ========================================================================== */
.encabezado-secundario {
	height: 156px;
	background-size: cover;
	background-position: center;
	background-color: var(--fondo-suave);
	display: flex;
	align-items: center;
	/* Antes centrado — mismo pedido que el resto de los H1/H2 del sitio,
	   todos a la izquierda. */
	justify-content: flex-start;
	text-align: left;
	padding: 0 20px;
}
.encabezado-secundario h1 { font-size: 48px; font-weight: 500; color: var(--azul); margin: 0; }
@media (max-width: 720px) {
	.encabezado-secundario h1 { font-size: 32px; }
}

/* ==========================================================================
   Espacios profesionales — markup y valores reales exactos de
   `.card-espacio` en miperfil.ar (getComputedStyle, no aproximado).
   ========================================================================== */
.grid-espacios {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 24px;
}
.card-espacio {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 22px;
	border: 1px solid rgba(232,220,192,.7);
	border-radius: 22px;
	background: #fff;
	color: var(--texto);
	overflow: hidden;
}
.card-espacio::before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: var(--azul);
}
.espacio-avatar {
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	border: 2px solid rgb(232,220,192);
	box-shadow: 0 4px 10px rgba(0,0,0,.04);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.espacio-avatar img { width: 78px; height: 78px; object-fit: contain; }
.espacio-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.espacio-title { font-size: 18px; font-weight: 700; color: var(--azul); margin: 0; letter-spacing: -.02em; }
.espacio-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.espacio-direccion { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #4b5563; }
.espacio-direccion svg { width: 16px; height: 16px; stroke: var(--azul); flex-shrink: 0; }
.badge-staff {
	display: flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	background: rgba(41,68,107,.08);
	padding: 7px 12px;
	font-size: 12.8px;
	font-weight: 700;
	color: var(--azul);
}
.badge-staff svg { width: 16px; height: 16px; stroke: var(--azul); }
.espacio-footer { margin-top: auto; }
.btn-ver-perfil {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	border: 1px solid var(--azul);
	padding: 10px 18px;
	font-size: 13.4px;
	font-weight: 700;
	color: var(--azul);
}

/* ==========================================================================
   Detalle de un Espacio Profesional (single-mp_espacio.php) — contenido
   y color de acento reales de cada espacio (`--espacio-acento`, inline
   por instancia), calcado de la landing page real de
   miperfil.ar/e/consultorios-cabral/ y /e/estudio-alem-abogados/.
   ========================================================================== */
.espacio-hero {
	position: relative;
	padding: 64px 16px 56px;
	background: linear-gradient(155deg, var(--espacio-acento), #0c1420);
	color: #fff;
	overflow: hidden;
}
.espacio-hero--con-imagen {
	background-image: linear-gradient(160deg, rgba(0,0,0,.45), rgba(0,0,0,.6)), var(--espacio-hero-img);
	background-size: cover;
	background-position: center;
}
.espacio-hero__inner { position: relative; z-index: 1; }
.espacio-hero__logo {
	max-height: 72px;
	width: auto;
	margin: 0 0 18px;
	border-radius: 8px;
	background: #fff;
	padding: 6px;
}
.espacio-hero__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
	margin: 0 0 10px;
}
/* H1 a la izquierda, mismo criterio que el resto de los H1/H2 del sitio. */
.espacio-hero__titulo { font-size: 30px; font-weight: 600; margin: 0 0 8px; text-align: left; }
.espacio-hero__lema { font-size: 15px; font-style: italic; opacity: .9; margin: 0 0 20px; max-width: 46ch; }
.espacio-hero__cta {
	display: inline-block;
	margin-top: 8px;
	background: #fff;
	color: var(--espacio-acento);
	padding: 12px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
}
.espacio-hero__cta:hover { text-decoration: none; opacity: .9; }
@media (min-width: 860px) {
	.espacio-hero { padding: 96px 16px 84px; }
	.espacio-hero__titulo { font-size: 42px; }
}

.espacio-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--espacio-acento);
	margin: 0 0 8px;
}
.espacio-divisor { width: 48px; height: 3px; background: var(--espacio-acento); border-radius: 2px; margin: 10px 0 18px; }

.espacio-sobre { display: flex; flex-direction: column; gap: 28px; }
.espacio-sobre__imagen {
	border-radius: 4px 48px 4px 48px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.espacio-sobre__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.espacio-sobre__titulo { font-size: 24px; font-weight: 600; margin: 0; text-align: left; }
.espacio-sobre__titulo em { font-style: italic; color: var(--espacio-acento); }
.espacio-sobre__descripcion { color: var(--texto); font-size: 15px; }
.espacio-sobre__descripcion p:last-child { margin-bottom: 0; }

.espacio-contacto {
	margin-top: 22px;
	background: var(--fondo-suave);
	border-radius: 12px;
	padding: 16px 20px;
}
.espacio-contacto p { margin: 0 0 8px; font-size: 14px; }
.espacio-contacto p:last-child { margin-bottom: 0; }
.espacio-contacto a { font-weight: 600; }

@media (min-width: 860px) {
	.espacio-sobre { flex-direction: row; align-items: center; gap: 56px; }
	.espacio-sobre__imagen { flex: 0 0 38%; aspect-ratio: 3/4; }
	.espacio-sobre__texto { flex: 1 1 auto; }
}

/* Grid propio (no la técnica de "gap:1px + fondo del borde") — con una
   cantidad impar de servicios (7, por ejemplo) esa técnica dejaba un
   hueco gris fantasma en la última fila. Cada ítem tiene su propio
   borde/radio, sin depender de que la grilla se complete pareja. */
.espacio-servicios__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.espacio-servicios__item {
	display: flex;
	align-items: baseline;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 10px;
	padding: 16px 18px;
	font-size: 14.5px;
}
.espacio-servicios__num {
	font-weight: 700;
	color: var(--espacio-acento);
	font-size: 13px;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.espacio-servicios__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Mismo fondo que el header y el body (antes era --fondo-suave, un gris
   con tinte azul distinto al gris cálido del resto del sitio). */
.site-footer { background: var(--fondo-pagina); border-top: 1px solid var(--borde); padding: 36px 0 24px; margin-top: 40px; }
.site-footer__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.site-footer h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 10px; }
.site-footer__logo { margin-bottom: 10px; }
.site-footer__logo img { display: block; height: 44px; width: auto; }
/* Logo principal a la izquierda, el de "MiPerfil Empleos" (otro
   ecosistema, no el mismo isotipo) a la derecha, misma línea — mismo
   tamaño de siempre (44px), ninguno de los 2 cambia. */
.site-footer__logo--doble { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; font-size: 14px; }
.footer-categorias { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.site-footer__legal { text-align: center; font-size: 12px; color: var(--texto-suave); margin-top: 24px; }

@media (min-width: 860px) {
	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.solo-lectura-nota { font-size: 13px; color: var(--texto-suave); }
.oculto { display: none !important; }