/* JV Gravações - Estilos Principais */

/* Variáveis CSS */
:root{
  --bg: #0b1020;
  --bg-2: #0f1a34;
  --card: #121a33;
  --text: #e6ecff;
  --muted: #b8c5e0;
  --accent: #7dd3fc; /* sky-300 */
  --accent-2: #38bdf8; /* sky-400 */
  --cta: #f59e0b; /* amber-500 */
  --cta-2:#fbbf24;
  --radius: 18px;
  --maxw: 1180px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Reset e Base */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); 
  background: 
    radial-gradient(ellipse 1400px 900px at 20% 15%, rgba(24,36,71,0.4) 0%, rgba(24,36,71,0) 60%),
    radial-gradient(ellipse 1200px 800px at 80% 10%, rgba(14,165,233,0.25) 0%, rgba(14,165,233,0) 50%),
    radial-gradient(ellipse 800px 600px at 50% 80%, rgba(125,211,252,0.08) 0%, rgba(125,211,252,0) 70%),
    linear-gradient(135deg, var(--bg) 0%, #0a1426 35%, #060913 100%);
  min-height: 100vh;
  position: relative;
  line-height:1.6;
  font-size: clamp(14px, 1.1vw, 16px);
}

/* Background fixo apenas para desktop */
@media (min-width: 769px) {
  body {
    background-attachment: fixed;
  }
}

/* Efeito de partículas sutis */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(125,211,252,0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(125,211,252,0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(125,211,252,0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(125,211,252,0.2), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(125,211,252,0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

/* Partículas fixas apenas para desktop */
@media (min-width: 769px) {
  body::before {
    position: fixed;
  }
}
a{color:var(--accent); text-decoration:none; transition: color 0.3s ease;}
a:hover{color:var(--accent-2)}

/* Layout */
.container{max-width:var(--maxw); margin-inline:auto; padding: clamp(20px, 2.5vw, 32px);}    
header{
  position:sticky; top:0; z-index:40; backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(6,9,19,.85), rgba(6,9,19,.4));
  border-bottom: 1px solid rgba(125,211,252,.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(125,211,252,0.1);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand-logo{width: clamp(28px, 6vw, 40px); height:auto; border-radius:10px; box-shadow: inset 0 0 22px rgba(125,211,252,.2), 0 8px 18px rgba(0,0,0,.35)}
.nav .cta{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:linear-gradient(135deg,var(--cta),var(--cta-2)); color:#0a0a0a; font-weight:700; box-shadow: var(--shadow)}
.nav .cta svg{width:18px;height:18px}

nav.menu{display:flex; align-items:center; gap:10px}

/* Hero */
.hero{display:grid; align-items:center; min-height: clamp(520px, 78vh, 860px); padding: 4rem 0;}    
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 4vw, 48px)}

/* Hero Logo */
.hero-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    justify-content: flex-start;
}

.hero-logo img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
}

.hero-logo span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

/* Mobile - Logo centralizado */
@media (max-width: 768px) {
    .hero-logo {
        justify-content: center;
    }
}

.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid rgba(125,211,252,.3); color:#c1cde8; font-size:.85rem; font-weight: 500; background:rgba(10,17,32,.7); backdrop-filter: blur(4px);}
h1{font-size: clamp(32px, 4.5vw, 56px); line-height:1.1; margin:.4rem 0 .8rem; font-weight: 800;}
h2{font-size: clamp(24px, 3.2vw, 40px); line-height:1.2; margin:0 0 1rem; font-weight: 700;}
h3{font-size: clamp(18px, 2.2vw, 28px); line-height:1.3; margin:0 0 .5rem; font-weight: 600;}
.lead{color:var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:600; border:1px solid transparent; transition: all 0.3s ease; cursor: pointer;}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#041222}
.btn.primary:hover{transform: translateY(-2px); box-shadow: 0 8px 25px rgba(125,211,252,0.4);}
.btn.secondary{border-color:rgba(125,211,252,.25)}
.btn.secondary:hover{border-color:var(--accent); background:rgba(125,211,252,.08);}
.media{ aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#0b1020; border:1px solid rgba(125,211,252,.15); box-shadow: var(--shadow) }
.media img, .media video{width:100%; height:100%; object-fit:cover; display:block}

/* Seções */
section{padding: clamp(48px, 8vw, 96px) 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px}
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
/* Responsividade melhorada */
@media (max-width: 1200px) {
    .hero-grid { gap: clamp(20px, 3vw, 32px); }
    .grid.cols-3 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

@media (max-width: 1000px) { 
    .hero-grid { grid-template-columns: 1fr; }
    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 768px) {
    .hero { padding: 2rem 0; }
    .hero-grid { gap: 24px; }
    .nav .cta { padding: 10px 16px; font-size: 0.9rem; }
    .btn { padding: 10px 16px; width: fit-content; }
    .hero-ctas { justify-content: center; }
    .grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) { 
    .grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Cards */
.card{position:relative; border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(18,26,51,.85), rgba(18,26,51,.65)); border:1px solid rgba(125,211,252,.18); transition: all 0.3s ease; backdrop-filter: blur(4px);}
.card figure{margin:0; aspect-ratio: 1/1; background:#0b1020; position: relative;}
.card img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05)}
.card .content{padding:16px}
.card h3{margin:0 0 6px; font-size:1rem; font-weight: 600; line-height: 1.3;}
.card p{margin:0; color:#b8c5e0; font-size:0.9rem; line-height: 1.4;}
.card .more{position:absolute; inset:auto 12px 12px auto; padding:6px 10px; border-radius:8px; background:rgba(125,211,252,.12); border:1px solid rgba(125,211,252,.2); font-size:.8rem}
.card:hover{transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(125,211,252,.2);}

/* Carousel Styles */
.image-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Estilos específicos para vídeos no carousel */
.carousel-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Garante que vídeos únicos também tenham o estilo correto */
.card figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* Container para vídeo com overlay de play */
.video-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Botão de play sobreposto */
.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(0, 123, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.video-play-overlay:hover {
  background: rgba(0, 123, 255, 1);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6);
}

/* Ícone de play */
.video-play-overlay::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

/* Controle de visibilidade do overlay via JavaScript */
.video-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.video-play-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.carousel-image.active {
  opacity: 1;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
  left: 8px;
}

.carousel-btn.next {
  right: 8px;
}

.image-carousel:hover .carousel-btn {
  opacity: 1;
}

.carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

/* Indicador visual para vídeos nos dots */
.dot[title*="Vídeo"]::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid var(--cta);
  border-radius: 50%;
  opacity: 0.7;
}

.dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.8);
}


.icon-btn{background:transparent; border:1px solid rgba(125,211,252,.25); color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer; transition: all 0.3s ease;}
.icon-btn:hover{border-color:var(--accent); background:rgba(125,211,252,.1); transform: scale(1.05);}

/* Sobre */
.about{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
@media (max-width: 980px){ .about{grid-template-columns:1fr} }
.about img{width:100%; max-width:400px}
@media (min-width: 981px){ .about div:last-child{display:flex; justify-content:center} }
.badges{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.badge{border:1px solid rgba(125,211,252,.18); background:rgba(12,18,32,.6); padding:12px 16px; border-radius:12px; font-size:1rem; line-height: 1.4;}

/* Tabela de Comparação */
.comparison-table-container{width:100%; max-width:500px; margin:0 auto}
.comparison-table{width:100%; border-collapse:separate; border-spacing:0; background:rgba(12,18,32,.8); border-radius:16px; overflow:hidden; border:1px solid rgba(125,211,252,.2)}
.comparison-table th, .comparison-table td{padding:16px 12px; text-align:center; border-bottom:1px solid rgba(125,211,252,.1)}
.comparison-table thead th{background:rgba(18,26,51,.9); font-weight:700; font-size:1rem}
.comparison-table tbody tr:last-child td{border-bottom:none}
.feature-column{width:40%; text-align:left !important}
.jv-column{background:linear-gradient(135deg, rgba(125,211,252,.15), rgba(125,211,252,.08)); color:var(--accent)}
.others-column{background:rgba(239,68,68,.1); color:#ef4444}
.logo-header{display:flex; align-items:center; justify-content:center}
.table-logo{width:56px; height:56px; border-radius:8px; object-fit:contain}
.feature-name{font-weight:600; color:var(--text); text-align:left}
.jv-cell{background:rgba(125,211,252,.05)}
.others-cell{background:rgba(239,68,68,.05)}
.check-icon, .x-icon{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; font-weight:700; font-size:1.2rem}
.check-icon.green{background:#10b981; color:white}
.x-icon.red{background:#ef4444; color:white}

@media (max-width: 768px){
   .comparison-table th, .comparison-table td{padding:12px 8px; font-size:0.9rem}
   .table-logo{width:44px; height:44px}
   .check-icon, .x-icon{width:28px; height:28px; font-size:1rem}
 }

/* Depoimentos */
.snap{display:grid; grid-auto-flow:column; grid-auto-columns: min(360px, 85%); gap:16px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:10px}
.snap>*{scroll-snap-align:start}
.testimonial{background:linear-gradient(180deg, rgba(18,26,51,.9), rgba(18,26,51,.6)); border:1px solid rgba(125,211,252,.14); padding:18px; border-radius:16px}
.testimonial p{margin:0}
.testimonial cite{display:block; margin-top:10px; color:#b8c5e0; font-weight: 500;}

/* Formulário */
form{display:grid; gap:12px}
.field{display:grid; gap:6px}
label{font-size:.95rem; color:#c1cde8; font-weight: 500;}
input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(125,211,252,.2); background:rgba(12,18,32,.6); color:var(--text); outline:none}
input:focus, textarea:focus{border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(56,189,248,.15)}
textarea{min-height:130px; resize:vertical}
.form-card{background:linear-gradient(180deg, rgba(18,26,51,.85), rgba(18,26,51,.6)); border:1px solid rgba(125,211,252,.14); padding:20px; border-radius:16px}

/* CTA barra flutuante */
.float-cta{position:fixed; right:16px; bottom:16px; z-index:50}
.float-cta a{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:999px; background:linear-gradient(135deg,var(--cta),var(--cta-2)); color:#111827; font-weight:800; box-shadow:var(--shadow)}

/* Rodapé */
footer{border-top:1px solid rgba(125,211,252,.12); background:#08101f; padding: 40px 0 20px;}

.footer-content{display:flex; align-items:center; gap:40px; margin-bottom:30px;}

.footer-logo{flex-shrink:0;}
.footer-logo img{width:80px; height:80px; object-fit:contain;}

.footer-info{flex:1;}

.footer-contact{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;}

.contact-item{display:flex; align-items:center; gap:12px; color:var(--text);}
.contact-item a{color:var(--text); text-decoration:none; transition: color 0.3s ease;}
.contact-item a:hover{color:var(--accent);}

.contact-icon{width:20px; height:20px; color:var(--accent); flex-shrink:0;}

.footer-bottom{border-top:1px solid rgba(125,211,252,.12); padding-top:20px; text-align:center;}
.footer-bottom p{margin:0; color:var(--muted); font-size:14px;}

@media (max-width: 768px) {
.footer-content{flex-direction:column; gap:24px; text-align:center;}
.footer-contact{grid-template-columns:1fr; gap:12px;}
.contact-item{justify-content:center;}
.float-cta { right: 12px; bottom: 12px; }
.float-cta a { padding: 12px 16px; }
}
.icon{width:18px; height:18px; vertical-align:middle}