:root {
  --praxis-red: #c0392b;
  --praxis-red-dark: #a93226;
  --praxis-red-light: #fdf0ef;
  --praxis-dark: #1a1a2e;
  --praxis-dark2: #16213e;
  --praxis-gray: #6c757d;
  --praxis-gray-light: #adb5bd;
  --praxis-light: #f5f6fa;
  --praxis-white: #fff;
  --praxis-green: #27ae60;
  --praxis-yellow: #f39c12;
  --praxis-orange: #e67e22;
  --praxis-border: #e9ecef;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-sm: 8px;
}

/* Fuente de reemplazo con las medidas de Inter.
   Mientras Inter no llega, el texto se dibuja con Arial; Inter es mas ancha,
   asi que al cambiar de fuente el texto se reacomodaba y empujaba lo que
   seguia. Lighthouse lo media como el mayor salto de la portada (CLS 0,193,
   causa "Web font loaded", en las tarjetas de Impresoras/Escaneres/Plotters).
   Con estos ajustes Arial ocupa practicamente lo mismo que Inter, y el cambio
   no mueve nada. Son los valores que publica Next.js para Inter sobre Arial.
   Roboto va como segunda opcion porque Android no trae Arial. */
/* El panel NO carga Inter (no incluye la hoja de Google Fonts), asi que se
   dibujaba con Segoe UI. Al sumar 'Inter Fallback' a la pila paso a usar esa,
   que es Arial estirada al 107% para imitar las medidas de Inter: en el panel
   se notaba como un cambio de tipografia y de tamano. La pila de reemplazo
   solo tiene sentido donde Inter se carga de verdad. */
body.panel-admin {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Roboto');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}


* { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #333;
  background: var(--praxis-light);
  margin: 0;
}

/* === PROMO BAR === */
.promo-bar {
  background: var(--praxis-dark);
  color: rgba(255,255,255,.9);
  font-size: .78rem;
  padding: .45rem 0;
  text-align: center;
  letter-spacing: .3px;
  font-weight: 500;
}
.promo-bar i { color: var(--praxis-red); margin-right: .35rem; }
.promo-bar .bi-truck,
.features-bar .bi-truck {
  display: inline-block;
  animation: truck-roll 2s ease-in-out infinite;
}
.features-bar .bi-shield-check {
  display: inline-block;
  animation: shield-pulse 2.5s ease-in-out infinite;
}
@keyframes shield-pulse {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.25); }
  55%       { transform: scale(1.1); }
  70%       { transform: scale(1.2); }
}
.features-bar .bi-arrow-repeat {
  display: inline-block;
  animation: spin-repeat 2s linear infinite;
}
@keyframes spin-repeat {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.features-bar .bi-headset {
  display: inline-block;
  animation: headset-ring 2.5s ease-in-out infinite;
}
@keyframes headset-ring {
  0%, 80%, 100% { transform: rotate(0deg); }
  85%           { transform: rotate(-15deg); }
  90%           { transform: rotate(15deg); }
  95%           { transform: rotate(-10deg); }
}
@keyframes truck-roll {
  0%   { transform: translateX(-6px); }
  50%  { transform: translateX(4px) translateY(-1px); }
  60%  { transform: translateX(5px) translateY(0); }
  70%  { transform: translateX(4px) translateY(-1px); }
  100% { transform: translateX(-6px); }
}
.promo-bar strong { color: #fff; }

/* === NAVBAR === */
.navbar-praxis {
  background: var(--praxis-white);
  padding: .6rem 0;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--praxis-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navbar-praxis .navbar-brand {
  color: var(--praxis-dark);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.5px;
}
.navbar-praxis .navbar-brand span {
  color: var(--praxis-red);
}
.navbar-praxis .nav-link {
  color: #444;
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem .9rem !important;
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.navbar-praxis .nav-link:hover,
.navbar-praxis .nav-link.active {
  color: var(--praxis-red);
  background: var(--praxis-red-light);
}
.navbar-praxis .badge {
  background: var(--praxis-red);
  font-size: .65rem;
}
.search-wrapper { position: relative; max-width: 360px; flex: 1; }
.search-box { width: 100%; }
.search-box .form-control {
  border-radius: 25px;
  border: 2px solid var(--praxis-border);
  padding: .5rem 1.2rem;
  font-size: .88rem;
  background: var(--praxis-light);
  transition: border-color .2s, box-shadow .2s;
}
.search-box .form-control:focus {
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
  background: #fff;
}
.btn-cart-nav {
  background: var(--praxis-red);
  color: #fff !important;
  font-weight: 600;
  font-size: .88rem;
  border-radius: 25px;
  padding: .45rem 1.2rem;
  border: none;
  transition: background .2s, transform .15s;
  text-decoration: none;
}
.btn-cart-nav:hover {
  background: var(--praxis-red-dark);
  transform: scale(1.03);
  color: #fff !important;
}
.btn-cart-nav .cart-badge {
  background: #fff;
  color: var(--praxis-red);
  font-size: .65rem;
  font-weight: 700;
}

/* === HERO === */
/* El encabezado lo arma app.js despues de cargar. Sin esto #header mide cero
   hasta ese momento y, al aparecer el menu, empuja la pagina entera hacia
   abajo: ese salto es el CLS que marcaba PageSpeed. Se reserva el alto medido
   (barra de promocion + menu): 143 px, y 158 en celular, donde la barra
   ocupa dos renglones. Si el encabezado cambia de alto, actualizar aca. */
#header { min-height: 143px; }
@media (max-width: 575.98px) {
  #header { min-height: 158px; }
}

.hero {
  color: white;
  padding: 2rem 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;

  /* El fondo se pinta con el CSS, que ya es render-blocking: aparece junto con
     el resto de la pagina en vez de dejar un hueco hasta que el video tenga su
     primer cuadro. No es un archivo, asi que no agrega ninguna peticion. */
  background: radial-gradient(120% 100% at 30% 0%, #2b3350 0%, #1a1f2e 55%, #12151f 100%);
}
/* Portada del hero en computadora: el primer cuadro del video, en WebP
   (20 KB). Se ve apenas carga la pagina y el video aparece encima despues,
   con un fundido, sin salto porque es la misma imagen.
   SOLO desde 768 px. En celular no hay video (home.js no lo baja) y tampoco
   portada: medido con Lighthouse, una imagen ahi pasaba a ser el LCP y se
   dibujaba despues que el titulo, que es texto. Sin ella el LCP es el titulo
   y la portada de celular queda con el degradado de .hero. */
@media (min-width: 768px) {
  .hero-con-video {
    background:
      url('../video/hero-poster-1280.webp') center / cover no-repeat,
      radial-gradient(120% 100% at 30% 0%, #2b3350 0%, #1a1f2e 55%, #12151f 100%);
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Se revela recien con el primer cuadro (clase puesta desde home.js). Sin
     esto se veia el rectangulo negro del <video> antes de tener imagen. */
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}
.hero .banner-slides { position: absolute; inset: 0; z-index: 1; }
.hero .banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero .banner-slide.active { opacity: 1; }
.hero .banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.45) 100%);
  z-index: 1;
}
.hero .banner-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero .banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .3s;
}
.hero .banner-dot.active { background: var(--praxis-red); }
.hero .container { position: relative; z-index: 2; }
.hero-headline {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
  max-width: 820px;
  margin: 0 auto;
}
.hero-accent {
  color: var(--praxis-red);
  font-style: italic;
}
.hero-logo {
  max-width: 360px;
  max-height: 280px;
  width: auto;
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(2px 3px 6px rgba(0,0,0,.5));
}
.hero-desc {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 1px 2px 6px rgba(0,0,0,.5);
}

/* === CATEGORY TABS (Epson-style) === */
.category-nav {
  background: #fff;
  border-bottom: 1px solid var(--praxis-border);
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav .nav-pills {
  display: flex;
  gap: .25rem;
  padding: .5rem 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.category-nav .cat-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  border-radius: 25px;
  transition: all .2s;
  white-space: nowrap;
}
.category-nav .cat-tab:hover {
  background: var(--praxis-red-light);
  color: var(--praxis-red);
}
.category-nav .cat-tab.active {
  background: var(--praxis-red);
  color: #fff;
}
.category-nav .cat-tab i { font-size: 1rem; }

/* === SECTION HEADERS === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-top: 2.5rem;
}
.section-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0;
  letter-spacing: -.3px;
}
.btn-ver-todos,
.section-header .see-all,
.featured-header .see-all,
.alquiler-home-cta,
.btn-featured-all,
.btn-praxis-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  color: var(--praxis-red);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  border: 2px solid var(--praxis-red);
  padding: .5rem 1.2rem;
  border-radius: 8px;
  transition: background .2s, color .2s;
  flex-shrink: 0;
  background: transparent;
  cursor: pointer;
}
.btn-ver-todos:hover,
.section-header .see-all:hover,
.featured-header .see-all:hover,
.alquiler-home-cta:hover,
.btn-featured-all:hover,
.btn-praxis-all:hover {
  background: var(--praxis-red);
  color: #fff;
  transform: none;
}

/* === PRODUCT CARD (New Clean Design) === */
.product-card {
  border: 1px solid var(--praxis-border);
  border-radius: var(--radius);
  transition: all .25s;
  overflow: hidden;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.product-card .card-brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .9rem;
  border-bottom: 1px solid #f0f2f5;
  min-height: 36px;
}
.product-card .brand-name {
  font-size: .75rem;
  font-weight: 800;
  color: var(--praxis-gray);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.product-card .origin-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.product-card .origin-praxis {
  background: var(--praxis-red);
  color: #fff;
}
.product-card .card-img-wrap {
  position: relative;
  background: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.product-card .card-img-top {
  height: 160px;
  width: 100%;
  object-fit: contain;
  transition: transform .3s;
  padding: 0;
  background: transparent;
}
.product-card:hover .card-img-top { transform: scale(1.05); }
.product-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .8rem 1rem;
}
.product-card .card-title {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .3rem;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .card-title a {
  color: inherit;
  text-decoration: none;
}
.product-card .card-title a:hover { color: var(--praxis-red); }
.product-card .card-code {
  font-size: .72rem;
  color: var(--praxis-gray-light);
  margin-bottom: .5rem;
  font-family: monospace;
}
.product-card .price-block { margin-top: auto; }
.product-card .price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--praxis-dark);
  line-height: 1.2;
}
.product-card .price-usd {
  font-size: .75rem;
  color: var(--praxis-gray-light);
  font-weight: 500;
}
.product-card .price-consultar {
  font-size: 1rem;
  font-weight: 700;
  color: var(--praxis-red);
}
.product-card .card-stock-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid #f5f6f8;
}
.product-card .stock-units {
  font-size: .72rem;
  color: var(--praxis-gray);
  font-weight: 500;
}
.product-card .card-footer {
  background: transparent;
  border-top: 1px solid #f0f2f5;
  padding: .65rem .9rem;
}
.product-card .btn-cotizar {
  background: var(--praxis-red);
  border: none;
  color: white;
  font-weight: 600;
  font-size: .82rem;
  border-radius: var(--radius-sm);
  width: 100%;
  padding: .5rem;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.product-card .btn-cotizar:hover {
  background: var(--praxis-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192,57,43,.3);
}

/* === PRODUCT CAROUSEL === */
.product-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.product-carousel::-webkit-scrollbar { display: none; }
/* Pocos productos que entran enteros (destacados): centrados, sin desplazar */
.product-carousel.carrusel-estatico { justify-content: center; }
.product-carousel > .product-card-wrap {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

/* === CATEGORY GRID (Home) === */
.cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.cat-pill {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: 8px;
  padding: .6rem 1.1rem .6rem .7rem;
  text-decoration: none;
  color: var(--praxis-dark);
  transition: all .2s;
  flex: 0 0 auto;
}
.cat-pill:hover {
  border-color: var(--praxis-red);
  box-shadow: var(--shadow-md);
  color: var(--praxis-red);
  transform: translateY(-2px);
}
.cat-pill .cat-icon {
  width: 38px;
  height: 38px;
  background: var(--praxis-red-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--praxis-red);
  flex-shrink: 0;
  transition: all .2s;
}
.cat-pill:hover .cat-icon {
  background: var(--praxis-red);
  color: #fff;
}
.cat-pill .cat-info { line-height: 1.2; }
.cat-pill .cat-name {
  font-weight: 700;
  font-size: .85rem;
  display: block;
}
.cat-pill .cat-count {
  font-size: .72rem;
  color: var(--praxis-gray);
  font-weight: 500;
}

/* === DEALER BAR === */
.dealer-bar {
  background: var(--praxis-dark);
  padding: .6rem 0;
  border-bottom: 2px solid var(--praxis-red);
}
.dealer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.dealer-label {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dealer-label i { color: var(--praxis-red); font-size: 1rem; }
.dealer-logo-hp {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.dealer-logo-ricoh {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

/* === FEATURES BAR === */
.features-bar {
  background: #fff;
  border-bottom: 1px solid var(--praxis-border);
  padding: 1.2rem 0;
}
.features-bar .feature {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
}
.features-bar .feature i {
  font-size: 1.3rem;
  color: var(--praxis-red);
}
.features-bar .feature span {
  font-size: .82rem;
  font-weight: 600;
  color: #444;
}
.features-bar .feature small {
  font-size: .72rem;
  color: var(--praxis-gray);
  display: block;
}

/* === SERVICES HIGHLIGHT === */
.services-highlight-section {
  background: #f8f9fa;
  padding: 2rem 0;
}
.services-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.service-highlight-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: #fff;
  transition: transform .3s, box-shadow .3s;
}
.service-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  color: #fff;
}
.service-card-impresoras {
  background-image: url('../img/impresora.webp');
  background-size: cover;
  background-position: center 30%;
}
.service-card-escaneres {
  background-image: url('../img/scanner.webp');
  background-size: cover;
  background-position: center 20%;
}
.service-card-plotters {
  background-image: url('../img/plotter.webp');
  background-size: cover;
  background-position: center 25%;
}
.service-card-insumos {
  background-image: url('../img/insumos.webp');
  background-size: cover;
  background-position: center center;
}
.service-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.05) 100%);
  z-index: 1;
}
.service-card-content {
  position: relative;
  z-index: 2;
  padding: 1.2rem 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.service-card-content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .3rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.service-card-content p {
  font-size: .78rem;
  opacity: .88;
  margin: 0 0 .7rem;
  line-height: 1.4;
}
.service-card-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  padding: .3rem .8rem;
  border-radius: 6px;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.service-card-btn i {
  font-size: .75rem;
}
.service-highlight-card:hover .service-card-btn {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.6);
}

/* === NOSOTROS SECTION === */
.nosotros-section {
  background: #f8f9fa;
  padding: 3rem 0;
}
.nosotros-inner {
  background: #1a1f2e;
  border-radius: 12px;
  padding: 3rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.nosotros-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--praxis-red);
  margin-bottom: .75rem;
}
.nosotros-title {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.nosotros-desc {
  color: rgba(255,255,255,.65);
  font-size: .97rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 480px;
}
.nosotros-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 2px solid var(--praxis-red);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.nosotros-cta:hover { color: var(--praxis-red); }
.nosotros-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.nosotros-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: #222840;
  text-align: center;
  transition: background .25s;
}
.nosotros-stat:hover { background: #272e4a; }
.nosotros-stat-num {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.nosotros-stat-plus {
  color: var(--praxis-red);
  font-size: .7em;
  vertical-align: super;
}
.nosotros-stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .nosotros-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem 1.5rem; }
  .nosotros-stats { grid-template-columns: 1fr 1fr; }
}

/* === ALQUILER HOME SECTION === */
.alquiler-home-section {
  background: #f8f9fa;
  padding: 3rem 0 3rem;
  overflow-x: hidden;
}
.alquiler-home-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.alquiler-home-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--praxis-red);
  margin-bottom: .5rem;
}
.alquiler-home-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #1a1f2e;
  margin-bottom: .6rem;
}
.alquiler-home-intro {
  color: #6c757d;
  font-size: .97rem;
  max-width: 560px;
  margin: 0;
}
/* alquiler-home-cta — estilos unificados en .btn-ver-todos */
.alquiler-panels {
  display: flex;
  height: 300px;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  gap: 0;
}
.alquiler-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: flex .5s cubic-bezier(.4,0,.2,1);
}
.alquiler-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.alquiler-panel:hover::before {
  transform: scale(1.08);
}
.alquiler-panels:has(.alquiler-panel:hover) .alquiler-panel { flex: .55; }
.alquiler-panel:hover { flex: 1.9; }
.alquiler-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.15) 100%);
  transition: background .4s;
  z-index: 1;
}
.alquiler-panel:hover .alquiler-panel-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.2) 100%);
}
.alquiler-panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem;
  color: #fff;
  z-index: 2;
}
.alquiler-panel-content i {
  font-size: 1.5rem;
  color: var(--praxis-red);
  display: block;
  margin-bottom: .5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.alquiler-panel:hover .alquiler-panel-content i {
  opacity: 1;
  transform: translateY(0);
}
.alquiler-panel-content h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alquiler-panel:hover .alquiler-panel-content h3 {
  white-space: normal;
  margin-bottom: .6rem;
}
.alquiler-panel-content p {
  font-size: .87rem;
  color: rgba(255,255,255,.88);
  margin: 0;
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease .05s, opacity .35s ease .1s;
}
.alquiler-panel:hover .alquiler-panel-content p {
  max-height: 120px;
  opacity: 1;
}
.alquiler-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .87rem;
  color: rgba(255,255,255,.88);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease .05s, opacity .35s ease .1s;
}
.alquiler-panel:hover .alquiler-panel-list {
  max-height: 160px;
  opacity: 1;
}
.alquiler-panel-list li {
  padding: .22rem 0 .22rem 1.1rem;
  position: relative;
}
.alquiler-panel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--praxis-red);
}

/* === CATEGORIES SECTION === */
.categories-section {
  background: #fff;
  padding: 2rem 0 2rem;
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
}
.cat-visual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1rem;
  border-radius: 10px;
  min-height: 100px;
  background: #1a1f2e;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.cat-visual-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  background: #222840;
  color: #fff;
}
.cat-visual-card i {
  font-size: 1.8rem;
  color: #cc2222;
  opacity: .9;
  position: absolute;
  top: 10px;
  right: 12px;
}
.cat-visual-name {
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.2;
}
.cat-visual-count {
  font-size: .75rem;
  opacity: .7;
  margin-top: 2px;
}

/* === FOOTER BRANDS === */
.footer-brands {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.2rem;
  margin-top: 1.5rem;
}
.footer-brands-inner {
  text-align: center;
}
.footer-brands-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .8rem;
}
.footer-brands-logos {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.footer-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: .5rem 1rem;
  height: 54px;
  min-width: 100px;
  flex-shrink: 0;
  text-decoration: none;
  transition: all .2s;
  font-size: .8rem;
  font-weight: 700;
  color: #333;
}
/* Marca sin logo: el nombre, con el mismo peso visual que un logo en gris.
   Lleva .footer delante porque la regla ".footer a" lo pintaba de blanco
   sobre la caja blanca, y las marcas sin logo se veian como cajas vacias. */
.footer .footer-brand-logo,
.footer .footer-brand-logo:hover {
  color: #85898f;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* El tamano lo fija tamanoOptico() en app.js; esto es el tope por si el
   script no llega a correr. */
.footer-brand-logo img {
  max-height: 34px;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(100%) opacity(.65);
  mix-blend-mode: multiply;
  transition: all .2s;
}
/* Boreal es verde medio: en escala de grises queda bastante mas claro que
   los logos negros y parece apagado. Se oscurece solo en gris; al pasar el
   mouse vuelve a su color real como los demas. */
.footer-brand-logo img[alt="BOREAL"] { filter: grayscale(100%) brightness(.55) opacity(.65); }
.footer-brand-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.footer-brand-logo:hover img {
  filter: none;
  mix-blend-mode: multiply;
}

/* === HOME GRID SECTION === */
/* === FEATURED CAROUSEL === */
.featured-section {
  padding: 2.5rem 0 2rem;
  background: #fff;
  border-top: 3px solid var(--praxis-red);
}
.featured-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.featured-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #fff3f3;
  color: var(--praxis-red);
  border: 1px solid rgba(204,34,34,.2);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: .45rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.featured-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0 0 .2rem;
}
.featured-subtitle {
  font-size: .88rem;
  color: var(--praxis-gray);
  margin: 0;
}
/* btn-featured-all — estilos unificados en .btn-ver-todos */
.featured-carousel-wrapper {
  position: relative;
}
.featured-carousel {
  scroll-snap-type: x mandatory;
}
.featured-carousel > .product-card-wrap {
  flex: 0 0 200px;
  scroll-snap-align: start;
}
.featured-carousel .product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--praxis-red);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 1;
}
.featured-carousel .product-card .card-img-wrap {
  min-height: 120px;
  padding: .65rem;
}
.featured-carousel .product-card .card-img-top {
  height: 105px;
}
.featured-carousel .product-card .card-body {
  padding: .55rem .75rem;
}
.featured-carousel .product-card .card-title {
  font-size: .78rem;
}
.featured-carousel .product-card .price {
  font-size: 1.05rem;
}
.featured-carousel .product-card .price-usd {
  font-size: .68rem;
}
.featured-carousel .product-card .card-footer {
  padding: .45rem .75rem;
}
.featured-carousel .product-card .btn-cotizar {
  font-size: .78rem;
  padding: .4rem;
}
.featured-carousel .product-card .card-stock-row {
  margin-top: .3rem;
  padding-top: .3rem;
}
.featured-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dde0e8;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: .95rem;
  color: var(--praxis-dark);
  transition: background .2s, color .2s, border-color .2s;
}
.featured-arrow:hover { background: var(--praxis-red); color: #fff; border-color: var(--praxis-red); }
.featured-arrow-left { left: -18px; }
.featured-arrow-right { right: -18px; }
@media (max-width: 767.98px) {
  .featured-carousel > .product-card-wrap { flex: 0 0 150px; }
  .featured-carousel .product-card .card-img-wrap { min-height: 100px; }
  .featured-carousel .product-card .card-img-top { height: 85px; }
  .featured-arrow { display: none; }
}

/* === NEW ARRIVALS === */
.new-arrivals-section {
  background: #fff;
  padding: 2.5rem 0 2rem;
  border-top: 3px solid var(--praxis-red);
}
.new-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: var(--praxis-green);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
  pointer-events: none;
}

/* Tag variante para fondo oscuro (Equipos Praxis) */
.featured-tag--light {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.2);
}

/* === PRAXIS SHOWCASE === */
.praxis-showcase {
  background: var(--praxis-dark);
  padding: 2.5rem 0;
}
/* btn-praxis-all — estilos unificados en .btn-ver-todos */
.praxis-showcase .product-card {
  background: rgba(255,255,255,.97);
}

/* === STOCK BADGES === */
.stock-badge {
  font-size: .7rem;
  padding: .18rem .5rem;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .2px;
}
.stock-alto {
  background: #d4edda;
  color: #155724;
}
.stock-bajo {
  background: #fff3cd;
  color: #856404;
}
.stock-sin {
  background: #f8d7da;
  color: #721c24;
}

/* === FILTER SIDEBAR === */
.filter-sidebar {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--praxis-border);
  position: sticky;
  top: 80px;
}
.filter-sidebar .form-check { margin-bottom: .3rem; }
.filter-sidebar .form-check-label { font-size: .85rem; }
.filter-sidebar .form-check-input:checked {
  background-color: var(--praxis-red);
  border-color: var(--praxis-red);
}
.filter-sidebar h6 {
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--praxis-gray);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--praxis-light);
}
.filter-sidebar .category-link {
  display: block;
  padding: .4rem .6rem;
  color: #444;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  transition: all .15s;
}
.filter-sidebar .category-link:hover,
.filter-sidebar .category-link.active {
  background: var(--praxis-red-light);
  color: var(--praxis-red);
  font-weight: 600;
}
.filter-sidebar .sub-link {
  padding-left: 1.5rem;
  font-size: .8rem;
}

/* === PRODUCT DETAIL === */
.product-gallery img {
  max-height: 420px;
  object-fit: contain;
  width: 100%;
  background: #fafbfc;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--praxis-border);
}
.product-gallery .thumb {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border: 2px solid var(--praxis-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px;
  transition: border-color .2s;
  background: #fff;
}
.product-gallery .thumb:hover,
.product-gallery .thumb.active {
  border-color: var(--praxis-red);
}
.product-info {
  padding-left: 1rem;
}
.product-info .product-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--praxis-dark);
}
.product-info .main-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--praxis-dark);
}
.product-info .usd-price {
  font-size: 1rem;
  color: var(--praxis-gray);
}
.product-info .btn-add-cart {
  background: var(--praxis-red);
  border: none;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 2.2rem;
  border-radius: 30px;
  transition: all .2s;
}
.product-info .btn-add-cart:hover {
  background: var(--praxis-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192,57,43,.3);
}
.product-info .btn-whatsapp {
  background: #25d366;
  border: none;
  color: white;
  font-weight: 600;
  padding: .8rem 1.8rem;
  border-radius: 30px;
  transition: all .2s;
}
.product-info .btn-whatsapp:hover {
  background: #20b858;
  transform: translateY(-2px);
}
.attrs-table td, .attrs-table th {
  font-size: .85rem;
  padding: .5rem .75rem;
}

/* === PAGINATION === */
.pagination .page-link {
  color: var(--praxis-dark);
  border-radius: var(--radius-sm);
  margin: 0 2px;
  border: 1px solid var(--praxis-border);
  font-weight: 500;
  font-size: .88rem;
}
.pagination .page-item.active .page-link {
  background: var(--praxis-red);
  border-color: var(--praxis-red);
  color: white;
}

/* === CART / COTIZADOR === */
.cart-page { padding: 1.5rem 0 3rem; background: var(--praxis-light); min-height: 60vh; }
.cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.cart-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cart-title i { color: var(--praxis-red); }
.cart-subtitle { font-size: .88rem; color: var(--praxis-gray); margin: .2rem 0 0; }
.btn-continue-shopping {
  display: inline-flex;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--praxis-red);
  text-decoration: none;
  padding: .5rem 1rem;
  border: 1px solid var(--praxis-border);
  border-radius: 8px;
  background: #fff;
  transition: all .15s;
}
.btn-continue-shopping:hover { border-color: var(--praxis-red); background: var(--praxis-red-light); color: var(--praxis-red-dark); }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}

/* Cart items */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cart-item {
  display: flex;
  gap: 1.2rem;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: 12px;
  padding: 1.2rem;
  transition: border-color .15s;
}
.cart-item:hover { border-color: #ccc; }
.cart-item-img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--praxis-light);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item-img img {
  max-width: 90px;
  max-height: 90px;
  object-fit: contain;
}
.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.cart-item-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--praxis-dark);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item-name:hover { color: var(--praxis-red); }
.cart-item-brand { font-size: .75rem; color: var(--praxis-gray); margin-top: .15rem; font-weight: 500; }
.cart-item-delete {
  background: none;
  border: none;
  color: var(--praxis-gray-light);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem;
  border-radius: 6px;
  transition: all .15s;
  flex-shrink: 0;
}
.cart-item-delete:hover { color: var(--praxis-red); background: var(--praxis-red-light); }

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .8rem;
  gap: 1rem;
}

.cart-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--praxis-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.cart-qty-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--praxis-dark);
  transition: background .12s;
}
.cart-qty-btn:hover { background: var(--praxis-light); }
.cart-qty-input {
  width: 42px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--praxis-border);
  border-right: 1px solid var(--praxis-border);
  font-size: .88rem;
  font-weight: 600;
  color: var(--praxis-dark);
  outline: none;
  -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-price { text-align: right; }
.cart-price-unit { display: block; font-size: .75rem; color: var(--praxis-gray); }
.cart-price-total { display: block; font-size: 1.15rem; font-weight: 800; color: var(--praxis-dark); }

.cart-items-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
}
.btn-clear-cart {
  background: none;
  border: none;
  color: var(--praxis-gray);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  padding: .4rem .8rem;
  border-radius: 6px;
  transition: all .15s;
}
.btn-clear-cart:hover { color: var(--praxis-red); background: var(--praxis-red-light); }

/* Sidebar */
.cart-sidebar { position: sticky; top: 80px; }
.cart-summary {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--praxis-border);
}
.cart-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--praxis-dark);
  margin-bottom: 1rem;
}
.cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  padding: .3rem 0;
  color: var(--praxis-text);
}
.cart-summary-usd { color: var(--praxis-gray); font-size: .82rem; }
.cart-summary-divider {
  border-top: 2px solid var(--praxis-dark);
  margin: .8rem 0;
}
.cart-summary-total span:last-child {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--praxis-dark);
}
.cart-summary-total span:first-child { font-weight: 700; }
.cart-summary-note {
  font-size: .72rem;
  color: var(--praxis-gray);
  margin: .8rem 0 1.2rem;
  line-height: 1.4;
}

.btn-send-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .85rem;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
  margin-bottom: .6rem;
}
.btn-send-whatsapp:hover { background: #1fb855; color: #fff; transform: translateY(-1px); }
.btn-print-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .7rem;
  background: none;
  color: var(--praxis-text);
  border: 1px solid var(--praxis-border);
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-print-quote:hover { border-color: var(--praxis-dark); background: var(--praxis-light); }

.cart-help {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-top: .75rem;
}
.cart-help > i { font-size: 1.4rem; color: var(--praxis-red); flex-shrink: 0; margin-top: 2px; }
.cart-help strong { font-size: .82rem; display: block; margin-bottom: .15rem; }
.cart-help p { font-size: .75rem; color: var(--praxis-gray); margin: 0; line-height: 1.4; }

/* Cart empty */
.cart-empty {
  text-align: center;
  padding: 5rem 2rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--praxis-border);
}
.cart-empty-icon { font-size: 3.5rem; color: var(--praxis-gray-light); margin-bottom: 1rem; }
.cart-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--praxis-dark); margin-bottom: .4rem; }
.cart-empty p { color: var(--praxis-gray); font-size: .9rem; margin-bottom: 1.5rem; }
.btn-go-catalog {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.8rem;
  background: var(--praxis-red);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s;
}
.btn-go-catalog:hover { background: var(--praxis-red-dark); color: #fff; }

/* Responsive cart */
@media (max-width: 991.98px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-sidebar { position: static; }
}
@media (max-width: 575.98px) {
  .cart-page { padding: 1rem 0 2rem; }
  .cart-item { flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 1rem; }
  .cart-item-img { width: 80px; height: 80px; }
  .cart-item-top { flex-direction: column; align-items: center; gap: .3rem; }
  .cart-item-bottom { flex-direction: column; gap: .6rem; }
  .cart-item-price { text-align: center; }
  .cart-item-delete { position: absolute; top: .5rem; right: .5rem; }
  .cart-item { position: relative; }
  .cart-header { flex-direction: column; }
}

/* === ADMIN === */
.admin-sidebar .nav-link {
  color: #555;
  font-weight: 500;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: all .15s;
}
.admin-sidebar .nav-link:hover {
  background: var(--praxis-red-light);
  color: var(--praxis-red);
}
.admin-sidebar .nav-link.active {
  background: var(--praxis-red);
  color: white;
}
.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--praxis-border);
  text-align: center;
  transition: transform .2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--praxis-dark);
}
.stat-card .stat-label {
  font-size: .82rem;
  color: var(--praxis-gray);
  font-weight: 500;
}

/* === BANNER ADMIN === */
.banner-admin-card {
  border: 1px solid var(--praxis-border);
  border-radius: var(--radius);
  padding: 1rem;
  background: #fafbfc;
}
.banner-admin-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--praxis-gray);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}
.banner-admin-preview {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  background: #eef0f4;
  overflow: hidden;
}

/* === FOOTER === */
.footer {
  background: var(--praxis-dark);
  color: rgba(255,255,255,.8);
  padding: 3.5rem 0 1.5rem;
  margin-top: 0;
}
.footer h5 {
  color: white;
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.footer a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
  font-size: .9rem;
}
.footer a:hover { color: white; }
.footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  margin-top: 2rem;
  font-size: .82rem;
  color: rgba(255,255,255,.4);
}

/* === TOAST === */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
}

/* === LOADING === */
.loading-spinner {
  text-align: center;
  padding: 3rem;
}
.loading-spinner .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--praxis-red);
  border-width: 3px;
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === EMPTY STATE (legacy) === */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--praxis-gray);
}
.empty-state i {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--praxis-gray-light);
}
.empty-state .btn-danger {
  border-radius: 10px;
  padding: .6rem 1.5rem;
  font-weight: 600;
}

/* === CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--praxis-red) 0%, var(--praxis-red-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
  margin: 2.5rem 0;
}
.cta-banner h3 { font-weight: 800; margin-bottom: .5rem; }
.cta-banner p { opacity: .9; margin-bottom: 1.2rem; }
.cta-banner .btn {
  background: #fff;
  color: var(--praxis-red);
  font-weight: 700;
  border-radius: 25px;
  padding: .6rem 2rem;
  border: none;
}
.cta-banner .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .hero h1 { font-size: 2rem; }
  .hero-stats { gap: 1.5rem; }
  .hero-stats .stat-num { font-size: 1.4rem; }
  .product-carousel > .product-card-wrap { flex: 0 0 200px; }
}
@media (max-width: 768px) {
  .hero { padding: 2.5rem 0; }
  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: .95rem; }
  .hero-stats { gap: 1rem; }
  .hero-stats .stat-num { font-size: 1.2rem; }
  .product-card .card-img-top { height: 130px; }
  .product-card .card-img-wrap { min-height: 150px; padding: .8rem; }
  .search-wrapper { max-width: 100%; margin-top: .5rem; }
  .filter-sidebar { margin-bottom: 1.5rem; position: static; }
  .section-header h2 { font-size: 1.3rem; }
  .features-bar .feature span { font-size: .75rem; }
  .features-bar .feature small { display: none; }
  .promo-bar { font-size: .7rem; }
  .product-info { padding-left: 0; margin-top: 1rem; }
  .praxis-showcase-header { flex-direction: column; align-items: flex-start; }
  .explore-cat-card .cat-label { font-size: .8rem; }
  .services-highlight-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .service-highlight-card { min-height: 150px; }
  .service-card-icon-wrap { width: 56px; height: 42px; }
  .ofertas-header h2 { font-size: 1.3rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-visual-card { min-height: 110px; }
  .alquiler-panels { grid-template-columns: 1fr; height: auto; }
  .alquiler-panel { height: 280px; }
  .alquiler-home-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 576px) {
  .product-carousel > .product-card-wrap { flex: 0 0 170px; }
  .product-card .price { font-size: 1.1rem; }
  .product-card .card-title { font-size: .82rem; }
  .cat-visual-card { min-height: 100px; padding: 1rem; }
  .cat-visual-name { font-size: .92rem; }
}

/* Search suggestions */
.search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 1050;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 4px;
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--praxis-text);
  border-bottom: 1px solid #f0f0f0;
  transition: background .15s;
}
.suggestion-item:hover { background: var(--praxis-light); color: var(--praxis-text); }
.suggestion-item img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; border-radius: 6px; background: #f8f8f8; }
.suggestion-info { min-width: 0; }
.suggestion-name { font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-meta { font-size: .72rem; color: #888; }
.suggestion-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--praxis-red);
  text-decoration: none;
  border-top: 1px solid #eee;
}
.suggestion-all:hover { background: var(--praxis-red-light); color: var(--praxis-red-dark); }
.suggestion-empty { padding: 12px; text-align: center; font-size: .82rem; color: #999; }

/* ======== Botones flotantes (WhatsApp y volver arriba) ========
   Los dos salen de las mismas variables para que queden alineados. Antes el
   de subir tenia sus medidas escritas a mano dentro de app.js: 42 px a 20 px
   del borde, contra 60 px a 24 px del de WhatsApp. Ni los centros ni los
   bordes coincidian, y la flecha se veia corrida respecto del circulo verde.

   El de subir se alinea por el CENTRO con el de WhatsApp: se le descuenta la
   mitad de la diferencia de ancho. Asi los dos comparten el mismo eje
   vertical sea cual sea el tamano de cada uno. */
:root {
  --flot-derecha: 24px;   /* separacion del borde derecho */
  --flot-abajo: 24px;     /* separacion del borde inferior */
  --flot-wa: 60px;        /* diametro del boton de WhatsApp */
  --flot-subir: 44px;     /* diametro del boton de volver arriba */
  --flot-hueco: 14px;     /* aire entre los dos */
}
@media (max-width: 575.98px) {
  :root {
    --flot-derecha: 16px;
    --flot-abajo: 16px;
    --flot-wa: 52px;
    --flot-subir: 40px;
    --flot-hueco: 12px;
  }
}

.whatsapp-float {
  position: fixed;
  bottom: var(--flot-abajo);
  right: var(--flot-derecha);
  width: var(--flot-wa);
  height: var(--flot-wa);
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  color: #fff;
}
.whatsapp-float i { line-height: 1; }

@media (max-width: 575.98px) {
  .whatsapp-float { font-size: 26px; }
}

/* Volver arriba: mismo eje vertical que el de WhatsApp, justo encima. */
.btn-subir {
  position: fixed;
  right: calc(var(--flot-derecha) + (var(--flot-wa) - var(--flot-subir)) / 2);
  bottom: calc(var(--flot-abajo) + var(--flot-wa) + var(--flot-hueco));
  width: var(--flot-subir);
  height: var(--flot-subir);
  border: none;
  border-radius: 50%;
  background: var(--praxis-red);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 9998;              /* debajo del de WhatsApp, que es 9999 */

  /* Oculto por defecto. Se usan opacidad y visibilidad en vez de display
     porque display no admite transicion: el "transition" que tenia antes el
     boton no producia ningun efecto. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.btn-subir--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-subir:hover { background: var(--praxis-red-dark, #a01818); }
.btn-subir i { line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-subir { transition: none; transform: none; }
}

/* ======== Ofertas Carousel ======== */
.ofertas-section {
  background: #f4f5f8;
  padding: 3rem 0;
  border-top: 4px solid var(--praxis-red);
}
.ofertas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.ofertas-header-content { max-width: 540px; }
.ofertas-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--praxis-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.ofertas-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0 0 .25rem;
}
.ofertas-header p {
  font-size: .88rem;
  color: var(--praxis-gray);
  margin: 0;
}
.ofertas-carousel-wrapper { position: relative; }
.ofertas-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 2px 12px;
}
.ofertas-carousel::-webkit-scrollbar { display: none; }
/* Pocas ofertas que entran enteras: sin desplazamiento, centradas */
.ofertas-carousel.ofertas-estatico { justify-content: center; overflow-x: visible; }
.oferta-card {
  min-width: 180px;
  max-width: 180px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  border: 1px solid #e8e9ee;
  border-top: 3px solid var(--praxis-red);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.oferta-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.13); }
.oferta-card-link { text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; }
.oferta-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--praxis-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
  letter-spacing: .2px;
}
.oferta-img {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #fafafa;
}
.oferta-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.oferta-info { padding: 10px 12px 6px; flex: 1; }
.oferta-brand { font-size: .68rem; font-weight: 700; color: var(--praxis-gray); text-transform: uppercase; letter-spacing: .6px; }
.oferta-name { font-size: .82rem; font-weight: 600; color: var(--praxis-dark); margin: 4px 0 8px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oferta-old-price { font-size: .76rem; color: var(--praxis-gray); text-decoration: line-through; }
.oferta-price { font-size: 1.05rem; font-weight: 800; color: var(--praxis-dark); }
.oferta-price-green { color: #1e7e34; }
.btn-cotizar-oferta {
  margin: 0 12px 12px;
  font-size: .8rem;
  padding: 7px;
}
.ofertas-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dde0e8;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 1rem;
  color: var(--praxis-dark);
  transition: background .2s, color .2s, border-color .2s;
}
.ofertas-arrow:hover { background: var(--praxis-red); color: #fff; border-color: var(--praxis-red); }
.ofertas-arrow-left { left: -16px; }
.ofertas-arrow-right { right: -16px; }
@media (max-width: 767.98px) {
  .ofertas-header { flex-direction: column; align-items: flex-start; }
  .ofertas-header h2 { font-size: 1.4rem; }
  .oferta-card { min-width: 155px; max-width: 155px; }
  .oferta-img { height: 115px; padding: 10px; }
  .ofertas-arrow { display: none; }
}

/* ======== Cuotas Box (Product Detail) ======== */
.cuotas-box {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cuotas-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--praxis-dark);
}
.cuotas-toggle:focus-visible { outline: 2px solid var(--praxis-red); outline-offset: -2px; }
.cuotas-toggle > .bi-credit-card { font-size: 1.1rem; color: var(--praxis-red); }
.cuotas-title { font-size: .92rem; font-weight: 700; }
.cuotas-resumen { margin-left: auto; font-size: .8rem; color: var(--praxis-gray); }
.cuotas-chevron { color: var(--praxis-gray); transition: transform .2s; }
.cuotas-toggle[aria-expanded="true"] .cuotas-chevron { transform: rotate(180deg); }
.cuota-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--praxis-border);
  font-size: .88rem;
  margin: 0;
  cursor: pointer;
}
.cuota-line:hover { background: var(--praxis-light); }
.cuota-line:has(input:checked) { background: #fdf3f2; }
.cuota-line input { accent-color: var(--praxis-red); width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.cuota-cant { color: var(--praxis-dark); }
.cuota-sin-interes {
  font-size: .72rem; font-weight: 600; color: #1e8449;
  background: #e8f6ee; border-radius: 4px; padding: 1px 6px; margin-left: 4px;
}
.cuota-total { font-size: .78rem; color: var(--praxis-gray); margin-left: 2px; }
.cuota-tarjetas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.cuota-elegida {
  padding: 10px 18px;
  border-top: 1px dashed var(--praxis-red);
  font-size: .85rem;
  color: var(--praxis-dark);
}
.cuota-elegida .bi { color: var(--praxis-red); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .cuotas-chevron { transition: none; } }
.tarjeta-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  min-width: 42px;
  text-align: center;
}
.tarjeta-visa { background: #1a1f71; }
.tarjeta-mc { background: #eb001b; }
.tarjeta-cabal { background: #00529b; }
.tarjeta-naranja { background: #ff6600; font-size: .58rem; }
.tarjeta-amex { background: #006fcf; }

/* ======== Entrega Box (Product Detail) ======== */
/* Cajas lado a lado: tantas columnas como opciones encendidas. En celular se
   apilan, porque tres columnas de ~110 px no se leen. */
.entrega-box {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.entrega-box--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entrega-box--1 { grid-template-columns: minmax(0, 1fr); }
.entrega-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--praxis-border);
  border-radius: var(--radius);
}
.entrega-icono {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex: 0 0 42px;
}
.entrega-texto { display: flex; flex-direction: column; gap: 2px; }
.entrega-option strong { font-size: .88rem; line-height: 1.3; color: var(--praxis-dark); }
.entrega-option small { font-size: .78rem; line-height: 1.35; color: var(--praxis-gray); }
.entrega-envio .entrega-icono   { background: #e8f6ee; color: var(--praxis-green); }
.entrega-retiro .entrega-icono  { background: #fbeceb; color: var(--praxis-red); }
.entrega-factura .entrega-icono { background: #eceef6; color: var(--praxis-dark); }
@media (max-width: 575.98px) {
  .entrega-box, .entrega-box--2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entrega-option { flex-direction: row; text-align: left; padding: 12px 14px; gap: 12px; }
  .entrega-icono { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.1rem; }
  .cuotas-resumen { display: none; }
}

/* ======== Page Hero ======== */
.page-hero {
  background: linear-gradient(135deg, var(--praxis-dark) 0%, var(--praxis-dark2) 100%);
  padding: 60px 0 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(192,57,43,.15) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.page-hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ======== Section Layout ======== */
.section-light { background: var(--praxis-light); padding: 70px 0; }
.section-dark { background: var(--praxis-dark); padding: 70px 0; color: #fff; }
.section-tag {
  display: inline-block;
  background: var(--praxis-red-light);
  color: var(--praxis-red);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin-bottom: 16px;
}
.section-dark .section-title { color: #fff; }
.section-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--praxis-gray);
}

/* ======== Stats Grid (Empresa) ======== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.stat-card {
  background: var(--praxis-white);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--praxis-border);
}
.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--praxis-red);
  line-height: 1.1;
}
.stat-label {
  font-size: .88rem;
  color: var(--praxis-gray);
  margin-top: 6px;
  font-weight: 500;
}

/* ======== Value Cards (Empresa - Mision/Vision) ======== */
.value-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 32px 24px;
  height: 100%;
  transition: transform .2s, border-color .2s;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--praxis-red); }
.value-icon {
  width: 50px; height: 50px;
  background: var(--praxis-red);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  margin-bottom: 18px;
}
.value-card h4 { font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.value-card p { font-size: .93rem; color: rgba(255,255,255,.65); margin: 0; line-height: 1.6; }

/* ======== Values Pills ======== */
.values-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.value-pill {
  background: var(--praxis-white);
  border: 1px solid var(--praxis-border);
  border-radius: 30px;
  padding: 10px 22px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--praxis-dark);
  transition: all .2s;
}
.value-pill:hover { background: var(--praxis-red); color: #fff; border-color: var(--praxis-red); }

/* ======== Feature Cards (Alquileres) ======== */
.feature-card {
  background: var(--praxis-white);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--praxis-border);
  height: 100%;
  transition: transform .2s;
}
.feature-card:hover { transform: translateY(-4px); }
.feature-icon {
  width: 60px; height: 60px;
  background: var(--praxis-red-light);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--praxis-red);
  margin: 0 auto 18px;
}
.feature-card h5 { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.feature-card p { font-size: .9rem; color: var(--praxis-gray); margin: 0; line-height: 1.6; }
.feature-card--sm { padding: 18px 20px; }
.feature-card--sm .feature-icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; margin-bottom: 12px; }
.feature-card--sm h5 { font-size: .95rem; margin-bottom: 6px; }
.feature-card--sm p { font-size: .82rem; }

/* ======== Rental Plans (Alquileres) ======== */
.rental-plan {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 36px 30px;
  height: 100%;
}
.rental-plan-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.rental-plan-header i { font-size: 2rem; color: var(--praxis-red); }
.rental-plan-header h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.rental-plan p { font-size: .95rem; color: rgba(255,255,255,.7); line-height: 1.65; }
.rental-features {
  list-style: none; padding: 0; margin: 20px 0 24px;
}
.rental-features li {
  padding: 8px 0;
  font-size: .93rem;
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 10px;
}
.rental-features li i { color: var(--praxis-green); font-size: .9rem; }
.btn-rental-cta {
  display: inline-flex; align-items: center;
  background: #25d366; color: #fff;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.btn-rental-cta:hover { background: #1da851; color: #fff; transform: translateY(-2px); }

/* ======== Service Highlights (Servicio Tecnico) ======== */
.service-highlights { display: flex; flex-direction: column; gap: 20px; }
.service-highlight-item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--praxis-white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--praxis-border);
}
.service-highlight-icon {
  min-width: 48px; height: 48px;
  background: var(--praxis-red-light);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--praxis-red);
}
.service-highlight-item h5 { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.service-highlight-item p { font-size: .88rem; color: var(--praxis-gray); line-height: 1.5; }

/* ======== Service Type Cards ======== */
.service-type-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  height: 100%;
  transition: transform .2s, border-color .2s;
}
.service-type-card:hover { transform: translateY(-4px); border-color: var(--praxis-red); }
.service-type-card i { font-size: 2rem; color: var(--praxis-red); margin-bottom: 14px; display: block; }
.service-type-card h6 { font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.service-type-card p { font-size: .83rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.5; }

/* ======== Brands Service Grid ======== */
/* Las seis marcas en una sola fila. Grid y no flex con wrap: con flex la
   sexta caia sola a una segunda linea en cuanto el ancho no alcanzaba. En
   celular pasan a 3 x 2, porque seis columnas de ~50 px no se leen. */
.brands-service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.brand-service-item {
  background: var(--praxis-white);
  border: 1px solid var(--praxis-border);
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  transition: box-shadow .2s, transform .2s;
}
@media (max-width: 767.98px) {
  .brands-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .brand-service-item { padding: 14px 10px; }
}
.brand-service-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Alto fijo y no solo max-height: algunos SVG no declaran tamaño propio y,
   dentro de un flex, sin un alto explicito quedan con ancho cero. */
.brand-service-item img { height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.brand-service-item span { font-weight: 700; font-size: 1rem; color: var(--praxis-dark); }

/* ======== CTA Section ======== */
.section-cta {
  background: linear-gradient(135deg, var(--praxis-red) 0%, var(--praxis-red-dark) 100%);
  padding: 60px 0;
  text-align: center;
}
.cta-title { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cta-sub { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-cta-primary {
  display: inline-flex; align-items: center;
  background: #fff; color: var(--praxis-red);
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); color: var(--praxis-red-dark); }
.btn-cta-secondary {
  display: inline-flex; align-items: center;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  transition: all .2s;
}
.btn-cta-secondary:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ======== Responsive - New Pages ======== */
@media (max-width: 767.98px) {
  .page-hero { padding: 40px 0 35px; }
  .page-hero-title { font-size: 1.7rem; }
  .section-light, .section-dark { padding: 45px 0; }
  .section-title { font-size: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 20px 14px; }
  .stat-number { font-size: 1.6rem; }
  .rental-plan { padding: 24px 20px; }
  .cta-title { font-size: 1.4rem; }
}

@media print {
  .navbar-praxis, .promo-bar, .footer, .btn-cotizar, .btn-add-cart, .btn-whatsapp, .filter-sidebar, .features-bar, .category-nav, .whatsapp-float, .btn-subir { display: none !important; }
  .product-card { break-inside: avoid; }
}

/* ─── Página de contacto ──────────────────────────────────────────────────── */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2rem;
  align-items: start;
}

.contacto-form-card,
.contacto-info-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 2rem;
}

.contacto-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0 0 .25rem;
}
.contacto-card-sub {
  font-size: .875rem;
  color: var(--praxis-gray);
  margin: 0 0 1.5rem;
}
.contacto-form-card .req { color: var(--praxis-red); }

.contacto-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contacto-field { margin-bottom: 1.1rem; }
.contacto-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #495057;
  margin-bottom: .35rem;
}
.contacto-field input,
.contacto-field textarea {
  width: 100%;
  padding: .65rem .85rem;
  font-size: .925rem;
  font-family: inherit;
  color: var(--praxis-dark);
  background: #fbfbfc;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.contacto-field textarea { resize: vertical; min-height: 120px; }
.contacto-field input::placeholder,
.contacto-field textarea::placeholder { color: #b0b6bd; }

.contacto-field input:focus,
.contacto-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.contacto-field.has-error input,
.contacto-field.has-error textarea {
  border-color: var(--praxis-red);
  background: var(--praxis-red-light);
}
.contacto-error {
  display: block;
  min-height: 1rem;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--praxis-red);
}

/* Trampa para bots: fuera de pantalla, no display:none (algunos bots lo detectan) */
.contacto-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.btn-contacto {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.6rem;
  font-size: .925rem;
  font-weight: 600;
  color: #fff;
  background: var(--praxis-red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-contacto:hover:not(:disabled) { background: var(--praxis-red-dark); transform: translateY(-1px); }
.btn-contacto:disabled { opacity: .6; cursor: not-allowed; }

.btn-contacto-wa {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.25rem;
  font-size: .925rem;
  font-weight: 600;
  color: #495057;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.btn-contacto-wa:hover { border-color: #25d366; color: #25d366; }

.contacto-aviso {
  display: none;
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  font-size: .875rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.contacto-aviso.visible { display: block; }
.contacto-aviso.ok    { background: #eaf7ee; border-color: #b7e0c4; color: #1e6b38; }
.contacto-aviso.error { background: var(--praxis-red-light); border-color: #f0c4bf; color: var(--praxis-red-dark); }

/* Panel de datos */
.contacto-info-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--praxis-dark);
  margin: 0 0 1.25rem;
}
.contacto-datos { list-style: none; margin: 0; padding: 0; }
.contacto-datos li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .85rem 0;
  border-bottom: 1px solid #f1f3f5;
}
.contacto-datos li:last-child { border-bottom: none; }
.contacto-datos i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--praxis-red);
  background: var(--praxis-red-light);
  border-radius: 8px;
}
.contacto-datos .dato-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--praxis-gray-light);
  margin-bottom: .1rem;
}
.contacto-datos div > span:not(.dato-label),
.contacto-datos div > a {
  font-size: .9rem;
  color: var(--praxis-dark);
  text-decoration: none;
}
.contacto-datos div > a:hover { color: var(--praxis-red); }

.contacto-redes {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f3f5;
}
.contacto-redes a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #495057;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.contacto-redes a:hover { background: var(--praxis-red); color: #fff; }

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .contacto-row  { grid-template-columns: 1fr; gap: 0; }
  .contacto-form-card,
  .contacto-info-card { padding: 1.5rem; }
}

/* Logos de tarjetas en el bloque de cuotas */
.tarjeta-img {
  height: 22px;
  width: auto;
  max-width: 52px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
}

/* Cotizador: productos con precio a consultar */
.cart-price-consultar {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--praxis-red);
  background: var(--praxis-red-light);
  border-radius: 6px;
  white-space: nowrap;
}
.cart-summary-consultar {
  color: var(--praxis-red);
  font-size: .875rem;
}
.cart-summary-aviso {
  margin: .75rem 0 0;
  padding: .65rem .8rem;
  font-size: .8rem;
  line-height: 1.4;
  color: #6b4a20;
  background: #fff8e6;
  border: 1px solid #f2e0b5;
  border-radius: 8px;
}

/* Precio de contado: el de lista va arriba y este debajo, como el descuento
   por medio de pago que muestran las tiendas. */
.precio-contado {
  margin-top: .15rem;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1e7e34;
}
.precio-contado span {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: #2f8c46;
}
.precio-contado--detalle {
  margin-top: .4rem;
  font-size: 1.05rem;
}
.precio-contado--detalle span {
  display: inline;
  font-size: .85rem;
}

/* ═══ PANEL DE ADMINISTRACIÓN ═══════════════════════════════════════════════
   Barra lateral oscura fija + contenido claro. Separar la navegación del
   contenido es lo que hace que se lea como herramienta y no como página web.
   El rojo Praxis queda como acento: si lo lleva todo, deja de señalar nada. */

:root {
  --adm-side: #171a26;
  --adm-side-2: #1f2331;
  --adm-fondo: #f5f6f8;
  --adm-borde: #e5e7eb;
  --adm-texto: #1f2430;
  --adm-suave: #6b7280;
}

body:has(.adm-side) { background: var(--adm-fondo); }

.adm-side {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 244px;
  background: var(--adm-side);
  display: flex;
  flex-direction: column;
  z-index: 1030;
}

.adm-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.adm-brand-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--praxis-red);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 9px;
}
.adm-brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.adm-brand-txt strong { color: #fff; font-size: .95rem; font-weight: 700; }
.adm-brand-txt small  { color: rgba(255,255,255,.42); font-size: .72rem; }

.admin-sidebar {
  flex: 1;
  overflow-y: auto;
  padding: .9rem .75rem;
}
.adm-group {
  display: block;
  padding: .9rem .6rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.32);
}
.adm-group:first-child { padding-top: .2rem; }

/* Se pisa el estilo viejo del sidebar */
.admin-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .6rem;
  margin-bottom: 1px;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: background .14s, color .14s;
}
.admin-sidebar .nav-link i { font-size: 1rem; width: 18px; text-align: center; opacity: .85; }
.admin-sidebar .nav-link:hover {
  background: var(--adm-side-2);
  color: #fff;
}
.admin-sidebar .nav-link.active {
  background: var(--adm-side-2);
  color: #fff;
  border-left-color: var(--praxis-red);
  border-radius: 0 7px 7px 0;
}
.admin-sidebar .nav-link.active i { opacity: 1; color: var(--praxis-red); }

.adm-side-pie {
  padding: .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.adm-side-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  background: none;
  border: none;
  border-radius: 7px;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.adm-side-link:hover { background: var(--adm-side-2); color: #fff; }
.adm-side-salir:hover { color: #ff8a80; }

/* ─── Contenido ─────────────────────────────────────────────────────────── */
.adm-main { margin-left: 244px; min-height: 100vh; }

.adm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.75rem;
  background: #fff;
  border-bottom: 1px solid var(--adm-borde);
  position: sticky; top: 0; z-index: 20;
}
.adm-top-titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--adm-texto);
}
.adm-top-estado { font-size: .8rem; color: var(--adm-suave); }

.adm-contenido { padding: 1.75rem; }

/* Los títulos de sección ya los muestra la barra superior */
.admin-section > h4 { display: none; }

/* ─── Tarjetas ──────────────────────────────────────────────────────────── */
.admin-section .bg-white.rounded-3.shadow-sm,
.admin-section .bg-white.rounded-3 {
  border: 1px solid var(--adm-borde) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}
.admin-section h5.fw-bold { font-size: 1rem; color: var(--adm-texto); }
.admin-section .form-label { font-size: .8rem; font-weight: 600; color: #4b5563; }
.admin-section .form-text { font-size: .78rem; }

/* ─── Métricas del dashboard ────────────────────────────────────────────── */
.admin-section .stat-card {
  text-align: left;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--adm-borde);
  border-radius: 11px;
  background: #fff;
  transition: border-color .15s;
}
.admin-section .stat-card:hover { transform: none; border-color: #d1d5db; }
.admin-section .stat-card .stat-label {
  order: -1;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--adm-suave);
  margin-bottom: .3rem;
  display: block;
}
.admin-section .stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--adm-texto);
}

/* ─── Tablas ────────────────────────────────────────────────────────────── */
.admin-section .table > :not(caption) > * > * { padding: .7rem .6rem; }
.admin-section .table thead th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--adm-suave);
  border-bottom: 1px solid var(--adm-borde);
}
.admin-section .table tbody tr:hover { background: #fafbfc; }

/* ─── Ingreso ───────────────────────────────────────────────────────────── */
#loginOverlay { background: var(--adm-side) !important; }
#loginOverlay > div {
  border-radius: 14px !important;
  padding: 2.5rem !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  max-width: 380px !important;
}

@media (max-width: 991px) {
  .adm-side {
    position: static;
    width: auto;
    flex-direction: column;
  }
  .adm-main { margin-left: 0; }
  .admin-sidebar { display: flex; flex-wrap: wrap; gap: 3px; padding: .6rem; }
  .adm-group { display: none; }
  .admin-sidebar .nav-link { border-left: none; border-radius: 7px; }
  .admin-sidebar .nav-link.active { border-radius: 7px; }
  .adm-contenido, .adm-top { padding: 1rem; }
}

/* Estado de los productos propios en la lista del panel */
.badge-estado {
  display: inline-block;
  padding: .18rem .5rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 5px;
  white-space: nowrap;
}
.badge-visible { background: #e7f5ec; color: #1b6b38; }
.badge-oculto  { background: #f1f2f4; color: #6b7280; }

/* La fila entera se atenua: el estado se lee de un vistazo, sin buscar la
   columna. La imagen tambien, o el producto "apagado" seguiria saltando. */
.propio-oculto { background: #fbfbfc; }
.propio-oculto td:not(:last-child) { opacity: .55; }
.propio-oculto img { filter: grayscale(1); }

/* ─── Panel: identidad y estilo alineado con la pagina de contacto ───────── */

.adm-brand-logo {
  width: 38px; height: 38px;
  flex-shrink: 0;
  object-fit: contain;
}
.adm-login-logo { width: 62px; height: 62px; object-fit: contain; margin-bottom: .85rem; }
.adm-login-titulo {
  font-size: 1.25rem; font-weight: 800;
  color: var(--adm-texto); margin: 0 0 .15rem;
}
.adm-login-sub { font-size: .875rem; color: var(--adm-suave); margin: 0; }

/* Las tarjetas toman el mismo tratamiento que las de contacto: borde suave,
   esquinas de 12px y aire interior, sin sombra. */
.admin-section .bg-white.rounded-3.shadow-sm,
.admin-section .bg-white.rounded-3 {
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 1.75rem !important;
}

.admin-section h5.fw-bold {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--adm-texto);
  margin-bottom: .3rem;
}
.admin-section h5.fw-bold + .text-muted { font-size: .875rem; margin-bottom: 1.5rem; }

/* Campos: mismo alto, fondo y foco rojo que el formulario de contacto */
.admin-section .form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #495057;
  margin-bottom: .35rem;
}
.admin-section .form-control,
.admin-section .form-select {
  padding: .65rem .85rem;
  font-size: .925rem;
  color: var(--adm-texto);
  background-color: #fbfbfc;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.admin-section .form-control:focus,
.admin-section .form-select:focus {
  background-color: #fff;
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.admin-section .form-control::placeholder { color: #b0b6bd; }
.admin-section .form-control-sm { padding: .45rem .7rem; font-size: .85rem; }
.admin-section .input-group-text {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px 0 0 8px;
  color: var(--adm-suave);
}
.admin-section .input-group .form-control { border-radius: 0 8px 8px 0; }

.admin-section .form-text { font-size: .78rem; color: var(--adm-suave); }

/* Botones con el mismo peso y radio que los de contacto */
.admin-section .btn {
  padding: .6rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 8px;
}
.admin-section .btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.admin-section .btn-danger { background: var(--praxis-red); border-color: var(--praxis-red); }
.admin-section .btn-danger:hover { background: var(--praxis-red-dark); border-color: var(--praxis-red-dark); }

/* Interruptores en rojo, como el resto de los acentos del sitio */
.admin-section .form-check-input:checked {
  background-color: var(--praxis-red);
  border-color: var(--praxis-red);
}
.admin-section .form-check-input:focus {
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.admin-section .form-check-label { font-size: .9rem; }

/* Listas de resultados: filas con separador, como los datos de contacto */
.admin-section .list-group-item {
  border-color: #f1f3f5;
  padding: .8rem .25rem;
}
.admin-section .list-group-item:first-child { border-top: none; }

/* ─── Dashboard del panel ─────────────────────────────────────────────────── */
/* El estado se codifica en la forma ademas del numero: una franja al costado se
   lee de un vistazo sin tener que interpretar la cifra. */
.dash-bloque { margin-bottom: 1.75rem; }

.dash-titulo {
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--praxis-gray);
  font-weight: 700;
  margin: 0 0 .2rem;
}

.dash-sub {
  font-size: .84rem;
  color: var(--praxis-gray);
  margin: 0 0 .85rem;
}

.dash-grilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.dash-card {
  background: var(--praxis-white);
  border: 1px solid var(--praxis-border);
  border-left: 4px solid var(--praxis-border);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.dash-card.bien { border-left-color: var(--praxis-green); }
.dash-card.ojo  { border-left-color: var(--praxis-yellow); }
.dash-card.mal  { border-left-color: var(--praxis-red); }

.dash-rotulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--praxis-gray);
  margin-bottom: .45rem;
}

.dash-cifra {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dash-cifra.chica { font-size: 1.3rem; }

.dash-pie { font-size: .8rem; color: var(--praxis-gray); margin-top: .3rem; }
.dash-pie strong { color: var(--praxis-dark); font-weight: 600; }

.dash-verde    { color: var(--praxis-green); }
.dash-amarillo { color: #a86709; }
.dash-rojo     { color: var(--praxis-red); }

/* ─── Consultas ───────────────────────────────────────────────────────────── */
.consulta-fila {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--praxis-border);
  font-size: .875rem;
  cursor: pointer;
  border-radius: 6px;
}
.consulta-fila:last-child { border-bottom: 0; }
.consulta-fila:hover { background: var(--praxis-light); }
.consulta-fila:focus-visible { outline: 2px solid var(--praxis-red); outline-offset: -2px; }

.consulta-fila .cuando {
  color: var(--praxis-gray);
  font-size: .78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 78px;
}
.consulta-fila .quien { font-weight: 600; }
.consulta-fila .que {
  color: var(--praxis-gray);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.consulta-fila.sin-leer .quien::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--praxis-red);
  margin-right: .45rem;
  vertical-align: middle;
}

/* Ranking del bloque de interes (apagado por defecto, ver
   METRICAS_HABILITADAS en php/api/_config.php) */
.rank-fila {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: .1rem .7rem;
  align-items: center;
  font-size: .85rem;
  margin-bottom: .5rem;
}
.rank-pos { color: var(--praxis-gray); font-size: .78rem; font-variant-numeric: tabular-nums; }
.rank-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-barra {
  grid-column: 2 / 4;
  height: 5px;
  border-radius: 3px;
  background: var(--praxis-border);
  overflow: hidden;
}
.rank-barra > i { display: block; height: 100%; background: var(--praxis-red); opacity: .55; }

/* Flechas para reordenar atributos en el panel: desarrolladas y apagadas.
   Se encienden con ATRIBUTOS_ORDENABLES en php/api/_config.php, que agrega
   .attr-orden-on al body. Ver docs/Propuestas-de-mejora.md */
.attr-orden { display: none; }
body.attr-orden-on .attr-orden { display: inline-flex; }

/* Un boton deshabilitado no debe parecer clickeable: la flecha de subir en la
   primera fila y la de bajar en la ultima no llevan a ningun lado. */
.attr-orden .btn:disabled { opacity: .35; }

/* El video del hero, una vez que tiene su primer cuadro */
.hero-video.lista { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
}

/* ======== Precio en oferta ========
   El de lista tachado arriba y el rebajado abajo, igual que en las tiendas.
   Antes la oferta solo existia en el carrusel de la portada: la ficha del
   mismo producto mostraba el precio de lista, y el visitante llegaba creyendo
   una cosa y leia otra. Ahora el servidor informa precio_oferta en todas las
   respuestas y estas clases lo muestran en la tarjeta y en la ficha. */
.price-lista-tachado {
  font-size: .9rem;
  color: #888;
  text-decoration: line-through;
  line-height: 1.2;
}
.price-oferta { color: #1a8a3f; }

.price-lista-tachado--detalle { font-size: 1.1rem; margin-bottom: .1rem; }
.main-price--oferta { color: #1a8a3f; }

.oferta-ahorro {
  display: inline-block;
  margin-top: .35rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: #e8f6ed;
  color: #1a8a3f;
  font-size: .85rem;
  font-weight: 600;
}

/* ======== Panel: seccion Productos ELIT ========
   Misma paleta que el resto del panel. El interruptor de Bootstrap viene azul;
   aca se pinta con el rojo Praxis, que es el color de "apagado del sitio" y el
   que ya usa el contador de ocultos. */
.elit-buscador { position: relative; }
.elit-buscador > i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--adm-suave);
  pointer-events: none;
}
.elit-buscador input {
  width: 100%;
  padding: .6rem 2.4rem;
  border: 1px solid var(--adm-borde);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--adm-texto);
}
.elit-buscador input:focus {
  outline: none;
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 3px var(--praxis-red-light);
}
.elit-buscador button {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--adm-suave);
  cursor: pointer;
  line-height: 1;
}
.elit-buscador button:hover { color: var(--praxis-red); }

.elit-ayuda { font-size: .78rem; color: var(--adm-suave); margin: .5rem 0 0; }
.elit-ayuda b { color: var(--adm-texto); }

.elit-fila {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--adm-borde);
}
.elit-fila:last-child { border-bottom: none; }
.elit-fila img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.elit-fila-txt { flex: 1; min-width: 0; }
.elit-nombre { font-size: .9rem; line-height: 1.3; }
.elit-meta { font-size: .76rem; color: var(--adm-suave); margin-top: .15rem; }

/* Un producto oculto se reconoce de un vistazo en la lista de resultados, sin
   tener que mirar el interruptor. */
.elit-fila--oculta .elit-nombre,
.elit-fila--oculta .elit-meta { opacity: .5; }
.elit-fila--oculta img { filter: grayscale(1); opacity: .45; }
.elit-pill {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--praxis-red-light);
  color: var(--praxis-red-dark);
  padding: .2rem .5rem;
  border-radius: 999px;
}

.elit-oc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--adm-borde);
}
.elit-oc-item:last-of-type { border-bottom: none; }

#section-ocultos .form-check-input:checked {
  background-color: var(--praxis-red);
  border-color: var(--praxis-red);
}
#section-ocultos .form-check-input:focus {
  border-color: var(--praxis-red);
  box-shadow: 0 0 0 .2rem var(--praxis-red-light);
}