/* =========================
   estilos-nelson.css (COMPLETO)
   ✅ Menú: subrayado SOLO en links con .nav-scroll
   ✅ Inicio / Nosotros / Contactanos: NO se subrayan (solo active-page amarillo)
   ✅ Header fijo sin espacio grande arriba (responsive)
========================= */

body { background-color: rgb(231, 230, 230); }

/* estilo aplicado por nelson */
.bg-marca { background-color: rgb(231, 230, 230); }
.bg-opciones { background-color: #0039a1; }

/* Botón buscar */
.btn1 { background-color: #0039a1; color: white; }
.btn1:hover { background-color: red; color: white; }

/* Botones principales */
.btn2{
  background-color: #0039a1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  text-align: center;
  white-space: nowrap;
}
.btn2:hover { background-color: red; color: white; }

.subtitulos { font-weight: bold; }
.precio { font-weight: bold; color: red; }

/* TITULOS responsive */
.TITULOS{
  font-weight: bold;
  font-size: clamp(24px, 4vw, 40px);
  color: #0039a1;
}

/* ✅ mejor que width fijo */
#contenedor-detalles,
#contenedor-caracteristicas{
  background-color: white;
  max-width: 1100px;
  margin: 0 auto;
}

/* links generales */
a { text-decoration: none; color: black; }

/* Botones en cards */
.botones{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.botones a { flex: 1; text-align: center; }

@media (max-width: 576px){
  .botones { flex-direction: column; }
  #contenedor-detalles, #contenedor-caracteristicas { max-width: 95%; }
}

.card-img-top{
  padding-top: 15px;
  object-fit: contain;
  max-height: 200px;
}
.card { padding-top: 10px; }

.card-text{
  font-size: large;
  font-weight: bold;
  color: #0039a1;
}

/* ===== HOVER PRO: card + imagen ===== */
.product-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.15);
}
.product-card .card-img-top{
  transition: transform .25s ease;
}
.product-card:hover .card-img-top{
  transform: scale(1.03);
}

/* Productos clickeables */
.product-open{ cursor: pointer; }
.product-open:hover{ opacity: 0.9; transition: 0.2s ease; }
.product-open:hover{ color: red; }

/* ===== Carrito ===== */
.modal-title i { color: #0039a1; margin-right: 6px; }
#btnBuyWA { font-weight: bold; }
.table td, .table th { vertical-align: middle; }

/* ===== FOOTER ===== */
.footer-tec { background-color: #0039a1; color: white; }
.footer-title { font-weight: bold; margin-bottom: 15px; }
.footer-text { font-size: 14px; line-height: 1.6; }

.footer-list { list-style: none; padding: 0; }
.footer-list li { margin-bottom: 8px; font-size: 14px; }
.footer-list i { margin-right: 8px; color: #ffdd00; }

.social-icons a{
  font-size: 26px;
  margin-right: 15px;
  color: white;
  transition: 0.3s;
}
.social-icons a:hover { color: #ffdd00; }

.footer-line { border-color: rgba(255, 255, 255, 0.3); }
.footer-copy { font-size: 14px; }

.payment-icons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 15px;
}
.payment-icons img{
  height: 35px;
  background: white;
  padding: 6px;
  border-radius: 6px;
}

/* WhatsApp flotante */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  z-index: 9999;
}
.wa-float:hover{ filter: brightness(0.95); color: #fff; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* =======================
   HEADER FIJO (RESPONSIVE)
======================= */
.header-sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: rgb(231, 230, 230);
}

/* Desktop */
body{
  padding-top: 170px;
  scroll-padding-top: 170px;
}

/* Tablet */
@media (max-width: 992px){
  body{
    padding-top: 150px;
    scroll-padding-top: 150px;
  }
}

/* Móvil */
@media (max-width: 576px){
  body{
    padding-top: 125px;
    scroll-padding-top: 125px;
  }
}

/* Móvil chico */
@media (max-width: 360px){
  body{
    padding-top: 115px;
    scroll-padding-top: 115px;
  }
}

.product-section{
  scroll-margin-top: 170px; /* ok para desktop */
}
@media (max-width: 992px){
  .product-section{ scroll-margin-top: 150px; }
}
@media (max-width: 576px){
  .product-section{ scroll-margin-top: 125px; }
}
@media (max-width: 360px){
  .product-section{ scroll-margin-top: 115px; }
}

/* =======================
   ESPECIFICACIONES (DETALLES)
======================= */
.spec-list{ padding: 6px 0; }

.spec-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.spec-title{
  font-weight: bold;
  color: #0039a1;
  min-width: 260px;
}

@media (max-width: 576px){
  .spec-item{ flex-direction: column; gap: 4px; }
  .spec-title{ min-width: auto; }
}

#d-titulo{
  font-weight: bold;
  color: #0039a1;
  min-width: 260px;
}

/* =======================
   FAQ con imagen
======================= */
.faq-img-box{
  position: relative;
  height: 100%;
  min-height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f6f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.faq-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.faq-logo{
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 120px;
  max-width: 45%;
  background: rgba(255,255,255,.85);
  padding: 6px 10px;
  border-radius: 10px;
}

@media (max-width: 992px){
  .faq-img-box{ min-height: 200px; }
  .faq-logo{ width: 110px; }
}

/* =======================
   NAV OPCIONES (MENÚ AZUL)
======================= */

/* ✅ Todos los links SIEMPRE blancos por defecto */
.bg-opciones .navbar-nav .nav-link{
  color: #ffffff !important;
}

/* SOLO los links de secciones (#sec-...) */
.bg-opciones .navbar-nav .nav-link.nav-scroll{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  transition: transform .25s ease;
}

/* Subrayado animado SOLO nav-scroll */
.bg-opciones .navbar-nav .nav-link.nav-scroll::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
  opacity: 0;
  transition: width .25s ease, opacity .25s ease;
}

/* Hover SOLO nav-scroll */
.bg-opciones .navbar-nav .nav-link.nav-scroll:hover{
  transform: scale(1.06);
}
.bg-opciones .navbar-nav .nav-link.nav-scroll:hover::after{
  width: 70%;
  opacity: 1;
}

/* Activo SOLO nav-scroll */
.bg-opciones .navbar-nav .nav-link.nav-scroll.active-scroll{
  color: #ffffff !important;
}
.bg-opciones .navbar-nav .nav-link.nav-scroll.active-scroll::after{
  width: 70%;
  opacity: 1;
  background: #ffffff;
}

/* evita doble subrayado del h5 en secciones */
.bg-opciones .navbar-nav .nav-link.nav-scroll.active-scroll h5{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  color: inherit !important;
}

/* ===============================
   ACTIVE PAGE (NOSOTROS / CONTACTO)
   ✅ SOLO si en el HTML pones active-page en 1 link
================================ */
/* ===============================
   ACTIVE PAGE (INICIO / NOSOTROS / CONTACTO)
   ✅ Amarillo neón PRO
   ❌ SIN subrayado
================================ */

.bg-opciones .navbar-nav .nav-link.active-page{
  color: #FFD800 !important;         /* amarillo neón */
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,216,0,.75),
               0 0 18px rgba(255,216,0,.45);
}

/* ❌ quitar subrayado neón */
.bg-opciones .navbar-nav .nav-link.active-page::after{
  display: none !important;
}

/* evita doble subrayado del h5 */
.bg-opciones .navbar-nav .nav-link.active-page h5{
  color: inherit !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* sin zoom */
.bg-opciones .navbar-nav .nav-link.active-page:hover{
  transform: none !important;
}


/* evita doble subrayado del h5 */
.bg-opciones .navbar-nav .nav-link.active-page h5{
  color: inherit !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* =========================
   NAV TOP (logo + buscador + carrito en 1 línea)
   ✅ Solo funciona si en tu HTML agregas las clases:
   nav-top-tec / logo-tec / btn-cart-tec
========================= */

.nav-top-tec .container-fluid{
  flex-wrap: nowrap;
  gap: 10px;
}

.logo-tec{
  width: 120px;
  height: auto;
  display: block;
}

.btn-cart-tec{
  padding: 8px 10px;
  border-radius: 10px;
}

/* En móviles: logo + inputs más compactos */
@media (max-width: 576px){
  .logo-tec{ width: 84px; }

  #searchInput{
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .btn1{ padding: 8px 10px; }
  .btn-cart-tec{ padding: 8px 10px; }
}

@media (max-width: 360px){
  .logo-tec{ width: 74px; }
  #searchInput{ font-size: 13px; }
}

/* ===============================
   HOVER SUTIL PARA LINKS DE PÁGINA
   (INICIO / NOSOTROS / CONTACTANOS)
================================ */

/* hover con zoom suave */
.bg-opciones .navbar-nav .nav-link:not(.nav-scroll):hover{
  transform: scale(1.06);           /* mismo zoom sutil */
  transition: transform .25s ease;
}

/* asegura que NO aparezca subrayado */
.bg-opciones .navbar-nav .nav-link:not(.nav-scroll):hover::after{
  display: none !important;
}

/* ===============================
   BOTONES WHATSAPP – MOBILE FIX
   (centrados y elegantes)
================================ */

/* base: centrado y buen look */
.btn-whatsapp-fix{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: normal;          /* permite salto de línea */
}

/* 📱 móvil */
@media (max-width: 576px){
  .btn-whatsapp-fix{
    width: 100%;
    max-width: 320px;           /* 👈 evita que se vea gigante */
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.3;
  }
}