/* ========= Art (vídeo + navegación) ========= */
:root{
  --art-radius:16px;
  --art-pad-x:14px;
  --art-pad-y:12px;
  --art-nav-w:44px;
  --art-nav-bg: rgba(0,0,0,.08);
  --art-nav-bg-h: rgba(0,0,0,.18);
}

.art-card{
  border:1.5px solid #dbe7ff;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-radius:var(--art-radius);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:var(--art-pad-y) var(--art-pad-x) 14px;
}

/* La zona de media “tira” del vídeo hasta casi el borde de la card */
.art-media{
  display:grid;
  grid-template-columns: var(--art-nav-w) 1fr var(--art-nav-w);
  align-items:stretch;
  margin:-6px calc(-1*var(--art-pad-x)) 8px; /* edge-to-edge para el vídeo */
}
.art-media-inner{ position:relative; }

/* 16:9 responsivo */
.yt-16x9{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#0b1220;
  border-radius:var(--art-radius);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.yt-16x9 iframe{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Flechas laterales, un poco más oscuras */
.art-nav{
  display:flex; align-items:center; justify-content:center;
  user-select:none; text-decoration:none;
  font-size:22px; font-weight:700; color:#334155;
  border-radius:12px; margin:0 4px;
  background:var(--art-nav-bg);
  transition:background .15s, color .15s, opacity .15s;
}
.art-nav:hover{ background:var(--art-nav-bg-h); color:#111827; }
.art-nav.is-disabled{
  opacity:.35; pointer-events:none; filter:grayscale(100%);
  border:1px dashed rgba(0,0,0,.15); background:rgba(0,0,0,.04);
}

/* Texto bajo el vídeo algo mayor y más “dentro” que el vídeo */
.word{ font-size:1.28rem; font-weight:700; margin:.35rem 0 .15rem; }
.desc{ color:#334155; font-size:.95rem; margin:0 0 .25rem; }
.art-meta{ display:flex; gap:1rem; font-size:.85rem; margin-top:.25rem; color:#64748b; }

/* Botones de votar */
.actions{ margin-top:.35rem; }
.actions .btn{ min-width:9.5rem; }

/* Alta más abajo + texto lead */
.art-add{ margin-top:2.75rem !important; }
.art-lead{ font-size:.95rem; color:#64748b; margin-bottom:.5rem; }

/* Responsive */
@media (max-width:576px){
  :root{ --art-nav-w:40px; }
  .word{ font-size:1.15rem; }
}


/* 🔧 Sagnat extra per al text sota el vídeo */
:root{ --art-text-extra: 18px; } /* ajusta al teu gust */

.art-card > .word,
.art-card > .desc,
.art-card > .art-meta,
.actions{
  padding-inline: calc(var(--art-pad-x) + var(--art-text-extra));
}
.art-text{ padding-inline: calc(var(--art-pad-x) + 18px); }