:root {
  --pps-dark: #161a1d;
  --pps-lime: #c7f464;
  --pps-gray: #8d949b;
  --bs-body-color: #161a1d;
  --bs-link-color: #161a1d;
  --bs-link-hover-color: #4d6527;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid #6d8c35;
  outline-offset: 3px;
}
.navbar,
.bg-pps-dark {
  background: var(--pps-dark);
}
.navbar .nav-link {
  color: #e1e4e6;
}
.navbar .nav-link:hover {
  color: var(--pps-lime);
}
.navbar-logo {
  width:140px;
}
.navbar-logo img {
  max-width: 100%;
  height: auto;
}
.navbar-toggler-icon {
  width: 1.25rem; /* Ajusta el ancho deseado */
  height: 1.25rem; /* Ajusta el alto deseado */
}
.navbar-toggler {
  padding: 0.30rem 0.30rem; /* Cambia el espacio interno */
  font-size: 1.0rem;    /* Cambia el tamaño de fuente si usas texto o iconos de fuente */
}
.pps-modal-header {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.btn {
  border-radius: 0.7rem;
  font-weight: 650;
}
.btn-lime,
.btn-primary {
  --bs-btn-color: #161a1d;
  --bs-btn-bg: #c7f464;
  --bs-btn-border-color: #c7f464;
  --bs-btn-hover-color: #161a1d;
  --bs-btn-hover-bg: #b5e54d;
  --bs-btn-hover-border-color: #b5e54d;
  --bs-btn-active-color: #161a1d;
  --bs-btn-active-bg: #a9d844;
  --bs-btn-active-border-color: #a9d844;
  --bs-btn-disabled-color: #161a1d;
  --bs-btn-disabled-bg: #c7f464;
  --bs-btn-disabled-border-color: #c7f464;
}
.btn-dark {
  --bs-btn-bg: #161a1d;
}
.cart-count {
  background: #c7f464;
  color: #161a1d;
}
.nav-search {
  max-width: 300px;
}
.nav-search input {
  background: #292e33;
  color: white;
  border-color: #697178;
}
.nav-search input::placeholder {
  color: #c9cdd0;
}
.eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.hero { min-height: 620px; min-height: min(790px, 85svh); background: var(--pps-dark); position: relative; isolation: isolate; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,26,29,.96), rgba(22,26,29,.72) 50%, rgba(22,26,29,.25)); z-index: -1; }

.hero h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.hero-art {
  font-size: clamp(10rem, 23vw, 23rem);
  color: #c7f464;
  transform: rotate(-12deg);
  opacity: 0.85;
}
.section-space {
  padding-block: 4.5rem;
}
.section-heading {
  font-weight: 850;
  letter-spacing: -0.04em;
}
.category-card {
  background: #161a1d;
  color: white;
  border: 0;
  border-radius: 1.3rem;
  padding: 2rem;
  min-height: 190px;
  text-decoration: none;
  transition: transform 0.2s;
}
.category-card:hover {
  color: #c7f464;
  transform: translateY(-4px);
}
.category-card i {
  font-size: 2.3rem;
  color: #c7f464;
}
.products-section,
.account-body {
  background: #f2f3f4;
}
.filter-button {
  border: 1px solid #b4babf;
  background: white;
}
.filter-button.active {
  background: #161a1d;
  color: white;
}

.product-card {
  border: 1px solid #e5e7e9;
  border-radius: 1.2rem;
  overflow: hidden;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(22,26,29,.08);
}
.product-media {
  aspect-ratio: 4/3;
  background: #e6e8e9;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-brand {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #60686f;
}
.old-price {
  color: #677178;
}
.benefits {
  background: #8d949b;
}
.benefit-icon {
  background: #c7f464;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
footer {
  color: #cfd4d7;
}
footer a {
  color: #cfd4d7;
  text-decoration: none;
}
footer a:hover {
  color: #c7f464;
}
.offcanvas {
  --bs-offcanvas-width: 480px;
}
.form-control,
.form-select {
  border-radius: 0.7rem;
  border-color: #b8c0c5;
  padding: 0.65rem 0.85rem;
}
.form-control:focus,
.form-select:focus {
  border-color: #729b32;
  box-shadow: 0 0 0 0.2rem #c7f46455;
}
.form-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.pps-auth .modal-content {
  border: 0;
  border-radius: 1.5rem;
  overflow: hidden;
}
.pps-auth .modal-header {
  background: #161a1d;
  color: white;
  padding: 1.5rem;
}
.pps-auth .modal-body {
  padding: 1.5rem;
}
.pps-auth .nav-pills {
  background: #f2f3f4;
  border-radius: 0.8rem;
  padding: 0.3rem;
}
.pps-auth .nav-link {
  color: #161a1d;
}
.pps-auth .nav-link.active {
  background: #c7f464;
  color: #161a1d;
  font-weight: 700;
}
.account-body .card {
  border: 1px solid #e5e7e9;
  border-radius: 1.2rem;
}
.table th {
  background: #f2f3f4;
  white-space: nowrap;
}
.badge-paid {
  background: #c7f464;
  color: #161a1d;
}
.session-info {
  max-width: 160px;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.form-control[readonly] {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #495057;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

.form-control[readonly]:focus {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #495057;
  box-shadow: none;
  outline: none;
}
#product-form {
  background: #f7f8f8;
}
.newsletter-input {
  background: #292e33;
  color: white;
}
.newsletter-input::placeholder {
  color: #c9cdd0;
}
.pps-header {
  background: var(--pps-dark);
  border-bottom: 1px solid #42494e;
}
/* Pestañas de administración */
#admin-tabs .nav-link {
  padding: 0.75rem 1.25rem;
  border: 1px solid #c8cdd1;
  border-radius: 0.75rem;
  background: #ffffff;
  color: #161a1d;
  font-weight: 700;
}
#admin-tabs .nav-link:hover {
  background: #eef2e7;
}
#admin-tabs .nav-link.active {
  border-color: #c7f464;
  background: #c7f464;
  color: #161a1d;
}
#admin-tabs .nav-link:focus-visible {
  outline: 3px solid #558300;
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .navbar-logo {width:100px;}
  .navbar-logo img {max-width: 100%;height: auto;}
  .navbar .btn {padding: 0.2rem;}
  .section-space {height: 20px;}
  .hero {min-height: 610px;}
  .hero::before { background: rgba(22,26,29,.78); }
  .section-space { padding-block: 3rem; }
  .category-card { min-height: 240px; }
  /* El catálogo crece con sus filas; beneficios continúa en el flujo. */
  #productos {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #product-grid {
    position: static;
    height: auto;
    max-height: none;
  }
  #beneficios {
    position: static;
    clear: both;
    transform: none;
  }

  .session-info {
    max-width: 110px;
    font-size: 0.65rem;
  }
  #account-label {
    font-size: 0.8rem;
  }
  .navbar .btn {
    padding: 0.5rem;
  }
  .hero-art {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}