/* Variante B — 世界観. Va encima de style.css.
   Idea (de pannomimi): la web es un mundo dibujado alrededor de sus fotos. Todo sale de
   su material oficial: emblema y wordmark de los goods, su chibi, la paleta menta/dorado
   y los destellos turquesa. La foto nunca lleva nada encima: la decoración la enmarca. */

:root {
	--paper: #fbf8f1;
	--frame: #6b4c33; /* línea de marco: marrón dorado oscuro, 9:1 sobre el papel */
	--frame-soft: #c9b79f;
	--ribbon: #ddefe5;
	--scallop: #cfe8da;
	--kana: "Klee One", "Zen Maru Gothic", sans-serif;
}

body.v-b {
	background:
		linear-gradient(118deg, transparent 0 22%, rgb(153 205 176 / 0.13) 22% 34%, transparent 34% 66%, rgb(194 181 160 / 0.16) 66% 76%, transparent 76%) fixed,
		var(--paper);
}
.v-b main, .v-b .page { background: transparent; }

/* ---------- barra: siempre sobre papel ---------- */
.v-b .bar { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.v-b .bar.solid, .v-b:not(.home) .bar { background: rgb(251 248 241 / 0.94); border-bottom-color: transparent; backdrop-filter: blur(8px); }
.v-b .menu { background: rgb(251 248 241 / 0.98); }

/* ---------- utilidades de dibujo ---------- */
/* destello de cuatro puntas, como los del wordmark */
.hb-spark, .v-b .spark {
	position: absolute; width: 22px; height: 22px; background: var(--sparkle);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

/* ---------- PICK UP: banda festoneada, como una tira de película ---------- */
.v-b .strip {
	position: relative; margin-top: 40px; padding: 30px 0 26px; background: var(--ribbon);
	box-shadow: inset 0 6px 0 -4px var(--frame), inset 0 -6px 0 -4px var(--frame);
}
.v-b .strip::before, .v-b .strip::after {
	content: ""; position: absolute; left: 0; right: 0; height: 16px;
	background: radial-gradient(circle at 50% 100%, var(--scallop) 68%, transparent 70%) 0 0 / 32px 16px repeat-x;
}
.v-b .strip::before { top: -16px; }
.v-b .strip::after { bottom: -16px; transform: scaleY(-1); }
.v-b .bn { border: 4px solid #fff; outline: 1.5px solid var(--frame); outline-offset: 3px; border-radius: 2px; box-shadow: none; }

/* ---------- títulos: cinta con el japonés, placa con el inglés, algo asomando encima ---------- */
.v-b .head { position: relative; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 34px; padding-top: 64px; }
.v-b .head::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 76px; height: 60px; background: url(/img/emblem.webp) center / contain no-repeat;
}
.v-b #news .head::before, .v-b #profile .head::before, .v-b #fanclub .head::before, .v-b #first .head::before {
	background-image: url(/img/chibi-cut.webp); width: 92px; height: 92px; top: -30px;
}
.v-b h2 { flex-direction: column; align-items: center; gap: 0; }
.v-b h2 .clover { display: none; }
.v-b h2 span {
	order: 1; position: relative; padding: 6px 64px 8px; background: var(--ribbon); color: var(--ink);
	font-family: var(--kana); font-size: 30px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3;
	clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}
.v-b h2 b {
	order: 2; margin-top: -4px; padding: 2px 22px 3px; background: var(--frame); color: #fff;
	-webkit-background-clip: border-box; background-clip: border-box;
	font: 700 12px/1.6 "Zen Maru Gothic", sans-serif; font-style: normal; letter-spacing: 0.24em;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
.v-b .more-link { margin-top: 2px; background: #fff; }

/* ---------- tarjetas de papel con doble marco ---------- */
.v-b .news, .v-b #schedule .events, .v-b .fc, .v-b .first li, .v-b .facts, .v-b .hist {
	position: relative; background: #fff; border: 2px solid var(--frame); border-radius: 2px;
	box-shadow: 9px 9px 0 -2px var(--paper), 9px 9px 0 0 var(--frame-soft);
}
.v-b .news, .v-b #schedule .events { padding: 6px 22px; }
.v-b .ev.next { border-radius: 2px; }
.v-b .fc { background: #fff; }
.v-b .first li { background: #fff; }
.v-b .facts { padding: 4px 22px; margin-top: 28px; }
.v-b .hist { padding: 24px 22px 4px 40px; border-left-width: 2px; }

/* fotos y portadas con marco blanco */
.v-b .jk img, .v-b .yt, .v-b .first-photo { border: 4px solid #fff; outline: 1.5px solid var(--frame); border-radius: 2px; box-shadow: none; }
/* foto de perfil en arco, como la ficha de pannomimi */
.v-b .pf-photo { border-radius: 999px 999px 4px 4px; border: 3px solid var(--frame); padding: 8px; background: #fff; }

/* ---------- pie festoneado ---------- */
.v-b footer { position: relative; background: #efe6d8; margin-top: 90px; }
.v-b footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
	background: radial-gradient(circle at 50% 100%, #efe6d8 68%, transparent 70%) 0 0 / 32px 16px repeat-x;
}
.v-b .foot-contact { border: 2px solid var(--frame); border-radius: 2px; }

@media (min-width: 960px) {
	.v-b .head { margin-bottom: 44px; }
	.v-b h2 span { font-size: 38px; }
	.v-b .more-link { position: absolute; right: 0; bottom: 6px; }
	.v-b .news { padding: 10px 32px; }
	.v-b #schedule .events { padding: 10px 32px; }
	.v-b .hist { padding: 28px 32px 8px; }
	.v-b .hist > li { margin-left: 6px; }
}

/* ---------- sus dibujos: cada sección tiene el suyo asomando sobre el título ---------- */
.v-b #news .head::before, .v-b #profile .head::before { background-image: url(/img/chibi-cut.webp); }
.v-b #schedule .head::before, .v-b #first .head::before {
	background-image: url(/img/chibi-guitar.webp); width: 84px; height: 104px; top: -44px;
}
.v-b #fanclub .head::before {
	background-image: url(/img/dogs-uhhd.webp); width: 104px; height: 104px; top: -42px;
}
.v-b #schedule .head, .v-b #first .head, .v-b #fanclub .head { padding-top: 72px; }
/* en el bloque del fan club (UHHD) van los perros en vez del chibi */
.v-b .fc-chibi { content: url(/img/dogs-uhhd.webp); mix-blend-mode: normal; transform: rotate(4deg); }
@media (min-width: 960px) { .v-b .fc-chibi { transform: translateX(-50%) rotate(4deg); width: 190px; bottom: 6px; } }
.v-b .fc-chibi { content: url(/img/chibi-cut.webp); transform: none; }
@media (min-width: 960px) { .v-b .fc-chibi { transform: translateX(-50%); } }


/* ================= HERO B (como pannomimi) =================
   Tres marcos iguales 16:10 en fila: izquierdo arriba, central, derecho abajo, cortados
   por los bordes de la pantalla. Rotan de posición cada 5,5 s y flotan un poco. */
.v-b .hb {
	--cw: 78vw; --gap: 16px; --ch: calc(var(--cw) * 0.625);
	position: relative; max-width: none; overflow: hidden; background: none;
	display: flex; flex-direction: column; align-items: center;
	padding: calc(var(--bar) + 22px) 0 26px;
}
@media (min-width: 960px) {
	.v-b .hb {
		--cw: min(44vw, calc((100svh - 260px) / 0.625 / 1.36), 980px); --gap: 44px;
		height: 100vh; height: 100svh; min-height: 600px; justify-content: center; padding-bottom: 20px;
	}
}

/* fondo: cintas suaves y luces desenfocadas que derivan despacio */
.hb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hb-ribbon { position: absolute; left: 0; right: 0; }
.hb-ribbon.r1 { top: 34%; height: 11%; background: linear-gradient(90deg, rgb(221 239 229 / 0.9), rgb(221 239 229 / 0.5)); }
.hb-ribbon.r2 { top: 66%; height: 7%; background: linear-gradient(90deg, rgb(194 181 160 / 0.18), rgb(194 181 160 / 0.32)); }
.hb-light { position: absolute; border-radius: 50%; filter: blur(34px); opacity: 0.5; animation: drift 22s ease-in-out infinite alternate; }
.hb-light.l1 { width: 220px; height: 220px; left: 6%; top: 12%; background: #bfe6d3; }
.hb-light.l2 { width: 160px; height: 160px; left: 44%; top: 70%; background: #e9d6bf; animation-duration: 28s; }
.hb-light.l3 { width: 260px; height: 260px; right: 4%; top: 6%; background: #c7ece8; animation-duration: 25s; animation-delay: -6s; }
.hb-light.l4 { width: 120px; height: 120px; left: 26%; top: 46%; background: #f3e3c8; animation-duration: 19s; }
.hb-light.l5 { width: 180px; height: 180px; right: 22%; top: 58%; background: #bfe6d3; animation-duration: 31s; animation-delay: -12s; }
.hb-light.l6 { width: 90px; height: 90px; left: 62%; top: 16%; background: #fff3d9; opacity: 0.8; animation-duration: 17s; }
.hb-light.l7 { width: 70px; height: 70px; left: 14%; top: 78%; background: #c7ece8; opacity: 0.7; animation-duration: 21s; animation-delay: -4s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -24px) scale(1.12); } 100% { transform: translate(-30px, 18px) scale(0.92); } }

/* escenario y marcos */
.hb-stage { position: relative; z-index: 1; width: 100%; height: calc(var(--ch) * 1.36); }
.hb-card {
	position: absolute; left: 50%; top: 0; margin: 0; width: var(--cw); aspect-ratio: 16 / 10;
	transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}
.hb-card.is-c { z-index: 2; transform: translate(-50%, calc(var(--ch) * 0.18)); }
.hb-card.is-l { z-index: 1; transform: translate(calc(-150% - var(--gap)), 0); }
.hb-card.is-r { z-index: 1; transform: translate(calc(50% + var(--gap)), calc(var(--ch) * 0.36)); }
.hb-float {
	width: 100%; height: 100%; padding: 7px; background: #fff; border: 5px solid var(--frame);
	animation: float 6s ease-in-out infinite;
}
.hb-card[data-i="1"] .hb-float { animation-delay: -2s; }
.hb-card[data-i="2"] .hb-float { animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hb-float img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* adornos del marco central (fijos, no rotan con las fotos) */
.hb-deco {
	position: absolute; left: 50%; top: 0; z-index: 3; width: var(--cw); height: var(--ch);
	transform: translate(-50%, calc(var(--ch) * 0.18)); pointer-events: none;
}
.hb-corner { position: absolute; width: 74px; height: 4px; background: var(--frame); border-radius: 2px; }
.hb-corner.tl { left: -30px; top: 18px; transform: rotate(-45deg); }
.hb-corner.br { right: -30px; bottom: 18px; transform: rotate(-45deg); }
.hb-star { position: absolute; width: 30px; height: 30px; background: var(--frame);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.hb-star::after { content: ""; position: absolute; inset: 22%; background: var(--paper);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.hb-star.st1 { left: 12%; top: -46px; }
.hb-star.st2 { right: 8%; bottom: -52px; }
.hb-tick { position: absolute; right: -40px; top: 6px; width: 30px; height: 3px; background: var(--frame); border-radius: 2px; transform: rotate(-24deg); }
.hb-tick::after { content: ""; position: absolute; left: -4px; top: 12px; width: 38px; height: 3px; background: var(--frame); border-radius: 2px; }
.hb-sign {
	position: absolute; left: -4px; bottom: -58px; margin: 0; transform: rotate(-3deg);
	font: 600 30px/1 var(--kana); color: var(--frame); letter-spacing: 0.08em;
}
.hb-sign span { color: #e48aa0; margin-left: 4px; }

/* botones 01–03, con flechita sobre el activo */
.v-b .hb-dots { position: relative; z-index: 3; display: flex; gap: 10px; margin-top: 16px; }
.v-b .hb-dots button {
	position: relative; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--frame); color: #fff; font: 700 12px/34px "Zen Maru Gothic", sans-serif; font-style: normal;
}
.v-b .hb-dots button[aria-selected="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--frame); }
.v-b .hb-dots button[aria-selected="true"]::before {
	content: ""; position: absolute; left: 50%; top: -14px; width: 8px; height: 8px; margin-left: -4px;
	border-right: 2px solid var(--frame); border-bottom: 2px solid var(--frame); transform: rotate(45deg);
}

@media (max-width: 959px) {
	.hb-corner { width: 46px; height: 3px; }
	.hb-corner.tl { left: -18px; top: 10px; }
	.hb-corner.br { right: -18px; bottom: 10px; }
	.hb-star { width: 20px; height: 20px; }
	.hb-star.st1 { top: -30px; }
	.hb-star.st2 { bottom: -34px; }
	.hb-tick { display: none; }
	.hb-sign { font-size: 20px; bottom: -40px; }
	.hb-float { padding: 5px; border-width: 4px; }
	.v-b .hb-dots { margin-top: 24px; }
	.hb-light { filter: blur(26px); }
}
@media (prefers-reduced-motion: reduce) {
	.hb-light, .hb-float { animation: none; }
	.hb-card { transition: none; }
}

/* móvil (como pannomimi en el móvil): un solo marco vertical; las fotos se relevan en el sitio */
@media (max-width: 959px) {
	.v-b .hb { --cw: min(80vw, 440px); --ch: calc(var(--cw) * 1.3333); padding-top: calc(var(--bar) + 30px); }
	.hb-stage { height: var(--ch); }
	.hb-card { aspect-ratio: 3 / 4; transition: opacity 1s ease; }
	.hb-card.is-c, .hb-card.is-l, .hb-card.is-r { transform: translate(-50%, 0); }
	.hb-card.is-l, .hb-card.is-r { opacity: 0; pointer-events: none; }
	.hb-deco { height: var(--ch); transform: translate(-50%, 0); }
	.hb-float { padding: 0; border-width: 4px; }
	.hb-tick { display: block; right: -22px; top: -14px; width: 24px; }
	.hb-tick::after { width: 30px; }
	.hb-star.st1 { left: -26px; top: 24%; }
	.hb-star.st2 { right: -22px; bottom: 30%; }
	.hb-sign { font-size: 24px; bottom: -48px; }
	.v-b .hb-dots { margin-top: 74px; }
	.v-b .hb-dots button { width: 38px; height: 38px; line-height: 38px; }
}

/* ---------- ritmo: aire entre secciones y dibujos solo donde significan algo ---------- */
.v-b .block { margin-top: 112px; }
.v-b .strip + main .block:first-child { margin-top: 96px; }
.v-b .head { padding-top: 0; }
.v-b .head::before { content: none; }
/* perfil: ella; fan club: sus perros (UHHD); はじめての方へ: chibi con guitarra */
.v-b #profile .head, .v-b #fanclub .head, .v-b #first .head { padding-top: 96px; }
.v-b #profile .head::before, .v-b #fanclub .head::before, .v-b #first .head::before { content: ""; top: 0; }
.v-b #profile .head::before { background-image: url(/img/chibi-cut.webp); width: 100px; height: 100px; }
.v-b #first .head::before { background-image: url(/img/chibi-guitar.webp); width: 80px; height: 100px; }
.v-b #fanclub .head::before { background-image: url(/img/dogs-uhhd.webp); width: 100px; height: 100px; }
@media (min-width: 960px) {
	.v-b .block { margin-top: 150px; }
	.v-b .strip + main .block:first-child { margin-top: 120px; }
}

/* ---------- PICK UP, versión tranquila: un solo tono suave, festones del mismo color,
   dos líneas finas por dentro y banners todos iguales (blancos con marco fino) ---------- */
.v-b .strip {
	--band: #e8f3ec;
	margin: 64px 0 0; padding: 36px 0 34px; box-shadow: none;
	background:
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 12px / 100% 1px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 16px / 100% 1px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 calc(100% - 12px) / 100% 1px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 calc(100% - 16px) / 100% 1px no-repeat,
		var(--band);
}
.v-b .strip::before, .v-b .strip::after {
	height: 14px; background: radial-gradient(circle at 50% 100%, var(--band) 67%, transparent 69%) 0 0 / 28px 14px repeat-x;
}
.v-b .strip::before { top: -14px; }
.v-b .strip::after { bottom: -14px; }
.v-b .bn, .v-b .bn-hot, .v-b .bn-mint, .v-b .bn-cream {
	background: #fff; border: 1.5px solid var(--frame); outline: none; border-radius: 4px; box-shadow: 0 2px 0 rgb(107 76 51 / 0.12);
}
.v-b .bn img { border-right: 1.5px solid var(--frame); }
.v-b .bn .bn-kicker { color: var(--gold-dark); }

/* ---------- PICK UP como el de pannomimi ----------
   Banda apenas más oscura que el papel, festones con contorno, doble línea fina arriba
   y abajo; la de arriba lleva en el centro el adorno (aquí, la estrella de su emblema)
   y cada banner, cruces finas en las esquinas. */
.v-b .strip {
	--band: #f1f6f0;
	margin-top: 72px; padding: 46px 0 40px;
	background:
		linear-gradient(var(--frame), var(--frame)) 0 18px / 100% 1.5px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 23px / 100% 1px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 calc(100% - 23px) / 100% 1px no-repeat,
		linear-gradient(var(--frame), var(--frame)) 0 calc(100% - 18px) / 100% 1.5px no-repeat,
		var(--band);
}
.v-b .strip::before, .v-b .strip::after {
	height: 15px;
	background: radial-gradient(circle at 50% 100%, var(--band) 0 62%, var(--frame-soft) 62% 67%, transparent 68%) 0 0 / 30px 15px repeat-x;
}
.v-b .strip::before { top: -15px; }
.v-b .strip::after { bottom: -15px; }
/* adorno central sobre la línea de arriba */
.v-b .strip-orn {
	display: block; position: absolute; left: 50%; top: 4px; width: 34px; height: 34px; transform: translateX(-50%); z-index: 2;
	background: var(--band);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.v-b .strip-orn::before {
	content: ""; position: absolute; inset: 0; background: var(--frame);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.v-b .strip-orn::after {
	content: ""; position: absolute; inset: 17%; background: var(--band);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
/* banners con cruces en las esquinas */
.v-b .bn { position: relative; overflow: visible; border-radius: 6px; border: 2px solid var(--frame); box-shadow: none; }
.v-b .bn img { border-radius: 4px 0 0 4px; border-right: 1.5px solid var(--frame); }
.v-b .bn::before {
	content: ""; position: absolute; inset: -11px; pointer-events: none;
	--c: var(--frame); --l: 9px; --t: 1.5px;
	background:
		linear-gradient(var(--c), var(--c)) left 0 top 4px / var(--l) var(--t) no-repeat,
		linear-gradient(var(--c), var(--c)) left 4px top 0 / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right 0 top 4px / var(--l) var(--t) no-repeat,
		linear-gradient(var(--c), var(--c)) right 4px top 0 / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) left 0 bottom 4px / var(--l) var(--t) no-repeat,
		linear-gradient(var(--c), var(--c)) left 4px bottom 0 / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right 0 bottom 4px / var(--l) var(--t) no-repeat,
		linear-gradient(var(--c), var(--c)) right 4px bottom 0 / var(--t) var(--l) no-repeat;
}
.v-b .strip-track { gap: 26px; padding-block: 12px; }
@keyframes strip-b { to { transform: translateX(calc(-50% - 13px)); } }
.v-b .strip-track { animation-name: strip-b; }
/* la franja recorta lo que sobresale (overflow del carrusel): los festones van por dentro */
.v-b .strip {
	padding: 62px 0 56px;
	background:
		linear-gradient(var(--frame), var(--frame)) 0 33px / 100% 1.5px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 38px / 100% 1px no-repeat,
		linear-gradient(var(--frame-soft), var(--frame-soft)) 0 calc(100% - 38px) / 100% 1px no-repeat,
		linear-gradient(var(--frame), var(--frame)) 0 calc(100% - 33px) / 100% 1.5px no-repeat,
		linear-gradient(var(--band), var(--band)) 0 15px / 100% calc(100% - 30px) no-repeat;
}
.v-b .strip::before { top: 0; z-index: 1; }
.v-b .strip::after { bottom: 0; z-index: 1; }
.v-b .strip-orn { top: 19px; }

/* ---------- respiración arriba y foto más grande en móvil ---------- */
/* festón en el borde superior de la página, como pannomimi; la barra queda más baja */
.v-b .hb::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2;
	background: radial-gradient(circle at 50% 0, var(--frame-soft) 0 66%, transparent 68%) 0 0 / 28px 14px repeat-x;
}
@media (max-width: 959px) {
	.v-b { --bar: 76px; }
	.v-b .bar { padding-top: 14px; height: calc(var(--bar)); }
	.v-b .logo img { width: 200px; }
	.v-b .hb {
		/* el marco crece hasta llenar la pantalla: alto disponible menos logo, firma y botones */
		--cw: min(88vw, calc((100svh - 300px) * 0.75), 480px);
		min-height: 100svh; justify-content: center; padding: calc(var(--bar) + 26px) 0 36px;
	}
	.hb-corner.tl { left: -20px; top: 12px; }
	.v-b .hb-dots { margin-top: 70px; }
}
@media (min-width: 960px) {
	.v-b { --bar: 104px; }
	.v-b .bar { padding-top: 14px; }
	.v-b .logo img { width: 330px; }
	.v-b .hb { --cw: min(46vw, calc((100svh - 300px) / 0.625 / 1.36), 1000px); padding-top: calc(var(--bar) + 10px); }
}
@media (max-width: 959px) {
	/* el marco empieza justo debajo del logo, como pannomimi; lo que sobra queda abajo */
	.v-b .hb { min-height: 0; justify-content: flex-start; padding: calc(var(--bar) + 30px) 0 40px; --cw: min(86vw, 480px); }
	.v-b .logo img { width: 230px; }
}

/* flechas a media altura del marco, sobre su borde (como pannomimi) */
.hb-arrow {
	position: absolute; top: 50%; z-index: 4; pointer-events: auto; cursor: pointer;
	width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%;
	background: var(--frame); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--frame);
	transition: transform 0.2s;
}
.hb-arrow::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
	border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
}
.hb-arrow.prev { left: -22px; }
.hb-arrow.next { right: -22px; }
.hb-arrow.prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.hb-arrow.next::after { transform: translate(-70%, -50%) rotate(-45deg); }
.hb-arrow:hover { transform: scale(1.08); }
.hb-arrow:focus-visible { outline: 2px solid var(--sparkle); outline-offset: 6px; }
@media (max-width: 959px) {
	.hb-arrow { width: 40px; height: 40px; margin-top: -20px; }
	.hb-arrow.prev { left: -18px; }
	.hb-arrow.next { right: -18px; }
	.hb-star.st1 { top: 14%; }
}
@media (max-width: 959px) { .v-b .strip { margin-top: 20px; } .v-b .hb { padding-bottom: 28px; } }

/* ---------- fondo: sus motivos en vez de rayas ----------
   Estampado suave de tréboles, destellos y las espadas cruzadas del emblema. */
body.v-b { background: url(/img/pattern-b.svg) 0 0 / 420px 420px repeat, var(--paper); }
.hb-ribbon { display: none; }
/* en el hero el estampado se mueve muy despacio, y el emblema queda como marca de agua */
.hb-bg::before {
	content: ""; position: absolute; inset: -420px 0 0 -420px;
	background: url(/img/pattern-b.svg) 0 0 / 420px 420px repeat;
	animation: pattern-drift 90s linear infinite;
}
.hb-bg::after {
	content: ""; position: absolute; left: 50%; top: 52%; width: min(1100px, 120vw); aspect-ratio: 409 / 323;
	transform: translate(-50%, -50%); background: url(/img/emblem.webp) center / contain no-repeat; opacity: 0.08;
}
@keyframes pattern-drift { to { transform: translate(420px, 420px); } }
/* el papel de la banda y las tarjetas tapa el estampado: el contenido se lee limpio */
.v-b .hb { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .hb-bg::before { animation: none; } }

/* ---------- controles discretos: la foto manda ----------
   Puntos pequeños sin número (solo el activo se rellena) y flechas blancas con trazo fino. */
.v-b .hb-dots { gap: 12px; }
.v-b .hb-dots button {
	width: 10px; height: 10px; font-size: 0; line-height: 0; color: transparent;
	background: transparent; border: 1.5px solid var(--frame-soft); box-shadow: none;
	transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
/* zona táctil cómoda aunque el punto sea pequeño */
.v-b .hb-dots button::after { content: ""; position: absolute; inset: -12px; }
.v-b .hb-dots button[aria-selected="true"] { background: var(--frame); border-color: var(--frame); box-shadow: none; transform: scale(1.15); }
.v-b .hb-dots button[aria-selected="true"]::before { display: none; }
.hb-arrow, .hb-arrow:hover {
	width: 38px; height: 38px; margin-top: -19px;
	background: rgb(255 255 255 / 0.85); box-shadow: 0 0 0 1.5px var(--frame-soft); backdrop-filter: blur(4px);
}
.hb-arrow::after { width: 7px; height: 7px; border-right-width: 1.5px; border-bottom-width: 1.5px; border-color: var(--frame); }
.hb-arrow:hover { transform: scale(1.06); }
@media (max-width: 959px) {
	.hb-arrow { width: 34px; height: 34px; margin-top: -17px; }
	.hb-arrow.prev { left: -17px; }
	.hb-arrow.next { right: -17px; }
	.v-b .hb-dots { margin-top: 64px; }
}

/* ---------- adornos en puntos concretos, no estampado ----------
   Fuera el estampado repetido, las espadas y la marca de agua: competían con la foto.
   Tres tréboles en trazo marrón (el mismo que el marco) en las esquinas del marco
   central, apuntando hacia dentro. */
body.v-b { background: var(--paper); }
.hb-bg::before, .hb-bg::after { content: none; }
.hb-clover { position: absolute; background: url(/img/clover.svg) center / contain no-repeat; pointer-events: none; }
.hb-clover.c1 { width: 58px; height: 68px; right: -30px; top: -40px; transform: rotate(18deg); }
.hb-clover.c2 { width: 30px; height: 35px; right: 30px; top: -30px; transform: rotate(-24deg); }
.hb-clover.c3 { width: 34px; height: 40px; left: -24px; bottom: -22px; transform: rotate(-14deg); }
/* el trébol pequeño de abajo deja sitio a la firma */
.v-b .hb-sign { left: 22px; }
@media (min-width: 960px) {
	.hb-clover.c1 { width: 80px; height: 94px; right: -44px; top: -58px; }
	.hb-clover.c2 { width: 40px; height: 47px; right: 46px; top: -40px; }
	.hb-clover.c3 { width: 46px; height: 54px; left: -34px; bottom: -30px; }
	.v-b .hb-sign { left: 30px; }
}

/* ---------- tréboles como los usa ella en sus flyers ----------
   Verde vivo con degradado y lunares, sin contorno, a los dos lados de la foto en alturas
   alternas y algo girados. Solo rozan el borde del marco: nunca tapan la foto. */
.hb-star { display: none; }
.hb-clover { position: absolute; background: url(/img/clover-hitomi.svg) center / contain no-repeat; pointer-events: none;
	filter: drop-shadow(0 2px 3px rgb(15 100 50 / 0.18)); --s: 44px; width: var(--s); height: var(--s); }
.hb-clover.k1 { --s: 50px; left: -27px; top: 9%; transform: rotate(-16deg); }
.hb-clover.k2 { --s: 40px; right: -24px; top: 26%; transform: rotate(14deg); }
.hb-clover.k3 { --s: 46px; left: -26px; top: 66%; transform: rotate(10deg); }
.hb-clover.k4 { --s: 38px; right: -22px; top: 74%; transform: rotate(-20deg); }
.hb-clover.k5 { --s: 30px; left: 34%; bottom: -46px; transform: rotate(24deg); }
@media (min-width: 960px) {
	.hb-clover.k1 { --s: 66px; left: -40px; top: 6%; }
	.hb-clover.k2 { --s: 54px; right: -34px; top: 22%; }
	.hb-clover.k3 { --s: 58px; left: -36px; top: 70%; }
	.hb-clover.k4 { --s: 48px; right: -30px; top: 78%; }
	.hb-clover.k5 { display: none; }
}
@media (max-width: 959px) { .hb-clover.k5 { display: none; } }
@media (min-width: 960px) {
	/* lejos de las líneas diagonales de las esquinas */
	.hb-clover.k1 { top: 20%; }
	.hb-clover.k2 { top: 26%; }
	.hb-clover.k3 { top: 66%; }
	.hb-clover.k4 { top: 62%; }
}

/* ================= marcas de agua por sección =================
   Fondo plano en general; solo algunas secciones llevan UN motivo grande y tenue detrás,
   para destacar lo que hay encima (como pannomimi en su perfil). Nada en el hero: ahí
   manda la foto. */
body.v-b { overflow-x: clip; }
.v-b .block { position: relative; isolation: isolate; }

/* PROFILE: su arcoíris (el de los perros UHHD) detrás de la foto, con un halo suave */
.v-b #profile::before {
	content: ""; position: absolute; z-index: -1; left: 50%; top: 150px; width: min(760px, 170vw); aspect-ratio: 600 / 310;
	transform: translateX(-50%); background: url(/img/rainbow.svg) center / contain no-repeat; opacity: 0.45;
	-webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.v-b #profile::after {
	content: ""; position: absolute; z-index: -2; inset: 80px -10% -40px;
	background: radial-gradient(ellipse 60% 55% at 50% 45%, rgb(248 211 176 / 0.35), transparent 70%);
}
@media (min-width: 960px) {
	.v-b #profile::before { left: 22%; top: 120px; width: 820px; }
}

/* NEXT LIVE: una estrella grande dorada asomando por la derecha de la tarjeta */
.v-b .ev.next { overflow: hidden; }
.v-b .ev.next > .ev-body { position: relative; z-index: 1; }
.v-b .ev.next::after {
	content: ""; position: absolute; right: -26px; top: 50%; width: 150px; height: 150px; transform: translateY(-50%) rotate(12deg);
	background: url(/img/star-mono.svg) center / contain no-repeat; opacity: 0.28; pointer-events: none;
}

/* FAN CLUB: trébol grande y tenue en la tarjeta, como el pan de la ficha de pannomimi */
.v-b .fc { overflow: hidden; }
.v-b .fc::before {
	content: ""; position: absolute; z-index: 0; right: -60px; bottom: -70px; width: 300px; height: 300px;
	background: url(/img/clover-mono.svg) center / contain no-repeat; opacity: 0.2; transform: rotate(-12deg);
}
@media (min-width: 960px) { .v-b .fc::before { right: 6%; bottom: -90px; width: 380px; height: 380px; } }

/* el hero, con un degradado suave además de las luces */
.v-b .hb { background:
	radial-gradient(ellipse 70% 55% at 50% 45%, rgb(221 239 229 / 0.55), transparent 70%),
	radial-gradient(ellipse 40% 35% at 80% 80%, rgb(248 211 176 / 0.25), transparent 70%),
	var(--paper); }
/* la etiqueta NEXT LIVE sobresale: la tarjeta no recorta, la estrella va dentro */
.v-b .ev.next { overflow: visible; }
.v-b .ev.next::after { right: 12px; width: 120px; height: 120px; opacity: 0.2; }
.v-b #profile::before { opacity: 0.38; }

/* ---------- PICK UP con su branding ----------
   El adorno de la línea es su emblema en línea: trébol con las espadas de Wings of the
   sword cruzadas detrás. Las cruces de las esquinas pasan a ser los destellos de su logo. */
.v-b .strip-orn {
	top: 9px; width: 50px; height: 50px; clip-path: none;
	background: url(/img/orn-clover-swords.svg) center / contain no-repeat, radial-gradient(circle, var(--band) 0 46%, transparent 48%);
}
.v-b .strip-orn::before, .v-b .strip-orn::after { content: none; }
.v-b .bn::before {
	inset: -12px;
	background:
		url(/img/sparkle-line.svg) left top / 11px 11px no-repeat,
		url(/img/sparkle-line.svg) right top / 11px 11px no-repeat,
		url(/img/sparkle-line.svg) left bottom / 11px 11px no-repeat,
		url(/img/sparkle-line.svg) right bottom / 11px 11px no-repeat;
}

/* nada puede ensanchar la página en móvil: si algo sobresale, el navegador agranda el
   "lienzo" y la barra fija se descoloca (logo desplazado, menú fuera de pantalla) */
html:has(body.v-b), body.v-b { overflow-x: hidden; }
.v-b #profile { overflow: clip; overflow-clip-margin: 0; }
.v-b #profile::before { width: min(760px, 150%); }
/* NEXT LIVE sin marca de agua: un motivo de color sobre el fondo de color de la tarjeta ensucia */
.v-b .ev.next::after { content: none; }
/* PROFILE sin arcoíris: la foto en arco ya es el elemento; solo queda el halo cálido */
.v-b #profile::before { content: none; }

/* escritorio: flechas fuera del marco, en el hueco entre la foto central y las laterales
   (como pannomimi); sólidas porque ya no van sobre la foto */
@media (min-width: 960px) {
	.hb-arrow, .hb-arrow:hover { width: 46px; height: 46px; margin-top: -23px; background: var(--frame); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--frame); backdrop-filter: none; }
	.hb-arrow::after { width: 9px; height: 9px; border-right-width: 2px; border-bottom-width: 2px; border-color: #fff; }
	.hb-arrow.prev { left: calc(-23px - var(--gap) / 2 - 8px); }
	.hb-arrow.next { right: calc(-23px - var(--gap) / 2 - 8px); }
	.hb-arrow:hover { transform: scale(1.06); }
}
@media (min-width: 960px) {
	.v-b .hb { --gap: 84px; }
	.hb-arrow.prev { left: calc(-23px - var(--gap) / 2); }
	.hb-arrow.next { right: calc(-23px - var(--gap) / 2); }
}

/* escritorio, composición de pannomimi: las fotos empiezan arriba (la izquierda a la
   altura del logo) y el hero no ocupa toda la pantalla: debajo ya se ve PICK UP.
   El tamaño sale del alto disponible: hueco arriba + escenario + firma y puntos + franja. */
@media (min-width: 960px) {
	.v-b .hb {
		--cw: min(36vw, calc((100svh - 420px) / 0.625 / 1.36), 980px);
		height: auto; min-height: 0; justify-content: flex-start;
		padding: 46px 0 8px;
	}
	.v-b .hb-dots { margin-top: 14px; }
	.v-b .strip { margin-top: 22px; }
}

/* ---------- fundido en el sitio (como pannomimi) ----------
   Los marcos no se mueven; las fotos de cada marco están apiladas y solo cambia la
   opacidad. Un fundido largo y suave, sin deslizar nada. */
.hb-card { transition: none; }
.hb-float { position: relative; }
.hb-float img {
	position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px);
	opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hb-float img.on { opacity: 1; }
@media (max-width: 959px) {
	.hb-float img { inset: 0; width: 100%; height: 100%; }
	/* en móvil solo se ve el marco central */
	.hb-card.is-l, .hb-card.is-r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hb-float img { transition: none; } }
/* fundido limpio: la nueva aparece ENCIMA de la anterior, que se queda opaca debajo y solo
   se oculta cuando la nueva ya está entera (si no, a mitad se ve el papel a través) */
.hb-float img { z-index: 1; transition: opacity 0s linear 1.4s; }
.hb-float img.on { z-index: 2; transition: opacity 1.4s ease-in-out; }

/* ---------- escritorio: primera pantalla = hero + PICK UP, y nada más ----------
   Banners más grandes (se ven ~3 en vez de 6) y el hero se estira lo justo para que la
   franja acabe en el borde de la pantalla: お知らせ ya no asoma. */
@media (min-width: 960px) {
	.v-b { --strip-h: 330px; }
	.v-b .bn { width: 560px; aspect-ratio: auto; height: 190px; }
	.v-b .bn img { flex-basis: 44%; width: 44%; }
	.v-b .bn-text { padding: 14px 22px; gap: 4px; }
	.v-b .bn-kicker { font-size: 12px; }
	.v-b .bn-title { font-size: 20px; }
	.v-b .bn-sub { font-size: 13px; }
	.v-b .strip-track { gap: 34px; }
	@keyframes strip-b { to { transform: translateX(calc(-50% - 17px)); } }
	.v-b .strip { margin-top: 0; height: var(--strip-h); box-sizing: border-box; }
	.v-b .hb {
		--cw: min(36vw, calc((100svh - var(--strip-h) - 170px) / 0.625 / 1.36), 980px);
		min-height: calc(100svh - var(--strip-h));
	}
}
@media (min-width: 960px) {
	/* en pantallas bajas la franja cede sitio a la foto */
	.v-b { --strip-h: clamp(250px, 33svh, 330px); }
	.v-b .bn { height: calc(var(--strip-h) - 140px); width: calc((var(--strip-h) - 140px) * 2.95); }
	.v-b .bn-title { font-size: clamp(16px, 2.1svh, 20px); }
	/* la foto central siempre por debajo del logo */
	.v-b .hb { padding-top: max(46px, calc(100px - var(--ch) * 0.18)); }
}
@media (min-width: 960px) {
	/* tarjeta con aire por dentro, como pannomimi: marco, margen blanco y luego la imagen */
	.v-b .bn { padding: 8px; gap: 0; background: #fff; }
	.v-b .bn img { border: 1px solid var(--frame-soft); border-radius: 3px; height: 100%; }
	.v-b .bn-text { padding: 10px 26px; gap: 6px; }
	.v-b .bn-kicker { font-size: 13px; letter-spacing: 0.12em; }
	.v-b .bn-title { font-size: clamp(18px, 2.3svh, 22px); line-height: 1.4; }
	.v-b .bn-sub { font-size: 15px; }
}

/* ---------- botón de menú visible (como pannomimi) ----------
   Círculo marrón con doble aro y las rayitas en blanco; abajo "MENU" en pequeño. */
.v-b .burger {
	width: 52px; height: 52px; border-radius: 50%; background: var(--frame); cursor: pointer;
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--frame), 0 4px 12px rgb(107 76 51 / 0.18);
	transition: transform 0.2s;
}
.v-b .burger:hover { transform: translateY(-50%) scale(1.06); }
.v-b .burger span, .v-b .burger span::before, .v-b .burger span::after { background: #fff; width: 20px; }
.v-b .burger span::before { top: -6px; }
.v-b .burger span::after { top: 6px; }
.v-b.menu-open .burger span { background: transparent; }
.v-b.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.v-b.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
.v-b .burger::after {
	content: "MENU"; position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
	font: 700 10px/1 "Zen Maru Gothic", sans-serif; letter-spacing: 0.18em; color: var(--frame);
}
.v-b.menu-open .burger::after { content: "CLOSE"; }
@media (max-width: 959px) {
	.v-b .burger { right: 14px; width: 46px; height: 46px; }
	.v-b .burger::after { font-size: 9px; top: calc(100% + 7px); }
}
@media (min-width: 960px) {
	.v-b .burger { right: 30px; width: 60px; height: 60px; }
	.v-b .burger span, .v-b .burger span::before, .v-b .burger span::after { width: 22px; }
}
@media (max-width: 959px) {
	/* móvil: botón contenido, sin etiqueta, aro fino */
	.v-b .burger { right: 12px; width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--frame); }
	.v-b .burger span, .v-b .burger span::before, .v-b .burger span::after { width: 16px; height: 1.8px; }
	.v-b .burger span::before { top: -5px; }
	.v-b .burger span::after { top: 5px; }
	.v-b.menu-open .burger span::before { transform: translateY(5px) rotate(45deg); }
	.v-b.menu-open .burger span::after { transform: translateY(-5px) rotate(-45deg); }
	.v-b .burger::after { content: none; }
}

/* ================= ritmo entre secciones =================
   Como pannomimi: unas secciones sobre papel y otras sobre una franja de color a todo
   el ancho con festones arriba y abajo. Alternan: NEWS papel · SCHEDULE franja ·
   DISCOGRAPHY papel · VIDEO franja · PROFILE papel (halo) · FAN CLUB franja. */
.v-b #schedule, .v-b #movie, .v-b #fanclub { --band: #eef6f0; }
.v-b #movie { --band: #f7efe4; }
.v-b #schedule::before, .v-b #movie::before, .v-b #fanclub::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; width: 100vw; transform: translateX(-50%); top: -70px; bottom: -80px;
	background:
		radial-gradient(circle at 50% 100%, var(--band) 0 62%, var(--frame-soft) 62% 67%, transparent 68%) left top / 30px 15px repeat-x,
		radial-gradient(circle at 50% 0, var(--band) 0 62%, var(--frame-soft) 62% 67%, transparent 68%) left bottom / 30px 15px repeat-x,
		linear-gradient(var(--band), var(--band)) center / 100% calc(100% - 30px) no-repeat;
}
.v-b #fanclub { overflow: visible; }
/* sobre la franja, la cinta del título pasa a blanco para no fundirse */
.v-b #schedule h2 span, .v-b #movie h2 span, .v-b #fanclub h2 span { background: #fff; }
.v-b #schedule .more-link, .v-b #movie .more-link { background: #fff; }
/* las franjas necesitan aire propio para que el festón no pise el título */
.v-b #schedule .head, .v-b #movie .head { padding-top: 10px; }
.v-b #schedule + .block, .v-b #movie + .block { margin-top: 170px; }
/* las luces del hero, también a los lados del contenido (solo escritorio, donde sobra sitio) */
@media (min-width: 960px) {
	body.v-b {
		background:
			radial-gradient(420px 360px at 6% 22%, rgb(191 230 211 / 0.45), transparent 70%),
			radial-gradient(380px 340px at 95% 38%, rgb(243 227 200 / 0.5), transparent 70%),
			radial-gradient(460px 380px at 4% 62%, rgb(199 236 232 / 0.4), transparent 70%),
			radial-gradient(420px 360px at 96% 84%, rgb(191 230 211 / 0.42), transparent 70%),
			var(--paper);
	}
	.v-b #schedule + .block, .v-b #movie + .block { margin-top: 200px; }
}

/* ---------- お知らせ: lista de una columna, fecha legible ---------- */
@media (min-width: 960px) {
	.v-b .news { display: block; max-width: 860px; margin-inline: auto; padding: 8px 40px; }
	.v-b .news li { border-bottom: 0; }
	.v-b .news li + li { border-top: 1px solid var(--line); }
	.v-b .nw { grid-template-columns: 150px 1fr; align-items: baseline; column-gap: 28px; padding: 22px 0; }
	.v-b .nw-title { font-size: 17px; }
}
.v-b .nw-date {
	font-family: "Zen Maru Gothic", sans-serif; font-style: normal; font-weight: 700;
	font-size: 14px; letter-spacing: 0.06em; color: var(--accent); /* 6:1 sobre blanco */
}
@media (min-width: 960px) { .v-b .nw-date { font-size: 15px; } }

/* NEXT LIVE sin relleno verde: se destaca por marco y tamaño, no por color de fondo.
   Doble filete dorado (como los marcos de la web), fecha y título más grandes. */
.v-b .ev.next {
	background: #fff; border: 1.5px solid var(--gold);
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--gold-light);
	padding: 26px 22px 22px; margin: 14px 0 10px;
}
.v-b .ev.next::before { background: var(--frame); left: 18px; top: -10px; padding: 1px 12px; }
.v-b .ev.next .md { font-size: 40px; }
.v-b .ev.next .ev-title { font-size: 19px; }
@media (min-width: 960px) {
	.v-b .ev.next { padding: 34px 36px 30px; }
	.v-b .ev.next .md { font-size: 54px; }
	.v-b .ev.next .ev-title { font-size: 24px; }
	.v-b .ev.next .ev-meta { font-size: 16px; }
}

/* ---------- escritorio: una sección por pantalla ----------
   Cada sección ocupa al menos el alto visible (menos la barra) con el contenido centrado:
   al hacer scroll se ve una cosa cada vez. El contenido crece para llenar el espacio. */
@media (min-width: 960px) {
	.v-b main > .block {
		min-height: calc(100svh - var(--bar) - 40px); margin-top: 0 !important;
		display: flex; flex-direction: column; justify-content: center; padding-block: 90px;
	}
	.v-b main > .block > .head { flex: none; }
	.v-b #schedule::before, .v-b #movie::before, .v-b #fanclub::after { top: 20px; bottom: 20px; }
	.v-b main { max-width: 1180px; }
	.v-b .news, .v-b #schedule .events { width: 100%; max-width: 1000px; margin-inline: auto; }
	.v-b .ev { padding: 26px 12px; }
	.v-b .ev-title { font-size: 19px; }
	.v-b .ev-flyer { flex-basis: 120px; }
	.v-b .ev-flyer img { width: 120px; height: 170px; }
	.v-b .jk-row { max-width: 1100px; gap: 56px; }
	.v-b .videos { max-width: 1100px; margin-inline: auto; width: 100%; gap: 36px; }
	.v-b .pf-wrap { grid-template-columns: 500px 1fr; gap: 80px; max-width: 1100px; margin-inline: auto; }
	.v-b .fc { max-width: 1100px; margin-inline: auto; width: 100%; }
	.v-b footer { margin-top: 0; }
}

/* sin altura forzada: cada sección mide lo que su contenido, con aire generoso y fijo */
@media (min-width: 960px) {
	.v-b main > .block { min-height: 0; display: block; padding-block: 130px; }
	.v-b #schedule::before, .v-b #movie::before, .v-b #fanclub::after { top: 40px; bottom: 40px; }
}
.v-b .vmain .yt, .v-b .vmain iframe { border: 5px solid #fff; outline: 1.5px solid var(--frame); border-radius: 2px; }
.v-b .vt img { border-radius: 2px; }
.v-b .vt[aria-current="true"] img { outline-color: var(--frame); }
.v-b .more-link { position: static; }
@media (min-width: 960px) { .v-b .more-link { position: absolute; right: 0; bottom: 6px; } }
.v-b .btn-ticket { border-radius: 4px; }
.v-b .ev:not(.next):hover { background: rgb(201 183 159 / 0.12); }
.v-b .evp-flyer { border: 5px solid #fff; outline: 1.5px solid var(--frame); border-radius: 2px; box-shadow: none; }

/* escritorio: un cuarto de pantalla por banner; se ven los 4 mientras gira */
@media (min-width: 960px) {
	.v-b .bn { width: calc((100vw - 4 * 34px) / 4); }
	.v-b .bn img { flex-basis: 42%; width: 42%; }
	.v-b .bn-text { padding: 10px 16px; }
	.v-b .bn-title { font-size: clamp(15px, 1.25vw, 20px); }
	.v-b .bn-sub { font-size: clamp(12px, 0.9vw, 14px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* el texto crece con el banner (un cuarto de pantalla) para no dejar hueco */
@media (min-width: 960px) {
	.v-b .bn-text { padding: 12px clamp(16px, 1.4vw, 32px); gap: clamp(4px, 0.4vw, 10px); }
	.v-b .bn-kicker { font-size: clamp(11px, 0.7vw, 14px); }
	.v-b .bn-title { font-size: clamp(16px, 1.15vw, 24px); line-height: 1.35; }
	.v-b .bn-sub { font-size: clamp(12px, 0.8vw, 16px); }
}
@media (min-width: 960px) {
	.v-b .bn img { flex-basis: 38%; width: 38%; }
	.v-b .bn-text { padding: 12px clamp(12px, 0.9vw, 20px) 12px clamp(16px, 1.3vw, 28px); }
	.v-b .bn-title { font-size: clamp(16px, 1.1vw, 23px); }
}

/* móvil (B): título centrado y もっと見る al final de la sección, después del contenido */
@media (max-width: 959px) {
	.v-b .head .more-link { display: none; }
	.v-b .more-end { display: flex; justify-content: center; margin: 36px 0 0; }
	.v-b .more-end .more-link { font-size: 15px; }
}

.v-b .rl-body .rl-h { text-align: left; justify-content: flex-start; }

/* ---------- una sola foto, sin marco ----------
   El marco grueso con rayitas en las esquinas es lenguaje de ilustración: con fotos de
   ella se lee como un cuadro, no como una persona. La foto va limpia, con esquinas
   redondas y sombra; quedan la firma, las flechas y los botones. */
.hb-float {
	padding: 0; border: 0; background: #ece6dc; border-radius: 22px; overflow: hidden;
	box-shadow: 0 22px 44px -26px rgb(107 76 51 / 0.5);
}
.hb-float img, .hb-float img.on { inset: 0; width: 100%; height: 100%; object-position: var(--pos); }
.hb-corner, .hb-star, .hb-tick { display: none !important; }
@media (min-width: 960px) {
	/* debajo del logo, nunca encima */
	.v-b .hb { --cw: min(68vw, calc((100svh - var(--strip-h) - var(--bar) - 112px) / 0.625), 1120px); padding-top: calc(var(--bar) + 6px); }
	.hb-stage { height: var(--ch); }
	.hb-card.is-c, .hb-deco { transform: translate(-50%, 0); }
	.hb-float { animation: none; border-radius: 30px; }
	.hb-float img, .hb-float img.on { object-position: var(--wide); }
	.hb-arrow.prev { left: -23px; }
	.hb-arrow.next { right: -23px; }
	.hb-sign { bottom: -50px; }
	.v-b .hb-dots { margin-top: 64px; }
}

/* el cierre a pantalla completa sustituye al festón de encima del pie */
.v-b .cta + footer { margin-top: 0; }

/* ---------- botones discretos ----------
   Los círculos marrones macizos (flechas y menú) eran lo que más destacaba de la página,
   por encima de la foto. Ahora: blanco translúcido, borde fino y el icono en marrón. */
.hb-arrow, .hb-arrow:hover,
.v-b .burger {
	background: rgb(255 255 255 / 0.82); backdrop-filter: blur(6px);
	box-shadow: 0 0 0 1px rgb(107 76 51 / 0.22), 0 6px 16px -8px rgb(107 76 51 / 0.35);
}
.hb-arrow::after { border-color: var(--frame) !important; border-right-width: 1.5px !important; border-bottom-width: 1.5px !important; }
.v-b .burger span::before, .v-b .burger span::after, .v-b .burger span { background: var(--frame); }
.v-b.menu-open .burger span { background: transparent; }
@media (min-width: 960px) {
	.hb-arrow, .hb-arrow:hover { width: 44px; height: 44px; margin-top: -22px; }
	.v-b .burger { width: 52px; height: 52px; }
}

/* foto sin sombra: sobre el papel ya se separa sola; y un 4 % más grande desde arriba
   para esconder la franja blanca que trae el borde inferior de profile.webp */
.hb-float { box-shadow: none; }
.hb-float img { transform: scale(1.04); transform-origin: 50% 0; }

/* ---------- móvil: los banners asoman en la primera pantalla ----------
   En un móvil de verdad la barra del navegador se come ~200 px. La foto sale del alto
   disponible (pantalla − logo − firma − el trozo de franja que tiene que asomar), y los
   puntos suben a la altura de la firma, a la derecha. */
@media (max-width: 959px) {
	.v-b .hb {
		--cw: max(200px, min(86vw, 480px, calc((100svh - 292px) * 0.75)));
		padding: calc(var(--bar) + 14px) 0 14px;
	}
	.v-b .hb-dots { align-self: flex-end; margin: 18px calc((100vw - var(--cw)) / 2) 0 0; }
}
@media (max-width: 959px) {
	/* la firma cuelga 48 px bajo la foto: el hero le deja ese sitio */
	.v-b .hb { padding-bottom: 0; }
	.v-b .hb-dots { margin-top: 40px; }
}
@media (max-width: 959px) and (max-height: 600px) {
	.hb-sign { font-size: 18px; bottom: -38px; }
	.v-b .hb-dots { margin-top: 32px; }
}

/* ---------- móvil: foto a sangre (como A) + la franja PICK UP de B ----------
   En el móvil no hay sitio para marco, firma y flechas: la foto va de borde a borde bajo el
   logo y llega justo hasta la franja, que se ve entera en la primera pantalla (186 px:
   festón, adorno y tarjetas). Se pasa de foto deslizando; los puntos van sobre la foto. */
@media (max-width: 959px) {
	.v-b .hb {
		--cw: 100vw; --ch: max(260px, calc(100svh - var(--bar) - 186px));
		min-height: 0; padding: var(--bar) 0 0;
	}
	.v-b .hb-stage { width: 100%; height: var(--ch); }
	.v-b .hb-card, .v-b .hb-card.is-c { left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
	.v-b .hb-float { border-radius: 0; }
	.v-b .hb-deco { display: none; }
	.v-b .hb-dots { position: absolute; left: 50%; bottom: 12px; margin: 0; transform: translateX(-50%); align-self: auto; z-index: 4; }
	.v-b .hb-dots button { background: rgb(255 255 255 / 0.55); border-color: transparent; box-shadow: 0 0 0 1px rgb(107 76 51 / 0.15); }
	.v-b .hb-dots button[aria-selected="true"] { background: #fff; border-color: #fff; }
	.v-b .strip { margin-top: 0; }
}
@media (max-width: 959px) { .v-b .hb-dots { bottom: 26px; } }

/* móvil: una sola foto fija (a sangre, el fundido entre fotos deja dos caras a medias) y
   el festón de la franja montado directamente sobre la foto, sin la tira de papel */
@media (max-width: 959px) {
	.v-b .hb-float img, .v-b .hb-float img.on { opacity: 0; transition: none; }
	.v-b .hb-float img:first-child { opacity: 1; }
	.v-b .hb-dots { display: none; }
	.v-b .hb { --ch: max(260px, calc(100svh - var(--bar) - 171px)); }
	.v-b .strip { position: relative; z-index: 2; margin-top: -15px; }
}

/* móvil: la foto llega hasta arriba del todo, debajo del logo (como A). La barra ya es
   transparente en la portada y se vuelve sólida al bajar. */
@media (max-width: 959px) {
	.v-b .hb { padding-top: 0; --ch: max(320px, calc(100svh - 171px)); }
}
@media (max-width: 959px) { .v-b .hb-float img:first-child { object-position: 50% 3%; } }

/* ---------- PICK UP: solo el trébol, sin espadas ----------
   Más ligero; y en móvil la franja se compacta (líneas, adorno y tarjetas más arriba)
   para que las tarjetas quepan holgadas en la primera pantalla. */
.v-b .strip-orn { top: 14px; width: 40px; height: 40px; background: url(/img/orn-clover.svg) center / 30px no-repeat, radial-gradient(circle, var(--band) 0 46%, transparent 48%); }
@media (max-width: 959px) {
	.v-b .strip {
		padding: 38px 0 38px;
		background:
			linear-gradient(var(--frame), var(--frame)) 0 22px / 100% 1.5px no-repeat,
			linear-gradient(var(--frame-soft), var(--frame-soft)) 0 26px / 100% 1px no-repeat,
			linear-gradient(var(--frame-soft), var(--frame-soft)) 0 calc(100% - 26px) / 100% 1px no-repeat,
			linear-gradient(var(--frame), var(--frame)) 0 calc(100% - 22px) / 100% 1.5px no-repeat,
			linear-gradient(var(--band), var(--band)) 0 15px / 100% calc(100% - 30px) no-repeat;
	}
	.v-b .strip-orn { top: 8px; width: 32px; height: 32px; background-size: 24px, auto; }
	.v-b .strip-track { padding-block: 10px; }
	/* franja hasta el final de las tarjetas: 38 + 10 + 112 − 15 que monta sobre la foto */
	.v-b .hb { --ch: max(320px, calc(100svh - 145px)); }
}
/* y un margen bajo las tarjetas: que no queden pegadas a la barra del navegador */
@media (max-width: 959px) { .v-b .hb { --ch: max(320px, calc(100svh - 165px)); } }

/* ---------- menos trazos ----------
   Líneas dobles + festón + adorno + borde marrón + destellos eran demasiadas rayas para
   tan poco sitio. Las tarjetas: línea fina beige, sin destellos; lo que destaca es la
   imagen y el texto. En móvil, la franja sin líneas dobles: festón, banda y el trébol. */
.v-b .bn { border: 1px solid rgb(107 76 51 / 0.2); outline: none; box-shadow: none; border-radius: 10px; overflow: hidden; }
.v-b .bn img { border: 0; border-radius: 0; }
.v-b .bn::before { content: none; }
@media (min-width: 960px) {
	.v-b .bn img { border-radius: 6px; }
}
@media (max-width: 959px) {
	.v-b .strip { padding: 50px 0 34px; background: linear-gradient(var(--band), var(--band)) 0 15px / 100% calc(100% - 30px) no-repeat; }
	.v-b .strip-orn { top: 20px; width: 24px; height: 24px; background: url(/img/orn-clover.svg) center / 22px no-repeat; }
	.v-b .strip-track { padding-block: 6px; }
	/* franja hasta el final de las tarjetas (50 + 6 + 112 − 15) y un margen debajo */
	.v-b .hb { --ch: max(320px, calc(100svh - 171px)); }
}
@media (max-width: 959px) {
	/* menos aire entre el festón y las tarjetas: el trébol justo bajo las ondas */
	.v-b .strip { padding-top: 36px; padding-bottom: 28px; }
	.v-b .strip-orn { top: 14px; width: 20px; height: 20px; background-size: 18px; }
	.v-b .strip-track { padding-block: 4px; }
	.v-b .hb { --ch: max(320px, calc(100svh - 155px)); }
}

/* festón de arriba en menta: repite los destellos del logo y el lazo del tocado (en
   beige, sobre el gris de la foto, quedaba apagado) */
.v-b .hb::before { background: radial-gradient(circle at 50% 0, #b3dec8 0 66%, transparent 68%) 0 0 / 28px 14px repeat-x; }