.portfolio-page{background:#f7fbff;color:#071b36}.portfolio-header{position:sticky}.portfolio-header .hero-nav a.active{color:#fff}.portfolio-hero{background:radial-gradient(circle at 65% 30%,rgba(17,108,211,.34),transparent 34%),linear-gradient(115deg,#061a31 0%,#082c54 62%,#0b5cad 100%);color:#fff;overflow:hidden}.portfolio-hero-grid{min-height:460px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.portfolio-kicker{display:block;color:#39bfff;font-size:11px;font-weight:700;letter-spacing:.14em;margin-bottom:12px}.portfolio-hero h1{font-size:54px;line-height:1.04;letter-spacing:-.045em;margin:0 0 18px;max-width:620px}.portfolio-hero p{font-size:15px;line-height:1.7;color:#d9e9f6;max-width:620px}.portfolio-proof{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-size:11px;color:#e8f4ff}.portfolio-devices{position:relative;height:350px}.device-laptop{position:absolute;left:0;right:30px;top:28px;height:265px;background:#0c1a29;border:9px solid #162638;border-radius:18px 18px 7px 7px;box-shadow:0 35px 70px rgba(0,0,0,.32);overflow:hidden;transform:perspective(1000px) rotateY(-6deg)}.device-laptop:after{content:"";position:absolute;left:-30px;right:-30px;bottom:-17px;height:16px;border-radius:0 0 30px 30px;background:#7d92a6}.device-laptop img,.device-phone img{width:100%;height:100%;object-fit:cover}.device-phone{position:absolute;right:0;bottom:15px;width:110px;height:220px;border:8px solid #142233;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 24px 55px rgba(0,0,0,.3)}.portfolio-library{padding:38px 0 70px;background:#fff}.portfolio-filter-wrap{display:flex;flex-direction:column;gap:18px}.sector-filters{display:flex;gap:8px;flex-wrap:wrap}.sector-filter{border:1px solid #d9e7f4;background:#f2f7fb;color:#45627e;border-radius:8px;padding:9px 15px;font-family:inherit;font-size:11px;cursor:pointer}.sector-filter:hover,.sector-filter.active{background:#087ff0;color:#fff;border-color:#087ff0}.portfolio-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:10px}.portfolio-search{width:min(420px,100%);height:44px;display:flex;align-items:center;gap:10px;border:1px solid #d6e4f1;border-radius:9px;padding:0 14px;background:#fff}.portfolio-search input{border:0;outline:0;width:100%;font:inherit;font-size:11px}.portfolio-sort{display:flex;align-items:center;gap:8px;color:#536b84;font-size:11px}.portfolio-sort select{height:40px;border:1px solid #d6e4f1;border-radius:8px;padding:0 12px;background:#fff;font:inherit;font-size:11px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}.project-card{display:flex;flex-direction:column;border:1px solid #dce8f3;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(9,55,95,.06);transition:.3s}.project-card:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(9,55,95,.13)}.project-card[hidden]{display:none}.project-image{height:210px;display:block;position:relative;overflow:hidden;background:#eaf3fb}.project-image img{width:100%;height:100%;object-fit:cover;transition:.5s}.project-card:hover .project-image img{transform:scale(1.04)}.project-sector,.project-type{position:absolute;top:12px;border-radius:7px;padding:6px 9px;color:#fff;font-size:9px;font-weight:600}.project-sector{left:12px;background:#078cf4}.project-type{right:12px;background:#0c2440}.project-type.concept{background:#8247d6}.project-type.development{background:#e48c16}.project-type.real{background:#148957}.project-card-body{padding:17px;display:flex;flex-direction:column;flex:1}.project-card h2{font-size:18px;line-height:1.25;margin:0 0 8px}.project-card p{font-size:11px;line-height:1.6;color:#60758b;margin:0 0 14px}.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.project-tags span{font-size:9px;color:#42627f;background:#eef6fd;border-radius:6px;padding:5px 7px}.project-actions{display:flex;gap:8px;margin-top:auto}.portfolio-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:8px 12px;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid #087ff0}.portfolio-btn.ghost{background:#fff;color:#0872d2}.portfolio-btn.primary{background:#087ff0;color:#fff}.project-actions .primary{flex:1}.portfolio-empty{text-align:center;padding:50px;color:#687f96}.portfolio-stats{padding:35px 0;background:#eef7ff}.portfolio-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.portfolio-stats-grid div{text-align:center}.portfolio-stats strong{display:block;font-size:26px;color:#082348}.portfolio-stats span{font-size:11px;color:#637a91}.capabilities-section{padding:70px 0;background:#fff}.section-heading{max-width:720px;margin-bottom:30px}.section-heading h2{font-size:32px;line-height:1.15;margin:0 0 10px}.section-heading p{font-size:12px;line-height:1.7;color:#62798f}.capabilities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.capability{border:1px solid #dae8f5;border-radius:12px;padding:19px;background:linear-gradient(145deg,#fff,#f7fbff)}.capability>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#e7f4ff;color:#087ff0;margin-bottom:12px}.capability h3{font-size:14px;margin:0 0 6px}.capability p{font-size:11px;line-height:1.55;color:#687e94;margin:0}.portfolio-cta{padding:24px 0 64px;background:#fff}.portfolio-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 34px;border-radius:16px;color:#fff;background:linear-gradient(110deg,#0651bd,#0c95ff 72%,#1bbcff)}.portfolio-cta h2{font-size:27px;margin:0 0 5px}.portfolio-cta p{font-size:11px;margin:0;color:#eaf6ff}.portfolio-cta .btn{background:#fff;color:#0872d2;box-shadow:none}.portfolio-footer{background:#06182b;color:#d8e5ef;padding:25px 0}.portfolio-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.portfolio-footer nav{display:flex;gap:22px;font-size:11px}.portfolio-footer small{font-size:10px}.project-not-found{padding:120px 0}.project-detail-hero{padding:48px 0 65px;background:linear-gradient(180deg,#f4f9fe,#fff)}.project-breadcrumb{display:flex;gap:8px;font-size:10px;color:#6a8198;margin-bottom:28px}.project-breadcrumb a{color:#087ff0}.project-detail-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:center}.project-badges{display:flex;gap:8px;margin-bottom:15px}.project-badges span{font-size:9px;border-radius:7px;padding:6px 9px;background:#e9f5ff;color:#0872d2;font-weight:600}.project-badges .type.concept{background:#f1e9ff;color:#7540bf}.project-badges .type.development{background:#fff1da;color:#b86c06}.project-badges .type.real{background:#e5f7ee;color:#148957}.project-detail-copy h1{font-size:45px;line-height:1.05;margin:0 0 15px;letter-spacing:-.04em}.project-detail-copy>p{font-size:13px;line-height:1.75;color:#5d748b}.project-detail-actions{display:flex;gap:12px;margin-top:22px}.showcase-toolbar{display:flex;gap:7px;margin-bottom:10px}.view-toggle{border:1px solid #d4e2ef;background:#fff;padding:7px 12px;border-radius:7px;font:inherit;font-size:10px;cursor:pointer}.view-toggle.active{background:#087ff0;color:#fff;border-color:#087ff0}.showcase-frame{height:410px;padding:18px;background:#0e1f31;border-radius:18px;box-shadow:0 28px 60px rgba(5,34,65,.18);transition:.3s}.showcase-frame.mobile{width:245px;height:470px;margin-left:auto;margin-right:auto;border-radius:30px}.showcase-frame img{width:100%;height:100%;object-fit:cover;border-radius:8px;background:#fff}.project-story{padding:25px 0 65px}.project-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.story-card{border:1px solid #dbe8f3;border-radius:13px;padding:23px;background:#fff}.story-card>span{color:#088bf2}.story-card h2{font-size:18px;margin:8px 0}.story-card p{font-size:11px;line-height:1.7;color:#647b92}.project-features{padding:55px 0;background:#f2f8fd}.project-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project-feature{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dce9f4;border-radius:10px;padding:14px;font-size:11px}.project-feature span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#087ff0;color:#fff}.project-gallery{padding:60px 0;background:#fff}.project-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-gallery img{width:100%;height:230px;object-fit:cover;border-radius:12px}.portfolio-page .modal{z-index:240}.portfolio-page .whatsapp-float{z-index:230}
@media(max-width:1050px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}.portfolio-hero-grid{grid-template-columns:1fr}.portfolio-devices{display:none}.capabilities-grid{grid-template-columns:repeat(2,1fr)}.project-detail-grid{grid-template-columns:1fr}.portfolio-stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.portfolio-hero-grid{min-height:auto;padding:60px 0}.portfolio-hero h1{font-size:39px}.portfolio-tools{align-items:stretch;flex-direction:column}.portfolio-search{width:100%}.portfolio-grid{grid-template-columns:1fr}.portfolio-stats-grid,.capabilities-grid,.project-story-grid,.project-feature-grid,.project-gallery-grid{grid-template-columns:1fr}.portfolio-cta-inner,.portfolio-footer-inner{align-items:flex-start;flex-direction:column}.project-detail-copy h1{font-size:36px}.showcase-frame{height:280px}.project-actions{flex-direction:column}}


/* ============================================================
   V38 — Hero Websites com imagem HQ
   ============================================================ */

.portfolio-hero-grid{
  grid-template-columns:1fr 1.08fr;
  gap:54px;
}

.portfolio-hero-art{
  position:relative;
  width:100%;
  min-width:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.13);
  background:#08284b;
}

.portfolio-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.portfolio-hero-art img{
  display:block;
  width:100%;
  height:350px;
  object-fit:cover;
  object-position:center;
}

@media(max-width:1050px){
  .portfolio-hero-grid{
    grid-template-columns:1fr;
  }

  .portfolio-hero-art{
    max-width:820px;
  }

  .portfolio-hero-art img{
    height:auto;
    aspect-ratio:16/9;
  }
}

@media(max-width:700px){
  .portfolio-hero-art{
    margin-top:8px;
    border-radius:14px;
  }
}


/* ============================================================
   V39 — MELHORIAS MOBILE DO PORTEFÓLIO
   ============================================================ */
@media(max-width:760px){
  .portfolio-hero{
    padding:34px 0 30px !important;
  }

  .portfolio-hero-grid{
    gap:24px !important;
    min-height:auto !important;
  }

  .portfolio-hero h1{
    font-size:34px !important;
    line-height:1.08 !important;
    margin-bottom:14px !important;
  }

  .portfolio-hero p{
    font-size:14px !important;
    line-height:1.7 !important;
  }

  .portfolio-proof{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:18px !important;
    font-size:12px !important;
  }

  .portfolio-hero-art{
    border-radius:16px !important;
  }

  .portfolio-hero-art img{
    aspect-ratio:16 / 10 !important;
    object-position:center !important;
  }

  .portfolio-library{
    padding:28px 0 42px !important;
  }

  .portfolio-filter-wrap{
    gap:14px !important;
  }

  .sector-filters{
    flex-wrap:nowrap !important;
    overflow:auto;
    padding-bottom:4px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }

  .sector-filters::-webkit-scrollbar{
    display:none;
  }

  .sector-filter{
    flex:0 0 auto;
    font-size:12px !important;
    padding:10px 14px !important;
  }

  .portfolio-tools{
    gap:12px !important;
  }

  .portfolio-search,
  .portfolio-sort select{
    min-height:44px;
  }

  .portfolio-search input,
  .portfolio-sort,
  .portfolio-sort select{
    font-size:12px !important;
  }

  .project-card{
    border-radius:15px !important;
  }

  .project-image{
    height:200px !important;
  }

  .project-card-body{
    padding:15px !important;
  }

  .project-card h2{
    font-size:18px !important;
  }

  .project-card p{
    font-size:12px !important;
    line-height:1.65 !important;
  }

  .project-tags span,
  .project-sector,
  .project-type{
    font-size:10px !important;
  }

  .project-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .portfolio-btn{
    width:100%;
    min-height:42px !important;
    font-size:12px !important;
  }

  .portfolio-stats{
    padding:28px 0 !important;
  }

  .portfolio-stats strong{
    font-size:22px !important;
  }

  .section-heading h2,
  .project-detail-copy h1{
    font-size:30px !important;
    line-height:1.1 !important;
  }

  .section-heading p,
  .project-detail-copy > p,
  .story-card p,
  .capability p,
  .project-feature{
    font-size:12px !important;
    line-height:1.7 !important;
  }

  .capability,
  .story-card{
    padding:18px !important;
    border-radius:14px !important;
  }

  .project-detail-actions,
  .portfolio-cta-inner{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .project-detail-actions .btn,
  .project-detail-actions .portfolio-btn,
  .portfolio-cta .btn{
    width:100%;
    justify-content:center;
  }

  .showcase-toolbar{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .view-toggle{
    min-height:40px;
    font-size:12px !important;
  }

  .showcase-frame{
    height:240px !important;
    padding:12px !important;
    border-radius:16px !important;
  }

  .showcase-frame.mobile{
    width:200px !important;
    height:395px !important;
  }

  .project-gallery img{
    height:200px !important;
  }

  .portfolio-cta{
    padding:18px 0 44px !important;
  }

  .portfolio-cta-inner{
    padding:22px 20px !important;
    border-radius:15px !important;
  }

  .portfolio-cta h2{
    font-size:24px !important;
  }

  .portfolio-cta p,
  .portfolio-footer nav,
  .portfolio-footer small{
    font-size:11px !important;
  }
}

@media(max-width:420px){
  .portfolio-hero h1,
  .project-detail-copy h1,
  .section-heading h2{
    font-size:28px !important;
  }

  .project-image{
    height:180px !important;
  }
}