/* ===== YEKP3D - Portfolio replica ===== */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#1c1c1c;
  --panel:#252525;
  --panel-2:#2e2e2e;
  --txt:#cfcfcf;
  --txt-dim:#8a8a8a;
  --accent:#e0e0e0;
  --line:#3a3a3a;
  --hover:#454545;
}

html,body{ background:var(--bg); color:var(--txt);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }

a{ color:var(--txt); text-decoration:none; }
a:hover{ color:#fff; }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,20,20,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; flex-wrap:wrap; gap:10px;
}
.brand{
  font-size:22px; font-weight:700; letter-spacing:3px; color:#fff;
  text-transform:uppercase;
}
.brand span{ color:var(--txt-dim); font-weight:300; }

/* ---- Nav ---- */
nav.main-nav ul{ list-style:none; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav.main-nav li{ position:relative; }
nav.main-nav a{
  display:block; padding:10px 14px; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; color:var(--txt);
}
nav.main-nav a:hover, nav.main-nav a.active{ color:#fff; }
nav.main-nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:#fff;
}
nav.main-nav .submenu{
  display:none; position:absolute; top:100%; left:0; min-width:150px;
  background:var(--panel); border:1px solid var(--line); padding:6px 0; z-index:60;
}
nav.main-nav li:hover .submenu{ display:block; }
nav.main-nav .submenu a{ padding:8px 16px; font-size:12px; letter-spacing:.5px; }
nav.main-nav .submenu a:hover{ background:var(--hover); }

.menu-toggle{ display:none; background:none; border:1px solid var(--line);
  color:var(--txt); padding:8px 12px; cursor:pointer; border-radius:3px; }

/* ---- Layout ---- */
.wrap{ max-width:1200px; margin:0 auto; padding:24px 20px 80px; }
.layout{ display:grid; grid-template-columns:200px 1fr; gap:30px; }

/* ---- Sidebar (tags) ---- */
.sidebar h4{
  text-transform:uppercase; letter-spacing:2px; font-size:11px;
  color:var(--txt-dim); margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:8px;
}
.tag-list{ list-style:none; }
.tag-list li{ margin:2px 0; }
.tag-list a, .tag-list button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--txt); padding:6px 8px; font-size:13px; border-radius:3px; font-family:inherit;
}
.tag-list a:hover, .tag-list button:hover{ background:var(--panel-2); color:#fff; }
.tag-list button.active{ background:var(--hover); color:#fff; }

/* ---- Video grid ---- */
.grid-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.grid-head h1, .grid-head h2{ font-size:18px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:#fff; }
.count{ color:var(--txt-dim); font-size:12px; }

.video-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--hover); }
.thumb{ position:relative; aspect-ratio:181/102; background:#000; cursor:pointer; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; }
.thumb:hover img{ opacity:.6; }
.thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.thumb:hover .play{ opacity:1; }
.thumb .play svg{ width:46px; height:46px; }
/* Placeholder cuando la miniatura no carga */
.thumb-fallback{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a); padding:10px; text-align:center;
}
.thumb-fallback span{ font-size:12px; color:var(--txt-dim); letter-spacing:.5px; line-height:1.4; }
.card-body{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.card-title{ font-size:13px; color:#fff; line-height:1.3; min-height:34px; }
.card-meta{ font-size:11px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:1px; }
.card-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.add-play{ font-size:11px; color:var(--txt-dim); background:none; border:1px solid var(--line);
  padding:4px 8px; border-radius:3px; cursor:pointer; font-family:inherit; }
.add-play:hover{ background:var(--hover); color:#fff; }
.info-btn{ font-size:10px; letter-spacing:1px; color:var(--txt-dim); cursor:pointer; background:none; border:none; font-family:inherit; text-transform:uppercase; }
.info-btn:hover{ color:#fff; }

.card-info{ display:none; padding:0 12px 12px; font-size:11px; }
.card-info.open{ display:block; }
.card-info table{ width:100%; border-collapse:collapse; }
.card-info td{ padding:3px 4px; border-top:1px solid var(--line); vertical-align:top; }
.card-info td:first-child{ color:var(--txt-dim); text-transform:uppercase; letter-spacing:.5px; width:42%; }

/* ---- Modal player ---- */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:200;
  align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal-box{ width:min(900px,100%); }
.modal-box .ratio{ position:relative; padding-top:56.25%; background:#000; }
.modal-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal-close{ position:absolute; top:18px; right:24px; color:#fff; font-size:34px; cursor:pointer; line-height:1; background:none; border:none; }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 4px 0; color:var(--txt-dim); font-size:13px; }
.modal-foot #yk-modal-title{ color:#fff; }
.modal-vimeo{ color:var(--txt-dim); font-size:12px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.modal-vimeo:hover{ color:#fff; }
.modal-blocked{ display:none; position:absolute; inset:0; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px;
  background:#141414; }
.modal-blocked p{ color:var(--txt-dim); font-size:14px; max-width:420px; }
.modal-blocked strong{ color:#fff; font-size:16px; }
.modal-blocked .btn{ margin-top:6px; text-decoration:none; }

/* ---- Playlist bar ---- */
.playlist-bar{ position:fixed; bottom:0; left:0; right:0; background:#141414; border-top:1px solid var(--line); z-index:90; }
.playlist-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 20px; cursor:pointer; }
.playlist-head h3{ font-size:12px; text-transform:uppercase; letter-spacing:2px; color:#fff; }
.playlist-head .pl-count{ background:var(--hover); color:#fff; border-radius:10px; padding:1px 8px; font-size:11px; margin-left:8px; }
.playlist-items{ display:none; padding:0 20px 16px; max-height:200px; overflow:auto; }
.playlist-items.open{ display:block; }
.pl-row{ display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; }
.pl-row .pl-thumb{ position:relative; width:60px; height:34px; flex:0 0 auto; border-radius:2px;
  overflow:hidden; cursor:pointer; background:#000; }
.pl-row .pl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; }
.pl-row .pl-ph{ display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  color:var(--txt-dim); font-size:12px; background:#2a2a2a; }
.pl-row .pl-title{ flex:1; color:#fff; }
.pl-row .pl-remove{ color:var(--txt-dim); cursor:pointer; background:none; border:none; font-size:16px; }
.pl-row .pl-remove:hover{ color:#fff; }
.pl-empty{ color:var(--txt-dim); padding:12px 0; font-size:12px; }

/* ---- Content pages ---- */
.page-title{ font-size:26px; font-weight:300; letter-spacing:1px; color:#fff; margin-bottom:6px; }
.page-sub{ font-size:16px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:2px; margin:24px 0 16px; }
.filmo{ list-style:none; max-width:720px; }
.filmo li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.filmo li a{ color:#fff; font-weight:600; }
.filmo li a:hover{ color:var(--txt); }
.filmo li span{ color:var(--txt-dim); }

/* ---- Contact form ---- */
.contact-form{ max-width:560px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--txt-dim); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:#fff;
  padding:11px 12px; border-radius:3px; font-family:inherit; font-size:14px;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--hover); }
.btn{ background:#fff; color:#111; border:none; padding:11px 26px; font-size:13px; letter-spacing:1px;
  text-transform:uppercase; cursor:pointer; border-radius:3px; font-family:inherit; }
.btn:hover{ background:var(--txt); }
.form-msg{ margin-top:14px; font-size:13px; color:#7bc47b; display:none; }

/* ---- Reel page ---- */
.reel-wrap{ max-width:960px; margin:0 auto; }
.reel-ratio{ position:relative; padding-top:56.25%; background:#000; border:1px solid var(--line); }
.reel-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--line); padding:24px 20px 90px; text-align:center; color:var(--txt-dim); font-size:12px; }
.site-footer .langs{ margin-bottom:10px; }
.site-footer .langs a{ margin:0 8px; text-transform:uppercase; letter-spacing:1px; }

/* ---- Responsive ---- */
@media(max-width:820px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ order:2; }
  .menu-toggle{ display:block; }
  nav.main-nav{ width:100%; display:none; }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  nav.main-nav .submenu{ position:static; border:none; background:var(--panel-2); padding-left:14px; }
  nav.main-nav li:hover .submenu{ display:block; }
}