:root {
  --sx-bg: #f6f6f8;
  --sx-surface: #ffffff;
  --sx-surface-soft: #fbfbfc;
  --sx-text: #202027;
  --sx-muted: #686874;
  --sx-border: #e6e6eb;
  --sx-brand: #c2185b;
  --sx-brand-dark: #981347;
  --sx-brand-soft: #fbe9f1;
  --sx-nav: #18181d;
  --sx-premium: #b98518;
  --sx-premium-soft: #fff7df;
  --sx-success: #198754;
  --sx-radius: 18px;
  --sx-shadow: 0 10px 30px rgba(22, 22, 30, 0.08);
  --sx-shadow-hover: 0 18px 42px rgba(22, 22, 30, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.sx-body {
  margin: 0;
  background: var(--sx-bg);
  color: var(--sx-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:where(.sx-body) a {
  color: inherit;
}

.sx-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.sx-site-nav {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(24, 24, 29, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.sx-site-nav__inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.sx-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sx-brand__dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--sx-brand);
  box-shadow: 0 0 0 5px rgba(194, 24, 91, 0.18);
}

.sx-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sx-nav-link,
.sx-country-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: #e9e9ee;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 650;
  transition: 0.2s ease;
}

.sx-nav-link:hover,
.sx-country-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sx-nav-link--primary {
  background: var(--sx-brand);
  color: #fff;
}

.sx-nav-link--primary:hover {
  background: var(--sx-brand-dark);
}

.sx-country-link {
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.sx-mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

.sx-mobile-menu summary {
  list-style: none;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 700;
}

.sx-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.sx-mobile-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(290px, calc(100vw - 28px));
  padding: 10px;
  background: #202027;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: var(--sx-shadow-hover);
}

.sx-mobile-menu__panel a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #f5f5f7;
  font-weight: 650;
}

.sx-mobile-menu__panel a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sx-hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 36px;
  background:
    radial-gradient(circle at top right, rgba(194, 24, 91, 0.20), transparent 34%),
    linear-gradient(145deg, #23232a 0%, #18181d 58%, #21191f 100%);
  color: #fff;
}

.sx-hero__content {
  position: relative;
  z-index: 1;
}

.sx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0d6e0;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sx-hero h1 {
  margin: 15px 0 10px;
  max-width: 760px;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.sx-hero p {
  max-width: 720px;
  margin: 0;
  color: #cfcfd7;
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.65;
}

.sx-filter-panel {
  margin-top: 28px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--sx-text);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: var(--sx-shadow);
}

.sx-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.sx-field label {
  display: block;
  margin-bottom: 7px;
  color: #4a4a54;
  font-size: 0.82rem;
  font-weight: 750;
}

.sx-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--sx-border);
  border-radius: 12px;
  background: #fff;
  color: var(--sx-text);
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sx-field select:focus {
  border-color: rgba(194, 24, 91, 0.55);
  box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.1);
}

.sx-btn {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sx-btn:hover {
  transform: translateY(-1px);
}

.sx-btn--brand {
  background: var(--sx-brand);
  color: #fff;
  box-shadow: 0 8px 22px rgba(194, 24, 91, 0.22);
}

.sx-btn--brand:hover {
  background: var(--sx-brand-dark);
  color: #fff;
}

.sx-btn--dark {
  background: var(--sx-nav);
  color: #fff;
}

.sx-status {
  min-height: 24px;
  margin: 8px 2px 0;
  color: var(--sx-muted);
  font-size: 0.9rem;
}

.sx-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.sx-category {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: 0.2s ease;
}

.sx-category:hover {
  background: rgba(194, 24, 91, 0.26);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.sx-main {
  padding: 30px 0 56px;
}

.sx-listing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.sx-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.sx-section-head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.sx-section-head p {
  margin: 4px 0 0;
  color: var(--sx-muted);
  font-size: 0.92rem;
}

.sx-ad-list {
  display: grid;
  gap: 14px;
}

.sx-ad-link {
  text-decoration: none;
  color: inherit;
}

.sx-ad-card {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 218px;
  overflow: hidden;
  background: var(--sx-surface);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  box-shadow: 0 6px 20px rgba(22, 22, 30, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sx-ad-card:hover {
  transform: translateY(-2px);
  border-color: #d7d7df;
  box-shadow: var(--sx-shadow-hover);
}

.sx-ad-card--premium {
  border-color: #ead7a1;
  background: linear-gradient(180deg, #fff 0%, #fffdf7 100%);
}

.sx-ad-photo-wrap {
  background: #ececf0;
  min-height: 218px;
}

.sx-ad-photo {
  width: 100%;
  height: 100%;
  min-height: 218px;
  display: block;
  object-fit: cover;
}

.sx-ad-content {
  min-width: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}

.sx-premium-badge {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sx-premium-soft);
  color: #8b6510;
  border: 1px solid #ead7a1;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.sx-ad-title {
  margin: 0;
  color: var(--sx-text);
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.sx-ad-description {
  margin: 9px 0 14px;
  color: #5d5d67;
  font-size: 0.96rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sx-ad-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sx-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f1f4;
  color: #555560;
  font-size: 0.84rem;
  font-weight: 700;
}

.sx-empty {
  padding: 28px;
  text-align: center;
  background: var(--sx-surface);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  color: var(--sx-muted);
}

.sx-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.sx-pagination a {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--sx-border);
  color: #4e4e58;
  text-decoration: none;
  font-weight: 700;
}

.sx-pagination a:hover,
.sx-pagination a.active {
  background: var(--sx-brand);
  border-color: var(--sx-brand);
  color: #fff;
}

.sx-sidebar {
  position: sticky;
  top: 92px;
}

.sx-sidebar-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  box-shadow: 0 6px 20px rgba(22, 22, 30, 0.05);
}

.sx-sidebar-card__head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--sx-border);
}

.sx-sidebar-card__head h3 {
  margin: 0;
  font-size: 1rem;
}

.sx-sidebar-card__head p {
  margin: 4px 0 0;
  color: var(--sx-muted);
  font-size: 0.84rem;
}

.sx-sidebar-card__body {
  padding: 12px;
}

.sx-chat-open {
  width: 100%;
  margin-bottom: 10px;
}

.sx-mobile-chat {
  display: none;
  margin-bottom: 16px;
}

.sx-mobile-chat .sx-btn {
  width: 100%;
}

@media (max-width: 991px) {
  .sx-nav-links {
    display: none;
  }

  .sx-mobile-menu {
    display: block;
  }

  .sx-listing-grid {
    grid-template-columns: 1fr;
  }

  .sx-sidebar {
    display: none;
  }

  .sx-mobile-chat {
    display: block;
  }
}

@media (max-width: 720px) {
  .sx-shell {
    width: min(100% - 20px, 1180px);
  }

  .sx-site-nav__inner {
    min-height: 60px;
  }

  .sx-hero {
    padding: 38px 0 28px;
  }

  .sx-filter-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .sx-filter-grid {
    grid-template-columns: 1fr;
  }

  .sx-filter-grid .sx-btn {
    width: 100%;
  }

  .sx-ad-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 166px;
    border-radius: 15px;
  }

  .sx-ad-photo-wrap,
  .sx-ad-photo {
    min-height: 166px;
  }

  .sx-ad-content {
    padding: 14px;
  }

  .sx-premium-badge {
    margin-bottom: 7px;
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  .sx-ad-title {
    font-size: 1rem;
  }

  .sx-ad-description {
    margin: 7px 0 10px;
    font-size: 0.86rem;
    -webkit-line-clamp: 2;
  }

  .sx-meta-pill {
    min-height: 26px;
    padding: 0 8px;
    font-size: 0.75rem;
  }

  .sx-category-row {
    gap: 7px;
  }

  .sx-category {
    min-height: 34px;
    padding: 0 11px;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .sx-ad-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .sx-ad-content {
    padding: 12px;
  }

  .sx-ad-description {
    display: none;
  }
}


/* Base compartida. Los colores y medidas de marca se editan en :root. */
body.sx-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--sx-bg) !important;
  color: var(--sx-text) !important;
  line-height: 1.6;
  font-size: 16px;
}
.sx-body *, .sx-body *::before, .sx-body *::after { box-sizing: border-box; }
.sx-body > .sx-site-nav { flex-shrink: 0; z-index: 1020; }
.sx-body h1, .sx-body h2, .sx-body h3, .sx-body h4 { font-family: inherit; letter-spacing: -.025em; line-height: 1.2; }
.sx-body h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 750; }
.sx-body h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 700; }
.sx-body h3 { font-size: 1.2rem; }
.sx-body p, .sx-body h1, .sx-body h2, .sx-body h3 { overflow-wrap: anywhere; }
.sx-body a { text-underline-offset: .2em; }
.sx-body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sx-brand);
  outline-offset: 4px;
}
.sx-body .sx-site-nav :is(a, summary):focus-visible { outline-color: #ffb6d3; }
.sx-body .sx-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.sx-category[aria-current="page"] { background: #fff; color: var(--sx-brand-dark); border-color: #fff; }
.sx-ad-title, .sx-ad-description { overflow-wrap: anywhere; }
.sx-ad-photo-wrap { position: relative; }
.sx-ad-photo { position: absolute; inset: 0; height: 100%; }
.sx-body .sx-status { color: var(--sx-muted); font-size: .9rem; min-height: 0; }
.sx-status:empty { display: none; }
.sx-body .sx-section-head h2 { font-size: 1.35rem; }
.sx-body .sx-ad-title { font-size: 1.25rem; }

/* Controles compatibles con Bootstrap y formularios PHP simples. */
.sx-body .form-label { color: var(--sx-text); font-weight: 650; }
.sx-body .form-control, .sx-body .form-select,
.sx-body.sx-publish :is(input[type="text"], input[type="tel"], input[type="number"], input[type="file"], select, textarea),
.sx-body:is(.sx-email, .sx-claims, .sx-country) main :is(input:not([type="hidden"]):not([type="checkbox"]), select, textarea) {
  width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
  border: 1px solid #c8c8d2; border-radius: 10px;
  padding: 10px 12px; background: #fff; color: var(--sx-text); font: inherit;
  box-shadow: none;
}
.sx-body :is(input, select, textarea):focus { border-color: var(--sx-brand); }
.sx-body input[type="checkbox"], .sx-body input[type="radio"] { accent-color: var(--sx-brand); }
.sx-body .form-check-input:checked { background-color: var(--sx-brand); border-color: var(--sx-brand); }
.sx-body .form-control-color { width: 3.5rem; }
.sx-body .btn { border-radius: 10px; padding: 10px 16px; font-weight: 650; white-space: normal; }
.sx-body .btn-sm { padding: 7px 11px; font-size: .85rem; }
.sx-body .btn-primary, .sx-body .btn-pink, .sx-body .btn-custom {
  --bs-btn-bg: var(--sx-brand); --bs-btn-border-color: var(--sx-brand);
  --bs-btn-hover-bg: var(--sx-brand-dark); --bs-btn-hover-border-color: var(--sx-brand-dark);
  --bs-btn-active-bg: var(--sx-brand-dark); --bs-btn-active-border-color: var(--sx-brand-dark);
  color: #fff; background: var(--sx-brand); border-color: var(--sx-brand);
}
.sx-body :is(.btn-primary, .btn-pink, .btn-custom):hover { color: #fff; background: var(--sx-brand-dark); border-color: var(--sx-brand-dark); }
.sx-body .btn-outline-primary { --bs-btn-color: var(--sx-brand); --bs-btn-border-color: var(--sx-brand); --bs-btn-hover-bg: var(--sx-brand); --bs-btn-hover-border-color: var(--sx-brand); --bs-btn-active-bg: var(--sx-brand); }
.sx-body .card, .sx-body .chat-card, .sx-body .chat-container {
  background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); backdrop-filter: none;
}
.sx-body .card.shadow-lg { box-shadow: var(--sx-shadow) !important; }
.sx-body .alert, .sx-body .mensaje, .sx-body .aviso { padding: 16px; border-radius: 12px; overflow-wrap: anywhere; }
.sx-body .mensaje.info, .sx-body .aviso { background: var(--sx-brand-soft); color: #72203f; border: 1px solid #efd0dd; }
.sx-body .mensaje.error { background: #fff0f0; color: #982828; border: 1px solid #f0cece; }
.sx-body .mensaje.exito, .sx-body .mensaje.success { background: #eaf6ee; color: #1f6035; border: 1px solid #c9e6d2; }
.sx-body .g-recaptcha { max-width: 100%; overflow-x: auto; }

/* Acceso, verificación y soporte comparten la misma tarjeta. */
.sx-login .login-container, .sx-body .form-container {
  width: min(520px, calc(100% - 32px)); margin: 48px auto;
  padding: 32px; background: var(--sx-surface); border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); color: var(--sx-text);
}
.sx-auth h1, .sx-auth h2 { color: var(--sx-text); text-align: left; margin-bottom: 24px; }
.sx-login .links-extra { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.sx-login .links-extra a { color: var(--sx-brand-dark); font-size: .9rem; font-weight: 600; }
.sx-forgot > .sx-auth-wrap { padding: 48px 16px; width: 100%; }
.sx-forgot .card { width: min(100%, 520px); padding: 32px; }
.sx-register .card { width: 100%; }
.sx-reset .card-body { padding: 28px; }
.sx-support .form-container { max-width: 640px; }
.sx-auth .text-muted { color: #62626e !important; }
.sx-auth .error { margin: 20px auto 0; padding: 12px 18px; color: #982828; }

/* Perfil: la altura acompaña al contenido, sin recortar botones ni mensajes. */
.sx-profile-toolbar { background: #fff; border-bottom: 1px solid var(--sx-border); padding: 20px 0; }
.sx-profile-toolbar > .container { flex-wrap: wrap; gap: 16px; }
.sx-profile-toolbar .h4 { font-size: 1.2rem; }
.sx-profile .card-hover { cursor: pointer; min-height: 0 !important; }
.sx-profile .card-img-top { width: 100%; height: 240px; object-fit: cover; border-radius: 17px 17px 0 0; }
.sx-profile .card-body { height: auto; overflow: visible; padding: 22px; }
.sx-profile .card-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: #62626e; }
.sx-profile main > h2 { margin: 32px 0 20px; }

/* Publicación: conservar selectores, validaciones y resumen, unificar presentación. */
.sx-publish > h1 { color: var(--sx-text); margin: 36px 16px 0; text-align: center; }
.sx-publish #formularioAnuncio {
  width: min(800px, calc(100% - 32px)); margin: 28px auto 48px; padding: 30px;
  background: #fff; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow);
}
.sx-publish #formularioAnuncio .contenedor { padding: 18px 0; border-bottom: 1px solid var(--sx-border); }
.sx-publish #formularioAnuncio h3, .sx-publish #formularioAnuncio h4 { margin: 0 0 16px; text-align: left; color: var(--sx-text); }
.sx-publish label { color: var(--sx-text); font-weight: 600; }
.sx-publish .categorias { justify-content: flex-start; }
.sx-publish .categoria-boton { background: var(--sx-surface-soft); color: var(--sx-text); border: 1px solid var(--sx-border); border-radius: 10px; }
.sx-publish .categoria-boton:hover, .sx-publish .categoria-boton.selected { background: var(--sx-brand-soft); border-color: var(--sx-brand); color: var(--sx-brand-dark); }
.sx-publish .opciones-container label { background: var(--sx-surface-soft); border: 1px solid var(--sx-border); border-radius: 10px; }
.sx-publish .opciones-container label:has(input:checked) { background: var(--sx-brand-soft); border-color: var(--sx-brand); }
.sx-publish .fila-doble .campo { min-width: 0; flex-basis: 230px; }
.sx-publish input#whatsapp { max-width: 100%; min-width: 0; }
.sx-publish select#codigo_pais { flex: 0 1 150px; }
.sx-publish :is(button[type="submit"], #btnConfirmarModal) { background: var(--sx-brand); color: #fff; border-radius: 10px; font-weight: 700; }
.sx-publish button[type="submit"]:hover { background: var(--sx-brand-dark); }
.sx-publish .error-box { width: min(800px, calc(100% - 32px)); }
.sx-publish .modal-content { border-radius: var(--sx-radius); font-family: inherit; }
.sx-publish .modal-content h2 { color: var(--sx-text); }
.sx-edit > .container { max-width: 900px; }
.sx-edit .card-body { padding: clamp(18px, 4vw, 36px); }

/* Gestión de cuenta y reclamos sin depender de Bootstrap. */
.sx-email main, .sx-country .panel { width: min(640px, calc(100% - 32px)); margin: 48px auto; padding: 32px; background: #fff; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); }
.sx-email main h2 { margin-top: 32px; }
.sx-body:is(.sx-email, .sx-claims, .sx-country) main label { display: block; font-weight: 650; margin: 18px 0 6px; }
.sx-body:is(.sx-email, .sx-claims, .sx-country) main a { color: var(--sx-brand-dark); }
.sx-body:is(.sx-email, .sx-claims, .sx-country) main button, .sx-payment-result .boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 18px; margin-top: 16px;
  color: #fff; background: var(--sx-brand); border: 0; border-radius: 10px;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
.sx-body:is(.sx-email, .sx-claims, .sx-country) main button:hover, .sx-payment-result .boton:hover { background: var(--sx-brand-dark); }
.sx-claims main { width: min(900px, calc(100% - 32px)); margin: 40px auto; }
.sx-claims main > nav { margin-bottom: 24px; }
.sx-claims main :is(section, article) { padding: 28px; margin: 20px 0; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: #fff; }
.sx-claims textarea { min-height: 150px; resize: vertical; }
.sx-claims .respuesta { border-left: 3px solid var(--sx-brand); padding: 4px 0 4px 18px; }
.sx-claims small, .sx-country small { display: block; color: #62626e; line-height: 1.6; }
.sx-country .panel h1 { margin-top: 0; }
.sx-country select, .sx-country button { margin-top: 16px; width: 100%; }
.sx-payment > .container { margin: 48px auto; }
.sx-payment .logo { width: 48px; margin-bottom: 18px; }
.sx-payment .back-btn { color: #62626e; }
.sx-payment-result > .card { width: min(560px, calc(100% - 32px)); padding: 32px; margin: 48px auto; text-align: center; }
.sx-payment-result .estado { display: inline-block; border-radius: 999px; background: var(--sx-brand-soft); padding: 8px 16px; margin: 12px 0; font-weight: 650; }
.sx-payment-result .boton { color: white; }
.sx-legal > header { width: min(900px, calc(100% - 32px)); margin: 40px auto 20px; }
.sx-legal > .container { width: min(900px, calc(100% - 32px)); margin: 0 auto 48px; padding: 32px; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: #fff; }
.sx-legal > .container h2 { margin: 24px 0; }
.sx-legal > .container h3 { margin-top: 28px; }
.sx-body.sx-chat .chat-header { background: var(--sx-nav); }
.sx-body.sx-chat .chat-card { backdrop-filter: none; }
.sx-body.sx-detail .contenedor-servicios { background: #fff; border: 1px solid var(--sx-border); border-radius: var(--sx-radius); }
.sx-body.sx-detail .badge-sexiloka { background: var(--sx-brand-soft); color: var(--sx-brand-dark); border: 1px solid #efd0dd; border-radius: 999px; }
.sx-body.sx-detail .perfil-borde-giratorio { background: var(--sx-brand); animation: none; }

/* Un solo pie para páginas nuevas y antiguas. */
.sx-footer { width: 100%; margin-top: auto; padding: 44px 0 0; background: var(--sx-nav); color: #d4d4df; font: 15px/1.65 ui-sans-serif, system-ui, sans-serif; }
.sx-footer .sx-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.sx-footer .sx-footer__brand p { max-width: 240px; margin: 16px 0 10px; color: #bdbdcb; }
.sx-footer .sx-footer__age { font-size: 12px; color: #a8a8b9; }
.sx-footer h2 { margin: 0 0 16px; color: #fff; font-size: 15px; letter-spacing: 0; line-height: 1.5; text-align: left; }
.sx-footer ul { list-style: none; padding: 0; margin: 0; }
.sx-footer li { margin-bottom: 9px; }
.sx-footer li a { color: #c7c7d5; text-decoration: none; }
.sx-footer li a:hover { color: #fff; text-decoration: underline; }
.sx-footer__bottom { border-top: 1px solid #35353e; padding: 18px 0; margin-top: 32px; color: #a8a8b9; font-size: 13px; }

@media (max-width: 720px) {
  .sx-body .sx-ad-title { font-size: 1rem; }
  .sx-footer .sx-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sx-footer .sx-footer__brand { grid-column: 1 / -1; }
  .sx-profile-toolbar > .container { justify-content: flex-start !important; }
  .sx-login .login-container, .sx-body .form-container, .sx-email main, .sx-country .panel { padding: 22px; margin-top: 28px; margin-bottom: 28px; }
  .sx-claims main :is(section, article), .sx-legal > .container { padding: 20px; }
  .sx-publish #formularioAnuncio { padding: 18px; }
  .sx-claims main { margin-top: 28px; }
  .sx-footer .sx-brand { font-size: 1.15rem; }
}
@media (max-width: 380px) {
  .sx-login .login-container, .sx-body .form-container, .sx-forgot .card, .sx-reset .card-body { padding: 12px; }
  .sx-body .sx-brand { font-size: 1.1rem; }
  .sx-publish .opciones-container label { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sx-body *, .sx-body *::before, .sx-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.sx-body.sx-detail .perfil-borde-giratorio::before { background: var(--sx-brand); animation: none; }
.sx-publish .modal-footer button:last-child { background: var(--sx-brand); }
.sx-body .input-group > .form-control { width: 1%; }
.sx-body .modal-edad-overlay > div { width: min(440px, calc(100% - 32px)); }
.sx-body .modal-edad-box { width: 100%; max-width: none; border-radius: var(--sx-radius); font-family: inherit; }
.sx-body .modal-edad-buttons .btn-aceptar { background: var(--sx-brand); color: #fff; }
.sx-body .modal-edad-buttons .btn-rechazar { background: #ededf2; color: var(--sx-text); }
.sx-body .cookie-popup { background: var(--sx-nav); border: 1px solid #44444f; border-radius: 14px; }
.sx-body .cookie-popup p { color: #eeeef4; }
.sx-body .cookie-popup a { color: #ffb6d3; }
.sx-body .cookie-popup button { background: var(--sx-brand); color: #fff; border-radius: 10px; }
