:root {
    --color-primario: #0f766e;
    --color-primario-oscuro: #0b5a54;
    --color-acento: #f59e0b;
    --color-texto: #1f2937;
    --color-fondo: #f9fafb;
    --color-borde: #e5e7eb;
    --radio: 12px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-texto);
    background: var(--color-fondo);
}
a { text-decoration: none; color: inherit; }
.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.sitio-header { background: #fff; border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; z-index: 10; }
.barra-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.logo { font-weight: 700; font-size: 1.1rem; color: var(--color-primario); }
.nav-principal { display: flex; gap: 18px; font-size: 0.9rem; }
.nav-principal a:hover { color: var(--color-primario); }

.hero { background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro)); color: #fff; padding: 56px 16px; text-align: center; }
.hero h1 { font-size: 2rem; margin-bottom: 4px; }
.subtitulo { opacity: 0.9; margin-bottom: 24px; }

.buscador-grande { display: flex; max-width: 600px; margin: 0 auto; gap: 8px; }
.buscador-grande input { flex: 1; padding: 14px 18px; border-radius: 999px; border: none; font-size: 1rem; }
.buscador-grande button { padding: 14px 24px; border-radius: 999px; border: none; background: var(--color-acento); color: #fff; font-weight: 600; cursor: pointer; }
.buscador-compacto { margin: 24px 0; }

.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }

.tarjeta-categoria { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: box-shadow .2s; }
.tarjeta-categoria:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.tarjeta-categoria .icono { font-size: 1.8rem; }

.tarjeta-negocio { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); overflow: hidden; display: block; }
.tarjeta-negocio img { width: 100%; height: 140px; object-fit: cover; background: #eee; }
.tarjeta-negocio .info { padding: 12px; }
.tarjeta-negocio h3 { margin: 0 0 6px; font-size: 1rem; }

.insignia-verificado { color: #059669; font-size: 0.85rem; }
.insignia-pendiente { color: #d97706; font-size: 0.85rem; }
.insignia-desactualizado { color: #dc2626; font-size: 0.85rem; }

.accesos-rapidos { display: flex; gap: 16px; margin: 32px auto; flex-wrap: wrap; }
.acceso { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 16px 20px; flex: 1; text-align: center; font-weight: 600; }

.layout-resultados { display: grid; grid-template-columns: 240px 1fr; gap: 24px; margin-top: 16px; }
.filtros { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 16px; }
.filtros label { display: block; margin-top: 12px; font-size: 0.85rem; }
.filtros select, .filtros button { width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--color-borde); }
.vista-toggle { margin: 12px 0; }
.vista-toggle button { padding: 6px 14px; border: 1px solid var(--color-borde); background: #fff; cursor: pointer; }
.vista-toggle button.activo { background: var(--color-primario); color: #fff; }
.mapa-contenedor { background: #e5e7eb; border-radius: var(--radio); min-height: 320px; display: flex; align-items: center; justify-content: center; color: #6b7280; }

.ficha-negocio { padding: 24px 16px 60px; }
.ficha-negocio .foto-principal { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radio); }
.miniaturas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.miniaturas img { width: 90px; height: 70px; object-fit: cover; border-radius: 8px; }
.cabecera-negocio { margin-top: 20px; }
.cabecera-negocio h1 { margin-bottom: 4px; }
.categorias a { color: var(--color-primario); margin-right: 8px; font-size: 0.9rem; }
.estado-abierto { margin-left: 12px; font-size: 0.85rem; }

.botones-accion { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.boton { padding: 12px 20px; border-radius: 999px; font-weight: 600; display: inline-block; }
.boton-llamar { background: #2563eb; color: #fff; }
.boton-whatsapp { background: #16a34a; color: #fff; }
.boton-llegar { background: #f59e0b; color: #fff; }
.boton-web { background: #6b7280; color: #fff; }

.sitio-footer { background: #fff; border-top: 1px solid var(--color-borde); padding: 24px 16px; margin-top: 40px; text-align: center; font-size: 0.85rem; color: #6b7280; }
.nav-footer-movil { display: none; }

@media (max-width: 768px) {
    .layout-resultados { grid-template-columns: 1fr; }
    .nav-principal { display: none; }
    .nav-footer-movil {
        display: flex; justify-content: space-around; position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff; border-top: 1px solid var(--color-borde); padding: 10px; z-index: 20;
    }
}