/*
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: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--azul);
}
.footer-whatsapp img { border-radius: 50%; width: 26px; height: 26px; }
.footer-contacto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.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; }

@media (min-width: 861px) {
	/* Logo más grande y bien pegado a la izquierda en desktop, a pedido
	   de Mariano. */
	.site-header__inner { padding-left: 0; }
	.site-header__logo img { height: 76px; }
}

.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); }
/* Página actual — mismo naranja + subrayado que el hover, pero fijo, no
   solo al pasar el mouse. Mariano: "el menú no indica en qué página
   estoy". */
.nav-desktop a.nav-desktop__activo { color: var(--naranja); }
.nav-desktop a.nav-desktop__activo::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-desktop);
	background-size: cover;
	background-position: center;
	color: var(--azul);
}
.hero--con-imagen-real::before, .hero--con-imagen-real::after { display: none; }

/* Hero con imagen real (versión "encabezado", pedido urgente de
   Mariano) — misma imagen en mobile y desktop, marco decorativo
   simétrico sin ningún personaje que pueda quedar tapado, así que
   `cover`/`center` de siempre alcanza, sin restricciones de ancho de
   texto especiales (esas eran solo por Lupo, que ya no se usa acá). */
.hero--con-lupo {
	background-image: var(--hero-imagen-desktop);
	background-size: cover;
	background-position: center;
	color: var(--azul);
}
.hero--con-lupo::before, .hero--con-lupo::after { display: none; }
/* Misma lógica del ajuste de desktop, bajada a mobile: título grande y
   sin el bold por default del h1 (letra más finita), bajada con más
   presencia (más grande, semibold, sin la opacidad que la apagaba). */
.hero__titulo { font-size: 34px; font-weight: 500; letter-spacing: -.3px; margin: 0 0 10px; position: relative; }
.hero__subtitulo { font-size: 18px; font-weight: 500; color: var(--azul); opacity: 1; margin: 0 0 28px; position: relative; }
.hero--con-imagen-real .hero__subtitulo { opacity: 1; color: var(--azul); }

.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;
	/* El ancho mínimo "de contenido" que el navegador le da a un input/select
	   dentro de un flex item puede quedar atado al texto más largo que
	   contiene (el placeholder, o la opción más larga del <select>) — sin
	   `min-width:0` ese mínimo puede ganarle al `flex-basis:100%` de mobile
	   de más abajo y el campo se sale igual del contenedor. El stack
	   vertical en mobile ya lo garantiza el `flex-basis:100%` explícito, no
	   este `min-width` — por eso conviven sin volver a romper ese layout. */
	min-width: 0;
	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; }

	/* `.hero` tenía su propio padding horizontal ADEMÁS del de
	   `.contenedor` de adentro — en mobile eso duplicaba el margen real
	   (32px en vez de 16px a cada lado), dejando el buscador (y el
	   título/bajada) more angostos de lo necesario. Sacando el padding
	   propio de `.hero`, el gutter de `.contenedor` queda como el único,
	   igual que en el resto del sitio — libera ancho real de verdad, no
	   solo un ajuste de gusto. */
	.hero { padding-left: 0; padding-right: 0; }

	/* Letra más grande en los campos del buscador, a pedido de Mariano
	   viéndolo en mobile. */
	.hero__buscador { padding: 12px; }
	/* Uno abajo del otro, ancho completo — antes esto "pasaba solo" porque
	   el ancho mínimo de contenido del input/select no dejaba que entraran
	   los 2 en la misma fila, pero ese mínimo depende del largo del
	   placeholder (bug real: un placeholder largo en /perfiles/ terminaba
	   empujando el campo fuera del contenedor en vez de solo forzar el
	   wrap). Ahora es explícito, no un efecto colateral. */
	.hero__buscador input[type="text"],
	.hero__buscador select { flex: 1 1 100%; font-size: 17px; height: 50px; }
	.hero__buscador button { font-size: 17px; }
}

@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;
	}
	/* Quinta pasada, a pedido de Mariano viendo el resultado en desktop:
	   título bien grande pero SIN el bold por default del h1 (letra más
	   finita), y la bajada con más presencia (más grande, semibold, sin
	   la opacidad reducida que la apagaba) — antes las 2 líneas competían
	   poco entre sí, quedaban "planas". */
	.hero__titulo { font-size: 56px; font-weight: 500; letter-spacing: -.5px; }
	.hero__subtitulo { font-size: 22px; font-weight: 500; opacity: 1; }
	.hero--con-imagen-real .hero__subtitulo { opacity: 1; }
	.hero__buscador {
		/* Ocupa casi todo el ancho del hero en desktop — pedido explícito
		   de que "ocupe más ancho de la pantalla", el 1000px de antes
		   todavía dejaba aire de sobra a los costados. */
		max-width: 100%;
		margin: 0;
	}
	/* Letra más grande acá también (mismo pedido que ya se hizo en
	   mobile) — con todo el ancho de sobra en desktop, los campos
	   quedaban con la misma letra chica de siempre en vez de acompañar
	   el resto del hero, que ya creció. */
	.hero__buscador input[type="text"],
	.hero__buscador select { font-size: 18px; height: 56px; }
	.hero__buscador button { font-size: 18px; height: 56px; padding: 0 30px; }
}

/* 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; }
.perfiles-resultados__volver { margin-top: 24px; text-align: center; }

/* Filtro "Perfiles verificados": discreto, mismo tamaño y color que
   "Filtros extra". El tooltip abre con hover/foco (desktop y teclado) y con
   toque (mobile, ver el script de archive-mp_perfil.php). */
.filtro-verificados {
	position: relative;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--azul);
}
.filtro-verificados__label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.filtro-verificados__label input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); cursor: pointer; }
.hero__buscador .filtro-verificados__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	padding: 0;
	border: 1.5px solid var(--azul);
	border-radius: 50%;
	background: transparent;
	color: var(--azul);
	/* La "i" en cursiva (font-style: italic) quedaba inclinada y sin centrar
	   de verdad dentro del círculo — acá derecha y centrada con flexbox. */
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	cursor: pointer;
}
.hero__buscador .filtro-verificados__info:hover,
.hero__buscador .filtro-verificados__info:focus-visible { background: var(--azul); color: #fff; }
.filtro-verificados__tip {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	width: 260px;
	max-width: 100%;
	padding: 10px 12px;
	background: var(--azul);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s;
	pointer-events: none;
}
.filtro-verificados__info:hover ~ .filtro-verificados__tip,
.filtro-verificados__info:focus-visible ~ .filtro-verificados__tip,
.filtro-verificados--abierto .filtro-verificados__tip { visibility: visible; opacity: 1; }

.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: 300px; 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í. */
/* Renglón único al pie de la tarjeta (ubicación + reseña + visitas),
   pedido de Mariano vía boceto: una línea azul separándolo del resto de
   la tarjeta, empujado al fondo (`margin-top:auto`) para que todas las
   tarjetas de la grilla queden con este renglón a la misma altura sin
   importar cuánto texto tenga cada una arriba. */
.perfiles-resultados .perfil-card__footer {
	margin-top: auto;
	padding-top: 10px;
	border-top: 2px solid var(--azul);
	flex-direction: column;
	gap: 6px;
}
/* Reseña/visitas arriba, ubicación abajo, las dos filas centradas (ver
   boceto de Mariano) — `align-items` no se toca acá porque el default
   `stretch` de un flex column es justo lo que hace falta: cada fila
   ocupa el ancho completo de la tarjeta, así el texto/ícono se puede
   centrar de verdad adentro (y la ubicación se puede recortar con "…"
   sin el truco de flex:1 que hacía falta cuando estaba en una fila). */
.perfiles-resultados .perfil-card__stats { justify-content: center; }
.perfiles-resultados .perfil-card__footer .tarjeta__meta--ubicacion { display: block; text-align: center; }

@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: 18px; line-height: 1.2; margin-bottom: 2px; }
	.perfiles-resultados .tarjeta__meta--profesion,
	.perfiles-resultados .tarjeta__meta--ubicacion { font-size: 11px; line-height: 1.1; }
	.perfiles-resultados .perfil-card__stats { font-size: 11px; gap: 8px; }
	.perfiles-resultados .perfil-card__stats-item svg { width: 12px; height: 12px; }
}

/* 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; }

/* CTA "Creá tu perfil en minutos" (home, entre las estadísticas y el footer):
   una sola fila compacta, del alto de la barra de números; todo el bloque es un
   solo link. Naranja de marca un poco más profundo para que el texto blanco
   cumpla contraste. */
.cta-perfil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	padding: 24px 16px;
	background: linear-gradient(135deg, #f0592b, #d9481c);
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.cta-perfil:hover { text-decoration: none; filter: brightness(1.06); }
.cta-perfil:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.cta-perfil__titulo { font-size: clamp(18px, 3vw, 24px); font-weight: 700; line-height: 1.2; }
.cta-perfil__boton {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: #fff;
	color: #b93a12;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
	transition: transform .15s ease;
}
.cta-perfil:hover .cta-perfil__boton { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	.cta-perfil__boton { transition: none; }
	.cta-perfil:hover .cta-perfil__boton { transform: none; }
}

/* Link chico al tutorial, debajo del alta de cuenta (/editar-perfil/) */
.wizard-tutorial { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--texto-suave); }
.wizard-tutorial a { font-weight: 600; text-decoration: underline; }

/* 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: 400; color: var(--azul); }
.tarjeta__meta--ubicacion { font-size: 12px; color: var(--texto-suave); }
/* Renglón único de ubicación + reseña + visitas (ver boceto de Mariano) —
   base genérica acá, `justify-content` y el reparto de ancho quedan a
   cargo de cada contexto (archivo /perfiles/ vs. carrusel de home, ver
   más abajo) porque el carrusel esconde reseña/visitas y necesita la
   ubicación centrada sola, no pegada a la izquierda. */
.perfil-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Visitas + reseñas van juntas, chicas y sin protagonismo — son un dato
   de contexto, no la información principal de la tarjeta. Íconos de
   línea (mp_icono_estrella()/mp_icono_ojo()), no emoji — pedido de
   Mariano de que se vean prolijos y parejos entre sí. */
.perfil-card__stats {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
	font-size: 12px;
	color: var(--texto-suave);
}
.perfil-card__stats-item { display: inline-flex; align-items: center; gap: 3px; }
.perfil-card__stats-item svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Estrella de reseña, rellena y en amarillo real — pedido de Mariano,
   la de visitas (ojo) sigue en gris neutro, es solo un dato de contexto. */
.perfil-card__stats-item--resena svg { fill: var(--dorado); stroke: var(--dorado); }

/* ==========================================================================
   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__footer { justify-content: center; }
.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-palabras-clave { text-align: center; margin-top: 30px; }
.perfil-palabras-clave__titulo { font-weight: 600; margin-bottom: 10px; }
.perfil-palabras-clave__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.perfil-palabras-clave__tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--fondo-suave);
	border: 1px solid var(--borde);
	color: var(--azul);
	font-size: 14px;
	font-weight: 600;
	transition: background .15s, border-color .15s;
}
.perfil-palabras-clave__tag:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

.perfil-mas-categoria { text-align: center; padding-top: 24px; padding-bottom: 40px; }
.perfil-mas-categoria a { font-weight: 600; }
.perfil-mas-categoria a:hover { color: var(--naranja); }

/* Pop-up de verificación (una sola vez, solo el dueño en su perfil) — mismo
   lenguaje que el modal de CV: fondo oscuro, caja blanca de 12px con sombra. */
.mp-popup-verif {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
}
.mp-popup-verif[hidden] { display: none; }
.mp-popup-verif__caja {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	padding: 32px 24px 26px;
	text-align: center;
}
.mp-popup-verif__cerrar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 30px;
	line-height: 1;
	color: var(--texto-suave);
	cursor: pointer;
}
.mp-popup-verif__cerrar:hover { color: var(--azul); }
.mp-popup-verif__titulo { margin: 0 0 8px; font-size: 21px; line-height: 1.3; color: var(--azul); }
.mp-popup-verif__sub { margin: 0 0 16px; color: var(--texto-suave); }
.mp-popup-verif__lista { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.mp-popup-verif__lista li { margin-bottom: 8px; font-size: 15px; }
.mp-popup-verif__lista li span { color: var(--verificado); font-weight: 700; }

.perfil-qr { text-align: center; margin-top: 30px; }
.perfil-qr__imagen { margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }

.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;
	/* Vuelve a centrado a pedido explícito de Mariano (revierte la
	   Decimoctava pasada, que lo había llevado a la izquierda junto con
	   el resto de los H1/H2 del sitio) — este tipo de banda de encabezado
	   en páginas internas queda centrada. */
	justify-content: center;
	text-align: center;
	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; }

/* ==========================================================================
   Landing pública de un certificador (template-certificador.php) — mismo
   lenguaje visual que la de Espacios (hero con color de acento propio,
   bloque de contacto, grid de perfiles), clases propias porque es una
   entidad distinta (institución que certifica formación, no un lugar de
   trabajo).
   ========================================================================== */
.certificador-hero {
	padding: 56px 16px 48px;
	background: linear-gradient(155deg, var(--certificador-acento), #0c1420);
	color: #fff;
	text-align: center;
}
.certificador-hero__inner { display: flex; flex-direction: column; align-items: center; }
.certificador-hero__sello {
	max-height: 84px;
	width: auto;
	margin: 0 0 18px;
	border-radius: 8px;
	background: #fff;
	padding: 8px;
}
.certificador-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--certificador-acento);
	margin: 0 0 8px;
}
.certificador-hero .certificador-eyebrow { color: #fff; opacity: .85; }
.certificador-hero__titulo { font-size: 28px; font-weight: 600; margin: 0 0 10px; }
.certificador-hero__descripcion { font-size: 15px; opacity: .92; max-width: 56ch; margin: 0 0 22px; }
.certificador-hero__cta {
	display: inline-block;
	background: #fff;
	color: var(--certificador-acento);
	padding: 12px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
}
.certificador-hero__cta:hover { text-decoration: none; opacity: .9; }
@media (min-width: 860px) {
	.certificador-hero { padding: 80px 16px 68px; }
	.certificador-hero__titulo { font-size: 36px; }
}

.certificador-sobre { padding-bottom: 0; }
.certificador-contacto {
	background: var(--fondo-suave);
	border-radius: 12px;
	padding: 16px 20px;
	max-width: 420px;
}
.certificador-contacto p { margin: 0 0 8px; font-size: 14px; }
.certificador-contacto p:last-child { margin-bottom: 0; }
.certificador-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; }
/* Logo principal a la izquierda, el de "MiPerfil Empleos" (otro
   ecosistema, no el mismo isotipo) a la derecha del todo — antes
   quedaban los 2 apretados dentro de la primera columna angosta de la
   grilla de abajo, el de Empleos se veía chico/perdido al lado del
   principal. Ahora es su propia franja de ancho completo, mismo alto
   (44px) para los 2 — "igual de grande" con proporciones distintas
   significa igualar el alto, no el ancho. */
.site-footer__topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.site-footer__topbar img { display: block; height: 44px; width: auto; }
/* El de Empleos, a igual alto (44px), se leía bastante más chico que el
   principal — tiene más aire/relleno propio alrededor de la marca real
   dentro del archivo. Un alto mayor acá compensa eso y lo deja
   percibido del mismo tamaño, no matemáticamente igual en píxeles. */
.site-footer__topbar img:not(.custom-logo) { height: 68px; }
.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 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) {
	/* `auto-fit` en vez de un `repeat(4, ...)` fijo: la columna "Del
	   blog" es condicional (solo aparece si hay posts curados) — con 4
	   fijas y solo 3 columnas reales (como en staging ahora mismo, sin
	   posts todavía) quedaba un cuarto espacio muerto grande a la
	   derecha, el resto apretado a la izquierda. Así, las columnas que
	   sí existen se reparten todo el ancho parejo, sean 3 o 4. */
	.site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

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

/* ==========================================================================
   Nosotros y contacto — calcado del sitio real (miperfil.ar/nosotros/ y
   /contacto/, solo las tarjetas de planes de esta última), a pedido
   explícito de Mariano. Texto y medidas reales, no aproximadas.
   ========================================================================== */
.nosotros-marca {
	text-align: center;
	font-size: 34px;
	font-weight: 800;
	margin: 8px 0 28px;
}
.nosotros-marca__azul { color: var(--azul); }
.nosotros-marca__naranja { color: var(--naranja); }

.nosotros-card {
	background: #fff;
	border: 2px solid var(--azul);
	border-radius: 20px;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 6px 15px rgba(0, 0, 0, .08);
}
.nosotros-card--alt { background: #f9f9ff; }
.nosotros-card h2 { color: var(--azul); font-size: 24px; margin: 0 0 12px; }
.nosotros-card p { font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
.nosotros-card p:last-child { margin-bottom: 0; }
.nosotros-card__destacado { text-align: center; font-weight: 600; color: var(--azul); }
.nosotros-card__lista { list-style: none; padding: 0; margin: 0; font-size: 16px; line-height: 1.8; }
.nosotros-card__cierre { text-align: center; }
.nosotros-card__cierre h2 { text-align: center; }

/* Revelado al scrollear — desactivado por completo si el visitante pidió
   menos movimiento (prefers-reduced-motion), nunca se le impone. */
@media (prefers-reduced-motion: no-preference) {
	.fade-section {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity .7s ease, transform .7s ease;
	}
	.fade-section.visible { opacity: 1; transform: translateY(0); }
}

.nosotros-qr {
	text-align: center;
	margin: 8px 0 32px;
}
.nosotros-qr p { font-weight: 600; color: var(--azul); margin: 0 0 10px; }
.nosotros-qr img { border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }

.planes-subtitulo { color: var(--texto-suave); margin: -6px 0 20px; }

.planes-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: 24px;
}
@media (max-width: 560px) {
	.planes-grid { grid-template-columns: 1fr; }
}

.plan-card {
	background: #f9f9f9;
	border: 2px solid var(--azul);
	border-radius: 20px;
	padding: 28px;
}
.plan-card h3 { margin: 0 0 6px; font-size: 22px; color: var(--azul); }
.plan-card__bajada { color: var(--texto-suave); margin: 0; }
.plan-card__precio { font-size: 26px; font-weight: 700; margin: 10px 0 0; color: var(--azul); }
.plan-card__precio span { font-size: 14px; font-weight: 400; color: var(--texto-suave); }
.plan-card hr { border: none; border-top: 1px solid rgba(41, 68, 107, .2); margin: 16px 0; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: 15px; line-height: 1.8; }
.plan-card ul li::before { content: "• "; }
.plan-card__btn { border-radius: 30px; display: inline-block; }

.plan-card--destacado {
	background: var(--azul);
	border-color: var(--azul);
	color: #fff;
}
.plan-card--destacado h3,
.plan-card--destacado .plan-card__precio,
.plan-card--destacado .plan-card__precio span { color: #fff; }
.plan-card--destacado .plan-card__bajada { color: rgba(255, 255, 255, .8); }
.plan-card--destacado hr { border-top-color: rgba(255, 255, 255, .25); }
.plan-card--destacado .plan-card__btn { background: #fff; color: var(--azul); }

.planes-disclaimer {
	margin-top: 12px;
	font-size: 13px;
	color: var(--texto-suave);
	background: var(--fondo-suave);
	border-left: 3px solid var(--borde);
	padding: 8px 12px;
	border-radius: 6px;
}

/* Contacto — a propósito con poco protagonismo: los íconos son el canal
   principal, el formulario queda plegado detrás de un <details>. */
.contacto-iconos {
	display: flex;
	gap: 18px;
	margin: 14px 0 4px;
}
.contacto-iconos a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--borde);
	transition: border-color .15s ease;
}
.contacto-iconos a:hover { border-color: var(--azul); }
.contacto-iconos img { width: 39px; height: 39px; }

.contacto-form-toggle {
	margin-top: 18px;
	max-width: 420px;
}
.contacto-form-toggle summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--azul);
}
.contacto-form { margin-top: 14px; }
.contacto-form label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; }
.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	font-size: 14px;
	font-family: inherit;
}

/* Descarga de CV en PDF — modal de edición + vista previa (calcado del
   snippet viejo `vendor_cv_pdf`, ver template-parts/cv-descarga.php).
   El estilo visual del documento en sí (`.cv-wrap`) se genera inline por
   assets/cv-pdf.js, no acá: ese HTML se saca de la página para
   html2canvas/html2pdf, y necesita ser autocontenido. */
.cvpdf-boton-wrap { text-align: center; margin: 25px 0; }

.cvpdf-modal, .cvpdf-preview {
	position: fixed; inset: 0; z-index: 999999; overflow-y: auto; padding: 20px;
}
.cvpdf-modal[hidden], .cvpdf-preview[hidden] { display: none; }
.cvpdf-modal { display: block; background: rgba(0, 0, 0, .7); }
.cvpdf-modal__dialog { background: #fff; max-width: 960px; margin: 30px auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.cvpdf-modal__header { background: var(--azul); padding: 22px 36px; }
.cvpdf-modal__header h2 { color: #fff; font-size: 22px; margin: 0; }
.cvpdf-modal__header p { color: #cdd8e6; font-size: 13px; margin: 4px 0 0; }
.cvpdf-modal__form { padding: 30px 36px 10px; }
.cvpdf-modal__acciones { display: flex; gap: 12px; justify-content: flex-end; padding: 20px 0 26px; }

.cvpdf-block { border-bottom: 1px solid var(--borde); padding-bottom: 20px; margin-bottom: 20px; }
.cvpdf-block:last-of-type { border-bottom: none; }
.cvpdf-block-title { font-size: 15px; font-weight: 700; color: var(--azul); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .4px; }
.cvpdf-row-1 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.cvpdf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cvpdf-field label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; font-size: 13px; }
.cvpdf-field input[type="text"], .cvpdf-field input[type="email"] { width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 6px; font-size: 14px; font-family: inherit; }
.cvpdf-textarea-lg, .cvpdf-textarea-md { width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 6px; font-size: 14px; font-family: inherit; }
.cvpdf-textarea-lg { min-height: 110px; }
.cvpdf-textarea-md { min-height: 90px; }
.cvpdf-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cvpdf-counter { font-size: 11px; color: #666; }
.cvpdf-warn { color: #d93025; font-size: 11px; margin-top: 5px; display: none; font-weight: bold; }
.cvpdf-warn--visible { display: block; }
.cvpdf-btn-add { padding: 9px 16px; background: var(--fondo-suave); color: var(--azul); border: 1px dashed var(--azul); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; margin-top: 6px; }
.cvpdf-btn-add:disabled { opacity: .45; cursor: not-allowed; border-style: solid; }
.cvpdf-btn-primary { padding: 12px 22px; background: var(--azul); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; }
.cvpdf-btn-secondary { padding: 12px 22px; background: #999; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; }
.cvpdf-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #333; }

.cvpdf-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cvpdf-ref-card { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 8px; padding: 16px; }
.cvpdf-ref-card-title { font-size: 13px; font-weight: 700; color: var(--azul); margin-bottom: 10px; text-transform: uppercase; }
.cvpdf-ref-card .cvpdf-field { margin-bottom: 10px; }

.cvpdf-entry-card { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 8px; padding: 16px; margin-bottom: 14px; position: relative; }
.cvpdf-entry-remove { position: absolute; top: 10px; right: 10px; background: #d93025; color: #fff; border: none; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; }
.cvpdf-entry-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }

@media (max-width: 700px) {
	.cvpdf-row-2, .cvpdf-ref-grid, .cvpdf-entry-row-2 { grid-template-columns: 1fr; }
}

.cvpdf-preview { background: rgba(0, 0, 0, .85); }
.cvpdf-preview__inner { max-width: 794px; margin: 0 auto; position: relative; }
.cvpdf-preview__banner { background: var(--naranja); color: #fff; padding: 16px; border-radius: 6px; margin-bottom: 12px; text-align: center; font-weight: bold; }
.cvpdf-preview__documento { background: #fff; border-radius: 6px; overflow: auto; min-height: 300px; }
.cvpdf-preview__botones { margin-top: 24px; padding: 0 0 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cvpdf-preview__botones[hidden] { display: none; }
.cvpdf-preview__botones button { min-height: 58px; padding: 16px 30px; font-size: 17px; font-weight: 700; border-radius: 8px; }
.cvpdf-preview__botones .cvpdf-btn-secondary { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.contacto-form__error { color: #d93025; font-size: 14px; font-weight: 600; }

/* Mi perfil: fotos de identidad del propio usuario mientras está verificado. */
.mp-fotos-identidad { margin: 0 0 20px; }
.mp-fotos-identidad__lista { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.mp-fotos-identidad__item { width: 140px; text-align: center; font-size: 13px; font-weight: 600; color: var(--azul); }
.mp-fotos-identidad__item img {
	width: 140px;
	height: 100px;
	object-fit: cover;
	border: 1px solid var(--borde);
	border-radius: 8px;
	margin-bottom: 4px;
}

/* Mi perfil > Usuario y contraseña */
.mp-cuenta__form { margin: 0 0 24px; max-width: 420px; }
.mp-cuenta__form h3 { margin: 0 0 8px; font-size: 16px; color: var(--azul); }
.mp-cuenta__form label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.mp-cuenta__form input[type="text"],
.mp-cuenta__form input[type="email"],
.mp-cuenta__form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--borde);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
}
.mp-cuenta__form .btn { margin-top: 12px; }

/* ==========================================================================
   Blog (/blogs/) — sept 2026. Reusa `.tarjeta`, `.grid`, `.paginacion`,
   `.btn`, `.acordeon` y `.solo-lectura-nota` ya existentes, mismo
   lenguaje visual que el resto del sitio.
   ========================================================================== */

.blog-index__cabecera { text-align: center; max-width: 640px; margin: 0 auto 24px; }
.blog-index__cabecera h1 { margin-bottom: 8px; }
.blog-index__bajada { color: var(--texto-suave); }
.blog-index__cta { margin-top: 12px; }
.blog-index__cta-final { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--borde); text-align: center; }

.blog-index__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.blog-index__filtros a {
	padding: 6px 14px;
	border: 1.5px solid var(--borde);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--texto);
}
.blog-index__filtros a:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.blog-index__filtros a.blog-index__filtro--activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.blog-index__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* `.tarjeta__nombre > a` corta a una sola línea con "…" — pensado para
   nombres de perfiles (cortos). El título de un blog es más largo, así
   que acá se permiten 2 líneas en vez de cortarlo de más. */
.blog-card .tarjeta__nombre > a {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: unset;
}

.blog-card__categoria {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--fondo-suave);
	color: var(--azul);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.blog-card__categoria--oficial { background: #fff6e0; color: #a9760a; }
.blog-card__extracto { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.blog-card__autor { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--texto-suave); }
.blog-card__autor a { font-weight: 600; }

/* Post individual */
.blog-single { max-width: 720px; }
.blog-single__breadcrumb { font-size: 13px; color: var(--texto-suave); margin-bottom: 18px; }
.blog-single__breadcrumb a { color: var(--texto-suave); }
.blog-single__breadcrumb a:hover { color: var(--azul); }

.blog-single__titulo { margin: 10px 0 14px; font-size: clamp(26px, 4vw, 38px); line-height: 1.2; }

.blog-single__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--texto-suave); font-size: 14px; }
.blog-single__autor { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.blog-single__autor:hover { text-decoration: none; }
.blog-single__autor:hover strong { text-decoration: underline; }
.blog-single__autor-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.blog-single__portada { border-radius: var(--radio); overflow: hidden; margin-bottom: 24px; aspect-ratio: 16/9; }
.blog-single__portada img { width: 100%; height: 100%; object-fit: cover; }

.blog-single__cuerpo { font-size: 17px; line-height: 1.7; }
.blog-single__cuerpo h2 { margin: 32px 0 14px; font-size: 22px; }
.blog-single__cuerpo p { margin: 0 0 18px; }
.blog-single__cuerpo figure.blog-bloque-imagen { margin: 24px 0; }
.blog-single__cuerpo figure.blog-bloque-imagen img { width: 100%; height: auto; border-radius: var(--radio); display: block; }
.blog-single__cuerpo figcaption { margin-top: 8px; font-size: 13px; color: var(--texto-suave); text-align: center; }

.blog-single__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--borde);
}
.blog-single__like {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--fondo);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.blog-single__like:hover:not(:disabled) { background: var(--fondo-suave); }
.blog-single__like--activo { background: #eaf7ec; border-color: var(--verde); color: var(--verificado); }
.blog-single__like:disabled { cursor: default; }
.blog-single__compartir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.blog-single__compartir-etiqueta { font-size: 14px; color: var(--texto-suave); }
.blog-single__compartir-boton {
	padding: 8px 14px;
	border: 1px solid var(--borde);
	border-radius: 999px;
	background: var(--fondo);
	font-size: 14px;
	font-weight: 600;
	color: var(--texto);
	cursor: pointer;
}
.blog-single__compartir-boton:hover { background: var(--fondo-suave); }
.blog-single__compartir-boton--wa { color: #128c4c; border-color: #bfe6cf; }

.blog-single__cta-escribir {
	margin-top: 28px;
	padding: 16px;
	border: 1px dashed var(--borde);
	border-radius: var(--radio);
	text-align: center;
}
.blog-single__cta-escribir p { margin: 0 0 10px; font-size: 14px; color: var(--texto-suave); }
.blog-single__cta-nota { margin-top: 28px; text-align: center; }

.blog-single__autor-caja {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 36px;
	padding: 18px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--fondo-suave);
}
.blog-single__autor-caja .blog-single__autor-foto { width: 56px; height: 56px; flex-shrink: 0; }
.blog-single__autor-caja__texto { margin: 0 0 10px; font-size: 14px; }

.blog-single__relacionados { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--borde); }
.blog-single__relacionados h2 { text-align: center; margin-bottom: 20px; }

/* "Tus blogs" en Mi Perfil */
.mp-lista-blogs { list-style: none; margin: 0 0 4px; padding: 0; }
.mp-lista-blogs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.mp-lista-blogs li:last-child { border-bottom: none; }
.mp-lista-blogs__estado { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.mp-lista-blogs__ver { font-size: 12px; font-weight: 600; margin-left: 6px; }

.perfil-blog-link { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); }
.perfil-blog-link__enlace { color: var(--texto); }
.perfil-blog-link__enlace strong { color: var(--azul); }
.perfil-blog-link__enlace:hover strong { text-decoration: underline; }

@media (max-width: 640px) {
	.blog-single__autor-caja { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Tutoriales (/tutoriales/) — sept 2026. A propósito MUCHO más cargado de
   color que un blog (pedido de Mariano): acá es contenido institucional
   con pasos, en el blog es un artículo corrido de un profesional.
   ========================================================================== */

.tutorial-index__cabecera { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.tutorial-index__bajada { color: var(--texto-suave); }

.tutorial-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.tutorial-index__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	border-radius: 16px;
	background: linear-gradient(150deg, #fff, var(--fondo-suave));
	border: 1px solid var(--borde);
	border-top: 4px solid var(--naranja);
	color: var(--texto);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.tutorial-index__card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(41, 68, 107, .12); text-decoration: none; }
.tutorial-index__card-icono { font-size: 28px; }
.tutorial-index__card-titulo { font-weight: 700; font-size: 17px; color: var(--azul); }
.tutorial-index__card-resumen { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.tutorial-index__card-link { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--naranja); }

/* Hero de color al tope del tutorial — mismo degradé que el CTA del home,
   para que se sienta "de marca" y no un artículo plano más. */
.tutorial-single__hero {
	background: linear-gradient(135deg, var(--azul), var(--azul-claro));
	color: #fff;
	padding: 28px 0 40px;
}
.tutorial-single__breadcrumb { font-size: 13px; opacity: .85; margin-bottom: 14px; }
.tutorial-single__breadcrumb a { color: #fff; }
.tutorial-single__titulo { margin: 0 0 14px; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.2; }
.tutorial-single__intro { max-width: 680px; font-size: 17px; line-height: 1.6; opacity: .95; }
.tutorial-single__intro p { margin: 0 0 12px; }

.tutorial-single__cuerpo { max-width: 720px; margin: 0 auto; padding: 36px 16px 60px; }

.tutorial-single__indice {
	margin-bottom: 32px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--fondo-suave);
	border: 1px solid var(--borde);
}
.tutorial-single__indice-titulo { display: block; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 10px; }
.tutorial-single__indice ol { margin: 0; padding-left: 20px; }
.tutorial-single__indice li { margin-bottom: 6px; }
.tutorial-single__indice a { color: var(--azul); font-weight: 600; }

.tutorial-paso {
	position: relative;
	margin-bottom: 32px;
	padding: 24px 24px 24px 28px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--borde);
	border-left: 5px solid var(--naranja);
}
.tutorial-paso__cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tutorial-paso__numero {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--naranja);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}
.tutorial-paso__titulo { margin: 0; font-size: 20px; color: var(--azul); }
.tutorial-paso__cuerpo { font-size: 16px; line-height: 1.65; color: var(--texto); }
.tutorial-paso__cuerpo p { margin: 0 0 14px; }
.tutorial-paso__cuerpo figure.blog-bloque-imagen { margin: 18px 0; }
.tutorial-paso__cuerpo figure.blog-bloque-imagen img { width: 100%; height: auto; border-radius: 10px; display: block; }

.tutorial-single__cta {
	text-align: center;
	margin-top: 40px;
	padding: 32px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f0592b, #d9481c);
	color: #fff;
}
.tutorial-single__cta p { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.tutorial-single__cta .btn-primario { background: #fff; color: #b93a12; }
.tutorial-single__cta .btn-primario:hover { background: #f4f5f0; }

@media (prefers-reduced-motion: reduce) {
	.tutorial-index__card { transition: none; }
	.tutorial-index__card:hover { transform: none; }
}