/* ============================================================
   vm_styles.css v3 — Estilos unificados VecinosMerida.com
   Fusion de home-new.css + vm_styles.css anterior
   ============================================================ */

/* ── VARIABLES GLOBALES ───────────────────────────────────── */
:root {
  /* Paleta verde */
  --green-900: #06451f;
  --green-800: #0b5a2a;
  --green-700: #0f7a37;
  --green-600: #13a34a;
  --green-100: #e9f7ee;
  --green-50:  #f4fbf6;

  /* Acento (terracota) */
  --acento:    #c0522a;
  --acento-d:  #9e3f1e;
  --rojo:      #c0522a;

  /* Semanticos */
  --orange:  #f59e0b;
  --blue:    #2563eb;
  --purple:  #7c3aed;
  --red:     #ef4444;

  /* Fondos */
  --bg:          #f5f5f0;
  --crema:       #f5f5f0;
  --crema-d:     #ebebeb;
  --blanco:      #ffffff;
  --white:       #ffffff;
  --neutral-100: #ffffff;

  /* Texto */
  --text:   #101827;
  --carbon: #1a1a2e;
  --muted:  #667085;
  --gris:   #6b7280;

  /* Bordes */
  --line:  #e5e7eb;
  --borde: #e5e5e5;

  /* Sombras */
  --shadow:    0 12px 30px rgba(16,24,40,.07);
  --shadow-sm: 0 2px 16px rgba(0,0,0,.07);
  --shadow-c:  rgba(20,20,43,.08);

  /* Layout */
  --radius:            18px;
  --radius-sm:         12px;
  --max:               1180px;
  --container-width:   1200px;
  --container-padding: 0 40px;
  --header-h:          84px;

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Botones de contacto — colores de marca */
  --wa:      #25D366;
  --wa-dark: #1ebe5d;
  --wa-d:    #1ebe5d;
  --fb:      #1877F2;
  --fb-dark: #1464d8;
  /* Llamar usa --acento (#c0522a) — naranja del logo VM */
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }

/* ── BASE ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* ── CONTENEDORES ─────────────────────────────────────────── */
.vm-container, .container, .section-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
}
@media (max-width: 768px) {
  .vm-container, .container, .section-inner { padding: 0 16px; }
}

/* ── BOTONES GLOBALES ─────────────────────────────────────── */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wa);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.btn-wa:hover { background: var(--wa-dark); }

.btn-fb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fb);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.btn-fb:hover { background: var(--fb-dark); }

.btn-acento {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.btn-acento:hover { background: var(--acento-d); }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  height: 72px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 210px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 850;
  color: #d4601a;
  letter-spacing: -.03em;
  font-size: 20px;
}
.brand-icon {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: var(--green-100);
  border: 1px solid #caead6;
  border-radius: 12px;
  font-size: 21px;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: -3px;
}
.search { position: relative; }
.search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0 46px 0 44px;
  outline: none;
}
.search span {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.location, .publish, .menu {
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 16px;
  white-space: nowrap;
  font-weight: 700;
}
.publish {
  background: var(--green-700);
  color: white;
  border-color: var(--green-700);
  box-shadow: 0 8px 18px rgba(15,122,55,.2);
}
.menu { width: 44px; padding: 0; color: var(--green-800); }

/* ── HERO (index.php) ─────────────────────────────────────── */
.hero {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 22px 34px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 36px;
  align-items: center;
}
.eyebrow {
  color: var(--green-700);
  font-weight: 850;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 12px;
}
h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.065em;
  margin: 0 0 18px;
}
h1 span { color: var(--green-700); }
.hero-text {
  color: #344054;
  max-width: 650px;
  font-size: 18px;
  margin: 0 0 26px;
}
.hero-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 24px;
}
.hero-actions .search input { height: 58px; border-radius: 16px; box-shadow: var(--shadow); }
.hero-actions .publish { height: 58px; border-radius: 16px; padding: 0 22px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 650px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.stat strong { display: block; font-size: 19px; letter-spacing: -.03em; }
.stat small { color: var(--muted); font-weight: 650; }
.hero-card {
  min-height: 335px;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(145deg, #dff4e6, #fff);
  border: 1px solid #d7eadc;
  box-shadow: var(--shadow);
}
.skyline {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.72)),
    url('https://images.unsplash.com/photo-1585464231875-d9ef1f5ad396?auto=format&fit=crop&w=1200&q=80') center/cover;
  opacity: .98;
}
.hero-card-content {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(16,24,40,.08);
}
.mini-card strong { display: block; }
.mini-card small { color: var(--muted); }

/* ── STATS PANEL (hero index) ─────────────────────────────── */
.stats-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: linear-gradient(150deg,#0b5a2a 0%,#0f7a37 55%,#13a34a 100%);
  border-color: #0a4f25;
}
.stats-title span { color: #bff0cf; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.stats-title h2 { margin: 10px 0 8px; font-size: 30px; line-height: 1.05; letter-spacing: -.045em; color: #ffffff; }
.stats-title p { margin: 0; font-size: 16px; color: rgba(255,255,255,.82); }
.stats-large { max-width: none; grid-template-columns: repeat(2, 1fr); }
.stats-large .stat { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); min-height: 98px; align-items: center; }
.stats-large .stat strong { font-size: 28px; }
.stats-panel .stat strong { color: #ffffff; }
.stats-panel .stat small { color: rgba(255,255,255,.82); }
.stats-panel .stat span, .stats-panel .stat .vm-icon { color: #ffffff; }

/* ── SECCIONES ─────────────────────────────────────────────── */
.section { max-width: var(--max); margin: 0 auto; padding: 34px 22px; }
.section.tight { padding-top: 24px; }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.section h2 { font-size: 25px; letter-spacing: -.04em; margin: 0; }
.section-desc { color: var(--muted); margin: 6px 0 0; max-width: 760px; }
.view-all { color: var(--green-700); font-weight: 850; white-space: nowrap; font-size: 14px; }

.chips, .actions-grid, .cards-grid, .job-grid, .category-grid, .colony-grid { display: grid; gap: 14px; }
.chips { grid-template-columns: auto repeat(6, minmax(0, auto)); align-items: center; margin-bottom: 18px; }
.chip-label { font-weight: 850; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 11px 18px; text-align: center; font-weight: 750; color: #344054; }
.chip.primary { color: var(--green-800); background: var(--green-50); border-color: #cdebd7; }

/* ── GRIDS ────────────────────────────────────────────────── */
.actions-grid { grid-template-columns: repeat(4, 1fr); }
.cards-grid { grid-template-columns: repeat(4, 1fr); }
.cards-grid.five { grid-template-columns: repeat(5, 1fr); }
.job-grid { grid-template-columns: repeat(4, 1fr); }
.category-grid { grid-template-columns: repeat(5, 1fr); }
.colony-grid { grid-template-columns: repeat(6, 1fr); }

.action-card {
  display: flex; align-items: center; gap: 15px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  box-shadow: 0 6px 18px rgba(16,24,40,.035);
}
.icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; font-size: 24px; background: var(--green-100); color: var(--green-800); }
.action-card strong { display: block; margin-bottom: 3px; }
.action-card small { color: var(--muted); }

/* ── TARJETAS ─────────────────────────────────────────────── */
.card, .job, .category, .ad-box, .editorial, .faq, .newsletter {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.card, .job, .category { box-shadow: 0 4px 14px rgba(16,24,40,.025); }
.card-img { height: 145px; position: relative; overflow: hidden; background: #d9e4dc; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; top: 10px; left: 10px; color: #fff; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.tag.green  { background: var(--green-700); }
.tag.orange { background: var(--orange); }
.tag.blue   { background: var(--blue); }
.tag.purple { background: var(--purple); }
.tag.red    { background: var(--red); }
.card-body { padding: 15px; }
.card-body h3, .job h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.025em; line-height: 1.2; }
.card-body p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.price { color: var(--green-700); font-weight: 900; }
.rating { color: #d97706; font-weight: 900; }
.ad-box {
  display: grid; min-height: 90px; place-items: center; color: var(--green-700);
  background: repeating-linear-gradient(45deg,#f8fff9,#f8fff9 10px,#f2fbf4 10px,#f2fbf4 20px);
  border: 1px dashed #93d2aa; font-weight: 850;
}
.ad-wide { margin-top: 18px; }

/* ── PROMO BANNER ─────────────────────────────────────────── */
.promo-banner { display: grid; overflow: hidden; background: #17182c; color: #fff; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }
.promo-wide { grid-template-columns: .95fr 1.05fr; margin-top: 18px; min-height: 260px; }
.promo-small { min-height: 100%; }
.promo-image {
  min-height: 260px;
  background: linear-gradient(90deg,rgba(23,24,44,.08),rgba(23,24,44,.26)),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1000&q=80') center/cover;
}
.promo-content { padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.promo-content span { color: #d26538; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: 13px; margin-bottom: 14px; }
.promo-content h3 { margin: 0 0 12px; font-size: clamp(24px,3vw,42px); line-height: 1.05; letter-spacing: -.045em; }
.promo-content p { margin: 0 0 20px; color: rgba(255,255,255,.72); font-size: 17px; }
.promo-content strong { color: #e36b36; font-weight: 900; margin-top: auto; }
.promo-small .promo-content { padding: 20px; }
.promo-small .promo-content h3 { font-size: 22px; }
.promo-small .promo-content p { font-size: 14px; }
@media (max-width: 720px) { .promo-wide { grid-template-columns: 1fr; } .promo-image { min-height: 180px; } }

/* ── EMPLEOS ──────────────────────────────────────────────── */
.job { padding: 16px; min-height: 154px; display: flex; flex-direction: column; justify-content: space-between; }
.job-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.job p { margin: 0; color: var(--muted); font-size: 14px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: var(--green-100); color: var(--green-800); font-size: 12px; font-weight: 850; margin-top: 10px; }
.business-row { display: grid; grid-template-columns: repeat(4, 1fr) .9fr; gap: 14px; }
.news-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.news-list .card-img { height: 190px; }

/* ── CATEGORIAS ───────────────────────────────────────────── */
.category { padding: 16px; display: flex; gap: 12px; align-items: center; }
.category .icon { width: 42px; height: 42px; font-size: 20px; }
.category strong { display: block; }
.category small { color: var(--muted); }
.colony-card .card-img { height: 105px; }
.colony-card .card-body { padding: 12px; }

/* ── EDITORIAL / FAQ / NEWSLETTER ─────────────────────────── */
.editorial-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.editorial, .faq { padding: 24px; }
.editorial h2, .faq h2 { margin-bottom: 10px; }
.editorial p { color: #475467; margin: 0 0 14px; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.check { background: var(--green-50); border: 1px solid #d7eedf; padding: 11px; border-radius: 12px; color: var(--green-900); font-weight: 750; font-size: 14px; }
details { border-top: 1px solid var(--line); padding: 15px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 850; }
details p { color: var(--muted); margin: 10px 0 0; }
.newsletter {
  background: linear-gradient(120deg, var(--green-900), var(--green-700));
  color: white; padding: 26px;
  display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 16px; align-items: center;
}
.newsletter h2 { margin: 0 0 4px; }
.newsletter p { margin: 0; color: rgba(255,255,255,.78); }
.newsletter input { width: 100%; height: 48px; border: 0; border-radius: 14px; padding: 0 16px; }
.newsletter button { height: 48px; border: 0; border-radius: 14px; padding: 0 18px; background: #fff; color: var(--green-800); font-weight: 900; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background: #0b1020; color: #d6dae4; margin-top: 34px; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 34px 22px; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; }
footer h3, footer h4 { color: white; margin: 0 0 12px; }
footer p, footer a { color: #aab2c5; font-size: 14px; display: block; margin: 0 0 8px; }

/* ── ICONOS SVG ───────────────────────────────────────────── */
.vm-icon { width: 24px; height: 24px; stroke: currentColor; color: currentColor; fill: none; display: block; }
.icon .vm-icon, .action-card .icon .vm-icon { width: 26px; height: 26px; }
.category .icon .vm-icon { width: 22px; height: 22px; }
.brand-icon .vm-icon { width: 22px; height: 22px; }
.brand-icon-logo { background: #fff; border-color: #ecdfd2; }
.brand-icon-logo img { width: 32px; height: 32px; object-fit: contain; display: block; }
.tag .vm-icon, .badge .vm-icon { width: 14px; height: 14px; }

/* ── OFERTAS (carrusel) ───────────────────────────────────── */
.offers-carousel { overflow: hidden; }
.offers-track { display: flex; gap: 18px; transition: transform .35s ease; will-change: transform; }
.offers-track .offer-card { flex: 0 0 calc(50% - 9px); }
.offer-card {
  display: grid; grid-template-columns: .8fr 1.2fr;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
  text-decoration: none; color: var(--text);
  transition: box-shadow .2s, transform .2s; min-height: 178px;
}
.offer-card:hover { box-shadow: 0 16px 38px rgba(16,24,40,.13); transform: translateY(-2px); }
.offer-img { background: #eef2ee center/cover no-repeat; min-height: 178px; }
.offer-body { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.offer-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #d26538; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: 11px; }
.offer-eyebrow .vm-icon { width: 13px; height: 13px; }
.offer-card h3 { margin: 0; font-size: clamp(15px,1.3vw,18px); line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.offer-body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.offer-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; border: 1px solid var(--line); border-radius: 11px; padding: 7px 14px; font-weight: 800; font-size: 13px; }
.offer-arrow { color: #d26538; }
.offer-card:hover .offer-cta { border-color: var(--green-600); }
.offers-nav { display: flex; gap: 8px; flex-shrink: 0; }
.offers-nav button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 17px; line-height: 1; color: var(--text); display: grid; place-items: center; transition: border-color .2s, opacity .2s; }
.offers-nav button:hover:not(:disabled) { border-color: var(--green-600); }
.offers-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) { .offers-track .offer-card { flex: 0 0 100%; } }
@media (max-width: 520px) { .offer-card { grid-template-columns: 1fr; } .offer-img { min-height: 160px; } }

/* ── COLONIAS ─────────────────────────────────────────────── */
.colonias-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 980px) { .colonias-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .colonias-grid { grid-template-columns: 1fr; } }
.colonia-card { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; text-decoration: none; color: var(--text); box-shadow: 0 4px 14px rgba(16,24,40,.025); transition: box-shadow .2s, transform .2s; }
.colonia-card:hover { box-shadow: 0 14px 34px rgba(16,24,40,.10); transform: translateY(-2px); }
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cc-head h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
.cc-badge { font-size: 10.5px; font-weight: 900; letter-spacing: .03em; white-space: nowrap; margin-top: 3px; padding: 3px 9px; border-radius: 999px; background: #eef2ee; color: #475467; }
.niv-muyalta .cc-badge { background: #dcfce7; color: #15803d; }
.niv-alta    .cc-badge { background: #ecfccb; color: #4d7c0f; }
.niv-media   .cc-badge { background: #fef3c7; color: #b45309; }
.niv-baja    .cc-badge { background: #fee2e2; color: #b91c1c; }
.niv-muyalta .cc-bar span { background: #16a34a; }
.niv-alta    .cc-bar span { background: #84cc16; }
.niv-media   .cc-bar span { background: #f59e0b; }
.niv-baja    .cc-bar span { background: #ef4444; }
.cc-total { font-size: 14px; color: var(--muted); }
.cc-total strong { color: var(--text); font-size: 16px; font-weight: 800; }
.cc-bar { height: 7px; border-radius: 999px; background: #e8eee9; overflow: hidden; margin-top: 2px; }
.cc-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--green-600),var(--green-700)); }
.cc-act { text-align: right; font-size: 12px; font-weight: 800; color: var(--muted); margin-top: -3px; }
.cc-rubros { border-top: 1px solid var(--line); padding-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.cc-rubros-label { font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); }
.cc-rub-list { display: flex; flex-direction: column; gap: 9px; }
.cc-rub { display: flex; align-items: center; gap: 9px; }
.cc-rub .vm-icon { width: 19px; height: 19px; color: var(--green-700); flex-shrink: 0; }
.cc-rub-n { font-weight: 800; font-size: 15px; color: var(--text); min-width: 32px; }
.cc-rub-l { font-size: 13px; color: var(--muted); line-height: 1.2; }
.cc-chart { display: flex; flex-direction: column; gap: 10px; }
.cc-ch { display: flex; flex-direction: column; }
.cc-ch-top { display: flex; align-items: center; gap: 7px; }
.cc-ch-top .vm-icon { width: 17px; height: 17px; color: var(--cc,var(--green-700)); flex-shrink: 0; }
.cc-ch-l { font-size: 12.5px; color: var(--text); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ch-n { font-size: 13px; font-weight: 800; color: var(--text); }
.cc-ch-bar { height: 8px; border-radius: 999px; background: #e8eee9; overflow: hidden; margin-top: 4px; }
.cc-ch-bar span { display: block; height: 100%; border-radius: 999px; background: var(--cc,var(--green-700)); }
.cc-radar { width: 100%; max-width: 190px; height: auto; display: block; margin: 2px auto 0; }
.cc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 8px; }
.cc-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.cc-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.cc-leg b { color: var(--text); font-weight: 800; }
.cc-bars { display: flex; flex-direction: column; gap: 11px; }
.cc-b-row { display: flex; flex-direction: column; gap: 5px; }
.cc-b-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cc-b-name { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.2; }
.cc-b-val { font-size: 13px; color: var(--text); font-weight: 800; flex-shrink: 0; }
.cc-b-track { height: 8px; border-radius: 999px; background: #eef2ee; overflow: hidden; }
.cc-b-fill { height: 100%; border-radius: 999px; background: var(--cc,#0f7a37); }
.cc-link { margin-top: auto; padding-top: 8px; color: var(--green-700); font-weight: 800; font-size: 13.5px; }
.colonia-card:hover .cc-link { text-decoration: underline; }

/* ── DESPLEGABLE UBICACION ────────────────────────────────── */
.location-wrap { position: relative; }
.location-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 290px; max-height: 62vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(16,24,40,.16); padding: 8px; display: none; z-index: 200; }
.location-menu.open { display: block; }
.location-menu-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px 6px; }
.location-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.location-menu a:hover { background: var(--green-50); color: var(--green-800); }
.location-menu a small { color: var(--muted); font-weight: 700; font-size: 12px; }
.location-menu-all { color: var(--green-700)!important; font-weight: 800!important; justify-content: center!important; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }

/* ── AD SLOT ──────────────────────────────────────────────── */
.ad-slot { max-width: var(--max); margin: 18px auto; padding: 0 22px; text-align: center; min-height: 90px; }
.ad-slot ins { display: block; }

/* ── PAGINA DE DETALLE ────────────────────────────────────── */
.detail { max-width: var(--max); margin: 0 auto; padding: 26px 22px 10px; }
.detail-bc { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.detail-bc a { color: var(--green-700); font-weight: 700; }
.detail-bc span { color: var(--text); }
.detail-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: start; }
.detail-photo { padding: 0; }
.detail-photo > img { width: 100%; border-radius: 18px; display: block; object-fit: cover; max-height: 480px; box-shadow: var(--shadow); }
.detail-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.detail-thumbs img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; cursor: pointer; border: 2px solid var(--line); }
.detail-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--green-800); background: var(--green-50); border: 1px solid #cdebd7; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 13px; margin-bottom: 14px; }
.detail-cat .vm-icon { width: 18px; height: 18px; }
.detail-content h1 { font-size: clamp(28px,4vw,46px); letter-spacing: -.04em; line-height: 1.04; margin: 0 0 14px; }
.detail-desc { color: #344054; font-size: 17px; line-height: 1.6; margin: 14px 0 18px; white-space: pre-line; }
.detail-meta { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 800; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 14px; }
.cbtn:hover { border-color: var(--green-600); }
.cbtn.wa      { background: var(--wa);     color: #fff; border-color: var(--wa);     }
.cbtn.wa:hover{ background: var(--wa-dark); border-color: var(--wa-dark); }
.cbtn.fb      { background: var(--fb);     color: #fff; border-color: var(--fb);     }
.cbtn.fb:hover{ background: var(--fb-dark); border-color: var(--fb-dark); }
.cbtn.primary { background: var(--acento); color: #fff; border-color: var(--acento); }
.cbtn.primary:hover { background: var(--acento-d); border-color: var(--acento-d); }
.cbtn .vm-icon { width: 18px; height: 18px; }
.rate { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.rate-stars { display: inline-flex; gap: 1px; cursor: pointer; }
.rate-stars span { font-size: 24px; color: #dcdcdc; line-height: 1; transition: color .1s; }
.rate-stars span.on { color: #f0a500; }
.rate-info { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .detail-hero { grid-template-columns: 1fr; gap: 22px; }
  .detail-photo > img { max-height: 340px; }
}

/* ── EMPLEO FICHA ─────────────────────────────────────────── */
.empleo-tipo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.empleo-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.empleo-badge.oferta   { background: #e8f5e9; color: #0f7a37; }
.empleo-badge.busqueda { background: #fff3cd; color: #856404; }
.empleo-empresa { font-size: 15px; font-weight: 700; color: #475467; }
.detail-photo-ph { width: 100%; min-height: 340px; max-height: 480px; border-radius: 18px; display: grid; place-items: center; box-shadow: var(--shadow); }
.detail-photo-ph .vm-icon-xl { width: 120px; height: 120px; color: #fff; opacity: .92; }
.card-img-ph { position: absolute; inset: 0; display: grid; place-items: center; background: #d9e4dc; }
.card-img-ph .vm-icon { width: 46px; height: 46px; color: #0f7a37; opacity: .6; }
@media (max-width: 860px) { .detail-photo-ph { min-height: 240px; } }

/* ── MASCOTA FICHA ────────────────────────────────────────── */
.detail-cat.mascota-cat-perdida     { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.detail-cat.mascota-cat-encontrada  { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.detail-cat.mascota-cat-adopcion    { background: #f3e8ff; color: #9333ea; border-color: #e9d5ff; }
.detail-cat.mascota-cat-rescate     { background: #ffedd5; color: #ea580c; border-color: #fed7aa; }
.detail-cat.mascota-cat-ayuda_medica { background: #e0f2fe; color: #0284c7; border-color: #bae6fd; }

/* ── VM HERO (componente unificado) ───────────────────────── */
.vm-hero { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.vm-hero-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 52px 22px 40px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
}
.vm-hero--solo { grid-template-columns: 1fr; max-width: 720px; }
.vm-hero-inner:has(.stats-panel) { grid-template-columns: 1.03fr .97fr; }
.vm-hero-bc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #667085; margin-bottom: 16px; flex-wrap: wrap; }
.vm-hero-bc a { color: #667085; }
.vm-hero-bc a:hover { color: #0f7a37; }
.vm-hero-eyebrow { display:flex; align-items:center; gap:8px; color: #0f7a37; font-weight: 850; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.vm-hero-eyebrow .vm-icon { width:18px; height:18px; flex-shrink:0; stroke-width:2; }
.vm-hero-inner h1 { font-size: clamp(34px,4.5vw,56px); line-height: .98; letter-spacing: -.06em; margin: 0 0 18px; color: var(--text,#101827); }
.vm-hero-inner h1 span { color: #0f7a37; }
.vm-hero-desc { color: #344054; font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0; }
.vm-hero-extra { margin-top: 20px; }
.vm-hero-stats { margin-top: 20px; }
.vm-hero-feat { position: relative; border-radius: 24px; overflow: hidden; min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.vm-hero-feat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0b5a2a; cursor: zoom-in; }
.vm-hero-feat-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(6,30,14,.92) 0%,rgba(6,30,14,.45) 55%,rgba(6,30,14,.18) 100%); }
.vm-hero-feat-body { position: relative; z-index: 2; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.vm-hero-feat-label { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #bff0cf; }
.vm-hero-feat-name { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0; }
.vm-hero-feat-desc { font-size: 13.5px; color: rgba(255,255,255,.82); margin: 0; line-height: 1.5; }
.vm-hero-feat-btn { display: inline-flex; align-items: center; gap: 8px; background: #0b5a2a; color: #fff; font-weight: 800; font-size: 14px; padding: 12px 20px; border-radius: 12px; text-decoration: none; align-self: flex-start; margin-top: 4px; transition: background .15s; }
.vm-hero-feat-btn:hover { background: #094a22; }
.vm-lb-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.6); border: none; color: #fff; font-size: 18px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }
dialog.vm-lb { padding: 0; border: none; border-radius: 16px; background: #000; max-width: min(90vw,900px); max-height: 90vh; position: relative; }
dialog.vm-lb::backdrop { background: rgba(0,0,0,.88); }
dialog.vm-lb img { display: block; max-width: 100%; max-height: 90vh; border-radius: 16px; object-fit: contain; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
.mobile-bottom { display: none; }

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto auto; height: auto; padding: 12px 16px; }
  .nav .search { grid-column: 1 / -1; order: 3; }
  .location { display: none; }
  .brand small { display: none; }
  .hero-inner, .editorial-wrap { grid-template-columns: 1fr; }
  .hero-card { min-height: 270px; }
  .stats, .actions-grid, .cards-grid, .cards-grid.five, .job-grid, .business-row, .news-list, .category-grid, .colony-grid { grid-template-columns: repeat(2, 1fr); }
  .chips { display: flex; overflow: auto; padding-bottom: 4px; }
  .chip-label { min-width: max-content; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .vm-hero-inner { grid-template-columns: 1fr; padding: 32px 16px 28px; }
  .vm-hero-feat { min-height: 320px; }
}

@media (max-width: 620px) {
  body { padding-bottom: 72px; }
  .nav { grid-template-columns: 1fr auto auto; }
  .publish { padding: 0 14px; }
  .publish span.label { display: none; }
  .hero-inner { padding: 28px 16px 22px; }
  h1 { font-size: 39px; }
  .hero-text { font-size: 16px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .publish { display: none; }
  .hero-card { min-height: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 24px 16px; }
  .section-header { align-items: start; }
  .actions-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid, .cards-grid.five, .job-grid, .business-row, .news-list, .category-grid, .colony-grid { grid-template-columns: 1fr; }
  .check-list, .newsletter, .footer-inner { grid-template-columns: 1fr; }
  .newsletter { padding: 22px; }
  footer { padding-bottom: 16px; }
  .mobile-bottom {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: 68px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;
  }
  .mobile-bottom a { font-size: 11px; color: var(--muted); font-weight: 750; }
  .mobile-bottom b { display: block; font-size: 22px; line-height: 1; color: var(--green-700); }
  .mobile-bottom .plus b { width: 48px; height: 48px; margin: -18px auto 0; display: grid; place-items: center; background: var(--green-700); color: white; border-radius: 50%; box-shadow: 0 10px 22px rgba(15,122,55,.32); }
}

/* ── Buscador en hero (categorias_index + categoria) ── */
.ci-search-form  { margin-top: 22px; width: 100%; max-width: 420px; }
.ci-search-wrap  { display:flex; align-items:center; background:#fff; border:1.5px solid var(--borde); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(20,20,43,.06); transition:border-color .18s,box-shadow .18s; }
.ci-search-wrap:focus-within { border-color:var(--acento); box-shadow:0 0 0 3px rgba(192,82,42,.12); }
.ci-search-input { flex:1; border:none; outline:none; padding:13px 16px; font-size:15px; background:transparent; color:var(--carbon); font-family:var(--font-body); }
.ci-search-input::placeholder { color:#aaa; }
.ci-search-btn   { display:flex; align-items:center; justify-content:center; padding:0 18px; height:50px; background:var(--acento); color:#fff; border:none; cursor:pointer; transition:background .18s; flex-shrink:0; }
.ci-search-btn:hover { background:var(--acento-d); }

/* ── Resultados de búsqueda compartidos ── */
.ci-res-header  { margin-bottom: 28px; }
.ci-res-title   { font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--carbon); }
.ci-res-count   { font-size:.85rem; color:var(--gris); margin-top:4px; }
.ci-res-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.ci-res-card    { display:flex; gap:14px; padding:16px; background:#fff; border:1.5px solid var(--borde); border-radius:12px; text-decoration:none; color:var(--carbon); align-items:flex-start; transition:border-color .18s,box-shadow .18s; }
.ci-res-card:hover { border-color:var(--acento); box-shadow:0 4px 16px rgba(20,20,43,.08); }
.ci-res-img     { width:62px; height:62px; object-fit:cover; border-radius:8px; flex-shrink:0; background:var(--crema); }
.ci-res-img-ph  { width:62px; height:62px; border-radius:8px; flex-shrink:0; background:var(--crema); display:flex; align-items:center; justify-content:center; font-size:26px; }
.ci-res-body    { flex:1; min-width:0; }
.ci-res-nombre  { font-weight:800; font-size:.95rem; line-height:1.3; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-res-cat     { font-size:.72rem; font-weight:700; color:var(--acento); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.ci-res-desc    { font-size:.82rem; color:var(--gris); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ci-res-empty   { text-align:center; padding:60px 0; color:var(--gris); }
.ci-res-empty strong { display:block; font-size:1.1rem; color:var(--carbon); margin-bottom:8px; }
.ci-res-vercats { display:inline-block; margin-top:20px; color:var(--acento); font-weight:700; font-size:.9rem; }
@media (max-width:600px) {
  .ci-search-form { max-width:100%; }
  .ci-res-grid    { grid-template-columns:1fr; }
}