/* ===== Bolsa Misteriosa 6 (v1) ===== */
.migas { font-size: .85em; color: var(--texto-2); margin-bottom: 12px; }
.migas a { color: inherit; }
.bm-hero { padding: clamp(28px, 4vw, 72px) 0 clamp(48px, 6vw, 110px); background: radial-gradient(circle at 78% 46%, var(--pastel-verde) 0 30%, transparent 30.2%), var(--fondo); overflow: hidden; }
.bm-hero__fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.bm-hero__titulo { margin: 0 0 18px; display: inline-block; transform-origin: 20% 90%; animation: balanceo 2.6s ease-in-out infinite alternate; }
.bm-hero__parrafo { max-width: 46ch; margin: 0 0 18px; }
.bm-sellos { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.bm-sellos li { font-weight: 800; font-size: 15px; background: #fff; border: 2px solid var(--tinta); border-radius: 999px; padding: 6px 14px; box-shadow: 3px 4px 0 var(--tinta); }
.bm-sellos li:nth-child(1) { background: var(--pastel-verde); } .bm-sellos li:nth-child(2) { background: var(--pastel-amarillo, #FBE7A6); } .bm-sellos li:nth-child(3) { background: var(--pastel-rosa); }
.bm-compra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bm-cantidad { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; padding: 4px; box-shadow: 4px 5px 0 var(--tinta); }
.bm-cantidad__boton { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pastel-turquesa); font: inherit; font-size: 24px; font-weight: 800; color: var(--tinta); cursor: pointer; }
.bm-cantidad__boton[disabled] { opacity: 0.35; cursor: default; }
.bm-cantidad__n { min-width: 2ch; text-align: center; font-weight: 800; font-size: 22px; }
.bm-compra__boton { flex: 1 1 260px; justify-content: center; }
.bm-nota { font-size: .8em; color: var(--texto-2); margin: 12px 0 0; }
/* DC-20261004-02: el aviso de colección, en letra pequeña junto a la compra */
.bm-aviso { font-size: .72em; line-height: 1.45; color: var(--texto-2); margin: 8px 0 0; max-width: 60ch; }

.bm-agotada { display: none; font-weight: 800; font-size: 20px; background: #fff; border: 3px dashed var(--tinta); border-radius: 20px; padding: 14px 18px; max-width: 34ch; }
.bm--agotada .bm-agotada { display: block; }
.bm--agotada .bm-compra { display: none; }
html:not(.js-bm) .bm-cantidad { display: none; } /* sin JavaScript, una bolsa cada vez */
/* La bolsa: se balancea sola y se agita al tocarla */
.bm-escena { display: grid; justify-items: center; gap: 16px; }
.bm-bolsa { transform: scale(1.35); transform-origin: 50% 0; margin: 10px 0 calc(0.35 * 420px); cursor: pointer; }
.bm-bolsa.agita .bolsa { animation: agita 700ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes agita { 10%, 90% { transform: rotate(-3deg) translateX(-2px); } 20%, 80% { transform: rotate(5deg) translateX(4px); } 30%, 50%, 70% { transform: rotate(-9deg) translateX(-6px); } 40%, 60% { transform: rotate(9deg) translateX(6px); } }
.bm-agita { font: inherit; font-weight: 800; font-size: 18px; min-height: 48px; padding: 8px 22px; border-radius: 999px; border: 3px solid var(--tinta); background: var(--c-amarillo); color: var(--tinta); cursor: pointer; box-shadow: 4px 5px 0 var(--tinta); transform: rotate(-3deg); }
.bm-agita:active { transform: rotate(-3deg) translate(2px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.bm-suena { margin: 0; font-weight: 700; min-height: 1.6em; text-align: center; }
.bm-chispa { position: absolute; font-family: var(--display); font-size: 26px; color: var(--c); pointer-events: none; animation: fiesta 1s ease-out forwards; }

/* ¿Qué te puede tocar? Sombras que se destapan */
.bm-toca { background: #fff; }
.bm-siluetas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.bm-silueta { text-align: center; cursor: pointer; outline: none; }
.bm-silueta__foto { width: min(100%, 150px); aspect-ratio: 1; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; background: var(--fondo); border: 3px dashed var(--panel-borde, #d9c9ad); }
.bm-silueta__foto img { width: 82%; height: 82%; object-fit: contain; filter: brightness(0) opacity(0.82); transition: filter 400ms ease, transform 400ms ease; }
.bm-silueta:hover .bm-silueta__foto img, .bm-silueta.espiado .bm-silueta__foto img { transform: scale(1.08) rotate(-4deg); }
.bm-silueta:hover .bm-silueta__foto img, .bm-silueta:focus-visible .bm-silueta__foto img, .bm-silueta.espiado .bm-silueta__foto img { filter: none; }
.bm-silueta:focus-visible .bm-silueta__foto { outline: 3px solid var(--tinta); outline-offset: 3px; }
.bm-silueta__nombre { font-weight: 800; }
.bm-silueta__q { font-family: var(--display); font-size: 26px; color: var(--c-morado); }
.bm-silueta__real { display: none; }
.bm-silueta:hover .bm-silueta__q, .bm-silueta:focus-visible .bm-silueta__q, .bm-silueta.espiado .bm-silueta__q { display: none; }
.bm-silueta:hover .bm-silueta__real, .bm-silueta:focus-visible .bm-silueta__real, .bm-silueta.espiado .bm-silueta__real { display: inline; }
.bm-silueta--rara { grid-column: 1 / -1; justify-self: center; width: clamp(130px, 14vw, 190px); }
.bm-silueta--rara .bm-silueta__foto { border: 3px dashed var(--c-amarillo); background: repeating-conic-gradient(from 0deg, #fff 0 15deg, #FFF6D6 15deg 30deg); }
.bm-rara__q { font-family: var(--display); font-size: clamp(48px, 4vw, 72px); color: var(--c-amarillo); -webkit-text-stroke: 2px var(--tinta); transition: transform 400ms ease; }
.bm-silueta--rara:hover .bm-rara__q, .bm-silueta--rara.espiado .bm-rara__q { transform: rotate(360deg) scale(1.15); }
.bm-silueta--rara .bm-silueta__q { font-family: inherit; font-size: 16px; font-weight: 800; color: var(--tinta); }
.bm-siluetas__mas { text-align: center; font-weight: 700; color: var(--texto-2); margin: 18px 0 0; }

/* Así la llenamos */
.bm-llenado { background: var(--pastel-verde); }
.bm-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px); }
.bm-pasos li { background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: 22px; box-shadow: 6px 8px 0 var(--tinta); }
.bm-pasos li:nth-child(2) { transform: rotate(1.5deg); } .bm-pasos li:nth-child(3) { transform: rotate(-1deg); }
.bm-pasos__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 20px; background: var(--c-coral); margin-bottom: 10px; }
.bm-pasos li:nth-child(2) .bm-pasos__n { background: var(--c-turquesa); } .bm-pasos li:nth-child(3) .bm-pasos__n { background: var(--c-morado); }
.bm-pasos h3 { margin: 0 0 6px; font-size: 21px; }
.bm-pasos p { margin: 0; }

/* Para regalar */
.bm-regalo { background: var(--fondo); }
.bm-ideas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.bm-ideas li { display: grid; gap: 6px; background: #fff; border: 2px solid var(--tinta); border-radius: 20px; padding: 18px; box-shadow: 4px 5px 0 var(--tinta); }
.bm-ideas li:nth-child(odd) { transform: rotate(-1.2deg); } .bm-ideas li:nth-child(even) { transform: rotate(1.2deg); }
.bm-ideas strong { font-size: 19px; }

/* v8.2 (V15): Así la llenamos y Para regalar juntas, en dos columnas; pasos como .pag-proceso (número en la
   esquina) y las ideas de regalo como etiquetas colgantes */
.bm-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.bm-regalo { background: none; }
.bm-pasos { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.bm-pasos li { position: relative; padding: 18px 22px 18px 34px; }
.bm-pasos__n { position: absolute; top: -14px; left: -12px; margin: 0; font-family: var(--display); font-size: 22px; border: 3px solid var(--tinta); }
.bm-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-ideas li { position: relative; border-radius: 10px 26px 26px 10px; padding: 18px 18px 18px 38px; border-width: 3px; }
.bm-ideas li::before { content: ""; position: absolute; left: 12px; top: 22px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--pastel-verde); }
.bm-ideas li:nth-child(2) { margin-top: 26px; } .bm-ideas li:nth-child(3) { margin-top: -26px; }
@media (max-width: 1023px) { .bm-dos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .bm-ideas { grid-template-columns: minmax(0, 1fr); } .bm-ideas li:nth-child(n) { margin-top: 0; } }
/* v8.2 (V16): el botón no se estira hasta 560 px */
.bm-compra__boton { flex: 0 1 auto; min-width: min(320px, 100%); }
/* v8.2: dudas con la misma tarjeta que Qué son y Preguntas (.pag-duda) */
.bm-duda { background: #fff; border: 2px solid var(--tinta); border-radius: 18px; margin: 0 0 10px; padding: 0; overflow: hidden; }
.bm-duda > summary { display: flex; width: 100%; min-height: 0; padding: 14px 52px 14px 18px; text-decoration: none; font-weight: 800; font-size: inherit; position: relative; }
.bm-duda > summary::after { content: "+"; border: 0; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel-azul); font-size: 20px; transform: translateY(-50%); transition: transform 200ms; }
.bm-duda[open] > summary::after { transform: translateY(-50%) rotate(45deg); background: var(--pastel-rosa); }
.bm-duda[open] { box-shadow: 4px 5px 0 var(--tinta); }
.bm-duda .mas__cuerpo p { margin: 0; padding: 0 18px 16px; }
/* v8.2: títulos sin huérfana y h2 de sección a ~48 px */
.pag-junto { display: inline-flex; flex-wrap: nowrap; align-items: flex-end; gap: inherit; }
/* móvil estrecho (Borja 29/09): un título nunca se sale; la palabra (o la pareja) que no cabe encoge un poco */
.display, .cara, .pag-junto { max-width: 100%; }
.cara .svgt { max-width: calc(100% - 0.3em); min-width: 0; } /* el contorno y la sombra pintan fuera de la caja */
.bm-hero__titulo, #titulo-toca { text-wrap: balance; }
@media (min-width: 768px) { #titulo-toca { font-size: clamp(36px, 1.67vw + 16px, 48px); } }

/* Dudas y cruce */
.bm-mas { background: linear-gradient(170deg, #fff 0 60%, var(--pastel-azul) 60%); }
.bm-mas__fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.bm-cruce { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-radius: 28px; padding: clamp(22px, 2.4vw, 36px); box-shadow: 8px 10px 0 var(--tinta); transform: rotate(1.5deg); transition: transform 200ms; }
.bm-cruce:hover { transform: rotate(0deg) translateY(-4px); }
.bm-cruce__pregunta { font-weight: 800; }
.bm-cruce__titulo { font-size: clamp(30px, 2vw + 16px, 50px); transform-origin: 30% 90%; animation: balanceo 2.6s ease-in-out infinite alternate; }

@media (max-width: 1023px) {
  .bm-siluetas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bm-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bm-hero__fila, .bm-mas__fila { grid-template-columns: minmax(0, 1fr); }
  .bm-bolsa { transform: none; margin: 8px 0 0; }
  .bm-siluetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-pasos, .bm-ideas { grid-template-columns: minmax(0, 1fr); }
  .bm-pasos li:nth-child(n), .bm-ideas li:nth-child(n) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-hero__titulo, .bm-cruce__titulo, .bm-bolsa.agita .bolsa, .bm-chispa { animation: none; }
  .bm-silueta__foto img { transition: none; }
}