/*
 * 4.0.74 - Todas las reglas valen también para la Vitrina (#modalSeeShowcase), que pasa al mismo visor.
 *
 * 4.0.64 - EL VISOR DE MULTIMEDIA A PANTALLA COMPLETA (ver site/modal/modalMedia.php y
 * js/classicspark-visor.js).
 *
 * Escritorio: escenario oscuro a la izquierda (la foto desenfocada de fondo), panel de 400 px a la
 * derecha. Flechas, contador y miniaturas encima del escenario.
 * Teléfono (≤ 900 px): escenario a toda la pantalla y el panel como hoja que asoma abajo (título,
 * autor y acciones); al tocar los comentarios o el asa sube hasta el 72 % de la pantalla.
 * El panel es oscuro; `.cs464-claro` (el botón del sol) lo pone claro.
 */
:is(#modalMedia,#modalSeeShowcase).cs464-visor{padding:0!important;overflow:hidden!important}
:is(#modalMedia,#modalSeeShowcase).cs464-visor .modal-dialog{position:fixed;inset:0;width:100%!important;max-width:none!important;height:100%;margin:0!important;transform:none!important;pointer-events:auto}
:is(#modalMedia,#modalSeeShowcase).cs464-visor .modal-content{width:100%;height:100%;border:0!important;border-radius:0!important;background:#0c090b!important;box-shadow:none!important;overflow:hidden}
:is(#modalMedia,#modalSeeShowcase).cs464-visor *,:is(#modalMedia,#modalSeeShowcase).cs464-visor *::before,:is(#modalMedia,#modalSeeShowcase).cs464-visor *::after{box-sizing:border-box}
:is(#modalMedia,#modalSeeShowcase) .cs464-v{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:100%;font-family:gilroy-regular,Arial,sans-serif}

/* ------------------------------------------------------------------ el escenario */
:is(#modalMedia,#modalSeeShowcase) .cs464-escena{position:relative;min-width:0;min-height:0;overflow:hidden;background:#0c090b}
:is(#modalMedia,#modalSeeShowcase) .cs464-escena::before{content:"";position:absolute;inset:-60px;background:var(--cs464-fondo,none) center/cover no-repeat;filter:blur(46px) brightness(.38) saturate(1.15);transform:scale(1.08)}
:is(#modalMedia,#modalSeeShowcase) .cs464-escena::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%);pointer-events:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-medio{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:76px 104px 40px;transition:opacity .2s}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-medio{padding-bottom:104px}
:is(#modalMedia,#modalSeeShowcase).is-cargando .cs464-medio{opacity:.3}
:is(#modalMedia,#modalSeeShowcase) .cs464-medio>img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
/* 4.0.66 - classicspark-progressive-images.css pinta el fondo de las imágenes cargadas (#edf1f5) y otra
   hoja estira .mediaImg al hueco: salían franjas claras arriba y abajo. La foto mide lo que mide. */
:is(#modalMedia,#modalSeeShowcase) .cs464-medio>img,:is(#modalMedia,#modalSeeShowcase) .cs464-medio>img.cs-progressive-image{width:auto!important;height:auto!important;background:none!important;animation:none!important;filter:none!important;opacity:1!important}
:is(#modalMedia,#modalSeeShowcase) .cs464-video{display:block;width:min(100%,calc((100vh - 200px) * 16 / 9));height:auto;aspect-ratio:16/9;border:0;border-radius:10px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
:is(#modalMedia,#modalSeeShowcase) .cs464-embed{display:block;width:min(100%,680px);height:min(460px,100%);border:0;border-radius:14px}
:is(#modalMedia,#modalSeeShowcase) .cs464-aviso{display:grid;justify-items:center;gap:12px;color:#d8cbd1;font-size:15px}
:is(#modalMedia,#modalSeeShowcase) .cs464-aviso i{font-size:34px;color:#f08aa5}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco{display:grid;justify-items:center;gap:8px;width:min(100%,440px);color:#fff;text-align:center}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco__vinilo{display:grid;place-items:center;width:220px;height:220px;margin-bottom:14px;border-radius:50%;background:radial-gradient(circle,#c90036 0 18%,#1b1218 19% 21%,transparent 22%),repeating-radial-gradient(circle,#1d1419 0 3px,#271b22 3px 5px);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.04)}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco__vinilo i{color:#fff;font-size:22px}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco strong{font:22px/1.2 gilroy-semibold,Arial,sans-serif;font-weight:400}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco small{color:#bfaeb6;font-size:14px}
:is(#modalMedia,#modalSeeShowcase) .cs464-disco audio{width:100%;margin-top:12px}

/* Botones redondos sobre el escenario */
:is(#modalMedia,#modalSeeShowcase) .cs464-boton{display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.13);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background .15s,transform .15s}
:is(#modalMedia,#modalSeeShowcase) .cs464-boton:hover{background:rgba(255,255,255,.24)}
:is(#modalMedia,#modalSeeShowcase) .cs464-boton:focus-visible{outline:2px solid #fff;outline-offset:2px}
:is(#modalMedia,#modalSeeShowcase) .cs464-cerrar{position:absolute;z-index:6;top:18px;left:18px;width:46px;height:46px;font-size:20px}

/* ------------------------------------------------------------------ flechas, contador, miniaturas */
:is(#modalMedia,#modalSeeShowcase) .cs464-nav{position:absolute;z-index:5;top:0;bottom:0;left:0;right:400px;pointer-events:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-nav>*{pointer-events:auto}
:is(#modalMedia,#modalSeeShowcase) .cs464-flecha,:is(#modalMedia,#modalSeeShowcase) .cs464-contador,:is(#modalMedia,#modalSeeShowcase) .cs464-tira{display:none}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha{display:grid;position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;font-size:28px}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha--antes{left:24px}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha--despues{right:24px}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-contador{display:block;position:absolute;top:26px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:13px gilroy-semibold,Arial,sans-serif;letter-spacing:.06em}
:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-tira{display:flex;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);gap:8px;max-width:calc(100% - 200px);padding:4px;overflow-x:auto;scrollbar-width:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-tira::-webkit-scrollbar{display:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-mini{flex:none;display:grid;place-items:center;width:64px;height:46px;padding:0;border:2px solid transparent;border-radius:8px;background:#2a1f2c center/cover no-repeat;color:#f08aa5;opacity:.5;cursor:pointer;transition:opacity .15s,border-color .15s}
:is(#modalMedia,#modalSeeShowcase) .cs464-mini:hover{opacity:.85}
:is(#modalMedia,#modalSeeShowcase) .cs464-mini.is-actual{opacity:1;border-color:#fff}

/* ------------------------------------------------------------------ el panel (oscuro) */
:is(#modalMedia,#modalSeeShowcase) .cs464-panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid #261d27;background:#141015;color:#efe6ea}
:is(#modalMedia,#modalSeeShowcase) .cs464-asa{display:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-cabeza{padding:22px 22px 16px}
:is(#modalMedia,#modalSeeShowcase) .cs464-cabeza__fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
:is(#modalMedia,#modalSeeShowcase) .cs464-antetitulo{color:#f08aa5;font:12px gilroy-semibold,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
:is(#modalMedia,#modalSeeShowcase) .cs464-tema{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid #3a2b3a;border-radius:50%;background:transparent;color:#f3d6df;font-size:16px;cursor:pointer}
:is(#modalMedia,#modalSeeShowcase) .cs464-tema:hover{border-color:#6a4a5a}
:is(#modalMedia,#modalSeeShowcase) .cs464-tema .fa-moon-o{display:none}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-tema .fa-sun-o{display:none}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-tema .fa-moon-o{display:inline-block}
:is(#modalMedia,#modalSeeShowcase) #mediaTitle{margin:6px 0 12px;color:#fff;font:24px/1.15 gilroy-semibold,Arial,sans-serif;font-weight:400;letter-spacing:-.01em;overflow-wrap:anywhere}
:is(#modalMedia,#modalSeeShowcase) .cs464-autor{display:flex;align-items:center;gap:10px;margin:0;color:#bfaeb6;font-size:14px}
:is(#modalMedia,#modalSeeShowcase) .cs464-autor a{color:#fff;font-family:gilroy-semibold,Arial,sans-serif;text-decoration:none}
:is(#modalMedia,#modalSeeShowcase) .cs464-autor a:hover{text-decoration:underline}
:is(#modalMedia,#modalSeeShowcase) .cs464-avatar{flex:none;width:34px;height:34px;padding:0;overflow:hidden;border:0;border-radius:50%;background:#2a1f2c}
:is(#modalMedia,#modalSeeShowcase) button.cs464-avatar{cursor:zoom-in}
:is(#modalMedia,#modalSeeShowcase) .cs464-avatar img{width:100%;height:100%;object-fit:cover}

:is(#modalMedia,#modalSeeShowcase) .cs464-acciones{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-top:1px solid #261d27;border-bottom:1px solid #261d27}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion{display:inline-flex;align-items:center;gap:7px;flex:none;width:auto;height:38px;min-height:0;margin:0;padding:0 14px;border:1px solid #3a2b3a;border-radius:999px;background:transparent;color:#f3d6df;font:13.5px gilroy-semibold,Arial,sans-serif;white-space:nowrap;box-shadow:none;cursor:pointer;transition:border-color .15s,background .15s}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion:hover{border-color:#6a4a5a;background:rgba(255,255,255,.04)}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion i{display:inline-block!important;margin:0!important;font-size:14px}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion span{display:inline!important;margin:0!important}
/* classicspark-ui.css pone `.cs-native-share-action{display:inline-grid!important;width:38px}` (el botón redondo de otras partes). */
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion.cs-native-share-action{display:inline-flex!important;width:auto;height:38px;border-radius:999px;color:#f3d6df!important}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion.cs-native-share-action{color:#8a0026!important}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion--principal{border:0;background:linear-gradient(120deg,#8a0026,#c90036);color:#fff}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion--principal.is-active{border:1px solid #c90036;background:rgba(201,0,54,.18);color:#ffd6e0}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion--peligro{color:#ff9db1}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion--comentarios{display:none}

:is(#modalMedia,#modalSeeShowcase) .cs464-valoracion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 22px;border-bottom:1px solid #261d27;background:transparent;color:#d8cbd1}
:is(#modalMedia,#modalSeeShowcase) .cs464-valoracion span{display:block;color:#fff;font:14px gilroy-semibold,Arial,sans-serif}
:is(#modalMedia,#modalSeeShowcase) .cs464-valoracion small{color:#bfaeb6;font-size:12.5px}
:is(#modalMedia,#modalSeeShowcase) .cs464-valoracion .cs2783-rating__stars button{padding:0 2px;border:0;background:none;color:#5a4a55;font-size:18px}
:is(#modalMedia,#modalSeeShowcase) .cs464-valoracion .cs2783-rating__stars .is-filled{color:#f5b301}

:is(#modalMedia,#modalSeeShowcase) .cs464-comentarios{display:flex;flex-direction:column;flex:1;min-height:0}
:is(#modalMedia,#modalSeeShowcase) .cs464-comentarios h2{margin:0;padding:16px 22px 8px;color:#fff;font:16px gilroy-semibold,Arial,sans-serif;font-weight:400}
:is(#modalMedia,#modalSeeShowcase) .cs464-comentarios h2 span{color:#9d8f97}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes{flex:1;min-height:0;max-height:none!important;padding:6px 22px 16px;overflow-y:auto}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;margin-bottom:12px;cursor:pointer}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment__avatar{display:block;width:34px;height:34px;padding:0;overflow:hidden;border:0;border-radius:50%;background:#2a1f2c}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment__avatar img{width:100%;height:100%;object-fit:cover}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment>div{padding:9px 12px;border-radius:4px 14px 14px;background:#221a25}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment.is-own>div{background:#3a1424}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment__meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment__meta strong{color:#fff;font:12.5px gilroy-semibold,Arial,sans-serif;font-weight:400}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment__meta time{color:#9d8f97;font-size:11px;white-space:nowrap}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comment p{margin:0;color:#eadfe4;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comments__empty{display:grid;justify-items:center;gap:10px;min-height:200px;padding:30px 10px;place-content:center;color:#bfaeb6;text-align:center}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comments__empty i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#2a1f2c;color:#f08aa5;font-size:22px}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .cs-media-comments__empty p{max-width:260px;margin:0;line-height:1.45}

:is(#modalMedia,#modalSeeShowcase) .cs464-escribir{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:14px 22px 20px;border-top:1px solid #261d27}
:is(#modalMedia,#modalSeeShowcase) .cs464-escribir input{height:44px!important;padding:0 16px!important;border:1px solid #3a2a3a!important;border-radius:999px!important;background:#201725!important;color:#fff!important;font:14px gilroy-regular,Arial,sans-serif;box-shadow:none!important}
:is(#modalMedia,#modalSeeShowcase) .cs464-escribir input::placeholder{color:#8f8189}
:is(#modalMedia,#modalSeeShowcase) .cs464-escribir input:focus{border-color:#c90036!important;box-shadow:0 0 0 3px rgba(201,0,54,.18)!important}
:is(#modalMedia,#modalSeeShowcase) .cs464-escribir button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:linear-gradient(120deg,#8a0026,#c90036);color:#fff;font-size:16px;cursor:pointer}

/* ------------------------------------------------------------------ el panel claro */
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-panel{border-left-color:#eee3e7;background:#fff;color:#231d27}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-antetitulo{color:#a3002c}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-tema{border-color:#ecd6dc;color:#8a0026}
:is(#modalMedia,#modalSeeShowcase).cs464-claro #mediaTitle,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-autor a,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-comentarios h2,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-valoracion span{color:#231d27}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-autor,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-valoracion small{color:#6a616c}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-valoracion,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escribir{border-color:#f0e6e9}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion{border-color:#ecd6dc;background:#fff;color:#8a0026}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion:hover{border-color:#e2b9c4}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion--principal{border:0;background:linear-gradient(120deg,#8a0026,#c90036);color:#fff}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion--principal.is-active{border:1px solid #c90036;background:#fff0f4;color:#a3002c}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs464-accion--peligro{color:#c90036}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-valoracion .cs2783-rating__stars button{color:#ddd0d5}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comment>div{background:#f6eef1}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comment.is-own>div{background:#fff0f4}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comment__meta strong{color:#231d27}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comment p{color:#3d3640}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comments__empty{color:#6a616c}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .cs-media-comments__empty i{background:#fff0f4;color:#c90036}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escribir input{border-color:#e8dade!important;background:#fff!important;color:#231d27!important}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escribir input::placeholder{color:#9a8f94}

/* ------------------------------------------------------------------ el teléfono */
@media (max-width:900px){
  :is(#modalMedia,#modalSeeShowcase) .cs464-v{display:block;position:relative;height:100%}
  :is(#modalMedia,#modalSeeShowcase) .cs464-escena{position:absolute;inset:0}
  :is(#modalMedia,#modalSeeShowcase) .cs464-medio,:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-medio{padding:66px 0 214px}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs464-medio{padding-bottom:calc(72vh + 8px);padding-bottom:calc(72dvh + 8px)}
  :is(#modalMedia,#modalSeeShowcase) .cs464-medio>img{border-radius:0}
  :is(#modalMedia,#modalSeeShowcase) .cs464-video{width:100%;border-radius:0}
  :is(#modalMedia,#modalSeeShowcase) .cs464-embed{width:calc(100% - 24px);height:min(380px,100%)}
  :is(#modalMedia,#modalSeeShowcase) .cs464-disco__vinilo{width:160px;height:160px}
  :is(#modalMedia,#modalSeeShowcase) .cs464-cerrar{top:12px;left:12px;width:42px;height:42px}

  :is(#modalMedia,#modalSeeShowcase) .cs464-nav{right:0}
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha{top:calc(50% - 74px);width:44px;height:44px;margin-top:-22px;font-size:24px}
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha--antes{left:10px}
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha--despues{right:10px}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs464-flecha{display:none}
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-contador{top:20px}
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-tira{display:none}

  :is(#modalMedia,#modalSeeShowcase) .cs464-panel{position:absolute;z-index:7;left:0;right:0;bottom:0;height:72vh;height:72dvh;border-left:0;border-radius:20px 20px 0 0;box-shadow:0 -18px 44px rgba(0,0,0,.45);transform:translateY(calc(100% - 206px));transition:transform .28s ease}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs464-panel{transform:none}
  :is(#modalMedia,#modalSeeShowcase) .cs464-asa{display:grid;place-items:center;flex:none;width:100%;height:22px;padding:0;border:0;background:none;cursor:pointer}
  :is(#modalMedia,#modalSeeShowcase) .cs464-asa span{display:block;width:42px;height:5px;border-radius:9px;background:#4a3a48}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-asa span{background:#ddd0d5}
  :is(#modalMedia,#modalSeeShowcase) .cs464-cabeza{padding:2px 18px 12px}
  :is(#modalMedia,#modalSeeShowcase) #mediaTitle{margin:4px 0 8px;font-size:19px}
  :is(#modalMedia,#modalSeeShowcase):not(.cs464-hoja-abierta) #mediaTitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  :is(#modalMedia,#modalSeeShowcase) .cs464-acciones{flex-wrap:nowrap;padding:12px 18px;overflow-x:auto;scrollbar-width:none}
  :is(#modalMedia,#modalSeeShowcase) .cs464-acciones::-webkit-scrollbar{display:none}
  :is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs464-accion--comentarios{display:inline-flex}
  :is(#modalMedia,#modalSeeShowcase) .cs464-valoracion,:is(#modalMedia,#modalSeeShowcase) .cs464-comentarios h2{padding-left:18px;padding-right:18px}
  :is(#modalMedia,#modalSeeShowcase) .cs464-mensajes{padding:6px 18px 12px}
  :is(#modalMedia,#modalSeeShowcase) .cs464-escribir{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){:is(#modalMedia,#modalSeeShowcase) .cs464-panel,:is(#modalMedia,#modalSeeShowcase) .cs464-medio{transition:none}}

/* ------------------------------------------------------------------ 4.0.69 - el modo claro, entero
   Eudes: «al pasar a light, el fondo de los multimedia debería pasar a blanco también, no sólo la parte
   de los comentarios y acciones». En claro, la escena, los botones, el contador y las miniaturas también
   se aclaran (lo mismo que en la app 4.0.68). */
:is(#modalMedia,#modalSeeShowcase).cs464-visor.cs464-claro .modal-content{background:#f6f2f4!important}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escena{background:#fff}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escena::before{filter:blur(46px) brightness(1.15) saturate(.9);opacity:.35}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escena::after{background:radial-gradient(ellipse at center,transparent 50%,rgba(94,0,25,.06) 100%)}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-boton{border:1px solid #ecd6dc;background:rgba(255,255,255,.92);color:#8a0026}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-boton:hover{background:#fff;border-color:#e2b9c4}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-boton:focus-visible{outline-color:#c90036}
:is(#modalMedia,#modalSeeShowcase).cs464-claro.cs464-con-galeria .cs464-contador{background:#fff;color:#231d27;box-shadow:0 4px 14px rgba(94,0,25,.1)}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mini{background-color:#efe7eb;color:#c90036;opacity:.7}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mini.is-actual{border-color:#c90036;opacity:1}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-medio img,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-medio video{box-shadow:0 18px 44px rgba(94,0,25,.16)}


/* ------------------------------------------------------------------ 4.0.74 - la Vitrina
   La portada del CD en grande con el disco asomando, flechas a la anterior y la siguiente, «Info de mi
   CD» en el panel y «Comprar CD» como botón. */
:is(#modalMedia,#modalSeeShowcase) .cs474-h1{margin:6px 0 12px;color:#fff;font:24px/1.15 gilroy-semibold,Arial,sans-serif;font-weight:400;letter-spacing:-.01em;overflow-wrap:anywhere}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-h1{color:#231d27}
:is(#modalMedia,#modalSeeShowcase) .cs474-cd{position:relative;width:min(420px,72%);aspect-ratio:1}
:is(#modalMedia,#modalSeeShowcase) .cs474-cd img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
:is(#modalMedia,#modalSeeShowcase) .cs474-cd__disco{position:absolute;z-index:1;top:4%;left:34%;width:92%;height:92%;border-radius:50%;background:radial-gradient(circle,#c90036 0 13%,#1b1218 14% 16%,transparent 17%),repeating-radial-gradient(circle,#1d1419 0 3px,#271b22 3px 5px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
:is(#modalMedia,#modalSeeShowcase) .cs474-flecha{position:absolute;z-index:5;top:50%;width:56px;height:56px;margin-top:-28px;font-size:28px}
:is(#modalMedia,#modalSeeShowcase) .cs474-flecha--antes{left:24px}
:is(#modalMedia,#modalSeeShowcase) .cs474-flecha--despues{right:24px}
:is(#modalMedia,#modalSeeShowcase) .cs474-sobre{padding:14px 22px;border-bottom:1px solid #261d27}
:is(#modalMedia,#modalSeeShowcase) .cs474-sobre h2{margin:0 0 6px;color:#fff;font:14px gilroy-semibold,Arial,sans-serif;font-weight:400}
:is(#modalMedia,#modalSeeShowcase) .cs474-sobre p{margin:0;color:#d8cbd1;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-sobre{border-color:#f0e6e9}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-sobre h2{color:#231d27}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-sobre p{color:#4d4550}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones .cs474-accion--comprar{border-color:#fff;background:#fff;color:#a3002c;text-decoration:none}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-acciones .cs474-accion--comprar{border-color:#c90036;background:#fff0f4}
:is(#modalMedia,#modalSeeShowcase) .cs464-acciones a.cs464-accion{text-decoration:none}
/* El comentario nuevo lo añade site.js con el formato de chat de siempre (`msg_container_send`). */
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .d-flex{display:flex!important;flex-direction:row-reverse;align-items:flex-start;gap:10px;margin:0 0 12px!important}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .img_cont_msg img{width:34px;height:34px;border-radius:50%;object-fit:cover}
:is(#modalMedia,#modalSeeShowcase) .cs464-mensajes .msg_container_send{max-width:80%;margin:0;padding:9px 12px;border-radius:14px 4px 14px 14px;background:#3a1424;color:#eadfe4;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-mensajes .msg_container_send{background:#fff0f4;color:#3d3640}

/* ------------------------------------------------------------------ 4.0.74 - en el teléfono, las acciones a la vista
   Eudes: «en un teléfono se muestra un poco confusa la forma de comentar o aplaudir; cuesta abrir la
   sección que permite eso». La hoja ya no asoma: se ve la foto (o el vídeo, la música, el CD) entera,
   una columna de acciones a la derecha como en Reels y, abajo, quién lo publicó, el título y «Escribe
   un comentario…». Comentar o «Info» suben la hoja con todo. */
:is(#modalMedia,#modalSeeShowcase) .cs474-capa{display:none}
@media (max-width:900px){
  :is(#modalMedia,#modalSeeShowcase) .cs474-capa{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .2s}
  :is(#modalMedia,#modalSeeShowcase) .cs474-capa>*{pointer-events:auto}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs474-capa{opacity:0;visibility:hidden}
  :is(#modalMedia,#modalSeeShowcase) .cs464-panel{transform:translateY(100%)}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs464-panel{transform:none}
  :is(#modalMedia,#modalSeeShowcase) .cs464-medio,:is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-medio{padding:66px 0 168px}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs464-medio{padding-bottom:calc(72vh + 8px);padding-bottom:calc(72dvh + 8px)}
  /* El vídeo y la música, a la izquierda de la columna de acciones: así no tapa los controles del reproductor. */
  :is(#modalMedia,#modalSeeShowcase) .cs464-v:is([data-cs464-tipo="video"],[data-cs464-tipo="musica"]) .cs464-medio{padding-right:72px;padding-left:12px}
  :is(#modalMedia,#modalSeeShowcase) .cs464-v:is([data-cs464-tipo="video"],[data-cs464-tipo="musica"]) .cs464-video{border-radius:10px}
  :is(#modalMedia,#modalSeeShowcase) .cs464-v:is([data-cs464-tipo="video"],[data-cs464-tipo="musica"]) .cs464-embed{width:100%}
  :is(#modalMedia,#modalSeeShowcase) .cs474-riel{position:absolute;right:10px;bottom:calc(178px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r,:is(#modalMedia,#modalSeeShowcase) .cs474-r.cs-native-share-action{display:flex!important;flex-direction:column;align-items:center;gap:4px;width:auto!important;height:auto!important;min-height:0;padding:0;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#fff!important;cursor:pointer}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:20px;transition:background .15s,transform .15s}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r:active span{transform:scale(.92)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r b{font:11.5px gilroy-semibold,Arial,sans-serif;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r--aplauso span{background:rgba(201,0,54,.55)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-r--aplauso.is-active span{background:#c90036}
  :is(#modalMedia,#modalSeeShowcase) .cs474-pie{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:8px}
  :is(#modalMedia,#modalSeeShowcase) .cs474-autor{display:flex;align-items:center;gap:8px;margin:0;padding-right:70px}
  :is(#modalMedia,#modalSeeShowcase) .cs474-autor img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid #fff}
  :is(#modalMedia,#modalSeeShowcase) .cs474-autor a{color:#fff;font:14px gilroy-semibold,Arial,sans-serif;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:70px;color:#fff;font:17px/1.25 gilroy-semibold,Arial,sans-serif;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-comprar{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:999px;background:#fff;color:#a3002c;font:14px gilroy-semibold,Arial,sans-serif;text-decoration:none}
  :is(#modalMedia,#modalSeeShowcase) .cs474-barra{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#eee;font:14px gilroy-regular,Arial,sans-serif;text-align:left;cursor:text}
  :is(#modalMedia,#modalSeeShowcase) .cs464-escena::after{background:linear-gradient(transparent 55%,rgba(0,0,0,.72)),radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.35) 100%)}
  :is(#modalMedia,#modalSeeShowcase) .cs474-cd{width:min(68vw,300px)}
  /* Las flechas, en el hueco de encima de la columna de acciones (antes la de la derecha la tocaba). */
  :is(#modalMedia,#modalSeeShowcase).cs464-con-galeria .cs464-flecha{top:max(96px,calc(50% - 200px))}
  :is(#modalMedia,#modalSeeShowcase) .cs474-flecha{top:max(96px,calc(50% - 200px));width:44px;height:44px;margin-top:-22px;font-size:24px}
  :is(#modalMedia,#modalSeeShowcase) .cs474-flecha--antes{left:10px}
  :is(#modalMedia,#modalSeeShowcase) .cs474-flecha--despues{right:10px}
  :is(#modalMedia,#modalSeeShowcase).cs464-hoja-abierta .cs474-flecha{display:none}
  /* En claro la escena es blanca: los botones y los textos pasan a oscuro. */
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r.cs-native-share-action{color:#231d27!important}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r span{background:rgba(35,29,39,.08);color:#8a0026}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r--aplauso span{background:rgba(201,0,54,.14);color:#c90036}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r--aplauso.is-active span{background:#c90036;color:#fff}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-r b,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-autor a,:is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-titulo{color:#231d27;text-shadow:none}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-barra{border:1px solid #ecd6dc;background:#fff;color:#6a616c}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs474-comprar{border:1px solid #c90036}
  :is(#modalMedia,#modalSeeShowcase).cs464-claro .cs464-escena::after{background:none}
}