/* ==========================================================================
   Live & Learn Brazil — /brazilian-portuguese-and-communication/
   Tokens de styles.css; rótulos, títulos e botões de due-diligence.css; os
   campos do formulário de full-advisory.css. Aqui só o que é próprio desta
   página: a abertura com o formulário ao lado, as duas dobras ilustradas,
   as telas do aplicativo e os três cursos.

   A ilustração a lápis entra sem papel: o PNG já traz o fundo transparente e
   o esvanecimento do lado que encosta no texto, por isso o desenho se dilui
   na cor do bloco antes de chegar à caixa de texto.
   ========================================================================== */

.bp { --coluna-form: 560px; }

/* --------------------------------------------------------------------------
   1. Abertura (ardósia): texto à esquerda, formulário à direita
   -------------------------------------------------------------------------- */
.bp-abertura { background: var(--ardosia); padding: 56px var(--margem) 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.bp-abertura-texto { display: flex; flex-direction: column; gap: 22px; }
.bp-migalhas { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; letter-spacing: 0.12em; color: var(--texto-sobre-ardosia); }
.bp-migalhas a { color: var(--texto-sobre-ardosia); padding-bottom: 2px; border-bottom: 1px solid var(--champagne); transition: color 0.25s ease; }
.bp-migalhas a:hover { color: var(--champagne); }
.bp-h1 { font-size: 62px; line-height: 1.04; color: var(--gelo); }
.bp-lead { font-size: 21px; line-height: 1.6; color: var(--texto-sobre-ardosia); }

.bp-numeros { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 14px; margin-top: 6px; border-top: 2px solid var(--champagne); }
.bp-numero { display: flex; flex-direction: column; gap: 4px; }
.bp-numero b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 42px; line-height: 1; color: var(--champagne); }
.bp-numero span { font-size: 15px; line-height: 1.4; color: var(--texto-sobre-ardosia); }

/* --------------------------------------------------------------------------
   2. Convite: o botão que leva à página de contato
   -------------------------------------------------------------------------- */
.bp-convite { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 30px 32px 32px; background: var(--gelo); }
.bp-convite-texto { font-size: 17px; line-height: 1.6; color: var(--grafite); }
.bp-convite-nota { font-size: 15px; line-height: 1.5; color: var(--texto-secundario); }
.bp-fecho .bp-convite { background: var(--azul-gelo); }

/* Rótulos de seção desta página: amora, um pouco maiores que o corpo */
.bp-rotulo { font-size: 22px; line-height: 1.3; color: var(--amora); }
.bp-fecho .bp-rotulo { font-size: 24px; }

/* --------------------------------------------------------------------------
   3. As duas dobras ilustradas
   -------------------------------------------------------------------------- */
.bp-dobra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.bp-dobra--conversa { background: var(--gelo); }
.bp-dobra--placas { background: var(--champagne-claro); }
.bp-ilustracao { width: 100%; height: auto; display: block; }
.bp-dobra-texto { display: flex; flex-direction: column; gap: 20px; padding: 56px var(--margem) 60px 48px; }
.bp-dobra--placas .bp-dobra-texto { padding: 56px 48px 60px var(--margem); }
.bp-dobra-texto h2 { font-size: 40px; line-height: 1.08; color: var(--grafite); }
.bp-dobra-texto p:not(.bp-rotulo) { font-size: 19px; line-height: 1.65; color: var(--grafite); }
.bp-dobra-texto .bp-grande { font-size: 22px; }
.bp-citacao { font-size: 20px; line-height: 1.55; padding-left: 22px; border-left: 2px solid var(--champagne); }

/* --------------------------------------------------------------------------
   4. Materiais e cursos
   -------------------------------------------------------------------------- */
.bp-secao { padding: 64px var(--margem) 68px; display: flex; flex-direction: column; gap: 26px; }
.bp-secao--azul { background: var(--azul-gelo); }
.bp-secao--gelo { background: var(--gelo); }
.bp-cabeca { display: flex; flex-direction: column; gap: 14px; }
.bp-cabeca h2 { font-size: 40px; line-height: 1.08; color: var(--grafite); }
.bp-cabeca-dupla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.bp-cabeca-dupla p { font-size: 17px; line-height: 1.6; color: var(--texto-secundario); }

.bp-materiais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.bp-material { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 32px; background: var(--gelo); border-top: 2px solid var(--amora); }
.bp-material h3 { margin: 0; font-size: 30px; line-height: 1.15; color: var(--grafite); }
.bp-material p { font-size: 18px; line-height: 1.6; color: var(--grafite); }

.bp-cursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.bp-curso { display: flex; flex-direction: column; gap: 14px; padding: 32px 30px 34px; background: var(--azul-gelo); }
.bp-curso--destaque { background: var(--champagne-claro); }
.bp-curso h3 { margin: 0; font-size: 30px; line-height: 1.1; color: var(--grafite); }
.bp-curso-meta { font-family: var(--fonte-menu); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 17px; line-height: 1.35; color: var(--amora); padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.bp-curso-lead { font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--grafite); }
.bp-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bp-itens li { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--grafite); }
.bp-itens li::before { content: ""; flex: 0 0 12px; height: 2px; background: var(--champagne); margin-top: 12px; }
.bp-itens b { font-weight: 600; }

/* --------------------------------------------------------------------------
   5. O aplicativo (ardósia): três telas
   -------------------------------------------------------------------------- */
.bp-app { background: var(--ardosia); padding: 56px var(--margem) 64px; display: flex; flex-direction: column; gap: 30px; }
.bp-app .bp-cabeca h2 { color: var(--gelo); }
.bp-app .bp-cabeca-dupla p { color: var(--texto-sobre-ardosia); }
.bp-app .dd-rotulo--secao { color: var(--champagne); }
.bp-telas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; padding: 0 44px; }
.bp-tela { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.bp-tela img { width: 100%; height: auto; display: block; border: 1px solid rgba(220, 199, 146, 0.45); }
.bp-tela figcaption { font-family: var(--fonte-menu); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 17px; color: var(--champagne); }

/* --------------------------------------------------------------------------
   6. Fecho com o formulário completo
   -------------------------------------------------------------------------- */
.bp-fecho { background: var(--gelo); padding: 64px var(--margem) 72px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.bp-fecho-texto { display: flex; flex-direction: column; gap: 18px; }
.bp-fecho-texto h2 { font-size: 44px; line-height: 1.06; color: var(--grafite); }
.bp-fecho-texto p:not(.bp-rotulo) { font-size: 22px; line-height: 1.6; color: var(--grafite); }
.bp-whatsapp { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; margin-top: 4px; border-top: 2px solid var(--champagne); }
.bp-whatsapp p { font-size: 22px; line-height: 1.5; color: var(--texto-secundario); }
.bp-whatsapp a { align-self: flex-start; font-family: var(--fonte-idiomas); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; padding-bottom: 3px; border-bottom: 2px solid var(--champagne); color: var(--grafite); transition: color 0.25s ease; }
.bp-whatsapp a:hover { color: var(--amora); }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bp-convite { max-width: 620px; }
  .bp-abertura { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px var(--margem) 52px; }
  .bp-h1 { font-size: 48px; }
  .bp-lead { font-size: 19px; }

  .bp-dobra { grid-template-columns: minmax(0, 1fr); }
  /* No tablet a ilustração passa a ser uma faixa acima do texto */
  .bp-dobra-texto, .bp-dobra--placas .bp-dobra-texto { padding: 36px var(--margem) 48px; }
  .bp-dobra--placas .bp-ilustracao { order: -1; }
  .bp-dobra-texto h2 { font-size: 34px; }

  .bp-secao, .bp-app { padding: 48px var(--margem) 52px; }
  .bp-cabeca h2 { font-size: 34px; }
  .bp-cabeca-dupla { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .bp-materiais, .bp-cursos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bp-telas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; }

  .bp-fecho { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px var(--margem) 56px; }
  .bp-fecho-texto h2 { font-size: 36px; }
  .bp-fecho-texto p, .bp-whatsapp p, .bp-whatsapp a { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .bp-convite { padding: 24px 22px 26px; }
  .bp-convite .dd-btn { width: 100%; text-align: center; white-space: normal; }
  .bp-rotulo, .bp-fecho .bp-rotulo { font-size: 20px; }
  .bp-abertura { padding: 32px var(--margem) 40px; gap: 28px; }
  .bp-migalhas { font-size: 14px; }
  .bp-h1 { font-size: 36px; }
  .bp-lead { font-size: 18px; }
  .bp-numeros { gap: 20px 28px; }
  .bp-numero b { font-size: 34px; }


  .bp-dobra-texto, .bp-dobra--placas .bp-dobra-texto { padding: 28px var(--margem) 36px; gap: 16px; }
  .bp-dobra-texto h2 { font-size: 28px; }
  .bp-dobra-texto p { font-size: 17px; }
  .bp-dobra-texto .bp-grande { font-size: 18px; }
  .bp-citacao { font-size: 18px; padding-left: 16px; }

  .bp-secao, .bp-app { padding: 36px var(--margem) 40px; gap: 20px; }
  .bp-cabeca h2 { font-size: 27px; }
  .bp-material, .bp-curso { padding: 24px 22px 26px; }
  .bp-material h3 { font-size: 23px; }
  .bp-curso h3 { font-size: 25px; }
  .bp-curso-meta { font-size: 15px; }

  /* As telas do aplicativo viram um carrossel que se arrasta com o dedo */
  .bp-telas { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .bp-tela { flex: 0 0 72%; scroll-snap-align: center; }

  .bp-fecho { padding: 36px var(--margem) 44px; gap: 26px; }
  .bp-fecho-texto h2 { font-size: 28px; }
  .bp-fecho-texto p, .bp-whatsapp p, .bp-whatsapp a { font-size: 17px; }
}