/* ======= PORTAFOLIO ======= */
:root{
  --bg-dark:#0D0D0D;
  --accent-blue:#0A84FF;
  --white:#FFFFFF;

  /* Altura del preview y espacio común para texto+acciones */
  --preview-h:620px;
  --card-extra:220px;
}

/* Hero y secciones */
.portfolio-hero{
  min-height:42vh;display:grid;place-items:center;text-align:center;
  background:var(--bg-dark);padding:90px 20px 50px;
}
.portfolio-hero__inner h1{font-size:2.1rem;font-weight:800;letter-spacing:.06em;margin-bottom:10px;}
.portfolio-hero__inner p{max-width:760px;margin:0 auto;opacity:.85;}

.portfolio-section{background:var(--bg-dark);padding:50px 20px 90px;}
.portfolio-section h2{margin-bottom:24px;}

.portfolio-grid{
  max-width:1200px;margin:0 auto;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start;
}

/* Tarjeta */
.portfolio-card{
  height:calc(var(--preview-h) + var(--card-extra));
  display:flex;flex-direction:column;background:#111;
  border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.portfolio-card:hover{
  transform:translateY(-6px);
  border-color:rgba(10,132,255,.35);
  box-shadow:0 16px 36px rgba(10,132,255,.15), 0 6px 16px rgba(0,0,0,.55);
}

/* Preview (desktop/tablet inline) */
.portfolio-thumb{
  position:relative;height:var(--preview-h);background:#000;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.preview-sizer{position:relative;width:100%;height:100%;background:#000;overflow:hidden;}
.preview-viewport{position:absolute;inset:0;}
.preview-viewport iframe{width:100%;height:100%;border:0;display:block;}

.preview-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
  color:#dfe8ff;font-size:.85rem;display:flex;justify-content:flex-start;align-items:flex-end;
  pointer-events:none;z-index:3;
}
.preview-overlay .hint{display:inline-flex;align-items:center;gap:8px;opacity:.9;}

.preview-fallback{
  position:absolute;inset:0;display:none;background:#000;color:#fff;z-index:4;
}
.live-preview.is-fallback .preview-fallback{display:grid;}
.fallback-inner{margin:auto;text-align:center;padding:24px;max-width:520px;}
.fallback-title{display:inline-flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:8px;}
.fallback-title .dot{width:10px;height:10px;border-radius:50%;background:var(--accent-blue);box-shadow:0 0 10px var(--accent-blue);}
.preview-fallback p{opacity:.85;margin-bottom:14px;}

/* Texto y acciones */
.portfolio-body{padding:14px 16px 10px;}
.portfolio-body h3{font-size:1.08rem;margin-bottom:6px;font-weight:700;}
.portfolio-body p{
  font-size:.92rem;line-height:1.5;opacity:.9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.portfolio-meta{
  display:flex;gap:10px 14px;margin-top:10px;opacity:.9;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.portfolio-meta span{
  font-size:.82rem;color:#dfe8ff;background:rgba(10,132,255,.12);
  border:1px solid rgba(10,132,255,.28);padding:6px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
}
.portfolio-actions{display:flex;gap:10px;padding:12px 16px 16px;margin-top:auto;}

/* Botones */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 13px;font-weight:700;border-radius:10px;text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--accent-blue);color:#000;box-shadow:0 0 12px rgba(10,132,255,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 18px rgba(10,132,255,.55);}
.btn-ghost{border:1px solid rgba(255,255,255,.2);color:var(--white);background:transparent;}
.btn-ghost:hover{border-color:rgba(10,132,255,.55);color:#dfe8ff;box-shadow:0 6px 14px rgba(10,132,255,.18);}

/* ==== Imagen Preview con efecto ==== */
.img-preview {
  overflow: hidden;
  height: var(--preview-h);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
  background: #000;
}

.img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
  will-change: transform, filter;
}

.img-preview:hover img {
  transform: scale(1.08) rotate(0.5deg);
  filter: brightness(1.1) contrast(1.05) saturate(1.2);
}

/* ===== Móvil (≤480px): lista compacta + modal ===== */
@media (max-width:480px){
  .portfolio-grid{grid-template-columns:1fr;}
  .portfolio-hero{padding:80px 16px 40px;}
  .portfolio-section{padding:40px 16px 70px;}

  /* En móvil no renderizamos el iframe inline: usamos modal */
  .portfolio-card{height:auto;}
  .portfolio-thumb{height:auto;padding:10px 12px;cursor:pointer;}
  .live-preview .preview-sizer{display:none;}
  .live-preview .preview-overlay{
    position:relative;background:#000;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);
    text-align:center;justify-content:center;
  }
  .live-preview .preview-overlay .hint{opacity:.95;font-weight:600;}
}

/* ===== Modal móvil ===== */
.preview-modal{position:fixed;inset:0;display:none;z-index:2000;}
.preview-modal.active{display:block;}
.pm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(2px);}
.pm-dialog{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96vw;height:86vh;background:#0b0b0b;color:#fff;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;
}
@media (max-width:480px){.pm-dialog{width:100vw;height:100vh;border-radius:0;}}
.pm-close{
  position:absolute;top:10px;right:12px;width:36px;height:36px;border:1px solid rgba(255,255,255,.2);
  background:#111;color:#fff;border-radius:10px;cursor:pointer;font-size:22px;line-height:1;
  display:grid;place-items:center;z-index:3;
}
.pm-close:hover{background:#151515;}
.pm-viewport{position:absolute;inset:0;display:grid;grid-template-rows:1fr;background:#000;}
.pm-viewport iframe{width:100%;height:100%;border:0;}
.pm-fallback{position:absolute;inset:0;display:none;place-items:center;padding:24px;text-align:center;background:#000;}
.pm-fallback.show{display:grid;}