/* ══════════════════════════════════════════════════════════
   DYNASTY STUDIO — ESTILOS DE LAS PAGINAS DE PROYECTO
   Comparte los mismos tokens que la pagina principal.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg-primary:    #080808;
  --bg-secondary:  #111111;
  --bg-card:       #161616;
  --accent-gold:   #C9A84C;
  --accent-light:  #E8C96A;
  --text-primary:  #FFFFFF;
  --text-secondary:#A0A0A0;
  --text-muted:    #555555;
  --border:        #222222;
  --ease:          0.3s ease;
  --pad:           clamp(18px, 5vw, 32px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg-primary); color:var(--text-primary);
  font-family:'Barlow', sans-serif; font-weight:300;
  letter-spacing:.02em; line-height:1.6; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img, video { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font:inherit; }
:focus-visible { outline:2px solid var(--accent-gold); outline-offset:3px; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--accent-gold); border-radius:2px; }

.container {
  max-width:1280px; margin:0 auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}

/* ─── BARRA SUPERIOR ─────────────────────────────────────── */
.pnav {
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,8,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:12px 0;
}
.pnav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pnav-logo { display:flex; align-items:center; flex:0 0 auto; }
.pnav-logo img {
  height:clamp(26px, 6vw, 32px); width:auto;
  max-width:none; object-fit:contain; flex:0 0 auto;
}
.pnav-logo-fallback {
  font-family:'Barlow Condensed', sans-serif; font-weight:700;
  font-size:1.25rem; letter-spacing:.1em; text-transform:uppercase; display:none;
}
.pnav-back {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.78rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-secondary);
  transition:color var(--ease); flex:0 0 auto;
}
.pnav-back:hover { color:var(--accent-gold); }

/* ─── ENCABEZADO DEL PROYECTO ────────────────────────────── */
.phead { padding:clamp(48px, 9vw, 90px) 0 clamp(30px, 5vw, 46px); }
.phead-cats {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
}
.phead-cat {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.68rem; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-gold);
  border:1px solid rgba(201,168,76,.35); padding:5px 12px;
}
.phead h1 {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; line-height:.98;
  font-size:clamp(2.3rem, 7vw, 5rem);
  margin-bottom:20px;
}
.phead-desc {
  font-size:clamp(.95rem, 1.6vw, 1.08rem);
  color:var(--text-secondary); max-width:640px; line-height:1.75;
}
.phead-meta {
  display:flex; flex-wrap:wrap; gap:clamp(24px, 5vw, 56px);
  margin-top:34px; padding-top:26px; border-top:1px solid var(--border);
}
.pmeta-k {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted); display:block; margin-bottom:4px;
}
.pmeta-v {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.05rem; font-weight:500; letter-spacing:.04em;
}

/* ─── GALERIA ────────────────────────────────────────────── */
.pgal { padding-bottom:clamp(56px, 9vw, 100px); }
.pgal-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
.pitem {
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border);
  aspect-ratio:4/3; cursor:pointer;
  transition:border-color var(--ease);
}
.pitem.wide { grid-column:span 2; }
.pitem:hover { border-color:var(--accent-gold); }
.pitem video, .pitem img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.pitem:hover video, .pitem:hover img { transform:scale(1.05); }

.pitem-badge {
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-primary); background:rgba(0,0,0,.62);
  padding:5px 10px; backdrop-filter:blur(6px);
}
.pitem-cap {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:26px 14px 12px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.85rem; letter-spacing:.06em;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.pitem-play {
  position:absolute; top:50%; left:50%; z-index:3;
  transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all var(--ease);
  background:rgba(0,0,0,.3); pointer-events:none;
}
.pitem-play::after {
  content:''; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff; margin-left:3px;
}
.pitem:hover .pitem-play { opacity:1; border-color:var(--accent-gold); }
.pitem:hover .pitem-play::after { border-left-color:var(--accent-gold); }

.pitem-pdf {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:var(--bg-secondary);
}
.pitem-pdf span:first-child {
  font-family:'Barlow Condensed', sans-serif; font-weight:700;
  font-size:2rem; letter-spacing:.15em; color:var(--accent-gold);
}
.pitem-pdf span:last-child {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-secondary);
}

.pgal-empty {
  border:1px dashed var(--border); padding:64px 24px; text-align:center;
  font-family:'Barlow Condensed', sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); font-size:.85rem;
}

/* ─── PIE: OTROS PROYECTOS + CTA ─────────────────────────── */
.pfoot { border-top:1px solid var(--border); padding:clamp(40px,6vw,64px) 0; }
.pfoot-nav { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.pfoot-link { max-width:46%; }
.pfoot-link.next { text-align:right; margin-left:auto; }
.pfoot-k {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted); display:block; margin-bottom:6px;
}
.pfoot-v {
  font-family:'Barlow Condensed', sans-serif; font-weight:600;
  font-size:clamp(1.1rem,2.6vw,1.6rem); text-transform:uppercase;
  letter-spacing:.04em; transition:color var(--ease);
}
.pfoot-link:hover .pfoot-v { color:var(--accent-gold); }

.pcta { background:var(--bg-secondary); padding:clamp(52px,8vw,84px) 0; text-align:center; }
.pcta h2 {
  font-family:'Barlow Condensed', sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.7rem,4.4vw,2.9rem); margin-bottom:22px;
}
.btn {
  display:inline-block; text-align:center;
  padding:15px 32px; min-height:46px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.85rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; transition:all var(--ease);
}
.btn-primary { background:var(--accent-gold); color:#000; }
.btn-primary:hover { background:var(--accent-light); transform:translateY(-2px); }

.pend {
  padding:26px 0; text-align:center; border-top:1px solid var(--border);
  font-size:.78rem; color:var(--text-muted);
}

/* ─── LISTADO /proyectos/ ────────────────────────────────── */
.plist { padding:clamp(40px,7vw,72px) 0 clamp(56px,9vw,100px); }
.plist-lbl {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-gold); display:block; margin-bottom:14px;
}
.plist h1 {
  font-family:'Barlow Condensed', sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(2.2rem,5.5vw,4rem); margin-bottom:40px;
}
.plist-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.pcard {
  position:relative; overflow:hidden; display:block;
  background:var(--bg-card); border:1px solid var(--border);
  aspect-ratio:16/11; transition:border-color var(--ease);
}
.pcard:hover { border-color:var(--accent-gold); }
.pcard video, .pcard img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pcard:hover video, .pcard:hover img { transform:scale(1.06); }
.pcard-ov {
  position:absolute; inset:0; z-index:2; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.pcard-cats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pcard-cat {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-gold); border:1px solid rgba(201,168,76,.35); padding:3px 8px;
}
.pcard-name {
  font-family:'Barlow Condensed', sans-serif; font-weight:600;
  font-size:1.4rem; text-transform:uppercase; letter-spacing:.03em; line-height:1.1;
}
.pcard-count {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-secondary); margin-top:5px;
}

/* ─── VISOR A PANTALLA COMPLETA ──────────────────────────── */
#plb {
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(0,0,0,.97);
  align-items:center; justify-content:center;
}
#plb.open { display:flex; }
.plb-inner {
  width:100%; height:100%;
  padding:calc(env(safe-area-inset-top) + 58px) 16px calc(env(safe-area-inset-bottom) + 20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.plb-media {
  position:relative; width:100%; max-width:1100px; flex:1 1 auto;
  display:flex; align-items:center; justify-content:center; min-height:0;
}
.plb-media video, .plb-media img { max-width:100%; max-height:100%; object-fit:contain; }
.plb-media iframe { width:100%; height:100%; border:0; aspect-ratio:16/9; }
.plb-close {
  position:fixed; top:calc(env(safe-area-inset-top) + 8px); right:12px; z-index:6;
  font-size:2.2rem; line-height:1; padding:6px 14px; color:var(--text-primary);
  transition:color var(--ease);
}
.plb-close:hover { color:var(--accent-gold); }
.plb-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid var(--border);
  color:var(--text-primary); font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--ease);
}
.plb-arrow:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
.plb-prev { left:6px; }
.plb-next { right:6px; }
.plb-foot {
  flex:0 0 auto; text-align:center;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem; letter-spacing:.1em; color:var(--text-secondary);
}
.plb-foot em { font-style:normal; color:var(--accent-gold); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:900px) {
  .pgal-grid  { grid-template-columns:1fr; }
  .plist-grid { grid-template-columns:1fr; }
  .pitem      { aspect-ratio:16/11; }
  .pitem.wide { grid-column:span 1; }
  .pfoot-link { max-width:100%; }
}

@media (hover:none) {
  .pitem-play { opacity:.85; }
  .pitem:hover video, .pitem:hover img,
  .pcard:hover video, .pcard:hover img { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}