/* =========================================================
 * mobile.css — Tema JP 2026
 *
 * Pase mobile-first pulido para viewports ≤ 767px.
 * Carga DESPUÉS de sections.css/plugin-overrides.css para
 * poder sobrescribir lo que haga falta sin !important salvo
 * donde sea estrictamente necesario.
 *
 * Filosofía:
 *   - Menos altura, más densidad de información útil
 *   - Botones grandes y full-width (tap targets ≥ 44px)
 *   - Foto del hero como background suave, texto siempre legible
 *   - Section-gap reducido (48-56px en vez de 80px)
 *   - Padding lateral 20px (más cómodo que 16)
 *   - Modales edge-to-edge para aprovechar pantalla
 * ========================================================= */

/* Ajustes globales para móvil */
@media (max-width: 767px) {

	:root {
		--pm-section-gap:   3rem;      /* 48px (era 80) */
		--pm-gutter-mobile: 1.25rem;   /* 20px (era 16) */
		--pm-header-h:      64px;      /* header más bajo en móvil */
	}

	body { font-size: 16px; line-height: 1.55; }

	/* Tipo más amable en móvil */
	h1 { font-size: 2rem; line-height: 1.15; }
	h2 { font-size: 1.375rem; }
	h3 { font-size: 1.125rem; }

	/* ----------------- Header / Drawer ----------------- */
	.jp-header__inner { padding-inline: var(--pm-gutter-mobile); }
	.jp-brand { font-size: 1.125rem; gap: 0.5rem; }
	.jp-brand .material-symbols-outlined { font-size: 1.35rem; }
	.jp-nav-toggle { padding: 8px; }
	.jp-nav-toggle .material-symbols-outlined { font-size: 1.6rem; }

	.jp-mobile-drawer {
		top: var(--pm-header-h);
		padding: 1.5rem 1.25rem 2rem;
		gap: 0.25rem;
	}
	.jp-mobile-drawer a {
		font-size: 1.125rem;
		padding: 0.75rem 0;
	}
	.jp-mobile-drawer .jp-btn { width: 100%; margin-top: 0.5rem; }

	/* ----------------- Hero ----------------- */
	.jp-hero {
		min-height: 0;
		height: auto;
		margin-top: var(--pm-header-h);
		padding-block: 2.5rem 3rem;
	}
	.jp-hero__bg img {
		object-position: center 18%;     /* cara arriba siempre visible */
		opacity: 0.30;                   /* más blanqueado: foto como atmósfera, no protagonista */
		filter: saturate(0.85) contrast(1.05);
	}
	.jp-hero__bg::after {
		/* Gradient vertical: ya casi no se ve el sujeto, sirve sólo de
		 * ambiente. El texto queda 100% legible. */
		background: linear-gradient(180deg,
			rgba(252,249,248,0.10) 0%,
			rgba(252,249,248,0.50) 30%,
			rgba(252,249,248,0.90) 55%,
			var(--pm-surface) 75%);
	}
	.jp-hero__inner { padding-inline: var(--pm-gutter-mobile); }
	.jp-hero__content { max-width: 100%; }
	.jp-hero__eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		margin-bottom: 0.75rem;
	}
	.jp-hero__name { font-size: 2.125rem; margin-bottom: 0.125rem; }
	.jp-hero__role { font-size: 1.0625rem; margin-bottom: 1.25rem; }
	.jp-hero__tagline {
		font-size: 1rem;
		padding: 0.25rem 0 0.25rem 1rem;
		border-left-width: 3px;
		margin-bottom: 1.25rem;
	}
	.jp-hero__intro { font-size: 0.9375rem; color: var(--pm-ink-3); margin-bottom: 1.5rem !important; }
	.jp-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.625rem;
	}
	.jp-hero__actions .jp-btn { width: 100%; min-height: 48px; justify-content: center; }

	/* ----------------- Quote ----------------- */
	.jp-quote { padding-block: 3rem; }
	.jp-quote__icon { font-size: 2.25rem; margin-bottom: 1rem; }
	.jp-quote__text { font-size: 1.1875rem; line-height: 1.5; }
	.jp-quote__cite { font-size: 0.6875rem; }

	/* ----------------- Section headers ----------------- */
	.jp-section { padding-block: var(--pm-section-gap); }
	.jp-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		margin-bottom: 2rem;
	}
	.jp-section__title { font-size: 1.5rem; line-height: 1.2; }
	.jp-section__rule { display: none; }
	.jp-section__subtitle { font-size: 0.9375rem; }

	/* ----------------- Proyectos ----------------- */
	.jp-projects-grid { gap: 1.5rem; }
	.jp-project__body { padding: 1.25rem 1.25rem 1.5rem; }
	.jp-project__title { font-size: 1.1875rem; line-height: 1.25; margin-bottom: 0.5rem; }
	.jp-project__excerpt { font-size: 0.9375rem; margin-bottom: 1rem; -webkit-line-clamp: 4; }
	.jp-project__meta { gap: 0.75rem; margin-bottom: 1rem; }
	.jp-project__meta-value { font-size: 0.9375rem; }
	.jp-project__tags { gap: 0.375rem; margin-bottom: 1rem; }
	.jp-project__tags .jp-chip { font-size: 10px; padding: 3px 8px; }
	.jp-project__footer { padding-top: 1rem; flex-wrap: wrap; gap: 0.5rem; }
	.jp-project__impact { font-size: 0.6875rem; }

	/* ----------------- Aptitudes ----------------- */
	.jp-skills-grid { gap: 0.75rem; }
	.jp-skill-card { padding: 1.25rem; }
	.jp-skill-card__icon { font-size: 22px; margin-bottom: 0.75rem; }
	.jp-skill-card__title { font-size: 1.0625rem; margin-bottom: 0.75rem; }
	.jp-skill-card__chips .jp-chip { font-size: 10px; padding: 3px 8px; }

	/* ----------------- Aficiones + Mapa ----------------- */
	.jp-hobbies { gap: 2rem; }
	.jp-hobbies__icons { gap: 0.75rem; margin-top: 1rem; }
	.jp-hobby { min-width: 0; flex: 1 0 calc(33.333% - 0.75rem); max-width: 110px; }
	.jp-hobby__circle { width: 48px; height: 48px; }
	.jp-hobby__label { font-size: 10px; letter-spacing: 0.06em; }
	.jp-map { aspect-ratio: 1.4 / 1; padding: 0.5rem; border-radius: 1rem; }
	.jp-map__canvas { border-radius: 0.75rem; min-height: 220px; }
	.jp-map__pill {
		font-size: 9.5px; padding: 6px 12px;
		bottom: 0.75rem; gap: 4px;
	}
	.jp-map__pill .material-symbols-outlined { font-size: 12px !important; }

	/* ----------------- Estudios / Certs ----------------- */
	.jp-edu-grid { gap: 2.25rem; }
	.jp-edu-item { padding-left: 1rem; }
	.jp-edu-item__when { font-size: 10px; }
	.jp-edu-item__title { font-size: 1rem; margin: 0.125rem 0; }
	.jp-edu-item__org { font-size: 0.9375rem; }
	.jp-certs-grid { gap: 0.5rem; }
	.jp-cert-card { padding: 0.75rem; font-size: 10px; }

	/* ----------------- Experiencia (timeline) ----------------- */
	.jp-timeline { padding-left: 1.75rem; }
	.jp-timeline::before { left: 6px; }
	.jp-timeline__item { display: block; margin-bottom: 2rem; }
	.jp-timeline__node { left: -1.75rem; top: 4px; width: 14px; height: 14px; }
	.jp-timeline__left, .jp-timeline__right { text-align: left; }
	.jp-timeline__logo { width: 36px; height: 36px; margin-bottom: 0.5rem; }
	.jp-timeline__date { font-size: 10px; }
	.jp-timeline__title { font-size: 1rem; }
	.jp-timeline__org { font-size: 10px; }
	.jp-timeline__body { font-size: 0.9375rem; }
	.jp-timeline__body p { margin: 0 0 0.5rem; }

	/* ----------------- Modales (contacto + CV) ----------------- */
	.jp-modal { padding: 0; align-items: flex-end; }
	.jp-modal__dialog {
		width: 100%;
		max-height: 95vh;
		border-radius: 1rem 1rem 0 0;
		animation: jp-slideup var(--pm-dur-base) var(--pm-ease);
	}
	.jp-modal__header { padding: 1rem 1.25rem; }
	.jp-modal__body { padding: 1.25rem; }
	@keyframes jp-slideup {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* Modal CV (plugin txcv-pro-aligned) en móvil */
	.txcv-modal { padding: 0 !important; align-items: flex-end !important; }
	.txcv-dialog {
		width: 100% !important;
		height: 92vh !important;
		max-width: 100% !important;
		border-radius: 1rem 1rem 0 0 !important;
	}
	.txcv-header {
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0.625rem 1rem !important;
	}
	.txcv-title { font-size: 0.875rem; }
	.txcv-actions { gap: 6px !important; }
	.txcv-btn {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}

	/* ----------------- Form de contacto ----------------- */
	#jp-contact-modal .jp-form input,
	#jp-contact-modal .jp-form textarea {
		font-size: 16px; /* evita que iOS haga zoom al hacer focus */
	}
	#jp-contact-modal .jp-form__actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.75rem;
	}
	#jp-contact-modal .jp-form__actions .btn,
	#jp-contact-modal .jp-form__actions .jp-btn {
		width: 100%; min-height: 48px;
	}

	/* ----------------- Footer ----------------- */
	.jp-footer { padding-block: 3rem; }
	.jp-footer__inner {
		flex-direction: column;
		text-align: center;
		gap: 1.5rem;
	}
	.jp-footer__nav { justify-content: center; gap: 1.25rem; row-gap: 0.5rem; }
	.jp-footer__copy { text-align: center; font-size: 10px; }

	/* ----------------- Plugins flotantes ajenos al tema -----------------
	 * En móvil tapaban contenido. Los ajustamos sin tocar sus PHP.
	 *
	 *   .jpcl-badges       (plugin jp-cert-logos): badges verticales
	 *                       de certificaciones a la derecha. En móvil
	 *                       compiten con el contenido y la sección de
	 *                       Certificaciones ya los muestra → ocultamos.
	 *
	 *   .jp-rrss-fab       (plugin boton-rrss): FAB de LinkedIn. Lo
	 *                       hacemos más pequeño y respetamos el área
	 *                       segura inferior (notch / barras del
	 *                       navegador móvil).
	 *
	 *   .jp-floating-note  (plugin jp-home-floating-note): si lo hay,
	 *                       lo bajamos a la esquina con padding seguro.
	 */
	.jpcl-badges { display: none !important; }

	.jp-rrss-fab {
		width: 48px !important;
		height: 48px !important;
		right: 14px !important;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
		box-shadow: 0 6px 18px rgba(28,27,27,0.18) !important;
	}
	.jp-rrss-fab img { width: 22px !important; height: 22px !important; }

	.jp-floating-note,
	#jp-floating-note {
		right: 8px !important;
		bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
		max-width: calc(100vw - 80px) !important;
		font-size: 0.875rem !important;
	}

	/* ----------------- Logo chip junto al título (.jp-proj-head del plugin) ----------------- */
	.jp-proj-head { gap: 0.5rem; margin-bottom: 0.5rem; }
	.jp-proj-logo { width: 36px !important; height: 36px !important; padding: 3px !important; border-radius: 8px !important; }
}

/* Pantallas muy pequeñas (≤ 380px): apretar un poco más */
@media (max-width: 380px) {
	:root { --pm-gutter-mobile: 1rem; }

	.jp-hero__name { font-size: 1.875rem; }
	.jp-hero__role { font-size: 1rem; }
	.jp-section__title { font-size: 1.375rem; }
	.jp-project__body { padding: 1rem 1rem 1.25rem; }
	.jp-skill-card { padding: 1rem; }
	.jp-hobby { max-width: 90px; }
	.jp-hobby__circle { width: 44px; height: 44px; }
	.jp-hobby__label { font-size: 9.5px; }
}

/* Landscape muy bajo (e.g. teléfono en horizontal): reducir hero height */
@media (max-width: 900px) and (max-height: 480px) {
	.jp-hero { padding-block: 1.5rem 2rem; min-height: 0; }
	.jp-hero__bg img { opacity: 0.35; }
}