/* ================================================================
   NEWBLACK TYPEFACE
   ================================================================ */
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-UltraLight.woff2') format('woff2');
    font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'NewBlack';
    src: url('Newblack/WOFF2/NewBlackTypeface-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* ================================================================
   VARIABLES & RESET
   ================================================================ */
:root {
    --bg:       #050505;
    --bg2:      #0c0c0c;
    --fg:       #ffffff;
    --fg-muted: #888888;
    --fg-dim:   #383838;
    --font-display: 'NewBlack', sans-serif;
    --font-h:   'NewBlack', 'Montserrat', sans-serif;
    --font-b:   'NewBlack', 'Inter', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-b);
    overflow-x: hidden;
    cursor: none;
}

::selection { background: var(--fg); color: var(--bg); }

/* ================================================================
   FILM GRAIN
   ================================================================ */
.grain {
    position: fixed;
    inset: -100%;
    width: 300%;
    height: 300%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain .4s steps(1) infinite;
}
@keyframes grain {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-2%,3%); }
    40%  { transform: translate(3%,-1%); }
    60%  { transform: translate(-1%,-3%); }
    80%  { transform: translate(2%,2%); }
    100% { transform: translate(0,0); }
}

/* ================================================================
   CUSTOM CURSOR
   ================================================================ */
.cursor-dot {
    position: fixed; width: 5px; height: 5px;
    background: #fff; border-radius: 50%;
    pointer-events: none; z-index: 10000;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s;
    will-change: left, top;
}
.cursor-ring {
    position: fixed; width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .3s, height .3s, border-color .3s, background .3s;
    will-change: left, top;
}
body.cur-hover .cursor-dot  { width: 8px; height: 8px; }
body.cur-hover .cursor-ring { width: 54px; height: 54px; border-color: rgba(255,255,255,.7); }
body.cur-click .cursor-ring { width: 26px; height: 26px; background: rgba(255,255,255,.08); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hero-vimeo-wrap {
    position: absolute; inset: 0;
    overflow: hidden; z-index: 0;
    pointer-events: none;
    filter: grayscale(1) contrast(1.1);
    opacity: 0.6;
}
.bg-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

.vid-mobile { display: none; }

.hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(5,5,5,.15) 0%,
        rgba(5,5,5,.05) 30%,
        rgba(5,5,5,.6)  80%,
        rgba(5,5,5,.92) 100%
    );
}

/* ── Bottom bar: title left + info right ── */
.hero-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 5% 4rem;
    gap: 4rem;
}

/* ── BRXNV title (left) ── */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(5rem, 17vw, 13.5rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -3px;
    text-transform: uppercase;
    display: flex;
    flex-shrink: 0;
    user-select: none;
}
/* individual letters */
.hl {
    display: inline-block;
    opacity: 0;
    transform: translateY(80px);
    animation: letter-up 1s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: calc(.05s + var(--i) * .09s);
    cursor: default;
}

@keyframes letter-up {
    to { opacity: 1; transform: translateY(0); }
}


/* ── Right column: subtitles + CTA ── */
.hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    padding-bottom: .3rem;
}

.hero-sub {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sub-line {
    font-size: clamp(.6rem, 1.2vw, .8rem);
    letter-spacing: 3px;
    font-weight: 300;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(20px);
    animation: sub-slide .65s ease forwards;
    animation-delay: calc(.7s + var(--i) * .1s);
    position: relative;
    overflow: hidden;
}
@keyframes sub-slide {
    to { opacity: 1; transform: translateX(0); }
}

p.sub-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
}
p.sub-line:hover::after {
    animation: shimmer-sweep 1.1s ease forwards;
}
@keyframes shimmer-sweep {
    to { transform: translateX(200%); }
}

/* ── Hero CTA group: sem corte no hover ── */
.hero-cta-group { overflow: visible; }

/* ── CTA button in hero ── */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 100px;
    color: var(--fg);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: lowercase;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
    /* inherits the sub-line animation */
}
.hero-cta:hover {
    background: #fff;
    color: var(--bg);
    border-color: transparent;
    box-shadow: 0 0 32px rgba(255,255,255,.2);
}
.hero-cta:hover svg path { stroke: var(--bg); }
.hero-cta svg { flex-shrink: 0; transition: stroke .3s; }

/* ── Hero CTA group (call + social buttons row) ── */
.hero-cta-group {
    display: flex; align-items: center; gap: .75rem;
}

/* ── Scroll cue ── */
.scroll-cue {
    position: absolute; bottom: 2.2rem; left: 50%;
    transform: translateX(-50%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    opacity: 0; animation: fade-in 1s ease 1.8s forwards;
}
.scroll-line {
    width: 1px; height: 46px;
    background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
    animation: pulse-line 2.2s ease-in-out infinite;
}
@keyframes pulse-line {
    0%,100% { opacity: .4; transform: scaleY(1); }
    50%      { opacity: 1;  transform: scaleY(.55); }
}
.scroll-cue span { font-size: .57rem; letter-spacing: 3px; color: rgba(255,255,255,.3); font-weight: 500; }
@keyframes fade-in { to { opacity: 1; } }

/* ================================================================
   BRANDS MARQUEE
   ================================================================ */
.brands-marquee {
    position: relative; padding: 2.25rem 0; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.brands-marquee::before, .brands-marquee::after {
    content: ''; position: absolute; top: 0; height: 100%; width: 180px; z-index: 2; pointer-events: none;
}
.brands-marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.brands-marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.marquee-track { display: flex; }
.marquee-inner {
    display: flex; align-items: center; gap: 3.5rem; flex-shrink: 0;
    animation: marquee 28s linear infinite;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-inner.is-reversed { animation-direction: reverse; }
@media (hover: hover) {
    .brands-marquee:hover .marquee-inner { animation-play-state: paused; }
    .brands-marquee:hover .marquee-inner.is-reversed { animation-play-state: running; }
}
/* brand logo PNG images */
.brand-logo-img {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.45;
    filter: grayscale(1);
    transition: opacity .35s, filter .35s;
    cursor: default;
    user-select: none;
}
/* wordmark da SulAmérica é mais larga que os outros logos — reduz 30% */
.brand-logo-img[alt="SulAmérica"] { height: 25px; }

.brands-marquee:hover .brand-logo-img      { opacity: 0.2; }
.brands-marquee:hover .brand-logo-img:hover {
    opacity: 0.85;
    filter: grayscale(0);
}

.sep { color: var(--fg-dim); font-size: .7rem; opacity: .2; flex-shrink: 0; }

/* ================================================================
   ABOUT & EXPERIENCE
   ================================================================ */
.about-exp {
    display: flex; gap: 2rem; padding: 8rem 5%;
    max-width: 1560px; margin: 0 auto;
}
.about-block, .exp-block { display: flex; flex: 1; min-width: 220px; }

.ai-block { display: flex; flex: 1; min-width: 0; }

.ai-tools-list {
    display: flex; flex-direction: column; gap: 1.8rem;
    justify-content: center; flex: 1;
}

.ai-tool-item {
    display: flex; align-items: center; gap: 1rem;
}

.ai-tool-icon {
    width: 36px; height: 36px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity .3s;
}

.ai-tool-item:hover .ai-tool-icon { opacity: 1; }

.ai-tool-name {
    font-family: var(--font-h); font-size: .65rem;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--fg-muted);
}

.ai-copy {
    font-size: .8rem; line-height: 1.75;
    color: var(--fg-muted);
    margin-bottom: 1.8rem;
}

.section-box {
    flex: 1;
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 3.5rem;
    background: linear-gradient(145deg, var(--bg2), var(--bg));
}
.section-box-head {
    display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem;
}
.section-box-head h2 {
    font-family: var(--font-h); font-size: 2.5rem; font-weight: 800; letter-spacing: -1px;
}

.about-copy { color: var(--fg-muted); line-height: 1.9; font-size: 1rem; font-weight: 300; }
.about-copy p { margin-bottom: 1.4rem; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--fg); font-weight: 600; }
.exp-list { display: flex; flex-direction: column; }
.exp-item {
    padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
    opacity: 0; transform: translateX(24px);
    transition: opacity .55s ease calc(var(--i)*.1s), transform .55s cubic-bezier(.16,1,.3,1) calc(var(--i)*.1s);
}
.exp-item.in-view { opacity: 1; transform: translateX(0); }
.exp-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .25rem; }
.exp-item strong { font-family: var(--font-h); font-size: .88rem; font-weight: 800; letter-spacing: 1px; }
.exp-role { font-size: .68rem; color: var(--fg-muted); letter-spacing: 1.2px; text-transform: uppercase; }
.exp-date { font-size: .72rem; color: var(--fg-dim); letter-spacing: .8px; margin-bottom: .55rem; }
.exp-bar { width: 100%; height: 1px; background: rgba(255,255,255,.07); overflow: hidden; }
.exp-fill { height: 100%; width: 0%; background: rgba(255,255,255,.35); transition: width 1.1s cubic-bezier(.16,1,.3,1) .4s; }
.exp-item.in-view .exp-fill { width: var(--pct, 0%); }

/* ================================================================
   HORIZONTAL RULE
   ================================================================ */
.h-rule {
    width: 100%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
}

/* ================================================================
   SOFTWARE ICONS — larger, with "Ferramentas" label
   ================================================================ */
.softwares { padding: 5rem 10%; }

.section-label {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.sw-grid {
    display: flex; justify-content: center; align-items: center;
    gap: 2.2rem; flex-wrap: wrap;
}

.sw-icon {
    position: relative;
    width: 96px; height: 96px;          /* bigger than before */
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; outline: none; overflow: visible;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1),
                border-color .25s, background .25s, box-shadow .25s;
}

/* tooltip */
.sw-icon::after {
    content: attr(data-name);
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(22,22,22,.92); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-family: var(--font-b); font-size: .62rem;
    letter-spacing: 1.8px; text-transform: uppercase;
    padding: .3rem .8rem; border-radius: 100px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s;
}
.sw-icon:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.sw-icon:hover { transform: translateY(-16px) scale(1.08); animation: none !important; }

/* idle float */
.sw-icon:nth-child(odd)  { animation: idle-bob 3.2s ease-in-out infinite; }
.sw-icon:nth-child(even) { animation: idle-bob 3.2s ease-in-out .9s infinite; }
@keyframes idle-bob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

.sw-label {
    font-family: var(--font-h); font-weight: 700; font-size: 1.6rem;
    position: relative; z-index: 1; pointer-events: none;
    transition: color .25s;
    color: var(--fg-muted);
}

.sw-glow {
    position: absolute; inset: -1px; border-radius: 22px;
    opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0;
}


/* ================================================================
   SETUP TAG (shared with softwares section label)
   ================================================================ */
.setup-tag {
    font-size: .62rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--fg-muted); border: 1px solid rgba(255,255,255,.1);
    padding: .25rem .8rem; border-radius: 100px;
}

/* ================================================================
   SETUP
   ================================================================ */
.setup {
    padding: 4rem 5%; max-width: 1560px; margin: 0 auto;
    display: flex; gap: 2rem; align-items: stretch;
}
.setup-box .ai-tools-list { justify-content: flex-start; }

.setup .ai-block .section-box { height: 100%; }


.setup-box {
    flex: 1; min-width: 0;
    position: relative; border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px; padding: 3.5rem;
    background: linear-gradient(145deg, var(--bg2), var(--bg));
}
.corner { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.corner::before, .corner::after { content: ''; position: absolute; background: rgba(255,255,255,.45); }
.corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.corner::after  { width: 1px; height: 100%; top: 0; left: 0; }
.corner.tl { top: 14px; left: 14px; }
.corner.tr { top: 14px; right: 14px; transform: rotate(90deg); }
.corner.bl { bottom: 14px; left: 14px; transform: rotate(-90deg); }
.corner.br { bottom: 14px; right: 14px; transform: rotate(180deg); }
.setup-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 3rem; }
.setup-head h2 { font-family: var(--font-h); font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; }
.setup-body { display: flex; gap: 4rem; }
.setup-specs { flex: 1; display: flex; flex-direction: column; gap: 2rem; }
.spec-item {
    opacity: 0; transform: translateX(-22px);
    transition: opacity .5s ease calc(var(--i)*.15s), transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i)*.15s);
}
.spec-item.in-view { opacity: 1; transform: translateX(0); }
.spec-item h3 { font-size: .65rem; color: rgba(255,255,255,.4); letter-spacing: 3px; margin-bottom: .45rem; font-weight: 600; }
.spec-item p  { color: var(--fg-muted); font-size: .85rem; line-height: 1.75; font-weight: 300; }
.setup-photo {
    flex: 1.5; border-radius: 12px; border: 1px solid rgba(255,255,255,.07);
    min-height: 270px; position: relative; overflow: hidden;
}
.setup-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    filter: grayscale(30%) contrast(1.05);
}
.scan-line {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, transparent 10%, rgba(255,255,255,.22) 50%, transparent 90%);
    animation: scan 3.5s ease-in-out infinite; pointer-events: none;
}
@keyframes scan {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ================================================================
   PORTFOLIO FOOTER
   ================================================================ */
.portfolio-footer {
    position: relative; height: 80vh;
    display: flex; align-items: flex-end; justify-content: flex-start;
    overflow: hidden; margin-top: 4rem;
}
.footer-vimeo-wrap {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
    pointer-events: none; filter: grayscale(1) opacity(.6) contrast(1.1);
}
.footer-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.52); pointer-events: none; }
.footer-body { position: relative; z-index: 2; text-align: left; padding: 0 8% 4rem; }
.footer-title {
    font-family: var(--font-display); font-size: clamp(4rem, 13vw, 11rem);
    font-weight: 400; letter-spacing: -4px; text-transform: uppercase;
    display: flex; justify-content: flex-start;
    transition: letter-spacing .5s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1);
}
.footer-title .hl { animation-play-state: paused; }
.footer-title.in-view .hl { animation-play-state: running; }
.footer-title:hover { letter-spacing: 8px; scale: 1.06; }
.footer-sub {
    font-size: .78rem; letter-spacing: 7px; color: rgba(255,255,255,.38);
    margin-top: 1.25rem; opacity: 0; transition: opacity .9s ease .35s;
    text-decoration: none; display: inline-block;
}
.footer-sub.in-view { opacity: 1; }
/* hero-cta usado como footer-sub: restaura estilos do botão */
.hero-cta.footer-sub {
    display: inline-flex;
    letter-spacing: 1.5px;
    color: var(--fg);
    font-size: .78rem;
    margin-top: 1.25rem;
}
.hero-cta.footer-sub:hover { color: var(--bg); }
.footer-sub--link {
    color: rgba(255,255,255,.55);
    transition: color .3s ease, opacity .9s ease .35s, letter-spacing .4s cubic-bezier(.16,1,.3,1);
}
.footer-sub--link:hover {
    color: #aaaaaa;
    letter-spacing: 10px;
}

/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer {
    padding: 4rem 8% 5rem;
    display: flex; flex-direction: column; align-items: center; gap: 2rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer-label {
    font-size: .7rem; letter-spacing: 6px; color: rgba(255,255,255,.35);
}
.site-footer-actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
}
.footer-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--fg); text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease,
                box-shadow .25s ease, transform .2s ease;
}
.footer-social-btn:hover {
    background: #fff; color: var(--bg); border-color: transparent;
    box-shadow: 0 0 32px rgba(255,255,255,.2); transform: translateY(-2px);
}
.site-footer-copy {
    font-size: .65rem; letter-spacing: 3px; color: rgba(255,255,255,.2);
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal-up    { opacity: 0; transform: translateY(36px);  transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal-left.in-view, .reveal-right.in-view, .reveal-up.in-view { opacity: 1; transform: translate(0); }

/* ================================================================
   SW-ICON TOUCH ACTIVE STATE
   ================================================================ */
.sw-icon.sw-active {
    animation: none !important;
}
.sw-icon.sw-active::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
    .setup { padding: 3rem 5%; gap: 1.5rem; }
    .setup-box { padding: 2.5rem; }
    .setup-body { gap: 2rem; }
}

@media (max-width: 900px) {
    body { cursor: auto; }
    .cursor-dot, .cursor-ring { display: none; }

    .scroll-cue { display: none; }

    .hero-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 6% 3.5rem;
        gap: 1.5rem;
    }
    .hero-title { font-size: clamp(4.5rem, 22vw, 8rem); letter-spacing: -2px; }
    .hero-right { align-items: flex-start; }
    .sub-line { font-size: .68rem; }
    .hero-cta { padding: .85rem 1.6rem; min-height: 44px; }

    .about-exp { flex-direction: column; gap: 2.5rem; padding: 4rem 5%; }
    .ai-block { width: 100%; }
    .ai-tools-list { flex-direction: column; gap: 1.3rem; align-items: flex-start; }
    .section-box { padding: 2rem; }
    .section-box-head h2 { font-size: 1.8rem; }

    .sw-icon { width: 78px; height: 78px; }
    .sw-label { font-size: 1.35rem; }
    .sw-grid { gap: 1.5rem; }

    .setup { flex-direction: column; }
    .setup .ai-block { width: 100%; }
    .setup .ai-block .section-box { padding: 2rem; }
    .setup-box { padding: 2rem; }
    .setup-body { flex-direction: column; }
}

@media (max-width: 600px) {
    .vid-desktop { display: none; }
    .vid-mobile  { display: block; }

    .hero-bar {
        padding: 0 5% max(2.5rem, env(safe-area-inset-bottom, 2rem));
        gap: 1rem;
    }
    .hero-title { font-size: clamp(3.6rem, 20vw, 6.5rem); letter-spacing: -1.5px; }
    .sub-line { font-size: .65rem; letter-spacing: 2px; }
    .hero-cta { padding: .9rem 1.4rem; font-size: .7rem; }

    .about-exp { padding: 3rem 5%; gap: 1.8rem; }
    .section-box { padding: 1.5rem; border-radius: 14px; }
    .section-box-head h2 { font-size: 1.4rem; }
    .about-copy { font-size: .88rem; line-height: 1.8; }

    .softwares { padding: 3rem 5%; }
    .sw-icon { width: 66px; height: 66px; border-radius: 16px; }
    .sw-label { font-size: 1.1rem; }
    .sw-grid { gap: .9rem; }

    .setup { padding: 2.5rem 5%; }
    .setup .ai-block .section-box { padding: 1.5rem; border-radius: 14px; }
    .setup-box { padding: 1.5rem; border-radius: 14px; }
    .setup-head h2 { font-size: 1.4rem; }
    .setup-photo { min-height: 200px; }
    .spec-item p { font-size: .8rem; }

    .portfolio-footer { height: 60vh; }
    .footer-vimeo-sizer {
        width: max(100vw, 33.2vh);
        height: max(180.6vw, 60vh);
    }

    .brands-marquee::before,
    .brands-marquee::after { width: 80px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: clamp(3.2rem, 18vw, 5.5rem); }
    .sw-icon { width: 58px; height: 58px; border-radius: 12px; }
    .sw-label { font-size: .95rem; }
    .sw-grid { gap: .65rem; }
}

/* ================================================================
   PORTFOLIO PAGE — NAV
   ================================================================ */
.port-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.6rem 5%;
    background: linear-gradient(to bottom, rgba(5,5,5,.72) 0%, transparent 100%);
    pointer-events: none;
}
.port-nav-back {
    pointer-events: all;
    font-family: var(--font-display);
    font-size: .72rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--fg-muted); text-decoration: none;
    transition: color .25s;
}
.port-nav-back:hover { color: var(--fg); }
.port-nav-label {
    font-size: .65rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--fg-dim);
}

/* ================================================================
   PORTFOLIO PAGE — HERO TITLE SIZE OVERRIDE (9 chars vs 5)
   ================================================================ */
.port-title {
    font-size: clamp(3rem, 11vw, 9.5rem);
    letter-spacing: -2px;
}
@media (max-width: 900px) { .port-title { font-size: clamp(2.8rem, 15vw, 7rem); } }
@media (max-width: 600px) { .port-title { font-size: clamp(2.2rem, 13vw, 5rem); letter-spacing: -1px; } }
@media (max-width: 480px) { .port-title { font-size: clamp(1.9rem, 11vw, 4rem); } }

/* ================================================================
   PORTFOLIO PAGE — WORKS SECTION
   ================================================================ */
.works-section {
    padding: 5rem 5% 8rem;
    background: var(--bg);
}

.works-grid {
    columns: 2;
    column-gap: 1.25rem;
}

.work-card {
    break-inside: avoid;
    margin-bottom: 1.25rem;
    cursor: none;
}

.work-img-wrap {
    overflow: hidden;
    display: block;
}

.work-card img {
    width: 100%; display: block;
    filter: grayscale(0.15);
    transition: transform .7s cubic-bezier(.16,1,.3,1), filter .7s;
}

.work-card:hover img {
    transform: scale(1.04);
    filter: grayscale(0);
}

.work-meta {
    padding: .6rem 0 .3rem;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .5rem;
}
.work-cliente {
    font-family: var(--font-display);
    font-size: clamp(.6rem, 1vw, .82rem);
    font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
    flex-shrink: 0;
}
.work-categoria {
    font-size: clamp(.5rem, .8vw, .63rem);
    letter-spacing: 2px; color: var(--fg-muted);
    text-transform: uppercase; text-align: right;
}

/* reveal transition override for cards (own observer in portfolio.js) */
.work-card.reveal-up {
    transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

@media (max-width: 900px) {
    .works-section { padding: 4rem 5% 6rem; }
    .works-grid { column-gap: 1rem; }
    .work-card { margin-bottom: 1rem; }
}
@media (max-width: 600px) {
    .works-grid { columns: 1; }
    .works-section { padding: 3rem 5% 5rem; }
    body.portfolio-page { cursor: auto; }
}