/* ===== Citricus Portfolio — front ===== */
.citpf-proj,.citpf-portfolio{--teal:#15838E;--teal-2:#4ecdc4;--teal-soft:#e9f4f5;--blue:#1a5c7a;--dark:#0f1419;
  --green-d1:#0f3d33;--green-d2:#14584a;--green-light:#d8efe6;--green-light-ink:#1c6b52;
  --prem-1:#15838E;--prem-2:#0f3d33;--card:#fff;--ink:#152229;--muted:#5f7178;--line:#e2ecee;--maxw:1200px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
.citpf-proj *,.citpf-portfolio *{box-sizing:border-box}
.citpf-proj img{max-width:100%;height:auto;display:block}

/* single */
.citpf-proj{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.citpf-top{text-align:center;padding:20px 0 24px}
.citpf-lvl{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 15px;border-radius:20px;color:#fff}
.citpf-lvl.prem{background:linear-gradient(90deg,var(--prem-1),var(--prem-2));color:#eafff6}
.citpf-lvl.adv{background:linear-gradient(90deg,var(--green-d1),var(--green-d2));color:#eafff6}
.citpf-lvl.comp{background:linear-gradient(90deg,var(--teal),var(--blue));color:#fff}
.citpf-lvl.design{background:#ece4f5;color:#6b4a9e}
.citpf-lvl.lp{background:#dceef2;color:#1a5c7a}
.citpf-lvl.basic{background:var(--green-light);color:var(--green-light-ink)}
.citpf-proj h1{font-size:clamp(28px,4.4vw,44px);margin:14px 0 6px;font-weight:800;letter-spacing:-.5px;color:var(--dark)}
.citpf-flag{font-size:26px;line-height:1;margin:6px 0 4px}
.citpf-flag .fname{font-size:13px;color:var(--muted);font-weight:600;vertical-align:middle;margin-left:6px}
.citpf-place{color:var(--muted);font-size:clamp(14px,2.4vw,16px)}
.citpf-place b{color:var(--blue)}

.citpf-browser{max-width:1000px;width:100%;margin:20px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(21,131,142,.16);border:1px solid var(--line);background:#fff}
.citpf-bar{background:#eef3f4;padding:11px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.citpf-bar .d{width:10px;height:10px;border-radius:50%}
.citpf-bar .d.r{background:#ff5f57}.citpf-bar .d.y{background:#febc2e}.citpf-bar .d.g{background:#28c840}
.citpf-url{margin-left:12px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 12px;font-size:12px;color:#6a7d83;flex:1;min-width:0;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citpf-mock img{width:100%;display:block}
.citpf-mock.ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#eaf1f2,#eaf1f2 14px,#e2ecee 14px,#e2ecee 28px);color:#8ba3aa;font-weight:700}

.citpf-gallery{margin:22px auto 0;max-width:1000px}
.citpf-gallery h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);margin:0 0 12px;font-weight:800}
.citpf-grid-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.citpf-gi{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background-size:cover;background-position:center;transition:transform .15s}
.citpf-gi:hover{transform:translateY(-3px)}

.citpf-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);gap:28px;margin:40px 0 8px;align-items:start}
@media(max-width:820px){.citpf-cols{grid-template-columns:1fr;gap:20px}}
.citpf-c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;min-width:0}
@media(max-width:520px){.citpf-c{padding:22px}}
.citpf-c h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);margin:0 0 15px;font-weight:800}
.citpf-c h2:not(:first-child){margin-top:26px}
.citpf-lead{font-size:16px;color:#2f4048;margin:0;line-height:1.6}
.citpf-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.citpf-tag{background:var(--teal-soft);color:var(--teal);border:1px solid #cfe7e9;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;white-space:nowrap}
.citpf-ficha .citpf-frow{display:flex!important;justify-content:space-between!important;align-items:baseline;gap:16px;padding:11px 0!important;margin:0!important;border-bottom:1px dashed var(--line);font-size:14px;background:none!important;width:auto!important;float:none!important}
.citpf-ficha .citpf-frow:last-child{border-bottom:0}
.citpf-ficha .citpf-fk{color:var(--muted)!important;background:none!important;padding:0!important;flex:0 0 auto}
.citpf-ficha .citpf-fv{font-weight:700!important;text-align:right!important;color:var(--blue)!important;background:none!important;padding:0!important;flex:1 1 auto;min-width:0}
.citpf-ficha .citpf-fv.ag-cit{color:var(--teal)!important}
.citpf-ficha .citpf-fv.ag-zh{color:var(--green-light-ink)!important}
.citpf-servs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:360px){.citpf-servs{grid-template-columns:1fr}}
.citpf-serv{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:11px;font-size:13.5px;font-weight:600;background:#f1f8f8;border:1px solid #d9ebec;color:#12545c}
.citpf-serv .ic{width:19px;height:19px;border-radius:6px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.citpf-serv.off{background:#f6f6f6;border-color:#eee;color:#b7b7b7}
.citpf-serv.off .ic{background:#cfcfcf}
.citpf-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.citpf-stat{background:linear-gradient(160deg,var(--green-d1),#0c2a24);border-radius:13px;padding:16px 10px;text-align:center;color:#fff}
.citpf-proj.prem .citpf-stat{background:linear-gradient(160deg,var(--prem-1),var(--prem-2))}
.citpf-stat .n{font-size:clamp(20px,4.2vw,26px);font-weight:800;color:var(--teal-2);line-height:1.05}
.citpf-proj.prem .citpf-stat .n{color:var(--teal-2)}
.citpf-stat .l{font-size:11px;color:#b6d4cf;margin-top:6px;text-transform:uppercase}
.citpf-devrow{margin-top:16px;font-size:13px;color:var(--muted)}
.citpf-devrow b{color:var(--ink)}

.citpf-ctaband{background:linear-gradient(120deg,var(--dark),var(--green-d1));border-radius:24px;padding:40px;margin:40px 0 56px;color:#fff;display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center}
@media(max-width:640px){.citpf-ctaband{grid-template-columns:1fr;text-align:center;padding:32px 24px;gap:22px}}
.citpf-cta-photo img{width:160px;height:160px;border-radius:20px;object-fit:cover;display:block;box-shadow:0 12px 30px rgba(0,0,0,.35)}
@media(max-width:640px){.citpf-cta-photo{display:flex;justify-content:center}.citpf-cta-photo img{width:130px;height:130px}}
.citpf-ctaband .citpf-cta-title{font-size:clamp(22px,3.4vw,30px)!important;margin:0 0 10px!important;font-weight:800!important;color:#ffffff!important;line-height:1.15}
.citpf-ctaband .citpf-cta-text p{margin:0 0 22px!important;color:#cfe4e0!important;font-size:16px;max-width:560px}
.citpf-ctaband .citpf-cta-btn{display:inline-block;background:var(--teal-2);color:var(--dark)!important;font-weight:800!important;text-decoration:none;padding:15px 34px;border-radius:12px}
.citpf-ctaband .citpf-cta-sign{margin-top:16px;font-size:13px;color:#8fb9b3;font-weight:600}

/* lightbox */
.citpf-lightbox{position:fixed;inset:0;background:rgba(10,18,22,.92);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px}
.citpf-lightbox.on{display:flex}
.citpf-lightbox img{max-width:92%;max-height:88%;border-radius:12px}
.citpf-lightbox .close{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;cursor:pointer}

/* ===== listagem ===== */
.citpf-portfolio{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.citpf-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:20px 0 28px}
.citpf-fbtn{background:#fff;border:1px solid var(--line);border-radius:26px;padding:9px 18px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.citpf-fbtn:hover{border-color:var(--teal)}
.citpf-fbtn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.citpf-fbtn .cnt{font-size:12px;opacity:.7;font-weight:700}
.citpf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;padding-bottom:50px}
@media(max-width:560px){.citpf-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:380px){.citpf-grid{grid-template-columns:1fr}}
.citpf-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.citpf-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(21,131,142,.14)}
.citpf-thumb{aspect-ratio:16/10;background-size:cover;background-position:top center;background-color:#e8f0f1}
.citpf-thumb.ph{display:flex;align-items:center;justify-content:center;color:#a7bcc0;font-size:12px;font-weight:600;background:repeating-linear-gradient(45deg,#eef4f5,#eef4f5 12px,#e5eef0 12px,#e5eef0 24px)}
.citpf-cbody{padding:16px 18px;position:relative}
.citpf-cflag{font-size:22px;line-height:1;position:absolute;top:-16px;right:14px;background:#fff;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.citpf-cname{font-weight:800;font-size:16px;color:var(--dark);margin-bottom:2px;padding-right:30px}
.citpf-cmeta{color:var(--muted);font-size:13.5px;margin-bottom:12px}


/* Descrição com mais respiro */
.citpf-c .citpf-lead{font-size:16.5px;line-height:1.75}
.citpf-c .citpf-lead p{margin:0 0 14px}
.citpf-c .citpf-lead p:last-child{margin-bottom:0}

/* Navegação flutuante lateral (anterior/próximo) */
.citpf-nav-float{position:fixed;top:50%;transform:translateY(-50%);z-index:50}
.citpf-nav-float a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--teal);font-size:22px;text-decoration:none;box-shadow:0 6px 20px rgba(21,131,142,.16);transition:transform .15s,background .15s}
.citpf-nav-float a:hover{background:var(--teal);color:#fff;transform:scale(1.08)}
.citpf-nav-prev{left:18px}
.citpf-nav-next{right:18px}
@media(max-width:900px){.citpf-nav-float a{width:44px;height:44px;font-size:19px}.citpf-nav-prev{left:8px}.citpf-nav-next{right:8px}}

/* Reset defensivo contra estilos do tema (Avada) vazando no template */
.citpf-proj h1, .citpf-proj h2, .citpf-proj h3, .citpf-proj p, .citpf-proj span, .citpf-proj div{
  box-sizing:border-box;
}
.citpf-proj h2{background:none!important;padding:0!important;border:0!important}
.citpf-proj .citpf-c h2{font-size:12.5px!important;text-transform:uppercase!important;letter-spacing:.09em!important;color:var(--teal)!important;margin:0 0 15px!important;font-weight:800!important}
.citpf-proj .citpf-c h2:not(:first-child){margin-top:26px!important}
.citpf-proj .citpf-lead{color:#2f4048!important;background:none!important}
.citpf-ficha{background:none!important;padding:0!important;border:0!important}

/* ===== Hero + KPIs da listagem ===== */
.citpf-hero{text-align:center;padding:48px 24px 10px;max-width:720px;margin:0 auto}
.citpf-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);border:1px solid #cfe7e9;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.citpf-hero-title{font-size:clamp(32px,5vw,48px)!important;font-weight:800!important;letter-spacing:-1px;margin:0 0 14px!important;color:var(--dark)!important;line-height:1.08}
.citpf-hero-title em{font-style:normal;color:var(--teal)}
.citpf-hero-sub{color:var(--muted)!important;font-size:16px;margin:0 auto 8px!important;max-width:600px;line-height:1.6}
.citpf-kpis-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:640px;margin:30px auto 0}
@media(max-width:560px){.citpf-kpis-row{grid-template-columns:repeat(2,1fr)}}
.citpf-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 12px;text-align:center}
.citpf-kpi-n{font-size:30px;font-weight:800;color:var(--teal);line-height:1}
.citpf-kpi-l{font-size:11px;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:.05em;line-height:1.35}

/* CTA da listagem (largura total, centralizado) */
.citpf-cta-list{grid-template-columns:1fr!important;text-align:center;margin-top:50px}
.citpf-cta-list .citpf-cta-title{margin-bottom:10px!important}