/* Site completo do Pedro: mesma parede, mesmos objetos da página de links, com espaço de site no computador. */

/* menu: faixa fina que acompanha a rolagem */
.menu{position:sticky;top:0;z-index:30;display:flex;gap:2px;margin:0 -16px;padding:0 10px;overflow-x:auto;scrollbar-width:none;background:rgba(9,30,22,.9);border-top:1px solid rgba(246,239,221,.14);border-bottom:1px solid rgba(0,0,0,.5);box-shadow:0 10px 18px -12px rgba(0,0,0,.8)}
.menu::-webkit-scrollbar{display:none}
.menu button,.menu a{position:relative;flex:none;display:grid;place-items:center;min-height:48px;padding:0 13px;font-family:var(--it);font-size:19px;letter-spacing:.07em;color:rgba(246,239,221,.82);white-space:nowrap;transition:color .15s ease-out}
.menu button::after,.menu a::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:2px;background:var(--tomate);scale:0 1;transform-origin:0 50%;transition:scale .2s ease-out}
@media (hover:hover){.menu button:hover,.menu a:hover{color:#fff}.menu button:hover::after,.menu a:hover::after{scale:1 1}}
.menu button:active,.menu a:active{color:#fff}
.menu a{margin-left:auto;color:var(--ouro)}

/* pares: lado a lado no computador, um embaixo do outro no celular */
.par{display:grid;gap:0}

/* a história: folha datilografada presa na parede */
.carta{position:relative;padding:26px 22px 24px;color:#231c15;border-radius:3px;transform:rotate(.7deg);background:var(--grao),linear-gradient(180deg,#f8f1df,#eadfc6);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--pousa)}
.carta::before{content:"";position:absolute;left:50%;top:-11px;width:92px;height:26px;margin-left:-46px;transform:rotate(-2deg);background:rgba(231,214,170,.82);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.carta .rot{color:var(--tomate)}
.carta h2{margin-top:6px;font-family:var(--it);font-weight:400;font-size:38px;line-height:.95;letter-spacing:.03em;text-wrap:balance}
.carta p{margin-top:12px;font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.42;color:#3d3327;text-wrap:pretty}
.carta .assina{display:block;margin-top:16px;font-family:var(--it);font-size:30px;letter-spacing:.06em;color:var(--esmalte);transform:rotate(-3deg);transform-origin:0 50%}

/* para marcas: cardápio do que dá para fazer */
.kit{position:relative;padding:24px 20px 22px;color:var(--creme);border-radius:4px;background:var(--grao),radial-gradient(120% 90% at 50% 0,#16264d,#101b36 65%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--pousa);outline:1px solid rgba(227,194,124,.5);outline-offset:-7px}
.kit .rot{color:var(--ouro)}
.kit h2{margin-top:6px;font-family:var(--it);font-weight:400;font-size:34px;line-height:.98;letter-spacing:.03em;text-wrap:balance}
.kit ul{list-style:none;margin-top:14px}
.kit li{padding:11px 0;border-top:1px dashed rgba(246,239,221,.28)}
.kit li b{display:block;font-family:var(--it);font-weight:400;font-size:22px;letter-spacing:.05em;line-height:1.05;color:#fff}
.kit li span{display:block;margin-top:2px;font-size:14.5px;line-height:1.35;color:rgba(246,239,221,.78)}
.kit .pe{margin-top:6px;padding-top:12px;border-top:1px dashed rgba(246,239,221,.28);font-family:'Newsreader',Georgia,serif;font-size:17px;line-height:1.38;color:rgba(246,239,221,.9)}
.kit .kbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:14px;border-radius:4px;background:var(--ouro);color:#2a1d05;font-weight:800;font-size:15.5px;box-shadow:0 3px 0 #8a6a2a;transition:scale .15s ease-out}
.kit .kbtn:active{scale:.96}

/* ---------- computador ---------- */
@media (min-width:900px){
  .site .coluna{max-width:1120px;padding:0 32px 72px}
  .site .hero{height:700px;margin:0 -32px}
  .site .hero .paris{top:64px;font-size:clamp(150px,23vw,290px)}
  .site .hero .torre,.site .hero .brilho{top:10px;width:470px;margin-left:-235px}
  .site .hero .placa{left:50%;right:auto;width:460px;margin-left:-230px;bottom:26px}
  .menu{margin:0 -32px;padding:0 26px;justify-content:center;gap:6px}
  .menu button,.menu a{padding:0 20px;font-size:21px}
  .menu button::after,.menu a::after{left:20px;right:20px}
  .menu a{margin-left:18px}

  .par{grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:64px}
  .par>*{margin-top:0!important;min-width:0}
  .site .secao{margin-top:64px}
  .par .secao{margin-top:0}
  #historia{grid-template-columns:.86fr 1fr}
  .carta{padding:36px 34px 32px}
  .carta h2{font-size:52px}
  .carta p{font-size:19.5px}
  .kit{padding:32px 30px 28px}
  .kit h2{font-size:42px}

  /* vídeos: três cartazes grandes lado a lado, sem rolar */
  .site .videos{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:26px;align-items:center;overflow:visible;margin:0;padding:10px 0 0}
  .site .vid{width:auto}
  .site .vid .info b{font-size:40px}
  .site .vid .info span{font-size:17px}

  .site #ebook,.site .rua{max-width:560px;margin-left:auto;margin-right:auto}
  .site #ebook{margin-top:80px}
}