/* Hero */
/* Ajuste 2026-08-30: el contenido estaba anclado abajo (`flex-end`) con la
 * foto recortada mostrando bastante techo oscuro y vacío arriba — el título
 * quedaba muy pegado al borde inferior. Se centra verticalmente el bloque de
 * texto y se corrige el recorte de la foto para que muestre más de la banda
 * y menos techo (object-position sube de 25% a 42%, recorta más arriba). */
.krh-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.krh-hero__media {
	position: absolute;
	inset: 0;
}
.krh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
.krh-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 7, 19, 0.55) 0%, rgba(5, 7, 19, 0.75) 55%, var(--ink) 100%);
}
.krh-hero__content {
	position: relative;
	padding-block: clamp(3rem, 6rem, 8rem);
	max-width: 60rem;
}
.krh-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	font-size: clamp(3rem, 2rem + 6vw, 6.5rem);
	color: var(--paper);
	margin: 0 0 1.25rem;
}
.krh-hero__tagline {
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
	color: var(--paper-soft);
	max-width: 34rem;
	margin: 0 0 2rem;
	line-height: 1.6;
}
.krh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.krh-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--paper);
	animation: krh-bounce 2s ease-in-out infinite;
}
@keyframes krh-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
	.krh-hero__scroll {
		animation: none;
	}
}

/* Sobre Krohma — el ojo de marca como motivo de fondo, grande y muy sutil
 * (no protagonista, ver feedback del cliente sobre las referencias de
 * Instagram): solo un detalle atmosférico detrás del texto. */
.krh-bio {
	position: relative;
	overflow: hidden;
}
.krh-bio__watermark {
	position: absolute;
	top: 50%;
	right: -8%;
	transform: translateY(-50%);
	width: min(45rem, 70vw);
	height: auto;
	color: var(--accent);
	opacity: 0.07;
	pointer-events: none;
	z-index: 0;
}
.krh-bio__watermark svg {
	width: 100%;
	height: auto;
}
.krh-bio__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
}
.krh-bio__text p {
	margin: 0 0 1.25rem;
}
/* Columna derecha de "Sobre Krohma": las influencias ya están en el párrafo
 * de la izquierda (era redundante repetirlas acá) — en su lugar, dos fotos
 * reales de shows en vivo compuestas en collage (una grande + una más chica
 * superpuesta), mismo tratamiento fotográfico (object-fit + grayscale→color
 * al hover) que Integrantes/Galería más abajo. */
.krh-bio__photos {
	position: relative;
	padding-left: 2.5rem;
	padding-bottom: 3rem;
}
.krh-bio__photo {
	overflow: hidden;
	border: 1px solid rgba(242, 238, 248, 0.08);
}
.krh-bio__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.25);
	transition: filter 0.3s ease, transform 0.3s ease;
}
.krh-bio__photo:hover img {
	filter: grayscale(0);
	transform: scale(1.02);
}
.krh-bio__photo--a {
	aspect-ratio: 4 / 5;
}
.krh-bio__photo--b {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 58%;
	aspect-ratio: 3 / 4;
	box-shadow: 0 1.5rem 3rem rgba(5, 7, 19, 0.55);
}

/* Integrantes — banda semitransparente (no color plano) para que la
 * nebulosa de fondo del body se siga viendo detrás, dando ritmo sin cortar
 * la sensación de universo continuo. */
.krh-members {
	background: rgba(29, 33, 59, 0.55);
}
.krh-members__grid {
	/* margin-top only: es la misma clase .krh-container la que centra este
	 * elemento con margin-inline:auto — un `margin` en shorthand acá pisaría
	 * ese auto y pegaría la grilla al borde izquierdo. */
	list-style: none;
	margin-top: 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
}
.krh-members__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
/* Fotos reales de shows en vivo, cada una con su propio tamaño/encuadre
 * original — se normalizan a una misma proporción con object-fit en vez de
 * recortarlas a mano, mismo tratamiento que .krh-gallery__item más abajo. */
.krh-members__photo {
	overflow: hidden;
	border: 1px solid rgba(242, 238, 248, 0.08);
}
.krh-members__photo img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: grayscale(0.15);
	transition: filter 0.3s ease, transform 0.3s ease;
}
.krh-members__card:hover .krh-members__photo img {
	filter: grayscale(0);
	transform: scale(1.02);
}
.krh-members__name {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	color: var(--paper);
}
.krh-members__role {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--accent-orchid);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Música */
.krh-music__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}
/* Tarjetas con textura (motivo del ojo muy sutil de fondo, mismo lenguaje
 * que el watermark de "Sobre Krohma"), elevación al hover y links propios
 * más compactos en vez de los .krh-btn genéricos de dos líneas — buscando
 * que se sienta más premium/editorial que rectángulos planos sin vida. */
.krh-music__album {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-indigo) 160%);
	border: 1px solid rgba(242, 238, 248, 0.08);
	padding: 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.krh-music__album:hover {
	transform: translateY(-6px);
	box-shadow: 0 1.5rem 3rem rgba(5, 7, 19, 0.5);
	border-color: rgba(167, 139, 250, 0.35);
}
.krh-music__watermark {
	position: absolute;
	top: -1.75rem;
	right: -1.75rem;
	width: 8rem;
	height: 8rem;
	color: var(--accent-orchid);
	opacity: 0.08;
	pointer-events: none;
}
.krh-music__watermark svg {
	width: 100%;
	height: 100%;
}
.krh-music__album--upcoming {
	border-color: rgba(167, 139, 250, 0.35);
	justify-content: center;
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-magenta) 180%);
}
.krh-music__badge {
	position: relative;
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent-orchid);
	border: 1px solid var(--accent-orchid);
	padding: 0.35rem 0.9rem;
}
.krh-music__title {
	position: relative;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--paper);
	margin: 0;
}
.krh-music__teaser {
	position: relative;
	margin: 0;
}
.krh-music__links {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.krh-music__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--paper-soft);
	text-decoration: none;
	padding: 0.6rem 1.1rem;
	border: 1px solid rgba(242, 238, 248, 0.16);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.krh-music__link:hover {
	border-color: var(--accent-bright);
	color: var(--paper);
	background: rgba(143, 77, 255, 0.12);
}

/* En vivo */
.krh-live {
	background: rgba(29, 33, 59, 0.55);
}
.krh-live__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(2rem, 4vw, 5rem);
	align-items: center;
}
/* Pilares de la experiencia en vivo — palabras/conceptos (vacío, muerte,
 * samsara) en vez de datos de un show puntual, pensados como un ciclo
 * (vacío → muerte → samsara/renacer) en vez de una lista plana de hechos. */
.krh-live__pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.krh-live__pillar {
	border-left: 2px solid var(--accent-orchid);
	padding-left: 1.5rem;
}
.krh-live__pillar-word {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
	color: var(--accent-orchid);
	display: block;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}
.krh-live__pillar-desc {
	display: block;
	font-family: var(--font-body);
	color: var(--paper-soft);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 26rem;
}

/* Galería — antes era una grilla de 3x2 (6 fotos en 2 filas) que obligaba a
 * hacer scroll para ver la sección completa; ahora es una sola fila que se
 * desliza horizontalmente para que la sección quepa en una pantalla y a la
 * vez se pueda sumar más fotos a futuro sin que la sección crezca en alto.
 * Sin scrollbar visible (al usuario no le gustaba) — la navegación es con
 * los botones circulares + scroll-behavior:smooth para la transición
 * animada; el swipe/drag táctil sigue funcionando igual, solo que sin la
 * barra a la vista. */
.krh-gallery__carousel {
	position: relative;
}
.krh-gallery__scroller {
	margin-top: 2rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-left: clamp(1.25rem, 4vw, 3rem);
	scrollbar-width: none;
}
.krh-gallery__scroller::-webkit-scrollbar {
	display: none;
}
.krh-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.75;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
	transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.krh-gallery__nav .krh-icon {
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
}
.krh-gallery__nav:hover {
	opacity: 1;
	color: var(--accent-bright);
	transform: translateY(-50%) scale(1.15);
}
.krh-gallery__nav--prev {
	left: 0.25rem;
	transform: translateY(-50%) scaleX(-1);
}
.krh-gallery__nav--prev:hover {
	transform: translateY(-50%) scaleX(-1) scale(1.15);
}
.krh-gallery__nav--next {
	right: 0.25rem;
}
.krh-gallery__track {
	display: flex;
	gap: 0.75rem;
	width: max-content;
}
.krh-gallery__item {
	flex: 0 0 auto;
	width: clamp(11rem, 26vw, 18rem);
	scroll-snap-align: start;
	overflow: hidden;
}
.krh-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: grayscale(0.15);
	transition: filter 0.3s ease, transform 0.3s ease;
}
.krh-gallery__item:hover img {
	filter: grayscale(0);
	transform: scale(1.02);
}
.krh-gallery__item {
	border: none;
	background: none;
	padding: 0;
	cursor: zoom-in;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Pestañas por tocata (2026-08-24) — la galería pasó de un solo carrusel de
 * 6 fotos mezcladas a tres tocatas curadas (Santa Juana / La Esquina Rosada /
 * Kutral Ko), cada una con su propio carrusel. Solo un panel visible a la
 * vez; cambiar de pestaña no recarga nada, solo alterna la clase .is-active
 * (ver home.js). */
.krh-gallery-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 1.5rem;
}
.krh-gallery-tab {
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.4rem 0.1rem;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
/* Por si algún navegador igual dispara la selección nativa (::selection es
 * morado en todo el sitio, ver header.css) — se anula puntualmente acá para
 * que un clic/doble clic en la pestaña no se vea como texto resaltado. */
.krh-gallery-tab::selection {
	background: transparent;
	color: inherit;
}
.krh-gallery-tab::-moz-selection {
	background: transparent;
	color: inherit;
}
.krh-gallery-tab:hover {
	color: var(--paper);
}
.krh-gallery-tab.is-active {
	color: var(--accent-bright);
	border-bottom-color: var(--accent-bright);
}
.krh-gallery__panel {
	display: none;
}
.krh-gallery__panel.is-active {
	display: block;
}

/* Lightbox — clic en cualquier foto de la galería la abre en grande sobre
 * el resto de la página, sin salir del home (mismo criterio "todo en una
 * sola página" del sitio). Reusa el mismo ícono de flecha de la galería,
 * rotado igual que .krh-gallery__nav--prev. */
.krh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(5, 7, 19, 0.92);
}
.krh-lightbox.is-active {
	display: flex;
}
.krh-lightbox__img {
	max-width: min(90vw, 1200px);
	max-height: 86vh;
	width: auto;
	height: auto;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
}
.krh-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--paper);
	background: none;
	border: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.krh-lightbox__close:hover {
	opacity: 1;
	color: var(--accent-bright);
}
.krh-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--paper);
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.krh-lightbox__nav .krh-icon {
	width: 2.25rem;
	height: 2.25rem;
}
.krh-lightbox__nav:hover {
	opacity: 1;
	color: var(--accent-bright);
}
.krh-lightbox__nav--prev {
	left: 1rem;
	transform: translateY(-50%) scaleX(-1);
}
.krh-lightbox__nav--prev:hover {
	transform: translateY(-50%) scaleX(-1) scale(1.15);
}
.krh-lightbox__nav--next {
	right: 1rem;
}
.krh-lightbox__nav--next:hover {
	transform: translateY(-50%) scale(1.15);
}

/* Visuales (2026-08-24) — video mudo de ~1080p/2:46/98MB (llegó junto a las
 * fotos de shows, ver PROYECTO.md 1.10). Ocupa todo el ancho del contenedor
 * (antes tenía un tope de 50rem sin centrar, quedaba pegado a la izquierda
 * con un espacio muerto grande a la derecha — reportado por el usuario).
 * Autoplay muted+loop (2026-08-24, ajuste): el usuario pidió que se
 * reproduzca de inmediato en vez de exigir clic — como no tiene pista de
 * audio no hay nada que silenciar en la práctica, pero igual se necesita el
 * atributo `muted` porque los navegadores solo permiten autoplay si el
 * elemento lo trae. Ojo: esto vuelve a descargar los ~98MB en cada visita a
 * la sección (se había evitado eso a propósito con la versión bajo demanda,
 * ver PROYECTO.md 1.12) — el usuario lo pidió así con ese trade-off ya
 * planteado. */
.krh-visuales__intro {
	max-width: 34rem;
	margin-top: 1rem;
	color: var(--paper-soft);
	line-height: 1.7;
}
.krh-visuales__player {
	margin-top: 2rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(242, 238, 248, 0.08);
}
.krh-visuales__video {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
}

/* Rifa de la polera nueva (2026-08-30) — mismo lenguaje "premium" que Música/
 * Tienda: watermark del ojo de fondo (igual que Sobre Krohma/Contacto), y la
 * tarjeta de "cómo pagar" con el mismo degradado ink-soft→nebula-magenta que
 * .krh-music__album/.krh-shop-teaser__item. Las fotos son todas tomas macro
 * del estampado (no hay foto completa de la polera todavía, ver
 * PROYECTO.md), así que la más "completa" hace de hero grande y el resto
 * arma una grilla de detalle al lado — mismo tratamiento grayscale→color al
 * hover y lightbox que el resto de las fotos del sitio (.krh-gallery__item,
 * reutilizada tal cual). */
.krh-rifa {
	position: relative;
	overflow: hidden;
}
.krh-rifa__watermark {
	position: absolute;
	top: 50%;
	left: -10%;
	transform: translateY(-50%);
	width: min(40rem, 65vw);
	height: auto;
	color: var(--accent);
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
}
.krh-rifa__watermark svg {
	width: 100%;
	height: auto;
}
/* Ajuste 2026-08-30 (cuarta ronda): con el hero+grilla ya convertidos en un
 * carrusel corto (ver más abajo), el usuario notó que la columna de texto
 * (título+párrafo+facts+tarjeta de pago+botones, todo apilado) seguía siendo
 * mucho más larga que el carrusel — la columna derecha quedaba vacía debajo
 * de las fotos. Se partió la sección en dos filas: arriba, título+párrafo
 * junto al carrusel (.krh-rifa__top, la única parte que necesita ser
 * "columna de texto / columna de foto"); abajo, a todo el ancho del
 * contenedor, los datos de la rifa + cómo pagar + los botones
 * (.krh-rifa__details) — ya no compiten en altura con un carrusel angosto
 * al lado. */
.krh-rifa__top {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: center;
}
/* Bug de "blowout" de grid: .krh-rifa__media (el carrusel) no tenía
 * min-width propio, así que su mínimo de contenido se calculaba con el
 * ancho SIN scrollear de las 7 fotos en fila — eso empujaba la columna de
 * texto a un ancho mínimo (~300px, el título se partía casi palabra por
 * palabra). El scroller de adentro ya maneja su propio overflow, pero eso no
 * alcanza si el contenedor del grid-item no puede encogerse; min-width:0 es
 * el fix estándar para que el carrusel respete el 1fr que le toca y el
 * texto recupere su ancho real (ver PROYECTO.md 1.16). */
.krh-rifa__media {
	min-width: 0;
}
.krh-rifa__intro p {
	margin: 0 0 1.25rem;
}
.krh-rifa__intro p:last-child {
	margin-bottom: 0;
}
.krh-rifa__details {
	position: relative;
	z-index: 1;
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-areas:
		"facts pay"
		"actions pay";
	gap: 1.5rem 3rem;
	align-items: start;
}
/* Los 4 "facts" antes eran una lista apilada a lo ancho completo (cada uno
 * label+valor en su propia fila), muy alta al lado de una columna de foto
 * mucho más corta — ahora viven en la fila de abajo junto al resto de los
 * datos, pero se mantiene la grilla de 2 columnas porque igual conviene: se
 * lee más rápido que una lista larga de una sola columna. */
.krh-rifa__facts {
	grid-area: facts;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
}
.krh-rifa__actions {
	grid-area: actions;
	align-self: start;
}
.krh-rifa__facts li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-left: 2px solid var(--accent-orchid);
	padding-left: 1rem;
}
.krh-rifa__fact-label {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-orchid);
}
.krh-rifa__fact-value {
	font-family: var(--font-body);
	color: var(--paper-soft);
	line-height: 1.5;
}
.krh-rifa__pay {
	grid-area: pay;
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-magenta) 180%);
	border: 1px solid rgba(242, 238, 248, 0.08);
	padding: 1.5rem 1.75rem;
}
.krh-rifa__pay-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--paper);
	margin: 0 0 0.75rem;
}
.krh-rifa__pay p {
	margin: 0 0 1.25rem;
}
.krh-rifa__account {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
}
.krh-rifa__account dt {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 0 0.2rem;
}
.krh-rifa__account dd {
	font-family: var(--font-body);
	color: var(--paper);
	margin: 0;
}
.krh-rifa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
/* Ajuste 2026-08-30 (sesión siguiente): la primera versión tenía una foto
 * "hero" grande (proporción 4:5, ancho completo de la columna) + una grilla
 * de 6 miniaturas debajo — quedaba desproporcionado ("las fotos están muy
 * hacia abajo") y con tamaños dispares entre el hero y las miniaturas. Se
 * reemplazó por un solo carrusel horizontal (.krh-carousel-standalone),
 * mismo componente que la galería "En vivo" (scroll-snap + botones
 * prev/next, sin scrollbar) — todas las fotos quedan al mismo tamaño y la
 * sección baja considerablemente de alto al no apilar hero + grilla. No
 * hace falta CSS nuevo para el carrusel en sí: .krh-gallery__carousel/
 * __scroller/__track/__item ya están definidas arriba y no dependen de estar
 * dentro de .krh-gallery__panel. El video que iba debajo se sacó a pedido
 * del usuario (mismo día) — .krh-rifa__video ya no existe en el markup. */
/* Ajuste 2026-08-30 (sexta ronda): el usuario pidió ver solo 2 fotos a la vez
 * (no 3, como salía con el ancho clamp(11rem,26vw,18rem) que usa "En vivo") y
 * que avancen cada 3s en vez de 4. El ancho por foto NO se resuelve acá en
 * CSS — se probó `width: calc(50% - gap)` pero .krh-gallery__track mide
 * `width: max-content`, y un ancho porcentual sobre un contenedor cuyo ancho
 * depende de su propio contenido es circular: el navegador termina usando el
 * tamaño intrínseco de la imagen (fotos gigantes, solo una entraba en
 * pantalla — reportado por el usuario). Se resuelve en `home.js`
 * (`data-visible-count`/`data-autoplay-delay` en front-page.php), midiendo
 * el ancho real del scroller y fijando un ancho en píxeles por foto. */

/* Tienda teaser — se pone a menos distancia de la galería (ver
 * .krh-shop-teaser padding-top más abajo) y las tarjetas pasan de
 * rectángulos planos a tener el mismo lenguaje "premium" que .krh-music__album
 * (degradado sutil, watermark del ojo, elevación + sombra al hover). Nombre
 * del producto a una sola línea (con elipsis si es más largo) para que las
 * tarjetas queden siempre a la misma altura sin importar cuántos caracteres
 * tenga cada producto. */
.krh-shop-teaser__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 18rem));
	gap: 1.5rem;
	margin-top: 2rem;
}
.krh-shop-teaser__item {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-indigo) 160%);
	border: 1px solid rgba(242, 238, 248, 0.08);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.krh-shop-teaser__item:nth-child(2) {
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-magenta) 160%);
}
.krh-shop-teaser__item:hover {
	transform: translateY(-6px);
	box-shadow: 0 1.5rem 3rem rgba(5, 7, 19, 0.5);
	border-color: rgba(167, 139, 250, 0.35);
}
.krh-shop-teaser__watermark {
	position: absolute;
	top: -1.75rem;
	right: -1.75rem;
	width: 8rem;
	height: 8rem;
	color: var(--accent-orchid);
	opacity: 0.08;
	pointer-events: none;
}
.krh-shop-teaser__watermark svg {
	width: 100%;
	height: 100%;
}
.krh-shop-teaser__item img {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.krh-shop-teaser__name {
	position: relative;
	font-family: var(--font-display);
	color: var(--paper);
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.krh-shop-teaser__price {
	position: relative;
	font-family: var(--font-body);
	color: var(--accent-orchid);
	font-weight: 600;
}
.krh-shop-teaser__cta {
	margin-top: 2.5rem;
}

/* Contacto — cierra el sitio con el mismo lenguaje "premium" que Música/
 * Tienda (tarjetas con degradado + elevación al hover) en vez de simples
 * botones ghost en fila; el ojo de marca vuelve como watermark grande y
 * centrado (bookend con el de "Sobre Krohma", que lo usa recortado a la
 * derecha) para cerrar el recorrido visual. */
.krh-contact {
	position: relative;
	overflow: hidden;
}
.krh-contact__watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(40rem, 80vw);
	height: auto;
	color: var(--accent);
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}
.krh-contact__watermark svg {
	width: 100%;
	height: auto;
}
.krh-contact__inner {
	position: relative;
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}
.krh-contact__inner p {
	margin: 0 0 2.5rem;
}
.krh-contact__links {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 1.25rem;
}
.krh-contact__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	flex: 1 1 0;
	min-width: 0;
	max-width: 13rem;
	padding: 2rem 1.25rem;
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-indigo) 160%);
	border: 1px solid rgba(242, 238, 248, 0.08);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.krh-contact__link:nth-child(2) {
	background: linear-gradient(160deg, var(--ink-soft) 0%, var(--nebula-magenta) 160%);
}
.krh-contact__link:hover {
	transform: translateY(-6px);
	box-shadow: 0 1.5rem 3rem rgba(5, 7, 19, 0.5);
	border-color: rgba(167, 139, 250, 0.35);
}
.krh-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--accent-orchid);
	color: var(--accent-orchid);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.krh-contact__icon .krh-icon {
	width: 1.4rem;
	height: 1.4rem;
	flex-shrink: 0;
}
.krh-contact__link:hover .krh-contact__icon {
	color: var(--accent-bright);
	border-color: var(--accent-bright);
}
.krh-contact__label {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--paper-soft);
	word-break: break-word;
	transition: color 0.2s ease;
}
.krh-contact__link:hover .krh-contact__label {
	color: var(--paper);
}

@media (max-width: 56rem) {
	.krh-bio__grid,
	.krh-live__grid,
	.krh-rifa__top {
		grid-template-columns: 1fr;
	}
	.krh-rifa__details {
		grid-template-columns: 1fr;
		grid-template-areas:
			"facts"
			"pay"
			"actions";
	}
	.krh-music__grid {
		grid-template-columns: 1fr 1fr;
	}
	.krh-members__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 30rem) {
	.krh-music__grid {
		grid-template-columns: 1fr;
	}
	.krh-rifa__facts,
	.krh-rifa__account {
		grid-template-columns: 1fr;
	}
	.krh-contact__links {
		flex-wrap: wrap;
	}
	.krh-contact__link {
		flex: 1 1 8rem;
	}
}