/* ========================================================================== ARQUIVO: site_lideranca_cristo_v2/css/responsive.css ONDE ESTÁ INTERLIGADO: Carregado no da index.html DESCRIÇÃO: Regras de responsividade para telas grandes (Desktop) e telas pequenas (Tablets e Celulares). ========================================================================== */ /* -------------------------------------------------------------------------- 0. REDE DE SEGURANÇA GLOBAL CONTRA OVERFLOW HORIZONTAL Isso não é a causa raiz do bug, mas garante que nenhum elemento deslocado (ex: right:-8vw) consiga abrir uma barra de rolagem horizontal na página, em qualquer largura de tela. -------------------------------------------------------------------------- */ html, body { max-width: 100%; overflow-x: hidden; } /* -------------------------------------------------------------------------- 1. REGRA PARA DESKTOP / MONITORES GRANDES (Telas acima de 1050px) -------------------------------------------------------------------------- */ @media (min-width: 1051px) { /* Garante que o container do topo (Hero) exiba texto de um lado e o livro do outro */ .hero { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 80vh; position: relative; overflow: hidden; } /* Área onde o mockup do livro fica localizado */ .hero-book-area { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; right: 0 !important; top: auto !important; width: 45% !important; /* Ocupa 45% da largura da tela no desktop */ max-width: 500px !important; /* Não deixa o livro ficar gigante demais */ height: auto !important; margin: 0 auto !important; } /* Garante que a imagem 3D do livro (hero-mockup-livro.png) apareça perfeitamente */ .book-3d, .hero-book-area img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; } } /* -------------------------------------------------------------------------- 2. REGRA PARA NOTEBOOKS / TABLETS DEITADOS (Telas até 1050px) -------------------------------------------------------------------------- */ @media(max-width:1050px){ /* FIX: esta faixa (821px–1050px) desloca .hero-book-area com right:-8vw mais abaixo, mas o .hero nunca ganhava overflow:hidden aqui (só existia no bloco desktop min-width:1051px). Isso deixava o livro "vazar" para fora do container e gerar rolagem horizontal. */ .hero{overflow:hidden;position:relative} .main-nav{gap:18px} .hero{padding-left:5vw} .hero-copy{margin-left:0} .hero-book-area{right:-8vw} .statement,.problem,.video-section,.principles,.legacy-copy,.tasting,.audience,.author,.buy,.seo-section,.compass-section{padding-left:6vw;padding-right:6vw} } /* -------------------------------------------------------------------------- 3. REGRA PARA TABLETS E CELULARES GRANDES (Telas até 820px) -------------------------------------------------------------------------- */ @media(max-width:820px){ .site-header{height:76px;padding:0 5vw} .site-header.scrolled{height:64px} .main-nav{position:fixed;z-index:2001;inset:0;background:rgba(8,8,7,.97);backdrop-filter:blur(22px);display:flex;flex-direction:column;justify-content:center;gap:28px;font-size:14px;opacity:0;visibility:hidden;transform:translateY(-15px);transition:.45s} .main-nav.open{opacity:1;visibility:visible;transform:none} .menu-toggle{display:block} .audio-control{right:14px;bottom:14px} .hero{min-height:900px;display:block;padding:125px 7vw 70px} .hero-copy{width:100%} h1{font-size:clamp(43px,11vw,73px);line-height:.93;margin:25px 0} .hero-text{font-size:14px} .hero-actions{align-items:flex-start;flex-direction:column;gap:18px} .hero-book-area{position:relative;right:auto;top:auto;transform:none;width:100%;height:380px;margin-top:10px} .book-3d{width:min(330px,72vw)} .hero-scroll{left:7vw} .statement{display:block;padding-top:12vh;padding-bottom:12vh} .statement-copy{margin-top:55px} .statement h2,.video-copy h2,.principles-head h2,.legacy h2,.tasting h2,.audience-head h2,.author-copy h2,.buy-head h2,.seo-inner h2,.compass-copy h2{font-size:clamp(42px,11vw,65px)} .problem{display:flex;flex-direction:column;gap:50px;padding-bottom:12vh} .problem-photo{width:100%} /* Bússola: 1 coluna só (texto em cima, bússola embaixo), igual ao padrão das outras seções com grid de 2 colunas nesta faixa de tela */ .compass-section{grid-template-columns:1fr;gap:50px;padding-top:12vh;padding-bottom:12vh} .compass-wrap{margin-top:10px} .video-section{display:block;padding-top:12vh;padding-bottom:12vh} .video-copy{margin:7vh 0} .video-frame{aspect-ratio:16/10} .principles{padding-top:12vh;padding-bottom:12vh} .principles-grid{grid-template-columns:1fr} .principle,.principle:nth-child(even){padding:35px 0;border-right:0} .legacy{grid-template-columns:1fr} .legacy-copy{padding-top:12vh;padding-bottom:12vh} .prayer-photo{min-height:620px} .tasting{grid-template-columns:1fr;gap:60px;padding-top:12vh;padding-bottom:12vh} .pdf-card{justify-self:center} .audience{padding-top:12vh;padding-bottom:12vh} .audience-grid{grid-template-columns:1fr} .audience-card,.audience-card:nth-child(2),.audience-card:last-child{padding:35px 0;border-right:0} .author{grid-template-columns:1fr;gap:35px;padding-top:12vh;padding-bottom:12vh} .author-photo{min-height:650px} .author-copy h2{margin-bottom:35px} .buy{padding-top:12vh;padding-bottom:12vh} .buy-grid{grid-template-columns:1fr} .store-card{min-height:410px} .seo-section{padding-top:12vh;padding-bottom:12vh} .footer-top{grid-template-columns:1fr;gap:35px} .footer-top nav{justify-self:start;text-align:left} .footer-bottom{flex-direction:column} .cursor-glow{display:none} } /* -------------------------------------------------------------------------- 4. REGRA PARA CELULARES PEQUENOS (Telas até 520px) -------------------------------------------------------------------------- */ @media(max-width:520px){ .brand{font-size:8px} .brand em{font-size:10px} .brand b{font-size:17px} .hero{min-height:860px;padding-top:115px} .hero-tags{margin-top:35px} .hero-book-area{height:330px} .book-caption{bottom:0} .hero-scroll{bottom:18px;font-size:7px} .statement,.problem,.video-section,.principles,.legacy-copy,.tasting,.audience,.author,.buy,.seo-section,.compass-section{padding-left:7vw;padding-right:7vw} .compass-e,.compass-w{font-size:7px} .animated-card h3{font-size:27px} .principle h3{font-size:34px} .author-photo{min-height:540px} .author-stats b{font-size:24px} .author-stats span{font-size:7px} .store-card{padding:30px} .store-card h3{font-size:40px} .audio-control strong{display:none} .audio-control button{padding:11px 13px} .footer{padding-left:7vw;padding-right:7vw} }