/* =========================================================
   GUSTAVO BITENCOURT — gustavobitencourt.art.br
   ========================================================= */
:root{
  --preto:#141210;
  --vermelho:#E63329;
  --azul:#1A3FA8;
  --papel:#EFEAE0;
  --papel-med:#E3DCCF;
  --cinza:#DDD8D0;

  --titulo:"Ultra",Georgia,serif;
  --texto:"Lora",Georgia,serif;
  --dados:"Courier Prime","Courier New",monospace;

  --larg:1120px;
  --gap:clamp(20px,2.4vw,36px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--texto);
  font-size:15px;
  line-height:1.72;
  color:var(--preto);
  background:var(--papel);
  background-image:url("../img/texturas/home_impressa.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-blend-mode:multiply;
  -webkit-font-smoothing:antialiased;
}
body.p-bio{background-image:url("../img/texturas/papel_rosado.jpg")}
body.p-parcerias{background-image:url("../img/texturas/parede_clara.jpg")}
body.p-direcao{background-image:url("../img/texturas/pagina_impressa.jpg")}
body.p-drag{background-image:url("../img/texturas/papel_rosado.jpg")}
body.p-criticas{background-image:url("../img/texturas/parede_clara.jpg")}
body.p-design{background-image:url("../img/texturas/tijolos_verde.jpg")}
body.p-contato{background-image:url("../img/texturas/home_impressa.jpg")}

.wrap{max-width:var(--larg);margin:0 auto;padding:0 26px}
@media(max-width:760px){.wrap{padding:0 20px}}
.secao{padding:var(--gap) 0}

/* ---------- MENU ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--preto);
}
.nav .wrap{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,2.6vw,34px);padding-top:15px;padding-bottom:15px}
.nav > .wrap > ul{display:flex;gap:clamp(16px,2.6vw,34px);list-style:none;flex-wrap:wrap;position:relative}
.nav > .wrap > ul > li{position:relative}
.nav > .wrap > ul > li > a{
  font-family:var(--titulo);font-size:12px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  text-decoration:none;padding:5px 0;display:inline-block;border:none;
}
.nav > .wrap > ul > li > a:hover{color:var(--vermelho)}

.nav ul.sub{
  position:absolute !important;top:100%;left:-18px;min-width:262px;
  background:var(--papel);
  box-shadow:5px 6px 14px rgba(20,18,16,.18);
  padding:13px 0;margin:0;list-style:none;
  display:flex;flex-direction:column;gap:0;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:120;
}
.nav li:hover > .sub,.nav li:focus-within > .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav ul.sub li{width:100%;position:static}
.nav ul.sub a{
  display:block;padding:6px 22px;
  font-family:var(--texto);font-size:14px;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.45;
  color:var(--preto);text-decoration:none;
}
.nav ul.sub a:hover{background:var(--papel-med);color:var(--vermelho)}
@media(max-width:860px){
  .nav ul.sub a{color:#fff}
  .nav ul.sub{display:none}
  .nav li:hover > .sub,.nav li:focus-within > .sub{display:none}
}

/* ---------- TIPOGRAFIA ---------- */
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.06;letter-spacing:-.005em;color:var(--preto)}
h1{font-size:clamp(30px,4.8vw,52px)}
h2{font-size:clamp(22px,3.4vw,38px);margin-bottom:14px}
h3{font-size:clamp(16px,1.9vw,21px);margin-bottom:7px}

p{margin-bottom:1.15em;max-width:66ch}

a{color:var(--vermelho);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.05em;text-decoration:none;border:none}
a:hover{text-decoration:underline}
p a,li a{font-size:inherit;text-transform:none;letter-spacing:0}
.destaque{color:var(--azul);font-weight:700}

.dados{font-family:var(--dados);font-size:14px;line-height:1.65;
  letter-spacing:.04em;text-transform:uppercase;color:var(--preto);margin-bottom:16px}
.ficha{font-family:var(--dados);font-size:14px;line-height:1.8;
  color:var(--preto);max-width:74ch;margin-top:16px}
.credito{font-family:var(--dados);font-size:14px;color:var(--preto);margin-top:10px}

/* ---------- HOME ---------- */
.cabecalho{
  background:var(--preto);
  background-image:url("../img/texturas/rasgo_topo.png");
  background-size:100% auto;
  background-position:top center;
  background-repeat:no-repeat;
  padding:clamp(26px,3.4vw,48px) 0 0;
  position:relative;
  min-height:23.5vw;
}
@media(max-width:820px){.cabecalho{min-height:26vw}}
.cabecalho .wrap{position:relative;z-index:2;display:flex;justify-content:center;
  padding-bottom:0}

.home-nome{position:relative;z-index:5;margin-bottom:-13%;
  transform:translateX(-7%)}
@media(max-width:820px){.home-nome{transform:none;margin-bottom:-11%}}
.home-nome{width:100%}
.home-nome img{width:80%;max-width:576px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(3px 4px 6px rgba(20,18,16,.22))}

.faixa-texto{padding:clamp(22px,3vw,40px) 0;padding-top:1%}
@media(max-width:820px){.faixa-texto{padding-top:9%}}
.faixa-texto .wrap{max-width:760px}
.faixa-texto p{font-size:15px;max-width:100%}

/* ---------- OBRAS ---------- */
.obra{padding:clamp(16px,2vw,28px) 0}
.obra-cab{margin-bottom:22px}

.figs{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);margin:16px 0}
.figs img{width:100%;height:auto;display:block}
.par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px)}
.par img{width:100%;height:auto;display:block}
figure{margin:0}
figcaption{font-family:var(--dados);font-size:14px;color:var(--preto);margin-top:10px}

/* ---------- BOXES E CITAÇÕES ---------- */
.box{background:var(--papel-med);padding:clamp(24px,3vw,36px);margin:36px 0;
  box-shadow:3px 4px 10px rgba(20,18,16,.14);transform:rotate(-.5deg);max-width:62ch}
.box p:last-child{margin-bottom:0}

blockquote{background:var(--papel-med);border-left:5px solid var(--vermelho);
  padding:clamp(22px,2.8vw,32px);margin:36px 0;max-width:64ch;
  transform:rotate(.4deg);box-shadow:3px 4px 10px rgba(20,18,16,.12)}
blockquote p{font-size:18px;line-height:1.6;font-style:italic;margin-bottom:0}
blockquote cite{display:block;margin-top:14px;font-style:normal;
  font-family:var(--dados);font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--preto)}

/* ---------- EMBEDS ---------- */
.embed{position:relative;width:100%;padding-bottom:56.25%;height:0;margin:34px 0;
  box-shadow:4px 5px 12px rgba(20,18,16,.16)}
.embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.embed-spotify{margin:34px 0;box-shadow:4px 5px 12px rgba(20,18,16,.16)}
.embed-spotify iframe{width:100%;border:0;display:block}

/* ---------- LISTAS ---------- */
.links{list-style:none;margin:20px 0}
.links li{margin-bottom:10px;font-family:var(--dados);font-size:14px;line-height:1.6}
.links li::before{content:"▸ ";color:var(--vermelho)}

.lista-simples{list-style:none;max-width:74ch}
.lista-simples li{padding:10px 0;display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.lista-simples .ano{font-family:var(--dados);font-size:14px;color:var(--vermelho);
  min-width:82px;letter-spacing:.04em;font-weight:700}

/* ---------- CRÍTICAS ---------- */
.grupo-critica{margin-bottom:24px}
.grupo-critica h3{font-family:var(--titulo);font-size:clamp(15px,1.7vw,19px);
  letter-spacing:0;text-transform:none;color:var(--preto);margin-bottom:12px;font-weight:400}
.item-critica{margin-bottom:16px;max-width:74ch}
.item-critica .veic{font-family:var(--dados);font-size:14px;color:var(--preto);
  letter-spacing:.04em;display:block;margin-top:2px}

/* ---------- DESIGN ---------- */
.galeria{display:flex;flex-direction:column;gap:16px;margin:16px 0}
.galeria img{width:100%;height:auto;display:block;box-shadow:3px 4px 12px rgba(20,18,16,.14)}

/* ---------- BOTÃO E FORM ---------- */
.botao{display:inline-block;background:var(--vermelho);color:var(--papel);
  font-family:var(--dados);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:16px 32px;text-decoration:none;border:none;
  box-shadow:4px 5px 10px rgba(20,18,16,.28);transform:rotate(-.7deg);margin-top:22px}
.botao:hover{transform:rotate(0) translate(-2px,-2px)}

.form{max-width:580px;margin-top:30px}
.form label{display:block;font-family:var(--dados);font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--preto);
  margin-bottom:7px;margin-top:22px;font-weight:700}
.form input,.form textarea{width:100%;padding:14px;font-family:var(--texto);
  font-size:16px;background:var(--papel-med);border:none;color:var(--preto)}
.form input:focus,.form textarea:focus{outline:2px solid var(--vermelho)}
.form textarea{min-height:160px;resize:vertical}

.contatos{list-style:none;font-family:var(--dados);font-size:14px;line-height:2.1}
.contatos .rot{color:var(--preto);display:inline-block;min-width:104px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

@media(max-width:720px){
  .par{grid-template-columns:1fr}
  .box,blockquote{transform:none}
  .cabecalho .wrap{justify-content:center;text-align:center}
  }
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ---------- foto/vídeo ao lado do texto ---------- */
.lado{display:grid;grid-template-columns:1fr minmax(220px,290px);
  gap:clamp(16px,2.2vw,28px);align-items:start}
.lado.esq{grid-template-columns:minmax(230px,300px) 1fr}
.lado .media{margin:0}
.lado .media img{height:260px;width:auto;max-width:100%;display:block;
  box-shadow:2px 3px 10px rgba(20,18,16,.16)}
.lado .media{display:flex;flex-direction:column;align-items:flex-start}
.lado:not(.esq) .media{align-items:flex-end}
.lado:not(.esq) > div:first-child{text-align:right}
.lado:not(.esq) > div:first-child p{margin-left:auto}
.lado.esq > div:last-child{text-align:left}
.lado > div:first-child p{max-width:none}
.lado .media figcaption{font-family:var(--dados);font-size:14px;margin-top:9px}
.lado .media img.retrato{height:340px;width:auto;max-width:100%}
@media(max-width:760px){
  .lado,.lado.esq{grid-template-columns:1fr}
  .lado .media{max-width:340px}
}

/* imagens nunca ampliadas */
.figs img,.lado .media img,.galeria img{max-width:100%;height:auto}

/* ---------- vídeo menor ---------- */
.embed{width:650px;max-width:100%;padding-bottom:0;height:auto;margin:16px 0}
.embed iframe{position:static;width:100%;aspect-ratio:16/9;height:auto;display:block}
.embed-spotify{max-width:400px;margin:0}
.embed-spotify iframe{width:100%;height:232px}

/* ---------- carrossel (só na Design) ---------- */
.carrossel{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  padding:4px 0 14px;margin:14px 0;
  scrollbar-width:thin;scrollbar-color:var(--vermelho) rgba(20,18,16,.12)}
.carrossel img{height:clamp(200px,26vw,320px);width:auto;max-width:none;
  flex:0 0 auto;display:block;box-shadow:2px 3px 10px rgba(20,18,16,.16)}
.carrossel::-webkit-scrollbar{height:9px}
.carrossel::-webkit-scrollbar-track{background:rgba(20,18,16,.10)}
.carrossel::-webkit-scrollbar-thumb{background:var(--vermelho)}

/* ---------- citações menores ---------- */
blockquote{padding:clamp(14px,1.8vw,20px);margin:16px 0;max-width:56ch}
blockquote p{font-size:15px;line-height:1.6}
blockquote cite{margin-top:11px}

/* ---------- formulário menor ---------- */
.form{max-width:440px}
.form label{margin-top:14px;margin-bottom:5px}
.form input,.form textarea{padding:10px;font-size:15px}
.form textarea{min-height:110px}


/* ---------- 16: zoom nas imagens de design ---------- */
.carrossel img{cursor:zoom-in;transition:transform .18s ease}
.carrossel img:hover{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;background:rgba(20,18,16,.94);z-index:900;
  display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;box-shadow:0 6px 40px rgba(0,0,0,.5)}
.lightbox .fechar{position:absolute;top:16px;right:22px;color:#fff;
  font-family:var(--dados);font-size:26px;cursor:pointer;line-height:1}

/* ---------- 19: home texto branco sobre preto ---------- */
.faixa-texto{background:var(--preto)}
.faixa-texto p{color:#F2EFE9}
.faixa-texto .lado .media figcaption{color:#C9C3B8}


/* ---------- 3: menu sanduíche ---------- */
.hamburguer{display:none;background:none;border:none;cursor:pointer;padding:8px;
  font-family:var(--titulo);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
@media(max-width:860px){
  .hamburguer{display:block}
  .nav .wrap{justify-content:flex-start;padding-top:10px;padding-bottom:10px}
  .nav > .wrap > ul{display:none;width:100%;flex-direction:column;gap:0;margin-top:8px}
  .nav.aberto > .wrap > ul{display:flex}
  .nav > .wrap > ul > li{width:100%;border-top:1px solid rgba(255,255,255,.16)}
  .nav > .wrap > ul > li > a{padding:11px 0;width:100%;font-size:13px}
  .nav ul.sub{display:none;position:static !important;opacity:1;visibility:visible;
    transform:none;box-shadow:none;background:rgba(255,255,255,.07);padding:4px 0;min-width:0}
  .nav li.expandido > ul.sub{display:flex}
  .nav ul.sub a{padding:8px 16px;font-size:13px}
}


/* ---------- box preto de contatos ---------- */
.box-contato{
  background:var(--preto);
  color:#fff;
  padding:clamp(20px,2.6vw,30px);
  margin-top:32px;
  max-width:420px;
}
.box-contato h3{color:#fff;margin-bottom:12px}
.box-contato .contatos{color:#fff}
.box-contato .contatos .rot{color:#B9B2A6}
.box-contato a{color:var(--vermelho)}
.box-contato a:hover{color:#fff}

/* ---------- 3: rótulos do formulário com fundo branco ---------- */
.form label{
  background:#fff;
  display:inline-block;
  padding:3px 9px;
  margin-bottom:6px;
}

/* ---------- 9/10: críticas com bullet e mais respiro ---------- */
.grupo-critica{margin-bottom:48px}
.grupo-critica h3::before{content:"• ";color:var(--preto)}

/* ---------- vídeo sempre fora da coluna lateral ---------- */
.lado .media .embed{width:650px;max-width:100%}


/* ---------- foto de perfil na home ---------- */
.faixa-texto .lado{align-items:center}
.faixa-texto .lado .media{overflow:visible;padding:0 4%}
.faixa-texto .lado .media img{height:auto;width:100%}

@media(max-width:820px){
  .faixa-texto .lado{grid-template-columns:1fr;gap:34px}
  .faixa-texto .lado > div:first-child{text-align:center}
  .faixa-texto .lado .media{align-items:center;max-width:300px;margin:0 auto;padding:0 8%}
  }