/* Páginas internas do leobecker.com (checkout e legal): a moldura da landing do aulão
   (style.css e aulao.css: cabeçalho, menu, fundo fixo, vidro, granulado, janela pop-up e
   botões) com uma coluna de leitura de 650 px, texto de 21 px e nada abaixo de 16 px. */
.interna{--copy-size:21px}
/* O fundo da home no estado da abertura (--dawn 1): escuro, com o teal só no pé. Página longa
   rola sobre ele sem que o texto areia passe por cima do areia do gradiente. */
.interna .atmosphere{--dawn:1}
.interna .social a{color:var(--sand)}
/* A barra de rolagem da home (filete teal de 5 px, cursor laranja), aqui a nativa, pintada. */
@media(pointer:fine){
  :root:has(body.interna){scrollbar-width:thin;scrollbar-color:var(--orange) var(--deep-teal)}
  :root:has(body.interna)::-webkit-scrollbar{display:block;width:5px}
  :root:has(body.interna)::-webkit-scrollbar-track{background:var(--deep-teal)}
  :root:has(body.interna)::-webkit-scrollbar-thumb{background:var(--orange)}
}

.interna-main{position:relative;z-index:1;min-height:100svh;padding:max(150px,calc(170 * var(--u))) 24px 150px}
.interna-column{width:100%;max-width:650px;margin:0 auto}
.interna .block-title{font-size:clamp(46px,calc(80 * var(--u)),80px);line-height:1.05}
.interna .block-copy p+p{margin-top:1.2em}
.interna-lead{margin-top:24px}
.interna .event-details{margin:28px 0 0}
.interna .event-details>div{display:flex;flex-wrap:wrap;column-gap:.3em;margin-bottom:6px}
.interna .event-details dt{font-weight:400}
.interna .event-details dd{margin:0;font-weight:800}
.interna[data-view=volta] :is(.interna-lead,.event-details){display:none}
.interna[data-view=volta] .checkout-window.popup{margin-top:36px}
.interna-legal{margin-top:40px;font:500 16px/1.55 var(--body);color:var(--sand)}
.interna-legal a{color:inherit}

/* A janela pop-up da home, aqui em altura livre, com a passagem para o pagamento. */
.interna .checkout-window.popup{position:relative;inset:auto;width:100%;height:auto;margin-top:48px;overflow:visible;background:var(--ink)}
.checkout-body{padding:34px 30px 38px;font:500 18px/1.5 var(--body);color:var(--sand)}
.checkout-body h2{margin:0 0 18px;font:800 34px/1.1 var(--tall);letter-spacing:-.01em;color:var(--sand);outline:none}
.checkout-body p{margin:0 0 18px}
.checkout-body strong{font-weight:800}
.interna .checkout-body .button{display:flex;width:100%;min-height:54px;font-size:19px;border:0;cursor:pointer}

/* Páginas legais: a mesma coluna, seções com título e listas. */
.legal-doc{margin-top:36px}
.legal-doc h2{margin:56px 0 18px;font:800 34px/1.1 var(--tall);letter-spacing:-.01em;color:var(--sand)}
.legal-doc h3{margin:32px 0 12px;font:800 21px/1.3 var(--body);color:var(--sand)}
.legal-doc p,.legal-doc li{font:500 var(--copy-size)/1.55 var(--body);color:var(--sand)}
.legal-doc p{margin:0 0 1.1em}
.legal-doc ul{margin:0 0 1.1em;padding-left:1.1em}
.legal-doc li{margin-bottom:.45em}
.legal-doc a{color:inherit}
.legal-doc strong{font-weight:800}
.legal-meta{margin-top:20px;font:500 16px/1.5 var(--body);color:var(--sand)}
.legal-nav{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:28px;padding:0;list-style:none;font:700 17px/1.3 var(--label)}
.legal-nav a{color:var(--sand)}
.legal-nav a[aria-current=page]{color:var(--orange);text-decoration:none}

@media(max-width:900px),(max-aspect-ratio:1/1){
  .interna{--copy-size:18px}
  .interna-main{padding:110px 20px 120px}
  .interna .block-title{font-size:clamp(42px,11vw,58px)}
  .interna .checkout-window.popup{margin-top:36px}
  .checkout-body{padding:26px 18px 30px}
  .checkout-body h2,.legal-doc h2{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.interna *{scroll-behavior:auto}}
/* O único campo do checkout: o e-mail, quando o Mercado Pago não o devolve na volta. */
.checkout-body form{margin-top:8px}
.field{display:block;margin-bottom:22px}
.field>span{display:block;margin-bottom:8px;font:700 16px/1.25 var(--label);color:var(--sand)}
.field input{display:block;width:100%;padding:13px 14px;border:2px solid var(--dot);border-radius:0;background:var(--night);color:var(--sand);font:500 18px/1.3 var(--body);-webkit-appearance:none;appearance:none}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.field select{display:block;width:100%;padding:13px 10px;border:2px solid var(--dot);border-radius:0;background:var(--night);color:var(--sand);font:500 18px/1.3 var(--body)}
.field-error{display:block;min-height:1.35em;margin-top:6px;font:500 16px/1.35 var(--body);color:#ff8a65}

/* A passagem para o Mercado Pago mostra somente a janela central. */
.checkout-page[data-view=ida] :is(.chrome,.block-title,.interna-legal){display:none}
.checkout-page[data-view=ida] .interna-main{display:grid;place-items:center;min-height:100svh;padding:24px 20px}
.checkout-page[data-view=ida] .checkout-window.popup{margin-top:0}
.checkout-page[data-view=ida] .checkout-body p:last-child{margin-bottom:0}