/* =============================================================================
   SUBEX FX — Premium interaction layer (custom cursor, tilt, reveal, mesh, etc.)
   Loaded on top of the brand skin. Each effect is opt-in via data-* attributes
   or class hooks and safely no-ops on touch / reduced-motion devices.
   ============================================================================= */

/* ---------- FX.1 Custom cursor (desktop only) ---------- */
.sx-cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  display: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .25s cubic-bezier(.22,1,.36,1);
}
.sx-cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .sx-cursor { display: block; } }
.sx-cursor-dot, .sx-cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform;
}
.sx-cursor-dot {
  width: 6px; height: 6px; margin: -3px;
  background: var(--sx-cream);
  border-radius: 50%;
}
.sx-cursor-ring {
  width: 36px; height: 36px; margin: -18px;
  border: 1px solid var(--sx-cream);
  border-radius: 50%;
  transition: width .35s cubic-bezier(.22,1,.36,1),
              height .35s cubic-bezier(.22,1,.36,1),
              margin .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease, background .35s ease;
}
.sx-cursor.is-interactive .sx-cursor-ring {
  width: 60px; height: 60px; margin: -30px;
  border-color: var(--sx-gold);
  background: rgba(201, 162, 77, 0.12);
}
.sx-cursor.is-clicking .sx-cursor-ring {
  width: 22px; height: 22px; margin: -11px;
}
html.sx-has-cursor,
html.sx-has-cursor a,
html.sx-has-cursor button,
html.sx-has-cursor .btn,
html.sx-has-cursor input,
html.sx-has-cursor textarea,
html.sx-has-cursor select { cursor: none !important; }
/* Never hide native cursor on real form fields — usability rules */
html.sx-has-cursor input[type="text"],
html.sx-has-cursor input[type="email"],
html.sx-has-cursor input[type="password"],
html.sx-has-cursor input[type="search"],
html.sx-has-cursor input[type="number"],
html.sx-has-cursor input[type="tel"],
html.sx-has-cursor input[type="url"],
html.sx-has-cursor textarea { cursor: text !important; }

/* ---------- FX.2 Scroll progress bar (top hairline) ---------- */
.sx-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9998;
  background: rgba(14, 26, 47, 0.06);
  pointer-events: none;
}
.sx-progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--sx-gold-3), var(--sx-gold), var(--sx-gold-2));
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform .08s linear;
  box-shadow: 0 0 12px rgba(201, 162, 77, 0.6);
}

/* ---------- FX.3 Grain overlay (cinematic texture) ---------- */
.sx-grain {
  position: fixed; inset: 0; z-index: 9997;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: sx-grain-shift 1.2s steps(6) infinite;
}
@keyframes sx-grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -2%); }
  60%  { transform: translate(-2%, 4%); }
  80%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- FX.4 Reveal on scroll ---------- */
[data-sx-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-sx-reveal="left"]  { transform: translateX(-40px); }
[data-sx-reveal="right"] { transform: translateX(40px); }
[data-sx-reveal="fade"]  { transform: none; }
[data-sx-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-sx-reveal-delay="1"].is-revealed { transition-delay: .08s; }
[data-sx-reveal-delay="2"].is-revealed { transition-delay: .16s; }
[data-sx-reveal-delay="3"].is-revealed { transition-delay: .24s; }
[data-sx-reveal-delay="4"].is-revealed { transition-delay: .32s; }

/* ---------- FX.5 Tilt 3D on cards (max 7deg) ---------- */
.sx-tilt {
  --sx-rx: 0deg; --sx-ry: 0deg;
  transform: perspective(1000px) rotateX(var(--sx-rx)) rotateY(var(--sx-ry));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
  will-change: transform;
}
.sx-tilt:hover {
  transition-duration: .15s;
  box-shadow: 0 24px 60px -20px rgba(14, 26, 47, 0.35),
              0 0 0 1px rgba(201, 162, 77, 0.35),
              0 0 40px -8px rgba(201, 162, 77, 0.25);
}
/* Halo dorado + lift al pasar sobre lote cards */
.product-thumb-info,
.owl-item .product,
.product {
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, filter .5s ease;
  will-change: transform;
}
.product-thumb-info:hover,
.owl-item .product:hover,
.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(14, 26, 47, 0.45),
              0 0 0 1px rgba(201, 162, 77, 0.4),
              0 0 40px -10px rgba(201, 162, 77, 0.3);
}

/* ---------- FX.6 Magnetic buttons ---------- */
.sx-has-magnetic {
  display: inline-flex; position: relative; isolation: isolate;
}
.sx-magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

/* ---------- FX.7 Mesh gradient hero + hairline dorada ---------- */
@property --sx-mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sx-mesh-x     { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --sx-mesh-y     { syntax: "<percentage>"; inherits: false; initial-value: 40%; }

.sx-mesh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sx-mesh::before {
  content: ""; position: absolute; inset: -15%;
  z-index: 0;
  background:
    radial-gradient(60% 55% at var(--sx-mesh-x) var(--sx-mesh-y),
      rgba(201, 162, 77, 0.45), transparent 62%),
    radial-gradient(45% 40% at calc(100% - var(--sx-mesh-x)) calc(100% - var(--sx-mesh-y)),
      rgba(224, 189, 106, 0.28), transparent 60%),
    conic-gradient(from var(--sx-mesh-angle) at 50% 50%,
      rgba(20, 36, 60, 0.6),
      rgba(11, 21, 36, 0.9),
      rgba(201, 162, 77, 0.18),
      rgba(14, 26, 47, 0.85),
      rgba(20, 36, 60, 0.6));
  filter: blur(70px) saturate(130%);
  opacity: 0.9;
  animation: sx-mesh-shift 26s linear infinite;
  pointer-events: none;
}
.sx-mesh::after {
  /* Vignette + hairline dorada inferior */
  content: ""; position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgba(10, 15, 26, 0.55) 100%),
    linear-gradient(180deg, transparent 92%, rgba(201, 162, 77, 0.35) 96%, transparent 100%);
}
.sx-mesh > * { position: relative; z-index: 1; }
@keyframes sx-mesh-shift {
  0%   { --sx-mesh-angle: 0deg;   --sx-mesh-x: 30%; --sx-mesh-y: 40%; }
  50%  { --sx-mesh-angle: 180deg; --sx-mesh-x: 70%; --sx-mesh-y: 60%; }
  100% { --sx-mesh-angle: 360deg; --sx-mesh-x: 30%; --sx-mesh-y: 40%; }
}

/* Apply mesh to the home main-slider carousel */
.main-slider,
.tp-banner-container,
.rev_slider_wrapper {
  position: relative;
}
.main-slider::before,
.tp-banner-container::before,
.rev_slider_wrapper::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at var(--sx-mesh-x, 30%) var(--sx-mesh-y, 40%),
      rgba(201, 162, 77, 0.35), transparent 62%),
    radial-gradient(45% 40% at calc(100% - var(--sx-mesh-x, 30%)) calc(100% - var(--sx-mesh-y, 40%)),
      rgba(224, 189, 106, 0.22), transparent 60%);
  filter: blur(80px) saturate(130%);
  mix-blend-mode: screen;
  opacity: .85;
  animation: sx-mesh-shift 26s linear infinite;
}
.main-slider::after,
.tp-banner-container::after,
.rev_slider_wrapper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 162, 77, 0.7) 20%,
    var(--sx-gold-3) 50%,
    rgba(201, 162, 77, 0.7) 80%,
    transparent 100%);
  box-shadow: 0 0 24px 2px rgba(201, 162, 77, 0.5);
  pointer-events: none;
}

/* ---------- FX.8 Editorial kicker (label + hairline) ---------- */
.sx-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sx-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sx-gold);
  margin-bottom: 12px;
}
.sx-kicker::before {
  content: ""; width: 32px; height: 1px;
  background: var(--sx-gold);
}

/* Serif italic H1 upgrade for hero titles */
.main-slider h1,
.main-slider .tp-caption h1,
.hero-title,
.page-header h1 {
  font-family: var(--sx-font-display) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

/* ---------- FX.9 Ripple click ---------- */
.sx-ripple { position: relative; overflow: hidden; }
.sx-ripple::after {
  content: ""; position: absolute;
  top: var(--sx-ry, 50%); left: var(--sx-rx, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: rgba(201, 162, 77, 0.35);
  transform: translate(-50%, -50%);
  transition: width .6s ease-out, height .6s ease-out, opacity .8s ease-out;
  opacity: 0; pointer-events: none;
}
.sx-ripple.is-rippling::after {
  width: 500px; height: 500px; opacity: 1;
  transition: width .6s ease-out, height .6s ease-out, opacity 0s;
}

/* ---------- FX.10 Nav shrink on scroll ---------- */
html.sx-scrolled #header {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(201, 162, 77, 0.15);
  backdrop-filter: blur(14px);
  background: rgba(14, 26, 47, 0.85) !important;
}
html.sx-scrolled #header .header-container { padding-top: 6px; padding-bottom: 6px; }
html.sx-scrolled #header .header-logo img { max-height: 42px; transition: max-height .3s ease; }

/* ---------- FX.11 Link underline reveal ---------- */
.sx-link,
#header .header-nav-main nav > ul > li > a {
  position: relative;
}
#header .header-nav-main nav > ul > li > a::after {
  content: ""; position: absolute;
  left: 15px; right: 15px; bottom: 0;
  height: 1px; background: var(--sx-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
#header .header-nav-main nav > ul > li:hover > a::after,
#header .header-nav-main nav > ul > li.active > a::after {
  transform: scaleX(1);
}

/* ---------- FX.12 Reduced-motion — only kill INTRUSIVE stuff ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-grain { display: none; }
  .sx-mesh::before,
  .main-slider::before,
  .tp-banner-container::before,
  .rev_slider_wrapper::before { animation-duration: 0s; }
  /* NOTE: keep cursor, tilt, reveal, magnetic, ripple — these are micro-interactions */
}

/* End SUBEX FX ================================================================ */


/* ============================================================================
   SUBEX v6 — Compact hero + feature card + banner strip + categorías + proceso
   + header/logo alignment fix + kill remaining red
   ============================================================================ */

/* ---------- HEADER: fix logo + alignment ---------------------------------- */
html #header .header-body {
  background: var(--sx-paper) !important;
  border-bottom: 1px solid rgba(201, 162, 77, 0.18) !important;
  box-shadow: 0 1px 20px -8px rgba(14, 26, 47, 0.08);
}
html #header .header-top {
  background: var(--sx-navy-1) !important;
  border-bottom: 0 !important;
  min-height: 42px;
}
html #header .header-top .nav-link {
  color: var(--sx-cream-1) !important;
  font-family: var(--sx-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  transition: color .3s ease;
}
html #header .header-top .nav-link:hover { color: var(--sx-gold) !important; }
html #header .header-top .nav-link i {
  color: var(--sx-gold);
  font-size: 0.62rem;
  margin-right: 0.4rem;
}
html #header .header-top .nav-item-left-border {
  border-left: 1px solid rgba(201, 162, 77, 0.2) !important;
}

/* Logo container */
html #header .header-container {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
html #header .header-logo {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex;
  align-items: center;
}
html #header .header-logo a {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
html #header .header-logo img {
  max-height: 90px !important;
  height: auto !important;
  width: 130px !important;
  transition: max-height .35s ease;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none;
}
html #header .header-nav-main nav > ul > li > a {
  font-family: var(--sx-font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--sx-navy-1) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem !important;
  transition: color .3s ease;
}
html #header .header-nav-main nav > ul > li > a:hover,
html #header .header-nav-main nav > ul > li.active > a {
  color: var(--sx-gold) !important;
  background: transparent !important;
}
/* User widgets (Bienvenido / Salir) */
html #header .header-extra-info .feature-box .header-extra-info-text strong {
  font-family: var(--sx-font-display) !important;
  color: var(--sx-navy-1) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}
html #header .header-extra-info .feature-box .header-extra-info-text label {
  font-family: var(--sx-font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-navy-3) !important;
  margin: 0;
}
html #header .header-extra-info .feature-box .feature-box-icon {
  background: var(--sx-gold) !important;
  border-radius: 3px !important;
}
html #header .header-extra-info .feature-box .feature-box-icon i { color: var(--sx-navy-1) !important; }

/* Sticky header shrink */
html #header.sticky-header-active .header-body { padding: 0.2rem 0; }
html #header.sticky-header-active .header-logo img { max-height: 80px !important; width: 140px !important; }

/* ---------- HERO compact override ----------------------------------------- */
.sx-hero.sx-hero-compact {
  min-height: 0 !important;
  padding: 5rem 0 4rem !important;
  align-items: center;
}
.sx-hero.sx-hero-compact .sx-hero-grid {
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.sx-hero.sx-hero-compact h1.sx-hero-title,
.sx-hero.sx-hero-compact h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem) !important;
  margin-bottom: 1.3rem !important;
  line-height: 1.05 !important;
}
.sx-hero.sx-hero-compact .sx-hero-lead {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
  max-width: 480px;
}
.sx-hero.sx-hero-compact .sx-hero-kicker { margin-bottom: 1.1rem; }
.sx-hero.sx-hero-compact .sx-hero-ctas .btn { min-width: 160px; }
.sx-hero.sx-hero-compact .sx-hero-stats {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  gap: 1.2rem;
}
.sx-hero.sx-hero-compact .sx-hero-stat .sx-stat-num {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 0.25rem;
}
.sx-hero.sx-hero-compact .sx-hero-stat .sx-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* ---------- HERO feature card (banner principal en columna derecha) ------- */
.sx-hero-feature {
  position: relative;
  animation: sx-fade-up 1.1s cubic-bezier(.22,1,.36,1) 0.35s both;
}
.sx-hero-feature-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--sx-navy-3);
  border: 1px solid rgba(201, 162, 77, 0.28);
  text-decoration: none !important;
  transition: all .55s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(201, 162, 77, 0.08);
}
.sx-hero-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 77, 0.6);
  box-shadow:
    0 60px 100px -30px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(201, 162, 77, 0.25),
    0 0 80px -20px rgba(201, 162, 77, 0.3);
}
.sx-hero-feature-card .sx-banner-media {
  aspect-ratio: 4 / 3;
}
.sx-hero-feature-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sx-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sx-gold);
  padding: 0.35rem 0.75rem;
  background: rgba(10, 15, 26, 0.75);
  border: 1px solid rgba(201, 162, 77, 0.4);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sx-hero-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-family: var(--sx-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx-gold);
  padding-top: 0.7rem;
  border-top: 1px solid rgba(201, 162, 77, 0.2);
  transition: gap .35s ease;
}
.sx-hero-feature-card:hover .sx-hero-feature-cta { gap: 0.9rem; }
.sx-hero-feature-cta i { font-size: 0.65rem; }
.sx-hero-feature-placeholder {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem;
  background: var(--sx-navy-3);
  border: 1px dashed rgba(201, 162, 77, 0.35);
  border-radius: 6px;
  color: var(--sx-cream-3);
}
.sx-hero-feature-placeholder i { font-size: 3rem; color: var(--sx-gold); opacity: 0.5; }
.sx-hero-feature-placeholder span {
  font-family: var(--sx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- BANNER STRIP (secundarios en grilla) -------------------------- */
.sx-banner-strip {
  background: var(--sx-navy-1);
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid rgba(201, 162, 77, 0.15);
}
.sx-banner-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(201, 162, 77, 0.15);
}
.sx-banner-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.sx-banner-strip-grid .sx-banner-side .sx-banner-media { aspect-ratio: 16 / 10; }
@media (max-width: 991px) {
  .sx-banner-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sx-banner-strip-grid { grid-template-columns: 1fr; }
}

/* ---------- CATEGORÍAS ---------------------------------------------------- */
.sx-categorias {
  background: linear-gradient(180deg, var(--sx-paper) 0%, #eef3fb 100%);
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.sx-categorias::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 162, 77, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 77, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  pointer-events: none;
}
.sx-categorias .container { position: relative; z-index: 1; }
.sx-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 991px) { .sx-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sx-cat-grid { grid-template-columns: 1fr; } }
.sx-cat-card {
  background: #fff;
  border: 1px solid rgba(201, 162, 77, 0.2);
  border-radius: 6px;
  padding: 2rem 1.8rem 1.8rem;
  text-decoration: none !important;
  display: block;
  color: var(--sx-navy-1);
  transition: all .5s cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sx-cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sx-gold), var(--sx-gold-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  z-index: 1;
}
.sx-cat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 77, 0.5);
  box-shadow:
    0 30px 60px -20px rgba(14, 26, 47, 0.2),
    0 0 0 1px rgba(201, 162, 77, 0.15);
}
.sx-cat-card:hover::before { transform: scaleX(1); }
.sx-cat-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(201, 162, 77, 0.12);
  border-radius: 4px;
  color: var(--sx-gold);
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  transition: all .4s ease;
}
.sx-cat-card:hover .sx-cat-icon {
  background: var(--sx-gold);
  color: var(--sx-navy-1);
  transform: scale(1.05);
}
.sx-cat-card h4 {
  font-family: var(--sx-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.35rem !important;
  color: var(--sx-navy-1) !important;
  margin: 0 0 0.6rem 0 !important;
  letter-spacing: -0.01em;
}
.sx-cat-card p {
  font-family: var(--sx-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sx-navy-3, #46618f);
  margin: 0 0 1.2rem 0;
}
.sx-cat-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sx-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-gold);
  padding-top: 0.7rem;
  border-top: 1px solid rgba(201, 162, 77, 0.2);
  width: 100%;
  transition: gap .35s ease;
}
.sx-cat-card:hover .sx-cat-link { gap: 0.9rem; }
.sx-cat-link i { font-size: 0.65rem; }

/* ---------- PROCESO (Cómo funciona) --------------------------------------- */
.sx-proceso {
  background: var(--sx-navy-2);
  color: var(--sx-cream-1);
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.sx-proceso::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 500px at 20% 20%, rgba(201, 162, 77, 0.1), transparent 55%),
    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(201, 162, 77, 0.06), transparent 55%);
  pointer-events: none;
}
.sx-proceso .container { position: relative; z-index: 1; }
.sx-proceso .sx-section-title-block h2 { color: var(--sx-cream-1) !important; }
.sx-proceso .sx-section-title-block p { color: var(--sx-cream-2, #dbe4f2) !important; }
.sx-proceso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 991px) { .sx-proceso-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sx-proceso-grid { grid-template-columns: 1fr; } }
.sx-proceso-step {
  padding: 1.8rem 1.6rem;
  background: rgba(20, 36, 60, 0.5);
  border: 1px solid rgba(201, 162, 77, 0.2);
  border-radius: 6px;
  transition: all .4s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.sx-proceso-step:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 77, 0.5);
  background: rgba(20, 36, 60, 0.75);
}
.sx-proceso-num {
  font-family: var(--sx-font-display);
  font-size: 3rem;
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(135deg, var(--sx-gold-3), var(--sx-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 1.2rem;
  opacity: 0.9;
}
.sx-proceso-step h5 {
  font-family: var(--sx-font-display) !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  color: var(--sx-cream-1) !important;
  margin: 0 0 0.6rem 0 !important;
}
.sx-proceso-step p {
  font-family: var(--sx-font-body);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--sx-cream-2, #dbe4f2);
  margin: 0;
  opacity: 0.85;
}

/* ---------- Kill remaining red overrides (safety net) --------------------- */
html .badge-danger,
html .bg-danger { background-color: var(--sx-navy-3) !important; color: var(--sx-cream-1) !important; }
html .text-danger { color: var(--sx-gold) !important; }
html .btn-danger {
  background-color: var(--sx-navy-3) !important;
  border-color: var(--sx-gold) !important;
  color: var(--sx-cream-1) !important;
}

/* Mobile hero compact */
@media (max-width: 991px) {
  .sx-hero.sx-hero-compact { padding: 4rem 0 3rem !important; }
  .sx-hero.sx-hero-compact .sx-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sx-hero.sx-hero-compact .sx-hero-feature-card .sx-banner-media { aspect-ratio: 16 / 10; }
}
/* End SUBEX v6 =============================================================== */

/* ============================================================================
   SUBEX v8 — Editorial RED/WHITE (matches mockup reference)
   Palette: red primary #fc7502, white bg, navy accent for countdown
   ============================================================================ */
:root {
  --sp-red: #fc7502;
  --sp-red-dark: #c25a00;
  --sp-red-light: #ff9436;
  --sp-navy: #031229;
  --sp-navy-2: #0a2049;
  --sp-ink: #101a2b;
  --sp-mute: #5d6f8c;
  --sp-line: #e3e9f3;
  --sp-bg: #ffffff;
  --sp-bg-alt: #f4f7fc;
}

/* ---------- v8.0 Top trust ribbon ---------- */
.sx-trust-ribbon {
  background: linear-gradient(90deg, var(--sp-red-dark) 0%, var(--sp-red) 50%, var(--sp-red-dark) 100%);
  color: #fff;
  padding: 0.6rem 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  position: relative;
  z-index: 1050;
}
.sx-trust-ribbon-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.sx-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.95;
}
.sx-trust-badge i {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 767px) {
  .sx-trust-ribbon { padding: 0.4rem 0; font-size: 0.72rem; }
  .sx-trust-ribbon-inner { gap: 1rem; }
  .sx-trust-badge { flex: 1 1 100%; justify-content: center; }
  .sx-trust-badge:not(:first-child) { display: none; }
}

/* ---------- v8.1 Banners hero section (WHITE bg) ---------- */
html body .sx-banners {
  background: var(--sp-bg) !important;
  padding: 2rem 0 2rem !important;
  position: relative;
  overflow: visible;
}
.sx-banners::before, .sx-banners::after { display: none !important; }

.sx-banners-head {
  display: none; /* La imagen no muestra encabezado — va directo a los banners */
}

.sx-banners-row {
  align-items: stretch;
  margin: 0 -0.75rem;
}
.sx-banner-main-col,
.sx-banner-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 0.75rem;
}

/* ---------- v8.2 Banner card frame (dark, rounded) ---------- */
.sx-banner-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sp-navy);
  border: none;
  box-shadow: 0 20px 45px -20px rgba(15, 22, 38, 0.35);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.sx-banner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 55px -20px rgba(15, 22, 38, 0.5);
}
.sx-banner-card::after { display: none !important; }

.sx-banner-hero {
  aspect-ratio: 16 / 10;
  min-height: 420px;
}
.sx-banner-side {
  aspect-ratio: 16 / 8;
  min-height: 210px;
}

/* Owl carousel fills card */
.sx-banner-card .owl-carousel,
.sx-banner-card .owl-stage-outer,
.sx-banner-card .owl-stage,
.sx-banner-card .owl-item,
.sx-banner-card .owl-item > div { height: 100%; }
.sx-banner-card .thumb-info,
.sx-banner-card .thumb-info-wrapper {
  display: block !important;
  height: 100%;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.sx-banner-card .thumb-info-wrapper {
  overflow: hidden;
}
.sx-banner-card .thumb-info-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.sx-banner-card:hover .thumb-info-wrapper img {
  transform: scale(1.06);
}

/* ---------- v8.3 MAIN banner — dark overlay CTA card in bottom-left ---------- */
.sx-banner-hero .thumb-info-title {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  right: auto;
  max-width: 44%;
  padding: 1.4rem 1.5rem 1.5rem;
  background: rgba(15, 22, 38, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  z-index: 3;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
}
.sx-banner-hero .thumb-info-inner {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.sx-banner-hero .thumb-info-type {
  display: block !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  padding: 0 0 0.9rem 0 !important;
  line-height: 1.5;
  font-weight: 400 !important;
}
/* Fake CTA button appended via CSS content (uses the banner enlace) */
.sx-banner-hero .thumb-info-title::after {
  content: "PARTICIPA EN NUESTRAS SUBASTAS →";
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--sp-red);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-top: 0.25rem;
  transition: background .25s ease;
}
.sx-banner-hero .thumb-info-title:hover::after {
  background: var(--sp-red-dark);
}

/* Top-right badge (SUBASTA label in red) */
.sx-banner-hero .thumb-info-caption {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  left: auto;
  z-index: 4;
  background: transparent;
  padding: 0;
}
.sx-banner-hero .thumb-info-caption-text {
  display: inline-block;
  color: var(--sp-red);
  background: #fff;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4);
}

/* Small SUBASTA label pill in top-left of main image (before image loads or as branding) */
.sx-banner-hero::before {
  content: "SUBASTA";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--sp-red);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- v8.4 SIDE banners — title left + image right (via gradient scrim) ---------- */
.sx-banner-side::before {
  content: "SUBASTA";
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  z-index: 3;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--sp-red);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.sx-banner-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(15, 22, 38, 0.92) 0%, rgba(15, 22, 38, 0.65) 40%, rgba(15, 22, 38, 0) 65%);
  pointer-events: none;
  display: block !important;
}
.sx-banner-side .thumb-info-title {
  position: absolute;
  top: 3rem;
  left: 1.2rem;
  right: auto;
  bottom: auto;
  max-width: 55%;
  padding: 0;
  background: transparent !important;
  z-index: 4;
  transform: none !important;
  opacity: 1 !important;
}
.sx-banner-side .thumb-info-inner {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff !important;
  line-height: 1.05;
  margin-bottom: 0.6rem;
  text-transform: none !important;
  letter-spacing: -0.02em;
}
.sx-banner-side .thumb-info-type {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-family: "Inter", sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
.sx-banner-side .thumb-info-type::before {
  content: "\f073"; /* fa-calendar-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 0.35rem;
}

/* Bottom-right label ("Banner Destacado 1") on the image side */
.sx-banner-side .thumb-info-caption {
  position: absolute;
  bottom: 1rem;
  right: 1.2rem;
  left: auto;
  top: auto;
  z-index: 3;
  background: transparent;
  padding: 0;
}
.sx-banner-side .thumb-info-caption-text {
  display: inline-block;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- v8.5 Owl navigation & dots (subtle round buttons, red dots) ---------- */
.sx-banner-hero .owl-nav {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
  padding: 0 0.8rem;
}
.sx-banner-hero .owl-nav button.owl-prev,
.sx-banner-hero .owl-nav button.owl-next {
  pointer-events: auto;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: all .25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 0 !important;
}
.sx-banner-hero:hover .owl-nav button.owl-prev,
.sx-banner-hero:hover .owl-nav button.owl-next { opacity: 1; }
.sx-banner-hero .owl-nav button:hover {
  background: var(--sp-red) !important;
  border-color: var(--sp-red) !important;
}

/* Side banners: hide arrows, keep clean */
.sx-banner-side .owl-nav { display: none !important; }

.sx-banner-hero .owl-dots {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0.4rem;
}
.sx-banner-hero .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45) !important;
  transition: all .3s ease;
  margin: 0 !important;
  border: none !important;
}
.sx-banner-hero .owl-dots .owl-dot.active span {
  background: var(--sp-red) !important;
  width: 22px;
}

/* ---------- v8.6 Countdown strip (dark navy card, RED accents) ---------- */
html body .sx-countdown-section {
  background: var(--sp-bg) !important;
  padding: 0 0 2rem !important;
}
.sx-countdown-strip {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr auto;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, var(--sp-navy) 0%, var(--sp-navy-2) 100%);
  border: none;
  border-radius: 18px;
  padding: 1.6rem 2rem;
  box-shadow: 0 20px 45px -20px rgba(15, 22, 38, 0.4);
  position: relative;
  overflow: hidden;
}
.sx-countdown-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(193, 39, 45, 0.15), transparent 60%);
  pointer-events: none;
}
.sx-countdown-strip > * { position: relative; z-index: 1; }

.sx-countdown-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.sx-countdown-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(193, 39, 45, 0.25), rgba(193, 39, 45, 0.08));
  border: 1px solid rgba(193, 39, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-red-light);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sx-countdown-kicker {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sp-red-light);
  margin-bottom: 0.2rem;
}
.sx-countdown-date {
  font-family: "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.sx-countdown-hour {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.15rem;
}

.sx-countdown-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.sx-countdown-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(193, 39, 45, 0.25);
  border-radius: 12px;
  padding: 0.85rem 0.4rem 0.7rem;
  text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}
.sx-countdown-box:hover {
  border-color: rgba(193, 39, 45, 0.6);
  transform: translateY(-2px);
}
.sx-countdown-box span {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--sp-red-light);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sx-countdown-box small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.4rem;
}

.sx-countdown-cta .btn,
.sx-countdown-cta .btn-primary {
  background: var(--sp-red) !important;
  border-color: var(--sp-red) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.9rem 1.4rem !important;
  border-radius: 10px !important;
  white-space: nowrap;
  transition: all .25s ease;
  box-shadow: 0 10px 22px -10px rgba(193, 39, 45, 0.6);
}
.sx-countdown-cta .btn:hover {
  background: var(--sp-red-dark) !important;
  border-color: var(--sp-red-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(193, 39, 45, 0.7);
}

/* ---------- v8.7 Feature grid — WHITE cards with RED icon squares ---------- */
html body .sx-feature-grid-section {
  background: var(--sp-bg) !important;
  padding: 1rem 0 1rem !important;
}
.sx-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.sx-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.3rem;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.sx-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(193, 39, 45, 0.35);
  box-shadow: 0 20px 40px -18px rgba(15, 22, 38, 0.15);
}
.sx-feature-card::before { display: none !important; }
.sx-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--sp-red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.sx-feature-card h5 {
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.sx-feature-card p {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: var(--sp-mute);
  line-height: 1.55;
  margin: 0;
}

/* ---------- v8.8 Responsive ---------- */
@media (max-width: 991px) {
  .sx-banner-hero { min-height: 320px; }
  .sx-banner-hero .thumb-info-title { max-width: 60%; }
  .sx-banner-side-col { flex-direction: row; }
  .sx-banner-side-col .sx-banner-card { flex: 1; }
  .sx-countdown-strip {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: left;
  }
  .sx-countdown-cta { text-align: center; }
  .sx-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .sx-banner-hero { min-height: 260px; }
  .sx-banner-hero .thumb-info-title {
    left: 0.9rem; right: 0.9rem; bottom: 0.9rem; max-width: none;
    padding: 1rem 1.1rem 1.15rem;
  }
  .sx-banner-side-col { flex-direction: column; }
  .sx-countdown-boxes { grid-template-columns: repeat(2, 1fr); }
  .sx-countdown-box span { font-size: 1.5rem; }
  .sx-feature-grid { grid-template-columns: 1fr; }
}
/* End SUBEX v8 ==================================================== */

/* ============================================================================
   SUBEX v9 — Fixes: banner overlaps, sizes, remates list styling
   ============================================================================ */

/* ---------- v9.1 MAIN banner: shrink CTA card, don't cover image text ---------- */
.sx-banner-hero {
  min-height: 380px !important;
  aspect-ratio: 16 / 9 !important;
}
.sx-banner-hero .thumb-info-title {
  left: 1.5rem !important;
  bottom: 1.5rem !important;
  right: auto !important;
  max-width: 32% !important;
  min-width: 260px;
  padding: 1rem 1.15rem 1.15rem !important;
  border-radius: 12px !important;
  background: rgba(15, 22, 38, 0.92) !important;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.55);
}
.sx-banner-hero .thumb-info-inner {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.15 !important;
}
.sx-banner-hero .thumb-info-type {
  font-size: 0.72rem !important;
  padding: 0 0 0.7rem 0 !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.sx-banner-hero .thumb-info-title::after {
  font-size: 0.65rem !important;
  padding: 0.55rem 0.85rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 6px !important;
}
/* remove the redundant "SUBASTA" pseudo — image already has it burned in */
.sx-banner-hero::before { display: none !important; }
.sx-banner-hero .thumb-info-caption { display: none !important; }

/* ---------- v9.2 SIDE banners: CLEAN — hide all overlays, image only ---------- */
.sx-banner-side::before { display: none !important; }
.sx-banner-side::after { display: none !important; }
.sx-banner-side .thumb-info-title { display: none !important; }
.sx-banner-side .thumb-info-caption { display: none !important; }
.sx-banner-side {
  aspect-ratio: 16 / 9 !important;
  min-height: 180px !important;
  border-radius: 14px !important;
}

/* ---------- v9.3 Countdown strip: fine-tune ---------- */
.sx-countdown-section { padding: 1rem 0 2.5rem !important; background: #fff !important; }
.sx-countdown-strip {
  background: var(--sp-navy) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.75rem !important;
  gap: 1.75rem !important;
  grid-template-columns: 1.1fr 1.4fr auto !important;
}
.sx-countdown-icon {
  background: var(--sp-red) !important;
  border: none !important;
  color: #fff !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
}
.sx-countdown-kicker {
  color: var(--sp-red) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
}
.sx-countdown-date {
  font-family: "Inter", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.15 !important;
}
.sx-countdown-hour {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.82rem !important;
  margin-top: 0.2rem !important;
}
.sx-countdown-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 0.75rem 0.5rem 0.6rem !important;
}
.sx-countdown-box span {
  color: var(--sp-red) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.sx-countdown-box small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.18em !important;
  margin-top: 0.35rem !important;
  font-weight: 600 !important;
}
.sx-countdown-cta .btn {
  background: var(--sp-red) !important;
  border-color: var(--sp-red) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  padding: 0.85rem 1.3rem !important;
  border-radius: 8px !important;
}
.sx-countdown-cta .btn:hover {
  background: var(--sp-red-dark) !important;
  border-color: var(--sp-red-dark) !important;
}

/* ---------- v9.4 Feature cards: sentence case (not uppercase) ---------- */
.sx-feature-card h5 {
  text-transform: none !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
}

/* ---------- v9.5 Upcoming remates list — modern card style ---------- */
/* The old block: `.container > .row.mt-5 > .col-lg-8 > h2` + paragraph + button */
.main.shop > .container:not(.sx-banners .container):not(.sx-countdown-section .container):not(.sx-feature-grid-section .container) {
  max-width: 1200px;
  padding: 3rem 1rem 4rem;
}
.main.shop > .container > .row.mt-5 {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 1.5rem 0 !important;
  transition: all .3s ease;
  align-items: center;
}
.main.shop > .container > .row.mt-5:hover {
  border-color: rgba(193, 39, 45, 0.3);
  box-shadow: 0 15px 35px -15px rgba(15, 22, 38, 0.18);
  transform: translateY(-2px);
}
.main.shop > .container > .row.mt-5 h2 {
  font-family: "Inter", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--sp-ink) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.main.shop > .container > .row.mt-5 h2 .badge {
  background: var(--sp-red) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 0.65rem !important;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 0.35rem 0.7rem !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  border: none !important;
}
.main.shop > .container > .row.mt-5 p {
  font-family: "Inter", sans-serif !important;
  font-size: 0.88rem !important;
  color: var(--sp-mute) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.main.shop > .container > .row.mt-5 p strong {
  color: var(--sp-ink);
  font-weight: 600;
}
.main.shop > .container > .row.mt-5 .btn-primary {
  background: var(--sp-red) !important;
  border-color: var(--sp-red) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.75rem 1.2rem !important;
  border-radius: 8px !important;
}
.main.shop > .container > .row.mt-5 .btn-primary:hover {
  background: var(--sp-red-dark) !important;
  border-color: var(--sp-red-dark) !important;
}
.main.shop > .container > .row.mt-5 .btn-success {
  background: #16a34a !important;
  border-color: #16a34a !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 0.6rem 1rem !important;
  border-radius: 8px !important;
}
.main.shop > .container > .row.mt-5 .btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.6rem 1rem !important;
  border-radius: 8px !important;
}

/* Hide the ugly <hr> separators between remates */
.main.shop > .container > hr { display: none !important; }

/* Section header BEFORE the remates list (real HTML, not pseudo) */
.sx-section-head {
  margin: 0.5rem 0 1.25rem;
  text-align: left;
}
.sx-section-kicker {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--sp-red);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.sx-section-title {
  font-family: "Playfair Display", "Inter", serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--sp-ink) !important;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem !important;
  line-height: 1.15 !important;
}
.sx-section-sub {
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  color: var(--sp-mute);
  margin: 0 !important;
  max-width: 620px;
}

/* Reset the first remate row margin (previously used for pseudo header) */
.main.shop > .container > .row.mt-5:first-of-type {
  margin-top: 0 !important;
}

/* ---------- v9.6 Lot listing (below each remate) — clean & polished ---------- */
.properties-listing .listing-item {
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid var(--sp-line) !important;
  background: #fff;
  transition: all .3s ease;
}
.properties-listing .listing-item:hover {
  border-color: rgba(193, 39, 45, 0.3);
  box-shadow: 0 12px 28px -12px rgba(15, 22, 38, 0.15);
}
.properties-listing .thumb-info {
  border: none !important;
  background: transparent !important;
}
.properties-listing .thumb-info-listing-type {
  background: var(--sp-red) !important;
  border-radius: 6px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  padding: 0.4rem 0.8rem !important;
  z-index: 3;
}
.properties-listing .thumb-info-inner {
  color: var(--sp-red) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
}
.properties-listing .btn-primary {
  background: var(--sp-red) !important;
  border-color: var(--sp-red) !important;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border-radius: 7px;
}
.properties-listing .btn-tertiary,
.properties-listing .btn-secondary {
  background: var(--sp-navy) !important;
  border-color: var(--sp-navy) !important;
  color: #fff !important;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border-radius: 7px;
}

/* ---------- v9.7 Responsive tweaks ---------- */
@media (max-width: 991px) {
  .sx-banner-hero { min-height: 260px !important; }
  .sx-banner-hero .thumb-info-title { max-width: 65% !important; min-width: unset; }
  .sx-countdown-strip { grid-template-columns: 1fr !important; }
  .main.shop > .container > .row.mt-5 { padding: 1.25rem; }
  .main.shop > .container > .row.mt-5:first-of-type::after { top: -2rem; font-size: 1.3rem; }
}
@media (max-width: 575px) {
  .sx-banner-hero .thumb-info-title {
    left: 0.8rem !important;
    right: 0.8rem !important;
    bottom: 0.8rem !important;
    max-width: none !important;
  }
}
/* End SUBEX v9 ==================================================== */


/* ============================================================
   v10 — Header logo & nav sizing (single-row layout)
   ============================================================ */
#header .header-logo {
  width: auto !important;
  min-width: 150px !important;
  margin-right: 1.25rem;
}
#header .header-logo img {
  width: 130px !important;
  height: auto !important;
  max-width: none !important;
}
.header-nav-main nav > ul#mainNav > li > a.dropdown-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 0.65rem 0.85rem !important;
  color: var(--sp-ink) !important;
  transition: color .2s ease;
}
.header-nav-main nav > ul#mainNav > li > a.dropdown-item:hover {
  color: var(--sp-red) !important;
  background: transparent !important;
}
/* Sticky logo (when scrolling) */
.html-header-sticky-active #header .header-logo img,
.header-nav-force-light-text .header-logo img {
  width: 140px !important;
}
@media (max-width: 991px) {
  #header .header-logo img { width: 150px !important; }
  #header .header-logo { min-width: 160px !important; }
}

/* ============================================================
   v11 — Sticky shrink + inline extra-info + compact footer
   ============================================================ */

/* --- v11.1 Header stays at top only (NOT sticky) ------------- */
#header {
  position: relative !important;
  z-index: 1030;
  background: #fff;
}
/* Disable Porto sticky scripts visually — no fixed positioning on scroll */
html.sticky-header-enabled #header,
html.sticky-header-active #header,
html #header .header-body {
  position: relative !important;
  transform: none !important;
  top: auto !important;
}
/* No shrink/scrolled state at all */
html.sx-scrolled #header { box-shadow: none !important; }
html.sx-scrolled #header .header-body { min-height: 0 !important; }
html.sx-scrolled #header .header-logo img,
html.sx-scrolled #header .header-container,
html.sx-scrolled #header .header-extra-info li a,
html.sx-scrolled #header .header-extra-info .feature-box-icon,
html.sx-scrolled #header .header-extra-info strong,
html.sx-scrolled #header .header-extra-info label { all: revert; }
html.sx-scrolled .sx-trust-ribbon { display: block !important; }

/* --- v11.2 Inline extra-info + nav on same visual row -------- */
/* Keep Porto's default column layout (top row = extra-info, bottom row = nav).
   Just make extra-info compact so it matches image 3 pill style. */

.header-extra-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
}
.header-extra-info li { list-style: none; }
.header-extra-info li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.5rem 0.65rem !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: background .2s ease;
}
.header-extra-info li a:hover { background: rgba(193, 39, 45, 0.06) !important; }
.header-extra-info .feature-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin: 0 !important;
}
.header-extra-info .feature-box-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  background: var(--sp-red) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.header-extra-info .feature-box-icon i {
  color: #fff !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}
.header-extra-info .header-extra-info-text {
  display: inline-flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}
.header-extra-info strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--sp-red) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
.header-extra-info label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  color: var(--sp-mute) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* --- v11.3 Section head: hide the duplicate kicker if any ---- */
.sx-section-head .sx-section-kicker { display: none !important; }

/* --- v11.4 Footer compact ----------------------------------- */
.sx-footer-compact,
#footer.sx-footer-compact {
  padding: 0 !important;
  margin-top: 3rem !important;
}
.sx-footer-compact .container { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.sx-footer-compact .row { padding-top: 0 !important; padding-bottom: 0 !important; }
.sx-footer-compact img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  filter: brightness(0) invert(1);
}
.sx-footer-compact p, .sx-footer-compact h5 {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  margin: 0.5rem 0 0 !important;
}
.sx-footer-compact a {
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
}
.sx-footer-compact .footer-top-light-border { border-top-color: rgba(255,255,255,0.1) !important; }

/* --- v11.5 Responsive tweaks --------------------------------- */
@media (max-width: 1199px) {
  .header-extra-info label { display: none !important; }
  .header-extra-info strong { font-size: 0.78rem !important; }
  .header-nav-main nav > ul#mainNav > li > a.dropdown-item {
    padding: 0.55rem 0.55rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
  }
}
@media (max-width: 991px) {
  #header .header-column.justify-content-end { gap: 0.5rem; }
  .header-extra-info .feature-box-icon { width: 30px !important; height: 30px !important; }
  html.sx-scrolled #header .header-logo img { width: 90px !important; max-height: 50px !important; }
}

/* ============================================================
   v12 — Inline account items INSIDE #mainNav (image-3 style)
   ============================================================ */

/* Hide legacy .header-extra-info (Bienvenido/Salir feature-boxes above nav) */
#header .header-extra-info { display: none !important; }

/* The new pill items live inside #mainNav */
#mainNav .sx-nav-account { list-style: none; margin: 0 0 0 0.35rem; }
#mainNav .sx-nav-account > a.dropdown-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--sp-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.78rem !important;
  transition: background .2s ease;
}
#mainNav .sx-nav-account > a.dropdown-item:hover {
  background: rgba(193, 39, 45, 0.06) !important;
  color: var(--sp-red) !important;
}
#mainNav .sx-nav-account .sx-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: var(--sp-red) !important;
  color: #fff !important;
  flex: 0 0 34px !important;
}
#mainNav .sx-nav-account .sx-nav-icon i {
  color: #fff !important;
  font-size: 0.95rem !important;
}
#mainNav .sx-nav-account .sx-nav-text {
  display: inline-flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
#mainNav .sx-nav-account .sx-nav-text strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--sp-red) !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}
#mainNav .sx-nav-account .sx-nav-text small {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.66rem !important;
  color: var(--sp-mute) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.15 !important;
  display: block !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Long-name safety: keep both account items visible */
#mainNav .sx-nav-account { flex-shrink: 0 !important; }
#mainNav .sx-nav-account .sx-nav-text {
  max-width: 140px !important;
  overflow: hidden !important;
}
#mainNav .sx-nav-account .sx-nav-text strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 130px !important;
}
/* Highlight logout in red so it stands out even icon-only */
#mainNav .sx-nav-logout > a.dropdown-item .sx-nav-icon {
  background: var(--sp-red, #d16000) !important;
  color: #fff !important;
}
#mainNav .sx-nav-logout > a.dropdown-item .sx-nav-icon i { color: #fff !important; }
#mainNav .sx-nav-logout > a.dropdown-item:hover .sx-nav-icon {
  background: #8a4300 !important;
}

/* Icon-only compact mode for account items on any viewport that can't fit full text.
   The desktop nav has 8+ menu items plus 2 account items; when the username is long
   (e.g. "POSTOR DEMO PERUANAS") the text pushes items past the viewport edge.
   Below 1600px we collapse the account items to icon-only so "Cerrar Sesión" is
   always visible next to "Bienvenido". Tooltip via title="" provides context. */
@media (max-width: 1599.98px) {
  #mainNav .sx-nav-account .sx-nav-text { display: none !important; }
  #mainNav .sx-nav-account > a.dropdown-item {
    padding: 0.4rem 0.6rem !important;
  }
  #mainNav .sx-nav-account .sx-nav-icon {
    margin: 0 !important;
  }
}
/* Top header-extra-info (Bienvenido / Salir) — truncate long name */
.header-extra-info .feature-box-style-2 .header-extra-info-text { min-width: 0 !important; }
.header-extra-info .feature-box-style-2 .header-extra-info-text label,
.header-extra-info .feature-box-style-2 .header-extra-info-text strong {
  display: block !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.header-extra-info { flex-wrap: nowrap !important; }
.header-extra-info > li { flex-shrink: 0 !important; }

/* Sticky-scrolled compact version */
html.sx-scrolled #mainNav .sx-nav-account > a.dropdown-item {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.72rem !important;
}
html.sx-scrolled #mainNav .sx-nav-account .sx-nav-icon {
  width: 28px !important; height: 28px !important; flex-basis: 28px !important;
}
html.sx-scrolled #mainNav .sx-nav-account .sx-nav-text strong { font-size: 0.72rem !important; }
html.sx-scrolled #mainNav .sx-nav-account .sx-nav-text small { display: none !important; }

@media (max-width: 1199px) {
  #mainNav .sx-nav-account .sx-nav-text small { display: none !important; }
  #mainNav .sx-nav-account > a.dropdown-item { padding: 0.35rem 0.5rem !important; }
  #mainNav .sx-nav-account .sx-nav-icon { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
}

/* --- v12.1 Force single-line nav (fit everything) ------------ */
#mainNav { flex-wrap: nowrap !important; }
#header .header-logo { min-width: 150px !important; }
#header .header-logo img { width: 130px !important; }
.header-nav-main nav > ul#mainNav > li > a.dropdown-item {
  padding: 0.55rem 0.55rem !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

/* --- v13 — Kill Porto sticky FOR REAL ------------------------- */
html.sticky-header-enabled #header,
html.sticky-header-active #header,
html #header,
html #header .header-body,
html .sticky-wrapper {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  height: auto !important;
  min-height: 0 !important;
}
html #header .header-body { background: #fff !important; }
html.sticky-header-active .sticky-wrapper { height: auto !important; padding-top: 0 !important; }
html.sticky-header-enabled #header,
html.sticky-header-active #header { z-index: 1 !important; }

/* ===================================================================
   v14 — SOBRE NOSOTROS redesign
   =================================================================== */

/* Hero header: red diagonal accent + centered title */
.sx-about-header {
  position: relative;
  overflow: hidden;
}
.sx-about-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, var(--sp-red) 0%, rgba(252,117,2,0.75) 55%, rgba(252,117,2,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.sx-about-header::after {
  content: '';
  position: absolute;
  top: 40%; left: 5%;
  width: 90px; height: 90px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
}
.sx-about-header .container { position: relative; z-index: 2; }
.sx-about-header h1 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-size: 3rem !important;
  letter-spacing: -0.01em;
}
.sx-about-header .sub-title {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-bottom: 0.75rem;
}
.sx-about-header .sub-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 3px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sx-about-header .breadcrumb {
  background: transparent !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
}
.sx-about-header .breadcrumb li a,
.sx-about-header .breadcrumb li.active {
  color: #fff !important;
}
.sx-about-header .breadcrumb li + li::before {
  color: var(--sp-red) !important;
  content: '\203A' !important;
  padding: 0 0.5rem;
}

/* Wrap */
.sx-about-wrap {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  position: relative;
}
.sx-about-wrap::before {
  content: '';
  position: absolute;
  top: 40px; left: -20px;
  width: 90px; height: 90px;
  background-image: radial-gradient(circle, rgba(252,117,2,0.18) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: 0;
  pointer-events: none;
}
.sx-about-wrap::after {
  content: '';
  position: absolute;
  bottom: 260px; right: -10px;
  width: 90px; height: 90px;
  background-image: radial-gradient(circle, rgba(252,117,2,0.15) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: 0;
  pointer-events: none;
}
.sx-about-wrap > .row,
.sx-about-wrap > .sx-about-values { position: relative; z-index: 1; }

/* Row 1: intro + stats */
.sx-about-hero { margin-bottom: 3rem; }
.sx-about-intro { padding-right: 2rem; }
.sx-about-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: var(--sp-ink) !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.15;
}
.sx-about-title span { color: var(--sp-red) !important; }
.sx-about-underline {
  display: inline-block;
  width: 42px; height: 3px;
  background: var(--sp-red);
  border-radius: 2px;
  margin: 0.35rem 0 1rem;
}
.sx-about-lead {
  font-family: 'Inter', sans-serif;
  color: var(--sp-mute);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}
.sx-about-lead strong { color: var(--sp-ink); font-weight: 700; }

.sx-about-stats {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 20px 40px -20px rgba(15,22,38,0.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}
.sx-about-stat {
  padding: 0.5rem 0.25rem;
  border-right: 1px solid var(--sp-line);
}
.sx-about-stat:last-child { border-right: 0; }
.sx-about-stat i {
  display: block;
  font-size: 1.7rem;
  color: var(--sp-red);
  margin-bottom: 0.55rem;
}
.sx-about-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  color: var(--sp-ink);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.sx-about-stat span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--sp-mute);
  line-height: 1.4;
}

/* Row 2: pillars */
.sx-about-pillars { margin-bottom: 3rem; }
.sx-pillar-card {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sx-pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(252,117,2,0.35);
  box-shadow: 0 22px 40px -22px rgba(252,117,2,0.35);
}
.sx-pillar-ico {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(252,117,2,0.10);
  color: var(--sp-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.sx-pillar-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.18em !important;
  color: var(--sp-ink) !important;
  font-weight: 800 !important;
  margin: 0 0 0.4rem !important;
  text-transform: uppercase;
}
.sx-pillar-line {
  display: inline-block;
  width: 34px; height: 2px;
  background: var(--sp-red);
  border-radius: 2px;
  margin-bottom: 0.85rem;
}
.sx-pillar-card p {
  color: var(--sp-mute);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Row 3: valores in dark red band */
.sx-about-values {
  background: linear-gradient(90deg, #7a3a00 0%, var(--sp-red) 50%, #7a3a00 100%);
  border-radius: 12px;
  padding: 1.4rem 1.8rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  color: #fff;
  box-shadow: 0 20px 40px -20px rgba(252,117,2,0.55);
  position: relative;
  overflow: hidden;
}
.sx-about-values::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22><circle cx=%22150%22 cy=%22100%22 r=%2260%22 fill=%22white%22 opacity=%220.05%22/></svg>');
  background-size: cover;
  pointer-events: none;
}
.sx-value-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.sx-value-item + .sx-value-item { border-left: 1px solid rgba(255,255,255,0.18); padding-left: 1.25rem; }
.sx-value-item > i {
  font-size: 1.6rem;
  color: #fff;
  opacity: 0.95;
  flex-shrink: 0;
}
.sx-value-item strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.15rem;
}
.sx-value-item span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 991px) {
  .sx-about-intro { padding-right: 0; margin-bottom: 1.5rem; }
  .sx-about-values { grid-template-columns: repeat(2, 1fr); }
  .sx-value-item + .sx-value-item { border-left: 0; padding-left: 0; }
  .sx-value-item:nth-child(3),
  .sx-value-item:nth-child(4) { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.18); }
}
@media (max-width: 575px) {
  .sx-about-stats { grid-template-columns: 1fr; }
  .sx-about-stat { border-right: 0; border-bottom: 1px solid var(--sp-line); padding: 1rem 0; }
  .sx-about-stat:last-child { border-bottom: 0; }
  .sx-about-values { grid-template-columns: 1fr; }
  .sx-about-header h1 { font-size: 2.2rem !important; }
}

/* --- v14.1 fix Sobre Nosotros page-header stacking --- */
.sx-about-header .row { display: block !important; }
.sx-about-header .col-md-12 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  text-align: center !important;
}
.sx-about-header .col-md-12.order-1 { margin-bottom: 0.5rem; }
.sx-about-header h1 {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 0.5rem !important;
  text-align: center !important;
}
.sx-about-header .sub-title {
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.sx-about-header .breadcrumb { justify-content: center !important; }

/* ===================================================================
   v15 - GLOBAL modern skin for ALL interior pages
   =================================================================== */

/* ------- 15.1 Reusable page-header hero (mirror of sx-about-header) */
.sx-page-header,
.sx-about-header {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 4rem !important;
  min-height: 240px;
  background-size: cover !important;
  background-position: center !important;
}
.sx-page-header::before,
.sx-about-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, var(--sp-red) 0%, rgba(252,117,2,0.75) 55%, rgba(252,117,2,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.sx-page-header::after,
.sx-about-header::after {
  content: '';
  position: absolute;
  top: 40%; left: 5%;
  width: 90px; height: 90px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: 1;
  opacity: 0.45;
  pointer-events: none;
}
.sx-page-header .container,
.sx-about-header .container { position: relative; z-index: 2; }

.sx-page-header .row,
.sx-about-header .row { display: block !important; }
.sx-page-header .col-md-12,
.sx-about-header .col-md-12 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  text-align: center !important;
}
.sx-page-header h1,
.sx-about-header h1 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto 0.5rem !important;
  text-align: center !important;
}
.sx-page-header .sub-title,
.sx-about-header .sub-title {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
  padding-bottom: 0.75rem !important;
  text-align: center !important;
  position: relative !important;
}
.sx-page-header .sub-title::after,
.sx-about-header .sub-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 3px;
  background: var(--sp-red);
  border-radius: 2px;
}
.sx-page-header .breadcrumb,
.sx-about-header .breadcrumb {
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 0 0.5rem !important;
}
.sx-page-header .breadcrumb li a,
.sx-page-header .breadcrumb li.active,
.sx-about-header .breadcrumb li a,
.sx-about-header .breadcrumb li.active { color: #fff !important; }
.sx-page-header .breadcrumb li + li::before,
.sx-about-header .breadcrumb li + li::before {
  color: var(--sp-red) !important;
  content: '\203A' !important;
  padding: 0 0.5rem;
}

/* ------- 15.2 Body wrapper polish for all interior pages */
.main.shop { background: #fff !important; }
.main.shop > .container { padding-top: 1rem; padding-bottom: 3rem; }

/* ------- 15.3 Modern forms (used on contacto, bases, login, etc.) */
.main.shop .form-control,
.main.shop input[type=text].form-control,
.main.shop input[type=email].form-control,
.main.shop input[type=password].form-control,
.main.shop select.form-control,
.main.shop textarea.form-control {
  border: 1px solid var(--sp-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 0.75rem 0.95rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: var(--sp-ink) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: none !important;
  height: auto !important;
}
.main.shop textarea.form-control { min-height: 140px; }
.main.shop .form-control:focus {
  border-color: var(--sp-red) !important;
  box-shadow: 0 0 0 3px rgba(252,117,2,0.12) !important;
  outline: 0 !important;
}
.main.shop label,
.main.shop .form-group label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--sp-ink) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
}
.main.shop .form-group { margin-bottom: 1.1rem; }
.main.shop input[type=submit],
.main.shop .btn.btn-primary,
.main.shop .btn.btn-modern {
  background: var(--sp-red) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 1.6rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  box-shadow: 0 12px 24px -12px rgba(252,117,2,0.55) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.main.shop input[type=submit]:hover,
.main.shop .btn.btn-primary:hover,
.main.shop .btn.btn-modern:hover {
  background: #c25a00 !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -14px rgba(252,117,2,0.7) !important;
}

/* ------- 15.4 Contacto - info card + form card layout */
.main.shop .list-icons li {
  font-family: 'Inter', sans-serif;
  color: var(--sp-mute);
  font-size: 0.95rem;
  padding: 0.4rem 0;
}
.main.shop .list-icons li i {
  color: var(--sp-red) !important;
  margin-right: 0.5rem;
}
.main.shop .list-icons li strong { color: var(--sp-ink); }
.main.shop h4 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.5rem !important;
  color: var(--sp-ink) !important;
  font-weight: 700 !important;
}
.main.shop h4 strong { color: var(--sp-red) !important; }
.main.shop h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--sp-ink) !important;
  font-weight: 700 !important;
}
.main.shop h2 strong { color: var(--sp-red) !important; }

/* ------- 15.5 Featured boxes (Ayuda) */
.main.shop .featured-boxes-modern-style-2 { margin: 1rem 0 !important; }
.main.shop .featured-boxes-modern-style-2 .featured-box {
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10) !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
  height: auto !important;
  min-height: 320px;
}
.main.shop .featured-boxes-modern-style-2 .featured-box:hover {
  transform: translateY(-4px);
  border-color: rgba(252,117,2,0.35) !important;
  box-shadow: 0 22px 40px -22px rgba(252,117,2,0.35) !important;
}
.main.shop .featured-boxes-modern-style-2 .box-content { padding: 2rem 1.5rem !important; }
.main.shop .featured-boxes-modern-style-2 .icon-featured {
  width: 66px !important; height: 66px !important; line-height: 66px !important;
  font-size: 1.5rem !important;
  background: rgba(252,117,2,0.10) !important;
  color: var(--sp-red) !important;
  border-radius: 50% !important;
  margin: 0 auto 1rem !important;
}
.main.shop .featured-boxes-modern-style-2 .featured-box h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  color: var(--sp-ink) !important;
  margin-bottom: 0.6rem !important;
}
.main.shop .featured-boxes-modern-style-2 .featured-box p {
  color: var(--sp-mute) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}
.main.shop .featured-boxes-modern-style-2 .btn-outline {
  border: 1.5px solid var(--sp-red) !important;
  color: var(--sp-red) !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 0.55rem 1.2rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  font-size: 0.72rem !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}
.main.shop .featured-boxes-modern-style-2 .btn-outline:hover {
  background: var(--sp-red) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ------- 15.6 Accordion / toggle (Ayuda FAQs) */
.main.shop .toggle > section,
.main.shop .toggle > .toggle {
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 12px !important;
  margin-bottom: 0.75rem !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.main.shop .toggle > section:hover,
.main.shop .toggle > .toggle:hover { border-color: rgba(252,117,2,0.35) !important; }
.main.shop .toggle > section > label,
.main.shop .toggle > .toggle > label {
  background: #fff !important;
  color: var(--sp-ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 1rem 3rem 1rem 1.25rem !important;
  margin: 0 !important;
  border: 0 !important;
  cursor: pointer;
}
.main.shop .toggle > section > label::before,
.main.shop .toggle > .toggle > label::before {
  color: var(--sp-red) !important;
  font-weight: 700 !important;
}
.main.shop .toggle > section > p,
.main.shop .toggle > .toggle > p {
  padding: 0 1.25rem 1.1rem !important;
  color: var(--sp-mute) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.main.shop .toggle-primary > section.active,
.main.shop .toggle-primary > .toggle.active { border-color: rgba(252,117,2,0.5) !important; box-shadow: 0 12px 24px -14px rgba(252,117,2,0.25) !important; }

/* ------- 15.7 Testimonios grid */
.main.shop .testimonial.testimonial-style-3 {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  margin-bottom: 1.5rem;
  position: relative;
}
.main.shop .testimonial.testimonial-style-3:hover {
  transform: translateY(-4px);
  border-color: rgba(252,117,2,0.35);
  box-shadow: 0 22px 40px -22px rgba(252,117,2,0.35);
}
.main.shop .testimonial.testimonial-style-3::before {
  content: '\201C';
  position: absolute;
  top: 6px; right: 22px;
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(252,117,2,0.15);
}
.main.shop .testimonial.testimonial-style-3 blockquote {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  background: transparent !important;
}
.main.shop .testimonial.testimonial-style-3 blockquote::before,
.main.shop .testimonial.testimonial-style-3 blockquote::after { display: none !important; }
.main.shop .testimonial.testimonial-style-3 blockquote p {
  color: var(--sp-ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  font-style: normal !important;
}
.main.shop .testimonial.testimonial-style-3 .testimonial-arrow-down { display: none !important; }
.main.shop .testimonial.testimonial-style-3 .testimonial-author {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--sp-line) !important;
}
.main.shop .testimonial.testimonial-style-3 .testimonial-author-thumbnail img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border: 2px solid var(--sp-red) !important;
}
.main.shop .testimonial.testimonial-style-3 .testimonial-author p {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--sp-mute) !important;
}
.main.shop .testimonial.testimonial-style-3 .testimonial-author p strong {
  display: block;
  color: var(--sp-ink) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* ------- 15.8 Subastas listing wrap */
.sx-subastas-wrap { padding: 1rem 15px 3rem; }
.sx-subastas-wrap > .row.mt-5 {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1rem;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10);
  align-items: center;
}
.sx-subastas-wrap h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--sp-ink) !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.35rem !important;
}
.sx-subastas-wrap .badge {
  background: rgba(252,117,2,0.10) !important;
  color: var(--sp-red) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  vertical-align: middle !important;
}
.sx-subastas-wrap p { font-family: 'Inter', sans-serif; color: var(--sp-mute); font-size: 1rem !important; }
.sx-subastas-wrap p strong { color: var(--sp-ink); font-weight: 600; }
.sx-subastas-wrap .btn { border-radius: 10px !important; padding: 0.7rem 1.2rem !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.05em !important; font-size: 0.8rem !important; text-transform: uppercase !important; }
.sx-subastas-wrap .btn-success { background: #17a578 !important; border: 0 !important; box-shadow: 0 12px 24px -14px rgba(23,165,120,0.5) !important; }
.sx-subastas-wrap .btn-warning { background: #f0a419 !important; border: 0 !important; color: #fff !important; }
.sx-subastas-wrap .btn-primary { background: var(--sp-red) !important; }
.sx-subastas-wrap .btn-tertiary { background: #5d6f8c !important; color: #fff !important; }
.sx-subastas-wrap .btn-secondary { background: #031229 !important; color: #fff !important; }
.sx-subastas-wrap hr { display: none; }

/* Lote card inside subastas */
.sx-subastas-wrap .listing-item .thumb-info {
  border: 1px solid var(--sp-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.sx-subastas-wrap .listing-item:hover .thumb-info {
  transform: translateY(-3px);
  border-color: rgba(252,117,2,0.35) !important;
  box-shadow: 0 20px 32px -20px rgba(252,117,2,0.35) !important;
}
.sx-subastas-wrap .thumb-info-listing-type {
  background: var(--sp-ink) !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  padding: 0.3rem 0.7rem !important;
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
}
.sx-subastas-wrap .custom-thumb-info-title { padding: 0.5rem 0 !important; }
.sx-subastas-wrap .thumb-info-inner {
  font-family: 'Inter', sans-serif !important;
  color: var(--sp-ink) !important;
  font-size: 0.95rem !important;
  line-height: 1.5;
}
.sx-subastas-wrap .thumb-info-inner strong { font-weight: 700; }
.sx-subastas-wrap .descripcion-list {
  color: var(--sp-mute) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
}
.sx-subastas-wrap .descripcion-list .btn { padding: 0.4rem 0.9rem !important; font-size: 0.7rem !important; }

/* ------- 15.9 Bases page - accordion form panel */
.main.shop .accordion.accordion-modern .card {
  border: 1px solid var(--sp-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10) !important;
  background: #fff !important;
}
.main.shop .accordion.accordion-modern .card-header {
  background: linear-gradient(90deg, rgba(252,117,2,0.06), transparent) !important;
  border-bottom: 1px solid var(--sp-line) !important;
  padding: 1rem 1.25rem !important;
}
.main.shop .accordion.accordion-modern .card-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--sp-ink) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.main.shop .accordion.accordion-modern .card-title.text-primary { color: var(--sp-red) !important; }
.main.shop .accordion.accordion-modern .card-body { padding: 1.5rem !important; }

/* ===================================================================
   v16 - Fixes: per-page hero backgrounds, contact list, readonly fields
   =================================================================== */

/* Distinct gradient backgrounds per page (no shared photo) */
.sx-page-header { background: #031229 !important; }
.sx-ph-subastas {
  background:
    radial-gradient(circle at 85% 40%, rgba(255,255,255,0.05) 0, transparent 40%),
    linear-gradient(135deg, #031229 0%, #0a2049 55%, #031229 100%) !important;
}
.sx-ph-bases {
  background:
    radial-gradient(circle at 80% 60%, rgba(252,117,2,0.35) 0, transparent 45%),
    linear-gradient(135deg, #06152f 0%, #031229 60%, #031229 100%) !important;
}
.sx-ph-ayuda {
  background:
    radial-gradient(circle at 20% 50%, rgba(23,165,120,0.20) 0, transparent 45%),
    linear-gradient(135deg, #031229 0%, #06203f 55%, #031229 100%) !important;
}
.sx-ph-contacto {
  background:
    radial-gradient(circle at 80% 20%, rgba(240,164,25,0.20) 0, transparent 45%),
    linear-gradient(135deg, #101a2b 0%, #031229 100%) !important;
}
.sx-ph-testimonios {
  background:
    radial-gradient(circle at 30% 60%, rgba(252,117,2,0.25) 0, transparent 45%),
    linear-gradient(135deg, #101a2b 0%, #031229 60%, #06152f 100%) !important;
}

/* ------- 16.1 Contact info card + fixed list icons */
.sx-contact-info-card {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 0.5rem;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10);
}
.sx-contact-info-block { padding-bottom: 1.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--sp-line); }
.sx-contact-info-block:last-child { border-bottom: 0; margin-bottom: 0; }
.sx-contact-info-block h4 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  color: var(--sp-ink) !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
}
.sx-contact-info-block h4 strong { color: var(--sp-red) !important; font-weight: 700 !important; }
.sx-contact-list { list-style: none; padding: 0; margin: 0; }
.sx-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.55rem 0;
  font-family: 'Inter', sans-serif;
  color: var(--sp-mute);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sx-contact-list li i {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(252,117,2,0.10);
  color: var(--sp-red);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.sx-contact-list li span { padding-top: 0.35rem; display: block; }
.sx-contact-list li strong { color: var(--sp-ink); font-weight: 600; }
.sx-contact-list li a { color: var(--sp-red); text-decoration: none; }
.sx-contact-list li a:hover { text-decoration: underline; }
.sx-contact-lead {
  font-family: 'Inter', sans-serif;
  color: var(--sp-mute);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* ------- 16.2 Bases readonly display fields (user data shown but not editable) */
.main.shop .sx-readonly-field {
  display: block !important;
  background: #f4f7fc !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 10px !important;
  padding: 0.75rem 0.95rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: var(--sp-ink) !important;
  min-height: 46px !important;
  margin: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
.main.shop .sx-readonly-field:empty::before { content: '\2014'; color: var(--sp-mute); }

/* Bases: image column keep proportions */
.main.shop .accordion.accordion-modern + * img,
.main.shop .col-lg-4 > img.w-100 {
  border-radius: 12px;
  box-shadow: 0 12px 28px -16px rgba(15,22,38,0.25);
  margin-bottom: 1rem;
}

/* Bases form headings (Precio de la Base, medio de pago) */
.main.shop .accordion.accordion-modern h4.color-primary {
  color: var(--sp-red) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 1rem 0 0.35rem;
  border-top: 1px dashed var(--sp-line);
  margin-top: 1.25rem !important;
}

/* Custom checkbox / radio */
.main.shop .custom-control-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--sp-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Bases COMPRAR button spacing */
.main.shop .accordion.accordion-modern .btn.btn-primary { margin-top: 1rem !important; }

/* Reset any leftover Porto list-icons collisions */
.main.shop ul.list-icons.list-icons-style-2 li {
  padding-left: 1.75rem !important;
  position: relative;
  color: var(--sp-ink);
}
.main.shop ul.list-icons.list-icons-style-2 li i {
  position: absolute !important;
  left: 0 !important;
  top: 0.65rem !important;
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  color: var(--sp-red) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* v16.1 - kill Porto's overlay pseudo so our per-page bg shows through */
.sx-page-header.overlay::before,
.sx-page-header.overlay::after,
.sx-page-header.overlay-show::before,
.sx-page-header.overlay-show::after { background: transparent !important; opacity: 0 !important; }
/* re-add our own diagonal red band */
.sx-page-header::before {
  content: '';
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(115deg, var(--sp-red) 0%, rgba(252,117,2,0.7) 55%, rgba(252,117,2,0) 100%) !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.sx-page-header::after {
  content: '' !important;
  position: absolute !important;
  top: 40% !important; left: 5% !important;
  width: 90px !important; height: 90px !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1.2px, transparent 1.5px) !important;
  background-size: 12px 12px !important;
  z-index: 1 !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* ===================================================================
   v17 - Bases side column: illustration + how-it-works card
   =================================================================== */
.sx-bases-side { position: sticky; top: 1rem; }
.sx-bases-img { border-radius: 14px !important; box-shadow: 0 20px 40px -20px rgba(15,22,38,0.25); margin-bottom: 1.25rem !important; }
.sx-bases-illustration {
  background: linear-gradient(135deg, #031229 0%, #0a2049 100%);
  border-radius: 14px;
  padding: 2.5rem 1.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sx-bases-illustration::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(252,117,2,0.4), transparent 70%);
  pointer-events: none;
}
.sx-bases-illustration i {
  font-size: 3.4rem;
  color: var(--sp-red);
  margin-bottom: 1rem;
  filter: drop-shadow(0 8px 16px rgba(252,117,2,0.4));
}
.sx-bases-illustration span {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.sx-bases-side-card {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 10px 24px -14px rgba(15,22,38,0.10);
}
.sx-bases-side-card h5 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  color: var(--sp-ink) !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--sp-line);
}
.sx-bases-steps { list-style: none; padding: 0; margin: 0; }
.sx-bases-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  color: var(--sp-mute);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
}
.sx-bases-steps li span {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sp-red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 0 6px 14px -6px rgba(252,117,2,0.5);
}
.sx-bases-lead {
  margin: 1rem 0 0.5rem;
  color: var(--sp-ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  padding-top: 1rem;
  border-top: 1px solid var(--sp-line);
}
.sx-bases-note {
  color: var(--sp-mute);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
}