/* Estilos para galeria de proyectos */
:root{
  --bg:#343a40;
  --card:#ffffff;
  --muted:#6c757d;
  --accent:#007bff;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
.site-header{padding:28px 20px;text-align:center;color:#fff}
.site-header h1{margin:0;font-size:1.6rem}
.site-header p{margin:6px 0 0;color:rgba(255,255,255,.72)}
.site-header a{color:var(--accent);text-decoration:none}
.site-header .back-link{display:inline-block;margin-bottom:8px;color:var(--accent);text-decoration:none;font-size:.9rem}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:20px;max-width:1200px;margin:0 auto;position:relative;background-size:cover;background-position:center;transition:background-image 1.5s ease-in-out}
.gallery::before{content:"";position:absolute;inset:0;background:rgba(20,24,29,.46);pointer-events:none;z-index:0}
.gallery > *{position:relative;z-index:1}

.card{background:rgba(255,255,255,.15);border-radius:10px;box-shadow:0 6px 18px rgba(18,18,18,.15);border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .18s,box-shadow .18s;min-height:300px;position:relative;cursor:pointer;display:flex;flex-direction:column}
.card.has-bg{background-color:transparent!important;background-size:cover;background-position:center}
.card.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,18,.16) 0%,rgba(9,13,18,.58) 54%,rgba(9,13,18,.86) 100%);pointer-events:none}
.card::before{content:"";position:absolute;top:8px;left:8px;width:32px;height:32px;background:url('../favicon.png') no-repeat center/contain;opacity:.24;pointer-events:none;z-index:2}
.card:hover,.card:focus{transform:translateY(-6px);outline:none;box-shadow:0 12px 26px rgba(18,18,18,.22)}
.card:focus-visible{box-shadow:0 0 0 3px rgba(0,123,255,.35),0 12px 26px rgba(18,18,18,.22)}

.card-gallery{height:78px;opacity:1;overflow:hidden;padding:0 14px 14px;position:relative;z-index:3}
.project-ribbon{height:64px;overflow:hidden;border-radius:8px;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.project-ribbon-track{display:flex;width:max-content;gap:8px;padding:6px;animation:ribbon-scroll 30s linear infinite;will-change:transform}
.project-ribbon-track.is-static{animation:none}
.card:hover .project-ribbon-track,.card:focus .project-ribbon-track,.card:focus-within .project-ribbon-track{animation-play-state:paused}
.project-ribbon img{width:86px;height:52px;object-fit:cover;border-radius:6px;display:block;flex:0 0 auto;background:#e9ecef}

.card-content{padding:16px;position:relative;z-index:3;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.78);margin-top:auto}
.card-content h2{margin:0 0 6px;font-size:1.08rem;color:#fff;font-weight:800;line-height:1.15}
.meta{color:rgba(255,255,255,.78);font-size:.9rem;margin:0 0 8px}
.description{margin:0;color:#fff;line-height:1.35;font-weight:650}

@media (max-width:520px){
  .card{min-height:280px}
  .card-gallery{height:68px;padding:0 12px 12px}
  .project-ribbon{height:56px}
  .project-ribbon-track{gap:6px;padding:5px;animation-duration:24s}
  .project-ribbon img{width:74px;height:46px}
}

@keyframes ribbon-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .project-ribbon-track{animation:none}
}

/* Proyecto individual */
.project-page{position:relative;background-size:cover;background-position:center;transition:background-image 1.5s ease-in-out}
.project-page::before{content:"";position:fixed;inset:0;background:rgba(20,24,29,.52);pointer-events:none;z-index:-1}
.project-page > *{position:relative;z-index:1}
.project-content{max-width:800px;margin:20px auto;padding:20px;line-height:1.6;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.project-content p{margin-bottom:1em}
.project-content a{color:#9ad1ff}
.ribbon{overflow:hidden;padding:10px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);position:sticky;top:0;z-index:10}
.ribbon.bottom{position:fixed;bottom:0;top:auto;z-index:1000}
.ribbon-track{display:flex;width:max-content;gap:8px;animation:ribbon-scroll 48s linear infinite;will-change:transform}
.ribbon-track.is-static{animation:none}
.ribbon:hover .ribbon-track,.ribbon:focus-within .ribbon-track{animation-play-state:paused}
.ribbon img{width:100px;height:70px;object-fit:cover;cursor:pointer;transition:transform .12s;flex-shrink:0;background:#e9ecef}
.ribbon img:hover,.ribbon img:focus{transform:scale(1.2)}

.lightbox{position:fixed;inset:0;width:100%;height:100%;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s;user-select:none;-webkit-user-drag:none}
.lightbox.visible{opacity:1;visibility:visible}
.lightbox img{max-width:90%;max-height:90%;width:auto;height:auto;pointer-events:none}
@media (max-width:600px){
  .lightbox img{max-width:100%;max-height:100%}
}

.lightbox::after{
  content:"TecnoSurf";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-30deg);
  color:rgba(255,255,255,.3);
  font-size:3rem;
  pointer-events:none;
  white-space:nowrap;
}