:root{
  --jbl-orange: #FF4A00;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins', sans-serif;
background:#1f1f1f;
color:#ffffff;
}

/* HERO */

.hero{
position:relative;
background:url('../images/background-reading.jpg') center center / cover no-repeat;
padding:100px 20px 160px 20px;
text-align:center;
overflow:hidden;
}

.hero::before{
display:none;
}

.hero *{
position:relative;
z-index:2;
}

.hero small{
letter-spacing:3px;
font-size:11px;
color:#ffffff; /* branco total */
margin-bottom:10px;
display:block;
opacity:0.85;
}

.hero h1{
font-size:40px;
font-weight:600;
}

.hero .divider{
width:55px;
height:3px;
background:var(--jbl-orange);
margin:18px auto;
}

.hero p{
font-size:17px;
color:#f0f0f0;
max-width:600px;
margin:0 auto;
text-shadow:0 2px 10px rgba(0,0,0,0.6);
}

/* ONDA */

.hero-wave{
position:absolute;
bottom:-1px;
left:0;
width:100%;
height:140px;
}

.hero-wave svg{
width:100%;
height:100%;
display:block;
}

/* SORRISO */

/* ===== SMILE CENTRALIZADO REAL ===== */

.amazon-smile{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-22px;        /* posição correta */
width:110px;         /* tamanho visível */
height:auto;
z-index:10;
pointer-events:none;
}

/* FUNDO */

.section-bg{
background:linear-gradient(180deg,#2e2e2e 0%, #262626 100%);
}

.container{
max-width:1100px;
margin:auto;
padding:60px 20px 100px 20px;
}

/* CARD */

.product-card{
background:#ffffff;
border-radius:20px;
padding:40px;
max-width:950px;
margin:auto;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
position:relative;
}

/* ===== NAV SUPERIOR LARGA E ARREDONDADA ===== */

/* ===== NAV SUPERIOR FINA ===== */

/* ===== NAV SUPERIOR FINAL ===== */

.slider-nav{
display:flex;
position:absolute;
top:25px;
left:60px;
right:60px;
gap:30px;              /* espaço igual */
}

.nav-arrow{
flex:1;                 /* distribui igualmente */
height:4px;             /* levemente mais grossa */
background:#d6d6d6;
border-radius:4px;
cursor:pointer;
transition:0.3s;
}

.nav-arrow.active{
background: var(--jbl-orange);
}

/* SLIDER */

.slider-wrapper{
overflow:hidden;
margin-top:80px; /* espaço para nav maior */
}

.slider-track{
display:flex;
transition:transform 0.5s ease;
}

.slide{
min-width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;              /* mais espaço */
}

.details{
flex:1;
max-width:520px;       /* largura correta */
width:100%;
}

.highlight{
font-size:22px;
font-weight:600;
margin-bottom:20px;
line-height:1.3;
}

.description{
color:#555;
line-height:1.6;
font-size:15px;
margin-bottom:25px;
}

/* CARROSSEL */

.carousel{
flex:1;
max-width:360px;
height:420px;              /* ALTURA FIXA */
display:flex;
align-items:center;
justify-content:center;
}

.carousel img{
width:100%;
height:100%;               /* ocupa espaço fixo */
object-fit:contain;        /* não distorce */
display:none;
border-radius:12px;
}

.carousel img.active{
display:block;
}

/* DETALHES */

.details{
flex:1;
max-width:480px;
}

.highlight{
font-size:18px;
font-weight:600;
margin-bottom:15px;
}

.description{
color:#555;
line-height:1.6;
font-size:14px;
}

.btn{
margin-top:20px;
background:var(--jbl-orange);
color:#000;
padding:14px 28px;
border:none;
cursor:pointer;
font-weight:700;
border-radius:10px;
font-size:17px;
box-shadow:0 4px 12px rgba(255,153,0,0.3);
transition:0.2s;
}

.btn:hover{
background:#e63f00;
transform:translateY(-2px);
}

.trust{
margin-top:18px;
color:#666;
font-size:13px;
line-height:1.6;
}

.specs{
margin-top:25px;
font-size:14px;
}

.specs ul{
padding-left:18px;
}

/* RESPONSIVO */

@media(max-width:900px){

.amazon-smile{
width:130px;
right:5%;
}

.slide{
flex-direction:column;
text-align:center;
}

.carousel{
max-width:280px;
}

.slider-nav{
position:relative;
top:0;
left:0;
right:0;
margin-bottom:20px;
}

.slider-wrapper{
margin-top:0;
}
}

/* LOADER */

/* ===== LOADING SCREEN ===== */

#loading-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:opacity 0.3s ease;
}

#loading-screen.active{
opacity:1;
visibility:visible;
}

.loader{
width:40px;
height:40px;
border:4px solid #ddd;
border-top:4px solid #000;
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:20px;
}

@keyframes spin{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}

/* WHATSAPP */

/* ===== BOTÃO FLUTUANTE PREMIUM ===== */

.whatsapp-btn{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:#ffffff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.3s;
z-index:999;
}

.whatsapp-btn:hover{
transform:translateY(-4px);
box-shadow:0 14px 30px rgba(0,0,0,0.22);
}

/* ===== SMILE AJUSTE FINAL ===== */

.whatsapp-btn img{
width:48px;      /* agora ocupa quase toda a bolinha */
height:auto;
}

/* RODAPÉ */

footer{
margin-top:60px;
text-align:center;
font-size:10px;
color:#888;
padding:20px;
}

/* ===== SETAS LATERAIS ===== */

.side-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
background:#FF4A00; /* laranja JBL */
color:#ffffff;      /* seta branca */
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:22px;
transition:all 0.3s ease;
box-shadow:0 6px 18px rgba(255,74,0,0.35);
}

.side-arrow:hover{
background:#e63f00;
transform:translateY(-50%) scale(1.08);
}

.side-arrow.left{
left:-22px;
}

.side-arrow.right{
right:-22px;
}

/* ===== NAV WRAPPER ===== */

/* ===== NAV WRAPPER CORRIGIDO ===== */

/* ===== NAV PERFEITAMENTE DIVIDIDA ===== */

.slider-nav-wrapper{
width:100%;
display:grid;
grid-template-columns:repeat(3, 1fr);
row-gap:8px;
margin-bottom:35px;
}

/* LINHAS */

.slider-nav{
display:contents; /* usa o grid do wrapper */
}

.nav-arrow{
height:3px;
background:#dcdcdc;
border-radius:3px;
cursor:pointer;
transition:0.3s;
}

.nav-arrow.active{
background:#ff9900;
}

/* TEXTOS */

.slider-labels{
display:contents; /* usa o mesmo grid */
}

.nav-label{
font-size:12px;
color:#999;
text-align:center;
letter-spacing:0.4px;
transition:0.3s;
}

.nav-label.active{
color:#111;
font-weight:500;
}

/* ===== SLIDE ESPECIFICAÇÕES ===== */

.specs-slide{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

.specs-image{
flex:1;
max-width:420px;
display:flex;
justify-content:center;
}

.specs-image img{
width:100%;
height:auto;
object-fit:contain;
}

.specs-list{
margin:20px 0 30px;
padding-left:0;
list-style:none;
color:#555;
line-height:1.8;
font-size:14px;
}

.specs-list li{
margin-bottom:6px;
}

/* ===== SLIDE 3 - VÍDEO + AVALIAÇÕES ===== */

.review-slide{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
padding:20px 0;
}

.review-video{
flex:1;
max-width:420px;
height:300px;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.review-details{
flex:1;
max-width:500px;
}

.review-details .highlight{
font-size:20px;
font-weight:600;
margin-bottom:12px;
}

/* ===== AJUSTE ESTRELAS ===== */

/* ===== ESTRELAS AJUSTE FINAL ===== */

/* ===== ESTRELAS TAMANHO REAL ===== */

.stars-row{
margin:12px 0 18px;
}

.stars-row img{
width:140px;     /* largura fixa elegante */
height:auto;
display:block;
}

.review-comment{
font-size:13.5px;
color:#555;
line-height:1.6;
margin-bottom:8px;
max-width:420px;
}

.review-btn{
margin-top:18px;
background:#ff9900;
color:#000;
padding:12px 26px;
border:none;
cursor:pointer;
font-weight:600;
border-radius:10px;
font-size:15px;
box-shadow:0 4px 12px rgba(255,153,0,0.28);
transition:0.2s;
}

.review-btn:hover{
background:#e68a00;
transform:translateY(-2px);
}

.small-note{
margin-top:10px;
font-size:11px;
color:#777;
}

/* ===== DESTAQUE DE PREÇO PREMIUM ===== */

.price-box{
margin-top:10px;
margin-bottom:10px;
}

.old-price{
font-size:16px;
color:#888;
}

.old-price span{
text-decoration:line-through;
color:#999;
}

.new-price{
font-size:24px;
font-weight:700;
color:var(--jbl-orange);
margin-top:3px;
position:relative;
display:inline-block;
}

/* ===== FORÇA COR JBL ===== */

.nav-arrow.active{
background:#FF4A00 !important;
}

.review-btn{
background:#FF4A00 !important;
}

.review-btn:hover{
background:#e63f00 !important;
}

.btn{
background:#FF4A00 !important;
}

.btn:hover{
background:#e63f00 !important;
}

@media (max-width: 768px) {
   /* ajustes só para celular */
}

/* ===== AJUSTES MOBILE ===== */

@media (max-width: 768px){

.hero{
padding:70px 20px 120px 20px;
}

.hero h1{
font-size:28px;
}

.hero p{
font-size:15px;
padding:0 10px;
}

.product-card{
width:95%;
padding:20px;
}

.slide{
flex-direction:column;
gap:25px;
}

.carousel{
max-width:100%;
height:auto;
}

.carousel img{
max-height:250px;
}

.details{
text-align:center;
}

.new-price{
font-size:26px;
}

.btn{
width:100%;
font-size:16px;
padding:14px;
}

.side-arrow{
width:38px;
height:38px;
font-size:18px;
}

}

@media (max-width: 768px){

.amazon-smile{
width:65px;      /* menor */
bottom:-12px;    /* sobe um pouco */
}

}
@media (max-width: 768px){

.product-card{
padding:18px;
}

.slide{
gap:15px;
}

.carousel img{
max-height:200px;
}

.details{
padding:10px 5px;
}

}
@media (max-width: 768px){

.new-price{
font-size:24px;
margin:8px 0;
}

.btn{
margin-top:10px;
}

}
@media (max-width: 768px){

/* HERO mais compacto */
.hero{
padding:60px 15px 90px 15px;
}

/* Logo JBL menor e mais encaixado */
.amazon-smile{
width:55px;
bottom:-8px;
}

/* Card mais compacto */
.product-card{
padding:15px;
}

/* Slide empilhado e compacto */
.slide{
flex-direction:column;
gap:10px;
}

/* Imagem menor */
.carousel{
height:auto;
}

.carousel img{
max-height:180px;
}

/* Texto mais compacto */
.details{
padding:5px;
}

.highlight{
font-size:16px;
margin-bottom:8px;
}

.description{
font-size:13px;
margin-bottom:10px;
}

/* Preço mais próximo */
.price-box{
margin:8px 0;
}

.new-price{
font-size:22px;
}

/* Botão mais próximo do preço */
.btn{
margin-top:8px;
padding:12px;
font-size:15px;
}

}

@media (max-width: 768px){

.carousel{
height:auto !important;
max-height:210px;  /* aumentamos um pouco */
padding:5px 0;
}

.carousel img{
max-height:200px;  /* maior que antes */
width:auto;
}

}

/* DIMINUI ESPAÇO ENTRE ELEMENTOS */
.slide{
gap:8px;
}

/* ENXUGA MAIS O CARD */
.product-card{
padding:12px;
}

.details{
padding:0;
}

/* ENCURTA DESCRIÇÃO */
.description{
margin-bottom:8px;
line-height:1.4;
}

.price-box{
margin:6px 0;
}

.btn{
margin-top:6px;
}


@media (max-width: 768px){

/* PRIMEIRO SLIDE MAIS COMPACTO */
.slide:first-child{
padding-bottom:5px;
}

.slide:first-child .details{
padding-bottom:0;
}

.slide:first-child .trust{
margin-top:8px;
margin-bottom:0;
}

.slide:first-child .description{
margin-bottom:6px;
}

.slide:first-child .price-box{
margin:5px 0;
}

}