/* ============================================================
   SANTANA FILMS — DESIGN TOKENS
   ============================================================ */
:root{
  --bg-primary:#0a0a0a;
  --bg-secondary:#111113;
  --bg-elevated:#161618;
  --text-primary:#f5f5f0;
  --text-secondary:#8c8c8c;
  --text-muted:#5a5a5a;
  --accent:#ff0000;
  --border-subtle:rgba(245,245,240,0.08);
  --border-strong:rgba(245,245,240,0.18);

  --font-display:'Anton', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'Space Mono', monospace;
  --font-script:'Caveat', cursive;

  --container:1280px;
  --section-pad:min(13vw,128px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
ul{list-style:none;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.section-inner{max-width:var(--container); margin:0 auto; padding:0 32px;}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.2em;
  color:var(--accent); margin-bottom:20px; text-transform:uppercase;
}
.eyebrow-dash{width:24px; height:2px; background:var(--accent); display:inline-block;}
.eyebrow-script{
  font-family:var(--font-script); font-size:22px; color:var(--text-secondary);
  letter-spacing:0.01em; text-transform:none;
}

.section-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(32px,5vw,56px); line-height:1.05; letter-spacing:0.01em; margin-bottom:24px;
}

/* ============================================================
   FILM GRAIN OVERLAY
   ============================================================ */
.grain-overlay{
  position:fixed; inset:0; z-index:250; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.5s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0);}50%{transform:translate(-2%,1%);}100%{transform:translate(1%,-1%);}}
@media (max-width:768px){
  .grain-overlay{animation:none; mix-blend-mode:normal; opacity:0.025;}
}

/* ============================================================
   VIEWFINDER CORNERS + DIAGONAL LINE (elementos de assinatura)
   ============================================================ */
.viewfinder-frame{position:absolute; inset:24px; pointer-events:none; z-index:2;}
.viewfinder-frame.small{position:absolute; inset:0; pointer-events:none;}
.corner{position:absolute; width:26px; height:26px; border-color:var(--border-strong); border-style:solid; border-width:0;}
.corner.tl{top:0; left:0; border-top-width:2px; border-left-width:2px;}
.corner.tr{top:0; right:0; border-top-width:2px; border-right-width:2px;}
.corner.bl{bottom:0; left:0; border-bottom-width:2px; border-left-width:2px;}
.corner.br{bottom:0; right:0; border-bottom-width:2px; border-right-width:2px;}

.diagonal-line{
  position:absolute; top:14%; left:-5%; width:70%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,0,0,0.5) 40%, rgba(255,0,0,0.15) 100%);
  transform:rotate(-3.2deg); pointer-events:none; z-index:1;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:300;
  padding:22px 40px;
  display:flex; align-items:center; justify-content:space-between;
  mix-blend-mode:normal;
}
.logo-mark{flex-shrink:0;}
.logo-img{height:26px; width:auto;}

.coord-block{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--text-secondary);
}
.coord-block .rec-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,0,0,0.5);}50%{opacity:0.4; box-shadow:0 0 0 4px rgba(255,0,0,0);}}

.menu-btn{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  z-index:210; position:relative;
}
.menu-btn .menu-lines{display:flex; flex-direction:column; gap:4px; width:20px;}
.menu-btn .menu-lines span{height:1.5px; background:var(--text-primary); transition:all 0.3s var(--ease);}
.menu-btn.open .menu-lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-btn.open .menu-lines span:nth-child(2){opacity:0;}
.menu-btn.open .menu-lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ============================================================
   FULLSCREEN MENU OVERLAY
   ============================================================ */
.menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--bg-primary);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 40px;
  opacity:0; visibility:hidden; transform:translateY(-16px);
  transition:opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}
.menu-overlay.open{opacity:1; visibility:visible; transform:translateY(0);}
.menu-overlay::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.04; mix-blend-mode:overlay;
}
.menu-close-btn{
  position:absolute; top:22px; right:40px; z-index:220;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:var(--text-primary);
  transition:all 0.25s var(--ease);
}
.menu-close-btn:hover{border-color:var(--accent); background:var(--accent);}
@media (max-width:560px){.menu-close-btn{top:16px; right:20px;}}
.menu-list{display:flex; flex-direction:column; gap:6px; max-width:var(--container); margin:0 auto; width:100%;}
.menu-list li{border-top:1px solid var(--border-subtle); overflow:hidden;}
.menu-list li:last-child{border-bottom:1px solid var(--border-subtle);}
.menu-list a{
  display:flex; align-items:baseline; gap:20px; padding:20px 4px;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,6vw,64px); letter-spacing:0.01em; color:var(--text-secondary);
  transition:color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.menu-list a:hover, .menu-list a:focus-visible{color:var(--text-primary); padding-left:18px;}
.menu-list .menu-index{
  font-family:var(--font-mono); font-size:14px; color:var(--accent); flex-shrink:0;
}
.menu-list .menu-tag{
  font-family:var(--font-script); font-size:18px; color:var(--text-muted); margin-left:auto;
  display:none;
}
@media (min-width:640px){.menu-list .menu-tag{display:inline;}}

.menu-footer{
  max-width:var(--container); margin:48px auto 0; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
}
.menu-footer a{transition:color 0.25s var(--ease);}
.menu-footer a:hover{color:var(--accent);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:140px 40px 90px; overflow:hidden;
}
.hero-video-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:#000;}
.hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 0.6s var(--ease); opacity:0.6;}
.hero-video-bg iframe{
  position:absolute; top:50%; left:50%; width:177.77svh; height:100svh; min-width:100%; min-height:100%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.hero-video-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.7) 60%, rgba(10,10,10,0.92) 100%);}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at 25% 15%, rgba(255,0,0,0.07), transparent 55%);
  pointer-events:none;
}
.hero-label{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:26px; z-index:1;
}
.hero-label .tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.15em; color:var(--text-secondary); text-transform:uppercase;
}
.hero-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,7.4vw,96px); line-height:1.01; letter-spacing:0; max-width:1200px; z-index:1;
}
.hero-title .accent{color:var(--accent);}
.hero-script{
  font-family:var(--font-script); font-size:clamp(22px,2.6vw,32px); color:var(--text-secondary);
  margin-top:14px; z-index:1;
}
.hero-sub{margin-top:26px; max-width:520px; font-size:16px; color:var(--text-secondary); font-weight:300; z-index:1;}
.hero-actions{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; z-index:1;}

.btn-primary{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:15px 30px; border-radius:2px;
  transition:all 0.25s var(--ease); display:inline-block;
}
.btn-primary:hover{background:#d10000; transform:translateY(-2px);}
.btn-ghost{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--border-strong); padding:15px 30px; border-radius:2px;
  transition:all 0.25s var(--ease); display:inline-block;
}
.btn-ghost:hover{border-color:var(--text-primary);}

.scroll-cue{
  position:absolute; bottom:36px; left:40px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--text-muted);
}
.scroll-line{width:1px; height:40px; background:linear-gradient(var(--border-strong), transparent); animation:scrolldown 2s ease-in-out infinite;}
@keyframes scrolldown{0%{opacity:0;}40%{opacity:1;}100%{opacity:0; transform:translateY(10px);}}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle); position:relative;}
.manifesto-title{font-family:var(--font-display); font-size:clamp(28px,4.2vw,44px); text-transform:uppercase; margin-bottom:32px;}
.manifesto-body{max-width:680px; display:flex; flex-direction:column; gap:18px;}
.manifesto-body p{font-size:18px; color:var(--text-secondary); font-weight:300;}
.manifesto-body p.lead{font-size:22px; color:var(--text-primary); font-weight:500; font-family:var(--font-body);}
.manifesto-body p.highlight{font-size:26px; color:var(--text-primary); font-weight:600;}
.manifesto-body p.script-line{font-family:var(--font-script); font-size:28px; color:var(--accent); font-weight:400;}

/* ============================================================
   SERVIÇOS — lista numerada de peso crescente
   ============================================================ */
.services{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.services-list{display:flex; flex-direction:column; margin-top:32px;}
.service-row{
  display:grid; grid-template-columns:60px 1fr; gap:24px; align-items:start;
  padding:26px 0; border-top:1px solid var(--border-subtle);
  transition:padding-left 0.3s var(--ease);
}
.services-list .service-row:last-child{border-bottom:1px solid var(--border-subtle);}
.service-row:hover{padding-left:12px;}
.service-index{font-family:var(--font-mono); font-size:13px; color:var(--accent); padding-top:10px;}
.service-main h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,40px); letter-spacing:0.005em; margin-bottom:10px;
}
.service-main p{color:var(--text-secondary); font-size:15px; font-weight:300; max-width:640px; margin-bottom:12px;}
.service-tags{display:flex; flex-wrap:wrap; gap:8px 18px;}
.service-tags span{font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; color:var(--text-muted); text-transform:uppercase;}
.service-tags span::before{content:'— '; color:var(--accent);}

/* ============================================================
   COMO FAZEMOS — processo (sequência real: uso de números é válido aqui)
   ============================================================ */
.process{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.process-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); margin-top:12px;}
.process-step{background:var(--bg-primary); padding:32px 22px; min-height:220px; display:flex; flex-direction:column;}
.process-num{font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-bottom:18px;}
.process-step h4{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:17px; margin-bottom:10px;}
.process-step p{color:var(--text-secondary); font-size:13px; font-weight:300; line-height:1.55;}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.portfolio-header{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:44px;}
.portfolio-filters{display:flex; gap:10px; flex-wrap:wrap;}
.filter-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-secondary); border:1px solid var(--border-subtle); padding:10px 18px; border-radius:2px;
  transition:all 0.25s var(--ease);
}
.filter-btn:hover{color:var(--text-primary); border-color:var(--border-strong);}
.filter-btn.active{background:var(--text-primary); color:var(--bg-primary); border-color:var(--text-primary);}
.link-all{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
}
.link-all:hover{text-decoration:underline;}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.portfolio-grid.preview{grid-template-columns:repeat(4,1fr);}
.portfolio-card{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--bg-elevated); cursor:pointer; border:1px solid var(--border-subtle);}
.portfolio-card .video-hover{position:absolute; inset:0; opacity:0; transition:opacity 0.3s var(--ease); background:#000;}
.portfolio-card img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease);}
.portfolio-card:hover img{transform:scale(1.06);}
.portfolio-card .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.94) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
}
.portfolio-card .cat-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.portfolio-card h3{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:18px; line-height:1.15; margin-bottom:4px;}
.portfolio-card .client{font-size:12px; color:var(--text-secondary);}
.portfolio-card .play-icon{
  position:absolute; top:16px; right:16px; width:34px; height:34px;
  border:1px solid rgba(245,245,240,0.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.25s var(--ease);
}
.portfolio-card:hover .play-icon{opacity:1;}
.portfolio-card .play-icon svg{width:11px; height:11px; fill:#fff; margin-left:2px;}
.portfolio-empty{grid-column:1/-1; padding:60px 0; text-align:center; color:var(--text-muted); font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em;}

/* Modal */
.pf-modal{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.92); display:none; align-items:center; justify-content:center; padding:24px;}
.pf-modal.open{display:flex;}
.pf-modal-inner{width:100%; max-width:960px; position:relative;}
.pf-modal-video{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.pf-modal-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.pf-modal-photos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; max-height:80vh; overflow-y:auto;}
.pf-modal-photos img{width:100%; height:100%; object-fit:cover;}
.pf-modal-close{position:absolute; top:-56px; right:0; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px;}
.pf-modal-meta{margin-top:16px; font-family:var(--font-mono); font-size:13px; color:var(--text-secondary);}

/* Hero pequeno pra página interna (projetos.html) */
.page-hero{padding:150px 40px 60px; position:relative;}
.page-hero-title{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(34px,6vw,72px); line-height:1.02;}
.page-hero p{margin-top:20px; max-width:560px; color:var(--text-secondary); font-size:16px; font-weight:300;}

/* ============================================================
   SOBRE / PARA QUEM
   ============================================================ */
.about{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.about-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
.about-text p{color:var(--text-secondary); font-size:16px; font-weight:300; margin-bottom:18px;}
.about-text em{color:var(--text-primary); font-style:normal; font-weight:500;}
.about-visual{position:relative; height:460px; background:var(--bg-secondary); background-image:radial-gradient(circle at 50% 50%, rgba(255,0,0,0.08), transparent 60%); overflow:hidden;}
.about-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.9; display:block;}

.audience{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.audience-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); margin-top:12px;}
.audience-card{background:var(--bg-primary); padding:30px 24px; min-height:150px; display:flex; align-items:flex-end;}
.audience-card p{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:16px; line-height:1.25;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.contact-sub{color:var(--text-secondary); font-size:16px; max-width:480px; margin-bottom:56px; font-weight:300;}
.contact-grid{display:grid; grid-template-columns:1.4fr 0.8fr; gap:64px;}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-row{display:flex; flex-direction:column; gap:8px;}
.form-row.full{grid-column:1/-1;}
.form-row label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);}
.form-row input, .form-row select, .form-row textarea{
  background:transparent; border:none; border-bottom:1px solid var(--border-subtle); padding:10px 0;
  color:var(--text-primary); font-family:var(--font-body); font-size:15px; transition:border-color 0.25s var(--ease);
}
.form-row select{background:var(--bg-primary);}
.form-row select option{background:var(--bg-primary);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-bottom-color:var(--accent);}
.form-row textarea{resize:vertical;}
#submit-btn{grid-column:1/-1; justify-self:start; margin-top:8px; border:none;}
.form-status{grid-column:1/-1; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); min-height:16px;}
.form-status.success{color:#4ade80;}
.form-status.error{color:var(--accent);}
.contact-info{display:flex; flex-direction:column; gap:32px; border-left:1px solid var(--border-subtle); padding-left:40px;}
.info-block{display:flex; flex-direction:column; gap:6px;}
.info-label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);}
.info-block a{font-size:16px; transition:color 0.25s var(--ease);}
.info-block a:hover{color:var(--accent);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--border-subtle); padding:80px 0 32px;}
.footer-inner{max-width:var(--container); margin:0 auto; padding:0 32px;}
.footer-quote{margin-bottom:64px;}
.footer-quote p{font-family:var(--font-display); text-transform:uppercase; font-size:clamp(24px,4vw,40px); color:var(--text-secondary); line-height:1.15;}
.footer-quote p.strong{color:var(--text-primary);}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-top:32px; border-top:1px solid var(--border-subtle);}
.footer-logo{font-family:var(--font-display); font-size:15px; letter-spacing:0.05em;}
.footer-logo .dot{color:var(--accent);}
.footer-social{display:flex; gap:24px; flex-wrap:wrap;}
.footer-social a{font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); letter-spacing:0.03em; transition:color 0.25s var(--ease);}
.footer-social a:hover{color:var(--accent);}
.footer-copy{font-family:var(--font-mono); font-size:11px; color:var(--text-muted);}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:90; width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(255,0,0,0.35); transition:transform 0.25s var(--ease);
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:26px; height:26px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .coord-block{display:none;}
  .services-list .service-row{grid-template-columns:36px 1fr;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid, .portfolio-grid.preview{grid-template-columns:repeat(2,1fr);}
  .about-inner{grid-template-columns:1fr; gap:40px;}
  .manifesto-media{display:none;}
  .audience-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .contact-info{border-left:none; border-top:1px solid var(--border-subtle); padding-left:0; padding-top:32px;}
  .contact-form{grid-template-columns:1fr;}
  .scroll-cue{left:24px;}
  .site-header{padding:18px 20px;}
  .hero{padding:120px 20px 60px;}
}
@media (max-width:560px){
  .portfolio-grid, .portfolio-grid.preview{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .audience-grid{grid-template-columns:1fr;}
  .section-inner{padding:0 20px;}
  .hero{padding:110px 20px 50px;}
  .viewfinder-frame{inset:12px;}
  .menu-list a{font-size:34px; gap:12px;}
  .menu-overlay{padding:0 20px;}
}

/* ============================================================
   CAMERA DOODLE (elemento gráfico desenhado)
   ============================================================ */
.doodle{position:absolute; opacity:0.9; pointer-events:none; stroke:var(--text-secondary); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.doodle.accent{stroke:var(--accent);}

/* ============================================================
   MARQUEE — faixa de texto rolando
   ============================================================ */
.marquee-section{border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); overflow:hidden; padding:22px 0; background:var(--bg-secondary);}
.marquee-track{display:flex; width:max-content; animation:marquee 26s linear infinite;}
.marquee-track span{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,4.2vw,48px); color:transparent; -webkit-text-stroke:1px var(--text-secondary);
  white-space:nowrap; padding:0 28px; display:inline-flex; align-items:center; gap:28px;
}
.marquee-track span.solid{color:var(--accent); -webkit-text-stroke:0;}
.marquee-track span::after{content:'—'; margin-left:28px; color:var(--border-strong);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

/* ============================================================
   PHOTO STRIP — linha de fotos de bastidores
   ============================================================ */
.photo-strip{overflow:hidden; padding:0; border-top:1px solid var(--border-subtle);}
.strip-track{display:flex; width:max-content; gap:4px; animation:strip-scroll 40s linear infinite;}
.strip-track img{width:220px; height:280px; object-fit:cover; filter:grayscale(0.6) contrast(1.05);
  transition:filter 0.4s var(--ease); flex-shrink:0;}
.strip-track img:hover{filter:grayscale(0) contrast(1.1) saturate(1.2);}
@keyframes strip-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.strip-track{animation:none;}}

/* ============================================================
   IMPACT STATEMENT — frase isolada, sem mais nada
   ============================================================ */
.impact{
  min-height:70svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:100px 24px; position:relative; overflow:hidden;
}
.impact::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(255,0,0,0.06), transparent 60%); pointer-events:none;}
.impact p{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,6.5vw,84px); line-height:1.08; max-width:1100px; position:relative; z-index:1;
}
.impact p .accent{color:var(--accent);}
.impact .rec-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; margin-bottom:28px; animation:pulse 1.6s ease-in-out infinite;}

/* ============================================================
   VIDEO BANNER — vídeo full-bleed com frase por cima
   ============================================================ */
.video-banner{position:relative; min-height:74svh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000;}
.video-banner video, .video-banner .video-fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55;}
.video-banner::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.5), rgba(10,10,10,0.75)); z-index:1;}
.video-banner-content{position:relative; z-index:2; text-align:center; padding:0 24px;}
.video-banner-content .eyebrow{justify-content:center;}
.video-banner-content p{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,5.5vw,64px); line-height:1.08; max-width:920px; margin:0 auto;
}
.video-play-btn{
  width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(245,245,240,0.5);
  display:flex; align-items:center; justify-content:center; margin:32px auto 0;
  transition:all 0.25s var(--ease); cursor:pointer;
}
.video-play-btn:hover{border-color:var(--accent); background:var(--accent);}
.video-play-btn svg{width:16px; height:16px; fill:#fff; margin-left:3px;}

/* ============================================================
   CAPABILITY LIST — versão minimalista (ícone + palavra, sem parágrafo)
   ============================================================ */
.capability-strip{padding:var(--section-pad) 0; border-top:1px solid var(--border-subtle);}
.capability-list{display:flex; flex-direction:column; margin-top:12px;}
.capability-row{
  display:flex; align-items:baseline; gap:20px; padding:16px 0; border-top:1px solid var(--border-subtle);
  transition:padding-left 0.3s var(--ease), opacity 0.3s var(--ease);
}
.capability-list .capability-row:last-child{border-bottom:1px solid var(--border-subtle);}
.capability-row:hover{padding-left:14px;}
.capability-row .cap-num{font-family:var(--font-mono); font-size:12px; color:var(--accent); width:26px; flex-shrink:0;}
.capability-row h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(20px,3.2vw,32px); letter-spacing:0.005em;
}
.capability-row .cap-note{margin-left:auto; font-family:var(--font-script); font-size:18px; color:var(--text-muted); white-space:nowrap;}

/* ============================================================
   PROCESS ICON STRIP (substitui números por ícone desenhado)
   ============================================================ */
.process-icon{width:34px; height:34px; margin-bottom:16px; color:var(--accent);}
.process-icon svg{width:100%; height:100%;}

/* ============================================================
   PORTFOLIO MASONRY — cards com vídeo de fundo e tamanhos variados
   ============================================================ */
.portfolio-grid.masonry{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:16px;}
.portfolio-grid.masonry .portfolio-card{aspect-ratio:auto; grid-row:span 3;}
.portfolio-grid.masonry .portfolio-card.tall{grid-row:span 4;}
.portfolio-grid.masonry .portfolio-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.4s var(--ease);}
.portfolio-grid.masonry .portfolio-card:hover video{opacity:1;}

@media (max-width:900px){
  .portfolio-grid.masonry{grid-template-columns:repeat(2,1fr);}
  .impact p{font-size:clamp(26px,7vw,48px);}
  .video-banner{min-height:60svh;}
}
@media (max-width:560px){
  .portfolio-grid.masonry{grid-template-columns:1fr;}
  .portfolio-grid.masonry .portfolio-card{grid-row:span 4 !important;}
  .strip-track img{width:150px; height:200px;}
}

/* ============================================================
   CORREÇÕES FINAIS (adicionadas depois, sempre no fim do arquivo
   pra garantir prioridade na cascata do CSS)
   ============================================================ */
@media (max-width:700px){
  .capability-row{flex-wrap:wrap;}
  .capability-row .cap-note{width:100%; margin-left:0; padding-left:44px; white-space:normal; margin-top:2px; font-size:16px;}
}

/* Blindagem extra pras capas do portfólio sempre aparecerem, mesmo em telas pequenas */
.portfolio-card img{display:block; min-height:100%;}
.portfolio-grid.masonry .portfolio-card{min-height:220px;}

/* Lightbox de foto individual (abre a foto em tamanho grande ao clicar) */
.photo-lightbox{
  position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0.96);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.photo-lightbox.open{display:flex;}
.photo-lightbox img{max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border:1px solid var(--border-subtle);}
.photo-lightbox-close{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--text-primary); transition:all 0.25s var(--ease);
}
.photo-lightbox-close:hover{border-color:var(--accent); background:var(--accent);}
.photo-lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--text-primary); transition:all 0.25s var(--ease);
}
.photo-lightbox-nav:hover{border-color:var(--accent); background:var(--accent);}
.photo-lightbox-nav.prev{left:20px;}
.photo-lightbox-nav.next{right:20px;}
@media (max-width:560px){
  .photo-lightbox-nav{width:38px; height:38px; font-size:16px;}
  .photo-lightbox-nav.prev{left:8px;}
  .photo-lightbox-nav.next{right:8px;}
  .photo-lightbox-close{top:12px; right:12px;}
}
.pf-modal-photos img{cursor:pointer; transition:opacity 0.2s var(--ease);}
.pf-modal-photos img:hover{opacity:0.8;}