/* Selector de reels del inicio de /contenido/ (reemplaza la composición Miga & café). */
.page-main .hero-reels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  height: auto;
  min-height: 570px;
}
.hero-reels .reel-stage { grid-column: 2; grid-row: 1; justify-self: end; width: min(300px, 100%); }
.hero-reels .reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  padding: 9px;
  border: 1px solid #fff;
  border-radius: 34px;
  background: #ffffff80;
  box-shadow: var(--glass-shadow, 0 18px 50px #283c5122), 0 0 30px #b598d017;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: rotate(2deg);
}
.hero-reels .reel-frame > iframe,
.hero-reels .reel-poster {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 25px;
  background: #101715;
}
.hero-reels .reel-poster { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.hero-reels .reel-poster img { width: 100%; height: 100%; object-fit: cover; background: #101715; transition: transform .6s; }
.hero-reels .reel-poster:hover img { transform: scale(1.03); }
.hero-reels .reel-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #ffffffcc;
  border-radius: 50%;
  color: #fff;
  background: #ffffff3d;
  box-shadow: 0 8px 30px #0003;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translate(-50%, -50%);
}
.hero-reels .reel-play svg { width: 30px; height: 30px; margin-left: 4px; }
.hero-reels .reel-now {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: .8125rem;
  color: #3f5764;
}
.hero-reels .reel-now span { text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; font-weight: 650; }
.hero-reels .reel-now strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); }

.hero-reels .reel-picker {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  display: grid;
  gap: 12px;
  width: min(210px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-reels .reel-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 12px 7px 7px;
  border: 1px solid #fff;
  border-radius: 18px;
  color: var(--ink);
  text-align: left;
  background: #ffffffb8;
  box-shadow: 0 8px 24px #283c5114, inset 0 1px 2px #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform .25s, background .25s, box-shadow .25s;
}
.hero-reels .reel-option:hover { transform: translateX(-3px); background: #fffffff0; }
.hero-reels .reel-option img { flex: none; width: 46px; height: 72px; border-radius: 11px; object-fit: cover; background: #101715; }
.hero-reels .reel-option span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hero-reels .reel-option strong { font-size: .9375rem; font-weight: 650; }
.hero-reels .reel-option small { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #5f7480; }
.hero-reels .reel-option[aria-pressed="true"] {
  background: linear-gradient(145deg, #efe6f9f2, #dcc6f0e8);
  box-shadow: 0 8px 24px #946cba2e, inset 0 1px 2px #fff;
}
.hero-reels .reel-option[aria-pressed="true"] small { color: #6b3f93; }

.page-main .hero-reels .hero-index { top: 4px; right: -6px; z-index: 2; }

@media (max-width: 1100px) {
  .page-main .hero-reels { min-height: 545px; gap: 16px; }
  .hero-reels .reel-stage { width: min(280px, 100%); }
  .hero-reels .reel-picker { width: min(180px, 100%); }
  .hero-reels .reel-option { gap: 10px; padding-right: 9px; }
}
@media (max-width: 900px) {
  .page-main .hero-reels { grid-template-columns: minmax(0, 1fr); min-height: 0; height: auto; max-width: 600px; }
  .hero-reels .reel-stage { grid-column: 1; grid-row: 1; justify-self: center; width: min(280px, 66vw); }
  .hero-reels .reel-picker { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .hero-reels .reel-option { flex-direction: column; align-items: stretch; gap: 7px; padding: 6px 6px 9px; text-align: center; }
  .hero-reels .reel-option:hover { transform: translateY(-2px); }
  .hero-reels .reel-option img { width: 100%; height: auto; aspect-ratio: 1; object-position: center 30%; }
  .hero-reels .reel-option strong { font-size: .8125rem; overflow-wrap: anywhere; }
  .hero-reels .reel-option small { font-size: .625rem; letter-spacing: .02em; overflow-wrap: anywhere; }
  .page-main .hero-reels .hero-index { right: max(0px, calc(50% - 205px)); }
}
@media (max-width: 570px) {
  .page-main .hero-reels { max-width: 425px; }
  .hero-reels .reel-frame { border-radius: 28px; padding: 7px; }
  .hero-reels .reel-frame > iframe, .hero-reels .reel-poster { border-radius: 21px; }
  .page-main .hero-reels .hero-index { width: 78px; height: 78px; font-size: .875rem; right: 0; }
  .hero-reels .reel-option small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reels .reel-frame { transform: none; }
  .hero-reels .reel-option, .hero-reels .reel-poster img { transition: none; }
}