/* Verificadas — identidad corporativa (CLAUDE.md §10): navy + verde acento. Manrope. */
:root {
  --brand-primary: #0B1F3F;
  --brand-accent: #0B7A55;
  --brand-bg: #ffffff;
  --brand-fg: #111827;
  --brand-muted: #6b7280;
  --brand-border: #e5e7eb;
  --brand-radius: 6px;
  --brand-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--brand-font);
  margin: 0;
  color: var(--brand-fg);
  background: var(--brand-bg);
  line-height: 1.5;
  font-size: 16px;
}
.meta-switch {
  background: #f3f4f6;
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid var(--brand-border);
}
.meta-switch a { color: var(--brand-primary); text-decoration: none; margin: 0 6px; }
.meta-switch a:hover { color: var(--brand-accent); text-decoration: underline; }
header.brand-header {
  padding: 16px 24px;
  border-bottom: 2px solid var(--brand-primary);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* La marca dejó de ser `<h1>` (un solo h1 por página). El aspecto no cambia: mismo tamaño,
   peso y color que antes. Se conserva la regla de `h1` por si queda alguna caché servida. */
header.brand-header h1,
header.brand-header .brand-name {
  margin: 0; color: var(--brand-primary); font-weight: 700; font-size: 24px;
  text-decoration: none; line-height: 1.2;
}
header.brand-header .brand-name:hover { color: var(--brand-accent); }
header.brand-header .tagline { color: var(--brand-muted); font-size: 14px; }
/* Móvil: la tagline debajo, no compitiendo al lado (hallazgo #9 del informe visual). */
@media (max-width: 560px) {
  header.brand-header { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
  header.brand-header .brand-name { font-size: 20px; }
  header.brand-header .tagline { font-size: 12px; }
}
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* Un `.container` dentro de otro NO vuelve a aplicar el margen lateral: el layout ya envuelve
   el contenido en `<main class="container">`, y las 16 secciones de la home repiten la clase
   por claridad del handlebars. El resultado eran 48px de padding por lado en móvil (24+24):
   el contenido usaba 294px de los 390px del viewport, un 14% de ancho tirado en las 3 marcas.
   Se neutraliza sólo lo HORIZONTAL y el max-width: el padding vertical se conserva, porque en
   Guía (32px arriba/abajo) es parte del ritmo editorial de la marca. */
.container .container { max-width: none; padding-left: 0; padding-right: 0; }
.ficha-header {
  background: #f9fafb; padding: 24px; border-radius: var(--brand-radius);
  border-left: 4px solid var(--brand-accent);
}
.ficha-header h1 { margin-top: 0; color: var(--brand-primary); font-size: 28px; }
.ficha-header .verified-badge {
  display: inline-block; background: var(--brand-accent); color: #fff;
  padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
/* Desborde horizontal en móvil (P0 de los 3 informes visuales): en CSS Grid los items
   tienen `min-width:auto`, así que una URL sin espacios no puede encogerse y empuja toda la
   fila fuera del viewport — se cortaban la dirección Y la web en el borde derecho. La fija
   son las dos piezas juntas: `minmax(0,1fr)` para que la columna PUEDA encogerse, y
   `overflow-wrap:anywhere` para que la URL tenga dónde partirse. */
.ficha-header dl {
  display: grid; grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
  gap: 8px 16px; margin: 16px 0 0;
}
.ficha-header dt { color: var(--brand-muted); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ficha-header dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Solo los enlaces de los DATOS, no los del CTA: `.ficha-header a` (0,1,1) ganaba por
   especificidad a `.btn-primary` (0,1,0) y pintaba el texto "Llamar" en navy sobre fondo
   navy — el botón principal de la ficha, invisible. Acotar el selector es la fija que no
   necesita `!important` ni añadir peso artificial. */
.ficha-header dl a,
.ficha-header .disclaimer a { color: var(--brand-primary); }
.ficha-cta { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  background: var(--brand-primary); color: #fff; padding: 10px 20px;
  border: 0; border-radius: var(--brand-radius); font-weight: 600;
  text-decoration: none; cursor: pointer; font-size: 14px;
}
.btn-secondary {
  background: #fff; color: var(--brand-primary); padding: 10px 20px;
  border: 1px solid var(--brand-primary); border-radius: var(--brand-radius);
  text-decoration: none; font-weight: 500; font-size: 14px;
}
.disclaimer {
  background: #fffbeb; border: 1px solid #f59e0b; padding: 12px 16px;
  border-radius: var(--brand-radius); margin: 16px 0; font-size: 14px; color: #92400e;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: #fff; border: 1px solid var(--brand-border); border-radius: var(--brand-radius);
  padding: 16px; text-decoration: none; color: inherit;
}
.card:hover { border-color: var(--brand-primary); box-shadow: 0 2px 8px rgba(11,31,63,0.08); }
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--brand-primary); }
.card .meta { color: var(--brand-muted); font-size: 13px; }
.crumbs { font-size: 13px; color: var(--brand-muted); margin-bottom: 16px; }
.crumbs a { color: var(--brand-primary); text-decoration: none; }
.pagination { margin: 24px 0; display: flex; gap: 8px; justify-content: center; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1px solid var(--brand-border); border-radius: 4px;
  color: var(--brand-primary); text-decoration: none; font-size: 14px;
}
.pagination .current { background: var(--brand-primary); color: #fff; }
.review { border-bottom: 1px solid var(--brand-border); padding: 12px 0; }
.review .rating { color: #f59e0b; font-weight: 600; }
.review .author { color: var(--brand-muted); font-size: 13px; }
footer { background: #f9fafb; padding: 24px; text-align: center; font-size: 13px; color: var(--brand-muted); margin-top: 40px; }
/* Sin emojis decorativos (CLAUDE.md §0.5 — Verificadas). */

/* ───────── P1 SSR — home rico (regla §0.9 claims honestos, placeholders cualitativos) ───────── */

.hero {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(11,31,63,0.04), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border-bottom: 1px solid var(--brand-border);
  padding: 56px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Los hijos de un grid tienen `min-width: auto` por defecto: no bajan del ancho mínimo de su
   contenido, aunque el track sea más estrecho. En móvil, `.stats` (2 columnas fijas, sin
   breakpoint propio) imponía 379px dentro de un track de 294px y la home de Verificadas
   scrolleaba en horizontal 37px — medido a 390px, y sólo aquí: Catálogo y Guía salían a 0.
   Es la primera impresión de la marca más seria de las tres, en el dispositivo por el que
   entra la mayoría del tráfico. */
.hero-grid > * { min-width: 0; }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.hero h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--brand-fg); }
.hero h1 em { font-style: normal; color: var(--brand-primary); }
.hero .lede { color: var(--brand-muted); font-size: 18px; max-width: 60ch; line-height: 1.5; margin: 0 0 28px; }
.hero .eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-muted);
  font-weight: 600; margin: 0 0 14px;
}
.hero .eyebrow .dot { color: var(--brand-accent); }

.search-box {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 4px;
  box-shadow: 0 8px 24px -16px rgba(11,31,63,0.18);
}
.search-field { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.search-field + .search-field { border-left: 1px solid var(--brand-border); }
.search-field label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
  font-weight: 600;
}
.search-field input,
.search-field select {
  border: none;
  outline: none;
  padding: 4px 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--brand-fg);
  background: transparent;
}
.search-field input::placeholder,
.search-field select::placeholder { color: #b6bdcb; }
.search-box .btn-primary { margin: 4px; padding: 12px 22px; }
@media (max-width: 700px) {
  .search-box { grid-template-columns: 1fr; }
  .search-field + .search-field { border-left: 0; border-top: 1px solid var(--brand-border); }
}

.trust-row {
  margin-top: 22px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--brand-muted);
}
.trust-row .row { display: inline-flex; align-items: center; gap: 8px; }

.stats {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 8px 28px -20px rgba(11,31,63,0.18);
}
.stat {
  padding: 18px 18px;
  border-right: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-last-child(-n+2) { border-bottom: none; }
.stat .n { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-primary); }
.stat .l { font-size: 12px; color: var(--brand-muted); font-weight: 500; margin-top: 4px; }

/* Categorías y ciudades — grids reutilizables */
.section { padding: 56px 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); font-weight: 600; margin: 0 0 6px; }
.section-head h2 { margin: 0; font-size: 28px; color: var(--brand-fg); letter-spacing: -0.01em; }
.section-head a { color: var(--brand-primary); font-weight: 500; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color .15s, transform .15s;
}
.cat-card:hover { border-color: var(--brand-primary); }
.cat-card .l { font-weight: 600; font-size: 14px; }

.cities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  font-size: 14px;
}
@media (max-width: 1000px) { .cities-grid { grid-template-columns: repeat(3, 1fr); } }
.city-link {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.city-link:hover { border-color: var(--brand-primary); }

/* Featured listings */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .feat-grid { grid-template-columns: 1fr; } }

/* CTA banner — Verificadas */
.cta-banner {
  background: var(--brand-primary);
  color: #fff;
  border-radius: 12px;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 32px;
}
@media (max-width: 1000px) { .cta-banner { grid-template-columns: 1fr; padding: 32px; } }
.cta-banner h2 { color: #fff; margin: 0 0 10px; font-size: 28px; letter-spacing: -0.01em; }
.cta-banner p { color: #c8d2e1; margin: 0 0 18px; max-width: 50ch; }
.cta-banner .btn-primary { background: #fff; color: var(--brand-primary); }
.cta-banner .btn-primary:hover { background: #e9eef7; }
.cta-banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); background: transparent; }
.cta-banner .btn-ghost:hover { border-color: #fff; }
.cta-pricing {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 20px;
}
.cta-pricing .price { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.cta-pricing .price small { font-size: 14px; color: #c8d2e1; font-weight: 400; }
.cta-pricing .alt { font-size: 12px; color: #8898b0; margin-top: 4px; }
.cta-pricing ul { list-style: none; padding: 12px 0 0; margin: 0; font-size: 13px; color: #c8d2e1; display: flex; flex-direction: column; gap: 6px; }
.cta-pricing ul li::before { content: "✓ "; color: var(--brand-accent); font-weight: 700; }

/* Empty states — CTA al siguiente paso (regla §3.4 zero-support) */
.empty-state {
  margin-top: 16px;
  padding: 32px;
  border: 1px dashed var(--brand-border);
  border-radius: var(--brand-radius);
  background: #f9fafb;
  text-align: center;
}
.empty-state h2, .empty-state h3 { margin: 0 0 8px; color: var(--brand-fg); font-size: 18px; }
.empty-state p { margin: 0 0 16px; color: var(--brand-muted); }
.empty-state .actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ───────── Cabecera de listado ─────────
   `.list-head` se usaba en la plantilla y NO estaba definida en ninguna parte: el h1, el
   contador y el selector caían apilados a la izquierda con el espaciado por defecto del
   navegador (hallazgo #6 del informe visual). Se alinea con `.section-head`, que es el
   patrón que ya usa la home del mismo sistema. */
.list-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.list-head h1 { margin: 0; font-size: 28px; color: var(--brand-fg); letter-spacing: -0.01em; }
.list-count { color: var(--brand-muted); margin: 6px 0 0; font-size: 14px; }

/* ───────── Páginas programáticas y enlazado interno ───────── */
.angle-criterio {
  margin: 0 0 24px; padding: 12px 16px; font-size: 14px; color: var(--brand-muted);
  background: #f9fafb; border-left: 3px solid var(--brand-accent);
  border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
}
.angle-nav { margin: 24px 0; font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.angle-nav-title { color: var(--brand-muted); font-weight: 600; }
.angle-nav a { color: var(--brand-primary); }
.ranking-link { margin: 20px 0; font-size: 14px; }
.ver-todos { margin: 20px 0 0; font-size: 14px; }
.ver-todos a, .ranking-link a { color: var(--brand-primary); font-weight: 600; }

.related-block { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--brand-border); }
.related-block h2 { font-size: 18px; margin: 0 0 12px; color: var(--brand-fg); }
.related-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px;
  font-size: 14px;
}
.related-list a { color: var(--brand-primary); text-decoration: none; }
.related-list a:hover { text-decoration: underline; }
.rel-count { color: var(--brand-muted); font-size: 12px; }

.city-cats { margin-bottom: 40px; }
.city-cats h2 { font-size: 20px; margin: 0 0 16px; color: var(--brand-fg); }

.footer-links { margin-bottom: 16px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.footer-links-title { font-weight: 600; color: var(--brand-fg); }
.footer-links a { color: var(--brand-muted); }

/* ───────── Bloques nuevos de la ficha ───────── */
.ficha-descripcion, .ficha-servicios, .ficha-galeria, .ficha-resenas, .ficha-relacionados, .ficha-articulos {
  margin-top: 32px;
}
.ficha-descripcion h2, .ficha-servicios h2, .ficha-galeria h2,
.ficha-resenas h2, .ficha-relacionados h2, .ficha-articulos h2 {
  font-size: 20px; color: var(--brand-fg); margin: 0 0 12px;
}
.ficha-descripcion p { margin: 0 0 12px; max-width: 70ch; }
.servicios-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.servicios-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius);
}
.s-precio { color: var(--brand-muted); font-size: 14px; white-space: nowrap; }
/* Galería SECUNDARIA: nunca por encima del bloque de contacto (regla §0.3). `width`/`height`
   en el `<img>` reservan el hueco para que la carga no mueva el layout. */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.galeria-grid img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--brand-radius); border: 1px solid var(--brand-border); background: #f3f4f6;
}
.galeria-nota { color: var(--brand-muted); font-size: 12px; margin: 8px 0 0; }

/* Red de seguridad global de desborde: cualquier texto largo que llegue en el futuro
   (nombres de negocio, URLs, emails) parte en vez de empujar la página. */
img, video { max-width: 100%; height: auto; }
.container, main { overflow-wrap: break-word; }/* ===== Empresas Verificadas — corporate trust ===== */

:root {
  --v-navy: #0b1f3f;
  --v-navy-2: #16335f;
  --v-navy-3: #1f4684;
  --v-ink: #0f172a;
  --v-mute: #5b6678;
  --v-mute-2: #8a93a3;
  --v-line: #e3e7ee;
  --v-line-2: #eef1f6;
  --v-bg: #f6f8fb;
  --v-paper: #ffffff;
  --v-verified: #0b7a55;
  --v-verified-2: #0f9d6b;
  --v-verified-bg: #e6f4ec;
  --v-gold: #b3870e;
  --v-gold-bg: #fbf4dc;
  --v-danger: #b3261e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  color: var(--v-ink);
  background: var(--v-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ----- Meta switcher (cross-brand) ----- */
.meta-switch {
  background: #0f1419;
  color: #d7dde6;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.meta-switch .ms-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.meta-switch .ms-label { color: #7a8595; }
.meta-switch a { color: #d7dde6; text-decoration: none; padding: 2px 4px; }
.meta-switch a.active { color: #fff; border-bottom: 1px solid #cfa84e; }
.meta-switch a:hover { color: #fff; }
.meta-switch .right { margin-left: auto; color: #7a8595; }

/* ----- Top nav ----- */
.top {
  background: var(--v-paper);
  border-bottom: 1px solid var(--v-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.top-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--v-navy);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--v-navy);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.brand-mark::after {
  content: "✓";
  font-size: 14px;
  line-height: 1;
}
.brand small {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-mute);
  font-weight: 600;
  display: block;
  margin-top: -2px;
}
.nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--v-ink); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--v-navy); }
.nav a.current { color: var(--v-navy); border-bottom: 2px solid var(--v-navy); }
.top .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
  line-height: 1;
}
.btn-primary { background: var(--v-navy); color: #fff; }
.btn-primary:hover { background: var(--v-navy-2); }
.btn-ghost { background: transparent; color: var(--v-ink); border-color: var(--v-line); }
.btn-ghost:hover { border-color: var(--v-ink); }
.btn-link { color: var(--v-navy); text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-link:hover { text-decoration: underline; }

/* ----- Layout helpers ----- */
.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-tight { padding: 32px 0; }

/* ----- Typography ----- */
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; color: var(--v-ink); margin: 0; }
h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
h4 { font-size: 16px; line-height: 1.3; font-weight: 600; }
p { margin: 0; color: var(--v-ink); }
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-mute);
  font-weight: 600;
  margin-bottom: 16px;
}
.eyebrow .dot { color: var(--v-verified-2); }
.lede { font-size: 18px; color: var(--v-mute); max-width: 60ch; line-height: 1.55; }

/* ----- Cards ----- */
.card {
  background: var(--v-paper);
  border: 1px solid var(--v-line);
  border-radius: 8px;
}

/* ----- Badges ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-verified { background: var(--v-verified-bg); color: var(--v-verified); }
.badge-premium  { background: var(--v-gold-bg); color: var(--v-gold); }
.badge-basic    { background: #eef1f6; color: var(--v-mute); }
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.shield {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--v-verified);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.shield::after { content: "✓"; }

/* ----- Footer ----- */
.footer {
  background: var(--v-navy);
  color: #c8d2e1;
  padding: 64px 0 32px;
  font-size: 14px;
  margin-top: 96px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer h5 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  font-weight: 600;
}
.footer a { color: #c8d2e1; text-decoration: none; display: block; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer .legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: #8898b0;
  font-size: 13px;
}
.footer .brand-foot { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; margin-bottom: 16px; font-size: 17px; }
.footer .brand-foot .brand-mark { background: #fff; color: var(--v-navy); }
.footer .brand-foot .brand-mark::after { content: "✓"; color: var(--v-navy); }
.footer p { color: #8898b0; max-width: 32ch; font-size: 13px; line-height: 1.55; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ----- Utility ----- */
.row { display: flex; gap: 16px; align-items: center; }
.row-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.mute { color: var(--v-mute); }
.divider { height: 1px; background: var(--v-line); }
.kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--v-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--v-paper);
  color: var(--v-mute);
}

/* ----- Forms ----- */
.input, .select, textarea.input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--v-line);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: var(--v-ink);
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--v-navy);
  box-shadow: 0 0 0 3px rgba(11, 31, 63, 0.08);
}
.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--v-ink);
  margin-bottom: 6px;
  display: block;
}
.help { font-size: 12px; color: var(--v-mute); margin-top: 4px; }

/* ----- Móvil ----- */
@media (max-width: 820px) {
  .top-inner { gap: 14px; padding: 12px 16px; }
  .nav { display: none; }
  .brand small { display: none; }
  .top .right { margin-left: auto; gap: 8px; }
  .top .right .btn-link { display: none; }
  .meta-switch .ms-inner { flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 8px 16px; }
  .meta-switch .ms-label { display: none; }
  .meta-switch a { white-space: nowrap; }
}
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   HOME VERIFICADAS — port del diseño aprobado (2026-09-07).
   Define TODO lo que usa pages/verificadas/home.hbs. Va al final del
   fichero: gana sobre legacy y sobre el bloque aprobado donde coincida.
   Las clases de la home van renombradas (vcat, vcity, vcard, vsec, wrap)
   para no colisionar con el CSS legacy que sirven las páginas compartidas.
   ===================================================================== */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.vsec { padding: 56px 0; }

/* --- Hero --- */
.hero {
  background:
    radial-gradient(1000px 420px at 85% -10%, #eef3fb 0%, rgba(238, 243, 251, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--v-bg) 100%);
  border-bottom: 1px solid var(--v-line);
}
.hero-grid {
  max-width: 1400px; margin: 0 auto; padding: 64px 32px 72px;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.02em; color: var(--v-ink); font-weight: 800; margin: 0 0 18px; }
.hero h1 em { font-style: normal; background: linear-gradient(rgba(0, 0, 0, 0) 62%, var(--v-gold-bg) 62%); }
.hero .lede { font-size: 17px; line-height: 1.65; color: var(--v-mute); max-width: 56ch; margin: 0; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 22px; }
.trust-row { display: flex; gap: 20px; flex-wrap: wrap; }
.trust-row span { font-size: 13px; font-weight: 600; color: var(--v-mute-2); display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v-verified-2); }

/* --- Panel de verificación --- */
.vpanel { display: grid; gap: 14px; }
.vcard { background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 8px 24px rgba(11, 31, 63, 0.05); }
.vcard h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--v-ink); }
.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--v-ink); }
.check li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--v-verified-bg); }
.check li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 9px; border-right: 2px solid var(--v-verified); border-bottom: 2px solid var(--v-verified); transform: rotate(45deg); }
.levels { border: 1px dashed var(--v-line); border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; }
.levels-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v-mute-2); }
.level-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Cabecera de sección --- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.sec-head h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.01em; color: var(--v-ink); font-weight: 800; }
.sec-head .eyebrow { margin-bottom: 8px; }

/* --- Metodología --- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proc { background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 14px; padding: 20px 22px; }
.proc .num { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--v-verified); margin-bottom: 10px; }
.proc h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--v-ink); }
.proc p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v-mute); }

/* --- Recién verificadas --- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat { display: block; background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.feat:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 31, 63, 0.1); }
.feat .ph { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--v-navy) 0%, var(--v-navy-3) 100%); background-size: cover; background-position: center; position: relative; }
.feat .ph-badge { position: absolute; top: 12px; left: 12px; }
.feat .body { padding: 16px 18px 18px; }
.feat .cat { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v-mute-2); margin-bottom: 6px; }
.feat h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--v-ink); }
.feat .meta { margin: 0; font-size: 13px; color: var(--v-mute); }

/* --- Sectores --- */
.vcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vcat { display: flex; justify-content: space-between; align-items: center; background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 12px; padding: 14px 16px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--v-ink); transition: border-color 0.15s ease; }
.vcat:hover { border-color: var(--v-navy-3); }

/* --- Ciudades --- */
.vcities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.vcity { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 10px; padding: 12px 14px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--v-ink); }
.vcity .arr { color: var(--v-mute-2); font-size: 13px; }
.vcity:hover { border-color: var(--v-navy-3); }

/* --- Banner CTA --- */
.cta-banner { background: linear-gradient(135deg, var(--v-navy) 0%, var(--v-navy-2) 55%, var(--v-navy-3) 100%); color: #fff; overflow: hidden; }
.cta-grid { max-width: 1400px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.cta-copy h2 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; color: #fff; }
.cta-copy p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: #c9d4e6; max-width: 52ch; }
.cta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cta-list li { position: relative; padding-left: 26px; font-size: 14px; color: #e6ecf5; }
.cta-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.cta-list li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 9px; border-right: 2px solid #7ee2b8; border-bottom: 2px solid #7ee2b8; transform: rotate(45deg); }
.cta-pricing { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; padding: 26px 28px; display: grid; gap: 10px; }
.cta-pricing .plan { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #b9c6dc; }
.cta-pricing .price { font-size: 36px; font-weight: 800; line-height: 1; color: #fff; }
.cta-pricing .price span { font-size: 15px; font-weight: 600; color: #b9c6dc; }
.cta-pricing .alt { font-size: 13.5px; color: #c9d4e6; }
.cta-pricing .fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }
.cta-pricing .btn-primary { background: #fff; color: var(--v-navy); }
.btn-block { width: 100%; }

/* --- Responsive de la home --- */
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; padding: 48px 24px 56px; gap: 32px; } }
@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .vcats { grid-template-columns: repeat(2, 1fr); }
  .vcities { grid-template-columns: repeat(3, 1fr); }
  .cta-grid { grid-template-columns: 1fr; padding: 44px 24px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .process { grid-template-columns: 1fr; }
  .vcities { grid-template-columns: repeat(2, 1fr); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vsec { padding: 44px 0; }
}

/* ===== GLUE 2026-09-07 (home por marca + layout nuevo) ===== */
/* El layout verificadas ya NO envuelve {{{body}}} en .container. La home marca todas sus
   secciones top-level con .bleed y gestiona su ancho; las páginas compartidas recuperan aquí
   el contenedor legacy EXACTO (1100px / 24px, valores medidos del CSS antiguo). */
main > :not(.bleed) {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* El partial real de meta-switch no renderiza .ms-inner: el propio nav la sustituye. */
.meta-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 24px;
}
.meta-switch a[aria-current="page"] { color: #fff; border-bottom: 1px solid #cfa84e; }
/* La home termina en el banner navy a sangre completa: sin banda blanca antes del footer. */
.footer { margin-top: 0; }
.footer-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .footer-wrap { padding: 0 20px; } }


/* ── El pie no puede desbordar (2026-09-07) ────────────────────────────────────────────
   `.footer-links` lista las ciudades con fichas. Con 10 ciudades ya no cabían en una línea
   y arrastraban 133 px de scroll lateral a 390 px — medido con `scripts/preview-home.js`,
   que usa 10 ciudades reales. Hoy en producción no se ve porque hay menos, así que es un
   fallo que habría aparecido solo al crecer el catálogo, cuando ya hubiera tráfico. */
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.footer-links > * { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE EMPRESA (2026-09-08) — port del diseño aprobado del 2026-09-07.
   Override de pages/listings-detail.hbs para el tenant verificadas. Todo scoped
   a .vf-ficha: cero impacto en otras páginas. La ficha va con .bleed (el layout
   da 1100px a `main > :not(.bleed)`) y gestiona su ancho con .vf-wrap, igual
   que la home. Sin emojis decorativos (§0.5): iconos SVG inline en la plantilla.
   ═══════════════════════════════════════════════════════════════════════════ */

body:has(.vf-ficha) { background: #f6f8fb; }
body:has(.vf-ficha) header.top { display: none; }
body:has(.vf-ficha) > footer { display: none; }

.vf-ficha { color: #0f172a; font-feature-settings: "ss01", "cv11"; }
.vf-ficha .vf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* Anti-desbordamiento (lección de la home): los hijos de grid nacen con min-width:auto
   y un nombre largo desborda el documento en móvil. */
.vf-ficha .vf-hero-grid > *, .vf-ficha .vf-grid > *, .vf-ficha .vf-nap .item,
.vf-ficha .vf-similar > *, .vf-ficha .vf-side-card, .vf-ficha .vf-cta-card { min-width: 0; }
.vf-ficha h1, .vf-ficha .vf-tagline, .vf-ficha .vf-nap .v,
.vf-ficha .vf-similar h4, .vf-ficha .vf-review b { overflow-wrap: anywhere; }

/* ----- Top nav (mismo chrome aprobado que la home, scoped a la ficha) ----- */
.vf-ficha .v-top { background: #fff; border-bottom: 1px solid #e3e7ee; position: sticky; top: 0; z-index: 50; }
.vf-ficha .v-top-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
.vf-ficha .v-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0b1f3f; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.vf-ficha .v-mark { width: 28px; height: 28px; border-radius: 4px; background: #0b1f3f; display: grid; place-items: center; flex: 0 0 auto; }
.vf-ficha .v-mark::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.vf-ficha .v-brand small { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6678; font-weight: 600; margin-top: -2px; }
.vf-ficha .v-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.vf-ficha .v-nav a { color: #0f172a; text-decoration: none; padding: 6px 0; }
.vf-ficha .v-nav a:hover { color: #0b1f3f; }
.vf-ficha .v-top-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.vf-ficha .v-btn-link { color: #0b1f3f; text-decoration: none; font-weight: 600; font-size: 14px; }
.vf-ficha .v-btn-link:hover { text-decoration: underline; }

/* ----- Migas ----- */
.vf-ficha .crumbs { padding: 16px 0 0; margin: 0; font-size: 13px; color: var(--v-mute); }
.vf-ficha .crumbs a { color: var(--v-mute); text-decoration: none; }
.vf-ficha .crumbs a:hover { color: var(--v-navy); }

/* ----- Hero above-the-fold: info primero, fotos después (§0.3) ----- */
.vf-ficha .vf-hero { background: #fff; border-bottom: 1px solid #e3e7ee; padding: 20px 0 40px; }
.vf-ficha .vf-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
.vf-ficha .vf-hero-info { display: flex; flex-direction: column; gap: 16px; }
.vf-ficha .vf-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-ficha .vf-hero-info h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.05; margin: 0; color: #0f172a; }
.vf-ficha .vf-tagline { color: var(--v-mute); font-size: 16px; line-height: 1.5; max-width: 60ch; margin: 0; }

/* NAP: los 8 elementos del fold viven aquí */
.vf-ficha .vf-nap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 18px 22px; background: #f6f8fb; border: 1px solid #e3e7ee; border-radius: 10px; margin-top: 6px; }
.vf-ficha .vf-nap .item { display: flex; gap: 12px; align-items: start; min-width: 0; }
.vf-ficha .vf-nap .vf-item-wide { grid-column: 1 / -1; }
.vf-ficha .vf-ic { width: 36px; height: 36px; background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: var(--v-navy); }
.vf-ficha .vf-ic svg { width: 16px; height: 16px; }
.vf-ficha .vf-nap .lbl { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-mute); font-weight: 700; margin-bottom: 2px; }
.vf-ficha .vf-nap .v { font-size: 15px; font-weight: 600; color: var(--v-ink); line-height: 1.35; word-break: break-word; }
.vf-ficha .vf-nap .v a { color: var(--v-navy); text-decoration: none; }
.vf-ficha .vf-nap .v a:hover { text-decoration: underline; }
.vf-ficha .vf-nap .sub { display: block; font-weight: 400; font-size: 13px; color: var(--v-mute); margin-top: 2px; }
.vf-ficha .vf-nap .v a[target="_blank"]::after { content: " ↗"; color: var(--v-mute); }

.vf-ficha .cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vf-ficha .cta-row .btn-primary { padding: 14px 26px; font-size: 15px; }
.vf-ficha .cta-row .btn-ghost { padding: 14px 22px; font-size: 15px; }

/* Fotos: secundarias, máx. 4 en mosaico (cap por CSS, sin JS) */
.vf-ficha .vf-photo-col { display: flex; flex-direction: column; gap: 8px; }
.vf-ficha .vf-photos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 360px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #16335f, #0b1f3f); }
.vf-ficha .vf-ph { background-size: cover; background-position: center; }
.vf-ficha .vf-ph--main { grid-row: span 2; }
.vf-ficha .vf-ph:nth-child(n+5) { display: none; }
.vf-ficha .vf-photos--empty::after { content: "✓"; display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .85); font-size: 30px; font-weight: 700; }
.vf-ficha .vf-ph-note { font-size: 12px; color: var(--v-mute); margin: 0; }

/* Banners de estado (seed / reclamación) */
.vf-ficha .vf-banner { background: #fff; border: 1px solid #e3e7ee; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 14px 18px; margin: 16px 0 0; font-size: 14px; color: #2a3142; }
.vf-ficha .vf-banner a { color: var(--v-navy); font-weight: 600; }
.vf-ficha .vf-banner--claim { border-left-color: var(--v-navy); }

/* ----- Grid principal ----- */
.vf-ficha .vf-main { padding: 40px 0 0; }
.vf-ficha .vf-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; }
.vf-ficha .vf-content { min-width: 0; }

/* Pestañas: solo anclas a secciones que existen */
.vf-ficha .vf-tabs { display: flex; gap: 28px; border-bottom: 1px solid #e3e7ee; margin-bottom: 32px; position: sticky; top: 64px; background: #f6f8fb; z-index: 5; flex-wrap: wrap; }
.vf-ficha .vf-tabs a { padding: 14px 0; text-decoration: none; color: var(--v-mute); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vf-ficha .vf-tabs a:hover { color: var(--v-navy); }

.vf-ficha .vf-block { margin-bottom: 48px; scroll-margin-top: 120px; }
.vf-ficha .vf-block h2 { font-size: 24px; margin: 0 0 16px; letter-spacing: -0.01em; color: #0f172a; }
.vf-ficha .vf-block h3 { font-size: 18px; margin: 24px 0 10px; color: #0f172a; }
.vf-ficha .vf-block p { color: #2a3142; line-height: 1.65; font-size: 16px; margin: 0; }
.vf-ficha .vf-block p + p { margin-top: 12px; }

/* Nota editorial (prioridad visual: primer bloque) */
.vf-ficha .vf-article { background: linear-gradient(180deg, #fff, #f6f8fb); border: 1px solid #e3e7ee; border-radius: 12px; padding: 40px 48px; }
.vf-ficha .vf-article .eyebrow { color: var(--v-navy); margin: 0 0 8px; }
.vf-ficha .vf-article h2 { font-size: 26px; margin: 0 0 8px; }
.vf-ficha .vf-author { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--v-mute); margin-bottom: 24px; }
.vf-ficha .vf-author .av { width: 26px; height: 26px; border-radius: 50%; background: var(--v-navy); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.vf-ficha .vf-block p.vf-article-link { margin: 20px 0 0; }
.vf-ficha .vf-article-link a { color: var(--v-navy); font-weight: 600; text-decoration: none; }

/* Estado de verificación (solo claims sostenidos por datos) */
.vf-ficha .vf-verif-panel { background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 24px; }
.vf-ficha .vf-verif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.vf-ficha .vf-verif-item { display: flex; gap: 12px; align-items: start; }
.vf-ficha .shield { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--v-verified); flex: 0 0 auto; }
.vf-ficha .shield::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.vf-ficha .vf-verif-item .shield { margin-top: 1px; }
.vf-ficha .vf-verif-item .lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-mute); font-weight: 600; margin-bottom: 2px; }
.vf-ficha .vf-verif-item .v { font-size: 14px; font-weight: 600; color: var(--v-ink); }

/* Servicios (port del estilo de línea del diseño sobre la clase compartida).
   El li base va a `space-between`: sin esto el ::before del bullet queda como item
   flex suelto y el nombre se centro solo (visto en captura, corregido). */
.vf-ficha .servicios-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.vf-ficha .servicios-list li { border: 0; border-bottom: 1px solid #e3e7ee; border-radius: 0; padding: 12px 0; justify-content: flex-start; gap: 0; }
.vf-ficha .servicios-list li::before { content: "•"; color: var(--v-navy); margin-right: 8px; }
/* `min-width: 0` no es opcional: un hijo flex NO baja de su contenido sin él, así que
   el nombre del servicio empujaba la fila y la ficha desbordaba 14 px a lo ancho en
   móvil (medido: 404 px de scroll en un viewport de 390). El precio lleva
   `white-space: nowrap` a propósito —"desde 2.400 €" partido en dos líneas se lee
   fatal—, así que quien tiene que ceder es el nombre. */
.vf-ficha .servicios-list li span:not(.s-precio) { flex: 1; min-width: 0; }

/* Y a una columna en móvil: dos columnas de servicios con su precio no caben en 390 px,
   y el grid de `1fr 1fr` no se estrechaba solo. */
@media (max-width: 560px) {
  .vf-ficha .servicios-list { grid-template-columns: 1fr; }
}

/* Reseñas */
.vf-ficha .vf-review-list { display: flex; flex-direction: column; gap: 14px; }
.vf-ficha .vf-block p.vf-reviews-note { font-size: 13px; color: var(--v-mute); margin: -6px 0 18px; }
.vf-ficha .vf-review { background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; padding: 16px 18px; }
.vf-ficha .vf-review-head { display: flex; gap: 12px; margin-bottom: 10px; }
.vf-ficha .vf-review-av { width: 40px; height: 40px; border-radius: 50%; background: var(--v-navy); color: #fff; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.vf-ficha .vf-review b { font-size: 14px; color: var(--v-ink); }
.vf-ficha .vf-review-meta { font-size: 12px; color: var(--v-mute); margin-top: 2px; }
.vf-ficha .vf-review p { font-size: 14px; color: var(--v-ink); line-height: 1.6; margin: 0; }

/* Ubicación (sin mapa pintado: no hay coords que pintar) */
.vf-ficha .vf-loc { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 20px; }
.vf-ficha .vf-loc .v { font-size: 15px; font-weight: 600; color: var(--v-ink); }
.vf-ficha .vf-loc .sub { font-size: 13px; color: var(--v-mute); margin-top: 2px; }
.vf-ficha .vf-block p.vf-loc-links { margin: 14px 0 0; font-size: 14px; }
.vf-ficha .vf-loc-links a { color: var(--v-navy); font-weight: 600; text-decoration: none; }

/* Similares */
.vf-ficha .vf-similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vf-ficha .vf-similar a { background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; padding: 18px; text-decoration: none; color: inherit; }
.vf-ficha .vf-similar a:hover { border-color: var(--v-navy); }
.vf-ficha .vf-similar .cat { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-mute); font-weight: 600; margin-bottom: 6px; }
.vf-ficha .vf-similar h4 { font-size: 15px; margin: 0 0 8px; color: #0f172a; }
.vf-ficha .vf-similar .nap { font-size: 12px; color: var(--v-mute); }

/* Sidebar */
.vf-ficha .vf-side { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.vf-ficha .vf-side-card { background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 20px; }
.vf-ficha .vf-side-card h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-mute); font-weight: 600; margin: 0 0 12px; }
.vf-ficha .vf-hours { font-size: 14px; line-height: 1.6; color: var(--v-ink); }

.vf-ficha .vf-verif-card { background: var(--v-verified-bg); border-color: #c4e5d2; }
.vf-ficha .vf-verif-card h4 { color: var(--v-verified); }
.vf-ficha .vf-verif-card .row { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; color: #20502e; }
.vf-ficha .vf-verif-card .shield { width: 18px; height: 18px; }
.vf-ficha .vf-metodologia-link { font-size: 13px; font-weight: 600; color: var(--v-verified); text-decoration: none; display: inline-block; margin-top: 10px; }

.vf-ficha .vf-cta-card { background: var(--v-navy); color: #fff; padding: 20px; border-radius: 10px; }
.vf-ficha .vf-cta-card h3 { color: #fff; font-size: 16px; margin: 0 0 8px; }
.vf-ficha .vf-cta-card p { color: #c8d2e1; font-size: 13px; margin: 0 0 14px; line-height: 1.55; }
.vf-ficha .vf-cta-card .btn-primary { background: #fff; color: var(--v-navy); width: 100%; justify-content: center; }
.vf-ficha .vf-cta-card .btn-primary:hover { background: #eef1f6; }
.vf-ficha .vf-cta-card .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.3); width: 100%; justify-content: center; margin-top: 8px; }
.vf-ficha .vf-cta-card .btn-ghost:hover { border-color: #fff; }

/* Footer propio de marca */
.vf-ficha .vf-foot { background: #0b1f3f; color: #c8d2e1; margin-top: 64px; padding: 56px 0 32px; font-size: 14px; }
.vf-ficha .vf-foot a { color: #c8d2e1; text-decoration: none; display: block; padding: 4px 0; }
.vf-ficha .vf-foot a:hover { color: #fff; }
.vf-ficha .vf-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
.vf-ficha .vf-foot-h { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 600; }
.vf-ficha .vf-foot-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.vf-ficha .vf-foot-mark { width: 28px; height: 28px; border-radius: 4px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.vf-ficha .vf-foot-mark::after { content: "✓"; color: #0b1f3f; font-size: 14px; font-weight: 700; line-height: 1; }
.vf-ficha .vf-foot-brand small { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a3; font-weight: 600; margin-top: -2px; }
.vf-ficha .vf-foot p { color: #8898b0; max-width: 32ch; font-size: 13px; line-height: 1.55; margin: 0; }
.vf-ficha .vf-foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; color: #8898b0; font-size: 13px; }
.vf-ficha .vf-foot-legal a { display: inline; padding: 0; color: #c8d2e1; }

/* ----- Responsive ----- */
@media (max-width: 1000px) {
  .vf-ficha .vf-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .vf-ficha .vf-photos { height: 280px; }
  .vf-ficha .vf-grid { grid-template-columns: 1fr; }
  .vf-ficha .vf-side { position: static; }
}
@media (max-width: 900px) {
  .vf-ficha .vf-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .vf-ficha .v-top-inner { gap: 14px; padding: 12px 16px; }
  .vf-ficha .v-nav { display: none; }
  .vf-ficha .v-brand small { display: none; }
  .vf-ficha .v-btn-link { display: none; }
}
@media (max-width: 700px) {
  .vf-ficha .vf-verif-grid { grid-template-columns: 1fr; }
  .vf-ficha .vf-article { padding: 24px; }
  .vf-ficha .vf-similar { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vf-ficha .vf-nap { grid-template-columns: 1fr; padding: 16px; }
  .vf-ficha .vf-foot-grid { grid-template-columns: 1fr; }
}