/* ==========================================================
   PORTFOLIO — Reiko v4 (magazine premium + split view)
   Reusa hero das páginas de serviço (servicos.css)
   ========================================================== */

/* === HERO (ajustes em cima de service-hero) === */
.portfolio-hero-page .service-hero { min-height: 56vh; padding: 90px 24px 70px; }
.portfolio-hero-page .service-hero-title { font-size: clamp(34px, 4.6vw, 54px); }
.portfolio-hero-page .service-hero-content { max-width: 580px; }

/* ============== HERO MOCKUP DASHBOARD PREMIUM ============== */
.portfolio-hero-mockup {
    position: relative;
}
.portfolio-mockup-frame {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(0,0,0,0.45),
        0 12px 28px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    isolation: isolate;
}
.portfolio-mockup-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(91,138,138,0.5), transparent 40%, transparent 60%, rgba(196,185,74,0.4));
    z-index: -1;
    opacity: 0.5;
}

/* Header browser-like */
.portfolio-mockup-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.30);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.portfolio-mockup-dot {
    width: 11px; height: 11px; border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.portfolio-mockup-dot--red { background: #ff5f57; }
.portfolio-mockup-dot--yellow { background: #ffbd2e; }
.portfolio-mockup-dot--green { background: #28c840; }
.portfolio-mockup-url {
    margin-left: 14px;
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.3px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
.portfolio-mockup-url span { color: rgba(255,255,255,0.78); }
.portfolio-mockup-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #4ade80;
    padding: 5px 10px;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.30);
    border-radius: 4px;
}
.portfolio-mockup-live span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: liveBlink 1.4s ease-in-out infinite;
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Body */
.portfolio-mockup-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Grid 2x2 de stats */
.portfolio-mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.portfolio-mockup-stat {
    position: relative;
    padding: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    animation: statFadeIn 0.7s cubic-bezier(0.4,0,0.2,1) backwards;
    animation-delay: var(--delay, 0s);
    overflow: hidden;
}
.portfolio-mockup-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(91,138,138,0.12));
    opacity: 0;
    transition: opacity 0.4s;
}
.portfolio-mockup-stat:hover {
    border-color: rgba(91,138,138,0.42);
    background: rgba(91,138,138,0.07);
    transform: translateY(-2px);
}
.portfolio-mockup-stat:hover::before { opacity: 1; }
@keyframes statFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-mockup-stat-icon {
    grid-row: 1 / 3;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(91,138,138,0.20), rgba(196,185,74,0.12));
    border: 1px solid rgba(91,138,138,0.28);
    border-radius: 10px;
    color: var(--reiko-blue);
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.portfolio-mockup-stat:nth-child(2) .portfolio-mockup-stat-icon { color: var(--reiko-gold); border-color: rgba(196,185,74,0.30); }
.portfolio-mockup-stat:nth-child(3) .portfolio-mockup-stat-icon { color: #f0b429; }
.portfolio-mockup-stat:nth-child(4) .portfolio-mockup-stat-icon { color: #60a5fa; }

.portfolio-mockup-stat-text {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.portfolio-mockup-stat-v {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--reiko-blue) 0%, var(--reiko-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portfolio-mockup-stat-v small {
    font-size: 0.55em;
    font-weight: 700;
    margin-left: 1px;
}
.portfolio-mockup-stat-l {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.60);
    letter-spacing: 0.2px;
    line-height: 1.3;
}
.portfolio-mockup-stat-trend {
    grid-row: 1;
    grid-column: 3;
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    background: rgba(34,197,94,0.12);
    padding: 3px 7px;
    border-radius: 4px;
}
.portfolio-mockup-stat-trend i { font-size: 8px; }
.portfolio-mockup-stat-since,
.portfolio-mockup-stat-rating,
.portfolio-mockup-stat-flags {
    grid-row: 1;
    grid-column: 3;
    align-self: start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    padding: 3px 7px;
    border-radius: 4px;
}
.portfolio-mockup-stat-rating {
    color: var(--reiko-gold);
    background: rgba(196,185,74,0.10);
    font-size: 9px;
    letter-spacing: 1px;
}
.portfolio-mockup-stat-flags { font-size: 11px; background: transparent; padding: 0; }

/* Mini chart */
.portfolio-mockup-chart {
    padding: 14px 16px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
}
.portfolio-mockup-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.portfolio-mockup-chart-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.3px;
}
.portfolio-mockup-chart-period {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.40);
    letter-spacing: 0.5px;
}
.portfolio-mockup-chart-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-items: end;
    height: 72px;
}
.portfolio-mockup-bar {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.40);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.portfolio-mockup-bar::before {
    content: '';
    width: 100%;
    height: var(--h, 30%);
    background: linear-gradient(180deg, rgba(91,138,138,0.6), rgba(91,138,138,0.25));
    border-radius: 4px 4px 2px 2px;
    transform-origin: bottom;
    transform: scaleY(0);
    animation: barGrow 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
    animation-delay: var(--d, 0s);
    border-top: 1px solid rgba(255,255,255,0.10);
}
.portfolio-mockup-bar--active::before {
    background: linear-gradient(180deg, var(--reiko-gold), rgba(196,185,74,0.45));
    box-shadow: 0 -2px 12px rgba(196,185,74,0.40);
}
.portfolio-mockup-bar--active { color: var(--reiko-gold); }
@keyframes barGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Floating badges */
.portfolio-mockup-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(10,20,32,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    box-shadow: 0 14px 32px rgba(0,0,0,0.40);
    z-index: 2;
    animation: badgeFloat 5s ease-in-out infinite;
}
.portfolio-mockup-badge i {
    width: 18px; height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 8px;
}
.portfolio-mockup-badge-1 {
    top: -16px;
    left: -22px;
    animation-delay: 0.3s;
}
.portfolio-mockup-badge-1 i {
    background: linear-gradient(135deg, var(--reiko-gold), #b89e2f);
    color: #18181b;
}
.portfolio-mockup-badge-2 {
    bottom: -16px;
    right: -22px;
    animation-delay: 1.2s;
}
.portfolio-mockup-badge-2 i {
    background: linear-gradient(135deg, var(--reiko-blue), #4a7a7a);
    color: var(--white);
}
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

/* === SHOWCASE === */
.portfolio-showcase {
    position: relative;
    padding: 70px 60px 100px;
    background: #f7f7f5;
    background-image: radial-gradient(circle at 50% 0%, rgba(91,138,138,0.05) 0%, transparent 50%);
    overflow: hidden;
}
.portfolio-showcase-container { max-width: 1400px; margin: 0 auto; }

/* Filtros pílula — horizontal centralizado, FORA do list-wrap */
.portfolio-showcase-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    margin: 0 auto 28px;
    width: fit-content;
    max-width: 100%;
}
.portfolio-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    font-size: 13px; font-weight: 600;
    color: var(--gray-600);
    background: transparent; border: none; border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap; font-family: inherit;
}
.portfolio-pill:hover { color: var(--gray-900); background: var(--gray-100); }
.portfolio-pill.is-active {
    background: var(--gray-900); color: var(--white);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.portfolio-pill-count {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px;
    background: var(--gray-200); color: var(--gray-700);
    border-radius: 20px;
    transition: all 0.3s;
}
.portfolio-pill.is-active .portfolio-pill-count { background: rgba(255,255,255,0.18); color: var(--white); }

/* === NOTA HOSPEDAGEM (clean, sutil) === */
.portfolio-hosting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
    padding: 12px 18px;
    background: linear-gradient(90deg, rgba(91,138,138,0.06) 0%, rgba(196,185,74,0.04) 100%);
    border: 1px solid rgba(91,138,138,0.16);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--gray-700);
}
.portfolio-hosting-shield {
    color: var(--reiko-blue);
    font-size: 14px;
    flex-shrink: 0;
}
.portfolio-hosting-msg {
    line-height: 1.4;
    flex: 1;
    min-width: 220px;
}
.portfolio-hosting-msg strong {
    color: var(--gray-900);
    font-weight: 700;
}
.portfolio-hosting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.portfolio-hosting-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(91,138,138,0.18);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
}
.portfolio-hosting-chip i {
    font-size: 10px;
    color: var(--reiko-blue);
}
@media (max-width: 720px) {
    .portfolio-hosting { padding: 10px 14px; gap: 10px; }
    .portfolio-hosting-msg { font-size: 12.5px; }
    .portfolio-hosting-chip { font-size: 11px; padding: 3px 8px; }
}

/* === SPLIT VIEW === */
.portfolio-split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
}

/* === LISTA LATERAL COMPACTA === */
.portfolio-list-wrap {
    position: sticky;
    top: 110px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.portfolio-list-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #fafafa, var(--white));
}
.portfolio-list-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--gray-900);
}
.portfolio-list-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: 20px;
    white-space: nowrap;
}
.portfolio-list {
    list-style: none;
    padding: 8px;
    margin: 0;
    max-height: calc(100vh - 220px);
    min-height: 540px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
.portfolio-list::-webkit-scrollbar { width: 5px; }
.portfolio-list::-webkit-scrollbar-track { background: transparent; }
.portfolio-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.portfolio-list::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

.portfolio-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr 14px;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    margin-bottom: 2px;
}
.portfolio-list-item:hover {
    background: var(--gray-100);
}
.portfolio-list-item.is-active {
    background: linear-gradient(135deg, rgba(91,138,138,0.10), rgba(196,185,74,0.06));
    box-shadow: inset 3px 0 0 0 var(--reiko-blue);
}
.portfolio-list-num {
    font-family: 'Inter', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: 0.5px;
    transition: color 0.25s;
}
.portfolio-list-item:hover .portfolio-list-num { color: var(--gray-700); }
.portfolio-list-item.is-active .portfolio-list-num {
    color: var(--reiko-blue);
}
.portfolio-list-content { min-width: 0; }
.portfolio-list-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    margin-bottom: 1px;
    line-height: 1.3;
}
/* Badge "Reiko host" — ESCUDO no mesmo lugar das antigas bolinhas (canto superior direito) */
.portfolio-list-hostbadge {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--reiko-blue) 0%, #4a7979 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(91,138,138,0.30);
    text-indent: 0;
    overflow: visible;
    transition: all 0.25s ease;
}
.portfolio-list-hostbadge svg {
    display: block;
    width: 10px;
    height: 10px;
}
.portfolio-list-item.is-active .portfolio-list-hostbadge,
.portfolio-list-item:hover .portfolio-list-hostbadge {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
    box-shadow: 0 3px 10px rgba(255,170,0,0.45);
    transform: scale(1.08);
}
.portfolio-list-item.is-active .portfolio-list-hostbadge {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    box-shadow: 0 2px 8px rgba(255, 170, 0, 0.45);
    color: #1a1a1a;
}
.portfolio-list-seg {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.portfolio-list-arrow {
    color: var(--gray-300);
    transition: all 0.25s;
    opacity: 0;
}
.portfolio-list-item:hover .portfolio-list-arrow { color: var(--reiko-blue); opacity: 1; transform: translateX(2px); }
.portfolio-list-item.is-active .portfolio-list-arrow { color: var(--reiko-blue); opacity: 1; }

.portfolio-list-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background: linear-gradient(180deg, transparent, var(--white));
    pointer-events: none;
}

/* === STAGE MAGAZINE === */
.portfolio-stage {
    position: relative;
}
.portfolio-stage-inner {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 22px;
    overflow: hidden;
    padding: 38px 44px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.08);
    transition: opacity 0.2s ease;
}
.portfolio-stage-inner.is-changing { opacity: 0.3; }

/* Editorial header */
.portfolio-stage-head {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
    align-items: start;
}
.portfolio-stage-head-text { min-width: 0; }
.portfolio-stage-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.portfolio-stage-cat {
    display: inline-flex;
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gray-900);
    background: linear-gradient(135deg, rgba(91,138,138,0.12), rgba(196,185,74,0.10));
    border: 1px solid rgba(91,138,138,0.20);
    border-radius: 4px;
}
.portfolio-stage-num {
    font-family: 'Inter', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.portfolio-stage-num span {
    color: var(--gray-900);
    font-weight: 700;
}
.portfolio-stage-name {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--gray-900);
    margin: 0 0 10px;
}
.portfolio-stage-segment {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--reiko-blue);
    margin: 0 0 18px;
}
.portfolio-stage-pitch {
    font-size: 17px;
    line-height: 1.55;
    color: var(--gray-700);
    font-weight: 400;
    max-width: 720px;
    margin: 0;
}

/* Thumbnail no canto superior direito do head */
.portfolio-stage-thumb {
    position: relative;
    display: block;
    width: 280px;
    height: 158px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1520, #1a2a3a);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.portfolio-stage-thumb:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0,0,0,0.16);
}
.portfolio-stage-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.portfolio-stage-thumb:hover img { transform: scale(1.06); }
.portfolio-stage-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,21,32,0.55);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.portfolio-stage-thumb:hover .portfolio-stage-thumb-overlay { opacity: 1; }

/* Narrative blocks */
.portfolio-stage-narrative {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--gray-200);
}
.portfolio-stage-block {
    position: relative;
}
.portfolio-stage-block-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--reiko-gold);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--reiko-gold);
}
.portfolio-stage-block-text {
    font-size: 15px;
    line-height: 1.72;
    color: var(--gray-700);
    margin: 0;
}

/* Métricas BIG */
.portfolio-stage-metrics-wrap {
    margin-bottom: 28px;
}
.portfolio-stage-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 16px;
}
.portfolio-stage-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}
.portfolio-stage-metric {
    padding: 22px 22px;
    background: linear-gradient(135deg, rgba(91,138,138,0.07), rgba(196,185,74,0.04));
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.3s ease;
}
.portfolio-stage-metric:hover {
    border-color: rgba(91,138,138,0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(91,138,138,0.10);
}
.portfolio-stage-metric .v {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--reiko-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portfolio-stage-metric .l {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
    line-height: 1.35;
    letter-spacing: 0.2px;
}

/* Stack chips */
.portfolio-stage-stack-wrap {
    margin-bottom: 28px;
}
.portfolio-stage-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.portfolio-stage-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 13px;
    color: var(--gray-800);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    letter-spacing: 0.2px;
    transition: all 0.25s;
}
.portfolio-stage-chip:hover {
    border-color: var(--reiko-blue);
    color: var(--reiko-blue);
    transform: translateY(-1px);
}

/* CTA elegante */
.portfolio-stage-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    background: var(--gray-900);
    color: var(--white);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}
.portfolio-stage-cta span:first-child {
    font-size: 14px;
    font-weight: 600;
}
.portfolio-stage-cta-domain {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 12px;
    margin-left: 4px;
}
.portfolio-stage-cta:hover {
    background: var(--reiko-blue);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(91,138,138,0.35);
}
.portfolio-stage-cta:hover .portfolio-stage-cta-domain { opacity: 0.85; }

.portfolio-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 15px;
    color: var(--gray-500);
    grid-column: 1 / -1;
}

/* === CTA FINAL — Light premium com efeitos === */
.portfolio-cta-final {
    position: relative;
    background:
        radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(91,138,138,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 800px 400px at 90% 100%, rgba(196,185,74,0.10) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f5f6f7 100%);
    color: var(--gray-900);
    padding: 130px 80px 140px;
    overflow: hidden;
    isolation: isolate;
}
/* Grid sutil de fundo */
.portfolio-cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(91,138,138,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,138,138,0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    opacity: 0.6;
}
/* Orbs animadas */
.portfolio-cta-final-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.portfolio-cta-final-bg::before,
.portfolio-cta-final-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    will-change: transform;
}
.portfolio-cta-final-bg::before {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(91,138,138,0.28) 0%, transparent 70%);
    top: -120px; left: -120px;
    animation: ctaFloat1 12s ease-in-out infinite;
}
.portfolio-cta-final-bg::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(196,185,74,0.22) 0%, transparent 70%);
    bottom: -160px; right: -140px;
    animation: ctaFloat2 14s ease-in-out infinite;
}
@keyframes ctaFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes ctaFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-50px, -30px) scale(1.08); }
}

.portfolio-cta-final-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Eyebrow com glow */
.portfolio-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--reiko-blue);
    margin-bottom: 28px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(91,138,138,0.28);
    border-radius: 50px;
    box-shadow:
        0 8px 24px rgba(91,138,138,0.18),
        inset 0 1px 0 rgba(255,255,255,0.8);
    position: relative;
    animation: ctaEyebrowPulse 3s ease-in-out infinite;
}
.portfolio-cta-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--reiko-gold);
    box-shadow: 0 0 0 3px rgba(196,185,74,0.20), 0 0 14px rgba(196,185,74,0.8);
    animation: ctaDot 1.6s ease-in-out infinite;
}
@keyframes ctaEyebrowPulse {
    0%,100% { box-shadow: 0 8px 24px rgba(91,138,138,0.18), inset 0 1px 0 rgba(255,255,255,0.8); }
    50% { box-shadow: 0 12px 32px rgba(91,138,138,0.26), inset 0 1px 0 rgba(255,255,255,0.8); }
}
@keyframes ctaDot {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
}

/* Título com gradient shimmer */
.portfolio-cta-title {
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
    color: var(--gray-900);
}
.portfolio-cta-title span {
    background: linear-gradient(
        110deg,
        var(--reiko-blue) 0%,
        var(--reiko-gold) 30%,
        var(--reiko-blue) 60%,
        var(--reiko-gold) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ctaShimmer 6s linear infinite;
    position: relative;
}
@keyframes ctaShimmer {
    0% { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

.portfolio-cta-desc {
    font-size: 18px;
    line-height: 1.65;
    color: var(--gray-600);
    margin-bottom: 44px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Botão premium com glow e animação */
.portfolio-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 44px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--white);
    background: linear-gradient(135deg, var(--reiko-blue) 0%, #4a7a7a 100%);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease;
    box-shadow:
        0 14px 38px rgba(91,138,138,0.40),
        0 4px 12px rgba(91,138,138,0.30),
        inset 0 1px 0 rgba(255,255,255,0.20);
    overflow: hidden;
    isolation: isolate;
}
/* Glow animado atrás do botão */
.portfolio-cta-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--reiko-blue), var(--reiko-gold), var(--reiko-blue));
    background-size: 200% 100%;
    z-index: -2;
    filter: blur(18px);
    opacity: 0.55;
    animation: ctaBtnGlow 4s linear infinite;
    transition: opacity 0.4s ease;
}
@keyframes ctaBtnGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Shimmer interno do botão */
.portfolio-cta-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,0.30) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    z-index: -1;
    transition: left 0.7s cubic-bezier(0.4,0,0.2,1);
}
.portfolio-cta-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 22px 52px rgba(91,138,138,0.55),
        0 6px 16px rgba(91,138,138,0.40),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.portfolio-cta-btn:hover::before { opacity: 0.9; }
.portfolio-cta-btn:hover::after { left: 130%; }
.portfolio-cta-btn svg { transition: transform 0.4s ease; }
.portfolio-cta-btn:hover svg { transform: translateX(4px); }

/* Detalhe decorativo: linha sutil sob o botão */
.portfolio-cta-final-container::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    margin: 50px auto 0;
    background: linear-gradient(90deg, transparent, var(--reiko-blue), var(--reiko-gold), transparent);
    opacity: 0.5;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* === Tablet landscape (1024-1200px) === */
@media (max-width: 1200px) {
    .portfolio-showcase { padding: 60px 40px 80px; }
    .portfolio-split { grid-template-columns: 290px 1fr; gap: 36px; }
    .portfolio-stage-inner { padding: 32px 36px 36px; }
    .portfolio-stage-narrative { gap: 28px; }
    .portfolio-stage-head { grid-template-columns: 1fr 220px; gap: 24px; }
    .portfolio-stage-thumb { width: 220px; height: 124px; }
    .portfolio-cta-final { padding: 80px 48px; }
}

/* === Tablet portrait (900-1024px) === */
@media (max-width: 1024px) {
    .portfolio-showcase { padding: 50px 32px 70px; }
    .portfolio-mockup-grid { gap: 10px; }
    .portfolio-mockup-stat { padding: 14px; grid-template-columns: 34px 1fr auto; }
    .portfolio-mockup-stat-icon { width: 34px; height: 34px; }
    .portfolio-mockup-stat-v { font-size: 26px; }
    .portfolio-mockup-chart-bars { height: 60px; }
}

/* === Hosting responsive === */
@media (max-width: 1024px) {
    .portfolio-hosting { padding: 10px 14px; margin-bottom: 16px; }
}

/* === Mobile largo / tablet pequeno (até 900px) — split vira 1 coluna === */
@media (max-width: 900px) {
    .portfolio-split { grid-template-columns: 1fr; gap: 24px; }
    .portfolio-list-wrap { position: static; }
    .portfolio-list { max-height: 380px; min-height: auto; }
    .portfolio-stage-narrative { grid-template-columns: 1fr; gap: 22px; padding-bottom: 24px; margin-bottom: 24px; }
    .portfolio-stage-head { grid-template-columns: 1fr 200px; gap: 22px; }
    .portfolio-stage-thumb { width: 200px; height: 112px; }
}

/* === Mobile (até 768px) — thumb full width, filtros scroll horizontal === */
@media (max-width: 768px) {
    /* Hero ajustes */
    .portfolio-hero-page .service-hero { min-height: auto; padding: 80px 20px 56px; }
    .portfolio-hero-page .service-hero-content { max-width: 100%; }
    .portfolio-hero-page .service-hero-title { font-size: clamp(28px, 7vw, 38px); margin-bottom: 16px; }
    .portfolio-hero-page .service-hero-desc { font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
    .portfolio-hero-page .service-hero-cta { gap: 10px; flex-wrap: wrap; }
    .portfolio-hero-page .service-hero-btn { padding: 13px 22px; font-size: 14px; }
    /* Mockup mobile */
    .portfolio-mockup-frame { border-radius: 14px; }
    .portfolio-mockup-header { padding: 10px 12px; }
    .portfolio-mockup-url { font-size: 10px; padding: 4px 9px; margin-left: 10px; }
    .portfolio-mockup-live { font-size: 9px; padding: 4px 8px; }
    .portfolio-mockup-body { padding: 14px; gap: 12px; }
    .portfolio-mockup-grid { gap: 8px; }
    .portfolio-mockup-stat { padding: 12px; grid-template-columns: 32px 1fr; column-gap: 10px; }
    .portfolio-mockup-stat-icon { width: 32px; height: 32px; font-size: 13px; }
    .portfolio-mockup-stat-v { font-size: 22px; }
    .portfolio-mockup-stat-l { font-size: 10px; }
    .portfolio-mockup-stat-trend, .portfolio-mockup-stat-since, .portfolio-mockup-stat-rating, .portfolio-mockup-stat-flags { display: none; }
    .portfolio-mockup-chart { padding: 12px; }
    .portfolio-mockup-chart-bars { height: 54px; gap: 5px; }
    .portfolio-mockup-bar { font-size: 8px; }
    .portfolio-mockup-badge { font-size: 10px; padding: 7px 11px; }
    .portfolio-mockup-badge-1 { top: -10px; left: -8px; }
    .portfolio-mockup-badge-2 { bottom: -10px; right: -8px; }

    /* Showcase wrapper */
    .portfolio-showcase { padding: 44px 14px 60px; }

    /* Hosting mobile */
    .portfolio-hosting { padding: 10px 12px; margin-bottom: 14px; border-radius: 10px; gap: 8px; }
    .portfolio-hosting-msg { font-size: 12px; min-width: 100%; }
    .portfolio-hosting-chip { font-size: 10.5px; padding: 3px 7px; }

    /* Filtros: scroll horizontal */
    .portfolio-showcase-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 5px;
        margin: 0 -14px 32px;
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
        background: var(--white);
        box-shadow: none;
        width: auto;
        max-width: none;
    }
    .portfolio-showcase-filters::-webkit-scrollbar { display: none; }
    .portfolio-pill {
        padding: 9px 14px;
        font-size: 12.5px;
        flex-shrink: 0;
        border-radius: 999px;
    }
    .portfolio-pill-count { font-size: 10.5px; padding: 1px 7px; }

    /* Lista */
    .portfolio-list-wrap { border-radius: 14px; }
    .portfolio-list-header { padding: 14px 16px; }
    .portfolio-list-label { font-size: 11px; }
    .portfolio-list-counter { font-size: 10.5px; padding: 3px 9px; }
    .portfolio-list {
        max-height: 320px;
        padding: 6px;
    }
    .portfolio-list-item {
        padding: 10px 12px;
        grid-template-columns: 22px 1fr 14px;
        gap: 10px;
    }
    .portfolio-list-name { font-size: 13px; }
    .portfolio-list-seg { font-size: 10.5px; }
    .portfolio-list-num { font-size: 9.5px; }

    /* Stage magazine — thumb VEM PRIMEIRO no mobile, antes do título */
    .portfolio-stage-inner {
        padding: 22px 18px 26px;
        border-radius: 14px;
    }
    .portfolio-stage-head {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .portfolio-stage-thumb {
        order: -1;
        width: 100%;
        height: 160px;
        border-radius: 10px;
    }
    .portfolio-stage-head-text { width: 100%; }
    .portfolio-stage-meta { margin-bottom: 14px; gap: 10px; }
    .portfolio-stage-cat { padding: 6px 11px; font-size: 9.5px; letter-spacing: 1.2px; }
    .portfolio-stage-num { font-size: 10px; }
    .portfolio-stage-name { font-size: 24px; margin-bottom: 8px; letter-spacing: -0.02em; }
    .portfolio-stage-segment { font-size: 11px; margin-bottom: 14px; letter-spacing: 0.4px; }
    .portfolio-stage-pitch { font-size: 15px; line-height: 1.55; }

    /* Blocks narrativa */
    .portfolio-stage-block-tag { font-size: 9.5px; margin-bottom: 10px; padding-bottom: 6px; }
    .portfolio-stage-block-text { font-size: 14px; line-height: 1.7; }

    /* Métricas em 2 col fixas */
    .portfolio-stage-metrics-wrap { margin-bottom: 22px; }
    .portfolio-stage-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .portfolio-stage-metric { padding: 16px 14px; border-radius: 10px; }
    .portfolio-stage-metric .v { font-size: 22px; }
    .portfolio-stage-metric .l { font-size: 10.5px; }

    /* Stack chips */
    .portfolio-stage-stack-wrap { margin-bottom: 22px; }
    .portfolio-stage-chip { font-size: 11px; padding: 6px 11px; }
    .portfolio-stage-section-label { font-size: 10px; margin-bottom: 12px; }

    /* CTA */
    .portfolio-stage-cta {
        padding: 14px 20px;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        justify-content: space-between;
        border-radius: 10px;
    }
    .portfolio-stage-cta span:first-child { font-size: 13.5px; }
    .portfolio-stage-cta-domain {
        font-size: 11px;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        opacity: 0.5;
        width: 100%;
        order: 3;
    }

    /* CTA final mobile */
    .portfolio-cta-final { padding: 80px 22px 90px; }
    .portfolio-cta-final::before { background-size: 40px 40px; }
    .portfolio-cta-title { font-size: clamp(28px, 8vw, 38px); margin-bottom: 18px; }
    .portfolio-cta-desc { font-size: 15px; margin-bottom: 32px; }
    .portfolio-cta-btn { padding: 18px 32px; font-size: 14.5px; }
    .portfolio-cta-eyebrow { font-size: 10px; letter-spacing: 2.5px; padding: 8px 16px; margin-bottom: 22px; }
    .portfolio-cta-final-container::after { margin-top: 36px; }
}

/* === Mobile pequeno (até 480px) === */
@media (max-width: 480px) {
    .portfolio-mockup-stat { padding: 10px; }
    .portfolio-mockup-stat-v { font-size: 19px; }
    .portfolio-mockup-stat-l { font-size: 9.5px; }
    .portfolio-mockup-chart-bars { height: 44px; }

    .portfolio-stage-inner { padding: 20px 16px 22px; }
    .portfolio-stage-thumb { height: 140px; }
    .portfolio-stage-name { font-size: 22px; }
    .portfolio-stage-pitch { font-size: 14px; }
    .portfolio-stage-metrics { grid-template-columns: 1fr 1fr; }
    .portfolio-stage-metric { padding: 14px 12px; }
    .portfolio-stage-metric .v { font-size: 20px; }

    .portfolio-list { max-height: 280px; }
    .portfolio-list-item { padding: 10px 10px; }
}

/* ==========================================================
   EXTRAS PREMIUM — Hospedagem + SEO (2 cards grandes)
   ========================================================== */
.portfolio-extras {
    position: relative;
    padding: 120px 24px 130px;
    background: linear-gradient(180deg, #0a0f14 0%, #0d1219 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.portfolio-extras-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(91,138,138,0.28) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(196,185,74,0.22) 0%, transparent 42%);
}
.portfolio-extras::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.portfolio-extras-container {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
}

/* Header da seção */
.portfolio-extras-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 64px;
}
.portfolio-extras-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: rgba(196,185,74,0.10);
    border: 1px solid rgba(196,185,74,0.30);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--reiko-gold, #c4b94a);
    margin-bottom: 22px;
}
.portfolio-extras-eyebrow i { font-size: 12px; }
.portfolio-extras-title {
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    color: #fff;
}
.portfolio-extras-title span {
    background: linear-gradient(135deg, var(--reiko-blue, #5b8a8a) 0%, var(--reiko-gold, #c4b94a) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portfolio-extras-desc {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* Grid de 2 cards */
.portfolio-extras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

/* Card base */
.portfolio-extra-card {
    position: relative;
    padding: 44px 40px 40px;
    background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.portfolio-extra-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91,138,138,0.45);
    box-shadow: 0 40px 90px -28px rgba(0,0,0,0.55);
}
.portfolio-extra-card--seo {
    background: linear-gradient(160deg, rgba(196,185,74,0.06) 0%, rgba(91,138,138,0.025) 100%);
}
.portfolio-extra-card--seo:hover {
    border-color: rgba(196,185,74,0.42);
}

/* Glow decorativo */
.portfolio-extra-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
    animation: extraFloat 9s ease-in-out infinite;
}
.portfolio-extra-glow--blue {
    background: radial-gradient(circle, var(--reiko-blue, #5b8a8a) 0%, transparent 70%);
    top: -160px;
    right: -100px;
}
.portfolio-extra-glow--gold {
    background: radial-gradient(circle, var(--reiko-gold, #c4b94a) 0%, transparent 70%);
    bottom: -160px;
    left: -100px;
    animation-delay: -4s;
}
@keyframes extraFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.06); }
}

/* Mesh diagonal sutil */
.portfolio-extra-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(225deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at top right, black 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 60%);
}

/* Garantir conteúdo acima dos decorativos */
.portfolio-extra-card > *:not(.portfolio-extra-glow):not(.portfolio-extra-mesh) {
    position: relative;
    z-index: 1;
}

/* Head com ícone + tag */
.portfolio-extra-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: -6px;
}
.portfolio-extra-iconwrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(91,138,138,0.22) 0%, rgba(196,185,74,0.12) 100%);
    border: 1px solid rgba(91,138,138,0.35);
    color: var(--reiko-gold, #c4b94a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.portfolio-extra-card--seo .portfolio-extra-iconwrap {
    color: var(--reiko-blue, #5b8a8a);
    background: linear-gradient(135deg, rgba(196,185,74,0.18) 0%, rgba(91,138,138,0.10) 100%);
    border-color: rgba(196,185,74,0.35);
}
.portfolio-extra-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    line-height: 1.3;
}

/* Título e descrição do card */
.portfolio-extra-title {
    font-size: clamp(24px, 2.5vw, 30px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}
.portfolio-extra-desc {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0;
}

/* Métricas — 3 colunas inline */
.portfolio-extra-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.portfolio-extra-metric {
    text-align: center;
    padding: 0 6px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.portfolio-extra-metric:last-child { border-right: none; }
.portfolio-extra-metric-v {
    display: block;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    color: var(--reiko-gold, #c4b94a);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 4px;
}
.portfolio-extra-card--seo .portfolio-extra-metric-v {
    background: linear-gradient(135deg, var(--reiko-blue, #5b8a8a) 0%, var(--reiko-gold, #c4b94a) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.portfolio-extra-metric-l {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Engines list (só no card SEO) */
.portfolio-extra-engines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.portfolio-extra-engines-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.portfolio-extra-engines-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.portfolio-extra-engine {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    transition: all 0.25s ease;
}
.portfolio-extra-engine:hover {
    background: rgba(196,185,74,0.12);
    border-color: rgba(196,185,74,0.35);
    color: #fff;
}
.portfolio-extra-engine i {
    font-size: 12px;
    color: var(--reiko-gold, #c4b94a);
}

/* Bullets com checkmark */
.portfolio-extra-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.portfolio-extra-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
.portfolio-extra-bullets li i {
    color: var(--reiko-blue, #5b8a8a);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}
.portfolio-extra-card--seo .portfolio-extra-bullets li i {
    color: var(--reiko-gold, #c4b94a);
}

/* CTA do card */
.portfolio-extra-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: linear-gradient(135deg, var(--reiko-blue, #5b8a8a) 0%, #4a7979 100%);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px -6px rgba(91,138,138,0.5);
}
.portfolio-extra-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(91,138,138,0.7);
    background: linear-gradient(135deg, #6b9a9a 0%, #5b8a8a 100%);
}
.portfolio-extra-cta svg { transition: transform 0.3s ease; }
.portfolio-extra-cta:hover svg { transform: translateX(3px); }
.portfolio-extra-card--seo .portfolio-extra-cta {
    background: linear-gradient(135deg, var(--reiko-gold, #c4b94a) 0%, #b3a93f 100%);
    color: #1a1a1a;
    box-shadow: 0 6px 20px -6px rgba(196,185,74,0.6);
}
.portfolio-extra-card--seo .portfolio-extra-cta:hover {
    background: linear-gradient(135deg, #d4c95a 0%, #c4b94a 100%);
    box-shadow: 0 12px 32px -8px rgba(196,185,74,0.8);
}

/* ==========================================================
   EXTRAS — Responsive
   ========================================================== */
@media (max-width: 1024px) {
    .portfolio-extras { padding: 90px 24px 100px; }
    .portfolio-extras-grid { gap: 22px; }
    .portfolio-extra-card { padding: 36px 30px 32px; }
}
@media (max-width: 900px) {
    .portfolio-extras-grid { grid-template-columns: 1fr; gap: 24px; }
    .portfolio-extras-header { margin-bottom: 44px; }
}
@media (max-width: 600px) {
    .portfolio-extras { padding: 70px 18px 80px; }
    .portfolio-extra-card { padding: 30px 24px 28px; gap: 18px; }
    .portfolio-extra-iconwrap { width: 48px; height: 48px; font-size: 19px; }
    .portfolio-extra-metric { padding: 0 4px; }
    .portfolio-extra-metric-l { font-size: 9.5px; }
    .portfolio-extras-eyebrow { font-size: 10.5px; letter-spacing: 1.4px; padding: 7px 14px; }
    .portfolio-extras-desc { font-size: 15px; }
}