/* Catálogo — marketplace transaccional (CLAUDE.md §10): coral + amarillo. Onest. */
:root {
  --brand-primary: #E0492C;
  --brand-accent: #FFD45C;
  --brand-bg: #fffaf3;
  --brand-fg: #1f2937;
  --brand-muted: #6b7280;
  --brand-border: #fed7aa;
  --brand-radius: 10px;
  --brand-font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Coral oscuro para TEXTO y RELLENOS con texto encima.
     El coral de marca (#E0492C) da 4.07:1 con blanco: por debajo del 4.5:1 de WCAG AA, y
     14px en negrita NO cuenta como texto grande. Medido: blanco sobre #B73717 = 5.88:1.
     El coral de marca se queda para bordes, fondos suaves y acentos (donde no lleva texto
     encima), así que la identidad marketplace no cambia — solo deja de fallar el contraste
     justo en el botón que monetiza. */
  --brand-cta: #B73717;
  --brand-cta-hover: #8F2A11;
}
* { 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: #fff; 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; font-weight: 500; }
.meta-switch a:hover { text-decoration: underline; }
header.brand-header {
  padding: 20px 24px; display: flex; align-items: baseline; justify-content: space-between;
  background: linear-gradient(90deg, #fff 70%, var(--brand-accent) 100%);
  gap: 16px; flex-wrap: wrap;
}
/* La marca dejó de ser `<h1>` (un solo h1 por página). Mismo aspecto que antes. */
header.brand-header h1,
header.brand-header .brand-name {
  margin: 0; color: var(--brand-cta); font-weight: 800; font-size: 26px;
  text-decoration: none; line-height: 1.2;
}
header.brand-header .tagline { color: var(--brand-muted); font-size: 14px; }
@media (max-width: 560px) {
  header.brand-header { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  header.brand-header .brand-name { font-size: 21px; }
  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: #fff; padding: 24px; border-radius: var(--brand-radius);
  box-shadow: 0 4px 16px rgba(224,73,44,0.08);
  border-top: 4px solid var(--brand-primary);
}
.ficha-header h1 { margin-top: 0; color: var(--brand-primary); font-size: 28px; }
.ficha-header .verified-badge {
  display: inline-block; background: var(--brand-primary); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
/* Desborde horizontal en móvil (P0 en las 3 marcas): `minmax(0,1fr)` para que la columna
   pueda encogerse por debajo de su contenido mínimo + `overflow-wrap` para que una URL sin
   espacios tenga dónde partirse. Sin las dos, la dirección y la web salían del viewport. */
.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; }
/* Acotado a los enlaces de DATOS: `.ficha-header a` ganaba por especificidad a
   `.btn-primary` y le pisaba el color del texto. */
.ficha-header dl a { color: var(--brand-cta); font-weight: 500; }
.ficha-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  background: var(--brand-cta); color: #fff; padding: 12px 24px;
  border: 0; border-radius: var(--brand-radius); font-weight: 700;
  text-decoration: none; cursor: pointer; font-size: 14px;
  box-shadow: 0 2px 6px rgba(224,73,44,0.3);
}
.btn-primary:hover { background: var(--brand-cta-hover); }
.btn-secondary {
  background: var(--brand-accent); color: #1f2937; padding: 12px 24px;
  border: 0; border-radius: var(--brand-radius); text-decoration: none;
  font-weight: 700; font-size: 14px;
}
.disclaimer {
  background: #fef3c7; border-left: 4px solid #f59e0b; padding: 12px 16px;
  border-radius: var(--brand-radius); margin: 16px 0; font-size: 14px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: #fff; border: 1px solid var(--brand-border); border-radius: var(--brand-radius);
  padding: 16px; text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(224,73,44,0.15); }
/* 17px en negrita NO es "texto grande" en WCAG (hace falta ≥18.66px bold): el coral de
   marca sobre blanco da 4.07:1 y falla. El coral oscuro da 5.88:1 y se lee igual de
   marketplace. */
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--brand-cta); }
.card .meta { color: var(--brand-muted); font-size: 13px; }
.card .cta-mini {
  display: inline-block; margin-top: 8px; padding: 6px 12px;
  background: var(--brand-accent); color: #1f2937; border-radius: 6px;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.crumbs { font-size: 13px; color: var(--brand-muted); margin-bottom: 16px; }
.crumbs a { color: var(--brand-primary); text-decoration: none; font-weight: 500; }
.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: var(--brand-radius);
  color: var(--brand-primary); text-decoration: none; font-size: 14px; font-weight: 500;
}
.pagination .current { background: var(--brand-primary); color: #fff; }
.review { border-bottom: 1px dashed var(--brand-border); padding: 12px 0; }
.review .rating { color: var(--brand-primary); font-weight: 700; }
.review .author { color: var(--brand-muted); font-size: 13px; }
footer { background: var(--brand-primary); color: #fff; padding: 24px; text-align: center; font-size: 13px; margin-top: 40px; }
/* FAB del lead-drawer (Catálogo exclusivo, regla §4.8) */
.lead-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  background: var(--brand-primary); color: #fff; padding: 16px 24px;
  border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 16px rgba(224,73,44,0.4); cursor: pointer;
  text-decoration: none; border: 0;
}
.lead-fab:hover { background: #c63d22; }

/* ───────── P1 SSR — home rico (Catálogo marketplace · tono transaccional · emojis OK §0.5) ───────── */

.hero {
  background:
    radial-gradient(circle at 90% 0%, rgba(224,73,44,0.06), transparent 50%),
    var(--brand-bg);
  border-bottom: 1px solid var(--brand-border);
  padding: 56px 0 48px;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffe5dc;
  color: var(--brand-primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--brand-fg); }
.hero h1 .y { background: var(--brand-accent); padding: 0 6px; border-radius: 6px; }
.hero .lede { color: var(--brand-muted); font-size: 18px; max-width: 60ch; line-height: 1.5; margin: 0 0 28px; }

.big-search {
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0;
  max-width: 760px;
  box-shadow: 0 12px 32px -20px rgba(31,26,23,0.18), 0 2px 6px rgba(31,26,23,0.04);
  border: 1px solid var(--brand-border);
}
.big-search .field { padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.big-search .field + .field { border-left: 1px solid var(--brand-border); }
.big-search .field .lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-muted); font-weight: 700; }
.big-search .field input,
.big-search .field select {
  border: 0; outline: 0; padding: 4px 0; font-size: 15px; font-family: inherit;
  background: transparent; color: var(--brand-fg); width: 100%; font-weight: 500;
}
.big-search .field input::placeholder { color: var(--brand-muted); font-weight: 400; }
.big-search .submit {
  background: var(--brand-primary); color: #fff; border: 0; border-radius: 10px;
  padding: 0 24px; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; margin: 6px; min-width: 130px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.big-search .submit:hover { background: #c63d22; }
@media (max-width: 700px) {
  .big-search { grid-template-columns: 1fr; }
  .big-search .field + .field { border-left: 0; border-top: 1px solid var(--brand-border); }
  .big-search .submit { margin: 6px; padding: 14px; }
}

.hero-trust {
  margin-top: 32px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-trust .t { font-size: 13px; color: var(--brand-muted); }
.hero-trust .t b { display: block; font-size: 22px; color: var(--brand-fg); font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }

.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 .eyebrow .dot { color: var(--brand-primary); }
.section-head h2 { margin: 0; font-size: 28px; color: var(--brand-fg); }
.section-head .sub { color: var(--brand-muted); font-size: 15px; margin-top: 4px; }
.section-head a { color: var(--brand-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.cat-strip {
  background: #fff;
  padding: 28px 0;
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}
.cat-strip .rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .cat-strip .rail { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .cat-strip .rail { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 12px;
  transition: background .15s;
}
.cat-tile:hover { background: #ffe5dc; }
.cat-tile .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-bg);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.cat-tile .l { font-size: 13px; font-weight: 600; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } }

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

/* How it works — 3 pasos */
.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .how { grid-template-columns: 1fr; } }
.how-step {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px;
}
.how-step .num {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.how-step h3 { margin: 0 0 6px; font-size: 17px; }
.how-step p { color: var(--brand-muted); font-size: 14px; line-height: 1.5; margin: 0; }

/* Final CTA coral */
.final-cta {
  background: var(--brand-primary);
  color: #fff;
  border-radius: 16px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 32px;
}
@media (max-width: 1000px) { .final-cta { grid-template-columns: 1fr; padding: 32px; } }
.final-cta h2 { color: #fff; font-size: 32px; margin: 0 0 12px; letter-spacing: -0.01em; }
.final-cta p { color: rgba(255,255,255,0.85); margin: 0 0 18px; max-width: 50ch; }
.final-cta .btn-primary { background: var(--brand-fg); color: #fff; }
.final-cta .btn-primary:hover { background: #000; }
.final-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.final-cta .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.final-cta .price-tag { background: rgba(0,0,0,0.18); padding: 20px; border-radius: 12px; }
.final-cta .price-tag b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.final-cta .price-tag small { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.final-cta .price-tag .alt { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 8px; line-height: 1.5; }

/* Empty state */
.empty-state {
  margin-top: 16px;
  padding: 32px;
  border: 1px dashed var(--brand-border);
  border-radius: var(--brand-radius);
  background: #fff;
  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 sin estar definida) ───────── */
.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-fg);
  background: #fff; border-left: 4px 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: 700; }
.angle-nav a { color: var(--brand-cta); font-weight: 600; }
.ranking-link, .ver-todos { margin: 20px 0 0; font-size: 14px; }
.ver-todos a, .ranking-link a { color: var(--brand-cta); font-weight: 700; }

.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-cta); text-decoration: none; font-weight: 500; }
.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: 700; }
.footer-links a { color: inherit; }

/* ───────── 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; background: #fff;
  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). */
.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: #fff;
}
.galeria-nota { color: var(--brand-muted); font-size: 12px; margin: 8px 0 0; }

/* Red de seguridad global de desborde. */
img, video { max-width: 100%; height: auto; }
.container, main { overflow-wrap: break-word; }
/* ══════════════════════════════════════════════════════════════════
   DISEÑO APROBADO Catálogo (2026-09-07) — componentes globales.
   Lo específico de cada página va inline en su .hbs (la CSP no limita
   <style>, solo <script>). Las reglas de arriba NO se tocan: las
   páginas sin override propio (/terminos, /privacidad, 404, opt-out)
   siguen dependiendo de ellas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Cabecera sticky ── */
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #E8DFD2}
.top-inner{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--brand-fg);text-decoration:none;white-space:nowrap}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--brand-primary);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.brand-mark::after{content:"C"}
.brand:hover{color:var(--brand-primary)}
.nav{display:flex;gap:22px;margin-left:8px}
.nav a{color:#3B342E;font-weight:600;font-size:14px;text-decoration:none}
.nav a:hover{color:var(--brand-primary)}
.top .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn-ghost{display:inline-block;padding:9px 16px;border:1.5px solid var(--brand-border);border-radius:10px;background:#fff;color:var(--brand-fg);font-weight:700;font-size:14px;text-decoration:none;font-family:inherit}
.btn-ghost:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.btn-sm{padding:8px 14px;font-size:14px}
@media (max-width:860px){.nav{display:none}}
/* La cabecera en movil.
   Aqui habia `@media (max-width:560px){ .top .right .btn-ghost{display:none} }`, y
   `btn-ghost` NO EXISTE en el marcado del layout (0 apariciones): la cabecera usa
   `.btn-link` y `.btn.btn-primary`. Era una regla muerta, asi que la adaptacion a movil
   nunca llegaba a aplicarse y la cabecera desbordaba 81 px a lo ancho en un movil de
   390 px — medido EN PRODUCCION sobre /listings/acti-psicologos el 2026-09-08.
   No se veia en las homes porque las rediseñadas pintan su propia cabecera y ocultan
   esta; solo lo sufren las paginas que aun no se han portado, la ficha entre ellas.

   Se arregla en dos capas a proposito:
   1. Apuntar a lo que SI esta: en movil sobra "Acceder" (el enlace vive tambien en el
      pie y en el panel); el CTA de alta es lo que no puede perderse.
   2. Y un seguro estructural: `flex-wrap` + `min-width:0`. Sin el, basta con que
      mañana alguien alargue una etiqueta para reintroducir el desbordamiento. Con el,
      el CTA baja de linea en vez de sacar la pagina del viewport. */
.top-inner{flex-wrap:wrap}
.top-inner .brand{min-width:0}
@media (max-width:560px){
  .top .right .btn-ghost,
  .top .right .btn-link{display:none}
}

/* ── Footer tinta (5 columnas) ── */
.footer{background:#1F1A17;color:#D8D0C5;padding:48px 20px 28px;text-align:left}
.foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.foot-grid a{display:block;color:#D8D0C5;text-decoration:none;font-size:14px;margin-bottom:10px}
.foot-grid a:hover{color:#fff}
.foot-h{color:#79716A;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.brand-foot p{color:#A89F95;font-size:14px;line-height:1.6;margin:12px 0 0;max-width:280px}
.brand-foot .brand{color:#fff}
.brand-foot .brand-mark{width:26px;height:26px;font-size:14px}
.legal{max-width:1100px;margin:36px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#A89F95;font-size:13px}
.legal a{color:inherit;text-decoration:underline}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;gap:24px}}

/* ── meta-switch en tinta (diseño aprobado; gana por orden) ── */
.meta-switch{background:#1a1815;color:#BDB4A9}

/* ── Chips de filtro (enlaces estáticos, sin JS) ── */
.chip{display:inline-block;padding:7px 14px;border:1.5px solid var(--brand-border);border-radius:999px;background:#fff;color:#3B342E;font-weight:600;font-size:13px;text-decoration:none}
.chip:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.chip.on{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}

/* ── Valoración (solo se imprime cuando hay dato) ── */
.rating{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--brand-primary);font-size:13px}

/* ── Mini-botones de tarjeta ── */
.btn-mini{display:inline-block;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit}
.btn-mini.dark{background:#1F1A17;color:#fff}
.btn-mini.dark:hover{background:#000}
.btn-mini.coral{background:var(--brand-cta);color:#fff}
.btn-mini.coral:hover{background:var(--brand-cta-hover)}


/* ── 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 — Catálogo Servicios Locales (añadido 2026-09-08) ──
   Porta el diseño APROBADO del 2026-09-07. TODO el bloque va scoped bajo `.clf`
   (el wrapper de la página): ninguna regla global de la marca cambia. Los tokens
   --c-* se declaran en el propio .clf, no en :root, para no filtrarse a otras
   páginas. Contraste: rellenos con texto blanco usan --c-coral-dark (#B73717,
   5.88:1 con blanco); el coral de marca (#E0492C, 4.07:1) queda para bordes,
   tintes y acentos — es exactamente lo que el digest define como --brand-cta.
   ═══════════════════════════════════════════════════════════════════════ */
.clf {
  --c-coral: #E0492C;
  --c-coral-dark: #B73717;
  --c-coral-tint: #FFF2EB;
  --c-ink: #1F1A17;
  --c-ink-2: #3B342E;
  --c-mute: #79716A;
  --c-cream: #FAF6EF;
  --c-cream-2: #F4ECDF;
  --c-line: #E8DFD2;
  --c-paper: #ffffff;
  --c-yellow: #FFD45C;
  --c-green: #2D8F5C;
  font-family: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--c-ink);
  background: var(--c-cream);
  line-height: 1.5;
  padding-bottom: 8px;
}
.clf *, .clf *::before, .clf *::after { box-sizing: border-box; }
.clf h1, .clf h2, .clf h3, .clf h4 { letter-spacing: -0.02em; font-weight: 700; color: var(--c-ink); margin: 0; }
.clf h2 { font-size: 26px; line-height: 1.15; }
.clf h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.clf h4 { font-size: 16px; font-weight: 600; }

/* Migas */
.clf .clf-crumbs { padding: 20px 0 8px; font-size: 13px; color: var(--c-mute); }
.clf .clf-crumbs a { color: var(--c-mute); text-decoration: none; }
.clf .clf-crumbs a:hover { color: var(--c-coral); }
.clf .clf-crumbs .sep { margin: 0 8px; color: #c5beb4; }

/* Hero */
.clf .clf-hero { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.clf .clf-hero-grid { display: grid; grid-template-columns: 480px 1fr; min-height: 440px; }
.clf .clf-hero-grid > * { min-width: 0; }
.clf .clf-hero-photo { background-size: cover; background-position: center; position: relative; }
.clf .clf-hero-rating { position: absolute; bottom: 20px; right: 20px; background: rgba(31,26,23,.85); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.clf .clf-hero-rating .st { color: var(--c-yellow); }
.clf .clf-hero-info { padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.clf .clf-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-coral); font-weight: 700; }
.clf .clf-badges .chip { background: #fff; border: 1px solid var(--c-line); border-radius: 99px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.clf .clf-badges .chip.yellow { background: var(--c-yellow); border-color: var(--c-yellow); }
.clf .clf-hero-info h1 { font-size: clamp(30px, 3.2vw, 38px); line-height: 1.05; overflow-wrap: break-word; }
.clf .clf-deck { color: var(--c-ink-2); font-size: 15px; line-height: 1.6; max-width: 52ch; margin: 0; overflow-wrap: break-word; }
.clf .clf-rating-inline { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 0; }
.clf .clf-rating-inline .st { color: var(--c-coral-dark); }
.clf .clf-rating-inline .n { color: var(--c-mute); font-size: 13px; }
.clf .clf-nap { display: flex; flex-direction: column; gap: 10px; }
.clf .clf-nap .item { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--c-ink-2); overflow-wrap: anywhere; }
.clf .clf-nap .ic { width: 22px; text-align: center; flex-shrink: 0; }
.clf .clf-nap a { color: var(--c-coral-dark); text-decoration: none; font-weight: 600; }
.clf .clf-nap a:hover { text-decoration: underline; }
.clf .clf-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.clf .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 99px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; }
.clf .btn:active { transform: scale(.98); }
.clf .btn-primary { background: var(--c-coral-dark); color: #fff; }
.clf .btn-primary:hover { background: #8F2A11; }
.clf .btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.clf .btn-outline:hover { border-color: var(--c-ink); }
.clf .btn-dark { background: var(--c-ink); color: #fff; }
.clf .btn-dark:hover { background: #000; }
.clf .clf-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--c-yellow); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--c-ink-2); }
.clf .clf-notice a { color: var(--c-coral-dark); font-weight: 700; }
.clf .clf-notice--claim { background: var(--c-cream-2); border: 1px solid var(--c-line); }

/* Cuerpo */
.clf .clf-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; padding-bottom: 56px; }
.clf .clf-main { min-width: 0; }
.clf .clf-side { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.clf .clf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 32px; overflow-x: auto; }
.clf .clf-tabs:not(:has(a)) { display: none; }
.clf .clf-tabs a { padding: 12px 18px; text-decoration: none; color: var(--c-mute); font-size: 14px; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.clf .clf-tabs a:hover { color: var(--c-ink); }
.clf .clf-block { margin-bottom: 48px; }
.clf .clf-block h2 { font-size: 26px; margin-bottom: 16px; }
.clf .clf-prose { color: var(--c-ink-2); line-height: 1.65; font-size: 16px; margin: 0; }

/* Servicios */
.clf .clf-services { background: var(--c-paper); border-radius: 16px; border: 1px solid var(--c-line); overflow: hidden; }
.clf .svc-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-line); gap: 16px; }
.clf .svc-item:last-child { border-bottom: 0; }
.clf .svc-item h4 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.clf .svc-item .price { font-weight: 700; font-size: 16px; white-space: nowrap; }

/* Artículo editorial */
.clf .clf-article { background: var(--c-paper); border-radius: 20px; padding: 40px 44px; border: 1px solid var(--c-line); }
.clf .clf-article .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-coral-dark); font-weight: 700; margin: 0 0 8px; }
.clf .clf-article h2 { font-size: 26px; margin-bottom: 16px; }
.clf .clf-article p { color: var(--c-ink-2); line-height: 1.65; font-size: 16px; margin: 0; }
.clf .clf-article p + p { margin-top: 12px; }

/* Reseñas */
.clf .clf-rsum { display: flex; gap: 18px; align-items: center; background: var(--c-coral-tint); padding: 22px 24px; border-radius: 16px; margin-bottom: 18px; }
.clf .clf-rsum .big { font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.clf .clf-rsum .stars { font-size: 18px; color: var(--c-coral-dark); }
.clf .clf-rsum .out { font-size: 13px; color: var(--c-mute); margin-top: 4px; }
.clf .review { background: var(--c-paper); padding: 20px 22px; border-radius: 14px; border: 1px solid var(--c-line); margin-bottom: 12px; }
.clf .review .head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.clf .review .av { width: 36px; height: 36px; border-radius: 50%; background: var(--c-coral-dark); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.clf .review .nm { font-weight: 600; font-size: 14px; }
.clf .review .da { font-size: 12px; color: var(--c-mute); }
.clf .review .da .st { color: var(--c-coral-dark); }
.clf .review p { font-size: 14px; color: var(--c-ink-2); line-height: 1.55; margin: 0; }

/* Mapa decorativo (diseño aprobado; sin datos inventados de transporte) */
.clf .clf-map { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 50% 30%, #e8dec9, transparent 70%),
    linear-gradient(45deg, transparent 48%, #c9bcad 48%, #c9bcad 52%, transparent 52%) 0 0/50px 50px,
    linear-gradient(-45deg, transparent 48%, #c9bcad 48%, #c9bcad 52%, transparent 52%) 0 0/50px 50px,
    linear-gradient(180deg, #d8cdb8, #c7bba9);
}
.clf .clf-map .pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--c-coral-dark); color: #fff; padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,.25); overflow-wrap: anywhere; }
.clf .clf-map .pin::before { content: "📍 "; }
.clf .clf-map-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--c-mute); margin-top: 14px; align-items: center; }
.clf .clf-map-meta a { color: var(--c-coral-dark); text-decoration: none; font-weight: 600; }
.clf .clf-map-meta a:hover { text-decoration: underline; }

/* Otros negocios */
.clf .clf-similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.clf .clf-similar .it { background: var(--c-paper); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--c-line); display: flex; flex-direction: column; }
.clf .clf-similar .it:hover { border-color: var(--c-coral); }
.clf .clf-similar .ph { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.clf .clf-similar .ph-empty { display: grid; place-items: center; background: var(--c-cream-2); color: var(--c-coral); font-size: 40px; font-weight: 800; aspect-ratio: 4/3; }
.clf .clf-similar .body { padding: 14px 16px; }
.clf .clf-similar h4 { font-size: 14px; margin: 0 0 4px; overflow-wrap: anywhere; }
.clf .clf-similar .rt { font-size: 13px; color: var(--c-mute); }
.clf .clf-similar .rt .st { color: var(--c-coral-dark); }
.clf .clf-similar .info { font-size: 12px; color: var(--c-mute); margin-top: 4px; }
.clf .ver-todos { margin: 16px 0 0; }
.clf .ver-todos a { color: var(--c-coral-dark); font-weight: 600; text-decoration: none; }
.clf .ver-todos a:hover { text-decoration: underline; }
.clf .clf-artlist { margin: 0; padding: 0 0 0 18px; }
.clf .clf-artlist li { margin: 6px 0; }
.clf .clf-artlist a { color: var(--c-ink-2); }

/* Sidebar */
.clf .card-wrap { background: var(--c-paper); border-radius: 16px; padding: 24px; border: 1px solid var(--c-line); }
.clf .card-wrap > h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); font-weight: 700; margin: 0 0 14px; }
.clf .contact-card { background: var(--c-ink); color: #fff; border: 0; display: flex; flex-direction: column; gap: 8px; }
.clf .contact-card .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; margin-bottom: 6px; }
.clf .contact-card .phone { font-size: 28px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.clf .contact-card .btn-primary { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
.clf .contact-card .btn-soft { background: rgba(255,255,255,.1); color: #fff; width: 100%; justify-content: center; padding: 12px; }
.clf .contact-card .btn-soft:hover { background: rgba(255,255,255,.2); }
.clf .clf-hours { font-size: 14px; color: var(--c-ink-2); margin: 0 0 10px; }
.clf .clf-napside .row { display: flex; gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--c-line); font-size: 14px; }
.clf .clf-napside .row:last-child { border-bottom: 0; }
.clf .clf-napside .ic { font-size: 16px; min-width: 22px; }
.clf .clf-napside a { color: var(--c-coral-dark); text-decoration: none; font-weight: 600; }
.clf .request-quote { background: var(--c-yellow); border: 0; }
.clf .request-quote h3 { font-size: 17px; margin: 0 0 6px; }
.clf .request-quote p { font-size: 13px; color: var(--c-ink-2); line-height: 1.5; margin: 0 0 12px; }
.clf .request-quote .btn-dark { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.clf .clf-claim { background: var(--c-coral-tint); border-color: #FCE7DE; }
.clf .clf-claim h4 { color: var(--c-coral-dark); font-size: 14px; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.clf .clf-claim p { font-size: 13px; color: var(--c-ink-2); line-height: 1.5; margin: 0 0 12px; }
.clf .clf-claim a { font-size: 13px; font-weight: 600; color: var(--c-coral-dark); text-decoration: none; }
.clf .clf-claim a:hover { text-decoration: underline; }

/* Accesibilidad */
.clf a:focus-visible, .clf button:focus-visible { outline: 3px solid var(--c-coral); outline-offset: 2px; }

/* Responsive — ≤1000px: info ANTES que foto (§0.3 above-the-fold: sin este order:-1 el
   teléfono queda bajo el pliegue en móvil). ≤800px: relacionados a 1 columna. */
@media (max-width: 1000px) {
  .clf .clf-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .clf .clf-hero-info { order: -1; padding: 24px; }
  .clf .clf-hero-photo { min-height: 260px; }
  .clf .clf-grid { grid-template-columns: 1fr; gap: 32px; }
  .clf .clf-side { position: static; }
}
@media (max-width: 800px) {
  .clf .clf-similar { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .clf .clf-hero-info { padding: 20px 16px; }
  .clf .clf-article { padding: 24px; }
  .clf .clf-grid { padding-bottom: 40px; }
  .clf .contact-card .phone { font-size: 24px; }
  .clf .clf-rsum .big { font-size: 40px; }
}