/* DIFUSOR V119 · PORTAFOLIO RECONSTRUIDO
   - Reel fijo de fondo como la Home
   - Sin contenedor blanco grande ni panel translúcido de fondo
   - Solo proyectos reproducibles en tarjetas visuales
   - Filtros funcionales
   - Player 16:9 del mismo tamaño en todos los videos */

:root{
  --blue:#0d5678;
  --blue-2:#2d7597;
  --cyan:#8fd1ec;
  --ink:#081822;
  --nav-h:82px;
  --max:1440px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  background:#030b10;
}
body.portfolio-page{
  margin:0;
  min-height:100vh;
  font-family:Inter,Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fff;
  background:#030b10;
  line-height:1.5;
}
body.portfolio-page img{display:block;max-width:100%}
body.portfolio-page a{color:inherit;text-decoration:none}
body.portfolio-page button{font:inherit}
body.portfolio-page .wrap{
  width:min(var(--max),calc(100% - 72px));
  margin-inline:auto;
}

/* Reel fijo */
.portfolio-reel-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#030b10;
}
.portfolio-reel-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.88) contrast(1.04) brightness(.78);
  transform:scale(1.015);
}
.portfolio-reel-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,8,12,.52) 0%,rgba(2,8,12,.28) 24%,rgba(2,8,12,.38) 68%,rgba(2,8,12,.72) 100%),
    radial-gradient(circle at 50% 35%,rgba(13,86,120,.10),rgba(2,8,12,.28) 68%);
}

/* Nav */
body.portfolio-page .nav{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--nav-h);
  background:rgba(4,15,21,.70);
  border-bottom:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
  backdrop-filter:blur(16px) saturate(112%);
}
body.portfolio-page .navin{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:22px;
}
body.portfolio-page .brand-box{
  display:flex;
  align-items:center;
}
body.portfolio-page .brand-box .logo-main{width:126px;height:auto}
body.portfolio-page .navlinks{
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center;
}
body.portfolio-page .navlinks a{
  color:rgba(244,250,252,.74);
  font-size:12px;
  font-weight:700;
}
body.portfolio-page .navlinks a:hover,
body.portfolio-page .navlinks .current{color:#fff}
body.portfolio-page .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:800;
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
body.portfolio-page .cta:hover{transform:translateY(-2px)}
body.portfolio-page .cta-light{background:#f4fbfd;color:#08202b}
body.portfolio-page .cta-line{border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.06);color:#fff}

/* Stage principal */
.portfolio-stage{
  position:relative;
  z-index:2;
  min-height:calc(100svh - var(--nav-h));
  padding:44px 0 72px;
}
.portfolio-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px 34px;
  align-items:end;
  margin-bottom:22px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.portfolio-title-row{display:flex;align-items:end;gap:18px;min-width:0}
.portfolio-title-row>div:first-child{min-width:0}
.kicker{
  margin-bottom:5px;
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a6dff3;
}
#portfolioTitle{
  margin:0;
  font-size:clamp(30px,3.2vw,48px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.34);
}
.portfolio-count{
  padding-bottom:3px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(245,250,252,.66);
  white-space:nowrap;
}

/* filtros sin contenedor de fondo */
.filters{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.filter{
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:#0a2634;
  color:rgba(245,250,252,.82);
  font-size:10.5px;
  font-weight:780;
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.filter:hover{
  transform:translateY(-1px);
  background:#103c51;
  border-color:rgba(143,209,236,.42);
  color:#fff;
}
.filter.active{
  background:#0d5678;
  border-color:#62b4d6;
  color:#fff;
  box-shadow:0 7px 22px rgba(0,0,0,.18);
}
.filter:focus-visible{
  outline:3px solid rgba(143,209,236,.28);
  outline-offset:2px;
}

/* tarjetas: solo imagen/video + overlay, sin bloque blanco inferior */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.portfolio-card{
  position:relative;
  aspect-ratio:16/9;
  min-width:0;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.16);
  background:#07151d;
  box-shadow:0 14px 38px rgba(0,0,0,.24);
  cursor:pointer;
  transition:transform .30s ease,border-color .30s ease,box-shadow .30s ease;
}
.portfolio-card[hidden],
.portfolio-card.is-hidden{display:none!important}
.portfolio-card:hover,
.portfolio-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(143,209,236,.46);
  box-shadow:0 22px 48px rgba(0,0,0,.30),0 0 20px rgba(75,176,217,.10);
  outline:none;
}
.portfolio-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.portfolio-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.94) contrast(1.02) brightness(.90);
  transition:transform .85s cubic-bezier(.22,.61,.36,1),filter .45s ease;
}
.portfolio-card:hover .portfolio-media img,
.portfolio-card:focus-visible .portfolio-media img{
  transform:scale(1.055);
  filter:saturate(1.01) contrast(1.03) brightness(.98);
}
.portfolio-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(2,8,12,.04) 20%,rgba(2,8,12,.18) 55%,rgba(2,8,12,.88) 100%);
}
.portfolio-card-copy{
  position:absolute;
  z-index:3;
  inset:auto 0 0 0;
  padding:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.portfolio-card-text{min-width:0}
.portfolio-badge{
  display:inline-flex;
  margin-bottom:7px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(4,16,23,.66);
  color:rgba(245,251,253,.80);
  font-size:8px;
  font-weight:850;
  letter-spacing:.10em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.portfolio-card h3{
  margin:0;
  max-width:92%;
  color:#fff;
  font-size:clamp(18px,1.7vw,25px);
  line-height:1.04;
  letter-spacing:-.03em;
  text-shadow:0 3px 16px rgba(0,0,0,.50);
}
.portfolio-play{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(4,16,23,.70);
  color:#fff;
  font-size:13px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:transform .25s ease,background .25s ease;
}
.portfolio-card:hover .portfolio-play{transform:scale(1.06);background:#0d5678}
.portfolio-empty{
  grid-column:1/-1;
  padding:48px 20px;
  text-align:center;
  color:rgba(245,250,252,.72);
}

/* CTA final corporativo */
.portfolio-cta-section{
  position:relative;
  z-index:2;
  padding:0 0 66px;
}
.portfolio-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  padding:36px 38px;
  border-radius:22px;
  border:1px solid rgba(147,214,241,.30);
  background:linear-gradient(135deg,#0d5678 0%,#123f55 58%,#0a2634 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.26);
}
.portfolio-cta .kicker{color:#b7e7f8}
.portfolio-cta h2{
  margin:0 0 9px;
  color:#fff;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-.04em;
}
.portfolio-cta p{
  max-width:720px;
  margin:0;
  color:rgba(241,249,252,.80);
  font-size:12px;
  line-height:1.55;
}
.portfolio-cta-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Reproductor: desde V126 lo controla exclusivamente player-v126.css */

/* Footer sobre reel */
body.portfolio-page .footer{
  position:relative;
  z-index:2;
  padding:28px 0;
  background:#061219;
  color:#aabec8;
}
.footerin{display:flex;justify-content:space-between;gap:20px;align-items:center}
.small{font-size:12px;color:#7f96a1}

@media(max-width:1000px){
  body.portfolio-page .wrap{width:min(760px,calc(100% - 36px))}
  body.portfolio-page .navlinks{display:none}
  .portfolio-bar{grid-template-columns:1fr;align-items:start}
  .filters{justify-content:flex-start}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-cta{grid-template-columns:1fr}
  .portfolio-cta-actions{justify-content:flex-start}
}
@media(max-width:650px){
  :root{--nav-h:70px}
  body.portfolio-page .wrap{width:calc(100% - 24px)}
  body.portfolio-page .nav{height:var(--nav-h)}
  body.portfolio-page .navin{height:var(--nav-h)}
  body.portfolio-page .brand-box .logo-main{width:105px}
  body.portfolio-page .navin>.cta{min-height:38px;padding:0 13px;font-size:9px}
  .portfolio-stage{padding:30px 0 48px}
  .portfolio-title-row{display:block}
  .portfolio-count{margin-top:7px}
  #portfolioTitle{font-size:34px}
  .filters{gap:6px}
  .filter{min-height:35px;padding:0 11px;font-size:9.5px}
  .portfolio-grid{grid-template-columns:1fr;gap:12px}
  .portfolio-card{border-radius:15px}
  .portfolio-card-copy{padding:15px}
  .portfolio-card h3{font-size:21px}
  .portfolio-cta{padding:28px 20px;border-radius:18px}
  .portfolio-cta-actions{display:grid;grid-template-columns:1fr}
  .portfolio-cta-actions .cta{width:100%}
  .footerin{display:grid}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .portfolio-reel-bg video{transform:none}
}