@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

:root{
  --amarillo:#ffcc00;
  --amarillo-soft:#fff4cc;
  --negro:#111;
  --gris:#666;
}

/* =====================
   GENERAL
===================== */
body{
  background:#fff;
  color:var(--negro);
  font-family:'Segoe UI', system-ui, sans-serif;
  line-height:1.6;
}

/* =====================
   TOP BAR
===================== */
.top-bar{
  width:100%;
  background:#FFD400;
  color:#000;
  font-weight:600;
  padding:6px 0;
  text-align:center;
}

/* =====================
   NAVBAR
===================== */
.navbar{
  border-bottom:1px solid #eee;
  padding:22px 0;
}

/* =====================
   LOGO HEADER
===================== */
.logo-header{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.logo-img{
  height:96px;
  max-width:420px;
  width:auto;

  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;

  filter:contrast(1.05) brightness(1.02);
}


.logo-header{
  position:relative;
  padding-bottom:6px;
}

.logo-header::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:60%;
  height:2px;
  background:var(--amarillo);
  border-radius:2px;
}



.logo-header:hover .logo-img{
  filter:none;
}

/* =====================
   LOGO RESPONSIVE
===================== */
@media(max-width:992px){
  .logo-img{
    height:78px;
    max-width:340px;
  }
}

@media(max-width:768px){
  .navbar{
    padding:14px 0;
  }
  .logo-img{
    height:64px;
    max-width:270px;
  }
}

@media(max-width:576px){
  .logo-img{
    height:56px;
    max-width:230px;
  }
}

/* =====================
   LINKS NAVBAR
===================== */
.navbar-nav .nav-link{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1rem;
  color:#111 !important;
  letter-spacing:1px;
  transition:color .3s ease, transform .3s ease;
}

.navbar-nav .nav-link:hover{
  color:var(--amarillo) !important;
  transform:translateY(-2px);
}

/* =====================
   BOTÓN LOGIN
===================== */
.btn-login{
  border:2px solid var(--amarillo);
  color:#111;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:8px 18px;
  transition:all .3s ease;
}

.btn-login:hover{
  background:var(--amarillo);
  box-shadow:0 0 15px rgba(245,196,0,.6);
  transform:translateY(-2px);
}

/* =====================
   HERO
===================== */
.hero{
  padding:90px 0;
}

.hero .col-md-6:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}

/* =====================
   🔥 REDES SOCIALES HERO
===================== */
.hero-social{
  display:flex;
  gap:16px;
  align-items:center;
}

/* ICONO BASE */
.social-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}

/* EFECTO LUZ */
.social-icon::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 60%);
}

/* HOVER */
.social-icon:hover{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 14px 35px rgba(0,0,0,.45);
}

/* COLORES POR RED */
.social-icon.facebook{ background:#1877f2; }
.social-icon.instagram{
  background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}
.social-icon.whatsapp{ background:#25D366; }
.social-icon.tiktok{ background:#000; }

/* RESPONSIVE REDES */
@media(max-width:576px){
  .hero-social{
    justify-content:center;
  }
  .social-icon{
    width:46px;
    height:46px;
    font-size:22px;
  }
}

/* =====================
   VIDEO LANZAMIENTO
===================== */
.video-con-titulo{
  text-align:center;
  padding:30px 0;
}

.video-titulo{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:15px;
  text-transform:uppercase;
}

.video-lanzamiento{
  width:100%;
  max-width:520px;
  border-radius:18px;
  box-shadow:0 20px 45px rgba(0,0,0,.3);
  display:block;
  margin:0 auto;
}

/* =====================
   CATEGORÍAS
===================== */
.categorias{
  background:#fafafa;
  padding:80px 0;
}

.categoria-card{
  height:320px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  transition:transform .4s ease, box-shadow .4s ease;
}

.categoria-card:hover{
  transform:scale(1.03);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.video-hero{
  width:100%;
  height:100%;
  object-fit:cover;
}

.categoria-overlay{
  position:absolute;
  inset:0;
  padding:20px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1));
  color:#fff;
}

/* =====================
   BADGE
===================== */
.badge-lanzamiento{
  background:var(--amarillo);
  color:#000;
  font-weight:700;
  padding:5px 12px;
  border-radius:12px;
}

/* =====================
   WHATSAPP FIJO
===================== */
.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:9999;
  text-decoration:none;
}

.whatsapp-text{
  background:var(--amarillo);
  color:var(--negro);
  font-weight:700;
  padding:7px 16px;
  border-radius:20px;
}

.whatsapp-float i{
  background:#25D366;
  color:#fff;
  width:52px;
  height:52px;
  font-size:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =====================
   PRODUCTOS
===================== */
.card-img-top{
  width:100%;
  height:220px;
  object-fit:contain;
}

.card{
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}


.qs-content{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.qs-content h2{
  font-size:38px;
  font-weight:900;
  margin-bottom:30px;
  letter-spacing:1px;
  position:relative;
}

.qs-content h2::after{
  content:'';
  width:80px;
  height:4px;
  background:var(--amarillo);
  display:block;
  margin:14px auto 0;
  border-radius:4px;
}

.qs-content p{
  font-size:1.05rem;
  color:#444;
  line-height:1.8;
  margin-bottom:18px;
}

.qs-content strong{
  color:#111;
}

.qs-highlight{
  display:inline-block;
  margin-top:25px;
  padding:12px 22px;
  background:var(--amarillo);
  color:#000;
  font-weight:700;
  border-radius:30px;
  font-size:.95rem;
}

/* RESPONSIVE */
@media(max-width:768px){
  .qs-content h2{
    font-size:30px;
  }

  .qs-content p{
    font-size:1rem;
  }
}