/* ══════════════════════════════════════════════════
   TIENDA PAGE — layout sidebar (override)
   ══════════════════════════════════════════════════ */

/* Override: tienda-main ahora es flex row */
.tienda-main {
  display: flex;
  min-height: 100vh;
  padding: 0;
}

/* Sidebar izquierdo */
.tienda-sidebar {
  width: 260px;
  min-width: 260px;
  padding: 100px 28px 80px;
  border-right: 1px solid var(--b0);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.tienda-kicker {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.tienda-sidebar-title {
  font-family: Georgia, serif;
  font-size: clamp(1.6rem, 2vw, 2.4rem);
  font-weight: normal;
  color: var(--fg);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.tienda-sep {
  width: 24px;
  height: 1px;
  background: var(--b0);
  margin-bottom: 24px;
}

/* ── Rack module (widget de equipo de estudio en sidebar) ── */
.rack-module {
  margin-top: auto;
  padding-top: 32px;
}

/* Visibility toggle */
.rack-module--default .rack-variant--video,
.rack-module--video   .rack-variant--audio,
.rack-module--all     .rack-variant { display: none; }
.rack-module--all .rack-variant--audio,
.rack-module--all .rack-variant--video { display: block; }

/* Shared panel */
.rack-panel {
  background: #060606;
  border: 1px solid rgba(237,233,220,.1);
  border-radius: 2px;
  padding: 10px;
}

.rack-label {
  font-family: var(--f-mono);
  font-size: 6.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(237,233,220,.18);
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

/* ── VU meters (variante audio) — barras horizontales ── */
.vu-pair {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vu-meter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.vu-label {
  font-family: var(--f-mono);
  font-size: 7px;
  color: rgba(237,233,220,.35);
  letter-spacing: .08em;
  text-transform: uppercase;
  width: 10px;
  flex-shrink: 0;
}

.vu-track {
  flex: 1;
  height: 10px;
  background: rgba(237,233,220,.06);
  border-radius: 1px;
  overflow: hidden;
}

.vu-fill {
  height: 100%;
  width: 0%;
  background: rgba(237,233,220,.4);
  border-radius: 1px;
  transition: none;
}

.rack-module--default .vu-fill {
  background: linear-gradient(to right, #e6a800, var(--c-audio));
}

/* ── Waveform + vectorscope (variante video) ── */
.rack-wfm {
  width: 100%;
  height: 40px;
  margin-bottom: 6px;
}

.rack-wfm svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rack-wfm-path {
  stroke: rgba(237,233,220,.5);
  stroke-width: 1;
  fill: none;
}

.rack-module--video .rack-wfm-path { stroke: rgba(130,49,255,.85); }

.rack-vectorscope {
  display: flex;
  gap: 1px;
  height: 8px;
}

.rack-vec-bar {
  height: 100%;
  border-radius: 1px;
}

.rack-vec-bar:nth-child(1) { flex: 1;   background: rgba(237,233,220,.32); }
.rack-vec-bar:nth-child(2) { flex: 1.2; background: rgba(237,233,220,.24); }
.rack-vec-bar:nth-child(3) { flex: 0.9; background: rgba(237,233,220,.16); }
.rack-vec-bar:nth-child(4) { flex: 0.9; background: rgba(237,233,220,.1); }

.rack-module--video .rack-vec-bar:nth-child(1) { background: rgba(130,49,255,.55); }
.rack-module--video .rack-vec-bar:nth-child(2) { background: rgba(130,49,255,.4); }
.rack-module--video .rack-vec-bar:nth-child(3) { background: rgba(130,49,255,.28); }
.rack-module--video .rack-vec-bar:nth-child(4) { background: rgba(237,233,220,.18); }

/* ── Readouts ── */
.rack-readouts {
  background: #0a0a0a;
  border: 1px solid rgba(237,233,220,.1);
  border-top: none;
  border-radius: 0 0 2px 2px;
  padding: 6px 10px;
  display: flex;
}

.rack-readouts--meta {
  border-top: 1px solid rgba(237,233,220,.06);
  border-radius: 0;
  justify-content: space-between;
  padding: 4px 10px;
}

.rack-readouts--meta .rack-rd__label {
  font-size: 6px;
  color: rgba(237,233,220,.18);
}

.rack-rd {
  flex: 1;
  padding: 0 6px;
  border-right: 1px solid rgba(237,233,220,.06);
}
.rack-rd:first-child { padding-left: 0; }
.rack-rd:last-child  { border-right: none; }

.rack-rd__label {
  font-family: var(--f-mono);
  font-size: 6px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(237,233,220,.22);
}

.rack-rd__val {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(237,233,220,.7);
}

.rack-module--default .rack-rd__val { color: rgba(245,208,32,.85); }
.rack-module--video   .rack-rd__val { color: rgba(130,49,255,.85); }

/* ── Status LED ── */
.rack-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
}

.rack-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.rack-led--signal {
  background: rgba(57,255,20,.7);
  box-shadow: 0 0 4px rgba(57,255,20,.4);
}

.rack-led--rec {
  background: rgba(255,70,70,.7);
  box-shadow: 0 0 4px rgba(255,70,70,.4);
  animation: rack-led-pulse 1.2s ease-in-out infinite;
}

@keyframes rack-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.rack-status__label {
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(237,233,220,.25);
}

/* ── Rack all-filter: ambas variantes visibles y comprimidas ── */
.rack-module--all .rack-panel {
  padding: 6px 8px;
}

.rack-module--all .rack-label {
  font-size: 5.5px;
  margin-bottom: 5px;
}

.rack-module--all .vu-track {
  height: 8px;
}

.rack-module--all .vu-pair {
  gap: 5px;
}

.rack-module--all .vu-label {
  font-size: 6px;
  width: 8px;
}

.rack-module--all .rack-variant--audio,
.rack-module--all .rack-variant--video {
  margin-bottom: 6px;
}

.rack-module--all .rack-readouts--meta {
  padding: 2px 8px;
}

.rack-module--all .rack-rd__label {
  font-size: 5px;
}

.rack-module--all .rack-rd__val {
  font-size: 8px;
}

.rack-module--all .rack-wfm {
  height: 28px;
  margin-bottom: 3px;
}

.rack-module--all .rack-vectorscope {
  height: 5px;
}

.rack-module--all .rack-readouts {
  padding: 3px 8px;
}

.rack-module--all .rack-status {
  padding-top: 4px;
}

.rack-module--all .rack-led {
  width: 4px;
  height: 4px;
}

.rack-module--all .rack-status__label {
  font-size: 6px;
}

/* Área de contenido principal */
.tienda-content-area {
  flex: 1;
  min-width: 0;
  padding: 128px 48px 80px;
}

/* Override grid dentro del content-area */
.tienda-content-area .tienda-grid {
  max-width: 640px;
  margin: 0;
  padding: 0 0 4rem;
}

/* Header mobile */
.tienda-header--mobile { display: none; }

/* ── Filtros tienda — tf-btn con punto de color ── */
.tienda-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.tienda-filter--sidebar {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
}

.tienda-filter--sidebar .tf-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.tienda-filter--mobile { display: none; }

.tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--b2);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.tf-btn:hover,
.tf-btn.is-active { border-color: var(--fg); color: var(--fg); }

.tf-btn--sonido.is-active { border-color: var(--c-audio); color: var(--c-audio); }
.tf-btn--video.is-active  { border-color: var(--c-video); color: var(--c-video); }



/* Mobile tienda */
@media (max-width: 900px) {
  .tienda-main         { flex-direction: column; }
  .tienda-sidebar      { display: none; }
  .tienda-header--mobile { display: block; padding: 90px 20px 0; }
  .tienda-header--mobile .tienda-kicker { margin-bottom: 8px; }
  .tienda-header--mobile .tienda-sidebar-title {
    font-size: clamp(2rem, 6vw, 2.8rem);
    margin-bottom: 20px;
  }
  .tienda-filter--mobile  { display: flex; padding: 0 20px; margin-bottom: 2rem; }
  .tienda-content-area    { padding: 16px 20px 60px; }
  .tienda-content-area .tienda-grid { max-width: 100%; padding: 0 0 3rem; }
}

/* ══════════════════════════════════════════════════
   PRODUCT DETAIL — neumórfico (override)
   ══════════════════════════════════════════════════ */

/* Fix: main sin padding propio, el grid lo maneja */
.producto-main { padding: 0; }

/* Layout flex — columnas pegadas, gap mínimo (override de regla antigua línea 4067) */
.producto-card-body .producto-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 8px;
  padding: 7px 8px;
}

@media (max-width: 820px) {
  .producto-card-body .producto-layout { flex-direction: column; padding: 7px 8px; }
}

/* Columna izquierda — video sticky 100vh */
.producto-media-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 1 50%;
  width: 50%;
  padding: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

@media (max-width: 820px) {
  .producto-media-col {
    width: 100%; flex: none; padding: 0;
    position: static; height: auto;
  }
}

.producto-video-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 0 9px rgba(125,106,189,0.7), 0 0 26px 2px rgba(130,49,255,0.4);
}

.producto-video-wrap video,
.producto-video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.producto-video-wrap--placeholder {
  background: linear-gradient(135deg, #14101c 0%, #1f1a2e 100%);
}

@media (max-width: 820px) {
  .producto-video-wrap { height: 55vw; min-height: 240px; }
  .producto-video-wrap { position: static; }
}

/* Columna derecha — calca referencia (ref: div_block-4-12418) */
.producto-info-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 50%;
  width: 50%;
  padding: 0;
}

@media (max-width: 820px) {
  .producto-info-col { width: 100%; flex: none; }
}

/* Caja neumórfica — ocupa casi todo el ancho (ref: #box-shadow 542px en col 559px) */
.producto-info-box {
  background: #14101c;
  border-radius: 21px;
  width: 100%;
  box-shadow:
    inset 5px 5px 8px #191a21,
    inset -5px -5px 8px #252631;
  padding: 50px 0;               /* ref: padding 50px 0 */
}

.producto-inner {
  width: 82%;
  margin: 0 auto;
  padding: 0;                    /* el padding vertical va en .producto-info-box */
}

@media (max-width: 820px) {
  .producto-info-box { padding: 32px 0; }
  .producto-inner    { width: 90%; }
}

/* Imagen del producto (portada ACF / variación) */
.producto-img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.producto-img {
  width: 203px;
  max-width: 100%;
  display: block;
  transition: opacity .25s;
}

/* Bloque título + precio — layout vertical apilado */
.producto-title-row {
  display: block;
  margin-bottom: 1.2rem;
  width: 100%;
}

.producto-title-row .producto-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--b0);
}

.producto-title-row .producto-price {
  display: block;
  text-align: left;
  padding-top: 0.4rem;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  letter-spacing: -0.015em;
}

/* Valoración media — bajo la imagen del producto */
.producto-rating {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 auto 28px;
  padding: 9px 18px;
  border: 1px solid var(--b1);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  transition: border-color .2s;
}
.producto-rating__star {
  color: var(--accent);
  font-size: 1.15rem;
  line-height: 1;
}
.producto-rating__num  { color: var(--fg); font-size: 0.9rem; }
.producto-rating__sep,
.producto-rating__count { color: var(--muted); }

/* El widget completo es un enlace */
a.producto-rating {
  text-decoration: none;
  cursor: pointer;
}
a.producto-rating:hover {
  border-color: var(--b2);
}
a.producto-rating:hover .producto-rating__count { color: var(--fg); }

/* Tema sonido — estrella y score en ámbar */
.producto-main--sonido .producto-rating          { border-color: oklch(64% 0.06 90 / 0.3); }
.producto-main--sonido .producto-rating__star    { color: var(--c-audio); }
.producto-main--sonido .producto-rating__num     { color: oklch(96% 0.04 95); }
.producto-main--sonido .producto-rating__sep,
.producto-main--sonido .producto-rating__count   { color: oklch(64% 0.06 90); }
.producto-main--sonido a.producto-rating:hover   { border-color: oklch(84% 0.19 102 / 0.5); }
.producto-main--sonido a.producto-rating:hover .producto-rating__count { color: oklch(94% 0.08 95); }

/* Breadcrumb dentro del box */
.producto-breadcrumb { margin-bottom: 0.8rem; }

/* Desc dentro del box */
.producto-desc { margin-bottom: 1.2rem; }

/* Reproductor de audio en detalle */
.producto-player-wrap {
  margin: 1.5rem 0;
  border-top: 1px solid var(--b0);
  padding-top: 1.2rem;
}
.producto-player-wrap .daw-player { margin: 0; }

/* Tematización sonido — info box neumórfico en amarillo */
.producto-main--sonido .producto-info-box {
  background: hsl(53 61% 3% / 1);
}

/* Texto claro ámbar sobre info-box oscuro */
.producto-main--sonido .producto-inner,
.producto-main--sonido .producto-inner *           { color: oklch(86% 0.07 92); }
.producto-main--sonido .pa-large-play::before,
.producto-main--sonido .pa-large-pause::before     { color: oklch(84% 0.19 102); }
.producto-main--sonido .producto-breadcrumb a,
.producto-main--sonido .producto-back              { color: oklch(64% 0.06 90); }
.producto-main--sonido .producto-back:hover        { color: oklch(94% 0.08 95); }
.producto-main--sonido .producto-title             { color: oklch(96% 0.04 95); border-bottom-color: oklch(64% 0.06 90 / 0.22); }
.producto-main--sonido .producto-price             { color: var(--c-audio); }

/* Descripción completa sobre info-box oscuro */
.producto-main--sonido .producto-full-desc         { color: oklch(82% 0.07 92); border-top-color: oklch(64% 0.06 90 / 0.25); }
.producto-main--sonido .producto-full-desc p       { color: oklch(82% 0.07 92); }
.producto-main--sonido .producto-full-desc strong  { color: oklch(96% 0.04 95); }
.producto-main--sonido .producto-full-desc h2,
.producto-main--sonido .producto-full-desc h3      { color: oklch(96% 0.04 95); }
.producto-main--sonido .producto-full-desc .faq-container > h2 { color: oklch(64% 0.06 90); }
.producto-main--sonido .producto-full-desc details { border-top-color: oklch(64% 0.06 90 / 0.22); }
.producto-main--sonido .producto-full-desc details:last-of-type { border-bottom-color: oklch(64% 0.06 90 / 0.22); }
.producto-main--sonido .producto-full-desc summary  { color: oklch(94% 0.06 95); }
.producto-main--sonido .producto-full-desc summary::after { color: var(--c-audio); }
.producto-main--sonido .producto-full-desc details li { color: oklch(82% 0.07 92); }

/* ══════════════════════════════════════════════════
   PRODUCT DETAIL — outer plastic card + handle
   ══════════════════════════════════════════════════ */

/* Fijar padding del main (el plastic maneja el espacio) */
.producto-main { padding-top:5%; overflow-x: clip; }

/* Contenedor externo — centra asa + tarjeta */
.producto-plastic {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 85px 13px 60px;
  min-height: 100vh;
}

/* Asa (ref: div_block-90-12418) */
.producto-handle {
  width: 144px;
  height: 50px;
  border-radius: 15px 15px 0 0;
  background: #b08afd1a;
  box-shadow: 0 10px 17px #b6b0c0, 0 0 0 3px rgb(116 79 168 / 75%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  flex-shrink: 0;
}

/* Barra interna del asa — perforación = fondo de la web */
.producto-handle-bar {
  width: 63%;
  border-radius: 21px;
  background: var(--bg);
  min-height: 19px;
  max-height: 19px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

/* Agujero del asa — perforación = fondo de la web */
.producto-handle-hole {
  border-radius: 100%;
  min-width: 35px;
  max-width: 35px;
  min-height: 30px;
  max-height: 35px;
  background: var(--bg);
}

/* Tarjeta plastificada (ref: section-25-12418) */
.producto-card-body {
  background: #1f2029;
  border-radius: 21px;
  max-width: 1117px;
  width: 100%;
  min-height: 704px;
  box-shadow:
    0px 2px 7px #929096,
    0 0 26px 2px rgb(116 79 168 / 75%),
    1px -2px 0px #1f1f1f,
    0px -1px 8px #ffffff,
    0px -2px 0px 7px #191124;
  padding: 0;
}

/* Inner wrap — overlay translúcido + centra el layout (ref: ct-section-inner-wrap) */
.producto-card-inner {
  background: rgba(176, 138, 253, 0.15);
  border-radius: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  min-height: 704px;
  width: 100%;
}

/* Tematización categoría sonido → plástico amarillo con profundidad */

/* Asa — sutil como referencia (rgba(176,138,253,0.1) ≈ 0.10 opac) */
.producto-main--sonido .producto-handle {
  background-color: hsl(53.21deg 94.64% 21.96%);
  box-shadow: 0 10px 17px #b6b0c0, 0 0 0 3px hsl(51 115% 44% / 1);
}
/* Inner wrap sonido: overlay amarillo */
.producto-main--sonido .producto-card-inner {
  background: oklch(0 0 0 / 0.48);
}

/* Interior de la funda: gradiente amarillo — proporciones de sombra iguales a referencia */
.producto-main--sonido .producto-card-body {
  background: linear-gradient(
    155deg,
    oklch(80% 0.17 102) 0%,
    oklch(73% 0.16 96)  45%,
    oklch(66% 0.13 88) 100%
  );
  box-shadow: 0px 2px 7px #969690, 0 0 26px 2px rgb(229 201 0), 1px -2px 0px #1f1f1f, 0px -1px 8px #ffffff, 0px -2px 0px 7px #242311;
}

/* Video wrap */
.producto-main--sonido .producto-video-wrap {
  box-shadow: 0px 0px 9px hsl(49 64% 42% / 1);
}

/* Responsive */
@media (max-width: 820px) {
  .producto-plastic    { padding: 70px 8px 40px; }
  .producto-handle     { width: 110px; height: 40px; }
  .producto-card-body  { border-radius: 14px; }
  .producto-card-inner { border-radius: 14px; padding: 0; }
}

/* ══════════════════════════════════════════════════
   PRODUCT AUDIO PLAYER — sequential playlist (pa-*)
   ══════════════════════════════════════════════════ */

.producto-player-wrap {
  margin: 1.5rem 0 1rem;
  border-top: 1px solid rgba(237,233,220,0.1);
  padding-top: 1.2rem;
}

.pa-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

/* Botón play/pause grande */
.pa-large-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.pa-large-toggle:hover { background: #9b55ff; }

.pa-large-play,
.pa-large-pause {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-style: normal;
}
.pa-large-play::before  { content: '▶'; font-size: 12px; color: #fff; transform: translateX(1px); }
.pa-large-pause::before { content: '⏸'; font-size: 13px; color: #fff; }

/* Info box */
.pa-info-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pa-track-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.pa-track-title {
  font-size: 0.72rem;
  color: var(--fg);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-time {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Barra de progreso */
.pa-progress-wrap { cursor: pointer; }

.pa-progress {
  position: relative;
  height: 3px;
  background: rgba(237,233,220,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.pa-buffer {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(237,233,220,0.15);
  width: 0;
  transition: width .3s;
}

.pa-indicator {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0;
  left: 0;
  /* usamos left% via JS */
}
.pa-progress-wrap { position: relative; }
.pa-indicator { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }

/* Controles prev/next */
.pa-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pa-prev, .pa-next {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: var(--fg);
  transition: background .2s;
  user-select: none;
}
.pa-prev:hover, .pa-next:hover { background: rgba(255,255,255,0.12); }
.pa-disabled { opacity: 0.3; pointer-events: none; }

.pa-prev::before { content: '◀◀'; font-size: 7px; }
.pa-next::before { content: '▶▶'; font-size: 7px; }

/* Playlist */
.pa-playlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.pa-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.pa-row:hover { background: rgba(255,255,255,0.05); }

.pa-small-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pa-small-toggle:hover { background: rgba(130,49,255,0.3); }

.pa-small-play,
.pa-small-pause {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-style: normal;
}
.pa-small-play::before  { content: '▶'; font-size: 8px; color: var(--muted); transform: translateX(0.5px); }
.pa-small-pause::before { content: '⏸'; font-size: 8px; color: var(--accent); }

.pa-num {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
}

.pa-track-name {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-track-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-track-link:hover,
.pa-active-track .pa-track-link { color: var(--fg); }
.pa-active-track .pa-track-link { color: var(--accent); }

/* Sonido → player sobre fondo oscuro: toggles amarillos brillantes, textos crema */
.producto-main--sonido .pa-large-toggle        { background: oklch(84% 0.19 102); }
.producto-main--sonido .pa-large-toggle:hover  { background: oklch(90% 0.18 100); }
.producto-main--sonido .pa-large-play::before,
.producto-main--sonido .pa-large-pause::before { color: oklch(18% 0.04 84); }
.producto-main--sonido .pa-player              { background: oklch(86% 0.07 92 / 0.06); }
.producto-main--sonido .pa-track-title         { color: oklch(92% 0.07 95); }
.producto-main--sonido .pa-time                { color: oklch(64% 0.06 90); }
.producto-main--sonido .pa-num                 { color: oklch(64% 0.06 90); }
.producto-main--sonido .pa-progress            { background: oklch(86% 0.07 92 / 0.15); }
.producto-main--sonido .pa-indicator           { background: oklch(84% 0.19 102); }
.producto-main--sonido .pa-prev,
.producto-main--sonido .pa-next                { background: oklch(86% 0.07 92 / 0.08); color: oklch(86% 0.07 92); }
.producto-main--sonido .pa-prev:hover,
.producto-main--sonido .pa-next:hover          { background: oklch(86% 0.07 92 / 0.16); }
.producto-main--sonido .pa-row:hover           { background: oklch(86% 0.07 92 / 0.06); }
.producto-main--sonido .pa-small-toggle        { background: oklch(86% 0.07 92 / 0.08); }
.producto-main--sonido .pa-small-toggle:hover  { background: oklch(84% 0.19 102 / 0.35); }
.producto-main--sonido .pa-small-play::before  { color: oklch(64% 0.06 90); }
.producto-main--sonido .pa-small-pause::before { color: oklch(84% 0.19 102); }
.producto-main--sonido .pa-track-link          { color: oklch(64% 0.06 90); }
.producto-main--sonido .pa-track-link:hover    { color: oklch(92% 0.07 95); }
.producto-main--sonido .pa-active-track .pa-track-link { color: oklch(84% 0.19 102); }

/* ══════════════════════════════════════════════════
   PRODUCT REVIEWS — bloque editorial (no marketplace)
   Inspirado en columna de "voces" tipo revista: tipografía editorial,
   cadencia rítmica, sin barras horizontales tipo Amazon.
   ══════════════════════════════════════════════════ */

/* Separador minimalista entre tarjeta y bloque de valoraciones */
.producto-reviews-sep {
  border: none;
  border-top: 1px solid var(--b0);
  max-width: 1117px;
  width: calc(100% - 26px); /* 13px padding a cada lado, igual que .producto-plastic */
  margin: 72px auto 0;
}

.product-reviews {
  max-width: 1117px;
  width: calc(100% - 26px); /* alineado con .producto-card-body */
  margin: 56px auto 120px;
  padding: 0;
  color: var(--fg);
  font-family: Georgia, 'Times New Roman', serif;
}

.product-reviews__box {
  background: var(--surface);
  box-shadow:
    6px 8px 24px rgba(0, 0, 0, 0.55),
    -4px -5px 14px rgba(255, 255, 255, 0.035);
  border-radius: 18px;
  padding: 44px 44px 52px;
}

@media (max-width: 820px) {
  .producto-reviews-sep { width: calc(100% - 16px); }
  .product-reviews      { width: calc(100% - 16px); margin-top: 40px; }
  .product-reviews__box { padding: 28px 24px 36px; border-radius: 14px; }
}

/* ── Cabecera ────────────────────────────────────────────── */
.product-reviews__title {
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0 0 14px;
  color: oklch(0.97 0.008 290);
}

.product-reviews__meta {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 56px;
  color: oklch(0.78 0.005 290);
}
.product-reviews__meta em {
  font-style: italic;
  color: oklch(0.92 0.006 290);
  font-weight: 400;
}
.product-reviews__meta-sep {
  display: inline-block;
  margin: 0 8px;
  color: oklch(0.5 0.005 290);
  font-style: normal;
}
.product-reviews__score {
  font-size: 1.4em;
  font-style: italic;
  color: var(--accent, #8231ff);
}
.product-reviews__score-of {
  color: oklch(0.5 0.005 290);
  font-style: italic;
}
.product-reviews__meta--empty em { color: oklch(0.65 0.005 290); }

/* ── Lista de reseñas ────────────────────────────────────── */
.product-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-reviews__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 18px;
  padding: 32px 0;
  border-top: 1px solid var(--b0);
}
.product-reviews__item:first-child { border-top: none; padding-top: 0; }
.product-reviews__item:last-child  { padding-bottom: 0; }

/* Cifra de orden — marca de columna editorial */
.product-reviews__item-mark {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: oklch(0.45 0.005 290);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.product-reviews__item-body { min-width: 0; }

.product-reviews__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 12px;
  font-family: Georgia, serif;
}
.product-reviews__item-author {
  font-size: 18px;
  font-weight: 400;
  color: oklch(0.97 0.008 290);
}
.product-reviews__verified {
  font-size: 12px;
  font-style: italic;
  color: oklch(0.72 0.13 155);
  letter-spacing: 0;
}
.product-reviews__verified::before { content: '· '; color: oklch(0.45 0.005 290); }
.product-reviews__item-date {
  font-size: 12px;
  font-style: italic;
  color: oklch(0.55 0.005 290);
  font-variant-numeric: tabular-nums;
}
.product-reviews__item-date::before { content: '· '; color: oklch(0.45 0.005 290); font-style: normal; }
.product-reviews__item-rating {
  margin-left: auto;
  font-family: Georgia, serif;
  font-size: 15px;
  font-style: italic;
}
.product-reviews__item-rating-num { color: var(--accent, #8231ff); font-style: italic; }
.product-reviews__item-rating-of  { color: oklch(0.5 0.005 290); }

.product-reviews__item-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: oklch(0.88 0.005 290);
}

/* ── "Leer más voces" ────────────────────────────────────── */
.product-reviews__load-more {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 40px 0 0;
  font-family: Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: var(--accent, #8231ff);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s ease, opacity .2s ease;
}
.product-reviews__load-more:hover { opacity: 0.7; }
.product-reviews__load-more:disabled { opacity: 0.4; cursor: wait; }

/* ── CTA inferior ────────────────────────────────────────── */
.product-reviews__cta {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--b0);
}
.product-reviews__cta-text {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: oklch(0.72 0.005 290);
  line-height: 1.5;
}
.product-reviews__cta-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  font-style: italic;
  color: var(--accent, #8231ff);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity .2s ease;
}
.product-reviews__cta-link:hover { opacity: 0.7; }

/* ── Tematización por categoría ──────────────────────────── */
.producto-main--sonido .product-reviews__score,
.producto-main--sonido .product-reviews__item-rating-num,
.producto-main--sonido .product-reviews__load-more,
.producto-main--sonido .product-reviews__cta-link {
  color: var(--c-audio, #f5d020);
}

/* ── Formulario inline (inyectado por JS) ───────────────── */
.product-reviews__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
}
.product-reviews__rating-input {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.product-reviews__rating-input::before {
  content: 'Tu nota:';
  font-family: Georgia, serif;
  font-style: italic;
  color: oklch(0.65 0.005 290);
  font-size: 15px;
  margin-right: 6px;
}
.pr-rate-star {
  appearance: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: oklch(0.4 0.005 290);
  transition: color .15s ease, transform .15s ease;
  line-height: 1;
}
.pr-rate-star::before { content: '★'; }
.pr-rate-star:hover { transform: translateY(-1px); }
.pr-rate-star.is-hover,
.pr-rate-star.is-on { color: var(--accent, #8231ff); }
.producto-main--sonido .pr-rate-star.is-hover,
.producto-main--sonido .pr-rate-star.is-on { color: var(--c-audio, #f5d020); }

.product-reviews__textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid oklch(0.3 0.005 290);
  color: oklch(0.95 0.006 290);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  padding: 8px 0 10px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  transition: border-color .2s ease;
}
.product-reviews__textarea::placeholder {
  color: oklch(0.5 0.005 290);
  font-style: italic;
}
.product-reviews__textarea:focus {
  outline: none;
  border-bottom-color: var(--accent, #8231ff);
}
.producto-main--sonido .product-reviews__textarea:focus {
  border-bottom-color: var(--c-audio, #f5d020);
}

.product-reviews__form-footer {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.product-reviews__form-submit {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 17px;
  font-style: italic;
  color: var(--accent, #8231ff);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}
.product-reviews__form-submit:hover { opacity: 0.7; }
.product-reviews__form-submit:disabled { opacity: 0.4; cursor: wait; }
.producto-main--sonido .product-reviews__form-submit { color: var(--c-audio, #f5d020); }

.product-reviews__form-msg {
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: oklch(0.65 0.005 290);
}
.product-reviews__form-msg.is-error   { color: oklch(0.7 0.18 25); }
.product-reviews__form-msg.is-success { color: oklch(0.72 0.13 155); }




/* ── Comentarios cuaderno ───────────────────────────────────────────── */

.post-comments {
  margin-top: 56px;
  color: var(--fg);
  font-family: Georgia, 'Times New Roman', serif;
}

/*
  Neumorphism sobre --bg (#0c0c0a, negro cálido).
  Superficie: --surface (#131311), ya calibrado para esta paleta.
  Sombras: negro puro + blanco puro con alpha — sin hue propio,
  para no introducir un cast de color que pelee con el fondo.
*/
.post-comments__box {
  background: var(--surface);
  box-shadow:
    6px 8px 24px rgba(0, 0, 0, 0.55),
    -4px -5px 14px rgba(255, 255, 255, 0.035);
  border-radius: 18px;
  padding: 44px 44px 52px;
}

/* Cabecera */
.post-comments__title {
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--fg);
}

.post-comments__meta {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 44px;
  color: var(--muted);
}
.post-comments__meta em {
  font-style: italic;
  color: var(--fg);
  font-weight: 400;
}
.post-comments__meta--empty em { color: var(--muted); }

/* Lista */
.post-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-comments__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 24px;
  padding: 32px 0;
  border-top: 1px solid var(--b0);
  align-items: start;
}
.post-comments__item:first-child { border-top: none; padding-top: 0; }
.post-comments__item:last-child  { padding-bottom: 0; }

/* Avatar */
.post-comments__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding-top: 2px;
}
.post-comments__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-comments__avatar-initial {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
}

/* Cuerpo del comentario */
.post-comments__item-body { min-width: 0; }

.post-comments__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 10px;
  font-family: Georgia, serif;
}
.post-comments__item-author {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fg);
}
.post-comments__item-date {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.post-comments__item-date::before {
  content: '· ';
  color: var(--b2);
  font-style: normal;
}
.post-comments__item-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(237, 233, 220, 0.85);
}
.post-comments__item-text > p              { margin: 0 0 0.55em; }
.post-comments__item-text > p:last-child   { margin-bottom: 0; }

/* CTA + formulario */
.post-comments__cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--b0);
}
.post-comments__cta-text {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}
.post-comments__cta-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  font-style: italic;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity .2s ease;
}
.post-comments__cta-link:hover { opacity: 0.7; }

/* Formulario inline */
.post-comments__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.post-comments__form textarea {
  width: 100%;
  min-height: 108px;
  padding: 0.85rem 1rem;
  /* bg = --bg crea efecto de hueco respecto a la superficie --surface */
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--b0);
  border-radius: 10px;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.post-comments__form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(130, 49, 255, 0.15);
}
.post-comments__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.post-comments__counter {
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}
.post-comments__submit {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 17px;
  font-style: italic;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}
.post-comments__submit:hover { opacity: 0.7; }
.post-comments__submit:disabled { opacity: 0.4; cursor: not-allowed; }

.post-comments__form-msg {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--muted);
}
.post-comments__form-msg.is-error   { color: oklch(0.7 0.18 25); }
.post-comments__form-msg.is-success { color: oklch(0.72 0.13 155); }

/* Accesibilidad */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
  .post-comments__box { padding: 28px 24px 36px; border-radius: 14px; }
  .post-comments__item { grid-template-columns: 36px 1fr; gap: 0 18px; }
  .post-comments__avatar { width: 36px; height: 36px; }
}