/* =========================================================
   VNDLS — app.css (LIMPIO)
   - Sin duplicados
   - Sin “1717” / bloques repetidos
   - FIX: .badge NO es absolute (solo en Videos con .v-badge / .vid-badge)
   - Mini-player + Safe Area iOS
   - Beats + Player + Info de compra + Videos coherentes
========================================================= */

/* ===== Fonts ===== */
@font-face{
  font-family:"Sequel100";
  src:url("../fonts/Sequel100Wide95.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"GeneralSans";
  src:url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"GeneralSans";
  src:url("../fonts/GeneralSans-MediumItalic.woff2") format("woff2");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

/* ===== Tokens ===== */
:root{
  --font-display: "Sequel100", system-ui, -apple-system, Segoe UI, Arial;
  --font-body: "GeneralSans", system-ui, -apple-system, Segoe UI, Arial;

  --bg:#070A0F;
  --bg2:#0B1020;

  --glass: rgba(14,17,23,.55);
  --stroke: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --neon:#5CFF6B;
  --neon2:#15F2A1;
  --promo:#FF3D6E;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 18px;

  /* si quieres cambiar el grain sin tocar el CSS:
     document.documentElement.style.setProperty('--grain-url', "url('...')");
  */
  --grain-url: url("../img/grain.jpg");

  /* iOS VH fallback (JS puede setearlo) */
  --vh: 1vh;

  /* altura aproximada del mini-player */
  --mini-h: 84px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  letter-spacing:.1px;
  background: transparent;
}
a{ color:inherit; }
button, .btn, input, select, textarea{ font-family:inherit; }

/* ===== Background fijo (no se corta al scroll) ===== */
body.bg{ min-height:100vh; position:relative; }
body.bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 20% 15%, rgba(92,255,107,.14), transparent 60%),
    radial-gradient(900px 700px at 78% 28%, rgba(92,255,107,.08), transparent 62%),
    radial-gradient(900px 700px at 40% 80%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  filter: saturate(1.1) contrast(1.02);
  transform: translate3d(0,0,0);
  animation: bgDrift 10s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0% { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  100% { transform: translate3d(1.2%, 0.9%, 0) scale(1.04); }
}

/* Grain full-screen (NO mosaico) */
.grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:4; /* arriba del contenido, abajo de modales */
  opacity:.12;
  mix-blend-mode:overlay;
  background: var(--grain-url) center/cover no-repeat;
}

/* Layout */
.container{ width:min(1100px, 100%); margin:0 auto; padding:18px; }
.muted{ color:var(--muted); font-size:12px; }

/* ===== Glass ===== */
.glass{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--r);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass:hover{
  border-color: rgba(92,255,107,.28);
  box-shadow:
    0 26px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(92,255,107,.10),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:60;
  padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background: rgba(6,8,14,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brandline{ display:flex; align-items:center; gap:14px; }
.iso{ width:42px; height:42px; }
.brand{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.top-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; flex-wrap:wrap;
}

/* ===== Buttons / Chips ===== */
.btn{
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:0 14px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(135deg, rgba(92,255,107,.18), rgba(21,242,161,.14));
  border-color: rgba(92,255,107,.45);
  box-shadow: 0 0 0 1px rgba(92,255,107,.15), 0 18px 50px rgba(92,255,107,.08);
}
.btn-icon{
  width:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
}

.pill,.chip{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color:inherit;
  text-decoration:none;
}
.pill.neon, .chip.neon{
  border-color: rgba(92,255,107,.45);
  background: rgba(92,255,107,.10);
}

/* ===== Intro ===== */
body.intro{
  overflow:hidden;
  min-height: 100svh;
  min-height: 100dvh;
}
.intro-stage{
  min-height: calc(var(--vh) * 100);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  position:relative;
  z-index:5;
}
.intro-logo-wrap{
  width:min(860px, 100%);
  padding:22px 18px 16px;
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.intro-logo-mask{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 10px 6px;
}
.intro-logo-img{
  width:min(560px, 92%);
  height:auto;
  display:block;
}
.intro-meta{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.intro-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color: var(--text);
}
.intro-pill--neon{
  border-color: rgba(92,255,107,.45);
  background: rgba(92,255,107,.10);
}
.intro-line{ margin-top:14px; width:min(860px, 100%); }
.intro-bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
}
.intro-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(92,255,107,.85), rgba(21,242,161,.80));
}
.intro-status{
  margin-top:8px;
  text-align:center;
  color: var(--muted);
  font-size:12px;
}
.intro-note{
  margin-top:14px;
  color: rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:.8px;
  text-transform: uppercase;
  font-family: var(--font-display);
}

/* ===== Player ===== */
.player{ padding:18px; }
.player-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .player-grid{ grid-template-columns:1fr; }
}

.player-left{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

/* Layout “cover grande + meta debajo” (cuando tu HTML usa estas clases) */
.player-left-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width: 260px;
}
.cover-wrap{
  width:168px;
  height:168px;
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.10);
}
.cover-lg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cover{
  width:84px; height:84px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.meta{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.meta .title{
  font-size:20px;
  line-height:1.1;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:900;
}
.meta .sub{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Tags del player / beats (inline, NO absolute) */
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.badge, .tags .pill, .tags .tag, .tag{
  position: static;          /* IMPORTANTÍSIMO */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
  opacity:.9;
  margin:0;
  white-space:nowrap;
}
.badge.accent{ border-color: rgba(92,255,107,.45); background: rgba(92,255,107,.10); }
.badge.neon{ border-color: rgba(21,242,161,.45); background: rgba(21,242,161,.10); }
.badge.promo{ border-color: rgba(255,61,110,.55); background: rgba(255,61,110,.10); }
.badge.accent2{ border-color: rgba(21,242,161,.45); background: rgba(21,242,161,.10); }

.player-right{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.viz-wrap{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#viz{
  width:100%;
  height:96px;
  display:block;
  border-radius:14px;
  border:1px solid rgba(92,255,107,.18);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 40px rgba(92,255,107,.06);
}

.controls-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
}
@media (max-width: 980px){
  .controls-row{ grid-template-columns:1fr; }
}
.transport{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#btnPlay{ min-width:140px; font-weight:800; letter-spacing:.08em; }

.timeline{ display:flex; align-items:center; gap:10px; min-width:0; }
.timeline .muted{ font-size:12px; opacity:.7; min-width:40px; text-align:center; }
.seek{ flex:1; min-width:180px; }
#seek{ width:100%; height:34px; }

#btnRepeat.is-on{
  outline:1px solid rgba(80,255,160,.45);
  box-shadow: 0 0 0 3px rgba(80,255,160,.12);
}

/* Buyline */
.buyline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.price{ display:flex; flex-direction:column; gap:6px; }
.price .p-old{
  font-size:12px;
  opacity:.55;
  text-decoration: line-through;
  color: var(--muted);
}
.price .p-now{
  font-size:22px;
  font-weight:900;
  letter-spacing:.02em;
  color: var(--neon);
}
.price .p-cur{
  font-size:12px;
  opacity:.65;
  margin-top:-4px;
}
#btnBuy{ min-width:160px; font-weight:900; letter-spacing:.08em; }

/* Responsive player cover grande */
@media (max-width: 760px){
  .player-left-stack{ min-width:0; }
  .cover-wrap{ width:132px; height:132px; border-radius:18px; }
}

/* ===== Grid / Cards ===== */
.grid2{ display:grid; gap:18px; margin-top:14px; grid-template-columns: 1.3fr .9fr; }
@media (max-width: 980px){ .grid2{ grid-template-columns:1fr; } }

.card{ padding:14px; }
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:12px;
}
.card-title{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing:.02em;
  text-transform: none;
}

/* Tools */
.tools{ display:flex; gap:10px; flex-wrap:wrap; }
.input{
  width:240px;
  height:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,17,23,.55);
  color: var(--text);
  outline:none;
}
.input:focus{
  border-color: rgba(120,255,175,.25);
  box-shadow: 0 0 0 3px rgba(120,255,175,.08);
}
@media (max-width: 980px){
  .input{ width:100%; }
}

/* ===== Beats list ===== */
.beatslist{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }

.beatrow{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  border-radius:16px;
  cursor:pointer;
  padding:12px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:16px;
  position:relative;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.beatrow:hover{
  transform: translateY(-3px);
  border-color: rgba(92,255,107,.45);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.beatrow::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity 200ms ease;
  box-shadow:
    0 0 0 1px rgba(92,255,107,.25),
    0 0 32px rgba(92,255,107,.22),
    0 0 64px rgba(92,255,107,.18);
}

.beatrow:hover::after{ opacity:1; }

.beatrow.is-active{
  border-color: rgba(92,255,107,.65);
  background: rgba(92,255,107,.08);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
.beatrow.is-active::after{
  opacity:1;
  animation: greenPulse 3.8s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(92,255,107,.45),
    0 0 42px rgba(92,255,107,.35),
    0 0 90px rgba(92,255,107,.25);
}

@keyframes greenPulse{
  0%{
    box-shadow:
      0 0 0 1px rgba(92,255,107,.18),
      0 0 28px rgba(92,255,107,.16),
      0 0 64px rgba(92,255,107,.12);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(92,255,107,.28),
      0 0 36px rgba(92,255,107,.22),
      0 0 84px rgba(92,255,107,.18);
  }
  100%{
    box-shadow:
      0 0 0 1px rgba(92,255,107,.18),
      0 0 28px rgba(92,255,107,.16),
      0 0 64px rgba(92,255,107,.12);
  }
}

.mini{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.grow{ flex:1; min-width:0; }
.row1{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.t{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row2{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Flags */
.flags{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.flag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(14,17,23,.45);
  backdrop-filter: blur(10px);
}
.flag--new{  box-shadow: 0 0 0 1px rgba(92,255,107,.22) inset; }
.flag--pop{  box-shadow: 0 0 0 1px rgba(21,242,161,.18) inset; }
.flag--feat{ box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset; }

/* Price (catálogo) */
.beatprice{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-family: var(--font-display);
  color: var(--neon);
  min-width: 72px;
  justify-content:flex-end;
}
.beatprice .currency{ font-size:14px; opacity:.8; }
.beatprice .amount{ font-size:22px; font-weight:800; letter-spacing:-0.5px; }

/* ===== Info de compra ===== */
#purchaseInfo{ display:flex; flex-direction:column; gap:1.2rem; }

.purchase-list{
  list-style:none;
  padding:0;
  margin:0;
}
.purchase-list li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.95rem;
  opacity:.9;
}
.purchase-list .material-symbols-outlined{
  font-size:22px;
  color: var(--neon);
}

/* Socials */
.purchase-socials{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

/* ===== Modals ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:1000; /* arriba del grain */
}
.modal.show,
.modal.open,
.modal.is-open{ display:flex; }

.modal-card{
  width:min(920px, 100%);
  max-height:85vh;
  overflow:auto;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(16,16,20,.80);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modal-body{ padding:16px; }

.textarea{
  width:100%;
  min-height:320px;
  resize:vertical;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding:14px;
  outline:none;
}
.textarea:focus{
  border-color: rgba(120,255,175,.25);
  box-shadow: 0 0 0 3px rgba(120,255,175,.08);
}

/* ===== Mini Player ===== */
.mini-player{
  position:fixed;
  left:50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width:min(560px, calc(100% - 28px));
  transform: translateX(-50%) translateY(120%);
  opacity:0;
  pointer-events:none;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(16,16,20,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(92,255,107,.06);
  z-index:900;

  transition: transform .22s ease, opacity .22s ease;
}
.mini-player.show,
.mini-player.is-open{
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mini-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.mini-cover{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  object-fit:cover;
}
.mini-title{
  font-family: var(--font-display);
  font-size:13px;
  text-transform: uppercase;
  letter-spacing:.6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:46vw;
  opacity:.75;
}
.mini-right{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; justify-content:flex-end; }
.mini-right .btn{ height:38px; padding:0 12px; }

body.has-mini{
  padding-bottom: calc(var(--mini-h) + 18px + env(safe-area-inset-bottom));
}

@media (max-width: 760px){
  :root{ --mini-h: 92px; }
  .mini-player{ width:min(520px, calc(100% - 24px)); border-radius:16px; }
  .mini-sub{ max-width:34vw; }
  body.has-mini{ padding-bottom: calc(var(--mini-h) + 14px + env(safe-area-inset-bottom)); }
}

/* ===== Mobile anti-encimado ===== */
@media (max-width: 560px){
  .row1{ flex-wrap:wrap; align-items:flex-start; gap:8px; }
  .t{ width:100%; max-width:100%; }
  .flags{ width:100%; margin-left:0; }
  .meta .sub{ white-space: normal; overflow: visible; text-overflow: clip; }
  .tags{ flex-wrap:wrap; }
  .badge,.flag,.tag{ height:auto; padding:6px 10px; line-height:1.15; }
}

/* =========================================================
   VIDEOS (VNDLS) — COHERENTE, SCOPED
   Importante:
   - NO usamos .badge absolute global
   - Usamos .v-badge / .vid-badge para etiquetas en posters
========================================================= */

.v-wrap{ max-width:1180px; margin:0 auto; padding:22px; }

.v-hero{
  padding:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.v-h1{
  margin:0;
  font-family: var(--font-display);
  font-size:26px;
  letter-spacing:.02em;
}
.v-subline{ margin:6px 0 0; }
.v-hero-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:360px;
}

.v-seg{ display:flex; gap:10px; }
.v-seg-btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,17,23,.35);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.v-seg-btn:hover{ transform: translateY(-1px); }
.v-seg-btn.active{
  border-color: rgba(92,255,107,.35);
  box-shadow: 0 0 0 1px rgba(92,255,107,.12), 0 0 30px rgba(92,255,107,.10);
}

.v-panel{ margin-top:16px; padding:16px; }
.v-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.v-h2{ font-size:16px; font-weight:900; letter-spacing:.02em; }

.v-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.v-card{
  text-align:left;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.v-card.is-featured{ grid-column: span 2; }

.v-poster{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 16/9;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,17,23,.35);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.v-card.is-featured .v-poster{ aspect-ratio: 21/9; border-radius:18px; }

.v-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform 260ms ease;
}

.v-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.18));
  opacity:1;
}

.v-play{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background: rgba(14,17,23,.55);
  border:1px solid rgba(92,255,107,.24);
  box-shadow: 0 0 0 1px rgba(92,255,107,.10), 0 0 34px rgba(92,255,107,.12);
  color: rgba(255,255,255,.92);
  transform: translateY(8px);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

/* Etiqueta SOLO videos */
.v-badge, .vid-badge{
  position:absolute;
  top:10px; left:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(92,255,107,.28);
  background: rgba(14,17,23,.55);
  color: rgba(255,255,255,.9);
  font-size:12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.v-card:hover .v-poster{
  transform: translateY(-2px);
  border-color: rgba(92,255,107,.32);
  box-shadow: 0 26px 90px rgba(0,0,0,.40), 0 0 70px rgba(92,255,107,.10);
}
.v-card:hover .v-poster img{ transform: scale(1.06); }
.v-card:hover .v-play{
  transform: translateY(0);
  border-color: rgba(92,255,107,.34);
  box-shadow: 0 0 0 1px rgba(92,255,107,.12), 0 0 46px rgba(92,255,107,.14);
}

.v-meta{ padding:10px 6px 2px; }
.v-title{ font-size:13px; font-weight:900; letter-spacing:.02em; line-height:1.15; }
.v-meta-sub{ font-size:12px; opacity:.72; margin-top:4px; }

/* Modal videos */
.v-modal{ position:fixed; inset:0; display:none; z-index:60; }
.v-modal.open{ display:block; }
.v-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); }
.v-modal-card{
  position:relative;
  width: min(980px, calc(100vw - 24px));
  margin: 7vh auto;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(92,255,107,.12);
  background: rgba(16,16,20,.80);
  box-shadow: 0 30px 120px rgba(0,0,0,.6), 0 0 90px rgba(92,255,107,.08);
}
.v-modal-x{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(14,17,23,.65);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.v-yt{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,17,23,.35);
}
.v-yt iframe{ width:100%; height:100%; border:0; }.v-modal-meta{ padding: 10px 4px 2px; }
.v-modal-title{ font-size:16px; font-weight:900; letter-spacing:.02em; }

/* Responsive videos */
@media (max-width: 980px){
  .v-hero{ flex-direction:column; align-items:stretch; }
  .v-hero-right{ min-width:auto; }
  .v-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v-card.is-featured{ grid-column: span 2; }
  .v-card.is-featured .v-poster{ aspect-ratio: 16/9; }
}
@media (max-width: 560px){
  .v-wrap{ padding:16px; }
  .v-grid{ grid-template-columns: 1fr; }
  .v-card.is-featured{ grid-column: span 1; }
}

/* ===== Input base ===== */
input, select, textarea{
  background: rgba(14,17,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}

/* ============================
   VNDLS FIX: COVER FULL + LIST COVERS BIGGER
   Pegar AL FINAL de assets/css/app.css
============================ */

/* 1) PLAYER: que el cover LLENE el recuadro siempre */
.player .cover-wrap{
  overflow:hidden; /* clave: recorta bien */
}

.player .cover-wrap .cover,
.player .cover-wrap .cover-lg,
#cover.cover,
#cover.cover-lg{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block;
  border-radius: 0 !important; /* el radio lo maneja el wrap */
}

/* por si alguna regla vieja deja tamaños fijos */
.cover{
  object-fit: cover;
}

/* 2) LISTA: covers más grandes */
.beatrow .mini{
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

/* ajusta grid/padding para que se vea “más pro” */
.beatrow{
  gap: 14px;
  padding: 14px;
}

/* hace que el texto respire cuando el cover crece */
.beatrow .grow{
  min-width: 0;
}

/* Mobile: un poquito más compacto pero aún grande */
@media (max-width: 560px){
  .beatrow{
    padding: 12px;
    gap: 12px;
  }
  .beatrow .mini{
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }
}

/* =========================
   VNDLS PATCH — covers + layout
   Pegar AL FINAL de assets/css/app.css
========================= */

/* 1) Player: que el cover llene el recuadro aunque exista .cover {84x84} */
.cover-wrap { overflow: hidden; }
.cover.cover-lg{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* 2) Lista: covers más grandes y más "pro" */
.beat-cover{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}

/* Ajuste de layout en beatrow para que respire */
.beatrow{
  align-items: center;
  gap: 14px;
}
.beatmeta{ min-width: 0; }

/* Título + flags ordenados */
.beatmeta .row1{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.beatmeta .t{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Precio más estable */
.beatprice{
  min-width: 86px;
  text-align: right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.beatprice .old{
  font-size:12px;
  opacity:.55;
  text-decoration: line-through;
}
.beatprice .now{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--neon);
  letter-spacing: -0.5px;
  line-height: 1;
}

/* 3) Mobile: que tags/flags NO se encimen */
@media (max-width: 560px){
  .beatrow{ align-items: flex-start; }
  .beat-cover{ width: 64px; height: 64px; border-radius: 16px; }

  .beatmeta .row1{
    flex-wrap: wrap;
    gap: 8px;
  }
  .beatmeta .t{
    width: 100%;
  }
  .flags{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 0;
  }
  .tags{
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .tags .badge{
    height: auto;
    padding: 6px 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
}

/* 4) Quitar “mensaje/overlay de abajo” (si alguien lo inyecta) */
#debug, #debugPanel, #debugOverlay, .debug, .debug-panel, .debug-overlay{
  display:none !important;
}

/* 5) Info de compra: menos espacio muerto (compacto + pro) */
#purchaseInfo{
  gap: 14px !important;
}
#purchaseInfo .purchase-list li{
  font-size: 14px;
  opacity: .92;
}
#purchaseInfo .purchase-socials{
  margin-top: 6px !important;
}
#purchaseInfo .purchase-socials > div{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#purchaseInfo .purchase-socials a.chip{
  justify-content: center !important;
}
@media (max-width: 980px){
  #purchaseInfo .purchase-socials > div{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   VNDLS FIX: covers grandes + mini-player no encimado
   Pegar AL FINAL de assets/css/app.css
========================================= */

/* ---------- 1) Cover del PLAYER (arriba) más grande ---------- */
.player-left{
  gap:16px;
}
.cover{
  width:128px;
  height:128px;
  border-radius:18px;
  object-fit:cover;
}
@media (max-width: 980px){
  .cover{
    width:112px;
    height:112px;
  }
}
@media (max-width: 560px){
  .cover{
    width:104px;
    height:104px;
  }
}

/* ---------- 2) Covers más grandes en la LISTA de beats ---------- */
/* tu lista usa .mini dentro de .beatrow */
.beatrow{
  padding:14px;
  gap:14px;
}
.mini{
  width:72px;
  height:72px;
  border-radius:16px;
  object-fit:cover;
  flex: 0 0 auto;
}
@media (max-width: 560px){
  .mini{
    width:66px;
    height:66px;
  }
}

/* La fila superior no debe encimarse: título + flags */
.row1{
  align-items:flex-start;
  gap:10px;
}
.t{
  line-height:1.05;
}

/* =========================================================
   VNDLS — MINI PLAYER (VERSIÓN ÚNICA Y ESTABLE)
   - Desktop: 1 fila
   - Mobile: 2 filas reales (sin encime) SIN grid/contents raros
========================================================= */

#miniPlayer{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(760px, calc(100% - 24px));
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16,16,20,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  z-index: 900;
  overflow: hidden;

  transition: transform .22s ease, opacity .22s ease;
}
#miniPlayer.show,
#miniPlayer.is-open{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* izquierda */
#miniPlayer .mini-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1 1 auto;
}
#miniCover{
  width:44px; height:44px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}
#miniPlayer .mini-meta{ min-width:0; }
#miniTitle,#miniSub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#miniTitle{ font-size:12px; line-height:1.1; font-weight:900; }
#miniSub{ font-size:11px; opacity:.75; }

/* derecha: 2 filas */
#miniPlayer .mini-right{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  flex: 0 0 auto;
}
#miniPlayer .mini-right-top,
#miniPlayer .mini-right-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}

#miniPrice{
  font-family: var(--font-display, inherit);
  font-weight: 900;
  color: var(--neon, #5CFF6B);
}

#miniPrev,#miniNext{
  width:42px;
  height:38px;
  padding:0;
  border-radius:14px;
}
#miniPlay,#miniBuy{
  height:38px;
  padding:0 14px;
  border-radius:14px;
  white-space:nowrap;
}

/* empuje del body cuando el mini aparece */
body.has-mini{
  padding-bottom: calc(92px + 18px + env(safe-area-inset-bottom));
}

/* móvil: reduce un poco y si es ultra XS, ocultamos SOLO next */
@media (max-width: 420px){
  #miniPlay,#miniBuy{ padding:0 12px; }
  #miniSub{ max-width:62vw; }
}
@media (max-width: 360px){
  #miniNext{ display:none; }
}

/* =========================================================
   VNDLS — MINI PLAYER PRO (info arriba / acciones abajo)
========================================================= */

#miniPlayer{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 12px;
}

/* Fila superior: info completa */
#miniPlayer .mini-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#miniPlayer .mini-meta{
  min-width:0;
  flex:1 1 auto;
}

#miniTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#miniSub{
  font-size:11px;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#miniPlayer .mini-pricewrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

#miniPrice{
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--neon);
  font-size:14px;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Fila inferior: controles + comprar */
#miniPlayer .mini-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#miniPlayer .mini-transport{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botones pro */
#miniPrev,#miniNext{
  width:44px;
  height:38px;
  padding:0;
  border-radius:14px;
}
#miniPlay{
  height:38px;
  padding:0 16px;
  border-radius:14px;
  min-width:92px;
  font-weight:900;
  letter-spacing:.06em;
}
#miniBuy{
  height:38px;
  padding:0 16px;
  border-radius:14px;
  min-width:120px;
  font-weight:900;
  letter-spacing:.06em;
}

/* XS: si no cabe, reduce comprar */
@media (max-width: 360px){
  #miniBuy{ min-width:auto; padding:0 12px; }
  #miniPlay{ min-width:auto; padding:0 12px; }
}

/* =========================================
   MINI PLAYER PRO — layout final
========================================= */

#miniPlayer{
  gap: 10px !important;
}

/* TOP: info + precio */
#miniPlayer .mini-top{
  display:grid !important;
  grid-template-columns: 44px 1fr auto !important; /* cover | meta | precio */
  align-items:center !important;
  column-gap:10px !important;
}

#miniPlayer .mini-meta{ min-width:0 !important; }

#miniTitle{
  font-size: 12px !important;
  letter-spacing: .06em !important;
}
#miniSub{
  font-size: 11px !important;
  opacity: .72 !important;
}

/* Precio a la derecha, estable */
#miniPlayer .mini-pricewrap{
  justify-self:end !important;
}
#miniPrice{
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* BOTTOM: controles izquierda, comprar derecha, SIEMPRE en una línea */
#miniPlayer .mini-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:nowrap !important;         /* clave: no se va a 2 líneas */
}

#miniPlayer .mini-transport{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex: 0 0 auto !important;
}

#miniBuy{
  margin-left:auto !important;
  flex: 0 0 auto !important;
  min-width: 120px !important;
}

/* Si el teléfono es MUY chico: reduce tamaños para que siga en una línea */
@media (max-width: 360px){
  #miniPrev,#miniNext{ width:40px !important; }
  #miniPlay{ min-width: 82px !important; padding:0 12px !important; }
  #miniBuy{ min-width: 104px !important; padding:0 12px !important; }
}

/* =========================================
   VNDLS — TAGS/PILLS en UNA sola fila (no apilados)
========================================= */

/* Contenedor de tags: 1 línea con scroll horizontal */
.beatrow .row2,
.beatrow .tags{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding-bottom: 4px; /* evita que se sienta cortado */
  scrollbar-width: none; /* Firefox */
}
.beatrow .row2::-webkit-scrollbar,
.beatrow .tags::-webkit-scrollbar{
  display:none; /* Chrome/Safari */
}

/* Pills: que no se estiren ni hagan wrap */
.beatrow .badge,
.beatrow .tag,
.beatrow .pill{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Si tienes .flags en la misma fila, que también sea 1 línea */
.beatrow .flags{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
.beatrow .flags::-webkit-scrollbar{ display:none; }

/* =========================================
   VNDLS — LISTA PRO (meta en 1 línea + tags 1 fila con fade)
========================================= */

/* 1) Título + precio: layout limpio */
.beatrow .row1{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.beatrow .t{
  font-weight:900;
  line-height:1.05;
  margin-right:8px;
}

/* 2) Meta (BPM · Key · Mood) en UNA sola línea */
.beatrow .row2{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important; /* permite que tags bajen si hace falta */
}

/* Si tu HTML pone el texto meta en un nodo tipo .sub / .meta-sub, lo forzamos inline */
.beatrow .row2 .sub,
.beatrow .row2 .meta-sub,
.beatrow .row2 .mini-sub,
.beatrow .row2 .muted{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important; /* <-- clave para que no se parta */
}

/* 3) Tags: una fila pro con scroll, pero SIN verse cortados */
.beatrow .tags{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding: 2px 12px 6px 2px !important; /* espacio a la derecha para que no “corte” */
  margin-top: 6px !important;

  scrollbar-width:none !important;
}
.beatrow .tags::-webkit-scrollbar{ display:none; }

/* Pills siempre completas */
.beatrow .tags .badge,
.beatrow .tags .tag,
.beatrow .tags .pill{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Fade pro (indica que hay más tags, sin que se vea “cortado”) */
.beatrow .tags{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%);
}

/* =========================================================
   VNDLS — LISTA PRO (HTML real desde beats.js)
========================================================= */

/* Layout general: cover | meta | precio */
.beatrow{
  display:grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap:14px !important;
  align-items:start !important;
}

/* ---------- META ---------- */
.beatrow .beatmeta{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

/* Título completo (sin cortar) */
.beatrow .title{
  font-weight:900 !important;
  line-height:1.1 !important;
}

/* ---------- BPM · KEY · MOOD (UNA línea) ---------- */
.beatrow .sub{
  white-space:nowrap !important;   /* CLAVE */
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  opacity:.8;
  font-size:12px;
}

/* ---------- TAGS: UNA fila pro ---------- */
.beatrow .tags{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding-bottom:4px;
  scrollbar-width:none;
}
.beatrow .tags::-webkit-scrollbar{ display:none; }

/* Pills completas, nunca cortadas */
.beatrow .tags .badge{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Fade SOLO cuando hay overflow */
.beatrow .tags{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.beatrow .tags.has-overflow{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0) 100%);
}


/* ---------- PRECIO ---------- */
.beatrow .beatprice{
  align-self:start !important;
  white-space:nowrap !important;
}

/* ===== ADMIN base force ===== */
body{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(92,255,107,.20), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(21,242,161,.14), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

a{ color: inherit; }

button, .btn, input, select, textarea{
  font-family: inherit;
}

input, select, textarea{
  background: rgba(14,17,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}

button, .btn{
  background: rgba(14,17,23,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
/* ===== ENTREGAS admin layout fix ===== */

.entregas-form,
.entregas-actions,
.entregas-list,
.entregas-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.entregas-form > *,
.entregas-actions > * {
  flex: 1 1 auto;
}
/* Bot1717n principal */
.entregas-form .btn-primary,
.entregas-form button[type="submit"] {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Inputs no se enciman */
.entregas-form input,
.entregas-form select,
.entregas-form textarea {
  min-width: 220px;
}

/* Listado botones */
.entregas-list .btn,
.entregas-actions .btn {
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 720px) {
  .entregas-form,
  .entregas-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .entregas-form .btn-primary,
  .entregas-form button[type="submit"] {
    margin-left: 0;
  }



.brand-logo-end{
  position: relative;
  width: min(820px, 92vw);
  height: auto;
  max-height: clamp(140px, 22vh, 260px); /* <- controla el alto */
  opacity: .16;                           /* <- estilo watermark */
  transform: translateY(10px);            /* <- lo baja un poco */
  filter:
    drop-shadow(0 22px 60px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(0,255,140,.18));
}

.delivery-brand-end{
  position: relative;
  margin-top: 22px;
  padding: 32px 16px 46px; /* antes estaba gigantesco */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

/* --- FORCE: logo final SIEMPRE controlado --- */
.delivery-brand-end{
  position: relative;
  margin-top: 18px !important;
  padding: 18px 16px 28px !important;
  height: clamp(140px, 22vh, 220px) !important; /* <- aquí se controla el tamaño real */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden !important;
}

/* aplica tanto si usas <img> o <object> */
.delivery-brand-end img,
.delivery-brand-end object{
  width: min(520px, 86vw) !important;  /* <- BAJA el tamaño */
  height: auto !important;
  max-height: 100% !important;         /* <- nunca más grande que el bloque */
  opacity: .14 !important;             /* watermark pro */
  transform: translateY(10px) scale(.92) !important;
  filter:
    drop-shadow(0 18px 55px rgba(0,0,0,.55))
    drop-shadow(0 0 16px rgba(0,255,140,.16)) !important;
  pointer-events: none;
}