/* Rediseño visual del portfolio (2026-10-20). Solo presentación: títulos, textos y alt siguen visibles y en el mismo orden. */
.dp-portfolio-page{--r-lg:16px;--r-md:12px;--sh-soft:0 1px 2px #1a1a1a0d,0 8px 24px #1a1a1a0f;--sh-lift:0 2px 6px #1a1a1a14,0 22px 48px #1a1a1a26;--ease:cubic-bezier(.2,.7,.2,1)}
body.dp-portfolio-page{background:#f5f4ef}

/* Encabezado oscuro con acento de marca */
.dp-portfolio-page .pf-hero{position:relative;overflow:hidden;padding:64px 0 48px;background:radial-gradient(900px 420px at 88% -10%,#f8df0c2e,transparent 60%),radial-gradient(600px 300px at 0% 120%,#f8df0c14,transparent 60%),#1a1a1a;color:#f5f4ef;border:0}
.dp-portfolio-page .pf-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:#f8df0c}
.dp-portfolio-page .pf-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#fbe9a0;border:1px solid #f8df0c55;border-radius:999px;padding:7px 14px;font-size:12px}
.dp-portfolio-page .pf-eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:#f8df0c;box-shadow:0 0 0 4px #f8df0c33}
.dp-portfolio-page .pf-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.05em;font-weight:700;max-width:960px}
.dp-portfolio-page .pf-hero p:not(.pf-eyebrow){color:#e2e1dd;max-width:720px}
.dp-portfolio-page .pf-btn{border-radius:999px;padding:12px 22px;background:#f8df0c;border-color:#f8df0c;color:#1a1a1a;box-shadow:0 8px 24px #f8df0c33;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.dp-portfolio-page .pf-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px #f8df0c55}
.dp-portfolio-page .pf-hero .pf-btn.pf-secondary{background:transparent;color:#f5f4ef;border-color:#ffffff59;box-shadow:none}
.dp-portfolio-page .pf-hero .pf-btn.pf-secondary:hover{background:#ffffff14}
.dp-portfolio-page .pf-jump{gap:8px;margin-top:26px}
.dp-portfolio-page .dp-portfolio .pf-hero .pf-jump a:not(.pf-btn){color:#f5f4ef;text-decoration:none;font-size:14px;font-weight:550;padding:8px 14px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0a;transition:background .2s,border-color .2s}
.dp-portfolio-page .dp-portfolio .pf-hero .pf-jump a:not(.pf-btn):hover{background:#ffffff1a;border-color:#f8df0c99}

/* Barra de filtros fija bajo el menú */
.dp-portfolio-page .pf-controls{position:sticky;top:var(--header-offset,60px);z-index:20;margin:0 -12px;padding:14px 12px;background:#f5f4efe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #1a1a1a12}
.dp-portfolio-page .pf-filter{gap:6px;padding:4px;background:#fff;border:1px solid #e2e0da;border-radius:999px;box-shadow:var(--sh-soft)}
.dp-portfolio-page .pf-filter button{border:0;border-radius:999px;padding:9px 18px;min-height:40px;background:transparent;transition:background .2s,color .2s}
.dp-portfolio-page .pf-filter button:hover{background:#f1efe8}
.dp-portfolio-page .pf-filter button[aria-pressed=true]{background:#1a1a1a;color:#fff}
.dp-portfolio-page .pf-status{color:#595650;font-weight:550}

/* Secciones */
.dp-portfolio-page .pf-section{padding:52px 0 56px}
.dp-portfolio-page .pf-section h2{display:flex;align-items:center;gap:14px;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.04em}
.dp-portfolio-page .pf-section h2::before{content:'';flex-shrink:0;width:28px;height:4px;border-radius:2px;background:#f8df0c}

/* Galería: tarjetas con primera imagen destacada */
.dp-portfolio-page .pf-grid{gap:22px}
.dp-portfolio-page .pf-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e4e2dc;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-soft);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.dp-portfolio-page .pf-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:#f8df0c}
.dp-portfolio-page .pf-image-link{position:relative;border-radius:0;background:#e9e7e1}
.dp-portfolio-page .pf-card picture{aspect-ratio:3/2}
.dp-portfolio-page .pf-card img{object-fit:cover;transition:transform .7s var(--ease)}
.dp-portfolio-page .pf-card:hover img{transform:scale(1.05)}
.dp-portfolio-page .pf-image-link::after{content:'Ver completa ↗';position:absolute;right:12px;top:12px;padding:6px 12px;border-radius:999px;background:#1a1a1ad9;color:#fff;font:600 12px/1.4 Inter,system-ui,sans-serif;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s var(--ease)}
.dp-portfolio-page .pf-card:hover .pf-image-link::after,.dp-portfolio-page .pf-image-link:focus-visible::after{opacity:1;transform:none}
.dp-portfolio-page .pf-card figcaption{padding:14px 18px 16px;font-size:15px;font-weight:600;letter-spacing:-.01em;border-top:3px solid #f8df0c}
.dp-portfolio-page .pf-card figcaption span{font-weight:450;letter-spacing:0}
@media(min-width:901px){
  .dp-portfolio-page .pf-grid>.pf-card:first-child{grid-column:span 2;grid-row:span 2}
  .dp-portfolio-page .pf-grid>.pf-card:first-child .pf-image-link{flex:1;display:flex}
  .dp-portfolio-page .pf-grid>.pf-card:first-child picture{flex:1;aspect-ratio:auto;min-height:100%}
  .dp-portfolio-page .pf-grid>.pf-card:first-child figcaption{font-size:18px}
}

/* Bloque para preparar la consulta */
.dp-portfolio-page .pf-help{padding:64px 0 72px}
.dp-portfolio-page .pf-help-grid{background:#fff;border:1px solid #e4e2dc;border-radius:20px;padding:40px;box-shadow:var(--sh-soft)}
.dp-portfolio-page .pf-help h2{grid-column:1/-1;letter-spacing:-.035em}

/* Visor */
.dp-portfolio-page .pf-dialog{border:0;border-radius:var(--r-lg);box-shadow:0 40px 90px #0008}
.dp-portfolio-page .pf-dialog::backdrop{background:#121212e0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dp-portfolio-page .pf-dialog button{border-radius:999px;padding:10px 18px}
.dp-portfolio-page .pf-preview img{border-radius:var(--r-md)}

@media(max-width:900px){
  .dp-portfolio-page .pf-hero{padding:48px 0 40px}
  .dp-portfolio-page .pf-help-grid{padding:28px}
}
@media(max-width:600px){
  .dp-portfolio-page .pf-hero{padding:36px 0 32px}
  .dp-portfolio-page .pf-controls{margin:0 -20px;padding:10px 20px}
  .dp-portfolio-page .pf-filter{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .dp-portfolio-page .pf-filter button{flex-shrink:0}
  .dp-portfolio-page .pf-filter button{padding:9px 12px}
  .dp-portfolio-page .pf-help-grid{padding:22px;border-radius:16px}
  .dp-portfolio-page .pf-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){.dp-portfolio-page .pf-card,.dp-portfolio-page .pf-card img,.dp-portfolio-page .pf-btn{transition:none}.dp-portfolio-page .pf-card:hover img{transform:none}}