@import url('https://fonts.googleapis.com/css?family=Audiowide|Baloo+Thambi+2|Open+Sans&display=swap');

    :root{
      --preto:#0a0a0a;         /* fundo principal */
      --preto-2:#111;          /* header colado */
      --branco:#fff;
      --verde:#6F6;            /* cor pedida #6F6 */
      --cinza:#b9b9b9;
      --cinza-2:#e9e9e9;
      --container:1180px;
      --radius-xl:10px;
      --radius-lg:7px;
      --shadow-1: 0 12px 30px rgba(0,0,0,.18);
      --shadow-2: 0 8px 20px rgba(0,0,0,.14);
      --shadow-soft: 0 10px 18px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
      --tr-fast: .18s ease;
      --tr-med: .28s cubic-bezier(.2,.8,.2,1);
    }

    /* Reset simples + tipografia */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--branco);
      background: var(--preto);
      line-height:1.5;
      -webkit-font-smoothing:antialiased;
      scroll-behavior:smooth;
    }
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{max-width:var(--container); margin:0 auto; padding:0 20px}
	.container h2{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}.container p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
    /* Header */
    header.site-header{
      position:fixed; inset:0 0 auto 0; height:74px; z-index:50;
      background:transparent;
      transition: background var(--tr-med), box-shadow var(--tr-med), border-color var(--tr-med);
      border-bottom:1px solid transparent;
    }
    header.site-header.scrolled{
      background:rgba(0,0,0,.90);
      backdrop-filter:saturate(120%) blur(6px);
      border-color:rgba(255,255,255,.06);
      box-shadow: var(--shadow-soft);
    }
    .nav{
      height:74px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
	.logo_ft {
	font-family: 'Audiowide', cursive;
	color:var(--verde) 
	}
    .brand{
      display:flex; align-items:center; gap:12px;
    }
    .brand img.logo{
      width:42px; height:42px; border-radius:0px; object-fit:cover; box-shadow: var(--shadow-2);
      background:none;
    }
    .brand .title{
      display:flex; flex-direction:column; line-height:1.1;
    }
    .brand .title b{letter-spacing:.6px}
    .brand .subtitle{font-size:12px; color:#bfbfbf}

    /* Menu */
    .menu{display:flex; align-items:center; gap:8px}
    .menu a{
      padding:10px 14px; border-radius:12px;
      color:#ddd;
      transition:color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast);
    }
    .menu a:hover{color:var(--branco); background:rgba(255,255,255,.06)}
    .menu a.active{color:var(--branco)}
    /* Área do Cliente */
    .menu .cta-area{
      position:relative;
    }
    .btn-area{
      background: var(--verde);
      color:#082e08;
      font-weight:700;
      padding:10px 16px; border-radius:999px;
      box-shadow: 0 6px 16px rgba(102,255,102,.25);
      transition: transform var(--tr-fast), box-shadow var(--tr-fast), filter var(--tr-fast);
    }
    .btn-area:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(102,255,102,.28)}
    .submenu{
      position:absolute; right:0; top:calc(100% + 10px);
      background:#0f0f0f; border:1px solid rgba(255,255,255,.08);
      border-radius:7px; padding:8px; min-width:220px; box-shadow: var(--shadow-1);
      display:none;
    }
    .submenu a{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:5px; color:#eaeaea;
    }
    .submenu a:hover{background:rgba(255,255,255,.06)}
    .cta-area.open .submenu{display:block}

    /* Hamburguer (mobile) */
    .hamb{display:none}
    .hamb button{
      width:40px; height:40px; border-radius:6px; border:1px solid rgba(255,255,255,.1);
      background:#0f0f0f; color:#fff;
      display:grid; place-items:center;
    }
	.open_sans {
		font-family: 'Open Sans', sans-serif; 
	}
	.baloo {
	  font-family: 'Baloo Thambi 2', cursive;
	}
    /* Hero */
    .hero{
      position:relative; min-height:100svh; display:grid; place-items:center;
      isolation:isolate; min-height: 100vh; background-attachment: scroll;
	  
    }
    .hero::before{ /* véu escuro p/ contraste + transparência pedida */
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.60) 40%, rgba(0,0,0,.85));
      z-index:0; 
    }
    .hero .inner{z-index:1; text-align:center; padding:90px 0 40px; margin:10px;}
	
	.img_home{
      background: #000 url(../img/fundo.jpg) center/cover no-repeat fixed;
	}
	
	.img_quem_somos{
      background: #000 url(../img/quem_somos.jpg) center/cover no-repeat fixed;
	}
	.img_plataforma{
      background: #000 url(../img/plataforma.jpg) center/cover no-repeat fixed;
	}
	.img_produtos{
      background: #000 url(../img/produtos.jpg) center/cover no-repeat fixed;
	}
	.img_cursos{
      background: #000 url(../img/cursos.jpg) center/cover no-repeat fixed;
	}
    .kicker{display:inline-block; font-size:13px; letter-spacing:.18em; color:#c7ffc7; background:rgba(111,255,111,.1);
      padding:8px 12px; border:1px solid rgba(111,255,111,.25); border-radius:999px; margin-bottom:16px}
    .hero h1{
      font-size: clamp(28px, 5vw, 56px);
      margin: 0 0 12px; letter-spacing:.5px;
      text-shadow: 0 8px 28px rgba(0,0,0,.45);
    }
    .hero p{
      max-width: 760px; margin: 0 auto 24px; color:#e7e7e7;
      font-size: clamp(16px, 2.2vw, 20px)
    }
    .btn-primary{
      display:inline-flex; align-items:center; gap:10px;font-family: 'Baloo Thambi 2', cursive;
      background: var(--verde); color:#062b06; font-weight:800; letter-spacing:.3px;
      padding:14px 20px; border-radius:8px; border:none; cursor:pointer;
      box-shadow: 0 10px 26px rgba(102,255,102,.30);
      transition: transform var(--tr-fast), box-shadow var(--tr-fast);
    }
    .btn-primary:hover{transform: translateY(-2px); box-shadow: 0 18px 34px rgba(102,255,102,.36)}
    .btn-ghost{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid rgba(255,255,255,.16); color:#f2f2f2; padding:12px 18px; border-radius:8px;
      background:rgba(255,255,255,.04);
      transition: background var(--tr-fast), transform var(--tr-fast);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.08); transform: translateY(-1px)}
	.btn-ghost-green{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid rgba(102, 255, 102,.90); color:#000; padding:8px 14px; border-radius:8px;
      background:rgba(102, 255, 102,.60);
      transition: background var(--tr-fast), transform var(--tr-fast);
    }
    .btn-ghost-green:hover{background:rgba(102, 255, 102,.80); transform: translateY(-1px)}
    .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px}

    /* Seções */
    section{padding:70px 0}
    section.light{background:#fafafa; color:#151515}
    section.dark{background:#0c0c0c; color:#f2f2f2}
    .section-title{font-family: 'Baloo Thambi 2', sans-serif; font-size: clamp(22px, 3.2vw, 34px); margin:0 0 10px}
    .section-sub{font-family: 'Open Sans', sans-serif; color:#555; max-width:820px}

    /* Grid de 3 blocos */
    .grid-3{
      display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); margin-top:34px;
    }
    .green_line{
	  display: auto;
      background: #6f6;
      border-radius: 5px;
      box-shadow: var(--shadow-soft);
	  width: 150px;
	  height: 5px;
	  margin: auto;
	  margin-top: -10px;
    }
    .card{
      background: rgba(255,255,255,.75);
      border:1px solid #eaeaea;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      overflow:hidden; position:relative;
      transition: transform var(--tr-med), box-shadow var(--tr-med);
      color:#131313;
      text-align:center;
    }
    .card:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.12)}
    .card .in{ padding:40px 22px 30px 22px ; text-align: center;}
    .card .icon{
      width:56px; height:56px; display:grid; place-items:center; border-radius:8px;
      background: #f4fff4; border:1px solid rgba(111,255,111,.35); margin-bottom:12px; margin: 0 auto 12px;
      box-shadow: 0 8px 18px rgba(111,255,111,.18);
    }
    .card h3{margin:6px 0 6px}
    .card p{color:#4a4a4a}
	
    /* Diferenciais (lista com ícones) */
    .diff{
      display:grid; gap:14px; grid-template-columns: repeat(2, 1fr); margin-top:24px;
    }
    .diff .item{
      display:flex; gap:12px; align-items:flex-start;
      background: #0f0f0f; border:1px solid rgba(255,255,255,.08);
      border-radius:6px; padding:16px; box-shadow: var(--shadow-2);
    }
    .badge{
      min-width:36px; height:36px; border-radius:6px; display:grid; place-items:center;
      background: rgba(111,255,111,.1); border:1px solid rgba(111,255,111,.28);
      color:#b6ffb6;
    }

    /* Timeline / História (humanizada) */
    .timeline{
      display:grid; gap:16px; margin-top:26px;
    }
    .tl{
      background:#fff; color:#191919; border:1px solid #efefef; border-radius:8px; box-shadow: var(--shadow-soft);
      padding:18px;
    }
    .tl small{display:block; color:#7a7a7a; margin-bottom:4px}

    /* CTA Final */
    .cta{
      text-align:center; background:linear-gradient(180deg, #222, #000);
      border:1px solid #e7ffe7; border-radius:12px; padding:32px; color:#0d0d0d;
      box-shadow: 0 20px 44px rgba(111,255,111,.15);
    }

    /* Rodapé */
    footer{
      background:#0a0a0a; color:#d7d7d7; border-top:4px solid rgba(102, 255, 102,.9); 
    }
    .footer-grid{
      display:grid; gap:22px; grid-template-columns: 2fr 1fr 1fr 1fr; padding:36px 0;
    }
    .footer-grid h4{margin:0 0 12px; color:#fafafa}
    .footer-grid a{display:block; color:#cfcfcf; padding:6px 0}
    .social{display:flex; gap:10px; margin-top:12px}
    .social a{
      width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.10); background:#0f0f0f;
      transition: transform var(--tr-fast), border-color var(--tr-fast);
    }
    .social a:hover{transform: translateY(-2px); border-color:rgba(111,255,111,.5)}
    .copyright{
      padding:16px 0; border-top:1px dashed rgba(255,255,255,.08); font-size:14px; color:#a8a8a8; text-align: left;
    }

    /* Formulário moderno (padrão para reutilizar nas páginas internas) */
    .form-modern{
      --field-bg:#0f0f0f; --field-bd:rgba(255,255,255,.12); --field-bd-focus:rgba(111,255,111,.65);
      background:#0b0b0b; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:22px;
      box-shadow: var(--shadow-2);
    }
    .form-row{display:grid; gap:14px; grid-template-columns: 1fr 1fr}
    .field{display:flex; flex-direction:column; gap:8px}
    .label{font-size:13px; color:#cfcfcf}
    .input, .select, .textarea{
      background:var(--field-bg); color:#f6f6f6; border:1px solid var(--field-bd);
      border-radius:14px; padding:12px 14px; outline:none; transition: border-color var(--tr-med), box-shadow var(--tr-med);
    }
    .textarea{min-height:120px; resize:vertical}
    .input:focus, .select:focus, .textarea:focus{border-color:var(--field-bd-focus); box-shadow:0 0 0 6px rgba(111,255,111,.08)}
    .help{font-size:12px; color:#9f9f9f}
    .form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
    .btn-outline{
      border:1px solid rgba(255,255,255,.18); color:#eaeaea; background:transparent;
      padding:10px 16px; border-radius:12px; cursor:pointer;
    }

    /* Animações suaves ao rolar */
    .reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
    .reveal.in{opacity:1; transform:none}
	
	#criador-crossload .wrap{
      display:grid;
      grid-template-columns: clamp(220px, 28vw, 320px) 1fr; /* foto à esquerda, texto à direita */
      gap: 28px;
      align-items: start;
    }
    #criador-crossload figure.foto{
      margin:0;
      justify-self: start;                 /* garante que a foto fique colada à esquerda */
      background:#fff;
      border:1px solid #eaeaea;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    #criador-crossload figure.foto img{
      display:block;
      width:100%;
      height:auto;
      aspect-ratio: 3 / 4;                 /* retrato vertical */
      max-height: 520px;                   /* impede “esticar” na altura */
      object-fit: cover;
    }
    #criador-crossload .texto p{ text-align: justify; color:#333 }
    #criador-crossload .texto .lead{ color:#555; margin-top:4px }
	
	#drawer .drawer-nav{margin-top:8px}
  #drawer .drawer-list{display:grid; gap:0}
  #drawer .drawer-link{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px;
    color:#eaeaea; text-decoration:none; background:transparent;
    border-bottom:1px solid rgba(255,255,255,.10);
    border-radius:6px;                         /* radius pela metade */
  }
  #drawer .drawer-link:first-child{
    border-top:1px solid rgba(255,255,255,.10);
  }
  #drawer .drawer-link:hover{
    background:rgba(255,255,255,.06);
  }
  #drawer .drawer-link svg{
    width:18px; height:18px; flex:0 0 18px; opacity:.95;
  }

  /* Submenu no mesmo formato dos links principais */
  #drawer details .drawer-sub{
    padding-left:20px;                         /* leve indentação no submenu */
  }
  #drawer details .drawer-sub:first-child{
    border-top:1px solid rgba(255,255,255,.10);/* linha superior no 1º item do submenu */
  }
  
  #planos .price{font-weight:900; font-size:clamp(28px,4.6vw,54px); line-height:1; margin:6px 0}
    #planos .per{font-size:14px; color:#666}
    #planos .plan-list{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; color:#444}
    #planos .plan-list li{display:flex; align-items:center; gap:8px}
    #planos .plan-list svg{width:16px; height:16px; flex:0 0 16px}
    #planos .badge{
      display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
      background:rgba(111,255,111,.16); color:#0a0; border:1px solid rgba(111,255,111,.35); margin-bottom:8px
    }
	
	#planos-clubes .wrap{
      display:grid; gap:20px; grid-template-columns: 1.5fr .9fr; align-items:stretch;
    }
    /* Painéis minimalistas, sem “cinza”, com raio pequeno */
    #planos-clubes .panel{
      background:#0b0b0b;
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;          /* menos arredondado */
      position:relative; overflow:hidden;
    }
    #planos-clubes .panel .in{ padding:22px }
    /* faixa superior com acento em verde */
    #planos-clubes .strip{
      position:absolute; left:0; top:0; right:0; height:4px;
      background:linear-gradient(90deg, #6F6, rgba(111,255,111,.18) 60%, transparent);
    }

    /* Features em cartões discretos */
    #planos-clubes .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
    #planos-clubes .feature{
      display:flex; gap:12px; align-items:flex-start;
      background:#0f0f0f; border:1px solid rgba(255,255,255,.08);
      border-radius:8px; padding:12px;
    }
    #planos-clubes .ico{
      width:28px; height:28px; border-radius:6px; display:grid; place-items:center;
      background:rgba(111,255,111,.10); border:1px solid rgba(111,255,111,.35); color:#b6ffb6; flex:0 0 28px;
      font-size:16px;
    }

    /* Preços */
    #planos-clubes .price-card .big{ font-weight:900; font-size:clamp(32px,5vw,58px); line-height:1 }
    #planos-clubes .price-card .per{ color:#cfcfcf; font-size:14px }
    #planos-clubes .pill{
      display:inline-block; padding:6px 10px; border-radius:6px;
      border:1px solid rgba(111,255,111,.4); background:rgba(111,255,111,.12);
      color:#b6ffb6; font-weight:700; font-size:13px;
    }
	#produtos .store-grid, #cursos .store-grid { margin-top: 24px }
    /* Thumb com aspecto fixo e cantos suaves (herda sombras do .card) */
    #produtos .thumb, #cursos .thumb{
      background:#fff; border:1px solid #eaeaea; border-radius: var(--radius-xl);
      overflow:hidden; aspect-ratio: 4 / 3; display:block;
    }
    #produtos .thumb img, #cursos .thumb img{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    /* Chips para UPS (benefícios rápidos) */
    #produtos .chips, #cursos .chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0 }
    #produtos .chip, #cursos .chip{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
      border-radius:999px; border:1px solid rgba(111,255,111,.35);
      background:rgba(111,255,111,.12); color:#0a0; font-size:12px; font-weight:700;
    }
    /* Título central, textos restantes à esquerda (padrão que você usa) */
    #produtos .card h3, #cursos .card h3{ text-align:center; margin-left:auto; margin-right:auto }
    #produtos .meta, #cursos .meta{ text-align:center; color:#666; margin-top:4px }
    #produtos .desc, #cursos .desc{ color:#444; margin-top:10px }
	
	 /* Estilo escopado e minimalista */
    #busca-simples .searchbar{
      display:flex; gap:10px; align-items:center;
      max-width:820px; margin:0px auto; padding:0px 0;
    }
    #busca-simples input[type="search"]{
      flex:1 1 auto; height:48px;
      background:#fff; color:#111;
      border:1px solid #e6e6e6; border-radius:12px;
      padding:0 14px; font-size:16px;
      box-shadow:0 6px 14px rgba(0,0,0,.04);
      outline:none; transition:border-color .2s, box-shadow .2s;
    }
    #busca-simples input[type="search"]::placeholder{ color:#8c8c8c }
    #busca-simples input[type="search"]:focus{
      border-color:rgba(111,255,111,.6);
      box-shadow:0 0 0 6px rgba(111,255,111,.12);
    }
    /* Botão cinza com ícone de lupa */
    #busca-simples .search-btn{
      width:48px; height:48px; padding:0;
      display:grid; place-items:center;
      background:#f2f2f2; color:#333;
      border:1px solid #ddd; border-radius:12px;
      box-shadow:0 4px 12px rgba(0,0,0,.05);
      cursor:pointer;
      transition:background .2s, border-color .2s, transform .1s, box-shadow .2s;
    }
    #busca-simples .search-btn:hover{
      background:#eee; border-color:#d0d0d0; transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(0,0,0,.06);
    }
    #busca-simples .search-btn:active{ transform:none }
    #busca-simples .search-btn:focus-visible{
      outline:none; box-shadow:0 0 0 6px rgba(111,255,111,.12);
      border-color:rgba(111,255,111,.6);
    }
    @media (max-width:480px){
      #busca-simples .searchbar{ gap:8px }
      #busca-simples input[type="search"], #busca-simples .search-btn{ height:44px }
      #busca-simples .search-btn{ width:44px }
    }
	
	
    @media (max-width:980px){
      #planos-clubes .wrap{ grid-template-columns:1fr }
      #planos-clubes .feature-grid{ grid-template-columns:1fr }
    }
	
	
    /* Responsivo */
    @media (max-width: 980px){
      .grid-3{grid-template-columns: 1fr 1fr}
      .diff{grid-template-columns: 1fr}
      .footer-grid{grid-template-columns: 1fr 1fr; margin-left:20px;}
      .form-row{grid-template-columns: 1fr}
	  #criador-crossload .wrap{ grid-template-columns: 1fr }
      #criador-crossload figure.foto img{ max-width: 100px }
	  
    }
    @media (max-width: 1024px){
      .menu{display:none}
      .hamb{display:block}
      .grid-3{grid-template-columns: 1fr}
      .footer-grid{grid-template-columns: 1fr; margin-left:20px;}
	  .green_line{  width: 120px;  height: 3px;}

	.copyright{text-align: center;}
  .hero{ background-attachment: scroll; /* remove o efeito parallax */ }
}