/* css/main.css - TerreNet Clean Build */

:root {
  /* TerreNet design tokens - Nueva paleta */
  --tn-green-600: #16a34a;
  --tn-green-700: #15803d;
  --tn-blue-600: #0284c7;
  --tn-blue-700: #0369a1;
  --tn-earth-500: #a67c52;
  --tn-gradient: linear-gradient(135deg, #15803d 0%, #0369a1 50%, #8b5a2b 100%);

  --tn-bg: #F8FAFC;
  --tn-card: #FFFFFF;
  --tn-border: #E2E8F0;
  --tn-muted: #64748B;
  --tn-title: #0F172A;

  /* Backward-compatible tokens used across the codebase */
  --color-primary: var(--tn-green-600);
  --color-secondary: var(--tn-blue-600);
  --color-accent: var(--tn-earth-500);
  --color-bg: var(--tn-bg);
  --color-surface: var(--tn-card);
  --color-border: var(--tn-border);
  --color-text: var(--tn-title);
  --color-text-muted: var(--tn-muted);
  --header-height: 72px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ========== HEADER ========== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff; /* stronger contrast */
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  border-bottom: 1px solid rgba(229,231,235,0.9);
  padding: 0.6rem 1rem;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Layout container used across sections for consistent alignment */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--color-text);
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-block;
  background: transparent;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.brand-subtitle {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.main-nav {
  display: flex;
  gap: 0.5rem;
}

.main-nav a {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  transition: all 0.2s;
}

.main-nav a:hover {
  background: #f9fafb;
}

.nav-toggle {
  display: none;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
  border-radius: 2px;
}

/* Mobile nav overlay (controlled by body.nav-open) */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; }

  body.nav-open .main-nav {
    display: flex;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    background: var(--color-surface, #ffffff);
    z-index: 20; /* place below header (header z-index:30) */
    padding: 1.2rem;
    flex-direction: column;
    gap: 0.8rem;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  }

  /* Ensure nav links are easy to tap on mobile */
  body.nav-open .main-nav a {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
  }
}

/* ========== HERO ========== */

.hero {
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: white;
  padding: 2rem 1rem; /* mobile-first: reduce vertical spacing */
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* start single-column for mobile-first */
  gap: 1.2rem; /* tighter gap */
  align-items: center;
}

.hero-copy h1 {
  font-size: 1.9rem; /* mobile-first headline */
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.hero-copy p {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
  max-width: 420px;
}

.hero-search {
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.search-grid-basic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.search-grid-basic > div {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}

input::placeholder {
  color: #9ca3af;
}

input:focus,
select:focus {
  border-color: var(--color-accent);
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.2);
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.search-actions-right {
  display: flex;
  gap: 0.6rem;
}

.btn {
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--tn-gradient);
  color: white;
  box-shadow: 0 8px 30px rgba(31, 79, 122, 0.18);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 79, 122, 0.4);
}

.btn-ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid rgba(0,0,0,0.06);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* (removed duplicate advanced-filters default block; managed by final overrides) */

.advanced-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.8rem;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.1rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* ========== RESULTADOS ========== */

.results-wrapper {
  max-width: 1200px;
  margin: 1rem auto 1.6rem;
  padding: 0 1.2rem;
}

.results-header {
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.results-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.results-header p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* ========== CARD ========== */

.card {
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid rgba(229, 231, 235, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #e5e7eb;
  display: block;
}

.card-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
}

.pill {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid;
  white-space: nowrap;
}

.badge-venta {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.badge-alquiler {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary);
}

.card-location {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.price-sugerido {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.meta span::before {
  content: "• ";
  opacity: 0.5;
  margin-right: 0.2rem;
}

.meta span:first-child::before {
  content: "";
  margin-right: 0;
}

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #86efac;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #166534;
  transition: all 0.2s;
}

.service-chip:hover {
  background: #dcfce7;
  border-color: #65c34a;
  box-shadow: 0 4px 12px rgba(101, 195, 74, 0.15);
}

.service-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.card-footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
}

.card-footer > div:first-child {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.link-detalle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}

.link-detalle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 79, 122, 0.3);
  filter: brightness(1.08);
}

.empty {
  padding: 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  background: #f9fafb;
  border-radius: 12px;
  border: 1px dashed rgba(229, 231, 235, 0.8);
}

/* Make sure hero CTA area and search feel unified */
.hero-ctas { margin-top: 0.8rem; display: flex; gap: 0.6rem; align-items: center; }
.hero-search { box-shadow: 0 8px 30px rgba(15,23,42,0.06); }

/* Small visual polish for cards and results spacing */
.card { transition: transform 220ms ease, box-shadow 220ms ease; }
.card:hover { transform: translateY(-6px); }

/* ========== CARDS DESTACADAS Y PREMIUM ========== */
.card--destacado {
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.card--super-destacado {
  border: 2px solid #d97706;
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.2);
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.card--super-destacado::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b);
}

/* Card badges container */
.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Boton de favoritos */
.btn-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #64748b;
}

.btn-favorite:hover {
  background: #ffffff;
  transform: scale(1.1);
  color: #ef4444;
}

.btn-favorite.active {
  color: #ef4444;
  background: #ffffff;
}

.btn-favorite.active svg {
  fill: currentColor;
}

/* Botón de comparar (ajustar posición) */
.btn-compare {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 10;
}

/* ========== FOOTER ========== */
.site-footer {
  margin-top: 3rem;
  background: linear-gradient(135deg, #1a1f35 0%, #0f1628 100%);
  color: #e2e8f0;
}

.footer-inner.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.footer-logo img {
  border-radius: 8px;
}

.footer-tagline {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-contact h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.footer-contact p {
  font-size: 0.9rem;
  color: #94a3b8;
}

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #22c55e;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.footer-wa:hover {
  color: #4ade80;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 1.25rem 1.5rem;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}

.footer-bottom a {
  color: #94a3b8;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .footer-inner.footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .footer-inner.footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-logo {
    justify-content: center;
  }
  .footer-links, .footer-contact {
    align-items: center;
  }
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .search-grid-basic {
    grid-template-columns: repeat(2, 1fr);
  }

  .results {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .card-image {
    height: 160px;
  }

  .card-body {
    padding: 1.2rem;
    gap: 1rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .price {
    font-size: 1.1rem;
  }

  .service-chip {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
  }

  .service-icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 2rem 0.8rem;
  }

  .hero-copy h1 {
    font-size: 1.4rem;
  }

  .hero-copy p {
    font-size: 0.85rem;
  }

  .search-grid-basic {
    gap: 0.6rem;
  }

  .search-actions {
    gap: 0.6rem;
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .results {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .card-body {
    padding: 1rem;
    gap: 0.8rem;
  }

  .card-title {
    font-size: 0.95rem;
  }

  .price {
    font-size: 1rem;
  }

  .meta {
    font-size: 0.8rem;
    gap: 0.3rem 0.8rem;
  }
}

/* Extra small breakpoints for common phones (412 / 360 widths) */
@media (max-width: 412px) {
  .hero { padding: 1.8rem 0.8rem; }
  .hero-copy h1 { font-size: 1.6rem; }
  .hero-copy p { font-size: 0.9rem; max-width: 300px; }
  .results { gap: 0.9rem; }
  .card-image { height: 140px; }
  .card-body { padding: 0.9rem; }
}

@media (max-width: 360px) {
  .brand-title { font-size: 1rem; }
  .hero-copy h1 { font-size: 1.4rem; }
  .card-image { height: 120px; }
  .btn { padding: 0.55rem 0.9rem; }
}

/* ========== SEO SECTION ========== */
/* ========== ABOUT / INFO SECTION (moved from home) ========== */
.about-section {
  padding: 3rem 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
  border-radius: 10px;
}
.about-section .about-inner {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.65;
  padding: 0.5rem 0.25rem;
}
.about-section h2 { font-size: 1.5rem; margin-bottom: 0.75rem; color: var(--color-text); }
.about-section h3 { font-size: 1.15rem; margin-top: 1.25rem; color: var(--color-text); }
.about-section p { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 0.85rem; }
.about-section .lead { font-size: 1.05rem; color: var(--color-text); line-height: 1.8; margin-bottom: 1rem; }
.about-benefits ul { list-style: disc; margin-left: 1.1rem; }

@media (min-width: 992px) {
  .about-section .about-inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .about-section { padding: 3.5rem 1.5rem; }
}

/* ========== PLAN PROGRESS UI ========== */
.plan-progress {
  background: linear-gradient(180deg,#fff,#fafafa);
  border: 1px solid var(--color-border);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.95rem;
}
.plan-progress .plan-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  flex-wrap: wrap;
}
.plan-progress .meta {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.plan-progress .progress-wrap {
  flex: 1 1 auto;
  min-width: 100px;
}
.plan-progress .bar {
  width: 100%;
  height: 12px;
  background: #eef2f6;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.plan-progress .bar-inner {
  height: 100%;
  background: linear-gradient(90deg,var(--color-primary),var(--color-secondary));
  width: 0%;
  transition: width 350ms ease;
}
.plan-progress .count {
  flex: 0 0 auto;
  font-weight: 700;
}

/* Beta badge y notice */
.beta-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  animation: pulse-beta 2s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@keyframes pulse-beta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
.beta-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  color: #065f46;
  font-size: 0.85rem;
  margin: 0.4rem 0;
  z-index: 10;
}
.beta-notice .beta-icon {
  font-size: 1.2rem;
}
.plan-features-mini {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.3rem;
  font-size: 0.82rem;
}
.plan-features-mini .feature-on {
  color: var(--color-primary);
}
.plan-features-mini .feature-off {
  color: #9ca3af;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Simple branded footer from FaroDigital */
.footer {
  padding: 25px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* ========= Home additions (small, responsive) ========= */
.hero-new .lead { max-width: 560px; margin-bottom: 1rem; }
.how-works { padding: 1.6rem 0.9rem; }
.how-steps { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.how-steps .step { background: var(--color-surface); border-radius: 10px; padding: 0.7rem; flex: 1 1 160px; border: 1px solid var(--color-border); }
.how-steps .step-num { width: 32px; height: 32px; border-radius: 999px; background: var(--color-primary); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 0.4rem; }

.features { padding: 1rem 0.9rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 0.6rem; }
.feature { background: var(--color-surface); padding: 0.7rem; border-radius: 10px; border: 1px solid var(--color-border); }

.destacados { padding: 1rem 0.8rem; background: transparent; }
.recientes { padding: 1rem 0.8rem 40px 0.8rem; }

/* (Removed recientes-specific styles — replaced by filtros-pro and generic card styles elsewhere) */
/* Filtros profesionales styles (new, local classes only) */
.filtros-pro {
  margin-top: 32px;
  margin-bottom: 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.filtros-pro label { font-weight: 600; margin-right: 8px; }
.filtros-pro select { padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* Vendedores destacados - visual block and spacing (local styles only) */
.vendedores-pro {
  background: #ffffff;
  border: 1px solid rgba(220,220,220,0.8);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  text-align: center;
}
.vendedores-pro h2 { margin: 0 0 6px 0; }
.vendedores-pro .muted { color: var(--color-text-muted); margin-bottom: 14px; }
.vendedores-pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.vendedores-pro .vendedor-empty { padding: 28px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.vendedores-pro .vendedor-empty .icon { width:56px; height:56px; border-radius:999px; background: #f3f4f6; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:28px; }
.vendedores-pro .vendedor-empty h3 { margin: 0; font-size: 1.05rem; }
.vendedores-pro .vendedor-empty p { margin: 0; color: var(--color-text-muted); }

/* General spacing between major sections on home */
.section { margin-top: 48px; }

/* --------- Custom visual updates for home redesign --------- */
/* Center the hero content and make CTAs prominent */
.hero {
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: white;
  padding: 3.2rem 1.5rem;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
  max-width: 380px;
}

.hero-search {
  /* Translucent panel as requested: no opaque gray */
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 1.5rem;
}

.search-grid-basic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.search-grid-basic > div {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}

input::placeholder {
  color: #9ca3af;
}

input:focus,
select:focus {
  border-color: var(--color-accent);
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.2);
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.search-actions-right {
  display: flex;
  gap: 0.6rem;
}

.btn {
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  box-shadow: 0 4px 12px rgba(31, 79, 122, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 79, 122, 0.4);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* (removed duplicate advanced-filters default block; final overrides apply) */

.advanced-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.8rem;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.1rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}


/* Keep other component styles intact: these are scoped overrides only */

/* Strong overrides for the real HTML used on Home: #home-recientes */
#home-recientes .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px !important;
  padding: 32px 0;
  margin-top: 48px !important;
}

#home-recientes .card.small-card {
  min-height: 360px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#home-recientes .card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

#home-recientes .card.small-card { position: relative; }

#home-recientes .card-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

#home-recientes .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

#home-recientes .pill {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.04);
  color: var(--color-text);
}

/* Button / link detalle override */
#home-recientes .card-footer { padding: 12px 18px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
#home-recientes .card-footer .link-detalle {
  display: inline-block;
  background: #1b1b1b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}

/* Visita badge inside card (absolute positioned bottom-left) */
#home-recientes .visita-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 30;
}

@media (max-width: 640px) {
  #home-recientes .cards-grid { gap: 18px !important; padding: 18px 0; }
  #home-recientes .card.small-card { min-height: 300px; }
}

.vendedores-grid .cards-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }

/* Vendedores list specific layout and card styling */
#vendedoresList { display: grid; grid-template-columns: repeat(1, 1fr); gap: 32px; justify-items: center; }
#vendedoresList .vendedor-card { max-width: 300px; width: 100%; box-sizing: border-box; padding: 18px; border-radius: 12px; background: var(--color-surface); border: 1px solid rgba(229,231,235,0.85); box-shadow: 0 10px 30px rgba(15,23,42,0.05); display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-align:center; }
#vendedoresList .vendedor-thumb { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:999px; }
#vendedoresList .vendedor-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; border-radius:999px; }
#vendedoresList .vendedor-name { font-size: 1.1rem; font-weight: 800; color: var(--color-text); }
#vendedoresList .vendedor-actor { font-size: 0.88rem; color: var(--color-text-muted); margin-top: -2px; }
#vendedoresList .vendedor-meta { font-size: 0.9rem; color: var(--color-text-muted); }
#vendedoresList .vendedor-actions { width: 100%; }
#vendedoresList .vendedor-actions .btn { width: 100%; }

@media (min-width: 640px) { #vendedoresList { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { #vendedoresList { grid-template-columns: repeat(3, 1fr); } }

/* Ensure recientes spacing is larger to separate sections visually */
#recientes { margin-top: 1rem; margin-bottom: 1.25rem; }
#vendedores-destacados { margin-top: 1rem; margin-bottom: 1rem; }

/* Profile header tweaks */
.profile-card { display:flex; gap:1rem; align-items:center; padding:16px; background:var(--color-surface); border:1px solid rgba(229,231,235,0.8); border-radius:12px; box-shadow:0 8px 20px rgba(15,23,42,0.03); }
.profile-card .avatar--large { width: 110px; height: 110px; border-radius:999px; object-fit:cover; flex:0 0 110px; }
.profile-card .profile-meta h3 { font-size:1.6rem; margin:0; }
.badge-actor { display:inline-block; padding:0.18rem 0.6rem; border-radius:999px; font-weight:700; font-size:0.78rem; background:rgba(0,0,0,0.04); color:var(--color-text); margin-left:0.4rem; }
.profile-stats { margin-top:0.5rem; color:var(--color-text-muted); font-weight:600; }

/* Section title helper */
.section-title { font-size: 20px; font-weight: 600; margin-bottom: 0.6rem; }

/* Profile terrenos list alignment */
#profile-terrenos .card-list { display:grid; grid-template-columns: 1fr; gap: 0.9rem; }
#profile-terrenos .card-item { display:flex; gap:0.8rem; align-items:flex-start; text-decoration:none; color:inherit; }
#profile-terrenos .card-item .card-thumb img { width: 160px; height: 110px; object-fit: cover; border-radius:8px; }
#profile-terrenos .card-item .card-body { padding: 0; }
@media (min-width: 640px) { #profile-terrenos .card-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { #profile-terrenos .card-item .card-thumb img { width: 120px; height: 80px; } #profile-terrenos .card-item { gap: 0.6rem; } }
@media (min-width: 992px) { #profile-terrenos .card-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { #profile-terrenos .card-item .card-thumb img { width: 100px; height: 65px; } #profile-terrenos .card-item { gap: 0.5rem; } }
.vendedor-card { display: flex; gap: 0.8rem; align-items: center; padding: 16px; border-radius: 10px; background: var(--color-surface); border: 1px solid rgba(229,231,235,0.7); box-shadow: 0 6px 18px rgba(15,23,42,0.04); }
.vendedor-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 999px; }
.vendedor-body { display: flex; flex-direction: column; gap: 0.12rem; }
.vendedor-name { font-weight: 800; font-size: 1rem; }
.vendedor-actor { font-size: 0.78rem; color: var(--color-text-muted); margin-left: 6px; }
.vendedor-meta { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; color: var(--color-text-muted); }
.vendedor-actions { margin-left: auto; }

/* Vendedores grid responsive: 1 col mobile, 2 cols tablet, 3 cols desktop */
@media (min-width: 640px) {
  .vendedores-grid .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .vendedores-grid .cards-grid { grid-template-columns: repeat(3, 1fr); }
}
.vendedor-name { font-weight: 800; font-size: 0.98rem; }
.vendedor-actor { font-size: 0.78rem; color: var(--color-text-muted); }
.vendedor-meta { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; color: var(--color-text-muted); }

.plan-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.plan { flex: 1 1 180px; padding: 1rem; border-radius: 12px; border: 1px solid var(--color-border); text-align: center; }
.plan-pro { background: linear-gradient(90deg, rgba(31,79,122,0.06), rgba(177,51,51,0.03)); border: 1px solid rgba(31,79,122,0.08); }

.testimonials { padding: 1rem 0.9rem; }
.testimonial-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }

/* Visitas badges */
.visitas-count { font-size: 0.85rem; color: var(--color-text-muted); }
.visitas-inline { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); }
.visitas-badge { background: rgba(0,0,0,0.06); padding: 0.25rem 0.5rem; border-radius: 999px; font-weight:700; font-size:0.8rem; }

@media (max-width: 768px) {
  .how-steps { flex-direction: column; }
  .plan-cards { flex-direction: column; }
}

/* Compact marketplace card */
.small-card { display: flex; flex-direction: column; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(229,231,235,0.7); box-shadow: 0 8px 20px rgba(15,23,42,0.04); }
.mall-card .card-image { height: 160px; }
.small-card .card-image { height: 160px; width: 100%; object-fit: cover; }
.small-card .card-body { padding: 0.9rem; gap: 0.5rem; }
.small-card .card-title { font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.small-card .card-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; border-top: 1px solid rgba(229,231,235,0.5); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) {
  .cards-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-inner { grid-template-columns: 1fr 1.2fr; gap: 2rem; }
}
.avatar-sm { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.vendedor-card.compact { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem; }
.vendedor-actions { margin-left: auto; }

/* visitas badge tighter */
.visitas-badge { font-size: 0.75rem; padding: 0.2rem 0.45rem; }

/* Small dashboard metrics for PRO profiles (mi-perfil) */
.pro-metrics { margin: 0 0 1rem 0; padding: 0 1.2rem; }
.pro-metrics .metrics-row { display: flex; gap: 0.6rem; align-items: stretch; }
.pro-metrics .metric-box { background: var(--color-surface); border: 1px solid rgba(229,231,235,0.7); border-radius: 10px; padding: 12px; display:flex; gap:0.6rem; align-items:center; box-shadow: 0 6px 14px rgba(15,23,42,0.03); min-width: 0; }
.pro-metrics .metric-icon { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg,var(--color-primary),var(--color-secondary)); flex: 0 0 36px; }
.pro-metrics .metric-body { display:flex; flex-direction:column; gap:0.08rem; min-width:0; }
.pro-metrics .metric-title { font-size: 0.9rem; color:var(--color-text-muted); }
.pro-metrics .metric-value { font-weight:800; font-size:1.15rem; color:var(--color-text); }
@media (max-width: 640px) {
  .pro-metrics .metrics-row { flex-direction: column; }
}

/* General section defaults to keep consistent spacing and alignment */
.section { padding: 1rem 0; }
.section .container { padding-left: 1.2rem; padding-right: 1.2rem; }
.section h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; }
.section p.muted { margin-bottom: 0.6rem; }

@media (min-width: 992px) {
  .section { margin-top: 60px; }
}


/* ====================== PREMIUM VISUAL REDESIGN OVERRIDES ====================== */
/* Purpose: Strong, scoped overrides to give a premium real-estate look without
   changing HTML structure or IDs. Targets hero, header, buscador, vendedores,
   resultados (cards) and general typography / spacing. */

/* HEADER: solid, elevated */
.site-header {
  background: #ffffff; /* keep solid white */
  box-shadow: 0 6px 30px rgba(6, 12, 34, 0.10); /* stronger header shadow */
  border-bottom: 1px solid rgba(14, 20, 30, 0.04);
}
.header-inner { padding: 0.8rem 1.2rem; }
/* Nav links: brand color and subtle rounded hover */
.main-nav a {
  color: var(--tn-indigo);
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  transition: background-color 160ms ease, color 160ms ease;
}
.main-nav a:hover {
  background: #f3f4f6; /* very light gray hover */
  color: var(--tn-indigo);
}

/* Logout button visual: ensure it's visible and not white-on-white */
.site-header .logout-btn {
  background: #f3f4f6;
  color: var(--tn-title);
  border: 1px solid rgba(15,23,42,0.06);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
}
.site-header .logout-btn:hover {
  background: #ececec;
}

/* HERO: tall, centered, vivid gradient, soft glows top+bottom */
.hero.hero-new {
  /* Home-specific hero: allow it to grow naturally with content (no fixed heights) */
  padding: 2.2rem 1rem;
  background: linear-gradient(120deg, rgba(31,79,122,1) 0%, rgba(177,51,51,1) 100%);
  color: #fff;
  position: relative;
  overflow: visible;
}
.hero.hero-new::before,
.hero.hero-new::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 28px;
  pointer-events: none;
}
.hero.hero-new::before { top: 0; box-shadow: 0 -18px 30px rgba(6,12,34,0.12) inset; }
.hero.hero-new::after { bottom: 0; box-shadow: 0 28px 60px rgba(6,12,34,0.12); }

.hero.hero-new .hero-inner {
  max-width: 1200px;
  width: 100%;
  padding: 0 1.2rem;
  display: grid;
  /* Two-column hero: left content and right search column; right column has minimum 420px */
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
  gap: 1.6rem;
  align-items: start;
}
/* Unified search panel for hero and home buscador: prefer specificity/order over !important */
.hero-search,
#buscador-pro.buscador-pro {
  max-width: 420px;
  width: 100%;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 8px 30px rgba(15,23,42,0.06);
}
.hero.hero-new .hero-copy h1 {
  font-size: 46px; /* desktop target 42-52 */
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  text-shadow: 0 6px 30px rgba(6,12,34,0.25);
}
.hero.hero-new .hero-copy p {
  max-width: 920px;
  margin: 0 auto 1.25rem auto;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.004em;
}
.hero-ctas { gap: 1rem; justify-content: center; }
.hero-ctas .btn { padding: 0.95rem 1.4rem; font-size: 0.95rem; border-radius: 10px; }
.hero-ctas .btn-primary { box-shadow: 0 12px 34px rgba(6,12,34,0.18); }
.hero-ctas .btn-outline {
  background: #ffffff;
  color: var(--tn-indigo);
  border: 1px solid rgba(15,23,42,0.06);
}
.hero-ctas .btn-outline:hover { filter: brightness(0.98); transform: translateY(-2px); }

@media (min-width: 1200px) {
  .hero.hero-new .hero-copy h1 { font-size: 52px; }
  .hero-ctas .btn { padding: 1.05rem 1.6rem; font-size: 1rem; }
}

/* BUSCADOR PRO: card-like, elevated under the hero */
.buscador-pro {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 12px 30px rgba(6,12,34,0.06);
  padding: 36px;
  border-radius: 14px;
  margin-top: 0; /* removed negative overlap to allow natural flow */
}
.buscador-pro .search-grid-basic { gap: 1.2rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.buscador-pro label { font-weight: 600; color: var(--color-text-muted); font-size: 0.86rem; }
.buscador-pro input[type="text"],
.buscador-pro input[type="number"],
.buscador-pro select {
  height: 46px; /* inputs taller */
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.06);
  background: #fff;
}
.buscador-pro .search-actions { margin-top: 18px; }

/* VENDEDORES DESTACADOS: premium profile cards */
.vendedores-pro { padding: 28px 20px; border-radius: 14px; }
.vendedores-pro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: start; }
.vendedores-pro-grid .vendedor-card {
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(180deg, #fff, #fbfbfc);
  box-shadow: 0 12px 30px rgba(6,12,34,0.06);
  border: 1px solid rgba(15,23,42,0.04);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.vendedores-pro-grid .vendedor-thumb { width: 92px; height: 92px; border-radius: 999px; overflow:hidden; display:block; box-shadow: 0 8px 24px rgba(6,12,34,0.06); }
.vendedores-pro-grid .vendedor-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.vendedores-pro-grid .vendedor-name { font-size: 1.18rem; font-weight: 900; color: var(--color-text); }
.vendedores-pro-grid .vendedor-meta { color: var(--color-text-muted); font-size: 0.95rem; }
.vendedores-pro .vendedor-empty { padding: 40px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }

/* RESULTADOS (cards) */
.results { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 44px; }
.results .card { border-radius: 14px; overflow: hidden; display:flex; flex-direction:column; background: #fff; border: 1px solid rgba(15,23,42,0.04); box-shadow: 0 12px 32px rgba(6,12,34,0.06); }
.results .card-image { width: 100%; aspect-ratio: 4 / 3; height: auto; display:block; object-fit: cover; border-top-left-radius: 14px; border-top-right-radius: 14px; }
.results .card-body { padding: 1.4rem 1.6rem; gap: 0.85rem; }
.results .price { font-size: 1.35rem; font-weight: 900; color: var(--color-primary); }
.results .card-footer { padding: 14px 16px; border-top: 1px solid rgba(15,23,42,0.03); display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Badges professional style */
.pill { background: transparent; border-width: 1px; box-shadow: none; }
.results .badge-venta { background: rgba(177,51,51,0.06); color: var(--color-primary); border-color: rgba(177,51,51,0.12); }
.results .badge-alquiler { background: rgba(31,79,122,0.06); color: var(--color-secondary); border-color: rgba(31,79,122,0.12); }

/* Remove extra bottom whitespace inside cards */
.results .card { margin-bottom: 0; }

/* Section titles hierarchy */
.section h2, .section-title { font-size: 1.6rem; font-weight: 900; color: #0f172a; margin-bottom: 0.6rem; }
.section p.muted { color: var(--color-text-muted); }

/* Vertical rhythm / spacing adjustments between major sections */
main > .section, main > section { margin-top: 48px; margin-bottom: 40px; }
.hero.hero-new + .section { margin-top: 18px; }

/* Mobile tweaks: scale down headline and paddings but keep proportions */
@media (max-width: 768px) {
  .hero.hero-new { padding: 1.6rem 0.8rem; }
  .hero.hero-new .hero-copy h1 { font-size: 28px; }
  .buscador-pro { padding: 18px; margin-top: 12px; }
  .results { gap: 20px; }
}

/* End redesign overrides */

/* ========== PROJECT-SPECIFIC UX TUNING (home) ========== */
/* Purpose: eliminate gap under hero, make buscador and filtros look like a premium panel,
   restyle resultados header and cards, and tighten vendedores layout. All selectors
   are scoped to home-area classes/IDs to avoid breaking other pages. */

/* 1) Tighten hero -> first section: remove unexpected top gaps */
.hero.hero-new { margin-bottom: 0; padding-bottom: 0; }
.hero.hero-new + .buscador-pro { /* ensure buscador visually connects with hero */
  margin-top: 0; /* removed negative overlap to allow natural flow */
}
.hero.hero-new + .section { margin-top: 0; }
.hero-ctas { z-index: 6; }

/* 2) Buscador / filtros: premium card look */
#buscador-pro.buscador-pro {
  background: #ffffff; /* pure white */
  border-radius: 14px;
  padding: 32px; /* larger inner padding */
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(15,23,42,0.04);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

#buscador-pro .search-grid-basic {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px; /* vertical 20px, horizontal 24px */
  align-items: start;
}

#buscador-pro label {
  color: #6b7280; /* soft gray */
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase; /* subtle uppercase */
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

#buscador-pro input[type="text"],
#buscador-pro input[type="number"],
#buscador-pro select {
  height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.06);
  background: #fff;
  box-shadow: none;
}
/* Use brand indigo focus highlight for inputs in buscador */
#buscador-pro input:focus, #buscador-pro select:focus {
  outline: none;
  box-shadow: 0 6px 24px rgba(36,60,116,0.12);
  border-color: var(--tn-indigo);
}

/* Ensure the main operation select inside the form is visible (id="operacion") */
label[for="operacion"], #operacion { display: block !important; margin-bottom: 0.35rem; }

#buscador-pro .advanced-title {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

#buscador-pro .advanced-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  margin-top: 8px;
}

/* Buttons inside buscador */
#buscador-pro .btn-primary {
  background: linear-gradient(120deg, #1f4f7a 0%, #b13333 100%);
  color: #fff;
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(13,58,105,0.18);
}
#buscador-pro .btn-ghost {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e6e8eb;
}
#buscador-pro .btn-ghost:hover { background: #eceff1; }

/* 3) Terrenos encontrados header: centered, larger and airy */
.results-wrapper { max-width: 1200px; margin: 0 auto 1.6rem; padding: 0 1.2rem; }
.results-header { text-align: center; padding: 48px 0; display: block; }
.results-header h2 { font-size: 2rem; font-weight: 900; color: #0f172a; margin: 0 0 6px 0; }
.results-header p { color: #6b7280; margin: 0 auto; max-width: 720px; font-size: 0.95rem; }

.results { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 40px; }
.results .card { border-radius: 18px; border: 1px solid rgba(15,23,42,0.03); box-shadow: 0 10px 30px rgba(6,12,34,0.06); overflow: hidden; background: #fff; }
.results .card-body { padding: 1.6rem; gap: 0.85rem; }
.results .card-image { aspect-ratio: 4 / 3; height: auto; object-fit: cover; display:block; }

/* badge sizing and colors */
.results .pill { padding: 0.28rem 0.7rem; font-size: 0.72rem; border-radius: 999px; }
.results .badge-venta { background: rgba(177,51,51,0.08); color: #b13333; border-color: rgba(177,51,51,0.12); }
.results .badge-alquiler { background: rgba(31,79,122,0.08); color: #1f4f7a; border-color: rgba(31,79,122,0.12); }

.results .card-title { font-size: 1.12rem; font-weight: 900; color: #0f172a; }
.results .price { font-size: 1.45rem; font-weight: 900; color: #b13333; }
.results .card-footer { padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* 5) Vendedores destacados: centered, max-width and balanced cards */
.vendedores-pro { max-width: 900px; margin-left: auto; margin-right: auto; padding: 28px 20px; }
.vendedores-pro-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; justify-items: center; }
.vendedores-pro-grid .vendedor-card { max-width: 360px; display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,0.03); box-shadow: 0 8px 22px rgba(6,12,34,0.05); }
.vendedores-pro-grid .vendedor-thumb { width: 80px; height: 80px; border-radius: 999px; overflow: hidden; flex: 0 0 80px; }
.vendedores-pro-grid .vendedor-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.vendedores-pro .vendedor-empty { padding: 28px 18px; }

/* 6) General alignment and section spacing tuning for home */
main > .section, main > section { margin-top: 28px; margin-bottom: 32px; }
.section { padding-top: 0; }
.section .container { padding-left: 1.2rem; padding-right: 1.2rem; }

/* small screens adjustments kept proportional */
@media (max-width: 768px) {
  .hero.hero-new + .buscador-pro { margin-top: 0; }
  #buscador-pro.buscador-pro { padding: 18px; }
  #buscador-pro .search-grid-basic { gap: 12px 12px; }
  .results-header { padding: 28px 0; }
  .results { gap: 20px; }
}

/* End project-specific home UX tuning */

/* ====== ADDITIONAL PREMIUM TUNINGS ====== */
/* Further tighten hero->buscador, improve advanced filters card, header contrast,
   final card/vendedor adjustments. All rules scoped to header/home ids/classes. */

/* Ensure buscador sits visually attached to hero with no white gap */
.hero.hero-new { margin-bottom: 0; }
/* Remove negative overlap: ensure buscador flows under hero without overlapping */
#buscador-pro.buscador-pro {
  margin-top: 0;
  z-index: 8;
  position: relative;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
@media (max-width: 768px) {
  #buscador-pro.buscador-pro { margin-top: 0; }
}

/* Helpful scroll offset so hero CTA doesn't get hidden behind sticky header */
#buscador-pro { scroll-margin-top: calc(var(--header-height) + 12px); }

/* Advanced filters: become a real card when open */
#buscador-pro .advanced-filters.open {
  display: block;
  margin-top: 18px;
  padding: 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(6,12,34,0.06);
  border: 1px solid rgba(15,23,42,0.04);
}

#buscador-pro .advanced-filters.open .advanced-grid {
  gap: 18px 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Header: stronger presence and better contrast */
.site-header { padding: 1.05rem 1rem; }
.site-header .header-inner { align-items: center; gap: 1.2rem; }
.site-header .brand-title { font-size: 1.18rem; letter-spacing: 0.02em; }
.site-header .brand-subtitle { font-size: 0.78rem; color: #6b7280; }
.site-header .main-nav a { font-size: 0.95rem; color: #0b1220; padding: 0.55rem 0.9rem; border-radius: 10px; }
.site-header .main-nav a:hover { background: #f3f4f6; color: #071025; transform: none; }

/* Visible 'Salir' / header-scoped ghost buttons */
.site-header .btn-ghost { background: transparent; color: #111827; border: 1px solid rgba(15,23,42,0.06); padding: 0.45rem 0.8rem; border-radius: 999px; }
.site-header .btn-ghost:hover { background: #f3f4f6; }

/* Improve look of small header controls (mobile nav toggle) */
.nav-toggle { border-radius: 8px; padding: 6px; }

/* Cards refinement */
.results .card { border-radius: 18px; box-shadow: 0 14px 36px rgba(6,12,34,0.07); transition: transform 260ms ease, box-shadow 260ms ease; }
.results .card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(6,12,34,0.10); }
.results .card-body { padding: 1.8rem; }
.results .card-title { margin-bottom: 4px; }
.results .price { font-size: 1.6rem; letter-spacing: -0.01em; }

/* Tighter card meta and footer */
.results .meta { color: #6b7280; font-size: 0.88rem; }
.results .card-footer { padding: 12px 16px; border-top: 1px solid rgba(15,23,42,0.03); }

/* More compact and regular inputs across filters */
#buscador-pro input, #buscador-pro select, .filtros-pro select { height: 46px; min-height: 46px; }

/* Vendedores: avoid huge emptiness for single item, center grid cells */
.vendedores-pro-grid { justify-items: center; align-items: center; }
.vendedores-pro-grid .vendedor-card { min-width: 220px; max-width: 420px; }
.vendedores-pro-grid .vendedor-thumb { width: 88px; height: 88px; flex: 0 0 88px; }

/* Reduce faded-gray background usage: prefer cleaner whites and softer muted text */
.muted, .section p.muted { color: #6b7280; }

/* Ensure section spacing is consistent and tighter after hero */
main > .section, main > section { margin-top: 28px; margin-bottom: 32px; }
.hero.hero-new + .section, .hero.hero-new + .buscador-pro { margin-top: 0; }

@media (max-width: 480px) {
  .site-header .main-nav a { padding: 0.45rem 0.6rem; font-size: 0.92rem; }
  #buscador-pro.buscador-pro { margin-top: 0; }
  .results { gap: 18px; }
}

/* End additional premium tunings */

/* ====== Final tuned overrides (header, hero, filtros, cards, vendedores, spacing) ====== */
/* Header: single-row alignment and visual polish */
.site-header {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(6,12,34,0.08);
  border-bottom: 1px solid rgba(15,23,42,0.04);
  min-height: 76px;
}
.header-inner { display:flex; align-items:center; gap:1rem; padding: 0.9rem 1.2rem; }
.brand-mark { width:48px; height:48px; border-radius:12px; }
.brand-title { font-size:1.18rem; font-weight:800; }

/* Nav links style using brand indigo and CTA styling */
.main-nav { display:flex; gap:0.6rem; align-items:center; }
.main-nav a { color: var(--tn-indigo) !important; font-weight:600; padding:0.55rem 0.95rem; border-radius:12px; font-size:0.95rem; }
.main-nav a:hover { background:#f2f4f7; color:var(--tn-indigo); }
.main-nav .btn-primary { padding:0.62rem 1rem; border-radius:12px; font-weight:800; background: var(--tn-gradient); color:#fff; box-shadow: 0 8px 28px rgba(31,79,122,0.12); }
.main-nav .btn-primary:hover { transform: translateY(-2px); filter:brightness(1.02); }

/* Logout button (#navLogout) styled as a subtle gray ghost to match header */
.main-nav button#navLogout { background: #f3f4f6; color: var(--tn-title); border: 1px solid rgba(15,23,42,0.06); border-radius: 12px; padding: 0.45rem 0.9rem; font-weight:700; }
.main-nav button#navLogout:hover { background: #ececec; }

/* ====================== USER PREMIUM REDESIGN INSERTED ====================== */
/* Premium visual styles for Header, Buscador, Cards, How-it-works and Features.
  Inserted by automation per user request. All selectors respect existing IDs. */

/* HEADER adjustments (ensure single-line nav, CTA and logout appearance) */
.site-header { background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(6,12,34,0.06); border-bottom: 1px solid rgba(15,23,42,0.04); }
.header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 0.8rem; }
.main-nav { display:flex; gap:0.5rem; align-items:center; flex-wrap:nowrap; }
.main-nav a { color: var(--tn-indigo); padding:0.48rem 0.9rem; border-radius:10px; font-weight:600; font-size:0.95rem; }
.main-nav a:hover { background: rgba(15,23,42,0.04); }
.main-nav a#navPanelTerrenos, .main-nav a.btn.btn-primary#navPanelTerrenos { background: var(--tn-gradient); color:#fff !important; padding:0.54rem 1rem; border-radius:12px; box-shadow:0 10px 30px rgba(31,79,122,0.10); font-weight:800; }
.main-nav button#navLogout, .main-nav .btn-ghost#navLogout { background:#f3f4f6; color:#0b1220; border:1px solid rgba(15,23,42,0.04); padding:0.42rem 0.8rem; border-radius:999px; font-weight:700; }
.main-nav button#navLogout:hover { background:#ececec; }
.main-nav #navLogout + #navLogout { display:none !important; }

/* BUSCADOR / FILTROS premium card */
#buscador-pro { background: var(--tn-card); border-radius:16px; box-shadow:0 20px 40px rgba(6,12,34,0.06); border:1px solid rgba(15,23,42,0.04); padding:28px; position:relative; max-width:1200px; margin:0 auto 28px auto; }
.buscador-grid { display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
.buscador-grid .left { display:flex; flex-direction:column; gap:24px; }
.buscador-grid .right { display:flex; flex-direction:column; gap:18px; }
#buscador-pro label { font-size:0.85rem; font-weight:700; color:var(--tn-muted); margin-bottom:8px; text-transform:uppercase; }
#buscador-pro input[type="text"], #buscador-pro input[type="number"], #buscador-pro select, #buscador-pro textarea { height:48px; padding:0.6rem 0.85rem; border-radius:10px; border:1px solid rgba(15,23,42,0.06); font-size:16px; color:var(--tn-title); background:#fff; }
#ordenarPor { position:absolute; top:20px; right:24px; width:260px; height:44px; z-index:14; border-radius:10px; border:1px solid rgba(15,23,42,0.06); background:#fff; padding:0 10px; font-weight:700; color:var(--tn-title); }
#buscador-pro .buscador-actions { display:flex; gap:12px; justify-content:flex-start; align-items:center; margin-top:6px; }
#buscador-pro .btn-primary { background:var(--tn-gradient); color:#fff; border-radius:12px; padding:0.9rem 1.2rem; font-weight:800; box-shadow:0 12px 28px rgba(31,79,122,0.10); }
#buscador-pro .btn-ghost { background:#f3f4f6; color:#0b1220; border-radius:12px; padding:0.75rem 1rem; border:1px solid rgba(15,23,42,0.04); font-weight:700; }

@media (max-width:768px) { .buscador-grid { grid-template-columns:1fr; } #ordenarPor { position:static; width:100%; margin-bottom:8px; } #buscador-pro { padding:18px; margin:0 12px 18px 12px; } }

/* CARDS de terrenos premium */
.results { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:36px; }
.results .card { background:var(--tn-card); border-radius:18px; overflow:hidden; border:1px solid rgba(15,23,42,0.03); box-shadow:0 18px 46px rgba(6,12,34,0.06); display:flex; flex-direction:column; transition:transform 220ms ease, box-shadow 220ms ease; }
.results .card:hover { transform:translateY(-6px); box-shadow:0 28px 64px rgba(6,12,34,0.08); }
.results .card-image { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-top-left-radius:18px; border-top-right-radius:18px; }
.results .card-body { padding:18px; display:flex; flex-direction:column; gap:10px; }
.results .price { font-size:1.45rem; font-weight:900; margin-bottom:2px; color:var(--tn-title); }
.results .card.operacion-venta .price { color: rgba(167,52,57,1); }
.results .card.operacion-alquiler .price { color: rgba(31,79,122,1); }
.results .card-title { font-size:1.05rem; font-weight:800; color:var(--tn-title); }
.results .meta { color:var(--tn-muted); font-size:0.9rem; display:flex; gap:10px; flex-wrap:wrap; }
.results .services { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.results .service-chip { padding:0.28rem 0.55rem; border-radius:999px; font-size:0.78rem; font-weight:700; color:#374151; background:rgba(243,244,246,0.8); border:1px solid rgba(15,23,42,0.04); display:inline-flex; align-items:center; gap:6px; }
.results .card-footer { margin-top:auto; padding:12px 16px; border-top:1px solid rgba(15,23,42,0.03); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.results .link-detalle { background:transparent; color:var(--tn-indigo); border-radius:10px; padding:0.45rem 0.9rem; font-weight:800; text-decoration:none; display:inline-flex; gap:8px; align-items:center; }

/* Cómo funciona y Características: premium cards */
.how-steps, .features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.how-steps .step, .features-grid .feature { background:var(--tn-card); border-radius:16px; padding:18px; box-shadow:0 16px 36px rgba(6,12,34,0.06); display:flex; gap:12px; align-items:flex-start; }
.how-steps .step .step-num, .how-steps .step .step-icon, .features-grid .feature .feature-icon { width:56px; height:56px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg, rgba(31,79,122,1), rgba(167,52,57,1)); box-shadow:0 8px 24px rgba(31,79,122,0.12); flex:0 0 56px; }
.how-steps .step .step-body, .features-grid .feature .feature-body { display:flex; flex-direction:column; gap:6px; }
.how-steps .step h3, .features-grid .feature h3 { font-size:1.05rem; font-weight:800; color:var(--tn-title); margin:0; }
.how-steps .step p, .features-grid .feature p { color:var(--tn-muted); margin:0; font-size:0.95rem; }

/* Minor responsive tweaks */
@media (max-width:768px) { .results { grid-template-columns:1fr; gap:18px; } .how-steps, .features-grid { grid-template-columns:1fr; } }

/* ====================== END USER PREMIUM REDESIGN ====================== */

/* Hero: improved typography and subtle shadow */
.hero.hero-new .hero-copy h1 { text-shadow: 0 6px 22px rgba(6,12,34,0.18); }
.hero.hero-new .hero-copy p { color: rgba(255,255,255,0.86); font-weight:500; }
.hero-ctas { justify-content:center; align-items:center; }

/* Filtros: left column filters, right column ordenar */
.filtros-pro { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items:start; margin: 24px 0; }
.filtros-pro > div { display:flex; flex-direction:column; align-items:flex-start; }
.filtros-pro > div:first-child { grid-column: 2 / 3; justify-self:end; }
.filtros-pro > div:nth-child(2) { grid-column: 1 / 2; }

/* Ensure main 'operacion' select is visible */
label[for="operacion"], #operacion { display: block !important; margin-bottom: 0.35rem; }

/* Buscador card: stronger card look */
#buscador-pro.buscador-pro { background: var(--tn-card); border-radius: 16px; padding: 32px; box-shadow: 0 12px 36px rgba(6,12,34,0.06); border: 1px solid rgba(15,23,42,0.04); }
#buscador-pro .search-grid-basic { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 20px; }
#buscador-pro label { color: var(--tn-muted); font-weight:700; font-size:0.82rem; }
#buscador-pro input, #buscador-pro select { border-radius:10px; border:1px solid rgba(15,23,42,0.06); height:46px; }

/* Results cards: Airbnb-like look */
.results { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 40px; }
.results .card { border-radius: 18px; background: var(--tn-card); box-shadow: 0 14px 36px rgba(6,12,34,0.07); border: 1px solid rgba(15,23,42,0.03); overflow:hidden; transition: transform 260ms ease, box-shadow 260ms ease; }
.results .card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(6,12,34,0.10); }
.results .card-image { aspect-ratio: 4/3; width:100%; height:auto; display:block; object-fit:cover; border-top-left-radius:18px; border-top-right-radius:18px; }
.results .card-body { padding: 1.6rem; }
.results .card-title { font-weight:900; color: var(--tn-title); }
.results .pill { padding: 0.26rem 0.64rem; font-size:0.72rem; border-radius:999px; }
.results .badge-venta { background: rgba(167,52,57,0.08); color: var(--tn-red); border-color: rgba(167,52,57,0.12); }
.results .badge-alquiler { background: rgba(36,60,116,0.08); color: var(--tn-indigo); border-color: rgba(36,60,116,0.12); }
.results .price { font-size:1.45rem; font-weight:900; }
.results .card.operacion-venta .price { color: var(--tn-red); }
.results .card.operacion-alquiler .price { color: var(--tn-indigo); }

/* Vendedores: avatar 90px, centered info, gradient button */
.vendedores-pro-grid .vendedor-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px; border-radius:14px; box-shadow:0 12px 30px rgba(6,12,34,0.06); border:1px solid rgba(15,23,42,0.04); background: #fff; }
.vendedores-pro-grid .vendedor-thumb { width:90px; height:90px; border-radius:999px; overflow:hidden; }
.vendedores-pro-grid .vendedor-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vendedores-pro-grid .vendedor-name { font-size:1.12rem; font-weight:900; }
.vendedores-pro-grid .vendedor-actions .btn-primary { background: var(--tn-gradient); border-radius:10px; padding:0.6rem 1rem; font-weight:800; }

/* Tighten vertical rhythm between sections */
main > .section, main > section { margin-top: 24px; margin-bottom: 24px; }
.hero.hero-new + .buscador-pro { margin-top: 0; }

/* Smooth transitions for buttons and interactive elements */
.btn, .card, .vendedor-card, .service-chip { transition: all 220ms cubic-bezier(.2,.9,.2,1); }

/* Mobile adjustments */
@media (max-width: 768px) {
  .filtros-pro { grid-template-columns: 1fr; }
  .filtros-pro > div:first-child, .filtros-pro > div:nth-child(2) { grid-column: auto; justify-self: start; }
  .header-inner { padding: 0.6rem 1rem; }
  .main-nav { gap: 0.4rem; }
}

/* End final tuned overrides */

/* ====================== MOBILE / DESKTOP NAV FIX ====================== */
/* Purpose: ensure only one nav (desktop or mobile) is visible depending on viewport,
   and allow the JS toggle (which uses body.nav-open) to open the mobile nav.
   This block is intentionally placed at EOF and uses !important selectively to
   override earlier conflicting rules in this large stylesheet.
*/

/* Desktop (show main nav, hide toggle) */
@media (min-width: 881px) {
  .nav-toggle { display: none !important; }
  /* ensure main nav is visible and inline on desktop */
  #mainNav, .main-nav { display: flex !important; position: static !important; height: auto !important; top: auto !important; left: auto !important; right: auto !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; flex-direction: row !important; gap: 0.6rem !important; align-items: center !important; }
}

/* Mobile (hide main nav by default, show hamburger). Use 880px breakpoint per request. */
@media (max-width: 880px) {
  .nav-toggle { display: block !important; }
  /* Keep main nav hidden until JS opens it */
  #mainNav, .main-nav { display: none !important; }

  /* Open state: support both body.nav-open (current JS) and #mainNav.open (future-safe) */
  body.nav-open #mainNav, body.nav-open .main-nav,
  #mainNav.open, .main-nav.open {
    display: flex !important;
    position: fixed !important;
    top: var(--header-height, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - var(--header-height, 64px)) !important;
    background: var(--tn-card, #ffffff) !important;
    z-index: 9999 !important;
    padding: 1.2rem !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 40px rgba(6,12,34,0.12) !important;
  }

  /* Ensure nav links are tappable when mobile nav opens */
  body.nav-open #mainNav a, body.nav-open .main-nav a,
  #mainNav.open a, .main-nav.open a { display: block !important; padding: 0.9rem 1rem !important; border-radius: 8px !important; font-size: 1rem !important; }
}

/* End mobile/desktop nav fix */

/* ====================== CLEAN REBUILD: HERO + BUSCADOR + FILTROS ====================== */
/* This block is an authoritative rebuild of the visual layout requested by the user.
   It intentionally uses specific selectors and conservative !important usage only
   for properties that must override prior conflicting rules in this large CSS file.
   Do not add layout-changing overrides elsewhere without updating this block.
*/

/* HERO GRID: left content + fixed right column (buscador). Center vertically. */
.hero, .hero.hero-new {
  padding: 3.2rem 1.5rem;
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: #fff;
  overflow: visible !important;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr 420px !important; /* fixed right column */
  gap: 2rem !important;
  align-items: center !important; /* center vertically so H1 aligns with buscador */
}

/* Buscador: OG translucent white (restored), fixed width constraints, no transforms/offsets */
#buscador-pro.buscador-pro,
.hero-search {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  color: #0b1220 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 300px !important;
  box-sizing: border-box !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}

/* Prevent any negative margin overlap or z-index push */
#buscador-pro.buscador-pro { margin-top: 0 !important; z-index: auto !important; }

/* Advanced filters must be in-flow, not positioned, no internal scrolls, identical width */
#advanced-filters,
.advanced-filters,
#buscador-pro .advanced-filters,
#buscador-pro .advanced-filters.open,
#advanced-filters.expanded,
.advanced-filters.expanded {
  display: none !important;
  position: static !important;
  overflow: visible !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* When expanded/open, show inline and let the hero grow naturally */
#advanced-filters.expanded,
.advanced-filters.open,
#buscador-pro .advanced-filters.open,
#buscador-pro .advanced-filters.expanded {
  display: block !important;
  position: static !important;
  overflow: visible !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding: 20px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(6,12,34,0.08) !important;
}

/* Advanced title styling */
#advanced-filters .advanced-title,
.advanced-filters .advanced-title {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 16px !important;
}

/* Advanced grid: 4 columns on desktop, responsive down */
#advanced-filters .advanced-grid,
.advanced-filters .advanced-grid,
#buscador-pro .advanced-filters .advanced-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px 12px !important;
  align-items: start !important;
}

/* Grid items styling */
#advanced-filters .advanced-grid > div,
.advanced-filters .advanced-grid > div,
#buscador-pro .advanced-filters .advanced-grid > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Labels en filtros avanzados */
#advanced-filters label,
.advanced-filters label,
#buscador-pro .advanced-filters label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
}

/* Inputs y selects en filtros avanzados */
#advanced-filters input,
#advanced-filters select,
.advanced-filters input,
.advanced-filters select,
#buscador-pro .advanced-filters input,
#buscador-pro .advanced-filters select {
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: white !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#advanced-filters input:focus,
#advanced-filters select:focus,
.advanced-filters input:focus,
.advanced-filters select:focus,
#buscador-pro .advanced-filters input:focus,
#buscador-pro .advanced-filters select:focus {
  outline: none !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Checkbox group styling */
#advanced-filters .checkbox-group,
.advanced-filters .checkbox-group,
#buscador-pro .advanced-filters .checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#advanced-filters .checkbox-group label,
.advanced-filters .checkbox-group label,
#buscador-pro .advanced-filters .checkbox-group label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
}

#advanced-filters .checkbox-group input[type="checkbox"],
.advanced-filters .checkbox-group input[type="checkbox"],
#buscador-pro .advanced-filters .checkbox-group input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
  accent-color: #16a34a !important;
  cursor: pointer !important;
}

@media (max-width: 1400px) {
  #advanced-filters .advanced-grid,
  .advanced-filters .advanced-grid,
  #buscador-pro .advanced-filters .advanced-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  #advanced-filters .advanced-grid,
  .advanced-filters .advanced-grid,
  #buscador-pro .advanced-filters .advanced-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #advanced-filters,
  .advanced-filters,
  #buscador-pro .advanced-filters.open {
    padding: 16px !important;
  }

  #advanced-filters .advanced-grid,
  .advanced-filters .advanced-grid,
  #buscador-pro .advanced-filters .advanced-grid {
    grid-template-columns: 1fr !important;
    gap: 14px 10px !important;
  }
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-copy { text-align: center !important; }
  .hero-copy h1, .hero-copy p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; }
  #advanced-filters .advanced-grid,
  .advanced-filters .advanced-grid { grid-template-columns: 1fr !important; }
  #buscador-pro.buscador-pro, .hero-search { max-width: none !important; min-width: 0 !important; margin: 0 auto !important; }
}

/* Ensure the 'Más filtros' button text/aria is respected; prefer the expanded class used by JS */
#btn-advanced[aria-expanded="true"] { font-weight: 800; }

/* Ensure results area is visible and not clipped by hero overflow */
#results, .results-wrapper { display: block !important; visibility: visible !important; }

/* mi-perfil container spacing */
.profile-container { max-width: 900px !important; margin: 0 auto !important; padding: 40px 20px !important; box-sizing: border-box !important; }

/* Hide server-rendered plan label client-side only */
.plan-actual { display: none !important; }

/* End CLEAN REBUILD block */

/* ========== Compact adjustments requested by user ========== */
/* Make vendedores block much smaller when no Pro vendors exist */
.vendedores-pro.no-pro {
  padding: 8px 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.vendedores-pro.no-pro h2,
.vendedores-pro.no-pro .muted,
.vendedores-pro.no-pro .vendedores-pro-grid {
  display: none !important;
}
.vendedores-pro.no-pro .vendedor-compact-center {
  display: flex; justify-content: center; align-items: center; padding: 6px 0; margin: 0 auto; max-width: 320px;
}
.vendedor-compact-center .btn-compact {
  padding: 0.45rem 0.9rem; border-radius: 10px; font-weight: 800; font-size: 0.92rem;
  border: 1px solid rgba(15,23,42,0.06); background: #f8fafc; color: #0b1220;
}

/* Hide the large placeholder icon if still present anywhere inside vendedor-empty */
.vendedores-pro .vendedor-empty .icon { display: none !important; }

/* Make vendedores block much smaller overall (when there are items) */
.vendedores-pro { padding: 12px 14px !important; border-radius: 10px; }
.vendedores-pro h2 { font-size: 1.08rem; margin-bottom: 6px; }
.vendedores-pro .muted { margin-bottom: 8px; }
.vendedores-pro-grid .vendedor-card { padding: 10px 12px; gap: 6px; }
.vendedores-pro-grid .vendedor-thumb { width: 64px; height: 64px; }

#buscador-pro { padding: 16px 18px; margin-bottom: 18px; }
.buscador-grid { grid-template-columns: 1fr 200px; gap: 16px; }
#buscador-pro .left { gap: 12px; }
#buscador-pro .search-grid-basic { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
#buscador-pro label { font-size: 0.75rem; margin-bottom: 6px; }
#buscador-pro input, #buscador-pro select { height: 40px; font-size: 15px; padding: 0 10px; }
#buscador-pro .buscador-actions { display:flex; gap:10px; justify-content:center; align-items:center; margin-top:6px; }
#buscador-pro .btn-ghost { padding: 0.5rem 0.9rem; }
#buscador-pro .btn-primary { padding: 0.54rem 1rem; }

/* Keep 'operacion' visually aligned with other inputs (no isolation) */
#buscador-pro label[for="operacion"] { text-transform: none; font-weight:600; color:var(--tn-muted); }

/* Reduce width/empty space of right column and align content to top */
.buscador-grid .right { display:flex; flex-direction:column; gap:10px; align-items:stretch; justify-content:flex-start; }
.buscador-grid .right > div { width:100%; }

/* Spacing between Vendedores -> Buscador -> Resultados: consistent smaller rhythm */
#vendedores-destacados { margin-top: 12px; margin-bottom: 6px; }
#buscador-pro { margin-top: 6px; }
.results-wrapper { margin-top: 18px; padding-top: 6px; }

/* Ensure ordenarPor is not oversized and stays inside right column */
.buscador-grid #ordenarPor { position: static; width: 100%; margin: 0; }

@media (max-width: 768px) {
  .buscador-grid { grid-template-columns: 1fr !important; }
  #buscador-pro { padding: 12px !important; margin: 0 12px 12px 12px; }
  .vendedores-pro { padding: 10px 10px !important; }
  .vendedores-pro.no-pro { padding: 8px 10px !important; }
}

/* End compact adjustments */

/* ====== Restore original-style hero layout (left text, right search) ====== */
/* Strong, scoped rules to revert centering and create a two-column hero like the original design. */
.hero {
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: white;
  padding: 3.2rem 1.5rem;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
  max-width: 380px;
}

.hero-search {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-grid-basic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.search-grid-basic > div {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}

input::placeholder {
  color: #9ca3af;
}

input:focus,
select:focus {
  border-color: var(--color-accent);
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.2);
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.search-actions-right {
  display: flex;
  gap: 0.6rem;
}

.btn {
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  box-shadow: 0 4px 12px rgba(31, 79, 122, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 79, 122, 0.4);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* (removed duplicate advanced-filters default block; final overrides apply) */

.advanced-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.8rem;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.1rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* Remove buscador overlap behavior introduced earlier */
#buscador-pro { margin-top: 0; position: static; z-index: auto; }

/* Ensure hero is flush under header (no extra gap) */
.site-header + .hero { margin-top: 0; }

@media (max-width: 992px) {
  .hero { overflow: visible !important; }
  .hero.hero-new .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-search { margin: 12px auto 0 auto; width: calc(100% - 32px); }
  .hero-search .search-grid-basic { grid-template-columns: 1fr; }
  .hero-search .search-actions { justify-content:center; }
  .hero-copy { text-align: center; }
}

/* Tighten vertical rhythm after restoring original hero */
main > .section, main > section { margin-top: 18px !important; margin-bottom: 18px !important; }
.results-header { padding: 18px 0 !important; }

/* Restore card button gradient (original) - keep existing variables */
.link-detalle { background: linear-gradient(120deg, var(--tn-indigo), var(--tn-red)); color: #fff; border-radius: 8px; padding: 10px 14px; font-weight:800; }

/* Preserve header new look (do not revert) */
.site-header { background: rgba(255,255,255,0.96); }

/* End restore block */

/* Specific logout button inside nav: visible gray ghost */
.main-nav button#navLogout, .main-nav .btn-ghost#navLogout {
  background: #f3f4f6;
  color: var(--tn-title);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-weight:700;
}
.main-nav button#navLogout:hover { background: #ececec; }

/* ====================== SPACING FIXES: remove unwanted gap above hero ====================== */
/* Ensure the first section (hero) sits flush under the header */
.hero {
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: white;
  padding: 3.2rem 1.5rem;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
  max-width: 380px;
}

.hero-search {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-grid-basic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.search-grid-basic > div {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  padding: 0.6rem 0.8rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}

input::placeholder {
  color: #9ca3af;
}

input:focus,
select:focus {
  border-color: var(--color-accent);
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.2);
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.search-actions-right {
  display: flex;
  gap: 0.6rem;
}

.btn {
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  box-shadow: 0 4px 12px rgba(31, 79, 122, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 79, 122, 0.4);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.advanced-filters {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.advanced-filters.open {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.advanced-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.8rem;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.1rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-accent);
}


/* ========== FEATURES: make cards lighter and more compact ========== */
.features { padding: 8px 0 !important; }
.features .features-grid { gap: 12px !important; }
.features .feature {
  padding: 12px !important; /* slightly reduced padding */
  min-height: auto !important; /* avoid tall cards */
  display:flex !important; flex-direction:row !important; gap:12px !important; align-items:center !important;
  border: 1px solid rgba(15,23,42,0.03) !important;
  box-shadow: 0 6px 18px rgba(6,12,34,0.04) !important; /* more subtle */
  border-radius: 12px !important;
  background: var(--tn-card) !important;
}
.features .feature h4 { margin: 0 0 2px 0 !important; font-size: 1.02rem !important; font-weight: 800 !important; }
.features .feature p { margin: 0 !important; color: var(--tn-muted) !important; font-size: 0.92rem !important; }

/* Icon scale matching old design */
.features .feature .feature-icon, .features .feature .icon { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 8px !important; }
.features .feature .feature-icon { box-shadow: 0 6px 18px rgba(6,12,34,0.04); }



/* ==========================
   Final enforcement overrides
   - Remove negative margins that caused overlap
   - Compact buscador, set opacity, tighten gaps
   - Restore hero left/right grid and spacing precisely
   These rules are intentionally specific and placed at the end
   to override any earlier conflicting rules without editing IDs.
   ========================== */

/* Prevent strong negative pull on buscador introduced earlier */
#buscador-pro.buscador-pro {
  margin-top: 0;
  margin-left: 0;
  position: relative;
  z-index: auto;
}

/* Neutralize any remaining negative margins that forced overlap with hero */
.hero.hero-new + .buscador-pro,
.hero.hero-new + .section,
#buscador-pro.buscador-pro {
  margin-top: 0 !important;
}

/* Hero: home-specific grid is defined earlier (.hero.hero-new .hero-inner) - avoid overriding here */
/* no-op here to prevent later forcing of fixed widths */

/* H1 spacing: strong, large, but close to paragraph (8-12px) */
.hero-copy h1 { margin-bottom: 10px; font-weight: 900; }
.hero-copy p.lead { margin-bottom: 10px; }

/* Hero-search / buscador unified block: prefer cascade over !important */
.hero-search, #buscador-pro.buscador-pro {
  max-width: 420px;
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Remove translateY on small screens so panel stacks naturally */
@media (max-width: 992px) {
  .hero-search, #buscador-pro.buscador-pro { transform: none !important; }
}

/* Tighten inputs inside the hero search: smaller, clean borders */
.hero-search input, .hero-search select, #buscador-pro input, #buscador-pro select {
  height: 38px !important;
  font-size: 14px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15,23,42,0.06) !important; /* thin, soft border */
  background: #fff !important; /* keep inputs white for contrast */
  color: #0b1220 !important;
}

/* Row / column sizing inside the hero-search */
.hero-search .search-grid-basic { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.hero-search .search-actions { justify-content: flex-end !important; gap: 8px !important; }

/* Make Ordenar/Operación stay narrow and aligned */
.hero-inner #ordenarPor, .buscador-grid #ordenarPor { width: 100% !important; position: static !important; }

/* Buttons inside hero/search compact: smaller paddings and closer spacing */
.hero-search .btn, #buscador-pro .btn { padding: 8px 12px !important; font-size: 14px !important; }
.hero-search .search-actions-right .btn { margin-left: 6px !important; }

/* Buscador buttons: compact, soft gradient, no excessive padding */
#buscador-pro .btn-primary, .hero-search .btn-primary {
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, rgba(31,79,122,0.95) 0%, rgba(167,52,57,0.95) 100%) !important;
  box-shadow: 0 8px 18px rgba(31,79,122,0.08) !important; /* softer */
}

#buscador-pro .btn-ghost, .hero-search .btn-ghost {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  color: inherit !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Reduce the hero -> next section gap to desired small rhythm */
.hero.hero-new + .buscador-pro, .hero.hero-new + .section { margin-top: 8px !important; }

@media (max-width: 992px) {
  .hero.hero-new .hero-inner { grid-template-columns: 1fr !important; text-align: center !important; }
  .hero-search, #buscador-pro.buscador-pro { max-width: none !important; width: calc(100% - 24px) !important; margin: 12px auto 0 auto !important; }
  .hero-search .search-grid-basic { grid-template-columns: 1fr !important; }
}

.buscador-grid { grid-template-columns: 1fr minmax(320px, 420px); gap: 20px; }
.buscador-grid .left { width: 100%; }
.buscador-grid .right { width: 100%; }

/* Advanced filters: hidden by default and shown in-flow when expanded (no overlay, no internal scroll) */
#advanced-filters.advanced-filters { display: none; }

/* When expanded, advanced filters are rendered in-flow below the basic search rows so the hero grows naturally */
#advanced-filters.advanced-filters.expanded {
  display: block;
  position: static;
  width: 100%;
  margin-top: 12px;
  background: transparent; /* keep transparent so underlying hero background shows through */
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  overflow: visible; /* ensure no internal scroll */
}

#advanced-filters.advanced-filters.expanded .advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px 14px;
}

@media (min-width: 1200px) {
  #advanced-filters.advanced-filters.expanded .advanced-grid { grid-template-columns: repeat(3, minmax(140px,1fr)); }
}

/* Ensure advanced-filters children do not force horizontal overflow */
#advanced-filters.advanced-filters > div { min-width: 0; }

/* Restore 'Ver detalle' button vivid gradient with icon alignment */
.results .link-detalle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(120deg, var(--tn-indigo), var(--tn-red)) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(31,79,122,0.12) !important;
}
.results .link-detalle .icon { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; }

/* Make sure the hero-search 'Más filtros' button toggles compactly and doesn't shift layout */
#btn-advanced { white-space: nowrap; }


/* Ensure no other rule later undoes these tweaks */
body { --__tn-hero-tweaks: 1; }




/* ====================== CLEAN HERO + BUSCADOR (OG) ====================== */
/* Clean, minimal hero and buscador following strict rules requested by user.
   - No fixed heights (no min-height/height/clamp)
   - Buscador translucent card with backdrop-filter
   - Advanced filters hidden by default (display:none) and shown inline (display:block)
   - Grid exactly: minmax(0,1.1fr) minmax(420px,1fr)
   - No internal scrolls, no negative margins, no !important in these rules
*/

.hero {
  background: linear-gradient(135deg, #1f4f7a 0%, #b13333 100%);
  color: #fff;
  padding: 3.2rem 1.5rem;
  overflow: visible;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  /* Fixed-ish right column to keep buscador width predictable */
  grid-template-columns: 1fr 420px;
  gap: 2rem;
  /* Center vertically so H1/buttons align with the buscador panel */
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 0.6rem 0;
}

.hero-copy .lead {
  margin: 0 0 1rem 0;
  color: rgba(255,255,255,0.92);
}

/* Buscador card: OG translucent white with subtle blur (restored) */
#buscador-pro.buscador-pro,
.hero-search {
  /* OG transparency (white, slightly opaque) and softer blur */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 12px;
  padding: 18px;
  color: #0b1220; /* form text inside should be readable */
  width: 100%;
  box-sizing: border-box;
  /* enforce no negative offsets and predictable placement */
  margin: 0;
  transform: none;
  position: static;
  max-width: 420px;
  min-width: 300px;
}

/* Basic grid for search inputs inside card */
.search-grid-basic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
}

/* Buttons and actions */
.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.search-actions-right { display:flex; gap:10px; align-items:center; }


/* Advanced filters: hidden by default; shown in-flow when expanded */
#advanced-filters { display: none; }
#advanced-filters.expanded { display: block; }

/* When expanded, the advanced filters must be part of the document flow,
   not positioned absolutely/fixed, must not create internal scrolls,
   must use a 3-column grid and match the buscador width (max 420px).
*/
#advanced-filters {
  /* defensive defaults to avoid rogue overflow/positioning */
  position: static !important;
  overflow: visible !important;
  box-sizing: border-box;
}

#advanced-filters.expanded {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 420px !important; /* match buscador base width */
  margin-top: 12px !important;
  background: transparent !important; /* keep hero background visible */
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important; /* do NOT allow internal scrolling */
}

/* The advanced-grid must be a 3-column layout on desktop and 1–3 responsive */
#advanced-filters .advanced-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

@media (max-width: 1200px) {
  #advanced-filters .advanced-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  #advanced-filters .advanced-grid { grid-template-columns: 1fr !important; }
}

/* Inputs contrast: keep input fields readable (white background) */
#buscador-pro input, #buscador-pro select, .hero-search input, .hero-search select {
  background: #fff;
  color: #0b1220;
  border: 1px solid rgba(15,23,42,0.06);
  padding: 10px 12px;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 'Ver detalle' gradient exactly as requested */
.results .link-detalle, .link-detalle-primary {
  background: linear-gradient(90deg,#1f4f7a,#b13333);
  color: #fff;
}

/* Small helpers for responsive */
@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; }
  .search-grid-basic { grid-template-columns: 1fr; }
}

/* Remove any hero pseudo-element visuals that could overlay content */

.hero::before, .hero::after { display: none; }

/* Ensure no negative top margins near hero/buscador (defensive) */
.hero, #buscador-pro, .hero-search { margin-top: 0 !important; }

/* Ensure results section is visible (in case something hid it) */
#results { display: block !important; }

/* Fix profile container spacing for 'Mi perfil' page */
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Hide seller plan badges client-side (do not modify server templates) */
.plan-actual { display: none !important; }

/* End clean hero block */

/* ====================== RESPONSIVE FIXES: ensure buscador + filtros scale down correctly ====================== */
/* These final media rules relax the min-width constraints and adjust paddings/grids so
   the buscador and advanced filters remain usable on tablet and mobile without overflowing. */

/* Slightly narrower desktops / large tablets: allow wider but not overflowing */
@media (max-width: 1199px) {
  .hero-inner { grid-template-columns: 1fr minmax(320px, 640px) !important; }
  #buscador-pro.buscador-pro, .hero-search, #advanced-filters, .advanced-filters { max-width: 640px !important; min-width: 0 !important; }
  #advanced-filters.expanded, .advanced-filters.expanded { max-height: 900px !important; }
}

/* Tablet / small desktop: stack hero, make buscador full-width with constrained padding */
@media (max-width: 992px) {
  /* Switch to flex layout on narrow screens to ensure perfect centering */
  .hero-inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 18px !important; padding-left: 12px !important; padding-right: 12px !important; width: calc(100% - 24px) !important; }
  #buscador-pro.buscador-pro, .hero-search { max-width: calc(100% - 32px) !important; min-width: 0 !important; margin: 0 16px !important; padding: 14px !important; }
  #advanced-filters, .advanced-filters, #advanced-filters.expanded, .advanced-filters.expanded { max-width: calc(100% - 32px) !important; min-width: 0 !important; margin: 12px 16px 0 16px !important; padding: 12px !important; overflow: visible !important; max-height: none !important; }
  /* Advanced grid reduces to 2 columns at most on tablet */
  #advanced-filters .advanced-grid, .advanced-filters .advanced-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* Mobile: ensure single-column stacking and full-width controls */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr !important; }
  #buscador-pro.buscador-pro, .hero-search { width: calc(100% - 24px) !important; max-width: none !important; min-width: 0 !important; margin: 0 12px !important; padding: 12px !important; }
  #advanced-filters, .advanced-filters { width: calc(100% - 24px) !important; max-width: none !important; min-width: 0 !important; margin: 8px 12px 0 12px !important; padding: 12px !important; overflow: visible !important; max-height: none !important; }
  /* Advanced grid becomes 1 column on mobile */
  #advanced-filters .advanced-grid, .advanced-filters .advanced-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Inputs and buttons slightly larger for touch */
  #buscador-pro input, #buscador-pro select, .hero-search input, .hero-search select { height: 44px !important; font-size: 15px !important; }
}

/* Extra small screens: tighten horizontal spacing */
@media (max-width: 480px) {
  #buscador-pro.buscador-pro, .hero-search, #advanced-filters, .advanced-filters { margin-left: 10px !important; margin-right: 10px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .search-grid-basic, .advanced-grid { gap: 8px !important; }
}

/* Defensive: remove any forced min-widths on inputs/containers that could break stacking */
#buscador-pro, #buscador-pro.buscador-pro, .hero-search, #advanced-filters, .advanced-filters { min-width: 0 !important; }

/* End responsive fixes */

/* ====================== FORM: HERO-SEARCH & ADVANCED FILTERS TIGHT STYLES ====================== */
/* Specific, high-priority rules to normalize the hero search form layout and
   ensure labels/inputs are readable and responsive. Also switch advanced filters
   to a white panel with black text for maximum legibility (keeps the animation). */

/* Grid: 3 cols desktop, 2 cols tablet, 1 col mobile */
.hero-search .search-grid-basic,
#buscador-pro .search-grid-basic {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px 12px !important;
  align-items: start !important;
}

@media (max-width: 1200px) {
  .hero-search .search-grid-basic,
  #buscador-pro .search-grid-basic { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .hero-search .search-grid-basic,
  #buscador-pro .search-grid-basic { grid-template-columns: 1fr !important; }
}

/* Ensure each field column stacks and uses full width */
.hero-search .search-grid-basic > div,
#buscador-pro .search-grid-basic > div { display:flex !important; flex-direction:column !important; gap:6px !important; }

/* Labels and small headings: dark for readability */
.hero-search label, .hero-search .advanced-title {
  color: rgba(255,255,255,0.95) !important; /* white labels for dark hero search */
  font-weight: 700 !important;
  font-size: 0.82rem !important;
}

#buscador-pro label, #buscador-pro .advanced-title {
  color: #0b1220 !important; /* black labels for buscador/pro card */
  font-weight: 700 !important;
  font-size: 0.82rem !important;
}

/* Inputs/selects: full width, consistent height and padding */
.hero-search input[type="text"], .hero-search input[type="number"], .hero-search select,
#buscador-pro input[type="text"], #buscador-pro input[type="number"], #buscador-pro select,
.advanced-filters input[type="text"], .advanced-filters input[type="number"], .advanced-filters select {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  background: #ffffff !important;
  color: #0b1220 !important;
}

/* Ordenar select align and sizing */
#ordenarPor { height:40px !important; min-width: 160px !important; }

/* Actions layout */
.search-actions { display:flex !important; gap:12px !important; align-items:center !important; justify-content:space-between !important; margin-top:10px !important; }
.search-actions-right { display:flex !important; gap:8px !important; align-items:center !important; }

/* Advanced filters: switch to white panel with black text to ensure contrast */
.advanced-filters.expanded, #advanced-filters.expanded, .advanced-filters.open, #advanced-filters.open {
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  box-shadow: 0 14px 36px rgba(6,12,34,0.06) !important;
}

/* Checkbox labels inside the advanced filters: dark and bold */
.advanced-filters .checkbox-group label, #advanced-filters .checkbox-group label { color: #0b1220 !important; font-weight:700 !important; }

/* Advanced-grid responsive: 3/2/1 columns (keeps consistent with above) */
.advanced-filters .advanced-grid, #advanced-filters .advanced-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
@media (max-width: 1200px) { .advanced-filters .advanced-grid, #advanced-filters .advanced-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) { .advanced-filters .advanced-grid, #advanced-filters .advanced-grid { grid-template-columns: 1fr !important; } }

/* Keep expand/collapse animation but ensure visibility toggles use classes */
.advanced-filters { transition: max-height 360ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease, transform 240ms ease !important; }
.advanced-filters.collapsed { max-height: 0 !important; opacity: 0 !important; transform: translateY(-6px) !important; overflow: hidden !important; padding: 0 !important; }

/* Defensive reset for inputs that might inherit transparent background */
.hero-search input, .hero-search select, #buscador-pro input, #buscador-pro select { background: #fff !important; }

/* End form tuning block */

/* ====================== FINAL: CENTER HERO & BUSCADOR ON MOBILE ====================== */
/* Highest-specificity final override to ensure the hero copy and buscador are centered on small screens.
   This prevents earlier/min-width rules from causing off-center alignment. */

@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr !important; align-items: center !important; text-align: center !important; justify-items: center !important; }
  .hero-copy { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; text-align: center !important; max-width: 640px !important; }
  .hero-ctas { display: flex !important; gap: 10px !important; justify-content: center !important; align-items: center !important; }
  .hero-search, #buscador-pro.buscador-pro { width: calc(100% - 32px) !important; max-width: 720px !important; min-width: 0 !important; margin: 12px auto 0 auto !important; }
  .hero-search .search-grid-basic, #buscador-pro .search-grid-basic { grid-template-columns: 1fr !important; gap: 10px !important; }
  .hero-search .search-actions { flex-direction: column !important; gap: 10px !important; align-items: center !important; justify-content: center !important; }
  .hero-search .search-actions .search-actions-right { display:flex !important; gap:8px !important; }
  #ordenarPor { margin: 8px auto 0 auto !important; display: inline-block !important; }
  #advanced-filters, .advanced-filters { width: calc(100% - 32px) !important; margin: 12px auto 0 auto !important; }
}

/* Tighten for phones */
@media (max-width: 768px) {
  .hero-search, #buscador-pro { width: calc(100% - 24px) !important; margin: 8px 12px !important; }
  .hero-copy { padding: 4px 12px !important; }
  .hero-ctas { gap: 8px !important; }
}

/* End final alignment overrides */

/* ====================== FINAL: CENTERING + SAFE WIDTHS (LAST-CHANCE OVERRIDE) ====================== */
/* Placement at EOF to ensure it wins; undo any earlier calc() widths that can overflow; make hero-search and advanced filters centered and justify-self centered for grid containers. */

@media (max-width: 992px) {
  .hero-inner { justify-items: center !important; align-items: center !important; }
  .hero-search, #buscador-pro.buscador-pro, #advanced-filters, .advanced-filters {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    justify-self: center !important;
    align-self: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Prevent the shadow from visually overflowing and causing horizontal scroll */
  .hero-search, #buscador-pro.buscador-pro { overflow: visible !important; }
}

/* Extra small screens: respect viewport and center payload */
@media (max-width: 480px) {
  .hero-search, #buscador-pro.buscador-pro, #advanced-filters, .advanced-filters {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Defensive: neutralize earlier transforms/positioning that could still offset the search card */
.hero-search[style], #buscador-pro[style] { transform: none !important; left: auto !important; right: auto !important; }

/* End final centering/safe widths override */

/* ====================== UX Fixes: Advanced Filters modal + hero expansion + buttons ====================== */
/* Desktop: keep a capped height with internal scrolling; Mobile: expand in-flow without internal scrolling */
@media (min-width: 993px) {
  /* Desktop: allow panel to scroll internally but limit to reasonable viewport */
  #advanced-filters.expanded, .advanced-filters.expanded,
  #buscador-pro .advanced-filters.expanded, #buscador-pro .advanced-filters.open {
    max-height: 480px !important; /* smaller to avoid large modal height */
    overflow: auto !important;
    padding: 12px 14px !important;
    box-shadow: 0 16px 42px rgba(6,12,34,0.12) !important;
  }
}

@media (max-width: 992px) {
  /* Mobile/tablet: show panel inline and let hero grow naturally (no overlay) */
  #advanced-filters.expanded, .advanced-filters.expanded,
  #buscador-pro .advanced-filters.expanded, #buscador-pro .advanced-filters.open,
  #advanced-filters.open, .advanced-filters.open {
    max-height: none !important; /* allow full expansion */
    overflow: visible !important; /* let hero grow */
    padding: 12px 10px !important;
    margin-top: 10px !important;
    box-shadow: 0 6px 18px rgba(6,12,34,0.06) !important; /* subtle shadow on mobile */
    background: #ffffff !important; /* keep contrast and avoid dark overlay */
    color: #0b1220 !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-radius: 12px !important;
    position: static !important;
    display: block !important;
  }

  /* Also ensure the hero grows to contain the expanded filters */
  .hero, .hero.hero-new { overflow: visible !important; }
  .hero-inner { align-items: start !important; }
}

/* Style the filter buttons for visual clarity */
#btn-advanced, #btn-limpiar {
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

#btn-advanced { background: transparent !important; color: var(--tn-indigo) !important; }
#btn-advanced[aria-expanded="true"] { background: linear-gradient(120deg,#1f4f7a,#b13333) !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(6,12,34,0.08) !important; }
#btn-advanced::after { content: '▼'; display:inline-block; margin-left: 8px; transform: translateY(-1px); font-size: 0.85rem; }
#btn-advanced[aria-expanded="true"]::after { content: '▲'; }

#btn-limpiar::before { content: '✖'; margin-right: 8px; opacity: 0.9; }

#btn-limpiar { background: transparent !important; color: var(--tn-title) !important; }
#btn-limpiar:hover { background: rgba(15,23,42,0.02) !important; }

/* Clean up duplicates and neutralize older advanced rules (safety overrides) */
/* Ensure no older rule sets advanced-filters to position absolute or negative margins on small screens */
.advanced-filters, #advanced-filters { position: static !important; margin-top: 12px !important; left: auto !important; right: auto !important; transform: none !important; }

/* Defensive: ensure no weird min-width on advanced grid items cause mobile overflow */
#advanced-filters .advanced-grid > div, .advanced-filters .advanced-grid > div { min-width: 0 !important; }

/* End UX fixes block */

/* Ensure results sits after hero and never overlaps advanced-filters on small screens */
.results-wrapper { z-index: 0; position: relative; }
@media (max-width: 992px) {
  .results-wrapper { padding-top: 18px !important; }
}

/* Small shadow and compact padding for advanced filters (final) */
.advanced-filters.expanded, #advanced-filters.expanded { padding: 10px 10px !important; box-shadow: 0 8px 20px rgba(6,12,34,0.06) !important; }

/* Extra defensive rules to ensure advanced filters in-flow on small screens */
@media (max-width: 992px) {
  .advanced-filters.expanded, #advanced-filters.expanded {
    position: static !important;
    z-index: 1 !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
  }
  /* ensure results are pushed down enough to fully clear the filters */
  #results { margin-top: 18px !important; }
}



/* ====================== RESTORE STATE1 FILTER & BUSCADOR STYLES ====================== */
/* Goal: contrast against hero gradient, stronger depth, taller inputs, clear grouping
   for advanced filters (two/three column layout). Scoped to IDs/classes used
   in the project so JS hooks remain unchanged. */

/* Primary buscador card (white, elevated) */
#buscador-pro.buscador-pro,
.hero-search {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  color: var(--color-text);
  border-radius: 12px;
  padding: 22px 24px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 18px 40px rgba(6,12,34,0.10);
  max-width: 420px;
  width: 100%;
}

/* Grid inside buscador: prefer two columns for most inputs on desktop */
#buscador-pro .search-grid-basic,
.hero-search .search-grid-basic {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 18px 20px;
  margin-bottom: 14px;
}

/* Inputs & selects: taller, more padding, clear border */
#buscador-pro input, #buscador-pro select, .hero-search input, .hero-search select {
  height: 48px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  background: #fff !important;
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
}

/* Primary button (BUSCAR) — rectangular, brand color */
#buscador-pro .btn-primary, .hero-search .btn-primary {
  background: linear-gradient(120deg, var(--color-primary) 0%, #7a222a 100%) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(17,40,60,0.12) !important;
}

/* Secondary button (LIMPIAR) — ghost, rectangular */
#buscador-pro .btn-ghost, .hero-search .btn-ghost {
  background: transparent !important;
  color: var(--color-text) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Advanced filters card when expanded: white card, clear separation */
#advanced-filters.advanced-filters.expanded,
#advanced-filters.expanded {
  display: block !important;
  position: static !important;
  width: 100% !important;
  margin-top: 14px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: 0 12px 30px rgba(6,12,34,0.08) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
  overflow: visible !important;
}

/* Advanced grid layout: two/three columns depending on width */
#advanced-filters .advanced-grid, #advanced-filters.expanded .advanced-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px 16px !important;
}

@media (min-width: 1200px) {
  #advanced-filters .advanced-grid, #advanced-filters.expanded .advanced-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

/* Filter groups: visual separation and heading */
.filter-group { padding: 10px 0; border-top: 1px solid rgba(15,23,42,0.04); margin-top: 12px; }
.filter-group:first-of-type { border-top: none; margin-top: 0; }
.filter-group h4 { font-size: 0.85rem; font-weight: 800; color: var(--color-text); margin-bottom: 8px; }

/* Checkbox groups: aligned and spaced */
.checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox-row { display:flex; gap: 12px; flex-wrap:wrap; align-items:center; }
.checkbox-row label { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--color-text); }
.checkbox-row input[type="checkbox"] { width:18px; height:18px; accent-color: var(--color-accent); }

/* Small helpers to align labels and inputs */
.advanced-grid .field { display:flex; flex-direction:column; gap:6px; }
.advanced-grid label { font-size:0.82rem; color:var(--color-text-muted); font-weight:700; }

@media (max-width: 768px) {
  #buscador-pro .search-grid-basic { grid-template-columns: 1fr !important; }
  #advanced-filters .advanced-grid { grid-template-columns: 1fr !important; }
}

/* End RESTORE STATE1 styles */

/* ====================== FINAL OVERRIDES: BUSCADOR WIDTH & RESULTS GRID ====================== */
/* Purpose: authoritative final overrides to ensure the buscador is 360-500px wide,
   hero grid uses the requested template, advanced filters match buscador width,
   and results grid is fixed to 3/2/1 columns. Placed at EOF to win cascade. */

/* Hero grid: left flexible column, fixed-ish right column that won't expand with 1fr */
.hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 500px) !important;
  gap: 24px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Buscador sizing: keep as a card, wider but constrained */
.hero-search,
#buscador-pro.buscador-pro {
  width: 100% !important;
  max-width: 500px !important;
  min-width: 360px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: static !important;
}

/* Advanced filters must match buscador width so they appear as one card */
#advanced-filters,
.advanced-filters,
#buscador-pro .advanced-filters {
  max-width: 500px !important;
  width: 100% !important;
  position: static !important;
  overflow: visible !important;
}

#advanced-filters.expanded,
.advanced-filters.open,
#buscador-pro .advanced-filters.open {
  display: block !important;
  max-width: 500px !important;
  width: 100% !important;
  margin-top: 12px !important;
  overflow: visible !important; /* no internal scroll */
}

/* Results grid: 3 / 2 / 1 columns as requested */
.results-wrapper { padding: 3rem 0 !important; }
.results-header { max-width: 1024px; margin: 0 auto 1.5rem auto; text-align: left; }
.results {
  max-width: 1200px;
  margin: 0 auto;
  display: grid !important;
  /* Desktop: 4 columns, Tablet: 2, Mobile: 1 */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 992px) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .results { grid-template-columns: 1fr !important; }
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-search, #buscador-pro.buscador-pro { max-width: none !important; min-width: 0 !important; }
}

/* Defensive: ensure no accidental absolute positioning inside advanced filters */
#advanced-filters [style*="position:"] { position: static !important; }

/* End final overrides */

/* ====================== FORCE GRID + CARD TUNING (FINAL) ====================== */
/* Highest-specificity enforcement to ensure .results renders as a grid on large screens
   and as a single column on small screens. Also constrain card image sizing and ensure
   cards don't become visually enormous. Placed at EOF to win cascade. */

/* Strong selector targeting the results container by id+class */
#results.results, .results {
  display: grid !important;
  grid-auto-flow: row dense !important;
  gap: 24px !important;
  align-items: start !important;
  justify-items: stretch !important;
}

/* Desktop: 4 columns */
@media (min-width: 1200px) {
  #results.results, .results {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
  #results.results, .results { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  #results.results, .results { grid-template-columns: 1fr !important; }
}

/* Ensure each card fills its grid cell and has consistent box sizing */
.results > .card, #results > .card {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Constrain card image height so cards aren't huge when image is very tall */
.results .card-image, #results .card-image {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* Make card-body occupy remaining space but cap large vertical stretching */
.results .card-body, #results .card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}

/* Pagination area: keep visible and centered */
.pagination { display:flex !important; gap:8px !important; justify-content:center !important; margin-top:18px !important; }

/* ====================== ADVANCED FILTERS: DARK TRANSLUCENT + ANIMATION ====================== */
/* Make the advanced filters appear as a dark translucent panel with a smooth open/close animation.
   Inputs remain white for readability. Uses max-height transition for a smooth reveal while keeping
   the element in-flow (display:block when expanded). */

.advanced-filters {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition: max-height 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, transform 260ms ease;
  background: transparent !important;
  padding: 0 !important;
}

.advanced-filters.expanded, #advanced-filters.expanded {
  display: block !important;
  max-height: 1600px !important; /* large enough for many filters */
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin-top: 12px !important;
  padding: 14px !important;
  background: rgba(0,0,0,0.36) !important; /* dark translucent panel */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(6,12,34,0.18) !important;
}

/* Make advanced filter headings and labels readable on dark panel */
.advanced-filters.expanded .advanced-title,
.advanced-filters.expanded label,
#advanced-filters.expanded .advanced-title,
#advanced-filters.expanded label {
  color: #ffffff !important;
}

/* Keep inputs white inside the dark panel for contrast */
.advanced-filters.expanded input,
.advanced-filters.expanded select,
#advanced-filters.expanded input,
#advanced-filters.expanded select {
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Small touch: animate the advanced grid gap for pleasant motion */
.advanced-filters .advanced-grid { transition: gap 260ms ease !important; }

/* End enforced grid + filters tuning */

/* ====================== FINAL: FORCE DARK BUSCADOR + ADVANCED FILTERS OVERRIDE ====================== */
/* Highly specific final overrides to ensure the buscador is dark/translucent
   and the advanced filters use the smooth expand animation and remain readable.
   Targets both `.open` and `.expanded` variants and matches selectors that
   previously used `#buscador-pro` so specificity wins even if earlier rules
   used ID+class combos. */

#buscador-pro.buscador-pro, #buscador-pro .buscador-pro, .hero-search, .hero .hero-search {
  background: rgba(0,0,0,0.34) !important;
  color: #ffffff !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Keep form controls readable: inputs remain white with dark text */
#buscador-pro input, #buscador-pro select, #buscador-pro textarea,
.hero-search input, .hero-search select, .hero-search textarea {
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Ensure the ordenar select inside the buscador is readable on dark background */
#buscador-pro #ordenarPor, .hero-search #ordenarPor { background: #fff !important; color: #0b1220 !important; }

/* Target both .open and .expanded states, and prefer the variant inside #buscador-pro
   so we override earlier ID+class rules that set white backgrounds. Limit height on desktop
   to avoid stretching the hero excessively; allow internal scroll only if content exceeds cap. */
#buscador-pro .advanced-filters.open,
#buscador-pro .advanced-filters.expanded,
#advanced-filters.open,
#advanced-filters.expanded,
.advanced-filters.open,
.advanced-filters.expanded {
  display: block !important;
  background: rgba(0,0,0,0.36) !important;
  color: #ffffff !important;
  padding: 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(6,12,34,0.18) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease, transform 300ms ease !important;
  overflow: auto !important; /* enable internal scroll only when content exceeds cap */
  max-height: 720px !important; /* prevents extreme vertical expansion on desktop */
}

/* On smaller screens allow the panel to be taller but still animated smoothly */
@media (max-width: 1199px) {
  #buscador-pro .advanced-filters.open,
  #buscador-pro .advanced-filters.expanded,
  .advanced-filters.open,
  .advanced-filters.expanded { max-height: 1100px !important; }
}

/* Ensure labels/headers inside the dark panel are readable */
#buscador-pro .advanced-filters.open .advanced-title,
#buscador-pro .advanced-filters.expanded .advanced-title,
.advanced-filters.open .advanced-title,
.advanced-filters.expanded .advanced-title,
#advanced-filters.open .advanced-title,
#advanced-filters.expanded .advanced-title {
  color: #ffffff !important;
}

/* Inputs inside the advanced panel should remain light for contrast */
#buscador-pro .advanced-filters.open input,
#buscador-pro .advanced-filters.open select,
#buscador-pro .advanced-filters.expanded input,
#buscador-pro .advanced-filters.expanded select,
.advanced-filters.open input,
.advanced-filters.expanded input,
.advanced-filters.open select,
.advanced-filters.expanded select {
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Make sure the JS-added .collapsed class hides the panel while preserving transitions */
.advanced-filters.collapsed, #advanced-filters.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Preserve the smooth motion when toggling the class from collapsed -> expanded */
.advanced-filters, #advanced-filters { transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease, transform 300ms ease; }

/* Ensure no earlier rule forces a white card inside #buscador-pro advanced area */
#buscador-pro .advanced-filters.open .advanced-grid,
#buscador-pro .advanced-filters.expanded .advanced-grid {
  gap: 12px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* End final dark buscador + advanced filters overrides */

/* ====================== EXTRA: WIDEN BUSCADOR + FILTERS (FINAL) ====================== */
/* Ensure buscador and advanced filters are wider so they don't force vertical overflow.
   This block overrides remaining narrower constraints and adjusts hero grid to allocate
   sufficient space to the right column. */

/* Make buscador and hero-search substantially wider (desktop up to 720px) */
#buscador-pro.buscador-pro, #buscador-pro, .hero-search, .hero .hero-search {
  max-width: 720px !important;
  min-width: 420px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Advanced filters match buscador width */
#advanced-filters, .advanced-filters, #buscador-pro .advanced-filters {
  max-width: 720px !important;
  min-width: 420px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* When expanded/open, keep the wider cap and center under hero-right column */
#advanced-filters.expanded, .advanced-filters.expanded, #buscador-pro .advanced-filters.expanded {
  max-width: 720px !important;
  min-width: 420px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Allocate more space to hero right column so buscador isn't cramped */
.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 720px) !important;
  max-width: 1280px !important;
}

/* Force label/input contrast inside buscador (dark background -> white labels; inputs white) */
#buscador-pro label, #buscador-pro .advanced-title { color: #ffffff !important; }
#buscador-pro input, #buscador-pro select, #buscador-pro textarea { background: #ffffff !important; color: #0b1220 !important; }

/* Defensive: neutralize any earlier rules that set .hero-search label to white-on-white */
.hero-search label { color: #ffffff !important; }

/* On narrower screens reduce min-width so layout stacks naturally */
@media (max-width: 992px) {
  #buscador-pro.buscador-pro, #advanced-filters, .advanced-filters, .hero-search { min-width: 0 !important; max-width: 100% !important; }
  .hero-inner { grid-template-columns: 1fr !important; }
}

/* End widen buscador + filters block */

/* ====================== TWEAK: Advanced filters thicker + hero text centering ====================== */
/* Make the advanced filters a bit "gordito" (more padding) and allow larger max-height so
   'condiciones comerciales' and related groups don't overflow too soon. Also ensure labels
   inside are black for readability, and vertically center the left hero copy with CTAs. */

/* Increase padding and allow taller panel (but still capped) */
.advanced-filters.expanded, #advanced-filters.expanded, .advanced-filters.open, #advanced-filters.open {
  padding: 20px !important;
  gap: 10px !important;
  max-height: 900px !important; /* slightly more generous */
  line-height: 1.25 !important;
}

/* Force labels and small text inside advanced filters to be dark for readability */
.advanced-filters.expanded label,
.advanced-filters.expanded .advanced-title,
#advanced-filters.expanded label,
#advanced-filters.expanded .advanced-title,
.advanced-filters.open label,
.advanced-filters.open .advanced-title {
  color: #0b1220 !important;
}

/* Ensure checkbox/row labels are readable and not white on white */
.advanced-filters.expanded .checkbox-row label,
#advanced-filters.expanded .checkbox-row label,
.advanced-filters.open .checkbox-row label {
  color: #0b1220 !important;
  font-weight: 700 !important;
}

/* Make inputs inside advanced filters slightly taller for better tap targets */
.advanced-filters.expanded input,
.advanced-filters.expanded select,
#advanced-filters.expanded input,
#advanced-filters.expanded select {
  height: 44px !important;
  padding: 8px 10px !important;
}

/* Center left hero copy vertically to align with CTAs */
.hero-copy { display:flex !important; flex-direction:column !important; justify-content:center !important; }
.hero-ctas { align-self:center !important; }

@media (max-width: 992px) {
  /* On smaller screens revert hero-copy centering to natural stacking */
  .hero-copy { justify-content: flex-start !important; align-items: center !important; text-align: center !important; }
  .hero-ctas { align-self: center !important; }
}

/* Defensive: ensure no lingering white-on-white for advanced filter headings */
.advanced-filters .advanced-title, #advanced-filters .advanced-title { color: #0b1220 !important; }

/* End tweaks */

/* ====================== DESTACADOS SYSTEM ====================== */

/* Badge de destacado en cards */
.destacado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.destacado-badge--normal {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}

.destacado-badge--super {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
  box-shadow: 0 2px 12px rgba(139,92,246,0.4);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(139,92,246,0.4); }
  50% { box-shadow: 0 4px 20px rgba(139,92,246,0.6); }
}

/* Card destacado styling */
.card--destacado {
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245,158,11,0.15);
}

.card--super-destacado {
  border: 2px solid #8b5cf6;
  box-shadow: 0 4px 24px rgba(139,92,246,0.2);
  position: relative;
}

.card--super-destacado::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7, #8b5cf6);
  border-radius: inherit;
  z-index: -1;
  animation: border-glow 3s ease infinite;
}

@keyframes border-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Badges container en cards */
.card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Plan badges */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
}

.plan-badge--free { background: #f3f4f6; color: #6b7280; }
.plan-badge--basico { background: #dcfce7; color: #16a34a; }
.plan-badge--pro { background: #fef3c7; color: #d97706; }
.plan-badge--premium { background: #ede9fe; color: #7c3aed; }

/* Estado de destacado en panel usuario */
.destacado-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fefce8;
  border-radius: 8px;
  font-size: 0.85rem;
}

.destacado-activo {
  font-weight: 600;
  color: #ca8a04;
}

.destacado-activo--super {
  color: #7c3aed;
}

/* Botones de destacar */
.destacar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.btn--gold {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #1a1a1a;
  border: none;
  font-weight: 600;
}

.btn--gold:hover {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

/* Features en plan progress */
.plan-features-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8rem;
}

.feature-on {
  color: #16a34a;
}

.feature-off {
  color: #9ca3af;
  text-decoration: line-through;
}

/* Plan header en user.js */
.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.plan-price {
  font-size: 0.85rem;
  color: var(--tn-muted);
}

/* Radio cards para modal de destacar */
.radio-card {
  display: block;
  cursor: pointer;
}

.radio-card input[type="radio"] {
  display: none;
}

.radio-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 2px solid var(--tn-border);
  border-radius: 12px;
  transition: all 0.2s;
}

.radio-card input:checked + .radio-card-content {
  border-color: var(--tn-red);
  background: rgba(167,52,57,0.05);
}

.radio-card-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.radio-card-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.radio-card-desc {
  font-size: 0.75rem;
  color: var(--tn-muted);
}

.radio-card-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tn-red);
}

.radio-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.radio-card--sm .radio-card-content {
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 14px;
}

/* Destacar tipo selector */
.destacar-tipo-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

/* Duracion options */
.duracion-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

/* Info box */
.destacar-info {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
}

.destacar-info p {
  margin: 4px 0;
}

/* Text utilities */
.text-warning {
  color: #f59e0b;
}

.text-muted {
  color: var(--tn-muted);
}

/* Animation for slide in notifications */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Modal styles */
.modal--destacar .modal-content {
  max-width: 480px;
}

/* ====================== END DESTACADOS SYSTEM ====================== */