/* =========================================================
   LeanCommerce — front-page-home.css
   Seções exclusivas da home (front-page.php), no estilo do
   mockup "Eglence — Sofrendo de Capitalismo" (home.html).
   Usa as variáveis de cor globais de main.css (Customizer).
   ========================================================= */
.eg-home{ overflow-x:hidden; }
.eg-home *{ box-sizing:border-box; }
.eg-home img{ max-width:100%; display:block; }
.eg-home a{ color:inherit; text-decoration:none; }
.eg-home ul{ list-style:none; margin:0; padding:0; }

/* ---------- Revelação suave no scroll ---------- */
.eg-home .fade-up{ opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.eg-home .fade-up.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .eg-home .fade-up{ opacity:1; transform:none; transition:none; }
}

/* ---------- Hero ---------- */
.eg-home .hero{
  position:relative;
  /* 80vh como base (compatibilidade); 80svh (small viewport height) por cima
     quando suportado — svh usa a altura "estável" da tela, que NÃO recalcula
     quando a barra de endereço do navegador mobile some/aparece durante a
     rolagem. É essa recalculagem contínua de 80vh em telas altas que causa o
     "engasgo"/travadinha ao rolar pela hero em celulares; svh elimina isso. */
  min-height:80vh;
  min-height:80svh;
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* Imagem enviada no Customizer: cobre o hero inteiro, sem overlay/textura —
   só a foto. wp_get_attachment_image já gera srcset/sizes, então o navegador
   baixa automaticamente uma versão menor em celular/tablet e a versão maior
   só em telas largas (responsivo de verdade, não é só CSS esticando). */
.eg-home .hero-bg-photo{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.eg-home .hero-bg-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center; margin:0;
}
/* Sem imagem enviada: degradê padrão + textura sutil (identidade do mockup).
   Usa um gradiente repetido em vez de SVG com texto ladrilhado — um SVG com
   texto raster repetido dezenas de vezes numa área de 80vh é um padrão
   conhecido de gargalo de pintura em navegadores mobile, e era outra causa
   do engasgo ao rolar pela hero; o gradiente é resolvido pela GPU sem
   decodificar/renderizar imagem nenhuma. */
.eg-home .hero-bg-overlay{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    45deg,
    rgba(255,214,0,.035) 0,
    rgba(255,214,0,.035) 2px,
    transparent 2px,
    transparent 42px
  );
}
.eg-home .hero-content{ position:relative; z-index:2; text-align:center; padding:40px 20px; max-width:900px; margin:0 auto; }
.eg-home .hero-badge{
  display:inline-block; background:var(--cta); color:#fff;
  font-size:12px; font-weight:900; padding:6px 18px;
  text-transform:uppercase; letter-spacing:3px; margin-bottom:24px;
  transform:rotate(-2deg);
}
.eg-home .hero h1{
  font-size:clamp(48px, 10vw, 120px); line-height:.95; color:var(--brand);
  text-shadow:4px 4px 0 #000, -2px -2px 0 var(--cta);
  margin-bottom:20px; letter-spacing:3px;
}
.eg-home .hero h1 span{ display:block; color:#fff; font-size:.6em; text-shadow:3px 3px 0 #000; }
.eg-home .hero-sub{
  font-size:18px; color:#ccc; max-width:600px; margin:0 auto 36px;
  font-weight:600; line-height:1.6;
}
.eg-home .hero-cta{
  display:inline-block; background:var(--brand); color:#000;
  font-family:var(--font-display); font-size:24px; padding:16px 48px;
  letter-spacing:3px; border:4px solid #000; transition:transform .2s ease, background .2s ease, color .2s ease;
  text-transform:uppercase; position:relative;
}
.eg-home .hero-cta:hover{ background:var(--cta); color:#fff; transform:translate(-3px,-3px); box-shadow:6px 6px 0 #000; }
.eg-home .hero-sticker{
  position:absolute; width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; color:#000;
  text-align:center; line-height:1.1; transform:rotate(15deg); z-index:3;
}
.eg-home .sticker-1{ top:15%; left:5%; background:var(--brand); transform:rotate(-10deg); }
.eg-home .sticker-2{ bottom:20%; right:5%; background:var(--accent); transform:rotate(8deg); }
.eg-home .sticker-3{ top:30%; right:10%; background:var(--cta); color:#fff; transform:rotate(-5deg); }
@media (max-width:600px){
  .eg-home .hero h1{ font-size:48px; }
  .eg-home .hero-sticker{ display:none; }
}

/* ---------- Benefícios ---------- */
.eg-home .benefits-bar{
  background:#000; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:4px solid var(--brand); border-bottom:4px solid var(--brand);
}
.eg-home .benefit-item{ padding:20px; text-align:center; color:#fff; border-right:2px solid #333; }
.eg-home .benefit-item:last-child{ border-right:none; }
.eg-home .benefit-item .benefit-icon{ font-size:28px; margin-bottom:6px; }
.eg-home .benefit-item .benefit-title{ font-size:20px; letter-spacing:2px; color:var(--brand); }
.eg-home .benefit-item .benefit-desc{ font-size:12px; color:#aaa; margin-top:4px; }
@media (max-width:900px){
  .eg-home .benefits-bar{ grid-template-columns:1fr; }
  .eg-home .benefit-item{ border-right:none; border-bottom:2px solid #333; }
  .eg-home .benefit-item:last-child{ border-bottom:none; }
}

/* ---------- Ticker / faixa deslizante ---------- */
.eg-home .ticker-bar{
  background:var(--brand); padding:10px 0; overflow:hidden; white-space:nowrap;
  border-top:3px solid #000; border-bottom:3px solid #000;
}
.eg-home .ticker-content{
  display:inline-block; animation:egTicker 20s linear infinite;
  font-family:var(--font-display); font-size:18px; letter-spacing:4px; color:#000;
}
@keyframes egTicker{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ---------- Manifesto / Paixão ---------- */
.eg-home .passion-section{ padding:80px 24px; text-align:center; background:#fff; position:relative; }
.eg-home .passion-section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg, var(--brand) 0, var(--brand) 30px, var(--cta) 30px, var(--cta) 60px, var(--accent) 60px, var(--accent) 90px, #000 90px, #000 120px);
}
.eg-home .passion-title{ font-size:clamp(40px, 8vw, 90px); line-height:1; margin-bottom:16px; }
.eg-home .passion-title .line2{ color:var(--cta); }
.eg-home .passion-desc{ max-width:650px; margin:0 auto 50px; font-size:16px; color:#555; font-weight:600; line-height:1.7; }
.eg-home .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.eg-home .pillar-card{ padding:30px 24px; border:4px solid #000; text-align:left; transition:transform .2s ease; position:relative; contain:layout style; }
.eg-home .pillar-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 #000; }
.eg-home .pillar-card.yellow{ background:#FFFDE7; border-color:var(--brand); }
.eg-home .pillar-card.green{ background:#E8F5E9; border-color:var(--accent); }
.eg-home .pillar-card.pink{ background:#FCE4EC; border-color:var(--cta); }
.eg-home .pillar-card h3{ font-size:28px; letter-spacing:3px; margin-bottom:12px; }
.eg-home .pillar-card p{ font-size:14px; line-height:1.6; color:#333; }
.eg-home .pillar-icon{
  height:120px; margin-top:16px; display:flex; align-items:center; justify-content:center;
  border:3px solid #000;
}
.eg-home .pillar-icon span{ font-size:40px; color:#000; }
.eg-home .pillar-icon--yellow{ background:var(--brand); }
.eg-home .pillar-icon--green{ background:var(--accent); }
.eg-home .pillar-icon--pink{ background:var(--cta); }
.eg-home .pillar-icon--pink span{ color:#fff; }
@media (max-width:900px){ .eg-home .pillars{ grid-template-columns:1fr; } }

/* ---------- Produtos em destaque ---------- */
.eg-home .products-section{ padding:60px 24px; background:#f5f5f5; }
.eg-home .categories-strip .section-header,
.eg-home .products-section .section-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px; max-width:1200px; margin-left:auto; margin-right:auto;
}
.eg-home .section-title{ font-size:clamp(36px, 6vw, 64px); letter-spacing:3px; line-height:1; }
.eg-home .section-link{
  font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:2px;
  color:var(--cta); border-bottom:3px solid var(--cta); padding-bottom:2px; transition:.2s;
}
.eg-home .section-link:hover{ color:var(--brand); border-color:var(--brand); }
.eg-home .products-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px; max-width:1200px; margin:0 auto;
}
.eg-home .product-card{
  background:#fff; border:4px solid #000; overflow:hidden; transition:transform .2s ease; position:relative;
  contain:layout style;
}
.eg-home .product-card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 #000; }
.eg-home .product-img-wrap{
  position:relative; height:260px; overflow:hidden; background:#eee;
  display:flex; align-items:center; justify-content:center;
}
.eg-home .product-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.eg-home .product-img-wrap .product-placeholder{ font-size:48px; }
.eg-home .product-badge{
  position:absolute; top:10px; left:10px; background:var(--cta); color:#fff;
  font-size:11px; font-weight:900; padding:4px 12px; text-transform:uppercase; letter-spacing:1px; z-index:2;
}
.eg-home .product-info{ padding:16px; }
.eg-home .product-name{
  display:block; font-weight:900; font-size:15px; margin-bottom:8px; line-height:1.3; color:var(--ink);
}
.eg-home .product-name:hover{ color:var(--cta); }
.eg-home .product-price{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-family:var(--font-display); font-size:24px; letter-spacing:1px; }
.eg-home .product-price del{ text-decoration:line-through; color:#999; font-size:14px; font-family:var(--font); order:2; }
.eg-home .product-price ins{ text-decoration:none; color:#000; }
.eg-home .btn-add{
  display:block; width:100%; padding:12px; background:#000; color:var(--brand);
  font-family:var(--font-display); font-size:18px; letter-spacing:3px; border:3px solid #000;
  cursor:pointer; transition:all .2s ease; text-transform:uppercase; text-align:center;
}
.eg-home .btn-add:hover{ background:var(--brand); color:#000; }
@media (max-width:600px){ .eg-home .products-grid{ grid-template-columns:1fr; } }

/* ---------- Categorias ---------- */
.eg-home .categories-strip{ padding:60px 24px; background:#000; color:#fff; }
.eg-home .cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px; max-width:1200px; margin:36px auto 0;
}
.eg-home .cat-card{
  background:#111; border:3px solid #333; padding:24px 16px; text-align:center;
  transition:transform .2s ease, border-color .2s ease; cursor:pointer;
  contain:layout style;
}
.eg-home .cat-card:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:0 8px 0 var(--brand); }
.eg-home .cat-card .cat-icon{ font-size:36px; margin-bottom:10px; }
.eg-home .cat-card .cat-name{ font-size:20px; letter-spacing:2px; color:#fff; }
.eg-home .cat-card .cat-count{ font-size:12px; color:var(--cta); font-weight:700; margin-top:4px; }
@media (max-width:900px){ .eg-home .cat-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } }

/* ---------- Acordeão / declarações ---------- */
.eg-home .statements-section{ padding:60px 24px; background:#fff; }
.eg-home .accordion{ max-width:900px; margin:0 auto; }
.eg-home .accordion-item{ border:4px solid #000; margin-bottom:12px; background:#fff; overflow:hidden; }
.eg-home .accordion-header{
  display:flex; align-items:center; justify-content:space-between; padding:20px 24px;
  cursor:pointer; background:#fff; transition:background .2s ease; user-select:none;
}
.eg-home .accordion-header:hover{ background:#FFFDE7; }
.eg-home .accordion-header h3{
  font-size:26px; letter-spacing:3px; display:flex; align-items:center; gap:12px; margin:0;
  font-family:var(--font-display); font-weight:400;
}
.eg-home .accordion-header h3 .acc-icon{ font-size:22px; }
.eg-home .accordion-arrow{ font-size:28px; font-weight:900; transition:transform .3s ease; color:#000; }
.eg-home .accordion-item.open .accordion-arrow{ transform:rotate(180deg); }
.eg-home .accordion-body{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s; padding:0 24px; }
.eg-home .accordion-item.open .accordion-body{ max-height:300px; padding:0 24px 24px; }
.eg-home .accordion-body p{ margin:0; font-size:15px; line-height:1.7; color:#444; font-weight:500; }

/* ---------- Contagem regressiva / próximo lançamento ---------- */
.eg-home .event-section{
  position:relative; padding:80px 24px; background:linear-gradient(135deg,#1a1a1a,#2d2d2d);
  color:#fff; text-align:center; overflow:hidden;
}
.eg-home .event-section::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,214,0,.03) 10px, rgba(255,214,0,.03) 20px);
}
.eg-home .event-content{ position:relative; z-index:2; }
.eg-home .event-section h2{
  font-size:clamp(40px, 8vw, 80px); color:var(--brand); letter-spacing:4px; line-height:1;
  margin-bottom:12px; text-shadow:3px 3px 0 #000;
}
.eg-home .event-section .event-sub{ font-size:16px; color:#aaa; margin-bottom:40px; font-weight:600; }
.eg-home .countdown{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.eg-home .countdown-box{ width:100px; padding:20px 10px; border:4px solid; text-align:center; }
.eg-home .countdown-box:nth-child(1){ border-color:var(--brand); background:rgba(255,214,0,.1); }
.eg-home .countdown-box:nth-child(2){ border-color:var(--cta); background:rgba(255,60,172,.1); }
.eg-home .countdown-box:nth-child(3){ border-color:var(--accent); background:rgba(0,230,118,.1); }
.eg-home .countdown-box:nth-child(4){ border-color:#fff; background:rgba(255,255,255,.1); }
.eg-home .countdown-num{ font-size:48px; line-height:1; }
.eg-home .countdown-box:nth-child(1) .countdown-num{ color:var(--brand); }
.eg-home .countdown-box:nth-child(2) .countdown-num{ color:var(--cta); }
.eg-home .countdown-box:nth-child(3) .countdown-num{ color:var(--accent); }
.eg-home .countdown-box:nth-child(4) .countdown-num{ color:#fff; }
.eg-home .countdown-label{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#888; margin-top:6px; font-weight:700; }
@media (max-width:600px){
  .eg-home .countdown-box{ width:70px; padding:14px 6px; }
  .eg-home .countdown-num{ font-size:32px; }
}

/* ---------- Reviews (marquee) ---------- */
.eg-home .reviews-section{ padding:60px 24px; background:#FFFDE7; position:relative; }
.eg-home .reviews-section::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--brand) 0, var(--brand) 20px, #000 20px, #000 40px);
}
.eg-home .reviews-track-wrapper{ max-width:1200px; margin:0 auto; overflow:hidden; position:relative; }
.eg-home .reviews-track{ display:flex; gap:20px; animation:egScrollReviews 30s linear infinite; width:max-content; }
@keyframes egScrollReviews{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.eg-home .review-card{ min-width:300px; background:#fff; border:4px solid #000; padding:24px; flex-shrink:0; contain:layout style; }
.eg-home .review-stars{ color:var(--brand); font-size:20px; margin-bottom:12px; letter-spacing:2px; }
.eg-home .review-text{ font-size:15px; font-weight:700; line-height:1.5; color:#222; font-style:italic; }
.eg-home .review-author{ margin-top:12px; font-size:12px; color:var(--cta); font-weight:900; text-transform:uppercase; letter-spacing:1px; }

/* ---------- Newsletter ---------- */
.eg-home .newsletter-section{ padding:80px 24px; background:#000; color:#fff; text-align:center; position:relative; }
.eg-home .newsletter-section h2{ font-size:clamp(40px, 7vw, 72px); letter-spacing:4px; margin-bottom:16px; }
.eg-home .newsletter-section h2 span{ color:var(--cta); }
.eg-home .newsletter-section p{ font-size:16px; color:#aaa; max-width:500px; margin:0 auto 36px; font-weight:600; }
/* Formulário real do Brevo ([sibwp_form id=2]) — markup vem do plugin
   (form#sib_signup_form_2 > .sib_signup_box_inside_2 > p.sib-email-area),
   por isso os seletores abaixo miram nas classes do próprio Brevo. */
.eg-home .newsletter-form{ max-width:500px; margin:0 auto; }
.eg-home .newsletter-form form.sib_signup_form{
  display:flex; align-items:stretch; border:4px solid var(--brand); text-align:left;
  background:#111;
}
.eg-home .newsletter-form .sib_signup_box_inside_2{ flex:1; display:flex; }
.eg-home .newsletter-form p.sib-email-area{
  flex:1; margin:0; display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:10px 20px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#888;
}
.eg-home .newsletter-form input[type="email"].sib-email-area{
  border:none; background:transparent; font-size:15px; font-family:var(--font);
  font-weight:600; color:#fff; outline:none; padding:2px 0 0; width:100%;
}
.eg-home .newsletter-form input[type="email"].sib-email-area::placeholder{ color:#666; }
.eg-home .newsletter-form .newsletter-submit{
  padding:16px 32px; background:var(--brand); color:#000; font-family:var(--font-display);
  font-size:20px; letter-spacing:3px; border:none; cursor:pointer;
  transition:background .2s ease, color .2s ease; white-space:nowrap;
}
.eg-home .newsletter-form .newsletter-submit:hover{ background:var(--cta); color:#fff; }
.eg-home .newsletter-form .sib_msg_disp{ margin-top:12px; font-size:13px; font-weight:700; text-align:center; }
.eg-home .newsletter-form .sib_msg_disp:empty{ display:none; }
.eg-home .newsletter-form p.sib-alert-message{ margin:12px 0 0; font-size:13px; font-weight:700; text-align:left; }
@media (max-width:600px){
  .eg-home .newsletter-form form.sib_signup_form{ flex-direction:column; }
  .eg-home .newsletter-form .newsletter-submit{ padding:14px; }
}

/* ---------- Contato ---------- */
.eg-home .contact-section{ padding:60px 24px; background:#fff; }
.eg-home .contact-section .section-title{ text-align:center; margin-bottom:40px; font-size:clamp(36px, 6vw, 64px); }
.eg-home .contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px;
  max-width:1100px; margin:0 auto;
}
.eg-home .contact-card{ border:4px solid #000; padding:28px 20px; text-align:center; transition:transform .2s ease; contain:layout style; }
.eg-home .contact-card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 #000; }
.eg-home .contact-card .card-icon{ font-size:36px; margin-bottom:12px; }
.eg-home .contact-card h4{ font-size:20px; letter-spacing:3px; margin-bottom:10px; text-transform:uppercase; font-weight:400; }
.eg-home .contact-card p{ font-size:14px; color:#555; line-height:1.6; font-weight:600; margin:0; }
.eg-home .contact-card.pink-card{ background:#FCE4EC; border-color:var(--cta); }
.eg-home .contact-card.green-card{ background:#E8F5E9; border-color:var(--accent); }
.eg-home .contact-card.yellow-card{ background:#FFFDE7; border-color:var(--brand); }
.eg-home .contact-card.dark-card{ background:#111; color:#fff; border-color:#000; }
.eg-home .contact-card.dark-card p{ color:#ccc; }

/* ---------- Responsivo geral ---------- */
@media (max-width:600px){
  .eg-home .contact-grid{ grid-template-columns:1fr; }
}