/* =========================================================================
   Portfólio Luíza Bessa
   Implementação do Figma "Portfolio" (node 364-13956) — desktop 1440 + mobile 390
   Breakpoint único: desktop >= 1025px · mobile <= 1024px (conforme handoff-spec)
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* cor */
  --ink:            #211F20;
  --ink-dark:       #1E1D1B;
  --ink-darkest:    #010208;
  --ink-medium:     #837C80;
  --ink-light:      #C0BEBF;
  --ink-lightest:   #EBEAEB;
  --text-secondary: #615C5F;

  --paper:          #F2EFE9;
  --paper-light:    #F3F0EE;
  --paper-lightest: #FAFAFA;
  --paper-dark:     #997A62;

  --blush:          #E0B7AE;  /* Vermilion/Light  */
  --rose:           #D6A9AD;  /* Vinho/Light      */
  --vermilion:      #982D17;
  --olive:          #4A5147;
  --olive-medium:   #E3DB1C;
  --chartreuse:     #E1E1B7;
  --highlight:      rgba(222,220,160,.5);

  --surface-projects: #141313;
  --surface-about:    #222020;
  --surface-contact:  #F3F3F0;
  --surface-card:     #1A1A1A;
  --surface-footer:   #0A0A0C;

  --hairline-dark:  rgba(255,255,255,.15);
  --hairline-foot:  rgba(242,239,233,.22);

  /* tipografia */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'Sora', system-ui, sans-serif;
  --f-label:   'Inter', system-ui, sans-serif;

  /* layout */
  --container: 1248px;   /* 1200 de conteúdo + 24 de padding lateral */
  --gutter:    120px;
  --nav-h:     84px;

  /* movimento */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-enter: cubic-bezier(.4,0,.3,1);    /* ritmo constante, sem arranque nem cauda longa */
  --dur:       280ms;   /* hover / estados              */
  --dur-slow:  480ms;   /* transições de superfície     */
  --dur-enter: 1000ms;  /* entradas ao rolar            */
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
hr{ border:0; border-top:1px solid var(--hairline-dark); margin:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--blush); outline-offset:3px; border-radius:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.skip-link{
  position:absolute; left:16px; top:-64px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:99px;
  font-family:var(--f-display); font-weight:600; font-size:14px;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:16px; }

main{ padding-top:60px; }               /* hero começa em y=60 no Figma */

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:24px;
}

/* ---------- 3. Reveal (animação de entrada) ------------------------------ */
.reveal{
  opacity:0; translate:0 24px;
  transition:opacity calc(var(--dur-enter) * .7) var(--ease-enter),
             translate var(--dur-enter) var(--ease-enter);
  transition-delay:calc(var(--reveal-delay,0) * 120ms);
  will-change:opacity, transform;
}
.reveal.is-visible{ will-change:auto; }   /* libera a camada depois de animar */
.reveal.is-visible{ opacity:1; translate:none; }

/* data-reveal-late não muda a aparência da animação — ela é a mesma do resto
   da página. O atributo só marca, para o JS, os elementos que devem esperar a
   primeira rolagem e estar bem dentro da tela antes de entrar. */

/* ---------- 4. Botões ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:500;
  border-radius:128px; white-space:nowrap;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn__icon{
  width:31px; height:31px; transform:rotate(-90deg);
  transition:transform 380ms var(--ease);
}
.btn__icon--sm{ width:16px; height:16px; transform:none; }

/* primário escuro (hero) */
.btn--solid{
  gap:13px; padding:12px 21px 12px 26px;
  background:var(--ink-dark); color:#fff;
  font-size:16px; letter-spacing:-.4px; text-transform:uppercase;
}
.btn--solid:hover{ background:#000; transform:translateY(-2px); box-shadow:0 8px 20px rgba(33,31,32,.28); }
.btn--solid:hover .btn__icon{ transform:rotate(-45deg) scale(1.08); }
.btn--solid:active{ transform:translateY(0); }

/* secundário contornado (hero) */
.btn--outline{
  padding:12px 21px; border:1.3px solid var(--ink);
  font-size:16px; letter-spacing:-.4px; text-transform:uppercase;
}
.btn--outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn--outline:active{ transform:translateY(0); }

/* fantasma sobre fundo escuro (seção projetos) */
.btn--ghost{
  gap:10px; height:44px; padding:8px 16px;
  border:1px solid var(--ink-lightest); color:var(--ink-lightest);
  font-weight:600; font-size:18px; letter-spacing:-.31px; border-radius:99px;
}
.btn--ghost:hover{ background:var(--ink-lightest); color:var(--surface-projects); }
.btn--ghost:hover .btn__icon--sm{ transform:translateX(3px); }
.btn--ghost .btn__icon--sm{ transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.btn--ghost:hover .btn__icon--sm{ filter:invert(1); }

/* chip claro dos cards */
.btn--chip{
  padding:8px 22px 8px 20px; border-radius:999px;
  background:var(--chartreuse); border:1px solid var(--olive-medium);
  color:var(--ink-dark); font-weight:600; font-size:14px; line-height:20px;
}
.btn--chip:hover{ background:var(--olive-medium); border-color:var(--olive-medium); }

/* enviar (formulário) */
.btn--send{
  position:relative; gap:10px; min-height:44px; padding:12px 20px; border-radius:99px;
  background:var(--ink); color:#fff; font-size:16px; line-height:18px;
}
.btn--send:hover{ background:#000; transform:translateY(-2px); }
.btn--send[disabled]{ opacity:.7; cursor:progress; transform:none; }
.btn__spinner{
  width:15px; height:15px; border-radius:50%; display:none;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn--send.is-loading .btn__spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* estado desabilitado — páginas de case ainda não existem */
.btn[disabled]{
  cursor:not-allowed; transform:none !important; box-shadow:none !important;
  filter:grayscale(.35); opacity:.55;
}
.btn--chip[disabled]:hover{ background:var(--chartreuse); border-color:var(--olive-medium); }
.btn--ghost[disabled]:hover{ background:none; color:var(--ink-lightest); }
.btn--ghost[disabled]:hover .btn__icon--sm{ transform:none; filter:none; }

.card__cta,
.head-action{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.head-action{ flex:none; }

.soon{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  border:1px dashed rgba(224,183,174,.5); background:rgba(224,183,174,.08);
  font-family:var(--f-label); font-weight:700; font-size:10px;
  letter-spacing:1px; text-transform:uppercase; color:var(--blush);
  white-space:nowrap;
}

/* links cujo destino ainda não existe (href="#") ficam inertes */
a[data-todo][aria-disabled="true"]{ cursor:not-allowed; }
/* o esmaecido é só para os links de lista; no CTA do currículo ele
   derrubaria o contraste do hover abaixo do mínimo de acessibilidade */
a[data-todo][aria-disabled="true"]:not(.link-cta){ opacity:.7; }
a[data-todo][aria-disabled="true"]:hover{ padding-left:0; }

/* link-texto com seta (currículo) */
.link-cta{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  transition:gap var(--dur) var(--ease), color var(--dur) var(--ease),
             text-decoration-color var(--dur) var(--ease);
  font-family:var(--f-label); font-weight:800; font-size:16px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--blush);
}
.link-cta img{ width:16px; height:16px; }
.link-cta img{ transition:transform var(--dur) var(--ease); }
.link-cta:hover,
.link-cta:focus-visible{
  gap:18px;
  color:#C98F84;                       /* tom mais fechado, 4.9:1 sobre o fundo */
  text-decoration-color:currentColor;
}
.link-cta:hover img{ transform:translate(2px,-2px); }

/* ---------- 5. Navbar ---------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  border-radius:0 0 16px 16px;                      /* Figma: rounded-bl/br 16 */
  background:rgba(1,2,8,.9); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav.is-stuck{ background:rgba(1,2,8,.97); box-shadow:0 8px 8px rgba(44,51,54,.11); }
.nav__inner{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand img{ width:85px; height:30px; transition:opacity var(--dur) var(--ease); }
.nav__brand:hover img{ opacity:.75; }

.nav__menu{ display:flex; }
.navlink{
  padding:8px 24px; border-radius:24px;
  font-size:16px; line-height:20px; color:#fff;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navlink:hover{ background:rgba(255,255,255,.12); }
.navlink.is-active{ background:#fff; color:var(--ink-darkest); }

.nav__lang{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 24px; border:1px solid #fff; border-radius:100px;
  font-family:var(--f-body); font-weight:600; font-size:14px; line-height:1;
  color:#fff; text-transform:uppercase; cursor:default; opacity:.85;
}
.nav__burger{
  display:none; position:relative;
  width:44px; height:44px; padding:0;                 /* alvo de toque de 44px */
  align-items:center; justify-content:center;
}
.nav__burger img{
  position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__burger[aria-expanded="false"] .nav__burger-close,
.nav__burger[aria-expanded="true"]  .nav__burger-open{ opacity:0; transform:rotate(-45deg); }
.nav__burger[aria-expanded="true"]  .nav__burger-close,
.nav__burger[aria-expanded="false"] .nav__burger-open{ opacity:1; transform:none; }

/* menu mobile */
.menu-mobile{
  position:fixed; inset:0; z-index:99;
  background:rgba(1,2,8,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:calc(var(--nav-h) + 24px) 24px 32px;
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .25s var(--ease);
}
.menu-mobile{ pointer-events:none; }
.menu-mobile.is-open{ opacity:1; pointer-events:auto; }
.menu-mobile nav{ display:flex; flex-direction:column; }
.menu-mobile__lang{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  align-self:flex-start; margin-top:32px; min-height:44px; padding:0 24px;
  border:1px solid #fff; border-radius:100px;
  font-family:var(--f-body); font-weight:600; font-size:14px; line-height:1;
  color:#fff; text-transform:uppercase; cursor:default; opacity:.85;
}
.menu-mobile__link{
  padding:20px 4px; min-height:44px; display:flex; align-items:center; color:var(--paper);
  font-family:var(--f-display); font-size:24px; font-weight:500;
  border-bottom:1px solid var(--hairline-foot);
  transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.menu-mobile__link:hover,
.menu-mobile__link:focus-visible{ color:var(--rose); padding-left:12px; }
body.menu-open{ overflow:hidden; }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero{ position:relative; background:var(--paper); }
.hero__rule{
  position:absolute; top:24px; left:max(48px, calc(50% - 672px)); width:1px; height:650px;
  background:var(--ink-medium); opacity:.6;
}
.hero__body{
  position:relative;
  width:100%; max-width:1440px; margin-inline:auto;
  min-height:674px;
  display:grid; grid-template-columns:1fr 593px;
}
.hero__text{
  padding:96px var(--gutter) 40px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero__eyebrow{
  font-family:var(--f-label); font-size:10.5px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--olive);
}
.hero__title{
  margin-top:32px;
  font-family:var(--f-display); font-size:56px; line-height:63.6px; color:#191D1A;
}
.hero__hey{ display:block; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.hero__name{ display:block; font-weight:300; letter-spacing:-2.1px; text-transform:uppercase; }

/* caixa de destaque atrás de "Luíza bessa" */
.hl{ position:relative; display:inline-block; padding:0 .107em; }
.hl__text{ position:relative; z-index:1; }

.hl__mark{                                     /* retângulo amarelo-claro */
  position:absolute; z-index:0; left:0; right:0;
  top:50%; height:1.232em; margin-top:-.616em;
  background:var(--highlight);
  transform-origin:left center; transform:scaleX(var(--hl-scale,1));
  transition:transform 1s var(--ease) .45s;
}
.hl::before,
.hl::after{                                    /* colchetes (SVGs do Figma) */
  content:""; position:absolute; z-index:2; width:.196em;
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:var(--hl-op,1);
  transition:opacity .55s var(--ease) 1.15s;
}
.hl::before{                                   /* esquerdo: quadradinho em cima */
  left:-.107em; top:50%; margin-top:-.92em; height:1.536em;
  background-image:url("../svg/hero-bracket-left.svg");
}
.hl::after{                                    /* direito: quadradinho embaixo */
  right:-.089em; top:50%; margin-top:-.616em; height:1.554em;
  background-image:url("../svg/hero-bracket-right.svg");
}
.hero__title.reveal:not(.is-visible) .hl{ --hl-scale:0; --hl-op:0; }

.hero__lead{
  margin-top:48px; max-width:639px;
  font-size:18px; line-height:1.5; color:var(--olive);
  display:flex; flex-direction:column; gap:8px;
}
.hero__lead-strong{ font-weight:700; }
.hero__ctas{ margin-top:72px; display:flex; gap:25px; flex-wrap:wrap; }

/* foto */
.hero__photo{
  position:relative; overflow:hidden;
  border-left:1px solid var(--ink);
  height:674px;
}
.hero__photo picture{ position:absolute; inset:0; display:block; }
.hero__photo picture img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  animation:photo-in 1.3s var(--ease) both .1s;
}
@keyframes photo-in{ from{ opacity:0; transform:translateY(14px) scale(1.015); } }
.hero__glow{
  position:absolute; left:-140px; bottom:-90px; width:420px; height:auto;
  pointer-events:none;
}

/* faixa de especialidades */
.skills{
  background:var(--vermilion);
  border-block:1px solid var(--ink);
  height:56px; display:flex; align-items:center; overflow:hidden;
}
.skills__track{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-mono); font-weight:700; font-size:11px;
  letter-spacing:1.76px; text-transform:uppercase; color:var(--rose);
}
.skills__track > li{ white-space:nowrap; }
.skills__dot{ width:4px; height:4px; border-radius:50%; background:var(--rose); flex:none; }
.skills__track > li:last-child{ display:none; }   /* ponto extra só serve ao marquee mobile */

/* ---------- 7. Cabeçalho de seção ---------------------------------------- */
.section-head{ display:flex; align-items:center; gap:36px; }
.section-head__title{ display:flex; align-items:center; gap:16px; flex:none; }
.section-head__star{ width:32px; height:32px; animation:star-spin 24s linear infinite; }
@keyframes star-spin{ to{ transform:rotate(360deg); } }
.section-head h2{
  font-family:var(--f-display); font-weight:700; font-size:40px; line-height:1.15;
  letter-spacing:-.42px; color:var(--ink-lightest);
}
.section-head__line{ flex:1; height:1px; background:var(--hairline-dark); }

/* ---------- 8. Projetos -------------------------------------------------- */
.projects{ background:var(--surface-projects); padding:96px 0 128px; }
.projects__inner{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px;
  display:flex; flex-direction:column; gap:80px;
}
.projects__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.projects__more--mobile{ display:none; }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface-card);
  border:.9px solid var(--ink-light);
  border-radius:16px; overflow:hidden;
  box-shadow:0 0 10px rgba(250,250,250,.14);
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease),                       /* hover  */
             opacity calc(var(--dur-enter) * .7) var(--ease-enter),  /* entrada */
             translate var(--dur-enter) var(--ease-enter);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--chartreuse);
  box-shadow:0 0 26px rgba(250,250,250,.22);
}
.card--featured{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:40px; min-height:258px; }

.card__media{ position:relative; overflow:hidden; flex:none; }
.card__media img{
  width:100%; height:240px; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img{ transform:scale(1.05); }
.card--featured .card__media{ width:378px; align-self:stretch; }
.card--featured .card__media img{ height:100%; min-height:258px; }

.card__tags{
  position:absolute; right:16px; bottom:8px;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 4px;
}
.card__tags li{
  padding:6px 12px; border-radius:999px;
  background:rgba(54,54,54,.9); backdrop-filter:blur(2px);
  font-family:var(--f-display); font-weight:600; font-size:12px;
  text-transform:uppercase; color:var(--ink-lightest);
}

.card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px 24px 32px; }
.card--featured .card__body{ flex:1; padding:24px 24px 24px 0; gap:16px; }
.card__title{ font-family:var(--f-display); font-weight:700; font-size:24px; color:#fff; }
.card--featured .card__title{ font-size:32px; }
.card__text{ font-weight:500; font-size:14px; line-height:22px; color:var(--ink-lightest); }
.card__body .card__cta{ margin-top:6px; }

.card__accent{
  position:absolute; right:-40px; bottom:-90px; width:290px; height:auto;
  pointer-events:none; opacity:.9;
}

/* ---------- 9. Sobre ----------------------------------------------------- */
.about{ background:var(--surface-about); padding:120px 0 136px; }
.about__inner{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px;
  display:flex; flex-direction:column; gap:64px;
}
.about .section-head h2{ line-height:1.6; }

.creds{ display:grid; grid-template-columns:repeat(3,1fr); gap:80px; }
.creds__col{ display:flex; flex-direction:column; gap:24px; }
.creds__label{
  font-family:var(--f-label); font-weight:800; font-size:16px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--blush);
}
.creds__item{ display:flex; flex-direction:column; gap:6px; }
.creds__col:last-child{ gap:40px; }
.creds__col:last-child .creds__item{ gap:16px; }
.creds__sublabel{
  font-family:var(--f-label); font-weight:700; font-size:11px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--blush);
}
.creds__value{ font-size:18px; line-height:28px; color:#fff; }
.creds__divider{ width:100%; }

.about__divider{ margin-block:16px; }
.about__bio{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.about__bio p{ max-width:800px; font-weight:300; font-size:18px; line-height:34px; color:#E5E7EB; }
.about__bio .link-cta{ margin-top:8px; }

/* ---------- 10. Contato -------------------------------------------------- */
.contact{
  background:var(--surface-contact);
  padding:96px 24px;
  display:flex; justify-content:center;
}
.contact__card{
  position:relative; width:100%; max-width:1200px; min-height:603px;
}
.contact__card-bg,
.contact__card-texture{
  position:absolute; pointer-events:none;
}
.contact__card-bg{ left:-17px; top:-9px; width:calc(100% + 34px); height:calc(100% + 34px); }
.contact__card-texture{ left:-16.5px; top:-8.5px; width:calc(100% + 33px); height:calc(100% + 32.5px); }

.contact__layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 480px; align-items:center; gap:40px;
  padding:72px 80px 0 112px; min-height:603px;
}
.contact__info{ display:flex; flex-direction:column; gap:24px; padding-bottom:140px; }
.contact__title{
  font-family:var(--f-display); font-weight:800; font-size:40px; line-height:1.27;
  letter-spacing:-.46px; color:var(--ink);
}
.contact__subtitle{ max-width:488px; font-weight:300; font-size:16px; line-height:1.68; color:var(--ink); }
.contact__divider{ border-top-color:var(--paper-dark); margin-top:16px; }
.contact__meta{ display:flex; flex-direction:column; gap:24px; }
.contact__meta li{ display:flex; align-items:center; gap:16px; font-size:14px; color:var(--ink); }
.contact__meta img{ width:20px; height:20px; flex:none; }
.contact__meta a{ border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease); }
.contact__meta a:hover{ border-bottom-color:var(--ink); }

.contact__form{ display:flex; flex-direction:column; gap:24px; padding:32px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; font-size:16px; line-height:20px; color:var(--text-secondary); }
.req{ color:var(--vermilion); font-weight:700; }
.form-legend{ margin-top:-8px; font-size:13px; color:var(--text-secondary); }
.field input,
.field textarea{
  width:100%; padding:12px 16px;
  background:rgba(250,250,250,.7);
  border:1.5px solid var(--ink-light); border-radius:8px;
  font-family:var(--f-display); font-size:14px; line-height:24px; color:var(--ink);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--text-secondary); opacity:1; }
.field input:hover,
.field textarea:hover{ border-color:var(--ink-medium); }
.field input:focus,
.field textarea:focus{
  outline:none; background:#fff;
  border-color:var(--vermilion); box-shadow:0 0 0 3px rgba(152,45,23,.12);
}
.field.is-invalid input,
.field.is-invalid textarea{ border-color:var(--vermilion); background:rgba(152,45,23,.05); }
.field.is-valid input,
.field.is-valid textarea{ border-color:var(--olive); }
.field.is-invalid .field__error::before{ content:"* "; font-weight:700; }
.field__error{
  min-height:0; font-size:13px; line-height:1.4; color:var(--vermilion);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity var(--dur) var(--ease), max-height var(--dur) var(--ease);
}
.field.is-invalid .field__error{ opacity:1; max-height:40px; }

.contact__submit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form-status{ font-size:13.5px; line-height:1.4; color:var(--olive); }
.form-status:empty{ display:none; }
.form-status.is-error{ color:var(--vermilion); }

/* ---------- 11. Rodapé --------------------------------------------------- */
.footer{ background:var(--surface-footer); color:var(--paper); }
.footer__topbar{ height:40px; background:var(--ink-darkest); }
.footer__inner{
  width:100%; max-width:var(--container); margin-inline:auto; padding:48px 24px 0;
  display:grid; grid-template-columns:202px 1fr; gap:0 100px;
}
.footer__nav{ display:flex; flex-direction:column; }
.footer__nav a{
  display:flex; align-items:center; height:56px;
  font-size:15.5px; color:var(--paper);
  transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer__nav a:hover{ color:var(--rose); padding-left:6px; }

.footer__links{ display:flex; flex-direction:column; justify-self:end; width:100%; max-width:488px; }
.footer__links a{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding-right:2px;
  border-top:1px solid var(--hairline-foot);
  font-family:var(--f-mono); font-size:15.5px; color:var(--paper);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__links li:last-child a{ border-bottom:1px solid var(--hairline-foot); }
.footer__links a:hover{ color:var(--rose); border-color:var(--rose); }
.footer__arrow{
  font-family:var(--f-label); font-size:12px;
  transition:transform var(--dur) var(--ease);
}
.footer__links a:hover .footer__arrow{ transform:translate(3px,-3px); }

.footer__bottom{
  width:100%; max-width:var(--container); margin-inline:auto; padding:0 24px;
  height:59px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(242,239,233,.14); margin-top:64px;
  font-family:var(--f-mono); font-size:12px; color:rgba(243,240,238,.8);
}

/* =========================================================================
   12. Mobile — breakpoint único (<= 1024px), conforme handoff-spec
   ========================================================================= */
@media (max-width:1024px){
  :root{ --gutter:24px; --nav-h:78px; }

  main{ padding-top:47px; }   /* Figma: a foto começa em y=47, 31px por baixo do header de 78 —
                                 é o que preenche os cantos arredondados do header */

  /* navbar */
  .nav__menu,
  .nav__lang{ display:none; }
  .nav__burger{ display:flex; }
  .nav__inner{ padding-inline:24px; }

  /* hero */
  .hero__rule{ display:none; }
  .hero__body{ grid-template-columns:1fr; min-height:0; }
  .hero__photo{ order:-1; height:442px; border-left:0; border-bottom:.8px solid var(--ink); }
  .hero__glow{ left:-160px; bottom:-120px; width:360px; }
  .hero__text{ padding:32px 24px 40px; }
  .hero__title{ margin-top:24px; font-size:clamp(30px,9.2vw,40px); line-height:1.14; }
  .hero__name{ letter-spacing:-1.2px; }
  .hero__lead{ margin-top:24px; }
  .hero__ctas{ margin-top:32px; width:100%; gap:12px; flex-direction:column; }
  .hero__ctas .btn{ width:100%; }

  /* faixa de especialidades vira marquee */
  .skills{ overflow:hidden; }
  .skills__track{
    max-width:none; padding-inline:0; width:max-content;
    justify-content:flex-start; gap:24px;
    animation:marquee 26s linear infinite;
  }
  .skills__track > li:last-child{ display:block; }
  .skills:hover .skills__track{ animation-play-state:paused; }
  @keyframes marquee{ to{ transform:translateX(-50%); } }

  /* seções */
  .projects{ padding:40px 0; }
  .projects__inner,
  .about__inner{ gap:40px; }
  .about{ padding:40px 0 72px; }
  .contact{ padding:48px 20px; }

  .section-head{ flex-wrap:wrap; gap:16px; }
  .section-head h2{ font-size:clamp(24px,6.6vw,32px); }
  .section-head__line{ flex-basis:100%; }
  .section-head .projects__more{ display:none; }
  .projects__more--mobile{ display:inline-flex; align-self:flex-start; font-size:16px; }

  /* cards empilhados */
  .projects__grid{ grid-template-columns:1fr; gap:24px; }
  .card--featured{ flex-direction:column; align-items:stretch; gap:0; }
  .card--featured .card__media{ width:100%; align-self:auto; }
  .card--featured .card__media img{ height:240px; min-height:0; }
  .card--featured .card__body{ padding:24px; gap:10px; }
  .card--featured .card__title{ font-size:24px; }
  .card__accent{ right:-70px; bottom:-120px; width:230px; }
  .card__cta{ width:100%; margin-top:14px; justify-content:space-between; }
  .card__cta .btn--chip{ flex:1; }

  /* sobre */
  .creds{ grid-template-columns:1fr; gap:32px; }
  .creds__col:last-child{ gap:32px; }
  .creds__value{ font-size:16px; line-height:24px; }
  .about__bio p{ font-size:16px; line-height:28px; }
  .link-cta{ font-size:14px; }

  /* contato */
  .contact__card{ min-height:0; }
  .contact__card-bg,
  .contact__card-texture{ display:none; }
  .contact__layout{
    grid-template-columns:1fr; gap:32px; padding:40px 24px; min-height:0;
    background:var(--paper-light);
    border:1px solid var(--paper-dark); border-radius:24px;
  }
  .contact__info{ padding-bottom:0; }
  .contact__title{ font-size:clamp(26px,7.4vw,32px); }
  .contact__form{ padding:0; }
  .btn--send{ width:100%; min-height:48px; }

  /* rodapé */
  .footer__topbar{ display:none; }
  .footer__inner{ grid-template-columns:1fr; gap:40px; padding:40px 20px 0; }
  .footer__nav{ gap:16px; }
  .footer__nav a{ height:auto; min-height:24px; }
  .footer__links{ justify-self:stretch; max-width:none; gap:16px; }
  .footer__links a{ height:auto; padding:12px 0; }
  .footer__links li:last-child a{ border-bottom:1px solid var(--hairline-foot); }
  .footer__bottom{
    height:auto; padding:40px 20px; margin-top:0; border-top:0;
    flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  }
}

/* ---------- 13. Movimento reduzido -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; translate:none; }
  .hero__title.reveal:not(.is-visible) .hl{ --hl-scale:1; --hl-op:1; }
  .skills__track{ animation:none; }
  @media (max-width:1024px){
    .skills{ overflow-x:auto; }
    .skills__track{ animation:none; }
  }
}