/*
 * La Marné: look del nuevo disco de Jesús Infante sobre Movedo
 * Papel, rotulador negro, ocre de las colinas y letras de colores.
 */

:root {
	--lm-paper: #f3f0e8;
	--lm-paper-dark: #e8e2d4;
	--lm-ink: #2a2420;
	--lm-ochre: #e2a82a;
	--lm-ochre-light: #f0c75a;
	--lm-ochre-dark: #b9851a;
	--lm-pink: #e59bd0;
	--lm-green: #9cc58a;
	--lm-cyan: #57c3df;
	--lm-violet: #8a8fd8;
	--lm-red: #e0533a;
	--lm-yellow: #f2c94c;
	--lm-teal: #8fd3c4;
	--lm-plum: #6e4f5c;
	--lm-hand: 'Patrick Hand', 'Comic Sans MS', cursive;
	--lm-hand-sc: 'Patrick Hand SC', 'Patrick Hand', cursive;
	--lm-marker: 'Caveat Brush', 'Patrick Hand', cursive;
	--lm-body: 'Nunito', 'Segoe UI', sans-serif;
	--lm-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Papel y texto base ---------- */

body,
#grve-theme-wrapper,
#grve-theme-content,
#grve-main-content,
.grve-section.grve-bg-none,
.grve-bg-light {
	background-color: var(--lm-paper) !important;
	background-image: var(--lm-paper-grain);
}

body,
p,
#grve-theme-wrapper p,
.wpb_text_column {
	font-family: var(--lm-body) !important;
	color: var(--lm-ink);
}

::selection {
	background: var(--lm-ochre-light);
	color: var(--lm-ink);
}

/* ---------- Títulos a mano ---------- */

h1, h2, h3, h4, h5, h6,
.grve-h1, .grve-h2, .grve-h3, .grve-h4, .grve-h5, .grve-h6,
#grve-theme-wrapper .grve-title,
#grve-page-title .grve-title {
	font-family: var(--lm-marker) !important;
	font-weight: 400 !important;
	letter-spacing: .5px !important;
	color: var(--lm-ink) !important;
}

/* Títulos de sección (Sobre mí, Galería, Mis Vídeos, Contáctame…); el del banner va aparte en .lm-title */
.grve-element.grve-title.grve-h1,
.grve-element.grve-title .grve-h1,
#grve-theme-wrapper .grve-title[class*="grve-heading-"] {
	font-size: clamp(32px, 3.4vw, 50px) !important;
	line-height: 1.1 !important;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Letras de colores con trazo de rotulador (las pinta la-marne.js) */
.lm-letters span,
.lm-title span {
	-webkit-text-stroke: 2px var(--lm-ink);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 rgba(42, 36, 32, .12);
}

.lm-c0 { color: var(--lm-pink) !important; }
.lm-c1 { color: var(--lm-green) !important; }
.lm-c2 { color: var(--lm-cyan) !important; }
.lm-c3 { color: var(--lm-violet) !important; }
.lm-c4 { color: var(--lm-red) !important; }
.lm-c5 { color: var(--lm-yellow) !important; }
.lm-c6 { color: var(--lm-teal) !important; }
.lm-c7 { color: var(--lm-ochre) !important; }

/* Subrayado ocre a mano bajo los títulos de sección */
.grve-element.grve-title {
	position: relative;
	padding-bottom: 14px;
}
.grve-element.grve-title::after {
	content: '';
	display: block;
	width: 120px;
	height: 10px;
	margin-top: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6 C 25 2, 45 9, 65 5 S 105 3, 118 6' fill='none' stroke='%23e2a82a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
/* todos los títulos de sección alineados a la izquierda, también los que Movedo centra */
#grve-theme-wrapper .grve-element.grve-title.grve-align-center {
	text-align: left !important;
}

/* ---------- Cabecera y menú ---------- */

#grve-header,
#grve-main-header,
#grve-main-header .grve-wrapper,
#grve-movedo-sticky-header,
#grve-responsive-header,
#grve-main-responsive-header {
	background-color: var(--lm-paper) !important;
	background-image: var(--lm-paper-grain);
}

#grve-main-header {
	border-bottom: 2px solid var(--lm-ink) !important;
}

#grve-main-menu .grve-wrapper > ul > li > a,
#grve-main-menu .grve-wrapper > ul > li > a .grve-item,
#grve-hidden-menu a,
.grve-menu a {
	font-family: var(--lm-hand-sc) !important;
	font-size: 19px !important;
	letter-spacing: 1px !important;
	text-transform: none !important;
	color: var(--lm-ink) !important;
}

#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+1) > a:hover .grve-item { color: var(--lm-pink) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+2) > a:hover .grve-item { color: var(--lm-green) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+3) > a:hover .grve-item { color: var(--lm-cyan) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+4) > a:hover .grve-item { color: var(--lm-violet) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+5) > a:hover .grve-item { color: var(--lm-red) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+6) > a:hover .grve-item { color: var(--lm-ochre) !important; }
#grve-main-menu .grve-wrapper > ul > li:nth-child(8n+7) > a:hover .grve-item { color: var(--lm-teal) !important; }

/* ---------- Título "Jesús Infante - La Marné" a la izquierda de la cabecera ---------- */

/* mismo estilo que los títulos de sección, a un tamaño que cabe en la barra sin ensancharla */
.lm-brand .grve-wrapper {
	display: flex;
	align-items: center;
	height: 100%;
	/* Movedo baja el envoltorio del logo a media altura (pensado para imágenes); aquí lo centra el flex */
	position: static !important;
	top: auto !important;
	transform: none !important;
}
.lm-brand a {
	display: block;
	text-decoration: none !important;
	line-height: 1 !important;
	white-space: nowrap;
}
#grve-theme-wrapper .lm-brand-text {
	font-family: var(--lm-marker) !important;
	font-size: 34px;
	line-height: 1;
	letter-spacing: .5px;
}
.lm-brand-text span[class^="lm-c"] {
	-webkit-text-stroke: 1.5px var(--lm-ink);
	paint-order: stroke fill;
}
.lm-brand-sep {
	color: var(--lm-ink);
	margin: 0 .15em;
}

/* el menú deja de ocupar todo el ancho centrado y se coloca a la derecha del título */
#grve-main-header #grve-main-menu,
#grve-movedo-sticky-header #grve-movedo-sticky-menu {
	left: auto !important;
	right: 0 !important;
	width: auto !important;
	padding-right: 30px;
}
#grve-main-header #grve-main-menu .grve-wrapper,
#grve-movedo-sticky-header #grve-movedo-sticky-menu .grve-wrapper {
	text-align: right;
}

/* en pantallas medianas el título y el menú no caben juntos a tamaño completo */
@media (max-width: 1280px) {
	#grve-theme-wrapper .lm-brand-text { font-size: 28px; }
	#grve-main-menu .grve-wrapper > ul > li > a,
	#grve-main-menu .grve-wrapper > ul > li > a .grve-item { font-size: 17px !important; }
}

/* ---------- Cabecera de móvil ---------- */

#grve-responsive-header .lm-brand-text {
	font-size: 25px;
}
#grve-responsive-header .lm-brand-text span[class^="lm-c"] {
	-webkit-text-stroke: 1.2px var(--lm-ink);
}
/* hamburguesa negra y gruesa: el icono original es un carácter de fuente fino y gris claro */
#grve-responsive-header .grve-icon-menu {
	display: block;
	width: 26px;
	height: 20px;
	background:
		linear-gradient(#000, #000) 0 0 / 100% 3px no-repeat,
		linear-gradient(#000, #000) 0 50% / 100% 3px no-repeat,
		linear-gradient(#000, #000) 0 100% / 100% 3px no-repeat;
	border-radius: 1px;
}
#grve-responsive-header .grve-icon-menu::before {
	content: none !important;
}

/* ---------- Secciones: colinas ocres ---------- */

.grve-section.grve-headings-light,
.grve-section.grve-headings-light .grve-background-wrapper {
	background-color: var(--lm-ochre) !important;
}

/* Las fotos de fondo de las secciones se tiñen de ocre como el papel pintado */
.grve-section .grve-background-wrapper .grve-bg-image {
	filter: sepia(.55) saturate(1.2) contrast(.95);
}
.grve-section.grve-headings-light .grve-background-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	/* velo ocre claro y tupido: la foto apenas se intuye y la letra negra resalta */
	background:
		repeating-linear-gradient(0deg, rgba(185, 133, 26, .10) 0 2px, transparent 2px 9px),
		linear-gradient(rgba(243, 209, 112, .88), rgba(243, 209, 112, .88));
	pointer-events: none;
}
/* con el fondo claro, los logos e iconos blancos pasan a tinta para que se vean */
[data-anchor="albums"] img[src*="Spotify_Logo_CMYK_White"],
#socialLinks .grve-social li img {
	filter: brightness(0);
	opacity: .85;
}
#grve-theme-wrapper #socialLinks .grve-social li a i {
	color: var(--lm-ink) !important;
}
.grve-section.grve-headings-light h1,
.grve-section.grve-headings-light h2,
.grve-section.grve-headings-light h3,
.grve-section.grve-headings-light .grve-title,
.grve-section.grve-headings-light p {
	color: var(--lm-ink) !important;
}
.grve-section.grve-headings-light p {
	font-size: 17px !important;
	line-height: 1.6 !important;
	font-weight: 600;
}

/* ---------- Imágenes como recortes pegados ---------- */

.grve-image img,
.grve-media img,
.wpb_single_image img {
	border: 2px solid var(--lm-ink);
	border-radius: 6px;
	box-shadow: 4px 5px 0 rgba(42, 36, 32, .18);
}
.grve-carousel-item:nth-child(odd) .grve-media { transform: rotate(-1.2deg); }
.grve-carousel-item:nth-child(even) .grve-media { transform: rotate(1deg); }
.grve-hover-overlay.grve-bg-light {
	background-color: var(--lm-ochre-light) !important;
}

/* ---------- Botones y formularios ---------- */

.grve-btn,
.wpcf7-submit,
#grve-theme-wrapper .wpcf7 input.wpcf7-submit,
input[type="submit"],
button[type="submit"],
.lm-btn {
	font-family: var(--lm-hand-sc) !important;
	font-size: 20px !important;
	letter-spacing: 1px;
	color: var(--lm-ink) !important;
	background: var(--lm-ochre-light) !important;
	border: 2px solid var(--lm-ink) !important;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
	box-shadow: 3px 3px 0 var(--lm-ink);
	padding: 10px 26px !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.grve-btn:hover,
.wpcf7-submit:hover,
.lm-btn:hover {
	transform: translate(-1px, -2px) rotate(-1deg);
	box-shadow: 5px 5px 0 var(--lm-ink);
	background: var(--lm-yellow) !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	font-family: var(--lm-hand) !important;
	font-size: 18px !important;
	background: #fffdf7 !important;
	border: 2px solid var(--lm-ink) !important;
	border-radius: 4px !important;
	color: var(--lm-ink) !important;
}

/* Mensajes del formulario: en tinta sobre papel, para que se lean sobre el fondo amarillo.
   La franja de la izquierda dice de un vistazo si es un error (rojo) o si se ha enviado (verde) */
#grve-theme-wrapper .wpcf7 form .wpcf7-response-output {
	margin: 14px 0 0 !important;
	padding: 8px 14px !important;
	font-family: var(--lm-body) !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lm-ink) !important;
	background: #fffdf7 !important;
	border: 2px solid var(--lm-ink) !important;
	border-left-width: 8px !important;
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(42, 36, 32, .25);
}
#grve-theme-wrapper .wpcf7 form.invalid .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.unaccepted .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.failed .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.aborted .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--lm-red) !important;
}
#grve-theme-wrapper .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #3f8f3a !important;
}
/* el aviso de cada campo ("El campo es obligatorio."): más grande y en un rojo oscuro legible */
#grve-theme-wrapper .wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--lm-body) !important;
	font-size: 13px !important;
	font-weight: 700;
	color: #9e1c10 !important;
	margin-top: 3px;
}

/* Contáctame en el móvil: el formulario más compacto para que, con los avisos de error, el
   mensaje y los iconos quepan en una pantalla (las secciones no hacen scroll) */
@media (max-width: 767px) {
	[data-anchor="connect"] .wpcf7 p { margin-bottom: 6px !important; }
	[data-anchor="connect"] .wpcf7 input[type="text"],
	[data-anchor="connect"] .wpcf7 input[type="email"] {
		height: 36px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
	[data-anchor="connect"] .wpcf7 textarea { height: 80px !important; }
	/* el aviso de cada campo va dentro del propio campo, a la derecha, en vez de en una línea más */
	[data-anchor="connect"] .wpcf7-form-control-wrap { position: relative; display: block; }
	#grve-theme-wrapper [data-anchor="connect"] .wpcf7 .wpcf7-not-valid-tip {
		position: absolute;
		z-index: 3;
		left: auto;
		right: 8px;
		top: 50%;
		width: auto;
		transform: translateY(-50%);
		margin: 0;
		padding: 0 4px;
		font-size: 11px !important;
		background: #fffdf7;
		pointer-events: none;
	}
	#grve-theme-wrapper [data-anchor="connect"] .wpcf7 form .wpcf7-response-output {
		margin-top: 10px !important;
		padding: 6px 10px !important;
		font-size: 13px !important;
	}
	[data-anchor="connect"] #socialLinks { margin-top: 12px; }
	/* el icono de "enviando…" es invisible pero en pantallas estrechas ocupaba una línea entera */
	[data-anchor="connect"] .wpcf7-spinner {
		position: absolute !important;
		margin: 0 0 0 10px !important;
	}
	[data-anchor="connect"] .wpcf7 form p:has(.wpcf7-submit) {
		position: relative;
	}
}
/* móviles muy bajos: aún más compacto */
@media (max-width: 767px) and (max-height: 620px) {
	[data-anchor="connect"] .wpcf7 input[type="text"],
	[data-anchor="connect"] .wpcf7 input[type="email"] { height: 30px !important; font-size: 16px !important; }
	[data-anchor="connect"] .wpcf7 textarea { height: 44px !important; font-size: 16px !important; }
	[data-anchor="connect"] .wpcf7 p { margin-bottom: 3px !important; }
	#grve-theme-wrapper [data-anchor="connect"] .wpcf7 .wpcf7-submit { padding: 5px 16px !important; font-size: 16px !important; }
	#grve-theme-wrapper [data-anchor="connect"] .wpcf7 form .wpcf7-response-output {
		margin-top: 6px !important;
		padding: 4px 8px !important;
		font-size: 12px !important;
	}
	[data-anchor="connect"] #socialLinks { margin-top: 6px; }
	[data-anchor="connect"] #socialLinks .grve-social ul { gap: 14px; }
	[data-anchor="connect"] #socialLinks .grve-social li a i { font-size: 22px !important; line-height: 1 !important; }
	[data-anchor="connect"] #socialLinks .grve-social li img { width: 26px; }
}

/* ---------- Banner del disco ---------- */

.lm-hero {
	position: relative;
	background-color: var(--lm-paper);
	background-image: var(--lm-paper-grain);
	border-bottom: 2px solid var(--lm-ink);
	overflow: hidden;
}
.lm-hero::after {
	/* colina ocre al pie del banner */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	background:
		repeating-linear-gradient(0deg, rgba(185, 133, 26, .25) 0 2px, transparent 2px 10px),
		var(--lm-ochre);
	clip-path: path('M0,80 C180,10 320,10 480,60 C640,110 760,20 980,40 C1200,60 1300,0 1600,30 L1600,400 L0,400 Z');
	border-top: 2px solid var(--lm-ink);
	z-index: 0;
}
.lm-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1170px;
	margin: 0 auto;
	padding: 56px 24px 64px;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: center;
}
.lm-kicker {
	font-family: var(--lm-hand-sc) !important;
	font-size: 20px;
	letter-spacing: 2px;
	margin: 0 0 4px;
	color: var(--lm-red) !important;
}
#grve-theme-wrapper .lm-title,
.lm-title {
	font-family: var(--lm-marker) !important;
	font-size: clamp(64px, 11vw, 150px) !important;
	line-height: .95 !important;
	margin: 0 !important;
	padding: 0;
}
.lm-title span {
	display: inline-block;
	-webkit-text-stroke: 3px var(--lm-ink);
}
.lm-title span:nth-child(odd) { transform: rotate(-2deg); }
.lm-title span:nth-child(even) { transform: translateY(4px) rotate(2deg); }
.lm-artist {
	font-family: var(--lm-hand-sc) !important;
	font-size: 28px !important;
	letter-spacing: 6px;
	margin: 10px 0 18px 6px;
}
.lm-claim {
	font-family: var(--lm-hand) !important;
	font-size: 22px !important;
	line-height: 1.35 !important;
	max-width: 30ch;
	margin: 0 0 26px;
}
.lm-btn {
	display: inline-block;
	text-decoration: none !important;
}
.lm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}
.lm-btn.lm-btn-spotify {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--lm-green) !important;
}
.lm-btn.lm-btn-spotify:hover {
	background: var(--lm-teal) !important;
}
.lm-btn.lm-btn-apple {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lm-btn-spotify svg,
.lm-btn-apple svg {
	flex: 0 0 auto;
}
.lm-btn-apple svg {
	margin-top: -3px; /* el logo de Apple pesa abajo; lo centra ópticamente */
}
.lm-hero-cover {
	margin: 0;
	transform: rotate(2.5deg);
}
.lm-hero-cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--lm-ink);
	box-shadow: 8px 10px 0 rgba(42, 36, 32, .25);
	background: #fff;
	padding: 10px;
}

/* ---------- Estantería de canciones ---------- */

.lm-shelf {
	background-color: var(--lm-plum);
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px);
	border-top: 3px solid var(--lm-ink);
	padding: 28px 16px 0;
	overflow-x: auto;
}
.lm-shelf-books {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1170px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	min-height: 230px;
	border-bottom: 10px solid var(--lm-ink);
}
.lm-book {
	flex: 0 0 auto;
	width: 46px;
	border: 2px solid var(--lm-ink);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: repeating-linear-gradient(0deg, transparent 0 14px, rgba(42, 36, 32, .15) 14px 16px);
}
.lm-book a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none !important;
	cursor: pointer;
}
.lm-book {
	transition: translate .18s ease, box-shadow .18s ease;
}
/* al pasar el ratón el libro "sale" un poco de la estantería */
.lm-book:hover,
.lm-book:focus-within {
	translate: 0 -14px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
}
.lm-book a:focus-visible {
	outline: 3px solid var(--lm-paper);
	outline-offset: 2px;
}
.lm-book span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--lm-hand-sc);
	font-size: 17px;
	letter-spacing: 1px;
	color: var(--lm-ink);
	white-space: nowrap;
	padding: 10px 0;
}
.lm-b0 { background-color: var(--lm-pink);   height: 200px; }
.lm-b1 { background-color: var(--lm-green);  height: 170px; width: 40px; }
.lm-b2 { background-color: var(--lm-cyan);   height: 215px; }
.lm-b3 { background-color: var(--lm-violet); height: 190px; width: 52px; }
.lm-b4 { background-color: var(--lm-red);    height: 160px; width: 38px; }
.lm-b5 { background-color: var(--lm-yellow); height: 205px; }
.lm-b6 { background-color: var(--lm-teal);   height: 180px; width: 42px; }
.lm-b7 { background-color: var(--lm-ochre);  height: 210px; width: 50px; }
.lm-book:nth-child(4n) { transform: rotate(-3deg); transform-origin: bottom left; margin-left: 6px; }

/* ---------- Secciones a pantalla completa de la portada ---------- */

/* El menú es fijo y se superpone a las secciones. El contenido va arriba y la-marne.js
   ajusta el padding de cada sección para que todos los títulos queden a la misma distancia
   del menú; este padding es solo el valor de partida mientras carga el script. */
/* lo que no quepa en una sección no se cuela en la de al lado (pasaba con el banner en móviles muy bajos) */
#grve-pilling-page > .grve-row-section {
	overflow: hidden;
}
#grve-pilling-page > .grve-row-section:not(.lm-section-hero) > .pp-tableCell {
	vertical-align: top !important;
	padding-top: calc(var(--lm-header, 70px) + 24px);
	padding-bottom: 12px;
}

.lm-section {
	padding: 0 !important;
}
.lm-section-hero,
.lm-section-hero .lm-hero {
	height: 100%;
	min-height: 100vh;
}
.lm-section-hero .lm-hero {
	display: flex;
	align-items: center;
	border-bottom: 0;
}
.lm-section-hero .lm-hero-inner {
	width: 100%;
	padding-top: 100px; /* deja sitio a la cabecera */
}
.lm-section-hero .lm-hero-cover img {
	max-height: 62vh;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}
.lm-section-shelf {
	background-color: var(--lm-plum) !important;
}
.lm-section-shelf .lm-shelf {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.lm-section-shelf .lm-shelf-books {
	width: 100%;
	min-height: 0;
}
.lm-section-shelf .lm-book { height: auto; }
.lm-section-shelf .lm-b0 { height: 300px; }
.lm-section-shelf .lm-b1 { height: 255px; }
.lm-section-shelf .lm-b2 { height: 320px; }
.lm-section-shelf .lm-b3 { height: 285px; }
.lm-section-shelf .lm-b4 { height: 240px; }
.lm-section-shelf .lm-b5 { height: 305px; }
.lm-section-shelf .lm-b6 { height: 270px; }
.lm-section-shelf .lm-b7 { height: 315px; }
.lm-section-shelf .lm-book { width: 58px; }
.lm-section-shelf .lm-book span { font-size: 22px; }
/* mismo estilo que los títulos de sección: letras de colores con trazo de tinta */
#grve-theme-wrapper .lm-shelf-title,
.lm-shelf-title {
	font-family: var(--lm-marker) !important;
	font-size: clamp(32px, 3.4vw, 50px) !important;
	line-height: 1.1 !important;
	letter-spacing: .5px !important;
	text-align: left;
	width: 100%;
	max-width: 1170px; /* el mismo ancho de contenedor que las demás secciones */
	margin: 0 auto 32px !important;
}
/* la misma olita amarilla que el resto de títulos */
.lm-shelf-title::after {
	content: '';
	display: block;
	width: 120px;
	height: 10px;
	margin: 8px 0 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6 C 25 2, 45 9, 65 5 S 105 3, 118 6' fill='none' stroke='%23e2a82a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

/* ---------- Galería: slider a pantalla completa ---------- */

/* el slider se coloca respecto a la sección entera, no a la columna de 1170px */
.miGaleria .grve-container,
.miGaleria .grve-row,
.miGaleria .grve-column,
.miGaleria .grve-column-wrapper {
	position: static !important;
}
.miGaleria .grve-title {
	position: relative;
	z-index: 3;
	pointer-events: none;
}
.lm-slider {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--lm-ink);
}
/* velo arriba para que el título se lea sobre cualquier foto */
.lm-slider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 55%;
	background: linear-gradient(rgba(42, 36, 32, .55), rgba(42, 36, 32, 0));
	z-index: 2;
	pointer-events: none;
}
.lm-slides {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	touch-action: pan-x pinch-zoom; /* el navegador solo desplaza en horizontal; el gesto vertical va a la página */
	cursor: grab;
	outline: none;
}
.lm-slides::-webkit-scrollbar {
	display: none;
}
.lm-slides.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.lm-slide {
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
#grve-theme-wrapper .lm-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	user-select: none;
	-webkit-user-drag: none;
}
/* Movedo da estilo a todos los <button> (fondo azul, relleno, posición), de ahí los !important */
#grve-theme-wrapper .lm-slider .lm-slider-arrow {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	z-index: 3;
	width: 54px !important;
	height: 54px !important;
	min-width: 0 !important;
	margin: -27px 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--lm-hand) !important;
	font-size: 44px !important;
	line-height: 1 !important;
	color: var(--lm-ink) !important;
	background: var(--lm-ochre-light) !important;
	border: 2px solid var(--lm-ink) !important;
	border-radius: 50% !important;
	box-shadow: 3px 3px 0 var(--lm-ink) !important;
	cursor: pointer;
	transition: transform .15s ease;
}
/* fotos verticales o casi cuadradas: enteras en el centro, con la misma foto desenfocada detrás */
.lm-slide-fit {
	position: relative;
	overflow: hidden;
}
.lm-slide-fit::before {
	content: '';
	position: absolute;
	inset: -40px;
	background: var(--lm-slide-bg) center / cover no-repeat;
	filter: blur(28px) brightness(.75);
}
#grve-theme-wrapper .lm-slide-fit img {
	position: relative;
	object-fit: contain;
}
.lm-slider-arrow span {
	margin-top: -6px;
}
#grve-theme-wrapper .lm-slider .lm-slider-arrow:hover {
	transform: scale(1.08);
}
#grve-theme-wrapper .lm-slider .lm-slider-arrow[disabled] {
	opacity: .35;
	cursor: default;
	transform: none;
}
#grve-theme-wrapper .lm-slider .lm-slider-prev { left: 24px !important; right: auto !important; }
#grve-theme-wrapper .lm-slider .lm-slider-next { right: 56px !important; left: auto !important; } /* deja sitio a los puntos de navegación de la página */
.lm-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
#grve-theme-wrapper .lm-slider .lm-slider-dot {
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--lm-ink) !important;
	border-radius: 50% !important;
	background: var(--lm-paper) !important;
	box-shadow: none !important;
	cursor: pointer;
}
#grve-theme-wrapper .lm-slider .lm-slider-dot.is-active {
	background: var(--lm-ochre) !important;
	transform: scale(1.3);
}

@media (max-width: 767px) {
	/* en el móvil la foto entera de ancho a ancho, sin recortarla por los lados */
	#grve-theme-wrapper .lm-slide img {
		object-fit: contain;
	}
	#grve-theme-wrapper .lm-slider .lm-slider-arrow {
		display: none !important; /* en el móvil se pasa con el dedo */
	}
}

@media (prefers-reduced-motion: reduce) {
	.lm-slides { scroll-behavior: auto; }
}

/* ---------- Pie ---------- */

#grve-footer,
#grve-footer .grve-footer-area,
#grve-footer .grve-footer-bar {
	background-color: var(--lm-ink) !important;
	color: var(--lm-paper) !important;
}
#grve-footer a {
	color: var(--lm-ochre-light) !important;
}

/* ---------- Móvil ---------- */

@media (max-width: 900px) {
	.lm-hero-inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 36px 16px 48px;
		text-align: center;
	}
	.lm-claim { margin-left: auto; margin-right: auto; }
	.lm-actions { justify-content: center; }
	/* en el móvil el banner entero (texto, botones y portada) tiene que caber en una pantalla */
	.lm-section-hero .lm-hero-inner { padding-top: calc(var(--lm-header, 60px) + 16px); padding-bottom: 24px; gap: 20px; }
	.lm-section-hero .lm-hero-cover img { max-height: 34vh; }
	.lm-hero-cover { max-width: 440px; margin: 0 auto; }
	.lm-shelf-books { justify-content: flex-start; min-height: 190px; }
}

/* móviles bajos (iPhone SE y parecidos): el banner más compacto para que la portada no se corte */
@media (max-width: 767px) and (max-height: 700px) {
	.lm-section-hero .lm-hero-inner { gap: 12px; padding-bottom: 12px; }
	#grve-theme-wrapper .lm-title { font-size: 54px !important; }
	.lm-kicker { font-size: 16px; }
	.lm-artist { font-size: 20px !important; margin: 4px 0 8px; }
	.lm-claim { font-size: 16px !important; margin-bottom: 12px; }
	.lm-actions { gap: 10px; }
	#grve-theme-wrapper .lm-actions .lm-btn { font-size: 16px !important; padding: 6px 14px !important; }
	.lm-section-hero .lm-hero-cover img { max-height: 28vh; }
	.lm-book span { font-size: 15px; }
}

/* Sobre mí en móvil: el texto tiene que caber en una pantalla, porque las secciones no hacen scroll */
@media (max-width: 767px) {
	[data-anchor="about"] .grve-empty-space {
		height: 0 !important;
	}
	.grve-section.grve-headings-light[data-anchor="about"] .grve-text p {
		font-size: calc(14px + var(--lm-about-plus, 0px)) !important;
		line-height: 1.42 !important;
		margin-bottom: 10px !important;
	}
	/* deja sitio a los puntos de navegación de la derecha */
	[data-anchor="about"] .grve-column-wrapper {
		padding-right: 26px !important;
	}
}

/* Sobre mí: la olita pegada al texto y la letra algo más grande para que se lea mejor.
   --lm-about-plus (0 a 3 px) lo elige la-marne.js: el mayor aumento con el que el texto sigue
   cabiendo en la pantalla sin mover los títulos de las demás secciones */
#grve-theme-wrapper [data-anchor="about"] .grve-element.grve-title {
	padding-bottom: 0;
	margin-bottom: 10px !important;
}
@media (min-width: 768px) {
	.grve-section.grve-headings-light[data-anchor="about"] .grve-text p {
		font-size: calc(17px + var(--lm-about-plus, 0px)) !important;
	}
}

/* Iconos sociales de Contáctame: cada uno con su ancho real y la misma separación
   (el de SoundCloud es más ancho que el hueco fijo de Movedo y se montaba sobre el de Spotify) */
#socialLinks .grve-social ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}
#socialLinks .grve-social li {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
#socialLinks .grve-social li a {
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#socialLinks .grve-social li img {
	width: 40px; /* el de TikTok es una imagen: lo igualamos al tamaño de los demás iconos */
	height: auto;
	display: block;
}

/* Contáctame en móvil: los iconos sociales van debajo del formulario en vez de encima del título */
@media (max-width: 767px) {
	#socialLinks {
		position: static !important;
		margin-top: 20px;
	}
	#socialLinks .grve-social ul {
		justify-content: flex-start;
	}
}

/* Discografía en móvil: los 4 discos en cuadrícula de 2x2 para que quepan en una pantalla */
@media (max-width: 767px) {
	[data-anchor="albums"] .grve-row,
	[data-anchor="albums"] .grve-column-wrapper {
		display: flex;
		flex-wrap: wrap;
	}
	[data-anchor="albums"] .grve-column-1-4 {
		width: 50% !important;
		float: left;
		padding: 0 8px !important;
		margin-bottom: 18px !important;
	}
	[data-anchor="albums"] .grve-column-1-4 .grve-image img {
		width: 100% !important;
		max-width: 150px;
		height: auto;
	}
	[data-anchor="albums"] .grve-column-1-4 .wpb_raw_html img {
		width: 62px !important;
		margin-left: 4px !important;
	}
}

/* Las canciones en el móvil: en vez de lomos de pie, una pila de libros tumbados con el título en
   horizontal para que se lea bien, cada uno girado sobre su centro entre -15º y 15º */
@media (max-width: 767px) {
	.lm-section-shelf .lm-shelf { padding-left: 16px; padding-right: 16px; overflow: hidden; }
	.lm-section-shelf .lm-shelf-books {
		position: relative; /* referencia para medir los libros desde la-marne.js */
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* la separación (--lm-pile-gap) y la inclinación (--lm-tilt) las ajusta la-marne.js para que
		   ningún título quede tapado y la pila quepa en la pantalla */
		gap: var(--lm-pile-gap, 14px);
		min-height: 0;
		border-bottom: 0;
	}
	.lm-section-shelf .lm-shelf-books .lm-book {
		width: auto !important; /* cada libro mide lo que su título más un margen */
		height: var(--lm-book-h, 38px) !important; /* el grosor también lo ajusta la-marne.js en móviles bajos */
		margin: 0 !important;
		border: 2px solid var(--lm-ink);
		border-radius: 3px;
		transform-origin: center;
		/* las rayas del lomo, ahora en vertical porque el libro está tumbado */
		background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(42, 36, 32, .15) 14px 16px);
	}
	.lm-section-shelf .lm-shelf-books .lm-book span {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: calc(var(--lm-book-h, 38px) * .47);
		letter-spacing: .5px;
		padding: 0 22px;
	}
	/* ancho, desplazamiento y giro de cada libro de la pila */
	.lm-section-shelf .lm-book:nth-child(1)  { min-width: 52%; transform: translateX(-10%) rotate(calc(-6deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(2)  { min-width: 56%; transform: translateX(9%) rotate(calc(4deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(3)  { min-width: 62%; transform: translateX(-6%) rotate(calc(-11deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(4)  { min-width: 48%; transform: translateX(12%) rotate(calc(8deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(5)  { min-width: 64%; transform: translateX(-8%) rotate(calc(-3deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(6)  { min-width: 62%; transform: translateX(8%) rotate(calc(13deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(7)  { min-width: 64%; transform: translateX(-7%) rotate(calc(-9deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(8)  { min-width: 52%; transform: translateX(11%) rotate(calc(2deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(9)  { min-width: 60%; transform: translateX(-9%) rotate(calc(-15deg * var(--lm-tilt, 1))); }
	.lm-section-shelf .lm-book:nth-child(10) { min-width: 56%; transform: translateX(8%) rotate(calc(11deg * var(--lm-tilt, 1))); }
	/* al tocar un libro sale un poco de la pila, como en el escritorio */
	.lm-section-shelf .lm-shelf-books .lm-book:hover,
	.lm-section-shelf .lm-shelf-books .lm-book:focus-within {
		translate: 10px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grve-btn, .wpcf7-submit, .lm-btn, .lm-book { transition: none; }
}