/*
Theme Name: Barbosa Net Professional
Theme URI: https://barbosanet.com.br
Author: Rodrigo + ChatGPT
Author URI: https://barbosanet.com.br
Description: Tema profissional leve para Barbosa Net Telecom (homepage one-page).
Version: 1.0.0
Text Domain: barbosanet
*/

/* === Barbosa Net - Estilo principal === */
/* Escopo para evitar conflito de estilos no WordPress */
.bn-site {
  --bn-orange:#ff6a00;
  --bn-blue:#0059b3;
  --text:#0b1020;
  --muted:#6b7280;
  --bg:#f7f8fb;
  --card:#ffffff;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* LINKS E ELEMENTOS BÁSICOS */
.bn-site a { color:inherit; text-decoration:none; }
.bn-site img { max-width:100%; display:block; }
.bn-site strong { font-weight:700; }

/* CONTAINERS E NAV */
.bn-site .container { max-width:1180px; margin:0 auto; padding:0 20px; }
.bn-site .bn-header { position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.bn-site .nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
.bn-site .brand { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--bn-blue); letter-spacing:.3px; }
.bn-site .brand img { height:36px; width:auto; }
.bn-site .menu { display:flex; gap:22px; align-items:center; }
.bn-site .menu a { font-weight:600; color:#1f2937; }

/* BOTÕES */
.bn-site .cta {
  background:linear-gradient(90deg,var(--bn-orange),#ff9a3d);
  color:#fff; padding:12px 18px; border-radius:12px; font-weight:700;
  box-shadow:0 6px 18px rgba(255,106,0,.25);
}
.bn-site .ghost { border:1px solid #e5e7eb; background:#fff; padding:10px 16px; border-radius:12px; font-weight:700; }

/* HERO */
.bn-site .hero { display:grid; grid-template-columns: 11fr 9fr; gap:28px; align-items:center; padding:56px 0; }
.bn-site .badge { display:inline-flex; align-items:center; gap:10px; background:rgba(0,89,179,.07); border:1px solid rgba(0,89,179,.18); color:var(--bn-blue); padding:8px 12px; border-radius:999px; font-weight:600; }
.bn-site .headline { font-size:48px; line-height:1.05; margin:14px 0 12px; font-weight:800; letter-spacing:-.5px; }
.bn-site .hero p { font-size:18px; color:#3d4451; margin:0 0 22px; }
.bn-site .kpis { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }
.bn-site .pill { background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:10px 14px; font-weight:600; }
.bn-site .hero-card { background:linear-gradient(180deg,#fff,#f8fafc); border:1px solid #e5e7eb; border-radius:20px; padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.06); }
.bn-site .grid { display:grid; gap:20px; }

/* SEÇÕES */
.bn-site .section { padding:56px 0; }
.bn-site .section h2 { font-size:34px; margin:0 0 10px; }
.bn-site .section p.lead { color:#475569; margin:0 0 26px; }

/* PLANOS */
.bn-site .plans { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.bn-site .card {
  background:var(--card); border:1px solid #e5e7eb; border-radius:20px; padding:22px;
  position:relative; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.05); width:320px; max-width:100%;
}
.bn-site .card .ribbon { position:absolute; top:14px; right:-36px; background:var(--bn-blue); color:#fff; padding:6px 50px; transform:rotate(15deg); font-size:12px; font-weight:700; }
.bn-site .speed { font-size:44px; font-weight:800; color:var(--bn-blue); }
.bn-site .features { margin:14px 0 16px; }
.bn-site .features li { list-style:none; margin:8px 0; color:#374151; }
.bn-site .price { font-size:28px; font-weight:800; }
.bn-site .small { color:#6b7280; font-size:12px; }

/* EMPRESAS */
.bn-site .biz { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:18px; }
.bn-site .biz .box { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; }

/* COBERTURA */
.bn-site .coverage { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.bn-site .map { background:#fff; border:1px dashed #cbd5e1; border-radius:16px; min-height:260px; display:flex; align-items:center; justify-content:center; color:#64748b; }

/* APP */
.bn-site .app { display:grid; grid-template-columns: 12fr 8fr; gap:18px; align-items:center; }

/* CONTATO */
.bn-site .contact { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.bn-site .contact .box { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; }

/* RODAPÉ */
.bn-site footer { background:#0b1020; color:#cbd5e1; padding:38px 0; margin-top:40px; }
.bn-site footer a { color:#fff; opacity:.9; }
.bn-site .badges { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.bn-site .badges img { height:28px; filter:grayscale(0); opacity:.95; }

/* RESPONSIVO */
@media (max-width:1120px){ .bn-site .biz { grid-template-columns: 1fr 1fr; } }
@media (max-width:980px){
  .bn-site .hero, .bn-site .coverage, .bn-site .app, .bn-site .contact { grid-template-columns: 1fr; }
}

/* === Ajustes para tema WordPress === */
.entry-content .bn-site { margin:0; padding:0; }
.entry-content .bn-site .container { max-width:1180px; }
.bn-site section { scroll-margin-top:90px; }
.entry-content .bn-site p { margin:0 0 1rem; }


/* === Ajustes solicitados: centralizar conteúdos dos planos === */
.bn-site .card { text-align:center; }
.bn-site .features { padding-left:0; }
.bn-site .features li { text-align:center; }



/* === v5 updates: responsiveness, hero nowrap, fixed header, plan alignment === */
.bn-site .nowrap { white-space: nowrap; }

/* Make header sticky with subtle shadow on scroll */
.bn-site .bn-header { position: sticky; top: 0; z-index: 999; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* Plans: uniform height and vertical alignment */
.bn-site .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; justify-items: center; }
.bn-site .card { width: 100%; max-width: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.bn-site .card .price { margin-top: auto; }
.bn-site .card .features { padding-left: 0; }
.bn-site .card .features li { text-align: left; }

/* Improve nav/menu wrapping on small screens */
@media (max-width: 980px){
  .bn-site .nav { flex-wrap: wrap; gap: 10px; height: auto; padding: 10px 0; }
  .bn-site .menu { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .bn-site .menu a { display: block; text-align: center; padding: 10px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; }
  .bn-site .menu .cta { grid-column: span 2 / span 2; }
}

/* Mobile layout: single-column sections and full-width plan cards */
@media (max-width: 760px){
  .bn-site .hero { grid-template-columns: 1fr; }
  .bn-site .plans { grid-template-columns: 1fr; }
  .bn-site .card { max-width: 100%; }
  .bn-site .coverage, .bn-site .app, .bn-site .contact { grid-template-columns: 1fr; }
  .bn-site .headline { font-size: 38px; }
  .bn-site .badge { font-size: 14px; }
}



/* === v6: alinhamento preciso dos cards + responsividade reforçada === */

/* Grid de planos mais robusto */
.bn-site .plans { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(280px, 1fr)); 
  gap: 22px; 
  align-items: stretch;
}

/* Cards com alturas iguais e rodapé alinhado */
.bn-site .card { 
  display:flex; 
  flex-direction:column; 
  justify-content:flex-start; 
  height:100%; 
}
.bn-site .card .features { flex:1 1 auto; padding-left:0; }
.bn-site .card .price { margin-top:auto; }
.bn-site .card > .small { margin-top:6px; }
.bn-site .card > div:last-child { margin-top:12px; } /* container do botão */

/* Ajuste tipográfico e alinhamento interno */
.bn-site .card .speed { line-height:1; }
.bn-site .card .price { line-height:1.1; }

/* Hover sutil */
.bn-site .card:hover { transform: translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.08); transition:.2s ease; }

/* Menu: melhor quebra no mobile */
@media (max-width: 1024px){
  .bn-site .menu { flex-wrap: wrap; row-gap: 8px; }
}

/* Mobile: uma coluna e textos mais confortáveis */
@media (max-width: 780px){
  .bn-site .plans { grid-template-columns: 1fr; }
  .bn-site .headline { font-size: 34px; }
  .bn-site .hero p { font-size:16px; }
  .bn-site .menu { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .bn-site .menu a { text-align:center; }
}

/* Celulares pequenos */
@media (max-width: 420px){
  .bn-site .menu { grid-template-columns:1fr; }
  .bn-site .badge { font-size:13px; }
  .bn-site .headline { font-size: 30px; }
}



/* === v7: header não fixo no mobile + menu compacto + planos alinhados === */

/* Header sticky apenas no desktop */
@media (max-width: 1024px){
  .bn-site .bn-header { position: static; box-shadow: none; }
}

/* Menu mobile como "chips" em linha com rolagem horizontal,
   para não empurrar o conteúdo pra baixo */
@media (max-width: 980px){
  .bn-site .menu {
    display: flex !important;
    overflow-x: auto;
    gap: 10px;
    width: 100%;
    padding: 6px 4px;
    scrollbar-width: none;
  }
  .bn-site .menu::-webkit-scrollbar{ display:none; }
  .bn-site .menu a{
    flex: 0 0 auto;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:10px 14px;
    background:#fff;
    font-weight:600;
    white-space:nowrap;
  }
  .bn-site .menu .cta{ background:linear-gradient(90deg,var(--bn-orange),#ff9a3d); color:#fff; border:none; }
  .bn-site .menu .ghost{ border-color:#e5e7eb; }
}

/* Espaçamentos mais curtos no hero e cards no mobile */
@media (max-width: 780px){
  .bn-site .hero{ padding:24px 0; }
  .bn-site .card{ padding:18px; }
  .bn-site .price{ font-size: 26px; }
}

/* Planos: forçar alinhamento consistente do conteúdo em qualquer largura */
.bn-site .card{
  display:flex;
  flex-direction:column;
}
.bn-site .card .features{ flex:1 1 auto; }
.bn-site .card .price{ margin-top:auto; }
.bn-site .card > .small{ margin-top:6px; }
.bn-site .card > div:last-child{ margin-top:12px; }



/* === v8: App section with carousel and smart store buttons === */
.bn-site .store-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.bn-site .store{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;font-weight:700;border:1px solid #e5e7eb;background:#fff}
.bn-site .store.play{background:linear-gradient(90deg,var(--bn-orange),#ff9a3d);color:#fff;border:none}
.bn-site .store.apple{background:#111827;color:#fff;border:none}
.bn-site .app-carousel{overflow:hidden}
.bn-site .slides{display:flex;transition:transform .3s ease}
.bn-site .slide{min-width:100%;display:flex;align-items:center;justify-content:center}
.bn-site .slide img{max-height:420px;width:auto;border-radius:12px}
.bn-site .dots{display:flex;gap:8px;justify-content:center;padding:8px 0}
.bn-site .dots button{width:8px;height:8px;border-radius:999px;border:0;background:#e5e7eb}
.bn-site .dots button.active{background:var(--bn-blue)}
@media (max-width:780px){.bn-site .slide img{max-height:360px}}



/* === v9: App section proportion fixes === */
.bn-site .app{ grid-template-columns: 1fr 1fr; align-items:center }
.bn-site .app-carousel{ max-width: 420px; margin-left:auto; margin-right:auto }
.bn-site .slides{ width:100% }
.bn-site .slide{ width:100% }
.bn-site .slide img{ width:100%; height:auto; max-height:520px; object-fit:contain }

@media (max-width: 980px){
  .bn-site .app{ grid-template-columns: 1fr }
  .bn-site .app > div:first-child{ order:2 }
  .bn-site .app .app-carousel{ order:1; max-width: 360px }
  .bn-site .slide img{ max-height: 440px }
}

@media (max-width: 520px){
  .bn-site .app .app-carousel{ max-width: 300px }
  .bn-site .slide img{ max-height: 380px }
}



/* === v9.1: App sem imagens, layout limpo === */
.bn-site .app{ grid-template-columns: 1fr; }
.bn-site #app .store-buttons{ margin-top:14px }



/* === v9.2: App title with logo, spacing and button hover === */
.bn-site #app.app-polished{ padding-top: 64px; padding-bottom: 64px; }
.bn-site #app .app-title{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.bn-site #app .app-title img{ height:36px; width:auto; border-radius:8px }

/* Button hover animation */
.bn-site .store{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease }
.bn-site .store:hover{ transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08); filter:brightness(1.02) }
.bn-site .store:active{ transform: translateY(0); box-shadow:none }

@media (max-width:780px){
  .bn-site #app.app-polished{ padding-top: 44px; padding-bottom: 44px; }
  .bn-site #app .app-title img{ height:30px }
}



/* === v9.3: App CTA sem logo, gradiente e botões maiores === */
.bn-site #app.app-cta{
  background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-blue) 100%);
  color:#fff;
  padding:80px 0;
  text-align:center;
  border-radius:0;
}
.bn-site #app.app-cta h2{ 
  color:#fff; 
  font-size: clamp(28px, 3.2vw, 40px); 
  margin:0 0 10px 0; 
  font-weight:800;
}
.bn-site #app.app-cta p.lead{ 
  color: rgba(255,255,255,.92); 
  margin:0 0 28px 0; 
  font-size: clamp(16px, 1.6vw, 18px);
}
.bn-site #app.app-cta .store-buttons{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.bn-site #app.app-cta .store{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#0b1a3a;
  padding:16px 26px; border-radius:14px; font-weight:700; font-size:18px;
  text-decoration:none; border:none; box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.bn-site #app.app-cta .store .icon{ font-size:20px; line-height:1; display:inline-block }
.bn-site #app.app-cta .store.play{ color: var(--bn-blue) }
.bn-site #app.app-cta .store.apple{ color: var(--bn-blue) }
.bn-site #app.app-cta .store:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.94);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
@media (max-width: 560px){
  .bn-site #app.app-cta{ padding:56px 0 }
  .bn-site #app.app-cta .store{ width:100%; justify-content:center; font-size:17px; padding:14px 18px }
}