* { box-sizing: border-box; }
:root { color-scheme: dark; --line: rgba(255,255,255,.23); --gutter: 4%; }
html { background: #100509; scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color: #fffdf5; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100svh; background: #100509 url('hero/ezgif-frame-001.jpg') center / cover no-repeat; }
main { position: relative; }
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 8svh; min-height: 56px; z-index: 10; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(16,5,9,.2); backdrop-filter: blur(8px); }
.brand { font-size: clamp(14px,1.6vw,23px); font-weight: 700; letter-spacing: -.6px; }
.brand sup { font-size: .5em; vertical-align: super; }
.site-header > nav { display: flex; gap: clamp(25px,6vw,100px); align-items: center; font-size: clamp(10px,1vw,14px); }
.site-header nav a { text-underline-offset: 4px; }
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline; }
small { opacity: .55; font-size: .72em; }
.menu-toggle { border: 0; color: inherit; background: none; padding: 5px 0 5px 12px; cursor: pointer; }
.menu-toggle img { width: 36px; display: block; filter: invert(1); }
.site-header > .menu-panel { position: absolute; top: 100%; right: var(--gutter); width: 220px; padding: 24px; background: #140b0e; display: grid; gap: 20px; font-size: 18px; border: 1px solid var(--line); }
.site-header > .menu-panel[hidden] { display: none; }
.section { position: relative; min-height: 110svh; padding: 15svh var(--gutter) 7svh; }
.hero { height: 100svh; min-height: 540px; padding: 8svh var(--gutter) 3svh; display: flex; flex-direction: column; }
.ghost-name { position: absolute; top: 9svh; left: 3%; width: 94%; font-size: 20vw; line-height: .9; font-weight: 800; letter-spacing: -.065em; opacity: .12; pointer-events: none; }
.hero-middle { margin-top: 28svh; height: 31svh; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 6px; }
.ruled { border-top: 1px solid var(--line); position: relative; }
.ruled::before, .ruled::after { content: ''; position: absolute; top: -4px; height: 7px; border-left: 1px solid rgba(255,255,255,.55); }
.ruled::before { left: 0; }.ruled::after { right: 0; }
.intro { font-size: clamp(10px,1.17vw,17px); line-height: 1.6; margin: 0; text-shadow: 0 1px 12px #100509; }
.project-card { display: block; background: #fffdf5; color: #333; padding: 6px; width: clamp(108px,15.5vw,235px); flex-shrink: 0; transition: transform .25s; }
a.project-card:hover { transform: translateY(-5px); }
.project-image { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.project-image > img { position: absolute; width: 782.98%; max-width: none; height: auto; left: -610.64%; top: -227.66%; }
.project-caption { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: clamp(7px,.8vw,11px); padding: 10px 2px 3px; white-space: nowrap; }
.project-caption span:first-child { display: flex; align-items: center; gap: 4px; }
.project-caption img { width: 10px; height: 10px; }
.hero-bottom { flex: 1; padding-top: 7svh; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.signature p { font-size: clamp(12px,1.4vw,20px); margin: 0 0 8px; }
h1 { font-size: 11.3vw; line-height: .85; letter-spacing: -.06em; margin: 0; font-weight: 800; }
.contact-card { align-self: center; position: relative; width: 24.5vw; max-width: 360px; min-width: 220px; padding: 9px; display: flex; align-items: stretch; gap: 10px; background: #0b0b0b; }
.avatar { width: 25%; aspect-ratio: .85; object-fit: cover; }
.contact-copy { display: flex; flex-direction: column; font-size: clamp(9px,.85vw,13px); gap: 5px; }
.contact-copy > span:first-child { margin-bottom: auto; padding-bottom: 12px; color: #ddd; }
.contact-copy > span:last-child { font-size: .85em; color: #ccc; }
.star { position: absolute; right: 10px; top: 10px; width: 12px; opacity: .5; filter: invert(1); }
.arrow { background: #fffdf5; width: 30px; height: 30px; margin-left: auto; align-self: flex-end; display: grid; place-items: center; }
.arrow img { width: 17px; }
.editorial { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); background: rgba(16,5,9,.26); text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.eyebrow { font-size: 12px; letter-spacing: .08em; margin: 0 0 6svh; }
h2 { margin: 0; font-size: clamp(64px,11vw,160px); line-height: .95; letter-spacing: -.065em; font-weight: 700; }
.section-note { font-size: clamp(15px,1.8vw,24px); line-height: 1.5; max-width: 310px; margin-top: 6svh; }
.work-detail { display: flex; align-items: flex-end; gap: 4vw; margin-top: 5svh; }
.featured-project { width: clamp(170px,22vw,300px); text-shadow: none; }
.section-note span { font-size: .65em; opacity: .7; }
.service-list { width: min(580px,100%); margin-top: 6svh; }
.service-list p { border-top: 1px solid var(--line); margin: 0; padding: 22px 0; font-size: clamp(22px,3vw,40px); }
.service-list span { display: inline-block; width: 60px; font-size: 12px; vertical-align: middle; }
.contact-identity { display: flex; align-items: center; gap: 20px; margin-top: 6svh; }
.contact-identity > img { width: 70px; height: 80px; object-fit: cover; }
.contact-identity p { font-size: 20px; }.contact-identity span { display: block; font-size: 12px; margin-top: 8px; }
footer { position: absolute; bottom: 5svh; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; font-size: 11px; }
footer a { display: flex; gap: 12px; align-items: center; }footer img { width: 14px; filter: invert(1); }
@media (max-width: 600px) {
  :root { --gutter: 6%; }
  .site-header > nav:not(.menu-panel) { display: none; }
  .hero { min-height: 650px; }
  .ghost-name { top: 14svh; font-size: 19vw; }
  .hero-middle { margin-top: 29svh; height: 29svh; }
  .intro { font-size: 9px; max-width: 190px; }
  .hero-bottom { padding-top: 5svh; flex-direction: column; gap: 20px; padding-bottom: 18px; }
  h1 { font-size: 17.5vw; }
  .signature p { margin-bottom: 10px; }
  .contact-card { align-self: flex-end; width: 220px; }
  .project-card { padding: 4px; }
  .project-caption { padding-top: 7px; font-size: 6px; }
  .project-caption img { width: 7px; }
  .editorial { min-height: 100svh; }
  .work-detail { align-items: flex-start; flex-direction: column; gap: 0; }
  .featured-project .project-caption { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
/* Conteúdo e identidade de Lucas Couto. */
.skip-link { position: fixed; z-index: 30; top: -60px; left: 20px; padding: 12px 18px; background: #fffdf5; color: #100509; }
.skip-link:focus { top: 12px; }
.brand-dot { color: #ef7c93; }
.site-header > nav { gap: clamp(22px,4.4vw,68px); font-size: 12px; }
.ghost-name { font-size: 13.65vw; top: 12svh; white-space: nowrap; }
h1 { font-size: 8.65vw; white-space: nowrap; }
.signature p { font-size: clamp(10px,1.1vw,16px); margin-bottom: 18px; }
.hero-description { font-size: clamp(16px,2vw,28px); line-height: 1.3; margin: 18px 0 0; letter-spacing: -.02em; text-shadow: 0 2px 12px #100509; }
.intro { font-size: clamp(10px,1vw,14px); letter-spacing: .035em; }
.expertise-card { padding: 20px; background: rgba(16,5,9,.84); border: 1px solid var(--line); width: clamp(170px,20vw,275px); }
.expertise-card .eyebrow { display: block; font-size: 9px; margin-bottom: 18px; }
.expertise-card strong { display: block; font-size: clamp(24px,3vw,42px); line-height: 1.04; letter-spacing: -.035em; }
.expertise-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 10px; }
.expertise-footer img, .text-link img { width: 15px; filter: invert(1); }
.contact-card { min-width: 250px; }
.contact-copy { font-size: clamp(10px,.9vw,13px); }
.editorial { background: rgba(16,5,9,.63); min-height: 110svh; padding-top: 16svh; padding-bottom: 12svh; }
h2 { font-size: clamp(48px,7.3vw,106px); line-height: 1.04; letter-spacing: -.055em; }
.section-body { max-width: 650px; margin-top: 32px; font-size: clamp(16px,1.65vw,22px); line-height: 1.65; color: #e2dadd; }
.section-body p { margin: 0 0 18px; }
.text-link { display: inline-flex; align-items: center; gap: 18px; align-self: flex-start; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.45); padding: 12px 0; margin-top: 16px; }
.text-link:hover { border-color: #fff; }
.solution-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 50px; max-width: 1150px; }
.solution-grid article { border-top: 1px solid var(--line); padding-top: 20px; }
.item-number { font-size: 12px; color: #cfb7bf; }
.solution-grid h3 { font-size: clamp(21px,2.1vw,30px); line-height: 1.15; letter-spacing: -.035em; margin: 25px 0 16px; }
.solution-grid p, .service-list article p { font-size: 15px; color: #d8cdd1; line-height: 1.65; margin: 0; }
.service-list { max-width: 860px; width: 100%; margin-top: 40px; }
.service-list article { display: flex; gap: 20px; border-top: 1px solid var(--line); padding: 22px 0; }
.service-list article > span { width: 36px; flex-shrink: 0; padding-top: 5px; color: #cfb7bf; }
.service-list h3 { font-size: clamp(22px,2.65vw,38px); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 10px; }
.service-list article p { border: 0; padding: 0; }
.contact-intro { font-size: clamp(16px,1.7vw,23px); line-height: 1.6; color: #e2dadd; margin: 30px 0; }
.whatsapp-button { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; gap: 15px; padding: 20px 24px; background: #d7f7d9; color: #102919; font-size: 16px; font-weight: 700; transition: background .2s, transform .2s; }
.whatsapp-button:hover { background: #b8efbe; transform: translateY(-2px); }
.whatsapp-button > img { width: 22px; height: 22px; }
.whatsapp-button > .button-arrow { width: 17px; height: 17px; margin-left: 16px; }
.phone-label { font-size: 13px; color: #d8cdd1; margin: 16px 0 0; }
.contact-section { padding-bottom: 160px; }
@media (max-width: 760px) {
  .site-header > nav:not(.menu-panel) { display: none; }
  .solution-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .solution-grid h3 { margin-top: 14px; }
  .editorial { min-height: 100svh; }
}
@media (max-width: 600px) {
  .ghost-name { top: 15svh; font-size: 13.25vw; left: 5%; }
  h1 { font-size: 13.1vw; }
  .hero { min-height: 730px; }
  .hero-middle { margin-top: 24svh; height: 33svh; gap: 16px; }
  .hero-pitch { max-width: 54%; }
  .intro { font-size: 9px; line-height: 1.65; }
  .hero-description { font-size: 17px; margin-top: 16px; }
  .expertise-card { width: 142px; min-width: 130px; padding: 14px 12px; }
  .expertise-card .eyebrow { font-size: 7px; margin-bottom: 18px; }
  .expertise-card strong { font-size: 23px; }
  .expertise-footer { font-size: 8px; margin-top: 18px; gap: 4px; }
  .expertise-footer img { width: 12px; }
  .signature p { font-size: 10px; }
  .contact-card { width: 258px; min-width: 0; }
  .contact-copy { font-size: 11px; }
  .section-body { margin-top: 24px; }
  .eyebrow { font-size: 10px; }
  h2 { font-size: clamp(38px,9.5vw,56px); }
  .editorial { padding-top: 110px; padding-bottom: 80px; }
  .service-list article { gap: 10px; }
  .service-list article > span { width: 24px; }
  .whatsapp-button { width: 100%; gap: 10px; padding: 18px 14px; font-size: 14px; }
  .whatsapp-button > .button-arrow { margin-left: auto; }
  .contact-section { padding-bottom: 150px; }
}
.skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 8px; max-width: 740px; }
.skill-tags li { border: 1px solid var(--line); padding: 9px 13px; font-size: 12px; background: rgba(16,5,9,.3); }
.experience-intro { font-size: 17px; line-height: 1.6; color: #e2dadd; margin: 26px 0 0; max-width: 590px; }
.experience-grid { margin-top: 35px; }
.solution-grid .job-role { font-size: 13px; color: #fffdf5; margin: 0 0 16px; }
.experience-grid h3 { margin: 20px 0 10px; }
.career-note { max-width: 800px; font-size: 13px; line-height: 1.6; color: #cbbbC2; margin: 32px 0 0; }
.phone-label span { display: block; margin-top: 9px; color: #b5a6ad; }
/* Ajustes para o nome completo e o resumo de experiência. */
.ghost-name { font-size: 12vw; }
.expertise-card strong { font-size: clamp(22px,2.1vw,30px); }
@media (max-width: 600px) {
  .ghost-name { font-size: 11.8vw; }
  .expertise-card strong { font-size: 19px; }
}
@media (max-width: 600px) { h1 { font-size: 11.5vw; } }
/* Nexalt e posicionamento profissional. */
.site-header > nav { gap: clamp(18px,3.3vw,52px); }
.company-statement { margin: 28px 0 0; font-size: clamp(25px,3.5vw,48px); line-height: 1.15; letter-spacing: -.035em; }
.nexalt-section .section-body { max-width: 720px; }
.company-focus { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0 28px; font-size: 12px; color: #d8cdd1; }
.company-focus span { border-top: 1px solid var(--line); padding-top: 12px; }
.company-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.company-button { display: inline-flex; align-items: center; gap: 40px; background: #fffdf5; color: #100509; padding: 18px 22px; font-size: 14px; font-weight: 700; }
.company-button:hover { background: #e6dce0; }
.company-button img { width: 17px; }
.company-actions .text-link { margin-top: 0; align-self: center; }
@media (max-width: 600px) {
  .signature p { max-width: 320px; font-size: 10px; line-height: 1.5; }
  .company-statement { font-size: 27px; }
  .company-actions { align-items: flex-start; gap: 12px; flex-direction: column; }
  .company-actions .text-link { align-self: flex-start; font-size: 13px; }
  .company-focus { gap: 14px; font-size: 11px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  h1 { font-size: 7vw; }
  .contact-card { min-width: 210px; }
  .contact-copy { font-size: 9px; }
}