/* DESAFIO SUPERCASO · OUT26 (gratuito, quarta 21/10 às 15h, no Zoom) · captura · rodada 4 «base Hotmart, cores da casa» (ver ../identidade/).
   Organização do desktop (12/10, 10h40, Leo: «No desktop a experiência do usuário não está legal, pegue como referência as páginas da hotmart»):
   molde da «Vender mais na Black» da Hotmart: faixa de qualificação no topo, herói de uma dobra inteira em duas colunas,
   texto direto no preto à esquerda (lockup, headline com a frase-chave no acento, promessa, botão, nota) e foto grande colada
   na direita com as cantoneiras, o «ao vivo» e os chips «+» (molde da «Missão 10 em 30»). O card em branco-areia fica no pop-up do formulário.
   Cores da casa no lugar das deles: preto ink-deep, branco-areia do mural (--wall-bg), vermelho de ação do Desafio como acento. */
:root{
  --bk:#0C0B0B;--bk-2:#161616;
  --areia:#F6F3EE;--areia-2:#EFEDE0;--areia-line:#DEDAC3;
  --ink:#0B0202;--ink-72:rgba(11,2,2,.72);--ink-55:rgba(11,2,2,.55);
  --wt:#F6F3EE;--tx:rgba(246,243,238,.74);--tx-2:rgba(246,243,238,.6);--ln:rgba(246,243,238,.12);--ln-2:rgba(246,243,238,.24);
  --acento:#D3111A;--acento-2:#B00D15;
  --faixa-h:38px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.captura{background:var(--bk)}

/* ---------- faixa de topo (a faixa laranja da Hotmart, em vermelho) ---------- */
.faixa{display:flex;justify-content:center;align-items:center;gap:14px;min-height:var(--faixa-h);padding:8px 16px;background:var(--acento);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- herói: uma dobra inteira, texto à esquerda e foto à direita ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(460px,44vw,760px);grid-template-areas:"texto midia";min-height:max(640px,calc(100vh - var(--faixa-h)));background:var(--bk);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(246,243,238,.06) 0 1px,transparent 1px 88px),repeating-linear-gradient(180deg,rgba(246,243,238,.06) 0 1px,transparent 1px 88px);-webkit-mask-image:radial-gradient(ellipse at 28% 45%,#000 0,rgba(0,0,0,.5) 45%,transparent 75%);mask-image:radial-gradient(ellipse at 28% 45%,#000 0,rgba(0,0,0,.5) 45%,transparent 75%)}

/* coluna do texto (a coluna da esquerda da «Vender mais na Black») */
.hero__texto{grid-area:texto;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:44px 40px 56px max(40px,calc((100vw - var(--wrap)) / 2))}
.hero__logo{display:block;width:230px;height:auto}
.hero__headline{margin:28px 0 0;max-width:660px;font-family:var(--font-display);font-weight:900;font-size:clamp(56px,6.6vw,100px);line-height:.92;letter-spacing:.005em;text-transform:uppercase;color:var(--wt)}
.hero__destaque{position:relative;display:inline-block;padding:0 .04em;color:var(--acento)}
.hero__marcador{position:absolute;left:-2%;bottom:-16%;width:104%;height:26%;color:var(--acento);pointer-events:none;opacity:.95}
.hero__sub{margin:22px 0 0;max-width:560px;font-size:18px;line-height:1.55;color:var(--tx)}
.hero__oferta{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;max-width:560px;font-size:16px;line-height:1.45;color:var(--wt)}
.hero__oferta b{flex:0 0 auto;color:var(--acento);font-family:var(--font-mono);font-weight:700;font-size:17px;line-height:1.35}
.hero__cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:62px;margin:30px 0 0;padding:0 36px;border:0;border-radius:10px;background:var(--acento);box-shadow:0 12px 30px rgba(211,17,26,.3);color:#fff;font-family:var(--font-body);font-weight:700;font-size:18px;letter-spacing:-.01em;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.hero__cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.hero__nota{margin:14px 0 0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}

/* coluna da foto (a foto colada na direita da «Vender mais na Black», com a mira e os chips da «Missão 10 em 30») */
.hero__midia{grid-area:midia;position:relative;z-index:1;min-height:100%}
.hero__foto{position:absolute;inset:0;background:var(--bk) url("../assets/img/ana-luiza-restaurante.jpg") center top/cover no-repeat;filter:contrast(1.05) saturate(.92) brightness(.92)}
.hero__foto::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--bk) 0,rgba(12,11,11,.6) 70px,rgba(12,11,11,0) 230px),linear-gradient(to top,var(--bk) 0,rgba(12,11,11,0) 170px),linear-gradient(to bottom,rgba(12,11,11,.5) 0,rgba(12,11,11,0) 150px)}
.hero__mira{position:absolute;left:72px;right:56px;top:56px;bottom:76px;z-index:1;pointer-events:none}
.hero__mira i{position:absolute;width:26px;height:26px;border:2px solid var(--wt)}
.hero__mira i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.hero__mira i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.hero__mira i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.hero__mira i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.hero__aovivo{position:absolute;left:14px;top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--wt)}
.hero__aovivo b{width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 3px rgba(211,17,26,.25)}
.hero__chips{position:absolute;z-index:2;left:92px;bottom:104px;display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 170px);margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:6px;background:var(--areia);font-family:var(--font-mono);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.chip b{color:var(--acento);font-weight:700;font-size:13px;line-height:1}

/* ---------- formulário (vive no pop-up) ---------- */
.form{margin:0;max-width:none}
.form__input{display:block;width:100%;height:46px;margin:0 0 8px;padding:0 16px;border:1.5px solid var(--areia-line);border-radius:10px;background:#fff;color:var(--ink);font:400 15.5px/1 var(--font-body);text-align:center;outline:none;transition:border-color .12s ease,box-shadow .12s ease}
.form__input::placeholder{color:var(--ink-55);opacity:1}
.form__input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,2,2,.08)}
.form__input.is-invalido{border-color:var(--acento)}
.form__botao{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:56px;margin:2px 0 0;border:0;border-radius:10px;background:var(--acento);box-shadow:0 12px 30px rgba(211,17,26,.3);color:#fff;font-family:var(--font-body);font-weight:700;font-size:17px;letter-spacing:-.01em;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.form__botao:hover{transform:translateY(-1px);filter:brightness(1.06)}
.form__botao span{text-transform:none}
.form__erro{margin:10px 0 0;font-size:13px;color:var(--acento)}

/* ---------- pop-up do formulário (card em branco-areia; padrão do pré-form da landing e da captura do Side Hustle Summit) ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__fundo{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
.modal__caixa{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow:auto;background:var(--areia);border-radius:18px;padding:30px 32px 26px;text-align:center;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modal-entra .18s ease-out}
@keyframes modal-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal__fechar{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink-55);font-size:28px;line-height:1;cursor:pointer}
.modal__fechar:hover{background:rgba(11,2,2,.06);color:var(--ink)}
.modal__logo{width:160px;height:auto;margin:0 auto}
.modal__titulo{margin:16px 0 0;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.modal__sub{margin:6px 0 16px;font-size:14px;color:var(--ink-72)}
.modal__lgpd{margin:18px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-55)}
.modal__lgpd a{color:var(--ink-72);text-decoration:underline}
body.modal-aberto{overflow:hidden}

/* ---------- telas médias (810 a 1259): mesmas duas colunas, foto mais estreita ---------- */
@media (max-width:1259.98px){
  .hero{grid-template-columns:minmax(0,1fr) clamp(380px,42vw,560px)}
  .hero__texto{padding:40px 32px 48px 40px}
  .hero__logo{width:200px}
  .hero__sub{font-size:17px}
  .hero__mira{left:40px;right:32px;top:40px;bottom:60px}
  .hero__chips{left:56px;bottom:84px;max-width:calc(100% - 110px)}
}

/* ---------- celular (até 809): faixa de foto no topo (lockup e chips sobre ela), texto em coluna no preto ---------- */
@media (max-width:809.98px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero::before{display:none}
  .hero__midia{order:0;height:330px;min-height:0}
  .hero__foto{background:var(--bk) url("../assets/img/ana-luiza-restaurante.jpg") 0% 14%/150% auto no-repeat}
  .hero__foto::before{background:linear-gradient(180deg,rgba(12,11,11,.2) 0%,rgba(12,11,11,.45) 55%,var(--bk) 100%)}
  .hero__mira{display:none}
  .hero__chips{left:24px;right:24px;top:auto;bottom:20px;max-width:none}
  .hero__texto{order:1;position:static;padding:26px 24px 48px;align-items:stretch}
  .hero__logo{position:absolute;left:24px;top:26px;width:190px;z-index:3}
  .hero__headline{margin:0;max-width:none;font-size:48px}
  .hero__sub{margin-top:14px;max-width:none;font-size:16.5px}
  .hero__oferta{margin-top:14px;max-width:none;font-size:15.5px}
  .hero__cta{display:flex;width:100%;height:62px;margin-top:24px;padding:0 20px}
  .hero__nota{margin-top:12px}
  .faixa{font-size:9.5px;letter-spacing:.12em;padding:8px 12px;text-align:center;flex-wrap:wrap;gap:8px}
  .form__input{height:54px;font-size:17px;margin-bottom:12px}
  .form__botao{height:60px;font-size:18px}
  .modal{padding:0;align-items:flex-end}
  .modal__caixa{max-width:none;max-height:92vh;border-radius:18px 18px 0 0;padding:26px 22px 28px;animation:modal-sobe .2s ease-out}
  @keyframes modal-sobe{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:479.98px){
  .hero__midia{height:290px}
  .hero__logo{width:170px;left:20px;top:20px}
  .hero__chips{left:20px;right:20px;bottom:16px}
  .chip{font-size:10px;padding:7px 10px}
  .hero__texto{padding:22px 20px 44px}
  .hero__headline{font-size:42px}
  .hero__sub{font-size:16px}
  .hero__cta{height:58px;font-size:17px}
}

/* ---------- entrada do herói por carga (12/10, 17h40) ---------- */
html.js [data-anim-carga]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 120ms + .1s)}
html.js [data-anim-carga].is-visto{opacity:1;transform:none}
html.js .hero__mira{transform:none}
html.js .hero__mira i{transform:scale(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
html.js .hero__mira.is-visto i{transform:none}
html.js .hero__mira.is-visto i:nth-child(2){transition-delay:.08s}
html.js .hero__mira.is-visto i:nth-child(3){transition-delay:.16s}
html.js .hero__mira.is-visto i:nth-child(4){transition-delay:.24s}
html.js .hero__chips{transform:none}
html.js .hero__chips .chip{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 110ms + .9s)}
html.js .hero__chips.is-visto .chip{opacity:1;transform:none}
.hero__aovivo b{animation:aovivo 1.6s ease-in-out infinite}
@keyframes aovivo{0%,100%{box-shadow:0 0 0 3px rgba(211,17,26,.25)}50%{box-shadow:0 0 0 7px rgba(211,17,26,.08)}}
@media (prefers-reduced-motion:reduce){html.js [data-anim-carga],html.js .hero__mira i,html.js .hero__chips .chip{opacity:1;transform:none;transition:none}.hero__aovivo b{animation:none}}

.hero__oferta strong{font-weight:700;color:#fff}