/* Estilo profesional (solo apariencia) */
:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --accent2:#4f46e5;
  --good:#22c55e;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:16px;
}

/* Fondo */
body{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(79,70,229,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg0));
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Contenedor */
.container{ max-width: 1200px; }

/* Navbar / header */
.navbar, .top-bar, .header-bar{
  background: rgba(15,23,42,.55) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar a, .navbar-brand, .navbar-nav .nav-link{
  color: rgba(255,255,255,.92) !important;
}
.navbar a:hover, .navbar-nav .nav-link:hover{
  color: #fff !important;
}

/* Botones */
.btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.btn-primary, .btn-success{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(124,58,237,.22);
}
.btn-primary:hover, .btn-success:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-outline-light{
  border-color: rgba(255,255,255,.16) !important;
}

/* Cards / productos */
.card, .apk-card, .product-card, .item-card{
  background: rgba(18,26,43,.70) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card:hover, .apk-card:hover, .product-card:hover, .item-card:hover{
  transform: translateY(-2px);
  transition: .18s ease;
}
.card-title, .apk-title, .product-title{
  font-weight: 800;
  letter-spacing: .2px;
}
.card-text, .apk-desc, .product-desc{
  color: var(--muted) !important;
}

/* Imágenes */
.card img, .apk-card img, .product-card img{
  border-radius: 14px;
}

/* Badges/precios */
.badge, .price, .tag{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Formularios */
.form-control, textarea, select, input{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* Banner / carrusel */
.banner, .banner-item, .carousel-item{
  background: transparent !important;
}
.carousel-inner{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}

/* Menú desplegable */
.dropdown-menu{
  background: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
}
.dropdown-item{
  color: rgba(255,255,255,.92) !important;
}
.dropdown-item:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Separaciones */
.section-title, h1, h2, h3{
  letter-spacing: .2px;
}
.hr, hr{
  border-color: rgba(255,255,255,.10) !important;
}


/* ===== Responsive completo (PC / Tablet / Móvil) ===== */
*{ -webkit-tap-highlight-color: transparent; }
html, body{ overflow-x:hidden; }
img, video{ max-width:100%; height:auto; }

/* Zonas clicables */
button, .btn, a.btn, .dropdown-item{ min-height: 40px; }

/* Desktop grande (>=1200px) */
@media (min-width: 1200px){
  .container{ max-width: 1240px; }
  .card, .apk-card, .product-card, .item-card{ border-radius: 18px !important; }
  h1{ font-size: 40px !important; }
  h2{ font-size: 28px !important; }
  .navbar-brand{ font-size: 20px !important; }
  :root{ --banner-img-h: 320px; }
}

/* Desktop / Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px){
  .container{ max-width: 1100px; }
  h1{ font-size: 36px !important; }
  h2{ font-size: 26px !important; }
  :root{ --banner-img-h: 300px; }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px){
  .container{ padding-left: 16px; padding-right: 16px; }
  .navbar-brand{ font-size: 18px !important; font-weight: 800 !important; }
  .navbar-nav .nav-link{ padding: 10px 10px !important; }
  h1{ font-size: 30px !important; }
  h2{ font-size: 22px !important; }
  p, .card-text{ font-size: 14px !important; }
  :root{ --banner-img-h: 240px; }
}

/* Móvil (<=767px) */
@media (max-width: 767.98px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .navbar, .top-bar, .header-bar{ padding-top: 8px !important; padding-bottom: 8px !important; }
  .navbar-brand{ font-size: 16px !important; font-weight: 800 !important; }
  h1{ font-size: 26px !important; }
  h2{ font-size: 20px !important; }
  h3{ font-size: 18px !important; }
  p, .card-text{ font-size: 14px !important; }
  .row{ margin-left: -8px; margin-right: -8px; }
  .row > [class^="col-"], .row > [class*=" col-"]{ padding-left: 8px; padding-right: 8px; }
  :root{ --banner-img-h: 200px; }
}

/* Móvil pequeño (<=576px): botones full y dropdown cómodo */
@media (max-width: 575.98px){
  .btn{ width: 100%; }
  .btn + .btn{ margin-top: 10px; }
  .dropdown-menu{
    width: 92vw !important;
    max-width: 92vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .dropdown-item{ padding: 12px 14px !important; font-size: 15px !important; }
  .form-control, textarea, select, input{ min-height: 44px !important; font-size: 16px !important; } /* evita zoom iOS */
}

/* Tablas: scroll horizontal suave en móvil/tablet */
.table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}