:root{
  --bg:#0b0e12;
  --elev:#12161d;
  --text:#e9eef5;
  --muted:#a8b2c3;
  --acc:#20d07a; /* green accent to match logo */
  --acc-2:#12a85d;
  --card:#0f1319;
  --border:#1f2430;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%, #0a0d11 100%);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1160px;margin:auto;padding:0 20px}
/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,14,18,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo img{height:40px; width:auto}
.logo h1{margin:0;font-size:18px;letter-spacing:.06em;font-weight:700}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{color:var(--text);text-decoration:none;font-weight:600;opacity:.85}
.nav a.active,.nav a:hover{color:var(--acc)}
/* Hero */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;border-bottom:1px solid var(--border)}
.hero media{}
.hero .bg{
  position:absolute;inset:0;overflow:hidden
}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.38;filter:saturate(.9) contrast(1.1)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(80% 80% at 70% 40%, transparent, rgba(0,0,0,.7));}
.hero .content{position:relative;text-align:left;max-width:840px;padding:60px 0}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(32,208,122,.12);
  color:#9fe9c4;border:1px solid rgba(32,208,122,.28);
  padding:6px 12px;border-radius:999px;font-size:12px;
}
.hero h2{
  font-size: clamp(36px, 6vw, 64px);
  margin:16px 0 8px;
  letter-spacing:.02em;
}
.hero p{color:var(--muted);font-size: clamp(16px, 2vw, 20px);max-width:700px}
.cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.btn{
  background:var(--acc); color:#07120b; font-weight:800;
  padding:12px 18px;border-radius:14px;border:none;cursor:pointer;text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease; box-shadow:0 6px 18px rgba(32,208,122,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
/* Sections */
section{padding:80px 0;border-bottom:1px solid var(--border)}
section h3{font-size:28px;margin:0 0 12px}
.section-intro{color:var(--muted);margin-bottom:28px;max-width:760px}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}  
}
.card{
  background:linear-gradient(180deg, var(--card), #0c1015);
  border:1px solid var(--border);
  border-radius:18px;padding:18px
}
.card h4{margin:0 0 8px}
.media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
.figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.figure .caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:10px;font-size:12px}
/* Timeline */
.timeline{position:relative;padding-left:24px}
.timeline:before{content:"";position:absolute;left:10px;top:2px;bottom:2px;width:2px;background:linear-gradient(var(--acc),transparent)}
.milestone{position:relative;margin:14px 0;padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:#0e1218}
.milestone:before{content:"";position:absolute;left:-6px;top:18px;width:12px;height:12px;background:var(--acc);border-radius:50%;box-shadow:0 0 0 3px rgba(32,208,122,.18)}
.milestone small{color:var(--muted)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:12px;border:1px solid var(--border);padding:4px 8px;border-radius:999px;color:var(--muted)}
/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.gallery .g1{grid-column: span 7}
.gallery .g2{grid-column: span 5}
@media (max-width:900px){.gallery .g1,.gallery .g2{grid-column: span 12}}
/* Sponsors */
.sponsors{display:flex;gap:16px;flex-wrap:wrap}
.sponsor{width:180px;height:90px;border:1px dashed var(--border);border-radius:14px;display:grid;place-items:center;color:var(--muted);background:#0e1218}
/* Contact */
form{display:grid;gap:12px;max-width:620px}
input, textarea{
  background:#0c1015;border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:12px 14px;font:inherit
}
textarea{min-height:120px;resize:vertical}
footer{padding:28px 0;color:var(--muted)}
/* Mobile menu */
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);padding:8px 10px;border-radius:10px;color:var(--text)}
@media (max-width:900px){ .menu-toggle{display:block} .nav ul{display:none} .nav.open ul{display:flex;flex-direction:column;gap:10px;position:absolute;left:0;right:0;top:60px;padding:12px 20px;background:var(--elev);border-bottom:1px solid var(--border)}}
#backToTop{position:fixed;right:16px;bottom:16px;opacity:0;pointer-events:none;transition:opacity .2s}
#backToTop.show{opacity:1;pointer-events:auto}
.small{font-size:13px;color:var(--muted)}

/* Sponsors hover */
.sponsor{transition:transform .08s ease, border-color .2s ease, box-shadow .2s ease; text-decoration:none}
.sponsor:hover{transform:translateY(-2px); border-color:var(--acc); box-shadow:0 8px 20px rgba(32,208,122,.12)}

/* Testimonials */
.testimonial .quote{font-size:16px;margin:0 0 10px}
.testimonial .person{display:flex;flex-direction:column;color:var(--muted)}

/* Mostrar a foto inteira, sem corte */
#sobre .figure{
  aspect-ratio: 4/5;       /* define a altura da caixa automaticamente */
  background:#000;         /* fundo neutro nas bordas */
}
#sobre .figure img{
  width:100%;
  height:100%;
  object-fit: contain;     /* encaixa a imagem na caixa */
  object-position: center;
}
/* Ajuste imagens da galeria na sessão Mídia */
#midia .gallery .figure {
  aspect-ratio: 16/9; /* ou 4/3, se preferir mais alto */
  background: #000;   /* fundo neutro para bordas */
}

#midia .gallery .figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* mostra a imagem inteira */
  object-position: center;
}
/* Para imagens horizontais */
#curriculo .media.horizontal {
  aspect-ratio: 16/9;
  overflow: hidden;
}

#curriculo .media.horizontal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Para imagens verticais */
#curriculo .media.vertical {
  aspect-ratio: 3/4; /* ou 9/16 se quiser bem vertical */
  overflow: hidden;
}

#curriculo .media.vertical img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Badges/indicadores de marketing na timeline */
.kpis{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.badge-mini{
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--border); color:var(--text);
  background:linear-gradient(180deg,#0f1319,#0c1015);
  padding:6px 10px; border-radius:999px;
}
.milestone .note{
  display:block; margin-top:8px; color:var(--muted);
}

/* Destaque sutil no hover para reforçar “card feel” */
.milestone{
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.milestone:hover{
  border-color: var(--acc);
  box-shadow: 0 8px 22px rgba(32,208,122,.10);
  transform: translateY(-1px);
}
/* Grid de matérias (Na mídia) */
.press-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .press-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .press-grid{ grid-template-columns:1fr } }

.press-card{
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, var(--card), #0c1015);
  border:1px solid var(--border); border-radius:16px; padding:12px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.press-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(32,208,122,.10); border-color:var(--acc) }

.press-thumb{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border) }
.press-thumb img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/9; display:block }

.press-body{ display:flex; flex-direction:column; gap:8px }
.press-title{ margin:0; font-size:16px; line-height:1.3 }
.press-title a{ color:var(--text); text-decoration:none }
.press-title a:hover{ color:var(--acc) }

.press-meta{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px }
.press-dot{ opacity:.4 }

.btn.btn-sm{
  align-self:flex-start; font-size:13px; padding:8px 12px; border-radius:10px;
  background:var(--acc); color:#06130a; font-weight:800; text-decoration:none; border:0;
}
.btn.btn-sm:hover{ transform:translateY(-1px) }
.hero-sub{ color:var(--muted); font-size:clamp(16px,2vw,20px); max-width:760px; margin:12px 0 6px }
.hero .cta .btn.ghost{border:1px solid var(--border)}
.hero-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px }
@media (max-width:900px){ .hero-kpis{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .hero-kpis{ grid-template-columns:1fr } }
.kpi{ background:linear-gradient(180deg,#0f1319,#0c1015); border:1px solid var(--border); border-radius:14px; padding:14px 16px }
.kpi strong{ display:block; font-size:15px; margin-bottom:2px }
.kpi span{ color:var(--muted); font-size:13px }
.brand-strip{ margin-top:18px; border-top:1px solid var(--border); padding-top:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.strip-label{ font-size:12px; color:var(--muted) }
.brand-strip ul{ display:flex; gap:16px; list-style:none; margin:0; padding:0; align-items:center }
.brand-strip li{ height:28px; display:flex; align-items:center; opacity:.8; transition:opacity .2s ease, transform .08s ease }
.brand-strip li:hover{ opacity:1; transform:translateY(-1px) }
.brand-strip img{ height:100%; width:auto; filter:grayscale(100%) contrast(1.1) brightness(.95) }
.patrocinador-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.patrocinador-info h4 {
  margin: 0;
  font-size: 1.2em;
}

.patrocinador-info p {
  margin: 5px 0 0;
  font-size: 0.95em;
  color: #555;
}
.patrocinador-item img {
  width: 150px;
  height: 150px;
  object-fit: contain; /* mantém proporção sem cortar */
  
  padding: 10px; /* opcional, para dar respiro */
  border-radius: 8px; /* opcional, para cantos arredondados */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* opcional */
}
/* Depoimentos */
.testimonials-grid .testimonial{
  display:flex; flex-direction:column; gap:10px;
  min-height: 100%;
}
.testimonial .avatar{
  width:64px; height:64px; border-radius:50%;
  overflow:hidden; border:1px solid var(--border);
}
.testimonial .avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.testimonial .quote{
  margin:6px 0 0; font-size:15px; line-height:1.5;
  color: var(--text);
}
.testimonial .person{
  display:flex; flex-direction:column; gap:2px; margin-top:6px;
  color: var(--muted);
}
.testimonial .person strong{ color: var(--text) }

/* Ajustes responsivos */
@media (max-width:900px){
  .testimonials-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
  .testimonials-grid{ grid-template-columns: 1fr; }
}
/* HERO – ajuste para mobile: mostrar a imagem inteira */
@media (max-width: 768px){
  .hero{ min-height: 72vh; }            /* um pouco menos alto no mobile */
  .hero .bg{ background:#000; }         /* cor nas faixas laterais/superior */
  .hero .bg img{
    object-fit: contain;                /* não corta a imagem */
    object-position: center;
  }
  .hero .overlay{
    background: radial-gradient(80% 80% at 70% 40%, transparent, rgba(0,0,0,.65));
  }
}
.small a {
  color: var(--acc);
  font-weight: 600; /* deixa um pouco mais marcante */
  text-decoration: none; /* opcional: remove o sublinhado */
}

.small a:hover {
  color: var(--acc-2); /* verde alternativo no hover */
  text-decoration: underline; /* opcional: destaca no hover */
}
/* Opcional: leve ajuste visual do bloco de contato */
#contato .contact-cta .btn.ghost{ border:1px solid var(--border) }
#contato .section-intro{ margin-left:auto; margin-right:auto }
/* Hero sem imagem (patrocinio) */
#patrocinio-hero .bg img{ display:none; }
#patrocinio-hero .overlay{
  background:
    radial-gradient(80% 80% at 70% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%),
    linear-gradient(180deg, rgba(32,208,122,.15), rgba(11,14,18,1) 60%);
}
/* CARROSSEL DE MOCKUPS */
#mockups-carousel .mockups-swiper { width: 100%; }
#mockups-carousel .swiper-slide { display:flex; }

#mockups-carousel .slide-frame{
  display:flex; flex-direction:column; gap:8px;
  width:100%;
  background: linear-gradient(180deg, var(--card), #0c1015);
  border:1px solid var(--border);
  border-radius:14px; padding:12px;
}

#mockups-carousel .slide-frame img{
  width:100%; height:100%;
  aspect-ratio: 16/9;         /* mantém proporção agradável */
  object-fit: cover;          /* mude para contain se quiser ver tudo */
  border-radius:10px; border:1px solid var(--border);
  display:block;
}
#mockups-carousel figcaption{
  font-size:13px; color:var(--muted);
}

/* Botões/paginação no seu verde */
#mockups-carousel .swiper-button-prev,
#mockups-carousel .swiper-button-next{
  color: var(--acc);
  filter: drop-shadow(0 4px 10px rgba(32,208,122,.25));
}
#mockups-carousel .swiper-pagination-bullet{ background: #4b5563; opacity:.7 }
#mockups-carousel .swiper-pagination-bullet-active{ background: var(--acc); opacity:1 }

/* Responsivo: mais slides na tela em telas grandes */
@media (min-width: 900px){
  #mockups-carousel .mockups-swiper .swiper-wrapper{ padding-bottom: 4px; }
}
/* Padrão: slides 16:9 com cover */
#mockups-carousel .slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* mostra a imagem inteira */
  object-position: center;
  background: #000;      /* bordas pretas se sobrar espaço */
  border-radius: 12px;   /* mantém o estilo arredondado */
}

/* ---- Carrossel: imagens uniformes em 16:9 ---- */
#mockups-carousel .swiper-slide { height: auto; }

#mockups-carousel .slide-frame {
  aspect-ratio:16/9;
  margin: 0;
}

#mockups-carousel .slide-frame img{
  width: 100%;
  height: auto;              /* deixa o browser calcular a altura */
  aspect-ratio: 16/9;        /* força o mesmo formato em todos */
  object-fit: cover;         /* preenche, podendo cortar um pouco */
  object-position: center;   /* centraliza o corte */
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #000;          /* barras discretas se faltar imagem */
}

#mockups-carousel .slide-frame figcaption{
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
/* Variação para NÃO cortar (usa na imagem específica) */
#mockups-carousel .slide-frame img.no-crop{
  object-fit:contain !important;   /* mostra a foto inteira */
  background:#000;                 /* “barras” discretas, se precisar */
}
.whatsapp-float {
  position: fixed;
  width: auto;
  bottom: 20px;
  right: 20px;
  background: var(--acc);
  color: #06130a;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(32,208,122,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 1000;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(32,208,122,.35);
}