/* Patuá Mídia — site de portfólio */
:root{
  --teal-950:#072E33; --teal-900:#0B3A40; --teal-800:#0E4850; --teal-700:#13525A; --teal-600:#1B6670;
  --teal-300:#8DB9BD; --teal-200:#BFD9DB; --teal-100:#E3EFEF; --teal-50:#F1F7F6;
  --paper:#FBF8F2; --sand:#F2ECE1; --ink:#13282B; --muted:#5D6F71; --line:#DCE5E4;
  --dende:#D9682B; --dende-soft:#F3B48C; --dende-dark:#B9531C;
  --radius:18px; --max:1240px;
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.6; font-size:17px; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; }
.wrap{ max-width:var(--max); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); }
.display{ font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.98; margin:0; overflow-wrap:break-word; }
.display em{ font-style:normal; color:var(--dende-soft); }
.display.light{ color:#fff; }
.eyebrow{ font:700 13px/1.4 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:var(--dende-soft); margin:0 0 14px; }
.eyebrow.dark{ color:var(--dende); }
.lead{ font-size:20px; line-height:1.55; color:var(--teal-900); }
.lead.light{ color:var(--teal-200); }
.muted{ color:var(--teal-300); }
.skip{ position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; z-index:100; border-radius:8px; }
.skip:focus{ left:8px; }
:focus-visible{ outline:3px solid var(--dende-soft); outline-offset:3px; }

/* Botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--dende); color:#fff; text-decoration:none; font-weight:700; font-size:16px; padding:15px 26px; border-radius:999px; border:2px solid var(--dende); transition:transform .2s, background .2s; }
.btn:hover{ background:var(--dende-dark); border-color:var(--dende-dark); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.5); }
.btn-ghost:hover{ background:rgba(255,255,255,0.1); border-color:#fff; }
.btn-small{ padding:10px 18px; font-size:14px; }

/* Navegação */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:calc(14px + env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) 14px max(28px, env(safe-area-inset-left, 0px)); transition:background .3s, box-shadow .3s; color:#fff; }
.nav.solid{ background:rgba(11,58,64,0.96); backdrop-filter:blur(8px); box-shadow:0 4px 24px rgba(0,0,0,0.15); }
.brand img{ width:52px; height:auto; }
.links{ display:flex; gap:30px; }
.links a{ text-decoration:none; font-weight:500; font-size:15px; opacity:0.9; }
.links a:hover{ opacity:1; color:var(--dende-soft); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.lang{ display:flex; border:1px solid rgba(255,255,255,0.35); border-radius:999px; overflow:hidden; }
.lang button{ background:transparent; color:#fff; border:0; padding:6px 11px; font-size:12px; font-weight:700; letter-spacing:0.06em; }
.lang button[aria-pressed="true"]{ background:#fff; color:var(--teal-900); }
.menu{ display:none; background:transparent; border:0; width:40px; height:40px; position:relative; }
.menu span{ position:absolute; left:9px; right:9px; height:2px; background:#fff; transition:transform .25s, top .25s; }
.menu span:first-child{ top:15px; } .menu span:last-child{ top:23px; }
.menu[aria-expanded="true"] span:first-child{ top:19px; transform:rotate(45deg); }
.menu[aria-expanded="true"] span:last-child{ top:19px; transform:rotate(-45deg); }

/* Hero */
.hero{ position:relative; min-height:min(92vh, 900px); min-height:min(92svh, 900px); padding-top:120px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--teal-950); }
.hero-media{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px; }
.hero-media .col{ display:flex; flex-direction:column; gap:6px; animation:drift 40s linear infinite alternate; }
.hero-media .c2{ animation-direction:alternate-reverse; margin-top:-14vh; }
.hero-media .col div{ flex:1 0 46vh; background-size:cover; background-position:center; border-radius:6px; }
@keyframes drift{ from{ transform:translateY(0); } to{ transform:translateY(-18vh); } }
.hero-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,46,51,0.55) 0%, rgba(7,46,51,0.35) 35%, rgba(7,46,51,0.92) 78%, var(--teal-950) 100%); }
.hero-inner{ position:relative; max-width:var(--max); width:100%; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)); padding-bottom:9vh; }
.hero h1{ font-size:clamp(54px, 10vw, 150px); color:#fff; }
.hero-sub{ font-size:clamp(18px, 2vw, 22px); max-width:640px; color:var(--teal-100); margin:26px 0 34px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

/* Números */
.numbers{ background:var(--teal-950); color:#fff; padding-block:10px 70px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,0.15); }
.num{ padding:30px 24px 0 0; }
.num b{ display:block; font-family:var(--display); font-stretch:125%; font-weight:850; font-size:clamp(34px, 4vw, 52px); line-height:1; }
.num.accent b{ color:var(--dende-soft); }
.num span{ display:block; margin-top:10px; color:var(--teal-200); font-size:15px; max-width:240px; }

/* Seções */
section{ scroll-margin-top:70px; }
.work, .services, .segments, .about{ padding-block:110px; }
.section-head{ margin-bottom:44px; }
.section-head h2{ font-size:clamp(36px, 5.4vw, 72px); color:var(--teal-800); }

/* Trabalhos */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.filters button{ border:1px solid var(--line); background:#fff; color:var(--teal-800); border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; }
.filters button.on{ background:var(--teal-800); border-color:var(--teal-800); color:#fff; }
.cases{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.case{ grid-column:span 4; position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--teal-900); cursor:pointer; border:0; padding:0; text-align:left; color:#fff; }
.case.big{ grid-column:span 6; aspect-ratio:6/5; }
.case .ph{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.case:hover .ph, .case:focus-visible .ph{ transform:scale(1.05); }
.case::after{ content:""; position:absolute; inset:40% 0 0 0; background:linear-gradient(180deg, transparent, rgba(7,46,51,0.92)); }
.case .meta{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; }
.case .meta small{ display:block; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--dende-soft); }
.case .meta strong{ display:block; font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:clamp(20px, 2vw, 28px); line-height:1.05; margin:6px 0; }
.case .meta span{ font-size:14px; color:var(--teal-100); }
.case[hidden]{ display:none; }

/* Método */
.method{ background:var(--teal-900); color:#fff; padding-block:110px; }
.method .section-head h2{ color:#fff; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.steps li{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:30px 26px; }
.steps b{ font-family:var(--display); font-stretch:125%; font-weight:850; font-size:46px; color:var(--dende-soft); line-height:1; }
.steps h3{ font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:22px; margin:18px 0 10px; }
.steps p{ color:var(--teal-200); font-size:15.5px; margin:0; }

/* Serviços */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; }
.svc.featured{ background:var(--teal-800); color:#fff; border-color:var(--teal-800); }
.svc .tag{ font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--dende); }
.svc.featured .tag{ color:var(--dende-soft); }
.svc h3{ font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:20px; line-height:1.08; margin:12px 0 12px; color:var(--teal-800); }
.svc.featured h3{ color:#fff; }
.svc p{ margin:0; font-size:15px; color:var(--muted); }
.svc.featured p{ color:var(--teal-200); }

/* Para quem */
.segments{ background:var(--sand); }
.seg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.seg{ background:#fff; border-radius:var(--radius); overflow:hidden; }
.seg-img{ aspect-ratio:16/11; background-size:cover; background-position:center; }
.seg-tx{ padding:24px 26px 28px; }
.seg h3{ font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:21px; line-height:1.08; margin:0 0 10px; color:var(--teal-800); }
.seg p{ margin:0; color:var(--muted); font-size:15.5px; }

/* Clientes */
.clients{ background:#04515B; padding-block:70px 50px; }
.clients img{ width:100%; height:auto; }

/* Sobre */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; }
.about h2{ font-size:clamp(36px, 5vw, 64px); color:var(--teal-800); margin-bottom:24px; }
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.founders figure{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; }
.founders img{ width:150px; margin:0 auto 16px; }
.founders b{ display:block; font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; color:var(--teal-800); font-size:18px; }
.founders span{ display:block; font-size:14px; color:var(--muted); margin-top:8px; }

/* Contato */
.contact{ background:var(--teal-950); color:#fff; padding-block:110px; }
.contact h2{ font-size:clamp(40px, 6vw, 84px); margin-bottom:24px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-list{ list-style:none; padding:0; margin:34px 0 0; display:grid; gap:14px; }
.contact-list li{ display:grid; grid-template-columns:110px 1fr; gap:12px; border-top:1px solid rgba(255,255,255,0.14); padding-top:14px; color:var(--teal-100); }
.contact-list span{ font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-300); padding-top:3px; }
.contact-list a{ text-decoration:none; font-weight:600; color:#fff; }
.form{ background:var(--paper); color:var(--ink); border-radius:24px; padding:34px; display:grid; gap:16px; }
.form label{ display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--teal-800); }
.form input, .form select, .form textarea{ font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); width:100%; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--teal-600); border-color:transparent; }
.form .invalid{ border-color:#C0392B; }
.form .btn{ width:100%; margin-top:6px; }
.form-note{ margin:0; font-size:12.5px; color:var(--muted); text-align:center; }

/* Rodapé */
.footer{ background:var(--teal-950); color:var(--teal-200); padding-block:40px 60px; border-top:1px solid rgba(255,255,255,0.08); }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-grid p{ margin:0; }

/* Modal */
.modal{ position:fixed; inset:0; z-index:80; background:rgba(4,30,33,0.82); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal-box{ position:relative; background:var(--paper); border-radius:24px; max-width:1040px; width:100%; max-height:90vh; overflow:auto; display:grid; grid-template-columns:1.15fr 1fr; }
.modal-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; background:var(--teal-950); }
.modal-gallery div{ aspect-ratio:4/5; background-size:cover; background-position:center; border-radius:10px; }
.modal-gallery div:first-child{ grid-column:span 2; aspect-ratio:16/11; }
.modal-body{ padding:40px 36px; }
.modal-body h3{ font-size:clamp(26px, 3vw, 38px); color:var(--teal-800); margin-bottom:16px; }
.modal-body p{ color:var(--muted); font-size:16px; }
.modal-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.modal-kpis div{ border-top:2px solid var(--teal-700); padding-top:10px; }
.modal-kpis b{ display:block; font-family:var(--display); font-stretch:125%; font-weight:850; font-size:28px; color:var(--teal-700); line-height:1; }
.modal-kpis span{ display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.modal-close{ position:absolute; right:14px; top:12px; z-index:3; width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:var(--teal-900); font-size:26px; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,0.2); }

/* WhatsApp flutuante */
.wa-float{ position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:60; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.25); transition:transform .2s; }
.wa-float:hover{ transform:scale(1.06); }

/* Revelação ao rolar */
/* revelação suave a partir de um estado visível */
.reveal{ transition:transform .7s ease; }
.reveal:not(.in){ transform:translateY(10px); }

/* Responsivo */
@media (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .links{ position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0; background:var(--teal-900); padding:8px 24px 20px; transform:translateY(-120%); transition:transform .3s; }
  .links.open{ transform:none; }
  .links a{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:17px; }
  .menu{ display:block; }
  .nav .btn-small{ display:none; }
  .nav{ padding:12px 18px; background:rgba(11,58,64,0.0); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .case, .case.big{ grid-column:span 6; aspect-ratio:4/5; }
  .seg-grid{ grid-template-columns:1fr; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .modal-box{ grid-template-columns:1fr; }
  .hero-media{ grid-template-columns:repeat(2,1fr); }
  .hero-media .c3{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .display{ font-stretch:112%; }
  .section-head h2, .about h2{ font-size:32px; }
  .contact h2{ font-size:40px; }
  .wrap{ padding:0 16px; }
  .svc-grid, .steps{ grid-template-columns:1fr; }
  .case, .case.big{ grid-column:span 12; aspect-ratio:4/4.4; }
  .founders{ grid-template-columns:1fr 1fr; gap:12px; }
  .founders figure{ padding:16px 12px; }
  .founders img{ width:110px; }
  .work, .services, .segments, .about, .method, .contact, .studio{ padding-block:80px; }
  .form{ padding:22px 18px; }
  .contact-list li{ grid-template-columns:1fr; gap:2px; }
  .hero-inner{ padding-bottom:12vh; }
  .hero-media .col div{ flex-basis:38vh; }
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{ max-height:92vh; border-radius:20px 20px 0 0; }
  .modal-body{ padding:28px 20px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Estúdio */
.studio{ background:var(--teal-900); color:#fff; padding-block:110px; }
.studio-head{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:end; margin-bottom:44px; }
.studio-head > *{ min-width:0; }
.studio h2{ font-size:clamp(44px, 7vw, 104px); margin-top:18px; }
.rec{ display:inline-flex; align-items:center; gap:12px; margin:0; font:700 13px/1 var(--body); letter-spacing:0.2em; color:var(--dende-soft); }
.rec i{ width:11px; height:11px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 5px rgba(229,72,77,0.2); animation:blink 1.6s steps(2,start) infinite; }
.rec span{ font-family:"Courier New", monospace; letter-spacing:0.06em; color:var(--teal-300); }
@keyframes blink{ to{ visibility:hidden; } }
.feat{ list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; border-top:1px solid rgba(255,255,255,0.16); padding-top:22px; }
.feat li{ display:flex; gap:12px; align-items:center; font-size:15.5px; color:#fff; }
.feat li::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--dende-soft); flex:none; }
.sets{ display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:repeat(2, 230px); gap:10px; }
.sets figure{ margin:0; position:relative; border-radius:12px; overflow:hidden; background:var(--teal-950); }
.sets figure.big{ grid-row:span 2; }
.sets img{ width:100%; height:100%; object-fit:cover; display:block; }
.sets figcaption{ position:absolute; left:14px; bottom:12px; font:700 12px/1 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:#fff; background:rgba(4,30,33,0.72); padding:8px 11px; border-radius:6px; }
.formats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.formats article{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:24px 24px 26px; min-width:0; }
.formats h3{ font-family:var(--display); font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:20px; margin:0 0 8px; color:#fff; }
.formats p{ margin:0; color:var(--teal-200); font-size:15px; }
@media (max-width:900px){
  .studio-head{ grid-template-columns:1fr; gap:24px; }
  .sets{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .sets figure{ aspect-ratio:4/3; }
  .sets figure.big{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
  .formats{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .feat{ grid-template-columns:1fr; }
  .studio h2{ font-size:44px; }
}