/* =========================================================
   PÁGINA PORTAFOLIO
========================================================= */
.portfolio-hero {
  --portfolio-purple: #7200f5;
  --portfolio-purple-dark: #4e00c4;
  --portfolio-purple-light: #a239ff;
  --portfolio-navy: #06113f;
  position: relative;
  min-height: calc(88vh - var(--header-height));
  overflow: hidden;
  isolation: isolate;
  background: #faf7ff;
}

.portfolio-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.18) 100%),
    url('./assets/fondo-hero.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.portfolio-hero__container {
  position: relative;
  z-index: 2;
  width: min(100% - 80px, 1500px);
  min-height: calc(88vh - var(--header-height));
  margin-inline: auto;
  padding-block: clamp(80px, 8vw, 140px);
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.55fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}

.portfolio-hero__content { max-width: 850px; }
.portfolio-eyebrow,
.portfolio-label {
  margin: 0 0 20px;
  color: var(--portfolio-purple, #7200f5);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portfolio-hero h1 {
  margin: 0 0 28px;
  color: var(--portfolio-navy);
  font-size: clamp(3.2rem, 6vw, 6.6rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
}
.portfolio-hero h1 span { display:block; color:var(--portfolio-purple); }
.portfolio-hero__description {
  max-width: 760px;
  margin: 0;
  color: #24305d;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.75;
}
.portfolio-hero__actions { display:flex; flex-wrap:wrap; gap:18px; margin-top:42px; }
.portfolio-primary-button,
.portfolio-secondary-button {
  min-height: 62px;
  padding: 17px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 2px solid var(--portfolio-purple);
  border-radius: 18px;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform .25s ease, color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.portfolio-primary-button { color:#fff; background:linear-gradient(135deg,var(--portfolio-purple),var(--portfolio-purple-dark)); box-shadow:0 18px 36px rgba(114,0,245,.22); }
.portfolio-secondary-button { color:var(--portfolio-purple); background:rgba(255,255,255,.75); }
.portfolio-primary-button:hover,
.portfolio-secondary-button:hover { transform:translateY(-4px); }
.portfolio-secondary-button:hover { color:#fff; background:var(--portfolio-purple); }
.portfolio-hero__visual { display:flex; justify-content:center; align-items:center; }
.portfolio-hero__visual img { width:min(100%,480px); opacity:.18; filter:grayscale(1); }

.portfolio-gallery {
  --portfolio-purple:#7200f5;
  --portfolio-navy:#082d69;
  --portfolio-text:#28456f;
  padding-block: clamp(80px, 8vw, 130px);
  background: radial-gradient(circle at 90% 10%, rgba(114,0,245,.06), transparent 25%), #fff;
}
.portfolio-container { width:min(100% - 80px,1500px); margin-inline:auto; }
.portfolio-heading {
  margin-bottom: 42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);
  align-items:end;
  gap:50px;
}
.portfolio-heading h2 { max-width:760px; margin:0; color:var(--portfolio-navy); font-size:clamp(2.2rem,4vw,4rem); line-height:1.1; letter-spacing:-.04em; }
.portfolio-intro { margin:0; color:var(--portfolio-text); font-size:1.05rem; line-height:1.65; }
.portfolio-filters { margin-bottom:44px; display:flex; flex-wrap:wrap; gap:12px; }
.portfolio-filter {
  min-height:46px;
  padding:11px 20px;
  border:1px solid rgba(114,0,245,.18);
  border-radius:999px;
  color:#3b2168;
  background:#fff;
  font-weight:700;
  cursor:pointer;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.portfolio-filter:hover,
.portfolio-filter.active { color:#fff; background:var(--portfolio-purple); border-color:var(--portfolio-purple); transform:translateY(-2px); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.portfolio-card {
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(8,45,105,.09);
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 0 rgba(8,45,105,.05),0 18px 42px rgba(8,45,105,.08);
  transition:opacity .25s ease,transform .28s ease,box-shadow .28s ease;
}
.portfolio-card:hover { transform:translateY(-9px); box-shadow:0 5px 0 rgba(114,0,245,.07),0 26px 54px rgba(49,0,104,.14); }
.portfolio-card.is-hidden { display:none; }
.portfolio-card__image { position:relative; display:block; width:100%; aspect-ratio:1.55; overflow:hidden; background:#eceaf1; }
.portfolio-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease,filter .35s ease; }
.portfolio-card:hover .portfolio-card__image img { transform:scale(1.06); filter:brightness(.72); }
.portfolio-card__overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#fff;
  background:linear-gradient(135deg,rgba(59,0,135,.8),rgba(114,0,245,.48));
  font-weight:800; text-transform:uppercase;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;
}
.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card__image:focus-visible .portfolio-card__overlay { opacity:1; transform:translateY(0); }
.portfolio-card__content { padding:28px 28px 32px; }
.portfolio-card__meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.portfolio-card__meta span { padding:7px 11px; border-radius:999px; color:var(--portfolio-purple); background:rgba(114,0,245,.07); font-size:.76rem; font-weight:800; text-transform:uppercase; }
.portfolio-card h3 { margin:0 0 14px; color:var(--portfolio-navy); font-size:1.35rem; line-height:1.3; }
.portfolio-card p { margin:0; color:var(--portfolio-text); line-height:1.62; }

.portfolio-cta { padding-block:72px; color:#fff; background:radial-gradient(circle at 80% 20%, rgba(166,43,255,.26), transparent 27%), linear-gradient(135deg,#070023,#24004c 58%,#5b0093); }
.portfolio-cta__container { width:min(100% - 80px,1500px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:50px; }
.portfolio-cta h2 { max-width:830px; margin:0; font-size:clamp(2rem,3.5vw,3.8rem); line-height:1.12; }
.portfolio-cta__button { min-width:290px; min-height:62px; padding:16px 28px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid rgba(255,255,255,.45); border-radius:18px; color:#fff; background:rgba(255,255,255,.08); font-weight:800; text-transform:uppercase; backdrop-filter:blur(7px); transition:transform .25s ease, background-color .25s ease; }
.portfolio-cta__button:hover { transform:translateY(-4px); background:#7200f5; }

.portfolio-footer { color:#dcd8e7; background:#05031a; }
.portfolio-footer__container { width:min(100% - 80px,1500px); margin-inline:auto; padding-block:46px; display:grid; grid-template-columns:160px 1fr auto; align-items:center; gap:40px; }
.portfolio-footer__brand img { width:120px; filter:brightness(0) invert(1); opacity:.9; }
.portfolio-footer__container p { margin:0; }
.portfolio-footer__socials { display:flex; gap:14px; }
.portfolio-footer__socials a { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; transition:color .2s ease,background-color .2s ease,transform .2s ease; }
.portfolio-footer__socials a:hover { color:#fff; background:#7200f5; transform:translateY(-3px); }
.portfolio-footer__bottom { padding:18px 30px; border-top:1px solid rgba(255,255,255,.08); color:#aaa5b7; text-align:center; font-size:.86rem; }

@media (max-width:1100px) {
  .portfolio-hero__container,.portfolio-container,.portfolio-cta__container,.portfolio-footer__container { width:min(100% - 52px,1000px); }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-heading { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:800px) {
  .portfolio-hero__container { grid-template-columns:1fr; min-height:auto; }
  .portfolio-hero__visual { position:absolute; right:-80px; bottom:20px; z-index:-1; }
  .portfolio-hero__visual img { width:360px; opacity:.08; }
  .portfolio-cta__container { flex-direction:column; align-items:flex-start; }
  .portfolio-footer__container { grid-template-columns:1fr; text-align:center; justify-items:center; }
}
@media (max-width:640px) {
  .portfolio-hero__container,.portfolio-container,.portfolio-cta__container,.portfolio-footer__container { width:min(100% - 36px,560px); }
  .portfolio-hero__container { padding-block:70px; }
  .portfolio-hero h1 { font-size:clamp(2.7rem,13vw,4.2rem); }
  .portfolio-hero__actions { display:grid; grid-template-columns:1fr; }
  .portfolio-primary-button,.portfolio-secondary-button { width:100%; }
  .portfolio-filters { gap:9px; }
  .portfolio-filter { flex:1 1 calc(50% - 9px); }
  .portfolio-grid { grid-template-columns:1fr; gap:22px; }
  .portfolio-cta { padding-block:62px; }
  .portfolio-cta__button { width:100%; min-width:0; }
}
@media (max-width:420px) {
  .portfolio-hero__container,.portfolio-container,.portfolio-cta__container,.portfolio-footer__container { width:min(100% - 28px,390px); }
  .portfolio-filter { flex-basis:100%; }
}