: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;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', '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 === */
.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%);
}
.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; }
.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; }

/* WhatsApp float */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  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 { width: 52px; height: 52px; font-size: 26px; bottom: 16px; right: 16px; }
}

/* ======== 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; }
.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 { 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; }
}