/* FEAT-125 — Estilos de las páginas SEO locales (servicios/**). Mismos colores de marca que
   la app: #21383d (fondo oscuro), #3c777f (teal), #9c804e (dorado), #eceeea (fondo). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #eceeea; color: #292524; line-height: 1.6; }
a { color: #2f6d86; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.cabecera { background: #21383d; color: #fff; padding: 12px 0; }
.cabecera .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.marca { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; text-decoration: none; font-size: 1.05rem; }
.marca img { border-radius: 50%; background: #fff; }
.migas { font-size: .75rem; color: #9cc5c9; }
.migas a { color: #cfe3e5; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas .sep { opacity: .6; }

.hero { margin: 20px 0 16px; padding: 24px 20px; background: #fff; border-radius: 20px; border-top: 6px solid var(--color-cat, #3c777f); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.hero .icono { font-size: 2.25rem; line-height: 1; }
.hero h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); line-height: 1.2; margin: 8px 0; color: #21383d; }
.hero p { margin: 0 0 8px; color: #57534e; }

.bloque { background: #fff; border-radius: 20px; padding: 20px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bloque h2 { font-size: 1.2rem; color: #21383d; margin: 0 0 12px; line-height: 1.3; }
.bloque h3 { font-size: 1rem; color: #21383d; margin: 16px 0 8px; }
.bloque p { margin: 0 0 10px; }
.destacado { background: #f7f2e9; border: 1px solid #e7dcc6; }
.nota { font-size: .8rem; color: #78716c; margin-top: 12px !important; }

.checklist { padding-left: 1.2rem; margin: 0; }
.checklist li { margin-bottom: 6px; }

.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 14px; font-weight: 800; font-size: .9rem; text-decoration: none; text-align: center; }
.btn-teal { background: #3c777f; color: #fff; }
.btn-teal:hover { background: #2f6168; }
.btn-oro { background: #9c804e; color: #fff; }
.btn-oro:hover { background: #7d6539; }
.btn-claro { background: #fff; color: #21383d; border: 1.5px solid #d6d3d1; }
.btn-peq { min-height: 38px; padding: 8px 14px; font-size: .8rem; flex-shrink: 0; }

.lista-pros { display: flex; flex-direction: column; gap: 10px; }
.cargando, .contador { font-size: .85rem; color: #78716c; margin: 0; }
.pro { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e7e5e4; border-radius: 16px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #e3eef0; color: #21383d; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; }
.pro-datos { flex: 1; min-width: 0; }
.pro-datos h3 { margin: 0; font-size: .95rem; color: #21383d; overflow-wrap: anywhere; }
.pro-meta { margin: 2px 0 0 !important; font-size: .78rem; color: #78716c; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pro-precio { margin: 2px 0 0 !important; font-size: .8rem; font-weight: 700; color: #3c777f; }
.insignia { background: #fdf3dc; color: #7d6539; border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: .7rem; }
.vacio { padding: 16px; border: 1.5px dashed #d6d3d1; border-radius: 16px; }
.vacio.error { border-color: #e7b9a9; background: #fdf6f3; }
.vacio-titulo { font-weight: 800; color: #21383d; }

.faq { border-bottom: 1px solid #e7e5e4; padding: 10px 0; }
.faq:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-weight: 700; color: #21383d; }
.faq p { margin: 8px 0 0; color: #44403c; }

.enlaces ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.enlaces li a { display: inline-block; padding: 8px 12px; background: #f5f5f4; border-radius: 12px; text-decoration: none; color: #21383d; font-size: .85rem; font-weight: 600; }
.enlaces li a:hover { background: #e7e5e4; }
.rejilla-cats { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rejilla-cats li a { display: block; height: 100%; padding: 14px; font-size: .95rem; font-weight: 800; }
.rejilla-cats small { display: block; font-weight: 500; color: #78716c; margin-top: 4px; font-size: .78rem; }
.en-linea li a { font-size: .78rem; padding: 6px 10px; }

.pie { padding: 20px 0 32px; text-align: center; font-size: .75rem; color: #78716c; }
.pie a { color: #57534e; }
.pie p { margin: 4px 0; }

@media (max-width: 480px) {
  .pro { flex-wrap: wrap; }
  .pro .btn-peq { width: 100%; }
}