/* ==========================================================================
   Portafolio: vitrine para la equipo comercial. Usa los tokens de /style.css
   (--ink, --surface, --line-strong, --radius…). Prefijo pf- para no pisar
   nada del resto del sitio. Mismo archivo en ES y PT (lo copia
   scripts/build_portafolio.py).
   ========================================================================== */

section[id]{scroll-margin-top:78px}
.pf-hero{min-height:560px;background:#111}
.pf-hero .hero-photo-content h1{max-width:19ch}
/* fondo: capturas reales de los proyectos, a color a la derecha, fundidas hacia el fondo oscuro donde va el texto */
.pf-hero-bg{left:auto;width:58%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.pf-hero-bg img{width:100%;height:100%;min-height:0;object-fit:cover;filter:none}
.pf-hero .hero-photo-overlay{display:none}
/* el hero es casi negro: el primario va en amarillo, igual que en las bandas oscuras del sitio */
.pf-hero .btn--primary{background:var(--yellow);color:var(--ink)}
.pf-hero .btn--primary:hover{background:#fff}
@media (max-width:760px){
  .pf-hero{min-height:660px}
  .pf-hero-bg{left:0;width:100%;height:46%;bottom:auto;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
}

/* Modo equipo comercial (solo aparece con ?equipo=1) ---------------------- */
.pf-equipo{background:var(--ink);color:#fff;padding:28px 0}
.pf-equipo[hidden]{display:none}
.pf-equipo h2{color:#fff;font-size:1.15rem;letter-spacing:0}
.pf-equipo p{color:rgba(255,255,255,.72);font-size:.95rem;margin-top:6px;max-width:62ch}
.pf-equipo-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:center}
.pf-equipo input{flex:1 1 220px;min-width:0;padding:13px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.95rem}
.pf-equipo input::placeholder{color:rgba(255,255,255,.55)}
.pf-equipo input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.pf-equipo .btn--primary{background:var(--yellow);color:var(--ink)}
.pf-equipo .btn--primary:hover{background:#fff}
.pf-equipo .btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.pf-equipo .btn--outline:hover{background:#fff;color:var(--ink)}
.pf-equipo-link{display:block;margin-top:14px;font-size:.85rem;color:var(--yellow);word-break:break-all}

/* Demo: ventana de navegador + celular --------------------------------- */
.pf-tabs{display:flex;justify-content:center;margin:34px 0 0}
.pf-tabs-in{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong)}
.pf-tab{border:0;background:transparent;padding:10px 22px;border-radius:999px;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.pf-tab:hover{color:var(--ink)}
.pf-tab[aria-pressed="true"]{background:var(--ink);color:#fff}
.pf-tab:focus-visible,.pf-filter:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pf-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.pf-browser{margin-top:28px;border-radius:14px;background:#1d1d1d;box-shadow:0 24px 56px rgba(17,17,17,.2);overflow:hidden}
.pf-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#2a2a2a}
.pf-bar i{width:10px;height:10px;border-radius:50%}
.pf-bar i:nth-child(1){background:#ff5f57}.pf-bar i:nth-child(2){background:#febc2e}.pf-bar i:nth-child(3){background:#28c840}
.pf-url{flex:1;margin-left:10px;background:#111;color:#a8a8a8;font-size:.8rem;padding:5px 12px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-view{position:relative;overflow:hidden;background:#fff}
.pf-view iframe{position:absolute;top:0;left:0;width:1280px;height:820px;border:0;transform-origin:top left;background:#fff}
.pf-phone-row{display:flex;gap:48px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:56px}
.pf-phone{flex:none;width:326px;padding:12px;border-radius:44px;background:#151515;box-shadow:0 24px 56px rgba(17,17,17,.25)}
.pf-screen{position:relative;width:302px;height:620px;border-radius:32px;overflow:hidden;background:#fff}
.pf-screen iframe{position:absolute;top:0;left:0;width:390px;height:800px;border:0;transform:scale(.7744);transform-origin:top left;background:#fff}
.pf-phone-text{flex:1 1 280px;max-width:420px}
.pf-phone-text h3{font-size:1.3rem;margin-bottom:16px}
.pf-steps{list-style:none;display:grid;gap:12px;counter-reset:pf}
.pf-steps li{counter-increment:pf;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:.95rem;line-height:1.5}
.pf-steps li::before{content:counter(pf);flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.pf-note{margin-top:16px;font-size:.85rem;color:var(--ink-2);opacity:.85}
@media (max-width:700px){
  .pf-browser,.pf-tabs{display:none}
  .pf-phone-row{margin-top:36px}
  .pf-phone{width:100%;max-width:326px}
}

/* Demos en camino ------------------------------------------------------ */
.pf-soon{margin-top:64px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:28px 32px}
.pf-soon h3{font-size:1.15rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-soon p{margin-top:6px;font-size:.95rem;max-width:58ch}
@media (max-width:640px){.pf-soon{padding:24px 20px}.pf-soon>div,.pf-soon .btn{width:100%}.pf-soon .btn{justify-content:center;text-align:center;white-space:normal}}

/* Proyectos en producción: filtros + tarjetas -------------------------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px}
.pf-filter{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);padding:10px 20px;border-radius:999px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pf-filter:hover{border-color:var(--ink);color:var(--ink)}
.pf-filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pf-card[hidden]{display:none}
.pf-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(17,17,17,.1)}
.pf-card-img{aspect-ratio:16/10;background:#e9e4da;overflow:hidden}
.pf-card-img img{width:100%;height:100%;object-fit:cover}
.pf-card-img--logo{display:flex;align-items:center;justify-content:center;background:#fff;padding:28px}
.pf-card-img--logo img{width:auto;height:auto;max-width:78%;max-height:100%;object-fit:contain}
.pf-card-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:1px solid var(--line-strong)}
.pf-card-body h3{font-size:1.1rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-card-body p{font-size:.93rem;line-height:1.5}
.pf-card-body .link-arrow-sm{margin-top:auto;padding-top:6px}
.pf-card:hover .link-arrow-sm{color:var(--red)}
.pf-vacio{text-align:center;margin-top:20px}
.pf-vacio[hidden]{display:none}