/* Ajustes do site do Lucas Harry sobre o site.css (que é gerado a partir das folhas da LMH).
   Aqui fica só o que é próprio do Lucas Harry: marca em texto, foto do Lucas, etiquetas dos produtos e o cartão do Programa. */

/* marca em texto, como no topo das páginas do CRM e do Programa */
.marca { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: var(--branco); }
.marca__nome { font-family: var(--titulo); font-size: 1.6rem; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.marca__nome em { font-style: normal; color: var(--verde); }
.marca__sub { padding-left: 2px; white-space: nowrap; font-size: .5rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: rgba(243,242,237,.72); }
.topo__logo.marca { flex: none; }
.rodape__marca .marca { margin-bottom: 18px; }

/* abertura: a foto do Lucas é vertical; no computador ela fica à direita e se dissolve no escuro */
@media (min-width: 901px) {
  .abre__fundo .hero__foto { left: auto; right: 0; width: min(50vw, 820px); background-position: 50% 18%; }
  .abre__fundo .hero__foto--base {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 18%, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 18%, #000 42%); }
}
@media (max-width: 900px) {
  .abre__fundo .hero__foto { background-position: 50% 16%; }
}

/* apresentação: a moldura leva às soluções (não há vídeo; o anel gira em volta de uma seta) */
a.filme__moldura { display: block; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
a.filme__moldura:hover { border-color: rgba(127,227,214,.55); transform: translateY(-2px); }
.filme__marca { margin-top: 18px; font-size: 1.05rem; letter-spacing: .02em; }
.filme__marca em { font-style: normal; color: var(--verde); }
.filme__botao--seta svg { width: 54%; fill: none; color: var(--branco); }
/* a foto fica à direita da moldura, com o rosto inteiro, e o anel no espaço entre o título e o rosto */
.filme__capa { background: linear-gradient(90deg, var(--preto) 0%, var(--preto) 47%, rgba(5,9,10,.7) 56%, rgba(5,9,10,.1) 80%), url("../img/lucas-preto.jpg") 125% 18% / 62% auto no-repeat, var(--preto); }
.filme__play { left: 52%; }
@media (max-width: 620px) {
  .filme__capa { background-size: auto, 72% auto, auto; background-position: 0 0, 150% 14%, 0 0; }
  .filme__play { left: 62%; width: 104px; }
}

/* as duas soluções: etiqueta que diz a qual produto cada frente pertence */
.bento__tag { margin: 2px 0 -4px; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde) !important; }
.bento__card--programa { border-color: var(--branco); background: var(--branco); }
.bento__card--programa .icone, .bento__card--programa h3, .bento__card--programa p, .bento__card--programa p strong, .bento__card--programa .bento__seta { color: var(--preto); }
.bento__card--programa p { max-width: 560px; }
@media (max-width: 900px) { .bento__card--programa { grid-column: span 2; } }
@media (max-width: 620px) { .bento__card--programa { grid-column: auto; } }

/* quem é o Lucas: foto vertical, rosto no alto */
.quem__foto img { object-position: 50% 24%; }

/* contato: só dois canais (WhatsApp e Instagram) */
.contatos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .contatos--2 { grid-template-columns: 1fr; } }
.atalho .sobretitulo { margin-bottom: -2px; }

/* fotos das páginas internas: rosto sempre no quadro */
.in-media img { object-position: 50% 22%; }

/* revelação da foto no início: a seção é .abre (a regra original só valia para .hero) */
.abre.revelando .hero__foto--revela { opacity: .9; }

/* contato: uma tela só, com a foto, o WhatsApp e o Instagram */
.contato-unico { display: flex; align-items: center; min-height: 100svh; border-bottom: 0; }
.contato-unico > .container { width: 100%; }
.contato-unico__acoes .botao { gap: 10px; }
.contato-unico__icone { width: 20px; height: 20px; flex: none; }
.contato-unico__tel { margin-top: 18px; font-size: .86rem; color: var(--apagado); }
@media (max-width: 620px) { .contato-unico__acoes .botao { width: 100%; } }