/* Desenvolve Web - vitrine da holding */

/* Fontes servidas pelo próprio site e pré-carregadas no <head>: chegam antes da primeira pintura e o título não troca de fonte na frente do usuário */
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo.woff2) format('woff2')}
@font-face {font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-italic.woff2) format('woff2')}

:root {
    --paper: #f4efe7;
    --card: #ebe4d8;
    --ink: #15130f;
    --ink-soft: #5d564b;
    --line: #d8cfc0;
    --orange: #ff7300;
    --sand: #c0a886;
    --on-ink: #f4efe7;
    --on-ink-soft: #a39a8b;
    --line-ink: #36322b;

    --gutter: 16px;
    --gap: 24px;
    --radius: 20px;
    --section: 88px;

    --display: 'Archivo', system-ui, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
}

@media (min-width: 768px) {
    :root {--gutter: 32px; --section: 120px}
}
@media (min-width: 1200px) {
    :root {--gutter: 48px; --section: 160px}
}

*, *::before, *::after {box-sizing: border-box}
html {-webkit-text-size-adjust: 100%}
[id] {scroll-margin-top: 104px}
@media (prefers-reduced-motion: no-preference) {
    html {scroll-behavior: smooth}
}
body {margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility}
h1, h2, h3, p, ul, figure {margin: 0; padding: 0}
ul {list-style: none}
img {display: block; max-width: 100%; height: auto}
a {color: inherit; text-decoration: none}
::selection {background: var(--orange); color: #fff}
:focus-visible {outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px}

.wrap {width: 100%; max-width: 1376px; margin-inline: auto; padding-inline: var(--gutter)}

em.accent {font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.01em; color: var(--orange)}

/* Rótulo de seção: número + nome sobre uma linha fina */
.label {display: flex; align-items: baseline; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft)}
.label span {color: var(--orange); font-variant-numeric: tabular-nums}

.title {font-size: clamp(40px, 6vw, 88px); font-stretch: 75%; font-weight: 800; line-height: .95; letter-spacing: -.035em}

/* HEADER */
.header {position: sticky; top: 0; z-index: 10; color: #fff; background:
    radial-gradient(circle 260px at 84% -150px, rgba(255,255,255,.16) 99.5%, transparent 100%),
    radial-gradient(circle 180px at 62% 210px, rgba(110,30,0,.18) 99.5%, transparent 100%),
    radial-gradient(circle 120px at 8% 150px, rgba(255,255,255,.10) 99.5%, transparent 100%),
    radial-gradient(60% 220% at 0% 0%, #ff8d24 0%, transparent 70%),
    linear-gradient(100deg, #ff7300 0%, #f06300 45%, #c94f00 100%)}
.header :focus-visible {outline-color: #fff}
.header .wrap {display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px}
.header .logo img {width: 132px}
.nav {display: flex; gap: 28px; font-size: 15px; font-weight: 600}
.nav a {position: relative; padding-block: 6px}
.nav a::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease}
.nav a:hover::after {transform: scaleX(1)}

@media (max-width: 599px) {
    .nav a:not(:last-child) {display: none}
}
@media (min-width: 1200px) {
    .header .wrap {padding-block: 24px}
    .header .logo img {width: 152px}
}

/* HERO */
.hero {padding-block: 72px var(--section)}
.hero .eyebrow {font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft)}
.hero h1 {margin-top: 24px; font-size: clamp(52px, 10.4vw, 156px); font-stretch: 72%; font-weight: 800; line-height: .9; letter-spacing: -.04em}
.hero h1 em.accent {font-size: 1.04em; letter-spacing: -.03em}
.hero .foot {display: grid; gap: 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line)}
.hero .lede {max-width: 30ch; font-size: clamp(20px, 2vw, 26px); line-height: 1.35}
.hero .facts {display: grid; grid-template-columns: repeat(3, auto); gap: 24px; justify-content: start}
.hero .facts dt {font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft)}
.hero .facts dd {margin: 4px 0 0; font-size: 17px; font-weight: 600}

@media (min-width: 900px) {
    .hero {padding-top: 120px}
    .hero .foot {grid-template-columns: 1fr auto; align-items: end; margin-top: 80px}
    .hero .facts {gap: 56px}
}

/* PORTFÓLIO */
.portfolio .head {display: grid; gap: 24px; margin-bottom: 48px}
.portfolio .head .label {grid-column: 1 / -1}
@media (min-width: 900px) {
    .portfolio .head {margin-bottom: 64px}
}

.brands {display: grid; gap: 32px}
@media (min-width: 1024px) {
    .brands {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--gap)}
    .brand--feature {grid-column: 1 / -1}
}

.brand {position: relative; display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease}
a.brand:hover {transform: translateY(-4px)}

/* Cards menores: papel branco com sombra, imagem concêntrica ao card */
.brand:not(.brand--feature) {padding: 12px; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgba(21,19,15,.04), 0 18px 40px -22px rgba(21,19,15,.24)}
a.brand:not(.brand--feature):hover {box-shadow: 0 1px 2px rgba(21,19,15,.04), 0 30px 56px -26px rgba(21,19,15,.34)}
.brand:not(.brand--feature) .meta {padding: 20px 12px 12px}

.brand .media {position: relative}
.brand .meta {display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px}
.brand .num {grid-column: 1 / -1; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--orange); font-variant-numeric: tabular-nums}
.brand .name {margin-top: 12px; font-size: 32px; font-stretch: 75%; font-weight: 800; line-height: 1; letter-spacing: -.03em}
.brand .cat {grid-column: 1; font-size: 15px; color: var(--ink-soft)}
.brand .go {grid-column: 2; grid-row: 2 / span 2; align-self: end; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: background .35s ease, border-color .35s ease, color .35s ease}
.brand .go svg {width: 16px; height: 16px; transition: transform .35s ease}
a.brand:hover .go {background: var(--orange); border-color: var(--orange); color: #fff}
a.brand:hover .go svg {transform: translate(2px, -2px)}

/* Moldura de navegador em volta das capturas */
.browser {overflow: hidden; border-radius: 10px; background: #fff}
.browser .bar {display: flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px; background: #2a2722}
.browser .bar i {width: 9px; height: 9px; border-radius: 50%; background: #48433a}
.browser .bar b {margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 500; color: var(--on-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.browser img {width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.7,.2,1)}
a.brand:hover .browser img {transform: scale(1.025)}

/* Destaque: Ache Concursos */
/* clip-path recorta o card já composto: o fundo escuro não vaza como fio no canto arredondado sob a captura branca */
.brand--feature {clip-path: inset(0 round var(--radius)); color: var(--on-ink); background-color: var(--ink); background-image: linear-gradient(rgba(244,239,231,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(244,239,231,.045) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px}
.brand--feature .media {padding: 0 20px}
.brand--feature .meta {grid-template-columns: 1fr auto; padding: 32px 24px}
.brand--feature .name {font-size: clamp(44px, 6vw, 88px); line-height: .92}
.brand--feature .cat {margin-top: 12px; color: var(--on-ink-soft)}
.brand--feature .desc {grid-column: 1; max-width: 32ch; margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--on-ink-soft)}
.brand--feature .go {grid-row: 4; border-color: var(--line-ink)}
/* Sangra 4px além da borda do card: o recorte esconde a sobra e nenhum arredondamento de subpixel abre fresta */
.brand--feature .browser {margin-bottom: -4px; border-radius: 12px 12px 0 0; background: #2a2722; box-shadow: 0 32px 64px -24px rgba(0,0,0,.6)}
.brand--feature .phone {display: none}

@media (min-width: 1024px) {
    .brand--feature {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; min-height: 480px}
    .brand--feature .meta {grid-template-rows: auto 1fr auto auto auto; align-content: start; padding: 48px 0 48px 48px}
    .brand--feature .name {grid-row: 3; align-self: end}
    .brand--feature .cat {grid-row: 4; margin-top: 12px}
    .brand--feature .desc {grid-row: 5}
    .brand--feature .go {grid-row: 5; width: 56px; height: 56px}
    .brand--feature .media {align-self: end; padding: 48px 0 0 48px}
    .brand--feature .browser {margin-right: -4px; border-radius: 12px 0 0 0}
    .brand--feature .phone {display: block; position: absolute; left: 0; bottom: -64px; width: 168px; overflow: hidden; border: 6px solid #2a2722; border-radius: 28px; background: #2a2722; box-shadow: 0 24px 48px -12px rgba(0,0,0,.6); transition: transform .8s cubic-bezier(.2,.7,.2,1)}
    .brand--feature .phone img {border-radius: 22px}
    a.brand--feature:hover .phone {transform: translateY(-12px)}
}
@media (min-width: 1200px) {
    .brand--feature {gap: 80px; min-height: 640px}
    .brand--feature .meta {padding: 64px 0 64px 64px}
    .brand--feature .media {padding-top: 64px}
    .brand--feature .phone {left: -56px; width: 196px}
}

/* Em breve: PLAIT */
.brand--soon .stage {position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper)}
.brand--soon .stage::before {content: ""; position: absolute; right: -22%; bottom: -42%; width: 72%; aspect-ratio: 1; background: var(--ink); opacity: .06; -webkit-mask: url(../imagens/logo/plait-mark.svg) center / contain no-repeat; mask: url(../imagens/logo/plait-mark.svg) center / contain no-repeat}
.brand--soon .stage img {position: relative; width: 44%; aspect-ratio: auto; object-fit: contain; filter: grayscale(1); opacity: .3; mix-blend-mode: multiply}
.brand--soon .name {color: var(--ink-soft)}
.brand--soon .soon {grid-column: 2; grid-row: 2 / span 2; align-self: end; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft)}

/* QUEM SOMOS */
.about {padding-block: var(--section)}
.about .grid {display: grid; margin-top: 40px}
.about .text {font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; letter-spacing: -.01em}
.about .text + .text {margin-top: 24px; color: var(--ink-soft)}
.team {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); margin-top: 64px}
.team img {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; filter: grayscale(1) contrast(1.05); transition: filter .5s ease}
.team li:hover img {filter: none}
.team .who {display: block; margin-top: 12px; font-size: 17px; font-weight: 600; line-height: 1.3}
.team .role {display: block; font-size: 15px; color: var(--ink-soft)}

@media (min-width: 600px) {
    .team {grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (min-width: 900px) {
    .about .grid {grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); margin-top: 56px}
    .about .body {grid-column: 2}
    .team {grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 80px}
}
@media (min-width: 1200px) {
    .team {grid-template-columns: repeat(6, minmax(0, 1fr))}
}

/* CONTATO + RODAPÉ */
.contact {padding-block: var(--section) 40px; background: var(--ink); color: var(--on-ink)}
.contact .label {border-color: var(--line-ink); color: var(--on-ink-soft)}
.contact .title {margin-top: 40px}
.contact .channels {display: grid; gap: 24px; margin-top: 56px}
.contact .channel {display: block; padding-top: 16px; border-top: 1px solid var(--line-ink)}
.contact .channel dt {font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-soft)}
.contact .channel dd {margin: 8px 0 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.35}
.contact .channel a {background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s ease, color .3s ease}
.contact .channel a:hover {color: var(--orange); background-size: 100% 1px}
.contact .bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--section); padding-top: 32px; border-top: 1px solid var(--line-ink); font-size: 14px; color: var(--on-ink-soft)}
.contact .bottom img {width: 112px}

@media (min-width: 900px) {
    .contact .channels {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 80px}
}

/* Entrada ao rolar: só com JS, e nunca com movimento reduzido */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
    .js [data-reveal].is-in {opacity: 1; transform: none}
}