/* TexLead, herói com o produto (23/10/2026, rodada Família Tex).
   Substitui o herói com a cena de agência gerada por IA (texlead-hero-direcao-20260930.css fica no disco para voltar
   atrás): à direita, a tela de leads da conta de demonstração numa moldura de navegador, com o painel do cliente no
   celular por cima. O tamanho do H1 continua na regra própria da home (section.hero .hero-copy h1). */
.hero{position:relative;overflow:hidden;padding:64px 0 56px;background:var(--navy)}
.hero .wrap{position:relative;width:100%;max-width:var(--maxw);padding:0 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center}
.hero-copy{min-width:0}
.hero-kicker{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ambar)}
.hero-kicker::before{content:"";width:24px;height:2px;flex:none;background:var(--ambar)}
.hero h1{margin:22px 0;font-weight:750;text-wrap:balance}
.hero .lead{max-width:48ch;margin:0 0 28px;font-size:17px;line-height:1.65;color:var(--claro)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn{min-height:52px;padding:0 22px;font-size:15px;border-radius:5px;white-space:nowrap}
.hero .btn svg{flex:none;display:block}
.hero .btn-ghost{border-color:rgba(248,250,252,.5);background:rgba(12,19,34,.3)}
.hero .micro{margin-top:20px;font-size:13px;color:var(--cinza)}
.vitrine{position:relative;min-width:0;margin:0;padding:0 0 30px}
.device-browser{margin:0;border:1px solid var(--linha);border-radius:14px;overflow:hidden;background:var(--navy-800);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.device-browser .barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--navy-700);border-bottom:1px solid var(--linha)}
.device-browser .barra i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(248,250,252,.28)}
.device-browser .barra span{flex:1;min-width:0;max-width:280px;margin-left:10px;height:18px;padding:0 10px;border-radius:9px;background:rgba(12,19,34,.55);color:var(--cinza);font-size:11px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-browser img,.device-phone img{display:block;width:100%;height:auto}
.device-phone{position:absolute;right:-6px;bottom:0;width:25%;min-width:92px;max-width:170px;margin:0;border:5px solid var(--navy-950);border-radius:20px;overflow:hidden;background:var(--navy-950);box-shadow:0 22px 44px -16px rgba(0,0,0,.75)}
.vitrine-legenda{margin-top:12px;font-size:12px;color:var(--cinza)}
/* Telas reais em "Veja por dentro" */
.telas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:1.6rem}
.telas figure{margin:0;border:1px solid var(--linha);border-radius:14px;overflow:hidden;background:var(--navy-800)}
.telas img{display:block;width:100%;height:auto}
.telas figcaption{padding:.9rem 1.1rem 1.1rem;font-size:.9rem;line-height:1.5;color:var(--apoio)}
.telas figcaption b{display:block;color:var(--claro);margin-bottom:.2rem}
@media(max-width:1100px){
 .hero{padding:44px 0 36px}
 .hero-grid{grid-template-columns:1fr;max-width:760px;gap:32px}
 .vitrine{margin-right:10px}
}
@media(max-width:700px){
 .hero .wrap{padding:0 20px}
 .hero-kicker{font-size:12px}
 .hero .lead{font-size:16px;margin-bottom:24px}
 .hero .btn{flex:1 1 100%;min-height:50px}
 .hero .micro{font-size:12px;margin-top:18px}
 .device-browser .barra{height:24px}
 .device-browser .barra span{display:none}
 .device-phone{width:28%;border-width:4px;border-radius:14px}
 .telas{grid-template-columns:1fr}
}
@media(max-width:360px){.hero-kicker{font-size:11px;gap:8px}.hero-kicker::before{width:18px}}
@media(max-height:520px) and (min-width:641px) and (max-width:1100px) and (orientation:landscape){
 .hero{padding:24px 0}
 .hero-grid{grid-template-columns:minmax(0,1fr) 300px;max-width:1260px}
}