/* =========================================================
 * sections.css — Tema JP 2026
 * Estilos específicos de las secciones de la home:
 * hero, proyectos, aptitudes, aficiones, estudios, experiencia.
 * ========================================================= */

/* ---------- Hero ----------
 * Layout pensado para portraits verticales (e.g. 1200×1500):
 * - El sujeto se coloca a la derecha mediante --pm-hero-pos
 *   (configurable desde Customizer: izquierda/centro/derecha).
 * - El tratamiento (color/b·n/editorial) se aplica con --pm-hero-filter
 *   y --pm-hero-opacity (también desde Customizer).
 * - Un gradiente "paper" desde la izquierda protege el texto sobre
 *   cualquier foto. En móvil el gradiente sube de abajo para que la
 *   cara siga visible y el texto sea legible.
 *
 * Defaults (si Customizer no inyecta nada): foto a la derecha,
 * saturación 0.85, opacity 0.95.
 */
:root {
	--pm-hero-pos:         75% center;
	--pm-hero-filter:      saturate(0.85) contrast(1.05);
	--pm-hero-opacity:     0.95;
	/* Defaults: "Estrecho" — el velo termina al 46% del ancho. */
	--pm-hero-veil-solid:  18%;
	--pm-hero-veil-mid:    32%;
	--pm-hero-veil-end:    46%;
	--pm-hero-veil-mid-op: 0.55;
}

.jp-hero {
	position: relative;
	min-height: clamp(560px, 82vh, 760px);
	display: flex; align-items: center;
	overflow: hidden;
	padding-block: var(--pm-section-gap);
	margin-top: var(--pm-header-h);
	background: var(--pm-surface-low);
}
.jp-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background: var(--pm-surface-low);
}
.jp-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--pm-hero-pos);
	filter: var(--pm-hero-filter);
	opacity: var(--pm-hero-opacity);
	transition: opacity var(--pm-dur-slow) var(--pm-ease);
}

/* Caso especial: si no hay foto subida y se muestra el placeholder,
   no aplicamos gradiente fuerte (queda mejor el SVG limpio). */
.jp-hero--placeholder .jp-hero__bg img { opacity: 1; filter: none; }

/* Gradiente "paper" que blanquea el lado del texto.
   Móvil: vertical (texto arriba, foto debajo).
   Desktop: horizontal (texto izq, foto derecha). */
.jp-hero__bg::after {
	content: "";
	position: absolute; inset: 0;
	background:
		/* difuminado lateral suave en la parte superior */
		linear-gradient(180deg,
			rgba(252,249,248,0.55) 0%,
			rgba(252,249,248,0.15) 45%,
			rgba(252,249,248,0.0)  60%,
			rgba(252,249,248,0.0)  100%);
}
@media (min-width: 768px) {
	.jp-hero__bg::after {
		background:
			linear-gradient(90deg,
				var(--pm-surface) 0%,
				var(--pm-surface) var(--pm-hero-veil-solid),
				rgba(252, 249, 248, var(--pm-hero-veil-mid-op)) var(--pm-hero-veil-mid),
				rgba(252, 249, 248, 0) var(--pm-hero-veil-end));
	}
}

/* Línea sutil de separación a la base del hero (acento editorial). */
.jp-hero::before {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--pm-warm-grey-border);
	z-index: 2;
}
.jp-hero__inner {
	position: relative; z-index: 1;
	max-width: var(--pm-container);
	margin-inline: auto;
	padding-inline: var(--pm-gutter-mobile);
	width: 100%;
}
@media (min-width: 768px) { .jp-hero__inner { padding-inline: var(--pm-gutter); } }

.jp-hero__content { max-width: 38rem; }
.jp-hero__eyebrow {
	font-size: var(--pm-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pm-tech-accent);
	font-weight: var(--pm-weight-semibold);
	margin-bottom: var(--pm-space-4);
	display: block;
}
.jp-hero__name {
	font-size: var(--pm-fs-display-lg-mobile);
	line-height: var(--pm-lh-display);
	letter-spacing: var(--pm-tracking-display);
	margin: 0 0 var(--pm-space-1);
}
@media (min-width: 768px) {
	.jp-hero__name { font-size: var(--pm-fs-display-lg); }
}
.jp-hero__role {
	font-size: var(--pm-fs-headline-md);
	color: var(--pm-primary);
	margin: 0 0 var(--pm-space-6);
	font-weight: var(--pm-weight-semibold);
}
.jp-hero__tagline {
	font-size: var(--pm-fs-body-lg);
	color: var(--pm-ink-2);
	line-height: var(--pm-lh-body);
	border-left: 4px solid var(--pm-tech-accent);
	padding: var(--pm-space-2) 0 var(--pm-space-2) var(--pm-space-6);
	margin-bottom: var(--pm-space-8);
}
.jp-hero__actions {
	display: flex; flex-wrap: wrap; gap: var(--pm-space-3);
}

/* ---------- Proyectos / Casos de éxito ---------- */
.jp-projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pm-space-10);
}
@media (min-width: 768px) {
	.jp-projects-grid { grid-template-columns: repeat(2, 1fr); gap: var(--pm-space-12); }
}

.jp-project {
	position: relative;
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--pm-dur-base) var(--pm-ease),
	            transform var(--pm-dur-base) var(--pm-ease);
}
.jp-project:hover { box-shadow: var(--pm-shadow-2); transform: translateY(-2px); }

/* Las cards de proyecto NO tienen banner/media a partir de v10.
 * El logo lo aporta el plugin de proyectos (.jp-proj-head con .jp-proj-logo)
 * directamente junto al título dentro del body. El sector va como chip
 * discreto encima del título. Resultado: card mucho más limpia y
 * editorial, sin la franja gris que dominaba la composición. */
.jp-project__sectorline {
	margin-bottom: var(--pm-space-3);
}
.jp-chip--sector {
	background: var(--pm-primary);
	color: var(--pm-on-primary);
	border: 0;
}
.jp-project__body { padding: var(--pm-space-6) var(--pm-space-8) var(--pm-space-8); }
.jp-project__title { font-size: var(--pm-fs-headline-md); margin: 0 0 var(--pm-space-2); }
.jp-project__excerpt {
	color: var(--pm-ink-2);
	margin: 0 0 var(--pm-space-6);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jp-project__meta {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--pm-space-4);
	margin-bottom: var(--pm-space-6);
}
.jp-project__meta-label {
	display: block;
	font-size: 10px;
	font-weight: var(--pm-weight-bold);
	color: var(--pm-outline);
	text-transform: uppercase;
	letter-spacing: var(--pm-tracking-label);
	margin-bottom: 2px;
}
.jp-project__meta-value { color: var(--pm-ink); font-size: var(--pm-fs-body-md); }

.jp-project__tags {
	display: flex; flex-wrap: wrap; gap: var(--pm-space-2);
	margin-bottom: var(--pm-space-4);
}

.jp-project__footer {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: var(--pm-space-6);
	border-top: 1px solid var(--pm-warm-grey-border);
	gap: var(--pm-space-3);
}
.jp-project__impact {
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	color: var(--pm-tech-accent);
	font-weight: var(--pm-weight-semibold);
}
.jp-project__cta {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--pm-primary);
	font-weight: var(--pm-weight-semibold);
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
}

/* ---------- Aptitudes ---------- */
.jp-skills-grid {
	display: grid; grid-template-columns: 1fr; gap: var(--pm-space-6);
}
@media (min-width: 640px) { .jp-skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .jp-skills-grid { grid-template-columns: repeat(4, 1fr); } }

.jp-skill-card {
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-md);
	padding: var(--pm-space-8);
	display: flex; flex-direction: column;
	transition: box-shadow var(--pm-dur-base) var(--pm-ease);
}
.jp-skill-card:hover { box-shadow: var(--pm-shadow-1); }
.jp-skill-card__icon { color: var(--pm-primary); font-size: 28px; margin-bottom: var(--pm-space-4); }
.jp-skill-card__title { font-size: var(--pm-fs-body-lg); margin: 0 0 var(--pm-space-4); font-weight: var(--pm-weight-bold); }
.jp-skill-card__chips { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); }

/* ---------- Aficiones ---------- */
.jp-hobbies {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pm-space-12);
	align-items: center;
}
@media (min-width: 900px) { .jp-hobbies { grid-template-columns: 1fr 1fr; gap: var(--pm-space-16); } }

.jp-hobbies__text { max-width: 32rem; }
.jp-hobbies__icons {
	display: flex; flex-wrap: wrap; gap: var(--pm-space-5);
	margin-top: var(--pm-space-6);
}
.jp-hobby {
	display: flex; flex-direction: column; align-items: center;
	gap: var(--pm-space-2);
	min-width: 84px;
	text-align: center;
}
.jp-hobby__circle {
	width: 56px; height: 56px;
	border-radius: var(--pm-radius-pill);
	background: var(--pm-primary-container);
	color: var(--pm-primary);
	display: flex; align-items: center; justify-content: center;
	transition: transform var(--pm-dur-base) var(--pm-ease);
}
.jp-hobby:hover .jp-hobby__circle { transform: translateY(-2px); }
.jp-hobby__label {
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	color: var(--pm-ink-3);
	font-weight: var(--pm-weight-semibold);
}

.jp-map {
	position: relative;
	background: var(--pm-surface-mid);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-2xl);
	padding: var(--pm-space-3);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.jp-map__canvas {
	position: relative;
	width: 100%; height: 100%;
	min-height: 320px;
	border-radius: var(--pm-radius-xl);
	background: var(--pm-surface-card);
	overflow: hidden;
}
/* Asegura que Leaflet rellena todo el contenedor */
.jp-map__canvas .leaflet-container {
	width: 100%; height: 100%;
	background: var(--pm-surface-card);
	border-radius: var(--pm-radius-xl);
	font-family: var(--pm-font-sans);
}
.jp-map__canvas .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255,255,255,0.85);
}
.jp-map__pill {
	position: absolute; left: 50%; bottom: var(--pm-space-4);
	transform: translateX(-50%);
	background: rgba(255,255,255,0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--pm-warm-grey-border);
	color: var(--pm-primary);
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	font-weight: var(--pm-weight-semibold);
	padding: var(--pm-space-2) var(--pm-space-5);
	border-radius: var(--pm-radius-pill);
	pointer-events: none;
	display: inline-flex; align-items: center; gap: 6px;
	box-shadow: var(--pm-shadow-1);
}

/* ---------- Estudios + Certs ---------- */
.jp-edu-grid {
	display: grid; grid-template-columns: 1fr; gap: var(--pm-space-12);
}
@media (min-width: 900px) { .jp-edu-grid { grid-template-columns: 1fr 1fr; gap: var(--pm-space-16); } }
.jp-edu-list { display: flex; flex-direction: column; gap: var(--pm-space-6); }
.jp-edu-item {
	border-left: 2px solid var(--pm-warm-grey-border);
	padding: 4px 0 4px var(--pm-space-6);
}
.jp-edu-item__when {
	display: block;
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	color: var(--pm-ink-3);
	font-weight: var(--pm-weight-semibold);
}
.jp-edu-item__title { font-size: var(--pm-fs-body-lg); margin: 4px 0; font-weight: var(--pm-weight-bold); }
.jp-edu-item__org   { color: var(--pm-ink-2); font-size: var(--pm-fs-body-md); margin: 0; }

.jp-certs-grid {
	display: grid; grid-template-columns: 1fr; gap: var(--pm-space-3);
}
@media (min-width: 640px) { .jp-certs-grid { grid-template-columns: 1fr 1fr; } }
.jp-cert-card {
	display: flex; align-items: center; gap: var(--pm-space-3);
	padding: var(--pm-space-4);
	background: var(--pm-surface-card);
	border: 1px solid var(--pm-warm-grey-border);
	border-radius: var(--pm-radius-md);
	font-size: var(--pm-fs-label);
	letter-spacing: var(--pm-tracking-label);
	text-transform: uppercase;
	font-weight: var(--pm-weight-semibold);
	color: var(--pm-ink);
	transition: border-color var(--pm-dur-fast) var(--pm-ease);
}
.jp-cert-card:hover { border-color: var(--pm-tech-accent); text-decoration: none; }
.jp-cert-card .material-symbols-outlined { color: var(--pm-tech-accent); }

/* ---------- Empty states ---------- */
.jp-empty {
	color: var(--pm-ink-3);
	font-style: italic;
	padding: var(--pm-space-6) 0;
	text-align: center;
}