/* Página /fazenda (teste): foto em tela cheia na entrada, com a promessa e o botão
   de inscrição por cima. Pensada primeiro para o celular (navegador do Instagram). */

.capa{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:#0d1912;overflow:hidden;isolation:isolate}
/* a imagem foi feita na vertical: aparece inteira na largura da tela, sem corte,
   para mostrar a Jessica e o produtor; o texto fica sobre a lavoura, embaixo */
.capa-foto{position:absolute;top:0;left:0;width:100%;height:auto;z-index:-2}
/* o <picture> (foto vertical no celular, horizontal no desktop) não ocupa lugar no layout da capa */
.capa>picture{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none}
/* escurece o topo (marca) e funde a base da foto no verde escuro do fundo */
.capa::after{content:"";position:absolute;top:0;left:0;right:0;height:150vw;z-index:-1;background:
  linear-gradient(180deg,rgba(10,20,14,.5) 0%,rgba(10,20,14,0) 13%,rgba(10,20,14,0) 50%,rgba(13,25,18,.7) 68%,rgba(13,25,18,.95) 86%,#0d1912 100%)}

.capa-topo{padding:18px 20px 0}
.capa-marca{display:inline-flex;align-items:center;gap:11px;font:21px var(--serif);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.capa-marca small{display:block;font:7px var(--sans);letter-spacing:2px;margin-top:4px;opacity:.85}
.capa-marca .monogram{border-color:rgba(255,255,255,.55);width:40px;height:40px;font-size:24px}

.capa-texto{padding:0 20px max(22px,env(safe-area-inset-bottom));max-width:560px}
.capa-selo{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 11px;border-radius:30px}
.capa-selo span{width:6px;height:6px;border-radius:50%;background:#b8d39a}
.capa h1{font:400 clamp(32px,9.2vw,44px)/1.05 var(--serif);letter-spacing:-1.2px;margin:14px 0 12px;max-width:none;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.capa-sub{font-size:15px;line-height:1.55;color:#e7ece4;max-width:470px}
.capa-data{display:flex;align-items:center;gap:14px;margin:18px 0 16px;font-size:12px;line-height:1.5;color:#d6ddd3}
.capa-data strong{display:flex;flex-direction:column;align-items:center;font:400 34px/1 var(--serif);color:#fff;padding-right:14px;border-right:1px solid rgba(255,255,255,.3)}
.capa-data strong small{font:700 9px var(--sans);letter-spacing:1.6px;margin-top:4px}
.capa .inscricao{max-width:none}
.capa .botao-inscricao{background:#f6f1e6;color:#14231b;border-color:#f6f1e6;font-size:15px;min-height:58px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.capa .botao-inscricao:hover{background:#fff}
.capa .botao-inscricao:focus-visible{outline:3px solid #b8d39a;outline-offset:3px}
.capa .form-note{color:#d6ddd3;font-size:12px}
.capa .form-note span{background:#b8d39a}

/* telas baixas (navegador do Instagram tira ~180px): esconde o texto de apoio */
@media (max-height:720px) and (max-width:899px){
  .capa-sub{display:none}
  .capa h1{font-size:clamp(30px,8.6vw,38px);margin-bottom:6px}
  .capa-data{margin:12px 0}
}

/* computador: foto à direita, texto à esquerda sobre verde escuro */
@media (min-width:900px){
  .capa{min-height:min(100vh,900px);justify-content:center;background:#14231b}
  /* foto inteira, na altura da capa, encostada à direita; a borda esquerda some no verde */
  .capa-foto{left:auto;right:0;width:auto;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%);mask-image:linear-gradient(90deg,transparent 0,#000 7%)}
  .capa::after{display:none}
  .capa-topo{position:absolute;top:0;left:0;padding:30px 48px}
  .capa-texto{padding:110px 48px 60px;max-width:620px}
  .capa h1{font-size:56px;letter-spacing:-2px}
  .capa-sub{font-size:17px}
  .capa .inscricao{max-width:430px}
}
/* Telas grandes: foto horizontal encostada à direita. A Jessica está no centro da foto,
   então a foto não cobre a largura toda: a borda esquerda dela (bandeira e produtor) some
   no verde, onde fica o texto, e a Jessica aparece à direita do título. */
@media (min-width:1280px){
  .capa{min-height:clamp(600px,45vw,860px)}
  .capa-foto{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 20%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 20%,#000 40%)}
  .capa-topo{padding:30px 48px 0 max(48px,calc((100vw - 1440px) / 2 + 48px))}
  .capa-texto{padding:96px 48px 56px max(48px,calc((100vw - 1440px) / 2 + 48px));max-width:none}
  .capa .capa-texto>*{max-width:520px}
  .capa h1{font-size:54px}
}