/* ============================================================
   Aquapro.cl — Estilos personalizados sobre Bootstrap 5
   ============================================================ */

:root {
  --aq-navy:    #0A2540;
  --aq-cyan:    #06B6D4;
  --aq-green:   #10B981;
  --aq-amber:   #F59E0B;
  --aq-red:     #FF6B6B;
  --aq-light:   #F8FAFB;
}

/* ── TIPOGRAFÍA ── */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #111827; }
h1,h2,h3,h4,.fw-black { font-weight: 900 !important; }
.text-cyan  { color: var(--aq-cyan)  !important; }
.text-navy  { color: var(--aq-navy)  !important; }
.text-green { color: var(--aq-green) !important; }
.bg-navy    { background-color: var(--aq-navy)  !important; }
.bg-cyan    { background-color: var(--aq-cyan)  !important; }
.bg-light-aq{ background-color: var(--aq-light) !important; }

/* ── NAVBAR ── */
#topbar { background: var(--aq-navy); font-size: .75rem; padding: .4rem 0; }
#mainNav { background: #fff; border-bottom: 1px solid #f1f1f1; }
#mainNav .nav-link { color: var(--aq-navy); font-weight: 600; font-size: .875rem; padding: .5rem .75rem; transition: color .2s; }
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: var(--aq-cyan); }
.navbar-brand span.brand-accent { color: var(--aq-cyan); }
.logo-circle { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cart-badge { position: absolute; top: -4px; right: -6px; width: 18px; height: 18px; background: var(--aq-red); border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }

/* ── HERO SLIDER ── */
#heroSlider { height: 100vh; min-height: 700px; }
#heroSlider .carousel-item { height: 100vh; min-height: 700px; }
#heroSlider .carousel-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#heroSlider .slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,37,64,.85) 0%, rgba(10,37,64,.55) 50%, transparent 100%),
              linear-gradient(to top,   rgba(10,37,64,.6) 0%, transparent 60%);
}
#heroSlider .slide-content { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 6rem; }
.slide-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: .35rem 1rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; color: #fff; margin-bottom: .75rem;
}
.slide-tag .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hero-info-card {
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; padding: 1.25rem;
  min-width: 240px;
}
.hero-info-card .icon-box { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; border: none; opacity: .4; transition: all .3s; }
.carousel-indicators button.active { width: 28px; border-radius: 999px; opacity: 1; }
.carousel-control-prev, .carousel-control-next {
  width: 40px; height: 40px; top: 50%; transform: translateY(-50%); bottom: auto;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; opacity: 1;
}
.carousel-control-prev { left: 1rem; } .carousel-control-next { right: 1rem; }

/* ── SECCIÓN CATEGORÍAS ── */
.cat-card { position: relative; overflow: hidden; border-radius: 1rem; display: block; text-decoration: none; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.cat-card:hover img { transform: scale(1.05); }
.cat-card .cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,37,64,.8) 0%, rgba(10,37,64,.15) 60%, transparent 100%); }
.cat-card .cat-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem; }
.cat-card .cat-count { font-size: .7rem; color: var(--aq-cyan); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cat-card .cat-name { color: #fff; font-weight: 800; line-height: 1.2; margin: .2rem 0 0; font-size: 1.25rem; }
.cat-card .cat-arrow { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; }
.cat-card:hover .cat-arrow { background: var(--aq-cyan); }

/* ── PRODUCT CARD ── */
.product-card { border: 1px solid #f1f1f1; border-radius: 1rem; overflow: hidden; transition: transform .3s, border-color .3s; background: #fff; }
.product-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.3); }
.product-img-wrap { background: linear-gradient(135deg,#E8F4F8,#D1E9F0); padding: 2rem; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.product-img-wrap img { max-width: 100%; max-height: 160px; object-fit: contain; object-position: top; transition: transform .5s; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.badge-product { position: absolute; top: .75rem; left: .75rem; font-size: .65rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; }
.badge-discount { position: absolute; top: .75rem; right: .75rem; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700; padding: .25rem .5rem; border-radius: 999px; }
.product-body { padding: 1.1rem; }
.product-brand { font-size: .7rem; color: var(--aq-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.product-name { font-weight: 700; font-size: .875rem; line-height: 1.4; color: var(--aq-navy); margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-name:hover { color: var(--aq-cyan); }
.product-price { font-size: 1.25rem; font-weight: 900; color: var(--aq-navy); }
.product-price-old { font-size: .8rem; color: #9ca3af; text-decoration: line-through; }
.stars i { font-size: .75rem; }
.qty-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; background: #fff; border-radius: .5rem; cursor: pointer; font-weight: 700; font-size: 1rem; color: var(--aq-navy); transition: background .2s; }
.qty-btn:hover { background: #f3f4f6; }
.qty-display { width: 32px; text-align: center; font-weight: 700; font-size: .875rem; color: var(--aq-navy); }
.btn-add { flex: 1; height: 32px; font-size: .75rem; font-weight: 700; border-radius: .5rem; border: none; background: var(--aq-navy); color: #fff; transition: background .2s; }
.btn-add:hover, .btn-add.added { background: var(--aq-green); }
.btn-detail { height: 32px; font-size: .75rem; font-weight: 700; border-radius: .5rem; border: 1.5px solid var(--aq-navy); background: transparent; color: var(--aq-navy); width: 100%; margin-top: .5rem; transition: all .2s; }
.btn-detail:hover { background: var(--aq-navy); color: #fff; }

/* ── BENEFITS ── */
.benefit-card { background: rgba(255,255,255,.05); border-radius: 1.5rem; overflow: hidden; }
.benefit-img { position: relative; height: 260px; overflow: hidden; }
.benefit-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.benefit-img .overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,37,64,.6), transparent); }
.benefit-stat { position: absolute; bottom: 1rem; left: 1rem; }
.benefit-icon-box { width: 48px; height: 48px; background: rgba(6,182,212,.2); border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-pill { background: rgba(255,255,255,.05); border-radius: 1rem; padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.feature-pill .fp-icon { width: 44px; height: 44px; background: rgba(6,182,212,.2); border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── TESTIMONIOS ── */
.testi-card { background: #fff; border: 1px solid #f1f1f1; border-radius: 1rem; padding: 1.75rem; height: 100%; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(6,182,212,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; color: var(--aq-cyan); flex-shrink: 0; }

/* ── BLOG ── */
.blog-featured { position: relative; border-radius: 1.25rem; overflow: hidden; min-height: 400px; display: block; text-decoration: none; }
.blog-featured img { width: 100%; height: 100%; object-fit: cover; object-position: top; min-height: 400px; transition: transform .5s; }
.blog-featured:hover img { transform: scale(1.03); }
.blog-featured .bf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #0A2540 10%, rgba(10,37,64,.3) 50%, transparent 100%); }
.blog-featured .bf-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.blog-side-card { display: flex; gap: 1rem; background: #fff; border: 1px solid #f1f1f1; border-radius: 1rem; padding: 1rem; text-decoration: none; transition: border-color .2s; }
.blog-side-card:hover { border-color: rgba(6,182,212,.3); }
.blog-side-card img { width: 96px; height: 96px; border-radius: .75rem; object-fit: cover; flex-shrink: 0; }
.blog-card { border-radius: 1rem; overflow: hidden; border: 1px solid #f1f1f1; text-decoration: none; display: block; transition: transform .3s, border-color .3s; background: #fff; }
.blog-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.3); }
.blog-card img { height: 192px; object-fit: cover; width: 100%; }

/* ── FOOTER ── */
.footer-main { background: #0A1628; }
.footer-link { color: rgba(255,255,255,.5); font-size: .875rem; text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--aq-cyan); }
.social-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); text-decoration: none; transition: all .2s; }
.social-btn:hover { border-color: var(--aq-cyan); color: var(--aq-cyan); }

/* ── TIENDA SIDEBAR ── */
.filter-card { background: #fff; border: 1px solid #f1f1f1; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
.filter-card h6 { font-weight: 700; color: var(--aq-navy); margin-bottom: .75rem; font-size: .875rem; }
.form-check-input:checked { background-color: var(--aq-cyan); border-color: var(--aq-cyan); }
.form-select:focus, .form-control:focus { border-color: var(--aq-cyan); box-shadow: 0 0 0 .15rem rgba(6,182,212,.2); }

/* ── MODALES / SEARCH ── */
.search-modal .modal-content { border: none; border-radius: 1.25rem; overflow: hidden; }
.search-chip { font-size: .75rem; background: #f3f4f6; border: none; border-radius: 999px; padding: .35rem .85rem; color: #4b5563; cursor: pointer; transition: all .2s; }
.search-chip:hover { background: rgba(6,182,212,.1); color: var(--aq-cyan); }

/* ── UTILS ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rounded-xl { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.25rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-pill-aq { border-radius: 999px; }
.btn-cyan { background: var(--aq-cyan); color: #fff; border: none; border-radius: 999px; font-weight: 700; padding: .75rem 2rem; transition: all .2s; }
.btn-cyan:hover { background: var(--aq-navy); color: #fff; }
.btn-navy { background: var(--aq-navy); color: #fff; border: none; border-radius: 999px; font-weight: 700; padding: .75rem 2rem; transition: all .2s; }
.btn-navy:hover { background: var(--aq-cyan); color: #fff; }
.btn-outline-cyan { background: transparent; border: 2px solid var(--aq-cyan); color: var(--aq-cyan); border-radius: 999px; font-weight: 700; padding: .75rem 2rem; transition: all .2s; }
.btn-outline-cyan:hover { background: var(--aq-cyan); color: #fff; }
.section-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aq-cyan); display: block; margin-bottom: .5rem; }

/* ── SCROLLBAR OCULTA EN BRAND SCROLL ── */
.brands-scroll { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── RESPONSIVE FIXES ── */
@media (max-width: 991px) {
  #heroSlider, #heroSlider .carousel-item { height: 100svh; min-height: 600px; }
  .hero-info-card { display: none; }
}
@media (max-width: 575px) {
  #heroSlider, #heroSlider .carousel-item { min-height: 540px; }
}